feat: strengthen backup and mobile workflows

frontend/src/CountdownPanel.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
-import { computed, nextTick, onBeforeUnmount, onMounted, ref } from 'vue'
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
 import { Archive, ArchiveRestore, CalendarHeart, ChevronDown, Pencil, Pin, Trash2, X } from 'lucide-vue-next'
 import { csrfHeader } from './lib/csrf'
 import { calendarModeLabel, countdownDayText, countdownKindLabel, dateKey, formatApiErrorDetail, getCountdownCacheGeneration, invalidateCountdownCache, isCountdownCacheGenerationCurrent, loadCountdownCache, readCountdownCache } from './lib/mvp-utils'
+import AppSheet from './components/AppSheet.vue'
+import AppDialog, { type AppDialogOptions } from './components/AppDialog.vue'
 
 type Countdown = {
   id: string; title: string; event_date: string; display_date: string; kind: 'countdown'|'anniversary'|'birthday'
@@ -17,34 +19,21 @@ const items = ref<Countdown[]>([]), archived = ref<Countdown[]>([])
 const showArchived = ref(false), open = ref(false), busy = ref(false)
 const editingId = ref<string|null>(null), editingItem = ref<Countdown|null>(null), error = ref('')
 const detailItem = ref<Countdown|null>(null), showAdvanced = ref(false)
+const operationGeneration = ref(0)
+const detailGeneration = ref(0)
+type OperationContext = { generation:number; detailId:string|null; detailGeneration:number }
+let activeOperation:OperationContext|null = null
+let mounted = true
 const currentYear = new Date().getFullYear()
 const freshForm = (): Form => ({ title:'', event_date:dateKey(new Date()), kind:'countdown', repeat_rule:'none', calendar_mode:'solar', lunar_year:currentYear, lunar_month:1, lunar_day:1, leap_month:false, ignore_year:false })
 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 titleInput = ref<HTMLInputElement | null>(null)
-const detailCloseButton = ref<HTMLButtonElement | null>(null)
-let previousFocus: HTMLElement | null = null
+const appDialog = ref<{ show: (options: AppDialogOptions) => Promise<boolean | string | null> } | null>(null)
 
-function focusDialog() {
-  previousFocus = document.activeElement instanceof HTMLElement ? document.activeElement : null
-  void nextTick(() => titleInput.value?.focus())
-}
 function closeDialog() {
   open.value = false
   showAdvanced.value = false
-  void nextTick(() => previousFocus?.focus())
-}
-function trapDialogFocus(event: KeyboardEvent) {
-  if (event.key !== 'Tab') return
-  const dialog = event.currentTarget as HTMLElement
-  const controls = Array.from(dialog.querySelectorAll<HTMLElement>('button,input,select,textarea,[tabindex]:not([tabindex="-1"])'))
-    .filter((item) => !item.hasAttribute('disabled'))
-  if (!controls.length) return
-  const first = controls[0]
-  const last = controls[controls.length - 1]
-  if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus() }
-  else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus() }
 }
 
 function primaryDate(item: Countdown) {
@@ -99,7 +88,25 @@ async function request(path:string, options:RequestInit={}) {
   }
   return response.status === 204 ? null : response.json()
 }
-async function safe(work:()=>Promise<void>) { busy.value=true; error.value=''; try { await work() } catch(reason) { error.value=reason instanceof Error ? reason.message : '请求失败' } finally { busy.value=false } }
+function currentContext(context:OperationContext) {
+  return mounted && context.generation === operationGeneration.value && context.detailGeneration === detailGeneration.value && context.detailId === (detailItem.value?.id ?? null)
+}
+async function safe(detailId:string|null, work:(context:OperationContext)=>Promise<void>) {
+  if (activeOperation && currentContext(activeOperation)) return
+  const context={ generation:++operationGeneration.value, detailId, detailGeneration:detailGeneration.value }
+  activeOperation=context
+  busy.value=true
+  error.value=''
+  try {
+    await work(context)
+  } catch(reason) {
+    if (!currentContext(context)) return
+    error.value=reason instanceof Error ? reason.message : '请求失败'
+  } finally {
+    if (activeOperation === context) activeOperation=null
+    if (currentContext(context)) busy.value=false
+  }
+}
 async function fetchCountdowns() {
   const [active, archivedItems] = await Promise.all([
     request('/countdowns') as Promise<Countdown[]>,
@@ -107,31 +114,36 @@ async function fetchCountdowns() {
   ])
   return { items: active, archived: archivedItems }
 }
-async function load(force = false) {
+async function load(force = false, manageBusy = true) {
   const generation = getCountdownCacheGeneration()
   const cached = readCountdownCache<Countdown>()
   if (cached) { items.value=cached.items; archived.value=cached.archived }
-  if (!cached) busy.value=true
-  error.value=''
+  if (!cached && manageBusy) busy.value=true
+  if (manageBusy) error.value=''
   try {
     const data = await loadCountdownCache(fetchCountdowns, { force })
     if (!isCountdownCacheGenerationCurrent(generation)) return
     items.value=data.items
     archived.value=data.archived
   } catch(reason) {
-    if (isCountdownCacheGenerationCurrent(generation)) error.value=reason instanceof Error ? reason.message : '请求失败'
+    if (manageBusy && isCountdownCacheGenerationCurrent(generation)) error.value=reason instanceof Error ? reason.message : '请求失败'
   } finally {
-    if (isCountdownCacheGenerationCurrent(generation)) busy.value=false
+    if (manageBusy && isCountdownCacheGenerationCurrent(generation)) busy.value=false
   }
 }
+function selectDetail(item:Countdown|null) {
+  detailGeneration.value += 1
+  detailItem.value=item
+  error.value=''
+  if (!activeOperation || !currentContext(activeOperation)) busy.value=false
+}
 function edit(item:Countdown) {
-  detailItem.value=null
+  selectDetail(null)
   editingId.value=item.id
   editingItem.value=item
   showAdvanced.value=false
   form.value={ title:item.title, event_date:item.event_date, kind:item.kind, repeat_rule:item.repeat_rule, calendar_mode:item.calendar_mode, lunar_year:item.lunar_year || Number(item.event_date.slice(0,4)), lunar_month:Math.abs(item.lunar_month || 1), lunar_day:item.lunar_day || 1, leap_month:(item.lunar_month || 0)<0, ignore_year:item.ignore_year }
   open.value=true
-  focusDialog()
 }
 function applyKindDefaults() {
   if (form.value.kind === 'birthday' || form.value.kind === 'anniversary') form.value.repeat_rule='yearly'
@@ -140,40 +152,35 @@ function applyKindDefaults() {
 async function save() {
   if (busy.value) return
   if (!form.value.title.trim()) return
-  await safe(async()=>{
+  await safe(null, async(context)=>{
     const payload:any={ title:form.value.title.trim(), event_date:form.value.calendar_mode==='lunar' ? `${form.value.lunar_year}-01-01` : form.value.event_date, kind:form.value.kind, repeat_rule:form.value.ignore_year ? 'yearly' : form.value.repeat_rule, calendar_mode:form.value.calendar_mode, ignore_year:form.value.ignore_year }
     if (editingId.value) payload.expected_updated_at=editingItem.value?.updated_at
     if (form.value.calendar_mode==='lunar') { payload.lunar_month=form.value.leap_month ? -form.value.lunar_month : form.value.lunar_month; payload.lunar_day=form.value.lunar_day }
     const path=editingId.value ? `/countdowns/${editingId.value}` : '/countdowns'
     await request(path,{ method:editingId.value?'PATCH':'POST', body:JSON.stringify(payload) })
-    invalidateCountdownCache(); closeDialog(); await load(true); emit('notice',editingId.value?'倒数日已更新':'倒数日已添加')
+    if (!currentContext(context)) return
+    invalidateCountdownCache(); closeDialog(); await load(true, false)
+    if (!currentContext(context)) return
+    emit('notice',editingId.value?'倒数日已更新':'倒数日已添加')
   })
 }
-async function pin(item:Countdown){await safe(async()=>{await request(`/countdowns/${item.id}/pin`,{method:'POST'});invalidateCountdownCache();detailItem.value=null;await load(true);emit('notice','已置顶')})}
-async function archiveItem(item:Countdown){await safe(async()=>{await request(`/countdowns/${item.id}`,{method:'DELETE'});invalidateCountdownCache();detailItem.value=null;await load(true);emit('notice','已归档')})}
-async function restore(item:Countdown){await safe(async()=>{await request(`/countdowns/${item.id}/restore`,{method:'POST'});invalidateCountdownCache();await load(true);emit('notice','已恢复')})}
-async function purge(item:Countdown){if(!confirm(`永久删除“${item.title}”？这个操作不能撤销。`))return;await safe(async()=>{await request(`/countdowns/${item.id}/purge`,{method:'DELETE'});invalidateCountdownCache();await load(true);emit('notice','已永久删除')})}
+async function pin(item:Countdown){await safe(item.id,async(context)=>{await request(`/countdowns/${item.id}/pin`,{method:'POST'});invalidateCountdownCache();if(!currentContext(context)){void load(true,false);return}emit('notice','已置顶');closeDetail();await load(true,false)})}
+async function archiveItem(item:Countdown){await safe(item.id,async(context)=>{await request(`/countdowns/${item.id}`,{method:'DELETE'});invalidateCountdownCache();if(!currentContext(context)){void load(true,false);return}emit('notice','已归档');closeDetail();await load(true,false)})}
+async function restore(item:Countdown){await safe(null,async(context)=>{await request(`/countdowns/${item.id}/restore`,{method:'POST'});invalidateCountdownCache();await load(true,false);if(!currentContext(context))return;emit('notice','已恢复')})}
+async function purge(item:Countdown){if(busy.value)return;if(await appDialog.value?.show({title:`永久删除“${item.title}”？`,description:'这个操作不能撤销。',danger:true,confirmText:'永久删除'})!==true)return;if(busy.value)return;await safe(null,async(context)=>{await request(`/countdowns/${item.id}/purge`,{method:'DELETE'});invalidateCountdownCache();await load(true,false);if(!currentContext(context))return;emit('notice','已永久删除')})}
 function formatDate(value:string){const [y,m,d]=value.split('-');return `${y}年${Number(m)}月${Number(d)}日`}
 function formatDateShort(value:string){const [y,m,d]=value.split('-');return `${y}/${Number(m)}/${Number(d)}`}
 function repeatLabel(value:Countdown['repeat_rule']){return({none:'不重复',weekly:'每周',monthly:'每月',yearly:'每年'})[value]}
-function openDetail(item:Countdown){detailItem.value=item;previousFocus=document.activeElement instanceof HTMLElement ? document.activeElement : null;void nextTick(() => detailCloseButton.value?.focus())}
-function closeDetail(){detailItem.value=null;void nextTick(() => previousFocus?.focus())}
-function trapDetailFocus(event: KeyboardEvent) {
-  if (event.key !== 'Tab') return
-  const dialog = event.currentTarget as HTMLElement
-  const controls = Array.from(dialog.querySelectorAll<HTMLElement>('button,[href],input,select,textarea,[tabindex]:not([tabindex="-1"])'))
-    .filter((item) => !item.hasAttribute('disabled'))
-  if (!controls.length) return
-  const first = controls[0]
-  const last = controls[controls.length - 1]
-  if (event.shiftKey && document.activeElement === first) { event.preventDefault(); last.focus() }
-  else if (!event.shiftKey && document.activeElement === last) { event.preventDefault(); first.focus() }
-}
+function openDetail(item:Countdown){selectDetail(item)}
+function closeDetail(){selectDetail(null)}
 function openFromEmpty(){openCountdownComposer()}
-function openCountdownComposer(origin?: { x: number; y: number }){if(origin)composerOrigin.value=origin;detailItem.value=null;editingId.value=null;editingItem.value=null;showAdvanced.value=false;form.value=freshForm();open.value=true;focusDialog()}
+function openCountdownComposer(origin?: { x: number; y: number }){if(origin)composerOrigin.value=origin;selectDetail(null);editingId.value=null;editingItem.value=null;showAdvanced.value=false;form.value=freshForm();open.value=true}
 defineExpose({ openCountdownComposer })
 onMounted(() => { void load() })
-onBeforeUnmount(() => { previousFocus = null })
+onBeforeUnmount(() => {
+  mounted = false
+  operationGeneration.value += 1
+})
 </script>
 
 <template>
@@ -199,21 +206,20 @@ onBeforeUnmount(() => { previousFocus = null })
         </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" @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 @click="restore(item)"><ArchiveRestore/>恢复</button><button class="danger-text" @click="purge(item)"><Trash2/>永久删除</button></article></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>
     </div>
-    <Transition name="countdown-detail">
-      <div v-if="detailItem" class="countdown-detail-mask app-sheet-mask" @click.self="closeDetail"><article class="countdown-detail-sheet app-sheet app-sheet--detail" role="dialog" aria-modal="true" aria-labelledby="countdown-detail-title" @keydown.esc="closeDetail" @keydown="trapDetailFocus">
-        <header class="app-sheet__header"><div><small>重要日子详情</small><h3 id="countdown-detail-title">{{detailItem.title}}</h3></div><button ref="detailCloseButton" type="button" aria-label="关闭详情" @click="closeDetail"><X/></button></header>
+    <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">
+        <header class="app-sheet__header"><div><small>重要日子详情</small><h3 id="countdown-detail-title">{{detailItem.title}}</h3></div><button type="button" aria-label="关闭详情" @click="closeDetail"><X/></button></header>
         <div class="app-sheet__body"><div class="countdown-detail-days"><strong>{{detailItem.days===0?'今天':Math.abs(detailItem.days)}}</strong><span v-if="detailItem.days!==0">天</span><b>{{countdownDayText(detailItem.days)}}</b></div>
         <dl><div><dt>日期</dt><dd>{{primaryDate(detailItem)}}</dd></div><div v-if="secondaryDate(detailItem)"><dt>换算</dt><dd>{{secondaryDate(detailItem)}}</dd></div><div><dt>类型</dt><dd>{{countdownKindLabel(detailItem.kind)}} · {{detailItem.calendar_mode==='lunar'?'农历':'公历'}} · {{repeatBadge(detailItem) || '不重复'}}</dd></div></dl></div>
-        <footer class="app-sheet__footer"><button v-if="!detailItem.pinned" type="button" @click="pin(detailItem)"><Pin/>置顶</button><button type="button" @click="edit(detailItem)"><Pencil/>编辑</button><button type="button" class="danger-text" @click="archiveItem(detailItem)"><Archive/>归档</button></footer>
-      </article></div>
-    </Transition>
-    <Transition name="countdown-compose">
-      <div v-if="open" class="countdown-modal-mask app-sheet-mask" @click.self="closeDialog"><form class="countdown-modal app-sheet app-sheet--create" :style="composerStyle" role="dialog" aria-modal="true" aria-labelledby="countdown-dialog-title" @submit.prevent="save" @keydown.esc="closeDialog" @keydown="trapDialogFocus">
-        <header class="app-sheet__header"><div><small>{{editingId?'调整重要日子':'快速记下重要日子'}}</small><h3 id="countdown-dialog-title">{{editingId?'编辑倒数日':'新建倒数日'}}</h3></div><button type="button" aria-label="关闭" @click="closeDialog"><X/></button></header>
-        <div class="app-sheet__body"><label>名称<input ref="titleInput" v-model="form.title" maxlength="200" required placeholder="例如：去北海道旅行" autofocus></label>
+        <footer class="app-sheet__footer"><button v-if="!detailItem.pinned" type="button" :disabled="busy" @click="pin(detailItem)"><Pin/>置顶</button><button type="button" :disabled="busy" @click="edit(detailItem)"><Pencil/>编辑</button><button type="button" class="danger-text" :disabled="busy" @click="archiveItem(detailItem)"><Archive/>归档</button></footer>
+      </template>
+    </AppSheet>
+    <AppSheet :open="open" variant="create" panel-class="countdown-modal" title-id="countdown-dialog-title" initial-focus="input[aria-label='倒数日名称']" :busy="busy" :style="composerStyle" @close="closeDialog" @submit.prevent="save">
+        <header class="app-sheet__header"><div><h3 id="countdown-dialog-title">{{editingId?'编辑倒数日':'新建倒数日'}}</h3></div><button type="button" aria-label="关闭" @click="closeDialog"><X/></button></header>
+        <div class="app-sheet__body"><label>名称<input v-model="form.title" aria-label="倒数日名称" maxlength="200" required placeholder="例如：去北海道旅行"></label>
         <label v-if="form.calendar_mode==='solar'">日期<input v-model="form.event_date" type="date" required></label>
         <label>类型<select v-model="form.kind" @change="applyKindDefaults"><option value="countdown">倒数日</option><option value="anniversary">纪念日</option><option value="birthday">生日</option></select></label>
         <details class="countdown-advanced" :open="showAdvanced" @toggle="showAdvanced=($event.target as HTMLDetailsElement).open"><summary><span>更多设置</span><ChevronDown/></summary>
@@ -228,7 +234,7 @@ onBeforeUnmount(() => { previousFocus = null })
           <label>重复<select v-model="form.repeat_rule" :disabled="form.ignore_year"><option value="none">不重复</option><option value="weekly">每周</option><option value="monthly">每月</option><option value="yearly">每年</option></select></label>
         </details></div>
         <footer class="app-sheet__footer"><button type="button" class="secondary" :disabled="busy" @click="closeDialog">取消</button><button class="primary-small" :disabled="busy">保存</button></footer>
-      </form></div>
-    </Transition>
+    </AppSheet>
+    <AppDialog ref="appDialog" />
   </section>
 </template>