pingxiangcard/docs/superpowers/plans/2026-06-26-ui-ux-standardization.md

# UI/UX 标准化实施计划

> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking.

**Goal:** 统一所有页面的设计 token、类型定义和 mock 数据管理，为后端 API 对接做好准备。

**Architecture:** 分三步执行。第1步建立基础设施（token 统一 + 类型 + mock 层），不改任何页面视觉。第2步迁移核心链路（首页→年卡→购买→订单）。第3步迁移剩余页面和组件。

**Tech Stack:** uni-app 3.0 + Vue 3 + TypeScript + Pinia + SCSS

## Global Constraints

- 颜色体系统一使用 `uni.scss` 的 `$uv-*` 变量（`$uv-primary: #3c9cff`）
- 字体族：标题 `$font-family-display`（思源宋体），正文 `$font-family-body`（系统字体）
- 禁止在页面 `<style>` 中定义局部 `$font`、`$primary`、`$text-main` 等变量
- 禁止 `font-weight: bold` 关键字，必须用 `$font-weight-bold`
- 禁止硬编码颜色值（如 `#333`），必须用全局变量
- 禁止硬编码间距值（如 `padding: 20rpx`），必须用 `$spacing-*`
- 禁止在页面中硬编码业务数据，必须从 `mock/` 或 `api/` import
- 验证方式：`pnpm run dev:mp-weixin` 构建通过 + `pnpm run type-check` 通过

## File Structure

### 新建文件
```
src/mock/index.ts            — USE_MOCK 开关
src/mock/images.ts           — 占位图片 URL 常量
src/mock/scenic.ts           — 景区 mock（42 条）
src/mock/scenic-detail.ts    — 景区详情 mock（8 条）
src/mock/order.ts            — 订单 mock（6 条）
src/mock/reserve.ts          — 预约记录 mock（6 条）
src/mock/notice.ts           — 公告 mock（5 条）
src/mock/store.ts            — Mock 内存状态管理
src/api/scenic.ts            — 景区 API 函数
src/api/order.ts             — 订单 API 函数
src/api/reserve.ts           — 预约 API 函数
```

### 修改文件
```
src/uni.scss                 — 新增缺失变量
src/styles/_tokens.scss      — 对齐 uni.scss 值
src/api/types.ts             — 补全业务类型
src/App.vue                  — 全局样式
.env.local / .env.dev / .env.uat — 新增 VITE_USE_MOCK
9 个页面                      — 删除局部 SCSS 变量
~25 个页面/组件               — 迁移硬编码值
```

---

# Phase 1: 基础设施（不改页面视觉）

---

### Task 1: 更新 uni.scss — 补齐缺失变量

**Files:**
- Modify: `src/uni.scss:71-83`（字号区域）
- Modify: `src/uni.scss:51`（`$uv-tips-color` 后插入 `$uv-placeholder-color`）
- Modify: `src/uni.scss:65-67`（渐变后插入语义色）

**Interfaces:**
- Produces: `$font-size-xxs`, `$font-size-4xl`, `$uv-placeholder-color`, `$color-price`, `$color-price-highlight`, `$color-status-pending`, `$color-status-success`, `$color-status-cancel`

- [ ] **Step 1: 新增 `$font-size-xxs` 和 `$font-size-4xl`**

在 `src/uni.scss` 的字号区域（第 75 行 `$font-size-xs` 之前），插入：

```scss
$font-size-xxs: 18rpx;
```

在 `$font-size-3xl: 56rpx;`（第 82 行）之后、`$font-size-display: 72rpx;` 之前，插入：

```scss
$font-size-4xl: 64rpx;
```

- [ ] **Step 2: 新增 `$uv-placeholder-color`**

在 `$uv-tips-color: #666666;`（第 51 行）之后插入：

```scss
$uv-placeholder-color: #999999;
```

- [ ] **Step 3: 新增语义色变量**

在 `$gradient-accent` 定义（第 67 行）之后插入：

```scss
// Semantic colors (价格/状态)
$color-price: $uv-error;
$color-price-highlight: #FFD600;
$color-status-pending: #ff9500;
$color-status-success: #00b42a;
$color-status-cancel: #86909c;
```

- [ ] **Step 4: 修改 `$font-family-body`**

将第 72 行：
```scss
$font-family-body: 'SourceHanSerifCN', '思源宋体', -apple-system, 'PingFang SC', sans-serif;
```
改为：
```scss
$font-family-body: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
```

- [ ] **Step 5: 验证编译**

Run: `pnpm run dev:mp-weixin`
Expected: 构建成功，无 SCSS 编译错误

- [ ] **Step 6: Commit**

```bash
git add src/uni.scss
git commit -m "feat(tokens): add missing variables to uni.scss

- \$font-size-xxs (18rpx), \$font-size-4xl (64rpx)
- \$uv-placeholder-color (#999999)
- Semantic colors: \$color-price, \$color-status-*
- Change \$font-family-body to system fonts"
```

---

### Task 2: 对齐 _tokens.scss 与 uni.scss

**Files:**
- Modify: `src/styles/_tokens.scss`（全文替换变量值）

**Interfaces:**
- Consumes: Task 1 产生的所有 uni.scss 变量
- Produces: 与 uni.scss 值一致的 `_tokens.scss`

- [ ] **Step 1: 替换 _tokens.scss 全文**

将 `src/styles/_tokens.scss` 全文替换为以下内容（所有颜色值对齐 uni.scss，字体对齐思源宋体系）：

```scss
// ============================================
// Design Tokens — Aligned with uni.scss
// ============================================
// ⚠️ 所有值必须与 src/uni.scss 保持一致
// uni.scss 是 source of truth，此文件仅为 main.scss 的兼容层

// === COLORS ===

// Brand accent
$color-accent: #3c9cff;
$color-accent-secondary: #398ade;
$color-accent-foreground: #FFFFFF;

// Semantic
$color-success: #5ac725;
$color-warning: #f9ae3d;
$color-error: #e53935;

// Neutrals
$color-background: #f3f4f6;
$color-foreground: #111111;
$color-muted: #f4f4f5;
$color-muted-foreground: #333333;
$color-border: #eeeeee;
$color-card: #FFFFFF;
$color-ring: #3c9cff;

// Semantic (价格/状态)
$color-price: #e53935;
$color-price-highlight: #FFD600;
$color-status-pending: #ff9500;
$color-status-success: #00b42a;
$color-status-cancel: #86909c;

// Gradients
$gradient-accent: linear-gradient(135deg, #{$color-accent}, #{$color-accent-secondary});

// === TYPOGRAPHY ===

$font-family-display: 'SourceHanSerifCN', '思源宋体', serif;
$font-family-body: -apple-system, 'PingFang SC', 'Helvetica Neue', sans-serif;
$font-family-mono: 'Menlo', 'Monaco', 'Courier New', monospace;

$font-size-xxs: 18rpx;
$font-size-xs: 20rpx;
$font-size-sm: 24rpx;
$font-size-base: 28rpx;
$font-size-lg: 32rpx;
$font-size-xl: 36rpx;
$font-size-title: 38rpx;
$font-size-2xl: 44rpx;
$font-size-3xl: 56rpx;
$font-size-4xl: 64rpx;
$font-size-display: 72rpx;

$font-weight-normal: 400;
$font-weight-medium: 500;
$font-weight-bold: 700;

$line-height-tight: 1.2;
$line-height-normal: 1.5;
$line-height-relaxed: 1.75;

// === SPACING (rpx) ===

$spacing-0: 0;
$spacing-1: 8rpx;
$spacing-2: 16rpx;
$spacing-3: 24rpx;
$spacing-4: 32rpx;
$spacing-5: 40rpx;
$spacing-6: 48rpx;
$spacing-8: 64rpx;
$spacing-10: 80rpx;
$spacing-12: 96rpx;
$spacing-16: 128rpx;
$spacing-20: 160rpx;

// === BORDER RADIUS ===

$radius-sm: 8rpx;
$radius-base: 16rpx;
$radius-lg: 24rpx;
$radius-xl: 32rpx;
$radius-2xl: 48rpx;
$radius-full: 9999rpx;

// === SHADOWS ===

$shadow-sm: 0 2rpx 8rpx rgba(15, 23, 42, 0.04);
$shadow-base: 0 4rpx 16rpx rgba(15, 23, 42, 0.08);
$shadow-lg: 0 8rpx 32rpx rgba(15, 23, 42, 0.12);
$shadow-xl: 0 16rpx 48rpx rgba(15, 23, 42, 0.16);
$shadow-accent: 0 8rpx 24rpx rgba(60, 156, 255, 0.25);

// === TRANSITIONS ===

$transition-fast: 150ms ease;
$transition-base: 250ms ease;
$transition-slow: 400ms ease;

// === Z-INDEX ===

$z-base: 0;
$z-dropdown: 100;
$z-sticky: 200;
$z-modal: 300;
$z-toast: 400;

// === BORDER ===

$border-width: 1rpx;

// ============================================
// Legacy $uni-* compatibility (for uni-ui)
// ============================================

$uni-color-primary: $color-accent;
$uni-color-success: $color-success;
$uni-color-warning: $color-warning;
$uni-color-error: $color-error;
$uni-text-color: $color-foreground;
$uni-text-color-inverse: #FFFFFF;
$uni-text-color-grey: $color-muted-foreground;
$uni-text-color-placeholder: #999999;
$uni-text-color-disable: #c8c9cc;
$uni-bg-color: $color-background;
$uni-bg-color-grey: $color-muted;
$uni-bg-color-hover: #f1f1f1;
$uni-bg-color-mask: rgba(0, 0, 0, 0.4);
$uni-border-color: $color-border;
$uni-font-size-sm: $font-size-sm;
$uni-font-size-base: $font-size-base;
$uni-font-size-lg: $font-size-lg;
$uni-font-size-title: 40rpx;
$uni-font-size-subtitle: $font-size-xl;
$uni-font-size-paragraph: $font-size-base;
$uni-img-size-sm: 40rpx;
$uni-img-size-base: 52rpx;
$uni-img-size-lg: 80rpx;
$uni-border-radius-sm: $radius-sm;
$uni-border-radius-base: $radius-base;
$uni-border-radius-lg: $radius-lg;
$uni-border-radius-circle: 50%;
$uni-spacing-row-sm: 10rpx;
$uni-spacing-row-base: 20rpx;
$uni-spacing-row-lg: 30rpx;
$uni-spacing-col-sm: 8rpx;
$uni-spacing-col-base: 16rpx;
$uni-spacing-col-lg: 24rpx;
$uni-opacity-disabled: 0.3;
$uni-color-title: $color-foreground;
$uni-color-subtitle: $color-muted-foreground;
$uni-color-paragraph: $color-muted-foreground;
```

- [ ] **Step 2: 验证编译**

Run: `pnpm run dev:mp-weixin`
Expected: 构建成功，`main.scss` 中的 `$color-background`、`$color-foreground`、`$font-family-body` 使用新值

- [ ] **Step 3: Commit**

```bash
git add src/styles/_tokens.scss
git commit -m "refactor(tokens): align _tokens.scss with uni.scss values

All color, typography, and spacing values now match uni.scss.
Added semantic colors and \$font-size-xxs/\$font-size-4xl."
```

---

### Task 3: 扩展 types.ts 业务类型

**Files:**
- Modify: `src/api/types.ts`

**Interfaces:**
- Produces: `ScenicSession`, `ReserveRecord`, `Notice`, `QuickAction`, `Announcement`, `PageResult<T>`, `PageQuery`, `OrderDetail`, `FaqItem`

- [ ] **Step 1: 在 types.ts 末尾追加新类型**

在 `src/api/types.ts` 文件末尾（`MockPayResult` 接口之后）追加：

```typescript
/** 景区场次 */
export interface ScenicSession {
  id: number
  scenicId: number
  date: string
  startTime: string
  endTime: string
  stock: number
  remainStock: number
}

/** 预约记录 */
export interface ReserveRecord {
  id: number
  scenicId: number
  scenicName: string
  date: string
  session: string
  status: 'pending' | 'confirmed' | 'cancelled' | 'used'
  userName?: string
  maskedId?: string
  cardType?: string
  cardNo?: string
  applyTime?: string
  cancelTime?: string
  verifyTime?: string
  verifyPhoto?: string
}

/** 公告 */
export interface Notice {
  id: number
  title: string
  content: string
  body?: string
  publishTime: string
  isTop: boolean
}

/** 首页快捷入口 */
export interface QuickAction {
  id: number
  icon: string
  label: string
  path: string
}

/** 首页弹窗公告 */
export interface Announcement {
  id: number
  type?: string
  typeLabel?: string
  title: string
  date?: string
  content: string
  body?: string
}

/** 订单详情 */
export interface OrderDetail extends OrderInfo {
  orderNo?: string
  payTime?: string
  payChannel?: string
  redeemCode?: string
  activatedTime?: string
  refundedTime?: string
  originalPrice?: number
  cardType?: string
}

/** FAQ 条目 */
export interface FaqItem {
  q: string
  a: Array<{ text: string; highlight?: boolean; copy?: string }>
}

/** 分页结果 */
export interface PageResult<T> {
  list: T[]
  total: number
  page: number
  pageSize: number
}

/** 分页请求参数 */
export interface PageQuery {
  page: number
  pageSize: number
}
```

- [ ] **Step 2: 验证类型检查**

Run: `pnpm run type-check`
Expected: 无类型错误

- [ ] **Step 3: Commit**

```bash
git add src/api/types.ts
git commit -m "feat(types): add ScenicSession, ReserveRecord, Notice, FaqItem, PageResult types"
```

---

### Task 4: 创建 Mock 基础设施

**Files:**
- Create: `src/mock/index.ts`
- Create: `src/mock/images.ts`
- Create: `src/mock/store.ts`
- Modify: `.env.local`, `.env.dev`, `.env.uat`

**Interfaces:**
- Produces: `USE_MOCK` 常量、占位图片常量、`orderStore`/`reserveStore` 响应式数据

- [ ] **Step 1: 添加环境变量**

在 `.env.local`、`.env.dev`、`.env.uat` 末尾各追加一行：

```
VITE_USE_MOCK=true
```

- [ ] **Step 2: 创建 `src/mock/index.ts`**

```typescript
/** Mock 数据开关 — 由 .env 文件的 VITE_USE_MOCK 控制 */
export const USE_MOCK = import.meta.env.VITE_USE_MOCK === 'true'
```

- [ ] **Step 3: 创建 `src/mock/images.ts`**

从现有页面中收集所有 Unsplash URL，集中管理。实现时从 `src/pages/index/index.vue`、`src/pages/scenic-list/` 等文件提取所有图片 URL，按用途命名：

```typescript
// 景区封面占位图
export const IMG_SCENIC_1 = 'https://images.unsplash.com/...'  // 从 index.vue hotSpots 提取
export const IMG_SCENIC_2 = 'https://images.unsplash.com/...'
// ... 每个现有 Unsplash URL 对应一个常量

// 头像占位图
export const IMG_AVATAR_DEFAULT = 'https://...'

// 年卡 Banner
export const IMG_CARD_BANNER = 'https://...'

// 通用占位
export const IMG_PLACEHOLDER = 'https://...'
```

> 实现时从各页面 `<script>` 中提取实际的 Unsplash URL，不要发明新 URL。

- [ ] **Step 4: 创建 `src/mock/store.ts`**

```typescript
import { ref } from 'vue'
import type { OrderInfo, ReserveRecord } from '@/api/types'
import { mockOrders } from './order'
import { mockReserves } from './reserve'

export const orderStore = ref<OrderInfo[]>([...mockOrders])
export const reserveStore = ref<ReserveRecord[]>([...mockReserves])

export function updateOrderStatus(orderId: string, status: OrderInfo['status']) {
  const order = orderStore.value.find(o => o.id === orderId)
  if (order) order.status = status
}

export function addReserve(record: Omit<ReserveRecord, 'id'>) {
  const id = Math.max(...reserveStore.value.map(r => r.id), 0) + 1
  reserveStore.value.push({ ...record, id })
}
```

- [ ] **Step 5: 验证**

Run: `pnpm run type-check`
Expected: mock 文件无类型错误

- [ ] **Step 6: Commit**

```bash
git add src/mock/ .env.local .env.dev .env.uat
git commit -m "feat(mock): create mock infrastructure with USE_MOCK switch"
```

---

### Task 5: 迁移 Mock 数据到 mock/ 目录

**Files:**
- Create: `src/mock/scenic.ts` — 从 `scenic-list.vue` 提取 42 条景区数据
- Create: `src/mock/scenic-detail.ts` — 从 `scenic-detail.vue` 提取 8 条详情
- Create: `src/mock/order.ts` — 从 `order-list.vue` 提取 6 条订单
- Create: `src/mock/reserve.ts` — 从 `reserve-list.vue` 提取 6 条预约
- Create: `src/mock/notice.ts` — 从 `notice-list.vue` 提取 5 条公告

**Interfaces:**
- Consumes: Task 3 的 `Scenic`, `OrderInfo`, `ReserveRecord`, `Notice` 类型
- Produces: `mockScenicList`, `mockScenicDetails`, `mockOrders`, `mockReserves`, `mockNotices`

- [ ] **Step 1: 创建 `src/mock/scenic.ts`**

从 `src/pages/scenic-list/scenic-list.vue` 第 247-337 行提取 `scenicList` 数组和筛选选项（`regionOptions`、`levelOptions`、`cardTypeOptions`），转换为符合 `ScenicSpot` 类型。

> **类型对齐注意**：现有 `ScenicSpot` 的 `id` 是 `string` 类型。如果 scenic-list.vue 中使用数字 id，在 mock 中转为 `String(id)`。保持 `ScenicSpot` 接口不变，后续对接 API 时再统一调整。

```typescript
import type { ScenicSpot } from '@/api/types'
import { IMG_SCENIC_1 /* ... */ } from './images'

export const mockScenicList: ScenicSpot[] = [
  // 从 scenic-list.vue 提取的 42 条数据
  // 保持原始字段值，image 字段使用 images.ts 常量
]

export const regionOptions = [
  // 从 scenic-list.vue 提取
]

export const levelOptions = [
  // 从 scenic-list.vue 提取
]
```

> 实现时逐条复制 scenic-list.vue 中的数据，确保 42 条完整。

- [ ] **Step 2: 创建 `src/mock/scenic-detail.ts`**

从 `src/pages/scenic-detail/scenic-detail.vue` 第 172-181 行提取 `scenicData` 数组（8 条详情）。

- [ ] **Step 3: 创建 `src/mock/order.ts`**

从 `src/pages/order/order-list.vue` 第 151-158 行提取 `orders` 数组（6 条订单）。

```typescript
import type { OrderDetail } from '@/api/types'

export const mockOrders: OrderDetail[] = [
  // 从 order-list.vue 提取的 6 条数据
]
```

- [ ] **Step 4: 创建 `src/mock/reserve.ts`**

从 `src/pages/reserve/reserve-list.vue` 第 228-235 行提取 `records` 数组（6 条预约记录）。

- [ ] **Step 5: 创建 `src/mock/notice.ts`**

从 `src/pages/notice-list/notice-list.vue` 第 47-53 行提取 `notices` 数组（5 条公告）。

- [ ] **Step 6: 验证类型检查**

Run: `pnpm run type-check`
Expected: 所有 mock 文件类型正确

- [ ] **Step 7: Commit**

```bash
git add src/mock/
git commit -m "feat(mock): extract all hardcoded data into mock/ modules

- scenic: 42 items from scenic-list.vue
- scenic-detail: 8 items from scenic-detail.vue
- order: 6 items from order-list.vue
- reserve: 6 items from reserve-list.vue
- notice: 5 items from notice-list.vue"
```

---

### Task 6: 创建 API 函数层

**Files:**
- Create: `src/api/scenic.ts`
- Create: `src/api/order.ts`
- Create: `src/api/reserve.ts`

**Interfaces:**
- Consumes: Task 4 的 `USE_MOCK`、Task 5 的 mock 数据、Task 3 的类型
- Produces: `getScenicList()`, `getScenicDetail()`, `getOrderList()`, `getOrderDetail()`, `getReserveList()` 等函数

- [ ] **Step 1: 创建 `src/api/scenic.ts`**

```typescript
import { USE_MOCK } from '@/mock'
import { mockScenicList } from '@/mock/scenic'
import { mockScenicDetails } from '@/mock/scenic-detail'
import type { ScenicSpot } from './types'
import { get } from './request'

/** 获取景区列表 */
export function getScenicList(): Promise<ScenicSpot[]> {
  if (USE_MOCK) return Promise.resolve(mockScenicList)
  return get<ScenicSpot[]>('/mp-api/scenic/list')
}

/** 获取景区详情 */
export function getScenicDetail(id: string): Promise<ScenicSpot | undefined> {
  if (USE_MOCK) {
    return Promise.resolve(mockScenicDetails.find(s => s.id === id))
  }
  return get<ScenicSpot>(`/mp-api/scenic/detail?id=${id}`)
}
```

- [ ] **Step 2: 创建 `src/api/order.ts`**

```typescript
import { USE_MOCK } from '@/mock'
import { mockOrders } from '@/mock/order'
import { orderStore } from '@/mock/store'
import type { OrderDetail, OrderInfo, CreateOrderParams, MockPayResult } from './types'
import { get, post } from './request'

/** 获取订单列表 */
export function getOrderList(): Promise<OrderInfo[]> {
  if (USE_MOCK) return Promise.resolve(orderStore.value)
  return get<OrderInfo[]>('/mp-api/order/list')
}

/** 获取订单详情 */
export function getOrderDetail(id: string): Promise<OrderDetail | undefined> {
  if (USE_MOCK) {
    return Promise.resolve(mockOrders.find(o => o.id === id))
  }
  return get<OrderDetail>(`/mp-api/order/detail?id=${id}`)
}

/** 创建订单 */
export function createOrder(params: CreateOrderParams): Promise<{ orderId: string }> {
  if (USE_MOCK) {
    return Promise.resolve({ orderId: `mock_${Date.now()}` })
  }
  return post<{ orderId: string }>('/mp-api/order/create', params)
}
```

- [ ] **Step 3: 创建 `src/api/reserve.ts`**

```typescript
import { USE_MOCK } from '@/mock'
import { reserveStore } from '@/mock/store'
import type { ReserveRecord } from './types'
import { get, post } from './request'

/** 获取预约记录列表 */
export function getReserveList(): Promise<ReserveRecord[]> {
  if (USE_MOCK) return Promise.resolve(reserveStore.value)
  return get<ReserveRecord[]>('/mp-api/reserve/list')
}

/** 创建预约 */
export function createReserve(params: Omit<ReserveRecord, 'id' | 'status'>): Promise<{ id: number }> {
  if (USE_MOCK) {
    const id = Math.max(...reserveStore.value.map(r => r.id), 0) + 1
    reserveStore.value.push({ ...params, id, status: 'pending' })
    return Promise.resolve({ id })
  }
  return post<{ id: number }>('/mp-api/reserve/create', params)
}
```

- [ ] **Step 4: 验证类型检查**

Run: `pnpm run type-check`
Expected: 无类型错误

- [ ] **Step 5: Commit**

```bash
git add src/api/scenic.ts src/api/order.ts src/api/reserve.ts
git commit -m "feat(api): add scenic, order, reserve API functions with mock fallback"
```

---

### Task 7: 更新 App.vue 全局样式

**Files:**
- Modify: `src/App.vue`（`<style>` 部分）

- [ ] **Step 1: 更新 App.vue 的 page 全局样式**

`main.scss` 中已有 `page { ... }` 定义，且 `_tokens.scss` 已在 Task 2 中对齐。验证 `main.scss` 的 `page` 样式是否生效：

```scss
// main.scss 已有（无需修改）:
page {
  background-color: $color-background;  // → #f3f4f6
  color: $color-foreground;              // → #111111
  font-family: $font-family-body;        // → -apple-system, 'PingFang SC'...
  font-size: $font-size-base;            // → 28rpx
  line-height: $line-height-normal;      // → 1.5
}
```

确认 `App.vue` 的 `<style>` 中 import 了 `main.scss`（当前已有 `@import './styles/main.scss'`）。

如果 `App.vue` 中有重复的 `page { min-height: 100vh }` 样式，保留它（与 main.scss 不冲突）。

- [ ] **Step 2: 验证**

Run: `pnpm run dev:mp-weixin`
Expected: 构建成功，微信开发者工具中页面背景和字体符合规范

- [ ] **Step 3: Commit**

```bash
git add src/App.vue
git commit -m "chore: verify App.vue global styles aligned with token system"
```

---

### Task 8: 清理 9 个页面的局部 SCSS 变量

**Files:**
- Modify: `src/pages/faq/faq.vue`（删除 lines 243-249 的局部变量）
- Modify: `src/pages/order/order-list.vue`（删除 lines 232-240）
- Modify: `src/pages/order/order-detail.vue`（删除 lines 225-234）
- Modify: `src/pages/qrcode/index.vue`（删除 lines 249-250）
- Modify: `src/pages/card-buy/card-buy.vue`（删除 lines 85-90）
- Modify: `src/pages/reserve/reserve-success.vue`（删除 lines 122-130）
- Modify: `src/pages/card-bind/card-bind.vue`（删除 lines 270-279）
- Modify: `src/pages/reserve/reserve-index.vue`（删除 lines 229-238）
- Modify: `src/pages/reserve/reserve-list.vue`（删除 lines 305-313）

**Interfaces:**
- Consumes: Task 1 的 uni.scss 全局变量

每个文件的变量映射关系：

| 局部变量 | 全局替换为 | 值 |
|---------|----------|-----|
| `$font` | `$font-family-body` | 系统字体 |
| `$primary` | `$uv-primary` | `#3c9cff` |
| `$text-main` | `$uv-main-color` | `#111111` |
| `$text-label` | `$uv-main-color` | `#222222`→`#111111`（合并） |
| `$text-body` | `$uv-content-color` | `#333333` |
| `$text-hint` | `$uv-tips-color` | `#666666` |
| `$text-weak` | `$uv-placeholder-color` | `#999999` |
| `$divider` | `$uv-border-color` | `#eeeeee` |
| `$card-radius` | `$radius-lg` | `24rpx` |
| `$accent` | `$uv-primary` | `#3c9cff` |

> 注意：`$bar-height: 120rpx` 是组件特定值，保留为局部变量。

- [ ] **Step 1: 逐文件删除局部变量定义块**

对每个文件：
1. 删除 `<style>` 开头的局部变量定义行（`$font: ...;` 到 `$divider: ...;` 等）
2. 在 `<style>` 内全文搜索替换：
   - `$font` → `$font-family-body`（注意不要替换 `$font-size` 等前缀匹配）
   - `$primary` → `$uv-primary`（注意不要替换 `$primary-dark` 先处理）
   - `$text-main` → `$uv-main-color`
   - `$text-label` → `$uv-main-color`（合并到主色）
   - `$text-body` → `$uv-content-color`
   - `$text-hint` → `$uv-tips-color`
   - `$text-weak` → `$uv-placeholder-color`
   - `$divider` → `$uv-border-color`
   - `$card-radius` → `$radius-lg`
   - `$accent` → `$uv-primary`
3. **特殊处理 card-bind.vue**：`$primary-dark: #e89a2a` 是 bug（值是金色 `#e89a2a`，不是蓝色）。检查该变量在样式中的使用场景：
   - 如果用于金色/警告相关样式 → 替换为 `$uv-warning-dark`（`#f1a532`）
   - 如果用于主色深蓝相关样式 → 替换为 `$uv-primary-dark`（`#398ade`）

- [ ] **Step 2: 验证编译**

Run: `pnpm run dev:mp-weixin`
Expected: 构建成功，所有 9 个页面视觉无回退

- [ ] **Step 3: Commit**

```bash
git add src/pages/
git commit -m "refactor: remove local SCSS variables from 9 pages

Replace with global uni.scss tokens:
\$font → \$font-family-body
\$primary → \$uv-primary
\$text-* → \$uv-main-color/\$uv-content-color/\$uv-tips-color/\$uv-placeholder-color
\$divider → \$uv-border-color
\$card-radius → \$radius-lg"
```

---

# Phase 2: 核心链路迁移（4 个页面 + 相关组件）

> **迁移检查清单**（每个页面必须执行全部 6 项）：
> 1. 删除局部 SCSS 变量（已在 Task 8 处理）
> 2. 硬编码颜色值 → 全局变量（见 spec 2.5 迁移对照表）
> 3. 硬编码字号 → 对应 `$font-size-*` 变量（见 spec 1.2 游离值迁移表）
> 4. 硬编码间距 → 对应 `$spacing-*` 变量
> 5. 模板中硬编码数据 → import mock 数据
> 6. `font-weight: bold` → `$font-weight-bold`，硬编码过渡 → `$transition-*`

---

### Task 9: 迁移首页 (index.vue)

**Files:**
- Modify: `src/pages/index/index.vue`

**当前状态**：已使用 SCSS 变量，但有部分硬编码值需修正。

- [ ] **Step 1: 颜色迁移**

搜索替换（在 `<style>` 中）：
- `#e53935` → `$color-price`（价格场景）或 `$uv-error`（错误场景）
- `#FFD600` → `$color-price-highlight`（促销价，已有）
- `rgba(255, 255, 255, ...)` → 按 spec 2.4 规范保留（暗底白字透明度已是标准值）
- `rgba(60, 156, 255, ...)` → 保留（品牌蓝透明度变体）

- [ ] **Step 2: 字号迁移**

- `font-size: 22rpx` → `$font-size-xs`（20rpx）
- `font-size: 144rpx` → 保留（首页大卡促销数字，特殊值）

- [ ] **Step 3: 模板数据迁移**

将 `<script>` 中的硬编码数据替换为 import：
- `hotSpots` 数组 → `import { mockScenicList } from '@/mock/scenic'`（取前 6 条）
- `announcements` 数组 → `import { mockNotices } from '@/mock/notice'`
- `quickActions` 数组 → 保留（UI 配置，非业务数据）

- [ ] **Step 4: 验证**

Run: `pnpm run dev:mp-weixin`
Expected: 首页视觉无回退，数据正常显示

- [ ] **Step 5: Commit**

```bash
git add src/pages/index/
git commit -m "refactor(index): migrate hardcoded values to design tokens and mock data"
```

---

### Task 10: 迁移年卡列表 (card/list.vue)

**Files:**
- Modify: `src/packages/user/pages/card/list.vue`

**当前状态**：已使用 SCSS 变量，少量硬编码。

- [ ] **Step 1: 颜色迁移**

- `#fff` → `$color-card`
- `rgba(48, 49, 51, ...)` → 保留（暗底渐变，特殊视觉效果）
- `rgba(255, 255, 255, 0.8)` → 保留（暗底白字标准透明度）

- [ ] **Step 2: 间距迁移**

无关键间距值需要迁移（已有 token 化），保留 icon/decoration 的硬编码像素值。

- [ ] **Step 3: 验证并提交**

```bash
git add src/packages/user/pages/card/list.vue
git commit -m "refactor(card/list): migrate remaining hardcoded colors to tokens"
```

---

### Task 11: 迁移年卡详情 (card/detail.vue)

**Files:**
- Modify: `src/packages/user/pages/card/detail.vue`

**当前状态**：大量硬编码值（13 种颜色、22 种字号/间距、4 个 `font-weight: bold`）。

- [ ] **Step 1: 颜色迁移**

| 硬编码值 | 替换为 |
|---------|--------|
| `#ddd` | `$uv-border-color` |
| `#fff` | `$color-card` |
| `#333` | `$uv-content-color` |
| `#e53935` | `$color-price` |
| `#ccc` | `$uv-disabled-color` |
| `#666` | `$uv-tips-color` |
| `#eee` | `$uv-border-color` |
| `#999` | `$uv-placeholder-color` |

- [ ] **Step 2: 字号迁移**

| 硬编码值 | 替换为 |
|---------|--------|
| `36rpx` | `$font-size-xl` |
| `44rpx` | `$font-size-2xl` |
| `26rpx` | `$font-size-base`（28rpx，向上取整） |
| `30rpx` | `$font-size-lg`（32rpx） |
| `28rpx` | `$font-size-base` |
| `24rpx` | `$font-size-sm` |
| `22rpx` | `$font-size-xs`（20rpx） |

- [ ] **Step 3: 间距迁移**

| 硬编码值 | 替换为 |
|---------|--------|
| `24rpx` | `$spacing-3` |
| `30rpx` | `$spacing-4`（32rpx） |
| `16rpx` | `$spacing-2` |
| `12rpx` | `$spacing-2`（16rpx，向上取整） |
| `8rpx` | `$spacing-1` |
| `20rpx` | `$spacing-3`（24rpx） |

- [ ] **Step 4: font-weight 迁移**

全部 `font-weight: bold` → `font-weight: $font-weight-bold`

- [ ] **Step 5: 验证并提交**

```bash
git add src/packages/user/pages/card/detail.vue
git commit -m "refactor(card/detail): migrate all hardcoded values to design tokens"
```

---

### Task 12: 迁移购买流程 (card/buy.vue + card-buy.vue)

**Files:**
- Modify: `src/packages/user/pages/card/buy.vue`
- Modify: `src/pages/card-buy/card-buy.vue`

- [ ] **Step 1: 迁移 `packages/card/buy.vue`**

颜色迁移（同 Task 11 对照表）：
- `#f5f5f5` → `$uv-bg-color`
- `#fff` → `$color-card`
- `#333` → `$uv-content-color`
- `#e53935` → `$color-price`
- `#eeeeee` → `$uv-border-color`
- `#666` → `$uv-tips-color`
- `#3c9cff` → `$uv-primary`
- `#999` → `$uv-placeholder-color`
- `#eee` → `$uv-border-color`
- `#e5e7eb` → `$uv-border-color`

字号迁移：
- `30rpx` → `$font-size-lg`
- `28rpx` → `$font-size-base`
- `36rpx` → `$font-size-xl`
- `32rpx` → `$font-size-lg`
- `22rpx` → `$font-size-xs`
- `40rpx` → `$font-size-xl`（36rpx，向下取整）

间距迁移：
- `20rpx` → `$spacing-3`（24rpx）
- `24rpx` → `$spacing-3`
- `30rpx` → `$spacing-4`（32rpx）
- `16rpx` → `$spacing-2`

`font-weight: bold` → `$font-weight-bold`（4 处）

- [ ] **Step 2: 迁移 `pages/card-buy/card-buy.vue`**

删除局部变量（已在 Task 8 处理）。

颜色迁移：
- `#ffffff` → `$color-card`
- `#e53935` → `$color-price`
- `rgba(0, 0, 0, 0.06)` → 保留（投影变体）
- `rgba(60, 156, 255, 0.3)` → 保留（品牌蓝投影）

字号迁移：
- `26rpx` → `$font-size-base`（28rpx）
- `28rpx` → `$font-size-base`
- `38rpx` → `$font-size-xl`（36rpx）
- `22rpx` → `$font-size-xs`（20rpx）

`font-weight: 700` → `$font-weight-bold`（3 处）

过渡迁移：
- `all 0.2s ease` → `all $transition-fast`

- [ ] **Step 3: 验证并提交**

```bash
git add src/packages/user/pages/card/buy.vue src/pages/card-buy/
git commit -m "refactor(card/buy): migrate purchase flow to design tokens"
```

---

# Phase 3: 剩余页面迁移

---

### Task 13: 迁移订单页面

**Files:**
- Modify: `src/pages/order/order-list.vue`
- Modify: `src/pages/order/order-detail.vue`

- [ ] **Step 1: 迁移 order-list.vue**

局部变量已删除（Task 8）。

颜色迁移：
- 搜索所有 `#111`/`#222` → `$uv-main-color`
- `#333` → `$uv-content-color`
- `#666` → `$uv-tips-color`
- `#999` → `$uv-placeholder-color`
- `#eeeeee` → `$uv-border-color`
- `#ff9500` → `$color-status-pending`
- `#00b42a` → `$color-status-success`
- `#86909c` → `$color-status-cancel`
- `#f53f3f` → `$uv-error`

字号迁移（`26rpx` → `$font-size-base`，其他按对照表）。

模板数据迁移：
- `orders` ref 数组 → `import { getOrderList } from '@/api/order'`，`onLoad` 中调用

- [ ] **Step 2: 迁移 order-detail.vue**

同 order-list.vue 的颜色/字号迁移。

模板数据迁移：
- `mockOrders` 数组 → `import { getOrderDetail } from '@/api/order'`

- [ ] **Step 3: 验证并提交**

```bash
git add src/pages/order/
git commit -m "refactor(order): migrate order pages to design tokens and API layer"
```

---

### Task 14: 迁移预约页面

**Files:**
- Modify: `src/pages/reserve/reserve-index.vue`
- Modify: `src/pages/reserve/reserve-list.vue`
- Modify: `src/pages/reserve/reserve-success.vue`

- [ ] **Step 1: 迁移 reserve-list.vue**

局部变量已删除（Task 8）。
颜色/字号迁移同订单页面模式。
状态颜色：`pending` → `$color-status-pending`，`used`/`auto_used` → `$color-status-success`，`cancelled` → `$color-status-cancel`。
模板数据迁移：`records` → `import { getReserveList } from '@/api/reserve'`。

- [ ] **Step 2: 迁移 reserve-index.vue**

局部变量已删除（Task 8）。
颜色/字号迁移同上。
模板数据：`scenic`、`userInfo`、`mockStocks`、`sessionMap` → 后续对接 API 时替换，当前保留。

- [ ] **Step 3: 迁移 reserve-success.vue**

局部变量已删除（Task 8）。
颜色/字号迁移同上。

- [ ] **Step 4: 验证并提交**

```bash
git add src/pages/reserve/
git commit -m "refactor(reserve): migrate reserve pages to design tokens"
```

---

### Task 15: 迁移剩余页面

**Files:**
- `src/pages/login/login.vue` — 已有 SCSS 变量，少量硬编码
- `src/pages/login/agreement.vue` — 已有 SCSS 变量
- `src/pages/login/privacy.vue` — 已有 SCSS 变量
- `src/pages/profile/index.vue` — 已有 SCSS 变量
- `src/pages/qrcode/index.vue` — 局部变量已删除（Task 8）
- `src/pages/faq/faq.vue` — 局部变量已删除（Task 8）
- `src/pages/card-bind/card-bind.vue` — 局部变量已删除（Task 8）
- `src/pages/notice-list/notice-list.vue` — 混合状态
- `src/pages/scenic-detail/scenic-detail.vue` — 已有 SCSS 变量
- `src/pages/scenic-list/scenic-list.vue` — 已有 SCSS 变量
- `src/pages/union-buy/union-buy.vue` — 已有 SCSS 变量
- `src/pages/usage-guide/usage-guide.vue` — 纯图片页面
- `src/packages/user/pages/card/activate.vue` — 硬编码字体
- `src/packages/user/pages/card/bind.vue` — 硬编码字体
- `src/packages/user/pages/card/qrcode.vue` — 硬编码字体

- [ ] **Step 1: 逐文件迁移**

对每个文件执行 6 项检查清单：
1. ~~删除局部变量~~（已在 Task 8 处理）
2. 硬编码颜色 → 全局变量
3. 硬编码字号 → `$font-size-*`
4. 硬编码间距 → `$spacing-*`
5. 模板数据 → mock import（notice-list、qrcode、faq）
6. `font-weight: bold` → `$font-weight-bold`

**分包页面特殊处理**（activate/bind/qrcode）：
- 这些文件使用 `font-family: 'SourceHanSerifCN'...` 硬编码字符串
- 替换为 `font-family: $font-family-display`（标题）或 `$font-family-body`（正文）

**notice-list 数据迁移**：
- `notices` 数组 → `import { mockNotices } from '@/mock/notice'`

**qrcode 数据迁移**：
- `userCards` 数组 → 保留（需用户登录后从 API 获取）

- [ ] **Step 2: 验证并提交**

```bash
git add src/pages/ src/packages/
git commit -m "refactor: migrate remaining pages to design tokens"
```

---

### Task 16: 迁移公共组件

**Files:**
- Modify: `src/components/card-item.vue` — 从纯 CSS 改为 SCSS
- Modify: `src/components/empty-state.vue` — 从纯 CSS 改为 SCSS
- Modify: `src/components/McGlass.vue` — 从纯 CSS 改为 SCSS

- [ ] **Step 1: 迁移 card-item.vue**

将 `<style scoped>` 改为 `<style lang="scss" scoped>`。

颜色迁移：
| 硬编码值 | 替换为 |
|---------|--------|
| `#fff` | `$color-card` |
| `#eee` | `$uv-border-color` |
| `#333` | `$uv-content-color` |
| `#999` | `$uv-placeholder-color` |
| `#E74C3C` | `$color-price` |
| `#ccc` | `$uv-disabled-color` |
| `#4A90D9` | `$uv-primary` |
| `#E8F0FE` | `$uv-primary-light` |

字号迁移：
| 硬编码值 | 替换为 |
|---------|--------|
| `30rpx` | `$font-size-lg` |
| `24rpx` | `$font-size-sm` |
| `32rpx` | `$font-size-lg` |
| `22rpx` | `$font-size-xs` |

间距迁移：
| 硬编码值 | 替换为 |
|---------|--------|
| `16rpx` | `$spacing-2` |
| `20rpx` | `$spacing-3`（24rpx） |
| `8rpx` | `$spacing-1` |
| `4rpx` | 保留（极小装饰值） |
| `12rpx` | `$spacing-2`（16rpx） |

圆角迁移：
- `16rpx` → `$radius-base`
- `20rpx` → `$radius-base`（16rpx，向下取整）

`font-weight: bold` → `$font-weight-bold`（2 处）

- [ ] **Step 2: 迁移 empty-state.vue**

改为 `<style lang="scss" scoped>`。

颜色迁移：
- `#999` → `$uv-placeholder-color`
- `#4A90D9` → `$uv-primary`
- `#E8F0FE` → `$uv-primary-light`

字号/间距迁移：
- `80rpx`（icon） → 保留（装饰尺寸）
- `28rpx` → `$font-size-base`
- `40rpx` → `$spacing-5`
- `20rpx` → `$spacing-3`（24rpx）
- `30rpx` → `$spacing-4`（32rpx）
- `12rpx` → `$spacing-2`（16rpx）

圆角：`30rpx` → `$radius-full`

- [ ] **Step 3: 迁移 McGlass.vue**

改为 `<style lang="scss" scoped>`。

- rgba 值保留（毛玻璃效果的特殊视觉值）
- `24rpx` 圆角 → `$radius-lg`
- backdrop-filter 值保留

- [ ] **Step 4: 验证并提交**

```bash
git add src/components/
git commit -m "refactor(components): migrate card-item, empty-state, McGlass to SCSS tokens"
```

---

### Task 17: 最终验证

- [ ] **Step 1: TypeScript 类型检查**

Run: `pnpm run type-check`
Expected: 无错误

- [ ] **Step 2: 全量构建**

Run: `pnpm run dev:mp-weixin`
Expected: 构建成功

- [ ] **Step 3: 视觉回归检查**

在微信开发者工具中逐页检查：
- 首页：轮播、景区卡片、超级玩家卡价格（¥98 亮黄色）
- 年卡列表/详情：布局、颜色、字号
- 购买流程：价格显示、按钮样式
- 订单列表/详情：状态标签颜色
- 预约页面：表单、列表
- 个人中心、登录页

- [ ] **Step 4: 清理遗留**

- 删除 `src/data/scenic-spots.ts`（已被 `mock/scenic.ts` 替代）
- 确认无残留的局部 `$font`/`$primary` 定义：`grep -r '\$font:' src/pages/ src/packages/`
- 确认无残留的 `font-weight: bold`：`grep -r 'font-weight: bold' src/`

- [ ] **Step 5: 最终提交**

```bash
git add -A
git commit -m "chore: final verification and cleanup after UI/UX standardization"
```