create-rue 0.8.0 → 0.9.7

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, useState, 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,281 @@ 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 getTodoStorage = () => {
+  if (typeof globalThis === 'undefined' || !('localStorage' in globalThis)) {
+    return null
   }
 
   try {
-    const parsed = JSON.parse(raw)
-    if (!Array.isArray(parsed)) {
-      return initialTodos
+    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 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',
+      }
+    }
+
+    if (!parsed || typeof parsed !== 'object') {
+      return null
+    }
+
+    const candidate = parsed as {
+      todos?: unknown
+      search?: unknown
+      activeFilter?: unknown
     }
 
-    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[]
+    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,143 +349,130 @@ 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 draft = ref('')
-  const search = ref('')
-  const activeFilter = ref<TodoFilter>('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 persistedState = loadPersistedTodoState()
+  const initialStateTodos = persistedState?.todos ?? initialTodos
+  const initialActiveFilter: TodoFilter = persistedState?.activeFilter ?? 'all'
+  const [todos, setTodos] = useState<TodoItem[]>(initialStateTodos)
+  const [draft, setDraft] = useState('')
+  const [search, setSearch] = useState(persistedState?.search ?? '')
+  const activeFilter = ref<TodoFilter>(initialActiveFilter)
+  const setActiveFilter = (nextFilter: TodoFilter) => {
+    activeFilter.value = nextFilter
+  }
+  const [editingId, setEditingId] = useState<number | null>(null)
+  const [editingTitle, setEditingTitle] = useState('')
+  const nextId = ref(getNextTodoId(initialStateTodos))
+  const nextCreatedOrder = ref(getNextCreatedOrder(initialStateTodos))
+
+  watchEffect(() => {
+    persistTodoState({
+      todos,
+      search,
+      activeFilter: activeFilter.value,
+    })
+  })
 
-  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,
-  }))
+  const counts = computed(() => {
+    return {
+      total: todos.filter((item) => !item.archived).length,
+      todo: todos.filter((item) => !item.archived && item.status === 'todo').length,
+      doing: todos.filter((item) => !item.archived && item.status === 'doing').length,
+      done: todos.filter((item) => !item.archived && item.status === 'done').length,
+      archived: todos.filter((item) => item.archived).length,
+    }
+  })
 
   const visibleTodos = computed(() => {
-    const keyword = search.value.trim().toLowerCase()
-
-    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
-    })
+    const keyword = search.trim().toLowerCase()
+
+    return todos
+      .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
+      })
   })
 
   const addTodo = () => {
-    const title = draft.value.trim()
+    const title = draft.trim()
     if (!title) {
       return
     }
 
-    todos.value = [
-      {
-        id: nextId.value++,
-        title,
-        status: 'todo',
-        archived: false,
-        createdAt: '刚刚',
-      },
-      ...todos.value,
-    ]
-    draft.value = ''
+    const nextTodo: TodoItem = {
+      id: nextId.value++,
+      title,
+      status: 'todo',
+      archived: false,
+      createdAt: new Date().toISOString(),
+      createdOrder: nextCreatedOrder.value++,
+    }
+
+    setTodos((current) => [nextTodo, ...current])
+    setDraft('')
   }
 
   const removeTodo = (id: number) => {
-    todos.value = todos.value.filter(item => item.id !== id)
-    if (editingId.value === id) {
-      editingId.value = null
+    setTodos((current) => current.filter((item) => item.id !== id))
+    if (editingId === id) {
+      setEditingId(null)
+      setEditingTitle('')
     }
   }
 
   const updateStatus = (id: number, status: TodoStatus) => {
-    todos.value = todos.value.map(item =>
-      item.id === id ? { ...item, status, archived: false } : item,
+    setTodos((current) =>
+      current.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,
+    setTodos((current) =>
+      current.map((item) => (item.id === id ? { ...item, archived: !item.archived } : item)),
     )
   }
 
   const startEditing = (item: TodoItem) => {
-    editingId.value = item.id
+    setEditingId(item.id)
+    setEditingTitle(item.title)
   }
 
   const cancelEditing = () => {
-    editingId.value = null
+    setEditingId(null)
+    setEditingTitle('')
   }
 
-  const saveEditing = (id: number, title: string) => {
+  const saveEditing = (id: number, titleOverride?: string) => {
+    const title = (titleOverride ?? editingTitle).trim()
     if (!title) {
       return
     }
 
-    todos.value = todos.value.map(item => (item.id === id ? { ...item, title } : item))
+    setTodos((current) => current.map((item) => (item.id === id ? { ...item, title } : item)))
     cancelEditing()
   }
 
@@ -299,13 +518,14 @@ const TodoApp: FC = () => {
               <div className="join w-full">
                 <input
                   className="input input-bordered join-item w-full"
-                  value={draft.value}
+                  value={draft}
                   placeholder="例如：把日报页接入真实 API"
                   onInput={(event: any) => {
-                    draft.value = (event.target as HTMLInputElement).value
+                    setDraft((event.target as HTMLInputElement).value)
                   }}
                   onKeydown={(event: KeyboardEvent) => {
-                    if (event.key === 'Enter') {
+                    if (event.key === 'Enter' && !event.isComposing) {
+                      event.preventDefault()
                       addTodo()
                     }
                   }}
@@ -322,17 +542,17 @@ const TodoApp: FC = () => {
               </div>
               <input
                 className="input input-bordered w-full"
-                value={search.value}
+                value={search}
                 placeholder="按标题筛选任务"
                 onInput={(event: any) => {
-                  search.value = (event.target as HTMLInputElement).value
+                  setSearch((event.target as HTMLInputElement).value)
                 }}
               />
             </label>
           </div>
 
           <div className="flex flex-wrap gap-2">
-            {filterOptions.map(filter => (
+            {filterOptions.map((filter) => (
               <button
                 key={filter.key}
                 className={`btn btn-sm ${
@@ -341,7 +561,7 @@ const TodoApp: FC = () => {
                     : 'btn-ghost border border-base-300'
                 }`}
                 onClick={() => {
-                  activeFilter.value = filter.key
+                  setActiveFilter(filter.key)
                 }}
               >
                 {filter.label}
@@ -367,15 +587,19 @@ const TodoApp: FC = () => {
       </section>
 
       <section className="grid gap-4">
-        {visibleTodos.get().map(item => {
+        {visibleTodos.get().map((item) => {
+          const isEditing = editingId === item.id
+          const editingValue = isEditing ? editingTitle : item.title
           const meta = statusMeta[item.status]
-          const isEditing = editingId.value === item.id
+
+          const commitEditing = (latestValue: string) => {
+            setEditingTitle(latestValue)
+            saveEditing(item.id, latestValue)
+          }
 
           return (
             <article
-              key={`${item.id}-${item.title}-${item.status}-${item.archived ? 'archived' : 'active'}-${
-                isEditing ? 'editing' : 'view'
-              }`}
+              key={`${item.id}-${item.title}-${item.status}-${item.archived ? 'archived' : 'active'}-${isEditing ? 'editing' : 'view'}`}
               className={`card border bg-base-100 shadow-sm transition-all ${meta.cardClass} ${
                 item.archived ? 'opacity-75' : 'hover:-translate-y-0.5 hover:shadow-md'
               }`}
@@ -391,32 +615,68 @@ const TodoApp: FC = () => {
                       {item.archived && (
                         <span className="badge badge-secondary badge-outline">已归档</span>
                       )}
-                      <span className="text-xs text-base-content/50">创建于 {item.createdAt}</span>
+                      <span className="text-xs text-base-content/50">
+                        创建于 {formatTodoCreatedAt(item.createdAt)}
+                      </span>
                     </div>
 
-                    {!isEditing && (
-                      <h2
-                        className={`text-xl font-semibold ${
-                          item.status === 'done'
+                    <h2
+                      className={`text-xl font-semibold ${
+                        isEditing
+                          ? 'hidden'
+                          : item.status === 'done'
                             ? 'text-base-content/50 line-through'
                             : 'text-base-content'
-                        }`}
-                      >
-                        {item.title}
-                      </h2>
-                    )}
+                      }`}
+                    >
+                      {item.title}
+                    </h2>
 
-                    {isEditing && (
-                      <EditingTitleInput
-                        key={item.id}
-                        initialTitle={item.title}
-                        onSave={title => saveEditing(item.id, title)}
-                        onCancel={cancelEditing}
+                    <div
+                      data-todo-edit-row="true"
+                      className={`flex flex-col gap-3 sm:flex-row ${isEditing ? '' : 'hidden'}`}
+                    >
+                      <input
+                        className="input input-bordered w-full"
+                        value={editingValue}
+                        onInput={(event: any) => {
+                          setEditingTitle((event.target as HTMLInputElement).value)
+                        }}
+                        onKeydown={(event: KeyboardEvent) => {
+                          if (event.key === 'Enter') {
+                            commitEditing((event.target as HTMLInputElement).value)
+                          }
+                          if (event.key === 'Escape') {
+                            cancelEditing()
+                          }
+                        }}
                       />
-                    )}
+                      <div className="flex gap-2">
+                        <button
+                          className="btn btn-primary btn-sm"
+                          onClick={(event: any) => {
+                            const editRow = (event.currentTarget as HTMLElement).closest(
+                              '[data-todo-edit-row="true"]',
+                            ) as HTMLElement | null
+                            const input = editRow?.querySelector('input') as HTMLInputElement | null
+                            commitEditing(input?.value ?? editingValue)
+                          }}
+                          type="button"
+                        >
+                          保存
+                        </button>
+                        <button
+                          className="btn btn-ghost btn-sm"
+                          onClick={cancelEditing}
+                          type="button"
+                        >
+                          取消
+                        </button>
+                      </div>
+                    </div>
 
                     <div className="flex flex-wrap gap-2">
-                      {statusOptions.map(option => (
+                      {statusOptions.map((option) => (
                         <button
                           key={option.key}
                           className={`btn btn-xs ${
@@ -425,8 +685,9 @@ const TodoApp: FC = () => {
                               : 'btn-ghost border border-base-300'
                           }`}
                           onClick={() => updateStatus(item.id, option.key)}
+                          type="button"
                         >
-                          {option.label}
+                          {option.actionLabel}
                         </button>
                       ))}
                     </div>
@@ -434,19 +695,25 @@ const TodoApp: FC = () => {
 
                   <div className="flex flex-wrap gap-2 lg:justify-end">
                     {!isEditing && (
-                      <button className="btn btn-sm btn-outline" onClick={() => startEditing(item)}>
+                      <button
+                        className="btn btn-sm btn-outline"
+                        onClick={() => startEditing(item)}
+                        type="button"
+                      >
                         改名
                       </button>
                     )}
                     <button
                       className="btn btn-sm btn-outline btn-secondary"
                       onClick={() => toggleArchived(item.id)}
+                      type="button"
                     >
                       {item.archived ? '恢复' : '归档'}
                     </button>
                     <button
                       className="btn btn-sm btn-outline btn-error"
                       onClick={() => removeTodo(item.id)}
+                      type="button"
                     >
                       删除
                     </button>
@@ -456,10 +723,11 @@ const TodoApp: FC = () => {
             </article>
           )
         })}
+
         {!visibleTodos.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">
-              <h3 className="text-xl font-semibold">当前筛选下没有任务</h3>
+              <h2 className="text-xl font-semibold">当前筛选下没有任务</h2>
               <p className="max-w-md text-sm leading-6 text-base-content/70">
                 试试切换筛选、搜索关键字，或者直接新增一条任务。
               </p>