0.0.2

feat: 优化个人中心邀请卡片
feat: 支持上课统计功能；优化会员管理默认筛选状态
2026-09-09 10:11:07 +08:00 · 2026-09-09 10:10:52 +08:00 · 2026-09-09 10:04:29 +08:00 · 2026-09-08 22:31:39 +08:00 · 2026-09-08 17:47:38 +08:00 · 2026-09-08 17:31:39 +08:00
166 changed files with 20347 additions and 6945 deletions
--- a/.claude/skills/wechat-devtools-http-preview/SKILL.md
+++ b/.claude/skills/wechat-devtools-http-preview/SKILL.md
@@ -0,0 +1,252 @@
 ---
 name: wechat-devtools-http-preview
 description: '通过微信开发者工具 HTTP V2 接口完成小程序登录检查、自动预览、上传体验版等操作。适用于用户提到微信开发者工具 HTTP、自动预览、体验版上传、命令行发布体验版、流水线触发开发者工具发布时。'
 license: MIT
 allowed-tools: Bash
 ---
 # 微信开发者工具 HTTP V2 体验版发布
 ## 适用场景
 当用户出现以下意图时使用本 skill：
 - 希望通过命令行或脚本调用微信开发者工具。
 - 希望上传小程序体验版。
 - 希望生成或刷新预览二维码。
 - 希望把开发者工具 HTTP 能力接入本地自动化流程。
 - 提到 `HTTP V2`、`/v2/upload`、`/v2/preview`、`/v2/autopreview`、`微信开发者工具端口` 等关键词。
 ## 核心结论
 微信开发者工具在启动后会自动开启本地 HTTP 服务。对于“通过命令行发布体验版”这个目标，最直接的路径是：
 1. 确认开发者工具已启动并拿到本地端口。
 2. 确认工具已登录。
 3. 如有需要先执行 `/v2/open` 打开项目。
 4. 如项目依赖 npm，必要时先执行 `/v2/buildnpm`。
 5. 调用 `/v2/upload` 上传体验版代码。
 6. 如需同时给测试同学扫码，调用 `/v2/preview` 或 `/v2/autopreview`。
 文档同时明确说明：如果场景是完全不依赖开发者工具的 CI/CD，官方更推荐 `miniprogram-ci`。因此本 skill 的定位是“基于本机已安装且已运行的微信开发者工具做自动化”，不是替代纯 CI 方案。
 ## 文档沉淀
 根据微信开发者工具 HTTP 文档，需要记住这些约束：
 - 接口路径统一使用 `/v2` 前缀。
 - HTTP 服务会在开发者工具启动后自动开启。
 - 端口号记录在用户目录下的 `.ide` 文件。
 - `project` 参数一般都要求传项目绝对路径，且必须 URL encode。
 - 项目目录必须存在合法的 `project.config.json`，并至少包含 `appid` 与 `projectname`。
 - `upload` 用于上传代码，也就是生成体验版。
 - `preview` 返回预览二维码。
 - `autopreview` 会自动刷新并预览项目，适合频繁本地联调。
 - `islogin` 可用于判断当前开发者工具是否已登录。
 - `login` 可输出二维码，支持 `image`、`base64`、`terminal` 三种格式。
 - `info-output` 可把预览或上传附加信息输出到 JSON 文件，适合自动化流程记录产物。
 ## 端口定位
 开发者工具端口号文件：
 - macOS: `~/Library/Application Support/微信开发者工具/<MD5>/Default/.ide`
 - Windows: `~/AppData/Local/微信开发者工具/User Data/<MD5>/Default/.ide`
 文档给出的 MD5 规则：`MD5(${installPath}${nwVersion})`
 已知默认值：
 - macOS: `installPath = /Applications/wechatwebdevtools.app/Contents/MacOS`
 - macOS: `nwVersion = ''`
 - Windows: `installPath = 微信开发者工具.exe 所在目录`
 - Windows: `nwVersion = installPath/version` 文件中 `latestNw` 的值
 ## 标准工作流
 ### 1. 检查工具是否启动
 先读取 `.ide` 文件中的端口号；如果没有端口文件，说明工具大概率未启动，先提示用户启动微信开发者工具。
 ### 2. 检查是否已登录
 调用：
 ```bash
 curl "http://127.0.0.1:${PORT}/v2/islogin"
 ```
 如果未登录，调用 `/v2/login`，按需要输出二维码：
 ```bash
 curl "http://127.0.0.1:${PORT}/v2/login?qr-format=terminal"
 curl "http://127.0.0.1:${PORT}/v2/login?qr-format=base64&qr-output=%2Ftmp%2Fwechat-login.txt"
 curl "http://127.0.0.1:${PORT}/v2/login?result-output=%2Ftmp%2Fwechat-login-result.json"
 ```
 ### 3. 打开或刷新项目
 ```bash
 curl "http://127.0.0.1:${PORT}/v2/open?project=${ENCODED_PROJECT}"
 ```
 当用户只要求上传或预览时，这一步不是必选，但执行后通常更稳定。
 ### 4. 构建 npm
 当项目启用了小程序 npm 并且近期依赖有变更时执行：
 ```bash
 curl "http://127.0.0.1:${PORT}/v2/buildnpm?project=${ENCODED_PROJECT}&compile-type=miniprogram"
 ```
 ### 5. 上传体验版
 体验版发布的核心接口就是：
 ```bash
 curl "http://127.0.0.1:${PORT}/v2/upload?project=${ENCODED_PROJECT}&version=${VERSION}&desc=${DESC}"
 ```
 推荐同时加 `info-output`：
 ```bash
 curl "http://127.0.0.1:${PORT}/v2/upload?project=${ENCODED_PROJECT}&version=${VERSION}&desc=${DESC}&info-output=${ENCODED_INFO_OUTPUT}"
 ```
 参数要求：
 - `project`：必填，项目绝对路径。
 - `version`：必填，版本号。
 - `desc`：可选，版本备注。
 - `info-output`：可选，输出上传附加信息 JSON。
 ### 6. 生成预览二维码
 如果用户还需要扫码体验，可继续调用：
 ```bash
 curl "http://127.0.0.1:${PORT}/v2/preview?project=${ENCODED_PROJECT}&qr-format=terminal"
 curl "http://127.0.0.1:${PORT}/v2/preview?project=${ENCODED_PROJECT}&qr-format=base64&qr-output=${ENCODED_QR_PATH}"
 curl "http://127.0.0.1:${PORT}/v2/autopreview?project=${ENCODED_PROJECT}&info-output=${ENCODED_INFO_OUTPUT}"
 ```
 区别：
 - `/v2/preview`：单次预览，拿二维码最直接。
 - `/v2/autopreview`：更适合联调时自动刷新预览。
 ## 推荐命令模板
 ### macOS 读取端口
 如果已知是默认安装路径，可用下面的方式快速算出 `.ide` 路径：
 ```bash
 MD5=$(printf '/Applications/wechatwebdevtools.app/Contents/MacOS' | md5)
 PORT_FILE="$HOME/Library/Application Support/微信开发者工具/${MD5}/Default/.ide"
 PORT=$(cat "$PORT_FILE")
 ```
 ### URL encode 项目路径
 ```bash
 PROJECT="/absolute/path/to/miniprogram"
 ENCODED_PROJECT=$(python3 - <<'PY'
 import os, urllib.parse
 print(urllib.parse.quote(os.environ['PROJECT'], safe=''))
 PY
 )
 ```
 ### 上传体验版完整示例
 ```bash
 PROJECT="/absolute/path/to/miniprogram"
 VERSION="1.2.3"
 DESC="体验版发布：修复预约课表"
 INFO_OUTPUT="/tmp/wechat-upload-info.json"
 ENCODED_PROJECT=$(python3 - <<'PY'
 import os, urllib.parse
 print(urllib.parse.quote(os.environ['PROJECT'], safe=''))
 PY
 )
 ENCODED_DESC=$(python3 - <<'PY'
 import os, urllib.parse
 print(urllib.parse.quote(os.environ['DESC'], safe=''))
 PY
 )
 ENCODED_INFO_OUTPUT=$(python3 - <<'PY'
 import os, urllib.parse
 print(urllib.parse.quote(os.environ['INFO_OUTPUT'], safe=''))
 PY
 )
 curl "http://127.0.0.1:${PORT}/v2/upload?project=${ENCODED_PROJECT}&version=${VERSION}&desc=${ENCODED_DESC}&info-output=${ENCODED_INFO_OUTPUT}"
 ```
 ## 执行规则
 当你代表用户执行这个流程时，按下面顺序做：
 1. 先确认当前系统是否安装并启动了微信开发者工具。
 2. 优先读取 `.ide` 端口文件，而不是盲猜端口。
 3. 上传前先验证 `project.config.json` 是否存在且含 `appid`、`projectname`。
 4. 涉及路径、备注、输出文件参数时，一律 URL encode。
 5. 如果 `islogin` 未登录，先引导用户扫码登录，不要直接继续上传。
 6. 如果用户目标是“发布体验版”，优先使用 `/v2/upload`；不要误用 `/preview` 代替。
 7. 如果用户目标是“出二维码给别人扫”，优先使用 `/v2/preview`。
 8. 如果用户目标是“边改边自动刷新”，优先使用 `/v2/autopreview`。
 ## 故障排查
 ### 端口文件不存在
 说明通常是开发者工具没启动，或者安装路径/MD5 推导错了。
 排查顺序：
 1. 让用户先手动打开微信开发者工具。
 2. 检查是否使用了正确安装路径。
 3. 重新计算 MD5。
 ### 调用 HTTP 接口失败
 优先检查：
 1. 是否能访问 `http://127.0.0.1:${PORT}/v2/islogin`
 2. `PORT` 是否来自正确的 `.ide` 文件。
 3. 开发者工具版本是否支持 `HTTP V2`。
 ### 上传失败
 优先检查：
 1. `project` 是否为绝对路径。
 2. 是否已 URL encode。
 3. `project.config.json` 是否存在。
 4. `project.config.json` 里是否包含 `appid` 和 `projectname`。
 5. 是否已登录工具。
 6. npm 依赖是否需要先执行 `/v2/buildnpm`。
 ## 输出要求
 当用户让你“帮我发布体验版”时，最终回复必须明确交代：
 - 是否成功调用了 `/v2/upload`
 - 使用的版本号与备注
 - 是否生成了 `info-output` 文件
 - 如果还做了预览，二维码输出到哪里或以什么格式返回
 如果没有成功执行，必须明确停在哪一步，不要模糊地说“可能发布了”。
 ## 引用来源
 本 skill 基于微信开放文档：
 - 页面：微信开发者工具 HTTP V2
 - 关键接口：`/v2/login`、`/v2/islogin`、`/v2/open`、`/v2/buildnpm`、`/v2/upload`、`/v2/preview`、`/v2/autopreview`
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -0,0 +1,37 @@
 # Repository Guidelines
 ## Project Structure & Module Organization
 This repository is a `pnpm` workspace with three packages under `packages/`:
 - `packages/app`: Vue 3 + `uni-app` WeChat mini-program. Pages live in `src/pages`, shared UI in `src/components`, state in `src/stores`, and utilities in `src/utils`.
 - `packages/server`: NestJS API with Prisma. Feature modules live in `src/<domain>`, unit tests are colocated in `__tests__`, and the database schema and seed script are in `prisma/`.
 - `packages/shared`: shared TypeScript enums, constants, and types used by both app and server.
 Reference docs and implementation notes are under `docs/`.
 ## Build, Test, and Development Commands
 - `pnpm dev:server`: start the NestJS API with watch mode.
 - `pnpm dev:app`: build and serve the `uni-app` target for WeChat mini-program development.
 - `pnpm build:shared`: compile shared types before consuming package changes.
 - `pnpm build:server`: build the backend into `packages/server/dist`.
 - `pnpm build:app`: produce the WeChat mini-program build.
 - `pnpm test`: run workspace tests; today this mainly executes server Jest tests.
 - `pnpm lint`: run workspace linting; currently defined for the server.
 For Prisma tasks, work in `packages/server`: `pnpm prisma:generate`, `pnpm prisma:migrate`, `pnpm prisma:seed`.
 ## Coding Style & Naming Conventions
 Use TypeScript throughout. Follow the existing style: 2-space indentation in JSON/Markdown, `camelCase` for variables/functions, `PascalCase` for Vue components and NestJS classes, and `kebab-case` for page/component filenames such as `flash-sales.vue`. Keep modules feature-oriented and prefer colocating DTOs and tests with their domain module.
 Linting is configured in the server via ESLint. The app relies on `vue-tsc` for type checks: run `pnpm --filter @mp-pilates/app type-check` before shipping UI changes.
 ## Testing Guidelines
 Server tests use Jest with `*.spec.ts` naming. Place tests in `packages/server/src/**/__tests__/` and focus on service-level behavior and edge cases around booking, membership, payment, and scheduling logic. Run `pnpm test` for the full suite or `pnpm --filter @mp-pilates/server test:cov` when touching business-critical paths.
 ## Commit & Pull Request Guidelines
 Recent history uses Conventional Commit prefixes such as `feat:`, `fix:`, `fix(app):`, and `perf:`. Keep subjects short and specific, preferably describing the user-visible effect.
 Pull requests should include a concise summary, linked issue or task reference, test notes, and screenshots or recordings for mini-program UI changes. Call out Prisma schema changes, new environment variables, or deployment steps explicitly.
 ## Security & Configuration Tips
 Do not commit real secrets. Review `packages/server/certs/` and environment-specific payment or WeChat credentials carefully before pushing. When changing shared types or enums, update both consumers and rebuild `@mp-pilates/shared` to avoid runtime drift.
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -71,12 +71,12 @@ pnpm deploy:server   # 部署后端到生产环境
 ### 卡类型枚举
 - `CardTypeCategory` (TIMES/DURATION/TRIAL) 定义在 `packages/shared/src/enums.ts`
- 会员管理筛选使用特殊值 `NONE` 表示无卡/无有效会员（不在枚举中）
+- 会员管理筛选使用特殊值 `ACTIVE` 表示持有 ACTIVE 状态会员卡的会员用户（页面默认），`NONE` 表示无卡/无有效会员（两者不在卡种枚举中）
 - 前端选项硬编码在 `src/pages/admin/members.vue` 的 `cardTypeOptions`，需与枚举保持同步
 ### 管理后台 API 模式
 - `/admin/members` 支持 `page`, `limit`, `search`, `cardType` 参数
- `cardType=NONE` → 无有效会员的用户；其他值对应 `CardTypeCategory`
+- `cardType=ACTIVE` → 持有任意 ACTIVE 状态会员卡；`cardType=NONE` → 无 ACTIVE 状态会员卡；省略参数查看全部用户；其他值对应 `CardTypeCategory`
 - 预约统计（total/completed/cancelled）通过 `groupBy` 批量查询
 ### 筛选组件模式
@@ -86,3 +86,15 @@ pnpm deploy:server   # 部署后端到生产环境
 ### Admin Store (`src/stores/admin.ts`)
 - 聚合所有管理端 API 调用：weekTemplates、cardTypes、studioConfig、members、bookings、orders、stats 等
 - 遵循不可变更新原则：`data` 赋值使用展开运算符 `[...newData]`
 ### 历史课程补录
 - `LessonSupplement` 独立记录历史累计课时，归属 user 模块；DTO 放 `user/dto`，测试放 `user/__tests__`，前端入口为 `pages/admin/member-supplement.vue`。
 - 补录不创建预约或时段；只增加累计已完成节数，不推测上课日期、天数、时长，不参与月度统计、活跃网格或邀请奖励。
 - 可选择从本人有限次会员卡扣次；补录与扣次必须事务提交，保存实际扣次快照，撤销只返还实际扣次。请求标识用于幂等重试。
 - Prisma 迁移按 `YYYYMMDDHHmmss_description/migration.sql` 存放；补录表采用增量迁移，回退说明维护在 `docs/lesson-supplement.md`，不删除审计记录。
 ### 月度教学统计
 - 统计归属 admin 模块，服务放 `admin/teaching-analytics.service.ts`，测试放 `admin/__tests__`；共享契约放 `shared/src/types/teaching-analytics.ts`，页面为 `pages/admin/analytics.vue`。
 - 按 TimeSlot.date 所属自然月查询，不按预约创建或核销日期；日期列以 UTC 日历值读取，中国时间用于判断课程结束。
 - 当前无老师归属字段，统计范围是工作室；operatorId 不是授课老师。COMPLETED 是系统完成状态，不代表签到。
 - 已上课程按时段去重，时长按已完成时段累加；上课人次按 COMPLETED 预约计数，学员按 userId 去重。取消、未出席、待确认、已确认独立计数。无日期补录不参与。
 - 月历、学员排行和会员卡分布统计已完成记录；明细可组合日期、学员、状态筛选。新增测试目录只放该服务的 *.spec.ts。
--- a/deploy-server.sh
+++ b/deploy-server.sh
@@ -117,6 +117,7 @@ echo_info "文件上传完成"
 # 6. 服务器端安装依赖并重启
 echo_info "服务器部署操作..."
 ssh ${SERVER_USER}@${SERVER_HOST} "bash -l" << 'ENDSSH'
 set -e
 export PATH="$HOME/.nvm/versions/node/v22.17.1/bin:$PATH"
 SERVER_PATH="/usr/local/web/mp-pilates-server"
 PM2_APP_NAME="mp-pilates-server"
--- a/docs/STUDIO_COS_SETUP.md
+++ b/docs/STUDIO_COS_SETUP.md
@@ -0,0 +1,338 @@
 # 工作室画廊 COS 接入配置说明
 本文档对应当前仓库当前实现。
 现在已经不再使用 STS `AssumeRole`。
 当前方案改为：
 - 服务端使用长期密钥直接签发 COS POST Policy
 - 管理中心小程序拿到表单签名后直传 COS
 - 工作室配置中的 `logo`、`bannerUrl`、`photos` 保存最终可访问 URL
 当前实现代码入口：
 - `packages/server/src/studio/studio-upload.service.ts`
 - `packages/server/src/studio/studio.controller.ts`
 - `packages/app/src/utils/studio-upload.ts`
 - `packages/app/src/pages/admin/studio.vue`
 ## 一、整体链路
 1. 管理中心点击上传图片。
 2. 小程序请求服务端 `POST /api/admin/studio/upload-credentials`。
 3. 服务端用 `COS_SECRET_ID`、`COS_SECRET_KEY` 直接生成一组 POST Policy 表单字段。
 4. 服务端把 `uploadUrl`、`key`、`formData`、`fileUrl`、`expiresAt` 返回给小程序。
 5. 小程序使用 `uni.uploadFile` 直接上传到 COS。
 6. 上传成功后，把 URL 保存到工作室配置，再调用 `PUT /api/admin/studio/info` 落库。
 这个方案没有临时密钥，也没有角色扮演。
 安全边界来自两层：
 - 服务端只为单个对象 key 签发一次表单策略
 - 表单策略有明确过期时间，过期后自动失效
 ## 二、这个方案的本质
 你现在选的是“服务端代签名”的直传方案。
 它和 STS 的差别是：
 - STS：给前端一段时间内可用的短期密钥
 - 当前方案：不给前端密钥，只给前端一个短时有效的上传表单签名
 所以结论很直接：
 - 仍然有有效期
 - 但有效期作用在 POST Policy 上，不是作用在临时密钥上
 当前代码里默认有效期是 `1800` 秒。
 环境变量：
 - `COS_UPLOAD_DURATION_SECONDS`
 当前实现限制范围：
 - 最短 `300` 秒
 - 最长 `7200` 秒
 ## 三、你现在真正需要准备的东西
 先确认下面几个信息：
 - COS Bucket 名称，例如 `plates-1251306435`
 - COS 所在地域，例如 `ap-guangzhou`
 - 服务端使用的 COS 长期密钥 `SecretId` / `SecretKey`
 - 图片上传前缀，例如 `mp/studio`
 - 图片访问域名
 建议约定：
 - Bucket：`plates-1251306435`
 - Region：`ap-guangzhou`
 - Prefix：`mp/studio`
 ## 四、COS 控制台配置
 ### 1. 创建或确认 Bucket
 控制台路径：`对象存储 COS`
 建议：
 - 地域选 `广州` 或你当前实际地域
 - 存储类型标准存储即可
 - Bucket 名称和环境变量保持完全一致
 ### 2. 图片访问方式
 当前实现保存的是直接图片 URL。
 所以图片必须能被小程序和前台直接访问。
 你有两种方式：
 1. 直接使用 COS 源站并允许读
 2. 配 CDN / 自定义域名并让这个域名可直接访问图片
 如果你什么都不配，上传成功后图片可能打不开。
 最直接做法：
 - 让这个图片 Bucket 对外可读
 更稳妥做法：
 - 单独图片 Bucket
 - 用 CDN 域名做 `COS_PUBLIC_BASE_URL`
 ### 3. 微信小程序合法域名
 微信公众平台需要补白名单：
 - `request 合法域名`：你的后端 API 域名
 - `uploadFile 合法域名`：`https://<bucket>.cos.<region>.myqcloud.com`
 - `downloadFile 合法域名`：图片访问域名
 如果图片访问也走 COS 源站，那么 `downloadFile 合法域名` 同样加：
 - `https://<bucket>.cos.<region>.myqcloud.com`
 例如：
 - `https://focus.richarjiang.com`
 - `https://plates-1251306435.cos.ap-guangzhou.myqcloud.com`
 ## 五、服务端账号需要什么权限
 现在已经不需要：
 - STS
 - CAM 角色
 - `AssumeRole`
 - 角色信任策略
 - `COS_UPLOAD_ROLE_ARN`
 现在服务端只需要一对可以给目标 Bucket 生成上传签名的长期密钥。
 最简单的做法是：
 - 用你的主账号密钥
 但生产上更合理的是：
 - 建一个专用 CAM 用户，只给这个 Bucket 上传相关权限
 ### 推荐 CAM 用户权限策略
 如果你要建专用 CAM 用户，给它绑定下面这类策略即可。
 把下面真实值替换成你的实际资源：
 - 地域：`ap-guangzhou`
 - AppId：`1251306435`
 - Bucket：`plates-1251306435`
 - Prefix：`mp/studio`
 ```json
 {
  "version": "2.0",
  "statement": [
    {
      "effect": "allow",
      "action": [
        "name/cos:PutObject",
        "name/cos:PostObject"
      ],
      "resource": [
        "qcs::cos:ap-guangzhou:uid/1251306435:plates-1251306435/mp/studio/*"
      ]
    }
  ]
 }
 ```
 如果你后续还要服务端删除对象，再补：
 - `name/cos:DeleteObject`
 当前仓库实现不需要删除对象，所以先不要额外放大权限。
 ## 六、服务端环境变量
 把下面变量配置到 `packages/server/.env` 或线上环境：
 ```env
 COS_SECRET_ID=your-cos-secret-id
 COS_SECRET_KEY=your-cos-secret-key
 COS_BUCKET=plates-1251306435
 COS_REGION=ap-guangzhou
 COS_PUBLIC_BASE_URL=https://plates-1251306435.cos.ap-guangzhou.myqcloud.com
 COS_UPLOAD_PREFIX=mp/studio
 COS_UPLOAD_DURATION_SECONDS=1800
 ```
 各字段含义：
 - `COS_SECRET_ID`：用于签发 POST Policy 的长期密钥 ID
 - `COS_SECRET_KEY`：用于签发 POST Policy 的长期密钥 Key
 - `COS_BUCKET`：上传目标 Bucket
 - `COS_REGION`：Bucket 地域
 - `COS_PUBLIC_BASE_URL`：最终展示图片的访问域名
 - `COS_UPLOAD_PREFIX`：统一对象前缀
 - `COS_UPLOAD_DURATION_SECONDS`：Policy 有效期秒数
 现在可以删除或忽略这些旧配置：
 - `COS_UPLOAD_ROLE_ARN`
 - `COS_APP_ID`
 - `COS_UPLOAD_ROLE_SESSION_NAME`
 它们对当前实现已经没用。
 ## 七、控制台操作清单
 按这个顺序做：
 1. 确认 COS Bucket 已存在。
 2. 确认图片访问域名对外可读。
 3. 在微信公众平台加好 `request` / `uploadFile` / `downloadFile` 合法域名。
 4. 准备一对 COS 长期密钥。
 5. 把 `COS_SECRET_ID`、`COS_SECRET_KEY`、`COS_BUCKET`、`COS_REGION`、`COS_PUBLIC_BASE_URL`、`COS_UPLOAD_PREFIX` 配到服务端。
 6. 重启服务端。
 7. 在管理中心上传一张图片测试。
 ## 八、接口返回内容说明
 请求：
 ```http
 POST /api/admin/studio/upload-credentials
 Content-Type: application/json
 Authorization: Bearer <admin-token>
 {
  "fileName": "demo.jpg",
  "contentType": "image/jpeg",
  "assetType": "gallery"
 }
 ```
 正常返回会包含：
 - `uploadUrl`
 - `fileUrl`
 - `key`
 - `assetType`
 - `expiresAt`
 - `formData`
 `formData` 里会有这些字段：
 - `key`
 - `policy`
 - `success_action_status`
 - `Content-Type`
 - `q-sign-algorithm`
 - `q-ak`
 - `q-key-time`
 - `q-sign-time`
 - `q-signature`
 这就是小程序直传需要的全部内容。
 ## 九、怎么验证是否配置正确
 ### 1. 接口层验证
 调用 `POST /api/admin/studio/upload-credentials`。
 如果成功，说明：
 - 服务端长期密钥有效
 - 服务端已经能正确签发 policy
 ### 2. 上传层验证
 在管理中心上传一张图，检查：
 1. COS Bucket 下是否出现对象
 2. 返回的 `fileUrl` 浏览器是否能直接访问
 3. 保存工作室设置后首页是否显示该图
 ### 3. 失败时怎么定位
 如果 `upload-credentials` 接口失败，优先检查：
 - `COS_SECRET_ID` / `COS_SECRET_KEY` 是否正确
 - `COS_BUCKET` / `COS_REGION` 是否正确
 - 服务端是否已经加载最新环境变量
 如果接口成功但上传失败，优先检查：
 - 小程序 `uploadFile 合法域名` 是否正确
 - Bucket 权限策略是否允许当前长期密钥上传到该前缀
 - `Content-Type` 是否被策略条件限制住
 如果上传成功但图片打不开，优先检查：
 - Bucket 或图片域名是否可公网访问
 - `COS_PUBLIC_BASE_URL` 是否正确
 - 小程序 `downloadFile 合法域名` 是否正确
 ## 十、当前实现的边界
 当前仓库实现边界如下：
 - 只支持 `jpg`、`jpeg`、`png`、`webp`、`heic`、`heif`
 - 单次上传大小上限 `10MB`
 - 只支持普通表单直传，不支持分片上传
 - 删除工作室图片时，只会从数据库配置里移除 URL，不会删除 COS 历史对象
 最后一条是故意保守设计。
 原因很简单：
 - 先保证配置删除安全
 - 避免误删真实文件
 如果以后要做“删配置时同步删对象”，那时再单独加 `DeleteObject` 权限。
 ## 十一、初始化工作室画廊
 如果你要把现在手工写死的图片 URL 一次性写入数据库，执行：
 ```bash
 pnpm --filter @mp-pilates/server studio:seed-gallery
 ```
 脚本文件：
 - `packages/server/prisma/update-studio-gallery.ts`
 ## 十二、建议的生产做法
 如果你后面要长期维护，建议：
 1. 图片单独放一个 Bucket。
 2. 长期密钥不要直接用主账号，换成专用 CAM 用户。
 3. 对专用 CAM 用户只给 `mp/studio/*` 前缀上传权限。
 4. 用 CDN 域名作为 `COS_PUBLIC_BASE_URL`。
 这样后面扩展、迁移、审计都会更稳。
--- a/docs/invite-marketing.md
+++ b/docs/invite-marketing.md
@@ -0,0 +1,32 @@
 # 邀请好友领课时
 个人中心为所有登录用户展示 6 位邀请码；首次访问 `/invite/code` 时惰性生成，字符避开 0、1、I、O。数据库唯一索引保证唯一，条件更新和冲突重试保证并发安全，无需回填存量用户。
 分享入口使用微信 `button open-type="share"`，分享落地为 `/pages/card/detail?showAll=1&inviteCode=XXXXXX`。落地弹窗自动填码，未领取的列表价格标注「领取后 95 折」。用户确认后绑定一次，禁止自邀和更换邀请人；绑定后体验卡、次卡、期限卡及限时购卡均按当前售价享 95 折，按分四舍五入，后续购买自动享受。订单金额只由服务端计算。
 每位好友首次支付非体验卡后，邀请人获得独立的 1 次赠课会员卡，365 天有效；邀请人无需先持有会员卡。赠课卡隐藏于商品列表，可从「我的会员卡」预约。体验卡购买与上课均不发奖。每人只奖励一次，续购不重复奖励。
 订单记录下单时的邀请人和卡片类别。支付到账、购卡权益、邀请资格更新、赠课及奖励记录处于同一数据库事务。条件更新防止并发回调、同一好友多笔订单重复发奖。历史无归因快照的订单不补发奖励；历史已 QUALIFIED 的邀请保留原资格，不重复奖励。
 ## 发布
 先备份数据库，并在服务端运行 `pnpm exec prisma migrate deploy`，应用 `20260908000000_invite_codes`。该迁移新增可空邀请码、唯一索引、订单归因字段及隐藏赠课卡类型，不更新用户历史数据。
 然后运行 `pnpm prisma:generate`，从仓库根目录运行 `pnpm build:shared`、`pnpm build:server`、`pnpm build:app`。先发布服务端，再发布小程序。无需新增环境变量。已于 2026-09-08 22:29（北京时间）执行生产迁移并发布后台；小程序尚未发布。
 ## 真机验收
 用两个微信账号验证：个人中心复制和好友分享；分享卡片落地列表与自动填码；未登录确认领取；重启后保留服务端优惠；原价和 95 折金额一致；体验卡支付不赠课；次卡/期限卡首次支付赠课到账；后续购买不再赠课；赠课可预约。还应验证支付失败、取消和重复回调。微信分享与真实微信支付仍需在部署后进行真机验证。
 ## 验证限制
 邀请、支付和限时购卡价格测试通过。已在 390 × 844 的 H5 预览中检查个人中心入口和自动填码落地弹窗；H5 预览不代替微信真机验收。全量测试中的旧 SchedulerService 测试缺少 FlashSaleService mock，8 项失败，与本次修改无关。`pnpm lint` 因仓库未安装 ESLint 无法运行。
 ## 本次后台发布记录
 - 目标：`129.204.155.94`，目录 `/usr/local/web/mp-pilates-server`，PM2 服务 `mp-pilates-server`，端口 3008。
 - 使用服务器现有 Node 22.16.0 和 Prisma 5.22.0；现有部署脚本中的 Node 22.17.1 路径不适用于当前服务器，因此按步骤发布构建，未修改线上环境配置及证书。
 - 数据库迁移状态正常，新增 3 个字段及独立隐藏赠课卡核验通过。
 - 公网 `/api/health` 和 `/api/membership/card-types` 返回 200；商品列表不包含赠课卡；未登录访问 `/api/invite/code` 返回预期的 401。
 - 旧构建和 Prisma schema 已归档在服务器 `/usr/local/web/releases/mp-pilates-invite-20260908/previous-build.tgz`，新构建归档为同目录 `release.tgz`。
 - 本次只进行发布及只读核验，未制造测试用户、邀请关系或支付订单。微信真机分享与支付仍待小程序发布后联调。
--- a/docs/lesson-supplement.md
+++ b/docs/lesson-supplement.md
@@ -0,0 +1,29 @@
 # 历史课程补录
 入口：会员档案 → 上课情况 → 补录上课。一次填写 1–999 节，可备注，默认仅补记录，也可选择本人有限次会员卡扣次（含已过期卡）。不限次卡无需扣次；余额不足阻止提交。
 一批补录展示为「系统补录 · N 节」，不是 N 个虚拟预约。累计已上课次数（个人中心、会员档案、会员列表已完成）增加 N；累计预约、月度节数/天数/时长、最近 30 天网格、邀请奖励保持正常预约口径，因为补录没有真实上课日期。记录时间明确为补录时间。
 老师与管理员共用 ADMIN 权限；成员只能读取自己的生效记录。事务保存记录与扣次快照，请求标识唯一，网络重试不重复扣次。撤销软删除，保留操作人与时间，只返还当时实际扣次，过期卡不重新激活。若原卡已转为不限次，撤销阻止并要求先核对卡状态。
 ## 迁移与发布
 新增 `lesson_supplements` 表及关联索引，不修改既有预约数据。按仓库发布流程先执行 `prisma migrate deploy` 并重新生成 Prisma Client、发布后端，再发布小程序。开发检查不自动触及生产数据库。
 回退：先回退应用代码，保留新增表即可，旧代码不读取该表。若一定要移除表，须先导出审计数据并核对已扣会员卡余额；仅在未写入任何补录的环境可执行 `DROP TABLE lesson_supplements;`。MySQL DDL 不能靠事务回滚，不在生产自动执行删除。
 ## 本次验证
 - 补录与用户统计相关 62 项测试通过，覆盖权限、数量校验、仅补记录、扣次、余额不足、过期卡、重复提交、并发冲突、撤销和统计口径。
 - 共享包与后端构建、小程序构建、vue-tsc、Prisma schema 校验通过。
 - 使用真实 Vue 页面与示例接口检查 375/320 宽度布局、十节补录、撤销、余额不足及学员历史记录；不替代微信真机与真实数据库联调。
 - 全量测试存在原有 SchedulerService 测试依赖缺失：未提供 FlashSaleService，8 项失败；其余已执行用例通过。
 - 2026-09-08 已经用户授权执行生产迁移及后端发布；小程序仍需单独发布。
 ## 生产发布记录（2026-09-08）
 - 执行 `pnpm deploy:server`，迁移 `20260908090000_add_lesson_supplements` 成功，全部 4 个迁移处于最新状态。
 - 发布前数据库及后端备份保存在服务器 `/usr/local/web/mp-pilates-backups/20260908-145852/`。
 - 新表读取成功，验收时为 0 条记录；未创建测试补录或修改学员余额。
 - 内网及公网 `https://focus.richarjiang.com/api/health` 均返回 `success: true`、`status: ok`；PM2 `mp-pilates-server` 为 online，重启计数为 0。
 - 部署脚本增加远端 `set -e`，使依赖安装或迁移失败时停止发布。
--- a/docs/monthly-teaching-analytics.md
+++ b/docs/monthly-teaching-analytics.md
@@ -0,0 +1,47 @@
 # 月度教学统计
 入口：管理中心 → 统计分析。页面为 `packages/app/src/pages/admin/analytics.vue`，接口为 `GET /api/admin/teaching-analytics?month=YYYY-MM`。
 ## 统计口径
 | 指标 | 定义 |
 | --- | --- |
 | 已上课程 | COMPLETED 预约关联的时段数，同一时段只计一次 |
 | 已完成上课人次 | COMPLETED 预约数 |
 | 本月上课学员 | 已完成预约的 userId 去重，不按姓名合并 |
 | 授课小时 | 已完成时段的排课分钟数之和除以 60，同一时段不重复累计 |
 | 上课天数 | 已完成课程日期去重 |
 | 人均上课次数 | 上课人次除以上课学员数，无学员时显示横线 |
 | 上月参考 | 上一个完整自然月的已上课程节数；当月未结束时明确提示，不给误导性环比 |
 | 待核对 | 已过中国时间课程结束时刻、仍待确认或已确认的预约 |
 月份以 TimeSlot.date 的日历日期为准，查询使用月初包含、下月初不包含的区间。预约创建时间、完成时间和取消时间不影响月份归属。取消、未出席、待确认和已确认不计入已上课程。
 当前模型没有老师归属、课程名称或课程类别，因此统计范围明确为工作室；不能把 operatorId 当作授课老师。用卡分布代表预约所用会员卡的当前卡种名称，不代表课程类别、实际消课收入或老师课酬。同名卡种合并显示。
 系统存在自动完成预约任务，COMPLETED 不等于现场签到，不提供签到率。没有课程日期的历史累计补录不计入本报告。
 ## 页面与交互
 - 米白底、松绿色总览、宋体标题与衬线数字，延续原有课表风格。
 - 月份选择器、前后月切换、回到本月、手动刷新与下拉刷新；支持 2000—2099 年。
 - 月历显示每天已完成课程节数，点击日期定位明细，再次点击解除日期条件。
 - 学员排行支持姓名搜索，显示上课次数、天数与最近上课日期；点击查看该学员全月已完成明细。
 - 明细支持日期、学员、预约状态组合筛选；每个状态显示当前日期/学员条件内的记录数。清除筛选恢复全月全部记录。
 - 明细显示课程日期、起止时间、学员、用卡与状态，点击姓名进入会员详情。
 - 排行每次增加 10 人、明细每次增加 20 条，避免一次渲染过多节点。接口返回当月完整记录，不以列表显示上限截断统计。
 - 切月清空旧数据和筛选，请求序号防止慢响应覆盖新月份。错误提示与空月独立显示，失败不伪装成零数据。
 ## 实现边界与验证
 接口继承管理中心的 JWT 和 ADMIN 权限保护。一次查询读取当月及上月必要关联字段，无逐学员查询；只向前端返回当月明细与两个月的汇总。未新增数据库表或迁移。
 服务测试覆盖课程去重、同名不同学员、状态排除、空月、跨年、闰年、月会员管理 页面中，默认是查看全部用户，这个查看效率太低了，我希望默认看到的是会员用户增加这么一个筛选， 至于新用户，我可以选择筛选无卡用户就行了，这样的体验会更加好一些参数验证、中国时间结束判断以及接口权限元数据。
 验证通过：共享包构建、后端构建、前端类型检查、微信小程序构建；新增统计测试 12 项通过。全量测试 231 项通过，原有 scheduler 测试 8 项因缺少 FlashSaleService mock 失败。
 使用真实 Vue 页面与 SCSS、模拟数据进行了 390px 手机宽度预览，验证学员钻取、日期筛选、快速切月、空月和错误状态。浏览器预览仅模拟小程序容器；微信真机、原生月份选择器以及线上数据联调仍需发布前验收。
 设计参考：[TeamUp 出勤报表](https://support.goteamup.com/en/articles/9327465-reports-class-attendances-all-attendances)，借鉴按学员、日期和状态追溯出勤记录的交互，不复制其产品界面。
 上线需要部署后端并发布小程序，本次仅实现与本地验证，未执行生产部署。
--- a/docs/superpowers/plans/2026-04-07-member-card-edit.md
+++ b/docs/superpowers/plans/2026-04-07-member-card-edit.md
@@ -0,0 +1,946 @@
 # 会员卡编辑功能实现计划
 > **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:** 在管理后台会员列表中，点击会员弹出详情/编辑弹窗，支持编辑卡种、有效期、次数，以及清空会员卡
 **Architecture:** 后端在 `UserController` 新增三个 admin 接口（GET/PUT/DELETE `/admin/members/:userId/membership`），前端将现有详情弹窗改造为 Tab 模式，store 新增三个 action
 **Tech Stack:** NestJS (后端) + Vue 3 + uni-app + Pinia (前端)
 ---
 ## 文件结构
 ```
 Backend:
 - packages/server/src/user/user.controller.ts  (新增3个接口)
 - packages/server/src/user/user.service.ts       (新增3个 service 方法)
 - packages/server/src/user/dto/update-user-membership.dto.ts  (新建)
 Frontend:
 - packages/app/src/stores/admin.ts   (新增3个 action)
 - packages/app/src/pages/admin/members.vue  (改造详情弹窗为 Tab 模式)
 ```
 ---
 ## Phase 1: 后端接口
 ### Task 1: 创建 UpdateUserMembershipDto
 **Files:**
 - Create: `packages/server/src/user/dto/update-user-membership.dto.ts`
 ```typescript
 import { IsDateString, IsInt, IsOptional, IsUUID, Min } from 'class-validator'
 export class UpdateUserMembershipDto {
  @IsUUID()
  cardTypeId: string
  @IsOptional()
  @IsInt()
  @Min(0)
  remainingTimes?: number | null
  @IsDateString()
  startDate: string
  @IsDateString()
  expireDate: string
 }
 ```
 - [ ] **Step 1: 创建目录并写入文件**
 ```bash
 mkdir -p /Users/richard/Documents/code/pilates/mp-pilates/packages/server/src/user/dto
 ```
 写入 `packages/server/src/user/dto/update-user-membership.dto.ts`
 ---
 ### Task 2: UserService 新增会员卡管理方法
 **Files:**
 - Modify: `packages/server/src/user/user.service.ts` — 在文件末尾添加 3 个新方法
 需要添加的方法：
 1. `getUserMembership(userId: string)` — 返回 `Membership & { cardType: CardType } | null`
 2. `updateUserMembership(userId: string, dto: UpdateUserMembershipDto)` — 创建或更新 membership，status 自动计算
 3. `deleteUserMembership(userId: string)` — 软删除（status → EXPIRED）
 关键业务逻辑：
 - `updateUserMembership` 中 status 计算规则：
  - `expireDate < now` → `EXPIRED`
  - `remainingTimes === 0` → `USED_UP`
  - 否则 → `ACTIVE`
 - 如果用户已有 membership → 更新；无 → 创建新的
 - 需要同时 import `CardTypeCategory` 和 `MembershipStatus`
 ```typescript
 // 在 user.service.ts 顶部已有 import，追加方法
 import { CardTypeCategory, MembershipStatus } from '@mp-pilates/shared'
 import { UpdateUserMembershipDto } from './dto/update-user-membership.dto'
 import { Membership, CardType, Prisma } from '@prisma/client'
 import { PrismaService } from '../prisma/prisma.service'
 // 在 class 末尾添加：
 async getUserMembership(userId: string): Promise<(Membership & { cardType: CardType }) | null> {
  // userId 无唯一约束，取第一条
  const membership = await this.prisma.membership.findFirst({
    where: { userId },
    include: { cardType: true },
  })
  return membership ? { ...membership, cardType: { ...membership.cardType } } : null
 }
 async updateUserMembership(
  userId: string,
  dto: UpdateUserMembershipDto,
 ): Promise<Membership & { cardType: CardType }> {
  // 计算 status
  const now = new Date()
  const expireDate = new Date(dto.expireDate)
  const remainingTimes = dto.remainingTimes ?? null
  const isTimeBased = remainingTimes !== null
  let status: MembershipStatus = MembershipStatus.ACTIVE
  if (expireDate < now) {
    status = MembershipStatus.EXPIRED
  } else if (isTimeBased && remainingTimes <= 0) {
    status = MembershipStatus.USED_UP
  }
  // 由于 userId 无唯一约束，先查是否存在，取第一条
  const existing = await this.prisma.membership.findFirst({ where: { userId } })
  let membership: Membership & { cardType: CardType }
  if (existing) {
    // 已有 membership → 更新
    const updated = await this.prisma.membership.update({
      where: { id: existing.id },
      data: {
        cardTypeId: dto.cardTypeId,
        remainingTimes: dto.remainingTimes ?? null,
        startDate: new Date(dto.startDate),
        expireDate: new Date(dto.expireDate),
        status,
      },
      include: { cardType: true },
    })
    membership = { ...updated, cardType: { ...updated.cardType } }
  } else {
    // 无 membership → 创建新的
    const created = await this.prisma.membership.create({
      data: {
        userId,
        cardTypeId: dto.cardTypeId,
        remainingTimes: dto.remainingTimes ?? null,
        startDate: new Date(dto.startDate),
        expireDate: new Date(dto.expireDate),
        status,
      },
      include: { cardType: true },
    })
    membership = { ...created, cardType: { ...created.cardType } }
  }
  return membership
 }
 async deleteUserMembership(userId: string): Promise<void> {
  await this.prisma.membership.updateMany({
    where: { userId },
    data: { status: MembershipStatus.EXPIRED },
  })
 }
 ```
 注意：`Membership` 表的 `userId` 暂无唯一约束，实现阶段如有需要可加。`findFirst` + `update` 的方案在只有一张卡时工作正常。
 ---
 ### Task 3: UserController 新增 3 个 admin 接口
 **Files:**
 - Modify: `packages/server/src/user/user.controller.ts`
 在文件顶部添加 `@Param` import，然后在 `Admin: Member Management` 区块后添加新接口：
 ```typescript
 import {
  Controller,
  Get,
  Put,
  Delete,
  Body,
  Param,
  Query,
  UseGuards,
 } from '@nestjs/common'
 // ... existing imports ...
 import { UpdateUserMembershipDto } from './dto/update-user-membership.dto'
 // 在 getMembers 之后添加：
@Get('admin/members/:userId/membership')
@UseGuards(RolesGuard)
@Roles(UserRole.ADMIN)
 getUserMembership(@Param('userId') userId: string) {
  return this.userService.getUserMembership(userId)
 }
@Put('admin/members/:userId/membership')
@UseGuards(RolesGuard)
@Roles(UserRole.ADMIN)
 updateUserMembership(
  @Param('userId') userId: string,
  @Body() dto: UpdateUserMembershipDto,
 ) {
  return this.userService.updateUserMembership(userId, dto)
 }
@Delete('admin/members/:userId/membership')
@UseGuards(RolesGuard)
@Roles(UserRole.ADMIN)
 deleteUserMembership(@Param('userId') userId: string) {
  return this.userService.deleteUserMembership(userId)
 }
 ```
 ---
 ## Phase 2: 前端 Store
 ### Task 4: Admin Store 新增 3 个 action
 **Files:**
 - Modify: `packages/app/src/stores/admin.ts`
 在 `MemberSummary` 类型后添加 `UserMembership` 类型（放在 fetchMembers 附近）：
 ```typescript
 export interface UserMembership {
  userId: string
  membership: {
    id: string
    cardTypeId: string
    remainingTimes: number | null
    startDate: string
    expireDate: string
    status: string
    cardType: {
      id: string
      name: string
      type: string
      totalTimes: number | null
      durationDays: number
    }
  } | null
 }
 ```
 在 `fetchMembers` action 后添加：
 ```typescript
 async function getUserMembership(userId: string): Promise<UserMembership> {
  return get<UserMembership>(`/admin/members/${userId}/membership`)
 }
 async function updateUserMembership(
  userId: string,
  dto: {
    cardTypeId: string
    remainingTimes?: number | null
    startDate: string
    expireDate: string
  },
 ): Promise<any> {
  return put<any>(`/admin/members/${userId}/membership`, dto)
 }
 async function deleteUserMembership(userId: string): Promise<void> {
  return del<void>(`/admin/members/${userId}/membership`)
 }
 ```
 在 `return` 对象中导出这三个函数。
 ---
 ## Phase 3: 前端 UI（详情弹窗改造）
 ### Task 5: members.vue 弹窗改造 — 结构变更
 **Files:**
 - Modify: `packages/app/src/pages/admin/members.vue`
 将现有的详情弹窗（`detail-modal`）从单一视图改造为 Tab 模式。
 #### 5.1 模板改动
 **原有弹窗代码：**
 ```vue
 <!-- Detail modal -->
 <view v-if="showDetail && detailMember" class="modal-mask" @tap.self="showDetail = false">
  <view class="modal">
    <!-- 详情内容 -->
  </view>
 </view>
 ```
 **替换为：**
 ```vue
 <!-- Detail / Edit modal -->
 <view v-if="showDetail && detailMember" class="modal-mask" @tap.self="closeModal">
  <view class="modal">
    <!-- Header with close -->
    <view class="modal-header">
      <text class="modal-title">会员详情</text>
      <text class="modal-close-btn" @tap="closeModal">×</text>
    </view>
    <!-- Tab bar -->
    <view class="tab-bar">
      <view
        class="tab-item"
        :class="{ 'tab-item--active': activeTab === 'detail' }"
        @tap="switchTab('detail')"
      >
        <text class="tab-text">详情</text>
      </view>
      <view
        class="tab-item"
        :class="{ 'tab-item--active': activeTab === 'edit' }"
        @tap="switchTab('edit')"
      >
        <text class="tab-text">编辑</text>
      </view>
    </view>
    <!-- Tab: 详情 -->
    <view v-if="activeTab === 'detail'" class="tab-content">
      <!-- 头像区 -->
      <view class="detail-header">
        <view class="detail-avatar">
          <image v-if="detailMember.avatarUrl" class="avatar-img" :src="detailMember.avatarUrl" mode="aspectFill" />
          <view v-else class="avatar-placeholder avatar-placeholder--lg">
            <text class="avatar-text avatar-text--lg">{{ (detailMember.nickname || '?').slice(0, 1) }}</text>
          </view>
        </view>
        <text class="detail-name">{{ detailMember.nickname || '未知用户' }}</text>
        <text class="detail-openid" @tap="copyOpenid(detailMember.openid)">{{ detailMember.openid }}</text>
        <text class="detail-phone">{{ detailMember.phone || '未绑定手机' }}</text>
      </view>
      <!-- 会员卡信息（有卡时） -->
      <view v-if="detailMembership" class="membership-card">
        <view class="membership-card-header">
          <text class="membership-card-name">{{ detailMembership.cardType.name }}</text>
          <text class="membership-card-badge" :class="'badge--' + detailMembership.status">
            {{ statusLabel(detailMembership.status) }}
          </text>
        </view>
        <view class="membership-card-info">
          <text class="membership-info-item">有效期：{{ formatDate(detailMembership.startDate) }} - {{ formatDate(detailMembership.expireDate) }}</text>
          <text v-if="detailMembership.remainingTimes != null" class="membership-info-item">
            剩余：{{ detailMembership.remainingTimes }} 次
          </text>
        </view>
      </view>
      <!-- 无卡时 -->
      <view v-else class="no-membership">
        <text class="no-membership-text">暂无会员卡</text>
        <view class="no-membership-btn" @tap="goEdit">
          <text class="no-membership-btn-text">去开卡</text>
        </view>
      </view>
      <!-- 预约统计 -->
      <view class="detail-stats">
        <view class="detail-stat">
          <text class="detail-stat-value">{{ detailMember.totalBookings }}</text>
          <text class="detail-stat-label">总预约</text>
        </view>
        <view class="detail-stat">
          <text class="detail-stat-value">{{ detailMember.completedBookings }}</text>
          <text class="detail-stat-label">已完成</text>
        </view>
        <view class="detail-stat">
          <text class="detail-stat-value">{{ detailMember.cancelledBookings }}</text>
          <text class="detail-stat-label">已取消</text>
        </view>
      </view>
      <!-- 清空卡按钮（有卡时） -->
      <view v-if="detailMembership" class="danger-zone">
        <view class="danger-btn" @tap="onClearMembership">
          <text class="danger-btn-text">解除会员卡</text>
        </view>
      </view>
    </view>
    <!-- Tab: 编辑 -->
    <view v-if="activeTab === 'edit'" class="tab-content">
      <!-- 加载中 -->
      <view v-if="editLoading" class="edit-loading">
        <text class="edit-loading-text">加载中...</text>
      </view>
      <!-- 编辑表单 -->
      <view v-else class="edit-form">
        <!-- 卡种选择 -->
        <view class="form-item">
          <text class="form-label">卡种</text>
          <picker
            class="form-picker"
            mode="selector"
            :value="editForm.cardTypeIndex"
            :range="editCardTypes"
            range-key="name"
            @change="onCardTypeChange"
          >
            <view class="form-picker-inner">
              <text class="form-picker-text">{{ editCardTypes[editForm.cardTypeIndex]?.name || '请选择' }}</text>
              <text class="form-picker-arrow">▾</text>
            </view>
          </picker>
        </view>
        <!-- 剩余次数（TIMES/TRIAL） -->
        <view v-if="isTimeBasedCard" class="form-item">
          <text class="form-label">剩余次数</text>
          <input
            class="form-input"
            type="number"
            v-model="editForm.remainingTimes"
            placeholder="请输入剩余次数"
          />
        </view>
        <!-- 生效日期 -->
        <view class="form-item">
          <text class="form-label">生效日期</text>
          <picker
            class="form-picker"
            mode="date"
            :value="editForm.startDate"
            @change="(e) => onStartDateChange(e)"
          >
            <view class="form-picker-inner">
              <text class="form-picker-text">{{ editForm.startDate }}</text>
            </view>
          </picker>
        </view>
        <!-- 有效期至 -->
        <view class="form-item">
          <text class="form-label">有效期至</text>
          <picker
            class="form-picker"
            mode="date"
            :value="editForm.expireDate"
            @change="(e) => onExpireDateChange(e)"
          >
            <view class="form-picker-inner">
              <text class="form-picker-text">{{ editForm.expireDate }}</text>
            </view>
          </picker>
        </view>
        <!-- 保存按钮 -->
        <view class="edit-submit">
          <view
            class="submit-btn"
            :class="{ 'submit-btn--disabled': editSubmitting }"
            @tap="onSaveMembership"
          >
            <text class="submit-btn-text">{{ editSubmitting ? '保存中...' : '保存' }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
 </view>
 ```
 #### 5.2 Script 改动
 新增以下状态：
 > 注意：在 `import { ref, onMounted, onUnmounted }` 后添加 `computed`：
 > `import { ref, computed, onMounted, onUnmounted } from 'vue'`
 ```typescript
 const activeTab = ref<'detail' | 'edit'>('detail')
 const detailMembership = ref<any>(null)   // 当前会员卡数据
 const editLoading = ref(false)
 const editSubmitting = ref(false)
 const editCardTypes = ref<any[]>([])       // 卡种列表（去获取）
 const editForm = ref({
  cardTypeIndex: 0,
  cardTypeId: '',
  remainingTimes: null as number | null,
  startDate: '',
  expireDate: '',
  manuallyEditedExpire: false,  // 用户手动修改过 expireDate 时为 true
 })
 // 是否为次数卡（TIMES / TRIAL），依赖 cardTypeIndex
 const isTimeBasedCard = computed(() => {
  const card = editCardTypes.value[editForm.value.cardTypeIndex]
  return card && (card.type === 'TIMES' || card.type === 'TRIAL')
 })
 // 工具函数
 function formatDate(dateStr: string): string {
  if (!dateStr) return '-'
  return dateStr.slice(0, 10)
 }
 function statusLabel(status: string): string {
  const map: Record<string, string> = {
    ACTIVE: '有效',
    EXPIRED: '已过期',
    USED_UP: '已用完',
  }
  return map[status] || status
 }
 // 懒加载会员卡数据
 async function loadDetailMembership(userId: string) {
  detailMembership.value = null
  try {
    const result = await adminStore.getUserMembership(userId)
    detailMembership.value = result.membership
  } catch {}
 }
 function switchTab(tab: 'detail' | 'edit') {
  activeTab.value = tab
  if (tab === 'edit') {
    // 切换到编辑 Tab 时加载会员卡数据和卡种列表
    if (!editCardTypes.value.length) {
      adminStore.fetchCardTypes().then((types) => {
        editCardTypes.value = types
      })
    }
    // 如果还没加载 membership，先加载
    if (!detailMembership.value) {
      loadDetailMembership(detailMember.value!.userId).then(() => {
        initEditForm()
      })
    } else {
      initEditForm()
    }
  }
 }
 function initEditForm() {
  const m = detailMembership.value
  const types = editCardTypes.value
  if (m) {
    // 有卡：预填充
    const idx = types.findIndex((t) => t.id === m.cardTypeId)
    editForm.value = {
      cardTypeIndex: idx >= 0 ? idx : 0,
      cardTypeId: m.cardTypeId,
      remainingTimes: m.remainingTimes,
      startDate: m.startDate.slice(0, 10),
      expireDate: m.expireDate.slice(0, 10),
      manuallyEditedExpire: false,
    }
  } else {
    // 无卡：默认选中第一个卡种
    editForm.value = {
      cardTypeIndex: 0,
      cardTypeId: types[0]?.id || '',
      remainingTimes: types[0]?.totalTimes ?? null,
      startDate: formatDate2(new Date()),
      expireDate: calculateExpireDate(formatDate2(new Date()), types[0]?.durationDays ?? 30),
      manuallyEditedExpire: false,
    }
  }
 }
 function formatDate2(date: Date): string {
  const y = date.getFullYear()
  const m = String(date.getMonth() + 1).padStart(2, '0')
  const d = String(date.getDate()).padStart(2, '0')
  return `${y}-${m}-${d}`
 }
 function calculateExpireDate(startDate: string, durationDays: number): string {
  const d = new Date(startDate)
  d.setDate(d.getDate() + durationDays)
  return formatDate2(d)
 }
 function onCardTypeChange(e: { detail: { value: number } }) {
  const idx = e.detail.value
  const cardType = editCardTypes.value[idx]
  editForm.value.cardTypeIndex = idx
  editForm.value.cardTypeId = cardType.id
  // 自动填充次数和有效期（仅当用户未手动修改过有效期时）
  if (cardType.totalTimes != null) {
    editForm.value.remainingTimes = cardType.totalTimes
  }
  if (!editForm.value.manuallyEditedExpire) {
    editForm.value.startDate = formatDate2(new Date())
    editForm.value.expireDate = calculateExpireDate(
      formatDate2(new Date()),
      cardType.durationDays,
    )
  }
 }
 function onStartDateChange(e: { detail: { value: string } }) {
  editForm.value.startDate = e.detail.value
  if (!editForm.value.manuallyEditedExpire) {
    const cardType = editCardTypes.value[editForm.value.cardTypeIndex]
    if (cardType) {
      editForm.value.expireDate = calculateExpireDate(e.detail.value, cardType.durationDays)
    }
  }
 }
 function onExpireDateChange(e: { detail: { value: string } }) {
  editForm.value.expireDate = e.detail.value
  editForm.value.manuallyEditedExpire = true
 }
 function goEdit() {
  switchTab('edit')
 }
 async function onSaveMembership() {
  if (editSubmitting.value) return
  const userId = detailMember.value?.userId
  if (!userId) return
  editSubmitting.value = true
  try {
    await adminStore.updateUserMembership(userId, {
      cardTypeId: editForm.value.cardTypeId,
      remainingTimes: editForm.value.remainingTimes,
      startDate: editForm.value.startDate,
      expireDate: editForm.value.expireDate,
    })
    uni.showToast({ title: '保存成功', icon: 'success' })
    activeTab.value = 'detail'
    await loadDetailMembership(userId)
    // 刷新列表
    loadMembers(false)
  } catch {
    uni.showToast({ title: '保存失败', icon: 'none' })
  } finally {
    editSubmitting.value = false
  }
 }
 async function onClearMembership() {
  const userId = detailMember.value?.userId
  if (!userId) return
  uni.showModal({
    title: '确认解除',
    content: '确定要解除该用户的会员卡吗？',
    confirmColor: '#e64329',
    success: async (res) => {
      if (!res.confirm) return
      try {
        await adminStore.deleteUserMembership(userId)
        uni.showToast({ title: '已解除', icon: 'success' })
        showDetail.value = false
        loadMembers(false)
      } catch {
        uni.showToast({ title: '操作失败', icon: 'none' })
      }
    },
  })
 }
 function closeModal() {
  showDetail.value = false
  activeTab.value = 'detail'
  detailMembership.value = null
 }
 // 修改 openDetail
 function openDetail(m: MemberSummary) {
  detailMember.value = m
  showDetail.value = true
  detailMembership.value = null  // 重置，懒加载
  activeTab.value = 'detail'
  // 预加载 membership（详情 Tab 需要显示）
  loadDetailMembership(m.userId)
 }
 ```
 #### 5.3 样式改动
 在 `<style>` 末尾添加以下样式：
 ```scss
 /* ── Modal header ─────────────────────────── */
 .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 0 32rpx 0;
 }
 .modal-title {
  font-size: 32rpx;
  font-weight: 700;
  color: $brand-color;
 }
 .modal-close-btn {
  font-size: 48rpx;
  color: $text-hint;
  line-height: 1;
 }
 /* ── Tab bar ───────────────────────────────── */
 .tab-bar {
  display: flex;
  border-bottom: 1rpx solid $border-color;
  margin-bottom: 32rpx;
 }
 .tab-item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-bottom: 16rpx;
  position: relative;
 }
 .tab-item--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48rpx;
  height: 4rpx;
  background: $accent-color;
  border-radius: 2rpx;
 }
 .tab-text {
  font-size: 28rpx;
  color: $text-hint;
 }
 .tab-item--active .tab-text {
  color: $accent-color;
  font-weight: 600;
 }
 .tab-content {
  min-height: 400rpx;
 }
 /* ── Membership card ────────────────────────── */
 .membership-card {
  background: linear-gradient(135deg, rgba($brand-color, 0.08), rgba($accent-color, 0.08));
  border: 1rpx solid rgba($brand-color, 0.15);
  border-radius: $radius-md;
  padding: 24rpx;
  margin-bottom: 24rpx;
 }
 .membership-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
 }
 .membership-card-name {
  font-size: 30rpx;
  font-weight: 700;
  color: $brand-color;
 }
 .membership-card-badge {
  font-size: 20rpx;
  padding: 4rpx 12rpx;
  border-radius: 8rpx;
 }
 .badge--ACTIVE { background: rgba(#52c41a, 0.12); color: #52c41a; }
 .badge--EXPIRED { background: rgba($text-hint, 0.12); color: $text-hint; }
 .badge--USED_UP { background: rgba(#faad14, 0.12); color: #faad14; }
 .membership-card-info {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
 }
 .membership-info-item {
  font-size: 24rpx;
  color: $text-secondary;
 }
 /* ── No membership ──────────────────────────── */
 .no-membership {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 48rpx 0;
  gap: 24rpx;
 }
 .no-membership-text {
  font-size: 28rpx;
  color: $text-hint;
 }
 .no-membership-btn {
  background: $brand-color;
  border-radius: 36rpx;
  padding: 16rpx 48rpx;
 }
 .no-membership-btn-text {
  font-size: 26rpx;
  font-weight: 600;
  color: $accent-color;
 }
 /* ── Danger zone ───────────────────────────── */
 .danger-zone {
  margin-top: 24rpx;
  padding-top: 24rpx;
  border-top: 1rpx solid $border-color;
 }
 .danger-btn {
  width: 100%;
  height: 80rpx;
  background: rgba(230, 67, 41, 0.08);
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .danger-btn-text {
  font-size: 26rpx;
  color: #e64329;
 }
 /* ── Edit form ─────────────────────────────── */
 .edit-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80rpx 0;
 }
 .edit-loading-text {
  font-size: 26rpx;
  color: $text-hint;
 }
 .edit-form {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
 }
 .form-item {
  display: flex;
  align-items: center;
  gap: 20rpx;
 }
 .form-label {
  font-size: 26rpx;
  color: $text-secondary;
  width: 140rpx;
  flex-shrink: 0;
 }
 .form-input {
  flex: 1;
  height: 72rpx;
  background: $bg-page;
  border-radius: $radius-sm;
  padding: 0 20rpx;
  font-size: 26rpx;
  color: $text-primary;
 }
 .form-picker {
  flex: 1;
  height: 72rpx;
  background: $bg-page;
  border-radius: $radius-sm;
  display: flex;
  align-items: center;
 }
 .form-picker-inner {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx;
 }
 .form-picker-text {
  font-size: 26rpx;
  color: $text-primary;
 }
 .form-picker-arrow {
  font-size: 20rpx;
  color: $text-hint;
 }
 .edit-submit {
  margin-top: 16rpx;
 }
 .submit-btn {
  width: 100%;
  height: 88rpx;
  background: $brand-color;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .submit-btn--disabled {
  opacity: 0.5;
 }
 .submit-btn-text {
  font-size: 28rpx;
  font-weight: 600;
  color: $accent-color;
 }
 ```
 ---
 ## 自检清单
 - [ ] 后端接口路径正确：`/admin/members/:userId/membership`（不是 `/admin/membership/...`）
 - [ ] `UpdateUserMembershipDto` 字段与前端 `editForm` 一致
 - [ ] `isTimeBasedCard` 计算逻辑：`cardType.type === 'TIMES' || cardType.type === 'TRIAL'`
 - [ ] `detailMembership` 在 `openDetail` 时懒加载，不阻塞弹窗打开
 - [ ] `deleteUserMembership` 是软删除（status → EXPIRED），不是物理删除
 - [ ] `switchTab('edit')` 时 initEditForm 使用 `detailMembership.value`（可能为 null）
 - [ ] 卡种 picker 变化时，`remainingTimes` 只对 TIMES/TRIAL 类型生效
--- a/docs/superpowers/specs/2026-04-07-member-card-edit-design.md
+++ b/docs/superpowers/specs/2026-04-07-member-card-edit-design.md
@@ -0,0 +1,186 @@
 # 会员卡编辑功能设计
 **日期：** 2026-04-07
 **状态：** 已批准
 ---
 ## 1. 概述
 在管理后台会员列表中，点击会员 item 时弹出的详情弹窗增加"编辑"能力。管理员可编辑指定用户的卡种、卡有效期、剩余次数，也可清空/解除会员卡。
 **前置约束：**
 - 一个用户只能拥有一张会员卡
 - 支持清空卡（解除会员资格）
 ---
 ## 2. 交互设计
 ### 2.1 弹窗结构
 ```
 ┌─────────────────────────────────┐
 │  会员详情                    [×] │
 ├──────────┬──────────────────────┤
 │  详情    │         编辑          │  ← Tab 切换
 ├──────────┴──────────────────────┤
 │  头像 / 昵称 / OpenID / 手机号   │
 │  ─────────────────────────────  │
 │  会员卡信息区（根据 Tab 显示）   │
 │  预约统计（总/完成/取消）         │
 │  ─────────────────────────────  │
 │  [关闭]                         │
 └─────────────────────────────────┘
 ```
 ### 2.2 无卡用户交互
 - 详情 Tab 显示"暂无会员卡"提示
 - 显示"去开卡"按钮，点击切换到编辑 Tab
 - 编辑 Tab 中卡种 picker 默认选中列表第一项，有效期自动计算
 ### 2.3 状态说明
 | 场景 | Tab 初始显示 | 编辑表单状态 |
 |------|-------------|-------------|
 | 有卡用户 | 详情 Tab | 预填充当前数据 |
 | 无卡用户 | 详情 Tab（提示无卡） | 空白表单，卡种默认选中第一项 |
 ---
 ## 3. 表单字段
 | 字段 | 组件 | 条件 | 说明 |
 |------|------|------|------|
 | 卡种 | picker | 必填 | 从 `CardType` 表读取，按 sortOrder 排序 |
 | 剩余次数 | input (number) | TIMES / TRIAL 类型 | 默认填充卡种的 totalTimes |
 | 生效日期 | date picker | 必填 | 默认当天 |
 | 有效期至 | date picker | 必填 | 自动计算，支持手动调整 |
 ### 3.1 卡种切换逻辑
 切换卡种时：
 1. `remainingTimes` 自动填充新卡种的 `totalTimes`（TIMES/TRIAL 类型）
 2. `expireDate` 按新卡种 `durationDays` 重新计算起始日期
 3. 编辑器内手动修改过 `expireDate` 时，不再自动覆盖
 ---
 ## 4. API 设计
 ### 4.1 获取用户会员卡
 ```
 GET /admin/members/:userId/membership
 ```
 **响应：**
 ```json
 {
  "userId": "uuid",
  "membership": {
    "id": "uuid",
    "cardTypeId": "uuid",
    "remainingTimes": 10,
    "startDate": "2026-01-01",
    "expireDate": "2026-04-01",
    "status": "ACTIVE",
    "cardType": { ... }
  } | null
 }
 ```
 ### 4.2 创建或更新会员卡
 ```
 PUT /admin/members/:userId/membership
 ```
 **请求体：**
 ```json
 {
  "cardTypeId": "uuid",
  "remainingTimes": 10,
  "startDate": "2026-04-07",
  "expireDate": "2026-07-07"
 }
 ```
 **业务逻辑：**
 - 若该用户已有 membership → 更新
 - 若该用户无 membership → 创建新的
 - `status` 由后端根据 expireDate 和 remainingTimes 自动计算
 ### 4.3 解除会员卡
 ```
 DELETE /admin/members/:userId/membership
 ```
 **业务逻辑：**
 - 将 membership 的 `status` 标记为 `EXPIRED`（软删除，便于审计）
 - 不物理删除记录
 ---
 ## 5. 数据模型
 ### 5.1 会员卡状态自动计算规则
 ```
 if (expireDate < now) → EXPIRED
 else if (remainingTimes === 0) → USED_UP
 else → ACTIVE
 ```
 ### 5.2 变更日志
 通过现有的 `BookingStatusHistory` 表记录操作（tbd: 是否需要独立 `MembershipChangeLog` 表，待实现时确认）。
 ---
 ## 6. 错误处理
 | 场景 | 处理 |
 |------|------|
 | 卡种不存在 | 后端返回 404，前端提示"卡种不存在" |
 | 有效期早于生效日期 | 前端表单校验失败，提示"有效期不能早于生效日期" |
 | 次数为负数 | 前端表单校验失败，提示"次数不能为负数" |
 | 网络错误 | Toast 提示"网络错误，请重试" |
 | 清空卡确认 | 弹出确认对话框，提示"确定要解除该用户的会员卡吗？" |
 ---
 ## 7. 涉及改动
 ### 后端
 - `packages/server/src/membership/membership.controller.ts` — 新增三个 admin 接口
 - `packages/server/src/membership/membership.service.ts` — 新增 `getUserMembership` / `updateUserMembership` / `deleteUserMembership`
 - `packages/server/src/user/user.controller.ts` — 无改动（列表接口保持不变）
 ### 前端
 - `packages/app/src/stores/admin.ts` — 新增三个 store action
 - `packages/app/src/pages/admin/members.vue` — 将详情弹窗改造为 Tab 模式，新增编辑表单
 ---
 ## 8. UI 细节
 ### 8.1 Tab 切换
 - 详情/编辑 Tab 横向排列，激活态有下划线指示
 - 无卡用户点击"去开卡"后，自动切到编辑 Tab
 ### 8.2 编辑表单提交
 - 保存成功后 Toast 提示"保存成功"
 - 自动切回详情 Tab 并刷新数据
 - 保存按钮点击后置灰，防止重复提交
 ### 8.3 清空卡
 - 需二次确认
 - 成功后弹窗关闭，列表自动刷新
--- a/package.json
+++ b/package.json
@@ -22,5 +22,6 @@
      "@prisma/engines",
      "prisma"
    ]
-  }
+  },
  "version": "0.0.2"
 }
--- a/packages/app/src/components/AboutSection.vue
+++ b/packages/app/src/components/AboutSection.vue
@@ -0,0 +1,84 @@
 <template>
  <view class="about-section">
    <view class="section-header">
      <view>
        <text class="section-title">老师介绍</text>
      </view>
      <text class="section-more" @tap="goToDetail">查看详情</text>
    </view>
    <view class="teacher-card" @tap="goToDetail">
      <view class="teacher-main">
        <view class="cover-wrap">
          <image class="teacher-cover" :src="teacher.avatar" mode="aspectFill" />
        </view>
        <view class="teacher-content">
          <view class="teacher-heading">
            <view>
              <view class="name-row">
                <text class="teacher-name">{{ teacher.name }}</text>
              </view>
              <text class="teacher-title">{{ teacher.title }}</text>
            </view>
          </view>
          <view class="specialty-row">
            <text class="specialty-text">{{ teacher.specialties.join(' · ') }}</text>
          </view>
          <text class="teacher-intro">{{ teacher.intro }}</text>
        </view>
      </view>
      <view class="action-row">
        <view class="secondary-btn" @tap.stop="goToDetail">
          <text class="secondary-btn-text">查看详情</text>
        </view>
        <view class="primary-btn" @tap.stop="goToBooking">
          <text class="primary-btn-text">立即预约</text>
        </view>
      </view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import { irisProfile } from '../utils/teacher'
 const teacher = irisProfile
 function goToDetail() {
  uni.navigateTo({ url: `/pages/teacher/detail?id=${teacher.id}` })
 }
 function goToBooking() {
  uni.switchTab({ url: '/pages/booking/index' })
 }
 </script>
 <style lang="scss" scoped>
 .about-section { margin: 36rpx 32rpx 0; }
 .section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; }
 .section-title { font-size: 30rpx; font-weight: 500; color: #514943; }
 .section-more { font-size: 23rpx; color: #8b817b; padding: 8rpx 0; }
 .teacher-card { padding: 26rpx; background: #f2ebe5; border-radius: 28rpx; }
 .teacher-main { display: flex; align-items: flex-start; gap: 24rpx; }
 .cover-wrap { width: 164rpx; height: 230rpx; border-radius: 18rpx; overflow: hidden; background: #e1d4c8; flex-shrink: 0; }
 .teacher-cover { width: 100%; height: 100%; }
 .teacher-content { flex: 1; min-width: 0; }
 .name-row { margin-bottom: 8rpx; }
 .teacher-name { font-size: 34rpx; font-weight: 500; color: #514943; }
 .teacher-title { font-size: 22rpx; color: #8b817b; line-height: 1.5; }
 .specialty-row { margin: 14rpx 0 10rpx; }
 .specialty-text { font-size: 21rpx; color: #617d73; line-height: 1.6; }
 .teacher-intro { font-size: 22rpx; line-height: 1.7; color: #786b61; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
 .action-row { display: flex; gap: 16rpx; margin-top: 24rpx; }
 .secondary-btn, .primary-btn { flex: 1; height: 68rpx; border-radius: 999rpx; display: flex; align-items: center; justify-content: center; }
 .secondary-btn { background: #fbf7f3; }
 .primary-btn { background: #6b8276; }
 .secondary-btn-text { font-size: 24rpx; color: #78675c; }
 .primary-btn-text { font-size: 24rpx; font-weight: 400; color: #fff; }
 </style>
--- a/packages/app/src/components/BookingConfirmPopup.vue
+++ b/packages/app/src/components/BookingConfirmPopup.vue
@@ -36,15 +36,12 @@
      <!-- Membership card selection -->
      <view class="card-section">
        <view class="section-label-row">
-          <text class="section-label">选择扣课会员卡</text>
+          <text class="section-label">选择会员卡</text>
        </view>
        <!-- Single membership -->
        <view v-if="memberships.length === 1" class="card-single">
          <view class="card-item selected">
            <view class="card-icon-wrap">
              <text class="card-icon">💳</text>
            </view>
            <view class="card-info">
              <text class="card-name">{{ memberships[0].cardType.name }}</text>
              <text class="card-remain" v-if="memberships[0].remainingTimes !== null">
@@ -61,7 +58,7 @@
        </view>
        <!-- Multiple memberships picker -->
-        <view v-else-if="memberships.length > 1" class="card-picker-wrap">
+        <scroll-view v-else-if="memberships.length > 1" class="card-picker-wrap" scroll-y>
          <view
            v-for="m in memberships"
            :key="m.id"
@@ -69,9 +66,6 @@
            :class="{ selected: selectedMembershipId === m.id }"
            @tap="selectedMembershipId = m.id"
          >
            <view class="card-icon-wrap">
              <text class="card-icon">💳</text>
            </view>
            <view class="card-info">
              <text class="card-name">{{ m.cardType.name }}</text>
              <text class="card-remain" v-if="m.remainingTimes !== null">
@@ -85,7 +79,7 @@
              <text class="check-icon">✓</text>
            </view>
          </view>
-        </view>
+        </scroll-view>
        <!-- No memberships fallback (should not normally appear) -->
        <view v-else class="no-card-tip">
@@ -96,7 +90,9 @@
      <!-- Deduction tip -->
      <view class="deduction-tip" v-if="selectedMembership">
        <text class="deduction-text">
-          确认后将从「{{ selectedMembership.cardType.name }}」扣除 1 次课时
+          {{ selectedMembership.remainingTimes === null
            ? `「${selectedMembership.cardType.name}」有效期内不限次`
            : `确认后将从「${selectedMembership.cardType.name}」扣除 1 次课时` }}
        </text>
      </view>
@@ -105,13 +101,15 @@
        <view class="btn-outline" @tap="handleCancel">
          <text class="btn-outline-text">取消</text>
        </view>
-        <view
+        <button
          class="btn-confirm"
          :class="{ disabled: !selectedMembershipId }"
          :disabled="!selectedMembershipId || requestingSubscribe"
          :loading="requestingSubscribe"
          @tap="handleConfirm"
        >
          <text class="btn-confirm-text">确认预约</text>
-        </view>
+        </button>
      </view>
    </view>
  </view>
@@ -120,6 +118,7 @@
 <script setup lang="ts">
 import { ref, computed, watch } from 'vue'
 import type { TimeSlotWithBookingStatus, MembershipWithCardType } from '@mp-pilates/shared'
 import { requestBookingCreatedSubscriptionMessage } from '../utils/wechat-subscription'
 const props = defineProps<{
  visible: boolean
@@ -134,13 +133,14 @@ const emit = defineEmits<{
 }>()
 const selectedMembershipId = ref<string>('')
 const requestingSubscribe = ref(false)
 // Auto-select the first membership when popup opens or memberships list changes
 watch(
  [() => props.visible, () => props.memberships],
  ([visible, memberships]) => {
-    if (visible && memberships.length > 0) {
+    if (visible) {
-      selectedMembershipId.value = memberships[0].id
+      selectedMembershipId.value = memberships[0]?.id ?? ''
    }
  },
  { immediate: true },
@@ -150,8 +150,22 @@ const selectedMembership = computed(() =>
  props.memberships.find((m) => m.id === selectedMembershipId.value) ?? null,
 )
-function handleConfirm() {
+async function handleConfirm() {
  if (!props.timeSlot || !selectedMembershipId.value) return
  if (requestingSubscribe.value) return
  requestingSubscribe.value = true
  try {
    await requestBookingCreatedSubscriptionMessage()
  } catch (err: unknown) {
    const message = err instanceof Error ? err.message : '订阅消息授权失败'
    uni.showToast({ title: message, icon: 'none' })
    return
  } finally {
    requestingSubscribe.value = false
  }
  emit('confirm', {
    timeSlotId: props.timeSlot.id,
    membershipId: selectedMembershipId.value,
@@ -169,261 +183,45 @@ function handleMaskTap() {
 </script>
 <style lang="scss" scoped>
-.popup-mask {
+.popup-mask { position: fixed; inset: 0; background: rgba(56, 48, 42, 0.32); z-index: 1000; display: flex; align-items: flex-end; justify-content: center; }
-  position: fixed;
+.popup-panel { width: 100%; box-sizing: border-box; background: #fbf9f6; border-radius: 36rpx 36rpx 0 0; padding: 28rpx 32rpx calc(24rpx + env(safe-area-inset-bottom)); }
-  top: 0;
+.popup-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; }
-  left: 0;
+.popup-title { font-size: 32rpx; font-weight: 500; color: #514943; }
-  right: 0;
+.close-btn { width: 60rpx; height: 60rpx; display: flex; align-items: center; justify-content: center; }
-  bottom: 0;
+.close-icon { font-size: 26rpx; color: #8b817b; }
-  background: rgba(0, 0, 0, 0.45);
+.info-section { padding: 24rpx; background: #f1e8e1; border-radius: 24rpx; display: flex; flex-direction: column; gap: 14rpx; }
-  z-index: 1000;
+.info-row { display: flex; align-items: center; gap: 20rpx; }
-  display: flex;
+.info-label { font-size: 24rpx; color: #8b7b70; width: 64rpx; flex-shrink: 0; }
-  align-items: flex-end;
+.info-value { font-size: 26rpx; color: #6f5c50; font-weight: 400; }
-  justify-content: center;
+.divider { height: 24rpx; }
-}
+.card-section { display: flex; flex-direction: column; gap: 16rpx; }
-
+.section-label { font-size: 26rpx; color: #514943; font-weight: 500; }
-.popup-panel {
+.card-picker-wrap { height: 250rpx; }
  width: 100%;
  background: #fff;
  border-radius: 32rpx 32rpx 0 0;
  padding: 32rpx 32rpx calc(32rpx + env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: 0;
 }
 .popup-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32rpx;
 }
 .popup-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #1a1a1a;
 }
 .close-btn {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: $primary-selected-bg;
  border-radius: 50%;
 }
 .close-icon {
  font-size: 24rpx;
  color: #999;
 }
 /* Info rows */
 .info-section {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
  margin-bottom: 28rpx;
 }
 .info-row {
  display: flex;
  flex-direction: row;
  align-items: center;
 }
 .info-label {
  font-size: 28rpx;
  color: #999;
  width: 80rpx;
  flex-shrink: 0;
 }
 .info-value {
  font-size: 28rpx;
  color: #222;
  font-weight: 500;
 }
 .divider {
  height: 1rpx;
  background: $primary-border;
  margin: 8rpx 0 28rpx;
 }
 /* Card selection */
 .card-section {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  margin-bottom: 24rpx;
 }
 .section-label-row {
  margin-bottom: 8rpx;
 }
 .section-label {
  font-size: 28rpx;
  color: #666;
  font-weight: 500;
 }
 .card-single,
 .card-picker-wrap {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
 }
 .card-item {
-  display: flex;
+  display: flex; align-items: center; padding: 22rpx 24rpx; border-radius: 24rpx;
-  flex-direction: row;
+  border: 2rpx solid #eee8e3; background: #fff; gap: 20rpx; box-sizing: border-box;
-  align-items: center;
+  &.selected { border-color: #a5b8ab; background: #f0f4ee; }
  padding: 24rpx 20rpx;
  border-radius: 16rpx;
  border: 2rpx solid $primary-border;
  background: $primary-bg;
  gap: 20rpx;
  transition: border-color 0.15s, background 0.15s;
  &.selected {
    border-color: $primary-dark;
    background: $primary-selected-bg;
  }
 }
-
+.card-picker-wrap .card-item { margin-bottom: 12rpx; }
-.card-icon-wrap {
+.card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
-  width: 60rpx;
+.card-name { font-size: 26rpx; font-weight: 400; color: #514943; overflow-wrap: anywhere; }
-  height: 60rpx;
+.card-remain { font-size: 22rpx; color: #8b817b; }
-  border-radius: 14rpx;
+.check-mark { width: 36rpx; height: 36rpx; border-radius: 50%; background: #6b8276; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
-  background: linear-gradient(135deg, $primary-color, $primary-dark);
+.check-icon { font-size: 22rpx; color: #fff; }
-  display: flex;
+.no-card-tip { padding: 24rpx; text-align: center; }
-  align-items: center;
+.no-card-text { font-size: 24rpx; color: #8b817b; }
-  justify-content: center;
+.deduction-tip { padding: 18rpx 4rpx; }
-  flex-shrink: 0;
+.deduction-text { font-size: 22rpx; color: #8b817b; line-height: 1.6; }
-}
+.action-row { display: flex; gap: 20rpx; margin-top: 12rpx; }
-
+.btn-outline { flex: 1; height: 88rpx; border-radius: 999rpx; background: #f0eae4; display: flex; align-items: center; justify-content: center; }
-.card-icon {
+.btn-outline-text { font-size: 28rpx; color: #78675c; font-weight: 400; }
  font-size: 32rpx;
 }
 .card-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6rpx;
 }
 .card-name {
  font-size: 28rpx;
  font-weight: 600;
  color: #222;
 }
 .card-remain {
  font-size: 22rpx;
  color: #999;
 }
 .check-mark {
  width: 44rpx;
  height: 44rpx;
  border-radius: 50%;
  background: $primary-dark;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
 }
 .check-icon {
  font-size: 24rpx;
  color: #fff;
  font-weight: 700;
 }
 .no-card-tip {
  padding: 24rpx;
  text-align: center;
 }
 .no-card-text {
  font-size: 26rpx;
  color: #bbb;
 }
 /* Deduction tip */
 .deduction-tip {
  background: $primary-selected-bg;
  border-radius: 12rpx;
  padding: 16rpx 20rpx;
  margin-bottom: 28rpx;
 }
 .deduction-text {
  font-size: 24rpx;
  color: $primary-dark;
  line-height: 1.5;
 }
 /* Action buttons */
 .action-row {
  display: flex;
  flex-direction: row;
  gap: 20rpx;
  margin-top: 8rpx;
 }
 .btn-outline {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  border: 2rpx solid $primary-border;
  display: flex;
  align-items: center;
  justify-content: center;
  &:active {
    background: #f5f5f5;
  }
 }
 .btn-outline-text {
  font-size: 30rpx;
  color: #666;
  font-weight: 500;
 }
 .btn-confirm {
-  flex: 2;
+  flex: 2; height: 88rpx; padding: 0; margin: 0; border: none; line-height: 1;
-  height: 88rpx;
+  border-radius: 999rpx; background: #6b8276;
-  border-radius: 44rpx;
+  display: flex; align-items: center; justify-content: center;
-  background: linear-gradient(135deg, $primary-color, $primary-dark);
+  &::after { border: none; }
-  display: flex;
+  &:active { background: #597264; }
-  align-items: center;
+  &.disabled { background: #d9dfd8; }
  justify-content: center;
  &:active {
    opacity: 0.85;
  }
  &.disabled {
    background: $primary-border;
  }
 }
 .btn-confirm-text {
  font-size: 30rpx;
  color: #fff;
  font-weight: 600;
  letter-spacing: 1rpx;
  .disabled & {
    color: #bbb;
  }
 }
 .btn-confirm-text { font-size: 28rpx; color: #fff; font-weight: 500; .disabled & { color: #677467; } }
 </style>
--- a/packages/app/src/components/BrandBanner.vue
+++ b/packages/app/src/components/BrandBanner.vue
@@ -14,28 +14,36 @@
      <!-- Circular logo -->
      <view class="logo-circle">
        <image
-          v-if="studioInfo?.logo"
+          v-if="logoImage"
          class="logo-img"
-          :src="studioInfo.logo"
+          :src="logoImage"
-          mode="aspectFit"
+          mode="aspectFill"
        />
-        <text v-else class="logo-placeholder">FC</text>
+        <view v-else class="logo-placeholder">
          <text>{{ studioName.slice(0, 1) || 'F' }}</text>
        </view>
      </view>
      <!-- Studio name -->
-      <text class="studio-name">{{ studioInfo?.name || 'Focus Core' }}</text>
+      <text class="studio-name">{{ studioName }}</text>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { StudioConfig } from '@mp-pilates/shared'
-defineProps<{
+const props = defineProps<{
  studioInfo: StudioConfig | null
 }>()
-const bannerImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/bannerBg.jpg'
+const fallbackBannerImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/bannerBg.jpg'
 const fallbackLogoImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/logo.jpg'
 const bannerImage = computed(() => props.studioInfo?.bannerUrl || fallbackBannerImage)
 const logoImage = computed(() => props.studioInfo?.logo || fallbackLogoImage)
 const studioName = computed(() => props.studioInfo?.name || 'Focus Core')
 </script>
 <style lang="scss" scoped>
@@ -89,15 +97,22 @@ const bannerImage = 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/
 }
 .logo-img {
-  width: 160rpx;
+  width: 200rpx;
-  height: 160rpx;
+  height: 200rpx;
  border-radius: 50%;
 }
 .logo-placeholder {
  width: 200rpx;
  height: 200rpx;
  border-radius: 50%;
  font-size: 64rpx;
  font-weight: 800;
  color: #333;
  letter-spacing: 4rpx;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .studio-name {
--- a/packages/app/src/components/CardShop.vue
+++ b/packages/app/src/components/CardShop.vue
@@ -3,7 +3,7 @@
    <!-- Section header -->
    <view class="section-header">
      <text class="section-title">会员卡</text>
-      <text class="section-action" @tap="goToAllCards">全部</text>
+      <text class="section-action" @tap="goToAllCards">全部 ›</text>
    </view>
    <!-- Loading skeleton -->
@@ -30,41 +30,26 @@
        class="card-row"
        @tap="goToDetail(card.id)"
      >
-        <!-- Card Cover — horizontal premium design -->
+        <!-- Card Cover — image if available, gradient fallback -->
-        <view class="card-cover" :class="getCardCoverClass(card.type)">
+        <view class="card-cover" :class="card.coverUrl ? '' : getCardCoverClass(card.type)">
-          <!-- Left accent bar -->
+          <image
-          <view class="cover-accent-bar" />
+            v-if="card.coverUrl"
-
+            class="card-cover-img"
-          <!-- Decorative circles -->
+            :src="card.coverUrl"
-          <view class="cover-deco cover-deco--tl" />
+            mode="aspectFill"
-          <view class="cover-deco cover-deco--br" />
+          />
-
+          <template v-else>
-          <!-- CSS Icon -->
+            <text class="cover-label">{{ card.type === CardTypeCategory.TRIAL ? '体验' : card.type === CardTypeCategory.DURATION ? '期限卡' : '次卡' }}</text>
-          <view class="cover-icon" :class="`cover-icon--${card.type}`" />
+          </template>
          <!-- Right side: text content -->
          <view class="cover-content">
            <view class="cover-badge">
              <text class="cover-badge-text">{{ getCardTypeLabel(card.type) }}</text>
            </view>
            <text class="cover-name">{{ card.name }}</text>
            <view class="cover-price-row">
              <text class="cover-currency">¥</text>
              <text class="cover-price">{{ formatPrice(card.price) }}</text>
            </view>
            <text
              v-if="card.originalPrice && card.originalPrice > card.price"
              class="cover-original"
            >
              ¥{{ formatPrice(card.originalPrice) }}
            </text>
          </view>
        </view>
        <!-- Card info — aligns with card-cover height -->
        <view class="card-info">
          <view class="info-top">
            <view class="card-name-row">
              <text class="card-name">{{ card.name }}</text>
              <text v-if="isRenewable(card)" class="renew-tag">续</text>
            </view>
            <text class="card-validity">有效期 {{ card.durationDays }} 天</text>
          </view>
          <view class="info-bottom">
@@ -73,7 +58,7 @@
              <text class="card-times-unit">课时</text>
            </view>
            <view class="price-row">
-              <text class="price-current">¥{{ formatPrice(card.price) }}</text>
+              <text class="price-current">¥{{ formatPrice(invite.price(card.price)) }}</text>
              <text
                v-if="card.originalPrice && card.originalPrice > card.price"
                class="price-original"
@@ -84,6 +69,7 @@
          </view>
        </view>
        <text v-if="invite.eligible" class="renew-tag">95 折</text>
        <!-- Arrow -->
        <text class="card-arrow">›</text>
      </view>
@@ -97,23 +83,51 @@
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { useInviteStore } from '../stores/invite'
 import { computed, ref, onMounted } from 'vue'
 import type { CardType } from '@mp-pilates/shared'
 import { CardTypeCategory } from '@mp-pilates/shared'
 import { get } from '../utils/request'
-import { formatPrice, getCardTypeLabel, getCardCoverClass } from '../utils/format'
+import { formatPrice, getCardCoverClass } from '../utils/format'
 import { useUserStore } from '../stores/user'
 const invite = useInviteStore()
 const userStore = useUserStore()
 const cardTypes = ref<CardType[]>([])
 const loading = ref(false)
 const hasLoaded = ref(false)
 const renewableCardTypeIds = computed(() => {
  const ids = new Set<string>()
  for (const membership of userStore.memberships) {
    if (membership.cardType.type !== CardTypeCategory.TRIAL) {
      ids.add(membership.cardTypeId)
    }
  }
  return ids
 })
 function isRenewable(card: CardType): boolean {
  return card.type !== CardTypeCategory.TRIAL && renewableCardTypeIds.value.has(card.id)
 }
 async function fetchCardTypes() {
  // Stale-While-Revalidate: only show skeleton on first load
  // Subsequent refreshes silently update data in background
  if (!hasLoaded.value) {
    loading.value = true
  }
  try {
    const result = await get<CardType[]>('/membership/card-types')
    cardTypes.value = result
      .filter((c) => c.isActive)
      .sort((a, b) => a.sortOrder - b.sortOrder)
    hasLoaded.value = true
  } catch {
    // Only show error toast on first load; silent fail on background refresh
    if (!hasLoaded.value) {
      uni.showToast({ title: '加载会员卡失败', icon: 'none' })
    }
  } finally {
    loading.value = false
  }
@@ -134,442 +148,36 @@ function goToAllCards() {
 </script>
 <style lang="scss" scoped>
-.card-shop {
+.card-shop { margin: 36rpx 32rpx 0; }
-  background: #ffffff;
+.section-header { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; margin-bottom: 20rpx; }
-  margin-top: 16rpx;
+.section-title { font-size: 30rpx; font-weight: 500; color: #514943; }
-  padding-bottom: 20rpx;
+.section-action { font-size: 23rpx; color: #8b817b; padding: 8rpx 0; }
-}
+.card-list { padding: 0 24rpx; border-radius: 28rpx; background: #fff; border: 1rpx solid #eee8e3; }
-
+.card-row { display: flex; align-items: center; gap: 20rpx; padding: 26rpx 0; border-bottom: 1rpx solid #f0ebe6; &:last-child { border: none; } }
-/* ── Section header ── */
+.card-cover { width: 132rpx; height: 148rpx; border-radius: 16rpx; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f0e6de; }
-.section-header {
+.card-cover-img { width: 100%; height: 100%; }
-  display: flex;
+.cover--times { background: #f0e6de; }
-  align-items: center;
+.cover--duration { background: #e9ede5; }
-  justify-content: space-between;
+.cover--trial { background: #f2e4e0; }
-  padding: 32rpx 32rpx 20rpx;
+.cover-label { font-family: 'Songti SC', 'STSong', serif; font-size: 28rpx; color: #857062; letter-spacing: 3rpx; }
-}
+.card-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14rpx; }
-
+.info-top { display: flex; flex-direction: column; gap: 8rpx; }
-.section-title {
+.card-name-row { display: flex; align-items: baseline; gap: 8rpx; }
-  font-size: 36rpx;
+.card-name { min-width: 0; font-size: 27rpx; font-weight: 400; color: #514943; line-height: 1.5; overflow-wrap: anywhere; }
-  font-weight: 700;
+.renew-tag { flex-shrink: 0; font-size: 18rpx; color: #617d73; background: #edf2ec; padding: 3rpx 8rpx; border-radius: 6rpx; }
-  color: #222;
+.card-validity { font-size: 21rpx; color: #8b817b; }
-}
+.info-bottom { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8rpx 16rpx; }
-
+.card-times { display: flex; align-items: baseline; gap: 4rpx; }
-.section-action {
+.card-times-value { font-size: 24rpx; color: #6f655e; }
-  font-size: 26rpx;
+.card-times-unit { font-size: 20rpx; color: #8b817b; }
-  color: #999;
+.price-row { display: flex; align-items: baseline; flex-wrap: wrap; gap: 8rpx; }
-  padding: 8rpx 24rpx;
+.price-current { font-size: 30rpx; font-weight: 500; color: #8b6c5b; font-variant-numeric: tabular-nums; }
-  border: 1rpx solid #ddd;
+.price-original { font-size: 20rpx; color: #a59b93; text-decoration: line-through; }
-  border-radius: 24rpx;
+.card-arrow { font-size: 32rpx; color: #b2a79e; flex-shrink: 0; }
-}
+.skeleton-card-cover { width: 132rpx; height: 148rpx; border-radius: 16rpx; flex-shrink: 0; }
-
+.skeleton-info { flex: 1; display: flex; flex-direction: column; gap: 16rpx; }
-/* ── Card list ── */
+.skeleton-line { height: 24rpx; width: 70%; border-radius: 8rpx; &--sub { width: 50%; } }
-.card-list {
+.skeleton-line, .skeleton-card-cover { background: linear-gradient(90deg, #f0eae5 25%, #faf7f3 50%, #f0eae5 75%); background-size: 400% 100%; animation: shimmer 1.4s infinite; }
-  padding: 0 32rpx;
+.empty-state { padding: 48rpx 24rpx; border-radius: 24rpx; background: #f3efea; text-align: center; }
-}
+.empty-text { font-size: 24rpx; color: #8b817b; }
 .card-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 16rpx 0;
  border-bottom: 1rpx solid rgba($brand-color, 0.08);
  &:last-child {
    border-bottom: none;
  }
 }
 /* ══════════════════════════════════════════════════════════
   CARD COVER — Horizontal premium card design
   ══════════════════════════════════════════════════════════ */
 .card-cover {
  width: 240rpx;
  height: 130rpx;
  border-radius: 16rpx;
  overflow: hidden;
  flex-shrink: 0;
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  /* Glow effect behind */
  &::before {
    content: '';
    position: absolute;
    top: -20rpx;
    left: -20rpx;
    right: -20rpx;
    bottom: -20rpx;
    background: inherit;
    filter: blur(24rpx) brightness(0.8);
    z-index: 0;
    opacity: 0.4;
  }
 }
 /* Left accent stripe */
 .cover-accent-bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 6rpx;
  background: rgba(255, 255, 255, 0.4);
  z-index: 1;
 }
 /* Decorative circles */
 .cover-deco {
  position: absolute;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  &--tl {
    width: 60rpx;
    height: 60rpx;
    top: -16rpx;
    right: 20rpx;
    background: rgba(255, 255, 255, 0.1);
  }
  &--br {
    width: 80rpx;
    height: 80rpx;
    bottom: -24rpx;
    left: -16rpx;
    background: rgba(255, 255, 255, 0.07);
  }
 }
 /* CSS-drawn icons */
 .cover-icon {
  width: 52rpx;
  height: 52rpx;
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin-left: 20rpx;
 }
 /* 次卡 — stacked cards */
 .cover-icon--TIMES {
  &::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 36rpx;
    height: 24rpx;
    border: 2rpx solid rgba(255, 255, 255, 0.85);
    border-radius: 5rpx;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.12);
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 10rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 36rpx;
    height: 24rpx;
    border: 2rpx solid rgba(255, 255, 255, 1);
    border-radius: 5rpx;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.2);
  }
 }
 /* 月卡 — calendar */
 .cover-icon--DURATION {
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 36rpx;
    height: 30rpx;
    border: 2rpx solid rgba(255, 255, 255, 0.9);
    border-radius: 5rpx;
    box-sizing: border-box;
  }
  &::after {
    content: '';
    position: absolute;
    top: 9rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 24rpx;
    height: 0;
    border-top: 2rpx solid rgba(255, 255, 255, 1);
    box-shadow:
      -6rpx 5rpx 0 0 rgba(255, 255, 255, 0.9),
      6rpx 5rpx 0 0 rgba(255, 255, 255, 0.9);
  }
 }
 /* 体验卡 — star */
 .cover-icon--TRIAL {
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16rpx;
    height: 16rpx;
    border: 2rpx solid rgba(255, 255, 255, 1);
    border-radius: 50%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.25);
  }
  &::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 2rpx;
    height: 42rpx;
    background: rgba(255, 255, 255, 0.8);
    box-shadow:
      0 -12rpx 0 0 rgba(255, 255, 255, 0.8),
      0 12rpx 0 0 rgba(255, 255, 255, 0.8),
      -12rpx 0 0 0 rgba(255, 255, 255, 0.8),
      12rpx 0 0 0 rgba(255, 255, 255, 0.8),
      -8rpx -8rpx 0 0 rgba(255, 255, 255, 0.8),
      8rpx -8rpx 0 0 rgba(255, 255, 255, 0.8),
      -8rpx 8rpx 0 0 rgba(255, 255, 255, 0.8),
      8rpx 8rpx 0 0 rgba(255, 255, 255, 0.8);
  }
 }
 /* Card cover backgrounds */
 .cover--times {
  background: linear-gradient(135deg, #1e2340 0%, #2d2d5e 50%, #3a3a7a 100%);
 }
 .cover--duration {
  background: linear-gradient(135deg, #4a1a6b 0%, #6c3483 50%, #8e4aaf 100%);
 }
 .cover--trial {
  background: linear-gradient(135deg, #14527a 0%, #1a6fa0 50%, #48a9a6 100%);
 }
 /* Right side text content */
 .cover-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 0 16rpx 0 12rpx;
  gap: 4rpx;
  z-index: 2;
 }
 .cover-badge {
  padding: 3rpx 10rpx;
  border-radius: 8rpx;
  background: rgba(255, 255, 255, 0.18);
  border: 1rpx solid rgba(255, 255, 255, 0.28);
 }
 .cover-badge-text {
  font-size: 16rpx;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 600;
 }
 .cover-name {
  font-size: 24rpx;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.5rpx;
  line-height: 1.2;
  max-width: 130rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .cover-price-row {
  display: flex;
  align-items: baseline;
  gap: 2rpx;
 }
 .cover-currency {
  font-size: 18rpx;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.85);
 }
 .cover-price {
  font-size: 28rpx;
  font-weight: 800;
  color: #ffffff;
  line-height: 1;
 }
 .cover-original {
  font-size: 16rpx;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: line-through;
 }
 /* ── Card info — matches card-cover height ── */
 .card-info {
  flex: 1;
  min-width: 0;
  height: 130rpx;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
 }
 .info-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4rpx;
 }
 .info-bottom {
  display: flex;
  align-items: baseline;
  gap: 16rpx;
 }
 .card-name {
  font-size: 30rpx;
  font-weight: 700;
  color: $text-primary;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: 0.5rpx;
  line-height: 1.2;
 }
 .card-validity {
  font-size: 23rpx;
  color: $text-secondary;
  line-height: 1.2;
 }
 .card-times {
  display: flex;
  align-items: baseline;
  gap: 4rpx;
 }
 .card-times-value {
  font-size: 34rpx;
  font-weight: 800;
  color: $brand-color;
  line-height: 1;
 }
 .card-times-unit {
  font-size: 20rpx;
  color: $text-secondary;
  font-weight: 500;
 }
 .price-row {
  display: flex;
  align-items: baseline;
  gap: 6rpx;
 }
 .price-current {
  font-size: 32rpx;
  font-weight: 800;
  color: $brand-color;
  line-height: 1;
 }
 .price-original {
  font-size: 20rpx;
  color: $text-hint;
  text-decoration: line-through;
 }
 /* Arrow */
 .card-arrow {
  font-size: 44rpx;
  color: $text-hint;
  flex-shrink: 0;
  transform: scaleX(0.5);
  transform-origin: center;
 }
 /* ── Skeleton ── */
 .skeleton-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx 0;
  border-bottom: 1rpx solid rgba($brand-color, 0.08);
 }
 .skeleton-card-cover {
  width: 240rpx;
  height: 130rpx;
  border-radius: 16rpx;
  flex-shrink: 0;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
 }
 .skeleton-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
 }
 .skeleton-line {
  height: 24rpx;
  border-radius: 6rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
  &--title {
    width: 60%;
    height: 30rpx;
  }
  &--sub {
    width: 40%;
  }
  &--price {
    width: 45%;
    height: 36rpx;
  }
 }
 /* ── Empty state ── */
 .empty-state {
  padding: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .empty-text {
  font-size: 28rpx;
  color: $text-hint;
 }
 </style>
--- a/packages/app/src/components/CustomNavBar.vue
+++ b/packages/app/src/components/CustomNavBar.vue
@@ -39,7 +39,14 @@ onMounted(() => {
 })
 function handleBack() {
  const pages = getCurrentPages()
  if (pages.length > 1) {
    uni.navigateBack({ delta: 1 })
    return
  }
  uni.switchTab({ url: '/pages/home/index' })
 }
 </script>
--- a/packages/app/src/components/DateSelector.vue
+++ b/packages/app/src/components/DateSelector.vue
@@ -1,17 +1,20 @@
 <template>
-  <view class="date-selector">
+  <view class="date-selector" :class="`date-selector--${variant}`">
    <scroll-view class="scroll" scroll-x enhanced :show-scrollbar="false">
      <view class="track">
        <view
          v-for="item in dateRange"
          :key="item.date"
          class="date-item"
-          :class="{ active: item.date === modelValue, today: item.isToday }"
+          :class="[
            `date-item--${variant}`,
            { active: item.date === modelValue, today: item.isToday },
          ]"
          @tap="handleSelect(item.date)"
        >
          <text class="weekday">{{ item.isToday ? '今天' : item.weekday }}</text>
          <text class="day">{{ getDayNumber(item.date) }}</text>
-          <text class="month">{{ getMonthNumber(item.date) }}月</text>
+          <text v-if="variant !== 'soft' || getDayNumber(item.date) === '1'" class="month">{{ getMonthNumber(item.date) }}月</text>
        </view>
      </view>
    </scroll-view>
@@ -25,6 +28,7 @@ import { getDateRange } from '../utils/format'
 interface Props {
  modelValue: string
  variant?: 'default' | 'booking' | 'soft'
 }
 const props = defineProps<Props>()
@@ -47,6 +51,8 @@ function handleSelect(date: string) {
  emit('update:modelValue', date)
  emit('select', date)
 }
 const variant = computed(() => props.variant ?? 'default')
 </script>
 <style lang="scss" scoped>
@@ -55,6 +61,11 @@ function handleSelect(date: string) {
  padding: 16rpx 0 20rpx;
  border-bottom: 1rpx solid $primary-border;
  &.date-selector--booking {
    background: rgba(252, 250, 248, 0.96);
    border-bottom-color: rgba(192, 154, 137, 0.12);
  }
  .scroll {
    width: 100%;
    white-space: nowrap;
@@ -121,6 +132,60 @@ function handleSelect(date: string) {
        font-weight: 600;
      }
    }
    &.date-item--booking {
      background: rgba(247, 242, 238, 0.88);
      border: 1rpx solid rgba(192, 154, 137, 0.08);
      .weekday {
        color: #9d8b83;
      }
      .day {
        color: #3a2e2a;
      }
      .month {
        color: #b7a79f;
      }
      &.active {
        background: linear-gradient(135deg, #d7beb1, #b98f7d);
        box-shadow: 0 12rpx 28rpx rgba(143, 103, 89, 0.16);
        .weekday,
        .day,
        .month {
          color: #fffaf7;
        }
      }
      &.today:not(.active) {
        .weekday {
          color: #8f6759;
        }
      }
    }
  }
 }
 .date-selector.date-selector--soft {
  padding: 8rpx 0 24rpx;
  background: #fbf9f6;
  border-bottom: none;
  .track { padding: 0 32rpx; gap: 12rpx; }
  .date-item {
    min-width: 0; width: 86rpx; height: 116rpx; padding: 0;
    box-sizing: border-box; border-radius: 24rpx;
    background: transparent; gap: 12rpx;
    .weekday { font-size: 22rpx; color: #8b817b; }
    .day { font-size: 34rpx; font-weight: 400; color: #514943; }
    &.active {
      background: #eee3dc;
      .weekday, .day { color: #705b4f; }
      .day { font-weight: 500; }
    }
    &.today:not(.active) .weekday { color: #617d73; font-weight: 400; }
  }
 }
 </style>
--- a/packages/app/src/components/FlashSaleSection.vue
+++ b/packages/app/src/components/FlashSaleSection.vue
@@ -0,0 +1,185 @@
 <template>
  <view v-if="flashSales.length" class="flash-sale-section">
    <!-- Section header -->
    <view class="section-header">
      <view class="header-left">
        <text class="section-title">限时秒杀</text>
        <text v-if="hasOngoing" class="live-note">进行中</text>
      </view>
    </view>
    <!-- Horizontal scroll cards -->
    <scroll-view
      scroll-x
      :show-scrollbar="false"
      class="flash-scroll"
    >
      <view class="flash-card-list">
        <view
          v-for="sale in flashSales"
          :key="sale.id"
          class="flash-card"
          :class="cardPhaseClass(sale.phase)"
          @tap="goToDetail(sale.id)"
        >
          <!-- Top gradient band -->
          <view class="card-top">
            <!-- Phase badge -->
            <view class="phase-badge" :class="badgeClass(sale.phase)">
              <text class="phase-badge-text">{{ phaseLabel(sale.phase) }}</text>
            </view>
            <!-- Countdown / status text -->
            <view class="countdown-row">
              <text v-if="sale.phase === FlashSalePhase.UPCOMING" class="countdown-label">距开始</text>
              <text v-else-if="sale.phase === FlashSalePhase.ONGOING" class="countdown-label">剩余</text>
              <view v-if="sale.phase === FlashSalePhase.UPCOMING || sale.phase === FlashSalePhase.ONGOING" class="countdown-blocks">
                <text class="cd-block">{{ getSaleCountdown(sale).h }}</text>
                <text class="cd-sep">:</text>
                <text class="cd-block">{{ getSaleCountdown(sale).m }}</text>
                <text class="cd-sep">:</text>
                <text class="cd-block">{{ getSaleCountdown(sale).s }}</text>
              </view>
            </view>
          </view>
          <!-- Card body -->
          <view class="card-body">
            <text class="card-title">{{ sale.title }}</text>
            <text class="card-type-name">{{ sale.cardType.name }}</text>
            <!-- Price area -->
            <view class="price-area">
              <view class="flash-price-row">
                <text class="flash-currency">¥</text>
                <text class="flash-price">{{ formatPrice(invite.price(sale.flashPrice)) }}</text>
              </view>
              <text v-if="invite.eligible" class="original-price">好友 95 折</text>
              <text class="original-price">¥{{ formatPrice(sale.originalPrice) }}</text>
            </view>
            <!-- Stock progress -->
            <view class="stock-area">
              <view class="stock-bar">
                <view
                  class="stock-fill"
                  :class="{ 'stock-fill--hot': getStockRatio(sale.soldCount, sale.totalStock) > 0.6 }"
                  :style="{ width: stockPercent(sale) }"
                />
              </view>
              <text class="stock-text">
                {{ sale.phase === FlashSalePhase.SOLD_OUT ? '已售罄' : `剩 ${sale.remainingStock}/${sale.totalStock}` }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
 </template>
 <script setup lang="ts">
 import { useInviteStore } from "../stores/invite"
 const invite = useInviteStore()
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import { FlashSalePhase } from '@mp-pilates/shared'
 import type { FlashSaleListItem } from '@mp-pilates/shared'
 import { formatPrice, getFlashSalePhaseLabel, getCountdownParts, getStockRatio, getStockPercent } from '../utils/format'
 import { get } from '../utils/request'
 const flashSales = ref<FlashSaleListItem[]>([])
 const tick = ref(0)
 let timer: ReturnType<typeof setInterval> | null = null
 const hasOngoing = computed(() =>
  flashSales.value.some((s) => s.phase === FlashSalePhase.ONGOING),
 )
 async function fetchFlashSales() {
  try {
    const data = await get<FlashSaleListItem[]>('/flash-sales')
    flashSales.value = [...data]
  } catch {
    flashSales.value = []
  }
 }
 // Expose for parent page refresh
 defineExpose({ fetchFlashSales })
 function phaseLabel(phase: FlashSalePhase): string {
  return getFlashSalePhaseLabel(phase)
 }
 function cardPhaseClass(phase: FlashSalePhase): string {
  if (phase === FlashSalePhase.ONGOING) return 'card--ongoing'
  if (phase === FlashSalePhase.UPCOMING) return 'card--upcoming'
  if (phase === FlashSalePhase.SOLD_OUT) return 'card--soldout'
  return 'card--ended'
 }
 function badgeClass(phase: FlashSalePhase): string {
  if (phase === FlashSalePhase.ONGOING) return 'badge--ongoing'
  if (phase === FlashSalePhase.UPCOMING) return 'badge--upcoming'
  return 'badge--inactive'
 }
 function stockPercent(sale: FlashSaleListItem): string {
  return getStockPercent(sale.soldCount, sale.totalStock)
 }
 function getSaleCountdown(sale: FlashSaleListItem) {
  void tick.value
  const target = sale.phase === FlashSalePhase.UPCOMING ? sale.startTime : sale.endTime
  return getCountdownParts(target)
 }
 function goToDetail(id: string) {
  uni.navigateTo({ url: `/pages/flash-sale/detail?id=${id}` })
 }
 onMounted(() => {
  fetchFlashSales()
  timer = setInterval(() => {
    tick.value++
  }, 1000)
 })
 onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
 })
 </script>
 <style lang="scss" scoped>
 .flash-sale-section { margin: 36rpx 32rpx 0; }
 .section-header { margin-bottom: 20rpx; }
 .header-left { display: flex; align-items: baseline; justify-content: space-between; gap: 16rpx; }
 .section-title { font-size: 30rpx; font-weight: 500; color: #514943; }
 .live-note { font-size: 22rpx; color: #9b7b66; }
 .flash-scroll { width: 100%; white-space: nowrap; }
 .flash-card-list { display: inline-flex; gap: 20rpx; }
 .flash-card { width: 400rpx; border-radius: 28rpx; overflow: hidden; border: 1rpx solid #e7ded5; flex-shrink: 0; display: inline-flex; flex-direction: column; white-space: normal; background: #fff; }
 .card-top { padding: 20rpx 24rpx; background: #f1e6de; display: flex; flex-direction: column; gap: 12rpx; }
 .card--upcoming .card-top { background: #eaf0e8; }
 .card--soldout .card-top, .card--ended .card-top { background: #eeeae5; }
 .phase-badge-text { font-size: 22rpx; color: #7c6656; }
 .countdown-row, .countdown-blocks { display: flex; align-items: baseline; gap: 8rpx; }
 .countdown-label { font-size: 20rpx; color: #8b817b; }
 .cd-block, .cd-sep { font-size: 24rpx; color: #7c6656; font-variant-numeric: tabular-nums; }
 .card-body { padding: 24rpx; display: flex; flex-direction: column; gap: 10rpx; }
 .card-title { font-size: 28rpx; font-weight: 500; color: #514943; line-height: 1.5; overflow-wrap: anywhere; }
 .card-type-name { font-size: 22rpx; color: #8b817b; }
 .price-area { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12rpx; margin-top: 8rpx; }
 .flash-price-row { display: flex; align-items: baseline; gap: 4rpx; }
 .flash-currency { font-size: 22rpx; color: #8b6c5b; }
 .flash-price { font-size: 38rpx; font-weight: 500; color: #8b6c5b; }
 .original-price { font-size: 21rpx; color: #a59b93; text-decoration: line-through; }
 .stock-area { margin-top: 12rpx; display: flex; flex-direction: column; gap: 10rpx; }
 .stock-bar { height: 6rpx; background: #f3efea; border-radius: 6rpx; overflow: hidden; }
 .stock-fill { height: 100%; border-radius: 6rpx; background: #bea28e; }
 .stock-text { font-size: 20rpx; color: #8b817b; }
 </style>
--- a/packages/app/src/components/InviteCard.vue
+++ b/packages/app/src/components/InviteCard.vue
@@ -0,0 +1,71 @@
 <template>
  <view class="invite-entry">
    <button class="invite-heading" :disabled="opening" @tap="open" aria-label="邀请好友，查看邀请码与邀请权益">
      <view class="entry-copy">
        <text class="entry-title">邀请好友领课时</text>
        <text class="entry-caption">好友享 95 折 · {{ user.loggedIn && invite.activity ? `已获 ${invite.activity.rewardedTimes} 节赠课` : '一起练，得赠课' }}</text>
      </view>
      <view class="invite-count">
        <text class="count-number">{{ user.loggedIn && invite.activity ? invite.activity.referrals.length : '—' }}<text v-if="user.loggedIn"> 人</text></text>
        <text class="count-label">{{ user.loggedIn ? '已邀请' : '登录查看' }}</text>
      </view>
      <text class="entry-arrow">›</text>
    </button>
    <view v-if="visible" class="veil" @tap="visible = false" @touchmove.stop.prevent>
      <view class="sheet" @tap.stop>
        <button class="close" @tap="visible = false" aria-label="关闭">×</button>
        <text class="eyebrow">A LITTLE GIFT, SHARED</text>
        <text class="headline">好朋友，好好练。</text>
        <text class="subtitle">把你的练习日常，分享给在意的人。</text>
        <view class="benefits"><view><text class="benefit-num">1<text> 节</text></text><text>你得免费课</text></view><view><text class="benefit-num">95<text> 折</text></text><text>好友购卡优惠</text></view></view>
        <view class="ticket" @tap="copy"><text>你的专属邀请码 · 点击复制</text><text class="ticket-code">{{ invite.code }}</text></view>
        <text class="rules">好友确认邀请码，体验卡、次卡和期限卡均享 95 折。每位好友首次成功购买非体验卡，你得 1 节免费课；购买或完成体验课不触发赠课。</text>
        <text class="rules">赠课自动存入「我的会员卡」，365 天内可预约。每位好友仅绑定一位邀请人。</text>
        <button class="share" open-type="share" :disabled="!invite.code">分享给微信好友</button>
        <text class="footnote">送朋友一份心意，也给自己一次练习</text>
      </view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import { useInviteStore } from '../stores/invite'
 import { useUserStore } from '../stores/user'
 import { getErrorMessage } from '../utils/auth'
 const invite = useInviteStore()
 const user = useUserStore()
 const visible = ref(false)
 const opening = ref(false)
 async function open() {
  if (opening.value) return
  opening.value = true
  try {
    if (!user.loggedIn) await user.login()
    await Promise.all([invite.refresh(), invite.refreshActivity().catch(() => {})])
    visible.value = true
  } catch (err) { uni.showToast({ title: getErrorMessage(err, '暂时无法获取邀请码，请重试'), icon: 'none' }) }
  finally { opening.value = false }
 }
 function copy() {
  if (!invite.code) { open(); return }
  uni.setClipboardData({ data: invite.code })
 }
 </script>
 <style scoped lang="scss">
 .invite-entry { margin: 16rpx 32rpx; padding: 0; background: #eaf0e7; border: 1rpx solid #d9e3d4; border-radius: 20rpx; color: #435b4c; }
 .invite-heading { width: 100%; min-height: 120rpx; box-sizing: border-box; margin: 0; padding: 18rpx 24rpx; background: transparent; border-radius: 20rpx; color: inherit; display: flex; gap: 20rpx; text-align: left; align-items: center; line-height: 1.5; &::after { border: none; } &:active { background: #e2eadf; } }
 .entry-copy { flex: 1; min-width: 0; }
 .entry-title { display: block; font-size: 28rpx; font-weight: 500; }
 .entry-caption { display: block; margin-top: 6rpx; font-size: 21rpx; color: #6b7d65; }
 .invite-count { flex-shrink: 0; text-align: right; }
 .count-number { display: block; font-family: Georgia, serif; font-size: 34rpx; line-height: 1.2; font-variant-numeric: tabular-nums; text { font-size: 20rpx; } }
 .count-label { display: block; margin-top: 5rpx; font-size: 19rpx; color: #6b7d65; }
 .entry-arrow { flex-shrink: 0; font-size: 30rpx; color: #87967f; }
 .eyebrow { display: block; font-size: 19rpx; letter-spacing: 3rpx; color: #788976; }
 .veil { position: fixed; inset: 0; z-index: 400; background: rgba(32,43,35,.48); display: flex; align-items: center; padding: 30rpx; }
 .sheet { position: relative; width: 100%; max-height: 85vh; overflow-y: auto; box-sizing: border-box; padding: 48rpx 34rpx 32rpx; border-radius: 32rpx; background: #fcfaf5; }.close { position: absolute; right: 18rpx; top: 12rpx; margin: 0; background: transparent; color: #7b8477; font-size: 36rpx; }.close::after,.share::after { border: none; }
 .headline { display: block; margin-top: 20rpx; font-family: 'Songti SC',serif; font-size: 46rpx; }.subtitle { display: block; margin-top: 12rpx; font-size: 23rpx; color: #87907f; }
 .benefits { display: flex; margin: 30rpx 0; padding: 25rpx 0; background: #eaf0e5; border-radius: 22rpx; }.benefits>view { flex: 1; text-align: center; font-size: 24rpx; }.benefits>view+view { border-left: 1rpx solid #cbd8c5; }.benefit-num { display: block; font: 66rpx Georgia,serif; margin-bottom: 10rpx; }.benefit-num text { font-size: 26rpx; }
 .ticket { padding: 22rpx; text-align: center; border: 1rpx dashed #b7c5af; border-radius: 16rpx; font-size: 21rpx; color: #7a8772; }.ticket-code { display: block; margin-top: 12rpx; font: 42rpx monospace; letter-spacing: 10rpx; color: #435b4c; }
 .rules { display: block; margin-top: 18rpx; font-size: 21rpx; line-height: 1.8; color: #7d8076; }.share { margin-top: 26rpx; border-radius: 999rpx; background: #526e58; color: #fff; font-size: 27rpx; line-height: 86rpx; }.footnote { display: block; text-align: center; margin-top: 16rpx; font-size: 19rpx; color: #93978a; }
 </style>
--- a/packages/app/src/components/LessonSupplementList.vue
+++ b/packages/app/src/components/LessonSupplementList.vue
@@ -0,0 +1,40 @@
 <template>
  <view class="supplements">
    <view v-for="item in records" :key="item.id" class="record" :class="{ 'record--revoked': item.revokedAt }">
      <view class="record-head">
        <view class="record-title"><text>系统补录</text><text class="record-sub">{{ item.revokedAt ? '已撤销' : '历史课程' }}</text></view>
        <text class="record-quantity">{{ item.quantity }}<text class="record-unit"> 节</text></text>
      </view>
      <text class="record-date">{{ formatDateTimeFull(item.createdAt) }} 补录</text>
      <text class="record-note">{{ item.deductedTimes ? `${item.cardName} · ${item.revokedAt ? '已返还' : '扣除'} ${item.deductedTimes} 次` : '仅补记录 · 未扣会员卡' }}</text>
      <text v-if="item.remark" class="record-note">{{ item.remark }}</text>
      <view v-if="editable" class="record-footer">
        <text class="record-operator">由 {{ item.operatorName }} 补录</text>
        <button v-if="!item.revokedAt" class="revoke" :disabled="busy" @tap="emit('revoke', item)">撤销补录</button>
        <text v-else class="record-operator">{{ formatDateTimeFull(item.revokedAt) }} 撤销</text>
      </view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import type { LessonSupplementRecord } from '@mp-pilates/shared'
 import { formatDateTimeFull } from '../utils/format'
 defineProps<{ records: readonly LessonSupplementRecord[]; editable?: boolean; busy?: boolean }>()
 const emit = defineEmits<{ revoke: [record: LessonSupplementRecord] }>()
 </script>
 <style lang="scss" scoped>
 .supplements { display: flex; flex-direction: column; }
 .record { padding: 24rpx 0; border-bottom: 1rpx solid #eee8e3; color: #514943; }
 .record:last-child { border-bottom: none; }
 .record--revoked { color: #8b817b; }
 .record-head { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; }
 .record-title { display: flex; flex-direction: column; gap: 8rpx; font-size: 28rpx; }
 .record-sub { font-size: 20rpx; color: #8b817b; }
 .record-quantity { flex-shrink: 0; font-size: 42rpx; font-variant-numeric: tabular-nums; color: #617d73; }
 .record-unit { font-size: 22rpx; }
 .record-date { display: block; margin-top: 20rpx; color: #8b817b; font-size: 21rpx; }
 .record-note { display: block; margin-top: 12rpx; font-size: 23rpx; color: #786b61; line-height: 1.6; overflow-wrap: anywhere; }
 .record-footer { margin-top: 20rpx; padding-top: 16rpx; border-top: 1rpx solid #eee8e3; display: flex; align-items: center; justify-content: space-between; gap: 16rpx; flex-wrap: wrap; }
 .record-operator { color: #8b817b; font-size: 21rpx; }
 .revoke { margin: 0; padding: 8rpx 12rpx; font-size: 22rpx; line-height: 1.5; background: transparent; color: #967561; &::after { border: none; } }
 </style>
--- a/packages/app/src/components/MonthDivider.vue
+++ b/packages/app/src/components/MonthDivider.vue
@@ -0,0 +1,78 @@
 <template>
  <view class="month-divider">
    <!-- 左侧细线 -->
    <view class="month-divider__line" />
    <!-- 月份主体 -->
    <view class="month-divider__body">
      <!-- 月份装饰：一个小圆点 + 月份名 -->
      <view class="month-divider__dot" />
      <text class="month-divider__label">{{ label }}</text>
      <view class="month-divider__dot" />
    </view>
    <!-- 右侧细线 -->
    <view class="month-divider__line" />
    <!-- 副信息：节气或描述 -->
    <text v-if="hint" class="month-divider__hint">{{ hint }}</text>
  </view>
 </template>
 <script setup lang="ts">
 defineProps<{
  /** 主标签，例如 "十月" */
  label: string
  /** 副信息，例如 "共 3 节" */
  hint?: string
 }>()
 </script>
 <style lang="scss" scoped>
 .month-divider {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin: 48rpx 32rpx 24rpx;
  &__line {
    flex: 1;
    height: 1rpx;
    background: linear-gradient(
      to right,
      transparent 0%,
      rgba(155, 138, 117, 0.25) 30%,
      rgba(155, 138, 117, 0.45) 100%
    );
  }
  &__body {
    display: flex;
    align-items: center;
    gap: 14rpx;
    padding: 0 4rpx;
  }
  &__dot {
    width: 6rpx;
    height: 6rpx;
    border-radius: 50%;
    background: #b09a83;
  }
  &__label {
    font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
    font-size: 28rpx;
    font-weight: 400;
    color: #6f645a;
    letter-spacing: 8rpx;
  }
  &__hint {
    font-size: 22rpx;
    color: #a89d92;
    letter-spacing: 1rpx;
    font-variant-numeric: tabular-nums;
  }
 }
 </style>
--- a/packages/app/src/components/NextSessionHero.vue
+++ b/packages/app/src/components/NextSessionHero.vue
@@ -0,0 +1,382 @@
 <template>
  <view class="hero" :class="`hero--${tone}`" @tap="handleTap">
    <!-- 背景纹理层 -->
    <view class="hero__grain" />
    <!-- 装饰：右上角的弧线（暗示月相） -->
    <view class="hero__moon" />
    <view class="hero__main">
      <!-- 左侧：大日期块 -->
      <view class="hero__date">
        <text class="hero__day">{{ dayNumber }}</text>
        <text class="hero__month">{{ monthLabel }}</text>
        <text class="hero__weekday">{{ weekdayLabel }}</text>
      </view>
      <!-- 分隔：虚线 -->
      <view class="hero__divider">
        <view v-for="i in 6" :key="i" class="hero__divider-dot" />
      </view>
      <!-- 右侧：课程信息 -->
      <view class="hero__info">
        <view class="hero__time-row">
          <text class="hero__time">{{ startTime }}</text>
          <text class="hero__time-end">— {{ endTime }}</text>
        </view>
        <text class="hero__membership">{{ cardName }}</text>
        <view class="hero__status">
          <view class="hero__dot" />
          <text class="hero__status-text">{{ statusLabel }}</text>
          <text v-if="countdownText" class="hero__countdown">· {{ countdownText }}</text>
        </view>
      </view>
    </view>
    <!-- 底部：诗意一句 -->
    <view class="hero__footer">
      <text class="hero__poem">{{ poem }}</text>
      <view class="hero__cta">
        <text class="hero__cta-text">查看详情</text>
        <text class="hero__cta-arrow">→</text>
      </view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { BookingWithDetails } from '@mp-pilates/shared'
 import { BookingStatus } from '@mp-pilates/shared'
 import {
  bookingStatusLabel,
  bookingStatusBannerClass,
 } from '../utils/booking-helpers'
 const props = defineProps<{
  booking: BookingWithDetails
 }>()
 const emit = defineEmits<{
  tap: [booking: BookingWithDetails]
 }>()
 const months = ['一', '二', '三', '四', '五', '六', '七', '八', '九', '十', '十一', '十二']
 const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
 function parseDate(dateStr: string): Date {
  const normalized = dateStr.slice(0, 10)
  const [y, m, d] = normalized.split('-').map(Number)
  return new Date(y, m - 1, d)
 }
 const date = computed(() => parseDate(props.booking.timeSlot.date))
 const dayNumber = computed(() => String(date.value.getDate()).padStart(2, '0'))
 const monthLabel = computed(() => `${date.value.getMonth() + 1}月`)
 const weekdayLabel = computed(() => weekdays[date.value.getDay()])
 const startTime = computed(() => props.booking.timeSlot.startTime.slice(0, 5))
 const endTime = computed(() => props.booking.timeSlot.endTime.slice(0, 5))
 const cardName = computed(() => props.booking.membership?.cardType?.name || '会员卡')
 const statusLabel = computed(() => bookingStatusLabel(props.booking.status))
 const tone = computed(() => bookingStatusBannerClass(props.booking.status))
 const today = new Date()
 const todayStr = computed(() => {
  const d = today
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
 })
 const tomorrow = new Date(today.getTime() + 86400000)
 const tomorrowStr = computed(() => {
  const d = tomorrow
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
 })
 const dateKey = computed(() => {
  const d = date.value
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
 })
 const relativeLabel = computed(() => {
  if (dateKey.value === todayStr.value) return '今天'
  if (dateKey.value === tomorrowStr.value) return '明天'
  return `${months[date.value.getMonth()]}${date.value.getDate()}日`
 })
 const countdownText = computed(() => {
  if (props.booking.status !== BookingStatus.CONFIRMED) return ''
  if (dateKey.value !== todayStr.value && dateKey.value !== tomorrowStr.value) return ''
  const target = new Date(`${dateKey.value}T${props.booking.timeSlot.startTime}:00`).getTime()
  const diff = target - Date.now()
  if (diff <= 0) return '即将开始'
  const hours = Math.floor(diff / 3_600_000)
  const mins = Math.floor((diff % 3_600_000) / 60_000)
  if (dateKey.value === todayStr.value) {
    if (hours <= 0) return `${mins} 分钟后`
    return `${hours} 小时 ${mins} 分后`
  }
  return `${hours} 小时 ${mins} 分`
 })
 const poem = computed(() => {
  const poems: Record<string, string> = {
    today: '让呼吸慢一些，让脊柱回到中央。',
    tomorrow: '明天见，记得早些休息。',
    upcoming: '你的身体，会记得每一次到达。',
    pending: '待确认中，我们会为你预留这朵花。',
  }
  if (dateKey.value === todayStr.value) return poems.today
  if (dateKey.value === tomorrowStr.value) return poems.tomorrow
  if (props.booking.status === BookingStatus.PENDING_CONFIRMATION) return poems.pending
  return poems.upcoming
 })
 function handleTap() {
  emit('tap', props.booking)
 }
 </script>
 <style lang="scss" scoped>
 .hero {
  position: relative;
  margin: 24rpx 32rpx 0;
  padding: 36rpx 32rpx 28rpx;
  border-radius: 36rpx;
  overflow: hidden;
  background: linear-gradient(140deg, #efe5d6 0%, #e6d8c4 100%);
  color: #3a322b;
  box-shadow:
    0 1rpx 0 rgba(122, 99, 84, 0.04),
    0 12rpx 32rpx rgba(122, 99, 84, 0.06);
  &--pending {
    background: linear-gradient(140deg, #ece1cd 0%, #e2d2b8 100%);
  }
  &--confirmed {
    background: linear-gradient(140deg, #e2ebe2 0%, #d4e0d3 100%);
  }
  &--completed {
    background: linear-gradient(140deg, #efe5d6 0%, #e6d8c4 100%);
  }
  &--cancelled {
    background: linear-gradient(140deg, #ede4dc 0%, #e3d6c9 100%);
    opacity: 0.85;
  }
  &--noshow {
    background: linear-gradient(140deg, #ede0dc 0%, #e3cfc7 100%);
  }
  &__grain {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.4;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.36  0 0 0 0 0.27  0 0 0 0.18 0'/></filter><rect width='200' height='200' filter='url(%23n)'/></svg>");
    mix-blend-mode: multiply;
  }
  &__moon {
    position: absolute;
    top: -80rpx;
    right: -60rpx;
    width: 220rpx;
    height: 220rpx;
    border-radius: 50%;
    background: radial-gradient(circle at 30% 30%, rgba(255, 248, 235, 0.55) 0%, rgba(255, 248, 235, 0) 70%);
    pointer-events: none;
  }
  &__main {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 24rpx;
  }
  &__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rpx;
    width: 132rpx;
    flex-shrink: 0;
    padding: 8rpx 0;
    border-radius: 20rpx;
    background: rgba(255, 251, 244, 0.5);
    backdrop-filter: blur(8rpx);
  }
  &__day {
    font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
    font-size: 72rpx;
    line-height: 1;
    font-weight: 500;
    color: #3a322b;
    font-variant-numeric: tabular-nums;
  }
  &__month {
    margin-top: 8rpx;
    font-size: 22rpx;
    color: #6f645a;
    letter-spacing: 2rpx;
  }
  &__weekday {
    font-size: 20rpx;
    color: #8b7d70;
    letter-spacing: 1rpx;
  }
  &__divider {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6rpx;
    flex-shrink: 0;
    width: 2rpx;
    padding: 8rpx 0;
  }
  &__divider-dot {
    width: 2rpx;
    height: 8rpx;
    background: #b09a83;
    border-radius: 1rpx;
    opacity: 0.5;
  }
  &__info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 8rpx;
    padding: 4rpx 0;
  }
  &__time-row {
    display: flex;
    align-items: baseline;
    gap: 6rpx;
  }
  &__time {
    font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
    font-size: 50rpx;
    line-height: 1;
    font-weight: 500;
    color: #2a2520;
    font-variant-numeric: tabular-nums;
    letter-spacing: -1rpx;
  }
  &__time-end {
    font-size: 24rpx;
    color: #6f645a;
    font-variant-numeric: tabular-nums;
  }
  &__membership {
    font-size: 24rpx;
    color: #6f645a;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__status {
    display: flex;
    align-items: center;
    gap: 8rpx;
    margin-top: 4rpx;
  }
  &__dot {
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background: #6e8b7d;
    box-shadow: 0 0 0 4rpx rgba(110, 139, 125, 0.18);
  }
  &__status-text {
    font-size: 22rpx;
    color: #6e8b7d;
    letter-spacing: 1rpx;
  }
  &__countdown {
    font-size: 22rpx;
    color: #8b7d70;
    font-variant-numeric: tabular-nums;
  }
  &__footer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16rpx;
    margin-top: 28rpx;
    padding-top: 20rpx;
    border-top: 1rpx dashed rgba(122, 99, 84, 0.22);
  }
  &__poem {
    flex: 1;
    font-size: 22rpx;
    color: #6f645a;
    letter-spacing: 2rpx;
    font-style: italic;
    line-height: 1.5;
  }
  &__cta {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 6rpx;
    padding: 6rpx 0;
  }
  &__cta-text {
    font-size: 22rpx;
    color: #8b7d70;
    letter-spacing: 2rpx;
  }
  &__cta-arrow {
    font-size: 22rpx;
    color: #8b7d70;
    transform: translateY(-1rpx);
    transition: transform 0.3s ease;
  }
 }
 .hero:active {
  transform: scale(0.99);
  transition: transform 0.15s ease;
  .hero__cta-arrow {
    transform: translate(4rpx, -1rpx);
  }
 }
 </style>
--- a/packages/app/src/components/PracticeActivityCard.vue
+++ b/packages/app/src/components/PracticeActivityCard.vue
@@ -0,0 +1,126 @@
 <template>
  <view class="practice">
    <view class="practice__heading">
      <view>
        <view class="practice__title">练习足迹<text class="practice__period">最近 30 天</text></view>
      </view>
      <view class="practice__summary"><text class="practice__number">{{ activity ? total : '—' }}</text><text>节课</text></view>
    </view>
    <view v-if="error" class="practice__state">
      <text>暂时未能加载练习记录</text>
      <button class="practice__retry" @tap="load">重新加载</button>
    </view>
    <template v-else>
      <view class="practice__range">
        <text>{{ activity ? formatDate(activity.days[0].date) : '正在读取练习记录' }}</text>
        <text>{{ activity ? formatDate(activity.days[29].date) + ' · 今天' : '' }}</text>
      </view>
      <view class="practice__grid" :class="{ 'practice__grid--loading': !activity }">
        <button v-for="(day, index) in cells" :key="day.date || index"
          class="practice__cell" :class="[
            `practice__cell--${Math.min(day.count, 3)}`,
            { 'practice__cell--selected': selected === day.date && !!activity, 'practice__cell--today': index === 29 },
          ]"
          :disabled="!activity" :aria-label="activity ? `${formatDate(day.date)}，已完成 ${day.count} 节课` : '加载中'"
          @tap="selected = day.date">
          <text>{{ day.date ? Number(day.date.slice(-2)) : '' }}</text>
        </button>
      </view>
      <view class="practice__footer">
        <text class="practice__detail">{{ detail }}</text>
        <view class="practice__legend">
          <text>0</text><view class="practice__swatch practice__cell--0" />
          <view class="practice__swatch practice__cell--1" /><view class="practice__swatch practice__cell--2" />
          <view class="practice__swatch practice__cell--3" /><text>3+ 节</text>
        </view>
      </view>
    </template>
  </view>
 </template>
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref, watch } from 'vue'
 import type { PracticeActivity } from '@mp-pilates/shared'
 import { get } from '../utils/request'
 const props = defineProps<{ refreshKey: number }>()
 const activity = ref<PracticeActivity | null>(null)
 const selected = ref('')
 const error = ref(false)
 let loading = false
 let disposed = false
 const cells = computed(() => activity.value?.days ?? Array.from({ length: 30 }, () => ({ date: '', count: 0 })))
 const total = computed(() => cells.value.reduce((sum, day) => sum + day.count, 0))
 const activeDays = computed(() => cells.value.filter(day => day.count > 0).length)
 const detail = computed(() => {
  if (!activity.value) return '正在整理练习记录'
  const day = activity.value.days.find(item => item.date === selected.value)
  if (day) return `${formatDate(day.date)} · ${day.count ? `已完成 ${day.count} 节课` : '暂无已完成课程'}`
  return total.value ? `已练习 ${activeDays.value} 天 · 点选查看` : '近 30 天暂无已完成课程'
 })
 function formatDate(date: string) {
  return `${Number(date.slice(5, 7))}月${Number(date.slice(8, 10))}日`
 }
 async function load() {
  if (loading || disposed) return
  loading = true
  error.value = false
  try {
    const result = await get<PracticeActivity>('/booking/my/activity')
    if (!disposed) {
      activity.value = result
      if (!result.days.some(day => day.date === selected.value)) selected.value = ''
    }
  } catch {
    if (!disposed) {
      activity.value = null
      error.value = true
    }
  } finally {
    loading = false
  }
 }
 onMounted(load)
 watch(() => props.refreshKey, load)
 onUnmounted(() => { disposed = true })
 </script>
 <style scoped lang="scss">
 .practice {
  margin: 24rpx 32rpx 0;
  padding: 28rpx;
  border: 1rpx solid #eee8e3;
  border-radius: 28rpx;
  background: #fff;
  color: #514943;
  &__heading, &__range, &__footer, &__legend { display: flex; align-items: center; justify-content: space-between; }
  &__title { font-size: 28rpx; font-weight: 500; }
  &__period { margin-left: 16rpx; font-size: 21rpx; font-weight: 400; letter-spacing: 0; color: #8b817b; }
  &__summary { display: flex; align-items: baseline; gap: 8rpx; font-size: 21rpx; color: #8b817b; }
  &__number { font-size: 44rpx; font-weight: 400; line-height: 1; color: #617d73; font-variant-numeric: tabular-nums; }
  &__range { margin: 24rpx 0 12rpx; font-size: 20rpx; color: #8b817b; }
  &__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 9rpx; }
  &__cell {
    width: 100%; height: 44rpx; min-width: 0; margin: 0; padding: 0;
    display: flex; justify-content: center; align-items: center;
    border-radius: 8rpx; border: 2rpx solid transparent; box-sizing: border-box;
    font-size: 19rpx; line-height: 1; font-variant-numeric: tabular-nums;
    &::after { border: none; }
    &--0 { background: #edf0e9; color: #7c8676; }
    &--1 { background: #ccd9c6; color: #516d50; }
    &--2 { background: #9cb594; color: #304b36; }
    &--3 { background: #637f5f; color: #ffffff; }
    &--today { border-bottom-color: #516d50; }
    &--selected { box-shadow: 0 0 0 3rpx #fff, 0 0 0 5rpx #637f5f; }
  }
  &__grid--loading { opacity: 0.5; }
  &__footer { margin-top: 22rpx; gap: 12rpx; flex-wrap: wrap; }
  &__detail { font-size: 21rpx; color: #788477; }
  &__legend { gap: 5rpx; font-size: 18rpx; color: #8b817b; }
  &__swatch { width: 13rpx; height: 13rpx; border-radius: 3rpx; }
  &__state { min-height: 200rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20rpx; font-size: 24rpx; color: #8b817b; }
  &__retry { margin: 0; padding: 0 24rpx; line-height: 56rpx; font-size: 24rpx; color: #516d50; background: #edf0e9; border-radius: 28rpx; &::after { border: none; } }
 }
 </style>
--- a/packages/app/src/components/ProfileMenu.vue
+++ b/packages/app/src/components/ProfileMenu.vue
@@ -1,33 +1,30 @@
 <template>
  <view class="profile-menu">
-    <template v-for="item in menuItems" :key="item.key">
+    <view class="profile-menu__shortcuts">
-      <!-- Separator -->
+      <view v-for="item in primaryItems" :key="item.key" class="profile-menu__shortcut"
-      <view v-if="item.type === 'separator'" class="profile-menu__separator" />
+        hover-class="profile-menu__item--hover" @tap="handleTap(item)">
        <view class="profile-menu__shortcut-head">
          <view class="profile-menu__icon" :class="'profile-menu__icon--' + item.key" />
          <text class="profile-menu__arrow">›</text>
        </view>
        <text class="profile-menu__shortcut-title">{{ item.title }}</text>
        <text class="profile-menu__shortcut-note">{{ !requireAuth ? '登录后查看' : item.key === 'membership' ? `${activeMembershipCount || 0} 张可用` : `${upcomingBookingCount || 0} 节待上` }}</text>
      </view>
    </view>
-      <!-- Menu item -->
+    <slot />
-      <view
+
-        v-else
+    <view class="profile-menu__links">
-        class="profile-menu__item"
+      <template v-for="item in secondaryItems" :key="item.key">
-        :class="{ 'profile-menu__item--admin': item.isAdmin }"
+        <view v-if="item.type === 'separator'" class="profile-menu__separator" />
-        hover-class="profile-menu__item--hover"
+        <view v-else class="profile-menu__item" :class="{ 'profile-menu__item--admin': item.isAdmin }"
-        hover-stay-time="150"
+          hover-class="profile-menu__item--hover" hover-stay-time="150" @tap="handleTap(item)">
-        @tap="handleTap(item)"
+          <text class="profile-menu__title">{{ item.title }}</text>
      >
        <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>
        <text v-if="item.badge" class="profile-menu__badge">{{ item.badge }}</text>
          <text class="profile-menu__arrow">›</text>
        </view>
      </template>
    </view>
  </view>
 </template>
 <script setup lang="ts">
@@ -40,28 +37,38 @@ interface MenuItem {
  path?: string
  isAdmin?: boolean
  badge?: string
-  action?: 'clear' | 'about'
+  action?: 'clear'
  requireAuth?: boolean
 }
 const props = defineProps<{
  isAdmin: boolean
  requireAuth?: boolean
  activeMembershipCount?: number
  upcomingBookingCount?: number
  inviteShareEligible?: boolean
 }>()
 const emit = defineEmits<{
  (e: 'clear-cache'): void
  (e: 'about'): void
  (e: 'require-login'): void
 }>()
 const menuItems = computed<MenuItem[]>(() => {
  const membershipBadge = props.activeMembershipCount && props.activeMembershipCount > 0
    ? `${props.activeMembershipCount}张`
    : undefined
  const bookingBadge = props.upcomingBookingCount && props.upcomingBookingCount > 0
    ? `${props.upcomingBookingCount}`
    : undefined
  const items: MenuItem[] = [
    {
      key: 'membership',
      type: 'item',
      title: '我的会员卡',
      path: '/pages/profile/membership',
      badge: membershipBadge,
      requireAuth: true,
    },
    {
@@ -69,8 +76,28 @@ const menuItems = computed<MenuItem[]>(() => {
      type: 'item',
      title: '我的预约',
      path: '/pages/profile/bookings',
      badge: bookingBadge,
      requireAuth: true,
    },
    ...(props.isAdmin
      ? [{
        key: 'teaching-schedule',
        type: 'item' as const,
        title: '我的课表',
        path: '/pages/profile/teaching-schedule',
        requireAuth: true,
      }]
      : []),
    // 临时隐藏邀请好友入口，后续恢复时直接取消这段注释即可。
    // ...(props.inviteShareEligible
    //   ? [{
    //     key: 'invite',
    //     type: 'item' as const,
    //     title: '邀请好友',
    //     path: '/pages/profile/invite',
    //     requireAuth: true,
    //   }]
    //   : []),
    {
      key: 'info',
      type: 'item',
@@ -88,12 +115,6 @@ const menuItems = computed<MenuItem[]>(() => {
      title: '清除缓存',
      action: 'clear',
    },
    {
      key: 'about',
      type: 'item',
      title: '关于我们',
      action: 'about',
    },
  ]
  if (props.isAdmin) {
@@ -111,6 +132,9 @@ const menuItems = computed<MenuItem[]>(() => {
  return items
 })
 const primaryItems = computed(() => menuItems.value.filter(item => item.key === 'membership' || item.key === 'bookings'))
 const secondaryItems = computed(() => menuItems.value.filter(item => item.key !== 'membership' && item.key !== 'bookings'))
 function handleTap(item: MenuItem) {
  if (item.requireAuth && !props.requireAuth) {
    emit('require-login')
@@ -118,8 +142,6 @@ function handleTap(item: MenuItem) {
  }
  if (item.action === 'clear') {
    emit('clear-cache')
  } else if (item.action === 'about') {
    emit('about')
  } else if (item.path) {
    uni.navigateTo({ url: item.path })
  }
@@ -128,237 +150,20 @@ function handleTap(item: MenuItem) {
 <style lang="scss" scoped>
 .profile-menu {
-  background: $bg-card;
+  &__shortcuts { display: flex; gap: 20rpx; margin: 24rpx 32rpx 0; }
-  border-radius: $radius-lg;
+  &__shortcut { flex: 1; min-width: 0; padding: 24rpx; box-sizing: border-box; border-radius: 26rpx; background: #fff; border: 1rpx solid #eee8e3; }
-  margin: $spacing-lg $spacing-lg 0;
+  &__shortcut-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16rpx; }
-  overflow: hidden;
+  &__shortcut-title { display: block; font-size: 27rpx; font-weight: 500; color: #514943; }
-
+  &__shortcut-note { display: block; font-size: 22rpx; color: #8b817b; margin-top: 8rpx; }
-  &__separator {
+  &__icon { width: 36rpx; height: 30rpx; position: relative; box-sizing: border-box; border: 2rpx solid #9b8878; border-radius: 6rpx; }
-    height: $spacing-sm;
+  &__icon--membership::after { content: ''; position: absolute; top: 8rpx; left: 0; right: 0; border-top: 2rpx solid #9b8878; }
-    background: $bg-page;
+  &__icon--bookings { border-color: #829a8b; border-top-width: 7rpx; &::after { content: ''; position: absolute; left: 8rpx; top: 8rpx; width: 12rpx; border-top: 2rpx solid #829a8b; } }
-  }
+  &__links { margin: 24rpx 32rpx 0; border-radius: 26rpx; background: #fff; overflow: hidden; }
-
+  &__item { display: flex; align-items: center; gap: 20rpx; min-height: 96rpx; padding: 0 28rpx; box-sizing: border-box; border-bottom: 1rpx solid #f2ede8; &:last-child { border-bottom: none; } }
-  &__item {
+  &__item--hover { background: #f4f1ec; }
-    display: flex;
+  &__item--admin { background: #eff3ed; .profile-menu__title { color: #617d73; } }
-    align-items: center;
+  &__title { flex: 1; font-size: 27rpx; font-weight: 400; color: #6f655e; }
-    padding: $spacing-md $spacing-lg;
+  &__arrow { font-size: 30rpx; color: #b2a79e; line-height: 1; }
-    border-bottom: 1rpx solid $border-color;
+  &__separator { height: 12rpx; background: #fbf9f6; }
    background: $bg-card;
    transition: background 0.15s;
    &:last-child {
      border-bottom: none;
    }
    &--hover {
      background: #f5f5f5;
    }
    &--admin {
      background: rgba($accent-color, 0.04);
    }
  }
  &__icon-wrap {
    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;
      }
    }
  }
  &__title {
    flex: 1;
    font-size: 30rpx;
    color: $text-primary;
    &--admin {
      color: $accent-color;
      font-weight: 500;
    }
  }
  &__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;
    line-height: 1;
    transform: scaleX(0.6);
    transform-origin: center;
  }
 }
 </style>
--- a/packages/app/src/components/QuickEntry.vue
+++ b/packages/app/src/components/QuickEntry.vue
@@ -1,98 +1,51 @@
 <template>
  <view class="quick-entry">
    <!-- ① Not logged in -->
-    <view v-if="!userStore.loggedIn" class="entry-card login-card" @tap="handleLogin">
+    <view v-if="!userStore.loggedIn" class="entry-pill pill-login" @tap="handleLogin">
-      <view class="entry-content">
+      <text class="pill-label">欢迎来到工作室</text>
-        <view class="entry-left">
+      <view class="pill-action action-login">
-          <view class="entry-icon-wrap login-icon">
+        <text class="pill-action-text">微信登录</text>
            <view class="icon-user" />
          </view>
          <view class="entry-text">
            <text class="entry-title">欢迎来到工作室</text>
            <text class="entry-subtitle">登录后即可预约课程</text>
          </view>
        </view>
        <view class="entry-btn login-btn">
          <text class="entry-btn-text">微信登录</text>
        </view>
      </view>
    </view>
-    <!-- ② Logged in, no memberships at all → new user -->
+    <!-- ② Logged in, no memberships → new user -->
    <view
      v-else-if="userStore.loggedIn && userStore.memberships.length === 0"
-      class="entry-card trial-card"
+      class="entry-pill pill-trial"
      @tap="handleTrialEntry"
    >
-      <view class="entry-content">
+
-        <view class="entry-left">
+      <text class="pill-label">首次体验专属课程</text>
-          <view class="entry-icon-wrap trial-icon">
+      <view class="pill-action action-trial">
-            <view class="icon-star" />
+        <text class="pill-action-text">预约体验课</text>
      </view>
          <view class="entry-text">
            <text class="entry-title">初次体验</text>
            <text class="entry-subtitle">专属体验课，了解普拉提</text>
          </view>
        </view>
        <view class="entry-btn trial-btn">
          <text class="entry-btn-text">预约体验课</text>
        </view>
      </view>
      <view class="card-badge trial-badge">新会员专享</view>
    </view>
-    <!-- ③ Has valid active card + running low warning -->
+    <!-- ③ Has valid active card -->
    <template v-else-if="userStore.hasValidMembership">
-      <view class="entry-card active-card" @tap="handleBooking">
+      <view class="entry-pill pill-active" @tap="handleBooking">
-        <view class="entry-content">
+          <text class="pill-label pill-label-active">{{ activeMembershipLabel }}</text>
-          <view class="entry-left">
+        <view class="pill-action action-book">
-            <view class="entry-icon-wrap active-icon">
+          <text class="pill-action-text">预约课程</text>
              <view class="icon-clock" />
            </view>
            <view class="entry-text">
              <text class="entry-title">一键约课</text>
              <text class="entry-subtitle">{{ activeMembershipLabel }}</text>
            </view>
          </view>
          <view class="entry-btn book-btn">
            <text class="entry-btn-text">立即预约</text>
          </view>
        </view>
        <!-- Running low badge -->
        <view v-if="isRunningLow" class="card-badge low-badge">
          仅剩 {{ lowestRemainingTimes }} 次
        </view>
      </view>
-      <!-- Renew reminder if running low -->
+      <!-- Running low: thin accent strip -->
-      <view v-if="isRunningLow" class="renew-tip" @tap="scrollToCardShop">
+      <view v-if="renewStripText" class="renew-strip" @tap="handleRenew">
-        <view class="renew-tip-icon">
+        <text class="renew-strip-text">{{ renewStripText }}</text>
-          <view class="icon-warning" />
+        <text class="renew-strip-arrow">›</text>
        </view>
        <text class="renew-tip-text">课次即将用完，点击续卡保持练习节奏</text>
        <text class="renew-tip-action">续卡 ›</text>
      </view>
    </template>
    <!-- ④ Has memberships but none active → buy card -->
    <view
      v-else
-      class="entry-card expired-card"
+      class="entry-pill pill-expired"
-      @tap="scrollToCardShop"
+      @tap="handleRenew"
    >
-      <view class="entry-content">
+      <text class="pill-label">暂无可用会员卡</text>
-        <view class="entry-left">
+      <view class="pill-action action-renew">
-          <view class="entry-icon-wrap expired-icon">
+        <text class="pill-action-text">续卡</text>
            <view class="icon-card" />
          </view>
          <view class="entry-text">
            <text class="entry-title">续费会员卡</text>
            <text class="entry-subtitle">您的卡已到期，续卡继续练习</text>
          </view>
        </view>
        <view class="entry-btn renew-btn">
          <text class="entry-btn-text">购买会员卡</text>
        </view>
      </view>
    </view>
  </view>
@@ -101,7 +54,7 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue'
 import { useUserStore } from '../stores/user'
-import { CardTypeCategory } from '@mp-pilates/shared'
+import { getErrorMessage } from '../utils/auth'
 const emit = defineEmits<{
  (e: 'scroll-to-card-shop'): void
@@ -115,15 +68,14 @@ async function handleLogin() {
  loading.value = true
  try {
    await userStore.loginWithSetup()
-  } catch {
+  } catch (err: unknown) {
-    uni.showToast({ title: '登录失败，请重试', icon: 'none' })
+    uni.showToast({ title: getErrorMessage(err, '登录失败，请重试'), icon: 'none' })
  } finally {
    loading.value = false
  }
 }
 function handleTrialEntry() {
  // Navigate to the first TRIAL card detail page
  uni.navigateTo({ url: '/pages/card/detail?trial=1' })
 }
@@ -135,13 +87,21 @@ function scrollToCardShop() {
  emit('scroll-to-card-shop')
 }
-// Computed: label for the active membership
+function handleRenew() {
  const cardTypeId = userStore.renewalHint?.cardTypeId
  if (cardTypeId) {
    uni.navigateTo({ url: `/pages/card/detail?id=${cardTypeId}` })
    return
  }
  scrollToCardShop()
 }
 const activeMembershipLabel = computed(() => {
  const active = userStore.activeMemberships
  if (!active.length) return ''
  const m = active[0]
  const cardName = m.cardType.name
-  if (m.cardType.type === CardTypeCategory.TIMES && m.remainingTimes !== null) {
+  if (m.remainingTimes !== null) {
    return `${cardName} · 剩余 ${m.remainingTimes} 次`
  }
  const expire = new Date(m.expireDate)
@@ -150,382 +110,32 @@ const activeMembershipLabel = computed(() => {
  return `${cardName} · 剩余 ${daysLeft} 天`
 })
-// Check if any TIMES card has ≤ 2 remaining
+const renewStripText = computed(() => {
-const isRunningLow = computed(() => {
+  const hint = userStore.renewalHint
-  return userStore.activeMemberships.some(
+  if (!hint || !userStore.hasValidMembership) return ''
-    (m) =>
+  if (hint.kind === 'times_low') {
-      m.cardType.type === CardTypeCategory.TIMES &&
+    return `仅剩 ${hint.remainingTimes ?? 0} 次 · 续卡保持节奏`
-      m.remainingTimes !== null &&
+  }
-      m.remainingTimes <= 2,
+  if (hint.kind === 'days_low') {
-  )
+    return `还剩 ${hint.daysLeft ?? 0} 天到期 · 续卡不中断`
-})
+  }
-
+  if (hint.kind === 'trial_low') {
-const lowestRemainingTimes = computed(() => {
+    return '体验课将尽 · 选购会员卡'
-  const timesCards = userStore.activeMemberships.filter(
+  }
-    (m) =>
+  return ''
      m.cardType.type === CardTypeCategory.TIMES &&
      m.remainingTimes !== null &&
      m.remainingTimes <= 2,
  )
  if (!timesCards.length) return 0
  return Math.min(...timesCards.map((m) => m.remainingTimes as number))
 })
 </script>
 <style lang="scss" scoped>
-.quick-entry {
+.quick-entry { margin: 24rpx 32rpx 0; }
-  margin: 24rpx 24rpx 0;
+.entry-pill { display: flex; align-items: center; min-height: 120rpx; box-sizing: border-box; padding: 24rpx; gap: 20rpx; border-radius: 28rpx; background: #f1e8e1; }
-}
+.pill-active { background: #edf2ec; }
-
+.pill-expired { background: #f0ece7; }
-.entry-card {
+.pill-label { flex: 1; min-width: 0; font-size: 26rpx; line-height: 1.6; color: #6f5c50; overflow-wrap: anywhere; }
-  position: relative;
+.pill-label-active { color: #526b5d; }
-  border-radius: 16rpx;
+.pill-action { flex-shrink: 0; min-height: 68rpx; padding: 0 24rpx; border-radius: 999rpx; display: flex; align-items: center; justify-content: center; background: #6b8276; }
-  padding: 36rpx 32rpx;
+.pill-action-text { font-size: 24rpx; font-weight: 400; color: #fff; white-space: nowrap; }
-  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.08);
+.renew-strip { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; padding: 18rpx 12rpx 0; }
-  overflow: hidden;
+.renew-strip-text { font-size: 22rpx; color: #8b817b; line-height: 1.5; }
-}
+.renew-strip-arrow { font-size: 28rpx; color: #8b817b; }
 .login-card {
  background: linear-gradient(135deg, #1a1a2e 0%, #2d2d5e 100%);
 }
 .trial-card {
  background: linear-gradient(135deg, #2d2d5e 0%, #4a3f7a 100%);
 }
 .active-card {
  background: linear-gradient(135deg, #2a3a4a 0%, #1a2a3a 100%);
 }
 .expired-card {
  background: linear-gradient(135deg, #4a4a4a 0%, #2a2a2a 100%);
 }
 .entry-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24rpx;
 }
 .entry-left {
  display: flex;
  align-items: center;
  gap: 28rpx;
  flex: 1;
 }
 .entry-icon-wrap {
  width: 88rpx;
  height: 88rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
 }
 .login-icon {
  background: rgba(255, 255, 255, 0.12);
 }
 .trial-icon {
  background: rgba(255, 215, 0, 0.2);
 }
 .active-icon {
  background: rgba(168, 196, 206, 0.25);
 }
 .expired-icon {
  background: rgba(255, 255, 255, 0.12);
 }
 /* ── Icon shapes (pure CSS) ── */
 /* User icon: head + shoulders */
 .icon-user {
  position: relative;
  width: 36rpx;
  height: 36rpx;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 20rpx;
    height: 20rpx;
    border-radius: 50%;
    background: #fff;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 28rpx;
    height: 14rpx;
    border-radius: 14rpx 14rpx 0 0;
    background: #fff;
  }
 }
 /* Star icon - diamond shape */
 .icon-star {
  position: relative;
  width: 32rpx;
  height: 32rpx;
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(45deg);
    width: 24rpx;
    height: 24rpx;
    background: #ffd700;
  }
 }
 /* Clock icon - circle with dot */
 .icon-clock {
  position: relative;
  width: 36rpx;
  height: 36rpx;
  border-radius: 50%;
  border: 3rpx solid #fff;
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background: #fff;
  }
 }
 /* Card icon */
 .icon-card {
  position: relative;
  width: 36rpx;
  height: 26rpx;
  border-radius: 4rpx;
  border: 3rpx solid #fff;
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 12rpx;
    height: 6rpx;
    border-radius: 2rpx;
    background: #fff;
  }
 }
 /* 闪电 icon — 更有能量感 */
 .icon-warning {
  position: relative;
  width: 22rpx;
  height: 22rpx;
  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%) rotate(-15deg);
    width: 0;
    height: 0;
    border-left: 8rpx solid transparent;
    border-right: 8rpx solid transparent;
    border-bottom: 18rpx solid #ffffff;
  }
  &::after {
    content: '';
    position: absolute;
    bottom: 2rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 10rpx;
    height: 3rpx;
    background: rgba(255, 255, 255, 0.5);
    border-radius: 2rpx;
  }
 }
 .entry-text {
  flex: 1;
  min-width: 0;
 }
 .entry-title {
  display: block;
  font-size: 34rpx;
  font-weight: 600;
  color: #ffffff;
  margin-bottom: 8rpx;
  letter-spacing: 1rpx;
 }
 .entry-subtitle {
  display: block;
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1.4;
 }
 .entry-btn {
  flex-shrink: 0;
  padding: 18rpx 36rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.2) 0%, transparent 100%);
    opacity: 0.5;
  }
 }
 .entry-btn-text {
  font-size: 28rpx;
  font-weight: 600;
  white-space: nowrap;
  position: relative;
  z-index: 1;
 }
 .login-btn,
 .trial-btn,
 .book-btn {
  background: $primary-color;
 }
 .renew-btn {
  background: #666;
 }
 .login-btn .entry-btn-text,
 .trial-btn .entry-btn-text,
 .book-btn .entry-btn-text,
 .renew-btn .entry-btn-text {
  color: #1a1a2e;
 }
 /* Corner badge */
 .card-badge {
  position: absolute;
  top: 0;
  right: 0;
  padding: 8rpx 20rpx;
  font-size: 20rpx;
  font-weight: 600;
  border-radius: 0 16rpx 0 16rpx;
 }
 .trial-badge {
  background: linear-gradient(135deg, #ffd700, #ffaa00);
  color: #1a1a2e;
 }
 .low-badge {
  background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 100%);
  color: #ffffff;
  box-shadow: 0 4rpx 12rpx rgba(255, 107, 53, 0.35);
 }
 /* Renew tip bar — 充满能量的激励配色 */
 .renew-tip {
  display: flex;
  align-items: center;
  gap: 16rpx;
  margin-top: 16rpx;
  padding: 22rpx 28rpx;
  background: linear-gradient(135deg, #FF6B35 0%, #FF8E53 60%, #FFAA5C 100%);
  border-radius: 16rpx;
  box-shadow: 0 6rpx 20rpx rgba(255, 107, 53, 0.3);
  position: relative;
  overflow: hidden;
  /* 右上角光晕装饰 */
  &::before {
    content: '';
    position: absolute;
    top: -20rpx;
    right: -20rpx;
    width: 120rpx;
    height: 120rpx;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.25) 0%, transparent 70%);
    pointer-events: none;
  }
  /* 底部微光 */
  &::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.08) 0%, transparent 100%);
    pointer-events: none;
  }
 }
 .renew-tip-icon {
  width: 52rpx;
  height: 52rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  backdrop-filter: blur(4rpx);
 }
 .renew-tip-text {
  flex: 1;
  font-size: 26rpx;
  color: #ffffff;
  line-height: 1.5;
  font-weight: 500;
  position: relative;
  z-index: 1;
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.1);
 }
 .renew-tip-action {
  font-size: 26rpx;
  color: #ffffff;
  font-weight: 700;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
  letter-spacing: 1rpx;
  /* 箭头增强感 */
  text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.15);
 }
 </style>
--- a/packages/app/src/components/SessionRow.vue
+++ b/packages/app/src/components/SessionRow.vue
@@ -0,0 +1,288 @@
 <template>
  <view
    class="session"
    :class="[
      `session--${tone}`,
      { 'session--muted': muted, 'session--history': history },
    ]"
    @tap="handleTap"
  >
    <!-- 左侧日期块 -->
    <view class="session__date">
      <text class="session__day">{{ dayNumber }}</text>
      <text class="session__weekday">{{ weekdayLabel }}</text>
    </view>
    <!-- 中央分隔：虚线 -->
    <view class="session__rail">
      <view class="session__dot" />
      <view class="session__line" />
    </view>
    <!-- 主体信息 -->
    <view class="session__body">
      <view class="session__top">
        <text class="session__time">{{ startTime }}</text>
        <text class="session__time-end">— {{ endTime }}</text>
      </view>
      <text class="session__membership">{{ cardName }}</text>
      <view class="session__bottom">
        <view class="session__status">
          <view class="session__status-dot" />
          <text class="session__status-text">{{ statusLabel }}</text>
        </view>
        <text v-if="!history" class="session__cancel" @tap.stop="handleCancel">取消预约</text>
      </view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import { computed } from 'vue'
 import type { BookingWithDetails } from '@mp-pilates/shared'
 import { BookingStatus } from '@mp-pilates/shared'
 import {
  bookingStatusLabel,
  bookingStatusStripeClass,
 } from '../utils/booking-helpers'
 const props = defineProps<{
  booking: BookingWithDetails
  /** 历史记录模式（更紧凑，隐藏取消按钮） */
  history?: boolean
 }>()
 const emit = defineEmits<{
  tap: [booking: BookingWithDetails]
  cancel: [booking: BookingWithDetails]
 }>()
 const weekdays = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
 function parseDate(dateStr: string): Date {
  const normalized = dateStr.slice(0, 10)
  const [y, m, d] = normalized.split('-').map(Number)
  return new Date(y, m - 1, d)
 }
 const date = computed(() => parseDate(props.booking.timeSlot.date))
 const dayNumber = computed(() => {
  const d = date.value.getDate()
  return d < 10 ? `0${d}` : String(d)
 })
 const weekdayLabel = computed(() => weekdays[date.value.getDay()])
 const startTime = computed(() => props.booking.timeSlot.startTime.slice(0, 5))
 const endTime = computed(() => props.booking.timeSlot.endTime.slice(0, 5))
 const cardName = computed(() => props.booking.membership?.cardType?.name || '会员卡')
 const statusLabel = computed(() => bookingStatusLabel(props.booking.status))
 const tone = computed(() => bookingStatusStripeClass(props.booking.status))
 const muted = computed(() => {
  return props.booking.status === BookingStatus.CANCELLED || props.booking.status === BookingStatus.NO_SHOW
 })
 function handleTap() {
  emit('tap', props.booking)
 }
 function handleCancel() {
  emit('cancel', props.booking)
 }
 </script>
 <style lang="scss" scoped>
 .session {
  position: relative;
  display: flex;
  align-items: stretch;
  gap: 20rpx;
  padding: 28rpx 24rpx;
  margin: 0 32rpx 16rpx;
  border-radius: 28rpx;
  background: #fdfbf7;
  border: 1rpx solid #ede5d8;
  box-shadow:
    0 1rpx 0 rgba(122, 99, 84, 0.02),
    0 4rpx 16rpx rgba(122, 99, 84, 0.03);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  &__date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2rpx;
    width: 80rpx;
    flex-shrink: 0;
    padding: 4rpx 0;
  }
  &__day {
    font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
    font-size: 44rpx;
    font-weight: 500;
    line-height: 1;
    color: #3a322b;
    font-variant-numeric: tabular-nums;
  }
  &__weekday {
    font-size: 19rpx;
    color: #a89d92;
    letter-spacing: 1rpx;
    margin-top: 4rpx;
  }
  &__rail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 14rpx;
    flex-shrink: 0;
    padding: 6rpx 0;
  }
  &__dot {
    width: 10rpx;
    height: 10rpx;
    border-radius: 50%;
    background: #6e8b7d;
    flex-shrink: 0;
  }
  &__line {
    width: 1rpx;
    flex: 1;
    background: linear-gradient(
      to bottom,
      rgba(155, 138, 117, 0.3) 0%,
      rgba(155, 138, 117, 0) 100%
    );
  }
  // 状态颜色
  &--stripe--pending &__dot { background: #b8967c; }
  &--stripe--confirmed &__dot { background: #6e8b7d; }
  &--stripe--completed &__dot { background: #6e8b7d; }
  &--stripe--cancelled &__dot { background: #c4a09a; }
  &--stripe--noshow &__dot { background: #b89a93; }
  &__body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6rpx;
    padding: 4rpx 0;
  }
  &__top {
    display: flex;
    align-items: baseline;
    gap: 6rpx;
  }
  &__time {
    font-family: "Songti SC", "STSong", "Noto Serif SC", "Source Han Serif SC", serif;
    font-size: 34rpx;
    font-weight: 500;
    color: #3a322b;
    font-variant-numeric: tabular-nums;
  }
  &__time-end {
    font-size: 22rpx;
    color: #a89d92;
    font-variant-numeric: tabular-nums;
  }
  &__membership {
    font-size: 22rpx;
    color: #786b61;
    line-height: 1.5;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  &__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12rpx;
    margin-top: 6rpx;
  }
  &__status {
    display: flex;
    align-items: center;
    gap: 8rpx;
  }
  &__status-dot {
    width: 8rpx;
    height: 8rpx;
    border-radius: 50%;
    background: #6e8b7d;
  }
  &__status-text {
    font-size: 21rpx;
    color: #786b61;
    letter-spacing: 1rpx;
  }
  &--stripe--pending &__status-text { color: #957c65; }
  &--stripe--pending &__status-dot { background: #b8967c; }
  &--stripe--cancelled &__status-text { color: #a89d92; }
  &--stripe--cancelled &__status-dot { background: #c4a09a; }
  &--stripe--noshow &__status-text { color: #9c7a6e; }
  &--stripe--noshow &__status-dot { background: #b89a93; }
  &__cancel {
    font-size: 22rpx;
    color: #a89d92;
    padding: 6rpx 0 6rpx 16rpx;
    letter-spacing: 1rpx;
    transition: color 0.2s ease;
  }
  &__cancel:active {
    color: #9c7a6e;
  }
  // 已取消 / 未出席：弱化
  &--muted {
    background: #f5f0e8;
    border-color: #e8e0d4;
    .session__day {
      color: #a89d92;
    }
    .session__time {
      color: #a89d92;
    }
    .session__membership {
      color: #a89d92;
    }
    .session__dot {
      opacity: 0.5;
    }
  }
 }
 .session:active {
  transform: scale(0.99);
  box-shadow:
    0 1rpx 0 rgba(122, 99, 84, 0.02),
    0 2rpx 8rpx rgba(122, 99, 84, 0.04);
 }
 </style>
--- a/packages/app/src/components/SlotCard.vue
+++ b/packages/app/src/components/SlotCard.vue
@@ -1,94 +1,29 @@
 <template>
-  <view class="slot-card-wrapper" :class="[`status-${statusClass}`]" @tap="emit('cardTap', timeSlot)">
+  <view class="slot-card" :class="`slot-card--${statusClass}`" @tap="emit('cardTap', timeSlot)">
-    <!-- Ticket background image -->
+    <view class="slot-heading">
-    <image
+      <view class="slot-time">
-      class="ticket-bg"
+        <text class="time-start">{{ startTimeDisplay }}</text>
-      src="/static/courseBg.png"
+        <text class="time-end">— {{ endTimeDisplay }}</text>
      mode="aspectFill"
    />
    <!-- Card content overlay -->
    <view class="ticket-content">
      <!-- ── Top section: Time row (like flight ticket) ── -->
      <view class="ticket-top">
        <!-- Left: Start time -->
        <view class="time-block">
          <text class="time-main">{{ startTimeDisplay }}</text>
          <text class="time-label">{{ timeSlot.date }}</text>
      </view>
-
+      <text class="slot-duration">{{ durationMin }} 分钟</text>
        <!-- Center: Duration + icon -->
        <view class="duration-block">
          <view class="duration-line">
            <view class="line-dot" />
            <view class="line-dash" />
            <view class="duration-icon">
              <text class="icon-text">⏱</text>
    </view>
-            <view class="line-dash" />
+    <view class="slot-body">
            <view class="line-dot" />
          </view>
          <text class="duration-text">{{ durationMin }}分钟</text>
        </view>
        <!-- Right: End time -->
        <view class="time-block time-block--right">
          <text class="time-main">{{ endTimeDisplay }}</text>
          <view class="capacity-tag" :class="capacityClass">
            <text class="capacity-text">{{ capacityLabel }}</text>
          </view>
        </view>
      </view>
      <!-- ── Dashed tear-off line ── -->
      <view class="tear-line" />
      <!-- ── Bottom section: Course name + Action ── -->
      <view class="ticket-bottom">
      <view class="course-info">
        <text class="course-name">普拉提私教</text>
        <text class="slot-status">{{ capacityLabel }}</text>
      </view>
        <!-- Action area -->
      <view class="action-area">
-          <!-- Expired -->
+        <template v-if="timeSlot.isBookedByMe">
-          <template v-if="isPast && !timeSlot.isBookedByMe">
+          <text class="booked-label">已预约</text>
-            <view class="action-badge badge-expired">
+          <view v-if="timeSlot.status === TimeSlotStatus.OPEN" class="cancel-link" @tap.stop="emit('cancel', timeSlot)">
-              <text>已过期</text>
+            <text>取消预约</text>
          </view>
        </template>
-
+        <button v-else-if="!isPast && timeSlot.status === TimeSlotStatus.OPEN && timeSlot.bookedCount < timeSlot.capacity"
-          <!-- OPEN + not booked -->
+          class="book-button" hover-class="book-button--pressed" @tap.stop="emit('book', timeSlot)">
-          <template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && !timeSlot.isBookedByMe">
+          预约
-            <view class="action-btn btn-book" @tap.stop="emit('book', timeSlot)">
+        </button>
-              <text>预约</text>
+        <text v-else class="unavailable-label">{{ isPast ? '已结束' : timeSlot.status === TimeSlotStatus.CLOSED ? '未开放' : '已约满' }}</text>
            </view>
          </template>
          <!-- OPEN + booked by me -->
          <template v-else-if="timeSlot.status === TimeSlotStatus.OPEN && timeSlot.isBookedByMe">
            <view class="action-badge badge-booked">
              <text>已预约</text>
            </view>
            <view class="cancel-link" @tap.stop="emit('cancel', timeSlot)">
              <text>取消</text>
            </view>
          </template>
          <!-- FULL -->
          <template v-else-if="timeSlot.status === TimeSlotStatus.FULL">
            <view class="action-badge badge-full">
              <text>已约满</text>
            </view>
          </template>
          <!-- CLOSED -->
          <template v-else>
            <view class="action-badge badge-closed">
              <text>已关闭</text>
            </view>
          </template>
        </view>
      </view>
    </view>
  </view>
@@ -96,7 +31,7 @@
 <script setup lang="ts">
 import type { TimeSlotWithBookingStatus } from '@mp-pilates/shared'
-import { TimeSlotStatus } from '@mp-pilates/shared'
+import { BookingStatus, TimeSlotStatus } from '@mp-pilates/shared'
 import { computed } from 'vue'
 import { isSlotPast } from '../utils/format'
@@ -120,20 +55,19 @@ const durationMin = computed(() => {
  return (eh * 60 + em) - (sh * 60 + sm)
 })
-const capacityLabel = computed(() => {
+const myBookingLabel = computed(() => (
-  const { bookedCount, capacity, status } = props.timeSlot
+  props.timeSlot.myBookingStatus === BookingStatus.PENDING_CONFIRMATION
-  if (status === TimeSlotStatus.CLOSED) return '已关闭'
+    ? '待老师确认'
-  if (status === TimeSlotStatus.FULL) return '已约满'
+    : '已预约'
-  const remaining = capacity - bookedCount
+))
  return `剩余${remaining}位`
 })
-const capacityClass = computed(() => {
+const capacityLabel = computed(() => {
-  const { bookedCount, capacity, status } = props.timeSlot
+  const { bookedCount, capacity, status, isBookedByMe } = props.timeSlot
-  if (status === TimeSlotStatus.CLOSED) return 'cap-closed'
+  if (isBookedByMe) return myBookingLabel.value
-  if (status === TimeSlotStatus.FULL) return 'cap-full'
+  if (isPast.value) return '已结束'
-  if (bookedCount >= capacity * 0.8) return 'cap-almost'
+  if (status === TimeSlotStatus.CLOSED) return '暂未开放'
-  return 'cap-open'
+  if (status === TimeSlotStatus.FULL || bookedCount >= capacity) return '名额已满'
  return `还可约 ${Math.max(0, capacity - bookedCount)} 位`
 })
 const statusClass = computed(() => {
@@ -148,275 +82,39 @@ const isPast = computed(() => isSlotPast(props.timeSlot.date, props.timeSlot.sta
 </script>
 <style lang="scss" scoped>
-/* ─── Wrapper ─── */
+.slot-card {
-.slot-card-wrapper {
+  margin: 0 32rpx 20rpx;
-  position: relative;
+  padding: 28rpx;
-  margin: 0 24rpx 20rpx;
+  border: 1rpx solid #eee8e3;
-  min-height: 220rpx;
+  border-radius: 28rpx;
-  transition: all 0.2s ease;
+  background: #fff;
-
+  color: #514943;
  &:active {
    transform: scale(0.98);
  }
  /* Status-based opacity */
  &.status-expired {
    opacity: 0.55;
  }
  &.status-full,
  &.status-closed {
    opacity: 0.75;
  }
 }
-
+.slot-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16rpx; }
-/* ─── Ticket background image ─── */
+.slot-time { display: flex; align-items: baseline; gap: 12rpx; font-variant-numeric: tabular-nums; }
-.ticket-bg {
+.time-start { font-size: 40rpx; font-weight: 500; line-height: 1.2; }
-  position: absolute;
+.time-end { font-size: 28rpx; color: #8b817b; }
-  top: 0;
+.slot-duration { flex-shrink: 0; font-size: 22rpx; color: #8b817b; }
-  left: 0;
+.slot-body { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; margin-top: 24rpx; }
-  width: 100%;
+.course-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
-  height: 100%;
+.course-name { font-size: 26rpx; font-weight: 400; }
-  pointer-events: none;
+.slot-status { font-size: 22rpx; color: #617d73; }
 .action-area { display: flex; flex-direction: column; align-items: flex-end; gap: 2rpx; flex-shrink: 0; }
 .book-button {
  display: flex; align-items: center; justify-content: center;
  min-width: 136rpx; height: 72rpx; margin: 0; padding: 0 30rpx;
  border: none; border-radius: 999rpx; background: #6b8276;
  font-size: 26rpx; font-weight: 400; line-height: 1; color: #fff;
  &::after { border: none; }
  &--pressed { background: #597264; }
 }
-
+.booked-label { font-size: 24rpx; color: #617d73; }
-/* ─── Content overlay ─── */
+.cancel-link { padding: 12rpx 0 8rpx 20rpx; font-size: 21rpx; color: #8b817b; }
-.ticket-content {
+.unavailable-label { padding: 14rpx 24rpx; border-radius: 999rpx; background: #f3f0ed; color: #8b817b; font-size: 23rpx; }
-  position: relative;
+.slot-card--booked { background: #f2f5f0; border-color: #e2e9df; }
-  z-index: 1;
+.slot-card--expired, .slot-card--closed, .slot-card--full {
-  display: flex;
+  background: #f7f5f2;
-  flex-direction: column;
+  .time-start, .course-name { color: #8b817b; }
-  padding: 28rpx 40rpx 24rpx;
+  .slot-status { color: #948a82; }
 }
 /* ═══ Top section: Time row ═══ */
 .ticket-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
 }
 .time-block {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 100rpx;
  &--right {
    align-items: flex-end;
  }
 }
 .time-main {
  font-size: 40rpx;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1;
  letter-spacing: 1rpx;
 }
 .time-label {
  margin-top: 8rpx;
  font-size: 22rpx;
  color: #999;
  font-weight: 500;
 }
 /* Duration center block */
 .duration-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  padding: 0 16rpx;
 }
 .duration-line {
  display: flex;
  align-items: center;
  width: 100%;
  margin-top: 8rpx;
 }
 .line-dot {
  width: 10rpx;
  height: 10rpx;
  border-radius: 50%;
  background: #ccc;
  flex-shrink: 0;
 }
 .line-dash {
  flex: 1;
  height: 2rpx;
  background: repeating-linear-gradient(
    to right,
    #d0d0d0 0,
    #d0d0d0 8rpx,
    transparent 8rpx,
    transparent 16rpx
  );
 }
 .duration-icon {
  flex-shrink: 0;
  width: 48rpx;
  height: 48rpx;
  border-radius: 50%;
  background: rgba($primary-color, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 8rpx;
 }
 .icon-text {
  font-size: 22rpx;
 }
 .duration-text {
  margin-top: 6rpx;
  font-size: 22rpx;
  color: #999;
  font-weight: 500;
 }
 /* Capacity tag */
 .capacity-tag {
  margin-top: 8rpx;
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 20rpx;
  &.cap-open {
    background: rgba(76, 175, 80, 0.08);
    .capacity-text {
      color: #4caf50;
    }
  }
  &.cap-almost {
    background: rgba(245, 158, 11, 0.08);
    .capacity-text {
      color: #f59e0b;
    }
  }
  &.cap-full {
    background: rgba(239, 68, 68, 0.08);
    .capacity-text {
      color: #ef4444;
    }
  }
  &.cap-closed {
    background: rgba(0, 0, 0, 0.04);
    .capacity-text {
      color: #999;
    }
  }
 }
 .capacity-text {
  font-size: 20rpx;
  font-weight: 600;
 }
 /* ═══ Tear-off dashed line ═══ */
 .tear-line {
  margin: 20rpx -40rpx 16rpx;
  height: 2rpx;
  background: repeating-linear-gradient(
    to right,
    #e0dcd6 0,
    #e0dcd6 10rpx,
    transparent 10rpx,
    transparent 20rpx
  );
  opacity: 0.6;
 }
 /* ═══ Bottom section ═══ */
 .ticket-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .course-info {
  flex: 1;
 }
 .course-name {
  font-size: 30rpx;
  font-weight: 700;
  color: #1a1a2e;
  letter-spacing: 1rpx;
 }
 /* ─── Action area ─── */
 .action-area {
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex-shrink: 0;
 }
 .action-btn,
 .action-badge {
  padding: 10rpx 24rpx;
  border-radius: 20rpx;
  font-size: 26rpx;
  font-weight: 600;
  white-space: nowrap;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .btn-book {
  background: linear-gradient(135deg, $primary-color 0%, $primary-dark 100%);
  color: #fff;
  box-shadow: 0 4rpx 16rpx rgba($primary-dark, 0.3);
  min-width: 120rpx;
  height: 60rpx;
  transition: all 0.15s;
  &:active {
    opacity: 0.85;
    transform: scale(0.96);
  }
 }
 .badge-booked {
  background: linear-gradient(135deg, $primary-selected-bg, $primary-border);
  color: $primary-dark;
 }
 .badge-expired {
  background: #f0f0f0;
  color: #999;
 }
 .badge-full {
  background: rgba(239, 68, 68, 0.1);
  color: #ef4444;
 }
 .badge-closed {
  background: #f0f0f0;
  color: #bbb;
 }
 .cancel-link {
  font-size: 22rpx;
  color: #ef4444;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-color: rgba(239, 68, 68, 0.3);
 }
 </style>
--- a/packages/app/src/components/StudioInfo.vue
+++ b/packages/app/src/components/StudioInfo.vue
@@ -1,40 +1,59 @@
 <template>
  <view class="studio-info">
-    <!-- Horizontal photo strip -->
+    <text class="section-title">来工作室坐坐</text>
    <scroll-view v-if="studioInfo?.photos?.length" scroll-x class="photo-strip" :show-scrollbar="false">
      <view class="photo-strip-inner">
        <image v-for="(photo, idx) in studioInfo.photos" :key="idx" class="strip-photo" :src="photo" mode="aspectFill"
          @tap="previewPhoto(idx)" />
      </view>
    </scroll-view>
    <!-- Address + Chat row -->
    <view class="location-row">
      <view class="location-left" @tap="handleAddressTap">
-        <view class="location-icon" />
+        <view class="location-content">
          <text class="location-label">场馆地址</text>
          <text class="location-text">
            {{ studioInfo?.address || '深圳市宝安区西乡街道财富港 D 座 1203D' }}
          </text>
        </view>
      </view>
      <button class="chat-btn" open-type="contact">
-        <view class="chat-icon" />
+        <text>联系老师</text>
      </button>
    </view>
    <!-- Horizontal gallery -->
    <view class="gallery-block">
      <scroll-view scroll-x class="gallery-scroll" :show-scrollbar="false" enhanced>
        <view class="gallery-track">
          <view
            v-for="(photo, idx) in galleryPhotos"
            :key="photo"
            class="gallery-item"
            @tap="previewPhoto(idx)"
          >
            <image class="gallery-image" :src="photo" mode="aspectFill" />
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
-import type { StudioConfig } from '@mp-pilates/shared'
+import { computed } from 'vue'
 import {
  DEFAULT_STUDIO_GALLERY_PHOTOS,
  type StudioConfig,
 } from '@mp-pilates/shared'
 const props = defineProps<{
  studioInfo: StudioConfig | null
 }>()
 const galleryPhotos = computed(() => {
  const photos = props.studioInfo?.photos?.filter(Boolean) ?? []
  return photos.length ? photos : [...DEFAULT_STUDIO_GALLERY_PHOTOS]
 })
 function previewPhoto(index: number) {
  if (!props.studioInfo?.photos?.length) return
  uni.previewImage({
    current: index,
-    urls: props.studioInfo.photos,
+    urls: galleryPhotos.value,
  })
 }
@@ -68,143 +87,15 @@ function copyAddress() {
 </script>
 <style lang="scss" scoped>
-.studio-info {
+.studio-info { margin: 36rpx 32rpx 0; }
-  background: #ffffff;
+.section-title { display: block; margin-bottom: 20rpx; font-size: 30rpx; font-weight: 500; color: #514943; }
-}
+.location-row { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; margin-bottom: 20rpx; }
-
+.location-left, .location-content { flex: 1; min-width: 0; }
-/* ── Photo strip ── */
+.location-label { display: block; font-size: 21rpx; color: #8b817b; margin-bottom: 6rpx; }
-.photo-strip {
+.location-text { font-size: 24rpx; color: #6f655e; line-height: 1.7; overflow-wrap: anywhere; }
-  width: 100%;
+.chat-btn { flex-shrink: 0; margin: 0; padding: 0 20rpx; line-height: 64rpx; font-size: 23rpx; border: none; border-radius: 999rpx; background: #f0eae4; color: #78675c; &::after { border: none; } }
-  padding: 24rpx 0;
+.gallery-scroll { width: 100%; }
-}
+.gallery-track { display: inline-flex; gap: 16rpx; }
-
+.gallery-item { width: 264rpx; height: 180rpx; border-radius: 20rpx; overflow: hidden; flex-shrink: 0; background: #e9e1d8; }
-.photo-strip-inner {
+.gallery-image { width: 100%; height: 100%; }
  display: flex;
  flex-direction: row;
  gap: 16rpx;
  padding: 0 24rpx;
  width: max-content;
 }
 .strip-photo {
  width: 240rpx;
  height: 160rpx;
  border-radius: 12rpx;
  flex-shrink: 0;
 }
 /* ── Location row ── */
 .location-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 32rpx 28rpx;
  gap: 24rpx;
 }
 .location-left {
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex: 1;
  min-width: 0;
 }
 .location-text {
  font-size: 26rpx;
  color: #666;
  line-height: 1.5;
  word-break: break-all;
 }
 /* ── Icons ── */
 .location-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: rgba($brand-color, 0.06);
  position: relative;
  flex-shrink: 0;
  // 定位图标 — 圆头 + 尖尾
  &::before {
    content: '';
    position: absolute;
    top: 14rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 18rpx;
    height: 18rpx;
    border: 2.5rpx solid $brand-color;
    border-radius: 50% 50% 50% 0;
    transform: translateX(-50%) rotate(-45deg);
    box-sizing: border-box;
  }
  // 中心白点
  &::after {
    content: '';
    position: absolute;
    top: 21rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 6rpx;
    height: 6rpx;
    background: $brand-color;
    border-radius: 50%;
    box-sizing: border-box;
  }
 }
 .chat-btn {
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
  background: rgba($brand-color, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 0;
  margin: 0;
  border: none;
 }
 .chat-btn::after {
  border: none;
 }
 .chat-icon {
  width: 56rpx;
  height: 56rpx;
  border-radius: 50%;
  background: rgba($brand-color, 0.06);
  position: relative;
  // 消息气泡
  &::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 26rpx;
    height: 20rpx;
    border: 2.5rpx solid $brand-color;
    border-radius: 6rpx;
    box-sizing: border-box;
  }
  // 气泡尾巴
  &::after {
    content: '';
    position: absolute;
    bottom: 12rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 5rpx solid transparent;
    border-right: 5rpx solid transparent;
    border-top: 7rpx solid $brand-color;
  }
 }
 </style>
--- a/packages/app/src/components/TimePeriodFilter.vue
+++ b/packages/app/src/components/TimePeriodFilter.vue
@@ -1,10 +1,10 @@
 <template>
-  <view class="time-period-filter">
+  <view class="time-period-filter" :class="`time-period-filter--${variant}`">
    <view
      v-for="tab in tabs"
      :key="tab.key ?? 'all'"
      class="tab-item"
-      :class="{ active: modelValue === tab.key }"
+      :class="[`tab-item--${variant}`, { active: modelValue === tab.key }]"
      @tap="handleChange(tab.key)"
    >
      <text class="tab-label">{{ tab.label }}</text>
@@ -25,14 +25,17 @@ interface Tab {
 interface Props {
  modelValue: PeriodKey
  variant?: 'default' | 'booking' | 'soft'
 }
-defineProps<Props>()
+const props = defineProps<Props>()
 const emit = defineEmits<{
  change: [period: PeriodKey]
  'update:modelValue': [period: PeriodKey]
 }>()
 const variant = computed(() => props.variant ?? 'default')
 const tabs = computed<Tab[]>(() => [
  { key: null, label: '全部' },
  ...Object.entries(TIME_PERIODS).map(([key, val]) => ({
@@ -55,6 +58,11 @@ function handleChange(key: PeriodKey) {
  padding: 0 24rpx;
  border-bottom: 1rpx solid $primary-border;
  &.time-period-filter--booking {
    background: rgba(252, 250, 248, 0.96);
    border-bottom-color: rgba(192, 154, 137, 0.12);
  }
  .tab-item {
    flex: 1;
    display: flex;
@@ -87,6 +95,40 @@ function handleChange(key: PeriodKey) {
        border-radius: 2rpx;
      }
    }
    &.tab-item--booking {
      .tab-label {
        color: #9d8b83;
      }
      &.active {
        .tab-label {
          color: #8f6759;
        }
        &::after {
          width: 48rpx;
          height: 5rpx;
          background: linear-gradient(90deg, #c8a899, #a87d6c);
          border-radius: 999rpx;
          box-shadow: 0 4rpx 10rpx rgba(168, 125, 108, 0.18);
        }
      }
    }
  }
 }
 .time-period-filter.time-period-filter--soft {
  margin: 0 32rpx 24rpx; padding: 6rpx;
  border: none; border-radius: 999rpx; background: #f0ece7;
  .tab-item {
    padding: 14rpx 0; border-radius: 999rpx;
    .tab-label { font-size: 24rpx; color: #8b817b; }
    &.active {
      background: #fff;
      .tab-label { color: #617d73; font-weight: 500; }
      &::after { display: none; }
    }
  }
 }
 </style>
--- a/packages/app/src/components/UpcomingBooking.vue
+++ b/packages/app/src/components/UpcomingBooking.vue
@@ -9,6 +9,7 @@
      v-for="booking in displayedBookings"
      :key="booking.id"
      class="booking-card"
      @tap="goToBookingDetail(booking.id)"
    >
      <!-- Date column -->
      <view class="date-col">
@@ -24,7 +25,6 @@
      <view class="details-col">
        <text class="card-name">{{ booking.membership.cardType.name }}</text>
        <view class="time-row">
          <text class="time-icon">🕐</text>
          <text class="time-text">
            {{ formatTime(booking.timeSlot.startTime) }} – {{ formatTime(booking.timeSlot.endTime) }}
          </text>
@@ -72,6 +72,7 @@ function formatTime(timeStr: string): string {
 function statusLabel(status: BookingStatus): string {
  const map: Record<BookingStatus, string> = {
    [BookingStatus.PENDING_CONFIRMATION]: '待确认',
    [BookingStatus.CONFIRMED]: '已确认',
    [BookingStatus.CANCELLED]: '已取消',
    [BookingStatus.COMPLETED]: '已完成',
@@ -81,6 +82,7 @@ function statusLabel(status: BookingStatus): string {
 }
 function statusDotClass(status: BookingStatus): string {
  if (status === BookingStatus.PENDING_CONFIRMATION) return 'dot--pending'
  if (status === BookingStatus.CONFIRMED) return 'dot--confirmed'
  if (status === BookingStatus.COMPLETED) return 'dot--completed'
  if (status === BookingStatus.CANCELLED) return 'dot--cancelled'
@@ -88,6 +90,7 @@ function statusDotClass(status: BookingStatus): string {
 }
 function statusTextClass(status: BookingStatus): string {
  if (status === BookingStatus.PENDING_CONFIRMATION) return 'text--pending'
  if (status === BookingStatus.CONFIRMED) return 'text--confirmed'
  if (status === BookingStatus.COMPLETED) return 'text--completed'
  if (status === BookingStatus.CANCELLED) return 'text--cancelled'
@@ -97,133 +100,32 @@ function statusTextClass(status: BookingStatus): string {
 function goToBookings() {
  uni.navigateTo({ url: '/pages/profile/bookings' })
 }
 function goToBookingDetail(id: string) {
  uni.navigateTo({ url: `/pages/booking/detail?id=${id}` })
 }
 </script>
 <style lang="scss" scoped>
-.upcoming-section {
+.upcoming-section { margin: 36rpx 32rpx 0; }
-  margin: 24rpx 24rpx 0;
+.section-header { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; margin-bottom: 20rpx; }
-}
+.section-title { font-size: 30rpx; font-weight: 500; color: #514943; }
-
+.section-more { font-size: 23rpx; color: #8b817b; padding: 8rpx 0; }
-.section-header {
+.booking-card { display: flex; align-items: center; gap: 24rpx; margin-bottom: 16rpx; padding: 26rpx; border-radius: 28rpx; background: #fff; border: 1rpx solid #eee8e3; }
-  display: flex;
+.date-col { display: flex; flex-direction: column; align-items: center; gap: 4rpx; width: 72rpx; flex-shrink: 0; }
-  align-items: center;
+.date-day { font-size: 44rpx; font-weight: 400; line-height: 1.1; color: #617d73; }
-  justify-content: space-between;
+.date-month, .date-weekday { font-size: 20rpx; color: #8b817b; }
-  margin-bottom: 16rpx;
+.booking-divider { width: 1rpx; height: 80rpx; background: #eee8e3; flex-shrink: 0; }
-}
+.details-col { flex: 1; min-width: 0; }
-
+.card-name { display: block; font-size: 26rpx; color: #514943; font-weight: 400; line-height: 1.5; margin-bottom: 8rpx; overflow-wrap: anywhere; }
-.section-title {
+.time-row { margin-bottom: 8rpx; }
-  font-size: 32rpx;
+.time-text { font-size: 24rpx; color: #6f655e; font-variant-numeric: tabular-nums; }
-  font-weight: 700;
+.status-row { display: flex; align-items: center; gap: 8rpx; }
-  color: #1a1a2e;
+.status-dot { width: 8rpx; height: 8rpx; border-radius: 50%; background: #a5b8ab; }
-}
+.status-text { font-size: 21rpx; color: #617d73; }
-
+.dot--pending { background: #b8a18b; }
-.section-more {
+.text--pending { color: #957c65; }
-  font-size: 26rpx;
+.dot--cancelled { background: #b69589; }
-  color: $primary-dark;
+.text--cancelled { color: #9c7a6e; }
-}
+.booking-arrow { font-size: 32rpx; color: #b2a79e; flex-shrink: 0; }
 .booking-card {
  background: #ffffff;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  padding: 28rpx 28rpx;
  display: flex;
  align-items: center;
  gap: 24rpx;
  margin-bottom: 16rpx;
 }
 .date-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 88rpx;
 }
 .date-day {
  font-size: 52rpx;
  font-weight: 800;
  color: #1a1a2e;
  line-height: 1;
 }
 .date-month {
  font-size: 22rpx;
  color: $primary-dark;
  margin-top: 4rpx;
 }
 .date-weekday {
  font-size: 22rpx;
  color: #999;
  margin-top: 4rpx;
 }
 .booking-divider {
  width: 2rpx;
  height: 80rpx;
  background: #f0f0f0;
  flex-shrink: 0;
 }
 .details-col {
  flex: 1;
 }
 .card-name {
  display: block;
  font-size: 30rpx;
  font-weight: 600;
  color: #1a1a2e;
  margin-bottom: 10rpx;
 }
 .time-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
  margin-bottom: 10rpx;
 }
 .time-icon {
  font-size: 24rpx;
 }
 .time-text {
  font-size: 26rpx;
  color: #555;
 }
 .status-row {
  display: flex;
  align-items: center;
  gap: 8rpx;
 }
 .status-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
 }
 .dot--confirmed { background: #27ae60; }
 .dot--completed { background: #3498db; }
 .dot--cancelled { background: #e74c3c; }
 .dot--default   { background: #999; }
 .status-text {
  font-size: 24rpx;
  color: #999;
 }
 .text--confirmed { color: #27ae60; }
 .text--completed { color: #3498db; }
 .text--cancelled { color: #e74c3c; }
 .booking-arrow {
  font-size: 36rpx;
  color: #ccc;
  flex-shrink: 0;
 }
 </style>
--- a/packages/app/src/components/UserCard.vue
+++ b/packages/app/src/components/UserCard.vue
@@ -1,15 +1,14 @@
 <template>
  <view class="user-card">
-    <!-- Header: gradient background, padded to sit below nav bar -->
+    <view class="user-card__header">
    <view class="user-card__header" :style="{ paddingTop: (navBarHeight ?? 0) + 'px' }">
      <!-- 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.jpg" mode="aspectFill" />
        </view>
        <view class="user-card__guest-info">
-          <text class="user-card__guest-title">Hi，欢迎来到普拉提</text>
+          <text class="user-card__guest-title">欢迎来到工作室</text>
-          <text class="user-card__guest-sub">登录后查看个人数据</text>
+          <text class="user-card__guest-sub">登录后查看会员卡与练习记录</text>
        </view>
        <button class="user-card__login-btn" :loading="loading" @tap="handleLogin">
          微信登录
@@ -17,7 +16,7 @@
      </view>
      <!-- Logged in + profile loaded -->
-      <view v-else-if="loggedIn && hasProfile" class="user-card__user">
+      <view v-else-if="loggedIn && hasProfile" class="user-card__user" @tap="emit('edit')">
        <view class="user-card__avatar-wrap">
          <image
            class="user-card__avatar-img"
@@ -25,17 +24,15 @@
            mode="aspectFill"
            @error="onAvatarError"
          />
          <!-- 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 class="user-card__info">
          <view class="user-card__name-row">
            <text class="user-card__nickname">{{ user!.nickname }}</text>
            <text v-if="hasMembership" class="user-card__member-label">会员</text>
          </view>
-          <text v-if="maskedPhone" class="user-card__phone">{{ maskedPhone }}</text>
+          <text class="user-card__phone">{{ maskedPhone || '完善个人资料' }}</text>
        </view>
        <text class="user-card__edit">资料 ›</text>
      </view>
      <!-- Logged in but profile still loading -->
@@ -55,18 +52,18 @@
    <!-- Stats row: shown only when profile is loaded -->
    <view v-if="loggedIn && hasProfile" class="user-card__stats">
      <view class="user-card__stat-item">
-        <text class="user-card__stat-value">{{ stats?.totalBookings ?? 0 }}</text>
+        <text class="user-card__stat-value">{{ stats?.totalBookings ?? '—' }}</text>
-        <text class="user-card__stat-label">总训练(次)</text>
+        <text class="user-card__stat-label">累计上课 · 节</text>
      </view>
      <view class="user-card__stat-divider" />
      <view class="user-card__stat-item">
-        <text class="user-card__stat-value">{{ stats?.monthBookings ?? 0 }}</text>
+        <text class="user-card__stat-value">{{ stats?.monthBookings ?? '—' }}</text>
-        <text class="user-card__stat-label">本月(次)</text>
+        <text class="user-card__stat-label">本月上课 · 节</text>
      </view>
      <view class="user-card__stat-divider" />
      <view class="user-card__stat-item">
        <text class="user-card__stat-value">{{ remainingSessions }}</text>
-        <text class="user-card__stat-label">剩余课时(节)</text>
+        <text class="user-card__stat-label">剩余课时 · 节</text>
      </view>
    </view>
  </view>
@@ -84,12 +81,11 @@ const props = defineProps<{
  stats: UserStatsResponse | null
  memberships?: readonly MembershipWithCardType[]
  loading?: boolean
  /** Height of the custom nav bar in px, so header content starts below it */
  navBarHeight?: number
 }>()
 const emit = defineEmits<{
  (e: 'login'): void
  (e: 'edit'): void
 }>()
 const avatarFailed = ref(false)
@@ -117,24 +113,25 @@ const maskedPhone = computed(() => {
  return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
 })
 // Derive VIP level from active memberships count
 const activeMemberships = computed(() =>
  props.memberships?.filter((m) => m.status === MembershipStatus.ACTIVE) ?? [],
 )
-const vipLevel = computed(() => {
+const activeMembershipCount = computed(
-  const count = activeMemberships.value.length
+  () => props.user?.activeMembershipCount ?? activeMemberships.value.length,
-  if (count >= 3) return 'VIP3'
+)
  if (count >= 2) return 'VIP2'
  if (count >= 1) return 'VIP1'
  return null
 })
-// Sum remaining sessions from all active time-based memberships
+const hasMembership = computed(() => activeMembershipCount.value > 0)
 function toSafeCount(value: number | null | undefined): number {
  return typeof value === 'number' && Number.isFinite(value) ? value : 0
 }
 // Sum remaining sessions from all active count-limited memberships.
 const remainingSessions = computed(() =>
  activeMemberships.value
-    .filter((m) => m.cardType.type === 'TIMES')
+    .filter((m) => m.remainingTimes !== null)
-    .reduce((sum, m) => sum + m.remainingCount, 0),
+    .reduce((sum, m) => sum + toSafeCount(m.remainingTimes), 0),
 )
 function onAvatarError() {
@@ -148,186 +145,28 @@ function handleLogin() {
 <style lang="scss" scoped>
 .user-card {
-  background: linear-gradient(160deg, #E1F4FA 0%, $primary-color 50%, $primary-dark 100%);
+  margin: 20rpx 32rpx 0; padding: 28rpx; background: #f2e9e3; border-radius: 32rpx;
-  border-radius: 0 0 40rpx 40rpx;
+  &__user, &__loading { display: flex; align-items: center; gap: 20rpx; }
-  overflow: hidden;
+  &__avatar-wrap { width: 108rpx; height: 108rpx; flex-shrink: 0; }
-
+  &__avatar-img { width: 100%; height: 100%; box-sizing: border-box; border-radius: 50%; border: 5rpx solid #fcf8f4; }
-  &__header {
+  &__info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10rpx; }
-    padding: $spacing-lg $spacing-lg $spacing-lg;
+  &__name-row { display: flex; align-items: center; flex-wrap: wrap; gap: 10rpx; }
-  }
+  &__nickname { font-size: 36rpx; font-weight: 500; line-height: 1.4; color: #514943; overflow-wrap: anywhere; }
-
+  &__member-label { flex-shrink: 0; font-size: 19rpx; color: #8b6c5b; background: #fbf5ef; padding: 4rpx 12rpx; border-radius: 999rpx; }
-  // ── Guest state ──
+  &__phone { font-size: 24rpx; color: #8b7b70; }
-  &__guest {
+  &__edit { flex-shrink: 0; font-size: 22rpx; color: #8b7b70; padding: 16rpx 0 16rpx 8rpx; }
-    display: flex;
+  &__stats { display: flex; align-items: stretch; margin-top: 28rpx; padding-top: 26rpx; border-top: 1rpx solid #e3d7ce; }
-    align-items: center;
+  &__stat-item { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10rpx; }
-    gap: $spacing-md;
+  &__stat-value { font-size: 40rpx; font-weight: 400; color: #6f5c50; line-height: 1.15; font-variant-numeric: tabular-nums; }
-  }
+  &__stat-label { font-size: 20rpx; color: #8b7b70; }
-
+  &__stat-divider { width: 1rpx; margin: 6rpx 0; background: #e3d7ce; }
-  &__guest-info {
+  &__guest { display: flex; align-items: center; flex-wrap: wrap; gap: 20rpx; }
-    flex: 1;
+  &__guest-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10rpx; }
-    display: flex;
+  &__guest-title { font-size: 32rpx; font-weight: 500; color: #514943; }
-    flex-direction: column;
+  &__guest-sub { font-size: 23rpx; color: #8b7b70; line-height: 1.6; }
-    gap: $spacing-xs;
+  &__login-btn { width: 100%; height: 76rpx; line-height: 76rpx; margin: 4rpx 0 0; padding: 0; border: none; border-radius: 999rpx; background: #6b8276; color: #fff; font-size: 26rpx; font-weight: 400; &::after { border: none; } }
-  }
+  &__avatar-skeleton { width: 108rpx; height: 108rpx; border-radius: 50%; background: #e6d9ce; }
-
+  &__nickname-skeleton { width: 150rpx; height: 32rpx; border-radius: 8rpx; background: #e6d9ce; }
-  &__guest-title {
+  &__phone-skeleton { width: 180rpx; height: 22rpx; border-radius: 6rpx; background: #e6d9ce; }
    font-size: 32rpx;
    font-weight: 600;
    color: #ffffff;
  }
  &__guest-sub {
    font-size: 24rpx;
    color: rgba(255, 255, 255, 0.65);
  }
  &__login-btn {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 26rpx;
    font-weight: 500;
    border: none;
    border-radius: $radius-lg;
    padding: 0 $spacing-md;
    height: 64rpx;
    line-height: 64rpx;
    min-width: 160rpx;
    &::after {
      border: none;
    }
  }
  // ── Logged-in user ──
  &__user {
    display: flex;
    align-items: center;
    gap: $spacing-md;
  }
  &__avatar-wrap {
    position: relative;
    flex-shrink: 0;
    width: 120rpx;
    height: 120rpx;
  }
  &__avatar-img {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    border: 4rpx solid rgba(255, 255, 255, 0.4);
  }
  &__vip-badge {
    position: absolute;
    bottom: -6rpx;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    border-radius: 20rpx;
    padding: 2rpx 12rpx;
    border: 2rpx solid #ffffff;
  }
  &__vip-text {
    font-size: 18rpx;
    font-weight: 700;
    color: #7c2d12;
    line-height: 1;
  }
  &__info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8rpx;
  }
  &__name-row {
    display: flex;
    align-items: center;
    gap: $spacing-sm;
  }
  &__nickname {
    font-size: 36rpx;
    font-weight: 600;
    color: #ffffff;
  }
  &__phone {
    font-size: 26rpx;
    color: rgba(255, 255, 255, 0.75);
  }
  // ── Loading state ──
  &__loading {
    display: flex;
    align-items: center;
    gap: $spacing-md;
  }
  &__avatar-skeleton {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
  }
  &__nickname-skeleton {
    width: 160rpx;
    height: 36rpx;
    border-radius: $radius-sm;
    background: rgba(255, 255, 255, 0.3);
  }
  &__phone-skeleton {
    width: 120rpx;
    height: 26rpx;
    border-radius: $radius-sm;
    background: rgba(255, 255, 255, 0.2);
    margin-top: 8rpx;
  }
  // ── Stats row ──
  &__stats {
    display: flex;
    align-items: stretch;
    background: rgba(255, 255, 255, 0.15);
    margin: 0 $spacing-lg $spacing-lg;
    border-radius: $radius-lg;
    padding: $spacing-md 0;
    backdrop-filter: blur(10rpx);
  }
  &__stat-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: $spacing-xs 0;
  }
  &__stat-divider {
    width: 1rpx;
    background: rgba(255, 255, 255, 0.3);
    margin: $spacing-xs 0;
  }
  &__stat-value {
    font-size: 44rpx;
    font-weight: 700;
    color: #ffffff;
    line-height: 1;
  }
  &__stat-label {
    font-size: 22rpx;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 6rpx;
  }
 }
 </style>
--- a/packages/app/src/manifest.json
+++ b/packages/app/src/manifest.json
@@ -1,12 +1,12 @@
 {
  "name": "普拉提约课",
-  "appid": "",
+  "appid": "wx3e7a133d2305fa2c",
  "description": "普拉提工作室约课小程序",
  "versionName": "0.1.0",
  "versionCode": "100",
  "transformPx": false,
  "mp-weixin": {
-    "appid": "",
+    "appid": "wx3e7a133d2305fa2c",
    "setting": {
      "urlCheck": false,
      "es6": true,
--- a/packages/app/src/pages.json
+++ b/packages/app/src/pages.json
@@ -3,6 +3,7 @@
    "autoscan": true
  },
  "pages": [
    { "path": "pages/admin/analytics", "style": { "navigationStyle": "custom", "enablePullDownRefresh": true } },
    {
      "path": "pages/home/index",
      "style": {
@@ -45,12 +46,30 @@
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/profile/teaching-schedule",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/profile/info",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/profile/invite",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/teacher/detail",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/admin/index",
      "style": {
@@ -69,12 +88,6 @@
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/admin/week-template",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/admin/slot-adjust",
      "style": {
@@ -87,6 +100,28 @@
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/admin/member-detail",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/admin/member-edit",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/admin/member-supplement",
      "style": { "navigationStyle": "custom" }
    },
    {
      "path": "pages/admin/member-arrange",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/admin/orders",
      "style": {
@@ -104,6 +139,18 @@
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/admin/flash-sales",
      "style": {
        "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/flash-sale/detail",
      "style": {
        "navigationStyle": "custom"
      }
    }
  ],
  "globalStyle": {
--- a/packages/app/src/pages/admin/analytics.vue
+++ b/packages/app/src/pages/admin/analytics.vue
@@ -0,0 +1,279 @@
 <template>
  <view class="report" :style="{ paddingTop: navBarHeight }">
    <CustomNavBar title="统计分析" show-back />
    <view class="intro">
      <text class="eyebrow">PILATES · MONTHLY REVIEW</text>
      <text class="title">每一节课，都有迹可循。</text>
      <text class="muted">工作室月度统计 · 按课程日期归档</text>
    </view>
    <view class="month-nav">
      <button aria-label="上个月" :disabled="month === '2000-01'" @tap="shiftMonth(-1)">‹</button>
      <picker mode="date" fields="month" :value="month" start="2000-01" end="2099-12" @change="changeMonth($event.detail.value)">
        <view class="month-label">{{ month.replace('-', ' 年 ') }} 月 ⌄</view>
      </picker>
      <button aria-label="下个月" :disabled="month === '2099-12'" @tap="shiftMonth(1)">›</button>
    </view>
    <view class="toolbar">
      <button v-if="month !== currentMonth" @tap="changeMonth(currentMonth)">回到本月</button>
      <text v-else>本月持续更新</text>
      <button :disabled="loading" @tap="load">刷新数据 ↻</button>
    </view>
    <view v-if="!loggedIn || !isAdmin" class="empty">仅登录后的管理员可查看教学统计</view>
    <view v-else-if="loading" class="empty">正在整理这个月的上课记录…</view>
    <view v-else-if="error" class="empty"><text>{{ error }}</text><button class="outline" @tap="load">重新加载</button></view>
    <template v-else-if="report">
      <view class="hero">
        <text class="hero-label">已上课程</text>
        <view class="hero-number">{{ report.summary.sessions }}<text>节</text></view>
        <text class="hero-note">{{ report.previousMonth }} 全月 {{ report.previous.sessions }} 节 · {{ month === currentMonth ? '本月尚未结束' : '按完整自然月统计' }}</text>
        <view class="hero-footer">
          <view><text class="metric">{{ hours(report.summary.minutes) }}</text><text>授课小时</text></view>
          <view><text class="metric">{{ report.summary.teachingDays }}</text><text>上课天数</text></view>
          <view><text class="metric">{{ average }}</text><text>人均上课次数</text></view>
        </view>
      </view>
      <view class="metrics">
        <view><text class="metric">{{ report.summary.attendances }}<text class="unit">人次</text></text><text>已完成上课</text></view>
        <view><text class="metric">{{ report.summary.students }}<text class="unit">人</text></text><text>本月上课学员</text></view>
      </view>
      <button v-if="reviewCount" class="notice" @tap="showReview"><text>{{ reviewCount }} 条已过结束时间的预约仍待处理</text><text>核对明细 ›</text></button>
      <view v-if="!report.records.length" class="empty compact">这个月暂无预约记录，可切换月份查看历史教学情况。</view>
      <view class="section">
        <view class="heading"><text>上课日历</text><text class="muted small">数字为已完成课程节数</text></view>
        <view class="calendar">
          <text v-for="label in weekdays" :key="label" class="weekday">{{ label }}</text>
          <view v-for="n in offset" :key="`blank-${n}`" />
          <button v-for="day in days" :key="day.date" class="day" :class="{ taught: day.count > 0, selected: selectedDate === day.date }" :aria-label="`${day.date}，已上${day.count}节`" @tap="selectDay(day.date)">
            <text>{{ day.day }}</text><text class="day-count">{{ day.count ? `${day.count}节` : '·' }}</text>
          </button>
        </view>
        <text class="footnote">点击日期查看当天明细，再次点击取消筛选</text>
      </view>
      <view class="section">
        <view class="heading"><text>学员上课排行</text><text class="muted small">已完成 · {{ students.length }} 人</text></view>
        <input v-model="search" class="search" placeholder="搜索学员姓名" :maxlength="60" @input="studentLimit = 10" />
        <text v-if="!filteredStudents.length" class="footnote">{{ search ? '没有匹配的上课学员' : '本月还没有已完成的上课记录' }}</text>
        <button v-for="(student, index) in filteredStudents.slice(0, studentLimit)" :key="student.id" class="student-row" @tap="selectStudent(student)">
          <text class="rank">{{ String(index + 1).padStart(2, '0') }}</text>
          <view class="student-main">
            <text class="student-name">{{ student.name }}</text>
            <view class="track"><view class="fill" :style="{ width: `${student.count / maxCount * 100}%` }" /></view>
            <text class="small muted">{{ student.days }} 天 · 最近 {{ student.last.slice(5) }}</text>
          </view>
          <text class="student-count">{{ student.count }}<text class="small"> 次 ›</text></text>
        </button>
        <button v-if="filteredStudents.length > studentLimit" class="more" @tap="studentLimit += 10">查看更多学员</button>
      </view>
      <view class="section">
        <view class="heading"><text>上课用卡分布</text><text class="muted small">已完成人次</text></view>
        <view v-for="card in cards" :key="card.name" class="distribution"><text>{{ card.name }}</text><text>{{ card.count }} 人次 · {{ Math.round(card.count / report.summary.attendances * 100) }}%</text></view>
        <text v-if="!cards.length" class="footnote">暂无已完成记录</text>
      </view>
      <view id="lesson-details" class="section">
        <view class="heading"><text>上课明细</text><text class="muted small">{{ filteredRecords.length }} 条</text></view>
        <scroll-view scroll-x class="status-scroll"><view class="status-tabs">
          <button v-for="item in statuses" :key="item.value" :class="{ active: status === item.value }" @tap="setStatus(item.value)">{{ item.label }} {{ countStatus(item.value) }}</button>
        </view></scroll-view>
        <view v-if="selectedDate || selectedStudent || reviewOnly" class="filters">
          <text>{{ selectedDate || '全月' }}{{ selectedStudent ? ` · ${selectedStudent.name}` : '' }}{{ reviewOnly ? ' · 待核对' : '' }}</text>
          <button @tap="clearFilters">清除筛选 ×</button>
        </view>
        <text v-if="!filteredRecords.length" class="footnote">当前条件下没有上课记录</text>
        <view v-for="row in filteredRecords.slice(0, detailLimit)" :key="row.id" class="record">
          <view class="record-top"><button class="record-name" @tap="openMember(row.userId)">{{ row.nickname || '未命名学员' }} ›</button><text class="badge" :class="{ completed: row.status === 'COMPLETED' }">{{ statusName(row.status) }}</text></view>
          <text class="record-date">{{ row.date.slice(5).replace('-', '月') }}日 · {{ row.startTime }}–{{ row.endTime }}</text>
          <text class="muted small">{{ row.cardName }}{{ row.needsReview ? ' · 已过结束时间，请核对' : '' }}</text>
        </view>
        <button v-if="filteredRecords.length > detailLimit" class="more" @tap="detailLimit += 20">再显示 20 条</button>
        <text v-else-if="filteredRecords.length" class="footnote">已显示全部 {{ filteredRecords.length }} 条记录</text>
      </view>
      <view class="notes">
        <text class="notes-title">关于这份月报</text>
        <text>统计整个工作室，暂不区分老师。已上课程按已完成预约的时段去重；同一节课多人参加，只计 1 节课、多人次。授课时长按该时段排课时长计算。</text>
        <text>“已完成”包含系统自动完成，不代表现场签到。其他状态不计入已上课程；没有日期的历史补录不计入月报。用卡分布按当前卡种名称归类。</text>
        <text>更新于 {{ updatedLabel }} · 下拉可刷新</text>
      </view>
    </template>
  </view>
 </template>
 <script setup lang="ts">
 import { computed, nextTick, ref } from 'vue'
 import { onShow, onPullDownRefresh } from '@dcloudio/uni-app'
 import { storeToRefs } from 'pinia'
 import type { TeachingAnalytics } from '@mp-pilates/shared'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import { useAdminStore } from '../../stores/admin'
 import { useUserStore } from '../../stores/user'
 import { getSystemLayout } from '../../utils/system'
 import { getErrorMessage } from '../../utils/auth'
 const navBarHeight = `${getSystemLayout().navBarHeight}px`
 const { loggedIn, isAdmin } = storeToRefs(useUserStore())
 const store = useAdminStore()
 const currentMonth = ref(chinaMonth())
 const month = ref(currentMonth.value)
 const report = ref<TeachingAnalytics | null>(null)
 const loading = ref(false)
 const error = ref('')
 const selectedDate = ref('')
 const selectedStudent = ref<{ id: string; name: string } | null>(null)
 const status = ref('ALL')
 const reviewOnly = ref(false)
 const search = ref('')
 const studentLimit = ref(10)
 const detailLimit = ref(20)
 let requestId = 0
 const weekdays = ['一', '二', '三', '四', '五', '六', '日']
 const statuses = [
  { value: 'ALL', label: '全部' }, { value: 'COMPLETED', label: '已完成' },
  { value: 'CONFIRMED', label: '已确认' }, { value: 'PENDING_CONFIRMATION', label: '待确认' },
  { value: 'CANCELLED', label: '已取消' }, { value: 'NO_SHOW', label: '未出席' },
 ]
 const rows = computed(() => report.value?.records ?? [])
 const completed = computed(() => rows.value.filter(row => row.status === 'COMPLETED'))
 const average = computed(() => report.value?.summary.students ? (report.value.summary.attendances / report.value.summary.students).toFixed(1) : '—')
 const reviewCount = computed(() => rows.value.filter(row => row.needsReview).length)
 const offset = computed(() => (new Date(`${month.value}-01T00:00:00Z`).getUTCDay() + 6) % 7)
 const days = computed(() => {
  const [year, number] = month.value.split('-').map(Number)
  const counts = new Map<string, Set<string>>()
  completed.value.forEach(row => {
    if (!counts.has(row.date)) counts.set(row.date, new Set())
    counts.get(row.date)!.add(row.slotId)
  })
  return Array.from({ length: new Date(Date.UTC(year, number, 0)).getUTCDate() }, (_, i) => {
    const date = `${month.value}-${String(i + 1).padStart(2, '0')}`
    return { date, day: i + 1, count: counts.get(date)?.size ?? 0 }
  })
 })
 const students = computed(() => {
  const map = new Map<string, { id: string; name: string; count: number; dates: Set<string>; last: string }>()
  completed.value.forEach(row => {
    const student = map.get(row.userId) ?? { id: row.userId, name: row.nickname || '未命名学员', count: 0, dates: new Set<string>(), last: row.date }
    student.count++
    student.dates.add(row.date)
    if (row.date > student.last) student.last = row.date
    map.set(row.userId, student)
  })
  return [...map.values()].map(({ dates, ...student }) => ({ ...student, days: dates.size }))
    .sort((a, b) => b.count - a.count || a.id.localeCompare(b.id))
 })
 const filteredStudents = computed(() => students.value.filter(student => student.name.toLowerCase().includes(search.value.trim().toLowerCase())))
 const maxCount = computed(() => students.value[0]?.count || 1)
 const cards = computed(() => {
  const map = new Map<string, number>()
  completed.value.forEach(row => map.set(row.cardName, (map.get(row.cardName) ?? 0) + 1))
  return [...map].map(([name, count]) => ({ name, count })).sort((a, b) => b.count - a.count)
 })
 const scopedRecords = computed(() => rows.value.filter(row =>
  (!selectedDate.value || row.date === selectedDate.value) &&
  (!selectedStudent.value || row.userId === selectedStudent.value.id) &&
  (!reviewOnly.value || row.needsReview)))
 const filteredRecords = computed(() => scopedRecords.value.filter(row => status.value === 'ALL' || row.status === status.value).slice().reverse())
 const updatedLabel = computed(() => report.value ? new Date(new Date(report.value.generatedAt).getTime() + 8 * 3600000).toISOString().slice(0, 16).replace('T', ' ') : '')
 function chinaMonth() { return new Date(Date.now() + 8 * 3600000).toISOString().slice(0, 7) }
 function hours(minutes: number) { return Number((minutes / 60).toFixed(1)) }
 function countStatus(value: string) { return scopedRecords.value.filter(row => value === 'ALL' || row.status === value).length }
 function statusName(value: string) { return statuses.find(item => item.value === value)?.label ?? value }
 function clearFilters() {
  selectedDate.value = ''; selectedStudent.value = null; reviewOnly.value = false
  status.value = 'ALL'; detailLimit.value = 20
 }
 function setStatus(value: string) { status.value = value; detailLimit.value = 20 }
 async function scrollDetails() {
  await nextTick()
  uni.pageScrollTo({ selector: '#lesson-details', offsetTop: -getSystemLayout().navBarHeight - 12, duration: 250 })
 }
 function selectDay(date: string) {
  selectedDate.value = selectedDate.value === date ? '' : date
  reviewOnly.value = false; detailLimit.value = 20; scrollDetails()
 }
 function selectStudent(student: { id: string; name: string }) {
  selectedStudent.value = { id: student.id, name: student.name }
  selectedDate.value = ''; reviewOnly.value = false; setStatus('COMPLETED'); scrollDetails()
 }
 function showReview() { clearFilters(); reviewOnly.value = true; scrollDetails() }
 function openMember(id: string) { uni.navigateTo({ url: `/pages/admin/member-detail?userId=${encodeURIComponent(id)}` }) }
 function shiftMonth(amount: number) {
  const [year, number] = month.value.split('-').map(Number)
  changeMonth(new Date(Date.UTC(year, number - 1 + amount, 1)).toISOString().slice(0, 7))
 }
 function changeMonth(value: string) {
  if (value === month.value || value < '2000-01' || value > '2099-12') return
  month.value = value; clearFilters(); search.value = ''; studentLimit.value = 10; load()
 }
 async function load() {
  const id = ++requestId
  report.value = null; error.value = ''; loading.value = false
  if (!loggedIn.value || !isAdmin.value) return
  loading.value = true
  try {
    const data = await store.fetchTeachingAnalytics(month.value)
    if (id === requestId) report.value = data
  } catch (err) {
    if (id === requestId) error.value = getErrorMessage(err, '统计暂时无法加载，请重试')
  } finally {
    if (id === requestId) loading.value = false
  }
 }
 onShow(() => { currentMonth.value = chinaMonth(); load() })
 onPullDownRefresh(async () => { try { await load() } finally { uni.stopPullDownRefresh() } })
 </script>
 <style scoped lang="scss">
 .report { min-height: 100vh; box-sizing: border-box; background: #f7f5ef; color: #35483e; padding: 0 30rpx calc(48rpx + env(safe-area-inset-bottom)); }
 button { margin: 0; padding: 0; background: transparent; border-radius: 0; font-size: inherit; color: inherit; line-height: 1.5; &::after { border: 0; } &:active { opacity: .65; } }
 .intro { padding: 40rpx 4rpx 28rpx; display: flex; flex-direction: column; gap: 14rpx; }
 .eyebrow { font-size: 18rpx; letter-spacing: 4rpx; color: #687d6e; }
 .title { font-family: 'Songti SC', 'STSong', serif; font-size: 40rpx; line-height: 1.6; }
 .muted { color: #73796f; font-size: 23rpx; }
 .small { font-size: 22rpx; }
 .month-nav { display: flex; justify-content: space-between; align-items: center; border-top: 1rpx solid #d9ddd2; border-bottom: 1rpx solid #d9ddd2; button { width: 80rpx; line-height: 88rpx; font-size: 40rpx; } }
 .month-label { padding: 20rpx; font-size: 33rpx; font-family: 'Songti SC', 'STSong', serif; }
 .toolbar { display: flex; justify-content: space-between; align-items: center; font-size: 22rpx; color: #677765; min-height: 76rpx; button { padding: 16rpx 0; } }
 .hero { background: #344f42; color: #faf7e9; border-radius: 12rpx 12rpx 48rpx 12rpx; padding: 36rpx; }
 .hero-label { font-size: 25rpx; letter-spacing: 3rpx; }
 .hero-number { font-family: 'Baskerville', 'Times New Roman', serif; font-size: 116rpx; line-height: 1.25; text { font-size: 26rpx; padding-left: 18rpx; } }
 .hero-note { font-size: 21rpx; color: #d1dbc9; }
 .hero-footer { display: flex; margin-top: 30rpx; padding-top: 26rpx; border-top: 1rpx solid #6d8070; gap: 18rpx; > view { flex: 1; display: flex; flex-direction: column; font-size: 21rpx; gap: 8rpx; } }
 .metric { font-size: 40rpx; font-family: 'Baskerville', 'Times New Roman', serif; font-variant-numeric: tabular-nums; }
 .unit { font-size: 22rpx; margin-left: 14rpx; }
 .metrics { display: flex; padding: 30rpx 0; border-bottom: 1rpx solid #d9ddd2; > view { flex: 1; display: flex; flex-direction: column; gap: 12rpx; font-size: 24rpx; padding-left: 30rpx; &:last-child { border-left: 1rpx solid #d9ddd2; } } }
 .notice { width: 100%; text-align: left; margin-top: 26rpx; padding: 24rpx; display: flex; flex-direction: column; gap: 12rpx; background: #f0e5d2; color: #805c30; font-size: 23rpx; border-radius: 12rpx; }
 .section { margin-top: 28rpx; background: #fffefa; border: 1rpx solid #e3e5da; border-radius: 16rpx; padding: 28rpx; }
 .heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12rpx; margin-bottom: 24rpx; font-size: 30rpx; }
 .heading > text:first-child { font-family: 'Songti SC', 'STSong', serif; }
 .calendar { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8rpx; }
 .weekday { text-align: center; font-size: 21rpx; color: #73796f; padding-bottom: 14rpx; }
 .day { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 92rpx; border-radius: 10rpx; font-size: 25rpx; border: 2rpx solid transparent; }
 .day-count { font-size: 18rpx; margin-top: 7rpx; color: #66785f; }
 .taught { background: #e8eee2; }
 .selected { border-color: #344f42; background: #344f42; color: #fff; .day-count { color: #fff; } }
 .footnote { display: block; color: #73796f; font-size: 22rpx; line-height: 1.8; padding-top: 24rpx; }
 .search { background: #f2f3ec; border-radius: 10rpx; padding: 20rpx; font-size: 25rpx; margin-bottom: 14rpx; }
 .student-row { display: flex; align-items: center; gap: 20rpx; width: 100%; padding: 24rpx 0; text-align: left; border-bottom: 1rpx solid #eeeee5; }
 .rank { color: #77836e; font-family: 'Baskerville', serif; font-size: 26rpx; }
 .student-main { flex: 1; min-width: 0; }
 .student-name { display: block; font-size: 28rpx; word-break: break-all; }
 .track { height: 5rpx; background: #eef0e6; margin: 14rpx 0 8rpx; }
 .fill { height: 100%; background: #91a180; }
 .student-count { flex-shrink: 0; font-size: 34rpx; }
 .more { padding: 24rpx 0 0; width: 100%; font-size: 24rpx; color: #52714e; }
 .distribution { display: flex; justify-content: space-between; gap: 20rpx; padding: 20rpx 0; border-bottom: 1rpx solid #eeeee5; font-size: 24rpx; > text:first-child { flex: 1; word-break: break-all; } }
 .status-scroll { width: 100%; }
 .status-tabs { display: flex; gap: 12rpx; padding-bottom: 12rpx; white-space: nowrap; button { flex-shrink: 0; padding: 16rpx 20rpx; border-radius: 8rpx; background: #f1f2eb; font-size: 22rpx; } .active { color: white; background: #344f42; } }
 .filters { margin-top: 16rpx; font-size: 22rpx; color: #647b58; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; button { padding: 16rpx 0; } }
 .record { display: flex; flex-direction: column; gap: 12rpx; border-bottom: 1rpx solid #e9ebdf; padding: 24rpx 0; }
 .record-top { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; }
 .record-name { font-size: 28rpx; text-align: left; word-break: break-all; }
 .badge { flex-shrink: 0; font-size: 20rpx; color: #867257; background: #f3eee4; padding: 6rpx 12rpx; border-radius: 6rpx; }
 .completed { color: #53704b; background: #eaf0e2; }
 .record-date { font-size: 25rpx; }
 .notes { padding: 32rpx 8rpx; display: flex; flex-direction: column; gap: 16rpx; font-size: 22rpx; line-height: 1.9; color: #73796f; }
 .notes-title { color: #455d49; font-size: 25rpx; }
 .empty { padding: 80rpx 28rpx; text-align: center; font-size: 26rpx; line-height: 1.8; color: #737e70; }
 .compact { padding: 36rpx 20rpx 0; }
 .outline { padding: 20rpx; margin-top: 24rpx; border: 1rpx solid #b2bfaa; border-radius: 12rpx; }
 </style>
--- a/packages/app/src/pages/admin/bookings.vue
+++ b/packages/app/src/pages/admin/bookings.vue
@@ -146,6 +146,7 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import type { BookingWithUser, BookingStatusHistory } from '@mp-pilates/shared'
 import { BookingStatus } from '@mp-pilates/shared'
 import { useBookingStore } from '../../stores/booking'
@@ -165,6 +166,7 @@ const bookingStore = useBookingStore()
 const navBarHeight = ref('64px')
 const refreshing = ref(false)
 const loading = ref(false)
 const hasLoadedOnce = ref(false)
 // ─── Filter state ─────────────────────────────────────────────────────────
 type FilterValue = string | null
@@ -215,9 +217,9 @@ function formatTimelineText(h: BookingStatusHistory): string {
 }
 // ─── Data loading ─────────────────────────────────────────────────────────
-async function loadBookings(append = false) {
+async function loadBookings(append = false, opts: { silent?: boolean } = {}) {
  if (loading.value) return
-  loading.value = true
+  if (!opts.silent) loading.value = true
  try {
    const page = append ? currentPage.value + 1 : 1
@@ -234,8 +236,9 @@ async function loadBookings(append = false) {
    totalCount.value = result.total
    hasMore.value = bookings.value.length < result.total
-    // Fetch history for each booking
+    // Fetch history for each booking. Skip in silent mode — history is only
-    if (!append) {
+    // shown as a small inline preview, and the detail page has the full one.
    if (!append && !opts.silent) {
      await Promise.all(
        bookings.value.map((b) => fetchHistory(b.id)),
      )
@@ -247,9 +250,9 @@ async function loadBookings(append = false) {
    }
  } catch (err) {
    console.error('Load bookings failed:', err)
-    uni.showToast({ title: '加载失败', icon: 'none' })
+    if (!opts.silent) uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
-    loading.value = false
+    if (!opts.silent) loading.value = false
  }
 }
@@ -391,6 +394,24 @@ onMounted(() => {
  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
  loadBookings(false)
  loadAllForStats()
  hasLoadedOnce.value = true
 })
 // After returning from booking detail (where status may have changed),
 // re-sync the list with the server. Local row actions still call onRefresh
 // directly — this onShow is the safety net for the navigate-back path.
 // Uses silent mode so the list stays visible (no skeleton flash).
 onShow(() => {
  if (!hasLoadedOnce.value) return
  // Skip while a refresh is already in flight to avoid overlap.
  if (refreshing.value || loading.value) return
  Promise.all([
    loadBookings(false, { silent: true }),
    loadAllForStats(),
  ]).catch(() => {
    // Errors are non-fatal here — list keeps showing stale data until
    // the next explicit refresh.
  })
 })
 </script>
--- a/packages/app/src/pages/admin/card-types.vue
+++ b/packages/app/src/pages/admin/card-types.vue
@@ -150,7 +150,7 @@
                class="modal-input"
                type="number"
                v-model="form.totalTimesStr"
-                placeholder="次卡必填，月卡留空"
+                placeholder="次卡必填；月卡可填写次数"
                placeholder-style="color:#bbb"
              />
            </view>
@@ -188,6 +188,32 @@
                auto-height
              />
            </view>
            <!-- Cover image upload -->
            <view class="modal-field modal-field--cover">
              <text class="modal-label">封面图</text>
              <view class="cover-upload-area">
                <view v-if="form.coverUrl" class="cover-preview-wrap">
                  <image class="cover-preview-img" :src="form.coverUrl" mode="aspectFill" />
                  <view class="cover-remove-btn" @tap="clearCover">
                    <text class="cover-remove-icon">✕</text>
                  </view>
                </view>
                <view
                  v-else
                  class="cover-upload-btn"
                  :class="{ 'cover-upload-btn--loading': uploadingCover }"
                  @tap="uploadCover"
                >
                  <text v-if="uploadingCover" class="cover-upload-hint">上传中...</text>
                  <template v-else>
                    <text class="cover-upload-plus">＋</text>
                    <text class="cover-upload-hint">上传封面</text>
                  </template>
                </view>
                <text class="cover-upload-tip">可选，建议 3:2 比例</text>
              </view>
            </view>
          </view>
          <!-- Action buttons -->
@@ -215,6 +241,7 @@ import CustomNavBar from '../../components/CustomNavBar.vue'
 import { getSystemLayout } from '../../utils/system'
 import { useAdminStore } from '../../stores/admin'
 import { formatPrice } from '../../utils/format'
 import { uploadStudioAsset } from '../../utils/studio-upload'
 import { CardTypeCategory } from '@mp-pilates/shared'
 import type { CardType } from '@mp-pilates/shared'
@@ -229,6 +256,7 @@ const cardTypes = ref<CardType[]>([])
 const loading = ref(false)
 const showModal = ref(false)
 const submitting = ref(false)
 const uploadingCover = ref(false)
 const editTarget = ref<CardType | null>(null)
 const typeOptions = [
@@ -246,6 +274,7 @@ const defaultForm = () => ({
  durationDaysStr: '90',
  sortOrderStr: '0',
  description: '',
  coverUrl: '',
 })
 const form = ref(defaultForm())
@@ -282,6 +311,7 @@ function openEdit(ct: CardType) {
    durationDaysStr: String(ct.durationDays),
    sortOrderStr: String(ct.sortOrder),
    description: ct.description ?? '',
    coverUrl: ct.coverUrl ?? '',
  }
  showModal.value = true
 }
@@ -349,6 +379,9 @@ async function submitForm() {
  if (form.value.description.trim()) {
    payload.description = form.value.description.trim()
  }
  if (form.value.coverUrl) {
    payload.coverUrl = form.value.coverUrl
  }
  submitting.value = true
  try {
@@ -431,6 +464,85 @@ function confirmDelete(ct: CardType) {
  })
 }
 // ─── Cover image upload ─────────────────────────────
 async function uploadCover() {
  if (uploadingCover.value) return
  try {
    const file = await chooseSingleImage()
    if (!file) return
    uploadingCover.value = true
    const url = await uploadStudioAsset({
      adminStore,
      filePath: file.path,
      fileName: file.name,
      assetType: 'card-cover',
    })
    form.value.coverUrl = url
    uni.showToast({ title: '上传成功', icon: 'success' })
  } catch (error: unknown) {
    const message = error instanceof Error ? error.message : '上传失败'
    uni.showToast({ title: message, icon: 'none' })
  } finally {
    uploadingCover.value = false
  }
 }
 function clearCover() {
  form.value.coverUrl = ''
 }
 interface PickedImage {
  readonly path: string
  readonly name: string
 }
 function extractFileName(filePath: string): string {
  return filePath.split('/').pop() || `image_${Date.now()}.jpg`
 }
 function chooseSingleImage(): Promise<PickedImage | null> {
  return new Promise((resolve, reject) => {
    uni.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: (result) => {
        const tempFilePaths = Array.isArray(result.tempFilePaths)
          ? result.tempFilePaths
          : typeof result.tempFilePaths === 'string'
            ? [result.tempFilePaths]
            : []
        const path = tempFilePaths[0]
        if (!path) {
          resolve(null)
          return
        }
        const tempFiles = Array.isArray(result.tempFiles)
          ? result.tempFiles
          : result.tempFiles
            ? [result.tempFiles]
            : []
        const file = tempFiles[0] as { path?: string; tempFilePath?: string; name?: string } | undefined
        resolve({
          path,
          name: file?.name || extractFileName(file?.path || file?.tempFilePath || path),
        })
      },
      fail: (error) => {
        if ((error.errMsg || '').includes('cancel')) {
          resolve(null)
          return
        }
        reject(new Error(error.errMsg || '选择图片失败'))
      },
    })
  })
 }
 // ─── Helpers ─────────────────────────────────────────
 function typeLabel(ct: CardType): string {
@@ -522,16 +634,16 @@ onMounted(fetchCardTypes)
  justify-content: space-between;
 }
-.header--times    { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
+.header--times    { background: linear-gradient(90deg, #E8D5C4, #D4BFA8); }
-.header--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
+.header--duration { background: linear-gradient(90deg, #D8C8DC, #C4AECB); }
-.header--trial    { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
+.header--trial    { background: linear-gradient(90deg, #C8D8D2, #A9C4BC); }
-.ct-type-label { font-size: 22rpx; font-weight: 600; color: #ffffff; letter-spacing: 2rpx; }
+.ct-type-label { font-size: 22rpx; font-weight: 600; color: $brand-color; letter-spacing: 2rpx; }
 .ct-status-tag { border-radius: 20rpx; padding: 4rpx 16rpx; }
-.tag--on  { background: rgba(255,255,255,0.2); }
+.tag--on  { background: rgba(74, 64, 53, 0.1); }
-.tag--off { background: rgba(0,0,0,0.2); }
+.tag--off { background: rgba(74, 64, 53, 0.08); }
-.ct-status-text { font-size: 20rpx; color: #ffffff; }
+.ct-status-text { font-size: 20rpx; color: $brand-color; }
 .ct-body { padding: 24rpx; }
@@ -721,4 +833,82 @@ onMounted(fetchCardTypes)
 }
 .modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
 /* ── Cover upload ───────────────────────── */
 .modal-field--cover {
  flex-direction: column;
  align-items: flex-start;
  gap: 16rpx;
  border-bottom: none;
 }
 .cover-upload-area {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
 }
 .cover-preview-wrap {
  position: relative;
  width: 300rpx;
  height: 200rpx;
  border-radius: 12rpx;
  overflow: hidden;
 }
 .cover-preview-img {
  width: 100%;
  height: 100%;
 }
 .cover-remove-btn {
  position: absolute;
  top: 8rpx;
  right: 8rpx;
  width: 44rpx;
  height: 44rpx;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .cover-remove-icon {
  font-size: 20rpx;
  color: #ffffff;
 }
 .cover-upload-btn {
  width: 300rpx;
  height: 200rpx;
  border: 2rpx dashed #ddd;
  border-radius: 12rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8rpx;
  background: #fafafa;
  &:active { background: #f0f0f0; }
  &--loading { opacity: 0.6; pointer-events: none; }
 }
 .cover-upload-plus {
  font-size: 48rpx;
  color: #bbb;
  line-height: 1;
 }
 .cover-upload-hint {
  font-size: 22rpx;
  color: #999;
 }
 .cover-upload-tip {
  font-size: 20rpx;
  color: #bbb;
 }
 </style>
--- a/packages/app/src/pages/admin/flash-sales.vue
+++ b/packages/app/src/pages/admin/flash-sales.vue
@@ -0,0 +1,863 @@
 <template>
  <view class="page" :style="{ paddingTop: navBarHeight }">
    <CustomNavBar title="秒杀管理" show-back />
    <!-- Toolbar -->
    <view class="toolbar">
      <text class="toolbar-hint">共 {{ total }} 个秒杀活动</text>
      <view class="add-btn" @tap="openAdd">
        <text class="add-btn-text">＋ 新建秒杀</text>
      </view>
    </view>
    <!-- Loading skeleton -->
    <view v-if="pageLoading" class="skeleton-list">
      <view v-for="i in 3" :key="i" class="skeleton-item" />
    </view>
    <!-- Empty -->
    <view v-else-if="!items.length" class="empty-state">
      <text class="empty-icon">◈</text>
      <text class="empty-text">暂无秒杀活动，点击右上角新建</text>
    </view>
    <!-- Flash sale list -->
    <view v-else class="fs-list">
      <view
        v-for="item in items"
        :key="item.id"
        class="fs-card"
      >
        <!-- Header band -->
        <view class="fs-header" :class="headerStatusClass(item)">
          <view class="fs-header-left">
            <text class="fs-title">{{ item.title }}</text>
          </view>
          <view class="fs-status-tag" :class="phaseTagClass(item.phase)">
            <text class="fs-status-text">{{ phaseLabel(item.phase) }}</text>
          </view>
        </view>
        <!-- Body -->
        <view class="fs-body">
          <view class="fs-info-row">
            <text class="fs-card-type">关联卡种: {{ item.cardType.name }}</text>
          </view>
          <view class="fs-price-row">
            <view class="fs-price-block">
              <text class="fs-price-label">秒杀价</text>
              <text class="fs-price-value flash">¥{{ formatPrice(item.flashPrice) }}</text>
            </view>
            <view class="fs-price-block">
              <text class="fs-price-label">原价</text>
              <text class="fs-price-value original">¥{{ formatPrice(item.originalPrice) }}</text>
            </view>
            <view class="fs-price-block">
              <text class="fs-price-label">库存</text>
              <text class="fs-price-value">{{ item.soldCount }}/{{ item.totalStock }}</text>
            </view>
          </view>
          <!-- Stock progress bar -->
          <view class="fs-stock-bar">
            <view
              class="fs-stock-fill"
              :style="{ width: stockPercent(item) }"
            />
          </view>
          <view class="fs-time-row">
            <text class="fs-time">{{ formatDateTime(item.startTime) }} — {{ formatDateTime(item.endTime) }}</text>
          </view>
        </view>
        <!-- Actions -->
        <view class="fs-actions">
          <view class="fs-action-btn edit-btn" @tap.stop="openEdit(item)">
            <text class="fs-action-text">编辑</text>
          </view>
          <view
            v-if="item.status === 'DRAFT'"
            class="fs-action-btn activate-btn"
            @tap.stop="confirmActivate(item)"
          >
            <text class="fs-action-text">上线</text>
          </view>
          <view
            v-else-if="item.status === 'ACTIVE'"
            class="fs-action-btn end-btn"
            @tap.stop="confirmEnd(item)"
          >
            <text class="fs-action-text">结束</text>
          </view>
          <view
            v-if="item.soldCount === 0"
            class="fs-action-btn delete-btn"
            @tap.stop="confirmDelete(item)"
          >
            <text class="fs-action-text">删除</text>
          </view>
        </view>
      </view>
    </view>
    <!-- ──────── Add / Edit modal ──────── -->
    <view v-if="showModal" class="modal-mask" @tap.stop="closeModal">
      <view class="modal-container" @tap.stop>
        <scroll-view scroll-y class="modal-scroll">
          <!-- Header -->
          <view class="modal-header">
            <text class="modal-title">{{ editTarget ? '编辑秒杀' : '新建秒杀' }}</text>
            <view class="modal-close" @tap="closeModal">
              <text class="modal-close-icon">✕</text>
            </view>
          </view>
          <!-- Form fields -->
          <view class="modal-body">
            <!-- Card type picker -->
            <view class="modal-field">
              <text class="modal-label">关联卡种</text>
              <picker
                mode="selector"
                :range="cardTypeOptions"
                range-key="label"
                :value="form.cardTypeIdx"
                @change="onCardTypeChange"
                :disabled="!!editTarget"
              >
                <view class="picker-display">
                  <text class="picker-text">{{ cardTypeOptions[form.cardTypeIdx]?.label || '请选择' }}</text>
                  <text class="picker-arrow">›</text>
                </view>
              </picker>
            </view>
            <view class="modal-field">
              <text class="modal-label">活动标题</text>
              <input
                class="modal-input"
                v-model="form.title"
                placeholder="如：新春限时秒杀"
                placeholder-style="color:#bbb"
              />
            </view>
            <view class="modal-field">
              <text class="modal-label">原价（元）</text>
              <input
                class="modal-input"
                type="digit"
                v-model="form.originalPriceStr"
                placeholder="展示划线价"
                placeholder-style="color:#bbb"
              />
            </view>
            <view class="modal-field">
              <text class="modal-label">秒杀价（元）</text>
              <input
                class="modal-input"
                type="digit"
                v-model="form.flashPriceStr"
                placeholder="实际支付价格"
                placeholder-style="color:#bbb"
              />
            </view>
            <view class="modal-field">
              <text class="modal-label">库存数量</text>
              <input
                class="modal-input"
                type="number"
                v-model="form.totalStockStr"
                placeholder="秒杀总量"
                placeholder-style="color:#bbb"
              />
            </view>
            <view class="modal-field">
              <text class="modal-label">开始时间</text>
              <view class="datetime-picker-group">
                <picker
                  mode="date"
                  :value="form.startDate"
                  @change="onStartDateChange"
                >
                  <text class="datetime-text">{{ form.startDate || '选择日期' }}</text>
                </picker>
                <picker
                  mode="time"
                  :value="form.startTimeStr"
                  @change="onStartTimeChange"
                >
                  <text class="datetime-text">{{ form.startTimeStr || '选择时间' }}</text>
                </picker>
              </view>
            </view>
            <view class="modal-field">
              <text class="modal-label">结束时间</text>
              <view class="datetime-picker-group">
                <picker
                  mode="date"
                  :value="form.endDate"
                  @change="onEndDateChange"
                >
                  <text class="datetime-text">{{ form.endDate || '选择日期' }}</text>
                </picker>
                <picker
                  mode="time"
                  :value="form.endTimeStr"
                  @change="onEndTimeChange"
                >
                  <text class="datetime-text">{{ form.endTimeStr || '选择时间' }}</text>
                </picker>
              </view>
            </view>
            <view class="modal-field">
              <text class="modal-label">排序值</text>
              <input
                class="modal-input"
                type="number"
                v-model="form.sortOrderStr"
                placeholder="越小越靠前"
                placeholder-style="color:#bbb"
              />
            </view>
            <view class="modal-field modal-field--last">
              <text class="modal-label">活动说明</text>
              <textarea
                class="modal-textarea"
                v-model="form.description"
                placeholder="可选，向用户展示"
                placeholder-style="color:#bbb"
                :maxlength="500"
                auto-height
              />
            </view>
          </view>
          <!-- Action buttons -->
          <view class="modal-actions">
            <view class="modal-cancel" @tap="closeModal">
              <text class="modal-cancel-text">取消</text>
            </view>
            <view
              class="modal-confirm"
              :class="{ 'modal-confirm--loading': submitting }"
              @tap="submitForm"
            >
              <text class="modal-confirm-text">{{ submitting ? '保存中...' : '确认保存' }}</text>
            </view>
          </view>
        </scroll-view>
      </view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, computed } from 'vue'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import { getSystemLayout } from '../../utils/system'
 import { useAdminStore } from '../../stores/admin'
 import { formatPrice, formatDateTime, getFlashSalePhaseLabel, getStockPercent, formatDateLocal, formatTimeLocal } from '../../utils/format'
 import { FlashSaleStatus, FlashSalePhase } from '@mp-pilates/shared'
 import type { FlashSaleAdminItem, CardType } from '@mp-pilates/shared'
 const adminStore = useAdminStore()
 const navBarHeight = ref('64px')
 onMounted(() => {
  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
 })
 // ─── Data ────────────────────────────────────────────
 const items = ref<FlashSaleAdminItem[]>([])
 const total = ref(0)
 const pageLoading = ref(false)
 const showModal = ref(false)
 const submitting = ref(false)
 const editTarget = ref<FlashSaleAdminItem | null>(null)
 const cardTypes = ref<CardType[]>([])
 const cardTypeOptions = computed(() =>
  cardTypes.value.map((ct) => ({
    label: `${ct.name}（¥${formatPrice(ct.price)}）`,
    value: ct.id,
  })),
 )
 const defaultForm = () => ({
  cardTypeIdx: 0,
  title: '',
  originalPriceStr: '',
  flashPriceStr: '',
  totalStockStr: '',
  startDate: '',
  startTimeStr: '',
  endDate: '',
  endTimeStr: '',
  sortOrderStr: '0',
  description: '',
 })
 const form = ref(defaultForm())
 // ─── Data loading ─────────────────────────────────────
 async function loadData() {
  pageLoading.value = true
  try {
    const [salesResult, cardTypesResult] = await Promise.all([
      adminStore.fetchFlashSales(),
      adminStore.fetchCardTypes(),
    ])
    items.value = [...salesResult.items]
    total.value = salesResult.total
    cardTypes.value = [...cardTypesResult]
  } catch {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    pageLoading.value = false
  }
 }
 async function reloadSales() {
  try {
    const result = await adminStore.fetchFlashSales()
    items.value = [...result.items]
    total.value = result.total
  } catch {
    // silent
  }
 }
 // ─── Helpers ──────────────────────────────────────────
 function phaseLabel(phase: FlashSalePhase): string {
  return getFlashSalePhaseLabel(phase)
 }
 function phaseTagClass(phase: FlashSalePhase): string {
  if (phase === FlashSalePhase.ONGOING) return 'tag--ongoing'
  if (phase === FlashSalePhase.UPCOMING) return 'tag--upcoming'
  if (phase === FlashSalePhase.SOLD_OUT) return 'tag--soldout'
  return 'tag--ended'
 }
 function headerStatusClass(item: FlashSaleAdminItem): string {
  if (item.status === FlashSaleStatus.DRAFT) return 'header--draft'
  if (item.status === FlashSaleStatus.ENDED) return 'header--ended'
  return 'header--active'
 }
 function stockPercent(item: FlashSaleAdminItem): string {
  return getStockPercent(item.soldCount, item.totalStock)
 }
 // ─── Modal ────────────────────────────────────────────
 function openAdd() {
  editTarget.value = null
  form.value = defaultForm()
  showModal.value = true
 }
 function openEdit(item: FlashSaleAdminItem) {
  editTarget.value = item
  const startDt = new Date(item.startTime)
  const endDt = new Date(item.endTime)
  const ctIdx = cardTypes.value.findIndex((ct) => ct.id === item.cardTypeId)
  form.value = {
    cardTypeIdx: ctIdx >= 0 ? ctIdx : 0,
    title: item.title,
    originalPriceStr: String(item.originalPrice / 100),
    flashPriceStr: String(item.flashPrice / 100),
    totalStockStr: String(item.totalStock),
    startDate: formatDateLocal(startDt),
    startTimeStr: formatTimeLocal(startDt),
    endDate: formatDateLocal(endDt),
    endTimeStr: formatTimeLocal(endDt),
    sortOrderStr: String(item.sortOrder),
    description: item.description ?? '',
  }
  showModal.value = true
 }
 function closeModal() {
  showModal.value = false
  editTarget.value = null
 }
 function onCardTypeChange(e: { detail: { value: number } }) {
  const idx = Number(e.detail.value)
  form.value.cardTypeIdx = idx
  // Auto-fill original price from card type
  const ct = cardTypes.value[idx]
  if (ct && !form.value.originalPriceStr) {
    form.value.originalPriceStr = String(Number(ct.price) / 100)
  }
 }
 function onStartDateChange(e: { detail: { value: string } }) {
  form.value.startDate = e.detail.value
 }
 function onStartTimeChange(e: { detail: { value: string } }) {
  form.value.startTimeStr = e.detail.value
 }
 function onEndDateChange(e: { detail: { value: string } }) {
  form.value.endDate = e.detail.value
 }
 function onEndTimeChange(e: { detail: { value: string } }) {
  form.value.endTimeStr = e.detail.value
 }
 // ─── Form submit ──────────────────────────────────────
 async function submitForm() {
  if (submitting.value) return
  if (!form.value.title.trim()) {
    uni.showToast({ title: '请填写活动标题', icon: 'none' }); return
  }
  const originalPrice = parseFloat(form.value.originalPriceStr)
  if (isNaN(originalPrice) || originalPrice <= 0) {
    uni.showToast({ title: '请填写有效原价', icon: 'none' }); return
  }
  const flashPrice = parseFloat(form.value.flashPriceStr)
  if (isNaN(flashPrice) || flashPrice <= 0) {
    uni.showToast({ title: '请填写有效秒杀价', icon: 'none' }); return
  }
  const totalStock = parseInt(form.value.totalStockStr, 10)
  if (isNaN(totalStock) || totalStock < 1) {
    uni.showToast({ title: '请填写有效库存', icon: 'none' }); return
  }
  if (!form.value.startDate || !form.value.startTimeStr) {
    uni.showToast({ title: '请选择开始时间', icon: 'none' }); return
  }
  if (!form.value.endDate || !form.value.endTimeStr) {
    uni.showToast({ title: '请选择结束时间', icon: 'none' }); return
  }
  const startTime = `${form.value.startDate}T${form.value.startTimeStr}:00`
  const endTime = `${form.value.endDate}T${form.value.endTimeStr}:00`
  if (new Date(endTime) <= new Date(startTime)) {
    uni.showToast({ title: '结束时间须晚于开始时间', icon: 'none' }); return
  }
  submitting.value = true
  try {
    if (editTarget.value) {
      await adminStore.updateFlashSale(editTarget.value.id, {
        title: form.value.title.trim(),
        originalPrice: Math.round(originalPrice * 100),
        flashPrice: Math.round(flashPrice * 100),
        totalStock,
        startTime,
        endTime,
        description: form.value.description.trim() || undefined,
        sortOrder: parseInt(form.value.sortOrderStr, 10) || 0,
      })
    } else {
      const selectedCardType = cardTypes.value[form.value.cardTypeIdx]
      if (!selectedCardType) {
        uni.showToast({ title: '请选择卡种', icon: 'none' }); return
      }
      await adminStore.createFlashSale({
        cardTypeId: selectedCardType.id,
        title: form.value.title.trim(),
        originalPrice: Math.round(originalPrice * 100),
        flashPrice: Math.round(flashPrice * 100),
        totalStock,
        startTime,
        endTime,
        description: form.value.description.trim() || undefined,
        sortOrder: parseInt(form.value.sortOrderStr, 10) || 0,
      })
    }
    uni.showToast({ title: '保存成功', icon: 'success' })
    closeModal()
    await reloadSales()
  } catch (e: unknown) {
    const msg = e instanceof Error ? e.message : '保存失败'
    uni.showToast({ title: msg, icon: 'none' })
  } finally {
    submitting.value = false
  }
 }
 // ─── Actions ──────────────────────────────────────────
 function confirmActivate(item: FlashSaleAdminItem) {
  uni.showModal({
    title: '确认上线',
    content: `上线后「${item.title}」将对用户可见，到达秒杀时间后用户可抢购。`,
    confirmText: '上线',
    confirmColor: '#27ae60',
    success: async (res) => {
      if (!res.confirm) return
      uni.showLoading({ title: '上线中...' })
      try {
        await adminStore.updateFlashSale(item.id, { status: FlashSaleStatus.ACTIVE })
        uni.hideLoading()
        uni.showToast({ title: '已上线', icon: 'success' })
        await reloadSales()
      } catch {
        uni.hideLoading()
        uni.showToast({ title: '上线失败', icon: 'none' })
      }
    },
  })
 }
 function confirmEnd(item: FlashSaleAdminItem) {
  uni.showModal({
    title: '确认结束',
    content: `结束后「${item.title}」将停止售卖，已购买的不受影响。`,
    confirmText: '结束',
    confirmColor: '#e67e22',
    success: async (res) => {
      if (!res.confirm) return
      uni.showLoading({ title: '结束中...' })
      try {
        await adminStore.updateFlashSale(item.id, { status: FlashSaleStatus.ENDED })
        uni.hideLoading()
        uni.showToast({ title: '已结束', icon: 'success' })
        await reloadSales()
      } catch {
        uni.hideLoading()
        uni.showToast({ title: '操作失败', icon: 'none' })
      }
    },
  })
 }
 function confirmDelete(item: FlashSaleAdminItem) {
  uni.showModal({
    title: '确认删除',
    content: `确定删除「${item.title}」？此操作不可恢复。`,
    confirmText: '删除',
    confirmColor: '#c0392b',
    success: async (res) => {
      if (!res.confirm) return
      uni.showLoading({ title: '删除中...' })
      try {
        await adminStore.deleteFlashSale(item.id)
        uni.hideLoading()
        uni.showToast({ title: '已删除', icon: 'success' })
        await reloadSales()
      } catch {
        uni.hideLoading()
        uni.showToast({ title: '删除失败', icon: 'none' })
      }
    },
  })
 }
 // ─── Lifecycle ────────────────────────────────────────
 onMounted(loadData)
 </script>
 <style lang="scss" scoped>
 .page {
  min-height: 100vh;
  background: #f5f3f0;
  padding-bottom: 40rpx;
 }
 /* ── Toolbar ─────────────────────────────── */
 .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 24rpx 16rpx;
 }
 .toolbar-hint { font-size: 24rpx; color: #999; }
 .add-btn {
  background: linear-gradient(135deg, #D4A59A, #C08B7E);
  border-radius: 32rpx;
  padding: 12rpx 28rpx;
  display: flex;
  align-items: center;
  gap: 8rpx;
 }
 .add-btn-text { font-size: 26rpx; font-weight: 600; color: #fff; }
 /* ── Skeleton ────────────────────────────── */
 .skeleton-list { padding: 0 24rpx; }
 .skeleton-item {
  height: 300rpx;
  border-radius: 16rpx;
  margin-bottom: 20rpx;
  background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
 }
 /* ── Empty ───────────────────────────────── */
 .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
  gap: 20rpx;
 }
 .empty-icon { font-size: 80rpx; }
 .empty-text { font-size: 28rpx; color: #bbb; }
 /* ── Flash sale list ─────────────────────── */
 .fs-list { padding: 0 24rpx; }
 .fs-card {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
 }
 .fs-header {
  padding: 20rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
 }
 .header--active { background: linear-gradient(90deg, #D4A59A, #C08B7E); }
 .header--draft { background: linear-gradient(90deg, #AEA49A, #9E948A); }
 .header--ended { background: linear-gradient(90deg, #B0A898, #9A928A); }
 .fs-header-left { flex: 1; min-width: 0; }
 .fs-title {
  font-size: 28rpx;
  font-weight: 700;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
 }
 .fs-status-tag {
  border-radius: 20rpx;
  padding: 4rpx 16rpx;
  flex-shrink: 0;
  margin-left: 12rpx;
 }
 .tag--ongoing { background: rgba(255, 255, 255, 0.3); }
 .tag--upcoming { background: rgba(255, 255, 255, 0.2); }
 .tag--soldout { background: rgba(0, 0, 0, 0.2); }
 .tag--ended { background: rgba(0, 0, 0, 0.3); }
 .fs-status-text { font-size: 20rpx; color: #fff; font-weight: 600; }
 .fs-body { padding: 24rpx; }
 .fs-info-row { margin-bottom: 16rpx; }
 .fs-card-type { font-size: 24rpx; color: #888; }
 .fs-price-row {
  display: flex;
  gap: 32rpx;
  margin-bottom: 16rpx;
 }
 .fs-price-block {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
 }
 .fs-price-label { font-size: 20rpx; color: #aaa; }
 .fs-price-value {
  font-size: 30rpx;
  font-weight: 700;
  color: #333;
  &.flash { color: #B5725E; }
  &.original { color: #aaa; text-decoration: line-through; font-weight: 400; }
 }
 /* Stock progress bar */
 .fs-stock-bar {
  height: 8rpx;
  background: #f0f0f0;
  border-radius: 4rpx;
  overflow: hidden;
  margin-bottom: 12rpx;
 }
 .fs-stock-fill {
  height: 100%;
  background: linear-gradient(90deg, #D4A59A, #C08B7E);
  border-radius: 4rpx;
  transition: width 0.3s;
 }
 .fs-time-row { margin-top: 4rpx; }
 .fs-time { font-size: 22rpx; color: #999; }
 /* ── Actions ─────────────────────────────── */
 .fs-actions {
  display: flex;
  border-top: 1rpx solid #f5f5f5;
 }
 .fs-action-btn {
  flex: 1;
  padding: 20rpx 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1rpx solid #f5f5f5;
  &:last-child { border-right: none; }
  &:active { background: #f9f9f9; }
 }
 .fs-action-text { font-size: 26rpx; font-weight: 600; }
 .edit-btn .fs-action-text { color: #1a1a2e; }
 .activate-btn .fs-action-text { color: #27ae60; }
 .end-btn .fs-action-text { color: #e67e22; }
 .delete-btn .fs-action-text { color: #c0392b; }
 /* ── Modal ───────────────────────────────── */
 .modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 1000;
 }
 .modal-container {
  width: 100%;
  max-height: 85vh;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
 }
 .modal-scroll { flex: 1; max-height: 85vh; }
 .modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx 32rpx 16rpx;
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 10;
 }
 .modal-title { font-size: 32rpx; font-weight: 700; color: #1a1a2e; }
 .modal-close {
  width: 56rpx;
  height: 56rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f5f5f5;
  border-radius: 50%;
 }
 .modal-close-icon { font-size: 24rpx; color: #999; }
 .modal-body { padding: 0 32rpx; }
 .modal-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  gap: 16rpx;
  &--last { border-bottom: none; align-items: flex-start; }
 }
 .modal-label { font-size: 26rpx; color: #555; width: 160rpx; flex-shrink: 0; }
 .modal-input { flex: 1; text-align: right; font-size: 26rpx; color: #222; }
 .picker-display { display: flex; align-items: center; gap: 8rpx; }
 .picker-text { font-size: 26rpx; color: #222; }
 .picker-arrow { font-size: 26rpx; color: #bbb; }
 .datetime-picker-group {
  display: flex;
  align-items: center;
  gap: 12rpx;
  flex: 1;
  justify-content: flex-end;
 }
 .datetime-text {
  font-size: 26rpx;
  color: #222;
  padding: 8rpx 16rpx;
  background: #f8f8f8;
  border-radius: 8rpx;
 }
 .modal-textarea {
  flex: 1;
  font-size: 26rpx;
  color: #222;
  min-height: 80rpx;
  text-align: right;
 }
 .modal-actions {
  display: flex;
  gap: 16rpx;
  padding: 24rpx 32rpx calc(24rpx + env(safe-area-inset-bottom));
  background: #fff;
 }
 .modal-cancel {
  flex: 1;
  height: 88rpx;
  background: #f0f0f0;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  &:active { background: #e8e8e8; }
 }
 .modal-cancel-text { font-size: 28rpx; color: #555; }
 .modal-confirm {
  flex: 2;
  height: 88rpx;
  background: linear-gradient(90deg, #D4A59A, #C08B7E);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  &:active { opacity: 0.85; }
  &--loading { opacity: 0.6; pointer-events: none; }
 }
 .modal-confirm-text { font-size: 28rpx; font-weight: 700; color: #fff; }
 </style>
--- a/packages/app/src/pages/admin/index.vue
+++ b/packages/app/src/pages/admin/index.vue
@@ -27,6 +27,16 @@
      </view>
    </view>
    <view class="section-header"><text class="section-title">教学报告</text></view>
    <view class="list">
      <view class="list-item" @tap="navigate('/pages/admin/analytics')">
        <view class="item-left">
          <view class="item-icon-wrap icon--subscribe"><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>
@@ -63,21 +73,6 @@
          <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: 会员与订单 -->
@@ -131,6 +126,21 @@
          <text class="arrow-text">›</text>
        </view>
      </view>
      <view class="list-item" @tap="navigate('/pages/admin/flash-sales')">
        <view class="item-left">
          <view class="item-icon-wrap icon--flash-sale">
            <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: 系统 -->
@@ -154,6 +164,21 @@
          <text class="arrow-text">›</text>
        </view>
      </view>
      <view class="list-item" @tap="handleIncreaseSubscriptionCount">
        <view class="item-left">
          <view class="item-icon-wrap icon--subscribe">
            <text class="item-icon-text">✦</text>
          </view>
          <view class="item-text-group">
            <text class="item-title">增加订阅次数</text>
            <text class="item-desc">当前剩余 {{ user?.adminBookingSubscriptionCount ?? 0 }} 次</text>
          </view>
        </view>
        <view class="item-arrow">
          <text class="arrow-text">{{ adminSubscribeLoading ? '...' : '›' }}</text>
        </view>
      </view>
    </view>
    <view style="height: 40rpx" />
@@ -162,17 +187,24 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 import { storeToRefs } from 'pinia'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import { getSystemLayout } from '../../utils/system'
 import { useAdminStore } from '../../stores/admin'
 import { useUserStore } from '../../stores/user'
 import type { AdminStats } from '../../stores/admin'
 import { requestAdminBookingSubscriptionCount } from '../../utils/wechat-subscription'
 import { getErrorMessage } from '../../utils/auth'
 const navBarHeight = ref('64px')
 const adminStore = useAdminStore()
 const userStore = useUserStore()
 const { user } = storeToRefs(userStore)
 const statsLoading = ref(false)
 const stats = ref<AdminStats>({ todayBookings: 0, totalOrders: 0, totalBookings: 0 })
 const adminSubscribeLoading = ref(false)
 function navigate(path: string) {
  uni.navigateTo({ url: path })
@@ -189,9 +221,32 @@ async function loadStats() {
  }
 }
 async function handleIncreaseSubscriptionCount() {
  if (adminSubscribeLoading.value) {
    return
  }
  adminSubscribeLoading.value = true
  try {
    const profile = await requestAdminBookingSubscriptionCount()
    if (!profile) {
      uni.showToast({ title: '已取消本次授权', icon: 'none' })
      return
    }
    userStore.setProfile(profile)
    uni.showToast({ title: `订阅次数 +1，剩余 ${profile.adminBookingSubscriptionCount}`, icon: 'none' })
  } catch (err: unknown) {
    uni.showToast({ title: getErrorMessage(err, '订阅授权失败'), icon: 'none' })
  } finally {
    adminSubscribeLoading.value = false
  }
 }
 onMounted(() => {
  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
  loadStats()
  userStore.fetchProfile()
 })
 </script>
@@ -330,7 +385,9 @@ onMounted(() => {
 .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--flash-sale { background: linear-gradient(135deg, #D4A59A, #C08B7E); }
 .icon--studio   { background: linear-gradient(135deg, #9E9E7E, #8E8E6E); }
 .icon--subscribe { background: linear-gradient(135deg, #5D8C8A, #476D72); }
 .item-text-group {
  display: flex;
--- a/packages/app/src/pages/admin/member-arrange.vue
+++ b/packages/app/src/pages/admin/member-arrange.vue
@@ -0,0 +1,574 @@
 <template>
  <view class="page" :style="{ paddingTop: navBarHeight }">
    <CustomNavBar title="安排课程" show-back />
    <view v-if="detail" class="who-bar">
      <view class="who-avatar">
        <image v-if="detail.user.avatarUrl" class="avatar-img" :src="detail.user.avatarUrl" mode="aspectFill" />
        <view v-else class="avatar-fallback">
          <text class="avatar-letter">{{ (detail.user.nickname || '?').slice(0, 1) }}</text>
        </view>
      </view>
      <view class="who-copy">
        <text class="who-kicker">为学员安排</text>
        <text class="who-name">{{ detail.user.nickname || '未知用户' }}</text>
      </view>
    </view>
    <view v-if="usableMemberships.length" class="card-switch">
      <scroll-view scroll-x class="card-scroll" :show-scrollbar="false">
        <view class="card-track">
          <view
            v-for="card in usableMemberships"
            :key="card.id"
            class="card-pill"
            :class="{ 'card-pill--on': selectedMembershipId === card.id }"
            @tap="selectedMembershipId = card.id"
          >
            <text class="card-pill-name">{{ card.cardType.name }}</text>
            <text class="card-pill-meta">
              {{ card.remainingTimes === null ? '有效期内不限次' : `剩 ${card.remainingTimes} 次` }}
            </text>
          </view>
        </view>
      </scroll-view>
    </view>
    <view v-else class="ban-banner">
      <text class="ban-text">该会员没有可扣课的有效卡，请先开卡</text>
    </view>
    <DateSelector v-model="selectedDate" variant="booking" @select="onDateSelect" />
    <TimePeriodFilter v-model="selectedPeriod" variant="booking" />
    <view v-if="slotsLoading" class="slot-skeleton">
      <view v-for="i in 4" :key="i" class="slot-skel" />
    </view>
    <view v-else-if="filteredSlots.length === 0" class="empty-slots">
      <text class="empty-title">这天还没有可安排的课表</text>
      <text class="empty-sub">请先去排课管理发布时段</text>
      <view class="ghost-link" @tap="goSchedule">
        <text class="ghost-link-text">前往排课管理</text>
      </view>
    </view>
    <view v-else class="slot-list">
      <view
        v-for="slot in filteredSlots"
        :key="slot.id"
        class="slot-row"
        :class="{ 'slot-row--disabled': !canPickSlot(slot) }"
        @tap="onPickSlot(slot)"
      >
        <view class="slot-time-col">
          <text class="slot-time">{{ slot.startTime.slice(0, 5) }}</text>
          <text class="slot-end">{{ slot.endTime.slice(0, 5) }}</text>
        </view>
        <view class="slot-body">
          <text class="slot-title">{{ slotLabel(slot) }}</text>
          <text class="slot-cap">{{ slot.bookedCount }}/{{ slot.capacity }} 人</text>
        </view>
        <text class="slot-action">{{ slotActionLabel(slot) }}</text>
      </view>
    </view>
    <view v-if="confirmVisible && pendingSlot" class="mask" @tap="confirmVisible = false">
      <view class="sheet" @tap.stop>
        <text class="sheet-kicker">立即确认</text>
        <text class="sheet-title">安排给 {{ detail?.user.nickname || '该会员' }}</text>
        <view class="sheet-lines">
          <view class="sheet-line">
            <text class="sheet-label">时间</text>
            <text class="sheet-value">{{ pendingSlot.date }} {{ pendingSlot.startTime.slice(0, 5) }}–{{ pendingSlot.endTime.slice(0, 5) }}</text>
          </view>
          <view class="sheet-line">
            <text class="sheet-label">扣卡</text>
            <text class="sheet-value">{{ selectedMembership?.cardType.name }}</text>
          </view>
        </view>
        <text class="sheet-note">{{ deductHint }}</text>
        <view class="sheet-actions">
          <view class="sheet-cancel" @tap="confirmVisible = false">
            <text class="sheet-cancel-text">取消</text>
          </view>
          <view class="sheet-ok" :class="{ 'sheet-ok--disabled': arranging }" @tap="confirmArrange">
            <text class="sheet-ok-text">{{ arranging ? '安排中...' : '确认安排' }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import type {
  AdminMemberDetail,
  ScheduleSlotPreview,
 } from '@mp-pilates/shared'
 import { MembershipStatus, TIME_PERIODS, TimeSlotStatus } from '@mp-pilates/shared'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import DateSelector from '../../components/DateSelector.vue'
 import TimePeriodFilter from '../../components/TimePeriodFilter.vue'
 import { getSystemLayout } from '../../utils/system'
 import { formatDate, isSlotPast } from '../../utils/format'
 import { getErrorMessage } from '../../utils/auth'
 import { useAdminStore } from '../../stores/admin'
 type PeriodKey = keyof typeof TIME_PERIODS | null
 const adminStore = useAdminStore()
 const navBarHeight = ref('64px')
 const userId = ref('')
 const detail = ref<AdminMemberDetail | null>(null)
 const selectedMembershipId = ref('')
 const selectedDate = ref(formatDate(new Date()))
 const selectedPeriod = ref<PeriodKey>(null)
 const slots = ref<ScheduleSlotPreview[]>([])
 const slotsLoading = ref(false)
 const confirmVisible = ref(false)
 const pendingSlot = ref<ScheduleSlotPreview | null>(null)
 const arranging = ref(false)
 const usableMemberships = computed(() =>
  (detail.value?.memberships ?? []).filter((item) =>
    item.status === MembershipStatus.ACTIVE
    && (item.remainingTimes === null || item.remainingTimes > 0)
    && new Date(item.expireDate) > new Date(),
  ),
 )
 const selectedMembership = computed(
  () => usableMemberships.value.find((item) => item.id === selectedMembershipId.value) ?? null,
 )
 const canArrange = computed(() => Boolean(selectedMembership.value))
 const isCountLimited = computed(() => selectedMembership.value?.remainingTimes !== null)
 const deductHint = computed(() => {
  if (!isCountLimited.value) {
    return '将立即确认该课，会员卡不限次，会员无需再确认。'
  }
  return '将立即确认该课并扣除 1 次，会员无需再确认。'
 })
 const publishedSlots = computed(() =>
  slots.value.filter((slot): slot is ScheduleSlotPreview & { id: string } =>
    Boolean(slot.isPublished && slot.id),
  ),
 )
 const filteredSlots = computed(() => {
  if (!selectedPeriod.value) return publishedSlots.value
  const period = TIME_PERIODS[selectedPeriod.value]
  return publishedSlots.value.filter((slot) => slot.startTime >= period.start && slot.startTime < period.end)
 })
 function canPickSlot(slot: ScheduleSlotPreview): boolean {
  if (!canArrange.value) return false
  if (isSlotPast(slot.date, slot.startTime)) return false
  if (slot.status === TimeSlotStatus.CLOSED) return false
  if (slot.status === TimeSlotStatus.FULL || slot.bookedCount >= slot.capacity) return false
  return true
 }
 function slotLabel(slot: ScheduleSlotPreview): string {
  if (slot.status === TimeSlotStatus.CLOSED) return '已关闭'
  if (slot.status === TimeSlotStatus.FULL || slot.bookedCount >= slot.capacity) return '已满员'
  if (isSlotPast(slot.date, slot.startTime)) return '已过点'
  return '可安排'
 }
 function slotActionLabel(slot: ScheduleSlotPreview): string {
  if (!canPickSlot(slot)) return '—'
  return '安排'
 }
 async function loadSlots(date: string) {
  slotsLoading.value = true
  try {
    slots.value = await adminStore.previewScheduleByDate(date)
  } catch (err: unknown) {
    slots.value = []
    uni.showToast({ title: getErrorMessage(err, '课表加载失败'), icon: 'none' })
  } finally {
    slotsLoading.value = false
  }
 }
 async function loadPage() {
  detail.value = await adminStore.fetchMemberDetail(userId.value)
  const first = usableMemberships.value[0]
  selectedMembershipId.value = first?.id ?? ''
  await loadSlots(selectedDate.value)
 }
 function onDateSelect(date: string) {
  selectedDate.value = date
  loadSlots(date)
 }
 function goSchedule() {
  uni.navigateTo({ url: '/pages/admin/schedule' })
 }
 function onPickSlot(slot: ScheduleSlotPreview) {
  if (!canPickSlot(slot) || !slot.id) return
  pendingSlot.value = slot
  confirmVisible.value = true
 }
 async function confirmArrange() {
  const slot = pendingSlot.value
  const membership = selectedMembership.value
  if (!slot?.id || !membership || arranging.value) return
  arranging.value = true
  try {
    await adminStore.arrangeMemberBooking({
      userId: userId.value,
      membershipId: membership.id,
      timeSlotId: slot.id,
    })
    confirmVisible.value = false
    uni.showToast({ title: '已安排并确认', icon: 'success' })
    setTimeout(() => uni.navigateBack(), 500)
  } catch (err: unknown) {
    uni.showToast({ title: getErrorMessage(err, '安排失败'), icon: 'none' })
  } finally {
    arranging.value = false
  }
 }
 onLoad((query) => {
  userId.value = String(query?.userId || '')
 })
 onMounted(async () => {
  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
  try {
    await loadPage()
  } catch (err: unknown) {
    uni.showToast({ title: getErrorMessage(err, '加载失败'), icon: 'none' })
  }
 })
 </script>
 <style lang="scss" scoped>
 .page {
  min-height: 100vh;
  background: $bg-page;
  padding-bottom: 80rpx;
 }
 .who-bar {
  margin: 16rpx 24rpx 0;
  padding: 20rpx;
  border-radius: 20rpx;
  background: linear-gradient(135deg, #3c3228, #5a4a3a);
  display: flex;
  align-items: center;
  gap: 18rpx;
 }
 .who-avatar {
  width: 72rpx;
  height: 72rpx;
  border-radius: 18rpx;
  overflow: hidden;
  flex-shrink: 0;
 }
 .avatar-img { width: 100%; height: 100%; }
 .avatar-fallback {
  width: 100%;
  height: 100%;
  background: $accent-color;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .avatar-letter {
  color: #fff8f0;
  font-weight: 700;
 }
 .who-copy {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
 }
 .who-kicker {
  font-size: 18rpx;
  letter-spacing: 3rpx;
  color: rgba(255, 248, 240, 0.55);
 }
 .who-name {
  font-size: 32rpx;
  font-weight: 700;
  color: #fff8f0;
 }
 .card-switch {
  padding: 16rpx 0 4rpx;
 }
 .card-scroll { white-space: nowrap; }
 .card-track {
  display: inline-flex;
  gap: 12rpx;
  padding: 0 24rpx;
 }
 .card-pill {
  padding: 14rpx 22rpx;
  border-radius: 16rpx;
  background: #fff;
  border: 2rpx solid rgba(180, 160, 130, 0.18);
  display: flex;
  flex-direction: column;
  gap: 4rpx;
 }
 .card-pill--on {
  border-color: $brand-color;
  background: #3c3228;
 }
 .card-pill-name {
  font-size: 24rpx;
  font-weight: 700;
  color: $text-primary;
 }
 .card-pill--on .card-pill-name,
 .card-pill--on .card-pill-meta {
  color: #fff8f0;
 }
 .card-pill-meta {
  font-size: 20rpx;
  color: $text-hint;
 }
 .ban-banner {
  margin: 16rpx 24rpx;
  padding: 20rpx;
  border-radius: 16rpx;
  background: rgba($error-color, 0.1);
 }
 .ban-text {
  font-size: 24rpx;
  color: $error-color;
 }
 .slot-skeleton { padding: 16rpx 24rpx; }
 .slot-skel {
  height: 112rpx;
  border-radius: 18rpx;
  margin-bottom: 12rpx;
  background: linear-gradient(90deg, #efe8df 25%, #f7f2ea 50%, #efe8df 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
 }
 .empty-slots {
  padding: 48rpx 32rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10rpx;
 }
 .empty-title {
  font-size: 28rpx;
  font-weight: 700;
  color: $text-primary;
 }
 .empty-sub {
  font-size: 24rpx;
  color: $text-hint;
  text-align: center;
 }
 .ghost-link {
  margin-top: 8rpx;
  padding: 10rpx 24rpx;
  border-radius: 999rpx;
  border: 1rpx solid $brand-color;
 }
 .ghost-link-text {
  font-size: 22rpx;
  color: $brand-color;
 }
 .slot-list {
  padding: 16rpx 24rpx 8rpx;
 }
 .slot-row {
  display: flex;
  align-items: center;
  gap: 20rpx;
  background: #fff;
  border-radius: 18rpx;
  padding: 22rpx 20rpx;
  margin-bottom: 12rpx;
  border: 1rpx solid rgba(180, 160, 130, 0.12);
 }
 .slot-row--disabled {
  opacity: 0.45;
 }
 .slot-time-col {
  width: 120rpx;
  display: flex;
  flex-direction: column;
 }
 .slot-time {
  font-size: 34rpx;
  font-weight: 800;
  color: $text-primary;
  font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif;
 }
 .slot-end {
  font-size: 22rpx;
  color: $text-hint;
 }
 .slot-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4rpx;
 }
 .slot-title {
  font-size: 26rpx;
  font-weight: 600;
  color: $text-primary;
 }
 .slot-cap {
  font-size: 22rpx;
  color: $text-hint;
 }
 .slot-action {
  font-size: 24rpx;
  font-weight: 700;
  color: $accent-color;
 }
 .mask {
  position: fixed;
  inset: 0;
  background: rgba(44, 36, 28, 0.45);
  display: flex;
  align-items: flex-end;
  z-index: 20;
 }
 .sheet {
  width: 100%;
  background: #fff8f0;
  border-radius: 28rpx 28rpx 0 0;
  padding: 32rpx 32rpx calc(32rpx + env(safe-area-inset-bottom));
 }
 .sheet-kicker {
  font-size: 20rpx;
  letter-spacing: 4rpx;
  color: $text-hint;
 }
 .sheet-title {
  display: block;
  margin-top: 8rpx;
  font-size: 36rpx;
  font-weight: 700;
  color: $text-primary;
  font-family: 'Songti SC', Georgia, serif;
 }
 .sheet-lines {
  margin: 28rpx 0 16rpx;
 }
 .sheet-line {
  display: flex;
  justify-content: space-between;
  padding: 14rpx 0;
  border-bottom: 1rpx solid rgba(180, 160, 130, 0.14);
 }
 .sheet-label {
  font-size: 24rpx;
  color: $text-hint;
 }
 .sheet-value {
  font-size: 26rpx;
  color: $text-primary;
 }
 .sheet-note {
  display: block;
  font-size: 24rpx;
  color: $text-secondary;
  line-height: 1.5;
 }
 .sheet-actions {
  display: flex;
  gap: 16rpx;
  margin-top: 28rpx;
 }
 .sheet-cancel,
 .sheet-ok {
  flex: 1;
  height: 84rpx;
  border-radius: 16rpx;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .sheet-cancel {
  background: #fff;
  border: 2rpx solid $brand-color;
 }
 .sheet-ok {
  background: $brand-color;
 }
 .sheet-ok--disabled { opacity: 0.5; }
 .sheet-cancel-text {
  font-size: 28rpx;
  font-weight: 700;
  color: $brand-color;
 }
 .sheet-ok-text {
  font-size: 28rpx;
  font-weight: 700;
  color: #fff8f0;
 }
 </style>
--- a/packages/app/src/pages/admin/member-detail.vue
+++ b/packages/app/src/pages/admin/member-detail.vue
@@ -0,0 +1,408 @@
 <template>
  <view class="page" :style="{ paddingTop: navBarHeight }">
    <CustomNavBar title="会员档案" show-back />
    <view v-if="loading && !detail" class="skeleton-wrap">
      <view class="skeleton-hero" />
      <view class="skeleton-block" />
      <view class="skeleton-block" />
    </view>
    <template v-else-if="detail">
      <view class="hero">
        <view class="hero-inner">
          <view class="hero-avatar">
            <image v-if="detail.user.avatarUrl" class="avatar-img" :src="detail.user.avatarUrl" mode="aspectFill" />
            <view v-else class="avatar-fallback">
              <text class="avatar-letter">{{ (detail.user.nickname || '?').slice(0, 1) }}</text>
            </view>
          </view>
          <view class="hero-copy">
            <text class="hero-name">{{ detail.user.nickname || '未知用户' }}</text>
            <text class="hero-phone">{{ detail.user.phone || '未绑定手机' }}</text>
          </view>
        </view>
        <view v-if="detail.user.openid" class="member-id" @tap="copyOpenid">
          <text class="member-id-label">微信标识</text>
          <text class="member-id-value">{{ detail.user.openid }}</text>
          <text class="member-id-copy">复制</text>
        </view>
        <view class="time-pair">
          <view class="time-cell">
            <text class="time-label">注册时间</text>
            <text class="time-value">{{ formatDateTimeFull(detail.user.createdAt) }}</text>
          </view>
          <view class="time-rule" />
          <view class="time-cell">
            <text class="time-label">最近登录</text>
            <text class="time-value">{{ detail.user.lastLoginAt ? formatDateTimeFull(detail.user.lastLoginAt) : '暂无登录记录' }}</text>
          </view>
        </view>
      </view>
      <view class="section section--practice">
        <view class="section-heading">
          <text class="section-label">上课情况</text>
          <button class="supplement-entry" @tap="goSupplement">补录上课 <text>›</text></button>
        </view>
        <view class="stats-strip">
          <view class="stat">
            <text class="stat-num">{{ detail.stats.totalBookings }}</text>
            <text class="stat-name">累计预约</text>
          </view>
          <view class="stat stat--completed">
            <text class="stat-num">{{ detail.stats.completedBookings }}</text>
            <text class="stat-name">累计上课</text>
          </view>
          <view class="stat">
            <text class="stat-num">{{ detail.stats.cancelledBookings }}</text>
            <text class="stat-name">已取消</text>
          </view>
          <view class="stat">
            <text class="stat-num">{{ detail.stats.noShowBookings }}</text>
            <text class="stat-name">未到课</text>
          </view>
        </view>
      </view>
      <view class="section">
        <view class="section-heading">
          <text class="section-label">会员卡</text>
          <text class="section-note">{{ detail.memberships.length }} 张</text>
        </view>
        <view v-if="detail.memberships.length" class="card-list">
          <view
            v-for="card in detail.memberships"
            :key="card.id"
            class="mship"
          >
            <view class="mship-head">
              <view class="mship-titles">
                <text class="mship-name">{{ card.cardType.name }}</text>
                <text class="mship-type">{{ getCardTypeLabel(card.cardType.type) }}</text>
              </view>
              <view class="mship-status" :class="'mship-status--' + card.status.toLowerCase()">
                <text class="mship-status-text">{{ membershipStatusLabel(card.status) }}</text>
              </view>
            </view>
            <view v-if="card.remainingTimes !== null" class="mship-times">
              <text class="mship-times-num">{{ card.remainingTimes }}</text>
              <text class="mship-times-unit">次可用</text>
            </view>
            <view v-else class="mship-duration">
              <text class="mship-duration-title">有效期内使用</text>
              <text class="mship-times-unit">不限次数</text>
            </view>
            <view v-if="card.remainingTimes !== null && getMembershipTotalTimes(card)" class="progress">
              <view class="progress-bar">
                <view class="progress-fill" :style="{ width: getMembershipProgressWidth(card) }" />
              </view>
              <text class="progress-text">
                已用 {{ getMembershipUsedTimes(card) }} / {{ getMembershipTotalTimes(card) }}
              </text>
            </view>
            <view class="mship-dates">
              <text>{{ formatDate(card.startDate) }} 起</text>
              <text>{{ formatDate(card.expireDate) }} 止</text>
            </view>
          </view>
        </view>
        <view v-else class="empty-card">
          <text class="empty-card-title">尚未开卡</text>
          <text class="empty-card-sub">开通体验卡、次卡或月卡后即可安排课程</text>
          <view class="empty-card-btn" @tap="goEdit">
            <text class="empty-card-btn-text">去开卡</text>
          </view>
        </view>
      </view>
      <view class="section section--last">
        <view class="section-heading">
          <text class="section-label">即将上课</text>
          <text v-if="detail.upcomingBookings.length" class="section-note">{{ detail.upcomingBookings.length }} 节待上</text>
        </view>
        <view v-if="detail.upcomingBookings.length" class="upcoming-list">
          <view v-for="item in detail.upcomingBookings" :key="item.id" class="upcoming-row">
            <view class="upcoming-time">
              <text class="upcoming-date">{{ item.date.slice(5, 10).replace('-', ' / ') }}</text>
              <text class="upcoming-hour">{{ item.startTime.slice(0, 5) }}–{{ item.endTime.slice(0, 5) }}</text>
            </view>
            <view class="upcoming-meta">
              <text class="upcoming-card">{{ item.cardName }}</text>
              <text class="upcoming-status">{{ bookingStatusLabel(item.status) }}</text>
            </view>
          </view>
        </view>
        <view v-else class="upcoming-empty">
          <text class="upcoming-empty-text">近期没有待上的课</text>
        </view>
      </view>
    </template>
    <view class="dock">
      <view class="dock-btn dock-btn--ghost" @tap="goEdit">
        <text class="dock-btn-text">编辑资料</text>
      </view>
      <view
        class="dock-btn dock-btn--solid"
        :class="{ 'dock-btn--disabled': !canArrange }"
        @tap="goArrange"
      >
        <text class="dock-btn-text dock-btn-text--solid">安排课程</text>
      </view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import { onLoad, onShow } from '@dcloudio/uni-app'
 import type { AdminMemberDetail, MembershipWithCardType } from '@mp-pilates/shared'
 import { MembershipStatus, BookingStatus } from '@mp-pilates/shared'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import { getSystemLayout } from '../../utils/system'
 import {
  formatDateTimeFull,
  getCardTypeLabel,
  getMembershipProgressWidth,
  getMembershipUsedTimes,
  getMembershipTotalTimes,
 } from '../../utils/format'
 import { BOOKING_STATUS_LABELS } from '../../utils/booking-helpers'
 import { getErrorMessage } from '../../utils/auth'
 import { useAdminStore } from '../../stores/admin'
 const adminStore = useAdminStore()
 const navBarHeight = ref('64px')
 const userId = ref('')
 const loading = ref(false)
 const detail = ref<AdminMemberDetail | null>(null)
 const canArrange = computed(() => (detail.value?.memberships ?? []).some(isArrangableMembership))
 function isArrangableMembership(membership: MembershipWithCardType): boolean {
  if (membership.status !== MembershipStatus.ACTIVE) return false
  if (membership.remainingTimes !== null && membership.remainingTimes <= 0) return false
  return new Date(membership.expireDate) > new Date()
 }
 function membershipStatusLabel(status: string): string {
  const map: Record<string, string> = {
    ACTIVE: '有效',
    EXPIRED: '已过期',
    USED_UP: '已用完',
  }
  return map[status] || status
 }
 function bookingStatusLabel(status: BookingStatus): string {
  return BOOKING_STATUS_LABELS[status] || status
 }
 function formatDate(dateStr: string): string {
  return dateStr.slice(0, 10)
 }
 function copyOpenid() {
  const openid = detail.value?.user.openid
  if (!openid) return
  uni.setClipboardData({
    data: openid,
    success: () => uni.showToast({ title: '已复制 OpenID', icon: 'success' }),
  })
 }
 async function loadDetail() {
  if (!userId.value) return
  loading.value = true
  try {
    detail.value = await adminStore.fetchMemberDetail(userId.value)
  } catch (err: unknown) {
    uni.showToast({ title: getErrorMessage(err, '加载失败'), icon: 'none' })
  } finally {
    loading.value = false
  }
 }
 function goSupplement() {
  if (userId.value) uni.navigateTo({ url: `/pages/admin/member-supplement?userId=${userId.value}` })
 }
 function goEdit() {
  if (!userId.value) return
  uni.navigateTo({ url: `/pages/admin/member-edit?userId=${userId.value}` })
 }
 function goArrange() {
  if (!canArrange.value) {
    uni.showToast({ title: '请先开通有效会员卡', icon: 'none' })
    return
  }
  uni.navigateTo({ url: `/pages/admin/member-arrange?userId=${userId.value}` })
 }
 onLoad((query) => {
  userId.value = String(query?.userId || '')
 })
 onMounted(() => {
  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
 })
 onShow(() => {
  if (userId.value) {
    loadDetail()
  }
 })
 </script>
 <style lang="scss" scoped>
 .page {
  --ink: #514943;
  --muted: #8b817b;
  --line: #eee8e3;
  --sage: #617d73;
  min-height: 100vh;
  box-sizing: border-box;
  background: #fbf9f6;
  color: var(--ink);
  padding-bottom: calc(152rpx + env(safe-area-inset-bottom));
 }
 .skeleton-wrap { padding: 28rpx 32rpx; }
 .skeleton-hero, .skeleton-block {
  border-radius: 28rpx;
  background: linear-gradient(90deg, #f0eae5 25%, #faf7f3 50%, #f0eae5 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
 }
 .skeleton-hero { height: 300rpx; margin-bottom: 28rpx; }
 .skeleton-block { height: 180rpx; margin-bottom: 28rpx; }
 .hero {
  margin: 28rpx 32rpx 0;
  padding: 32rpx;
  border-radius: 32rpx;
  background: #f3eae5;
 }
 .hero-inner { display: flex; align-items: center; gap: 24rpx; }
 .hero-avatar {
  width: 112rpx;
  height: 112rpx;
  border-radius: 50%;
  overflow: hidden;
  border: 6rpx solid #fcf8f4;
  flex-shrink: 0;
 }
 .avatar-img { width: 100%; height: 100%; }
 .avatar-fallback {
  width: 100%; height: 100%; background: #e0cec4;
  display: flex; align-items: center; justify-content: center;
 }
 .avatar-letter {
  font-family: 'Songti SC', 'STSong', serif;
  font-size: 44rpx; font-weight: 400; color: #735e53;
 }
 .hero-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12rpx; }
 .hero-name { font-size: 38rpx; font-weight: 500; line-height: 1.4; overflow-wrap: anywhere; }
 .hero-phone { font-size: 26rpx; color: #84746b; letter-spacing: 1rpx; }
 .member-id {
  display: flex; align-items: center; gap: 14rpx;
  margin-top: 24rpx; min-height: 48rpx;
  font-size: 20rpx; color: #88786f;
 }
 .member-id-label { flex-shrink: 0; }
 .member-id-value { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .member-id-copy { flex-shrink: 0; color: #715a4e; padding: 8rpx 0 8rpx 8rpx; }
 .time-pair {
  display: flex; gap: 20rpx;
  margin-top: 20rpx; padding-top: 24rpx;
  border-top: 1rpx solid #e4d8d0;
 }
 .time-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10rpx; }
 .time-rule { width: 1rpx; background: #e4d8d0; }
 .time-label { font-size: 21rpx; color: #88786f; }
 .time-value { font-size: 22rpx; color: #6d5c52; line-height: 1.5; font-variant-numeric: tabular-nums; }
 .section { padding: 36rpx 32rpx 0; }
 .section--last { padding-bottom: 24rpx; }
 .section-label { display: block; font-size: 28rpx; font-weight: 500; margin-bottom: 20rpx; }
 .section-heading { display: flex; justify-content: space-between; align-items: baseline; gap: 16rpx; }
 .supplement-entry { margin: 0; padding: 8rpx 18rpx; line-height: 1.5; font-size: 23rpx; border-radius: 999rpx; background: #edf2ec; color: #617d73; &::after { border: none; } }
 .section-note { font-size: 22rpx; color: var(--muted); }
 .stats-strip {
  display: flex; padding: 26rpx 0;
  border-radius: 24rpx; background: #ffffff;
 }
 .stat {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; gap: 12rpx; border-right: 1rpx solid var(--line);
  &:last-child { border-right: none; }
 }
 .stat-num { font-size: 40rpx; font-weight: 400; line-height: 1.1; font-family: 'DIN Alternate', 'Avenir Next', sans-serif; font-variant-numeric: tabular-nums; }
 .stat-name { font-size: 22rpx; color: var(--muted); }
 .stat--completed { .stat-num, .stat-name { color: var(--sage); } }
 .card-list { display: flex; flex-direction: column; gap: 20rpx; }
 .mship { padding: 28rpx; background: #fff; border-radius: 28rpx; border: 1rpx solid var(--line); }
 .mship-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20rpx; }
 .mship-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
 .mship-name { font-size: 29rpx; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
 .mship-type { font-size: 21rpx; color: var(--muted); }
 .mship-status {
  flex-shrink: 0; padding: 6rpx 16rpx; border-radius: 999rpx;
  background: #edf2ee; color: #617d73; line-height: 1.3;
  &--expired, &--used_up { background: #f2efec; color: #8b817b; }
 }
 .mship-status-text { font-size: 21rpx; }
 .mship-times { margin-top: 22rpx; display: flex; align-items: baseline; gap: 10rpx; }
 .mship-times-num { font-size: 52rpx; font-weight: 400; font-family: 'DIN Alternate', 'Avenir Next', sans-serif; line-height: 1.2; }
 .mship-times-unit { font-size: 22rpx; color: var(--muted); }
 .mship-duration { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12rpx; margin-top: 24rpx; }
 .mship-duration-title { font-size: 28rpx; color: #617d73; }
 .progress { margin-top: 18rpx; }
 .progress-bar { height: 6rpx; border-radius: 6rpx; background: #f0efea; overflow: hidden; }
 .progress-fill { height: 100%; border-radius: 6rpx; background: #a5b8ab; }
 .progress-text { display: block; margin-top: 10rpx; font-size: 20rpx; color: var(--muted); }
 .mship-dates {
  margin-top: 22rpx; padding-top: 18rpx; border-top: 1rpx solid #f3efeb;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8rpx 20rpx;
  font-size: 21rpx; color: var(--muted); line-height: 1.5;
 }
 .empty-card {
  background: #f4f2ed; border-radius: 28rpx; padding: 36rpx 28rpx;
  display: flex; flex-direction: column; align-items: flex-start; gap: 12rpx;
 }
 .empty-card-title { font-size: 28rpx; font-weight: 500; }
 .empty-card-sub { font-size: 23rpx; color: var(--muted); line-height: 1.7; }
 .empty-card-btn { margin-top: 10rpx; padding: 14rpx 28rpx; border-radius: 999rpx; background: #e4ebe4; }
 .empty-card-btn-text { font-size: 24rpx; color: #526e62; }
 .upcoming-list { background: #fff; border-radius: 28rpx; padding: 0 28rpx; }
 .upcoming-row {
  display: flex; align-items: center; justify-content: space-between; gap: 24rpx;
  padding: 26rpx 0; border-bottom: 1rpx solid var(--line);
  &:last-child { border-bottom: none; }
 }
 .upcoming-time { flex-shrink: 0; display: flex; flex-direction: column; gap: 10rpx; }
 .upcoming-date { font-size: 28rpx; font-weight: 500; }
 .upcoming-hour { font-size: 23rpx; color: var(--muted); font-variant-numeric: tabular-nums; }
 .upcoming-meta { min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 10rpx; }
 .upcoming-card { font-size: 24rpx; text-align: right; overflow-wrap: anywhere; }
 .upcoming-status { font-size: 21rpx; color: var(--sage); }
 .upcoming-empty { padding: 32rpx 28rpx; background: #f4f2ed; border-radius: 24rpx; }
 .upcoming-empty-text { font-size: 24rpx; color: var(--muted); }
 .dock {
  position: fixed; z-index: 10; left: 0; right: 0; bottom: 0;
  display: flex; gap: 20rpx;
  padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
  background: #fbf9f6; border-top: 1rpx solid var(--line);
 }
 .dock-btn { flex: 1; height: 88rpx; border-radius: 999rpx; display: flex; align-items: center; justify-content: center; }
 .dock-btn--ghost { background: #f0eae4; }
 .dock-btn--solid { flex: 1.35; background: #6b8276; }
 .dock-btn--disabled { background: #d9dfd8; .dock-btn-text--solid { color: #677467; } }
 .dock-btn-text { font-size: 28rpx; font-weight: 500; color: #78675c; }
 .dock-btn-text--solid { color: #fff; }
 </style>
--- a/packages/app/src/pages/admin/member-edit.vue
+++ b/packages/app/src/pages/admin/member-edit.vue
@@ -0,0 +1,435 @@
 <template>
  <view class="page" :style="{ paddingTop: navBarHeight }">
    <CustomNavBar title="编辑资料" show-back />
    <view v-if="pageLoading" class="loading-wrap">
      <text class="loading-text">加载中...</text>
    </view>
    <view v-else class="form">
      <view class="block">
        <text class="block-title">基本信息</text>
        <view class="field">
          <text class="field-label">昵称</text>
          <input class="field-input" v-model="profileForm.nickname" maxlength="32" placeholder="会员昵称" />
        </view>
        <view class="field">
          <text class="field-label">手机号</text>
          <input class="field-input" v-model="profileForm.phone" maxlength="20" type="number" placeholder="未绑定可手动填写" />
        </view>
      </view>
      <view class="block">
        <text class="block-title">{{ editingMembership ? '会员卡' : '开通会员卡' }}</text>
        <view v-if="existingMemberships.length > 1" class="field">
          <text class="field-label">选择卡片</text>
          <picker
            class="field-picker"
            mode="selector"
            :value="membershipIndex"
            :range="membershipPickerLabels"
            @change="onMembershipPick"
          >
            <view class="picker-inner">
              <text class="picker-text">{{ membershipPickerLabels[membershipIndex] }}</text>
              <text class="picker-arrow">▾</text>
            </view>
          </picker>
        </view>
        <view class="field">
          <text class="field-label">卡类型</text>
          <picker
            class="field-picker"
            mode="selector"
            :value="editForm.cardTypeIndex"
            :range="cardTypes"
            range-key="name"
            @change="onCardTypeChange"
          >
            <view class="picker-inner">
              <text class="picker-text">{{ cardTypes[editForm.cardTypeIndex]?.name || '请选择' }}</text>
              <text class="picker-arrow">▾</text>
            </view>
          </picker>
        </view>
        <view v-if="selectedCardType" class="field">
          <text class="field-label">
            {{ canLeaveTimesEmpty ? '剩余次数（留空不限次）' : '剩余次数' }}
          </text>
          <input
            class="field-input"
            type="number"
            v-model="editForm.remainingTimes"
            :placeholder="canLeaveTimesEmpty ? '留空表示不限次' : '请输入剩余次数'"
          />
        </view>
        <view class="field">
          <text class="field-label">开始日期</text>
          <picker class="field-picker" mode="date" :value="editForm.startDate" @change="onStartDateChange">
            <view class="picker-inner">
              <text class="picker-text">{{ editForm.startDate || '请选择' }}</text>
              <text class="picker-arrow">▾</text>
            </view>
          </picker>
        </view>
        <view class="field">
          <text class="field-label">到期日期</text>
          <picker class="field-picker" mode="date" :value="editForm.expireDate" @change="onExpireDateChange">
            <view class="picker-inner">
              <text class="picker-text">{{ editForm.expireDate || '请选择' }}</text>
              <text class="picker-arrow">▾</text>
            </view>
          </picker>
        </view>
        <view v-if="editingMembership" class="danger-link" @tap="onClearMembership">
          <text class="danger-link-text">解除该会员卡</text>
        </view>
      </view>
      <view
        class="save-btn"
        :class="{ 'save-btn--disabled': submitting }"
        @tap="onSave"
      >
        <text class="save-btn-text">{{ submitting ? '保存中...' : '保存' }}</text>
      </view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import { computed, onMounted, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import type { AdminMemberDetail, CardType, MembershipWithCardType } from '@mp-pilates/shared'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import { getSystemLayout } from '../../utils/system'
 import { formatDateLocal } from '../../utils/format'
 import { getErrorMessage } from '../../utils/auth'
 import { useAdminStore } from '../../stores/admin'
 const adminStore = useAdminStore()
 const navBarHeight = ref('64px')
 const userId = ref('')
 const pageLoading = ref(true)
 const submitting = ref(false)
 const detail = ref<AdminMemberDetail | null>(null)
 const cardTypes = ref<CardType[]>([])
 const membershipIndex = ref(0)
 const profileForm = ref({
  nickname: '',
  phone: '',
 })
 const editForm = ref({
  membershipId: '' as string | '',
  cardTypeIndex: 0,
  cardTypeId: '',
  remainingTimes: null as number | string | null,
  startDate: '',
  expireDate: '',
  manuallyEditedExpire: false,
 })
 const existingMemberships = computed(() => detail.value?.memberships ?? [])
 const editingMembership = computed(() => existingMemberships.value[membershipIndex.value] ?? null)
 const membershipPickerLabels = computed(() =>
  existingMemberships.value.map((item) => `${item.cardType.name} · ${item.status}`),
 )
 const selectedCardType = computed(() => cardTypes.value[editForm.value.cardTypeIndex] ?? null)
 const canLeaveTimesEmpty = computed(() => {
  const cardType = selectedCardType.value
  const membership = editingMembership.value
  if (!cardType || cardType.type !== 'DURATION') return false
  return cardType.totalTimes === null || (
    membership?.cardTypeId === cardType.id && membership.remainingTimes === null
  )
 })
 function calculateExpireDate(startDate: string, durationDays: number): string {
  const d = new Date(startDate)
  d.setDate(d.getDate() + durationDays)
  return formatDateLocal(d)
 }
 function applyMembership(membership: MembershipWithCardType | null) {
  const types = cardTypes.value
  if (membership) {
    const idx = types.findIndex((item) => item.id === membership.cardTypeId)
    editForm.value = {
      membershipId: membership.id,
      cardTypeIndex: idx >= 0 ? idx : 0,
      cardTypeId: membership.cardTypeId,
      remainingTimes: membership.remainingTimes,
      startDate: membership.startDate.slice(0, 10),
      expireDate: membership.expireDate.slice(0, 10),
      manuallyEditedExpire: false,
    }
    return
  }
  editForm.value = {
    membershipId: '',
    cardTypeIndex: 0,
    cardTypeId: types[0]?.id || '',
    remainingTimes: types[0]?.totalTimes ?? null,
    startDate: formatDateLocal(new Date()),
    expireDate: calculateExpireDate(formatDateLocal(new Date()), types[0]?.durationDays ?? 30),
    manuallyEditedExpire: false,
  }
 }
 function onMembershipPick(e: { detail: { value: number } }) {
  membershipIndex.value = Number(e.detail.value)
  applyMembership(existingMemberships.value[membershipIndex.value] ?? null)
 }
 function onCardTypeChange(e: { detail: { value: number } }) {
  const idx = Number(e.detail.value)
  const cardType = cardTypes.value[idx]
  if (!cardType) return
  editForm.value.cardTypeIndex = idx
  editForm.value.cardTypeId = cardType.id
  editForm.value.remainingTimes = cardType.totalTimes
  if (!editForm.value.manuallyEditedExpire) {
    editForm.value.startDate = formatDateLocal(new Date())
    editForm.value.expireDate = calculateExpireDate(formatDateLocal(new Date()), cardType.durationDays)
  }
 }
 function onStartDateChange(e: { detail: { value: string } }) {
  editForm.value.startDate = e.detail.value
  if (!editForm.value.manuallyEditedExpire) {
    const cardType = cardTypes.value[editForm.value.cardTypeIndex]
    if (cardType) {
      editForm.value.expireDate = calculateExpireDate(e.detail.value, cardType.durationDays)
    }
  }
 }
 function onExpireDateChange(e: { detail: { value: string } }) {
  editForm.value.expireDate = e.detail.value
  editForm.value.manuallyEditedExpire = true
 }
 function parseRemainingTimes(): number | null | undefined {
  const rawValue = editForm.value.remainingTimes
  if (rawValue === null || (typeof rawValue === 'string' && rawValue.trim() === '')) {
    return null
  }
  const remainingTimes = Number(rawValue)
  if (!Number.isInteger(remainingTimes) || remainingTimes < 0) return undefined
  return remainingTimes
 }
 async function loadPage() {
  pageLoading.value = true
  try {
    const [member, types] = await Promise.all([
      adminStore.fetchMemberDetail(userId.value),
      cardTypes.value.length ? Promise.resolve(cardTypes.value) : adminStore.fetchCardTypes(),
    ])
    detail.value = member
    cardTypes.value = [...types]
    profileForm.value = {
      nickname: member.user.nickname || '',
      phone: member.user.phone || '',
    }
    membershipIndex.value = 0
    applyMembership(member.memberships[0] ?? null)
  } catch (err: unknown) {
    uni.showToast({ title: getErrorMessage(err, '加载失败'), icon: 'none' })
  } finally {
    pageLoading.value = false
  }
 }
 async function onSave() {
  if (submitting.value || !userId.value) return
  if (!editForm.value.cardTypeId) {
    uni.showToast({ title: '请选择卡类型', icon: 'none' })
    return
  }
  const remainingTimes = parseRemainingTimes()
  if (remainingTimes === undefined) {
    uni.showToast({ title: '剩余次数需为非负整数', icon: 'none' })
    return
  }
  if (remainingTimes === null && !canLeaveTimesEmpty.value) {
    uni.showToast({ title: '请输入剩余次数', icon: 'none' })
    return
  }
  submitting.value = true
  try {
    await adminStore.updateMemberProfile(userId.value, {
      nickname: profileForm.value.nickname.trim(),
      phone: profileForm.value.phone.trim(),
    })
    await adminStore.updateUserMembership(userId.value, {
      ...(editForm.value.membershipId ? { membershipId: editForm.value.membershipId } : {}),
      cardTypeId: editForm.value.cardTypeId,
      remainingTimes,
      startDate: editForm.value.startDate,
      expireDate: editForm.value.expireDate,
    })
    uni.showToast({ title: '保存成功', icon: 'success' })
    setTimeout(() => uni.navigateBack(), 400)
  } catch (err: unknown) {
    uni.showToast({ title: getErrorMessage(err, '保存失败'), icon: 'none' })
  } finally {
    submitting.value = false
  }
 }
 function onClearMembership() {
  if (!userId.value) return
  uni.showModal({
    title: '确认解除',
    content: '确定要解除当前这张会员卡吗？其他卡不受影响。',
    confirmColor: '#C47A7A',
    success: async (res) => {
      if (!res.confirm) return
      const membershipId = editForm.value.membershipId
      if (!membershipId) {
        uni.showToast({ title: '没有可解除的会员卡', icon: 'none' })
        return
      }
      try {
        await adminStore.deleteUserMembership(userId.value, membershipId)
        uni.showToast({ title: '已解除', icon: 'success' })
        setTimeout(() => uni.navigateBack(), 400)
      } catch (err: unknown) {
        uni.showToast({ title: getErrorMessage(err, '操作失败'), icon: 'none' })
      }
    },
  })
 }
 onLoad((query) => {
  userId.value = String(query?.userId || '')
 })
 onMounted(() => {
  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
  loadPage()
 })
 </script>
 <style lang="scss" scoped>
 .page {
  min-height: 100vh;
  background: $bg-page;
  padding-bottom: 80rpx;
 }
 .loading-wrap {
  padding: 80rpx 0;
  text-align: center;
 }
 .loading-text {
  font-size: 26rpx;
  color: $text-hint;
 }
 .form {
  padding: 24rpx;
 }
 .block {
  background: $bg-card;
  border-radius: 20rpx;
  padding: 8rpx 24rpx 16rpx;
  margin-bottom: 20rpx;
  border: 1rpx solid rgba(180, 160, 130, 0.12);
 }
 .block-title {
  display: block;
  padding: 20rpx 0 8rpx;
  font-size: 22rpx;
  letter-spacing: 3rpx;
  color: $text-hint;
 }
 .field {
  padding: 20rpx 0;
  border-bottom: 1rpx solid rgba(180, 160, 130, 0.1);
  &:last-of-type { border-bottom: none; }
 }
 .field-label {
  display: block;
  font-size: 24rpx;
  color: $text-hint;
  margin-bottom: 12rpx;
 }
 .field-input {
  height: 64rpx;
  font-size: 30rpx;
  color: $text-primary;
 }
 .field-picker {
  display: block;
 }
 .picker-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 64rpx;
 }
 .picker-text {
  font-size: 30rpx;
  color: $text-primary;
 }
 .picker-arrow {
  font-size: 24rpx;
  color: $text-hint;
 }
 .danger-link {
  padding: 20rpx 0 8rpx;
 }
 .danger-link-text {
  font-size: 24rpx;
  color: $error-color;
 }
 .save-btn {
  margin-top: 12rpx;
  height: 88rpx;
  border-radius: 18rpx;
  background: $brand-color;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .save-btn--disabled { opacity: 0.5; }
 .save-btn-text {
  font-size: 30rpx;
  font-weight: 700;
  color: #fff8f0;
 }
 </style>
--- a/packages/app/src/pages/admin/member-supplement.vue
+++ b/packages/app/src/pages/admin/member-supplement.vue
@@ -0,0 +1,211 @@
 <template>
  <view class="page" :style="{ paddingTop: navBarHeight }">
    <CustomNavBar title="补录上课" show-back />
    <view v-if="loading && !detail" class="state">正在读取会员资料…</view>
    <view v-else-if="!detail" class="state"><text>{{ loadError || '暂时无法读取会员资料' }}</text><button @tap="load">重新加载</button></view>
    <template v-else>
      <view v-if="loadError" class="pending-note">{{ loadError }}<button class="reload" :disabled="loading || busy" @tap="load">刷新资料</button></view>
      <view class="intro">
        <text class="eyebrow">历史课程</text>
        <text class="title">补齐每一节练习</text>
        <text class="intro-note">为 {{ detail.user.nickname || '这位学员' }} 补录已经上完的课程。</text>
        <view class="current"><text>累计上课</text><text>{{ detail.stats.completedBookings }} 节</text></view>
      </view>
      <view v-if="pending" class="pending-note">有一笔补录正在核对。请点击下方重试，系统会避免重复计入。</view>
      <view class="form-card">
        <text class="label">补录节数</text>
        <view class="quantity-row">
          <input v-model="quantity" class="quantity-input" type="number" maxlength="3" placeholder="0" :disabled="busy || !!pending" :cursor-spacing="24" />
          <text class="unit">节已上课程</text>
        </view>
        <view class="quick-values"><button v-for="n in [1, 5, 10, 20]" :key="n" :class="{ selected: Number(quantity) === n }" :disabled="busy || !!pending" @tap="quantity = String(n)">{{ n }} 节</button></view>
        <text class="hint">可填写 1–999 节，无需逐节创建预约</text>
      </view>
      <view class="form-card">
        <text class="label">会员卡次数</text>
        <view class="options">
          <button class="option" :class="{ chosen: !deduct }" :disabled="busy || !!pending" @tap="deduct = false"><text class="option-title">仅补记录</text><text class="option-note">不改变会员卡余额</text></button>
          <button class="option" :class="{ chosen: deduct }" :disabled="busy || !!pending" @tap="deduct = true"><text class="option-title">同时扣次</text><text class="option-note">从指定会员卡扣除</text></button>
        </view>
        <template v-if="deduct">
          <text v-if="!cards.length" class="field-error">暂无可扣次的会员卡，请选择仅补记录。</text>
          <picker v-else :range="cardLabels" :value="cardIndex" :disabled="busy || !!pending" @change="cardIndex = Number($event.detail.value)">
            <view class="card-picker"><text>{{ cardLabels[cardIndex] || '请选择会员卡' }}</text><text>⌄</text></view>
          </picker>
          <text v-if="selectedCard && validQuantity" class="balance" :class="{ 'field-error': insufficient }">{{ insufficient ? '余额不足，请调整节数或更换会员卡' : `扣除 ${count} 次后，剩余 ${selectedCard.remainingTimes! - count} 次` }}</text>
          <text class="hint">过去已扣过的课程，请选择「仅补记录」。不限次卡无需扣次。</text>
        </template>
      </view>
      <view class="form-card">
        <view class="label-row"><text class="label">备注</text><text class="optional">选填</text></view>
        <textarea v-model="remark" class="remark" maxlength="200" placeholder="例如：系统启用前已完成的 10 节私教课" :disabled="busy || !!pending" :cursor-spacing="32" />
        <text class="hint">{{ remark.length }} / 200</text>
      </view>
      <view class="summary">
        <text class="summary-title">{{ validQuantity ? `累计上课将增加 ${count} 节` : '填写已完成的课程节数' }}</text>
        <text class="hint">记录显示为「系统补录」。不计入本月上课、练习天数与最近 30 天网格。</text>
      </view>
      <view class="submit-wrap"><button class="submit" :disabled="busy || loading || !!loadError || (!pending && !canSubmit)" :loading="busy" @tap="submit">{{ busy ? '正在处理…' : pending ? '核对并重试补录' : '确认补录' }}</button><text v-if="submitError" class="field-error">{{ submitError }}</text></view>
      <view class="history">
        <view class="label-row"><text class="label">补录记录</text><text class="optional">{{ records.length }} 笔</text></view>
        <LessonSupplementList v-if="records.length" :records="records" editable :busy="busy || !!pending" @revoke="revoke" />
        <text v-else class="empty">还没有补录记录</text>
      </view>
    </template>
  </view>
 </template>
 <script setup lang="ts">
 import { ref, computed } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import type { AdminMemberDetail, CreateLessonSupplementDto, LessonSupplementRecord } from '@mp-pilates/shared'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import LessonSupplementList from '../../components/LessonSupplementList.vue'
 import { useAdminStore } from '../../stores/admin'
 import { getSystemLayout } from '../../utils/system'
 import { HttpRequestError } from '../../utils/request'
 import { getErrorMessage } from '../../utils/auth'
 const store = useAdminStore()
 const navBarHeight = `${getSystemLayout().navBarHeight}px`
 const userId = ref('')
 const detail = ref<AdminMemberDetail | null>(null)
 const records = ref<LessonSupplementRecord[]>([])
 const loading = ref(false)
 const busy = ref(false)
 const loadError = ref('')
 const submitError = ref('')
 const quantity = ref('')
 const remark = ref('')
 const deduct = ref(false)
 const cardIndex = ref(0)
 const pending = ref<CreateLessonSupplementDto | null>(null)
 const storageKey = computed(() => `lesson-supplement-pending:${userId.value}`)
 const cards = computed(() => (detail.value?.memberships ?? []).filter(c => c.remainingTimes !== null && c.remainingTimes > 0))
 const cardLabels = computed(() => cards.value.map(c => `${c.cardType.name} · 余 ${c.remainingTimes} 次${new Date(c.expireDate) <= new Date() || c.status === 'EXPIRED' ? ' · 已过期' : ''}`))
 const selectedCard = computed(() => cards.value[cardIndex.value])
 const count = computed(() => Number(quantity.value))
 const validQuantity = computed(() => /^\d{1,3}$/.test(quantity.value) && count.value >= 1 && count.value <= 999)
 const insufficient = computed(() => !!selectedCard.value && count.value > selectedCard.value.remainingTimes!)
 const canSubmit = computed(() => validQuantity.value && (!deduct.value || (!!selectedCard.value && !insufficient.value)))
 function clearPending() {
  pending.value = null
  uni.removeStorageSync(storageKey.value)
 }
 async function load() {
  if (!userId.value) { loadError.value = '缺少会员信息，请返回会员档案'; return }
  loading.value = true
  loadError.value = ''
  try {
    const [member, items] = await Promise.all([store.fetchMemberDetail(userId.value), store.fetchLessonSupplements(userId.value)])
    detail.value = member
    records.value = items
    if (pending.value && items.some(item => item.requestId === pending.value!.requestId)) {
      clearPending()
      quantity.value = ''
      remark.value = ''
      submitError.value = ''
    }
  } catch (err) {
    loadError.value = getErrorMessage(err, '加载失败，请重试')
    if (detail.value) uni.showToast({ title: loadError.value, icon: 'none' })
  } finally { loading.value = false }
 }
 async function submit() {
  if (busy.value || loading.value || loadError.value || (!pending.value && !canSubmit.value)) return
  busy.value = true
  submitError.value = ''
  try {
    if (!pending.value) {
      const result = await uni.showModal({
        title: `补录 ${count.value} 节已上课程`,
        content: `学员：${detail.value?.user.nickname || '未命名学员'}。${deduct.value ? `从「${selectedCard.value.cardType.name}」扣除 ${count.value} 次，剩余 ${selectedCard.value.remainingTimes! - count.value} 次。` : '仅增加上课记录，不扣会员卡次数。'}`,
        confirmText: '确认补录', confirmColor: '#617d73',
      })
      if (!result.confirm) return
      const payload: CreateLessonSupplementDto = {
        requestId: `supp_${Date.now()}_${Math.random().toString(36).slice(2)}_${Math.random().toString(36).slice(2)}`,
        quantity: count.value, ...(deduct.value ? { membershipId: selectedCard.value.id } : {}),
        ...(remark.value.trim() ? { remark: remark.value.trim() } : {}),
      }
      // Retain the exact request across timeouts, navigation and application restarts.
      uni.setStorageSync(storageKey.value, payload)
      pending.value = payload
    }
    const record = await store.createLessonSupplement(userId.value, pending.value)
    if (!records.value.some(item => item.id === record.id)) records.value = [record, ...records.value]
    clearPending()
    quantity.value = ''
    remark.value = ''
    uni.showToast({ title: `已补录 ${record.quantity} 节课`, icon: 'success' })
    await load()
  } catch (err) {
    if (err instanceof HttpRequestError && err.statusCode >= 400 && err.statusCode < 500 && err.statusCode !== 408) clearPending()
    submitError.value = getErrorMessage(err, '提交失败，请重试')
    if (pending.value) submitError.value = '暂未确认提交结果，请核对并重试，不会重复补录。'
  } finally { busy.value = false }
 }
 async function revoke(item: LessonSupplementRecord) {
  if (busy.value || pending.value) return
  busy.value = true
  try {
    const result = await uni.showModal({ title: '撤销这笔补录？', content: `累计上课减少 ${item.quantity} 节。${item.deductedTimes ? `向原会员卡返还 ${item.deductedTimes} 次。` : '会员卡余额不变。'}记录会保留为已撤销。`, confirmText: '确认撤销', confirmColor: '#967561' })
    if (!result.confirm) return
    await store.revokeLessonSupplement(userId.value, item.id)
    uni.showToast({ title: '已撤销补录', icon: 'success' })
    await load()
  } catch (err) { uni.showToast({ title: getErrorMessage(err, '撤销失败，请重试'), icon: 'none' }) }
  finally { busy.value = false }
 }
 onLoad(query => {
  userId.value = String(query?.userId || '')
  const saved = uni.getStorageSync(storageKey.value) as CreateLessonSupplementDto | undefined
  if (saved?.requestId && Number.isInteger(saved.quantity)) {
    pending.value = saved
    quantity.value = String(saved.quantity)
    remark.value = saved.remark || ''
    deduct.value = !!saved.membershipId
  }
  load().then(() => {
    if (pending.value?.membershipId) cardIndex.value = cards.value.findIndex(c => c.id === pending.value!.membershipId)
  })
 })
 </script>
 <style lang="scss" scoped>
 .page { min-height: 100vh; box-sizing: border-box; background: #fbf9f6; color: #514943; padding-bottom: calc(40rpx + env(safe-area-inset-bottom)); }
 .intro { margin: 28rpx 32rpx; padding: 32rpx; border-radius: 30rpx; background: #f2e9e3; }
 .eyebrow { display: block; font-size: 21rpx; color: #967c69; }
 .title { display: block; margin-top: 14rpx; font-size: 38rpx; font-family: 'Songti SC', 'STSong', serif; }
 .intro-note { display: block; margin-top: 16rpx; font-size: 24rpx; line-height: 1.7; color: #87786b; overflow-wrap: anywhere; }
 .current { display: flex; justify-content: space-between; gap: 20rpx; margin-top: 26rpx; padding-top: 22rpx; border-top: 1rpx solid #e4d8cf; font-size: 24rpx; color: #78675c; }
 .form-card { margin: 24rpx 32rpx; padding: 28rpx; border-radius: 26rpx; border: 1rpx solid #eee8e3; background: #fff; }
 .label { font-size: 27rpx; font-weight: 500; }
 .label-row { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; margin-bottom: 20rpx; }
 .optional { font-size: 21rpx; color: #9a9086; }
 .quantity-row { display: flex; align-items: baseline; gap: 20rpx; margin-top: 20rpx; }
 .quantity-input { width: 180rpx; min-width: 0; height: 92rpx; font-size: 64rpx; color: #617d73; font-variant-numeric: tabular-nums; }
 .unit { font-size: 24rpx; color: #8b817b; }
 .quick-values { display: flex; gap: 14rpx; margin-top: 20rpx; button { flex: 1; padding: 0; margin: 0; border-radius: 14rpx; font-size: 24rpx; line-height: 64rpx; background: #f5f3ef; color: #81756b; &::after { border: none; } &.selected { background: #e8efe7; color: #617d73; } } }
 .hint { display: block; margin-top: 18rpx; color: #92867b; font-size: 22rpx; line-height: 1.7; }
 .options { display: flex; gap: 16rpx; margin-top: 22rpx; }
 .option { flex: 1; min-width: 0; margin: 0; padding: 22rpx 12rpx; text-align: left; border-radius: 18rpx; border: 2rpx solid #eee8e3; background: #fff; line-height: 1.5; &::after { border: none; } &.chosen { border-color: #a6b8a9; background: #eff3ed; } }
 .option-title { display: block; font-size: 26rpx; color: #617d73; }
 .option-note { display: block; margin-top: 8rpx; font-size: 20rpx; color: #8b817b; }
 .card-picker { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; margin-top: 22rpx; padding: 20rpx; border-radius: 16rpx; background: #f6f3ef; font-size: 24rpx; line-height: 1.6; }
 .balance { display: block; margin-top: 16rpx; font-size: 23rpx; color: #617d73; }
 .remark { width: 100%; height: 136rpx; box-sizing: border-box; padding: 18rpx; border-radius: 16rpx; background: #faf8f5; font-size: 25rpx; line-height: 1.6; }
 .summary { margin: 28rpx 40rpx; }
 .summary-title { font-size: 26rpx; color: #617d73; }
 .submit-wrap { margin: 28rpx 32rpx; }
 .submit { display: block; width: 100%; padding: 0; margin: 0; line-height: 88rpx; border-radius: 999rpx; background: #6b8276; color: #fff; font-size: 28rpx; &::after { border: none; } &[disabled] { background: #e3e8df; color: #8a9586; } }
 .history { margin: 44rpx 32rpx 0; }
 .empty { display: block; padding: 36rpx 28rpx; border-radius: 24rpx; background: #f3f0eb; font-size: 24rpx; color: #8b817b; }
 .field-error { display: block; margin-top: 18rpx; color: #a36e59; font-size: 23rpx; line-height: 1.6; }
 .pending-note { margin: 24rpx 32rpx; padding: 24rpx; background: #f2e9e3; color: #8b7160; border-radius: 20rpx; font-size: 24rpx; line-height: 1.7; }
 .reload { margin: 16rpx 0 0; font-size: 24rpx; line-height: 2; background: #e5eade; color: #617d73; &::after { border: none; } }
 .state { padding: 60rpx 32rpx; font-size: 26rpx; color: #8b817b; text-align: center; button { margin-top: 24rpx; font-size: 26rpx; } }
 </style>
--- a/packages/app/src/pages/admin/members.vue
+++ b/packages/app/src/pages/admin/members.vue
@@ -2,12 +2,12 @@
  <view class="page" :style="{ paddingTop: navBarHeight }">
    <CustomNavBar title="会员管理" show-back />
    <!-- Search bar -->
    <view class="filter-bar">
      <view class="search-field">
      <input
        class="search-input"
        v-model="searchQuery"
-        placeholder="搜索昵称或 OpenID"
+        placeholder="搜索昵称 / 手机 / OpenID"
        placeholder-style="color:#bbb"
        @confirm="onSearch"
        confirm-type="search"
@@ -15,6 +15,7 @@
      <view v-if="searchQuery" class="search-clear" @tap="onClear">
        <text class="search-clear-icon">×</text>
      </view>
      </view>
      <picker
        class="type-picker"
        mode="selector"
@@ -33,28 +34,24 @@
      </view>
    </view>
    <!-- Stats row -->
    <view class="stats-row">
      <view class="stat-item">
        <text class="stat-value">{{ total }}</text>
-        <text class="stat-label">总会员</text>
+        <text class="stat-label">位用户</text>
      </view>
    </view>
    <!-- Loading skeleton -->
    <view v-if="loading && !members.length" class="skeleton-list">
      <view v-for="i in 5" :key="i" class="skeleton-item" />
    </view>
    <!-- Empty -->
    <view v-else-if="!loading && !members.length" class="empty-state">
      <view class="empty-icon-wrap">
        <view class="empty-icon-person" />
      </view>
-      <text class="empty-text">{{ searchQuery ? '未找到匹配的会员' : '暂无会员数据' }}</text>
+      <text class="empty-text">{{ searchQuery ? '未找到匹配的用户' : '当前筛选下暂无用户' }}</text>
    </view>
    <!-- Member list -->
    <view v-else class="member-list">
      <view
        v-for="m in members"
@@ -69,8 +66,20 @@
          </view>
        </view>
        <view class="member-info">
          <view class="member-name-row">
            <text class="member-name">{{ m.nickname || '未知用户' }}</text>
-          <text class="member-openid">{{ m.openid }}</text>
+            <view
              v-if="m.activeCard"
              class="card-chip"
              :class="'card-chip--' + m.activeCard.type.toLowerCase()"
            >
              <text class="card-chip-text">{{ getCardTypeLabel(m.activeCard.type) }}</text>
            </view>
            <view v-else class="card-chip card-chip--none">
              <text class="card-chip-text">无卡</text>
            </view>
          </view>
          <text class="member-sub">{{ m.phone || m.openid }}</text>
        </view>
        <view class="member-stats">
          <text class="member-stat-value">{{ m.totalBookings }}</text>
@@ -80,91 +89,54 @@
      </view>
    </view>
    <!-- Bottom status -->
    <view v-if="members.length" class="list-footer">
      <text class="list-footer-text">
        {{ loading ? '加载中...' : hasMore ? '上拉加载更多' : '— 已加载全部 —' }}
      </text>
    </view>
    <!-- Detail modal -->
    <view v-if="showDetail && detailMember" class="modal-mask" @tap.self="showDetail = false">
      <view class="modal">
        <view class="detail-header">
          <view class="detail-avatar">
            <image v-if="detailMember.avatarUrl" class="avatar-img" :src="detailMember.avatarUrl" mode="aspectFill" />
            <view v-else class="avatar-placeholder avatar-placeholder--lg">
              <text class="avatar-text avatar-text--lg">{{ (detailMember.nickname || '?').slice(0, 1) }}</text>
            </view>
          </view>
          <text class="detail-name">{{ detailMember.nickname || '未知用户' }}</text>
          <text class="detail-openid" @tap="copyOpenid(detailMember.openid)">
            {{ detailMember.openid }}
          </text>
          <text class="detail-phone">{{ detailMember.phone || '未绑定手机' }}</text>
        </view>
        <view class="detail-stats">
          <view class="detail-stat">
            <text class="detail-stat-value">{{ detailMember.totalBookings }}</text>
            <text class="detail-stat-label">总预约</text>
          </view>
          <view class="detail-stat">
            <text class="detail-stat-value">{{ detailMember.completedBookings }}</text>
            <text class="detail-stat-label">已完成</text>
          </view>
          <view class="detail-stat">
            <text class="detail-stat-value">{{ detailMember.cancelledBookings }}</text>
            <text class="detail-stat-label">已取消</text>
          </view>
        </view>
        <view class="modal-close" @tap="showDetail = false">
          <text class="modal-close-text">关闭</text>
        </view>
      </view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue'
-import { onReachBottom } from '@dcloudio/uni-app'
+import { onReachBottom, onShow } from '@dcloudio/uni-app'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import { getSystemLayout } from '../../utils/system'
 import { getCardTypeLabel } from '../../utils/format'
 import { useAdminStore } from '../../stores/admin'
 import type { MemberSummary } from '../../stores/admin'
 const adminStore = useAdminStore()
 const navBarHeight = ref('64px')
 onMounted(() => {
  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
 })
 const members = ref<MemberSummary[]>([])
 const loading = ref(false)
 const searchQuery = ref('')
 const page = ref(1)
 const total = ref(0)
 const hasMore = ref(false)
 const showDetail = ref(false)
 const detailMember = ref<MemberSummary | null>(null)
 const LIMIT = 20
 const cardTypeOptions = [
-  { label: '全部', value: '' },
+  { label: '会员用户', value: 'ACTIVE' },
  { label: '全部用户', value: '' },
  { label: '体验卡', value: 'TRIAL' },
  { label: '次卡', value: 'TIMES' },
  { label: '月卡', value: 'DURATION' },
-  { label: '无卡', value: 'NONE' },
+  { label: '无卡用户', value: 'NONE' },
 ]
 const cardTypeIndex = ref(0)
 let requestId = 0
 let cardTypeDebounceTimer: ReturnType<typeof setTimeout> | null = null
 function onCardTypeChange(e: { detail: { value: number } }) {
-  cardTypeIndex.value = e.detail.value
+  cardTypeIndex.value = Number(e.detail.value)
  // Invalidate the old filter immediately, including during the debounce window.
  requestId++
  loading.value = true
  members.value = []
  total.value = 0
  hasMore.value = false
  if (cardTypeDebounceTimer) clearTimeout(cardTypeDebounceTimer)
  cardTypeDebounceTimer = setTimeout(() => {
    loadMembers(true)
@@ -173,25 +145,32 @@ function onCardTypeChange(e: { detail: { value: number } }) {
 }
 onUnmounted(() => {
  requestId++
  if (cardTypeDebounceTimer) clearTimeout(cardTypeDebounceTimer)
 })
 async function loadMembers(reset = false) {
-  if (loading.value) return
+  if (loading.value && !reset) return
  const id = ++requestId
  const requestedPage = reset ? 1 : page.value + 1
  if (reset) {
    page.value = 1
    members.value = []
    total.value = 0
    hasMore.value = false
  }
  loading.value = true
  try {
    const search = searchQuery.value.trim()
    const cardType = cardTypeOptions[cardTypeIndex.value].value
    const result = await adminStore.fetchMembers({
-      page: page.value,
+      page: requestedPage,
      limit: LIMIT,
      ...(search ? { search } : {}),
      ...(cardType ? { cardType } : {}),
    })
    if (id !== requestId) return
    page.value = requestedPage
    if (reset) {
      members.value = [...result.items]
    } else {
@@ -200,9 +179,35 @@ async function loadMembers(reset = false) {
    total.value = result.total
    hasMore.value = members.value.length < result.total
  } catch {
-    uni.showToast({ title: '加载失败', icon: 'none' })
+    if (id === requestId) uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
-    loading.value = false
+    if (id === requestId) loading.value = false
  }
 }
 async function refreshVisibleMembers() {
  if (loading.value) return
  const id = ++requestId
  loading.value = true
  try {
    const search = searchQuery.value.trim()
    const cardType = cardTypeOptions[cardTypeIndex.value].value
    const limit = Math.max(members.value.length, LIMIT)
    const result = await adminStore.fetchMembers({
      page: 1,
      limit,
      ...(search ? { search } : {}),
      ...(cardType ? { cardType } : {}),
    })
    if (id !== requestId) return
    members.value = [...result.items]
    total.value = result.total
    page.value = Math.max(1, Math.ceil(members.value.length / LIMIT) || 1)
    hasMore.value = members.value.length < result.total
  } catch {
    if (id === requestId) uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    if (id === requestId) loading.value = false
  }
 }
@@ -215,26 +220,29 @@ function onClear() {
  loadMembers(true)
 }
 // Scroll to bottom → load next page
 onReachBottom(() => {
  if (!hasMore.value || loading.value) return
  page.value++
  loadMembers(false)
 })
 function openDetail(m: MemberSummary) {
-  detailMember.value = m
+  uni.navigateTo({ url: `/pages/admin/member-detail?userId=${m.userId}` })
  showDetail.value = true
 }
-function copyOpenid(openid: string) {
+let hasLoaded = false
-  uni.setClipboardData({
+
-    data: openid,
+onMounted(() => {
-    success: () => uni.showToast({ title: '已复制 OpenID', icon: 'success' }),
+  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
  loadMembers(true).then(() => {
    hasLoaded = true
  })
-}
+})
-onMounted(() => loadMembers(true))
+onShow(() => {
  if (hasLoaded) {
    refreshVisibleMembers()
  }
 })
 </script>
 <style lang="scss" scoped>
@@ -244,7 +252,6 @@ onMounted(() => loadMembers(true))
  padding-bottom: 40rpx;
 }
 /* ── Filter bar ──────────────────────────── */
 .filter-bar {
  display: flex;
  align-items: center;
@@ -255,19 +262,27 @@ onMounted(() => loadMembers(true))
  position: relative;
 }
 .search-field {
  flex: 1;
  min-width: 0;
  position: relative;
 }
 .search-input {
  flex: 1;
  min-width: 0;
  height: 72rpx;
  background: $bg-page;
  border-radius: 36rpx;
-  padding: 0 28rpx;
+  padding: 0 60rpx 0 24rpx;
  font-size: 26rpx;
  color: $text-primary;
 }
 .search-clear {
  position: absolute;
-  right: 260rpx;
+  right: 12rpx;
  top: 14rpx;
  width: 44rpx;
  height: 44rpx;
  display: flex;
@@ -289,7 +304,6 @@ onMounted(() => loadMembers(true))
 .search-btn-text { font-size: 26rpx; font-weight: 600; color: $accent-color; }
 /* ── Type picker ──────────────────────────── */
 .type-picker {
  flex-shrink: 0;
  background: $bg-page;
@@ -309,7 +323,7 @@ onMounted(() => loadMembers(true))
 .type-picker-text {
  font-size: 24rpx;
  color: $text-secondary;
-  max-width: 80rpx;
+  max-width: 120rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
@@ -320,7 +334,6 @@ onMounted(() => loadMembers(true))
  color: $text-hint;
 }
 /* ── Stats row ───────────────────────────── */
 .stats-row {
  display: flex;
  padding: 24rpx 28rpx 16rpx;
@@ -330,7 +343,6 @@ onMounted(() => loadMembers(true))
 .stat-value { font-size: 36rpx; font-weight: 800; color: $accent-color; }
 .stat-label { font-size: 24rpx; color: $text-hint; }
 /* ── Skeleton ────────────────────────────── */
 .skeleton-list { padding: 0 24rpx; }
 .skeleton-item {
@@ -342,7 +354,6 @@ onMounted(() => loadMembers(true))
  animation: shimmer 1.4s infinite;
 }
 /* ── Empty ───────────────────────────────── */
 .empty-state {
  display: flex;
  flex-direction: column;
@@ -392,7 +403,6 @@ onMounted(() => loadMembers(true))
 .empty-text { font-size: 28rpx; color: $text-hint; }
 /* ── Member list ─────────────────────────── */
 .member-list { padding: 0 24rpx; padding-top: 8rpx; }
 .member-row {
@@ -426,124 +436,95 @@ onMounted(() => loadMembers(true))
  justify-content: center;
 }
 .avatar-placeholder--lg {
  width: 120rpx;
  height: 120rpx;
 }
 .avatar-text {
-  font-size: 32rpx;
+  font-size: 28rpx;
  font-weight: 700;
-  color: $accent-color;
+  color: $primary-dark;
 }
 .avatar-text--lg { font-size: 48rpx; }
 .member-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
-  gap: 6rpx;
+  gap: 8rpx;
 }
 .member-name-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  min-width: 0;
 }
 .member-name {
-  font-size: 28rpx;
+  font-size: 30rpx;
-  font-weight: 600;
+  font-weight: 700;
-  color: $brand-color;
+  color: $text-primary;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280rpx;
 }
-.member-openid {
+.card-chip {
  flex-shrink: 0;
  padding: 2rpx 12rpx;
  border-radius: 8rpx;
  background: rgba($accent-color, 0.16);
  &--trial { background: rgba(#C47A7A, 0.14); }
  &--times { background: rgba($accent-color, 0.16); }
  &--duration { background: rgba(#7A9E7E, 0.16); }
  &--none { background: rgba($text-hint, 0.12); }
 }
 .card-chip-text {
  font-size: 20rpx;
  color: $text-secondary;
  letter-spacing: 1rpx;
 }
 .member-sub {
  font-size: 22rpx;
  color: $text-hint;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: Menlo, Monaco, Consolas, monospace;
 }
-.member-stats { display: flex; flex-direction: column; align-items: flex-end; gap: 4rpx; flex-shrink: 0; }
+.member-stats {
 .member-stat-value { font-size: 32rpx; font-weight: 700; color: $accent-color; }
 .member-stat-label { font-size: 20rpx; color: $text-hint; }
 .member-arrow { font-size: 36rpx; color: $text-hint; transform: scaleX(0.6); }
 /* ── List footer ─────────────────────────── */
 .list-footer {
  text-align: center;
  padding: 28rpx 0 16rpx;
 }
 .list-footer-text { font-size: 24rpx; color: $text-hint; }
 /* ── Detail modal ────────────────────────── */
 .modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: flex-end;
  z-index: 100;
 }
 .modal {
  width: 100%;
  background: $bg-card;
  border-radius: $radius-lg $radius-lg 0 0;
  padding: 48rpx 32rpx 60rpx;
 }
 .detail-header {
  display: flex;
  flex-direction: column;
-  align-items: center;
+  align-items: flex-end;
-  gap: 12rpx;
+  flex-shrink: 0;
  margin-bottom: 40rpx;
 }
-.detail-avatar {
+.member-stat-value {
-  width: 120rpx;
+  font-size: 32rpx;
-  height: 120rpx;
+  font-weight: 800;
-  border-radius: 50%;
+  color: $text-primary;
-  overflow: hidden;
+  font-family: 'DIN Alternate', 'Helvetica Neue', sans-serif;
  margin-bottom: 8rpx;
 }
-.detail-name { font-size: 32rpx; font-weight: 700; color: $brand-color; }
+.member-stat-label {
  font-size: 20rpx;
  color: $text-hint;
 }
-.detail-openid {
+.member-arrow {
  font-size: 32rpx;
  color: $text-hint;
  flex-shrink: 0;
 }
 .list-footer {
  padding: 16rpx 0 40rpx;
  text-align: center;
 }
 .list-footer-text {
  font-size: 22rpx;
-  color: $accent-color;
+  color: $text-hint;
  font-family: Menlo, Monaco, Consolas, monospace;
  padding: 6rpx 16rpx;
  background: rgba($accent-color, 0.08);
  border-radius: 8rpx;
 }
 .detail-phone { font-size: 26rpx; color: $text-secondary; }
 .detail-stats {
  display: flex;
  justify-content: space-around;
  background: $bg-page;
  border-radius: $radius-md;
  padding: 28rpx;
  margin-bottom: 32rpx;
 }
 .detail-stat { display: flex; flex-direction: column; align-items: center; gap: 8rpx; }
 .detail-stat-value { font-size: 40rpx; font-weight: 800; color: $accent-color; }
 .detail-stat-label { font-size: 22rpx; color: $text-hint; }
 .modal-close {
  width: 100%;
  height: 88rpx;
  background: $bg-page;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .modal-close-text { font-size: 28rpx; color: $text-secondary; }
 </style>
--- a/packages/app/src/pages/admin/orders.vue
+++ b/packages/app/src/pages/admin/orders.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="page" :style="{ paddingTop: navBarHeight }">
+  <view class="page" :style="{ '--status-bar': statusBarHeight + 'px' }">
    <CustomNavBar title="订单管理" show-back />
    <!-- Summary stats bar -->
@@ -44,7 +44,9 @@
      class="list-scroll"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      :lower-threshold="120"
      @refresherrefresh="onRefresh"
      @scrolltolower="loadMore"
    >
      <!-- Loading skeleton -->
      <view v-if="loading && !orders.length" class="order-list">
@@ -106,21 +108,21 @@
              </view>
              <view class="info-right">
                <text class="info-label">下单时间</text>
-                <text class="info-value">{{ formatDate(order.createdAt) }}</text>
+                <text class="info-value">{{ formatDateTime(order.createdAt) }}</text>
              </view>
            </view>
            <!-- Paid time if available -->
            <view v-if="order.paidAt && order.status === OrderStatus.PAID" class="info-row">
              <text class="info-label">支付时间</text>
-              <text class="info-value">{{ formatDate(order.paidAt) }}</text>
+              <text class="info-value">{{ formatDateTime(order.paidAt) }}</text>
            </view>
          </view>
        </view>
      </view>
      <!-- Load more / no more -->
-      <view v-if="hasMore" class="load-more" @tap="loadMore">
+      <view v-if="hasMore" class="load-more">
        <text class="load-more-text">{{ loading ? '加载中...' : '加载更多' }}</text>
      </view>
      <view v-else-if="orders.length > 0" class="no-more">
@@ -133,19 +135,21 @@
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import { ref, computed, onMounted } from 'vue'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import { getSystemLayout } from '../../utils/system'
 import { useAdminStore } from '../../stores/admin'
-import { formatPrice, formatDate } from '../../utils/format'
+import { formatPrice, formatDateTime } from '../../utils/format'
 import { OrderStatus } from '@mp-pilates/shared'
 import type { OrderWithDetails } from '@mp-pilates/shared'
 const adminStore = useAdminStore()
-const navBarHeight = ref('64px')
+// 动态计算顶部模块高度
 const statusBarHeight = ref(0)
 onMounted(() => {
-  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
+  const windowInfo = uni.getWindowInfo()
  statusBarHeight.value = windowInfo.statusBarHeight ?? 20
 })
 const filters = [
@@ -165,6 +169,21 @@ const totalCount = ref<number | null>(null)
 const paidCount = ref<number | null>(null)
 const pendingCount = ref<number | null>(null)
 // 每个 tab 单独缓存数据
 const orderCache: Record<string, { items: OrderWithDetails[]; total: number; page: number; hasMore: boolean }> = {}
 function getCacheKey(filter: string): string {
  return filter || 'all'
 }
 function getCachedData(filter: string) {
  return orderCache[getCacheKey(filter)]
 }
 function setCachedData(filter: string, data: { items: OrderWithDetails[]; total: number; page: number; hasMore: boolean }) {
  orderCache[getCacheKey(filter)] = data
 }
 const LIMIT = 20
 function statusLabel(s: string) {
@@ -191,23 +210,45 @@ function statusAccentClass(s: string) {
 }
 async function loadOrders(reset = false) {
  const filter = activeFilter.value
  // 如果有缓存且是重置（切换tab），直接用缓存数据
  if (reset) {
    const cached = getCachedData(filter)
    if (cached) {
      orders.value = [...cached.items]
      hasMore.value = cached.hasMore
      page.value = cached.page
      return
    }
  }
  // 初始加载或下拉刷新，需要请求接口
  if (loading.value) return
  if (reset) page.value = 1
  loading.value = true
  try {
    const params: { page: number; limit: number; status?: string } = {
      page: page.value,
      limit: LIMIT,
    }
-    if (activeFilter.value) params.status = activeFilter.value
+    if (filter) params.status = filter
    const result = await adminStore.fetchAdminOrders(params)
-    if (reset) {
+
-      orders.value = [...result.items]
+    const newItems = reset ? [...result.items] : [...orders.value, ...result.items]
-    } else {
+    const newHasMore = newItems.length < result.total
-      orders.value.push(...result.items)
+
-    }
+    // 缓存数据
-    hasMore.value = orders.value.length < result.total
+    setCachedData(filter, {
-    totalCount.value = result.total
+      items: newItems,
      total: result.total,
      page: page.value,
      hasMore: newHasMore,
    })
    orders.value = newItems
    hasMore.value = newHasMore
  } catch {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
@@ -216,30 +257,79 @@ async function loadOrders(reset = false) {
  }
 }
-async function loadSummaryCounts() {
+// 初始加载所有分类的数据
 async function loadAllFiltersData() {
  loading.value = true
  try {
-    const [allResult, paidResult, pendingResult] = await Promise.all([
+    // 并行请求所有分类（第一页数据）
-      adminStore.fetchAdminOrders({ page: 1, limit: 1 }),
+    const [allResult, paidResult, pendingResult, refundedResult] = await Promise.all([
-      adminStore.fetchAdminOrders({ page: 1, limit: 1, status: OrderStatus.PAID }),
+      adminStore.fetchAdminOrders({ page: 1, limit: LIMIT }),
-      adminStore.fetchAdminOrders({ page: 1, limit: 1, status: OrderStatus.PENDING }),
+      adminStore.fetchAdminOrders({ page: 1, limit: LIMIT, status: OrderStatus.PAID }),
      adminStore.fetchAdminOrders({ page: 1, limit: LIMIT, status: OrderStatus.PENDING }),
      adminStore.fetchAdminOrders({ page: 1, limit: LIMIT, status: OrderStatus.REFUNDED }),
    ])
    // 缓存全部
    setCachedData('', {
      items: [...allResult.items],
      total: allResult.total,
      page: 1,
      hasMore: allResult.items.length < allResult.total,
    })
    totalCount.value = allResult.total
    // 缓存已支付
    setCachedData(OrderStatus.PAID, {
      items: [...paidResult.items],
      total: paidResult.total,
      page: 1,
      hasMore: paidResult.items.length < paidResult.total,
    })
    paidCount.value = paidResult.total
    // 缓存待支付
    setCachedData(OrderStatus.PENDING, {
      items: [...pendingResult.items],
      total: pendingResult.total,
      page: 1,
      hasMore: pendingResult.items.length < pendingResult.total,
    })
    pendingCount.value = pendingResult.total
    // 缓存已退款
    setCachedData(OrderStatus.REFUNDED, {
      items: [...refundedResult.items],
      total: refundedResult.total,
      page: 1,
      hasMore: refundedResult.items.length < refundedResult.total,
    })
    // 设置当前 tab 的数据
    orders.value = [...allResult.items]
    hasMore.value = allResult.items.length < allResult.total
  } catch {
-    // non-critical, ignore
+    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
    refreshing.value = false
  }
 }
 function selectFilter(value: string) {
  activeFilter.value = value
-  totalCount.value = null
+  // 切换 tab 直接从缓存读取
-  loadOrders(true)
+  const cached = getCachedData(value)
  if (cached) {
    orders.value = [...cached.items]
    hasMore.value = cached.hasMore
    page.value = cached.page
  }
 }
 async function onRefresh() {
  refreshing.value = true
-  await Promise.all([loadOrders(true), loadSummaryCounts()])
+  // 下拉刷新重新请求所有分类的数据
  await loadAllFiltersData()
 }
 function loadMore() {
@@ -249,8 +339,7 @@ function loadMore() {
 }
 onMounted(() => {
-  loadOrders(true)
+  loadAllFiltersData()
  loadSummaryCounts()
 })
 </script>
@@ -266,13 +355,18 @@ onMounted(() => {
 /* ── Stats bar ──────────────────────────────── */
 .stats-bar {
  position: fixed;
  top: calc(var(--status-bar) + 44px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  height: 96rpx;
  background: #FFFFFF;
-  padding: 28rpx 0;
+  padding: 0;
  margin: 0;
  border-bottom: 1rpx solid rgba(180, 160, 130, 0.2);
  box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.08);
  z-index: 100;
 }
 .stat-item {
@@ -309,9 +403,13 @@ onMounted(() => {
 /* ── Filter pills ───────────────────────────── */
 .filter-wrap {
  position: fixed;
  top: calc(var(--status-bar) + 92px);
  left: 0;
  right: 0;
  background: #FAF8F5;
  border-bottom: 1rpx solid rgba(180, 160, 130, 0.15);
-  flex-shrink: 0;
+  z-index: 99;
 }
 .filter-scroll { overflow: hidden; }
@@ -364,7 +462,11 @@ onMounted(() => {
 /* ── List ───────────────────────────────────── */
 .list-scroll {
-  flex: 1;
+  position: fixed;
  top: calc(var(--status-bar) + 144px);
  left: 0;
  right: 0;
  bottom: 0;
  overflow: hidden;
 }
--- a/packages/app/src/pages/admin/schedule.vue
+++ b/packages/app/src/pages/admin/schedule.vue
@@ -15,7 +15,7 @@
    <view v-else-if="editableSlots.length === 0" class="empty-state">
      <text class="empty-icon">📭</text>
      <text class="empty-text">当日暂无排课</text>
-      <text class="empty-sub">无模板匹配，请手动添加时段或先配置排课模板</text>
+      <text class="empty-sub">当日暂无默认时段，请点击下方按钮手动添加</text>
    </view>
    <!-- Slot list -->
@@ -40,9 +40,10 @@
        <view class="slot-body">
          <view class="time-section">
            <picker
-              mode="time"
+              mode="multiSelector"
-              :value="slot.startTime"
+              :range="timePickerRange"
-              @change="(e: any) => updateSlotTime(slot, 'startTime', e.detail.value)"
+              :value="timeToPickerIndex(slot.startTime)"
              @change="(e: any) => updateSlotTime(slot, 'startTime', pickerIndexToTime(e.detail.value))"
            >
              <view class="time-display">
                <text class="time-text">{{ slot.startTime }}</text>
@@ -50,9 +51,10 @@
            </picker>
            <text class="time-separator">–</text>
            <picker
-              mode="time"
+              mode="multiSelector"
-              :value="slot.endTime"
+              :range="timePickerRange"
-              @change="(e: any) => updateSlotTime(slot, 'endTime', e.detail.value)"
+              :value="timeToPickerIndex(slot.endTime)"
              @change="(e: any) => updateSlotTime(slot, 'endTime', pickerIndexToTime(e.detail.value))"
            >
              <view class="time-display">
                <text class="time-text">{{ slot.endTime }}</text>
@@ -112,8 +114,9 @@
        <view class="modal-field">
          <text class="modal-label">开始时间</text>
          <picker
-            mode="time"
+            mode="multiSelector"
-            :value="addForm.startTime"
+            :range="timePickerRange"
            :value="timeToPickerIndex(addForm.startTime)"
            @change="onAddStartTimeChange"
          >
            <view class="picker-display">
@@ -162,6 +165,14 @@ import { getSystemLayout } from '../../utils/system'
 import { useAdminStore } from '../../stores/admin'
 import { formatDate } from '../../utils/format'
 import DateSelector from '../../components/DateSelector.vue'
 import {
  SCHEDULE_TIME_PICKER_RANGE,
  timeToPickerIndex,
  pickerIndexToTime,
  addOneHourCapped,
 } from '../../utils/schedule-time'
 const timePickerRange = SCHEDULE_TIME_PICKER_RANGE
 interface EditableSlot {
  readonly key: string
@@ -186,8 +197,8 @@ const showAddModal = ref(false)
 const editableSlots = ref<EditableSlot[]>([])
 const addForm = ref({
-  startTime: '09:00',
+  startTime: '09:30',
-  endTime: '10:00',
+  endTime: '10:30',
  capacityStr: '1',
 })
@@ -270,23 +281,14 @@ function removeSlot(slot: EditableSlot) {
 // ── Add slot ──────────────────────────────────────────────
 /** 将 "HH:mm" 加一小时，最大 23:59 */
 function addOneHour(time: string): string {
  const [h, m] = time.split(':').map(Number)
  const newH = Math.min(h + 1, 23)
  // 如果原本就是 23:xx，结束时间设为 23:59
  if (h >= 23) return '23:59'
  return String(newH).padStart(2, '0') + ':' + String(m).padStart(2, '0')
 }
 function onAddStartTimeChange(e: any) {
-  const start = e.detail.value as string
+  const start = pickerIndexToTime(e.detail.value as number[])
  addForm.value.startTime = start
-  addForm.value.endTime = addOneHour(start)
+  addForm.value.endTime = addOneHourCapped(start)
 }
 function openAddModal() {
-  addForm.value = { startTime: '09:00', endTime: '10:00', capacityStr: '1' }
+  addForm.value = { startTime: '09:30', endTime: '10:30', capacityStr: '1' }
  showAddModal.value = true
 }
@@ -305,6 +307,10 @@ function submitAdd() {
    uni.showToast({ title: '请选择时间', icon: 'none' })
    return
  }
  if (addForm.value.startTime >= addForm.value.endTime) {
    uni.showToast({ title: '结束时间须晚于开始时间', icon: 'none' })
    return
  }
  if (isNaN(capacity) || capacity < 1) {
    uni.showToast({ title: '请填写有效容量', icon: 'none' })
    return
@@ -404,7 +410,7 @@ function slotBadgeClass(slot: EditableSlot): string {
 function slotBadgeText(slot: EditableSlot): string {
  if (slot.isNew) return '新增'
  if (slot.isPublished) return '已发布'
-  return '来自模板'
+  return '默认时段'
 }
 // ── Lifecycle ─────────────────────────────────────────────
--- a/packages/app/src/pages/admin/slot-adjust.vue
+++ b/packages/app/src/pages/admin/slot-adjust.vue
@@ -28,7 +28,12 @@
        </view>
        <view class="form-row">
          <text class="form-label">开始时间</text>
-          <picker mode="time" :value="addForm.startTime" @change="(e: any) => addForm.startTime = e.detail.value">
+          <picker
            mode="multiSelector"
            :range="timePickerRange"
            :value="timeToPickerIndex(addForm.startTime)"
            @change="(e: any) => addForm.startTime = pickerIndexToTime(e.detail.value)"
          >
            <view class="picker-display">
              <text class="picker-text">{{ addForm.startTime || '请选择' }}</text>
              <text class="picker-arrow">›</text>
@@ -37,7 +42,12 @@
        </view>
        <view class="form-row">
          <text class="form-label">结束时间</text>
-          <picker mode="time" :value="addForm.endTime" @change="(e: any) => addForm.endTime = e.detail.value">
+          <picker
            mode="multiSelector"
            :range="timePickerRange"
            :value="timeToPickerIndex(addForm.endTime)"
            @change="(e: any) => addForm.endTime = pickerIndexToTime(e.detail.value)"
          >
            <view class="picker-display">
              <text class="picker-text">{{ addForm.endTime || '请选择' }}</text>
              <text class="picker-arrow">›</text>
@@ -128,7 +138,7 @@
          </picker>
        </view>
      </view>
-      <text class="gen-hint">将根据排课模板，自动生成所选日期范围内的时段</text>
+      <text class="gen-hint">将按默认时间表（8:00-9:00，之后从 9:30 起每小时一节至 21:30）自动生成所选日期范围内的时段</text>
      <view class="action-wrap">
        <view class="action-btn" :class="{ 'action-btn--loading': submitting }" @tap="submitGenerate">
          <text class="action-btn-text">{{ submitting ? '生成中...' : '批量生成' }}</text>
@@ -145,6 +155,13 @@ import { getSystemLayout } from '../../utils/system'
 import { useAdminStore } from '../../stores/admin'
 import { formatDate } from '../../utils/format'
 import type { TimeSlot } from '@mp-pilates/shared'
 import {
  SCHEDULE_TIME_PICKER_RANGE,
  timeToPickerIndex,
  pickerIndexToTime,
 } from '../../utils/schedule-time'
 const timePickerRange = SCHEDULE_TIME_PICKER_RANGE
 const adminStore = useAdminStore()
@@ -157,8 +174,8 @@ const slotsLoading = ref(false)
 // ── Add slot form ────────────────────────────────────────────────
 const addForm = ref({
  date: formatDate(new Date()),
-  startTime: '09:00',
+  startTime: '09:30',
-  endTime: '10:00',
+  endTime: '10:30',
  capacityStr: '10',
 })
@@ -168,6 +185,10 @@ async function submitAddSlot() {
    uni.showToast({ title: '请填写完整信息', icon: 'none' })
    return
  }
  if (addForm.value.startTime >= addForm.value.endTime) {
    uni.showToast({ title: '结束时间须晚于开始时间', icon: 'none' })
    return
  }
  const capacity = parseInt(addForm.value.capacityStr, 10)
  submitting.value = true
  try {
--- a/packages/app/src/pages/admin/studio.vue
+++ b/packages/app/src/pages/admin/studio.vue
--- a/packages/app/src/pages/admin/week-template.vue
+++ b/packages/app/src/pages/admin/week-template.vue
@@ -1,528 +0,0 @@
 <template>
  <view class="page" :style="{ paddingTop: navBarHeight }">
    <CustomNavBar title="排课模板" show-back />
    <!-- Toolbar -->
    <view class="toolbar">
      <text class="toolbar-hint">共 {{ templates.length }} 条模板</text>
      <view class="add-btn" @tap="openAdd">
        <text class="add-btn-text">＋ 新增时段</text>
      </view>
    </view>
    <!-- Loading skeleton -->
    <view v-if="loading" class="skeleton-list">
      <view v-for="i in 5" :key="i" class="skeleton-item" />
    </view>
    <!-- Empty -->
    <view v-else-if="!templates.length" class="empty-state">
      <text class="empty-icon">📅</text>
      <text class="empty-text">暂无模板，点击右上角新增</text>
    </view>
    <!-- Template list grouped by weekday -->
    <view v-else>
      <view v-for="(group, day) in grouped" :key="day" class="day-group">
        <view class="day-header">
          <text class="day-label">{{ WEEKDAY_LABELS[Number(day)] }}</text>
          <text class="day-count">{{ group.length }} 个时段</text>
        </view>
        <view
          v-for="tpl in group"
          :key="tpl.id ?? tpl._key"
          class="tpl-row"
          :class="{ 'tpl-row--inactive': !tpl.isActive }"
        >
          <view class="tpl-time">
            <text class="tpl-time-text">{{ tpl.startTime }} – {{ tpl.endTime }}</text>
            <text class="tpl-capacity">{{ tpl.capacity }} 人</text>
          </view>
          <view class="tpl-actions">
            <view
              class="tpl-toggle"
              :class="tpl.isActive ? 'toggle--on' : 'toggle--off'"
              @tap="toggleTemplate(tpl)"
            >
              <text class="tpl-toggle-text">{{ tpl.isActive ? '启用' : '停用' }}</text>
            </view>
            <view class="tpl-edit" @tap="openEdit(tpl)">
              <text class="tpl-edit-text">编辑</text>
            </view>
            <view class="tpl-delete" @tap="deleteTemplate(tpl)">
              <text class="tpl-delete-text">删除</text>
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- Save bar -->
    <view v-if="isDirty" class="save-bar">
      <view class="save-btn" :class="{ 'save-btn--loading': saving }" @tap="handleSave">
        <text class="save-btn-text">{{ saving ? '保存中...' : '保存全部更改' }}</text>
      </view>
    </view>
    <!-- Add / Edit modal -->
    <view v-if="showModal" class="modal-mask" @tap.self="closeModal">
      <view class="modal">
        <text class="modal-title">{{ editTarget ? '编辑时段' : '新增时段' }}</text>
        <view class="modal-field">
          <text class="modal-label">星期</text>
          <picker
            mode="selector"
            :range="dayOptions"
            range-key="label"
            :value="form.dayIdx"
            @change="(e: any) => form.dayIdx = Number(e.detail.value)"
          >
            <view class="picker-display">
              <text class="picker-text">{{ dayOptions[form.dayIdx].label }}</text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
        </view>
        <view class="modal-field">
          <text class="modal-label">开始时间</text>
          <picker
            mode="time"
            :value="form.startTime"
            @change="(e: any) => form.startTime = e.detail.value"
          >
            <view class="picker-display">
              <text class="picker-text">{{ form.startTime || '请选择' }}</text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
        </view>
        <view class="modal-field">
          <text class="modal-label">结束时间</text>
          <picker
            mode="time"
            :value="form.endTime"
            @change="(e: any) => form.endTime = e.detail.value"
          >
            <view class="picker-display">
              <text class="picker-text">{{ form.endTime || '请选择' }}</text>
              <text class="picker-arrow">›</text>
            </view>
          </picker>
        </view>
        <view class="modal-field modal-field--last">
          <text class="modal-label">容量</text>
          <input
            class="modal-input"
            type="number"
            v-model="form.capacityStr"
            placeholder="如：10"
            placeholder-style="color:#bbb"
          />
        </view>
        <view class="modal-actions">
          <view class="modal-cancel" @tap="closeModal">
            <text class="modal-cancel-text">取消</text>
          </view>
          <view class="modal-confirm" @tap="submitForm">
            <text class="modal-confirm-text">确认</text>
          </view>
        </view>
      </view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import { getSystemLayout } from '../../utils/system'
 import { useAdminStore } from '../../stores/admin'
 import { WEEKDAY_LABELS } from '@mp-pilates/shared'
 import type { WeekTemplate } from '@mp-pilates/shared'
 type LocalTemplate = Partial<WeekTemplate> & {
  _key?: string
  dayOfWeek: number
  startTime: string
  endTime: string
  capacity: number
  isActive: boolean
 }
 const adminStore = useAdminStore()
 const navBarHeight = ref('64px')
 const loading = ref(false)
 const saving = ref(false)
 const isDirty = ref(false)
 const showModal = ref(false)
 const editTarget = ref<LocalTemplate | null>(null)
 const templates = ref<LocalTemplate[]>([])
 const dayOptions = [1, 2, 3, 4, 5, 6, 7].map((d) => ({ label: WEEKDAY_LABELS[d], value: d }))
 const form = ref({
  dayIdx: 0,
  startTime: '08:00',
  endTime: '09:00',
  capacityStr: '1',
 })
 const grouped = computed(() => {
  const map: Record<number, LocalTemplate[]> = {}
  for (const tpl of templates.value) {
    if (!map[tpl.dayOfWeek]) map[tpl.dayOfWeek] = []
    map[tpl.dayOfWeek].push(tpl)
  }
  // Sort by day
  return Object.fromEntries(
    Object.entries(map).sort(([a], [b]) => Number(a) - Number(b)),
  )
 })
 /** 生成默认模板：周一到周日，8:00-22:00 每小时一个时段 */
 function generateDefaultTemplates(): LocalTemplate[] {
  const defaults: LocalTemplate[] = []
  for (let day = 1; day <= 7; day++) {
    for (let hour = 8; hour < 22; hour++) {
      const start = String(hour).padStart(2, '0') + ':00'
      const end = String(hour + 1).padStart(2, '0') + ':00'
      defaults.push({
        _key: `default-${day}-${start}`,
        dayOfWeek: day,
        startTime: start,
        endTime: end,
        capacity: 1,
        isActive: true,
      })
    }
  }
  return defaults
 }
 async function fetchTemplates() {
  loading.value = true
  try {
    const data = await adminStore.fetchWeekTemplates()
    if (data.length === 0) {
      // No templates yet — pre-fill with defaults
      templates.value = generateDefaultTemplates()
      isDirty.value = true
    } else {
      templates.value = data
      isDirty.value = false
    }
  } catch {
    uni.showToast({ title: '加载失败', icon: 'none' })
  } finally {
    loading.value = false
  }
 }
 function openAdd() {
  editTarget.value = null
  form.value = { dayIdx: 0, startTime: '08:00', endTime: '09:00', capacityStr: '1' }
  showModal.value = true
 }
 function openEdit(tpl: LocalTemplate) {
  editTarget.value = tpl
  const dayIdx = dayOptions.findIndex((d) => d.value === tpl.dayOfWeek)
  form.value = {
    dayIdx: dayIdx >= 0 ? dayIdx : 0,
    startTime: tpl.startTime,
    endTime: tpl.endTime,
    capacityStr: String(tpl.capacity),
  }
  showModal.value = true
 }
 function closeModal() {
  showModal.value = false
  editTarget.value = null
 }
 function submitForm() {
  const capacity = parseInt(form.value.capacityStr, 10)
  if (!form.value.startTime || !form.value.endTime) {
    uni.showToast({ title: '请填写时间', icon: 'none' })
    return
  }
  if (isNaN(capacity) || capacity < 1) {
    uni.showToast({ title: '请填写有效容量', icon: 'none' })
    return
  }
  const day = dayOptions[form.value.dayIdx].value
  if (editTarget.value) {
    const tpl = editTarget.value
    tpl.dayOfWeek = day
    tpl.startTime = form.value.startTime
    tpl.endTime = form.value.endTime
    tpl.capacity = capacity
  } else {
    templates.value.push({
      _key: String(Date.now()),
      dayOfWeek: day,
      startTime: form.value.startTime,
      endTime: form.value.endTime,
      capacity,
      isActive: true,
    })
  }
  isDirty.value = true
  closeModal()
 }
 function toggleTemplate(tpl: LocalTemplate) {
  tpl.isActive = !tpl.isActive
  isDirty.value = true
 }
 function deleteTemplate(tpl: LocalTemplate) {
  uni.showModal({
    title: '确认删除',
    content: '删除该时段模板？',
    success: (res) => {
      if (res.confirm) {
        const idx = templates.value.indexOf(tpl)
        if (idx >= 0) templates.value.splice(idx, 1)
        isDirty.value = true
      }
    },
  })
 }
 async function handleSave() {
  if (saving.value) return
  saving.value = true
  try {
    const payload = templates.value.map((t) => ({
      id: t.id,
      dayOfWeek: t.dayOfWeek,
      startTime: t.startTime,
      endTime: t.endTime,
      capacity: t.capacity,
      isActive: t.isActive,
    }))
    await adminStore.saveWeekTemplates(payload as any)
    isDirty.value = false
    uni.showToast({ title: '保存成功', icon: 'success' })
    await fetchTemplates()
  } catch (e: any) {
    uni.showToast({ title: e?.message ?? '保存失败', icon: 'none' })
  } finally {
    saving.value = false
  }
 }
 onMounted(() => {
  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
  fetchTemplates()
 })
 </script>
 <style lang="scss" scoped>
 .page {
  min-height: 100vh;
  background: #f5f3f0;
  padding-bottom: 120rpx;
 }
 /* ── Toolbar ─────────────────────────────── */
 .toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 24rpx 16rpx;
 }
 .toolbar-hint { font-size: 24rpx; color: #999; }
 .add-btn {
  background: #1a1a2e;
  border-radius: 32rpx;
  padding: 12rpx 28rpx;
 }
 .add-btn-text { font-size: 26rpx; font-weight: 600; color: $primary-dark; }
 /* ── Skeleton ────────────────────────────── */
 .skeleton-list { padding: 0 24rpx; }
 .skeleton-item {
  height: 80rpx;
  border-radius: 12rpx;
  margin-bottom: 16rpx;
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
 }
 /* ── Empty ───────────────────────────────── */
 .empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 100rpx 0;
  gap: 20rpx;
 }
 .empty-icon { font-size: 80rpx; }
 .empty-text { font-size: 28rpx; color: #bbb; }
 /* ── Day group ───────────────────────────── */
 .day-group { margin: 0 24rpx 24rpx; }
 .day-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16rpx 8rpx;
 }
 .day-label { font-size: 28rpx; font-weight: 700; color: #1a1a2e; }
 .day-count { font-size: 22rpx; color: #999; }
 /* ── Template row ────────────────────────── */
 .tpl-row {
  background: #ffffff;
  border-radius: 12rpx;
  padding: 20rpx 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.06);
  &--inactive { opacity: 0.5; }
 }
 .tpl-time { display: flex; flex-direction: column; gap: 6rpx; }
 .tpl-time-text { font-size: 28rpx; font-weight: 600; color: #1a1a2e; }
 .tpl-capacity { font-size: 22rpx; color: #888; }
 .tpl-actions { display: flex; gap: 12rpx; }
 .tpl-toggle,
 .tpl-edit,
 .tpl-delete {
  border-radius: 20rpx;
  padding: 8rpx 20rpx;
 }
 .toggle--on { background: rgba(39,174,96,0.12); }
 .toggle--on .tpl-toggle-text { font-size: 24rpx; color: #27ae60; }
 .toggle--off { background: rgba(230,126,34,0.12); }
 .toggle--off .tpl-toggle-text { font-size: 24rpx; color: #e67e22; }
 .tpl-edit { background: rgba(26,26,46,0.08); }
 .tpl-edit-text { font-size: 24rpx; color: #1a1a2e; }
 .tpl-delete { background: rgba(192,57,43,0.08); }
 .tpl-delete-text { font-size: 24rpx; color: #c0392b; }
 /* ── Save bar ────────────────────────────── */
 .save-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 24rpx 48rpx;
  background: #ffffff;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.08);
 }
 .save-btn {
  width: 100%;
  height: 96rpx;
  border-radius: 48rpx;
  background: linear-gradient(90deg, #1a1a2e, #2d2d5e);
  display: flex;
  align-items: center;
  justify-content: center;
  &--loading { opacity: 0.6; }
 }
 .save-btn-text { font-size: 30rpx; font-weight: 700; color: $primary-dark; }
 /* ── Modal ───────────────────────────────── */
 .modal-mask {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: flex-end;
  z-index: 100;
 }
 .modal {
  width: 100%;
  background: #ffffff;
  border-radius: 24rpx 24rpx 0 0;
  padding: 40rpx 32rpx 60rpx;
 }
 .modal-title {
  font-size: 32rpx;
  font-weight: 700;
  color: #1a1a2e;
  display: block;
  margin-bottom: 24rpx;
 }
 .modal-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24rpx 0;
  border-bottom: 1rpx solid #f5f5f5;
  &--last { border-bottom: none; }
 }
 .modal-label { font-size: 26rpx; color: #555; width: 140rpx; flex-shrink: 0; }
 .modal-input { flex: 1; text-align: right; font-size: 26rpx; color: #222; }
 .picker-display { display: flex; align-items: center; gap: 8rpx; }
 .picker-text { font-size: 26rpx; color: #222; }
 .picker-arrow { font-size: 26rpx; color: #bbb; }
 .modal-actions {
  display: flex;
  gap: 16rpx;
  margin-top: 32rpx;
 }
 .modal-cancel {
  flex: 1;
  height: 88rpx;
  background: #f0f0f0;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .modal-cancel-text { font-size: 28rpx; color: #555; }
 .modal-confirm {
  flex: 2;
  height: 88rpx;
  background: linear-gradient(90deg, #1a1a2e, #2d2d5e);
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .modal-confirm-text { font-size: 28rpx; font-weight: 700; color: $primary-dark; }
 </style>
--- a/packages/app/src/pages/booking/detail.vue
+++ b/packages/app/src/pages/booking/detail.vue
--- a/packages/app/src/pages/booking/index.vue
+++ b/packages/app/src/pages/booking/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <view class="booking-page">
+  <view class="booking-page" :style="{ height: pageHeight }">
    <!-- ──────────── Status bar spacing ──────────── -->
    <view class="status-bar" :style="{ height: statusBarHeight }" />
@@ -10,15 +10,18 @@
    <!-- ──────────── Date & period filters ──────────── -->
    <view class="filter-header">
-      <DateSelector v-model="selectedDate" @select="onDateSelect" />
+      <view class="calendar-heading">
-      <TimePeriodFilter v-model="selectedPeriod" @change="onPeriodChange" />
+        <text class="calendar-month">{{ selectedMonthLabel }}</text>
        <text class="calendar-hint">选择上课日期</text>
      </view>
      <DateSelector v-model="selectedDate" variant="soft" @select="onDateSelect" />
      <TimePeriodFilter v-model="selectedPeriod" variant="soft" @change="onPeriodChange" />
    </view>
    <!-- ──────────── Slot list ──────────── -->
    <scroll-view
      class="slot-scroll"
      scroll-y
      :style="{ height: scrollHeight }"
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
@@ -37,12 +40,7 @@
      <!-- Empty state -->
      <view v-else-if="filteredSlots.length === 0" class="empty-wrap">
-        <view class="empty-illustration">
+        <text class="empty-text">这个时段还没有课程</text>
          <view class="empty-circle outer" />
          <view class="empty-circle inner" />
          <view class="empty-dot" />
        </view>
        <text class="empty-text">当日暂无可约时段</text>
        <text class="empty-sub">请选择其他日期或时段查看</text>
      </view>
@@ -50,9 +48,8 @@
      <view v-else class="slot-list">
        <!-- Date summary -->
        <view class="date-summary">
-          <text class="date-summary-text">
+          <text class="date-summary-title">{{ selectedDayLabel }}</text>
-            共 {{ filteredSlots.length }} 个可选时段
+          <text class="date-summary-text">{{ filteredSlots.length }} 个时段</text>
          </text>
        </view>
        <SlotCard
@@ -82,11 +79,12 @@
 <script setup lang="ts">
 import { ref, computed, onMounted } from 'vue'
-import { onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+import { onResize, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 import type { TimeSlotWithBookingStatus, MembershipWithCardType } from '@mp-pilates/shared'
-import { TIME_PERIODS } from '@mp-pilates/shared'
+import { BookingStatus, TIME_PERIODS } from '@mp-pilates/shared'
 import { useBookingStore } from '../../stores/booking'
 import { useUserStore } from '../../stores/user'
 import { getErrorMessage } from '../../utils/auth'
 import { formatDate } from '../../utils/format'
 import { getSystemLayout } from '../../utils/system'
 import DateSelector from '../../components/DateSelector.vue'
@@ -125,28 +123,26 @@ onShareTimeline(() => {
 // ─── Layout ───────────────────────────────────────────────
 const statusBarHeight = ref('20px')
-const scrollHeight = ref('500px')
+const pageHeight = ref('100vh')
 // Heights of static elements above scroll-view (in rpx, converted to px)
 const PAGE_HEADER_RPX = 88   // title bar height
 const FILTER_HEADER_RPX = 240 // DateSelector + TimePeriodFilter
 const TABBAR_RPX = 100
 function updateLayout() {
-  const { statusBarHeight: statusBarPx, windowWidth } = getSystemLayout()
+  statusBarHeight.value = `${getSystemLayout().statusBarHeight}px`
-  const ratio = windowWidth / 750
+  // The mini-program window already excludes its native tab bar. Flex layout
-  statusBarHeight.value = `${statusBarPx}px`
+  // gives the remaining height to the list as the filters change size.
-
+  pageHeight.value = `${uni.getWindowInfo().windowHeight}px`
  const headerPx = Math.round(PAGE_HEADER_RPX * ratio)
  const filterPx = Math.round(FILTER_HEADER_RPX * ratio)
  const tabbarPx = Math.round(TABBAR_RPX * ratio)
  // scroll-view fills remaining space: window - statusBar - pageHeader - filters - tabbar
  const { windowHeight } = uni.getWindowInfo()
  const remaining = windowHeight - statusBarPx - headerPx - filterPx - tabbarPx
  scrollHeight.value = `${remaining}px`
 }
 updateLayout()
 onResize(updateLayout)
 const selectedMonthLabel = computed(() => {
  const [year, month] = selectedDate.value.split('-')
  return `${year} 年 ${Number(month)} 月`
 })
 const selectedDayLabel = computed(() => {
  const [, month, day] = selectedDate.value.split('-')
  return `${Number(month)} 月 ${Number(day)} 日的课程`
 })
 // ─── Filtered slots ───────────────────────────────────────
 const filteredSlots = computed<TimeSlotWithBookingStatus[]>(() => {
@@ -195,6 +191,19 @@ function onSlotCardTap(slot: TimeSlotWithBookingStatus) {
 // ─── Book flow ────────────────────────────────────────────
 async function onBookTap(slot: TimeSlotWithBookingStatus) {
  if (slot.isBookedByMe) {
    if (slot.myBookingId) {
      uni.navigateTo({ url: `/pages/booking/detail?id=${slot.myBookingId}` })
      return
    }
    const title = slot.myBookingStatus === BookingStatus.PENDING_CONFIRMATION
      ? '该时段已预约，等待老师确认'
      : '该时段已预约'
    uni.showToast({ title, icon: 'none' })
    return
  }
  // 1. Ensure logged in
  if (!userStore.loggedIn) {
    uni.showModal({
@@ -208,8 +217,8 @@ async function onBookTap(slot: TimeSlotWithBookingStatus) {
            if (!isNewUser) {
              onBookTap(slot)
            }
-          } catch {
+          } catch (err: unknown) {
-            uni.showToast({ title: '登录失败', icon: 'none' })
+            uni.showToast({ title: getErrorMessage(err, '登录失败'), icon: 'none' })
          }
        }
      },
@@ -296,213 +305,33 @@ onMounted(async () => {
 </script>
 <style lang="scss" scoped>
-.booking-page {
+.booking-page { height: 100vh; background: #fbf9f6; display: flex; flex-direction: column; overflow: hidden; }
-  height: 100vh;
+.status-bar { flex-shrink: 0; }
-  background: $primary-bg;
+.page-header { flex-shrink: 0; height: 88rpx; display: flex; align-items: center; justify-content: center; }
-  display: flex;
+.page-title { font-size: 34rpx; font-weight: 500; color: #514943; }
-  flex-direction: column;
+.filter-header { flex-shrink: 0; border-bottom: 1rpx solid #eee8e3; }
-  overflow: hidden;
+.calendar-heading { display: flex; align-items: baseline; justify-content: space-between; padding: 24rpx 32rpx 16rpx; gap: 16rpx; }
-}
+.calendar-month { font-size: 28rpx; font-weight: 500; color: #514943; }
-
+.calendar-hint { font-size: 22rpx; color: #8b817b; }
-/* ── Status bar ───────────────────────────────────── */
+.slot-scroll { flex: 1; height: 0; min-height: 0; width: 100%; box-sizing: border-box; }
-.status-bar {
+.slot-list { display: flex; flex-direction: column; padding-top: 28rpx; }
-  flex-shrink: 0;
+.date-summary { display: flex; justify-content: space-between; align-items: baseline; gap: 16rpx; padding: 0 32rpx 20rpx; }
-  background: #fff;
+.date-summary-title { font-size: 25rpx; color: #6f655e; }
-}
+.date-summary-text { font-size: 22rpx; color: #8b817b; }
-
+.loading-wrap { display: flex; flex-direction: column; gap: 20rpx; padding: 28rpx 32rpx; }
-/* ── Page header ──────────────────────────────────── */
+.skeleton-card { height: 200rpx; box-sizing: border-box; border-radius: 28rpx; background: #fff; display: flex; align-items: center; padding: 28rpx; gap: 20rpx; }
-.page-header {
+.skeleton-time, .skeleton-title, .skeleton-sub, .skeleton-btn {
-  flex-shrink: 0;
+  border-radius: 10rpx;
-  height: 88rpx;
+  background: linear-gradient(90deg, #f0eae5 25%, #faf7f3 50%, #f0eae5 75%);
-  display: flex;
+  background-size: 400% 100%; animation: shimmer 1.4s infinite;
  align-items: center;
  justify-content: center;
  background: #fff;
 }
 .page-title {
  font-size: 34rpx;
  font-weight: 600;
  color: #1a1a2e;
 }
 /* ── Filter header ────────────────────────────────── */
 .filter-header {
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.04);
 }
 /* ── Scroll container ──────────────────────────────── */
 .slot-scroll {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
 }
 /* ── Slot list ─────────────────────────────────────── */
 .slot-list {
  display: flex;
  flex-direction: column;
  padding: 24rpx 0 0;
 }
 /* ── Date summary ──────────────────────────────────── */
 .date-summary {
  padding: 0 24rpx 16rpx;
 }
 .date-summary-text {
  font-size: 24rpx;
  color: #999;
  font-weight: 400;
 }
 /* ── Loading skeleton ──────────────────────────────── */
 .loading-wrap {
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  padding: 28rpx 24rpx;
 }
 .skeleton-card {
  height: 220rpx;
  border-radius: 20rpx;
  background: #fff;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 28rpx 48rpx;
  gap: 20rpx;
  margin: 0 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
 }
 .skeleton-time {
  width: 90rpx;
  height: 80rpx;
  border-radius: 12rpx;
  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;
 }
 .skeleton-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12rpx;
 }
 .skeleton-title {
  width: 60%;
  height: 28rpx;
  border-radius: 8rpx;
  background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
 }
 .skeleton-sub {
  width: 40%;
  height: 20rpx;
  border-radius: 6rpx;
  background: linear-gradient(90deg, $primary-border 25%, $primary-light 50%, $primary-border 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
 }
 .skeleton-btn {
  width: 100rpx;
  height: 60rpx;
  border-radius: 20rpx;
  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;
 }
 /* ── Empty state ───────────────────────────────────── */
 .empty-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx 80rpx;
  gap: 0;
 }
 /* Zen-inspired geometric illustration */
 .empty-illustration {
  position: relative;
  width: 200rpx;
  height: 200rpx;
  margin-bottom: 56rpx;
 }
 .empty-circle {
  position: absolute;
  border-radius: 50%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  &.outer {
    width: 180rpx;
    height: 180rpx;
    border: 2rpx solid $primary-border;
    animation: breathe 3s ease-in-out infinite;
  }
  &.inner {
    width: 120rpx;
    height: 120rpx;
    background: linear-gradient(135deg, $primary-light 0%, $primary-color 50%, $primary-dark 100%);
    opacity: 0.6;
    animation: breathe 3s ease-in-out infinite 0.5s;
  }
 }
 .empty-dot {
  position: absolute;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  background: $primary-dark;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: pulse 2s ease-in-out infinite;
 }
 .empty-text {
  font-size: 32rpx;
  color: $primary-dark;
  font-weight: 600;
  letter-spacing: 2rpx;
  margin-bottom: 16rpx;
 }
 .empty-sub {
  font-size: 26rpx;
  color: $primary-color;
  letter-spacing: 1rpx;
 }
@keyframes breathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; }
  50% { transform: translate(-50%, -50%) scale(1.05); opacity: 0.4; }
 }
@keyframes pulse {
  0%, 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  50% { opacity: 0.5; transform: translate(-50%, -50%) scale(0.8); }
 }
 /* ── Bottom spacer ─────────────────────────────────── */
 .scroll-bottom-spacer {
  height: 48rpx;
 }
 .skeleton-time { width: 90rpx; height: 70rpx; flex-shrink: 0; }
 .skeleton-body { flex: 1; display: flex; flex-direction: column; gap: 12rpx; }
 .skeleton-title { width: 80%; height: 28rpx; }
 .skeleton-sub { width: 60%; height: 20rpx; }
 .skeleton-btn { width: 110rpx; height: 60rpx; border-radius: 999rpx; flex-shrink: 0; }
 .empty-wrap { margin: 32rpx; padding: 64rpx 28rpx; border-radius: 28rpx; background: #f3efea; display: flex; flex-direction: column; align-items: center; gap: 14rpx; }
 .empty-text { font-size: 28rpx; color: #6f655e; font-weight: 400; }
 .empty-sub { font-size: 23rpx; color: #8b817b; text-align: center; line-height: 1.6; }
 .scroll-bottom-spacer { height: 28rpx; }
 </style>
--- a/packages/app/src/pages/card/detail.vue
+++ b/packages/app/src/pages/card/detail.vue
--- a/packages/app/src/pages/flash-sale/detail.vue
+++ b/packages/app/src/pages/flash-sale/detail.vue
@@ -0,0 +1,848 @@
 <template>
  <view class="page" :style="{ paddingTop: navBarHeight }">
    <CustomNavBar title="限时秒杀" show-back />
    <!-- Loading -->
    <view v-if="loading" class="loading-wrap">
      <view class="skeleton-hero" />
      <view class="skeleton-body">
        <view class="skeleton-line w80" />
        <view class="skeleton-line w60" />
        <view class="skeleton-line w40" />
      </view>
    </view>
    <!-- Error -->
    <view v-else-if="!detail" class="error-wrap">
      <text class="error-icon">◈</text>
      <text class="error-text">活动信息加载失败</text>
      <view class="retry-btn" @tap="loadDetail">
        <text class="retry-text">点击重试</text>
      </view>
    </view>
    <template v-else>
      <!-- ═══ Hero Section ═══ -->
      <view class="hero" :class="heroPhaseClass">
        <!-- Decorative elements -->
        <view class="hero-deco hero-deco--1" />
        <view class="hero-deco hero-deco--2" />
        <view class="hero-deco hero-deco--3" />
        <!-- Phase badge -->
        <view class="hero-phase-badge" :class="phaseBadgeClass">
          <text class="hero-phase-text">{{ phaseLabel }}</text>
        </view>
        <!-- Title -->
        <text class="hero-title">{{ detail.title }}</text>
        <!-- Price row -->
        <view class="hero-price-row">
          <text class="hero-currency">¥</text>
          <text v-if="invite.eligible" class="hero-discount-text">好友 95 折</text>
          <text class="hero-price">{{ formatPrice(invite.price(detail.flashPrice)) }}</text>
          <view class="hero-original-wrap">
            <text class="hero-original-label">原价</text>
            <text class="hero-original">¥{{ formatPrice(detail.originalPrice) }}</text>
          </view>
        </view>
        <!-- Discount badge -->
        <view class="hero-discount-badge">
          <text class="hero-discount-text">立省 ¥{{ formatPrice(detail.originalPrice - invite.price(detail.flashPrice)) }}</text>
        </view>
        <!-- Countdown -->
        <view
          v-if="detail.phase === FlashSalePhase.UPCOMING || detail.phase === FlashSalePhase.ONGOING"
          class="hero-countdown"
        >
          <text class="cd-label">
            {{ detail.phase === FlashSalePhase.UPCOMING ? '距开始' : '距结束' }}
          </text>
          <view class="cd-blocks">
            <text class="cd-block">{{ countdown.h }}</text>
            <text class="cd-colon">:</text>
            <text class="cd-block">{{ countdown.m }}</text>
            <text class="cd-colon">:</text>
            <text class="cd-block">{{ countdown.s }}</text>
          </view>
        </view>
      </view>
      <!-- ═══ Stock Bar ═══ -->
      <view class="stock-section">
        <view class="stock-info">
          <text class="stock-label">抢购进度</text>
          <text class="stock-count">
            {{ detail.phase === FlashSalePhase.SOLD_OUT ? '已售罄' : `已抢 ${detail.soldCount}/${detail.totalStock}` }}
          </text>
        </view>
        <view class="stock-bar">
          <view
            class="stock-fill"
            :class="{ 'stock-fill--hot': stockRatio > 0.6 }"
            :style="{ width: stockPercent }"
          />
        </view>
      </view>
      <!-- ═══ Phone Auth Prompt ═══ -->
      <view
        v-if="userStore.loggedIn && !userStore.user?.phone"
        class="phone-prompt-card"
      >
        <view class="phone-prompt-content">
          <view class="phone-prompt-icon">📱</view>
          <view class="phone-prompt-text">
            <text class="phone-prompt-title">提前授权手机号</text>
            <text class="phone-prompt-desc">授权后抢购更快，也方便馆主联系您</text>
          </view>
        </view>
        <button
          class="phone-auth-btn"
          open-type="getPhoneNumber"
          @getphonenumber="handleGetPhone"
        >
          <text class="phone-auth-text">立即授权</text>
        </button>
      </view>
      <!-- ═══ Card Info ═══ -->
      <view class="detail-section">
        <view class="info-card">
          <view class="section-header-row">
            <view class="section-dot" />
            <text class="section-label">会员卡信息</text>
          </view>
          <view class="info-grid">
            <view class="info-cell">
              <text class="cell-value">{{ detail.cardType.name }}</text>
              <text class="cell-label">卡种</text>
            </view>
            <view v-if="detail.cardType.totalTimes" class="info-cell">
              <text class="cell-value">{{ detail.cardType.totalTimes }}</text>
              <text class="cell-label">课时次数</text>
            </view>
            <view class="info-cell">
              <text class="cell-value">{{ detail.cardType.durationDays }}</text>
              <text class="cell-label">有效天数</text>
            </view>
          </view>
        </view>
        <!-- Description -->
        <view v-if="detail.description" class="desc-card">
          <view class="section-header-row">
            <view class="section-dot" />
            <text class="section-label">活动说明</text>
          </view>
          <text class="desc-content">{{ detail.description }}</text>
        </view>
        <!-- Purchase Notes -->
        <view class="notes-card">
          <view class="section-header-row">
            <view class="section-dot" />
            <text class="section-label">参与须知</text>
          </view>
          <view class="note-item">
            <text class="note-dot">•</text>
            <text class="note-text">每位用户同一秒杀活动仅限参与一次</text>
          </view>
          <view class="note-item">
            <text class="note-dot">•</text>
            <text class="note-text">购买后立即生效，有效期 {{ detail.cardType.durationDays }} 天</text>
          </view>
          <view v-if="detail.cardType.totalTimes" class="note-item">
            <text class="note-dot">•</text>
            <text class="note-text">共 {{ detail.cardType.totalTimes }} 次课时，可灵活预约</text>
          </view>
          <view class="note-item">
            <text class="note-dot">•</text>
            <text class="note-text">需登录并授权手机号后方可参与秒杀</text>
          </view>
          <view class="note-item">
            <text class="note-dot">•</text>
            <text class="note-text">建议提前完善账号信息及手机号授权，方便馆主联系</text>
          </view>
          <view class="note-item">
            <text class="note-dot">•</text>
            <text class="note-text">秒杀卡不可退款，到期或课时用完后自动失效</text>
          </view>
          <view class="note-item">
            <text class="note-dot">•</text>
            <text class="note-text">支持微信支付，安全便捷</text>
          </view>
          <view class="note-item note-item--disclaimer">
            <text class="note-text disclaimer-text">* 本活动最终解释权归普拉提馆所有</text>
          </view>
        </view>
      </view>
      <!-- ═══ Bottom Action Bar ═══ -->
      <view class="bottom-bar">
        <view class="bar-price-area">
          <text class="bar-price-label">秒杀价</text>
          <view class="bar-price-row">
            <text class="bar-currency">¥</text>
            <text class="bar-price">{{ formatPrice(invite.price(detail.flashPrice)) }}</text>
          </view>
        </view>
        <view
          class="action-btn"
          :class="actionBtnClass"
          @tap="handleAction"
        >
          <text class="action-btn-text">{{ actionBtnText }}</text>
        </view>
      </view>
    </template>
  </view>
 </template>
 <script setup lang="ts">
 import { useInviteStore } from "../../stores/invite"
 const invite = useInviteStore()
 import { ref, computed, onMounted, onUnmounted } from 'vue'
 import {
  FlashSalePhase,
  FlashSaleOrderStatus,
 } from '@mp-pilates/shared'
 import type { FlashSaleDetail } from '@mp-pilates/shared'
 import { getErrorMessage } from '../../utils/auth'
 import { formatPrice, getFlashSalePhaseLabel, getCountdownParts, getStockRatio, getStockPercent } from '../../utils/format'
 import { getSystemLayout } from '../../utils/system'
 import { useUserStore } from '../../stores/user'
 import { useFlashSaleStore } from '../../stores/flash-sale'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import { post } from '../../utils/request'
 import { requestOrderPaidSubscriptionMessage } from '../../utils/wechat-subscription'
 const userStore = useUserStore()
 const flashSaleStore = useFlashSaleStore()
 const navBarHeight = ref('64px')
 const loading = ref(false)
 const buying = ref(false)
 const detail = ref<FlashSaleDetail | null>(null)
 const flashSaleId = ref('')
 const tick = ref(0)
 let timer: ReturnType<typeof setInterval> | null = null
 // ─── Computed ─────────────────────────────────────────
 const phaseLabel = computed(() => {
  if (!detail.value) return ''
  return getFlashSalePhaseLabel(detail.value.phase)
 })
 const heroPhaseClass = computed(() => {
  if (!detail.value) return ''
  if (detail.value.phase === FlashSalePhase.ONGOING) return 'hero--ongoing'
  if (detail.value.phase === FlashSalePhase.UPCOMING) return 'hero--upcoming'
  return 'hero--inactive'
 })
 const phaseBadgeClass = computed(() => {
  if (!detail.value) return ''
  if (detail.value.phase === FlashSalePhase.ONGOING) return 'pbadge--ongoing'
  if (detail.value.phase === FlashSalePhase.UPCOMING) return 'pbadge--upcoming'
  return 'pbadge--inactive'
 })
 const stockRatio = computed(() => {
  if (!detail.value) return 0
  return getStockRatio(detail.value.soldCount, detail.value.totalStock)
 })
 const stockPercent = computed(() => {
  if (!detail.value) return '0%'
  return getStockPercent(detail.value.soldCount, detail.value.totalStock)
 })
 const countdown = computed(() => {
  void tick.value
  if (!detail.value) return { h: '00', m: '00', s: '00' }
  const target = detail.value.phase === FlashSalePhase.UPCOMING
    ? detail.value.startTime
    : detail.value.endTime
  return getCountdownParts(target)
 })
 const isDisabled = computed(() => {
  if (!detail.value) return true
  const d = detail.value
  if (d.hasParticipated) return true
  if (d.phase === FlashSalePhase.SOLD_OUT) return true
  if (d.phase === FlashSalePhase.ENDED) return true
  if (d.phase === FlashSalePhase.UPCOMING) return true
  if (buying.value) return true
  return false
 })
 const actionBtnText = computed(() => {
  if (!detail.value) return ''
  const d = detail.value
  if (d.hasParticipated) {
    if (d.userOrderStatus === FlashSaleOrderStatus.PAID) return '已成功抢购'
    if (d.userOrderStatus === FlashSaleOrderStatus.RESERVED) return '待支付'
    return '已参与'
  }
  if (d.phase === FlashSalePhase.SOLD_OUT) return '已售罄'
  if (d.phase === FlashSalePhase.ENDED) return '活动已结束'
  if (d.phase === FlashSalePhase.UPCOMING) return `距开始 ${countdown.value.h}:${countdown.value.m}:${countdown.value.s}`
  if (!userStore.loggedIn) return '登录后参与'
  if (!userStore.user?.phone) return '授权手机号后参与'
  if (buying.value) return '抢购中...'
  return `¥${formatPrice(invite.price(d.flashPrice))} 立即抢购`
 })
 const actionBtnClass = computed(() => {
  if (isDisabled.value) return 'action-btn--disabled'
  return 'action-btn--active'
 })
 // ─── Data loading ────────────────────────────────────
 async function loadDetail() {
  if (!flashSaleId.value) return
  loading.value = true
  try {
    detail.value = await flashSaleStore.fetchDetail(flashSaleId.value)
  } catch {
    detail.value = null
  } finally {
    loading.value = false
  }
 }
 // ─── Phone auth ──────────────────────────────────────
 async function handleGetPhone(e: { detail: { code?: string; errMsg?: string } }) {
  if (!e.detail.code) return
  try {
    await post('/auth/phone', { code: e.detail.code })
    await userStore.fetchProfile()
    uni.showToast({ title: '授权成功', icon: 'success' })
  } catch {
    uni.showToast({ title: '授权失败，请重试', icon: 'none' })
  }
 }
 // ─── Action handler ──────────────────────────────────
 async function handleAction() {
  if (!detail.value || isDisabled.value) return
  // Check login
  if (!userStore.loggedIn) {
    uni.showModal({
      title: '提示',
      content: '请先登录后再参与秒杀',
      confirmText: '去登录',
      success: async (res) => {
        if (res.confirm) {
          try {
            const { isNewUser } = await userStore.loginWithSetup()
            if (!isNewUser) {
              await loadDetail() // refresh participation status
            }
          } catch (err: unknown) {
            uni.showToast({ title: getErrorMessage(err, '登录失败'), icon: 'none' })
          }
        }
      },
    })
    return
  }
  // Check phone
  if (!userStore.user?.phone) {
    uni.showToast({ title: '请先授权手机号', icon: 'none' })
    return
  }
  try { await invite.refresh() } catch (err) {
    uni.showToast({ title: getErrorMessage(err, '暂时无法核对优惠，请重试'), icon: 'none' })
    return
  }
  // Confirm purchase
  uni.showModal({
    title: '确认抢购',
    content: `确认以 ¥${formatPrice(invite.price(detail.value.flashPrice))} 抢购「${detail.value.title}」？`,
    confirmText: '确认抢购',
    success: async (res) => {
      if (res.confirm) {
        await doPurchase()
      }
    },
  })
 }
 async function doPurchase() {
  if (!detail.value || buying.value) return
  buying.value = true
  uni.showLoading({ title: '抢购中...' })
  try {
    const result = await flashSaleStore.purchase(detail.value.id)
    uni.hideLoading()
    // Launch WeChat Pay
    await new Promise<void>((resolve, reject) => {
      uni.requestPayment({
        provider: 'wxpay',
        timeStamp: result.paymentParams.timeStamp,
        nonceStr: result.paymentParams.nonceStr,
        package: result.paymentParams.package,
        signType: result.paymentParams.signType as 'MD5' | 'HMAC-SHA256',
        paySign: result.paymentParams.paySign,
        success: () => resolve(),
        fail: (err: { errMsg?: string }) => reject(new Error(err.errMsg ?? '支付取消')),
      })
    })
    await requestOrderPaidSubscriptionMessage().catch(() => undefined)
    uni.showToast({ title: '抢购成功！', icon: 'success' })
    await userStore.fetchMemberships()
    await loadDetail() // refresh status
    setTimeout(() => {
      uni.navigateTo({ url: '/pages/profile/membership' })
    }, 1500)
  } catch (err: unknown) {
    uni.hideLoading()
    const msg = err instanceof Error ? err.message : '抢购失败'
    if (!msg.includes('取消') && !msg.includes('cancel')) {
      uni.showToast({ title: msg, icon: 'none', duration: 3000 })
    }
    // Refresh detail to show updated status
    await loadDetail()
  } finally {
    buying.value = false
  }
 }
 // ─── Lifecycle ───────────────────────────────────────
 onMounted(() => {
  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
  const pages = getCurrentPages()
  const current = pages[pages.length - 1]
  const options = (current as { options?: Record<string, string> }).options ?? {}
  flashSaleId.value = options.id ?? ''
  loadDetail()
  timer = setInterval(() => { tick.value++ }, 1000)
 })
 onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
    timer = null
  }
 })
 </script>
 <style lang="scss" scoped>
 .page {
  min-height: 100vh;
  background: $bg-page;
  padding-bottom: calc(180rpx + env(safe-area-inset-bottom));
 }
 /* ── Loading ────────────────────────────── */
 .loading-wrap { padding: 0; }
 .skeleton-hero {
  height: 420rpx;
  background: linear-gradient(90deg, #ede8e3 25%, #e4dfd9 50%, #ede8e3 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
 }
 .skeleton-body { padding: 32rpx 24rpx; display: flex; flex-direction: column; gap: 20rpx; }
 .skeleton-line {
  height: 28rpx;
  border-radius: 14rpx;
  background: linear-gradient(90deg, #f0ece8 25%, #e8e4df 50%, #f0ece8 75%);
  background-size: 400% 100%;
  animation: shimmer 1.4s infinite;
  &.w80 { width: 80%; }
  &.w60 { width: 60%; }
  &.w40 { width: 40%; }
 }
 /* ── Error ───────────────────────────────── */
 .error-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 160rpx 40rpx;
  gap: 24rpx;
 }
 .error-icon { font-size: 80rpx; }
 .error-text { font-size: 30rpx; color: $text-hint; }
 .retry-btn {
  padding: 20rpx 48rpx;
  border-radius: 40rpx;
  background: linear-gradient(135deg, #D4A59A, #C08B7E);
 }
 .retry-text { font-size: 28rpx; color: #fff; font-weight: 600; }
 /* ═══════════════════════════════════════════
   HERO — warm blush tones
   ═══════════════════════════════════════════ */
 .hero {
  padding: 56rpx 36rpx 48rpx;
  display: flex;
  flex-direction: column;
  gap: 16rpx;
  position: relative;
  overflow: hidden;
 }
 .hero--ongoing {
  background: linear-gradient(135deg, #D4A59A 0%, #C9948A 35%, #B5836E 100%);
 }
 .hero--upcoming {
  background: linear-gradient(135deg, #8FA89A 0%, #7BA5A0 100%);
 }
 .hero--inactive {
  background: linear-gradient(135deg, #C4BAB0 0%, #AEA49A 100%);
 }
 .hero-deco {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  pointer-events: none;
  &--1 { width: 300rpx; height: 300rpx; top: -60rpx; right: -40rpx; }
  &--2 { width: 200rpx; height: 200rpx; bottom: -60rpx; left: 30rpx; }
  &--3 { width: 120rpx; height: 120rpx; top: 40rpx; left: -30rpx; background: rgba(255, 255, 255, 0.05); }
 }
 .hero-phase-badge {
  align-self: flex-start;
  padding: 8rpx 24rpx;
  border-radius: 24rpx;
  z-index: 1;
 }
 .pbadge--ongoing { background: rgba(255, 255, 255, 0.3); }
 .pbadge--upcoming { background: rgba(255, 255, 255, 0.25); }
 .pbadge--inactive { background: rgba(0, 0, 0, 0.12); }
 .hero-phase-text { font-size: 24rpx; color: #fff; font-weight: 600; letter-spacing: 1rpx; }
 .hero-title {
  font-size: 44rpx;
  font-weight: 800;
  color: #fff;
  z-index: 1;
  line-height: 1.2;
 }
 .hero-price-row {
  display: flex;
  align-items: baseline;
  gap: 4rpx;
  z-index: 1;
 }
 .hero-currency { font-size: 30rpx; font-weight: 700; color: rgba(255, 255, 255, 0.9); }
 .hero-price { font-size: 72rpx; font-weight: 800; color: #fff; line-height: 1; }
 .hero-original-wrap {
  display: flex;
  flex-direction: column;
  margin-left: 16rpx;
 }
 .hero-original-label { font-size: 18rpx; color: rgba(255, 255, 255, 0.65); }
 .hero-original { font-size: 26rpx; color: rgba(255, 255, 255, 0.55); text-decoration: line-through; }
 .hero-discount-badge {
  align-self: flex-start;
  padding: 6rpx 20rpx;
  border-radius: 16rpx;
  background: rgba(255, 255, 255, 0.22);
  border: 1rpx solid rgba(255, 255, 255, 0.35);
  z-index: 1;
 }
 .hero-discount-text { font-size: 22rpx; color: #fff; font-weight: 600; }
 /* Countdown */
 .hero-countdown {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-top: 8rpx;
  z-index: 1;
 }
 .cd-label { font-size: 24rpx; color: rgba(255, 255, 255, 0.85); }
 .cd-blocks { display: flex; align-items: center; gap: 6rpx; }
 .cd-block {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
  font-size: 28rpx;
  font-weight: 700;
  padding: 8rpx 14rpx;
  border-radius: 8rpx;
  font-family: 'DIN Alternate', monospace;
  min-width: 48rpx;
  text-align: center;
  backdrop-filter: blur(4px);
 }
 .cd-colon { color: #fff; font-size: 28rpx; font-weight: 700; }
 /* ═══════════════════════════════════════════
   STOCK
   ═══════════════════════════════════════════ */
 .stock-section {
  margin: 0 24rpx;
  background: #fff;
  border-radius: 20rpx;
  padding: 24rpx;
  margin-top: -20rpx;
  position: relative;
  z-index: 2;
  box-shadow: 0 4rpx 20rpx rgba(180, 160, 130, 0.1);
 }
 .stock-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12rpx;
 }
 .stock-label { font-size: 26rpx; color: $text-secondary; font-weight: 600; }
 .stock-count { font-size: 24rpx; color: #B5725E; font-weight: 600; }
 .stock-bar {
  height: 16rpx;
  background: #f5f0ed;
  border-radius: 8rpx;
  overflow: hidden;
 }
 .stock-fill {
  height: 100%;
  background: linear-gradient(90deg, #D4A59A, #C08B7E);
  border-radius: 8rpx;
  transition: width 0.3s;
  &--hot { animation: stockPulse 2s ease infinite; }
 }
@keyframes stockPulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
 }
 /* ═══════════════════════════════════════════
   PHONE PROMPT
   ═══════════════════════════════════════════ */
 .phone-prompt-card {
  margin: 20rpx 24rpx 0;
  background: linear-gradient(135deg, #FBF5F3, #F5ECEA);
  border-radius: 20rpx;
  padding: 24rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1rpx solid rgba(192, 139, 126, 0.2);
 }
 .phone-prompt-content {
  display: flex;
  align-items: center;
  gap: 16rpx;
  flex: 1;
 }
 .phone-prompt-icon { font-size: 40rpx; }
 .phone-prompt-text {
  display: flex;
  flex-direction: column;
  gap: 4rpx;
 }
 .phone-prompt-title { font-size: 26rpx; font-weight: 700; color: #B5725E; }
 .phone-prompt-desc { font-size: 22rpx; color: $text-hint; }
 .phone-auth-btn {
  background: linear-gradient(135deg, #D4A59A, #C08B7E) !important;
  border-radius: 32rpx !important;
  padding: 12rpx 28rpx !important;
  border: none !important;
  line-height: 1.4 !important;
  font-size: 24rpx !important;
  margin: 0 !important;
  flex-shrink: 0;
  &::after { border: none; }
 }
 .phone-auth-text { font-size: 24rpx; color: #fff; font-weight: 600; }
 /* ═══════════════════════════════════════════
   DETAIL SECTION
   ═══════════════════════════════════════════ */
 .detail-section {
  padding: 20rpx 24rpx 0;
  display: flex;
  flex-direction: column;
  gap: 20rpx;
 }
 .section-header-row {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-bottom: 16rpx;
 }
 .section-dot {
  width: 6rpx;
  height: 28rpx;
  border-radius: 3rpx;
  background: #C08B7E;
  flex-shrink: 0;
 }
 .section-label { font-size: 30rpx; font-weight: 700; color: $text-primary; }
 /* Info card */
 .info-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.08);
 }
 .info-grid {
  display: flex;
  justify-content: space-around;
  align-items: center;
 }
 .info-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8rpx;
  flex: 1;
  position: relative;
  & + & { border-left: 1rpx solid #f0ece8; }
 }
 .cell-value { font-size: 36rpx; font-weight: 800; color: $text-primary; line-height: 1.1; }
 .cell-label { font-size: 22rpx; color: $text-hint; }
 /* Description */
 .desc-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.08);
 }
 .desc-content { font-size: 27rpx; color: $text-secondary; line-height: 1.75; }
 /* Notes */
 .notes-card {
  background: #fff;
  border-radius: 20rpx;
  padding: 28rpx 24rpx;
  box-shadow: 0 2rpx 12rpx rgba(180, 160, 130, 0.08);
 }
 .note-item {
  display: flex;
  align-items: flex-start;
  gap: 12rpx;
  padding: 6rpx 0;
 }
 .note-dot { font-size: 26rpx; color: #C08B7E; line-height: 1.65; flex-shrink: 0; }
 .note-text { font-size: 26rpx; color: $text-secondary; line-height: 1.65; }
 .note-item--disclaimer { margin-top: 12rpx; padding-top: 16rpx; border-top: 1rpx solid #f0ece8; }
 .disclaimer-text { color: #bbb; font-size: 22rpx; }
 /* ═══════════════════════════════════════════
   BOTTOM BAR
   ═══════════════════════════════════════════ */
 .bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1rpx solid #f0ece8;
  padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 24rpx;
  box-shadow: 0 -4rpx 20rpx rgba(180, 160, 130, 0.08);
  z-index: 100;
 }
 .bar-price-area {
  display: flex;
  flex-direction: column;
  gap: 2rpx;
 }
 .bar-price-label { font-size: 20rpx; color: $text-hint; }
 .bar-price-row { display: flex; align-items: baseline; }
 .bar-currency { font-size: 24rpx; font-weight: 700; color: #B5725E; }
 .bar-price { font-size: 44rpx; font-weight: 800; color: #B5725E; line-height: 1; }
 .action-btn {
  flex: 1;
  height: 88rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .action-btn--active {
  background: linear-gradient(90deg, #D4A59A, #B5836E);
  box-shadow: 0 4rpx 16rpx rgba(192, 139, 126, 0.35);
  &:active { opacity: 0.85; }
 }
 .action-btn--disabled {
  background: #d0cac4;
 }
 .action-btn-text {
  font-size: 30rpx;
  font-weight: 700;
  color: #fff;
  letter-spacing: 1rpx;
 }
 </style>
--- a/packages/app/src/pages/home/index.vue
+++ b/packages/app/src/pages/home/index.vue
@@ -1,46 +1,22 @@
 <template>
-  <view class="home-page">
+  <view class="home-page" :style="{ height: pageHeight }">
    <!-- ① Brand Banner — fixed background layer -->
    <view class="banner-fixed">
      <BrandBanner :studio-info="studioStore.studioInfo" />
    </view>
-
+    <scroll-view class="page-scroll" scroll-y :scroll-into-view="scrollTarget"
-    <!-- Pull-to-refresh wrapper — scrollable foreground -->
+      scroll-with-animation refresher-enabled :refresher-triggered="refreshing"
-    <scroll-view
+      @refresherrefresh="handleRefresh" @refresherrestore="refreshing = false">
      class="page-scroll"
      scroll-y
      :scroll-top="scrollTop"
      :scroll-with-animation="true"
      :refresher-enabled="true"
      :refresher-triggered="refreshing"
      @refresherrefresh="handleRefresh"
      @refresherrestore="refreshing = false"
    >
      <!-- Transparent spacer to reveal Banner behind -->
      <view class="banner-spacer" />
      <!-- Floating card with rounded top corners -->
      <view class="floating-card">
-        <!-- Drag indicator -->
+        <view class="card-handle"><view class="card-handle-bar" /></view>
        <view class="card-handle">
          <view class="card-handle-bar" />
        </view>
        <!-- ② Studio Info (photo strip + address/phone) -->
        <StudioInfo :studio-info="studioStore.studioInfo" />
        <!-- ③ Quick Entry (login / trial / book / renew) -->
        <QuickEntry @scroll-to-card-shop="scrollToCardShop" />
        <!-- ④ Upcoming Bookings -->
        <UpcomingBooking />
-
+        <StudioInfo :studio-info="studioStore.studioInfo" />
-        <!-- ⑤ Card Shop (vertical list) -->
+        <FlashSaleSection ref="flashSaleRef" />
        <view :id="cardShopAnchorId">
          <CardShop ref="cardShopRef" />
        </view>
-
+        <AboutSection />
        <!-- Bottom padding for tab bar -->
        <view class="bottom-padding" />
      </view>
    </scroll-view>
@@ -49,13 +25,15 @@
 <script setup lang="ts">
 import { ref, nextTick, onUnmounted } from 'vue'
-import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
+import { onShow, onResize, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 import BrandBanner from '../../components/BrandBanner.vue'
 import StudioInfo from '../../components/StudioInfo.vue'
 import QuickEntry from '../../components/QuickEntry.vue'
 import UpcomingBooking from '../../components/UpcomingBooking.vue'
 import FlashSaleSection from '../../components/FlashSaleSection.vue'
 import CardShop from '../../components/CardShop.vue'
 import AboutSection from '../../components/AboutSection.vue'
 import { useUserStore } from '../../stores/user'
 import { useStudioStore } from '../../stores/studio'
@@ -84,8 +62,11 @@ onShareTimeline(() => {
 // ─── Layout ───────────────────────────────────────────────
 const refreshing = ref(false)
 const cardShopRef = ref<InstanceType<typeof CardShop> | null>(null)
 const flashSaleRef = ref<InstanceType<typeof FlashSaleSection> | null>(null)
 const cardShopAnchorId = 'card-shop-anchor'
-const scrollTop = ref(0)
+const scrollTarget = ref('')
 const pageHeight = ref(`${uni.getWindowInfo().windowHeight}px`)
 onResize(() => { pageHeight.value = `${uni.getWindowInfo().windowHeight}px` })
 const pendingScrollToCardShop = ref(false)
 // Listen for cross-page scroll request (e.g. from booking page "去购买")
@@ -114,6 +95,7 @@ async function refreshData() {
  if (userStore.loggedIn) {
    tasks.push(
      userStore.fetchProfile(),
      userStore.fetchMemberships(),
      bookingStore.fetchUpcomingBookings(),
    )
@@ -121,8 +103,11 @@ async function refreshData() {
  await Promise.allSettled(tasks)
-  // Also refresh card shop
+  // Also refresh card shop and flash sales
-  cardShopRef.value?.fetchCardTypes()
+  await Promise.allSettled([
    cardShopRef.value?.fetchCardTypes(),
    flashSaleRef.value?.fetchFlashSales(),
  ])
 }
 async function handleRefresh() {
@@ -134,78 +119,30 @@ async function handleRefresh() {
  }
 }
-function scrollToCardShop() {
+async function scrollToCardShop() {
-  // Reset first so setting the same value still triggers scroll
+  scrollTarget.value = ''
-  scrollTop.value = 0
+  await nextTick()
-  nextTick(() => {
+  scrollTarget.value = cardShopAnchorId
    uni.createSelectorQuery()
      .select(`#${cardShopAnchorId}`)
      .boundingClientRect()
      .selectViewport()
      .scrollOffset((res) => {
        if (res) {
          scrollTop.value = (res as UniApp.NodeInfo).scrollTop ?? 0
        }
      })
      .exec()
  })
 }
 </script>
 <style lang="scss" scoped>
-.home-page {
+.home-page { position: relative; height: 100vh; background: #fbf9f6; }
-  position: relative;
+.banner-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 0; }
-  height: 100vh;
+.page-scroll { position: relative; z-index: 1; height: 100%; }
-  background: #FAF8F5;
+.banner-spacer { height: 420rpx; }
 }
 /* Banner fixed behind everything */
 .banner-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 0;
 }
 /* Scroll layer sits above banner */
 .page-scroll {
  position: relative;
  z-index: 1;
  flex: 1;
  height: 100vh;
 }
 /* Transparent spacer lets banner peek through */
 .banner-spacer {
  height: 420rpx;
 }
 /* Floating card that overlaps the banner */
 .floating-card {
  position: relative;
  background: #FAF8F5;
  border-radius: 32rpx 32rpx 0 0;
  min-height: 100vh;
  padding-top: 12rpx;
-  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.06);
+  border-radius: 32rpx 32rpx 0 0;
-}
+  border-top: 1rpx solid rgba(255, 255, 255, 0.7);
-
+  background: linear-gradient(180deg, rgba(251, 249, 246, 0.86), #fbf9f6 260rpx);
-/* Small drag indicator at top of card */
+  -webkit-backdrop-filter: blur(16px);
-.card-handle {
+  backdrop-filter: blur(16px);
-  display: flex;
+  box-shadow: 0 -4rpx 20rpx rgba(66, 54, 45, 0.06);
  justify-content: center;
  padding: 16rpx 0 8rpx;
 }
 .card-handle-bar {
  width: 64rpx;
  height: 8rpx;
  border-radius: 4rpx;
  background: rgba(0, 0, 0, 0.1);
 }
 .bottom-padding {
  height: 120rpx;
 }
 .card-handle { display: flex; justify-content: center; padding: 16rpx 0 8rpx; }
 .card-handle-bar { width: 64rpx; height: 8rpx; border-radius: 4rpx; background: rgba(112, 94, 79, 0.18); }
 .bottom-padding { height: 48rpx; }
 </style>
--- a/packages/app/src/pages/profile/bookings.vue
+++ b/packages/app/src/pages/profile/bookings.vue
--- a/packages/app/src/pages/profile/index.vue
+++ b/packages/app/src/pages/profile/index.vue
@@ -1,15 +1,27 @@
 <template>
-  <view class="profile-page">
+  <view class="profile-page" :style="{ paddingTop: navBarHeight + 'px' }">
-    <!-- Custom nav bar (transparent, blends with UserCard gradient) -->
+    <view class="profile-page__nav" :style="{ paddingTop: statusBarHeight + 'px' }">
-    <CustomNavBar title="我的" transparent />
+      <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" />
+      :loading="loginLoading" @login="handleLogin" @edit="goToInfo" />
    <InviteCard />
    <!-- Menu section: always visible -->
-    <ProfileMenu :is-admin="isAdmin" :require-auth="loggedIn" @clear-cache="handleClearCache" @about="handleAbout"
+    <ProfileMenu
-      @require-login="handleLogin" />
+      :is-admin="isAdmin"
      :require-auth="loggedIn"
      :active-membership-count="activeMembershipCount"
      :upcoming-booking-count="upcomingBookingCount"
      :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">
@@ -19,26 +31,43 @@
 </template>
 <script setup lang="ts">
-import { ref, onMounted } from 'vue'
+import InviteCard from '../../components/InviteCard.vue'
 import { useInviteStore } from '../../stores/invite'
 import { ref, computed, onMounted } from 'vue'
 import { onShow, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 import { storeToRefs } from 'pinia'
 import { useUserStore } from '../../stores/user'
 import { useBookingStore } from '../../stores/booking'
 import { getSystemLayout } from '../../utils/system'
 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 invite = useInviteStore()
 const userStore = useUserStore()
 const bookingStore = useBookingStore()
 const { loggedIn, hasProfile, user, stats, memberships, isAdmin } = storeToRefs(userStore)
 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,
 )
 const upcomingBookingCount = computed(
  () => (loggedIn.value ? upcomingBookings.value.length : 0),
 )
 // ─── 微信分享 ───────────────────────────────────────────────
 onShareAppMessage(() => {
  return {
-    title: '我的普拉提会所，记录每一次进步',
+    title: invite.code ? '送你 95 折购卡礼，一起练普拉提' : '一起练普拉提',
-    path: '/pages/profile/index',
+    path: invite.code ? `/pages/card/detail?showAll=1&inviteCode=${invite.code}` : '/pages/home/index',
    imageUrl: '',
  }
 })
@@ -55,11 +84,15 @@ onMounted(() => {
 })
 onShow(async () => {
  activityRefreshKey.value += 1
  if (loggedIn.value) {
    await Promise.all([
      invite.refresh().catch(() => {}),
      invite.refreshActivity().catch(() => {}),
      userStore.fetchProfile(),
      userStore.fetchStats(),
      userStore.fetchMemberships(),
      bookingStore.fetchUpcomingBookings(),
    ])
  }
 })
@@ -70,21 +103,29 @@ async function handleLogin() {
  try {
    const { isNewUser } = await userStore.loginWithSetup()
    if (!isNewUser) {
-      await userStore.fetchStats()
+      await Promise.all([
        invite.refreshActivity().catch(() => {}),
        userStore.fetchStats(),
        bookingStore.fetchUpcomingBookings(),
      ])
    }
-  } catch {
+  } catch (err: unknown) {
-    uni.showToast({ title: '登录失败，请重试', icon: 'none' })
+    uni.showToast({ title: getErrorMessage(err, '登录失败，请重试'), icon: 'none' })
  } finally {
    loginLoading.value = false
  }
 }
 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()
@@ -106,38 +147,14 @@ function handleClearCache() {
  })
 }
 function handleAbout() {
  uni.showModal({
    title: '关于我们',
    content: 'Focus Core 普拉提工作室\n版本 1.0.0\n\n专注核心，遇见更好的自己',
    showCancel: false,
  })
 }
 </script>
 <style lang="scss" scoped>
 .profile-page {
-  min-height: 100vh;
+  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; }
-  &__logout-wrap {
+  &__nav-title { height: 88rpx; display: flex; align-items: center; justify-content: center; font-size: 34rpx; font-weight: 500; color: #514943; }
-    margin: $spacing-xl $spacing-lg $spacing-xl;
+  &__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; } }
  &__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;
    }
  }
 }
 </style>
--- a/packages/app/src/pages/profile/info.vue
+++ b/packages/app/src/pages/profile/info.vue
@@ -1,112 +1,62 @@
 <template>
  <view class="info-page" :style="{ paddingTop: navBarHeight }">
-    <CustomNavBar
+    <CustomNavBar :title="isFromLogin ? '完善个人信息' : '个人信息'" :show-back="!isFromLogin" />
      :title="isFromLogin ? '完善个人信息' : '个人信息'"
      :show-back="!isFromLogin"
    />
    <!-- First-login welcome banner -->
    <view v-if="isFromLogin" class="welcome-banner">
-      <view class="welcome-content">
+      <text class="welcome-title">欢迎来到工作室</text>
-        <view class="welcome-text">
+      <text class="welcome-desc">设置头像和昵称，方便老师认识你。</text>
          <text class="welcome-title">欢迎加入</text>
          <text class="welcome-desc">设置你的头像和昵称，让大家认识你</text>
        </view>
      </view>
    </view>
-    <!-- Avatar section -->
+    <view class="avatar-section">
-    <view class="avatar-section" :class="{ 'avatar-section--welcome': isFromLogin }">
+      <button class="avatar-btn" open-type="chooseAvatar" :disabled="busy" @chooseavatar="handleChooseAvatar">
      <button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="handleChooseAvatar">
        <view class="avatar-wrap">
-          <image
+          <image v-if="displayAvatarUrl" class="avatar" :src="displayAvatarUrl" mode="aspectFill" @error="avatarFailed = true" />
-            v-if="displayAvatarUrl"
+          <view v-else class="avatar-placeholder"><text>{{ nicknameInitial }}</text></view>
            class="avatar"
            :src="displayAvatarUrl"
            mode="aspectFill"
          />
          <view v-else class="avatar-placeholder">
            <text class="avatar-placeholder-text">{{ nicknameInitial }}</text>
          </view>
          <!-- Upload hint overlay -->
          <view class="avatar-overlay">
            <text class="avatar-overlay-text">点击更换</text>
        </view>
        <view class="avatar-copy">
          <text class="avatar-title">头像</text>
          <text class="avatar-action">{{ uploadingAvatar ? '正在更新…' : '点击更换' }}</text>
        </view>
        <text class="avatar-arrow">›</text>
      </button>
-      <text class="avatar-name">{{ form.nickname || '未设置昵称' }}</text>
+      <text class="avatar-hint">头像更换后自动保存</text>
      <text class="avatar-hint">点击头像选择微信头像</text>
    </view>
-    <!-- Form fields -->
+    <view class="form-section">
      <text class="section-title">基本资料</text>
      <view class="form-card">
-      <!-- Nickname (editable) -->
+        <view class="nickname-field">
-      <view class="form-row">
+          <view class="field-heading">
            <text class="form-label">昵称</text>
-        <input
+            <text class="field-count">{{ form.nickname.length }} / 20</text>
          class="form-input"
          type="nickname"
          v-model="form.nickname"
          placeholder="点击右侧按钮获取微信昵称"
          placeholder-style="color: #ccc"
          maxlength="20"
          :disabled="saving"
        />
        <text class="form-arrow">›</text>
          </view>
-
+          <input class="form-input" type="nickname" v-model="form.nickname" placeholder="输入昵称，或选择微信昵称"
-      <!-- Phone (hide in first-login mode) -->
+            placeholder-style="color: #a2978e" maxlength="20" :disabled="busy" :cursor-spacing="24" />
-      <view v-if="!isFromLogin" class="form-row form-row--last">
+        </view>
        <view v-if="!isFromLogin" class="form-row">
          <text class="form-label">手机号</text>
        <!-- Phone set: display masked -->
          <text v-if="hasPhone" class="form-value">{{ phoneDisplay }}</text>
-
+          <button v-else class="bind-phone-btn" open-type="getPhoneNumber" :disabled="busy" :loading="bindingPhone" @getphonenumber="handleGetPhone">绑定手机号</button>
-        <!-- Phone not set: bind button -->
+        </view>
        <button
          v-else
          class="bind-phone-btn"
          open-type="getPhoneNumber"
          @getphonenumber="handleGetPhone"
        >
          <text class="bind-phone-text">绑定手机号</text>
        </button>
      </view>
    </view>
    <!-- Read-only info card (hide in first-login mode) -->
    <view v-if="!isFromLogin" class="info-card">
-      <view class="info-row">
+      <view class="info-row"><text class="info-label">注册时间</text><text class="info-value">{{ joinDateDisplay }}</text></view>
-        <text class="info-label">注册时间</text>
+      <view class="info-row"><text class="info-label">有效会员卡</text><text class="info-value">{{ activeMembershipCount }} 张</text></view>
        <text class="info-value">{{ joinDateDisplay }}</text>
      </view>
      <view class="info-row info-row--last">
        <text class="info-label">会员卡数量</text>
        <text class="info-value">{{ activeMembershipCount }} 张有效</text>
      </view>
    </view>
    <!-- Save button -->
    <view class="save-wrap">
-      <view
+      <button class="save-btn" :disabled="saveDisabled" :loading="saving" @tap="handleSave">
-        class="save-btn"
+        {{ saving ? '保存中…' : isFromLogin ? '保存并进入' : '保存修改' }}
-        :class="{
+      </button>
-          'save-btn--loading': saving,
+      <text v-if="!isFromLogin" class="save-hint">{{ isDirty ? '昵称修改后，请点击保存' : '修改昵称后即可保存' }}</text>
-          'save-btn--disabled': !isFromLogin && (!isDirty || saving),
+      <button v-if="isFromLogin" class="skip-btn" :disabled="busy" @tap="handleSkip">稍后再说</button>
        }"
        @tap="handleSave"
      >
        <text class="save-btn-text">
          {{ saving ? '保存中...' : isFromLogin ? '保存并进入' : '保存修改' }}
        </text>
      </view>
      <text v-if="isFromLogin" class="skip-text" @tap="handleSkip">稍后再说</text>
    </view>
  </view>
 </template>
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed, onMounted, watch } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { useUserStore } from '../../stores/user'
 import { wxBindPhone } from '../../utils/auth'
@@ -125,7 +75,7 @@ onLoad((query) => {
 })
 // ─── Nav bar height ──────────────────────────────────────
-const navBarHeight = ref('64px')
+const navBarHeight = ref(`${getSystemLayout().navBarHeight}px`)
 // ─── Form state ───────────────────────────────────────────
 const form = ref({
@@ -134,6 +84,11 @@ const form = ref({
 const originalNickname = ref('')
 const saving = ref(false)
 const uploadingAvatar = ref(false)
 const bindingPhone = ref(false)
 const initializing = ref(true)
 const avatarFailed = ref(false)
 const busy = computed(() => saving.value || uploadingAvatar.value || bindingPhone.value || initializing.value)
 const saveDisabled = computed(() => busy.value || (!isFromLogin.value && !isDirty.value))
 // ─── Computed ─────────────────────────────────────────────
 const isDirty = computed(() => form.value.nickname.trim() !== originalNickname.value)
@@ -165,26 +120,19 @@ const activeMembershipCount = computed(
  () => userStore.user?.activeMembershipCount ?? userStore.activeMemberships.length,
 )
-// ─── Default avatar ───────────────────────────────────────
+// Use a local fallback when no avatar is set or the remote image fails.
-const defaultAvatarUrl = computed(() => {
+const displayAvatarUrl = computed(() => avatarFailed.value ? '' : avatarUrl.value)
-  const nickname = form.value.nickname || 'user'
+watch(avatarUrl, () => { avatarFailed.value = false })
  // 使用 dicebear 生成基于昵称的随机头像
  return `https://api.dicebear.com/7.x/identicon/svg?seed=${encodeURIComponent(nickname)}&backgroundColor=c9a87c,e8c88a`
 })
 const displayAvatarUrl = computed(() => {
  return avatarUrl.value || defaultAvatarUrl.value
 })
 // ─── Avatar upload ────────────────────────────────────────
 async function handleChooseAvatar(e: { detail: { avatarUrl: string } }) {
  const { avatarUrl } = e.detail
-  if (!avatarUrl) return
+  if (!avatarUrl || busy.value) return
  uploadingAvatar.value = true
  try {
    await userStore.updateProfile({ avatarUrl })
-    await userStore.fetchProfile()
+    avatarFailed.value = false
    uni.showToast({ title: '头像更新成功', icon: 'success' })
  } catch (err: unknown) {
    const msg = err instanceof Error ? err.message : '更新失败，请重试'
@@ -198,32 +146,32 @@ async function handleChooseAvatar(e: { detail: { avatarUrl: string } }) {
 async function handleGetPhone(e: {
  detail: { encryptedData: string; iv: string; errMsg: string }
 }) {
  if (busy.value) return
  if (e.detail.errMsg !== 'getPhoneNumber:ok') {
    // User denied or cancelled
    return
  }
  bindingPhone.value = true
  uni.showLoading({ title: '绑定中...' })
  try {
-    const updated = await wxBindPhone(e as Parameters<typeof wxBindPhone>[0])
+    await wxBindPhone(e as Parameters<typeof wxBindPhone>[0])
    // Refresh store with updated profile
    await userStore.fetchProfile()
    uni.hideLoading()
    uni.showToast({ title: '手机号绑定成功', icon: 'success' })
-    // Sync nickname from updated profile
+    // Keep the local nickname draft while refreshing the phone information.
    if (updated.nickname) {
      form.value = { nickname: updated.nickname }
      originalNickname.value = updated.nickname
    }
  } catch (err: unknown) {
    uni.hideLoading()
    const msg = err instanceof Error ? err.message : '绑定失败，请重试'
    uni.showToast({ title: msg, icon: 'none' })
  } finally {
    bindingPhone.value = false
  }
 }
 // ─── Save ─────────────────────────────────────────────────
 async function handleSave() {
-  if (saving.value) return
+  if (busy.value) return
  // In first-login mode, allow saving even if not dirty (user may just want to proceed)
  if (!isFromLogin.value && !isDirty.value) return
@@ -262,6 +210,7 @@ async function handleSave() {
 // ─── Skip (first-login only) ─────────────────────────────
 function handleSkip() {
  if (busy.value) return
  uni.showModal({
    title: '确认跳过？',
    content: '完善头像和昵称可以让教练和伙伴更容易认识你',
@@ -278,6 +227,7 @@ function handleSkip() {
 // ─── Lifecycle ────────────────────────────────────────────
 onMounted(async () => {
  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
  try {
    if (!isFromLogin.value) {
      await userStore.fetchProfile()
    }
@@ -285,305 +235,50 @@ onMounted(async () => {
      form.value = { nickname: userStore.user.nickname }
      originalNickname.value = userStore.user.nickname
    }
  } finally {
    initializing.value = false
  }
 })
 </script>
 <style lang="scss" scoped>
-.info-page {
+.info-page { min-height: 100vh; box-sizing: border-box; padding-bottom: calc(32rpx + env(safe-area-inset-bottom)); background: #fbf9f6; color: #514943; }
-  min-height: 100vh;
+.welcome-banner { margin: 28rpx 32rpx 0; }
-  background: $bg-page;
+.welcome-title { display: block; font-size: 32rpx; font-weight: 500; }
-}
+.welcome-desc { display: block; margin-top: 12rpx; font-size: 24rpx; color: #8b817b; line-height: 1.7; }
-
+.avatar-section { margin: 28rpx 32rpx 0; padding: 28rpx; border-radius: 28rpx; background: #f2e9e3; }
 /* ── Welcome banner (first-login) ───────────────────── */
 .welcome-banner {
  position: relative;
  margin: 0 $spacing-lg $spacing-md;
  padding: 36rpx 32rpx;
  background: linear-gradient(135deg, $brand-color 0%, #6b5d52 100%);
  border-radius: $radius-lg;
  overflow: hidden;
  &::before {
    content: '';
    position: absolute;
    top: -40rpx;
    right: -20rpx;
    width: 180rpx;
    height: 180rpx;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.15) 0%, transparent 70%);
    pointer-events: none;
  }
 }
 .welcome-content {
  position: relative;
  z-index: 1;
 }
 .welcome-text {
  display: flex;
  flex-direction: column;
  gap: 6rpx;
 }
 .welcome-title {
  font-size: 34rpx;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2rpx;
 }
 .welcome-desc {
  font-size: 24rpx;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.5;
 }
 /* ── Avatar section ──────────────────────────────────── */
 .avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 56rpx 0 40rpx;
  background: $bg-card;
  margin-bottom: $spacing-md;
  border-bottom: 1rpx solid $border-color;
  &--welcome {
    padding-top: 40rpx;
  }
 }
 .avatar-btn {
-  background: transparent;
+  display: flex; align-items: center; gap: 24rpx; width: 100%; min-width: 0;
-  border: none;
+  height: auto; margin: 0; padding: 0; border: none; background: transparent;
-  padding: 0;
+  border-radius: 0; line-height: 1.4; text-align: left; color: #514943;
-  margin: 0;
+  &::after { border: none; }
-
+  &[disabled] { background: transparent; color: #8b817b; }
  &::after {
    border: none;
  }
 }
 .avatar-wrap {
  position: relative;
  width: 160rpx;
  height: 160rpx;
  margin-bottom: 16rpx;
 }
 .avatar {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  border: 4rpx solid $border-color;
 }
 .avatar-placeholder {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background: linear-gradient(135deg, $brand-color, $accent-color);
  display: flex;
  align-items: center;
  justify-content: center;
 }
 .avatar-placeholder-text {
  font-size: 64rpx;
  font-weight: 700;
  color: #fff;
 }
 .avatar-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 52rpx;
  background: rgba(0, 0, 0, 0.45);
  border-radius: 0 0 80rpx 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
 }
 .avatar-overlay-text {
  font-size: 20rpx;
  color: #ffffff;
  letter-spacing: 1rpx;
 }
 .avatar-name {
  font-size: 34rpx;
  font-weight: 700;
  color: $text-primary;
  margin-bottom: 6rpx;
 }
 .avatar-hint {
  font-size: 22rpx;
  color: $text-hint;
 }
 /* ── Form card ───────────────────────────────────────── */
 .form-card {
  background: $bg-card;
  border-radius: $radius-lg;
  margin: 0 $spacing-lg $spacing-md;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
 }
 .form-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 32rpx 28rpx;
  border-bottom: 1rpx solid rgba($border-color, 0.5);
  min-height: 100rpx;
  &--last {
    border-bottom: none;
  }
 }
 .form-label {
  font-size: 28rpx;
  color: $text-secondary;
  width: 120rpx;
  flex-shrink: 0;
  font-weight: 500;
 }
 .form-input {
  flex: 1;
  font-size: 28rpx;
  color: $text-primary;
  text-align: right;
  background: transparent;
  min-height: 44rpx;
 }
 .form-value {
  flex: 1;
  font-size: 28rpx;
  color: $text-hint;
  text-align: right;
 }
 .form-arrow {
  font-size: 36rpx;
  color: $text-hint;
  margin-left: 8rpx;
  line-height: 1;
 }
 /* Bind phone button (styled, not default wx button) */
 .bind-phone-btn {
  flex: 1;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  line-height: normal;
  /* reset uni button default styles */
  &::after {
    border: none;
  }
 }
 .bind-phone-text {
  font-size: 26rpx;
  color: $accent-color;
  font-weight: 600;
  text-decoration: underline;
 }
 /* ── Read-only info card ──────────────────────────────── */
 .info-card {
  background: $bg-card;
  border-radius: $radius-lg;
  margin: 0 $spacing-lg $spacing-lg;
  overflow: hidden;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
 }
 .info-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  padding: 28rpx 28rpx;
  border-bottom: 1rpx solid rgba($border-color, 0.5);
  &--last {
    border-bottom: none;
  }
 }
 .info-label {
  font-size: 26rpx;
  color: $text-hint;
 }
 .info-value {
  font-size: 26rpx;
  color: $text-secondary;
  font-weight: 500;
 }
 /* ── Save button ─────────────────────────────────────── */
 .save-wrap {
  padding: 8rpx $spacing-lg 48rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24rpx;
 }
 .save-btn {
  width: 100%;
  height: 96rpx;
  border-radius: 48rpx;
  background: linear-gradient(135deg, $brand-color, #5e5045);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8rpx 24rpx rgba($brand-color, 0.25);
  transition: all 0.25s ease;
  &:active {
    transform: scale(0.98);
    box-shadow: 0 4rpx 12rpx rgba($brand-color, 0.2);
  }
  &--loading,
  &--disabled {
    opacity: 0.45;
    box-shadow: none;
  }
 }
 .save-btn-text {
  font-size: 32rpx;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 2rpx;
 }
 .skip-text {
  font-size: 26rpx;
  color: $text-hint;
  padding: 8rpx 24rpx;
  &:active {
    opacity: 0.6;
  }
 }
 .avatar-wrap { width: 120rpx; height: 120rpx; flex-shrink: 0; border-radius: 50%; overflow: hidden; box-sizing: border-box; border: 5rpx solid #fcf8f4; }
 .avatar, .avatar-placeholder { display: block; width: 100%; height: 100%; }
 .avatar-placeholder { display: flex; align-items: center; justify-content: center; background: #e0cec4; color: #7b6254; font-size: 44rpx; font-weight: 400; line-height: 1; }
 .avatar-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 12rpx; }
 .avatar-title { font-size: 30rpx; font-weight: 500; }
 .avatar-action { font-size: 24rpx; color: #8b7160; }
 .avatar-arrow { flex-shrink: 0; font-size: 32rpx; color: #a38d7d; }
 .avatar-hint { display: block; margin-top: 20rpx; font-size: 21rpx; color: #9a8577; }
 .form-section { margin: 32rpx 32rpx 0; }
 .section-title { display: block; margin-bottom: 18rpx; font-size: 28rpx; font-weight: 500; }
 .form-card { padding: 0 28rpx; background: #fff; border: 1rpx solid #eee8e3; border-radius: 28rpx; }
 .nickname-field { padding: 26rpx 0 20rpx; }
 .field-heading { display: flex; align-items: center; justify-content: space-between; gap: 20rpx; }
 .form-label { flex-shrink: 0; font-size: 26rpx; color: #786b61; }
 .field-count { font-size: 20rpx; color: #a2978e; }
 .form-input { display: block; box-sizing: border-box; width: 100%; min-width: 0; height: 76rpx; margin-top: 12rpx; padding: 0 18rpx; border-radius: 14rpx; background: #faf8f5; font-size: 27rpx; color: #514943; line-height: normal; text-align: left; }
 .form-row { display: flex; align-items: center; gap: 24rpx; min-height: 104rpx; border-top: 1rpx solid #f0ebe6; }
 .form-value { flex: 1; min-width: 0; text-align: right; font-size: 26rpx; color: #6f655e; }
 .bind-phone-btn { margin: 0 0 0 auto; padding: 0 20rpx; height: 60rpx; line-height: 60rpx; flex-shrink: 0; border: none; border-radius: 999rpx; background: #edf2ec; color: #617d73; font-size: 24rpx; &::after { border: none; } }
 .info-card { margin: 24rpx 32rpx 0; padding: 8rpx 28rpx; border-radius: 26rpx; background: #f3f0eb; }
 .info-row { display: flex; align-items: baseline; justify-content: space-between; gap: 20rpx; padding: 18rpx 0; }
 .info-label { flex-shrink: 0; font-size: 23rpx; color: #8b817b; }
 .info-value { font-size: 23rpx; color: #786b61; text-align: right; }
 .save-wrap { margin: 32rpx 32rpx 0; }
 .save-btn { display: block; width: 100%; height: 88rpx; line-height: 88rpx; margin: 0; padding: 0; border: none; border-radius: 999rpx; background: #6b8276; font-size: 28rpx; font-weight: 400; color: #fff; &::after { border: none; } &[disabled] { background: #e3e8df; color: #8a9586; } }
 .save-hint { display: block; margin-top: 18rpx; font-size: 21rpx; color: #9a9086; text-align: center; }
 .skip-btn { text-align: center; margin: 16rpx auto 0; padding: 8rpx 24rpx; width: auto; border: none; background: transparent; font-size: 24rpx; color: #8b817b; &::after { border: none; } }
 </style>
--- a/packages/app/src/pages/profile/invite.vue
+++ b/packages/app/src/pages/profile/invite.vue
@@ -0,0 +1,19 @@
 <template><view :style="{ paddingTop: navBarHeight }"><CustomNavBar title="邀请好友" show-back /><InviteCard /></view></template>
 <script setup lang="ts">
 import { onShareAppMessage, onShow } from '@dcloudio/uni-app'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import InviteCard from '../../components/InviteCard.vue'
 import { useInviteStore } from '../../stores/invite'
 import { useUserStore } from '../../stores/user'
 import { getSystemLayout } from '../../utils/system'
 const invite = useInviteStore()
 const user = useUserStore()
 const navBarHeight = `${getSystemLayout().navBarHeight}px`
 onShow(() => {
  if (user.loggedIn) {
    invite.refresh().catch(() => {})
    invite.refreshActivity().catch(() => {})
  }
 })
 onShareAppMessage(() => ({ title: '送你 95 折购卡礼，一起练普拉提', path: invite.code ? `/pages/card/detail?showAll=1&inviteCode=${invite.code}` : '/pages/home/index' }))
 </script>
--- a/packages/app/src/pages/profile/membership.vue
+++ b/packages/app/src/pages/profile/membership.vue
@@ -1,164 +1,110 @@
 <template>
-  <view class="membership-page" :style="{ paddingTop: navBarHeight }">
+  <view class="membership-page" :style="{ paddingTop: navBarHeight, height: pageHeight }">
    <CustomNavBar title="我的会员卡" show-back />
-    <!-- Pull-to-refresh scroll view -->
+    <scroll-view class="scroll" scroll-y refresher-enabled :refresher-triggered="refreshing" @refresherrefresh="onRefresh">
-    <scroll-view
+      <view v-if="loading && !refreshing && !allMemberships.length" class="loading-wrap">
      class="scroll"
      scroll-y
      refresher-enabled
      :refresher-triggered="refreshing"
      @refresherrefresh="onRefresh"
    >
      <!-- Loading skeleton -->
      <view v-if="loading && !refreshing" class="loading-wrap">
        <view v-for="i in 2" :key="i" class="skeleton-card" />
      </view>
      <!-- Empty state -->
      <view v-else-if="allMemberships.length === 0" class="empty-wrap">
-        <text class="empty-icon">💳</text>
+        <view class="empty-card">
-        <text class="empty-title">暂无会员卡</text>
+          <text class="empty-title">还没有会员卡</text>
-        <text class="empty-sub">购买会员卡后即可预约课程</text>
+          <text class="empty-sub">选一张适合自己的卡，开始第一次练习。</text>
-        <view class="empty-btn" @tap="goStore">
+          <button class="empty-btn" @tap="goStore">选购会员卡</button>
          <text class="empty-btn-text">去购买</text>
        </view>
      </view>
      <!-- Membership list -->
      <view v-else class="list">
-        <!-- Active cards -->
+        <view v-if="activeMemberships.length" class="group-section">
        <view v-if="activeMemberships.length > 0" class="group-section">
          <view class="group-header">
-            <view class="group-dot group-dot--active" />
+            <text class="group-title">正在使用</text>
-            <text class="group-title">有效会员卡</text>
+            <text class="group-count">{{ activeMemberships.length }} 张有效卡</text>
            <text class="group-count">{{ activeMemberships.length }} 张</text>
          </view>
-
+          <view v-for="m in activeMemberships" :key="m.id" class="mc" :class="cardBgClass(m.cardType.type)">
-          <view
+            <view class="mc-top">
-            v-for="m in activeMemberships"
+              <view class="mc-name-area">
-            :key="m.id"
+                <text class="mc-name">{{ m.cardType.name }}</text>
-            class="card-item"
+                <text class="mc-type-text">{{ getCardTypeLabel(m.cardType.type) }}</text>
-          >
+              </view>
-            <!-- Colored left border strip -->
+              <text class="mc-status mc-status--active">有效</text>
-            <view class="card-strip" :class="stripClass(m.cardType.type)" />
+            </view>
-
+            <view class="mc-balance">
-            <!-- Card header (colored gradient) -->
+              <view class="mc-number-row">
-            <view class="card-header" :class="headerClass(m.cardType.type)">
+                <text class="mc-big-num">{{ m.remainingTimes !== null ? m.remainingTimes : daysRemaining(m) }}</text>
-              <view class="card-header-left">
+                <text class="mc-big-unit">{{ m.remainingTimes !== null ? '次可用' : '天剩余' }}</text>
-                <text class="card-name">{{ m.cardType.name }}</text>
+              </view>
-                <view class="card-type-badge">
+              <text v-if="m.remainingTimes === null" class="mc-duration-note">有效期内不限次数</text>
-                  <text class="card-type-badge-text">{{ typeLabel(m.cardType.type) }}</text>
+              <view v-else-if="getMembershipTotalTimes(m)" class="mc-progress">
                <view class="mc-progress-track"><view class="mc-progress-fill" :style="{ width: getMembershipProgressWidth(m) }" /></view>
                <text class="mc-progress-label">已用 {{ getMembershipUsedTimes(m) }} / {{ getMembershipTotalTimes(m) }} 次</text>
              </view>
            </view>
-              <view class="status-badge status-badge--active">
+            <view class="mc-bottom">
-                <text class="status-badge-text">有效</text>
+              <view class="mc-date-item">
                <text class="mc-date-label">开始日期</text>
                <text class="mc-date-value">{{ m.startDate.slice(0, 10) }}</text>
              </view>
              <view class="mc-date-item mc-date-item--end">
                <text class="mc-date-label">有效期至</text>
                <text class="mc-date-value">{{ m.expireDate.slice(0, 10) }}</text>
              </view>
            </view>
-
+            <view class="mc-actions">
-            <!-- Card body -->
+              <button v-if="canRenewMembership(m)" class="mc-renew" @tap="goRenew(m)">续卡</button>
-            <view class="card-body">
+              <button class="mc-book" @tap="goBooking">预约课程</button>
              <!-- Times card: remaining times + progress -->
              <template v-if="m.remainingTimes !== null">
                <view class="highlight-row">
                  <text class="highlight-label">剩余课时</text>
                  <text class="highlight-value">
                    <text class="highlight-number">{{ m.remainingTimes }}</text>
                    <text class="highlight-unit"> 次</text>
                  </text>
                </view>
                <view v-if="m.cardType.totalTimes" class="progress-wrap">
                  <view class="progress-bar">
                    <view
                      class="progress-fill"
                      :style="{ width: progressWidth(m) }"
                    />
                  </view>
                  <text class="progress-label">
                    已使用 {{ usedTimes(m) }} / {{ m.cardType.totalTimes }} 次
                  </text>
                </view>
              </template>
              <!-- Duration card: expiry -->
              <view class="info-row">
                <text class="info-label">有效期至</text>
                <text class="info-value">{{ m.expireDate.slice(0, 10) }}</text>
              </view>
              <view class="info-row">
                <text class="info-label">开始日期</text>
                <text class="info-value">{{ m.startDate.slice(0, 10) }}</text>
              </view>
            </view>
          </view>
        </view>
-        <!-- Expired / used up cards -->
+        <view v-if="inactiveMemberships.length" class="group-section">
        <view v-if="inactiveMemberships.length > 0" class="group-section">
          <view class="group-header">
            <view class="group-dot group-dot--inactive" />
            <text class="group-title">历史记录</text>
            <text class="group-count">{{ inactiveMemberships.length }} 张</text>
          </view>
-
+          <view v-for="m in inactiveMemberships" :key="m.id" class="mc mc--inactive">
-          <view
+            <view class="mc-top">
-            v-for="m in inactiveMemberships"
+              <view class="mc-name-area">
-            :key="m.id"
+                <text class="mc-name">{{ m.cardType.name }}</text>
-            class="card-item card-item--inactive"
+                <text class="mc-type-text">{{ getCardTypeLabel(m.cardType.type) }}</text>
          >
            <view class="card-strip card-strip--inactive" />
            <view class="card-header card-header--inactive">
              <view class="card-header-left">
                <text class="card-name card-name--dim">{{ m.cardType.name }}</text>
                <view class="card-type-badge card-type-badge--dim">
                  <text class="card-type-badge-text">{{ typeLabel(m.cardType.type) }}</text>
              </view>
              <text class="mc-status" :class="inactiveStatusClass(m.status)">{{ statusLabel(m.status) }}</text>
            </view>
-              <view class="status-badge" :class="statusBadgeClass(m.status)">
+            <view class="mc-history-bottom">
-                <text class="status-badge-text">{{ statusLabel(m.status) }}</text>
+              <view class="mc-history-info">
                <text v-if="m.remainingTimes !== null" class="mc-date-label">剩余 {{ m.remainingTimes }} 次</text>
                <text class="mc-date-label">{{ m.expireDate.slice(0, 10) }} 到期</text>
              </view>
-            </view>
+              <button v-if="canRenewMembership(m)" class="mc-renew mc-renew--inactive" @tap="goRenew(m)">续同款</button>
            <view class="card-body">
              <view v-if="m.remainingTimes !== null" class="info-row">
                <text class="info-label">剩余课时</text>
                <text class="info-value">{{ m.remainingTimes }} 次</text>
              </view>
              <view class="info-row">
                <text class="info-label">有效期至</text>
                <text class="info-value">{{ m.expireDate.slice(0, 10) }}</text>
            </view>
          </view>
        </view>
      </view>
      </view>
      <view class="scroll-bottom-spacer" />
    </scroll-view>
-
+    <view v-if="allMemberships.length" class="purchase-dock">
-    <!-- Buy more FAB -->
+      <button class="purchase-btn" @tap="goStore">选购会员卡</button>
    <view class="fab" @tap="goStore">
      <text class="fab-icon">+</text>
      <text class="fab-text">购买会员卡</text>
    </view>
  </view>
 </template>
 <script setup lang="ts">
-import { ref, computed, onMounted } from 'vue'
+import { ref, computed } from 'vue'
 import { onShow, onResize } from '@dcloudio/uni-app'
 import type { MembershipWithCardType } from '@mp-pilates/shared'
 import { MembershipStatus, CardTypeCategory } from '@mp-pilates/shared'
 import { useUserStore } from '../../stores/user'
 import { getSystemLayout } from '../../utils/system'
 import { getCardTypeLabel, getMembershipProgressWidth, getMembershipUsedTimes, getMembershipTotalTimes } from '../../utils/format'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 const userStore = useUserStore()
-// ─── Nav bar height ──────────────────────────────────────
+const navBarHeight = `${getSystemLayout().navBarHeight}px`
-const navBarHeight = ref('64px')
+const pageHeight = ref(`${uni.getWindowInfo().windowHeight}px`)
-// ─── State ────────────────────────────────────────────────
+onResize(() => { pageHeight.value = `${uni.getWindowInfo().windowHeight}px` })
 const loading = ref(false)
 const refreshing = ref(false)
 // ─── Computed from store ───────────────────────────────────
 const allMemberships = computed(() => userStore.memberships as MembershipWithCardType[])
 const activeMemberships = computed(() =>
@@ -169,16 +115,6 @@ const inactiveMemberships = computed(() =>
  allMemberships.value.filter((m) => m.status !== MembershipStatus.ACTIVE),
 )
 // ─── Helpers ──────────────────────────────────────────────
 function typeLabel(type: CardTypeCategory): string {
  const map: Record<CardTypeCategory, string> = {
    [CardTypeCategory.TIMES]: '次卡',
    [CardTypeCategory.DURATION]: '月卡',
    [CardTypeCategory.TRIAL]: '体验卡',
  }
  return map[type] ?? '会员卡'
 }
 function statusLabel(status: MembershipStatus): string {
  const map: Record<MembershipStatus, string> = {
    [MembershipStatus.ACTIVE]: '有效',
@@ -188,36 +124,22 @@ function statusLabel(status: MembershipStatus): string {
  return map[status] ?? status
 }
-function statusBadgeClass(status: MembershipStatus): string {
+function inactiveStatusClass(status: MembershipStatus): string {
-  if (status === MembershipStatus.EXPIRED) return 'status-badge--expired'
+  if (status === MembershipStatus.USED_UP) return 'mc-status--used'
-  if (status === MembershipStatus.USED_UP) return 'status-badge--used'
+  return 'mc-status--expired'
  return 'status-badge--expired'
 }
-function stripClass(type: CardTypeCategory): string {
+function cardBgClass(type: CardTypeCategory): string {
-  if (type === CardTypeCategory.TRIAL) return 'card-strip--trial'
+  if (type === CardTypeCategory.TRIAL) return 'mc--trial'
-  if (type === CardTypeCategory.DURATION) return 'card-strip--duration'
+  if (type === CardTypeCategory.DURATION) return 'mc--duration'
-  return 'card-strip--times'
+  return 'mc--times'
 }
-function headerClass(type: CardTypeCategory): string {
+function daysRemaining(m: MembershipWithCardType): number {
-  if (type === CardTypeCategory.TRIAL) return 'card-header--trial'
+  const diff = new Date(m.expireDate).getTime() - Date.now()
-  if (type === CardTypeCategory.DURATION) return 'card-header--duration'
+  return Math.max(0, Math.ceil(diff / 86_400_000))
  return 'card-header--times'
 }
 function progressWidth(m: MembershipWithCardType): string {
  if (m.remainingTimes === null || !m.cardType.totalTimes) return '0%'
  const pct = (m.remainingTimes / m.cardType.totalTimes) * 100
  return `${Math.max(0, Math.min(100, pct))}%`
 }
 function usedTimes(m: MembershipWithCardType): number {
  if (m.remainingTimes === null || !m.cardType.totalTimes) return 0
  return m.cardType.totalTimes - m.remainingTimes
 }
 // ─── Data loading ─────────────────────────────────────────
 async function loadMemberships() {
  loading.value = true
  try {
@@ -231,331 +153,80 @@ async function loadMemberships() {
 async function onRefresh() {
  refreshing.value = true
  try {
    await userStore.fetchMemberships()
  } finally {
    refreshing.value = false
  }
 }
 function goBooking() {
  uni.switchTab({ url: '/pages/booking/index' })
 }
 function goStore() {
  uni.$emit('scrollToCardShop')
  uni.switchTab({ url: '/pages/home/index' })
 }
-// ─── Lifecycle ────────────────────────────────────────────
+function canRenewMembership(m: MembershipWithCardType): boolean {
-onMounted(() => {
+  return m.cardType.isActive && m.cardType.type !== CardTypeCategory.TRIAL
-  navBarHeight.value = `${getSystemLayout().navBarHeight}px`
+}
-  loadMemberships()
+
-})
+function goRenew(m: MembershipWithCardType) {
  uni.navigateTo({ url: `/pages/card/detail?id=${m.cardTypeId}` })
 }
 onShow(loadMemberships)
 </script>
 <style lang="scss" scoped>
-.membership-page {
+.membership-page { box-sizing: border-box; height: 100vh; display: flex; flex-direction: column; background: #fbf9f6; color: #514943; }
-  min-height: 100vh;
+.scroll { flex: 1; height: 0; min-height: 0; }
-  background: #f5f3f0;
+.loading-wrap { padding: 28rpx 32rpx; display: flex; flex-direction: column; gap: 24rpx; }
-}
+.skeleton-card { height: 420rpx; border-radius: 28rpx; background: linear-gradient(90deg, #f0eae5 25%, #faf7f3 50%, #f0eae5 75%); background-size: 400% 100%; animation: shimmer 1.4s infinite; }
-
+.empty-wrap { padding: 40rpx 32rpx; }
-.scroll {
+.empty-card { padding: 48rpx 32rpx; border-radius: 28rpx; background: #f2e9e3; display: flex; flex-direction: column; align-items: flex-start; gap: 16rpx; }
-  height: 100vh;
+.empty-title { font-size: 32rpx; font-weight: 500; }
-}
+.empty-sub { font-size: 24rpx; color: #8b7b70; line-height: 1.7; }
-
+.empty-btn { margin: 12rpx 0 0; padding: 0 32rpx; height: 76rpx; line-height: 76rpx; border: none; border-radius: 999rpx; background: #6b8276; color: #fff; font-size: 26rpx; &::after { border: none; } }
-/* ── Loading ─────────────────────────────────────────── */
+.list { padding: 28rpx 32rpx 0; }
-.loading-wrap {
+.group-section + .group-section { margin-top: 36rpx; }
-  padding: 24rpx;
+.group-header { display: flex; align-items: baseline; justify-content: space-between; gap: 20rpx; margin-bottom: 20rpx; }
-  display: flex;
+.group-title { font-size: 28rpx; font-weight: 500; }
-  flex-direction: column;
+.group-count { font-size: 22rpx; color: #8b817b; }
-  gap: 20rpx;
+.mc { --balance-bg: #f3ebe3; --balance-ink: #8b6c5b; padding: 28rpx; margin-bottom: 20rpx; border: 1rpx solid #eee8e3; border-radius: 28rpx; background: #fff; }
-}
+.mc--duration { --balance-bg: #edf2e9; --balance-ink: #617d63; }
-
+.mc--trial { --balance-bg: #f5e9e5; --balance-ink: #9b7768; }
-.skeleton-card {
+.mc-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 20rpx; }
-  height: 220rpx;
+.mc-name-area { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
-  border-radius: 20rpx;
+.mc-name { font-size: 30rpx; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
-  background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
+.mc-type-text { font-size: 22rpx; color: #8b817b; }
-  background-size: 400% 100%;
+.mc-status { flex-shrink: 0; padding: 6rpx 16rpx; border-radius: 999rpx; background: #ede9e4; color: #8b817b; font-size: 21rpx; line-height: 1.4; }
-  animation: shimmer 1.4s infinite;
+.mc-status--active { background: #edf2ec; color: #617d73; }
-}
+.mc-balance { margin-top: 24rpx; padding: 22rpx 24rpx; background: var(--balance-bg); border-radius: 20rpx; }
-
+.mc-number-row { display: flex; align-items: baseline; gap: 10rpx; }
-/* ── Empty ───────────────────────────────────────────── */
+.mc-big-num { font-size: 56rpx; font-weight: 400; line-height: 1.1; color: var(--balance-ink); font-variant-numeric: tabular-nums; }
-.empty-wrap {
+.mc-big-unit { font-size: 23rpx; color: var(--balance-ink); }
-  display: flex;
+.mc-duration-note { display: block; font-size: 21rpx; color: #7b8775; margin-top: 12rpx; }
-  flex-direction: column;
+.mc-progress { margin-top: 18rpx; }
-  align-items: center;
+.mc-progress-track { height: 6rpx; border-radius: 6rpx; overflow: hidden; background: rgba(255,255,255,0.8); }
-  justify-content: center;
+.mc-progress-fill { height: 100%; border-radius: 6rpx; background: #b9a38f; }
-  padding: 120rpx 40rpx;
+.mc-progress-label { display: block; margin-top: 10rpx; font-size: 21rpx; color: #8b7b70; }
-  gap: 20rpx;
+.mc-bottom { display: flex; justify-content: space-between; gap: 20rpx; margin-top: 22rpx; }
-}
+.mc-date-item { min-width: 0; display: flex; flex-direction: column; gap: 8rpx; }
-
+.mc-date-item--end { text-align: right; }
-.empty-icon {
+.mc-date-label { font-size: 21rpx; color: #8b817b; line-height: 1.6; }
-  font-size: 80rpx;
+.mc-date-value { font-size: 24rpx; color: #6f655e; font-variant-numeric: tabular-nums; }
-}
+.mc-actions { display: flex; gap: 16rpx; margin-top: 26rpx; }
-
+.mc-renew, .mc-book { flex: 1; margin: 0; padding: 0 24rpx; height: 72rpx; line-height: 72rpx; border: none; border-radius: 999rpx; font-size: 25rpx; font-weight: 400; &::after { border: none; } }
-.empty-title {
+.mc-renew { background: #f3eee8; color: #8b7160; }
-  font-size: 32rpx;
+.mc-book { background: #6b8276; color: #fff; }
-  font-weight: 600;
+.mc--inactive { background: #f4f1ed; border-color: #eee8e3; .mc-name { font-size: 27rpx; font-weight: 400; color: #786d64; } }
-  color: #333;
+.mc-history-bottom { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; margin-top: 22rpx; }
-}
+.mc-history-info { display: flex; flex-direction: column; gap: 4rpx; }
-
+.mc-renew--inactive { flex: none; flex-shrink: 0; height: 64rpx; line-height: 64rpx; background: #fffaf5; font-size: 23rpx; }
-.empty-sub {
+.purchase-dock { flex-shrink: 0; padding: 20rpx 32rpx calc(20rpx + env(safe-area-inset-bottom)); border-top: 1rpx solid #eee8e3; background: #fbf9f6; }
-  font-size: 26rpx;
+.purchase-btn { display: block; width: 100%; margin: 0; padding: 0; height: 84rpx; line-height: 84rpx; border: none; border-radius: 999rpx; background: #6b8276; color: #fff; font-size: 28rpx; font-weight: 400; &::after { border: none; } }
-  color: #999;
+.scroll-bottom-spacer { height: 20rpx; }
 }
 .empty-btn {
  margin-top: 12rpx;
  padding: 22rpx 60rpx;
  border-radius: 44rpx;
  background: $primary-dark;
  box-shadow: 0 4rpx 16rpx rgba(201, 168, 124, 0.35);
 }
 .empty-btn-text {
  font-size: 30rpx;
  color: #fff;
  font-weight: 600;
 }
 /* ── List ────────────────────────────────────────────── */
 .list {
  padding: 24rpx 24rpx 0;
 }
 /* ── Group section ───────────────────────────────────── */
 .group-section {
  margin-bottom: 8rpx;
 }
 .group-header {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 10rpx;
  padding: 8rpx 4rpx 14rpx;
 }
 .group-dot {
  width: 12rpx;
  height: 12rpx;
  border-radius: 50%;
  flex-shrink: 0;
  &--active   { background: #4caf50; }
  &--inactive { background: #bbb; }
 }
 .group-title {
  font-size: 26rpx;
  color: #555;
  font-weight: 600;
  flex: 1;
 }
 .group-count {
  font-size: 22rpx;
  color: #bbb;
 }
 /* ── Card item ───────────────────────────────────────── */
 .card-item {
  background: #fff;
  border-radius: 20rpx;
  overflow: hidden;
  margin-bottom: 16rpx;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.07);
  display: flex;
  flex-direction: column;
  &--inactive {
    opacity: 0.72;
  }
 }
 /* Colored left border strip */
 .card-strip {
  height: 6rpx;
  &--times    { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
  &--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
  &--trial    { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
  &--inactive { background: #ccc; }
 }
 /* Card header gradient area */
 .card-header {
  padding: 22rpx 28rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  &--times    { background: linear-gradient(90deg, #1a1a2e, #2d2d5e); }
  &--duration { background: linear-gradient(90deg, #6c3483, #9b59b6); }
  &--trial    { background: linear-gradient(90deg, #5a7a8a, $primary-dark); }
  &--inactive { background: #888; }
 }
 .card-header-left {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
 }
 .card-name {
  font-size: 32rpx;
  font-weight: 700;
  color: #fff;
  &--dim { color: #ddd; }
 }
 .card-type-badge {
  align-self: flex-start;
  padding: 4rpx 14rpx;
  border-radius: 12rpx;
  background: rgba(255, 255, 255, 0.15);
  border: 1rpx solid rgba(255, 255, 255, 0.25);
  &--dim {
    background: rgba(255, 255, 255, 0.08);
  }
 }
 .card-type-badge-text {
  font-size: 20rpx;
  color: rgba(255, 255, 255, 0.85);
  font-weight: 500;
 }
 /* Status badge */
 .status-badge {
  padding: 8rpx 20rpx;
  border-radius: 20rpx;
  border: 1rpx solid rgba(255, 255, 255, 0.35);
  flex-shrink: 0;
  &--active  { background: rgba(76, 175, 80, 0.3); }
  &--expired { background: rgba(0, 0, 0, 0.2); }
  &--used    { background: rgba(0, 0, 0, 0.2); }
 }
 .status-badge-text {
  font-size: 22rpx;
  color: #fff;
  font-weight: 600;
 }
 /* Card body */
 .card-body {
  padding: 20rpx 28rpx 24rpx;
  display: flex;
  flex-direction: column;
  gap: 10rpx;
 }
 .highlight-row {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 4rpx;
 }
 .highlight-label {
  font-size: 26rpx;
  color: #999;
 }
 .highlight-number {
  font-size: 44rpx;
  font-weight: 800;
  color: $primary-dark;
  line-height: 1;
 }
 .highlight-unit {
  font-size: 22rpx;
  color: $primary-dark;
  font-weight: 500;
 }
 .info-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
 }
 .info-label {
  font-size: 26rpx;
  color: #999;
 }
 .info-value {
  font-size: 26rpx;
  color: #333;
  font-weight: 500;
 }
 /* ── Progress bar ────────────────────────────────────── */
 .progress-wrap {
  display: flex;
  flex-direction: column;
  gap: 8rpx;
  margin-bottom: 6rpx;
 }
 .progress-bar {
  height: 8rpx;
  background: #f0f0f0;
  border-radius: 4rpx;
  overflow: hidden;
 }
 .progress-fill {
  height: 100%;
  background: linear-gradient(90deg, $primary-dark, $primary-color);
  border-radius: 4rpx;
  transition: width 0.4s ease;
 }
 .progress-label {
  font-size: 22rpx;
  color: #bbb;
  text-align: right;
 }
 /* ── FAB ─────────────────────────────────────────────── */
 .fab {
  position: fixed;
  bottom: calc(32rpx + env(safe-area-inset-bottom));
  right: 32rpx;
  background: #1a1a2e;
  border-radius: 44rpx;
  padding: 22rpx 36rpx;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.2);
  z-index: 100;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8rpx;
  &:active {
    opacity: 0.85;
  }
 }
 .fab-icon {
  font-size: 36rpx;
  color: $primary-dark;
  font-weight: 300;
  line-height: 1;
 }
 .fab-text {
  font-size: 28rpx;
  font-weight: 700;
  color: $primary-dark;
  letter-spacing: 1rpx;
 }
 /* ── Spacer ──────────────────────────────────────────── */
 .scroll-bottom-spacer {
  height: 120rpx;
 }
 </style>
--- a/packages/app/src/pages/profile/teaching-schedule.vue
+++ b/packages/app/src/pages/profile/teaching-schedule.vue
@@ -0,0 +1,249 @@
 <template>
  <view class="schedule-page" :style="{ paddingTop: navBarHeight }">
    <CustomNavBar title="我的课表" show-back />
    <view class="calendar">
      <view class="calendar__heading">
        <picker mode="date" :value="selectedDate" @change="handlePickerChange">
          <view class="calendar__month">{{ monthLabel }}<text class="calendar__chevron">⌄</text></view>
        </picker>
        <button v-if="!isToday(selectedDate)" class="text-button" @tap="selectDate(formatDate(new Date()))">回到今天</button>
        <text v-else class="calendar__today">今天</text>
      </view>
      <view class="week-navigation">
        <button class="week-arrow" aria-label="上一周" @tap="shiftWeek(-7)">‹</button>
        <text class="week-navigation__label">{{ weekLabel }}</text>
        <button class="week-arrow" aria-label="下一周" @tap="shiftWeek(7)">›</button>
      </view>
      <view class="week">
        <button v-for="day in weekDays" :key="day.date" class="day"
          :class="{ 'day--selected': day.date === selectedDate, 'day--today': isToday(day.date) }"
          :aria-label="`${day.date} ${day.label}${day.date === selectedDate ? '，已选中' : ''}`"
          @tap="selectDate(day.date)">
          <text class="day__label">{{ day.label }}</text>
          <text class="day__number">{{ day.number }}</text>
          <view class="day__dot" />
        </button>
      </view>
    </view>
    <view class="agenda-heading">
      <text class="agenda-heading__date">{{ dateLabel }}</text>
      <text class="agenda-heading__count">{{ loading ? '正在加载' : error ? '加载失败' : `${slots.length} 节课 · ${studentCount} 人次` }}</text>
    </view>
    <scroll-view class="schedule-scroll" scroll-y refresher-enabled :refresher-triggered="refreshing"
      :scroll-top="scrollTop" @scroll="handleScroll" @refresherrefresh="handleRefresh">
      <view v-if="loading" class="skeleton" aria-label="正在加载课表">
        <view v-for="i in 3" :key="i" class="skeleton__row"><view class="skeleton__time" /><view class="skeleton__body" /></view>
      </view>
      <view v-else-if="error" class="empty">
        <text class="empty__title">课表暂时未能加载</text>
        <text class="empty__description">{{ error }}</text>
        <button class="outline-button" @tap="loadSchedule(selectedDate)">重新加载</button>
      </view>
      <view v-else-if="!loggedIn || !isAdmin" class="empty">
        <text class="empty__title">{{ loggedIn ? '仅管理员可查看课表' : '请先登录' }}</text>
        <text class="empty__description">返回「我的」查看账号信息</text>
      </view>
      <view v-else-if="slots.length === 0" class="empty">
        <view class="empty__line" />
        <text class="empty__title">当天暂无预约课程</text>
        <text class="empty__description">选择其他日期，查看授课安排</text>
        <button v-if="!isToday(selectedDate)" class="outline-button" @tap="selectDate(formatDate(new Date()))">查看今天</button>
      </view>
      <view v-else class="agenda">
        <view v-for="slot in slots" :key="slot.slotId" class="session">
          <view class="session__time">
            <text class="session__start">{{ slot.startTime.slice(0, 5) }}</text>
            <text class="session__end">{{ slot.endTime.slice(0, 5) }} 结束</text>
          </view>
          <view class="session__roster">
            <view class="session__heading"><text>预约学员</text><text>{{ slot.students.length }} 人</text></view>
            <view v-for="student in slot.students" :key="student.bookingId" class="student">
              <view class="student__headline">
                <text class="student__name">{{ student.nickname || '未命名学员' }}</text>
                <text class="student__status" :class="`student__status--${student.status.toLowerCase()}`">{{ statusLabel(student.status) }}</text>
              </view>
              <button v-if="student.phone" class="student__contact" :aria-label="`联系${student.nickname || '学员'}`" @tap="contactStudent(student.phone)">
                <text>{{ formatPhone(student.phone) }}</text><text class="student__contact-label">联系 ↗</text>
              </button>
              <text v-else class="student__no-phone">未留手机号</text>
            </view>
          </view>
        </view>
        <text class="agenda__end">当天课程已全部显示</text>
      </view>
    </scroll-view>
  </view>
 </template>
 <script setup lang="ts">
 import { computed, nextTick, ref } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import { storeToRefs } from 'pinia'
 import { BookingStatus, type TeachingScheduleSlot } from '@mp-pilates/shared'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import { useBookingStore } from '../../stores/booking'
 import { useUserStore } from '../../stores/user'
 import { formatDate, getWeekdayLabel, isToday } from '../../utils/format'
 import { getSystemLayout } from '../../utils/system'
 import { getErrorMessage } from '../../utils/auth'
 const bookingStore = useBookingStore()
 const { loggedIn, isAdmin } = storeToRefs(useUserStore())
 const navBarHeight = `${getSystemLayout().navBarHeight}px`
 const selectedDate = ref(formatDate(new Date()))
 // Keep the rendered date and request result paired when dates are changed quickly.
 const slots = ref<TeachingScheduleSlot[]>([])
 const loading = ref(false)
 const refreshing = ref(false)
 const error = ref('')
 const scrollTop = ref(0)
 let currentScrollTop = 0
 let requestId = 0
 function parseDate(value: string) {
  const [year, month, day] = value.split('-').map(Number)
  return new Date(year, month - 1, day)
 }
 const monthLabel = computed(() => `${selectedDate.value.slice(0, 4)}年 ${Number(selectedDate.value.slice(5, 7))}月`)
 const dateLabel = computed(() => `${isToday(selectedDate.value) ? '今天 · ' : ''}${Number(selectedDate.value.slice(5, 7))}月${Number(selectedDate.value.slice(8, 10))}日`)
 const studentCount = computed(() => slots.value.reduce((sum, slot) => sum + slot.students.length, 0))
 const weekDays = computed(() => {
  const start = parseDate(selectedDate.value)
  start.setDate(start.getDate() - (start.getDay() + 6) % 7)
  return Array.from({ length: 7 }, (_, index) => {
    const day = new Date(start)
    day.setDate(start.getDate() + index)
    const date = formatDate(day)
    return { date, number: day.getDate(), label: getWeekdayLabel(date).replace('周', '').replace('星期', '') }
  })
 })
 const weekLabel = computed(() => {
  const first = parseDate(weekDays.value[0].date)
  const last = parseDate(weekDays.value[6].date)
  return `${first.getMonth() + 1}月${first.getDate()}日 — ${last.getMonth() + 1}月${last.getDate()}日`
 })
 onShow(() => { loadSchedule(selectedDate.value) })
 function handlePickerChange(event: { detail: { value: string } }) {
  selectDate(event.detail.value)
 }
 function shiftWeek(days: number) {
  const date = parseDate(selectedDate.value)
  date.setDate(date.getDate() + days)
  selectDate(formatDate(date))
 }
 function handleScroll(event: { detail: { scrollTop: number } }) {
  currentScrollTop = event.detail.scrollTop
 }
 async function selectDate(date: string) {
  if (selectedDate.value === date) return
  selectedDate.value = date
  refreshing.value = false
  scrollTop.value = currentScrollTop
  await nextTick()
  scrollTop.value = 0
  loadSchedule(date)
 }
 async function handleRefresh() {
  if (refreshing.value) return
  refreshing.value = true
  try { await loadSchedule(selectedDate.value) }
  finally { refreshing.value = false }
 }
 async function loadSchedule(date: string) {
  const id = ++requestId
  error.value = ''
  slots.value = []
  if (!loggedIn.value || !isAdmin.value) { loading.value = false; return }
  loading.value = true
  try {
    const result = await bookingStore.fetchTeachingSchedule(date)
    if (id === requestId) slots.value = [...result].sort((a, b) => a.startTime.localeCompare(b.startTime))
  } catch (err: unknown) {
    if (id === requestId) error.value = getErrorMessage(err, '请检查网络后重试')
  } finally {
    if (id === requestId) loading.value = false
  }
 }
 function formatPhone(phone: string) {
  return /^\d{11}$/.test(phone) ? `${phone.slice(0, 3)} ${phone.slice(3, 7)} ${phone.slice(7)}` : phone
 }
 function contactStudent(phone: string) {
  uni.makePhoneCall({ phoneNumber: phone })
 }
 const STATUS_LABELS: Record<BookingStatus, string> = {
  [BookingStatus.PENDING_CONFIRMATION]: '待确认',
  [BookingStatus.CONFIRMED]: '已确认',
  [BookingStatus.CANCELLED]: '已取消',
  [BookingStatus.COMPLETED]: '已完成',
  [BookingStatus.NO_SHOW]: '未出席',
 }
 function statusLabel(status: BookingStatus) { return STATUS_LABELS[status] ?? status }
 </script>
 <style lang="scss" scoped>
 .schedule-page {
  height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fbf9f6;
  color: #514943;
 }
 button { margin: 0; padding: 0; background: transparent; font-weight: 400; border-radius: 0; &::after { border: none; } }
 .calendar { flex-shrink: 0; padding: 22rpx 32rpx 20rpx; background: #fff; }
 .calendar__heading { display: flex; align-items: center; justify-content: space-between; min-height: 76rpx; }
 .calendar__month { padding: 16rpx 0; font-size: 36rpx; font-family: 'Songti SC', 'STSong', serif; }
 .calendar__chevron { margin-left: 16rpx; font-size: 26rpx; color: #81776f; }
 .text-button, .calendar__today { font-size: 24rpx; color: #526e62; }
 .text-button { line-height: 76rpx; padding-left: 24rpx; }
 .week-navigation { display: flex; align-items: center; justify-content: space-between; margin: 0 -12rpx 8rpx; }
 .week-navigation__label { font-size: 23rpx; color: #81776f; }
 .week-arrow { width: 80rpx; height: 76rpx; line-height: 70rpx; font-size: 40rpx; color: #70665e; }
 .week { display: flex; justify-content: space-between; gap: 6rpx; }
 .day { flex: 1; min-width: 0; height: 120rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1; border-radius: 40rpx; color: #514943; }
 .day__label { font-size: 22rpx; color: #81776f; }
 .day__number { margin-top: 16rpx; font-size: 32rpx; font-variant-numeric: tabular-nums; }
 .day__dot { margin-top: 10rpx; height: 6rpx; width: 6rpx; border-radius: 50%; background: transparent; }
 .day--today .day__dot { background: #526e62; }
 .day--selected { background: #526e62; color: #fff; .day__label { color: #fff; } .day__dot { background: transparent; } }
 .day--selected.day--today .day__dot { background: #fff; }
 .agenda-heading { flex-shrink: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16rpx; padding: 32rpx; border-top: 1rpx solid #eee9e2; }
 .agenda-heading__date { font-size: 28rpx; font-weight: 500; }
 .agenda-heading__count { font-size: 23rpx; color: #81776f; }
 .schedule-scroll { flex: 1; min-height: 0; height: 0; }
 .agenda { padding: 0 32rpx calc(40rpx + env(safe-area-inset-bottom)); }
 .session { margin-bottom: 24rpx; padding: 0 28rpx; overflow: hidden; background: #fff; border: 1rpx solid #deded5; border-radius: 20rpx; }
 .session__time { display: flex; align-items: baseline; gap: 20rpx; margin: 0 -28rpx; padding: 24rpx 28rpx; background: #eef2ed; border-bottom: 1rpx solid #dde4da; }
 .session__start { display: block; font-size: 36rpx; font-variant-numeric: tabular-nums; font-weight: 500; }
 .session__end { font-size: 24rpx; color: #687367; }
 .session__roster { min-width: 0; }
 .session__heading { display: flex; justify-content: space-between; padding: 24rpx 0 4rpx; font-size: 23rpx; color: #766d64; }
 .student { padding: 24rpx 0 16rpx; border-bottom: 1rpx solid #e8e2da; }
 .student:last-child { border-bottom: none; }
 .student__headline { display: flex; align-items: baseline; justify-content: space-between; gap: 12rpx; }
 .student__name { min-width: 0; font-size: 30rpx; font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; word-break: break-all; }
 .student__status { flex-shrink: 0; padding: 6rpx 12rpx; border-radius: 6rpx; background: #f2f0ec; font-size: 22rpx; line-height: 1.4; color: #766d64; }
 .student__status--confirmed { background: #edf3ed; color: #526e62; }
 .student__status--pending_confirmation { background: #f8f0e3; color: #956b37; }
 .student__status--no_show { background: #f8eeea; color: #a06456; }
 .student__contact { width: 100%; min-height: 76rpx; line-height: 1.4; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 8rpx; text-align: left; font-size: 23rpx; color: #81776f; font-variant-numeric: tabular-nums; }
 .student__contact-label { color: #526e62; font-size: 22rpx; }
 .student__no-phone { display: block; padding: 18rpx 0; font-size: 23rpx; color: #81776f; }
 .agenda__end { display: block; padding: 12rpx 0 24rpx; text-align: center; color: #81776f; font-size: 21rpx; }
 .empty { padding: 100rpx 48rpx 48rpx; display: flex; flex-direction: column; align-items: center; text-align: center; }
 .empty__line { height: 48rpx; width: 1rpx; background: #b4c1b7; margin-bottom: 32rpx; }
 .empty__title { font-family: 'Songti SC', 'STSong', serif; font-size: 34rpx; }
 .empty__description { margin-top: 20rpx; font-size: 25rpx; color: #81776f; line-height: 1.7; }
 .outline-button { margin-top: 36rpx; padding: 0 36rpx; min-height: 80rpx; line-height: 80rpx; border: 1rpx solid #bcc7bf; border-radius: 8rpx; color: #526e62; font-size: 25rpx; }
 .skeleton { padding: 12rpx 32rpx; }
 .skeleton__row { display: flex; gap: 24rpx; margin-bottom: 40rpx; }
 .skeleton__time { width: 116rpx; height: 40rpx; background: #eae6df; border-radius: 4rpx; }
 .skeleton__body { flex: 1; height: 180rpx; background: #eeebe5; border-radius: 4rpx; }
 button:active { opacity: .7; }
 </style>
--- a/packages/app/src/pages/teacher/detail.vue
+++ b/packages/app/src/pages/teacher/detail.vue
@@ -0,0 +1,491 @@
 <template>
  <view class="teacher-detail-page">
    <CustomNavBar title="教练详情" show-back />
    <scroll-view class="detail-scroll" scroll-y :style="{ height: scrollHeight }">
      <view class="nav-spacer" :style="{ height: navBarHeight }" />
      <view class="hero-section">
        <image class="hero-image" :src="teacher.cover" mode="widthFix" />
        <view class="hero-overlay" />
        <view class="hero-content">
          <view class="hero-badges">
            <text v-for="item in teacher.badges" :key="item" class="hero-badge">{{ item }}</text>
          </view>
          <text class="hero-name">{{ teacher.name }}</text>
          <text class="hero-title">{{ teacher.title }}</text>
        </view>
      </view>
      <view class="content-wrap">
        <view class="summary-card">
          <view class="summary-head">
            <view>
              <text class="summary-eyebrow">Private Pilates Coach</text>
              <text class="summary-title">为你定制更细腻的训练节奏</text>
            </view>
          </view>
          <view class="specialty-row">
            <text v-for="item in teacher.specialties" :key="item" class="specialty-pill">{{ item }}</text>
          </view>
          <text class="summary-intro">{{ teacher.intro }}</text>
          <view class="stats-grid">
            <view v-for="item in teacher.stats" :key="item.label" class="stat-item">
              <text class="stat-value">{{ item.value }}</text>
              <text class="stat-label">{{ item.label }}</text>
            </view>
          </view>
        </view>
        <view class="detail-card">
          <text class="card-title">教练介绍</text>
          <text class="card-text card-text--intro">
            我是 Iris，一名注重体态、控制与身体感受的普拉提教练。
          </text>
          <text class="card-text">
            我希望带你在稳定、安心的节奏里，找回核心力量、挺拔线条和更轻松的身体状态。
          </text>
        </view>
        <view class="detail-card">
          <text class="card-title">认证背景</text>
          <view v-for="item in teacher.certifications" :key="item" class="list-row">
            <view class="list-dot" />
            <text class="list-text">{{ item }}</text>
          </view>
        </view>
        <view class="detail-card">
          <text class="card-title">授课重点</text>
          <view class="focus-grid">
            <view v-for="item in teacher.teachingFocus" :key="item.title" class="focus-item">
              <text class="focus-title">{{ item.title }}</text>
              <text class="focus-desc">{{ item.desc }}</text>
            </view>
          </view>
        </view>
        <view class="detail-card cta-card">
          <text class="card-title">适合这样的你</text>
          <view class="fit-grid">
            <view class="fit-pill">久坐肩颈紧张</view>
            <view class="fit-pill">体态调整</view>
            <view class="fit-pill">产后恢复</view>
            <view class="fit-pill">塑形紧致</view>
            <view class="fit-pill">核心无力</view>
            <view class="fit-pill">运动入门</view>
          </view>
          <text class="card-text">
            如果你想改善体态、缓解肩颈腰背不适，提升核心稳定、线条感与身体控制力，这里会是一个很好的开始。
          </text>
          <view class="cta-inline" @tap="goToBooking">
            <text class="cta-inline-text">去约 Iris 的课程</text>
            <text class="cta-inline-arrow">›</text>
          </view>
        </view>
        <view class="bottom-space" />
      </view>
    </scroll-view>
    <view class="bottom-bar">
      <view class="bottom-note">
        <text class="bottom-note-title">1 对 1 私教课</text>
        <text class="bottom-note-sub">60 分钟 · 进入约课页选择时段</text>
      </view>
      <view class="booking-btn" @tap="goToBooking">
        <text class="booking-btn-text">立即预约</text>
      </view>
    </view>
  </view>
 </template>
 <script setup lang="ts">
 import { ref } from 'vue'
 import { onLoad, onShareAppMessage, onShareTimeline } from '@dcloudio/uni-app'
 import CustomNavBar from '../../components/CustomNavBar.vue'
 import { irisProfile } from '../../utils/teacher'
 import { getSystemLayout } from '../../utils/system'
 const teacher = irisProfile
 const navBarHeight = ref('64px')
 const scrollHeight = ref('500px')
 onShareAppMessage(() => {
  return {
    title: `${teacher.name}｜${teacher.title}`,
    path: `/pages/teacher/detail?id=${teacher.id}`,
    imageUrl: teacher.cover,
  }
 })
 onShareTimeline(() => {
  return {
    title: `${teacher.name}｜${teacher.title}`,
    query: `id=${teacher.id}`,
    imageUrl: teacher.cover,
  }
 })
 onLoad(() => {
  updateLayout()
 })
 function updateLayout() {
  const { navBarHeight: navBarPx } = getSystemLayout()
  const { windowHeight } = uni.getWindowInfo()
  navBarHeight.value = `${navBarPx}px`
  scrollHeight.value = `${windowHeight}px`
 }
 function goToBooking() {
  uni.switchTab({ url: '/pages/booking/index' })
 }
 </script>
 <style lang="scss" scoped>
 .teacher-detail-page {
  height: 100vh;
  background: #f7f2ee;
  box-sizing: border-box;
 }
 .nav-spacer {
  width: 100%;
  flex-shrink: 0;
 }
 .hero-section {
  position: relative;
  height: 580rpx;
  overflow: hidden;
 }
 .hero-image {
  width: 100%;
  display: block;
 }
 .hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(33, 24, 22, 0.08) 0%, rgba(33, 24, 22, 0.08) 34%, rgba(33, 24, 22, 0.64) 100%),
    radial-gradient(circle at top right, rgba(255, 228, 208, 0.26), transparent 28%);
 }
 .hero-content {
  position: absolute;
  left: 32rpx;
  right: 32rpx;
  bottom: 92rpx;
  z-index: 1;
 }
 .hero-badges {
  display: flex;
  gap: 10rpx;
  margin-bottom: 18rpx;
 }
 .hero-badge {
  height: 42rpx;
  padding: 0 16rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  background: rgba(255, 255, 255, 0.18);
  border: 1rpx solid rgba(255, 255, 255, 0.24);
  color: #fff8f3;
  font-size: 20rpx;
  backdrop-filter: blur(10rpx);
 }
 .hero-name {
  display: block;
  font-size: 56rpx;
  font-weight: 700;
  color: #ffffff;
  line-height: 1.05;
  margin-bottom: 10rpx;
 }
 .hero-title {
  font-size: 26rpx;
  color: rgba(255, 247, 241, 0.88);
 }
 .detail-scroll {
  width: 100%;
 }
 .content-wrap {
  position: relative;
  margin-top: -8rpx;
  padding: 0 24rpx;
 }
 .summary-card,
 .detail-card {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 28rpx;
  box-shadow: 0 16rpx 36rpx rgba(120, 91, 79, 0.08);
  backdrop-filter: blur(12rpx);
 }
 .summary-card {
  padding: 28rpx;
  margin-bottom: 18rpx;
 }
 .summary-head {
  margin-bottom: 18rpx;
 }
 .summary-eyebrow {
  display: block;
  font-size: 20rpx;
  color: #c09a89;
  letter-spacing: 3rpx;
  text-transform: uppercase;
  margin-bottom: 8rpx;
 }
 .summary-title {
  font-size: 34rpx;
  line-height: 1.35;
  font-weight: 700;
  color: #2f2622;
 }
 .specialty-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
  margin-bottom: 18rpx;
 }
 .specialty-pill {
  padding: 10rpx 18rpx;
  border-radius: 999rpx;
  background: rgba(92, 126, 151, 0.12);
  color: #56778a;
  font-size: 22rpx;
  font-weight: 600;
 }
 .summary-intro,
 .card-text,
 .list-text {
  font-size: 25rpx;
  line-height: 1.78;
  color: #5f534c;
 }
 .stats-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14rpx;
  margin-top: 24rpx;
 }
 .stat-item {
  padding: 20rpx 16rpx;
  border-radius: 20rpx;
  background: linear-gradient(180deg, #fff8f4 0%, #f7f1ec 100%);
  text-align: center;
 }
 .stat-value {
  display: block;
  font-size: 24rpx;
  line-height: 1.45;
  font-weight: 700;
  color: #3f3029;
  margin-bottom: 8rpx;
 }
 .stat-label {
  font-size: 20rpx;
  color: #9c8579;
 }
 .detail-card {
  padding: 28rpx;
  margin-bottom: 18rpx;
 }
 .card-title {
  display: block;
  font-size: 30rpx;
  font-weight: 700;
  color: #342925;
  margin-bottom: 18rpx;
 }
 .card-text + .card-text {
  margin-top: 16rpx;
 }
 .card-text--intro {
  font-size: 28rpx;
  line-height: 1.7;
  font-weight: 600;
  color: #43352f;
 }
 .list-row {
  display: flex;
  align-items: flex-start;
  gap: 14rpx;
 }
 .list-row + .list-row {
  margin-top: 18rpx;
 }
 .list-dot {
  width: 14rpx;
  height: 14rpx;
  border-radius: 50%;
  margin-top: 14rpx;
  flex-shrink: 0;
  background: linear-gradient(135deg, #ff8b69 0%, #ff593f 100%);
 }
 .focus-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14rpx;
 }
 .focus-item {
  min-height: 164rpx;
  border-radius: 22rpx;
  padding: 22rpx 18rpx;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  background: linear-gradient(135deg, #fff8f5 0%, #f6eee9 100%);
 }
 .focus-title {
  font-size: 24rpx;
  font-weight: 600;
  color: #5c4a42;
 }
 .focus-desc {
  margin-top: 10rpx;
  font-size: 21rpx;
  line-height: 1.65;
  color: #8a7569;
 }
 .cta-card {
  background: linear-gradient(135deg, #fff6f1 0%, #fffdfc 100%);
 }
 .fit-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 12rpx;
  margin-bottom: 18rpx;
 }
 .fit-pill {
  padding: 10rpx 18rpx;
  border-radius: 999rpx;
  background: rgba(255, 126, 92, 0.12);
  color: #b3573f;
  font-size: 22rpx;
  font-weight: 600;
 }
 .cta-inline {
  margin-top: 22rpx;
  height: 88rpx;
  border-radius: 999rpx;
  padding: 0 28rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: linear-gradient(135deg, #ff7f5e 0%, #ff543c 100%);
  box-shadow: 0 16rpx 28rpx rgba(255, 95, 73, 0.22);
 }
 .cta-inline-text,
 .cta-inline-arrow {
  color: #ffffff;
  font-weight: 700;
 }
 .cta-inline-text {
  font-size: 28rpx;
 }
 .cta-inline-arrow {
  font-size: 38rpx;
  line-height: 1;
 }
 .bottom-space {
  height: 160rpx;
 }
 .bottom-bar {
  position: fixed;
  left: 24rpx;
  right: 24rpx;
  bottom: 24rpx;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 18rpx;
  padding: 18rpx;
  border-radius: 28rpx;
  background: rgba(35, 29, 27, 0.9);
  backdrop-filter: blur(18rpx);
  box-shadow: 0 20rpx 48rpx rgba(36, 28, 26, 0.18);
 }
 .bottom-note {
  flex: 1;
  min-width: 0;
 }
 .bottom-note-title {
  display: block;
  font-size: 26rpx;
  font-weight: 700;
  color: #fffaf6;
  margin-bottom: 6rpx;
 }
 .bottom-note-sub {
  font-size: 20rpx;
  color: rgba(255, 244, 236, 0.72);
 }
 .booking-btn {
  width: 224rpx;
  height: 88rpx;
  border-radius: 999rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ff815e 0%, #ff5136 100%);
 }
 .booking-btn-text {
  font-size: 28rpx;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 1rpx;
 }
 </style>
--- a/packages/app/src/stores/admin.ts
+++ b/packages/app/src/stores/admin.ts
@@ -2,8 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import { get, post, put, del } from '../utils/request'
 import type {
-  WeekTemplate,
+  TeachingAnalytics,
  WeekTemplateInput,
  CardType,
  CreateCardTypeDto,
  UpdateCardTypeDto,
@@ -15,41 +14,76 @@ import type {
  PaginatedData,
  ScheduleSlotPreview,
  PublishDaySlotsDto,
  FlashSaleAdminItem,
  CreateFlashSaleDto,
  UpdateFlashSaleDto,
  CreateStudioUploadCredentialDto,
  StudioUploadCredential,
  AdminMemberSummary,
  AdminMemberDetail,
  LessonSupplementRecord,
  CreateLessonSupplementDto,
  UpdateAdminMemberProfileDto,
  AdminArrangeBookingDto,
  MembershipWithCardType,
  BookingWithDetails,
 } from '@mp-pilates/shared'
 interface LegacyPaginatedData<T> {
  readonly data: readonly T[]
  readonly total: number
  readonly page: number
  readonly limit: number
 }
 function normalizePaginatedData<T>(
  result: PaginatedData<T> | LegacyPaginatedData<T>,
 ): PaginatedData<T> {
  if ('items' in result) {
    return {
      items: [...result.items],
      total: result.total,
      page: result.page,
      limit: result.limit,
    }
  }
  return {
    items: [...result.data],
    total: result.total,
    page: result.page,
    limit: result.limit,
  }
 }
 export interface AdminStats {
  todayBookings: number
  totalOrders: number
  totalBookings: number
 }
-export interface MemberSummary {
+export type MemberSummary = AdminMemberSummary
 export interface UserMembership {
  userId: string
-  openid: string
+  membership: {
-  nickname: string
+    id: string
-  phone: string | null
+    cardTypeId: string
-  avatarUrl: string | null
+    remainingTimes: number | null
-  totalBookings: number
+    startDate: string
-  completedBookings: number
+    expireDate: string
-  cancelledBookings: number
+    status: string
    cardType: {
      id: string
      name: string
      type: string
      totalTimes: number | null
      durationDays: number
    }
  } | null
 }
 export const useAdminStore = defineStore('admin', () => {
  // ── Week templates ───────────────────────────────────────────────
  const weekTemplates = ref<WeekTemplate[]>([])
  async function fetchWeekTemplates(): Promise<WeekTemplate[]> {
    const data = await get<WeekTemplate[]>('/admin/week-template')
    weekTemplates.value = data
    return data
  }
  async function saveWeekTemplates(templates: WeekTemplateInput[]): Promise<WeekTemplate[]> {
    const data = await put<WeekTemplate[]>('/admin/week-template', { templates })
    weekTemplates.value = data
    return data
  }
  // ── Card types ───────────────────────────────────────────────────
  const cardTypes = ref<CardType[]>([])
@@ -60,13 +94,13 @@ export const useAdminStore = defineStore('admin', () => {
  }
  async function createCardType(dto: CreateCardTypeDto): Promise<CardType> {
-    const data = await post<CardType>('/admin/card-types', dto)
+    const data = await post<CardType>('/admin/card-types', dto as unknown as Record<string, unknown>)
    await fetchCardTypes()
    return data
  }
  async function updateCardType(id: string, dto: UpdateCardTypeDto): Promise<CardType> {
-    const data = await put<CardType>(`/admin/card-types/${id}`, dto)
+    const data = await put<CardType>(`/admin/card-types/${id}`, dto as unknown as Record<string, unknown>)
    await fetchCardTypes()
    return data
  }
@@ -87,18 +121,31 @@ export const useAdminStore = defineStore('admin', () => {
  }
  async function saveStudioConfig(dto: UpdateStudioConfigDto): Promise<StudioConfig> {
-    const data = await put<StudioConfig>('/admin/studio/info', dto)
+    const data = await put<StudioConfig>('/admin/studio/info', dto as unknown as Record<string, unknown>)
    studioConfig.value = data
    return data
  }
  async function createStudioUploadCredential(
    dto: CreateStudioUploadCredentialDto,
  ): Promise<StudioUploadCredential> {
    return post<StudioUploadCredential>(
      '/admin/studio/upload-credentials',
      dto as unknown as Record<string, unknown>,
    )
  }
  // ── Orders ───────────────────────────────────────────────────────
  async function fetchAdminOrders(params: {
    page?: number
    limit?: number
    status?: string
  }): Promise<PaginatedData<OrderWithDetails>> {
-    return get<PaginatedData<OrderWithDetails>>('/admin/orders', params)
+    const result = await get<PaginatedData<OrderWithDetails> | LegacyPaginatedData<OrderWithDetails>>(
      '/admin/orders',
      params,
    )
    return normalizePaginatedData(result)
  }
  // ── Bookings ─────────────────────────────────────────────────────
@@ -125,13 +172,63 @@ export const useAdminStore = defineStore('admin', () => {
    return get<PaginatedData<MemberSummary>>('/admin/members', cleanParams)
  }
  async function getUserMembership(userId: string): Promise<UserMembership> {
    return get<UserMembership>(`/admin/members/${userId}/membership`)
  }
  async function fetchLessonSupplements(userId: string): Promise<LessonSupplementRecord[]> {
    return get<LessonSupplementRecord[]>(`/admin/members/${userId}/lesson-supplements`)
  }
  async function createLessonSupplement(userId: string, dto: CreateLessonSupplementDto): Promise<LessonSupplementRecord> {
    return post<LessonSupplementRecord>(`/admin/members/${userId}/lesson-supplements`, { ...dto })
  }
  async function revokeLessonSupplement(userId: string, id: string): Promise<void> {
    await post(`/admin/members/${userId}/lesson-supplements/${id}/revoke`)
  }
  async function fetchMemberDetail(userId: string): Promise<AdminMemberDetail> {
    return get<AdminMemberDetail>(`/admin/members/${userId}`)
  }
  async function updateMemberProfile(
    userId: string,
    dto: UpdateAdminMemberProfileDto,
  ): Promise<AdminMemberDetail> {
    return put<AdminMemberDetail>(`/admin/members/${userId}`, dto as unknown as Record<string, unknown>)
  }
  async function arrangeMemberBooking(dto: AdminArrangeBookingDto): Promise<BookingWithDetails> {
    return post<BookingWithDetails>('/admin/bookings', dto as unknown as Record<string, unknown>)
  }
  async function updateUserMembership(
    userId: string,
    dto: {
      membershipId?: string
      cardTypeId: string
      remainingTimes?: number | null
      startDate: string
      expireDate: string
    },
  ): Promise<MembershipWithCardType> {
    return put<MembershipWithCardType>(`/admin/members/${userId}/membership`, dto)
  }
  async function deleteUserMembership(userId: string, membershipId: string): Promise<void> {
    return del<void>(
      `/admin/members/${userId}/membership?membershipId=${encodeURIComponent(membershipId)}`,
    )
  }
  // ── Time slots ───────────────────────────────────────────────────
  async function fetchSlotsByDate(date: string): Promise<TimeSlot[]> {
    return get<TimeSlot[]>('/admin/time-slots', { date })
  }
  async function createManualSlot(dto: CreateManualSlotDto): Promise<TimeSlot> {
-    return post<TimeSlot>('/admin/time-slot/manual', dto)
+    return post<TimeSlot>('/admin/time-slot/manual', dto as unknown as Record<string, unknown>)
  }
  async function closeSlot(id: string): Promise<TimeSlot> {
@@ -149,7 +246,7 @@ export const useAdminStore = defineStore('admin', () => {
  async function fetchSchedulePreview(date: string): Promise<ScheduleSlotPreview[]> {
    scheduleLoading.value = true
    try {
-      const data = await get<ScheduleSlotPreview[]>('/admin/schedule/preview', { date })
+      const data = await previewScheduleByDate(date)
      schedulePreview.value = data
      return data
    } finally {
@@ -157,6 +254,10 @@ export const useAdminStore = defineStore('admin', () => {
    }
  }
  async function previewScheduleByDate(date: string): Promise<ScheduleSlotPreview[]> {
    return get<ScheduleSlotPreview[]>('/admin/schedule/preview', { date })
  }
  async function publishDaySlots(dto: PublishDaySlotsDto): Promise<void> {
    await post('/admin/schedule/publish', dto as unknown as Record<string, unknown>)
    await fetchSchedulePreview(dto.date)
@@ -167,16 +268,37 @@ export const useAdminStore = defineStore('admin', () => {
    return get<AdminStats>('/admin/stats')
  }
  // ── Flash sales ─────────────────────────────────────────────────
  async function fetchFlashSales(params?: {
    page?: number
    limit?: number
  }): Promise<PaginatedData<FlashSaleAdminItem>> {
    return get<PaginatedData<FlashSaleAdminItem>>('/admin/flash-sales', params as Record<string, unknown>)
  }
  async function createFlashSale(dto: CreateFlashSaleDto): Promise<FlashSaleAdminItem> {
    return post<FlashSaleAdminItem>('/admin/flash-sales', dto as unknown as Record<string, unknown>)
  }
  async function updateFlashSale(id: string, dto: UpdateFlashSaleDto): Promise<FlashSaleAdminItem> {
    return put<FlashSaleAdminItem>(`/admin/flash-sales/${id}`, dto as unknown as Record<string, unknown>)
  }
  async function deleteFlashSale(id: string): Promise<{ deleted: boolean }> {
    return del<{ deleted: boolean }>(`/admin/flash-sales/${id}`)
  }
  async function fetchTeachingAnalytics(month: string): Promise<TeachingAnalytics> {
    return get<TeachingAnalytics>('/admin/teaching-analytics', { month })
  }
  return {
    fetchTeachingAnalytics,
    // State
    weekTemplates,
    cardTypes,
    studioConfig,
    schedulePreview,
    scheduleLoading,
    // Week templates
    fetchWeekTemplates,
    saveWeekTemplates,
    // Card types
    fetchCardTypes,
    createCardType,
@@ -185,12 +307,22 @@ export const useAdminStore = defineStore('admin', () => {
    // Studio
    fetchStudioConfig,
    saveStudioConfig,
    createStudioUploadCredential,
    // Orders
    fetchAdminOrders,
    // Bookings
    fetchAdminBookings,
    // Members
    fetchMembers,
    fetchMemberDetail,
    fetchLessonSupplements,
    createLessonSupplement,
    revokeLessonSupplement,
    updateMemberProfile,
    arrangeMemberBooking,
    getUserMembership,
    updateUserMembership,
    deleteUserMembership,
    // Time slots
    fetchSlotsByDate,
    createManualSlot,
@@ -198,8 +330,14 @@ export const useAdminStore = defineStore('admin', () => {
    generateSlots,
    // Schedule
    fetchSchedulePreview,
    previewScheduleByDate,
    publishDaySlots,
    // Stats
    fetchDashboardStats,
    // Flash sales
    fetchFlashSales,
    createFlashSale,
    updateFlashSale,
    deleteFlashSale,
  }
 })
--- a/packages/app/src/stores/booking.ts
+++ b/packages/app/src/stores/booking.ts
@@ -6,6 +6,7 @@ import type {
  BookingWithUser,
  BookingStatusHistory,
  CreateBookingDto,
  TeachingScheduleSlot,
 } from '@mp-pilates/shared'
 import { get, post, put } from '../utils/request'
@@ -21,8 +22,10 @@ export const useBookingStore = defineStore('booking', () => {
  const slots = ref<readonly TimeSlotWithBookingStatus[]>([])
  const myBookings = ref<readonly BookingWithDetails[]>([])
  const upcomingBookings = ref<readonly BookingWithDetails[]>([])
  const teachingSchedule = ref<readonly TeachingScheduleSlot[]>([])
  const loadingSlots = ref(false)
  const loadingBookings = ref(false)
  const loadingTeachingSchedule = ref(false)
  async function fetchSlots(date: string) {
    loadingSlots.value = true
@@ -41,13 +44,27 @@ export const useBookingStore = defineStore('booking', () => {
    return result
  }
  /**
   * Replace a booking in `myBookings` by id. Preserves immutability: always
   * returns a new array reference so Vue's computed/watchers pick up the change.
   * If the booking isn't in the list (e.g. paginated out), leaves state untouched.
   */
  function replaceBooking(updated: BookingWithDetails) {
    const idx = myBookings.value.findIndex((b) => b.id === updated.id)
    if (idx === -1) return
    const next = myBookings.value.slice()
    next[idx] = updated
    myBookings.value = next
  }
  async function cancelBooking(bookingId: string) {
    const result = await put<BookingWithDetails>(`/booking/${bookingId}/cancel`)
    replaceBooking(result)
    return result
  }
-  async function fetchMyBookings(status?: string) {
+  async function fetchMyBookings(status?: string, opts: { silent?: boolean } = {}) {
-    loadingBookings.value = true
+    if (!opts.silent) loadingBookings.value = true
    try {
      const params: Record<string, unknown> = status ? { status } : {}
      const paginated = await get<ServerPaginatedResult<BookingWithDetails>>('/booking/my', params)
@@ -56,7 +73,7 @@ export const useBookingStore = defineStore('booking', () => {
      console.error('Fetch bookings failed:', err)
      myBookings.value = []
    } finally {
-      loadingBookings.value = false
+      if (!opts.silent) loadingBookings.value = false
    }
  }
@@ -70,6 +87,21 @@ export const useBookingStore = defineStore('booking', () => {
    }
  }
  async function fetchTeachingSchedule(date: string) {
    loadingTeachingSchedule.value = true
    try {
      const result = await get<TeachingScheduleSlot[]>('/admin/teaching-schedule', { date })
      teachingSchedule.value = Array.isArray(result) ? result : []
      return teachingSchedule.value
    } catch (err) {
      console.error('Fetch teaching schedule failed:', err)
      teachingSchedule.value = []
      throw err
    } finally {
      loadingTeachingSchedule.value = false
    }
  }
  // ─── Admin methods ──────────────────────────────────────────────────────
  async function fetchAllAdminBookings(
@@ -88,6 +120,7 @@ export const useBookingStore = defineStore('booking', () => {
    const result = await put<BookingWithDetails>(`/booking/${bookingId}/confirm`, {
      remark,
    })
    replaceBooking(result)
    return result
  }
@@ -95,6 +128,7 @@ export const useBookingStore = defineStore('booking', () => {
    const result = await put<BookingWithDetails>(`/booking/${bookingId}/complete`, {
      remark,
    })
    replaceBooking(result)
    return result
  }
@@ -102,6 +136,7 @@ export const useBookingStore = defineStore('booking', () => {
    const result = await put<BookingWithDetails>(`/booking/${bookingId}/noshow`, {
      remark,
    })
    replaceBooking(result)
    return result
  }
@@ -124,13 +159,16 @@ export const useBookingStore = defineStore('booking', () => {
    slots,
    myBookings,
    upcomingBookings,
    teachingSchedule,
    loadingSlots,
    loadingBookings,
    loadingTeachingSchedule,
    fetchSlots,
    createBooking,
    cancelBooking,
    fetchMyBookings,
    fetchUpcomingBookings,
    fetchTeachingSchedule,
    fetchAllAdminBookings,
    confirmBooking,
    completeBooking,
@@ -138,5 +176,6 @@ export const useBookingStore = defineStore('booking', () => {
    fetchBookingHistory,
    fetchSlotById,
    fetchBookingById,
    replaceBooking,
  }
 })
--- a/packages/app/src/stores/flash-sale.ts
+++ b/packages/app/src/stores/flash-sale.ts
@@ -0,0 +1,43 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import type {
  FlashSaleListItem,
  FlashSaleDetail,
  FlashSalePurchaseResponse,
 } from '@mp-pilates/shared'
 import { get, post } from '../utils/request'
 export const useFlashSaleStore = defineStore('flash-sale', () => {
  const flashSales = ref<FlashSaleListItem[]>([])
  const loading = ref(false)
  async function fetchFlashSales(): Promise<FlashSaleListItem[]> {
    loading.value = true
    try {
      const data = await get<FlashSaleListItem[]>('/flash-sales')
      flashSales.value = [...data]
      return data
    } catch {
      flashSales.value = []
      return []
    } finally {
      loading.value = false
    }
  }
  async function fetchDetail(id: string): Promise<FlashSaleDetail> {
    return get<FlashSaleDetail>(`/flash-sales/${id}`)
  }
  async function purchase(id: string): Promise<FlashSalePurchaseResponse> {
    return post<FlashSalePurchaseResponse>(`/flash-sales/${id}/purchase`)
  }
  return {
    flashSales,
    loading,
    fetchFlashSales,
    fetchDetail,
    purchase,
  }
 })
--- a/packages/app/src/stores/invite.ts
+++ b/packages/app/src/stores/invite.ts
@@ -0,0 +1,55 @@
 import { defineStore } from 'pinia'
 import { ref } from 'vue'
 import type { InviteActivitySummary } from '@mp-pilates/shared'
 import { get, post } from '../utils/request'
 export const useInviteStore = defineStore('invite', () => {
  const activity = ref<InviteActivitySummary | null>(null)
  let activityRevision = 0
  async function refreshActivity() {
    const requestRevision = ++activityRevision
    try {
      const result = await get<InviteActivitySummary>('/invite/activity')
      if (requestRevision === activityRevision) activity.value = result
    } catch (err) {
      if (requestRevision === activityRevision) activity.value = null
      throw err
    }
  }
  const code = ref('')
  const eligible = ref(false)
  const pendingCode = ref('')
  let revision = 0
  let confirming = false
  async function refresh() {
    if (confirming) return
    const requestRevision = ++revision
    const result = await get<{ inviteCode: string; discountEligible: boolean }>('/invite/code')
    if (requestRevision !== revision) return
    code.value = result.inviteCode
    eligible.value = result.discountEligible
  }
  async function confirm(value: string) {
    const requestRevision = ++revision
    confirming = true
    try {
      const result = await post<{ inviteCode: string; discountEligible: boolean }>('/invite/confirm', { code: value })
      if (requestRevision !== revision) throw new Error('登录状态已变化，请重试')
      code.value = result.inviteCode
      eligible.value = result.discountEligible
      pendingCode.value = ''
    } finally {
      confirming = false
    }
  }
  function reset() {
    activityRevision++
    activity.value = null
    revision++
    code.value = ''
    eligible.value = false
    pendingCode.value = ''
  }
  function price(value: number) { return eligible.value ? Math.round(value * 95 / 100) : value }
  return { activity, refreshActivity, code, eligible, pendingCode, refresh, confirm, reset, price }
 })
--- a/packages/app/src/stores/user.ts
+++ b/packages/app/src/stores/user.ts
@@ -1,3 +1,4 @@
 import { useInviteStore } from './invite'
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import type {
@@ -5,10 +6,20 @@ import type {
  UserStatsResponse,
  MembershipWithCardType,
 } from '@mp-pilates/shared'
-import { UserRole, MembershipStatus } from '@mp-pilates/shared'
+import {
  UserRole,
  MembershipStatus,
  getMembershipRenewalHint,
 } from '@mp-pilates/shared'
 import { wxLogin, isLoggedIn, logout as authLogout } from '../utils/auth'
 import { setUnauthorizedHandler } from '../utils/session'
 import { get, put } from '../utils/request'
 import { ROUTES } from '../utils/routes'
 import { cacheSubscriptionMessageTemplateConfig, resetSubscriptionMessageTemplateCache } from '../utils/wechat-subscription'
 function syncSubscriptionTemplates(profile?: Pick<UserProfileResponse, 'subscriptionMessageTemplates'> | null) {
  cacheSubscriptionMessageTemplateConfig(profile?.subscriptionMessageTemplates)
 }
 export const useUserStore = defineStore('user', () => {
  // State
@@ -27,6 +38,8 @@ export const useUserStore = defineStore('user', () => {
    memberships.value.filter((m) => m.status === MembershipStatus.ACTIVE),
  )
  const hasValidMembership = computed(() => activeMemberships.value.length > 0)
  const renewalHint = computed(() => getMembershipRenewalHint(memberships.value))
  const inviteShareEligible = computed(() => !!user.value?.inviteShareEligible)
  // Actions
  async function login() {
@@ -34,6 +47,8 @@ export const useUserStore = defineStore('user', () => {
      const result = await wxLogin()
      token.value = result.token
      user.value = result.user
      await useInviteStore().refresh().catch(() => {})
      syncSubscriptionTemplates(result.user)
      return { user: result.user, isNewUser: result.isNewUser }
    } catch (err) {
      console.error('Login failed:', err)
@@ -59,6 +74,9 @@ export const useUserStore = defineStore('user', () => {
    if (!isLoggedIn()) return
    try {
      user.value = await get<UserProfileResponse>('/user/profile')
      await useInviteStore().refresh().catch(() => {})
      syncSubscriptionTemplates(user.value)
      return user.value
    } catch (err) {
      console.error('Fetch profile failed:', err)
    }
@@ -73,21 +91,29 @@ export const useUserStore = defineStore('user', () => {
    }
  }
-  async function fetchMemberships() {
+  async function fetchMemberships(): Promise<boolean> {
-    if (!isLoggedIn()) return
+    if (!isLoggedIn()) return false
    try {
      memberships.value = await get<MembershipWithCardType[]>('/membership/my')
      return true
    } catch (err) {
      console.error('Fetch memberships failed:', err)
      return false
    }
  }
  async function updateProfile(data: { nickname?: string; avatarUrl?: string }) {
    const updated = await put<UserProfileResponse>('/user/profile', data)
    user.value = updated
    syncSubscriptionTemplates(updated)
    return updated
  }
  function setProfile(profile: UserProfileResponse) {
    user.value = profile
    syncSubscriptionTemplates(profile)
  }
  function checkAuth() {
    if (isLoggedIn()) {
      fetchProfile()
@@ -95,14 +121,22 @@ export const useUserStore = defineStore('user', () => {
    }
  }
-  function logout() {
+  function clearSession() {
    authLogout()
    token.value = ''
    useInviteStore().reset()
    user.value = null
    stats.value = null
    memberships.value = []
    resetSubscriptionMessageTemplateCache()
  }
  function logout() {
    authLogout()
    clearSession()
  }
  setUnauthorizedHandler(clearSession)
  return {
    user,
    stats,
@@ -113,12 +147,15 @@ export const useUserStore = defineStore('user', () => {
    isAdmin,
    activeMemberships,
    hasValidMembership,
    renewalHint,
    inviteShareEligible,
    login,
    loginWithSetup,
    fetchProfile,
    fetchStats,
    fetchMemberships,
    updateProfile,
    setProfile,
    checkAuth,
    logout,
  }
--- a/packages/app/src/utils/auth.ts
+++ b/packages/app/src/utils/auth.ts
@@ -7,38 +7,79 @@ interface LoginResponse {
  readonly isNewUser: boolean
 }
 interface UniErrorLike {
  readonly errMsg?: string
 }
 interface WechatPrivacyApi {
  requirePrivacyAuthorize?: (options: {
    success: () => void
    fail: (err: UniErrorLike) => void
  }) => void
 }
 function buildPrivacyError(err?: UniErrorLike): Error {
  const errMsg = err?.errMsg || ''
  if (errMsg.includes('cancel') || errMsg.includes('deny') || errMsg.includes('disagree')) {
    return new Error('请先同意隐私保护指引')
  }
  return new Error('隐私授权失败，请重试')
 }
 async function ensurePrivacyAuthorization(): Promise<void> {
  // #ifdef MP-WEIXIN
  const wechat = (globalThis as typeof globalThis & { wx?: WechatPrivacyApi }).wx
  if (!wechat || typeof wechat.requirePrivacyAuthorize !== 'function') {
    return
  }
  const requirePrivacyAuthorize = wechat.requirePrivacyAuthorize
  await new Promise<void>((resolve, reject) => {
    requirePrivacyAuthorize({
      success: () => resolve(),
      fail: (err: UniErrorLike) => reject(buildPrivacyError(err)),
    })
  })
  // #endif
 }
 export function getErrorMessage(err: unknown, fallback: string): string {
  if (err instanceof Error && err.message) {
    return err.message
  }
  return fallback
 }
 export async function wxLogin(): Promise<LoginResponse> {
  const inviterId = uni.getStorageSync('invite_inviter_id') as string
  await ensurePrivacyAuthorization()
  return new Promise((resolve, reject) => {
    // Step 1:静默登录，获取 code
    uni.login({
      provider: 'weixin',
      success: async (loginRes) => {
        try {
-          // Step 2: 获取用户微信头像和昵称
+          if (!loginRes.code) {
-          let nickname: string | undefined
+            reject(new Error('微信登录失败，请重试'))
-          let avatarUrl: string | undefined
+            return
-          await new Promise<void>((res) => {
+          }
            uni.getUserProfile({
              desc: '用于完善个人资料',
              success: (profileRes) => {
                nickname = profileRes.userInfo.nickName
                avatarUrl = profileRes.userInfo.avatarUrl
                res()
              },
              fail: () => {
                // 用户拒绝授权，仍可继续登录
                res()
              },
            })
          })
-          // Step 3: 发送登录请求
+          // Step 2: 发送登录请求
          // 注：uni.getUserProfile 已被微信废弃（基础库 2.27.1+），
          // 新用户的昵称/头像由后端生成默认值，用户可在个人资料页修改
          const result = await post<LoginResponse>('/auth/login', {
            code: loginRes.code,
-            nickname,
+            inviterId: inviterId || undefined,
            avatarUrl,
          })
          uni.setStorageSync('token', result.token)
          if (result.isNewUser && inviterId) {
            uni.removeStorageSync('invite_inviter_id')
          }
          resolve(result)
        } catch (err) {
          reject(err)
--- a/packages/app/src/utils/format.ts
+++ b/packages/app/src/utils/format.ts
@@ -1,5 +1,12 @@
 import type { CardType } from '@mp-pilates/shared'
 import { CardTypeCategory } from '@mp-pilates/shared'
 import { FlashSalePhase } from '@mp-pilates/shared'
 /** Minimal membership shape needed by progress/usage helpers. */
 interface MembershipLike {
  readonly remainingTimes: number | null
  readonly totalTimes?: number | null
  readonly cardType: { readonly totalTimes: number | null }
 }
 /** 格式化金额：分 → 元 */
 export function formatPrice(cents: number): string {
@@ -49,13 +56,13 @@ export function getDateRange(days: number): ReadonlyArray<{ readonly date: strin
 }
 /** 会员卡类型标签 */
-export function getCardTypeLabel(type: CardTypeCategory): string {
+export function getCardTypeLabel(type: CardTypeCategory | string): string {
-  const map: Record<CardTypeCategory, string> = {
+  const map: Record<string, string> = {
    [CardTypeCategory.TIMES]: '次卡',
    [CardTypeCategory.DURATION]: '月卡',
-    [CardTypeCategory.TRIAL]: '体验',
+    [CardTypeCategory.TRIAL]: '体验卡',
  }
-  return map[type] ?? '会员'
+  return map[type] ?? '会员卡'
 }
 /** 会员卡封面 CSS 类名 */
@@ -70,3 +77,101 @@ export function isSlotPast(date: string, startTime: string): boolean {
  const slotDateTime = new Date(`${date}T${startTime}:00`)
  return new Date() > slotDateTime
 }
 /** 会员卡渐变 CSS 类名前缀 */
 export function getCardGradientClass(type: CardTypeCategory | string): string {
  if (type === CardTypeCategory.DURATION) return 'gradient--duration'
  if (type === CardTypeCategory.TRIAL) return 'gradient--trial'
  return 'gradient--times'
 }
 /** 会员卡累计购入次数（续卡后优先用卡上的快照） */
 export function getMembershipTotalTimes(membership: MembershipLike): number | null {
  return membership.totalTimes ?? membership.cardType.totalTimes ?? null
 }
 /** 会员卡进度百分比（剩余 / 总次数，clamp 到 0~100%） */
 export function getMembershipProgressWidth(membership: MembershipLike): string {
  const totalTimes = getMembershipTotalTimes(membership)
  if (membership.remainingTimes === null || !totalTimes) return '0%'
  const pct = (membership.remainingTimes / totalTimes) * 100
  return `${Math.max(0, Math.min(100, pct))}%`
 }
 /** 已使用次数（不低于 0，防止管理员调高剩余次数导致负值） */
 export function getMembershipUsedTimes(membership: MembershipLike): number {
  const totalTimes = getMembershipTotalTimes(membership)
  if (membership.remainingTimes === null || !totalTimes) return 0
  return Math.max(0, totalTimes - membership.remainingTimes)
 }
 /** 格式化倒计时：HH:MM:SS */
 export function formatCountdown(targetTime: string): string {
  const { h, m, s } = getCountdownParts(targetTime)
  return `${h}:${m}:${s}`
 }
 /** 获取倒计时各部分（h/m/s 已补零） */
 export function getCountdownParts(targetTime: string): { readonly h: string; readonly m: string; readonly s: string } {
  const diff = Math.max(0, new Date(targetTime).getTime() - Date.now())
  return {
    h: String(Math.floor(diff / 3_600_000)).padStart(2, '0'),
    m: String(Math.floor((diff % 3_600_000) / 60_000)).padStart(2, '0'),
    s: String(Math.floor((diff % 60_000) / 1000)).padStart(2, '0'),
  }
 }
 /** 秒杀阶段中文标签 */
 export function getFlashSalePhaseLabel(phase: FlashSalePhase): string {
  const map: Record<FlashSalePhase, string> = {
    [FlashSalePhase.UPCOMING]: '即将开始',
    [FlashSalePhase.ONGOING]: '抢购中',
    [FlashSalePhase.SOLD_OUT]: '已售罄',
    [FlashSalePhase.ENDED]: '已结束',
  }
  return map[phase]
 }
 /** 库存已售比例 */
 export function getStockRatio(soldCount: number, totalStock: number): number {
  if (totalStock === 0) return 0
  return soldCount / totalStock
 }
 /** 库存已售百分比字符串 */
 export function getStockPercent(soldCount: number, totalStock: number): string {
  return `${Math.min(100, getStockRatio(soldCount, totalStock) * 100)}%`
 }
 /** 格式化日期时间为 YYYY-MM-DD HH:mm */
 export function formatDateTimeFull(dateStr: string): string {
  const d = new Date(dateStr)
  if (Number.isNaN(d.getTime())) return '-'
  const year = d.getFullYear()
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hour = String(d.getHours()).padStart(2, '0')
  const min = String(d.getMinutes()).padStart(2, '0')
  return `${year}-${month}-${day} ${hour}:${min}`
 }
 /** 格式化日期时间为 MM-DD HH:mm:ss */
 export function formatDateTime(dateStr: string): string {
  const d = new Date(dateStr)
  const month = String(d.getMonth() + 1).padStart(2, '0')
  const day = String(d.getDate()).padStart(2, '0')
  const hour = String(d.getHours()).padStart(2, '0')
  const min = String(d.getMinutes()).padStart(2, '0')
  const sec = String(d.getSeconds()).padStart(2, '0')
  return `${month}-${day} ${hour}:${min}:${sec}`
 }
 /** 格式化 Date 为 YYYY-MM-DD（本地时间，用于 picker） */
 export function formatDateLocal(d: Date): string {
  return `${d.getFullYear()}-${String(d.getMonth() + 1).padStart(2, '0')}-${String(d.getDate()).padStart(2, '0')}`
 }
 /** 格式化 Date 为 HH:MM（本地时间，用于 picker） */
 export function formatTimeLocal(d: Date): string {
  return `${String(d.getHours()).padStart(2, '0')}:${String(d.getMinutes()).padStart(2, '0')}`
 }
--- a/packages/app/src/utils/request.ts
+++ b/packages/app/src/utils/request.ts
@@ -1,16 +1,8 @@
 import type { ApiResponse, PaginatedData } from '@mp-pilates/shared'
 import { notifyUnauthorized } from './session'
-const BASE_URL = (() => {
+// 统一使用线上服务地址
-  try {
+const BASE_URL = 'https://focus.richarjiang.com/api'
    const { miniProgram } = uni.getAccountInfoSync()
    if (miniProgram.envVersion !== 'develop') {
      return 'https://focus.richarjiang.com/api'
    }
  } catch {
    // 非小程序环境，使用开发地址
  }
  return 'http://localhost:3000/api'
 })()
 interface RequestOptions {
  readonly url: string
@@ -19,6 +11,13 @@ interface RequestOptions {
  readonly header?: Record<string, string>
 }
 export class HttpRequestError extends Error {
  constructor(message: string, readonly statusCode: number) {
    super(message)
    this.name = 'HttpRequestError'
  }
 }
 export function request<T>(options: RequestOptions): Promise<T> {
  return new Promise((resolve, reject) => {
    const token = uni.getStorageSync('token') as string
@@ -34,14 +33,15 @@ export function request<T>(options: RequestOptions): Promise<T> {
      },
      success: (res) => {
        if (res.statusCode === 401) {
-          uni.removeStorageSync('token')
+          if (!options.url.startsWith('/auth/login')) {
-          uni.showToast({ title: '请重新登录', icon: 'none' })
+            notifyUnauthorized()
          }
          reject(new Error('Unauthorized'))
          return
        }
        if (res.statusCode >= 400) {
          const body = res.data as ApiResponse<unknown>
-          reject(new Error(body?.message || `请求失败 (${res.statusCode})`))
+          reject(new HttpRequestError(body?.message || `请求失败 (${res.statusCode})`, res.statusCode))
          return
        }
        const body = res.data as ApiResponse<T>
--- a/packages/app/src/utils/schedule-time.ts
+++ b/packages/app/src/utils/schedule-time.ts
@@ -0,0 +1,67 @@
 import {
  DEFAULT_SCHEDULE_START_TIME,
  DEFAULT_SCHEDULE_END_TIME,
  SCHEDULE_MINUTE_STEP,
 } from '@mp-pilates/shared'
 function buildHourOptions(): string[] {
  const startHour = parseInt(DEFAULT_SCHEDULE_START_TIME.slice(0, 2), 10)
  const endHour = parseInt(DEFAULT_SCHEDULE_END_TIME.slice(0, 2), 10)
  const list: string[] = []
  for (let h = startHour; h <= endHour; h++) {
    list.push(String(h).padStart(2, '0'))
  }
  return list
 }
 function buildMinuteOptions(): string[] {
  const list: string[] = []
  for (let m = 0; m < 60; m += SCHEDULE_MINUTE_STEP) {
    list.push(String(m).padStart(2, '0'))
  }
  return list
 }
 export const SCHEDULE_HOUR_OPTIONS = buildHourOptions()
 export const SCHEDULE_MINUTE_OPTIONS = buildMinuteOptions()
 export const SCHEDULE_TIME_PICKER_RANGE = [SCHEDULE_HOUR_OPTIONS, SCHEDULE_MINUTE_OPTIONS]
 export function timeToMinutes(time: string): number {
  const [h, m] = time.split(':').map(Number)
  return h * 60 + (m || 0)
 }
 export function minutesToTime(total: number): string {
  const h = Math.floor(total / 60)
  const m = total % 60
  return `${String(h).padStart(2, '0')}:${String(m).padStart(2, '0')}`
 }
 export function timeToPickerIndex(time: string): number[] {
  let total = timeToMinutes(time || DEFAULT_SCHEDULE_START_TIME)
  const minTotal = timeToMinutes(DEFAULT_SCHEDULE_START_TIME)
  const maxTotal = timeToMinutes(DEFAULT_SCHEDULE_END_TIME)
  total = Math.max(minTotal, Math.min(maxTotal, total))
  total = Math.round(total / SCHEDULE_MINUTE_STEP) * SCHEDULE_MINUTE_STEP
  total = Math.max(minTotal, Math.min(maxTotal, total))
  const hour = String(Math.floor(total / 60)).padStart(2, '0')
  const minute = String(total % 60).padStart(2, '0')
  return [
    Math.max(0, SCHEDULE_HOUR_OPTIONS.indexOf(hour)),
    Math.max(0, SCHEDULE_MINUTE_OPTIONS.indexOf(minute)),
  ]
 }
 export function pickerIndexToTime(value: number[]): string {
  const hour = SCHEDULE_HOUR_OPTIONS[value[0]] ?? SCHEDULE_HOUR_OPTIONS[0]
  const minute = SCHEDULE_MINUTE_OPTIONS[value[1]] ?? SCHEDULE_MINUTE_OPTIONS[0]
  return `${hour}:${minute}`
 }
 /** 将 "HH:mm" 加一小时，不超过当日最晚结束时间 21:30 */
 export function addOneHourCapped(time: string): string {
  const next = timeToMinutes(time) + 60
  const cap = timeToMinutes(DEFAULT_SCHEDULE_END_TIME)
  return minutesToTime(Math.min(next, cap))
 }
--- a/packages/app/src/utils/session.ts
+++ b/packages/app/src/utils/session.ts
@@ -0,0 +1,22 @@
 const UNAUTHORIZED_TOAST_GAP_MS = 2000
 let unauthorizedHandler: (() => void) | null = null
 let lastUnauthorizedAt = 0
 export function setUnauthorizedHandler(handler: () => void): void {
  unauthorizedHandler = handler
 }
 /** Clear persisted token and in-memory session after the server rejects auth. */
 export function notifyUnauthorized(): void {
  const now = Date.now()
  const shouldToast = now - lastUnauthorizedAt > UNAUTHORIZED_TOAST_GAP_MS
  lastUnauthorizedAt = now
  uni.removeStorageSync('token')
  unauthorizedHandler?.()
  if (shouldToast) {
    uni.showToast({ title: '登录已过期，请重新登录', icon: 'none' })
  }
 }
--- a/packages/app/src/utils/studio-upload.ts
+++ b/packages/app/src/utils/studio-upload.ts
@@ -0,0 +1,72 @@
 import type {
  CreateStudioUploadCredentialDto,
  StudioAssetType,
  StudioUploadCredential,
 } from '@mp-pilates/shared'
 import type { useAdminStore } from '../stores/admin'
 type AdminStore = ReturnType<typeof useAdminStore>
 function inferContentType(fileName: string): string | undefined {
  const extension = fileName.split('.').pop()?.toLowerCase()
  if (extension === 'jpg' || extension === 'jpeg') {
    return 'image/jpeg'
  }
  if (extension === 'png') {
    return 'image/png'
  }
  if (extension === 'webp') {
    return 'image/webp'
  }
  if (extension === 'heic') {
    return 'image/heic'
  }
  if (extension === 'heif') {
    return 'image/heif'
  }
  return undefined
 }
 function uploadToCos(filePath: string, credential: StudioUploadCredential): Promise<void> {
  return new Promise((resolve, reject) => {
    uni.uploadFile({
      url: credential.uploadUrl,
      filePath,
      name: 'file',
      formData: credential.formData as unknown as Record<string, string>,
      success: (result) => {
        if (result.statusCode >= 200 && result.statusCode < 300) {
          resolve()
          return
        }
        const body = typeof result.data === 'string' ? result.data : JSON.stringify(result.data)
        const code = body.match(/<Code>([^<]+)<\/Code>/)?.[1]
        const message = body.match(/<Message>([^<]+)<\/Message>/)?.[1]
        const detail = code || message ? `${code ?? 'COS'}: ${message ?? body}` : body
        reject(new Error(`COS 上传失败 (${result.statusCode}) ${detail}`))
      },
      fail: (error) => {
        reject(new Error(error.errMsg || 'COS 上传失败'))
      },
    })
  })
 }
 export async function uploadStudioAsset(params: {
  adminStore: AdminStore
  filePath: string
  fileName: string
  assetType: StudioAssetType
 }): Promise<string> {
  const payload: CreateStudioUploadCredentialDto = {
    fileName: params.fileName,
    contentType: inferContentType(params.fileName),
    assetType: params.assetType,
  }
  const credential = await params.adminStore.createStudioUploadCredential(payload)
  await uploadToCos(params.filePath, credential)
  return credential.fileUrl
 }
--- a/packages/app/src/utils/teacher.ts
+++ b/packages/app/src/utils/teacher.ts
@@ -0,0 +1,62 @@
 export interface TeacherProfile {
  id: string
  name: string
  title: string
  avatar: string
  cover: string
  badges: string[]
  specialties: string[]
  intro: string
  certifications: string[]
  teachingFocus: Array<{ title: string; desc: string }>
  stats: Array<{ label: string; value: string }>
 }
 export const irisProfile: TeacherProfile = {
  id: 'iris',
  name: 'Iris',
  title: '高级普拉提教练',
  avatar: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/teacher_avatar.jpg',
  cover: 'https://plates-1251306435.cos.ap-guangzhou.myqcloud.com/mp/images/teacher_avatar.jpg',
  badges: ['高级', 'STOTT PILATES'],
  specialties: ['塑性训练', '体态调整', '产后恢复'],
  intro: '我擅长把专业训练拆解成身体真正听得懂的节奏，让你在安全、稳定与被看见的陪伴里，一点点找回力量、线条与自信。',
  certifications: [
    '斯多特塑身机初&中级认证教练',
    '斯多特全场馆认证教练',
    '曼丽丘斯多特塑身机弹跳网芭杆工作坊',
    '塑身机上的高尔夫与旋转运动调理工作坊',
    '四维人体运动解剖认证',
  ],
  teachingFocus: [
    {
      title: '核心激活',
      desc: '从骨盆与深层腹部控制入手，建立稳定发力基础。',
    },
    {
      title: '体态调整',
      desc: '针对圆肩、头前伸、骨盆前倾等常见问题做精细训练。',
    },
    {
      title: '产后恢复',
      desc: '循序渐进关注核心重建、呼吸配合与身体觉知恢复。',
    },
    {
      title: '塑形训练',
      desc: '兼顾力量与线条，让臀腿、背部和核心更有支撑感。',
    },
    {
      title: '呼吸控制',
      desc: '把呼吸节奏融入动作，提高训练效率与身体连接感。',
    },
    {
      title: '一对一进阶',
      desc: '根据训练基础与目标安排节奏，适合长期稳定提升。',
    },
  ],
  stats: [
    { label: '擅长方向', value: '塑形 / 体态' },
    { label: '授课类型', value: '私教为主' },
    { label: '课程时长', value: '60 分钟' },
  ],
 }
--- a/packages/app/src/utils/wechat-subscription.ts
+++ b/packages/app/src/utils/wechat-subscription.ts
@@ -0,0 +1,256 @@
 import {
  SubscriptionMessageScene,
 } from '@mp-pilates/shared'
 import type {
  ReportSubscriptionMessageRequestDto,
  SubscriptionMessageRequestItem,
  SubscriptionMessageTemplate,
  SubscriptionMessageTemplateConfig,
  UserProfileResponse,
 } from '@mp-pilates/shared'
 import { post } from './request'
 type TemplateResult = SubscriptionMessageRequestItem['result'] | 'tmplIds empty' | 'err' | 'undefined'
 type RequestSubscribeMessageSuccess = Record<string, TemplateResult | undefined> & {
  errMsg?: string
 }
 interface RequestSubscribeMessageFail {
  errMsg?: string
  errCode?: number | null
 }
 function stringifyDebugPayload(payload: unknown): string {
  try {
    return JSON.stringify(payload)
  } catch {
    return String(payload)
  }
 }
 function getSubscribeDebugContext() {
  try {
    const windowInfo = typeof uni.getWindowInfo === 'function' ? uni.getWindowInfo() : null
    const appBaseInfo = typeof uni.getAppBaseInfo === 'function' ? uni.getAppBaseInfo() : null
    const deviceInfo = typeof uni.getDeviceInfo === 'function' ? uni.getDeviceInfo() : null
    const host = appBaseInfo?.host as { env?: string } | string | undefined
    return {
      platform: deviceInfo?.platform ?? 'unknown',
      hostEnv: typeof host === 'object' && host ? host.env : undefined,
      app: appBaseInfo?.appName,
      system: deviceInfo?.system,
      language: appBaseInfo?.language,
      version: appBaseInfo?.version,
      SDKVersion: appBaseInfo?.SDKVersion,
      windowWidth: windowInfo?.windowWidth,
    }
  } catch {
    return {
      platform: 'unknown',
    }
  }
 }
 function buildSubscribeError(err: RequestSubscribeMessageFail, scene: SubscriptionMessageScene, templateIds: string[]): Error {
  const debugContext = getSubscribeDebugContext()
  const rawMessage = (err.errMsg || '').trim()
  if (!rawMessage && debugContext.platform === 'devtools') {
    return new Error(
      `开发者工具当前环境不支持订阅消息唤起。请退出游客模式，使用已登录的微信开发者工具并在真机中重试。调试信息: ${stringifyDebugPayload({ scene, templateIds, err, debugContext })}`,
    )
  }
  return new Error(
    `订阅消息授权失败: ${stringifyDebugPayload({ scene, templateIds, err, debugContext })}`,
  )
 }
 const TEMPLATE_CONFIG_STORAGE_KEY = 'subscriptionMessageTemplateConfig'
 let cachedConfig: SubscriptionMessageTemplateConfig | null = null
 function isMpWeixin(): boolean {
  // #ifdef MP-WEIXIN
  return true
  // #endif
  return false
 }
 function normalizeResult(result?: TemplateResult): SubscriptionMessageRequestItem['result'] | null {
  if (result === 'accept' || result === 'reject' || result === 'ban' || result === 'filter') {
    return result
  }
  return null
 }
 async function fetchTemplateConfig(): Promise<SubscriptionMessageTemplateConfig> {
  if (cachedConfig) {
    return cachedConfig
  }
  const stored = uni.getStorageSync(TEMPLATE_CONFIG_STORAGE_KEY) as SubscriptionMessageTemplateConfig | ''
  if (!stored || !Array.isArray(stored.templates)) {
    throw new Error('订阅消息模板尚未初始化，请重新进入页面后重试')
  }
  const config: SubscriptionMessageTemplateConfig = {
    templates: stored.templates.filter((item) => item.templateId),
  }
  cachedConfig = config
  return config
 }
 function normalizeTemplateConfig(config?: Partial<SubscriptionMessageTemplateConfig> | null): SubscriptionMessageTemplateConfig {
  const templates = Array.isArray(config?.templates) ? config.templates : []
  return {
    templates: templates.filter((item): item is SubscriptionMessageTemplate => !!item?.templateId),
  }
 }
 export function cacheSubscriptionMessageTemplateConfig(
  config?: Partial<SubscriptionMessageTemplateConfig> | null,
 ): SubscriptionMessageTemplateConfig {
  const normalized = normalizeTemplateConfig(config)
  cachedConfig = normalized
  uni.setStorageSync(TEMPLATE_CONFIG_STORAGE_KEY, normalized)
  return normalized
 }
 function getTemplatesByScene(
  config: SubscriptionMessageTemplateConfig,
  scene: SubscriptionMessageScene,
 ): SubscriptionMessageTemplate[] {
  return config.templates.filter((item) => item.scene === scene && item.templateId)
 }
 async function reportResults(requests: SubscriptionMessageRequestItem[]): Promise<void> {
  if (requests.length === 0) {
    return
  }
  const payload: ReportSubscriptionMessageRequestDto = { requests }
  await post('/user/subscription-messages/report', payload as unknown as Record<string, unknown>)
 }
 export async function requestSubscriptionMessage(scene: SubscriptionMessageScene): Promise<SubscriptionMessageRequestItem[]> {
  if (!isMpWeixin()) {
    return []
  }
  const config = await fetchTemplateConfig()
  const templates = getTemplatesByScene(config, scene)
  if (templates.length === 0) {
    console.error('[subscribe] no templates matched scene', stringifyDebugPayload({ scene, config, debugContext: getSubscribeDebugContext() }))
    return []
  }
  const templateIds = templates.map((item) => item.templateId)
  const debugContext = getSubscribeDebugContext()
  console.log('[subscribe] requestSubscribeMessage:start', stringifyDebugPayload({ scene, templateIds, templates, debugContext }))
  const result = await new Promise<RequestSubscribeMessageSuccess>((resolve, reject) => {
    uni.requestSubscribeMessage({
      tmplIds: templateIds,
      success: (res) => {
        console.log('[subscribe] requestSubscribeMessage:success', stringifyDebugPayload({ scene, response: res, templateIds, debugContext }))
        resolve(res as RequestSubscribeMessageSuccess)
      },
      fail: (err) => {
        console.error('[subscribe] requestSubscribeMessage:fail', stringifyDebugPayload({ scene, error: err, templateIds, debugContext }))
        reject(buildSubscribeError(err as RequestSubscribeMessageFail, scene, templateIds))
      },
    })
  })
  const requests = templates
    .map<SubscriptionMessageRequestItem | null>((item) => {
      const normalized = normalizeResult(result[item.templateId])
      if (!normalized) {
        return null
      }
      return {
        templateId: item.templateId,
        scene: item.scene,
        result: normalized,
      }
    })
    .filter((item): item is SubscriptionMessageRequestItem => item !== null)
  console.log('[subscribe] requestSubscribeMessage:normalized', stringifyDebugPayload({ scene, result, requests, templateIds, debugContext }))
  await reportResults(requests)
  return requests
 }
 export async function requestOrderPaidSubscriptionMessage(): Promise<SubscriptionMessageRequestItem[]> {
  return requestSubscriptionMessage(SubscriptionMessageScene.BOOKING_CREATED)
 }
 export async function requestBookingCreatedSubscriptionMessage(): Promise<SubscriptionMessageRequestItem[]> {
  return requestSubscriptionMessage(SubscriptionMessageScene.BOOKING_CREATED)
 }
 export async function requestAdminBookingSubscriptionCount(): Promise<UserProfileResponse | null> {
  if (!isMpWeixin()) {
    return null
  }
  const config = await fetchTemplateConfig()
  const templates = getTemplatesByScene(config, SubscriptionMessageScene.ADMIN_BOOKING_CREATED)
    .filter((item) => item.usageTarget === 'counter')
  if (templates.length === 0) {
    console.error('[subscribe] no admin counter template configured', stringifyDebugPayload({
      scene: SubscriptionMessageScene.ADMIN_BOOKING_CREATED,
      config,
      debugContext: getSubscribeDebugContext(),
    }))
    return null
  }
  const templateId = templates[0].templateId
  const debugContext = getSubscribeDebugContext()
  console.log('[subscribe] requestSubscribeMessage:adminCounter:start', stringifyDebugPayload({
    templateId,
    debugContext,
  }))
  const result = await new Promise<RequestSubscribeMessageSuccess>((resolve, reject) => {
    uni.requestSubscribeMessage({
      tmplIds: [templateId],
      success: (res) => {
        console.log('[subscribe] requestSubscribeMessage:adminCounter:success', stringifyDebugPayload({ response: res, templateId, debugContext }))
        resolve(res as RequestSubscribeMessageSuccess)
      },
      fail: (err) => {
        console.error('[subscribe] requestSubscribeMessage:adminCounter:fail', stringifyDebugPayload({ error: err, templateId, debugContext }))
        reject(buildSubscribeError(err as RequestSubscribeMessageFail, SubscriptionMessageScene.ADMIN_BOOKING_CREATED, [templateId]))
      },
    })
  })
  const normalized = normalizeResult(result[templateId])
  console.log('[subscribe] requestSubscribeMessage:adminCounter:normalized', stringifyDebugPayload({
    templateId,
    normalized,
    rawResult: result,
    debugContext,
  }))
  if (normalized !== 'accept') {
    return null
  }
  return post<UserProfileResponse>('/user/subscription-messages/admin-booking-count')
 }
 export function resetSubscriptionMessageTemplateCache(): void {
  cachedConfig = null
  uni.removeStorageSync(TEMPLATE_CONFIG_STORAGE_KEY)
 }
--- a/packages/server/.env
+++ b/packages/server/.env
@@ -19,3 +19,17 @@ API_BASE_URL=https://focus.richarjiang.com/
 # Server
 PORT=3000
 WX_SUBSCRIBE_TEMPLATE_BOOKING_CONFIRMED=antYfc85gvwImFZ9kM4UiqMOywJxbqFVgKHLH3NikII
 # COS upload
 COS_SECRET_ID=AKIDwwulT3ub9f9bxFVdihcP4Z1S6qivMxmu
 COS_SECRET_KEY=S1rrw0CY1fRQj7X7fCpjryAMwgel6drG
 COS_BUCKET=plates-1251306435
 COS_REGION=ap-guangzhou
 COS_UPLOAD_ROLE_ARN=qcs::cam::uin/649581473:roleName/MpPilatesCosUploadRole
 COS_APP_ID=1251306435
 COS_PUBLIC_BASE_URL=https://plates-1251306435.cos.ap-guangzhou.myqcloud.com
 COS_UPLOAD_PREFIX=mp/studio
 COS_UPLOAD_DURATION_SECONDS=1800
 COS_UPLOAD_ROLE_SESSION_NAME=mp-pilates-studio-upload
--- a/packages/server/.env.example
+++ b/packages/server/.env.example
@@ -0,0 +1,13 @@
 DATABASE_URL=mysql://user:password@127.0.0.1:3306/mp_pilates
 JWT_SECRET=change-me
 WX_APPID=your-wechat-appid
 WX_SECRET=your-wechat-secret
 # COS upload
 COS_SECRET_ID=your-cos-secret-id
 COS_SECRET_KEY=your-cos-secret-key
 COS_BUCKET=plates-1251306435
 COS_REGION=ap-guangzhou
 COS_PUBLIC_BASE_URL=https://plates-1251306435.cos.ap-guangzhou.myqcloud.com
 COS_UPLOAD_PREFIX=mp/studio
 COS_UPLOAD_DURATION_SECONDS=1800
--- a/packages/server/package.json
+++ b/packages/server/package.json
@@ -13,6 +13,7 @@
    "prisma:generate": "prisma generate",
    "prisma:migrate": "prisma migrate dev",
    "prisma:seed": "ts-node prisma/seed.ts",
    "studio:seed-gallery": "ts-node prisma/update-studio-gallery.ts",
    "lint": "eslint \"{src,test}/**/*.ts\""
  },
  "dependencies": {
@@ -52,9 +53,9 @@
  },
  "jest": {
    "moduleFileExtensions": [
      "ts",
      "js",
-      "json",
+      "json"
      "ts"
    ],
    "rootDir": "src",
    "testRegex": ".*\\.spec\\.ts$",
@@ -69,6 +70,7 @@
    "coverageDirectory": "../coverage",
    "testEnvironment": "node",
    "moduleNameMapper": {
      "^@mp-pilates/shared$": "<rootDir>/../../shared/src/index.ts",
      "^@mp-pilates/shared(.*)$": "<rootDir>/../../shared/src$1"
    }
  },
--- a/packages/server/prisma/migrations/20260907040000_add_membership_renewal_fields/migration.sql
+++ b/packages/server/prisma/migrations/20260907040000_add_membership_renewal_fields/migration.sql
@@ -0,0 +1,20 @@
 -- AlterTable
 ALTER TABLE `memberships` ADD COLUMN `total_times` INTEGER NULL;
 -- AlterTable
 ALTER TABLE `orders` ADD COLUMN `membership_id` VARCHAR(191) NULL;
 -- CreateIndex
 CREATE INDEX `memberships_user_id_card_type_id_idx` ON `memberships`(`user_id`, `card_type_id`);
 -- CreateIndex
 CREATE INDEX `orders_membership_id_idx` ON `orders`(`membership_id`);
 -- AddForeignKey
 ALTER TABLE `orders` ADD CONSTRAINT `orders_membership_id_fkey` FOREIGN KEY (`membership_id`) REFERENCES `memberships`(`id`) ON DELETE SET NULL ON UPDATE CASCADE;
 -- Backfill purchased-times snapshot for existing times/trial cards
 UPDATE `memberships` `m`
 INNER JOIN `card_types` `ct` ON `ct`.`id` = `m`.`card_type_id`
 SET `m`.`total_times` = `ct`.`total_times`
 WHERE `ct`.`total_times` IS NOT NULL AND `m`.`total_times` IS NULL;
--- a/packages/server/prisma/migrations/20260907070000_add_user_last_login_at/migration.sql
+++ b/packages/server/prisma/migrations/20260907070000_add_user_last_login_at/migration.sql
@@ -0,0 +1,2 @@
 -- AlterTable
 ALTER TABLE `users` ADD COLUMN `last_login_at` DATETIME(3) NULL;
--- a/packages/server/prisma/migrations/20260907080000_add_booking_membership_times_deducted/migration.sql
+++ b/packages/server/prisma/migrations/20260907080000_add_booking_membership_times_deducted/migration.sql
@@ -0,0 +1,2 @@
 -- AlterTable
 ALTER TABLE `bookings` ADD COLUMN `membership_times_deducted` BOOLEAN NULL;
--- a/packages/server/prisma/migrations/20260908000000_invite_codes/migration.sql
+++ b/packages/server/prisma/migrations/20260908000000_invite_codes/migration.sql
@@ -0,0 +1,4 @@
 ALTER TABLE `users` ADD COLUMN `invite_code` VARCHAR(6) NULL;
 CREATE UNIQUE INDEX `users_invite_code_key` ON `users` (`invite_code`);
 ALTER TABLE `orders` ADD COLUMN `invite_inviter_id` VARCHAR(191) NULL, ADD COLUMN `purchased_category` VARCHAR(191) NULL;
 INSERT INTO `card_types` (`id`, `name`, `type`, `total_times`, `duration_days`, `price`, `is_active`, `sort_order`, `updated_at`) VALUES ('invite-reward-card', '邀请好友赠课', 'TIMES', 1, 365, 0, false, 9999, NOW());
--- a/packages/server/prisma/migrations/20260908090000_add_lesson_supplements/migration.sql
+++ b/packages/server/prisma/migrations/20260908090000_add_lesson_supplements/migration.sql
@@ -0,0 +1,27 @@
 -- CreateTable
 CREATE TABLE `lesson_supplements` (
    `id` VARCHAR(191) NOT NULL,
    `user_id` VARCHAR(191) NOT NULL,
    `request_id` VARCHAR(80) NOT NULL,
    `quantity` INTEGER NOT NULL,
    `membership_id` VARCHAR(191) NULL,
    `deducted_times` INTEGER NOT NULL DEFAULT 0,
    `card_name` VARCHAR(191) NULL,
    `remark` VARCHAR(200) NULL,
    `operator_id` VARCHAR(191) NOT NULL,
    `operator_name` VARCHAR(191) NOT NULL,
    `created_at` DATETIME(3) NOT NULL DEFAULT CURRENT_TIMESTAMP(3),
    `revoked_at` DATETIME(3) NULL,
    `revoked_by` VARCHAR(191) NULL,
    INDEX `lesson_supplements_user_id_revoked_at_created_at_idx`(`user_id`, `revoked_at`, `created_at`),
    UNIQUE INDEX `lesson_supplements_user_id_request_id_key`(`user_id`, `request_id`),
    PRIMARY KEY (`id`)
 ) DEFAULT CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
 -- AddForeignKey
 ALTER TABLE `lesson_supplements` ADD CONSTRAINT `lesson_supplements_user_id_fkey` FOREIGN KEY (`user_id`) REFERENCES `users`(`id`) ON DELETE RESTRICT ON UPDATE CASCADE;
 -- AddForeignKey
 ALTER TABLE `lesson_supplements` ADD CONSTRAINT `lesson_supplements_membership_id_fkey` FOREIGN KEY (`membership_id`) REFERENCES `memberships`(`id`) ON DELETE RESTRICT ON UPDATE CASCADE;
--- a/packages/server/prisma/schema.prisma
+++ b/packages/server/prisma/schema.prisma
@@ -51,26 +51,78 @@ enum OrderStatus {
  REFUNDED
 }
 enum FlashSaleStatus {
  DRAFT
  ACTIVE
  ENDED
 }
 enum FlashSaleOrderStatus {
  RESERVED
  PAID
  EXPIRED
 }
 enum InviteReferralStatus {
  REGISTERED
  TRIAL_PURCHASED
  QUALIFIED
 }
 // ===== Models =====
 model User {
  id                               String   @id @default(uuid())
  inviteCode                       String?  @unique @map("invite_code") @db.VarChar(6)
  openid                           String   @unique
  unionid                          String?
  phone                            String?
  nickname                         String   @default("")
  avatarUrl                        String?  @map("avatar_url")
  role                             UserRole @default(MEMBER)
  adminBookingSubscriptionCount    Int      @default(0) @map("admin_booking_subscription_count")
  lastLoginAt                      DateTime? @map("last_login_at")
  createdAt                        DateTime @default(now()) @map("created_at")
  updatedAt                        DateTime @updatedAt @map("updated_at")
  lessonSupplements LessonSupplement[]
  memberships Membership[]
  bookings    Booking[]
  orders      Order[]
  flashSaleOrders FlashSaleOrder[]
  subscriptionMessageConsents SubscriptionMessageConsent[]
  sentInviteReferrals InviteReferral[] @relation("InviteReferralInviter")
  receivedInviteReferral InviteReferral[] @relation("InviteReferralInvitee")
  inviteRewardGrants InviteRewardGrant[] @relation("InviteRewardGrantInviter")
  @@map("users")
 }
 model SubscriptionMessageConsent {
  id                String   @id @default(uuid())
  userId            String   @map("user_id")
  templateId        String   @map("template_id")
  scene             String
  totalRequestCount Int      @default(0) @map("total_request_count")
  acceptCount       Int      @default(0) @map("accept_count")
  rejectCount       Int      @default(0) @map("reject_count")
  banCount          Int      @default(0) @map("ban_count")
  filterCount       Int      @default(0) @map("filter_count")
  sentCount         Int      @default(0) @map("sent_count")
  lastResult        String   @map("last_result")
  lastRequestedAt   DateTime @default(now()) @map("last_requested_at")
  lastSentAt        DateTime? @map("last_sent_at")
  createdAt         DateTime @default(now()) @map("created_at")
  updatedAt         DateTime @updatedAt @map("updated_at")
  user User @relation(fields: [userId], references: [id])
  @@unique([userId, templateId, scene])
  @@index([userId])
  @@index([scene])
  @@map("subscription_message_consents")
 }
 model CardType {
  id            String           @id @default(uuid())
  name          String
@@ -80,6 +132,7 @@ model CardType {
  price         Decimal          @db.Decimal(10, 0)
  originalPrice Decimal?         @map("original_price") @db.Decimal(10, 0)
  description   String?
  coverUrl      String?          @map("cover_url")
  isActive      Boolean          @default(true) @map("is_active")
  sortOrder     Int              @default(0) @map("sort_order")
  createdAt     DateTime         @default(now()) @map("created_at")
@@ -87,6 +140,7 @@ model CardType {
  memberships Membership[]
  orders      Order[]
  flashSales  FlashSale[]
  @@map("card_types")
 }
@@ -96,17 +150,22 @@ model Membership {
  userId         String           @map("user_id")
  cardTypeId     String           @map("card_type_id")
  remainingTimes Int?             @map("remaining_times")
  totalTimes     Int?             @map("total_times")
  startDate      DateTime         @map("start_date")
  expireDate     DateTime         @map("expire_date")
  status         MembershipStatus @default(ACTIVE)
  createdAt      DateTime         @default(now()) @map("created_at")
  updatedAt      DateTime         @updatedAt @map("updated_at")
  lessonSupplements LessonSupplement[]
  user     User      @relation(fields: [userId], references: [id])
  cardType CardType  @relation(fields: [cardTypeId], references: [id])
  bookings Booking[]
  orders   Order[]
  inviteRewardGrants InviteRewardGrant[]
  @@index([userId])
  @@index([userId, cardTypeId])
  @@index([status])
  @@map("memberships")
 }
@@ -153,6 +212,7 @@ model Booking {
  userId                   String        @map("user_id")
  timeSlotId               String        @map("time_slot_id")
  membershipId             String        @map("membership_id")
  membershipTimesDeducted  Boolean?      @map("membership_times_deducted")
  status                   BookingStatus @default(PENDING_CONFIRMATION)
  cancelledAt              DateTime?     @map("cancelled_at")
  confirmedAt              DateTime?     @map("confirmed_at")
@@ -164,6 +224,7 @@ model Booking {
  user       User       @relation(fields: [userId], references: [id])
  timeSlot   TimeSlot   @relation(fields: [timeSlotId], references: [id])
  membership Membership @relation(fields: [membershipId], references: [id])
  qualifiedInviteReferrals InviteReferral[]
  statusHistory BookingStatusHistory[]
@@ -192,22 +253,71 @@ model Order {
  id              String      @id @default(uuid())
  userId          String      @map("user_id")
  cardTypeId      String      @map("card_type_id")
  membershipId    String?     @map("membership_id")
  orderNo         String      @unique @map("order_no")
  inviteInviterId String?     @map("invite_inviter_id")
  purchasedCategory String?  @map("purchased_category")
  amount          Decimal     @db.Decimal(10, 0)
  status          OrderStatus @default(PENDING)
  wxTransactionId String?     @map("wx_transaction_id")
  paidAt          DateTime?   @map("paid_at")
  flashSaleId     String?     @map("flash_sale_id")
  createdAt       DateTime    @default(now()) @map("created_at")
  updatedAt       DateTime    @updatedAt @map("updated_at")
  user           User            @relation(fields: [userId], references: [id])
  cardType       CardType        @relation(fields: [cardTypeId], references: [id])
  membership     Membership?     @relation(fields: [membershipId], references: [id])
  flashSaleOrder FlashSaleOrder?
  inviteReferrals InviteReferral[]
  @@index([userId])
  @@index([status])
  @@index([membershipId])
  @@map("orders")
 }
 model InviteReferral {
  id               String               @id @default(uuid())
  inviterId        String               @map("inviter_id")
  inviteeId        String               @unique @map("invitee_id")
  status           InviteReferralStatus @default(REGISTERED)
  trialOrderId     String?              @unique @map("trial_order_id")
  qualifiedBookingId String?            @unique @map("qualified_booking_id")
  invitedAt        DateTime             @default(now()) @map("invited_at")
  trialPurchasedAt DateTime?            @map("trial_purchased_at")
  qualifiedAt      DateTime?            @map("qualified_at")
  createdAt        DateTime             @default(now()) @map("created_at")
  updatedAt        DateTime             @updatedAt @map("updated_at")
  inviter          User                 @relation("InviteReferralInviter", fields: [inviterId], references: [id])
  invitee          User                 @relation("InviteReferralInvitee", fields: [inviteeId], references: [id])
  trialOrder       Order?               @relation(fields: [trialOrderId], references: [id])
  qualifiedBooking Booking?             @relation(fields: [qualifiedBookingId], references: [id])
  @@unique([inviterId, inviteeId])
  @@index([inviterId, status])
  @@index([status])
  @@map("invite_referrals")
 }
 model InviteRewardGrant {
  id                    String     @id @default(uuid())
  inviterId             String     @map("inviter_id")
  membershipId          String?    @map("membership_id")
  qualifiedReferralCount Int       @map("qualified_referral_count")
  rewardTimes           Int        @default(1) @map("reward_times")
  grantedAt             DateTime   @default(now()) @map("granted_at")
  createdAt             DateTime   @default(now()) @map("created_at")
  updatedAt             DateTime   @updatedAt @map("updated_at")
  inviter    User        @relation("InviteRewardGrantInviter", fields: [inviterId], references: [id])
  membership Membership? @relation(fields: [membershipId], references: [id], onDelete: Restrict)
  @@index([inviterId, grantedAt])
  @@map("invite_reward_grants")
 }
 model StudioConfig {
  id               String   @id @default(uuid())
  name             String
@@ -223,3 +333,72 @@ model StudioConfig {
  @@map("studio_config")
 }
 model FlashSale {
  id            String          @id @default(uuid())
  cardTypeId    String          @map("card_type_id")
  title         String
  originalPrice Decimal         @map("original_price") @db.Decimal(10, 0)
  flashPrice    Decimal         @map("flash_price") @db.Decimal(10, 0)
  totalStock    Int             @map("total_stock")
  soldCount     Int             @default(0) @map("sold_count")
  startTime     DateTime        @map("start_time")
  endTime       DateTime        @map("end_time")
  status        FlashSaleStatus @default(DRAFT)
  description   String?         @db.Text
  sortOrder     Int             @default(0) @map("sort_order")
  createdAt     DateTime        @default(now()) @map("created_at")
  updatedAt     DateTime        @updatedAt @map("updated_at")
  cardType CardType         @relation(fields: [cardTypeId], references: [id])
  orders   FlashSaleOrder[]
  @@index([status, startTime, endTime])
  @@map("flash_sales")
 }
 model FlashSaleOrder {
  id          String               @id @default(uuid())
  flashSaleId String               @map("flash_sale_id")
  userId      String               @map("user_id")
  orderId     String?              @unique @map("order_id")
  status      FlashSaleOrderStatus @default(RESERVED)
  reservedAt  DateTime             @default(now()) @map("reserved_at")
  paidAt      DateTime?            @map("paid_at")
  expiredAt   DateTime?            @map("expired_at")
  createdAt   DateTime             @default(now()) @map("created_at")
  updatedAt   DateTime             @updatedAt @map("updated_at")
  flashSale FlashSale @relation(fields: [flashSaleId], references: [id])
  user      User      @relation(fields: [userId], references: [id])
  order     Order?    @relation(fields: [orderId], references: [id])
  @@unique([flashSaleId, userId])
  @@index([userId])
  @@index([status])
  @@map("flash_sale_orders")
 }
 // Historical totals without fabricated scheduled dates.
 model LessonSupplement {
  id             String   @id @default(uuid())
  userId         String   @map("user_id")
  requestId      String   @map("request_id") @db.VarChar(80)
  quantity       Int
  membershipId   String?  @map("membership_id")
  deductedTimes  Int      @default(0) @map("deducted_times")
  cardName       String?  @map("card_name")
  remark         String?  @db.VarChar(200)
  operatorId     String   @map("operator_id")
  operatorName   String   @map("operator_name")
  createdAt      DateTime @default(now()) @map("created_at")
  revokedAt      DateTime? @map("revoked_at")
  revokedBy      String?  @map("revoked_by")
  user       User        @relation(fields: [userId], references: [id])
  membership Membership? @relation(fields: [membershipId], references: [id], onDelete: Restrict)
  @@unique([userId, requestId])
  @@index([userId, revokedAt, createdAt])
  @@map("lesson_supplements")
 }
--- a/packages/server/prisma/seed.ts
+++ b/packages/server/prisma/seed.ts
@@ -98,6 +98,7 @@ async function main() {
        openid: 'admin_test_openid',
        nickname: '教练',
        role: UserRole.ADMIN,
        adminBookingSubscriptionCount: 0,
      },
    })
    console.log('  ✅ Admin user created')
--- a/packages/server/prisma/update-studio-gallery.ts
+++ b/packages/server/prisma/update-studio-gallery.ts
@@ -0,0 +1,39 @@
 import { PrismaClient } from '@prisma/client'
 import { DEFAULT_STUDIO_GALLERY_PHOTOS } from '@mp-pilates/shared'
 const prisma = new PrismaClient()
 async function main() {
  console.log('🖼️  Syncing studio gallery photos...')
  const photos = [...DEFAULT_STUDIO_GALLERY_PHOTOS]
  const existing = await prisma.studioConfig.findFirst({ select: { id: true } })
  if (existing) {
    await prisma.studioConfig.update({
      where: { id: existing.id },
      data: { photos },
    })
    console.log(`  ✅ Updated existing studio config with ${photos.length} gallery images`)
  } else {
    await prisma.studioConfig.create({
      data: {
        name: '普拉提工作室',
        address: '请在管理后台设置地址',
        phone: '请在管理后台设置电话',
        cancelHoursLimit: 2,
        photos,
      },
    })
    console.log(`  ✅ Created studio config with ${photos.length} gallery images`)
  }
 }
 main()
  .catch((error) => {
    console.error('❌ Studio gallery sync failed:', error)
    process.exit(1)
  })
  .finally(async () => {
    await prisma.$disconnect()
  })
--- a/packages/server/src/admin/tests/teaching-analytics.service.spec.ts
+++ b/packages/server/src/admin/tests/teaching-analytics.service.spec.ts
@@ -0,0 +1,75 @@
 import 'reflect-metadata'
 import { BadRequestException } from '@nestjs/common'
 import { BookingStatus, UserRole } from '@mp-pilates/shared'
 import { PrismaService } from '../../prisma/prisma.service'
 import { TeachingAnalyticsService } from '../teaching-analytics.service'
 import { AdminController } from '../admin.controller'
 import { ROLES_KEY } from '../../auth/roles.decorator'
 function booking(id: string, userId: string, slotId: string, date: string, status = BookingStatus.COMPLETED) {
  return {
    id, userId, status, user: { nickname: '同名学员' },
    timeSlot: { id: slotId, date: new Date(`${date}T00:00:00Z`), startTime: '09:00', endTime: '10:30' },
    membership: { cardType: { name: '次卡' } },
  }
 }
 describe('TeachingAnalyticsService', () => {
  const findMany = jest.fn()
  const service = new TeachingAnalyticsService({ booking: { findMany } } as unknown as PrismaService)
  beforeEach(() => { jest.useFakeTimers().setSystemTime(new Date('2026-09-09T03:00:00Z')); findMany.mockReset() })
  afterEach(() => jest.useRealTimers())
  it.each(['2026-13', '2026-00', '2026-9', '', '2026-09-01', '1999-12', undefined])('rejects invalid month %s before querying', async month => {
    await expect(service.getMonthly(month as string)).rejects.toBeInstanceOf(BadRequestException)
    expect(findMany).not.toHaveBeenCalled()
  })
  it('counts shared sessions and duration once, students by identity, and excludes other statuses', async () => {
    findMany.mockResolvedValue([
      booking('previous', 'a', 'old', '2026-08-31'),
      booking('1', 'a', 'one', '2026-09-01'), booking('2', 'b', 'one', '2026-09-01'),
      booking('3', 'a', 'two', '2026-09-03'),
      ...[BookingStatus.CANCELLED, BookingStatus.NO_SHOW, BookingStatus.CONFIRMED, BookingStatus.PENDING_CONFIRMATION]
        .map((status, index) => booking(`other${index}`, 'c', `other${index}`, '2026-09-04', status)),
    ])
    const result = await service.getMonthly('2026-09')
    expect(result.summary).toEqual({ sessions: 2, attendances: 3, students: 2, minutes: 180, teachingDays: 2 })
    expect(result.previous.sessions).toBe(1)
    expect(result.records).toHaveLength(7)
    expect(result.records.every(row => row.date.startsWith('2026-09'))).toBe(true)
    expect(findMany).toHaveBeenCalledTimes(1)
  })
  it.each([
    ['2026-01', '2025-12-01', '2026-02-01'],
    ['2024-02', '2024-01-01', '2024-03-01'],
  ])('uses half-open course date boundaries for %s', async (month, from, to) => {
    findMany.mockResolvedValue([])
    const result = await service.getMonthly(month)
    expect(findMany).toHaveBeenCalledWith(expect.objectContaining({
      where: { timeSlot: { date: { gte: new Date(`${from}T00:00:00Z`), lt: new Date(`${to}T00:00:00Z`) } } },
    }))
    expect(result.previousMonth).toBe(from.slice(0, 7))
    expect(result.summary).toEqual({ sessions: 0, attendances: 0, students: 0, minutes: 0, teachingDays: 0 })
  })
  it('flags only unfinished bookings past their China-time end, without converting status', async () => {
    const future = booking('future', 'b', 'future', '2026-09-09', BookingStatus.CONFIRMED)
    future.timeSlot.endTime = '11:30'
    findMany.mockResolvedValue([
      booking('past', 'a', 'past', '2026-09-09', BookingStatus.CONFIRMED), future,
      booking('cancel', 'c', 'cancel', '2026-09-09', BookingStatus.CANCELLED),
    ])
    const result = await service.getMonthly('2026-09')
    expect(result.records.map(row => row.needsReview)).toEqual([true, false, false])
    expect(result.summary.sessions).toBe(0)
    expect(result.records[0].status).toBe(BookingStatus.CONFIRMED)
  })
  it('inherits the admin-only controller role and authentication guards', () => {
    expect(Reflect.getMetadata(ROLES_KEY, AdminController)).toEqual([UserRole.ADMIN])
    const guards = Reflect.getMetadata('__guards__', AdminController) as Array<{ name: string }>
    expect(guards.map(guard => guard.name)).toEqual(['JwtAuthGuard', 'RolesGuard'])
  })
 })
--- a/packages/server/src/admin/admin.controller.ts
+++ b/packages/server/src/admin/admin.controller.ts
@@ -1,4 +1,5 @@
-import { Controller, Get, UseGuards } from '@nestjs/common'
+import { TeachingAnalyticsService } from './teaching-analytics.service'
 import { Controller, Get, Query, UseGuards } from '@nestjs/common'
 import { JwtAuthGuard } from '../auth/jwt-auth.guard'
 import { Roles } from '../auth/roles.decorator'
 import { RolesGuard } from '../auth/roles.guard'
@@ -15,7 +16,12 @@ interface AdminStats {
@UseGuards(JwtAuthGuard, RolesGuard)
@Roles(UserRole.ADMIN)
 export class AdminController {
-  constructor(private readonly prisma: PrismaService) {}
+  constructor(private readonly prisma: PrismaService, private readonly analytics: TeachingAnalyticsService) {}
  @Get('teaching-analytics')
  getTeachingAnalytics(@Query('month') month: string) {
    return this.analytics.getMonthly(month)
  }
  @Get('stats')
  async getStats(): Promise<AdminStats> {
--- a/packages/server/src/admin/admin.module.ts
+++ b/packages/server/src/admin/admin.module.ts
@@ -1,7 +1,9 @@
 import { TeachingAnalyticsService } from './teaching-analytics.service'
 import { Module } from '@nestjs/common'
 import { AdminController } from './admin.controller'
@Module({
  controllers: [AdminController],
  providers: [TeachingAnalyticsService],
 })
 export class AdminModule {}
--- a/packages/server/src/admin/teaching-analytics.service.ts
+++ b/packages/server/src/admin/teaching-analytics.service.ts
@@ -0,0 +1,58 @@
 import { BadRequestException, Injectable } from '@nestjs/common'
 import { BookingStatus, type TeachingAnalytics, type TeachingAnalyticsRecord, type TeachingAnalyticsSummary } from '@mp-pilates/shared'
 import { PrismaService } from '../prisma/prisma.service'
@Injectable()
 export class TeachingAnalyticsService {
  constructor(private readonly prisma: PrismaService) {}
  async getMonthly(month: string): Promise<TeachingAnalytics> {
    if (typeof month !== 'string' || !/^(20\d{2})-(0[1-9]|1[0-2])$/.test(month)) {
      throw new BadRequestException('月份格式应为 YYYY-MM，范围为 2000—2099 年')
    }
    const [year, number] = month.split('-').map(Number)
    const start = new Date(Date.UTC(year, number - 1, 1))
    const previousStart = new Date(Date.UTC(year, number - 2, 1))
    const end = new Date(Date.UTC(year, number, 1))
    const now = new Date()
    const bookings = await this.prisma.booking.findMany({
      where: { timeSlot: { date: { gte: previousStart, lt: end } } },
      select: {
        id: true, userId: true, status: true,
        user: { select: { nickname: true } },
        timeSlot: { select: { id: true, date: true, startTime: true, endTime: true } },
        membership: { select: { cardType: { select: { name: true } } } },
      },
      orderBy: [{ timeSlot: { date: 'asc' } }, { timeSlot: { startTime: 'asc' } }, { id: 'asc' }],
    })
    const rows: TeachingAnalyticsRecord[] = bookings.map((booking) => {
      const slot = booking.timeSlot
      const date = slot.date.toISOString().slice(0, 10)
      const unfinished = booking.status === BookingStatus.CONFIRMED || booking.status === BookingStatus.PENDING_CONFIRMATION
      return {
        id: booking.id, userId: booking.userId, nickname: booking.user.nickname,
        slotId: slot.id, date, startTime: slot.startTime, endTime: slot.endTime,
        cardName: booking.membership.cardType.name, status: booking.status as BookingStatus,
        needsReview: unfinished && new Date(`${date}T${slot.endTime}:00+08:00`).getTime() < now.getTime(),
      }
    })
    const records = rows.filter((row) => row.date >= start.toISOString().slice(0, 10))
    return {
      month, generatedAt: now.toISOString(), records,
      summary: this.summarize(records), previousMonth: previousStart.toISOString().slice(0, 7),
      previous: this.summarize(rows.filter((row) => row.date < start.toISOString().slice(0, 10))),
    }
  }
  private summarize(rows: TeachingAnalyticsRecord[]): TeachingAnalyticsSummary {
    const completed = rows.filter((row) => row.status === BookingStatus.COMPLETED)
    const slots = new Map(completed.map((row) => [row.slotId, row]))
    const minutes = [...slots.values()].reduce((total, slot) => {
      const parse = (time: string): number => Number(time.slice(0, 2)) * 60 + Number(time.slice(3, 5))
      return total + Math.max(0, parse(slot.endTime) - parse(slot.startTime))
    }, 0)
    return { sessions: slots.size, attendances: completed.length,
      students: new Set(completed.map((row) => row.userId)).size,
      teachingDays: new Set(completed.map((row) => row.date)).size, minutes }
  }
 }
--- a/packages/server/src/app.module.ts
+++ b/packages/server/src/app.module.ts
@@ -11,6 +11,8 @@ import { BookingModule } from './booking/booking.module'
 import { SchedulerModule } from './scheduler/scheduler.module'
 import { PaymentModule } from './payment/payment.module'
 import { AdminModule } from './admin/admin.module'
 import { FlashSaleModule } from './flash-sale/flash-sale.module'
 import { InviteModule } from './invite/invite.module'
@Module({
  imports: [
@@ -28,6 +30,8 @@ import { AdminModule } from './admin/admin.module'
    SchedulerModule,
    PaymentModule,
    AdminModule,
    FlashSaleModule,
    InviteModule,
  ],
  controllers: [AppController],
 })
--- a/packages/server/src/auth/tests/auth.service.spec.ts
+++ b/packages/server/src/auth/tests/auth.service.spec.ts
@@ -1,10 +1,12 @@
 import { Test, TestingModule } from '@nestjs/testing'
 import { JwtService } from '@nestjs/jwt'
 import { UnauthorizedException } from '@nestjs/common'
-import { UserRole } from '@mp-pilates/shared'
+import { MembershipStatus, UserRole } from '@mp-pilates/shared'
 import { ConfigService } from '@nestjs/config'
 import { AuthService, RANDOM_FN_TOKEN } from '../auth.service'
 import { WechatService } from '../wechat.service'
 import { PrismaService } from '../../prisma/prisma.service'
 import { InviteService } from '../../invite/invite.service'
 // ─── Fixtures ────────────────────────────────────────────────────────────────
@@ -22,6 +24,8 @@ const mockUser = {
  nickname: TEST_NICKNAME,
  avatarUrl: null,
  role: UserRole.MEMBER,
  adminBookingSubscriptionCount: 0,
  lastLoginAt: new Date('2024-01-01T00:00:00Z'),
  createdAt: new Date(),
  updatedAt: new Date(),
 }
@@ -29,6 +33,9 @@ const mockUser = {
 // ─── Mocks ───────────────────────────────────────────────────────────────────
 const mockPrismaService = {
  membership: {
    count: jest.fn(),
  },
  user: {
    findUnique: jest.fn(),
    findUniqueOrThrow: jest.fn(),
@@ -46,6 +53,14 @@ const mockJwtService = {
  sign: jest.fn(),
 }
 const mockInviteService = {
  bindInviterToUser: jest.fn(),
 }
 const mockConfigService = {
  get: jest.fn(),
 }
 // ─── Tests ───────────────────────────────────────────────────────────────────
 describe('AuthService', () => {
@@ -58,6 +73,8 @@ describe('AuthService', () => {
        { provide: PrismaService, useValue: mockPrismaService },
        { provide: WechatService, useValue: mockWechatService },
        { provide: JwtService, useValue: mockJwtService },
        { provide: InviteService, useValue: mockInviteService },
        { provide: ConfigService, useValue: mockConfigService },
        { provide: RANDOM_FN_TOKEN, useValue: () => 0 }, // deterministic nickname
      ],
    }).compile()
@@ -66,6 +83,8 @@ describe('AuthService', () => {
    jest.clearAllMocks()
    mockJwtService.sign.mockReturnValue(JWT_TOKEN)
    mockPrismaService.membership.count.mockResolvedValue(0)
    mockConfigService.get.mockReturnValue('tmpl-booking-confirmed')
  })
  // ── login ──────────────────────────────────────────────────────────────────
@@ -91,10 +110,35 @@ describe('AuthService', () => {
        where: { openid: OPENID },
      })
      expect(mockPrismaService.user.create).toHaveBeenCalledWith({
-        data: { openid: OPENID, nickname: TEST_NICKNAME },
+        data: {
          openid: OPENID,
          nickname: TEST_NICKNAME,
          adminBookingSubscriptionCount: 0,
          lastLoginAt: expect.any(Date),
        },
      })
-      expect(result.user).toEqual(mockUser)
+      expect(result.user).toEqual(expect.objectContaining({
        id: mockUser.id,
        phone: mockUser.phone,
        nickname: mockUser.nickname,
        avatarUrl: mockUser.avatarUrl,
        role: mockUser.role,
        activeMembershipCount: 0,
        inviteShareEligible: false,
        adminBookingSubscriptionCount: 0,
      }))
      expect(result.user.subscriptionMessageTemplates.templates).toHaveLength(2)
      expect(result.isNewUser).toBe(true)
      expect(mockInviteService.bindInviterToUser).toHaveBeenCalledWith(USER_ID, undefined)
    })
    it('binds inviter for new users when inviterId is present', async () => {
      mockPrismaService.user.findUnique.mockResolvedValue(null)
      mockPrismaService.user.create.mockResolvedValue(mockUser)
      await authService.login(loginCode, undefined, undefined, 'inviter-001')
      expect(mockInviteService.bindInviterToUser).toHaveBeenCalledWith(USER_ID, 'inviter-001')
    })
    it('creates user with unionid when present', async () => {
@@ -110,12 +154,19 @@ describe('AuthService', () => {
      await authService.login(loginCode)
      expect(mockPrismaService.user.create).toHaveBeenCalledWith({
-        data: { openid: OPENID, unionid, nickname: TEST_NICKNAME },
+        data: {
          openid: OPENID,
          unionid,
          nickname: TEST_NICKNAME,
          adminBookingSubscriptionCount: 0,
          lastLoginAt: expect.any(Date),
        },
      })
    })
    it('returns existing user when openid already exists', async () => {
      mockPrismaService.user.findUnique.mockResolvedValue(mockUser)
      mockPrismaService.user.update.mockResolvedValue(mockUser)
      const result = await authService.login(loginCode)
@@ -123,12 +174,21 @@ describe('AuthService', () => {
        where: { openid: OPENID },
      })
      expect(mockPrismaService.user.create).not.toHaveBeenCalled()
-      expect(result.user).toEqual(mockUser)
+      expect(mockPrismaService.user.update).toHaveBeenCalledWith({
        where: { id: USER_ID },
        data: { lastLoginAt: expect.any(Date) },
      })
      expect(result.user).toEqual(expect.objectContaining({
        id: mockUser.id,
        nickname: mockUser.nickname,
        role: mockUser.role,
      }))
      expect(result.isNewUser).toBe(false)
    })
    it('returns a valid JWT token', async () => {
      mockPrismaService.user.findUnique.mockResolvedValue(mockUser)
      mockPrismaService.user.update.mockResolvedValue(mockUser)
      const result = await authService.login(loginCode)
@@ -141,14 +201,40 @@ describe('AuthService', () => {
    it('returns both token and user in result', async () => {
      mockPrismaService.user.findUnique.mockResolvedValue(mockUser)
      mockPrismaService.user.update.mockResolvedValue(mockUser)
      const result = await authService.login(loginCode)
-      expect(result).toEqual({
+      expect(result).toEqual(expect.objectContaining({
        token: JWT_TOKEN,
        user: mockUser,
        isNewUser: false,
      }))
      expect(result.user).toEqual(expect.objectContaining({
        id: mockUser.id,
        subscriptionMessageTemplates: {
          templates: [
            expect.objectContaining({ scene: 'BOOKING_CREATED' }),
            expect.objectContaining({ scene: 'ADMIN_BOOKING_CREATED' }),
          ],
        },
      }))
    })
    it('includes active membership count and invite eligibility in login response', async () => {
      mockPrismaService.user.findUnique.mockResolvedValue(mockUser)
      mockPrismaService.user.update.mockResolvedValue(mockUser)
      mockPrismaService.membership.count.mockResolvedValue(2)
      const result = await authService.login(loginCode)
      expect(mockPrismaService.membership.count).toHaveBeenCalledWith({
        where: {
          userId: USER_ID,
          status: MembershipStatus.ACTIVE,
        },
      })
      expect(result.user.activeMembershipCount).toBe(2)
      expect(result.user.inviteShareEligible).toBe(true)
    })
  })
@@ -166,6 +252,7 @@ describe('AuthService', () => {
        sessionKey: SESSION_KEY,
      })
      mockPrismaService.user.findUnique.mockResolvedValue(mockUser)
      mockPrismaService.user.update.mockResolvedValue(mockUser)
      mockJwtService.sign.mockReturnValue(JWT_TOKEN)
      await authService.login('login_code')
    })
--- a/packages/server/src/auth/auth.controller.ts
+++ b/packages/server/src/auth/auth.controller.ts
@@ -1,12 +1,13 @@
 import {
  Controller,
  Post,
  Body,
-  UseGuards,
+  Controller,
  Request,
  HttpCode,
  HttpStatus,
  Post,
  Request,
  UseGuards,
 } from '@nestjs/common'
 import type { UserProfileResponse } from '@mp-pilates/shared'
 import { AuthService } from './auth.service'
 import { LoginDto } from './dto/login.dto'
 import { BindPhoneDto } from './dto/bind-phone.dto'
@@ -24,11 +25,12 @@ export class AuthController {
  @Post('login')
  @HttpCode(HttpStatus.OK)
-  async login(@Body() loginDto: LoginDto): Promise<{ token: string; user: User; isNewUser: boolean }> {
+  async login(@Body() loginDto: LoginDto): Promise<{ token: string; user: UserProfileResponse; isNewUser: boolean }> {
    return this.authService.login(
      loginDto.code,
      loginDto.nickname,
      loginDto.avatarUrl,
      loginDto.inviterId,
    )
  }
--- a/packages/server/src/auth/auth.module.ts
+++ b/packages/server/src/auth/auth.module.ts
@@ -2,16 +2,21 @@ import { Module } from '@nestjs/common'
 import { PassportModule } from '@nestjs/passport'
 import { JwtModule } from '@nestjs/jwt'
 import { ConfigModule, ConfigService } from '@nestjs/config'
 import { MembershipModule } from '../membership/membership.module'
 import { AuthService, RANDOM_FN_TOKEN } from './auth.service'
 import { AuthController } from './auth.controller'
 import { WechatService } from './wechat.service'
 import { JwtStrategy } from './jwt.strategy'
 import { JwtAuthGuard } from './jwt-auth.guard'
 import { RolesGuard } from './roles.guard'
 import { InviteModule } from '../invite/invite.module'
@Module({
  imports: [
    PassportModule,
    InviteModule,
    ConfigModule,
    MembershipModule,
    JwtModule.registerAsync({
      imports: [ConfigModule],
      inject: [ConfigService],
--- a/packages/server/src/auth/auth.service.ts
+++ b/packages/server/src/auth/auth.service.ts
@@ -1,13 +1,22 @@
 import { Inject, Injectable, UnauthorizedException } from '@nestjs/common'
 import { JwtService } from '@nestjs/jwt'
 import { User } from '@prisma/client'
-import { UserRole } from '@mp-pilates/shared'
+import {
  MembershipStatus,
  SubscriptionMessageScene,
  type SubscriptionMessageTemplate,
  type SubscriptionMessageTemplateConfig,
  type UserProfileResponse,
  UserRole,
 } from '@mp-pilates/shared'
 import { ConfigService } from '@nestjs/config'
 import { PrismaService } from '../prisma/prisma.service'
 import { WechatService } from './wechat.service'
 import { InviteService } from '../invite/invite.service'
 export interface LoginResult {
  token: string
-  user: User
+  user: UserProfileResponse
  isNewUser: boolean
 }
@@ -55,13 +64,59 @@ export class AuthService {
    private readonly prisma: PrismaService,
    private readonly jwtService: JwtService,
    private readonly wechatService: WechatService,
    private readonly inviteService: InviteService,
    private readonly configService: ConfigService,
    @Inject(RANDOM_FN_TOKEN) private readonly randomFn: () => number = Math.random,
  ) {}
  private buildSubscriptionTemplateConfig(): SubscriptionMessageTemplateConfig {
    const templates = [
      {
        templateId: this.configService.get<string>('WX_SUBSCRIBE_TEMPLATE_BOOKING_CONFIRMED', ''),
        scene: SubscriptionMessageScene.BOOKING_CREATED,
        description: '购卡或预约时请求一次订阅，用于后续预约确认通知推送',
        usageTarget: 'consent' as const,
      },
      {
        templateId: this.configService.get<string>('WX_SUBSCRIBE_TEMPLATE_BOOKING_CONFIRMED', ''),
        scene: SubscriptionMessageScene.ADMIN_BOOKING_CREATED,
        description: '管理员主动增加预约提醒次数，用于接收学员新预约通知',
        usageTarget: 'counter' as const,
      },
    ] satisfies SubscriptionMessageTemplate[]
    return {
      templates: templates.filter((item) => item.templateId),
    }
  }
  private async mapLoginUser(user: User): Promise<UserProfileResponse> {
    const activeMembershipCount = await this.prisma.membership.count({
      where: {
        userId: user.id,
        status: MembershipStatus.ACTIVE,
      },
    })
    return {
      id: user.id,
      phone: user.phone,
      nickname: user.nickname,
      avatarUrl: user.avatarUrl,
      role: user.role as UserRole,
      activeMembershipCount,
      inviteShareEligible: activeMembershipCount > 0,
      adminBookingSubscriptionCount: user.adminBookingSubscriptionCount,
      subscriptionMessageTemplates: this.buildSubscriptionTemplateConfig(),
      createdAt: user.createdAt.toISOString(),
    }
  }
  async login(
    code: string,
    nickname?: string,
    avatarUrl?: string,
    inviterId?: string,
  ): Promise<LoginResult> {
    const { openid, unionid, sessionKey } =
      await this.wechatService.code2Session(code)
@@ -71,36 +126,37 @@ export class AuthService {
    })
    const isNewUser = existingUser === null
    const now = new Date()
-    const user =
+    const user = isNewUser
-      existingUser ??
+      ? await this.prisma.user.create({
      (await this.prisma.user.create({
          data: {
            openid,
            ...(unionid !== undefined && { unionid }),
            nickname: nickname || generateDefaultNickname(this.randomFn),
            ...(avatarUrl && { avatarUrl }),
            adminBookingSubscriptionCount: 0,
            lastLoginAt: now,
          },
        })
      : await this.prisma.user.update({
          where: { id: existingUser.id },
          data: {
            lastLoginAt: now,
            ...(avatarUrl && { avatarUrl, ...(nickname && { nickname }) }),
          },
      }))
    // Update avatar for existing users if new avatar is provided
    if (existingUser && avatarUrl) {
      const updated = await this.prisma.user.update({
        where: { id: existingUser.id },
        data: { avatarUrl, ...(nickname && { nickname }) },
        })
      sessionKeyStore.set(updated.id, sessionKey)
      const payload: JwtPayload = { sub: updated.id, role: updated.role as UserRole }
      const token = this.jwtService.sign(payload)
      return { token, user: updated, isNewUser: false }
    }
    sessionKeyStore.set(user.id, sessionKey)
    if (isNewUser) {
      await this.inviteService.bindInviterToUser(user.id, inviterId)
    }
    const payload: JwtPayload = { sub: user.id, role: user.role as UserRole }
    const token = this.jwtService.sign(payload)
-    return { token, user, isNewUser }
+    return { token, user: await this.mapLoginUser(user), isNewUser }
  }
  async bindPhone(
--- a/packages/server/src/auth/dto/login.dto.ts
+++ b/packages/server/src/auth/dto/login.dto.ts
@@ -12,4 +12,8 @@ export class LoginDto {
  @IsString()
  @IsOptional()
  avatarUrl?: string
  @IsString()
  @IsOptional()
  inviterId?: string
 }
--- a/packages/server/src/booking/tests/booking.service.spec.ts
+++ b/packages/server/src/booking/tests/booking.service.spec.ts
--- a/packages/server/src/booking/booking.controller.ts
+++ b/packages/server/src/booking/booking.controller.ts
@@ -1,4 +1,5 @@
 import {
  BadRequestException,
  Body,
  Controller,
  Get,
@@ -15,6 +16,7 @@ import { Roles } from '../auth/roles.decorator'
 import { CurrentUser } from '../common/decorators/current-user.decorator'
 import { BookingService } from './booking.service'
 import { CreateBookingDto } from './dto/create-booking.dto'
 import { AdminArrangeBookingDto } from './dto/admin-arrange-booking.dto'
@Controller()
 export class BookingController {
@@ -40,6 +42,12 @@ export class BookingController {
    return this.bookingService.cancelBooking(userId, id)
  }
  @Get('booking/my/activity')
  @UseGuards(JwtAuthGuard)
  async getPracticeActivity(@CurrentUser('sub') userId: string) {
    return this.bookingService.getPracticeActivity(userId)
  }
  @Get('booking/my/upcoming')
  @UseGuards(JwtAuthGuard)
  async getUpcomingBookings(@CurrentUser('sub') userId: string) {
@@ -91,6 +99,26 @@ export class BookingController {
    )
  }
  @Post('admin/bookings')
  @UseGuards(JwtAuthGuard, RolesGuard)
  @Roles(UserRole.ADMIN)
  async arrangeBooking(
    @CurrentUser('sub') operatorId: string,
    @Body() dto: AdminArrangeBookingDto,
  ) {
    return this.bookingService.adminArrangeBooking(operatorId, dto)
  }
  @Get('admin/teaching-schedule')
  @UseGuards(JwtAuthGuard, RolesGuard)
  @Roles(UserRole.ADMIN)
  async getTeachingSchedule(@Query('date') date?: string) {
    if (!date) {
      throw new BadRequestException('date is required')
    }
    return this.bookingService.getTeachingScheduleByDate(date)
  }
  @Put('booking/:id/confirm')
  @UseGuards(JwtAuthGuard, RolesGuard)
  @Roles(UserRole.ADMIN)
--- a/packages/server/src/booking/booking.module.ts
+++ b/packages/server/src/booking/booking.module.ts
@@ -3,9 +3,11 @@ import { BookingController } from './booking.controller'
 import { BookingService } from './booking.service'
 import { MembershipModule } from '../membership/membership.module'
 import { StudioModule } from '../studio/studio.module'
 import { UserModule } from '../user/user.module'
 import { InviteModule } from '../invite/invite.module'
@Module({
-  imports: [MembershipModule, StudioModule],
+  imports: [MembershipModule, StudioModule, UserModule, InviteModule],
  controllers: [BookingController],
  providers: [BookingService],
  exports: [BookingService],
--- a/packages/server/src/booking/booking.service.ts
+++ b/packages/server/src/booking/booking.service.ts
@@ -6,11 +6,21 @@ import {
  NotFoundException,
 } from '@nestjs/common'
 import { Booking, Membership, TimeSlot, BookingStatusHistory } from '@prisma/client'
-import { BookingStatus, CardTypeCategory, MembershipStatus, TimeSlotStatus } from '@mp-pilates/shared'
+import {
  BookingStatus,
  CardTypeCategory,
  MembershipStatus,
  TimeSlotStatus,
  type TeachingScheduleSlot,
  type PracticeActivity,
 } from '@mp-pilates/shared'
 import { PrismaService } from '../prisma/prisma.service'
 import { MembershipService } from '../membership/membership.service'
 import { StudioService } from '../studio/studio.service'
 import { SubscriptionMessageService } from '../user/subscription-message.service'
 import { CreateBookingDto } from './dto/create-booking.dto'
 import { AdminArrangeBookingDto } from './dto/admin-arrange-booking.dto'
 import { InviteService } from '../invite/invite.service'
 // ─── Types ─────────────────────────────────────────────────────────────────
@@ -48,6 +58,8 @@ export class BookingService {
    private readonly prisma: PrismaService,
    private readonly membershipService: MembershipService,
    private readonly studioService: StudioService,
    private readonly subscriptionMessageService: SubscriptionMessageService,
    private readonly inviteService: InviteService,
  ) {}
  // ─── Create Booking ──────────────────────────────────────────────────────
@@ -70,15 +82,20 @@ export class BookingService {
        )
      }
-      // 2. Check for active (PENDING_CONFIRMATION or CONFIRMED) booking — cancelled bookings don't block re-booking
+      // 2. Find existing booking record for this user + slot.
-      const existing = await tx.booking.findFirst({
+      // The DB keeps a unique key on this pair, so cancelled bookings must be revived instead of recreated.
      const existing = await tx.booking.findUnique({
        where: {
          userId_timeSlotId: {
            userId,
            timeSlotId: dto.timeSlotId,
-          status: { in: [BookingStatus.PENDING_CONFIRMATION, BookingStatus.CONFIRMED] },
+          },
        },
      })
-      if (existing) {
+      if (
        existing &&
        (existing.status === 'PENDING_CONFIRMATION' || existing.status === 'CONFIRMED')
      ) {
        throw new ConflictException('You have already booked this time slot')
      }
@@ -99,38 +116,47 @@ export class BookingService {
        )
      }
-      const cardType = membership.cardType
+      // A card cannot be used after its validity period ends.
      const isTimeBased =
        cardType.type === CardTypeCategory.TIMES ||
        cardType.type === CardTypeCategory.TRIAL
      if (isTimeBased) {
        // 4a. TIMES / TRIAL: must have remaining times (check at confirm time, not booking time)
      } else {
        // 4b. DURATION: must not be expired
      if (membership.expireDate <= new Date()) {
        throw new BadRequestException('Membership has expired')
      }
      }
-      // 5. Create booking with PENDING_CONFIRMATION status
+      // 5. Create booking or revive a previously cancelled booking.
-      const newBooking = await tx.booking.create({
+      const newBooking = existing?.status === BookingStatus.CANCELLED
        ? await tx.booking.update({
          where: { id: existing.id },
          data: {
            membershipId: dto.membershipId,
            membershipTimesDeducted: false,
            status: BookingStatus.PENDING_CONFIRMATION,
            cancelledAt: null,
            confirmedAt: null,
            completedAt: null,
            operatorId: null,
          },
        })
        : await tx.booking.create({
          data: {
            userId,
            timeSlotId: dto.timeSlotId,
            membershipId: dto.membershipId,
            membershipTimesDeducted: false,
            status: BookingStatus.PENDING_CONFIRMATION,
          },
        })
-      // 6. Record status history: created
+      // 6. Record status history: created or re-created from cancelled state.
      await tx.bookingStatusHistory.create({
        data: {
          bookingId: newBooking.id,
-          fromStatus: null,
+          fromStatus: existing?.status === BookingStatus.CANCELLED
            ? BookingStatus.CANCELLED
            : null,
          toStatus: BookingStatus.PENDING_CONFIRMATION,
          operatorId: userId,
-          remark: '学员发起预约',
+          remark: existing?.status === BookingStatus.CANCELLED
            ? '学员重新发起预约'
            : '学员发起预约',
        },
      })
@@ -138,7 +164,9 @@ export class BookingService {
    })
    // Re-fetch with relations after transaction
-    return this.fetchBookingWithRelations(booking.id)
+    const bookingWithRelations = await this.fetchBookingWithRelations(booking.id)
    await this.trySendAdminBookingCreatedSubscriptionMessages(bookingWithRelations)
    return bookingWithRelations
  }
  // ─── Confirm Booking (Admin) ─────────────────────────────────────────────
@@ -168,19 +196,16 @@ export class BookingService {
      }
      // 2. Validate membership still has available times
      const cardType = existing.membership.cardType
      const isTimeBased =
        cardType.type === CardTypeCategory.TIMES ||
        cardType.type === CardTypeCategory.TRIAL
      if (isTimeBased) {
        if ((existing.membership.remainingTimes ?? 0) <= 0) {
          throw new BadRequestException('No remaining times on this membership')
        }
      } else {
      if (existing.membership.expireDate <= new Date()) {
        throw new BadRequestException('Membership has expired')
      }
      const isCountLimited = existing.membership.remainingTimes !== null
      if (isCountLimited) {
        if ((existing.membership.remainingTimes ?? 0) <= 0) {
          throw new BadRequestException('No remaining times on this membership')
        }
      }
      // 3. Update booking status to CONFIRMED
@@ -188,6 +213,7 @@ export class BookingService {
        where: { id: bookingId },
        data: {
          status: BookingStatus.CONFIRMED,
          membershipTimesDeducted: isCountLimited,
          confirmedAt: new Date(),
          operatorId,
        },
@@ -207,7 +233,7 @@ export class BookingService {
      })
      // 5. Deduct membership times
-      if (isTimeBased) {
+      if (isCountLimited) {
        const newRemainingTimes = (existing.membership.remainingTimes ?? 0) - 1
        const newMembershipStatus =
          newRemainingTimes <= 0 ? MembershipStatus.USED_UP : MembershipStatus.ACTIVE
@@ -235,7 +261,153 @@ export class BookingService {
      return updated
    })
-    return this.fetchBookingWithRelations(booking.id)
+    const confirmedBooking = await this.fetchBookingWithRelations(booking.id)
    await this.trySendBookingConfirmedSubscriptionMessage(confirmedBooking)
    return confirmedBooking
  }
  async adminArrangeBooking(
    operatorId: string,
    dto: AdminArrangeBookingDto,
  ): Promise<BookingWithRelations> {
    const booking = await this.prisma.$transaction(async (tx) => {
      const timeSlot = await tx.timeSlot.findUnique({
        where: { id: dto.timeSlotId },
      })
      if (!timeSlot) {
        throw new NotFoundException(`TimeSlot ${dto.timeSlotId} not found`)
      }
      if (timeSlot.status !== TimeSlotStatus.OPEN) {
        throw new BadRequestException(
          `TimeSlot is not available (status: ${timeSlot.status})`,
        )
      }
      if (Date.now() >= buildSlotStartMs(timeSlot.date, timeSlot.startTime)) {
        throw new BadRequestException('Cannot arrange a past time slot')
      }
      const user = await tx.user.findUnique({
        where: { id: dto.userId },
        select: { id: true },
      })
      if (!user) {
        throw new NotFoundException(`User ${dto.userId} not found`)
      }
      const existing = await tx.booking.findUnique({
        where: {
          userId_timeSlotId: {
            userId: dto.userId,
            timeSlotId: timeSlot.id,
          },
        },
      })
      if (existing && existing.status !== BookingStatus.CANCELLED) {
        throw new ConflictException('Member already has a booking for this time slot')
      }
      const membership = await tx.membership.findUnique({
        where: { id: dto.membershipId },
        include: { cardType: true },
      })
      if (!membership) {
        throw new NotFoundException(`Membership ${dto.membershipId} not found`)
      }
      if (membership.userId !== dto.userId) {
        throw new ForbiddenException('This membership does not belong to the member')
      }
      if (membership.status !== MembershipStatus.ACTIVE) {
        throw new BadRequestException(
          `Membership is not active (status: ${membership.status})`,
        )
      }
      if (membership.expireDate <= new Date()) {
        throw new BadRequestException('Membership has expired')
      }
      const isCountLimited = membership.remainingTimes !== null
      if (isCountLimited && (membership.remainingTimes ?? 0) <= 0) {
        throw new BadRequestException('No remaining times on this membership')
      }
      const occupied = await tx.timeSlot.updateMany({
        where: {
          id: timeSlot.id,
          status: TimeSlotStatus.OPEN,
          bookedCount: { lt: timeSlot.capacity },
        },
        data: {
          bookedCount: { increment: 1 },
        },
      })
      if (occupied.count !== 1) {
        throw new BadRequestException('Time slot is full')
      }
      const occupiedSlot = await tx.timeSlot.findUnique({ where: { id: timeSlot.id } })
      if (occupiedSlot && occupiedSlot.bookedCount >= occupiedSlot.capacity) {
        await tx.timeSlot.update({
          where: { id: timeSlot.id },
          data: { status: TimeSlotStatus.FULL },
        })
      }
      const now = new Date()
      const arranged = existing
        ? await tx.booking.update({
            where: { id: existing.id },
            data: {
              membershipId: dto.membershipId,
              membershipTimesDeducted: isCountLimited,
              status: BookingStatus.CONFIRMED,
              cancelledAt: null,
              confirmedAt: now,
              completedAt: null,
              operatorId,
            },
          })
        : await tx.booking.create({
            data: {
              userId: dto.userId,
              timeSlotId: timeSlot.id,
              membershipId: dto.membershipId,
              membershipTimesDeducted: isCountLimited,
              status: BookingStatus.CONFIRMED,
              confirmedAt: now,
              operatorId,
            },
          })
      if (isCountLimited) {
        const newRemainingTimes = (membership.remainingTimes ?? 0) - 1
        await tx.membership.update({
          where: { id: membership.id },
          data: {
            remainingTimes: newRemainingTimes,
            status: newRemainingTimes <= 0 ? MembershipStatus.USED_UP : MembershipStatus.ACTIVE,
          },
        })
      }
      await tx.bookingStatusHistory.create({
        data: {
          bookingId: arranged.id,
          fromStatus: existing?.status === BookingStatus.CANCELLED
            ? BookingStatus.CANCELLED
            : null,
          toStatus: BookingStatus.CONFIRMED,
          operatorId,
          remark: '老师代为安排',
        },
      })
      return arranged
    })
    const arrangedBooking = await this.fetchBookingWithRelations(booking.id)
    await this.trySendBookingConfirmedSubscriptionMessage(arrangedBooking)
    return arrangedBooking
  }
  // ─── Complete / NoShow Booking (Admin) ──────────────────────────────────
@@ -303,7 +475,11 @@ export class BookingService {
      return updated
    })
-    return this.fetchBookingWithRelations(booking.id)
+    const result = await this.fetchBookingWithRelations(booking.id)
    if (toStatus === BookingStatus.COMPLETED) {
      await this.inviteService.recordQualifiedTrialBooking(result.id)
    }
    return result
  }
  // ─── Cancel Booking ──────────────────────────────────────────────────────
@@ -389,13 +565,18 @@ export class BookingService {
      })
      // Conditionally restore membership
-      if (withinLimit) {
+      // Legacy bookings predate the snapshot. Keep their former category-based
-        const cardType = booking.membership.cardType
+      // refund behavior instead of inferring from a count that may be edited.
-        const isTimeBased =
+      const membershipTimesDeducted = booking.membershipTimesDeducted ?? (
-          cardType.type === CardTypeCategory.TIMES ||
+        booking.membership.cardType.type === CardTypeCategory.TIMES ||
-          cardType.type === CardTypeCategory.TRIAL
+        booking.membership.cardType.type === CardTypeCategory.TRIAL
      )
-        if (isTimeBased) {
+      if (withinLimit && membershipTimesDeducted) {
        // The snapshot reflects confirmation-time behavior. The card may have
        // been edited after confirmation, so its current count must not decide
        // whether this booking earns a refund.
        if (booking.membership.remainingTimes !== null) {
          const newRemainingTimes = (booking.membership.remainingTimes ?? 0) + 1
          const newStatus =
            booking.membership.status === MembershipStatus.USED_UP
@@ -490,6 +671,34 @@ export class BookingService {
  // ─── Get Upcoming Bookings ────────────────────────────────────────────────
  async getPracticeActivity(userId: string): Promise<PracticeActivity> {
    // Slot dates are stored as UTC midnight date-only values. Determine today's
    // calendar date in China independently of the server's timezone.
    const dayMs = 86_400_000
    const today = new Date(Date.now() + 8 * 3_600_000).toISOString().slice(0, 10)
    const end = new Date(today + 'T00:00:00Z').getTime()
    const start = end - 29 * dayMs
    const bookings = await this.prisma.booking.findMany({
      where: {
        userId,
        status: BookingStatus.COMPLETED,
        timeSlot: { date: { gte: new Date(start), lt: new Date(end + dayMs) } },
      },
      select: { timeSlot: { select: { date: true } } },
    })
    const counts = new Map<string, number>()
    for (const booking of bookings) {
      const date = booking.timeSlot.date.toISOString().slice(0, 10)
      counts.set(date, (counts.get(date) ?? 0) + 1)
    }
    return {
      days: Array.from({ length: 30 }, (_, index) => {
        const date = new Date(start + index * dayMs).toISOString().slice(0, 10)
        return { date, count: counts.get(date) ?? 0 }
      }),
    }
  }
  async getUpcomingBookings(userId: string): Promise<BookingWithRelations[]> {
    const today = new Date()
    today.setUTCHours(0, 0, 0, 0)
@@ -549,6 +758,72 @@ export class BookingService {
    }
  }
  async getTeachingScheduleByDate(date: string): Promise<TeachingScheduleSlot[]> {
    const dayStart = new Date(`${date}T00:00:00.000Z`)
    if (Number.isNaN(dayStart.getTime())) {
      throw new BadRequestException('Invalid date')
    }
    const slots = await this.prisma.timeSlot.findMany({
      where: {
        date: dayStart,
        bookings: {
          some: {
            status: { in: [BookingStatus.PENDING_CONFIRMATION, BookingStatus.CONFIRMED] },
          },
        },
      },
      include: {
        bookings: {
          where: {
            status: { in: [BookingStatus.PENDING_CONFIRMATION, BookingStatus.CONFIRMED] },
          },
          include: {
            user: {
              select: {
                id: true,
                nickname: true,
                phone: true,
              },
            },
          },
          orderBy: [
            { status: 'asc' },
            { createdAt: 'asc' },
          ],
        },
      },
      orderBy: [
        { startTime: 'asc' },
        { endTime: 'asc' },
      ],
    })
    return slots
      .map((slot) => ({
        slotId: slot.id,
        date,
        startTime: slot.startTime,
        endTime: slot.endTime,
        bookedCount: slot.bookedCount,
        capacity: slot.capacity,
        students: slot.bookings.map((booking) => ({
          bookingId: booking.id,
          userId: booking.user.id,
          nickname: booking.user.nickname,
          phone: booking.user.phone,
          status: booking.status as BookingStatus,
        })),
      }))
      .sort((a, b) => {
        const byStart = a.startTime.localeCompare(b.startTime)
        if (byStart !== 0) {
          return byStart
        }
        return a.endTime.localeCompare(b.endTime)
      })
  }
  // ─── Private Helpers ─────────────────────────────────────────────────────
  private async fetchBookingWithRelations(bookingId: string): Promise<BookingWithRelations> {
@@ -566,4 +841,90 @@ export class BookingService {
    return { ...booking } as BookingWithRelations
  }
  private async trySendBookingConfirmedSubscriptionMessage(
    booking: BookingWithRelations,
  ): Promise<void> {
    try {
      const user = await this.prisma.user.findUnique({
        where: { id: booking.userId },
        select: { openid: true },
      })
      if (!user?.openid) {
        return
      }
      const studio = await this.studioService.getInfo()
      const bookingDate = booking.timeSlot.date
      const dateLabel = `${bookingDate.getFullYear()}-${String(bookingDate.getMonth() + 1).padStart(2, '0')}-${String(bookingDate.getDate()).padStart(2, '0')}`
      await this.subscriptionMessageService.sendBookingConfirmedMessage({
        openid: user.openid,
        bookingId: booking.id,
        bookingContent: '预约已确认',
        bookingTime: `${dateLabel} ${booking.timeSlot.startTime.slice(0, 5)}`,
        courseName: studio.name || '普拉提课程',
        bookingEndTime: `${dateLabel} ${booking.timeSlot.endTime.slice(0, 5)}`,
      })
    } catch (error) {
      console.error('Send booking confirmed subscription message failed:', error)
    }
  }
  private async trySendAdminBookingCreatedSubscriptionMessages(
    booking: BookingWithRelations,
  ): Promise<void> {
    try {
      const admins = await this.prisma.user.findMany({
        where: {
          role: 'ADMIN',
          adminBookingSubscriptionCount: { gt: 0 },
        },
        select: {
          openid: true,
        },
      })
      if (admins.length === 0) {
        return
      }
      const student = await this.prisma.user.findUnique({
        where: { id: booking.userId },
        select: { nickname: true, phone: true },
      })
      const studio = await this.studioService.getInfo()
      const bookingDate = booking.timeSlot.date
      const dateLabel = `${bookingDate.getFullYear()}-${String(bookingDate.getMonth() + 1).padStart(2, '0')}-${String(bookingDate.getDate()).padStart(2, '0')}`
      const studentLabel = this.buildAdminBookingStudentLabel(student)
      await Promise.allSettled(
        admins
          .filter((admin) => admin.openid)
          .map((admin) => this.subscriptionMessageService.sendAdminBookingCreatedMessage({
            openid: admin.openid,
            bookingId: booking.id,
            bookingContent: `${studentLabel}已预约`.slice(0, 20),
            bookingTime: `${dateLabel} ${booking.timeSlot.startTime.slice(0, 5)}`,
            courseName: studio.name || '普拉提课程',
            bookingEndTime: `${dateLabel} ${booking.timeSlot.endTime.slice(0, 5)}`,
          })),
      )
    } catch (error) {
      console.error('Send admin booking created subscription message failed:', error)
    }
  }
  private buildAdminBookingStudentLabel(student: { nickname: string; phone: string | null } | null): string {
    const nickname = (student?.nickname || '').trim()
    if (nickname) {
      return nickname.slice(0, 8)
    }
    const phone = student?.phone || ''
    if (phone.length >= 4) {
      return `尾号${phone.slice(-4)}`
    }
    return '学员'
  }
 }
--- a/packages/server/src/booking/dto/admin-arrange-booking.dto.ts
+++ b/packages/server/src/booking/dto/admin-arrange-booking.dto.ts
@@ -0,0 +1,12 @@
 import { IsUUID } from 'class-validator'
 export class AdminArrangeBookingDto {
  @IsUUID()
  userId!: string
  @IsUUID()
  membershipId!: string
  @IsUUID()
  timeSlotId!: string
 }
--- a/packages/server/src/common/filters/api-exception.filter.ts
+++ b/packages/server/src/common/filters/api-exception.filter.ts
@@ -8,6 +8,7 @@ import {
 } from '@nestjs/common'
 import type { Request, Response } from 'express'
 import type { ApiResponse } from '@mp-pilates/shared'
 import { formatRequestExtras } from '../utils/request-log'
@Catch()
 export class ApiExceptionFilter implements ExceptionFilter {
@@ -28,15 +29,16 @@ export class ApiExceptionFilter implements ExceptionFilter {
        ? this.extractMessage(exception)
        : '服务器内部错误'
-    // Log all server errors (5xx) with full stack; log 4xx at warn level
+    const extras = formatRequestExtras(request)
    if (status >= 500) {
      this.logger.error(
-        `${request.method} ${request.originalUrl} → ${String(status)} ${message}`,
+        `${request.method} ${request.originalUrl} → ${String(status)} ${message}${extras}`,
        exception instanceof Error ? exception.stack : undefined,
      )
    } else if (status >= 400) {
      this.logger.warn(
-        `${request.method} ${request.originalUrl} → ${String(status)} ${message}`,
+        `${request.method} ${request.originalUrl} → ${String(status)} ${message}${extras}`,
      )
    }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
richarjiang	fcd9531b3c	0.0.2	2026-09-09 10:11:07 +08:00
richarjiang	f4cee127ce	feat: 优化个人中心邀请卡片	2026-09-09 10:10:52 +08:00
richarjiang	99c5c211ad	feat: 支持上课统计功能；优化会员管理默认筛选状态	2026-09-09 10:04:29 +08:00
richarjiang	30ebc1c344	feat: 支持邀请好友功能	2026-09-08 22:31:39 +08:00
richarjiang	5a4d2c7a1b	perf: 优化预约详情 UI	2026-09-08 17:47:38 +08:00
richarjiang	b7e339e40c	0.0.1	2026-09-08 17:31:39 +08:00
richarjiang	8e2db3a74a	perf: 优化我的课程 UI	2026-09-08 17:31:26 +08:00
richarjiang	f54a12efbd	perf: 优化预订页面 UI	2026-09-08 16:35:18 +08:00
richarjiang	b937895bc9	perf: 优化会员卡购买页面	2026-09-08 15:52:34 +08:00
richarjiang	b4b3caac70	perf: 支持课程补录	2026-09-08 15:08:29 +08:00
richarjiang	d1f193e13e	feat: 优化首页、个人中心页面 UI	2026-09-08 14:20:43 +08:00
richarjiang	301f9ae385	feat: 优化页面 UI 以及支持个人中心练习足迹	2026-09-08 11:26:46 +08:00
richarjiang	87d946adb5	fix: 修复月卡无法编辑次数的问题	2026-09-07 18:10:39 +08:00
richarjiang	86ad9ee64f	fix: 老师代约只允许已发布课表，去掉临时加开时段 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-09-07 17:21:19 +08:00
richarjiang	f5c7b7eaac	perf: 优化订阅刷新逻辑	2026-09-07 16:17:57 +08:00
richarjiang	88cd8419c8	feat: 支持同卡种续卡叠加并修复过期登录态支付成功后将次数或有效期叠加到已有会员卡，首页与详情页引导续卡；接口 401 时同步清掉本地登录态。 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-09-07 14:04:11 +08:00
richarjiang	801e2f47da	feat: 补充月卡退卡按次卡单价结算说明 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-09-06 20:23:51 +08:00
richarjiang	15d96c722b	feat: 调整默认排课节奏并限制时间选择第一节 08:00-09:00，之后从 09:30 起每小时一节至 21:30；排课时间仅可选整点或半点。 Co-authored-by: Cursor <cursoragent@cursor.com>	2026-09-06 20:12:52 +08:00
richarjiang	14d7c03b05	perf: 更新微信开发者工具调用 skill	2026-04-19 22:45:43 +08:00
richarjiang	bd3d519b4f	feat(app): 新增个人中心课表视图	2026-04-19 22:23:23 +08:00
richarjiang	9575210b06	feat: 支持分享邀请好友功能	2026-04-19 14:12:25 +08:00
richarjiang	b02f38dcc7	feat(card): add cover image support for card types	2026-04-15 23:50:12 +08:00
richarjiang	4dacd908a6	feat: 优化排课管理	2026-04-15 23:25:09 +08:00
richarjiang	6ab16f508a	feat: 支持画廊图片更新	2026-04-15 13:58:51 +08:00
richarjiang	7ce7cef77c	feat: UI 页面优化	2026-04-14 10:07:31 +08:00
richarjiang	52cc3a2985	fix(app): 修复分享页返回首页	2026-04-13 19:23:16 +08:00
richarjiang	497837c1d8	feat(app): refine teacher profile page content	2026-04-13 19:19:33 +08:00
richarjiang	d45a5b2c14	fix(server): support rebooking cancelled slots	2026-04-13 17:50:14 +08:00
richarjiang	f78cdcc9d1	feat: 添加教练详情页面及相关数据模型	2026-04-13 17:08:17 +08:00
richarjiang	1f45c3dc3f	perf: 个人中心支持展示约课数量	2026-04-12 22:27:36 +08:00
richarjiang	6cee28bf66	feat: 支持管理员消息推送	2026-04-12 22:18:34 +08:00
richarjiang	c60821c5ff	perf: 支持约课以及消息推送能力	2026-04-12 21:44:44 +08:00
richarjiang	9639f44698	fix: 修复订单管理功能	2026-04-12 18:16:18 +08:00
richarjiang	0810f71250	fix: 修复订单列表不能查看的问题	2026-04-10 23:07:56 +08:00
richarjiang	54e30da003	fix(app): 优化首页会员卡闪烁和即将上课卡片交互 - CardShop: 采用 stale-while-revalidate 模式，仅首次加载显示骨架屏，切换 tab 回来时保留旧数据静默刷新，消除列表闪烁 - UpcomingBooking: 补充 PENDING_CONFIRMATION 状态的中文映射和样式 - UpcomingBooking: 卡片点击跳转到预约详情页	2026-04-10 11:29:09 +08:00
richarjiang	57e3227af0	fix(app): 移除已废弃的 uni.getUserProfile 调用修复首次登录失败 uni.getUserProfile 在微信基础库 2.27.1+ 已被移除，调用时抛出 TypeError 导致整个登录流程中断。新用户昵称由后端默认生成，用户可在资料页修改。 Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>	2026-04-10 09:04:16 +08:00
richarjiang	54104c16d2	perf: 支持教师、场馆介绍	2026-04-09 14:29:13 +08:00
richarjiang	a40b4e47e5	perf: 优化 UI	2026-04-09 11:31:12 +08:00
richarjiang	74551085e3	feat: 支持秒杀活动	2026-04-09 10:24:44 +08:00
richarjiang	23bdd05811	feat: 支持会员卡设置	2026-04-07 16:47:56 +08:00
richarjiang	91abedcb86	fix(app): prevent modal disappearing when switching to edit tab Root cause: there was a stale loading overlay outside the tab content (added by a previous subagent) that rendered when editLoading was true, covering the entire modal body. Also loadDetailMembership incorrectly managed editLoading causing state inconsistencies. Fix: - Remove the orphaned loading overlay outside tab content blocks - loadDetailMembership no longer touches editLoading (switchTab owns it) - switchTab uses Promise.all for parallel loading with formReady guard - openDetail resets editLoading/formReady to clean state Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-07 10:22:02 +08:00
richarjiang	0a20aef678	fix(app): ensure edit form initializes after async data loads - switchTab('edit') now awaits fetchCardTypes and loadDetailMembership before calling initEditForm, fixing blank form fields for new cards Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-07 10:13:20 +08:00
richarjiang	e6056bcab1	fix(server): add definite assignment assertions to UpdateUserMembershipDto Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-07 09:53:14 +08:00
richarjiang	f14da2c538	feat(app): add membership edit modal with tab UI - Replace detail-only modal with tab-based (detail/edit) modal - Detail tab shows membership card info, stats, and action buttons - Edit tab provides form to modify card type, remaining times, start/expire dates - Add loadDetailMembership, switchTab, initEditForm, onSaveMembership, onClearMembership functions - Add computed isTimeBasedCard for edit form conditional rendering - Append new styles for modal-header, tab-bar, membership-card, edit-form, etc. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-07 09:51:10 +08:00
richarjiang	b281990808	feat(app): add membership management actions to admin store Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-07 09:44:41 +08:00
richarjiang	cea78aa8d0	feat(server): add admin membership management endpoints Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-07 09:43:45 +08:00
richarjiang	0776bd8630	feat(server): add membership CRUD methods to UserService Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-07 09:42:42 +08:00
richarjiang	867461f892	feat(server): add UpdateUserMembershipDto for admin member card management Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-07 09:41:16 +08:00
richarjiang	13b75c3bed	docs: 补充会员卡编辑功能实现计划 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-07 09:39:43 +08:00
richarjiang	f7f18f5178	docs: 添加会员卡编辑功能设计文档 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>	2026-04-07 09:35:28 +08:00
		`@@ -0,0 +1,2 @@`
							`-- AlterTable`
							ALTER TABLE `users` ADD COLUMN `last_login_at` DATETIME(3) NULL;
		`@@ -0,0 +1,2 @@`
							`-- AlterTable`
							ALTER TABLE `bookings` ADD COLUMN `membership_times_deducted` BOOLEAN NULL;