refactor: 🐕 更新文件(夹)命名

.env

@@ -1,3 +1,3 @@
 VITE_APP_BASE_URL="/"
 VITE_APP_API_URL="//127.0.0.1:5050/api"
-VITE_APP_TITLE="XX系统"
+VITE_APP_TITLE_SUFFIX ="XX系统"

package.json

@@ -26,7 +26,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-helmet-async": "^2.0.5",
-    "react-router-dom": "^6.28.0",
+    "react-router-dom": "6.26.2",
     "tailwind-merge": "^2.5.4",
     "zustand": "^5.0.1"
   },
@@ -40,6 +40,7 @@
     "@vitejs/plugin-react-swc": "^3.7.1",
     "autoprefixer": "^10.4.20",
     "eslint": "^9.14.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react-hooks": "^5.0.0",
     "eslint-plugin-react-refresh": "^0.4.14",
@@ -61,4 +62,4 @@
       "npm run lint:fix"
     ]
   }
-}
+}

src/components/helmet/index.tsx

@@ -0,0 +1,15 @@
+import { Helmet } from "react-helmet-async";
+import { useMatches } from "react-router-dom";
+import { at } from "@/utils";
+
+export function AppHelmet() {
+  const matches = useMatches();
+  const currRouter = at(matches, -1);
+  return (
+    <Helmet>
+      <title>
+        {(currRouter?.handle as any)?.title || "React"} | {import.meta.env.VITE_APP_TITLE_SUFFIX}
+      </title>
+    </Helmet>
+  );
+}

src/layouts/components/Content.tsx → src/layouts/components/main-content.tsx

@@ -6,7 +6,7 @@ export default function Content() {
   const matches = useMatches();
   const currRouter = matches.at(-1);
   return (
-    <Layout.Content className="min-h-[calc(100vh-64px)] p-4">
+    <Layout.Content className="min-h-[calc(100vh-64px)] p-4 overflow-hidden">
       <SlideFade key={currRouter!.pathname}>
         <Outlet />
       </SlideFade>

src/layouts/components/Sider.tsx → src/layouts/components/sider-bar.tsx

@@ -45,15 +45,15 @@ const items: MenuProps["items"] = [
   {
     icon: <MenuOutlined />,
     label: "一级菜单",
-    key: "/nav",
+    key: "/nest-menu",
     children: [
       {
-        key: "/nav/sub-1",
-        label: <Link to="/nav/sub-1">二级菜单-1</Link>,
+        key: "/nest-menu/sub-menu-1",
+        label: <Link to="/nest-menu/sub-menu-1">二级菜单-1</Link>,
       },
       {
-        key: "/nav/sub-2",
-        label: <Link to="/nav/sub-2">二级菜单-2</Link>,
+        key: "/nest-menu/sub-menu-2",
+        label: <Link to="/nest-menu/sub-menu-2">二级菜单-2</Link>,
       },
     ],
   },
@@ -64,7 +64,7 @@ const items: MenuProps["items"] = [
   },
 ];
 
-export default function Sider() {
+export default function SiderBar() {
   const location = useLocation();
 
   const firstRenderRef = useRef(true);

src/layouts/index.tsx

@@ -1,36 +1,63 @@
+import { useEffect } from "react";
 import { MenuFoldOutlined, MenuUnfoldOutlined } from "@ant-design/icons";
 import { Button, Flex, Layout } from "antd";
+import { AppHelmet } from "@/components/helmet";
 import { ThemeSwitch } from "@/components/theme-switch";
-import Breadcrumb from "./components/breadcrumb";
-import Content from "./components/content";
+import Breadcrumb from "./components/bread-crumb";
 import CustomSkin from "./components/custom-skin";
-import Sider from "./components/sider";
+import Content from "./components/main-content";
+import SiderBar from "./components/sider-bar";
 import UserAvatar from "./components/user-avatar";
 import { setCollapsed, useSelector, useSettingsStore } from "@/stores";
 
 export default function MainLayout() {
   const { collapsed } = useSettingsStore(useSelector(["collapsed"]));
 
+  // 设置header阴影
+  useEffect(() => {
+    const handleScroll = () => {
+      const scrollTop = document.scrollingElement?.scrollTop || document.body.scrollTop;
+      const className = "shadow-[0_6px_10px_-10px_rgba(0,0,0,0.3)]";
+      if (scrollTop > 0) {
+        document.getElementById("app-header-bar")?.classList.add(className);
+      } else {
+        document.getElementById("app-header-bar")?.classList.remove(className);
+      }
+    };
+    window.addEventListener("scroll", handleScroll);
+    return () => {
+      window.removeEventListener("scroll", handleScroll);
+    };
+  }, []);
+
+  console.log("out  👉: ");
+
   return (
-    <Layout>
-      <Sider />
+    <>
+      <AppHelmet />
       <Layout>
-        <Layout.Header className="flex items-center sticky top-0 z-[999] pl-0 bg-white dark:bg-[#001529]">
-          <Button
-            type="text"
-            icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
-            onClick={() => setCollapsed(!collapsed)}
-            className="mr-2"
-          />
-          <Breadcrumb />
-          <Flex gap={12} className="ml-auto items-center">
-            <CustomSkin />
-            <ThemeSwitch />
-            <UserAvatar />
-          </Flex>
-        </Layout.Header>
-        <Content />
+        <SiderBar />
+        <Layout>
+          <Layout.Header
+            id="app-header-bar"
+            className="flex items-center sticky top-0 z-[999] pl-0 bg-white dark:bg-[#001529]"
+          >
+            <Button
+              type="text"
+              icon={collapsed ? <MenuUnfoldOutlined /> : <MenuFoldOutlined />}
+              onClick={() => setCollapsed(!collapsed)}
+              className="mr-2"
+            />
+            <Breadcrumb />
+            <Flex gap={12} className="ml-auto items-center">
+              <CustomSkin />
+              <ThemeSwitch />
+              <UserAvatar />
+            </Flex>
+          </Layout.Header>
+          <Content />
+        </Layout>
       </Layout>
-    </Layout>
+    </>
   );
 }

src/pages/landing/index.tsx

@@ -1,4 +1,3 @@
-import { Helmet } from "react-helmet-async";
 import { Button, DatePicker, Flex, Typography } from "antd";
 import { Test1 } from "./components/test-1";
 import { Test2 } from "./components/test-2";
@@ -8,9 +7,6 @@ const { RangePicker } = DatePicker;
 export default function LandingPage() {
   return (
     <>
-      <Helmet>
-        <title>首页 | {import.meta.env.VITE_APP_TITLE}</title>
-      </Helmet>
       <Typography.Title level={4}>首页</Typography.Title>
       <Flex gap={16} wrap>
         <RangePicker />

src/pages/login/index.tsx

@@ -10,7 +10,7 @@ export default function Login() {
   return (
     <>
       <Helmet>
-        <title>登录页 | {import.meta.env.VITE_APP_TITLE}</title>
+        <title>登录页 | {import.meta.env.VITE_APP_TITLE_SUFFIX}</title>
       </Helmet>
       <Layout className="min-h-screen relative">
         <Layout.Content className="flex">

src/pages/nest-menu/index.tsx

@@ -0,0 +1,10 @@
+import { Outlet } from "react-router-dom";
+
+export default function NavLayout() {
+  return (
+    <div className="text-indigo-700">
+      Nav Layout
+      <Outlet />
+    </div>
+  );
+}

src/pages/not-found/index.tsx

@@ -7,7 +7,7 @@ export default function NotFound() {
   return (
     <>
       <Helmet>
-        <title>404 | {import.meta.env.VITE_APP_TITLE}</title>
+        <title>404 | {import.meta.env.VITE_APP_TITLE_SUFFIX}</title>
       </Helmet>
       <Result
         status="404"

src/pages/user-management/index.tsx

@@ -1,4 +1,3 @@
-import { Helmet } from "react-helmet-async";
 import { Table, type TableProps } from "antd";
 import EditButton from "./components/edit-button";
 import { useUserList } from "./api";
@@ -51,12 +50,5 @@ const columns: TableProps<DataType>["columns"] = [
 export default function UserManagement() {
   const { data, isFetching } = useUserList();
 
-  return (
-    <>
-      <Helmet>
-        <title>用户管理 | {import.meta.env.VITE_APP_TITLE}</title>
-      </Helmet>
-      <Table columns={columns} dataSource={data} loading={isFetching} pagination={false} rowKey="id" />
-    </>
-  );
+  return <Table columns={columns} dataSource={data} loading={isFetching} pagination={false} rowKey="id" />;
 }

src/router/index.tsx

@@ -1,7 +1,7 @@
 import { createBrowserRouter, Navigate, type RouteObject } from "react-router-dom";
 import { echartsDemoRoute } from "./modules/echarts-demo";
 import { landingRoute } from "./modules/landing";
-import { navRoute } from "./modules/nav";
+import { nestMenuRoute } from "./modules/nest-menu";
 import { userManagerRoute } from "./modules/user-management";
 
 const routes: RouteObject[] = [
@@ -23,7 +23,7 @@ const routes: RouteObject[] = [
       },
       landingRoute,
       userManagerRoute,
-      navRoute,
+      nestMenuRoute,
       echartsDemoRoute,
     ],
   },

src/router/modules/echarts-demo.tsx

@@ -6,6 +6,7 @@ export const echartsDemoRoute: RouteObject = {
     Component: (await import("@/pages/echarts-demo/layout")).default,
   }),
   handle: {
+    title: "Echarts Demo",
     crumb: () => <Link to="/echarts-demo">Echarts Demo</Link>,
   },
 };

src/router/modules/landing.tsx

@@ -5,4 +5,7 @@ export const landingRoute: RouteObject = {
   lazy: async () => ({
     Component: (await import("@/pages/landing")).default,
   }),
+  handle: {
+    title: "首页",
+  },
 };