FamilyBook/templates/layout.php

<?php
// ⚠️ 「系统设置」**不在**顶栏里（用户明确要求）：它已经收进右上角头像下拉菜单里了，
//    顶栏留「首页 / 家谱 / 名册 / 观影」四个日常入口，别再把管理入口顶出来。
// ⚠️ v11：「影院」也**不在**顶栏里了（用户明确要求）—— 影院是观影模块的一部分，
//    统一从观影列表页右侧的「设置」按钮进（那里还挂着高级搜索/统计/年度报告）。
//    别再往 $navItems 里加子功能入口，顶栏只放"模块"这一级。
// ⚠️ v14 起导航条**不再写死**：模块清单在 App\Module::LIST 里（加一个模块只改那一处），
//    显示哪些、什么顺序由**每个人自己**的 user_settings('nav_modules') 决定
//    （用户第 10 条：允许设置哪些模块出现在导航条上，拖动排序）。
//    App\Module::navFor() 内部做了两道兜底（剔除已不存在的模块、补上新装的模块），
//    这里直接拿结果用，不要再自己过滤一遍。
$navKeys  = \App\Module::navFor((int)\App\Auth::personId());
$navItems = [];
foreach ($navKeys as $k) {
    $navItems[$k] = [\App\Module::name($k), \App\Module::route($k)];
}
// 本页属于哪个模块 → 决定主题色（用户第 11 条：每个模块一个主题色）
$moduleKey = \App\Module::ofPage((string)$pageKey);
if ($moduleKey === '') {
    $moduleKey = 'home';
}
$themeVars = \App\Module::cssVars($moduleKey, (int)\App\Auth::familyId());
// ⚠️ 变量名不要叫 $me：layout 是在 extract($data) **之后**被 require 的，
//    这里再赋值会把页面传进来的 $me（当前登录者的完整记录）覆盖掉。
//    home.php 用 $me 画「补充亲属关系」链接，被覆盖成 true 之后
//    链接就变成 people/show&id=0，还顺带在页首打出一条 Warning。
//    改名前请先确认所有模板都没有依赖这个布尔值。
$isLoggedIn = \App\Auth::check();
?>
<!DOCTYPE html>
<html lang="zh-CN" class="no-js">
<head>
<?php /* v24 第 12 批 #2：解决「打开页面先闪一下原生输入框，然后才变成 Semi 控件」。
       做法是经典的 **no-js / js 二态**：
         · 服务端先渲染 class="no-js"（此时原生控件可见 = 无 JS 也能用）；
         · 下面这段内联脚本**在 <head> 里立即把 class 换成 js** ——
           它在 CSS 生效前、任何渲染之前就跑了，所以浏览器**根本没机会**画出原生框；
         · CSS 里 `.js .dt-input .dt-native { visibility:hidden }` 先把原生藏住
           （用 visibility 而不是 display:none：保留占位高度，避免升级瞬间布局跳动）；
         · app.js 的 Semi 就绪后加 `.is-semi` 把 Semi 显示出来（原生继续藏着）。
       这样"闪烁"从**结构上**消失，而不是靠调加载顺序去掩盖。 */ ?>
<script>document.documentElement.className =
  document.documentElement.className.replace('no-js', 'js');</script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title><?= e($pageTitle) ?> · 家书</title>
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="manifest" href="/site.webmanifest">
<meta name="theme-color" content="#A84A28">
<link rel="stylesheet" href="<?= e(asset('/assets/css/app.css')) ?>">
<?php /* v24 第 9 批 #9：Semi Design DatePicker 懒加载清单（用户点名 semi.design）。
       这里只登记带版本号的资源地址，**不加载** —— app.js 只有在页面上真出现
       .dt-input（templates/_datetime.php）时才去下这 4 个文件（合计约 4 MB，
       绝不能让没有日期控件的页面白拉）。 */ ?>
<meta name="fb-semi" content="<?= e(json_encode([
    'css'   => asset('/assets/vendor/semi/semi.min.css'),
    'react' => asset('/assets/vendor/semi/react.min.js'),
    'dom'   => asset('/assets/vendor/semi/react-dom.min.js'),
    'ui'    => asset('/assets/vendor/semi/semi-ui.min.js'),
], JSON_UNESCAPED_UNICODE | JSON_HEX_APOS | JSON_HEX_QUOT)) ?>">
<?php /* v24 第 11 批 #5：Cropper.js（裁剪）也是**按需加载** ——
       只有页面上真有 input[type=file][data-crop-ratio] 时才去拉（见 app.js）。
       同样在这里登记带版本号的地址，绝不在没有裁剪的页面白拉。 */ ?>
<meta name="fb-cropper" content="<?= e(json_encode([
    'css' => asset('/assets/vendor/cropper/cropper.min.css'),
    'js'  => asset('/assets/vendor/cropper/cropper.min.js'),
], JSON_UNESCAPED_UNICODE | JSON_HEX_APOS | JSON_HEX_QUOT)) ?>">
<?php /* 🔴🔴 v38（用户 2026-10-10）：「我终于找到了一个我比较认可的日期选择插件
       https://ant-design.antgroup.com/components/date-picker-cn 现在观影这个模块
       进行测试吧…等这个模块测试完没问题了，再更新到其他的模块。」
       ⇒ Ant Design 的 RangePicker **只在观影模块试点**（其余页面继续用自建下拉）。
       同样按需加载：只有页面真出现 `[data-dt-antd]` 才去拉这三个文件
       （antd.min.js 单文件约 1.5 MB，绝不能让用不到的页面白拉）。
       ⚠️ 必须同时引 `reset.css` —— antd 的组件依赖它做 box-sizing/边距归一，
          不引会让面板里的日期格子错位（它是 antd 官方文档里指定的用法）。
       ⚠️ `dayjs` 也要引：antd 5 的值类型是 dayjs 对象，UMD 版从全局 `dayjs` 取。 */ ?>
<meta name="fb-antd" content="<?= e(json_encode([
    'css'   => asset('/assets/vendor/antd/reset.css'),
    'antd'  => asset('/assets/vendor/antd/antd.min.js'),
    'dayjs' => asset('/assets/vendor/antd/dayjs.min.js'),
    /* ⚠️ antd 的 UMD **要求全局有 React / ReactDOM**（缺一个就直接挂不出来 ——
       实测报错是 `Cannot read properties of undefined (reading 'createContext')`）。
       项目里已经有一套 React 18.3.1（原本给 Semi 用的），**直接复用同一份**：
       同一个 UMD 文件、同版本，先后加载只会重复赋值、不会冲突。
       ⇒ 主版本要动的话，这两处（fb-semi / fb-antd）必须一起动。 */
    'react' => asset('/assets/vendor/semi/react.min.js'),
    'dom'   => asset('/assets/vendor/semi/react-dom.min.js'),
], JSON_UNESCAPED_UNICODE | JSON_HEX_APOS | JSON_HEX_QUOT)) ?>">
</head>
<?php /* 主题色：把 --brand / --brand-2 / --brand-ink 三个变量在 <body> 上换成本模块的色，
         下面所有用到品牌色的地方（按钮、链接、页头高亮…）自动跟着变。
         ⚠️ 只覆盖这三个变量，**不碰** --paper / --ink 这些纸墨底色 ——
            模块色是用来"分区"的，把整页背景也换了就不是家书了。 */ ?>
<body class="mod-<?= e($moduleKey) ?>"
      data-media-base="media.php?k="
      style="--brand: <?= e($themeVars['brand']) ?>; --brand-2: <?= e($themeVars['brand2']) ?>; --brand-ink: <?= e($themeVars['ink']) ?>;">

<?php if ($isLoggedIn): ?>
<header class="topbar">
  <div class="topbar-inner">
    <a class="brand" href="<?= e(url('home')) ?>">
      <img src="<?= e(asset('/assets/icons/icon-96.png')) ?>" alt="">
      <span>家书</span>
    </a>
    <nav class="nav">
      <?php foreach ($navItems as $key => list($label, $route)): ?>
        <?php /* 高亮按「本页属于哪个模块」判，而不是 pageKey 全等 ——
                 子页（观影里的影院管理/统计/年度报告）也要让「观影」亮着。 */ ?>
        <a class="<?= $moduleKey === $key ? 'on' : '' ?>" href="<?= e(url($route)) ?>"><?= e($label) ?></a>
      <?php endforeach; ?>
    </nav>
    <div class="topbar-right">
      <?php /* 🔴 v32 第 3 条：浏览器提醒的**开关**（小铃铛）。
               用户原话：「…则需要在 9:50 时浏览器中发提醒通知。」
               ⚠️ 浏览器**不会**允许"页面加载时自动申请通知权限"（Chrome 会直接静默拒绝，
                  并把域名记进"滥用"名单），所以权限必须由用户**点一下**才要。
                  ⇒ 这里放一个按钮，由 assets/js/notify.js 绑定。
               ⚠️ 已经授权时（或浏览器不支持 Notification 时）按钮自动隐藏 ——
                  见 notify.js 的 paint()。所以未授权的人才会看到它。 */ ?>
      <button type="button" class="btn btn-ghost btn-icon fb-notify-enable" hidden
              title="开启浏览器提醒" aria-label="开启浏览器提醒">
        <svg viewBox="0 0 16 16" width="15" height="15" aria-hidden="true" fill="none"
             stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
          <path d="M4 7a4 4 0 0 1 8 0v3l1 2H3l1-2z"/>
          <path d="M6.5 12.5a1.6 1.6 0 0 0 3 0"/>
        </svg>
      </button>
      <?php /* 姓名 + 头像 = 一个下拉菜单，而不是「点名字改资料」＋旁边两个裸链接。
               裸链接在窄屏只能靠 display:none 藏起来（一藏入口就没了），
               收进菜单之后同一个入口在手机上也点得到。
               用 <details> 实现：不需要 JS 就能展开/收起，app.js 只额外补
               "点外面"和"Esc"两件事。 */ ?>
      <details class="menu who-menu">
        <summary class="who" title="我的">
          <img src="<?= e(avatar_url($_SESSION['avatar'] ?? null)) ?>" alt="">
          <span class="who-name"><?= e(\App\Auth::name()) ?></span>
          <?php if (\App\Auth::isGuest()): ?><span class="badge">访客</span><?php endif; ?>
          <i class="caret" aria-hidden="true"></i>
        </summary>
        <div class="menu-list">
          <?php
          /* 🔴 v30 第 5 条：「引入通知模块，这个模块，不在导航显示，在个人头像点击那里显示，
               放在个人设置前面，名字：通知消息。」
               ⇒ 它排在**个人设置之前**，且带一个未读角标（有几条没看）。
               ⚠️ 这是通知唯一的入口 —— 顶栏不渲染它（它不在 Module::LIST，
                  见 app/Notification.php 头部的第 ①条）。 */
          $fbUnread = \App\Notification::unreadCount((int)\App\Auth::personId());
          ?>
          <a href="<?= e(url('notifications')) ?>">
            通知消息
            <?php if ($fbUnread > 0): ?>
              <span class="menu-badge"><?= (int)$fbUnread ?></span>
            <?php endif; ?>
          </a>
          <a href="<?= e(url('settings/me')) ?>">个人设置</a>
          <?php if (\App\Auth::isAdmin()): ?>
            <a href="<?= e(url('settings')) ?>">系统设置</a>
          <?php endif; ?>
          <a href="<?= e(url('auth/password')) ?>">修改密码</a>
          <a class="menu-exit" href="<?= e(url('auth/logout', ['_csrf' => csrf_token()])) ?>">退出登录</a>
        </div>
      </details>
    </div>
  </div>
</header>
<?php endif; ?>

<main class="<?= in_array($pageKey, ['install', 'login'], true) ? 'container-narrow' : 'container' ?>">

  <?php foreach (take_flash() as $f): ?>
    <div class="flash">
      <div class="flash-item <?= $f['type'] === 'err' ? 'err' : '' ?>"><?= e($f['message']) ?></div>
    </div>
  <?php endforeach; ?>

  <?php require $tplFile; ?>

</main>

<?php /* 全局附件预览层（v24 第 3 条）：图片 / 视频 / PDF 都在本页这一层里看，
        右上角恒有下载按钮。内容由 assets/js/preview.js 按 data-prev 现填。 */ ?>
<div class="pv" id="pv" role="dialog" aria-modal="true" aria-hidden="true" aria-label="附件预览" hidden>
  <div class="pv-head">
    <span class="pv-name"></span>
    <span class="pv-meta"></span>
    <a class="pv-dl" href="#">下载</a>
    <button type="button" class="pv-close" aria-label="关闭">✕</button>
  </div>
  <div class="pv-stage"></div>
  <?php /* v24 第 19 批 用户第 6 条：左右箭头，直接看下一张。
           ⚠️ 箭头用 `hidden` 属性控显隐（见 preview.js 的 syncArrows）——
              只有一个可预览项时不该出现（点了没反应比没有更糟）。
              与 .pv 一样，自己声明了 display 的元素要藏就得补 [hidden] 规则。 */ ?>
  <button type="button" class="pv-nav pv-prev" aria-label="上一张" hidden>‹</button>
  <button type="button" class="pv-nav pv-next" aria-label="下一张" hidden>›</button>
</div>

<script src="<?= e(asset('/assets/js/app.js')) ?>"></script>
<?php /* 🔴 v32 第 3 条：浏览器通知（站内消息 + 日程到期提醒）。
   ⚠️ **只在已登录时加载** —— 登录页轮询会一直 302 去登录页，白跑。
      同理也不在"免登录的导航展示页"上跑（那页没有会话）。
   ⚠️ 里面**不含**任何权限申请：权限必须由用户点小铃铛才要（见 notify.js 头部第 ①条）。 */ ?>
<?php if (\App\Auth::check()): ?>
<script>
window.FB_NOTIFY = {
  poll: <?= json_encode(url('notifications/poll')) ?>,
  list: <?= json_encode(url('notifications')) ?>,
  icon: <?= json_encode(asset('/assets/icons/icon-96.png')) ?>,
  canPush: <?= json_encode(\App\Auth::canWrite()) ?>
};
</script>
<script src="<?= e(asset('/assets/js/notify.js')) ?>" defer></script>
<?php endif; ?>
<?php /* v24 第 20 批：选人组件脚本改成**按需加载**（页面上真有 `.pp` 才拉）。
   ⚠️ 理由与 Cropper.js 同一套：`person_picker.js` 只在放选人组件的页面才有用，
      而它并不小；每页都无条件带一份，等于让"没有选人组件"的页面白付流量。
   ⚠️ 判据用 `document.querySelector('.pp[data-pp]')`（组件根节点的真实标记），
      **不是**含糊地找 "pp" 这两个字母（页面里 `pp` 太容易撞：分页、其它类名…）。
   ⚠️ DOM 必须已经解析到组件才判断 → 脚本放在 `</body>` 前（本文件本来就是），
      所以这里能直接查；不需要 DOMContentLoaded 包一层。
   ⚠️ 无 JS 兜底不受影响：组件的 `<noscript>` 块本来就是给"脚本没跑"准备的。 */ ?>
<script>
(function () {
  if (!document.querySelector('.pp[data-pp]')) { return; }
  var s = document.createElement('script');
  s.src = <?= json_encode(asset('/assets/js/person_picker.js')) ?>;
  s.defer = true;
  document.head.appendChild(s);
})();
</script>
<?php /* v27：笔记的分块编辑器同样**按需加载**（页面上真有 `#noteForm` 才拉）。
      理由与 person_picker.js 完全同一套：它只在写笔记那一页有用，
      每页都带一份等于让别的页面白付流量。判据用表单的真实 id（不是含糊找 "note"）。 */ ?>
<script>
(function () {
  if (!document.getElementById('noteForm')) { return; }
  var s = document.createElement('script');
  s.src = <?= json_encode(asset('/assets/js/note_editor.js')) ?>;
  s.defer = true;
  document.head.appendChild(s);
})();
</script>
<script src="<?= e(asset('/assets/js/filter.js')) ?>"></script>
<script src="<?= e(asset('/assets/js/preview.js')) ?>"></script>
</body>
</html>