v11: 家谱按户排布（夫妻并排/长幼排序/父母括号/姻亲）；观影设置下拉收拢影院·搜索·统计·年度报告；观影人头像

家谱（用户第 2 点，重写模板与 Kinship::tree）： - 同代聚成「夫妻单元」（户）：血亲当主位、配偶并排在其右，兄弟_姐妹按长幼（长子左） - 血亲可达性判「姻亲」：只走 parent/child 边从「我」可达者为本家血亲，妻子的父母走不到 → 标「姻亲」并排到本代末尾（旧判据「上无父母且下无子女」对岳父母恒为假，是真 bug） - 父母括号连线：横杆盖住父母列到其子女各列，竖线落父母列中心、每子女列一道下线 - 称呼按长幼定死：姐夫/妹夫、嫂子/弟媳、大/小舅子、大/小姨子、大伯子/小叔子、大姑子/小姑子、侄子/侄女、外甥/外甥女、堂/表 - 列宽地板 minmax(min-content,1fr)：原 minmax(0,1fr) 在窄屏+户数多时把列压到卡片（96px）以下 → 同代卡片互相重叠；.tnode 加 flex:0 0 auto 防被 flex 压扁观影（用户第 3~5 点）： - 顶栏删「影院」入口（影院是观影模块的子功能）；观影列表右侧加「⚙ 设置」下拉，内含影院管理 / 高级搜索 / 统计 / 年度报告（后三者从 MovieLog 迁入， app/MovieStats.php + 三个只读路由，MySQL 方言；图表全用纯 CSS，不引 CDN） - 评价区删除「我」的长条徽标（被 flex column stretch 拉成整行宽的丑色带） - 观影人弹窗列表与已选 chips 带头像；syncChips 点名取 .att-name/.att-av （旧写法取「第一个 span」，v11 起那是隐藏占位，chip 上会没名字）验证：e2e 432/0、桌面几何 268/0、移动几何 464/0、交互几何 97/0、静态空跑 199/0、反向验证 v11 十条 10抓/0漏。本轮无 DB 变更（Schema 仍 v10）。移动几何抓出两个真溢出并已修：高级搜索页 select 长选项撑破 .field、原生 date 输入撑破 .date-range（360/375px）。
2026-10-01 12:11:43 +08:00
parent 2c36335c3e
commit e9b3b8666b
12 changed files with 1494 additions and 103 deletions
@@ -1,13 +1,26 @@
 <?php
 /**
- * 我的家谱：以我为中心，向上向下各三代。
+ * 我的家谱：以我为中心，向上向下各三代。**v11 重写** —— 从「按代平铺」改成「按户排布」。
 *
- * 只做「呈现 + 说清楚推导规则」两件事 —— 关系的录入在成员详情页，
- * 因为那里有具体的人，比在一张图上点来点去更好理解。
+ * 用户提出的四点，对应这里的四个做法：
+ *   ① 「每一层级都需要按照长子左、次子右的顺序排序，夫妻要放在一起」
+ *      → 同一代不再平铺一堆卡片，而是先聚成**夫妻单元**（一户），
+ *        夫妻并排（男左女右、血亲在左），再把单元按长幼从左到右排。
+ *        聚合与排序在 App\Kinship::tree() 里算好（['units']），这里只负责画。
+ *   ② 「上下代之间要有连线，明确谁是谁的父母与孩子」
+ *      → 用**父母括号**（family bracket）：父母那一户下方画一个横跨它所有子女的
+ *        方括号，括号中心垂下一根线接到父母，每个子女各自的竖线接进同一根横杆。
+ *        谁是谁的父母/孩子因此一眼可辨，而不是"两代之间一条装饰竖线"。
+ *   ③ 「妹夫、姐夫……谁是姐姐谁是妹妹是很明确的事情」等称呼
+ *      → 全部在 Kinship::label() 里按长幼定死（本模板只渲染结果，不自己做判断）。
+ *   ④ 「小姨子、小姑子、大姨子这种称呼，有错的，需要完全正确」
+ *      → 同上；另对「妻子的父母」这类漂在图上的旁支标一句「姻亲」，免得看着像断线。
 */
-$gens = $tree['generations'];
-$nodes = $tree['nodes'];
-$me = $nodes[$meId] ?? null;
+$gens     = $tree['generations'];
+$units    = $tree['units']       ?? [];
+$unitName = $tree['unit_names']  ?? [];
+$nodes    = $tree['nodes'];
+$me       = $nodes[$meId] ?? null;

 // 代数 → 人类说法
 $genWord = function (int $level): string {
@@ -22,10 +35,24 @@ $genWord = function (int $level): string {
    $down = [1 => '子女辈', 2 => '孙辈', 3 => '曾孙辈'];
    return $down[$level] ?? '下 ' . $level . ' 代';
 };
+
+$levels = array_keys($gens);
+// 整棵图的宽度取「最宽那一代」—— 所有代共用一个宽度，连线才能跟人对齐
+$maxUnits = 1;
+foreach ($levels as $lv) {
+    $maxUnits = max($maxUnits, count($units[$lv] ?? []));
+}
+// ⚠️ 列宽最小值必须是 min-content（**不能**是 0）：
+//    v11 实测踩到 —— 最小值给 0 时列会被压到 96px 以下，而卡片是固定 96px 宽，
+//    于是窄屏 + 户数多时同代卡片**互相重叠**（照片与名字糊成一团）。
+//    minmax(min-content, 1fr) 给列一个「不小于内容」的地板：内容窄时照旧均分填满，
+//    内容宽过版心时整棵树交给 .tree-inner 横向滚动（这正是家谱的设计意图）。
+$colStyle = 'grid-template-columns: repeat(' . (int)$maxUnits . ', minmax(min-content, 1fr));';
 ?>

 <div class="page-head">
  <h1>我的家谱</h1>
+  <span class="sub">同代按长幼从左到右 · 夫妻并排 · 括号表示谁是谁的父母</span>
 </div>

 <?php if (!$nodes || count($nodes) <= 1): ?>
@@ -37,28 +64,100 @@ $genWord = function (int $level): string {
 <?php else: ?>

  <div class="tree">
-    <?php foreach ($gens as $level => $ids): ?>
-      <div class="tree-gen">
-        <div class="tree-gen-label">
-          <span class="gname"><?= e($genWord((int)$level)) ?></span>
+    <div class="tree-inner">
+      <?php foreach ($levels as $li => $level): ?>
+        <?php $levelUnits = $units[$level] ?? []; ?>
+
+        <div class="tree-gen">
+          <div class="tree-gen-label">
+            <span class="gname"><?= e($genWord((int)$level)) ?></span>
+            <span class="gtag"><?= count($levelUnits) ?> 户</span>
+          </div>
+
+          <div class="tree-row" style="<?= e($colStyle) ?>">
+            <?php foreach ($levelUnits as $u): ?>
+              <div class="tree-unit">
+                <?php foreach ($u['ids'] as $k => $id): ?>
+                  <?php if ($k === 1): ?>
+                    <span class="tree-bond" aria-label="夫妻"><i></i></span>
+                  <?php endif; ?>
+                  <?php $n = $nodes[$id]; ?>
+                  <a class="tnode <?= (int)$id === $meId ? 'is-me' : '' ?> <?= $n['ph'] ? 'is-placeholder' : '' ?> <?= $u['inlaw'] && $k === 0 ? 'is-inlaw' : '' ?>"
+                     href="<?= e(url('people/show', ['id' => $n['id']])) ?>"
+                     title="<?= e($n['name'] . ' · ' . $n['label']) ?>">
+                    <span class="tph"><img src="<?= e(avatar_url($n['avatar'])) ?>" alt=""></span>
+                    <span class="tname"><?= e($n['name']) ?></span>
+                    <span class="tlabel"><?= e($n['label']) ?></span>
+                    <?php if ($n['ph']): ?><span class="tph-mark">待确认</span><?php endif; ?>
+                  </a>
+                <?php endforeach; ?>
+                <?php if ($u['inlaw']): ?>
+                  <span class="tree-inlaw-tag" title="因婚姻进来的人，不是本家的血亲">姻亲</span>
+                <?php endif; ?>
+              </div>
+            <?php endforeach; ?>
+          </div>
        </div>
-        <div class="tree-row">
-          <?php foreach ($ids as $id): $n = $nodes[$id]; ?>
-            <a class="tnode <?= (int)$id === $meId ? 'is-me' : '' ?> <?= $n['ph'] ? 'is-placeholder' : '' ?>"
-               href="<?= e(url('people/show', ['id' => $n['id']])) ?>"
-               title="<?= e($n['name'] . ' · ' . $n['label']) ?>">
-              <span class="tph"><img src="<?= e(avatar_url($n['avatar'])) ?>" alt=""></span>
-              <span class="tname"><?= e($n['name']) ?></span>
-              <span class="tlabel"><?= e($n['label']) ?></span>
-              <?php if ($n['ph']): ?><span class="tph-mark">待确认</span><?php endif; ?>
-            </a>
-          <?php endforeach; ?>
-        </div>
-      </div>
-      <?php if ((int)$level !== (int)array_key_last($gens)): ?>
-        <div class="tree-link"></div>
-      <?php endif; ?>
-    <?php endforeach; ?>
+
+        <?php
+        // ---- 父母括号：这一代（父母）↔ 下一代（子女）的连线 ----
+        //
+        // 画法（每个「父母户 + 它的子女们」一组）：
+        //   · 一根横杆盖住「父母那一列 → 它的子女各列」；
+        //   · 横杆在**父母列的中心**向上伸一根竖线，接到父母那一户；
+        //   · 横杆在**每个子女列的中心**向下伸一根短线，接到各自的子女户。
+        // 于是「谁是谁的父母与孩子」是几何上可读的，而不是两代之间一条装饰线。
+        $childLevel = $levels[$li + 1] ?? null;
+        if ($childLevel !== null && !empty($units[$childLevel])):
+            $kids = $units[$childLevel];
+            $ranges = [];   // 父母单元key => [第一个子女列, 最后一个子女列]
+            foreach ($kids as $i => $ku) {
+                $pk = $ku['parent_key'];
+                if ($pk === null) {
+                    continue;
+                }
+                if (!isset($ranges[$pk])) {
+                    $ranges[$pk] = [$i, $i];
+                } else {
+                    $ranges[$pk][1] = $i;
+                }
+            }
+            // 父母单元key => 它在上一代里的列号（拿来决定竖线落点）
+            $pidx = [];
+            foreach (($units[$level] ?? []) as $i => $pu) {
+                $pidx[$pu['key']] = $i;
+            }
+        ?>
+          <div class="tree-conn" style="<?= e($colStyle) ?>">
+            <?php foreach ($ranges as $pk => $rg): ?>
+              <?php
+              $pn    = $unitName[$pk] ?? ['head' => '', 'spouse' => null];
+              $who   = $pn['head'] . ($pn['spouse'] !== null ? ' 夫妇' : '');
+              $pCol  = $pidx[$pk] ?? $rg[0];
+              $lo    = min($pCol, $rg[0]);
+              $hi    = max($pCol, $rg[1]);
+              $span  = $hi - $lo + 1;
+              // 竖线落在父母列的中心（在横杆这一段里的百分比位置）
+              $pct   = ($pCol - $lo + 0.5) / $span * 100;
+              ?>
+              <div class="tc-bar" style="grid-column: <?= $lo + 1 ?> / <?= $hi + 2 ?>; grid-row: 1"
+                   title="<?= e($who . ' 的子女') ?>">
+                <span class="tc-up" style="left: <?= round($pct, 3) ?>%"></span>
+              </div>
+            <?php endforeach; ?>
+            <?php foreach ($kids as $i => $ku): ?>
+              <div class="tc-down" style="grid-column: <?= $i + 1 ?>; grid-row: 1"></div>
+            <?php endforeach; ?>
+          </div>
+        <?php endif; ?>
+
+      <?php endforeach; ?>
+    </div>
  </div>

+  <p class="tree-legend">
+    「姻亲」= 因为婚姻进到这张图里的人（如我妻子的父母），不是本家的血亲。
+    括号横跨的那几户，就是括号上方那一户的子女。
+  </p>
+
 <?php endif; ?>
@@ -1,13 +1,14 @@
 <?php
 // ⚠️ 「系统设置」**不在**顶栏里（用户明确要求）：它已经收进右上角头像下拉菜单里了，
 //    顶栏留「首页 / 家谱 / 名册 / 观影」四个日常入口，别再把管理入口顶出来。
-//    （v8 起加了「观影」—— MovieLog 整体迁入后的日常入口。）
+// ⚠️ v11：「影院」也**不在**顶栏里了（用户明确要求）—— 影院是观影模块的一部分，
+//    统一从观影列表页右侧的「设置」按钮进（那里还挂着高级搜索/统计/年度报告）。
+//    别再往 $navItems 里加子功能入口，顶栏只放"模块"这一级。
 $navItems = [
-    'home'    => ['首页', 'home'],
-    'kin'     => ['家谱', 'kin'],
-    'people'  => ['名册', 'people'],
-    'movies'  => ['观影', 'movies'],
-    'cinemas' => ['影院', 'movies/cinemas'],
+    'home'   => ['首页', 'home'],
+    'kin'    => ['家谱', 'kin'],
+    'people' => ['名册', 'people'],
+    'movies' => ['观影', 'movies'],
 ];
 // ⚠️ 变量名不要叫 $me：layout 是在 extract($data) **之后**被 require 的，
 //    这里再赋值会把页面传进来的 $me（当前登录者的完整记录）覆盖掉。
@@ -97,12 +97,13 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
        <label>同行的人</label>
        <?php /* v10：名册人多时 checkbox 网格会拉得很长 —— 改为「chips + 弹窗选择」。
                attendees[] 的 checkbox 仍保留（在弹窗列表里，选中即提交），无 JS 时
-                借 noscript 样式把弹窗平铺成普通勾选列表，提交语义完全不变。 */ ?>
+                借 noscript 样式把弹窗平铺成普通勾选列表，提交语义完全不变。
+                v11：chips 与弹窗列表都带上头像（$p 来自 Person::roster，含 p.avatar）。 */ ?>
        <?php if ($people): ?>
          <div class="att-chips" id="attChips">
            <?php foreach ($people as $p): ?>
              <?php if (in_array((int)$p['id'], $selAttendees, true)): ?>
-                <span class="att-chip" data-id="<?= (int)$p['id'] ?>"><?= e($p['shown'] ?? $p['name']) ?><button type="button" class="att-x" data-id="<?= (int)$p['id'] ?>" title="移除">×</button></span>
+                <span class="att-chip" data-id="<?= (int)$p['id'] ?>"><img src="<?= e(avatar_url($p['avatar'] ?? null)) ?>" alt=""><span class="att-name"><?= e($p['shown'] ?? $p['name']) ?></span><button type="button" class="att-x" data-id="<?= (int)$p['id'] ?>" title="移除">×</button></span>
              <?php endif; ?>
            <?php endforeach; ?>
          </div>
@@ -122,7 +123,8 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
                         data-shown="<?= e((string)($p['shown'] ?? '')) ?>">
                    <input type="checkbox" name="attendees[]" value="<?= (int)$p['id'] ?>"
                           <?= in_array((int)$p['id'], $selAttendees, true) ? 'checked' : '' ?>>
-                    <span><?= e($p['shown'] ?? $p['name']) ?></span>
+                    <img class="att-av" src="<?= e(avatar_url($p['avatar'] ?? null)) ?>" alt="" loading="lazy">
+                    <span class="att-name"><?= e($p['shown'] ?? $p['name']) ?></span>
                    <span class="att-initials" hidden></span>
                  </label>
                <?php endforeach; ?>
@@ -233,12 +235,26 @@ $selAttendees = array_map('intval', (array)old('attendees', $curAttendees));
    chips.innerHTML = '';
    Array.prototype.forEach.call(list.querySelectorAll('.att-item input:checked'), function (box) {
      var item = box.closest('.att-item');
-      var label = item.querySelector('span').textContent;
+      // ⚠️ 必须点名取 .att-name：v11 起 .att-item 里第一个元素是头像 <img>，
+      //    早先靠「取第一个 span 当名字」碰巧成立，现在第一个 span 是隐藏的
+      //    首字母占位，选完人 chip 上就没名字了。
+      var nameEl = item.querySelector('.att-name');
+      var label = nameEl ? nameEl.textContent : box.value;
+      var av = item.querySelector('.att-av');
      var id = box.value;
      var chip = document.createElement('span');
      chip.className = 'att-chip';
      chip.setAttribute('data-id', id);
-      chip.textContent = label;
+      if (av) {
+        var im = document.createElement('img');
+        im.src = av.getAttribute('src');       // 服务端已 e() 过，这里原样搬
+        im.alt = '';
+        chip.appendChild(im);
+      }
+      var nm = document.createElement('span');
+      nm.className = 'att-name';
+      nm.textContent = label;
+      chip.appendChild(nm);
      var x = document.createElement('button');
      x.type = 'button'; x.className = 'att-x'; x.textContent = '×';
      x.title = '移除'; x.setAttribute('data-id', id);
@@ -23,10 +23,22 @@ $fmtNum = static function ($v): string {
    <?php endif; ?>
  </span>
  <div class="actions">
-    <a class="btn btn-ghost btn-sm" href="<?= e(url('movies/cinemas')) ?>">影院管理</a>
    <?php if ($canWrite): ?>
      <a class="btn" href="<?= e(url('movies/new')) ?>">记一场电影</a>
    <?php endif; ?>
+    <?php /* v11：右侧的「设置」按钮 —— 影院管理与从 MovieLog 迁来的
+             高级搜索 / 统计 / 年度报告都收在这里（顶栏不再单放「影院」）。 */ ?>
+    <details class="movie-set menu">
+      <summary class="btn btn-ghost btn-sm" title="观影设置">⚙ 设置</summary>
+      <div class="menu-list">
+        <?php if ($canWrite): ?>
+          <a href="<?= e(url('movies/cinemas')) ?>">影院管理</a>
+        <?php endif; ?>
+        <a href="<?= e(url('movies/search')) ?>">高级搜索</a>
+        <a href="<?= e(url('movies/stats')) ?>">统计</a>
+        <a href="<?= e(url('movies/report')) ?>">年度报告</a>
+      </div>
+    </details>
  </div>
 </div>

@@ -0,0 +1,143 @@
+<?php
+/**
+ * 年度观影报告（v11，从 MovieLog annual_report.php 迁入）。
+ *
+ * ⚠️ 与 MovieLog 唯一的实质差异：那边月份/星期两张图靠外部图表库脚本渲染，
+ *    家书这边**不引任何外部脚本** —— 图表全部用 CSS 画（月份是竖柱、星期是横条）。
+ *    理由：线上不依赖外网 CDN 是既有纪律（家书连字体都是系统字体），
+ *    而且这两张图的信息量很小，CSS 完全够用。
+ *
+ * 「我」的口径与 MovieLog 一致：报告只统计**登录者参与过**的场次。
+ */
+$wd        = ['日', '一', '二', '三', '四', '五', '六'];
+$monthMax  = max(1, max(array_values($stats['month_distribution'])));
+$weekdayMax = max(1, max(array_values($stats['weekday_distribution'])));
+$hasData   = (int)$stats['total'] > 0;
+$fmtDate   = static function (?string $d): string {
+    return ($d !== null && $d !== '') ? date('Y年n月j日', strtotime($d)) : '—';
+};
+?>
+<div class="page-head">
+  <h1><?= (int)$year ?> 年度观影报告</h1>
+  <span class="sub"><?= e($meName) ?> 这一年看了 <?= (int)$stats['total'] ?> 场</span>
+  <div class="actions">
+    <form method="get" action="index.php" class="year-pick">
+      <input type="hidden" name="r" value="movies/report">
+      <select class="select" name="year" onchange="this.form.submit()" aria-label="选择年份">
+        <?php foreach ($years as $y): ?>
+          <option value="<?= (int)$y ?>" <?= (int)$y === (int)$year ? 'selected' : '' ?>><?= (int)$y ?> 年</option>
+        <?php endforeach; ?>
+      </select>
+    </form>
+    <a class="btn btn-ghost btn-sm" href="<?= e(url('movies')) ?>">返回观影</a>
+  </div>
+</div>
+
+<?php if (!$hasData): ?>
+  <div class="card card-pad empty">
+    <b><?= (int)$year ?> 年还没有你的观影记录</b>
+    换一个年份看看，或者先去记一场电影。
+  </div>
+<?php else: ?>
+
+  <div class="report-grid">
+    <div class="report-card"><div class="n"><?= (int)$stats['total'] ?></div><div class="l">观影场次</div></div>
+    <div class="report-card"><div class="n"><?= (int)$stats['days'] ?></div><div class="l">看电影的天数</div></div>
+    <div class="report-card"><div class="n"><?= e((string)$stats['avg_per_month']) ?></div><div class="l">月均场次</div></div>
+    <div class="report-card"><div class="n"><?= e((string)$stats['avg_days_between']) ?></div><div class="l">平均几天看一场</div></div>
+  </div>
+
+  <div class="report-grid two">
+    <div class="report-card wide">
+      <div class="l">最常去的影院</div>
+      <div class="v"><?= e((string)$stats['top_cinema']) ?></div>
+      <?php if ((int)$stats['top_cinema_count'] > 0): ?><div class="s">去了 <?= (int)$stats['top_cinema_count'] ?> 次</div><?php endif; ?>
+    </div>
+    <div class="report-card wide">
+      <div class="l">一起看电影最多的人</div>
+      <div class="v"><?= e((string)$stats['top_person']) ?></div>
+      <?php if ((int)$stats['top_person_count'] > 0): ?><div class="s">同场 <?= (int)$stats['top_person_count'] ?> 次</div><?php endif; ?>
+    </div>
+    <div class="report-card wide">
+      <div class="l">同场人最多的一部</div>
+      <div class="v"><?= e((string)$stats['most_viewers_movie']) ?></div>
+      <?php if ((int)$stats['most_viewers_count'] > 0): ?><div class="s"><?= (int)$stats['most_viewers_count'] ?> 人一起看</div><?php endif; ?>
+    </div>
+    <div class="report-card wide">
+      <div class="l">这一年从 <?= e($fmtDate($stats['first_date'])) ?></div>
+      <div class="v">到 <?= e($fmtDate($stats['last_date'])) ?></div>
+      <div class="s"><?= (int)$stats['days'] ?> 个不同的日子走进电影院</div>
+    </div>
+  </div>
+
+  <div class="card card-pad">
+    <h3 class="section-title">月份分布 <span class="hint">每个月看几场</span></h3>
+    <div class="vgrid">
+      <?php foreach ($stats['month_distribution'] as $m => $cnt): ?>
+        <div class="vcol" title="<?= (int)$m ?> 月：<?= (int)$cnt ?> 场">
+          <span class="vbar" style="height: <?= e((string)round((int)$cnt / $monthMax * 100, 2)) ?>%"></span>
+          <span class="vlab"><?= (int)$m ?>月</span>
+          <span class="vnum"><?= (int)$cnt ?></span>
+        </div>
+      <?php endforeach; ?>
+    </div>
+  </div>
+
+  <div class="card card-pad">
+    <h3 class="section-title">星期分布 <span class="hint">哪天最常去</span></h3>
+    <div class="bar-chart">
+      <?php foreach ($wd as $w): $c = (int)$stats['weekday_distribution'][$w]; ?>
+        <div class="bar-item">
+          <span class="bar-label">周<?= e($w) ?></span>
+          <span class="bar-track"><span class="bar-fill bar-fill-alt" style="width: <?= e((string)round($c / $weekdayMax * 100, 2)) ?>%"></span></span>
+          <span class="bar-count"><?= $c ?></span>
+        </div>
+      <?php endforeach; ?>
+    </div>
+  </div>
+
+  <?php if ($stats['keywords']): ?>
+    <div class="card card-pad">
+      <h3 class="section-title">这一年常出现的词 <span class="hint">从你的备注里数的</span></h3>
+      <div class="kw-cloud">
+        <?php foreach ($stats['keywords'] as $kw): ?><span class="kw"><?= e((string)$kw) ?></span><?php endforeach; ?>
+      </div>
+    </div>
+  <?php endif; ?>
+
+  <?php if ($stats['my_movies']): ?>
+    <div class="card card-pad">
+      <h3 class="section-title">这一年的片单 <span class="hint"><?= count($stats['my_movies']) ?> 部</span></h3>
+      <div class="waterfall">
+        <?php foreach ($stats['my_movies'] as $mv): ?>
+          <a class="movie-card" href="<?= e(url('movies/show', ['id' => (int)$mv['id']])) ?>">
+            <span class="card-image">
+              <?php if (!empty($mv['poster_key'])): ?>
+                <img src="<?= e(media_url($mv['poster_key'])) ?>" alt="<?= e($mv['title']) ?>" loading="lazy">
+              <?php else: ?>
+                <span class="placeholder-poster">
+                  <span class="ph-icon" aria-hidden="true">影</span>
+                  <span class="placeholder-title"><?= e($mv['title']) ?></span>
+                </span>
+              <?php endif; ?>
+            </span>
+            <span class="card-body">
+              <span class="card-title"><?= e($mv['title']) ?></span>
+              <span class="card-meta">
+                <span>📅 <?= e(\App\Movie::formatWatch($mv['starts_at'], null)) ?></span>
+              </span>
+              <?php if (!empty($mv['viewers'])): ?>
+                <span class="card-viewers">
+                  <?php foreach ($mv['viewers'] as $vw): ?>
+                    <span class="viewer-tag"><img src="<?= e(avatar_url($vw['avatar'] ?? null)) ?>" alt=""><?= e((string)$vw['name']) ?></span>
+                  <?php endforeach; ?>
+                </span>
+              <?php endif; ?>
+            </span>
+          </a>
+        <?php endforeach; ?>
+      </div>
+    </div>
+  <?php endif; ?>
+
+<?php endif; ?>
@@ -0,0 +1,107 @@
+<?php
+/**
+ * 高级搜索（v11，从 MovieLog search.php 迁入）。
+ *
+ * 与观影列表页顶部那个「一个关键词搜所有字段」的搜索栏不同：这里是**组合条件**——
+ * 片名 / 影院 / 观影人 / 日期范围 可以任意叠加，且观影人、影院是从下拉里点名选。
+ * 一个条件都不给时不查询，页面提示「先设置条件」（否则条件全空 = 全表，看着像卡了）。
+ */
+?>
+<div class="page-head">
+  <h1>高级搜索</h1>
+  <span class="sub">组合多个条件精确查找</span>
+  <div class="actions">
+    <a class="btn btn-ghost btn-sm" href="<?= e(url('movies')) ?>">返回观影</a>
+  </div>
+</div>
+
+<form method="get" action="index.php" class="card card-pad adv-form">
+  <input type="hidden" name="r" value="movies/search">
+  <div class="form-grid">
+    <div class="field">
+      <label for="title">片名</label>
+      <input class="input" id="title" name="title" value="<?= e($p['title']) ?>" placeholder="输入片名的一部分即可">
+    </div>
+    <div class="field">
+      <label for="cinema_id">影院</label>
+      <select class="select" id="cinema_id" name="cinema_id">
+        <option value="0">全部影院</option>
+        <?php foreach ($cinemas as $c): ?>
+          <option value="<?= (int)$c['id'] ?>" <?= (int)$p['cinema_id'] === (int)$c['id'] ? 'selected' : '' ?>>
+            <?= e(trim(((string)($c['place'] ?? '') !== '' ? $c['place'] . ' · ' : '') . $c['name'])) ?>
+          </option>
+        <?php endforeach; ?>
+      </select>
+    </div>
+    <div class="field">
+      <label for="person_id">观影人</label>
+      <select class="select" id="person_id" name="person_id">
+        <option value="0">全部观影人</option>
+        <?php foreach ($persons as $pp): ?>
+          <option value="<?= (int)$pp['id'] ?>" <?= (int)$p['person_id'] === (int)$pp['id'] ? 'selected' : '' ?>>
+            <?= e((string)$pp['name']) ?>
+          </option>
+        <?php endforeach; ?>
+      </select>
+    </div>
+    <div class="field">
+      <label>日期范围</label>
+      <div class="date-range">
+        <input class="input" type="date" name="date_from" value="<?= e($p['date_from']) ?>">
+        <span class="to">至</span>
+        <input class="input" type="date" name="date_to" value="<?= e($p['date_to']) ?>">
+      </div>
+    </div>
+  </div>
+  <div class="btn-row">
+    <button type="submit" class="btn">搜索</button>
+    <a class="btn btn-ghost" href="<?= e(url('movies/search')) ?>">清空条件</a>
+  </div>
+</form>
+
+<?php if (!$hasCond): ?>
+  <div class="card card-pad empty">
+    <b>先设置一个条件</b>
+    填上片名、挑一家影院、指定某个人，或者框一段日期，再点「搜索」。
+  </div>
+<?php else: ?>
+  <div class="results-head">
+    <h3>搜索结果</h3>
+    <span class="sub">共 <?= count($rows) ?> 部</span>
+  </div>
+  <?php if (!$rows): ?>
+    <div class="card card-pad empty">
+      <b>没有找到符合条件的电影</b>
+      放宽一点条件再试。
+    </div>
+  <?php else: ?>
+    <div class="waterfall">
+      <?php foreach ($rows as $mv): ?>
+        <a class="movie-card" href="<?= e(url('movies/show', ['id' => (int)$mv['id']])) ?>">
+          <span class="card-image">
+            <?php if (!empty($mv['poster_key'])): ?>
+              <img src="<?= e(media_url($mv['poster_key'])) ?>" alt="<?= e($mv['title']) ?>" loading="lazy">
+            <?php else: ?>
+              <span class="placeholder-poster">
+                <span class="ph-icon" aria-hidden="true">影</span>
+                <span class="placeholder-title"><?= e($mv['title']) ?></span>
+              </span>
+            <?php endif; ?>
+          </span>
+          <span class="card-body">
+            <span class="card-title"><?= e($mv['title']) ?></span>
+            <span class="card-meta">
+              <span>📅 <?= e(\App\Movie::formatWatch($mv['starts_at'], $mv['ends_at'] ?? null)) ?></span>
+              <?php if (!empty($mv['cinema_name'])): ?>
+                <span style="color: <?= e((string)($mv['cinema_color'] ?: '#888888')) ?>">🏛️ <?= e($mv['cinema_name']) ?></span>
+              <?php endif; ?>
+            </span>
+            <?php if (!empty($mv['attendee_names'])): ?>
+              <span class="card-viewers"><span class="viewer-tag">👥 <?= e($mv['attendee_names']) ?></span></span>
+            <?php endif; ?>
+          </span>
+        </a>
+      <?php endforeach; ?>
+    </div>
+  <?php endif; ?>
+<?php endif; ?>
@@ -317,8 +317,11 @@ $commentBox = static function (int $reviewId, int $parentId, string $summary) us
          <div class="rv-head">
            <?= $avatarHtml($rv['person_avatar'] ?? null, $rvName) ?>
            <span class="rv-who">
+              <?php /* v11：这里原本还有个写着「我」的徽标（类名与这个区块的首行同名）——
+                       .rv-who 是 flex column，徽标被 align-items:stretch 拉成整行宽，
+                       在星星旁边显出一条丑长的品牌色色带（用户反馈「特别长的条」），已删。
+                       「是不是我」由删除按钮的存在表达，不需要徽标。 */ ?>
              <span class="rv-name"><?= e($rvName) ?></span>
-              <?php if ($rvMine): ?><span class="rv-mine">我</span><?php endif; ?>
              <span class="rv-time"><?= e(substr((string)$rv['created_at'], 0, 16)) ?></span>
            </span>
            <span class="rv-score" title="<?= e(\App\MovieReview::ratingWord($rvRate)) ?>"><?= $starsHtml($rvRate) ?><span class="rv-score-max"><?= $rvRate ?>/10</span></span>
@@ -352,7 +355,6 @@ $commentBox = static function (int $reviewId, int $parentId, string $summary) us
                    <span class="rv-c-body">
                      <span class="rv-c-head">
                        <span class="rv-name"><?= e($cName) ?></span>
-                        <?php if ($cMine): ?><span class="rv-mine">我</span><?php endif; ?>
                        <span class="rv-time"><?= e(substr((string)$c['created_at'], 0, 16)) ?></span>
                        <?php if ($cMine && $canWrite): ?>
                          <form method="post" action="<?= e(url('movies/comment_del')) ?>" class="rv-del"
@@ -379,7 +381,6 @@ $commentBox = static function (int $reviewId, int $parentId, string $summary) us
                      <span class="rv-c-body">
                        <span class="rv-c-head">
                          <span class="rv-name"><?= e($rName) ?></span>
-                          <?php if ($rMine): ?><span class="rv-mine">我</span><?php endif; ?>
                          <span class="rv-time"><?= e(substr((string)$rep['created_at'], 0, 16)) ?></span>
                          <?php if ($rMine && $canWrite): ?>
                            <form method="post" action="<?= e(url('movies/comment_del')) ?>" class="rv-del"
@@ -0,0 +1,125 @@
+<?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 btn-sm" href="<?= e(url('movies')) ?>">返回观影</a>
+  </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>