feat: 优化主题配色

2026-04-05 21:35:30 +08:00
parent 4633ceea8c
commit c0e0d31ae7
25 changed files with 423 additions and 252 deletions
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -97,3 +97,54 @@ Prisma schema 位于 `packages/server/prisma/schema.prisma`，关键约定：
 - **异常处理**：使用 NestJS 内置异常（BadRequestException、NotFoundException 等）
 - **分页**：统一使用 `PaginatedResponse<T>`，包含 data、total、page、limit
 - **pnpm**：使用 `shamefully-hoist=true`（.npmrc），为 Uni-app 兼容所需
+
+## 前端样式规范
+
+### 主题色变量（必用）
+
+所有色值必须使用 `packages/app/src/uni.scss` 中定义的 SCSS 变量，禁止在 Vue/Scss 文件中硬编码色值。
+
+**主题色系：**
+
+```scss
+$primary-color:       #a9bfcc;   /* 主色-柔雾蓝灰 */
+$primary-dark:        #7ba5be;   /* 主色-深蓝灰 */
+$primary-light:       #c8d8e4;   /* 主色-浅蓝灰 */
+$primary-bg:         #f0f6f9;   /* 页面背景-冷白蓝 */
+$primary-border:      #d8eaf4;   /* 边框-淡蓝灰 */
+$primary-selected-bg: #EFF6F9;  /* 选中态背景 */
+```
+
+**通用语义变量（已同步主题色）：**
+
+| 变量 | 值 | 用途 |
+|------|----|------|
+| `$accent-color` | `#7ba5be` | 强调色 |
+| `$warning-color` | `#e8a87c` | 警告色 |
+| `$brand-light` | `#c8d8e4` | 品牌浅色 |
+| `$border-color` | `rgba(180,160,130,0.2)` | 边框（中性） |
+| `$text-primary` | `#4A4035` | 主文字（深棕灰） |
+| `$text-secondary` | `#7A6A5A` | 次文字 |
+| `$text-hint` | `#A09080` | 弱提示文字 |
+
+### 变量替换规则
+
+| 旧硬编码 | 替换为 |
+|---------|--------|
+| `#c9a87c`（旧暖棕金） | `$primary-dark` |
+| `#d4b896`（旧浅棕金） | `$primary-color` |
+| `#C4956A`（旧警告橙棕） | `$warning-color` |
+| `#B08050`（旧深棕） | `$accent-color` |
+| `#7d6608`（旧深暖绿） | `#5a7a8a`（冷青灰） |
+| `#e8c88a`、`#b49868`（旧暖渐变） | `$primary-color` / `$primary-dark` |
+
+### CSS 变量规范
+
+组件内部的多处共用颜色（如阴影、遮罩）若无法用 SCSS 变量，需用 `rgba($primary-dark, 0.x)` 形式动态构造，不可直接写死十六进制值。
+
+### 新增页面/组件
+
+新增页面或组件时：
+1. 优先查阅 `uni.scss` 已有变量
+2. 若需要新增语义化变量，先更新 `uni.scss`，再在组件中引用
+3. 禁止在 `<style>` 块内直接写十六进制颜色值（背景色、文字色、边框、阴影均需走变量）
--- a/packages/app/src/components/BookingConfirmPopup.vue
+++ b/packages/app/src/components/BookingConfirmPopup.vue
@@ -212,7 +212,7 @@ function handleMaskTap() {
  display: flex;
  align-items: center;
  justify-content: center;
-  background: #f5f5f5;
+  background: $primary-selected-bg;
  border-radius: 50%;
 }

@@ -250,7 +250,7 @@ function handleMaskTap() {

 .divider {
  height: 1rpx;
-  background: #f0f0f0;
+  background: $primary-border;
  margin: 8rpx 0 28rpx;
 }

@@ -285,14 +285,14 @@ function handleMaskTap() {
  align-items: center;
  padding: 24rpx 20rpx;
  border-radius: 16rpx;
-  border: 2rpx solid #f0f0f0;
-  background: #fafafa;
+  border: 2rpx solid $primary-border;
+  background: $primary-bg;
  gap: 20rpx;
  transition: border-color 0.15s, background 0.15s;

  &.selected {
-    border-color: #c9a87c;
-    background: #fffbf5;
+    border-color: $primary-dark;
+    background: $primary-selected-bg;
  }
 }

@@ -300,7 +300,7 @@ function handleMaskTap() {
  width: 60rpx;
  height: 60rpx;
  border-radius: 14rpx;
-  background: linear-gradient(135deg, #d4b896, #c9a87c);
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -333,7 +333,7 @@ function handleMaskTap() {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
-  background: #c9a87c;
+  background: $primary-dark;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -358,7 +358,7 @@ function handleMaskTap() {

 /* Deduction tip */
 .deduction-tip {
-  background: #fffbf0;
+  background: $primary-selected-bg;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  margin-bottom: 28rpx;
@@ -366,7 +366,7 @@ function handleMaskTap() {

 .deduction-text {
  font-size: 24rpx;
-  color: #c9a87c;
+  color: $primary-dark;
  line-height: 1.5;
 }

@@ -382,7 +382,7 @@ function handleMaskTap() {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
-  border: 2rpx solid #e0e0e0;
+  border: 2rpx solid $primary-border;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -402,7 +402,7 @@ function handleMaskTap() {
  flex: 2;
  height: 88rpx;
  border-radius: 44rpx;
-  background: #c9a87c;
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -412,7 +412,7 @@ function handleMaskTap() {
  }

  &.disabled {
-    background: #e0e0e0;
+    background: $primary-border;
  }
 }

--- a/packages/app/src/components/BrandBanner.vue
+++ b/packages/app/src/components/BrandBanner.vue
@@ -54,7 +54,7 @@ onMounted(() => {
  width: 100%;
  height: 580rpx;
  overflow: hidden;
-  background: #2a2a2a;
+  background: linear-gradient(160deg, #E1F4FA 0%, $primary-color 50%, $primary-dark 100%);
 }

 .banner-bg {
@@ -71,7 +71,7 @@ onMounted(() => {
  left: 0;
  width: 100%;
  height: 100%;
-  background: rgba(0, 0, 0, 0.3);
+  background: rgba($primary-dark, 0.25);
 }

 .status-bar {
--- a/packages/app/src/components/CardShop.vue
+++ b/packages/app/src/components/CardShop.vue
@@ -189,7 +189,7 @@ function truncate(str: string, maxLen: number): string {
 }

 .thumb--trial .thumb-fallback {
-  background: linear-gradient(135deg, #7d6608, #c9a87c);
+  background: linear-gradient(135deg, #5a7a8a, $primary-dark);
 }

 .thumb-name {
@@ -309,11 +309,6 @@ function truncate(str: string, maxLen: number): string {
  }
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* ── Empty state ── */
 .empty-state {
  padding: 80rpx;
--- a/packages/app/src/components/DateSelector.vue
+++ b/packages/app/src/components/DateSelector.vue
@@ -53,7 +53,7 @@ function handleSelect(date: string) {
 .date-selector {
  background: #fff;
  padding: 16rpx 0 20rpx;
-  border-bottom: 1rpx solid #f0ece8;
+  border-bottom: 1rpx solid $primary-border;

  .scroll {
    width: 100%;
@@ -75,7 +75,7 @@ function handleSelect(date: string) {
    min-width: 88rpx;
    padding: 16rpx 12rpx;
    border-radius: 16rpx;
-    background: #f7f4f0;
+    background: $primary-bg;
    gap: 4rpx;
    transition: background 0.2s;
    flex-shrink: 0;
@@ -100,7 +100,7 @@ function handleSelect(date: string) {
    }

    &.active {
-      background: #c9a87c;
+      background: $primary-color;

      .weekday {
        color: rgba(255, 255, 255, 0.85);
@@ -117,7 +117,7 @@ function handleSelect(date: string) {

    &.today:not(.active) {
      .weekday {
-        color: #c9a87c;
+        color: $primary-dark;
        font-weight: 600;
      }
    }
--- a/packages/app/src/components/QuickEntry.vue
+++ b/packages/app/src/components/QuickEntry.vue
@@ -244,15 +244,15 @@ const lowestRemainingTimes = computed(() => {
 }

 .login-btn {
-  background: #c9a87c;
+  background: $primary-dark;
 }

 .trial-btn {
-  background: #c9a87c;
+  background: $primary-dark;
 }

 .book-btn {
-  background: #c9a87c;
+  background: $primary-dark;
 }

 .renew-btn {
@@ -278,7 +278,7 @@ const lowestRemainingTimes = computed(() => {
 }

 .trial-badge {
-  background: #c9a87c;
+  background: $primary-dark;
  color: #1a1a2e;
 }

@@ -313,7 +313,7 @@ const lowestRemainingTimes = computed(() => {

 .renew-tip-action {
  font-size: 24rpx;
-  color: #c9a87c;
+  color: $primary-dark;
  font-weight: 600;
  flex-shrink: 0;
 }
--- a/packages/app/src/components/SlotCard.vue
+++ b/packages/app/src/components/SlotCard.vue
@@ -116,8 +116,8 @@ const capacityClass = computed(() => {
  }

  &--booked {
-    background: #fffdf8;
-    box-shadow: 0 4rpx 24rpx rgba(201, 168, 124, 0.12);
+    background: #f0f7fb;
+    box-shadow: 0 4rpx 24rpx rgba($primary-dark, 0.12);
  }
 }

@@ -127,7 +127,7 @@ const capacityClass = computed(() => {
  top: 0;
  bottom: 0;
  width: 8rpx;
-  background: linear-gradient(180deg, #d4b896, #c9a87c);
+  background: linear-gradient(180deg, $primary-color, $primary-dark);
  border-radius: 24rpx 0 0 24rpx;
 }

@@ -262,8 +262,8 @@ const capacityClass = computed(() => {
  }

  &.btn-book {
-    background: linear-gradient(135deg, #d4b896, #c9a87c);
-    box-shadow: 0 4rpx 16rpx rgba(201, 168, 124, 0.3);
+    background: linear-gradient(135deg, $primary-color, $primary-dark);
+    box-shadow: 0 4rpx 16rpx rgba($primary-dark, 0.3);

    .btn-text { color: #fff; }

@@ -295,7 +295,7 @@ const capacityClass = computed(() => {
 .badge-booked {
  height: 52rpx;
  padding: 0 24rpx;
-  background: linear-gradient(135deg, #fff8ee, #fff4e0);
+  background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
  border-radius: 26rpx;
  display: flex;
  align-items: center;
@@ -303,7 +303,7 @@ const capacityClass = computed(() => {

  .badge-text {
    font-size: 24rpx;
-    color: #c9a87c;
+    color: $primary-dark;
    font-weight: 600;
  }
 }
--- a/packages/app/src/components/TimePeriodFilter.vue
+++ b/packages/app/src/components/TimePeriodFilter.vue
@@ -53,7 +53,7 @@ function handleChange(key: PeriodKey) {
  flex-direction: row;
  background: #fff;
  padding: 0 24rpx;
-  border-bottom: 1rpx solid #f0ece8;
+  border-bottom: 1rpx solid $primary-border;

  .tab-item {
    flex: 1;
@@ -71,7 +71,7 @@ function handleChange(key: PeriodKey) {

    &.active {
      .tab-label {
-        color: #c9a87c;
+        color: $primary-dark;
        font-weight: 600;
      }

@@ -83,7 +83,7 @@ function handleChange(key: PeriodKey) {
        transform: translateX(-50%);
        width: 40rpx;
        height: 4rpx;
-        background: #c9a87c;
+        background: $primary-dark;
        border-radius: 2rpx;
      }
    }
--- a/packages/app/src/components/UpcomingBooking.vue
+++ b/packages/app/src/components/UpcomingBooking.vue
@@ -119,7 +119,7 @@ function goToBookings() {

 .section-more {
  font-size: 26rpx;
-  color: #c9a87c;
+  color: $primary-dark;
 }

 .booking-card {
@@ -150,7 +150,7 @@ function goToBookings() {

 .date-month {
  font-size: 22rpx;
-  color: #c9a87c;
+  color: $primary-dark;
  margin-top: 4rpx;
 }

--- a/packages/app/src/components/UserCard.vue
+++ b/packages/app/src/components/UserCard.vue
@@ -148,7 +148,7 @@ function handleLogin() {

 <style lang="scss" scoped>
 .user-card {
-  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #ec4899 100%);
+  background: linear-gradient(160deg, #E1F4FA 0%, $primary-color 50%, $primary-dark 100%);
  border-radius: 0 0 40rpx 40rpx;
  overflow: hidden;

--- a/packages/app/src/pages/admin/card-types.vue
+++ b/packages/app/src/pages/admin/card-types.vue
@@ -476,7 +476,7 @@ onMounted(fetchCardTypes)
  padding: 12rpx 28rpx;
 }

-.add-btn-text { font-size: 26rpx; font-weight: 600; color: #c9a87c; }
+.add-btn-text { font-size: 26rpx; font-weight: 600; color: $primary-dark; }

 /* ── Skeleton ────────────────────────────── */
 .skeleton-list { padding: 0 24rpx; }
@@ -490,11 +490,6 @@ onMounted(fetchCardTypes)
  animation: shimmer 1.4s infinite;
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* ── Empty ───────────────────────────────── */
 .empty-state {
  display: flex;
@@ -529,7 +524,7 @@ onMounted(fetchCardTypes)

 .header--times    { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
 .header--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
-.header--trial    { background: linear-gradient(90deg, #7d6608, #c9a87c); }
+.header--trial    { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }

 .ct-type-label { font-size: 22rpx; font-weight: 600; color: #ffffff; letter-spacing: 2rpx; }

@@ -555,7 +550,7 @@ onMounted(fetchCardTypes)
  margin-bottom: 12rpx;
 }

-.ct-price { font-size: 40rpx; font-weight: 800; color: #c9a87c; }
+.ct-price { font-size: 40rpx; font-weight: 800; color: $primary-dark; }

 .ct-original {
  font-size: 24rpx;
@@ -725,5 +720,5 @@ onMounted(fetchCardTypes)
  &--loading { opacity: 0.6; pointer-events: none; }
 }

-.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: #c9a87c; }
+.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
 </style>
--- a/packages/app/src/pages/admin/index.vue
+++ b/packages/app/src/pages/admin/index.vue
@@ -1,41 +1,147 @@
 <template>
  <view class="page" :style="{ paddingTop: navBarHeight }">
    <CustomNavBar title="管理中心" show-back />
-    <!-- Stats row -->
-    <view class="stats-row">
-      <view v-if="statsLoading" class="stats-shimmer-wrap">
-        <view v-for="i in 3" :key="i" class="stats-shimmer" />
+
+    <!-- Stats summary card -->
+    <view class="stats-card-wrap">
+      <view class="stats-card">
+        <view v-if="statsLoading" class="stats-loading">
+          <view v-for="i in 3" :key="i" class="stat-skeleton" />
+        </view>
+        <template v-else>
+          <view class="stat-block">
+            <text class="stat-num">{{ stats.todayBookings }}</text>
+            <text class="stat-sub">今日预约</text>
+          </view>
+          <view class="stat-sep" />
+          <view class="stat-block">
+            <text class="stat-num">{{ stats.totalOrders }}</text>
+            <text class="stat-sub">总订单</text>
+          </view>
+          <view class="stat-sep" />
+          <view class="stat-block">
+            <text class="stat-num">{{ stats.totalBookings }}</text>
+            <text class="stat-sub">总预约</text>
+          </view>
+        </template>
      </view>
-      <template v-else>
-        <view class="stat-item">
-          <text class="stat-value">{{ stats.todayBookings }}</text>
-          <text class="stat-label">今日预约</text>
-        </view>
-        <view class="stat-divider" />
-        <view class="stat-item">
-          <text class="stat-value">{{ stats.totalOrders }}</text>
-          <text class="stat-label">总订单</text>
-        </view>
-        <view class="stat-divider" />
-        <view class="stat-item">
-          <text class="stat-value">{{ stats.totalBookings }}</text>
-          <text class="stat-label">总预约</text>
-        </view>
-      </template>
    </view>

-    <!-- Nav grid -->
-    <view class="nav-grid">
-      <view
-        v-for="item in navItems"
-        :key="item.path"
-        class="nav-item"
-        @tap="navigate(item.path)"
-      >
-        <text class="nav-icon">{{ item.icon }}</text>
-        <text class="nav-label">{{ item.label }}</text>
+    <!-- Section header: 课程管理 -->
+    <view class="section-header">
+      <text class="section-title">课程管理</text>
+    </view>
+
+    <!-- List: schedule -->
+    <view class="list">
+      <view class="list-item" @tap="navigate('/pages/admin/schedule')">
+        <view class="item-left">
+          <view class="item-icon-wrap icon--schedule">
+            <text class="item-icon-text">◇</text>
+          </view>
+          <view class="item-text-group">
+            <text class="item-title">排课管理</text>
+            <text class="item-desc">管理每周课程时段</text>
+          </view>
+        </view>
+        <view class="item-arrow">
+          <text class="arrow-text">›</text>
+        </view>
+      </view>
+
+      <view class="list-item" @tap="navigate('/pages/admin/week-template')">
+        <view class="item-left">
+          <view class="item-icon-wrap icon--template">
+            <text class="item-icon-text">◈</text>
+          </view>
+          <view class="item-text-group">
+            <text class="item-title">排课模板</text>
+            <text class="item-desc">设置每周课程模板</text>
+          </view>
+        </view>
+        <view class="item-arrow">
+          <text class="arrow-text">›</text>
+        </view>
      </view>
    </view>
+
+    <!-- Section header: 会员与订单 -->
+    <view class="section-header">
+      <text class="section-title">会员与订单</text>
+    </view>
+
+    <!-- List: members & orders -->
+    <view class="list">
+      <view class="list-item" @tap="navigate('/pages/admin/members')">
+        <view class="item-left">
+          <view class="item-icon-wrap icon--members">
+            <text class="item-icon-text">◎</text>
+          </view>
+          <view class="item-text-group">
+            <text class="item-title">会员管理</text>
+            <text class="item-desc">查看所有会员信息</text>
+          </view>
+        </view>
+        <view class="item-arrow">
+          <text class="arrow-text">›</text>
+        </view>
+      </view>
+
+      <view class="list-item" @tap="navigate('/pages/admin/orders')">
+        <view class="item-left">
+          <view class="item-icon-wrap icon--orders">
+            <text class="item-icon-text">▣</text>
+          </view>
+          <view class="item-text-group">
+            <text class="item-title">订单管理</text>
+            <text class="item-desc">查看所有订单记录</text>
+          </view>
+        </view>
+        <view class="item-arrow">
+          <text class="arrow-text">›</text>
+        </view>
+      </view>
+
+      <view class="list-item" @tap="navigate('/pages/admin/card-types')">
+        <view class="item-left">
+          <view class="item-icon-wrap icon--card">
+            <text class="item-icon-text">▤</text>
+          </view>
+          <view class="item-text-group">
+            <text class="item-title">卡种管理</text>
+            <text class="item-desc">设置会员卡类型</text>
+          </view>
+        </view>
+        <view class="item-arrow">
+          <text class="arrow-text">›</text>
+        </view>
+      </view>
+    </view>
+
+    <!-- Section header: 系统 -->
+    <view class="section-header">
+      <text class="section-title">系统</text>
+    </view>
+
+    <!-- List: settings -->
+    <view class="list">
+      <view class="list-item" @tap="navigate('/pages/admin/studio')">
+        <view class="item-left">
+          <view class="item-icon-wrap icon--studio">
+            <text class="item-icon-text">◉</text>
+          </view>
+          <view class="item-text-group">
+            <text class="item-title">工作室设置</text>
+            <text class="item-desc">工作室信息与配置</text>
+          </view>
+        </view>
+        <view class="item-arrow">
+          <text class="arrow-text">›</text>
+        </view>
+      </view>
+    </view>
+
+    <view style="height: 40rpx" />
  </view>
 </template>

@@ -53,15 +159,6 @@ const adminStore = useAdminStore()
 const statsLoading = ref(false)
 const stats = ref<AdminStats>({ todayBookings: 0, totalOrders: 0, totalBookings: 0 })

-const navItems = [
-  { icon: '📅', label: '排课管理', path: '/pages/admin/schedule' },
-  { icon: '📋', label: '排课模板', path: '/pages/admin/week-template' },
-  { icon: '👥', label: '会员管理', path: '/pages/admin/members' },
-  { icon: '📋', label: '订单管理', path: '/pages/admin/orders' },
-  { icon: '💳', label: '卡种管理', path: '/pages/admin/card-types' },
-  { icon: '🏢', label: '工作室设置', path: '/pages/admin/studio' },
-]
-
 function navigate(path: string) {
  uni.navigateTo({ url: path })
 }
@@ -84,101 +181,168 @@ onMounted(() => {
 </script>

 <style lang="scss" scoped>
+/* ── Page ───────────────────────────────────── */
 .page {
  min-height: 100vh;
-  background: #1a1a2e;
-  padding-bottom: 60rpx;
+  padding-bottom: 40rpx;
 }

-/* ── Stats row ───────────────────────────── */
-.stats-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-around;
-  background: rgba(255, 255, 255, 0.06);
-  margin: 24rpx 24rpx 32rpx;
+/* ── Stats card ─────────────────────────────── */
+.stats-card-wrap {
+  padding: 24rpx 24rpx 8rpx;
+}
+
+.stats-card {
+  background: #FFFFFF;
  border-radius: 20rpx;
-  padding: 32rpx 16rpx;
-}
-
-.stats-shimmer-wrap {
+  padding: 32rpx 24rpx;
  display: flex;
-  width: 100%;
-  justify-content: space-around;
  align-items: center;
+  box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.10);
+  border: 1rpx solid rgba(180, 160, 130, 0.12);
 }

-.stats-shimmer {
-  width: 120rpx;
-  height: 60rpx;
+.stats-loading {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+}
+
+.stat-skeleton {
+  width: 100rpx;
+  height: 64rpx;
  border-radius: 12rpx;
-  background: linear-gradient(90deg, rgba(255,255,255,0.08) 25%, rgba(255,255,255,0.15) 50%, rgba(255,255,255,0.08) 75%);
+  background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
  background-size: 400% 100%;
-  animation: shimmer 1.4s infinite;
+  animation: shimmer 1.6s ease infinite;
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
-.stat-item {
+.stat-block {
+  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
-  flex: 1;
 }

-.stat-value {
+.stat-num {
  font-size: 44rpx;
-  font-weight: 800;
-  color: #c9a87c;
+  font-weight: 700;
+  color: #4A4035;
  line-height: 1;
+  font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
 }

-.stat-label {
+.stat-sub {
  font-size: 22rpx;
-  color: rgba(255, 255, 255, 0.5);
+  color: #A09080;
+  letter-spacing: 0.5rpx;
 }

-.stat-divider {
+.stat-sep {
  width: 1rpx;
-  height: 60rpx;
-  background: rgba(255, 255, 255, 0.12);
+  height: 56rpx;
+  background: rgba(180, 160, 130, 0.2);
 }

-/* ── Nav grid ────────────────────────────── */
-.nav-grid {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 20rpx;
-  padding: 0 24rpx;
+/* ── Section header ─────────────────────────── */
+.section-header {
+  padding: 32rpx 24rpx 12rpx;
 }

-.nav-item {
-  background: rgba(255, 255, 255, 0.06);
+.section-title {
+  font-size: 22rpx;
+  font-weight: 600;
+  color: #A09080;
+  letter-spacing: 2rpx;
+  text-transform: uppercase;
+}
+
+/* ── List ───────────────────────────────────── */
+.list {
+  background: #FFFFFF;
+  margin: 0 24rpx;
  border-radius: 20rpx;
-  padding: 40rpx 0;
+  overflow: hidden;
+  box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.08);
+  border: 1rpx solid rgba(180, 160, 130, 0.1);
+}
+
+.list-item {
  display: flex;
-  flex-direction: column;
  align-items: center;
-  gap: 16rpx;
-  border: 1rpx solid rgba(201, 168, 124, 0.15);
+  justify-content: space-between;
+  padding: 28rpx 24rpx;
+  border-bottom: 1rpx solid rgba(180, 160, 130, 0.1);
+  transition: background 0.15s ease;
+
+  &:last-child {
+    border-bottom: none;
+  }

  &:active {
-    opacity: 0.7;
+    background: rgba(180, 160, 130, 0.05);
  }
 }

-.nav-icon {
-  font-size: 56rpx;
+.item-left {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
 }

-.nav-label {
-  font-size: 28rpx;
+.item-icon-wrap {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 18rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.item-icon-text {
+  font-size: 32rpx;
+  color: #FFFFFF;
+  line-height: 1;
+}
+
+/* Icon variants — warm muted tones */
+.icon--schedule { background: linear-gradient(135deg, #8B9E7E, #7A8E6E); }
+.icon--template { background: linear-gradient(135deg, #A090C0, #9080B0); }
+.icon--members  { background: linear-gradient(135deg, $primary-color, $primary-dark); }
+.icon--orders   { background: linear-gradient(135deg, #7E9EC4, #6E8EB4); }
+.icon--card     { background: linear-gradient(135deg, #C48E7E, #B47E6E); }
+.icon--studio   { background: linear-gradient(135deg, #9E9E7E, #8E8E6E); }
+
+.item-text-group {
+  display: flex;
+  flex-direction: column;
+  gap: 4rpx;
+}
+
+.item-title {
+  font-size: 30rpx;
  font-weight: 600;
-  color: #ffffff;
-  letter-spacing: 1rpx;
+  color: #4A4035;
+  letter-spacing: 0.5rpx;
+}
+
+.item-desc {
+  font-size: 24rpx;
+  color: #A09080;
+}
+
+.item-arrow {
+  flex-shrink: 0;
+  padding-left: 16rpx;
+}
+
+.arrow-text {
+  font-size: 40rpx;
+  color: rgba(180, 160, 130, 0.5);
+  font-weight: 300;
+  line-height: 1;
 }
 </style>
--- a/packages/app/src/pages/admin/members.vue
+++ b/packages/app/src/pages/admin/members.vue
@@ -273,11 +273,6 @@ onMounted(() => loadMembers(true))
  animation: shimmer 1.4s infinite;
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* ── Empty ───────────────────────────────── */
 .empty-state {
  display: flex;
--- a/packages/app/src/pages/admin/orders.vue
+++ b/packages/app/src/pages/admin/orders.vue
@@ -293,7 +293,7 @@ onMounted(() => {
 }

 .stat-num.paid { color: #7A9E7E; }
-.stat-num.pending { color: #C4956A; }
+.stat-num.pending { color: $warning-color; }

 .stat-label {
  font-size: 22rpx;
@@ -359,7 +359,7 @@ onMounted(() => {
  width: 6rpx;
  height: 6rpx;
  border-radius: 50%;
-  background: #B08050;
+  background: $accent-color;
 }

 /* ── List ───────────────────────────────────── */
@@ -384,11 +384,6 @@ onMounted(() => {
  animation: shimmer 1.6s ease infinite;
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* ── Empty ──────────────────────────────────── */
 .empty-state {
  display: flex;
@@ -527,7 +522,7 @@ onMounted(() => {
 .info-value.price {
  font-size: 30rpx;
  font-weight: 700;
-  color: #B08050;
+  color: $accent-color;
  font-family: 'DIN Alternate', 'Helvetica Neue', Arial, sans-serif;
 }

@@ -556,7 +551,7 @@ onMounted(() => {

 .load-more-text {
  font-size: 26rpx;
-  color: #B08050;
+  color: $accent-color;
  font-weight: 500;
 }

--- a/packages/app/src/pages/admin/schedule.vue
+++ b/packages/app/src/pages/admin/schedule.vue
@@ -445,11 +445,6 @@ onMounted(() => {
  animation: shimmer 1.4s infinite;
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* ── Empty state ─────────────────────────── */
 .empty-state {
  display: flex;
@@ -485,7 +480,7 @@ onMounted(() => {

  &--template {
    border-style: dashed;
-    border-color: #c9a87c;
+    border-color: $primary-dark;
    background: rgba(201, 168, 124, 0.04);
  }

@@ -624,7 +619,7 @@ onMounted(() => {
 .add-wrap {
  margin: 24rpx;
  padding: 24rpx;
-  border: 2rpx dashed #c9a87c;
+  border: 2rpx dashed $primary-dark;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
@@ -636,7 +631,7 @@ onMounted(() => {
 .add-text {
  font-size: 28rpx;
  font-weight: 600;
-  color: #c9a87c;
+  color: $primary-dark;
 }

 /* ── Action bar ──────────────────────────── */
@@ -667,7 +662,7 @@ onMounted(() => {
 .publish-btn-text {
  font-size: 30rpx;
  font-weight: 700;
-  color: #c9a87c;
+  color: $primary-dark;
 }

 /* ── Modal ───────────────────────────────── */
@@ -758,5 +753,5 @@ onMounted(() => {
  justify-content: center;
 }

-.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: #c9a87c; }
+.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
 </style>
--- a/packages/app/src/pages/admin/slot-adjust.vue
+++ b/packages/app/src/pages/admin/slot-adjust.vue
@@ -286,7 +286,7 @@ onMounted(() => {
 }

 .tab--active {
-  border-bottom: 4rpx solid #c9a87c;
+  border-bottom: 4rpx solid $primary-dark;
 }

 /* ── Panel ───────────────────────────────── */
@@ -343,11 +343,6 @@ onMounted(() => {
  animation: shimmer 1.4s infinite;
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* ── Empty ───────────────────────────────── */
 .empty-state {
  display: flex;
@@ -431,5 +426,5 @@ onMounted(() => {
  &--loading { opacity: 0.6; }
 }

-.action-btn-text { font-size: 30rpx; font-weight: 700; color: #c9a87c; }
+.action-btn-text { font-size: 30rpx; font-weight: 700; color: $primary-dark; }
 </style>
--- a/packages/app/src/pages/admin/studio.vue
+++ b/packages/app/src/pages/admin/studio.vue
@@ -268,11 +268,6 @@ onMounted(fetchStudioInfo)
  animation: shimmer 1.4s infinite;
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* ── Banner preview ──────────────────────── */
 .banner-preview {
  height: 260rpx;
@@ -303,7 +298,7 @@ onMounted(fetchStudioInfo)
 .banner-logo-placeholder {
  width: 100%;
  height: 100%;
-  background: #c9a87c;
+  background: $primary-dark;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -398,7 +393,7 @@ onMounted(fetchStudioInfo)
 .save-btn-text {
  font-size: 32rpx;
  font-weight: 700;
-  color: #c9a87c;
+  color: $primary-dark;
  letter-spacing: 2rpx;
 }
 </style>
--- a/packages/app/src/pages/admin/week-template.vue
+++ b/packages/app/src/pages/admin/week-template.vue
@@ -351,7 +351,7 @@ onMounted(() => {
  padding: 12rpx 28rpx;
 }

-.add-btn-text { font-size: 26rpx; font-weight: 600; color: #c9a87c; }
+.add-btn-text { font-size: 26rpx; font-weight: 600; color: $primary-dark; }

 /* ── Skeleton ────────────────────────────── */
 .skeleton-list { padding: 0 24rpx; }
@@ -365,11 +365,6 @@ onMounted(() => {
  animation: shimmer 1.4s infinite;
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* ── Empty ───────────────────────────────── */
 .empty-state {
  display: flex;
@@ -456,7 +451,7 @@ onMounted(() => {
  &--loading { opacity: 0.6; }
 }

-.save-btn-text { font-size: 30rpx; font-weight: 700; color: #c9a87c; }
+.save-btn-text { font-size: 30rpx; font-weight: 700; color: $primary-dark; }

 /* ── Modal ───────────────────────────────── */
 .modal-mask {
@@ -529,5 +524,5 @@ onMounted(() => {
  justify-content: center;
 }

-.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: #c9a87c; }
+.modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
 </style>
--- a/packages/app/src/pages/booking/index.vue
+++ b/packages/app/src/pages/booking/index.vue
@@ -281,7 +281,7 @@ onMounted(async () => {
 <style lang="scss" scoped>
 .booking-page {
  height: 100vh;
-  background: #f7f4f0;
+  background: $primary-bg;
  display: flex;
  flex-direction: column;
  overflow: hidden;
@@ -366,7 +366,7 @@ onMounted(async () => {
  width: 80rpx;
  height: 72rpx;
  border-radius: 12rpx;
-  background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
+  background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
  flex-shrink: 0;
@@ -383,7 +383,7 @@ onMounted(async () => {
  width: 60%;
  height: 28rpx;
  border-radius: 8rpx;
-  background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
+  background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
 }
@@ -392,7 +392,7 @@ onMounted(async () => {
  width: 40%;
  height: 20rpx;
  border-radius: 6rpx;
-  background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
+  background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
 }
@@ -401,17 +401,12 @@ onMounted(async () => {
  width: 140rpx;
  height: 72rpx;
  border-radius: 36rpx;
-  background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
+  background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
  flex-shrink: 0;
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* ── Empty state ───────────────────────────────────── */
 .empty-wrap {
  display: flex;
@@ -426,7 +421,7 @@ onMounted(async () => {
  width: 140rpx;
  height: 140rpx;
  border-radius: 50%;
-  background: #f0ece8;
+  background: $primary-border;
  display: flex;
  align-items: center;
  justify-content: center;
--- a/packages/app/src/pages/card/detail.vue
+++ b/packages/app/src/pages/card/detail.vue
@@ -328,11 +328,6 @@ onMounted(() => {
  &.w40 { width: 40%; }
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* ── Error ───────────────────────────────────────────── */
 .error-wrap {
  display: flex;
@@ -355,7 +350,7 @@ onMounted(() => {
 .retry-btn {
  padding: 20rpx 48rpx;
  border-radius: 40rpx;
-  background: #c9a87c;
+  background: $primary-dark;
 }

 .retry-text {
@@ -382,7 +377,7 @@ onMounted(() => {
  }

  &.hero--trial {
-    background: linear-gradient(135deg, #7d6608 0%, #c9a87c 100%);
+    background: linear-gradient(135deg, #5a7a8a 0%, $primary-dark 100%);
  }
 }

@@ -481,7 +476,7 @@ onMounted(() => {
  width: 6rpx;
  height: 28rpx;
  border-radius: 3rpx;
-  background: #c9a87c;
+  background: $primary-dark;
  flex-shrink: 0;
 }

@@ -565,7 +560,7 @@ onMounted(() => {

 .feature-dot {
  font-size: 26rpx;
-  color: #c9a87c;
+  color: $primary-dark;
  line-height: 1.65;
  flex-shrink: 0;
 }
@@ -606,7 +601,7 @@ onMounted(() => {
 .summary-price {
  font-size: 40rpx;
  font-weight: 800;
-  color: #c9a87c;
+  color: $primary-dark;
 }

 .buy-btn {
@@ -631,7 +626,7 @@ onMounted(() => {
 .buy-btn-text {
  font-size: 32rpx;
  font-weight: 700;
-  color: #c9a87c;
+  color: $primary-dark;
  letter-spacing: 2rpx;
 }
 </style>
--- a/packages/app/src/pages/home/index.vue
+++ b/packages/app/src/pages/home/index.vue
@@ -135,7 +135,7 @@ function scrollToCardShop() {
 <style lang="scss" scoped>
 .home-page {
  min-height: 100vh;
-  background: #f5f5f5;
+  background: #FAF8F5;
  padding-top: var(--nav-bar-height);
 }

@@ -145,7 +145,7 @@ function scrollToCardShop() {

 .section-divider {
  height: 16rpx;
-  background: #f5f5f5;
+  background: #FAF8F5;
 }

 .bottom-padding {
--- a/packages/app/src/pages/profile/bookings.vue
+++ b/packages/app/src/pages/profile/bookings.vue
@@ -367,7 +367,7 @@ onMounted(() => {

  &.active {
    .tab-label {
-      color: #c9a87c;
+      color: $primary-dark;
      font-weight: 600;
    }

@@ -379,7 +379,7 @@ onMounted(() => {
      transform: translateX(-50%);
      width: 48rpx;
      height: 4rpx;
-      background: #c9a87c;
+      background: $primary-dark;
      border-radius: 2rpx;
    }
  }
@@ -456,11 +456,6 @@ onMounted(() => {
  &--medium { width: 55%; }
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* ── Empty ───────────────────────────────────────────── */
 .empty-wrap {
  display: flex;
@@ -501,7 +496,7 @@ onMounted(() => {
  margin-top: 24rpx;
  padding: 22rpx 64rpx;
  border-radius: 44rpx;
-  background: linear-gradient(135deg, #d4b896, #c9a87c);
+  background: linear-gradient(135deg, $primary-color, $primary-dark);
  box-shadow: 0 4rpx 16rpx rgba(201, 168, 124, 0.3);

  &:active {
@@ -540,7 +535,7 @@ onMounted(() => {
  width: 8rpx;
  flex-shrink: 0;

-  &.stripe--confirmed { background: #c9a87c; }
+  &.stripe--confirmed { background: $primary-dark; }
  &.stripe--completed { background: #66bb6a; }
  &.stripe--cancelled { background: #e0e0e0; }
  &.stripe--noshow    { background: #ef5350; }
@@ -595,7 +590,7 @@ onMounted(() => {
  font-size: 22rpx;
  font-weight: 600;

-  .badge--confirmed & { color: #c9a87c; }
+  .badge--confirmed & { color: $primary-dark; }
  .badge--completed & { color: #66bb6a; }
  .badge--cancelled & { color: #bbb; }
  .badge--noshow    & { color: #ef5350; }
--- a/packages/app/src/pages/profile/info.vue
+++ b/packages/app/src/pages/profile/info.vue
@@ -272,7 +272,7 @@ onMounted(async () => {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
-  background: linear-gradient(135deg, #c9a87c, #e8c88a);
+  background: linear-gradient(135deg, $primary-dark, $primary-color);
  display: flex;
  align-items: center;
  justify-content: center;
@@ -369,7 +369,7 @@ onMounted(async () => {

 .bind-phone-text {
  font-size: 26rpx;
-  color: #c9a87c;
+  color: $primary-dark;
  font-weight: 600;
  text-decoration: underline;
 }
@@ -437,7 +437,7 @@ onMounted(async () => {
 .save-btn-text {
  font-size: 32rpx;
  font-weight: 700;
-  color: #c9a87c;
+  color: $primary-dark;
  letter-spacing: 2rpx;
 }
 </style>
--- a/packages/app/src/pages/profile/membership.vue
+++ b/packages/app/src/pages/profile/membership.vue
@@ -272,11 +272,6 @@ onMounted(() => {
  animation: shimmer 1.4s infinite;
 }

-@keyframes shimmer {
-  0% { background-position: 100% 0; }
-  100% { background-position: -100% 0; }
-}
-
 /* ── Empty ───────────────────────────────────────────── */
 .empty-wrap {
  display: flex;
@@ -306,7 +301,7 @@ onMounted(() => {
  margin-top: 12rpx;
  padding: 22rpx 60rpx;
  border-radius: 44rpx;
-  background: #c9a87c;
+  background: $primary-dark;
  box-shadow: 0 4rpx 16rpx rgba(201, 168, 124, 0.35);
 }

@@ -377,7 +372,7 @@ onMounted(() => {

  &--times    { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
  &--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
-  &--trial    { background: linear-gradient(90deg, #7d6608, #c9a87c); }
+  &--trial    { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
  &--inactive { background: #ccc; }
 }

@@ -391,7 +386,7 @@ onMounted(() => {

  &--times    { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
  &--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
-  &--trial    { background: linear-gradient(90deg, #7d6608, #c9a87c); }
+  &--trial    { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
  &--inactive { background: #888; }
 }

@@ -469,13 +464,13 @@ onMounted(() => {
 .highlight-number {
  font-size: 44rpx;
  font-weight: 800;
-  color: #c9a87c;
+  color: $primary-dark;
  line-height: 1;
 }

 .highlight-unit {
  font-size: 22rpx;
-  color: #c9a87c;
+  color: $primary-dark;
  font-weight: 500;
 }

@@ -514,7 +509,7 @@ onMounted(() => {

 .progress-fill {
  height: 100%;
-  background: linear-gradient(90deg, #c9a87c, #e8c88a);
+  background: linear-gradient(90deg, $primary-dark, $primary-color);
  border-radius: 4rpx;
  transition: width 0.4s ease;
 }
@@ -547,7 +542,7 @@ onMounted(() => {

 .fab-icon {
  font-size: 36rpx;
-  color: #c9a87c;
+  color: $primary-dark;
  font-weight: 300;
  line-height: 1;
 }
@@ -555,7 +550,7 @@ onMounted(() => {
 .fab-text {
  font-size: 28rpx;
  font-weight: 700;
-  color: #c9a87c;
+  color: $primary-dark;
  letter-spacing: 1rpx;
 }

--- a/packages/app/src/uni.scss
+++ b/packages/app/src/uni.scss
@@ -1,16 +1,26 @@
 /* uni.scss - 全局样式变量 */
-$brand-color: #1a1a2e;
-$brand-light: #e2d1c3;
-$accent-color: #c9a87c;
-$text-primary: #333333;
-$text-secondary: #666666;
-$text-hint: #999999;
-$bg-page: #f5f5f5;
+
+/* ── 主题色系 ───────────────────────────────────────────── */
+$primary-color: #a9bfcc;
+$primary-dark: #7ba5be;
+$primary-light: #c8d8e4;
+$primary-bg: #f0f6f9;
+$primary-border: #d8eaf4;
+$primary-selected-bg: #EFF6F9;
+
+/* ── 通用 ─────────────────────────────────────────────── */
+$brand-color: #4A4035;
+$brand-light: #c8d8e4;
+$accent-color: #7ba5be;
+$text-primary: #4A4035;
+$text-secondary: #7A6A5A;
+$text-hint: #A09080;
+$bg-page: #FAF8F5;
 $bg-card: #ffffff;
-$border-color: #eeeeee;
-$success-color: #52c41a;
-$warning-color: #faad14;
-$error-color: #ff4d4f;
+$border-color: rgba(180, 160, 130, 0.2);
+$success-color: #7A9E7E;
+$warning-color: #e8a87c;
+$error-color: #C47A7A;
 $radius-sm: 8rpx;
 $radius-md: 16rpx;
 $radius-lg: 24rpx;
@@ -19,3 +29,9 @@ $spacing-sm: 16rpx;
 $spacing-md: 24rpx;
 $spacing-lg: 32rpx;
 $spacing-xl: 48rpx;
+
+/* ── Shimmer animation ──────────────────────────────────── */
+@keyframes shimmer {
+  0% { background-position: 100% 0; }
+  100% { background-position: -100% 0; }
+}