From 8665032da46f65f5460fb14a13aca66bf08814e1 Mon Sep 17 00:00:00 2001
From: yuzhiran-dev <dev@yuzhiran.com>
Date: Mon, 18 May 2026 11:18:02 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20P2=20Mobile=20CSS=20=E5=8F=98=E9=87=8F?=
 =?UTF-8?q?=E5=AF=B9=E9=BD=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 新建 mobile/src/styles/variables.css — Design Token 变量定义
- App.vue — 使用 var(--muted) / var(--foreground) 替代硬编码
- sandbox/index.vue — 完整迁移参考页（品牌色/边框/文字/背景）
- docs/design-tokens.md — 更新 Mobile 迁移对照表
---
 docs/design-tokens.md              | 24 +++++++++++++++++++-----
 docs/progress.md                   |  8 +++++++-
 mobile/src/App.vue                 |  6 +++++-
 mobile/src/pages/sandbox/index.vue | 22 +++++++++++-----------
 mobile/src/styles/variables.css    | 15 +++++++++++++++
 5 files changed, 57 insertions(+), 18 deletions(-)
 create mode 100644 mobile/src/styles/variables.css

diff --git a/docs/design-tokens.md b/docs/design-tokens.md
index 791a382..1b61956 100644
--- a/docs/design-tokens.md
+++ b/docs/design-tokens.md
@@ -118,10 +118,24 @@ page {
 
 ## Mobile (Vue) 迁移清单
 
-| 文件 | 问题 | 修复 |
+| 文件 | 状态 | 备注 |
 |------|------|------|
-| `App.vue` | `background-color: #f5f5f5` | 使用 CSS 变量 |
-| 所有页面 | 硬编码 `#333`/`#666`/`#999`/`#f5f5f5` | 替换为 `var(--foreground)` 等 |
-| 所有页面 | `#4f8cff` 品牌色 | 替换为 `var(--brand)` |
+| `mobile/src/styles/variables.css` | ✅ 新建 | 完整 Design Token CSS 变量定义 |
+| `mobile/src/App.vue` | ✅ 已修复 | 使用 `var(--muted)` / `var(--foreground)` |
+| `mobile/src/pages/sandbox/index.vue` | ✅ 已修复 | 参考页面，全部替换为 CSS 变量 |
+| 其余 16 个页面 | ⏳ | 按 sandbox 模式全局替换硬编码颜色 |
 
-> 此文档在 UI 变更时同步更新。Mobile 迁移见 P0b 跟踪。
+### Mobile 迁移对照表
+
+| 旧值 | 新值 |
+|------|------|
+| `#fff` / `white` | `var(--card)` |
+| `#f5f5f5` | `var(--muted)` |
+| `#333` | `var(--foreground)` |
+| `#666` / `#999` | `var(--muted-foreground)` |
+| `#4f8cff` | `var(--brand)` |
+| `#e0effe` | `var(--brand-light)` |
+| `#f0f0f0` / `#e5e5e5` | `var(--border)` |
+| `12rpx` border-radius | `var(--radius)` |
+
+> 此文档在 UI 变更时同步更新。
diff --git a/docs/progress.md b/docs/progress.md
index d7adcca..851c4a0 100644
--- a/docs/progress.md
+++ b/docs/progress.md
@@ -15,7 +15,13 @@
 | **P0f** | 会话分享链接 — HMAC 签名 + 分享查看页 | ✅ |
 | **全栈验证** | 后端 13 suites / 92 tests / 前端 61 pages | ✅ |
 
-### P1 — 待定义
+### P1 — 学习技能包（全部完成 ✅）
+| 子项 | 说明 | 状态 |
+|------|------|------|
+| **后端** | SkillsModule + 8 技能定义 + 过滤/详情 API | ✅ |
+| **前端** | /skills 市场 + /skills/[id] 详情 + header 入口 | ✅ |
+| **沙盒集成** | 替代硬编码 SCENES，从 API 动态加载，?skill=xxx 支持 | ✅ |
+| **全栈验证** | 后端 92 tests / 前端 70 pages | ✅ |
 
 ### 参考来源
 - opencode 源码克隆到 `/tmp/opencode-source/`（21 packages, 147MB）
diff --git a/mobile/src/App.vue b/mobile/src/App.vue
index 006c711..45f2efc 100644
--- a/mobile/src/App.vue
+++ b/mobile/src/App.vue
@@ -18,8 +18,12 @@ const showTabBar = computed(() => {
 </script>
 
 <style>
+@import './styles/variables.css';
+
 page {
-  background-color: #f5f5f5;
+  background-color: var(--muted);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+  color: var(--foreground);
+  font-size: 28rpx;
 }
 </style>
diff --git a/mobile/src/pages/sandbox/index.vue b/mobile/src/pages/sandbox/index.vue
index 28f160c..44211a8 100644
--- a/mobile/src/pages/sandbox/index.vue
+++ b/mobile/src/pages/sandbox/index.vue
@@ -83,28 +83,28 @@ function onModelChange(e: any) {
 <style scoped>
 .sandbox { display: flex; flex-direction: column; height: 100vh; }
 .model-selector {
-  display: flex; align-items: center; padding: 16rpx 30rpx; background: #fff;
-  border-bottom: 1rpx solid #f0f0f0;
+  display: flex; align-items: center; padding: 16rpx 30rpx; background: var(--card);
+  border-bottom: 1rpx solid var(--border);
 }
-.label { font-size: 26rpx; color: #666; }
-.picker-value { font-size: 26rpx; color: #4f8cff; margin-left: 8rpx; }
+.label { font-size: 26rpx; color: var(--muted-foreground); }
+.picker-value { font-size: 26rpx; color: var(--brand); margin-left: 8rpx; }
 .chat-area { flex: 1; padding: 20rpx 30rpx; overflow-y: auto; }
 .message { margin-bottom: 20rpx; max-width: 80%; }
 .message.user { align-self: flex-end; margin-left: auto; }
 .message.ai { align-self: flex-start; }
-.role { font-size: 22rpx; color: #999; display: block; margin-bottom: 6rpx; }
+.role { font-size: 22rpx; color: var(--muted-foreground); display: block; margin-bottom: 6rpx; }
 .content {
   display: inline-block; padding: 16rpx 20rpx; border-radius: 12rpx; font-size: 28rpx; line-height: 1.6;
 }
-.message.user .content { background: #4f8cff; color: #fff; border-radius: 12rpx 0 12rpx 12rpx; }
-.message.ai .content { background: #fff; color: #333; border-radius: 0 12rpx 12rpx 12rpx; }
+.message.user .content { background: var(--brand); color: #fff; border-radius: 12rpx 0 12rpx 12rpx; }
+.message.ai .content { background: var(--card); color: var(--foreground); border-radius: 0 12rpx 12rpx 12rpx; }
 .input-area {
-  display: flex; align-items: center; padding: 16rpx 30rpx; background: #fff;
-  border-top: 1rpx solid #f0f0f0;
+  display: flex; align-items: center; padding: 16rpx 30rpx; background: var(--card);
+  border-top: 1rpx solid var(--border);
 }
-.input { flex: 1; background: #f5f5f5; border-radius: 12rpx; padding: 16rpx 24rpx; font-size: 28rpx; }
+.input { flex: 1; background: var(--muted); border-radius: 12rpx; padding: 16rpx 24rpx; font-size: 28rpx; }
 .btn-send {
-  background: #4f8cff; color: #fff; border-radius: 10rpx; padding: 14rpx 28rpx;
+  background: var(--brand); color: #fff; border-radius: 10rpx; padding: 14rpx 28rpx;
   font-size: 26rpx; margin-left: 16rpx; border: none;
 }
 </style>
diff --git a/mobile/src/styles/variables.css b/mobile/src/styles/variables.css
new file mode 100644
index 0000000..2e463af
--- /dev/null
+++ b/mobile/src/styles/variables.css
@@ -0,0 +1,15 @@
+/* 宇之然 Design Token — Mobile 版 */
+/* 与 Web 端 CSS 变量保持一致 */
+
+page {
+  --background: #ffffff;
+  --foreground: #0a0a0a;
+  --card: #ffffff;
+  --card-foreground: #0a0a0a;
+  --muted: #f5f5f5;
+  --muted-foreground: #666666;
+  --border: #e5e5e5;
+  --brand: #0070c4;
+  --brand-light: #e0effe;
+  --radius: 12rpx;
+}