优化

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

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import { useUserStore } from '@/stores/user'
 
@@ -7,35 +7,16 @@ const router = useRouter()
 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}`
+// 存储空间数据（后端单位 GB，前端展示转换为 MB）
+const GB_TO_MB = 1024
+const totalStorage = computed(() => userStore.totalStorage * GB_TO_MB)
+const usedStorage = computed(() => userStore.usedStorage * GB_TO_MB)
+const availableStorage = computed(() => userStore.remainingStorage * GB_TO_MB)
+const storagePercent = computed(() => {
+  if (totalStorage.value === 0) return 0
+  return (usedStorage.value / totalStorage.value) * 100
 })
 
-// 计算存储空间（根据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) {
@@ -44,9 +25,9 @@ function formatStorage(mb) {
   return Math.round(mb) + ' MB'
 }
 
-// 格式化余额
-function formatBalance(balance) {
-  return balance.toFixed(2)
+// 格式化金额
+function formatMoney(amount) {
+  return amount.toFixed(2)
 }
 
 // 格式化积分
@@ -68,12 +49,18 @@ function handleMouseLeave() {
 async function handleLogout() {
   try {
     await userStore.logout()
-    // 跳转到登录页
     router.push('/login')
   } catch (error) {
     console.error('退出登录失败:', error)
   }
 }
+
+// 挂载时获取档案数据
+onMounted(async () => {
+  if (userStore.isLoggedIn && !userStore.profile) {
+    await userStore.fetchUserProfile()
+  }
+})
 </script>
 
 <template>
@@ -93,12 +80,6 @@ async function handleLogout() {
       <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>
 
     <!-- 下拉菜单 -->
@@ -108,11 +89,11 @@ async function handleLogout() {
         <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" 
+            <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' }}
@@ -121,7 +102,6 @@ async function handleLogout() {
           <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>
@@ -130,19 +110,6 @@ async function handleLogout() {
         <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">
@@ -160,8 +127,8 @@ async function handleLogout() {
           <!-- 存储进度条 -->
           <div class="storage-progress">
             <div class="progress-bar">
-              <div 
-                class="progress-fill" 
+              <div
+                class="progress-fill"
                 :style="{ width: storagePercent + '%' }"
               ></div>
             </div>
@@ -172,31 +139,31 @@ async function handleLogout() {
             </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>
+              <span>剩余积分</span>
             </div>
             <div class="info-value credits-value">
-              {{ formatCredits(userStore.credits) }}
+              {{ formatCredits(userStore.remainingPoints) }}
             </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>
+              <span>累计充值</span>
             </div>
             <div class="info-value balance-value">
-              ¥{{ formatBalance(userStore.balance) }}
+              ¥{{ formatMoney(userStore.totalRecharge) }}
             </div>
           </div>
         </div>
@@ -268,21 +235,6 @@ async function handleLogout() {
   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);
@@ -377,20 +329,6 @@ async function handleLogout() {
   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);
@@ -436,10 +374,6 @@ async function handleLogout() {
   color: var(--color-text);
 }
 
-.vip-text {
-  color: #FFD700;
-}
-
 .credits-value {
   color: var(--color-primary);
 }