feat: Add fields and metadata for Kubernetes platform in CloudCreateUpdate component

* perf: upgrade vue version

* perf: Update Dockerfile with new base image tag

---------

Co-authored-by: zhaojisen <1301338853@qq.com>
Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

.eslintrc.js

@@ -14,64 +14,97 @@ module.exports = {
     window: true,
     _: true
   },
+  plugins: ['vue', 'spellcheck'],
   // add your custom rules here
   // it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
-    'vue/max-attributes-per-line': [2, {
-      'singleline': 10,
-      'multiline': {
-        'max': 1,
-        'allowFirstLine': false
+    'vue/max-attributes-per-line': [
+      2,
+      {
+        singleline: 10,
+        multiline: {
+          max: 1,
+          allowFirstLine: false
+        }
       }
-    }],
+    ],
     'vue/singleline-html-element-content-newline': 'off',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/name-property-casing': ['error', 'PascalCase'],
     'vue/no-v-html': 'off',
     'accessor-pairs': 2,
-    'arrow-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
+    'arrow-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
     'block-spacing': [2, 'always'],
-    'brace-style': [2, '1tbs', {
-      'allowSingleLine': true
-    }],
-    'camelcase': [0, {
-      'properties': 'always'
-    }],
+    'brace-style': [
+      2,
+      '1tbs',
+      {
+        allowSingleLine: true
+      }
+    ],
+    camelcase: [
+      0,
+      {
+        properties: 'always'
+      }
+    ],
     'comma-dangle': [2, 'never'],
-    'comma-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
+    'comma-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
     'comma-style': [2, 'last'],
     'constructor-super': 2,
-    'curly': [2, 'multi-line'],
+    curly: [2, 'multi-line'],
     'dot-location': [2, 'property'],
     'eol-last': 2,
-    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
-    'generator-star-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
+    eqeqeq: ['error', 'always', { null: 'ignore' }],
+    'generator-star-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
     'handle-callback-err': [2, '^(err|error)$'],
-    'indent': [2, 2, {
-      'SwitchCase': 1
-    }],
+    indent: [
+      2,
+      2,
+      {
+        SwitchCase: 1
+      }
+    ],
     'jsx-quotes': [2, 'prefer-single'],
-    'key-spacing': [2, {
-      'beforeColon': false,
-      'afterColon': true
-    }],
-    'keyword-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'new-cap': [2, {
-      'newIsCap': true,
-      'capIsNew': false
-    }],
+    'key-spacing': [
+      2,
+      {
+        beforeColon: false,
+        afterColon: true
+      }
+    ],
+    'keyword-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
+    'new-cap': [
+      2,
+      {
+        newIsCap: true,
+        capIsNew: false
+      }
+    ],
     'new-parens': 2,
     'no-array-constructor': 2,
     'no-caller': 2,
@@ -102,17 +135,23 @@ module.exports = {
     'no-irregular-whitespace': 2,
     'no-iterator': 2,
     'no-label-var': 2,
-    'no-labels': [2, {
-      'allowLoop': false,
-      'allowSwitch': false
-    }],
+    'no-labels': [
+      2,
+      {
+        allowLoop: false,
+        allowSwitch: false
+      }
+    ],
     'no-lone-blocks': 2,
     'no-mixed-spaces-and-tabs': 2,
     'no-multi-spaces': 2,
     'no-multi-str': 2,
-    'no-multiple-empty-lines': [2, {
-      'max': 1
-    }],
+    'no-multiple-empty-lines': [
+      2,
+      {
+        max: 1
+      }
+    ],
     'no-native-reassign': 2,
     'no-negated-in-lhs': 2,
     'no-new-object': 2,
@@ -140,62 +179,126 @@ module.exports = {
     'no-undef-init': 2,
     'no-unexpected-multiline': 2,
     'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [2, {
-      'defaultAssignment': false
-    }],
+    'no-unneeded-ternary': [
+      2,
+      {
+        defaultAssignment: false
+      }
+    ],
     'no-unreachable': 2,
     'no-unsafe-finally': 2,
-    'no-unused-vars': [2, {
-      'vars': 'all',
-      'args': 'none'
-    }],
+    'no-unused-vars': [
+      2,
+      {
+        vars: 'all',
+        args: 'none'
+      }
+    ],
     'no-useless-call': 2,
     'no-useless-computed-key': 2,
     'no-useless-constructor': 2,
     'no-useless-escape': 0,
     'no-whitespace-before-property': 2,
     'no-with': 2,
-    'one-var': [2, {
-      'initialized': 'never'
-    }],
-    'operator-linebreak': [2, 'after', {
-      'overrides': {
-        '?': 'before',
-        ':': 'before'
+    'one-var': [
+      2,
+      {
+        initialized: 'never'
       }
-    }],
+    ],
+    'operator-linebreak': [
+      2,
+      'after',
+      {
+        overrides: {
+          '?': 'before',
+          ':': 'before'
+        }
+      }
+    ],
     'padded-blocks': [2, 'never'],
-    'quotes': [2, 'single', {
-      'avoidEscape': true,
-      'allowTemplateLiterals': true
-    }],
-    'semi': [2, 'never'],
-    'semi-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
+    quotes: [
+      2,
+      'single',
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true
+      }
+    ],
+    semi: [2, 'never'],
+    'semi-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
     'space-before-blocks': [2, 'always'],
-    'space-before-function-paren': [2, 'never'],
+    'space-before-function-paren': [
+      2,
+      { anonymous: 'never', named: 'never', asyncArrow: 'always' }
+    ],
     'space-in-parens': [2, 'never'],
     'space-infix-ops': 2,
-    'space-unary-ops': [2, {
-      'words': true,
-      'nonwords': false
-    }],
-    'spaced-comment': [2, 'always', {
-      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-    }],
+    'space-unary-ops': [
+      2,
+      {
+        words: true,
+        nonwords: false
+      }
+    ],
+    'object-curly-spacing': [2, 'always'],
+    'spaced-comment': [
+      2,
+      'always',
+      {
+        markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+      }
+    ],
     'template-curly-spacing': [2, 'never'],
     'use-isnan': 2,
     'valid-typeof': 2,
     'wrap-iife': [2, 'any'],
     'yield-star-spacing': [2, 'both'],
-    'yoda': [2, 'never'],
+    yoda: [2, 'never'],
     'prefer-const': 2,
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [2, 'always', {
-      objectsInObjects: false
-    }],
-    'array-bracket-spacing': [2, 'never']
+    'array-bracket-spacing': [2, 'never'],
+    'spellcheck/spell-checker': [
+      'warn',
+      {
+        comments: true,
+        strings: false,
+        identifiers: false,
+        lang: 'en_US',
+        skipWords: [
+          'echarts',
+          'resize',
+          'vue',
+          'eslint',
+          'babel',
+          'jsx',
+          'scss',
+          'v-deep',
+          'calc',
+          'vw',
+          'vh',
+          'px',
+          'rgba',
+          'rgb',
+          'var',
+          'lang',
+          'scoped',
+          'pdf',
+          'rbac'
+        ],
+        skipIfMatch: [
+          'http://[^s]*',
+          '^[-\\w]+/[-\\w\\.]+$',
+          String.raw`^\/api\/[a-z0-9\/._-]+$`,
+        ],
+        minLength: 3
+      }
+    ]
   }
 }

.prettierignore

@@ -0,0 +1,57 @@
+# Dependencies
+node_modules/
+dist/
+build/
+lina/
+
+# Logs
+*.log
+logs/
+
+# Runtime data
+pids/
+*.pid
+*.seed
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# Generated files
+*.min.js
+*.min.css
+
+# Package files
+*.tgz
+*.tar.gz
+
+# Lock files
+package-lock.json
+yarn.lock
+
+# Build outputs
+*.map
+
+# Config files that shouldn't be formatted
+.eslintrc.js
+babel.config.js
+jest.config.js
+vue.config.js
+postcss.config.js
+
+# Theme files
+src/styles/fonts/
+public/fonts/
+lina/fonts/
+
+# Assets
+src/assets/
+public/
+
+# Mock data
+mock/
+
+# Test files
+tests/
+
+# Documentation
+*.md

.prettierrc.js

@@ -0,0 +1,11 @@
+module.exports = {
+  singleQuote: true,
+  semi: false,
+  trailingComma: 'none',
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  bracketSpacing: true,
+  arrowParens: 'avoid',
+  endOfLine: 'auto'
+}

Dockerfile

@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20250508_085854 AS stage-build
+FROM jumpserver/lina-base:20251105_092554 AS stage-build
 
 ARG VERSION
 ENV VERSION=$VERSION

PRETTIER.md

@@ -0,0 +1,76 @@
+# Prettier 配置说明
+
+本项目已配置 Prettier 代码格式化工具，**仅在保存时自动格式化**，不进行批量格式化，以保持现有代码风格。
+
+## 配置文件
+
+- `.prettierrc` - Prettier 配置文件
+- `.prettierignore` - 忽略格式化的文件列表
+- `.vscode/settings.json` - VSCode 编辑器配置（保存时自动格式化）
+- `.vscode/extensions.json` - 推荐的 VSCode 扩展
+
+## 使用方法
+
+### 1. 安装依赖
+项目已安装以下依赖：
+- `prettier@^2.8.8` - Prettier 核心
+- `eslint-plugin-prettier@^3.1.4` - ESLint 与 Prettier 集成
+- `eslint-config-prettier@^6.15.0` - 禁用与 Prettier 冲突的 ESLint 规则
+
+### 2. 命令行使用
+
+```bash
+# ESLint 检查和修复
+npm run fix
+```
+
+**注意**：本项目配置为仅在保存时自动格式化，不提供批量格式化命令。
+
+### 3. VSCode 编辑器配置
+
+确保安装了推荐的扩展：
+- Prettier - Code formatter (esbenp.prettier-vscode)
+- ESLint (dbaeumer.vscode-eslint)
+- Vetur (octref.vetur)
+
+配置已设置为保存时自动格式化。
+
+### 4. Git 提交钩子
+
+项目使用 `husky` 和 `lint-staged` 在提交时进行代码检查：
+- 提交时运行 ESLint 检查和修复
+- 不进行批量格式化，保持原有代码风格
+
+## Prettier 配置说明
+
+```json
+{
+  "semi": false,              // 不使用分号
+  "singleQuote": true,        // 使用单引号
+  "tabWidth": 0,              // 不使用缩进
+  "useTabs": false,           // 使用空格而不是制表符
+  "trailingComma": "none",    // 不使用尾随逗号
+  "printWidth": 100,          // 行宽 100 字符
+  "bracketSpacing": true,     // 对象括号内有空格
+  "arrowParens": "avoid",     // 箭头函数单参数时不使用括号
+  "endOfLine": "lf",          // 使用 LF 换行符
+  "vueIndentScriptAndStyle": false  // Vue 文件中 script 和 style 标签不缩进
+}
+```
+
+## 常见问题
+
+### Q: 如何临时禁用格式化？
+A: 使用注释：
+```javascript
+// prettier-ignore
+const uglyCode = {
+    a:1,b:2
+}
+```
+
+### Q: 如何添加文件到忽略列表？
+A: 编辑 `.prettierignore` 文件，添加文件或目录路径。
+
+### Q: VSCode 保存时没有自动格式化？
+A: 检查是否安装了 Prettier 扩展，并确认 `.vscode/settings.json` 配置正确。

mock/index.js

@@ -1,13 +1,25 @@
 import Mock from 'mockjs'
-import { param2Obj } from '../src/utils'
 
 import user from './user'
 import table from './table'
 
-const mocks = [
-  ...user,
-  ...table
-]
+export function param2Obj(url) {
+  const search = url.split('?')[1]
+  if (!search) {
+    return {}
+  }
+  return JSON.parse(
+    '{"' +
+      decodeURIComponent(search)
+        .replace(/"/g, '\\"')
+        .replace(/&/g, '","')
+        .replace(/=/g, '":"')
+        .replace(/\+/g, ' ') +
+      '"}'
+  )
+}
+
+const mocks = [...user, ...table]
 
 // for front mock
 // please use it cautiously, it will redefine XMLHttpRequest,

package.json

@@ -1,149 +1,144 @@
 {
-    "name": "lina",
-    "version": "v4.0.0",
-    "description": "JumpServer Web UI",
-    "author": "JumpServer Team <support@lxware.hk>",
-    "license": "GPL-3.0-or-later",
-    "scripts": {
-        "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
-        "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
-        "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
-        "build:prod": "vue-cli-service build",
-        "build:stage": "vue-cli-service build --mode staging",
-        "preview": "node build/index.js --preview",
-        "lint": "eslint --ext .js,.vue src",
-        "fix": "eslint --ext .js,.vue --fix src",
-        "test:unit": "jest --clearCache && vue-cli-service test:unit",
-        "test:ci": "npm run lint && npm run test:unit",
-        "svgo": "svgo -f src/icons/svg --config=src/icas/svgo.yml",
-        "vue-i18n-extract": "vue-i18n-extract",
-        "vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
-        "vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
-        "vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a",
-        "diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja zh_Hant",
-        "apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja zh_Hant"
-    },
-    "dependencies": {
-        "@babel/plugin-proposal-optional-chaining": "^7.13.12",
-        "@fontsource/open-sans": "^5.0.24",
-        "@traptitech/markdown-it-katex": "^3.6.0",
-        "@ztree/ztree_v3": "3.5.44",
-        "axios": "0.28.0",
-        "axios-retry": "^3.1.9",
-        "caniuse-lite": "^1.0.30001642",
-        "cron-parser": "^4.0.0",
-        "crypto-js": "^4.1.1",
-        "css-color-function": "^1.3.3",
-        "decimal.js": "^10.4.3",
-        "deepmerge": "^4.2.2",
-        "dompurify": "^3.1.6",
-        "echarts": "4.7.0",
-        "element-ui": "2.15.14",
-        "eslint-plugin-html": "^6.0.0",
-        "highlight.js": "^11.9.0",
-        "install": "^0.13.0",
-        "jquery": "^3.6.1",
-        "js-cookie": "2.2.0",
-        "jsencrypt": "^3.2.1",
-        "less": "^3.10.3",
-        "less-loader": "^5.0.0",
-        "lodash": "^4.17.21",
-        "lodash.clonedeep": "^4.5.0",
-        "lodash.frompairs": "^4.0.1",
-        "lodash.get": "^4.4.2",
-        "lodash.has": "^4.5.2",
-        "lodash.includes": "^4.3.0",
-        "lodash.isempty": "^4.4.0",
-        "lodash.isequal": "^4.5.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.set": "^4.3.2",
-        "lodash.topairs": "^4.3.0",
-        "lodash.values": "^4.3.0",
-        "markdown-it": "^13.0.2",
-        "markdown-it-link-attributes": "^4.0.1",
-        "moment": "^2.29.4",
-        "moment-parseformat": "^4.0.0",
-        "normalize.css": "7.0.0",
-        "npm": "^7.8.0",
-        "nprogress": "0.2.0",
-        "path-to-regexp": "3.3.0",
-        "sortablejs": "^1.15.6",
-        "v-sanitize": "^0.0.13",
-        "vue": "2.6.10",
-        "vue-codemirror": "4.0.6",
-        "vue-cookie": "^1.1.4",
-        "vue-echarts": "^5.0.0-beta.0",
-        "vue-i18n": "^8.15.5",
-        "vue-json-editor": "^1.4.3",
-        "vue-markdown": "^2.2.4",
-        "vue-moment": "^4.1.0",
-        "vue-password-strength-meter": "^1.7.2",
-        "vue-router": "3.0.6",
-        "vue-select": "^3.9.5",
-        "vuejs-logger": "^1.5.4",
-        "vuex": "3.1.0",
-        "watermark-js-plus": "^1.5.8",
-        "xss": "^1.0.14",
-        "xterm": "^4.5.0",
-        "xterm-addon-fit": "^0.3.0",
-        "zxcvbn": "^4.4.2"
-    },
-    "devDependencies": {
-        "@babel/core": "7.18.6",
-        "@babel/register": "7.0.0",
-        "@vue/cli-plugin-babel": "3.6.0",
-        "@vue/cli-plugin-eslint": "^3.9.1",
-        "@vue/cli-plugin-unit-jest": "3.6.3",
-        "@vue/cli-service": "3.6.0",
-        "@vue/test-utils": "1.0.0-beta.29",
-        "autoprefixer": "^9.5.1",
-        "babel-core": "7.0.0-bridge.0",
-        "babel-eslint": "10.0.1",
-        "babel-jest": "23.6.0",
-        "chalk": "2.4.2",
-        "compression-webpack-plugin": "^6.1.1",
-        "connect": "3.6.6",
-        "deasync": "^0.1.29",
-        "element-theme-chalk": "^2.13.1",
-        "eslint": "^5.15.3",
-        "eslint-plugin-vue": "5.2.2",
-        "eslint-plugin-vue-i18n": "^0.3.0",
-        "github-markdown-css": "^5.1.0",
-        "html-webpack-plugin": "3.2.0",
-        "husky": "^4.2.3",
-        "less-loader": "^5.0.0",
-        "lint-staged": "^10.1.2",
-        "mockjs": "1.0.1-beta3",
-        "runjs": "^4.3.2",
-        "sass": "~1.32.6",
-        "sass-loader": "^7.1.0",
-        "script-ext-html-webpack-plugin": "2.1.3",
-        "script-loader": "0.7.2",
-        "serve-static": "^1.16.0",
-        "strip-ansi": "^7.1.0",
-        "svg-sprite-loader": "4.1.3",
-        "svgo": "1.2.2",
-        "vue-i18n-extract": "^1.1.1",
-        "vue-template-compiler": "2.6.10"
-    },
-    "engines": {
-        "node": ">=8.9",
-        "npm": ">= 3.0.0"
-    },
-    "browserslist": [
-        "> 1%",
-        "last 4 versions",
-        "ie 11"
-    ],
-    "husky": {
-        "hooks": {
-            "pre-commit": "lint-staged"
-        }
-    },
-    "lint-staged": {
-        "src/**/*.{js,vue}": [
-            "eslint --fix"
-        ]
-    },
-    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "name": "lina",
+  "version": "v4.0.0",
+  "description": "JumpServer Web UI",
+  "author": "JumpServer Team <support@lxware.hk>",
+  "license": "GPL-3.0-or-later",
+  "scripts": {
+    "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
+    "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
+    "lint": "eslint --ext .js,.vue src",
+    "fix": "eslint --ext .js,.vue --fix src",
+    "test:unit": "jest --clearCache && vue-cli-service test:unit",
+    "test:ci": "npm run lint && npm run test:unit",
+    "svgo": "svgo -f src/icons/svg --config=src/icas/svgo.yml",
+    "vue-i18n-extract": "vue-i18n-extract",
+    "vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
+    "vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
+    "vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a",
+    "diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja zh_Hant",
+    "apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja zh_Hant"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+    "@fontsource/open-sans": "^5.0.24",
+    "@kangc/v-md-editor": "^1.7.12",
+    "@traptitech/markdown-it-katex": "^3.6.0",
+    "@ztree/ztree_v3": "3.5.44",
+    "axios": "0.28.0",
+    "axios-retry": "^3.1.9",
+    "babel-loader": "^10.0.0",
+    "cache-loader": "^4.1.0",
+    "caniuse-lite": "^1.0.30001642",
+    "cron-parser": "^4.0.0",
+    "crypto-js": "^4.1.1",
+    "css-color-function": "^1.3.3",
+    "decimal.js": "^10.4.3",
+    "deepmerge": "^4.2.2",
+    "dompurify": "^3.2.4",
+    "echarts": "4.7.0",
+    "element-ui": "https://github.com/jumpserver-dev/element/releases/download/v2.15.15/jumpserver-element-ui-2.15.15.tgz",
+    "eslint-plugin-html": "^6.0.0",
+    "highlight.js": "^11.9.0",
+    "install": "^0.13.0",
+    "jquery": "^3.6.1",
+    "js-cookie": "2.2.0",
+    "jsencrypt": "^3.2.1",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "lodash": "^4.17.21",
+    "markdown-it": "^13.0.2",
+    "markdown-it-link-attributes": "^4.0.1",
+    "moment": "^2.29.4",
+    "moment-parseformat": "^4.0.0",
+    "normalize.css": "7.0.0",
+    "npm": "^7.8.0",
+    "nprogress": "0.2.0",
+    "path-to-regexp": "3.3.0",
+    "sortablejs": "^1.15.6",
+    "v-sanitize": "^0.0.13",
+    "vue": "2.7.16",
+    "vue-codemirror": "4.0.6",
+    "vue-cookie": "^1.1.4",
+    "vue-echarts": "^5.0.0-beta.0",
+    "vue-i18n": "^8.15.5",
+    "vue-json-editor": "^1.4.3",
+    "vue-markdown": "^2.2.4",
+    "vue-password-strength-meter": "^1.7.2",
+    "vue-router": "3.0.6",
+    "vue-select": "^3.9.5",
+    "vuejs-logger": "^1.5.4",
+    "vuex": "3.1.0",
+    "watermark-js-plus": "^1.5.8",
+    "xss": "^1.0.14",
+    "xterm": "^4.5.0",
+    "xterm-addon-fit": "^0.3.0",
+    "zxcvbn": "^4.4.2"
+  },
+  "devDependencies": {
+    "@babel/core": "7.18.6",
+    "@babel/register": "7.0.0",
+    "@vue/cli-plugin-babel": "3.6.0",
+    "@vue/cli-plugin-eslint": "^3.9.1",
+    "@vue/cli-plugin-unit-jest": "3.6.3",
+    "@vue/cli-service": "3.6.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "^9.5.1",
+    "babel-core": "6.26.3",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "23.6.0",
+    "chalk": "2.4.2",
+    "compression-webpack-plugin": "^6.1.1",
+    "connect": "3.6.6",
+    "deasync": "^0.1.29",
+    "eslint": "^5.15.3",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-spellcheck": "^0.0.20",
+    "eslint-plugin-vue": "5.2.2",
+    "eslint-plugin-vue-i18n": "^0.3.0",
+    "github-markdown-css": "^5.1.0",
+    "html-webpack-plugin": "3.2.0",
+    "husky": "^4.2.3",
+    "less-loader": "^5.0.0",
+    "lint-staged": "^10.1.2",
+    "mockjs": "1.0.1-beta3",
+    "prettier": "^3.6.2",
+    "pretty-bytes": "^5.6.0",
+    "runjs": "^4.3.2",
+    "sass": "~1.32.6",
+    "sass-loader": "^7.1.0",
+    "script-ext-html-webpack-plugin": "2.1.3",
+    "script-loader": "0.7.2",
+    "serve-static": "^1.16.0",
+    "strip-ansi": "^7.1.0",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.2",
+    "vue-i18n-extract": "^1.1.1",
+    "vue-template-compiler": "2.7.16",
+    "webpack": "^4.28.4"
+  },
+  "engines": {
+    "node": ">=12",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 4 versions",
+    "ie 11"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix"
+    ]
+  }
 }

src/App.vue

@@ -74,7 +74,7 @@ export default {
     },
 
     createWatermark() {
-      if (this.currentUser?.username && this.publicSettings?.SECURITY_WATERMARK_ENABLED && this.$store.getters.hasValidLicense) {
+      if (this.currentUser?.username && this.publicSettings?.SECURITY_WATERMARK_ENABLED) {
         this.watermark = new Watermark({
           content: this.getWaterMarkContent(),
           width: this.publicSettings?.SECURITY_WATERMARK_WIDTH,

src/api/ops.js

@@ -61,13 +61,14 @@ export function stopJob(form) {
   })
 }
 
-export function JobUploadFile(form) {
+export function JobUploadFile(form, config = {}) {
   return request({
     url: '/api/v1/ops/jobs/upload/',
     method: 'post',
     headers: { 'Content-Type': 'multipart/form-data' },
     timeout: 60 * 60 * 1000,
-    data: form
+    data: form,
+    ...config
   })
 }
 

src/api/sessions.js

@@ -18,14 +18,14 @@ export function toggleLockSession(data) {
 
 export function getAllCommandStorage() {
   return request({
-    url: `/api/v1/terminal/command-storages/`,
+    url: '/api/v1/terminal/command-storages/',
     method: 'get'
   })
 }
 
 export function getAllReplayStorage() {
   return request({
-    url: `/api/v1/terminal/replay-storages/`,
+    url: '/api/v1/terminal/replay-storages/',
     method: 'get'
   })
 }

src/assets/img/cloud/proxmox.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 t="1752631175762" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4421" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M93.866667 234.666667c-34.133333 12.8-51.2 25.6-51.2 34.133333 0 4.266667 51.2 64 115.2 136.533333 64 68.266667 115.2 128 115.2 128s-51.2 59.733333-115.2 128C93.866667 729.6 42.666667 793.6 42.666667 797.866667c4.266667 17.066667 59.733333 42.666667 98.133333 42.666666 64 0 81.066667-12.8 217.6-162.133333 68.266667-76.8 128-140.8 128-140.8 0-4.266667-55.466667-64-123.733333-140.8-85.333333-102.4-132.266667-145.066667-153.6-157.866667-29.866667-12.8-81.066667-17.066667-115.2-4.266666z m725.333333 4.266666c-21.333333 8.533333-68.266667 59.733333-153.6 153.6-68.266667 76.8-123.733333 140.8-123.733333 140.8 0 4.266667 55.466667 68.266667 128 140.8 136.533333 153.6 153.6 162.133333 217.6 162.133334 42.666667 0 98.133333-21.333333 98.133333-42.666667 0-4.266667-51.2-68.266667-115.2-136.533333-64-68.266667-115.2-128-115.2-128s51.2-59.733333 115.2-128c64-68.266667 115.2-128 115.2-136.533334-4.266667-17.066667-55.466667-38.4-98.133333-38.4-34.133333 0-46.933333 4.266667-68.266667 12.8z" fill="#E57000" p-id="4422"></path><path d="M238.933333 136.533333c-42.666667 21.333333-42.666667 25.6-4.266666 68.266667 221.866667 243.2 273.066667 302.933333 277.333333 302.933333 4.266667 0 311.466667-332.8 315.733333-341.333333 0-4.266667-8.533333-12.8-21.333333-21.333333-17.066667-12.8-34.133333-17.066667-68.266667-17.066667-64-4.266667-85.333333 8.533333-162.133333 93.866667-34.133333 38.4-64 72.533333-64 72.533333s-29.866667-29.866667-64-68.266667c-34.133333-38.4-72.533333-76.8-89.6-85.333333-25.6-17.066667-89.6-21.333333-119.466667-4.266667zM354.133333 725.333333c-85.333333 93.866667-153.6 170.666667-153.6 174.933334 0 4.266667 8.533333 12.8 21.333334 21.333333 17.066667 12.8 34.133333 17.066667 68.266666 17.066667 59.733333 4.266667 85.333333-8.533333 162.133334-98.133334 34.133333-38.4 64-68.266667 64-68.266666s29.866667 29.866667 64 68.266666c81.066667 89.6 98.133333 102.4 162.133333 98.133334 34.133333 0 51.2-4.266667 68.266667-17.066667 12.8-8.533333 21.333333-17.066667 21.333333-21.333333-4.266667-8.533333-311.466667-345.6-315.733333-341.333334-8.533333 0-76.8 76.8-162.133334 166.4z" p-id="4423"></path></svg>

src/assets/img/cloud/smartx.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 t="1748326203303" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2853" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M10.24 605.184l839.168-481.28L1013.76 220.672v191.488L174.592 895.488 10.24 804.352z" fill="#0096FF" p-id="2854"></path><path d="M10.24 416.768V220.672l168.96-96.768 308.736 178.688-331.776 193.536zM541.184 717.312l331.264-195.072 141.312 88.064v194.048l-165.376 95.744z" fill="#25C764" p-id="2855"></path></svg>

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -1,5 +1,6 @@
 import { UpdateToken, UploadSecret } from '@/components/Form/FormFields'
 import Select2 from '@/components/Form/FormFields/Select2.vue'
+import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
 import { Required, RequiredChange } from '@/components/Form/DataForm/rules'
 import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
 
@@ -14,19 +15,28 @@ export const accountFieldsMeta = (vm) => {
   }
 
   return {
-    assets: {
+    nodes: {
       component: Select2,
-      label: vm.$t('Asset'),
-      rules: [Required],
+      label: vm.$t('Node'),
       el: {
-        multiple: true,
+        value: [],
         ajax: {
-          url: '/api/v1/assets/assets/',
+          url: '/api/v1/assets/nodes/',
           transformOption: (item) => {
-            return { label: item.name + '(' + item.address + ')', value: item.id }
+            return { label: item.full_value, value: item.id }
           }
         }
       },
+      hidden: () => {
+        return !vm.addTemplate
+      }
+    },
+    assets: {
+      component: AssetSelect,
+      label: vm.$t('Asset'),
+      el: {
+        multiple: false
+      },
       hidden: () => {
         return vm.platform || vm.asset
       }
@@ -38,7 +48,7 @@ export const accountFieldsMeta = (vm) => {
         get disabled() {
           return vm.isDisabled
         },
-        multiple: false,
+        multiple: vm.addTemplate,
         ajax: {
           url: '/api/v1/accounts/account-templates/',
           transformOption: (item) => {

src/components/Apps/AccountCreateUpdateForm/index.vue

@@ -11,7 +11,7 @@
 
 <script>
 import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
 
 export default {
@@ -63,7 +63,7 @@ export default {
       encryptedFields: ['secret'],
       fields: [
         [this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
-        [this.$t('Asset'), ['assets']],
+        [this.$t('Asset'), ['nodes', 'assets']],
         [this.$t('Secret'), [
           'secret_type', 'password', 'ssh_key', 'token',
           'access_key', 'passphrase', 'api_key',

src/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue

@@ -11,7 +11,7 @@
 <script>
 import { GenericUpdateFormDialog } from '@/layout/components'
 import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 
 export default {
   name: 'AccountBulkUpdateDialog',

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

@@ -93,8 +93,8 @@ export default {
         iVisible = true
         data = formValue
         url = `/api/v1/accounts/accounts/bulk/`
-        if (data.assets.length === 0) {
-          this.$message.error(this.$tc('PleaseSelectAsset'))
+        if ((!data.assets || data.assets.length === 0) && (!data.nodes || data.nodes.length === 0)) {
+          this.$message.error(this.$tc('PleaseSelectAssetOrNode'))
           return
         }
       }

src/components/Apps/AccountListTable/AccountList.vue

@@ -52,7 +52,7 @@
 <script>
 import { mapGetters } from 'vuex'
 import { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const'
-import { openTaskPage } from '@/utils/jms'
+import { openTaskPage } from '@/utils/jms/index'
 import {
   AccountConnectFormatter,
   ActionsFormatter,
@@ -341,7 +341,7 @@ export default {
             can: () => {
               return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
             },
-            callback: async() => {
+            callback: async () => {
               await this.getAssetDetail()
               setTimeout(() => {
                 vm.iAsset = this.asset
@@ -362,7 +362,7 @@ export default {
             can: ({ selectedRows }) => {
               return selectedRows.length > 0 &&
                 ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
-                !this.$store.getters.currentOrgIsRoot
+                !this.$store.getters.currentOrgIsRoot && vm.$hasPerm('accounts.verify_account')
             },
             callback: function({ selectedRows }) {
               const ids = selectedRows.map(v => {
@@ -478,7 +478,7 @@ export default {
       this.$refs.ListTable.reloadTable()
     },
     async getAssetDetail() {
-      const { query: { asset }} = this.$route
+      const { query: { asset } } = this.$route
       if (asset) {
         this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
       }

src/components/Apps/AccountListTable/BulkCreateResultDialog.vue

@@ -49,6 +49,10 @@ export default {
             prop: 'asset',
             label: this.$t('Asset')
           },
+          {
+            prop: 'account',
+            label: this.$t('Account')
+          },
           {
             prop: 'state',
             label: this.$t('Status'),

src/components/Apps/AccountListTable/RemoveAccount.vue

@@ -12,7 +12,7 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { openTaskPage } from '@/utils/jms'
+import { openTaskPage } from '@/utils/jms/index'
 
 export default {
   name: 'RemoveAccount',

src/components/Apps/AccountListTable/UpdateSecretInfo.vue

@@ -23,7 +23,7 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
 
 export default {

src/components/Apps/AccountListTable/ViewSecret.vue

@@ -61,7 +61,7 @@
 import Dialog from '@/components/Dialog/index.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
 import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 
 export default {
   name: 'ShowSecretInfo',

src/components/Apps/AccountListTable/const.js

@@ -1,5 +1,5 @@
 import { ChoicesFormatter } from '@/components/Table/TableFormatters'
-import { openTaskPage } from '@/utils/jms'
+import { openTaskPage } from '@/utils/jms/index'
 
 export const connectivityMeta = {
   formatter: ChoicesFormatter,
@@ -40,7 +40,7 @@ export function isDirectoryServiceAccount(account, vm) {
   return vm.asset && vm.asset.id !== account.asset.id
 }
 
-export const accountOtherActions = (vm) => {
+export const accountOtherActions = vm => {
   return [
     {
       name: 'View',
@@ -62,9 +62,11 @@ export const accountOtherActions = (vm) => {
       name: 'Update',
       title: vm.$t('Edit'),
       can: ({ row }) => {
-        return vm.$hasPerm('accounts.change_account') &&
+        return (
+          vm.$hasPerm('accounts.change_account') &&
           !vm.$store.getters.currentOrgIsRoot &&
           !isDirectoryServiceAccount(row, vm)
+        )
       },
       callback: ({ row }) => {
         vm.isUpdateAccount = true
@@ -85,9 +87,11 @@ export const accountOtherActions = (vm) => {
       name: 'UpdateSecret',
       title: vm.$t('EditSecret'),
       can: ({ row }) => {
-        return vm.$hasPerm('accounts.change_account') &&
+        return (
+          vm.$hasPerm('accounts.change_account') &&
           !vm.$store.getters.currentOrgIsRoot &&
           !isDirectoryServiceAccount(row, vm)
+        )
       },
       callback: ({ row }) => {
         const data = {
@@ -110,9 +114,11 @@ export const accountOtherActions = (vm) => {
         return !vm.asset
       },
       can: ({ row }) => {
-        return vm.$hasPerm('accounts.add_account') &&
+        return (
+          vm.$hasPerm('accounts.add_account') &&
           !vm.$store.getters.currentOrgIsRoot &&
           !isDirectoryServiceAccount(row, vm)
+        )
       },
       callback: ({ row }) => {
         vm.account = {
@@ -138,29 +144,26 @@ export const accountOtherActions = (vm) => {
         row.asset['auto_config'].ansible_enabled &&
         row.asset['auto_config'].ping_enabled,
       callback: ({ row }) => {
-        vm.$axios.post(
-          `/api/v1/accounts/accounts/tasks/`,
-          { action: 'verify', accounts: [row.id] }
-        ).then(res => {
-          openTaskPage(res['task'])
-        })
+        vm.$axios
+          .post(`/api/v1/accounts/accounts/tasks/`, { action: 'verify', accounts: [row.id] })
+          .then(res => {
+            openTaskPage(res['task'])
+          })
       }
     },
     {
       name: 'ClearSecret',
       title: vm.$t('ClearSecret'),
       can: ({ row }) => {
-        return vm.$hasPerm('accounts.change_account') &&
-          !isDirectoryServiceAccount(row, vm)
+        return vm.$hasPerm('accounts.change_account') && !isDirectoryServiceAccount(row, vm)
       },
       type: 'primary',
       callback: ({ row }) => {
-        vm.$axios.patch(
-          `/api/v1/accounts/accounts/clear-secret/`,
-          { account_ids: [row.id] }
-        ).then(() => {
-          vm.$message.success(vm.$tc('ClearSuccessMsg'))
-        })
+        vm.$axios
+          .patch(`/api/v1/accounts/accounts/clear-secret/`, { account_ids: [row.id] })
+          .then(() => {
+            vm.$message.success(vm.$tc('ClearSuccessMsg'))
+          })
       }
     },
     {
@@ -184,9 +187,11 @@ export const accountOtherActions = (vm) => {
       type: 'primary',
       divided: true,
       can: ({ row }) => {
-        return vm.$hasPerm('accounts.add_account') &&
+        return (
+          vm.$hasPerm('accounts.add_account') &&
           !vm.$store.getters.currentOrgIsRoot &&
           !isDirectoryServiceAccount(row, vm)
+        )
       },
       has: () => {
         return !vm.asset
@@ -204,9 +209,11 @@ export const accountOtherActions = (vm) => {
       title: vm.$t('MoveToAsset'),
       type: 'primary',
       can: ({ row }) => {
-        return vm.$hasPerm('accounts.add_account') &&
+        return (
+          vm.$hasPerm('accounts.delete_account') &&
           !vm.$store.getters.currentOrgIsRoot &&
           !isDirectoryServiceAccount(row, vm)
+        )
       },
       has: () => {
         return !vm.asset
@@ -222,7 +229,7 @@ export const accountOtherActions = (vm) => {
   ]
 }
 
-export const accountQuickFilters = (vm) => [
+export const accountQuickFilters = vm => [
   {
     label: vm.$t('Recent (7 days)'),
     options: [

src/components/Apps/AssetTreeTable/index.vue

@@ -20,7 +20,7 @@
 
 <script>
 import TreeTable from '../../Table/TreeTable/index.vue'
-import { setRouterQuery, setUrlParam } from '@/utils/common'
+import { setRouterQuery, setUrlParam } from '@/utils/common/index'
 import $ from '@/utils/jquery-vendor'
 
 export default {

src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="chat-action">
+    <div v-if="hasPrompt" class="chat-action">
       <Select2
         v-model="select.value"
         :disabled="isLoading || isSelectDisabled"
@@ -36,6 +36,10 @@ export default {
     expanded: {
       type: Boolean,
       default: false
+    },
+    hasPrompt: {
+      type: Boolean,
+      default: true
     }
   },
   data() {

src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue

@@ -33,7 +33,7 @@
                 <!-- eslint-disable-next-line -->
                 <div class="divider"></div>
                 <p>
-                  <MessageText :message="item.reasoning" />
+                  <MessageText :message="item.reasoning" @insert-code="handleInsertCode" />
                 </p>
               </div>
 
@@ -41,8 +41,7 @@
                 <span v-if="isServerError" class="error">
                   {{ isServerError }}
                 </span>
-                <MessageText :message="item.result" />
-              </div>
+                <MessageText :message="item.result" :is-terminal="isTerminal" @insert-code="handleInsertCode" /></div>
             </div>
           </div>
           <div class="action">
@@ -78,9 +77,9 @@
 <script>
 import MessageText from './MessageText.vue'
 import { mapGetters, mapState } from 'vuex'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 import { useChat } from '../../useChat.js'
-import { reconnect } from '@/utils/socket'
+import { reconnect } from '@/utils/request'
 
 const { setLoading, removeLoadingMessageInChat } = useChat()
 
@@ -93,6 +92,10 @@ export default {
       type: Object,
       default: () => {
       }
+    },
+    isTerminal: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -142,6 +145,9 @@ export default {
       if (value === 'copy') {
         copy(this.item.result.content)
       }
+    },
+    handleInsertCode(code) {
+      this.$emit('insert-code', code)
     }
   }
 }

src/components/Apps/ChatAi/components/ChitChat/MessageText.vue

@@ -17,7 +17,7 @@ import mdKatex from '@traptitech/markdown-it-katex'
 import mila from 'markdown-it-link-attributes'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/atom-one-dark.css'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 
 export default {
   props: {
@@ -25,6 +25,10 @@ export default {
       type: Object,
       default: () => {
       }
+    },
+    isTerminal: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -45,10 +49,10 @@ export default {
     this.init()
   },
   updated() {
-    this.addCopyEvents()
+    this.addEvents()
   },
   destroyed() {
-    this.removeCopyEvents()
+    this.removeEvents()
   },
   methods: {
     init() {
@@ -65,30 +69,68 @@ export default {
           return vm.highlightBlock(hljs.highlightAuto(code).value, '')
         }
       })
-      this.markdown.use(mila, { attrs: { target: '_blank', rel: 'noopener', class: 'link-style' }})
+      this.markdown.use(mila, { attrs: { target: '_blank', rel: 'noopener', class: 'link-style' } })
       this.markdown.use(mdKatex, { blockClass: 'katexmath-block rounded-md', errorColor: ' #cc0000' })
     },
     highlightBlock(str, lang) {
-      return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${'Copy'}</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
+      let insertSpanHtml = `<span class="code-block-header__insert">${this.$t('Insert')}</span>`
+      if (!this.isTerminal) {
+        insertSpanHtml = ''
+      }
+      return `<pre class="code-block-wrapper">
+        <div class="code-block-header">
+        <span class="code-block-header__lang">${lang}</span>  
+        <span class="code-block-header__actions">
+        ${insertSpanHtml}
+          <span class="code-block-header__copy">${this.$t('Copy')}</span>
+        </span>
+        </div>
+        <code class="hljs code-block-body ${lang}">${str}</code></pre>`
     },
-    addCopyEvents() {
-      const copyBtn = document.querySelectorAll('.code-block-header__copy')
-      copyBtn.forEach((btn) => {
-        btn.addEventListener('click', () => {
-          const code = btn.parentElement?.nextElementSibling?.textContent
-          if (code) {
-            copy(code)
-          }
+    addEvents() {
+      this.addBtnClickEvents('.code-block-header__copy', this.handlerClickCopy)
+      this.addBtnClickEvents('.code-block-header__insert', this.handlerClickInsert)
+    },
+
+    handlerClickCopy(event) {
+      const wrapper = event.target.closest('.code-block-wrapper')
+      if (wrapper) {
+        // 查找里面的 code 元素
+        const codeElement = wrapper.querySelector('code.code-block-body')
+        if (codeElement) {
+          const codeText = codeElement.textContent
+          copy(codeText)
+        }
+      }
+    },
+    handlerClickInsert(event) {
+      const wrapper = event.target.closest('.code-block-wrapper')
+      if (wrapper) {
+        // 查找里面的 code 元素
+        const codeElement = wrapper.querySelector('code.code-block-body')
+        if (codeElement) {
+          const codeText = codeElement.textContent
+          this.$emit('insert-code', codeText)
+        }
+      }
+    },
+    addBtnClickEvents(selector, callback) {
+      const buttons = this.$refs.textRef.querySelectorAll(selector)
+      buttons.forEach((btn) => {
+        btn.addEventListener('click', callback)
+      })
+    },
+    removeBtnClickEvent(selector) {
+      const buttons = this.$refs.textRef.querySelectorAll(selector)
+      buttons.forEach((btn) => {
+        btn.removeEventListener('click', () => {
         })
       })
     },
-    removeCopyEvents() {
+    removeEvents() {
       if (this.$refs.textRef) {
-        const copyBtn = this.$refs.textRef.querySelectorAll('.code-block-header__copy')
-        copyBtn.forEach((btn) => {
-          btn.removeEventListener('click', () => {
-          })
-        })
+        this.removeBtnClickEvent('.code-block-header__copy')
+        this.addBtnClickEvents('.code-block-header__insert')
       }
     }
   }
@@ -98,6 +140,7 @@ export default {
 <style lang="scss" scoped>
 .markdown-body {
   font-size: 13px;
+  max-width: 300px;;
 
   &::v-deep p {
     margin-bottom: 0 !important;
@@ -115,26 +158,46 @@ export default {
 
   &::v-deep .code-block-wrapper {
     background: #1F2329;
-    padding: 2px 6px;
+    padding: 0;
     margin: 5px 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 
     .code-block-body {
-      padding: 5px 10px 0;
+      padding: 5px 10px;
     }
-  ;
 
     .code-block-header {
       margin-bottom: 4px;
       overflow: hidden;
       background: #353946;
       color: #c2d1e1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 4px 8px;
+      width: 100%;
+      box-sizing: border-box;
 
-      .code-block-header__copy {
-        float: right;
-        cursor: pointer;
+      .code-block-header__actions {
+        display: flex;
+        gap: 8px;
 
-        &:hover {
-          color: #6e747b;
+        .code-block-header__copy {
+          cursor: pointer;
+
+          &:hover {
+            color: #6e747b;
+          }
+        }
+
+        .code-block-header__insert {
+          cursor: pointer;
+
+          &:hover {
+            color: #6e747b;
+          }
         }
       }
     }
@@ -178,6 +241,7 @@ export default {
   0% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }

src/components/Apps/ChatAi/components/ChitChat/index.vue

@@ -17,7 +17,7 @@
           </div>
         </div>
       </div>
-      <ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" />
+      <ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" :is-terminal="isTerminal" @insert-code="insertCode" />
     </div>
     <div class="input-box">
       <el-button
@@ -28,7 +28,7 @@
         size="small"
         @click="onStopHandle"
       >{{ $tc('Stop') }}</el-button>
-      <ChatInput ref="chatInput" :expanded="expanded" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
+      <ChatInput ref="chatInput" :expanded="expanded" :has-prompt="!isTerminal" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
     </div>
   </div>
 </template>
@@ -37,7 +37,7 @@
 import ChatInput from './ChatInput.vue'
 import ChatMessage from './ChatMessage.vue'
 import { mapState } from 'vuex'
-import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/socket'
+import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/request'
 import { getInputFocus, useChat } from '../../useChat.js'
 
 const {
@@ -68,7 +68,10 @@ export default {
       prompt: '',
       conversationId: '',
       showIntroduction: false,
-      introduction: []
+      introduction: [],
+      terminalContext: null,
+      isTerminal: false,
+      sessionChat: {}
     }
   },
   computed: {
@@ -100,6 +103,9 @@ export default {
       this.showIntroduction = true
       this.conversationId = ''
       this.$refs.chatInput.select.value = ''
+      if (this.terminalContext) {
+        this.prompt = this.terminalContext.content || ''
+      }
       const chat = {
         message: {
           content: this.$t('ChatHello'),
@@ -150,6 +156,32 @@ export default {
       addMessageToActiveChat(data)
       setLoading(true)
     },
+    onTerminalContext(terminalContext) {
+      const originSessionId = this.terminalContext?.sessionId
+      const newSessionId = terminalContext.sessionId || ''
+      if (originSessionId) {
+        this.saveSessionChat(originSessionId)
+      }
+      this.terminalContext = terminalContext
+      this.isTerminal = true
+      this.prompt = terminalContext.content || ''
+      if (originSessionId !== newSessionId) {
+        if (this.sessionChat[newSessionId]) {
+          clearChats()
+          for (const chat of this.sessionChat[newSessionId]) {
+            addChatMessageById(chat)
+          }
+        } else {
+          this.onNewChat()
+        }
+      }
+    },
+    saveSessionChat(sessionId) {
+      if (this.terminalContext) {
+        this.sessionChat[sessionId] = JSON.parse(JSON.stringify(this.activeChat.chats))
+      }
+    },
+
     onSendHandle(value) {
       this.showIntroduction = false
       this.socket = ws || {}
@@ -204,6 +236,15 @@ export default {
     sendIntroduction(item) {
       this.showIntroduction = false
       this.onSendHandle(item.content)
+    },
+    insertCode(code) {
+      this.sendPostMessage({
+        name: 'INSERT_TERMINAL_CODE',
+        data: code.replace(/^[\s\r\n]+|[\s\r\n]+$/g, '')
+      })
+    },
+    sendPostMessage(data) {
+      window.parent.postMessage(data)
     }
   }
 }

src/components/Apps/ChatAi/components/Sidebar/index.vue

@@ -13,6 +13,8 @@
 </template>
 
 <script>
+import { BASE_URL } from '@/utils/common/index'
+
 export default {
   props: {
     active: {
@@ -41,6 +43,16 @@ export default {
     },
     handleExpand() {
       this.$emit('expand-full')
+    },
+    async openWebsite() {
+      let url = `${BASE_URL}/?_=${Date.now()}`
+      if (process.env.NODE_ENV !== 'production') {
+        url = url.replace('9528', '5173')
+      }
+
+      const newUrl = new URL(url)
+      window.open(newUrl.toString(), '_blank')
+      return url
     }
   }
 }

src/components/Apps/ChatAi/index.vue

@@ -1,5 +1,6 @@
 <template>
   <DrawerPanel
+    v-if="visible"
     ref="drawer"
     :default-show-panel="!!defaultShowPanel"
     :expanded="expanded"
@@ -45,9 +46,12 @@
 import Sidebar from './components/Sidebar/index.vue'
 import Chat from './components/ChitChat/index.vue'
 import { getInputFocus } from './useChat.js'
-import { ws } from '@/utils/socket'
+import { ws } from '@/utils/request'
 import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
+import { ObjectLocalStorage } from '@/utils/common'
+import { mapGetters } from 'vuex'
 
+const aiPannelLocalStorage = new ObjectLocalStorage('ai_panel_settings')
 export default {
   components: {
     DrawerPanel,
@@ -72,23 +76,68 @@ export default {
   },
   data() {
     return {
+      visible: false,
       active: 'chat',
       robotUrl: require('@/assets/img/robot-assistant.png'),
       height: '400px',
       expanded: false,
-      clientOffset: {}
+      clientOffset: {},
+      currentTerminalContent: {}
     }
   },
+  computed: {
+    ...mapGetters([
+      'publicSettings'
+    ])
+  },
   watch: {
+    'publicSettings.CHAT_AI_METHOD': {
+      handler(newVal) {
+        this.visible = newVal === 'api'
+      }
+    }
   },
   mounted() {
-    this.handlePostMessage()
+    this.handleStartChat()
   },
   methods: {
+    handleStartChat() {
+      if (this.publicSettings.CHAT_AI_METHOD === 'api') {
+        this.visible = true
+        const expanded = aiPannelLocalStorage.get('expanded')
+        this.updateExpandedState(expanded)
+        this.handlePostMessage()
+      } else if (this.publicSettings.CHAT_AI_METHOD === 'embed') {
+        const embedScriptId = 'chat-ai-embed-id'
+        if (document.getElementById(embedScriptId)) {
+          return
+        }
+        const script = document.createElement('script')
+        script.id = embedScriptId
+        script.src = this.publicSettings.CHAT_AI_EMBED_URL
+        script.async = true
+        script.onload = () => {
+          const loadEvent = new Event('load', { bubbles: false, cancelable: false })
+          window.dispatchEvent(loadEvent)
+        }
+        document.body.appendChild(script)
+      }
+    },
     handlePostMessage() {
       window.addEventListener('message', (event) => {
         if (event.data === 'show-chat-panel') {
           this.$refs.drawer.show = true
+          this.initWebSocket()
+          return
+        }
+        const msg = event.data
+        switch (msg.name) {
+          case 'current_terminal_content':
+            // {content: '...', terminalId: '',sessionId: '',viewId: '',viewName: ''}
+            this.$log.debug('current_terminal_content', msg)
+            this.currentTerminalContent = msg.data
+            this.$refs.component?.onTerminalContext(msg.data)
+            break
         }
       })
     },
@@ -96,6 +145,11 @@ export default {
       this.$refs.drawer.handleHeaderMoveDown(event)
     },
     handleMouseMoveUp(event) {
+      // Prevent the new chat button from triggering the header move up
+      const newButton = event.target.closest('.new')
+      if (newButton) {
+        return
+      }
       this.$refs.drawer.handleHeaderMoveUp(event)
     },
     initWebSocket() {
@@ -107,12 +161,20 @@ export default {
       this.$refs.drawer.show = false
     },
     expandFull() {
-      this.height = '100%'
-      this.expanded = true
+      this.updateExpandedState(true)
+      this.save_pannel_settings()
     },
     compress() {
-      this.height = '400px'
-      this.expanded = false
+      this.updateExpandedState(false)
+      this.save_pannel_settings()
+    },
+    save_pannel_settings() {
+      aiPannelLocalStorage.set('expanded', this.expanded)
+      console.log('AI panel settings saved:', this.expanded)
+    },
+    updateExpandedState(expanded) {
+      this.expanded = expanded
+      this.height = expanded ? '100%' : '400px'
     },
     onNewChat() {
       this.active = 'chat'

src/components/Apps/ChatAi/useChat.js

@@ -1,5 +1,5 @@
 import store from '@/store'
-import { pageScroll } from '@/utils/common'
+import { pageScroll } from '@/utils/common/index'
 
 export const getInputFocus = () => {
   const dom = document.querySelector('.chat-input .el-textarea__inner')
@@ -9,11 +9,11 @@ export const getInputFocus = () => {
 export function useChat() {
   const chatStore = {}
 
-  const setLoading = (loading) => {
+  const setLoading = loading => {
     store.commit('chat/setLoading', loading)
   }
 
-  const onNewChat = (name) => {
+  const onNewChat = name => {
     const data = {
       name: name || `new chat`,
       id: 1,
@@ -27,7 +27,7 @@ export function useChat() {
     store.commit('chat/clearChats')
   }
 
-  const addMessageToActiveChat = (chat) => {
+  const addMessageToActiveChat = chat => {
     store.commit('chat/addMessageToActiveChat', chat)
   }
 
@@ -35,7 +35,7 @@ export function useChat() {
     store.commit('chat/removeLoadingMessageInChat')
   }
 
-  const addChatMessageById = (chat) => {
+  const addChatMessageById = chat => {
     store.commit('chat/addMessageToActiveChat', chat)
     if (chat?.conversation_id) {
       store.commit('chat/setActiveChatConversationId', chat.conversation_id)
@@ -54,7 +54,7 @@ export function useChat() {
     addChatMessageById(temporaryChat)
   }
 
-  const newChatAndAddMessageById = (chat) => {
+  const newChatAndAddMessageById = chat => {
     onNewChat(chat.message.content)
     addChatMessageById(chat)
   }

src/components/Apps/GatewayTestDialog/index.vue

@@ -34,7 +34,7 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { openTaskPage } from '@/utils/jms'
+import { openTaskPage } from '@/utils/jms/index'
 
 export default {
   name: 'GatewayDialog',

src/components/Apps/GrantedAssets/index.vue

@@ -85,6 +85,7 @@ export default {
         hasTree: true,
         columnsExtra: ['view_account'],
         columnsExclude: ['spec_info'],
+        columns: ['id', 'name', 'address', 'comment', 'labels', 'connectivity', 'platform', 'view_account', 'actions'],
         columnsShow: {
           min: ['name', 'address', 'accounts'],
           default: ['name', 'address', 'platform', 'view_account', 'actions']
@@ -108,11 +109,6 @@ export default {
           },
           connectivity: connectivityMeta,
           comment: { ...this.comment }
-        },
-        tableAttrs: {
-          rowClassName({ row }) {
-            return !row.is_active ? 'row_disabled' : ''
-          }
         }
       },
       headerActions: {

src/components/Apps/LeakPasswords/LeakPasswordList.vue

@@ -37,16 +37,21 @@ export default {
 
       },
       headerActions: {
-        hasExport: false,
-        hasImport: false,
+        hasExport: true,
+        hasImport: true,
+        importOptions: {
+          encryptFields: [''], // 这里不加密 password，''只是为了保证数组有值
+          canImportUpdate: false
+        },
         hasCreate: true,
         hasSearch: true,
         hasRefresh: true,
-        hasBulkDelete: false,
+        hasBulkDelete: true,
         hasBulkUpdate: false,
         hasLeftActions: true,
         hasRightActions: true,
-        canCreate: this.$hasPerm('settings.change_security')
+        canCreate: this.$hasPerm('settings.change_security'),
+        canBulkDelete: this.$hasPerm('settings.change_security')
       }
     }
   }

src/components/Apps/ManyJsonTabs/AssetJsonTab.vue

@@ -6,7 +6,7 @@
 
 <script>
 import { DrawerListTable as ListTable } from '@/components'
-import { toM2MJsonParams } from '@/utils/jms'
+import { toM2MJsonParams } from '@/utils/jms/index'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
@@ -25,6 +25,7 @@ export default {
   },
   data() {
     const [key, value] = toM2MJsonParams(this.object.assets)
+    const org_id = this.object.org_id || this.$store.getters.currentOrg.id
     return {
       config: {
         headerActions: {
@@ -33,7 +34,7 @@ export default {
           hasExport: false
         },
         tableConfig: {
-          url: `/api/v1/assets/assets/?${key}=${value}`,
+          url: `/api/v1/assets/assets/?${key}=${value}&oid=${org_id}`,
           columns: ['name', 'address', 'platform', 'type', 'is_active'],
           columnsShow: {
             min: ['name', 'address'],
@@ -45,7 +46,7 @@ export default {
               formatter: DetailFormatter,
               formatterArgs: {
                 getRoute: ({ row }) => {
-                  return { name: 'AssetDetail', params: { id: row.id }}
+                  return { name: 'AssetDetail', params: { id: row.id } }
                 }
               }
             },

src/components/Apps/ManyJsonTabs/UserJsonTab.vue

@@ -6,7 +6,7 @@
 
 <script>
 import { DrawerListTable as ListTable } from '@/components'
-import { toM2MJsonParams } from '@/utils/jms'
+import { toM2MJsonParams } from '@/utils/jms/index'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
 
@@ -25,6 +25,7 @@ export default {
   },
   data() {
     const [key, value] = toM2MJsonParams(this.object.users)
+    const org_id = this.object.org_id || this.$store.getters.currentOrg.id
     return {
       config: {
         headerActions: {
@@ -33,7 +34,7 @@ export default {
           hasExport: false
         },
         tableConfig: {
-          url: `/api/v1/users/users/?${key}=${value}`,
+          url: `/api/v1/users/users/?${key}=${value}&oid=${org_id}`,
           columns: [
             'name', 'username', 'email', 'groups', 'system_roles',
             'org_roles', 'source', 'is_valid'

src/components/Apps/ResourceActivity/index.vue

@@ -30,8 +30,8 @@
 <script>
 import IBox from '@/components/Common/IBox/index.vue'
 import DiffDetail from '@/components/Dialog/DiffDetail.vue'
-import { openTaskPage } from '@/utils/jms'
-import { toSafeLocalDateStr } from '@/utils/time'
+import { openTaskPage } from '@/utils/jms/index'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
 export default {

src/components/Apps/UserConfirmDialog/index.vue

@@ -8,22 +8,17 @@
     :visible.sync="visible"
     class="dialog-content"
     v-bind="$attrs"
-    width="740px"
+    width="600px"
     @confirm="visible = false"
     v-on="$listeners"
   >
     <div v-if="confirmTypeRequired === 'relogin'">
-      <el-row :gutter="24" style="margin: 0 auto;">
+      <el-row :gutter="24" style="margin: 0 auto">
         <el-col :md="24" :sm="24">
-          <el-alert
-            :title="$tc('ReLoginTitle')"
-            center
-            style="margin-bottom: 20px;"
-            type="error"
-          />
+          <el-alert :title="$tc('ReLoginTitle')" center style="margin-bottom: 20px" type="error" />
         </el-col>
       </el-row>
-      <el-row :gutter="24" style="margin: 0 auto;">
+      <el-row :gutter="24" style="margin: 0 auto">
         <el-col :md="24" :sm="24">
           <el-button class="confirm-btn" size="mini" type="primary" @click="logout">
             {{ this.$t('ReLogin') }}
@@ -32,11 +27,11 @@
       </el-row>
     </div>
     <div v-else>
-      <el-row :gutter="24" style="margin: 0 auto;">
+      <el-row :gutter="24" style="margin: 0 auto">
         <el-col :md="24" :sm="24" :span="24" class="add">
           <el-select
             v-model="subTypeSelected"
-            style="width: 100%; margin-bottom: 20px;"
+            style="width: 100%; margin-bottom: 20px"
             @change="handleSubTypeChange"
           >
             <el-option
@@ -49,19 +44,22 @@
           </el-select>
         </el-col>
       </el-row>
-      <el-row v-if="!noCodeMFA.includes(subTypeSelected)" :gutter="24" style="margin: 0 auto;">
-        <el-col :md="24" :sm="24" style="display: flex; align-items: center; ">
+      <el-row v-if="!noCodeMFA.includes(subTypeSelected)" :gutter="24" style="margin: 0 auto">
+        <el-col :md="24" :sm="24" style="display: flex; align-items: center">
           <el-input
             v-model="secretValue"
             :placeholder="inputPlaceholder"
             :show-password="showPassword"
             @keyup.enter.native="handleConfirm"
           />
-          <span v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'" style="margin: -1px 0 0 20px;">
+          <span
+            v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'"
+            style="margin: -1px 0 0 20px"
+          >
             <el-button
               :disabled="smsBtnDisabled"
               size="mini"
-              style="line-height: 14px; float: right;"
+              style="line-height: 14px; float: right"
               type="primary"
               @click="sendCode"
             >
@@ -72,21 +70,17 @@
       </el-row>
       <el-row>
         <el-col>
+          <iframe v-if="passkeyVisible" :src="passkeyUrl" style="display: none" />
           <iframe
-            v-if="passkeyVisible"
-            :src="passkeyUrl"
-            style="display: none"
-          />
-          <iframe
-            v-if="isFaceCaptureVisible && subTypeSelected ==='face' && faceCaptureUrl"
+            v-if="isFaceCaptureVisible && subTypeSelected === 'face' && faceCaptureUrl"
             :src="faceCaptureUrl"
             allow="camera"
             sandbox="allow-scripts allow-same-origin"
-            style="width: 100%; height: 800px;border: none;"
+            style="width: 100%; height: 600px; border: none"
           />
         </el-col>
       </el-row>
-      <el-row :gutter="24" style="margin: 20px auto 10px;">
+      <el-row :gutter="24" style="margin: 20px auto 10px">
         <el-col :md="24" :sm="24">
           <el-button
             v-if="!noCodeMFA.includes(subTypeSelected)"
@@ -99,7 +93,7 @@
           </el-button>
           <el-button
             v-if="subTypeSelected === 'face'"
-            :disabled="isFaceCaptureVisible"
+            v-show="!isFaceCaptureVisible"
             class="confirm-btn"
             size="mini"
             type="primary"
@@ -124,7 +118,7 @@
 </template>
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 
 export default {
   name: 'UserConfirmDialog',
@@ -195,55 +189,65 @@ export default {
       this.$log.debug('perform confirm action')
       const confirmType = response.data?.code
       const confirmUrl = '/api/v1/authentication/confirm/'
-      this.$axios.get(confirmUrl, { params: { confirm_type: confirmType }}).then((data) => {
-        this.confirmTypeRequired = data.confirm_type
+      this.$axios
+        .get(confirmUrl, { params: { confirm_type: confirmType } })
+        .then(data => {
+          this.confirmTypeRequired = data.confirm_type
 
-        if (this.confirmTypeRequired === 'relogin') {
-          this.$axios.post(confirmUrl, { 'confirm_type': 'relogin', 'secret_key': 'x' }).then(() => {
-            this.callback()
-            this.visible = false
-          }).catch(() => {
-            this.title = this.$t('NeedReLogin')
-            this.visible = true
-          })
-          return
-        }
-        this.subTypeChoices = data.content
-        const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
-        this.subTypeSelected = defaultSubType.name
-        this.inputPlaceholder = defaultSubType.placeholder
-        this.visible = true
-      }).catch((err) => {
-        const data = err.response?.data
-        const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed')
-        this.$message.error(msg)
-        this.cancel(err)
-      }).finally(() => {
-        this.processing = false
-      })
+          if (this.confirmTypeRequired === 'relogin') {
+            this.$axios
+              .post(confirmUrl, { confirm_type: 'relogin', secret_key: 'x' })
+              .then(() => {
+                this.callback()
+                this.visible = false
+              })
+              .catch(() => {
+                this.title = this.$t('NeedReLogin')
+                this.visible = true
+              })
+            return
+          }
+          this.subTypeChoices = data.content
+          const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
+          this.subTypeSelected = defaultSubType.name
+          this.inputPlaceholder = defaultSubType.placeholder
+          this.visible = true
+        })
+        .catch(err => {
+          const data = err.response?.data
+          const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed')
+          this.$message.error(msg)
+          this.cancel(err)
+        })
+        .finally(() => {
+          this.processing = false
+        })
     }, 500),
     logout() {
       window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
     },
     sendCode() {
-      this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected }).then(res => {
-        this.$message.success(this.$tc('VerificationCodeSent'))
-        let time = 60
-        this.smsBtnDisabled = true
+      this.$axios
+        .post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected })
+        .then(res => {
+          this.$message.success(this.$tc('VerificationCodeSent'))
+          let time = 60
+          this.smsBtnDisabled = true
 
-        const interval = setInterval(() => {
-          time -= 1
-          this.smsBtnText = `${this.$t('Pending')}: ${time}`
+          const interval = setInterval(() => {
+            time -= 1
+            this.smsBtnText = `${this.$t('Pending')}: ${time}`
 
-          if (time <= 0) {
-            clearInterval(interval)
-            this.smsBtnText = this.$t('SendVerificationCode')
-            this.smsBtnDisabled = false
-          }
-        }, 1000)
-      }).catch(() => {
-        this.$message.error(this.$tc('FailedToSendVerificationCode'))
-      })
+            if (time <= 0) {
+              clearInterval(interval)
+              this.smsBtnText = this.$t('SendVerificationCode')
+              this.smsBtnDisabled = false
+            }
+          }, 1000)
+        })
+        .catch(() => {
+          this.$message.error(this.$tc('FailedToSendVerificationCode'))
+        })
     },
     handlePasskeyVerify() {
       this.passkeyVisible = true
@@ -267,23 +271,26 @@ export default {
     },
     startFaceCapture() {
       const url = '/api/v1/authentication/face/context/'
-      this.$axios.post(url).then(data => {
-        const token = data['token']
-        this.faceCaptureUrl = '/facelive/capture?token=' + token
-        this.isFaceCaptureVisible = true
+      this.$axios
+        .post(url)
+        .then(data => {
+          const token = data['token']
+          this.faceCaptureUrl = '/facelive/capture?token=' + token
+          this.isFaceCaptureVisible = true
 
-        const timer = setInterval(() => {
-          this.$axios.get(url + `?token=${token}`).then(data => {
-            if (data['is_finished']) {
-              clearInterval(timer)
-              this.isFaceCaptureVisible = false
-              this.handleConfirm()
-            }
-          })
-        }, 1000)
-      }).catch(() => {
-        this.$message.error(this.$tc('FailedToStartFaceCapture'))
-      })
+          const timer = setInterval(() => {
+            this.$axios.get(url + `?token=${token}`).then(data => {
+              if (data['is_finished']) {
+                clearInterval(timer)
+                this.isFaceCaptureVisible = false
+                this.handleConfirm()
+              }
+            })
+          }, 1000)
+        })
+        .catch(() => {
+          this.$message.error(this.$tc('FailedToStartFaceCapture'))
+        })
     },
     handleFaceCapture() {
       this.startFaceCapture()
@@ -306,16 +313,22 @@ export default {
       const data = {
         confirm_type: this.confirmTypeRequired,
         mfa_type: this.confirmTypeRequired === 'mfa' ? this.subTypeSelected : '',
-        secret_key: this.confirmTypeRequired === 'password' ? encryptPassword(this.secretValue) : this.secretValue
+        secret_key:
+          this.confirmTypeRequired === 'password'
+            ? encryptPassword(this.secretValue)
+            : this.secretValue
       }
 
-      this.$axios.post(`/api/v1/authentication/confirm/`, data).then(() => {
-        this.onSuccess()
-      }).catch((err) => {
-        this.$message.error(err.message || this.$tc('ConfirmFailed'))
-        this.faceCaptureUrl = null
-        this.isFaceCaptureVisible = false
-      })
+      this.$axios
+        .post(`/api/v1/authentication/confirm/`, data)
+        .then(() => {
+          this.onSuccess()
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$tc('ConfirmFailed'))
+          this.faceCaptureUrl = null
+          this.isFaceCaptureVisible = false
+        })
     }
   }
 }

src/components/Apps/VariableCreateUpdateForm/index.vue

@@ -39,6 +39,9 @@ export default {
         ['', ['name', 'var_name', 'type', 'text_default_value', 'select_default_value', 'extra_args', 'tips', 'required']]
       ],
       fieldsMeta: {
+        var_name: {
+          helpTextAsTip: false
+        },
         text_default_value: {
           label: this.$t('DefaultValue'),
           hidden: (formValue) => {

src/components/Apps/VariablesHelpTextDialog/index.vue

@@ -0,0 +1,100 @@
+<template>
+  <Dialog
+    :show-cancel="false"
+    :show-confirm="false"
+    :title="title"
+    :visible.sync="iVisible"
+    class="help-dialog"
+    top="1vh"
+    width="50%"
+  >
+    <p>{{ variablesHelpText }}</p>
+    <table border="1" class="help-table">
+      <tr>
+        <th>{{ $tc('Variable') }}</th>
+        <th>{{ $tc('Description') }}</th>
+        <th>{{ $tc('Example') }}</th>
+      </tr>
+      <tr v-for="(item, index) in variables" :key="index">
+        <td :title="$tc('ClickCopy')" class="item-td text-link" @click="onCopy(item.name)">
+          <label class="item-label">{{ item.name }}</label>
+        </td>
+        <td><span>{{ item.label }}</span></td>
+        <td><span>{{ item.default }}</span></td>
+      </tr>
+    </table>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+import { copy } from '@/utils/common/index'
+
+export default {
+  components: {
+    Dialog
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    variables: {
+      type: Array,
+      default: () => []
+    },
+    variablesHelpText: {
+      type: String,
+      default() {
+        return this.$t('WatermarkVariableHelpText')
+      }
+    }
+  },
+  data() {
+    return {
+      title: this.$t('BuiltinVariable')
+    }
+  },
+  computed: {
+    iVisible: {
+      set(val) {
+        this.$emit('update:visible', val)
+      },
+      get() {
+        return this.visible
+      }
+    }
+  },
+  methods: {
+    onCopy(key) {
+      copy(key)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+::v-deep .help-dialog.dialog .el-dialog__footer {
+  border-top: none;
+  padding: 8px;
+}
+
+.help-table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid #dee2e6;
+}
+
+::v-deep .help-table th,
+::v-deep .help-table td {
+  height: 40px;
+  padding: 0 8px;
+  text-align: left;
+}
+
+::v-deep .help-table .item-td,
+::v-deep .help-table .item-label {
+  cursor: pointer;
+  color: var(--color-primary);
+}
+</style>

src/components/Cards/DetailCard/ItemValue.vue

@@ -1,5 +1,5 @@
 <script type="text/jsx">
-import { toSafeLocalDateStr } from '@/utils/time'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 
 export default {
   name: 'ItemValue',

src/components/Cards/DetailCard/auto.vue

@@ -12,8 +12,8 @@
 
 <script>
 import DetailCard from './index.vue'
-import { copy } from '@/utils/common'
-import { toSafeLocalDateStr } from '@/utils/time'
+import { copy } from '@/utils/common/index'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 import IBox from '@/components/Common/IBox/index.vue'
 import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue'
 

src/components/Cards/DetailCard/index.vue

@@ -5,7 +5,7 @@
         <div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
           <span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
           <span class="item-value el-form-item__content">
-            <template
+            <component
               :is="item.component"
               v-if="item.component"
               v-bind="{...item}"

src/components/Common/DataActions/index.vue

@@ -5,7 +5,7 @@
         v-if="action.dropdown"
         v-show="action.dropdown.length > 0"
         :key="action.name"
-        :class="[action.name, {grouped: action.grouped }]"
+        :class="[action.name, { grouped: action.grouped }]"
         :size="action.size"
         :split-button="!!action.split"
         :type="action.type"
@@ -23,7 +23,7 @@
           :class="action.name"
           :size="size"
           class="more-action"
-          v-bind="{...cleanButtonAction(action), icon: ''}"
+          v-bind="{ ...cleanButtonAction(action), icon: '' }"
         >
           <span class="pre-icon">
             <Icon v-if="action.icon" :icon="action.icon" />
@@ -32,13 +32,13 @@
             {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
           </span>
         </el-button>
-        <el-dropdown-menu slot="dropdown" style="overflow: auto;max-height: 60vh">
+        <el-dropdown-menu slot="dropdown" style="overflow: auto; max-height: 60vh">
           <template v-for="option in action.dropdown">
             <div
               v-if="option.group"
-              :key="'group:'+option.name"
+              :key="'group:' + option.name"
               class="dropdown-menu-title"
-              style="width:130px"
+              style="width: 130px"
             >
               {{ option.group }}
             </div>
@@ -54,7 +54,7 @@
                 :command="[option, action]"
                 :title="option.tip"
                 class="dropdown-item"
-                v-bind="{...option, icon: ''}"
+                v-bind="{ ...option, icon: '' }"
               >
                 <span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
                   <Icon v-if="option.icon" :icon="option.icon" />
@@ -69,10 +69,10 @@
       <el-button
         v-else
         :key="action.name"
-        :class="[action.name, {grouped: action.grouped }]"
+        :class="[action.name, { grouped: action.grouped }]"
         :size="size"
         class="action-item"
-        v-bind="{...cleanButtonAction(action), icon: ''}"
+        v-bind="{ ...cleanButtonAction(action), icon: '' }"
         @click="handleClick(action)"
       >
         <el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import { toSentenceCase } from '@/utils/common'
+import { toSentenceCase } from '@/utils/common/index'
 import Icon from '@/components/Widgets/Icon/index.vue'
 
 export default {
@@ -228,9 +228,9 @@ export default {
 
 <style lang="scss" scoped>
 $btn-text-color: #ffffff;
-$color-btn-background: #E8F7F4;
-$color-btn-focus-background: #83CBBA;
-$color-divided: #E4E7ED;
+$color-btn-background: #e8f7f4;
+$color-btn-focus-background: #83cbba;
+$color-divided: #e4e7ed;
 $color-drop-menu-title: #909399;
 $color-drop-menu-border: #e4e7ed;
 
@@ -284,6 +284,8 @@ $color-drop-menu-border: #e4e7ed;
 
   .el-button {
     padding: 2px 5px;
+    line-height: 1.3;
+    font-size: 13px;
 
     &:not(.is-plain) {
       color: $btn-text-color;
@@ -319,7 +321,6 @@ $color-drop-menu-border: #e4e7ed;
 // 下拉 options
 .el-dropdown-menu {
   ::v-deep .more-batch-processing {
-
     &:hover {
       background-color: transparent !important;
     }

src/components/Common/QuickActions/action.vue

@@ -1,25 +1,23 @@
 <template>
   <tr>
-    <td>{{ getActionTitle(action) }}</td>
     <td>
-      <el-popover
-        :content="action.attrs.tip"
-        :disabled="!action.attrs.showTip"
-        placement="left-end"
-        trigger="hover"
-      >
-        <span slot="reference">
-          <component
-            :is="iType"
-            v-model="action.attrs.model"
-            :title="label"
-            v-bind="action.attrs"
-            v-on="callbacks"
-          >
-            {{ label }}
-          </component>
-        </span>
-      </el-popover>
+      {{ getActionTitle(action) }}
+      <el-tooltip v-if="action.attrs.showTip" :content="action.attrs.tip" :open-delay="500" effect="dark">
+        <i class="fa fa-question-circle-o" />
+      </el-tooltip>
+    </td>
+    <td>
+      <span slot="reference">
+        <component
+          :is="iType"
+          v-model="action.attrs.model"
+          :title="label"
+          v-bind="action.attrs"
+          v-on="callbacks"
+        >
+          {{ label }}
+        </component>
+      </span>
     </td>
   </tr>
 </template>
@@ -28,7 +26,7 @@
 import Switcher from '@/components/Form/FormFields/Switcher.vue'
 import Select2 from '@/components/Form/FormFields/Select2.vue'
 import UpdateSelect from '@/components/Form/FormFields/UpdateSelect.vue'
-import { toSentenceCase } from '@/utils/common'
+import { toSentenceCase } from '@/utils/common/index'
 
 class Action {
   constructor() {

src/components/Dashboard/ColumnChart.vue

@@ -1,6 +1,6 @@
 <template>
-  <div class="content">
-    <echarts
+  <div>
+    <Echart
       ref="echarts"
       :options="options"
       :autoresize="true"
@@ -12,9 +12,10 @@
 // eslint-disable-next-line no-unused-vars
 import * as echarts from 'echarts'
 import { mix } from '@/utils/theme/color'
+import Echart from '@/components/Dashboard/Echart.vue'
 
 export default {
-  components: {},
+  components: { Echart },
   props: {
     datesMetrics: {
       type: Array,

src/components/Dashboard/Echart.vue

@@ -0,0 +1,71 @@
+<template>
+  <echarts
+    :options="iOptions"
+    v-bind="$attrs"
+    @finished="onFinished"
+    v-on="$listeners"
+  />
+</template>
+
+<script>
+import 'echarts'
+
+export default {
+  components: {},
+  props: {
+    options: {
+      type: Object,
+      required: true
+    }
+  },
+  data() {
+    const urlParams = new URLSearchParams(window.location.search)
+    const isExport = urlParams.get('export') === 'true'
+    return {
+      isExport: isExport
+    }
+  },
+  computed: {
+    iOptions() {
+      return {
+        ...this.options,
+        animation: !this.isExport
+      }
+    }
+  },
+  created() {
+    if (!window._echarts) {
+      window._echarts = {
+        total: new Set(),
+        finished: new Set()
+      }
+    }
+    // 唯一 id，避免重复计数
+    this._chartId = `chart_${Date.now()}_${Math.random().toString(36).slice(2)}`
+    window._echarts.total.add(this._chartId)
+  },
+  beforeDestroy() {
+    if (window._echarts) {
+      window._echarts.total.delete(this._chartId)
+      window._echarts.finished.delete(this._chartId)
+      // 可选：当没有图表时清理全局对象
+      if (window._echarts.total.size === 0) {
+        delete window._echarts
+        delete window.echartsFinished
+      }
+    }
+  },
+  methods: {
+    onFinished() {
+      if (!window._echarts) return
+      window._echarts.finished.add(this._chartId)
+      if (window._echarts.finished.size === window._echarts.total.size) {
+        window.echartsFinished = true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/components/Dashboard/LineChart.vue

@@ -1,14 +1,12 @@
 <template>
   <div>
-    <echarts
+    <Echart
       ref="echarts"
       :options="options"
       :autoresize="true"
       theme="light"
-      class="disabled-when-print"
-      @finished="getDataUrl"
+      @finished="genSnapshot"
     />
-    <img v-if="dataUrl" :src="dataUrl" class="enabled-when-print" style="display: none;width: 100%;">
   </div>
 </template>
 
@@ -16,9 +14,11 @@
 // eslint-disable-next-line no-unused-vars
 import * as echarts from 'echarts'
 import { mix } from '@/utils/theme/color'
+import Echart from '@/components/Dashboard/Echart.vue'
 
 export default {
   name: 'LoginMetric',
+  components: { Echart },
   props: {
     range: {
       type: String,
@@ -110,7 +110,6 @@ export default {
             },
             axisLabel: {
               textStyle: {
-                // 坐标轴颜色
                 color: '#8F959E'
               }
             },
@@ -155,7 +154,7 @@ export default {
             type: 'line',
             smooth: true,
             areaStyle: {
-            // 区域填充样式
+              // 区域填充样式
               normal: {
                 color: new echarts.graphic.LinearGradient(
                   0,
@@ -187,7 +186,7 @@ export default {
             type: 'line',
             smooth: true,
             areaStyle: {
-            // 区域填充样式
+              // 区域填充样式
               normal: {
                 color: new echarts.graphic.LinearGradient(
                   0,
@@ -220,23 +219,58 @@ export default {
   },
   watch: {
     range() {
-      this.getMetricData()
+      this.genSnapshot()
+    },
+    datesMetrics() {
+      this.genSnapshot()
+    },
+    primaryData() {
+      this.genSnapshot()
+    },
+    secondaryData() {
+      this.genSnapshot()
     }
   },
   mounted() {
-    this.getMetricData()
+    this.genSnapshot()
+    this._before = () => this.genSnapshot(true)
+    this._after = () => this.forceResize()
+    window.addEventListener('beforeprint', this._before)
+    window.addEventListener('afterprint', this._after)
+    // 兼容某些浏览器（Safari）触发 print 媒体切换
+    this._mql = window.matchMedia && window.matchMedia('print')
+    if (this._mql) {
+      const handler = e => (e.matches ? this._before() : this._after())
+      this._mql.addEventListener?.('change', handler)
+      this._mql.addListener?.(handler)
+      this._mql._handler = handler
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('beforeprint', this._before)
+    window.removeEventListener('afterprint', this._after)
+    if (this._mql) {
+      this._mql.removeEventListener?.('change', this._mql._handler)
+      this._mql.removeListener?.(this._mql._handler)
+    }
   },
   methods: {
-    getDataUrl() {
-      const instance = this.$refs.echarts.echartsInstance
-      if (instance) {
-        this.dataUrl = instance.getDataURL()
-      }
+    forceResize() {
+      const inst = this.$refs.echarts?.echartsInstance
+      if (inst) inst.resize()
     },
-    getMetricData() {
-      this.getDataUrl()
+    async genSnapshot(force = false) {
+      if (force) this.forceResize()
+      const inst = this.$refs.echarts?.echartsInstance
+      if (!inst) return
+      try {
+        this.dataUrl = inst.getDataURL({ pixelRatio: 2, backgroundColor: '#ffffff' })
+      } catch (e) {
+        this.dataUrl = ''
+      }
     }
   }
+
 }
 </script>
 
@@ -245,16 +279,4 @@ export default {
   width: 100%;
   height: 272px;
 }
-
-@media print {
-  .disabled-when-print {
-    display: none;
-  }
-  .enabled-when-print {
-    display: inherit !important;
-  }
-  .print-margin {
-    margin-top: 10px;
-  }
-}
 </style>

src/components/Dashboard/ProgressChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <echarts
+    <Echart
       ref="echarts"
       :options="options"
       :autoresize="true"
@@ -13,8 +13,10 @@
 // eslint-disable-next-line no-unused-vars
 import * as echarts from 'echarts'
 import { mix } from '@/utils/theme/color'
+import Echart from '@/components/Dashboard/Echart.vue'
 
 export default {
+  components: { Echart },
   props: {
     colors: {
       type: Array,
@@ -35,14 +37,15 @@ export default {
     }
   },
   data() {
-    return {
-    }
+    return {}
   },
   computed: {
     options() {
       const seriesList = []
       const labels = this.data.map(item => item.label)
-      const total = _.sumBy(this.data, function(i) { return i.total })
+      const total = _.sumBy(this.data, function(i) {
+        return i.total
+      })
       for (let i = 0, len = this.data.length; i < len; i++) {
         const current = this.data[i]
         let num = (current.total / total) * 100
@@ -177,8 +180,8 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .echarts {
-    width: 100%;
-    height: 72px;
-  }
+.echarts {
+  width: 100%;
+  height: 72px;
+}
 </style>

src/components/Dashboard/RankTable.vue

@@ -9,7 +9,7 @@
       class="table"
       style="width: 100%"
     >
-      <el-table-column :label="$tc('Ranking')">
+      <el-table-column :label="$tc('Ranking')" width="100">
         <template #header>
           <el-tooltip :content="$t('Ranking')" placement="top" :open-delay="500">
             <span style="cursor: pointer;">{{ $t('Ranking') }}</span>

src/components/Dashboard/RealTimeSummary.vue

@@ -38,7 +38,7 @@ export default {
         {
           title: this.$t('OnlineSessions'),
           body: {
-            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
+            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' } },
             count: this.counter.total_count_online_sessions,
             disabled: !this.$hasPerm('terminal.view_session')
           }
@@ -46,7 +46,7 @@ export default {
         {
           title: this.$t('CurrentConnectionUsers'),
           body: {
-            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
+            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' } },
             count: this.counter.total_count_online_users,
             disabled: !this.$hasPerm('terminal.view_session')
           }

src/components/Dashboard/RingChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <echarts
+    <Echart
       ref="echarts"
       :autoresize="true"
       :options="options"
@@ -13,12 +13,15 @@ import 'echarts/lib/chart/line'
 import 'echarts/lib/component/legend'
 
 import Decimal from 'decimal.js'
+import Echart from '@/components/Dashboard/Echart.vue'
 
 export default {
+  components: { Echart },
   props: {
     config: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   computed: {
@@ -33,7 +36,7 @@ export default {
 
       const formatTitle = (text) => {
         if (!text) return ''
-        const maxLength = 23
+        const maxLength = 25
         const lines = []
         for (let i = 0; i < text.length; i += maxLength) {
           lines.push(text.slice(i, i + maxLength))
@@ -88,6 +91,7 @@ export default {
           {
             name: title,
             type: 'pie',
+            minAngle: 5,
             radius: ['72%', '90%'],
             avoidLabelOverlap: false,
             itemStyle: {

src/components/Dashboard/SwitchDate.vue

@@ -16,11 +16,13 @@
 <script>
 export default {
   props: {
-    days: {
+    name: {
       type: String,
-      default: () => {
-        return localStorage.getItem('dashboardDays') || '7'
-      }
+      default: 'dashboardDays'
+    },
+    days: {
+      type: [String, Number],
+      default: null
     },
     options: {
       type: Array,
@@ -47,8 +49,28 @@ export default {
       iOptions: this.options.length > 0 ? this.options : defaultOptions
     }
   },
+  created() {
+    let days = this.days
+    if (!days) {
+      days = this.$route.query.days
+    }
+    if (!days) {
+      days = localStorage.getItem(this.name)
+    }
+    if (!days) {
+      days = '7'
+    }
+    if (days && days !== this.select) {
+      this.select = days
+      this.$emit('change', days)
+    }
+  },
+  mounted() {
+    this.$emit('change', this.select)
+  },
   methods: {
     onChange(val) {
+      localStorage.setItem(this.name, val)
       this.$emit('change', val)
     }
   }

src/components/Dialog/Secret.vue

@@ -28,7 +28,7 @@
 
 <script>
 import i18n from '@/i18n/i18n'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 import Dialog from '@/components/Dialog/index'
 
 export default {

src/components/Drawer/index.vue

@@ -30,7 +30,7 @@
 </template>
 
 <script>
-import { getDrawerWidth } from '@/utils/common'
+import { getDrawerWidth } from '@/utils/common/index'
 
 export default {
   props: {

src/components/Form/AutoDataForm/index.vue

@@ -5,6 +5,7 @@
       ref="dataForm"
       :fields="totalFields"
       :form="iForm"
+      :server-errors="serverErrors"
       v-bind="$attrs"
       v-on="$listeners"
     >
@@ -28,6 +29,7 @@
 import DataForm from '../DataForm/index.vue'
 import FormGroupHeader from '@/components/Form/FormGroupHeader/index.vue'
 import { FormFieldGenerator } from '@/components/Form/AutoDataForm/utils'
+import { UniqueCheck } from '@/components/Form/DataForm/rules'
 
 export default {
   name: 'AutoDataForm',
@@ -65,7 +67,8 @@ export default {
       totalFields: [],
       loading: true,
       groups: [],
-      errors: {}
+      errors: {},
+      serverErrors: {}
     }
   },
   computed: {
@@ -94,7 +97,7 @@ export default {
   },
   methods: {
     async optionUrlMetaAndGenerateColumns() {
-      let data = { actions: {}}
+      let data = { actions: {} }
       if (this.url) {
         data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
       }
@@ -103,6 +106,8 @@ export default {
       this.generateColumns()
       this.$emit('afterGenerateColumns', this.totalFields)
       this.cleanFormValue()
+      // 初始化时清空错误
+      this.serverErrors = {}
       this.loading = false
     },
     generateColumns() {
@@ -110,6 +115,47 @@ export default {
       this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta)
       this.groups = generator.groups
       this.$log.debug('Total fields: ', this.totalFields)
+      this.applyUniqueRules()
+    },
+    applyUniqueRules() {
+      const fields = this.totalFields || []
+      const currentIdGetter = () => {
+        return this.$route?.params?.id || this.form?.id || this.iForm?.id
+      }
+
+      // 移除 url 后拼接的参数
+      const defaultListUrl = (() => {
+        try {
+          const u = new URL(this.url, location.origin)
+          u.pathname = u.pathname.replace(/\/(\d+|[0-9a-fA-F-]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})\/?$/, '/')
+          return u.origin ? u.origin + u.pathname : u.pathname
+        } catch (e) {
+          return (this.url || '').replace(/\/(\d+|[0-9a-fA-F-]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})\/?($|\?)/, '/$2')
+        }
+      })()
+
+      fields.forEach(field => {
+        const conf = field?.uniqueCheck
+
+        if (!conf) return
+
+        const confObj = (typeof conf === 'object') ? conf : {}
+        const param = confObj.param || field.prop || field.id
+        const url = confObj.url || defaultListUrl
+        const label = confObj.label || field.label || param
+        const entityName = confObj.entityName || ''
+
+        if (!Array.isArray(field.rules)) field.rules = []
+
+        field.rules.push(UniqueCheck({
+          url,
+          param,
+          label,
+          entityName,
+          getIgnoreId: currentIdGetter,
+          fieldName: field.prop || field.id
+        }))
+      })
     },
     _cleanFormValue(form, remoteMeta) {
       if (!form) {
@@ -139,18 +185,57 @@ export default {
     cleanFormValue() {
       this._cleanFormValue(this.iForm, this.remoteMeta)
     },
+    _getElFormInstance() {
+      try {
+        return this.$refs?.dataForm?.$refs?.form?.$refs?.elForm || null
+      } catch (e) {
+        return null
+      }
+    },
+    /**
+     * @description 仅清理 UI 的错误展示,不触发表单内容重建
+     */
+    clearAllFieldErrors() {
+      const elForm = this._getElFormInstance()
+      if (elForm && Array.isArray(elForm.fields)) {
+        elForm.fields.forEach((item) => {
+          item.validateMessage = ''
+          item.validateState = ''
+        })
+      }
+      // 不修改 totalFields/attrs，避免触发 content 重建导致输入丢失
+      this.serverErrors = {}
+    },
     setFieldError(name, error) {
-      const field = this.totalFields.find((v) => v.prop === name)
-      if (!field) {
-        return
+      error = (error || '').toString().replace(/[。.]+$/, '')
+      const elForm = this._getElFormInstance()
+      if (elForm && Array.isArray(elForm.fields)) {
+        const item = elForm.fields.find(f => f.prop === name)
+        if (item) {
+          item.validateMessage = error
+          item.validateState = error ? 'error' : ''
+        }
       }
-      if (field.attrs.error === error) {
-        error += '.'
-      }
-
-      if (typeof error === 'string') {
-        field.el.errors = error
-        field.attrs.error = error
+      // 不写入 totalFields，避免触发 innerContent 变化导致表单值被覆盖
+      this.$set(this.serverErrors, name, error)
+    },
+    setErrors(errors) {
+      const mapped = {}
+      Object.entries(errors || {}).forEach(([k, v]) => {
+        let msg = v
+        // v是数组并且数组都是字符串，则拼接为字符串
+        if (Array.isArray(v) && v.every(item => typeof item === 'string')) msg = v.join('; ')
+        else if (typeof v === 'object' && v !== null) msg = JSON.stringify(v)
+        mapped[k] = String(msg || '')
+      })
+      this.serverErrors = mapped
+      const elForm = this._getElFormInstance()
+      if (elForm && Array.isArray(elForm.fields)) {
+        elForm.fields.forEach((item) => {
+          const msg = mapped[item.prop] || ''
+          item.validateMessage = msg
+          item.validateState = msg ? 'error' : ''
+        })
       }
     },
     groupHidden(group, i) {

src/components/Form/AutoDataForm/utils.js

@@ -4,7 +4,7 @@ import NestedField from '@/components/Form/AutoDataForm/components/NestedField.v
 import rules from '@/components/Form/DataForm/rules'
 import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
 import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
-import { assignIfNot, toSentenceCase } from '@/utils/common'
+import { assignIfNot, toSentenceCase } from '@/utils/common/index'
 import TagInput from '@/components/Form/FormFields/TagInput.vue'
 import i18n from '@/i18n/i18n'
 
@@ -177,7 +177,10 @@ export class FormFieldGenerator {
     const systemLang = document.cookie.django_language
     if (helpTextAsPlaceholder !== undefined) {
       helpTextAsPlaceholder = !!helpTextAsPlaceholder
-    } else if (placeholderType.indexOf(field.type) === -1 && placeholderComponent.indexOf(field.component) === -1) {
+    } else if (
+      placeholderType.indexOf(field.type) === -1 &&
+      placeholderComponent.indexOf(field.component) === -1
+    ) {
       helpTextAsPlaceholder = false
     } else if ((helpTextWordLength <= 5 || helpText.length <= 10) && systemLang === 'en') {
       helpTextAsPlaceholder = true

src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue

@@ -6,6 +6,7 @@
     :prop="prop"
     :rules="_show && Array.isArray(data.rules) ? data.rules : []"
     v-bind="data.attrs"
+    :error="errorText"
   >
     <template v-if="data.label" #label>
       <span :title="data.label">
@@ -19,7 +20,8 @@
           placement="right"
           popper-class="help-tips"
         >
-          <div slot="content" v-sanitize="data.helpTip" class="help-tip-content" /> <!-- Noncompliant -->
+          <div slot="content" v-sanitize="data.helpTip" class="help-tip-content" />
+          <!-- Noncompliant -->
           <i class="fa fa-question-circle-o help-tip-icon" />
         </el-tooltip>
       </span>
@@ -27,11 +29,7 @@
     <template v-if="readonly && hasReadonlyContent">
       <div
         v-if="data.type === 'input'"
-        :style="
-          componentProps.type === 'textarea'
-            ? {padding: '10px 0', lineHeight: 1.5}
-            : ''
-        "
+        :style="componentProps.type === 'textarea' ? { padding: '10px 0', lineHeight: 1.5 } : ''"
       >
         {{ itemValue }}
       </div>
@@ -50,11 +48,7 @@
       v-on="listeners"
     >
       <template v-for="opt in options">
-        <el-option
-          v-if="data.type === 'select'"
-          :key="opt.label"
-          v-bind="opt"
-        />
+        <el-option v-if="data.type === 'select'" :key="opt.label" v-bind="opt" />
         <el-checkbox-button
           v-else-if="data.type === 'checkbox-group' && data.style === 'button'"
           :key="opt.value"
@@ -111,10 +105,10 @@
 <script>
 import getEnableWhenStatus from '../util/enable-when'
 import { noop } from '../util/utils'
-import _get from 'lodash.get'
-import _includes from 'lodash.includes'
-import _topairs from 'lodash.topairs'
-import _frompairs from 'lodash.frompairs'
+import _get from 'lodash/get'
+import _includes from 'lodash/includes'
+import _topairs from 'lodash/toPairs'
+import _frompairs from 'lodash/fromPairs'
 
 function validator(data) {
   if (!data) {
@@ -152,6 +146,10 @@ export default {
   props: {
     // eslint-disable-next-line vue/require-default-prop
     data: Object,
+    serverErrors: {
+      type: Object,
+      default: () => ({})
+    },
     prop: {
       type: String,
       default() {
@@ -170,7 +168,8 @@ export default {
   data() {
     return {
       propsInner: {},
-      isBlurTrigger: this.data.rules &&
+      isBlurTrigger:
+        this.data.rules &&
         this.data.rules.some(rule => {
           return rule.required && rule.trigger === 'blur'
         })
@@ -179,7 +178,7 @@ export default {
   computed: {
     // 解构运算符会处理 undefined 的情况
     componentProps: ({ data: { el }, propsInner }) => ({ ...el, ...propsInner }),
-    hasReadonlyContent: ({ data: { type }}) => _includes(['input', 'select'], type),
+    hasReadonlyContent: ({ data: { type } }) => _includes(['input', 'select'], type),
     hiddenStatus: ({ data: { hidden = () => false }, data, value }) => hidden(value, data),
     enableWhenStatus: ({ data: { enableWhen }, value }) => getEnableWhenStatus(enableWhen, value),
     // 是否显示
@@ -189,6 +188,11 @@ export default {
     classes() {
       return 'el-form-item-' + this.data.prop + ' ' + (this.data.attrs?.class || '')
     },
+    errorText() {
+      const fromAttrs = this.data?.attrs?.error
+      const fromServer = this.serverErrors ? this.serverErrors[this.data.prop] : ''
+      return fromAttrs || fromServer || ''
+    },
     listeners() {
       const {
         data: {
@@ -204,10 +208,7 @@ export default {
       } = this
       return {
         ..._frompairs(
-          _topairs(on).map(([eName, handler]) => [
-            eName,
-            (...args) => handler(args, updateForm)
-          ]),
+          _topairs(on).map(([eName, handler]) => [eName, (...args) => handler(args, updateForm)])
         ),
         // 手动更新表单数据
         input: (value, ...rest) => {
@@ -232,9 +233,7 @@ export default {
 
     multipleValue: ({ data, itemValue, options = [] }) => {
       const multipleSelectValue =
-        _get(data, 'el.multiple') && Array.isArray(itemValue)
-          ? itemValue
-          : [itemValue]
+        _get(data, 'el.multiple') && Array.isArray(itemValue) ? itemValue : [itemValue]
       return multipleSelectValue
         .map(val => (options.find(op => op.value === val) || {}).label)
         .join()
@@ -254,8 +253,7 @@ export default {
           if (v.url === oldV.url || v.request === oldV.request) return
         }
         const isOptionsCase =
-          ['select', 'checkbox-group', 'radio-group'].indexOf(this.data.type) >
-          -1
+          ['select', 'checkbox-group', 'radio-group'].indexOf(this.data.type) > -1
         const {
           url,
           request = () => this.$axios.get(url).then(resp => resp.data),
@@ -323,7 +321,7 @@ export default {
   }
 }
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .help-tips {
   opacity: 0.8;
   line-height: 2;
@@ -332,7 +330,7 @@ export default {
 
 .help-block {
   ::v-deep .el-alert__icon {
-    font-size: 16px
+    font-size: 16px;
   }
 
   &.checkbox {

src/components/Form/DataForm/components/el-form-renderer/el-form-renderer.vue

@@ -1,11 +1,18 @@
 <template>
-  <el-form ref="elForm" :model="value" class="el-form-renderer" v-bind="$attrs">
+  <el-form
+    ref="elForm"
+    :model="value"
+    class="el-form-renderer"
+    v-bind="$attrs"
+    @submit.native.prevent
+  >
     <template v-for="item in innerContent">
       <slot v-if="!isHidden(item)" :name="`id:${item.id}`" />
       <component
         :is="item.type === GROUP ? 'render-form-group' : 'render-form-item'"
         :key="item.id"
         :data="item"
+        :server-errors="serverErrors"
         :disabled="disabled || item.disabled"
         :item-value="value[item.id]"
         :options="options[item.id]"
@@ -19,13 +26,19 @@
   </el-form>
 </template>
 <script>
-import _set from 'lodash.set'
-import _isequal from 'lodash.isequal'
-import _clonedeep from 'lodash.clonedeep'
+import _set from 'lodash/set'
+import _isequal from 'lodash/isEqual'
+import _clonedeep from 'lodash/cloneDeep'
 import RenderFormGroup from './components/render-form-group.vue'
 import RenderFormItem from './components/render-form-item.vue'
 import transformContent from './util/transform-content'
-import { collect, correctValue, mergeValue, transformInputValue, transformOutputValue } from './util/utils'
+import {
+  collect,
+  correctValue,
+  mergeValue,
+  transformInputValue,
+  transformOutputValue
+} from './util/utils'
 
 const GROUP = 'group'
 
@@ -47,6 +60,10 @@ export default {
       type: Array,
       required: true
     },
+    serverErrors: {
+      type: Object,
+      default: () => ({})
+    },
     disabled: {
       type: Boolean,
       default: false

src/components/Form/DataForm/components/el-form-renderer/util/enable-when.js

@@ -1,5 +1,5 @@
-import _get from 'lodash.get'
-import _has from 'lodash.has'
+import _get from 'lodash/get'
+import _has from 'lodash/has'
 
 /**
  * 处理 enableWhen
@@ -20,7 +20,5 @@ export default function getEnableWhenStatus(enableWhen, value) {
     })
   }
 
-  return Array.isArray(enableWhen)
-    ? enableWhen.some(handleCondition)
-    : handleCondition(enableWhen)
+  return Array.isArray(enableWhen) ? enableWhen.some(handleCondition) : handleCondition(enableWhen)
 }

src/components/Form/DataForm/components/el-form-renderer/util/transform-content.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-sequences */
-import _kebabcase from 'lodash.kebabcase'
+import _ from 'lodash'
 /**
  * content 的每一项会浅拷贝一层
  * 只可以在 item 层新增修改属性，如 item.a = b
@@ -13,7 +13,7 @@ export default function transformContent(content) {
       removeDollarInKey(item)
       extractRulesFromComponent(item)
       // 有些旧写法是 checkboxGroup & radioGroup
-      item.type = _kebabcase(item.type)
+      item.type = _.kebabCase(item.type)
     }
 
     return item
@@ -34,8 +34,5 @@ export function extractRulesFromComponent(item) {
   if (!component || typeof component === 'string') return
 
   const { rules = [] } = component
-  item.rules = [
-    ...(item.rules || []),
-    ...(typeof rules === 'function' ? rules(item) : rules)
-  ]
+  item.rules = [...(item.rules || []), ...(typeof rules === 'function' ? rules(item) : rules)]
 }

src/components/Form/DataForm/components/el-form-renderer/util/utils.js

@@ -1,5 +1,5 @@
-import _frompairs from 'lodash.frompairs'
-import _isplainobject from 'lodash.isplainobject'
+import _frompairs from 'lodash/fromPairs'
+import _isplainobject from 'lodash/isPlainObject'
 
 export function noop() {}
 
@@ -12,11 +12,9 @@ export function collect(content, key) {
         value: item.type === 'group' ? collect(item.items, key) : item[key]
       }))
       .filter(
-        ({ type, value }) =>
-          value !== undefined ||
-          (type === 'group' && Object.keys(value).length),
+        ({ type, value }) => value !== undefined || (type === 'group' && Object.keys(value).length)
       )
-      .map(({ id, value }) => [id, value]),
+      .map(({ id, value }) => [id, value])
   )
 }
 

src/components/Form/DataForm/index.vue

@@ -8,8 +8,10 @@
       :form="basicForm"
       :label-position="iLabelPosition"
       class="form-fields"
-      label-width="25%"
+      :label-width="labelWidth"
+      :style="{ '--label-width': labelWidth }"
       v-bind="$attrs"
+      :server-errors="serverErrors"
       v-on="$listeners"
     >
       <!-- slot 透传 -->
@@ -54,7 +56,7 @@
 
         <el-button
           v-for="button in moreButtons"
-          v-show="!button.hidden"
+          v-show="!iHidden(button)"
           :key="button.title"
           :loading="button.loading"
           size="small"
@@ -70,8 +72,20 @@
 
 <script>
 import ElFormRender from './components/el-form-renderer'
-import { randomString } from '@/utils/string'
-import { scrollToError } from '@/utils'
+import { randomString } from '@/utils/common/index'
+
+const scrollToError = (
+  el,
+  scrollOption = {
+    behavior: 'smooth',
+    block: 'center'
+  }
+) => {
+  setTimeout(() => {
+    const isError = el.getElementsByClassName('is-error')
+    isError[0].scrollIntoView(scrollOption)
+  }, 0)
+}
 
 export default {
   components: {
@@ -108,6 +122,10 @@ export default {
       type: Boolean,
       default: true
     },
+    serverErrors: {
+      type: Object,
+      default: () => ({})
+    },
     fields: {
       type: Array,
       default: () => []
@@ -128,6 +146,10 @@ export default {
     labelPosition: {
       type: String,
       default: ''
+    },
+    labelWidth: {
+      type: String,
+      default: '25%'
     }
   },
   data() {
@@ -209,6 +231,9 @@ export default {
     },
     getFormValue() {
       return this.$refs.form.getFormValue()
+    },
+    iHidden(item) {
+      return typeof item.hidden === 'function' ? item.hidden() : item.hidden
     }
   }
 }
@@ -219,6 +244,10 @@ export default {
   margin-right: 80px;
   margin-bottom: 20px;
 
+  .el-form {
+    margin-right: 0;
+  }
+
   ::v-deep .el-input-group__prepend {
     border-radius: 0;
   }
@@ -263,7 +292,7 @@ export default {
     }
 
     .el-form-item__content {
-      width: 75%;
+      width: calc(100% - var(--label-width));
       line-height: 32px;
 
       // 禁用的输入框
@@ -337,7 +366,7 @@ export default {
 
   ::v-deep .form-buttons {
     margin-top: 30px;
-    margin-left: 25%;
+    margin-left: var(--label-width);
   }
 }
 

src/components/Form/DataForm/rules/index.js

@@ -1,4 +1,5 @@
 import i18n from '@/i18n/i18n'
+import request from '@/utils/request'
 
 export const Required = {
   required: true, message: i18n.t('FieldRequiredError'), trigger: 'blur'
@@ -118,3 +119,69 @@ export default {
   matchAlphanumericUnderscore,
   MatchExcludeParenthesis
 }
+/**
+ * @description 表单唯一性校验
+ *
+ * @param {Object} options
+ * @param {string} 列表查询地址
+ * @param {string} 查询参数名
+ * @param {string} 字段中文名
+ * @param {string} 字段名
+ * @param {function(): (string|number)} 返回更新场景下的当前对象 id
+ */
+export function UniqueCheck(options = {}) {
+  const { url, param, label, fieldName, getIgnoreId } = options
+
+  function existsInResponse(res) {
+    if (Array.isArray(res)) return res.length > 0
+    if (res && typeof res === 'object') {
+      if (typeof res.count === 'number') return res.count > 0
+      if (Array.isArray(res.results)) return res.results.length > 0
+    }
+    return !!res
+  }
+
+  function extractIds(res) {
+    if (Array.isArray(res)) return res.map(i => i?.id).filter(Boolean)
+    if (res && Array.isArray(res.results)) return res.results.map(i => i?.id).filter(Boolean)
+    return []
+  }
+
+  return {
+    async validator(rule, value, callback) {
+      try {
+        let v = value
+
+        if (typeof v === 'string') v = v.trim()
+        if (v === '' || v === undefined || v === null) return callback()
+        if (!url || !param) return callback()
+
+        const res = await request.get(url, { params: { [param]: v } })
+        let duplicated = existsInResponse(res)
+
+        if (duplicated && typeof getIgnoreId === 'function') {
+          const curId = getIgnoreId()
+          if (curId) {
+            const ids = extractIds(res)
+
+            // 查询结果只包含自身,因此不被视为重复
+            if (ids.length >= 1 && ids.every(id => id === curId)) {
+              duplicated = false
+            }
+          }
+        }
+
+        if (duplicated) {
+          const _label = label || fieldName || ''
+          const msg = `${_label}${i18n.t('Existing')}`
+          callback(new Error(msg))
+        } else {
+          callback()
+        }
+      } catch (e) {
+        callback()
+      }
+    },
+    trigger: ['blur']
+  }
+}

src/components/Form/FormFields/CodeEditor.vue

@@ -14,6 +14,7 @@
               <el-button
                 :type="item.el && item.el.type"
                 class="start-stop-btn"
+                :disabled="item.disabled"
                 size="mini"
                 @click="item.callback()"
               >

src/components/Form/FormFields/CronTab/components/Crontab-Result.vue

@@ -13,7 +13,7 @@
 
 <script>
 import parser from 'cron-parser'
-import { toSafeLocalDateStr } from '@/utils/time'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 
 export default {
   name: 'CrontabResult',

src/components/Form/FormFields/JSONManyToManySelect/ValueFormatter.vue

@@ -10,7 +10,7 @@
 
 <script>
 import BaseFormatter from '@/components/Table/TableFormatters/base.vue'
-import { setUrlParam } from '@/utils/common'
+import { setUrlParam } from '@/utils/common/index'
 
 export default {
   name: 'ValueFormatter',

src/components/Form/FormFields/JSONManyToManySelect/index.vue

@@ -42,9 +42,9 @@ import DataTable from '@/components/Table/DataTable/index.vue'
 import ValueFormatter from './ValueFormatter.vue'
 import AttrFormDialog from './AttrFormDialog.vue'
 import AttrMatchResultDialog from './AttrMatchResultDialog.vue'
-import { setUrlParam } from '@/utils/common'
+import { setUrlParam } from '@/utils/common/index'
 import { attrMatchOptions } from '@/components/const'
-import { toM2MJsonParams } from '@/utils/jms'
+import { toM2MJsonParams } from '@/utils/jms/index'
 
 export default {
   name: 'JSONManyToManySelect',
@@ -109,7 +109,7 @@ export default {
         columns: [
           { prop: 'name', label: this.$t('AttrName'), formatter: tableFormatter('name') },
           { prop: 'match', label: this.$t('Match'), formatter: tableFormatter('match') },
-          { prop: 'value', label: this.$t('AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs }},
+          { prop: 'value', label: this.$t('AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs } },
           {
             prop: 'action',
             label: this.$t('Action'),

src/components/Form/FormFields/NestedObjectSelect2.vue

@@ -19,7 +19,7 @@ export default {
   props: {
     value: {
       type: [Array, String, Number, Boolean, Object],
-      default: () => ([])
+      default: () => []
     },
     multiple: {
       type: Boolean,
@@ -36,7 +36,7 @@ export default {
   },
   computed: {
     attrsWithoutValue() {
-      const attrs = Object.assign({}, this.$attrs)
+      const attrs = Object.assign({ clearable: this.clearable }, this.$attrs)
       delete attrs.value
       return attrs
     },
@@ -50,6 +50,13 @@ export default {
         const value = this.objectsToValues(this.value)
         return value
       }
+    },
+    clearable() {
+      if (this.$attrs.clearable === undefined) {
+        return this.multiple
+      } else {
+        return this.$attrs.clearable
+      }
     }
   },
   methods: {
@@ -71,8 +78,11 @@ export default {
       value = value.map(v => {
         // uuid v4
         const uuid = /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i
-        return typeof v === 'object' ? v
-          : this.$attrs?.allowCreate && !uuid.test(v) ? { [this.customLabelKeyName]: v } : { pk: v }
+        return typeof v === 'object'
+          ? v
+          : this.$attrs?.allowCreate && !uuid.test(v)
+            ? { [this.customLabelKeyName]: v }
+            : { pk: v }
       })
       if (!this.multiple) {
         value = value[0]
@@ -87,9 +97,13 @@ export default {
       if (!Array.isArray(val)) {
         val = [val]
       }
-      val = val.map((v) => {
+      val = val.map(v => {
         if (v && typeof v === 'object') {
-          return v.pk || v.id || (this.$attrs?.allowCreate ? (v?.[this.customLabelKeyName] + ':' + v?.value) : '')
+          return (
+            v.pk ||
+            v.id ||
+            (this.$attrs?.allowCreate ? v?.[this.customLabelKeyName] + ':' + v?.value : '')
+          )
         } else {
           return v
         }
@@ -103,6 +117,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/components/Form/FormFields/PhoneInput.vue

@@ -46,7 +46,7 @@ export default {
     }
   },
   mounted() {
-    const defaults = { code: localStorage.getItem('prePhoneCode') || '+86', phone: '' }
+    const defaults = { code: this.getDefaultCode(), phone: '' }
     this.rawValue = this.value || defaults
     this.$axios.get('/api/v1/common/countries/').then(res => {
       this.countries = res.map(item => {
@@ -56,6 +56,22 @@ export default {
     this.$emit('input', this.fullPhone)
   },
   methods: {
+    getDefaultCode() {
+      const mapper = {
+        'zh': '+86',
+        'en': '+1',
+        'ja': '+81',
+        'ko': '+82',
+        'fr': '+33',
+        'de': '+49',
+        'es': '+34',
+        'it': '+39',
+        'ru': '+7',
+        'ar': '+966'
+      }
+      const locale = this.$i18n.locale.split('-')[0]
+      return localStorage.getItem('prePhoneCode') || mapper[locale] || '+86'
+    },
     onChange(countryCode) {
       this.rawValue.code = countryCode
       this.onInputChange()

src/components/Form/FormFields/TagInput.vue

@@ -33,6 +33,9 @@
     >
       <i :class="[isCheckShowPassword ? 'fa-eye-slash' : 'fa-eye']" class="fa" />
     </span>
+    <span v-if="filterTags.length > 0" class="clear-icon" @click="handleClearAll">
+      <i class="el-icon-circle-close" :title="$t('Clear')" />
+    </span>
   </div>
 </template>
 
@@ -100,7 +103,7 @@ export default {
   methods: {
     handleTagClose(tag) {
       this.filterTags.splice(this.filterTags.indexOf(tag), 1)
-      this.handleConfirm()
+      this.$emit('change', this.filterTags)
     },
     handleSelect(item) {
       this.filterValue = item.value
@@ -140,6 +143,11 @@ export default {
     },
     handleShowPassword() {
       this.isCheckShowPassword = !this.isCheckShowPassword
+    },
+    handleClearAll() {
+      this.filterTags = []
+      this.$emit('change', this.filterTags)
+      this.$emit('input', this.filterTags)
     }
   }
 }
@@ -161,11 +169,12 @@ export default {
   line-height: 30px;
 
   &:hover {
-    border-color: #C0C4CC;
+    border-color: #c0c4cc;
   }
 
   & ::v-deep .el-tag {
-    margin-bottom: 1px;
+    margin-bottom: 2px;
+    margin-top: 2px;
     font-family: sans-serif !important;
     margin-left: 5px;
   }
@@ -177,6 +186,7 @@ export default {
 
 .search-input {
   flex: 1;
+  min-width: 150px;
 
   & ::v-deep .el-input__inner {
     max-width: 100%;
@@ -204,4 +214,15 @@ export default {
     color: #999999;
   }
 }
+
+.clear-icon {
+  display: inherit;
+  padding-right: 6px;
+  cursor: pointer;
+  color: #c0c4cc;
+
+  &:hover {
+    color: #606164;
+  }
+}
 </style>

src/components/Form/FormFields/TransferSelect.vue

@@ -68,7 +68,7 @@ export default {
       return { label: item.name, value: item.id }
     })
     const url = vm.url || vm.ajax.url
-    const getPageData = async({ pageIndex, pageSize, keyword }) => {
+    const getPageData = async ({ pageIndex, pageSize, keyword }) => {
       const limit = pageSize
       const offset = (pageIndex - 1) * pageSize
       const params = {

src/components/Form/FormFields/UpdateSelect.vue

@@ -24,7 +24,7 @@
 
 <script>
 import Select2 from './Select2.vue'
-import { hasUUID } from '@/utils/common'
+import { hasUUID } from '@/utils/common/index'
 
 export default {
   components: {

src/components/Form/FormFields/UpdateToken.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script>
-import { randomString } from '@/utils/string'
+import { randomString } from '@/utils/common/index'
 
 export default {
   props: {

src/components/Table/AutoDataTable/index.vue

@@ -23,7 +23,7 @@
 <script type="text/jsx">
 import Sortable from 'sortablejs'
 import DataTable from '@/components/Table/DataTable/index.vue'
-import { newURL, ObjectLocalStorage, replaceAllUUID } from '@/utils/common'
+import { newURL, ObjectLocalStorage, replaceAllUUID } from '@/utils/common/index'
 import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
 import { TableColumnsGenerator } from './utils'
 
@@ -60,25 +60,24 @@ export default {
       },
       isDeactivated: false,
       tableColumnsStorage: this.getTableColumnsStorage(),
-      sortable: null
+      sortable: null,
+      inited: false
     }
   },
   watch: {
     config: {
+      immediate: false,
       handler: _.debounce(function(iNew, iOld) {
-        if (this.isDeactivated) {
+        if (this.isDeactivated || !this.inited) {
           return
         }
-        try {
-          if (JSON.stringify(iNew) === JSON.stringify(iOld)) {
-            return
-          }
-        } catch (error) {
-          this.$log.error('JsonStringify Error: ', error)
+        const changed = this.isConfigChanged(iNew, iOld)
+        if (!changed) {
+          return
         }
 
         this.optionUrlMetaAndGenCols()
-        this.$log.debug('AutoDataTable Config change found, ', this.isDeactivated)
+        this.$log.debug('AutoDataTable Config change found')
       }, 200)
     }
   },
@@ -93,6 +92,35 @@ export default {
     this.isDeactivated = false
   },
   methods: {
+    isConfigChanged(iNew, iOld) {
+      const _iNew = _.cloneDeep(iNew)
+      const _iOld = _.cloneDeep(iOld)
+      delete _iNew.columns
+      delete _iOld.columns
+      const oldMeta = _iNew.columnsMeta
+      const newMeta = _iOld.columnsMeta
+      const metas = [oldMeta, newMeta]
+      for (const meta of metas) {
+        if (!meta) {
+          continue
+        }
+        for (const [key, value] of Object.entries(meta)) {
+          if (!key || !value || typeof value !== 'object') {
+            continue
+          }
+          delete value['formatter']
+        }
+      }
+
+      try {
+        if (JSON.stringify(_iNew) === JSON.stringify(_iOld)) {
+          return false
+        }
+      } catch (error) {
+        this.$log.error('JsonStringify Error: ', error)
+      }
+      return true
+    },
     setColumnDraggable() {
       const el = this.$el.querySelector('.el-table__header-wrapper thead tr')
       if (!el) {
@@ -238,6 +266,7 @@ export default {
         if (this.$refs.dataTable) {
           this.$refs.dataTable.getList()
         }
+        this.inited = true
       })
     },
     orderingColumns(columns) {

src/components/Table/AutoDataTable/utils.js

@@ -1,4 +1,4 @@
-import { toSentenceCase } from '@/utils/common'
+import { toSentenceCase } from '@/utils/common/index'
 import i18n from '@/i18n/i18n'
 
 import {
@@ -20,15 +20,18 @@ export class TableColumnsGenerator {
     this.vm = vm
   }
 
-  dynamicActionWidth() {
-    if (i18n.locale === 'en') {
-      return '120px'
-    }
-    if (i18n.locale === 'pt-br') {
-      return '160px'
-    }
-    return '100px'
-  }
+  // dynamicActionWidth() {
+  //   console.log(i18n.locale)
+  //   if (i18n.locale === 'zh-hans' || i18n.locale === 'zh-hant') {
+  //     return '100px'
+  //   }
+
+  //   if (i18n.locale === 'ja' || i18n.locale === 'ko') {
+  //     return '120px'
+  //   }
+
+  //   return '160px'
+  // }
 
   generateColumns() {
     const config = _.cloneDeep(this.config)
@@ -132,7 +135,7 @@ export class TableColumnsGenerator {
           prop: 'actions',
           label: i18n.t('Actions'),
           align: 'center',
-          width: this.dynamicActionWidth(),
+          width: '120px',
           formatter: ActionsFormatter,
           fixed: 'right',
           formatterArgs: {}
@@ -222,11 +225,15 @@ export class TableColumnsGenerator {
           padding = '6px'
           value = '-'
         }
-        return h('span', {
-          'style': {
-            marginLeft: padding
-          }
-        }, [value])
+        return h(
+          'span',
+          {
+            style: {
+              marginLeft: padding
+            }
+          },
+          [value]
+        )
       }
     }
     return col
@@ -278,10 +285,11 @@ export class TableColumnsGenerator {
       }
 
       return (
-        <span>{column.label}
+        <span>
+          {column.label}
           <el-tooltip {...binds}>
-            <div slot='content' v-sanitize={helpTip}/>
-            <i class='fa fa-question-circle-o help-tip-icon' style='padding-left: 2px'/>
+            <div slot='content' v-sanitize={helpTip} />
+            <i class='fa fa-question-circle-o help-tip-icon' style='padding-left: 2px' />
           </el-tooltip>
         </span>
       )
@@ -296,16 +304,13 @@ export class TableColumnsGenerator {
         return col
       }
       if (column.type === 'boolean') {
-        col.filters = [
-          { text: i18n.t('Yes'), value: true },
-          { text: i18n.t('No'), value: false }
-        ]
+        col.filters = [{ text: i18n.t('Yes'), value: true }, { text: i18n.t('No'), value: false }]
         col.sortable = false
         col['column-key'] = col.prop
       }
       if (column.type === 'choice' && column.choices) {
         col.filters = column.choices.map(item => {
-          if (typeof (item.value) === 'boolean') {
+          if (typeof item.value === 'boolean') {
             if (item.value) {
               return { text: item['label'], value: 'True' }
             } else {

src/components/Table/CardTable/Panel.vue

@@ -4,7 +4,7 @@
       {{ $t('Enterprise') }}
     </span>
     <el-row class="panel">
-      <el-col v-if="d.icon" :span="8" class="image">
+      <el-col v-if="d.icon" :span="d.icon ? 8 : 0" class="image">
         <img
           v-if="d.icon.startsWith('/') || d.icon.startsWith('data:')"
           :alt="d.display_name"
@@ -12,21 +12,21 @@
         >
         <Icon v-else :icon="d.icon" />
       </el-col>
-      <el-col :span="16" class="text-zone">
+      <el-col :span="d.icon ? 16 : 24" class="text-zone">
         <div class="one-line">
           <b>{{ d.display_name }}</b>
-          <el-tag v-if="d.version" size="mini" style="margin-left: 5px">
+        </div>
+        <div class="tag-zone">
+          <el-tag v-if="d.version" size="mini" style="margin-left: 5px; background-color: #ecf5ff; color: #409eff;">
             {{ d.version }}
           </el-tag>
+          <el-tag v-for="tag of d.tags" :key="tag" size="mini">
+            {{ capitalize(tag) }}
+          </el-tag>
         </div>
         <div :title="d.comment " class="comment">
           {{ d.comment }}
         </div>
-        <div class="tag-zone">
-          <el-tag v-for="tag of d.tags" :key="tag" size="mini">
-            {{ capitalize(tag) }}
-          </el-tag>
-        </div>
       </el-col>
     </el-row>
   </div>
@@ -107,22 +107,20 @@ export default {
 
     .comment {
       display: -webkit-box;
-      height: 120px;
+      margin-top: 10px;
       font-size: 12px;
-      padding: 10px 0;
       cursor: pointer;
       overflow: hidden;
       -webkit-line-clamp: 4;
-      -webkit-box-flex: 1;
       -webkit-box-orient: vertical;
-      text-align: left;
     }
 
     .tag-zone {
       display: flex;
-      height: 30%;
       align-items: center;
       cursor: pointer;
+      margin-top: 10px;
+      margin-left: -5px;
     }
   }
 }

src/components/Table/CardTable/index.vue

@@ -99,9 +99,9 @@ export default {
       totalData: [],
       page: defaultFirstPage,
       extraQuery: {},
-      paginationSize: 6,
+      paginationSize: 12,
       paginationLayout: 'total, sizes, prev, pager, next',
-      paginationSizes: [6, 18, 27],
+      paginationSizes: [12, 24, 36],
       loading: true,
       axiosConfig: {
         raw: 1,
@@ -212,7 +212,7 @@ export default {
       this.$confirm(msg, this.$tc('Info'), {
         type: 'warning',
         confirmButtonClass: 'el-button--danger',
-        beforeClose: async(action, instance, done) => {
+        beforeClose: async (action, instance, done) => {
           if (action !== 'confirm') return done()
           const deleteFunc = this.tableConfig.onDelete || this.defaultPerformDelete
           await deleteFunc(obj)
@@ -248,6 +248,10 @@ export default {
     display: flex;
     justify-content: left;
     flex-wrap: wrap;
+
+    .el-card .el-card__body div {
+      height: inherit;
+    }
   }
 
   .el-col, div {
@@ -257,7 +261,7 @@ export default {
       min-width: 330px;
       position: relative;
       margin-bottom: 20px;
-      //height: 230px;
+      height: 180px;
       width: 380px;
       padding: 15px;
 

src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue

@@ -5,6 +5,11 @@
       <slot name="no-data" />
     </template>
     <template v-else>
+      <!--
+        过滤 selection 相关事件的透传，避免父组件收到 el-table 原生的“当前页” selection，
+        导致跨页选择（persistSelection）被覆盖，只剩当页数据。
+        选择事件统一走 selectStrategy，在内部维护全量 selected 并向外 emit。
+      -->
       <el-table
         ref="table"
         v-loading="tableLoading"
@@ -12,7 +17,7 @@
         :row-class-name="rowClassName"
         v-bind="tableAttrs"
         @select="selectStrategy.onSelect"
-        v-on="$listeners"
+        v-on="forwardListeners"
         @selection-change="selectStrategy.onSelectionChange"
         @select-all="handleSelectAll($event, canSelect)"
         @sort-change="onSortChange"
@@ -23,27 +28,18 @@
           <template v-if="hasSelect">
             <el-data-table-column
               key="selection-key"
-              v-bind="{align: columnsAlign, ...columns[0]}"
+              v-bind="{ align: columnsAlign, ...columns[0] }"
             />
 
-            <el-data-table-column
-              key="tree-ctrl"
-              v-bind="{align: columnsAlign, ...columns[1]}"
-            >
+            <el-data-table-column key="tree-ctrl" v-bind="{ align: columnsAlign, ...columns[1] }">
               <template slot-scope="scope">
-                <span
-                  v-for="space in scope.row._level"
-                  :key="space"
-                  class="ms-tree-space"
-                />
+                <span v-for="space in scope.row._level" :key="space" class="ms-tree-space" />
                 <span
                   v-if="iconShow(scope.$index, scope.row)"
                   class="tree-ctrl"
                   @click="toggleExpanded(scope.$index)"
                 >
-                  <i
-                    :class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`"
-                  />
+                  <i :class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`" />
                 </span>
                 {{ scope.row[columns[1].prop] }}
               </template>
@@ -52,23 +48,16 @@
             <el-data-table-column
               v-for="col in columns.filter((c, i) => i !== 0 && i !== 1)"
               :key="col.prop"
-              v-bind="{align: columnsAlign, ...col}"
+              v-bind="{ align: columnsAlign, ...col }"
             />
           </template>
 
           <!--无选择-->
           <template v-else>
             <!--展开这列, 丢失 el-data-table-column属性-->
-            <el-data-table-column
-              key="tree-ctrl"
-              v-bind="{align: columnsAlign, ...columns[0]}"
-            >
+            <el-data-table-column key="tree-ctrl" v-bind="{ align: columnsAlign, ...columns[0] }">
               <template slot-scope="scope">
-                <span
-                  v-for="space in scope.row._level"
-                  :key="space"
-                  class="ms-tree-space"
-                />
+                <span v-for="space in scope.row._level" :key="space" class="ms-tree-space" />
 
                 <span
                   v-if="iconShow(scope.$index, scope.row)"
@@ -84,14 +73,19 @@
             <el-data-table-column
               v-for="col in columns.filter((c, i) => i !== 0)"
               :key="col.prop"
-              v-bind="{align: columnsAlign, ...col}"
+              v-bind="{ align: columnsAlign, ...col }"
             />
           </template>
         </template>
 
         <!--非树-->
         <template v-else>
-          <el-data-table-column v-if="hasSelection" :align="selectionAlign" :selectable="canSelect" type="selection" />
+          <el-data-table-column
+            v-if="hasSelection"
+            :align="selectionAlign"
+            :selectable="canSelect"
+            type="selection"
+          />
           <el-data-table-column
             v-for="col in columns"
             :key="col.prop"
@@ -100,14 +94,14 @@
             :filters="col.filters || null"
             :formatter="typeof col.formatter === 'function' ? col.formatter : null"
             :title="col.label"
-            v-bind="{align: columnsAlign, ...col}"
+            v-bind="{ align: columnsAlign, ...col }"
           >
             <template #header>
               <span :title="col.label">{{ col.label }}</span>
             </template>
             <template
               v-if="col.formatter && typeof col.formatter !== 'function'"
-              v-slot:default="{row, column, $index}"
+              v-slot:default="{ row, column, $index }"
             >
               <div
                 :is="col.formatter"
@@ -161,9 +155,9 @@
 </template>
 
 <script>
-import _get from 'lodash.get'
-import _values from 'lodash.values'
-import _isEmpty from 'lodash.isempty'
+import _get from 'lodash/get'
+import _values from 'lodash/values'
+import _isEmpty from 'lodash/isEmpty'
 import SelfLoadingButton from './components/self-loading-button.vue'
 import TheDialog, { dialogModes } from './components/the-dialog.vue'
 import ElDataTableColumn from './components/el-data-table-column'
@@ -275,8 +269,7 @@ export default {
      */
     beforeSearch: {
       type: Function,
-      default() {
-      }
+      default() {}
     },
     /**
      * 单选, 适用场景: 不可以批量删除
@@ -441,8 +434,7 @@ export default {
      */
     onEdit: {
       type: Function,
-      default(row) {
-      }
+      default(row) {}
     },
     /**
      * 点击删除按钮时的方法, 当默认删除方法不满足需求时使用, 需要返回promise
@@ -451,9 +443,7 @@ export default {
     onDelete: {
       type: Function,
       default(data) {
-        const ids = Array.isArray(data)
-          ? data.map(v => v[this.id]).join(',')
-          : data[this.id]
+        const ids = Array.isArray(data) ? data.map(v => v[this.id]).join(',') : data[this.id]
         return this.$axios.delete(this.url + '/' + ids + '/', this.axiosConfig)
       }
     },
@@ -707,8 +697,8 @@ export default {
       }
     },
     /*
-    * 设置默认对齐方式
-    */
+     * 设置默认对齐方式
+     */
     defaultAlign: {
       type: String,
       default: 'center'
@@ -723,8 +713,7 @@ export default {
     },
     extraPaginationAttrs: {
       type: Object,
-      default: () => {
-      }
+      default: () => {}
     },
     hasSelection: {
       type: Boolean,
@@ -810,6 +799,16 @@ export default {
     selectStrategy() {
       return getSelectStrategy(this)
     },
+    // 过滤会与内部选择策略冲突的事件，避免父组件只拿到当前页 selection
+    forwardListeners() {
+      const listeners = { ...this.$listeners }
+      delete listeners['selection-change']
+      delete listeners['select']
+      delete listeners['select-all']
+      // 外层如需监听 selection 变化，请监听本组件透出的 selection-change，
+      // 该事件来自选择策略，已汇总跨页后的全量 selected
+      return listeners
+    },
     searchLocatedSlotKeys() {
       return getLocatedSlotKeys(this.$slots, 'search:')
     },
@@ -897,9 +896,7 @@ export default {
       }
       Object.assign(query, this._extraQuery)
       Object.assign(query, this.innerQuery)
-      query[this.pageSizeKey] = this.hasPagination
-        ? this.size
-        : this.noPaginationSize
+      query[this.pageSizeKey] = this.hasPagination ? this.size : this.noPaginationSize
 
       // 根据偏移值计算接口正确的页数
       const pageOffset = this.firstPage - defaultFirstPage
@@ -981,9 +978,7 @@ export default {
         formValue = this.$refs.searchForm.getFormValue()
         Object.assign(query, formValue)
       }
-      const queryStr =
-        (url.indexOf('?') > -1 ? '&' : '?') +
-        queryUtil.stringify(query, '=', '&')
+      const queryStr = (url.indexOf('?') > -1 ? '&' : '?') + queryUtil.stringify(query, '=', '&')
 
       // 请求开始
       this.tableLoading = loading
@@ -1003,10 +998,7 @@ export default {
 
           // 不分页
           if (!this.hasPagination) {
-            data =
-              _get(resp, this.dataPath) ||
-              _get(resp, noPaginationDataPath) ||
-              []
+            data = _get(resp, this.dataPath) || _get(resp, noPaginationDataPath) || []
             this.total = data.length
           } else {
             data = _get(resp, this.dataPath) || []
@@ -1189,7 +1181,7 @@ export default {
       this.$confirm(this.deleteMessage(data), this.$t('Info'), {
         type: 'warning',
         confirmButtonClass: 'el-button--danger',
-        beforeClose: async(action, instance, done) => {
+        beforeClose: async (action, instance, done) => {
           if (action !== 'confirm') return done()
 
           instance.confirmButtonLoading = true
@@ -1225,11 +1217,7 @@ export default {
       }
       const remain = this.data.length - deleteCount
       const lastPage = Math.ceil(this.total / this.size)
-      if (
-        remain === 0 &&
-        this.page === lastPage &&
-        this.page > defaultFirstPage
-      ) {
+      if (remain === 0 && this.page === lastPage && this.page > defaultFirstPage) {
         this.page--
       }
     },
@@ -1257,20 +1245,14 @@ export default {
         tmp.push(record)
 
         if (record[this.treeChildKey] && record[this.treeChildKey].length > 0) {
-          const children = this.tree2Array(
-            record[this.treeChildKey],
-            expandAll,
-            record,
-            _level
-          )
+          const children = this.tree2Array(record[this.treeChildKey], expandAll, record, _level)
           tmp = tmp.concat(children)
         }
       })
       return tmp
     },
     rowClassName(...args) {
-      let rcn =
-        this.tableAttrs.rowClassName || this.tableAttrs['row-class-name'] || ''
+      let rcn = this.tableAttrs.rowClassName || this.tableAttrs['row-class-name'] || ''
       if (typeof rcn === 'function') rcn = rcn(...args)
       if (this.isTree) rcn += ' ' + this.showRow(...args)
       return rcn

src/components/Table/DataTable/compenents/el-data-table/utils/select-strategy.js

@@ -1,14 +1,9 @@
-/**
- * 两种多选策略：Normal 和 PersistSelection
- */
-
 /**
  * 多选策略接口
  */
 class StrategyAbstract {
   constructor(elDataTable) {
     this.elDataTable = elDataTable
-    // 绑定this后可直接在template中使用
     this.onSelectionChange = this.onSelectionChange.bind(this)
     this.onSelect = this.onSelect.bind(this)
     this.onSelectAll = this.onSelectAll.bind(this)
@@ -18,39 +13,22 @@ class StrategyAbstract {
     return this.elDataTable.$refs.table
   }
 
-  onSelectionChange() {
-  }
-
-  onSelect() {
-  }
-
-  onSelectAll() {
-  }
-
-  toggleRowSelection() {
-  }
-
-  clearSelection() {
-  }
-
-  updateElTableSelection() {
-  }
+  onSelectionChange() {}
+  onSelect() {}
+  onSelectAll() {}
+  toggleRowSelection() {}
+  clearSelection() {}
+  updateElTableSelection() {}
 }
 
 /**
- * 普通策略。由el-table维护selected
+ * 普通策略。由 el-table 自己维护 selection
  */
 class StrategyNormal extends StrategyAbstract {
-  /**
-   * normal模式下只需要监听selection-change事件
-   */
   onSelectionChange(val) {
     this.elDataTable.selected = val
   }
 
-  /**
-   * toggleRowSelection和clearSelection的表现与el-table一致
-   */
   toggleRowSelection(...args) {
     return this.elTable.toggleRowSelection(...args)
   }
@@ -61,44 +39,28 @@ class StrategyNormal extends StrategyAbstract {
 }
 
 /**
- * 跨页保存多选策略。手动维护selected数组
+ * 跨页保存多选策略
  */
 class StrategyPersistSelection extends StrategyAbstract {
-  /**
-   * el-table的selection-change事件不适用于开启跨页保存的情况。
-   * 比如，当开启persistSelection时，发生以下两个场景：
-   * 1. 用户点击翻页
-   * 2. 用户点击行首的切换全选项按钮，清空当前页多选项数据
-   * 其中场景1应该保持selected不变；而场景2只应该从selected移除当前页所有行，保留其他页面的多选状态。
-   * 但el-table的selection-change事件在两个场景中无差别发生，所以这里不处理这个事件
-   */
-
-  /**
-   * 用户切换某一行的多选
-   */
   onSelect(selection, row) {
     const isChosen = selection.indexOf(row) > -1
     this.toggleRowSelection(row, isChosen)
+    // el-table 原生 selection-change 仅包含当前页。为保证跨页勾选有效，
+    // 在内部策略维护完 selected 后，向外部同步“全量已选”。
+    this.elDataTable.$emit('selection-change', this.elDataTable.selected)
   }
 
-  /**
-   * 用户切换当前页的多选
-   */
   onSelectAll(selection, selectable = () => true) {
     const { id, selected, data } = this.elDataTable
     const selectableRows = data.filter(selectable)
-    // const isSelected = !!selection.length
 
-    // 创建已选择项的 id 集合，用于快速查找
     const selectedIds = new Set(selected.map(r => r[id]))
     const currentPageIds = new Set(selectableRows.map(row => row[id]))
 
-    // 前页面的选中状态
     const currentPageSelectedCount = selectableRows.filter(row =>
       selectedIds.has(row[id])
     ).length
 
-    // 判断是全选还是取消全选
     const shouldSelectAll = currentPageSelectedCount < selectableRows.length
 
     this.elTable?.clearSelection()
@@ -106,15 +68,11 @@ class StrategyPersistSelection extends StrategyAbstract {
     if (shouldSelectAll) {
       selectableRows.forEach(row => {
         if (!selectedIds.has(row[id])) selected.push(row)
-
         this.elTable.toggleRowSelection(row, true)
-
-        // ! 这里需要触发事件，否则在 el-table 中无法触发 selection-change 事件
         this.elDataTable.$emit('toggle-row-selection', true, row)
       })
     } else {
       const newSelected = []
-
       selected.forEach(row => {
         if (!currentPageIds.has(row[id])) {
           newSelected.push(row)
@@ -122,17 +80,12 @@ class StrategyPersistSelection extends StrategyAbstract {
           this.elDataTable.$emit('toggle-row-selection', false, row)
         }
       })
-
       this.elDataTable.selected = newSelected
     }
 
     this.elDataTable.$emit('selection-change', this.elDataTable.selected)
   }
 
-  /**
-   * toggleRowSelection和clearSelection管理elDataTable的selected数组
-   * 记得最后要将状态同步到el-table中
-   */
   toggleRowSelection(row, isSelected) {
     const { id, selected } = this.elDataTable
     const foundIndex = selected.findIndex(r => r[id] === row[id])
@@ -149,26 +102,24 @@ class StrategyPersistSelection extends StrategyAbstract {
 
     this.elDataTable.$emit('toggle-row-selection', isSelected, row)
     this.updateElTableSelection()
+    // 切换后同步全量 selection（跨页）
+    this.elDataTable.$emit('selection-change', this.elDataTable.selected)
   }
 
   clearSelection() {
     this.elDataTable.selected = []
     this.updateElTableSelection()
+    // 清空后也同步给外部，保持外层状态一致
+    this.elDataTable.$emit('selection-change', this.elDataTable.selected)
   }
 
-  /**
-   * 将selected状态同步到el-table中
-   */
   updateElTableSelection() {
     const { data, id, selected } = this.elDataTable
     const selectedIds = new Set(selected.map(r => r[id]))
-
     this.elTable?.clearSelection()
 
     data.forEach(row => {
       const shouldBeSelected = selectedIds.has(row[id])
-      if (!this.elTable) return
-
       if (shouldBeSelected) {
         this.elTable.toggleRowSelection(row, true)
       }

src/components/Table/DataTable/index.vue

@@ -10,7 +10,7 @@
 </template>
 
 <script>
-import { newURL, ObjectLocalStorage } from '@/utils/common'
+import { newURL, ObjectLocalStorage } from '@/utils/common/index'
 import { default as ElDatableTable } from './compenents/el-data-table'
 import { mapGetters } from 'vuex'
 
@@ -65,7 +65,7 @@ export default {
         onEdit: (row) => {
           const defaultOnEdit = (row) => {
             const routeName = userTableActions.editRoute
-            this.$router.push({ name: routeName, params: { id: row.id }})
+            this.$router.push({ name: routeName, params: { id: row.id } })
           }
           let onEdit = userTableActions.onEdit
           if (!onEdit) {

src/components/Table/DrawerListTable/index.vue

@@ -22,8 +22,9 @@
 <script>
 import ListTable from '../ListTable'
 import Drawer from '@/components/Drawer/index.vue'
-import { setUrlParam, toLowerCaseExcludeAbbr, toSentenceCase } from '@/utils/common'
+import { setUrlParam, toLowerCaseExcludeAbbr, toSentenceCase } from '@/utils/common/index'
 import { mapGetters } from 'vuex'
+import { resolveRoute } from '@/utils/vue/index'
 
 const drawerType = [String, Function]
 
@@ -106,8 +107,8 @@ export default {
         const formatterArgs = value?.formatterArgs
         // console.log('>>> name: ', key)
         // console.log('>>> formatter: ', formatter)
-        const detailFormaters = ['AmountFormatter', 'DetailFormatter']
-        if (formatter && detailFormaters.includes(formatter.name) && formatterArgs.drawer !== false) {
+        const detailFormatters = ['AmountFormatter', 'DetailFormatter']
+        if (formatter && detailFormatters.includes(formatter.name) && formatterArgs.drawer !== false) {
           formatterArgs.onClick = this.onDetail
         }
       }
@@ -166,9 +167,9 @@ export default {
       }
       this.drawerComponent = ''
     },
-    getDetailDrawerTitle({ col, row, cellValue, payload = {}}) {
+    getDetailDrawerTitle({ col, row, cellValue, payload = {} }) {
       this.$log.debug('>>> getDetailDrawerTitle: ', col, row, cellValue, payload)
-      const { detailRoute = {}, formatterArgs = {}} = payload
+      const { detailRoute = {}, formatterArgs = {} } = payload
       const getTitle = formatterArgs.getDrawerTitle
       this.$log.debug('>>> getTitle: ', getTitle)
       if (getTitle && typeof getTitle === 'function') {
@@ -177,7 +178,7 @@ export default {
       if (formatterArgs.title) {
         return formatterArgs.title
       }
-      const resolvedRoute = this.resolveRoute(detailRoute)
+      const resolvedRoute = resolveRoute(detailRoute, this.$router)
       let title = cellValue || row.name
       if (formatterArgs.getTitle) {
         title = formatterArgs.getTitle({ col, row, cellValue })
@@ -196,18 +197,23 @@ export default {
       }
 
       let title = this.title
+
       if (!title && this.resource) {
         title = this.resource
       }
+
       if (!title) {
         title = this.$route.meta?.title
         title = title.replace('List', '').replace('列表', '')
         title = _.trimEnd(title, 's')
       }
+
       if (!title) {
         title = this.$t('NoTitle')
       }
+
       let actionLabel = ''
+
       if (action === 'clone' || action === 'create') {
         actionLabel = this.$t('Create')
       } else if (action === 'update') {
@@ -215,6 +221,7 @@ export default {
       } else if (action === 'detail') {
         actionLabel = this.$t('Detail')
       }
+
       title = actionLabel + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
       return title
     },
@@ -225,53 +232,38 @@ export default {
     },
     getRouteNameComponent(name, action) {
       const route = { name: name }
+
       if (action === 'detail' || action === 'update') {
         route.params = { id: '1' }
       }
-      const routes = this.$router.resolve(route)
-      if (!routes) {
-        return
-      }
-      const matched = routes.resolved.matched.filter(item => item.name === name && item.components)
-      if (matched.length === 0) {
-        return
+
+      const resolved = resolveRoute(route, this.$router)
+
+      if (resolved && resolved.components && resolved.components.default) {
+        return resolved.components.default
       }
 
-      if (matched[0] && matched[0].components?.default) {
-        const component = matched[0].components.default
-        return component
-      }
-    },
-    resolveRoute(route) {
-      const routes = this.$router.resolve(route)
-      if (!routes) {
-        return
-      }
-      const matched = routes.resolved.matched.filter(item => item.name === route.name && item.components)
-      if (matched.length === 0) {
-        return
-      }
-      if (matched[0] && matched[0].components?.default) {
-        return matched[0]
-      }
+      return ''
     },
     getDetailComponent({ detailRoute }) {
       if (!detailRoute) {
         return this.detailDrawer
       }
-      this.$log.debug('>>> getDetailComponent: ', detailRoute)
-      const route = this.resolveRoute(detailRoute)
+
+      const route = resolveRoute(detailRoute, this.$router)
       let component = null
-      if (route) {
+
+      if (route && route.components && route.components.default) {
         component = route.components.default
       }
+
       if (!component) {
         component = this.detailDrawer
       }
+
       return component
     },
     getDrawerComponent(action, payload) {
-      this.$log.debug('>>> getDrawerComponent: ', action, payload)
       switch (action) {
         case 'create':
           return this.createDrawer
@@ -286,7 +278,7 @@ export default {
       }
     },
 
-    async showDrawer(action, { row = {}, col = {}, query = {}, cellValue = '', payload = {}} = {}) {
+    async showDrawer(action, { row = {}, col = {}, query = {}, cellValue = '', payload = {} } = {}) {
       try {
         // 1. 先重置状态
         this.drawerVisible = false
@@ -302,7 +294,6 @@ export default {
         // 3. 设置组件
         this.drawerComponent = this.getDrawerComponent(action, payload)
         this.$log.debug('>>> drawerComponent: ', this.drawerComponent)
-        this.drawerTitle = this.getActionDrawerTitle({ action, row, col, cellValue, payload })
 
         // 4. 如果没有组件，尝试获取默认组件
         if (!this.drawerComponent) {
@@ -319,6 +310,7 @@ export default {
           const actionMeta = await this.$store.getters['common/drawerActionMeta']
           this.title = this.getDrawerTitle({ action, ...actionMeta })
         }
+        this.drawerTitle = this.getActionDrawerTitle({ action, row, col, cellValue, payload })
 
         // 7. 等待下一个 tick，确保组件已设置
         await this.$nextTick()
@@ -363,7 +355,7 @@ export default {
       await this.$store.dispatch('common/setDrawerActionMeta', {
         action: 'detail', row: row, col: col, id: id
       })
-      await this.showDrawer('detail', { row, col, cellValue, payload: { detailRoute, formatterArgs }})
+      await this.showDrawer('detail', { row, col, cellValue, payload: { detailRoute, formatterArgs } })
     },
     async onCreate(meta) {
       if (!meta) {
@@ -373,14 +365,14 @@ export default {
       await this.$store.dispatch('common/setDrawerActionMeta', { action: 'create', ...meta })
       await this.showDrawer('create', meta)
     },
-    async onClone({ row, col, query = {}}) {
+    async onClone({ row, col, query = {} }) {
       this.$route.params.id = ''
       await this.$store.dispatch('common/setDrawerActionMeta', {
         action: 'clone', row: row, col: col, id: row.id
       })
       await this.showDrawer('clone', { query })
     },
-    async onUpdate({ row, col, query = {}}) {
+    async onUpdate({ row, col, query = {} }) {
       this.$route.params.id = row.id
       this.$route.params.action = 'update'
       await this.$store.dispatch('common/setDrawerActionMeta', {

src/components/Table/ListTable/TableAction/ExportDialog.vue

@@ -49,7 +49,7 @@
 import Dialog from '@/components/Dialog/index.vue'
 import { createSourceIdCache } from '@/api/common'
 import * as queryUtil from '@/components/Table/DataTable/compenents/el-data-table/utils/query'
-import { download } from '@/utils/common'
+import { download } from '@/utils/common/index'
 
 export default {
   name: 'ExportDialog',

src/components/Table/ListTable/TableAction/ImportDialog.vue

@@ -58,6 +58,7 @@
         :import-option="importOption"
         :json-data="jsonData"
         :url="url"
+        v-bind="$attrs"
         @cancel="cancelUpload"
         @finish="closeDialog"
       />
@@ -68,7 +69,7 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import ImportTable from '@/components/Table/ListTable/TableAction/ImportTable.vue'
-import { download, getErrorResponseMsg } from '@/utils/common'
+import { download, getErrorResponseMsg } from '@/utils/common/index'
 import { createSourceIdCache } from '@/api/common'
 
 export default {
@@ -247,46 +248,46 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-  @import "~@/styles/variables";
+@import "~@/styles/variables";
 
-  .error-msg {
-    color: $--color-danger;
+.error-msg {
+  color: $--color-danger;
+}
+
+.error-msg.error-results {
+  background-color: #f3f3f4;
+  max-height: 200px;
+  overflow: auto
+}
+
+.file-uploader ::v-deep .el-upload {
+  width: 100%;
+  //padding-right: 150px;
+}
+
+.file-uploader ::v-deep .el-upload-dragger {
+  width: 100%;
+}
+
+.importTableZone {
+  padding: 0 20px;
+
+  .importTable {
+    overflow: auto;
   }
 
-  .error-msg.error-results {
-    background-color: #f3f3f4;
-    max-height: 200px;
-    overflow: auto
+  .tableFilter {
+    padding-bottom: 10px;
   }
+}
 
-  .file-uploader ::v-deep .el-upload {
-    width: 100%;
-    //padding-right: 150px;
-  }
+.importTable ::v-deep .el-dialog__body {
+  padding-bottom: 20px;
+}
 
-  .file-uploader ::v-deep .el-upload-dragger {
-    width: 100%;
-  }
-
-  .importTableZone {
-    padding: 0 20px;
-
-    .importTable {
-      overflow: auto;
-    }
-
-    .tableFilter {
-      padding-bottom: 10px;
-    }
-  }
-
-  .importTable ::v-deep .el-dialog__body {
-    padding-bottom: 20px;
-  }
-
-  .export-item {
-    margin-left: 80px;
-  }
+.export-item {
+  margin-left: 80px;
+}
 
 .export-item:first-child {
   margin-left: 0;

src/components/Table/ListTable/TableAction/ImportTable.vue

@@ -42,10 +42,10 @@
 
 <script>
 import DataTable from '@/components/Table/DataTable/index.vue'
-import { getUpdateObjURL } from '@/utils/common'
-import { sleep } from '@/utils/time'
+import { getUpdateObjURL } from '@/utils/common/index'
+import { sleep } from '@/utils/common/time'
 import { EditableInputFormatter } from '@/components/Table/TableFormatters'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 import getStatusColumnMeta from '@/components/Table/ListTable/TableAction/const'
 
 export default {
@@ -97,6 +97,10 @@ export default {
     origin: {
       type: String,
       default: ''
+    },
+    encryptFields: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -273,11 +277,15 @@ export default {
       }
       return columns
     },
+    getEncryptFields() {
+      const fromProp = Array.isArray(this.encryptFields) && this.encryptFields.length ? this.encryptFields : null
+      return fromProp || ['password', 'secret', 'private_key']
+    },
     generateTableData(tableTitles, tableData) {
       const totalData = []
       tableData.forEach(item => {
         this.$set(item, '@status', 'pending')
-        const encryptFields = ['password', 'secret', 'private_key']
+        const encryptFields = this.getEncryptFields()
         for (const field of encryptFields) {
           if (item[field]) {
             item[field] = encryptPassword(item[field])

src/components/Table/ListTable/TableAction/LeftSide.vue

@@ -10,7 +10,7 @@
 <script>
 import { cleanActions } from './utils'
 import { createSourceIdCache } from '@/api/common'
-import { getErrorResponseMsg } from '@/utils/common'
+import { getErrorResponseMsg } from '@/utils/common/index'
 
 import i18n from '@/i18n/i18n'
 import DataActions from '@/components/Common/DataActions/index.vue'
@@ -240,7 +240,7 @@ export default {
         type: 'warning',
         confirmButtonClass: 'el-button--danger',
         showCancelButton: true,
-        beforeClose: async(action, instance, done) => {
+        beforeClose: async (action, instance, done) => {
           if (action !== 'confirm') return done()
           instance.confirmButtonLoading = true
           try {

src/components/Table/ListTable/TableAction/QuickFilter.vue

@@ -45,7 +45,7 @@
 
 <script>
 import SummaryCard from '@/components/Cards/SummaryCard/index.vue'
-import { setUrlParam } from '@/utils/common'
+import { setUrlParam } from '@/utils/common/index'
 
 export default {
   name: 'QuickFilter',

src/components/Table/ListTable/TableAction/RightSide.vue

@@ -17,7 +17,7 @@
 import ActionsGroup from '@/components/Common/ActionsGroup/index.vue'
 import ImExportDialog from './ImExportDialog.vue'
 import { cleanActions } from './utils'
-import { assignIfNot } from '@/utils/common'
+import { assignIfNot } from '@/utils/common/index'
 
 const defaultTrue = { type: [Boolean, Function, String], default: true }
 

src/components/Table/ListTable/TableAction/index.vue

@@ -49,7 +49,7 @@ import LeftSide from './LeftSide.vue'
 import RightSide from './RightSide.vue'
 import AutoDataSearch from '@/components/Table/AutoDataSearch/index.vue'
 import DatetimeRangePicker from '@/components/Form/FormFields/DatetimeRangePicker.vue'
-import { getDaysAgo, getDaysFuture } from '@/utils/time'
+import { getDaysAgo, getDaysFuture } from '@/utils/common/time'
 import LabelSearch from '@/components/Table/ListTable/TableAction/LabelSearch.vue'
 
 const defaultTrue = { type: Boolean, default: true }
@@ -86,13 +86,11 @@ export default {
     },
     datePick: {
       type: Function,
-      default: (val) => {
-      }
+      default: val => {}
     },
     searchTable: {
       type: Function,
-      default: (val) => {
-      }
+      default: val => {}
     },
     selectedRows: {
       type: Array,
@@ -153,7 +151,7 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 $innerHeight: 28px;
 $headerHeight: 30px;
 
@@ -239,5 +237,4 @@ $headerHeight: 30px;
   display: block;
   padding: 5px 20px;
 }
-
 </style>

src/components/Table/ListTable/index.vue

@@ -9,7 +9,7 @@
     />
     <TableAction
       v-if="hasActions"
-      :class="{'filter-expand': filterExpand}"
+      :class="{ 'filter-expand': filterExpand }"
       :date-pick="handleDateChange"
       :has-quick-filter="iHasQuickFilter"
       :quick-filter-expand.sync="filterExpand"
@@ -34,7 +34,7 @@
 </template>
 
 <script>
-import { getResourceFromApiUrl } from '@/utils/jms'
+import { getResourceFromApiUrl } from '@/utils/jms/index'
 import deepmerge from 'deepmerge'
 import { mapGetters } from 'vuex'
 import IBox from '@/components/Common/IBox/index.vue'
@@ -42,8 +42,8 @@ import TableAction from './TableAction/index.vue'
 import Emitter from '@/mixins/emitter'
 import AutoDataTable from '../AutoDataTable/index.vue'
 import QuickFilter from './TableAction/QuickFilter.vue'
-import { getDayEnd, getDaysAgo } from '@/utils/time'
-import { ObjectLocalStorage } from '@/utils/common'
+import { getDayEnd, getDaysAgo } from '@/utils/common/time'
+import { ObjectLocalStorage } from '@/utils/common/index'
 
 export default {
   name: 'ListTable',
@@ -85,10 +85,13 @@ export default {
         date_from: getDaysAgo(7).toISOString(),
         date_to: this.$moment(getDayEnd()).add(1, 'day').toISOString()
       }
-      this.headerActions.datePicker = Object.assign({
-        dateStart: extraQuery.date_from,
-        dateEnd: extraQuery.date_to
-      }, this.headerActions.datePicker)
+      this.headerActions.datePicker = Object.assign(
+        {
+          dateStart: extraQuery.date_from,
+          dateEnd: extraQuery.date_to
+        },
+        this.headerActions.datePicker
+      )
     }
     if (this.$route.query.order) {
       extraQuery['order'] = this.$route.query.order
@@ -104,7 +107,9 @@ export default {
       tablePath: new URL(this.tableConfig.url || '', 'http://127.0.0.1').pathname,
       objStorage: new ObjectLocalStorage('filterExpand'),
       iFilterExpand: null,
-      reloadTable: _.debounce(this._reloadTable, 300)
+      reloadTable: _.debounce(this._reloadTable, 300),
+      searchQuery: {},
+      filterQuery: {}
     }
   },
   computed: {
@@ -167,7 +172,7 @@ export default {
         extraQuery: this.extraQuery
       })
       const checkRoot = !(this.$route.meta?.disableOrgsChange === true)
-      const checkPermAndRoot = (action) => {
+      const checkPermAndRoot = action => {
         if (!this.hasActionPerm(action)) {
           return this.$t('NoPermission')
         }
@@ -298,19 +303,26 @@ export default {
         this.$delete(this.extraQuery, key)
       }
     },
+    getMergedQuery() {
+      return { ...this.searchQuery, ...this.filterQuery }
+    },
     search(attrs) {
       const init = this.updateInitQuery(attrs)
       if (init) {
         return
       }
+      this.searchQuery = attrs
+      const merged = this.getMergedQuery()
       this.$log.debug('ListTable: search table', attrs)
       this.$emit('TagSearch', attrs)
-      this.$refs.dataTable?.$refs.dataTable?.search(attrs, true)
+      this.$refs.dataTable?.$refs.dataTable?.search(merged, true)
     },
     filter(attrs) {
+      this.filterQuery = attrs
+      const merged = this.getMergedQuery()
       this.$emit('TagFilter', attrs)
       this.$log.debug('ListTable: found filter change', attrs)
-      this.search(attrs)
+      this.$refs.dataTable?.$refs.dataTable?.search(merged, true)
     },
     hasActionPerm(action) {
       const permRequired = this.permissions[action]
@@ -381,6 +393,6 @@ export default {
 
 //修改颜色
 .el-button--text {
-  color: #409EFF;
+  color: #409eff;
 }
 </style>

src/components/Table/TableFormatters/AccountConnectFormatter.vue

@@ -60,6 +60,7 @@ export default {
               asset=${assetId}
               &account=${row.id}
               &protocol=${protocol}
+              &org_id=${this.$store.getters.currentOrg.id}
             `.replace(/\s+/g, '')
           },
           asset: null,

src/components/Table/TableFormatters/AccountInfoFormatter.vue

@@ -1,8 +1,9 @@
 <template>
   <el-popover
     :title="title"
-    placement="left-start"
+    placement="left"
     trigger="click"
+    width="300"
     @show="getAsyncItems"
   >
     <div v-if="!loading" class="detail-content">

src/components/Table/TableFormatters/ActionsFormatter.vue

@@ -23,7 +23,7 @@ const defaultPerformDelete = function({ row, col }) {
 
 const defaultUpdateCallback = function({ row, col }) {
   const id = row.id
-  let route = { params: { id: id }}
+  let route = { params: { id: id } }
   const updateRoute = this.colActions.updateRoute
 
   if (typeof updateRoute === 'object') {
@@ -39,7 +39,7 @@ const defaultUpdateCallback = function({ row, col }) {
 
 const defaultViewCallback = function({ row, col }) {
   const id = row.id
-  let route = { params: { id: id }}
+  let route = { params: { id: id } }
   const viewRoute = this.colActions.viewRoute
 
   if (typeof updateRoute === 'object') {
@@ -55,7 +55,7 @@ const defaultViewCallback = function({ row, col }) {
 
 const defaultCloneCallback = function({ row, col }) {
   const id = row.id
-  let route = { query: { clone_from: id }}
+  let route = { query: { clone_from: id } }
   const cloneRoute = this.colActions.cloneRoute
 
   if (typeof cloneRoute === 'object') {
@@ -82,7 +82,7 @@ const defaultDeleteCallback = function({ row, col, cellValue, reload }) {
     type: 'warning',
     confirmButtonClass: 'el-button--danger',
     showCancelButton: true,
-    beforeClose: async(action, instance, done) => {
+    beforeClose: async (action, instance, done) => {
       if (action !== 'confirm') return done()
       instance.confirmButtonLoading = true
       try {

src/components/Table/TableFormatters/ChoicesFormatter.vue

@@ -24,16 +24,17 @@ const formatterArgsDefault = {
     true: 'text-primary',
     false: 'text-danger'
   },
-  textChoices: {
-    true: i18n.t('Yes'),
-    false: i18n.t('No')
-  },
   getKey({ row, cellValue }) {
     return (cellValue && typeof cellValue === 'object') ? cellValue.value : cellValue
   },
   getText({ row, cellValue }) {
     const key = this.getKey({ row, cellValue })
-    return (cellValue && typeof cellValue === 'object') ? cellValue.label : this.textChoices[key] || cellValue
+    if (cellValue && typeof cellValue === 'object') {
+      return cellValue.label
+    }
+    if (key === true || key === 'true') return i18n.t('Yes')
+    if (key === false || key === 'false') return i18n.t('No')
+    return cellValue
   },
   getIcon({ row, cellValue }) {
     const key = this.getKey({ row, cellValue })

src/components/Table/TableFormatters/CopyableFormatter.vue

@@ -1,6 +1,6 @@
 <script>
 import BaseFormatter from './base.vue'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 
 export default {
   name: 'CopyableFormatter',