-
+
C
Cheney
qian.huang@sunyard.com
@@ -1008,9 +1095,544 @@
+
+
2.12 V0.2.1 界面调整头部统一 / 日历·打卡合并 / 模板分类 / 宏观 tab 溢出
+
本节为 2026-10-23 提出的调整方案。其中 ①头部统一 / ③模板分类 / ④宏观 tab 溢出 已按本节实现；
+ ②日历与打卡合并 为待确认草案，确认后再改代码。
+
+
① 四个主 Tab 头部统一
+
+ | 页 | 调整前 | 调整后 |
|---|
+ | 打卡 | NavBar 45px，标题「打卡」17px 深色 | 23px，标题「打卡」12px 主色加粗，字距 1px |
+ | 宏观 | NavBar 45px，无标题（空白） | 23px + 标题「宏观」（同打卡规格） |
+ | 监控 | NavBar 45px，无标题（空白） | 23px + 标题「监控」（同打卡规格） |
+ | 我 | NavBar 45px 空白条 | 整条去掉，蓝色头像区直接顶到状态栏下方 |
+
+
实现为独立组件 PageHeader，只被打卡 / 宏观 / 监控 引用；「我」页不引用，因此三者互不影响。
+ 头部背景取页面底色 #f5f5f5（不再是卡片白），视觉上更轻。
+
+
+
+
+
+
①-a 打卡（头部已缩至 23px）已实现
+
原 45px 白色 NavBar 换成 23px 底色条 + 主色标题，页面上移，首屏多出一张卡片的高度。
+
+
+
+
+
+
宏观
+
+
+
+
报警1
新闻
油价
+
经济数据
策略研究
经济文章
+
+
›
+
+
+
+
央行开展 5000 亿元 MLF 操作，中标利率持平
+
本月 MLF 净投放 2000 亿元，市场流动性保持合理充裕…
+
妙想财经2026-10-22#1
+
+
+
9 月社零同比增长 3.2%，服务消费延续回暖
+
餐饮收入增速回升至 5.1%，可选消费分化明显…
+
妙想财经2026-10-21#2
+
+
+
+
+
+
+
①-b + ④ 宏观：头部标题化 · 报警/新闻置最左 · 右侧溢出提示已实现
+
顺序：报警 → 新闻 → 油价 → 经济数据 → 策略研究 → 经济文章，默认选中「新闻」（/macro 自动跳 /macro/news）。
+ 溢出提示：tab 条仍可向右滚动时，右边缘出现白色渐变遮罩 + 主色圆底箭头「›」（1.5s 轻微左右摆动，可点击向右翻页），滚到末尾自动消失；切换 tab 时自动把激活项滚到可视区中间。
+ antd-mobile Tabs 自带的右侧渐变遮罩只有 30px 且无箭头，用户难以察觉，故叠加此提示层。
+
+
+
+
+
② 打卡：日历 + 打卡合并（待确认草案）
+
把原来的「打卡」「日历」两个 tab 合成一个：上半部日历，下半部打卡卡片。取舍按下述规则：
+
+ | 项 | 规则 |
|---|
+ | 页面结构 | SwipeTabs 从 3 个减为 2 个：日历（含打卡） / 清单 |
+ | 上方日历 | 保留月历网格 + 月份左右切换 + 「回到今天」；去掉「昨天 / 今天 / 明天」分段控件（点日期即可，节省 38px 高度） |
+ | 日历高度 | 日期格子 38px → 31px，去掉 6 行补位中的空行；整块约 240px |
+ | 下方打卡 | 沿用现有打卡卡片样式，但紧凑化：内边距 12px → 8px，环形 58px → 42px（环宽 6 → 5），行高压缩，卡片间距 10 → 7px |
+ | 卡片内容 | 保留环形进度（含达标对勾 / 超额 +n）、名称、周期与目标、连续天数、打卡按钮；撤销 / 编辑 / 归档收进「⋯」，减少一行高度 |
+ | 分组 | 按周期类型分组：每天 → 每周 → 每月，每组一个小标题（左侧主色竖条 + 组名 + 条数）；去掉「每年」分组（已有年目标项并入「每月」区末尾的「其他周期」小标题，或建议直接隐藏年视图） |
+ | 联动 | 点日历某日 → 下方卡片即该日数据（进度仍按该日所属周期算）；未来日期只读，按钮变灰显示「计划」 |
+ | 空态 | 日历下方直接显示「该日没有打卡项」+「+ 新建」引导 |
+
+
+
+
+
+
打卡
+
+
+
+
+
+ ‹2026年10月›
+ 回到今天
+
+
一二三四五六日
+
+
29
30
+
1
2
+
3
4
5
+
6
7
+
8
9
+
10
11
12
+
13
14
15
+
16
17
18
19
+
20
21
+
22
23
24
25
+
26
27
28
+
29
30
31
1
+
+
本月完成率 82%今天 · 2026-10-22
+
+
+
今天已完成 2 / 4点环即打卡
+
+
+
每天2 项
+
+
+
+
+
喝水
+
每天 2 次 · 今日 1/2连续 12
+
+
打卡
+
⋯
+
+
+
+
+
+
吃药
+
每天 1 次 · 今日 2/1连续 30
+
+
再打一次
+
⋯
+
+
+
每周1 项
+
+
+
+
健身
+
每周 3 次 · 本周 1/3连续 5
+
+
打卡
+
⋯
+
+
+
每月1 项
+
+
+
+
读书
+
每月 12 次 · 本月 0/12
+
+
打卡
+
⋯
+
+
+
+
+
+
+
②-a 合并后的主视图（日历在上 · 打卡在下，按天 / 周 / 月分组）待确认
+
卡片整体压缩：环形 42px、内边距 8px、行距 7px，单卡高度约 58px（原 92px），一屏可看 4~5 项。分组顺序固定为 每天 → 每周 → 每月，
+ 组标题左侧 3px 主色竖条；无「每年」分组。日历顶部的「昨天 / 今天 / 明天」分段已去掉，直接点日期切换，选中日靠「今天」主色数字与蓝色实心块识别。
+
+
+
+
+
+
打卡
+
+
+
+
‹2026年10月›回到今天
+
一二三四五六日
+
+
29
30
+
1
2
+
3
4
5
+
6
7
+
8
9
+
10
11
12
+
13
14
15
+
16
17
18
19
+
20
21
+
22
23
24
25
+
26
27
28
+
29
30
31
1
+
+
本月完成率 82%明天 · 2026-10-23
+
+
明天计划（不可打卡）
+
+
+
+
+
+
②-b 未来日期（计划态）
+
选中未来日期时，打卡按钮统一变灰显示「计划」，点击不生效；环形仍显示该日所属周期的既有进度（此处举例为周期初）。
+ 补打窗口仍是最近 7 天，超出时同样只读。
+
+
+
+
+
+
打卡
+
+
+
+
‹2026年10月›回到今天
+
一二三四五六日
+
+
29
30
+
1
2
+
3
4
5
+
6
7
+
8
9
+
10
11
12
+
13
14
15
+
16
17
18
19
+
20
21
+
22
23
24
25
+
26
27
28
+
29
30
31
1
+
+
本月完成率 82%今天 · 2026-10-22
+
+
今天已完成 2 / 4点环即打卡
+
+
+
+
+
吃药 · 每天 1 次
+
撤销上次打卡今日 2 次
+
编辑打卡项名称 / 周期 / 目标
+
归档历史记录保留
+
取消
+
+
+
+
+
②-c 卡片「⋯」操作面板
+
紧凑化后卡片不再常显三个文字链接，改由右上角「⋯」唤出底部面板：撤销 / 编辑 / 归档。面板项 44px 高，
+ 「归档」用危险色；撤销仅在当日有记录时可用，否则置灰。
+
+
+
+
+
③ 清单：新增「模板」分类（与进行中 / 已归档并列）已实现
+
清单页分段从 2 个变为 3 个：进行中 / 已归档 / 模板。模板拥有独立的增删改查，按名称字母顺序（中文按拼音、数字按数值）排序；
+ 新建清单时只保留名称，去掉场景，模板改为点击后在右侧滑出的面板里选择。
+
+
+
+
+
打卡
+
+
+
+
+
+
出差预置11 项
+
+ 身份证 / 证件手机充电器 + 充电宝
+ 笔记本电脑 + 电源耳机+7
+
+
由此新建
+
+
+
+
回老家预置12 项
+
+ 身份证 / 证件钥匙
+ 手机充电器 + 充电宝换洗衣物+8
+
+
由此新建
+
+
+
+
露营装备2 项
+
帐篷睡袋
+
由此新建编辑删除
+
+
+
+
+
+
③-a 模板分类已实现
+
模板卡片：名称 + 「预置」标记 + 项数；下方最多展示 4 个检查项摘要（超出折叠为 +n）；底部操作「由此新建 / 编辑 / 删除」。
+ 系统预置模板不可编辑、不可删除（只保留「由此新建」）。右上角按钮随分段切换：模板页为「+ 新建模板」，其余为「+ 新建」。
+
+
+
+
+
+
打卡
+
+
+
+
+
+
选择模板×
+
按名称字母顺序排列
+
不使用模板空白清单
+
出差预置11 项
+
回老家预置12 项
+
露营装备2 项
+
+
+
+
+
+
③-b 新建清单 + 模板右侧滑出面板已实现
+
表单只剩两项：名称（≤20 字，必填）与 模板（可空）。场景选择器已移除——场景不再由用户填写，新建时沿用所选模板自带的场景（无模板则为空），历史数据仍正常展示场景标签。
+ 点模板行从右侧滑出 78% 宽面板：首项固定为「不使用模板」，其后按字母顺序列出全部模板（预置带标记、右侧显示项数），选中项主色高亮，点遮罩或 × 关闭。
+
+
+
+
+
+
+
③-c 模板编辑（增删改）已实现
+
新建 / 编辑共用同一弹层：模板名称（≤20 字）+ 检查项列表（逐条 ≤40 字，可删除、可追加）。保存时至少需 1 条有效检查项，名称为空或全空则拦截并 Toast 提示。
+ 删除模板需二次确认，且不影响已用该模板创建过的清单。
+
+
+
+
+
④ 补充：模板接口
+
+ | 方法 | 路径 | 说明 |
|---|
+ | GET | /api/checklists/templates | 模板列表（含预置），服务端按名称字母顺序排序 |
+ | GET | /api/checklists/templates/:id | 模板详情 |
+ | POST | /api/checklists/templates | 新建模板 { name, items[] } |
+ | PUT | /api/checklists/templates/:id | 改名称 / 检查项（预置模板拒绝） |
+ | DELETE | /api/checklists/templates/:id | 删自建模板（预置模板拒绝） |
+
+
排序口径：Intl.Collator('zh-Hans-CN', { numeric: true, sensitivity: 'base' })，中文按拼音、数字按数值比较，前后端一致。
+
3 组件状态定义Component States
+
3.0 页面头部（PageHeader）
+
+ | 项 | 取值 |
|---|
+ | 高度 | 23px（原 NavBar 45px 的一半），flex: 0 0 23px 不参与压缩 |
+ | 标题字号 / 字重 | 12px / 600 |
+ | 标题颜色 | 主色 #1677ff |
+ | 背景 | 页面底色 #f5f5f5 |
+ | 适用范围 | 打卡 / 宏观 / 监控；「我」页不使用 |
+
+
实现为独立组件 src/components/PageHeader.jsx，三页各自引用、互不影响；「我」页移除 NavBar 后头像区直接贴顶。
+
3.1 环形进度（尺寸 58，环宽 6，r=26，周长 163.4）
| 状态 | 条件 | 环形 | 中心 | 卡片底 | 按钮 |
|---|
diff --git a/docs/V0.2/设计文档.md b/docs/V0.2/设计文档.md
index a20b89e..a32a869 100644
--- a/docs/V0.2/设计文档.md
+++ b/docs/V0.2/设计文档.md
@@ -442,3 +442,75 @@ compareVersion('0.2','0.2.0') // → 0 (缺位补 0)
### 10.5 界面设计同步
`界面设计.html` 已同步：底部 Tab 改为 4 项且「打卡」高亮在首位、打卡页去掉特效开关按钮、新增「我的 · OTA 开发版本开关」屏、宏观新增「报警 / 新闻」子 Tab 与合并后的 6 Tab 导航。
+
+---
+
+## 11. 界面调整（2026-10-23）
+
+### 11.1 变更清单
+
+| # | 范围 | 变更 | 状态 |
+| --- | --- | --- | --- |
+| 1 | 页面头部 | 打卡 NavBar 高度减半（45 → 23px）、标题改主色 12px；宏观 / 监控补标题；「我」页整条去掉 | **已实现** |
+| 2 | 打卡页 | 日历与打卡合并为一个视图（上日历、下打卡，按天/周/月分组、去掉年分组、卡片紧凑化） | **待确认**（设计稿已出，见《界面设计.html》2.12 ②节） |
+| 3 | 清单页 | 新增「模板」分类（与进行中 / 已归档并列），独立 CRUD + 字母序；新建清单去掉场景、模板改右侧滑出选择 | **已实现** |
+| 4 | 宏观页 | 报警 / 新闻移到最左并默认选中新闻；tab 条增加右侧溢出提示 | **已实现** |
+
+### 11.2 页面头部统一
+
+新增组件 `src/components/PageHeader.jsx`（高度 23px、标题 12px/600 主色、字距 1px、背景取页面底色 `#f5f5f5`），只被 **打卡 / 宏观 / 监控** 三页引用：
+
+| 页 | 变更前 | 变更后 |
+| --- | --- | --- |
+| 打卡 | `NavBar` 45px，标题 17px 深色 | `PageHeader` 23px，标题主色 |
+| 宏观 | `NavBar` 45px，空白 | `PageHeader` + 标题「宏观」 |
+| 监控 | `NavBar` 45px，空白 | `PageHeader` + 标题「监控」 |
+| 我 | `NavBar` 45px 空白条 | **移除**，`me-profile` 直接贴顶 |
+
+> 「我」页不引用该组件，因此调整打卡/宏观/监控的头部不会波及「我」；反之亦然。三个页面之间也各自持有独立实例，互不影响。
+
+### 11.3 清单模板分类
+
+**接口**（`server/routes/checklists.js`）：
+
+| 方法 | 路径 | 说明 |
+| --- | --- | --- |
+| GET | `/api/checklists/templates` | 列表，**服务端按名称字母顺序排序**（原为 `builtin desc, id asc`） |
+| GET | `/api/checklists/templates/:id` | 详情（新增） |
+| POST | `/api/checklists/templates` | 新建（名称 ≤20 字，≥1 条检查项） |
+| PUT | `/api/checklists/templates/:id` | 改名称 / 检查项（新增；`builtin=true` 拒绝，404） |
+| DELETE | `/api/checklists/templates/:id` | 删自建模板（`builtin=true` 拒绝） |
+
+排序口径：`Intl.Collator('zh-Hans-CN', { numeric: true, sensitivity: 'base' })` —— 中文按拼音、数字按数值。前端 `ListView` 拿到列表后再排一次，保证与后端一致（网络返回顺序不可控时也不乱）。
+
+**前端**（`src/pages/checkin/ListView.jsx`）：
+
+- 分段由 2 项扩为 3 项：`active`（进行中）/ `archived`（已归档）/ `template`（模板）；右上角按钮随分段切换为「+ 新建」/「+ 新建模板」。
+- 模板卡片：名称 + 「预置」标记 + 项数；最多展示 4 条检查项摘要，超出折叠为 `+n`；操作「由此新建 / 编辑 / 删除」，预置模板只保留「由此新建」。
+- 新建 / 编辑模板共用底部弹层：名称 + 检查项逐条编辑（≤40 字，可删可加）。
+- **新建清单表单**：仅「名称」+「模板」两项 —— **场景选择器已移除**（`scene` 改为沿用所选模板自带的场景，无模板则为空；数据库字段保留，历史数据照常展示）。
+- **模板选择**：点击模板行从**右侧滑出** `78vw` 面板（antd-mobile `Popup position="right"`），首项固定「不使用模板」，其后为字母序模板列表（预置带标记 + 项数），选中项主色高亮。
+
+### 11.4 宏观 tab 顺序与溢出提示
+
+- Tab 顺序改为 **报警 → 新闻 → 油价 → 经济数据 → 策略研究 → 经济文章**，默认选中 **新闻**；`/macro` 由路由直接 `Navigate` 到 `/macro/news`（`App.jsx`），`activeFromPath` 兜底同样返回 `news`。
+- `SwipeTabs` 增加溢出提示层：测量 `.adm-tabs-tab-list` 的 `scrollLeft + clientWidth < scrollWidth`，为真时在顶部右侧渲染 `.tab-more-hint`（白色渐变 + 主色圆底箭头「›」，1.5s 轻微摆动动画，点击向右翻页 60% 视宽），滚到末尾自动消失。
+- 切换 tab 时把激活项平滑滚到可视区中央，避免选中项藏在屏幕外。
+- 为什么不用框架自带的：antd-mobile Tabs 自带 `.adm-tabs-header-mask-right` 只有 30px 纯渐变、无箭头、无交互，用户难以判断"右侧还有内容"，故叠加此提示层。
+
+### 11.5 待确认项：日历与打卡合并
+
+方案已写入《界面设计.html》2.12 ②节（含主视图、未来日期计划态、卡片「⋯」操作面板三屏）。要点：
+
+| 项 | 方案 |
+| --- | --- |
+| 结构 | SwipeTabs 由 3 个减为 2 个：`日历（含打卡）` / `清单` |
+| 日历 | 月历 + 月份切换 + 回到今天；**去掉「昨天/今天/明天」分段**；日期格 38 → 31px |
+| 打卡 | 沿用现有卡片样式，紧凑化：内边距 12→8px、环形 58→42px（环宽 6→5）、间距 10→7px |
+| 操作 | 撤销 / 编辑 / 归档收进「⋯」底部面板（原为卡片底部三个文字链接） |
+| 分组 | **每天 → 每周 → 每月**，组标题左侧主色竖条；**去掉「每年」分组** |
+| 联动 | 点日期即切换当日数据；未来日期只读，按钮灰显「计划」 |
+
+确认后再落地：`CheckinPage` 收敛为 2 个 tab、`CalendarView` 与 `HabitView` 合成新视图组件、`HabitView` 的循环/编辑逻辑抽出复用、样式新增 `.mv-*` 段。
+
+