feat: 优化任务详情抽屉时间信息展示顺序
CI / verify (push) Successful in 1m39s
CI / 部署到服务器 (push) Successful in 26s

This commit is contained in:
chenshoulin
2026-10-24 19:37:38 +08:00
parent 1d92ab2cb5
commit 29100b6d7d
4 changed files with 17 additions and 9 deletions
+3 -3
View File
@@ -143,7 +143,7 @@ const LINKS = [
<button <button
type="button" type="button"
class="relative flex items-center gap-1.5 rounded-md border border-slate-200 px-2.5 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800" class="group relative flex items-center gap-1.5 rounded-md border border-slate-200 px-2.5 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
:aria-label="`回收站(${store.trashTasks.length} 个任务)`" :aria-label="`回收站(${store.trashTasks.length} 个任务)`"
@click="ui.openTrash()" @click="ui.openTrash()"
> >
@@ -168,7 +168,7 @@ const LINKS = [
<span class="hidden sm:inline">回收站</span> <span class="hidden sm:inline">回收站</span>
<span <span
v-if="store.trashTasks.length > 0" v-if="store.trashTasks.length > 0"
class="rounded-full bg-slate-200 px-1.5 text-[11px] leading-4 font-medium text-slate-700 dark:bg-zinc-700 dark:text-zinc-200" class="rounded-full bg-slate-200 px-1.5 text-[11px] leading-4 font-medium text-slate-700 dark:bg-zinc-700 dark:text-zinc-200 dark:group-hover:bg-zinc-600 dark:group-hover:text-zinc-50"
> >
{{ store.trashTasks.length }} {{ store.trashTasks.length }}
</span> </span>
@@ -176,7 +176,7 @@ const LINKS = [
<button <button
type="button" type="button"
class="flex items-center gap-1.5 rounded-md border border-slate-200 px-2.5 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800" class="flex items-center gap-1.5 rounded-md border border-slate-200 px-2.5 py-1.5 text-sm text-slate-600 transition hover:border-slate-300 hover:bg-slate-50 hover:text-slate-900 dark:border-zinc-700 dark:text-zinc-300 dark:hover:border-zinc-600 dark:hover:bg-zinc-800 dark:hover:text-zinc-100"
aria-label="备份" aria-label="备份"
@click="ui.openBackup()" @click="ui.openBackup()"
> >
+1 -1
View File
@@ -302,7 +302,7 @@ defineExpose({ focusSearch })
<button <button
v-if="archivableCount > 0" v-if="archivableCount > 0"
type="button" type="button"
class="rounded text-slate-600 underline decoration-slate-300 underline-offset-2 transition hover:text-slate-900 hover:decoration-slate-500 dark:text-zinc-400 dark:decoration-zinc-600 dark:hover:text-zinc-200" class="rounded text-slate-600 underline decoration-slate-300 underline-offset-2 transition hover:text-slate-900 hover:decoration-slate-500 dark:text-zinc-400 dark:decoration-zinc-600 dark:hover:text-zinc-200 dark:hover:decoration-zinc-400"
@click="emit('archive')" @click="emit('archive')"
> >
归档 {{ archivableCount }} 个已完成 归档 {{ archivableCount }} 个已完成
+6
View File
@@ -213,6 +213,12 @@ describe('TaskDetailDrawer 时间信息', () => {
/** `YYYY-MM-DD HH:mm` */ /** `YYYY-MM-DD HH:mm` */
const DATE_TIME_PATTERN = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/ const DATE_TIME_PATTERN = /^\d{4}-\d{2}-\d{2} \d{2}:\d{2}$/
it('时间按创建、更新、完成的顺序展示', () => {
const { wrapper } = setup()
expect(wrapper.findAll('dt').map((node) => node.text())).toEqual(['创建', '更新', '完成'])
})
it('显示创建与更新时间,未完成时完成时间标注为「未完成」', () => { it('显示创建与更新时间,未完成时完成时间标注为「未完成」', () => {
const { wrapper } = setup() const { wrapper } = setup()
+7 -5
View File
@@ -253,6 +253,8 @@ function remove(): void {
时间:标题与「标签」同级平铺,明细单独用一个描边框圈起来。 时间:标题与「标签」同级平铺,明细单独用一个描边框圈起来。
只靠字号(标题 text-sm / 明细 text-xs)分层,框只负责把只读信息 只靠字号(标题 text-sm / 明细 text-xs)分层,框只负责把只读信息
和上方的可编辑字段区分开,不参与层级表达。 和上方的可编辑字段区分开,不参与层级表达。
明细顺序固定为 创建 → 更新 → 完成(归档时再追加一行),
按时间线上的发生次序排列,而不是按字段重要性。
--> -->
<section class="flex flex-col gap-1.5" aria-labelledby="task-time-heading"> <section class="flex flex-col gap-1.5" aria-labelledby="task-time-heading">
<h3 id="task-time-heading" class="text-sm font-medium text-slate-600 dark:text-zinc-400"> <h3 id="task-time-heading" class="text-sm font-medium text-slate-600 dark:text-zinc-400">
@@ -266,6 +268,11 @@ function remove(): void {
{{ createdAtText ?? '—' }} {{ createdAtText ?? '—' }}
</dd> </dd>
<dt class="text-slate-400 dark:text-zinc-500">更新</dt>
<dd data-role="updated-at" class="tabular-nums text-slate-600 dark:text-zinc-300">
{{ updatedAtText ?? '—' }}
</dd>
<dt class="text-slate-400 dark:text-zinc-500">完成</dt> <dt class="text-slate-400 dark:text-zinc-500">完成</dt>
<dd data-role="completed-at" class="tabular-nums text-slate-600 dark:text-zinc-300"> <dd data-role="completed-at" class="tabular-nums text-slate-600 dark:text-zinc-300">
<span :class="completedAtText ? '' : 'text-slate-400 dark:text-zinc-500'"> <span :class="completedAtText ? '' : 'text-slate-400 dark:text-zinc-500'">
@@ -273,11 +280,6 @@ function remove(): void {
</span> </span>
</dd> </dd>
<dt class="text-slate-400 dark:text-zinc-500">更新</dt>
<dd data-role="updated-at" class="tabular-nums text-slate-600 dark:text-zinc-300">
{{ updatedAtText ?? '—' }}
</dd>
<template v-if="archivedAtText"> <template v-if="archivedAtText">
<dt class="text-slate-400 dark:text-zinc-500">归档</dt> <dt class="text-slate-400 dark:text-zinc-500">归档</dt>
<dd data-role="archived-at" class="tabular-nums text-slate-600 dark:text-zinc-300"> <dd data-role="archived-at" class="tabular-nums text-slate-600 dark:text-zinc-300">