feat: 更新统计卡片描述,优化可读性
CI / verify (push) Successful in 1m41s
CI / 部署到服务器 (push) Successful in 26s

This commit is contained in:
chenshoulin
2026-10-24 18:58:06 +08:00
parent da8fb5fe81
commit 5133bf768c
3 changed files with 11 additions and 20 deletions
+2 -2
View File
@@ -159,9 +159,9 @@ describe('App 路由', () => {
await nextTick() await nextTick()
const values = wrapper.findAll('dd').map((node) => node.text()) const values = wrapper.findAll('dd').map((node) => node.text())
// 统计带 = [逾期, 今天到期, 进行中, 待办]:刚完成的任务不进任何分组,四格都应是 0 // 统计卡 = [逾期, 今天到期, 进行中, 待办]:刚完成的任务不进任何分组,四格都应是 0
expect(values).toEqual(['0', '0', '0', '0']) expect(values).toEqual(['0', '0', '0', '0'])
// 「本周完成」已移到页头副标题,不再占统计格 // 「本周完成」跟在页头日期后面,不占统计格
expect(wrapper.find('[data-role="completed-this-week"]').text()).toBe('1') expect(wrapper.find('[data-role="completed-this-week"]').text()).toBe('1')
wrapper.unmount() wrapper.unmount()
}) })
+2 -2
View File
@@ -70,14 +70,14 @@ describe('TodayView 顶部', () => {
expect(values).toEqual(['1', '1', '1', '0']) expect(values).toEqual(['1', '1', '1', '0'])
}) })
it('「本周完成」放在页头,不占统计格', () => { it('「本周完成」跟在日期后面,不占统计格', () => {
const { wrapper } = setup([{ title: '刚做完', status: 'done' }]) const { wrapper } = setup([{ title: '刚做完', status: 'done' }])
expect(wrapper.find('[data-role="completed-this-week"]').text()).toBe('1') expect(wrapper.find('[data-role="completed-this-week"]').text()).toBe('1')
expect(wrapper.findAll('dt').map((node) => node.text())).not.toContain('本周完成') expect(wrapper.findAll('dt').map((node) => node.text())).not.toContain('本周完成')
}) })
it('统计带四个数字等于对应分组的条数(同一屏不重复强调)', () => { it('统计卡四个数字等于对应分组的条数', () => {
const { wrapper } = setup([ const { wrapper } = setup([
{ title: '逾期 A', dueDate: yesterday }, { title: '逾期 A', dueDate: yesterday },
{ title: '逾期 B', dueDate: yesterday }, { title: '逾期 B', dueDate: yesterday },
+7 -16
View File
@@ -37,12 +37,8 @@ const stats = computed(() => computeStats(activeTasks.value))
const todayCount = computed(() => countTodayTasks(buckets.value)) const todayCount = computed(() => countTodayTasks(buckets.value))
/** /**
* 统计带与下方分组一一对应:四个数字就是四组任务量。 * 统计卡片与下方分组一一对应:四个数字就是四组任务量。
* * 「本周完成」下方没有对应分组,属于回顾性指标,放页头日期后面。
* 早先这里放的是「逾期 / 今天到期 / 进行中 / 本周完成」——「本周完成」在下方
* 没有对应分组,而「待办」这一组又没有统计卡,所谓「一一对应」并不成立;
* 三个数字还会在分组徽章上再说一遍。
* 现在「本周完成」属于回顾性指标,移到页头副标题;分组头只留纯文字「N 项」。
*/ */
const statCards = computed(() => [ const statCards = computed(() => [
{ label: '逾期', value: buckets.value.overdue.length, dot: 'bg-rose-500' }, { label: '逾期', value: buckets.value.overdue.length, dot: 'bg-rose-500' },
@@ -97,7 +93,7 @@ function handleKeyMove(payload: { id: string; direction: MoveDirection }): void
<h1 class="text-xl font-semibold tracking-tight text-slate-900 md:text-2xl dark:text-zinc-100"> <h1 class="text-xl font-semibold tracking-tight text-slate-900 md:text-2xl dark:text-zinc-100">
今日 今日
</h1> </h1>
<!-- 「本周完成」在下方没有对应分组,属于回顾性指标,放页头而不是占一格统计 --> <!-- 「本周完成」在下方没有对应分组,属于回顾性指标,跟在日期后面而不是占一格统计 -->
<p class="text-sm text-slate-500 dark:text-zinc-400"> <p class="text-sm text-slate-500 dark:text-zinc-400">
{{ todayLabel }} · 本周完成 {{ todayLabel }} · 本周完成
<span <span
@@ -109,24 +105,19 @@ function handleKeyMove(payload: { id: string; direction: MoveDirection }): void
</p> </p>
</header> </header>
<!-- <!-- 四张独立卡片:圆点 + 灰色标签,下方大号数字 -->
四格合成一条带:gap-px + 露出父级底色,得到 1px 分隔线。 <dl class="grid grid-cols-2 gap-3 md:grid-cols-4">
比四张独立卡片少三道投影、四条边框,读起来是「一个总览」而不是四个小组件。
-->
<dl
class="grid grid-cols-2 gap-px overflow-hidden rounded-xl border border-slate-200 bg-slate-200 md:grid-cols-4 dark:border-zinc-800 dark:bg-zinc-800"
>
<div <div
v-for="card in statCards" v-for="card in statCards"
:key="card.label" :key="card.label"
class="bg-white px-4 py-3.5 dark:bg-zinc-900" class="rounded-xl border border-slate-200 bg-white px-4 py-3.5 shadow-card dark:border-zinc-800 dark:bg-zinc-900"
> >
<dt class="flex items-center gap-1.5 text-xs text-slate-500 dark:text-zinc-400"> <dt class="flex items-center gap-1.5 text-xs text-slate-500 dark:text-zinc-400">
<span class="size-1.5 rounded-full" :class="card.dot" aria-hidden="true" /> <span class="size-1.5 rounded-full" :class="card.dot" aria-hidden="true" />
{{ card.label }} {{ card.label }}
</dt> </dt>
<dd <dd
class="mt-1.5 text-2xl font-semibold tracking-tight tabular-nums text-slate-900 dark:text-zinc-100" class="mt-1.5 text-2xl font-bold tracking-tight tabular-nums text-slate-900 dark:text-zinc-100"
> >
{{ card.value }} {{ card.value }}
</dd> </dd>