feat: update facelive license check

* 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

@@ -294,7 +294,8 @@ module.exports = {
         ],
         skipIfMatch: [
           'http://[^s]*',
-          '^[-\\w]+/[-\\w\\.]+$' // For import paths
+          '^[-\\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

@@ -1,11 +0,0 @@
-{
-  "printWidth": 100,
-  "tabWidth": 2,
-  "useTabs": false,
-  "singleQuote": true,
-  "semi": false,
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "arrowParens": "avoid",
-  "endOfLine": "lf"
-}

Dockerfile

@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20250805_081024 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` 配置正确。

package.json

@@ -1,150 +1,145 @@
 {
-    "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",
-        "elementui-lts": "^2.16.0",
-        "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-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",
-        "eslint": "^5.15.3",
-        "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",
-        "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.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"
+    ]
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

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/components/Apps/AccountCreateUpdateForm/const.js

@@ -15,10 +15,25 @@ export const accountFieldsMeta = (vm) => {
   }
 
   return {
+    nodes: {
+      component: Select2,
+      label: vm.$t('Node'),
+      el: {
+        value: [],
+        ajax: {
+          url: '/api/v1/assets/nodes/',
+          transformOption: (item) => {
+            return { label: item.full_value, value: item.id }
+          }
+        }
+      },
+      hidden: () => {
+        return !vm.addTemplate
+      }
+    },
     assets: {
       component: AssetSelect,
       label: vm.$t('Asset'),
-      rules: [Required],
       el: {
         multiple: false
       },
@@ -33,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

@@ -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/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
         }
       }
@@ -107,6 +107,10 @@ export default {
           this.$emit('add', true)
         }
       }).catch(error => {
+        if (error?.response?.data?.code === 'no_valid_assets') {
+          this.$message.error(error?.response?.data?.detail)
+          return
+        }
         this.iVisible = true
         this.handleResult(null, error)
       })

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/ViewSecret.vue

@@ -62,6 +62,7 @@ import Dialog from '@/components/Dialog/index.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
 import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
 import { encryptPassword } from '@/utils/secure'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'ShowSecretInfo',
@@ -111,6 +112,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      publicSettings: 'publicSettings'
+    }),
     secretTypeLabel() {
       return this.account['secret_type'].label || 'Password'
     },
@@ -146,7 +150,11 @@ export default {
       })
     },
     showSecretDialog() {
-      return this.$axios.get(this.url, { disableFlashErrorMsg: true }).then((res) => {
+      if (!this.publicSettings.SECURITY_ACCOUNT_SECRET_READ) {
+        this.$message.warning(this.$tc('AccountSecretReadDisabled'))
+        return
+      }
+      return this.$axios.get(this.url).then((res) => {
         this.secretInfo = res
         this.sshKeyFingerprint = res?.spec_info?.ssh_key_fingerprint || '-'
         this.showSecret = true
@@ -167,54 +175,54 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .item-textarea ::v-deep .el-textarea__inner {
-    height: 110px;
+.item-textarea ::v-deep .el-textarea__inner {
+  height: 110px;
+}
+
+.el-form-item {
+  border-bottom: 1px solid #EBEEF5;
+  padding: 5px 0;
+  margin-bottom: 0;
+
+  &:last-child {
+    border-bottom: none;
   }
 
-  .el-form-item {
-    border-bottom: 1px solid #EBEEF5;
-    padding: 5px 0;
-    margin-bottom: 0;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    ::v-deep .el-form-item__label {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      padding-right: 20px;
-      line-height: 30px;
-      word-break: keep-all;
-      overflow-wrap: break-word;
-      white-space: normal;
-    }
-
-    ::v-deep .el-form-item__content {
-      line-height: 30px;
-
-      pre {
-        margin: 0;
-      }
-    }
+  ::v-deep .el-form-item__label {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-right: 20px;
+    line-height: 30px;
+    word-break: keep-all;
+    overflow-wrap: break-word;
+    white-space: normal;
   }
 
-  ul {
-    margin: 0;
-  }
+  ::v-deep .el-form-item__content {
+    line-height: 30px;
 
-  li {
-    display: block;
-    font-size: 13px;
-    margin-bottom: 8px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    .title {
-      color: #303133;
-      font-weight: 500;
+    pre {
+      margin: 0;
     }
   }
+}
+
+ul {
+  margin: 0;
+}
+
+li {
+  display: block;
+  font-size: 13px;
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .title {
+    color: #303133;
+    font-weight: 500;
+  }
+}
 </style>

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/GrantedAssets/index.vue

@@ -109,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,8 +37,12 @@ export default {
 
       },
       headerActions: {
-        hasExport: false,
-        hasImport: false,
+        hasExport: true,
+        hasImport: true,
+        importOptions: {
+          encryptFields: [''], // 这里不加密 password，''只是为了保证数组有值
+          canImportUpdate: false
+        },
         hasCreate: true,
         hasSearch: true,
         hasRefresh: true,

src/components/Apps/ManyJsonTabs/AssetJsonTab.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'],

src/components/Apps/ManyJsonTabs/UserJsonTab.vue

@@ -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/UserConfirmDialog/index.vue

@@ -13,17 +13,12 @@
     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: 600px;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)"
@@ -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/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/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">
@@ -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/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,20 +1,12 @@
 <template>
   <div>
-    <echarts
+    <Echart
       ref="echarts"
       :options="options"
       :autoresize="true"
       theme="light"
-      :class="{'disabled-when-print': !!dataUrl}"
       @finished="genSnapshot"
     />
-    <img
-      v-if="dataUrl"
-      :src="dataUrl"
-      class="enabled-when-print"
-      style="display: none;width: 100%;"
-      alt="chart snapshot"
-    >
   </div>
 </template>
 
@@ -22,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,
@@ -285,14 +279,4 @@ export default {
   width: 100%;
   height: 272px;
 }
-
-@media print {
-  .disabled-when-print {
-    display: none !important;
-  }
-  .enabled-when-print {
-    display: block !important;
-    width: 100% !important;
-  }
-}
 </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/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: {

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: {
@@ -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,15 +185,69 @@ export default {
     cleanFormValue() {
       this._cleanFormValue(this.iForm, this.remoteMeta)
     },
-    setFieldError(name, error) {
-      error = error.replace(/[。.]+$/, '')
-      const field = this.totalFields.find((v) => v.prop === name)
-      if (!field) {
-        return
+    _getElFormInstance() {
+      try {
+        return this.$refs?.dataForm?.$refs?.form?.$refs?.elForm || null
+      } catch (e) {
+        return null
       }
-      if (typeof error === 'string') {
-        field.el.errors = error
-        field.attrs.error = error
+    },
+    /**
+     * @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) {
+      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' : ''
+        }
+      }
+      // 不写入 totalFields，避免触发 innerContent 变化导致表单值被覆盖
+      this.$set(this.serverErrors, name, error)
+    },
+    setErrors(errors) {
+      const mapped = {}
+      Object.entries(errors || {}).forEach(([k, v]) => {
+        let msg = v
+        console.log(k, v)
+        // v是数组并且数组都是字符串，则拼接为字符串
+        if (Array.isArray(v) && v.every(item => typeof item === 'string')) msg = v.join('; ')
+        // 处理 [{"port":["请确保该值小于或者等于 65535。"]},{},{}] 这种情况
+        else if (Array.isArray(v) && v.every(item => _.isPlainObject(item))) {
+          const subMsg = []
+          v.forEach((subItem) => {
+            Object.values(subItem).forEach((subMsgArr) => {
+              if (Array.isArray(subMsgArr)) {
+                subMsg.push(...subMsgArr)
+              }
+            })
+          })
+          msg = subMsg.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/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" @submit.native.prevent>
+  <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

@@ -11,6 +11,7 @@
       :label-width="labelWidth"
       :style="{ '--label-width': labelWidth }"
       v-bind="$attrs"
+      :server-errors="serverErrors"
       v-on="$listeners"
     >
       <!-- slot 透传 -->
@@ -55,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"
@@ -121,6 +122,10 @@ export default {
       type: Boolean,
       default: true
     },
+    serverErrors: {
+      type: Object,
+      default: () => ({})
+    },
     fields: {
       type: Array,
       default: () => []
@@ -226,6 +231,9 @@ export default {
     },
     getFormValue() {
       return this.$refs.form.getFormValue()
+    },
+    iHidden(item) {
+      return typeof item.hidden === 'function' ? item.hidden() : item.hidden
     }
   }
 }
@@ -236,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;
   }

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/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/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>
 
@@ -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/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/DrawerListTable/index.vue

@@ -107,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
         }
       }
@@ -223,7 +223,6 @@ export default {
       }
 
       title = actionLabel + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
-
       return title
     },
     getDefaultDrawer(action) {
@@ -295,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) {
@@ -312,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()

src/components/Table/InfoCardTable/Panel.vue

@@ -4,15 +4,11 @@
       <div class="panel-title">
         <el-avatar :src="imageUrl" shape="square" />
         <div class="title-display">
-          <span class="name">{{ object.name }}</span>
+          <p class="name" :title="object.name">{{ object.name }}</p>
           <span class="comment">{{ object.provider.label }}</span>
         </div>
       </div>
-      <div
-        v-if="iActions.length !== 0"
-        class="panel-actions"
-        @click="handleClick($event)"
-      >
+      <div v-if="iActions.length !== 0" class="panel-actions" @click="handleClick($event)">
         <el-dropdown>
           <el-button size="mini">
             <i class="el-icon-more el-icon--right" />
@@ -64,21 +60,19 @@ export default {
     },
     getImage: {
       type: Function,
-      default: (obj) => ''
+      default: obj => ''
     },
     getInfos: {
       type: Function,
-      default: (obj) => []
+      default: obj => []
     },
     handleUpdate: {
       type: Function,
-      default: () => {
-      }
+      default: () => {}
     },
     onView: {
       type: Function,
-      default: () => {
-      }
+      default: () => {}
     }
   },
   data() {
@@ -152,13 +146,13 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
 div.info-panel {
   display: flex;
   flex-direction: column;
   padding: 10px;
-  gap: 10px;
+  gap: unset;
   cursor: pointer;
+  height: initial !important;
 
   .panel-header {
     padding: 10px 20px;
@@ -175,12 +169,22 @@ div.info-panel {
 
       .title-display {
         display: flex;
+        flex-basis: 225px;
         flex-direction: column;
-        text-align: left;
+        justify-content: center;
+        align-items: start;
+        max-width: 225px;
+        min-width: 0;
+        overflow-x: hidden;
 
         .name {
           font-size: 1.1em;
           color: #555555;
+          text-overflow: ellipsis;
+          overflow: hidden;
+          white-space: nowrap;
+          width: 100%;
+          margin: unset;
         }
 
         .comment {

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"
       />
@@ -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

@@ -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/index.vue

@@ -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"
@@ -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
@@ -169,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')
         }
@@ -390,6 +393,6 @@ export default {
 
 //修改颜色
 .el-button--text {
-  color: #409EFF;
+  color: #409eff;
 }
 </style>

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/SecretViewerFormatter.vue

@@ -38,6 +38,7 @@
 <script>
 import { copy, downloadText } from '@/utils/common/index'
 import BaseFormatter from '@/components/Table/TableFormatters/base.vue'
+import { mapGetters } from 'vuex'
 
 export default {
   name: 'SecretViewerFormatter',
@@ -69,6 +70,9 @@ export default {
     }
   },
   computed: {
+    ...mapGetters({
+      publicSettings: 'publicSettings'
+    }),
     hasShow: function() {
       return this.formatterArgs.hasShow
     },
@@ -140,6 +144,10 @@ export default {
   },
   methods: {
     async getAccountSecret() {
+      if (!this.publicSettings.SECURITY_ACCOUNT_SECRET_READ) {
+        this.$message.warning(this.$tc('AccountSecretReadDisabled'))
+        return
+      }
       if (this.formatterArgs.secretFrom === 'cellValue' || this.getIt) {
         return
       }
@@ -178,48 +186,48 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-  .content {
-    display: inline-block;
-    width: 100%;
+.content {
+  display: inline-block;
+  width: 100%;
+  overflow: hidden;
+  //white-space: nowrap;
+  text-overflow: ellipsis;
+  font-size: 13px;
+
+  .text {
+    flex: 1;
+    display: inline;
+    margin: 0;
+    padding: 0;
     overflow: hidden;
-    //white-space: nowrap;
+    white-space: nowrap;
     text-overflow: ellipsis;
+  }
+
+  .action {
     font-size: 13px;
+    cursor: pointer;
+    margin-left: 1px;
+    display: inline;
 
-    .text {
-      flex: 1;
-      display: inline;
-      margin: 0;
-      padding: 0;
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+    &.right {
+      float: right;
     }
 
-    .action {
-      font-size: 13px;
-      cursor: pointer;
-      margin-left: 1px;
-      display: inline;
+    .fa {
+      margin-right: 5px;
 
-      &.right {
-        float: right;
-      }
-
-      .fa {
-        margin-right: 5px;
-
-        &:hover {
-          color: var(--color-primary);
-        }
+      &:hover {
+        color: var(--color-primary);
       }
     }
   }
+}
 
-  .edit-input ::v-deep input {
-    border-left: none;
-    border-right: none;
-    border-top: none;
-    height: 30px;
-  }
+.edit-input ::v-deep input {
+  border-left: none;
+  border-right: none;
+  border-top: none;
+  height: 30px;
+}
 </style>

src/components/Table/TagSearch/index.vue

@@ -16,7 +16,7 @@
       closable
       size="small"
       type="info"
-      @click="handleTagClick(v,k)"
+      @click="handleTagClick(v, k)"
       @close.stop="handleTagClose(k)"
     >
       <strong v-if="v.label">{{ v.label + ':' }}</strong>
@@ -40,7 +40,6 @@
     />
     <span :class="isFocus ? 'is-focus ' : ''" class="keydown-focus">/</span>
   </div>
-
 </template>
 
 <script>
@@ -49,8 +48,7 @@ export default {
   props: {
     config: {
       type: Object,
-      default: () => {
-      }
+      default: () => {}
     },
     options: {
       type: Array,
@@ -90,13 +88,14 @@ export default {
     },
     filterMaps() {
       const data = {}
+      const keyword = 'search'
       for (let key in this.filterTags) {
         const value = this.filterTags[key]['value']
         if (key === '') {
-          key = 'search'
+          key = keyword
         }
-        if (key.startsWith('search')) {
-          data['search'] = (data.search ? data.search + ',' : '') + value
+        if (key.startsWith(keyword)) {
+          data[keyword] = (data[keyword] ? data[keyword] + ',' : '') + value
         } else {
           data[key] = value
         }
@@ -138,7 +137,7 @@ export default {
         this.emptyCount = 1
       }
     },
-    '$route'(to, from) {
+    $route(to, from) {
       if (from.query !== to.query) {
         this.filterTags = {}
         if (to.query && Object.keys(to.query).length) {
@@ -169,7 +168,7 @@ export default {
     // 获取url中的查询条件，判断是不是包含在当前查询条件里
     checkInTableColumns(options) {
       const searchFieldOptions = {}
-      const queryInfoValues = options.map((i) => i.value)
+      const queryInfoValues = options.map(i => i.value)
       const routeQuery = this.getUrlQuery ? this.$route?.query : {}
       const routeQueryKeysLength = Object.keys(routeQuery).length
       if (routeQueryKeysLength < 1) return searchFieldOptions
@@ -244,12 +243,10 @@ export default {
         delete routeFilter.search
       }
       const asFilterTags = _.cloneDeep(this.filterTags)
-      setTimeout(() => {
-        this.filterTags = {
-          ...asFilterTags,
-          ...routeFilter
-        }
-      }, 100)
+      this.filterTags = {
+        ...asFilterTags,
+        ...routeFilter
+      }
     },
     getValueLabel(key, value) {
       for (const field of this.options) {

src/components/Table/TreeTable/index.vue

@@ -8,7 +8,7 @@
         class="left"
       >
         <span v-if="component === 'AutoDataZTree'" class="title">
-          {{ $t('AssetTree') }}
+          {{ title }}
         </span>
         <component
           :is="component"
@@ -111,6 +111,13 @@ export default {
     headerActions: {
       type: Object,
       default: () => ({})
+    },
+    title: {
+      // eslint-disable-next-line vue/require-prop-type-constructor
+      type: String,
+      default() {
+        return this.$t('AssetTree')
+      }
     }
   },
   data() {

src/components/Tree/AutoDataZTree/index.vue

@@ -421,12 +421,8 @@ export default {
   display: inline-block;
 }
 
-.data-z-tree {
-  ::v-deep {
-    .icon {
-      width: 10px;
-      margin-right: 3px;
-    }
-  }
+.data-z-tree ::v-deep .icon {
+  width: 10px;
+  margin-right: 3px;
 }
 </style>

src/components/Widgets/Announcement/index.vue

@@ -1,20 +1,52 @@
 <template>
-  <el-alert
-    v-if="enabled && !isViewed()"
-    :center="false"
-    :title="title"
-    class="announcement"
-    type="success"
-    @close="onClose"
-  >
-    <MarkDown :value="announcement.content" class="markdown" />
-    <span v-if="announcement.link">
-      <el-link :href="announcement.link" class="link-more" target="_blank" type="info">
-        {{ $t('ViewMore') }}
-      </el-link>
-      <i class="fa fa-external-link icon" />
-    </span>
-  </el-alert>
+  <div>
+    <el-dialog
+      v-if="enabled && showModal"
+      :visible.sync="dialogVisible"
+      :title="title"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      width="35%"
+      class="announcement-dialog"
+      center
+    >
+      <div class="announcement-content">
+        <div class="content-wrapper">
+          <MarkDown :value="announcement.content" class="markdown" />
+        </div>
+        <div v-if="announcement.link" class="link-section">
+          <el-link :href="announcement.link" class="link-more" target="_blank" type="info">
+            {{ $t('ViewMore') }}
+          </el-link>
+          <i class="fa fa-external-link icon" />
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="onModalConfirm">
+          {{ $t('Confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <el-alert
+      v-if="enabled && showAlert"
+      :center="false"
+      :title="title"
+      class="announcement"
+      type="success"
+      @close="onAlertClose"
+    >
+      <MarkDown :value="announcement.content" class="markdown" />
+      <span v-if="announcement.link">
+        <el-link :href="announcement.link" class="link-more" target="_blank" type="info">
+          {{ $t('ViewMore') }}
+        </el-link>
+        <i class="fa fa-external-link icon" />
+      </span>
+    </el-alert>
+  </div>
 </template>
 
 <script>
@@ -26,7 +58,11 @@ export default {
   components: { MarkDown },
   data() {
     return {
-      viewedKey: 'AnnouncementViewed'
+      viewedKey: 'AnnouncementViewed',
+      modalConfirmedKey: 'AnnouncementModalConfirmed',
+      dialogVisible: false,
+      modalConfirmed: false,
+      alertViewed: false
     }
   },
   computed: {
@@ -58,48 +94,200 @@ export default {
       const start = new Date(this.announcement.date_start)
       const end = new Date(this.announcement.date_end)
       return now >= start && now <= end
+    },
+    showModal() {
+      return !this.modalConfirmed
+    },
+    showAlert() {
+      return this.modalConfirmed && !this.alertViewed
     }
   },
+  watch: {
+    enabled: {
+      handler(val) {
+        if (val) {
+          this.initializeState()
+          this.checkAndShowDialog()
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.initializeState()
+    this.checkAndShowDialog()
+  },
   methods: {
-    onClose() {
-      localStorage.setItem(this.viewedKey, this.announcement.id)
+    initializeState() {
+      this.modalConfirmed = this.isModalConfirmed()
+      this.alertViewed = this.isAlertViewed()
     },
-    isViewed() {
+    checkAndShowDialog() {
+      if (this.enabled && this.showModal) {
+        this.dialogVisible = true
+      }
+    },
+    onModalConfirm() {
+      localStorage.setItem(this.modalConfirmedKey, this.announcement.id)
+      this.modalConfirmed = true
+      this.dialogVisible = false
+
+      this.$emit('announcement-modal-confirmed', {
+        id: this.announcement.id,
+        subject: this.announcement.subject,
+        confirmedAt: new Date().toISOString()
+      })
+    },
+    onAlertClose() {
+      localStorage.setItem(this.viewedKey, this.announcement.id)
+      this.alertViewed = true
+
+      this.$emit('announcement-read', {
+        id: this.announcement.id,
+        subject: this.announcement.subject,
+        readAt: new Date().toISOString()
+      })
+    },
+    isModalConfirmed() {
+      const confirmedId = localStorage.getItem(this.modalConfirmedKey)
+      return confirmedId === this.announcement.id
+    },
+    isAlertViewed() {
       const viewedId = localStorage.getItem(this.viewedKey)
       return viewedId === this.announcement.id
+    },
+    isViewed() {
+      return this.isAlertViewed()
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.announcement ::v-deep .el-alert__content {
-  width: 100%;
+.announcement-dialog ::v-deep .el-dialog {
+  border-radius: 5px;
 }
 
-.announcement-main {
-  word-wrap: break-word;
-  white-space: pre-wrap;
+.announcement-dialog ::v-deep .el-dialog__wrapper {
+  backdrop-filter: blur(4px);
+}
+
+@media (max-width: 768px) {
+  .announcement-dialog ::v-deep .el-dialog {
+    width: 95% !important;
+    margin: 0 auto;
+  }
+
+  .announcement-content {
+    padding: 20px 25px 15px;
+
+    .content-wrapper {
+      padding: 15px;
+    }
+  }
+
+  .dialog-footer {
+    .el-button {
+      padding: 10px;
+      font-size: 14px;
+    }
+  }
+}
+
+.announcement-dialog ::v-deep .el-dialog__header {
+  border-radius: 8px 8px 0 0;
+  padding: 10px 20px 10px 20px;
+
+  .el-dialog__title {
+    color: black;
+    font-weight: 600;
+  }
+}
+
+.announcement-dialog ::v-deep .el-dialog__body {
+  padding: 0;
+}
+
+.announcement-content {
+  padding: 25px 30px 20px;
+
+  .link-section {
+    margin-top: 20px;
+    padding-top: 15px;
+    border-top: 1px solid #e4e7ed;
+    text-align: center;
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  .el-button {
+    padding: 10px 20px;
+    font-size: 14px;
+  }
+}
+
+.announcement ::v-deep .el-alert__content {
+  width: 100%;
 }
 
 .icon {
   vertical-align: text-bottom;
   color: var(--color-info) !important;
+  margin-left: 5px;
 }
 
 .markdown {
   background-color: transparent !important;
+  font-size: 14px;
+  line-height: 1.8;
+  color: #2c3e50;
 
   .link-more {
-    font-size: 10px;
-    margin-left: 10px;
-    border-bottom: solid 1px;
-    color: var(--color-info) !important;
+    font-size: 13px;
+    color: #409eff !important;
+    text-decoration: none;
+    padding: 4px 8px;
+    border-radius: 4px;
+    background: rgba(64, 158, 255, 0.1);
+    transition: all 0.3s;
+
+    &:hover {
+      background: #409eff;
+      color: white !important;
+    }
   }
 
-  h1, h2, h3, h4, h5 {
-    margin-top: 0;
-    margin-bottom: 10px;
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0 0 15px 0;
+    color: #303133;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+
+  h2 {
+    font-size: 18px;
+  }
+
+  h3 {
+    font-size: 16px;
+  }
+
+  h4, h5, h6 {
+    font-size: 14px;
+  }
+
+  p {
+    margin-bottom: 16px;
+    line-height: 1.8;
+    color: #4b5563;
   }
 }
 </style>

src/components/Widgets/Breadcrumb/index.vue

@@ -33,7 +33,7 @@ export default {
       const first = matched[0]
 
       if (!this.isDashboard(first)) {
-        matched = [{ path: '/dashboard', meta: { title: 'dashboard' }}].concat(matched)
+        matched = [{ path: '/dashboard', meta: { title: 'dashboard' } }].concat(matched)
       }
 
       this.levelList = matched.filter(item => item.meta && item.meta.title && item.meta.breadcrumb !== false)

src/components/Widgets/Icon/index.vue

@@ -1,6 +1,6 @@
 <script>
 export default {
-  name: 'Index',
+  name: 'Icon',
   props: {
     icon: {
       type: String,

src/components/index.js

@@ -37,3 +37,4 @@ export { default as Pagination } from './Table/Pagination'
 export { default as Tooltip } from './Widgets/Tooltip'
 export { default as ResourceActivity } from './Apps/ResourceActivity'
 export { default as MarkDown } from './Widgets/MarkDown'
+export { default as VariablesHelpTextDialog } from './Apps/VariablesHelpTextDialog'

src/i18n/i18n.js

@@ -1,6 +1,6 @@
 // i18n.js
 import Vue from 'vue'
-import locale from 'elementui-lts/lib/locale'
+import locale from 'element-ui/lib/locale'
 import VueI18n from 'vue-i18n'
 import messages from './langs'
 import date from './date'
@@ -54,7 +54,7 @@ export async function fetchTranslationsFromAPI() {
       }
     }
   } catch (error) {
-    alert(error)
+    console.log(error)
   } finally {
     await store.dispatch('app/setI18nLoaded', true)
   }

src/i18n/langs/index.js

@@ -1,45 +1,44 @@
-import zhLocale from 'elementui-lts/lib/locale/lang/zh-CN'
-import zhTWLocale from 'elementui-lts/lib/locale/lang/zh-TW'
-import enLocale from 'elementui-lts/lib/locale/lang/en'
-import jaLocale from 'elementui-lts/lib/locale/lang/ja'
-import ptBrLocale from 'elementui-lts/lib/locale/lang/pt-br'
-import esLocale from 'elementui-lts/lib/locale/lang/es'
-import ruLocale from 'elementui-lts/lib/locale/lang/ru-RU'
-import koLocale from 'elementui-lts/lib/locale/lang/ko'
 import zh from './zh.json'
-import zhHant from './zh_hant.json'
+import zh_hant from './zh_hant.json'
 import en from './en.json'
 import ja from './ja.json'
 
-const messages = {
-  zh: {
-    ...zhLocale,
-    ...zh
-  },
-  zh_hant: {
-    ...zhTWLocale,
-    ...zhHant
-  },
-  en: {
-    ...enLocale,
-    ...en
-  },
-  ja: {
-    ...jaLocale,
-    ...ja
-  },
-  pt_br: {
-    ...ptBrLocale
-  },
-  es: {
-    ...esLocale
-  },
-  ru: {
-    ...ruLocale
-  },
-  ko: {
-    ...koLocale
+// Map app locales to Element-UI locale file names
+const elementLocaleNameByAppLocale = {
+  zh: 'zh-CN',
+  zh_hant: 'zh-TW',
+  en: 'en',
+  ja: 'ja',
+  pt_br: 'pt-br',
+  es: 'es',
+  ru: 'ru-RU',
+  ko: 'ko',
+  vi: 'vi'
+}
+
+function loadElementLocale(localeName) {
+  try {
+    // eslint-disable-next-line import/no-dynamic-require, global-require
+    const mod = require(`element-ui/lib/locale/lang/${localeName}`)
+    return (mod && (mod.default || mod)) || {}
+  } catch (e) {
+    return {}
   }
 }
 
+const appLocaleMessages = {
+  zh,
+  zh_hant,
+  en,
+  ja
+}
+
+const messages = Object.keys(elementLocaleNameByAppLocale).reduce((acc, appLocale) => {
+  const elementLocaleName = elementLocaleNameByAppLocale[appLocale]
+  const elementLocale = loadElementLocale(elementLocaleName)
+  const appMessages = appLocaleMessages[appLocale] || {}
+  acc[appLocale] = { ...elementLocale, ...appMessages }
+  return acc
+}, {})
+
 export default messages

src/icons/svg/access-token.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><!--!Font Awesome Free v5.15.4 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path d="M512 176.001C512 273.203 433.202 352 336 352c-11.22 0-22.19-1.062-32.827-3.069l-24.012 27.014A23.999 23.999 0 0 1 261.223 384H224v40c0 13.255-10.745 24-24 24h-40v40c0 13.255-10.745 24-24 24H24c-13.255 0-24-10.745-24-24v-78.059c0-6.365 2.529-12.47 7.029-16.971l161.802-161.802C163.108 213.814 160 195.271 160 176 160 78.798 238.797.001 335.999 0 433.488-.001 512 78.511 512 176.001zM336 128c0 26.51 21.49 48 48 48s48-21.49 48-48-21.49-48-48-48-48 21.49-48 48z"/></svg>

src/layout/components/AppMain.vue

@@ -78,6 +78,3 @@ export default {
   }
 }
 </style>
-
-<style lang="scss">
-</style>

src/layout/components/GenericCreateUpdateForm/index.vue

@@ -225,24 +225,9 @@ export default {
       default(error, method, vm) {
         const response = error.response
         const data = response.data
-        if (response.status === 400) {
-          for (const key of Object.keys(data)) {
-            let err = ''
-            let errorTips = data[key]
-            if (errorTips instanceof Array) {
-              errorTips = _.filter(errorTips, (item) => Object.keys(item).length > 0)
-              for (const i of errorTips) {
-                if (i instanceof Object) {
-                  err += i?.port?.join(',')
-                } else {
-                  err += i
-                }
-              }
-            } else {
-              err = errorTips
-            }
-            this.$refs.form.setFieldError(key, err)
-          }
+        if (response.status === 400 && data && typeof data === 'object') {
+          // 覆盖式设置错误映射，避免触发表单内容重建
+          this.$refs.form.setErrors(data)
         }
         this.$emit('performError', data)
       }

src/layout/components/GenericUpdateFormDialog/index.vue

@@ -137,14 +137,15 @@ export default {
             this.$emit('submitError', error)
             const response = error.response
             const data = response.data
-            if (response.status === 400) {
-              for (const key of Object.keys(data)) {
-                let value = data[key]
-                if (value instanceof Array) {
-                  value = value.join(';')
-                }
-                this.$refs.form.setFieldError(key, value)
-              }
+            // 不要逐个设置字段的 attrs.error 或改动 fields 引用。
+            // 这样会触发表单 content 重建，导致用户已输入的内容被覆盖/清空，
+            // 且可能出现只能显示一个字段错误的现象。
+            // 这里改为使用 AutoDataForm 暴露的 setErrors(errors) 覆盖式设置：
+            // - 直接同步到 UI 的 el-form-item.validateMessage
+            // - 支持同时显示多个字段错误
+            // - 不修改 fields/attrs 引用，避免输入丢失
+            if (response.status === 400 && data && typeof data === 'object') {
+              this.$refs.form.setErrors(data)
             }
           })
         }

src/layout/components/NavHeader/AccountDropdown.vue

@@ -71,7 +71,7 @@ export default {
     },
     async logout() {
       const currentOrg = this.$store.getters.currentOrg
-      if (currentOrg.autoEnter || currentOrg.is_system) {
+      if (currentOrg && (currentOrg.autoEnter || currentOrg.is_system)) {
         await this.$store.dispatch('users/setCurrentOrg', this.$store.getters.preOrg)
       }
       window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`

src/layout/components/NavHeader/Organization.vue

@@ -4,6 +4,7 @@
     :placeholder="$tc('Select')"
     :value="currentOrgId"
     class="org-select"
+    :style="{ width: selectWidth }"
     filterable
     popper-class="switch-org"
     @change="changeOrg"
@@ -54,7 +55,8 @@ export default {
   },
   data() {
     return {
-      orgOption: []
+      orgOption: [],
+      selectWidth: 'auto'
     }
   },
   computed: {
@@ -63,6 +65,17 @@ export default {
       'usingOrgs',
       'currentViewRoute'
     ]),
+    currentOrgDisplayName() {
+      const currentOrgId = this.currentOrg?.id
+      if (!currentOrgId) {
+        return this.$tc('Select')
+      }
+      const matchedOrg = this.usingOrgs.find(item => item.id === currentOrgId)
+      if (matchedOrg?.name) {
+        return matchedOrg.name
+      }
+      return this.currentOrg.name || this.$tc('Select')
+    },
     orgActionsGroup() {
       const orgActions = {
         label: this.$t('OrganizationList'),
@@ -107,7 +120,53 @@ export default {
       return currentOrgId
     }
   },
+  watch: {
+    currentOrgDisplayName() {
+      this.updateWidth()
+    }
+  },
+  mounted() {
+    this.updateWidth()
+  },
   methods: {
+    updateWidth() {
+      this.$nextTick(() => {
+        // 创建临时元素来测量文本宽度
+        const tempSpan = document.createElement('span')
+        tempSpan.style.visibility = 'hidden'
+        tempSpan.style.position = 'absolute'
+        tempSpan.style.whiteSpace = 'nowrap'
+        tempSpan.style.fontSize = '14px'
+        tempSpan.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+        tempSpan.style.fontWeight = 'normal'
+        tempSpan.style.letterSpacing = 'normal'
+
+        // 获取当前组织显示名称
+        const orgName = this.currentOrgDisplayName
+
+        tempSpan.textContent = orgName
+        document.body.appendChild(tempSpan)
+
+        // 测量文本宽度
+        const textWidth = tempSpan.offsetWidth
+
+        // 固定空间：左侧图标 + padding + 右侧箭头
+        const iconWidth = 15 // 左侧图标
+        const paddingWidth = 35 // 左右 padding
+        const arrowWidth = 20 // 右侧箭头
+        const totalWidth = textWidth + iconWidth + paddingWidth + arrowWidth
+
+        // 设置合理的边界
+        const minWidth = 100
+        const maxWidth = 400
+        const finalWidth = Math.max(minWidth, Math.min(maxWidth, totalWidth))
+
+        this.selectWidth = finalWidth + 'px'
+
+        // 清理临时元素
+        document.body.removeChild(tempSpan)
+      })
+    },
     changeOrg(orgId) {
       const org = this.usingOrgs.find(item => item.id === orgId)
 
@@ -121,6 +180,7 @@ export default {
         default:
           orgUtil.changeOrg(org, true, this)
       }
+      this.updateWidth()
     }
   }
 }

src/layout/components/NavHeader/Search.vue

@@ -0,0 +1,637 @@
+<template>
+  <span ref="root" class="global-search">
+    <!-- 搜索触发按钮 -->
+    <div class="search-trigger" @click="openPanel">
+      <el-input
+        v-model="search"
+        :placeholder="$t('Search')"
+        class="search-input"
+        readonly
+        prefix-icon="el-icon-search"
+        @keydown.esc.prevent="closePanel"
+        @clear="clearSearch"
+      >
+        <template slot="suffix">
+          <span class="search-shortcut">{{ shortcutText }}</span>
+        </template>
+      </el-input>
+    </div>
+
+    <!-- 搜索模态框 -->
+    <el-dialog
+      :visible.sync="isOpen"
+      :close-on-click-modal="true"
+      :close-on-press-escape="true"
+      :append-to-body="true"
+      custom-class="search-modal"
+      width="70%"
+      @close="closePanel"
+    >
+      <div class="search-modal-content">
+        <!-- 搜索框 -->
+        <div class="search-input-wrapper">
+          <el-input
+            ref="panelSearchInput"
+            v-model="search"
+            :placeholder="$t('Search')"
+            :clearable="true"
+            size="large"
+            prefix-icon="el-icon-search"
+            @input="onInput"
+            @keydown.enter.prevent="onEnter"
+          />
+        </div>
+
+        <!-- 搜索结果内容 -->
+        <div class="search-results">
+          <div v-if="loading" class="section loading">{{ $t('Loading') }}...</div>
+
+          <template v-if="showHistory">
+            <div class="section-title">
+              <span>{{ $t('History') }}</span>
+              <el-link class="clear-history-btn" @click="clearHistory">
+                {{ $t('Clear') }}
+              </el-link>
+            </div>
+            <ul class="list">
+              <li
+                v-for="(item, index) in history"
+                :key="'h-' + index"
+                class="item"
+                @click="applyHistory(item)"
+              >
+                <i class="el-icon-time icon" />
+                <span class="label">{{ item.q }}</span>
+                <i class="el-icon-arrow-right go" />
+              </li>
+            </ul>
+          </template>
+
+          <template v-if="routeSuggestions.length">
+            <div class="section-title">{{ $t('Routes') }}</div>
+            <ul class="list">
+              <li
+                v-for="route in routeSuggestions"
+                :key="'r-' + route.name + route.path"
+                class="item"
+                @click="navigateRoute(route)"
+              >
+                <i class="el-icon-location-outline icon" />
+                <span class="label">{{ route.title || route.name || route.path }}</span>
+                <span class="sub">{{ route.path }}</span>
+              </li>
+            </ul>
+          </template>
+
+          <template v-if="options.length">
+            <div v-for="group in options" :key="'g-' + group.label" class="section">
+              <div class="section-title">{{ group.label }}</div>
+              <ul class="list">
+                <li
+                  v-for="item in group.options"
+                  :key="item.value"
+                  class="item"
+                  @click="handleSearch(item)"
+                >
+                  <Icon :icon="iconMap[item.model] || 'el-icon-document'" class="icon" />
+                  <span class="label">{{ item.name }}</span>
+                  <span class="sub">{{ item.content }}</span>
+                </li>
+              </ul>
+            </div>
+          </template>
+
+          <div v-if="search && isEmpty" class="section empty">
+            {{ $t('NoData') }}
+          </div>
+
+          <div v-if="!search && history.length === 0" class="section placeholder">
+            <div class="placeholder-content">
+              <div class="supported-types">
+                <div class="types-title">{{ $t('SupportedTypes') }}:</div>
+                <div class="types-list">
+                  <span v-for="(icon, type) in iconMap" :key="type" class="type-item">
+                    <Icon :icon="icon" class="type-icon" />
+                    {{ $t(type) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </el-dialog>
+  </span>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import { ObjectLocalStorage } from '@/utils/common'
+import Icon from '@/components/Widgets/Icon/index.vue'
+
+export default {
+  name: 'Search',
+  components: {
+    Icon
+  },
+  data() {
+    return {
+      search: '',
+      loading: false,
+      options: [],
+      isOpen: false,
+      history: [],
+      routeSuggestions: [],
+      routes: [],
+      iconMap: {
+        'Account': 'accounts',
+        'Asset': 'assets',
+        'User': 'user-o',
+        'UserGroup': 'user-group',
+        'AssetPermission': 'permission'
+      },
+      historyStore: new ObjectLocalStorage('globalSearchHistory')
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'viewRoutes'
+    ]),
+    isEmpty() {
+      return !this.routeSuggestions.length && this.options.length === 0
+    },
+    showHistory() {
+      return this.history.length > 0 && !this.search
+    },
+    shortcutText() {
+      return this.isMac ? '⌘K' : 'Ctrl+K'
+    },
+    isMac() {
+      return navigator.platform.toUpperCase().indexOf('MAC') >= 0
+    }
+  },
+  mounted() {
+    this.loadHistory()
+    this.buildRouteSuggestions()
+    this.bindKeyboardShortcut()
+  },
+  beforeDestroy() {
+    this.unbindKeyboardShortcut()
+  },
+  methods: {
+    openPanel() {
+      this.isOpen = true
+      this.buildRouteSuggestions()
+      this.$nextTick(() => {
+        this.$refs.panelSearchInput?.focus()
+      })
+    },
+    closePanel() {
+      this.isOpen = false
+    },
+    onInput() {
+      this.openPanel()
+      this.debouncedQuery()
+    },
+    clearSearch() {
+      this.search = ''
+      this.options = []
+      this.buildRouteSuggestions()
+    },
+    onEnter() {
+      if (this.options.length > 0) {
+        this.handleSearch(this.options[0].options[0])
+      }
+    },
+    debouncedQuery: _.debounce(function() {
+      this.searchQuery(this.search)
+    }, 300),
+    async searchQuery(q) {
+      if (!q) {
+        this.options = []
+        return
+      }
+      this.loading = true
+      const url = '/api/v1/search/?q=' + q
+      try {
+        const res = await this.$axios.get(url)
+        let options = res || []
+        options = _.groupBy(res, 'model_label')
+        this.options = Object.keys(options).map(key => ({
+          label: key,
+          options: options[key]
+        }))
+      } catch (error) {
+        console.error('Search error:', error)
+        this.options = []
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch(item) {
+      const route = {
+        name: item.model + 'Detail',
+        params: { id: item.id }
+      }
+      this.addToHistory(this.search)
+      this.$router.push(route)
+      this.closePanel()
+    },
+    navigateRoute(route) {
+      this.$router.push(route.path)
+      this.closePanel()
+    },
+    filterRouteSuggestions(q) {
+      if (!q) {
+        this.routeSuggestions = []
+        return
+      }
+      this.routeSuggestions = this.routes.filter(r => {
+        const title = r.title || r.name || r.path
+        return title.toLowerCase().includes(q.toLowerCase()) || r.path.toLowerCase().includes(q.toLowerCase())
+      }).slice(0, 5)
+    },
+    buildRouteSuggestions() {
+      if (this.routes.length > 0) {
+        return
+      }
+      const allRoutes = this.viewRoutes
+      const flat = []
+      const walk = (routes, parentPath = '') => {
+        for (const r of routes) {
+          const path = parentPath + r.path
+          if (r.path && r.path !== '/' && !r.hidden) {
+            flat.push({
+              name: r.name,
+              path: path,
+              title: r.meta?.title
+            })
+          }
+
+          if (r.children && r.children.length) {
+            walk(r.children, path)
+          }
+        }
+      }
+      walk(allRoutes)
+      this.routes = flat
+    },
+    loadHistory() {
+      this.history = (this.historyStore.get('list') || []).filter(i => i.q)
+    },
+    addToHistory(q) {
+      const entry = { q: q }
+      const list = this.historyStore.get('list') || []
+      const next = [
+        entry,
+        ...list.filter(i => i.q !== entry.q)
+      ].slice(0, 10)
+      this.historyStore.set('list', next)
+      this.history = next
+    },
+    applyHistory(h) {
+      this.search = h.q
+      this.onInput()
+    },
+    clearHistory() {
+      this.historyStore.set('list', [])
+      this.history = []
+    },
+    bindKeyboardShortcut() {
+      document.addEventListener('keydown', this.handleKeyboardShortcut)
+    },
+    unbindKeyboardShortcut() {
+      document.removeEventListener('keydown', this.handleKeyboardShortcut)
+    },
+    handleKeyboardShortcut(event) {
+      // 检查是否按下了正确的快捷键
+      const isCorrectKey = event.key === 'k' || event.key === 'K'
+      const isCorrectModifier = this.isMac ? event.metaKey : event.ctrlKey
+
+      if (isCorrectKey && isCorrectModifier) {
+        // 阻止默认行为
+        event.preventDefault()
+
+        // 如果当前有输入框聚焦，不触发搜索
+        const activeElement = document.activeElement
+        const isInputFocused = activeElement && (
+          activeElement.tagName === 'INPUT' ||
+          activeElement.tagName === 'TEXTAREA' ||
+          activeElement.contentEditable === 'true'
+        )
+
+        if (!isInputFocused) {
+          this.openPanel()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.global-search {
+  position: relative;
+  width: 200px;
+  height: 40px;
+  padding: 5px 0;
+  min-width: 200px;
+  margin-right: 5px;
+
+  .search-trigger {
+    height: 30px;
+    line-height: 1;
+
+    .search-input {
+      height: 30px;
+      line-height: 1;
+      background-color: rgba(5, 5, 5, 0.1);
+      border-radius: 4px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.2);
+      }
+
+      ::v-deep {
+        .el-input__inner {
+          height: 30px;
+          line-height: 1;
+          background: transparent;
+          border: none;
+          color: #fff;
+          cursor: pointer;
+
+          &::placeholder {
+            color: #fff;
+            opacity: 0.7;
+          }
+        }
+
+        .el-input__prefix .el-input__icon {
+          font-size: 15px;
+          line-height: 32px;
+        }
+
+        .el-input__suffix {
+          display: flex;
+          align-items: center;
+          height: 100%;
+        }
+      }
+
+      .search-shortcut {
+        color: rgba(255, 255, 255, 0.6);
+        font-size: 11px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-weight: 500;
+        letter-spacing: 0.5px;
+        padding: 2px 6px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 3px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        user-select: none;
+        pointer-events: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 18px;
+        line-height: 1;
+      }
+    }
+  }
+}
+
+/* 搜索模态框全局样式 */
+::v-deep .search-modal {
+  &.el-dialog {
+    position: fixed;
+    top: 5px;
+    left: 50%;
+    transform: translateX(-50%);
+    max-height: calc(100vh - 10px);
+    max-width: calc(100vw - 10px);
+    border-radius: 5px;
+    box-shadow: 0 0 8px 4px #00000014;
+
+    .el-dialog__body {
+      padding: 0;
+    }
+
+    .el-dialog__header {
+      display: none;
+    }
+  }
+}
+
+::v-deep body .v-modal {
+  opacity: 0.3;
+}
+
+::v-deep .search-modal-content {
+  height: 70vh;
+  display: flex;
+  flex-direction: column;
+}
+
+::v-deep .search-input-wrapper {
+  padding: 20px;
+  border-bottom: 1px solid #f0f0f0;
+  // background: #fff;
+
+  .el-input {
+    .el-input__inner {
+      font-size: 14px;
+      height: 34px;
+      line-height: 34px;
+    }
+  }
+}
+
+::v-deep .search-results {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* 自定义滚动条 */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
+}
+
+::v-deep .section-title {
+  padding: 12px 24px 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #909399;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  border-top: 1px solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .clear-history-btn {
+    background: none;
+    border: none;
+    padding: 4px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    color: red;
+
+    &:hover {
+      background: #f5f5f5;
+      color: #f56c6c;
+    }
+
+    .clear-icon {
+      font-size: 14px;
+      color: red;
+    }
+  }
+}
+
+::v-deep .list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  .item {
+    display: flex;
+    align-items: center;
+    padding: 8px 24px;
+    cursor: pointer;
+    border-bottom: 1px solid #f8f9fa;
+    transition: all 0.2s ease;
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 3px;
+      background: transparent;
+      transition: background 0.2s ease;
+    }
+
+    &:hover {
+      background: #f8f9fa;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .icon {
+      // color: var(--color-primary, #409eff);
+      margin-right: 12px;
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    .label {
+      flex: 1;
+      font-size: 14px;
+      color: #333;
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 60%;
+    }
+
+    .sub {
+      color: #909399;
+      font-size: 12px;
+      margin-left: 12px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex-shrink: 0;
+      width: 40%;
+      text-align: right;
+    }
+
+    .go {
+      color: #c0c4cc;
+      font-size: 12px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+::v-deep .loading,
+::v-deep .empty {
+  padding: 32px 24px;
+  color: #909399;
+  text-align: center;
+  font-size: 14px;
+}
+
+::v-deep .section.placeholder {
+  padding: 32px 24px;
+
+  .placeholder-content {
+    text-align: center;
+
+    .supported-types {
+      margin-bottom: 24px;
+
+      .types-title {
+        margin-bottom: 12px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+      }
+
+      .types-list {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 16px;
+
+        .type-item {
+          display: flex;
+          align-items: center;
+          padding: 8px 12px;
+          background: #f8f9fa;
+          border-radius: 6px;
+          font-size: 13px;
+          color: #666;
+          transition: all 0.2s ease;
+
+          &:hover {
+            background: #e9ecef;
+            color: #333;
+          }
+
+          .type-icon {
+            margin-right: 6px;
+            font-size: 14px;
+            color: #409eff;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/layout/components/NavHeader/index.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="navbar">
     <ul class="navbar-right">
+      <li class="header-item header-icon none-hover">
+        <Search @search-open="handleSearchOpen" />
+      </li>
       <li class="header-item header-icon">
         <el-tooltip :content="$tc('SiteMessageList')" :open-delay="500" effect="dark">
           <SiteMessages />
@@ -31,14 +34,18 @@
         <AccountDropdown />
       </li>
     </ul>
-    <hamburger :is-active="sidebar.opened" class="hamburger-container is-show-menu" @toggleClick="toggleSideBar" />
+    <hamburger
+      :is-active="sidebar.opened"
+      class="hamburger-container is-show-menu"
+      @toggleClick="toggleSideBar"
+    />
     <ul class="navbar-left">
       <li class="left-item">
         <div class="nav-logo">
           <Logo v-if="showLogo" :collapse="false" />
         </div>
       </li>
-      <li v-if="orgsShow" class="left-item" style="margin-left: 20px;">
+      <li v-if="orgsShow" class="left-item" style="margin-left: 20px">
         <Organization :disabled="orgsDisabled" class="organization" />
       </li>
     </ul>
@@ -57,6 +64,7 @@ import Organization from './Organization'
 import SystemSetting from './SystemSetting'
 import Logo from '../NavLeft/Logo'
 import Language from './Language'
+import Search from './Search'
 
 export default {
   components: {
@@ -69,19 +77,22 @@ export default {
     SiteMessages,
     SystemSetting,
     Logo,
-    Language
+    Language,
+    Search
   },
   data() {
-    return {}
+    return {
+      searchOpen: false
+    }
   },
   computed: {
-    ...mapGetters([
-      'sidebar', 'publicSettings', 'currentOrgRoles', 'currentViewRoute', 'isMobile'
-    ]),
+    ...mapGetters(['sidebar', 'publicSettings', 'currentOrgRoles', 'currentViewRoute', 'isMobile']),
     ticketsEnabled() {
-      return this.publicSettings['TICKETS_ENABLED'] &&
+      return (
+        this.publicSettings['TICKETS_ENABLED'] &&
         this.$hasLicense() &&
         this.$hasPerm('tickets.view_ticket')
+      )
     },
     showLogo() {
       return this.$store.state.settings.sidebarLogo
@@ -90,178 +101,188 @@ export default {
       return this.$route.meta?.disableOrgsChange === true
     },
     orgsShow() {
-      return (this.$route.meta?.showOrganization !== false) && this.$hasLicense()
+      return this.$route.meta?.showOrganization !== false && this.$hasLicense()
     }
   },
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
+    },
+    handleSearchOpen(val) {
+      // this.searchOpen = val
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-  @import "~@/styles/variables.scss";
+@import '~@/styles/variables.scss';
 
-  .navbar {
-    position: relative;
-    overflow: hidden;
-    background-color: var(--banner-bg);
+.navbar {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--banner-bg);
 
-    ul {
-      margin: 0;
-      padding-inline-start: 0;
-    }
+  ul {
+    margin: 0;
+    padding-inline-start: 0;
+  }
 
-    .is-show-menu {
-      display: none;
-    }
+  .is-show-menu {
+    display: none;
+  }
 
-    .hamburger-container {
-      float: left;
-      height: 25px;
-      line-height: 25px;
-      margin: 8px;
-      padding: 1px 8px !important;
-      border-radius: 5px;
-      border-color: $--color-primary;
-      background-color: white;
-      color: var(--text-primary);
-      cursor: pointer;
-      transition: .2s;
-      opacity: 0.7;
-    }
+  .hamburger-container {
+    float: left;
+    height: 25px;
+    line-height: 25px;
+    margin: 8px;
+    padding: 1px 8px !important;
+    border-radius: 5px;
+    border-color: $--color-primary;
+    background-color: white;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: 0.2s;
+    opacity: 0.7;
+  }
 
-    .navbar-left {
-      float: left;
+  .navbar-left {
+    float: left;
+    display: flex;
+    height: 100%;
+
+    .left-item {
       display: flex;
-      height: 100%;
-
-      .left-item {
-        display: flex;
-        align-items: center;
-        list-style: none;
-
-        .nav-logo {
-          width: 200px;
-
-          &:hover {
-            background: rgba(0, 0, 0, 12%);
-          }
-        }
-
-        .organization {
-          display: flex;
-          align-items: center;
-          padding: 0 0 0 15px !important;
-          border-radius: 3px;
-          background-color: rgba(255, 255, 255, .10);
-          color: #fff;
-          font-weight: 600;
-          font-size: 15px;
-          max-width: 250px;
-
-          ::v-deep .el-input__inner {
-            padding-left: 25px;
-          }
-
-          ::v-deep .el-input.is-disabled > input {
-            background: none;
-          }
-
-          &:hover {
-            background-color: rgba(0, 0, 0, .12) !important;
-          }
-        }
-
-        // 未找到与之对应的
-        & ::v-deep .el-submenu__title {
-          font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-          padding: 0 8px;
-          line-height: $headerHeight;
-          height: $headerHeight;
-        }
-
-        // 未找到与之对应的
-        & ::v-deep .svg-icon {
-          color: #FFF !important;
-        }
-      }
-    }
-
-    .navbar-right {
-      display: flex;
-      float: right;
       align-items: center;
-      margin-right: 10px;
+      list-style: none;
 
-      .header-item {
-        display: flex;
-        line-height: $headerHeight;
-        padding-right: 10px;
-        padding-left: 10px;
-
-        & ::v-deep .svg-icon {
-          line-height: 40px;
-          color: #FFF !important;
-          font-size: 15px;
-        }
-
-        & ::v-deep .el-badge {
-          vertical-align: top;
-
-          .el-link {
-            vertical-align: baseline;
-          }
-
-          .el-badge__content--primary {
-            background-color: #fff;
-          }
-
-          .el-badge__content {
-            top: 8px;
-            height: 15px;
-            line-height: 15px;
-            border: none;
-            color: var(--color-primary);
-          }
-        }
-
-        & ::v-deep i {
-          color: #FFF;
-          font-size: 16px;
-
-          &.el-icon-arrow-down {
-            font-size: 13px;
-          }
-        }
-
-        & ::v-deep i.el-dialog__close.el-icon-close {
-          color: #7c7e7f;
-        }
+      .nav-logo {
+        width: 200px;
 
         &:hover {
           background: rgba(0, 0, 0, 12%);
         }
       }
-    }
-  }
 
-  @media screen and (max-width: 1006px) {
-    .navbar {
-      .is-show-menu {
-        display: block;
+      .organization {
+        display: flex;
+        align-items: center;
+        padding: 0 0 0 15px ;
+        border-radius: 3px;
+        // background-color: rgba(5, 5, 5, 0.1);
+        color: #fff;
+        font-weight: 600;
+        font-size: 15px;
+        max-width: 250px;
+
+        ::v-deep .el-input__inner {
+          padding-left: 20px;
+        }
+
+        ::v-deep .el-input.is-disabled > input {
+          background: none;
+        }
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.2);
+        }
       }
 
-      .navbar-left {
-        display: none;
+      // 未找到与之对应的
+      & ::v-deep .el-submenu__title {
+        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        padding: 0 8px;
+        line-height: $headerHeight;
+        height: $headerHeight;
+      }
+
+      // 未找到与之对应的
+      & ::v-deep .svg-icon {
+        color: #fff !important;
       }
     }
   }
 
-  @media screen and (max-width: 480px) {
-    .active-menu {
-      display: none !important;;
+  .navbar-right {
+    display: flex;
+    float: right;
+    align-items: center;
+    margin-right: 10px;
+
+    .header-item {
+      display: flex;
+      line-height: $headerHeight;
+      padding-right: 10px;
+      padding-left: 10px;
+
+      & ::v-deep .svg-icon {
+        line-height: 40px;
+        color: #fff;
+        font-size: 15px;
+      }
+
+      & ::v-deep .el-badge {
+        vertical-align: top;
+
+        .el-link {
+          vertical-align: baseline;
+        }
+
+        .el-badge__content--primary {
+          background-color: #fff;
+        }
+
+        .el-badge__content {
+          top: 8px;
+          height: 15px;
+          line-height: 15px;
+          border: none;
+          color: var(--color-primary);
+        }
+      }
+
+      & ::v-deep i {
+        color: #fff;
+        font-size: 16px;
+
+        &.el-icon-arrow-down {
+          font-size: 13px;
+        }
+      }
+
+      & ::v-deep i.el-dialog__close.el-icon-close {
+        color: #7c7e7f;
+      }
+
+      &.none-hover {
+        padding: 0;
+        &:hover {
+          background: none;
+        }
+      }
+
+      &:hover {
+        background: rgba(0, 0, 0, 12%);
+      }
     }
   }
+}
+
+@media screen and (max-width: 1006px) {
+  .navbar {
+    .is-show-menu {
+      display: block;
+    }
+
+    .navbar-left {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .active-menu {
+    display: none !important;
+  }
+}
 </style>

src/layout/components/NavLeft/index.vue

@@ -1,18 +1,24 @@
 <template>
-  <div :class="{'has-logo': showLogo, 'show-orgs': showOrgs, 'collapsed': isCollapse}" class="left-side-wrapper">
+  <div
+    :class="{ 'has-logo': showLogo, 'show-orgs': showOrgs, collapsed: isCollapse }"
+    class="left-side-wrapper"
+  >
     <div class="nav-header">
       <div class="active-mobile">
         <Organization v-if="$hasLicense()" class="organization" />
       </div>
       <div class="nav-title">
         <span :class="switchViewOtherClasses" class="switch-view active-switch-view">
-          <el-popover
-            :open-delay="200"
-            placement="right-start"
-            trigger="hover"
-          >
+          <el-popover :open-delay="200" placement="right-start" trigger="hover">
             <span slot="reference" style="width: 100%">
-              <el-tooltip v-show="!isCollapse" :content="isRouteMeta.title" :open-delay="1000" placement="bottom" effect="dark" class="view-title">
+              <el-tooltip
+                v-show="!isCollapse"
+                :content="isRouteMeta.title"
+                :open-delay="1000"
+                placement="bottom"
+                effect="dark"
+                class="view-title"
+              >
                 <span class="text-overflow">{{ isRouteMeta.title || '' }}</span>
               </el-tooltip>
               <span class="icon-zone">
@@ -49,10 +55,14 @@
     </div>
     <div class="nav-footer">
       <div class="toggle-bar">
-        <Hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+        <Hamburger
+          :is-active="sidebar.opened"
+          class="hamburger-container"
+          @toggleClick="toggleSideBar"
+        />
       </div>
     </div>
-    <div :class="{'is-show': viewShown}" class="mobile-menu" @click="viewShown = false">
+    <div :class="{ 'is-show': viewShown }" class="mobile-menu" @click="viewShown = false">
       <ViewSwitcher :mode="'vertical'" />
     </div>
   </div>
@@ -81,10 +91,7 @@ export default {
     }
   },
   computed: {
-    ...mapGetters([
-      'currentViewRoute',
-      'sidebar'
-    ]),
+    ...mapGetters(['currentViewRoute', 'sidebar']),
     defaultOpensMenu() {
       return []
     },
@@ -127,8 +134,7 @@ export default {
       return this.currentViewRoute.meta || {}
     }
   },
-  mounted() {
-  },
+  mounted() {},
   methods: {
     toggleSideBar() {
       this.$store.dispatch('app/toggleSideBar')
@@ -143,7 +149,9 @@ export default {
       }, 500)
     },
     setLeastMenuOpen() {
-      const hasOpened = document.querySelector('.el-submenu-sidebar.submenu-item.el-submenu.is-opened')
+      const hasOpened = document.querySelector(
+        '.el-submenu-sidebar.submenu-item.el-submenu.is-opened'
+      )
       if (hasOpened) {
         return
       }
@@ -156,7 +164,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import "~@/styles/variables.scss";
+@import '~@/styles/variables.scss';
 
 $mobileHeight: 40px;
 $origin-color: #ffffff;
@@ -235,7 +243,7 @@ $hover-border-color: #d2d2d2;
 
           .view-title {
             width: calc(100% - 10px);
-            display: inline-block
+            display: inline-block;
           }
 
           .icon-zone {
@@ -299,7 +307,7 @@ $hover-border-color: #d2d2d2;
   }
 
   .is-show {
-    display: block !important;;
+    display: block !important;
   }
 
   .mobile-menu {

src/layout/components/TabPage/index.vue

@@ -167,8 +167,7 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
-
+<style lang="scss" scoped>
 .page.no-title {
   ::v-deep {
     .page-submenu .el-tabs__header {
@@ -199,6 +198,14 @@ export default {
         opacity: 1;
       }
     }
+
+    &.is-disabled {
+      cursor: not-allowed;
+
+      &:hover {
+        color: #c0c4cc;
+      }
+    }
   }
 
   .el-tabs__nav-next {

src/layout/components/TagsView/index.vue

@@ -276,10 +276,8 @@ export default {
     }
   }
 }
-</style>
 
-<style lang="scss">
-//reset element css of el-icon-close
+// reset element css of el-icon-close
 .tags-view-wrapper {
   .tags-view-item {
     .el-icon-close {

src/main.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import ElementUI from 'elementui-lts'
+import ElementUI from 'element-ui'
 import locale from 'elementLocale'
 import '@/styles/index.scss' // global css
 import App from './App'
@@ -25,6 +25,7 @@ import xss from '@/utils/secure'
 import ElTableTooltipPatch from '@/utils/vue/elTableTooltipPatch.js'
 import VSanitize from 'v-sanitize'
 import moment from 'moment'
+
 moment.locale('zh-cn')
 
 /**
@@ -35,10 +36,11 @@ moment.locale('zh-cn')
  * Currently MockJs will be used in the production environment,
  * please remove it before going online ! ! !
  */
-if (process.env.NODE_ENV === 'development') {
-  const { mockXHR } = require('../mock')
-  mockXHR()
-}
+// 使用 mockXHR 无法使用 axios 中的 onUploadProgress 回调函数
+// if (process.env.NODE_ENV === 'development') {
+//   const { mockXHR } = require('../mock')
+//   mockXHR()
+// }
 
 // set ElementUI lang to EN
 ElementUI.Tooltip.props.openDelay.default = 1000

src/router/audit/reports.js

@@ -18,7 +18,7 @@ export default [
         component: () => import('@/views/reports/users/index.vue'),
         meta: {
           title: i18n.t('UserReport'),
-          permissions: []
+          permissions: ['rbac.view_userloginreport | rbac.view_userchangepasswordreport']
         }
       }
     ]
@@ -40,7 +40,7 @@ export default [
         component: () => import('@/views/reports/assets/index.vue'),
         meta: {
           title: i18n.t('AssetReport'),
-          permissions: []
+          permissions: ['rbac.view_assetactivityreport | rbac.view_assetstatisticsreport']
         }
       }
     ]
@@ -62,7 +62,7 @@ export default [
         component: () => import('@/views/reports/accounts/index.vue'),
         meta: {
           title: i18n.t('AccountReport'),
-          permissions: []
+          permissions: ['rbac.view_accountstatisticsreport | rbac.view_accountautomationreport']
         }
       }
     ]

src/router/console/accounts.js

@@ -22,6 +22,7 @@ export default [
         component: () => import('@/views/accounts/Account/index.vue'),
         meta: {
           title: i18n.t('AssetAccount'),
+          showInSearch: true,
           app: 'accounts',
           permissions: ['accounts.view_account']
         }
@@ -29,8 +30,8 @@ export default [
       {
         path: ':id',
         component: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
-        name: 'AssetAccountDetail',
-        meta: { title: i18n.t('AssetAccountDetail') },
+        name: 'AccountDetail',
+        meta: { title: i18n.t('AccountDetail') },
         hidden: true
       }
     ]

src/router/console/acls.js

@@ -34,7 +34,9 @@ export default [
             name: 'UserLoginACLList',
             component: () => import('@/views/acls/UserLoginACL/UserLoginACLList.vue'),
             meta: {
-              title: i18n.t('UserLoginACLs'), menuTitle: i18n.t('UserLogin'), activeMenu: ''
+              title: i18n.t('UserLoginACLs'),
+              menuTitle: i18n.t('UserLogin'),
+              activeMenu: ''
             }
           },
           {
@@ -74,7 +76,7 @@ export default [
         },
         name: 'CmdACL',
         meta: {
-          title: i18n.t('CommandFilterACLs',),
+          title: i18n.t('CommandFilterACLs'),
           menuTitle: i18n.t('CommandFilter'),
           app: 'acls',
           resource: 'commandfilteracl'
@@ -136,7 +138,11 @@ export default [
             path: '',
             name: 'AssetACLList',
             component: () => import('@/views/acls/AssetLoginACL/AssetLoginAclList.vue'),
-            meta: { title: i18n.t('AssetACLs'), activeMenu: '', menuTitle: i18n.t('AssetConnect') }
+            meta: {
+              title: i18n.t('AssetACLs'),
+              activeMenu: '',
+              menuTitle: i18n.t('AssetConnect')
+            }
           },
           {
             path: 'create',
@@ -161,6 +167,53 @@ export default [
           }
         ]
       },
+      {
+        path: 'data-masking-rules',
+        component: empty,
+        redirect: {
+          name: 'DataMaskingRuleList'
+        },
+        name: 'DataMaskingRules',
+        meta: {
+          title: i18n.t('DataMasking'),
+          licenseRequired: true,
+          app: 'acls',
+          resource: 'datamaskingrule'
+        },
+        children: [
+          {
+            path: '',
+            name: 'DataMaskingRuleList',
+            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleList.vue'),
+            meta: {
+              title: i18n.t('DataMasking'),
+              activeMenu: '',
+              menuTitle: i18n.t('DataMasking')
+            }
+          },
+          {
+            path: 'create',
+            name: 'DataMaskingRuleCreate',
+            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue'),
+            hidden: true,
+            meta: { title: '', activeMenu: '' }
+          },
+          {
+            path: ':id',
+            name: 'DataMaskingRuleDetail',
+            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleDetail/index'),
+            hidden: true,
+            meta: { title: i18n.t('AssetACLDetail'), activeMenu: '' }
+          },
+          {
+            path: ':id/update',
+            name: 'DataMaskingRuleUpdate',
+            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue'),
+            hidden: true,
+            meta: { title: '', activeMenu: '' }
+          }
+        ]
+      },
       {
         path: 'cmd-groups',
         component: empty,
@@ -237,7 +290,11 @@ export default [
             path: '',
             name: 'ConnectMethodACLList',
             component: () => import('@/views/acls/ConnectMethodACL/ConnectMethodAclList.vue'),
-            meta: { title: i18n.t('ConnectMethodACLs'), activeMenu: '', menuTitle: i18n.t('ConnectMethod') }
+            meta: {
+              title: i18n.t('ConnectMethodACLs'),
+              activeMenu: '',
+              menuTitle: i18n.t('ConnectMethod')
+            }
           },
           {
             path: 'create',

src/router/console/assets.js

@@ -20,7 +20,7 @@ export default [
         path: '',
         name: 'AssetList',
         component: () => import('@/views/assets/Asset/AssetList/index.vue'),
-        meta: { title: i18n.t('AssetList') }
+        meta: { title: i18n.t('AssetList'), showInSearch: true }
       },
       {
         path: ':id',

src/router/console/index.js

@@ -22,6 +22,7 @@ export default {
     showNavSwitcher: () => {
       return store.getters.consoleOrgs.length > 0
     },
+
     permissions: []
   },
   children: [

src/router/console/sessions.js

@@ -34,14 +34,12 @@ export default [
   {
     path: `${BASE_URL}/luna/?_=${Date.now()}`,
     name: 'WebTerminal',
-    // component: () => window.open(`/luna/?_=${Date.now()}`),
     meta: { title: i18n.t('WebTerminal') }
     // hidden: true
   },
   {
     path: `${BASE_URL}/koko/elfinder/sftp/?`,
     name: 'FileManagement',
-    // component: () => window.open(`/koko/elfinder/sftp/?`),
     meta: { title: i18n.t('FileManagement') }
   }
 ]

src/router/profile/index.js

@@ -123,6 +123,16 @@ export default {
         permissions: ['authentication.view_connectiontoken']
       }
     },
+    {
+      path: '/profile/access-token',
+      component: () => import('@/views/profile/AccessToken'),
+      name: 'AccessToken',
+      meta: {
+        title: i18n.t('AccessToken'),
+        icon: 'access-token',
+        permissions: ['oauth2_provider.view_accesstoken']
+      }
+    },
     {
       path: '/profile/preferences',
       name: 'Preferences',

src/router/reports/accounts.js

@@ -6,7 +6,7 @@ export default [
     component: () => import('@/views/reports/accounts/AccountStatistics.vue'), // Parent router-view
     name: 'AccountStatistics',
     meta: {
-      permissions: [],
+      permissions: ['rbac.view_accountstatisticsreport'],
       expanded: true,
       icon: 'user-o',
       title: i18n.t('AccountStatisticsReport')
@@ -17,7 +17,7 @@ export default [
     component: () => import('@/views/reports/accounts/AccountAutomation.vue'), // Parent router-view
     name: 'AccountAutomationReport',
     meta: {
-      permissions: [],
+      permissions: ['rbac.view_accountautomationreport'],
       expanded: true,
       icon: 'user-o',
       title: i18n.t('AccountAutomationReport')

src/router/reports/assets.js

@@ -6,7 +6,7 @@ export default [
     component: () => import('@/views/reports/assets/AssetActivity.vue'), // Parent router-view
     name: 'AssetReport',
     meta: {
-      permissions: [],
+      permissions: ['rbac.view_assetactivityreport'],
       icon: 'user-o',
       expanded: true,
       title: i18n.t('AssetActivityReport')
@@ -17,7 +17,7 @@ export default [
     component: () => import('@/views/reports/assets/AssetStatistics.vue'), // Parent router-view
     name: 'AssetStatistics',
     meta: {
-      permissions: [],
+      permissions: ['rbac.view_assetstatisticsreport'],
       expanded: true,
       icon: 'user-o',
       title: i18n.t('AssetStatisticsReport')

src/router/reports/dashboard.js

@@ -0,0 +1,48 @@
+import i18n from '@/i18n/i18n'
+
+export default [
+  {
+    path: 'console',
+    component: () => import('@/views/reports/console/index.vue'), // Parent router-view
+    name: 'ConsoleReport',
+    meta: {
+      permissions: ['rbac.view_console'],
+      icon: 'user-o',
+      expanded: true,
+      title: i18n.t('ConsoleReport')
+    }
+  },
+  {
+    path: 'pam',
+    component: () => import('@/views/reports/pam/Dashboard/index.vue'), // Parent router-view
+    name: 'PamReport',
+    meta: {
+      permissions: ['rbac.view_pam'],
+      expanded: true,
+      icon: 'user-o',
+      title: i18n.t('PamReport')
+    }
+  },
+  {
+    path: 'audits',
+    component: () => import('@/views/reports/audits/Dashboard.vue'), // Parent router-view
+    name: 'AuditsReport',
+    meta: {
+      permissions: ['rbac.view_audit'],
+      expanded: true,
+      icon: 'user-o',
+      title: i18n.t('AuditsReport')
+    }
+  },
+  {
+    path: 'change-secret',
+    component: () => import('@/views/reports/pam/ChangeSecret/index.vue'),
+    name: 'ChangeSecretReport',
+    meta: {
+      permissions: ['accounts.view_changesecretautomation'],
+      expanded: true,
+      icon: 'user-o',
+      title: i18n.t('ChangeSecretReport')
+    }
+  }
+]

src/router/reports/index.js

@@ -4,6 +4,7 @@ import empty from '@/layout/empty'
 import users from './users'
 import assets from './assets'
 import accounts from './accounts'
+import dashboard from './dashboard'
 
 export default {
   path: '/reports',
@@ -17,6 +18,18 @@ export default {
     permissions: []
   },
   children: [
+    {
+      path: '/reports/dashboard',
+      component: empty,
+      redirect: 'dashboard',
+      name: 'ReportsDashboard',
+      meta: {
+        title: i18n.t('ReportsDashboard'),
+        icon: 'reports',
+        permissions: []
+      },
+      children: dashboard
+    },
     {
       path: '/reports/users',
       component: empty,

src/router/reports/users.js

@@ -6,7 +6,7 @@ export default [
     component: () => import('@/views/reports/users/UserActivity.vue'), // Parent router-view
     name: 'UserReport',
     meta: {
-      permissions: [],
+      permissions: ['rbac.view_userloginreport'],
       icon: 'user-o',
       expanded: true,
       title: i18n.t('UserLoginReport')
@@ -17,7 +17,7 @@ export default [
     component: () => import('@/views/reports/users/ChangePassword.vue'), // Parent router-view
     name: 'ChangePassword',
     meta: {
-      permissions: [],
+      permissions: ['rbac.view_userchangepasswordreport'],
       expanded: true,
       icon: 'user-o',
       title: i18n.t('UserChangePasswordReport')

src/styles/element-variables.scss

@@ -6,19 +6,21 @@
 
 /* Transition
 -------------------------- */
-$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
+$--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 $--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
 $--fade-linear-transition: opacity 200ms linear !default;
-$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
-$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
+$--md-fade-transition:
+  transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+$--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 
 /* Color
 -------------------------- */
 /// color|1|Brand Color|0
 $--color-primary: #1ab394 !default;
 /// color|1|Background Color|4
-$--color-white: #FFFFFF !default;
+$--color-white: #ffffff !default;
 /// color|1|Background Color|4
 $--color-black: #000000 !default;
 $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
@@ -55,19 +57,19 @@ $--color-text-regular: #606266 !default;
 /// color|1|Font Color|2
 $--color-text-secondary: #909399 !default;
 /// color|1|Font Color|2
-$--color-text-placeholder: #C0C4CC !default;
+$--color-text-placeholder: #c0c4cc !default;
 /// color|1|Border Color|3
-$--border-color-base: #DCDFE6 !default;
+$--border-color-base: #dcdfe6 !default;
 /// color|1|Border Color|3
-$--border-color-light: #E4E7ED !default;
+$--border-color-light: #e4e7ed !default;
 /// color|1|Border Color|3
-$--border-color-lighter: #EBEEF5 !default;
+$--border-color-lighter: #ebeef5 !default;
 /// color|1|Border Color|3
-$--border-color-extra-light: #F2F6FC !default;
+$--border-color-extra-light: #f2f6fc !default;
 
 // Background
 /// color|1|Background Color|4
-$--background-color-base: #F5F7FA !default;
+$--background-color-base: #f5f7fa !default;
 
 /* Link
 -------------------------- */
@@ -91,9 +93,13 @@ $--border-radius-zero: 0 !default;
 
 // Box-shadow
 /// boxShadow|1|Shadow|1
-$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
+$--box-shadow-base:
+  0 2px 4px rgba(0, 0, 0, 0.12),
+  0 0 6px rgba(0, 0, 0, 0.04) !default;
 // boxShadow|1|Shadow|1
-$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
+$--box-shadow-dark:
+  0 2px 4px rgba(0, 0, 0, 0.12),
+  0 0 6px rgba(0, 0, 0, 0.12) !default;
 /// boxShadow|1|Shadow|1
 $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
 
@@ -210,8 +216,6 @@ $--checkbox-button-checked-font-color: $--color-white !default;
 /// color||Color|0
 $--checkbox-button-checked-border-color: $--color-primary !default;
 
-
-
 /* Radio
 -------------------------- */
 /// fontSize||Font|1
@@ -480,8 +484,8 @@ $--cascader-menu-radius: $--border-radius-base !default;
 $--cascader-menu-border: solid 1px $--border-color-light !default;
 $--cascader-menu-shadow: $--box-shadow-light !default;
 $--cascader-node-background-hover: $--background-color-base !default;
-$--cascader-node-color-disabled:$--color-text-placeholder !default;
-$--cascader-color-empty:$--color-text-placeholder !default;
+$--cascader-node-color-disabled: $--color-text-placeholder !default;
+$--cascader-color-empty: $--color-text-placeholder !default;
 $--cascader-tag-background: #f0f2f5;
 
 /* Group
@@ -591,7 +595,6 @@ $--button-info-background-color: $--color-info !default;
 $--button-hover-tint-percent: 20% !default;
 $--button-active-shade-percent: 10% !default;
 
-
 /* cascader
 -------------------------- */
 $--cascader-height: 200px !default;
@@ -639,7 +642,7 @@ $--table-row-hover-background-color: $--background-color-base !default;
 $--table-current-row-background-color: $--color-primary-light-9 !default;
 /// color||Color|0
 $--table-header-background-color: $--color-white !default;
-$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
+$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
 
 /* Pagination
 -------------------------- */
@@ -827,8 +830,8 @@ $--loading-fullscreen-spinner-size: 50px !default;
 
 /* Scrollbar
 --------------------------*/
-$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
-$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
+$--scrollbar-background-color: rgba($--color-text-secondary, 0.3) !default;
+$--scrollbar-hover-background-color: rgba($--color-text-secondary, 0.5) !default;
 
 /* Carousel
 --------------------------*/
@@ -937,7 +940,7 @@ $--link-info-font-color: $--color-info !default;
 /// border||Other|4
 $--calendar-border: $--table-border !default;
 /// color||Other|4
-$--calendar-selected-background-color: #F2F8FE !default;
+$--calendar-selected-background-color: #f2f8fe !default;
 $--calendar-cell-width: 85px !default;
 
 /* Form
@@ -950,7 +953,7 @@ $--form-label-font-size: $--font-size-base !default;
 /// color||Color|0
 $--avatar-font-color: #fff !default;
 /// color||Color|0
-$--avatar-background-color: #C0C4CC !default;
+$--avatar-background-color: #c0c4cc !default;
 /// fontSize||Font Size|1
 $--avatar-text-font-size: 14px !default;
 /// fontSize||Font Size|1
@@ -972,26 +975,52 @@ $--lg: 1200px !default;
 $--xl: 1920px !default;
 
 $--breakpoints: (
-  'xs' : (max-width: $--sm - 1),
-  'sm' : (min-width: $--sm),
-  'md' : (min-width: $--md),
-  'lg' : (min-width: $--lg),
-  'xl' : (min-width: $--xl)
+  'xs': (
+    max-width: $--sm - 1
+  ),
+  'sm': (
+    min-width: $--sm
+  ),
+  'md': (
+    min-width: $--md
+  ),
+  'lg': (
+    min-width: $--lg
+  ),
+  'xl': (
+    min-width: $--xl
+  )
 );
 
 $--breakpoints-spec: (
-  'xs-only' : (max-width: $--sm - 1),
-  'sm-and-up' : (min-width: $--sm),
-  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
-  'sm-and-down': (max-width: $--md - 1),
-  'md-and-up' : (min-width: $--md),
-  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
-  'md-and-down': (max-width: $--lg - 1),
-  'lg-and-up' : (min-width: $--lg),
-  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
-  'lg-and-down': (max-width: $--xl - 1),
-  'xl-only' : (min-width: $--xl),
+  'xs-only': (
+    max-width: $--sm - 1
+  ),
+  'sm-and-up': (
+    min-width: $--sm
+  ),
+  'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md - 1})',
+  'sm-and-down': (
+    max-width: $--md - 1
+  ),
+  'md-and-up': (
+    min-width: $--md
+  ),
+  'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg - 1})',
+  'md-and-down': (
+    max-width: $--lg - 1
+  ),
+  'lg-and-up': (
+    min-width: $--lg
+  ),
+  'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl - 1})',
+  'lg-and-down': (
+    max-width: $--xl - 1
+  ),
+  'xl-only': (
+    min-width: $--xl
+  )
 );
 
-$--font-path: '~elementui-lts/lib/theme-chalk/fonts';
-@import "~elementui-lts/packages/theme-chalk/src/index";
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import '~element-ui/packages/theme-chalk/src/index';

src/styles/index.scss

@@ -2,7 +2,7 @@
 //@import './transition.scss';
 @import './sidebar.scss';
 @import './menu.scss';
-@import "./fonts.scss";
+@import './fonts.scss';
 @import './fonts/font-awesome.min.css';
 
 ::-webkit-scrollbar {
@@ -24,7 +24,7 @@
 
 ::-webkit-scrollbar-thumb {
   border-radius: 8px;
-  box-shadow: 8px 10px 20px #C6C6C6 inset;
+  box-shadow: 8px 10px 20px #c6c6c6 inset;
   border-left: 2px solid rgba(0, 0, 0, 0);
 }
 
@@ -38,7 +38,7 @@ body {
   -moz-osx-font-smoothing: grayscale;
   -webkit-font-smoothing: auto;
   color: var(--color-text-primary);
-  font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
   font-size: 13px;
   line-height: 1.428;
 }
@@ -84,7 +84,7 @@ div:focus {
     visibility: hidden;
     display: block;
     font-size: 0;
-    content: " ";
+    content: ' ';
     clear: both;
     height: 0;
   }
@@ -94,7 +94,8 @@ div:focus {
   background-color: #ffffff;
 }
 
-.small, small {
+.small,
+small {
   font-size: 85%;
 }
 
@@ -102,7 +103,8 @@ div:focus {
   color: $--color-primary;
 }
 
-b, strong {
+b,
+strong {
   font-weight: 700;
 }
 
@@ -114,19 +116,37 @@ p {
   margin: 0 0 10px;
 }
 
-.h1, .h2, .h3, .h4, .h5, .h6, h1, h2, h3, h4, h5, h6 {
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: inherit;
   font-weight: 500;
   line-height: 1.1;
   color: inherit;
 }
 
-.h4, .h5, .h6, h4, h5, h6 {
+.h4,
+.h5,
+.h6,
+h4,
+h5,
+h6 {
   margin-top: 10px;
   margin-bottom: 10px;
 }
 
-h3, h4, h5 {
+h3,
+h4,
+h5 {
   margin-top: 5px;
   font-weight: 600;
 }
@@ -135,8 +155,12 @@ h4 {
   font-size: 14px;
 }
 
-button, input, optgroup, select, textarea {
-  font-family: "Open Sans", sans-serif !important;
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: 'Open Sans', sans-serif !important;
 }
 
 // main-container global css
@@ -177,7 +201,7 @@ button, input, optgroup, select, textarea {
   word-break: keep-all;
 }
 
-input[type=file] {
+input[type='file'] {
   font-size: 12px;
   opacity: 80;
 }
@@ -214,11 +238,14 @@ input[type=file] {
   overflow: auto;
 }
 
-
 .el-input.is-disabled .el-input__inner {
   color: #737373 !important;
 }
 
+.el-select-dropdown.switch-org {
+  width: 220px;
+}
+
 @media screen and (max-width: 992px) {
   .el-select-dropdown.switch-org {
     left: 0 !important;
@@ -256,7 +283,7 @@ input[type=file] {
     color: var(--color-text-primary);
 
     a {
-      color: #1c84c6
+      color: #1c84c6;
     }
   }
 
@@ -303,7 +330,7 @@ input[type=file] {
       white-space: nowrap;
 
       &:hover {
-        border-right: 2px solid #EBEEF5;
+        border-right: 2px solid #ebeef5;
       }
     }
 
@@ -314,7 +341,7 @@ input[type=file] {
     }
 
     &:last-child {
-      border-right: 1px solid #EBEEF5 !important;
+      border-right: 1px solid #ebeef5 !important;
 
       .cell {
         border-right: none;
@@ -353,7 +380,7 @@ input[type=file] {
 
       &:last-child {
         padding: 0;
-        border-right: 1px solid #EBEEF5 !important;
+        border-right: 1px solid #ebeef5 !important;
 
         .cell {
           vertical-align: unset;
@@ -391,7 +418,8 @@ input[type=file] {
   font-weight: 400;
 }
 
-.el-drawer.rtl, .drawer-panel {
+.el-drawer.rtl,
+.drawer-panel {
   border-radius: 5px 0 0 5px;
 }
 
@@ -399,13 +427,15 @@ input[type=file] {
   color: #909399 !important;
 }
 
-.el-button.el-button--small, .el-button--small.is-round {
+.el-button.el-button--small,
+.el-button--small.is-round {
   font-weight: 400;
   padding: 8px 12px;
   border-radius: 2px;
 }
 
-.el-button.el-button--mini, .el-button--mini.is-round {
+.el-button.el-button--mini,
+.el-button--mini.is-round {
   font-size: 0.7rem;
   font-weight: 400;
   border-radius: 2px;
@@ -435,18 +465,19 @@ input[type=file] {
   }
 
   .el-input__icon {
-    vertical-align: super
+    vertical-align: super;
   }
 }
 
-.el-form .el-input__inner, .el-dialog__body .el-input__inner {
+.el-form .el-input__inner,
+.el-dialog__body .el-input__inner {
   height: 30px;
   font-size: 13px;
 }
 
 .el-input input::placeholder {
   font-weight: 400 !important;
-  font-family: "Open Sans", sans-serif;
+  font-family: 'Open Sans', sans-serif;
   font-size: 13px;
 }
 
@@ -490,19 +521,19 @@ $tooltip-arrow-color: #c2d1e1;
 
 // 使用 SCSS 的嵌套和变量来简化代码
 .el-tooltip__popper.is-light {
-  &[x-placement^=right] .popper__arrow {
+  &[x-placement^='right'] .popper__arrow {
     border-right-color: $tooltip-arrow-color !important;
   }
 
-  &[x-placement^=left] .popper__arrow {
+  &[x-placement^='left'] .popper__arrow {
     border-left-color: $tooltip-arrow-color !important;
   }
 
-  &[x-placement^=top] .popper__arrow {
+  &[x-placement^='top'] .popper__arrow {
     border-top-color: $tooltip-arrow-color !important;
   }
 
-  &[x-placement^=bottom] .popper__arrow {
+  &[x-placement^='bottom'] .popper__arrow {
     border-bottom-color: $tooltip-arrow-color !important;
   }
 }
@@ -598,7 +629,6 @@ li.rmenu i.fa {
   }
 }
 
-
 //.link-btn {
 //  span {
 //    color: var(--color-link);
@@ -623,12 +653,12 @@ li.rmenu i.fa {
 }
 
 .el-input-number {
-  .el-input-number__decrease, .el-input-number__increase {
+  .el-input-number__decrease,
+  .el-input-number__increase {
     line-height: 26px;
   }
 }
 
-
 .el-form--label-top.el-form {
   //.el-form-item.is-required:not(.is-no-asterisk) > .el-form-item__label:after {
   //  content: '*';
@@ -639,7 +669,6 @@ li.rmenu i.fa {
   }
 }
 
-
 .el-form-item {
   .CodeMirror {
     height: 200px;
@@ -706,3 +735,15 @@ div.el-loading-parent--relative {
 .el-drawer__header .drawer-title {
   color: var(--color-text-primary);
 }
+
+.margin-top-10 {
+  margin-top: 10px;
+}
+
+.margin-top-20 {
+  margin-top: 20px;
+}
+
+.el-message {
+  z-index: 999999 !important;
+}

src/utils/common/index.js

@@ -149,6 +149,11 @@ export function getErrorResponseMsg(error) {
       .join('; ')
   } else if (typeof data === 'string') {
     return data
+  } else if (_.isPlainObject(data)) {
+    return Object.values(data)
+      .map(item => getErrorResponseMsg(item))
+      .filter(i => i)
+      .join('; ')
   } else {
     msg = error.toString()
   }

src/utils/request.js

@@ -3,7 +3,7 @@ import i18n from '@/i18n/i18n'
 import { eventBus } from '@/utils/vue/eventbus'
 import { getTokenFromCookie } from '@/utils/jms/auth'
 import { getErrorResponseMsg } from '@/utils/common'
-import { MessageBox } from 'elementui-lts'
+import { MessageBox } from 'element-ui'
 import { message } from '@/utils/vue/message'
 import store from '@/store'
 import axiosRetry from 'axios-retry'

src/utils/vue/index.js

@@ -21,3 +21,16 @@ export function getComponentFromRoute(route, router) {
   }
   return r.components.default
 }
+
+export function getRouteUrl(route, router) {
+  if (typeof route === 'string') {
+    route = { name: route }
+  }
+
+  const r = router.match(route)
+
+  if (!r) {
+    return
+  }
+  return r.path
+}

src/utils/vue/message.js

@@ -1,11 +1,18 @@
-// 重置message，防止重复点击重复弹出message弹框
 import { Message as elMessage } from 'element-ui'
 import { toSentenceCase } from '@/utils/common/index'
 
 let messageDom = null
+const DEFAULT_Z_INDEX = 20000
+
 const message = options => {
-  // 判断弹窗是否已存在, 若存在则关闭
   if (messageDom) messageDom.close()
+
+  if (typeof options === 'string') {
+    options = { message: options }
+  }
+
+  options.zIndex = options.zIndex || DEFAULT_Z_INDEX
+
   messageDom = elMessage(options)
 }
 

src/views/accounts/AccountChangeSecret/AccountChangeSecretCreateUpdate.vue

@@ -107,6 +107,10 @@ export default {
           data.secret = data[secretType]
           delete data[secretType]
         }
+
+        if (data.ssh_key_change_strategy === 'add') {
+          data.ssh_key_change_strategy = this.initial.ssh_key_change_strategy
+        }
         return data
       }
     }

src/views/accounts/AccountChangeSecret/Overview/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div v-if="this.$hasPerm('accounts.view_changesecretautomation')" class="change-secret-container">
-    <ChangeSecretReport :nav="false" />
+    <ChangeSecretReport :nav="false" :only-charts="true" />
   </div>
 </template>
 

src/views/accounts/AccountDiscover/DeleteDialog.vue

@@ -116,6 +116,7 @@ export default {
   },
   methods: {
     handleConfirm() {
+      this.$message.warning(this.$tc('ProcessingMessage'))
       const url = `/api/v1/accounts/gathered-accounts/${this.account.id}/`
       this.$axios.delete(url, {
         params: {

src/views/accounts/AccountPush/AccountPushCreateUpdate.vue

@@ -117,6 +117,10 @@ export default {
           data.secret = data[secretType]
           delete data[secretType]
         }
+
+        if (data.ssh_key_change_strategy === 'add') {
+          data.ssh_key_change_strategy = this.initial.ssh_key_change_strategy
+        }
         return data
       }
     }
@@ -140,11 +144,6 @@ export default {
       deep: true
     }
   },
-  mounted() {
-    if (!this.$store.getters.hasValidLicense) {
-      delete this.fields[3]
-    }
-  },
   methods: {
     handleAfterGetRemoteMeta(meta) {
       const needSetOptionFields = [

src/views/accounts/Automation/BaseExecutionList.vue

@@ -137,8 +137,8 @@ export default {
           getUrlQuery: true,
           options: [
             {
-              label: this.$t('TaskID'),
-              value: 'automation_id'
+              label: this.$t('ID'),
+              value: 'id'
             },
             {
               label: this.$t('DisplayName'),