diff --git a/frontend-vue/src/pages/brand/components/BrandTopBar.vue b/frontend-vue/src/pages/brand/components/BrandTopBar.vue index ccfda6b..5e0b4ae 100644 --- a/frontend-vue/src/pages/brand/components/BrandTopBar.vue +++ b/frontend-vue/src/pages/brand/components/BrandTopBar.vue @@ -6,12 +6,30 @@
@@ -25,12 +43,22 @@ const props = defineProps<{ const active = props.active -const navItems = [ - { key: 'brand', label: '品牌检测', href: '/brand' }, - { 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' }, - { key: 'delete-brand', label: '删除品牌', href: '/new_web_source/delete-brand.html' }, +const navGroups = [ + { + label: '前端工具', + items: [ + { key: 'brand', label: '品牌检测', href: '/brand' }, + { 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 @@ -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; }