fix: declutter today view and task rows
ci / docker (push) Successful in 3m28s

- Drop redundant <h2> page titles in 习惯 / 倒数日 / 设置与数据
- Wrap today view in three <section class='today-block'> sub-blocks:
  今日任务 / 今日习惯 / 倒数日提醒 (7 天内 countdowns)
- Reduce task row noise: priority becomes a colored dot, priority
  select and priority-text removed; delete action is desktop-only
- Hide task row inline actions and pager when only a single page
- Add a row-level More menu on sidebar list / folder rows (rename,
  archive, delete) and a 'archived' toggle that appears only when
  archived lists exist
- Add 'archived-heading' / 'page-subtitle' / 'today-block' /
  'priority-dot' / 'task-delete{display:none}' / 'row-menu' styles
  and a mobile 'min-height:44px' hit area for sidebar row actions
- Refresh unit tests in src/style.test.ts to cover the cleanup
This commit is contained in:
2026-09-07 15:16:29 +08:00
parent 04d3c61ac8
commit 081cddaf54
5 changed files with 96 additions and 48 deletions
+9 -3
View File
@@ -12,6 +12,7 @@ type Countdown = {
}
type Form = { title:string; event_date:string; kind:Countdown['kind']; repeat_rule:Countdown['repeat_rule']; icon:string; calendar_mode:Countdown['calendar_mode']; lunar_year:number; lunar_month:number; lunar_day:number; leap_month:boolean; ignore_year:boolean }
const emit = defineEmits<{ notice: [message: string] }>()
const props = defineProps<{ view?: 'full' | 'today' }>()
const items = ref<Countdown[]>([]), archived = ref<Countdown[]>([])
const showArchived = ref(false), open = ref(false), busy = ref(false)
const editingId = ref<string|null>(null), error = ref('')
@@ -20,6 +21,7 @@ const freshForm = (): Form => ({ title:'', event_date:dateKey(new Date()), kind:
const form = ref<Form>(freshForm())
const composerOrigin = ref({ x: window.innerWidth - 43, y: window.innerHeight - 104 })
const composerStyle = computed(() => ({ '--fab-origin-x': `${composerOrigin.value.x}px`, '--fab-origin-y': `${composerOrigin.value.y}px` }))
const todayItems = computed(() => items.value.filter((item) => item.days >= 0 && item.days <= 7).slice(0, 3))
const titleInput = ref<HTMLInputElement | null>(null)
let previousFocus: HTMLElement | null = null
@@ -105,8 +107,12 @@ onBeforeUnmount(() => { previousFocus = null })
<template>
<section class="countdown-view" :class="{ loading:busy }">
<div class="countdown-content" :inert="open" :aria-hidden="open ? 'true' : undefined">
<header class="countdown-hero"><div><small>记住值得期待与纪念的日子</small><h2>倒数日</h2></div></header>
<div v-if="props.view==='today'" class="countdown-reminders">
<article v-for="item in todayItems" :key="item.id"><span class="countdown-icon">{{item.icon}}</span><span><b>{{item.title}}</b><small>{{countdownDayText(item.days)}} · {{primaryDate(item)}}</small></span></article>
<div v-if="!todayItems.length&&!busy" class="empty-panel compact">未来 7 天没有重要日子</div>
</div>
<div v-else class="countdown-content" :inert="open" :aria-hidden="open ? 'true' : undefined">
<header class="countdown-hero page-subtitle"><small>记住值得期待与纪念的日子</small></header>
<p v-if="error" class="inline-error">{{error}}</p>
<div class="countdown-grid">
<article v-for="item in items" :key="item.id" class="countdown-card" :class="{ pinned:item.pinned }">
@@ -120,7 +126,7 @@ onBeforeUnmount(() => { previousFocus = null })
<button v-if="archived.length" class="archived-toggle" @click="showArchived=!showArchived"><ArchiveRestore/>已归档{{archived.length}}</button>
<div v-if="showArchived" class="archived-countdowns"><article v-for="item in archived" :key="item.id"><span>{{item.icon}}</span><b>{{item.title}}</b><small>{{formatDateShort(item.display_date)}}<template v-if="item.lunar_text"> · {{item.lunar_text}}</template><template v-if="item.calendar_mode==='lunar'"> · 农历</template></small><button @click="restore(item)"><ArchiveRestore/>恢复</button><button class="danger-text" @click="purge(item)"><Trash2/>永久删除</button></article></div>
</div>
<Transition name="countdown-compose">
<Transition v-if="props.view!=='today'" name="countdown-compose">
<div v-if="open" class="countdown-modal-mask" @click.self="closeDialog"><form class="countdown-modal" :style="composerStyle" role="dialog" aria-modal="true" aria-labelledby="countdown-dialog-title" @submit.prevent="save" @keydown.esc="closeDialog" @keydown="trapDialogFocus">
<header><div><small>{{editingId?'调整重要日子':'记下重要日子'}}</small><h3 id="countdown-dialog-title">{{editingId?'编辑倒数日':'新建倒数日'}}</h3></div><button type="button" aria-label="关闭" @click="closeDialog"><X/></button></header>
<label>图标与名称<div class="countdown-title-fields"><input v-model="form.icon" maxlength="8" aria-label="图标"><input ref="titleInput" v-model="form.title" maxlength="200" required placeholder="例如:去北海道旅行" autofocus></div></label>