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

<template>
  <header class="top-bar">
    <div class="logo-area">
      <span class="app-name">数富AI-亚马逊</span>
      <a href="/home" class="btn-home">返回首页</a>
    </div>

    <nav class="nav-sections" aria-label="顶部功能导航">
      <section
        v-for="group in visibleNavGroups"
        :key="group.columnKey"
        class="nav-section"
      >
        <div class="nav-section-title">{{ group.label }}</div>
        <div class="nav-section-items">
          <template v-for="item in group.items" :key="item.key">
            <a
              v-if="item.href"
              :href="item.href"
              class="nav-item"
              :class="{ active: active === item.key }"
            >
              {{ item.label }}
            </a>
            <span
              v-else
              class="nav-item disabled"
              :class="{ active: active === item.key }"
            >
              {{ item.label }}
            </span>
          </template>
        </div>
      </section>
    </nav>

    <div class="top-right">
      <BrandApiSecretSettingsButton />
    </div>
  </header>
</template>

<script setup lang="ts">
import { computed, onMounted, ref } from 'vue'

import BrandApiSecretSettingsButton from '@/pages/brand/components/BrandApiSecretSettingsButton.vue'
import { getCurrentUserAppColumnKeys } from '@/shared/api/permission'

type ActiveNavKey =
  | 'brand'
  | 'appearance-patent'
  | 'similar-asin'
  | 'dedupe'
  | 'convert'
  | 'split'
  | 'delete-brand'
  | 'product-risk'
  | 'shop-match'
  | 'pricing'
  | 'patrol-delete'
  | 'query-asin'

type NavItem = {
  key: string
  label: string
  href?: string
}

type NavGroup = {
  columnKey: string
  label: string
  items: ReadonlyArray<NavItem>
}

const props = defineProps<{
  active: ActiveNavKey
}>()

const active = props.active
const allowedColumnKeys = ref<string[] | null>(null)

const navGroups: ReadonlyArray<NavGroup> = [
  {
    columnKey: 'brand_front_tools',
    label: '前端工具',
    items: [
      { key: 'collect', label: '采集数据' },
      { key: 'variant', label: '变体分析' },
      { key: 'brand', label: '品牌检测', href: '/brand' },
      { key: 'appearance-patent', label: '外观专利检测', href: '/new_web_source/appearance-patent.html' },
      { key: 'similar-asin', label: '货源查询', href: '/new_web_source/similar-asin.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' },
    ],
  },
  {
    columnKey: 'brand_operation_tools',
    label: '运营工具',
    items: [
      { key: 'delete-brand', label: '删除ASIN', href: '/new_web_source/delete-brand.html' },
      { key: 'product-risk', label: '商品风险解决', href: '/new_web_source/product-risk.html' },
      { key: 'shop-match', label: '定时匹配', href: '/new_web_source/shop-match.html' },
      { key: 'pricing', label: '跟价', href: '/new_web_source/price-track.html' },
      { key: 'patrol-delete', label: '巡店删除', href: '/new_web_source/patrol-delete.html' },
      { key: 'query-asin', label: '查询ASIN', href: '/new_web_source/query-asin.html' },
      { key: 'withdraw', label: '取款' },
      { key: 'shop-status', label: '店铺状态查询' },
    ],
  },
  {
    columnKey: 'brand_logistics_tools',
    label: '后勤工具',
    items: [
      { key: 'purchase', label: '采购' },
      { key: 'erp', label: 'ERP' },
    ],
  },
]

const visibleNavGroups = computed(() => {
  if (allowedColumnKeys.value === null) {
    return navGroups
  }
  const allowedSet = new Set(allowedColumnKeys.value)
  return navGroups.filter((group) => allowedSet.has(group.columnKey))
})

onMounted(async () => {
  try {
    allowedColumnKeys.value = await getCurrentUserAppColumnKeys()
  } catch (_error) {
    allowedColumnKeys.value = null
  }
})
</script>

<style scoped>
.top-bar {
  min-height: 88px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 10px 24px 12px;
  background: #111;
  border-bottom: 1px solid #2a2a2a;
}

.logo-area {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding-top: 10px;
}

.app-name {
  color: #fff;
  font-size: 18px;
  font-weight: 800;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.btn-home {
  color: #d2d2d2;
  font-size: 13px;
  text-decoration: none;
  white-space: nowrap;
}

.btn-home:hover {
  color: #fff;
}

.nav-sections {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
}

.nav-section {
  flex: 1;
  min-width: 0;
  padding: 0 18px;
  position: relative;
}

.nav-section + .nav-section::before {
  content: '';
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 8px;
  width: 1px;
  background: rgba(255, 255, 255, 0.14);
}

.nav-section-title {
  margin-bottom: 10px;
  text-align: center;
  color: #e8dfcf;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 0.08em;
}

.nav-section-items {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(83, 74, 67, 0.92) 0%, rgba(72, 65, 59, 0.96) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.nav-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  padding: 0 2px;
  color: #f3eee4;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.18s ease, border-color 0.18s ease, opacity 0.18s ease;
}

.nav-item:hover {
  color: #fff;
  border-bottom-color: rgba(255, 255, 255, 0.68);
}

.nav-item.active {
  color: #fff;
  border-bottom-color: #8dc4ff;
}

.nav-item.disabled {
  color: rgba(255, 255, 255, 0.78);
  opacity: 0.82;
  cursor: default;
}

.top-right {
  width: 140px;
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  padding-top: 8px;
}

@media (max-width: 1200px) {
  .top-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .logo-area {
    padding-top: 0;
  }

  .nav-sections {
    flex-direction: column;
  }

  .nav-section {
    padding: 0;
  }

  .nav-section + .nav-section::before {
    display: none;
  }

  .top-right {
    display: none;
  }
}
</style>