品牌

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

@@ -6,12 +6,30 @@
     </div>
 
     <nav class="nav-tabs">
-      <span class="nav-tab-group">
+      <div class="nav-tab-group">
-        <a v-for="item in navItems" :key="item.key" :href="item.href" class="nav-tab"
+        <div
-          :class="{ active: active === item.key }">
+          v-for="group in navGroups"
-          {{ item.label }}
+          :key="group.label"
-        </a>
+          class="nav-dropdown"
-      </span>
+          :class="{ active: group.items.some(item => item.key === active) }"
+        >
+          <button type="button" class="nav-dropdown-trigger">
+            <span>{{ group.label }}</span>
+            <span class="nav-dropdown-arrow">▾</span>
+          </button>
+          <div class="nav-dropdown-menu">
+            <a
+              v-for="item in group.items"
+              :key="item.key"
+              :href="item.href"
+              class="nav-dropdown-item"
+              :class="{ active: active === item.key }"
+            >
+              {{ item.label }}
+            </a>
+          </div>
+        </div>
+      </div>
     </nav>
 
     <div class="top-right"></div>
@@ -25,12 +43,22 @@ const props = defineProps<{
 
 const active = props.active
 
-const navItems = [
+const navGroups = [
-  { key: 'brand', label: '品牌检测', href: '/brand' },
+  {
-  { key: 'dedupe', label: '数据去重', href: '/new_web_source/dedupe.html' },
+    label: '前端工具',
-  { key: 'split', label: '数据拆分', href: '/new_web_source/split.html' },
+    items: [
-  { key: 'convert', label: '格式转换', href: '/new_web_source/convert.html' },
+      { key: 'brand', label: '品牌检测', href: '/brand' },
-  { key: 'delete-brand', label: '删除品牌', href: '/new_web_source/delete-brand.html' },
+      { key: 'dedupe', label: '数据去重', href: '/new_web_source/dedupe.html' },
+      { key: 'split', label: '数据拆分', href: '/new_web_source/split.html' },
+      { key: 'convert', label: '格式转换', href: '/new_web_source/convert.html' },
+    ],
+  },
+  {
+    label: '运营工具',
+    items: [
+      { key: 'delete-brand', label: '删除指定ASIN和品牌', href: '/new_web_source/delete-brand.html' },
+    ],
+  },
 ] as const
 </script>
 
@@ -86,11 +114,16 @@ const navItems = [
   justify-content: center;
 }
 
-.nav-tab {
+.nav-dropdown {
+  position: relative;
+}
+
+.nav-dropdown-trigger {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: 92px;
+  gap: 8px;
+  min-width: 112px;
   height: 38px;
   padding: 0 16px;
   border-radius: 10px;
@@ -99,21 +132,70 @@ const navItems = [
   background: transparent;
   font-size: 13px;
   font-weight: 600;
-  text-decoration: none;
+  cursor: pointer;
   transition: all 0.2s ease;
 }
 
-.nav-tab:hover {
+.nav-dropdown:hover .nav-dropdown-trigger,
+.nav-dropdown.active .nav-dropdown-trigger {
   color: #b9d6ff;
   background: rgba(77, 126, 189, 0.14);
 }
 
-.nav-tab.active {
+.nav-dropdown.active .nav-dropdown-trigger {
   background: rgba(77, 126, 189, 0.24);
   border-color: rgba(91, 148, 219, 0.35);
   color: #6caeff;
 }
 
+.nav-dropdown-arrow {
+  font-size: 11px;
+  line-height: 1;
+}
+
+.nav-dropdown-menu {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  min-width: 220px;
+  padding: 8px;
+  border: 1px solid #2a2a2a;
+  border-radius: 12px;
+  background: #171717;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
+  display: none;
+  z-index: 20;
+}
+
+.nav-dropdown:hover .nav-dropdown-menu {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nav-dropdown-item {
+  display: flex;
+  align-items: center;
+  min-height: 38px;
+  padding: 0 12px;
+  border-radius: 8px;
+  color: #b8b8b8;
+  font-size: 13px;
+  font-weight: 600;
+  text-decoration: none;
+  transition: all 0.2s ease;
+}
+
+.nav-dropdown-item:hover {
+  color: #e8f2ff;
+  background: rgba(77, 126, 189, 0.14);
+}
+
+.nav-dropdown-item.active {
+  color: #6caeff;
+  background: rgba(77, 126, 189, 0.24);
+}
+
 .top-right {
   width: 120px;
   flex-shrink: 0;
@@ -132,6 +214,16 @@ const navItems = [
     justify-content: flex-start;
   }
 
+  .nav-tab-group {
+    width: 100%;
+    justify-content: flex-start;
+  }
+
+  .nav-dropdown-menu {
+    left: 0;
+    right: auto;
+  }
+
   .top-right {
     display: none;
   }