fix

.opencode/skills/pancli-design/SKILL.md

@@ -32,120 +32,60 @@ metadata:
 
 ### 1. 现代移动端优先设计
 
-**布局标准:**
+**核心规范:**
 - 移动视口: 375px 宽度 (iPhone SE 基准)
 - 安全区域: 尊重 iOS/Android 安全区域边距
-- 触摸目标: 交互元素最小 44x44px
-- 间距比例: 4px, 8px, 12px, 16px, 24px, 32px (8px 基础网格)
-- 圆角半径: 12px (卡片), 16px (对话框), 24px (药丸/标签), 8px (按钮)
-- 卡片阴影: `0 2px 12px rgba(0,0,0,0.08)` 用于突出表面
+- 交互元素最小触摸目标: 44x44px
+- 间距基于 8px 网格: 4px, 8px, 12px, 16px, 24px, 32px
+- 卡片阴影: `0 2px 12px rgba(0,0,0,0.08)` (亮色模式)
 
-**避免 AI 设计痕迹:**
-- 不要使用通用的 "Dashboard" 占位符文本
-- 不要使用图库照片或 Lorem Ipsum
-- 不要使用过饱和的主色 (#007AFF, 不是 #0088FF)
-- 不要使用生硬的阴影或渐变
-- 不要使用 Comic Sans, Papyrus 或装饰性字体
-- 使用代码库中的真实中文业务术语
+**反 AI 设计痕迹检查清单:**
+- ❌ 使用 "Dashboard", "Lorem Ipsum" 等通用占位符
+- ❌ 使用过饱和的颜色或生硬的渐变
+- ❌ 使用装饰性字体 (Comic Sans, Papyrus)
+- ✅ 使用代码库中的真实中文业务术语
+- ✅ 使用克制的配色和柔和的阴影
+- ✅ 使用专业的系统字体
 
-### 2. 统一色彩系统 (基于实际 v2.pen 日历设计)
+### 2. 统一色彩系统
 
-**亮色主题:**
-```css
-/* 背景色 - 基于实际设计 */
---background-page: #FFFFFF       /* 页面背景 (Calendar frame fill) */
---background-card: #F6F7F8       /* 卡片背景 (statsCard, tCard fills) */
---background-accent: #F5F5F5     /* 强调背景 (notif button) */
-
-/* 文本色 - 基于实际设计 */
---text-primary: #1A1A1A          /* 主文本 (titles, labels) */
---text-secondary: #6B7280        /* 次要文本 (dates, subtitles) */
---text-tertiary: #9CA3AF         /* 三级文本 (weekday labels) */
-
-/* 语义色 - 基于实际设计 */
---accent-red: #FF6B6B            /* 支出/负数 (expense icon) */
---accent-yellow: #FCD34D         /* 警告/中性 (coffee icon) */
---accent-green: #F0FDF4          /* 收入/正数 (badge background) */
---accent-blue: #E0E7FF           /* 智能标签 (smart button) */
---accent-warm: #FFFBEB           /* 温暖色调 (badge background) */
-
-/* 主操作色 */
---primary: #3B82F6               /* 主色调 (FAB button from Budget Stats) */
-
-/* 边框与分割线 */
---border: #E5E7EB                /* 边框颜色 (从设计推断) */
-```
-
-**暗色主题:**
-```css
-/* 背景色 - 基于实际暗色设计 */
---background-page: #09090B       /* 页面背景 (Calendar Dark frame) */
---background-card: #18181B       /* 卡片背景 (dark statsCard, tCard) */
---background-accent: #27272A     /* 强调背景 (dark notif, tCat) */
-
-/* 文本色 - 基于实际暗色设计 */
---text-primary: #F4F4F5          /* 主文本 (dark titles) */
---text-secondary: #A1A1AA        /* 次要文本 (dark dates, subtitles) */
---text-tertiary: #71717A         /* 三级文本 (dark weekday labels) */
-
-/* 语义色 - 暗色模式适配 */
---accent-red: #FF6B6B            /* 保持一致 */
---accent-yellow: #FCD34D         /* 保持一致 */
---accent-green: #064E3B          /* 深绿 (dark badge) */
---accent-blue: #312E81           /* 深蓝 (dark smart button) */
---accent-warm: #451A03           /* 深暖色 (dark badge) */
-
-/* 主操作色 */
---primary: #3B82F6               /* 保持一致 */
-
-/* 边框与分割线 */
---border: #3F3F46                /* 深色边框 */
-```
+**色彩分层:**
+- **背景层**: 页面背景 → 卡片背景 → 强调背景 (三层递进)
+- **文本层**: 主文本 → 次要文本 → 三级文本 (三级层次)
+- **语义色**: 红色(支出/危险) → 黄色(警告) → 绿色(收入/成功) → 蓝色(主操作/信息)
 
 **颜色使用规则:**
-- **页面背景**: 亮色 `#FFFFFF`, 暗色 `#09090B`
-- **卡片背景**: 亮色 `#F6F7F8`, 暗色 `#18181B`
-- **主文本**: 亮色 `#1A1A1A`, 暗色 `#F4F4F5`
-- **次要文本**: 亮色 `#6B7280`, 暗色 `#A1A1AA`
-- **支出/负数**: `#FF6B6B` (两种模式一致)
-- **主操作按钮**: `#3B82F6` (两种模式一致)
-- **圆角**: 12px (小按钮), 16px (卡片), 20px (统计卡片), 22px (图标按钮)
-- **阴影**: 亮色使用柔和阴影, 暗色使用更深的阴影或无阴影
-- **避免**: 纯黑 (#000000) 或纯白 (#FFFFFF) 文本
+- 始终使用语义颜色变量，避免硬编码十六进制值
+- 支出/负数统一使用红色 `#FF6B6B`，收入/正数使用绿色系
+- 主操作按钮统一使用蓝色 `#3B82F6`
+- 避免纯黑 (#000000) 或纯白 (#FFFFFF) 文本，使用柔和的色调
+- 暗色模式下减少阴影强度或完全移除
+- 详细色值参见文末"快速参考"表格
 
-### 3. 排版系统 (基于实际 v2.pen 设计)
+### 3. 排版系统
 
 **字体栈:**
-```css
-/* 标题与大标题 - 基于 v2.pen */
-font-family: 'Bricolage Grotesque', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
+- **标题**: `'Bricolage Grotesque'` - 用于大数值、章节标题
+- **正文**: `'DM Sans'` - 用于界面文本、说明
+- **数字**: `'DIN Alternate'` - 用于金额、数据显示
+- **备选**: `-apple-system, 'PingFang SC'` - 系统默认字体
 
-/* 正文与界面 - 基于 v2.pen */
-font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, 'PingFang SC', sans-serif;
-
-/* 备选: 系统默认 */
-font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB', sans-serif;
-```
-
-**字号比例 (从实际设计提取):**
-| 用途 | 字体 | 大小 | 粗细 | 示例 |
-|------|------|------|------|------|
-| 大标题数值 | Bricolage Grotesque | 32px | 800 | ¥ 1,248.50 (statsVal) |
-| 页面标题 | DM Sans | 24px | 500 | 2026年1月 (subtitle) |
-| 章节标题 | Bricolage Grotesque | 18px | 700 | 每日统计, 交易记录 (titles) |
-| 正文文本 | DM Sans | 15px | 600 | Lunch, Coffee (交易名称) |
-| 说明文字 | DM Sans | 13px | 500 | 12:30 PM, Total Spent (标签) |
-| 微型文字 | DM Sans | 12px | 600 | 一二三四五六日 (星期) |
-
-**中文文本规则:**
-- 使用简体中文
-- 真实业务术语: "每日统计" (daily stats), "交易记录" (transactions)
+**排版原则:**
+- 使用真实中文业务术语，避免 Lorem Ipsum
 - 行高: 1.4-1.6 保证可读性
-- 使用真实业务术语，避免 Lorem Ipsum
+- 数字数据使用等宽字体 (tabular-nums)
+- 字号遵循比例系统，避免任意数值
+- 详细字号比例参见文末"快速参考"表格
 
-### 4. 组件库 (基于实际 v2.pen 设计)
+### 4. 组件库
 
-**卡片 (基于 statsCard, tCard):**
+**设计原则:**
+- 所有尺寸和间距基于 8px 网格系统
+- 圆角: 12px (小按钮), 16px/20px (卡片), 22px/28px (圆形按钮)
+- 交互元素最小触摸目标: 44x44px
+- 详细组件规格参见文末"快速参考"表格
+
+**卡片设计 (基于 statsCard, tCard):**
 ```
 统计卡片 (大卡片):
   - 背景: #F6F7F8 (亮色), #18181B (暗色)
@@ -207,23 +147,16 @@ font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB
 
 **布局模式 (基于 Calendar 结构):**
 ```
-页面容器:
-  - 宽度: 402px (设计视口)
-  - 布局: 垂直
-  - 内边距: 24px (容器边距)
-  - 间距: 16px (章节之间)
-
-头部区域:
-  - 内边距: 8px 24px
-  - 布局: 水平, 两端对齐
-  - 对齐项: 居中
-
-内容区域:
-  - 内边距: 24px
-  - 间距: 12-16px
-  - 布局: 垂直
+页面容器: 402px (设计视口), 垂直布局, 24px 内边距
+头部区域: 水平布局, 两端对齐, 8px 24px 内边距
+内容区域: 垂直布局, 24px 内边距, 12-16px 间距
 ```
 
+**关键布局原则:**
+- 遵循 Flex 容器模式 (见下方"5. 布局模式")
+- 导航栏背景必须透明 (`:deep(.van-nav-bar) { background: transparent !important; }`)
+- 尊重安全区域 (`env(safe-area-inset-bottom)`)
+
 ### 5. 布局模式
 
 **页面结构 (Flex 容器):**
@@ -241,17 +174,17 @@ font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Hiragino Sans GB
     4. bottom-button 或 van-tabbar (固定)
 ```
 
-**导航栏背景透明化 (一致性模式):**
+**导航栏背景透明化 (项目标准模式):**
 ```css
-/* 设置页面容器背景色 */
+/* 所有页面统一设置 */
 :deep(.van-nav-bar) {
   background: transparent !important;
 }
 ```
-**重要:** 项目中所有视图都采用此模式，使导航栏背景透明，与页面背景融合。实现此效果时，请确保：
-- 页面容器有明确的背景色 (亮色: #FFFFFF, 暗色: #09090B)
-- 导航栏始终使用 `:deep(.van-nav-bar)` 选择器
-- 必须添加 `!important` 覆盖 Vant 默认样式
+**关键要求:**
+- 页面容器必须有明确的背景色
+- 必须使用 `:deep()` 选择器覆盖 Vant 样式
+- 必须添加 `!important` 标记
 - 在 `<style scoped>` 块中添加此规则
 
 **安全区域处理:**
@@ -407,42 +340,23 @@ document.documentElement.setAttribute('data-theme', theme.value)
   - 示例: "Budget/ListView", "Budget/EditForm"
 ```
 
-**图层命名:**
-```
-内部元素可用中文:
-  ✅ 预算卡片背景
-  ✅ 金额文本
-  ✅ 操作按钮组
-  
-组件用英文:
-  ✅ CardBackground
-  ✅ AmountLabel
-  ✅ ActionButtons
-```
-
 ### 10. 质量检查清单
 
-**完成设计前:**
-- [ ] 同时创建了亮色和暗色主题
-- [ ] 所有文本使用真实中文业务术语 (无 Lorem Ipsum)
+**设计完成前必检项:**
+- [ ] 同时创建亮色和暗色主题
+- [ ] 使用真实中文业务术语 (无占位文本)
 - [ ] 交互元素 ≥ 44x44px
 - [ ] 间距遵循 8px 网格
-- [ ] 颜色使用语义变量 (非硬编码十六进制)
-- [ ] 圆角: 12px/16px/24px 保持一致
-- [ ] 尊重安全区域边距 (底部: 50px + 安全区域)
-- [ ] 帧正确命名 模块/屏幕/变体
-- [ ] 可复用组件标记为 `reusable: true`
-- [ ] 字号匹配字号比例 (12/14/16/18/24)
-- [ ] 数字数据使用 DIN Alternate
-- [ ] 无 AI 生成的占位内容
-- [ ] 已截图并视觉验证
-- [ ] 导航栏背景设置为透明 (`:deep(.van-nav-bar) { background: transparent !important; }`)
+- [ ] 使用语义颜色变量 (非硬编码)
+- [ ] 导航栏背景透明 (`:deep(.van-nav-bar)`)
+- [ ] 帧命名: 模块-屏幕-变体 格式
+- [ ] 可复用组件标记 `reusable: true`
+- [ ] 两种主题截图验证
 
-**无障碍:**
+**无障碍标准:**
 - [ ] 正文对比度 ≥ 4.5:1
 - [ ] 大文本对比度 ≥ 3:1 (18px+)
-- [ ] 触摸目标清晰分离 (最小 8px 间距)
-- [ ] 颜色不是信息的唯一指示器
+- [ ] 触摸目标间距 ≥ 8px
 
 ## PANCLI 工作流程
 
@@ -804,9 +718,10 @@ delegate_task(
 )
 ```
 
-## 快速参考 (基于实际 v2.pen 设计)
+## 快速参考
+
+**颜色面板 (基于实际 v2.pen 设计):**
 
-**颜色面板:**
 | 名称 | 亮色 | 暗色 | 用途 |
 |------|------|------|------|
 | 页面背景 | #FFFFFF | #09090B | 页面背景 |
@@ -821,7 +736,8 @@ delegate_task(
 | 绿色 | #F0FDF4 | #064E3B | 收入标签 |
 | 蓝色 | #E0E7FF | #312E81 | 信息标签 |
 
-**排版 (实际字体):**
+**排版比例:**
+
 | 用途 | 字体 | 大小 | 粗细 |
 |------|------|------|------|
 | 大数值 | Bricolage Grotesque | 32px | 800 |
@@ -831,26 +747,19 @@ delegate_task(
 | 说明 | DM Sans | 13px | 500 |
 | 微型标签 | DM Sans | 12px | 600 |
 
-**间距与布局 (实际数值):**
-- 容器内边距: 24px (主区域), 20px (卡片), 16px (小卡片)
-- 间距比例: 2px, 4px, 8px, 12px, 14px, 16px
-- 图标大小: 20px
-- 图标按钮: 44x44px
-- FAB 按钮: 56x56px
+**组件规格:**
 
-**圆角 (实际数值):**
-- 小按钮/标签: 12px
-- 卡片: 16px, 20px
-- 图标按钮: 22px (圆形)
-- FAB: 28px (圆形)
-
-**触摸目标:** 最小 44x44px
-
-**视口:** 402px (设计宽度), 移动端优先
+- **容器内边距**: 24px (主区域), 20px (卡片), 16px (小卡片)
+- **间距比例**: 2px, 4px, 8px, 12px, 14px, 16px
+- **圆角**: 12px (标签), 16px/20px (卡片), 22px/28px (圆形按钮)
+- **图标**: 20px
+- **图标按钮**: 44x44px
+- **FAB 按钮**: 56x56px
+- **触摸目标**: 最小 44x44px
+- **设计视口**: 402px 宽度
 
 ---
 
-**版本:** 2.0.0 (使用 v2.pen 实际设计值更新)  
-**最后更新:** 2026-02-03  
-**来源:** .pans/v2.pen 日历 (亮色/暗色)  
+**版本:** 2.0.0  
+**最后更新:** 2026-02-04  
 **维护者:** EmailBill 设计团队