提交基础版本

ant-design-pro-vue3/.babelrc

@@ -0,0 +1,8 @@
+{
+  "presets": ["@babel/preset-env"],
+  "plugins": [
+    ["@babel/plugin-transform-react-jsx", {
+      "runtime": "automatic"
+    }]
+  ]
+}

ant-design-pro-vue3/.env.development

@@ -0,0 +1,22 @@
+# Whether to open mock
+VITE_USE_MOCK = true
+
+# public path
+VITE_PUBLIC_PATH = /
+
+# Cross-domain proxy, you can configure multiple
+# Please note that no line breaks
+VITE_PROXY = [["/basic-api","http://localhost:3000"],["/upload","http://localhost:3300/upload"]]
+# VITE_PROXY=[["/api","https://vvbin.cn/test"]]
+
+# Delete console
+VITE_DROP_CONSOLE = false
+
+# Basic interface address SPA
+VITE_GLOB_API_URL=/basic-api
+
+# File upload address， optional
+VITE_GLOB_UPLOAD_URL=/upload
+
+# Interface prefix
+VITE_GLOB_API_URL_PREFIX=

ant-design-pro-vue3/.eslintrc.cjs

@@ -0,0 +1,15 @@
+/* eslint-env node */
+require('@rushstack/eslint-patch/modern-module-resolution')
+
+module.exports = {
+  root: true,
+  'extends': [
+    'plugin:vue/vue3-essential',
+    'eslint:recommended',
+    '@vue/eslint-config-typescript',
+    '@vue/eslint-config-prettier/skip-formatting'
+  ],
+  parserOptions: {
+    ecmaVersion: 'latest'
+  }
+}

ant-design-pro-vue3/.eslintrc.js

@@ -0,0 +1,27 @@
+module.exports = {
+  parser: 'vue-eslint-parser',
+  parserOptions: {
+    parser: '@typescript-eslint/parser', // Specifies the ESLint parser
+    ecmaVersion: 2020, // Allows for the parsing of modern ECMAScript features
+    sourceType: 'module', // Allows for the use of imports
+    ecmaFeatures: {
+      // tsx: true, // Allows for the parsing of JSX
+      jsx: true,
+    },
+  },
+  // settings: {
+  //   tsx: {
+  //     version: "detect" // Tells eslint-plugin-react to automatically detect the version of React to use
+  //   }
+  // },
+  extends: [
+    'plugin:vue/vue3-recommended',
+    'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
+    'prettier/@typescript-eslint', // Uses eslint-config-prettier to disable ESLint rules from @typescript-eslint/eslint-plugin that would conflict with prettier
+    'plugin:prettier/recommended', // Enables eslint-plugin-prettier and eslint-config-prettier. This will display prettier errors as ESLint errors. Make sure this is always the last configuration in the extends array.
+  ],
+  rules: {
+    // Place to specify ESLint rules. Can be used to overwrite rules specified from the extended configs
+    // e.g. "@typescript-eslint/explicit-function-return-type": "off",
+  },
+};

ant-design-pro-vue3/.gitattributes

@@ -0,0 +1,3 @@
+*.css linguist-language=Vue
+*.html linguist-language=Vue
+*.js linguist-language=Vue

ant-design-pro-vue3/.gitignore

@@ -0,0 +1,7 @@
+node_modules
+.DS_Store
+dist
+*.local
+package-lock.json
+yarn.lock
+yarn-error.log

ant-design-pro-vue3/.prettierrc.json

@@ -0,0 +1,8 @@
+{
+  "$schema": "https://json.schemastore.org/prettierrc",
+  "semi": false,
+  "tabWidth": 2,
+  "singleQuote": true,
+  "printWidth": 200,
+  "trailingComma": "none"
+}

ant-design-pro-vue3/.vscode/extensions.json

@@ -0,0 +1,6 @@
+{
+  "recommendations": [
+    "aaron-bond.better-comments",
+    "fittentech.fitten-code"
+  ]
+}

ant-design-pro-vue3/.vscode/settings.json

@@ -0,0 +1,292 @@
+{
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "volar.tsPlugin": true,
+  "volar.tsPluginStatus": false,
+  //===========================================
+  //============= Editor ======================
+  //===========================================
+  "explorer.openEditors.visible": 0,
+  "editor.minimap.renderCharacters": false,
+  "editor.minimap.maxColumn": 300,
+  "editor.minimap.showSlider": "always",
+  "editor.smoothScrolling": true,
+  "editor.cursorBlinking": "phase",
+  "editor.cursorSmoothCaretAnimation": "on",
+  "editor.detectIndentation": false,
+  "diffEditor.ignoreTrimWhitespace": false,
+  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
+  "editor.formatOnPaste": true,
+  "editor.formatOnSave": true,
+  "editor.suggestSelection": "first",
+  "editor.trimAutoWhitespace": true,
+  "editor.quickSuggestions": {
+    "other": true,
+    "comments": true,
+    "strings": true
+  },
+  //===========================================
+  //============= Other =======================
+  //===========================================
+  "breadcrumbs.enabled": true,
+  "open-in-browser.default": "chrome",
+  //===========================================
+  //============= emmet =======================
+  //===========================================
+  "emmet.triggerExpansionOnTab": true,
+  "emmet.showAbbreviationSuggestions": true,
+  "emmet.showExpandedAbbreviation": "always",
+  "emmet.syntaxProfiles": {
+    "vue-html": "html",
+    "vue": "html",
+    "javascript": "javascriptreact",
+    "xml": {
+      "attr_quotes": "single"
+    }
+  },
+  "emmet.includeLanguages": {
+    "jsx-sublime-babel-tags": "javascriptreact"
+  },
+  //===========================================
+  //============= files =======================
+  //===========================================
+  "files.trimTrailingWhitespace": false,
+  "files.insertFinalNewline": true,
+  "files.trimFinalNewlines": true,
+  "files.eol": "\n",
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/*.log": true,
+    "**/*.log*": true,
+    "**/bower_components": true,
+    "**/dist": true,
+    "**/elehukouben": true,
+    "**/.git": true,
+    "**/.gitignore": true,
+    "**/.svn": true,
+    "**/.DS_Store": true,
+    "**/.idea": true,
+    "**/.vscode": false,
+    "**/yarn.lock": true,
+    "**/tmp": true,
+    "out": true,
+    "dist": true,
+    "node_modules": true,
+    "CHANGELOG.md": true,
+    "examples": true,
+    "res": true,
+    "screenshots": true
+  },
+  "files.exclude": {
+    "**/bower_components": true,
+    "**/.idea": true,
+    "**/yarn.lock": true,
+    "**/tmp": true,
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true
+  },
+  "files.watcherExclude": {
+    // 文件监视排除
+    "**/.git/objects/**": true,
+    "**/.git/subtree-cache/**": true,
+    "**/.vscode/**": true,
+    "**/node_modules/**": true,
+    "**/tmp/**": true,
+    "**/bower_components/**": true,
+    "**/dist/**": true,
+    "**/yarn.lock": true
+  },
+  "files.associations": {
+    "*.vue": "vue",
+    "*.wxss": "css"
+},
+  "stylelint.enable": true,
+  "stylelint.packageManager": "yarn",
+  "css.validate": true,
+  "less.validate": true,
+  "scss.validate": true,
+  // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
+  // ===========================================
+  // ================ Eslint ===================
+  // ===========================================
+  // "eslint.enable": true,
+  "eslint.alwaysShowStatus": true,
+  "eslint.options": {
+    // 配置
+    "plugins": [
+      "html",
+      "vue",
+      "javascript",
+      "jsx",
+      "typescript"
+    ],
+    "extensions": [
+      ".js",
+      ".jsx",
+      ".ts",
+      ".tsx",
+      ".vue"
+    ]
+  },
+  "eslint.validate": [
+    "javascript",
+    "typescript",
+    "reacttypescript",
+    "reactjavascript",
+    "html",
+    "vue"
+  ],
+  // "eslint.autoFixOnSave": true,
+  // ===========================================
+  // ================ Vetur ====================
+  // ===========================================
+  "vetur.experimental.templateInterpolationService": true,
+  "vetur.format.options.tabSize": 2,
+  "vetur.format.defaultFormatter.html": "prettyhtml",
+  "vetur.format.defaultFormatter.scss": "prettier",
+  "vetur.format.defaultFormatter.css": "prettier",
+  "vetur.format.defaultFormatter.ts": "prettier-tslint",
+  "vetur.format.defaultFormatter.js": "prettier",
+  "vetur.languageFeatures.codeActions": false,
+  "vetur.format.defaultFormatterOptions": {
+    // "js-beautify-html": {
+    //   // [auto|force|force-aligned|force-expand-multiline]
+    //   "wrap_attributes":"force-expand-multiline",
+    //   "wrap_line_length": 200,
+    // },
+    "prettier": {
+      "eslintIntegration": true,
+      "arrowParens": "always",
+      // 去掉末尾空格
+      "semi": false,
+      "singleQuote": true,
+      "trailingComma": "none"
+    }
+  },
+  "javascript.updateImportsOnFileMove.enabled": "never",
+  "liveServer.settings.donotShowInfoMsg": true,
+  "terminal.integrated.rendererType": "dom",
+  "telemetry.enableCrashReporter": false,
+  "telemetry.enableTelemetry": false,
+  "workbench.settings.enableNaturalLanguageSearch": false,
+  "path-intellisense.mappings": {
+    "@/": "${workspaceRoot}/src"
+  },
+  "prettier.requireConfig": true,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "workbench.sideBar.location": "left",
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[less]": {
+    "editor.defaultFormatter": "michelemelluso.code-beautifier"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": "explicit"
+},
+  "i18n-ally.localesPaths": [
+    "src/locales/lang"
+  ],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.namespace": true,
+  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
+  "i18n-ally.enabledParsers": [
+    "ts"
+  ],
+  "i18n-ally.sourceLanguage": "zh",
+  "i18n-ally.enabledFrameworks": [
+    "vue",
+    "react"
+  ],
+  "better-comments.tags": [
+    {
+      "tag": "todo",
+      "color": "#FF8C00",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "bug",
+      "color": "#FF2D00",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "warn",
+      "color": "#3498DB",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "//",
+      "color": "#474747",
+      "strikethrough": true,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "*",
+      "color": "#98C379",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "info",
+      "color": "#35A0FF",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "ques",
+      "color": "#FF5400",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+  ],
+  "editor.defaultFormatter": "octref.vetur",
+  "[vue]": {
+    "editor.defaultFormatter": "Vue.volar"
+  },
+  // "better-comments.highlightPlainText": true
+}

ant-design-pro-vue3/.vscode/settings_backup.json

@@ -0,0 +1,340 @@
+{
+  "typescript.tsdk": "./node_modules/typescript/lib",
+  "volar.tsPlugin": true,
+  "volar.tsPluginStatus": false,
+  //===========================================
+  //============= Editor ======================
+  //===========================================
+  "explorer.openEditors.visible": 0,
+  "editor.minimap.renderCharacters": false,
+  "editor.minimap.maxColumn": 300,
+  "editor.minimap.showSlider": "always",
+  "editor.smoothScrolling": true,
+  "editor.cursorBlinking": "phase",
+  "editor.cursorSmoothCaretAnimation": "on",
+  "editor.detectIndentation": false,
+  "diffEditor.ignoreTrimWhitespace": false,
+  "javascript.format.insertSpaceBeforeFunctionParenthesis": true,
+  "editor.formatOnPaste": true,
+  "editor.suggestSelection": "first",
+  "editor.trimAutoWhitespace": true,
+  "editor.quickSuggestions": {
+    "other": true,
+    "comments": true,
+    "strings": true
+  },
+  //===========================================
+  //============= Other =======================
+  //===========================================
+  "breadcrumbs.enabled": true,
+  "open-in-browser.default": "chrome",
+  //===========================================
+  //============= emmet =======================
+  //===========================================
+  "emmet.triggerExpansionOnTab": true,
+  "emmet.showAbbreviationSuggestions": true,
+  "emmet.showExpandedAbbreviation": "always",
+  "emmet.syntaxProfiles": {
+    "vue-html": "html",
+    "vue": "html",
+    "javascript": "javascriptreact",
+    "xml": {
+      "attr_quotes": "single"
+    }
+  },
+  "emmet.includeLanguages": {
+    "jsx-sublime-babel-tags": "javascriptreact"
+  },
+  //===========================================
+  //============= files =======================
+  //===========================================
+  "files.trimTrailingWhitespace": false,
+  "files.insertFinalNewline": true,
+  "files.trimFinalNewlines": true,
+  "search.exclude": {
+    "**/node_modules": true,
+    "**/*.log": true,
+    "**/*.log*": true,
+    "**/bower_components": true,
+    "**/dist": true,
+    "**/elehukouben": true,
+    "**/.git": true,
+    "**/.gitignore": true,
+    "**/.svn": true,
+    "**/.DS_Store": true,
+    "**/.idea": true,
+    "**/.vscode": false,
+    "**/yarn.lock": true,
+    "**/tmp": true,
+    "out": true,
+    "dist": true,
+    "node_modules": true,
+    "CHANGELOG.md": true,
+    "examples": true,
+    "res": true,
+    "screenshots": true
+  },
+  "files.exclude": {
+    "**/bower_components": true,
+    "**/.idea": true,
+    "**/yarn.lock": true,
+    "**/tmp": true,
+    "**/.git": true,
+    "**/.svn": true,
+    "**/.hg": true,
+    "**/CVS": true,
+    "**/.DS_Store": true
+  },
+  "files.watcherExclude": {
+    // 文件监视排除
+    "**/.git/objects/**": true,
+    "**/.git/subtree-cache/**": true,
+    "**/.vscode/**": true,
+    "**/node_modules/**": true,
+    "**/tmp/**": true,
+    "**/bower_components/**": true,
+    "**/dist/**": true,
+    "**/yarn.lock": true
+  },
+  "files.associations": {
+    "*.vue": "vue",
+    "*.wxss": "css"
+  },
+  "stylelint.enable": true,
+  "stylelint.packageManager": "yarn",
+  "css.validate": true,
+  "less.validate": true,
+  "scss.validate": true,
+  // ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
+  // ===========================================
+  // ================ Eslint ===================
+  // ===========================================
+  // "eslint.enable": true,
+  "eslint.options": {
+    // 配置
+    "plugins": [
+      "html",
+      "vue",
+      "javascript",
+      "jsx",
+      "typescript"
+    ],
+    "extensions": [
+      ".js",
+      ".jsx",
+      ".ts",
+      ".tsx",
+      ".vue"
+    ]
+  },
+  // "eslint.autoFixOnSave": true,
+  // ===========================================
+  // ================ Vetur ====================
+  // ===========================================
+  "vetur.experimental.templateInterpolationService": true,
+  "vetur.format.options.tabSize": 2,
+  "vetur.format.defaultFormatter.html": "prettyhtml",
+  "vetur.format.defaultFormatter.scss": "prettier",
+  "vetur.format.defaultFormatter.css": "prettier",
+  "vetur.format.defaultFormatter.ts": "prettier-tslint",
+  "vetur.format.defaultFormatter.js": "prettier",
+  "vetur.languageFeatures.codeActions": false,
+  "vetur.format.defaultFormatterOptions": {
+    "js-beautify-html": {
+      // [auto|force|force-aligned|force-expand-multiline]
+      "wrap_attributes": "force",
+      "wrap_line_length": 100,
+    },
+    // "prettier": {
+    //   "eslintIntegration": true,
+    //   "arrowParens": "always",
+    //   // 去掉末尾空格
+    //   "semi": false,
+    //   "singleQuote": true,
+    //   "trailingComma": "none"
+    // }
+  },
+  "javascript.updateImportsOnFileMove.enabled": "never",
+  "terminal.integrated.rendererType": "dom",
+  "telemetry.enableCrashReporter": false,
+  "telemetry.enableTelemetry": false,
+  "workbench.settings.enableNaturalLanguageSearch": false,
+  "path-intellisense.mappings": {
+    "@/": "${workspaceRoot}/src"
+  },
+  "prettier.requireConfig": true,
+  "typescript.updateImportsOnFileMove.enabled": "always",
+  "workbench.sideBar.location": "left",
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[typescriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[css]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[less]": {
+    "editor.defaultFormatter": "vscode.css-language-features"
+  },
+  "[scss]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "[markdown]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "i18n-ally.localesPaths": [
+    "src/locales/lang"
+  ],
+  "i18n-ally.keystyle": "nested",
+  "i18n-ally.sortKeys": true,
+  "i18n-ally.namespace": true,
+  "i18n-ally.pathMatcher": "{locale}/{namespaces}.{ext}",
+  "i18n-ally.enabledParsers": [
+    "ts"
+  ],
+  "i18n-ally.sourceLanguage": "zh",
+  "i18n-ally.enabledFrameworks": [
+    "vue",
+    "react"
+  ],
+  "better-comments.tags": [
+    {
+      "tag": "todo",
+      "color": "#FF8C00",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "bug",
+      "color": "#FF2D00",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "warn",
+      "color": "#3498DB",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "//",
+      "color": "#474747",
+      "strikethrough": true,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "*",
+      "color": "#98C379",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "info",
+      "color": "#35A0FF",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+    {
+      "tag": "ques",
+      "color": "#FF5400",
+      "strikethrough": false,
+      "underline": false,
+      "backgroundColor": "transparent",
+      "bold": false,
+      "italic": false
+    },
+  ],
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "volar.format.initialIndent": {
+    "html": true
+  },
+  "editor.tabSize": 2,
+  "vue.codeActions.enabled": true,
+  "prettier.eslintIntegration": true,
+  // "better-comments.highlightPlainText": true
+
+  // 新增内容
+  "liveServer.settings.donotShowInfoMsg": true,
+  "git.openRepositoryInParentFolders": "always",
+  "editor.fontSize": 16,
+  "eslint.alwaysShowStatus": true,
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescriptreact",
+    "html",
+    "vue",
+    "typescript"
+  ],
+  "files.eol": "\n",
+  "[javascript]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "vetur.completion.scaffoldSnippetSources": {
+    "workspace": "💼",
+    "user": "🗒️",
+    "vetur": "✌"
+  },
+  "vetur.format.defaultFormatter.js": "vscode-typescript",
+  "vetur.format.defaultFormatter.less": "none",
+  "vetur.format.defaultFormatter.ts": "vscode-typescript",
+  "vetur.format.defaultFormatter.html": "prettyhtml",
+  "vetur.format.defaultFormatterOptions": {
+    // "js-beautify-html": {
+    //     "wrap_attributes": "force"
+    // },
+    "prettyhtml": {
+      "printWidth": 100,
+      "singleQuote": false,
+      "wrapAttributes": false,
+      "sortAttributes": false
+    }
+  },
+  "[jsonc]": {
+    "editor.defaultFormatter": "vscode.json-language-features"
+  },
+  "editor.wordWrap": "on",
+  "[html]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "files.autoSave": "afterDelay",
+  "search.followSymlinks": false,
+  "npm.autoDetect": "off",
+  "npm.packageManager": "pnpm",
+  "debug.javascript.codelens.npmScripts": "never",
+  "npm.scriptHover": false,
+  "editor.formatOnSave": true,
+  "workbench.colorTheme": "Default Dark+",
+  "editor.defaultFormatter": "esbenp.prettier-vscode"
+}

ant-design-pro-vue3/README.md

@@ -0,0 +1,42 @@
+# 启动
+
+```
+下载依赖
+
+yarn isntall
+
+启动服务
+
+npm run dev
+
+```
+# 注意事项
+- 进入新转换的页面，页面卡住，点什么都没反应时，说明页面报错了，请查看控制台的错误信息；
+
+# 代码工具生成的代码需要手动进行以下处理  
+
+## react -> vue
+1. 表单查询按钮回调中的tableRef要改成对应表格的ref
+2. 表单保存按钮回调中的formRef要改成对应表单的ref
+3. 遇到setFieldState时需要手动转换，目前只对默认仅改变表单值时进行了转换，当出现修改其他属性时，未做处理  
+    除此之外，遇到原react表单框架特有函数getFieldState、getFieldValue、setFieldValue等也需要手动转换  
+    例如：  
+    ```
+      setFieldState('name', state => { state.value = value; state.disabled = true; })    
+      上面的代码用于给表单的name字段设置value和disabled属性，需要手动转换为vue的写法：
+    ```
+
+## jsp -> vue
+1. 查看表单项父组件是否有pro-form，没有手动添加，并设置model参数
+2. 打开其他页面按钮，需要手动修改成OpenModelButton组件
+3. 表格列中使用formatter方法进行渲染时，需要手动根据函数内容进行修改
+
+
+## 其他
+1. 表格数据源中的key字段在antdVue中是保留字，需要改成其他字段，并给表格设置rowKey属性
+3. 为解决同一页面有多个相同组件，定义组件参数变量时使用组件id或name作为变量名，如需要可自行对变量名进行修改
+
+
+# 需要优化的地方
+1. 下拉树组件没有角色树、菜单树，对应的type为roleTree、menuTree
+2. vue下拉树目前没有"leafOlny[只能选中叶子节点]"功能

ant-design-pro-vue3/components.d.ts

@@ -0,0 +1,92 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    AAlert: typeof import('ant-design-vue/es')['Alert']
+    AAvatar: typeof import('ant-design-vue/es')['Avatar']
+    ABadge: typeof import('ant-design-vue/es')['Badge']
+    AButton: typeof import('ant-design-vue/es')['Button']
+    ACard: typeof import('ant-design-vue/es')['Card']
+    ACheckableTag: typeof import('ant-design-vue/es')['CheckableTag']
+    ACheckbox: typeof import('ant-design-vue/es')['Checkbox']
+    ACol: typeof import('ant-design-vue/es')['Col']
+    AConfigProvider: typeof import('ant-design-vue/es')['ConfigProvider']
+    ADivider: typeof import('ant-design-vue/es')['Divider']
+    ADrawer: typeof import('ant-design-vue/es')['Drawer']
+    ADropdown: typeof import('ant-design-vue/es')['Dropdown']
+    AForm: typeof import('ant-design-vue/es')['Form']
+    AFormItem: typeof import('ant-design-vue/es')['FormItem']
+    AInput: typeof import('ant-design-vue/es')['Input']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
+    AInputSearch: typeof import('ant-design-vue/es')['InputSearch']
+    ALayout: typeof import('ant-design-vue/es')['Layout']
+    ALayoutContent: typeof import('ant-design-vue/es')['LayoutContent']
+    ALayoutFooter: typeof import('ant-design-vue/es')['LayoutFooter']
+    ALayoutHeader: typeof import('ant-design-vue/es')['LayoutHeader']
+    ALayoutSider: typeof import('ant-design-vue/es')['LayoutSider']
+    AList: typeof import('ant-design-vue/es')['List']
+    AListItem: typeof import('ant-design-vue/es')['ListItem']
+    AListItemMeta: typeof import('ant-design-vue/es')['ListItemMeta']
+    Alpha: typeof import('./src/components/ColorPicker/common/Alpha.vue')['default']
+    AMenu: typeof import('ant-design-vue/es')['Menu']
+    AMenuDivider: typeof import('ant-design-vue/es')['MenuDivider']
+    AMenuItem: typeof import('ant-design-vue/es')['MenuItem']
+    AModal: typeof import('ant-design-vue/es')['Modal']
+    APopover: typeof import('ant-design-vue/es')['Popover']
+    ARadioButton: typeof import('ant-design-vue/es')['RadioButton']
+    ARadioGroup: typeof import('ant-design-vue/es')['RadioGroup']
+    ARangePicker: typeof import('ant-design-vue/es')['RangePicker']
+    ARow: typeof import('ant-design-vue/es')['Row']
+    ASelect: typeof import('ant-design-vue/es')['Select']
+    ASelectOption: typeof import('ant-design-vue/es')['SelectOption']
+    ASpace: typeof import('ant-design-vue/es')['Space']
+    ASpin: typeof import('ant-design-vue/es')['Spin']
+    ASubMenu: typeof import('ant-design-vue/es')['SubMenu']
+    ASwitch: typeof import('ant-design-vue/es')['Switch']
+    ATable: typeof import('ant-design-vue/es')['Table']
+    ATabPane: typeof import('ant-design-vue/es')['TabPane']
+    ATabs: typeof import('ant-design-vue/es')['Tabs']
+    ATag: typeof import('ant-design-vue/es')['Tag']
+    ATooltip: typeof import('ant-design-vue/es')['Tooltip']
+    AUpload: typeof import('ant-design-vue/es')['Upload']
+    Breadcrumb: typeof import('./src/components/tools/Breadcrumb.vue')['default']
+    ColorPicker: typeof import('./src/components/ColorPicker/index.vue')['default']
+    DescriptionList: typeof import('./src/components/DescriptionList/DescriptionList.vue')['default']
+    FastDevelopBall: typeof import('./src/components/FastDevelopBall/index.vue')['default']
+    FastDevelopModal: typeof import('./src/components/FastDevelopBall/FastDevelopModal.vue')['default']
+    GlobalFooter: typeof import('./src/components/GlobalFooter/index.vue')['default']
+    GlobalHeader: typeof import('./src/components/GlobalHeader/index.vue')['default']
+    GlobalStyle: typeof import('./src/components/SettingDrawer/components/GlobalStyle.vue')['default']
+    History: typeof import('./src/components/ColorPicker/common/History.vue')['default']
+    Hue: typeof import('./src/components/ColorPicker/common/Hue.vue')['default']
+    LayoutSettings: typeof import('./src/components/SettingDrawer/components/LayoutSettings.vue')['default']
+    LockScreen: typeof import('./src/components/LockScreen/index.vue')['default']
+    Logo: typeof import('./src/components/tools/Logo.vue')['default']
+    Manual: typeof import('./src/components/SvgIcon/manual.vue')['default']
+    Menu: typeof import('./src/components/Menu/Menu.vue')['default']
+    MultiTab: typeof import('./src/components/MultiTab/index.vue')['default']
+    NavigationMode: typeof import('./src/components/SettingDrawer/components/NavigationMode.vue')['default']
+    NoticeIcon: typeof import('./src/components/NoticeIcon/index.vue')['default']
+    OtherSettings: typeof import('./src/components/SettingDrawer/components/OtherSettings.vue')['default']
+    PageHeader: typeof import('./src/components/PageHeader/index.vue')['default']
+    RenderSubMenu: typeof import('./src/components/Menu/RenderSubMenu.vue')['default']
+    RouterLink: typeof import('vue-router')['RouterLink']
+    RouterView: typeof import('vue-router')['RouterView']
+    Saturation: typeof import('./src/components/ColorPicker/common/Saturation.vue')['default']
+    SettingDrawer: typeof import('./src/components/SettingDrawer/index.vue')['default']
+    SettingItem: typeof import('./src/components/SettingDrawer/components/SettingItem.vue')['default']
+    SideMenu: typeof import('./src/components/Menu/SideMenu.vue')['default']
+    SvgIcon: typeof import('./src/components/SvgIcon/index.vue')['default']
+    ThemeColor: typeof import('./src/components/SettingDrawer/components/ThemeColor.vue')['default']
+    TwoStepCaptcha: typeof import('./src/components/tools/TwoStepCaptcha.vue')['default']
+    UserMenu: typeof import('./src/components/tools/UserMenu/index.vue')['default']
+    VColorInput: typeof import('./src/components/ColorPicker/common/VColorInput.vue')['default']
+  }
+}

ant-design-pro-vue3/config/createModule/backend.ts

@@ -0,0 +1,35 @@
+const express = require('express');
+const shelljs = require('shelljs');
+const server = express();
+const rootPath = process.cwd()
+
+server.all('*', (req, res, next) => {
+  res.header("Access-Control-Allow-Origin", "*");
+  res.header("Access-Control-Allow-Headers", "X-Requested-With,username,token");
+  res.header("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
+  res.header("X-Powered-By", ' 3.2.1')
+  res.header("Content-Type", "application/json;charset=utf-8");
+  next();
+});
+
+server.get('/createModule/addView', (req, res) => {
+  doCopy(`yarn v --moduleName=${req.query.name}`, res)
+});
+
+server.get('/createModule/addComponent', (req, res) => {
+  doCopy(`yarn c --moduleName=${req.query.name}`, res)
+});
+
+function doCopy(cmd, res) {
+  shelljs.cd(rootPath);
+  const shellRes = shelljs.exec(cmd)
+  if (shellRes) {
+    return res.status(200).send({ error: 0, msg: '创建成功' });
+  }
+  // 只有创建失败时才会有返回值,因为vite检测到创建文件后会自动刷新页面
+  res.status(500).send({ error: 1, msg: '创建失败,具体问题请看控制台' });
+}
+
+server.listen(3006);
+
+console.log('commander-ui已启动到3006端口')

ant-design-pro-vue3/config/createModule/index.ts

@@ -0,0 +1,21 @@
+import { moduleTypes } from './type'
+import { copyFolder, log, templatePath, disPath, deleteFolder, modifyIndexVue, firstLetterUpperCase } from './utils'
+
+function run() {
+  const argv = require('minimist')(process.argv.slice(2));
+  const { type, moduleName } = argv
+  if (!moduleName) {
+    log.error('请输入组件/页面名称!')
+    return false
+  }
+  copyFolder(templatePath, disPath(type + '/' + firstLetterUpperCase(moduleName)))
+  // 修改index.vue的class名称为组件名称
+  setTimeout(() => modifyIndexVue(type, moduleName), 300)
+  if (type === moduleTypes.component) {
+    // components文件夹不需要再复制components文件夹了
+    setTimeout(() => deleteFolder(disPath('components/' + moduleName + '/components')), 300)
+  }
+  log.success('复制完成!')
+}
+
+run()

ant-design-pro-vue3/config/createModule/type.ts

@@ -0,0 +1,4 @@
+export enum moduleTypes {
+  component ='components',
+  view ='views'
+}

ant-design-pro-vue3/config/createModule/utils.ts

@@ -0,0 +1,104 @@
+const fs = require('fs')
+const path = require('path')
+const colors = require('colors-console');
+
+export function copyFolder(from, to) {
+  const fromPath = path.resolve(from)
+  const toPath = path.resolve(to)
+  fs.access(toPath, function (err) {
+    if (err) {
+      fs.mkdirSync(toPath)
+    }
+  })
+  fs.readdir(fromPath, function (err, paths) {
+    if (err) {
+      console.log(err)
+      return
+    }
+    paths.forEach(function (item) {
+      const newFromPath = fromPath + '/' + item
+      const newToPath = path.resolve(toPath + '/' + item)
+
+      fs.stat(newFromPath, function (err, stat) {
+        if (err) return
+        if (stat.isFile()) {
+          copyFile(newFromPath, newToPath)
+        }
+        if (stat.isDirectory()) {
+          copyFolder(newFromPath, newToPath)
+        }
+      })
+    })
+  })
+}
+
+export function copyFile(from, to) {
+  fs.copyFileSync(from, to)
+}
+
+export const pathResolve = (pathStr: string) => {
+  return path.resolve(__dirname, pathStr);
+};
+
+
+export const log = {
+  error: (txt) => console.error(colors('red', txt)),
+  warning: (txt) => console.error(colors('yellow', txt)),
+  info: (txt) => console.error(colors('cyan', txt)),
+  default: (txt) => console.error(colors('bright', txt)),
+  success: (txt) => console.error(colors('green', txt)),
+}
+
+export const templatePath = pathResolve('../template')
+export const disPath = (moduleName) => pathResolve('../../src/' + moduleName)
+
+export function deleteFolder(url) {
+  let files = [];
+  /**
+   * 判断给定的路径是否存在
+   */
+  if (fs.existsSync(url)) {
+    /**
+     * 返回文件和子目录的数组
+     */
+    files = fs.readdirSync(url);
+    files.forEach(function (file, index) {
+
+      const curPath = path.join(url, file);
+      log.error(curPath);
+      /**
+       * fs.statSync同步读取文件夹文件，如果是文件夹，在重复触发函数
+       */
+      if (fs.statSync(curPath).isDirectory()) { // recurse
+        deleteFolder(curPath);
+
+      } else {
+        fs.unlinkSync(curPath);
+      }
+    });
+    /**
+     * 清除文件夹
+     */
+    fs.rmdirSync(url);
+
+  } else {
+    log.error("要删除的路径不存在，请给出正确的路径!");
+  }
+}
+
+export const firstLetterUpperCase = (str) => {
+  str = str.toString()
+  return str.replace(str[0], str[0].toUpperCase());
+}
+
+export function modifyIndexVue(type, moduleName) {
+  const filePath = disPath(type + '/' + moduleName + '/index.vue')
+  fs.readFile(filePath, 'utf8', function (err, data) {
+    if (err) throw err;
+    data = data.replace(/\${class}/g, firstLetterUpperCase(moduleName))
+    fs.writeFileSync(filePath, data, 'utf8', (err) => {
+      if (err) throw err;
+      console.log('success done');
+    });
+  });
+}

ant-design-pro-vue3/config/template/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <section class="${class}">
+
+  </section>
+</template>
+
+<script lang="ts" name="${class}">
+import { ref, reactive } from 'vue'
+import * as api from './service'
+
+</script>
+
+<style lang="less" scoped>
+.${class}{
+
+}
+</style>

ant-design-pro-vue3/config/template/lang/cn.ts

@@ -0,0 +1 @@
+export default {}

ant-design-pro-vue3/config/template/lang/en.ts

@@ -0,0 +1 @@
+export default {}

ant-design-pro-vue3/config/template/service.ts

@@ -0,0 +1,9 @@
+// import baseService from '@/utils/http/axios'
+// import { baseURL } from '@/utils/util'
+
+// export const test = data => {
+//   const api = baseURL + `test`
+//   return baseService.post(api, data)
+// }
+export interface temp {
+}

ant-design-pro-vue3/config/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "include": [
+    "config/**/*.ts",
+  ],
+  "compilerOptions": {
+    "target": "esnext",
+    "module": "commonjs",
+    "sourceMap": true,
+    "resolveJsonModule": true,
+    "strict": false,
+    "noUnusedLocals": false,
+    "noImplicitReturns": false,
+    "esModuleInterop": true,
+    "noImplicitAny": false,
+  }
+}

ant-design-pro-vue3/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

ant-design-pro-vue3/index.html

@@ -0,0 +1,134 @@
+<!DOCTYPE html>
+<html lang="en" id="html">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/src/assets/dhc.gif" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>总账管理系统</title>
+    <style>
+      .first-loading-wrp {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-direction: column;
+        min-height: 420px;
+        height: 100%;
+      }
+      .first-loading-wrp > h1 {
+        font-size: 128px;
+      }
+      .first-loading-wrp .loading-wrp {
+        padding: 98px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .dot {
+        animation: antRotate 1.2s infinite linear;
+        transform: rotate(45deg);
+        position: relative;
+        display: inline-block;
+        font-size: 32px;
+        width: 32px;
+        height: 32px;
+        box-sizing: border-box;
+      }
+      .dot i {
+        width: 14px;
+        height: 14px;
+        position: absolute;
+        display: block;
+        background-color: #1890ff;
+        border-radius: 100%;
+        transform: scale(0.75);
+        transform-origin: 50% 50%;
+        opacity: 0.3;
+        animation: antSpinMove 1s infinite linear alternate;
+      }
+      .dot i:nth-child(1) {
+        top: 0;
+        left: 0;
+      }
+      .dot i:nth-child(2) {
+        top: 0;
+        right: 0;
+        -webkit-animation-delay: 0.4s;
+        animation-delay: 0.4s;
+      }
+      .dot i:nth-child(3) {
+        right: 0;
+        bottom: 0;
+        -webkit-animation-delay: 0.8s;
+        animation-delay: 0.8s;
+      }
+      .dot i:nth-child(4) {
+        bottom: 0;
+        left: 0;
+        -webkit-animation-delay: 1.2s;
+        animation-delay: 1.2s;
+      }
+      @keyframes antRotate {
+        to {
+          -webkit-transform: rotate(405deg);
+          transform: rotate(405deg);
+        }
+      }
+      @-webkit-keyframes antRotate {
+        to {
+          -webkit-transform: rotate(405deg);
+          transform: rotate(405deg);
+        }
+      }
+      @keyframes antSpinMove {
+        to {
+          opacity: 1;
+        }
+      }
+      @-webkit-keyframes antSpinMove {
+        to {
+          opacity: 1;
+        }
+      }
+
+      .colorfulTitle {
+        display: block;
+        background: linear-gradient(120deg, #6559ae, #ff7159, #6559ae);
+        background-size: 400% 400%;
+        -webkit-background-clip: text;
+        -webkit-text-fill-color: transparent;
+        animation: gradient 1.5s ease-in-out infinite;
+        margin-bottom: 0;
+        font-size: 100px;
+        text-align: center;
+        font-weight: 450;
+        margin-top: 100px;
+      }
+
+      @keyframes gradient {
+        0% {
+          background-position: 14% 0%;
+        }
+
+        50% {
+          background-position: 87% 100%;
+        }
+
+        100% {
+          background-position: 14% 0%;
+        }
+      }
+    </style>
+  </head>
+  <body>
+    <div id="app">
+      <div class="first-loading-wrp">
+        <h1 class="colorfulTitle" style="text-align: center">DHC</h1>
+        <div class="loading-wrp">
+          <span class="dot dot-spin"><i></i><i></i><i></i><i></i></span>
+        </div>
+      </div>
+    </div>
+    <script type="module" src="/src/main.ts"></script>
+    <link rel="stylesheet" type="text/css" id="themeCss" />
+  </body>
+</html>

ant-design-pro-vue3/jest.config.js

@@ -0,0 +1,3 @@
+module.exports = {
+  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
+};

ant-design-pro-vue3/mock/account.js

@@ -0,0 +1,41 @@
+const { api, delay, mock, resp } = require("apite");
+
+api.get("/member/user/personDetail", {
+  id: 22,
+  employeeId: '11111111',
+  adAccount: 'JACK.LI1',
+  email: 'Jack.Li1@home.cn',
+  nickname: null,
+  bio: null,
+  avatar: '/account/levelThreeDept.png',
+  skills: 'Java;C#;English;Html',
+  mySkills: null,
+  interest: '吃饭;睡觉;打豆豆;学习',
+  myInterest: '写代码',
+  chineseName: '小李',
+  englishName: 'Jack Li',
+  empPosition: 'IT Software Engineer',
+  levelOneDept: 'IT',
+  levelTwoDept: 'IT TMP',
+  levelThreeDept: 'IT2IT-Shared Services'
+})
+
+api.get("/member/label/findAll", [
+  {
+    id: '60530b2e12b2d557ccaf8e34',
+    skill: 'Java;C#;English;Html',
+    hobby: '吃饭;睡觉;打豆豆;学习',
+    creator: 'abel.yu',
+    editor: 'jack.li1',
+    insertDate: '2021-03-18T16:11:26.682',
+    cdate: '2021-03-18T16:11:26.682',
+    edate: '2021-03-23T13:33:31.883'
+  }
+])
+
+api.post('/member/user/updatePersonDetail', {
+  status: 200,
+  enMsg: 'OK',
+  zhMsg: '成功',
+  data: 'update person detail success'
+})

ant-design-pro-vue3/mock/mockUtils.js

@@ -0,0 +1,418 @@
+const responseBody = {
+  message: '',
+  timestamp: 0,
+  result: null,
+  code: 0,
+  _status: 0,
+  _headers: {}
+}
+
+
+module.exports = {
+  builder: (data, message, code = 0, headers = {}) => {
+    responseBody.result = data
+    if (message !== undefined && message !== null) {
+      responseBody.message = message
+    }
+    if (code !== undefined && code !== 0) {
+      responseBody.code = code
+      responseBody._status = code
+    }
+    if (headers !== null && typeof headers === 'object' && Object.keys(headers).length > 0) {
+      responseBody._headers = headers
+    }
+    responseBody.timestamp = new Date().getTime()
+    return responseBody
+  },
+  userNav: [
+    // dashboard
+    {
+      'name': 'dashboard',
+      'parentId': 0,
+      'id': 1,
+      'meta': {
+        'icon': 'bx-analyse',
+        'title': '仪表盘',
+        'show': true,
+      },
+      'component': 'RouteView',
+      'redirect': '/dashboard/workplace'
+    },
+    {
+      'name': 'workplace',
+      'parentId': 1,
+      'id': 7,
+      'meta': {
+        'title': '工作台',
+        'show': true
+      },
+      'component': 'Workplace'
+    },
+    {
+      'name': 'monitor',
+      'path': 'monitor',
+      'parentId': 1,
+      'id': 3,
+      'meta': {
+        'title': '监控页（外部）',
+        'show': true,
+        'target': 'http://www.baidu.com',
+        'blank': true
+      }
+    },
+    {
+      'name': 'Analysis',
+      'parentId': 1,
+      'id': 2,
+      'meta': {
+        'title': '分析页',
+        'show': true
+      },
+      'component': 'Home',
+      'path': '/dashboard/analysis'
+    },
+    {
+      'name': 'tests',
+      'parentId': 1,
+      'id': 8,
+      'meta': {
+        'title': '测试功能',
+        'show': true
+      },
+      'component': 'TestWork'
+    },
+
+    // form
+    {
+      'name': 'form',
+      'parentId': 0,
+      'id': 10,
+      'meta': {
+        'icon': 'form',
+        'title': '表单页'
+      },
+      'redirect': '/form/base-form',
+      'component': 'PageView'
+    },
+    {
+      'name': 'basic-form',
+      'parentId': 10,
+      'id': 6,
+      'meta': {
+        'title': '基础表单'
+      },
+      'component': 'BasicForm'
+    },
+    {
+      'name': 'step-form',
+      'parentId': 10,
+      'id': 5,
+      'meta': {
+        'title': '分步表单'
+      },
+      'component': 'StepForm'
+    },
+    {
+      'name': 'advanced-form',
+      'parentId': 10,
+      'id': 4,
+      'meta': {
+        'title': '高级表单'
+      },
+      'component': 'AdvanceForm'
+    },
+
+    // list
+    {
+      'name': 'list',
+      'parentId': 0,
+      'id': 10010,
+      'meta': {
+        'icon': 'table',
+        'title': '列表页',
+        'show': true
+      },
+      'redirect': '/list/table-list',
+      'component': 'PageView'
+    },
+    {
+      'name': 'table-list',
+      'parentId': 10010,
+      'id': 10011,
+      'path': '/list/table-list/:pageNo([1-9]\\d*)?',
+      'meta': {
+        'title': '查询表格',
+        'show': true
+      },
+      'component': 'TableList'
+    },
+    {
+      'name': 'basic-list',
+      'parentId': 10010,
+      'id': 10012,
+      'meta': {
+        'title': '标准列表',
+        'show': true
+      },
+      'component': 'StandardList'
+    },
+    {
+      'name': 'card',
+      'parentId': 10010,
+      'id': 10013,
+      'meta': {
+        'title': '卡片列表',
+        'show': true
+      },
+      'component': 'CardList'
+    },
+    {
+      'name': 'search',
+      'parentId': 10010,
+      'id': 10014,
+      'meta': {
+        'title': '搜索列表',
+        'show': true
+      },
+      'redirect': '/list/search/article',
+      'component': 'SearchLayout'
+    },
+    {
+      'name': 'article',
+      'parentId': 10014,
+      'id': 10015,
+      'meta': {
+        'title': '搜索列表（文章）',
+        'show': true
+      },
+      'component': 'SearchArticles'
+    },
+    {
+      'name': 'project',
+      'parentId': 10014,
+      'id': 10016,
+      'meta': {
+        'title': '搜索列表（项目）',
+        'show': true
+      },
+      'component': 'SearchProjects'
+    },
+    {
+      'name': 'application',
+      'parentId': 10014,
+      'id': 10017,
+      'meta': {
+        'title': '搜索列表（应用）',
+        'show': true
+      },
+      'component': 'SearchApplications'
+    },
+
+    // profile
+    {
+      'name': 'profile',
+      'parentId': 0,
+      'id': 10018,
+      'meta': {
+        'title': '详情页',
+        'icon': 'profile',
+        'show': true
+      },
+      'redirect': '/profile/basic',
+      'component': 'RouteView'
+    },
+    {
+      'name': 'basic',
+      'parentId': 10018,
+      'id': 10019,
+      'meta': {
+        'title': '基础详情页',
+        'show': true
+      },
+      'component': 'ProfileBasic'
+    },
+    {
+      'name': 'advanced',
+      'parentId': 10018,
+      'id': 10020,
+      'meta': {
+        'title': '高级详情页',
+        'show': true
+      },
+      'component': 'ProfileAdvanced'
+    },
+
+    // result
+    {
+      'name': 'result',
+      'parentId': 0,
+      'id': 10021,
+      'meta': {
+        'title': '结果页',
+        'icon': 'check-circle-o',
+        'show': true
+      },
+      'redirect': '/result/success',
+      'component': 'PageView'
+    },
+    {
+      'name': 'success',
+      'parentId': 10021,
+      'id': 10022,
+      'meta': {
+        'title': '成功',
+        'hiddenHeaderContent': true,
+        'show': true
+      },
+      'component': 'ResultSuccess'
+    },
+    {
+      'name': 'fail',
+      'parentId': 10021,
+      'id': 10023,
+      'meta': {
+        'title': '失败',
+        'hiddenHeaderContent': true,
+        'show': true
+      },
+      'component': 'ResultFail'
+    },
+
+    // Exception
+    {
+      'name': 'exception',
+      'parentId': 0,
+      'id': 10024,
+      'meta': {
+        'title': '异常页',
+        'icon': 'warning',
+        'show': true
+      },
+      'redirect': '/exception/403',
+      'component': 'RouteView'
+    },
+    {
+      'name': '403',
+      'parentId': 10024,
+      'id': 10025,
+      'meta': {
+        'title': '403',
+        'show': true
+      },
+      'component': 'Exception403'
+    },
+    {
+      'name': '404',
+      'parentId': 10024,
+      'id': 10026,
+      'meta': {
+        'title': '404',
+        'show': true
+      },
+      'component': 'Exception404'
+    },
+    {
+      'name': '500',
+      'parentId': 10024,
+      'id': 10027,
+      'meta': {
+        'title': '500',
+        'show': true
+      },
+      'component': 'Exception500'
+    },
+
+    // account
+    {
+      'name': 'account',
+      'parentId': 0,
+      'id': 10028,
+      'meta': {
+        'title': '个人页',
+        'icon': 'user',
+        'show': true
+      },
+      'redirect': '/account/center',
+      'component': 'RouteView'
+    },
+    {
+      'name': 'center',
+      'parentId': 10028,
+      'id': 10029,
+      'meta': {
+        'title': '个人中心',
+        'show': true
+      },
+      'component': 'AccountCenter'
+    },
+    // 特殊三级菜单
+    {
+      'name': 'settings',
+      'parentId': 10028,
+      'id': 10030,
+      'meta': {
+        'title': '个人设置',
+        'hideHeader': true,
+        'hideChildren': true,
+        'show': true
+      },
+      'redirect': '/account/settings/base',
+      'component': 'AccountSettings'
+    },
+    {
+      'name': 'BaseSettings',
+      'path': '/account/settings/base',
+      'parentId': 10030,
+      'id': 10031,
+      'meta': {
+        'title': '基本设置',
+        'show': false
+      },
+      'component': 'BaseSettings'
+    },
+    {
+      'name': 'SecuritySettings',
+      'path': '/account/settings/security',
+      'parentId': 10030,
+      'id': 10032,
+      'meta': {
+        'title': '安全设置',
+        'show': false
+      },
+      'component': 'SecuritySettings'
+    },
+    {
+      'name': 'CustomSettings',
+      'path': '/account/settings/custom',
+      'parentId': 10030,
+      'id': 10033,
+      'meta': {
+        'title': '个性化设置',
+        'show': false
+      },
+      'component': 'CustomSettings'
+    },
+    {
+      'name': 'BindingSettings',
+      'path': '/account/settings/binding',
+      'parentId': 10030,
+      'id': 10034,
+      'meta': {
+        'title': '账户绑定',
+        'show': false
+      },
+      'component': 'BindingSettings'
+    },
+    {
+      'name': 'NotificationSettings',
+      'path': '/account/settings/notification',
+      'parentId': 10030,
+      'id': 10034,
+      'meta': {
+        'title': '新消息通知',
+        'show': false
+      },
+      'component': 'NotificationSettings'
+    }
+  ]
+}

ant-design-pro-vue3/mock/user.js

@@ -0,0 +1,69 @@
+// import Mock from 'mockjs'
+const { builder, userNav } = require('./mockUtils')
+const { api, delay, mock, resp } = require("apite");
+
+// id: "@id",
+// number: "@int(5,9)",
+// name: "@name",
+// cname: "@cname",
+// date: "@dateTime",
+// reg: /\w{10}/,
+
+const userApi = {
+  Logout: '/auth/logout',
+  ForgePassword: '/auth/forge-password',
+  Register: '/auth/register',
+  SendSmsErr: '/account/sms_err',
+  // get my info
+  UserInfo: '/user/info',
+  UserMenu: '/user/nav'
+}
+
+api.get("/json", {
+  msg: "json2",
+});
+
+api.post("/auth/login", (ctx) => {
+  let permission = ''
+  if (ctx.post.username === 'admin') {
+    permission = 'admin'
+  } else if (ctx.post.username === 'ant.design') {
+    permission = 'user'
+  } else {
+    return resp.fail('用户名错误,只有admin和ant.design', 403)
+  }
+  return {
+    id: '4291d7da9005377ec9aec4a71ea837f',
+    name: permission,
+    username: 'Ones@github',
+    password: '',
+    avatar: '/avatar2.jpg',
+    status: 1,
+    telephone: '',
+    lastLoginIp: '27.154.74.117',
+    lastLoginTime: 1534837621348,
+    creatorId: 'admin',
+    createTime: 1497160610259,
+    merchantCode: 'TLif2btpzg079h15bk',
+    deleted: 0,
+    permission: [permission],
+    token: '12312312',
+    menu: userNav,
+  }
+});
+
+api.get("/auth/2step-code", (ctx) => {
+  return mock(builder({ stepCode: '@int(0, 1)' }))
+});
+
+api.post("/account/sms", (ctx) => {
+  return mock(builder({ captcha: '@int(10000, 99999)' }))
+});
+
+api.get("/auth/logout", (ctx) => {
+  return builder({}, '[测试接口] 注销成功1')
+});
+
+api.post("/auth/unlock", (ctx) => {
+  return mock({ unlocked: true })
+});

ant-design-pro-vue3/package.json

@@ -0,0 +1,88 @@
+{
+  "name": "Ant_Design_Pro_Vue_3",
+  "version": "0.1.3",
+  "private": true,
+  "scripts": {
+    "dev": "cross-env vite --mode localhost",
+    "debug-vite": "cross-env vite --mode localhost --debug",
+    "build": "vite build",
+    "build-check": "run-p type-check build-only",
+    "preview": "vite preview",
+    "test:unit": "vitest",
+    "type-check": "vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
+    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
+    "format": "prettier --write src/",
+    "dev-ui": "concurrently \"vite -m UseFastDevelopBall\" \"npm run create-module-be\" ",
+    "clean-dev": "vite --force",
+    "v": "ts-node --project config/tsconfig.json config/createModule/index.ts --type=views",
+    "c": "ts-node --project config/tsconfig.json config/createModule/index.ts --type=components",
+    "create-module-be": "ts-node --project config/tsconfig.json config/createModule/backend.ts",
+    "report": "rimraf dist && cross-env vite build"
+  },
+  "dependencies": {
+    "@aesoper/normal-utils": "^0.1.5",
+    "@ant-design/icons-vue": "^6.1.0",
+    "@antv/g2plot": "^2.4.26",
+    "@logicflow/core": "^1.2.1",
+    "@logicflow/extension": "^1.2.1",
+    "@tinymce/tinymce-vue": "^6.0.1",
+    "@types/uuid": "^9.0.8",
+    "@vueuse/core": "^9.13.0",
+    "ant-design-vue": "~3.1.0",
+    "axios": "^1.3.4",
+    "crypto-js": "^4.1.1",
+    "echarts": "^5.4.2",
+    "less": "^4.1.3",
+    "less-loader": "^11.1.0",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.debounce": "^4.0.8",
+    "lodash.pull": "^4.1.0",
+    "mitt": "^3.0.0",
+    "moment": "^2.30.1",
+    "nprogress": "^0.2.0",
+    "sass": "^1.59.3",
+    "throttle-debounce": "^5.0.0",
+    "tinycolor2": "^1.6.0",
+    "tinymce": "^7.2.1",
+    "uuid": "^9.0.1",
+    "vue": "^3.2.0",
+    "vue-clipboard3": "^2.0.0",
+    "vue-i18n": "^9.2.2",
+    "vue-router": "4.1.3",
+    "vuedraggable": "^4.1.0",
+    "vuex": "^4.1.0"
+  },
+  "devDependencies": {
+    "@rushstack/eslint-patch": "^1.2.0",
+    "@types/jsdom": "^21.1.0",
+    "@types/node": "^18.15.3",
+    "@vitejs/plugin-vue": "^5.0.4",
+    "@vitejs/plugin-vue-jsx": "^3.0.0",
+    "@vue/eslint-config-prettier": "^7.1.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
+    "@vue/test-utils": "^2.3.0",
+    "@vue/tsconfig": "^0.1.3",
+    "apite": "^1.4.2",
+    "colors-console": "^1.0.3",
+    "concurrently": "^8.2.0",
+    "cross-env": "^7.0.3",
+    "eslint": "^8.34.0",
+    "eslint-plugin-vue": "^9.9.0",
+    "express": "^4.18.2",
+    "jsdom": "^21.1.0",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.4",
+    "rollup-plugin-visualizer": "^5.9.0",
+    "shelljs": "^0.8.5",
+    "ts-node": "^10.9.1",
+    "typescript": "~4.8.4",
+    "unplugin-vue-components": "^0.24.1",
+    "vite": "^4.1.4",
+    "vite-plugin-optimize-persist": "^0.1.2",
+    "vite-plugin-package-config": "^0.1.1",
+    "vite-plugin-svg-icons": "^2.0.1",
+    "vite-plugin-vue-setup-extend": "^0.4.0",
+    "vitest": "^0.29.1",
+    "vue-tsc": "^1.2.0"
+  }
+}

ant-design-pro-vue3/src/App.vue

@@ -0,0 +1,44 @@
+<template>
+    <a-config-provider :locale="lang[proxy.$i18n.locale]">
+        <router-view />
+    </a-config-provider>
+    <LockScreen />
+</template>
+
+<script lang="ts" setup name="App">
+import { getCurrentInstance, onErrorCaptured, h } from 'vue'
+import zh_CN from 'ant-design-vue/es/locale/zh_CN'
+import en_US from 'ant-design-vue/lib/locale-provider/en_US'
+import { setDeviceType } from '@/utils/device'
+import LockScreen from '@/components/LockScreen/index.vue'
+import emitter from '@/utils/eventBus'
+import { useRouter } from 'vue-router'
+import { Modal } from 'ant-design-vue'
+
+const { proxy } = getCurrentInstance()
+const lang = { 'en-US': en_US, 'zh-CN': zh_CN }
+
+window.onresize = setDeviceType
+setDeviceType()
+
+const router = useRouter()
+emitter.once('axios_goto_login', () => {
+    router.push({ name: 'login' })
+})
+
+//全局错误处理
+onErrorCaptured((err, instance, info) => {
+    if (window.env !== 'localhost') {
+        // debugger
+        console.log(err, instance, info)
+        Modal.error({
+            title: 'System Error',
+            content: h('pre', err.stack),
+            class: 'errorCapturedModal',
+            width: '60%'
+        })
+    }
+})
+</script>
+
+<style></style>

ant-design-pro-vue3/src/api/CurrencyManager.js

@@ -0,0 +1,64 @@
+import settings from '@/settings'
+import request from '@/utils/request'
+const systemPrefix = settings.systemPrefix
+
+// 币种查询查询
+  export function queryCurrency(param) {
+    return request(`${systemPrefix}/im/dhc/zz/automake/zzmanage/currency_manager/CurrencyManagerController.do`, {
+      method: 'post',
+      data: param,
+      requestType: 'form'
+    });
+  }
+
+  export function getTabKeyRule(param) {
+    return request(`${systemPrefix}/system/select/options/getTabKeyRule.do`, {
+      method: 'post',
+      data: param,
+      requestType: 'form'
+    });
+  }
+  export function CurrencyConversionController(param) {
+    return request(`${systemPrefix}/im/dhc/zz/automake/zzmanage/currency_manager/CurrencyConversionController.do`, {
+      method: 'post',
+      data: param,
+      requestType: 'form'
+    });
+  }
+  export function validateRecord(param) {
+    return request(`${systemPrefix}/financemanage/validateRecord.do`, {
+      method: 'post',
+      data: param,
+      requestType: 'form'
+    });
+  }
+  export function CurrencyModifyController(param) {
+    return request(`${systemPrefix}/im/dhc/zz/automake/zzmanage/currency_manager/CurrencyModifyController.do`, {
+      method: 'post',
+      data: param,
+      requestType: 'form',
+      headers: {
+        "X-Requested-With": "XMLHttpRequest"
+      }
+    });
+  }
+  export function CurrencyInsertController(param) {
+    return request(`${systemPrefix}/im/dhc/zz/automake/zzmanage/currency_manager/CurrencyInsertController.do`, {
+      method: 'post',
+      data: param,
+      requestType: 'form',
+      headers: {
+        "X-Requested-With": "XMLHttpRequest"
+      }
+    });
+  }
+  export function searchCurrency(param) {
+    return request(`${systemPrefix}/im/dhc/currencymanager/searchCurrency.do`, {
+      method: 'post',
+      data: param,
+      requestType: 'form',
+      headers: {
+        "X-Requested-With": "XMLHttpRequest"
+      }
+    });
+  }

ant-design-pro-vue3/src/api/api.js

@@ -0,0 +1,34 @@
+import settings from '@/settings'
+import request from '@/utils/request'
+const systemPrefix = settings.systemPrefix
+
+export  function getRole(params) {
+  return request({
+    url: `${systemPrefix}/automake/controller/system/login/SelectRoleNameController?userno=${params}`,
+    method:'post'
+  });
+}
+
+export function login(params) {
+    let datas = {userno:params.username, pwd:params.password, login_role:params.login_role,loginPage:1}
+    return request({
+        url: `${systemPrefix}/automake/controller/system/login/LoginAction`,
+        method: 'post',
+        data:datas
+    })
+}
+
+export function getMenuDataService(params){
+    return request({
+        url: `${systemPrefix}/workflow/category/list/Auth`,
+        method: 'post',
+        data:params
+    })
+}
+
+export function getRoutes(){
+    return request({
+        url: `/__umiDev/routes`,
+        method: 'get',
+    })
+}

ant-design-pro-vue3/src/api/common.js

@@ -0,0 +1,48 @@
+import settings from '@/settings'
+import request from '@/utils/request'
+const systemPrefix = settings.systemPrefix
+/**
+ * 获取下拉数据
+ * 1.根据字段名、表名获取下拉数据
+ * 2.自定义url，获取下拉数据
+ * @param url  请求地址
+ * @param data 请求参数
+ */
+export function getOptions(url,data) {
+  return request({
+    url: `${systemPrefix}${url}`,
+    method: 'post',
+    data
+  })
+}
+export function getDepartmentTree(url,data) {
+  return request({
+    url: `${systemPrefix}${url}`,
+    method: 'post',
+    requestType: 'json',
+    data
+  })
+}
+export function queryIPageRoles(url,data) {
+  return request({
+    url: `${systemPrefix}${url}`,
+    method: 'post',
+    requestType: 'json',
+    data
+  })
+}
+
+/**
+ * 导出方法
+ * @param url       请求地址
+ * @param headers   请求头
+ * @param data      请求参数
+ */
+export function executeExport(url,headers,rquestConfig) {
+  return request({
+    ...rquestConfig,
+    url: `${systemPrefix}${url}`,
+    responseType: 'blob',
+    headers,
+  })
+}

ant-design-pro-vue3/src/api/department.js

@@ -0,0 +1,99 @@
+import settings from '@/settings'
+import request from '@/utils/request'
+const systemPrefix = settings.systemPrefix
+
+/**
+ * 获取机构树
+ * @param data 请求参数
+ */
+export function getDepartmentTree(data) {
+  return request({
+    url: `${systemPrefix}/sys/deparment/getDepartmentTree`,
+    method: 'post',
+    requestType: 'json',
+    data,
+  })
+}
+export function ComDepartSobTreeController(param){
+    return request({
+        url: `${systemPrefix}/im/dhc/zz/automake/zzmanage/accounting_manager/generalAccount_manager/ComDepartSobTreeController.do`,
+        data:{
+            tree_type:param,
+            isParentType:"&&",
+            isAsync:"true",
+            isUseSts:"false",
+            searchFlag:"02",
+            optType:'modify'
+        },
+        method:'post',
+    })
+}
+
+/**
+ * 查询下级机构
+ * @param data 请求参数
+ */
+export function querySubDepartments(data) {
+  return request({
+    url: `${systemPrefix}/sys/deparment/queryLowerDepartments`,
+    method: 'post',
+    requestType: 'json',
+    data,
+  })
+}
+/**机构新增*/
+export function addDepartment(data) {
+  return request({
+    url: `${systemPrefix}/sys/deparment/addDepartment`,
+    method: 'post',
+    requestType: 'json',
+    data,
+  })
+}
+/**
+ * 机构修改
+ * @param data
+ * @returns
+ */
+export function updateDepartment(data) {
+  return request({
+    url: `${systemPrefix}/sys/deparment/updateDepartment`,
+    method: 'post',
+    requestType: 'json',
+    data,
+  })
+}
+/**机构删除，同时会将该机构下所有正常状态的用户一并删除 */
+export function deleteDepAndUser(data) {
+  return request({
+    url: `${systemPrefix}/sys/deparment/deleteDepAndUser`,
+    method: 'post',
+    requestType: 'json',
+    params:data,
+  })
+}
+/**通过机构编号获取部门信息 */
+export function getDepartmentByNo(data) {
+  return request({
+    url: `${systemPrefix}/sys/deparment/getDepartmentByNo`,
+    method: 'post',
+    data,
+  })
+}
+/**机构启用停用 */
+export function changeUseSts(data) {
+  return request({
+    url: `${systemPrefix}/sys/deparment/changeUseSts`,
+    method: 'post',
+    data,
+  })
+}
+
+/**机构恢复*/
+export function restoreDep(params) {
+  return request({
+    url: `${systemPrefix}/sys/deparment/restoreDep`,
+    method: 'post',
+    params,
+  })
+}

ant-design-pro-vue3/src/api/endYear_manager.js

@@ -0,0 +1,35 @@
+import settings from '@/settings'
+import request from '@/utils/request'
+const systemPrefix = settings.systemPrefix
+
+export function getFoundationsController() {
+  return request({
+    url: `${systemPrefix}/im/dhc/zz/automake/zzmanage/comitem_manager/GetFoundationsController.do`,
+    method: 'post',
+    data:{type:'com_item'},
+  })
+}
+export function userDataLevelQueryController() {
+  return request({
+    url: `${systemPrefix}/im/dhc/sys/automake/system/user_manager/UserDataLevelQueryController.do`,
+    method: 'POST',
+  })
+}
+export function getRecursionSqlResultPublicMethod(paramMap) {
+  return request({
+    url: `${systemPrefix}/im/dhc/zz/automake/zzmanage/accounting_manager/generalAccount_manager/GetRecursionSqlResultPublicMethod.do`,
+    method: 'post',
+    data: {
+        str: paramMap.str,
+        extralSql1: new Buffer(String).toString(paramMap.extralSql1),
+        extralSql2: new Buffer(String).toString(paramMap.extralSql2),
+        iniNodeAttr: paramMap.iniNodeAttr,
+        tableName: paramMap.tableName,
+        whereSql: paramMap.whereSql,
+        beforeWhere: paramMap.beforeWhere,
+        afterWhere: paramMap.afterWhere,
+        idColumn: paramMap.idColumn,
+        pidColumn: paramMap.pidColumn
+  }
+})
+}

ant-design-pro-vue3/src/api/onlineUser.js

@@ -0,0 +1,17 @@
+import settings from '@/settings'
+import request from '@/utils/request'
+const systemPrefix = settings.systemPrefix
+  export function query(params) {
+    return request(`${systemPrefix}/im/dhc/sys/automake/system/user_manager/onlineUserList.do`, {
+      method: 'POST',
+      data: params,
+      requestType: 'form'
+    });
+  }
+  export function changeOline(params) {
+    return request(`${systemPrefix}/im/dhc/sys/automake/system/user_manager/setOffOnline.do`, {
+      method: 'POST',
+      data: params,
+      requestType: 'form'
+    });
+  }

ant-design-pro-vue3/src/api/public/dashbord.js

@@ -0,0 +1,17 @@
+import request from '@/utils/request'
+
+const DASHBORD = "/dashbord"
+
+/**
+ * 获取组件信息
+ * @returns 
+ */
+export function queryComponseInfo(){
+  return request({
+    url:`${DASHBORD}/com/system/designHandler/queryComponseInfo`,
+    method: 'post',
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}

ant-design-pro-vue3/src/api/public/fileUpload.js

@@ -0,0 +1,291 @@
+import request from '@/utils/request'
+import settings from '@/settings'
+const { systemPrefix } = settings
+/**
+ * 文件初始化加载查询
+ * @param {*} data
+ * @returns
+ */
+export function queryFileQuery(data) {
+  data.systemNo = systemPrefix
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/queryFileQuery`,
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}
+
+/**
+ * 文件下载
+ * @param {*} data
+ */
+export function fileDownLoadHandler(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/downFile`,
+    method: 'post',
+    data: data,
+    responseType: 'blob',
+  })
+}
+
+/**
+ * 文件删除操作
+ * @param {} data
+ */
+export function fileRemoveHandler(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/deleteFile`,
+    method: 'post',
+    data: data,
+  })
+}
+
+/**
+ * 交易关联文件删除
+ * @param {*} data
+ */
+export function traceRelFileRemoveHanlder(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/deleteYwFile`,
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+  })
+}
+
+/**
+ * 删除文件片段信息
+ * @param {*} data
+ */
+export function fileSplitFragment(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/removeFileFragement`,
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 文件预览转换处理
+ * @param {*} data
+ * @returns
+ */
+export function filePreviewHandler(data, uploaded) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/filePreview`,
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': uploaded ? 'application/x-www-form-urlencoded' : 'multipart/form-data'
+    },
+  })
+}
+
+/**
+ * 加载缩略图
+ * @param {*} data
+ * @returns
+ */
+export function queryThumbUrl(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: `${systemPrefix}/com/system/fileHandler/getPreThumbUrl`,
+      method: 'post',
+      data: data,
+      headers: {
+        'Content-Type': "application/x-www-form-urlencoded"
+      },
+    }).then(function (resp) {
+      resolve({ ...resp, paramter: data })
+    }).catch(function (error) {
+      reject({ ...error, paramter: data });
+    })
+  })
+}
+
+
+/***
+ * 文件上传操作
+ */
+export function uploadFile(dataObj) {
+  const { formData, fileInfo } = dataObj
+  return new Promise((resolve, reject) => {
+    request({
+      url: `${systemPrefix}/com/system/fileHandler/multipleFileUpload`,
+      method: 'post',
+      data: formData,
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      },
+    }).then(function (resp) {
+      resolve({ ...resp, paramter: fileInfo })
+    }).catch(function (error) {
+      console.error('error uploadFile uploadFile  : ', error)
+      reject({ ...error, paramter: fileInfo });
+    })
+  })
+}
+/**
+ * 文件打包下载
+ * @param {*} data
+ */
+export function multipleFileDown(data) {
+  return new Promise((resolve, reject) => {
+    request({
+      url: `${systemPrefix}/com/system/fileHandler/downMultipleFile`,
+      method: 'post',
+      data: data,
+      requestType: 'json',
+      responseType: 'blob',
+    }).then(resp => {
+      resolve(resp)
+    }).catch(err => {
+      reject(err)
+    })
+  })
+}
+
+
+export function queryAllPartition(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/partition/trade/relationship`,
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 文件分区查询
+ * @param {*} data
+ * @returns
+ */
+export function queryPartition(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/partition/listwithpage`,
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 文件分区存储
+ * @param {*} data
+ * @returns
+ */
+export function insertPartition(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/partition/save`,
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 修改文件分区
+ * @param {*} data
+ * @returns
+ */
+export function updatePartition(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/partition/modify`,
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 文件分区删除
+ * @param {*} data
+ * @returns
+ */
+export function deletePartition(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/partition/delete`,
+    method: 'post',
+    data: { partitionNo: data.join() }
+  })
+}
+/**
+ *
+ * @param {*} data
+ * @returns
+ */
+export function savePartitionRel(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/partition/trade/addOrModify`,
+    method: 'post',
+    data: data,
+    requestType: 'json'
+  })
+}
+
+/**
+ * 删除关联信息
+ * @param {*} data
+ * @returns
+ */
+export function deletePartitionRelApi(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/partition/trade/delete`,
+    method: 'post',
+    data: data,
+    requestType: 'json'
+  })
+}
+
+/**
+ *
+ * @param {*} data
+ * @returns
+ */
+export function queryPartitionOrDefault(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/partition/queryPartitionOrDefault`,
+    method: 'post',
+    data: data,
+    requestType: 'json'
+  })
+}
+/**
+ * 获取文件最大上传个数限制
+ * @returns
+ */
+export function queryMaxFileSize() {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/partition/queryMaxFileSize`,
+    method: 'post',
+    requestType: 'json'
+  })
+}
+
+/**
+ * pdf 文件下载
+ * @param {} param
+ */
+export function downPdf(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/downPdf`,
+    method: 'post',
+    data: data,
+    responseType: 'blob',
+  })
+}
+
+/**
+ * 查询附件个数
+ * @param {*} data
+ * @returns
+ */
+export function queryFileCount(data) {
+  return request({
+    url: `${systemPrefix}/com/system/fileHandler/queryFileCount`,
+    method: 'post',
+    data: data,
+    requestType: 'json'
+  })
+}

ant-design-pro-vue3/src/api/public/flowable.js

@@ -0,0 +1,375 @@
+import request from '@/utils/request'
+import settings from '@/settings'
+const { flowablePrefix } = settings
+
+/**
+ * 代办任务查询
+ * @param {*} data
+ * @returns
+ */
+export function queryTaskApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowTaskManagement/queryPage`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}
+
+/**
+ * 查询流程类型
+ * @param {*} data
+ * @returns
+ */
+export function queryCategoryType (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowBusinessInteraction/queryType`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}
+
+/**
+ * 任务取消
+ * @param {*} data
+ * @returns
+ */
+export function taskCancelApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowTaskManagement/handlerHumanTask`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}
+
+/**
+ * 任务撤回
+ * @param {*} data
+ * @returns
+ */
+export function taskWithDrawApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowTaskManagement/handlerHumanTask`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}
+
+/**
+ * 任务查看
+ * @param {*} data
+ * @returns
+ */
+export function taskViewApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowTaskManagement/gettaskstartInfo`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}
+
+/**
+ * 任务追踪
+ * @param {*} data
+ * @returns
+ */
+export function taskTraceApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowTaskManagement/getTaskSvg`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}
+
+/**
+ * 任务提交
+ * @param {*} data
+ * @returns
+ */
+export function taskSubmitApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowTaskManagement/submit`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}
+
+/**
+ * 查询信息
+ * @param {*} data
+ * @returns
+ */
+export function taskAssigneeApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowBusinessInteraction/userQuery`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}
+
+/**
+ * 查询岗位信息
+ * @param {*} data
+ * @returns
+ */
+export function taskRoleApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowBusinessInteraction/roleQuery`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}
+
+/**
+ * 指派保存
+ * @returns
+ */
+export function taskAssigneeSumitApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowTaskManagement/handleTaskWithAssignList`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}
+
+/**
+ * 获取子流程流程实例 信息
+ * @param {*} params
+ * @returns
+ */
+export function getChildFlowInstance (params) {
+  return request({
+    url: `${flowablePrefix}/V1/flowTaskManagement/getChildFlowInstance`,
+    method: 'post',
+    params,
+  })
+}
+
+/**
+ * 流程模型查询
+ * @param {*} data
+ * @returns
+ */
+export function queryProcModelApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1//flowDefinitionManagement/query`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+/**
+ * 通过流程模型id 查询xml
+ * @param {*} data
+ * @returns
+ */
+export function queryProcModelByIdApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowDefinitionManagement/design`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+/**
+ * 查询关联页面查询信息
+ * @param {} data
+ */
+export function queryRefPageApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowBusinessInteraction/getAssociatePageQuery`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+
+/**
+ *
+ * @param {*} data
+ * @returns
+ */
+export function queryBusinessData (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowBusinessInteraction/queryBusinessData`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+/**
+ * 流程模型保存草稿
+ */
+export function saveModelApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowDefinitionManagement/insert`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+/**
+ * 流程模型删除
+ * @param {*} data
+ * @returns
+ */
+export function deleteModelApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowDefinitionManagement/deleteModel`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+/**
+ * 查询流程模型是否存在
+ * @param {*} data
+ * @returns
+ */
+export function queryProcessModelApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowDefinitionManagement/findCategoryModel?category=${data.category}`,
+    method: 'get',
+    // data: data
+  })
+}
+
+/**
+ * 流程模型部署
+ * @param {*} data
+ * @returns
+ */
+export function processModelDeployApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1//flowDefinitionManagement/publish`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+/**
+ * 导出
+ * @param {*} data
+ * @returns
+ */
+export function exportModelApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowDefinitionManagement/designList`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+/**
+ * 导入
+ * @param {*} data
+ * @returns
+ */
+export function importModelApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowDefinitionManagement/saveDisigenBach`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+
+/**
+ * 流程版本管理
+ * @param {*} data
+ * @returns
+ */
+export function versionCtlModelApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowDefinitionManagement/getModelHistListById`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+/**
+ * 删除历史流程模型
+ * @param {*} data
+ */
+export function deleteHiModelApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowDefinitionManagement/deleteModelInHis`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+/**
+ * 历史流程模型部署
+ * @param {*} data
+ * @returns
+ */
+export function deployHiModelApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowDefinitionManagement/publishInHistory`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+/**
+ * 查询子流程信息
+ * @param {*} data
+ * @returns
+ */
+export function queryCallActivityApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowDefinitionManagement/processDefQuery`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+/**
+ * 查询流程条件参数
+ * @param {*} data
+ * @returns
+ */
+export function queryBusinessParamApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowBusinessInteraction/getBusinessParamQuery`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}
+
+/**
+ * 判断流程模型编号是否存在
+ * @param {*} data
+ */
+export function procModelExistApi (data) {
+  return request({
+    url: `${flowablePrefix}/V1/flowDefinitionManagement/hasModel`,
+    method: 'post',
+    requestType: 'json',
+    data: data
+  })
+}

ant-design-pro-vue3/src/api/public/genertorApi.js

@@ -0,0 +1,18 @@
+import request from '@/utils/request'
+import { systemPrefix } from '@/settings'
+
+/**
+ * 查询sql 结果集
+ * @param {*} data 
+ * @returns 
+ */
+export function querySqlResult(data){
+  return request({
+    url:`${systemPrefix}/system/generator/json/querySqlResult`,
+    method: 'post',
+    data: data,
+    headers: {
+      'Content-Type': 'application/json;charset=UTF-8'
+    }
+  })
+}

ant-design-pro-vue3/src/api/public/process.js

@@ -0,0 +1,47 @@
+import request from '@/utils/request'
+import { flowablePrefix } from '@/settings'
+
+//查询已部署流程数据
+export function deployedQuery (data) {
+    return request({
+        url: `${flowablePrefix}/V1/flowDefinitionManagement/deployedQuery`,
+        method: 'post',
+        data: data,
+        requestType: 'json',
+    })
+}
+
+//流程定义启用
+export function processDefStart (data) {
+    return request({
+        url: `${flowablePrefix}/V1/flowDefinitionManagement/startusing`,
+        method: 'post',
+        data: data,
+        requestType: 'json',
+    })
+}
+
+//流程定义挂起
+export function processDefStop (data) {
+    return request({
+        url: `${flowablePrefix}/V1/flowDefinitionManagement/stopusing`,
+        method: 'post',
+        data: data,
+        requestType: 'json',
+    })
+}
+
+
+
+/**
+ * 流程实例查询
+ * @param {*} data 
+ */
+export function queryInstanceApi (data) {
+    return request({
+        url: `${flowablePrefix}/V1/flowInstancesManagement/query`,
+        method: 'post',
+        data: data,
+        requestType: 'json'
+    })
+}

ant-design-pro-vue3/src/api/public/sequenceApi.js

@@ -0,0 +1,71 @@
+import request from '@/utils/request'
+import { systemPrefix } from '@/settings'
+
+/**
+ * 分页查询
+ * @param {*} data 
+ * @returns 
+ */
+export function queryPage (data) {
+
+  return request({
+    url: `${systemPrefix}/sys/ruledef/queryPageList`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}
+
+/**
+ * 根据no 查询规则信息
+ * @param {} data 
+ * @returns 
+ */
+export function queryRuleByNo (data) {
+  return request({
+    url: `${systemPrefix}/sys/ruledef/queryRuleByNo`,
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 规则删除处理
+ * @param {*} data 
+ */
+export function removeRule (data) {
+
+  return request({
+    url: `${systemPrefix}/sys/ruledef/deleteByNo`,
+    method: 'post',
+    data: data
+  })
+}
+
+/**
+ * 更新规则信息
+ * @param {*} data 
+ */
+export function updateRuleDef (data) {
+
+  return request({
+    url: `${systemPrefix}/sys/ruledef/update`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}
+
+/**
+ * 添加规则信息
+ * @param {*} data 
+ */
+export function addRuleDef (data) {
+
+  return request({
+    url: `${systemPrefix}/sys/ruledef/insert`,
+    method: 'post',
+    data: data,
+    requestType: 'json',
+  })
+}

ant-design-pro-vue3/src/api/userLogSearch.js

@@ -0,0 +1,18 @@
+import settings from '@/settings'
+import request from '@/utils/request'
+const systemPrefix = settings.systemPrefix
+
+export function getUserOptionList(params) {
+  return request({
+    url: `${systemPrefix}/im/dhc/sys/automake/system/UserOptionListController.do`,
+    method:'post',
+    data:params
+  });
+}
+export function list(param) {
+  return request({
+    url: `${systemPrefix}/im/dhc/zz/automake/zzmanage/comitem_manager/ComItemListController.do`,
+    method:'post',
+    data:param
+  });
+}

ant-design-pro-vue3/src/assets/background.svg

@@ -0,0 +1,69 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg width="1361px" height="609px" viewBox="0 0 1361 609" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 46.2 (44496) - http://www.bohemiancoding.com/sketch -->
+    <title>Group 21</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Ant-Design-Pro-3.0" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="账户密码登录-校验" transform="translate(-79.000000, -82.000000)">
+            <g id="Group-21" transform="translate(77.000000, 73.000000)">
+                <g id="Group-18" opacity="0.8" transform="translate(74.901416, 569.699158) rotate(-7.000000) translate(-74.901416, -569.699158) translate(4.901416, 525.199158)">
+                    <ellipse id="Oval-11" fill="#CFDAE6" opacity="0.25" cx="63.5748792" cy="32.468367" rx="21.7830479" ry="21.766008"></ellipse>
+                    <ellipse id="Oval-3" fill="#CFDAE6" opacity="0.599999964" cx="5.98746479" cy="13.8668601" rx="5.2173913" ry="5.21330997"></ellipse>
+                    <path d="M38.1354514,88.3520215 C43.8984227,88.3520215 48.570234,83.6838647 48.570234,77.9254015 C48.570234,72.1669383 43.8984227,67.4987816 38.1354514,67.4987816 C32.3724801,67.4987816 27.7006688,72.1669383 27.7006688,77.9254015 C27.7006688,83.6838647 32.3724801,88.3520215 38.1354514,88.3520215 Z" id="Oval-3-Copy" fill="#CFDAE6" opacity="0.45"></path>
+                    <path d="M64.2775582,33.1704963 L119.185836,16.5654915" id="Path-12" stroke="#CFDAE6" stroke-width="1.73913043" stroke-linecap="round" stroke-linejoin="round"></path>
+                    <path d="M42.1431708,26.5002681 L7.71190162,14.5640702" id="Path-16" stroke="#E0B4B7" stroke-width="0.702678964" opacity="0.7" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
+                    <path d="M63.9262187,33.521561 L43.6721326,69.3250951" id="Path-15" stroke="#BACAD9" stroke-width="0.702678964" stroke-linecap="round" stroke-linejoin="round" stroke-dasharray="1.405357899873153,2.108036953469981"></path>
+                    <g id="Group-17" transform="translate(126.850922, 13.543654) rotate(30.000000) translate(-126.850922, -13.543654) translate(117.285705, 4.381889)" fill="#CFDAE6">
+                        <ellipse id="Oval-4" opacity="0.45" cx="9.13482653" cy="9.12768076" rx="9.13482653" ry="9.12768076"></ellipse>
+                        <path d="M18.2696531,18.2553615 C18.2696531,13.2142826 14.1798519,9.12768076 9.13482653,9.12768076 C4.08980114,9.12768076 0,13.2142826 0,18.2553615 L18.2696531,18.2553615 Z" id="Oval-4" transform="translate(9.134827, 13.691521) scale(-1, -1) translate(-9.134827, -13.691521) "></path>
+                    </g>
+                </g>
+                <g id="Group-14" transform="translate(216.294700, 123.725600) rotate(-5.000000) translate(-216.294700, -123.725600) translate(106.294700, 35.225600)">
+                    <ellipse id="Oval-2" fill="#CFDAE6" opacity="0.25" cx="29.1176471" cy="29.1402439" rx="29.1176471" ry="29.1402439"></ellipse>
+                    <ellipse id="Oval-2" fill="#CFDAE6" opacity="0.3" cx="29.1176471" cy="29.1402439" rx="21.5686275" ry="21.5853659"></ellipse>
+                    <ellipse id="Oval-2-Copy" stroke="#CFDAE6" opacity="0.4" cx="179.019608" cy="138.146341" rx="23.7254902" ry="23.7439024"></ellipse>
+                    <ellipse id="Oval-2" fill="#BACAD9" opacity="0.5" cx="29.1176471" cy="29.1402439" rx="10.7843137" ry="10.7926829"></ellipse>
+                    <path d="M29.1176471,39.9329268 L29.1176471,18.347561 C23.1616351,18.347561 18.3333333,23.1796097 18.3333333,29.1402439 C18.3333333,35.1008781 23.1616351,39.9329268 29.1176471,39.9329268 Z" id="Oval-2" fill="#BACAD9"></path>
+                    <g id="Group-9" opacity="0.45" transform="translate(172.000000, 131.000000)" fill="#E6A1A6">
+                        <ellipse id="Oval-2-Copy-2" cx="7.01960784" cy="7.14634146" rx="6.47058824" ry="6.47560976"></ellipse>
+                        <path d="M0.549019608,13.6219512 C4.12262681,13.6219512 7.01960784,10.722722 7.01960784,7.14634146 C7.01960784,3.56996095 4.12262681,0.670731707 0.549019608,0.670731707 L0.549019608,13.6219512 Z" id="Oval-2-Copy-2" transform="translate(3.784314, 7.146341) scale(-1, 1) translate(-3.784314, -7.146341) "></path>
+                    </g>
+                    <ellipse id="Oval-10" fill="#CFDAE6" cx="218.382353" cy="138.685976" rx="1.61764706" ry="1.61890244"></ellipse>
+                    <ellipse id="Oval-10-Copy-2" fill="#E0B4B7" opacity="0.35" cx="179.558824" cy="175.381098" rx="1.61764706" ry="1.61890244"></ellipse>
+                    <ellipse id="Oval-10-Copy" fill="#E0B4B7" opacity="0.35" cx="180.098039" cy="102.530488" rx="2.15686275" ry="2.15853659"></ellipse>
+                    <path d="M28.9985381,29.9671598 L171.151018,132.876024" id="Path-11" stroke="#CFDAE6" opacity="0.8"></path>
+                </g>
+                <g id="Group-10" opacity="0.799999952" transform="translate(1054.100635, 36.659317) rotate(-11.000000) translate(-1054.100635, -36.659317) translate(1026.600635, 4.659317)">
+                    <ellipse id="Oval-7" stroke="#CFDAE6" stroke-width="0.941176471" cx="43.8135593" cy="32" rx="11.1864407" ry="11.2941176"></ellipse>
+                    <g id="Group-12" transform="translate(34.596774, 23.111111)" fill="#BACAD9">
+                        <ellipse id="Oval-7" opacity="0.45" cx="9.18534718" cy="8.88888889" rx="8.47457627" ry="8.55614973"></ellipse>
+                        <path d="M9.18534718,17.4450386 C13.8657264,17.4450386 17.6599235,13.6143199 17.6599235,8.88888889 C17.6599235,4.16345787 13.8657264,0.332739156 9.18534718,0.332739156 L9.18534718,17.4450386 Z" id="Oval-7"></path>
+                    </g>
+                    <path d="M34.6597385,24.809694 L5.71666084,4.76878945" id="Path-2" stroke="#CFDAE6" stroke-width="0.941176471"></path>
+                    <ellipse id="Oval" stroke="#CFDAE6" stroke-width="0.941176471" cx="3.26271186" cy="3.29411765" rx="3.26271186" ry="3.29411765"></ellipse>
+                    <ellipse id="Oval-Copy" fill="#F7E1AD" cx="2.79661017" cy="61.1764706" rx="2.79661017" ry="2.82352941"></ellipse>
+                    <path d="M34.6312443,39.2922712 L5.06366663,59.785082" id="Path-10" stroke="#CFDAE6" stroke-width="0.941176471"></path>
+                </g>
+                <g id="Group-19" opacity="0.33" transform="translate(1282.537219, 446.502867) rotate(-10.000000) translate(-1282.537219, -446.502867) translate(1142.537219, 327.502867)">
+                    <g id="Group-17" transform="translate(141.333539, 104.502742) rotate(275.000000) translate(-141.333539, -104.502742) translate(129.333539, 92.502742)" fill="#BACAD9">
+                        <circle id="Oval-4" opacity="0.45" cx="11.6666667" cy="11.6666667" r="11.6666667"></circle>
+                        <path d="M23.3333333,23.3333333 C23.3333333,16.8900113 18.1099887,11.6666667 11.6666667,11.6666667 C5.22334459,11.6666667 0,16.8900113 0,23.3333333 L23.3333333,23.3333333 Z" id="Oval-4" transform="translate(11.666667, 17.500000) scale(-1, -1) translate(-11.666667, -17.500000) "></path>
+                    </g>
+                    <circle id="Oval-5-Copy-6" fill="#CFDAE6" cx="201.833333" cy="87.5" r="5.83333333"></circle>
+                    <path d="M143.5,88.8126685 L155.070501,17.6038544" id="Path-17" stroke="#BACAD9" stroke-width="1.16666667"></path>
+                    <path d="M17.5,37.3333333 L127.466252,97.6449735" id="Path-18" stroke="#BACAD9" stroke-width="1.16666667"></path>
+                    <polyline id="Path-19" stroke="#CFDAE6" stroke-width="1.16666667" points="143.902597 120.302281 174.935455 231.571342 38.5 147.510847 126.366941 110.833333"></polyline>
+                    <path d="M159.833333,99.7453842 L195.416667,89.25" id="Path-20" stroke="#E0B4B7" stroke-width="1.16666667" opacity="0.6"></path>
+                    <path d="M205.333333,82.1372105 L238.719406,36.1666667" id="Path-24" stroke="#BACAD9" stroke-width="1.16666667"></path>
+                    <path d="M266.723424,132.231988 L207.083333,90.4166667" id="Path-25" stroke="#CFDAE6" stroke-width="1.16666667"></path>
+                    <circle id="Oval-5" fill="#C1D1E0" cx="156.916667" cy="8.75" r="8.75"></circle>
+                    <circle id="Oval-5-Copy-3" fill="#C1D1E0" cx="39.0833333" cy="148.75" r="5.25"></circle>
+                    <circle id="Oval-5-Copy-2" fill-opacity="0.6" fill="#D1DEED" cx="8.75" cy="33.25" r="8.75"></circle>
+                    <circle id="Oval-5-Copy-4" fill-opacity="0.6" fill="#D1DEED" cx="243.833333" cy="30.3333333" r="5.83333333"></circle>
+                    <circle id="Oval-5-Copy-5" fill="#E0B4B7" cx="175.583333" cy="232.75" r="5.25"></circle>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

ant-design-pro-vue3/src/assets/icons/battery.svg

@@ -0,0 +1 @@
+<svg  fill="currentColor" t="1641369435663" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14593" data-darkreader-inline-fill="" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M173.037714 768h573.897143c55.405714 0 102.070857-5.174857 135.131429-38.235429 33.060571-33.060571 37.595429-79.067429 37.595428-134.491428v-166.217143c0-55.424-4.534857-101.76-37.595428-134.491429C848.694857 261.485714 802.340571 256 746.934857 256H172.068571c-54.436571 0-101.101714 5.504-134.162285 38.564571C4.864 327.606857 0 373.632 0 428.068571v167.204572c0 55.405714 4.864 101.76 37.906286 134.491428C70.966857 762.825143 117.632 768 173.037714 768z m-9.069714-52.169143c-33.371429 0-68.388571-4.534857-87.808-23.972571-19.785143-19.785143-23.990857-54.125714-23.990857-87.497143V420.937143c0-34.029714 4.205714-69.028571 23.661714-88.484572 19.748571-19.748571 55.094857-24.301714 89.106286-24.301714h591.067428c33.060571 0 68.388571 4.864 87.826286 24.32 19.748571 19.748571 23.661714 54.107429 23.661714 87.478857v184.393143c0 33.371429-4.224 67.712-23.661714 87.497143-19.437714 19.748571-54.765714 23.954286-87.826286 23.954286z m-6.473143-44.068571h605.001143c23.972571 0 37.266286-3.254857 47.634286-13.293715 10.368-10.368 13.275429-23.972571 13.275428-47.634285V413.494857c0-23.990857-3.236571-37.266286-13.275428-47.634286-10.368-10.368-23.661714-13.293714-47.634286-13.293714H157.494857c-23.990857 0-37.266286 2.925714-47.634286 13.293714-10.368 10.368-13.293714 23.643429-13.293714 47.634286v197.339429c0 23.661714 2.925714 37.266286 13.293714 47.634285 10.368 10.057143 23.643429 13.293714 47.634286 13.293715z m806.564572-77.787429c25.6-1.609143 59.940571-34.340571 59.940571-83.931428 0-49.243429-34.358857-81.974857-59.940571-83.602286z" p-id="14594"></path></svg>

ant-design-pro-vue3/src/assets/icons/batteryCharge.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg  fill="currentColor" t="1641369582138" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="19418" data-darkreader-inline-fill="" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M458.666667 256H725.333333a128 128 0 0 1 127.786667 120.490667L853.333333 384v42.666667l42.666667 0.768a42.666667 42.666667 0 0 1 42.368 37.504l0.341333 5.12v85.333333a42.666667 42.666667 0 0 1-36.949333 42.325333l-5.717333 0.384L853.333333 597.333333v42.666667a128 128 0 0 1-120.490666 127.786667L725.333333 768H341.12a32 32 0 0 1-31.701333-27.648l-0.298667-4.352v-192a32 32 0 0 1 27.690667-31.701333L341.12 512h26.794667c30.549333 0 55.637333-23.296 58.453333-53.12l0.298667-5.632V288a32 32 0 0 1 27.648-31.701333L458.666667 256H725.333333h-266.666666zM283.52 170.965333L287.872 170.666667a32 32 0 0 1 31.701333 27.648l0.298667 4.352L319.829333 256h32.341334a32 32 0 0 1 32 32v106.624a74.666667 74.666667 0 0 1-74.666667 74.666667l-42.794667-0.042667v266.453333a32 32 0 0 1-27.605333 31.701334l-4.352 0.298666a32 32 0 0 1-31.701333-27.648l-0.298667-4.352v-266.453333H160A74.666667 74.666667 0 0 1 85.333333 394.624V288A32 32 0 0 1 117.333333 256h32.042667V202.666667a32 32 0 0 1 27.648-31.701334L181.376 170.666667a32 32 0 0 1 31.701333 27.648l0.298667 4.352V256h42.453333V202.666667a32 32 0 0 1 27.733334-31.701334l4.266666-0.298666-4.266666 0.298666z" p-id="19419"></path></svg>

ant-design-pro-vue3/src/assets/icons/bx-analyse.svg

@@ -0,0 +1 @@
+<svg  fill="currentColor" t="1551058675966" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7872" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M85.333333 512h85.333334a340.736 340.736 0 0 1 99.712-241.621333 337.493333 337.493333 0 0 1 108.458666-72.96 346.453333 346.453333 0 0 1 261.546667-1.749334A106.154667 106.154667 0 0 0 746.666667 298.666667C805.802667 298.666667 853.333333 251.136 853.333333 192S805.802667 85.333333 746.666667 85.333333c-29.397333 0-55.978667 11.776-75.221334 30.933334-103.722667-41.514667-222.848-40.874667-325.76 2.517333a423.594667 423.594667 0 0 0-135.68 91.264 423.253333 423.253333 0 0 0-91.306666 135.637333A426.88 426.88 0 0 0 85.333333 512z m741.248 133.205333c-17.109333 40.618667-41.685333 77.141333-72.96 108.416s-67.797333 55.850667-108.458666 72.96a346.453333 346.453333 0 0 1-261.546667 1.749334A106.154667 106.154667 0 0 0 277.333333 725.333333C218.197333 725.333333 170.666667 772.864 170.666667 832S218.197333 938.666667 277.333333 938.666667c29.397333 0 55.978667-11.776 75.221334-30.933334A425.173333 425.173333 0 0 0 512 938.666667a425.941333 425.941333 0 0 0 393.258667-260.352A426.325333 426.325333 0 0 0 938.666667 512h-85.333334a341.034667 341.034667 0 0 1-26.752 133.205333z" p-id="7873"></path><path d="M512 318.378667c-106.752 0-193.621333 86.869333-193.621333 193.621333S405.248 705.621333 512 705.621333s193.621333-86.869333 193.621333-193.621333S618.752 318.378667 512 318.378667z m0 301.909333c-59.690667 0-108.288-48.597333-108.288-108.288S452.309333 403.712 512 403.712s108.288 48.597333 108.288 108.288-48.597333 108.288-108.288 108.288z" p-id="7874"></path></svg>

ant-design-pro-vue3/src/assets/icons/logo.svg

@@ -0,0 +1,29 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg viewBox="0 0 128 128" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+  <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
+  <title>Vue</title>
+  <desc>Created with Sketch.</desc>
+  <defs>
+    <linearGradient x1="69.644116%" y1="0%" x2="69.644116%" y2="100%" id="linearGradient-1">
+      <stop stop-color="#29CDFF" offset="0%"></stop>
+      <stop stop-color="#148EFF" offset="37.8600687%"></stop>
+      <stop stop-color="#0A60FF" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="-19.8191553%" y1="-36.7931464%" x2="138.57919%" y2="157.637507%" id="linearGradient-2">
+      <stop stop-color="#29CDFF" offset="0%"></stop>
+      <stop stop-color="#0F78FF" offset="100%"></stop>
+    </linearGradient>
+    <linearGradient x1="68.1279872%" y1="-35.6905737%" x2="30.4400914%" y2="114.942679%" id="linearGradient-3">
+      <stop stop-color="#FA8E7D" offset="0%"></stop>
+      <stop stop-color="#F74A5C" offset="51.2635191%"></stop>
+      <stop stop-color="#F51D2C" offset="100%"></stop>
+    </linearGradient>
+  </defs>
+  <g id="Vue" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+    <g id="Group" transform="translate(19.000000, 9.000000)">
+      <path d="M89.96,90.48 C78.58,93.48 68.33,83.36 67.62,82.48 L46.6604487,62.2292258 C45.5023849,61.1103236 44.8426845,59.5728835 44.8296987,57.9626396 L44.5035564,17.5209948 C44.4948861,16.4458744 44.0537714,15.4195095 43.2796864,14.6733517 L29.6459999,1.53153737 C28.055475,-0.00160504005 25.5232423,0.0449126588 23.9900999,1.63543756 C23.2715121,2.38092066 22.87,3.37600834 22.87,4.41143746 L22.87,64.3864751 C22.87,67.0807891 23.9572233,69.6611067 25.885409,71.5429748 L63.6004615,108.352061 C65.9466323,110.641873 69.6963584,110.624605 72.0213403,108.313281" id="Path-Copy" fill="url(#linearGradient-1)" fill-rule="nonzero" transform="translate(56.415000, 54.831157) scale(-1, 1) translate(-56.415000, -54.831157) "></path>
+      <path d="M68,90.1163122 C56.62,93.1163122 45.46,83.36 44.75,82.48 L23.7904487,62.2292258 C22.6323849,61.1103236 21.9726845,59.5728835 21.9596987,57.9626396 L21.6335564,17.5209948 C21.6248861,16.4458744 21.1837714,15.4195095 20.4096864,14.6733517 L6.7759999,1.53153737 C5.185475,-0.00160504005 2.65324232,0.0449126588 1.12009991,1.63543756 C0.401512125,2.38092066 3.90211878e-13,3.37600834 3.90798505e-13,4.41143746 L3.94351218e-13,64.3864751 C3.94681177e-13,67.0807891 1.08722326,69.6611067 3.01540903,71.5429748 L40.7807092,108.401101 C43.1069304,110.671444 46.8180151,110.676525 49.1504445,108.412561" id="Path" fill="url(#linearGradient-2)" fill-rule="nonzero"></path>
+      <path d="M43.2983488,19.0991931 L27.5566079,3.88246244 C26.7624281,3.11476967 26.7409561,1.84862177 27.5086488,1.05444194 C27.8854826,0.664606611 28.4044438,0.444472651 28.9466386,0.444472651 L60.3925021,0.444472651 C61.4970716,0.444472651 62.3925021,1.33990315 62.3925021,2.44447265 C62.3925021,2.9858375 62.1730396,3.50407742 61.7842512,3.88079942 L46.0801285,19.0975301 C45.3051579,19.8484488 44.0742167,19.8491847 43.2983488,19.0991931 Z" id="Path" fill="url(#linearGradient-3)"></path>
+    </g>
+  </g>
+</svg>

ant-design-pro-vue3/src/components/ColorPicker/color.ts

@@ -0,0 +1,174 @@
+import tinycolor, { Instance } from "tinycolor2";
+import { isDef, isNull } from "@aesoper/normal-utils";
+import debounce from "lodash.debounce";
+
+export interface Alpha {
+  a: number;
+}
+
+export interface PRGB {
+  r: string;
+  g: string;
+  b: string;
+}
+
+export interface PRGBA extends PRGB, Alpha {}
+
+export interface RGB {
+  r: number;
+  g: number;
+  b: number;
+}
+
+export interface RGBA extends RGB, Alpha {}
+
+export interface HSL {
+  h: number;
+  s: number;
+  l: number;
+}
+
+export interface HSLA extends HSL, Alpha {}
+
+export interface HSV {
+  h: number;
+  s: number;
+  v: number;
+}
+
+export interface HSVA extends HSV {
+  a: number;
+}
+
+export interface ColorInstance {
+  hex?: string;
+  hex8?: string;
+  hsl?: HSLA;
+  hsv?: HSVA;
+  rgb?: RGBA;
+  alpha?: number;
+  source?: string;
+  oldHue?: number;
+}
+
+export interface ColorAttrs {
+  hex: string;
+  hex8: string;
+  hsl: HSLA;
+  hsv: HSVA;
+  rgb: RGBA;
+  alpha: number;
+  source: string;
+  oldHue: number;
+}
+
+type ColorInputWithoutInstance =
+  | string
+  | PRGB
+  | PRGBA
+  | RGB
+  | RGBA
+  | HSL
+  | HSLA
+  | HSV
+  | HSVA;
+
+export type ColorInput = ColorInstance | ColorInputWithoutInstance;
+
+export type ColorFormat =
+  | "rgb"
+  | "prgb"
+  | "hex"
+  | "hex6"
+  | "hex3"
+  | "hex4"
+  | "hex8"
+  | "name"
+  | "hsl"
+  | "hsv";
+
+export class Color {
+  protected instance: Instance = tinycolor("#000000");
+
+  parseColor(data: any, oldHue?: number): ColorAttrs {
+    if (isDef(data) || isNull(data)) {
+      data = "#000000";
+    }
+
+    if (data && data.hsl) {
+      this.instance = tinycolor(data.hsl);
+    } else if (data && data.hex && data.hex.length > 0) {
+      this.instance = tinycolor(data.hex);
+    } else if (data && data.hex8 && data.hex8.length > 0) {
+      this.instance = tinycolor(data.hex8);
+    } else if (data && data.hsv) {
+      this.instance = tinycolor(data.hsv);
+    } else if (data && data.rgba) {
+      this.instance = tinycolor(data.rgba);
+    } else if (data && data.rgb) {
+      this.instance = tinycolor(data.rgb);
+    } else {
+      this.instance = tinycolor(data);
+    }
+
+    const hsl = this.instance.toHsl();
+    const hsv = this.instance.toHsv();
+    const rgb = this.instance.toRgb();
+
+    if (hsl.s === 0) {
+      hsv.h = hsl.h = data.h || (data.hsl && data.hsl.h) || oldHue || 0;
+    }
+
+    if (hsv.h === 0 || hsl.h === 0) {
+      hsv.h = hsl.h = data.h || oldHue || data.oldHue || 0;
+    }
+
+    if (hsv.v === 0) {
+      hsv.s = (data.s && data.s) || (data.hsv && data.hsv.s) || 0;
+    }
+
+    return {
+      hsl: {
+        h: Math.round(hsl.h),
+        s: Number(Math.round(hsl.s * 100).toFixed(2)) / 100,
+        l: Number(Math.round(hsl.l * 100).toFixed(2)) / 100,
+        a: Math.round(hsl.a * 100) / 100
+      },
+      hex: this.instance.toHexString().toUpperCase(),
+      hex8: this.instance.toHex8String().toUpperCase(),
+      rgb: {
+        r: Math.round(rgb.r),
+        g: Math.round(rgb.g),
+        b: Math.round(rgb.b),
+        a: Math.round(rgb.a * 100) / 100
+      },
+      hsv: {
+        h: Math.round(hsv.h),
+        s: Math.round(hsv.s * 100) / 100,
+        v: Math.round(hsv.v * 100) / 100,
+        a: Math.round(hsl.a * 100) / 100
+      },
+      oldHue: Math.round(data.h || oldHue || hsl.h),
+      source: data.source,
+      alpha: Math.round((data.a || this.instance.getAlpha()) * 100) / 100
+    };
+  }
+
+  format(format: ColorFormat): string {
+    return this.instance.toString(format);
+  }
+}
+
+export const debounceFn = debounce(
+  (fn: Function) => {
+    fn();
+  },
+  200,
+  {
+    leading: true,
+    trailing: false
+  }
+);
+
+export const MAX_STORAGE_LENGTH = 8;
+export const STORAGE_COLOR_KEY = "colorList";

ant-design-pro-vue3/src/components/ColorPicker/common/Alpha.vue

@@ -0,0 +1,255 @@
+<template>
+  <div class="bee-alpha-slider transparent" :class="{
+    'is-vertical': vertical,
+    'small-alpha-slider': size === 'small' && !vertical
+  }">
+    <div class="bee-alpha-slider__bar" ref="barEle" :style="gradientColor" @click="onSliderClick">
+      <div class="bee-alpha-slider__bar-pointer" :class="{ 'small-bar': size === 'small' && !vertical }" ref="cursorEle"
+        :style="{
+          left: cursorLeft + 'px',
+          top: cursorTop + 'px'
+        }">
+        <div class="bee-alpha-slider__bar-handle" :class="{ vertical: vertical }"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="Alpha">
+import {
+  ref,
+  computed,
+  watch,
+  onMounted,
+  nextTick
+} from "vue";
+import { DOMUtils, DragEventOptions } from "@aesoper/normal-utils";
+import tinycolor from "tinycolor2";
+
+const props = defineProps({
+  color: {
+    type: String,
+    default: "#000000"
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: "default"
+  },
+  alpha: {
+    type: Number,
+    default: 1,
+    validator: (value: number) => {
+      return value >= 0 && value <= 1;
+    }
+  }
+})
+const emit = defineEmits(["update:alpha", "change"])
+const barEle = ref<HTMLElement | null>(null);
+const cursorEle = ref<HTMLElement | null>(null);
+
+const cursorLeft = ref(0);
+const cursorTop = ref(0);
+
+const currentAlpha = ref(props.alpha);
+
+const gradientColor = computed(() => {
+  const rgb = tinycolor(props.color)
+    .setAlpha(1)
+    .toRgbString();
+  const alphaGgb = tinycolor(props.color)
+    .setAlpha(0)
+    .toRgbString();
+
+  let deg = "right";
+  if (props.vertical) {
+    deg = "bottom";
+  }
+  return {
+    background: `linear-gradient(to ${deg}, ${alphaGgb}, ${rgb}`
+  };
+});
+
+const getCursorLeft = () => {
+  if (props.vertical) return 0;
+  if (barEle.value && cursorEle.value) {
+    const alpha = currentAlpha.value;
+    const rect = barEle.value?.getBoundingClientRect();
+
+    return Math.round(
+      alpha * (rect.width - cursorEle.value?.offsetWidth) +
+      cursorEle.value?.offsetWidth / 2
+    );
+  }
+
+  return 0;
+};
+
+const getCursorTop = () => {
+  if (!props.vertical) return 0;
+  if (barEle.value && cursorEle.value) {
+    const alpha = currentAlpha.value;
+    const rect = barEle.value?.getBoundingClientRect();
+
+    return Math.round(
+      alpha * (rect.height - cursorEle.value.offsetHeight) +
+      cursorEle.value.offsetHeight / 2
+    );
+  }
+  return 0;
+};
+
+const updatePosition = () => {
+  cursorLeft.value = getCursorLeft();
+  cursorTop.value = getCursorTop();
+};
+
+const onDragSlider = (event: MouseEvent) => {
+  event.stopPropagation();
+  if (barEle.value && cursorEle.value) {
+    const rect = barEle.value?.getBoundingClientRect();
+
+    if (!props.vertical) {
+      let left = event.clientX - rect.left;
+      left = Math.max(cursorEle.value.offsetWidth / 2, left);
+      left = Math.min(left, rect.width - cursorEle.value.offsetWidth / 2);
+
+      currentAlpha.value =
+        Math.round(
+          ((left - cursorEle.value.offsetWidth / 2) /
+            (rect.width - cursorEle.value.offsetWidth)) *
+          100
+        ) / 100;
+    } else {
+      let top = event.clientY - rect.top;
+      top = Math.max(cursorEle.value.offsetHeight / 2, top);
+      top = Math.min(top, rect.height - cursorEle.value.offsetHeight / 2);
+
+      currentAlpha.value =
+        1 -
+        Math.round(
+          ((top - cursorEle.value.offsetHeight / 2) /
+            (rect.height - cursorEle.value.offsetHeight)) *
+          100
+        ) /
+        100;
+    }
+
+    emit("update:alpha", currentAlpha.value);
+    emit("change", currentAlpha.value);
+  }
+};
+
+const onSliderClick = (event: MouseEvent) => {
+  const target = event.target;
+
+  if (target !== barEle.value) {
+    onDragSlider(event);
+  }
+};
+
+watch(
+  () => props.alpha,
+  () => {
+    currentAlpha.value = props.alpha;
+  }
+);
+
+watch(
+  () => currentAlpha.value,
+  () => {
+    updatePosition();
+  }
+);
+
+onMounted(() => {
+  nextTick(() => {
+    const dragConfig: DragEventOptions = {
+      drag: (event: Event) => {
+        onDragSlider(event as MouseEvent);
+      },
+      end: (event: Event) => {
+        onDragSlider(event as MouseEvent);
+      }
+    };
+
+    if (barEle.value && cursorEle.value) {
+      DOMUtils.triggerDragEvent(barEle.value, dragConfig);
+      DOMUtils.triggerDragEvent(barEle.value, dragConfig);
+    }
+  });
+  updatePosition();
+});
+</script>
+
+<style lang="scss" scoped>
+.small-alpha-slider {
+  height: 10px !important;
+
+  .small-bar {
+    height: 10px !important;
+    width: 10px !important;
+
+    div {
+      width: 12px !important;
+      height: 12px !important;
+      border-radius: 5px !important;
+      transform: translate(-6px, -2px);
+      margin-top: 1px !important;
+    }
+  }
+}
+
+.bee-alpha-slider {
+  position: relative;
+  margin-bottom: 15px;
+  width: 100%;
+  height: 14px;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
+  border-radius: 15px;
+
+  &.is-vertical {
+    width: 14px;
+    height: 100%;
+    display: inline-block;
+    transform: rotate(180deg);
+  }
+
+  &.transparent {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+    background-repeat: repeat;
+  }
+
+  &__bar {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 15px;
+
+    &-pointer {
+      position: absolute;
+      width: 14px;
+      height: 14px;
+    }
+
+    &-handle {
+      width: 14px;
+      height: 14px;
+      border-radius: 6px;
+      transform: translate(-7px, -2px);
+      background-color: #f8f8f8;
+      margin-top: 2px;
+      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+      cursor: pointer;
+
+      &.vertical {
+        transform: translate(0px, -7px);
+        margin-top: 0;
+      }
+    }
+  }
+}
+</style>

ant-design-pro-vue3/src/components/ColorPicker/common/History.vue

@@ -0,0 +1,85 @@
+<template>
+  <div class="bee-colorPicker__record">
+    <div class="color-list">
+      <div class="color-item transparent" :class="{ 'color-item__round': round }" v-for="(v, i) in colorList" :key="i"
+        @click="onClickRecord(v)">
+        <div class="color-item__display" :style="{ backgroundColor: v }"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="History">
+import { PropType } from "vue";
+const props = defineProps({
+  colorList: {
+    type: Array as PropType<string[]>,
+    default: () => {
+      return [];
+    }
+  },
+  round: {
+    type: Boolean,
+    default: true
+  }
+})
+const emit = defineEmits(["change"])
+const onClickRecord = (color: string) => {
+  emit("change", color);
+};
+</script>
+
+<style lang="scss" scoped>
+.bee-colorPicker__record {
+  display: flex;
+  align-items: center;
+  margin-top: 20px;
+
+  .text {
+    width: 48px;
+    margin-right: 10px;
+    text-align: right;
+    font-size: 12px;
+    color: #666;
+  }
+
+  .color-list {
+    width: auto;
+    display: flex;
+    position: relative;
+    margin: 0;
+
+    .color-item {
+      position: relative;
+      width: 25px;
+      height: 25px;
+      cursor: pointer;
+      overflow: hidden;
+      display: inline-block;
+      vertical-align: middle;
+      margin-right: 1px;
+      box-shadow: 3px 0 5px rgba(0, 0, 0, 0.08);
+
+      &__round {
+        border-radius: 50%;
+      }
+
+      &.transparent {
+        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+        background-repeat: repeat;
+      }
+
+      &:hover {
+        transform: scale(1.2);
+        z-index: 299;
+        transition: transform 0.2s;
+      }
+
+      &__display {
+        width: 100%;
+        height: 100%;
+      }
+    }
+  }
+}
+</style>

ant-design-pro-vue3/src/components/ColorPicker/common/Hue.vue

@@ -0,0 +1,253 @@
+<template>
+  <div class="bee-hue-colorPicker transparent" :class="{
+    'is-vertical': vertical,
+    'small-hue-slider': size === 'small' && !vertical
+  }">
+    <div class="bee-hue-colorPicker__inner" ref="bar" :style="linearGradient">
+      <div class="bee-hue-colorPicker__inner-pointer" :class="{ 'small-bar': size === 'small' && !vertical }"
+        ref="barHandle" :style="{
+          left: handleLeft + 'px',
+          top: handleTop + 'px'
+        }">
+        <div class="bee-hue-colorPicker__inner-handle" :class="{ vertical: vertical }"></div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="Hue">
+import {
+  computed,
+  nextTick,
+  onMounted,
+  ref,
+  watch
+} from "vue";
+
+import { DOMUtils, DragEventOptions } from "@aesoper/normal-utils";
+
+const bg =
+  "-webkit-linear-gradient(left, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 16.66%, rgb(0, 255, 0) 33.33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 66.66%, rgb(255, 0, 255) 83.33%, rgb(255, 0, 0) 100%)";
+const verticalBg =
+  "-webkit-linear-gradient(bottom, rgb(255, 0, 0) 0%, rgb(255, 255, 0) 16.66%, rgb(0, 255, 0) 33.33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 66.66%, rgb(255, 0, 255) 83.33%, rgb(255, 0, 0) 100%)";
+
+const props = defineProps({
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  size: {
+    type: String,
+    default: "default"
+  },
+  hue: {
+    type: Number,
+    default: 0,
+    validator: (value: number) => {
+      return value >= 0 && value <= 360;
+    }
+  }
+})
+
+const emit = defineEmits(["update:hue", "change"])
+const bar = ref<HTMLElement | null>(null);
+const barHandle = ref<HTMLElement | null>(null);
+
+const handleLeft = ref(0);
+const handleTop = ref(0);
+
+const currentHue = ref(props.hue);
+
+const linearGradient = computed(() => {
+  return {
+    background: props.vertical ? verticalBg : bg
+  };
+});
+
+const getBarLeftPosition = () => {
+  if (props.vertical) return 0;
+  if (bar.value && barHandle.value) {
+    const rect = bar.value?.getBoundingClientRect();
+
+    if (currentHue.value === 360) {
+      return rect.width - barHandle.value.offsetWidth / 2;
+    }
+    return (
+      ((currentHue.value % 360) *
+        (rect.width - barHandle.value.offsetWidth)) /
+      360 +
+      barHandle.value.offsetWidth / 2
+    );
+  }
+
+  return 0;
+};
+
+const getBarTopPosition = () => {
+  if (!props.vertical) return 0;
+  if (bar.value && barHandle.value) {
+    const rect = bar.value?.getBoundingClientRect();
+
+    if (currentHue.value === 360) {
+      return barHandle.value?.offsetHeight / 2;
+    }
+    return (
+      ((360 - (currentHue.value % 360)) *
+        (rect.height - barHandle.value.offsetHeight)) /
+      360 +
+      barHandle.value.offsetHeight / 2
+    );
+  }
+
+  return 0;
+};
+
+const updatePosition = () => {
+  handleLeft.value = getBarLeftPosition();
+  handleTop.value = getBarTopPosition();
+};
+
+const handleDrag = (event: MouseEvent) => {
+  if (bar.value && barHandle.value) {
+    const rect = bar.value?.getBoundingClientRect();
+
+    if (!props.vertical) {
+      let left = event.clientX - rect.left;
+      left = Math.min(left, rect.width - barHandle.value.offsetWidth / 2);
+      left = Math.max(barHandle.value.offsetWidth / 2, left);
+
+      currentHue.value = Math.round(
+        ((left - barHandle.value.offsetWidth / 2) /
+          (rect.width - barHandle.value.offsetWidth)) *
+        360
+      );
+    } else {
+      let top = event.clientY - rect.top;
+      top = Math.min(top, rect.height - barHandle.value?.offsetHeight / 2);
+      top = Math.max(barHandle.value.offsetHeight / 2, top);
+
+      currentHue.value = Math.round(
+        ((top - barHandle.value.offsetHeight / 2) /
+          (rect.height - barHandle.value.offsetHeight)) *
+        360
+      );
+    }
+
+    emit("update:hue", currentHue.value);
+    emit("change", currentHue.value);
+  }
+};
+
+const handleClick = (event: MouseEvent) => {
+  const target = event.target;
+
+  if (target !== barHandle.value) {
+    handleDrag(event);
+  }
+};
+
+watch(
+  () => props.hue,
+  (hue: number) => {
+    currentHue.value = hue;
+  }
+);
+
+watch(
+  () => currentHue.value,
+  () => {
+    updatePosition();
+  }
+);
+
+onMounted(() => {
+  nextTick(() => {
+    const dragConfig: DragEventOptions = {
+      drag: (event: Event) => {
+        handleDrag(event as MouseEvent);
+      },
+      end: (event: Event) => {
+        handleDrag(event as MouseEvent);
+      }
+    };
+
+    if (bar.value && barHandle.value) {
+      DOMUtils.triggerDragEvent(bar.value, dragConfig);
+      DOMUtils.triggerDragEvent(barHandle.value, dragConfig);
+    }
+    updatePosition();
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.small-hue-slider {
+  height: 10px !important;
+
+  .small-bar {
+    height: 10px !important;
+    width: 10px !important;
+
+    div {
+      width: 12px !important;
+      height: 12px !important;
+      border-radius: 5px !important;
+      transform: translate(-6px, -2px);
+      margin-top: 1px !important;
+    }
+  }
+}
+
+.bee-hue-colorPicker {
+  position: relative;
+  margin-bottom: 15px;
+  width: 100%;
+  height: 14px;
+  box-shadow: 2px 0 8px rgba(0, 0, 0, 0.08);
+  border-radius: 15px;
+
+  &.is-vertical {
+    width: 14px;
+    height: 100%;
+    display: inline-block;
+    transform: rotate(180deg);
+  }
+
+  &.transparent {
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAMCAIAAADZF8uwAAAAGUlEQVQYV2M4gwH+YwCGIasIUwhT25BVBADtzYNYrHvv4gAAAABJRU5ErkJggg==);
+    background-repeat: repeat;
+  }
+
+  &__inner {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    border-radius: 15px;
+    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMkAAAAdCAYAAAAAaUg8AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAKtJREFUeNrs09EKgjAUgOGzEFfv/7CVBceiLiJiLnf7fSAbDoUj/iWnyKgRcXxf9Wtt7Vvntf8854jLY3uN19qzf67nH/e2nmmdZ8xjg2x+sI533qf9g4wM/3GvLPumOHVMWf/4SiWWsUG6/6bG+/NWDgE0iQREAiIBkYBIQCQgEhAJiAQQCYgERAIiAZGASEAkIBJAJCASEAmIBEQCIgGRgEgAkYBIYNAqwAD5oWo3bpsiKwAAAABJRU5ErkJggg==);
+    background-size: 100%;
+
+    &-pointer {
+      position: absolute;
+      width: 14px;
+      height: 14px;
+    }
+
+    &-handle {
+      width: 14px;
+      height: 14px;
+      border-radius: 6px;
+      transform: translate(-7px, -2px);
+      //background-color: #fff;
+      background-color: #f8f8f8;
+      margin-top: 2px;
+      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+      cursor: pointer;
+
+      &.vertical {
+        transform: translate(-1px, -7px);
+        margin-top: 0;
+      }
+    }
+  }
+}
+</style>

ant-design-pro-vue3/src/components/ColorPicker/common/Saturation.vue

@@ -0,0 +1,203 @@
+<template>
+  <div class="bee-saturation" :class="{
+    'bee-saturation__chrome': round,
+    'bee-saturation__hidden': hidden
+  }" :style="{ backgroundColor: background }">
+    <div class="bee-saturation__white"></div>
+    <div class="bee-saturation__black"></div>
+    <div class="bee-saturation__cursor" :style="{
+      top: cursorTop + 'px',
+      left: cursorLeft + 'px'
+    }" @click="handleDrag">
+      <div></div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="Saturation">
+import {
+  getCurrentInstance,
+  onMounted,
+  reactive,
+  ref,
+  watch
+} from "vue";
+import { DOMUtils } from "@aesoper/normal-utils";
+
+const clamp = (value: number, min: number, max: number) => {
+  return min < max
+    ? value < min
+      ? min
+      : value > max
+        ? max
+        : value
+    : value < max
+      ? max
+      : value > min
+        ? min
+        : value;
+};
+const props = defineProps({
+  hue: {
+    type: Number,
+    default: 0,
+    validator: (value: number) => {
+      return value >= 0 && value <= 360;
+    }
+  },
+  saturation: {
+    type: Number,
+    default: 0,
+    validator: (value: number) => {
+      return value >= 0 && value <= 1;
+    }
+  },
+  value: {
+    type: Number,
+    default: 0,
+    validator: (value: number) => {
+      return value >= 0 && value <= 1;
+    }
+  },
+  round: Boolean,
+  hidden: Boolean
+})
+
+const emit = defineEmits(["update:saturation", "update:value", "change"])
+// instance
+const instance = getCurrentInstance();
+// data
+const cursorTop = ref(0);
+const cursorLeft = ref(0);
+const background = ref("hsl(" + props.hue + ", 100%, 50%)");
+const currentHsv = reactive({
+  h: props.hue,
+  s: props.saturation,
+  v: props.value
+});
+
+const updatePosition = () => {
+  if (instance) {
+    const el = instance.vnode.el;
+    cursorLeft.value = currentHsv.s * el?.clientWidth;
+    cursorTop.value = (1 - currentHsv.v) * el?.clientHeight;
+  }
+};
+
+const handleDrag = (event: MouseEvent) => {
+  if (instance) {
+    const el = instance.vnode.el;
+    const rect = el?.getBoundingClientRect();
+
+    let left = event.clientX - rect.left;
+    let top = event.clientY - rect.top;
+
+    left = clamp(left, 0, rect.width);
+    top = clamp(top, 0, rect.height);
+
+    const saturation = Math.round((left / rect.width) * 100) / 100;
+    const bright =
+      Math.round(clamp(-(top / rect.height) + 1, 0, 1) * 100) / 100;
+
+    cursorLeft.value = left;
+    cursorTop.value = top;
+
+    currentHsv.s = saturation;
+    currentHsv.v = bright;
+
+    emit("update:saturation", saturation);
+    emit("update:value", bright);
+    emit("change", saturation, bright);
+  }
+};
+
+onMounted(() => {
+  if (instance && instance.vnode.el) {
+    DOMUtils.triggerDragEvent(instance.vnode.el as HTMLElement, {
+      drag: (event: Event) => {
+        handleDrag(event as MouseEvent);
+      },
+      end: event => {
+        handleDrag(event as MouseEvent);
+      }
+    });
+
+    updatePosition();
+  }
+});
+
+// watch
+watch(
+  () => props.hue,
+  (hue: number) => {
+    currentHsv.h = hue;
+    background.value = "hsl(" + Math.round(currentHsv.h) + ", 100%, 50%)";
+  }
+);
+
+watch(
+  () => props.value,
+  (value: number) => {
+    currentHsv.v = value;
+    updatePosition();
+  }
+);
+
+watch(
+  () => props.saturation,
+  (saturation: number) => {
+    currentHsv.s = saturation;
+    updatePosition();
+  }
+);
+</script>
+
+<style lang="scss" scoped>
+.bee-saturation {
+  position: relative;
+  margin-bottom: 15px;
+  width: 100%;
+  height: 125px;
+
+  &__chrome {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    border-color: transparent;
+  }
+
+  &__hidden {
+    overflow: hidden;
+  }
+
+  &__white,
+  &__black {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
+  &__black {
+    background: linear-gradient(0deg, #000, transparent);
+  }
+
+  &__white {
+    background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
+  }
+
+  &__cursor {
+    position: absolute;
+
+    div {
+      transform: translate(-5px, -5px);
+      box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.37);
+      width: 10px;
+      height: 10px;
+      border: 1px solid white;
+      border-radius: 50%;
+      cursor: pointer;
+    }
+  }
+}
+</style>

ant-design-pro-vue3/src/components/ColorPicker/common/VColorInput.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="inputs-controls">
+    <!-- <button class="formatBtn" @click="onChangeFormat"> -->
+    {{ currentFormat }}
+    <!-- </button> -->
+    <!-- <div class="format-group" v-if="currentFormat === 'hsv'">
+      <input
+        v-model="currentColor.hsv.h"
+        type="number"
+        min="0"
+        max="360"
+        placeholder="h"
+        @blur="onInputChange('hsv')"
+      />
+      <input
+        v-model="currentColor.hsv.s"
+        type="number"
+        min="0"
+        max="1"
+        placeholder="s"
+        @blur="onInputChange('hsv')"
+      />
+      <input
+        v-model="currentColor.hsv.v"
+        type="number"
+        min="0"
+        max="1"
+        placeholder="v"
+        @blur="onInputChange('hsv')"
+      />
+    </div>
+    <div class="format-group" v-if="currentFormat === 'hsl'">
+      <input
+        v-model="currentColor.hsl.h"
+        type="number"
+        min="0"
+        max="360"
+        placeholder="h"
+        @blur="onInputChange('hsl')"
+      />
+      <input
+        v-model="currentColor.hsl.s"
+        type="number"
+        min="0"
+        max="1"
+        placeholder="s"
+        @blur="onInputChange('hsl')"
+      />
+      <input
+        v-model="currentColor.hsl.l"
+        type="number"
+        min="0"
+        max="1"
+        placeholder="l"
+        @blur="onInputChange('hsl')"
+      />
+    </div>
+    <div class="format-group" v-if="currentFormat === 'rgb'">
+      <input
+        v-model="currentColor.rgb.r"
+        type="number"
+        min="0"
+        max="255"
+        placeholder="r"
+        @blur="onInputChange('rgb')"
+      />
+      <input
+        v-model="currentColor.rgb.g"
+        type="number"
+        min="0"
+        max="255"
+        placeholder="g"
+        @blur="onInputChange('rgb')"
+      />
+      <input
+        v-model="currentColor.rgb.b"
+        type="number"
+        min="0"
+        max="255"
+        @blur="onInputChange('rgb')"
+        placeholder="b"
+      />
+    </div> -->
+    <div class="format-group" v-if="currentFormat === 'hex'">
+      <input v-model="currentColor.hex" type="text" maxlength="7" placeholder="hex" @blur="onInputChange('hex')" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup name="VColorInput">
+import { PropType, ref, toRaw, watch } from "vue";
+import { Color, ColorAttrs, ColorInput } from "../color";
+import { ArrayUtils } from "@aesoper/normal-utils";
+
+const formatList = ["hex", "hsl", "rgb", "hsv"];
+
+const props = defineProps({
+  color: {
+    type: [String, Object] as PropType<ColorInput>,
+    default: "#000000"
+  }
+})
+const emit = defineEmits(["update:color", "change"])
+
+const colorClass = new Color();
+
+const currentFormat = ref(formatList[0]);
+const currentColor = ref<ColorAttrs>(colorClass.parseColor(props.color));
+
+const onChangeFormat = () => {
+  const index = ArrayUtils.findIndex(
+    formatList,
+    (val: string) => val == currentFormat.value
+  );
+
+  currentFormat.value = formatList[(index + 1) % formatList.length];
+};
+
+watch(
+  () => props.color,
+  (newVal: ColorInput) => {
+    currentColor.value = colorClass.parseColor(toRaw(newVal));
+  }
+);
+
+const doOnChange = (data: any, oldHue?: number): void => {
+  currentColor.value = colorClass.parseColor(data, oldHue);
+  emit("update:color", currentColor.value);
+  emit("change", currentColor.value);
+};
+
+const onInputChange = (source: string) => {
+  switch (source) {
+    case "hex":
+      doOnChange({ hex: currentColor.value.hex, source: "hex" });
+      break;
+    case "hsl":
+      doOnChange({ hsl: currentColor.value.hsl, source: "hsl" });
+      break;
+    case "rgb":
+      doOnChange({ rgb: currentColor.value.rgb, source: "rgb" });
+      break;
+    case "hsv":
+      doOnChange({ hsv: currentColor.value.hsv, source: "hsv" });
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.inputs-controls {
+  display: flex;
+  font-size: 16px;
+  margin-bottom: 5px;
+
+  .formatBtn {
+    position: relative;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1px;
+    border: 0;
+    text-align: center;
+    cursor: pointer;
+    background-color: transparent;
+    font-weight: 700;
+    outline: none;
+    margin-right: 5px;
+
+    &:hover {
+      color: #1a3aff;
+    }
+  }
+
+  .format-group {
+    display: flex;
+    flex-grow: 1;
+
+    input {
+      padding: 5px;
+      margin: 0 3px;
+      min-width: 0;
+      text-align: center;
+      border-width: 0 0 1px 0;
+      -webkit-appearance: none;
+      appearance: none;
+      -moz-appearance: textfield;
+      outline: none;
+      flex: 1;
+
+      &::-webkit-outer-spin-button,
+      &::-webkit-inner-spin-button {
+        -webkit-appearance: none !important;
+        margin: 0;
+      }
+    }
+  }
+}
+</style>

ant-design-pro-vue3/src/components/ColorPicker/index.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="bee-ele-colorPicker">
+    <div class="bee-ele-row">
+      <saturation class="bee-ele-saturation" :hidden="true" :saturation="currentColor.hsv.s" :hue="currentColor.hsv.h"
+        :value="currentColor.hsv.v" @change="onSaturationChange" />
+      <hue class="bee-ele-hue" :vertical="true" size="small" :hue="currentColor.hsv.h" @change="onHueChange"
+        v-if="!disableHue" />
+    </div>
+    <alpha style="width: 257px" :color="currentColor.hex8" @change="onAlphaChange" :alpha="currentColor.alpha"
+      v-if="!disableAlpha" />
+
+    <v-color-input style="width: 257px" :color="currentColor" @change="onInputChange" />
+
+    <history :color-list="storageColorList" :round="historyRound" @change="onCompactChange" v-if="!disableHistory" />
+  </div>
+</template>
+
+<script lang="ts" setup name="EleColorPicker">
+import { onMounted, PropType, ref, toRaw, watch } from "vue";
+import Saturation from "./common/Saturation.vue";
+import Hue from "./common/Hue.vue";
+import Alpha from "./common/Alpha.vue";
+import History from "./common/History.vue";
+import VColorInput from "./common/VColorInput.vue";
+import {
+  Color,
+  ColorAttrs,
+  ColorFormat,
+  ColorInput,
+  debounceFn,
+  MAX_STORAGE_LENGTH,
+  STORAGE_COLOR_KEY
+} from "./color";
+import ls from '@/utils/Storage'
+
+const props = defineProps({
+  color: {
+    type: [String, Object] as PropType<ColorInput>,
+    default: "#000000"
+  },
+  format: {
+    type: String as PropType<ColorFormat>
+  },
+  disableAlpha: Boolean,
+  disableHue: Boolean,
+  disableHistory: Boolean,
+  historyRound: {
+    type: Boolean,
+    default: true
+  }
+})
+
+const emit = defineEmits(["update:color", "change"])
+const colorClass = new Color();
+
+const currentColor = ref<ColorAttrs>(colorClass.parseColor(props.color));
+
+const storageColorList = ref<string[]>([]);
+
+const onStorageColor = () => {
+  storageColorList.value = storageColorList.value.filter(value => {
+    return value !== currentColor.value.hex8;
+  });
+  if (storageColorList.value.length >= MAX_STORAGE_LENGTH) {
+    storageColorList.value.shift();
+  }
+  storageColorList.value.push(currentColor.value.hex8);
+  ls.set(STORAGE_COLOR_KEY, storageColorList.value)
+};
+
+const onInitColorList = () => {
+  storageColorList.value = ls.get(STORAGE_COLOR_KEY) || []
+};
+
+const doOnChange = (data: any, oldHue?: number): void => {
+  currentColor.value = colorClass.parseColor(data, oldHue);
+  debounceFn(onStorageColor);
+};
+
+const doUpdate = () => {
+  if (props.format) {
+    emit("update:color", colorClass.format(props.format));
+    emit("change", colorClass.format(props.format));
+  } else {
+    emit("update:color", currentColor.value);
+    emit("change", currentColor.value);
+  }
+};
+
+const onCompactChange = (color: string) => {
+  doOnChange(color);
+  doUpdate();
+};
+
+const onAlphaChange = (alpha: number) => {
+  doOnChange(
+    {
+      h: currentColor.value.hsl.h,
+      s: currentColor.value.hsl.s,
+      l: currentColor.value.hsl.l,
+      a: alpha,
+      source: "alpha"
+    },
+    currentColor.value.hsl.h
+  );
+  doUpdate();
+};
+
+const onSaturationChange = (saturation: number, bright: number) => {
+  doOnChange(
+    {
+      h: currentColor.value.hsv.h,
+      s: saturation,
+      v: bright,
+      a: currentColor.value.hsv.a,
+      source: "saturation"
+    },
+    currentColor.value.hsv.h
+  );
+  doUpdate();
+};
+
+const onHueChange = (hue: number) => {
+  const { s: saturation, v: bright, a: alpha } = currentColor.value.hsv;
+  doOnChange(
+    {
+      h: hue,
+      s: saturation,
+      v: bright,
+      a: alpha,
+      source: "hue"
+    },
+    hue
+  );
+
+  doUpdate();
+};
+
+const onInputChange = (val: ColorAttrs) => {
+  currentColor.value = val;
+  doUpdate();
+};
+
+watch(
+  () => props.color,
+  (newVal: ColorInput) => {
+    doOnChange(toRaw(newVal));
+    onInitColorList();
+  }
+);
+
+onMounted(() => {
+  onInitColorList();
+});
+</script>
+
+<style lang="scss" scoped>
+.bee-ele-colorPicker {
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 3px;
+  box-shadow: 0 0 10px rgba(0, 0, 0, 0.15);
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  background-color: white;
+  padding: 10px;
+  width: 300px;
+
+  .bee-ele-row {
+    display: flex;
+
+    .bee-ele-saturation {
+      width: 280px;
+      height: 180px;
+    }
+
+    .bee-ele-hue {
+      margin-left: 10px;
+      height: 180px;
+    }
+  }
+}
+</style>

ant-design-pro-vue3/src/components/DescriptionList/DescriptionList.vue

@@ -0,0 +1,153 @@
+<template>
+  <div :class="['description-list', size, layout === 'vertical' ? 'vertical': 'horizontal']">
+    <div v-if="title" class="title">{{ title }}</div>
+    <a-row>
+      <slot></slot>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import { Col } from 'ant-design-vue/es/grid/'
+
+const Item = {
+  name: 'DetailListItem',
+  props: {
+    term: {
+      type: String,
+      default: '',
+      required: false
+    }
+  },
+  inject: {
+    col: {
+      type: Number
+    }
+  },
+  render () {
+    return (
+      <Col {...{ props: responsive[this.col] }}>
+        <div class="term">{this.$props.term}</div>
+        <div class="content">{this.$slots.default}</div>
+      </Col>
+    )
+  }
+}
+
+const responsive = {
+  1: { xs: 24 },
+  2: { xs: 24, sm: 12 },
+  3: { xs: 24, sm: 12, md: 8 },
+  4: { xs: 24, sm: 12, md: 6 }
+}
+
+export default {
+  name: 'DetailList',
+  Item: Item,
+  components: {
+    Col
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+      required: false
+    },
+    col: {
+      type: Number,
+      required: false,
+      default: 3
+    },
+    size: {
+      type: String,
+      required: false,
+      default: 'large'
+    },
+    layout: {
+      type: String,
+      required: false,
+      default: 'horizontal'
+    }
+  },
+  provide () {
+    return {
+      col: this.col > 4 ? 4 : this.col
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+  .description-list {
+
+    .title {
+      color: rgba(0,0,0,.85);
+      font-size: 14px;
+      font-weight: 500;
+      margin-bottom: 16px;
+    }
+
+    /deep/ .term {
+      color: rgba(0,0,0,.85);
+      display: table-cell;
+      line-height: 20px;
+      margin-right: 8px;
+      padding-bottom: 16px;
+      white-space: nowrap;
+
+      &:not(:empty):after {
+        content: ":";
+        margin: 0 8px 0 2px;
+        position: relative;
+        top: -.5px;
+      }
+    }
+
+    /deep/ .content {
+      color: rgba(0,0,0,.65);
+      display: table-cell;
+      min-height: 22px;
+      line-height: 22px;
+      padding-bottom: 16px;
+      width: 100%;
+      &:empty {
+        content: ' ';
+        height: 38px;
+        padding-bottom: 16px;
+      }
+    }
+
+    &.small {
+
+      .title {
+        font-size: 14px;
+        color: rgba(0, 0, 0, .65);
+        font-weight: normal;
+        margin-bottom: 12px;
+      }
+      /deep/ .term, .content {
+        padding-bottom: 8px;
+      }
+    }
+
+    &.large {
+      /deep/ .term, .content {
+        padding-bottom: 16px;
+      }
+
+      .title {
+        font-size: 16px;
+      }
+    }
+
+    &.vertical {
+      .term {
+        padding-bottom: 8px;
+      }
+      /deep/ .term, .content {
+        display: block;
+      }
+    }
+  }
+</style>

ant-design-pro-vue3/src/components/FastDevelopBall/FastDevelopModal.vue

@@ -0,0 +1,84 @@
+<template>
+  <a-modal v-model:visible="showModal" title="快速开发面板" :footer="null" @cancel="onCancel" width="60%">
+    <a-spin :spinning="loading">
+      <section :style="{ height: '400px' }">
+        <a-tabs>
+          <a-tab-pane tab="模板">
+            <div style="margin-bottom:20px">
+              <a-space>
+                <a-input v-model:value="v" placeholder="请输入页面名称" :style="{ width: '200px' }" />
+                <a-button type="primary" @click="createV">创建view</a-button>
+              </a-space>
+            </div>
+            <div>
+              <a-space>
+                <a-input v-model:value="c" placeholder="请输入组件名称" :style="{ width: '200px' }" />
+                <a-button type="primary" @click="createC">创建component</a-button>
+              </a-space>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
+      </section>
+    </a-spin>
+  </a-modal>
+</template>
+<script lang="ts">
+import { ref, watch } from 'vue'
+import * as api from './service'
+
+export default {
+  props: {
+    isShow: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup(props, { emit }) {
+    const v = ref('')
+    const c = ref('')
+    const loading = ref(false)
+    const onCancel = () => {
+      emit('close')
+    }
+    const createV = () => {
+      if (v.value) {
+        loading.value = true
+        api.createV(v.value)
+      } else {
+        alert('请输入页面名称')
+      }
+    }
+    const createC = () => {
+      if (c.value) {
+        loading.value = true
+        api.createC(c.value)
+      } else {
+        alert('请输入组件名称')
+      }
+    }
+
+    const showModal = ref<boolean>(false)
+    watch(
+      () => props.isShow,
+      (newVal) => {
+        showModal.value = newVal
+      },
+      {
+        immediate: true,
+      },
+    );
+
+    return {
+      onCancel,
+      createV,
+      createC,
+      c,
+      v,
+      loading,
+      showModal
+    }
+  }
+}
+</script>
+<style lang="less">
+</style>

ant-design-pro-vue3/src/components/FastDevelopBall/index.vue

@@ -0,0 +1,58 @@
+<template>
+  <div v-if="useBall">
+    <a-tooltip>
+      <template #title>仿造umi ui做的一个用途图形界面操作命令行的球,生产环境下不会出现</template>
+      <div class="FastDevelopBall" id="FastDevelopBall">
+        <SvgIcon name="logo" width="30px" height="30px" @click="onShowFastDevelopModal" />
+      </div>
+    </a-tooltip>
+    <FastDevelopModal :isShow="showModal" @close="() => (this.showModal = false)" />
+  </div>
+</template>
+<script lang="ts">
+import { onMounted, ref } from 'vue'
+import useMove from '@/hooks/mouseMove'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+import { isDev } from '@/utils/util'
+import FastDevelopModal from './FastDevelopModal.vue'
+
+export default {
+  name: 'about',
+  components: {
+    SvgIcon,
+    FastDevelopModal
+  },
+  setup() {
+    const showModal = ref(false)
+    const useBall = isDev && (import.meta.env.MODE === 'UseFastDevelopBall')
+    onMounted(() => {
+      if (useBall) {
+        const el = document.getElementById('FastDevelopBall')
+        useMove(el)
+      }
+    })
+    const onShowFastDevelopModal = () => {
+      showModal.value = true
+    }
+    return {
+      useBall,
+      showModal,
+      onShowFastDevelopModal
+    }
+  }
+}
+</script>
+<style scoped>
+.FastDevelopBall {
+  width: 50px;
+  height: 50px;
+  top: calc(90% - 100px);
+  left: calc(90% - 100px);
+  z-index: 99999;
+  border: 3px solid #0094ff;
+  border-radius: 50%;
+  padding: 6.5px 0 0 6.5px;
+  cursor: pointer;
+  background-color: azure;
+}
+</style>

ant-design-pro-vue3/src/components/FastDevelopBall/lang/cn.ts

@@ -0,0 +1 @@
+export default {}

ant-design-pro-vue3/src/components/FastDevelopBall/lang/en.ts

@@ -0,0 +1 @@
+export default {}

ant-design-pro-vue3/src/components/FastDevelopBall/service.ts

@@ -0,0 +1,13 @@
+import baseService from '@/utils/http/axios'
+
+const baseURL = "http://localhost:3006/"
+
+export const createC = (name) => {
+  const api = baseURL + `createModule/addComponent?name=${name}`
+  return baseService.get(api)
+}
+
+export const createV = (name) => {
+  const api = baseURL + `createModule/addView?name=${name}`
+  return baseService.get(api)
+}

ant-design-pro-vue3/src/components/FormComponents/DynamicForm.vue

@@ -0,0 +1,53 @@
+<template>
+    <a-form class="dynamicForm" :model="formModel">
+        <a-row :gutter="24">
+            <template v-for="({ type, label, options, onChange, name }) in formProps" :key="name">
+                <a-col :span="24 / colNumber">
+                    <a-form-item :name="name">
+                        <template #label>
+                            <span>{{ label }}</span>
+                        </template>
+                        <a-input v-model:value="formModel[name]" style="width:100%" v-if="type === 'input'" />
+                        <a-select v-model:value="formModel[name]" style="width:100%"
+                            @change="onFieldChange($event, onChange)" v-else-if="type === 'select'" :allowClear="true">
+                            <a-select-option v-for="item in options" :key="item.value" :title="item.label">{{ item.label
+                                }}</a-select-option>
+                        </a-select>
+                    </a-form-item>
+                </a-col>
+            </template>
+        </a-row>
+        <slot name="zidingyi"></slot>
+    </a-form>
+</template>
+<script lang='ts' setup name="DynamicForm">
+const props = defineProps({
+    disabledAll: {
+        type: Boolean,
+        default: true,
+        required: false
+    },
+    formProps: {
+        default: [],
+        required: true
+    },
+    // 列数,默认每行2列
+    colNumber: {
+        type: Number,
+        default: 2,
+        required: false
+    },
+    formModel: {
+        type: Object,
+        default: {},
+        required: true
+    },
+})
+const formProps = props.formProps
+const onFieldChange = (value, fn) => {
+    if (fn) {
+        fn(value)
+    }
+}
+</script>
+<style lang='less'></style>

ant-design-pro-vue3/src/components/GlobalFooter/index.vue

@@ -0,0 +1,51 @@
+<template>
+    <div class="footer">
+        <div class="copyright">
+            Copyright
+            <CopyrightOutlined />&nbsp;2023
+            <span>Ones</span>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup name="GlobalFooter">
+import { CopyrightOutlined, GithubOutlined } from '@ant-design/icons-vue'
+import { isMobile } from '@/utils/device'
+</script>
+
+<style lang="less" scoped>
+.footer {
+    padding: 0 16px;
+    margin: 48px 0 24px;
+    text-align: center;
+
+    .links {
+        margin-bottom: 8px;
+
+        a {
+            color: rgba(0, 0, 0, 0.45);
+
+            &:hover {
+                color: rgba(0, 0, 0, 0.65);
+            }
+
+            &:not(:last-child) {
+                margin-right: 40px;
+            }
+        }
+
+        &.lessMargin {
+            a {
+                &:not(:last-child) {
+                    margin-right: 20px;
+                }
+            }
+        }
+    }
+
+    .copyright {
+        color: rgba(0, 0, 0, 0.45);
+        font-size: 14px;
+    }
+}
+</style>

ant-design-pro-vue3/src/components/GlobalHeader/index.vue

@@ -0,0 +1,140 @@
+<template>
+  <transition name="showHeader">
+    <div v-if="visible" class="header-animat">
+      <a-layout-header v-if="visible"
+        :class="[fixedHeader && 'ant-header-fixedHeader', sidebarOpened ? 'ant-header-side-opened' : 'ant-header-side-closed',]"
+        :style="{ padding: '0' }">
+        <div v-if="mode === 'sidemenu'" class="header">
+          <span @click="toggle">
+            <template v-if="device === 'mobile'">
+              <MenuFoldOutlined v-if="collapsed" class="trigger" />
+              <MenuUnfoldOutlined v-else class="trigger" />
+            </template>
+            <template v-else>
+              <MenuUnfoldOutlined v-if="collapsed" class="trigger" />
+              <MenuFoldOutlined v-else class="trigger" />
+            </template>
+          </span>
+          <ReloadOutlined class="trigger" style="" @click="refreshPage" />
+          <user-menu :theme="theme"></user-menu>
+        </div>
+        <div v-else :class="['top-nav-header-index', theme]">
+          <div class="header-index-wide">
+            <div class="header-index-left">
+              <logo class="top-nav-header" :show-title="device !== 'mobile'" />
+              <s-menu v-if="device !== 'mobile'" mode="horizontal" :menu="menus" :theme="theme" />
+              <span v-else @click="toggle">
+                <MenuFoldOutlined v-if="!collapsed" class="trigger" />
+                <MenuUnfoldOutlined v-else class="trigger" />
+              </span>
+            </div>
+            <user-menu class="header-index-right" :theme="theme"></user-menu>
+          </div>
+        </div>
+      </a-layout-header>
+    </div>
+  </transition>
+</template>
+
+<script lang="ts" setup name="GlobalHeader">
+import UserMenu from '../tools/UserMenu/index.vue'
+import SMenu from '../Menu/Menu.vue'
+import Logo from '../tools/Logo.vue'
+import { ref, onMounted, onBeforeUnmount } from 'vue'
+import { MenuFoldOutlined, MenuUnfoldOutlined, ReloadOutlined } from '@ant-design/icons-vue'
+import useSiteSettings from '@/store/useSiteSettings'
+const props = defineProps({
+  mode: {
+    type: String,
+    // sidemenu, topmenu
+    default: 'sidemenu'
+  },
+  menus: {
+    type: Array,
+    required: true
+  },
+  theme: {
+    type: String,
+    required: false,
+    default: 'dark'
+  },
+  collapsed: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  device: {
+    type: String,
+    required: false,
+    default: 'desktop'
+  }
+})
+const visible = ref<boolean>(true)
+const oldScrollTop = ref<number>(0)
+const ticking = ref<boolean>(false)
+
+const { sidebarOpened, device, fixedHeader, autoHideHeader } = useSiteSettings()
+// 下滑时隐藏 Header
+const handleScroll = () => {
+  if (!autoHideHeader.value) {
+    return
+  }
+
+  const scrollTop = document.body.scrollTop + document.documentElement.scrollTop
+  if (!ticking.value) {
+    ticking.value = true
+    requestAnimationFrame(() => {
+      if (oldScrollTop.value > scrollTop) {
+        visible.value = true
+      } else if (scrollTop > 200 && visible.value) {
+        visible.value = false
+      } else if (scrollTop < 200 && !visible.value) {
+        visible.value = true
+      }
+      oldScrollTop.value = scrollTop
+      ticking.value = false
+    })
+  }
+}
+
+
+const emit = defineEmits(['toggle', 'refresh'])
+const toggle = () => {
+  emit('toggle')
+}
+
+onMounted(() => {
+  document.addEventListener('scroll', handleScroll, { passive: true })
+})
+
+onBeforeUnmount(() => {
+  document.body.removeEventListener('scroll', handleScroll, true)
+})
+
+const refreshPage = () => {
+  emit('refresh')
+}
+
+</script>
+
+<style lang="less">
+@import '../../style/index.less';
+
+.header-animat {
+  position: relative;
+  z-index: @ant-global-header-zindex;
+}
+
+.showHeader-enter-active {
+  transition: all 0.25s ease;
+}
+
+.showHeader-leave-active {
+  transition: all 0.5s ease;
+}
+
+.showHeader-enter,
+.showHeader-leave-to {
+  opacity: 0;
+}
+</style>

ant-design-pro-vue3/src/components/HelloWord.tsx

@@ -0,0 +1,21 @@
+import { defineComponent, ref } from 'vue';
+
+export default defineComponent({
+  name: 'HelloWord',
+  props: {
+    msg: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(prop) {
+    const count = ref(0)
+    return () => (
+      <>
+        <h1>{prop.msg}</h1>
+        <button onClick={() => {count.value ++}}>count is: { count.value }</button>
+        <p>Edit <code>components/HelloWorld.vue</code> to test hot module replacement.</p>
+      </>
+    );
+  },
+});

ant-design-pro-vue3/src/components/LockScreen/index.vue

@@ -0,0 +1,343 @@
+<template>
+    <section class="LockScreen" v-if="lockScreen" :class="afterUnlock">
+        <div v-if="lockImg" class="bg" :class="isClickedUnlockBtn ? 'unlockClicked' : ''"
+            :style="{ backgroundImage: `url(${lockImg})` }"></div>
+        <div class="content">
+            <!-- 点击解锁后出现输入框 -->
+            <div class="iptPassword" v-if="isClickedUnlockBtn">
+                <!-- <UserOutlined style="color:grey" class="avatar" /> -->
+                <img :src="userinfo.avatar" class="avatar" />
+                <div class="username">{{ userinfo.username }}</div>
+                <a-input-search v-model:value="password" placeholder="密码" style="width: 300px" @search="onUnlockScreen">
+                    <template #enterButton>
+                        <a-button type="link">
+                            <template #icon>
+                                <div class="ArrowRightOutlined">
+                                    <ArrowRightOutlined />
+                                </div>
+                            </template>
+                        </a-button>
+                    </template>
+                </a-input-search>
+                <div class="wrongPwd" v-if="isWrongPwd">密码不正确</div>
+            </div>
+            <!-- 未点击解锁可修改背景图片 -->
+            <a-upload :before-upload="onChangeBg" :showUploadList="false" v-else>
+                <div class="uploadTxt">
+                    <SearchOutlined class="changeBg" />
+                    <div class="txt">点击更换背景图片</div>
+                </div>
+            </a-upload>
+            <!-- 左下角时间 -->
+            <div class="timeZone">
+                <div class="currentTime">{{ currentTime }}</div>
+                <div class="dateTime">{{ dateTime }}</div>
+            </div>
+            <!-- 右下角三个按钮 -->
+            <div class="deviceStatus">
+                <!-- 是否联网 -->
+                <span class="onlineStatus">
+                    <img src="/icons/onLine.ico" v-show="isOnline" />
+                    <img src="/icons/offLine.ico" v-show="!isOnline" />
+                </span>
+                <!-- 是否充电 -->
+                <SvgIcon :name="charging ? 'batteryCharge' : 'battery'" color="#fff" width="33px" height="33px"
+                    class="charge" />
+                <!-- 解锁按钮 -->
+                <a-tooltip>
+                    <template #title>{{ isClickedUnlockBtn ? '返回' : '点击解锁' }}</template>
+                    <LockOutlined class="unlock" @click="onClickLockBtn" v-if="isClickedUnlockBtn" />
+                    <UnlockOutlined class="unlock" @click="onClickUnlockBtn" v-else />
+                </a-tooltip>
+            </div>
+        </div>
+    </section>
+</template>
+<script lang="ts" setup name="LockScreen">
+import { onMounted, ref } from 'vue'
+import { systemConfig } from '@/store/reactiveState'
+import useSiteSettings from '@/store/useSiteSettings'
+import { SET_LOCK_SCREEN } from '@/store/mutation-types'
+import indexdb from '@/utils/indexDB'
+import dayjs from 'dayjs';
+import { getWeek } from '@/utils/util'
+import { useBattery, useNetwork } from '@vueuse/core'
+import SvgIcon from '@/components/SvgIcon/index.vue'
+import {
+    SearchOutlined,
+    UnlockOutlined,
+    LockOutlined,
+    ArrowRightOutlined,
+    UserOutlined
+} from '@ant-design/icons-vue'
+import { USER_INFO } from '@/store/mutation-types'
+import ls from '@/utils/Storage'
+import * as api from './service'
+
+const userinfo = ls.get(USER_INFO)
+const initBg =
+    'https://desk-fd.zol-img.com.cn/t_s1920x1080c5/g6/M00/03/0B/ChMkKWECB-OIKeSVAFU590PRoH0AASPhQB7J0oAVToP393.jpg'
+
+const isClickedUnlockBtn = ref(false)
+const { lockScreen } = useSiteSettings()
+const onClickUnlockBtn = () => {
+    isClickedUnlockBtn.value = true
+}
+const onClickLockBtn = () => {
+    isClickedUnlockBtn.value = false
+}
+
+// 获取锁屏壁纸
+const lockImg = ref(null)
+onMounted(async () => {
+    setTimeout(async () => {
+        const bg = await indexdb.get('lockImg')
+        lockImg.value = bg?.value || initBg
+    }, 100)
+})
+
+// 获取左下角日期时间
+const getDateTime = () => {
+    const week = dayjs().weekday()
+    const formatedWeek = getWeek(week, false)
+    const day = dayjs().date()
+    const month = dayjs().month() + 1
+    return month + '月' + day + '日' + ', ' + formatedWeek
+}
+const dateTime = ref(getDateTime())
+const currentTime = ref(dayjs().format('HH:mm'))
+setInterval(() => {
+    currentTime.value = dayjs().format('HH:mm')
+    dateTime.value = getDateTime()
+}, 1000)
+
+// 获取电池状态
+const { charging } = useBattery()
+// 获取网络状态
+const { isOnline } = useNetwork()
+
+const onChangeBg = (file) => {
+    if (file.type.indexOf('image') < 0) {
+        alert('只能传图片!')
+    }
+    const reader = new FileReader()
+    reader.readAsDataURL(file)
+    reader.onload = function () {
+        indexdb.set('lockImg', this.result)
+        lockImg.value = this.result
+    }
+    return false
+}
+
+const password = ref()
+const isWrongPwd = ref(false)
+const afterUnlock = ref()
+
+const onUnlockScreen = () => {
+    api.userLogin({ username: userinfo.username, password: password.value }).then((res: any) => {
+        if (!password.value) {
+            isWrongPwd.value = true
+            return false
+        } else {
+            isWrongPwd.value = false
+        }
+        if (res) {
+            if (res.unlocked) {
+                afterUnlock.value = 'afterUnlock'
+                setTimeout(() => {
+                    systemConfig.commit('SET_LOCK_SCREEN', false)
+                    afterUnlock.value = null
+                    isWrongPwd.value = false
+                    isClickedUnlockBtn.value = false
+                    password.value = null
+                }, 300)
+            } else {
+                isWrongPwd.value = true
+            }
+        } else {
+            isWrongPwd.value = true
+        }
+    })
+}
+</script>
+<style lang="less" scoped>
+.afterUnlock {
+    opacity: 0 !important;
+    transition: opacity 0.3s;
+}
+
+.LockScreen {
+    background-color: rgba(0, 0, 0, 0.6);
+    opacity: 1;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 106;
+    overflow: hidden;
+
+    .bg {
+        width: 100%;
+        position: absolute;
+        z-index: 1;
+        background-color: #fff;
+        background-size: 100% auto;
+        background-repeat: no-repeat;
+        height: 100%;
+    }
+
+    .unlockClicked {
+        transform: scale(1.1);
+        filter: blur(10px);
+        transition: all 0.1s;
+    }
+
+    .content {
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        z-index: 2;
+
+        .iptPassword {
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            left: 50%;
+            top: 50%;
+            transform: translate(-50%, -50%);
+
+            .avatar {
+                width: 130px;
+                height: 130px;
+                background-color: #e8eceb;
+                border-radius: 50%;
+                font-size: 80px;
+                line-height: 130px;
+                padding: 5px;
+            }
+
+            .username {
+                color: #fff;
+                font-size: 40px;
+                margin: 10px auto 15px auto;
+            }
+
+            .wrongPwd {
+                color: #f88070;
+                font-size: 16px;
+                text-align: left;
+                margin: 5px 0;
+                width: 100%;
+            }
+
+            ::v-deep(.ant-input) {
+                border-radius: 0;
+
+                &:hover {
+                    border-color: grey;
+                }
+            }
+
+            .ant-btn.ant-btn-link {
+                width: 32px;
+                height: 32px;
+                background-color: grey;
+                border: 2px solid #fff;
+
+                &:hover {
+                    color: #fff;
+                    border-color: #fff;
+                }
+
+                .ArrowRightOutlined {
+                    color: #fff;
+
+                    &:hover {
+                        color: rgba(0, 0, 0, 0.6);
+                    }
+                }
+            }
+        }
+
+        .uploadTxt {
+            display: flex;
+            flex-direction: row;
+            justify-content: center;
+            align-items: center;
+            position: absolute;
+            left: 45%;
+            top: 50%;
+            color: #fff;
+
+            &:hover {
+                color: #0094ff;
+            }
+
+            .changeBg {
+                font-size: 20px;
+                cursor: pointer;
+                margin-right: 15px;
+            }
+
+            .txt {
+                cursor: pointer;
+            }
+        }
+
+        .timeZone {
+            position: absolute;
+            bottom: 50px;
+            left: 20px;
+            color: #fff;
+
+            .currentTime {
+                font-size: 100px;
+                font-weight: 100;
+                height: 90px;
+                line-height: 90px;
+            }
+
+            .dateTime {
+                font-size: 60px;
+                font-weight: 300;
+            }
+        }
+
+        .deviceStatus {
+            position: absolute;
+            bottom: 30px;
+            right: 50px;
+
+            .onlineStatus {
+                margin-right: 20px;
+                display: inline-block;
+
+                img {
+                    width: 25px;
+                    height: 25px;
+                }
+            }
+
+            .onlineStatus,
+            .charge,
+            .unlock {
+                vertical-align: middle;
+            }
+
+            .unlock {
+                font-size: 23px;
+                color: #fff;
+                margin-left: 20px;
+                font-weight: 500;
+
+                &:hover {
+                    color: #0094ff;
+                }
+            }
+        }
+    }
+}
+</style>

ant-design-pro-vue3/src/components/LockScreen/service.ts

@@ -0,0 +1,7 @@
+import baseService from '@/utils/http/axios'
+import { baseURL } from '@/utils/util'
+
+export const userLogin = data => {
+  const api = baseURL + `auth/unlock`
+  return baseService.post(api, data)
+}

ant-design-pro-vue3/src/components/LogicFlow/basic/customRect.ts

@@ -0,0 +1,53 @@
+import { RectNode, RectNodeModel, HtmlNode, HtmlNodeModel } from "@logicflow/core";
+import { getShapeStyleFuction } from '../utils/getShapeStyleUtil'
+import { colors } from '../utils/config'
+
+class CustomRectNode extends RectNode { }
+
+class CustomRectModel extends RectNodeModel {
+  initNodeData(data) {
+    super.initNodeData(data);
+    this.width = 100;
+    this.height = 60;
+    this.radius = 10;
+  }
+  getNodeStyle() {
+    const style = super.getNodeStyle();
+    style.stroke = colors.nodeBorderColor
+    style.fill = colors.nodeColor
+    const properties = this.getProperties()
+    return getShapeStyleFuction(style, properties)
+  }
+}
+
+class ButtonNode extends HtmlNode {
+  setHtml(rootEl) {
+    const { properties } = this.props.model;
+
+    const el = document.createElement("div");
+    el.className = "uml-wrapper";
+    const html = `
+      <div style="width:100px;height:60px;border:2px solid #349EFF;background-color:#E8F8FF;border-radius:10px">
+      </div>
+    `;
+    el.innerHTML = html;
+    rootEl.innerHTML = "";
+    rootEl.appendChild(el);
+  }
+}
+
+class ButtonNodeModel extends HtmlNodeModel {
+  setAttributes() {
+    this.stroke = '#349EFF';
+    this.fill = '#E8F8FF'
+    this.width = 100;
+    this.height = 60;
+    this.radius = 10;
+  }
+}
+
+export default {
+  type: "custom-rect",
+  view: CustomRectNode,
+  model: CustomRectModel
+};

ant-design-pro-vue3/src/components/LogicFlow/edge/customBezierEdge.ts

@@ -0,0 +1,37 @@
+import { BezierEdge, BezierEdgeModel } from '@logicflow/core'
+import { getShapeStyleFuction, getTextStyleFunction } from '../utils/getShapeStyleUtil'
+
+// 贝塞尔曲线
+class Model extends BezierEdgeModel {
+  constructor(data, graphModel) {
+    super(data, graphModel)
+    this.strokeWidth = 1
+  }
+  // getTextStyle() {
+  //   const style = super.getTextStyle()
+  //   return getTextStyleFunction(style, this.properties)
+  // }
+
+  getEdgeStyle() {
+    const attributes = super.getEdgeStyle()
+    const properties = this.properties;
+    const style = getShapeStyleFuction(attributes, properties)
+    return { ...style }
+  }
+
+  // setAttributes() {
+  //   this.isAnimation = true;
+  // }
+  // getEdgeAnimationStyle() {
+  //   const style = super.getEdgeAnimationStyle();
+  //   style.strokeDasharray = "20 2";
+  //   style.animationDuration = "30s";
+  //   return style;
+  // }
+}
+
+export default {
+  type: "custom-bezier",
+  view: BezierEdge,
+  model: Model
+};

ant-design-pro-vue3/src/components/LogicFlow/icon/rectImg.ts

@@ -0,0 +1 @@
+export default 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFgAAAA4CAYAAAB5YT9uAAAAAXNSR0IArs4c6QAAAt1JREFUeF7t3M9Lk3EcB/D3V7eKOS1j0BgMIS0RLJiokbcgIekSeOjSTcYOHSrynwgSNjtZu0S3Dh0KRlTnEMvVQMKQggyWxkpozWq/nnge9oz5bHvcI34OsvdgsPF8n/eevfbec/t8FfgQFVA26XbHRC/qgIZrja67EaJ69jl/9umq+9HbNIY2c3CVG556QBn28bI7FHCiC8XRAD5cGcxfu9x/eAXADi0rsIE799q9GDwKFR7B9slelPQgPuoF9OJ92kLnwjI8335Bmz2fH7ci19IZr8MJLfW3hNN3LiJL1NYFZl+i23sIq/cvqVDlLKPJVmAVimv/YlPIDhxHqfV4rlz7ic5bz+FNzqgjldvEDmAd2ngGYlpxKYwMbwvOSqPfLsYfwJe+oVwAymaLzQZXgf1RrZiMIOMsnqt1gZEF+DZuGsB6e42nFbjDH9UKBN5bYSrA7kqDCbw3xuZnEXi/RS15BCawsIBwPBtMYGEB4Xg2mMDCAsLxbDCBhQWE49lgAgsLCMezwQQWFhCOZ4MJLCwgHM8GE1hYQDieDSawsIBwPBtMYGEB4Xg2mMDCAsLxbDCBhQWE49lgAgsLCMezwQQWFhCOZ4MJLCwgHM8GE1hYQDieDSawsIBwfEsNDsS0Ase4nP8SpTJwLm6McdkPwYTi2p/oFLKnOIjoSPljBq7bL9CVnFEe2ymjcEJbzhUxeHeSo7ROhK8n0BPsQWp+Uk3YAasnK1vD994fW/R3Q0VGsT3AYfCmzvp059oPuOaX4MkVUIz0r5+ZHuv7YjeIaEx8Pn73ffjVhu/hm7Qa2vwNN7czaGysjxv7vShMBLXUhd6vV6fH+tYruHWjtHpCdZwWQEfNe/OYk39Mu6w194YwR2d12OoYrRWubm7ZgtwuaE6/Zy2o+VrPqNvOoBbcbDPbuzu3tcVV3GZ4dZt07P4Zbb+idhsZ2y1laqW4kYyz3rS8KZKzWK62FfgP5lsoV6FAKMQAAAAASUVORK5CYII='

ant-design-pro-vue3/src/components/LogicFlow/index.vue

@@ -0,0 +1,147 @@
+<template>
+  <section class="LogicFlow">
+    <div id="flow"></div>
+  </section>
+</template>
+
+<script lang="ts" setup name="LogicFlow">
+import { ref, onMounted, watch } from 'vue'
+import icon from './icon/rectImg';
+import customRect from "./basic/customRect";
+import customBezierEdge from "./edge/customBezierEdge";
+import { selectedNodeStyle, nodeStyle, edgeStyle, selectedEdgeStyle, colors } from './utils/config'
+import LogicFlow from '@logicflow/core'
+import { Menu, DndPanel } from '@logicflow/extension';
+import "@logicflow/core/dist/style/index.css";
+import '@logicflow/extension/lib/style/index.css'
+let lfRef = null
+let selectedNode = { type: '', id: '' }
+const emit = defineEmits(['parentNodes'])
+const props = defineProps(['flowData'])
+
+const clearSelectedNodeStyle = (lf) => {
+  lf.setProperties(selectedNode.id, selectedNode.type === 'node' ? nodeStyle : edgeStyle)
+}
+
+const getFlowJson = () => {
+  const data = lfRef.value.getGraphData()
+  return data
+}
+
+const getAllParentNodes = (lf, id, currentTxt) => {
+  const parentNodes = [currentTxt]
+  function func(lf, id) {
+    const nodes = lf.getNodeIncomingNode(id)
+    const node = nodes && nodes[0]
+    if (node) {
+      parentNodes.push(node.text.value)
+      func(lf, node.id)
+    }
+  }
+  func(lf, id)
+  emit('parentNodes', parentNodes)
+  return parentNodes
+}
+
+defineExpose({
+  lfRef,
+  getFlowJson
+})
+
+onMounted(() => {
+  const lf = new LogicFlow({
+    container: document.querySelector("#flow"),
+    plugins: [Menu, DndPanel],
+    snapline: false,
+  });
+  lfRef = ref(lf)
+  lf.setDefaultEdgeType('bezier')
+  lf.register(customRect);
+  lf.register(customBezierEdge);
+  lf.setDefaultEdgeType('custom-bezier')
+  lf.on('node:click', ({ data }) => {
+    // 先清除之前的颜色
+    clearSelectedNodeStyle(lf)
+    // 再设置新的id
+    lf.setProperties(data.id, selectedNodeStyle)
+    selectedNode = { id: data.id, type: 'node' }
+    getAllParentNodes(lf, data.id, data?.text?.value)
+  });
+  lf.on('edge:click', ({ data }) => {
+    // 先清除之前的颜色
+    clearSelectedNodeStyle(lf)
+    // 再设置新的id
+    lf.setProperties(data.id, selectedEdgeStyle)
+    selectedNode = { id: data.id, type: 'edge' }
+  });
+  lf.on('blank:click', () => {
+    clearSelectedNodeStyle(lf)
+    selectedNode = { id: 'blank', type: 'blank' }
+  });
+  lf.setTheme({
+    bezier: {
+      stroke: colors.edgeColor,
+      adjustLine: {
+        stroke: '#949494',
+      },
+      adjustAnchor: {
+        r: 4,
+        fill: '#949494',
+        stroke: '#949494',
+        fillOpacity: 1,
+      },
+    },
+    nodeText: {
+      fontSize: 13,
+    },
+    edgeText: {
+      fontSize: 13,
+    },
+  })
+  lf.extension.dndPanel.setPatternItems([
+    {
+      type: 'custom-rect',
+      label: '请拖拽节点',
+      icon,
+      className: 'flow-rect-node'
+    },
+  ]);
+
+  // ajax 获取数据
+  watch(
+    () => props.flowData,
+    (newVal) => {
+      lf.render(newVal)
+    },
+    {
+      deep: true,
+      immediate: true
+    }
+  );
+})
+</script>
+
+<style lang="less">
+.LogicFlow {
+  height: 100vh;
+
+  #flow {
+    height: 100%;
+    width: 100%;
+
+    .flow-rect-node {
+      .lf-dnd-shape {
+        background-size: 100% 80%;
+        width: 50px;
+        height: 40px;
+      }
+    }
+
+    rect {
+      cursor: pointer;
+    }
+
+    .uml-wrapper {}
+  }
+}
+</style>

ant-design-pro-vue3/src/components/LogicFlow/utils/config.ts

@@ -0,0 +1,14 @@
+export const colors = {
+  nodeBorderColor: '#90CFFD',
+  selectedNodeBorderColor: '#40A6FE',
+  nodeColor: '#E7F7FE',
+  selectedNodeColor: '#94D5FD',
+  edgeColor: '#AAB7C4',
+  selectedEdgeColor: '#40A6FE'
+}
+
+
+export const selectedNodeStyle = { fill: colors.selectedNodeColor, stroke: colors.selectedNodeBorderColor }
+export const nodeStyle = { fill: colors.nodeColor, stroke: colors.nodeBorderColor }
+export const edgeStyle = { stroke: colors.edgeColor }
+export const selectedEdgeStyle = { stroke: colors.selectedEdgeColor }

ant-design-pro-vue3/src/components/LogicFlow/utils/getShapeStyleUtil.js

@@ -0,0 +1,61 @@
+export const getShapeStyleFuction = (style, properties) => {
+  if (properties.fill) {
+    style.fill = properties.fill
+  }
+  // if (properties.gradientColor && style.fill !== properties.gradientColor) {
+  //   style.fillGradient = properties.gradientColor
+  // }
+  if (properties.stroke) {
+    style.stroke = properties.stroke
+  }
+  if (properties.strokeWidth) {
+    style.strokeWidth = properties.strokeWidth
+  }
+  // if (properties.borderStyle) {
+  //   if (properties.borderStyle === 'solid') {
+  //     style.strokeDashArray = '0'
+  //     // nodeResize里的bug导致的,array小写了
+  //     style.strokeDasharray = '0'
+  //   }
+  //   if (properties.borderStyle === 'dashed') {
+  //     style.strokeDashArray = '3 3'
+  //     style.strokeDasharray = '3 3'
+  //   }
+  //   if (properties.borderStyle === 'dotted') {
+  //     style.strokeDashArray = '1 1'
+  //     style.strokeDasharray = '1 1'
+  //   }
+  //   if (properties.borderStyle === 'hidden') {
+  //     style.stroke = style.fill
+  //   }
+  // }
+  return style
+}
+
+export const getTextStyleFunction = (style = {}, properties) => {
+  if (properties.fontColor) {
+    style.color = properties.fontColor
+  }
+  if (properties.fontSize) {
+    style.fontSize = properties.fontSize
+  }
+  if (properties.fontFamily) {
+    style.fontFamily = properties.fontFamily
+  }
+  if (properties.lineHeight) {
+    style.lineHeight = properties.lineHeight
+  }
+  if (properties.textAlign) {
+    style.textAlign = properties.textAlign
+  }
+  if (properties.fontWeight) {
+    style.fontWeight = properties.fontWeight
+  }
+  if (properties.textDecoration) {
+    style.textDecoration = properties.textDecoration
+  }
+  if (properties.fontStyle) {
+    style.fontStyle = properties.fontStyle
+  }
+  return style
+}

ant-design-pro-vue3/src/components/Menu/Menu.vue

@@ -0,0 +1,110 @@
+<template>
+  <a-menu :mode="mode" :theme="theme" :openKeys="openKeys.value" :selectedKeys="selectedKeys" @openChange="onOpenChange"
+    @click="onSelect" class="SysMenu">
+    <template v-for="m in menu" :key="m.path">
+      <RenderSubMenu :menu="m" v-if="!m.hidden" />
+    </template>
+  </a-menu>
+</template>
+<script lang="ts" setup name="Menu">
+import { reactive, computed, onMounted, watch, ref, ComputedRef } from 'vue'
+import { useRouter } from 'vue-router'
+import RenderSubMenu from './RenderSubMenu.vue'
+
+const props = defineProps({
+  menu: {
+    type: Array,
+    required: true
+  },
+  theme: {
+    type: String,
+    required: false,
+    default: 'dark'
+  },
+  mode: {
+    type: String,
+    required: false,
+    default: 'inline'
+  },
+  collapsed: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+})
+const router = useRouter()
+const route = router.currentRoute
+const openKeys = reactive<any>({ value: [] })
+const selectedKeys = ref<any>([])
+const cachedOpenKeys = reactive<any>({ value: [] })
+const rootSubmenuKeys: ComputedRef<string[]> = computed(() => {
+  const keys: string[] = []
+  props.menu.forEach((item: any) => keys.push(item.path))
+  return keys
+})
+onMounted(() => {
+  updateMenu()
+})
+
+watch(
+  () => props.collapsed,
+  (val) => {
+    if (val) {
+      cachedOpenKeys.value = openKeys.value.concat()
+    } else {
+      openKeys.value = cachedOpenKeys.value
+    }
+  }
+)
+
+// 主要作用:使用router.push跳转页面时更左侧新菜单选中项
+watch(
+  () => route.value,
+  (val) => {
+    updateMenu()
+  }
+)
+
+// select menu item
+const onOpenChange = (openKeysParams) => {
+  // 在水平模式下时执行，并且不再执行后续
+  if (props.mode === 'horizontal') {
+    openKeys.value = openKeysParams
+    return
+  }
+  // 非水平模式时
+  const latestOpenKey: string = openKeysParams.find(
+    (key) => /*去掉这个!则可以全部打开菜单(目前只能打开一个菜单)*/ !openKeys.value.includes(key)
+  )
+  if (!rootSubmenuKeys.value.includes(latestOpenKey)) {
+    openKeys.value = openKeysParams
+  } else {
+    openKeys.value = latestOpenKey ? [latestOpenKey] : []
+  }
+}
+
+const emit = defineEmits(['menuSelect'])
+const onSelect = ({ item, key, selectedKeys: selectedKeysParams }) => {
+  selectedKeys.value = selectedKeysParams
+  emit('menuSelect', { item, key, selectedKeys })
+}
+const updateMenu = () => {
+  const routes = route.value.matched.concat()
+  const { hidden } = route.value.meta
+  if (routes.length >= 3 && hidden) {
+    routes.pop()
+    selectedKeys.value = [routes[routes.length - 1].path]
+  } else {
+    selectedKeys.value = [routes.pop()!.path]
+  }
+  const openKeysArr: any = []
+  if (props.mode === 'inline') {
+    routes.forEach((item) => {
+      openKeysArr.push(item.path)
+    })
+  }
+  props.collapsed ? (cachedOpenKeys.value = openKeysArr) : (openKeys.value = openKeysArr)
+}
+</script>
+<style lang="less">
+</style>

ant-design-pro-vue3/src/components/Menu/RenderSubMenu.vue

@@ -0,0 +1,60 @@
+<template>
+  <a-sub-menu v-if="menu.children && !menu.hideChildrenInMenu" :key="menu.path" popupClassName="popupSubMenu">
+    <template #icon>
+      <SvgIcon :name="menu.meta.icon" v-if="menu.meta.icon" />
+    </template>
+    <template #title>{{ $t(menu.meta.title) }}</template>
+    <template v-if="!menu.hideChildrenInMenu">
+      <template v-for="sub in menu.children">
+        <!-- 递归组件 -->
+        <RenderSubMenu :menu="sub" />
+      </template>
+    </template>
+  </a-sub-menu>
+  <!-- renderMenuItem -->
+  <a-menu-item :key="menu.path" v-else-if="!menu.meta.hidden">
+    <template #icon>
+      <SvgIcon :name="menu.meta.icon" v-if="menu.meta.icon" />
+    </template>
+    <!-- 外部链接 -->
+    <a v-if="menu.meta.target" :href="menu.meta.target" :target="menu.meta.blank === false ? '' : '_blank'">
+      <!-- span重复了吧?这就是template的弊端,jsx才是王道 -->
+      <span>{{ $t(menu.meta.title) }}</span>
+    </a>
+    <router-link :to="filterParams(menu.path)" v-else>
+      <span>{{ $t(menu.meta.title) }}</span>
+    </router-link>
+  </a-menu-item>
+</template>
+<script lang="ts" setup name="RenderSubMenu">
+import SvgIcon from '@/components/SvgIcon/index.vue'
+
+const props = defineProps(['menu'])
+// info:todo:貌似没用
+if (props.menu.children && props.menu.hideChildrenInMenu) {
+  // 把有子菜单的 并且 父菜单是要隐藏子菜单的
+  // 都给子菜单增加一个 hidden 属性
+  // 用来给刷新页面时， selectedKeys 做控制用
+  props.menu.children.forEach((item) => {
+    item.meta = Object.assign(item.meta, { hidden: true })
+  })
+}
+
+// info:todo:目前没有发现需要入口带参数的情况,一般这种跳转的都是二级页面,是从其他页面跳转过来的,不需要显示在菜单中,目前菜单中是这种路径的,点击也会报404,因为没有对:pageNo([1-9]\\d*)?进行翻译,直接当做了路径去匹配,目前做法是去掉后面的参数
+const filterParams = (menu) => {
+  return menu.indexOf('/:') > 0 ? menu.split('/:')[0] : menu
+}
+</script>
+<style lang="less" scoped>
+.menuName {
+
+  svg,
+  span {
+    vertical-align: middle;
+  }
+
+  svg {
+    margin-right: 10px;
+  }
+}
+</style>

ant-design-pro-vue3/src/components/Menu/SideMenu.vue

@@ -0,0 +1,59 @@
+<template>
+  <a-layout-sider :class="['sider', isDesktop ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null]"
+    width="256px" :collapsible="collapsible" v-model:collapsed="sideMenuCollapsed" :trigger="null">
+    <logo />
+    <Menu :collapsed="collapsed" :menu="menus" :theme="theme" :mode="mode" @select="onSelect"></Menu>
+  </a-layout-sider>
+</template>
+
+<script lang="ts" setup name="SideMenu">
+import { watch, ref } from 'vue'
+import Logo from '@/components/tools/Logo.vue'
+import Menu from './Menu.vue'
+import { isDesktop } from '@/utils/device'
+import useSiteSettings from '@/store/useSiteSettings'
+
+const props = defineProps({
+  mode: {
+    type: String,
+    required: false,
+    default: 'inline'
+  },
+  theme: {
+    type: String,
+    required: false,
+    default: 'dark'
+  },
+  collapsible: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  collapsed: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  menus: {
+    type: Array,
+    required: true
+  }
+})
+
+const sideMenuCollapsed = ref(false)
+watch(
+  () => props.collapsed,
+  (newVal) => {
+    sideMenuCollapsed.value = newVal
+  },
+  {
+    immediate: true
+  }
+);
+
+const emit = defineEmits(['menuSelect'])
+const onSelect = (obj) => {
+  emit('menuSelect', obj)
+}
+const { fixSiderbar } = useSiteSettings()
+</script>

ant-design-pro-vue3/src/components/MultiTab/index.less

@@ -0,0 +1,25 @@
+@import '../../style/index.less';
+
+@multi-tab-prefix-cls: ~"@{ant-pro-prefix}-multi-tab";
+@multi-tab-wrapper-prefix-cls: ~"@{ant-pro-prefix}-multi-tab-wrapper";
+
+/*
+.topmenu .@{multi-tab-prefix-cls} {
+  max-width: 1200px;
+  margin: -23px auto 24px auto;
+}
+*/
+.@{multi-tab-prefix-cls} {
+  margin: -23px -24px 24px -24px;
+  background: #fff;
+}
+
+.topmenu .@{multi-tab-wrapper-prefix-cls} {
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.topmenu.content-width-Fluid .@{multi-tab-wrapper-prefix-cls} {
+  max-width: 100%;
+  margin: 0 auto;
+}

ant-design-pro-vue3/src/components/MultiTab/index.vue

@@ -0,0 +1,203 @@
+<template>
+    <div class="ant-pro-multi-tab">
+        <div class="ant-pro-multi-tab-wrapper">
+            <a-tabs hideAdd type="editable-card" v-model:activeKey="activeKey"
+                :tabBarStyle="{ margin: 0, paddingLeft: '11px', paddingTop: '1px' }" @edit="onEdit">
+                <a-tab-pane v-for="page in pages" :key="page.fullPath" :closable="pages.length > 1" style="height: 0">
+                    <template #tab>
+                        <a-dropdown :trigger="['contextmenu']">
+                            <span :style="{ userSelect: 'none' }">{{ page.meta.customTitle || $t(page.meta.title) }}</span>
+                            <template #overlay>
+                                <a-menu @click="({ key, item, domEvent }) => {
+                                    closeMenuClick(key, page.fullPath);
+                                }">
+                                    <a-menu-item key="closeSelf">{{ $t('multiTab.closeCurrent') }}</a-menu-item>
+                                    <a-menu-item key="closeRight">{{ $t('multiTab.closeRight') }}</a-menu-item>
+                                    <a-menu-item key="closeLeft">{{ $t('multiTab.closeLeft') }}</a-menu-item>
+                                    <a-menu-item key="closeAll">{{ $t('multiTab.closeAll') }}</a-menu-item>
+                                </a-menu>
+                            </template>
+                        </a-dropdown>
+                    </template>
+                </a-tab-pane>
+            </a-tabs>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup name="MultiTab">
+import { ref, reactive, watch, getCurrentInstance } from 'vue'
+import { useRouter, RouteLocationNormalizedLoaded } from 'vue-router'
+import events from '@/utils/eventBus'
+import { message } from 'ant-design-vue'
+import { useI18n } from 'vue-i18n'
+import './index.less'
+
+let fullPathList: Array<string> = []
+const pages = reactive<Array<RouteLocationNormalizedLoaded>>([])
+const activeKey = ref('')
+const router = useRouter()
+const { t } = useI18n()
+const { proxy } = getCurrentInstance()
+
+const selectedLastPath = () => {
+    activeKey.value = fullPathList[fullPathList.length - 1]
+}
+
+    ; (function created() {
+        // 全局的事件绑定用于页面内控制tab标签,暂时用不上
+        // #region
+        events.once('multiTab.open', (val) => {
+            if (!val) {
+                throw new Error(`multi-tab: open tab ${val} err`)
+            }
+            activeKey.value = val
+        })
+        events.once('multiTab.close', (val) => {
+            if (!val) {
+                closeSelf(activeKey.value)
+                return
+            }
+            closeSelf(val)
+        })
+        events.once('multiTab.rename', ({ key, name }) => {
+            console.log('rename', key, name)
+            try {
+                const item = pages.find((item) => item.path === key)
+                item!.meta.customTitle = name
+                proxy.$forceUpdate()
+            } catch (e) {
+                console.error(e)
+            }
+        })
+        // #endregion
+
+        pages.push(router.currentRoute.value)
+        fullPathList.push(router.currentRoute.value.fullPath)
+        selectedLastPath()
+    })()
+
+const onEdit = (targetKey, action) => {
+    //proxy[action](targetKey)
+    remove(targetKey)
+}
+const remove = (targetKey) => {
+    const temp = pages.filter((page) => page.fullPath !== targetKey)
+    pages.length = 0
+    pages.push(...temp)
+    fullPathList = fullPathList.filter((path) => path !== targetKey)
+    // 判断当前标签是否关闭，若关闭则跳转到最后一个还存在的标签页
+    if (!fullPathList.includes(activeKey.value)) {
+        selectedLastPath()
+    }
+}
+
+// content menu
+const closeSelf = (e) => {
+    // 判断是否为最后一个标签页，如果是最后一个，则无法被关闭
+    if (fullPathList.length > 1) {
+        remove(e)
+    } else {
+        message.info(t('multiTab.cannotCloseLast'))
+    }
+}
+const closeLeft = (e) => {
+    const currentIndex = fullPathList.indexOf(e)
+    if (currentIndex > 0) {
+        fullPathList.forEach((item, index) => {
+            if (index < currentIndex) {
+                remove(item)
+            }
+        })
+    } else {
+        message.info(t('multiTab.noLeft'))
+    }
+}
+const closeRight = (e) => {
+    const currentIndex = fullPathList.indexOf(e)
+    if (currentIndex < fullPathList.length - 1) {
+        fullPathList.forEach((item, index) => {
+            if (index > currentIndex) {
+                remove(item)
+            }
+        })
+    } else {
+        message.info(t('multiTab.noRight'))
+    }
+}
+const closeAll = (e) => {
+    const currentIndex = fullPathList.indexOf(e)
+    fullPathList.forEach((item, index) => {
+        if (index !== currentIndex) {
+            remove(item)
+        }
+    })
+}
+const closeMenuClick = (key: string, route) => {
+    const allFun = { closeAll, closeRight, closeLeft, closeSelf }
+    allFun[key](route)
+}
+
+watch(
+    () => router.currentRoute.value,
+    (newVal) => {
+        activeKey.value = newVal.fullPath
+        if (fullPathList.indexOf(newVal.fullPath) < 0) {
+            fullPathList.push(newVal.fullPath)
+            pages.push(newVal)
+        }
+    }
+)
+
+watch(activeKey, (newPathKey) => {
+    router.push({ path: newPathKey })
+})
+</script>
+<style lang="less">
+.tab_style() {
+    .ant-tabs-card {
+        padding-left: 0;
+
+        .ant-tabs-nav-wrap {
+            margin: 5px
+        }
+
+        .ant-tabs-nav-container {
+
+            .ant-tabs-tab-prev:hover,
+            .ant-tabs-tab-next:hover {
+                // width: 22px;
+                background-color: rgba(0, 0, 0, 0.03);
+            }
+
+            height: 37px;
+        }
+
+        .ant-tabs-tab {
+            height: 32px;
+            margin-right: 5px;
+            line-height: 32px;
+            background: #ffffff;
+            border: 1px solid #dedede;
+        }
+
+        .ant-tabs-tab-active {
+            height: 32px;
+
+            .anticon-close {
+                display: inline-block;
+            }
+        }
+
+        .ant-tabs-tab:hover {
+            .anticon-close {
+                color: #333;
+                display: inline-block;
+            }
+        }
+    }
+}
+
+.ant-pro-multi-tab-wrapper {
+    .tab_style() !important;
+}
+</style>

ant-design-pro-vue3/src/components/MultiTab/lang/cn.ts

@@ -0,0 +1,9 @@
+export default {
+  closeCurrent: '关闭当前标签',
+  closeRight: '关闭右侧',
+  closeLeft: '关闭左侧',
+  closeAll: '关闭全部',
+  cannotCloseLast:'这是最后一个标签了, 无法被关闭',
+  noLeft:'左侧没有标签',
+  noRight:'右侧没有标签'
+}

ant-design-pro-vue3/src/components/MultiTab/lang/en.ts

@@ -0,0 +1,9 @@
+export default {
+  closeCurrent: 'Close current',
+  closeRight: 'Close right',
+  closeLeft: 'Close left',
+  closeAll: 'Close all',
+  cannotCloseLast: 'Can not close the last label',
+  noLeft: 'No left label',
+  noRight: 'No right label'
+}

ant-design-pro-vue3/src/components/NProgress/nprogress.less

@@ -0,0 +1,75 @@
+@import url('../../style/index.less');
+
+/* Make clicks pass-through */
+#nprogress {
+  pointer-events: none;
+}
+
+#nprogress .bar {
+  background: @primary-color;
+
+  position: fixed;
+  z-index: 1031;
+  top: 0;
+  left: 0;
+
+  width: 100%;
+  height: 2px;
+}
+
+/* Fancy blur effect */
+#nprogress .peg {
+  display: block;
+  position: absolute;
+  right: 0px;
+  width: 100px;
+  height: 100%;
+  box-shadow: 0 0 10px @primary-color, 0 0 5px @primary-color;
+  opacity: 1.0;
+
+  -webkit-transform: rotate(3deg) translate(0px, -4px);
+  -ms-transform: rotate(3deg) translate(0px, -4px);
+  transform: rotate(3deg) translate(0px, -4px);
+}
+
+/* Remove these to get rid of the spinner */
+#nprogress .spinner {
+  display: block;
+  position: fixed;
+  z-index: 1031;
+  top: 15px;
+  right: 15px;
+}
+
+#nprogress .spinner-icon {
+  width: 18px;
+  height: 18px;
+  box-sizing: border-box;
+
+  border: solid 2px transparent;
+  border-top-color: @primary-color;
+  border-left-color: @primary-color;
+  border-radius: 50%;
+
+  -webkit-animation: nprogress-spinner 400ms linear infinite;
+  animation: nprogress-spinner 400ms linear infinite;
+}
+
+.nprogress-custom-parent {
+  overflow: hidden;
+  position: relative;
+}
+
+.nprogress-custom-parent #nprogress .spinner,
+.nprogress-custom-parent #nprogress .bar {
+  position: absolute;
+}
+
+@-webkit-keyframes nprogress-spinner {
+  0%   { -webkit-transform: rotate(0deg); }
+  100% { -webkit-transform: rotate(360deg); }
+}
+@keyframes nprogress-spinner {
+  0%   { transform: rotate(0deg); }
+  100% { transform: rotate(360deg); }
+}

ant-design-pro-vue3/src/components/NoticeIcon/index.vue

@@ -0,0 +1,86 @@
+<template>
+  <!--placement="bottomRight"
+    :autoAdjustOverflow="false"
+  :arrowPointAtCenter="true"-->
+  <a-popover v-model:visible="visible" trigger="click" :placement="isMobile ? 'bottom' : 'bottomRight'"
+    overlayClassName="header-notice-wrapper" :getPopupContainer="getPopupContainer"
+    :overlayStyle="{ width: isMobile ? '250px' : '300px', top: '50px' }">
+    <template #content>
+      <a-spin :spinning="loading">
+        <a-tabs>
+          <a-tab-pane tab="通知" key="1">
+            <a-list>
+              <a-list-item>
+                <a-list-item-meta title="你收到了 14 份新周报" description="一年前">
+                  <a-avatar style="background-color: white" slot="avatar"
+                    src="https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png" />
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-list-item-meta title="你推荐的 曲妮妮 已通过第三轮面试" description="一年前">
+                  <a-avatar style="background-color: white" slot="avatar"
+                    src="https://gw.alipayobjects.com/zos/rmsportal/OKJXDXrmkNshAMvwtvhu.png" />
+                </a-list-item-meta>
+              </a-list-item>
+              <a-list-item>
+                <a-list-item-meta title="这种模板可以区分多种通知类型" description="一年前">
+                  <a-avatar style="background-color: white" slot="avatar"
+                    src="https://gw.alipayobjects.com/zos/rmsportal/kISTdvpyTAhtGxpovNWd.png" />
+                </a-list-item-meta>
+              </a-list-item>
+            </a-list>
+          </a-tab-pane>
+          <a-tab-pane tab="消息" key="2">123</a-tab-pane>
+          <a-tab-pane tab="待办" key="3">123</a-tab-pane>
+        </a-tabs>
+      </a-spin>
+    </template>
+    <span @click="fetchNotice" class="header-notice" ref="noticeRef" style="padding: 0 18px">
+      <a-badge count="12">
+        <BellOutlined style="font-size: 16px; padding: 4px" />
+      </a-badge>
+    </span>
+  </a-popover>
+</template>
+
+<script lang="ts" setup name="HeaderNotice">
+import { ref } from 'vue'
+import { BellOutlined } from '@ant-design/icons-vue'
+import { isMobile } from '@/utils/device'
+
+const loading = ref<boolean>(false)
+const visible = ref<boolean>(false)
+const noticeRef = ref(null)
+
+const fetchNotice = () => {
+  if (!visible.value) {
+    loading.value = true
+    setTimeout(() => {
+      loading.value = false
+    }, 300)
+  } else {
+    loading.value = false
+  }
+  // visible.value = !visible.value;
+}
+
+const getPopupContainer = () => {
+  return noticeRef.value!.parentElement
+}
+</script>
+
+<style lang="css">
+.header-notice-wrapper {
+  top: 50px !important;
+}
+</style>
+<style lang="less" scoped>
+.header-notice {
+  display: inline-block;
+  transition: all 0.3s;
+
+  span {
+    // vertical-align: initial;
+  }
+}
+</style>

ant-design-pro-vue3/src/components/OpenModelButton/index.vue

@@ -0,0 +1,48 @@
+<template>
+    <span>
+        <a-button type="primary" @click="click" v-bind="$attrs">
+            {{ text ?? '打开' }}
+        </a-button>
+        <component v-if="visible" :is="is" :visible="visible" @close:modal="visible = false" />
+    </span>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { ref } from 'vue'
+import { useStore } from 'vuex';
+const store = useStore();
+
+const props = defineProps({
+    modal: {
+        type: [Object, Function],
+        required: true
+    },
+    text: String,
+    afterShow: [String, Function],
+    payload: Object
+})
+
+const is = computed(() => {
+    if (typeof props.modal === 'function') {
+        return props.modal()
+    } else {
+        return props.modal
+    }
+})
+
+const visible = ref(false)
+function click () {
+    visible.value = true;
+    const afterShow = props.afterShow
+    if (afterShow) {
+        if (typeof afterShow === 'function') {
+            afterShow(props.payload)
+        } else if (typeof afterShow === 'string') {
+            store.dispatch(afterShow, props.payload)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped></style>

ant-design-pro-vue3/src/components/PageHeader/index.vue

@@ -0,0 +1,199 @@
+<template>
+  <div class="page-header">
+    <div class="page-header-index-wide">
+      <Breadcrumb />
+      <div class="detail">
+        <div class="main" v-if="!$route.meta.hiddenHeaderContent">
+          <div class="row">
+            <img v-if="logo" :src="logo" class="logo"/>
+            <h1 v-if="title" class="title">{{ title }}</h1>
+            <div class="action">
+              <slot name="action"></slot>
+            </div>
+          </div>
+          <div class="row">
+            <div v-if="avatar" class="avatar">
+              <a-avatar :src="avatar" />
+            </div>
+            <div v-if="this.$slots.content" class="headerContent">
+              <slot name="content"></slot>
+            </div>
+            <div v-if="this.$slots.extra" class="extra">
+              <slot name="extra"></slot>
+            </div>
+          </div>
+          <div>
+            <slot name="pageMenu"></slot>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import Breadcrumb from '@/components/tools/Breadcrumb.vue'
+
+export default {
+  name: 'PageHeader',
+  components: {
+    Breadcrumb
+  },
+  props: {
+    title: {
+      type: [String, Boolean],
+      default: true,
+      required: false
+    },
+    logo: {
+      type: String,
+      default: '',
+      required: false
+    },
+    avatar: {
+      type: String,
+      default: '',
+      required: false
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.page-header {
+  background: #fff;
+  padding: 16px 32px 0;
+  border-bottom: 1px solid #e8e8e8;
+
+  .breadcrumb {
+    margin-bottom: 16px;
+  }
+
+  .detail {
+    display: flex;
+    /*margin-bottom: 16px;*/
+
+    .avatar {
+      flex: 0 1 72px;
+      margin: 0 24px 8px 0;
+
+      & > span {
+        border-radius: 72px;
+        display: block;
+        width: 72px;
+        height: 72px;
+      }
+    }
+
+    .main {
+      width: 100%;
+      flex: 0 1 auto;
+
+      .row {
+        display: flex;
+        width: 100%;
+
+        .avatar {
+          margin-bottom: 16px;
+        }
+      }
+
+      .title {
+        font-size: 20px;
+        font-weight: 500;
+
+        font-size: 20px;
+        line-height: 28px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.85);
+        margin-bottom: 16px;
+        flex: auto;
+      }
+      .logo {
+        width: 28px;
+        height: 28px;
+        border-radius: 4px;
+        margin-right: 16px;
+      }
+      .content,
+      .headerContent {
+        flex: auto;
+        color: rgba(0, 0, 0, 0.45);
+        line-height: 22px;
+
+        .link {
+          margin-top: 16px;
+          line-height: 24px;
+
+          a {
+            font-size: 14px;
+            margin-right: 32px;
+          }
+        }
+      }
+      .extra {
+        flex: 0 1 auto;
+        margin-left: 88px;
+        min-width: 242px;
+        text-align: right;
+      }
+      .action {
+        margin-left: 56px;
+        min-width: 266px;
+        flex: 0 1 auto;
+        text-align: right;
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+}
+
+.mobile .page-header {
+  .main {
+    .row {
+      flex-wrap: wrap;
+
+      .avatar {
+        flex: 0 1 25%;
+        margin: 0 2% 8px 0;
+      }
+
+      .content,
+      .headerContent {
+        flex: 0 1 70%;
+
+        .link {
+          margin-top: 16px;
+          line-height: 24px;
+
+          a {
+            font-size: 14px;
+            margin-right: 10px;
+          }
+        }
+      }
+
+      .extra {
+        flex: 1 1 auto;
+        margin-left: 0;
+        min-width: 0;
+        text-align: right;
+      }
+
+      .action {
+        margin-left: unset;
+        min-width: 266px;
+        flex: 0 1 auto;
+        text-align: left;
+        margin-bottom: 12px;
+
+        &:empty {
+          display: none;
+        }
+      }
+    }
+  }
+}
+</style>