laoyang/FamilyBook
1
0
Fork 0
Code Issues 29 Pull Requests Actions Packages Projects Releases Wiki Activity

v62：纪念日列表修正 / 分类图标与设置菜单 / 首页卡片体系

Browse Source 
- 纪念日列表：display:flex 从 td 移到内层 div（写在 td 上会破坏表格列算法，
  表现为关联人列与其它列高度不一致）；行内列序按表头对齐；
  改完再点「新建」不再带出上次修改的数据；文案改为「与我相关」「来自名册」；
  别人记的、把我挂成关联人的条目一并显示（split() 返回 hiddenIds，
  路由层据此过滤「接下来的日子」，与两张表同一套可见性）
- 分类图标：新增 app/AnnivIcon.php（17 个行内 SVG 图标 + 同 key 的 emoji
  供日历纯文本处使用，内网无 CDN 不用 FontAwesome）；去掉「看日历」按钮；
  设置按钮改为菜单，第一项进 days/settings 独立页；分类可自选图标，
  列表徽标与日历条目都按分类显示
- 首页卡片：新增 app/HomeCards.php 与 templates/home_cards.php；
  8 格宽 × 高 2/4/6/8；首页拆成 templates/home/_card_*.php 共 8 个片段；
  home/cards 可改尺寸、调顺序、开关
This commit is contained in:
laoyang
2026-10-19 12:51:17 +08:00
parent ad7f43af68
commit 9a66068c33
21 changed files with 2172 additions and 685 deletions
Download Patch File Download Diff File Expand all files Collapse all files
templates/home.php
+77 -560
View File
@@ -1,60 +1,38 @@
<?php
/**
* 首页 —— 一块 dashboard。
* 首页 —— 卡片网格（v62 用户 2026-10-18 第 3 条）。
*
* 用户原话：「今天，我们正式引入卡片的概念，在首页上，概述是卡片，日程是卡片，
* 近期任务是卡片，往年的今天也是卡片，纪念日，要有一个卡片，电影、日程、
* 读书，都要有自己的卡片。……卡片的规格，我们可以定义一下，例如，把宽度
* 定义为 8，高度可以是 2、4、6、8，这样。如果是 2x2，那么就可以一排放 4 个，
* 如果是 2x8，那就是一行放一个，类似于这样的定义。」
*
* ────────────────────────────────────────────────────────────────
* v24 第 24 批 用户第 2、3 条（本次重排，用户原话）：
* 结构变了，但**内容一字未改**：原来的三块（信息面板 / 日程+任务 / 往年的今天）
* 现在各自是一张卡片，内容块原样搬进 `templates/home/_card_*.php`。
*
* 第 2 条：「首页上的功能…一个就是上面的简要信息，这样去写。早上好，中午好，
* 或者晚上好，某某某今天是几月几日？星期几农历几月几日？如果有节气的
* 话，或者有重要的节日的话，在这里显示。比如说今天是这个国庆节啊，
* 今天是端午节，或者是今天是中秋节，或者是今天是芒种，今天是大寒，
* 今天是小寒，今天是什么纪念日，今天是谁的生日等等。显示在这里
* 紧接着它的下面显示今天一共有多少条日程，今天有几件代办正在进行。
* 把天气放在这个信息面板的最右侧，以图标的形式，彩色图标的形式去进行
* 展示。比如说晴天多云下雨，然后下面显示呃温度、风力等等，在最下面
* 再显示呃地址。就是比如说他选中的是他在个人设置里面设置的是青岛，
* 那么就显示山东青岛就是让它放在这个信息面板的最右侧，靠右放。」
* 尺寸口径（与 app.css 的 `.hc-*`、设置页文字完全一致）：
* · 一排 **8 格**；宽 2 / 4 / 6 / 8 → 一排 4 张 / 2 张 / 一大一小 / 独占一排；
* · 高 2 / 4 / 6 / 8 行（一行 76px + 10px 间距）。
* · 排版完全由 CSS 网格决定：**卡片顺序 = 数组顺序**，不需要任何浮动/清浮。
*
* 第 3 条：「家里的镜框这里呃全部不要了…紧接着直接显示日程和任务日程和任务在
* 整个页面里面左右，并排放各占一半，日程就显示今天的日程，也就是
* 日视图那样形式，为了好看高度需要固定。这样的话，鼠标放上去之后，
* 向下可以滚动，暂时不要出现滚动条太丑了。为了节省上下滚动的这个空间，
* 我们可以把没有日程的那些时间掐头去尾给它去掉。…同样的和日视图一样，
* 需要在当前的时间或者是时刻那里显示一条红线。右侧显示任务模块里面的
* 数据显示当前正在进行当中的所有的任务，除了显示任务的标题之外，
* 还要显示他的状态。比如说正在进行中待确认等等。除了这之外，
* 还要显示他所处的看板的名称，就是他现在被放在哪一个看板里面，
* 就后最下面显示的是往年的今天这个模块。」
* ⚠️ 别在模板里自己算"该多宽"：宽高由 `$homeCards`（用户设置）给，
* 模板只负责把类名拼对（`hc-w4 hc-h8`）。
* ⚠️ 通知块仍在**卡片网格之前**：v30 第 5 条要求它出现在「往年的今天」前面，
* 而"往年的今天"现在是网格里的一张卡片，位置由用户定 —— 放在网格前是唯一
* 无论用户怎么摆都成立的方案。
*
* ⇒ 所以现在首页自上而下只有三块：
* ① 信息面板（问候 + 日子标记 + 今日数字 ｜ 最右：彩色天气图标 + 温度风力 + 地址）
* ② 日程 / 任务 **左右各半**（各自固定高度、内部滚动、不显滚动条）
* ③ 往年的今天
*
* ⚠️ 被删掉的（用户明确说"全部不要了"）：
* · 「家里的近况」模块卡片墙（moduleCards）—— 那张一片一片的统计卡
* · 「未来七天」清单 —— 与左侧「今天日程」重复
* 两块都不再渲染。服务端仍照旧算 moduleCards（个人设置里那个开关还留着），
* 但首页不再用 —— 留着它是为了"以后要恢复"时不用动后端。
*
* ⚠️ 「家人卡片」「两个月内的生日」早先就已按用户要求撤掉，本批不变。
* @var array $homeCards HomeCards::layout() 的结果（每项 k/w/h/n）
* @var array $cardData HomeCards::data() 取的那几张卡片的额外数据
*/
// 生日事件上用简称，卡片才不会一行塞不下；长名字在详情页里出
$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**（原来撤掉了，现在要回来）；
① 标题下显示**个人 slogan**；
② 右侧那三块统计（与我有关 / 名册总数 / 亲属连线）**去掉**；
③ 「我的资料 / 我的家谱」保留，但从文字按钮换成**图标按钮**；
④ 「名册」按钮去掉 —— 它与顶部导航条里的「名册」重复。
⚠️ 图标用行内 SVG（不引外部字体/图片），与观影设置下拉同一套做法。 */ ?>
v62 追加第五个图标按钮：「首页卡片」布局设置（与这排图标同一套做法）。 */ ?>
<section class="hero">
<img class="hero-logo" src="<?= e(asset('/assets/icons/icon-192.png')) ?>" alt="">
<div class="hero-main">
@@ -70,6 +48,16 @@ $todayMarks = $todayMarks ?? ['tags' => [], 'line' => ''];
`$me = Auth::check()` 把模板里的 $me 覆盖成布尔值，链接就变成 id=0
（"补充亲属关系"点进去是空白页）。所以这里显式用 $meId。 */ ?>
<div class="hero-actions">
<a class="icon-btn" href="<?= e(url('home/cards')) ?>"
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="2.4" y="2.4" width="6" height="6" rx="1.2"/>
<rect x="11.6" y="2.4" width="6" height="6" rx="1.2"/>
<rect x="2.4" y="11.6" width="6" height="6" rx="1.2"/>
<rect x="11.6" y="11.6" width="6" height="6" rx="1.2"/>
</svg>
</a>
<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"
@@ -90,443 +78,11 @@ $todayMarks = $todayMarks ?? ['tags' => [], 'line' => ''];
</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>
<?php /* 🔴🔴 v24 第 25 批 用户第 3 条修：「为什么显示 0 条待办呢？
任务看板明明有一个进行中的任务啊。」
根因：这句话原来读的是 `stat7['todos']` = `count(Task::byStatus(...,'todo'))`
—— 只数**待办**。而右边那块「手头在做」列的是 **doing（+ 已逾期的待办）**，
用户刚在看板上拖成「进行中」的那件任务于是**不计入**，数字就显示 0。
两个口径不同源，数字和列表当场对不上。
⇒ 现在这个数字与右侧列表**同源**（与 index.php 传给本页的**同一个数组**）。
🔴 v53（用户 2026-10-16 第 2 条）：右侧列表现在**也含待办**了（放在进行中下面）
⇒ 「件在做」不能再数整个数组（那会把待办也算成"在做"）。
改成**按状态拆开数**：进行中 →「件在做」，待办 →「件待办」。
⚠️ 两个数字相加 = 右侧列表的行数（列表也是这两段拼起来的），仍然同源。
⚠️ 「已经动手」与「排队等着」是两件事（用户第 6 条要求说清区别）：
首页要回答的是"我手头在做什么"，所以主数字用「在做」的口径；
排队的那些（todo）另给一个小字，不必让人点进任务页才知道还有多少。 */ ?>
<?php $nDoing = 0; $nTodo = 0;
foreach (($tasks ?? []) as $__t) {
if ((string)($__t['status'] ?? 'todo') === 'doing') { $nDoing++; } else { $nTodo++; }
} ?>
<a class="hbs" href="<?= e(url('tasks')) ?>"
title="近期任务（进行中）">
<b><?= $nDoing ?></b> 件在做
</a>
<?php if ($nTodo > 0): ?>
<a class="hbs" href="<?= e(url('tasks')) ?>" title="记下来了、还没动手的那些">
<b><?= $nTodo ?></b> 件待办
</a>
<?php endif; ?>
<?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 = 跨过那一小时再收尾
/* 🔴 v28 用户第 1 条：「今天的日程，并没有定位到红线所在的位置」。
根因：**区间里没有"现在"**，于是红线不画、定位算出来是个越界的值。
（实测：现在 22:44、日程 09:00 与 14:00 → 区间掐成 08–17，
`$nowPos = (22-8)/9 = 1.56` → `$showNow=false` → `class="ag-now"` 整个不渲染；
而定位脚本用同一个越界的 RATIO 去乘网格高度，被 clamp 到最底 → 停在底部。）
⇒ 修法不是"没红线就别定位"，而是**让区间永远包含当前时刻**：
用户要的正是"一眼看到现在处在哪儿"，那就必须把"现在"纳入刻度。
下面的 `$nowH` 是当前小时（服务端时区，与页面口径一致），
把它并进区间端点 —— 于是红线必然落在区间内，定位也就有了正确的目标。
⚠️ 必须在**算 $nowH 之前**完成这一步（原代码把 $nowH 放在区间之后算，
这里把它提上来，避免"改了区间却没重新算位置"这种漏改）。
🔴🔴 v44（用户 2026-10-12 第 3 条）：「首页上的红线刻度显示不准确。
现在明明已经 7:44 了，但它那个红线还停留在最早的 7 点钟，
并没有走到 7:44 那个位置。这个只有在首页上是这样的。我点到日程里面，
那个红线的刻度好像是对的。」
⇒ 真根因：首页用的是 `date('G')`（**只取整小时**），而日程页用的是
`(int)date('G')*60 + (int)date('i')`（**精确到分**）。
7:44 时首页算出 7 → 红线停在 7:00，正是用户看到的。
⇒ 这里改成与日程页**同一套**（小时*60+分钟），两处的口径不再分叉。 */
$nowHNow = (int)date('G');
if ($nowHNow < $startH) { $startH = max(0, $nowHNow - 1); }
if ($nowHNow >= $endH) { $endH = min(24, $nowHNow + 2); }
if ($endH <= $startH) { $endH = min(24, $startH + 2); }
}
/* 红线位置：**分钟级**（与日程页同一算法）。见上面 v44 那条 —— 原来是 `date('G')`
（整小时），所以"7:44 的红线停在 7:00"。 */
$nowMinutes = ((int)date('G')) * 60 + (int)date('i');
$nowPos = (($nowMinutes / 60) - $startH) / max(1, ($endH - $startH)); // 红线位置（0~1）
$showNow = $nowPos >= 0 && $nowPos <= 1;
/* 🔴 v30 第 2/4 条：首页日程也用**和日程模块同一套冲突分列**。
⇒ 复用 App\Calendar::conflictLanes（算法借鉴 SyncCalendar 的 TimelineUtil）：
两条撞车就左右各半、三条就三分 —— 首页与日历页看到的是同一个布局。
⚠️ 必须**先按时间排序**再分列（lanes 是按传入顺序返回的）：
`$todayEvents` 从路由出来已是"全天在前、其余按时刻"升序，这里再稳一次。
⚠️ 入参只挑**有时间**的那些（全天日程不进时间网格）。 */
usort($timed, static function (array $a, array $b): int {
return strcmp((string)($a['time'] ?? ''), (string)($b['time'] ?? ''));
});
$laneInfo = \App\Calendar::conflictLanes($timed);
foreach ($timed as $i => &$evRef) {
[$l, $w] = $laneInfo[$i] ?? [0.0, 1.0];
$evRef['left'] = round($l * 100, 4);
$evRef['width'] = round($w * 100, 4);
}
unset($evRef);
?>
<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>
<?php /* 🔴 v28 用户第 2 条：「看正月这个按钮，改成：更多日程，
背景颜色和日程的主题颜色保持一致。」
（「看正月」是用户对「看整月」的口误。） */ ?>
<a class="btn btn-sm hd-more" href="<?= e(url('calendar')) ?>"
style="--hd-c: <?= e(\App\Module::color('calendar', (int)\App\Auth::familyId())) ?>;">更多日程</a>
</div>
<?php /* 🔴 v24 第 26 批 用户第 2 条（前半）：「今天的日程，除了全天日程**一直显示在上面**外，
其他日程随着滚动」。
⇒ DOM 结构必须分成两层：
① `.ag-allday` **留在 pane 里、不在滚动容器内** —— 它永远钉在标题下方；
② `.hd-pane-body`（滚动容器）**只包** `.ag-grid` —— 只有时段网格随滚动。
为什么不能在同一个滚动容器里给全天区 `position: sticky`：
它在滚动区**内部**，sticky 只能粘在滚动区顶端，而滚动区顶端在标题下面 ——
滚起来时全天区会被"标题 + 滚动区"两层挤着，看起来仍然在动；
而且 sticky 需要不透明底色遮住底下滚过去的日程，与现在的浅色卡片叠色不好看。
直接把它移出滚动容器，是**零副作用**的做法。 */ ?>
<?php if (!$todayEvents): ?>
<div class="hd-pane-body">
<p class="empty-hint">今天没有安排。</p>
</div>
<?php else: ?>
<?php if ($allDay): ?>
<div class="ag-allday">
<?php foreach ($allDay as $ev): ?>
<?php /* 🔴 v43（用户第 6 条）：点条目弹详情浮层（不直接跳页）。 */ ?>
<?php
$evKind = (string)($ev['kind'] ?? 'custom');
$evRef = (int)($ev['ref_id'] ?? 0);
$evEdit = '';
if ($evKind === 'custom' && $evRef > 0) { $evEdit = url('calendar/event', ['id' => $evRef, 'embed' => 1]); }
elseif ($evKind === 'movie' && $evRef > 0) { $evEdit = url('movies/edit', ['id' => $evRef, 'embed' => 1]); }
elseif ($evKind === 'task' && $evRef > 0) { $evEdit = url('tasks/edit', ['id' => $evRef]); }
elseif ($evKind === 'anniv' && $evRef > 0) { $evEdit = url('days/edit', ['id' => $evRef, 'embed' => 1]); }
?>
<a class="ag-allday-item" href="<?= e((string)$ev['href']) ?>"
data-fb-entry='<?= fb_entry_json($ev, (string)($ev['href'] ?? ''), $evEdit) ?>'>
<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="hd-pane-body" data-ag-scroll>
<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 /* 🔴 v44（用户 2026-10-12 第 3 条）：「红线左侧是有一个红点吗？
这个红点显示也不全，也不太好看。直接把红点去掉就行了，
直接一根红线就可以了。」
⇒ 那颗 `.ag-now-dot` 整个删掉（原来它是个 8×8 的圆，左端 `left:-4px`，
靠外溢一点点来"指示起点"；用户觉得显示不全又不好看）。
⚠️ CSS 里那条 `.ag-now-dot` 也一并删（留在那儿是死规则，
还会让"红线只有一根"这件事在样式表里看不出结论）。 */ ?>
<?php if ($showNow): ?>
<?php /* 🔴 v45：把**服务端算红线用的那个分钟数**也写到元素上（`data-now-min`）。
为什么：探针原来只能"拿服务端渲染出的 top% 去和浏览器此刻的时间比" ——
两者的容差被 0.3% 一道卡着，而"整小时 vs 分钟"的差只等于
`分钟/60/跨度`：当分钟数很小时（如第 2 分钟）占比不到 0.3%，
**注入旧行为也不会变红** ⇒ 反向验证当场判它"恒真摆设"。
写上 data-now-min 之后，探针可以做一个**零容差**的判据：
"服务端用的分钟数 == 浏览器此刻的分钟数"，整小时注入必然对不上。
⚠️ 它只是给测试用的观测点，不影响任何渲染/行为。 */ ?>
<div class="ag-now" style="top: <?= number_format($nowPos * 100, 2) ?>%"
data-now-min="<?= (int)$nowMinutes ?>"></div>
<?php endif; ?>
<?php /* 日程块：按"相对第一个刻度的小时数"定位（与日视图同一套比例）---- */ ?>
<?php
/* 🔴 v30 第 2 条：「首页上的今天的日程，用色块表示，和日程保持一致。」
用户要的是**和日程模块（周/日视图）一样的实心色块**，而不是原来的
"白底 + 左边一条色线" —— 后者色只占 3px，一眼看不出是哪个日历本。
⇒ 三处对齐日程模块的 `.tg-block`：
① 底色 = 该日程所属日历本的颜色（不是主题色）；
② 白字（`.tg-block` 就是 `color:#fff`）；
③ 冲突错开（left/width 由 Calendar::conflictLanes 算，见 index.php）。
⚠️ 深浅：`--tg-*` 那几个本子的颜色都是中低明度，白字压得住；
但用户可能自定义成很浅的色 —— 所以标题那一行加 `text-shadow`
兜底（比"再加一层半透明黑罩"更不破坏本色）。
⚠️ 高度用 `min-height` 而不是固定值：15 分钟的日程也要看得见
（与 .tg-block 的 15 分钟最短块口径一致）。 */
foreach ($timed as $ev):
$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));
// 结束时刻：缺省时按"下一件事的起点"或 30 分钟（与日历口径一致）
$et2 = (string)($ev['end_time'] ?? '');
if ($et2 !== '' && preg_match('/^(\d{1,2}):(\d{2})/', $et2, $mm2)) {
$endMin = ((int)$mm2[1]) * 60 + ((int)$mm2[2]);
} else {
$endMin = $evMin + 30;
}
if ($endMin <= $evMin) { $endMin = $evMin + 30; }
$endMin = min($endMin, $endH * 60);
$hPct = ($endMin / 60 - $startH) / max(1, ($endH - $startH)) * 100 - $topPct;
$hPct = max(2.2, $hPct); // 至少能塞下一行
?>
<?php
$evKind = (string)($ev['kind'] ?? 'custom');
$evRef = (int)($ev['ref_id'] ?? 0);
$evEdit = '';
if ($evKind === 'custom' && $evRef > 0) { $evEdit = url('calendar/event', ['id' => $evRef, 'embed' => 1]); }
elseif ($evKind === 'movie' && $evRef > 0) { $evEdit = url('movies/edit', ['id' => $evRef, 'embed' => 1]); }
elseif ($evKind === 'task' && $evRef > 0) { $evEdit = url('tasks/edit', ['id' => $evRef]); }
elseif ($evKind === 'anniv' && $evRef > 0) { $evEdit = url('days/edit', ['id' => $evRef, 'embed' => 1]); }
?>
<a class="ag-ev" href="<?= e((string)$ev['href']) ?>"
data-fb-entry='<?= fb_entry_json($ev, (string)($ev['href'] ?? ''), $evEdit) ?>'
style="background: <?= e((string)$ev['color']) ?>;
top: <?= number_format($topPct, 2) ?>%;
height: <?= number_format($hPct, 2) ?>%;
<?php /* 🔴 v37 用户第 3 条：「首页上今天的日程…如果它分了三列
或者是几列，这三列之间的距离或者是空隙非常非常的大，
是分开的，中间有非常大的空隙。我看了一下日程里面的那个
显示，那两个色块就是紧挨着的。所以…应该让它们紧挨着。」
根因（与日历页 .tg-block 逐字对比出来的）：
· 日历页写的是 `left: calc(2px + L%)` / `width: calc(W% - 4px)`
—— 只留 2px+2px 的缝，所以色块**紧挨**；
· 这里却写死了 `calc(46px + L%)` / `calc(W% - 50px)`
—— 每块左右各扣 23px/25px。两列时那 46px 的扣减
**没法均分**，全挤进了两块之间的缝里 →
实测缝 ≈ 50px（等于把 46px 全加在了中间），
日历页只有 ≈ 4px。
⇒ 改法与日历页对齐：
left = 46px（给小时刻度）+ 列内的 2px
width = 列宽 - 4px（左右各 2px）
这样列间缝恒为 4px（紧挨），而且与"放得下多少列、
每列多宽"的解耦是干净的 —— 列宽由 width% 决定，
缝由那 4px 决定，两者不再互相污染。 */ ?>
left: calc(46px + <?= (float)($ev['left'] ?? 0) ?>% + 2px);
width: calc(<?= (float)($ev['width'] ?? 100) ?>% - 4px);"
title="<?= e((string)$ev['title']) ?>"
data-cal="<?= (int)$ev['cal'] ?>">
<span class="ag-ev-t"><?= e((string)$ev['time']) ?></span>
<span class="ag-ev-w"><?= e((string)$ev['title']) ?></span>
<span class="ag-ev-cal"><?= e((string)$ev['calname']) ?></span>
</a>
<?php endforeach; ?>
</div><?php /* /.ag-grid */ ?>
</div><?php /* /.hd-pane-body（滚动区，只含时段网格） */ ?>
<?php endif; ?>
</div><?php /* /.hd-pane */ ?>
<?php /* ---- 右：进行中的任务（标题 + 状态 + 看板名）---- */ ?>
<div class="card card-pad hd-pane" id="homeTasks">
<div class="hd-pane-head">
<h2 class="cinema-h2">近期任务</h2>
<?php /* 🔴 v28 用户第 3 条：「『手头在做』改成『近期任务』，『任务看板』这个按钮
改成『全部任务』，按钮颜色和任务的主题颜色保持一致。」 */ ?>
<a class="btn btn-sm hd-more" href="<?= e(url('tasks')) ?>"
style="--hd-c: <?= e(\App\Module::color('tasks', (int)\App\Auth::familyId())) ?>;">全部任务</a>
</div>
<div class="hd-pane-body">
<?php /* 用户第 6 条：「所有的任务，前面都带一个复选框，在任何地方，点这个复选框，
这个任务就完成了。」→ 首页这一块也算"任何地方"，
所以每行前面也有复选框，点了就地完成（AJAX，不跳页）。
表单与 JS 在页面末尾各一份（见 home.php 的 taskDoneForm 段）。 */ ?>
<?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); ?>
<?php
/* 🔴 v32 第 4 条（用户 2026-10-08）：「首页，近期任务，任务的文字和前面的圆点，
颜色并没有跟**看板颜色**一致，这个需要修正。」
⚠️ v30 那轮我把它改成了 `--tk-c`（= **任务模块**的主题色），
当时理解成"用户说的主题色"。**理解错了** —— 用户要的是
「这条任务属于哪个**看板**」的颜色（任务模块自己早就支持
"给看板选颜色"，用户原话在第 26 批：「任务在设置看板的时候，
可以选择颜色，这样在首页列表中显示的时候，就可以更加直观的
看到他属于哪个看板。」）。
⇒ 用 `Task::boardColorById(家庭, 看板id)`：
看板没设色时它按**看板名派生**一个稳定色（同名永远同色），
所以这里不需要任何回退分支。
⚠️ 逾期仍用红色（状态语义，不能被看板色盖掉）——
但那是"整行变红"，与"没逾期时跟看板一致"并不冲突。
⚠️ 没归看板的（board_id 为空）走"默认看板"的派生色，
与任务模块列表页看到的完全一致（同一函数）。 */
$tkColor = \App\Task::boardColorById((int)\App\Auth::familyId(),
(int)($t['board_id'] ?? 0) ?: null);
?>
<li class="dash-row tk-row" data-task-row="<?= (int)$t['id'] ?>"
style="--tk-c: <?= e($tkColor) ?>;">
<?php
$tkId = (int)$t['id']; $tkStatus = (string)($t['status'] ?? 'todo');
$tkBack = 'home'; $tkStatic = !\App\Auth::canWrite();
require __DIR__ . '/_task_check.php';
?>
<span class="dash-dot" style="background: <?= e($late ? 'var(--red)' : 'var(--tk-c)') ?>;"></span>
<?php /* 🔴 v43（用户第 6 条）：点任务标题也弹详情浮层（不直接跳页）。
要点在**标题那个 <a>** 上而不是整行 ——
行里还有复选框（勾一下完成）与其它链接，
整行可点会让"勾选"和"打开"互相抢。 */ ?>
<a class="dash-what" href="<?= e(url('tasks/show', ['id' => (int)$t['id']])) ?>"
<?php /* 🔴 v54（用户 2026-10-16 第 1 条）：标题被 CSS 截成一行 + 省略号，
所以这里给 `title` —— 鼠标停上去能看全名。
（点开还有详情浮层，但"只看一眼全名"不该逼人点进去。） */ ?>
title="<?= e((string)$t['title']) ?>"
data-fb-entry='<?= fb_entry_json([
'title' => (string)$t['title'],
'status_word' => \App\Task::statusWord((string)($t['status'] ?? 'todo')),
'note' => (string)($t['note'] ?? ''),
], url('tasks/show', ['id' => (int)$t['id']]),
\App\Auth::canWrite() ? url('tasks/edit', ['id' => (int)$t['id']]) : '',
[['截止', ($t['due_at'] ?? '') !== '' ? substr((string)$t['due_at'], 0, 16) : ''],
['看板', trim((string)($t['board_name'] ?? ''))]]) ?>'
style="color: <?= e($late ? 'var(--red)' : $tkColor) ?>;">
<?= 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'] ?? '')) !== ''): ?>
<?php /* 🔴 v24 第 26 批 用户第 3 条（后半）：「任务在设置看板的时候，可以选择颜色，
这样在首页列表中显示的时候，就可以更加直观的看到他属于哪个看板。」
⇒ 徽标**同时带颜色**：左边一个小圆点（看板色）+ 看板名。
为什么不用"整块背景染色"：首页这一行已经有状态徽标、看板徽标、逾期等几个
色块，整块染色会互相打架、反而看不出哪个色对应哪个语义。
一个小圆点信息量足够、又不抢戏。 */
$bColor = \App\Task::boardColor($t['board_color'] ?? null, (string)$t['board_name']); ?>
<span class="tk-board" style="--bc: <?= e($bColor) ?>;">
<i class="tk-board-dot" aria-hidden="true"></i><?= 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 /* ==================== 通知消息（v30 第 5 条）====================
用户原话：「…发一个通知，通知出现在首页中，**往年今天的前面**。」
⇒ 位置是硬性要求：必须在「往年的今天」**之前**。
⚠️ 没有通知时**整块不渲染** —— 首页是"每天第一眼看的地方"，
不要用一个空盒子占掉一屏（与"今天没有安排"那种信息位不同：
通知本来就是事件驱动的，没有就真的不该出现）。 */ ?>
⇒ 放在卡片网格**之前**：往年的今天是网格里的一张卡片，位置由用户摆，
只有"在网格前面"才能保证永远在它上面。
⚠️ 没有通知时整块不渲染 —— 首页是"每天第一眼看的地方"，不要用一个空盒子占一屏。 */ ?>
<?php if (!empty($notifs)): ?>
<section class="section">
<div class="page-head" style="margin-bottom:12px">
@@ -564,43 +120,58 @@ unset($evRef);
</section>
<?php endif; ?>
<?php /* ==================== ③ 往年的今天 ==================== */ ?>
<?php /* ==================== 卡片网格（v62）====================
⚠️ `require` 进来的每个 `_card_*.php` 与这里**同一作用域**（共享 $tasks / $todayEvents
/ $cardData …）：这是刻意的 —— 卡片的取数与首页的取数必须同源，
各自再查一遍就会出现"数字和列表对不上"那类老问题。 */ ?>
<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'])): ?>
<?php if (empty($homeCards)): ?>
<div class="card card-pad empty">
<b>往年的这一天还没有记录</b>
日子还长，等有了第一次，明年这时候就会自己冒出来。
<b>首页卡片都被关掉了</b>
到 <a href="<?= e(url('home/cards')) ?>">首页卡片</a> 里重新勾几张出来。
</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 class="hc-grid" id="homeCards">
<?php foreach ($homeCards as $card): ?>
<?php
$hcKey = (string)($card['k'] ?? '');
if (!\App\HomeCards::exists($hcKey)) {
continue;
}
$hcDef = \App\HomeCards::TYPES[$hcKey];
$hcTpl = __DIR__ . '/home/_card_' . $hcKey . '.php';
if (!is_file($hcTpl)) {
continue; // 注册了但还没写模板：跳过，不要白屏
}
$hcMore = (string)($hcDef['route'] ?? '') !== '' ? url((string)$hcDef['route']) : '';
// 日程/任务这两个按钮沿用模块主题色（v28 第 2、3 条）
$hcColor = in_array($hcKey, ['agenda', 'tasks'], true)
? \App\Module::color($hcKey === 'agenda' ? 'calendar' : 'tasks', (int)\App\Auth::familyId())
: '';
?>
<section class="card hc-card hc-w<?= (int)$card['w'] ?> hc-h<?= (int)$card['h'] ?>"
data-hc="<?= e($hcKey) ?>" id="homeCard-<?= e($hcKey) ?>">
<div class="hc-head">
<h2 class="cinema-h2"><?= e((string)$hcDef['name']) ?></h2>
<?php if ($hcMore !== ''): ?>
<a class="btn btn-sm hd-more<?= $hcColor === '' ? ' btn-ghost' : '' ?>"
href="<?= e($hcMore) ?>"<?= $hcColor !== '' ? ' style="--hd-c: ' . e($hcColor) . ';"' : '' ?>><?= e((string)$hcDef['more']) ?></a>
<?php endif; ?>
</div>
<?php require $hcTpl; ?>
</section>
<?php endforeach; ?>
</div>
<?php endif; ?>
</section>
<?php /* ==================== 首页任务复选框的表单与脚本（用户第 6 条）====================
<?php /* ==================== 首页任务复选框的表单与脚本（v24 第 25 批 用户第 6 条）====================
「在任何地方点复选框，这个任务就完成了」—— 首页也算"任何地方"。
与任务看板同一套做法：**表单全页一份**，行上只放 data-tk-done。
⚠️ 改完**不摘掉这一行**：用户点完正想看自己刚完成什么，
立刻消失会让人怀疑"是不是点到删除了"。刷新时由服务端决定它还在不在。 */ ?>
⚠️ 改完**不摘掉这一行**：用户点完正想看自己刚完成什么，立刻消失会让人怀疑
"是不是点到删除了"。刷新时由服务端决定它还在不在。
⚠️ 这一段是**页面级**的（不属于某张卡片）：任务卡片被关掉后它也跟着没用，
但留着无害 —— 别为了"省几行"把它挪进卡片模板里，那样卡片一换模板就丢功能。 */ ?>
<?php if (!empty($tasks) && \App\Auth::canWrite()): ?>
<form method="post" action="<?= e(url('tasks/status')) ?>" id="taskDoneForm" class="hidden-form">
<?= csrf_field() ?>
@@ -651,7 +222,6 @@ unset($evRef);
b.setAttribute('data-tk-status', d.status);
b.classList.toggle('is-done', d.status === 'done');
b.setAttribute('aria-pressed', d.status === 'done' ? 'true' : 'false');
// 状态徽标（那行「进行中」）跟着换，否则勾上了徽标还写着"进行中"
var row = b.closest('[data-task-row]');
var badge = row ? row.querySelector('.kb-st') : null;
if (badge) {
@@ -665,56 +235,3 @@ unset($evRef);
})();
</script>
<?php endif; ?>
<?php /* ==================== 日程滚动区：进场定位到当前时刻（v24 第 26 批 用户第 2 条）======
用户原话：「每次进来，都要定位到当前时刻，就是红线出现的位置，让红线在中间。」
⇒ 打开首页时把**滚动容器**滚到一个位置，使"当前时刻"落在可视区**正中**。
⚠️ 触发条件：**今天有日程就定位**（只要 `$todayEvents` 非空，页面上就有
`.ag-grid` 与红线）。曾经写成 `if (!$todayEvents || empty($timed))`，
后果是**今天只有全天日程 / 全天日程都没有分时段的那种日子，脚本整段不输出**
—— 而网格（0–24h）和红线照样渲染，于是"红线在，页面却停在最上面"
（v29 用户第 1 条仍然报「没有定位到红线」，实测 `scrollTop=0`、脚本不在页面上，
就是这个条件卡掉的；有分时段日程时定位其实完全正确、偏差 0px）。
⇒ 只判"有没有网格可滚"，别判"是不是分时段日程"。
⚠️ 用 `scrollTop = 目标偏移 - 容器高/2`，**不要**用 `scrollIntoView({block:'center'})`：
它会**连带滚动外层页面**（把整个浏览器窗口也滚下去），
用户一进首页就被拽到"页面中部" —— 那比不定位更糟。
直接给容器赋 `scrollTop` 只动这一个盒子，外层纹丝不动。
⚠️ 容器"没得滚"时（内容比容器矮）赋任何值都是 0，天然安全，不必特判。
⚠️ 目标位置**由服务端算好**传进来（`$nowPos`），不在 JS 里再算一遍时间 ——
两处各算一次迟早不一致（服务端用的是站点时区，JS 用的是浏览器时区）。 */ ?>
<?php if (!$todayEvents): ?>
<?php /* 今天一条日程都没有 → 页面是「今天没有安排」的空态，没有网格可滚 */ ?>
<?php else: ?>
<script>
(function () {
var box = document.querySelector('[data-ag-scroll]');
if (!box) { return; }
// 红线（在的话）优先；不在就用服务端算好的 nowPos 现算一个位置。
var line = box.querySelector('.ag-now');
var RATIO = <?= json_encode(round($nowPos, 6)) ?>; // 0~1（可能落在区间外）
function targetOffset() {
if (line) { return line.offsetTop; }
var grid = box.querySelector('.ag-grid');
if (!grid) { return 0; }
// ⚠️ 用**排掉全天区之后**的内容高度算：全天区现在不在滚动容器里，
// 所以 grid 的高度就是"整条时间轴"的高度（与服务端算 nowPos 的口径一致）。
return grid.offsetHeight * RATIO;
}
function centerOnNow() {
// offsetTop 相对**定位祖先**（.ag-grid，position:relative），即"内容坐标"
box.scrollTop = Math.max(0, targetOffset() - (box.clientHeight / 2));
}
centerOnNow();
/* ⚠️ 再补两拍：字体加载完 / 浏览器恢复滚动位置（back-forward cache）之后，
内容高度会变，第一次算出来的 scrollTop 可能偏。
用 rAF 而不是 setTimeout：rAF 在排版完成后跑，时序更准；
两拍是为了覆盖"布局在渲染后才最终确定"的那一帧。 */
if (window.requestAnimationFrame) {
requestAnimationFrame(function () { requestAnimationFrame(centerOnNow); });
}
})();
</script>
<?php endif; ?>