更新新需求-采集

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

@@ -1,11 +1,11 @@
 <template>
-  <div class="image-video-page">
+  <div v-if="currentView === 'menu'" class="image-video-page">
     <header class="page-header">
       <span class="header-title">数富AI</span>
       <a class="back-link" href="/home">返回首页</a>
     </header>
 
-    <main class="entrances" aria-label="图生视频入口">
+    <main class="entrances" aria-label="视频入口">
       <button
         type="button"
         class="entrance-btn"
@@ -14,7 +14,7 @@
       >
         数字人
       </button>
-      <button type="button" class="entrance-btn" @click="showSoon('带货视频')">
+      <button type="button" class="entrance-btn" @click="openDeliveryWorkspace">
         带货视频
       </button>
       <button type="button" class="entrance-btn" @click="showSoon('混剪')">
@@ -26,12 +26,40 @@
       {{ statusText }}
     </div>
   </div>
+
+  <PageShell v-else theme="dark">
+    <div class="delivery-page">
+      <BrandTopBar
+        active="image-video"
+        :show-nav="false"
+        :show-home-link="false"
+        :show-actions="false"
+      >
+        <template #logoExtra>
+          <button type="button" class="delivery-page__top-return" @click="currentView = 'menu'">
+            返回二级菜单
+          </button>
+        </template>
+      </BrandTopBar>
+
+      <main class="delivery-page__body">
+        <DeliveryVideoWorkspace />
+      </main>
+    </div>
+  </PageShell>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
+
+import PageShell from '@/components/layout/PageShell.vue'
+import BrandTopBar from '@/pages/brand/components/BrandTopBar.vue'
+import DeliveryVideoWorkspace from '@/pages/image-video/components/DeliveryVideoWorkspace.vue'
 import { getPywebviewApi } from '@/shared/bridges/pywebview'
 
+type ViewMode = 'menu' | 'delivery'
+
+const currentView = ref<ViewMode>('menu')
 const launching = ref(false)
 const statusText = ref('')
 const statusType = ref<'normal' | 'error'>('normal')
@@ -52,6 +80,10 @@ function showSoon(name: string) {
   showStatus(`${name}暂未开通，敬请期待`)
 }
 
+function openDeliveryWorkspace() {
+  currentView.value = 'delivery'
+}
+
 async function launchDesktop() {
   const api = getPywebviewApi()
   if (!api?.launch_yaoayanui) {
@@ -180,6 +212,32 @@ async function launchDesktop() {
   background: rgba(176, 42, 55, 0.92);
 }
 
+.delivery-page {
+  min-height: 100vh;
+  background: #0f0f0f;
+}
+
+.delivery-page__body {
+  padding: 12px 20px 24px;
+}
+
+.delivery-page__top-return {
+  min-height: 34px;
+  padding: 0 12px;
+  border: 1px solid #404040;
+  border-radius: 8px;
+  background: #181818;
+  color: #d7d7d7;
+  font: inherit;
+  font-size: 13px;
+  cursor: pointer;
+}
+
+.delivery-page__top-return:hover {
+  border-color: #b58e55;
+  color: #fff;
+}
+
 @media (max-width: 640px) {
   .image-video-page {
     padding: 88px 24px 40px;
@@ -194,5 +252,9 @@ async function launchDesktop() {
     width: 100%;
     max-width: 220px;
   }
+
+  .delivery-page__body {
+    padding: 16px;
+  }
 }
 </style>