tamakyi
ab7ccd22ce
先出方案（frontend-plan-2026-10-09.md）再动手，四批按顺序落地。方法上先存基线、再用同一份 探针在改动前后逐值 diff —— 这批里有 6 处问题只有「量」才看得见，看截图全是正常的。 A 设计令牌（app.css 为主） - 字阶收敛到 6 档 --fs-xs/sm/md/lg/xl/2xl = 11/13/15/21/26/34px。原来 app.css 有 19 种字号、 模板里另有 54 处内联字号，光 12~15px 之间就挤了 4 档 —— 层级挤不出来，只能靠加粗硬顶。 - 两个「字外档」不是漏的：--fs-control: 16px（窄屏表单控件必须 ≥16px，否则 iOS 聚焦放大整页， 属功能约束）；--glyph-*（✕/箭头/空态图标按控件尺寸定，硬塞进字阶只会把按钮撑坏）。 - 字重收敛到 400/500/600（删掉 650 与 700）。 - 圆角 4 档 --r-*、阴影 3 档 --sh-1/2/3（暗色整套覆盖）、间距 --sp-1..5、 卡片内边距单列 --card-pad（与折叠卡片标题行的负 margin 绑在一起，改一个即改两处）。 - 门禁 TestNoBareFontSizePx：静态扫 app.css 与全部模板，出现 font-size: <数字>px 即红。 B 卡片分主次 - .card--hero / .card（默认）/ .card--quiet 三档。quiet 走「页面底色 + 细边 + 无阴影」—— 第一版拿 --bg-2 当底色，实测它与页面底 #f6f7f8 只差 4/255，看不出边界、像破了个洞。 - 首屏 KPI 从「4×2 等重白盒」改成 .kpi-lead（主数 + 一行上下文）+ 5 个常规指标，8 个数字一个没少。 C 图表说人话 - 月度分布：柱底加基线；峰值柱不透明拉满、柱顶标次数（.pv），副标题里不再重复写「最高 N 次」。 - 一天中的分布：把「0/6/12/18 四个数字」换成 6 小时一段的标尺（深夜/上午/下午/晚上）， 用同一套 24 列网格，段边界与柱子严格对齐。 - 首页月度图同样加峰值锚点（给 HomeData 补 MaxMonthly，与统计页同口径 maxOf）。 - 空态没动：查下来已经统一（8 页共用 emptystate、局部走 .empty）。 D1 类型色语义化（结论与计划不同，按实测改了） - 先算对比度：白底上 yellow 1.87 / mint 2.12 / orange 2.20 / green 2.22 / cyan 2.54 / teal 2.57， 6 个色连图形对象 3:1 都到不了；暗底只有 indigo 2.90 不够。 - 所以**没有**把类型色用到 chips / 表格类型列 / KPI 强调 —— 那几处要的是文字色，只会更难读。 这也解释了全站为什么一直只用 8px 小圆点做身份标记。浅色那 6 个色一个没动： 它们是手机端与地图上的同一套身份色，改暗会破坏对应关系。 - 实际做的：色值收口成 --cat-* / --cat-*-soft（26 个变量）；模板 colorof → csscolor / csssoft（19 处）； 暗色只提亮 indigo（2.90 → 3.55:1）；colorOf 成了死代码，删掉。 - ⚠️ 返回值必须是 template.CSS：html/template 的 CSS 过滤器不认识 var()，普通 string 会被静默 换成 ZgotmplZ —— 页面上所有圆点当场变透明，而且不报错、模板测试照过。挂了它等于关掉那道过滤， 所以数据侧色值先过严格校验（只有 # + 6 位 hex 放行），否则 #"><img… 能逃出 style 属性。 守卫 TestCSSColorSurvivesTemplateSanitizer 把两个方向都钉住（做过变异验证）。 D2 窄屏导航 - 改前 ≤620px 靠横向滚动兜底：390 溢 63px、320 溢 133px，「统计」被切成半个字紧贴后面的按钮， 渐隐提示实际看不出来。现在链接本体抽成 {{define "navitems"}} 渲染两遍：桌面 .nav-links 平铺、 窄屏 .nav-menu（原生 <details>，不靠 JS 也能开合）；JS 只补点外面 / Esc / 点链接后收起。 - ⚠️ 顶栏 --z-nav 抬到 1200：菜单是 .nav 的子元素、自己抬不动层叠上下文，不抬就会被地图页的 --z-map-overlay(1100) 盖住。已在 /map 上用 elementFromPoint 实测。 - 守卫 TestNarrowNavCollapsesToMenu 钉「CSS 两半 + 模板两个类 + 渲染两遍」的成对关系。 途中发现并一并修掉的（都只有量 DOM 才看得见） - Leaflet 的 .leaflet-container 字号是 0.75rem、跟着根字号漂：根 14 → 13px 后地图署名/比例尺 掉到 9.8px（低于本站 11px 下限）、弹窗正文也跟着缩。已按自己的字阶钉死。 - h1..h4 原来只设了字重与 margin、没设字号，靠浏览器默认的 2em/1.5em/1.17em —— 同样跟着根字号漂： /stats 那两个 h2 从 21px 变成 19.5px，比同页卡片标题大一圈。已显式给出字号。 - <b>/<strong> 浏览器默认 700，比全站最高层级（标题 600）还重，已钉成 600。 回归 - ./scripts/verify.sh：PASS=348 FAIL=0 SKIP=0 - internal/fog 加 -race：PASS=22 FAIL=0 SKIP=0 - JS 单测 34/34 - 移动端 320 / 390 溢出全 0（改前 /admin 在 320 还溢 34px）；桌面 1440 与改前一致（−15 是滚动条宽） - 全站 7 个页面都没有低于 11px 的文字 说明：A/B 与 C/D 本想拆两笔提交，但 app.css / layout.html / view.go 里两批改动交织，按文件拆不开、 按 hunk 拆又容易做出「中间那笔编译不过」的历史，所以合成一笔、在消息里分段。
63 lines
2.9 KiB
HTML
63 lines
2.9 KiB
HTML
{{define "content"}}
|
||
<div class="wrap">
|
||
<div class="page-head">
|
||
<div>
|
||
<h1>两步验证</h1>
|
||
<div class="sub">为后台登录追加一层动态验证码（TOTP，兼容 Google Authenticator 等 App）</div>
|
||
</div>
|
||
<div class="row"><a class="btn" href="/admin">← 返回后台</a></div>
|
||
</div>
|
||
|
||
{{if .Flash}}<div class="alert ok">{{.Flash}}</div>{{end}}
|
||
{{if .Err}}<div class="alert err">{{.Err}}</div>{{end}}
|
||
|
||
{{if .Enabled}}
|
||
<div class="card">
|
||
<h2>状态：已开启</h2>
|
||
<div class="card-sub">每次登录后台，除口令外还需输入验证器 App 中的 6 位验证码</div>
|
||
<form method="post" action="/admin/twofa/disable" style="max-width:360px">
|
||
<label class="f"><span>输入当前验证码以关闭</span>
|
||
<input type="text" name="code" inputmode="numeric" maxlength="6" required
|
||
style="text-align:center;letter-spacing:6px;font-size:var(--fs-control)">
|
||
</label>
|
||
<button class="btn danger" type="submit">关闭两步验证</button>
|
||
</form>
|
||
</div>
|
||
{{else if .Pending}}
|
||
<div class="card">
|
||
<h2>绑定验证器</h2>
|
||
<div class="card-sub">用验证器 App 扫描二维码，或手动输入秘钥，然后输入 App 显示的 6 位验证码确认</div>
|
||
<div class="row" style="align-items:flex-start;gap:20px;flex-wrap:wrap">
|
||
{{if .QR}}<img src="data:image/png;base64,{{.QR}}" alt="TOTP 二维码"
|
||
style="width:220px;height:220px;border:1px solid var(--line);border-radius:10px;background:var(--surface)">{{end}}
|
||
<div style="min-width:240px">
|
||
<label class="f"><span>秘钥（手动输入用）</span>
|
||
<input type="text" readonly value="{{.Secret}}" onclick="this.select()"
|
||
style="font-family:monospace;letter-spacing:1px">
|
||
</label>
|
||
<div class="muted" style="font-size:var(--fs-sm)">账户名：rond-with-you · 算法 SHA1 · 6 位 · 30 秒</div>
|
||
</div>
|
||
</div>
|
||
<form method="post" action="/admin/twofa/confirm" style="max-width:360px;margin-top:6px">
|
||
<label class="f"><span>输入验证码确认开启</span>
|
||
<input type="text" name="code" inputmode="numeric" maxlength="6" required
|
||
style="text-align:center;letter-spacing:6px;font-size:var(--fs-control)">
|
||
</label>
|
||
<button class="btn primary" type="submit">确认开启</button>
|
||
</form>
|
||
</div>
|
||
{{else}}
|
||
<div class="card">
|
||
<h2>状态：未开启</h2>
|
||
<div class="card-sub">开启后，登录 = 口令 + 动态验证码，即使口令泄露账户也不会被直接攻破</div>
|
||
<form method="post" action="/admin/twofa/setup">
|
||
<button class="btn primary" type="submit">开始绑定验证器</button>
|
||
</form>
|
||
<div class="muted" style="font-size:var(--fs-sm);margin-top:10px">
|
||
需要一个 TOTP 验证器 App（Google Authenticator、Microsoft Authenticator、1Password、Aegis 等均可）。
|
||
</div>
|
||
</div>
|
||
{{end}}
|
||
</div>
|
||
{{end}}
|