style: simplify mobile task views

frontend/src/CountdownPanel.vue

@@ -52,9 +52,6 @@ function repeatBadge(item: Countdown) {
   if (item.calendar_mode === 'lunar') return item.ignore_year ? '每年' : (item.repeat_rule !== 'none' ? repeatLabel(item.repeat_rule) : '')
   return item.repeat_rule !== 'none' ? repeatLabel(item.repeat_rule) : ''
 }
-function visibleBadges(item: Countdown) {
-  return [countdownKindLabel(item.kind), item.calendar_mode === 'lunar' ? '农历' : '', repeatBadge(item)].filter(Boolean).slice(0, 2)
-}
 function sorted(itemsToSort: Countdown[]) {
   return [...itemsToSort].sort((a, b) => Number(b.pinned) - Number(a.pinned) || a.days - b.days || a.title.localeCompare(b.title, 'zh-Hans-CN'))
 }
@@ -186,7 +183,7 @@ onBeforeUnmount(() => {
 <template>
   <section class="countdown-view" :class="{ loading:busy }">
     <div class="countdown-content" :inert="open || Boolean(detailItem)" :aria-hidden="open || detailItem ? 'true' : undefined">
-      <header class="countdown-hero"><small>{{countdownSummary}}</small></header>
+      <small class="countdown-summary">{{countdownSummary}}</small>
       <p v-if="error" class="inline-error">{{error}}</p>
       <div v-if="items.length" class="countdown-layout">
         <button v-if="focusItem" type="button" class="countdown-focus" :class="`kind-${focusItem.kind}`" @click="openDetail(focusItem)">
@@ -198,16 +195,15 @@ onBeforeUnmount(() => {
           <section v-for="group in countdownGroups" :key="group.key" class="countdown-group">
             <h3 v-if="group.title">{{group.title}}</h3>
             <button v-for="item in group.items" :key="item.id" type="button" class="countdown-row" :class="[`kind-${item.kind}`, { pinned:item.pinned, today:item.days===0, past:item.days<0 }]" @click="openDetail(item)">
-              <span class="countdown-main"><b>{{item.title}}</b><small>{{primaryDate(item)}}<template v-if="secondaryDate(item)"> · {{secondaryDate(item)}}</template></small><span class="countdown-badges"><em v-for="badge in visibleBadges(item)" :key="badge">{{badge}}</em></span></span>
+              <span class="countdown-main"><b>{{item.title}}<small v-if="item.pinned" class="countdown-pinned-mark"> · 置顶</small></b><small>{{primaryDate(item)}}</small></span>
               <span class="countdown-state"><strong>{{item.days===0?'今天':Math.abs(item.days)}}</strong><small>{{countdownDayText(item.days)}}</small></span>
-              <Pin v-if="item.pinned" class="pinned-icon"/>
             </button>
           </section>
         </div>
       </div>
       <div v-else-if="!busy" class="countdown-empty"><CalendarHeart/><b>还没有重要日子</b><span>生日、纪念日，或一场期待已久的旅行</span><button type="button" class="primary-small" @click="openFromEmpty">添加第一个重要日子</button></div>
-      <button v-if="archived.length" class="archived-toggle" :disabled="busy" @click="showArchived=!showArchived"><ArchiveRestore/>已归档（{{archived.length}}）</button>
-      <div v-if="showArchived" class="archived-countdowns"><article v-for="item in archived" :key="item.id"><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 :disabled="busy" @click="restore(item)"><ArchiveRestore/>恢复</button><button class="danger-text" :disabled="busy" @click="purge(item)"><Trash2/>永久删除</button></article></div>
+      <button v-if="archived.length" class="archived-toggle" type="button" :disabled="busy" :aria-expanded="showArchived" aria-controls="archived-countdowns" @click="showArchived=!showArchived"><ArchiveRestore/>已归档（{{archived.length}}）</button>
+      <div v-if="showArchived" id="archived-countdowns" class="archived-countdowns"><article v-for="item in archived" :key="item.id"><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></span><button :disabled="busy" @click="restore(item)"><ArchiveRestore/>恢复</button><button class="danger-text" :disabled="busy" @click="purge(item)"><Trash2/>永久删除</button></article></div>
     </div>
     <AppSheet :open="Boolean(detailItem)" variant="detail" panel-class="countdown-detail-sheet" title-id="countdown-detail-title" initial-focus="button[aria-label='关闭详情']" :busy="busy" @close="closeDetail">
       <template v-if="detailItem">