From f4738b12d86c5c80e49787ecacd32713a4f3e4cb Mon Sep 17 00:00:00 2001 From: smily <3439202112@qq.com> Date: Tue, 22 Aug 2023 01:49:42 +0800 Subject: [PATCH] feat: submit new-ui --- threadpool/console-new/.eslintrc.js | 3 + threadpool/console-new/.gitignore | 2 +- threadpool/console-new/package-lock.json | 223 +++++++++++++++++- threadpool/console-new/package.json | 18 +- threadpool/console-new/src/App.tsx | 27 +-- .../src/components/layout-com/dist/index.js | 99 ++++++++ .../components/layout-com/index.module.less | 19 ++ .../src/components/layout-com/index.tsx | 121 ++++++++++ .../src/components/table/dist/index.js | 71 ++++++ .../src/components/table/index.module.less | 0 .../src/components/table/index.tsx | 88 +++++++ .../src/components/theme-com/index.tsx | 42 ++++ .../console-new/src/context/themeContext.tsx | 17 ++ threadpool/console-new/src/dist/index.js | 15 ++ threadpool/console-new/src/index.module.less | 12 +- threadpool/console-new/src/index.tsx | 8 +- threadpool/console-new/src/logo.svg | 1 - .../console-new/src/page/about/dist/index.js | 6 + .../console-new/src/page/home/index.tsx | 3 +- .../console-new/src/page/login/dist/index.js | 65 +++++ .../console-new/src/page/login/index.tsx | 85 +++++++ .../console-new/src/page/search/dist/index.js | 16 ++ .../console-new/src/page/search/index.tsx | 31 +++ threadpool/console-new/src/react-app-env.d.ts | 86 +++++++ threadpool/console-new/src/route/index.tsx | 5 + .../console-new/src/theme/dark-algorithm.tsx | 33 +++ .../src/theme/default-algnorithm.tsx | 34 +++ .../console-new/src/theme/default-theme.d.ts | 44 ++++ threadpool/console-new/src/theme/index.ts | 85 +++++++ threadpool/console-new/tsconfig.json | 17 +- 30 files changed, 1213 insertions(+), 63 deletions(-) create mode 100644 threadpool/console-new/src/components/layout-com/dist/index.js create mode 100644 threadpool/console-new/src/components/layout-com/index.module.less create mode 100644 threadpool/console-new/src/components/layout-com/index.tsx create mode 100644 threadpool/console-new/src/components/table/dist/index.js create mode 100644 threadpool/console-new/src/components/table/index.module.less create mode 100644 threadpool/console-new/src/components/table/index.tsx create mode 100644 threadpool/console-new/src/components/theme-com/index.tsx create mode 100644 threadpool/console-new/src/context/themeContext.tsx create mode 100644 threadpool/console-new/src/dist/index.js delete mode 100644 threadpool/console-new/src/logo.svg create mode 100644 threadpool/console-new/src/page/about/dist/index.js create mode 100644 threadpool/console-new/src/page/login/dist/index.js create mode 100644 threadpool/console-new/src/page/login/index.tsx create mode 100644 threadpool/console-new/src/page/search/dist/index.js create mode 100644 threadpool/console-new/src/page/search/index.tsx create mode 100644 threadpool/console-new/src/route/index.tsx create mode 100644 threadpool/console-new/src/theme/dark-algorithm.tsx create mode 100644 threadpool/console-new/src/theme/default-algnorithm.tsx create mode 100644 threadpool/console-new/src/theme/default-theme.d.ts create mode 100644 threadpool/console-new/src/theme/index.ts diff --git a/threadpool/console-new/.eslintrc.js b/threadpool/console-new/.eslintrc.js index 1977fd37..99e7f2d6 100644 --- a/threadpool/console-new/.eslintrc.js +++ b/threadpool/console-new/.eslintrc.js @@ -1,3 +1,5 @@ +const { off } = require("process"); + module.exports = { env: { browser: true, @@ -20,6 +22,7 @@ module.exports = { eqeqeq: 2, 'no-alert': 2, 'no-undef': 2, + 'prefer-const': 0, 'no-use-before-define': 2, 'react-hooks/exhaustive-deps': 2, '@typescript-eslint/no-explicit-any': 0, diff --git a/threadpool/console-new/.gitignore b/threadpool/console-new/.gitignore index 4d29575d..58b21fe5 100644 --- a/threadpool/console-new/.gitignore +++ b/threadpool/console-new/.gitignore @@ -9,7 +9,7 @@ /coverage # production -/build +# /build # misc .DS_Store diff --git a/threadpool/console-new/package-lock.json b/threadpool/console-new/package-lock.json index 36485054..6d1ea7b4 100644 --- a/threadpool/console-new/package-lock.json +++ b/threadpool/console-new/package-lock.json @@ -1,33 +1,33 @@ { - "name": "hippo4j-ui-new", + "name": "threadpool-console", "version": "0.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { - "name": "hippo4j-ui-new", + "name": "threadpool-console", "version": "0.1.0", "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", - "@types/jest": "^27.5.2", - "@types/node": "^16.18.26", - "@types/react": "^18.2.6", - "@types/react-dom": "^18.2.4", "antd": "^5.4.7", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.1", "react-scripts": "5.0.1", - "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, "devDependencies": { "@craco/craco": "^7.1.0", + "@types/jest": "^27.5.2", + "@types/node": "^16.18.26", + "@types/react": "^18.2.6", + "@types/react-dom": "^18.2.4", "@typescript-eslint/eslint-plugin": "^5.59.2", "@typescript-eslint/parser": "^5.59.2", "babel-eslint": "^10.1.0", + "craco-alias": "^3.0.1", "craco-css-modules": "^1.0.5", "craco-less": "^2.0.0", "craco-sass-resources-loader": "^1.1.0", @@ -37,10 +37,12 @@ "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.32.2", - "husky": "^8.0.3", + "husky": "^8.0.0", "less-loader": "^11.1.0", "lint-staged": "^13.2.2", - "prettier": "^2.8.8" + "prettier": "^2.8.8", + "styled-components": "^6.0.0-rc.1", + "typescript": "^4.9.5" } }, "node_modules/@adobe/css-tools": { @@ -149,6 +151,53 @@ "ajv": ">=8" } }, + "node_modules/@babel/cli": { + "version": "7.22.5", + "resolved": "https://registry.npmmirror.com/@babel/cli/-/cli-7.22.5.tgz", + "integrity": "sha512-N5d7MjzwsQ2wppwjhrsicVDhJSqF9labEP/swYiHhio4Ca2XjEehpgPmerjnLQl7BPE59BLud0PTWGYwqFl/cQ==", + "dev": true, + "dependencies": { + "@jridgewell/trace-mapping": "^0.3.17", + "commander": "^4.0.1", + "convert-source-map": "^1.1.0", + "fs-readdir-recursive": "^1.1.0", + "glob": "^7.2.0", + "make-dir": "^2.1.0", + "slash": "^2.0.0" + }, + "bin": { + "babel": "bin/babel.js", + "babel-external-helpers": "bin/babel-external-helpers.js" + }, + "engines": { + "node": ">=6.9.0" + }, + "optionalDependencies": { + "@nicolo-ribaudo/chokidar-2": "2.1.8-no-fsevents.3", + "chokidar": "^3.4.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, + "node_modules/@babel/cli/node_modules/commander": { + "version": "4.1.1", + "resolved": "https://registry.npmmirror.com/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==", + "dev": true, + "engines": { + "node": ">= 6" + } + }, + "node_modules/@babel/cli/node_modules/slash": { + "version": "2.0.0", + "resolved": "https://registry.npmmirror.com/slash/-/slash-2.0.0.tgz", + "integrity": "sha512-ZYKh3Wh2z1PpEXWr0MpSBZ0V6mZHAQfYevttO11c51CaWjGTaadiKZ+wVt1PbMlDV5qhMFslpZCemhwOK7C89A==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/@babel/code-frame": { "version": "7.22.5", "resolved": "https://registry.npmmirror.com/@babel/code-frame/-/code-frame-7.22.5.tgz", @@ -699,6 +748,21 @@ "@babel/core": "^7.13.0" } }, + "node_modules/@babel/plugin-external-helpers": { + "version": "7.22.5", + "resolved": "https://registry.npmmirror.com/@babel/plugin-external-helpers/-/plugin-external-helpers-7.22.5.tgz", + "integrity": "sha512-ngnNEWxmykPk82mH4ajZT0qTztr3Je6hrMuKAslZVM8G1YZTENJSYwrIGtt6KOtznug3exmAtF4so/nPqJuA4A==", + "dev": true, + "dependencies": { + "@babel/helper-plugin-utils": "^7.22.5" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-proposal-class-properties": { "version": "7.18.6", "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz", @@ -762,6 +826,25 @@ "@babel/core": "^7.0.0-0" } }, + "node_modules/@babel/plugin-proposal-object-rest-spread": { + "version": "7.20.7", + "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.20.7.tgz", + "integrity": "sha512-d2S98yCiLxDVmBmE8UjGcfPvNEUbA1U5q5WxaWFUGRzJSVAZqm5W6MbPct0jxnegUZ0niLeNX+IOzEs7wYg9Dg==", + "dev": true, + "dependencies": { + "@babel/compat-data": "^7.20.5", + "@babel/helper-compilation-targets": "^7.20.7", + "@babel/helper-plugin-utils": "^7.20.2", + "@babel/plugin-syntax-object-rest-spread": "^7.8.3", + "@babel/plugin-transform-parameters": "^7.20.7" + }, + "engines": { + "node": ">=6.9.0" + }, + "peerDependencies": { + "@babel/core": "^7.0.0-0" + } + }, "node_modules/@babel/plugin-proposal-optional-chaining": { "version": "7.21.0", "resolved": "https://registry.npmmirror.com/@babel/plugin-proposal-optional-chaining/-/plugin-proposal-optional-chaining-7.21.0.tgz", @@ -2454,6 +2537,21 @@ "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz", "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==" }, + "node_modules/@emotion/is-prop-valid": { + "version": "1.2.1", + "resolved": "https://registry.npmmirror.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz", + "integrity": "sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==", + "dev": true, + "dependencies": { + "@emotion/memoize": "^0.8.1" + } + }, + "node_modules/@emotion/memoize": { + "version": "0.8.1", + "resolved": "https://registry.npmmirror.com/@emotion/memoize/-/memoize-0.8.1.tgz", + "integrity": "sha512-W2P2c/VRW1/1tLox0mVUalvnWXxavmv/Oum2aPsRcoDJuob75FC3Y8FbpfLwUegRcxINtGUMPq0tFCvYNTBXNA==", + "dev": true + }, "node_modules/@emotion/unitless": { "version": "0.7.5", "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.7.5.tgz", @@ -3019,6 +3117,13 @@ "resolved": "https://registry.npmmirror.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz", "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A==" }, + "node_modules/@nicolo-ribaudo/chokidar-2": { + "version": "2.1.8-no-fsevents.3", + "resolved": "https://registry.npmmirror.com/@nicolo-ribaudo/chokidar-2/-/chokidar-2-2.1.8-no-fsevents.3.tgz", + "integrity": "sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==", + "dev": true, + "optional": true + }, "node_modules/@nicolo-ribaudo/eslint-scope-5-internals": { "version": "5.1.1-v1", "resolved": "https://registry.npmmirror.com/@nicolo-ribaudo/eslint-scope-5-internals/-/eslint-scope-5-internals-5.1.1-v1.tgz", @@ -3938,6 +4043,12 @@ "resolved": "https://registry.npmmirror.com/@types/stack-utils/-/stack-utils-2.0.1.tgz", "integrity": "sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==" }, + "node_modules/@types/stylis": { + "version": "4.2.0", + "resolved": "https://registry.npmmirror.com/@types/stylis/-/stylis-4.2.0.tgz", + "integrity": "sha512-n4sx2bqL0mW1tvDf/loQ+aMX7GQD3lc3fkCMC55VFNDu/vBOabO+LTIeXKM14xK0ppk5TUGcWRjiSpIlUpghKw==", + "dev": true + }, "node_modules/@types/testing-library__jest-dom": { "version": "5.14.6", "resolved": "https://registry.npmmirror.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.6.tgz", @@ -5293,6 +5404,12 @@ "node": ">= 6" } }, + "node_modules/camelize": { + "version": "1.0.1", + "resolved": "https://registry.npmmirror.com/camelize/-/camelize-1.0.1.tgz", + "integrity": "sha512-dU+Tx2fsypxTgtLoE36npi3UqcjSSMNYfkqgmoEhtZrraP5VWq0K7FkWVTYa8eMPtnU/G2txVsfdCJTn9uzpuQ==", + "dev": true + }, "node_modules/caniuse-api": { "version": "3.0.0", "resolved": "https://registry.npmmirror.com/caniuse-api/-/caniuse-api-3.0.0.tgz", @@ -5831,6 +5948,13 @@ "typescript": ">=3" } }, + "node_modules/craco-alias": { + "version": "3.0.1", + "resolved": "https://registry.npmmirror.com/craco-alias/-/craco-alias-3.0.1.tgz", + "integrity": "sha512-N+Qaf/Gr/f3o5ZH2TQjMu5NhR9PnT1ZYsfejpNvZPpB0ujdrhsSr4Ct6GVjnV5ostCVquhTKJpIVBKyL9qDQYA==", + "deprecated": "Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.", + "dev": true + }, "node_modules/craco-css-modules": { "version": "1.0.5", "resolved": "https://registry.npmmirror.com/craco-css-modules/-/craco-css-modules-1.0.5.tgz", @@ -5933,6 +6057,15 @@ "postcss": "^8.4" } }, + "node_modules/css-color-keywords": { + "version": "1.0.0", + "resolved": "https://registry.npmmirror.com/css-color-keywords/-/css-color-keywords-1.0.0.tgz", + "integrity": "sha512-FyyrDHZKEjXDpNJYvVsV960FiqQyXc/LlYmsxl2BcdMb2WPx0OGRVgTg55rPSyLSNMqP52R9r8geSp7apN3Ofg==", + "dev": true, + "engines": { + "node": ">=4" + } + }, "node_modules/css-declaration-sorter": { "version": "6.4.0", "resolved": "https://registry.npmmirror.com/css-declaration-sorter/-/css-declaration-sorter-6.4.0.tgz", @@ -6087,6 +6220,17 @@ "resolved": "https://registry.npmmirror.com/css-select-base-adapter/-/css-select-base-adapter-0.1.1.tgz", "integrity": "sha512-jQVeeRG70QI08vSTwf1jHxp74JoZsr2XSgETae8/xC8ovSnL2WF87GTLO86Sbwdt2lK4Umg4HnnwMO4YF3Ce7w==" }, + "node_modules/css-to-react-native": { + "version": "3.2.0", + "resolved": "https://registry.npmmirror.com/css-to-react-native/-/css-to-react-native-3.2.0.tgz", + "integrity": "sha512-e8RKaLXMOFii+02mOlqwjbD00KSEKqblnpO9e++1aXS1fPQOpS1YoqdVHBqPjHNoxeF2mimzVqawm2KCbEdtHQ==", + "dev": true, + "dependencies": { + "camelize": "^1.0.0", + "css-color-keywords": "^1.0.0", + "postcss-value-parser": "^4.0.2" + } + }, "node_modules/css-tree": { "version": "1.0.0-alpha.37", "resolved": "https://registry.npmmirror.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz", @@ -8159,6 +8303,12 @@ "resolved": "https://registry.npmmirror.com/fs-monkey/-/fs-monkey-1.0.4.tgz", "integrity": "sha512-INM/fWAxMICjttnD0DX1rBvinKskj5G1w+oy/pnm9u/tSlnBrzFonJMcalKJ30P8RRsPzKcCG7Q8l0jx5Fh9YQ==" }, + "node_modules/fs-readdir-recursive": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/fs-readdir-recursive/-/fs-readdir-recursive-1.1.0.tgz", + "integrity": "sha512-GNanXlVr2pf02+sPN40XN8HG+ePaNcvM0q5mZBd668Obwb0yD5GiUbZOFgwn8kGMY6I3mdyDJzieUy3PTYyTRA==", + "dev": true + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmmirror.com/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -11074,7 +11224,6 @@ "resolved": "https://registry.npmmirror.com/make-dir/-/make-dir-2.1.0.tgz", "integrity": "sha512-LS9X+dc8KLxXCb8dni79fLIIUA5VyZoyjSMCwTluaXA0o27cCK0bhXkpgw+sTXVpPy/lSO57ilRixqk0vDmtRA==", "dev": true, - "optional": true, "dependencies": { "pify": "^4.0.1", "semver": "^5.6.0" @@ -11088,7 +11237,6 @@ "resolved": "https://registry.npmmirror.com/semver/-/semver-5.7.1.tgz", "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==", "dev": true, - "optional": true, "bin": { "semver": "bin/semver" } @@ -11864,7 +12012,6 @@ "resolved": "https://registry.npmmirror.com/pify/-/pify-4.0.1.tgz", "integrity": "sha512-uB80kBFb/tfd68bVleG9T5GGsGPjJrLAUpR5PZIrhBnIaRTQRjqdJSsIKkOP6OAIFbj7GOrcudc5pNjZ+geV2g==", "dev": true, - "optional": true, "engines": { "node": ">=6" } @@ -14859,6 +15006,12 @@ "node": ">=8" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmmirror.com/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==", + "dev": true + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmmirror.com/shebang-command/-/shebang-command-2.0.0.tgz", @@ -15278,6 +15431,51 @@ "webpack": "^5.0.0" } }, + "node_modules/styled-components": { + "version": "6.0.0-rc.6", + "resolved": "https://registry.npmmirror.com/styled-components/-/styled-components-6.0.0-rc.6.tgz", + "integrity": "sha512-A+LmomjXH1TZp5WZIvC1KiWyYJB+DgUzv4qMvoj8WSFdteZdosAbPIihlrSjcaITzqFHxG6MBq4kZhHeI8EkEA==", + "dev": true, + "dependencies": { + "@babel/cli": "^7.21.0", + "@babel/core": "^7.21.0", + "@babel/helper-module-imports": "^7.18.6", + "@babel/plugin-external-helpers": "^7.18.6", + "@babel/plugin-proposal-class-properties": "^7.18.6", + "@babel/plugin-proposal-object-rest-spread": "^7.20.7", + "@babel/preset-env": "^7.20.2", + "@babel/preset-react": "^7.18.6", + "@babel/preset-typescript": "^7.21.0", + "@babel/traverse": "^7.21.2", + "@emotion/is-prop-valid": "^1.2.1", + "@emotion/unitless": "^0.8.0", + "@types/stylis": "^4.0.2", + "css-to-react-native": "^3.2.0", + "postcss": "^8.4.23", + "shallowequal": "^1.1.0", + "stylis": "^4.2.0", + "tslib": "^2.5.0" + }, + "engines": { + "node": ">= 16" + }, + "peerDependencies": { + "babel-plugin-styled-components": ">= 2", + "react": ">= 16.8.0", + "react-dom": ">= 16.8.0" + }, + "peerDependenciesMeta": { + "babel-plugin-styled-components": { + "optional": true + } + } + }, + "node_modules/styled-components/node_modules/@emotion/unitless": { + "version": "0.8.1", + "resolved": "https://registry.npmmirror.com/@emotion/unitless/-/unitless-0.8.1.tgz", + "integrity": "sha512-KOEGMu6dmJZtpadb476IsZBclKvILjopjUii3V+7MnXIQCYh8W3NgNcgwo21n9LXZX6EDIKvqfjYxXebDwxKmQ==", + "dev": true + }, "node_modules/stylehacks": { "version": "5.1.1", "resolved": "https://registry.npmmirror.com/stylehacks/-/stylehacks-5.1.1.tgz", @@ -15996,6 +16194,7 @@ "version": "4.9.5", "resolved": "https://registry.npmmirror.com/typescript/-/typescript-4.9.5.tgz", "integrity": "sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==", + "dev": true, "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" diff --git a/threadpool/console-new/package.json b/threadpool/console-new/package.json index 440304c6..18791c0f 100644 --- a/threadpool/console-new/package.json +++ b/threadpool/console-new/package.json @@ -1,21 +1,16 @@ { - "name": "hippo4j-ui-new", + "name": "threadpool-console", "version": "0.1.0", "private": true, "dependencies": { "@testing-library/jest-dom": "^5.16.5", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", - "@types/jest": "^27.5.2", - "@types/node": "^16.18.26", - "@types/react": "^18.2.6", - "@types/react-dom": "^18.2.4", "antd": "^5.4.7", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router-dom": "^6.11.1", "react-scripts": "5.0.1", - "typescript": "^4.9.5", "web-vitals": "^2.1.4" }, "scripts": { @@ -46,9 +41,14 @@ }, "devDependencies": { "@craco/craco": "^7.1.0", + "@types/jest": "^27.5.2", + "@types/node": "^16.18.26", + "@types/react": "^18.2.6", + "@types/react-dom": "^18.2.4", "@typescript-eslint/eslint-plugin": "^5.59.2", "@typescript-eslint/parser": "^5.59.2", "babel-eslint": "^10.1.0", + "craco-alias": "^3.0.1", "craco-css-modules": "^1.0.5", "craco-less": "^2.0.0", "craco-sass-resources-loader": "^1.1.0", @@ -58,10 +58,12 @@ "eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.32.2", - "husky": "^8.0.3", + "husky": "^8.0.0", "less-loader": "^11.1.0", "lint-staged": "^13.2.2", - "prettier": "^2.8.8" + "prettier": "^2.8.8", + "styled-components": "^6.0.0-rc.1", + "typescript": "^4.9.5" }, "cracoConfig": "./build/craco.config.js", "lint-staged": { diff --git a/threadpool/console-new/src/App.tsx b/threadpool/console-new/src/App.tsx index 3261c1ae..f9304102 100644 --- a/threadpool/console-new/src/App.tsx +++ b/threadpool/console-new/src/App.tsx @@ -1,29 +1,8 @@ -import { Layout } from 'antd'; -import { Routes, Route, Link } from 'react-router-dom'; -import Home from './page/home'; -import About from './page/about'; -import style from './index.module.less'; - -const { Header, Sider, Content } = Layout; +import React from 'react'; +import LayoutCom from './components/layout-com'; function App() { - return ( -
-
header
- - - home - about - - - - - - - - -
- ); + return ; } export default App; diff --git a/threadpool/console-new/src/components/layout-com/dist/index.js b/threadpool/console-new/src/components/layout-com/dist/index.js new file mode 100644 index 00000000..03f99139 --- /dev/null +++ b/threadpool/console-new/src/components/layout-com/dist/index.js @@ -0,0 +1,99 @@ +"use strict"; +exports.__esModule = true; +var react_1 = require("react"); +var styled_components_1 = require("styled-components"); +var antd_1 = require("antd"); +var react_router_dom_1 = require("react-router-dom"); +var home_1 = require("@/page/home"); +var about_1 = require("@/page/about"); +var login_1 = require("@/page/login"); +var index_module_less_1 = require("./index.module.less"); +var table_1 = require("../table"); +var search_1 = require("@/page/search"); +var icons_1 = require("@ant-design/icons"); +var themeContext_1 = require("@/context/themeContext"); +var Header = antd_1.Layout.Header, Sider = antd_1.Layout.Sider, Content = antd_1.Layout.Content; +var items = [ + { + label: react_1["default"].createElement("a", { href: "/about" }, "Navigation One"), + key: 'mail', + icon: react_1["default"].createElement(icons_1.MailOutlined, null) + }, + { + label: 'Navigation Two', + key: 'app', + icon: react_1["default"].createElement(icons_1.AppstoreOutlined, null), + disabled: true + }, + { + label: react_1["default"].createElement("a", { href: "/about" }, "Navigation One"), + key: 'app', + icon: react_1["default"].createElement(icons_1.AppstoreOutlined, null) + }, + { + label: 'Navigation Three - Submenu', + key: 'SubMenu', + icon: react_1["default"].createElement(icons_1.SettingOutlined, null), + children: [ + { + type: 'group', + label: 'Item 1', + children: [ + { + label: 'Option 1', + key: 'setting:1' + }, + { + label: 'Option 2', + key: 'setting:2' + }, + ] + }, + { + type: 'group', + label: 'Item 2', + children: [ + { + label: 'Option 3', + key: 'setting:3' + }, + { + label: 'Option 4', + key: 'setting:4' + }, + ] + }, + ] + }, + { + label: (react_1["default"].createElement("a", { href: "https://ant.design", target: "_blank", rel: "noopener noreferrer" }, "Navigation Four - Link")), + key: 'alipay' + }, +]; +var LayoutCom = function () { + var myThemes = react_1.useContext(styled_components_1.ThemeContext); + var _a = react_1.useContext(themeContext_1.MyThemeContext), themeName = _a.themeName, setThemeName = _a.setThemeName; + var _b = react_1.useState('mail'), current = _b[0], setCurrent = _b[1]; + var onClick = function (e) { + console.log('click ', e); + setCurrent(e.key); + }; + var _c = react_1.useState(false), isDark = _c[0], setIsDark = _c[1]; + react_1.useEffect(function () { + isDark ? setThemeName(themeContext_1.THEME_NAME.DARK) : setThemeName(themeContext_1.THEME_NAME.DEFAULT); + }, [isDark, setThemeName]); + return (react_1["default"].createElement("main", { className: index_module_less_1["default"].container, style: { backgroundColor: myThemes.backgroundColor.bg1 } }, + react_1["default"].createElement(Header, { className: index_module_less_1["default"].header, style: { backgroundColor: myThemes.backgroundColor.bg1 } }, + react_1["default"].createElement(antd_1.Button, { onClick: function () { return setIsDark(function (pre) { return !pre; }); } }, "\u5207\u6362\u4E3B\u9898")), + react_1["default"].createElement(antd_1.Layout, null, + react_1["default"].createElement(Sider, { className: index_module_less_1["default"].sider, style: { backgroundColor: myThemes.backgroundColor.bg1 } }, + react_1["default"].createElement(antd_1.Menu, { onClick: onClick, selectedKeys: [current], mode: "inline", items: items })), + react_1["default"].createElement(Content, { className: index_module_less_1["default"].content }, + react_1["default"].createElement(react_router_dom_1.Routes, null, + react_1["default"].createElement(react_router_dom_1.Route, { path: "/Search", Component: search_1["default"] }), + react_1["default"].createElement(react_router_dom_1.Route, { path: "/Table", Component: table_1["default"] }), + react_1["default"].createElement(react_router_dom_1.Route, { path: "/Login", Component: login_1["default"] }), + react_1["default"].createElement(react_router_dom_1.Route, { path: "/home", Component: home_1["default"] }), + react_1["default"].createElement(react_router_dom_1.Route, { path: "/about", Component: about_1["default"] })))))); +}; +exports["default"] = LayoutCom; diff --git a/threadpool/console-new/src/components/layout-com/index.module.less b/threadpool/console-new/src/components/layout-com/index.module.less new file mode 100644 index 00000000..07685ae0 --- /dev/null +++ b/threadpool/console-new/src/components/layout-com/index.module.less @@ -0,0 +1,19 @@ +.container { + width: 100vw; + height: 100vh; + background-color: #eee; + color: #fff; + .header { + height: 48px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03); + } + .sider { + height: calc(100vh - 48px); + display: flex; + flex-direction: column; + justify-content: center; + } + .content { + margin: 24px; + } +} diff --git a/threadpool/console-new/src/components/layout-com/index.tsx b/threadpool/console-new/src/components/layout-com/index.tsx new file mode 100644 index 00000000..67855f54 --- /dev/null +++ b/threadpool/console-new/src/components/layout-com/index.tsx @@ -0,0 +1,121 @@ +import React, { useEffect, useState, useContext } from 'react'; +import { DefaultTheme, ThemeContext } from 'styled-components'; + +import { Layout, Button, Menu, Table } from 'antd'; +import { Routes, Route, Link } from 'react-router-dom'; +import Home from '@/page/home'; +import About from '@/page/about'; +import Login from '@/page/login'; +import style from './index.module.less'; +import TableBox from '../table'; +import Search from '@/page/search'; + +import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; +import { THEME_NAME, MyThemeContext } from '@/context/themeContext'; + +const { Header, Sider, Content } = Layout; + +interface ThemeProps { + children: React.ReactNode; +} + +const items = [ + { + label: Navigation One, + key: 'mail', + icon: , + }, + { + label: 'Navigation Two', + key: 'app', + icon: , + disabled: true, + }, + { + label: Navigation One, + key: 'app', + icon: , + }, + { + label: 'Navigation Three - Submenu', + key: 'SubMenu', + icon: , + children: [ + { + type: 'group', + label: 'Item 1', + children: [ + { + label: 'Option 1', + key: 'setting:1', + }, + { + label: 'Option 2', + key: 'setting:2', + }, + ], + }, + { + type: 'group', + label: 'Item 2', + children: [ + { + label: 'Option 3', + key: 'setting:3', + }, + { + label: 'Option 4', + key: 'setting:4', + }, + ], + }, + ], + }, + { + label: ( + + Navigation Four - Link + + ), + key: 'alipay', + }, +]; + +const LayoutCom = () => { + const myThemes: DefaultTheme = useContext(ThemeContext); + const { themeName, setThemeName } = useContext(MyThemeContext); + const [current, setCurrent] = useState('mail'); + const onClick = (e: any) => { + console.log('click ', e); + setCurrent(e.key); + }; + const [isDark, setIsDark] = useState(false); + + useEffect(() => { + isDark ? setThemeName(THEME_NAME.DARK) : setThemeName(THEME_NAME.DEFAULT); + }, [isDark, setThemeName]); + + return ( +
+
+ +
+ + + + + + + + + + + + + + +
+ ); +}; + +export default LayoutCom; diff --git a/threadpool/console-new/src/components/table/dist/index.js b/threadpool/console-new/src/components/table/dist/index.js new file mode 100644 index 00000000..92c90016 --- /dev/null +++ b/threadpool/console-new/src/components/table/dist/index.js @@ -0,0 +1,71 @@ +"use strict"; +exports.__esModule = true; +var react_1 = require("react"); +var antd_1 = require("antd"); +var columns = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + render: function (text) { return react_1["default"].createElement("a", null, text); } + }, + { + title: 'Age', + dataIndex: 'age', + key: 'age' + }, + { + title: 'Address', + dataIndex: 'address', + key: 'address' + }, + { + title: 'Tags', + key: 'tags', + dataIndex: 'tags', + render: function (_, _a) { + var tags = _a.tags; + return (react_1["default"].createElement(react_1["default"].Fragment, null, tags.map(function (tag) { + var color = tag.length > 5 ? 'geekblue' : 'green'; + if (tag === 'loser') { + color = 'volcano'; + } + return (react_1["default"].createElement(antd_1.Tag, { color: color, key: tag }, tag.toUpperCase())); + }))); + } + }, + { + title: 'Action', + key: 'action', + render: function (_, record) { return (react_1["default"].createElement(antd_1.Space, { size: "middle" }, + react_1["default"].createElement("a", null, + "Invite ", + record.name), + react_1["default"].createElement("a", null, "Delete"))); } + }, +]; +var data = [ + { + key: '1', + name: 'John Brown', + age: 32, + address: 'New York No. 1 Lake Park', + tags: ['nice', 'developer'] + }, + { + key: '2', + name: 'Jim Green', + age: 42, + address: 'London No. 1 Lake Park', + tags: ['loser'] + }, + { + key: '3', + name: 'Joe Black', + age: 32, + address: 'Sydney No. 1 Lake Park', + tags: ['cool', 'teacher'] + }, +]; +var TableBox = function () { return react_1["default"].createElement(antd_1.Table, { columns: columns, dataSource: data }); }; +exports["default"] = TableBox; diff --git a/threadpool/console-new/src/components/table/index.module.less b/threadpool/console-new/src/components/table/index.module.less new file mode 100644 index 00000000..e69de29b diff --git a/threadpool/console-new/src/components/table/index.tsx b/threadpool/console-new/src/components/table/index.tsx new file mode 100644 index 00000000..ed5df78c --- /dev/null +++ b/threadpool/console-new/src/components/table/index.tsx @@ -0,0 +1,88 @@ +import React from 'react'; +import { Space, Table, Tag } from 'antd'; +import type { ColumnsType } from 'antd/es/table'; + +interface DataType { + key: string; + name: string; + age: number; + address: string; + tags: string[]; +} + +const columns: ColumnsType = [ + { + title: 'Name', + dataIndex: 'name', + key: 'name', + render: text => {text}, + }, + { + title: 'Age', + dataIndex: 'age', + key: 'age', + }, + { + title: 'Address', + dataIndex: 'address', + key: 'address', + }, + { + title: 'Tags', + key: 'tags', + dataIndex: 'tags', + render: (_, { tags }) => ( + <> + {tags.map(tag => { + let color = tag.length > 5 ? 'geekblue' : 'green'; + if (tag === 'loser') { + color = 'volcano'; + } + return ( + + {tag.toUpperCase()} + + ); + })} + + ), + }, + { + title: 'Action', + key: 'action', + render: (_, record) => ( + + Invite {record.name} + Delete + + ), + }, +]; + +const data: DataType[] = [ + { + key: '1', + name: 'John Brown', + age: 32, + address: 'New York No. 1 Lake Park', + tags: ['nice', 'developer'], + }, + { + key: '2', + name: 'Jim Green', + age: 42, + address: 'London No. 1 Lake Park', + tags: ['loser'], + }, + { + key: '3', + name: 'Joe Black', + age: 32, + address: 'Sydney No. 1 Lake Park', + tags: ['cool', 'teacher'], + }, +]; + +const TableBox: React.FC = () => ; + +export default TableBox; diff --git a/threadpool/console-new/src/components/theme-com/index.tsx b/threadpool/console-new/src/components/theme-com/index.tsx new file mode 100644 index 00000000..5d1bca65 --- /dev/null +++ b/threadpool/console-new/src/components/theme-com/index.tsx @@ -0,0 +1,42 @@ +import React, { useContext, useEffect, useState } from 'react'; +import { DefaultTheme, ThemeProvider, useTheme } from 'styled-components'; +import { ConfigProvider, theme } from 'antd'; + +import { darkAlgorithm } from '../../theme/dark-algorithm'; +import { defaultAlgorithm } from '../../theme/default-algnorithm'; +import { lightDefaultTheme, darkDefaultTheme } from '../../theme'; +import { MyThemeContext, THEME_NAME } from '../../context/themeContext'; +import zhCN from 'antd/es/locale/zh_CN'; + +interface ThemeProps { + children: React.ReactNode; +} + +const ThemeComponent = ({ children }: ThemeProps) => { + const [themes, setThemes] = useState(defaultAlgorithm); + const [myThemes, setMyThemes] = useState(lightDefaultTheme); + const { themeName } = useContext(MyThemeContext); + + const changeColor = (themeName: THEME_NAME) => { + if (themeName === THEME_NAME.DARK) { + darkAlgorithm.algorithm = theme.darkAlgorithm; + setThemes(darkAlgorithm); + setMyThemes(darkDefaultTheme); + } else { + defaultAlgorithm.algorithm = theme.defaultAlgorithm; + setThemes(defaultAlgorithm); + setMyThemes(lightDefaultTheme); + } + }; + + useEffect(() => { + changeColor(themeName); + }, [themeName]); + + return ( + + {children} + + ); +}; +export default ThemeComponent; diff --git a/threadpool/console-new/src/context/themeContext.tsx b/threadpool/console-new/src/context/themeContext.tsx new file mode 100644 index 00000000..2b1bb54f --- /dev/null +++ b/threadpool/console-new/src/context/themeContext.tsx @@ -0,0 +1,17 @@ +import React, { createContext, useState, ReactNode } from 'react'; + +export enum THEME_NAME { + DEFAULT = 'default', + DARK = 'dark', +} + +export const MyThemeContext = createContext<{ themeName: string; setThemeName: (name: THEME_NAME) => void } | null>( + null +); + +export const ThemeStore: React.FC<{ + children: ReactNode; +}> = ({ children }) => { + const [themeName, setThemeName] = useState(THEME_NAME.DEFAULT); + return {children}; +}; diff --git a/threadpool/console-new/src/dist/index.js b/threadpool/console-new/src/dist/index.js new file mode 100644 index 00000000..129fe09e --- /dev/null +++ b/threadpool/console-new/src/dist/index.js @@ -0,0 +1,15 @@ +"use strict"; +exports.__esModule = true; +var react_1 = require("react"); +var client_1 = require("react-dom/client"); +var App_1 = require("./App"); +var react_router_dom_1 = require("react-router-dom"); +var themeContext_1 = require("./context/themeContext"); +var theme_com_1 = require("./components/theme-com"); +require("antd/dist/reset.css"); +var root = client_1["default"].createRoot(document.getElementById('root')); +root.render(react_1["default"].createElement(react_1["default"].StrictMode, null, + react_1["default"].createElement(react_router_dom_1.BrowserRouter, null, + react_1["default"].createElement(themeContext_1.ThemeStore, null, + react_1["default"].createElement(theme_com_1["default"], null, + react_1["default"].createElement(App_1["default"], null)))))); diff --git a/threadpool/console-new/src/index.module.less b/threadpool/console-new/src/index.module.less index 03ad219b..dbd1729e 100644 --- a/threadpool/console-new/src/index.module.less +++ b/threadpool/console-new/src/index.module.less @@ -4,16 +4,16 @@ background-color: #eee; color: #fff; .header { - height: 64px; - color: #fff; + height: 48px; + box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.01), 0 3px 6px 3px rgba(0, 0, 0, 0.01), 0 2px 6px 0 rgba(0, 0, 0, 0.03); } .sider { - width: 120px; - height: calc(100vh - 64px); - color: #fff; + height: calc(100vh - 48px); + display: flex; + flex-direction: column; + justify-content: center; } .content { margin: 24px; - color: #fff; } } diff --git a/threadpool/console-new/src/index.tsx b/threadpool/console-new/src/index.tsx index e1b9ad27..8388b747 100644 --- a/threadpool/console-new/src/index.tsx +++ b/threadpool/console-new/src/index.tsx @@ -2,6 +2,8 @@ import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import { BrowserRouter } from 'react-router-dom'; +import { ThemeStore } from './context/themeContext'; +import ThemeComponent from './components/theme-com'; import 'antd/dist/reset.css'; const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); @@ -9,7 +11,11 @@ const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) root.render( - + + + + + ); diff --git a/threadpool/console-new/src/logo.svg b/threadpool/console-new/src/logo.svg deleted file mode 100644 index 9dfc1c05..00000000 --- a/threadpool/console-new/src/logo.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/threadpool/console-new/src/page/about/dist/index.js b/threadpool/console-new/src/page/about/dist/index.js new file mode 100644 index 00000000..1f8a64dd --- /dev/null +++ b/threadpool/console-new/src/page/about/dist/index.js @@ -0,0 +1,6 @@ +"use strict"; +exports.__esModule = true; +var About = function () { + return React.createElement("div", { style: { color: 'red' } }, "About"); +}; +exports["default"] = About; diff --git a/threadpool/console-new/src/page/home/index.tsx b/threadpool/console-new/src/page/home/index.tsx index 9743d63b..d1d425d7 100644 --- a/threadpool/console-new/src/page/home/index.tsx +++ b/threadpool/console-new/src/page/home/index.tsx @@ -1,8 +1,9 @@ -import { Button } from 'antd'; +import { Button, Card } from 'antd'; const Home = () => { return (
+
); }; diff --git a/threadpool/console-new/src/page/login/dist/index.js b/threadpool/console-new/src/page/login/dist/index.js new file mode 100644 index 00000000..4d74e3f8 --- /dev/null +++ b/threadpool/console-new/src/page/login/dist/index.js @@ -0,0 +1,65 @@ +"use strict"; +exports.__esModule = true; +var react_1 = require("react"); +var antd_1 = require("antd"); +var Login = function () { + var form = antd_1.Form.useForm()[0]; + var data = { + passwordType: 'password', + capsTooltip: false, + loading: false, + showDialog: false, + redirect: undefined, + otherQuery: {}, + loginForm: { + username: '', + password: '' + }, + loginRules: { + // username: [{ required: true, trigger: 'blur', validator: validateUsername }], + // password: [{ required: true, trigger: 'blur', validator: this.validatePassword }], + } + }; + var validatePassword = function (rule, value, callback) { + if (value.length < 6) { + callback(new Error('The password can not be less than 6 digits')); + } + else if (value.length > 72) { + callback(new Error('The password can not be greater than 72 digits')); + } + else { + // callback(); + } + }; + var onFinish = function () { + var loginParams = { + username: form.getFieldValue('username'), + password: form.getFieldValue('password'), + rememberMe: 1 + }; + data.loginForm.username = form.getFieldValue('username'); + console.log('hhhhhh', loginParams); + }; + var showPwd = function () { + if (data.passwordType === 'password') { + data.passwordType = ''; + } + else { + data.passwordType = 'password'; + } + // $nextTick(() => { + // $refs.password.focus(); + // }); + }; + return (react_1["default"].createElement("div", { className: "login-container" }, + react_1["default"].createElement(antd_1.Form, { name: "loginForm", form: form, onFinish: onFinish, style: { maxWidth: 600 } }, + react_1["default"].createElement("div", { className: "title-container" }, + react_1["default"].createElement("h3", { className: "title" }, "\u4F60\u597D\u5440")), + react_1["default"].createElement(antd_1.Form.Item, { name: "username", label: "\u7528\u6237\u540D", rules: [{ required: true, message: 'Username is required' }] }, + react_1["default"].createElement(antd_1.Input, { placeholder: "\u7528\u6237\u540D" })), + react_1["default"].createElement(antd_1.Form.Item, { name: "password", label: "\u5BC6\u7801", rules: [{ required: true, message: 'Street is required' }] }, + react_1["default"].createElement(antd_1.Input, { placeholder: "\u5BC6\u7801" })), + react_1["default"].createElement(antd_1.Form.Item, { name: "submit" }, + react_1["default"].createElement(antd_1.Button, { type: "primary", htmlType: "submit", className: "login-button" }, "\u767B\u5F55"))))); +}; +exports["default"] = Login; diff --git a/threadpool/console-new/src/page/login/index.tsx b/threadpool/console-new/src/page/login/index.tsx new file mode 100644 index 00000000..23ed4294 --- /dev/null +++ b/threadpool/console-new/src/page/login/index.tsx @@ -0,0 +1,85 @@ +import React, { useEffect, useState, useContext } from 'react'; +import { DefaultTheme, ThemeContext } from 'styled-components'; + +import { Form, Tooltip, Input, Button } from 'antd'; +import { Routes, Route, Link } from 'react-router-dom'; +import style from './index.module.less'; + +import { AppstoreOutlined, MailOutlined, SettingOutlined } from '@ant-design/icons'; +import { THEME_NAME, MyThemeContext } from '@/context/themeContext'; + +const Login = () => { + const [form] = Form.useForm(); + const data = { + passwordType: 'password', + capsTooltip: false, + loading: false, + showDialog: false, + redirect: undefined, + otherQuery: {}, + loginForm: { + username: '', + password: '', + }, + loginRules: { + // username: [{ required: true, trigger: 'blur', validator: validateUsername }], + // password: [{ required: true, trigger: 'blur', validator: this.validatePassword }], + }, + }; + + const validatePassword = (rule: any, value: string | any[], callback: (arg0: Error | undefined) => void) => { + if (value.length < 6) { + callback(new Error('The password can not be less than 6 digits')); + } else if (value.length > 72) { + callback(new Error('The password can not be greater than 72 digits')); + } else { + // callback(); + } + }; + + const onFinish = () => { + let loginParams = { + username: form.getFieldValue('username'), + password: form.getFieldValue('password'), + rememberMe: 1, + }; + data.loginForm.username = form.getFieldValue('username'); + console.log('hhhhhh', loginParams); + }; + const showPwd = () => { + if (data.passwordType === 'password') { + data.passwordType = ''; + } else { + data.passwordType = 'password'; + } + // $nextTick(() => { + // $refs.password.focus(); + // }); + }; + return ( +
+
+
+

你好呀

+ {/*

{{ $t('system.login') }}

*/} +
+ + + + + + + + + + +
+ ); +}; + +export default Login; diff --git a/threadpool/console-new/src/page/search/dist/index.js b/threadpool/console-new/src/page/search/dist/index.js new file mode 100644 index 00000000..1b71af31 --- /dev/null +++ b/threadpool/console-new/src/page/search/dist/index.js @@ -0,0 +1,16 @@ +"use strict"; +exports.__esModule = true; +var react_1 = require("react"); +var icons_1 = require("@ant-design/icons"); +var antd_1 = require("antd"); +var Search = function () { + var _a = react_1["default"].useState(false), passwordVisible = _a[0], setPasswordVisible = _a[1]; + return (react_1["default"].createElement(antd_1.Space, { direction: "vertical" }, + react_1["default"].createElement(antd_1.Input.Password, { placeholder: "input password" }), + react_1["default"].createElement(antd_1.Input.Password, { placeholder: "input password", iconRender: function (visible) { return (visible ? react_1["default"].createElement(icons_1.EyeTwoTone, null) : react_1["default"].createElement(icons_1.EyeInvisibleOutlined, null)); } }), + react_1["default"].createElement(antd_1.Space, { direction: "horizontal" }, + react_1["default"].createElement(antd_1.Input.Password, { placeholder: "input password", visibilityToggle: { visible: passwordVisible, onVisibleChange: setPasswordVisible } }), + react_1["default"].createElement(antd_1.Button, { style: { width: 80 }, onClick: function () { return setPasswordVisible(function (prevState) { return !prevState; }); } }, passwordVisible ? 'Hide' : 'Show'), + react_1["default"].createElement(antd_1.Button, { style: { width: 80 }, onClick: function () { return setPasswordVisible(function (prevState) { return !prevState; }); } }, passwordVisible ? 'Hide' : 'Show')))); +}; +exports["default"] = Search; diff --git a/threadpool/console-new/src/page/search/index.tsx b/threadpool/console-new/src/page/search/index.tsx new file mode 100644 index 00000000..85f3e74d --- /dev/null +++ b/threadpool/console-new/src/page/search/index.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons'; +import { Button, Input, Space } from 'antd'; + +const Search: React.FC = () => { + const [passwordVisible, setPasswordVisible] = React.useState(false); + + return ( + + + (visible ? : )} + /> + + + + + + + ); +}; + +export default Search; diff --git a/threadpool/console-new/src/react-app-env.d.ts b/threadpool/console-new/src/react-app-env.d.ts index bb172a71..41ab567f 100644 --- a/threadpool/console-new/src/react-app-env.d.ts +++ b/threadpool/console-new/src/react-app-env.d.ts @@ -1,2 +1,88 @@ /// declare module '*.less'; +// import { DefaultTheme } from 'styled-components' + +// export const lightDefaultTheme: DefaultTheme = { +// primary: "#3495EE", + +// baseColor: { +// // 前两个是固定的，用于，有颜色按钮 字体颜色等固定不会变的颜色值 +// bc1: "#fff", +// bc2: "#000000", +// bc3: "#ED2D00", +// bc4: "#10CC55", +// bc5: "#3094f1", +// }, +// fontColor: { +// fc1: "#333", +// fc2: "#000", +// fc3: "#666", +// fc4: '#D2E0F4', +// fc5: "#000000", +// fc6: "#FFFFFF", +// }, +// borderColor: { +// bl1: "#E2E2E2", +// bl2: "#d8dbe2", +// bl3: "#B5BDCE", +// }, +// backgroundColor: { +// bg1: "#FFFFFF", +// bg2: "#EEEFF4", +// // title的及表格头部背景极 +// bg3: "#EDEDED", +// bg5: "#F8F8F8", +// bg4: "#F6F6F6", +// bg6: "rgba(0, 0, 0, 0.70)", +// }, +// hoverColor: { +// hc1: 'rgba(24, 144, 255, 0)', +// // 表格的hover及选 中 +// hc2: '#F5F8FA' +// } +// } + +// export const darkDefaultTheme: DefaultTheme = { +// primary: "#177DDC", +// baseColor: { +// bc1: "#fff", +// bc2: "#000000", +// bc3: "#FF3D3D", +// bc4: "#10CC55", +// bc5: "#3094f1", +// // 固定为白色，有颜色按钮文字颜色 fixedcolor +// }, +// fontColor: { +// fc1: "#ffffff", +// fc2: "#B4B6B8", +// fc3: "#555555", +// fc4: '#666666', +// fc5: "#FFFFFF", +// fc6: "#FFFFFF", +// }, +// borderColor: { +// bl1: "#6A6A6A", +// bl2: "#4A4B51", +// bl3: "#424242", + +// }, +// backgroundColor: { +// // 大面积色 +// bg1: "#1C1D21", +// // tab顶部颜色 +// bg2: "#323337", +// // title 颜色 +// bg3: "#2A2B2E", +// bg5: "#4A4B51", +// // 菜单选中 +// bg4: "#0F3C66", +// // 锁定背景色 +// bg6: "rgba(255, 255, 255, 0.70)", +// // bg3: "rgba(255, 255, 255, 0.70)", +// // bg4: "rgba(250, 250, 250, 1)", +// }, +// hoverColor: { +// hc1: 'rgba(24, 144, 255, 0)', +// hc2: '#2A2B2E' +// } +// } diff --git a/threadpool/console-new/src/route/index.tsx b/threadpool/console-new/src/route/index.tsx new file mode 100644 index 00000000..a0ff59a1 --- /dev/null +++ b/threadpool/console-new/src/route/index.tsx @@ -0,0 +1,5 @@ +import React from 'react'; + +const Fc = () => { + return
hhh
; +}; diff --git a/threadpool/console-new/src/theme/dark-algorithm.tsx b/threadpool/console-new/src/theme/dark-algorithm.tsx new file mode 100644 index 00000000..cf6695ca --- /dev/null +++ b/threadpool/console-new/src/theme/dark-algorithm.tsx @@ -0,0 +1,33 @@ +import { theme } from 'antd'; +import { darkDefaultTheme } from '.'; +export const darkAlgorithm = { + token: { + borderRadius: 2, + colorPrimary: darkDefaultTheme.primary, + fontSize: 14, + }, + components: { + Button: { + fontSize: 14, + }, + Table: { + borderRadius: 0, + borderRadiusLG: 0, + padding: 10, + paddingXS: 5, + margin: 0, + fontSize: 14, + colorBorderSecondary: darkDefaultTheme.borderColor.bl1, + paddingContentVerticalLG: 4, + }, + Modal: { + borderRadiusLG: 2, + borderRadiusSM: 2, + colorText: darkDefaultTheme.fontColor.fc3, + borderRadius: 2, + paddingContentHorizontalLG: 0, + paddingMD: 0, + }, + }, + algorithm: theme.darkAlgorithm, +}; diff --git a/threadpool/console-new/src/theme/default-algnorithm.tsx b/threadpool/console-new/src/theme/default-algnorithm.tsx new file mode 100644 index 00000000..ac6d9685 --- /dev/null +++ b/threadpool/console-new/src/theme/default-algnorithm.tsx @@ -0,0 +1,34 @@ +import { theme } from 'antd'; +import { lightDefaultTheme } from '.'; +export const defaultAlgorithm = { + token: { + borderRadius: 2, + colorPrimary: lightDefaultTheme.primary, + fontSize: 14, + // colorBgBase: lightDefaultTheme.backgroundColor.bg1, + }, + components: { + Button: { + fontSize: 14, + }, + Table: { + borderRadius: 0, + borderRadiusLG: 0, + padding: 10, + paddingXS: 5, + margin: 0, + fontSize: 14, + colorBorderSecondary: lightDefaultTheme.borderColor.bl1, + paddingContentVerticalLG: 4, + }, + Modal: { + borderRadiusLG: 2, + borderRadiusSM: 2, + colorText: lightDefaultTheme.fontColor.fc3, + borderRadius: 2, + paddingContentHorizontalLG: 0, + paddingMD: 0, + }, + }, + algorithm: theme.defaultAlgorithm, +}; diff --git a/threadpool/console-new/src/theme/default-theme.d.ts b/threadpool/console-new/src/theme/default-theme.d.ts new file mode 100644 index 00000000..6afe0865 --- /dev/null +++ b/threadpool/console-new/src/theme/default-theme.d.ts @@ -0,0 +1,44 @@ +import 'styled-components'; +// and extend them! +declare module 'styled-components' { + export interface DefaultTheme { + primary: string; + + // 基本固定颜色，如有颜色按钮，文字颜色 + baseColor: { + bc1: string; + bc2: string; + bc3: string; + bc4: string; + bc5: string; + }; + // 字体颜色 + fontColor: { + fc1: string; + fc2: string; + fc3: string; + fc4: string; + fc5: string; + fc6: string; + }; + // 边框颜色 line + borderColor: { + bl1: string; + bl2: string; + bl3: string; + }; + // 背景色 + backgroundColor: { + bg1: string; + bg2: string; + bg3: string; + bg4: string; + bg5: string; + bg6: string; + }; + hoverColor: { + hc1: string; + hc2: string; + }; + } +} diff --git a/threadpool/console-new/src/theme/index.ts b/threadpool/console-new/src/theme/index.ts new file mode 100644 index 00000000..aa67f115 --- /dev/null +++ b/threadpool/console-new/src/theme/index.ts @@ -0,0 +1,85 @@ +import { DefaultTheme } from 'styled-components'; + +export const lightDefaultTheme: DefaultTheme = { + primary: '#0d68a8', + + baseColor: { + // 前两个是固定的，用于，有颜色按钮 字体颜色等固定不会变的颜色值 + bc1: '#fff', + bc2: '#000000', + bc3: '#ED2D00', + bc4: '#10CC55', + bc5: '#3094f1', + }, + fontColor: { + fc1: '#333', + fc2: '#000', + fc3: '#666', + fc4: '#D2E0F4', + fc5: '#000000', + fc6: '#FFFFFF', + }, + borderColor: { + bl1: '#E2E2E2', + bl2: '#d8dbe2', + bl3: '#B5BDCE', + }, + backgroundColor: { + bg1: '#FFFFFF', + bg2: '#EEEFF4', + // title的及表格头部背景极 + bg3: '#EDEDED', + bg5: '#F8F8F8', + bg4: '#F6F6F6', + bg6: 'rgba(0, 0, 0, 0.70)', + }, + hoverColor: { + hc1: 'rgba(24, 144, 255, 0)', + // 表格的hover及选 中 + hc2: '#F5F8FA', + }, +}; + +export const darkDefaultTheme: DefaultTheme = { + primary: '#0d68a8', + baseColor: { + bc1: '#fff', + bc2: '#000000', + bc3: '#FF3D3D', + bc4: '#10CC55', + bc5: '#3094f1', + // 固定为白色，有颜色按钮文字颜色 fixedcolor + }, + fontColor: { + fc1: '#ffffff', + fc2: '#B4B6B8', + fc3: '#555555', + fc4: '#666666', + fc5: '#FFFFFF', + fc6: '#FFFFFF', + }, + borderColor: { + bl1: '#6A6A6A', + bl2: '#4A4B51', + bl3: '#424242', + }, + backgroundColor: { + // 大面积色 + bg1: '#141414', + // tab顶部颜色 + bg2: '#323337', + // title 颜色 + bg3: '#2A2B2E', + bg5: '#4A4B51', + // 菜单选中 + bg4: '#0F3C66', + // 锁定背景色 + bg6: 'rgba(255, 255, 255, 0.70)', + // bg3: "rgba(255, 255, 255, 0.70)", + // bg4: "rgba(250, 250, 250, 1)", + }, + hoverColor: { + hc1: 'rgba(24, 144, 255, 0)', + hc2: '#2A2B2E', + }, +}; diff --git a/threadpool/console-new/tsconfig.json b/threadpool/console-new/tsconfig.json index a273b0cf..ba57cd21 100644 --- a/threadpool/console-new/tsconfig.json +++ b/threadpool/console-new/tsconfig.json @@ -1,11 +1,7 @@ { "compilerOptions": { "target": "es5", - "lib": [ - "dom", - "dom.iterable", - "esnext" - ], + "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, @@ -18,9 +14,12 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "react-jsx", + "baseUrl": "./", + "paths": { + // 路径映射，相对于baseUrl + "@/*": ["src/*"], + } }, - "include": [ - "src" - ] + "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx"] }