diff --git a/config/config.ts b/config/config.ts
index 7611109..b5384a6 100644
--- a/config/config.ts
+++ b/config/config.ts
@@ -47,4 +47,5 @@ export default defineConfig({
   },
   // Fast Refresh 热更新
   fastRefresh: {},
+  extraBabelPlugins: ['react-activation/babel'],
 });
diff --git a/config/settings.ts b/config/settings.ts
index d6f31f4..1e5be70 100644
--- a/config/settings.ts
+++ b/config/settings.ts
@@ -10,6 +10,8 @@ export type ProjectSetting = LayoutSettings & {
   defaultLocal: 'zh-CN' | 'en-US';
   // 是否展示水印
   waterMark: boolean;
+  // 是否展示顶部多页签
+  multiTab: boolean;
   storageOptions: {
     // 缓存key 前缀
     namespace: string;
@@ -33,6 +35,7 @@ const Settings: ProjectSetting = {
   historyType: 'hash',
   defaultLocal: 'zh-CN',
   waterMark: true,
+  multiTab: true,
   storageOptions: {
     namespace: 'ballcat/',
     storage: 'local',
diff --git a/package.json b/package.json
index aeed66a..26fbc12 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "moment": "^2.25.3",
     "omit.js": "^2.0.2",
     "react": "^17.0.0",
+    "react-activation": "^0.9.4",
     "react-color": "2.19.3",
     "react-cropper": "2.1.8",
     "react-dev-inspector": "^1.1.1",
diff --git a/src/components/Editor/WangEditor.tsx b/src/components/Editor/WangEditor.tsx
index 2929065..4863054 100644
--- a/src/components/Editor/WangEditor.tsx
+++ b/src/components/Editor/WangEditor.tsx
@@ -24,7 +24,16 @@ export default ({
   );
 
   useEffect(() => {
-    const we = new WangEditor(`#wang-editor-dom`);
+    let we: WangEditor;
+
+    try {
+      we = new WangEditor(`#wang-editor-dom`);
+    } catch (e) {
+      // 组件缓存时. 从有这个组件的页面切换出去会导致这里不停的报错. 找不到 wang-editor-dom Dom.
+      // 这里捕获异常就不管了.  切换回来这个组件会重新渲染
+      return () => {};
+    }
+
     setEditor(we);
     we.config.onchange = (val: string) => update(val);
 
diff --git a/src/components/Form/FullForm.tsx b/src/components/Form/FullForm.tsx
index f3d551f..eab1cce 100644
--- a/src/components/Form/FullForm.tsx
+++ b/src/components/Form/FullForm.tsx
@@ -5,15 +5,9 @@ import ProForm from '@ant-design/pro-form';
 import type { R } from '@/typings';
 import I18n from '@/utils/I18nUtils';
 import type { FullFormProps } from '.';
+import { defautlTitle } from '.';
 import { Button, Card } from 'antd';
 
-export const defautlTitle = {
-  read: I18n.text('form.read'),
-  edit: I18n.text('form.edit'),
-  create: I18n.text('form.create'),
-  del: I18n.text('form.del'),
-};
-
 const FullForm = <E, P = E>(props: FullFormProps<E, P>) => {
   const {
     formRef: currencyRef,
@@ -65,7 +59,7 @@ const FullForm = <E, P = E>(props: FullFormProps<E, P>) => {
     req?: (body: P) => Promise<R<any>>,
   ) => {
     if (req === undefined) {
-      I18n.error({ key: 'orm.error.request', params: { title: defautlTitle[st] } });
+      I18n.error({ key: 'form.error.request', params: { title: defautlTitle[st] } });
       return Promise.resolve(false);
     }
     setLoading(true);
@@ -121,10 +115,10 @@ const FullForm = <E, P = E>(props: FullFormProps<E, P>) => {
             ];
           },
         }}
-        {...antProps}
         layout="horizontal"
         labelCol={labelCol || { sm: { span: 24 }, md: { span: 4 } }}
         wrapperCol={wrapperCol}
+        {...antProps}
         formRef={formRef}
         onFinish={async (values) => {
           switch (status) {
diff --git a/src/components/Form/ModalForm.tsx b/src/components/Form/ModalForm.tsx
index cdcfd35..d595d2f 100644
--- a/src/components/Form/ModalForm.tsx
+++ b/src/components/Form/ModalForm.tsx
@@ -4,13 +4,7 @@ import type { ProFormInstance } from '@ant-design/pro-form';
 import { ModalForm as AntdModalForm } from '@ant-design/pro-form';
 import type { R } from '@/typings';
 import I18n from '@/utils/I18nUtils';
-
-export const defautlTitle = {
-  read: I18n.text('form.read'),
-  edit: I18n.text('form.edit'),
-  create: I18n.text('form.create'),
-  del: I18n.text('form.del'),
-};
+import { defautlTitle } from '.';
 
 const ModalForm = <E, P = E>(props: ModalFormProps<E, P>) => {
   const {
@@ -45,7 +39,7 @@ const ModalForm = <E, P = E>(props: ModalFormProps<E, P>) => {
     req?: (body: P) => Promise<R<any>>,
   ) => {
     if (req === undefined) {
-      I18n.error({ key: 'orm.error.request', params: { title: defautlTitle[st] } });
+      I18n.error({ key: 'form.error.request', params: { title: defautlTitle[st] } });
       return Promise.resolve(false);
     }
 
@@ -95,13 +89,13 @@ const ModalForm = <E, P = E>(props: ModalFormProps<E, P>) => {
 
   return (
     <AntdModalForm<E>
-      {...antProps}
       width={width}
       layout="horizontal"
       labelCol={labelCol || { sm: { span: 24 }, md: { span: 4 } }}
       wrapperCol={wrapperCol}
-      formRef={formRef}
       title={modalTitle}
+      {...antProps}
+      formRef={formRef}
       visible={visible}
       onVisibleChange={setVisible}
       onFinish={async (values) => {
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
index fc05cd0..340dae4 100644
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@@ -4,6 +4,7 @@ import FormDictSelect from './dict/FormDictSelect';
 import FormNumber from './FormNumber';
 import FormGroup from './FormGroup';
 import FormDictCheckbox from './dict/FormDictCheckbox';
+import I18n from '@/utils/I18nUtils';
 
 export * from './typings';
 
@@ -18,4 +19,10 @@ const Form = {
 
 export default Form;
 
-export { ModalForm, FormDictRadio, FormDictSelect, FormNumber };
+const defautlTitle = {
+  read: I18n.text('form.read'),
+  edit: I18n.text('form.edit'),
+  create: I18n.text('form.create'),
+  del: I18n.text('form.del'),
+};
+export { ModalForm, FormDictRadio, FormDictSelect, FormNumber, defautlTitle };
diff --git a/src/components/Inline/index.less b/src/components/Inline/index.less
deleted file mode 100644
index 7d5e079..0000000
--- a/src/components/Inline/index.less
+++ /dev/null
@@ -1,6 +0,0 @@
-.iframe {
-  box-sizing: border-box;
-  width: 100%;
-  height: 100%;
-  border: 0;
-}
diff --git a/src/components/Inline/index.tsx b/src/components/Inline/index.tsx
index ca11b6d..238df09 100644
--- a/src/components/Inline/index.tsx
+++ b/src/components/Inline/index.tsx
@@ -1,5 +1,4 @@
 import { Component } from 'react';
-import './index.less';
 import type { Route } from '@ant-design/pro-layout/lib/typings';
 
 export type InlineMeta = {
@@ -25,7 +24,12 @@ class Inline extends Component<InlineProps, InlineState> {
   render() {
     const { meta } = this.state;
 
-    return <iframe className="iframe" src={meta.uri} />;
+    return (
+      <iframe
+        style={{ boxSizing: 'border-box', height: '100%', width: '100%', border: '0' }}
+        src={meta.uri}
+      />
+    );
   }
 }
 
diff --git a/src/components/Lov/Lov.tsx b/src/components/Lov/Lov.tsx
index e5fba3c..fca3925 100644
--- a/src/components/Lov/Lov.tsx
+++ b/src/components/Lov/Lov.tsx
@@ -16,8 +16,8 @@ for (let i = 0; i < keys.length; i += 1) {
 }
 
 const Lov: React.FC<LovProps> = (props) => {
-  const config = cache[props.keyword];
-  const { value, onChange } = props;
+  const { value, onChange, keyword, overwriteConfig } = props;
+  const config = { ...cache[keyword], ...overwriteConfig };
   const [show, setShow] = useState<boolean>(false);
   const [lovValue, setLovValue] = useState<any>();
   const [modalKey, setModalKey] = useState<number>(1);
diff --git a/src/components/Lov/LovModal.tsx b/src/components/Lov/LovModal.tsx
index 00ecf22..739fcd4 100644
--- a/src/components/Lov/LovModal.tsx
+++ b/src/components/Lov/LovModal.tsx
@@ -108,7 +108,8 @@ function getRet(row: any, config: LovConfig<any>) {
 const LovModal: React.FC<LovModalProps & LovConfig<any> & ModalProps> = (props) => {
   const config: LovConfig<any> = props;
 
-  const { value, setValue, title, show, setShow, modalStyle, modalProperties } = props;
+  const { value, setValue, title, show, setShow, modalStyle, modalProperties, dynamicParams } =
+    props;
 
   const tableRef = useRef<ActionType>();
 
@@ -257,7 +258,7 @@ const LovModal: React.FC<LovModalProps & LovConfig<any> & ModalProps> = (props)
             method: config.method,
             sendMessage: false,
           };
-          option[config.position.toLowerCase()] = { ...p, ...config.fixedParams };
+          option[config.position.toLowerCase()] = { ...p, ...config.fixedParams, ...dynamicParams };
 
           return request<R<PageResult<any>>>(config.url, option);
         }}
diff --git a/src/components/Lov/typing.ts b/src/components/Lov/typing.ts
index bf41b95..25df96a 100644
--- a/src/components/Lov/typing.ts
+++ b/src/components/Lov/typing.ts
@@ -2,6 +2,8 @@ import type React from 'react';
 
 export type LovProps = {
   keyword: string;
+  // 覆写配置
+  overwriteConfig?: Partial<LovConfig<any>>;
 } & LovModalProps;
 
 export type LovConfig<T> = {
@@ -17,7 +19,7 @@ export type LovConfig<T> = {
   method: 'GET' | 'POST' | 'HEAD' | 'PUT' | 'PATCH' | 'DELETE' | 'OPTIONS' | 'TRACE';
   // 参数位置
   position: 'DATA' | 'PARAMS';
-  // 固定请求参数
+  // 固定请求参数, 该参数值会覆盖搜索栏中同名的参数值
   fixedParams?: Record<string, any>;
   // 是否多选
   multiple: boolean;
@@ -72,4 +74,6 @@ export type LovModalProps = {
   value?: any;
   // 参数为新值
   onChange?: (val: any) => void;
+  // 动态参数. 该参数值会覆盖 固定参数以及搜索栏中同名的参数值
+  dynamicParams?: Record<string, any>;
 };
diff --git a/src/components/MultiTab/index.less b/src/components/MultiTab/index.less
new file mode 100644
index 0000000..06a5ee3
--- /dev/null
+++ b/src/components/MultiTab/index.less
@@ -0,0 +1,93 @@
+@import '~antd/es/style/themes/default.less';
+
+@multi-tab-prefix-cls: ballcat-multi-tab;
+
+.@{multi-tab-prefix-cls} {
+  position: relative;
+  z-index: 16;
+  height: 40px;
+  background: #fff;
+  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+
+  &-fixed {
+    top: 48px;
+  }
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav {
+  margin: 0;
+  border-bottom: none;
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab {
+  height: 40px;
+  margin: 0;
+  padding: 0;
+  line-height: 40px;
+  background: none;
+  border: none;
+  border-radius: 0;
+  transition: background 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+    color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab-next,
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab-prev {
+  width: 40px;
+  line-height: 1;
+  opacity: 1;
+  transition: color 0.3s cubic-bezier(0.645, 0.045, 0.355, 1),
+    opacity 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
+  pointer-events: auto;
+
+  .anticon {
+    font-size: 14px;
+  }
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap {
+  height: auto;
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab > div {
+  padding: 0 0 0 16px;
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .ant-tabs-nav .ant-tabs-nav-wrap .ant-tabs-tab-active {
+  background: rgba(24, 144, 255, 0.08);
+}
+
+.@{multi-tab-prefix-cls}
+  .ant-tabs
+  .ant-tabs-nav
+  .ant-tabs-nav-wrap
+  .ant-tabs-tab
+  > div.ant-tabs-tab-unclosable {
+  padding-right: 16px;
+}
+
+.@{multi-tab-prefix-cls}
+  .ant-tabs
+  .ant-tabs-nav
+  .ant-tabs-nav-wrap
+  .ant-tabs-tab
+  .ant-tabs-tab-remove {
+  height: 40px;
+  margin: -4px 0 0 0;
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs .multi-tab-drop {
+  width: 40px;
+  height: 40px;
+  line-height: 40px;
+  text-align: center;
+  cursor: pointer;
+
+  .anticon {
+    font-size: 14px;
+  }
+}
+
+.@{multi-tab-prefix-cls} .ant-tabs-nav-operations .ant-tabs-nav-more {
+  cursor: pointer;
+}
diff --git a/src/components/MultiTab/index.tsx b/src/components/MultiTab/index.tsx
new file mode 100644
index 0000000..6aa254d
--- /dev/null
+++ b/src/components/MultiTab/index.tsx
@@ -0,0 +1,168 @@
+import React, { useCallback } from 'react';
+import { Tabs, Menu, Dropdown } from 'antd';
+import './index.less';
+import I18n from '@/utils/I18nUtils';
+import { history, useModel } from 'umi';
+import { useAliveController } from 'react-activation';
+import RouteUtils from '@/utils/RouteUtils';
+
+const { TabPane } = Tabs;
+
+const MultiTab = () => {
+  const { getCachingNodes, dropScope } = useAliveController();
+
+  const { initialState } = useModel('@@initialState');
+
+  const nodes = getCachingNodes();
+
+  const cacheActiveKey = history.location.pathname;
+
+  // 关闭指定 key
+  const close = useCallback(
+    (...closeArray: string[]) => {
+      if (!closeArray || closeArray.length === 0) {
+        I18n.warning('没有可以被关闭的标签页!');
+        return;
+      }
+      if (nodes.length === 1) {
+        I18n.warning('禁止关闭最后一个标签页!');
+        return;
+      }
+
+      // 是否需要跳转地址
+      let isRedirect = false;
+      // const surviveNode: CachingNode[] = []
+      const surviveNode: string[] = [];
+
+      for (let index = 0; index < nodes.length; index += 1) {
+        const nodeKey = nodes[index].name as string;
+
+        // 该节点不需要销毁
+        if (closeArray.indexOf(nodeKey) === -1) {
+          surviveNode.push(nodeKey);
+        }
+        // 销毁节点为当前展示节点
+        else if (nodeKey === cacheActiveKey) {
+          isRedirect = true;
+        }
+      }
+
+      // 需要跳转且存活节点数量大于0
+      if (isRedirect) {
+        // 跳转到存活节点的第一个
+        RouteUtils.goto(surviveNode.length > 0 ? surviveNode[0] : '/');
+      }
+
+      // 依次销毁
+      closeArray.forEach((closeKey) => {
+        dropScope(closeKey);
+      });
+    },
+    [cacheActiveKey, dropScope, nodes],
+  );
+
+  // 关闭指定key 左侧的所有key
+  const closeLeft = useCallback(
+    (key: string) => {
+      const closeKeys: string[] = [];
+
+      for (let index = 0; index < nodes.length; index += 1) {
+        const nodeKey = nodes[index].name as string;
+        if (nodeKey === key) {
+          break;
+        }
+
+        closeKeys.push(nodeKey);
+      }
+      close(...closeKeys);
+    },
+    [close, nodes],
+  );
+
+  // 关闭指定key 右侧的所有key
+  const closeRight = useCallback(
+    (key: string) => {
+      const closeKeys: string[] = [];
+
+      for (let index = nodes.length - 1; index > -1; index -= 1) {
+        const nodeKey = nodes[index].name as string;
+        if (nodeKey === key) {
+          break;
+        }
+
+        closeKeys.push(nodeKey);
+      }
+      close(...closeKeys);
+    },
+    [close, nodes],
+  );
+
+  // 关闭指定key 除外的其他key
+  const closeOther = useCallback(
+    (key: string) => {
+      const closeKeys: string[] = [];
+
+      nodes.forEach(({ name }) => {
+        if (name !== key) {
+          closeKeys.push(name as string);
+        }
+      });
+
+      close(...closeKeys);
+    },
+    [close, nodes],
+  );
+
+  const overlay = (
+    <Menu key="MultiTabDropdown" onContextMenu={(e) => e.preventDefault()}>
+      <Menu.Item key="MultiTabDropdown-close" onClick={() => close(cacheActiveKey)}>
+        关闭标签
+      </Menu.Item>
+      <Menu.Item key="MultiTabDropdown-close-left" onClick={() => closeLeft(cacheActiveKey)}>
+        关闭左侧标签
+      </Menu.Item>
+      <Menu.Item key="MultiTabDropdown-close-right" onClick={() => closeRight(cacheActiveKey)}>
+        关闭右侧标签
+      </Menu.Item>
+      <Menu.Item key="MultiTabDropdown-close-other" onClick={() => closeOther(cacheActiveKey)}>
+        关闭其他标签
+      </Menu.Item>
+    </Menu>
+  );
+
+  return (
+    <Dropdown overlay={overlay} trigger={['contextMenu']}>
+      <div
+        className="ballcat-multi-tab"
+        style={{
+          userSelect: 'none',
+          marginLeft: initialState?.settings?.layout === 'mix' ? '208px' : undefined,
+        }}
+      >
+        <Tabs
+          hideAdd
+          type="editable-card"
+          activeKey={cacheActiveKey}
+          onChange={(key) => {
+            // 不是当前激活的tab
+            if (cacheActiveKey !== key) {
+              RouteUtils.goto(key);
+            }
+          }}
+          onEdit={(key, action) => {
+            if (action === 'remove' && typeof key === 'string') {
+              close(key);
+            }
+          }}
+        >
+          {nodes.map((node) => {
+            const nodeMenu = RouteUtils.getMenuDict()[node.name as string];
+            return <TabPane key={node.name} tabKey={node.id} tab={nodeMenu.name} />;
+          })}
+        </Tabs>
+      </div>
+    </Dropdown>
+  );
+};
+
+export default MultiTab;
diff --git a/src/components/Page/BasePage.tsx b/src/components/Page/BasePage.tsx
new file mode 100644
index 0000000..175d34f
--- /dev/null
+++ b/src/components/Page/BasePage.tsx
@@ -0,0 +1,178 @@
+import React, { useState, useEffect, useRef } from 'react';
+import Table from '@/components/Table';
+import type { ActionType, ProColumns } from '@ant-design/pro-table';
+import type { BasePageProps } from '.';
+import Auth from '../Auth';
+import { defautlTitle } from '../Form';
+import I18n from '@/utils/I18nUtils';
+
+const BasePage = <T, U, E, ValueType = 'text'>({
+  title,
+  rowKey,
+  query,
+  columns,
+  toolBarActions,
+  children,
+  operateBar,
+  operteBarProps,
+  del,
+  formData = (data) => data as unknown as E,
+  tableProps,
+  tableRef: pTableRef,
+  formRef,
+  perStatusChange = () => undefined,
+}: BasePageProps<T, U, E, ValueType>) => {
+  let tableRef = useRef<ActionType>();
+
+  if (pTableRef) {
+    tableRef = pTableRef;
+  }
+
+  const [toolBarActionsList, setToolBarActionsList] = useState<React.ReactNode[]>([]);
+  const [tableColumns, setTableColumns] = useState<ProColumns<T, ValueType>[]>([]);
+
+  // 表格上方工具栏更新
+  useEffect(() => {
+    const list: React.ReactNode[] = [];
+    if (toolBarActions && toolBarActions.length > 0) {
+      toolBarActions.forEach((tb) => {
+        if (!React.isValidElement(tb)) {
+          list.push(
+            <Auth.Button
+              domKey="page-tool-bar-action-create"
+              type="primary"
+              icon="plus"
+              // @ts-ignore
+              permission={tb.permission}
+              text={defautlTitle.create}
+              onClick={() => {
+                if (perStatusChange('create') === false) {
+                  return;
+                }
+                formRef.current?.create();
+              }}
+            />,
+          );
+        } else {
+          list.push(tb);
+        }
+      });
+    }
+    setToolBarActionsList(list);
+  }, [toolBarActions]);
+
+  // 表格列更新
+  useEffect(() => {
+    const newColumns = columns ? [...columns] : [];
+
+    if (operateBar && operateBar.length > 0) {
+      newColumns.push({
+        title: I18n.text('form.operate'),
+        width: 160,
+        fixed: 'right',
+        ...operteBarProps,
+        hideInSearch: true,
+        render: (dom, record) => {
+          const nodes: React.ReactNode[] = [];
+
+          operateBar.forEach((ob) => {
+            if (typeof ob === 'function') {
+              nodes.push(ob(dom, record));
+              return;
+            }
+
+            let obProps;
+
+            if (typeof ob.props === 'function') {
+              obProps = ob.props(record);
+            } else {
+              obProps = ob.props;
+            }
+
+            if (ob.type === 'read') {
+              nodes.push(
+                <Auth.A
+                  key={`page-auth-read-${record[rowKey]}`}
+                  domKey={`page-auth-read-${record[rowKey]}`}
+                  text={defautlTitle.read}
+                  {...obProps}
+                  permission={ob.permission}
+                  onClick={() => {
+                    if (perStatusChange('read') === false) {
+                      return;
+                    }
+                    formRef.current?.read(formData(record));
+                  }}
+                />,
+              );
+            } else if (ob.type === 'edit') {
+              nodes.push(
+                <Auth.A
+                  key={`page-auth-edit-${record[rowKey]}`}
+                  domKey={`page-auth-edit-${record[rowKey]}`}
+                  text={defautlTitle.edit}
+                  {...obProps}
+                  permission={ob.permission}
+                  onClick={() => {
+                    if (perStatusChange('edit') === false) {
+                      return;
+                    }
+                    formRef.current?.edit(formData(record));
+                  }}
+                />,
+              );
+            } else {
+              nodes.push(
+                <Auth.A
+                  key={`page-auth-del-${record[rowKey]}`}
+                  domKey={`page-auth-del-${record[rowKey]}`}
+                  text={defautlTitle.del}
+                  confirmTitle={I18n.text('form.del.config')}
+                  {...obProps}
+                  style={{ color: '#ff4d4f', ...obProps?.style }}
+                  permission={ob.permission}
+                  onClick={() => {
+                    if (del === undefined) {
+                      I18n.error({
+                        key: 'form.error.request',
+                        params: { title: defautlTitle.del },
+                      });
+                      return;
+                    }
+                    del(record).then(() => {
+                      tableRef.current?.reload();
+                      I18n.success('global.operation.success');
+                    });
+                  }}
+                />,
+              );
+            }
+          });
+
+          return <Auth.Group key={`page-auth-group-${record[rowKey]}`}>{nodes}</Auth.Group>;
+        },
+      });
+    }
+
+    setTableColumns(newColumns);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [columns, operateBar]);
+
+  return (
+    <>
+      <Table<T, U, ValueType>
+        {...tableProps}
+        rowKey={rowKey}
+        columns={tableColumns}
+        request={query}
+        headerTitle={title}
+        actionRef={tableRef}
+        toolbar={{ ...tableProps?.toolbar, actions: toolBarActionsList }}
+      />
+
+      {children}
+    </>
+  );
+};
+
+export default BasePage;
diff --git a/src/components/Page/FullPage.tsx b/src/components/Page/FullPage.tsx
index 0173991..c3c9862 100644
--- a/src/components/Page/FullPage.tsx
+++ b/src/components/Page/FullPage.tsx
@@ -1,11 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
-import Table from '@/components/Table';
-import type { ActionType, ProColumns } from '@ant-design/pro-table';
+import React, { useState, useRef } from 'react';
+import type { ActionType } from '@ant-design/pro-table';
 import type { FormStatus, FullFormRef } from '@/components/Form';
 import I18n from '@/utils/I18nUtils';
-import utils from './utils';
 import FullForm from '../Form/FullForm';
 import type { FullPageProps } from '.';
+import BasePage from './BasePage';
 
 const ModalPage = <T, U, E, P = E, ValueType = 'text'>({
   title,
@@ -43,40 +42,8 @@ const ModalPage = <T, U, E, P = E, ValueType = 'text'>({
     tableRef = pTableRef;
   }
 
-  const [toolBarActionsList, setToolBarActionsList] = useState<React.ReactNode[]>([]);
-  const [tableColumns, setTableColumns] = useState<ProColumns<T, ValueType>[]>([]);
   const [tableStyle, setTableStyle] = useState<React.CSSProperties>({});
 
-  // 表格上方工具栏更新
-  useEffect(() => {
-    setToolBarActionsList(
-      utils.generateToolBarActionsList(perStatusChange, formRef, toolBarActions),
-    );
-  }, [toolBarActions]);
-
-  // 表格列更新
-  useEffect(() => {
-    const newColumns = columns ? [...columns] : [];
-
-    if (operateBar && operateBar.length > 0) {
-      newColumns.push(
-        utils.generateOperateBar(
-          operateBar,
-          rowKey,
-          perStatusChange,
-          formData,
-          formRef,
-          tableRef,
-          del,
-          operteBarProps,
-        ),
-      );
-    }
-
-    setTableColumns(newColumns);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columns, operateBar]);
-
   const formStatusChange = (status: FormStatus) => {
     if (status) {
       // 表单状态不为空
@@ -91,33 +58,38 @@ const ModalPage = <T, U, E, P = E, ValueType = 'text'>({
 
   return (
     <>
-      <Table<T, U, ValueType>
-        {...tableProps}
-        style={tableStyle}
+      <BasePage<T, U, E, ValueType>
         rowKey={rowKey}
-        columns={tableColumns}
-        request={query}
-        headerTitle={title}
-        actionRef={tableRef}
-        toolbar={{ ...tableProps?.toolbar, actions: toolBarActionsList }}
-      />
-
-      <FullForm<E, P>
-        {...formProps}
+        columns={columns}
+        query={query}
+        title={title}
+        toolBarActions={toolBarActions}
+        operateBar={operateBar}
+        operteBarProps={operteBarProps}
+        perStatusChange={perStatusChange}
+        formData={formData}
+        del={del}
+        tableProps={{ ...tableProps, style: tableStyle }}
+        tableRef={tableRef}
         formRef={formRef}
-        onStatusChange={formStatusChange}
-        handlerData={handlerData}
-        create={create}
-        edit={edit}
-        onFinish={(st, body) => {
-          tableRef.current?.reload();
-          onFinish(st, body);
-          I18n.success('global.operation.success');
-        }}
-        onError={onError}
       >
-        {children}
-      </FullForm>
+        <FullForm<E, P>
+          {...formProps}
+          formRef={formRef}
+          onStatusChange={formStatusChange}
+          handlerData={handlerData}
+          create={create}
+          edit={edit}
+          onFinish={(st, body) => {
+            tableRef.current?.reload();
+            onFinish(st, body);
+            I18n.success('global.operation.success');
+          }}
+          onError={onError}
+        >
+          {children}
+        </FullForm>
+      </BasePage>
     </>
   );
 };
diff --git a/src/components/Page/ModalPage.tsx b/src/components/Page/ModalPage.tsx
index 46a638d..c75348b 100644
--- a/src/components/Page/ModalPage.tsx
+++ b/src/components/Page/ModalPage.tsx
@@ -1,11 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
-import Table from '@/components/Table';
-import type { ActionType, ProColumns } from '@ant-design/pro-table';
+import { useRef } from 'react';
+import type { ActionType } from '@ant-design/pro-table';
 import type { ModalFormRef } from '@/components/Form';
 import ModalForm from '@/components/Form/ModalForm';
 import type { ModalPageProps } from './typings';
 import I18n from '@/utils/I18nUtils';
-import utils from './utils';
+import BasePage from './BasePage';
 
 const ModalPage = <T, U, E, P = E, ValueType = 'text'>({
   title,
@@ -17,6 +16,7 @@ const ModalPage = <T, U, E, P = E, ValueType = 'text'>({
   create,
   edit,
   onFinish = () => {},
+  onError = () => {},
   children,
   operateBar,
   operteBarProps,
@@ -42,66 +42,40 @@ const ModalPage = <T, U, E, P = E, ValueType = 'text'>({
     tableRef = pTableRef;
   }
 
-  const [toolBarActionsList, setToolBarActionsList] = useState<React.ReactNode[]>([]);
-  const [tableColumns, setTableColumns] = useState<ProColumns<T, ValueType>[]>([]);
-
-  // 表格上方工具栏更新
-  useEffect(() => {
-    setToolBarActionsList(
-      utils.generateToolBarActionsList(perStatusChange, formRef, toolBarActions),
-    );
-  }, [toolBarActions]);
-
-  // 表格列更新
-  useEffect(() => {
-    const newColumns = columns ? [...columns] : [];
-
-    if (operateBar && operateBar.length > 0) {
-      newColumns.push(
-        utils.generateOperateBar(
-          operateBar,
-          rowKey,
-          perStatusChange,
-          formData,
-          formRef,
-          tableRef,
-          del,
-          operteBarProps,
-        ),
-      );
-    }
-
-    setTableColumns(newColumns);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [columns, operateBar]);
-
   return (
     <>
-      <Table<T, U, ValueType>
-        {...tableProps}
+      <BasePage<T, U, E, ValueType>
         rowKey={rowKey}
-        columns={tableColumns}
-        request={query}
-        headerTitle={title}
-        actionRef={tableRef}
-        toolbar={{ ...tableProps?.toolbar, actions: toolBarActionsList }}
-      />
-
-      <ModalForm<E, P>
-        {...formProps}
+        columns={columns}
+        query={query}
+        title={title}
+        toolBarActions={toolBarActions}
+        operateBar={operateBar}
+        operteBarProps={operteBarProps}
+        perStatusChange={perStatusChange}
+        formData={formData}
+        del={del}
+        tableProps={{ ...tableProps }}
+        tableRef={tableRef}
         formRef={formRef}
-        onStatusChange={onStatusChange}
-        handlerData={handlerData}
-        create={create}
-        edit={edit}
-        onFinish={(st, body) => {
-          tableRef.current?.reload();
-          onFinish(st, body);
-          I18n.success('global.operation.success');
-        }}
       >
-        {children}
-      </ModalForm>
+        <ModalForm<E, P>
+          {...formProps}
+          formRef={formRef}
+          onStatusChange={onStatusChange}
+          handlerData={handlerData}
+          create={create}
+          edit={edit}
+          onFinish={(st, body) => {
+            tableRef.current?.reload();
+            onFinish(st, body);
+            I18n.success('global.operation.success');
+          }}
+          onError={onError}
+        >
+          {children}
+        </ModalForm>
+      </BasePage>
     </>
   );
 };
diff --git a/src/components/Page/typings.ts b/src/components/Page/typings.ts
index f4451e1..4df2dd3 100644
--- a/src/components/Page/typings.ts
+++ b/src/components/Page/typings.ts
@@ -1,7 +1,7 @@
 import type { PageResult, QueryParam, R } from '@/typings';
 import type React from 'react';
 import type { ActionType, ProColumns } from '@ant-design/pro-table';
-import type { FormStatus, FullFormProps, FullFormRef, ModalFormRef } from '../Form';
+import type { FormRef, FormStatus, FullFormProps, FullFormRef, ModalFormRef } from '../Form';
 import type { AuthNoneOptionalProps } from '../Auth';
 import type { TableProps } from '../Table/typings';
 import type { ModalFormProps } from '@/components/Form';
@@ -19,25 +19,11 @@ export type PageOperateBar<T> =
   | PageOperateBarPreset<T>
   | ((dom: React.ReactNode, data: T) => JSX.Element);
 
-// t : 表格字典
-// u : 表格请求字段
-// e : 表单字段
-// p : 表单请求字段
-export type PageProps<T, U, E, P = E, ValueType = 'text'> = {
+export type BasePageProps<T, U, E, ValueType = 'text'> = {
   rowKey: string;
   columns: ProColumns<T, ValueType>[];
   query: (params: QueryParam<U>) => Promise<R<PageResult<T>>>;
   title?: string;
-  // 创建请求
-  create?: (body: P) => Promise<R<any>>;
-  // 编辑请求
-  edit?: (body: P) => Promise<R<any>>;
-  // 删除请求
-  del?: (body: T) => Promise<R<any>>;
-  // 表单回填数据: 查询返回的数据 转为 表单展示的数据
-  formData?: (data: T) => E;
-  // 请求数据处理, 处理后的数据用来发起 创建, 编辑, 删除请求
-  handlerData?: (body: E, status: FormStatus) => P;
   // 表格上方工具栏
   toolBarActions?: PageToolBarActions[];
   // 表格右侧操作列
@@ -49,17 +35,36 @@ export type PageProps<T, U, E, P = E, ValueType = 'text'> = {
    *  变更为新增时, record 为 undefined
    */
   perStatusChange?: (st: FormStatus, record?: T) => boolean | void;
+  // 表单回填数据: 查询返回的数据 转为 表单展示的数据
+  formData?: (data: T) => E;
+  // 删除请求
+  del?: (body: T) => Promise<R<any>>;
+  children?: React.ReactNode | React.ReactNode[];
+  // rowKey columns 等 无法配置
+  tableProps?: TableProps<T, U, ValueType>;
+  tableRef?: React.MutableRefObject<ActionType | undefined>;
+  formRef: React.MutableRefObject<FormRef<E> | undefined>;
+};
+
+// t : 表格字典
+// u : 表格请求字段
+// e : 表单字段
+// p : 表单请求字段
+export type PageProps<T, U, E, P = E, ValueType = 'text'> = {
+  // 创建请求
+  create?: (body: P) => Promise<R<any>>;
+  // 编辑请求
+  edit?: (body: P) => Promise<R<any>>;
+  // 请求数据处理, 处理后的数据用来发起 创建, 编辑, 删除请求
+  handlerData?: (body: E, status: FormStatus) => P;
   // 状态变更时执行
   onStatusChange?: (st: FormStatus) => void;
   // 创建, 编辑 请求完成后执行
   onFinish?: (status: FormStatus, body: P) => void;
   // 创建, 编辑 请求出错成后执行
   onError?: (e: any) => void;
-  children?: React.ReactNode | React.ReactNode[];
-  // rowKey columns 等 无法配置
-  tableProps?: TableProps<T, U, ValueType>;
-  tableRef?: React.MutableRefObject<ActionType | undefined>;
-};
+  formRef?: React.MutableRefObject<FormRef<E> | undefined>;
+} & Omit<BasePageProps<T, U, E, ValueType>, 'formRef'>;
 
 export type ModalPageProps<T, U, E, P = E, ValueType = 'text'> = {
   // 部分无法配置
diff --git a/src/components/Page/utils.tsx b/src/components/Page/utils.tsx
deleted file mode 100644
index 4f957dd..0000000
--- a/src/components/Page/utils.tsx
+++ /dev/null
@@ -1,141 +0,0 @@
-import type { PageOperateBar, PageToolBarActions } from '.';
-import React from 'react';
-import type { ActionType, ProColumns } from '@ant-design/pro-table';
-import type { FormStatus, ModalFormRef } from '@/components/Form';
-import Auth from '@/components/Auth';
-import I18n from '@/utils/I18nUtils';
-import { defautlTitle } from '@/components/Form/ModalForm';
-import type { R } from '@/typings';
-
-type PSC<T> = (st: FormStatus, record?: T) => boolean | void;
-
-export default {
-  generateToolBarActionsList<T, E>(
-    perStatusChange: PSC<T>,
-    formRef: React.MutableRefObject<ModalFormRef<E> | undefined>,
-    actions?: PageToolBarActions[],
-  ) {
-    if (actions && actions.length > 0) {
-      const tbList: React.ReactNode[] = [];
-      actions.forEach((tb) => {
-        if (!React.isValidElement(tb)) {
-          tbList.push(
-            <Auth.Button
-              domKey="page-tool-bar-action-create"
-              type="primary"
-              icon="plus"
-              // @ts-ignore
-              permission={tb.permission}
-              text={defautlTitle.create}
-              onClick={() => {
-                if (perStatusChange('create') === false) {
-                  return;
-                }
-                formRef.current?.create();
-              }}
-            />,
-          );
-        } else {
-          tbList.push(tb);
-        }
-      });
-      return tbList;
-    }
-
-    return [];
-  },
-  generateOperateBar<T, E, ValueType>(
-    operateBar: PageOperateBar<T>[],
-    rowKey: string,
-    perStatusChange: PSC<T>,
-    formData: (data: T) => E,
-    formRef: React.MutableRefObject<ModalFormRef<E> | undefined>,
-    tableRef: React.MutableRefObject<ActionType | undefined>,
-    del?: (body: T) => Promise<R<any>>,
-    operteBarProps?: { title?: string; width?: number; fixed?: 'left' | 'right' | boolean },
-  ): ProColumns<T, ValueType> {
-    return {
-      title: I18n.text('form.operate'),
-      width: 160,
-      fixed: 'right',
-      ...operteBarProps,
-      hideInSearch: true,
-      render: (dom, record) => {
-        const nodes: React.ReactNode[] = [];
-
-        operateBar.forEach((ob) => {
-          if (typeof ob === 'function') {
-            nodes.push(ob(dom, record));
-            return;
-          }
-
-          let obProps;
-
-          if (typeof ob.props === 'function') {
-            obProps = ob.props(record);
-          } else {
-            obProps = ob.props;
-          }
-
-          if (ob.type === 'read') {
-            nodes.push(
-              <Auth.A
-                key={`page-auth-read-${record[rowKey]}`}
-                domKey={`page-auth-read-${record[rowKey]}`}
-                text={defautlTitle.read}
-                {...obProps}
-                permission={ob.permission}
-                onClick={() => {
-                  if (perStatusChange('read') === false) {
-                    return;
-                  }
-                  formRef.current?.read(formData(record));
-                }}
-              />,
-            );
-          } else if (ob.type === 'edit') {
-            nodes.push(
-              <Auth.A
-                key={`page-auth-edit-${record[rowKey]}`}
-                domKey={`page-auth-edit-${record[rowKey]}`}
-                text={defautlTitle.edit}
-                {...obProps}
-                permission={ob.permission}
-                onClick={() => {
-                  if (perStatusChange('edit') === false) {
-                    return;
-                  }
-                  formRef.current?.edit(formData(record));
-                }}
-              />,
-            );
-          } else {
-            nodes.push(
-              <Auth.A
-                key={`page-auth-del-${record[rowKey]}`}
-                domKey={`page-auth-del-${record[rowKey]}`}
-                text={defautlTitle.del}
-                confirmTitle={I18n.text('form.del.config')}
-                {...obProps}
-                style={{ color: '#ff4d4f', ...obProps?.style }}
-                permission={ob.permission}
-                onClick={() => {
-                  if (del === undefined) {
-                    I18n.error({ key: 'orm.error.request', params: { title: defautlTitle.del } });
-                    return;
-                  }
-                  del(record).then(() => {
-                    tableRef.current?.reload();
-                    I18n.success('global.operation.success');
-                  });
-                }}
-              />,
-            );
-          }
-        });
-
-        return <Auth.Group key={`page-auth-group-${record[rowKey]}`}>{nodes}</Auth.Group>;
-      },
-    };
-  },
-};
diff --git a/src/components/SettingDrawer/index.tsx b/src/components/SettingDrawer/index.tsx
index 70593f9..a110a42 100644
--- a/src/components/SettingDrawer/index.tsx
+++ b/src/components/SettingDrawer/index.tsx
@@ -141,12 +141,10 @@ const SettingDrawer: React.FC<SettingDrawerProps> = (props) => {
     if (key === 'layout') {
       nextState.contentWidth = value === 'top' ? 'Fixed' : 'Fluid';
     }
-    if (key === 'layout' && value !== 'mix') {
-      nextState.splitMenus = false;
-    }
-    if (key === 'layout' && value === 'mix') {
-      nextState.navTheme = 'light';
+    if (key === 'layout') {
+      nextState.splitMenus = value === 'mix';
     }
+
     if (key === 'colorWeak' && value === true) {
       const dom = document.querySelector('body');
       if (dom) {
diff --git a/src/global.less b/src/global.less
index 33d0102..57f260b 100644
--- a/src/global.less
+++ b/src/global.less
@@ -74,3 +74,11 @@ ol {
   -moz-user-select: none;
   user-select: none;
 }
+
+.ka-wrapper {
+  height: 100%;
+
+  .ka-content {
+    height: 100%;
+  }
+}
diff --git a/src/layouts/BasicLayout.tsx b/src/layouts/BasicLayout.tsx
index 3a30046..bf92297 100644
--- a/src/layouts/BasicLayout.tsx
+++ b/src/layouts/BasicLayout.tsx
@@ -4,23 +4,26 @@ import type {
   Settings,
 } from '@ant-design/pro-layout';
 import ProLayout, { WaterMark } from '@ant-design/pro-layout';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useState, useReducer } from 'react';
 import RightContent from '@/components/RightContent';
 import { history, Link, useIntl, useModel } from 'umi';
-import LoadingComponent from '@ant-design/pro-layout/es/PageLoading';
 import HeaderContent from '@/components/HeaderContent';
 import { settings } from '@/utils/ConfigUtils';
 import { Breadcrumb } from 'antd';
 import Footer from '@/components/Footer';
-import { redirect, goto } from '@/utils/RouteUtils';
+import RouteUtils, { redirect, goto } from '@/utils/RouteUtils';
 import { User, Token } from '@/utils/Ballcat';
 import I18n from '@/utils/I18nUtils';
 import Icon from '@/components/Icon';
+import { AliveScope } from 'react-activation';
+import MultiTab from '@/components/MultiTab';
+import { KeepAlive as ReactKeepAlive } from 'react-activation';
 
 export type BasicLayoutProps = {
   breadcrumbNameMap: Record<string, MenuDataItem>;
   route: ProLayoutProps['route'] & {
     authority: string[];
+    routes: any[];
   };
   settings: Settings;
 } & ProLayoutProps;
@@ -95,10 +98,31 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
     },
   } = props;
 
+  const keepAliveProps = { id: undefined, name: undefined };
+  const [breadcrumbList, setBreadcrumbList] = useState<any[]>([]);
   const [collapsed, setCollapsed] = useState(false);
   const [reload, setReload] = useState(false);
   I18n.setIntl(useIntl());
   const { initialState, setInitialState } = useModel('@@initialState');
+  const [keepAlivePropsState, keepAlivePropsDispatch] = useReducer(
+    (_state: any, newVal: any) => newVal,
+    keepAliveProps,
+  );
+
+  useEffect(() => {
+    if (location.pathname) {
+      const list = breadcrumbRender(location.pathname, route.routes);
+      setBreadcrumbList(list);
+      if (list.length > 0) {
+        const currenMenu = RouteUtils.getMenuDict()[location.pathname];
+        const newKeepAliveProps = {
+          id: currenMenu.id,
+          name: currenMenu.path,
+        };
+        keepAlivePropsDispatch(newKeepAliveProps);
+      }
+    }
+  }, [keepAlivePropsDispatch, location.pathname, route, route.routes]);
 
   useEffect(() => {
     if (!route.children) {
@@ -156,11 +180,23 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
       collapsedButtonRender={false}
       collapsed={collapsed}
       onCollapse={setCollapsed}
+      contentStyle={{ marginTop: settings.multiTab ? '56px' : undefined }}
+      headerRender={(headerProps, defaultDom) => {
+        if (settings.multiTab) {
+          return (
+            <>
+              {defaultDom}
+              <MultiTab />
+            </>
+          );
+        }
+        return defaultDom;
+      }}
       headerContentRender={() => {
         return (
           <HeaderContent
             // @ts-ignore
-            breadcrumbData={breadcrumbRender(location.pathname, route.routes)}
+            breadcrumbData={breadcrumbList}
             collapsed={collapsed}
             onCollapse={setCollapsed}
             onReload={setReload}
@@ -182,7 +218,6 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
       }}
       menuItemRender={(menuItemProps) => {
         const { redirectPath, title, icon } = menuItemProps.meta;
-
         if (!menuItemProps.path || location.pathname === menuItemProps.path) {
           return renderMenuItem(collapsed, title, false, icon);
         }
@@ -203,16 +238,18 @@ const BasicLayout: React.FC<BasicLayoutProps> = (props) => {
       }}
       rightContentRender={() => <RightContent />}
     >
-      {reload ? (
-        <LoadingComponent />
-      ) : (
+      <AliveScope>
         <WaterMark
-          content={settings.waterMark ? initialState?.user?.info?.nickname : undefined}
+          content={settings.waterMark && !reload ? initialState?.user?.info?.nickname : undefined}
           style={{ height: '100%' }}
         >
-          {children}
+          {initialState?.routerLoad ? (
+            <ReactKeepAlive id={keepAlivePropsState.id} name={keepAlivePropsState.name}>
+              {children}
+            </ReactKeepAlive>
+          ) : undefined}
         </WaterMark>
-      )}
+      </AliveScope>
     </ProLayout>
   );
 };
diff --git a/src/pages/exception/error.tsx b/src/pages/exception/error.tsx
index de9554f..92b4290 100644
--- a/src/pages/exception/error.tsx
+++ b/src/pages/exception/error.tsx
@@ -2,11 +2,11 @@ import { Button, Result } from 'antd';
 import React from 'react';
 import { history } from 'umi';
 
-const Error: React.FC = () => (
+const ErrorPage: React.FC = () => (
   <Result
     status="error"
-    title="页面配置异常"
-    subTitle="抱歉，您访问的页面配置异常, 请联系管理员!"
+    title="页面加载异常"
+    subTitle="抱歉，您访问的页面加载异常, 请联系管理员!"
     extra={
       <Button
         type="primary"
@@ -20,4 +20,4 @@ const Error: React.FC = () => (
   />
 );
 
-export default Error;
+export default ErrorPage;
diff --git a/src/pages/exception/index.tsx b/src/pages/exception/index.tsx
index fae00a8..558d051 100644
--- a/src/pages/exception/index.tsx
+++ b/src/pages/exception/index.tsx
@@ -1,4 +1,4 @@
 import NoFoundPage from './404';
-import Error from './error';
+import ErrorPage from './error';
 
-export { NoFoundPage, Error };
+export { NoFoundPage, ErrorPage };
diff --git a/src/pages/sample/document/DocumentPage.tsx b/src/pages/sample/document/DocumentPage.tsx
new file mode 100644
index 0000000..4512c02
--- /dev/null
+++ b/src/pages/sample/document/DocumentPage.tsx
@@ -0,0 +1,75 @@
+import Page from '@/components/Page';
+import { document } from '@/services/ballcat/sample';
+import type { DocumentQo, DocumentVo, Document } from '@/services/ballcat/sample';
+import type { ProColumns } from '@ant-design/pro-table';
+import { ProFormText } from '@ant-design/pro-form';
+import Lov from '@/components/Lov';
+import { Form } from 'antd';
+
+const dataColumns: ProColumns<DocumentVo>[] = [
+  {
+    title: 'ID',
+    dataIndex: 'id',
+  },
+  {
+    title: '文档名称',
+    dataIndex: 'name',
+    hideInSearch: true,
+  },
+  {
+    title: '所属用户ID',
+    dataIndex: 'userId',
+    hideInSearch: true,
+  },
+  {
+    title: '所属用户',
+    dataIndex: 'username',
+    hideInSearch: true,
+  },
+  {
+    title: '所属组织ID',
+    dataIndex: 'organizationId',
+    hideInSearch: true,
+  },
+  {
+    title: '所属组织',
+    dataIndex: 'organizationName',
+    hideInSearch: true,
+  },
+  {
+    title: '创建时间',
+    dataIndex: 'createTime',
+    width: '150px',
+    sorter: true,
+    hideInSearch: true,
+  },
+];
+
+export default () => {
+  return (
+    <Page.Modal<DocumentVo, DocumentQo, Document>
+      {...document}
+      rowKey="id"
+      title="文档表，用于演示数据权限，可切换不同用户并授予不同角色体验效果(需退出重新登录)"
+      columns={dataColumns}
+      toolBarActions={[{ type: 'create', permission: 'sample:document:add' }]}
+      operateBar={[{ type: 'del', permission: 'sample:document:del' }]}
+    >
+      <ProFormText hidden name="id" />
+
+      <ProFormText
+        label="文档名称"
+        name="name"
+        rules={[{ required: true, message: '请输入文档名称!' }]}
+      />
+
+      <Form.Item
+        label="所属用户"
+        name="userId"
+        rules={[{ required: true, message: '请选择所属用户!' }]}
+      >
+        <Lov keyword="ballcat_user_multiple" overwriteConfig={{ multiple: false }} />
+      </Form.Item>
+    </Page.Modal>
+  );
+};
diff --git a/src/pages/user/Login/index.tsx b/src/pages/user/Login/index.tsx
index bf625cb..dba0674 100644
--- a/src/pages/user/Login/index.tsx
+++ b/src/pages/user/Login/index.tsx
@@ -58,7 +58,7 @@ const Login: React.FC = () => {
         // 解析远程数据
         const remoteUser = {
           ...res,
-          roles: res.attributes.roles,
+          roles: res.attributes.roleCodes,
           permissions: res.attributes.permissions,
         };
 
diff --git a/src/services/ballcat/sample/document/index.ts b/src/services/ballcat/sample/document/index.ts
new file mode 100644
index 0000000..59b6455
--- /dev/null
+++ b/src/services/ballcat/sample/document/index.ts
@@ -0,0 +1,30 @@
+import type { PageResult, QueryParam, R } from '@/typings';
+import { request } from 'umi';
+import type { Document, DocumentQo, DocumentVo } from './typings';
+
+export async function query(body: QueryParam<DocumentQo>) {
+  return request<R<PageResult<DocumentVo>>>('sample/document/page', {
+    method: 'GET',
+    params: body,
+  });
+}
+
+export async function create(body: Document) {
+  return request<R<any>>('sample/document', {
+    method: 'POST',
+    data: body,
+  });
+}
+
+export async function edit(body: Document) {
+  return request<R<any>>('sample/document', {
+    method: 'PUT',
+    data: body,
+  });
+}
+
+export async function del(body: DocumentVo) {
+  return request<R<any>>(`sample/document/${body.id}`, {
+    method: 'DELETE',
+  });
+}
diff --git a/src/services/ballcat/sample/document/typings.ts b/src/services/ballcat/sample/document/typings.ts
new file mode 100644
index 0000000..2046452
--- /dev/null
+++ b/src/services/ballcat/sample/document/typings.ts
@@ -0,0 +1,38 @@
+export type DocumentQo = {
+  // ID
+  id: number;
+};
+
+export type DocumentVo = {
+  // ID
+  id: number;
+  // 文档名称
+  name: string;
+  // 所属用户ID
+  userId: number;
+  // 用户名
+  username: string;
+  // 所属组织ID
+  organizationId: number;
+  // 组织名
+  organizationName: string;
+  // 创建时间
+  createTime: string;
+  // 更新时间
+  updateTime: string;
+};
+
+export type Document = {
+  // ID
+  id: number;
+  // 文档名称
+  name: string;
+  // 所属用户ID
+  userId: number;
+  // 所属组织ID
+  organizationId: number;
+  // 创建时间
+  createTime: string;
+  // 更新时间
+  updateTime: string;
+};
diff --git a/src/services/ballcat/sample/index.ts b/src/services/ballcat/sample/index.ts
new file mode 100644
index 0000000..f2fa51a
--- /dev/null
+++ b/src/services/ballcat/sample/index.ts
@@ -0,0 +1,5 @@
+import * as document from './document';
+
+export * from './document/typings';
+
+export { document };
diff --git a/src/typings.d.ts b/src/typings.d.ts
index 468a7c7..8dae9dd 100644
--- a/src/typings.d.ts
+++ b/src/typings.d.ts
@@ -118,7 +118,7 @@ declare namespace GLOBAL {
     token_type: 'bearer';
     attributes: {
       permissions: string[];
-      roles: string[];
+      roleCodes: string[];
     };
   };
 }
diff --git a/src/utils/RouteUtils.ts b/src/utils/RouteUtils.ts
index c63253c..1245d39 100644
--- a/src/utils/RouteUtils.ts
+++ b/src/utils/RouteUtils.ts
@@ -5,6 +5,7 @@ import { dynamic, history } from 'umi';
 import type { GLOBAL } from '@/typings';
 
 export type BallcatMenuItem = {
+  id: number;
   children: MenuDataItem[];
   routes: MenuDataItem[];
   component: any;
@@ -12,10 +13,14 @@ export type BallcatMenuItem = {
   redirect?: string;
   meta?: Record<string, any>;
   exact?: boolean;
+  name: string;
 } & MenuDataItem;
 
+let menuDict: Record<string, BallcatMenuItem> = {};
+
 export async function getMenu() {
   const { data: remoteList } = await router();
+  menuDict = {};
   return serializationRemoteList(remoteList, 0, '');
 }
 
@@ -43,6 +48,7 @@ export function serializationRemoteList(list: GLOBAL.Router[], pId: number, path
       const menuPath = val.path.startsWith('/') ? val.path : `/${val.path}`;
       // @ts-ignore
       const menu: BallcatMenuItem = {
+        id: val.id,
         hideInMenu: Boolean(val.hidden),
         icon: val.icon,
         locale: false,
@@ -77,8 +83,17 @@ export function serializationRemoteList(list: GLOBAL.Router[], pId: number, path
         if (val.targetType === 1) {
           component = dynamic({
             loader: () => {
-              // TODO 导入模块异常时, 展示异常页面. import是异步.无法捕获.
-              return import(`@/pages/${val.uri}`);
+              return new Promise((resolve) => {
+                import(`@/pages/${val.uri}`)
+                  .then((page) => {
+                    resolve(page);
+                  })
+                  .catch((err) => {
+                    // eslint-disable-next-line no-console
+                    console.error('页面加载异常', err);
+                    import(`@/pages/exception/error`).then((errPage) => resolve(errPage));
+                  });
+              });
             },
             loading: LoadingComponent,
           });
@@ -95,6 +110,7 @@ export function serializationRemoteList(list: GLOBAL.Router[], pId: number, path
           menu.target = '_blank';
           menu.path = val.uri;
         }
+        menuDict[menu.path] = menu;
         menu.component = component;
       }
       menus.push(menu);
@@ -117,3 +133,13 @@ export function redirect(arg: string) {
 export function goto(path: string) {
   history.push(path);
 }
+
+const RouteUtils = {
+  getMenu,
+  getRedirectPath,
+  redirect,
+  goto,
+  getMenuDict: () => menuDict,
+};
+
+export default RouteUtils;
diff --git a/tsconfig.json b/tsconfig.json
index 90a0641..005bcfa 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -6,7 +6,7 @@
     "lib": ["esnext", "dom"],
     "sourceMap": true,
     "baseUrl": ".",
-    "jsx": "react-jsx",
+    "jsx": "preserve",
     "resolveJsonModule": true,
     "allowSyntheticDefaultImports": true,
     "moduleResolution": "node",