精简首页加载页并补充品牌标识

2026-07-13 17:37:41 +08:00
parent 140f13633e
commit d265089875
4 changed files with 132 additions and 234 deletions
--- a/design-qa.md
+++ b/design-qa.md
@@ -0,0 +1,40 @@
+# 加载页设计 QA
+
+- source visual truth path: `C:\Users\ADMINI~1\AppData\Local\Temp\codex-clipboard-6d038678-2d48-4ee0-b4fc-152d414e7184.png`
+- implementation screenshot path: `C:\Users\Administrator\AppData\Local\Temp\museum-launch-390x844.png`
+- comparison evidence path: `C:\Users\Administrator\AppData\Local\Temp\museum-launch-comparison.png`
+- viewport: `360x800`、`390x844`、`430x932`
+- state: 首页首次进入，加载层可见，加载进度进行中
+
+## Full-view Comparison Evidence
+
+白色全屏背景中仅保留彩色 Logo、英文馆名、中文馆名和原生进度动效。实现层级、内容顺序和居中关系与参考图一致，没有继续使用全屏背景图、蒙层、口号、状态卡或加载说明文案。
+
+## Focused Region Comparison Evidence
+
+对 Logo 与馆名区域进行了聚焦对比。Logo 使用参考图中的真实彩色图形资产，馆名使用页面文字以减少图片体积。360px、390px、430px 三档视口中 Logo 均完整加载，中英文馆名均未换行或溢出，进度动效可见。
+
+## Fidelity Surfaces
+
+- Fonts and typography: 英文使用无衬线字体栈并保持单行；中文使用宋体字体栈，字重和留白接近参考图。
+- Spacing and layout rhythm: Logo、英文、中文和进度条垂直居中排列，三档移动视口无裁切或重叠。
+- Colors and visual tokens: 白色背景、黑色馆名和博物馆黄绿色加载色符合现有品牌色。
+- Image quality and asset fidelity: Logo 来自参考图真实图形区域，WebP 尺寸为 `738x106`，约 12 KB；未使用 CSS 绘图、SVG 或占位图替代。
+- Copy and content: 英文馆名为 `SHENZHEN NATURAL HISTORY MUSEUM`，中文馆名为 `深圳自然博物馆`。
+
+## Findings
+
+无 P0、P1 或 P2 问题。
+
+## Patches Made
+
+- 移除旧的两张全屏加载图、蒙层、口号、状态卡、加载说明和恢复按钮。
+- 增加彩色 Logo 图形资产，馆名改为页面文字。
+- 保留现有加载进度、最短展示时间、模型完成、超时和淡出逻辑。
+- 修复本地验证环境中的旧 Vite 进程，确认新静态资源可正常加载。
+
+## Follow-up Polish
+
+无阻塞项。
+
+final result: passed
--- a/src/pages/index/index.vue
+++ b/src/pages/index/index.vue
@@ -263,38 +263,24 @@
      :class="{ leaving: launchOverlayLeaving }"
    >
      <view class="app-launch-stage">
-        <image
-          class="app-launch-image app-launch-image-lqip"
-          src="/static/guide/app-launch-loading-lqip.webp"
-          mode="aspectFill"
-        />
-        <image
-          class="app-launch-image app-launch-image-full"
-          :class="{ loaded: launchImageLoaded && !launchImageFailed }"
-          src="/static/guide/app-launch-loading.webp"
-          mode="aspectFill"
-          @load="handleLaunchImageLoad"
-          @error="handleLaunchImageError"
-        />
-        <view class="app-launch-shade"></view>
-        <view class="app-launch-brand">
-          <text class="app-launch-kicker">探索万物生息</text>
-          <text class="app-launch-title">深圳自然博物馆</text>
-          <text class="app-launch-subtitle">Shenzhen Natural History Museum</text>
-        </view>
-        <view class="app-launch-status">
-          <text class="app-launch-loading-text">{{ launchLoadingText }}</text>
-          <view class="app-launch-progress">
-            <view class="app-launch-progress-bar" :style="launchProgressStyle"></view>
-          </view>
-          <view v-if="launchOverlayRecoverable" class="app-launch-actions">
-            <view class="app-launch-action secondary" @tap="handleLaunchRetry">
-              <text class="app-launch-action-text">重新加载</text>
-            </view>
-            <view class="app-launch-action primary" @tap="handleLaunchContinue">
-              <text class="app-launch-action-text">继续进入</text>
-            </view>
-          </view>
+        <view class="app-launch-content">
+          <image
+            class="app-launch-logo"
+            src="/static/guide/museum-brand-icons.webp"
+            mode="widthFix"
+          />
+          <text class="app-launch-name-en">SHENZHEN NATURAL HISTORY MUSEUM</text>
+          <text class="app-launch-name-cn">深圳自然博物馆</text>
+          <progress
+            class="app-launch-progress"
+            :percent="launchProgress"
+            active
+            active-mode="forwards"
+            :stroke-width="3"
+            active-color="#e0e100"
+            background-color="#eceee7"
+            :show-info="false"
+          />
        </view>
      </view>
    </view>
@@ -381,7 +367,6 @@ const topTabFromHash = () => {
 const launchOverlayMinDisplayMs = 700
 const launchOverlayGuideTimeoutMs = 12000
 const launchOverlayNonGuideTimeoutMs = 900
-const launchOverlayDefaultText = '正在进入智能导览'

 const shouldShowLaunchOverlay = () => {
  if (typeof window === 'undefined') return false
@@ -407,11 +392,7 @@ const currentTab = ref<GuideTopTab>(initialTopTab())
 const launchOverlayVisible = ref(shouldShowLaunchOverlay())
 const launchOverlayLeaving = ref(false)
 const launchProgress = ref(8)
-const launchLoadingText = ref(launchOverlayDefaultText)
 const launchInitialModelSettled = ref(false)
-const launchOverlayRecoverable = ref(false)
-const launchImageLoaded = ref(false)
-const launchImageFailed = ref(false)
 const showRoutePlanner = ref(false)
 const routeStartPoint = ref<RoutePointOption | null>(null)
 const routeEndPoint = ref<RoutePointOption | null>(null)
@@ -448,10 +429,6 @@ let launchOverlayFadeTimer: ReturnType<typeof setTimeout> | null = null
 let launchOverlayHideDelayTimer: ReturnType<typeof setTimeout> | null = null
 let launchOverlayStartedAt = 0

-const launchProgressStyle = computed(() => ({
-  width: `${launchProgress.value}%`
-}))
-
 const clearLaunchTimers = () => {
  if (launchOverlayFallbackTimer) {
    clearTimeout(launchOverlayFallbackTimer)
@@ -515,8 +492,6 @@ const continueLaunchWithoutInitialModel = (reason: string, event?: { view: Guide
  })

  launchInitialModelSettled.value = true
-  launchOverlayRecoverable.value = false
-  launchLoadingText.value = launchOverlayDefaultText
  launchProgress.value = Math.max(launchProgress.value, 96)
  is3DMode.value = false
  guideOutdoorState.value = 'home'
@@ -531,10 +506,8 @@ const startLaunchOverlay = () => {

  clearLaunchTimers()
  launchInitialModelSettled.value = false
-  launchOverlayRecoverable.value = false
  launchOverlayStartedAt = Date.now()
  launchProgress.value = shouldWaitForLaunchModel() ? 8 : 68
-  launchLoadingText.value = launchOverlayDefaultText

  const timeoutMs = shouldWaitForLaunchModel()
    ? launchOverlayGuideTimeoutMs
@@ -552,52 +525,23 @@ const startLaunchOverlay = () => {
 const handleInitialModelProgress = (event: { progress: number; message: string; view: GuideIndoorView; floorId?: string; elapsedMs?: number }) => {
  if (!launchOverlayVisible.value || launchInitialModelSettled.value || !shouldWaitForLaunchModel()) return

-  launchOverlayRecoverable.value = false
  launchProgress.value = Math.min(99, Math.max(8, event.progress))
-  launchLoadingText.value = launchOverlayDefaultText
 }

 const settleLaunchOverlayByModel = (status: 'ready' | 'failed', event?: { view: GuideIndoorView; floorId?: string; message?: string; elapsedMs?: number }) => {
  launchInitialModelSettled.value = true
-  launchOverlayRecoverable.value = status === 'failed'

  if (status === 'failed') {
    continueLaunchWithoutInitialModel('failed', event)
    return
  } else {
    launchProgress.value = 100
-    launchLoadingText.value = launchOverlayDefaultText
    console.log('首页前置加载页收到初始模型加载完成:', event)
  }

  hideLaunchOverlay()
 }

-const handleLaunchRetry = () => {
-  if (typeof window !== 'undefined') {
-    window.location.reload()
-  }
-}
-
-const handleLaunchImageLoad = () => {
-  launchImageLoaded.value = true
-  launchImageFailed.value = false
-}
-
-const handleLaunchImageError = () => {
-  launchImageLoaded.value = false
-  launchImageFailed.value = true
-}
-
-const handleLaunchContinue = () => {
-  launchOverlayRecoverable.value = false
-  if (shouldWaitForLaunchModel() && !launchInitialModelSettled.value) {
-    continueLaunchWithoutInitialModel('manual')
-    return
-  }
-  hideLaunchOverlay()
-}
-
 const showArrivalPanel = ref(false)
 const showArrivalPanelCollapsed = ref(false)
 const arrivalPanelRef = ref<InstanceType<typeof ArrivalPanel> | null>(null)
@@ -1582,7 +1526,7 @@ const handleExplainBack = () => {
  display: flex;
  justify-content: center;
  overflow: hidden;
-  background: #e9e8dc;
+  background: #ffffff;
  opacity: 1;
  transition: opacity 0.36s ease, transform 0.36s ease;
 }
@@ -1594,194 +1538,82 @@ const handleExplainBack = () => {
 }

 .app-launch-stage {
-  position: relative;
  width: 100%;
  max-width: 430px;
  height: 100vh;
  height: 100dvh;
-  min-height: 560px;
-  overflow: hidden;
-  background:
-    radial-gradient(circle at 50% 20%, rgba(224, 225, 0, 0.24), rgba(224, 225, 0, 0) 34%),
-    linear-gradient(180deg, #f5f5ed 0%, #e1e5d9 42%, #151713 100%);
-  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
-}
-
-.app-launch-image {
-  position: absolute;
-  inset: 0;
-  z-index: 0;
-  width: 100%;
-  height: 100%;
-  transform-origin: center;
-}
-
-.app-launch-image-lqip {
-  filter: blur(10px);
-  transform: scale(1.08);
-}
-
-.app-launch-image-full {
-  opacity: 0;
-  transform: scale(1.01);
-  transition: opacity 0.24s ease;
-}
-
-.app-launch-image-full.loaded {
-  opacity: 1;
-}
-
-.app-launch-shade {
-  position: absolute;
-  inset: 0;
-  z-index: 1;
-  background:
-    linear-gradient(180deg, rgba(245, 245, 237, 0.92) 0%, rgba(245, 245, 237, 0.62) 24%, rgba(10, 12, 9, 0.08) 52%, rgba(0, 0, 0, 0.56) 100%),
-    linear-gradient(180deg, rgba(224, 225, 0, 0.28) 0, rgba(224, 225, 0, 0) 138px);
-}
-
-.app-launch-brand {
-  position: absolute;
-  z-index: 2;
-  top: calc(env(safe-area-inset-top) + 58px);
-  left: 24px;
-  right: 24px;
-  display: flex;
-  flex-direction: column;
-  gap: 6px;
-}
-
-.app-launch-kicker {
-  width: fit-content;
-  padding: 4px 8px;
-  box-sizing: border-box;
-  background: #000000;
-  font-size: 12px;
-  line-height: 17px;
-  font-weight: 700;
-  color: var(--museum-accent);
-}
-
-.app-launch-title {
-  font-size: 31px;
-  line-height: 39px;
-  font-weight: 800;
-  letter-spacing: 0;
-  color: #000000;
-  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.46);
-}
-
-.app-launch-subtitle {
-  max-width: 300px;
-  font-size: 14px;
-  line-height: 19px;
-  font-weight: 500;
-  color: #424754;
-}
-
-.app-launch-status {
-  position: absolute;
-  z-index: 2;
-  left: 24px;
-  right: 24px;
-  bottom: calc(env(safe-area-inset-bottom) + 56px);
-  padding: 16px;
-  box-sizing: border-box;
-  background: rgba(0, 0, 0, 0.88);
-  border: 1px solid rgba(224, 225, 0, 0.34);
-}
-
-.app-launch-loading-text {
-  display: block;
-  font-size: 15px;
-  line-height: 21px;
-  font-weight: 700;
-  color: #ffffff;
-}
-
-.app-launch-progress {
-  height: 4px;
-  margin-top: 12px;
-  overflow: hidden;
-  background: rgba(255, 255, 255, 0.18);
-}
-
-.app-launch-progress-bar {
-  height: 100%;
-  width: 18%;
-  background: var(--museum-accent);
-  transition: width 0.22s ease;
-}
-
-.app-launch-actions {
-  margin-top: 14px;
-  display: flex;
-  gap: 10px;
-}
-
-.app-launch-action {
-  height: 36px;
-  flex: 1;
+  min-height: 480px;
  display: flex;
  align-items: center;
  justify-content: center;
+  overflow: hidden;
+  background: #ffffff;
+}
+
+.app-launch-content {
+  width: 100%;
+  padding: 0 28px;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
  box-sizing: border-box;
-  border-radius: 8px;
+  transform: translateY(-3vh);
 }

-.app-launch-action.secondary {
-  background: rgba(255, 255, 255, 0.12);
-  border: 1px solid rgba(255, 255, 255, 0.38);
+.app-launch-logo {
+  width: min(84vw, 350px);
+  height: auto;
 }

-.app-launch-action.primary {
-  background: var(--museum-accent);
-  border: 1px solid var(--museum-accent);
-}
-
-.app-launch-action-text {
+.app-launch-name-en {
+  margin-top: 20px;
+  white-space: nowrap;
+  font-family: 'HarmonyOS Sans SC', 'HarmonyOS Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;
  font-size: 13px;
  line-height: 18px;
-  font-weight: 700;
-  color: #ffffff;
+  font-weight: 500;
+  letter-spacing: 0;
+  color: #262421;
 }

-.app-launch-action.primary .app-launch-action-text {
-  color: #151713;
+.app-launch-name-cn {
+  margin-top: 8px;
+  white-space: nowrap;
+  font-family: 'Songti SC', STSong, SimSun, serif;
+  font-size: 36px;
+  line-height: 48px;
+  font-weight: 500;
+  letter-spacing: 0;
+  color: #000000;
+}
+
+.app-launch-progress {
+  width: 112px;
+  margin-top: 32px;
 }

@media (max-width: 360px) {
-  .app-launch-brand {
-    top: calc(env(safe-area-inset-top) + 48px);
-    left: 20px;
-    right: 20px;
+  .app-launch-content {
+    padding: 0 24px;
  }

-  .app-launch-title {
-    font-size: 28px;
-    line-height: 36px;
+  .app-launch-logo {
+    width: calc(100vw - 52px);
  }

-  .app-launch-subtitle {
-    font-size: 13px;
-    line-height: 18px;
-  }
-
-  .app-launch-status {
-    left: 20px;
-    right: 20px;
-    bottom: calc(env(safe-area-inset-bottom) + 42px);
-    padding: 14px;
+  .app-launch-name-cn {
+    font-size: 32px;
+    line-height: 43px;
  }
 }

@media (max-height: 680px) {
-  .app-launch-brand {
-    top: calc(env(safe-area-inset-top) + 38px);
+  .app-launch-content {
+    transform: translateY(-1vh);
  }

-  .app-launch-status {
-    bottom: calc(env(safe-area-inset-bottom) + 32px);
+  .app-launch-progress {
+    margin-top: 26px;
  }
 }

--- a/static/guide/museum-brand-icons.webp
+++ b/static/guide/museum-brand-icons.webp
--- a/tests/unit/IndexLaunchOverlay.spec.ts
+++ b/tests/unit/IndexLaunchOverlay.spec.ts
@@ -0,0 +1,26 @@
+import { readFileSync } from 'node:fs'
+import { fileURLToPath, URL } from 'node:url'
+import { describe, expect, it } from 'vitest'
+
+const indexPageSource = readFileSync(
+  fileURLToPath(new URL('../../src/pages/index/index.vue', import.meta.url)),
+  'utf8'
+)
+
+const launchOverlaySource = indexPageSource.slice(
+  indexPageSource.indexOf('v-if="launchOverlayVisible"'),
+  indexPageSource.indexOf('</GuidePageFrame>')
+)
+
+describe('首页精简加载页', () => {
+  it('仅展示图形标识、文字馆名和原生加载动效', () => {
+    expect(launchOverlaySource).toContain('/static/guide/museum-brand-icons.webp')
+    expect(launchOverlaySource).toContain('SHENZHEN NATURAL HISTORY MUSEUM')
+    expect(launchOverlaySource).toContain('深圳自然博物馆')
+    expect(launchOverlaySource).toContain('<progress')
+    expect(launchOverlaySource).not.toContain('app-launch-loading-lqip.webp')
+    expect(launchOverlaySource).not.toContain('app-launch-loading.webp')
+    expect(launchOverlaySource).not.toContain('app-launch-kicker')
+    expect(launchOverlaySource).not.toContain('app-launch-status')
+  })
+})