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 条线上探针全过。
294 lines
13 KiB
PHP
294 lines
13 KiB
PHP
<?php
|
|
/**
|
|
* 任务 · 看板（v12）：待办 / 进行中 / 已完成 三列。
|
|
*
|
|
* 拖动：卡片是 HTML5 draggable，松手时把「拖到哪一列、放在谁后面」写进一个隐藏表单再提交
|
|
* —— **没有 JS 时每列下方的 ← → 按钮同样能搬**（渐进增强：功能是有的，拖动只是更顺手）。
|
|
*
|
|
* ⚠️ 看板里只有父任务：子任务是挂在父任务下面的（点卡片进详情看/勾），
|
|
* 混进看板会变成一堆没有上下文的小条目，"还剩几件"反而看不清。
|
|
*
|
|
* @param array $board ['todo'=>[], 'doing'=>[], 'done'=>[]]
|
|
* @param array $people 名册（选负责人 / 共享给别人）
|
|
*/
|
|
$canWrite = \App\Auth::canWrite();
|
|
// ⚠️ v24 第 10 条：看板上只有「待办 / 进行中」两列 —— 已完成的任务从看板消失，
|
|
// 要看去「任务设置 → 已完成」按分类看/搜。留着第三列就不是"直接消失"了。
|
|
$cols = [['todo', '待办'], ['doing', '进行中']];
|
|
$boards = $boards ?? [];
|
|
$categories = $categories ?? [];
|
|
$curBoard = (int)($curBoard ?? 0);
|
|
?>
|
|
<div class="page-head">
|
|
<h1>任务</h1>
|
|
<span class="sub">共 <?= (int)$total ?> 项未完成</span>
|
|
<div class="actions">
|
|
<?php if ($canWrite): ?>
|
|
<button class="btn" type="button" id="taskAddBtn">新建任务</button>
|
|
<?php else: ?>
|
|
<span class="link-quiet">只读账号</span>
|
|
<?php endif; ?>
|
|
<?php $setCurrent = 'board'; require __DIR__ . '/_settings_menu.php'; ?>
|
|
</div>
|
|
</div>
|
|
|
|
<?php if (count($boards) > 1): ?>
|
|
<div class="seg kb-boards">
|
|
<?php foreach ($boards as $b): ?>
|
|
<a class="seg-btn<?= (int)$b['id'] === $curBoard ? ' is-on' : '' ?>"
|
|
href="<?= e(url('tasks', ['board' => (int)$b['id']])) ?>"><?= e((string)$b['name']) ?></a>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php if ($canWrite): ?>
|
|
<div class="card card-pad" id="taskAddCard" hidden>
|
|
<h2 class="cinema-h2">新建任务</h2>
|
|
<form method="post" action="<?= e(url('tasks/create')) ?>">
|
|
<?= csrf_field() ?>
|
|
<div class="form-grid">
|
|
<div class="field full">
|
|
<label for="tk-title">要做什么 *</label>
|
|
<input class="input" id="tk-title" name="title" required placeholder="如：周末大扫除">
|
|
</div>
|
|
<?php /* v24 第 5 条：截止时刻也走全局统一的「日期 + 时分秒」控件。
|
|
秒这一档保留（与其它模块同一口径），默认 23:59:59 —— "这天之前做完"
|
|
比"这天 00:00 之前"更符合直觉。 */ ?>
|
|
<div class="field">
|
|
<label for="tk-due">截止时间（有才会出现在日历里）</label>
|
|
<?php $dtName = 'due_at'; $dtId = 'tk-due'; $dtValue = null;
|
|
$dtRequired = false; $dtSeconds = true;
|
|
require __DIR__ . '/../_datetime.php'; ?>
|
|
</div>
|
|
<div class="field">
|
|
<label for="tk-assign">负责人</label>
|
|
<select class="select" id="tk-assign" name="assignee_id">
|
|
<option value="0">不指定</option>
|
|
<?php foreach ($people as $p): ?>
|
|
<option value="<?= (int)$p['id'] ?>"><?= e(person_name($p)) ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="tk-repeat">循环</label>
|
|
<select class="select" id="tk-repeat" name="repeat_rule">
|
|
<?php foreach (\App\Task::REPEAT as $rk => $rv): ?>
|
|
<option value="<?= e($rk) ?>"><?= e($rv) ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="tk-cat">分类</label>
|
|
<select class="select" id="tk-cat" name="category_id">
|
|
<option value="0">未分类</option>
|
|
<?php foreach ($categories as $c): ?>
|
|
<option value="<?= (int)$c['id'] ?>"><?= e((string)$c['name']) ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="tk-board">看板</label>
|
|
<select class="select" id="tk-board" name="board_id">
|
|
<?php foreach ($boards as $b): ?>
|
|
<option value="<?= (int)$b['id'] ?>" <?= (int)$b['id'] === $curBoard ? 'selected' : '' ?>>
|
|
<?= e((string)$b['name']) ?>
|
|
</option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<div class="field">
|
|
<label for="tk-share">共享给（可多选，任何人完成都算完成）</label>
|
|
<select class="select" id="tk-share" name="shares[]" multiple size="3">
|
|
<?php foreach ($people as $p): ?>
|
|
<?php if ((int)$p['id'] === (int)\App\Auth::personId()) { continue; } ?>
|
|
<option value="<?= (int)$p['id'] ?>"><?= e(person_name($p)) ?></option>
|
|
<?php endforeach; ?>
|
|
</select>
|
|
</div>
|
|
<div class="field full">
|
|
<label for="tk-note">备注</label>
|
|
<textarea class="input" id="tk-note" name="note" rows="2"></textarea>
|
|
</div>
|
|
</div>
|
|
<div class="btn-row">
|
|
<button class="btn" type="submit">新建</button>
|
|
<button class="btn btn-ghost" type="button" id="taskAddCancel">收起</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
<?php endif; ?>
|
|
|
|
<?php /* 拖动的提交目标：JS 把 id / 目标列 / 参照顺序填进来再 submit。
|
|
放在看板**外面**，避免被任何一张卡片的 form 套住。 */ ?>
|
|
<form method="post" action="<?= e(url('tasks/move')) ?>" id="taskMoveForm" class="hidden-form">
|
|
<?= csrf_field() ?>
|
|
<input type="hidden" name="id" id="mvId">
|
|
<input type="hidden" name="status" id="mvStatus">
|
|
<input type="hidden" name="before" id="mvBefore">
|
|
</form>
|
|
|
|
<div class="kanban">
|
|
<?php foreach ($cols as [$key, $label]): ?>
|
|
<section class="kb-col" data-status="<?= e($key) ?>">
|
|
<header class="kb-head">
|
|
<b><?= e($label) ?></b>
|
|
<span class="kb-n"><?= count($board[$key] ?? []) ?></span>
|
|
</header>
|
|
<div class="kb-body" data-status="<?= e($key) ?>">
|
|
<?php foreach (($board[$key] ?? []) as $t): ?>
|
|
<?php
|
|
$tid = (int)$t['id'];
|
|
$total = (int)($t['child_total'] ?? 0);
|
|
$doneN = (int)($t['child_done'] ?? 0);
|
|
$overdue = \App\Task::isOverdue($t['due_at'] ?? null) && $key !== 'done';
|
|
?>
|
|
<div class="kb-card<?= $overdue ? ' is-overdue' : '' ?>" data-id="<?= $tid ?>"
|
|
draggable="<?= $canWrite ? 'true' : 'false' ?>">
|
|
<a class="kb-title" href="<?= e(url('tasks/show', ['id' => $tid])) ?>">
|
|
<?= e((string)$t['title']) ?>
|
|
</a>
|
|
<div class="kb-meta">
|
|
<?php if (($t['due_at'] ?? '') !== ''): ?>
|
|
<span class="kb-due<?= $overdue ? ' is-late' : '' ?>">
|
|
<?= e(\App\Task::dueWord($t['due_at'] ?? null)) ?>
|
|
</span>
|
|
<?php endif; ?>
|
|
<?php if (!empty($t['repeat_rule'])): ?>
|
|
<span class="node-badge"><?= e(\App\Task::repeatWord($t['repeat_rule'])) ?></span>
|
|
<?php endif; ?>
|
|
<?php if ((int)($t['comment_count'] ?? 0) > 0): ?>
|
|
<span class="kb-ico" title="评论">💬 <?= (int)$t['comment_count'] ?></span>
|
|
<?php endif; ?>
|
|
<?php if ((int)($t['attach_count'] ?? 0) > 0): ?>
|
|
<span class="kb-ico" title="附件">📎 <?= (int)$t['attach_count'] ?></span>
|
|
<?php endif; ?>
|
|
<?php if (($t['category_name'] ?? '') !== ''): ?>
|
|
<span class="node-badge" title="分类"><?= e((string)$t['category_name']) ?></span>
|
|
<?php endif; ?>
|
|
</div>
|
|
<?php if ($total > 0): ?>
|
|
<div class="kb-sub">
|
|
<span class="kb-bar"><i style="width: <?= (int)round($doneN * 100 / max(1, $total)) ?>%"></i></span>
|
|
<span class="kb-sub-n"><?= $doneN ?>/<?= $total ?></span>
|
|
</div>
|
|
<?php endif; ?>
|
|
<div class="kb-foot">
|
|
<?php if (!empty($t['assignee_name'])): ?>
|
|
<?= person_chip([
|
|
'id' => (int)$t['assignee_id'], 'name' => (string)$t['assignee_name'],
|
|
'my_nickname' => (string)($t['assignee_nick'] ?? ''),
|
|
'avatar' => $t['avatar'] ?? null, 'avatar_color' => $t['avatar_color'] ?? null,
|
|
]) ?>
|
|
<?php endif; ?>
|
|
<?php if ($canWrite): ?>
|
|
<span class="kb-move">
|
|
<?php if ($key !== 'todo'): ?>
|
|
<button class="btn btn-ghost btn-sm" type="button"
|
|
data-move="left" data-id="<?= $tid ?>">←</button>
|
|
<?php endif; ?>
|
|
<?php if ($key !== 'done'): ?>
|
|
<button class="btn btn-ghost btn-sm" type="button"
|
|
data-move="right" data-id="<?= $tid ?>">→</button>
|
|
<?php endif; ?>
|
|
</span>
|
|
<?php endif; ?>
|
|
</div>
|
|
</div>
|
|
<?php endforeach; ?>
|
|
<?php if (!($board[$key] ?? [])): ?>
|
|
<p class="empty-hint kb-empty">这一列是空的</p>
|
|
<?php endif; ?>
|
|
</div>
|
|
</section>
|
|
<?php endforeach; ?>
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
var addBtn = document.getElementById('taskAddBtn');
|
|
var addCard = document.getElementById('taskAddCard');
|
|
var addCancel = document.getElementById('taskAddCancel');
|
|
if (addBtn && addCard) {
|
|
addBtn.addEventListener('click', function () {
|
|
addCard.hidden = !addCard.hidden;
|
|
if (!addCard.hidden) { addCard.scrollIntoView({ block: 'nearest' }); }
|
|
});
|
|
}
|
|
if (addCancel && addCard) { addCancel.addEventListener('click', function () { addCard.hidden = true; }); }
|
|
|
|
/* ---- 左右搬（不需要拖也能用）---- */
|
|
var order = ['todo', 'doing', 'done'];
|
|
var form = document.getElementById('taskMoveForm');
|
|
if (!form) return;
|
|
function submitMove(id, status, before) {
|
|
document.getElementById('mvId').value = id;
|
|
document.getElementById('mvStatus').value = status;
|
|
document.getElementById('mvBefore').value = before || '';
|
|
form.submit();
|
|
}
|
|
Array.prototype.forEach.call(document.querySelectorAll('[data-move]'), function (btn) {
|
|
btn.addEventListener('click', function () {
|
|
var card = btn.closest('.kb-card');
|
|
var from = card.closest('.kb-body').getAttribute('data-status');
|
|
var i = order.indexOf(from) + (btn.getAttribute('data-move') === 'right' ? 1 : -1);
|
|
submitMove(card.getAttribute('data-id'), order[i], '');
|
|
});
|
|
});
|
|
|
|
/* ---- 拖动（渐进增强：拖不动还有上面的左右按钮）---- */
|
|
/* ⚠️ v24（用户 2026-10-02 第 8 条）：拖完一张卡，松手那一下浏览器还会
|
|
补一个 click 给卡片里的标题链接 —— 于是"刚拖到位就立刻跳进详情页"，
|
|
看板直接没法用了。
|
|
修法：拖结束就立个牌子 dragEnded，标题链接的 click 看到牌子就吞掉。
|
|
牌子在**下一次 mousedown** 时摘掉（真想点进去总得再按一次鼠标），
|
|
所以不会误伤正常点击 —— 比用 setTimeout 猜时间准得多。 */
|
|
var dragging = null;
|
|
var dragEnded = false;
|
|
document.addEventListener('mousedown', function () { dragEnded = false; }, true);
|
|
Array.prototype.forEach.call(document.querySelectorAll('.kb-card[draggable="true"]'), function (card) {
|
|
card.addEventListener('dragstart', function (ev) {
|
|
dragging = card;
|
|
dragEnded = false;
|
|
card.classList.add('is-dragging');
|
|
if (ev.dataTransfer) { ev.dataTransfer.effectAllowed = 'move'; }
|
|
});
|
|
card.addEventListener('dragend', function () {
|
|
card.classList.remove('is-dragging');
|
|
dragging = null;
|
|
dragEnded = true;
|
|
Array.prototype.forEach.call(document.querySelectorAll('.kb-body.is-over'), function (el) {
|
|
el.classList.remove('is-over');
|
|
});
|
|
});
|
|
});
|
|
Array.prototype.forEach.call(document.querySelectorAll('.kb-card .kb-title'), function (a) {
|
|
a.addEventListener('click', function (ev) {
|
|
if (dragEnded) { ev.preventDefault(); ev.stopPropagation(); }
|
|
});
|
|
});
|
|
Array.prototype.forEach.call(document.querySelectorAll('.kb-body'), function (body) {
|
|
body.addEventListener('dragover', function (ev) {
|
|
if (!dragging) return;
|
|
ev.preventDefault();
|
|
body.classList.add('is-over');
|
|
});
|
|
body.addEventListener('dragleave', function () { body.classList.remove('is-over'); });
|
|
body.addEventListener('drop', function (ev) {
|
|
if (!dragging) return;
|
|
ev.preventDefault();
|
|
body.classList.remove('is-over');
|
|
/* 放在谁前面：找松手位置下方最近的那张卡（排除自己），没有就排到末尾 */
|
|
var after = null;
|
|
var kids = Array.prototype.slice.call(body.querySelectorAll('.kb-card'));
|
|
for (var i = 0; i < kids.length; i++) {
|
|
if (kids[i] === dragging) continue;
|
|
var box = kids[i].getBoundingClientRect();
|
|
if (ev.clientY < box.top + box.height / 2) { after = kids[i]; break; }
|
|
}
|
|
submitMove(dragging.getAttribute('data-id'), body.getAttribute('data-status'),
|
|
after ? after.getAttribute('data-id') : '');
|
|
});
|
|
});
|
|
})();
|
|
</script>
|