feat(Pages): update pages

config/routes.ts

@@ -1,139 +1,63 @@
 const routes = [
   {
     path: '/',
-    redirect: '/ssl',
+    component: './Metrics',
   },
   {
-    name: 'metrics',
     path: '/metrics',
-    component: './Metrics/Metrics',
-    icon: 'AreaChartOutlined',
+    component: './Metrics',
   },
   {
-    name: 'setting',
-    path: '/setting',
+    path: '/routes/list',
+    component: './Route/List',
+  },
+  {
+    path: '/routes/create',
+    component: './Route/Create',
+  },
+  {
+    path: '/routes/:rid/edit',
+    component: './Route/Create',
+  },
+  {
+    path: '/ssl/:id/edit',
+    component: './SSL/Create',
+  },
+  {
+    path: '/ssl/list',
+    component: './SSL/List',
+  },
+  {
+    path: '/ssl/create',
+    component: './SSL/Create',
+  },
+  {
+    path: '/upstream/list',
+    component: './Upstream/List',
+  },
+  {
+    path: '/upstream/create',
+    component: './Upstream/Create',
+  },
+  {
+    path: '/upstream/:id/edit',
+    component: './Upstream/Create',
+  },
+  {
+    path: '/consumer/list',
+    component: './Consumer/List',
+  },
+  {
+    path: '/consumer/create',
+    component: './Consumer/Create',
+  },
+  {
+    path: '/consumer/:id/edit',
+    component: './Consumer/Create',
+  },
+  {
+    path: '/settings',
     component: './Setting',
-    layout: false,
-    hideInMenu: true,
-  },
-  {
-    name: 'ssl',
-    path: '/ssl',
-    icon: 'BarsOutlined',
-    routes: [
-      {
-        path: '/ssl',
-        redirect: '/ssl/list',
-      },
-      {
-        path: '/ssl/list',
-        name: 'list',
-        component: './SSL/List',
-        hideInMenu: true,
-      },
-      {
-        name: 'create',
-        path: '/ssl/create',
-        component: './SSL/Create',
-        hideInMenu: true,
-      },
-      {
-        name: 'edit',
-        path: '/ssl/:id/edit',
-        component: './SSL/Create',
-        hideInMenu: true,
-      },
-    ],
-  },
-  {
-    name: 'routes',
-    path: '/routes',
-    icon: 'BarsOutlined',
-    routes: [
-      {
-        path: '/routes',
-        redirect: '/routes/list',
-      },
-      {
-        path: '/routes/list',
-        name: 'list',
-        icon: 'BarsOutlined',
-        component: './Route/List',
-        hideInMenu: true,
-      },
-      {
-        path: '/routes/create',
-        name: 'create',
-        component: './Route/Create',
-        hideInMenu: true,
-      },
-      {
-        path: '/routes/:rid/edit',
-        name: 'edit',
-        component: './Route/Create',
-        hideInMenu: true,
-      },
-    ],
-  },
-  {
-    name: 'consumer',
-    path: '/consumer',
-    icon: 'BarsOutlined',
-    routes: [
-      {
-        path: '/consumer',
-        redirect: '/Consumer/list',
-      },
-      {
-        path: '/consumer/list',
-        name: 'list',
-        icon: 'BarsOutlined',
-        component: './Consumer/List',
-        hideInMenu: true,
-      },
-      {
-        path: '/consumer/create',
-        name: 'create',
-        component: './Consumer/Create',
-        hideInMenu: true,
-      },
-      {
-        path: '/consumer/:id/edit',
-        name: 'edit',
-        component: './Consumer/Create',
-        hideInMenu: true,
-      },
-    ],
-  },
-  {
-    name: 'upstream',
-    path: '/upstream',
-    icon: 'BarsOutlined',
-    routes: [
-      {
-        path: '/upstream',
-        redirect: '/Upstream/list',
-      },
-      {
-        path: '/upstream/list',
-        name: 'list',
-        icon: 'BarsOutlined',
-        component: './Upstream/List',
-        hideInMenu: true,
-      },
-      {
-        path: '/upstream/create',
-        name: 'create',
-        component: './Upstream/Create',
-        hideInMenu: true,
-      },
-      {
-        path: '/upstream/:id/edit',
-        name: 'edit',
-        component: './Upstream/Create',
-        hideInMenu: true,
-      },
-    ],
   },
   {
     component: './404',

package.json

@@ -53,24 +53,25 @@
     "@ant-design/icons": "^4.0.0",
     "@ant-design/pro-layout": "^6.0.0",
     "@ant-design/pro-table": "^2.4.0",
-    "@rjsf/antd": "^2.2.0",
-    "@rjsf/core": "^2.2.0",
-    "antd": "^4.3.3",
+    "@rjsf/antd": "2.2.0",
+    "@rjsf/core": "2.2.0",
+    "antd": "^4.4.0",
     "classnames": "^2.2.6",
-    "dayjs": "^1.8.28",
-    "json-schema": "^0.2.5",
-    "lodash": "^4.17.15",
+    "dayjs": "1.8.28",
+    "json-schema": "0.2.5",
+    "lodash": "^4.17.11",
     "moment": "^2.25.3",
-    "nzh": "^1.0.3",
+    "nzh": "1.0.4",
     "omit.js": "^2.0.2",
     "path-to-regexp": "2.4.0",
     "qs": "^6.9.0",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
+    "react-helmet-async": "^1.0.4",
     "umi": "^3.1.2",
-    "umi-request": "^1.3.3",
+    "umi-request": "^1.0.8",
     "use-merge-value": "^1.0.1",
-    "uuid": "^7.0.2"
+    "uuid": "7.0.3"
   },
   "devDependencies": {
     "@ant-design/pro-cli": "^2.0.2",
@@ -79,12 +80,12 @@
     "@types/history": "^4.7.2",
     "@types/jest": "^26.0.0",
     "@types/lodash": "^4.14.144",
-    "@types/node-forge": "^0.9.3",
+    "@types/node-forge": "0.9.3",
     "@types/qs": "^6.5.3",
     "@types/react": "^16.9.17",
     "@types/react-dom": "^16.8.4",
     "@types/react-helmet": "^5.0.13",
-    "@types/uuid": "^7.0.0",
+    "@types/uuid": "7.0.4",
     "@umijs/fabric": "^2.2.0",
     "@umijs/plugin-blocks": "^2.0.5",
     "@umijs/plugin-esbuild": "^1.0.0-beta.2",
@@ -95,6 +96,7 @@
     "cross-env": "^7.0.0",
     "cross-port-killer": "^1.1.1",
     "detect-installer": "^1.0.1",
+    "enzyme": "^3.11.0",
     "eslint": "^7.1.0",
     "eslint-plugin-eslint-comments": "^3.2.0",
     "express": "^4.17.1",
@@ -104,7 +106,7 @@
     "prettier": "^2.0.1",
     "pro-download": "1.0.1",
     "puppeteer-core": "^4.0.1",
-    "react-helmet-async": "^1.0.6",
+    "react-helmet-async": "1.0.6",
     "stylelint": "^13.0.0"
   },
   "engines": {

src/app.tsx

@@ -1,28 +1,31 @@
 import React from 'react';
-import { notification } from 'antd';
 import { RequestConfig, history } from 'umi';
-import { BasicLayoutProps, Settings as LayoutSettings } from '@ant-design/pro-layout';
+import {
+  BasicLayoutProps,
+  Settings as LayoutSettings,
+  TopNavHeaderProps,
+} from '@ant-design/pro-layout';
 
-import { getSetting } from '@/pages/Setting';
 import RightContent from '@/components/RightContent';
 import Footer from '@/components/Footer';
 import { queryCurrent } from '@/services/user';
+import { getMenuData, errorHandler, getBaseURL } from '@/helpers';
 import defaultSettings from '../config/defaultSettings';
 
 export async function getInitialState(): Promise<{
   currentUser?: API.CurrentUser;
   settings?: LayoutSettings;
 }> {
   // 如果是设置页面，不执行
-  if (history.location.pathname !== '/setting') {
+  if (history.location.pathname !== '/settings') {
     try {
       const currentUser = await queryCurrent();
       return {
         currentUser,
         settings: defaultSettings,
       };
     } catch (error) {
-      history.push('/setting');
+      history.push('/settings');
     }
   }
   return {
@@ -34,59 +37,20 @@ export const layout = ({
   initialState,
 }: {
   initialState: { settings?: LayoutSettings };
-}): BasicLayoutProps => {
+}): BasicLayoutProps & TopNavHeaderProps => {
   return {
+    headerRender: undefined,
     rightContentRender: () => <RightContent />,
     disableContentMargin: false,
     footerRender: () => <Footer />,
     menuHeaderRender: undefined,
+    menuDataRender: getMenuData,
     ...initialState?.settings,
   };
 };
 
-const codeMessage = {
-  200: '服务器成功返回请求的数据。',
-  201: '新建或修改数据成功。',
-  202: '一个请求已经进入后台排队（异步任务）。',
-  204: '删除数据成功。',
-  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
-  401: '用户没有权限（令牌、用户名、密码错误）。',
-  403: '用户得到授权，但是访问是被禁止的。',
-  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
-  406: '请求的格式不可得。',
-  410: '请求的资源被永久删除，且不会再得到的。',
-  422: '当创建一个对象时，发生一个验证错误。',
-  500: '服务器发生错误，请检查服务器。',
-  502: '网关错误。',
-  503: '服务不可用，服务器暂时过载或维护。',
-  504: '网关超时。',
-};
-
-/**
- * 异常处理程序
- */
-const errorHandler = (error: { response: Response; data: any }): Promise<Response> => {
-  const { response } = error;
-  if (response && response.status) {
-    const errorText =
-      error.data.msg || error.data.message || error.data.error_msg || codeMessage[response.status];
-
-    notification.error({
-      message: `请求错误，错误码： ${error.data.errorCode || response.status}`,
-      description: errorText,
-    });
-  } else if (!response) {
-    notification.error({
-      description: '您的网络发生异常，无法连接服务器',
-      message: '网络异常',
-    });
-  }
-  return Promise.reject(response);
-};
-
-const { baseURL } = getSetting();
 export const request: RequestConfig = {
-  prefix: baseURL,
+  prefix: getBaseURL(),
   errorHandler,
   credentials: 'same-origin',
 };

src/components/PluginModal/index.tsx

@@ -1,9 +1,8 @@
 import React from 'react';
-import { Modal } from 'antd';
+import { Modal, Form } from 'antd';
 import { useIntl } from 'umi';
 
 import PluginForm from '@/components/PluginForm';
-import { useForm } from 'antd/es/form/util';
 
 interface Props {
   visible: boolean;
@@ -14,7 +13,7 @@ interface Props {
 
 const PluginModal: React.FC<Props> = (props) => {
   const { name, visible } = props;
-  const [form] = useForm();
+  const [form] = Form.useForm();
 
   return (
     <Modal

src/components/RightContent/AvatarDropdown.tsx

@@ -17,7 +17,7 @@ export interface GlobalHeaderRightProps {
  */
 const settings = async () => {
   history.replace({
-    pathname: '/setting',
+    pathname: '/settings',
     search: stringify({
       redirect: window.location.href,
     }),