laoyang
8f80f3e835
用户 2026-10-02 提的 19 条需求，本轮完成剩下的 8 条 + CalDAV 服务端：
- ③ 附件：图片/视频给缩略图，PDF/Word/Excel 给**同尺寸**图标；可预览的在本页
弹层里看（不再新开标签页），渲染不了的点了直接下载；预览层右上角恒有下载按钮。
- ⑦b CalDAV：把「我的日历本」按 RFC 4791 只读子集分享出去（OPTIONS/PROPFIND/
REPORT/GET，写方法一律 403）。用**专用口令**（库里只存 sha256），不是登录口令。
- ⑨⑩ 任务：分类与看板都由用户自建；已完成的任务从看板消失，改在「已完成」页
按分类查看/搜索；设置入口在「新建任务」旁的 ☰。
- ⑪ 全局人员选择器：一个片段铺到观影/旅程/资源/日历共享/任务共享/财务共享；
修掉了老组件「名字和拼音都搜不动」的 bug —— .att-item 自己声明了 display:flex，
压过了浏览器 [hidden]{display:none}，过滤根本没生效。
- ⑫ 家谱：头像改方形不再裁切；姻亲不在图上的卡片给「⇄ 姻亲」入口，
以 TA 为中心重画 + 「返回我的家谱」。
- ⑬ 纪念日：阴历/阳历都能设且按对应历法重复；名册里每个人的生日默认可见
（实时派生，不复制一份）；全部作为全天日程进日历。
- ⑮ 财务：账本可共享，双方都能记账、都能看全部账目，资产−负债=净资产；
金额一律以「分」存，不用浮点。
验证：端到端 724 项通过 / 0 失败；几何 368、交互 97、移动端 516、家谱 24、
升级 123 全绿；SQL 列名静态校验 0 处可疑；部署 11 条线上探针全过。
257 lines
12 KiB
PHP
257 lines
12 KiB
PHP
<?php
|
|
/**
|
|
* 日程 · 月视图（v12）。
|
|
*
|
|
* 参照群晖 Calendar 的外观：左边一列"我的日历本"（可勾选显隐），右边 7×6 的月网格，
|
|
* 有日程的日子在格子里露出彩色小条，点小条跳到对应模块（观影/旅程/任务）。
|
|
*
|
|
* 两条设计：
|
|
* ① **日历本显隐是纯前端的**（勾选框 + 给日程条加 data-cal）：
|
|
* 不做成"勾一次刷一次页面"，否则翻月、勾选都在等服务端。没有 JS 时全部照常显示。
|
|
* ② **观影 / 旅行 / 任务不复制进日历**，是从各自模块实时汇总出来的（Calendar::month），
|
|
* 所以改了观影日期，日历里立刻跟着变。反过来在日历里给观影本加日程 = 真的建一条观影记录。
|
|
*
|
|
* @param string $ym 'Y-m'
|
|
* @param array $weeks 月网格（build_month_grid 产出）
|
|
* @param array $cals 我可见的日历本（含 perm）
|
|
* @param array $people 名册（共享给别人时用）
|
|
*/
|
|
$canWrite = \App\Auth::canWrite();
|
|
$view = (string)($view ?? 'month');
|
|
$anchor = (string)($anchor ?? date('Y-m-d'));
|
|
$ts = strtotime($ym . '-01') ?: time();
|
|
$prevYm = date('Y-m', strtotime('-1 month', $ts));
|
|
$nextYm = date('Y-m', strtotime('+1 month', $ts));
|
|
$thisYm = date('Y-m');
|
|
$writable = array_values(array_filter($cals, static fn($c) => \App\Calendar::canWrite($c, (int)\App\Auth::personId())));
|
|
|
|
// 三种看法各自的「上一段 / 下一段」：月按整月走，周按 7 天走，天按 1 天走
|
|
$step = $view === 'week' ? 7 : ($view === 'day' ? 1 : 0);
|
|
$prevD = date('Y-m-d', strtotime('-' . $step . ' days', strtotime($anchor)));
|
|
$nextD = date('Y-m-d', strtotime('+' . $step . ' days', strtotime($anchor)));
|
|
$todayD = date('Y-m-d');
|
|
$headText = $view === 'month' ? date('Y 年 n 月', $ts)
|
|
: ($view === 'week' ? date('Y 年 n 月 j 日', strtotime($anchor)) . ' 起这一周'
|
|
: date('Y 年 n 月 j 日', strtotime($anchor)));
|
|
$mkUrl = static function (string $v) use ($ym, $prevD, $nextD, $todayD, $prevYm, $nextYm, $thisYm) {
|
|
if ($v === 'month') {
|
|
return url('calendar', ['view' => 'month', 'ym' => $ym]);
|
|
}
|
|
return null; // 周/天要把具体哪天传进去，由调用方拼
|
|
};
|
|
?>
|
|
<div class="page-head">
|
|
<h1>日程</h1>
|
|
<span class="sub"><?= e($headText) ?></span>
|
|
<div class="actions">
|
|
<?php /* v24 第 4 条：月 / 周 / 天三选一 */ ?>
|
|
<span class="seg" role="group" aria-label="看法">
|
|
<a class="seg-btn<?= $view === 'month' ? ' is-on' : '' ?>"
|
|
href="<?= e(url('calendar', ['view' => 'month', 'ym' => $ym])) ?>">月</a>
|
|
<a class="seg-btn<?= $view === 'week' ? ' is-on' : '' ?>"
|
|
href="<?= e(url('calendar', ['view' => 'week', 'd' => $anchor])) ?>">周</a>
|
|
<a class="seg-btn<?= $view === 'day' ? ' is-on' : '' ?>"
|
|
href="<?= e(url('calendar', ['view' => 'day', 'd' => $anchor])) ?>">天</a>
|
|
</span>
|
|
<?php if ($view === 'month'): ?>
|
|
<a class="btn btn-ghost" href="<?= e(url('calendar', ['view' => 'month', 'ym' => $prevYm])) ?>">上一月</a>
|
|
<a class="btn btn-ghost" href="<?= e(url('calendar', ['view' => 'month', 'ym' => $thisYm])) ?>">今天</a>
|
|
<a class="btn btn-ghost" href="<?= e(url('calendar', ['view' => 'month', 'ym' => $nextYm])) ?>">下一月</a>
|
|
<?php else: ?>
|
|
<a class="btn btn-ghost" href="<?= e(url('calendar', ['view' => $view, 'd' => $prevD])) ?>">
|
|
<?= $view === 'week' ? '上一周' : '前一天' ?>
|
|
</a>
|
|
<a class="btn btn-ghost" href="<?= e(url('calendar', ['view' => $view, 'd' => $todayD])) ?>">今天</a>
|
|
<a class="btn btn-ghost" href="<?= e(url('calendar', ['view' => $view, 'd' => $nextD])) ?>">
|
|
<?= $view === 'week' ? '下一周' : '后一天' ?>
|
|
</a>
|
|
<?php endif; ?>
|
|
<a class="btn btn-ghost" href="<?= e(url('calendar/calendars')) ?>">日历本</a>
|
|
<?php if ($canWrite && $writable): ?>
|
|
<button class="btn" type="button" id="calAddBtn">新建日程</button>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cal-wrap">
|
|
<?php /* ---- 左：日历本 ---- */ ?>
|
|
<aside class="cal-side">
|
|
<h2 class="cinema-h2">我的日历本</h2>
|
|
<?php if (!$cals): ?>
|
|
<p class="empty-hint">还没有日历本。</p>
|
|
<?php else: ?>
|
|
<ul class="cal-list">
|
|
<?php foreach ($cals as $c): ?>
|
|
<li class="cal-item">
|
|
<label class="cal-toggle">
|
|
<input type="checkbox" class="cal-cb" data-cal="<?= (int)$c['id'] ?>" checked>
|
|
<span class="color-preview" style="background: <?= e((string)$c['color']) ?>;"></span>
|
|
<span class="cal-name"><?= e((string)$c['name']) ?></span>
|
|
</label>
|
|
<?php if ((int)$c['shared'] === 1): ?>
|
|
<span class="node-badge"><?= ($c['perm'] ?? '') === 'write' ? '共享·可写' : '共享·只读' ?></span>
|
|
<?php endif; ?>
|
|
</li>
|
|
<?php endforeach; ?>
|
|
</ul>
|
|
<?php /* 观影/旅行/任务三路是**自动汇总**的，没有本子开关，这里说明一下来源 */ ?>
|
|
<p class="cal-note">观影、旅行、有截止时间的任务会自动出现在这里，不需要另建本子。</p>
|
|
<?php endif; ?>
|
|
</aside>
|
|
|
|
<?php /* ---- 右：月网格 ---- */ ?>
|
|
<div class="cal-main">
|
|
<?php if ($canWrite && $writable): ?>
|
|
<div class="card card-pad cal-add" id="calAddCard" hidden>
|
|
<h2 class="cinema-h2">新建日程</h2>
|
|
<form method="post" action="<?= e(url('calendar/event_add')) ?>" enctype="multipart/form-data">
|
|
<?= csrf_field() ?>
|
|
<input type="hidden" name="ym" value="<?= e($ym) ?>">
|
|
<div class="form-grid">
|
|
<div class="field">
|
|
<label for="ce-cal">放在哪本</label>
|
|
<select class="select" id="ce-cal" name="calendar_id">
|
|
<?php foreach ($writable as $c): ?>
|
|
<option value="<?= (int)$c['id'] ?>"><?= e((string)$c['name']) ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<?php /* v24 第 6 条：字段按 iCalendar / CalDAV 的 VEVENT 定（见 _event_fields.php）。
|
|
新建时「全天」默认**不勾**（用户原话），开始时间默认今天 09:00。 */ ?>
|
|
<?php
|
|
$evFields = ['starts_at' => ($ym === $thisYm ? date('Y-m-d') : $ym . '-01') . ' 09:00:00',
|
|
'ends_at' => ($ym === $thisYm ? date('Y-m-d') : $ym . '-01') . ' 10:00:00'];
|
|
$evAllDay = false;
|
|
require __DIR__ . '/_event_fields.php';
|
|
?>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn btn-sm" type="submit">加上</button>
|
|
<button class="btn btn-ghost btn-sm" type="button" id="calAddCancel">取消</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($view === 'week' || $view === 'day'): ?>
|
|
<?php /* ===== 周 / 天：按小时铺的时间网格（全天日程单独挂顶上） ===== */ ?>
|
|
<div class="card cal-tg-card">
|
|
<div class="tg-head">
|
|
<div class="tg-gutter"></div>
|
|
<?php foreach (($cols ?? []) as $c): ?>
|
|
<div class="tg-dayname<?= $c['is_today'] ? ' is-today' : '' ?>">
|
|
<span class="tg-wd"><?= e(['日','一','二','三','四','五','六'][$c['w']]) ?></span>
|
|
<span class="tg-dd"><?= (int)$c['day'] ?></span>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<?php $tgAll = $tgrid['all_day'] ?? []; ?>
|
|
<?php if (array_filter($tgAll)): ?>
|
|
<div class="tg-allday">
|
|
<div class="tg-gutter"><span class="tg-tag">全天</span></div>
|
|
<?php foreach (($cols ?? []) as $i => $c): ?>
|
|
<div class="tg-adcell">
|
|
<?php foreach (($tgAll[$i] ?? []) as $ev): ?>
|
|
<a class="cal-ev is-allday" data-cal="<?= (int)$ev['cal'] ?>"
|
|
style="background: <?= e((string)$ev['color']) ?>;"
|
|
href="<?= e((string)$ev['href']) ?>"
|
|
title="<?= e((string)$ev['title']) ?>"><?= e((string)$ev['title']) ?></a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<div class="tg-body">
|
|
<div class="tg-gutter tg-hours">
|
|
<?php for ($h = 0; $h < 24; $h++): ?>
|
|
<span class="tg-hr"><?= sprintf('%02d', $h) ?></span>
|
|
<?php endfor; ?>
|
|
</div>
|
|
<?php foreach (($cols ?? []) as $i => $c): ?>
|
|
<div class="tg-col<?= $c['is_today'] ? ' is-today' : '' ?>">
|
|
<?php for ($h = 0; $h < 24; $h++): ?>
|
|
<span class="tg-line"></span>
|
|
<?php endfor; ?>
|
|
<?php foreach (($tgrid['timed'][$i] ?? []) as $ev): ?>
|
|
<a class="tg-block" data-cal="<?= (int)$ev['cal'] ?>"
|
|
style="background: <?= e((string)$ev['color']) ?>; top: <?= (float)$ev['top'] ?>%; height: <?= (float)$ev['height'] ?>%;"
|
|
href="<?= e((string)$ev['href']) ?>"
|
|
title="<?= e((string)$ev['title']) ?>">
|
|
<b><?= e((string)$ev['time']) ?></b> <?= e((string)$ev['title']) ?>
|
|
</a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<?php else: ?>
|
|
<div class="card cal-grid-card">
|
|
<div class="cal-head">
|
|
<?php foreach (['日', '一', '二', '三', '四', '五', '六'] as $wd): ?>
|
|
<div class="cal-wd"><?= e($wd) ?></div>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<div class="cal-grid">
|
|
<?php foreach ($weeks as $wk): ?>
|
|
<?php foreach ($wk as $cell): ?>
|
|
<div class="cal-cell<?= $cell['in_month'] ? '' : ' is-out' ?><?= $cell['is_today'] ? ' is-today' : '' ?>">
|
|
<div class="cal-dnum"><?= (int)$cell['day'] ?></div>
|
|
<div class="cal-evs">
|
|
<?php $n = 0; foreach ($cell['events'] as $ev): $n++; ?>
|
|
<?php if ($n <= 3): ?>
|
|
<a class="cal-ev<?= empty($ev['all_day']) ? '' : ' is-allday' ?>"
|
|
data-cal="<?= (int)$ev['cal'] ?>"
|
|
style="background: <?= e((string)$ev['color']) ?>;"
|
|
href="<?= e((string)$ev['href']) ?>"
|
|
title="<?= e((string)$ev['title']) ?>">
|
|
<?php if (($ev['time'] ?? '') !== ''): ?><b><?= e((string)$ev['time']) ?></b> <?php endif; ?>
|
|
<?= e((string)$ev['title']) ?>
|
|
</a>
|
|
<?php endif; ?>
|
|
<?php endforeach; ?>
|
|
<?php if (count($cell['events']) > 3): ?>
|
|
<span class="cal-more">+<?= count($cell['events']) - 3 ?> 条</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
</div>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
/* 日历本显隐：只切 display，不重新请求 —— 翻月/勾选都是立刻的。
|
|
没有 JS 时全部照常显示（勾选框失效而已），不会丢内容。 */
|
|
var boxes = document.querySelectorAll('.cal-cb');
|
|
function apply() {
|
|
var off = {};
|
|
Array.prototype.forEach.call(boxes, function (b) {
|
|
if (!b.checked) { off[b.getAttribute('data-cal')] = true; }
|
|
});
|
|
Array.prototype.forEach.call(document.querySelectorAll('.cal-ev'), function (el) {
|
|
el.style.display = off[el.getAttribute('data-cal')] ? 'none' : '';
|
|
});
|
|
}
|
|
Array.prototype.forEach.call(boxes, function (b) { b.addEventListener('change', apply); });
|
|
apply();
|
|
|
|
var btn = document.getElementById('calAddBtn');
|
|
var card = document.getElementById('calAddCard');
|
|
var cancel = document.getElementById('calAddCancel');
|
|
if (btn && card) {
|
|
btn.addEventListener('click', function () {
|
|
card.hidden = !card.hidden;
|
|
if (!card.hidden) { card.scrollIntoView({ block: 'nearest' }); }
|
|
});
|
|
}
|
|
if (cancel && card) { cancel.addEventListener('click', function () { card.hidden = true; }); }
|
|
/* 「全天」勾上藏掉时刻那一段的逻辑在 _event_fields.php 里（两个页面共用一份） */
|
|
})();
|
|
</script>
|