v14: 观影/家谱/日程/旅程/资源/任务六模块统一,首页改 dashboard
用户 14 条需求一次交付(1-13 功能 + 14 工作方式)。 观影(1-4) - 返回文案全模块统一为「返回观影」(不再有「返回列表」「返回观影记录」三种叫法) - 观影人一律用彩色人物标签 person_chip:底色由头像主色算出来(上传时存库), 瀑布流卡片也按人显示;五处观影模板全部改用它 - 人员显示统一走 person_name()(shown → 我给他起的称呼 → 姓名) - 影院管理页与年度报告页的上下两块用 .card + .card 统一给间距(原来紧贴成一整块) 家谱(5) - 树根从「我」换成**辈分最高的祖先**:库画的是"树根的祖先链+后代+树根的兄弟姐妹", 根=我 时伯父/堂兄/嫂子/侄子一个都不画(12 人夹具只画出 8 人) - focusMap 按**代数**圈定三代(不再按步数),normalizeLinks 把子女对称挂到父母双方 —— 修掉"母亲登录看不到孩子" - 新增「看全部 / 回到我」两个按钮,放在画布外(画布整块被库接管了手势) 统一事件原语(6-9) - 旅程:TripLog 全量迁入(3 趟旅程 / 21 段行程 / 72 张照片 / 5 个人)。 复用 events(kind='trip') + trip_details + trip_nodes(计划/执行双轨保留) - 日程:每人可建日历本(自定义色)+ 共享只读/可写;观影与旅行是每人默认两本, 内容是**从各模块实时派生**的(不复制,所以改了观影日期日历立刻跟着变); 没有具体时分 = 全天;月视图参照群晖 Calendar - 资源:挂在某人名下的附属信息(标题+正文+多附件),可共享给多人并设只读/读写, 默认折叠、可搜标题与正文 - 任务:看板三列 + 两级子任务 + 评论@人 + 共享 + 循环(完成时按原截止日推下一期) - 统一附件表:四个模块的附件共用一张,下载地址不落库、一律由 media.php 现算 模块化(10-11) - App\Module 是模块的唯一来源(加一行 = 导航条/主题色/个人设置三处自动出现) - 个人设置里可勾选要显示哪些模块、拖动排序(关掉的模块**不会**被兜底补回来) - 每个模块一套主题色(家庭级),只覆盖 --brand 三兄弟,不碰纸墨底色 其他(12-13) - 新增成员表单可选所属分组(编辑表单没有:分组是"我和他的关系",只归我自己) - 首页改 dashboard:接下来的日子 / 未来七天 / 手头在做 / 往年今日。 家人卡片从首页撤走(看人去名册) 验证(全部通过) - e2e 542 条(新增 4 模块端到端 60+ 条) - 桌面几何 368 / 移动端几何 520 / 家谱 12 / 交互 97 / 老库升级 123 - SQL 列名静态校验 0 处可疑(对着真实表结构) - 反向验证 18 条新注入全部抓住 顺带修掉的既有问题 - 老库升级回填 SQL 按实际存在的列动态拼(缺列不再 1054 炸断升级) - 全新安装时 Schema::ensure 跑在"人还没建"之前 → 补建日历本三处齐备 - 窄屏导航横向溢出(模块从 4 个加到 8 个后顶栏撑破视口)
This commit is contained in:
@@ -0,0 +1,236 @@
|
||||
<?php
|
||||
/**
|
||||
* 任务 · 看板(v12):待办 / 进行中 / 已完成 三列。
|
||||
*
|
||||
* 拖动:卡片是 HTML5 draggable,松手时把「拖到哪一列、放在谁后面」写进一个隐藏表单再提交
|
||||
* —— **没有 JS 时每列下方的 ← → 按钮同样能搬**(渐进增强:功能是有的,拖动只是更顺手)。
|
||||
*
|
||||
* ⚠️ 看板里只有父任务:子任务是挂在父任务下面的(点卡片进详情看/勾),
|
||||
* 混进看板会变成一堆没有上下文的小条目,"还剩几件"反而看不清。
|
||||
*
|
||||
* @param array $board ['todo'=>[], 'doing'=>[], 'done'=>[]]
|
||||
* @param array $people 名册(选负责人 / 共享给别人)
|
||||
*/
|
||||
$canWrite = \App\Auth::canWrite();
|
||||
$cols = [['todo', '待办'], ['doing', '进行中'], ['done', '已完成']];
|
||||
?>
|
||||
<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; ?>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<?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>
|
||||
<div class="field">
|
||||
<label for="tk-due">截止时间(有才会出现在日历里)</label>
|
||||
<input class="input" type="date" id="tk-due" name="due_date">
|
||||
</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-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; ?>
|
||||
</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], '');
|
||||
});
|
||||
});
|
||||
|
||||
/* ---- 拖动(渐进增强:拖不动还有上面的左右按钮)---- */
|
||||
var dragging = null;
|
||||
Array.prototype.forEach.call(document.querySelectorAll('.kb-card[draggable="true"]'), function (card) {
|
||||
card.addEventListener('dragstart', function (ev) {
|
||||
dragging = card;
|
||||
card.classList.add('is-dragging');
|
||||
if (ev.dataTransfer) { ev.dataTransfer.effectAllowed = 'move'; }
|
||||
});
|
||||
card.addEventListener('dragend', function () {
|
||||
card.classList.remove('is-dragging');
|
||||
dragging = null;
|
||||
Array.prototype.forEach.call(document.querySelectorAll('.kb-body.is-over'), function (el) {
|
||||
el.classList.remove('is-over');
|
||||
});
|
||||
});
|
||||
});
|
||||
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>
|
||||
Reference in New Issue
Block a user