Files
FamilyBook/templates/movies/_settings_menu.php
T
laoyang 7f00d3e553 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,原样入库不被改写行尾。
2026-10-01 19:35:48 +08:00

61 lines
3.4 KiB
PHP
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
<?php
/**
* 观影模块的「设置」下拉 —— 影院管理 / 高级搜索 / 统计 / 年度报告。
*
* 用户明确要求(2026-10-01):
* ① 设置按钮**去掉「设置」二字,只留图标**,图标是**三条横线**(☰);
* ② 设置按钮在**所有页面都排在最右侧**(统一位置);
* ③ 点开后的**每条条目,文字前都要加图标**;
* ④ 除设置外,其它按钮都要**有颜色**,跟设置(无色/描边)区分开。
*
* 实现要点:
* · 按钮本身用 .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 是否显示「影院管理」(只有能写的人才有管理入口)
*/
$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-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') ?>><?= $setIcon('cinemas') ?><span>影院管理</span></a>
<?php endif; ?>
<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, $setIcon);
?>