feat: 完善个人中心

packages/app/src/components/ProfileMenu.vue

@@ -11,7 +11,7 @@
         :class="{ 'profile-menu__item--admin': item.isAdmin }"
         hover-class="profile-menu__item--hover"
         hover-stay-time="150"
-        @tap="navigate(item.path!)"
+        @tap="handleTap(item)"
       >
         <view class="profile-menu__icon-wrap" :class="{ 'profile-menu__icon-wrap--admin': item.isAdmin }">
           <text class="profile-menu__icon">{{ item.icon }}</text>
@@ -19,6 +19,7 @@
         <text class="profile-menu__title" :class="{ 'profile-menu__title--admin': item.isAdmin }">
           {{ item.title }}
         </text>
+        <text v-if="item.badge" class="profile-menu__badge">{{ item.badge }}</text>
         <text class="profile-menu__arrow">›</text>
       </view>
     </template>
@@ -35,10 +36,20 @@ interface MenuItem {
   title?: string
   path?: string
   isAdmin?: boolean
+  badge?: string
+  action?: 'clear' | 'about'
+  requireAuth?: boolean
 }
 
 const props = defineProps<{
   isAdmin: boolean
+  requireAuth?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'clear-cache'): void
+  (e: 'about'): void
+  (e: 'require-login'): void
 }>()
 
 const menuItems = computed<MenuItem[]>(() => {
@@ -49,6 +60,7 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: '💳',
       title: '我的会员卡',
       path: '/pages/profile/membership',
+      requireAuth: true,
     },
     {
       key: 'bookings',
@@ -56,6 +68,7 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: '📅',
       title: '我的预约',
       path: '/pages/profile/bookings',
+      requireAuth: true,
     },
     {
       key: 'info',
@@ -63,11 +76,30 @@ const menuItems = computed<MenuItem[]>(() => {
       icon: '👤',
       title: '个人信息',
       path: '/pages/profile/info',
+      requireAuth: true,
+    },
+    {
+      key: 'sep1',
+      type: 'separator',
+    },
+    {
+      key: 'clear',
+      type: 'item',
+      icon: '🗑️',
+      title: '清除缓存',
+      action: 'clear',
+    },
+    {
+      key: 'about',
+      type: 'item',
+      icon: 'ℹ️',
+      title: '关于我们',
+      action: 'about',
     },
   ]
 
   if (props.isAdmin) {
-    items.push({ key: 'sep', type: 'separator' })
+    items.push({ key: 'sep2', type: 'separator' })
     items.push({
       key: 'admin',
       type: 'item',
@@ -75,14 +107,25 @@ const menuItems = computed<MenuItem[]>(() => {
       title: '管理中心',
       path: '/pages/admin/index',
       isAdmin: true,
+      requireAuth: true,
     })
   }
 
   return items
 })
 
-function navigate(path: string) {
-  uni.navigateTo({ url: path })
+function handleTap(item: MenuItem) {
+  if (item.requireAuth && !props.requireAuth) {
+    emit('require-login')
+    return
+  }
+  if (item.action === 'clear') {
+    emit('clear-cache')
+  } else if (item.action === 'about') {
+    emit('about')
+  } else if (item.path) {
+    uni.navigateTo({ url: item.path })
+  }
 }
 </script>
 
@@ -90,7 +133,7 @@ function navigate(path: string) {
 .profile-menu {
   background: $bg-card;
   border-radius: $radius-lg;
-  margin: $spacing-md $spacing-lg 0;
+  margin: $spacing-lg $spacing-lg 0;
   overflow: hidden;
 
   &__separator {
@@ -111,11 +154,11 @@ function navigate(path: string) {
     }
 
     &--hover {
-      background: #f9f9f9;
+      background: #f5f5f5;
     }
 
     &--admin {
-      // Admin row gets a subtle accent tint
+      background: rgba($accent-color, 0.04);
     }
   }
 
@@ -123,7 +166,7 @@ function navigate(path: string) {
     width: 64rpx;
     height: 64rpx;
     border-radius: $radius-sm;
-    background: rgba($brand-color, 0.06);
+    background: rgba($brand-color, 0.08);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -144,7 +187,6 @@ function navigate(path: string) {
     flex: 1;
     font-size: 30rpx;
     color: $text-primary;
-    font-weight: 400;
 
     &--admin {
       color: $accent-color;
@@ -152,6 +194,15 @@ function navigate(path: string) {
     }
   }
 
+  &__badge {
+    font-size: 22rpx;
+    color: #ffffff;
+    background: $error-color;
+    border-radius: 20rpx;
+    padding: 2rpx 12rpx;
+    margin-right: $spacing-sm;
+  }
+
   &__arrow {
     font-size: 36rpx;
     color: $text-hint;