feat(board): 展示任务时间,并修正已完成任务的逾期基准
CI / verify (push) Successful in 1m43s
CI / 部署到服务器 (push) Successful in 26s

时间展示(ADR-008):
- 详情抽屉新增只读「时间」区块:创建 / 更新常驻,完成时间缺失时标注「未完成」,归档任务追加归档时间;时间不进入草稿与 dirty 判定
- 已完成卡片在元信息行右侧显示「完成于 M月D日」,卡片根元素 title 汇总创建 / 完成 / 归档时间(精确到分钟)
- 回收站条目补创建时间,删掉内联 formatTime,统一走 @/utils/date
- date.ts 新增 formatDateTime(YYYY-MM-DD HH:mm)与 formatCompactDate(同年 M月D日 / 跨年带年份),空值与非法时间戳返回 null

逾期基准修复:
- 新增 formatDueDateForTask:未完成任务仍以「今天」推算;已完成任务改以「完成日」推算,19 号截止、19 号当天完成的任务不会在 20 号显示「逾期 1 天」,完成时确实超期则定格为「逾期 N 天完成」,不再随日期增长
- 新增 localDateOf:completedAt 存 UTC 时间戳,按本地时区取日期,避免跨日偏差
- TaskCard 改用 dueLabel computed 取代模板内直接调用 formatDueDate;颜色仍由 isOverdue 决定,已完成卡片保持中性色

测试:date / TaskCard 补时间格式化与逾期基准用例(当天完成、提前完成、完成时超期定格、缺 completedAt、跨年),全量 728 单测通过;vue-tsc 与 eslint 干净。
This commit is contained in:
chenshoulin
2026-10-20 09:23:29 +08:00
parent a269694834
commit b39267fba7
10 changed files with 392 additions and 11 deletions
+38 -3
View File
@@ -2,7 +2,7 @@
import { computed } from 'vue'
import { PRIORITY_LABELS, type MoveDirection, type Task } from '@/types/task'
import { formatDueDate, isOverdue } from '@/utils/date'
import { formatCompactDate, formatDateTime, formatDueDateForTask, isOverdue } from '@/utils/date'
const MAX_VISIBLE_TAGS = 3
@@ -60,9 +60,34 @@ function onKeydown(event: KeyboardEvent): void {
const isDone = computed(() => props.task.status === 'done')
const overdue = computed(() => isOverdue(props.task.dueDate, props.task.status))
/**
* 截止日期文案:已完成的任务以「完成日」为基准,未完成的以「今天」为基准。
* 这样 19 号截止、19 号完成的任务第二天不会再被说成「逾期 1 天」。
*/
const dueLabel = computed(() =>
props.task.dueDate
? formatDueDateForTask(props.task.dueDate, props.task.status, props.task.completedAt)
: null,
)
const visibleTags = computed(() => props.task.tags.slice(0, MAX_VISIBLE_TAGS))
const hiddenTagCount = computed(() => Math.max(0, props.task.tags.length - MAX_VISIBLE_TAGS))
/**
* 完成时间:已完成卡片上显示一行短日期,精确到分钟的时间留给 `title` 与详情抽屉。
* 未完成时 completedAt 为 null,这一行整体不渲染,避免给待办卡片增加噪音。
*/
const completedAtFull = computed(() => formatDateTime(props.task.completedAt))
const completedAtShort = computed(() => formatCompactDate(props.task.completedAt))
/** 悬停卡片即可看到完整时间,不必先打开详情抽屉 */
const timeTitle = computed(() => {
const lines = [`创建于 ${formatDateTime(props.task.createdAt) ?? '—'}`]
if (completedAtFull.value) lines.push(`完成于 ${completedAtFull.value}`)
if (props.task.archivedAt) lines.push(`归档于 ${formatDateTime(props.task.archivedAt) ?? '—'}`)
return lines.join('\n')
})
/**
* 卡片外观。选中态与「已完成」都要覆盖边框/背景,
* 因此这些颜色放在条件分支里,而不是和基础类各写一份靠优先级取胜。
@@ -111,6 +136,7 @@ const priorityTextClass = computed(() => {
:role="selectable ? 'checkbox' : undefined"
:aria-checked="selectable ? selected === true : undefined"
:aria-label="selectable ? `选择任务「${task.title}」` : undefined"
:title="timeTitle"
tabindex="0"
@click="activate"
@keydown="onKeydown"
@@ -186,14 +212,14 @@ const priorityTextClass = computed(() => {
</span>
<span
v-if="task.dueDate"
v-if="dueLabel"
:class="
overdue
? 'font-medium text-rose-600 dark:text-rose-400'
: 'text-slate-500 dark:text-zinc-400'
"
>
{{ formatDueDate(task.dueDate) }}
{{ dueLabel }}
</span>
<span v-for="tag in visibleTags" :key="tag" class="text-slate-400 dark:text-zinc-500">
@@ -202,6 +228,15 @@ const priorityTextClass = computed(() => {
<span v-if="hiddenTagCount > 0" class="text-slate-400 dark:text-zinc-500">
+{{ hiddenTagCount }}
</span>
<span
v-if="completedAtShort"
data-role="completed-at"
:title="`完成于 ${completedAtFull}`"
class="ml-auto text-emerald-700/80 dark:text-emerald-400/80"
>
完成于 {{ completedAtShort }}
</span>
</div>
</div>
</article>