From 1a3d0658bb982d526dba90ff389e1a5d9d0da126 Mon Sep 17 00:00:00 2001 From: SunCheng Date: Wed, 4 Feb 2026 15:31:22 +0800 Subject: [PATCH] fix --- .opencode/skills/pancli-design/SKILL.md | 251 ++++++------------ .../calendar-v2-data-loading-fix/decisions.md | 44 +++ .../calendar-v2-data-loading-fix/learnings.md | 165 ++++++++++++ .../Transaction/TransactionDetailSheet.vue | 5 +- Web/src/views/calendarV2/Index.vue | 1 - Web/src/views/calendarV2/modules/Calendar.vue | 3 +- 6 files changed, 295 insertions(+), 174 deletions(-) create mode 100644 .sisyphus/notepads/calendar-v2-data-loading-fix/decisions.md create mode 100644 .sisyphus/notepads/calendar-v2-data-loading-fix/learnings.md diff --git a/.opencode/skills/pancli-design/SKILL.md b/.opencode/skills/pancli-design/SKILL.md index c76ed4f..5e21c4c 100644 --- a/.opencode/skills/pancli-design/SKILL.md +++ b/.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` 标记 - 在 `