处理修复BUG

frontend-vue/src/pages/image-video/ImageVideoPage.vue

@@ -25,6 +25,19 @@
     <div class="toast" :class="{ show: Boolean(statusText), error: statusType === 'error' }">
       {{ statusText }}
     </div>
+
+    <section v-if="launching || launchProgress.stage" class="launch-progress" :class="{ error: launchProgress.stage === 'failed' }">
+      <div class="launch-progress__head">
+        <span>{{ launchProgress.message || '正在准备数字人程序...' }}</span>
+        <strong>{{ launchProgress.percent }}%</strong>
+      </div>
+      <div class="launch-progress__track">
+        <div class="launch-progress__bar" :style="{ width: `${launchProgress.percent}%` }"></div>
+      </div>
+      <div v-if="launchProgress.total > 0" class="launch-progress__meta">
+        {{ formatBytes(launchProgress.downloaded) }} / {{ formatBytes(launchProgress.total) }}
+      </div>
+    </section>
   </div>
 
   <PageShell v-else theme="dark">
@@ -50,7 +63,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue'
+import { onBeforeUnmount, ref } from 'vue'
 
 import PageShell from '@/components/layout/PageShell.vue'
 import BrandTopBar from '@/pages/brand/components/BrandTopBar.vue'
@@ -63,7 +76,15 @@ const currentView = ref<ViewMode>('menu')
 const launching = ref(false)
 const statusText = ref('')
 const statusType = ref<'normal' | 'error'>('normal')
+const launchProgress = ref({
+  stage: '',
+  message: '',
+  percent: 0,
+  downloaded: 0,
+  total: 0,
+})
 let statusTimer: number | undefined
+let launchProgressTimer: number | undefined
 
 function showStatus(message: string, type: 'normal' | 'error' = 'normal') {
   statusText.value = message
@@ -84,6 +105,59 @@ function openDeliveryWorkspace() {
   currentView.value = 'delivery'
 }
 
+function formatBytes(value: number) {
+  const size = Number(value || 0)
+  if (!Number.isFinite(size) || size <= 0) return '未知大小'
+  if (size < 1024) return `${size} B`
+  if (size < 1024 * 1024) return `${(size / 1024).toFixed(1)} KB`
+  if (size < 1024 * 1024 * 1024) return `${(size / 1024 / 1024).toFixed(1)} MB`
+  return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`
+}
+
+function resetLaunchProgress() {
+  launchProgress.value = {
+    stage: '',
+    message: '',
+    percent: 0,
+    downloaded: 0,
+    total: 0,
+  }
+}
+
+function handleLaunchProgress(event: Event) {
+  const detail = (event as CustomEvent<{
+    stage?: string
+    message?: string
+    percent?: number
+    downloaded?: number
+    total?: number
+  }>).detail
+  if (!detail) return
+  launchProgress.value = {
+    stage: detail.stage || '',
+    message: detail.message || '',
+    percent: Math.max(0, Math.min(100, Math.round(Number(detail.percent || 0)))),
+    downloaded: Number(detail.downloaded || 0),
+    total: Number(detail.total || 0),
+  }
+  if (launchProgressTimer) {
+    window.clearTimeout(launchProgressTimer)
+  }
+  if (detail.stage === 'success') {
+    launchProgressTimer = window.setTimeout(resetLaunchProgress, 1800)
+  }
+}
+
+if (typeof window !== 'undefined') {
+  window.addEventListener('pywebview-yaoayanui-progress', handleLaunchProgress)
+}
+
+onBeforeUnmount(() => {
+  if (statusTimer) window.clearTimeout(statusTimer)
+  if (launchProgressTimer) window.clearTimeout(launchProgressTimer)
+  window.removeEventListener('pywebview-yaoayanui-progress', handleLaunchProgress)
+})
+
 async function launchDesktop() {
   const api = getPywebviewApi()
   if (!api?.launch_yaoayanui) {
@@ -92,15 +166,45 @@ async function launchDesktop() {
   }
 
   launching.value = true
+  launchProgress.value = {
+    stage: 'checking',
+    message: '正在检查本地数字人程序...',
+    percent: 0,
+    downloaded: 0,
+    total: 0,
+  }
   try {
     const result = await api.launch_yaoayanui()
     if (result?.success) {
       showStatus('已发送启动请求')
+      if (!launchProgress.value.stage || launchProgress.value.stage === 'checking') {
+        launchProgress.value = {
+          stage: 'success',
+          message: '数字人程序已启动',
+          percent: 100,
+          downloaded: 0,
+          total: 0,
+        }
+        launchProgressTimer = window.setTimeout(resetLaunchProgress, 1800)
+      }
       return
     }
+    launchProgress.value = {
+      ...launchProgress.value,
+      stage: 'failed',
+      message: result?.error || '启动失败',
+      percent: 0,
+    }
     showStatus(result?.error || '启动失败', 'error')
   } catch (error) {
-    showStatus(error instanceof Error ? error.message : String(error), 'error')
+    const message = error instanceof Error ? error.message : String(error)
+    launchProgress.value = {
+      ...launchProgress.value,
+      stage: 'failed',
+      message,
+      percent: 0,
+    }
+    showStatus(message, 'error')
   } finally {
     launching.value = false
   }
@@ -212,6 +316,74 @@ async function launchDesktop() {
   background: rgba(176, 42, 55, 0.92);
 }
 
+.launch-progress {
+  position: fixed;
+  left: 50%;
+  bottom: 96px;
+  width: min(520px, calc(100vw - 48px));
+  padding: 14px 16px;
+  border: 1px solid rgba(102, 126, 234, 0.28);
+  border-radius: 8px;
+  background: rgba(255, 255, 255, 0.92);
+  box-shadow: 0 10px 28px rgba(20, 32, 55, 0.16);
+  transform: translateX(-50%);
+}
+
+.launch-progress.error {
+  border-color: rgba(176, 42, 55, 0.34);
+}
+
+.launch-progress__head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  color: #2d3748;
+  font-size: 14px;
+}
+
+.launch-progress__head span {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.launch-progress__head strong {
+  color: #4456c9;
+  font-size: 13px;
+}
+
+.launch-progress.error .launch-progress__head strong {
+  color: #b02a37;
+}
+
+.launch-progress__track {
+  height: 8px;
+  margin-top: 10px;
+  overflow: hidden;
+  border-radius: 999px;
+  background: #e6ebf5;
+}
+
+.launch-progress__bar {
+  height: 100%;
+  border-radius: inherit;
+  background: linear-gradient(90deg, #667eea, #52c2ff);
+  transition: width 0.2s ease;
+}
+
+.launch-progress.error .launch-progress__bar {
+  background: #b02a37;
+}
+
+.launch-progress__meta {
+  margin-top: 7px;
+  color: #68758a;
+  font-size: 12px;
+  text-align: right;
+}
+
 .delivery-page {
   min-height: 100vh;
   background: #0f0f0f;