perf: 完善订单管理

2026-04-05 21:03:18 +08:00
parent fdb13c32c2
commit 4633ceea8c
29 changed files with 1000 additions and 261 deletions
--- a/packages/app/src/components/BrandBanner.vue
+++ b/packages/app/src/components/BrandBanner.vue
@@ -35,6 +35,7 @@
 <script setup lang="ts">
 import { onMounted, ref } from 'vue'
 import type { StudioConfig } from '@mp-pilates/shared'
+import { getSystemLayout } from '../utils/system'

 defineProps<{
  studioInfo: StudioConfig | null
@@ -43,8 +44,7 @@ defineProps<{
 const statusBarHeight = ref(0)

 onMounted(() => {
-  const sysInfo = uni.getSystemInfoSync()
-  statusBarHeight.value = sysInfo.statusBarHeight ?? 20
+  statusBarHeight.value = getSystemLayout().statusBarHeight
 })
 </script>

--- a/packages/app/src/components/ProfileMenu.vue
+++ b/packages/app/src/components/ProfileMenu.vue
@@ -13,9 +13,13 @@
        hover-stay-time="150"
        @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>
-        </view>
+        <view
+          class="profile-menu__icon-wrap"
+          :class="[
+            `profile-menu__icon-wrap--${item.key}`,
+            { 'profile-menu__icon-wrap--admin': item.isAdmin },
+          ]"
+        />
        <text class="profile-menu__title" :class="{ 'profile-menu__title--admin': item.isAdmin }">
          {{ item.title }}
        </text>
@@ -32,7 +36,6 @@ import { computed } from 'vue'
 interface MenuItem {
  key: string
  type: 'item' | 'separator'
-  icon?: string
  title?: string
  path?: string
  isAdmin?: boolean
@@ -57,7 +60,6 @@ const menuItems = computed<MenuItem[]>(() => {
    {
      key: 'membership',
      type: 'item',
-      icon: '💳',
      title: '我的会员卡',
      path: '/pages/profile/membership',
      requireAuth: true,
@@ -65,7 +67,6 @@ const menuItems = computed<MenuItem[]>(() => {
    {
      key: 'bookings',
      type: 'item',
-      icon: '📅',
      title: '我的预约',
      path: '/pages/profile/bookings',
      requireAuth: true,
@@ -73,7 +74,6 @@ const menuItems = computed<MenuItem[]>(() => {
    {
      key: 'info',
      type: 'item',
-      icon: '👤',
      title: '个人信息',
      path: '/pages/profile/info',
      requireAuth: true,
@@ -85,14 +85,12 @@ const menuItems = computed<MenuItem[]>(() => {
    {
      key: 'clear',
      type: 'item',
-      icon: '🗑️',
      title: '清除缓存',
      action: 'clear',
    },
    {
      key: 'about',
      type: 'item',
-      icon: 'ℹ️',
      title: '关于我们',
      action: 'about',
    },
@@ -103,7 +101,6 @@ const menuItems = computed<MenuItem[]>(() => {
    items.push({
      key: 'admin',
      type: 'item',
-      icon: '⚙️',
      title: '管理中心',
      path: '/pages/admin/index',
      isAdmin: true,
@@ -163,26 +160,179 @@ function handleTap(item: MenuItem) {
  }

  &__icon-wrap {
-    width: 64rpx;
-    height: 64rpx;
-    border-radius: $radius-sm;
-    background: rgba($brand-color, 0.08);
+    width: 56rpx;
+    height: 56rpx;
+    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-right: $spacing-md;
+    position: relative;
+    background: rgba($brand-color, 0.06);

+    // ─── Pure CSS Icons ────────────────────────────────
+
+    // 会员卡 — 圆角矩形卡片 + 横线
+    &--membership {
+      background: rgba($accent-color, 0.10);
+      &::before {
+        content: '';
+        width: 26rpx;
+        height: 18rpx;
+        border: 2.5rpx solid $accent-color;
+        border-radius: 4rpx;
+        box-sizing: border-box;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, 1rpx);
+        width: 16rpx;
+        height: 0;
+        border-top: 2.5rpx solid $accent-color;
+      }
+    }
+
+    // 预约 — 日历（矩形 + 顶部两个小竖线）
+    &--bookings {
+      background: rgba($brand-color, 0.06);
+      &::before {
+        content: '';
+        width: 24rpx;
+        height: 22rpx;
+        border: 2.5rpx solid $brand-color;
+        border-radius: 4rpx;
+        border-top-width: 5rpx;
+        box-sizing: border-box;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        top: 14rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        width: 10rpx;
+        height: 0;
+        border-top: 2.5rpx solid $brand-color;
+        // 用 box-shadow 模拟两个竖线
+        box-shadow:
+          -4rpx -7rpx 0 0 $brand-color,
+          4rpx -7rpx 0 0 $brand-color;
+      }
+    }
+
+    // 个人信息 — 人形（圆 + 肩弧）
+    &--info {
+      background: rgba($brand-color, 0.06);
+      &::before {
+        content: '';
+        width: 12rpx;
+        height: 12rpx;
+        border: 2.5rpx solid $brand-color;
+        border-radius: 50%;
+        position: absolute;
+        top: 16rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        box-sizing: border-box;
+      }
+      &::after {
+        content: '';
+        width: 22rpx;
+        height: 10rpx;
+        border: 2.5rpx solid $brand-color;
+        border-bottom: none;
+        border-radius: 12rpx 12rpx 0 0;
+        position: absolute;
+        bottom: 13rpx;
+        left: 50%;
+        transform: translateX(-50%);
+        box-sizing: border-box;
+      }
+    }
+
+    // 清除缓存 — 旋转的刷新箭头（圆弧）
+    &--clear {
+      background: rgba($text-hint, 0.08);
+      &::before {
+        content: '';
+        width: 20rpx;
+        height: 20rpx;
+        border: 2.5rpx solid $text-secondary;
+        border-radius: 50%;
+        border-right-color: transparent;
+        box-sizing: border-box;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        top: 14rpx;
+        right: 15rpx;
+        width: 0;
+        height: 0;
+        border-left: 5rpx solid $text-secondary;
+        border-top: 4rpx solid transparent;
+        border-bottom: 4rpx solid transparent;
+      }
+    }
+
+    // 关于我们 — 圆形中心一个点 + 竖线（info 标记）
+    &--about {
+      background: rgba($text-hint, 0.08);
+      &::before {
+        content: '';
+        width: 22rpx;
+        height: 22rpx;
+        border: 2.5rpx solid $text-secondary;
+        border-radius: 50%;
+        box-sizing: border-box;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: 2.5rpx;
+        height: 8rpx;
+        background: $text-secondary;
+        border-radius: 1rpx;
+        box-shadow: 0 -6rpx 0 0 $text-secondary;
+      }
+    }
+
+    // 管理中心 — 齿轮（圆 + 四个刻度）
    &--admin {
      background: rgba($accent-color, 0.12);
+      &::before {
+        content: '';
+        width: 14rpx;
+        height: 14rpx;
+        border: 2.5rpx solid $accent-color;
+        border-radius: 50%;
+        box-sizing: border-box;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 24rpx;
+        height: 24rpx;
+        transform: translate(-50%, -50%);
+        // 四条刻度线用 box-shadow 实现
+        background:
+          linear-gradient($accent-color, $accent-color) center top / 2.5rpx 5rpx no-repeat,
+          linear-gradient($accent-color, $accent-color) center bottom / 2.5rpx 5rpx no-repeat,
+          linear-gradient($accent-color, $accent-color) left center / 5rpx 2.5rpx no-repeat,
+          linear-gradient($accent-color, $accent-color) right center / 5rpx 2.5rpx no-repeat;
+      }
    }
  }

-  &__icon {
-    font-size: 32rpx;
-    line-height: 1;
-  }
-
  &__title {
    flex: 1;
    font-size: 30rpx;
--- a/packages/app/src/components/UserCard.vue
+++ b/packages/app/src/components/UserCard.vue
@@ -5,7 +5,7 @@
      <!-- Not logged in state -->
      <view v-if="!loggedIn" class="user-card__guest">
        <view class="user-card__avatar-wrap">
-          <image class="user-card__avatar-img" src="/static/default-avatar.png" mode="aspectFill" />
+          <image class="user-card__avatar-img" src="/static/default-avatar.jpg" mode="aspectFill" />
        </view>
        <view class="user-card__guest-info">
          <text class="user-card__guest-title">Hi，欢迎来到普拉提</text>
@@ -25,9 +25,10 @@
            mode="aspectFill"
            @error="onAvatarError"
          />
-          <view class="user-card__vip-badge" v-if="vipLevel">
+          <!-- VIP badge hidden for now -->
+          <!-- <view class="user-card__vip-badge" v-if="vipLevel">
            <text class="user-card__vip-text">{{ vipLevel }}</text>
-          </view>
+          </view> -->
        </view>
        <view class="user-card__info">
          <view class="user-card__name-row">
@@ -105,7 +106,7 @@ watch(

 const avatarSrc = computed(() => {
  if (avatarFailed.value || !props.user?.avatarUrl) {
-    return '/static/default-avatar.png'
+    return '/static/default-avatar.jpg'
  }
  return props.user.avatarUrl
 })