Files
FamilyBook/templates/movies/stats.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

126 lines
5.3 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
/**
* 观影统计仪表板(v11,从 MovieLog stats.php 迁入)。
*
* 版式对齐家书的暖纸配色(MovieLog 是深色卡片风 —— 只搬功能、不搬皮肤,
* 免得进到观影模块里突然变成另一个站点)。
* 条形图是纯 CSS 宽度百分比,不引任何图表库(线上不依赖 CDN)。
*/
$fmtPct = static function (int $v, int $max): float {
return $max > 0 ? round($v / $max * 100, 2) : 0.0;
};
$maxCinema = 1;
foreach ($byCinema as $r) { $maxCinema = max($maxCinema, (int)$r['cnt']); }
$maxPerson = 1;
foreach ($byPerson as $r) { $maxPerson = max($maxPerson, (int)$r['cnt']); }
$maxMonth = 1;
foreach ($byMonth as $r) { $maxMonth = max($maxMonth, (int)$r['cnt']); }
$maxYear = 1;
foreach ($byYear as $r) { $maxYear = max($maxYear, (int)$r['cnt']); }
$wd = static function (?string $d): string {
return ($d !== null && $d !== '') ? date('Y年n月j日', strtotime($d)) : '—';
};
?>
<div class="page-head">
<h1>观影统计</h1>
<span class="sub">一家人的观影概览</span>
<div class="actions">
<a class="btn btn-ghost" href="<?= e(url('movies')) ?>">返回观影</a>
<?php $setCurrent = 'stats'; $setCanWrite = \App\Auth::canWrite(); require __DIR__ . '/_settings_menu.php'; ?>
</div>
</div>
<div class="stats-grid">
<div class="stat-card"><div class="number"><?= (int)$ov['movies'] ?></div><div class="label">电影总数</div></div>
<div class="stat-card"><div class="number"><?= (int)$ov['cinemas'] ?></div><div class="label">影院数</div></div>
<div class="stat-card"><div class="number"><?= (int)$ov['persons'] ?></div><div class="label">观影人数</div></div>
<div class="stat-card"><div class="number"><?= (int)$ov['viewership'] ?></div><div class="label">总观影人次</div></div>
</div>
<?php if ($ov['first_date'] !== null && $ov['last_date'] !== null): ?>
<div class="card card-pad stats-span">
<span class="label">观影跨度</span>
<span class="value"><?= e($wd($ov['first_date'])) ?> ~ <?= e($wd($ov['last_date'])) ?></span>
</div>
<?php endif; ?>
<div class="chart-card">
<h3>按影院统计 <span class="hint">电影数量</span></h3>
<?php if ($byCinema): ?>
<div class="bar-chart">
<?php foreach ($byCinema as $r): $c = (string)($r['color'] ?: '#888888'); ?>
<div class="bar-item">
<span class="bar-label">
<span class="color-dot" style="background: <?= e($c) ?>"></span>
<?= e((string)$r['name']) ?><?php if (trim((string)$r['place']) !== ''): ?><span class="bar-sub"><?= e((string)$r['place']) ?></span><?php endif; ?>
</span>
<span class="bar-track"><span class="bar-fill" style="width: <?= e((string)$fmtPct((int)$r['cnt'], $maxCinema)) ?>%; background: <?= e($c) ?>"></span></span>
<span class="bar-count"><?= (int)$r['cnt'] ?></span>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="empty-hint">还没有影院数据。到「影院管理」加几家影院,记观影时就能选了。</p>
<?php endif; ?>
</div>
<div class="two-col">
<div class="chart-card">
<h3>按观影人统计 <span class="hint">参与场次</span></h3>
<?php if ($byPerson): ?>
<div class="bar-chart">
<?php foreach ($byPerson as $r): ?>
<div class="bar-item">
<span class="bar-label">
<img class="bar-avatar" src="<?= e(avatar_url($r['avatar'] ?? null)) ?>" alt="">
<?= e((string)$r['name']) ?>
</span>
<span class="bar-track"><span class="bar-fill" style="width: <?= e((string)$fmtPct((int)$r['cnt'], $maxPerson)) ?>%"></span></span>
<span class="bar-count"><?= (int)$r['cnt'] ?></span>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="empty-hint">还没有观影人数据。</p>
<?php endif; ?>
</div>
<div class="chart-card">
<h3>按年统计 <span class="hint">观影数量</span></h3>
<?php if ($byYear): ?>
<div class="bar-chart">
<?php foreach ($byYear as $r): ?>
<div class="bar-item">
<span class="bar-label"><?= e((string)$r['y']) ?> 年</span>
<span class="bar-track"><span class="bar-fill bar-fill-alt" style="width: <?= e((string)$fmtPct((int)$r['cnt'], $maxYear)) ?>%"></span></span>
<span class="bar-count"><?= (int)$r['cnt'] ?></span>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="empty-hint">还没有年份数据。</p>
<?php endif; ?>
</div>
</div>
<div class="chart-card">
<h3>月度趋势 <span class="hint">最近 12 个月</span></h3>
<?php if ($byMonth): ?>
<div class="bar-chart">
<?php foreach ($byMonth as $r): ?>
<div class="bar-item">
<span class="bar-label"><?= e((string)$r['ym']) ?></span>
<span class="bar-track"><span class="bar-fill bar-fill-green" style="width: <?= e((string)$fmtPct((int)$r['cnt'], $maxMonth)) ?>%"></span></span>
<span class="bar-count"><?= (int)$r['cnt'] ?></span>
</div>
<?php endforeach; ?>
</div>
<?php else: ?>
<p class="empty-hint">还没有月度数据。</p>
<?php endif; ?>
</div>
<div class="btn-row">
<a class="btn btn-ghost" href="<?= e(url('movies/report')) ?>">看年度报告</a>
<a class="btn btn-ghost" href="<?= e(url('movies/search')) ?>">高级搜索</a>
</div>