 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
|
82e63412c0
|
类别显示名可自己维护，顺手把两套对不上的中文名合成一套
你要改的那个「海滩」原来根本不在数据里——它是 Go 里硬编码的 map，所以改不动。
更糟的是这样的 map 有**两张**，而且对不上：
MKPOICategoryFoodMarket 菜市场（编辑页） / 食品市场（补全页、GPX）
MKPOICategoryCafe 咖啡馆 / 咖啡厅
MKPOICategoryFitnessCenter 健身房 / 健身中心
外加 ATM / Atm 大小写各写一份、一条永远匹配不上的 MKPOICategoryMarina2
现在合成一张内置表（42 条，冲突处取编辑页那套），并在它上面加了一层站点覆盖：
- 新表 category_labels(value, label)，站点级、不挂 dataset——值本身才是稳定键
- 端点 POST /admin/edit/category/label；传空 label = 删掉覆盖行、恢复内置默认名
- 类别台账那行改成两个带标签的输入框：
导出值 [MKPOICategoryBeach] ← 会跟着导出写回手机
显示名 [ ] ← 只影响站内显示，placeholder 写着默认值
是 MKPOICategory 枚举但内置表里没有的，会提示「填一个中文名」，这就是你要的补全入口
**显示名绝不写进 places.poi_category**——中文跟着写进去就把导出数据污染了，
专门加了 TestCategoryLabelNeverTouchesValue 钉这条。显示名会贯穿到所有中文名的地方：
编辑页/照片页/补全页的下拉、补全页「在用」标签、访客地点页、GPX 的 desc。
连带删掉两个绑在旧表上的模板函数 catName / poiname：模板里算不出显示名（要读站点覆盖），
改成在 Go 侧算好塞进数据（FillupRow.CatLabel、PlaceData.CategoryLabel）。
|
2026-09-20 10:54:51 +08:00 |
|
|
tamakyi
|
ffee082fad
|
补全页：手工填过的值自动进下拉候选，后面同类地点不用再打一遍
下拉的候选是渲染时定好的，这一页手工新填的活动名/类别进不去候选，
后面遇到同类地点只能照着再敲一遍——这正是「其它（自己写）」最费事的地方。
现在填过的值会被记住并补进同类下拉，标成「新填：X」，插在建议之后、
真正的候选之前，一眼就能挑到；本页实时同步（打字即生效），
翻页和点「用高德分析」重载也留得住，提交成功后清掉（那之后它们已经是真候选了）。
顺带两处：
- 草稿保存改成按 name 合并，翻页不再把上一页填的覆盖掉；分页链接也接了保存。
- 重画候选前先把「这一格已经选中的新填值」留住再还回去，
否则改一下文本框就会把别的行选好的值悄悄抹成空。
文本框的监听直接挂在框上而不是委托到 document：`new Event('input')` 默认不冒泡，
探针第一次就是这么假绿的——直接挂不依赖冒泡，也少一层隐式约定。
|
2026-09-20 09:32:07 +08:00 |
|
|
tamakyi
|
bf23fc62d7
|
补全页：活动改成和类别同款下拉，两列样式一致
活动原本是 input+datalist、类别是 select，同在一行列里长得不一样，看着别扭。
现在两者共用同一套写法：下拉 + 末尾「其它（自己写）…」+ 选中后露出的文本框
（后端 act_<id>==__custom__ 时读 act_<id>__custom，与类别同一套约定）。
CSS 类也合成一个 fill-sel，脚本只需遍历一次。
顺带：删掉不再需要的 datalist；采纳建议、草稿存取都改走 select.fill-sel。
草稿恢复时对下拉派发 change，所以「其它」的文本框也能跟着恢复显示。
|
2026-09-19 23:46:02 +08:00 |
|
|
tamakyi
|
5aeded2d51
|
补全页恢复手工填写，把「不动」变成真正的默认
上一版改成 select 之后有两个问题：活动和类别都只能从列表里挑，填不进去的写不了；
而且建议被强制预选，用户选「不动」再点「用高德分析」（会整页重载）就白选了，
看起来像被锁死。
现在：活动是可输入的输入框，带已有类型提示，填新名字会新建类型；
类别下拉末尾加「其它（自己写）…」，选中后露出文本框，写什么存什么——
真机自己也存中文类别，写中文一样认得，不必强记 MKPOICategory 那串枚举名。
「不动」改成真正的默认：什么都不预选，想批量采纳就点「采纳本页建议」。
点「用高德分析」前会把本页填过的存进 sessionStorage，回来接着填，不会白改。
|
2026-09-19 20:13:06 +08:00 |
|
|
tamakyi
|
824c1e3b3d
|
补全页加分页，每页 30 行
218 行在手机上堆成一屏一行有五万多像素长，分页后第 1 页只有八千多。
页码会夹紧：?page=999 停在最后一页而不是给空白页，解析不出来回第一页。
提交后留在同一页——处理完的行会从列表里消失，停在这儿才看得见剩下的。
翻页前若这一页有改过还没提交的下拉，先确认一次（预选的建议不算「改过」）。
|
2026-09-19 18:25:16 +08:00 |
|
|
tamakyi
|
b311ba202b
|
补全页的两个下拉改成 select，类别显示中文
input + datalist 只在下拉里显示中文，框里永远是 MKPOICategoryPark 这种枚举名，
站长根本看不懂。改成 select 之后选中项直接是「公园（真机用过）」。
活动下拉同理：建议项排在最前并预选，后面跟全部现有活动；选「（不动）」就跳过。
页面原始体积 940KB，但 gzip 后只有 22KB（选项高度重复），不必操心。
顺带把建议项的值简化成活动名本身——处理函数本来就按名字查、查不到就新建，
不需要额外的 __new__ 前缀。
|
2026-09-19 17:05:34 +08:00 |
|
|
tamakyi
|
9c7e152361
|
补全页显示高德找到的 POI 与类型，类别标出真机用过的
原先没映射出建议的行就是一片空白，可高德其实早就说了「这里是什么」——
「中国邮政 / 生活服务;邮局」「沙县小吃 / 餐饮服务;中餐厅」，
这种信息看着就能判断该填什么。现在多一列「高德参考」把它显示出来。
类别下拉带上中文，并标出哪几种是**真机确实用过**的：
ZCATEGORY_ 那列存的就是这些 MKPOICategory 枚举串，那 12 种导回 rond 一定认得，
其余是 MapKit 支持但你的设备还没用过的，写错只会显示不出类别、不会坏数据。
|
2026-09-19 16:46:34 +08:00 |
|
|
tamakyi
|
6c061a0548
|
地点补全：按地名与坐标猜活动与类别，只填空
后台新增「地点补全」页，把「名下到访没设活动」和「类别为空」的地点列出来，
给出建议、由站长确认后再写。判断分三层：
- 本地关键词表：零延迟、离线，命中即高置信（「星巴克咖啡」→ 奶茶和甜甜水）
- 高德周边搜索：按坐标问「这里是什么 POI」，比按名字搜准；
拿到的类型再映射成活动与 MapKit 类别
- 人工：都猜不出的留空，站长自己填；填了列表里没有的名字会自动建成新活动类型
两条底线：**只填空**（已有活动或类别的一律不动）；**活动按地点批量设**，
一次把它名下所有没设活动的到访一起填上，否则同一个地点会在统计里分裂成两种活动。
类别写的是 Apple MapKit 的枚举名（真机确认用过 12 种），不是高德分类。
规则上踩过两个坑，都写进注释了：匹配前要先掐掉括号里的地址（否则
「尚优居客栈(大理古城步行街店)」会命中「步行街」），并且按词长优先
（否则「马鞍山公园」会命中「山」）；单字关键词一律不要，误命中率太高。
|
2026-09-19 16:31:01 +08:00 |
|