FamilyBook/templates/movies/index.php

<?php
/**
 * 观影瀑布流（v9，MovieLog 同款海报墙）。
 *
 * 卡片 = 海报（2:3，无海报给渐变占位）+ 片名 + 日期/影院（主题色）/评分均分 + 同行人头像标签。
 * 顶部搜索栏：关键词搜片名 / 影院 / 同行人（Movie::all 的 LIKE 查询）。
 */
$canWrite = \App\Auth::canWrite();
$fmtNum = static function ($v): string {
    if ($v === null) {
        return '';
    }
    return rtrim(rtrim(number_format((float)$v, 1, '.', ''), '0'), '.');
};
?>
<div class="page-head">
  <h1>观影记录</h1>
  <span class="sub">
    <?php if ($keyword !== ''): ?>
      找到 <?= (int)$total ?> 部匹配「<b><?= e($keyword) ?></b>」的电影
    <?php else: ?>
      共 <?= (int)$total ?> 部 · 按观影时间排序
    <?php endif; ?>
  </span>
  <div class="actions">
    <?php if ($canWrite): ?>
      <?php /* 🔴 v37 用户第 6 条第 4 点：新增改成**弹框**（不再跳到单独的页面）。
             ⚠️ 仍然保留 href —— JS 没跑时它就是"跳到 movies/new"的普通链接
                （那一页会把同一个弹框自动打开），所以**无 JS 也能用**。 */ ?>
      <button class="btn" type="button" id="mvAddBtn" aria-haspopup="dialog" aria-expanded="false"
              data-href="<?= e(url('movies/new')) ?>">记一场电影</button>
    <?php endif; ?>
    <?php /* 「设置」下拉：影院管理 / 高级搜索 / 统计 / 年度报告。
             ⚠️ 片段必须放在 actions 的**最后**：它靠 margin-left:auto 贴右，
                放最后才能保证「所有页面都排在最右侧」（用户 2026-10-01 要求）。 */ ?>
    <?php $setCurrent = 'list'; $setCanWrite = $canWrite; require __DIR__ . '/_settings_menu.php'; ?>
  </div>
</div>

<form method="get" action="index.php" class="search-bar">
  <input type="hidden" name="r" value="movies">
  <input type="text" name="keyword" value="<?= e($keyword) ?>" placeholder="搜索片名、影院、观影人…" aria-label="搜索">
  <button type="submit">搜索</button>
  <?php if ($keyword !== ''): ?>
    <a class="search-clear" href="<?= e(url('movies')) ?>">清除</a>
  <?php endif; ?>
</form>

<?php if ($total === 0): ?>
  <div class="card card-pad empty">
    <b><?= $keyword !== '' ? '没有找到匹配的电影' : '还没有观影记录' ?></b>
    <?= $keyword !== '' ? '换个关键词试试。' : '一家人一起看过的电影，都会以海报墙的方式排在这里。' ?>
  </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 class="meta-date">📅 <?= e(\App\Movie::formatWatch($mv['starts_at'], $mv['ends_at'])) ?></span>
            <?php if (!empty($mv['cinema_name'])): ?>
              <span class="meta-cinema" style="color: <?= e((string)($mv['cinema_color'] ?: '#888888')) ?>;">🏛️ <?= e($mv['cinema_name']) ?></span>
            <?php endif; ?>
            <?php if (!empty($mv['review_count'])): ?>
              <span class="meta-rating" title="共 <?= (int)$mv['review_count'] ?> 条评价">⭐ <?= e($fmtNum($mv['review_avg'])) ?><span class="meta-rating-max">/10</span></span>
            <?php endif; ?>
          </span>
          <?php if (!empty($mv['attendees'])): ?>
            <?php /* 每人一个标签（头像 + 自己的底色 + 我对他的称呼）。
                    ⚠️ 整张卡片已经是 <a>，这里只能出 <span> —— a 套 a 会把外层链接切开。 */ ?>
            <span class="card-viewers">
              <?php foreach ($mv['attendees'] as $a): ?><?= person_chip($a) ?><?php endforeach; ?>
            </span>
          <?php endif; ?>
        </span>
      </a>
    <?php endforeach; ?>
  </div>
<?php endif; ?>

<?php /* 🔴 v37：把"记一场电影"的弹框内嵌进列表页（同一份模板，避免两处维护）。
   ⚠️ 只在**能写**的账号上渲染：表单 action 是 movies/create，只读账号点了也是 403。 */
if ($canWrite) {
    $mvModalOnly = true;                    // 不输出 page-head / 设置菜单
    $m = null; $errors = [];                // 新增态
    $people  = $peopleForModal ?? [];
    $cinemas = $cinemasForModal ?? [];
    require __DIR__ . '/form.php';
} ?>

<script>
(function () {
  /* ---- "记一场电影"弹框：打开 / 关闭 + 提交后刷新列表 ----
     用户原话（第 6 条第 4 点）：「新增一部电影时，也弹出一个框来输入所有信息。
     填写完之后，再刷新观影页面就可以了。」
     ⇒ 提交**照旧走原生表单**（服务端 302 回详情页），这里不拦截、不做 AJAX ——
       用户要的是"填完刷新"，跳详情页正合直觉，而且**零新增失败模式**。 */
  var modal = document.getElementById('mvAddCard');
  if (!modal) { return; }
  var btn  = document.getElementById('mvAddBtn');
  var x    = document.getElementById('mvAddX');
  var c1   = document.getElementById('mvAddCancel');

  function open() {
    modal.hidden = false;
    if (btn) { btn.setAttribute('aria-expanded', 'true'); }
    var t = document.getElementById('title');
    if (t) { t.focus(); }
  }
  function close() {
    modal.hidden = true;
    if (btn) { btn.setAttribute('aria-expanded', 'false'); }
  }
  if (btn) { btn.addEventListener('click', open); }
  if (x)   { x.addEventListener('click', close); }
  if (c1)  { c1.addEventListener('click', close); }
  /* 点遮罩关、面板内不关；Esc 关 —— 与站内其它浮层同一套行为。
     🔴🔴 v38：**antd 的日期面板自己也要吃 Esc**（按一次收日期面板）。
        两个处理器都挂在 document 上，一次 Esc 会把"日期面板"和"弹框"**一起**关掉 ——
        用户想关日期面板，结果整个弹框没了（探针当场抓到的）。
        ⇒ 判据加一条：**antd 面板开着时不吃 Esc**，让 antd 先收它自己的面板。 */
  modal.addEventListener('click', function (e) { if (e.target === modal) { close(); } });
  function antdPanelOpen() {
    var d = document.querySelector('.ant-picker-dropdown');
    return !!(d && !d.classList.contains('ant-picker-dropdown-hidden'));
  }
  document.addEventListener('keydown', function (e) {
    if (e.key !== 'Escape' || modal.hidden) { return; }
    if (antdPanelOpen()) { return; }   // 让 antd 先关它自己的面板
    close();
  });
  <?php if (!empty($openModal)): ?>open();<?php endif; ?>
})();
</script>