feat: Add error page

app/error.tsx

@@ -1,23 +1,34 @@
+/* eslint-disable no-console */
 "use client";
 
+import { Button } from "@nextui-org/button";
+import { Card } from "@nextui-org/card";
 import { useEffect } from "react";
+import { toast } from "react-toastify";
 
-export default function Error({
-  	error,
-  	reset,
-}: {
-  	error: Error;
-  	reset: () => void;
+export default function Error({ error, reset }: {
+    error: Error & { digest?: string }
+    reset: () => void
 }) {
-  	useEffect(() => {
-  	  	/* eslint-disable no-console */
-  	  	console.error(error);
-  	}, [error]);
+    useEffect(() => {
+        console.error(error);
+        toast.error("页面出错");
+    }, []);
 
-  	return (
-  	  	<div>
-  	  	  	<h2>Something went wrong!</h2>
-  	  	  	<button onClick={() => reset()}>Try again</button>
-  	  	</div>
-  	);
+    return (
+        <div className="w-[100vw] h-[100vh] flex justify-center items-center">
+            <Card className="w-[30rem] h-fit p-6 flex flex-col gap-5">
+                <div className="flex-1">
+                    <h1 className="text-2xl font-bold mb-3">Ferrum 错误</h1>
+
+                    <p className="break-words">
+                        <code>{error.message}</code>
+                    </p>
+                    {error.digest && <p className="text-red-700 float-right">(digest: {error.digest})</p>}
+                </div>
+
+                <Button color="primary" onPress={() => reset()}>重试</Button>
+            </Card>
+        </div>
+    );
 }

components/explorer/explorer-grid-view-item.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import type { ViewItemProps } from "@/types";
 
 import React from "react";

components/explorer/explorer-grid-view.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import type { ViewProps } from "@/types";
 
 import React from "react";

components/explorer/explorer-item.tsx

@@ -1,6 +1,4 @@
 /* eslint-disable react-hooks/rules-of-hooks */
-"use client";
-
 import type { DirectoryItem, DisplayingMode } from "@/types";
 
 import React, { useState, useMemo, useEffect } from "react";

components/explorer/explorer-list-view-item.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import type { ViewItemProps } from "@/types";
 
 import React from "react";

components/explorer/explorer-list-view.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import type { ViewProps } from "@/types";
 
 import React from "react";

components/explorer/explorer.tsx

@@ -1,6 +1,4 @@
 /* eslint-disable padding-line-between-statements */
-"use client";
-
 import type { BaseResponseData, DirectoryItem } from "@/types";
 
 import React, { useState, useEffect } from "react";

components/explorer/sidebar-widget.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React, { type PropsWithChildren } from "react";
 
 interface SidebarWidgetProps extends PropsWithChildren {

components/explorer/sidebar.tsx

@@ -1,4 +1,4 @@
-"use-client";
+"use client";
 
 import React, { useEffect, useState } from "react";
 import { Card } from "@nextui-org/card";

components/explorer/starred-item.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import path from "path";
 
 import React from "react";

components/settings/settings-item.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React, { type PropsWithChildren } from "react";
 
 interface SettingsItemProps extends PropsWithChildren {

components/settings/settings-section.tsx

@@ -1,5 +1,3 @@
-"use client";
-
 import React, { type PropsWithChildren } from "react";
 import { Card } from "@nextui-org/card";