支持antd 5.0,移除less配置

X-neuron · Dec 24, 2022 · 22027c4 · 22027c4
1 parent 7e7290c
commit 22027c4
Show file tree

Hide file tree

Showing 32 changed files with 632 additions and 858 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "antdfront",
-  "version": "2.5.1",
+  "version": "3.0.0",
   "description": "Antdfront is a set of multi tab experimental react microfrontend template",
   "main": "webpack.config.js",
   "scripts": {
@@ -15,7 +15,6 @@
     "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx",
     "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
     "lint:prettier": "prettier --check \"**/*\" --end-of-line auto",
-    "lint:style": "stylelint \"src/**/*.less\" --custom-syntax less",
     "prettier": "prettier -c --write \"**/*\""
   },
   "browserslist": [
@@ -43,6 +42,7 @@
   "pre-commit": "lint:staged",
   "keywords": [
     "antd",
+    "antd5",
     "recoil",
     "admin",
     "pwa",
@@ -60,40 +60,39 @@
     "scoffold"
   ],
   "devDependencies": {
-    "@babel/cli": "^7.19.3",
-    "@babel/core": "^7.19.3",
+    "@babel/cli": "^7.20.7",
+    "@babel/core": "^7.20.7",
     "@babel/eslint-parser": "^7.19.1",
     "@babel/eslint-plugin": "^7.19.1",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-decorators": "^7.19.3",
+    "@babel/plugin-proposal-decorators": "^7.20.7",
     "@babel/plugin-proposal-export-default-from": "^7.18.10",
     "@babel/plugin-proposal-nullish-coalescing-operator": "^7.18.6",
     "@babel/plugin-proposal-numeric-separator": "^7.18.6",
-    "@babel/plugin-proposal-optional-chaining": "^7.18.9",
+    "@babel/plugin-proposal-optional-chaining": "^7.20.7",
     "@babel/plugin-syntax-dynamic-import": "^7.8.3",
     "@babel/plugin-syntax-jsx": "^7.18.6",
-    "@babel/plugin-transform-modules-commonjs": "^7.18.6",
-    "@babel/plugin-transform-react-constant-elements": "^7.18.12",
+    "@babel/plugin-transform-modules-commonjs": "^7.20.11",
+    "@babel/plugin-transform-react-constant-elements": "^7.20.2",
     "@babel/plugin-transform-react-display-name": "^7.18.6",
-    "@babel/plugin-transform-react-jsx": "^7.19.0",
-    "@babel/plugin-transform-runtime": "^7.19.1",
-    "@babel/preset-env": "^7.19.3",
+    "@babel/plugin-transform-react-jsx": "^7.20.7",
+    "@babel/plugin-transform-runtime": "^7.19.6",
+    "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
-    "@lingui/cli": "^3.14.0",
-    "@lingui/macro": "^3.14.0",
-    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.7",
-    "@svgr/webpack": "^6.4.0",
-    "@types/lodash": "^4.14.186",
+    "@lingui/cli": "^3.15.0",
+    "@lingui/macro": "^3.15.0",
+    "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
+    "@svgr/webpack": "^6.5.1",
+    "@types/lodash": "^4.14.191",
     "@types/qs": "^6.9.7",
-    "@types/react": "^18.0.21",
-    "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.39.0",
-    "@typescript-eslint/parser": "^5.39.0",
-    "@umijs/babel-plugin-auto-css-modules": "^3.5.34",
-    "babel-loader": "^8.2.5",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.47.0",
+    "@typescript-eslint/parser": "^5.47.0",
+    "@umijs/babel-plugin-auto-css-modules": "^3.5.36",
+    "babel-loader": "^9.1.0",
     "babel-plugin-dynamic-import-node": "^2.3.3",
-    "babel-plugin-import": "^1.13.5",
     "babel-plugin-lodash": "^3.3.4",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-named-asset-import": "^0.3.8",
@@ -105,9 +104,9 @@
     "copy-webpack-plugin": "^11.0.0",
     "cross-env": "^7.0.3",
     "cross-port-killer": "^1.4.0",
-    "css-loader": "^6.7.1",
+    "css-loader": "^6.7.3",
     "esbuild-loader": "^2.20.0",
-    "eslint": "^8.24.0",
+    "eslint": "^8.30.0",
     "eslint-config-airbnb": "^19.0.4",
     "eslint-config-airbnb-base": "^15.0.0",
     "eslint-config-prettier": "^8.5.0",
@@ -117,85 +116,77 @@
     "eslint-plugin-compat": "^4.0.2",
     "eslint-plugin-html": "^7.1.0",
     "eslint-plugin-import": "^2.26.0",
-    "eslint-plugin-jest": "^27.1.0",
+    "eslint-plugin-jest": "^27.1.7",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-markdown": "^3.0.0",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-promise": "^6.0.1",
-    "eslint-plugin-react": "^7.31.8",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-react": "^7.31.11",
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-webpack-plugin": "^3.2.0",
     "file-loader": "^6.2.0",
     "html-loader": "^4.2.0",
     "html-webpack-plugin": "^5.5.0",
-    "husky": "^8.0.1",
-    "jest": "^29.1.2",
-    "less": "^4.1.3",
-    "less-loader": "^11.0.0",
-    "lint-staged": "13.0.3",
-    "mini-css-extract-plugin": "^2.6.1",
+    "husky": "^8.0.2",
+    "jest": "^29.3.1",
+    "lint-staged": "13.1.0",
+    "mini-css-extract-plugin": "^2.7.2",
     "mockjs": "^1.1.0",
-    "node-sass": "^7.0.3",
-    "postcss": "^8.4.17",
+    "node-sass": "^8.0.0",
+    "postcss": "^8.4.20",
     "postcss-flexbugs-fixes": "^5.0.2",
-    "postcss-import": "^15.0.0",
-    "postcss-less": "^6.0.0",
-    "postcss-loader": "^7.0.1",
+    "postcss-import": "^15.1.0",
+    "postcss-loader": "^7.0.2",
     "postcss-normalize": "^10.0.1",
-    "postcss-preset-env": "^7.8.2",
+    "postcss-preset-env": "^7.8.3",
     "postcss-safe-parser": "^6.0.0",
-    "prettier": "^2.7.1",
+    "prettier": "^2.8.1",
     "raw-loader": "^4.0.2",
     "react-dev-utils": "^12.0.1",
     "react-refresh": "^0.14.0",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.55.0",
-    "sass-loader": "^13.0.2",
-    "source-map-loader": "^4.0.0",
+    "sass": "^1.57.1",
+    "sass-loader": "^13.2.0",
+    "source-map-loader": "^4.0.1",
     "style-loader": "^3.3.1",
-    "stylelint": "^14.13.0",
+    "stylelint": "^14.16.0",
     "stylelint-config-recommended": "^9.0.0",
     "stylelint-config-styled-components": "^0.1.1",
     "stylelint-processor-styled-components": "^1.10.0",
     "sugarss": "^4.0.1",
     "url-loader": "^4.1.1",
-    "webpack": "^5.74.0",
-    "webpack-bundle-analyzer": "^4.6.1",
-    "webpack-cli": "^4.10.0",
+    "webpack": "^5.75.0",
+    "webpack-bundle-analyzer": "^4.7.0",
+    "webpack-cli": "^5.0.1",
     "webpack-dashboard": "^3.3.7",
     "webpack-dev-server": "4.11.1",
     "webpack-manifest-plugin": "^5.0.0",
     "webpackbar": "^5.0.2",
     "workbox-webpack-plugin": "^6.5.4"
   },
   "dependencies": {
-    "@ant-design/icons": "^4.7.0",
-    "@ant-design/pro-card": "^2.0.10",
-    "@ant-design/pro-descriptions": "^2.0.11",
-    "@ant-design/pro-field": "^2.1.4",
-    "@ant-design/pro-form": "^2.2.2",
-    "@ant-design/pro-layout": "^7.1.3",
-    "@ant-design/pro-list": "^2.0.11",
-    "@ant-design/pro-table": "^3.0.11",
-    "@babel/runtime": "^7.19.0",
-    "@koale/useworker": "^4.0.2",
-    "@lingui/core": "^3.14.0",
-    "@lingui/react": "^3.14.0",
-    "ahooks": "^3.7.1",
-    "antd": "^4.23.4",
+    "@ant-design/cssinjs": "^1.3.0",
+    "@ant-design/icons": "^4.8.0",
+    "@ant-design/pro-components": "^2.3.47",
+    "@ant-design/use-emotion-css": "^1.0.4",
+    "@babel/runtime": "^7.20.7",
+    "@lingui/core": "^3.15.0",
+    "@lingui/react": "^3.15.0",
+    "ahooks": "^3.7.3",
+    "antd": "^5.1.0",
     "classnames": "^2.3.2",
     "history": "^5.3.0",
     "lodash": "^4.17.21",
-    "nano-memoize": "^1.3.0",
+    "nano-memoize": "^2.0.0",
     "nanoid": "^4.0.0",
-    "qiankun": "^2.8.1",
+    "qiankun": "^2.8.4",
     "qs": "^6.11.0",
     "react": "^18.2.0",
     "react-avatar-editor": "^13.0.0",
     "react-dom": "^18.2.0",
-    "react-router-dom": "^6.4.1",
-    "recoil": "^0.7.5",
-    "typescript": "^4.8.4",
+    "react-router-dom": "^6.6.1",
+    "recoil": "^0.7.6",
+    "typescript": "^4.9.4",
     "umi-request": "^1.4.0"
   },
   "author": "X-neuron",

diff --git a/src/app.tsx b/src/app.tsx
@@ -6,7 +6,7 @@ import { useRecoilValue } from "recoil";
 
 import { appRouteAtom } from "@/atoms/route";
 import Locale from "@/components/Locale";
-import PageLoading from "@/components/PageLoading";
+import { PageLoading } from "@ant-design/pro-components";
 // import { loginStateAtom } from "@/atoms/login";
 
 const App: React.FC = () => {

diff --git a/src/atoms/locale.ts b/src/atoms/locale.ts
@@ -1,3 +1,4 @@
+/* eslint-disable global-require */
 import { i18n } from "@lingui/core";
 import { atom, selector } from "recoil";
 

diff --git a/src/atoms/login.ts b/src/atoms/login.ts
@@ -1,74 +1,13 @@
 import { atom } from "recoil";
-import { DynamicRouteType } from "@/config/routes";
+import routes, { DynamicRouteType } from "@/config/routes";
+import { extractRouteConfig } from "@/utils/route-utils"
 // can use request result to instead it~
-const defaultRoute = [
-  {
-    // path: "/",
-    path: "/",
-    index: true, // index route写法
-    name: "欢迎菜单", // 翻译失败后 则采用name配置值,如无需全球化直接使用中文即可。
-    icon: "HomeOutlined", // @/config/icons里配置的图标,小写也可以
-    access: "dashboardOpen", // @/config/access里可配置静态策略。权限入口在@/config/pages里。
-    component: "dashboard", // 非动态的有page属性的路由，会默认显示在sideMmenu里。
-  },
-  {
-    // 带subs的 为下拉菜单，表明其无需路由，会其忽略page属性。 但会作为subs子路由的父路由,作为siderMenu的Key,内部计数+1
-    // 此处没有 component ，则使用 page.js里的 Default 组件
-    name: "功能",
-    path: "/ab",
-    icon: "AppstoreOutlined",
-    children: [
-      {
-        name: "测试1",
-        path: "a", // 解析为/ab/a
-        component: "test1", // page 建议使用小写，内部会转换成大写,对应到组件上。权限配置中与此保持一致
-        access: "test1Open",
-      },
-      {
-        name: "测试2",
-        path: "b", // 解析为/ab/b
-        component: "test2",
-        access: "test2Open",
-      },
-      {
-        name: "测试3",
-        path: "c", // 解析为/c
-        component: "test3",
-        access: "test3Open",
-      },
-      {
-        name: "测试4",
-        path: "counter", // 解析为/c
-        component: "test4",
-        access: "test4Open",
-      },
-    ],
-  },
-  {
-    name: "微前端",
-    path: "/micro",
-    icon: "PaperClipOutlined",
-    children: [
-      // {
-      //   name: "material-ui",
-      //   path: "material/*",
-      //   access: "microOpen",
-      //   component: "http://localhost:8002" // 微前端配置
-      // },
-      {
-        name: "vue2测试",
-        path: "vue2/*",
-        access: "microOpen",
-        component: "http://localhost:8001", // 微前端配置
-      },
-    ],
-  },
-];
 
 export interface LoginStateAtomType {
   role?: string | null,
   id?: string | null,
   account: string,
+  avatar: string | null,
   isLogin: boolean,
   token: string | null,
   permission: object,
@@ -82,10 +21,11 @@ export const loginStateAtom = atom({
     id: null,
     account: "test",
     isLogin: false,
+    avatar: null,
     // isLogin: true,
     token: null,
     permission: {},
-    route:defaultRoute,
+    route: extractRouteConfig(routes).dynamicConf,
   } as LoginStateAtomType,
 });
 
diff --git a/src/components/Footer/index.tsx b/src/components/Footer/index.tsx
@@ -0,0 +1,39 @@
+import { GithubOutlined } from "@ant-design/icons";
+import { DefaultFooter } from "@ant-design/pro-components";
+import React from "react";
+
+const Footer: React.FC = () => {
+
+  const currentYear = new Date().getFullYear();
+
+  return (
+    <DefaultFooter
+      style={{
+        background: "none",
+      }}
+      copyright={`${currentYear} XXX技术部出品`}
+      links={[
+        {
+          key: "your app name",
+          title: "AntdFront",
+          href: "https://youappaddress.com",
+          blankTarget: true,
+        },
+        {
+          key: "github",
+          title: <GithubOutlined />,
+          href: "https://github.com/ant-design/ant-design-pro",
+          blankTarget: true,
+        },
+        {
+          key: "Ant Design",
+          title: "Ant Design",
+          href: "https://ant.design",
+          blankTarget: true,
+        },
+      ]}
+    />
+  );
+};
+
+export default Footer;
diff --git a/src/components/GlobalFooter/index.less b/src/components/GlobalFooter/index.less