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

src/components/NotFound.tsx

@@ -1,3 +1,23 @@
-export function NotFoundComponent() {
-  return <div>404 - Not Found</div>
+import { Link } from '@tanstack/react-router'
+
+export const NotFoundComponent = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-slate-50 px-4">
+      <div className="max-w-md w-full text-center space-y-6">
+        <div className="inline-flex items-center justify-center w-16 h-16 rounded-full bg-slate-100">
+          <span className="text-3xl font-bold text-slate-400">404</span>
+        </div>
+        <div>
+          <h1 className="text-2xl font-bold text-slate-900">页面不存在</h1>
+          <p className="text-slate-500 mt-2">您访问的页面可能已被移除或地址有误</p>
+        </div>
+        <Link
+          to="/"
+          className="inline-block px-6 py-2.5 bg-indigo-600 hover:bg-indigo-700 text-white rounded-xl font-medium transition-colors"
+        >
+          返回首页
+        </Link>
+      </div>
+    </div>
+  )
 }