Browse Source

first commit

yangkaixiang 1 year ago
parent
commit
ab939642ea
21 changed files with 833 additions and 165 deletions
  1. 1 0
      .eslintignore
  2. 5 0
      .gitignore
  3. 3 0
      .npmrc
  4. 3 0
      .yarnrc
  5. 5 68
      README.md
  6. 42 0
      config-overrides.js
  7. 228 0
      package-lock.json
  8. 16 3
      package.json
  9. 0 38
      src/App.css
  10. 0 25
      src/App.js
  11. 0 8
      src/App.test.js
  12. 7 0
      src/export.js
  13. 12 10
      src/index.js
  14. 0 13
      src/reportWebVitals.js
  15. 62 0
      src/style/blue.js
  16. 60 0
      src/style/dark.js
  17. 60 0
      src/style/green.js
  18. 127 0
      src/useDtTheme/index.jsx
  19. 109 0
      src/useDtTheme/utils.jsx
  20. 7 0
      src/utils.jsx
  21. 86 0
      webpack.config.js

+ 1 - 0
.eslintignore

@@ -0,0 +1 @@
+*

+ 5 - 0
.gitignore

@@ -21,3 +21,8 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+package-lock.json
+yarn.lock
+
+/lib

+ 3 - 0
.npmrc

@@ -0,0 +1,3 @@
+
+registry=http://192.168.1.103:4873/
+//192.168.1.103:4873/:_authToken="K+h1ARb3jYzS7enJLASaew=="

+ 3 - 0
.yarnrc

@@ -0,0 +1,3 @@
+
+registry=http://192.168.1.103:4873/
+//192.168.1.103:4873/:_authToken="K+h1ARb3jYzS7enJLASaew=="

+ 5 - 68
README.md

@@ -1,70 +1,7 @@
-# Getting Started with Create React App
+# 叠腾主题切换使用方法
+import { useDtTheme } from 'dt-theme';
 
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 
-## Available Scripts
-
-In the project directory, you can run:
-
-### `npm start`
-
-Runs the app in the development mode.\
-Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
-
-The page will reload when you make changes.\
-You may also see any lint errors in the console.
-
-### `npm test`
-
-Launches the test runner in the interactive watch mode.\
-See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
-
-### `npm run build`
-
-Builds the app for production to the `build` folder.\
-It correctly bundles React in production mode and optimizes the build for the best performance.
-
-The build is minified and the filenames include the hashes.\
-Your app is ready to be deployed!
-
-See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
-
-### `npm run eject`
-
-**Note: this is a one-way operation. Once you `eject`, you can't go back!**
-
-If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
-
-Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
-
-You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
-
-## Learn More
-
-You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
-
-To learn React, check out the [React documentation](https://reactjs.org/).
-
-### Code Splitting
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
-
-### Analyzing the Bundle Size
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
-
-### Making a Progressive Web App
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
-
-### Advanced Configuration
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
-
-### Deployment
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
-
-### `npm run build` fails to minify
-
-This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)
+# 构建方法
+1、修改package.json中的版本号。
+2、npm run pub1

+ 42 - 0
config-overrides.js

@@ -0,0 +1,42 @@
+const path = require('path');
+const {
+  override,
+  addWebpackAlias,
+  addWebpackModuleRule,
+  addWebpackResolve,
+  overrideDevServer,
+} = require('customize-cra');
+const addLessLoader = require('customize-cra-less-loader');
+
+const addOverlay = () => (configFunction) => {
+  configFunction.client.overlay = false;
+  return configFunction;
+};
+
+module.exports = {
+  webpack: override(
+    // addWebpackResolve({
+    //   fallback: {
+    //     buffer: require.resolve('buffer/'),
+    //   },
+    // }),
+    addLessLoader({
+      lessLoaderOptions: {
+        lessOptions: {
+          javascriptEnabled: true,
+          modifyVars: {
+            '@primary-color': '#2A6FF6', //修改antd主题色
+          },
+        },
+      },
+    }),
+    addWebpackAlias({
+      '@': path.resolve(__dirname, 'src'),
+    }),
+    addWebpackModuleRule({
+      test: /\.svg$/,
+      use: [{ loader: 'svg-sprite-loader', options: {} }],
+    }),
+  ),
+  devServer: overrideDevServer(addOverlay()),
+};

+ 228 - 0
package-lock.json

@@ -15,6 +15,9 @@
         "react-dom": "^18.3.1",
         "react-scripts": "5.0.1",
         "web-vitals": "^2.1.4"
+      },
+      "devDependencies": {
+        "webpack-cli": "^5.1.4"
       }
     },
     "node_modules/@adobe/css-tools": {
@@ -2291,6 +2294,15 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@discoveryjs/json-ext": {
+      "version": "0.5.7",
+      "resolved": "http://192.168.1.103:4873/@discoveryjs%2fjson-ext/-/json-ext-0.5.7.tgz",
+      "integrity": "sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
       "resolved": "http://192.168.1.103:4873/@eslint-community%2feslint-utils/-/eslint-utils-4.4.0.tgz",
@@ -4865,6 +4877,50 @@
         "@xtuc/long": "4.2.2"
       }
     },
+    "node_modules/@webpack-cli/configtest": {
+      "version": "2.1.1",
+      "resolved": "http://192.168.1.103:4873/@webpack-cli%2fconfigtest/-/configtest-2.1.1.tgz",
+      "integrity": "sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/info": {
+      "version": "2.0.2",
+      "resolved": "http://192.168.1.103:4873/@webpack-cli%2finfo/-/info-2.0.2.tgz",
+      "integrity": "sha512-zLHQdI/Qs1UyT5UBdWNqsARasIA+AaF8t+4u2aS2nEpBQh2mWIVb8qAklq0eUENnC5mOItrIB4LiS9xMtph18A==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      }
+    },
+    "node_modules/@webpack-cli/serve": {
+      "version": "2.0.5",
+      "resolved": "http://192.168.1.103:4873/@webpack-cli%2fserve/-/serve-2.0.5.tgz",
+      "integrity": "sha512-lqaoKnRYBdo1UgDX8uF24AfGMifWK19TxPmM5FHc2vAGxrJ/qtyUyFBWoY1tISZdelsQ5fBcOusifo5o5wSJxQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x",
+        "webpack-cli": "5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@xtuc/ieee754": {
       "version": "1.2.0",
       "resolved": "http://192.168.1.103:4873/@xtuc%2fieee754/-/ieee754-1.2.0.tgz",
@@ -6091,6 +6147,20 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clone-deep": {
+      "version": "4.0.1",
+      "resolved": "http://192.168.1.103:4873/clone-deep/-/clone-deep-4.0.1.tgz",
+      "integrity": "sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==",
+      "dev": true,
+      "dependencies": {
+        "is-plain-object": "^2.0.4",
+        "kind-of": "^6.0.2",
+        "shallow-clone": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "http://192.168.1.103:4873/co/-/co-4.6.0.tgz",
@@ -7256,6 +7326,18 @@
         "url": "https://github.com/fb55/entities?sponsor=1"
       }
     },
+    "node_modules/envinfo": {
+      "version": "7.13.0",
+      "resolved": "http://192.168.1.103:4873/envinfo/-/envinfo-7.13.0.tgz",
+      "integrity": "sha512-cvcaMr7KqXVh4nyzGTVqTum+gAiL265x5jUWQIDLq//zOGbW+gSW/C+OWLleY/rs9Qole6AZLMXPbtIFQbqu+Q==",
+      "dev": true,
+      "bin": {
+        "envinfo": "dist/cli.js"
+      },
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/error-ex": {
       "version": "1.3.2",
       "resolved": "http://192.168.1.103:4873/error-ex/-/error-ex-1.3.2.tgz",
@@ -8379,6 +8461,15 @@
       "resolved": "http://192.168.1.103:4873/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
       "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="
     },
+    "node_modules/fastest-levenshtein": {
+      "version": "1.0.16",
+      "resolved": "http://192.168.1.103:4873/fastest-levenshtein/-/fastest-levenshtein-1.0.16.tgz",
+      "integrity": "sha512-eRnCtTTtGZFpQCwhJiUOuxPQWRXVKYDn0b2PeHfXL6/Zi53SLAzAHfVhVWK2AryC/WH05kGfxhFIPvTF0SXQzg==",
+      "dev": true,
+      "engines": {
+        "node": ">= 4.9.1"
+      }
+    },
     "node_modules/fastq": {
       "version": "1.17.1",
       "resolved": "http://192.168.1.103:4873/fastq/-/fastq-1.17.1.tgz",
@@ -8540,6 +8631,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/flat": {
+      "version": "5.0.2",
+      "resolved": "http://192.168.1.103:4873/flat/-/flat-5.0.2.tgz",
+      "integrity": "sha512-b6suED+5/3rTpUBdG1gupIl8MPFCAMA0QXwmljLhvCUKcUvdE4gWky9zpuGCcXHOsz4J9wPGNWq6OKpmIzz3hQ==",
+      "dev": true,
+      "bin": {
+        "flat": "cli.js"
+      }
+    },
     "node_modules/flat-cache": {
       "version": "3.2.0",
       "resolved": "http://192.168.1.103:4873/flat-cache/-/flat-cache-3.2.0.tgz",
@@ -9579,6 +9679,15 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/interpret": {
+      "version": "3.1.1",
+      "resolved": "http://192.168.1.103:4873/interpret/-/interpret-3.1.1.tgz",
+      "integrity": "sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
     "node_modules/ipaddr.js": {
       "version": "2.2.0",
       "resolved": "http://192.168.1.103:4873/ipaddr.js/-/ipaddr.js-2.2.0.tgz",
@@ -9873,6 +9982,18 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/is-plain-object": {
+      "version": "2.0.4",
+      "resolved": "http://192.168.1.103:4873/is-plain-object/-/is-plain-object-2.0.4.tgz",
+      "integrity": "sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==",
+      "dev": true,
+      "dependencies": {
+        "isobject": "^3.0.1"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/is-potential-custom-element-name": {
       "version": "1.0.1",
       "resolved": "http://192.168.1.103:4873/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.1.tgz",
@@ -10050,6 +10171,15 @@
       "resolved": "http://192.168.1.103:4873/isexe/-/isexe-2.0.0.tgz",
       "integrity": "sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw=="
     },
+    "node_modules/isobject": {
+      "version": "3.0.1",
+      "resolved": "http://192.168.1.103:4873/isobject/-/isobject-3.0.1.tgz",
+      "integrity": "sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==",
+      "dev": true,
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/istanbul-lib-coverage": {
       "version": "3.2.2",
       "resolved": "http://192.168.1.103:4873/istanbul-lib-coverage/-/istanbul-lib-coverage-3.2.2.tgz",
@@ -15194,6 +15324,18 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/rechoir": {
+      "version": "0.8.0",
+      "resolved": "http://192.168.1.103:4873/rechoir/-/rechoir-0.8.0.tgz",
+      "integrity": "sha512-/vxpCXddiX8NGfGO/mTafwjq4aFa/71pvamip0++IQk3zG8cbCj0fifNPrjjF1XMXUne91jL9OoxmdykoEtifQ==",
+      "dev": true,
+      "dependencies": {
+        "resolve": "^1.20.0"
+      },
+      "engines": {
+        "node": ">= 10.13.0"
+      }
+    },
     "node_modules/recursive-readdir": {
       "version": "2.2.3",
       "resolved": "http://192.168.1.103:4873/recursive-readdir/-/recursive-readdir-2.2.3.tgz",
@@ -15926,6 +16068,18 @@
       "resolved": "http://192.168.1.103:4873/setprototypeof/-/setprototypeof-1.2.0.tgz",
       "integrity": "sha512-E5LDX7Wrp85Kil5bhZv46j8jOeboKq5JMmYM3gVGdGH8xFpPWXUMsNrlODCrkoxMEeNi/XZIwuRvY4XNwYMJpw=="
     },
+    "node_modules/shallow-clone": {
+      "version": "3.0.1",
+      "resolved": "http://192.168.1.103:4873/shallow-clone/-/shallow-clone-3.0.1.tgz",
+      "integrity": "sha512-/6KqX+GVUdqPuPPd2LxDDxzX6CAbjJehAAOKlNpqqUpAqPM6HeL8f+o3a+JsyGjn2lv0WY8UsTgUJjU9Ok55NA==",
+      "dev": true,
+      "dependencies": {
+        "kind-of": "^6.0.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/shebang-command": {
       "version": "2.0.0",
       "resolved": "http://192.168.1.103:4873/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -17475,6 +17629,60 @@
         }
       }
     },
+    "node_modules/webpack-cli": {
+      "version": "5.1.4",
+      "resolved": "http://192.168.1.103:4873/webpack-cli/-/webpack-cli-5.1.4.tgz",
+      "integrity": "sha512-pIDJHIEI9LR0yxHXQ+Qh95k2EvXpWzZ5l+d+jIo+RdSm9MiHfzazIxwwni/p7+x4eJZuvG1AJwgC4TNQ7NRgsg==",
+      "dev": true,
+      "dependencies": {
+        "@discoveryjs/json-ext": "^0.5.0",
+        "@webpack-cli/configtest": "^2.1.1",
+        "@webpack-cli/info": "^2.0.2",
+        "@webpack-cli/serve": "^2.0.5",
+        "colorette": "^2.0.14",
+        "commander": "^10.0.1",
+        "cross-spawn": "^7.0.3",
+        "envinfo": "^7.7.3",
+        "fastest-levenshtein": "^1.0.12",
+        "import-local": "^3.0.2",
+        "interpret": "^3.1.1",
+        "rechoir": "^0.8.0",
+        "webpack-merge": "^5.7.3"
+      },
+      "bin": {
+        "webpack-cli": "bin/cli.js"
+      },
+      "engines": {
+        "node": ">=14.15.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "webpack": "5.x.x"
+      },
+      "peerDependenciesMeta": {
+        "@webpack-cli/generators": {
+          "optional": true
+        },
+        "webpack-bundle-analyzer": {
+          "optional": true
+        },
+        "webpack-dev-server": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/webpack-cli/node_modules/commander": {
+      "version": "10.0.1",
+      "resolved": "http://192.168.1.103:4873/commander/-/commander-10.0.1.tgz",
+      "integrity": "sha512-y4Mg2tXshplEbSGzx7amzPwKKOCGuoSRP/CjEdwwk0FOGlUbq6lKuoyDZTNZkmxHdJtp54hdfY/JUrdL7Xfdug==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      }
+    },
     "node_modules/webpack-dev-middleware": {
       "version": "5.3.4",
       "resolved": "http://192.168.1.103:4873/webpack-dev-middleware/-/webpack-dev-middleware-5.3.4.tgz",
@@ -17708,6 +17916,20 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/webpack-merge": {
+      "version": "5.10.0",
+      "resolved": "http://192.168.1.103:4873/webpack-merge/-/webpack-merge-5.10.0.tgz",
+      "integrity": "sha512-+4zXKdx7UnO+1jaN4l2lHVD+mFvnlZQP/6ljaJVb4SZiwIKeUnrT5l0gkT8z+n4hKpC+jpOv6O9R+gLtag7pSA==",
+      "dev": true,
+      "dependencies": {
+        "clone-deep": "^4.0.1",
+        "flat": "^5.0.2",
+        "wildcard": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/webpack-sources": {
       "version": "3.2.3",
       "resolved": "http://192.168.1.103:4873/webpack-sources/-/webpack-sources-3.2.3.tgz",
@@ -17888,6 +18110,12 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/wildcard": {
+      "version": "2.0.1",
+      "resolved": "http://192.168.1.103:4873/wildcard/-/wildcard-2.0.1.tgz",
+      "integrity": "sha512-CC1bOL87PIWSBhDcTrdeLo6eGT7mCFtrg0uIJtqJUFyK+eJnzl8A1niH56uu7KMa5XFrtiV+AQuHO3n7DsHnLQ==",
+      "dev": true
+    },
     "node_modules/word-wrap": {
       "version": "1.2.5",
       "resolved": "http://192.168.1.103:4873/word-wrap/-/word-wrap-1.2.5.tgz",

+ 16 - 3
package.json

@@ -1,7 +1,7 @@
 {
   "name": "dt-theme",
-  "version": "0.1.0",
-  "private": true,
+  "version": "1.0.3",
+  "main": "lib/index.js",
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
@@ -14,8 +14,10 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
+    "start-dev":"react-app-rewired start",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "pub1": "npx webpack --config webpack.config.js && npm publish"
   },
   "eslintConfig": {
     "extends": [
@@ -34,5 +36,16 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "files": [
+    "lib"
+  ],
+  "devDependencies": {
+    "webpack-cli": "^5.1.4",
+    "less": "^4.2.0",
+    "less-loader": "^11.1.3",
+    "react-app-rewired": "^2.2.1",
+    "customize-cra": "^1.0.0",
+    "customize-cra-less-loader": "^2.0.0"
   }
 }

+ 0 - 38
src/App.css

@@ -1,38 +0,0 @@
-.App {
-  text-align: center;
-}
-
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}

+ 0 - 25
src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

+ 0 - 8
src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

+ 7 - 0
src/export.js

@@ -0,0 +1,7 @@
+import useDtTheme, { getAntdToken, changeTheme } from './useDtTheme';
+
+export {
+  useDtTheme,
+  getAntdToken,
+  changeTheme,
+}

+ 12 - 10
src/index.js

@@ -1,17 +1,19 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import { useDtTheme, getAntdToken, changeTheme } from './export'
+
+const Box = props => {
+  useDtTheme();
+  getAntdToken();
+  changeTheme();
+
+  return (
+    <div>叠腾主题</div>
+  )
+}
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
+  <Box></Box>
 );
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

+ 0 - 13
src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

+ 62 - 0
src/style/blue.js

@@ -0,0 +1,62 @@
+//蓝色主题
+// light蓝 dark蓝
+import { useMemo } from 'react';
+
+const myTheme = {
+  '--dt-primary-color1': ['#2a6ff6', '#508df8'],
+  '--dt-primary-color2': ['#558cf8', '#4387ff'],
+  '--dt-primary-color3': ['#2259c5', '#73a4f9'],
+  '--dt-primary-color4': ['#709FF9', 'rgba(80, 141, 248, 0.4)'],
+  '--dt-primary-color5': ['#9DBDFB', 'rgba(80, 141, 248, 0.5)'],
+  '--dt-primary-color6': ['#BDD2FC', 'rgba(80, 141, 248, 0.3)'],
+  '--dt-primary-color7': ['#EAF1FE', 'rgba(80, 141, 248, 0.2)'],
+  '--dt-primary-color': ['var(--dt-primary-color1)', 'var(--dt-primary-color1)'],
+  '--dt-primary-color-hover': ['var(--dt-primary-color2)', 'var(--dt-primary-color2)'],
+  '--dt-primary-color-click': ['var(--dt-primary-color3)', 'var(--dt-primary-color3)'],
+  '--dt-primary-color-disabled': ['var(--dt-primary-color5)', 'var(--dt-primary-color5)'],
+  '--dt-primary-color-label': ['var(--dt-primary-color7)', 'var(--dt-primary-color7)'],
+  '--dt-text-color1': ['#1F232B', 'rgba(255, 255, 255, 0.85)'],
+  '--dt-text-color2': ['#4D596A', 'rgba(255, 255, 255, 0.6)'],
+  '--dt-text-color3': ['#848e9b', 'rgba(255, 255, 255, 0.45)'],
+  '--dt-text-color4': ['#c9ced6', 'rgba(255, 255, 255, 0.3)'],
+  '--dt-line-color1': ['#F2F3F5', 'rgba(255, 255, 255, 0.08)'],
+  '--dt-line-color2': ['#E5E6EA', 'rgba(255, 255, 255, 0.12)'],
+  '--dt-line-color3': ['#C9CDD4', 'rgba(255, 255, 255, 0.16)'],
+  '--dt-fill-color1': ['#f7f8fa', '#1f2729'],
+  '--dt-fill-color2': ['#C9CDD4', 'rgba(255, 255, 255, 0.24)'],
+  '--dt-fill-color3': ['#ffffff', '#293133'],
+  '--dt-fill-color4': ['#F2F3F5', 'rgba(255, 255, 255, 0.08)'],
+  '--dt-fill-color5': ['#E5E6EB', 'rgba(255, 255, 255, 0.16)'],
+  '--dt-fill-color6': ['#4E5969', '#C5C5C5'],
+  '--dt-success-color1': ['#2da641', '#27C346'],
+  '--dt-success-color2': ['#57B867', '#23AE3F'],
+  '--dt-success-color3': ['#29973B', '#67D57D'],
+  '--dt-success-color4': ['#9ED6A8', 'rgba(39, 195, 70, 0.5)'],
+  '--dt-success-color5': ['#BEE3C4', 'rgba(39, 195, 70, 0.4)'],
+  '--dt-success-color6': ['#EAF6EC', 'rgba(39, 195, 70, 0.2)'],
+  '--dt-warning-color1': ['#ED6A0C', '#FF9626'],
+  '--dt-warning-color2': ['#F1883D', '#FF890A'],
+  '--dt-warning-color3': ['#D8600B', '#FFB567'],
+  '--dt-warning-color4': ['#F7BA8F', 'rgba(255, 150, 38, 0.5)'],
+  '--dt-warning-color5': ['#F9D1B4', 'rgba(255, 150, 38, 0.4)'],
+  '--dt-warning-color6': ['#FDF0E7', 'rgba(255, 150, 38, 0.2)'],
+  '--dt-error-color1': ['#f24a3f', '#F76965'],
+  '--dt-error-color2': ['#f56e65', '#F6504C'],
+  '--dt-error-color3': ['#dc4339', '#F99693'],
+  '--dt-error-color4': ['#f9aca7', 'rgba(247, 105, 101, 0.5)'],
+  '--dt-error-color5': ['#fbc7c3', 'rgba(247, 105, 101, 0.4)'],
+  '--dt-error-color6': ['#feedec', 'rgba(247, 105, 101, 0.2)'],
+  '--dt-white-color1': ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'],
+  '--dt-white-color2': ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'],
+  '--dt-cyan-color6': ['#14C9C9', '#14C9C9'],
+  '--dt-special-color1': ['#ffffff', '#ffffff'],
+  '--dt-special-color2': ['#ffffff', '#ffffff'],
+  '--dt-special-color3': ['#000000', '#000000'],
+  '--dt-special-color4': ['#1f232b', '#2e3739'],
+  '--dt-special-color5': ['#e5e6ea', '#3a4143'],
+  '--dt-special-color6': ['#F2F3F5', '#3A4143'],
+  '--dt-shadow-color1':['rgba(0, 0, 0, 0.10)','rgba(0, 0, 0, 0.25)'],
+  '--dt-canvas-color':['var(--dt-fill-color3)','var(--dt-fill-color3)'],
+};
+
+export default myTheme;

+ 60 - 0
src/style/dark.js

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+
+const myTheme = {
+  '--dt-primary-color1': ['#2a6ff6', '#508df8'],
+  '--dt-primary-color2': ['#558cf8', '#4387ff'],
+  '--dt-primary-color3': ['#2259c5', '#73a4f9'],
+  '--dt-primary-color4': ['#709FF9', 'rgba(80, 141, 248, 0.4)'],
+  '--dt-primary-color5': ['#9DBDFB', 'rgba(80, 141, 248, 0.5)'],
+  '--dt-primary-color6': ['#BDD2FC', 'rgba(80, 141, 248, 0.3)'],
+  '--dt-primary-color7': ['#EAF1FE', 'rgba(80, 141, 248, 0.2)'],
+  '--dt-primary-color': ['var(--dt-primary-color1)', 'var(--dt-primary-color1)'],
+  '--dt-primary-color-hover': ['var(--dt-primary-color2)', 'var(--dt-primary-color2)'],
+  '--dt-primary-color-click': ['var(--dt-primary-color3)', 'var(--dt-primary-color3)'],
+  '--dt-primary-color-disabled': ['var(--dt-primary-color5)', 'var(--dt-primary-color5)'],
+  '--dt-primary-color-label': ['var(--dt-primary-color7)', 'var(--dt-primary-color7)'],
+  '--dt-text-color1': ['#1F232B', '#cce8ff'],
+  '--dt-text-color2': ['#4D596A', '#80baea'],
+  '--dt-text-color3': ['#848e9b', '#2d76b2'],
+  '--dt-text-color4': ['#c9ced6', '#125a95'],
+  '--dt-line-color1': ['#F2F3F5', 'rgba(255, 255, 255, 0.12)'],
+  '--dt-line-color2': ['#E5E6EA', 'rgba(0,119,219,0.2)'],
+  '--dt-line-color3': ['#C9CDD4', '#0077db'],
+  '--dt-fill-color1': ['#f7f8fa', '#020e24'],
+  '--dt-fill-color2': ['#C9CDD4', 'rgba(255, 255, 255, 0.24)'],
+  '--dt-fill-color3': ['#ffffff', '#071a36'],
+  '--dt-fill-color4': ['#F2F3F5', '#0d274f'],
+  '--dt-fill-color5': ['#E5E6EB', 'rgba(255, 255, 255, 0.16)'],
+  '--dt-fill-color6': ['#4E5969', '#0077db'],
+  '--dt-success-color1': ['#2da641', '#27C346'],
+  '--dt-success-color2': ['#57B867', '#23AE3F'],
+  '--dt-success-color3': ['#29973B', '#67D57D'],
+  '--dt-success-color4': ['#9ED6A8', 'rgba(39, 195, 70, 0.5)'],
+  '--dt-success-color5': ['#BEE3C4', 'rgba(39, 195, 70, 0.4)'],
+  '--dt-success-color6': ['#EAF6EC', 'rgba(39, 195, 70, 0.2)'],
+  '--dt-warning-color1': ['#ED6A0C', '#FF9626'],
+  '--dt-warning-color2': ['#F1883D', '#FF890A'],
+  '--dt-warning-color3': ['#D8600B', '#FFB567'],
+  '--dt-warning-color4': ['#F7BA8F', 'rgba(255, 150, 38, 0.5)'],
+  '--dt-warning-color5': ['#F9D1B4', 'rgba(255, 150, 38, 0.4)'],
+  '--dt-warning-color6': ['#FDF0E7', 'rgba(255, 150, 38, 0.2)'],
+  '--dt-error-color1': ['#f24a3f', '#F76965'],
+  '--dt-error-color2': ['#f56e65', '#F6504C'],
+  '--dt-error-color3': ['#dc4339', '#F99693'],
+  '--dt-error-color4': ['#f9aca7', 'rgba(247, 105, 101, 0.5)'],
+  '--dt-error-color5': ['#fbc7c3', 'rgba(247, 105, 101, 0.4)'],
+  '--dt-error-color6': ['#feedec', 'rgba(247, 105, 101, 0.2)'],
+  '--dt-white-color1': ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'],
+  '--dt-white-color2': ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'],
+  '--dt-cyan-color6': ['#14C9C9', '#14C9C9'],
+  '--dt-special-color1': ['#ffffff', '#ffffff'],
+  '--dt-special-color2': ['#ffffff', '#ffffff'],
+  '--dt-special-color3': ['#000000', '#000000'],
+  '--dt-special-color4': ['#1f232b', '#2e3739'],
+  '--dt-special-color5': ['#e5e6ea', '#0077db'],
+  '--dt-special-color6': ['#F2F3F5', 'var(--dt-fill-color4)'],
+  '--dt-shadow-color1':['rgba(0, 0, 0, 0.10)','rgba(0, 0, 0, 0.25)'],
+  '--dt-canvas-color':['var(--dt-fill-color3)','var(--dt-fill-color3)'],
+};
+
+export default myTheme;

+ 60 - 0
src/style/green.js

@@ -0,0 +1,60 @@
+import { useMemo } from 'react';
+
+const myTheme = {
+  '--dt-primary-color1': ['#3DCD58', 'rgba(60, 126, 255, 1)'],
+  '--dt-primary-color2': ['#64D779', 'rgba(67, 135, 255, 1)'],
+  '--dt-primary-color3': ['#38BB50', 'rgba(115, 164, 249, 1)'],
+  '--dt-primary-color4': ['#7DDE8F', 'rgba(80, 141, 248, 0.4)'],
+  '--dt-primary-color5': ['#A6E8B2', 'rgba(80, 141, 248, 0.5)'],
+  '--dt-primary-color6': ['#C3F0CB', 'rgba(80, 141, 248, 0.3)'],
+  '--dt-primary-color7': ['#ECFAEE', 'rgba(80, 141, 248, 0.2)'],
+  '--dt-primary-color': ['var(--dt-primary-color1)', 'var(--dt-primary-color1)'],
+  '--dt-primary-color-hover': ['var(--dt-primary-color2)', 'var(--dt-primary-color2)'],
+  '--dt-primary-color-click': ['var(--dt-primary-color3)', 'var(--dt-primary-color3)'],
+  '--dt-primary-color-disabled': ['var(--dt-primary-color5)', 'var(--dt-primary-color5)'],
+  '--dt-primary-color-label': ['var(--dt-primary-color7)', 'var(--dt-primary-color7)'],
+  '--dt-text-color1': ['#1F232B', 'rgba(255, 255, 255, 0.85)'],
+  '--dt-text-color2': ['#4D596A', 'rgba(255, 255, 255, 0.6)'],
+  '--dt-text-color3': ['#848e9b', 'rgba(255, 255, 255, 0.45)'],
+  '--dt-text-color4': ['#c9ced6', 'rgba(255, 255, 255, 0.3)'],
+  '--dt-line-color1': ['#F2F3F5', 'rgba(255, 255, 255, 0.08)'],
+  '--dt-line-color2': ['#E5E6EA', 'rgba(255, 255, 255, 0.12)'],
+  '--dt-line-color3': ['#C9CDD4', 'rgba(255, 255, 255, 0.16)'],
+  '--dt-fill-color1': ['#f7f8fa', '#1f2729'],
+  '--dt-fill-color2': ['#C9CDD4', 'rgba(255, 255, 255, 0.24)'],
+  '--dt-fill-color3': ['#ffffff', '#293133'],
+  '--dt-fill-color4': ['#F2F3F5', 'rgba(255, 255, 255, 0.08)'],
+  '--dt-fill-color5': ['#E5E6EB', 'rgba(255, 255, 255, 0.16)'],
+  '--dt-fill-color6': ['#4E5969', '#C5C5C5'],
+  '--dt-success-color1': ['#7CDB1D', '#27C346'],
+  '--dt-success-color2': ['#96E24A', '#23AE3F'],
+  '--dt-success-color3': ['#71C71A', '#67D57D'],
+  '--dt-success-color4': ['#C3EE97', 'rgba(39, 195, 70, 0.5)'],
+  '--dt-success-color5': ['#D6F4B9', 'rgba(39, 195, 70, 0.4)'],
+  '--dt-success-color6': ['#F2FBE8', 'rgba(39, 195, 70, 0.2)'],
+  '--dt-warning-color1': ['#ED6A0C', '#FF9626'],
+  '--dt-warning-color2': ['#F1883D', '#FF890A'],
+  '--dt-warning-color3': ['#D8600B', '#FFB567'],
+  '--dt-warning-color4': ['#F7BA8F', 'rgba(255, 150, 38, 0.5)'],
+  '--dt-warning-color5': ['#F9D1B4', 'rgba(255, 150, 38, 0.4)'],
+  '--dt-warning-color6': ['#FDF0E7', 'rgba(255, 150, 38, 0.2)'],
+  '--dt-error-color1': ['#f24a3f', '#F76965'],
+  '--dt-error-color2': ['#f56e65', '#F6504C'],
+  '--dt-error-color3': ['#dc4339', '#F99693'],
+  '--dt-error-color4': ['#f9aca7', 'rgba(247, 105, 101, 0.5)'],
+  '--dt-error-color5': ['#fbc7c3', 'rgba(247, 105, 101, 0.4)'],
+  '--dt-error-color6': ['#feedec', 'rgba(247, 105, 101, 0.2)'],
+  '--dt-white-color1': ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'],
+  '--dt-white-color2': ['rgba(255, 255, 255, 1)', 'rgba(255, 255, 255, 1)'],
+  '--dt-cyan-color6': ['#14C9C9', '#14C9C9'],
+  '--dt-special-color1': ['#ffffff', '#ffffff'],
+  '--dt-special-color2': ['#ffffff', '#ffffff'],
+  '--dt-special-color3': ['#000000', '#000000'],
+  '--dt-special-color4': ['#1f232b', '#2e3739'],
+  '--dt-special-color5': ['#e5e6ea', '#3a4143'],
+  '--dt-special-color6': ['#F2F3F5', '#3A4143'],
+  '--dt-shadow-color1':['rgba(0, 0, 0, 0.10)','rgba(0, 0, 0, 0.25)'],
+  '--dt-canvas-color':['var(--dt-fill-color3)','var(--dt-fill-color3)'],
+};
+
+export default myTheme;

+ 127 - 0
src/useDtTheme/index.jsx

@@ -0,0 +1,127 @@
+import { useState, useEffect, useRef } from 'react';
+import { isVite } from '@/utils.jsx';
+import { antdTokenCorRes, isDarkTheme } from './utils.jsx'
+import blueTheme from '@/style/blue.js'
+import greenTheme from '@/style/green.js'
+import darkBlueTheme from '@/style/dark.js'
+
+const APP_THEME_CHANGEABLE_KEY = () => {
+  return isVite ? import.meta.env.VITE_APP_THEME_CHANGEABLE : process.env.REACT_APP_THEME_CHANGEABLE;
+}
+
+const APP_THEME_KEY = () => {
+  return isVite ? import.meta.env.VITE_APP_THEME : process.env.REACT_APP_THEME;
+}
+
+const themeKeys = (themeKey) => {
+  if (themeKey === 'light' || themeKey === 'dark') {
+    return blueTheme
+  }
+  else if (themeKey === 'green' || themeKey === 'darkGreen') {
+    return greenTheme
+  }
+  else if (themeKey === 'darkBlue') {
+    return darkBlueTheme
+  }
+  return blueTheme
+}
+
+export function getAntdToken(theme, alwaysLight) {//alwaysLight主要适用于登录页只有白色的情况
+
+  function recur(antdTokenCorRes) {
+    const colors = Object.keys(antdTokenCorRes).map(key => {
+      const tokenName = antdTokenCorRes[key]
+      if (key.indexOf('Width') !== -1 || key.indexOf('Radius') !== -1) {
+        return { [key]: tokenName };
+      }
+      const isDark = alwaysLight ?? isDarkTheme(theme)
+      return { [key]: themeKeys(theme)?.[tokenName]?.[isDark] ?? '' };
+    })
+    return colors
+  }
+
+  const colors = recur(antdTokenCorRes)
+
+  // 各组件的遍历
+  const components = antdTokenCorRes?.components
+  const componentsToken = Object.keys(components ?? {}).map(item => {
+    // console.log(item, components[item])
+    let colors = recur(components[item])
+    return { [item]: Object.assign(...colors) }
+  })
+
+  const token = Object.assign(...colors)
+  const comp = Object.assign(...componentsToken)
+  const res = { token: token, components: comp }
+  // console.log(res)
+  return res;
+}
+
+export function changeTheme(theme) {
+  const myTheme = themeKeys(theme)
+  Object.keys(myTheme).forEach((key) => {
+    const val = myTheme[key][isDarkTheme(theme)];
+    if (typeof val === 'string' && val !== '') {
+      document.documentElement.style.setProperty(key, val);
+    }
+  });
+}
+
+const useLocalStorageThemeName = () => {
+  if (!window.__MICRO_APP_ENVIRONMENT__) {
+    var orignalSetItem = localStorage.setItem;
+    localStorage.setItem = function (key, newValue) {
+      var storage = new Event('storage')
+      storage.key = key;
+      storage.newValue = newValue;
+      window.dispatchEvent(storage);
+      orignalSetItem.apply(this, arguments);
+    };
+  }
+
+  const [themeName, setThemeName] = useState(() => {
+    if (APP_THEME_CHANGEABLE_KEY == 'false') {
+      return APP_THEME_KEY
+    }
+    // 初始值从localStorage或环境变量中获取  
+    const storedTheme = localStorage.getItem('--dt-theme');
+    return (
+      storedTheme ??
+      APP_THEME_KEY ??
+      'dark'
+    );
+  });
+  const lastThemeRef = useRef(null);
+
+  useEffect(() => {
+    if (!window.__MICRO_APP_ENVIRONMENT__) {
+      changeTheme(themeName)
+      if (!localStorage.getItem('--dt-theme')) {
+        localStorage.setItem('--dt-theme', themeName);
+      }
+    }
+  }, [themeName])
+
+  useEffect(() => {
+    function handleStorageEvent(e) {
+      if (e.key === '--dt-theme') {
+        const newValue = localStorage.getItem('--dt-theme');
+        if (newValue !== lastThemeRef.current) {
+          lastThemeRef.current = newValue;
+          setThemeName(newValue ?? 'dark');
+        }
+      }
+    }
+
+    window.addEventListener('storage', handleStorageEvent);
+
+    // 清理函数  
+    return () => {
+      window.removeEventListener('storage', handleStorageEvent);
+    };
+  }, []); // 空依赖数组表示这个effect只会在组件挂载和卸载时运行  
+
+  return [themeName];
+};
+
+export default useLocalStorageThemeName;

+ 109 - 0
src/useDtTheme/utils.jsx

@@ -0,0 +1,109 @@
+const antdTokenCorRes = {
+  colorBgBase: "--dt-fill-color3",
+  "colorInfo": "--dt-primary-color1",
+  "colorPrimary": "--dt-primary-color1",
+  "colorPrimaryBg": "--dt-primary-color7",
+  "colorPrimaryBgHover": "--dt-primary-color4",
+  "colorPrimaryBorder": "--dt-primary-color1",
+  "colorPrimaryBorderHover": "--dt-primary-color2",
+  "colorPrimaryHover": "--dt-primary-color2",
+  "colorPrimaryActive": "--dt-primary-color3",
+  "colorPrimaryTextHover": "--dt-primary-color2",
+  "colorPrimaryTextActive": "--dt-primary-color3",
+  "colorSuccess": "--dt-success-color1",
+  "colorSuccessBg": "--dt-success-color6",
+  "colorSuccessBgHover": "--dt-success-color4",
+  "colorSuccessBorder": "--dt-success-color1",
+  "colorSuccessBorderHover": "--dt-success-color2",
+  "colorSuccessHover": "--dt-success-color2",
+  "colorSuccessActive": "--dt-success-color3",
+  "colorSuccessTextHover": "--dt-success-color2",
+  "colorSuccessTextActive": "--dt-success-color3",
+  "colorWarning": "--dt-warning-color1",
+  "colorWarningBg": "--dt-warning-color6",
+  "colorWarningBgHover": "--dt-warning-color5",
+  "colorWarningBorder": "--dt-warning-color1",
+  "colorWarningBorderHover": "--dt-warning-color2",
+  "colorWarningHover": "--dt-warning-color2",
+  "colorWarningActive": "--dt-warning-color3",
+  "colorWarningTextActive": "--dt-warning-color3",
+  "colorWarningText": "--dt-warning-color1",
+  "colorWarningTextHover": "--dt-warning-color2",
+  "colorError": "--dt-error-color1",
+  "colorErrorBg": "--dt-error-color6",
+  "colorErrorBgHover": "--dt-error-color5",
+  "colorErrorBorder": "--dt-error-color1",
+  "colorErrorBorderHover": "--dt-error-color2",
+  "colorErrorHover": "--dt-error-color2",
+  "colorErrorActive": "--dt-error-color3",
+  "colorErrorTextActive": "--dt-error-color3",
+  "colorErrorTextHover": "--dt-error-color2",
+  "colorTextBase": "--dt-text-color1",
+  "colorText": "--dt-text-color1",
+  "colorTextSecondary": "--dt-text-color2",
+  "colorTextTertiary": "--dt-text-color3",
+  "colorTextQuaternary": "--dt-text-color4",
+  "colorBorder": "--dt-line-color2",
+  "colorBorderSecondary": "--dt-line-color1",
+  "colorFill": "--dt-fill-color2",
+  "colorFillSecondary": "--dt-fill-color5",
+  "colorFillTertiary": "--dt-line-color1",
+  "colorFillQuaternary": "--dt-fill-color1",
+  "colorBgLayout": "--dt-fill-color1",
+  borderRadius: 6,
+  components: {
+    "Button": {
+      // "colorTextDisabled": "#ffffff",
+      // "colorBgContainerDisabled": "--dt-primary-color5",
+      // "colorBorder": "--dt-primary-color5",
+      controlOutlineWidth: 0,
+    },
+    "Menu": {
+      "colorSubItemBg": "--dt-fill-color3",
+      "colorBgTextHover": "--dt-fill-color5",
+      "colorItemBgHover": "--dt-line-color1"
+    },
+    "Steps": {
+      "colorBorderSecondary": "--dt-line-color2",
+      "colorFillContent": "--dt-line-color1",
+      "colorError": "--dt-error-color1"
+    },
+    "Segmented": {
+      "colorFillSecondary": "--dt-fill-color5",
+      "colorTextDisabled": "--dt-text-color4",
+      "colorTextLabel": "--dt-text-color2",
+      "colorText": "--dt-text-color1"
+    },
+    "Select": {
+      "colorIcon": "--dt-text-color2",
+      "colorFillSecondary": "--dt-line-color1",
+      "colorText": "--dt-text-color1"
+    },
+    "Pagination": {
+      "colorBgTextHover": "--dt-line-color1"
+    },
+    "Checkbox": {
+      "colorBorder": "--dt-line-color2"
+    },
+    "Table": {
+      "controlItemBgActive": "transparent",
+      "controlItemBgActiveHover": "transparent",
+      'headerBg': '--dt-special-color6',
+    },
+    "Radio": {
+      "colorTextDisabled": "--dt-text-color3",
+    }
+  }
+}
+
+const isDarkTheme = (themeKey) => {
+  if ((themeKey ?? '').indexOf('dark') !== -1) {
+    return 1
+  }
+  return 0
+}
+
+export {
+  antdTokenCorRes,
+  isDarkTheme,
+}

+ 7 - 0
src/utils.jsx

@@ -0,0 +1,7 @@
+const isVite = () => { //console.log(import.meta.env, process.env);
+  return import.meta.env ? true : false;
+}
+
+export {
+  isVite,
+}

+ 86 - 0
webpack.config.js

@@ -0,0 +1,86 @@
+const path = require('path');
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const webpack = require('webpack')
+
+module.exports = {
+  mode: 'production',
+  // devtool: "source-map",
+  entry: path.join(__dirname, "./src/export.js"),
+  output: {
+    filename: 'index.js',
+    path: path.resolve(__dirname, 'lib'),
+    //意思是把我们的输出作为组件,没有这个在react项目中识别不到export导出的组件
+    library: {
+      type: 'umd', // 以库的形式导出入口文件时,输出的类型,这里是通过umd的方式来暴露library,适用于使用方import的方式导入npm包
+    }
+  },
+  resolve: {
+    // 设置别名
+    extensions: ["*", ".js", ".jsx"],// 配置会将没指定拓展名的文件按如下类型查找匹配
+    alias: {
+      '@': path.resolve(__dirname, 'src'),
+      antd: path.resolve(__dirname, "node_modules/antd"),
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.(css|scss)$/i,
+        use: ["style-loader", MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
+      },
+      {
+        test: /\.(js|jsx)$/,
+        loader: 'babel-loader',
+        include: [path.resolve('src')],// 只在src文件夹下查找
+        exclude: /(node_modules|dist|build|example)/
+      },
+      {
+        test: /(\.module)?.(sass|scss)$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[path][name]__[local]--[hash:base64:5]',
+              },
+              sourceMap: true,
+            },
+          },
+          'sass-loader',
+        ],
+      },
+      {
+        test: /(\.module)?.(less)$/,
+        use: [
+          'style-loader',
+          {
+            loader: 'css-loader',
+            options: {
+              modules: {
+                localIdentName: '[path][name]__[local]--[hash:base64:5]',
+              },
+              sourceMap: true,
+            },
+          },
+          'less-loader',
+        ],
+      },
+    ]
+  },
+  plugins: [
+    new MiniCssExtractPlugin({
+      filename: "index.css" // 提取后的css的文件名
+    }),
+    new webpack.ProvidePlugin({
+      "React": "react",
+    }),
+  ],
+  // externalsPresets: { node: true },
+  //打包时不将以下依赖打包进index.js,需要引用组件的项目提前npm好
+  externals: [{
+    'react': 'react',
+    'react-dom': 'react-dom',
+  },
+  ]
+}