create-rue 0.0.11 → 0.0.15

package/template/base/app/pages/TodoApp.tsx

@@ -1,7 +1,10 @@
-import { computed, type FC, ref, useState, watch } from '@rue-js/rue'
+import { computed, type FC, ref, watchEffect } from '@rue-js/rue'
 import { RouterLink } from '@rue-js/router'
 
 const todoStorageKey = 'rue.base.todos'
+const minuteInMs = 60 * 1000
+const hourInMs = 60 * minuteInMs
+const dayInMs = 24 * hourInMs
 
 type TodoStatus = 'todo' | 'doing' | 'done'
 type TodoFilter = 'all' | 'todo' | 'doing' | 'done' | 'archived'
@@ -12,6 +15,13 @@ type TodoItem = {
   archived: boolean
   status: TodoStatus
   createdAt: string
+  createdOrder: number
+}
+
+type PersistedTodoState = {
+  todos: TodoItem[]
+  search: string
+  activeFilter: TodoFilter
 }
 
 const filterOptions: Array<{ key: TodoFilter; label: string }> = [
@@ -22,10 +32,10 @@ const filterOptions: Array<{ key: TodoFilter; label: string }> = [
   { key: 'archived', label: '已归档' },
 ]
 
-const statusOptions: Array<{ key: TodoStatus; label: string }> = [
-  { key: 'todo', label: '待开始' },
-  { key: 'doing', label: '进行中' },
-  { key: 'done', label: '已完成' },
+const statusOptions: Array<{ key: TodoStatus; label: string; actionLabel: string }> = [
+  { key: 'todo', label: '待开始', actionLabel: '设为待开始' },
+  { key: 'doing', label: '进行中', actionLabel: '设为进行中' },
+  { key: 'done', label: '已完成', actionLabel: '设为已完成' },
 ]
 
 const initialTodos: TodoItem[] = [
@@ -34,59 +44,293 @@ const initialTodos: TodoItem[] = [
     title: '补充报表首页字段与展示规则',
     status: 'doing',
     archived: false,
-    createdAt: '今天 09:30',
+    createdAt: new Date(Date.now() - 110 * minuteInMs).toISOString(),
+    createdOrder: 4,
   },
   {
     id: 2,
     title: '接入真实接口替换示例数据',
     status: 'todo',
     archived: false,
-    createdAt: '今天 10:05',
+    createdAt: new Date(Date.now() - 65 * minuteInMs).toISOString(),
+    createdOrder: 3,
   },
   {
     id: 3,
     title: '复查主题切换和头部隐藏体验',
     status: 'done',
     archived: false,
-    createdAt: '昨天 18:20',
+    createdAt: new Date(Date.now() - 20 * hourInMs).toISOString(),
+    createdOrder: 2,
   },
   {
     id: 4,
     title: '归档旧版原型页面',
     status: 'done',
     archived: true,
-    createdAt: '昨天 14:05',
+    createdAt: new Date(Date.now() - 30 * hourInMs).toISOString(),
+    createdOrder: 1,
   },
 ]
 
-const getStoredTodos = (): TodoItem[] => {
-  const raw = localStorage.getItem(todoStorageKey)
-  if (!raw) {
-    return initialTodos
+const padDatePart = (value: number) => String(value).padStart(2, '0')
+
+const formatCalendarDateTime = (value: Date, includeYear = true) => {
+  const month = padDatePart(value.getMonth() + 1)
+  const day = padDatePart(value.getDate())
+  const hours = padDatePart(value.getHours())
+  const minutes = padDatePart(value.getMinutes())
+
+  if (includeYear) {
+    return `${value.getFullYear()}-${month}-${day} ${hours}:${minutes}`
+  }
+
+  return `${month}-${day} ${hours}:${minutes}`
+}
+
+const getNextTodoId = (todos: TodoItem[]) =>
+  todos.reduce((maxId, item) => Math.max(maxId, item.id), 0) + 1
+
+const getNextCreatedOrder = (todos: TodoItem[]) =>
+  todos.reduce((maxOrder, item) => Math.max(maxOrder, item.createdOrder), 0) + 1
+
+const isSameCalendarDay = (left: Date, right: Date) =>
+  left.getFullYear() === right.getFullYear() &&
+  left.getMonth() === right.getMonth() &&
+  left.getDate() === right.getDate()
+
+const isTodoStatus = (value: unknown): value is TodoStatus =>
+  value === 'todo' || value === 'doing' || value === 'done'
+
+const isTodoFilter = (value: unknown): value is TodoFilter =>
+  value === 'all' ||
+  value === 'todo' ||
+  value === 'doing' ||
+  value === 'done' ||
+  value === 'archived'
+
+const parseCreatedAtValue = (value: string, now = new Date()) => {
+  const directDate = new Date(value)
+  if (!Number.isNaN(directDate.getTime())) {
+    return directDate
+  }
+
+  if (value === '刚刚') {
+    return new Date(now.getTime() - 30 * 1000)
+  }
+
+  const minutesAgoMatch = /^(\d+)\s*分钟前$/.exec(value)
+  if (minutesAgoMatch) {
+    return new Date(now.getTime() - Number(minutesAgoMatch[1]) * minuteInMs)
+  }
+
+  const hoursAgoMatch = /^(\d+)\s*小时前$/.exec(value)
+  if (hoursAgoMatch) {
+    return new Date(now.getTime() - Number(hoursAgoMatch[1]) * hourInMs)
+  }
+
+  const todayMatch = /^今天\s+(\d{1,2}):(\d{2})$/.exec(value)
+  if (todayMatch) {
+    return new Date(
+      now.getFullYear(),
+      now.getMonth(),
+      now.getDate(),
+      Number(todayMatch[1]),
+      Number(todayMatch[2]),
+    )
+  }
+
+  const yesterdayMatch = /^昨天\s+(\d{1,2}):(\d{2})$/.exec(value)
+  if (yesterdayMatch) {
+    const yesterday = new Date(now)
+    yesterday.setDate(yesterday.getDate() - 1)
+
+    return new Date(
+      yesterday.getFullYear(),
+      yesterday.getMonth(),
+      yesterday.getDate(),
+      Number(yesterdayMatch[1]),
+      Number(yesterdayMatch[2]),
+    )
+  }
+
+  return null
+}
+
+const normalizeCreatedAt = (value: string, fallbackCreatedOrder: number) => {
+  const parsed = parseCreatedAtValue(value)
+  if (parsed) {
+    return parsed.toISOString()
+  }
+
+  return new Date(Date.now() - Math.max(1, fallbackCreatedOrder) * minuteInMs).toISOString()
+}
+
+const formatTodoCreatedAt = (value: string, now = new Date()) => {
+  const parsed = parseCreatedAtValue(value, now)
+  if (!parsed) {
+    return value
+  }
+
+  const diffMs = now.getTime() - parsed.getTime()
+  if (diffMs < 0) {
+    return formatCalendarDateTime(parsed)
+  }
+
+  if (diffMs < minuteInMs) {
+    return '刚刚'
+  }
+
+  if (diffMs < hourInMs) {
+    return `${Math.max(1, Math.floor(diffMs / minuteInMs))} 分钟前`
+  }
+
+  if (isSameCalendarDay(parsed, now)) {
+    return `${Math.max(1, Math.floor(diffMs / hourInMs))} 小时前`
+  }
+
+  const yesterday = new Date(now)
+  yesterday.setDate(yesterday.getDate() - 1)
+  if (diffMs < 2 * dayInMs && isSameCalendarDay(parsed, yesterday)) {
+    return `昨天 ${padDatePart(parsed.getHours())}:${padDatePart(parsed.getMinutes())}`
+  }
+
+  if (parsed.getFullYear() === now.getFullYear()) {
+    return formatCalendarDateTime(parsed, false)
+  }
+
+  return formatCalendarDateTime(parsed)
+}
+
+const getTodoCreatedAtTime = (item: TodoItem) => {
+  const parsed = parseCreatedAtValue(item.createdAt)
+  if (!parsed) {
+    return 0
+  }
+
+  return parsed.getTime()
+}
+
+const getClosestTodoActionElement = (target: EventTarget | null) => {
+  if (target instanceof Element) {
+    return target.closest<HTMLElement>('[data-todo-action]')
+  }
+
+  if (target instanceof Node) {
+    return target.parentElement?.closest<HTMLElement>('[data-todo-action]') ?? null
+  }
+
+  return null
+}
+
+const getTodoStorage = () => {
+  if (typeof globalThis === 'undefined' || !('localStorage' in globalThis)) {
+    return null
+  }
+
+  try {
+    return globalThis.localStorage
+  } catch {
+    return null
+  }
+}
+
+const parsePersistedTodoItem = (value: unknown, fallbackCreatedOrder: number): TodoItem | null => {
+  if (!value || typeof value !== 'object') {
+    return null
+  }
+
+  const candidate = value as Partial<TodoItem>
+  if (
+    typeof candidate.id !== 'number' ||
+    typeof candidate.title !== 'string' ||
+    typeof candidate.archived !== 'boolean' ||
+    typeof candidate.createdAt !== 'string' ||
+    !isTodoStatus(candidate.status)
+  ) {
+    return null
+  }
+
+  return {
+    id: candidate.id,
+    title: candidate.title,
+    archived: candidate.archived,
+    status: candidate.status,
+    createdAt: normalizeCreatedAt(candidate.createdAt, fallbackCreatedOrder),
+    createdOrder:
+      typeof candidate.createdOrder === 'number' && Number.isFinite(candidate.createdOrder)
+        ? candidate.createdOrder
+        : fallbackCreatedOrder,
+  }
+}
+
+const loadPersistedTodos = (value: unknown) => {
+  if (!Array.isArray(value)) {
+    return null
+  }
+
+  const todos = value
+    .map((item, index, source) => parsePersistedTodoItem(item, source.length - index))
+    .filter((item): item is TodoItem => item !== null)
+
+  if (value.length === 0 || todos.length > 0) {
+    return todos
+  }
+
+  return initialTodos
+}
+
+const loadPersistedTodoState = (): PersistedTodoState | null => {
+  const storage = getTodoStorage()
+  if (!storage) {
+    return null
   }
 
   try {
-    const parsed = JSON.parse(raw)
-    if (!Array.isArray(parsed)) {
-      return initialTodos
+    const raw = storage.getItem(todoStorageKey)
+    if (!raw) {
+      return null
+    }
+
+    const parsed = JSON.parse(raw) as unknown
+    if (Array.isArray(parsed)) {
+      return {
+        todos: loadPersistedTodos(parsed) ?? initialTodos,
+        search: '',
+        activeFilter: 'all',
+      }
     }
 
-    return parsed.filter(
-      item =>
-        item &&
-        typeof item.id === 'number' &&
-        typeof item.title === 'string' &&
-        typeof item.archived === 'boolean' &&
-        typeof item.status === 'string' &&
-        typeof item.createdAt === 'string',
-    ) as TodoItem[]
+    if (!parsed || typeof parsed !== 'object') {
+      return null
+    }
+
+    const candidate = parsed as {
+      todos?: unknown
+      search?: unknown
+      activeFilter?: unknown
+    }
+
+    return {
+      todos: loadPersistedTodos(candidate.todos) ?? initialTodos,
+      search: typeof candidate.search === 'string' ? candidate.search : '',
+      activeFilter: isTodoFilter(candidate.activeFilter) ? candidate.activeFilter : 'all',
+    }
   } catch {
-    return initialTodos
+    return null
   }
 }
 
-const getNextTodoId = (todos: TodoItem[]) =>
-  todos.reduce((maxId, item) => Math.max(maxId, item.id), 0) + 1
+const persistTodoState = (state: PersistedTodoState) => {
+  const storage = getTodoStorage()
+  if (!storage) {
+    return
+  }
+
+  try {
+    storage.setItem(todoStorageKey, JSON.stringify(state))
+  } catch {}
+}
 
 const statusMeta: Record<
   TodoStatus,
@@ -117,89 +361,88 @@ const statusMeta: Record<
   },
 }
 
-const EditingTitleInput: FC<{
-  initialTitle: string
-  onSave: (title: string) => void
-  onCancel: () => void
-}> = props => {
-  const [title, setTitle] = useState(props.initialTitle)
-
-  return (
-    <div className="flex flex-col gap-3 sm:flex-row">
-      <input
-        className="input input-bordered w-full"
-        value={title.value}
-        onInput={(event: any) => {
-          setTitle((event.target as HTMLInputElement).value)
-        }}
-        onKeydown={(event: KeyboardEvent) => {
-          if (event.key === 'Enter') {
-            props.onSave(title.value.trim())
-          }
-          if (event.key === 'Escape') {
-            props.onCancel()
-          }
-        }}
-      />
-      <div className="flex gap-2">
-        <button className="btn btn-primary btn-sm" onClick={() => props.onSave(title.value.trim())}>
-          保存
-        </button>
-        <button className="btn btn-ghost btn-sm" onClick={props.onCancel}>
-          取消
-        </button>
-      </div>
-    </div>
-  )
-}
-
 const TodoApp: FC = () => {
-  const todos = ref<TodoItem[]>(getStoredTodos())
+  const persistedState = loadPersistedTodoState()
+  const initialStateTodos = persistedState?.todos ?? initialTodos
+  const todos = ref<TodoItem[]>(initialStateTodos)
   const draft = ref('')
-  const search = ref('')
-  const activeFilter = ref<TodoFilter>('all')
+  const search = ref(persistedState?.search ?? '')
+  const activeFilter = ref<TodoFilter>(persistedState?.activeFilter ?? 'all')
   const editingId = ref<number | null>(null)
-  const nextId = ref(getNextTodoId(todos.value))
-
-  watch(
-    () => todos.value,
-    () => {
-      localStorage.setItem(todoStorageKey, JSON.stringify(todos.value))
-      nextId.value = getNextTodoId(todos.value)
-    },
-  )
+  const editingTitle = ref('')
+  const nextId = ref(getNextTodoId(initialStateTodos))
+  const nextCreatedOrder = ref(getNextCreatedOrder(initialStateTodos))
+  const todosVersion = ref(0)
+
+  const syncTodos = (nextTodos: TodoItem[]) => {
+    todos.value = nextTodos
+    todosVersion.value += 1
+  }
 
-  const counts = computed(() => ({
-    total: todos.value.filter(item => !item.archived).length,
-    todo: todos.value.filter(item => !item.archived && item.status === 'todo').length,
-    doing: todos.value.filter(item => !item.archived && item.status === 'doing').length,
-    done: todos.value.filter(item => !item.archived && item.status === 'done').length,
-    archived: todos.value.filter(item => item.archived).length,
-  }))
+  watchEffect(() => {
+    void todosVersion.value
+    persistTodoState({
+      todos: todos.value,
+      search: search.value,
+      activeFilter: activeFilter.value,
+    })
+  })
 
-  const visibleTodos = computed(() => {
-    const keyword = search.value.trim().toLowerCase()
+  const counts = computed(() => {
+    void todosVersion.value
 
-    return todos.value.filter(item => {
-      const matchesKeyword = !keyword || item.title.toLowerCase().includes(keyword)
-      if (!matchesKeyword) {
-        return false
-      }
+    return {
+      total: todos.value.filter((item) => !item.archived).length,
+      todo: todos.value.filter((item) => !item.archived && item.status === 'todo').length,
+      doing: todos.value.filter((item) => !item.archived && item.status === 'doing').length,
+      done: todos.value.filter((item) => !item.archived && item.status === 'done').length,
+      archived: todos.value.filter((item) => item.archived).length,
+    }
+  })
 
-      if (activeFilter.value === 'archived') {
-        return item.archived
-      }
+  const visibleTodos = computed(() => {
+    void todosVersion.value
+    const keyword = search.value.trim().toLowerCase()
 
-      if (item.archived) {
-        return false
-      }
+    return todos.value
+      .filter((item) => {
+        const matchesKeyword = !keyword || item.title.toLowerCase().includes(keyword)
+        if (!matchesKeyword) {
+          return false
+        }
+
+        if (activeFilter.value === 'archived') {
+          return item.archived
+        }
+
+        if (item.archived) {
+          return false
+        }
+
+        if (activeFilter.value === 'all') {
+          return true
+        }
+
+        return item.status === activeFilter.value
+      })
+      .sort((left, right) => {
+        const createdAtDiff = getTodoCreatedAtTime(right) - getTodoCreatedAtTime(left)
+        if (createdAtDiff !== 0) {
+          return createdAtDiff
+        }
+
+        return right.createdOrder - left.createdOrder
+      })
+  })
 
-      if (activeFilter.value === 'all') {
-        return true
-      }
+  const visibleTodoCards = computed(() => {
+    const currentEditingId = editingId.value
 
-      return item.status === activeFilter.value
-    })
+    return visibleTodos.get().map((item) => ({
+      item,
+      meta: statusMeta[item.status],
+      isEditing: currentEditingId === item.id,
+    }))
   })
 
   const addTodo = () => {
@@ -208,61 +451,155 @@ const TodoApp: FC = () => {
       return
     }
 
-    todos.value = [
+    syncTodos([
       {
         id: nextId.value++,
         title,
         status: 'todo',
         archived: false,
-        createdAt: '刚刚',
+        createdAt: new Date().toISOString(),
+        createdOrder: nextCreatedOrder.value++,
       },
       ...todos.value,
-    ]
+    ])
     draft.value = ''
   }
 
   const removeTodo = (id: number) => {
-    todos.value = todos.value.filter(item => item.id !== id)
+    syncTodos(todos.value.filter((item) => item.id !== id))
     if (editingId.value === id) {
-      editingId.value = null
+      cancelEditing()
     }
   }
 
   const updateStatus = (id: number, status: TodoStatus) => {
-    todos.value = todos.value.map(item =>
-      item.id === id ? { ...item, status, archived: false } : item,
+    syncTodos(
+      todos.value.map((item) => (item.id === id ? { ...item, status, archived: false } : item)),
     )
   }
 
   const toggleArchived = (id: number) => {
-    todos.value = todos.value.map(item =>
-      item.id === id ? { ...item, archived: !item.archived } : item,
+    syncTodos(
+      todos.value.map((item) => (item.id === id ? { ...item, archived: !item.archived } : item)),
     )
   }
 
   const startEditing = (item: TodoItem) => {
     editingId.value = item.id
+    editingTitle.value = item.title
   }
 
   const cancelEditing = () => {
     editingId.value = null
+    editingTitle.value = ''
   }
 
-  const saveEditing = (id: number, title: string) => {
+  const saveEditing = (id: number) => {
+    const title = editingTitle.value.trim()
     if (!title) {
       return
     }
 
-    todos.value = todos.value.map(item => (item.id === id ? { ...item, title } : item))
+    syncTodos(todos.value.map((item) => (item.id === id ? { ...item, title } : item)))
     cancelEditing()
   }
 
+  const handleTodoListClick = (event: MouseEvent) => {
+    const actionElement = getClosestTodoActionElement(event.target)
+
+    if (!actionElement) {
+      return
+    }
+
+    const action = actionElement.dataset.todoAction
+    const id = Number(actionElement.dataset.todoId)
+
+    if (!Number.isFinite(id)) {
+      return
+    }
+
+    if (action === 'status') {
+      const status = actionElement.dataset.todoStatus
+      if (isTodoStatus(status)) {
+        updateStatus(id, status)
+      }
+      return
+    }
+
+    if (action === 'start-editing') {
+      const item = todos.value.find((candidate) => candidate.id === id)
+      if (item) {
+        startEditing(item)
+      }
+      return
+    }
+
+    if (action === 'save-editing') {
+      saveEditing(id)
+      return
+    }
+
+    if (action === 'cancel-editing') {
+      cancelEditing()
+      return
+    }
+
+    if (action === 'toggle-archived') {
+      toggleArchived(id)
+      return
+    }
+
+    if (action === 'remove') {
+      removeTodo(id)
+    }
+  }
+
+  const handleTodoListInput = (event: Event) => {
+    if (!(event.target instanceof HTMLInputElement)) {
+      return
+    }
+
+    const target = event.target
+    if (!target.matches('[data-todo-edit-input]')) {
+      return
+    }
+
+    editingTitle.value = target.value
+  }
+
+  const handleTodoListKeydown = (event: KeyboardEvent) => {
+    if (!(event.target instanceof HTMLInputElement)) {
+      return
+    }
+
+    const target = event.target
+    if (!target.matches('[data-todo-edit-input]')) {
+      return
+    }
+
+    const id = Number(target.dataset.todoId)
+    if (!Number.isFinite(id)) {
+      return
+    }
+
+    if (event.key === 'Enter' && !event.isComposing) {
+      event.preventDefault()
+      saveEditing(id)
+    }
+
+    if (event.key === 'Escape') {
+      cancelEditing()
+    }
+  }
+
   return (
     <div className="space-y-6 pb-4">
       <section className="hero border border-base-300 bg-base-100 shadow-xl">
         <div className="hero-content flex-col items-start gap-8 px-6 py-8 lg:flex-row lg:items-end lg:justify-between">
           <div className="max-w-3xl space-y-4">
-            <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">Todo App 已作为 base 模板内置页面</h1>
+            <h1 className="text-4xl font-semibold tracking-tight sm:text-5xl">
+              Todo App 已作为 base 模板内置页面
+            </h1>
             <div className="flex flex-wrap gap-3">
               <RouterLink to="/" className="btn btn-outline">
                 返回默认简报
@@ -303,7 +640,8 @@ const TodoApp: FC = () => {
                     draft.value = (event.target as HTMLInputElement).value
                   }}
                   onKeydown={(event: KeyboardEvent) => {
-                    if (event.key === 'Enter') {
+                    if (event.key === 'Enter' && !event.isComposing) {
+                      event.preventDefault()
                       addTodo()
                     }
                   }}
@@ -330,7 +668,7 @@ const TodoApp: FC = () => {
           </div>
 
           <div className="flex flex-wrap gap-2">
-            {filterOptions.map(filter => (
+            {filterOptions.map((filter) => (
               <button
                 key={filter.key}
                 className={`btn btn-sm ${
@@ -364,89 +702,130 @@ const TodoApp: FC = () => {
         </div>
       </section>
 
-      <section className="grid gap-4">
-        {visibleTodos.get().length ? (
-          visibleTodos.get().map(item => {
-            const meta = statusMeta[item.status]
-            const isEditing = editingId.value === item.id
-
-            return (
-              <article
-                key={item.id}
-                className={`card border bg-base-100 shadow-sm transition-all ${meta.cardClass} ${
-                  item.archived ? 'opacity-75' : 'hover:-translate-y-0.5 hover:shadow-md'
-                }`}
-              >
-                <div className="card-body gap-4">
-                  <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
-                    <div className="flex-1 space-y-3">
-                      <div className="flex flex-wrap items-center gap-2">
-                        <span className={`inline-block h-2.5 w-2.5 rounded-full ${meta.dotClass}`}></span>
-                        <span className={meta.badgeClass}>{meta.label}</span>
-                        {item.archived && <span className="badge badge-secondary badge-outline">已归档</span>}
-                        <span className="text-xs text-base-content/50">创建于 {item.createdAt}</span>
-                      </div>
+      <section
+        className="grid gap-4"
+        onClick={handleTodoListClick}
+        onInput={handleTodoListInput}
+        onKeydown={handleTodoListKeydown}
+      >
+        {visibleTodoCards.get().map((card) => (
+          <article
+            key={card.item.id}
+            className={`card border bg-base-100 shadow-sm transition-all ${card.meta.cardClass} ${
+              card.item.archived ? 'opacity-75' : 'hover:-translate-y-0.5 hover:shadow-md'
+            }`}
+          >
+            <div className="card-body gap-4">
+              <div className="flex flex-col gap-4 lg:flex-row lg:items-start lg:justify-between">
+                <div className="flex-1 space-y-3">
+                  <div className="flex flex-wrap items-center gap-2">
+                    <span
+                      className={`inline-block h-2.5 w-2.5 rounded-full ${card.meta.dotClass}`}
+                    ></span>
+                    <span className={card.meta.badgeClass}>{card.meta.label}</span>
+                    {card.item.archived && (
+                      <span className="badge badge-secondary badge-outline">已归档</span>
+                    )}
+                    <span className="text-xs text-base-content/50">
+                      创建于 {formatTodoCreatedAt(card.item.createdAt)}
+                    </span>
+                  </div>
 
-                      {!isEditing && (
-                        <h2
-                          className={`text-xl font-semibold ${
-                            item.status === 'done'
-                              ? 'text-base-content/50 line-through'
-                              : 'text-base-content'
-                          }`}
+                  {!card.isEditing && (
+                    <h2
+                      className={`text-xl font-semibold ${
+                        card.item.status === 'done'
+                          ? 'text-base-content/50 line-through'
+                          : 'text-base-content'
+                      }`}
+                    >
+                      {card.item.title}
+                    </h2>
+                  )}
+
+                  {card.isEditing && (
+                    <div className="flex flex-col gap-3 sm:flex-row">
+                      <input
+                        className="input input-bordered w-full"
+                        data-todo-edit-input="true"
+                        data-todo-id={String(card.item.id)}
+                        value={editingTitle.value}
+                      />
+                      <div className="flex gap-2">
+                        <button
+                          className="btn btn-primary btn-sm"
+                          data-todo-action="save-editing"
+                          data-todo-id={String(card.item.id)}
+                          type="button"
                         >
-                          {item.title}
-                        </h2>
-                      )}
-
-                      {isEditing && (
-                        <EditingTitleInput
-                          key={item.id}
-                          initialTitle={item.title}
-                          onSave={title => saveEditing(item.id, title)}
-                          onCancel={cancelEditing}
-                        />
-                      )}
-
-                      <div className="flex flex-wrap gap-2">
-                        {statusOptions.map(option => (
-                          <button
-                            key={option.key}
-                            className={`btn btn-xs ${
-                              item.status === option.key
-                                ? 'btn-neutral'
-                                : 'btn-ghost border border-base-300'
-                            }`}
-                            onClick={() => updateStatus(item.id, option.key)}
-                          >
-                            {option.label}
-                          </button>
-                        ))}
+                          保存
+                        </button>
+                        <button
+                          className="btn btn-ghost btn-sm"
+                          data-todo-action="cancel-editing"
+                          data-todo-id={String(card.item.id)}
+                          type="button"
+                        >
+                          取消
+                        </button>
                       </div>
                     </div>
+                  )}
 
-                    <div className="flex flex-wrap gap-2 lg:justify-end">
-                      {!isEditing && (
-                        <button className="btn btn-sm btn-outline" onClick={() => startEditing(item)}>
-                          改名
-                        </button>
-                      )}
+                  <div className="flex flex-wrap gap-2">
+                    {statusOptions.map((option) => (
                       <button
-                        className="btn btn-sm btn-outline btn-secondary"
-                        onClick={() => toggleArchived(item.id)}
+                        key={option.key}
+                        className={`btn btn-xs ${
+                          card.item.status === option.key
+                            ? 'btn-neutral'
+                            : 'btn-ghost border border-base-300'
+                        }`}
+                        data-todo-action="status"
+                        data-todo-id={String(card.item.id)}
+                        data-todo-status={option.key}
+                        type="button"
                       >
-                        {item.archived ? '恢复' : '归档'}
-                      </button>
-                      <button className="btn btn-sm btn-outline btn-error" onClick={() => removeTodo(item.id)}>
-                        删除
+                        {option.actionLabel}
                       </button>
-                    </div>
+                    ))}
                   </div>
                 </div>
-              </article>
-            )
-          })
-        ) : (
+
+                <div className="flex flex-wrap gap-2 lg:justify-end">
+                  {!card.isEditing && (
+                    <button
+                      className="btn btn-sm btn-outline"
+                      data-todo-action="start-editing"
+                      data-todo-id={String(card.item.id)}
+                      type="button"
+                    >
+                      改名
+                    </button>
+                  )}
+                  <button
+                    className="btn btn-sm btn-outline btn-secondary"
+                    data-todo-action="toggle-archived"
+                    data-todo-id={String(card.item.id)}
+                    type="button"
+                  >
+                    {card.item.archived ? '恢复' : '归档'}
+                  </button>
+                  <button
+                    className="btn btn-sm btn-outline btn-error"
+                    data-todo-action="remove"
+                    data-todo-id={String(card.item.id)}
+                    type="button"
+                  >
+                    删除
+                  </button>
+                </div>
+              </div>
+            </div>
+          </article>
+        ))}
+
+        {!visibleTodoCards.get().length && (
           <div className="card border border-dashed border-base-300 bg-base-100 shadow-sm">
             <div className="card-body items-center py-14 text-center">
               <h2 className="text-xl font-semibold">当前筛选下没有任务</h2>
@@ -461,4 +840,4 @@ const TodoApp: FC = () => {
   )
 }
 
-export default TodoApp
+export default TodoApp