feat: 优化首页、个人中心页面 UI

packages/app/src/pages/profile/index.vue

@@ -1,13 +1,12 @@
 <template>
-  <view class="profile-page">
-    <!-- Custom nav bar (transparent, blends with UserCard gradient) -->
-    <CustomNavBar title="我的" transparent />
+  <view class="profile-page" :style="{ paddingTop: navBarHeight + 'px' }">
+    <view class="profile-page__nav" :style="{ paddingTop: statusBarHeight + 'px' }">
+      <view class="profile-page__nav-title">我的</view>
+    </view>
 
     <!-- User card -->
     <UserCard :logged-in="loggedIn" :has-profile="hasProfile" :user="user" :stats="stats" :memberships="memberships"
-      :loading="loginLoading" :nav-bar-height="navBarHeight" @login="handleLogin" />
-
-    <PracticeActivityCard v-if="loggedIn" :key="userStore.token" :refresh-key="activityRefreshKey" />
+      :loading="loginLoading" @login="handleLogin" @edit="goToInfo" />
 
     <!-- Menu section: always visible -->
     <ProfileMenu
@@ -18,7 +17,9 @@
       :invite-share-eligible="!!user?.inviteShareEligible"
       @clear-cache="handleClearCache"
       @require-login="handleLogin"
-    />
+    >
+      <PracticeActivityCard v-if="loggedIn" :key="userStore.token" :refresh-key="activityRefreshKey" />
+    </ProfileMenu>
 
     <!-- Logout button: only when logged in -->
     <view v-if="loggedIn" class="profile-page__logout-wrap">
@@ -38,7 +39,6 @@ import { getErrorMessage } from '../../utils/auth'
 import PracticeActivityCard from '../../components/PracticeActivityCard.vue'
 import UserCard from '../../components/UserCard.vue'
 import ProfileMenu from '../../components/ProfileMenu.vue'
-import CustomNavBar from '../../components/CustomNavBar.vue'
 
 const userStore = useUserStore()
 const bookingStore = useBookingStore()
@@ -47,7 +47,8 @@ const { upcomingBookings } = storeToRefs(bookingStore)
 
 const activityRefreshKey = ref(0)
 const loginLoading = ref(false)
-const navBarHeight = ref(64)
+const navBarHeight = ref(getSystemLayout().navBarHeight)
+const statusBarHeight = getSystemLayout().statusBarHeight
 
 const activeMembershipCount = computed(
   () => user.value?.activeMembershipCount ?? userStore.activeMemberships.length,
@@ -107,12 +108,16 @@ async function handleLogin() {
   }
 }
 
+function goToInfo() {
+  uni.navigateTo({ url: '/pages/profile/info' })
+}
+
 function handleLogout() {
   uni.showModal({
     title: '退出登录',
     content: '确定要退出登录吗？',
     confirmText: '退出',
-    confirmColor: '#ff4d4f',
+    confirmColor: '#9c7a6e',
     success(res) {
       if (res.confirm) {
         userStore.logout()
@@ -138,27 +143,10 @@ function handleClearCache() {
 
 <style lang="scss" scoped>
 .profile-page {
-  min-height: 100vh;
-
-  &__logout-wrap {
-    margin: $spacing-xl $spacing-lg $spacing-xl;
-  }
-
-  &__logout-btn {
-    width: 100%;
-    height: 88rpx;
-    line-height: 88rpx;
-    background: $bg-card;
-    color: $error-color;
-    font-size: 30rpx;
-    font-weight: 500;
-    border: none;
-    border-radius: $radius-lg;
-    text-align: center;
-
-    &::after {
-      border: none;
-    }
-  }
+  min-height: 100vh; box-sizing: border-box; background: #fbf9f6; padding-bottom: 36rpx;
+  &__nav { position: fixed; top: 0; left: 0; right: 0; z-index: 101; background: #fbf9f6; }
+  &__nav-title { height: 88rpx; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 500; color: #514943; }
+  &__logout-wrap { margin: 28rpx 32rpx 0; }
+  &__logout-btn { width: 100%; height: 80rpx; line-height: 80rpx; padding: 0; margin: 0; border: none; border-radius: 24rpx; background: #f2ede7; color: #91766a; font-size: 25rpx; font-weight: 400; &::after { border: none; } }
 }
 </style>