优化导览预览与讲解展示层

2026-06-25 02:48:33 +08:00
parent 19516a507b
commit 33641e75df
17 changed files with 1224 additions and 793 deletions
--- a/src/pages/hall/detail.vue
+++ b/src/pages/hall/detail.vue
@@ -2,70 +2,83 @@
  <GuidePageFrame
    :active-tab="activeTopTab"
    variant="static"
+    :show-top-tabs="false"
    show-back
-    @tab-change="handleTopTabChange"
    @back="handleBack"
  >
-    <view class="detail-page">
-      <scroll-view class="content" scroll-y>
-        <!-- 展厅封面 -->
-        <view class="hall-hero">
-          <image class="hero-image" :src="hall.image" mode="aspectFill" />
-          <view class="hall-badge">
-            <text class="badge-text">{{ hall.floorLabel }}</text>
+    <view class="hall-explain-page">
+      <scroll-view class="content" scroll-y :show-scrollbar="false">
+        <view class="page-head">
+          <text class="hall-title">{{ hall.name }}</text>
+          <view class="hall-meta-row">
+            <text class="hall-meta">{{ hall.floorLabel }} · {{ explainCountText }}</text>
+            <view
+              class="location-action"
+              :class="{ disabled: !hall.poiId }"
+              @tap="handleNavigate"
+            >
+              <svg class="location-icon" width="16" height="16" viewBox="0 0 24 24" fill="none">
+                <path d="M12 21C12 21 18 14.9 18 9.8C18 6.5 15.3 4 12 4C8.7 4 6 6.5 6 9.8C6 14.9 12 21 12 21Z" stroke="currentColor" stroke-width="1.7"/>
+                <circle cx="12" cy="10" r="2.2" stroke="currentColor" stroke-width="1.7"/>
+              </svg>
+              <text class="location-text">查看展厅位置</text>
+            </view>
          </view>
        </view>

-        <!-- 展厅信息 -->
-        <view class="hall-info">
-          <text class="hall-title">{{ hall.name }}</text>
-          <text class="hall-description">{{ hall.description }}</text>
+        <view v-if="loading" class="state-block">
+          <text class="state-title">正在加载讲解列表</text>
+          <text class="state-desc">稍后将展示该展厅下的讲解内容。</text>
+        </view>

-          <view class="stats-row">
-            <view class="stat-item">
-              <text class="stat-value">{{ hall.exhibitCount }}</text>
-              <text class="stat-label">讲解内容</text>
-            </view>
-            <view class="stat-item">
-              <text class="stat-value">{{ hall.floorLabel }}</text>
-              <text class="stat-label">所在楼层</text>
-            </view>
-          </view>
+        <view v-else-if="error" class="state-block error">
+          <text class="state-title">讲解列表加载失败</text>
+          <text class="state-desc">{{ error }}</text>
+        </view>

-          <!-- 讲解列表 -->
-          <view class="exhibits-section">
-            <text class="section-title">空间讲解内容</text>
-            <view class="exhibits-grid">
-              <ExhibitCard
-                v-for="exhibit in exhibits"
-                :key="exhibit.id"
-                :exhibit="exhibit"
-                @click="handleExhibitClick"
-              />
+        <view v-else-if="exhibits.length" class="explain-list">
+          <view
+            v-for="exhibit in exhibits"
+            :key="exhibit.id"
+            class="explain-item"
+            @tap="handleExhibitClick(exhibit)"
+          >
+            <view
+              class="explain-icon"
+              :class="{ playable: exhibit.audioStatus === 'playable' }"
+            >
+              <svg v-if="exhibit.audioStatus === 'playable'" width="22" height="22" viewBox="0 0 24 24" fill="none">
+                <path d="M8 5V19L19 12L8 5Z" fill="currentColor"/>
+              </svg>
+              <svg v-else width="22" height="22" viewBox="0 0 24 24" fill="none">
+                <path d="M7 3.5H14.5L18 7V20.5H7V3.5Z" fill="#747970"/>
+                <path d="M14.5 3.5V7H18" fill="#b8bcb4"/>
+                <path d="M9.5 11H15.5M9.5 14H15.5M9.5 17H13.5" stroke="white" stroke-width="1.2" stroke-linecap="round"/>
+              </svg>
            </view>
+
+            <view class="explain-main">
+              <text class="explain-title">{{ exhibit.title }}</text>
+              <text class="explain-meta">{{ itemMeta(exhibit) }}</text>
+            </view>
+
+            <text class="item-arrow">›</text>
          </view>
        </view>
+
+        <view v-else class="state-block empty">
+          <text class="state-title">暂无讲解内容</text>
+          <text class="state-desc">该展厅暂未接入可展示的讲解条目。</text>
+        </view>
      </scroll-view>
-
-      <!-- 底部操作栏 -->
-      <view class="action-bar">
-        <view
-          class="action-btn primary"
-          :class="{ disabled: !hall.location?.poiId }"
-          @tap="handleNavigate"
-        >
-          <text class="btn-text">{{ hall.location?.actionText || '暂无位置' }}</text>
-        </view>
-      </view>
    </view>
  </GuidePageFrame>
 </template>

 <script setup lang="ts">
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import GuidePageFrame from '@/components/navigation/GuidePageFrame.vue'
-import ExhibitCard from '@/components/content/ExhibitCard.vue'
 import {
  explainUseCase
 } from '@/usecases/explainUseCase'
@@ -80,15 +93,16 @@ import {
 } from '@/view-models/explainViewModels'
 import {
  isGuideTopTab,
-  navigateToGuideTopTab,
  type GuideTopTab
 } from '@/utils/guideTopTabs'

-const activeTopTab = ref<GuideTopTab>('guide')
+const activeTopTab = ref<GuideTopTab>('explain')
+const loading = ref(false)
+const error = ref('')

 const hall = ref<HallDetailViewModel>({
  id: '',
-  name: '展厅内容',
+  name: '展厅讲解',
  floorLabel: '楼层待补充',
  description: '该展厅暂无介绍文案。',
  image: '/static/hall-placeholder.jpg',
@@ -98,25 +112,53 @@ const hall = ref<HallDetailViewModel>({

 const exhibits = ref<ExplainExhibitViewModel[]>([])

-onLoad(async (options: any) => {
-  if (options.id) {
-    const hallData = await explainUseCase.getHallById(options.id)
-    if (hallData) {
-      hall.value = toHallDetailViewModel(hallData)
-      const hallExhibits = await explainUseCase.listExhibitsByHallId(hallData.id)
-      exhibits.value = hallExhibits.map(toExplainExhibitViewModel)
-    }
-  }
+const explainCountText = computed(() => (
+  exhibits.value.length > 0 ? `${exhibits.value.length} 条讲解` : '暂无讲解'
+))

+onLoad(async (options: any = {}) => {
  const tab = Array.isArray(options.tab) ? options.tab[0] : options.tab
  if (isGuideTopTab(tab)) {
    activeTopTab.value = tab
  }
+
+  const hallId = Array.isArray(options.id) ? options.id[0] : options.id
+  if (!hallId) {
+    error.value = '缺少展厅信息'
+    return
+  }
+
+  loading.value = true
+  error.value = ''
+
+  try {
+    const hallData = await explainUseCase.getHallById(hallId)
+    if (!hallData) {
+      error.value = '未找到该展厅'
+      return
+    }
+
+    hall.value = toHallDetailViewModel(hallData)
+    const hallExhibits = await explainUseCase.listExhibitsByHallId(hallData.id)
+    exhibits.value = hallExhibits.map(toExplainExhibitViewModel)
+  } catch (err) {
+    console.error('加载展厅讲解失败:', err)
+    error.value = '展厅讲解加载失败，请稍后重试'
+  } finally {
+    loading.value = false
+  }
 })

-const handleExhibitClick = (exhibit: any) => {
+const itemMeta = (exhibit: ExplainExhibitViewModel) => {
+  if (exhibit.audioStatus === 'playable') {
+    return [exhibit.durationLabel, '音频讲解'].filter(Boolean).join(' · ') || '音频讲解'
+  }
+  return '图文讲解'
+}
+
+const handleExhibitClick = (exhibit: ExplainExhibitViewModel) => {
  uni.navigateTo({
-    url: `/pages/exhibit/detail?id=${exhibit.id}&tab=${activeTopTab.value}`
+    url: `/pages/exhibit/detail?id=${encodeURIComponent(exhibit.id)}&tab=${activeTopTab.value}`
  })
 }

@@ -132,7 +174,7 @@ const handleNavigate = async () => {
  const matchedPoi = await guideUseCase.getPoiById(hall.value.poiId)
  if (!matchedPoi) {
    uni.showToast({
-      title: '该空间位置尚未映射到当前三维导览资源',
+      title: '该展厅位置尚未映射到当前三维导览资源',
      icon: 'none'
    })
    return
@@ -143,10 +185,6 @@ const handleNavigate = async () => {
  })
 }

-const handleTopTabChange = (tab: GuideTopTab) => {
-  navigateToGuideTopTab(tab)
-}
-
 const handleBack = () => {
  uni.navigateBack({
    delta: 1,
@@ -160,148 +198,186 @@ const handleBack = () => {
 </script>

 <style scoped lang="scss">
-.detail-page {
+.hall-explain-page {
+  position: relative;
  width: 100%;
  height: 100%;
-  overflow-x: hidden;
-  background-color: var(--museum-bg-light);
-  display: flex;
-  flex-direction: column;
+  overflow: hidden;
+  background: #f9fafb;
 }

 .content {
-  flex: 1;
-  width: 100%;
-  box-sizing: border-box;
-  overflow-y: auto;
-}
-
-.hall-hero {
-  position: relative;
-  width: 100%;
-  height: 240px;
-  background-color: var(--museum-bg-map);
-}
-
-.hero-image {
-  width: 100%;
  height: 100%;
-}
-
-.hall-badge {
-  position: absolute;
-  top: 16px;
-  right: 16px;
-  background-color: rgba(0, 0, 0, 0.6);
-  backdrop-filter: var(--blur-medium);
-  padding: 6px 12px;
-  border-radius: 16px;
-}
-
-.badge-text {
-  font-size: 14px;
-  color: var(--museum-bg-surface);
-  font-weight: 500;
-}
-
-.hall-info {
-  padding: 24px 16px;
+  padding: 84px 20px calc(28px + env(safe-area-inset-bottom));
  box-sizing: border-box;
-  background-color: var(--museum-bg-surface);
+}
+
+.page-head {
+  padding-bottom: 24px;
+}
+
+.hall-title,
+.hall-meta,
+.location-text,
+.state-title,
+.state-desc,
+.explain-title,
+.explain-meta {
+  display: block;
 }

 .hall-title {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--museum-text-primary);
-  margin-bottom: 12px;
-  display: block;
+  font-size: 29px;
+  line-height: 38px;
+  font-weight: 800;
+  color: #151713;
 }

-.hall-description {
-  font-size: 14px;
-  line-height: 1.6;
-  color: var(--museum-text-secondary);
-  margin-bottom: 24px;
-  display: block;
-}
-
-.stats-row {
+.hall-meta-row {
+  margin-top: 10px;
  display: flex;
-  gap: 24px;
-  padding: 16px;
-  box-sizing: border-box;
-  background-color: var(--museum-bg-light);
-  border-radius: var(--radius-card);
-  margin-bottom: 24px;
-}
-
-.stat-item {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
  align-items: center;
-  gap: 4px;
-}
-
-.stat-value {
-  font-size: 24px;
-  font-weight: 700;
-  color: var(--museum-text-primary);
-}
-
-.stat-label {
-  font-size: 12px;
-  color: var(--museum-text-disabled);
-}
-
-.exhibits-section {
-  margin-top: 24px;
-}
-
-.section-title {
-  font-size: 18px;
-  font-weight: 600;
-  color: var(--museum-text-primary);
-  margin-bottom: 16px;
-  display: block;
-}
-
-.exhibits-grid {
-  display: grid;
-  grid-template-columns: 1fr;
+  justify-content: space-between;
  gap: 12px;
 }

-.action-bar {
-  background-color: var(--museum-bg-surface);
-  border-top: 1px solid var(--museum-border-light);
-  padding: 12px 16px;
-  padding-bottom: calc(12px + env(safe-area-inset-bottom));
-  box-sizing: border-box;
-}
-
-.action-btn {
-  width: 100%;
-  padding: 14px;
-  box-sizing: border-box;
-  border-radius: var(--radius-button);
-  text-align: center;
-  cursor: pointer;
-  transition: all 0.3s;
-}
-
-.action-btn.primary {
-  background-color: var(--museum-accent);
-}
-
-.action-btn:active {
-  opacity: 0.8;
-}
-
-.btn-text {
+.hall-meta {
+  min-width: 0;
+  flex: 1;
  font-size: 16px;
-  font-weight: 500;
-  color: var(--museum-text-primary);
+  line-height: 22px;
+  color: #4f574b;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.location-action {
+  flex-shrink: 0;
+  height: 38px;
+  padding: 0 11px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border: 1px solid #d8dcd3;
+  border-radius: 8px;
+  color: #151713;
+}
+
+.location-action.disabled {
+  color: #8d9488;
+  background: #f2f4ef;
+}
+
+.location-icon {
+  flex-shrink: 0;
+}
+
+.location-text {
+  font-size: 13px;
+  line-height: 18px;
+  font-weight: 600;
+  color: currentColor;
+}
+
+.explain-list {
+  display: flex;
+  flex-direction: column;
+  gap: 14px;
+}
+
+.explain-item {
+  min-height: 96px;
+  padding: 14px 13px 14px 16px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  box-sizing: border-box;
+  background: #ffffff;
+  border: 1px solid #e4e6df;
+  border-radius: 8px;
+  box-shadow: 0 8px 18px rgba(36, 49, 42, 0.05);
+}
+
+.explain-item:active {
+  background: #f7f8f3;
+}
+
+.explain-icon {
+  flex-shrink: 0;
+  width: 46px;
+  height: 46px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #747970;
+  background: #f0f2ed;
+  border-radius: 8px;
+}
+
+.explain-icon.playable {
+  color: #151713;
+  background: #e0df00;
+}
+
+.explain-main {
+  flex: 1;
+  min-width: 0;
+}
+
+.explain-title {
+  font-size: 17px;
+  line-height: 24px;
+  font-weight: 800;
+  color: #151713;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.explain-meta {
+  margin-top: 6px;
+  font-size: 15px;
+  line-height: 21px;
+  color: #555c51;
+}
+
+.item-arrow {
+  flex-shrink: 0;
+  font-size: 30px;
+  line-height: 30px;
+  color: #151713;
+}
+
+.state-block {
+  margin: 28px 0;
+  padding: 22px 16px;
+  box-sizing: border-box;
+  text-align: center;
+  background: #ffffff;
+  border: 1px solid #e4e6df;
+  border-radius: 8px;
+}
+
+.state-title {
+  font-size: 15px;
+  line-height: 21px;
+  font-weight: 700;
+  color: #151713;
+}
+
+.state-desc {
+  margin-top: 6px;
+  font-size: 12px;
+  line-height: 18px;
+  color: #68725d;
+}
+
+.state-block.error {
+  border-color: #e5c2c2;
+  background: #fff7f7;
 }
 </style>