freefire
2ba010f3ea
顶栏搜索胶囊/发帖绿钮/Ctrl+K，侧栏板块色槽，列表 post-row--v2 与 SPA 同密度。 Co-authored-by: Cursor <cursoragent@cursor.com>
3.3 KiB
3.3 KiB
10 · 公开页设计系统
读者：实现公开页视觉 / CSS 的 AI
前置：01-product.md、06-pages-ux.md
实现：web_src/css/site.css、templates/base/
品牌：默认「姜十三论坛」；首页视觉对齐mainSPA 草绿产品壳
视觉可重设；信息架构与关键操作流以 06 为准。本文件只约定公开页壳层与内容表面的视觉语言。
静态资源须带构建版本号：/ssr-assets/site.css?v={{.AssetVersion}}（长缓存 + query 穿透，对齐 Gitea）。
1. 气质
| 项 | 约定 |
|---|---|
| 关键词 | 对齐 main SPA：草绿 #18a058、清新产品壳 |
| 密度 | SPA 同款顶栏工具条 + Feed post-row--v2 |
| 反模式 | 紫渐变、暖奶油底、大圆角卡片墙、全幅 hero、Inter/Roboto |
2. Token
2.1 色（CSS 变量 --j13-*）
| Token | 浅色 | 暗色 | 用途 |
|---|---|---|---|
--j13-bg / page |
#f5f7fa |
#141416 |
页底 |
--j13-surface |
#ffffff |
#1f1f23 |
顶栏、主栏 |
--j13-accent / green |
#18a058 |
#23c36b |
主色（对齐 main SPA） |
--j13-accent-ink |
#138f4c |
#6ee7a0 |
强强调 |
--j13-soft / green-bg |
#edfbf3 / rgba(24,160,88,.08) |
绿 soft | active / hover |
--j13-border |
#e8edf2 |
#2e2e32 |
分隔 |
语义色（ok / warn / err / pin / feat）随主题成对定义；feat 用青 soft，不用草绿。
2.2 字号与字重
| 阶 | 尺寸 | 用途 |
|---|---|---|
xs |
0.72–0.75rem | 口号、辅助 |
sm |
0.8125rem | 元信息、侧栏、顶栏次级 |
md |
0.9375rem | 正文默认 |
lg |
1.15rem | Feed 标题 |
xl |
1.35rem | 帖标题 |
brand |
1.3rem / 700 | 顶栏站点名 |
字体栈：中文优先 PingFang SC / Hiragino / Microsoft YaHei / Noto Sans SC（与 SPA 一致，确保本机可见）；代码 Cascadia / Consolas。不引入 Inter/Roboto，不依赖本机 IBM Plex。
2.3 间距与圆角
- 栅格：4px 基准；总宽
--j13-frame: 1320px - 圆角：
--j13-radius: 8px；搜索 pill / 排序分段可用满圆角 - 阴影：sticky 顶栏微阴影
2.4 动效
| 处 | 行为 |
|---|---|
| 主题 | color / background / border-color 150ms ease |
| Feed 行 | hover 背景 |
| 顶栏 | sticky 阴影；搜索 focus soft ring |
3. 布局
| 断点 | 行为 |
|---|---|
| ≥901px | 三栏：左 210px / 中 1fr / 右 280px；总宽 ~1400px（对齐 SPA） |
| ≤900px | 隐藏右栏；顶栏搜索折行（抽屉化 下一刀） |
4. 组件约定
| 组件 | 规则 |
|---|---|
| 顶栏 | SPA：品牌 | 搜索胶囊（筛选钮 + Ctrl+K）| 发帖绿钮 | 主题/私信/头像菜单 |
| 左栏 | 浏览 / 板块；active 绿底；板块色槽 + 帖数 |
| Feed 行 | post-row--v2：头像 · 徽章+标题 · 摘要（依 feed_list_style）· 元信息 · 回复数 |
| 高级搜索 | 顶栏筛选打开；有条件时 details 展开 |
| 排序 | SPA feed-sort-tab 绿 active |
5. 范围边界
- 覆盖：公开页壳层（含首页门面密度）、资源
?v=、浅/暗色 - 不覆盖：Admin 深重绘、移动抽屉、虚拟滚动、TipTap、改站名