feat: countdown anniversaries and birthdays like ticktick

frontend/src/CountdownPanel.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import { Archive, ArchiveRestore, CalendarHeart, Pencil, Pin, Plus, Trash2, X } from 'lucide-vue-next'
+import { csrfHeader } from './lib/csrf'
+import { countdownDayText, countdownKindLabel, dateKey } from './lib/mvp-utils'
+
+type Countdown = {
+  id: string; title: string; event_date: string; display_date: string; kind: 'countdown'|'anniversary'|'birthday'
+  repeat_rule: 'none'|'weekly'|'monthly'|'yearly'; icon: string; pinned: boolean; archived_at: string|null; days: number
+}
+const emit = defineEmits<{ notice: [message: string] }>()
+const items = ref<Countdown[]>([])
+const archived = ref<Countdown[]>([])
+const showArchived = ref(false)
+const open = ref(false)
+const editingId = ref<string|null>(null)
+const busy = ref(false)
+const error = ref('')
+const form = ref({ title: '', event_date: dateKey(new Date()), kind: 'countdown' as Countdown['kind'], repeat_rule: 'none' as Countdown['repeat_rule'], icon: '📅' })
+
+async function request(path: string, options: RequestInit = {}) {
+  const headers: Record<string,string> = { ...(options.headers as Record<string,string> || {}) }
+  if (options.body) headers['Content-Type'] = 'application/json'
+  Object.assign(headers, csrfHeader(options.method))
+  const response = await fetch('/api/v1' + path, { credentials: 'include', ...options, headers })
+  if (!response.ok) { const body = await response.json().catch(() => ({})); throw new Error(body.detail || '请求失败') }
+  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 }
+}
+async function load() {
+  await safe(async () => {
+    const [activeRows, archivedRows] = await Promise.all([request('/countdowns'), request('/countdowns?archived=true')])
+    items.value = activeRows; archived.value = archivedRows
+  })
+}
+function add() {
+  editingId.value = null
+  form.value = { title: '', event_date: dateKey(new Date()), kind: 'countdown', repeat_rule: 'none', icon: '📅' }
+  open.value = true
+}
+function edit(item: Countdown) {
+  editingId.value = item.id
+  form.value = { title: item.title, event_date: item.event_date, kind: item.kind, repeat_rule: item.repeat_rule, icon: item.icon }
+  open.value = true
+}
+async function save() {
+  if (!form.value.title.trim()) return
+  await safe(async () => {
+    const path = editingId.value ? `/countdowns/${editingId.value}` : '/countdowns'
+    await request(path, { method: editingId.value ? 'PATCH' : 'POST', body: JSON.stringify({ ...form.value, title: form.value.title.trim() }) })
+    open.value = false; await load(); emit('notice', editingId.value ? '倒数日已更新' : '倒数日已添加')
+  })
+}
+async function pin(item: Countdown) { await safe(async () => { await request(`/countdowns/${item.id}/pin`, { method: 'POST' }); await load(); emit('notice', '已置顶') }) }
+async function archiveItem(item: Countdown) { await safe(async () => { await request(`/countdowns/${item.id}`, { method: 'DELETE' }); await load(); emit('notice', '已归档') }) }
+async function restore(item: Countdown) { await safe(async () => { await request(`/countdowns/${item.id}/restore`, { method: 'POST' }); await load(); emit('notice', '已恢复') }) }
+async function purge(item: Countdown) {
+  if (!confirm(`永久删除“${item.title}”？这个操作不能撤销。`)) return
+  await safe(async () => { await request(`/countdowns/${item.id}/purge`, { method: 'DELETE' }); await load(); emit('notice', '已永久删除') })
+}
+function formatDate(value: string) {
+  const [year, month, day] = value.split('-')
+  return `${year}年${Number(month)}月${Number(day)}日`
+}
+function repeatLabel(value: Countdown['repeat_rule']) { return ({ none: '不重复', weekly: '每周', monthly: '每月', yearly: '每年' })[value] }
+onMounted(load)
+</script>
+
+<template>
+  <section class="countdown-view" :class="{ loading: busy }">
+    <header class="countdown-hero">
+      <div><small>记住值得期待与纪念的日子</small><h2>倒数日</h2></div>
+      <button class="countdown-add" @click="add"><Plus/>添加日子</button>
+    </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 }">
+        <div class="countdown-card-head"><span class="countdown-icon">{{item.icon}}</span><span class="countdown-type">{{countdownKindLabel(item.kind)}}</span><Pin v-if="item.pinned" class="pinned-icon"/></div>
+        <h3>{{item.title}}</h3>
+        <div class="countdown-number"><strong>{{Math.abs(item.days)}}</strong><span v-if="item.days!==0">天</span></div>
+        <b class="countdown-copy">{{countdownDayText(item.days)}}</b>
+        <p>{{formatDate(item.display_date)}}<span v-if="item.repeat_rule!=='none'"> · {{repeatLabel(item.repeat_rule)}}</span></p>
+        <div class="countdown-actions"><button v-if="!item.pinned" @click="pin(item)"><Pin/>置顶</button><button @click="edit(item)"><Pencil/>编辑</button><button @click="archiveItem(item)"><Archive/>归档</button></div>
+      </article>
+      <button v-if="!items.length&&!busy" class="countdown-empty" @click="add"><CalendarHeart/><b>添加第一个重要日子</b><span>生日、纪念日，或一场期待已久的旅行</span></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"><span>{{item.icon}}</span><b>{{item.title}}</b><small>{{formatDate(item.event_date)}}</small><button @click="restore(item)"><ArchiveRestore/>恢复</button><button class="danger-text" @click="purge(item)"><Trash2/>永久删除</button></article></div>
+
+    <div v-if="open" class="countdown-modal-mask" @click.self="open=false">
+      <form class="countdown-modal" role="dialog" aria-modal="true" @submit.prevent="save">
+        <header><div><small>{{editingId?'调整重要日子':'记下重要日子'}}</small><h3>{{editingId?'编辑倒数日':'新建倒数日'}}</h3></div><button type="button" aria-label="关闭" @click="open=false"><X/></button></header>
+        <label>图标与名称<div class="countdown-title-fields"><input v-model="form.icon" maxlength="8" aria-label="图标"><input v-model="form.title" maxlength="200" required placeholder="例如：去北海道旅行" autofocus></div></label>
+        <label>日期<input v-model="form.event_date" type="date" required></label>
+        <label>类型<select v-model="form.kind"><option value="countdown">倒数日</option><option value="anniversary">纪念日</option><option value="birthday">生日</option></select></label>
+        <label>重复<select v-model="form.repeat_rule"><option value="none">不重复</option><option value="weekly">每周</option><option value="monthly">每月</option><option value="yearly">每年</option></select></label>
+        <footer><button type="button" class="secondary" @click="open=false">取消</button><button class="primary-small">保存</button></footer>
+      </form>
+    </div>
+  </section>
+</template>