laoyang
075ac6bbeb
界面（用户 2026-10-12 第 1~5 条） 1. 新建日程「日历本」并入 .cs 自绘下拉，颜色画进候选项，三字与下拉同行。 2. 新建日程「开始/结束」改「日期范围：」，删旧日期控件； 重复相关三行仅选重复时出现；删「（含第一次）」与「这段时间算忙碌」。 3. 条目浮层加「地点」、去掉「状态」行；首页红线按分钟定位（原只取整小时）； 去掉左侧红点只留红线。 4. 任务页删掉状态说明提示（STATUS_HINT 三值清空）。 5. 新建任务：标题在前树框在后；截止时间改最新日历控件；负责人默认自己； 删冗余提示；「上面要做什么」→「任务名称」；清理括号说明。 移动端 API（用户第 6 条：导航模块除外，其余全量） - 新增 Bearer 令牌鉴权（api_tokens 表，Schema v32），与登录口令 / DAV 口令三套分立。 - Api.php 内核（鉴权/取参/信封/分页/分发 + _method 覆写）+ ApiHandler.php 17 条资源 + ApiToken.php + api.php 入口。 - 路由：router.php / .htaccess / index.php 三处 /api/ 兜底（部署脚本自动追加线上规则）。 - 个人设置新增「App 接口令牌」卡；docs/API.md 接口文档； docs/API-QUESTION-LIST.md 自主决策与待确认缺口清单。 验证：本地 e2e 1510/0、v43 真机 33/0、v43 反向 9/0、 v44 真机 41/0、v44 API 63/0、v44 反向 19/0；全流水线 PUSH_RC=0。
598 lines
31 KiB
PHP
598 lines
31 KiB
PHP
<?php
|
||
/**
|
||
* 任务 · 看板（v12；v24 用户 2026-10-03 第 7 条重做列的含义）。
|
||
*
|
||
* ⚠️ 第 7 条原话：「任务模块跟我想的不同，每个人自定义的看板，不是显示在现在的看板上面，
|
||
* 而是**直接代替现在的待办和进行中**，是看板，而不是看板的分类。」
|
||
*
|
||
* 于是这一页的样子变了：
|
||
* · 以前：顶上一条「看板切换」，下面是固定两列「待办 / 进行中」；
|
||
* · 现在：**一列 = 一个看板**（你自己建的那些），全都在同一屏上，
|
||
* 拖动/左右箭头 = **把卡搬到另一个看板**。
|
||
*
|
||
* 三条保留的纪律：
|
||
* · **已完成的任务不在看板上**（用户第 10 条：直接消失）→ 去「任务设置 → 已完成」看；
|
||
* · 拖动是渐进增强：每张卡下面还有 ← → 按钮，没有 JS / 手机上照样能搬；
|
||
* · 看板里只有父任务：子任务挂在父任务下面（点卡片进详情看/勾）。
|
||
*
|
||
* @param array $cols 看板 id => 该列的任务（键 0 = 没有看板归属的兜底列）
|
||
* @param array $boards 看板清单（顺序即列顺序）
|
||
* @param array $people 名册（选负责人 / 共享给别人）
|
||
*/
|
||
$canWrite = \App\Auth::canWrite();
|
||
$boards = $boards ?? [];
|
||
$cols = $cols ?? [];
|
||
$categories = $categories ?? [];
|
||
|
||
/* 列清单：先按 boards 的顺序，最后补上兜底列（键 0，且只在真有任务时才画）。
|
||
⚠️ 兜底列的标题不能叫「未分类」——「分类」在任务模块里是另一回事（task_categories），
|
||
叫「未分类」会让人以为是按分类分的列。这里它表示"还没归到任何看板"，叫「其他」。 */
|
||
$colList = [];
|
||
foreach ($boards as $b) {
|
||
$bid = (int)$b['id'];
|
||
/* 🔴 v24 第 26 批 用户第 3 条：列头带上**看板色**。
|
||
用户要的是"一眼看出属于哪个看板" —— 列头本身就是一个看板，
|
||
给它一个色点，比只在卡片上标色更直观（卡片散落各处，列头是它们的归属地）。 */
|
||
$colList[] = [
|
||
'id' => $bid,
|
||
'name' => (string)$b['name'],
|
||
'color' => \App\Task::boardColor($b['color'] ?? null, (string)$b['name']),
|
||
'rows' => $cols[$bid] ?? [],
|
||
];
|
||
}
|
||
if (!empty($cols[0])) {
|
||
$colList[] = ['id' => 0, 'name' => '其他', 'color' => '', 'rows' => $cols[0]];
|
||
}
|
||
// 一个看板都没有（也不该发生：ensureDefaultBoard 保证至少一个）→ 给一句人话
|
||
if (!$colList) {
|
||
$colList[] = ['id' => 0, 'name' => '任务', 'color' => '', 'rows' => $cols[0] ?? []];
|
||
}
|
||
$firstColId = (int)($colList[0]['id'] ?? 0);
|
||
$lastColIdx = count($colList) - 1;
|
||
?>
|
||
<div class="page-head">
|
||
<h1>任务</h1>
|
||
<span class="sub">
|
||
<?= (int)$total ?> 项在做<?= count($boards) > 1 ? '，' . count($boards) . ' 个看板' : '' ?>
|
||
</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 ($canWrite): ?>
|
||
<?php /* 🔴🔴 v37 用户第 6 条第 3 点：「新建任务也和新建日程一样，新建时弹出一个框，
|
||
新建完之后刷新新建任务的列表、看板页面。」
|
||
⇒ 从"页面上展开的一张卡片"改成**浮层弹框**（与日程弹框同一套形态 / 类名），
|
||
提交后照旧 302 回看板刷新 —— 用户要的"刷新看板页面"就是这样。
|
||
⚠️ 表单字段本身**一个字没动**（除了新加的附件框），服务端契约照旧。 */ ?>
|
||
<div class="cal-modal" id="taskAddCard" role="dialog" aria-modal="true"
|
||
aria-label="新建任务" hidden>
|
||
<div class="cal-modal-panel">
|
||
<div class="cal-modal-head">
|
||
<b>新建任务</b>
|
||
<button type="button" class="cal-modal-x" id="taskAddX" aria-label="关闭">✕</button>
|
||
</div>
|
||
<?php /* ⚠️ enctype 必须有：本批新增了**附件**上传（用户第 6 条第 2 点
|
||
「新建任务时，竟然没有添加附件，这个应该加上」）。
|
||
没有它的话文件根本不会随表单发出去，而且 $_FILES 是空的。 */ ?>
|
||
<form method="post" action="<?= e(url('tasks/create')) ?>"
|
||
enctype="multipart/form-data" id="taskAddForm">
|
||
<?= csrf_field() ?>
|
||
<?php /* ⚠️ 新建后回**看板**（用户：「新建完之后刷新…看板页面」）。
|
||
原来服务端一律 redirect('tasks/show')，新建完会跳去详情页。
|
||
`back=tasks` 走白名单。 */ ?>
|
||
<input type="hidden" name="back" value="tasks">
|
||
<div class="cal-modal-body">
|
||
<?php /* 🔴 v44（用户 2026-10-12 第 5 条）：「新建任务页面的排版还没有统一，
|
||
应该把标题放在前面，树框放在后面。」
|
||
⇒ 用观影/行程/日程那套 **`.mv-grid`**（标签 62px 右对齐 + CSS `::after` 冒号 +
|
||
控件占满剩余宽度），标题那一行在最前、其余字段依次跟上 ——
|
||
"标题在前、后面的框跟上"就是这套排版的自然顺序。 */ ?>
|
||
<div class="mv-grid">
|
||
<div class="mv-row">
|
||
<span class="mv-lb">任务名称<i>*</i></span>
|
||
<input class="input" id="tk-title" name="title" required
|
||
placeholder="如：周末大扫除">
|
||
</div>
|
||
<?php /* v24 第 5 条：截止时刻也走全局统一的「日期 + 时分秒」控件。
|
||
秒这一档保留（与其它模块同一口径），默认 23:59:59 —— "这天之前做完"
|
||
比"这天 00:00 之前"更符合直觉。
|
||
🔴 v44（用户第 5 条）：「截止时间也用我们最新的日历控件，
|
||
记得把现在这个控件删掉。」
|
||
⇒ 换成 AntD 的**单点** DatePicker（带时刻）：
|
||
`$dtPlugin='antd-single'`（见 app.js 的 mountAntdSingleDT）。
|
||
原生那几档下拉由 CSS **真删掉**（不是 clip 藏起来）。
|
||
标签去掉那个括号（见下一条）。 */ ?>
|
||
<div class="mv-row">
|
||
<span class="mv-lb">截止时间</span>
|
||
<?php $dtName = 'due_at'; $dtId = 'tk-due'; $dtValue = null;
|
||
$dtRequired = false; $dtPlugin = 'antd-single';
|
||
require __DIR__ . '/../_datetime.php'; ?>
|
||
</div>
|
||
<?php /* 🔴 v44（用户第 5 条）：「负责人默认是自己。」
|
||
⇒ 默认选中当前登录的人（原来 `$ppSelected = []`，空着）。
|
||
⚠️ 用 `Auth::personId()` 取"我"，与后端"负责人为空"的兜底一致。 */ ?>
|
||
<div class="mv-row">
|
||
<span class="mv-lb">负责人</span>
|
||
<?php
|
||
$ppName = 'assignee_id';
|
||
$ppPeople = $people;
|
||
$ppSelected = [(int)\App\Auth::personId()];
|
||
$ppMode = 'single';
|
||
$ppOpenBtn = '更换负责人';
|
||
$ppTitle = '谁负责这件事';
|
||
$ppEmptyText = '不指定';
|
||
$ppAllowEmpty = true;
|
||
require __DIR__ . '/../_person_picker.php';
|
||
?>
|
||
</div>
|
||
<?php /* 🔴 v44（用户第 5 条）：「状态下面选"已完成"的话，它只在"已完成"里出现，
|
||
看板上不再显示，这句话也去掉。」
|
||
⇒ 删掉那句 `.tip`（状态语义由状态徽标本身表达）。
|
||
⚠️ 用户同条要求「任务页面，任务下面有一行字…这个提示不要了」——
|
||
那是**看板顶部**那块「状态说明」（见上方 legend 那段）。 */ ?>
|
||
<div class="mv-row">
|
||
<span class="mv-lb">状态</span>
|
||
<select class="select" id="tk-status" name="status">
|
||
<?php foreach (\App\Task::STATUS as $sk => $sv): ?>
|
||
<option value="<?= e($sk) ?>" <?= $sk === 'todo' ? 'selected' : '' ?>><?= e($sv) ?></option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
</div>
|
||
<div class="mv-row">
|
||
<span class="mv-lb">循环</span>
|
||
<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="mv-row">
|
||
<span class="mv-lb">分类</span>
|
||
<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>
|
||
<?php /* 用户第 7 条：看板 = 任务"归属哪摊事"，新建时直接选（不再是顶上的切换条） */ ?>
|
||
<div class="mv-row">
|
||
<span class="mv-lb">看板</span>
|
||
<select class="select" id="tk-board" name="board_id">
|
||
<?php foreach ($boards as $b): ?>
|
||
<option value="<?= (int)$b['id'] ?>"><?= e((string)$b['name']) ?></option>
|
||
<?php endforeach; ?>
|
||
</select>
|
||
</div>
|
||
<?php /* 🔴 v44（用户第 5 条）：「"共享给"后面有个括号，可多选，任何人完成都算完成，
|
||
这个括号里面的内容也去掉。」⇒ 标签只留「共享给」。
|
||
第 8 条的同一诉求：人多时不要下拉里瞪眼找。换成弹窗 + 首字母联想。
|
||
⚠️ 候选里去掉**自己**——「共享给自己」是空操作；组件没有"排除项"，
|
||
所以在传进去之前先过滤掉。 */ ?>
|
||
<div class="mv-row">
|
||
<span class="mv-lb">共享给</span>
|
||
<?php
|
||
$ppName = 'shares[]';
|
||
$ppPeople = array_values(array_filter($people,
|
||
fn($p) => (int)$p['id'] !== (int)\App\Auth::personId()));
|
||
$ppSelected = [];
|
||
$ppMode = 'multi';
|
||
$ppOpenBtn = '+ 添加人';
|
||
$ppTitle = '共享给谁';
|
||
require __DIR__ . '/../_person_picker.php';
|
||
?>
|
||
</div>
|
||
<div class="mv-row">
|
||
<span class="mv-lb">备注</span>
|
||
<textarea class="input" id="tk-note" name="note" rows="2"></textarea>
|
||
</div>
|
||
|
||
<?php /* 🔴 v37 用户第 6 条第 2 点：「新建任务时，竟然没有添加附件，
|
||
这个应该加上。」
|
||
⚠️ 走全站统一的「点击或拖动进行上传」框（templates/_stage_drop.php）；
|
||
字段名 `attach[]` 与详情页的附件上传**一致** ——
|
||
服务端 attach_save_files(..., 'attach', ...) 零改动就能收。
|
||
⚠️ 拖进来的走暂存（stage_token[]），随表单一起认领；
|
||
直接点选走 $_FILES 路径。两条路服务端都接（见 attach_save_files）。 */ ?>
|
||
<div class="mv-row">
|
||
<span class="mv-lb">附件</span>
|
||
<?php $sdName = 'attach[]'; $sdId = 'sd-tk-attach'; $sdSlot = 'photo';
|
||
require __DIR__ . '/../_stage_drop.php'; ?>
|
||
</div>
|
||
</div><?php /* /.mv-grid */ ?>
|
||
</div><?php /* /.cal-modal-body */ ?>
|
||
<div class="cal-modal-foot">
|
||
<span class="cal-modal-tip" id="taskAddTip"></span>
|
||
<button class="btn btn-sm" type="submit" form="taskAddForm" id="taskAddSubmit">新建</button>
|
||
<button class="btn btn-ghost btn-sm" type="button" id="taskAddCancel">取消</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</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="board" id="mvBoard">
|
||
<input type="hidden" name="before" id="mvBefore">
|
||
</form>
|
||
|
||
<?php /* v24 第 25 批 用户第 6 条：**每张卡前面一颗「完成」复选框**。
|
||
用户原话：「任务相关的模块，所有的任务，前面都带一个复选框，在任何地方，
|
||
点这个复选框，这个任务就完成了。」
|
||
⚠️ 卡片上只放 `data-tk-done`（见 _task_check.php），真正的表单**全页一份**，
|
||
放在这下面 —— 与搬卡/改状态那两份同一个思路：
|
||
几十张卡就是几十份 form，那是名册页被密码管理器拖垮的同一个坑。 */ ?>
|
||
<?php if ($canWrite): ?>
|
||
<form method="post" action="<?= e(url('tasks/status')) ?>" id="taskDoneForm" class="hidden-form">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" id="doneId">
|
||
<input type="hidden" name="status" id="doneStatus">
|
||
<input type="hidden" name="back" id="doneBack" value="tasks">
|
||
</form>
|
||
<?php endif; ?>
|
||
|
||
<?php /* 🔴 v44（用户 2026-10-12 第 4 条）：「任务页面，任务下面有一行字：
|
||
"待办记下来了，还没动手，排队等着进行"之类的。这个提示不要了，去掉。」
|
||
⇒ 整块「状态说明」legend **删掉**（连那三个状态徽标也一起去掉）——
|
||
用户要的是"任务下面不要再挂一行字"，留着徽标仍然是一行字。
|
||
⚠️ `Task::STATUS_HINT` / `statusHint()` **保留在类里**（它是这三个状态语义的
|
||
唯一书面定义，后端/文案用得上），只是**界面不再渲染**。
|
||
⚠️ `.tk-legend` 那条 CSS 留着不动：删 CSS 会牵连缩进，而它只是空规则，
|
||
真正的约束是"模板里不再输出 TK-LEGEND 这一块"。 */ ?>
|
||
|
||
<?php /* v24 第 14 批 用户第 2 条：**每张卡上都能看到并改状态**。
|
||
⚠️ 与上面搬卡那份同理：表单全页只有一份，卡片上只放 `data-st-*`，
|
||
不然几十张卡就是几十份 form —— 名册就是这么被密码管理器拖垮的。 */ ?>
|
||
<form method="post" action="<?= e(url('tasks/status')) ?>" id="taskStatusForm" class="hidden-form">
|
||
<?= csrf_field() ?>
|
||
<input type="hidden" name="id" id="stId">
|
||
<input type="hidden" name="status" id="stStatus">
|
||
<input type="hidden" name="back" value="tasks">
|
||
</form>
|
||
|
||
<div class="kanban" data-cols="<?= count($colList) ?>">
|
||
<?php foreach ($colList as $ci => $col): $cid = (int)$col['id']; ?>
|
||
<section class="kb-col" data-board="<?= $cid ?>">
|
||
<header class="kb-head">
|
||
<?php if ((string)($col['color'] ?? '') !== ''): ?>
|
||
<i class="kb-dot" style="--bc: <?= e((string)$col['color']) ?>;" aria-hidden="true"></i>
|
||
<?php endif; ?>
|
||
<b><?= e((string)$col['name']) ?></b>
|
||
<span class="kb-n"><?= count($col['rows']) ?></span>
|
||
</header>
|
||
<div class="kb-body" data-board="<?= $cid ?>">
|
||
<?php foreach ($col['rows'] as $t): ?>
|
||
<?php
|
||
$tid = (int)$t['id'];
|
||
$kids = (int)($t['child_total'] ?? 0);
|
||
$doneN = (int)($t['child_done'] ?? 0);
|
||
$overdue = \App\Task::isOverdue($t['due_at'] ?? null);
|
||
?>
|
||
<div class="kb-card<?= $overdue ? ' is-overdue' : '' ?>" data-id="<?= $tid ?>"
|
||
draggable="<?= $canWrite ? 'true' : 'false' ?>">
|
||
<?php /* 用户第 6 条：**任务前面带复选框**，点它就是"完成"。
|
||
⚠️ 复选框与标题必须包在 `.kb-top` 里**横排** ——
|
||
卡片是 flex-column，不包的话复选框独占一行、标题被挤下去。 */ ?>
|
||
<div class="kb-top">
|
||
<?php
|
||
$tkId = $tid; $tkStatus = (string)($t['status'] ?? 'todo');
|
||
$tkBack = 'tasks'; $tkStatic = !$canWrite;
|
||
require __DIR__ . '/../_task_check.php';
|
||
?>
|
||
<a class="kb-title" href="<?= e(url('tasks/show', ['id' => $tid])) ?>">
|
||
<?= e((string)$t['title']) ?>
|
||
</a>
|
||
</div>
|
||
<?php /* 状态徽标：每一张卡都有（用户第 2 条「每个任务都应该有不同的状态」）。
|
||
点一下推进到下一个状态：待办 → 进行中 → 已完成 → 回到待办
|
||
（最后一档做成可回头，是"点错了能改回来"，完成本身另有详情页的按钮）。
|
||
⚠️ 只读账号给的是**静态**徽标（span），点了没反应还容易误会。 */ ?>
|
||
<?php
|
||
$stNow = (string)($t['status'] ?? 'todo');
|
||
$stNext = ['todo' => 'doing', 'doing' => 'done', 'done' => 'todo'][$stNow] ?? 'doing';
|
||
?>
|
||
<div class="kb-meta">
|
||
<?php if ($canWrite): ?>
|
||
<?php /* ⚠️ v24 第 26 批 用户第 3 条：这里原来有 `title="现在：待办；点一下改成「进行中」"`。
|
||
那串提示在卡片里离**完成复选框**很近（kb-top 下一行），鼠标一停就弹出来压住它
|
||
—— 用户报的正是「提示把复选框都盖住了」。
|
||
去掉 title：状态**已经写在按钮文字上**（待办/进行中），
|
||
点一下会变成下一档这件事由按钮的样式（可点）表达，不需要再弹一段长文。
|
||
`aria-label` 也一并去掉 —— 它同样会生成浮层；无障碍改用 visually-hidden 文本。 */ ?>
|
||
<button class="kb-st is-<?= e($stNow) ?>" type="button"
|
||
data-st-id="<?= $tid ?>" data-st="<?= e($stNow) ?>" data-next="<?= e($stNext) ?>">
|
||
<?= e(\App\Task::statusWord($stNow)) ?>
|
||
<span class="visually-hidden">，点一下改成「<?= e(\App\Task::statusWord($stNext)) ?>」</span>
|
||
</button>
|
||
<?php else: ?>
|
||
<span class="kb-st is-<?= e($stNow) ?> is-static"><?= e(\App\Task::statusWord($stNow)) ?></span>
|
||
<?php endif; ?>
|
||
<?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 ($kids > 0): ?>
|
||
<div class="kb-sub">
|
||
<span class="kb-bar"><i style="width: <?= (int)round($doneN * 100 / max(1, $kids)) ?>%"></i></span>
|
||
<span class="kb-sub-n"><?= $doneN ?>/<?= $kids ?></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 ($ci > 0): ?>
|
||
<button class="btn btn-ghost btn-sm" type="button"
|
||
data-move="left" data-id="<?= $tid ?>">←</button>
|
||
<?php endif; ?>
|
||
<?php if ($ci < $lastColIdx): ?>
|
||
<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 (!$col['rows']): ?>
|
||
<p class="empty-hint kb-empty">这一列是空的</p>
|
||
<?php endif; ?>
|
||
</div>
|
||
</section>
|
||
<?php endforeach; ?>
|
||
</div>
|
||
|
||
<script>
|
||
(function () {
|
||
/* ---- "新建任务"弹框（v37：从内联卡片改成浮层）----
|
||
⚠️ 不再 scrollIntoView —— 那是"卡片长在页面上"时代才需要的动作；
|
||
浮层固定在视口中央，底下的看板一动不动。 */
|
||
var addBtn = document.getElementById('taskAddBtn');
|
||
var addCard = document.getElementById('taskAddCard');
|
||
var addX = document.getElementById('taskAddX');
|
||
var addCancel = document.getElementById('taskAddCancel');
|
||
function openAdd() {
|
||
if (!addCard) { return; }
|
||
addCard.hidden = false;
|
||
var t = document.getElementById('tk-title');
|
||
if (t) { t.focus(); }
|
||
}
|
||
function closeAdd() { if (addCard) { addCard.hidden = true; } }
|
||
if (addBtn && addCard) { addBtn.addEventListener('click', openAdd); }
|
||
if (addX) { addX.addEventListener('click', closeAdd); }
|
||
if (addCancel) { addCancel.addEventListener('click', closeAdd); }
|
||
/* 点遮罩关（点面板内不关）/ Esc 关 —— 与站内其它浮层同一套行为。 */
|
||
if (addCard) {
|
||
addCard.addEventListener('click', function (e) { if (e.target === addCard) { closeAdd(); } });
|
||
}
|
||
document.addEventListener('keydown', function (e) {
|
||
if (e.key === 'Escape' && addCard && !addCard.hidden) { closeAdd(); }
|
||
});
|
||
|
||
/* ---- 左右搬（不需要拖也能用）----
|
||
⚠️ 列的集合**从 DOM 现取**，不要写死数组：看板是用户自己建的，
|
||
"待办/进行中/已完成"那套常量在这儿已经不成立了。 */
|
||
var form = document.getElementById('taskMoveForm');
|
||
if (!form) return;
|
||
var colIds = Array.prototype.map.call(
|
||
document.querySelectorAll('.kb-body[data-board]'),
|
||
function (b) { return b.getAttribute('data-board'); }
|
||
);
|
||
function submitMove(id, board, before) {
|
||
document.getElementById('mvId').value = id;
|
||
document.getElementById('mvBoard').value = board;
|
||
document.getElementById('mvBefore').value = before || '';
|
||
form.submit();
|
||
}
|
||
|
||
/* ---- 状态徽标：点一下推进到下一个状态（用户第 2 条）----
|
||
走的是**全页一份**的 #taskStatusForm（卡片上只有 data-st-*），
|
||
与搬卡那份表单同一思路 —— 不这么做的话，几十张卡就是几十份 form。
|
||
⚠️ v24 第 25 批 用户第 6 条：改成 **AJAX 就地改**（原来是整页提交）。
|
||
理由是"复选框在任何地方点一下就完成"这件事，如果每次都刷整页，
|
||
在首页点完会跳回首页顶部、滚动位置全丢 —— 那不是"点一下"，是"打一次断"。
|
||
失败仍退回原生提交（见 catch / 无 JSON 分支），所以没有 JS 照样能用。 */
|
||
var stForm = document.getElementById('taskStatusForm');
|
||
if (stForm) {
|
||
Array.prototype.forEach.call(document.querySelectorAll('.kb-st[data-st-id]'), function (b) {
|
||
b.addEventListener('click', function (ev) {
|
||
ev.preventDefault();
|
||
ev.stopPropagation();
|
||
submitStatus(b.getAttribute('data-st-id'), b.getAttribute('data-next'), b);
|
||
});
|
||
});
|
||
}
|
||
|
||
/* ---- 完成复选框（用户第 6 条）：点一下 = 完成 ---- */
|
||
var doneForm = document.getElementById('taskDoneForm');
|
||
function submitStatus(id, status, btn) {
|
||
if (!doneForm) { return; }
|
||
document.getElementById('doneId').value = id;
|
||
document.getElementById('doneStatus').value = status;
|
||
document.getElementById('doneBack').value = (btn && btn.getAttribute('data-tk-back')) || 'tasks';
|
||
// 没有 fetch（极老浏览器）→ 直接原生提交，不假装成功
|
||
if (!window.fetch || !window.FormData) {
|
||
doneForm.submit();
|
||
return;
|
||
}
|
||
if (btn) { btn.disabled = true; }
|
||
fetch(doneForm.getAttribute('action'), {
|
||
method: 'POST',
|
||
body: new FormData(doneForm),
|
||
credentials: 'same-origin',
|
||
headers: { 'X-Requested-With': 'XMLHttpRequest' }
|
||
}).then(function (r) {
|
||
return r.json().catch(function () { return null; });
|
||
}).then(function (d) {
|
||
if (btn) { btn.disabled = false; }
|
||
if (d && d.ok) {
|
||
applyStatus(String(d.id), String(d.status), String(d.word || ''));
|
||
return;
|
||
}
|
||
if (d && d.msg) { say(d.msg, false); return; }
|
||
// 拿不到 JSON（会话过期 / 500）→ 退回原生提交，让服务端说话
|
||
doneForm.submit();
|
||
}).catch(function () {
|
||
if (btn) { btn.disabled = false; }
|
||
doneForm.submit();
|
||
});
|
||
}
|
||
|
||
/** 把一张卡的状态**就地**改掉：复选框、状态徽标、卡片样式一起动。
|
||
* ⚠️ 完成之后看板上还有没有这张卡，交给用户刷新时由服务端决定 ——
|
||
* 不在这里偷偷摘卡片：任务是"刚做完"，正想看一眼自己刚完成什么，
|
||
* 立刻消失会让人怀疑"是不是点到删除了"。 */
|
||
function applyStatus(id, status, word) {
|
||
var card = document.querySelector('.kb-card[data-id="' + id + '"]');
|
||
if (!card) { return; }
|
||
var chk = card.querySelector('.tk-check[data-tk-done]');
|
||
if (chk) {
|
||
chk.setAttribute('data-tk-status', status);
|
||
chk.classList.toggle('is-done', status === 'done');
|
||
chk.setAttribute('aria-pressed', status === 'done' ? 'true' : 'false');
|
||
}
|
||
var badge = card.querySelector('.kb-st[data-st-id]');
|
||
if (badge) {
|
||
var next = status === 'todo' ? 'doing' : (status === 'doing' ? 'done' : 'todo');
|
||
badge.className = 'kb-st is-' + status;
|
||
badge.setAttribute('data-st', status);
|
||
badge.setAttribute('data-next', next);
|
||
badge.textContent = word;
|
||
/* 🔴🔴 v28 用户第 4 条：「任务完成复选框的提示文字还在，需要删除。」
|
||
根因就在这一行 —— 它给**状态徽标**动态挂了一个 `title`。
|
||
v24 第 26 批只把**静态渲染**里那颗徽标的 title 去掉了（服务端模板），
|
||
却漏了这一处 JS：用户只要点过一次复选框，徽标就又被安上 tooltip，
|
||
而它离复选框最近，鼠标一停就把复选框盖住 —— 与当初报的是同一个现象。
|
||
⚠️ 上一批的静态断言（查渲染出的 HTML 里有没有 `title=`）**永远抓不到**：
|
||
它只在点击之后才出现。这类"JS 复活的旧写法"必须靠真机点击验证。
|
||
⇒ 直接删掉，不再设 title；无障碍说明靠 aria-label（不产生可见浮层）。 */
|
||
badge.setAttribute('aria-label', word);
|
||
}
|
||
card.classList.toggle('is-done', status === 'done');
|
||
say('已标成「' + word + '」。', true);
|
||
}
|
||
|
||
/** 页内提示（用页面自己的 flash 样式，不弹 alert） */
|
||
function say(msg, ok) {
|
||
var host = document.querySelector('.flash');
|
||
if (!host) {
|
||
host = document.createElement('div');
|
||
host.className = 'flash';
|
||
var main = document.querySelector('main') || document.body;
|
||
main.insertBefore(host, main.firstChild);
|
||
}
|
||
var el = document.createElement('div');
|
||
el.className = 'flash-item' + (ok ? '' : ' err');
|
||
el.setAttribute('role', 'status');
|
||
el.textContent = msg;
|
||
host.insertBefore(el, host.firstChild);
|
||
setTimeout(function () { if (el.parentNode) { el.parentNode.removeChild(el); } }, 3200);
|
||
}
|
||
|
||
Array.prototype.forEach.call(document.querySelectorAll('.tk-check[data-tk-done]'), function (b) {
|
||
b.addEventListener('click', function (ev) {
|
||
ev.preventDefault();
|
||
ev.stopPropagation();
|
||
var now = b.getAttribute('data-tk-status') || 'todo';
|
||
// 勾上 = 完成；已完成的再点一下 = 取消（回到「待办」）——
|
||
// 用户可能点错了，必须能退回来（这与"没有任何撤销"的删除是两回事）。
|
||
submitStatus(b.getAttribute('data-tk-done'), now === 'done' ? 'todo' : 'done', b);
|
||
});
|
||
});
|
||
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-board');
|
||
var i = colIds.indexOf(from) + (btn.getAttribute('data-move') === 'right' ? 1 : -1);
|
||
if (i < 0 || i >= colIds.length) { return; }
|
||
submitMove(card.getAttribute('data-id'), colIds[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-board'),
|
||
after ? after.getAttribute('data-id') : '');
|
||
});
|
||
});
|
||
})();
|
||
</script>
|