feat: strengthen backup and mobile workflows

frontend/src/CountdownPanel.test.ts

@@ -1,15 +1,42 @@
 import { readFileSync } from 'node:fs'
-import { describe, expect, it } from 'vitest'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { createApp, h, nextTick } from 'vue'
+import CountdownPanel from './CountdownPanel.vue'
+import { invalidateCountdownCache } from './lib/mvp-utils'
 
 const source = readFileSync('src/CountdownPanel.vue', 'utf8')
+const cleanups: Array<() => void> = []
+const countdown = { id:'c1', title:'发布日', event_date:'2026-09-20', display_date:'2026-09-20', kind:'countdown', repeat_rule:'none', icon:'', pinned:false, archived_at:null, days:4, calendar_mode:'solar', lunar_year:null, lunar_month:null, lunar_day:null, ignore_year:false, lunar_text:null, updated_at:'v1' }
+const countdownB = { ...countdown, id:'c2', title:'旅行日', event_date:'2026-09-24', display_date:'2026-09-24', days:8 }
+function deferred<T>() { let resolve!: (value:T)=>void; let reject!: (reason?:unknown)=>void; const promise = new Promise<T>((yes,no)=>{ resolve=yes; reject=no }); return { promise, resolve, reject } }
+async function flush() { await Promise.resolve(); await new Promise((resolve)=>setTimeout(resolve, 0)); await Promise.resolve(); await nextTick() }
+async function mountWithFetch(fetchMock: ReturnType<typeof vi.fn>) {
+  invalidateCountdownCache()
+  vi.stubGlobal('fetch', fetchMock)
+  const notices:string[]=[]
+  const host=document.createElement('div'); document.body.append(host)
+  const app=createApp(()=>h(CountdownPanel,{ onNotice:(message:string)=>notices.push(message) })); app.mount(host)
+  const unmount=()=>{ app.unmount(); host.remove() }; cleanups.push(unmount)
+  await flush(); return { host, notices, unmount }
+}
+function clickCountdown(host:HTMLElement, title:string) {
+  const button=[...host.querySelectorAll<HTMLButtonElement>('.countdown-focus,.countdown-row')].find((candidate)=>candidate.textContent?.includes(title))
+  expect(button).toBeTruthy(); button!.click()
+}
+function detailButton(label:string) {
+  return [...document.querySelectorAll<HTMLButtonElement>('.countdown-detail-sheet button')].find((button)=>button.textContent?.includes(label))!
+}
+function json(value: unknown) { return new Response(JSON.stringify(value), { status:200, headers:{ 'content-type':'application/json' } }) }
+afterEach(()=>{ cleanups.splice(0).forEach((cleanup)=>cleanup()); vi.unstubAllGlobals(); vi.restoreAllMocks() })
 
 describe('countdown modal accessibility', () => {
-  it('names the dialog and supports focus and Escape close', () => {
-    expect(source).toContain('aria-labelledby="countdown-dialog-title"')
+  it('names the shared dialog contract and delegates focus and Escape handling', () => {
+    expect(source).toContain('title-id="countdown-dialog-title"')
     expect(source).toContain('id="countdown-dialog-title"')
-    expect(source).toContain('@keydown.esc="closeDialog"')
-    expect(source).toContain('ref="titleInput"')
-    expect(source).toContain('titleInput.value?.focus()')
+    expect(source).toContain('initial-focus="input[aria-label=\'倒数日名称\']"')
+    expect(source).not.toContain('trapDialogFocus')
+    expect(source).not.toContain('ref="titleInput"')
+    expect(source).not.toContain('ref="detailCloseButton"')
     expect(source).toContain(':inert="open || Boolean(detailItem)"')
   })
 
@@ -21,10 +48,10 @@ describe('countdown modal accessibility', () => {
     expect(source).toContain('item.id !== focusItem.value?.id')
     expect(source).toContain('`kind-${item.kind}`')
     expect(source).toContain(':class="`kind-${focusItem.kind}`"')
-    expect(source).toContain('class="countdown-detail-sheet app-sheet app-sheet--detail"')
-    expect(source).toContain('ref="detailCloseButton"')
-    expect(source).toContain('detailCloseButton.value?.focus()')
-    expect(source).toContain('@keydown="trapDetailFocus"')
+    expect(source).toContain('panel-class="countdown-detail-sheet"')
+    expect(source).not.toContain('ref="detailCloseButton"')
+    expect(source).toContain('initial-focus="button[aria-label=\'关闭详情\']"')
+    expect(source).not.toContain('trapDetailFocus')
     expect(source).not.toContain('class="countdown-actions"')
   })
 
@@ -51,8 +78,8 @@ describe('countdown modal accessibility', () => {
     expect(source).toContain("request('/countdowns?archived=true') as Promise<Countdown[]>")
     expect(source).toContain('const generation = getCountdownCacheGeneration()')
     expect(source).toContain('if (!isCountdownCacheGenerationCurrent(generation)) return')
-    expect(source).toContain('if (isCountdownCacheGenerationCurrent(generation)) error.value=')
-    expect(source).toContain('if (isCountdownCacheGenerationCurrent(generation)) busy.value=false')
+    expect(source).toContain('if (manageBusy && isCountdownCacheGenerationCurrent(generation)) error.value=')
+    expect(source).toContain('if (manageBusy && isCountdownCacheGenerationCurrent(generation)) busy.value=false')
   })
 
   it('prevents duplicate submits and sends the edit precondition', () => {
@@ -85,4 +112,92 @@ describe('countdown modal accessibility', () => {
     expect(source).toContain('添加第一个重要日子')
     expect(source).toContain('@click="openFromEmpty"')
   })
+
+  it('sends only one pin request on a rapid double click and disables all detail writes', async () => {
+    const pin = deferred<Response>()
+    const fetchMock = vi.fn((url: string, options?: RequestInit) => {
+      if (url.endsWith('/countdowns/c1/pin')) return pin.promise
+      if (url.endsWith('/countdowns')) return Promise.resolve(json([countdown]))
+      if (url.includes('archived=true')) return Promise.resolve(json([]))
+      throw new Error(`unexpected ${url} ${options?.method}`)
+    })
+    const { host } = await mountWithFetch(fetchMock)
+    host.querySelector<HTMLButtonElement>('.countdown-focus')!.click(); await nextTick()
+    const pinButton = [...document.querySelectorAll<HTMLButtonElement>('.countdown-detail-sheet footer button')].find((button)=>button.textContent?.includes('置顶'))!
+    pinButton.click(); pinButton.click(); await nextTick()
+    expect(fetchMock.mock.calls.filter(([url])=>String(url).endsWith('/countdowns/c1/pin'))).toHaveLength(1)
+    expect([...document.querySelectorAll<HTMLButtonElement>('.countdown-detail-sheet footer button')].every((button)=>button.disabled)).toBe(true)
+    pin.resolve(json({})); await flush()
+  })
+
+  it('ignores a stale successful detail write after close and opening another countdown', async () => {
+    const pin = deferred<Response>()
+    const fetchMock = vi.fn((url: string) => {
+      if (url.endsWith('/countdowns/c1/pin')) return pin.promise
+      if (url.endsWith('/countdowns')) return Promise.resolve(json([countdown, countdownB]))
+      if (url.includes('archived=true')) return Promise.resolve(json([]))
+      throw new Error(`unexpected ${url}`)
+    })
+    const { host, notices } = await mountWithFetch(fetchMock)
+    clickCountdown(host, '发布日'); await nextTick()
+    detailButton('置顶').click(); await nextTick()
+    document.querySelector<HTMLButtonElement>('.countdown-detail-sheet button[aria-label="关闭详情"]')!.click()
+    clickCountdown(host, '旅行日'); await nextTick()
+
+    pin.resolve(json({})); await flush()
+
+    expect(document.querySelector('.countdown-detail-sheet')?.textContent).toContain('旅行日')
+    expect(notices).toEqual([])
+    expect(detailButton('置顶').disabled).toBe(false)
+  })
+
+  it('ignores a stale failed detail write without polluting the new detail or unlocking its operation', async () => {
+    const oldPin = deferred<Response>()
+    const newPin = deferred<Response>()
+    const fetchMock = vi.fn((url: string) => {
+      if (url.endsWith('/countdowns/c1/pin')) return oldPin.promise
+      if (url.endsWith('/countdowns/c2/pin')) return newPin.promise
+      if (url.endsWith('/countdowns')) return Promise.resolve(json([countdown, countdownB]))
+      if (url.includes('archived=true')) return Promise.resolve(json([]))
+      throw new Error(`unexpected ${url}`)
+    })
+    const { host, notices } = await mountWithFetch(fetchMock)
+    clickCountdown(host, '发布日'); await nextTick()
+    detailButton('置顶').click(); await nextTick()
+    document.querySelector<HTMLButtonElement>('.countdown-detail-sheet button[aria-label="关闭详情"]')!.click()
+    clickCountdown(host, '旅行日'); await nextTick()
+    detailButton('置顶').click(); await nextTick()
+
+    oldPin.reject(new Error('旧请求失败')); await flush()
+
+    expect(document.querySelector('.countdown-detail-sheet')?.textContent).toContain('旅行日')
+    expect(host.querySelector('.inline-error')?.textContent ?? '').not.toContain('旧请求失败')
+    expect(notices).toEqual([])
+    expect(detailButton('置顶').disabled).toBe(true)
+    newPin.resolve(json({})); await flush()
+  })
+
+  it('keeps the normal current-detail pin flow working', async () => {
+    const pin = deferred<Response>()
+    const fetchMock = vi.fn((url: string) => {
+      if (url.endsWith('/countdowns/c1/pin')) return pin.promise
+      if (url.endsWith('/countdowns')) return Promise.resolve(json([countdown]))
+      if (url.includes('archived=true')) return Promise.resolve(json([]))
+      throw new Error(`unexpected ${url}`)
+    })
+    const { host, notices } = await mountWithFetch(fetchMock)
+    clickCountdown(host, '发布日'); await nextTick()
+    detailButton('置顶').click(); pin.resolve(json({})); await flush()
+    expect(document.querySelector('.countdown-detail-sheet')).toBeNull()
+    expect(host.querySelector('.countdown-view')?.classList.contains('loading')).toBe(false)
+    expect(notices).toEqual(['已置顶'])
+  })
+
+  it('guards mutation commits and cleanup with the captured detail context', () => {
+    expect(source).toContain('const operationGeneration = ref(0)')
+    expect(source).toContain('const detailGeneration = ref(0)')
+    expect(source).toContain('context.detailGeneration === detailGeneration.value')
+    expect(source).toContain("context.detailId === (detailItem.value?.id ?? null)")
+    expect(source).toContain('if (currentContext(context)) busy.value=false')
+  })
 })