chore: 更新tableList的antd&procomponent&umi的用法

config/routes.ts

@@ -142,7 +142,7 @@ export default [
         name: 'table-list',
         icon: 'smile',
         path: '/list/table-list',
-        component: './list/table-list',
+        component: './table-list',
       },
       {
         name: 'basic-list',

src/pages/table-list/components/CreateForm.tsx

@@ -0,0 +1,75 @@
+import { addRule } from '@/services/ant-design-pro/api';
+import { PlusOutlined } from '@ant-design/icons';
+import { ActionType, ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-components';
+import { FormattedMessage, useIntl, useRequest } from '@umijs/max';
+import { Button, message } from 'antd';
+import { FC } from 'react';
+
+interface CreateFormProps {
+  reload?: ActionType['reload'];
+}
+
+const CreateForm: FC<CreateFormProps> = (props) => {
+  const { reload } = props;
+
+  const [messageApi, contextHolder] = message.useMessage();
+  /**
+   * @en-US International configuration
+   * @zh-CN 国际化配置
+   * */
+  const intl = useIntl();
+
+  const { run, loading } = useRequest(addRule, {
+    manual: true,
+    onSuccess: () => {
+      messageApi.success('Added successfully');
+      reload?.();
+    },
+    onError: () => {
+      messageApi.error('Adding failed, please try again!');
+    },
+  });
+
+  return (
+    <>
+      {contextHolder}
+      <ModalForm
+        title={intl.formatMessage({
+          id: 'pages.searchTable.createForm.newRule',
+          defaultMessage: 'New rule',
+        })}
+        trigger={
+          <Button type="primary" icon={<PlusOutlined />}>
+            <FormattedMessage id="pages.searchTable.new" defaultMessage="New" />
+          </Button>
+        }
+        width="400px"
+        modalProps={{ okButtonProps: { loading } }}
+        onFinish={async (value) => {
+          await run({ data: value as API.RuleListItem });
+
+          return true;
+        }}
+      >
+        <ProFormText
+          rules={[
+            {
+              required: true,
+              message: (
+                <FormattedMessage
+                  id="pages.searchTable.ruleName"
+                  defaultMessage="Rule name is required"
+                />
+              ),
+            },
+          ]}
+          width="md"
+          name="name"
+        />
+        <ProFormTextArea width="md" name="desc" />
+      </ModalForm>
+    </>
+  );
+};
+
+export default CreateForm;