feat: 功能

frontend/app/web-gold/src/App.vue

@@ -5,6 +5,8 @@ import SidebarNav from './components/SidebarNav.vue'
 import TopNav from './components/TopNav.vue'
 import { theme } from 'ant-design-vue'
 import SvgSprite from '@/components/icons/SvgSprite.vue'
+import { useUserStore } from '@/stores/user'
+import { getToken } from '@gold/utils/token-manager'
 
 function readCssVar(name) {
   return getComputedStyle(document.documentElement).getPropertyValue(name).trim() || undefined
@@ -24,7 +26,7 @@ const themeToken = ref({
   }
 })
 
-onMounted(() => {
+onMounted(async () => {
   // 运行时从 :root 读取，若存在则覆盖默认值
   const next = { ...themeToken.value.token }
   next.colorPrimary = readCssVar('--color-primary') || next.colorPrimary
@@ -35,6 +37,37 @@ onMounted(() => {
   next.colorTextSecondary = readCssVar('--color-text-secondary') || next.colorTextSecondary
   next.colorBorder = readCssVar('--color-border') || next.colorBorder
   themeToken.value = { algorithm: theme.darkAlgorithm, token: next }
+
+  // 检查登录状态：如果有token但store中未标记为登录，则恢复登录状态
+  const userStore = useUserStore()
+  
+  // 等待store从本地存储恢复完成（最多等待500ms）
+  let waitCount = 0
+  while (!userStore.isHydrated && waitCount < 50) {
+    await new Promise(resolve => setTimeout(resolve, 10))
+    waitCount++
+  }
+  
+  const token = getToken()
+  if (token) {
+    // 如果有token但未登录，可能是刷新页面，需要恢复登录状态
+    if (!userStore.isLoggedIn) {
+      userStore.isLoggedIn = true
+      // 尝试获取用户信息
+      try {
+        await userStore.fetchUserInfo()
+      } catch (error) {
+        console.error('初始化用户信息失败:', error)
+      }
+    } else if (!userStore.nickname && !userStore.userId) {
+      // 如果已登录但没有用户信息，尝试获取
+      try {
+        await userStore.fetchUserInfo()
+      } catch (error) {
+        console.error('获取用户信息失败:', error)
+      }
+    }
+  }
 })
 </script>
 

frontend/app/web-gold/src/api/auth.js

@@ -1,7 +1,8 @@
 
 import api from '@/api/http'
 import { setToken, getRefreshToken } from '@/utils/auth'
-import { API_BASE } from '@/api/config'
+// 使用公共配置
+import { API_BASE } from '@gold/config/api'
 
 const SERVER_BASE = API_BASE.APP_MEMBER
 
@@ -191,6 +192,17 @@ export async function resetPasswordBySms(mobile, newPassword, smsCode) {
   return data;
 }
 
+/**
+ * 获取用户信息（C端）
+ * GET /member/user/get
+ *
+ * @returns {Promise<Object>} 用户信息对象
+ */
+export async function getUserInfo() {
+  const { data } = await api.get(`${SERVER_BASE}/user/get`)
+  return data || {}
+}
+
 /**
  * “手机+验证码+密码注册”组合流程（基于短信登录即注册 + 设置密码）
  * 说明：
@@ -235,4 +247,5 @@ export default {
   sendResetPasswordCode,
   resetPasswordBySms,
   registerWithMobileCodePassword,
+  getUserInfo,
 };

frontend/app/web-gold/src/api/chat.js

@@ -1,7 +1,8 @@
 import request from '@/api/http'
 import { fetchEventSource } from '@microsoft/fetch-event-source'
 import { getAccessToken } from '@/utils/auth'
-import { API_BASE } from '@/api/config'
+// 使用公共配置
+import { API_BASE } from '@gold/config/api'
 
 const SERVER_BASE_AI = API_BASE.ADMIN_AI 
 

frontend/app/web-gold/src/api/common.js

@@ -1,17 +1,32 @@
 import http from '@/api/http'
 import { fetchEventSource } from '@microsoft/fetch-event-source'
-import { getAuthHeader } from '@/utils/token-manager'
-import { API_BASE } from '@/api/config'
+import { getAuthHeader } from '@gold/utils/token-manager'
+// 使用公共配置和 API 服务创建器
+import { API_BASE } from '@gold/config/api'
+import { createApiService } from '@gold/api/services'
+// 初始化公共 hook 的 API 服务
+import { setApiService } from '@gold/hooks/web/useVoiceText'
 
 // 使用本地代理前缀 /tikhub，开发环境通过 Vite 代理到 https://api.tikhub.io
-const SERVER_BASE = API_BASE.TIKHUB
+// 注意：API_BASE.TIKHUB 不存在，应该使用 TIKHUB_APP
+const SERVER_BASE = API_BASE.TIKHUB_APP || API_BASE.TIKHUB || ''
+
+// 创建公共 API 服务实例
+const apiService = createApiService({
+  http,
+  getAuthHeader,
+  baseUrl: SERVER_BASE,
+})
+
+// 设置全局 API 服务（供 useVoiceText hook 使用）
+setApiService(apiService)
 
 export const CommonService = {
   videoToCharacters(data) {
-    return http.post(`${SERVER_BASE}/videoToCharacters2`, data)
+    return apiService.videoToCharacters(data)
   },
   callWorkflow(data) {
-    return http.post(`${SERVER_BASE}/callWorkflow`, data)
+    return apiService.callWorkflow(data)
   },
   
   // 流式调用 workflow

frontend/app/web-gold/src/api/config.js

@@ -1,34 +1,14 @@
 /**
  * API 基础配置
  * 统一管理所有 API 的基础 URL
+ * 
+ * 注意：此文件已迁移到公共模块 @gold/config/api
+ * 为了保持向后兼容，这里重新导出公共配置
+ * 新代码建议直接使用 @gold/config/api
  */
 
-const BASE_URL = import.meta.env.VITE_BASE_URL || ''
+// 从公共模块导入
+export { API_BASE, getApiUrl } from '@gold/config/api'
 
-/**
- * API 基础路径配置
- */
-export const API_BASE = {
-  // 会员端 API
-  APP: `${BASE_URL}`,
-  // 具体模块路径
-  ADMIN_AI: `${BASE_URL}/admin-api/ai`,
-  APP_MEMBER: `${BASE_URL}/member`,
-  
-  // 特殊路径
-  TIKHUB_APP: `${BASE_URL}/api/tikHup`,
-}
 
-/**
- * 获取完整的 API 路径
- * @param {string} module - 模块名称 (如 'ADMIN_AI', 'APP_MEMBER')
- * @param {string} path - 接口路径 (如 '/chat/conversation/create-my')
- * @returns {string} 完整的 API URL
- */
-export function getApiUrl(module, path) {
-  const base = API_BASE[module] || API_BASE.ADMIN
-  return `${base}${path.startsWith('/') ? path : '/' + path}`
-}
-
-export default API_BASE
 

frontend/app/web-gold/src/api/example.js

@@ -41,7 +41,8 @@ async function example1() {
 // ========== 方式二：从具体文件导入（兼容旧代码） ==========
 import { ChatMessageApi } from '@/api/chat'
 import { CommonService } from '@/api/common'
-import { API_BASE } from '@/api/config'
+// 使用公共配置
+import { API_BASE } from '@gold/config/api'
 
 async function example2() {
   // 原有方式仍然可用

frontend/app/web-gold/src/api/http.js

@@ -1,5 +1,7 @@
 import axios from 'axios'
-import { getAuthHeader } from '@/utils/token-manager'
+import { message } from 'ant-design-vue'
+import { getAuthHeader, clearAllTokens } from '@gold/utils/token-manager'
+import { useUserStore } from '@/stores/user'
 
 /**
  * 不需要 token 的接口白名单
@@ -57,6 +59,10 @@ http.interceptors.response.use(
     if (data && typeof data.code === 'number' && (data.code === 0 || data.code === 200)) {
       return data
     } else {
+      // code 不为 0 时，检查是否为401
+      if (data && typeof data.code === 'number' && data.code === 401) {
+        handle401Error()
+      }
       // code 不为 0 时，抛出错误
       const error = new Error(data?.message || data?.msg || '请求失败')
       error.code = data?.code
@@ -65,11 +71,56 @@ http.interceptors.response.use(
     }
   },
   (error) => {
+    // 处理 HTTP 状态码 401
+    if (error.response && error.response.status === 401) {
+      handle401Error()
+    }
     // 统一错误处理：输出关键信息，便于排查 403 等问题
     return Promise.reject(error)
   }
 )
 
+/**
+ * 处理 401 未授权错误
+ * 清空 token 并退出登录
+ * 
+ * 注意：使用防抖机制避免多个请求同时401时重复处理
+ */
+function handle401Error() {
+  // 避免重复处理（防止多个请求同时401导致多次调用）
+  if (handle401Error.processed) {
+    return
+  }
+  
+  handle401Error.processed = true
+  
+  // 1. 清空所有 token
+  try {
+    clearAllTokens() // 统一使用 token-manager 的清空函数
+  } catch (e) {
+    console.error('清空 token 失败:', e)
+  }
+  
+  // 2. 退出登录状态（清空用户信息）
+  try {
+    const userStore = useUserStore()
+    // logout() 会清空用户信息和本地存储
+    userStore.logout()
+  } catch (e) {
+    console.error('退出登录失败:', e)
+  }
+  
+  // 3. 提示用户（延迟显示，避免在清空过程中显示）
+  setTimeout(() => {
+    message.warning('登录已过期，请重新登录', 3)
+  }, 100)
+  
+  // 4. 延迟重置标志，避免短时间内重复处理
+  setTimeout(() => {
+    handle401Error.processed = false
+  }, 2000)
+}
+
 export default http
 
 

frontend/app/web-gold/src/api/tikhub/tikhub.js

@@ -1,7 +1,8 @@
 import http from '@/api/http'
 import { InterfaceType, MethodType, InterfaceUrlMap, ParamType } from './types'
 import qs from 'qs'
-import { API_BASE } from '@/api/config'
+// 使用公共配置
+import { API_BASE } from '@gold/config/api'
 
 // 使用本地代理前缀 /tikhub，开发环境通过 Vite 代理到 https://api.tikhub.io
 const SERVER_TIKHUB = API_BASE.TIKHUB_APP  

frontend/app/web-gold/src/components/LoginModal.vue

@@ -226,6 +226,10 @@ async function handleLoginSuccess(info) {
       credits: userInfo.credits ?? 0,
     }
   })
+  
+  // 登录成功后获取完整的用户信息
+  await userStore.fetchUserInfo()
+  
   close()
 }
 </script>

frontend/app/web-gold/src/components/TokenInput.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, watch } from 'vue'
 import { message } from 'ant-design-vue'
-import { setDevToken, getDevToken } from '@/utils/token-manager'
+import { setDevToken, getDevToken } from '@gold/utils/token-manager'
 
 const token = ref('')
 const isVisible = ref(true)

frontend/app/web-gold/src/components/TopNav.vue

@@ -1,8 +1,8 @@
 <script setup>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 import { useUserStore } from '@/stores/user'
 import LoginModal from '@/components/LoginModal.vue'
-import TokenInput from '@/components/TokenInput.vue'
+import UserDropdown from '@/components/UserDropdown.vue'
 
 const styles = {
   background: 'var(--color-surface)',
@@ -12,6 +12,17 @@ const styles = {
 const userStore = useUserStore()
 const showLogin = ref(false)
 
+// 计算是否应该显示用户组件
+// 判断用户是否有用户名，有用户名说明用户信息已加载完成
+// 使用 userStore.displayName 作为响应式依赖，确保用户信息变化时更新
+const shouldShowUser = computed(() => {
+  // 检查用户是否有用户名（nickname 或 wechatNickname）
+  // 有用户名说明用户信息已加载，可以显示用户组件
+  const hasUserName = !!userStore.displayName && userStore.displayName !== '未命名用户'
+  
+  return hasUserName 
+})
+
 // function go(path) {
 //   router.push(path)
 // }
@@ -28,11 +39,9 @@ const showLogin = ref(false)
           <!-- 左侧可放 logo 或其他内容 -->
         </div>
         <div class="flex items-center gap-4 pr-[35px]">
-          <!-- Token 输入（仅开发/测试环境） -->
-          <TokenInput />
           
-          <template v-if="userStore.isLoggedIn && userStore.displayAvatar">
-            <img class="w-8 h-8 rounded-full" :src="userStore.displayAvatar" alt="avatar" />
+          <template v-if="shouldShowUser">
+            <UserDropdown />
           </template>
           <template v-else>
             <button class="btn-primary-nav" @click="showLogin = true">免费试用</button>

frontend/app/web-gold/src/components/UserDropdown.vue

@@ -0,0 +1,510 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { useUserStore } from '@/stores/user'
+
+const userStore = useUserStore()
+const showDropdown = ref(false)
+
+// 计算会员状态
+const isVip = computed(() => userStore.vipLevel > 0)
+const vipLevelText = computed(() => {
+  if (userStore.vipLevel === 0) return '普通用户'
+  if (userStore.vipLevel === 1) return 'VIP会员'
+  if (userStore.vipLevel === 2) return '高级VIP'
+  return `VIP${userStore.vipLevel}`
+})
+
+// 计算存储空间（根据VIP等级设置不同总空间）
+const totalStorage = computed(() => {
+  // VIP等级越高，总空间越大
+  if (userStore.vipLevel >= 2) return 50 * 1024 // 50GB
+  if (userStore.vipLevel === 1) return 20 * 1024 // 20GB
+  return 10 * 1024 // 10GB (普通用户)
+})
+
+const usedStorage = computed(() => {
+  // 根据credits估算已用空间（这里可以根据实际业务逻辑调整）
+  // 假设每1000积分对应100MB存储使用
+  const estimatedFromCredits = (userStore.credits / 1000) * 100
+  // 默认已用30%，但不超过总空间的80%
+  const defaultUsed = totalStorage.value * 0.3
+  return Math.min(Math.max(defaultUsed, estimatedFromCredits), totalStorage.value * 0.8)
+})
+
+const availableStorage = computed(() => totalStorage.value - usedStorage.value)
+const storagePercent = computed(() => (usedStorage.value / totalStorage.value) * 100)
+
+// 格式化存储空间显示
+function formatStorage(mb) {
+  if (mb >= 1024) {
+    return (mb / 1024).toFixed(1) + ' GB'
+  }
+  return Math.round(mb) + ' MB'
+}
+
+// 格式化余额
+function formatBalance(balance) {
+  return balance.toFixed(2)
+}
+
+// 格式化积分
+function formatCredits(credits) {
+  return credits.toLocaleString()
+}
+
+// 处理鼠标进入
+function handleMouseEnter() {
+  showDropdown.value = true
+}
+
+// 处理鼠标离开
+function handleMouseLeave() {
+  showDropdown.value = false
+}
+</script>
+
+<template>
+  <div 
+    class="user-dropdown-wrapper"
+    @mouseenter="handleMouseEnter"
+    @mouseleave="handleMouseLeave"
+  >
+    <!-- 圆形头像 -->
+    <div class="user-avatar-container">
+      <img 
+        v-if="userStore.displayAvatar" 
+        class="user-avatar" 
+        :src="userStore.displayAvatar" 
+        alt="avatar" 
+      />
+      <div v-else class="user-avatar-placeholder">
+        {{ userStore.displayName?.charAt(0) || 'U' }}
+      </div>
+      <!-- VIP标识 -->
+      <div v-if="isVip" class="vip-badge">
+        <svg width="12" height="12" viewBox="0 0 12 12" fill="none">
+          <path d="M6 0L7.5 4.5L12 6L7.5 7.5L6 12L4.5 7.5L0 6L4.5 4.5L6 0Z" fill="#FFD700"/>
+        </svg>
+      </div>
+    </div>
+
+    <!-- 下拉菜单 -->
+    <transition name="dropdown-fade">
+      <div v-if="showDropdown" class="user-dropdown">
+        <!-- 箭头指示器 -->
+        <div class="dropdown-arrow"></div>
+        <div class="dropdown-header">
+          <div class="header-avatar">
+            <img 
+              v-if="userStore.displayAvatar" 
+              class="avatar-large" 
+              :src="userStore.displayAvatar" 
+              alt="avatar" 
+            />
+            <div v-else class="avatar-large-placeholder">
+              {{ userStore.displayName?.charAt(0) || 'U' }}
+            </div>
+          </div>
+          <div class="header-info">
+            <div class="user-name-row">
+              <span class="user-name">{{ userStore.displayName }}</span>
+              <span v-if="isVip" class="vip-tag">{{ vipLevelText }}</span>
+            </div>
+            <div class="user-id">ID: {{ userStore.userId || '未设置' }}</div>
+          </div>
+        </div>
+
+        <div class="dropdown-divider"></div>
+
+        <div class="dropdown-content">
+          <!-- 会员状态 -->
+          <div class="info-item">
+            <div class="info-label">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
+                <path d="M8 0L10 6L16 8L10 10L8 16L6 10L0 8L6 6L8 0Z" fill="currentColor" opacity="0.6"/>
+              </svg>
+              <span>会员状态</span>
+            </div>
+            <div class="info-value" :class="{ 'vip-text': isVip }">
+              {{ vipLevelText }}
+            </div>
+          </div>
+
+          <!-- 可用空间 -->
+          <div class="info-item">
+            <div class="info-label">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
+                <rect x="2" y="4" width="12" height="10" rx="1" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
+                <path d="M5 4V2C5 1.44772 5.44772 1 6 1H10C10.5523 1 11 1.44772 11 2V4" stroke="currentColor" stroke-width="1.5" opacity="0.6"/>
+              </svg>
+              <span>可用空间</span>
+            </div>
+            <div class="info-value">
+              {{ formatStorage(availableStorage) }}
+            </div>
+          </div>
+
+          <!-- 存储进度条 -->
+          <div class="storage-progress">
+            <div class="progress-bar">
+              <div 
+                class="progress-fill" 
+                :style="{ width: storagePercent + '%' }"
+              ></div>
+            </div>
+            <div class="progress-text">
+              <span>{{ formatStorage(usedStorage) }}</span>
+              <span>/</span>
+              <span>{{ formatStorage(totalStorage) }}</span>
+            </div>
+          </div>
+
+          <!-- 剩余额度 -->
+          <div class="info-item">
+            <div class="info-label">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
+                <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
+                <path d="M8 4V8L10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
+              </svg>
+              <span>剩余额度</span>
+            </div>
+            <div class="info-value credits-value">
+              {{ formatCredits(userStore.credits) }}
+            </div>
+          </div>
+
+          <!-- 账户余额 -->
+          <div class="info-item">
+            <div class="info-label">
+              <svg width="16" height="16" viewBox="0 0 16 16" fill="none" class="info-icon">
+                <circle cx="8" cy="8" r="6" stroke="currentColor" stroke-width="1.5" fill="none" opacity="0.6"/>
+                <path d="M8 5V8L10 10" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" opacity="0.6"/>
+              </svg>
+              <span>账户余额</span>
+            </div>
+            <div class="info-value balance-value">
+              ¥{{ formatBalance(userStore.balance) }}
+            </div>
+          </div>
+        </div>
+
+        <div class="dropdown-divider"></div>
+
+        <div class="dropdown-footer">
+          <button class="action-btn" @click="userStore.logout">
+            <svg width="14" height="14" viewBox="0 0 14 14" fill="none">
+              <path d="M5 2H2C1.44772 2 1 2.44772 1 3V11C1 11.5523 1.44772 12 2 12H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+              <path d="M9 10L13 7L9 4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+              <path d="M13 7H5" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+            </svg>
+            <span>退出登录</span>
+          </button>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.user-dropdown-wrapper {
+  position: relative;
+  display: inline-block;
+}
+
+.user-avatar-container {
+  position: relative;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+}
+
+.user-avatar-container:hover {
+  transform: scale(1.05);
+}
+
+.user-avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--color-border);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.user-avatar:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--glow-primary);
+}
+
+.user-avatar-placeholder {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: 600;
+  font-size: 16px;
+  border: 2px solid var(--color-border);
+  transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.user-avatar-placeholder:hover {
+  border-color: var(--color-primary);
+  box-shadow: var(--glow-primary);
+}
+
+.vip-badge {
+  position: absolute;
+  bottom: -2px;
+  right: -2px;
+  width: 18px;
+  height: 18px;
+  background: var(--color-surface);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2px solid var(--color-border);
+  z-index: 1;
+}
+
+.user-dropdown {
+  position: absolute;
+  top: calc(100% + 12px);
+  right: 0;
+  width: 320px;
+  background: var(--color-surface);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), var(--shadow-inset-card);
+  z-index: 1000;
+  overflow: hidden;
+  animation: slideDown 0.2s ease-out;
+}
+
+.dropdown-arrow {
+  position: absolute;
+  top: -6px;
+  right: 20px;
+  width: 12px;
+  height: 12px;
+  background: var(--color-surface);
+  border-left: 1px solid var(--color-border);
+  border-top: 1px solid var(--color-border);
+  transform: rotate(45deg);
+  z-index: 1;
+}
+
+@keyframes slideDown {
+  from {
+    opacity: 0;
+    transform: translateY(-8px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+.dropdown-header {
+  padding: 20px;
+  display: flex;
+  gap: 12px;
+  align-items: center;
+}
+
+.header-avatar {
+  flex-shrink: 0;
+}
+
+.avatar-large {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  object-fit: cover;
+  border: 2px solid var(--color-primary);
+  box-shadow: var(--glow-primary);
+}
+
+.avatar-large-placeholder {
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, var(--color-primary), var(--color-blue));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-weight: 600;
+  font-size: 24px;
+  border: 2px solid var(--color-primary);
+  box-shadow: var(--glow-primary);
+}
+
+.header-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.user-name-row {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 4px;
+}
+
+.user-name {
+  font-size: 16px;
+  font-weight: 600;
+  color: var(--color-text);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.vip-tag {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  padding: 2px 8px;
+  background: linear-gradient(135deg, #FFD700, #FFA500);
+  color: #000;
+  font-size: 11px;
+  font-weight: 700;
+  border-radius: 10px;
+  white-space: nowrap;
+  box-shadow: 0 2px 4px rgba(255, 215, 0, 0.3);
+}
+
+.user-id {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
+
+.dropdown-divider {
+  height: 1px;
+  background: var(--color-border);
+  margin: 0;
+}
+
+.dropdown-content {
+  padding: 16px 20px;
+}
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px 0;
+}
+
+.info-item:not(:last-child) {
+  border-bottom: 1px solid var(--color-border);
+}
+
+.info-label {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  color: var(--color-text-secondary);
+}
+
+.info-icon {
+  color: var(--color-text-secondary);
+  opacity: 0.6;
+}
+
+.info-value {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--color-text);
+}
+
+.vip-text {
+  color: #FFD700;
+}
+
+.credits-value {
+  color: var(--color-primary);
+}
+
+.balance-value {
+  color: var(--color-accent);
+}
+
+.storage-progress {
+  margin-top: 12px;
+  padding-top: 12px;
+  border-top: 1px solid var(--color-border);
+}
+
+.progress-bar {
+  width: 100%;
+  height: 6px;
+  background: var(--color-bg);
+  border-radius: 3px;
+  overflow: hidden;
+  margin-bottom: 8px;
+}
+
+.progress-fill {
+  height: 100%;
+  background: linear-gradient(90deg, var(--color-primary), var(--color-blue));
+  border-radius: 3px;
+  transition: width 0.3s ease;
+  box-shadow: 0 0 8px var(--color-primary-glow);
+}
+
+.progress-text {
+  display: flex;
+  justify-content: space-between;
+  font-size: 11px;
+  color: var(--color-text-secondary);
+}
+
+.dropdown-footer {
+  padding: 12px 20px;
+}
+
+.action-btn {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  padding: 10px 16px;
+  background: transparent;
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  color: var(--color-text-secondary);
+  font-size: 13px;
+  cursor: pointer;
+  transition: all 0.2s ease;
+}
+
+.action-btn:hover {
+  background: var(--color-bg);
+  border-color: var(--color-accent);
+  color: var(--color-accent);
+}
+
+.action-btn svg {
+  width: 14px;
+  height: 14px;
+}
+
+/* 下拉动画 */
+.dropdown-fade-enter-active,
+.dropdown-fade-leave-active {
+  transition: opacity 0.2s ease, transform 0.2s ease;
+}
+
+.dropdown-fade-enter-from,
+.dropdown-fade-leave-to {
+  opacity: 0;
+  transform: translateY(-8px);
+}
+</style>

frontend/app/web-gold/src/router/index.js

@@ -1,4 +1,6 @@
 import { createRouter, createWebHistory } from 'vue-router'
+import { useUserStore } from '@/stores/user'
+import { getToken } from '@gold/utils/token-manager'
 
 const routes = [
   {
@@ -48,4 +50,40 @@ const router = createRouter({
   routes,
 })
 
+// 用户信息初始化标志（确保只初始化一次）
+let userInfoInitialized = false
+
+/**
+ * 路由导航守卫：初始化用户信息
+ * 在首次路由跳转时，如果已登录（有 token），则获取用户信息
+ */
+router.beforeEach(async (to, from, next) => {
+  // 只在首次路由跳转时初始化用户信息
+  if (!userInfoInitialized) {
+    userInfoInitialized = true
+    
+    const token = getToken()
+    if (token) {
+      try {
+        const userStore = useUserStore()
+        // 如果 store 中已标记为登录，则获取用户信息
+        if (userStore.isLoggedIn) {
+           userStore.fetchUserInfo()
+        } else {
+          // 如果有 token 但 store 中未标记为登录，可能是刷新页面
+          // 先标记为已登录，然后获取用户信息
+          userStore.isLoggedIn = true
+          userStore.fetchUserInfo()
+        }
+      } catch (error) {
+        console.error('初始化用户信息失败:', error)
+        // 不阻止路由跳转，继续执行
+      }
+    }
+  }
+  
+  // 继续路由跳转
+  next()
+})
+
 export default router

frontend/app/web-gold/src/stores/user.js

@@ -1,6 +1,7 @@
 import { ref, computed, watch } from 'vue'
 import { defineStore } from 'pinia'
 import { getJSON, setJSON, remove } from '@/utils/storage'
+import { clearAllTokens } from '@gold/utils/token-manager'
 
 // 本地持久化的 key
 const STORAGE_KEY = 'user_store_v1'
@@ -105,7 +106,48 @@ export const useUserStore = defineStore('user', () => {
     await persist()
   }
 
+  /**
+   * 获取用户信息（从后端）
+   * 登录成功后调用，更新用户信息
+   * 使用公共 hook @gold/hooks/web/useUserInfo
+   */
+  async function fetchUserInfo() {
+    try {
+      // 使用公共 hook 获取用户信息
+      const { getUserInfo } = await import('@gold/hooks/web/useUserInfo')
+      const { getToken } = await import('@gold/utils/token-manager')
+      
+      const userInfo = await getUserInfo({
+        getToken,
+      })
+      
+      if (userInfo) {
+        // 更新用户信息
+        userId.value = String(userInfo.id || userInfo.userId || userId.value)
+        nickname.value = userInfo.nickname || nickname.value
+        avatar.value = userInfo.avatar || avatar.value
+        // 如果有其他字段，也可以更新
+        if (userInfo.point !== undefined) credits.value = Number(userInfo.point || 0)
+        if (userInfo.experience !== undefined) {
+          // experience 可以映射到其他字段，根据实际需求
+        }
+        await persist()
+      }
+    } catch (error) {
+      console.error('获取用户信息失败:', error)
+      // 不抛出错误，避免影响登录流程
+    }
+  }
+
   async function logout() {
+    // 1. 清空所有 token
+    try {
+      clearAllTokens()
+    } catch (e) {
+      console.error('清空 token 失败:', e)
+    }
+    
+    // 2. 清空用户信息
     isLoggedIn.value = false
     userId.value = ''
     nickname.value = ''
@@ -117,13 +159,22 @@ export const useUserStore = defineStore('user', () => {
     balance.value = 0
     vipLevel.value = 0
     credits.value = 0
+    
+    // 3. 删除本地存储的用户数据
     await remove(STORAGE_KEY)
   }
 
+  // 初始化标志
+  const isHydrated = ref(false)
+
   // 初始化从本地恢复
-  hydrateFromStorage()
+  hydrateFromStorage().then(() => {
+    isHydrated.value = true
+  })
 
   return {
+    // 状态
+    isHydrated,
     // state
     isLoggedIn,
     userId,
@@ -143,6 +194,7 @@ export const useUserStore = defineStore('user', () => {
     loginWithPhone,
     loginWithWeChat,
     updateBalance,
+    fetchUserInfo,
     logout,
   }
 })

frontend/app/web-gold/src/utils/auth.js

@@ -1,42 +1,54 @@
-import { useCache } from '@gold/hooks/web/useCache'
-import { getToken as getTokenFromManager } from './token-manager'
+/**
+ * Token 管理兼容层
+ * 
+ * @deprecated 此文件已废弃，请直接使用 @gold/utils/token-manager
+ * 
+ * 为了保持向后兼容，此文件作为兼容层，所有函数都转发到 token-manager.js
+ * 新代码请直接使用 @gold/utils/token-manager 中的函数
+ */
 
-const { wsCache } = useCache()
+import {
+  getToken as getTokenFromManager,
+  setToken as setTokenFromManager,
+  getRefreshToken as getRefreshTokenFromManager,
+  getAccessToken as getAccessTokenFromManager,
+  removeToken as removeTokenFromManager,
+  clearAllTokens,
+  getAuthHeader
+} from '@gold/utils/token-manager'
 
-const AccessTokenKey = 'ACCESS_TOKEN'
-const RefreshTokenKey = 'REFRESH_TOKEN'
+/**
+ * 获取访问令牌
+ * @deprecated 使用 @gold/utils/token-manager 中的 getToken() 或 getAccessToken()
+ */
+export const getAccessToken = getAccessTokenFromManager
 
-// 获取token - 使用统一的 token 管理器
-export const getAccessToken = () => {
-  return getTokenFromManager()
-}
+/**
+ * 获取刷新令牌
+ * @deprecated 使用 @gold/utils/token-manager 中的 getRefreshToken()
+ */
+export const getRefreshToken = getRefreshTokenFromManager
 
-// 刷新token
-export const getRefreshToken = () => {
-  try {
-    // 优先从 wsCache 读取
-    const refreshToken = wsCache.get(RefreshTokenKey) || wsCache.get('refresh_token')
-    if (refreshToken) {
-      return refreshToken
-    }
-  } catch (e) {
-    console.warn('获取 refresh token 失败:', e)
-  }
-  return null
-}
-// 设置token
-export const setToken = (token) => {
-  wsCache.set(RefreshTokenKey, token.refreshToken)
-  wsCache.set(AccessTokenKey, token.accessToken)
-}
+/**
+ * 设置令牌
+ * @deprecated 使用 @gold/utils/token-manager 中的 setToken()
+ */
+export const setToken = setTokenFromManager
 
-// 删除token
-export const removeToken = () => {
-  wsCache.delete(AccessTokenKey)
-  wsCache.delete(RefreshTokenKey)
-}
+/**
+ * 删除令牌
+ * @deprecated 使用 @gold/utils/token-manager 中的 clearAllTokens() 或 removeToken()
+ */
+export const removeToken = removeTokenFromManager
 
-/** 格式化token（jwt格式） */
+/**
+ * 格式化token（jwt格式）
+ * @param {string} token - token 字符串
+ * @returns {string} Bearer token
+ */
 export const formatToken = (token) => {
   return 'Bearer ' + token
 }
+
+// 导出 token-manager 的其他函数，方便迁移
+export { clearAllTokens, getAuthHeader }

frontend/app/web-gold/src/utils/token-manager.js

@@ -1,100 +0,0 @@
-import { useCache } from '@gold/hooks/web/useCache'
-
-/**
- * Token 统一管理模块
- * 
- * 优先级顺序：
- * 1. 手动输入的 dev token (sessionStorage)
- * 2. 正式登录的 token (wsCache)
- * 3. 环境变量 VITE_DEV_TOKEN
- */
-
-// sessionStorage 中的手动 token key
-const DEV_MANUAL_TOKEN_KEY = 'DEV_MANUAL_TOKEN'
-
-// 获取缓存实例
-let wsCache = null
-function getCache() {
-  if (!wsCache) {
-    wsCache = useCache().wsCache
-  }
-  return wsCache
-}
-
-/**
- * 获取完整的 Authorization Header 值
- * @returns {string} Bearer token 或空字符串
- */
-export function getAuthHeader() {
-  const token = getToken()
-  return token ? `Bearer ${token}` : ''
-}
-
-/**
- * 获取 token
- * @returns {string} token 字符串
- */
-export function getToken() {
-  // 1. 优先使用手动输入的 dev token
-  const manualToken = sessionStorage.getItem(DEV_MANUAL_TOKEN_KEY)
-  if (manualToken) {
-    return manualToken
-  }
-
-  // 2. 使用正式登录的 token（从 wsCache 读取）
-  try {
-    const cache = getCache()
-    const accessToken = cache.get('ACCESS_TOKEN') || cache.get('access_token')
-    
-    if (accessToken) {
-      return accessToken
-    }
-  } catch (e) {
-    console.warn('获取 wsCache 失败:', e)
-  }
-
-  // 3. 兜底：环境变量中的 token
-  const envToken = import.meta?.env?.VITE_DEV_TOKEN
-  if (envToken) {
-    return envToken
-  }
-
-  return ''
-}
-
-/**
- * 设置手动输入的 dev token
- * @param {string} token 
- */
-export function setDevToken(token) {
-  if (token) {
-    sessionStorage.setItem(DEV_MANUAL_TOKEN_KEY, token)
-  } else {
-    sessionStorage.removeItem(DEV_MANUAL_TOKEN_KEY)
-  }
-}
-
-/**
- * 获取手动输入的 dev token（用于显示）
- * @returns {string} 
- */
-export function getDevToken() {
-  return sessionStorage.getItem(DEV_MANUAL_TOKEN_KEY) || ''
-}
-
-/**
- * 清除所有 token
- */
-export function clearAllTokens() {
-  sessionStorage.removeItem(DEV_MANUAL_TOKEN_KEY)
-  try {
-    const cache = getCache()
-    cache.delete('ACCESS_TOKEN')
-    cache.delete('access_token')
-    cache.delete('REFRESH_TOKEN')
-    cache.delete('refresh_token')
-  } catch (e) {
-    console.warn('清除 wsCache 失败:', e)
-  }
-}
-