1

.eslintrc.js

@@ -3,17 +3,19 @@ module.exports = {
   globals: {
     ANT_DESIGN_PRO_ONLY_DO_NOT_USE_IN_YOUR_PRODUCTION: true,
     page: true,
-    REACT_APP_ENV: true,
+    REACT_APP_ENV: true
   },
   rules: {
     semi: ['error', 'never'],
     'no-multiple-empty-lines': [1, { max: 2 }],
+    'no-use-before-define': 'off',
+    '@typescript-eslint/no-use-before-define': ['error'],
     'comma-dangle': [2, 'never'],
     'react/prop-types': 0,
     'spaced-comment': 'error',
     // 'array-bracket-spacing': ['error', 'always'], // 和prettier冲突
     'object-curly-spacing': ['error', 'always'],
-    'no-use-before-define': ['error', { functions: false }], // 允许在未定义function前调用
+    // 'no-use-before-define': ['error', { functions: false }], // 允许在未定义function前调用
     'react/self-closing-comp': [
       'error',
       {
@@ -29,4 +31,4 @@ module.exports = {
       }
     ]
   }
-};
+}

.gitignore

@@ -38,3 +38,4 @@ screenshot
 .eslintcache
 
 build
+deploy.config.js

package.json

@@ -79,7 +79,7 @@
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@types/react-helmet": "^6.1.0",
-    "@umijs/fabric": "^2.5.2",
+    "@umijs/fabric": "2.5.13",
     "@umijs/plugin-blocks": "^2.0.5",
     "@umijs/plugin-esbuild": "^1.0.1",
     "@umijs/preset-ant-design-pro": "^1.2.0",
@@ -105,8 +105,8 @@
     "puppeteer-core": "^8.0.0",
     "stylelint": "^13.0.0",
     "typescript": "^4.2.2",
-    "windicss": "^2.5.14",
-    "windicss-webpack-plugin": "^0.5.3"
+    "windicss": "3.0.12",
+    "windicss-webpack-plugin": "0.6.1"
   },
   "engines": {
     "node": ">=10.0.0"

src/pages/404.tsx

@@ -1,6 +1,6 @@
-import { Button, Result } from 'antd';
-import React from 'react';
-import { history } from 'umi';
+import React from 'react'
+import { Button, Result } from 'antd'
+import { history } from 'umi'
 
 const NoFoundPage: React.FC = () => (
   <Result
@@ -13,6 +13,6 @@ const NoFoundPage: React.FC = () => (
       </Button>
     }
   />
-);
+)
 
-export default NoFoundPage;
+export default NoFoundPage

src/pages/Admin.tsx

@@ -1,30 +1,29 @@
-import React from 'react';
-import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons';
-import { Card, Typography, Alert } from 'antd';
-import { PageHeaderWrapper } from '@ant-design/pro-layout';
-import { useIntl } from 'umi';
+import React from 'react'
+import { HeartTwoTone, SmileTwoTone } from '@ant-design/icons'
+import { Card, Typography, Alert } from 'antd'
+import { PageHeaderWrapper } from '@ant-design/pro-layout'
+import { useIntl } from 'umi'
 
 export default (): React.ReactNode => {
-  const intl = useIntl();
+  const intl = useIntl()
   return (
     <PageHeaderWrapper
       content={intl.formatMessage({
         id: 'pages.admin.subPage.title',
-        defaultMessage: ' 这个页面只有 admin 权限才能查看',
-      })}
-    >
+        defaultMessage: ' 这个页面只有 admin 权限才能查看'
+      })}>
       <Card>
         <Alert
           message={intl.formatMessage({
             id: 'pages.welcome.alertMessage',
-            defaultMessage: '更快更强的重型组件，已经发布。',
+            defaultMessage: '更快更强的重型组件，已经发布。'
           })}
           type="success"
           showIcon
           banner
           style={{
             margin: -12,
-            marginBottom: 48,
+            marginBottom: 48
           }}
         />
         <Typography.Title level={2} style={{ textAlign: 'center' }}>
@@ -39,5 +38,5 @@ export default (): React.ReactNode => {
         。
       </p>
     </PageHeaderWrapper>
-  );
-};
+  )
+}

src/pages/TableList/index.tsx

@@ -1,16 +1,16 @@
-import { PlusOutlined } from '@ant-design/icons';
-import { Button, message, Input, Drawer } from 'antd';
-import React, { useState, useRef } from 'react';
-import { useIntl, FormattedMessage } from 'umi';
-import { PageContainer, FooterToolbar } from '@ant-design/pro-layout';
-import type { ProColumns, ActionType } from '@ant-design/pro-table';
-import ProTable from '@ant-design/pro-table';
-import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form';
-import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions';
-import ProDescriptions from '@ant-design/pro-descriptions';
-import type { FormValueType } from './components/UpdateForm';
-import UpdateForm from './components/UpdateForm';
-import { rule, addRule, updateRule, removeRule } from '@/services/ant-design-pro/api';
+import { PlusOutlined } from '@ant-design/icons'
+import { Button, message, Input, Drawer } from 'antd'
+import React, { useState, useRef } from 'react'
+import { useIntl, FormattedMessage } from 'umi'
+import { PageContainer, FooterToolbar } from '@ant-design/pro-layout'
+import type { ProColumns, ActionType } from '@ant-design/pro-table'
+import ProTable from '@ant-design/pro-table'
+import { ModalForm, ProFormText, ProFormTextArea } from '@ant-design/pro-form'
+import type { ProDescriptionsItemProps } from '@ant-design/pro-descriptions'
+import ProDescriptions from '@ant-design/pro-descriptions'
+import type { FormValueType } from './components/UpdateForm'
+import UpdateForm from './components/UpdateForm'
+import { rule, addRule, updateRule, removeRule } from '@/services/ant-design-pro/api'
 
 /**
  * 添加节点
@@ -18,18 +18,18 @@ import { rule, addRule, updateRule, removeRule } from '@/services/ant-design-pro
  * @param fields
  */
 const handleAdd = async (fields: API.RuleListItem) => {
-  const hide = message.loading('正在添加');
+  const hide = message.loading('正在添加')
   try {
-    await addRule({ ...fields });
-    hide();
-    message.success('添加成功');
-    return true;
+    await addRule({ ...fields })
+    hide()
+    message.success('添加成功')
+    return true
   } catch (error) {
-    hide();
-    message.error('添加失败请重试！');
-    return false;
+    hide()
+    message.error('添加失败请重试！')
+    return false
   }
-};
+}
 
 /**
  * 更新节点
@@ -37,23 +37,23 @@ const handleAdd = async (fields: API.RuleListItem) => {
  * @param fields
  */
 const handleUpdate = async (fields: FormValueType) => {
-  const hide = message.loading('正在配置');
+  const hide = message.loading('正在配置')
   try {
     await updateRule({
       name: fields.name,
       desc: fields.desc,
-      key: fields.key,
-    });
-    hide();
+      key: fields.key
+    })
+    hide()
 
-    message.success('配置成功');
-    return true;
+    message.success('配置成功')
+    return true
   } catch (error) {
-    hide();
-    message.error('配置失败请重试！');
-    return false;
+    hide()
+    message.error('配置失败请重试！')
+    return false
   }
-};
+}
 
 /**
  * 删除节点
@@ -61,36 +61,36 @@ const handleUpdate = async (fields: FormValueType) => {
  * @param selectedRows
  */
 const handleRemove = async (selectedRows: API.RuleListItem[]) => {
-  const hide = message.loading('正在删除');
-  if (!selectedRows) return true;
+  const hide = message.loading('正在删除')
+  if (!selectedRows) return true
   try {
     await removeRule({
-      key: selectedRows.map((row) => row.key),
-    });
-    hide();
-    message.success('删除成功，即将刷新');
-    return true;
+      key: selectedRows.map(row => row.key)
+    })
+    hide()
+    message.success('删除成功，即将刷新')
+    return true
   } catch (error) {
-    hide();
-    message.error('删除失败，请重试');
-    return false;
+    hide()
+    message.error('删除失败，请重试')
+    return false
   }
-};
+}
 
 const TableList: React.FC = () => {
   /** 新建窗口的弹窗 */
-  const [createModalVisible, handleModalVisible] = useState<boolean>(false);
+  const [createModalVisible, handleModalVisible] = useState<boolean>(false)
   /** 分布更新窗口的弹窗 */
-  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false);
+  const [updateModalVisible, handleUpdateModalVisible] = useState<boolean>(false)
 
-  const [showDetail, setShowDetail] = useState<boolean>(false);
+  const [showDetail, setShowDetail] = useState<boolean>(false)
 
-  const actionRef = useRef<ActionType>();
-  const [currentRow, setCurrentRow] = useState<API.RuleListItem>();
-  const [selectedRowsState, setSelectedRows] = useState<API.RuleListItem[]>([]);
+  const actionRef = useRef<ActionType>()
+  const [currentRow, setCurrentRow] = useState<API.RuleListItem>()
+  const [selectedRowsState, setSelectedRows] = useState<API.RuleListItem[]>([])
 
   /** 国际化配置 */
-  const intl = useIntl();
+  const intl = useIntl()
 
   const columns: ProColumns<API.RuleListItem>[] = [
     {
@@ -106,19 +106,18 @@ const TableList: React.FC = () => {
         return (
           <a
             onClick={() => {
-              setCurrentRow(entity);
-              setShowDetail(true);
-            }}
-          >
+              setCurrentRow(entity)
+              setShowDetail(true)
+            }}>
             {dom}
           </a>
-        );
-      },
+        )
+      }
     },
     {
       title: <FormattedMessage id="pages.searchTable.titleDesc" defaultMessage="描述" />,
       dataIndex: 'desc',
-      valueType: 'textarea',
+      valueType: 'textarea'
     },
     {
       title: <FormattedMessage id="pages.searchTable.titleCallNo" defaultMessage="服务调用次数" />,
@@ -128,8 +127,8 @@ const TableList: React.FC = () => {
       renderText: (val: string) =>
         `${val}${intl.formatMessage({
           id: 'pages.searchTable.tenThousand',
-          defaultMessage: ' 万 ',
-        })}`,
+          defaultMessage: ' 万 '
+        })}`
     },
     {
       title: <FormattedMessage id="pages.searchTable.titleStatus" defaultMessage="状态" />,
@@ -140,27 +139,27 @@ const TableList: React.FC = () => {
           text: (
             <FormattedMessage id="pages.searchTable.nameStatus.default" defaultMessage="关闭" />
           ),
-          status: 'Default',
+          status: 'Default'
         },
         1: {
           text: (
             <FormattedMessage id="pages.searchTable.nameStatus.running" defaultMessage="运行中" />
           ),
-          status: 'Processing',
+          status: 'Processing'
         },
         2: {
           text: (
             <FormattedMessage id="pages.searchTable.nameStatus.online" defaultMessage="已上线" />
           ),
-          status: 'Success',
+          status: 'Success'
         },
         3: {
           text: (
             <FormattedMessage id="pages.searchTable.nameStatus.abnormal" defaultMessage="异常" />
           ),
-          status: 'Error',
-        },
-      },
+          status: 'Error'
+        }
+      }
     },
     {
       title: (
@@ -170,9 +169,9 @@ const TableList: React.FC = () => {
       dataIndex: 'updatedAt',
       valueType: 'dateTime',
       renderFormItem: (item, { defaultRender, ...rest }, form) => {
-        const status = form.getFieldValue('status');
+        const status = form.getFieldValue('status')
         if (`${status}` === '0') {
-          return false;
+          return false
         }
         if (`${status}` === '3') {
           return (
@@ -180,13 +179,13 @@ const TableList: React.FC = () => {
               {...rest}
               placeholder={intl.formatMessage({
                 id: 'pages.searchTable.exception',
-                defaultMessage: '请输入异常原因！',
+                defaultMessage: '请输入异常原因！'
               })}
             />
-          );
+          )
         }
-        return defaultRender(item);
-      },
+        return defaultRender(item)
+      }
     },
     {
       title: <FormattedMessage id="pages.searchTable.titleOption" defaultMessage="操作" />,
@@ -196,48 +195,46 @@ const TableList: React.FC = () => {
         <a
           key="config"
           onClick={() => {
-            handleUpdateModalVisible(true);
-            setCurrentRow(record);
-          }}
-        >
+            handleUpdateModalVisible(true)
+            setCurrentRow(record)
+          }}>
           <FormattedMessage id="pages.searchTable.config" defaultMessage="配置" />
         </a>,
         <a key="subscribeAlert" href="https://procomponents.ant.design/">
           <FormattedMessage id="pages.searchTable.subscribeAlert" defaultMessage="订阅警报" />
-        </a>,
-      ],
-    },
-  ];
+        </a>
+      ]
+    }
+  ]
 
   return (
     <PageContainer>
       <ProTable<API.RuleListItem, API.PageParams>
         headerTitle={intl.formatMessage({
           id: 'pages.searchTable.title',
-          defaultMessage: '查询表格',
+          defaultMessage: '查询表格'
         })}
         actionRef={actionRef}
         rowKey="key"
         search={{
-          labelWidth: 120,
+          labelWidth: 120
         }}
         toolBarRender={() => [
           <Button
             type="primary"
             key="primary"
             onClick={() => {
-              handleModalVisible(true);
-            }}
-          >
+              handleModalVisible(true)
+            }}>
             <PlusOutlined /> <FormattedMessage id="pages.searchTable.new" defaultMessage="新建" />
-          </Button>,
+          </Button>
         ]}
         request={rule}
         columns={columns}
         rowSelection={{
           onChange: (_, selectedRows) => {
-            setSelectedRows(selectedRows);
-          },
+            setSelectedRows(selectedRows)
+          }
         }}
       />
       {selectedRowsState?.length > 0 && (
@@ -257,15 +254,13 @@ const TableList: React.FC = () => {
                 <FormattedMessage id="pages.searchTable.tenThousand" defaultMessage="万" />
               </span>
             </div>
-          }
-        >
+          }>
           <Button
             onClick={async () => {
-              await handleRemove(selectedRowsState);
-              setSelectedRows([]);
-              actionRef.current?.reloadAndRest?.();
-            }}
-          >
+              await handleRemove(selectedRowsState)
+              setSelectedRows([])
+              actionRef.current?.reloadAndRest?.()
+            }}>
             <FormattedMessage id="pages.searchTable.batchDeletion" defaultMessage="批量删除" />
           </Button>
           <Button type="primary">
@@ -276,21 +271,20 @@ const TableList: React.FC = () => {
       <ModalForm
         title={intl.formatMessage({
           id: 'pages.searchTable.createForm.newRule',
-          defaultMessage: '新建规则',
+          defaultMessage: '新建规则'
         })}
         width="400px"
         visible={createModalVisible}
         onVisibleChange={handleModalVisible}
-        onFinish={async (value) => {
-          const success = await handleAdd(value as API.RuleListItem);
+        onFinish={async value => {
+          const success = await handleAdd(value as API.RuleListItem)
           if (success) {
-            handleModalVisible(false);
+            handleModalVisible(false)
             if (actionRef.current) {
-              actionRef.current.reload();
+              actionRef.current.reload()
             }
           }
-        }}
-      >
+        }}>
         <ProFormText
           rules={[
             {
@@ -300,8 +294,8 @@ const TableList: React.FC = () => {
                   id="pages.searchTable.ruleName"
                   defaultMessage="规则名称为必填项"
                 />
-              ),
-            },
+              )
+            }
           ]}
           width="md"
           name="name"
@@ -309,19 +303,19 @@ const TableList: React.FC = () => {
         <ProFormTextArea width="md" name="desc" />
       </ModalForm>
       <UpdateForm
-        onSubmit={async (value) => {
-          const success = await handleUpdate(value);
+        onSubmit={async value => {
+          const success = await handleUpdate(value)
           if (success) {
-            handleUpdateModalVisible(false);
-            setCurrentRow(undefined);
+            handleUpdateModalVisible(false)
+            setCurrentRow(undefined)
             if (actionRef.current) {
-              actionRef.current.reload();
+              actionRef.current.reload()
             }
           }
         }}
         onCancel={() => {
-          handleUpdateModalVisible(false);
-          setCurrentRow(undefined);
+          handleUpdateModalVisible(false)
+          setCurrentRow(undefined)
         }}
         updateModalVisible={updateModalVisible}
         values={currentRow || {}}
@@ -331,27 +325,26 @@ const TableList: React.FC = () => {
         width={600}
         visible={showDetail}
         onClose={() => {
-          setCurrentRow(undefined);
-          setShowDetail(false);
+          setCurrentRow(undefined)
+          setShowDetail(false)
         }}
-        closable={false}
-      >
+        closable={false}>
         {currentRow?.name && (
           <ProDescriptions<API.RuleListItem>
             column={2}
             title={currentRow?.name}
             request={async () => ({
-              data: currentRow || {},
+              data: currentRow || {}
             })}
             params={{
-              id: currentRow?.name,
+              id: currentRow?.name
             }}
             columns={columns as ProDescriptionsItemProps<API.RuleListItem>[]}
           />
         )}
       </Drawer>
     </PageContainer>
-  );
-};
+  )
+}
 
-export default TableList;
+export default TableList