laoyang/FamilyBook
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects Releases Wiki Activity

v54：首页任务标题截断（真根因=两列网格被撑破）/ 名册分组→标签且候选读词表 / 旅程地图视图 / 旅程设置按钮 / 显示方式默认列表或地图

Browse Source 
用户 2026-10-16 傍晚五条。

① 首页「近期任务」标题太长会挤成两行
   用户原话：「首页**近期任务**那个地方要注意截断：如果任务标题太长，
   会把这个任务**挤成两行**。」
   🔴🔴 **真根因是两层，第一版只修了表面**：
     · 表面：`.dash-what` 只有 `flex:1 1 auto; min-width:0`，**缺** nowrap/hidden/ellipsis
       ⇒ 收缩后文字在框内换行；
     · 真身：`.home-duo` 是**两列 grid**，grid 子项默认 `min-width: auto`
       （"我最小也得装下我的内容"）⇒ 一条长标题把那一列顶到 **1763px**
       （父 `home-duo` 才 1032px）⇒ **整个两列布局被撑破**、页面横向溢出到 **2089px**
       （视口 1440）。⇒ 行宽 1721px、`scrollWidth === clientWidth`，
       **`text-overflow: ellipsis` 看起来"没生效"** —— 其实容器自己先爆了。
   修法：`.home-duo > * { min-width: 0; }`，且 **整条 flex 链**都补
     （`.hd-pane` → `.hd-pane-head` → `.hd-pane-body` → `.dash-list/.tk-list` → `.tk-row`）
     —— 链上任何一层漏了，收缩就断在那一层、下面的 nowrap 全白写。
   配套：任务标题加 `title=` 悬停看全。
   ⚠️ 这是本项目**第二次**踩 flex/grid 的 `min-width:auto`（v53 的 `.mv-grid` 是同类）。
      **以后"文字截断不生效"先量容器有没有被撑破**。

② 名册「分组」→「标签」；打标签的候选要**从设置里读**
   用户原话：「现在名册里面给人打标签的时候，**这个标签数据是从哪读出来的**呀？
   在这个名册的设置页面，有很多分组，现在还叫分组。但是打标签的时候，
   **却不是从这些分组里读出来的**。……应该叫「名册标签」，是不是？
   **应该从这里面把所有标签都读出来**吧？……以后就没有分组的概念了，
   **全部都是标签的概念**。」
   🔴 **用户观察得完全正确，这是两套数据源**：
     · 设置页显示的词表来自 `person_groups`（**分组表**）；
     · 打标签的候选来自 `PersonTag::cloud()`（**你已经打过的词**，现算的）；
     ⇒ 两边根本不是一个数据源 ⇒ "设置里列着一堆、打标签时却只有几个"。
   修法：**`PersonTag::choices()` = 设置页词表 ∪ 我用过的词**（并集，词表在前）。
     · 词表里的词**还没用过**也能一点就打上（这正是词表的意义）；
     · 用过的词补在后面（历史不丢）；
     · 名册列表 / 新增 / 编辑 / 挑人 / 导入 **五处同一个函数**。
   界面口径全面改"标签"（**表名仍是 `person_groups`**：改名要背着 `PersonGroup` 类、
   `person_roster.group_id`、以及**另一个会话正在写的 `app/ApiHandler.php`**
   （它引用了 `PersonGroup::orderFor`）一起动，风险远大于收益）：
     · `_person_groups.php` 标题「名册标签」、按钮「加一个我自己的标签」；
     · 删除文案改成"只是从候选里去掉这个词，已打在别人身上的不受影响"
       （**语义真的变了**：标签是各自身上的字符串，不是引用）；
     · `people/_settings_menu.php`、`people/settings.php`、`settings/me.php`、
       `settings.php`（「公共分组」→「公共标签」）全部同步。
   顺带按"全部都是标签"改另两条入口：
     · `people/pick.php`「加进哪一组」下拉 → **打标签**；
     · `people/import.php` 同上；`ContactImporter::run()` 加 `$tags` 参数。
   🔴 新增 `PersonTag::addOne()`（**追加**一个标签）—— 这两处**绝不能用 `setFor()`**
      （它是"先 DELETE 再 INSERT"的整组替换）⇒ 会把人**原有**的标签清光
      （症状是"用一次导入，别人原有的标签全没了"，极难联想）。
   ⚠️ `group_id` 在 pick/import 的**服务端仍收着**（老书签/脚本兼容），只是界面不再展示。

③ 旅程模块加**地图视图**（读 TripLog 移植）
   用户原话：「你去读一下 TripLog 的代码，在旅程这个模块，**可以在地图上显示旅程数据**。
   1. 先读一下它之前那个代码是怎么实现的，**在我们的旅程模块也实现一下**。」
   读 TripLog（`templates/activities/index.php`）得到的要点：
     · 用**高德 AMap**（合规白名单内，绝不是境外瓦片）；
     · `position` 必须是 **[lng,lat] 数组**（传 `{lng,lat}` 裸对象会让 AMap 抛错、
       整个绘制循环当场中断 —— 它注释里写着"批 11 的光秃秃地图就是它"）；
     · `setFitView()` 后**上限 11 级**（只有一趟时会被放大到街道级，那是导航视角）；
     · `.amap-marker` 整层 `pointer-events:none`（否则包装层挡住别家卡片的点击）；
     · **容器必须有固定高度**（0 高度 → 空白地图）。
     它那套"同城环形扇开"是**几百行几何**，本仓数据量没压出这个问题 ⇒ **有意不做**。
   本仓数据更规整：`trip_nodes` 早有 `from_lng/from_lat/to_lng/to_lat`（v17 批）
   + `from_city/to_city` ⇒ 新增 `Trip::attachSpots()`：
     ① 有坐标取**重心**（不是端点 —— 端点会让"青岛→伊春"偏到某一头）；
     ② 没坐标退到**城市重心**（`Geo::lookup` 离线城市表，**不发网络请求**：
        列表页几十趟若逐条打高德逆地理，一次开页就是几十个外部请求）；
     ③ 都没有就不上图（列表里照常有，模板会说清"有几趟没上图"）。
     🔴 城市那里**必须也取重心**：`cities()` 的顺序是**按时间**（出发地在最前），
        取"第一个城市"会让**所有旅程都叠在家上**、地图毫无信息量。
   布局：两个视图用**标签页**（`?view=map` 是**链接**不是纯 JS 按钮 ——
     书签/前进后退/无 JS 都正确；也**有意不**把地图藏在 `display:none` 里，
     高德在 0 尺寸容器里会渲染空白）。
   高德 SDK 加载器重构：原来 `fbLoadAddr()` 顺带拉 `addr_suggest.js`，
   而地图只用 SDK 自带的 `AMap.Map/Marker` ⇒ 抽出 `window.fbAmapSdk()`（只拉 SDK）、
   新增 `fb-amap` meta（不带 plugin），`fb-addr` 那份共用同一加载器。

④ 旅程列表页「新建旅程」**后面**加「设置」按钮
   用户原话：「2. 在旅程的「新建旅程」后面也加一个「设置」按钮。」
   ⇒ 补 `_settings_menu.php`（设置恒排最右），菜单**第一条**加「显示方式」。

⑤ 显示方式：默认列表还是地图（用户自配）
   用户原话：「3. 里面的设置让用户自己配置：**到底默认显示旅程列表，还是用地图显示**。」
   ⇒ 新增 `trips/display`（设置页 + `?set=` 快速设置）与 `trips/display_save`，
     存 **`user_settings.trip_default_view`**（每人一份，**不是**全家设置）。
   ⚠️ 访客也能改（只影响自己看到的默认，不是数据变更）。

验证（新增 2 套件 + 更新 e2e/deploy 断言）：
 · _fb_v54_ui.py（**33 条**真机断言）
 · _b54_falsify.py（**11 注入 / 11 全抓**，基线 33/0）
 · e2e **1518/0**；familybook_deploy.sh 加「第54批形态」段（**24 条**）
 · 部署 **0 FAIL**；线上 **20 个文件 md5 逐字节一致**；
   线上实测：词表 24 条、`choices()` 24 条、**`cloud` 15 条全部 ⊆ `choices`**、
   4 趟旅程全部可上图（样例落在济南·青岛重心）；诊断页已删复验 404

⚠️ 本轮踩坑（已写进 pitfalls.md）：
 · 🔴🔴 **"文字截断不生效"要先量容器有没有被撑破**（第一嫌疑是 flex/grid 子项
   `min-width:auto`，不是 `text-overflow` 写错）；
 · **反向断言（"不该再出现 X"）必须用 `_code_has`（剥注释）** ——
   需求原话正当留在注释里，裸 `grep -F` 会命中自己的说明（本轮部署假红一次）；
 · **冗余防线会让反向验证打不红**（两处 `min-width:0` 只去掉一条 ⇒ 探针照旧全绿，
   注入必须一起去掉）；
 · **界面多加一个字符就可能打歪既有断言**（我在词表管理页给标签名加了 `#`，
   把 e2e 的 `my_group_order()` 读成 `#家人`）。
This commit is contained in:
laoyang
2026-10-17 00:15:06 +08:00
parent 26026c7250
commit 8d79857f1a
20 changed files with 1023 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/app.css
+139 -6
View File
@@ -2950,7 +2950,20 @@ body[class] .semi-datepicker-day-inhover { background-color: color-mix(in srgb,
.dash-row:first-child { border-top: 0; }
.dash-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; }
.dash-when { flex: 0 0 96px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-what { flex: 1 1 auto; min-width: 0; font-size: 14px; }
/* 🔴 v54（用户 2026-10-16 第 1 条）：「首页**近期任务**那个地方要注意截断：
如果任务标题太长，会把这个任务**挤成两行**。」
真根因：这一条只有 `flex:1 1 auto` + `min-width:0` —— 它能**收缩**，
但行内文字**没有禁止换行** ⇒ 收缩之后标题在框内绕成第二行，把这一行撑高、
把旁边的状态/看板徽标挤到下一行。缺的正是这三句。
⚠️ 三句缺一不可：`nowrap` 让它不绕行、`hidden` 让溢出被裁、
`ellipsis` 给出"后面还有"的信号（不然会像被截断的错字）。
⚠️ 全名走 `title=` 悬停（模板里加的），点开也会弹详情浮层 —— 短的看不全不是问题。
⚠️ 这条**同时**管「往年的今天」那一块（同一个 class）：那边的标题也可能长，
一并对齐成"一行 + 省略号"比一处换行一处截断更整齐。 */
.dash-what {
flex: 1 1 auto; min-width: 0; font-size: 14px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.dash-tag { flex: 0 0 auto; font-size: 11px; color: var(--faint); }
/* ---- v24 第 11 批 #4：影院下拉（带色点）+ 新建影院弹框 ----
原生 <option> 画不了色块，所以自己做一个"按钮 + 弹出列表"：
@@ -4417,11 +4430,30 @@ button.btn, a.btn, summary.btn, .seg-btn, .icon-btn, .rv-act-btn, .cs-btn, .bf-b
对齐又失效（这是"固定高度 + 内部滚动"这套写法的经典坑）。
这样两块的**外框高度恒等**，与各自内容多少无关 —— 对齐不再依赖数据。 */
.home-duo { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; }
.hd-pane { display: flex; flex-direction: column; height: 440px; min-height: 0; }
.hd-pane-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex: 0 0 auto; }
.hd-pane-head .cinema-h2 { margin: 0; flex: 1 1 auto; }
/* 🔴🔴 v54（用户 2026-10-16 第 1 条）—— **这条才是"标题太长挤成两行"的真根因**。
症状两层，第一层在这里：
`.home-duo` 是**两列网格**（`1fr 1fr`），而 grid/flex 子项的默认
`min-width: auto` 意思是"我最小也得装下我的内容" ⇒ 只要右栏有一条**长标题**，
那一列就被顶到 1700+px（实测：`home-duo` 1032px，里面 `hd-pane` 1763px），
整个两列布局被撑破、横向溢出到 2089px。
⇒ 于是"截断"根本没机会发生：**容器自己先被撑爆了**，行宽 1721px，
`scrollWidth === clientWidth`，`text-overflow: ellipsis` 看起来"没生效"。
⚠️ `min-width: 0` 是让 grid/flex 子项**允许收缩到内容以下**的唯一开关；
缺它时，在子项里怎么写 nowrap/ellipsis 都没用（本项目第二次踩这个：
v53 的 `.mv-grid` 是同类，那次是 `grid-column`，这次是 `min-width`）。
⚠️ 加在**两个**网格项上（两个 pane 都要能收缩，不只是有任务的那个）。 */
.home-duo > * { min-width: 0; }
.hd-pane { display: flex; flex-direction: column; height: 440px; min-height: 0; min-width: 0; }
.hd-pane-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; flex: 0 0 auto; min-width: 0; }
.hd-pane-head .cinema-h2 { margin: 0; flex: 1 1 auto; min-width: 0; }
/* ⚠️ v54：列表链上每一层都要 `min-width:0`（中间任何一层没给，
收缩就断在那一层、下面的 nowrap 又白写）—— `.dash-list`/`.tk-list` 是 ul，
`.tk-row` 是 li，都是 flex 项。 */
.dash-list { min-width: 0; }
.tk-list { min-width: 0; }
.tk-row { min-width: 0; }
.hd-pane-body {
flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
flex: 1 1 auto; min-height: 0; min-width: 0; overflow-y: auto; overscroll-behavior: contain;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* 旧 Edge / IE */
}
@@ -4485,7 +4517,12 @@ button.btn, a.btn, summary.btn, .seg-btn, .icon-btn, .rv-act-btn, .cs-btn, .bf-b
/* ---- 任务行：标题 + 状态 + **看板名** + 截止 ---- */
.tk-list { display: flex; flex-direction: column; }
.tk-row { align-items: center; }
/* 🔴 v54（用户 2026-10-16 第 1 条）：标题太长会把这行**挤成两行**。
与 `.dash-what` 那三句（nowrap/hidden/ellipsis）配套：行本身**不许换行**，
于是标题只能去收缩（它有 min-width:0，能一直缩到 0），徽标保持原样。
⚠️ 不复用 `.dash-row` 的 `flex-wrap:wrap` —— 那是"往年的今天"那一块要的
（窄屏时日期徽标该绕到下一行）；任务行收紧成 nowrap 才有截断可言。 */
.tk-row { align-items: center; flex-wrap: nowrap; }
.tk-board {
flex: 0 0 auto; font-size: 11.5px; color: var(--muted);
background: var(--line-2); border-radius: 999px; padding: 1px 8px;
@@ -5954,3 +5991,99 @@ h5.md-h, h6.md-h { font-size: 14px; }
.mod-table .mod-row.is-dragged { opacity: .5; }
.mod-table .mod-row.is-drop-before td { border-top: 2px solid var(--brand-2); }
.mod-table .color-picker { width: 34px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 5px; background: #fff; cursor: pointer; }
/* ==========================================================================
🔴 v54（用户 2026-10-16 第 3/4/5 条）：旅程 —— **列表 / 地图**两个视图
==========================================================================
用户原话：「在旅程这个模块，**可以在地图上显示旅程数据**」（移植 TripLog）；
「在旅程的「新建旅程」后面也加一个「设置」按钮」；
「里面的设置让用户自己配置：**到底默认显示旅程列表，还是用地图显示**。」
两个视图用**标签页**切换（不是两页）—— 因为"看列表"与"看地图"是同一份数据的
两种看法，来回切不该刷新整页；也让"默认显示哪个"这个设置有意义
（设置决定**进来时**先显示哪一个）。
⚠️ 标签页样式沿用本仓既有的"胶囊按钮 + on 态"口径（与日历视图切换一致）。 */
/* ---- 视图切换条 ---- */
.trip-views {
display: flex; align-items: center; gap: 8px;
margin: 0 0 14px;
}
.trip-views .tv-btn {
display: inline-flex; align-items: center; gap: 6px;
padding: 5px 14px; border-radius: 999px;
border: 1px solid var(--line); background: var(--surface);
color: var(--muted); font-size: 13.5px; cursor: pointer;
text-decoration: none; line-height: 1.5;
}
.trip-views .tv-btn:hover { color: var(--ink); border-color: var(--line-3, var(--line)); }
.trip-views .tv-btn.is-on {
background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600;
}
.trip-views .tv-btn svg { display: block; }
/* 右上角那颗「设为默认」小链接：与标签页同一行、靠右 */
.trip-views .tv-default {
margin-left: auto; font-size: 12.5px; color: var(--faint);
text-decoration: none; white-space: nowrap;
}
.trip-views .tv-default:hover { color: var(--brand); text-decoration: none; }
/* 「地图（0）」里那个小计数：还没位置时提示一下，别让人点进去看空地图 */
.trip-views .tv-dim { font-size: 11.5px; opacity: .8; margin-left: 2px; }
/* ---- 地图容器 ----
⚠️ **必须有固定高度**：高德地图在"高度为 0 的容器"里渲染出来是空白
（这是高德最常见的坑，`.trip-map` 的 height 就是为它写的）。
⚠️ 高度跟视口走（屏幕越大看得越远），但给下限免得笔记本上太扁。 */
.trip-map-wrap { margin-top: 2px; }
.trip-map {
width: 100%; height: clamp(380px, 62vh, 720px);
border: 1px solid var(--line); border-radius: var(--radius);
overflow: hidden; background: #EEF1F4; /* 瓦片到位前不闪白 */
}
.trip-map-fallback {
margin: 0; height: 100%; display: flex; align-items: center; justify-content: center;
color: var(--muted); font-size: 13.5px; padding: 0 24px; text-align: center;
}
.trip-map-hint { margin: 8px 0 0; }
/* ---- 地图上的标记：小卡片（左文右无图，比 TripLog 那版更轻）----
⚠️ 卡片是**绝对定位在画布中心**（JS 里 left/top = C+dx / C+dy）：
画布固定 260×260，卡片偏移不影响标记锚点（AMap 按画布中心对齐坐标）。 */
.trip-pin-stage { position: relative; pointer-events: none; }
.trip-pin {
position: absolute; transform: translate(-50%, -50%);
pointer-events: auto; cursor: pointer;
}
.trip-pin-card {
background: var(--surface); border: 1px solid var(--line);
border-left: 3px solid var(--brand);
border-radius: 8px; padding: 6px 10px;
box-shadow: 0 2px 8px rgba(0,0,0,.10);
max-width: 190px; white-space: nowrap;
}
.trip-pin-title {
font-size: 13px; font-weight: 600; color: var(--ink);
overflow: hidden; text-overflow: ellipsis;
}
.trip-pin-sub { font-size: 11.5px; color: var(--muted); margin-top: 1px; }
.trip-pin:hover .trip-pin-card { border-color: var(--brand); box-shadow: 0 4px 14px rgba(0,0,0,.16); }
/* ⚠️ AMap 的标记包装层尺寸跟着 content（260×260）走、默认可命中，
会把旁边卡片的点击整层挡住。整层禁掉命中、只留卡片本身可点
（TripLog 也踩过这个，见其 `.amap-marker` 那条注释）。 */
#tripMapCanvas .amap-marker { pointer-events: none !important; }
#tripMapCanvas .amap-marker .trip-pin { pointer-events: auto !important; }
/* ---- 显示方式设置页的单选卡片（v54 第 5 条）----
原生 radio + label 包一层卡片外观；`.is-on` 由服务端渲染时给
—— 不依赖 JS 同步选中态（无 JS 时至少"当前项"是对的）。 */
.view-choice { display: flex; flex-direction: column; gap: 10px; max-width: 480px; }
.view-choice-item {
display: flex; align-items: flex-start; gap: 10px;
padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-s);
cursor: pointer; background: var(--surface);
}
.view-choice-item:hover { border-color: var(--brand-2); }
.view-choice-item.is-on { border-color: var(--brand); background: var(--brand-soft, #f2f7f3); }
.view-choice-item input { margin-top: 3px; flex: 0 0 auto; }
.view-choice-item .vci-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.view-choice-item .vci-body b { font-size: 14px; }