From fa802b50adce95a38cea6ff3986f537c6d917da0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?=
 <fsmecx@gmail.com>
Date: Wed, 5 Nov 2025 10:37:39 +0800
Subject: [PATCH] Add 404 Not Found route to the router configuration to handle
 unmatched paths.

---
 Touchkebao/src/pages/404/index.module.scss | 75 ++++++++++++++++++++++
 Touchkebao/src/pages/404/index.tsx         | 59 +++++++++++++++++
 Touchkebao/src/router/index.tsx            | 11 +++-
 3 files changed, 144 insertions(+), 1 deletion(-)
 create mode 100644 Touchkebao/src/pages/404/index.module.scss
 create mode 100644 Touchkebao/src/pages/404/index.tsx

diff --git a/Touchkebao/src/pages/404/index.module.scss b/Touchkebao/src/pages/404/index.module.scss
new file mode 100644
index 00000000..e486dbd0
--- /dev/null
+++ b/Touchkebao/src/pages/404/index.module.scss
@@ -0,0 +1,75 @@
+.not-found-container {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: 100vh;
+  padding: 20px;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+}
+
+.not-found-content {
+  text-align: center;
+  max-width: 500px;
+  width: 100%;
+}
+
+.error-code {
+  font-size: 120px;
+  font-weight: bold;
+  color: #1890ff;
+  line-height: 1;
+  margin-bottom: 20px;
+  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
+  
+  @media (max-width: 768px) {
+    font-size: 80px;
+  }
+}
+
+.error-title {
+  font-size: 28px;
+  font-weight: 600;
+  color: #333;
+  margin: 20px 0 16px;
+  
+  @media (max-width: 768px) {
+    font-size: 24px;
+  }
+}
+
+.error-description {
+  font-size: 16px;
+  color: #666;
+  margin-bottom: 40px;
+  line-height: 1.6;
+  
+  @media (max-width: 768px) {
+    font-size: 14px;
+    margin-bottom: 30px;
+  }
+}
+
+.action-buttons {
+  display: flex;
+  gap: 16px;
+  justify-content: center;
+  flex-wrap: wrap;
+  
+  @media (max-width: 768px) {
+    flex-direction: column;
+    gap: 12px;
+  }
+}
+
+.action-btn {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 140px;
+  
+  @media (max-width: 768px) {
+    width: 100%;
+    justify-content: center;
+  }
+}
+
diff --git a/Touchkebao/src/pages/404/index.tsx b/Touchkebao/src/pages/404/index.tsx
new file mode 100644
index 00000000..edbeec11
--- /dev/null
+++ b/Touchkebao/src/pages/404/index.tsx
@@ -0,0 +1,59 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import { Button } from "antd-mobile";
+import { ArrowLeftOutlined, HomeOutlined } from "@ant-design/icons";
+import Layout from "@/components/Layout/Layout";
+import styles from "./index.module.scss";
+
+const NotFound: React.FC = () => {
+  const navigate = useNavigate();
+
+  const handleGoHome = () => {
+    navigate("/");
+  };
+
+  const handleGoBack = () => {
+    navigate(-1);
+  };
+
+  return (
+    <Layout>
+      <div className={styles["not-found-container"]}>
+        <div className={styles["not-found-content"]}>
+          {/* 404 图标 */}
+          <div className={styles["error-code"]}>404</div>
+
+          {/* 错误提示 */}
+          <h1 className={styles["error-title"]}>页面未找到</h1>
+          <p className={styles["error-description"]}>
+            抱歉，您访问的页面不存在或已被删除
+          </p>
+
+          {/* 操作按钮 */}
+          <div className={styles["action-buttons"]}>
+            <Button
+              color="primary"
+              size="large"
+              onClick={handleGoHome}
+              className={styles["action-btn"]}
+            >
+              <HomeOutlined />
+              <span>返回首页</span>
+            </Button>
+            <Button
+              color="default"
+              size="large"
+              onClick={handleGoBack}
+              className={styles["action-btn"]}
+            >
+              <ArrowLeftOutlined />
+              <span>返回上页</span>
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Layout>
+  );
+};
+
+export default NotFound;
diff --git a/Touchkebao/src/router/index.tsx b/Touchkebao/src/router/index.tsx
index 117681a7..877aa58c 100644
--- a/Touchkebao/src/router/index.tsx
+++ b/Touchkebao/src/router/index.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import { BrowserRouter, useRoutes, RouteObject } from "react-router-dom";
 import PermissionRoute from "./permissionRoute";
+import NotFound from "@/pages/404";
 
 // 动态导入所有 module 下的 ts/tsx 路由模块
 const modules = import.meta.glob("./module/*.{ts,tsx}", { eager: true });
@@ -31,7 +32,15 @@ function wrapWithPermission(
   return route;
 }
 
-const routes = allRoutes.map(wrapWithPermission);
+// 添加 404 路由（通配符路由，必须放在最后）
+const routes = [
+  ...allRoutes.map(wrapWithPermission),
+  {
+    path: "*",
+    element: <NotFound />,
+    auth: false,
+  },
+];
 
 const AppRoutes = () => useRoutes(routes);