feats

package.json

@@ -19,15 +19,15 @@
     "classnames": "^2.3.2",
     "echarts": "^5.4.0",
     "md5": "^2.3.0",
-    "react": "18.1.0",
-    "react-dom": "18.1.0",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
     "react-helmet": "^6.1.0",
     "react-router-dom": "^6.4.2",
     "react-transition-group": "^4.4.5"
   },
   "devDependencies": {
-    "@types/react": "^18.0.15",
-    "@types/react-dom": "^18.0.6",
+    "@types/react": "18.0.27",
+    "@types/react-dom": "18.0.10",
     "@vitejs/plugin-react": "^2.0.0",
     "less": "^4.1.3",
     "vite": "^3.0.0",

src/components/Page/Curd.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { DrawerForm } from '@ant-design/pro-components';
+import { Form } from 'antd';
+import List from './List';
+
+const drawerProps = {
+  destroyOnClose: true
+}
+export default (props) => {
+  const { rowKey, columns, request, formProps, renderFormItems, ...leftProps } = props;
+
+  const [form] = Form.useForm();
+  const listRef = React.useRef();
+  const rowRef = React.useRef();
+  const [open, setOpen] = React.useState(false);
+  
+  const onAdd = () => {
+    rowRef.current = undefined;
+    form.resetFields();
+    setOpen(true);
+  }
+
+  const onEdit = (row) => {
+    rowRef.current = row;
+    form.setFieldsValue(row);
+    setOpen(true);
+  }
+
+  const onDelete = (row) => {
+    rowRef.current = row;
+
+    listRef.current.showLoading('正在操作, 请稍候...');
+    request.del(row[rowKey]).then(() => {
+      listRef.current.hideLoading();
+      listRef.current.reload();
+    }).catch(() => {
+      listRef.current.hideLoading();
+    });
+  }
+
+  const onFinish = async (values) => {
+    if (rowRef.current) {
+      await request.update(rowRef.current[rowKey], {
+        ...rowRef.current,
+        ...values,
+      });
+    } else {
+      await request.save(values);
+    }
+    listRef.current.reload();
+
+    return true;
+  }
+
+  return (
+    <>
+      <List
+        ref={listRef}
+        rowKey={rowKey}
+        columns={columns}
+        request={request.list}
+        onAdd={onAdd}
+        onDelete={onDelete}
+        onEdit={onEdit}
+        {...leftProps}
+      />
+
+      <DrawerForm
+        submitTimeout={3000}
+        open={open}
+        form={form}
+        drawerProps={drawerProps}
+        onOpenChange={setOpen}
+        onFinish={onFinish}
+        {...formProps}
+      >
+        {
+          renderFormItems && renderFormItems()
+        }
+      </DrawerForm>
+    </>
+  )
+}

src/components/Page/Edit.jsx

@@ -2,7 +2,6 @@ import React from 'react';
 import { Button, Card, Form } from 'antd';
 import { useSearchParams, useNavigate } from "react-router-dom";
 import useBool from '@/utils/hooks/useBool';
-import { restful } from '@/utils/request';
 import Page from './index';
 
 const FormItem = Form.Item;
@@ -10,12 +9,12 @@ const formItemLayout = { labelCol: { span: 6 }, wrapperCol: { span: 14 } };
 
 export default (props) => {
   /**
-   * resource 用来确定应该调用哪个接口
+   * request 编辑或者新增接口
    * dataFunc 将 form 表单数据转换为接口需要格式, 一般情况下不需要这个操作
    * formDataFunc 将接口返回的值转换为 form 表单数据格式, 一般情况下不需要这个操作
    * width form 表单宽度, 默认 800px
    */
-  const { resource, dataFunc, formDataFunc, width = '800px' } = props;
+  const { request, dataFunc, formDataFunc, width = '800px', onFinish, ...leftProps } = props;
   const [loading, startLoading, stopLoading] = useBool();
   const [form] = Form.useForm();
   const navigate = useNavigate();
@@ -23,67 +22,58 @@ export default (props) => {
   // 获取 id query 参数, 如果存在说明是编辑，而不是新增
   const [params] = useSearchParams();
   const id = params.get("id");
-
-  // 接口汇总
-  const api = React.useMemo(() => {
-    // 通过 resource 知道是哪个接口
-    // 通过 restfule 生成 增删改查的接口
-    const apis = restful(resource);
-
-    // 返回三个接口
-    // 1. 获取详情
-    // 2. 新增
-    // 3. 更新
-    return {
-      get: apis[1],
-      save: apis[2],
-      update: apis[3],
-    }
-  }, [resource]);
   
-  const navBack = () => {
+  const navBack = React.useCallback(() => {
     const t = setTimeout(() => {
       navigate(-1);
       clearTimeout(t);
     }, 600);
-  }
+  }, [navigate]);
 
   // 表单提交
-  const onFinish = (values) => {    
+  const onSubmit = (values) => {    
     startLoading();
     // 可能需要转换下格式
     const data = dataFunc ? dataFunc(id, values) : values;
     if (id) {
-      api.update(id, data).then(() => {
+      request.update(id, data).then((res) => {
         stopLoading();
-        navBack();
+        if (onFinish) {
+          onFinish(res);
+        } else {
+          navBack();
+        }
       }).catch(stopLoading);
     } else {
-      api.save(data)
-        .then(() => {
+      request.save(data)
+        .then((res) => {
           stopLoading();
-          navBack();
+          if (onFinish) {
+            onFinish(res);
+          } else {
+            navBack();
+          }
         }).catch(stopLoading);
     }
   }
 
   // 查询详情
   React.useEffect(() => {
-    if (id) {
-      api.get(id).then(res => {
+    if (id && request) {
+      request.get(id).then(res => {
         // 此处可能需要转换下数据格式
         const formData = formDataFunc ? formDataFunc(res) : res;
         form.setFieldsValue(formData);
       })
     }
-  }, [id]);
+  }, [request, id]);
 
   return (
     <Page>
-      <Card>
-        <Form {...formItemLayout} form={form} onFinish={onFinish} style={{width}}>
+      <Card bodyStyle={{padding: '48px 24px'}}>
+        <Form {...formItemLayout} form={form} onFinish={onSubmit} style={{width}} {...leftProps} >
           {props.children}
-          <FormItem label=" " colon={false}>
+          <FormItem label=" " colon={false} style={{marginBottom: 0}}>
             <Button type="default" onClick={() => navigate(-1)}>
               取消
             </Button>

src/components/Page/List.jsx

@@ -1,45 +1,21 @@
-import React, { useRef, useMemo } from 'react';
+import React from 'react';
 import { Button, Popconfirm, message } from 'antd';
 import { ProTable } from '@ant-design/pro-components';
-import { Link, useNavigate } from "react-router-dom";
-import { queryTable, restful } from '@/utils/request';
+import { queryTable } from '@/utils/request';
 import Page from './index';
 
-export default (props) => {
+export default React.forwardRef((props, ref) => {
   /**
-   * resource 用来确定应该调用哪个接口
-   * rowKey 标识数据每一行的唯一键, 只能是字符串
-   * columns 定义表格每一列, 符合 ProTable 定义
-   * editURL 编辑页路由
+   * request 与 ProTable 定义不同，这个只是普通的接口即可
    */
-  const { resource, rowKey, columns, editURL } = props;
-  const actionRef = useRef();
-  const navigate = useNavigate();
+  const { request, rowKey, columns, onAdd, onDelete, onEdit, toolBarRender, columnOptionRender, ...leftProps } = props;
+  const actionRef = React.useRef();
+  const hideRef = React.useRef();
 
-  // 接口汇总
-  const api = useMemo(() => {
-    // 通过 resource 知道是哪个接口
-    // 通过 restfule 生成 增删改查的接口
-    const apis = restful(resource);
-
-    // 返回两个，一个是列表查询, 一个是删除
-    return {
-      list: apis[0],
-      delete: apis[4],
-    }
-  }, [resource]);
-
-  // 响应 删除 操作
-  const onDelete = (row) => {
-    const hide = message.loading('操作中, 请稍候...');
-    api.delete(row[rowKey]).then(() => {
-      hide();
-      actionRef.current.reload();
-    }).catch(hide);
-  }
+  const api = React.useMemo(() => queryTable(request), [request]);
 
   // 统一实现操作列
-  const cols = [
+  const cols = React.useMemo(() => [
     ...columns,
     {
       title: '操作',
@@ -47,44 +23,67 @@ export default (props) => {
       key: 'option',
       ellipsis: true,
       render: (_, record) => [
-        <Button style={{ padding: 0 }} type="link" key={1} onClick={() => { navigate(`${editURL}?id=${record[rowKey]}`) }}>
-          编辑
-        </Button>,
-        <Popconfirm
-          key={3}
-          title="您是否确认删除 ?"
-          onConfirm={() => onDelete(record)}
-          okText="确定"
-          cancelText="取消"
-        >
-          <Button style={{ padding: 0 }} type="link">
-            删除
+        (
+          onEdit && 
+          <Button style={{ padding: 0 }} type="link" key={1} onClick={() => onEdit(record) }>
+            编辑
           </Button>
-        </Popconfirm>,
-      ],
+        ),
+        (
+          onDelete &&
+          <Popconfirm
+            key={3}
+            title="您是否确认删除 ?"
+            onConfirm={() => onDelete(record)}
+            okText="确定"
+            cancelText="取消"
+          >
+            <Button style={{ padding: 0 }} type="link">
+              删除
+            </Button>
+          </Popconfirm>
+        ),
+        ...(columnOptionRender ? columnOptionRender(_, record) : []),
+      ].filter(Boolean),
     },
-  ]
+  ], [columns, onEdit, onDelete]);
+
+  React.useImperativeHandle(ref, () => {
+    const showLoading = msg => (hideRef.current = message.loading(msg || '操作中, 请稍候...'));
+    const hideLoading = () => hideRef.current && hideRef.current();
+    const reload = () => actionRef.current?.reload && actionRef.current.reload();
+
+    return {
+      showLoading,
+      hideLoading,
+      reload,
+      actionRef: actionRef,
+    }
+  }, []);
 
   return (
     <Page>
       <ProTable
         rowKey={rowKey}
         columns={cols}
-        request={queryTable(api.list)}
+        request={api}
         cardBordered
         actionRef={actionRef}
         toolBarRender={() => [
-          <Button
-            key="1"
-            type="primary"
-            onClick={() => {
-              navigate(editURL);
-            }}
-          >
-            新增
-          </Button>,
-        ]}
+          (
+            onAdd && 
+            <Button
+              key="1"
+              type="primary"
+              onClick={onAdd}
+            >
+              新增
+            </Button>
+          ),
+          ...(toolBarRender ? toolBarRender() : []),
+        ].filter(Boolean)}
+        {...leftProps}
       />
     </Page>
   )
-}
+});

src/components/Page/index.jsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Typography } from 'antd';
-import useRoute from '@/utils/hooks/useRoute';
+import useRoute from '@/routes/hooks/useRoute';
 
 const pageStyle = {
-  // margin: '24px 24px 0 24px',
-  margin: '24px',
-  minHeight: 'calc(100% - 48px)',
+  margin: '0 24px 24px 24px',
+  // margin: '24px',
+  minHeight: 'calc(100% - 24px)',
 }
 const { Title } = Typography;
 
@@ -16,7 +16,7 @@ export default (props) => {
 
   return (
     <div style={style}>
-      { title && !meta.noLayout && <Title level={4} style={{ paddingBottom: '12px' }}>{ title }</Title> }
+      { title && !meta.noLayout && <Title level={3} style={{ paddingBottom: '12px', fontWeight: 400 }}>{ title }</Title> }
       {props.children}
     </div>
   )

src/index.less

@@ -7,7 +7,8 @@ html, body, #root {
 :root {
   --theme-color: #fff;
   --theme-front: #000;
-  --header-height: 48px;
+  --theme-main-bg: #f1f7fe; // #f0f2f5;
+  --header-height: 60px;
   --siderbar-width: 240px;
 }
 
@@ -26,28 +27,32 @@ html, body, #root {
   z-index: 100;
 }
 
-.ant-layout {
-  background-color: #f0f2f5;
+.ant-layout, .ant-layout-footer {
+  background-color: var(--theme-main-bg);
 }
 
 .ant-layout-header {
   line-height: var(--header-height);
-  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
+  // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
   // border-bottom: 1px solid gainsboro;
   z-index: 10;
 }
 
 .layout-sidebar {
   width: var(--siderbar-width);
-  background-color: var(--theme-color);
+  background-color: transparent; // var(--theme-color);
   color: var(--theme-front);
-  box-shadow: 1px 0 4px 0 rgba(0, 21, 41, 0.08);
+  // box-shadow: 1px 0 4px 0 rgba(0, 21, 41, 0.08);
 
   .ant-menu {
     background: transparent;
   }
 }
 
+.ant-card, .ant-pro-card {
+  border-radius: 8px !important;
+}
+
 
 // 兼容 360
 .ant-pro-sider-collapsed-button {

src/layouts/AuthLayout/Main.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Layout } from 'antd';
+import { useLocation, Outlet } from "react-router-dom";
+import { useModel } from '@/store';
+import useRoute from '@/routes/hooks/useRoute';
+import SiderBar from './components/SiderBar';
+import Header from './components/Header';
+import Container from './components/Container';
+
+import './style.less';
+
+export default (props) => {
+  const { theme } = useModel('system');
+  const { user, menus } = useModel('user');
+  const location = useLocation();
+  const { meta } = useRoute() || {};
+  const { noLayout = false, noSiderBar = false, noFooter = false } = meta || {};
+
+  return noLayout
+    ? <Outlet />
+    : (
+      <Layout style={{ height: '100vh' }}>
+        <Header theme={theme} user={user} />
+        <Layout style={{ height: 'calc(100vh - var(--header-height))' }}>
+          { !noSiderBar && <SiderBar theme={theme} menus={menus} location={location} /> }
+          <Container location={location} noFooter={noFooter} />
+        </Layout>
+      </Layout>
+    );
+}

src/layouts/AuthLayout/RedirectLogin.jsx

@@ -0,0 +1,4 @@
+
+import { Navigate } from "react-router-dom";
+
+return () => <Navigate to="/login?back=true" />;

src/layouts/AuthLayout/components/Container.jsx

@@ -20,7 +20,7 @@ export default (props) => {
 
   return (
     <div className='layout-container'>
-      <Content style={{ minHeight: height, margin: `${marginSpace}px` }}>
+      <Content style={{ minHeight: height, margin: `0 ${marginSpace}px`}}>
         <PageTransition location={props.location}>
           <Outlet />
         </PageTransition>

src/layouts/AuthLayout/components/Header/Title.jsx

@@ -1,5 +1,5 @@
 
-import useRoute from '@/utils/hooks/useRoute';
+import useRoute from '@/routes/hooks/useRoute';
 
 const titleStyle = {
   margin: 0,

src/layouts/AuthLayout/components/HtmlTitle.jsx

@@ -1,7 +1,7 @@
 
 import { Helmet } from "react-helmet";
 import { useModel } from '@/store';
-import useRoute from '@/utils/hooks/useRoute';
+import useRoute from '@/routes/hooks/useRoute';
 
 export default (props) => {
   const { app } = useModel('system');

src/layouts/AuthLayout/components/PageTransition/style.less

@@ -8,7 +8,7 @@
   transform: translateY(0%);
 }
 .page-fade-exit {
-  opacity: 1;
+  opacity: 0; // 1;
   transform: translateY(0%);
 }
 .page-fade-exit-active {

src/layouts/AuthLayout/components/RequireLogin.jsx

@@ -1,21 +0,0 @@
-import React, { useState, useEffect } from 'react';
-import { useLocation, Navigate } from "react-router-dom";
-import { useModel } from '@/store';
-
-export default (props) => {
-  const { user, getCurrentUser } = useModel('user');
-  const [userStatus, setUserStatus] = useState(user && user.id ? 1 : 0);
-
-  useEffect(() => {
-    if (!user || !user.id) {
-      getCurrentUser().then(() => {
-        setUserStatus(1);
-      }).catch(() => {
-        setUserStatus(-1);
-      });
-    }
-  }, []);
-
-  return userStatus === 0 ? null :
-    userStatus === -1 ? <Navigate to="/login?back=true" /> : props.children;
-}

src/layouts/AuthLayout/index.jsx

@@ -1,41 +1,23 @@
-import React, { useEffect } from 'react';
-import { Layout, Spin } from 'antd';
-import { useLocation, Outlet } from "react-router-dom";
-import { useModel } from '@/store';
-import useRoute from '@/utils/hooks/useRoute';
-import RequireLogin from './components/RequireLogin';
-import SiderBar from './components/SiderBar';
-import Header from './components/Header';
-import Container from './components/Container';
+import React from 'react';
+import { Spin } from 'antd';
 import HtmlTitle from './components/HtmlTitle';
+// import Main from './Main';
+import withLogin from './withLogin';
+const RequireLogin = React.lazy(() => withLogin(import('./Main')));
 
-import './style.less';
+const Spinner = () => (
+  <div style={{ width: '100%', height: '100%', display: 'grid', placeItems: 'center' }}>
+    <Spin />
+  </div>
+)
 
 export default (props) => {
-  const { theme } = useModel('system');
-  const { user, menus } = useModel('user');
-  const location = useLocation();
-  const { meta } = useRoute() || {};
-  const { noLayout = false, noSiderBar = false, noFooter = false } = meta || {};
-
   return (
-    <Spin spinning={!user} size="large">
+    <>
       <HtmlTitle />
-      <RequireLogin>
-        {
-          noLayout
-            ? <Outlet />
-            : (
-              <Layout style={{ height: '100vh' }}>
-                <Header theme={theme} user={user} />
-                <Layout style={{ height: 'calc(100vh - var(--header-height))' }}>
-                  { !noSiderBar && <SiderBar theme={theme} menus={menus} location={location} /> }
-                  <Container location={location} noFooter={noFooter} />
-                </Layout>
-              </Layout>
-            )
-        }
-      </RequireLogin>
-    </Spin>
+      <React.Suspense fallback={<Spinner />}>
+        <RequireLogin />
+      </React.Suspense>
+    </>
   );
 }

src/layouts/AuthLayout/style.less

@@ -7,10 +7,10 @@
   justify-content: space-between;
   color: #fff;
 
-  // &.light {
-  //   background-color: #fff;
-  //   color: #000;
-  // }
+  &.light {
+    background-color: transparent;
+    color: #000;
+  }
 
   .header-content {
     flex: 1;
@@ -74,4 +74,12 @@
   }
 
   padding-top: 0; // 避免子元素的 margin 影响
+}
+
+.ant-menu-vertical {
+  border: none;
+}
+
+.ant-layout-sider-trigger {
+  background-color: transparent !important;
 }

src/layouts/AuthLayout/withLogin.jsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import store from '@/store';
+
+export default function withLogin(factory) {
+  return new Promise(resolve => {
+    const {user, getCurrentUser} = store.getState('user');
+    const loged = user && (user.userId || user.id);
+    if (loged) {
+      resolve(factory);
+    } else {
+      getCurrentUser().then(() => {
+        resolve(factory);
+      }).catch((e) => {
+        console.error(e)
+        resolve(import('./RedirectLogin'));
+      });
+    }
+  });
+}

src/layouts/PageContainer.jsx

@@ -1,23 +0,0 @@
-import React from 'react';
-import { Typography } from 'antd';
-import { Outlet } from 'react-router-dom';
-import useRoute from '@/utils/hooks/useRoute';
-
-const containerStyle = {
-  // margin: '24px 24px 0 24px',
-  margin: '24px',
-  minHeight: 'calc(100% - 48px)',
-}
-const { Title } = Typography;
-
-export default (props) => {
-  const { meta = {} } = useRoute() || {};
-  const style = meta.noLayout ? { height: '100%' } : containerStyle;
-
-  return (
-    <div style={style}>
-      { meta.title && !meta.noLayout && <Title level={4} style={{ paddingBottom: '12px' }}>{ meta.title }</Title> }
-      <Outlet />
-    </div>
-  )
-}

src/pages/sample/curd.jsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import Curd from '@/components/Page/Curd';
+import { Form, Input } from 'antd';
+
+export default (props) => {
+  const columns = [
+      {
+          dataIndex: 'index',
+          valueType: 'indexBorder',
+          width: 48,
+      },
+      {
+          title: '标题',
+          dataIndex: 'title',
+          copyable: true,
+          ellipsis: true,
+          tip: '标题过长会自动收缩',
+          formItemProps: {
+              rules: [
+                  {
+                      required: true,
+                      message: '此项为必填项',
+                  },
+              ],
+          },
+      },
+      {
+          disable: true,
+          title: '状态',
+          dataIndex: 'state',
+          filters: true,
+          onFilter: true,
+          ellipsis: true,
+          valueType: 'select',
+          valueEnum: {
+              all: { text: '超长'.repeat(50) },
+              open: {
+                  text: '未解决',
+                  status: 'Error',
+              },
+              closed: {
+                  text: '已解决',
+                  status: 'Success',
+                  disabled: true,
+              },
+              processing: {
+                  text: '解决中',
+                  status: 'Processing',
+              },
+          },
+      },
+      {
+          disable: true,
+          title: '标签',
+          dataIndex: 'labels',
+          search: false,
+          renderFormItem: (_, { defaultRender }) => {
+              return defaultRender(_);
+          },
+          render: (_, record) => (<Space>
+          {record.labels.map(({ name, color }) => (<Tag color={color} key={name}>
+              {name}
+              </Tag>))}
+          </Space>),
+      },
+      {
+          title: '创建时间',
+          key: 'showTime',
+          dataIndex: 'created_at',
+          valueType: 'date',
+          sorter: true,
+          hideInSearch: true,
+      },
+      {
+          title: '创建时间',
+          dataIndex: 'created_at',
+          valueType: 'dateRange',
+          hideInTable: true,
+          search: {
+              transform: (value) => {
+                  return {
+                      startTime: value[0],
+                      endTime: value[1],
+                  };
+              },
+          },
+      },
+  ];
+
+  return (
+    <Curd
+      columns={columns}
+      request={{
+        del: () => Promise.resolve(),
+        save: () => Promise.resolve(),
+        update: () => Promise.resolve(),
+        list: () => Promise.resolve({total: 0}),
+      }}
+      renderFormItems={() => (
+        <>
+          <Form.Item label="示例1" name="demo1">
+            <Input />
+          </Form.Item>
+          <Form.Item label="示例2" name="demo2">
+            <Input />
+          </Form.Item>
+          <Form.Item label="示例3" name="demo3">
+            <Input />
+          </Form.Item>
+          <Form.Item label="示例4" name="demo4">
+            <Input />
+          </Form.Item>
+        </>
+      )}
+    />
+  )
+}

src/pages/sample/form/index.jsx

@@ -12,6 +12,7 @@ import {
   Card,
 } from 'antd';
 import React, { useState } from 'react';
+import Edit from '@/components/Page/Edit';
 
 const { Option } = Select;
 const residences = [
@@ -48,45 +49,8 @@ const residences = [
     ],
   },
 ];
-const formItemLayout = {
-  labelCol: {
-    xs: {
-      span: 24,
-    },
-    sm: {
-      span: 8,
-    },
-  },
-  wrapperCol: {
-    xs: {
-      span: 24,
-    },
-    sm: {
-      span: 16,
-    },
-  },
-};
-const tailFormItemLayout = {
-  wrapperCol: {
-    xs: {
-      span: 24,
-      offset: 0,
-    },
-    sm: {
-      span: 16,
-      offset: 8,
-    },
-  },
-};
-
-
-const BasicForm = () => {
-  const [form] = Form.useForm();
-
-  const onFinish = (values) => {
-    console.log('Received values of form: ', values);
-  };
 
+export default (props) => {
   const prefixSelector = (
     <Form.Item name="prefix" noStyle>
       <Select
@@ -126,18 +90,7 @@ const BasicForm = () => {
     value: website,
   }));
   return (
-    <Form
-      {...formItemLayout}
-      form={form}
-      name="register"
-      onFinish={onFinish}
-      initialValues={{
-        residence: ['zhejiang', 'hangzhou', 'xihu'],
-        prefix: '86',
-      }}
-      scrollToFirstError
-      style={{ background: '#fff', boxSizing: 'border-box', padding: '24px' }}
-    >
+    <Edit width="1000px">
       <Form.Item
         name="email"
         label="E-mail"
@@ -334,19 +287,22 @@ const BasicForm = () => {
               value ? Promise.resolve() : Promise.reject(new Error('Should accept agreement')),
           },
         ]}
-        {...tailFormItemLayout}
+        wrapperCol={{
+          xs: {
+            span: 24,
+            offset: 0,
+          },
+          sm: {
+            span: 16,
+            offset: 8,
+          },
+        }}
       >
         <Checkbox>
           I have read the <a href="">agreement</a>
         </Checkbox>
       </Form.Item>
-      <Form.Item {...tailFormItemLayout}>
-        <Button type="primary" htmlType="submit">
-          Register
-        </Button>
-      </Form.Item>
-    </Form>
+    </Edit>
   );
 };
 
-export default () => <Card><BasicForm /></Card>;

src/pages/sample/home/index.jsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { Row, Col, Card, Space, Statistic } from 'antd';
+import Page from '@/components/Page';
 import Banner from './components/Banner';
 import AreaChart from './components/AreaChart';
 import BarChart from './components/BarChart';
@@ -15,7 +16,7 @@ export default (props) => {
   }
 
   return (
-    <div>
+    <Page>
       <Banner />
 
       <Row gutter={24} style={{ marginTop: '24px' }}>
@@ -35,6 +36,6 @@ export default (props) => {
           <BarChart style={chartStyle}/>
         </Col>
       </Row>
-    </div>
+    </Page>
   )
 }

src/pages/sample/table/index.jsx

@@ -1,170 +1,96 @@
-import { EllipsisOutlined, PlusOutlined } from '@ant-design/icons';
-import { ProTable, TableDropdown } from '@ant-design/pro-components';
-import { Button, Dropdown, Menu, Space, Tag } from 'antd';
-import { useRef, useEffect } from 'react';
-import { useModel } from '@/store';
 
-// import request from 'umi-request';
-const columns = [
-    {
-        dataIndex: 'index',
-        valueType: 'indexBorder',
-        width: 48,
-    },
-    {
-        title: '标题',
-        dataIndex: 'title',
-        copyable: true,
-        ellipsis: true,
-        tip: '标题过长会自动收缩',
-        formItemProps: {
-            rules: [
-                {
-                    required: true,
-                    message: '此项为必填项',
-                },
-            ],
+import { Space, Tag } from 'antd';
+import List from '@/components/Page/List';
+
+export default () => {
+    const columns = [
+        {
+            dataIndex: 'index',
+            valueType: 'indexBorder',
+            width: 48,
         },
-    },
-    {
-        disable: true,
-        title: '状态',
-        dataIndex: 'state',
-        filters: true,
-        onFilter: true,
-        ellipsis: true,
-        valueType: 'select',
-        valueEnum: {
-            all: { text: '超长'.repeat(50) },
-            open: {
-                text: '未解决',
-                status: 'Error',
-            },
-            closed: {
-                text: '已解决',
-                status: 'Success',
-                disabled: true,
-            },
-            processing: {
-                text: '解决中',
-                status: 'Processing',
+        {
+            title: '标题',
+            dataIndex: 'title',
+            copyable: true,
+            ellipsis: true,
+            tip: '标题过长会自动收缩',
+            formItemProps: {
+                rules: [
+                    {
+                        required: true,
+                        message: '此项为必填项',
+                    },
+                ],
             },
         },
-    },
-    {
-        disable: true,
-        title: '标签',
-        dataIndex: 'labels',
-        search: false,
-        renderFormItem: (_, { defaultRender }) => {
-            return defaultRender(_);
-        },
-        render: (_, record) => (<Space>
-        {record.labels.map(({ name, color }) => (<Tag color={color} key={name}>
-            {name}
-          </Tag>))}
-      </Space>),
-    },
-    {
-        title: '创建时间',
-        key: 'showTime',
-        dataIndex: 'created_at',
-        valueType: 'date',
-        sorter: true,
-        hideInSearch: true,
-    },
-    {
-        title: '创建时间',
-        dataIndex: 'created_at',
-        valueType: 'dateRange',
-        hideInTable: true,
-        search: {
-            transform: (value) => {
-                return {
-                    startTime: value[0],
-                    endTime: value[1],
-                };
+        {
+            disable: true,
+            title: '状态',
+            dataIndex: 'state',
+            filters: true,
+            onFilter: true,
+            ellipsis: true,
+            valueType: 'select',
+            valueEnum: {
+                all: { text: '超长'.repeat(50) },
+                open: {
+                    text: '未解决',
+                    status: 'Error',
+                },
+                closed: {
+                    text: '已解决',
+                    status: 'Success',
+                    disabled: true,
+                },
+                processing: {
+                    text: '解决中',
+                    status: 'Processing',
+                },
             },
         },
-    },
-    {
-        title: '操作',
-        valueType: 'option',
-        key: 'option',
-        render: (text, record, _, action) => [
-            <a key="editable" onClick={() => {
-                    var _a;
-                    (_a = action === null || action === void 0 ? void 0 : action.startEditable) === null || _a === void 0 ? void 0 : _a.call(action, record.id);
-                }}>
-        编辑
-      </a>,
-            <a href={record.url} target="_blank" rel="noopener noreferrer" key="view">
-        查看
-      </a>,
-            <TableDropdown key="actionGroup" onSelect={() => action === null || action === void 0 ? void 0 : action.reload()} menus={[
-                    { key: 'copy', name: '复制' },
-                    { key: 'delete', name: '删除' },
-                ]}/>,
-        ],
-    },
-];
-const menu = (<Menu items={[
         {
-            label: '1st item',
-            key: '1',
+            disable: true,
+            title: '标签',
+            dataIndex: 'labels',
+            search: false,
+            renderFormItem: (_, { defaultRender }) => {
+                return defaultRender(_);
+            },
+            render: (_, record) => (<Space>
+            {record.labels.map(({ name, color }) => (<Tag color={color} key={name}>
+                {name}
+                </Tag>))}
+            </Space>),
         },
         {
-            label: '2nd item',
-            key: '1',
+            title: '创建时间',
+            key: 'showTime',
+            dataIndex: 'created_at',
+            valueType: 'date',
+            sorter: true,
+            hideInSearch: true,
         },
         {
-            label: '3rd item',
-            key: '1',
+            title: '创建时间',
+            dataIndex: 'created_at',
+            valueType: 'dateRange',
+            hideInTable: true,
+            search: {
+                transform: (value) => {
+                    return {
+                        startTime: value[0],
+                        endTime: value[1],
+                    };
+                },
+            },
         },
-    ]}/>);
-export default () => {
-
-    const actionRef = useRef();
+    ];
+    
     return (
-        <ProTable columns={columns} actionRef={actionRef} cardBordered request={async (params = {}, sort, filter) => {
-            console.log(sort, filter);
-            // return request('https://proapi.azurewebsites.net/github/issues', {
-            //     params,
-            // });
-        }} editable={{
-            type: 'multiple',
-        }} columnsState={{
-            persistenceKey: 'pro-table-singe-demos',
-            persistenceType: 'localStorage',
-            onChange(value) {
-                console.log('value: ', value);
-            },
-        }} rowKey="id" search={{
-            labelWidth: 'auto',
-        }} options={{
-            setting: {
-                listsHeight: 400,
-            },
-        }} form={{
-            // 由于配置了 transform，提交的参与与定义的不同这里需要转化一下
-            syncToUrl: (values, type) => {
-                if (type === 'get') {
-                    return Object.assign(Object.assign({}, values), { created_at: [values.startTime, values.endTime] });
-                }
-                return values;
-            },
-        }} pagination={{
-            pageSize: 5,
-            onChange: (page) => console.log(page),
-        }} dateFormatter="string" headerTitle="高级表格" toolBarRender={() => [
-            <Button key="button" icon={<PlusOutlined />} type="primary">
-          新建
-        </Button>,
-            <Dropdown key="menu" overlay={menu}>
-          <Button>
-            <EllipsisOutlined />
-          </Button>
-        </Dropdown>,
-        ]}/>
+        <List
+            columns={columns}
+            request={() => Promise.resolve({ total: 0 })}
+        />
     );
 };

src/utils/hooks/usePrompt.jsx → src/routes/hooks/usePrompt.jsx

@@ -2,6 +2,7 @@ import React from "react";
 import { UNSAFE_NavigationContext } from "react-router-dom";
 
 // 估计在 react-router v6 的后续某个版本 usePrompt 会回归
+// v6.7 已经添加 UNSAFE_usePrompt
 export function usePrompt(message, when = true) {
   let blocker = React.useCallback(
     tx => {

src/routes/hooks/useRoute.jsx

@@ -0,0 +1,17 @@
+import { useLocation } from "react-router-dom";
+import { routes } from '../routes';
+import { flatten } from "../utils";
+
+let routeMap = null;
+
+// 获取当前的 route 信息
+export default function useRoute() {
+  if (!routeMap) {
+    routeMap = flatten(routes);
+  }
+
+  const location = useLocation();
+  return routeMap[location.pathname];
+  // const currentRoute = routeArr.filter(x => x.path === location.pathname)[0];
+  // return currentRoute;
+}

src/routes/menus.jsx

@@ -1,4 +1,5 @@
 import { Link } from 'react-router-dom';
+import { getPath } from './utils';
 
 // 菜单是否显示
 // 没有 meta 或者 meta.title 为空, 或者 meta.hideInMenu = true 的 都不显示
@@ -11,11 +12,6 @@ const hasChildren = (list) => {
   return list.filter(it => !isShow(it)).length !== list.length;
 }
 
-const getPath = (parent, current = '') => {
-  if (current.indexOf('/') === 0 || current.indexOf('http') === 0) return current;
-  return `${parent}/${current}`.replace(/\/\//g, '/');
-}
-
 export const getMenuItems = (routes = [], fullPath = '/') => {
   return routes.map(route => {
     const path = getPath(fullPath, route.path);

src/routes/routes.jsx

@@ -2,18 +2,16 @@ import {
   AppstoreOutlined,
   ContainerOutlined,
   DesktopOutlined,
-  MailOutlined,
-  MenuFoldOutlined,
-  MenuUnfoldOutlined,
-  PieChartOutlined,
+  FormOutlined,
 } from '@ant-design/icons';
+import { Outlet } from "react-router-dom";
 import AuthLayout from "@/layouts/AuthLayout";
-import PageContainer from "@/layouts/PageContainer";
 import Login from '@/pages/login';
 import Page404 from '@/pages/404';
 import Home from "@/pages/sample/home";
 import BasicForm from '@/pages/sample/form';
 import BasicTable from '@/pages/sample/table';
+import Curd from '@/pages/sample/curd';
 
 /**
  * meta 用来扩展自定义数据数据
@@ -35,7 +33,6 @@ export const authRoutes = [
     meta: {
       title: '表单',
       icon: <AppstoreOutlined />,
-      permission: 'form',
     },
   },
   {
@@ -44,7 +41,14 @@ export const authRoutes = [
     meta: {
       title: '表格',
       icon: <ContainerOutlined />,
-      permission: 'table',
+    },
+  },
+  {
+    path: "curd",
+    element: <Curd />,
+    meta: {
+      title: '增删改查',
+      icon: <FormOutlined />,
     },
   },
 ];

src/routes/utils.js

@@ -0,0 +1,22 @@
+
+// 获取组件路径
+export function getPath (parent = "/", current = "") {
+  if (current.indexOf("/") === 0 || current.indexOf("http") === 0)
+    return current;
+  return `${parent}/${current}`.replace(/\/\//g, "/");
+}
+
+// 展平 routes, 为一个简单对象
+// 如果出现 父组件与子组件相同路由, 那么子组件会覆盖父组件
+export function flatten (routes, parentPath = "/") {
+  return routes.reduce((acc, route) => {
+    const path = route.index ? parentPath : getPath(parentPath, route.path);
+    const children = route.children ? flatten(route.children, path) : {};
+
+    return {
+      ...acc,
+      [path]: route,
+      ...children,
+    }
+  }, {});
+};

src/services/sys_user.js

@@ -0,0 +1,6 @@
+import request from '@/utils/request';
+
+/*
+ * 查询当前人员
+ */
+export const currentUser = () => Promise.resolve({ userId: 1, name: '管理员' });

src/store/models/user.js

@@ -2,8 +2,7 @@ import { useState, useRef } from "react";
 import { defaultRoutes, authRoutes, mergeAuthRoutes } from '@/routes/routes';
 import { getMenuItems } from "@/routes/menus";
 import { getAuthedRoutes } from "@/routes/permissions";
-
-const queryCurrentUser = () => Promise.resolve({ id: 1, name: '管理员', resourcesList: [{ code: 'form' }, { code: 'table' }] });
+import { currentUser } from '@/services/sys_user';
 
 export default function useUser() {
   const [user, setUser] = useState();
@@ -11,7 +10,7 @@ export default function useUser() {
   const routesRef = useRef();
 
   const getCurrentUser = () => new Promise((resolve, reject) => {
-    queryCurrentUser().then(res => {
+    currentUser().then(res => {
       const permissions = (res.resourcesList || []).map(x => x.code);
 
       // authRoutes 是所有待验证授权的路由

src/utils/hooks/useRoute.jsx

@@ -1,9 +0,0 @@
-import { useLocation } from "react-router-dom";
-import { routeArr } from '@/routes/routes';
-
-// 获取当前的 route 信息
-export default function useRoute() {
-  const location = useLocation();
-  const currentRoute = routeArr.filter(x => x.path === location.pathname)[0];
-  return currentRoute;
-}