refactor: 抽取 UI 组件、改进错误页面、统一导入路径并简化数据库接口

src/components/TodoForm.tsx

@@ -0,0 +1,41 @@
+import type { SubmitEventHandler } from 'react'
+import { useState } from 'react'
+
+interface TodoFormProps {
+  onSubmit: (title: string) => void
+  isPending: boolean
+}
+
+export const TodoForm = ({ onSubmit, isPending }: TodoFormProps) => {
+  const [title, setTitle] = useState('')
+
+  const handleSubmit: SubmitEventHandler<HTMLFormElement> = (e) => {
+    e.preventDefault()
+    if (title.trim()) {
+      onSubmit(title.trim())
+      setTitle('')
+    }
+  }
+
+  return (
+    <form onSubmit={handleSubmit} className="relative group z-10">
+      <div className="relative transform transition-all duration-200 focus-within:-translate-y-1">
+        <input
+          type="text"
+          value={title}
+          onChange={(e) => setTitle(e.target.value)}
+          placeholder="添加新任务..."
+          className="w-full pl-6 pr-32 py-5 bg-white rounded-2xl shadow-[0_8px_30px_rgb(0,0,0,0.04)] border-0 ring-1 ring-slate-100 focus:ring-2 focus:ring-indigo-500/50 outline-none transition-all placeholder:text-slate-400 text-lg text-slate-700"
+          disabled={isPending}
+        />
+        <button
+          type="submit"
+          disabled={isPending || !title.trim()}
+          className="absolute right-3 top-3 bottom-3 px-6 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition-all shadow-md shadow-indigo-200 disabled:opacity-50 disabled:shadow-none hover:shadow-lg hover:shadow-indigo-300 active:scale-95"
+        >
+          {isPending ? '添加中' : '添加'}
+        </button>
+      </div>
+    </form>
+  )
+}