feat: 优化任务详情抽屉时间信息展示顺序
This commit is contained in:
@@ -143,7 +143,7 @@ const LINKS = [
|
||||
|
||||
<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} 个任务)`"
|
||||
@click="ui.openTrash()"
|
||||
>
|
||||
@@ -168,7 +168,7 @@ const LINKS = [
|
||||
<span class="hidden sm:inline">回收站</span>
|
||||
<span
|
||||
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 }}
|
||||
</span>
|
||||
@@ -176,7 +176,7 @@ const LINKS = [
|
||||
|
||||
<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="备份"
|
||||
@click="ui.openBackup()"
|
||||
>
|
||||
|
||||
@@ -302,7 +302,7 @@ defineExpose({ focusSearch })
|
||||
<button
|
||||
v-if="archivableCount > 0"
|
||||
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')"
|
||||
>
|
||||
归档 {{ archivableCount }} 个已完成
|
||||
|
||||
@@ -213,6 +213,12 @@ describe('TaskDetailDrawer 时间信息', () => {
|
||||
/** `YYYY-MM-DD HH:mm` */
|
||||
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('显示创建与更新时间,未完成时完成时间标注为「未完成」', () => {
|
||||
const { wrapper } = setup()
|
||||
|
||||
|
||||
@@ -253,6 +253,8 @@ function remove(): void {
|
||||
时间:标题与「标签」同级平铺,明细单独用一个描边框圈起来。
|
||||
只靠字号(标题 text-sm / 明细 text-xs)分层,框只负责把只读信息
|
||||
和上方的可编辑字段区分开,不参与层级表达。
|
||||
明细顺序固定为 创建 → 更新 → 完成(归档时再追加一行),
|
||||
按时间线上的发生次序排列,而不是按字段重要性。
|
||||
-->
|
||||
<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">
|
||||
@@ -266,6 +268,11 @@ function remove(): void {
|
||||
{{ createdAtText ?? '—' }}
|
||||
</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>
|
||||
<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'">
|
||||
@@ -273,11 +280,6 @@ function remove(): void {
|
||||
</span>
|
||||
</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">
|
||||
<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">
|
||||
|
||||
Reference in New Issue
Block a user