1. 增加tailwindcss(+postcss)风格支持

2. 支持布局切换, 水平的和垂直的 3. 代码清理 4. 调整依赖库分类 5. 合并config/menu和 route/routes,并增加类型约束 6. bug fix (1.Menu在selectKeys在折叠时展开,界面中显示漂浮菜单,行为怪异 2.如果已经折叠, 后续行为(点击菜单), 不再改变状态.(原依据窗体宽度1366修改,不合理 )
selfing83 · Mar 20, 2022 · e3137f6 · e3137f6
1 parent 75a9c13
commit e3137f6
Show file tree

Hide file tree

Showing 29 changed files with 5,074 additions and 2,775 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -49,7 +49,8 @@ module.exports = {
         null: 'ignore'
       }
     ],
-    'no-use-before-define': ['error', { functions: false }],
+    'no-use-before-define': ['off', { functions: false }],
+    // 'no-use-before-define': ['error', { functions: false }],
     'prettier/prettier': ['error', { parser: 'typescript' }]
   },
   overrides: [

diff --git a/config/webpack.config.js b/config/webpack.config.js
@@ -3,16 +3,16 @@ const {
   override,
   addWebpackAlias,
   fixBabelImports,
-  addLessLoader
+  addLessLoader,
+  adjustStyleLoaders
 } = require('customize-cra')
 const CompressionWebpackPlugin = require('compression-webpack-plugin')
 const BundleAnalyzerPlugin =
   require('webpack-bundle-analyzer').BundleAnalyzerPlugin
 const webpack = require('webpack')
 const path = require('path')
 const darkThemeVars = require('antd/dist/dark-theme')
-const { addReactRefresh } = require('customize-cra-react-refresh')
-
+// const { addReactRefresh } = require('customize-cra-react-refresh') # 4.0 自带自动刷新
 // 分析打包大小
 const addAnalyze = () => (config) => {
   let plugins = [new BundleAnalyzerPlugin({ analyzerPort: 7777 })]
@@ -65,14 +65,15 @@ const addOptimization = () => (config) => {
   }
   return config
 }
+
 module.exports = override(
   // addAnalyze(),
   // 配置路径别名
   addWebpackAlias({
     '@': path.resolve('src')
   }),
   addOptimization(),
-  addReactRefresh(),
+  // addReactRefresh(),
   // 针对antd 实现按需打包：根据import来打包 (使用babel-plugin-import)
   fixBabelImports('import', {
     libraryName: 'antd',
@@ -81,14 +82,35 @@ module.exports = override(
   }),
   // 使用less-loader对源码重的less的变量进行重新制定，设置antd自定义主题
   addLessLoader({
-    javascriptEnabled: true,
-    modifyVars: {
-      hack: `true;@import "${require.resolve(
-        'antd/lib/style/color/colorPalette.less'
-      )}";`,
-      ...darkThemeVars,
-      '@primary-color': '#6e41ff'
-    },
-    localIdentName: '[local]--[hash:base64:5]' // use less-modules
+    lessOptions: {
+      javascriptEnabled: true,
+      modifyVars: {
+        hack: `true;@import "${require.resolve(
+          'antd/lib/style/color/colorPalette.less'
+        )}";`,
+        ...darkThemeVars,
+        '@primary-color': '#6e41ff',
+        'primary-color': '#1DA57A',
+        'link-color': '#1DA57A',
+        'border-radius-base': '2px'
+      },
+      modules: {
+        localIdentName: '[local]--[hash:base64:5]' // use less-modules
+      }
+    }
+  }),
+  adjustStyleLoaders(({ use: [, css, postcss, resolve, processor] }) => {
+    debugger
+    css.options.sourceMap = true // css-loader
+    postcss.options.sourceMap = true // postcss-loader
+    // when enable pre-processor,
+    // resolve-url-loader will be enabled too
+    if (resolve) {
+      resolve.options.sourceMap = true // resolve-url-loader
+    }
+    // pre-processor
+    if (processor && processor.loader.includes('less-loader')) {
+      processor.options.sourceMap = true // less-loader
+    }
   })
 )
diff --git a/package.json b/package.json
@@ -4,25 +4,18 @@
   "private": true,
   "dependencies": {
     "@ant-design/icons": "^4.0.6",
-    "@types/jest": "^24.0.0",
-    "@types/node": "^12.0.0",
-    "@types/react": "^16.9.0",
-    "@types/react-dom": "^16.9.0",
-    "@types/react-redux": "^7.1.7",
-    "@types/react-router-dom": "^5.1.4",
-    "@types/redux-promise": "^0.5.28",
+    "@iconify/react": "^3.1.4",
+    "@reduxjs/toolkit": "^1.8.0",
     "ali-oss": "^6.7.0",
     "antd": "4.2.0",
     "axios": "^0.26.0",
-    "babel-plugin-import": "^1.12.2",
     "braft-editor": "^2.3.8",
     "classnames": "^2.2.6",
-    "connected-react-router": "^6.5.2",
     "cross-env": "^7.0.2",
     "echarts": "^4.7.0",
     "echarts-for-react": "^2.0.15-beta.1",
     "less": "^3.11.1",
-    "less-loader": "^5.0.0",
+    "less-loader": "^6.0.0",
     "moment": "^2.24.0",
     "oidc-client": "^1.11.5",
     "react": "^17.0.2",
@@ -32,9 +25,7 @@
     "react-redux": "^7.2.6",
     "react-router-breadcrumbs-hoc": "^4.1.0",
     "react-router-dom": "^5.3.0",
-    "react-scripts": "3.2.0",
     "redux": "^4.0.4",
-    "redux-devtools": "^3.5.0",
     "redux-persist": "^6.0.0",
     "redux-promise": "^0.6.0"
   },
@@ -59,13 +50,20 @@
     ]
   },
   "devDependencies": {
-    "@iconify/react": "^3.1.4",
-    "@reduxjs/toolkit": "^1.8.0",
     "@testing-library/jest-dom": "^4.2.4",
     "@testing-library/react": "^9.3.2",
     "@testing-library/user-event": "^7.1.2",
+    "@types/jest": "^24.0.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^16.9.0",
+    "@types/react-dom": "^16.9.0",
+    "@types/react-redux": "^7.1.7",
+    "@types/react-router-dom": "^5.1.4",
+    "@types/redux-promise": "^0.5.28",
+    "autoprefixer": "^10.4.4",
+    "babel-plugin-import": "^1.12.2",
     "compression-webpack-plugin": "^3.0.1",
-    "customize-cra": "^0.8.0",
+    "customize-cra": "^1.0.0",
     "customize-cra-react-refresh": "^1.1.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.0.1",
@@ -81,8 +79,12 @@
     "husky": "^3.0.9",
     "lint-staged": "^9.4.2",
     "msw": "^0.38.1",
+    "postcss": "^8.4.12",
     "prettier": "^2.5.1",
     "react-app-rewired": "^2.2.1",
+    "react-scripts": "^3.4.4",
+    "redux-devtools": "^3.5.0",
+    "tailwindcss": "^3.0.23",
     "typescript": "^4.5.5",
     "uglifyjs-webpack-plugin": "^2.2.0",
     "webpack-bundle-analyzer": "^3.6.0"

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+const tailwindcss = require('tailwindcss')
+const autoprefixer = require('autoprefixer')
+
+module.exports = {
+  plugins: [tailwindcss('./tailwind.config.js'), autoprefixer]
+}