首页各区块标题改模块主题色 + 新建改主题色按钮 #60

New Issue

2026-11-05T05:31:26Z

laoyang commented

2026-11-05 05:31:26 +00:00

首页各区块标题改模块主题色 + 「新建」改主题色按钮

用户（2026-11-05）

「还有"今天的日程"，既然是日程，标题颜色就应该用日程的主题色。
11条后边"新建"的地方变成一个按钮，按钮颜色也是主题色。」
「下面的"近期任务"改法跟上面一样，还有"最近纪念日"也不说了，全都是一样的。」

现状

首页各区块标题用的是统一色（墨色或浅灰），没有体现模块身份。
「新建」是文字链接（几号字、细、不醒目）。

改法

① 标题用模块主题色

区块	颜色
今天的日程	日程琥珀（`#B8862B` 系）
近期任务	任务蓝（`#2F6FA8` 系）
最近纪念日	纪念日粉（按模块设定）
最近观影	观影红（按模块设定）

⚠️ 颜色不要硬编码，从模块设定取（fbModuleAccent(key) 之类），
否则用户在"模块设置"里改色时首页不跟着变。

② 「新建」改成主题色按钮

改前：今天日程                    新建      ← 文字链接
改后：今天日程                   [ + 新建 ] ← 主题色胶囊按钮

底色 = 该模块主题色
文字白色
圆角胶囊
可点，点了打开对应的新建表单

验收

各块标题是各自模块的主题色
「新建」是主题色胶囊按钮，不是文字
在模块设置里改色后，首页标题/按钮跟着变

为什么单独建单

是 #59 首页改造的子项，但可独立验收：只改标题颜色和新建按钮样式，不涉及锚点跳转或弹窗。

# 首页各区块标题改模块主题色 + 「新建」改主题色按钮 ## 用户（2026-11-05） > 「还有"今天的日程"，既然是日程，标题颜色就应该用日程的主题色。 > 11条后边"新建"的地方变成一个按钮，按钮颜色也是主题色。」 > 「下面的"近期任务"改法跟上面一样，还有"最近纪念日"也不说了，全都是一样的。」 ## 现状首页各区块标题用的是**统一色**（墨色或浅灰），没有体现模块身份。「新建」是**文字链接**（几号字、细、不醒目）。 ## 改法 ### ① 标题用模块主题色 | 区块 | 颜色 | |---|---| | 今天的日程 | 日程琥珀（`#B8862B` 系） | | 近期任务 | 任务蓝（`#2F6FA8` 系） | | 最近纪念日 | 纪念日粉（按模块设定） | | 最近观影 | 观影红（按模块设定） | ⚠️ 颜色**不要硬编码**，从模块设定取（`fbModuleAccent(key)` 之类），否则用户在"模块设置"里改色时首页不跟着变。 ### ② 「新建」改成主题色按钮 ``` 改前：今天日程新建 ← 文字链接改后：今天日程 [ + 新建 ] ← 主题色胶囊按钮 ``` - 底色 = 该模块主题色 - 文字白色 - 圆角胶囊 - 可点，点了打开对应的新建表单 ## 验收 - [ ] 各块标题是各自模块的主题色 - [ ] 「新建」是主题色胶囊按钮，不是文字 - [ ] 在模块设置里改色后，首页标题/按钮跟着变相关：#59（首页总纲） --- ### 为什么单独建单是 #59 首页改造的子项，但可独立验收：只改标题颜色和新建按钮样式，不涉及锚点跳转或弹窗。

laoyang commented

2026-11-05 07:52:35 +00:00

二次反馈修复（2026-11-05 15:50）

用户反馈原话：

「"首页""今天的日程"这几个字的颜色什么的没变呀，它应该变成跟这个主题颜色一样，
也就是跟日程的主题颜色一样。右边11条，这个和那个"新建"挨得太近了。
"新建"前面就不用再加加号了，没必要。全天日程不是下面太窄了，是上面。
现在上面那个边和它下面白色框的边是重合的。近期任务的颜色、最近纪念日的颜色、
最近观影的颜色，都没有发生改变。」

① 标题颜色没变 —— 上一轮改了组件，却没改调用点

FbSectionTitle 上一轮确实加了 @Param accent（带默认值 ''），
但首页 6 处调用点一处都没传。

上一轮我 grep 到的 7 个 accent: 全部落在 FbEventSheet / FbTaskPanel /
FbDayEditSheet / FbMovieDetailSheet / FbPersonSheet 上 ——
那些组件本来就自带 accent 参数，与标题无关。我把「已传」当成了完成证据。

因为组件的默认值是空串，空串 ⇒ titleColor() 退回 #8A7A6D 灰，
所以组件改得再对，不传就是不变 —— 这正是用户看到的现象。

修法：5 处调用点补 accent:（往年的今天保持默认灰，它不是模块）：

区块	传入
今天的日程	`this.calAccent()`
近期任务	`this.taskAccent()`
最近纪念日	`this.daysAccent()`
最近观影	`this.moviesAccent()`
联系人	`this.peopleAccent()`

颜色不硬编码，全部经 fbModuleOf(...) → fbThemeVars(...).brand，
用户改模块配色后首页会跟着变。

② 条数与「新建」挨太近

extra 后面直接接胶囊，Row 无 space、胶囊无 margin ⇒ 贴死。
给胶囊加 margin({ left: 12 })。

选 12 而不是 8：胶囊有实体底色，视觉间距比纯文字显得更紧，
8vp 看着仍像一坨，12vp 才有清晰分隔。

③ 去掉「＋」前缀

'＋新建' → '新建'，'＋新增' → '新增'（共 5 处）。
连带把 3 处空态提示的「点右上角「＋新建」」同步改成「点右上角「新建」」——
按钮上已经没有加号了，提示文案再带加号会指错。

④ 全天日程的问题在上面，不在下面

上一轮我改的是 bottom: 6 → 12，方向搞反了。

实际结构：FbDayEventPanel 给 FbDayTimeline 的 padding 是
{ left, right, bottom: 8 } —— 没有 top。
所以第一个全天色块的上边直接压在白卡片的顶边上，色块与卡片边缘重合，
看起来像被裁掉一截。

修法：改 { top: 10, bottom: 12 }。上下都留白——
上边接卡片边缘、下边接时间轴，两处都是「块与块之间」，都该有呼吸。

⚠️ 只加在有全天日程的分支里。没有全天时时间轴贴顶是正常的
（顶部有小时刻度，视觉上不构成挤压）。

## 二次反馈修复（2026-11-05 15:50）用户反馈原话： > 「"首页""今天的日程"这几个字的颜色什么的没变呀，它应该变成跟这个主题颜色一样， > 也就是跟日程的主题颜色一样。右边11条，这个和那个"新建"挨得太近了。 > "新建"前面就不用再加加号了，没必要。全天日程不是下面太窄了，是上面。 > 现在上面那个边和它下面白色框的边是重合的。近期任务的颜色、最近纪念日的颜色、 > 最近观影的颜色，都没有发生改变。」 ### ① 标题颜色没变 —— 上一轮改了组件，却没改调用点 `FbSectionTitle` 上一轮确实加了 `@Param accent`（带默认值 `''`），但**首页 6 处调用点一处都没传**。上一轮我 grep 到的 7 个 `accent:` 全部落在 `FbEventSheet` / `FbTaskPanel` / `FbDayEditSheet` / `FbMovieDetailSheet` / `FbPersonSheet` 上 —— **那些组件本来就自带 `accent` 参数**，与标题无关。我把「已传」当成了完成证据。因为组件的默认值是空串，空串 ⇒ `titleColor()` 退回 `#8A7A6D` 灰，所以**组件改得再对，不传就是不变** —— 这正是用户看到的现象。修法：5 处调用点补 `accent:`（往年的今天保持默认灰，它不是模块）： | 区块 | 传入 | |---|---| | 今天的日程 | `this.calAccent()` | | 近期任务 | `this.taskAccent()` | | 最近纪念日 | `this.daysAccent()` | | 最近观影 | `this.moviesAccent()` | | 联系人 | `this.peopleAccent()` | 颜色不硬编码，全部经 `fbModuleOf(...)` → `fbThemeVars(...).brand`，用户改模块配色后首页会跟着变。 ### ② 条数与「新建」挨太近 `extra` 后面直接接胶囊，`Row` 无 `space`、胶囊无 margin ⇒ 贴死。给胶囊加 `margin({ left: 12 })`。选 12 而不是 8：胶囊有实体底色，视觉间距比纯文字显得更紧， 8vp 看着仍像一坨，12vp 才有清晰分隔。 ### ③ 去掉「＋」前缀 `'＋新建'` → `'新建'`，`'＋新增'` → `'新增'`（共 5 处）。连带把 3 处空态提示的「点右上角「＋新建」」同步改成「点右上角「新建」」—— 按钮上已经没有加号了，提示文案再带加号会指错。 ### ④ 全天日程的问题在上面，不在下面上一轮我改的是 `bottom: 6 → 12`，**方向搞反了**。实际结构：`FbDayEventPanel` 给 `FbDayTimeline` 的 padding 是 `{ left, right, bottom: 8 }` —— **没有 top**。所以第一个全天色块的**上边直接压在白卡片的顶边上**，色块与卡片边缘重合，看起来像被裁掉一截。修法：改 `{ top: 10, bottom: 12 }`。上下都留白—— 上边接卡片边缘、下边接时间轴，两处都是「块与块之间」，都该有呼吸。 ⚠️ 只加在**有全天日程的分支**里。没有全天时时间轴贴顶是正常的（顶部有小时刻度，视觉上不构成挤压）。

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: laoyang/FamilyBook#60