feat: 支持路由参数

template/src/App.tsx

@@ -22,7 +22,7 @@ const parseMeta2Routes = (meta: Meta[]) => {
       () => import(`@/pages/${item._fullpath}/${toPascalCase(item._path)}`),
     );
     const route: RouteObject = {
-      path: item._fullpath,
+      path: item._fullroute,
       element: <Element />,
     };
     routes.push(route);

template/src/global.d.ts

@@ -23,6 +23,8 @@ interface Meta {
         order?: number; // 菜单序号，数字越小越靠前
       };
   order?: number; // 菜单序号，数字越小越靠前
+  route?: string; // 当前页面路由名字,支持 ':id' 等路由参数，不同则默认等于目录名
+  _fullroute?: string; // 完整路由,最终路由
   _path: string; // 目录名
   _fullpath?: string; // 完整目录结构
   _children: Meta[];

template/src/pages/demo/Demo.tsx

@@ -1,6 +1,7 @@
 import { useAppDispatch, useAppSelector } from '@/app/hooks';
 import { User } from '@/pages/demo/demoAPI';
 import { fetchUsers, selectDemo } from '@/pages/demo/demoSlice';
+import withPage from '@/utils/withPage';
 import { EditTableColumnsType, Table } from '@df/toco-ui';
 import { useEffect } from 'react';
 
@@ -43,4 +44,4 @@ const Demo = () => {
   );
 };
 
-export default Demo;
+export default withPage(Demo);

template/src/pages/test/Test.js

@@ -1,21 +1,19 @@
 import { useAppSelector } from '@/app/hooks';
+import withPage from '@/utils/withPage';
 import { useEffect } from 'react';
-import { useNavigate } from 'react-router-dom';
 import * as tocoServices from './testAPI';
 
 const Test = (props) => {
   const tocoStore = useAppSelector((state) => state);
-  const navigate = useNavigate();
 
   useEffect(() => {
     // 一些常用变量或方法
-    console.log('navigate', navigate);
     console.log('props', props);
     console.log('store', tocoStore);
     console.log('services', tocoServices);
     console.log('refs', tocoRefs);
     console.log('modals', tocoModals);
-  }, [navigate, props, tocoStore]);
+  }, [props, tocoStore]);
 
   return (
     <div>
@@ -30,4 +28,4 @@ const Test = (props) => {
   );
 };
 
-export default Test;
+export default withPage(Test);

template/src/pages/yyy/xxx/Xxx.js

@@ -0,0 +1,25 @@
+import { useAppSelector } from '@/app/hooks';
+import withPage from '@/utils/withPage';
+import { useEffect } from 'react';
+import * as tocoServices from './xxxAPI';
+
+const Xxx = (props) => {
+  const tocoStore = useAppSelector((state) => state);
+
+  useEffect(() => {
+    // 一些常用变量或方法
+    console.log('props', props);
+    console.log('services', tocoServices);
+    console.log('refs', tocoRefs);
+    console.log('modals', tocoModals);
+    console.log('store', tocoStore);
+  }, [props, tocoStore]);
+
+  return (
+    <div>
+      <h1>xxx</h1>
+    </div>
+  );
+};
+
+export default withPage(Xxx);

template/src/pages/yyy/xxx/meta.json

@@ -0,0 +1,8 @@
+{
+  "displayName": "xxx",
+  "icon": "RobotOutlined",
+  "headMenu": false,
+  "sideMenu": false,
+  "order": 0,
+  "route": "xx/:oo"
+}

template/src/pages/yyy/xxx/xxxAPI.ts

@@ -0,0 +1,26 @@
+import axiosInstance from '@/app/request';
+import { AxiosResponse } from 'axios';
+
+export interface User {
+  name: {
+    first: string;
+    last: string;
+  };
+  phone: string;
+  gender: 'female' | 'male';
+}
+
+export const getUsers = async (): Promise<User[]> => {
+  const response: AxiosResponse<{
+    info: any;
+    results: User[];
+  }> = await axiosInstance.get(
+    `https://randomuser.me/api/?results=8&seed=toco`,
+    {
+      params: {
+        errorHandler: false,
+      },
+    },
+  );
+  return response.data?.results || [];
+};

template/src/utils/withPage.tsx

@@ -0,0 +1,41 @@
+import { useMemo } from 'react';
+import {
+  useLocation,
+  useNavigate,
+  useParams,
+  useSearchParams,
+} from 'react-router-dom';
+
+const withPage = (BaseComponent: React.ComponentType) => {
+  const WithPageComponent = (props: any) => {
+    const navigate = useNavigate();
+    const params = useParams();
+    const location = useLocation();
+    const [searchParamsOri] = useSearchParams();
+    const searchParams = useMemo(() => {
+      const params = {};
+      for (const [key, value] of searchParamsOri.entries()) {
+        params[key] = value;
+      }
+      return params;
+    }, [searchParamsOri]);
+
+    return (
+      <>
+        <BaseComponent
+          {...props}
+          location={location}
+          params={params}
+          search={searchParams}
+          navigate={navigate}
+        />
+      </>
+    );
+  };
+  WithPageComponent.displayName =
+    BaseComponent.displayName ?? 'WithPageComponent';
+
+  return WithPageComponent;
+};
+
+export default withPage;