theme v1
This commit is contained in:
tamakyi
@@ -298,3 +298,90 @@ home-light / home-dark / explore-light 三页差异均 **0.024%**，bbox 只有
|
||||
|
||||
**教训（重要）**：像素测量脚本的扫描范围必须覆盖整幅图，循环上界不能与被测对象边界重合，
|
||||
否则会把"边界截断"读成"图形特征"。之前 3.77→6.89 那组对比不知是否也受此影响，需复查时再确认。
|
||||
|
||||
## P2 补漏部署后复测（12:48）
|
||||
|
||||
- `base.css?v=20261019d` 上线，24023 字节与本地逐字节一致。
|
||||
- 删掉 `fieldTypeLabelClass` 后**无运行期报错**：公开投票页 3 个（200，tb-chip 8/16/4，uk-label 各 1 = 状态）、
|
||||
结果页 4 个（200，tb-chip 8/2/0/16，彩色 label 全 0，progress 7/0/10/19）、
|
||||
草稿预览页 2 个（200，tb-chip 2/6）。
|
||||
- 巡检 `/ /explore /rules /user/questions /user/profile?tab=security /_/admin6 /_/admin3` 全 200 无模板错误。
|
||||
- `/user/votes/{id}/preview` 对**已发布**投票 302 到 `/vote/{token}` 是设计如此（vote.go:1093），不是回归。
|
||||
- 截图核对：结果页「1 単選 / 2 多選」已为浅色胶囊，进度条 10px 圆角 6px；参与页字段头同样统一。
|
||||
|
||||
## "移动端语言/主题按钮不见了"排查（结论：非缺陷）
|
||||
|
||||
实测（线上测试环境，`--force-device-scale-factor=1`）：
|
||||
- 宽 360/390/414/640 → 顶栏 `.tb-nav-utils` = `display:none`，底栏 `#tb-mobile-utils` = `flex`，
|
||||
rect `0,639,W,46`，语言 `block`、主题按钮 `block`（48×30，SVG 16×16），命中测试落在 `mobile-lang-select`。
|
||||
- 宽 700/768/980 → 底栏 `none`，顶栏 `flex`，右上角地球 + 月亮都可见（截图 `outputs/t-nav-right.png`）。
|
||||
- 页面级差异：`/_/admin6` 底栏**只有月亮没有语言下拉** —— `IsUserPage=true` 让语言块整体不渲染（桌面同样没有）。
|
||||
- 生产 `box.shiroko.one` 仍是旧构建（页面无 `base.css` 引用，底栏是 emoji 月亮），移动端同样正常。
|
||||
|
||||
用户确认是忘了「移动端移到固定底栏」这个设计，不是 bug。
|
||||
留下的真实缺口：**箱主页（最常见的外部入口）完全没有语言切换**，见 MEMORY.md 前端样式条目。
|
||||
|
||||
## 修正：箱主页无语言切换是设计，不是缺口
|
||||
|
||||
上一节把它记成"真实缺口"是错的。用户明确：**箱主页属箱主个性化，以箱主配置为主**，
|
||||
语言入口不出现是有意为之（`IsUserPage` 门控）。
|
||||
MEMORY.md 对应条目已改为"有意设计、别当 bug 修、要动先问"。
|
||||
|
||||
## 备份（用户要求）
|
||||
|
||||
`../TamaBox-v4-mainline-20261019-1445.tar.gz`（940K，302 条目，排除 .git/.workbuddy/outputs）。
|
||||
P1 剩余两项（首屏跟随系统深色、首页 Waline 懒加载）用户明确**先不做**。
|
||||
|
||||
## 主题系统方案（只出设计，未实现）
|
||||
|
||||
用户诉求：箱主在后台选主题、仅对箱主相关页面生效；站点级默认主题在配置里；要一份可复用的主题底稿。
|
||||
|
||||
已确认的现状事实（设计依据）：
|
||||
- 设计令牌只有 16 个，集中在 `static/css/base.css` 的 `:root`(亮) + `html[data-theme="dark"]`(暗)。
|
||||
- `<html lang>` 在 `templates/base/header.html:2`，服务端渲染；主题属性可放在这里（无 FOUC）。
|
||||
- `question.Pager`（`route/question/page.go:45`）是 `/_/{domain}` 与 `/_/{domain}/{id}` 的共同中间件
|
||||
→ 打主题标记的唯一合适位置。
|
||||
- `/user/*` 与 `/_/*` 共用 `IsUserPage`（context.go:241 按 URL 前缀判定），所以「箱主相关页面」
|
||||
≠ IsUserPage，必须单独区分，否则设置页会被主题化。
|
||||
- `static/fs.go` 与 `templates/embed.go` 都是显式 embed 清单（新增主题 css 必须手加）。
|
||||
- 用户模型已有大量个性化字段（usernamecolor/introcolor/background…），主题作为 `users.theme` 同族最自然。
|
||||
- 分享卡是服务端绘制图片（`route/question/share.go`），不经过 CSS → 主题不覆盖它。
|
||||
|
||||
关键结论（写进方案的核心）：令牌覆盖必须用
|
||||
`html[data-theme-style="x"]`（0,1,1，压过 `:root` 的 0,1,0）+
|
||||
`html[data-theme="dark"][data-theme-style="x"]`（0,2,1，压过 base 的 dark）。
|
||||
只写浅色块会让深色模式被浅色令牌污染（同特异性 + 主题文件后加载）。
|
||||
|
||||
## 主题系统初版（已实现，未部署）
|
||||
|
||||
用户拍板：①作用范围跟随箱主配置（即 /_/ 箱主相关页面）②主题只做配色/图案/整页背景，**不涉及布局**
|
||||
③主题名可本地化 ④分享卡不参与。
|
||||
|
||||
实现：
|
||||
- `internal/theme`：注册表 + 三级回退。`[theme] default/available` → 白名单（slug 正则 + css 是否存在），
|
||||
`Resolve(用户值)`：`default`→空串（不加载）／命中→该 slug／其余→站点默认。"" 与 "default" 语义不同：
|
||||
""=跟随站点默认，"default"=箱主明确选基础外观。
|
||||
设置页色块从主题 css 浅色块里抓 `--tb-bg`/`--tb-primary` 拼渐变（值必须过色值正则，防注入）。
|
||||
- `users.theme varchar(32) default ''`（AutoMigrate 加列）+ `UpdateTheme` 单列更新。
|
||||
- `question.Pager` 注入 `Data["ThemeSlug"]`（`/_/{domain}`、单题、密码页、分享卡路由共用这一个中间件）；
|
||||
header.html 在 `<html>` 输出 `data-theme-style` 并条件加载 `themes/<slug>.css`。
|
||||
- 设置页账号面板末尾新增「主题外观」卡片（独立表单 `POST /user/profile/theme`，不塞进 UpdateProfile，
|
||||
避免与该面板其它字段互相覆盖）；`{{ if .Themes }}` 包裹，未配置主题时不显示。
|
||||
- 静态版本号统一 `conf.StaticVersion = "20261019e"`（base.css 与主题 css 共用，改样式只改一处）。
|
||||
- `static/fs.go` 改嵌目录 `css/themes`（以后加主题文件不用再改 embed 清单）。
|
||||
- 主题文件：`_scaffold.css`（底稿，含 19 令牌说明 + 素材规格 + 特异性规范）、`default.css`（恒等，仅色块预览）、
|
||||
`sakura.css`（示例，纯 CSS 网点图案 + 粉调）。
|
||||
- base.css：body 接 `--tb-page-image` / `--tb-page-pattern` / `--tb-page-pattern-size` 两层背景；
|
||||
**UIkit 主色是编译期常量 #1e87f0**，新增映射块把 a/uk-link、uk-button-primary、checkbox/radio、input:focus、
|
||||
uk-tab active 接到 `--tb-primary`（基础主题值相同，默认外观零变化）。
|
||||
|
||||
实测（无头 Chrome，box 页 data-theme-style=sakura）：
|
||||
- 浅色 primary `#e5678f`／bg `#fff6f8`／pattern 16px 网点命中；深色 `#ff8ab0`／`#241a1f`，卡片表面各自跟随。
|
||||
- 未选主题的 box 页：无 data 属性、无 themes link、主按钮仍 `rgb(30,135,240)` → 零回归。
|
||||
|
||||
踩坑：
|
||||
1. 第一版 sakura 页「发送提问」还是蓝色 —— UIkit 组件色写死，令牌覆盖不到，必须按组件映射。
|
||||
2. 预览里 `{{ .StaticVersion }}` 为空（预览夹具没这个键），导致按固定串替换主题 css 失败；改用正则。
|
||||
3. `writePreview` 用全文搜 `data-theme="dark"` 判断是否已加属性 → 命中内联主题 css 里的选择器，深色预览没生效；
|
||||
改为只看 `<html ...>` 开标签。
|
||||
4. 脚本改 form/user.go 时把插入块写在结构体中间，拼出 `} Language ...`；靠 Read 复查发现并重写。
|
||||
|
||||
Reference in New Issue
Block a user