feat(kin,movies): 家谱改用第三方库 family-chart；观影设置按钮改纯图标并统一页头度量
家谱（v13）： - 自研布局是死结，不是样式问题：连线的横杆是网格项，只能横跨「父母列→子女列」 整段区间，中间夹着与血缘无关的人（如媳妇那侧的岳父母）时必然从卡片上穿过。 换成 family-chart（D3 生态，MIT）后，排布只走本家血脉 + 配偶，姻亲不进画布， 这个死结在构造上就不存在了。 - 接入踩到并修掉的坑：main_id = data[0].id（「我」必须排最前）； 卡片回调里自定义字段在 d.data.data（双层）；库的 family-chart.css 是死文件 （全挂在 .f3 作用域，运行时没有 .f3 元素）；库的 svg 撑满选择器永不命中 （必须自己补 .kin-chart svg.main_svg）；setCanAdd/setOnCardClick 不在 chart 上 （写错会抛异常，把 updateTree 一起带走 → 整张图空白，页面照样 200）。 - 关掉 setSingleParentEmptyCard：库默认给孩子只登记一位父母的人自动补一张无名 配偶卡，看着像「凭空多出一个配偶」。 - 卡片用原生 <a> 链成员页，不依赖库的点击回调。 观影按钮（用户本轮原话）： - 「记一场电影」与「设置」高度仍不一致 —— 根因是文字按钮高度由 padding+line-height 自然推出（43.8px），而 .btn-icon 写死了 40px。抽出 --act-* / --act-h 变量，两边同源。 - 设置按钮去掉「设置」二字，只留图标，图标换成三条横线（☰）。 - 设置按钮在所有页面排最右（.movie-set 用 margin-left:auto 顶到行尾）。 - 除设置外其他按钮都有颜色，与设置区分（主按钮实心 / 次要浅底 / 危险淡红）。 顺带修掉一个特异性 bug：删除按钮被 .btn 品牌底盖成实心红，与「编辑」难分辨。 - 设置下拉四个条目文字前都加图标（行内 SVG，不引外部字体）。 测试与部署： - 新增 _fb_kin_check.py（桌面，12 条）+ _fb_kin_falsify.py（6/6）证明 「整张家谱空白」这类只靠通用几何抓不到的坏法能被抓住。 - _fb_geom_mobile.py 家谱段重写为窄屏语义（库按容器 fit 缩放是正常行为， 改为断「比例没被压扁 / 缩放不至于看不清」），并加 _fb_kin_mobile_falsify.py（4/4）。 - _fb_btn_check.py（59 条）+ _fb_btn_falsify.py（3/3）覆盖观影页头按钮五条需求。 - familybook_deploy.sh / familybook_smoke.sh 的家谱断言改为第三方库形态， 设置按钮断言改为 btn-icon 纯图标 + 三条横线 + 条目图标。 - 新增 .gitattributes：vendor 库与 .min.js 标 -text，原样入库不被改写行尾。
This commit is contained in:
@@ -1,38 +1,61 @@
|
||||
<?php
|
||||
/**
|
||||
* 观影模块的「⚙ 设置」下拉 —— 影院管理 / 高级搜索 / 统计 / 年度报告。
|
||||
* 观影模块的「设置」下拉 —— 影院管理 / 高级搜索 / 统计 / 年度报告。
|
||||
*
|
||||
* 为什么抽成片段：v11 这个下拉只长在观影列表页一个地方；用户随后要求
|
||||
* 「设置这个按钮，在观影详情等页面也都要出现，就出现在返回等按钮的旁边」。
|
||||
* 与其把同一段 <details> 复制到六七个页头（改一处就得改六处、迟早漏），
|
||||
* 不如让所有观影页 require 同一个片段。
|
||||
* 用户明确要求（2026-10-01）：
|
||||
* ① 设置按钮**去掉「设置」二字，只留图标**，图标是**三条横线**（☰）；
|
||||
* ② 设置按钮在**所有页面都排在最右侧**（统一位置）；
|
||||
* ③ 点开后的**每条条目，文字前都要加图标**；
|
||||
* ④ 除设置外，其它按钮都要**有颜色**，跟设置（无色/描边）区分开。
|
||||
*
|
||||
* 用法（include 前 set 好）：
|
||||
* $setCurrent 当前页的 key（'list' | 'cinemas' | 'search' | 'stats' | 'report' | 'show' | 'form'）
|
||||
* —— 用来高亮菜单里对应的那一项。空串表示都不高亮。
|
||||
* 实现要点：
|
||||
* · 按钮本身用 .btn-icon（方形、只有图标、无文字）——与「记一场电影」等实心按钮同高；
|
||||
* · 靠 CSS 的 `margin-left:auto` 把它推到动作区最右（见 app.css 的 .movie-set 一节）。
|
||||
* 这样无论各页把片段 require 在 actions 的哪个位置，它都会贴右，不必逐页调顺序。
|
||||
* · 条目图标用行内 SVG（不引外部字体/图片，避免多一次请求与 FOUC）。
|
||||
*
|
||||
* 用法（require 前 set 好）：
|
||||
* $setCurrent 当前页 key（'list'|'cinemas'|'search'|'stats'|'report'|'show'|'form'），用来高亮当前项
|
||||
* $setCanWrite 是否显示「影院管理」（只有能写的人才有管理入口）
|
||||
*
|
||||
* ⚠️ 高亮用 `a.on`（.movie-set .menu-list a.on 已有样式）。**不做「隐藏当前页那一项」**：
|
||||
* 隐藏会让菜单在不同页面长短不一，用户更难认出「这是同一套入口」。
|
||||
*/
|
||||
$setCurrent = (string)($setCurrent ?? '');
|
||||
$setCanWrite = (bool)($setCanWrite ?? false);
|
||||
$setOn = static function (string $key) use ($setCurrent): string {
|
||||
return $setCurrent === $key ? ' class="on"' : '';
|
||||
};
|
||||
// 条目图标（行内 SVG，16×16，用 currentColor 跟随文字色）
|
||||
$setIcon = static function (string $name): string {
|
||||
$paths = [
|
||||
// 影院管理：放映机/胶片
|
||||
'cinemas' => '<rect x="2" y="4" width="12" height="8" rx="1.5"/><path d="M4.5 6.5h1.5M7.5 6.5h1.5M10.5 6.5h1.5M4.5 9.5h1.5M7.5 9.5h1.5M10.5 9.5h1.5"/>',
|
||||
// 高级搜索：放大镜
|
||||
'search' => '<circle cx="7" cy="7" r="4.5"/><path d="M10.5 10.5L14 14"/>',
|
||||
// 统计：柱状图
|
||||
'stats' => '<path d="M3 13V9M6.5 13V5M10 13V7.5M13.5 13V3"/>',
|
||||
// 年度报告：文档
|
||||
'report' => '<path d="M4 2h5l3 3v9H4z"/><path d="M9 2v3h3M6 8h4M6 10.5h4"/>',
|
||||
];
|
||||
$d = $paths[$name] ?? '';
|
||||
if ($d === '') {
|
||||
return '';
|
||||
}
|
||||
return '<svg class="mi" viewBox="0 0 16 16" width="16" height="16" aria-hidden="true"'
|
||||
. ' fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"'
|
||||
. ' stroke-linejoin="round">' . $d . '</svg>';
|
||||
};
|
||||
?>
|
||||
<details class="movie-set menu">
|
||||
<summary class="btn btn-ghost" title="观影设置">⚙ 设置</summary>
|
||||
<summary class="btn btn-icon" title="观影设置" aria-label="观影设置"><svg viewBox="0 0 16 16" width="18" height="18" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round"><path d="M2.5 4.5h11M2.5 8h11M2.5 11.5h11"/></svg></summary>
|
||||
<div class="menu-list">
|
||||
<?php if ($setCanWrite): ?>
|
||||
<a href="<?= e(url('movies/cinemas')) ?>"<?= $setOn('cinemas') ?>>影院管理</a>
|
||||
<a href="<?= e(url('movies/cinemas')) ?>"<?= $setOn('cinemas') ?>><?= $setIcon('cinemas') ?><span>影院管理</span></a>
|
||||
<?php endif; ?>
|
||||
<a href="<?= e(url('movies/search')) ?>"<?= $setOn('search') ?>>高级搜索</a>
|
||||
<a href="<?= e(url('movies/stats')) ?>"<?= $setOn('stats') ?>>统计</a>
|
||||
<a href="<?= e(url('movies/report')) ?>"<?= $setOn('report') ?>>年度报告</a>
|
||||
<a href="<?= e(url('movies/search')) ?>"<?= $setOn('search') ?>><?= $setIcon('search') ?><span>高级搜索</span></a>
|
||||
<a href="<?= e(url('movies/stats')) ?>"<?= $setOn('stats') ?>><?= $setIcon('stats') ?><span>统计</span></a>
|
||||
<a href="<?= e(url('movies/report')) ?>"<?= $setOn('report') ?>><?= $setIcon('report') ?><span>年度报告</span></a>
|
||||
</div>
|
||||
</details>
|
||||
<?php
|
||||
// 用完即清，避免残留在后续 include 里（与 _datetime.php 同一纪律）
|
||||
unset($setCurrent, $setCanWrite, $setOn);
|
||||
unset($setCurrent, $setCanWrite, $setOn, $setIcon);
|
||||
?>
|
||||
Reference in New Issue
Block a user