FamilyBook/templates/home.php

<?php
/**
 * 首页 —— 一块 dashboard。
 *
 * ────────────────────────────────────────────────────────────────
 * v24 第 24 批 用户第 2、3 条（本次重排，用户原话）：
 *
 * 第 2 条：「首页上的功能…一个就是上面的简要信息，这样去写。早上好，中午好，
 *          或者晚上好，某某某今天是几月几日？星期几农历几月几日？如果有节气的
 *          话，或者有重要的节日的话，在这里显示。比如说今天是这个国庆节啊，
 *          今天是端午节，或者是今天是中秋节，或者是今天是芒种，今天是大寒，
 *          今天是小寒，今天是什么纪念日，今天是谁的生日等等。显示在这里
 *          紧接着它的下面显示今天一共有多少条日程，今天有几件代办正在进行。
 *          把天气放在这个信息面板的最右侧，以图标的形式，彩色图标的形式去进行
 *          展示。比如说晴天多云下雨，然后下面显示呃温度、风力等等，在最下面
 *          再显示呃地址。就是比如说他选中的是他在个人设置里面设置的是青岛，
 *          那么就显示山东青岛就是让它放在这个信息面板的最右侧，靠右放。」
 *
 * 第 3 条：「家里的镜框这里呃全部不要了…紧接着直接显示日程和任务日程和任务在
 *          整个页面里面左右，并排放各占一半，日程就显示今天的日程，也就是
 *          日视图那样形式，为了好看高度需要固定。这样的话，鼠标放上去之后，
 *          向下可以滚动，暂时不要出现滚动条太丑了。为了节省上下滚动的这个空间，
 *          我们可以把没有日程的那些时间掐头去尾给它去掉。…同样的和日视图一样，
 *          需要在当前的时间或者是时刻那里显示一条红线。右侧显示任务模块里面的
 *          数据显示当前正在进行当中的所有的任务，除了显示任务的标题之外，
 *          还要显示他的状态。比如说正在进行中待确认等等。除了这之外，
 *          还要显示他所处的看板的名称，就是他现在被放在哪一个看板里面，
 *          就后最下面显示的是往年的今天这个模块。」
 *
 * ⇒ 所以现在首页自上而下只有三块：
 *     ① 信息面板（问候 + 日子标记 + 今日数字 ｜ 最右：彩色天气图标 + 温度风力 + 地址）
 *     ② 日程 / 任务 **左右各半**（各自固定高度、内部滚动、不显滚动条）
 *     ③ 往年的今天
 *
 * ⚠️ 被删掉的（用户明确说"全部不要了"）：
 *     · 「家里的近况」模块卡片墙（moduleCards）—— 那张一片一片的统计卡
 *     · 「未来七天」清单 —— 与左侧「今天日程」重复
 *   两块都不再渲染。服务端仍照旧算 moduleCards（个人设置里那个开关还留着），
 *   但首页不再用 —— 留着它是为了"以后要恢复"时不用动后端。
 *
 * ⚠️ 「家人卡片」「两个月内的生日」早先就已按用户要求撤掉，本批不变。
 */
// 生日事件上用简称，卡片才不会一行塞不下；长名字在详情页里出
$today     = date('Y-m-d');
// 首页要显示哪些模块、什么顺序 —— 用户在「个人设置 → 首页上的模块」里定（每人一份）
$homeMods = array_values(array_filter(
    (array)($homeModules ?? []),
    static fn($k) => \App\Module::exists((string)$k)
));
$todayMarks = $todayMarks ?? ['tags' => [], 'line' => ''];
?>
<?php /* 用户 2026-10-03 第 3 条：
     ① 标题下显示**个人 slogan**（原来撤掉了，现在要回来）；
     ② 右侧那三块统计（与我有关 / 名册总数 / 亲属连线）**去掉**；
     ③ 「我的资料 / 我的家谱」保留，但从文字按钮换成**图标按钮**；
     ④ 「名册」按钮去掉 —— 它与顶部导航条里的「名册」重复。
     ⚠️ 图标用行内 SVG（不引外部字体/图片），与观影设置下拉同一套做法。 */ ?>
<section class="hero">
  <img class="hero-logo" src="<?= e(asset('/assets/icons/icon-192.png')) ?>" alt="">
  <div class="hero-main">
    <h1><?= e(\App\Auth::homeTitle()) ?></h1>
    <?php $heroSlogan = trim((string)($mySlogan ?? '')) !== ''
        ? (string)$mySlogan
        : trim((string)($family['motto'] ?? '')); ?>
    <?php if ($heroSlogan !== ''): ?>
      <p class="hero-slogan"><?= e($heroSlogan) ?></p>
    <?php endif; ?>
  </div>
  <?php /* ⚠️ 这两个链接必须带上真实的 person id：曾经 layout.php 里写
           `$me = Auth::check()` 把模板里的 $me 覆盖成布尔值，链接就变成 id=0
           （"补充亲属关系"点进去是空白页）。所以这里显式用 $meId。 */ ?>
  <div class="hero-actions">
    <a class="icon-btn" href="<?= e(url('people/show', ['id' => (int)$meId])) ?>"
       title="我的资料" aria-label="我的资料">
      <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" fill="none"
           stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
        <circle cx="10" cy="7" r="3.4"/><path d="M3.6 17c0-3.3 2.9-5.4 6.4-5.4s6.4 2.1 6.4 5.4"/>
      </svg>
    </a>
    <a class="icon-btn" href="<?= e(url('kin')) ?>"
       title="我的家谱" aria-label="我的家谱">
      <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" fill="none"
          stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round">
        <rect x="7.4" y="2.2" width="5.2" height="4.2" rx="1"/>
        <rect x="2.2" y="13.6" width="5.2" height="4.2" rx="1"/>
        <rect x="12.6" y="13.6" width="5.2" height="4.2" rx="1"/>
        <path d="M10 6.4v3.4M4.8 13.6v-1.9h10.4v1.9M4.8 11.7h10.4"/>
      </svg>
    </a>
  </div>
</section>

<?php /* ==================== ① 信息面板（用户第 2 条）====================
   左：问候 + 姓名 → 日期/星期/农历 → 日子标记（节气/节日/纪念日/生日）→ 今日数字
   右：**彩色**天气图标 + 温度 + 风力 → 地址
   ⚠️ 天气靠右：用户原话「把天气放在这个信息面板的最右侧…靠右放」。
      用 flex + margin-left:auto 把它顶到右端（窄屏会自动折到下一行，见 CSS）。 */ ?>
<section class="section">
  <div class="card card-pad home-brief">
    <div class="hb-left">
      <?php /* ① 问候（早上好/中午好…）+ 我的称呼 —— 问候语里已经带了名字，
               但用户明确要求「早上好，某某某」这样的形式，所以名字单独再强调一次。
               （Home::greeting 本身会拼 "早上好，老杨，今天有 3 件事"，
                 这里只用它的"时段"部分，尾巴换成面板里更该看的信息。） */ ?>
      <?php
      $hbPart = '你好';
      $hbH = (int)date('G');
      if ($hbH < 5) { $hbPart = '夜深了'; }
      elseif ($hbH < 11) { $hbPart = '早上好'; }
      elseif ($hbH < 13) { $hbPart = '中午好'; }
      elseif ($hbH < 18) { $hbPart = '下午好'; }
      else { $hbPart = '晚上好'; }
      ?>
      <div class="hb-hello">
        <b><?= e($hbPart) ?></b><?php if (trim((string)($meName ?? '')) !== ''): ?>，<?= e((string)$meName) ?><?php endif; ?>
      </div>
      <div class="hb-date">
        <span class="hb-d"><?= e((string)($todayLabel ?? date('n 月 j 日'))) ?></span>
        <span class="hb-w"><?= e((string)($weekday ?? '')) ?></span>
        <?php if (($lunarShort ?? '') !== ''): ?>
          <span class="hb-lunar" title="<?= e((string)($lunarLine ?? '')) ?>"><?= e((string)$lunarShort) ?></span>
        <?php endif; ?>
      </div>
      <?php if (!empty($todayMarks['tags'])): ?>
        <div class="hb-marks">
          <?php foreach ($todayMarks['tags'] as $mk): ?>
            <span class="hb-mark is-<?= e((string)$mk['kind']) ?>"><?= e((string)$mk['word']) ?></span>
          <?php endforeach; ?>
        </div>
      <?php endif; ?>
      <div class="hb-stats">
        <a class="hbs" href="<?= e(url('calendar')) ?>">
          <b><?= count($todayEvents ?? []) ?></b> 条日程（今天）
        </a>
        <a class="hbs" href="<?= e(url('tasks')) ?>">
          <b><?= (int)($stat7['todos'] ?? 0) ?></b> 件待办
        </a>
        <?php if ((int)($stat7['overdue'] ?? 0) > 0): ?>
          <a class="hbs is-late" href="<?= e(url('tasks')) ?>">
            <b><?= (int)$stat7['overdue'] ?></b> 件逾期
          </a>
        <?php endif; ?>
      </div>
    </div>

    <?php if (!empty($weather)): ?>
      <div class="hb-weather is-<?= e((string)($weather['tone'] ?? 'cloud')) ?>">
        <span class="hbw-icon" aria-hidden="true"><?= e((string)($weather['icon'] ?? '')) ?></span>
        <div class="hbw-main">
          <div class="hbw-temp"><?= e((string)($weather['temp'] ?? '')) ?></div>
          <div class="hbw-text"><?= e((string)($weather['text'] ?? '')) ?></div>
          <?php if (($weather['wind'] ?? '') !== ''): ?>
            <div class="hbw-wind">
              <?= $weather['wdir'] !== '' ? e((string)$weather['wdir']) . ' ' : '' ?><?= e((string)$weather['wind']) ?>
            </div>
          <?php endif; ?>
        </div>
        <?php if (($weather['place'] ?? '') !== ''): ?>
          <div class="hbw-place"><?= e((string)$weather['place']) ?></div>
        <?php endif; ?>
      </div>
    <?php endif; ?>
  </div>
</section>

<?php /* ==================== ② 日程 / 任务 左右各半（用户第 3 条）====================
   ⚠️ 高度**固定**（CSS 里给 .hd-pane-body 一个 max-height）：
      用户原话「为了好看高度需要固定。这样的话，鼠标放上去之后，向下可以滚动，
      暂时不要出现滚动条太丑了」——
      所以是 `overflow-y:auto` + 隐藏滚动条（`scrollbar-width:none` 等三套写法）。
   ⚠️ 日程掐头去尾：见下面 $hr 的算法 —— 只画"第一个日程前一小时"到"最后一个日程后一小时"，
      中间空档不裁（裁了会让人以为日程连在一起）。全天日程永远在顶上。 */ ?>
<?php
// ---- 日程时间轴：掐头去尾（用户第 3 条"没有日程的那些时间掐头去尾给它去掉"）----
$allDay  = [];
$timed   = [];
foreach (($todayEvents ?? []) as $ev) {
    if ((string)($ev['time'] ?? '') === '') { $allDay[] = $ev; }
    else { $timed[] = $ev; }
}
$startH = 0; $endH = 24;
if ($timed) {
    $mins = array_map(static function (array $e): int {
        $p = explode(':', (string)$e['time']);
        return ((int)($p[0] ?? 0)) * 60 + (int)($p[1] ?? 0);
    }, $timed);
    // 前后各留一小时：紧了会让人以为"到点就结束了"，松了又浪费高度
    $startH = max(0, intdiv(min($mins), 60) - 1);
    $endH   = min(24, intdiv(max($mins), 60) + 2);   // +2 = 跨过那一小时再收尾
    if ($endH <= $startH) { $endH = min(24, $startH + 2); }
}
$nowH   = (int)date('G');
$nowPos = ($nowH - $startH) / max(1, ($endH - $startH));   // 红线位置（0~1）
$showNow = $nowPos >= 0 && $nowPos <= 1;
?>
<section class="section">
  <div class="home-duo">
    <?php /* ---- 左：今天的日程（日视图形式）---- */ ?>
    <div class="card card-pad hd-pane" id="homeAgenda">
      <div class="hd-pane-head">
        <h2 class="cinema-h2">今天的日程</h2>
        <a class="btn btn-ghost btn-sm" href="<?= e(url('calendar')) ?>">看整月</a>
      </div>
      <div class="hd-pane-body">
        <?php if (!$todayEvents): ?>
          <p class="empty-hint">今天没有安排。</p>
        <?php else: ?>
          <?php if ($allDay): ?>
            <div class="ag-allday">
              <?php foreach ($allDay as $ev): ?>
                <a class="ag-allday-item" href="<?= e((string)$ev['href']) ?>">
                  <span class="dash-dot" style="background:<?= e((string)$ev['color']) ?>;"></span>
                  <span class="ag-ad-t">全天</span>
                  <span class="ag-ad-w"><?= e((string)$ev['title']) ?></span>
                  <span class="dash-cal" style="background:<?= e((string)$ev['color']) ?>;"><?= e((string)$ev['calname']) ?></span>
                </a>
              <?php endforeach; ?>
            </div>
          <?php endif; ?>
          <div class="ag-grid">
            <?php for ($h = $startH; $h < $endH; $h++): ?>
              <div class="ag-row">
                <span class="ag-hour"><?= sprintf('%02d:00', $h) ?></span>
                <span class="ag-line"></span>
              </div>
            <?php endfor; ?>
            <?php /* 当前时刻红线：用户原话「需要在当前的时间或者是时刻那里显示一条红线」 */ ?>
            <?php if ($showNow): ?>
              <div class="ag-now" style="top: <?= number_format($nowPos * 100, 2) ?>%">
                <span class="ag-now-dot"></span>
              </div>
            <?php endif; ?>
            <?php /* 日程块：按"相对第一个刻度的小时数"定位（与日视图同一套比例）---- */ ?>
            <?php foreach ($timed as $ev): ?>
              <?php
              $p = explode(':', (string)$ev['time']);
              $evMin = ((int)($p[0] ?? 0)) * 60 + (int)($p[1] ?? 0);
              $topPct = (($evMin / 60) - $startH) / max(1, ($endH - $startH)) * 100;
              $topPct = max(0, min(96, $topPct));
              ?>
              <a class="ag-ev" href="<?= e((string)$ev['href']) ?>"
                 style="top: <?= number_format($topPct, 2) ?>%; border-left-color: <?= e((string)$ev['color']) ?>;">
                <span class="ag-ev-t"><?= e((string)$ev['time']) ?></span>
                <span class="ag-ev-w"><?= e((string)$ev['title']) ?></span>
                <span class="dash-cal" style="background:<?= e((string)$ev['color']) ?>;"><?= e((string)$ev['calname']) ?></span>
              </a>
            <?php endforeach; ?>
          </div>
        <?php endif; ?>
      </div>
    </div>

    <?php /* ---- 右：进行中的任务（标题 + 状态 + 看板名）---- */ ?>
    <div class="card card-pad hd-pane" id="homeTasks">
      <div class="hd-pane-head">
        <h2 class="cinema-h2">手头在做</h2>
        <a class="btn btn-ghost btn-sm" href="<?= e(url('tasks')) ?>">任务看板</a>
      </div>
      <div class="hd-pane-body">
        <?php if (!$tasks): ?>
          <p class="empty-hint">没有进行中的任务。</p>
        <?php else: ?>
          <ul class="dash-list tk-list">
            <?php foreach ($tasks as $t): ?>
              <?php $late = \App\Task::isOverdue($t['due_at'] ?? null); ?>
              <li class="dash-row tk-row">
                <span class="dash-dot" style="background: <?= e($late ? 'var(--red)' : 'var(--brand)') ?>;"></span>
                <a class="dash-what" href="<?= e(url('tasks/show', ['id' => (int)$t['id']])) ?>">
                  <?= e((string)$t['title']) ?>
                </a>
                <?php /* 用户第 3 条：「除了显示任务的标题之外，还要显示他的状态。
                         比如说正在进行中待确认等等。」 */ ?>
                <span class="kb-st is-<?= e((string)($t['status'] ?? 'todo')) ?> is-static">
                  <?= e(\App\Task::statusWord((string)($t['status'] ?? 'todo'))) ?>
                </span>
                <?php /* 用户第 3 条：「还要显示他所处的看板的名称，就是他现在被放在哪一个看板里面」 */ ?>
                <?php if (trim((string)($t['board_name'] ?? '')) !== ''): ?>
                  <span class="tk-board"><?= e((string)$t['board_name']) ?></span>
                <?php endif; ?>
                <?php if ((int)($t['child_total'] ?? 0) > 0): ?>
                  <span class="dash-tag"><?= (int)$t['child_done'] ?>/<?= (int)$t['child_total'] ?></span>
                <?php endif; ?>
                <?php if (($t['due_at'] ?? '') !== ''): ?>
                  <span class="tk-due"><?= e(\App\Task::dueWord($t['due_at'] ?? null)) ?></span>
                <?php endif; ?>
              </li>
            <?php endforeach; ?>
          </ul>
        <?php endif; ?>
      </div>
    </div>
  </div>
</section>

<?php /* ==================== ③ 往年的今天 ==================== */ ?>
<section class="section">
  <div class="page-head" style="margin-bottom:12px">
    <?php /* v24 第 19 条：只认「往年的今天」，不再退回同月 —— 见 home_memories() 的说明。 */ ?>
    <h1 style="font-size:15px">
      往年的今天
      <span class="sub"><?= e(date('n 月 j 日')) ?></span>
    </h1>
  </div>
  <?php if (empty($memories['rows'])): ?>
    <div class="card card-pad empty">
      <b>往年的这一天还没有记录</b>
      日子还长，等有了第一次，明年这时候就会自己冒出来。
    </div>
  <?php else: ?>
    <div class="card card-pad">
      <ul class="dash-list">
        <?php foreach ($memories['rows'] as $mm): ?>
          <li class="dash-row">
            <span class="dash-dot" style="background: <?= $mm['kind'] === 'trip' ? '#3F7D5A' : '#7A4E8C' ?>;"></span>
            <span class="dash-when"><?= (int)$mm['years_ago'] ?> 年前</span>
            <a class="dash-what" href="<?= e((string)$mm['href']) ?>">
              <?= $mm['kind'] === 'trip' ? '🧳 ' : '🎬 ' ?><?= e((string)$mm['title']) ?>
            </a>
            <span class="dash-tag"><?= e(substr((string)$mm['starts_at'], 0, 10)) ?></span>
          </li>
        <?php endforeach; ?>
      </ul>
    </div>
  <?php endif; ?>
</section>