feat: 文件命名规则修改

template/README.md

@@ -10,7 +10,7 @@
 
 - dev
 
-    ```shell
+    ```shell[src](src)
     yarn start
     ```
 
@@ -19,7 +19,7 @@
     ```shell
     yarn build
     ```
-  
+
 ## 路由和菜单
 
 本工程采用配置化自动生成路由和菜单方案，在 `pages` 下的单个页面目录中配置 `meta.json` 文件，即可生成路由和菜单，具体配置如下：
@@ -57,8 +57,11 @@ interface Meta {
 在每个页面内，可以使用以下常用方法和全局变量：
 
   ```
-  navigate：页面跳转方法，用法：navigate('/path')
   props：页面 props
+    params：当前页面路由参数
+    search：当前页面搜索参数
+    location：当前页面路由信息
+    navigate：页面跳转方法，用法：navigate('/path')
   tocoStore：全局 store
   tocoServices：页面的请求
   tocoRefs：页面上所有带 id 组件的 refs
@@ -71,6 +74,7 @@ interface Meta {
     ```shell
     src
     ├── App.tsx # 路由逻辑，一般不需要修改
+    ├── Root.tsx # 页面根节点
     ├── app # store 主逻辑
     │   └── store.ts # 如果写了新的 store，需要在这里引入
     ├── components # 组件放这里
@@ -90,10 +94,10 @@ interface Meta {
     │   └── index.tsx # 可以在这里切换布局方案
     ├── pages # 页面放这里
     │   ├── demo # 一个页面一个文件夹
-    │   │   ├── Demo.module.css # 页面样式
-    │   │   ├── Demo.tsx # 页面逻辑
-    │   │   ├── demoAPI.ts # 页面请求
-    │   │   ├── demoSlice.ts # 页面 store
+    │   │   ├── index.module.css # 页面样式
+    │   │   ├── index.tsx # 页面逻辑
+    │   │   ├── api.ts # 页面请求
+    │   │   ├── slice.ts # 页面 store
     │   │   └── meta.json # 页面元数据，用于生成路由和菜单，没有这个文件视为普通组件
     │   └── test
     ├── react-app-env.d.ts

template/src/App.tsx

@@ -1,5 +1,5 @@
 import Layout from '@/layout';
-import { toPascalCase } from '@/utils';
+import withPage from '@/utils/withPage';
 import { lazy } from 'react';
 import {
   createBrowserRouter,
@@ -18,12 +18,11 @@ const parseMeta2Routes = (meta: Meta[]) => {
       routes.push(...parseMeta2Routes(item._children));
       return;
     }
-    const Element = lazy(
-      () => import(`@/pages/${item._fullpath}/${toPascalCase(item._path)}`),
-    );
+    const Element = lazy(() => import(`@/pages/${item._fullpath}`));
+    const PageElement = withPage(Element);
     const route: RouteObject = {
       path: item._fullroute,
-      element: <Element />,
+      element: <PageElement />,
     };
     routes.push(route);
   });

template/src/Root.tsx

@@ -0,0 +1,5 @@
+const Root: React.FC<React.HTMLAttributes<HTMLDivElement>> = (props) => {
+  return <div {...props} />;
+};
+
+export default Root;

template/src/app/store.ts

@@ -1,4 +1,4 @@
-import demoReducer from '@/pages/demo/demoSlice';
+import demoReducer from '@/pages/demo/slice';
 import { Action, configureStore, ThunkAction } from '@reduxjs/toolkit';
 import commonReducer from './common';
 

template/src/pages/demo/index.tsx

@@ -1,7 +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 { User } from '@/pages/demo/api';
+import { fetchUsers, selectDemo } from '@/pages/demo/slice';
+import Root from '@/Root';
 import { EditTableColumnsType, Table } from '@df/toco-ui';
 import { useEffect } from 'react';
 
@@ -40,8 +40,10 @@ const Demo = () => {
   }, [dispatch]);
 
   return (
-    <Table id="demoTable" value={users} columns={columns} editMode="none" />
+    <Root>
+      <Table id="demoTable" value={users} columns={columns} editMode="none" />
+    </Root>
   );
 };
 
-export default withPage(Demo);
+export default Demo;

template/src/pages/demo/slice.ts

@@ -1,5 +1,5 @@
 import { AppThunk, RootState } from '@/app/store';
-import { getUsers, User } from '@/pages/demo/demoAPI';
+import { getUsers, User } from '@/pages/demo/api';
 import { createSlice, PayloadAction } from '@reduxjs/toolkit';
 
 export interface DemoState {
@@ -11,7 +11,7 @@ const initialState: DemoState = {
   users: [],
 };
 
-export const demoSlice = createSlice({
+export const slice = createSlice({
   name: 'demo',
   initialState,
   reducers: {
@@ -21,7 +21,7 @@ export const demoSlice = createSlice({
   },
 });
 
-export const { setUsers } = demoSlice.actions;
+export const { setUsers } = slice.actions;
 
 export const fetchUsers = (): AppThunk => async (dispatch, getState) => {
   const data = await getUsers();
@@ -30,4 +30,4 @@ export const fetchUsers = (): AppThunk => async (dispatch, getState) => {
 
 export const selectDemo = (state: RootState) => state.demo;
 
-export default demoSlice.reducer;
+export default slice.reducer;

template/src/pages/test/index.js

@@ -1,7 +1,7 @@
 import { useAppSelector } from '@/app/hooks';
-import withPage from '@/utils/withPage';
+import Root from '@/Root';
 import { useEffect } from 'react';
-import * as tocoServices from './testAPI';
+import * as tocoServices from './api';
 
 const Test = (props) => {
   const tocoStore = useAppSelector((state) => state);
@@ -16,7 +16,7 @@ const Test = (props) => {
   }, [props, tocoStore]);
 
   return (
-    <div>
+    <Root>
       <h1>Store</h1>
       <p>the primary color is: {tocoStore.common.primaryColor}</p>
       <h1>Service</h1>
@@ -24,8 +24,8 @@ const Test = (props) => {
       <div>
         <p>children page</p>
       </div>
-    </div>
+    </Root>
   );
 };
 
-export default withPage(Test);
+export default Test;

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

@@ -1,7 +1,7 @@
 import { useAppSelector } from '@/app/hooks';
-import withPage from '@/utils/withPage';
+import Root from '@/Root';
 import { useEffect } from 'react';
-import * as tocoServices from './xxxAPI';
+import * as tocoServices from './api';
 
 const Xxx = (props) => {
   const tocoStore = useAppSelector((state) => state);
@@ -16,10 +16,10 @@ const Xxx = (props) => {
   }, [props, tocoStore]);
 
   return (
-    <div>
+    <Root>
       <h1>xxx</h1>
-    </div>
+    </Root>
   );
 };
 
-export default withPage(Xxx);
+export default Xxx;