feat: 青主题产品壳与静态资源版本号

对齐 SPA 顶栏工具条与清青强调色，CSS/JS 带构建 ?v= 长缓存穿透。 Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-30 05:43:25 +08:00
parent 3bd0b990a1
commit e0683ef262
15 changed files with 827 additions and 554 deletions
--- a/docs/rebuild-spec/09-ssr-progress.md
+++ b/docs/rebuild-spec/09-ssr-progress.md
@@ -10,7 +10,7 @@

 | 项 | 值 |
 |----|-----|
-| **上一刀** | 公开页设计系统重绘（token + 顶栏/三栏/Feed/帖详情壳层） |
+| **上一刀** | 青主题产品化重绘 + 静态资源 `?v=` 版本号 |
 | **下一刀** | 需点名（移动侧栏抽屉 / OIDC Admin / S3 / Gitea / 表格表情…） |
 | **工作区** | 应干净 |

@@ -18,7 +18,7 @@

 ## 一句话状态

-核心论坛、Admin、Limits/伪静态、嵌套评论、Markdown 编辑器、主题、公开页设计系统已齐；本分支 `routers/api` 仅保留机器入口。余量多为后置与体验打磨。
+核心论坛、Admin、Limits/伪静态、嵌套评论、Markdown 编辑器、主题、公开页青主题产品壳与资源版本号已齐；本分支 `routers/api` 仅保留机器入口。余量多为后置与体验打磨。

 ---

@@ -32,7 +32,7 @@
 | Markdown 工具栏 + preview | 已迁 |
 | 浅色 / 暗色 / 跟随系统 | 已迁（CSS 媒体查询，无 head 防闪脚本） |
 | 未挂载论坛 JSON API | 已删（对照 `main`） |
-| 公开页设计系统 | 已迁（[10-design-system.md](10-design-system.md) + 壳层 CSS） |
+| 公开页设计系统 | 已迁（清青产品 chrome + `?v=`；[10-design-system.md](10-design-system.md)） |

 ---

--- a/docs/rebuild-spec/10-design-system.md
+++ b/docs/rebuild-spec/10-design-system.md
@@ -3,19 +3,21 @@
 > **读者**：实现公开页视觉 / CSS 的 AI  
 > **前置**：[01-product.md](01-product.md)、[06-pages-ux.md](06-pages-ux.md)  
 > **实现**：[`web_src/css/site.css`](../../web_src/css/site.css)、[`templates/base/`](../../templates/base/)  
-> **品牌**：默认「姜十三论坛」（安装/后台可改 `site_name`）
+> **品牌**：默认「姜十三论坛」（安装/后台可改 `site_name`）；强调色取 **青**（纪念向，非 SPA 草绿）

 视觉可重设；**信息架构与关键操作流以 06 为准**。本文件只约定公开页壳层与内容表面的视觉语言。

+静态资源须带构建版本号：`/ssr-assets/site.css?v={{.AssetVersion}}`（长缓存 + query 穿透，对齐 Gitea）。
+
 ---

 ## 1. 气质

 | 项 | 约定 |
 |----|------|
-| 关键词 | 墨青、编辑式、冷静、可读、偏内容 |
-| 密度 | 接近 V2EX / NGA：一屏多信息，非营销留白 |
-| 反模式 | 紫渐变、暖奶油底、大圆角卡片墙、全幅 hero、Inter/Roboto 默认堆 |
+| 关键词 | 清青、产品感、冷静、可读、偏内容 |
+| 密度 | 接近 V2EX / NGA，同时顶栏对齐 SPA 式工具条 |
+| 反模式 | 紫渐变、暖奶油底、大圆角卡片墙、全幅 hero、Inter/Roboto、顶栏链接墙、依赖本机 IBM Plex |

 ---

@@ -25,44 +27,45 @@

 | Token | 浅色 | 暗色 | 用途 |
 |-------|------|------|------|
-| `--j13-bg` | `#f3f4f6` | `#0f1419` | 页底（冷纸 / 墨底） |
-| `--j13-surface` | `#ffffff` | `#1a222c` | 顶栏、主栏底 |
+| `--j13-bg` | `#f4f8fa` | `#0c1216` | 页底（微青灰） |
+| `--j13-surface` | `#ffffff` | `#152028` | 顶栏、主栏 |
 | `--j13-text` | `#14212b` | `#e8eef2` | 正文 |
-| `--j13-muted` | `#5b6b76` | `#8b9aab` | 次要 |
-| `--j13-accent` | `#0d9488` | `#2dd4bf` | 链接 / 强调 |
-| `--j13-accent-ink` | `#134e4a` | `#99f6e4` | 品牌字、强强调 |
-| `--j13-on-accent` | `#ffffff` | `#134e4a` | 主按钮字 |
-| `--j13-border` | `#d5dde3` | `#2c3844` | 分隔线 |
-| `--j13-hover` | `#e8eef0` | `#243040` | 行 hover |
+| `--j13-muted` | `#5a6b75` | `#8b9aab` | 次要 |
+| `--j13-accent` | `#0e8a9a` | `#2ec4d6` | 链接 / 主按钮 / 分段 active |
+| `--j13-accent-ink` | `#0b5f6b` | `#9ae8f0` | 品牌字、强强调 |
+| `--j13-soft` | `#e6f7f9` | `#12343a` | 侧栏 active 底、focus ring |
+| `--j13-on-accent` | `#ffffff` | `#0b5f6b` | 主按钮字 |
+| `--j13-border` | `#d3e0e6` | `#2a3a44` | 分隔 |
+| `--j13-hover` | `#e8f4f6` | `#1c2d36` | 行 hover |

-语义色（ok / warn / err / pin / feat）继续用既有 `--j13-ok-*` 等，随主题成对定义。
+语义色（ok / warn / err / pin / feat）随主题成对定义；feat 用青 soft，不用草绿。

 ### 2.2 字号与字重

 | 阶 | 尺寸 | 用途 |
 |----|------|------|
-| `xs` | 0.75rem | 口号、辅助 |
-| `sm` | 0.8125rem | 元信息、侧栏 |
+| `xs` | 0.72–0.75rem | 口号、辅助 |
+| `sm` | 0.8125rem | 元信息、侧栏、顶栏次级 |
 | `md` | 0.9375rem | 正文默认 |
-| `lg` | 1.125rem | Feed 标题 |
+| `lg` | 1.15rem | Feed 标题 |
 | `xl` | 1.35rem | 帖标题 |
-| `brand` | 1.25rem / 700 | 顶栏站点名 |
+| `brand` | 1.3rem / 700 | 顶栏站点名 |

-字体栈：西文优先 `IBM Plex Sans`（本机有则用），中文 `PingFang SC` / `Hiragino Sans GB` / `Noto Sans SC` / `Microsoft YaHei`；代码 `IBM Plex Mono` / `Cascadia Code` / `Consolas`。不引入 Inter/Roboto。
+字体栈：**中文优先** PingFang SC / Hiragino / Microsoft YaHei / Noto Sans SC（与 SPA 一致，确保本机可见）；代码 Cascadia / Consolas。不引入 Inter/Roboto，不依赖本机 IBM Plex。

 ### 2.3 间距与圆角

- 栅格：4px 基准；常用 `0.5 / 0.75 / 1 / 1.25 / 1.5 rem`
- 圆角：`--j13-radius: 6px`（控件）；列表行无大圆角卡片
- 阴影：仅 sticky 顶栏微阴影 `0 1px 0 var(--j13-border)` + `0 4px 12px rgba(0,0,0,.04)`（滚动时）
+- 栅格：4px 基准；总宽 `--j13-frame: 1320px`
+- 圆角：`--j13-radius: 8px`；搜索 pill / 排序分段可用满圆角
+- 阴影：sticky 顶栏微阴影

 ### 2.4 动效

 | 处 | 行为 |
 |----|------|
 | 主题 | `color` / `background` / `border-color` `150ms ease` |
-| Feed 行 | hover 背景 `120ms ease` |
-| 顶栏 | sticky 时阴影淡入 |
+| Feed 行 | hover 背景 |
+| 顶栏 | sticky 阴影；搜索 focus soft ring |

 ---

@@ -70,10 +73,8 @@

 | 断点 | 行为 |
 |------|------|
-| ≥901px | 三栏：左 ~200px / 中 1fr / 右 ~240px；总宽 ~1120px |
-| ≤900px | 隐藏右栏（抽屉化 **下一刀**） |
-
-主栏与侧栏之间用细线或间距，**不**用大卡片包住整栏。
+| ≥901px | 三栏：左 ~200px / 中 1fr / 右 ~260px；总宽 ~1320px |
+| ≤900px | 隐藏右栏；顶栏搜索折行（抽屉化 **下一刀**） |

 ---

@@ -81,19 +82,16 @@

 | 组件 | 规则 |
 |------|------|
-| 顶栏 | 品牌一级信号；nav 次级；主题钮弱边框 |
-| 侧栏链 | 字号 sm；active 用左边框或 accent 字重，无厚底块 |
-| Feed 行 | 细线分隔；标题 lg；无白盒卡片 |
-| 标签 | 小圆角色块；语义色见 token |
-| 按钮 | 主：accent 底；次：边框；文字：linkbtn |
-| 评论 | 楼层号强调；嵌套左边线；密度高于卡片堆 |
-| 门控壳 | 虚线/淡底提示锁定，不抢正文 |
+| 顶栏 | 品牌 \| 搜索条 \| 发帖主按钮 + 主题 + 私信 + 用户 +「更多」菜单；告别链接墙 |
+| 侧栏链 | sm；active = soft 底 + 左边青条 |
+| Feed | 排序分段控件；搜索扁平工具条；细线列表；回复数右对齐强调 |
+| 标签 / 按钮 / 评论 / 门控 | 同青 token；列表仍非卡片墙 |

 ---

 ## 5. 范围边界

- **本系统覆盖**：公开页壳层（顶栏、三栏、Feed、帖详情、暗色）
- **不覆盖**：Admin 深度重绘、移动抽屉、虚拟滚动、TipTap
+- **覆盖**：公开页壳层、资源 `?v=`、浅/暗色
+- **不覆盖**：Admin 深重绘、移动抽屉、虚拟滚动、TipTap、改站名

-交叉：[06-pages-ux.md](06-pages-ux.md) 路由与操作流 · [09-ssr-progress.md](09-ssr-progress.md) 进度
+交叉：[06-pages-ux.md](06-pages-ux.md) · [09-ssr-progress.md](09-ssr-progress.md)