初始化2

app/components/SiteHeader.vue

@@ -0,0 +1,418 @@
+<template>
+  <a-affix :offset-top="0">
+    <a-layout-header class="header">
+      <div class="nav-bar mx-auto max-w-screen-xl px-4 h-full">
+        <!-- 左侧：Logo + 菜单 -->
+        <div class="flex items-center gap-8 nav-left">
+          <!-- Logo -->
+          <NuxtLink to="/" class="flex items-center logo-link cursor-pointer flex-shrink-0">
+            <img src="/logo.png" alt="websopy" class="logo-img" />
+            <div class="site-name mx-2">{{ 'websopy' }}</div>
+          </NuxtLink>
+
+          <!-- PC 导航菜单 -->
+          <a-menu
+            mode="horizontal"
+            theme="dark"
+            :selected-keys="selectedKeys"
+            class="menu hidden md:flex"
+          >
+            <template v-for="item in nav" :key="item.key">
+              <a-sub-menu v-if="item.children && item.children.length" :key="item.key">
+                <template #title>
+                  <NuxtLink :to="item.to" class="nav-item-wrapper">
+                    <span>{{ item.label }}</span>
+                    <span v-if="item.badge" :class="getBadgeClass(item.badge)">{{ item.badge }}</span>
+                  </NuxtLink>
+                </template>
+                <a-menu-item v-for="sub in item.children" :key="sub.key">
+                  <a v-if="sub.href" :href="sub.href" target="_blank" rel="noopener" class="nav-item-wrapper">{{ sub.label }}</a>
+                  <NuxtLink v-else :to="sub.to">{{ sub.label }}</NuxtLink>
+                </a-menu-item>
+              </a-sub-menu>
+              <a-menu-item v-else :key="item.to">
+                <NuxtLink :to="item.to" class="nav-item-wrapper">
+                  <span>{{ item.label }}</span>
+                  <span v-if="item.badge" :class="getBadgeClass(item.badge)">{{ item.badge }}</span>
+                </NuxtLink>
+              </a-menu-item>
+            </template>
+          </a-menu>
+        </div>
+
+        <!-- 右侧操作区 -->
+        <div class="flex items-center gap-2 flex-shrink-0 nav-right">
+          <!-- PC 端：登录/头像 -->
+          <div class="hidden md:flex items-center gap-3">
+            <template v-if="!isAuthed">
+              <a-button type="primary" @click="navigateTo('/login')">{{ $t('nav.login') }}</a-button>
+            </template>
+            <template v-else>
+              <!-- 控制台快捷按钮 -->
+              <a-button class="console-btn" @click="navigateTo('/console')">{{ $t('nav.dashboard') }}</a-button>
+              <!-- 消息通知铃铛仅在 /console 页面显示 -->
+              <a-dropdown :trigger="['hover']" placement="bottomRight">
+                <a-space>
+                  <a-avatar :src="userAvatar" :size="32">
+                    <template v-if="!userAvatar" #icon>
+                      <UserOutlined />
+                    </template>
+                  </a-avatar>
+                  <span class="text-gray-100">{{ userName }}</span>
+                </a-space>
+                <template #overlay>
+                <a-menu @click="onUserMenuClick">
+                  <a-menu-item key="profile"><ProfileOutlined style="margin-right: 8px" />个人信息</a-menu-item>
+                  <a-menu-item key="orders"><ShoppingCartOutlined style="margin-right: 8px" />我的订单</a-menu-item>
+                  <template v-if="isDeveloper">
+                    <a-menu-divider />
+                    <a-menu-item key="developer">🛠️ {{ $t('nav.developer') || '开发者中心' }}</a-menu-item>
+                  </template>
+                  <a-menu-divider />
+                  <a-menu-item key="env-dev" @click.stop="switchEnv('dev')">
+                    <span :class="{ 'font-bold': currentEnv === 'dev' }">🔧 {{ $t('common.devEnv') || '开发环境' }}</span>
+                    <span v-if="currentEnv === 'dev'" class="ml-2 text-green-500">✓</span>
+                  </a-menu-item>
+                  <a-menu-item key="env-prod" @click.stop="switchEnv('prod')">
+                    <span :class="{ 'font-bold': currentEnv === 'prod' }">🚀 {{ $t('common.prodEnv') || '生产环境' }}</span>
+                    <span v-if="currentEnv === 'prod'" class="ml-2 text-green-500">✓</span>
+                  </a-menu-item>
+                  <template v-if="isSuperAdmin">
+                    <a-menu-divider />
+                    <a-menu-item key="admin">⚙️ 平台管理</a-menu-item>
+                  </template>
+                  <a-menu-divider />
+                  <a-menu-item key="logout">{{ $t('nav.logout') }}</a-menu-item>
+                </a-menu>
+                </template>
+              </a-dropdown>
+            </template>
+          </div>
+
+          <!-- 移动端：汉堡菜单按钮 -->
+          <button class="md:hidden flex flex-col justify-center items-center w-10 h-10 gap-1.5 rounded-lg bg-white/10 hover:bg-white/20 border border-white/20 transition-colors" @click="open = true">
+            <span class="block w-5 h-0.5 bg-white rounded-full"></span>
+            <span class="block w-5 h-0.5 bg-white rounded-full"></span>
+            <span class="block w-5 h-0.5 bg-white rounded-full"></span>
+          </button>
+        </div>
+      </div>
+    </a-layout-header>
+  </a-affix>
+
+  <a-drawer v-model:open="open" :title="$t('nav.navigation') || '导航'" placement="right">
+    <a-menu mode="inline" :selected-keys="selectedKeys">
+      <template v-for="item in nav" :key="item.key">
+        <a-sub-menu v-if="item.children && item.children.length" :key="item.key">
+          <template #title>{{ item.label }}</template>
+          <a-menu-item v-for="sub in item.children" :key="sub.key">
+            <a v-if="sub.href" :href="sub.href" target="_blank" rel="noopener" @click="open = false">{{ sub.label }}</a>
+            <span v-else @click="onNav(sub.to)">{{ sub.label }}</span>
+          </a-menu-item>
+        </a-sub-menu>
+        <a-menu-item v-else :key="item.to" @click="onNav(item.to)">
+          <NuxtLink :to="item.to" class="nav-item-wrapper">
+            <span>{{ item.label }}</span>
+            <span v-if="item.badge" :class="getBadgeClass(item.badge)">{{ item.badge }}</span>
+          </NuxtLink>
+        </a-menu-item>
+      </template>
+    </a-menu>
+    <div class="mt-4">
+      <a-button v-if="!isAuthed" block type="primary" @click="onNav('/login')">{{ $t('nav.login') }}</a-button>
+      <template v-else>
+        <a-button block type="primary" class="mb-2" @click="onNav('/console')">{{ $t('nav.dashboard') }}</a-button>
+        <a-button block @click="onNav('/console/account')">{{ $t('nav.userCenter') }}</a-button>
+        <a-button block @click="onNav('/console/orders')">{{ $t('nav.orders') || '我的订单' }}</a-button>
+        <a-button v-if="isDeveloper" block @click="onNav('/developer')">🛠️ {{ $t('nav.developer') || '开发者中心' }}</a-button>
+        <a-button v-if="isSuperAdmin" block @click="onNav('/admin')">⚙️ {{ $t('nav.admin') || '平台管理' }}</a-button>
+        <a-button block danger class="mt-2" @click="logout">{{ $t('nav.logout') }}</a-button>
+      </template>
+    </div>
+  </a-drawer>
+</template>
+
+<script setup lang="ts">
+import { mainNav } from '@/config/nav'
+import { getUserInfo } from '@/api/layout'
+import type { User } from '@/api/system/user/model'
+import { getToken, removeToken } from '@/utils/token-util'
+import { clearAuthz, setAuthzFromUser } from '@/utils/permission'
+import { UserOutlined, ProfileOutlined, ShoppingCartOutlined } from '@ant-design/icons-vue'
+import { message } from 'ant-design-vue'
+import { ENV_CONFIG, getCurrentEnv, setCurrentEnv, type EnvKey } from '@/config/setting'
+import InviteBell from './invite/InviteBell.vue'
+
+const nav = computed(() => mainNav)
+const route = useRoute()
+const open = ref(false)
+
+// 环境切换
+const currentEnv = ref<EnvKey>(getCurrentEnv())
+
+function switchEnv(env: EnvKey) {
+  setCurrentEnv(env)
+  currentEnv.value = env
+
+  // 同时设置 Cookie，让服务器端代理也能识别环境
+  const cookieValue = env === 'dev' ? 'dev' : 'prod'
+  document.cookie = `websopy_api_env=${cookieValue}; path=/; max-age=31536000`
+
+  message.success(`已切换到 ${ENV_CONFIG[env].name}，正在刷新...`)
+  setTimeout(() => {
+    window.location.reload()
+  }, 500)
+}
+
+const selectedKeys = computed(() => {
+  const hit = nav.value.find((n) => n.to === route.path)
+  if (hit) return [hit.to]
+  if (route.path.startsWith('/products')) return ['/products']
+  if (route.path.startsWith('/ai-agent')) return ['/ai-agent']
+  return ['/']
+})
+
+// 获取 badge 样式类
+function getBadgeClass(badge: string) {
+  const baseClass = 'ml-1.5 px-1.5 py-0.5 text-xs font-medium rounded'
+  if (badge === 'HOT') {
+    return `${baseClass} bg-orange-500 text-white`
+  }
+  if (badge === 'NEW') {
+    return `${baseClass} bg-green-500 text-white`
+  }
+  return `${baseClass} bg-gray-500 text-white`
+}
+
+const siteName = ref('葳溯科技')
+
+const token = ref('')
+const user = ref<User | null>(null)
+const isAuthed = computed(() => !!token.value)
+const userName = computed(() => String(user.value?.nickname || user.value?.username || '已登录'))
+const isSuperAdmin = computed(() => !!(user.value as any)?.isAdmin)
+const isDeveloper = computed(() => (user.value as any)?.type === 2)
+const userAvatar = computed(() => {
+  const candidate =
+    user.value?.avatarUrl ||
+    user.value?.avatar ||
+    user.value?.merchantAvatar ||
+    user.value?.logo ||
+    ''
+  if (typeof candidate !== 'string') return ''
+  const normalized = candidate.trim()
+  if (!normalized || normalized === 'null' || normalized === 'undefined') return ''
+  return normalized
+})
+
+function onNav(to: string) {
+  open.value = false
+  navigateTo(to)
+}
+
+async function refreshAuth() {
+  token.value = getToken()
+  if (!token.value) {
+    user.value = null
+    clearAuthz()
+    return
+  }
+  try {
+    user.value = await getUserInfo()
+    setAuthzFromUser(user.value)
+  } catch {
+    // token may be expired; keep authed UI but without profile info
+    clearAuthz()
+  }
+}
+
+function goConsoleCenter() {
+  if (!isAuthed.value) return navigateTo('/login')
+  open.value = false
+  navigateTo('/console')
+}
+
+function goDeveloperCenter() {
+  if (!isAuthed.value) return navigateTo('/login')
+  open.value = false
+  navigateTo('/developer')
+}
+
+function logout() {
+  removeToken()
+  try {
+    localStorage.removeItem('TenantId')
+    localStorage.removeItem('UserId')
+  } catch {
+    // ignore
+  }
+  clearAuthz()
+  user.value = null
+  token.value = ''
+  open.value = false
+  navigateTo('/')
+}
+
+function onUserMenuClick(info: { key: string }) {
+  if (info.key === 'profile') return navigateTo('/console/account')
+  if (info.key === 'orders') return navigateTo('/console/orders')
+  if (info.key === 'kyc') return navigateTo('/console/account/kyc')
+  if (info.key === 'developer') return navigateTo('/developer')
+  if (info.key === 'admin') return navigateTo('/admin')
+  if (info.key === 'logout') return logout()
+}
+
+onMounted(() => {
+  refreshAuth()
+
+  window.addEventListener('auth-token-changed', refreshAuth)
+  window.addEventListener('storage', refreshAuth)
+})
+
+onUnmounted(() => {
+  window.removeEventListener('auth-token-changed', refreshAuth)
+  window.removeEventListener('storage', refreshAuth)
+})
+</script>
+
+<style scoped>
+.header {
+  background: #111827;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  padding: 0;
+  height: 64px;
+}
+
+/* 两栏布局：左侧 logo+菜单，右侧操作按钮 */
+.nav-bar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.nav-left {
+  display: flex;
+  align-items: center;
+  gap: 5rem; /* logo 与菜单的间距 */
+}
+.nav-right {
+  display: flex;
+  align-items: center;
+}
+
+.menu {
+  background: transparent;
+  border-bottom: none;
+  min-width: 0;
+}
+.logo-link {
+  text-decoration: none;
+  display: flex;
+  align-items: center;
+}
+.logo-img {
+  height: 22px;
+  width: auto;
+  display: block;
+  transition: opacity 0.2s;
+}
+.site-name {
+  color: #fff;
+  font-family: 'Alimama FangYuanTi VF,sans-serif', sans-serif;
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+  line-height: 1;
+  background: linear-gradient(135deg, #ffffff 0%, #a5c8ff 100%);
+  -webkit-background-clip: text;
+  -webkit-text-fill-color: transparent;
+  background-clip: text;
+  transition: opacity 0.2s;
+}
+.logo-link:hover .site-name {
+  opacity: 0.85;
+}
+.logo-link:hover .logo-img {
+  opacity: 0.85;
+}
+.nav-item-wrapper {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* ── 统一去掉选中/展开/hover 时的蓝色，改为白色文字 + 底部橙线 ── */
+
+/* 选中项背景去掉 */
+:deep(.ant-menu-dark .ant-menu-item-selected),
+:deep(.ant-menu-dark .ant-menu-submenu-selected > .ant-menu-submenu-title),
+:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-selected),
+:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-selected > .ant-menu-submenu-title) {
+  background-color: transparent !important;
+  color: #fff !important;
+}
+
+/* 选中时底部橙线 */
+:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-selected),
+:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-selected) {
+  background-color: transparent !important;
+  border-bottom: 2px solid #f97316 !important;
+}
+
+/* sub-menu 展开/hover 时标题不变蓝 */
+:deep(.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title),
+:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title),
+:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-open),
+:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-submenu-active) {
+  background-color: transparent !important;
+  color: #fff !important;
+}
+:deep(.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-title-content),
+:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-title-content),
+:deep(.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title > .ant-menu-title-content a),
+:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title > .ant-menu-title-content a) {
+  color: #fff !important;
+}
+
+/* 展开箭头不变蓝 */
+:deep(.ant-menu-dark .ant-menu-submenu-open > .ant-menu-submenu-title .ant-menu-submenu-arrow),
+:deep(.ant-menu-dark .ant-menu-submenu-active > .ant-menu-submenu-title .ant-menu-submenu-arrow) {
+  color: rgba(255, 255, 255, 0.65) !important;
+}
+
+/* 所有菜单项 hover/active 时文字统一白色 */
+:deep(.ant-menu-dark .ant-menu-item-active > .ant-menu-item-content),
+:deep(.ant-menu-dark .ant-menu-item-active > .ant-menu-item-content a),
+:deep(.ant-menu-dark .ant-menu-item-open > .ant-menu-item-content),
+:deep(.ant-menu-dark .ant-menu-item-open > .ant-menu-item-content a),
+:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-active),
+:deep(.ant-menu-dark.ant-menu-horizontal > .ant-menu-item-active a) {
+  color: #fff !important;
+}
+
+/* 所有菜单项默认文字颜色（覆盖 ant-menu-item a 的蓝色） */
+:deep(.ant-menu-dark .ant-menu-item a),
+:deep(.ant-menu-dark .ant-menu-submenu-title a) {
+  color: rgba(255, 255, 255, 0.85) !important;
+}
+:deep(.ant-menu-dark .ant-menu-item a:hover),
+:deep(.ant-menu-dark .ant-menu-submenu-title a:hover) {
+  color: #fff !important;
+}
+
+/* 选中项文字强制白色 */
+:deep(.ant-menu-dark .ant-menu-item-selected a),
+:deep(.ant-menu-dark .ant-menu-submenu-selected .ant-menu-submenu-title a) {
+  color: #fff !important;
+}
+/* 控制台按钮：白色边框 + 白色文字，hover 加白色背景 */
+.console-btn {
+  background: transparent !important;
+  border-color: rgba(255, 255, 255, 0.45) !important;
+  color: #fff !important;
+}
+.console-btn:hover {
+  border-color: #fff !important;
+  background: rgba(255, 255, 255, 0.1) !important;
+  color: #fff !important;
+}
+</style>