优化

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

@@ -20,6 +20,21 @@ function filterVisibleGroups(config, isLoggedIn) {
 const visibleNavConfig = computed(() => {
   return filterVisibleGroups(navConfig, userStore.isLoggedIn)
 })
+
+// 脱敏手机号
+const maskedMobile = computed(() => {
+  const mobile = userStore.mobile
+  if (!mobile) return '未设置'
+  return mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
+})
+
+// 剩余额度百分比
+const remainingPercent = computed(() => {
+  const total = userStore.totalStorage
+  const remaining = userStore.remainingStorage
+  if (total === 0) return 0
+  return Math.min(100, Math.round((remaining / total) * 100))
+})
 </script>
 
 <template>
@@ -43,6 +58,17 @@ const visibleNavConfig = computed(() => {
         </router-link>
       </div>
     </nav>
+    <!-- 底部用户信息卡片 -->
+    <router-link
+      v-if="userStore.isLoggedIn"
+      to="/user/profile"
+      class="sidebar__footer"
+    >
+      <div class="user-card">
+        <div class="user-card__mobile">{{ maskedMobile }}</div>
+        <div class="user-card__quota">剩余额度 {{ remainingPercent }}%</div>
+      </div>
+    </router-link>
   </aside>
 </template>
 
@@ -54,10 +80,13 @@ const visibleNavConfig = computed(() => {
   width: 220px;
   border-right: 1px solid var(--color-border);
   background: var(--color-surface);
-  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
 }
 
 .sidebar__nav {
+  flex: 1;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
   padding: 12px;
@@ -125,4 +154,37 @@ const visibleNavConfig = computed(() => {
 .nav-item__label {
   font-size: 14px;
 }
+
+/* 底部用户信息卡片 */
+.sidebar__footer {
+  flex-shrink: 0;
+  padding: 12px;
+  border-top: 1px solid var(--color-border);
+  text-decoration: none;
+}
+
+.user-card {
+  padding: 12px;
+  border-radius: 12px;
+  background: var(--color-slate-50);
+  cursor: pointer;
+  transition: background .2s ease, transform .12s ease;
+}
+
+.user-card:hover {
+  background: var(--color-slate-100);
+  transform: translateY(-1px);
+}
+
+.user-card__mobile {
+  font-size: 14px;
+  font-weight: 500;
+  color: var(--color-slate-700);
+  margin-bottom: 6px;
+}
+
+.user-card__quota {
+  font-size: 12px;
+  color: var(--color-text-secondary);
+}
 </style>