feat: 添加自定义错误和404页面组件

- 添加错误组件以显示未处理的错误信息
- 将NotFound组件重命名为NotFoundComponent并更新显示文本为404 - Not Found。
- 使用自定义错误和未找到页面组件替换默认的错误和404提示。

src/components/Error.tsx

@@ -0,0 +1,3 @@
+export function ErrorComponent() {
+  return <div>An unhandled error happened!</div>
+}

src/components/NotFount.tsx

@@ -1,3 +1,3 @@
-export function NotFound() {
-  return <div>Not Found</div>
+export function NotFoundComponent() {
+  return <div>404 - Not Found</div>
 }

src/routes/__root.tsx

@@ -1,6 +1,8 @@
 import { TanStackDevtools } from '@tanstack/react-devtools'
 import { createRootRoute, HeadContent, Scripts } from '@tanstack/react-router'
 import type { ReactNode } from 'react'
+import { ErrorComponent } from '@/components/Error'
+import { NotFoundComponent } from '@/components/NotFount'
 import { devtools as queryDevtools } from '@/integrations/tanstack-query'
 import { devtools as routerDevtools } from '@/integrations/tanstack-router'
 import appCss from '@/styles.css?url'
@@ -27,8 +29,8 @@ export const Route = createRootRoute({
     ],
   }),
   shellComponent: RootDocument,
-  errorComponent: () => <div>Error</div>,
-  notFoundComponent: () => <div>404 - Not Found</div>,
+  errorComponent: () => <ErrorComponent />,
+  notFoundComponent: () => <NotFoundComponent />,
 })
 
 function RootDocument({ children }: Readonly<{ children: ReactNode }>) {