diff --git a/template/README.md b/template/README.md
index 6a2c10c..096897a 100644
--- a/template/README.md
+++ b/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
diff --git a/template/src/App.tsx b/template/src/App.tsx
index 4a15962..175a8e2 100644
--- a/template/src/App.tsx
+++ b/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);
   });
diff --git a/template/src/Root.tsx b/template/src/Root.tsx
new file mode 100644
index 0000000..945dc89
--- /dev/null
+++ b/template/src/Root.tsx
@@ -0,0 +1,5 @@
+const Root: React.FC<React.HTMLAttributes<HTMLDivElement>> = (props) => {
+  return <div {...props} />;
+};
+
+export default Root;
diff --git a/template/src/app/store.ts b/template/src/app/store.ts
index 3082c59..1bf389b 100644
--- a/template/src/app/store.ts
+++ b/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';
 
diff --git a/template/src/pages/demo/demoAPI.ts b/template/src/pages/demo/api.ts
similarity index 100%
rename from template/src/pages/demo/demoAPI.ts
rename to template/src/pages/demo/api.ts
diff --git a/template/src/pages/demo/Demo.module.css b/template/src/pages/demo/index.module.css
similarity index 100%
rename from template/src/pages/demo/Demo.module.css
rename to template/src/pages/demo/index.module.css
diff --git a/template/src/pages/demo/Demo.tsx b/template/src/pages/demo/index.tsx
similarity index 76%
rename from template/src/pages/demo/Demo.tsx
rename to template/src/pages/demo/index.tsx
index 970ad42..11e24b4 100644
--- a/template/src/pages/demo/Demo.tsx
+++ b/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;
diff --git a/template/src/pages/demo/demoSlice.ts b/template/src/pages/demo/slice.ts
similarity index 77%
rename from template/src/pages/demo/demoSlice.ts
rename to template/src/pages/demo/slice.ts
index f9b43d6..8978d1b 100644
--- a/template/src/pages/demo/demoSlice.ts
+++ b/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;
diff --git a/template/src/pages/test/testAPI.ts b/template/src/pages/test/api.ts
similarity index 100%
rename from template/src/pages/test/testAPI.ts
rename to template/src/pages/test/api.ts
diff --git a/template/src/pages/test/Test.js b/template/src/pages/test/index.js
similarity index 82%
rename from template/src/pages/test/Test.js
rename to template/src/pages/test/index.js
index 25a855a..7a762f3 100644
--- a/template/src/pages/test/Test.js
+++ b/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;
diff --git a/template/src/pages/yyy/xxx/xxxAPI.ts b/template/src/pages/yyy/xxx/api.ts
similarity index 100%
rename from template/src/pages/yyy/xxx/xxxAPI.ts
rename to template/src/pages/yyy/xxx/api.ts
diff --git a/template/src/pages/yyy/xxx/Xxx.js b/template/src/pages/yyy/xxx/index.js
similarity index 77%
rename from template/src/pages/yyy/xxx/Xxx.js
rename to template/src/pages/yyy/xxx/index.js
index 613c2c6..b6c3d30 100644
--- a/template/src/pages/yyy/xxx/Xxx.js
+++ b/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;