fix: Fix the issue of router-view being wrapped by keep-alive

* 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

@@ -1,77 +1,124 @@
 module.exports = {
   root: true,
+  // Explicitly use vue-eslint-parser for .vue SFCs
+  parser: 'vue-eslint-parser',
   parserOptions: {
-    parser: 'babel-eslint',
-    sourceType: 'module'
+    parser: '@babel/eslint-parser',
+    sourceType: 'module',
+    ecmaVersion: 2021,
+    ecmaFeatures: { jsx: true },
+    // 允许使用项目的 babel 配置（babel.config.js），避免 JSX 等语法解析错误
+    requireConfigFile: true
   },
   env: {
     browser: true,
     node: true,
     es6: true
   },
-  extends: ['plugin:vue/recommended', 'eslint:recommended'],
+  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended'],
   globals: {
     window: true,
     _: true
   },
+  plugins: ['vue', 'spellcheck'],
   // add your custom rules here
   // it is base on https://github.com/vuejs/eslint-config-vue
   rules: {
-    'vue/max-attributes-per-line': [2, {
-      'singleline': 10,
-      'multiline': {
-        'max': 1,
-        'allowFirstLine': false
-      }
-    }],
+    'vue/max-attributes-per-line': ['warn', { singleline: 10, multiline: 1 }],
     'vue/singleline-html-element-content-newline': 'off',
     'vue/multiline-html-element-content-newline': 'off',
-    'vue/name-property-casing': ['error', 'PascalCase'],
+    // Vue 3: use the new rule name instead of the removed `vue/name-property-casing`
+    'vue/component-definition-name-casing': ['error', 'PascalCase'],
     'vue/no-v-html': 'off',
+    // Vue 3 新增的一些默认规则在老项目里成本很高，这里关掉以减少迁移成本
+    'vue/multi-word-component-names': 'off',
+    'vue/no-reserved-component-names': 'off',
+    'vue/no-deprecated-v-bind-sync': 'off',
+    'vue/no-deprecated-dollar-listeners-api': 'off',
+    'vue/no-deprecated-slot-attribute': 'off',
+    'vue/no-deprecated-v-on-native-modifier': 'off',
+    'vue/no-deprecated-destroyed-lifecycle': 'error',
+    'vue/no-deprecated-slot-scope-attribute': 'off',
+    'vue/no-deprecated-props-default-this': 'off',
+    'vue/no-deprecated-dollar-scopedslots-api': 'off',
+    'vue/no-mutating-props': 'off',
+    'vue/no-deprecated-filter': 'off',
+    'vue/no-computed-properties-in-data': 'off',
+    // other rules used in inline disable comments
+    'vue/no-deprecated-router-link-tag-prop': 'off',
     'accessor-pairs': 2,
-    'arrow-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
+    'arrow-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
     'block-spacing': [2, 'always'],
-    'brace-style': [2, '1tbs', {
-      'allowSingleLine': true
-    }],
-    'camelcase': [0, {
-      'properties': 'always'
-    }],
+    'brace-style': [
+      2,
+      '1tbs',
+      {
+        allowSingleLine: true
+      }
+    ],
+    camelcase: [
+      0,
+      {
+        properties: 'always'
+      }
+    ],
     'comma-dangle': [2, 'never'],
-    'comma-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
+    'comma-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
     'comma-style': [2, 'last'],
     'constructor-super': 2,
-    'curly': [2, 'multi-line'],
+    curly: [2, 'multi-line'],
     'dot-location': [2, 'property'],
     'eol-last': 2,
-    'eqeqeq': ['error', 'always', { 'null': 'ignore' }],
-    'generator-star-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
+    eqeqeq: ['error', 'always', { null: 'ignore' }],
+    'generator-star-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
     'handle-callback-err': [2, '^(err|error)$'],
-    'indent': [2, 2, {
-      'SwitchCase': 1
-    }],
+    indent: [
+      2,
+      2,
+      {
+        SwitchCase: 1
+      }
+    ],
     'jsx-quotes': [2, 'prefer-single'],
-    'key-spacing': [2, {
-      'beforeColon': false,
-      'afterColon': true
-    }],
-    'keyword-spacing': [2, {
-      'before': true,
-      'after': true
-    }],
-    'new-cap': [2, {
-      'newIsCap': true,
-      'capIsNew': false
-    }],
+    'key-spacing': [
+      2,
+      {
+        beforeColon: false,
+        afterColon: true
+      }
+    ],
+    'keyword-spacing': [
+      2,
+      {
+        before: true,
+        after: true
+      }
+    ],
+    'new-cap': [
+      2,
+      {
+        newIsCap: true,
+        capIsNew: false
+      }
+    ],
     'new-parens': 2,
     'no-array-constructor': 2,
     'no-caller': 2,
@@ -102,17 +149,23 @@ module.exports = {
     'no-irregular-whitespace': 2,
     'no-iterator': 2,
     'no-label-var': 2,
-    'no-labels': [2, {
-      'allowLoop': false,
-      'allowSwitch': false
-    }],
+    'no-labels': [
+      2,
+      {
+        allowLoop: false,
+        allowSwitch: false
+      }
+    ],
     'no-lone-blocks': 2,
     'no-mixed-spaces-and-tabs': 2,
     'no-multi-spaces': 2,
     'no-multi-str': 2,
-    'no-multiple-empty-lines': [2, {
-      'max': 1
-    }],
+    'no-multiple-empty-lines': [
+      2,
+      {
+        max: 1
+      }
+    ],
     'no-native-reassign': 2,
     'no-negated-in-lhs': 2,
     'no-new-object': 2,
@@ -140,62 +193,126 @@ module.exports = {
     'no-undef-init': 2,
     'no-unexpected-multiline': 2,
     'no-unmodified-loop-condition': 2,
-    'no-unneeded-ternary': [2, {
-      'defaultAssignment': false
-    }],
+    'no-unneeded-ternary': [
+      2,
+      {
+        defaultAssignment: false
+      }
+    ],
     'no-unreachable': 2,
     'no-unsafe-finally': 2,
-    'no-unused-vars': [2, {
-      'vars': 'all',
-      'args': 'none'
-    }],
+    'no-unused-vars': [
+      2,
+      {
+        vars: 'all',
+        args: 'none'
+      }
+    ],
     'no-useless-call': 2,
     'no-useless-computed-key': 2,
     'no-useless-constructor': 2,
     'no-useless-escape': 0,
     'no-whitespace-before-property': 2,
     'no-with': 2,
-    'one-var': [2, {
-      'initialized': 'never'
-    }],
-    'operator-linebreak': [2, 'after', {
-      'overrides': {
-        '?': 'before',
-        ':': 'before'
+    'one-var': [
+      2,
+      {
+        initialized: 'never'
       }
-    }],
+    ],
+    'operator-linebreak': [
+      2,
+      'after',
+      {
+        overrides: {
+          '?': 'before',
+          ':': 'before'
+        }
+      }
+    ],
     'padded-blocks': [2, 'never'],
-    'quotes': [2, 'single', {
-      'avoidEscape': true,
-      'allowTemplateLiterals': true
-    }],
-    'semi': [2, 'never'],
-    'semi-spacing': [2, {
-      'before': false,
-      'after': true
-    }],
+    quotes: [
+      2,
+      'single',
+      {
+        avoidEscape: true,
+        allowTemplateLiterals: true
+      }
+    ],
+    semi: [2, 'never'],
+    'semi-spacing': [
+      2,
+      {
+        before: false,
+        after: true
+      }
+    ],
     'space-before-blocks': [2, 'always'],
-    'space-before-function-paren': [2, 'never'],
+    'space-before-function-paren': [
+      2,
+      { anonymous: 'never', named: 'never', asyncArrow: 'always' }
+    ],
     'space-in-parens': [2, 'never'],
     'space-infix-ops': 2,
-    'space-unary-ops': [2, {
-      'words': true,
-      'nonwords': false
-    }],
-    'spaced-comment': [2, 'always', {
-      'markers': ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-    }],
+    'space-unary-ops': [
+      2,
+      {
+        words: true,
+        nonwords: false
+      }
+    ],
+    'object-curly-spacing': [2, 'always'],
+    'spaced-comment': [
+      2,
+      'always',
+      {
+        markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
+      }
+    ],
     'template-curly-spacing': [2, 'never'],
     'use-isnan': 2,
     'valid-typeof': 2,
     'wrap-iife': [2, 'any'],
     'yield-star-spacing': [2, 'both'],
-    'yoda': [2, 'never'],
+    yoda: [2, 'never'],
     'prefer-const': 2,
     'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0,
-    'object-curly-spacing': [2, 'always', {
-      objectsInObjects: false
-    }],
-    'array-bracket-spacing': [2, 'never']
+    'array-bracket-spacing': [2, 'never'],
+    'spellcheck/spell-checker': [
+      'warn',
+      {
+        comments: true,
+        strings: false,
+        identifiers: false,
+        lang: 'en_US',
+        skipWords: [
+          'echarts',
+          'resize',
+          'vue',
+          'eslint',
+          'babel',
+          'jsx',
+          'scss',
+          'v-deep',
+          'calc',
+          'vw',
+          'vh',
+          'px',
+          'rgba',
+          'rgb',
+          'var',
+          'lang',
+          'scoped',
+          'pdf',
+          'rbac'
+        ],
+        skipIfMatch: [
+          'http://[^s]*',
+          '^[-\\w]+/[-\\w\\.]+$',
+          String.raw`^\/api\/[a-z0-9\/._-]+$`
+        ],
+        minLength: 3
+      }
+    ]
   }
 }

.prettierignore

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

.prettierrc

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

.prettierrc.js

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

Dockerfile

@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20250709_063112 AS stage-build
+FROM jumpserver/lina-base:20251204_081759 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` 配置正确。

babel.config.js

@@ -1,8 +1,14 @@
 module.exports = {
-  presets: [
-    '@vue/app'
-  ],
+  presets: ['@vue/cli-plugin-babel/preset'],
   plugins: [
     '@babel/plugin-proposal-optional-chaining',
+    [
+      '@vue/babel-plugin-jsx',
+      {
+        // Keep Vue 2-style v-model and onXXX handlers compatible where used
+        transformOn: true,
+        mergeProps: true
+      }
+    ]
   ]
 }

jest.config.js

@@ -1,7 +1,8 @@
 module.exports = {
   moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
+  testEnvironment: 'jsdom',
   transform: {
-    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.vue$': '@vue/vue3-jest',
     '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
       'jest-transform-stub',
     '^.+\\.jsx?$': 'babel-jest'
@@ -9,7 +10,6 @@ module.exports = {
   moduleNameMapper: {
     '^@/(.*)$': '<rootDir>/src/$1'
   },
-  snapshotSerializers: ['jest-serializer-vue'],
   testMatch: [
     '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
   ],

mock/index.js

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

package.json

@@ -1,148 +1,150 @@
 {
-    "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",
-        "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-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",
+    "prepare": "husky install || true"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+    "@fontsource/open-sans": "^5.2.7",
+    "@kangc/v-md-editor": "^1.7.12",
+    "@traptitech/markdown-it-katex": "^3.6.0",
+    "@vue/compat": "^3.4.27",
+    "@ztree/ztree_v3": "3.5.48",
+    "axios": "^1.7.9",
+    "axios-retry": "^4.5.0",
+    "babel-loader": "^10.0.0",
+    "babel-runtime": "^6.26.0",
+    "caniuse-lite": "^1.0.30001642",
+    "core-js": "^3.47.0",
+    "cron-parser": "^4.9.0",
+    "crypto-js": "^4.2.0",
+    "css-color-function": "^1.3.3",
+    "decimal.js": "^10.6.0",
+    "deepmerge": "^4.3.1",
+    "dompurify": "^3.3.1",
+    "echarts": "^5.5.0",
+    "element-plus": "^2.8.4",
+    "eslint-plugin-html": "^6.0.0",
+    "highlight.js": "^11.11.1",
+    "install": "^0.13.0",
+    "jquery": "^3.7.1",
+    "js-cookie": "^3.0.5",
+    "jsencrypt": "^3.5.4",
+    "less": "^3.10.3",
+    "lodash": "^4.17.21",
+    "markdown-it": "^13.0.2",
+    "markdown-it-link-attributes": "^4.0.1",
+    "mitt": "^3.0.1",
+    "moment": "^2.30.1",
+    "moment-parseformat": "^4.0.0",
+    "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
+    "path-browserify": "^1.0.1",
+    "path-to-regexp": "3.3.0",
+    "socket.io-client": "^4.8.2",
+    "sortablejs": "^1.15.6",
+    "uuid": "^10.0.0",
+    "v-sanitize": "^0.0.14",
+    "vue": "^3.4.27",
+    "vue-codemirror": "4.0.6",
+    "vue-cookie-next": "^1.0.0",
+    "vue-echarts": "^8.0.1",
+    "vue-i18n": "^9.9.0",
+    "vue-json-editor": "^1.4.3",
+    "vue-markdown": "^2.2.4",
+    "vue-password-strength-meter": "^1.7.2",
+    "vue-router": "^4.3.0",
+    "vue-select": "^3.20.4",
+    "vuejs-logger": "^1.5.4",
+    "vuex": "^4.1.0",
+    "watermark-js-plus": "^1.6.3",
+    "xss": "^1.0.15",
+    "xterm": "^4.5.0",
+    "xterm-addon-fit": "^0.3.0",
+    "zxcvbn": "^4.4.2"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.28.5",
+    "@babel/eslint-parser": "^7.24.7",
+    "@babel/register": "^7.28.3",
+    "@vue/babel-plugin-jsx": "^1.2.2",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.4.27",
+    "@vue/test-utils": "^2.4.2",
+    "@vue/vue3-jest": "^29.2.4",
+    "autoprefixer": "^10.4.20",
+    "babel-jest": "^30.2.0",
+    "balanced-match": "^3.0.1",
+    "chalk": "^5.6.2",
+    "color-name": "^2.1.0",
+    "compression-webpack-plugin": "^11.1.0",
+    "connect": "^3.7.0",
+    "deasync": "^0.1.31",
+    "entities": "^7.0.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-spellcheck": "^0.0.20",
+    "eslint-plugin-vue": "^9.33.0",
+    "eslint-plugin-vue-i18n": "^0.3.0",
+    "github-markdown-css": "^5.8.1",
+    "html-webpack-plugin": "^5.5.3",
+    "husky": "^9.1.7",
+    "less-loader": "^11.1.4",
+    "lint-staged": "^16.2.7",
+    "mockjs": "^1.1.0",
+    "prettier": "^3.7.4",
+    "pretty-bytes": "^7.1.0",
+    "runjs": "^4.4.1",
+    "sass": "^1.83.0",
+    "sass-loader": "^16.0.6",
+    "script-loader": "0.7.2",
+    "semver": "^7.7.3",
+    "serve-static": "^1.16.3",
+    "strip-ansi": "^7.1.2",
+    "svg-sprite-loader": "^6.0.11",
+    "svgo": "^4.0.0",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-i18n-extract": "^2.0.7",
+    "vue-loader": "^17.0.0",
+    "webpack": "^5.104.1"
+  },
+  "engines": {
+    "node": ">=16",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 4 versions",
+    "not ie <= 11"
+  ],
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix"
+    ]
+  }
 }

public/index.html

@@ -9,7 +9,6 @@
     <meta content="no-cache" http-equiv="Cache">
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <title><%= webpackConfig.name %></title>
-    <link href="<%= BASE_URL %>theme/element-ui.css" rel="stylesheet">
     <style>
         #loading {
             position: fixed;

public/theme/element-extra.css

@@ -91,7 +91,7 @@
 }
 
 
-td .el-button.el-button--mini {
+td .el-button.el-button--small {
   padding: 1px 6px;
   line-height: 1.5;
 

src/App.vue

@@ -1,6 +1,7 @@
 <template>
   <div id="app">
-    <router-view v-if="isRouterAlive" />
+    <!-- 使用 key 而不是 v-if 来强制重新渲染 router-view，避免根节点被完全卸载导致的 DOM insertBefore 错误 -->
+    <router-view :key="isRouterAlive" />
   </div>
 </template>
 
@@ -43,6 +44,30 @@ export default {
       }
     }
   },
+  // Vue 3 错误捕获钩子 - 捕获子组件错误，防止整个应用崩溃
+  errorCaptured(err, instance, info) {
+    // 在开发环境下打印详细错误信息
+    if (process.env.NODE_ENV === 'development') {
+      console.error('Error Captured in App:', err)
+      console.error('Component instance:', instance)
+      console.error('Error info:', info)
+    } else {
+      console.error('Component Error:', err?.message || err)
+    }
+
+    // 尝试显示友好的错误提示
+    try {
+      if (this.$message && typeof this.$message.error === 'function') {
+        this.$message.error(err?.message || '组件加载出错，请刷新页面重试')
+      }
+    } catch (e) {
+      // 如果 message 服务不可用，忽略
+    }
+
+    // 返回 false 可以阻止错误继续向上传播
+    // 但这里返回 true，让全局错误处理器也能处理
+    return true
+  },
   methods: {
     getWaterMarkFields() {
       const user = this.currentUser
@@ -70,7 +95,9 @@ export default {
       const safeFields = { ...fields, ...allVariables }
 
       // 安全解析模板
-      return new Function(...Object.keys(safeFields), `return \`${template}\`;`)(...Object.values(safeFields))
+      return new Function(...Object.keys(safeFields), `return \`${template}\`;`)(
+        ...Object.values(safeFields)
+      )
     },
 
     createWatermark() {

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'
   })
 }
@@ -54,13 +54,13 @@ function SetToDefaultStorage(url) {
 
 export function SetToDefaultCommandStorage(id) {
   return SetToDefaultStorage(
-    `/api/v1/terminal/command-storages/${id}/`,
+    `/api/v1/terminal/command-storages/${id}/`
   )
 }
 
 export function SetToDefaultReplayStorage(id) {
   return SetToDefaultStorage(
-    `/api/v1/terminal/replay-storages/${id}/`,
+    `/api/v1/terminal/replay-storages/${id}/`
   )
 }
 

src/assets/img/cloud/proxmox.svg

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

src/components/Apps/AccountCreateUpdateForm/const.js

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

src/components/Apps/AccountCreateUpdateForm/index.vue

@@ -2,16 +2,16 @@
   <AutoDataForm
     v-if="!loading"
     ref="AutoDataForm"
+    v-bind="$data"
     :class="addTemplate? '': 'account-add'"
     :submit-btn-text="submitBtnText"
-    v-bind="$data"
     @submit="confirm"
   />
 </template>
 
 <script>
 import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
 
 export default {
@@ -63,7 +63,7 @@ export default {
       encryptedFields: ['secret'],
       fields: [
         [this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
-        [this.$t('Asset'), ['assets']],
+        [this.$t('Asset'), ['nodes', 'assets']],
         [this.$t('Secret'), [
           'secret_type', 'password', 'ssh_key', 'token',
           'access_key', 'passphrase', 'api_key',
@@ -172,7 +172,7 @@ export default {
 
 <style lang='scss' scoped>
 .account-add {
-  ::v-deep .el-form-item {
+  :deep(.el-form-item) {
     //margin-bottom: 5px;
 
     .help-block {
@@ -180,7 +180,7 @@ export default {
     }
   }
 
-  ::v-deep .form-group-header {
+  :deep(.form-group-header) {
     .hr-line-dashed {
       //margin: 5px 0;
     }

src/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue

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

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

@@ -1,7 +1,7 @@
-<template v-if="iVisible">
+<template>
   <Drawer
+    v-model:visible="iVisible"
     :title="title"
-    :visible="iVisible"
     class="drawer"
     @close-drawer="handleCloseDrawer"
   >
@@ -26,6 +26,7 @@ import Drawer from '@/components/Drawer/index.vue'
 import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
 import IBox from '@/components/Common/IBox/index.vue'
 import Page from '@/layout/components/Page/index.vue'
+import vModelMixin from '@/utils/vue/vModelMixin'
 
 export default {
   name: 'CreateAccountDialog',
@@ -35,6 +36,7 @@ export default {
     Page,
     AccountCreateUpdateForm
   },
+  mixins: [vModelMixin('visible')],
   props: {
     visible: {
       type: Boolean,
@@ -54,11 +56,12 @@ export default {
     },
     title: {
       type: String,
-      default: function() {
-        return this.$t('AddAccount')
+      default() {
+        return 'AddAccount'
       }
     }
   },
+  emits: ['update:visible', 'add', 'bulk-create-done'],
   data() {
     return {
       loading: false,
@@ -68,14 +71,6 @@ export default {
   computed: {
     protocols() {
       return this.asset ? this.asset.protocol : []
-    },
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
     }
   },
   methods: {
@@ -93,23 +88,33 @@ 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
         }
       }
-      this.$axios.post(url, data, {
-        disableFlashErrorMsg: iVisible
-      }).then((data) => {
-        this.handleResult(data, null)
-        this.iVisible = iVisible
-        if (!iVisible) {
-          this.$emit('add', true)
-        }
-      }).catch(error => {
-        this.iVisible = true
-        this.handleResult(null, error)
-      })
+      this.$axios
+        .post(url, data, {
+          disableFlashErrorMsg: iVisible
+        })
+        .then(data => {
+          this.handleResult(data, null)
+          this.$emit('update:visible', iVisible)
+          if (!iVisible) {
+            this.$emit('add', true)
+          }
+        })
+        .catch(error => {
+          if (error?.response?.data?.code === 'no_valid_assets') {
+            this.$message.error(error?.response?.data?.detail)
+            return
+          }
+          this.$emit('update:visible', true)
+          this.handleResult(null, error)
+        })
     },
     editAccount(form) {
       const data = { ...form }
@@ -123,11 +128,14 @@ export default {
           this.handleAccountOperation(this.account.id, 'move-to-assets', data)
           break
         default:
-          this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
-            this.iVisible = false
-            this.$emit('add', true)
-            this.$message.success(this.$tc('UpdateSuccessMsg'))
-          }).catch(error => this.setFieldError(error))
+          this.$axios
+            .patch(`/api/v1/accounts/accounts/${this.account.id}/`, data)
+            .then(() => {
+              this.$emit('update:visible', false)
+              this.$emit('add', true)
+              this.$message.success(this.$tc('UpdateSuccessMsg'))
+            })
+            .catch(error => this.setFieldError(error))
       }
     },
     handleResult(resp, error) {
@@ -164,7 +172,7 @@ export default {
           let current = key
           let errorTips = data[current]
           if (errorTips instanceof Array) {
-            errorTips = _.filter(errorTips, (item) => Object.keys(item).length > 0)
+            errorTips = _.filter(errorTips, item => Object.keys(item).length > 0)
             for (const i of errorTips) {
               if (i instanceof Object) {
                 err += i?.port?.join(',')
@@ -183,15 +191,18 @@ export default {
       }
     },
     handleCloseDrawer() {
-      this.iVisible = false
+      this.$emit('update:visible', false)
       // Reflect.deleteProperty(this.$route.query, 'flag')
     },
     handleAccountOperation(id, path, data) {
-      this.$axios.post(`/api/v1/accounts/accounts/${id}/${path}/`, data).then((res) => {
-        this.iVisible = false
-        this.$emit('add', true)
-        this.handleResult(res, null)
-      }).catch(error => this.handleResult(null, error))
+      this.$axios
+        .post(`/api/v1/accounts/accounts/${id}/${path}/`, data)
+        .then(res => {
+          this.$emit('update:visible', false)
+          this.$emit('add', true)
+          this.handleResult(res, null)
+        })
+        .catch(error => this.handleResult(null, error))
     }
   }
 }
@@ -199,8 +210,7 @@ export default {
 
 <style lang="scss" scoped>
 .drawer {
-  ::v-deep .el-drawer__body {
-
+  :deep(.el-drawer__body) {
     .el-form {
       margin-right: 30px;
     }

src/components/Apps/AccountListTable/AccountList.vue

@@ -9,50 +9,55 @@
     />
     <ViewSecret
       v-if="showViewSecretDialog"
+      v-model:visible="showViewSecretDialog"
       :account="account"
       :url="secretUrl"
-      :visible.sync="showViewSecretDialog"
     />
     <UpdateSecretInfo
       v-if="showUpdateSecretDialog"
+      v-model:visible="showUpdateSecretDialog"
       :account="account"
-      :visible.sync="showUpdateSecretDialog"
-      @updateAuthDone="onUpdateAuthDone"
+      @update-auth-done="onUpdateAuthDone"
     />
     <AccountCreateUpdate
       v-if="showAddDialog"
+      v-model:visible="showAddDialog"
       :account="account"
       :add-template="addTemplate"
       :asset="iAsset"
       :title="accountCreateUpdateTitle"
-      :visible.sync="showAddDialog"
       @add="addAccountSuccess"
       @bulk-create-done="showBulkCreateResult($event)"
     />
     <ResultDialog
       v-if="showResultDialog"
+      v-model:visible="showResultDialog"
       :result="createAccountResults"
-      :visible.sync="showResultDialog"
       @close-all="closeAll"
     />
     <AccountBulkUpdateDialog
       v-if="updateSelectedDialogSetting.visible"
-      :visible.sync="updateSelectedDialogSetting.visible"
       v-bind="updateSelectedDialogSetting"
+      v-model:visible="updateSelectedDialogSetting.visible"
       @update="handleAccountBulkUpdate"
     />
     <PasswordHistoryDialog
       v-if="showPasswordHistoryDialog"
+      v-model:visible="showPasswordHistoryDialog"
       :account="currentAccountColumn"
-      :visible.sync="showPasswordHistoryDialog"
     />
   </div>
 </template>
 
 <script>
 import { mapGetters } from 'vuex'
-import { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const'
-import { openTaskPage } from '@/utils/jms'
+import {
+  accountOtherActions,
+  accountQuickFilters,
+  connectivityMeta,
+  isDirectoryServiceAccount
+} from './const'
+import { openTaskPage } from '@/utils/jms/index'
 import {
   AccountConnectFormatter,
   ActionsFormatter,
@@ -85,9 +90,7 @@ export default {
     },
     exportUrl: {
       type: String,
-      default() {
-        return this.url.replace('/accounts/accounts/', '/accounts/account-secrets/')
-      }
+      default: ''
     },
     hasLeftActions: {
       type: Boolean,
@@ -123,14 +126,11 @@ export default {
     },
     columnsMeta: {
       type: Object,
-      default: () => {
-      }
+      default: () => {}
     },
     columnsDefault: {
       type: Array,
-      default: () => ([
-        'name', 'username', 'secret', 'asset', 'platform', 'connect'
-      ])
+      default: () => ['name', 'username', 'secret', 'asset', 'platform', 'connect']
     },
     headerExtraActions: {
       type: Array,
@@ -161,6 +161,8 @@ export default {
       showResultDialog: false,
       showAddDialog: false,
       showAddTemplateDialog: false,
+      iExportUrl:
+        this.exportUrl || this.url.replace('/accounts/accounts/', '/accounts/account-secrets/'),
       detailDrawer: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
       createAccountResults: [],
       iAsset: this.asset,
@@ -224,7 +226,7 @@ export default {
           },
           ds: {
             width: '100px',
-            formatter: (row) => {
+            formatter: row => {
               if (row.ds && row.ds['domain_name']) {
                 return row.ds['domain_name']
               } else {
@@ -292,7 +294,8 @@ export default {
               hasUpdate: false, // can set function(row, value)
               hasDelete: true, // can set function(row, value)
               hasClone: false,
-              canDelete: ({ row }) => vm.$hasPerm('accounts.delete_account') && !isDirectoryServiceAccount(row, this),
+              canDelete: ({ row }) =>
+                vm.$hasPerm('accounts.delete_account') && !isDirectoryServiceAccount(row, this),
               moreActionsTitle: this.$t('More'),
               extraActions: accountOtherActions(this)
             }
@@ -341,7 +344,7 @@ export default {
             can: () => {
               return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
             },
-            callback: async() => {
+            callback: async () => {
               await this.getAssetDetail()
               setTimeout(() => {
                 vm.iAsset = this.asset
@@ -360,21 +363,27 @@ export default {
             type: 'primary',
             icon: 'verify',
             can: ({ selectedRows }) => {
-              return selectedRows.length > 0 &&
-                ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
-                !this.$store.getters.currentOrgIsRoot
+              return (
+                selectedRows.length > 0 &&
+                ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(
+                  selectedRows[0].asset.type.value
+                ) === -1 &&
+                !this.$store.getters.currentOrgIsRoot &&
+                vm.$hasPerm('accounts.verify_account')
+              )
             },
             callback: function({ selectedRows }) {
               const ids = selectedRows.map(v => {
                 return v.id
               })
-              this.$axios.post(
-                '/api/v1/accounts/accounts/tasks/',
-                { action: 'verify', accounts: ids }).then(res => {
-                openTaskPage(res['task'])
-              }).catch(err => {
-                this.$message.error(this.$tc('BulkVerifyErrorMsg' + ' ' + err))
-              })
+              this.$axios
+                .post('/api/v1/accounts/accounts/tasks/', { action: 'verify', accounts: ids })
+                .then(res => {
+                  openTaskPage(res['task'])
+                })
+                .catch(err => {
+                  this.$message.error(this.$tc('BulkVerifyErrorMsg' + ' ' + err))
+                })
             }.bind(this)
           },
           {
@@ -389,13 +398,14 @@ export default {
               const ids = selectedRows.map(v => {
                 return v.id
               })
-              this.$axios.patch(
-                '/api/v1/accounts/accounts/clear-secret/',
-                { account_ids: ids }).then(() => {
-                this.$message.success(this.$tc('ClearSuccessMsg'))
-              }).catch(err => {
-                this.$message.error(this.$tc('ClearErrorMsg' + ' ' + err))
-              })
+              this.$axios
+                .patch('/api/v1/accounts/accounts/clear-secret/', { account_ids: ids })
+                .then(() => {
+                  this.$message.success(this.$tc('ClearSuccessMsg'))
+                })
+                .catch(err => {
+                  this.$message.error(this.$tc('ClearErrorMsg' + ' ' + err))
+                })
             }.bind(this)
           },
           {
@@ -403,10 +413,12 @@ export default {
             title: this.$t('UpdateSelected'),
             icon: 'batch-update',
             can: ({ selectedRows }) => {
-              return selectedRows.length > 0 &&
+              return (
+                selectedRows.length > 0 &&
                 !this.$store.getters.currentOrgIsRoot &&
                 vm.$hasPerm('accounts.change_account') &&
                 selectedRows.every(i => i.secret_type.value === selectedRows[0].secret_type.value)
+              )
             },
             callback: ({ selectedRows }) => {
               vm.updateSelectedDialogSetting.selectedRows = selectedRows
@@ -442,7 +454,11 @@ export default {
   watch: {
     url(iNew) {
       this.$set(this.tableConfig, 'url', iNew)
-      this.$set(this.headerActions.exportOptions, 'url', iNew.replace(/(.*)accounts/, '$1account-secrets'))
+      this.$set(
+        this.headerActions.exportOptions,
+        'url',
+        iNew.replace(/(.*)accounts/, '$1account-secrets')
+      )
     }
   },
   mounted() {
@@ -478,7 +494,9 @@ export default {
       this.$refs.ListTable.reloadTable()
     },
     async getAssetDetail() {
-      const { query: { asset }} = this.$route
+      const {
+        query: { asset }
+      } = this.$route
       if (asset) {
         this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
       }

src/components/Apps/AccountListTable/BulkCreateResultDialog.vue

@@ -1,8 +1,8 @@
 <template>
   <Dialog
+    v-bind="$attrs"
     :show-cancel="false"
     :title="title"
-    v-bind="$attrs"
     @confirm="closeDialog"
     v-on="$listeners"
   >
@@ -13,7 +13,7 @@
   </Dialog>
 </template>
 
-<script>
+<script lang="jsx">
 import Dialog from '@/components/Dialog/index.vue'
 import DataTable from '@/components/Table/DataTable/index.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'),
@@ -110,10 +114,7 @@ export default {
   color: var(--color-success);
 }
 
-.color-default {
-}
-
-::v-deep .el-data-table .el-table .el-table__row > td > div > span {
+:deep(.el-data-table .el-table .el-table__row > td > div > span) {
   white-space: inherit;
 }
 

src/components/Apps/AccountListTable/PasswordHistoryDialog.vue

@@ -1,5 +1,9 @@
 <template>
-  <GenericListTableDialog :visible.sync="iVisible" v-bind="config" />
+  <GenericListTableDialog
+    v-bind="config"
+    :visible="visible"
+    @update:visible="$emit('update:visible', $event)"
+  />
 </template>
 
 <script>
@@ -20,6 +24,7 @@ export default {
       default: false
     }
   },
+  emits: ['update:visible'],
   data() {
     return {
       config: {
@@ -59,20 +64,8 @@ export default {
         }
       }
     }
-  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
   }
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/components/Apps/AccountListTable/RemoveAccount.vue

@@ -1,8 +1,8 @@
 <template>
   <Dialog
+    v-model:visible="show"
     :destroy-on-close="true"
     :show-cancel="false"
-    :visible.sync="show"
     :width="'50'"
     v-bind="$attrs"
     @confirm="accountConfirmHandle"
@@ -12,7 +12,7 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { openTaskPage } from '@/utils/jms'
+import { openTaskPage } from '@/utils/jms/index'
 
 export default {
   name: 'RemoveAccount',
@@ -65,7 +65,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.item-textarea ::v-deep .el-textarea__inner {
+.item-textarea :deep(.el-textarea__inner) {
   height: 110px;
 }
 
@@ -78,12 +78,12 @@ export default {
     border-bottom: none;
   }
 
-  ::v-deep .el-form-item__label {
+  :deep(.el-form-item__label) {
     padding-right: 20px;
     line-height: 30px;
   }
 
-  ::v-deep .el-form-item__content {
+  :deep(.el-form-item__content) {
     line-height: 30px;
 
     pre {

src/components/Apps/AccountListTable/UpdateSecretInfo.vue

@@ -1,11 +1,10 @@
 <template>
   <Dialog
+    v-model:visible="iVisible"
     :destroy-on-close="true"
     :show-buttons="false"
     :title="$tc('UpdateAssetUserToken')"
-    :visible.sync="iVisible"
     width="800px"
-    v-on="$listeners"
   >
     <AutoDataForm
       :fields="fields"
@@ -23,11 +22,13 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
+import vModelMixin from '@/utils/vue/vModelMixin'
 
 export default {
   name: 'UpdateSecretInfo',
+  mixins: [vModelMixin('visible')],
   components: {
     AutoDataForm,
     Dialog
@@ -42,12 +43,19 @@ export default {
       default: false
     }
   },
+  emits: ['update:visible', 'update-auth-done'],
   data() {
     const accountMeta = accountFieldsMeta(this)
     return {
       fields: [
-        'name', 'secret_type', 'password', 'ssh_key', 'token',
-        'access_key', 'passphrase', 'api_key'
+        'name',
+        'secret_type',
+        'password',
+        'ssh_key',
+        'token',
+        'access_key',
+        'passphrase',
+        'api_key'
       ],
       fieldsMeta: {
         ...accountMeta,
@@ -64,34 +72,25 @@ export default {
       }
     }
   },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
-  },
   methods: {
     handleConfirm(form) {
       const secretType = this.account.secret_type.value
       const data = {
         secret: encryptPassword(form[secretType])
       }
-      this.$axios.patch(
-        `/api/v1/accounts/accounts/${this.account.id}/`,
-        data,
-        { disableFlashErrorMsg: true }
-      ).then(res => {
-        this.$message.success(this.$tc('UpdateSuccessMsg'))
-        this.iVisible = false
-      }).catch(err => {
-        const errMsg = Object.values(err.response.data).join(', ')
-        this.$message.error(this.$tc('UpdateErrorMsg') + ' ' + errMsg)
-        this.iVisible = false
-      })
+      this.$axios
+        .patch(`/api/v1/accounts/accounts/${this.account.id}/`, data, {
+          disableFlashErrorMsg: true
+        })
+        .then(res => {
+          this.$message.success(this.$tc('UpdateSuccessMsg'))
+          this.$emit('update:visible', false)
+        })
+        .catch(err => {
+          const errMsg = Object.values(err.response.data).join(', ')
+          this.$message.error(this.$tc('UpdateErrorMsg') + ' ' + errMsg)
+          this.$emit('update:visible', false)
+        })
     },
     handleCancel() {
       this.$emit('update:visible', false)

src/components/Apps/AccountListTable/ViewSecret.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <Dialog
+      v-bind="$attrs"
+      v-model:visible="showSecret"
       :destroy-on-close="true"
       :show-cancel="false"
-      :title="title"
-      :visible.sync="showSecret"
+      :title="iTitle"
       :width="'50'"
-      v-bind="$attrs"
       @confirm="accountConfirmHandle"
       v-on="$listeners"
     >
@@ -20,10 +20,12 @@
         <el-form-item :label="secretTypeLabel">
           <SecretViewerFormatter
             :cell-value="secretInfo.secret"
-            :col="{ formatterArgs: {
-              name: account['name'],
-              secretType: secretType || ''
-            }}"
+            :col="{
+              formatterArgs: {
+                name: account['name'],
+                secretType: secretType || ''
+              }
+            }"
             @input="onShowKeyCopyFormatterChange"
           />
         </el-form-item>
@@ -36,12 +38,12 @@
         <el-form-item :label="$tc('DateUpdated')">
           <span>{{ account['date_updated'] | date }}</span>
         </el-form-item>
-        <el-form-item v-if="showPasswordRecord" v-perms="'accounts.view_accountsecret'" :label="$tc('PasswordRecord')">
-          <el-link
-            :underline="false"
-            type="success"
-            @click="showHistoryDialog"
-          >
+        <el-form-item
+          v-if="showPasswordRecord"
+          v-perms="'accounts.view_accountsecret'"
+          :label="$tc('PasswordRecord')"
+        >
+          <el-link :underline="false" type="success" @click="showHistoryDialog">
             <span style="padding-right: 30px">
               {{ versions }}
             </span>
@@ -51,17 +53,17 @@
     </Dialog>
     <PasswordHistoryDialog
       v-if="showPasswordHistoryDialog"
+      v-model:visible="showPasswordHistoryDialog"
       :account="account"
-      :visible.sync="showPasswordHistoryDialog"
     />
   </div>
 </template>
 
-<script>
+<script lang="jsx">
 import Dialog from '@/components/Dialog/index.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
 import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 
 export default {
   name: 'ShowSecretInfo',
@@ -89,15 +91,14 @@ export default {
     },
     title: {
       type: String,
-      default: function() {
-        return this.$tc('Detail')
-      }
+      default: ''
     },
     showPasswordRecord: {
       type: Boolean,
       default: true
     }
   },
+  emits: ['update:visible'],
   data() {
     return {
       modifiedSecret: '',
@@ -107,6 +108,7 @@ export default {
       mfaDialogVisible: true,
       sshKeyFingerprint: '-',
       historyCount: 0,
+      iTitle: this.title || this.$tc('Detail'),
       showPasswordHistoryDialog: false
     }
   },
@@ -140,13 +142,14 @@ export default {
         name: this.secretInfo.name,
         secret: encryptPassword(this.modifiedSecret)
       }
-      const url = this.type === 'account' ? `/api/v1/accounts/accounts` : `/api/v1/accounts/account-templates`
+      const url =
+        this.type === 'account' ? `/api/v1/accounts/accounts` : `/api/v1/accounts/account-templates`
       this.$axios.patch(`${url}/${this.account.id}/`, params).then(() => {
         this.$message.success(this.$tc('UpdateSuccessMsg'))
       })
     },
     showSecretDialog() {
-      return this.$axios.get(this.url, { disableFlashErrorMsg: true }).then((res) => {
+      return this.$axios.get(this.url, { disableFlashErrorMsg: true }).then(res => {
         this.secretInfo = res
         this.sshKeyFingerprint = res?.spec_info?.ssh_key_fingerprint || '-'
         this.showSecret = true
@@ -167,54 +170,54 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .item-textarea ::v-deep .el-textarea__inner {
-    height: 110px;
+.item-textarea :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;
-      }
-    }
+  :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;
-  }
+  :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/AccountListTable/const.js

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

src/components/Apps/AssetSelect/dialog.vue

@@ -161,11 +161,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.page ::v-deep .page-heading {
+.page :deep(.page-heading) {
   display: none;
 }
 
-.el-dialog__wrapper ::v-deep .el-dialog__body {
+.el-dialog__wrapper :deep(.el-dialog__body) {
   padding: 0 0 0 3px;
 
   .tree-table {
@@ -191,11 +191,11 @@ export default {
   }
 }
 
-.page ::v-deep .treebox .ztree {
+.page :deep(.treebox .ztree) {
 
 }
 
-.asset-select-dialog ::v-deep .el-icon-circle-check {
+.asset-select-dialog :deep(.el-icon-circle-check) {
   display: none;
 }
 </style>

src/components/Apps/AssetSelect/index.vue

@@ -11,12 +11,12 @@
     <AssetSelectDialog
       v-if="dialogVisible"
       ref="dialog"
+      v-model:visible="dialogVisible"
       :base-node-url="baseNodeUrl"
       :base-url="baseUrl"
       :tree-setting="treeSetting"
       :tree-url-query="treeUrlQuery"
       :value="value"
-      :visible.sync="dialogVisible"
       v-bind="$attrs"
       @cancel="handleCancel"
       @confirm="handleConfirm"
@@ -135,11 +135,11 @@ export default {
   width: 100%;
 }
 
-.page ::v-deep .page-heading {
+.page :deep(.page-heading) {
   display: none;
 }
 
-.el-dialog__wrapper ::v-deep .el-dialog__body {
+.el-dialog__wrapper :deep(.el-dialog__body) {
   padding: 0 0 0 3px;
 
   .tree-table {
@@ -168,7 +168,7 @@ export default {
   }
 }
 
-.page ::v-deep .treebox {
+.page :deep(.treebox) {
   height: inherit !important;
 }
 </style>

src/components/Apps/AssetTreeTable/index.vue

@@ -1,7 +1,7 @@
 <template>
   <TreeTable
     ref="TreeList"
-    :active-menu.sync="treeTableConfig.activeMenu"
+    v-model:active-menu="treeTableConfig.activeMenu"
     :component="treeComponent"
     :table-config="tableConfig"
     :tree-tab-config="treeTableConfig"
@@ -20,7 +20,7 @@
 
 <script>
 import TreeTable from '../../Table/TreeTable/index.vue'
-import { setRouterQuery, setUrlParam } from '@/utils/common'
+import { setRouterQuery, setUrlParam } from '@/utils/common/index'
 import $ from '@/utils/jquery-vendor'
 
 export default {

src/components/Apps/AutomationParams/index.vue

@@ -1,12 +1,7 @@
 <template>
   <div>
     <div>
-      <el-button
-        :disabled="isDisabled"
-        size="mini"
-        type="primary"
-        @click="onOpenDialog"
-      >
+      <el-button :disabled="isDisabled" size="small" type="primary" @click="onOpenDialog">
         {{ $tc('Setting') }}
       </el-button>
     </div>
@@ -16,7 +11,7 @@
       :show-cancel="false"
       :show-confirm="false"
       :title="title"
-      :visible.sync="visible"
+      :visible="visible"
       v-bind="$attrs"
       width="60%"
       v-on="$listeners"
@@ -50,7 +45,7 @@ export default {
     title: {
       type: String,
       default: function() {
-        return this.$t('PushParams')
+        return 'PushParams'
       }
     },
     assets: {
@@ -127,21 +122,21 @@ export default {
       this.remoteMeta = data.actions[this.config.method.toUpperCase()] || {}
     },
     async getFilterPlatforms() {
-      return await this.$axios.post(
-        '/api/v1/assets/platforms/filter-nodes-assets/',
-        {
-          'node_ids': this.nodes,
-          'asset_ids': this.assets,
-          'platform_ids': this.platforms.map(i => i.id || i.pk || i)
-        }
-      )
+      return await this.$axios.post('/api/v1/assets/platforms/filter-nodes-assets/', {
+        node_ids: this.nodes,
+        asset_ids: this.assets,
+        platform_ids: this.platforms.map(i => i.id || i.pk || i)
+      })
     },
     async handleFieldChange() {
       const platforms = await this.getFilterPlatforms()
       let pushAccountMethods = platforms.map(i => i.automation[this.method])
       pushAccountMethods = _.uniq(pushAccountMethods)
       // 检测是否有可设置的推送方式
-      const hasCanSettingPushMethods = _.intersection(pushAccountMethods, Object.keys(this.remoteMeta))
+      const hasCanSettingPushMethods = _.intersection(
+        pushAccountMethods,
+        Object.keys(this.remoteMeta)
+      )
       this.setFormConfig(hasCanSettingPushMethods)
       this.isDisabled = hasCanSettingPushMethods.length <= 0
     },
@@ -152,14 +147,14 @@ export default {
       this.config.fields = []
       // Todo: 未来改成后端处理，生成 serializer, 这里就不用判断类型了
       const typeMapper = {
-        'string': 'input',
-        'boolean': 'switch'
+        string: 'input',
+        boolean: 'switch'
       }
 
       for (const method of methods) {
         const filterField = this.remoteMeta[method] || {}
         // 修改资产、节点时不点击设置按钮也需要获取form表单值暴露出去
-        if (this.form.hasOwnProperty(method)) {
+        if (Object.prototype.hasOwnProperty.call(this.form, method)) {
           newForm[method] = this.form[method]
         }
         fields.push([filterField.label, [method]])
@@ -199,5 +194,4 @@ export default {
 }
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>

src/components/Apps/BlockedIPs/index.vue

@@ -2,7 +2,7 @@
   <div>
     <div>
       <el-button
-        size="mini"
+        size="small"
         type="primary"
         @click="onOpenDialog"
       >
@@ -15,9 +15,10 @@
       :show-cancel="false"
       :show-confirm="false"
       :title="title"
-      :visible.sync="visible"
+      :visible="visible"
       v-bind="$attrs"
       width="40%"
+      @update:visible="$emit('update:visible', $event)"
       v-on="$listeners"
     >
       <BlockedIPList />
@@ -43,7 +44,7 @@ export default {
     title: {
       type: String,
       default: function() {
-        return this.$t('BlockedIPS')
+        return 'BlockedIPS'
       }
     },
     url: {

src/components/Apps/ChangeSecret/RecordViewSecret.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
     <Dialog
+      v-model:visible="showSecret"
       :destroy-on-close="true"
       :show-cancel="false"
-      :title="title"
-      :visible.sync="showSecret"
+      :title="iTitle"
       :width="'50'"
       v-bind="$attrs"
       @confirm="accountConfirmHandle"
@@ -53,16 +53,15 @@ export default {
     },
     title: {
       type: String,
-      default: function() {
-        return this.$tc('ViewSecret')
-      }
+      default: ''
     }
   },
   data() {
     return {
       secretInfo: {},
       showSecret: false,
-      mfaDialogVisible: true
+      mfaDialogVisible: true,
+      iTitle: this.title || this.$tc('ViewSecret')
     }
   },
   computed: {},
@@ -88,7 +87,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .item-textarea ::v-deep .el-textarea__inner {
+  .item-textarea :deep(.el-textarea__inner) {
     height: 110px;
   }
 
@@ -101,12 +100,12 @@ export default {
       border-bottom: none;
     }
 
-    ::v-deep .el-form-item__label {
+    :deep(.el-form-item__label) {
       padding-right: 20px;
       line-height: 30px;
     }
 
-    ::v-deep .el-form-item__content {
+    :deep(.el-form-item__content) {
       line-height: 30px;
 
       pre {

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

@@ -1,12 +1,60 @@
 <template>
   <div class="container">
-    <div v-if="hasPrompt" class="chat-action">
-      <Select2
-        v-model="select.value"
-        :disabled="isLoading || isSelectDisabled"
-        v-bind="select"
-        @change="onSelectChange"
-      />
+    <div class="chat-action">
+      <div class="model-select">
+        <Select2
+          v-model="select.value"
+          :disabled="isLoading || isSelectDisabled || loading || !options.length"
+          v-bind="select"
+          @change="onSelectChange"
+        />
+      </div>
+      <el-dropdown
+        :hide-on-click="false"
+        trigger="click"
+      >
+        <span class="el-dropdown-link">
+          <i class="fa fa-plug" />
+        </span>
+        <el-dropdown-menu slot="dropdown">
+          <div class="menu-section">
+            <div v-if="toolsLoading">
+              <i class="el-icon-loading" /> {{ $t('Loading') }}
+            </div>
+            <div v-else class="menu-body">
+              <div>
+                <div
+                  v-for="item in toolOptions"
+                  :key="item.value"
+                >
+                  <div style="padding: 0 10px">
+                    <i class="fa fa-wrench item-icon" />
+                    <span class="item-label">{{ item.label }}</span>
+                    &nbsp;&nbsp;&nbsp;
+                    <el-switch
+                      :value="selectedToolsSet.has(item.value)"
+                      @change="() => toggleTool(item.value)"
+                    />
+                  </div>
+                </div>
+                <div
+                  v-for="item in toolServerOptions"
+                  :key="item.value"
+                >
+                  <div>
+                    <i class="fa fa-server item-icon" />
+                    <span class="item-label">{{ item.label }}</span>
+                    <el-switch
+                      :value="selectedToolServersSet.has(item.value)"
+                      @change="() => toggleToolServer(item.value)"
+                    />
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </el-dropdown-menu>
+      </el-dropdown>
     </div>
     <div class="chat-input">
       <el-input
@@ -37,9 +85,37 @@ export default {
       type: Boolean,
       default: false
     },
-    hasPrompt: {
+    modelOptions: {
+      type: Array,
+      default: () => []
+    },
+    selectedModel: {
+      type: String,
+      default: ''
+    },
+    loading: {
       type: Boolean,
-      default: true
+      default: false
+    },
+    toolOptions: {
+      type: Array,
+      default: () => []
+    },
+    toolServerOptions: {
+      type: Array,
+      default: () => []
+    },
+    selectedTools: {
+      type: Array,
+      default: () => []
+    },
+    selectedToolServers: {
+      type: Array,
+      default: () => []
+    },
+    toolsLoading: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -47,15 +123,10 @@ export default {
       isIM: false,
       inputValue: '',
       select: {
-        url: '/api/v1/settings/chatai-prompts/',
         value: '',
         multiple: false,
-        placeholder: this.$t('Role'),
-        ajax: {
-          transformOption: (item) => {
-            return { label: item.name, value: item.content }
-          }
-        }
+        placeholder: this.$t('Model'),
+        options: []
       }
     }
   },
@@ -64,7 +135,32 @@ export default {
       isLoading: state => state.chat.loading
     }),
     isSelectDisabled() {
-      return !!this.select.value
+      return false
+    },
+    options() {
+      return (this.modelOptions || []).map(item => {
+        return { label: item.name || item.id, value: item.id }
+      })
+    },
+    selectedToolsSet() {
+      return new Set(this.selectedTools || [])
+    },
+    selectedToolServersSet() {
+      return new Set(this.selectedToolServers || [])
+    }
+  },
+  watch: {
+    modelOptions: {
+      immediate: true,
+      handler(val) {
+        this.select.options = (val || []).map(item => ({ label: item.name || item.id, value: item.id }))
+      }
+    },
+    selectedModel: {
+      immediate: true,
+      handler(val) {
+        this.select.value = val || ''
+      }
     }
   },
   methods: {
@@ -84,7 +180,25 @@ export default {
       this.inputValue = ''
     },
     onSelectChange(value) {
-      this.$emit('select-prompt', value)
+      this.$emit('select-model', value)
+    },
+    toggleTool(id) {
+      const set = new Set(this.selectedTools || [])
+      if (set.has(id)) {
+        set.delete(id)
+      } else {
+        set.add(id)
+      }
+      this.$emit('select-tools', Array.from(set))
+    },
+    toggleToolServer(id) {
+      const set = new Set(this.selectedToolServers || [])
+      if (set.has(id)) {
+        set.delete(id)
+      } else {
+        set.add(id)
+      }
+      this.$emit('select-tool-servers', Array.from(set))
     }
   }
 }
@@ -99,9 +213,18 @@ export default {
   .chat-action {
     width: 100%;
     margin: 6px 0;
+    display: flex;
+    align-items: center;
+    gap: 8px;
 
-    &::v-deep .el-select {
-      width: 50%;
+    .model-select {
+      flex: 0 0 48%;
+      max-width: 240px;
+      min-width: 160px;
+    }
+
+    &:deep(.el-select) {
+      width: 100%;
 
       .el-input__inner {
         height: 28px;
@@ -129,7 +252,7 @@ export default {
     flex-direction: column;
     border-radius: 12px;
 
-    &::v-deep .el-textarea {
+    &:deep(.el-textarea) {
       height: 100%;
 
       .el-textarea__inner {

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

@@ -3,9 +3,13 @@
     <div class="chart-item-container">
       <div class="avatar">
         <el-avatar
-          :src="isUserRole ? userUrl : chatUrl"
+          v-if="isUserRole"
+          :src="userUrl"
           class="header-avatar"
         />
+        <el-avatar v-else class="header-avatar" :style="{ backgroundColor: 'transparent' }">
+          <ModelIcon :name="modelIconName" class-name="model-icon" />
+        </el-avatar>
       </div>
       <div class="content">
         <div class="operational">
@@ -76,16 +80,18 @@
 
 <script>
 import MessageText from './MessageText.vue'
+import ModelIcon from '../../models/ModelIcon.vue'
 import { mapGetters, mapState } from 'vuex'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 import { useChat } from '../../useChat.js'
-import { reconnect } from '@/utils/socket'
+import { reconnect } from '@/utils/request'
 
 const { setLoading, removeLoadingMessageInChat } = useChat()
 
 export default {
   components: {
-    MessageText
+    MessageText,
+    ModelIcon
   },
   props: {
     item: {
@@ -93,6 +99,10 @@ export default {
       default: () => {
       }
     },
+    selectedModel: {
+      type: String,
+      default: ''
+    },
     isTerminal: {
       type: Boolean,
       default: false
@@ -129,10 +139,8 @@ export default {
         ? this.$i18n.t('ServerBusyRetry')
         : ''
     },
-    chatUrl() {
-      return this.publicSettings.CHAT_AI_TYPE === 'gpt'
-        ? require('@/assets/img/chat.png')
-        : require('@/assets/img/deepSeek.png')
+    modelIconName() {
+      return (this.item?.message?.model || this.selectedModel || this.publicSettings.CHAT_AI_TYPE || '').toString()
     }
   },
   methods: {
@@ -171,11 +179,18 @@ export default {
         width: 100%;
         height: 100%;
         border-radius: 50%;
+        background-color: transparent;
 
-        &::v-deep img {
+        &:deep(img) {
           background-color: #fff;
         }
       }
+
+      .model-icon {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
     }
 
     .content {
@@ -234,7 +249,7 @@ export default {
               margin: unset;
               padding-left: 0.5rem;
 
-              ::v-deep p {
+              :deep(p) {
                 color: #8b8b8b;
               }
             }

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

@@ -17,7 +17,7 @@ import mdKatex from '@traptitech/markdown-it-katex'
 import mila from 'markdown-it-link-attributes'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/atom-one-dark.css'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 
 export default {
   props: {
@@ -40,7 +40,7 @@ export default {
     text() {
       const value = this.message?.content || ''
       if (value && this.markdown) {
-        return this.markdown?.render(value)
+        return this.renderContentWithDetails(value)
       }
       return this.$xss.process(value)
     }
@@ -51,7 +51,7 @@ export default {
   updated() {
     this.addEvents()
   },
-  destroyed() {
+  unmounted() {
     this.removeEvents()
   },
   methods: {
@@ -69,7 +69,7 @@ export default {
           return vm.highlightBlock(hljs.highlightAuto(code).value, '')
         }
       })
-      this.markdown.use(mila, { attrs: { target: '_blank', rel: 'noopener', class: 'link-style' }})
+      this.markdown.use(mila, { attrs: { target: '_blank', rel: 'noopener', class: 'link-style' } })
       this.markdown.use(mdKatex, { blockClass: 'katexmath-block rounded-md', errorColor: ' #cc0000' })
     },
     highlightBlock(str, lang) {
@@ -120,6 +120,77 @@ export default {
         btn.addEventListener('click', callback)
       })
     },
+    renderContentWithDetails(value) {
+      // Kael responses may wrap reasoning/thinking in <details type="reasoning">; render them with a custom block.
+      const detailRegex = /<details[^>]*>[\s\S]*?<\/details>/gi
+      let result = ''
+      let lastIndex = 0
+      let match
+      let hasDetails = false
+
+      while ((match = detailRegex.exec(value))) {
+        hasDetails = true
+        const preceding = value.slice(lastIndex, match.index)
+        if (preceding.trim()) {
+          result += this.markdown.render(preceding)
+        }
+        result += this.renderDetailBlock(match[0])
+        lastIndex = match.index + match[0].length
+      }
+
+      if (!hasDetails) {
+        return this.markdown.render(value)
+      }
+
+      const remaining = value.slice(lastIndex)
+      if (remaining.trim()) {
+        result += this.markdown.render(remaining)
+      }
+
+      return result
+    },
+    renderDetailBlock(detailStr) {
+      const attributes = this.extractAttributes(detailStr)
+      const inner = detailStr.replace(/^<details[^>]*>/i, '').replace(/<\/details>$/i, '')
+      const summaryMatch = inner.match(/<summary>([\s\S]*?)<\/summary>/i)
+      const summary = summaryMatch ? this.decodeHtml(summaryMatch[1]) : ''
+      const body = summaryMatch ? inner.replace(summaryMatch[0], '') : inner
+      const bodyHtml = body.trim() ? this.markdown.render(this.decodeHtml(body.trim())) : ''
+
+      const baseClass = 'kael-detail'
+      if (attributes.type === 'reasoning') {
+        const statusClass = attributes.done === 'true' ? 'is-done' : 'is-pending'
+        const title = summary || this.$t('DeeplyThoughtAbout')
+        return `<div class="${baseClass} ${baseClass}--reasoning ${statusClass}">
+          <div class="${baseClass}__header">
+            <span class="${baseClass}__status-dot"></span>
+            <span class="${baseClass}__title">${title}</span>
+          </div>
+          ${bodyHtml ? `<div class="${baseClass}__body">${bodyHtml}</div>` : ''}
+        </div>`
+      }
+
+      return `<div class="${baseClass}">
+        ${summary ? `<div class="${baseClass}__header">${summary}</div>` : ''}
+        ${bodyHtml ? `<div class="${baseClass}__body">${bodyHtml}</div>` : ''}
+      </div>`
+    },
+    extractAttributes(detailStr) {
+      const attrs = {}
+      const attrMatch = detailStr.match(/^<details([^>]*)>/i)
+      const attrStr = (attrMatch && attrMatch[1]) || ''
+      attrStr.replace(/(\w+)="(.*?)"/g, (all, key, val) => {
+        attrs[key] = val
+        return all
+      })
+      return attrs
+    },
+    decodeHtml(str) {
+      if (!str) return ''
+      const textArea = document.createElement('textarea')
+      textArea.innerHTML = str
+      return textArea.value
+    },
     removeBtnClickEvent(selector) {
       const buttons = this.$refs.textRef.querySelectorAll(selector)
       buttons.forEach((btn) => {
@@ -142,13 +213,13 @@ export default {
   font-size: 13px;
   max-width: 300px;;
 
-  &::v-deep p {
+  &:deep(p) {
     margin-bottom: 0 !important;
   }
 
   background: inherit;
 
-  &::v-deep pre {
+  &:deep(pre) {
     padding: 0 0 6px 0;
 
     .hljs.code-block-body {
@@ -156,7 +227,7 @@ export default {
     }
   }
 
-  &::v-deep .code-block-wrapper {
+  &:deep(.code-block-wrapper) {
     background: #1F2329;
     padding: 0;
     margin: 5px 0;
@@ -210,7 +281,7 @@ export default {
   }
 }
 
-::v-deep .link-style {
+:deep(.link-style) {
   color: #487bf4;
 
   &:hover {
@@ -258,4 +329,64 @@ export default {
 .loading-box span:nth-child(3) {
   animation-delay: 0.49s;
 }
+
+.kael-detail {
+  margin: 8px 0;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid #e5e5e5;
+  background: #f7f8fa;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: #6b7280;
+  }
+
+  &__title {
+    font-weight: 600;
+  }
+
+  &__status-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #10b981;
+  }
+
+  &__body {
+    margin-top: 6px;
+    padding-left: 8px;
+    border-left: 2px solid #e5e5e5;
+  }
+
+  &--reasoning.is-pending {
+    border-color: #f59e0b40;
+    background: #fff8e6;
+
+    .kael-detail__status-dot {
+      background: #f59e0b;
+      animation: kael-pulse 1.2s ease-in-out infinite;
+    }
+  }
+
+  &--reasoning.is-done {
+    border-color: #dbeafe;
+    background: #f4f6ff;
+  }
+}
+
+@keyframes kael-pulse {
+  0% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.45;
+  }
+}
 </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
     }
   }
 }
@@ -80,7 +92,7 @@ export default {
   transform: rotate(-90deg)
 }
 
-::v-deep .el-tabs {
+:deep(.el-tabs) {
   .el-tabs__item {
     padding: 0 10px;
     font-size: 14px;

src/components/Apps/ChatAi/index.vue

@@ -1,5 +1,6 @@
 <template>
   <DrawerPanel
+    v-if="visible"
     ref="drawer"
     :default-show-panel="!!defaultShowPanel"
     :expanded="expanded"
@@ -28,7 +29,7 @@
       </div>
       <div class="sidebar">
         <Sidebar
-          :active.sync="active"
+          v-model:active="active"
           :expanded="expanded"
           v-bind="$attrs"
           @close="onClose"
@@ -45,9 +46,10 @@
 import Sidebar from './components/Sidebar/index.vue'
 import Chat from './components/ChitChat/index.vue'
 import { getInputFocus } from './useChat.js'
-import { ws } from '@/utils/socket'
 import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
 import { ObjectLocalStorage } from '@/utils/common'
+import i18n from '@/i18n/i18n'
+import { mapGetters } from 'vuex'
 
 const aiPannelLocalStorage = new ObjectLocalStorage('ai_panel_settings')
 export default {
@@ -60,7 +62,7 @@ export default {
     title: {
       type: String,
       default: function() {
-        return this.$t('ChatAI')
+        return i18n.global.t('ChatAI')
       }
     },
     defaultShowPanel: {
@@ -74,27 +76,66 @@ export default {
   },
   data() {
     return {
+      visible: false,
       active: 'chat',
       robotUrl: require('@/assets/img/robot-assistant.png'),
       height: '400px',
       expanded: false,
       clientOffset: {},
-      currentTerminalContent: {}
+      currentTerminalContent: {},
+      initialized: false
     }
   },
+  computed: {
+    ...mapGetters([
+      'publicSettings'
+    ])
+  },
   watch: {
+    'publicSettings.CHAT_AI_METHOD': {
+      handler(newVal) {
+        this.visible = newVal === 'api'
+      }
+    }
   },
   mounted() {
-    const expanded = aiPannelLocalStorage.get('expanded')
-    this.updateExpandedState(expanded)
-    this.handlePostMessage()
+    this.handleStartChat()
   },
   methods: {
+    handleStartChat() {
+      if (this.publicSettings.CHAT_AI_METHOD === 'api') {
+        this.visible = true
+        const expanded = aiPannelLocalStorage.get('expanded')
+        this.updateExpandedState(expanded)
+        this.handlePostMessage()
+      } else if (this.publicSettings.CHAT_AI_METHOD === 'embed') {
+        const embedScriptId = 'chat-ai-embed-id'
+        if (document.getElementById(embedScriptId)) {
+          return
+        }
+        const script = document.createElement('script')
+        script.id = embedScriptId
+        script.src = this.publicSettings.CHAT_AI_EMBED_URL
+        script.async = true
+        script.onload = () => {
+          const loadEvent = new Event('load', { bubbles: false, cancelable: false })
+          window.dispatchEvent(loadEvent)
+        }
+        document.body.appendChild(script)
+      }
+    },
+    initAssistant() {
+      if (this.initialized) return
+      this.initialized = true
+      this.$nextTick(() => {
+        this.$refs.component?.init()
+      })
+    },
     handlePostMessage() {
       window.addEventListener('message', (event) => {
         if (event.data === 'show-chat-panel') {
           this.$refs.drawer.show = true
-          this.initWebSocket()
+          this.initAssistant()
           return
         }
         const msg = event.data
@@ -119,11 +160,6 @@ export default {
       }
       this.$refs.drawer.handleHeaderMoveUp(event)
     },
-    initWebSocket() {
-      if (!ws) {
-        this.$refs.component?.init()
-      }
-    },
     onClose() {
       this.$refs.drawer.show = false
     },
@@ -137,7 +173,6 @@ export default {
     },
     save_pannel_settings() {
       aiPannelLocalStorage.set('expanded', this.expanded)
-      console.log('AI panel settings saved:', this.expanded)
     },
     updateExpandedState(expanded) {
       this.expanded = expanded
@@ -151,8 +186,8 @@ export default {
       })
     },
     onToggle(status) {
-      this.initWebSocket()
       if (status) {
+        this.initAssistant()
         getInputFocus()
       }
     }

src/components/Apps/ChatAi/models/ChatGPT.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg
+    :stroke-width="strokeWidth"
+    width="20"
+    height="20"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+    xmlns="http://www.w3.org/2000/svg"
+    :class="className"
+  >
+    <path
+      fill="#6b7280"
+      style="fill: #6b7280 !important"
+      d="M11.2475 18.25C10.6975 18.25 10.175 18.1455 9.67999 17.9365C9.18499 17.7275 8.74499 17.436 8.35999 17.062C7.94199 17.205 7.50749 17.2765 7.05649 17.2765C6.31949 17.2765 5.63749 17.095 5.01049 16.732C4.38349 16.369 3.87749 15.874 3.49249 15.247C3.11849 14.62 2.93149 13.9215 2.93149 13.1515C2.93149 12.8325 2.97549 12.486 3.06349 12.112C2.62349 11.705 2.28249 11.2375 2.04049 10.7095C1.79849 10.1705 1.67749 9.6095 1.67749 9.0265C1.67749 8.4325 1.80399 7.8605 2.05699 7.3105C2.30999 6.7605 2.66199 6.2875 3.11299 5.8915C3.57499 5.4845 4.10849 5.204 4.71349 5.05C4.83449 4.423 5.08749 3.862 5.47249 3.367C5.86849 2.861 6.35249 2.465 6.92449 2.179C7.49649 1.893 8.10699 1.75 8.75599 1.75C9.30599 1.75 9.82849 1.8545 10.3235 2.0635C10.8185 2.2725 11.2585 2.564 11.6435 2.938C12.0615 2.795 12.496 2.7235 12.947 2.7235C13.684 2.7235 14.366 2.905 14.993 3.268C15.62 3.631 16.1205 4.126 16.4945 4.753C16.8795 5.38 17.072 6.0785 17.072 6.8485C17.072 7.1675 17.028 7.514 16.94 7.888C17.38 8.295 17.721 8.768 17.963 9.307C18.205 9.835 18.326 10.3905 18.326 10.9735C18.326 11.5675 18.1995 12.1395 17.9465 12.6895C17.6935 13.2395 17.336 13.718 16.874 14.125C16.423 14.521 15.895 14.796 15.29 14.95C15.169 15.577 14.9105 16.138 14.5145 16.633C14.1295 17.139 13.651 17.535 13.079 17.821C12.507 18.107 11.8965 18.25 11.2475 18.25ZM7.17199 16.1875C7.72199 16.1875 8.20049 16.072 8.60749 15.841L11.7095 14.059C11.8195 13.982 11.8745 13.8775 11.8745 13.7455V12.3265L7.88149 14.62C7.63949 14.763 7.39749 14.763 7.15549 14.62L4.03699 12.8215C4.03699 12.8545 4.03149 12.893 4.02049 12.937C4.02049 12.981 4.02049 13.047 4.02049 13.135C4.02049 13.696 4.15249 14.213 4.41649 14.686C4.69149 15.148 5.07099 15.511 5.55499 15.775C6.03899 16.05 6.57799 16.1875 7.17199 16.1875ZM7.33699 13.498C7.40299 13.531 7.46349 13.5475 7.51849 13.5475C7.57349 13.5475 7.62849 13.531 7.68349 13.498L8.92099 12.7885L4.94449 10.4785C4.70249 10.3355 4.58149 10.121 4.58149 9.835V6.2545C4.03149 6.4965 3.59149 6.8705 3.26149 7.3765C2.93149 7.8715 2.76649 8.4215 2.76649 9.0265C2.76649 9.5655 2.90399 10.0825 3.17899 10.5775C3.45399 11.0725 3.81149 11.4465 4.25149 11.6995L7.33699 13.498ZM11.2475 17.161C11.8305 17.161 12.3585 17.029 12.8315 16.765C13.3045 16.501 13.6785 16.138 13.9535 15.676C14.2285 15.214 14.366 14.697 14.366 14.125V10.561C14.366 10.429 14.311 10.33 14.201 10.264L12.947 9.538V14.1415C12.947 14.4275 12.826 14.642 12.584 14.785L9.46549 16.5835C10.0045 16.9685 10.5985 17.161 11.2475 17.161ZM11.8745 11.122V8.878L10.01 7.822L8.12899 8.878V11.122L10.01 12.178L11.8745 11.122ZM7.05649 5.8585C7.05649 5.5725 7.17749 5.358 7.41949 5.215L10.538 3.4165C9.99899 3.0315 9.40499 2.839 8.75599 2.839C8.17299 2.839 7.64499 2.971 7.17199 3.235C6.69899 3.499 6.32499 3.862 6.04999 4.324C5.78599 4.786 5.65399 5.303 5.65399 5.875V9.4225C5.65399 9.5545 5.70899 9.659 5.81899 9.736L7.05649 10.462V5.8585ZM15.4385 13.7455C15.9885 13.5035 16.423 13.1295 16.742 12.6235C17.072 12.1175 17.237 11.5675 17.237 10.9735C17.237 10.4345 17.0995 9.9175 16.8245 9.4225C16.5495 8.9275 16.192 8.5535 15.752 8.3005L12.6665 6.5185C12.6005 6.4745 12.54 6.458 12.485 6.469C12.43 6.469 12.375 6.4855 12.32 6.5185L11.0825 7.2115L15.0755 9.538C15.1965 9.604 15.2845 9.692 15.3395 9.802C15.4055 9.901 15.4385 10.022 15.4385 10.165V13.7455ZM12.122 5.3635C12.364 5.2095 12.606 5.2095 12.848 5.3635L15.983 7.195C15.983 7.118 15.983 7.019 15.983 6.898C15.983 6.37 15.851 5.8695 15.587 5.3965C15.334 4.9125 14.9655 4.5275 14.4815 4.2415C14.0085 3.9555 13.4585 3.8125 12.8315 3.8125C12.2815 3.8125 11.803 3.928 11.396 4.159L8.29399 5.941C8.18399 6.018 8.12899 6.1225 8.12899 6.2545V7.6735L12.122 5.3635Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ChatGPTIcon',
+  props: {
+    className: {
+      type: String,
+      default: 'size-8'
+    },
+    strokeWidth: {
+      type: [String, Number],
+      default: '1.5'
+    }
+  }
+}
+</script>

src/components/Apps/ChatAi/models/Claude.vue

@@ -0,0 +1,45 @@
+<template>
+  <svg
+    :stroke-width="strokeWidth"
+    viewBox="0 0 24 16"
+    overflow="visible"
+    width="20"
+    height="20"
+    :class="className"
+  >
+    <g style="transform: translateX(13px) rotateZ(0deg); transform-origin: 4.775px 7.73501px;">
+      <path
+        shape-rendering="geometricPrecision"
+        fill-opacity="1"
+        fill="#8c653f"
+        style="fill: #8c653f !important"
+        d=" M0,0 C0,0 6.1677093505859375,15.470022201538086 6.1677093505859375,15.470022201538086 C6.1677093505859375,15.470022201538086 9.550004005432129,15.470022201538086 9.550004005432129,15.470022201538086 C9.550004005432129,15.470022201538086 3.382294178009033,0 3.382294178009033,0 C3.382294178009033,0 0,0 0,0 C0,0 0,0 0,0z"
+      />
+    </g>
+    <g opacity="1" style="transform: none; transform-origin: 7.935px 7.73501px;">
+      <path
+        shape-rendering="geometricPrecision"
+        fill-opacity="1"
+        fill="#8c653f"
+        style="fill: #8c653f !important"
+        d=" M5.824605464935303,9.348296165466309 C5.824605464935303,9.348296165466309 7.93500280380249,3.911694288253784 7.93500280380249,3.911694288253784 C7.93500280380249,3.911694288253784 10.045400619506836,9.348296165466309 10.045400619506836,9.348296165466309 C10.045400619506836,9.348296165466309 5.824605464935303,9.348296165466309 5.824605464935303,9.348296165466309 C5.824605464935303,9.348296165466309 5.824605464935303,9.348296165466309 5.824605464935303,9.348296165466309z M6.166755199432373,0 C6.166755199432373,0 0,15.470022201538086 0,15.470022201538086 C0,15.470022201538086 3.4480772018432617,15.470022201538086 3.4480772018432617,15.470022201538086 C3.4480772018432617,15.470022201538086 4.709278583526611,12.22130012512207 4.709278583526611,12.22130012512207 C4.709278583526611,12.22130012512207 11.16093635559082,12.22130012512207 11.16093635559082,12.22130012512207 C11.16093635559082,12.22130012512207 12.421928405761719,15.470022201538086 12.421928405761719,15.470022201538086 C12.421928405761719,15.470022201538086 15.87000560760498,15.470022201538086 15.87000560760498,15.470022201538086 C15.87000560760498,15.470022201538086 9.703250885009766,0 9.703250885009766,0 C9.703250885009766,0 6.166755199432373,0 6.166755199432373,0 C6.166755199432373,0 6.166755199432373,0 6.166755199432373,0z"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'ClaudeIcon',
+  props: {
+    className: {
+      type: String,
+      default: 'size-4'
+    },
+    strokeWidth: {
+      type: [String, Number],
+      default: '1.5'
+    }
+  }
+}
+</script>

src/components/Apps/ChatAi/models/DeepSeek.vue

@@ -0,0 +1,34 @@
+<template>
+  <svg
+    id="图层_1"
+    xmlns="http://www.w3.org/2000/svg"
+    data-name="图层 1"
+    viewBox="0 0 71.69 52.76"
+    :class="className"
+    :stroke-width="strokeWidth"
+  >
+    <path
+      id="path"
+      fill="#4d6bfe"
+      style="fill: #4d6bfe !important"
+      d="M523.77,276.34c-.76-.38-1.08.33-1.53.69a4,4,0,0,0-.41.41,5.07,5.07,0,0,1-4.1,1.87,8,8,0,0,0-6.46,2.53,5.82,5.82,0,0,0-3.72-4.62,6.39,6.39,0,0,1-2.85-1.94,7.76,7.76,0,0,1-.92-2.31c-.16-.48-.32-1-.87-1.05s-.83.41-1.07.82a11,11,0,0,0-1.26,5.5,11.9,11.9,0,0,0,5.49,10.14.75.75,0,0,1,.39,1c-.25.84-.54,1.65-.79,2.49-.17.53-.41.65-1,.42a16.63,16.63,0,0,1-5.18-3.52c-2.56-2.48-4.88-5.21-7.76-7.35-.68-.5-1.36-1-2.06-1.41-2.94-2.86.39-5.2,1.16-5.48s.28-1.29-2.33-1.28-5,.88-8,2a8.23,8.23,0,0,1-1.39.41,28.67,28.67,0,0,0-8.61-.3,18.57,18.57,0,0,0-13.44,7.83c-4,5.47-4.91,11.67-3.76,18.15a27.68,27.68,0,0,0,10,16.88,26.8,26.8,0,0,0,19.23,6.39c4.43-.25,9.36-.84,14.92-5.55a13.84,13.84,0,0,0,5.32,1.18,17.24,17.24,0,0,0,5.09-.38c2.2-.46,2.05-2.5,1.25-2.87-6.43-3-5-1.78-6.3-2.77,3.27-3.87,8.2-7.89,10.13-20.92a12.44,12.44,0,0,0,0-2.52c0-.51.1-.71.68-.76a12.55,12.55,0,0,0,4.62-1.42c4.17-2.28,5.85-6,6.25-10.51A1.57,1.57,0,0,0,523.77,276.34Zm-36.34,40.37c-6.24-4.9-9.27-6.52-10.52-6.45s-1,1.41-.7,2.28a8.49,8.49,0,0,0,1.11,2.21,1.14,1.14,0,0,1-.34,1.8c-2,1.24-5.5-.42-5.66-.5a26.08,26.08,0,0,1-9.87-9.88,30.15,30.15,0,0,1-3.87-13.39c-.06-1.15.28-1.56,1.42-1.77a14.31,14.31,0,0,1,4.57-.11,28.56,28.56,0,0,1,16.33,8.29,54.06,54.06,0,0,1,6.58,8.63,41.46,41.46,0,0,0,7.41,8.71,24.36,24.36,0,0,0,2.66,2C494.16,318.82,490.16,318.87,487.43,316.71Zm3-19.23a.92.92,0,0,1,.92-.92.83.83,0,0,1,.32.06.8.8,0,0,1,.34.22.9.9,0,0,1,.25.64.92.92,0,0,1-1.83,0Zm9.29,4.76a5.27,5.27,0,0,1-1.77.48,3.75,3.75,0,0,1-2.38-.76,3.57,3.57,0,0,1-1.65-2.26,5.16,5.16,0,0,1,0-1.76,2,2,0,0,0-.71-2.17,3.1,3.1,0,0,0-2.06-.59,1.63,1.63,0,0,1-.76-.24.75.75,0,0,1-.34-1.07,3.47,3.47,0,0,1,.57-.62,3.9,3.9,0,0,1,3.43,0,10,10,0,0,1,3,2.34,18.62,18.62,0,0,1,2,2.73,10.9,10.9,0,0,1,1.33,2.53C500.65,301.47,500.4,302,499.71,302.24Z"
+      transform="translate(-452.83 -271.91)"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'DeepSeekIcon',
+  props: {
+    className: {
+      type: String,
+      default: 'size-4'
+    },
+    strokeWidth: {
+      type: [String, Number],
+      default: '1.5'
+    }
+  }
+}
+</script>

src/components/Apps/ChatAi/models/Gemini.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="currentColor"
+    width="800px"
+    height="800px"
+    viewBox="0 0 512 512"
+    :class="className"
+    :stroke-width="strokeWidth"
+  >
+    <path
+      fill="#4285f4"
+      style="fill: #4285f4 !important"
+      d="M473.16,221.48l-2.26-9.59H262.46v88.22H387c-12.93,61.4-72.93,93.72-121.94,93.72-35.66,0-73.25-15-98.13-39.11a140.08,140.08,0,0,1-41.8-98.88c0-37.16,16.7-74.33,41-98.78s61-38.13,97.49-38.13c41.79,0,71.74,22.19,82.94,32.31l62.69-62.36C390.86,72.72,340.34,32,261.6,32h0c-60.75,0-119,23.27-161.58,65.71C58,139.5,36.25,199.93,36.25,256S56.83,369.48,97.55,411.6C141.06,456.52,202.68,480,266.13,480c57.73,0,112.45-22.62,151.45-63.66,38.34-40.4,58.17-96.3,58.17-154.9C475.75,236.77,473.27,222.12,473.16,221.48Z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'GeminiIcon',
+  props: {
+    className: {
+      type: String,
+      default: 'size-4'
+    },
+    strokeWidth: {
+      type: [String, Number],
+      default: '1.5'
+    }
+  }
+}
+</script>

src/components/Apps/ChatAi/models/Grok.vue

@@ -0,0 +1,33 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    aria-hidden="true"
+    focusable="false"
+    fill="currentColor"
+    :class="className"
+    :stroke-width="strokeWidth"
+  >
+    <path
+      fill="#000000"
+      style="fill: #000000 !important"
+      d="m3.005 8.858 8.783 12.544h3.904L6.908 8.858zM6.905 15.825 3 21.402h3.907l1.951-2.788zM16.585 2l-6.75 9.64 1.953 2.79L20.492 2zM17.292 7.965v13.437h3.2V3.395z"
+    />
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'GrokIcon',
+  props: {
+    className: {
+      type: String,
+      default: 'size-4'
+    },
+    strokeWidth: {
+      type: [String, Number],
+      default: '1.5'
+    }
+  }
+}
+</script>

src/components/Apps/ChatAi/models/ModelIcon.vue

@@ -0,0 +1,50 @@
+<template>
+  <component
+    :is="resolvedIcon"
+    v-if="resolvedIcon"
+    :class-name="className"
+    :stroke-width="strokeWidth"
+  />
+</template>
+
+<script>
+import ChatGPTIcon from './ChatGPT.vue'
+import DeepSeekIcon from './DeepSeek.vue'
+import GrokIcon from './Grok.vue'
+import ClaudeIcon from './Claude.vue'
+import GeminiIcon from './Gemini.vue'
+
+export default {
+  name: 'ModelIcon',
+  props: {
+    name: {
+      type: String,
+      default: ''
+    },
+    className: {
+      type: String,
+      default: 'size-5'
+    },
+    strokeWidth: {
+      type: [String, Number],
+      default: '1.5'
+    }
+  },
+  computed: {
+    normalizedName() {
+      return (this.name || '').toLowerCase()
+    },
+    resolvedIcon() {
+      const name = this.normalizedName
+      if (!name) return null
+      if (name.includes('gpt')) return ChatGPTIcon
+      if (name.includes('deep-seek')) return DeepSeekIcon
+      if (name.includes('deepseek')) return DeepSeekIcon
+      if (name.includes('grok')) return GrokIcon
+      if (name.includes('claude')) return ClaudeIcon
+      if (name.includes('gemini')) return GeminiIcon
+      return null
+    }
+  }
+}
+</script>

src/components/Apps/ChatAi/useChat.js

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

src/components/Apps/DrawerPanel/index.vue

@@ -74,7 +74,7 @@ export default {
     this.init()
     this.insertToBody()
   },
-  beforeDestroy() {
+  beforeUnmount() {
     const element = this.$refs.drawer
     element.remove()
     // window.removeEventListener('click', this.closeSidebar)

src/components/Apps/GatewayTestDialog/index.vue

@@ -1,31 +1,32 @@
 <template>
   <Dialog
-    v-if="iVisible"
+    v-if="visible"
     :destroy-on-close="true"
     :show-cancel="false"
     :show-confirm="false"
     :title="$tc('TestGatewayTestConnection')"
-    :visible.sync="iVisible"
+    :visible="visible"
     top="35vh"
     width="40%"
+    @update:visible="$emit('update:visible', $event)"
   >
     <el-row :gutter="20">
       <el-col :md="4" :sm="24">
         <div style="line-height: 34px">{{ $t('SSHPort') }}</div>
       </el-col>
       <el-col :md="14" :sm="24">
-        <el-input v-model="port" />
+        <el-input v-model="iPort" />
         <span class="help-tips help-block">{{ $t('TestGatewayHelpMessage') }}</span>
       </el-col>
       <el-col :md="4" :sm="24">
         <el-button
           :loading="loading"
-          size="mini"
-          style="line-height:20px "
+          size="small"
+          style="line-height: 20px"
           type="primary"
           @click="dialogConfirm"
         >
-          {{ this.$t('Confirm') }}
+          {{ $t('Confirm') }}
         </el-button>
       </el-col>
     </el-row>
@@ -34,7 +35,7 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { openTaskPage } from '@/utils/jms'
+import { openTaskPage } from '@/utils/jms/index'
 
 export default {
   name: 'GatewayDialog',
@@ -59,16 +60,17 @@ export default {
       default: ''
     }
   },
+  emits: ['update:visible', 'update:port'],
   data() {
     return {}
   },
   computed: {
-    iVisible: {
+    iPort: {
       get() {
-        return this.visible
+        return this.port
       },
       set(val) {
-        this.$emit('update:visible', val)
+        this.$emit('update:port', val)
       }
     }
   },
@@ -77,14 +79,13 @@ export default {
       if (isNaN(this.port)) {
         return this.$message.error(this.$tc('TestPortErrorMsg'))
       }
-      this.$axios.post(
-        `/api/v1/assets/gateways/${this.cell}/test-connective/`,
-        { port: this.port }
-      )
-        .then((res) => {
+      this.$axios
+        .post(`/api/v1/assets/gateways/${this.cell}/test-connective/`, { port: this.port })
+        .then(res => {
           openTaskPage(res['task'])
-        }).finally(() => {
-          this.iVisible = false
+        })
+        .finally(() => {
+          this.$emit('update:visible', false)
         })
     }
   }

src/components/Apps/GrantedAssets/index.vue

@@ -44,9 +44,7 @@ export default {
     },
     getShowUrl: {
       type: Function,
-      default({ row, col }) {
-        return this.tableUrl.replace('/assets/', `/assets/${row.id}/accounts/`)
-      }
+      default: ({ row, col }) => this.tableUrl.replace('/assets/', `/assets/${row.id}/accounts/`)
     },
     name: {
       type: Object,
@@ -85,7 +83,7 @@ export default {
         hasTree: true,
         columnsExtra: ['view_account'],
         columnsExclude: ['spec_info'],
-        columns: ['id', 'name', 'address', 'platform', 'view_account', 'actions'],
+        columns: ['id', 'name', 'address', 'comment', 'labels', 'connectivity', 'platform', 'view_account', 'actions'],
         columnsShow: {
           min: ['name', 'address', 'accounts'],
           default: ['name', 'address', 'platform', 'view_account', 'actions']
@@ -109,11 +107,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/LeakPasswords/index.vue

@@ -1,11 +1,7 @@
 <template>
   <div>
     <div>
-      <el-button
-        size="mini"
-        type="primary"
-        @click="onOpenDialog"
-      >
+      <el-button size="small" type="primary" @click="onOpenDialog">
         {{ $tc('View') }}
       </el-button>
     </div>
@@ -14,9 +10,10 @@
       :show-cancel="false"
       :show-confirm="false"
       :title="title"
-      :visible.sync="visible"
+      :visible="visible"
       v-bind="$attrs"
       width="40%"
+      @update:visible="$emit('update:visible', $event)"
       v-on="$listeners"
     >
       <LeakPasswordList />
@@ -42,7 +39,7 @@ export default {
     title: {
       type: String,
       default: function() {
-        return this.$t('LeakPasswordList')
+        return 'LeakPasswordList'
       }
     },
     url: {
@@ -72,5 +69,4 @@ export default {
 }
 </script>
 
-<style scoped>
-</style>
+<style scoped></style>

src/components/Apps/ManyJsonTabs/AssetJsonTab.vue

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

src/components/Apps/ManyJsonTabs/UserJsonTab.vue

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

src/components/Apps/ResourceActivity/index.vue

@@ -27,11 +27,11 @@
   </div>
 </template>
 
-<script>
+<script lang="jsx">
 import IBox from '@/components/Common/IBox/index.vue'
 import DiffDetail from '@/components/Dialog/DiffDetail.vue'
-import { openTaskPage } from '@/utils/jms'
-import { toSafeLocalDateStr } from '@/utils/time'
+import { openTaskPage } from '@/utils/jms/index'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
 export default {

src/components/Apps/UserConfirmDialog/index.vue

@@ -5,38 +5,33 @@
     :show-cancel="false"
     :show-confirm="false"
     :title="title"
-    :visible.sync="visible"
+    :visible="visible"
     class="dialog-content"
     v-bind="$attrs"
-    width="740px"
+    width="600px"
     @confirm="visible = false"
     v-on="$listeners"
   >
     <div v-if="confirmTypeRequired === 'relogin'">
-      <el-row :gutter="24" style="margin: 0 auto;">
+      <el-row :gutter="24" style="margin: 0 auto">
         <el-col :md="24" :sm="24">
-          <el-alert
-            :title="$tc('ReLoginTitle')"
-            center
-            style="margin-bottom: 20px;"
-            type="error"
-          />
+          <el-alert :title="$tc('ReLoginTitle')" center style="margin-bottom: 20px" type="error" />
         </el-col>
       </el-row>
-      <el-row :gutter="24" style="margin: 0 auto;">
+      <el-row :gutter="24" style="margin: 0 auto">
         <el-col :md="24" :sm="24">
-          <el-button class="confirm-btn" size="mini" type="primary" @click="logout">
-            {{ this.$t('ReLogin') }}
+          <el-button class="confirm-btn" size="small" type="primary" @click="logout">
+            {{ $t('ReLogin') }}
           </el-button>
         </el-col>
       </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;"
+              size="small"
+              style="line-height: 14px; float: right"
               type="primary"
               @click="sendCode"
             >
@@ -72,50 +70,46 @@
       </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)"
             class="confirm-btn"
-            size="mini"
+            size="small"
             type="primary"
             @click="handleConfirm"
           >
-            {{ this.$t('Confirm') }}
+            {{ $t('Confirm') }}
           </el-button>
           <el-button
             v-if="subTypeSelected === 'face'"
             v-show="!isFaceCaptureVisible"
             class="confirm-btn"
-            size="mini"
+            size="small"
             type="primary"
             @click="handleFaceCapture"
           >
-            {{ this.$tc('VerifyFace') }}
+            {{ $tc('VerifyFace') }}
           </el-button>
           <el-button
             v-if="subTypeSelected === 'passkey'"
             v-loading="passkeyVisible"
             class="confirm-btn"
-            size="mini"
+            size="small"
             type="primary"
             @click="handlePasskeyVerify"
           >
-            {{ this.$tc('Next') }}
+            {{ $tc('Next') }}
           </el-button>
         </el-col>
       </el-row>
@@ -124,7 +118,7 @@
 </template>
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 
 export default {
   name: 'UserConfirmDialog',
@@ -173,7 +167,7 @@ export default {
   mounted() {
     this.$eventBus.$on('showConfirmDialog', this.performConfirm)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.$eventBus.$off('showConfirmDialog', this.performConfirm)
   },
   methods: {
@@ -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,27 +313,33 @@ 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
+        })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.dialog-content ::v-deep .el-dialog__footer {
+.dialog-content :deep(.el-dialog__footer) {
   padding: 0;
 }
 
-.dialog-content ::v-deep .el-dialog {
+.dialog-content :deep(.el-dialog) {
   padding: 8px;
 
   .el-dialog__body {

src/components/Apps/VariableCreateUpdateForm/index.vue

@@ -115,7 +115,7 @@ export default {
 
 <style lang='scss' scoped>
 .variable-add {
-  ::v-deep .el-form-item {
+  :deep(.el-form-item) {
     margin-bottom: 5px;
 
     .help-block {
@@ -123,7 +123,7 @@ export default {
     }
   }
 
-  ::v-deep .form-group-header {
+  :deep(.form-group-header) {
     .hr-line-dashed {
       margin: 5px 0;
     }

src/components/Apps/VariableSetForm/index.vue

@@ -53,7 +53,7 @@ export default {
 
 <style lang='scss' scoped>
 .variable-set {
-  ::v-deep .el-form-item {
+  :deep(.el-form-item) {
     margin-bottom: 5px;
 
     .help-block {
@@ -61,7 +61,7 @@ export default {
     }
   }
 
-  ::v-deep .form-group-header {
+  :deep(.form-group-header) {
     .hr-line-dashed {
       margin: 5px 0;
     }

src/components/Apps/VariablesHelpTextDialog/index.vue

@@ -0,0 +1,98 @@
+<template>
+  <Dialog
+    :show-cancel="false"
+    :show-confirm="false"
+    :title="title"
+    :visible="visible"
+    class="help-dialog"
+    top="1vh"
+    width="50%"
+    @update:visible="$emit('update:visible', $event)"
+  >
+    <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 'WatermarkVariableHelpText'
+      }
+    }
+  },
+  emits: ['update:visible'],
+  data() {
+    return {
+      title: this.$t('BuiltinVariable')
+    }
+  },
+  methods: {
+    onCopy(key) {
+      copy(key)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+:deep(.help-dialog.dialog .el-dialog__footer) {
+  border-top: none;
+  padding: 8px;
+}
+
+.help-table {
+  width: 100%;
+  border-collapse: collapse;
+  border: 1px solid #dee2e6;
+}
+
+:deep(.help-table) {
+  th,
+  td {
+    height: 40px;
+    padding: 0 8px;
+    text-align: left;
+  }
+
+  .item-td,
+  .item-label {
+    cursor: pointer;
+    color: var(--color-primary);
+  }
+}
+</style>

src/components/Cards/DetailCard/ItemValue.vue

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

src/components/Cards/DetailCard/auto.vue

@@ -10,10 +10,10 @@
   </div>
 </template>
 
-<script>
+<script lang="jsx">
 import DetailCard from './index.vue'
-import { copy } from '@/utils/common'
-import { toSafeLocalDateStr } from '@/utils/time'
+import { copy } from '@/utils/common/index'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 import IBox from '@/components/Common/IBox/index.vue'
 import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue'
 
@@ -143,7 +143,7 @@ export default {
         for (const [index, item] of value.entries()) {
           if (tp === 'object') {
             const firstValue = value[0]
-            if (firstValue.hasOwnProperty('name')) {
+            if (Object.prototype.hasOwnProperty.call(firstValue, 'name')) {
               value.forEach(item => {
                 const fieldName = `${name}.${item.name}`
                 if (excludes.includes(fieldName)) {

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}"
@@ -29,7 +29,7 @@ export default {
     title: {
       type: String,
       default() {
-        return this.$t('BasicInfo')
+        return 'BasicInfo'
       }
     },
     fa: {
@@ -52,7 +52,7 @@ export default {
   data() {
     return {
       iItems: this.items.filter(item => {
-        return !item.hasOwnProperty('has') || item.has === true
+        return !Object.prototype.hasOwnProperty.call(item, 'has') || item.has === true
       })
     }
   },
@@ -76,7 +76,7 @@ export default {
   font-size: 13px;
   line-height: 2;
 
-  ::v-deep .el-form-item {
+  :deep(.el-form-item) {
     border-bottom: 1px dashed #F4F4F4;
     padding: 1px 0;
     margin-bottom: 0;
@@ -93,11 +93,11 @@ export default {
     &.array-item {
       border-bottom: none;
 
-      ::v-deep .el-form-item__content {
+      :deep(.el-form-item__content) {
         border-bottom: 1px dashed #EBEEF5
       }
 
-      ::v-deep .el-form-item__label:last-child {
+      :deep(.el-form-item__label:last-child) {
         border: 1px dashed #EBEEF5;
       }
     }
@@ -127,13 +127,13 @@ export default {
       padding: 5px 0;
     }
 
-    ::v-deep .el-tag--mini {
+    :deep(.el-tag--small) {
       margin-right: 3px;
     }
   }
 
   .item-value {
-    ::v-deep span {
+    :deep(span) {
       //display: -webkit-box;
       overflow: hidden;
       text-overflow: ellipsis;

src/components/Cards/RelationCard/index.vue

@@ -1,34 +1,52 @@
 <template>
   <IBox :title="title" :type="type" class="the-box" v-bind="$attrs">
-    <table class="CardTable" style="width: 100%;table-layout:fixed;">
+    <table class="CardTable" style="width: 100%; table-layout: fixed">
       <tr>
         <td colspan="2">
-          <Select2 ref="select2" v-model="select2.value" :disabled="iDisabled" show-select-all v-bind="select2" />
+          <Select2
+            ref="select2"
+            v-model="select2.value"
+            :disabled="iDisabled"
+            show-select-all
+            v-bind="select2"
+          />
         </td>
       </tr>
       <slot />
       <tr>
         <td colspan="2">
-          <el-button :disabled="iDisabled" :loading="submitLoading" :type="type" size="small" @click="addObjects">
+          <el-button
+            :disabled="iDisabled"
+            :loading="submitLoading"
+            :type="type"
+            size="small"
+            @click="addObjects"
+          >
             {{ $t('Add') }}
           </el-button>
         </td>
       </tr>
       <template v-if="showHasObjects">
         <tr v-for="obj of iHasObjects" :key="obj.value" class="item">
-          <td style="width: 100%;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
+          <td style="width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap">
             <el-tooltip
               :content="obj.label.toString()"
               :open-delay="500"
               effect="dark"
               placement="left"
-              style="margin: 4px;"
+              style="margin: 4px"
             >
               <b>{{ obj.label }}</b>
             </el-tooltip>
           </td>
           <td>
-            <el-button :disabled="iDisabled" size="mini" style="float: right" type="danger" @click="removeObject(obj)">
+            <el-button
+              :disabled="iDisabled"
+              size="small"
+              style="float: right"
+              type="danger"
+              @click="removeObject(obj)"
+            >
               <i class="fa fa-minus" />
             </el-button>
           </td>
@@ -36,7 +54,13 @@
       </template>
       <tr v-if="params.hasMore && showHasMore" class="item">
         <td colspan="2">
-          <el-button :disabled="iDisabled" :type="type" size="small" style="width: 100%" @click="loadMore">
+          <el-button
+            :disabled="iDisabled"
+            :type="type"
+            size="small"
+            style="width: 100%"
+            @click="loadMore"
+          >
             <i class="fa fa-arrow-down" />
             {{ $t('More') }}
           </el-button>
@@ -107,8 +131,7 @@ export default {
     },
     performDelete: {
       type: Function,
-      default: (obj, that) => {
-      }
+      default: (obj, that) => {}
     },
     allowCreate: {
       type: Boolean,
@@ -116,14 +139,13 @@ export default {
     },
     select2Config: {
       type: Object,
-      default: () => {
-      }
+      default: () => {}
     },
     onDeleteSuccess: {
       type: Function,
       default(obj, that) {
         // 从 hasObjects 中移除这个object
-        const theRemoveIndex = that.iHasObjects.findIndex((v) => v.value === obj.value)
+        const theRemoveIndex = that.iHasObjects.findIndex(v => v.value === obj.value)
         that.iHasObjects.splice(theRemoveIndex, 1)
 
         // 从 disabled values 中移除这个 value
@@ -154,8 +176,7 @@ export default {
     },
     performAdd: {
       type: Function,
-      default: (objects, that) => {
-      }
+      default: (objects, that) => {}
     },
     showAddAll: {
       type: Boolean,
@@ -166,11 +187,14 @@ export default {
       default(objects, that) {
         that.$log.debug('Select value', that.select2.value)
         const oldValues = that.iHasObjects.map(item => item.value)
-        that.iHasObjects = [...that.iHasObjects, ...objects.filter(item => !oldValues.includes(item.value))]
+        that.iHasObjects = [
+          ...that.iHasObjects,
+          ...objects.filter(item => !oldValues.includes(item.value))
+        ]
         that.$refs.select2.clearSelected()
         that.$message.success(that.$t('AddSuccessMsg'))
-        this.$refs.select2.refresh()
-        this.$emit('addSuccess')
+        that.$refs.select2.refresh()
+        that.$emit('addSuccess')
       }
     },
     getHasObjects: {
@@ -231,7 +255,7 @@ export default {
       this.$log.debug('hasObjects change, add ', addValues, 'remove ', removeValues)
       let disabledValues = this.select2.disabledValues
       if (removeValues.length > 0) {
-        disabledValues = disabledValues.filter((v) => {
+        disabledValues = disabledValues.filter(v => {
           return removeValues.indexOf(v) === -1
         })
       }
@@ -269,7 +293,7 @@ export default {
       const params = this.safeMakeParams(this.params)
       let data = await this.$axios.get(this.iAjax.url, {
         params: params,
-        validateStatus: (status) => {
+        validateStatus: status => {
           if (status === 403) {
             return 200
           }
@@ -278,8 +302,8 @@ export default {
       })
       data = this.iAjax.processResults.bind(this)(data)
       if (data.results) {
-        data.results.forEach((v) => {
-          if (!this.iHasObjects.find((item) => item.value === v.value)) {
+        data.results.forEach(v => {
+          if (!this.iHasObjects.find(item => item.value === v.value)) {
             this.iHasObjects.push(v)
           }
         })
@@ -295,7 +319,7 @@ export default {
       this.select2.disabledValues = this.hasObjectsId
 
       if (this.getHasObjects) {
-        this.getHasObjects(this.hasObjectsId).then((data) => {
+        this.getHasObjects(this.hasObjectsId).then(data => {
           this.iHasObjects = data
         })
       } else {
@@ -305,22 +329,25 @@ export default {
       }
     },
     removeObject(obj) {
-      this.performDelete(obj, this).then(() => {
-        this.onDeleteSuccess(obj, this)
-      }).catch(error => {
-        this.onDeleteFail(error, this)
-      })
+      this.performDelete(obj, this)
+        .then(() => {
+          this.onDeleteSuccess(obj, this)
+        })
+        .catch(error => {
+          this.onDeleteFail(error, this)
+        })
     },
     addObjects() {
-      const objects = this.$refs.select2.$refs.select.selected.map(item => ({ label: item.label, value: item.value }))
+      const objects = this.$refs.select2.$refs.select.selected.map(item => ({
+        label: item.label,
+        value: item.value
+      }))
       if (objects.length === 0) {
         return
       }
-      this.performAdd(objects, this).then(
-        () => {
-          this.onAddSuccess(objects, this)
-        }
-      )
+      this.performAdd(objects, this).then(() => {
+        this.onAddSuccess(objects, this)
+      })
     },
     async selectAll() {
       this.selectAllDisabled = true
@@ -333,8 +360,9 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
-b, strong {
+<style lang="scss" scoped>
+b,
+strong {
   font-weight: 700;
   font-size: 13px;
 }
@@ -346,14 +374,14 @@ tr td {
 }
 
 tr.item td {
-  border-top: 1px dashed #EBEEF5;
+  border-top: 1px dashed #ebeef5;
 }
 
 .box-margin {
   margin-bottom: 20px;
 }
 
-.the-box ::v-deep .el-card__body {
+.the-box :deep(.el-card__body) {
   padding: 20px;
 }
 </style>

src/components/Common/DataActions/index.vue

@@ -1,11 +1,10 @@
 <template>
   <div :class="grouped ? 'el-button-group' : 'el-button-ungroup'" class="layout">
-    <template v-for="action in iActions">
+    <template v-for="action in iActions" :key="action.name">
       <el-dropdown
         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,65 +22,59 @@
           :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" />
-          </span>
+          <Icon v-if="action.icon" :icon="action.icon" class="pre-icon" />
           <span v-if="action.title">
-            {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
+            {{ action.title }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
           </span>
         </el-button>
-        <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"
-              class="dropdown-menu-title"
-              style="width:130px"
-            >
-              {{ option.group }}
-            </div>
-            <el-tooltip
-              :key="option.name"
-              :content="option.tip"
-              :disabled="!option.tip"
-              :open-delay="500"
-              placement="top"
-            >
-              <el-dropdown-item
-                :key="option.name"
-                :command="[option, action]"
-                :title="option.tip"
-                class="dropdown-item"
-                v-bind="{...option, icon: ''}"
+
+        <template #dropdown>
+          <el-dropdown-menu style="overflow: auto; max-height: 60vh">
+            <template v-for="option in action.dropdown" :key="option.name">
+              <div v-if="option.group" class="dropdown-menu-title" style="width: 130px">
+                {{ option.group }}
+              </div>
+              <el-tooltip
+                :content="option.tip"
+                :disabled="!option.tip"
+                :open-delay="500"
+                placement="top"
               >
-                <span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
-                  <Icon v-if="option.icon" :icon="option.icon" />
-                </span>
-                {{ option.title }}
-              </el-dropdown-item>
-            </el-tooltip>
-          </template>
-        </el-dropdown-menu>
+                <el-dropdown-item
+                  :key="option.name"
+                  :command="[option, action]"
+                  :title="option.tip"
+                  class="dropdown-item"
+                  v-bind="{ ...option, icon: '' }"
+                >
+                  <span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
+                    <Icon v-if="option.icon" :icon="option.icon" />
+                  </span>
+                  {{ option.title }}
+                </el-dropdown-item>
+              </el-tooltip>
+            </template>
+          </el-dropdown-menu>
+        </template>
       </el-dropdown>
 
       <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">
-          <span>
-            <span v-if="action.icon" style="vertical-align: initial">
-              <Icon :icon="action.icon" />
+          <div>
+            <Icon v-if="action.icon" :icon="action.icon" class="pre-icon" />
+            <span>
+              {{ action.title }}
             </span>
-            {{ action.title }}
-          </span>
+          </div>
         </el-tooltip>
       </el-button>
     </template>
@@ -89,7 +82,7 @@
 </template>
 
 <script>
-import { toSentenceCase } from '@/utils/common'
+import { toSentenceCase } from '@/utils/common/index'
 import Icon from '@/components/Widgets/Icon/index.vue'
 
 export default {
@@ -228,17 +221,36 @@ 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;
 
 // 通用
 .layout {
+  // 确保所有按钮都使用 flex 布局，内容垂直居中
+  :deep(.el-button) {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    line-height: 1;
+
+    // 确保按钮内部内容垂直居中
+    > span {
+      display: inline-flex;
+      align-items: center;
+      line-height: 1;
+    }
+  }
+
   .action-item {
     margin-left: 5px;
 
+    .pre-icon + span {
+      margin-left: 3px;
+    }
+
     &.grouped {
       margin-left: 0;
     }
@@ -247,10 +259,6 @@ $color-drop-menu-border: #e4e7ed;
       margin-left: 0;
     }
   }
-
-  .el-button.el-button--default {
-    color: var(--color-text-primary) !important;
-  }
 }
 
 // 主要是左侧 LeftSide
@@ -258,14 +266,22 @@ $color-drop-menu-border: #e4e7ed;
   .action-item.el-dropdown {
     font-size: 11px;
 
+    // 确保下拉按钮也垂直居中
+    :deep(.el-button) {
+      display: inline-flex;
+      align-items: center;
+      justify-content: center;
+      height: 30px;
+    }
+
     .more-action.el-button--default {
-      ::v-deep .el-icon-arrow-down.el-icon--right {
+      :deep(.el-icon-arrow-down.el-icon--right) {
         color: var(--color-icon-primary) !important;
       }
     }
 
     .el-button--primary {
-      ::v-deep .el-icon-arrow-down.el-icon--right {
+      :deep(.el-icon-arrow-down.el-icon--right) {
         color: #ffffff !important;
       }
 
@@ -275,120 +291,4 @@ $color-drop-menu-border: #e4e7ed;
     }
   }
 }
-
-// 主要是 Table 中的操作列
-.layout.table-actions {
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-
-  .el-button {
-    padding: 2px 5px;
-
-    &:not(.is-plain) {
-      color: $btn-text-color;
-    }
-
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
-    * {
-      vertical-align: baseline !important;
-    }
-  }
-
-  ::v-deep .action-item.el-dropdown .el-button {
-    display: block;
-    color: var(--color-primary);
-    background-color: $color-btn-background;
-    border-color: $color-btn-focus-background;
-
-    &:focus {
-      color: $btn-text-color;
-      background-color: $color-btn-focus-background !important;
-    }
-
-    &:hover {
-      color: $btn-text-color;
-      background-color: $color-btn-focus-background;
-    }
-  }
-}
-
-// 下拉 options
-.el-dropdown-menu {
-  ::v-deep .more-batch-processing {
-
-    &:hover {
-      background-color: transparent !important;
-    }
-
-    &.el-dropdown-menu__item--divided {
-      margin-top: 0;
-      border-top: none;
-      color: var(--color-text-primary);
-      cursor: auto;
-      font-size: 12px;
-      line-height: 30px;
-      border-bottom: 1px solid $color-divided;
-
-      &:before {
-        height: 0;
-      }
-    }
-  }
-
-  .dropdown-item {
-    color: var(--color-text-primary);
-    line-height: 34px;
-
-    .pre-icon {
-      width: 17px;
-      display: inline-block;
-    }
-
-    ::v-deep i.fa {
-      font-size: 13px;
-      height: 13px;
-      width: 13px;
-      margin-right: 0;
-    }
-
-    ::v-deep .svg-icon {
-      font-size: 13px;
-      height: 13px;
-      width: 13px;
-    }
-  }
-
-  .el-dropdown-menu__item {
-    padding: 0 20px;
-
-    &.is-disabled {
-      color: var(--color-disabled);
-      cursor: not-allowed;
-      pointer-events: auto;
-    }
-
-    &:not(.is-disabled):hover {
-      background-color: var(--color-disabled-background);
-    }
-  }
-
-  .dropdown-menu-title {
-    text-align: left;
-    font-size: 12px;
-    color: $color-drop-menu-title;
-    line-height: 30px;
-    padding-left: 10px;
-    padding-top: 10px;
-    border-top: solid 1px $color-drop-menu-border;
-
-    &:first-child {
-      padding-top: 0;
-      border-top: none;
-    }
-  }
-}
 </style>

src/components/Common/ErrorBoundary/index.vue

@@ -0,0 +1,138 @@
+<template>
+  <div v-if="hasError" class="error-boundary">
+    <div class="error-boundary-content">
+      <h2 class="error-title">{{ $t('ComponentError') || '组件加载出错' }}</h2>
+      <p class="error-message">{{ errorMessage }}</p>
+      <div class="error-actions">
+        <el-button type="primary" @click="handleRetry">{{ $t('Retry') || '重试' }}</el-button>
+        <el-button @click="handleGoHome">{{ $t('GoHomePage') || '返回首页' }}</el-button>
+      </div>
+      <details v-if="showDetails" class="error-details">
+        <summary>错误详情 (开发环境)</summary>
+        <pre>{{ errorDetails }}</pre>
+      </details>
+    </div>
+  </div>
+  <slot v-else />
+</template>
+
+<script>
+export default {
+  name: 'ErrorBoundary',
+  data() {
+    return {
+      hasError: false,
+      error: null,
+      errorInfo: null
+    }
+  },
+  computed: {
+    errorMessage() {
+      if (this.error) {
+        return this.error.message || String(this.error)
+      }
+      return '未知错误'
+    },
+    errorDetails() {
+      if (!this.error) return ''
+      return JSON.stringify({
+        message: this.error.message,
+        stack: this.error.stack,
+        info: this.errorInfo
+      }, null, 2)
+    },
+    showDetails() {
+      return process.env.NODE_ENV === 'development' && this.error
+    }
+  },
+  errorCaptured(err, instance, info) {
+    // 捕获子组件错误
+    this.hasError = true
+    this.error = err
+    this.errorInfo = info
+
+    // 在开发环境下打印错误
+    if (process.env.NODE_ENV === 'development') {
+      console.error('ErrorBoundary caught error:', err)
+      console.error('Component instance:', instance)
+      console.error('Error info:', info)
+    }
+
+    // 返回 false 阻止错误继续向上传播
+    return false
+  },
+  methods: {
+    handleRetry() {
+      // 重置错误状态，重新渲染子组件
+      this.hasError = false
+      this.error = null
+      this.errorInfo = null
+      this.$forceUpdate()
+    },
+    handleGoHome() {
+      this.$router.push('/')
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.error-boundary {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  min-height: 400px;
+  padding: 20px;
+}
+
+.error-boundary-content {
+  text-align: center;
+  max-width: 600px;
+}
+
+.error-title {
+  font-size: 24px;
+  color: #f56c6c;
+  margin-bottom: 16px;
+}
+
+.error-message {
+  font-size: 16px;
+  color: #606266;
+  margin-bottom: 24px;
+  word-break: break-word;
+}
+
+.error-actions {
+  display: flex;
+  justify-content: center;
+  gap: 12px;
+  margin-bottom: 24px;
+}
+
+.error-details {
+  margin-top: 24px;
+  text-align: left;
+
+  summary {
+    cursor: pointer;
+    color: #909399;
+    margin-bottom: 8px;
+
+    &:hover {
+      color: #606266;
+    }
+  }
+
+  pre {
+    background: #f5f7fa;
+    padding: 12px;
+    border-radius: 4px;
+    overflow-x: auto;
+    font-size: 12px;
+    color: #606266;
+    max-height: 300px;
+    overflow-y: auto;
+  }
+}
+</style>

src/components/Common/IBox/index.vue

@@ -1,9 +1,10 @@
 <template>
   <el-card :class="'ibox ' + type" :shadow="shadow" v-bind="$attrs">
-    <template #header>
+    <template v-if="title" #header>
       <slot name="header">
         <div v-if="title" slot="header" class="clearfix ibox-title">
-          <i v-if="fa" :class="'fa ' + fa" /> <h5>{{ title }}</h5>
+          <i v-if="fa" :class="'fa ' + fa" />
+          <h5>{{ title }}</h5>
         </div>
       </slot>
     </template>
@@ -40,53 +41,53 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
-  .ibox {
-    /*height: 100%;*/
-    clear: both;
-    padding: 0;
-  }
+<style lang="scss" scoped>
+.ibox {
+  /*height: 100%;*/
+  clear: both;
+  padding: 0;
+}
 
-  .ibox ::v-deep .el-card__header {
-    border-color: #e7eaec;
-    border-image: none;
-    margin-bottom: 0;
-    padding: 10px 15px;
-    min-height: 30px;
-    line-height: 1.32;
-    font-weight: normal;
-  }
+.ibox :deep(.el-card__header) {
+  border-color: #e7eaec;
+  border-image: none;
+  margin-bottom: 0;
+  padding: 10px 15px;
+  min-height: 30px;
+  line-height: 1.32;
+  font-weight: normal;
+}
 
-  .ibox-title h5 {
-    display: inline-block;
-    font-size: 13px;
-    margin: 0;
-    padding: 0;
-    text-overflow: ellipsis;
-    font-weight: 500;
-  }
+.ibox-title h5 {
+  display: inline-block;
+  font-size: 13px;
+  margin: 0;
+  padding: 0;
+  text-overflow: ellipsis;
+  font-weight: 500;
+}
 
-  .ibox-tools a {
-    cursor: pointer;
-    margin-left: 5px;
-    color: #c4c4c4;
-  }
+.ibox-tools a {
+  cursor: pointer;
+  margin-left: 5px;
+  color: #c4c4c4;
+}
 
-  .ibox-tools {
-    display: block;
-    float: none;
-    margin-top: 0;
-    position: relative;
-    padding: 0;
-    text-align: right;
-  }
+.ibox-tools {
+  display: block;
+  float: none;
+  margin-top: 0;
+  position: relative;
+  padding: 0;
+  text-align: right;
+}
 
-  .fa {
-    font-size: 14px;
-  }
+.fa {
+  font-size: 14px;
+}
 
-  .ibox ::v-deep .el-card__body {
-    //padding: 30px 30px 20px 30px; // 这个设置会影响详情中的 quick update 和 relations
-    color: var(--color-icon-primary);
-  }
+.ibox :deep(.el-card__body) {
+  //padding: 30px 30px 20px 30px; // 这个设置会影响详情中的 quick update 和 relations
+  color: var(--color-icon-primary);
+}
 </style>

src/components/Common/QuickActions/action.vue

@@ -26,7 +26,7 @@
 import Switcher from '@/components/Form/FormFields/Switcher.vue'
 import Select2 from '@/components/Form/FormFields/Select2.vue'
 import UpdateSelect from '@/components/Form/FormFields/UpdateSelect.vue'
-import { toSentenceCase } from '@/utils/common'
+import { toSentenceCase } from '@/utils/common/index'
 
 class Action {
   constructor() {

src/components/Common/QuickActions/index.vue

@@ -27,7 +27,7 @@ export default {
     title: {
       type: String,
       default() {
-        return this.$t('QuickUpdate')
+        return 'QuickUpdate'
       }
     },
     actions: {
@@ -39,11 +39,11 @@ export default {
 </script>
 
 <style scoped>
-.quick-actions ::v-deep table {
+.quick-actions :deep(table) {
   width: 100%;
 }
 
-.quick-actions ::v-deep tr > td {
+.quick-actions :deep(tr > td) {
   line-height: 1.43;
   padding: 8px 0;
   vertical-align: top;
@@ -51,11 +51,11 @@ export default {
   width: 50%;
 }
 
-.quick-actions ::v-deep tr > td > span:last-child {
+.quick-actions :deep(tr > td > span:last-child) {
   float: right;
 }
 
-.quick-actions ::v-deep button {
+.quick-actions :deep(button) {
   padding: 4px 5px;
   font-size: 13px;
   min-width: 65px;

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

@@ -111,7 +111,7 @@ export default {
   .ring {
     padding: 26px 0 10px;
 
-    & ::v-deep .echarts {
+    & :deep(.echarts) {
       width: 100% !important;
       height: 278px !important;
     }

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)
+  },
+  beforeUnmount() {
+    if (window._echarts) {
+      window._echarts.total.delete(this._chartId)
+      window._echarts.finished.delete(this._chartId)
+      // 可选：当没有图表时清理全局对象
+      if (window._echarts.total.size === 0) {
+        delete window._echarts
+        delete window.echartsFinished
+      }
+    }
+  },
+  methods: {
+    onFinished() {
+      if (!window._echarts) return
+      window._echarts.finished.add(this._chartId)
+      if (window._echarts.finished.size === window._echarts.total.size) {
+        window.echartsFinished = true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/components/Dashboard/LineChart.vue

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

src/components/Dashboard/ProgressChart.vue

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

src/components/Dashboard/RankTable.vue

@@ -9,7 +9,7 @@
       class="table"
       style="width: 100%"
     >
-      <el-table-column :label="$tc('Ranking')">
+      <el-table-column :label="$tc('Ranking')" width="100">
         <template #header>
           <el-tooltip :content="$t('Ranking')" placement="top" :open-delay="500">
             <span style="cursor: pointer;">{{ $t('Ranking') }}</span>
@@ -107,16 +107,16 @@ export default {
   }
 }
 
-::v-deep .el-table td, .el-table th {
+:deep(.el-table td, .el-table th) {
   padding: 5px 0;
 }
 
-::v-deep .el-table th, .el-table tr {
+:deep(.el-table th, .el-table tr) {
   background-color: #F5F6F7 !important;
 
 }
 
-::v-deep .el-table .cell {
+:deep(.el-table .cell) {
   white-space: nowrap;
 }
 </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: {
@@ -33,7 +36,7 @@ export default {
 
       const formatTitle = (text) => {
         if (!text) return ''
-        const maxLength = 23
+        const maxLength = 25
         const lines = []
         for (let i = 0; i < text.length; i += maxLength) {
           lines.push(text.slice(i, i + maxLength))
@@ -88,6 +91,7 @@ export default {
           {
             name: title,
             type: 'pie',
+            minAngle: 5,
             radius: ['72%', '90%'],
             avoidLabelOverlap: false,
             itemStyle: {

src/components/Dashboard/SwitchDate.vue

@@ -1,11 +1,6 @@
 <template>
   <span>
-    <el-radio-group
-      v-model="select"
-      class="switch"
-      size="mini"
-      @change="onChange"
-    >
+    <el-radio-group v-model="select" class="switch" size="small" @change="onChange">
       <el-radio-button v-for="i in iOptions" :key="i.value" :label="i.value">
         {{ i.label }}
       </el-radio-button>
@@ -16,11 +11,13 @@
 <script>
 export default {
   props: {
-    days: {
+    name: {
       type: String,
-      default: () => {
-        return localStorage.getItem('dashboardDays') || '7'
-      }
+      default: 'dashboardDays'
+    },
+    days: {
+      type: [String, Number],
+      default: null
     },
     options: {
       type: Array,
@@ -47,8 +44,28 @@ export default {
       iOptions: this.options.length > 0 ? this.options : defaultOptions
     }
   },
+  created() {
+    let days = this.days
+    if (!days) {
+      days = this.$route.query.days
+    }
+    if (!days) {
+      days = localStorage.getItem(this.name)
+    }
+    if (!days) {
+      days = '7'
+    }
+    if (days && days !== this.select) {
+      this.select = days
+      this.$emit('change', days)
+    }
+  },
+  mounted() {
+    this.$emit('change', this.select)
+  },
   methods: {
     onChange(val) {
+      localStorage.setItem(this.name, val)
       this.$emit('change', val)
     }
   }
@@ -61,7 +78,7 @@ $origin-color: #ffffff;
 .switch {
   font-weight: 400;
 
-  ::v-deep .el-radio-button {
+  :deep(.el-radio-button) {
     &.is-active {
       .el-radio-button__inner {
         border-color: var(--color-primary);
@@ -71,7 +88,7 @@ $origin-color: #ffffff;
     }
   }
 
-  ::v-deep .el-radio-button {
+  :deep(.el-radio-button) {
     .el-radio-button__inner {
       color: var(--color-text-primary);
       background: $origin-color;

src/components/Dialog/DiffDetail.vue

@@ -1,15 +1,15 @@
 <template>
   <Dialog
     v-if="detailVisible"
+    v-model:visible="detailVisible"
     :modal="false"
     :show-cancel="false"
     :show-confirm="false"
     :title="title"
-    :visible.sync="detailVisible"
   >
     <div>
       <div v-if="isEmpty()" style="text-align: center">
-        {{ this.$tc('NoContent') }}
+        {{ $tc('NoContent') }}
       </div>
       <div v-else>
         <el-table
@@ -99,7 +99,7 @@ export default {
     width: 100%;
     max-height: 80vh;
 
-    & ::v-deep td {
+    & :deep(td) {
       padding: 5px 0 !important;
     }
   }

src/components/Dialog/ProcessingDialog.vue

@@ -1,12 +1,13 @@
 <template>
   <Dialog
     :show-cancel="false"
-    :visible="iVisible"
+    :visible="visible"
     class="processing-dialog"
     height="300"
     :title="$tc('Processing')"
     width="300"
-    @confirm="iVisible=false"
+    @update:visible="$emit('update:visible', $event)"
+    @confirm="$emit('update:visible', false)"
   >
     <div id="load">
       <div class="spinner" />
@@ -26,25 +27,16 @@ export default {
       default: false
     }
   },
+  emits: ['update:visible'],
   data() {
     return {}
-  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .processing-dialog {
-  ::v-deep .el-dialog__body {
+  :deep(.el-dialog__body) {
     overflow: hidden;
   }
 }

src/components/Dialog/RemoteProcessingDialog.vue

@@ -1,10 +1,11 @@
 <template>
   <Dialog
-    :visible="iVisible"
+    :visible="visible"
     height="300"
     title="Processing"
     width="300"
     class="processing-dialog"
+    @update:visible="$emit('update:visible', $event)"
   >
     <div id="load">
       <div class="spinner" />
@@ -24,36 +25,27 @@ export default {
       default: false
     }
   },
+  emits: ['update:visible'],
   data() {
     return {}
-  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
   }
 }
 </script>
 
 <style lang="scss" scoped>
 .processing-dialog {
-  ::v-deep .el-dialog__body {
+  :deep(.el-dialog__body) {
     overflow: hidden;
   }
 }
 
 .spinner {
-    width: 100px;
-    height: 100px;
-    border: 5px solid rgba(0, 0, 0, 0.1);
-    border-radius: 50%;
-    border-top-color: var(--color-primary);
-    animation: spin 1s infinite linear;
+  width: 100px;
+  height: 100px;
+  border: 5px solid rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  border-top-color: var(--color-primary);
+  animation: spin 1s infinite linear;
 }
 
 #load {
@@ -62,8 +54,8 @@ export default {
 }
 
 @keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>

src/components/Dialog/ReportDialog.vue

@@ -1,26 +1,27 @@
 <template>
   <div>
     <Dialog
-      v-if="iVisible"
+      v-if="visible"
+      v-model:visible="iVisible"
       :destroy-on-close="true"
       :show-cancel="false"
       :show-confirm="false"
       :title="$tc('Report')"
-      :visible.sync="iVisible"
       top="35vh"
       width="80%"
-      @close="loading=true"
+      @close="loading = true"
     >
       <span v-if="loading" v-loading="loading" class="loading" />
-      <iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
+      <iframe title="dialog" :src="url" style="border: none" @load="onIframeLoad" />
     </Dialog>
   </div>
 </template>
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-
+import vModelMixin from '@/utils/vue/vModelMixin'
 export default {
+  mixins: [vModelMixin('visible')],
   name: 'ReportDialog',
   components: {
     Dialog
@@ -35,25 +36,14 @@ export default {
       default: ''
     }
   },
+  emits: ['update:visible'],
   data() {
     return {
       loading: true
     }
   },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
-  },
-  mounted() {
-  },
-  beforeMount() {
-  },
+  mounted() {},
+  beforeMount() {},
   methods: {
     onIframeLoad() {
       this.loading = false

src/components/Dialog/Secret.vue

@@ -1,8 +1,8 @@
 <template>
   <Dialog
+    v-model:visible="iVisible"
     :show-cancel="false"
     :title="title"
-    :visible.sync="visible"
     :close-on-click-modal="false"
     width="700px"
     @close="onClose"
@@ -28,14 +28,16 @@
 
 <script>
 import i18n from '@/i18n/i18n'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 import Dialog from '@/components/Dialog/index'
+import vModelMixin from '@/utils/vue/vModelMixin'
 
 export default {
   name: 'Secret',
   components: {
     Dialog
   },
+  mixins: [vModelMixin('visible')],
   props: {
     title: {
       type: String,
@@ -65,11 +67,10 @@ export default {
     }
   }
 }
-
 </script>
 
-<style lang='scss' scoped>
- .secret {
+<style lang="scss" scoped>
+.secret {
   color: #2b2f3a;
   margin-top: 20px;
 }

src/components/Dialog/index.vue

@@ -35,7 +35,7 @@
 
 <script>
 export default {
-  name: 'Dialog',
+  name: 'DialogComponent',
   props: {
     title: {
       type: String,
@@ -56,7 +56,7 @@ export default {
     confirmTitle: {
       type: String,
       default() {
-        return this.$t('Confirm')
+        return 'Confirm'
       }
     },
     showCancel: {
@@ -66,7 +66,7 @@ export default {
     cancelTitle: {
       type: String,
       default() {
-        return this.$t('Cancel')
+        return 'Cancel'
       }
     },
     showButtons: {
@@ -106,11 +106,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dialog.shadow ::v-deep .el-dialog {
+.dialog.shadow :deep(.el-dialog) {
   box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.6);
 }
 
-.dialog ::v-deep .el-dialog {
+.dialog :deep(.el-dialog) {
   border-radius: 0.3em;
   max-width: min(100vw, 1500px);
 
@@ -128,14 +128,14 @@ export default {
     display: none;
   }
 
-  &__header {
+  &.dialog__header {
     box-sizing: border-box;
     padding: 15px 22px;
     border-bottom: 1px solid #dee2e6;
     font-weight: 400;
   }
 
-  &__body {
+  &.dialog__body {
     padding: 20px 30px;
     font-size: 13px;
 
@@ -144,7 +144,7 @@ export default {
     }
   }
 
-  &__footer {
+  &.dialog__footer {
     border-top: 1px solid #dee2e6;
     padding: 16px 25px;
     justify-content: flex-end;
@@ -152,12 +152,12 @@ export default {
 }
 
 @media (max-width: 900px) {
-  .dialog ::v-deep .el-dialog {
+  .dialog :deep(.el-dialog) {
     max-width: calc(100% - 30px);
   }
 }
 
-.dialog-footer ::v-deep button.el-button {
+.dialog-footer :deep(button.el-button) {
   font-size: 13px;
   padding: 8px 12px;
 }

src/components/Drawer/index.vue

@@ -1,17 +1,18 @@
 <template>
+  <!-- DEBUG: Drawer visible={{ visible }}, component={{ component ? 'EXISTS' : 'EMPTY' }}, title={{ title }} -->
   <el-drawer
     ref="drawer"
-    v-el-drawer-drag-width
+    :model-value="visible"
     :append-to-body="true"
     :before-close="handleClose"
     :class="['drawer', { 'drawer__no-footer': !hasFooter }]"
     :modal="modal"
     :size="size"
     :title="title"
-    :visible.sync="iVisible"
     custom-class="drawer"
     destroy-on-close
     direction="rtl"
+    @update:model-value="handleUpdateModelValue"
     v-on="$listeners"
   >
     <div class="drawer__content">
@@ -30,7 +31,8 @@
 </template>
 
 <script>
-import { getDrawerWidth } from '@/utils/common'
+import { getDrawerWidth } from '@/utils/common/index'
+import { useDrawerDrag } from '@/utils/vue/useDrawerDrag'
 
 export default {
   props: {
@@ -72,22 +74,64 @@ export default {
   data() {
     return {
       loading: false,
-      formLabelWidth: '80px'
+      formLabelWidth: '80px',
+      drawerDrag: null
     }
   },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
+  watch: {
+    visible(val) {
+      console.debug('>>> Drawer visible watch:', val, {
+        component: this.component ? 'EXISTS' : 'EMPTY',
+        title: this.title
+      })
+      if (val) {
+        // 抽屉打开时，初始化拖拽功能
+        this.$nextTick(() => {
+          if (!this.drawerDrag) {
+            this.drawerDrag = useDrawerDrag({
+              storageKey: 'drawerWidth'
+            })
+          }
+          this.drawerDrag.start()
+        })
+      } else {
+        // 抽屉关闭时，清理拖拽功能
+        if (this.drawerDrag) {
+          this.drawerDrag.cleanup()
+        }
       }
     }
   },
   mounted() {
+    console.debug('>>> Drawer mounted:', {
+      visible: this.visible,
+      component: this.component ? 'EXISTS' : 'EMPTY',
+      title: this.title
+    })
+    if (this.visible) {
+      this.$nextTick(() => {
+        if (!this.drawerDrag) {
+          this.drawerDrag = useDrawerDrag({
+            storageKey: 'drawerWidth'
+          })
+        }
+        this.drawerDrag.start()
+      })
+    }
+  },
+  beforeUnmount() {
+    if (this.drawerDrag) {
+      this.drawerDrag.cleanup()
+    }
   },
   methods: {
+    handleUpdateModelValue(val) {
+      console.debug('>>> Drawer handleUpdateModelValue:', val, {
+        component: this.component ? 'EXISTS' : 'EMPTY',
+        title: this.title
+      })
+      this.$emit('update:visible', val)
+    },
     handleClose(done) {
       this.$emit('close-drawer')
       done()
@@ -96,29 +140,25 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .drawer__no-footer {
-  ::v-deep {
-    .drawer {
+  :deep(.drawer){
       .page {
         height: calc(100vh - 55px);
       }
-    }
   }
 }
 
 @media (max-width: 992px) {
-  .drawer ::v-deep {
-    .el-form-item {
+  .drawer :deep(.el-form-item){
       display: flex;
       flex-direction: column;
       gap: 0.3rem;
-    }
   }
 }
 
 .drawer {
-  ::v-deep {
+  :deep(.el-form-item){
     min-width: 565px;
 
     .el-card__body {
@@ -242,7 +282,7 @@ export default {
     }
 
     .el-drawer__header {
-      border-bottom: 1px solid #EBEEF5;
+      border-bottom: 1px solid #ebeef5;
       margin-bottom: 0;
       padding: 15px 20px;
       font-size: 16px;
@@ -282,7 +322,8 @@ export default {
       }
     }
 
-    .drawer__content, .tab-page-content {
+    .drawer__content,
+    .tab-page-content {
       height: 100%;
       background: #f3f3f3;
     }

src/components/Form/AutoDataForm/index.vue

@@ -5,6 +5,7 @@
       ref="dataForm"
       :fields="totalFields"
       :form="iForm"
+      :server-errors="serverErrors"
       v-bind="$attrs"
       v-on="$listeners"
     >
@@ -28,6 +29,7 @@
 import DataForm from '../DataForm/index.vue'
 import FormGroupHeader from '@/components/Form/FormGroupHeader/index.vue'
 import { FormFieldGenerator } from '@/components/Form/AutoDataForm/utils'
+import { UniqueCheck } from '@/components/Form/DataForm/rules'
 
 export default {
   name: 'AutoDataForm',
@@ -65,7 +67,8 @@ export default {
       totalFields: [],
       loading: true,
       groups: [],
-      errors: {}
+      errors: {},
+      serverErrors: {}
     }
   },
   computed: {
@@ -94,7 +97,7 @@ export default {
   },
   methods: {
     async optionUrlMetaAndGenerateColumns() {
-      let data = { actions: {}}
+      let data = { actions: {} }
       if (this.url) {
         data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
       }
@@ -103,6 +106,8 @@ export default {
       this.generateColumns()
       this.$emit('afterGenerateColumns', this.totalFields)
       this.cleanFormValue()
+      // 初始化时清空错误
+      this.serverErrors = {}
       this.loading = false
     },
     generateColumns() {
@@ -110,6 +115,47 @@ export default {
       this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta)
       this.groups = generator.groups
       this.$log.debug('Total fields: ', this.totalFields)
+      this.applyUniqueRules()
+    },
+    applyUniqueRules() {
+      const fields = this.totalFields || []
+      const currentIdGetter = () => {
+        return this.$route?.params?.id || this.form?.id || this.iForm?.id
+      }
+
+      // 移除 url 后拼接的参数
+      const defaultListUrl = (() => {
+        try {
+          const u = new URL(this.url, location.origin)
+          u.pathname = u.pathname.replace(/\/(\d+|[0-9a-fA-F-]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})\/?$/, '/')
+          return u.origin ? u.origin + u.pathname : u.pathname
+        } catch (e) {
+          return (this.url || '').replace(/\/(\d+|[0-9a-fA-F-]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})\/?($|\?)/, '/$2')
+        }
+      })()
+
+      fields.forEach(field => {
+        const conf = field?.uniqueCheck
+
+        if (!conf) return
+
+        const confObj = (typeof conf === 'object') ? conf : {}
+        const param = confObj.param || field.prop || field.id
+        const url = confObj.url || defaultListUrl
+        const label = confObj.label || field.label || param
+        const entityName = confObj.entityName || ''
+
+        if (!Array.isArray(field.rules)) field.rules = []
+
+        field.rules.push(UniqueCheck({
+          url,
+          param,
+          label,
+          entityName,
+          getIgnoreId: currentIdGetter,
+          fieldName: field.prop || field.id
+        }))
+      })
     },
     _cleanFormValue(form, remoteMeta) {
       if (!form) {
@@ -139,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/AutoDataForm/utils.js

@@ -1,12 +1,13 @@
-import Vue from 'vue'
+// Vue dependency removed; use console for debug logs
 import ObjectSelect2 from '@/components/Form/FormFields/NestedObjectSelect2.vue'
 import NestedField from '@/components/Form/AutoDataForm/components/NestedField.vue'
 import rules from '@/components/Form/DataForm/rules'
 import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
 import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
-import { assignIfNot, toSentenceCase } from '@/utils/common'
+import { assignIfNot, toSentenceCase } from '@/utils/common/index'
 import TagInput from '@/components/Form/FormFields/TagInput.vue'
 import i18n from '@/i18n/i18n'
+import _ from 'lodash'
 
 export class FormFieldGenerator {
   constructor() {
@@ -119,7 +120,7 @@ export class FormFieldGenerator {
       const f = this.generateField(name, nestedFieldsMeta, nestedFieldsRemoteMeta)
       fields.push(f)
     }
-    Vue.$log.debug('NestFields: ', fields)
+    console.debug('NestFields: ', fields)
     return fields
   }
 
@@ -177,7 +178,10 @@ export class FormFieldGenerator {
     const systemLang = document.cookie.django_language
     if (helpTextAsPlaceholder !== undefined) {
       helpTextAsPlaceholder = !!helpTextAsPlaceholder
-    } else if (placeholderType.indexOf(field.type) === -1 && placeholderComponent.indexOf(field.component) === -1) {
+    } else if (
+      placeholderType.indexOf(field.type) === -1 &&
+      placeholderComponent.indexOf(field.component) === -1
+    ) {
       helpTextAsPlaceholder = false
     } else if ((helpTextWordLength <= 5 || helpText.length <= 10) && systemLang === 'en') {
       helpTextAsPlaceholder = true
@@ -239,7 +243,7 @@ export class FormFieldGenerator {
     field = this.setPlaceholder(field, remoteFieldMeta)
     field = this.afterGenerateField(field)
     _.set(field, 'attrs.error', '')
-    Vue.$log.debug('Generate field: ', name, field)
+    console.debug('Generate field: ', name, field)
     return field
   }
 
@@ -252,7 +256,7 @@ export class FormFieldGenerator {
       return field
     }
     if (field.type === 'select' || [ObjectSelect2].indexOf(field.component) > -1) {
-      field.el.placeholder = i18n.t('PleaseSelect') + label.toLowerCase()
+      field.el.placeholder = i18n.global.t('PleaseSelect') + label.toLowerCase()
     } else if (field.type === 'input') {
       field.el.placeholder = field.label
     }

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

@@ -1,10 +1,9 @@
 <template>
   <div>
-    <template v-for="(item, index) in data.items">
+    <template v-for="(item, index) in data.items" :key="item.id || index">
       <slot :name="`id:${item.id}`" />
       <slot :name="`$id:${item.id}`" />
       <render-form-item
-        :key="index"
         :prop="`${data.id}.${item.id}`"
         :data="item"
         :value="value"
@@ -12,7 +11,7 @@
         :disabled="disabled"
         :readonly="readonly"
         :options="options[item.id]"
-        @updateValue="updateValue"
+        @update-value="updateValue"
       />
     </template>
   </div>

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,18 +29,12 @@
     <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>
       <div v-else-if="data.type === 'select'">
-        <template>
-          {{ multipleValue }}
-        </template>
+        {{ multipleValue }}
       </div>
     </template>
     <custom-component
@@ -49,15 +45,10 @@
       v-bind="componentProps"
       v-on="listeners"
     >
-      <template v-for="opt in options">
-        <el-option
-          v-if="data.type === 'select'"
-          :key="opt.label"
-          v-bind="opt"
-        />
+      <template v-for="opt in options" :key="opt.value">
+        <el-option v-if="data.type === 'select'" v-bind="opt" />
         <el-checkbox-button
           v-else-if="data.type === 'checkbox-group' && data.style === 'button'"
-          :key="opt.value"
           :label="'value' in opt ? opt.value : opt.label"
           v-bind="opt"
         >
@@ -66,7 +57,6 @@
 
         <el-checkbox
           v-else-if="data.type === 'checkbox-group' && data.style !== 'button'"
-          :key="opt.value"
           :label="'value' in opt ? opt.value : opt.label"
           v-bind="opt"
         >
@@ -80,7 +70,6 @@
         <!-- FYI: radio 的 value 属性可以在没有 radio-group 时用来关联到同一个 v-model -->
         <el-radio
           v-else-if="data.type === 'radio-group'"
-          :key="opt.label"
           :label="'value' in opt ? opt.value : opt.label"
           v-bind="opt"
         >
@@ -111,10 +100,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 +141,10 @@ export default {
   props: {
     // eslint-disable-next-line vue/require-default-prop
     data: Object,
+    serverErrors: {
+      type: Object,
+      default: () => ({})
+    },
     prop: {
       type: String,
       default() {
@@ -170,7 +163,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 +173,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 +183,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 +203,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 +228,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 +248,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 +316,7 @@ export default {
   }
 }
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .help-tips {
   opacity: 0.8;
   line-height: 2;
@@ -331,8 +324,8 @@ export default {
 }
 
 .help-block {
-  ::v-deep .el-alert__icon {
-    font-size: 16px
+  :deep(.el-alert__icon) {
+    font-size: 16px;
   }
 
   &.checkbox {

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

@@ -1,17 +1,23 @@
 <template>
-  <el-form ref="elForm" :model="value" class="el-form-renderer" v-bind="$attrs">
-    <template v-for="item in innerContent">
+  <el-form
+    ref="elForm"
+    :model="value"
+    class="el-form-renderer"
+    v-bind="$attrs"
+    @submit.native.prevent
+  >
+    <template v-for="item in innerContent" :key="item.id">
       <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]"
         :readonly="readonly || item.readonly"
         :value="value"
-        @updateValue="updateValue"
+        @update-value="updateValue"
       />
       <slot v-if="!isHidden(item)" :name="`$id:${item.id}`" />
     </template>
@@ -19,13 +25,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 +59,10 @@ export default {
       type: Array,
       required: true
     },
+    serverErrors: {
+      type: Object,
+      default: () => ({})
+    },
     disabled: {
       type: Boolean,
       default: false
@@ -115,7 +131,9 @@ export default {
     this.initValue = _clonedeep(this.value)
     this.$nextTick(() => {
       // proxy
-      Object.keys(this.$refs.elForm.$options.methods).forEach(item => {
+      const methods = this.$refs.elForm.$options.methods || {}
+
+      Object.keys(methods).forEach(item => {
         if (item in this) return
         this[item] = this.$refs.elForm[item]
       })
@@ -208,6 +226,11 @@ export default {
         return item.hidden(this.value)
       }
       return false
+    },
+    clearValidate() {
+      if (this.$refs.elForm) {
+        this.$refs.elForm.clearValidate()
+      }
     }
   }
 }

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])
   )
 }