更新新需求-采集

frontend-vue/src/pages/brand/components/BrandTopBar.vue

@@ -1,11 +1,14 @@
 <template>
-  <header class="top-bar">
-    <div class="logo-area">
+  <header class="top-bar" :class="{ 'top-bar--compact': !showNav && !showActions }">
+    <div class="logo-area" :class="{ 'logo-area--compact': !showNav && !showActions }">
       <span class="app-name">数富AI-亚马逊</span>
-      <a href="/home" class="btn-home">返回首页</a>
+      <div v-if="$slots.logoExtra" class="logo-extra">
+        <slot name="logoExtra" />
+      </div>
+      <a v-if="showHomeLink" href="/home" class="btn-home">返回首页</a>
     </div>
 
-    <nav class="nav-sections" aria-label="顶部功能导航">
+    <nav v-if="showNav" class="nav-sections" aria-label="顶部功能导航">
       <section
         v-for="group in visibleNavGroups"
         :key="group.columnKey"
@@ -34,10 +37,10 @@
       </section>
     </nav>
 
-    <div class="top-right">
+    <div v-if="showActions" class="top-right">
       <BrandApiSecretSettingsButton />
     </div>
-    <DownloadProgressPanel />
+    <DownloadProgressPanel v-if="showActions" />
   </header>
 </template>
 
@@ -62,6 +65,7 @@ type ActiveNavKey =
   | 'patrol-delete'
   | 'query-asin'
   | 'collect-data'
+  | 'image-video'
 
 type NavItem = {
   key: string
@@ -77,9 +81,15 @@ type NavGroup = {
 
 const props = defineProps<{
   active: ActiveNavKey
+  showNav?: boolean
+  showHomeLink?: boolean
+  showActions?: boolean
 }>()
 
 const active = props.active
+const showNav = props.showNav ?? true
+const showHomeLink = props.showHomeLink ?? true
+const showActions = props.showActions ?? true
 const allowedColumnKeys = ref<string[] | null>(null)
 
 const navGroups: ReadonlyArray<NavGroup> = [
@@ -88,6 +98,7 @@ const navGroups: ReadonlyArray<NavGroup> = [
     label: '前端工具',
     items: [
       { key: 'collect-data', label: '采集数据', href: '/new_web_source/collect-data.html' },
+      { key: 'image-video', label: '视频', href: '/new_web_source/image-video.html' },
       { key: 'variant', label: '变体分析' },
       { key: 'brand', label: '品牌检测', href: '/brand' },
       { key: 'appearance-patent', label: '外观专利检测', href: '/new_web_source/appearance-patent.html' },
@@ -150,6 +161,14 @@ onMounted(async () => {
   border-bottom: 1px solid #2a2a2a;
 }
 
+.top-bar--compact {
+  min-height: 64px;
+  align-items: center;
+  justify-content: flex-start;
+  padding-top: 0;
+  padding-bottom: 0;
+}
+
 .logo-area {
   display: flex;
   align-items: center;
@@ -158,6 +177,11 @@ onMounted(async () => {
   padding-top: 10px;
 }
 
+.logo-area--compact {
+  gap: 12px;
+  padding-top: 0;
+}
+
 .app-name {
   color: #fff;
   font-size: 18px;
@@ -173,6 +197,11 @@ onMounted(async () => {
   white-space: nowrap;
 }
 
+.logo-extra {
+  display: flex;
+  align-items: center;
+}
+
 .btn-home:hover {
   color: #fff;
 }
@@ -267,6 +296,12 @@ onMounted(async () => {
     align-items: stretch;
   }
 
+  .top-bar--compact {
+    min-height: 64px;
+    flex-direction: row;
+    align-items: center;
+  }
+
   .logo-area {
     padding-top: 0;
   }