From e0683ef2620cd6a577c150af05acecb16a16fb0e Mon Sep 17 00:00:00 2001 From: freefire Date: Sun, 30 Aug 2026 05:43:25 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E9=9D=92=E4=B8=BB=E9=A2=98=E4=BA=A7?= =?UTF-8?q?=E5=93=81=E5=A3=B3=E4=B8=8E=E9=9D=99=E6=80=81=E8=B5=84=E6=BA=90?= =?UTF-8?q?=E7=89=88=E6=9C=AC=E5=8F=B7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 对齐 SPA 顶栏工具条与清青强调色，CSS/JS 带构建 ?v= 长缓存穿透。 Co-authored-by: Cursor --- Makefile | 2 +- build.ps1 | 6 + cmd/jiang13/program.go | 1 + config/config.go | 1 + docs/rebuild-spec/09-ssr-progress.md | 6 +- docs/rebuild-spec/10-design-system.md | 72 ++-- public/assets/site.css | 574 +++++++++++++++----------- routers/install/install.go | 23 +- routers/setup.go | 12 +- routers/web/chrome.go | 51 ++- templates/base/footer.tmpl | 2 +- templates/base/head.tmpl | 3 +- templates/base/navbar.tmpl | 50 ++- templates/home/feed.tmpl | 4 +- web_src/css/site.css | 574 +++++++++++++++----------- 15 files changed, 827 insertions(+), 554 deletions(-) diff --git a/Makefile b/Makefile index c4df5dc..3ef8da2 100644 --- a/Makefile +++ b/Makefile @@ -5,7 +5,7 @@ APP_NAME := jiang13 MAIN_PKG := ./cmd/jiang13 BUILD_DIR := dist DEV_DATA_DIR := dist/data -VERSION := 1.0.0 +VERSION := $(shell git rev-parse --short HEAD 2>/dev/null | sed 's/^/1.0.0+/' || echo 1.0.0) LDFLAGS := -s -w -X main.version=$(VERSION) REGISTRY_IMAGE := hangzhang714128/jiang13-forum diff --git a/build.ps1 b/build.ps1 index e1e7498..016cf55 100644 --- a/build.ps1 +++ b/build.ps1 @@ -14,6 +14,12 @@ $MainPkg = './cmd/jiang13' $BuildDir = 'dist' $DevDataDir = 'dist/data' $Version = '1.0.0' +try { + $gitSha = (git rev-parse --short HEAD 2>$null) + if ($LASTEXITCODE -eq 0 -and $gitSha) { + $Version = "1.0.0+$gitSha" + } +} catch {} $RegistryImage = 'hangzhang714128/jiang13-forum' $Ldlags = "-s -w -X main.version=$Version" diff --git a/cmd/jiang13/program.go b/cmd/jiang13/program.go index 3d634dd..246c67a 100644 --- a/cmd/jiang13/program.go +++ b/cmd/jiang13/program.go @@ -57,6 +57,7 @@ func (p *program) Stop(s kardsvc.Service) error { func (p *program) setup() error { cfg := p.cfg + cfg.Version = version logFile, err := os.OpenFile(cfg.LogFile, os.O_CREATE|os.O_WRONLY|os.O_APPEND, 0644) if err != nil { diff --git a/config/config.go b/config/config.go index 3d969ae..37a7b07 100644 --- a/config/config.go +++ b/config/config.go @@ -52,6 +52,7 @@ type Config struct { LogFile string ServiceAction string DevMode bool + Version string // 构建版本（ldflags）；用于 /ssr-assets ?v= 缓存穿透 DB DatabaseConfig } diff --git a/docs/rebuild-spec/09-ssr-progress.md b/docs/rebuild-spec/09-ssr-progress.md index 48a2945..c31ee81 100644 --- 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)） | --- diff --git a/docs/rebuild-spec/10-design-system.md b/docs/rebuild-spec/10-design-system.md index fd1dacb..339ffb5 100644 --- 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) diff --git a/public/assets/site.css b/public/assets/site.css index 29dd408..9eb0542 100644 --- a/public/assets/site.css +++ b/public/assets/site.css @@ -1,18 +1,19 @@ -/* 姜十三论坛公开页样式 — 对齐 docs/rebuild-spec/10-design-system.md */ +/* 姜十三论坛公开页样式 — 对齐 docs/rebuild-spec/10-design-system.md（清青产品） */ :root { color-scheme: light; - --j13-bg: #f3f4f6; + --j13-bg: #f4f8fa; --j13-surface: #ffffff; --j13-text: #14212b; - --j13-muted: #5b6b76; - --j13-accent: #0d9488; - --j13-accent-ink: #134e4a; + --j13-muted: #5a6b75; + --j13-accent: #0e8a9a; + --j13-accent-ink: #0b5f6b; --j13-on-accent: #ffffff; - --j13-border: #d5dde3; - --j13-hover: #e8eef0; - --j13-radius: 6px; - --j13-font: "IBM Plex Sans", "PingFang SC", "Hiragino Sans GB", "Noto Sans SC", "Microsoft YaHei", "Segoe UI", system-ui, sans-serif; - --j13-font-mono: "IBM Plex Mono", "Cascadia Code", "Consolas", "SF Mono", ui-monospace, monospace; + --j13-soft: #e6f7f9; + --j13-border: #d3e0e6; + --j13-hover: #e8f4f6; + --j13-radius: 8px; + --j13-font: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei UI", "Microsoft YaHei", "Noto Sans SC", "Segoe UI", system-ui, sans-serif; + --j13-font-mono: "Cascadia Code", "Consolas", "SF Mono", ui-monospace, monospace; --j13-danger: #b91c1c; --j13-ok-bg: #ecfdf5; --j13-ok-fg: #065f46; @@ -24,31 +25,34 @@ --j13-err-border: #fecaca; --j13-pin-bg: #fef3c7; --j13-pin-fg: #92400e; - --j13-feat-bg: #e0f2f1; - --j13-feat-fg: #115e59; + --j13-feat-bg: #e6f7f9; + --j13-feat-fg: #0b5f6b; --j13-neutral-bg: #eef2f6; --j13-neutral-fg: #475569; - --j13-self-bg: #e6fffa; - --j13-self-border: #99f6e4; + --j13-self-bg: #e6f7f9; + --j13-self-border: #7dd3de; --j13-delta-pos: #15803d; --j13-delta-neg: #b91c1c; - --j13-overlay: rgba(255, 255, 255, 0.88); - --j13-header-shadow: 0 1px 0 var(--j13-border), 0 4px 14px rgba(20, 33, 43, 0.05); + --j13-overlay: rgba(244, 248, 250, 0.92); + --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 18px rgba(11, 95, 107, 0.06); --j13-ease: 150ms ease; + --j13-frame: 1320px; + --j13-header-h: 3.5rem; } @media (prefers-color-scheme: dark) { :root { color-scheme: dark; - --j13-bg: #0f1419; - --j13-surface: #1a222c; + --j13-bg: #0c1216; + --j13-surface: #152028; --j13-text: #e8eef2; --j13-muted: #8b9aab; - --j13-accent: #2dd4bf; - --j13-accent-ink: #99f6e4; - --j13-on-accent: #134e4a; - --j13-border: #2c3844; - --j13-hover: #243040; + --j13-accent: #2ec4d6; + --j13-accent-ink: #9ae8f0; + --j13-on-accent: #0b5f6b; + --j13-soft: #12343a; + --j13-border: #2a3a44; + --j13-hover: #1c2d36; --j13-danger: #f87171; --j13-ok-bg: #064e3b; --j13-ok-fg: #a7f3d0; @@ -60,30 +64,31 @@ --j13-err-border: #991b1b; --j13-pin-bg: #78350f; --j13-pin-fg: #fde68a; - --j13-feat-bg: #134e4a; - --j13-feat-fg: #99f6e4; + --j13-feat-bg: #0b5f6b; + --j13-feat-fg: #9ae8f0; --j13-neutral-bg: #243040; --j13-neutral-fg: #cbd5e1; - --j13-self-bg: #134e4a; - --j13-self-border: #0d9488; + --j13-self-bg: #0b5f6b; + --j13-self-border: #0e8a9a; --j13-delta-pos: #4ade80; --j13-delta-neg: #f87171; - --j13-overlay: rgba(15, 20, 25, 0.88); - --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 16px rgba(0, 0, 0, 0.35); + --j13-overlay: rgba(12, 18, 22, 0.9); + --j13-header-shadow: 0 1px 0 var(--j13-border), 0 8px 20px rgba(0, 0, 0, 0.4); } } html[data-theme="light"] { color-scheme: light; - --j13-bg: #f3f4f6; + --j13-bg: #f4f8fa; --j13-surface: #ffffff; --j13-text: #14212b; - --j13-muted: #5b6b76; - --j13-accent: #0d9488; - --j13-accent-ink: #134e4a; + --j13-muted: #5a6b75; + --j13-accent: #0e8a9a; + --j13-accent-ink: #0b5f6b; --j13-on-accent: #ffffff; - --j13-border: #d5dde3; - --j13-hover: #e8eef0; + --j13-soft: #e6f7f9; + --j13-border: #d3e0e6; + --j13-hover: #e8f4f6; --j13-danger: #b91c1c; --j13-ok-bg: #ecfdf5; --j13-ok-fg: #065f46; @@ -95,29 +100,30 @@ html[data-theme="light"] { --j13-err-border: #fecaca; --j13-pin-bg: #fef3c7; --j13-pin-fg: #92400e; - --j13-feat-bg: #e0f2f1; - --j13-feat-fg: #115e59; + --j13-feat-bg: #e6f7f9; + --j13-feat-fg: #0b5f6b; --j13-neutral-bg: #eef2f6; --j13-neutral-fg: #475569; - --j13-self-bg: #e6fffa; - --j13-self-border: #99f6e4; + --j13-self-bg: #e6f7f9; + --j13-self-border: #7dd3de; --j13-delta-pos: #15803d; --j13-delta-neg: #b91c1c; - --j13-overlay: rgba(255, 255, 255, 0.88); - --j13-header-shadow: 0 1px 0 var(--j13-border), 0 4px 14px rgba(20, 33, 43, 0.05); + --j13-overlay: rgba(244, 248, 250, 0.92); + --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 18px rgba(11, 95, 107, 0.06); } html[data-theme="dark"] { color-scheme: dark; - --j13-bg: #0f1419; - --j13-surface: #1a222c; + --j13-bg: #0c1216; + --j13-surface: #152028; --j13-text: #e8eef2; --j13-muted: #8b9aab; - --j13-accent: #2dd4bf; - --j13-accent-ink: #99f6e4; - --j13-on-accent: #134e4a; - --j13-border: #2c3844; - --j13-hover: #243040; + --j13-accent: #2ec4d6; + --j13-accent-ink: #9ae8f0; + --j13-on-accent: #0b5f6b; + --j13-soft: #12343a; + --j13-border: #2a3a44; + --j13-hover: #1c2d36; --j13-danger: #f87171; --j13-ok-bg: #064e3b; --j13-ok-fg: #a7f3d0; @@ -129,16 +135,16 @@ html[data-theme="dark"] { --j13-err-border: #991b1b; --j13-pin-bg: #78350f; --j13-pin-fg: #fde68a; - --j13-feat-bg: #134e4a; - --j13-feat-fg: #99f6e4; + --j13-feat-bg: #0b5f6b; + --j13-feat-fg: #9ae8f0; --j13-neutral-bg: #243040; --j13-neutral-fg: #cbd5e1; - --j13-self-bg: #134e4a; - --j13-self-border: #0d9488; + --j13-self-bg: #0b5f6b; + --j13-self-border: #0e8a9a; --j13-delta-pos: #4ade80; --j13-delta-neg: #f87171; - --j13-overlay: rgba(15, 20, 25, 0.88); - --j13-header-shadow: 0 1px 0 var(--j13-border), 0 6px 16px rgba(0, 0, 0, 0.35); + --j13-overlay: rgba(12, 18, 22, 0.9); + --j13-header-shadow: 0 1px 0 var(--j13-border), 0 8px 20px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } @@ -160,6 +166,18 @@ code, pre, .j13-md-editor__input { font-family: var(--j13-font-mono); } +.j13-visually-hidden { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border: 0; +} + .j13-header { background: var(--j13-surface); border-bottom: 1px solid var(--j13-border); @@ -170,13 +188,14 @@ code, pre, .j13-md-editor__input { transition: background-color var(--j13-ease), border-color var(--j13-ease), box-shadow var(--j13-ease); } .j13-header__inner { - max-width: 1120px; + max-width: var(--j13-frame); margin: 0 auto; - padding: 0.65rem 1rem; - display: flex; + padding: 0.55rem 1.1rem; + min-height: var(--j13-header-h); + display: grid; + grid-template-columns: auto minmax(12rem, 1fr) auto; align-items: center; - justify-content: space-between; - gap: 1rem; + gap: 0.85rem 1.1rem; } .j13-brand { display: flex; @@ -188,11 +207,11 @@ code, pre, .j13-md-editor__input { } .j13-brand:hover { color: inherit; } .j13-brand__mark { - width: 2.15rem; - height: 2.15rem; + width: 2.25rem; + height: 2.25rem; border-radius: var(--j13-radius); - background: var(--j13-accent-ink); - color: #fff; + background: var(--j13-accent); + color: var(--j13-on-accent); display: grid; place-items: center; font-weight: 700; @@ -200,55 +219,91 @@ code, pre, .j13-md-editor__input { letter-spacing: -0.02em; } html[data-theme="dark"] .j13-brand__mark { - color: #0f1419; + color: #0c1216; } @media (prefers-color-scheme: dark) { html:not([data-theme="light"]) .j13-brand__mark { - color: #0f1419; + color: #0c1216; } } .j13-brand__logo { - width: 2.15rem; - height: 2.15rem; + width: 2.25rem; + height: 2.25rem; object-fit: contain; border-radius: var(--j13-radius); } .j13-brand__text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; } .j13-brand__text strong { - font-size: 1.25rem; + font-size: 1.3rem; font-weight: 700; - letter-spacing: -0.025em; + letter-spacing: -0.03em; color: var(--j13-accent-ink); line-height: 1.15; } .j13-brand__slogan { - font-size: 0.75rem; + font-size: 0.72rem; color: var(--j13-muted); line-height: 1.2; + max-width: 14rem; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; } -.j13-nav { + +.j13-header-search { margin: 0; min-width: 0; } +.j13-header-search__label { display: block; } +.j13-header-search input { + width: 100%; + max-width: 28rem; + margin: 0 auto; + display: block; + padding: 0.45rem 0.85rem; + border: 1px solid var(--j13-border); + border-radius: 999px; + background: var(--j13-bg); + color: var(--j13-text); + font: inherit; + font-size: 0.875rem; + transition: border-color var(--j13-ease), box-shadow var(--j13-ease); +} +.j13-header-search input:focus { + outline: none; + border-color: var(--j13-accent); + box-shadow: 0 0 0 3px var(--j13-soft); +} + +.j13-header__actions { display: flex; - gap: 0.15rem 0.75rem; + gap: 0.35rem 0.55rem; flex-wrap: wrap; align-items: center; justify-content: flex-end; } -.j13-nav a { +.j13-header__textlink, +.j13-header__iconlink, +.j13-header__user { color: var(--j13-muted); text-decoration: none; font-size: 0.8125rem; font-weight: 500; - padding: 0.2rem 0; + padding: 0.2rem 0.15rem; transition: color var(--j13-ease); } -.j13-nav a:hover { color: var(--j13-accent); text-decoration: none; } +.j13-header__textlink:hover, +.j13-header__iconlink:hover, +.j13-header__user:hover { color: var(--j13-accent); } +.j13-btn--compose { + white-space: nowrap; + padding: 0.4rem 0.9rem; + font-size: 0.8125rem; +} .j13-theme-toggle { appearance: none; border: 1px solid var(--j13-border); background: transparent; color: var(--j13-muted); border-radius: var(--j13-radius); - padding: 0.2rem 0.5rem; + padding: 0.3rem 0.55rem; font: inherit; font-size: 0.75rem; font-weight: 500; @@ -262,17 +317,84 @@ html[data-theme="dark"] .j13-brand__mark { background: var(--j13-hover); } +.j13-more { position: relative; } +.j13-more > summary { + list-style: none; + cursor: pointer; + color: var(--j13-muted); + font-size: 0.8125rem; + font-weight: 500; + padding: 0.3rem 0.45rem; + border-radius: var(--j13-radius); + border: 1px solid transparent; +} +.j13-more > summary::-webkit-details-marker { display: none; } +.j13-more > summary:hover, +.j13-more[open] > summary { + color: var(--j13-accent-ink); + background: var(--j13-hover); + border-color: var(--j13-border); +} +.j13-more__menu { + position: absolute; + right: 0; + top: calc(100% + 0.35rem); + min-width: 9.5rem; + padding: 0.35rem; + background: var(--j13-surface); + border: 1px solid var(--j13-border); + border-radius: var(--j13-radius); + box-shadow: 0 8px 24px rgba(20, 33, 43, 0.1); + display: flex; + flex-direction: column; + gap: 0.1rem; + z-index: 20; +} +.j13-more__menu a, +.j13-more__menu button { + display: block; + width: 100%; + text-align: left; + padding: 0.4rem 0.55rem; + border: 0; + border-radius: 6px; + background: transparent; + color: var(--j13-text); + text-decoration: none; + font: inherit; + font-size: 0.8125rem; + cursor: pointer; +} +.j13-more__menu a:hover, +.j13-more__menu button:hover { + background: var(--j13-hover); + color: var(--j13-accent-ink); +} +.j13-more__menu form { margin: 0; } + +@media (max-width: 900px) { + .j13-header__inner { + grid-template-columns: 1fr auto; + } + .j13-header-search { + grid-column: 1 / -1; + order: 3; + } + .j13-header-search input { max-width: none; } + .j13-brand__slogan { display: none; } +} + .j13-layout { - max-width: 1120px; + max-width: var(--j13-frame); margin: 0 auto; - padding: 1rem 1rem 2rem; + padding: 1.1rem 1.1rem 2.25rem; display: grid; - grid-template-columns: 188px minmax(0, 1fr) 228px; - gap: 1.5rem; + grid-template-columns: 200px minmax(0, 1fr) 260px; + gap: 1.35rem; align-items: start; } @media (max-width: 900px) { - .j13-layout { grid-template-columns: 168px minmax(0, 1fr); } + .j13-layout { grid-template-columns: 180px minmax(0, 1fr); } .j13-aside--right { display: none; } } @media (max-width: 800px) { @@ -286,17 +408,17 @@ html[data-theme="dark"] .j13-brand__mark { } .j13-aside--left { position: sticky; - top: 3.75rem; + top: calc(var(--j13-header-h) + 0.75rem); } .j13-aside--right { gap: 1.15rem; position: sticky; - top: 3.75rem; + top: calc(var(--j13-header-h) + 0.75rem); } .j13-aside__link { - padding: 0.4rem 0.55rem; + padding: 0.45rem 0.6rem; border-radius: var(--j13-radius); - border-left: 2px solid transparent; + border-left: 3px solid transparent; color: var(--j13-text); text-decoration: none; font-size: 0.8125rem; @@ -307,10 +429,10 @@ html[data-theme="dark"] .j13-brand__mark { color: var(--j13-accent-ink); } .j13-aside__link.is-active { - background: var(--j13-hover); + background: var(--j13-soft); color: var(--j13-accent-ink); border-left-color: var(--j13-accent); - font-weight: 600; + font-weight: 650; } .j13-main { @@ -318,8 +440,139 @@ html[data-theme="dark"] .j13-brand__mark { min-height: 40vh; background: var(--j13-surface); border: 1px solid var(--j13-border); + border-radius: calc(var(--j13-radius) + 2px); + padding: 1.05rem 1.2rem 1.4rem; +} + +.j13-feed__header { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: space-between; + gap: 0.75rem 1rem; + margin-bottom: 0.75rem; +} +.j13-feed__title { + margin: 0; + font-size: 1.25rem; + font-weight: 700; + letter-spacing: -0.025em; + color: var(--j13-accent-ink); +} +.j13-sort { + display: inline-flex; + gap: 0; + font-size: 0.8125rem; + padding: 0.15rem; + border: 1px solid var(--j13-border); + border-radius: 999px; + background: var(--j13-bg); +} +.j13-sort a { + color: var(--j13-muted); + text-decoration: none; + padding: 0.3rem 0.75rem; + border-radius: 999px; + transition: background-color var(--j13-ease), color var(--j13-ease); +} +.j13-sort a.is-active { + color: var(--j13-on-accent); + font-weight: 650; + background: var(--j13-accent); +} +.j13-sort a:hover:not(.is-active) { + color: var(--j13-accent-ink); + background: var(--j13-hover); +} + +.j13-search { + margin: 0 0 0.85rem; + padding: 0; + border: 0; + border-radius: 0; + background: transparent; + scroll-margin-top: 4.5rem; +} +.j13-search--toolbar .j13-search__row { + display: flex; + flex-wrap: wrap; + gap: 0.5rem 0.65rem; + align-items: flex-end; + padding: 0.55rem 0.65rem; + border: 1px solid var(--j13-border); border-radius: var(--j13-radius); - padding: 1rem 1.15rem 1.35rem; + background: var(--j13-bg); +} +.j13-search__field { + display: flex; + flex-direction: column; + gap: 0.15rem; + min-width: 7rem; + flex: 1 1 7rem; +} +.j13-search__label { + font-size: 0.7rem; + color: var(--j13-muted); + font-weight: 500; +} +.j13-search__field input { + padding: 0.35rem 0.5rem; + border: 1px solid var(--j13-border); + border-radius: 6px; + background: var(--j13-surface); + color: inherit; + font: inherit; + font-size: 0.875rem; +} +.j13-search__check { + display: flex; + align-items: center; + gap: 0.35rem; + font-size: 0.8125rem; + padding-bottom: 0.3rem; + white-space: nowrap; + color: var(--j13-muted); +} +.j13-search__err { + margin: 0.5rem 0 0; + color: var(--j13-danger); + font-size: 0.875rem; +} + +.j13-post-list { list-style: none; margin: 0; padding: 0; } +.j13-post-item { + padding: 0.85rem 0.4rem; + margin: 0 -0.4rem; + border-top: 1px solid var(--j13-border); + border-radius: var(--j13-radius); + transition: background-color var(--j13-ease); +} +.j13-post-item:first-child { border-top: 0; } +.j13-post-item:hover { background: var(--j13-hover); } +.j13-post-item__title { + color: var(--j13-text); + text-decoration: none; + font-weight: 700; + font-size: 1.15rem; + letter-spacing: -0.02em; + line-height: 1.35; + transition: color var(--j13-ease); +} +.j13-post-item__title:hover { color: var(--j13-accent); } +.j13-post-item__meta { + margin-top: 0.35rem; + font-size: 0.75rem; + color: var(--j13-muted); + display: flex; + flex-wrap: wrap; + gap: 0.45rem; + align-items: center; +} +.j13-post-item__replies { + margin-left: auto; + font-weight: 650; + color: var(--j13-accent-ink); + font-variant-numeric: tabular-nums; } .j13-widget__title { @@ -424,147 +677,6 @@ html[data-theme="dark"] .j13-brand__mark { } .j13-checkin__more a { color: var(--j13-accent); } -.j13-feed__header { - display: flex; - flex-wrap: wrap; - align-items: baseline; - justify-content: space-between; - gap: 0.75rem 1rem; - margin-bottom: 0.85rem; - padding-bottom: 0.65rem; - border-bottom: 1px solid var(--j13-border); -} -.j13-feed__title { - margin: 0; - font-size: 1.2rem; - font-weight: 700; - letter-spacing: -0.02em; - color: var(--j13-accent-ink); -} -.j13-sort { display: flex; gap: 0.15rem; font-size: 0.8125rem; } -.j13-sort a { - color: var(--j13-muted); - text-decoration: none; - padding: 0.25rem 0.55rem; - border-radius: var(--j13-radius); - transition: background-color var(--j13-ease), color var(--j13-ease); -} -.j13-sort a.is-active { - color: var(--j13-accent-ink); - font-weight: 650; - background: var(--j13-hover); -} -.j13-sort a:hover { color: var(--j13-accent); background: var(--j13-hover); } - -.j13-search { - margin: 0 0 1rem; - padding: 0.75rem 0.85rem; - border: 1px solid var(--j13-border); - border-radius: var(--j13-radius); - background: var(--j13-bg); - scroll-margin-top: 4rem; -} -.j13-search__row { - display: flex; - flex-wrap: wrap; - gap: 0.65rem 0.75rem; - align-items: flex-end; -} -.j13-search__field { - display: flex; - flex-direction: column; - gap: 0.2rem; - min-width: 8rem; - flex: 1 1 8rem; -} -.j13-search__label { - font-size: 0.75rem; - color: var(--j13-muted); -} -.j13-search__field input { - padding: 0.4rem 0.5rem; - border: 1px solid var(--j13-border); - border-radius: var(--j13-radius); - background: var(--j13-bg); - color: inherit; - font: inherit; -} -.j13-search__check { - display: flex; - align-items: center; - gap: 0.35rem; - font-size: 0.875rem; - padding-bottom: 0.35rem; - white-space: nowrap; -} -.j13-search__err { - margin: 0.5rem 0 0; - color: var(--j13-danger); - font-size: 0.875rem; -} - -.j13-post-list { list-style: none; margin: 0; padding: 0; } -.j13-post-item { - padding: 0.7rem 0.35rem; - margin: 0 -0.35rem; - border-top: 1px solid var(--j13-border); - border-radius: var(--j13-radius); - transition: background-color var(--j13-ease); -} -.j13-post-item:first-child { border-top: 0; } -.j13-post-item:hover { - background: var(--j13-hover); -} -.j13-post-item__title { - color: var(--j13-text); - text-decoration: none; - font-weight: 650; - font-size: 1.125rem; - letter-spacing: -0.015em; - line-height: 1.35; - transition: color var(--j13-ease); -} -.j13-post-item__title:hover { color: var(--j13-accent); } -.j13-post-item__meta { - margin-top: 0.3rem; - font-size: 0.75rem; - color: var(--j13-muted); - display: flex; - flex-wrap: wrap; - gap: 0.45rem; - align-items: center; -} -.j13-tag { - background: var(--j13-ok-bg); - color: var(--j13-accent); - padding: 0.1rem 0.4rem; - border-radius: 4px; - font-size: 0.75rem; -} -.j13-tag--pin { background: var(--j13-pin-bg); color: var(--j13-pin-fg); } -.j13-tag--pending { background: var(--j13-warn-bg); color: var(--j13-warn-fg); } -.j13-tag--rejected { background: var(--j13-err-bg); color: var(--j13-err-fg); } -.j13-mod-banner { - margin: 0.5rem 0 0.75rem; - padding: 0.65rem 0.85rem; - border-radius: var(--j13-radius); - font-size: 0.9rem; - line-height: 1.4; -} -.j13-mod-banner--pending { - background: var(--j13-warn-bg); - color: var(--j13-warn-fg); - border: 1px solid var(--j13-warn-border); -} -.j13-mod-banner--rejected { - background: var(--j13-err-bg); - color: var(--j13-err-fg); - border: 1px solid var(--j13-err-border); -} -.j13-tag--feat { background: var(--j13-feat-bg); color: var(--j13-feat-fg); } -.j13-tag--resolved { background: var(--j13-ok-bg); color: var(--j13-ok-fg); } -.j13-tag--unresolved { background: var(--j13-neutral-bg); color: var(--j13-neutral-fg); } - .j13-empty { color: var(--j13-muted); } .j13-pager { margin-top: 1.25rem; @@ -576,7 +688,7 @@ html[data-theme="dark"] .j13-brand__mark { .j13-pager a { color: var(--j13-accent); } .j13-footer { - max-width: 1120px; + max-width: var(--j13-frame); margin: 0 auto; padding: 1.25rem 1rem 2.25rem; color: var(--j13-muted); @@ -590,7 +702,7 @@ html[data-theme="dark"] .j13-brand__mark { .j13-footer a:hover { color: var(--j13-accent); } .j13-flash, .j13-alert { - max-width: 1100px; + max-width: var(--j13-frame); margin: 0.75rem auto; padding: 0.65rem 1rem; border-radius: var(--j13-radius); diff --git a/routers/install/install.go b/routers/install/install.go index 17f0834..075cd75 100644 --- a/routers/install/install.go +++ b/routers/install/install.go @@ -11,10 +11,11 @@ import ( // Deps 安装依赖 type Deps struct { - DataDir string - JWTSecret string - Auth *services.AuthService - Settings *services.ForumSettingsService + DataDir string + JWTSecret string + AssetVersion string + Auth *services.AuthService + Settings *services.ForumSettingsService } type pageData struct { @@ -26,6 +27,7 @@ type pageData struct { LogoURL string FaviconURL string OGImageURL string + AssetVersion string ShowFriendLinksFooter bool FooterPages []struct { Title string @@ -59,6 +61,7 @@ func (d Deps) Get(c *gin.Context) { } ctx.HTML(http.StatusOK, "install", pageData{ Title: "安装 · " + name, SiteName: name, LogoMark: "姜", + AssetVersion: d.assetVersion(), CSRF: ctx.EnsureCSRF(), AdminUsername: "admin", }) } @@ -77,7 +80,8 @@ func (d Deps) Post(c *gin.Context) { } data := pageData{ Title: "安装 · " + siteName, SiteName: siteName, LogoMark: "姜", - CSRF: ctx.EnsureCSRF(), + AssetVersion: d.assetVersion(), + CSRF: ctx.EnsureCSRF(), AdminUsername: strings.TrimSpace(c.PostForm("admin_username")), AdminEmail: strings.TrimSpace(c.PostForm("admin_email")), AdminNickname: strings.TrimSpace(c.PostForm("admin_nickname")), @@ -109,10 +113,19 @@ func (d Deps) Post(c *gin.Context) { } ctx.HTML(http.StatusOK, "post-install", pageData{ Title: "安装完成", SiteName: siteName, LogoMark: "姜", + AssetVersion: d.assetVersion(), }) _ = brand } +func (d Deps) assetVersion() string { + v := strings.TrimSpace(d.AssetVersion) + if v == "" { + return "dev" + } + return v +} + // Guard 未安装则只允许 install / assets / health func Guard(dataDir string) gin.HandlerFunc { return func(c *gin.Context) { diff --git a/routers/setup.go b/routers/setup.go index a1fa12f..bea295d 100644 --- a/routers/setup.go +++ b/routers/setup.go @@ -6,6 +6,7 @@ import ( "net/http" "os" "path/filepath" + "strings" "git.iioio.com/freefire/jiang13-forum/config" "git.iioio.com/freefire/jiang13-forum/modules/auth" @@ -30,7 +31,8 @@ func Setup(cfg *config.Config) (*gin.Engine, error) { if sub, err := fs.Sub(webpublic.Assets, "assets"); err == nil { ssrFiles := http.StripPrefix("/ssr-assets", http.FileServer(http.FS(sub))) r.GET("/ssr-assets/*filepath", func(c *gin.Context) { - c.Header("Cache-Control", "public, max-age=86400") + // 模板带 ?v=AssetVersion；部署换版本即穿透，可长缓存 + c.Header("Cache-Control", "public, max-age=31536000, immutable") ssrFiles.ServeHTTP(c.Writer, c.Request) }) } @@ -83,9 +85,15 @@ func Setup(cfg *config.Config) (*gin.Engine, error) { } authMW := auth.NewAuthMiddleware(authSvc) + assetVer := strings.TrimSpace(cfg.Version) + if assetVer == "" { + assetVer = "dev" + } + install.Register(r, install.Deps{ DataDir: cfg.DataDir, JWTSecret: cfg.JWTSecret, Auth: authSvc, Settings: settingsSvc, + AssetVersion: assetVer, }) webpages.Register(r, webpages.Deps{ @@ -103,6 +111,7 @@ func Setup(cfg *config.Config) (*gin.Engine, error) { Captcha: captchaSvc, Notify: notifySvc, Backup: backupSvc, + AssetVersion: assetVer, }, authMW) r.GET("/media/thumb/*filepath", h.ServeImageThumb) @@ -126,6 +135,7 @@ func Setup(cfg *config.Config) (*gin.Engine, error) { DataDir: cfg.DataDir, JWTSecret: cfg.JWTSecret, Settings: settingsSvc, Auth: authSvc, Board: boardSvc, Post: postSvc, Comment: commentSvc, + AssetVersion: assetVer, }.NotFound) return r, nil diff --git a/routers/web/chrome.go b/routers/web/chrome.go index eb15307..26a551a 100644 --- a/routers/web/chrome.go +++ b/routers/web/chrome.go @@ -11,28 +11,29 @@ import ( // Deps 页面依赖 type Deps struct { - DataDir string - JWTSecret string - Settings *services.ForumSettingsService - Auth *services.AuthService - User *services.UserService - Board *services.BoardService - Post *services.PostService - Comment *services.CommentService - Message *services.MessageService - Filter *services.SensitiveFilter - Limiter *services.RateLimiter - EmailCode *services.EmailCodeService - Store *services.UploadStore - Points *services.PointsService - Badge *services.BadgeService - FriendLink *services.FriendLinkApplyService - Mail *services.MailService - SitePage *services.SitePageService - Report *services.ReportService - Captcha *services.CaptchaService - Notify *services.NotifyService - Backup *services.BackupService + DataDir string + JWTSecret string + AssetVersion string // 静态资源 ?v=；来自构建 ldflags + Settings *services.ForumSettingsService + Auth *services.AuthService + User *services.UserService + Board *services.BoardService + Post *services.PostService + Comment *services.CommentService + Message *services.MessageService + Filter *services.SensitiveFilter + Limiter *services.RateLimiter + EmailCode *services.EmailCodeService + Store *services.UploadStore + Points *services.PointsService + Badge *services.BadgeService + FriendLink *services.FriendLinkApplyService + Mail *services.MailService + SitePage *services.SitePageService + Report *services.ReportService + Captcha *services.CaptchaService + Notify *services.NotifyService + Backup *services.BackupService } // SitePageLink 导航/页脚站点单页链接 @@ -135,6 +136,7 @@ type PageChrome struct { NavPages []SitePageLink FooterPages []SitePageLink RightAside RightAsideData + AssetVersion string } func (d Deps) ctx(c *gin.Context) *webctx.Context { @@ -175,6 +177,10 @@ func (d Deps) chrome(ctx *webctx.Context, title, desc, inner string) PageChrome path = ctx.C.Request.URL.Path } navPages, footerPages := d.sitePageLinks() + assetVer := strings.TrimSpace(d.AssetVersion) + if assetVer == "" { + assetVer = "dev" + } return PageChrome{ Title: title, Description: desc, @@ -201,6 +207,7 @@ func (d Deps) chrome(ctx *webctx.Context, title, desc, inner string) PageChrome NavPages: navPages, FooterPages: footerPages, RightAside: d.loadRightAside(ctx, brand), + AssetVersion: assetVer, } } diff --git a/templates/base/footer.tmpl b/templates/base/footer.tmpl index 2df2299..c7ac592 100644 --- a/templates/base/footer.tmpl +++ b/templates/base/footer.tmpl @@ -6,7 +6,7 @@ {{range .FooterPages}} · {{.Title}}{{end}}

- + {{end}} diff --git a/templates/base/head.tmpl b/templates/base/head.tmpl index 51c66ee..65ec54c 100644 --- a/templates/base/head.tmpl +++ b/templates/base/head.tmpl @@ -10,8 +10,7 @@ {{if .Description}}{{end}} {{if .OGImageURL}}{{end}} - - {{/* 西文优先 IBM Plex（本机有则用）；见 10-design-system，不外链 CDN */}} + {{end}} diff --git a/templates/base/navbar.tmpl b/templates/base/navbar.tmpl index 3c0836f..aeff96e 100644 --- a/templates/base/navbar.tmpl +++ b/templates/base/navbar.tmpl @@ -12,27 +12,41 @@ {{if .Slogan}}{{.Slogan}}{{end}} - + + {{if .LoggedIn}} + 私信{{if gt .UnreadCount 0}} {{.UnreadCount}}{{end}} + {{.ViewerName}} · {{.ViewerPoints}} + {{end}} +
+ 更多 + +
+ {{end}} diff --git a/templates/home/feed.tmpl b/templates/home/feed.tmpl index ab6a4c2..7ae1662 100644 --- a/templates/home/feed.tmpl +++ b/templates/home/feed.tmpl @@ -8,7 +8,7 @@ 热门讨论 -