feat: 更新统计卡片描述,优化可读性
This commit is contained in:
+2
-2
@@ -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()
|
||||||
})
|
})
|
||||||
|
|||||||
@@ -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
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user