feat: 公开页设计系统与壳层重绘
落墨青冷纸 token 与设计规格,重绘顶栏/三栏/Feed/帖详情壳层并同步暗色。 Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -4,7 +4,7 @@
|
||||
> **前置**:[02-features.md](02-features.md)
|
||||
> **源码**:[`frontend/src/App.tsx`]((仅 main)frontend/src/App.tsx)、[`frontend/src/pages/`]((仅 main)frontend/src/pages/)、[`frontend/src/components/`]((仅 main)frontend/src/components/)、[`frontend/src/layouts/`]((仅 main)frontend/src/layouts/)
|
||||
|
||||
视觉可重设;**信息架构与关键操作流应对齐**。新站建议 SSR 直出同等信息,而不是先空壳再 fetch。
|
||||
视觉可重设(见 [10-design-system.md](10-design-system.md));**信息架构与关键操作流应对齐**。新站建议 SSR 直出同等信息,而不是先空壳再 fetch。
|
||||
|
||||
---
|
||||
|
||||
|
||||
@@ -10,15 +10,15 @@
|
||||
|
||||
| 项 | 值 |
|
||||
|----|-----|
|
||||
| **上一刀** | 主题去防闪 + 删未挂载 JSON API / crawler + 文档对齐 |
|
||||
| **下一刀** | 需点名(OIDC Admin / S3 / Gitea / 表格表情…) |
|
||||
| **上一刀** | 公开页设计系统重绘(token + 顶栏/三栏/Feed/帖详情壳层) |
|
||||
| **下一刀** | 需点名(移动侧栏抽屉 / OIDC Admin / S3 / Gitea / 表格表情…) |
|
||||
| **工作区** | 应干净 |
|
||||
|
||||
---
|
||||
|
||||
## 一句话状态
|
||||
|
||||
核心论坛、Admin、Limits/伪静态、嵌套评论、Markdown 编辑器、主题已齐;本分支 `routers/api` 仅保留机器入口。余量多为后置与体验打磨。
|
||||
核心论坛、Admin、Limits/伪静态、嵌套评论、Markdown 编辑器、主题、公开页设计系统已齐;本分支 `routers/api` 仅保留机器入口。余量多为后置与体验打磨。
|
||||
|
||||
---
|
||||
|
||||
@@ -32,6 +32,7 @@
|
||||
| Markdown 工具栏 + preview | 已迁 |
|
||||
| 浅色 / 暗色 / 跟随系统 | 已迁(CSS 媒体查询,无 head 防闪脚本) |
|
||||
| 未挂载论坛 JSON API | 已删(对照 `main`) |
|
||||
| 公开页设计系统 | 已迁([10-design-system.md](10-design-system.md) + 壳层 CSS) |
|
||||
|
||||
---
|
||||
|
||||
|
||||
99
docs/rebuild-spec/10-design-system.md
Normal file
99
docs/rebuild-spec/10-design-system.md
Normal file
@@ -0,0 +1,99 @@
|
||||
# 10 · 公开页设计系统
|
||||
|
||||
> **读者**:实现公开页视觉 / 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`)
|
||||
|
||||
视觉可重设;**信息架构与关键操作流以 06 为准**。本文件只约定公开页壳层与内容表面的视觉语言。
|
||||
|
||||
---
|
||||
|
||||
## 1. 气质
|
||||
|
||||
| 项 | 约定 |
|
||||
|----|------|
|
||||
| 关键词 | 墨青、编辑式、冷静、可读、偏内容 |
|
||||
| 密度 | 接近 V2EX / NGA:一屏多信息,非营销留白 |
|
||||
| 反模式 | 紫渐变、暖奶油底、大圆角卡片墙、全幅 hero、Inter/Roboto 默认堆 |
|
||||
|
||||
---
|
||||
|
||||
## 2. Token
|
||||
|
||||
### 2.1 色(CSS 变量 `--j13-*`)
|
||||
|
||||
| Token | 浅色 | 暗色 | 用途 |
|
||||
|-------|------|------|------|
|
||||
| `--j13-bg` | `#f3f4f6` | `#0f1419` | 页底(冷纸 / 墨底) |
|
||||
| `--j13-surface` | `#ffffff` | `#1a222c` | 顶栏、主栏底 |
|
||||
| `--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 |
|
||||
|
||||
语义色(ok / warn / err / pin / feat)继续用既有 `--j13-ok-*` 等,随主题成对定义。
|
||||
|
||||
### 2.2 字号与字重
|
||||
|
||||
| 阶 | 尺寸 | 用途 |
|
||||
|----|------|------|
|
||||
| `xs` | 0.75rem | 口号、辅助 |
|
||||
| `sm` | 0.8125rem | 元信息、侧栏 |
|
||||
| `md` | 0.9375rem | 正文默认 |
|
||||
| `lg` | 1.125rem | Feed 标题 |
|
||||
| `xl` | 1.35rem | 帖标题 |
|
||||
| `brand` | 1.25rem / 700 | 顶栏站点名 |
|
||||
|
||||
字体栈:西文优先 `IBM Plex Sans`(本机有则用),中文 `PingFang SC` / `Hiragino Sans GB` / `Noto Sans SC` / `Microsoft YaHei`;代码 `IBM Plex Mono` / `Cascadia Code` / `Consolas`。不引入 Inter/Roboto。
|
||||
|
||||
### 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)`(滚动时)
|
||||
|
||||
### 2.4 动效
|
||||
|
||||
| 处 | 行为 |
|
||||
|----|------|
|
||||
| 主题 | `color` / `background` / `border-color` `150ms ease` |
|
||||
| Feed 行 | hover 背景 `120ms ease` |
|
||||
| 顶栏 | sticky 时阴影淡入 |
|
||||
|
||||
---
|
||||
|
||||
## 3. 布局
|
||||
|
||||
| 断点 | 行为 |
|
||||
|------|------|
|
||||
| ≥901px | 三栏:左 ~200px / 中 1fr / 右 ~240px;总宽 ~1120px |
|
||||
| ≤900px | 隐藏右栏(抽屉化 **下一刀**) |
|
||||
|
||||
主栏与侧栏之间用细线或间距,**不**用大卡片包住整栏。
|
||||
|
||||
---
|
||||
|
||||
## 4. 组件约定
|
||||
|
||||
| 组件 | 规则 |
|
||||
|------|------|
|
||||
| 顶栏 | 品牌一级信号;nav 次级;主题钮弱边框 |
|
||||
| 侧栏链 | 字号 sm;active 用左边框或 accent 字重,无厚底块 |
|
||||
| Feed 行 | 细线分隔;标题 lg;无白盒卡片 |
|
||||
| 标签 | 小圆角色块;语义色见 token |
|
||||
| 按钮 | 主:accent 底;次:边框;文字:linkbtn |
|
||||
| 评论 | 楼层号强调;嵌套左边线;密度高于卡片堆 |
|
||||
| 门控壳 | 虚线/淡底提示锁定,不抢正文 |
|
||||
|
||||
---
|
||||
|
||||
## 5. 范围边界
|
||||
|
||||
- **本系统覆盖**:公开页壳层(顶栏、三栏、Feed、帖详情、暗色)
|
||||
- **不覆盖**:Admin 深度重绘、移动抽屉、虚拟滚动、TipTap
|
||||
|
||||
交叉:[06-pages-ux.md](06-pages-ux.md) 路由与操作流 · [09-ssr-progress.md](09-ssr-progress.md) 进度
|
||||
@@ -2,7 +2,7 @@
|
||||
|
||||
> **读者**:准备用新栈(建议真 SSR)重写站点的 AI / 开发者
|
||||
> **事实来源**:本仓库现有代码;规格描述「产品必须保留什么」,不是「必须继续用 Go + React SPA」
|
||||
> **交叉引用**:[01-product](01-product.md) · [02-features](02-features.md) · [03-data-model](03-data-model.md) · [04-api](04-api.md) · [05-business-rules](05-business-rules.md) · [06-pages-ux](06-pages-ux.md) · [07-config-ops](07-config-ops.md) · [08-gitea-ssr-architecture](08-gitea-ssr-architecture.md) · [09-ssr-progress](09-ssr-progress.md)
|
||||
> **交叉引用**:[01-product](01-product.md) · [02-features](02-features.md) · [03-data-model](03-data-model.md) · [04-api](04-api.md) · [05-business-rules](05-business-rules.md) · [06-pages-ux](06-pages-ux.md) · [07-config-ops](07-config-ops.md) · [08-gitea-ssr-architecture](08-gitea-ssr-architecture.md) · [09-ssr-progress](09-ssr-progress.md) · [10-design-system](10-design-system.md)
|
||||
|
||||
> **实现栈(重构分支)**:Gitea 式 Go 模板 SSR;开发分支 `rebuild/gitea-ssr`;`main` 保留 React SPA 对照。详见 [08](08-gitea-ssr-architecture.md)。
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
| 8 | [07-config-ops.md](07-config-ops.md) | 配置、数据目录、部署、SEO 字段 |
|
||||
| 9 | [08-gitea-ssr-architecture.md](08-gitea-ssr-architecture.md) | Gitea 式 SSR 分支与目录约定 |
|
||||
| 10 | [09-ssr-progress.md](09-ssr-progress.md) | **进度与刀序**(「现在做到哪 / 下一刀」) |
|
||||
| 11 | [10-design-system.md](10-design-system.md) | 公开页视觉 token / 组件(壳层重绘) |
|
||||
|
||||
单次 context 不够时:先投喂 `README` + `01` + `02`;跟进度看 `09`;实现某模块时再追加对应 `03`–`06` 章节。
|
||||
|
||||
|
||||
Reference in New Issue
Block a user