tamakyi/rond-with-you
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity
87 Commits 1 Branch 0 Tags
master
Commit Graph
7 Commits
Author SHA1 Message Date
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 拆又容易做出「中间那笔编译不过」的历史，所以合成一笔、在消息里分段。
 2026-10-09 17:01:08 +08:00
tamakyi 4015ddf373 时间框跳段 + 弹窗不再脏地址栏 + 统计脚本做成后台开关 
时间框（flatpickr allowInput 的手输体验）
- flatpickr 把 <input type=datetime-local> 就地改成 type=text，原生分段编辑器被替换掉；
  allowInput 又是「整串解析」语义：实测 parseDate('2026') 只出年份、'202666' 才出月份，
  于是「年份很长才跳下一位」；'20260606' 还会被静默错解成 2030-12-06 且不报错。
- 新增 static/js/datetime-input.js：自定义 parseDate（纯数字只收 4/6/8/12/14 位，
  歧义与非法日期一律拒）+ 输入引导（段满即补分隔符，敲完 4 位年份立刻跳月份位）。
  按标准格式不做自动补零、不前滚；越界值原样保留交报错，不静默改成合法值。
- 三处页面（编辑/照片/专题）共用 attachPicker，配置与原先一致，模板净减 5 行。

弹窗
- window.prompt 会把提示文本与默认值写进地址栏并留进历史（confirm/alert 无此问题）。
- 新增 static/js/prompt-box.js 替代：原生 <dialog>.showModal()，遮罩/Esc/焦点齐全，
  旧浏览器降级成页面顶部一条。已换 report.html 复制链接兜底与 edit.html 活动改名。
- 门禁 no_prompt_test.go：静态扫模板禁止 prompt(，并钉住 JS 与 CSS 都在。

统计脚本
- 原来只能改 conf/app.ini（要重启），现在后台「站点设置」可开关 + 填写，默认关闭。
- cleanTrackScript 挡住注入面：开闭 <script> 标签数不配平（提前闭合会让页面散架）、
  src 的 javascript:/data: 伪协议、超长截断。注意不能用「出现 </script 就拒」当规则——
  百度统计、Umami 贴的就是完整 HTML，正常用法会被挡死。

门禁
- datetime-input.test.js：34 条断言（node 直跑，无依赖）。
- TestCleanTrackScript：逐条边界 + 定义性不变量（任何输入都不得产出含 </script 的非空结果）。
- 三项均做过变异验证，改坏实现都会被对应测试抓到。

实测：真实站点逐键 2→20→202→2026-→2026-06-→2026-06-06T；
统计脚本六个场景（默认关/只填不开/开+URL/后台与登录页不挂/危险输入/关掉恢复）全部符合预期。
全量 internal/web 204 例 0 skip，其余包全绿，gofmt 干净。
 2026-10-08 18:27:59 +08:00
tamakyi 5c7cf1a0e1 对访客公开的措辞按身份分支：访客不该看到「我的结论」 
用户发现未登录也显示「推荐 & 踩雷（我的结论）」，访客没法解读「谁的我的」。
顺着把访客可见模板与 static/js 全过了一遍，同病共四处——都是**写模板时站在站长视角下笔、
而那一块又对访客公开**：

1. stats.html：标题 → {{if .IsAdmin}}我的结论{{else}}站长结论{{end}}；
   副标题「只统计你自己…」→ 站长「你自己」/ 访客「站长」；两列「我推荐/我踩雷的地点」同理。
2. stats.html 访客块：「与我的结论互不影响：你标你的，访客投访客的」——对访客说不通，
   改成对两边都成立的「与上面的站长结论互不影响：各存各的表，谁也不会覆盖谁」。
3. home.html：「我的标签」→「足迹标签」（同级卡片全是中性的：足迹地图/城市足迹/天气足迹…）。
4. report.html：「这一年里，你第一次踏足的这些城市」→ 去掉人称（年报是站长的回顾）。

已经写对的照它学：place.html 的投票区早就是 {{if .IsAdmin}} 分支（站长「我的结论」、
访客「大家怎么说」），rond-map.js 的气泡同理；「含家/工作」chip 与一串「只有你自己能看到」
本来就在站长分支里。

门禁 TestVisitorPagesUseThirdPersonCopy：以**访客 ctx（无 user）**渲染 /、/stats、/report，
逐个禁用词断言，同时断言站长那份**仍旧说「我的」**（别把站长自己的视角也改掉）；
前置需打开 marks_public（访客才看得到那一块），用完还原。

⚠️ 变异验证时踩了老坑：直接 `go test -run …` 因缺 ROND_TEST_CONF/ROND_SRC 会**静默 skip 并报 ok**
（0.17s 就 ok，一眼假绿）。改用 ./scripts/verify.sh 后变异被正确抓住
（visitor_copy_test.go:85 报「我的结论」），还原后转绿。

全量验收 PASS=339 FAIL=0 SKIP=0。
 2026-10-01 02:15:49 +08:00
tamakyi d5f6dfa381 审计修复：前端（模板 / CSS / JS 与无障碍） 
- 地图脚本：localStorage 读写走 lsGet/lsSet 兜底（隐私模式下裸访问会打断整段脚本）；
  preview() 在 /api/map-config 还没回来时不丢点（previewQueue 在 if (live) 之前排队）；
  异步回包一律发序号作废，取消后回来的包不再画
- photo-exif.js：EXIF 时间全 0 不再变成 1899-11-30 写进到访时间；读 count 前先按版本卡宽度
- 数据编辑页：三个筛选表单都把其余条件用隐藏域原样带上，提交不再把别的列表的筛选清掉
- 补全页：sessionStorage 的读写一律包 try（脏数据/隐私模式都会抛）
- 窄屏：删掉被后面同特异性规则盖掉的死内边距；宽表堆叠类名成对、判据扩到所有 tb 表
- 无障碍：图片删除按钮补 aria-label，访客画廊图片补 alt
- report.html 补上漏掉的 </tr>，fog-mask 的宽表带 tb-stack

本批不碰数据库与导出路径：往返包 823/323/8/30/791/557/2246 全等、
坐标偏差 0.000000000、时间偏差 0s、迷雾 8701 块一致。
 2026-09-24 20:37:57 +08:00
tamakyi 9e01923244 宽表在窄屏真的不横滑了：堆叠判据退回媒体查询，后台三张表补上 
真机反馈「手机上还是要左右滑」，两个根因：

1. 上一版把堆叠判据写成了 @container。它按卡片自己的宽度判断更准，但要
   iOS 16 / Chrome 105 才支持——旧手机把整块规则当不认识的东西丢掉，表格
   完全不堆叠、退化成横滑 328~388px，比改之前还糟。改回 @media，阈值从
   620 抬到 800：卡片内容宽 ≈ 视口 − 93，最宽的表 min-width 700，视口 793
   以上才放得下，620 那档会让 621~792 两头不靠。

2. /admin/edit 的地点/到访/行程三张表压根没加 tb-stack。它们默认折叠在
   data-card 里，探针在默认态量到的是 display:none，前两轮审计都没扫到。

顺带修掉三处被这次改动顶出来的问题：
- 宽表卡片不放 g2：/stats /report 有几张表被塞进半宽卡片，视口 1440 时
  卡片只有 494px，桌面端照样要横滑 100+px。改成整行（只动含表的那些网格，
  「推荐 & 踩雷」「类型分布 + 一天中的分布」这类没有表的仍保持两列）。
- 操作格的 inline white-space:nowrap 会继承进行内编辑表单，堆叠态下
  「已选：#403 …」那一行不换行、把卡片顶破。挪成 .ops 类，窄屏放开。
- 行内编辑表单的 min-width 改成 --efw 变量（inline 的 min-width 压不过
  CSS 覆盖），堆叠态置 0 让它自然铺满。

导航装不下时右缘渐隐一下，提示还能往右滑；滑到末端自动收掉。用 mask 而不是
盖一层渐变伪元素——伪元素会把链接文字一起遮住。

回归：tb_stack_test.go 补 /admin/edit（12 张表），表头为空的列（如末尾操作格）
不再要求 data-label；新增 wide_table_layout_test.go 守住「宽表卡片必须整行」+
「凡被 .tw 包住的表必须带 tb-stack」+「堆叠规则必须在 max-width≥792 的 @media 里」。
 2026-09-19 02:04:03 +08:00
tamakyi 7236c7a9d5 窄屏宽表不再横向滚动：改成一屏一行的「字段名 + 值」 
移动端有 7 张表要横滑 300+px 才看得全，滑着还对不上表头（地点库 8 列、统计 3 张、专题详情、
首页天气、后台数据集表与数据说明、专题管理、报告页 2 张）。给这些表加 tb-stack：
窄屏隐藏 thead、每行一屏一块、每格「字段名 + 值」竖排，值多行时用悬挂缩进。

- 字段名取自 td 的 data-label（首格是这行主角，故意不带标签；操作格给「操作」）——
  这样改列顺序也不会串标签，比把名字写进 CSS 的 nth-child 稳。
- 表格结构、链接、表单、按钮一律没动（只是隐藏 thead + 改 display），桌面与平板仍是原表。
- 断点只用 @media (max-width:620px)：试过容器查询（能顺手治掉「宽屏里 g2 窄卡片也要横滑」），
  但实测会把 /stats 三个卡片撑高 1300px，太臃肿，不划算。

实测：390/620 十张表需横滑全部为 0、每行每格都有标签；621/700/1440 的横滑量与改动前一致
（桌面零变化）；128 个链接/按钮滚动到可见后逐个点测均可点中，无裁切；全站审计 390 站长/访客 +
320 + 1440 溢出全 0、0 JS 报错，小触控与小字数与改动前逐页一致（320 下露外元素 /places 277→2、
/stats 114→12、/admin 46→4，剩下的都是有意的横滑容器）。

新增回归 internal/web/tb_stack_test.go：渲染 7 个页面、逐行核对「每个非首格都有 data-label」
且「格子数 == 表头列数」（变异验证过：去掉一个标签立刻 FAIL）。
 2026-09-18 22:24:12 +08:00
tamakyi b327bc1230 first release 2026-09-18 13:05:49 +08:00