feat: Asset permossion add account selection component and its dialog and button

2026-01-14 03:46:26 +00:00 · 2025-06-27 06:09:10 +00:00
703 changed files with 17229 additions and 23244 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,124 +1,77 @@
 module.exports = {
  root: true,
-  // Explicitly use vue-eslint-parser for .vue SFCs
-  parser: 'vue-eslint-parser',
  parserOptions: {
-    parser: '@babel/eslint-parser',
-    sourceType: 'module',
-    ecmaVersion: 2021,
-    ecmaFeatures: { jsx: true },
-    // 允许使用项目的 babel 配置（babel.config.js），避免 JSX 等语法解析错误
-    requireConfigFile: true
+    parser: 'babel-eslint',
+    sourceType: 'module'
  },
  env: {
    browser: true,
    node: true,
    es6: true
  },
-  extends: ['plugin:vue/vue3-recommended', 'eslint:recommended'],
+  extends: ['plugin:vue/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': ['warn', { singleline: 10, multiline: 1 }],
+    'vue/max-attributes-per-line': [2, {
+      'singleline': 10,
+      'multiline': {
+        'max': 1,
+        'allowFirstLine': false
+      }
+    }],
    'vue/singleline-html-element-content-newline': 'off',
    'vue/multiline-html-element-content-newline': 'off',
-    // Vue 3: use the new rule name instead of the removed `vue/name-property-casing`
-    'vue/component-definition-name-casing': ['error', 'PascalCase'],
+    'vue/name-property-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,
@@ -149,23 +102,17 @@ 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,
@@ -193,126 +140,62 @@ 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'
+    'one-var': [2, {
+      'initialized': 'never'
+    }],
+    'operator-linebreak': [2, 'after', {
+      'overrides': {
+        '?': 'before',
+        ':': 'before'
      }
-    ],
-    '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,
-      { anonymous: 'never', named: 'never', asyncArrow: 'always' }
-    ],
+    'space-before-function-paren': [2, 'never'],
    'space-in-parens': [2, 'never'],
    'space-infix-ops': 2,
-    'space-unary-ops': [
-      2,
-      {
-        words: true,
-        nonwords: false
-      }
-    ],
-    'object-curly-spacing': [2, 'always'],
-    'spaced-comment': [
-      2,
-      'always',
-      {
-        markers: ['global', 'globals', 'eslint', 'eslint-disable', '*package', '!', ',']
-      }
-    ],
+    'space-unary-ops': [2, {
+      'words': true,
+      'nonwords': false
+    }],
+    '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,
-    '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
-      }
-    ]
+    'object-curly-spacing': [2, 'always', {
+      objectsInObjects: false
+    }],
+    'array-bracket-spacing': [2, 'never']
  }
 }
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,57 +0,0 @@
-# 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
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -1,12 +0,0 @@
-module.exports = {
-  singleQuote: true,
-  semi: false,
-  trailingComma: 'none',
-  printWidth: 100,
-  tabWidth: 2,
-  useTabs: false,
-  bracketSpacing: true,
-  arrowParens: 'avoid',
-  endOfLine: 'auto',
-  spaceBeforeFunctionParen: false
-}
--- a/.yarnrc
+++ b/.yarnrc
@@ -1,3 +0,0 @@
-cache-folder ".yarn-cache"
-global-folder ".yarn-global"
-prefix ".yarn-global"
--- a/2
+++ b/2
@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20251204_081759 AS stage-build
+FROM jumpserver/lina-base:20250616_083043 AS stage-build

 ARG VERSION
 ENV VERSION=$VERSION
--- a/PRETTIER.md
+++ b/PRETTIER.md
@@ -1,76 +0,0 @@
-# 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` 配置正确。
--- a/babel.config.js
+++ b/babel.config.js
@@ -1,14 +1,8 @@
 module.exports = {
-  presets: ['@vue/cli-plugin-babel/preset'],
+  presets: [
+    '@vue/app'
+  ],
  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
-      }
-    ]
  ]
 }
--- a/jest.config.js
+++ b/jest.config.js
@@ -1,8 +1,7 @@
 module.exports = {
  moduleFileExtensions: ['js', 'jsx', 'json', 'vue'],
-  testEnvironment: 'jsdom',
  transform: {
-    '^.+\\.vue$': '@vue/vue3-jest',
+    '^.+\\.vue$': 'vue-jest',
    '.+\\.(css|styl|less|sass|scss|svg|png|jpg|ttf|woff|woff2)$':
      'jest-transform-stub',
    '^.+\\.jsx?$': 'babel-jest'
@@ -10,6 +9,7 @@ module.exports = {
  moduleNameMapper: {
    '^@/(.*)$': '<rootDir>/src/$1'
  },
+  snapshotSerializers: ['jest-serializer-vue'],
  testMatch: [
    '**/tests/unit/**/*.spec.(js|jsx|ts|tsx)|**/__tests__/*.(js|jsx|ts|tsx)'
  ],
--- a/mock/index.js
+++ b/mock/index.js
@@ -1,25 +1,13 @@
 import Mock from 'mockjs'
+import { param2Obj } from '../src/utils'

 import user from './user'
 import table from './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]
+const mocks = [
+  ...user,
+  ...table
+]

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


-td .el-button.el-button--small {
+td .el-button.el-button--mini {
  padding: 1px 6px;
  line-height: 1.5;

--- a/public/theme/element-ui.css
+++ b/public/theme/element-ui.css
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,6 @@
 <template>
  <div id="app">
-    <!-- 使用 key 而不是 v-if 来强制重新渲染 router-view，避免根节点被完全卸载导致的 DOM insertBefore 错误 -->
-    <router-view :key="isRouterAlive" />
+    <router-view v-if="isRouterAlive" />
  </div>
 </template>

@@ -44,30 +43,6 @@ 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
@@ -95,9 +70,7 @@ 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() {
--- a/src/api/ops.js
+++ b/src/api/ops.js
@@ -61,14 +61,13 @@ export function stopJob(form) {
  })
 }

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

--- a/src/api/sessions.js
+++ b/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}/`,
  )
 }

--- a/src/assets/img/auth/lark_logo.png
+++ b/src/assets/img/auth/lark_logo.png
--- a/src/assets/img/auth/oauth2_logo.png
+++ b/src/assets/img/auth/oauth2_logo.png
--- a/src/assets/img/auth/oidc_logo.png
+++ b/src/assets/img/auth/oidc_logo.png
--- a/src/assets/img/auth/radius_logo.png
+++ b/src/assets/img/auth/radius_logo.png
--- a/src/assets/img/auth/slack_logo.png
+++ b/src/assets/img/auth/slack_logo.png
--- a/src/assets/img/chat.png
+++ b/src/assets/img/chat.png
--- a/src/assets/img/cloud/proxmox.svg
+++ b/src/assets/img/cloud/proxmox.svg
@@ -1 +0,0 @@
-<?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>
--- a/src/assets/img/deepSeek.png
+++ b/src/assets/img/deepSeek.png
--- a/src/assets/img/dream_bg.png
+++ b/src/assets/img/dream_bg.png
--- a/src/components/Apps/AccountCreateUpdateForm/const.js
+++ b/src/components/Apps/AccountCreateUpdateForm/const.js
@@ -1,6 +1,5 @@
 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'

@@ -15,28 +14,19 @@ export const accountFieldsMeta = (vm) => {
  }

  return {
-    nodes: {
+    assets: {
      component: Select2,
-      label: vm.$t('Node'),
+      label: vm.$t('Asset'),
+      rules: [Required],
      el: {
-        value: [],
+        multiple: true,
        ajax: {
-          url: '/api/v1/assets/nodes/',
+          url: '/api/v1/assets/assets/',
          transformOption: (item) => {
-            return { label: item.full_value, value: item.id }
+            return { label: item.name + '(' + item.address + ')', value: item.id }
          }
        }
      },
-      hidden: () => {
-        return !vm.addTemplate
-      }
-    },
-    assets: {
-      component: AssetSelect,
-      label: vm.$t('Asset'),
-      el: {
-        multiple: false
-      },
      hidden: () => {
        return vm.platform || vm.asset
      }
@@ -48,7 +38,7 @@ export const accountFieldsMeta = (vm) => {
        get disabled() {
          return vm.isDisabled
        },
-        multiple: vm.addTemplate,
+        multiple: false,
        ajax: {
          url: '/api/v1/accounts/account-templates/',
          transformOption: (item) => {
--- a/src/components/Apps/AccountCreateUpdateForm/index.vue
+++ b/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/secure'
+import { encryptPassword } from '@/utils/crypto'
 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'), ['nodes', 'assets']],
+        [this.$t('Asset'), ['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 {
-  :deep(.el-form-item) {
+  ::v-deep .el-form-item {
    //margin-bottom: 5px;

    .help-block {
@@ -180,7 +180,7 @@ export default {
    }
  }

-  :deep(.form-group-header) {
+  ::v-deep .form-group-header {
    .hr-line-dashed {
      //margin: 5px 0;
    }
--- a/src/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue
+++ b/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/secure'
+import { encryptPassword } from '@/utils/crypto'

 export default {
  name: 'AccountBulkUpdateDialog',
--- a/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
+++ b/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
@@ -1,7 +1,7 @@
-<template>
+<template v-if="iVisible">
  <Drawer
-    v-model:visible="iVisible"
    :title="title"
+    :visible="iVisible"
    class="drawer"
    @close-drawer="handleCloseDrawer"
  >
@@ -26,7 +26,6 @@ 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',
@@ -36,7 +35,6 @@ export default {
    Page,
    AccountCreateUpdateForm
  },
-  mixins: [vModelMixin('visible')],
  props: {
    visible: {
      type: Boolean,
@@ -56,12 +54,11 @@ export default {
    },
    title: {
      type: String,
-      default() {
-        return 'AddAccount'
+      default: function() {
+        return this.$t('AddAccount')
      }
    }
  },
-  emits: ['update:visible', 'add', 'bulk-create-done'],
  data() {
    return {
      loading: false,
@@ -71,6 +68,14 @@ export default {
  computed: {
    protocols() {
      return this.asset ? this.asset.protocol : []
+    },
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
    }
  },
  methods: {
@@ -88,33 +93,23 @@ export default {
        iVisible = true
        data = formValue
        url = `/api/v1/accounts/accounts/bulk/`
-        if (
-          (!data.assets || data.assets.length === 0) &&
-          (!data.nodes || data.nodes.length === 0)
-        ) {
-          this.$message.error(this.$tc('PleaseSelectAssetOrNode'))
+        if (data.assets.length === 0) {
+          this.$message.error(this.$tc('PleaseSelectAsset'))
          return
        }
      }
-      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)
-        })
+      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)
+      })
    },
    editAccount(form) {
      const data = { ...form }
@@ -128,14 +123,11 @@ 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.$emit('update:visible', 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.iVisible = false
+            this.$emit('add', true)
+            this.$message.success(this.$tc('UpdateSuccessMsg'))
+          }).catch(error => this.setFieldError(error))
      }
    },
    handleResult(resp, error) {
@@ -172,7 +164,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(',')
@@ -191,18 +183,15 @@ export default {
      }
    },
    handleCloseDrawer() {
-      this.$emit('update:visible', false)
+      this.iVisible = false
      // Reflect.deleteProperty(this.$route.query, 'flag')
    },
    handleAccountOperation(id, path, data) {
-      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))
+      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))
    }
  }
 }
@@ -210,7 +199,8 @@ export default {

 <style lang="scss" scoped>
 .drawer {
-  :deep(.el-drawer__body) {
+  ::v-deep .el-drawer__body {
+
    .el-form {
      margin-right: 30px;
    }
--- a/src/components/Apps/AccountListTable/AccountList.vue
+++ b/src/components/Apps/AccountListTable/AccountList.vue
@@ -9,55 +9,50 @@
    />
    <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"
-      @update-auth-done="onUpdateAuthDone"
+      :visible.sync="showUpdateSecretDialog"
+      @updateAuthDone="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/index'
+import { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const'
+import { openTaskPage } from '@/utils/jms'
 import {
  AccountConnectFormatter,
  ActionsFormatter,
@@ -90,7 +85,9 @@ export default {
    },
    exportUrl: {
      type: String,
-      default: ''
+      default() {
+        return this.url.replace('/accounts/accounts/', '/accounts/account-secrets/')
+      }
    },
    hasLeftActions: {
      type: Boolean,
@@ -126,11 +123,14 @@ 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,8 +161,6 @@ 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,
@@ -226,7 +224,7 @@ export default {
          },
          ds: {
            width: '100px',
-            formatter: row => {
+            formatter: (row) => {
              if (row.ds && row.ds['domain_name']) {
                return row.ds['domain_name']
              } else {
@@ -294,8 +292,7 @@ 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)
            }
@@ -344,7 +341,7 @@ export default {
            can: () => {
              return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
            },
-            callback: async () => {
+            callback: async() => {
              await this.getAssetDetail()
              setTimeout(() => {
                vm.iAsset = this.asset
@@ -363,27 +360,21 @@ 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 &&
-                vm.$hasPerm('accounts.verify_account')
-              )
+              return selectedRows.length > 0 &&
+                ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
+                !this.$store.getters.currentOrgIsRoot
            },
            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)
          },
          {
@@ -398,14 +389,13 @@ 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)
          },
          {
@@ -413,12 +403,10 @@ 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
@@ -454,11 +442,7 @@ 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() {
@@ -494,9 +478,7 @@ export default {
      this.$refs.ListTable.reloadTable()
    },
    async getAssetDetail() {
-      const {
-        query: { asset }
-      } = this.$route
+      const { query: { asset }} = this.$route
      if (asset) {
        this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
      }
--- a/src/components/Apps/AccountListTable/BulkCreateResultDialog.vue
+++ b/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 lang="jsx">
+<script>
 import Dialog from '@/components/Dialog/index.vue'
 import DataTable from '@/components/Table/DataTable/index.vue'

@@ -49,10 +49,6 @@ export default {
            prop: 'asset',
            label: this.$t('Asset')
          },
-          {
-            prop: 'account',
-            label: this.$t('Account')
-          },
          {
            prop: 'state',
            label: this.$t('Status'),
@@ -114,7 +110,10 @@ export default {
  color: var(--color-success);
 }

-:deep(.el-data-table .el-table .el-table__row > td > div > span) {
+.color-default {
+}
+
+::v-deep .el-data-table .el-table .el-table__row > td > div > span {
  white-space: inherit;
 }

--- a/src/components/Apps/AccountListTable/PasswordHistoryDialog.vue
+++ b/src/components/Apps/AccountListTable/PasswordHistoryDialog.vue
@@ -1,9 +1,5 @@
 <template>
-  <GenericListTableDialog
-    v-bind="config"
-    :visible="visible"
-    @update:visible="$emit('update:visible', $event)"
-  />
+  <GenericListTableDialog :visible.sync="iVisible" v-bind="config" />
 </template>

 <script>
@@ -24,7 +20,6 @@ export default {
      default: false
    }
  },
-  emits: ['update:visible'],
  data() {
    return {
      config: {
@@ -64,8 +59,20 @@ export default {
        }
      }
    }
+  },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
  }
 }
 </script>

-<style scoped></style>
+<style scoped>
+
+</style>
--- a/src/components/Apps/AccountListTable/RemoveAccount.vue
+++ b/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/index'
+import { openTaskPage } from '@/utils/jms'

 export default {
  name: 'RemoveAccount',
@@ -65,7 +65,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-.item-textarea :deep(.el-textarea__inner) {
+.item-textarea ::v-deep .el-textarea__inner {
  height: 110px;
 }

@@ -78,12 +78,12 @@ export default {
    border-bottom: none;
  }

-  :deep(.el-form-item__label) {
+  ::v-deep .el-form-item__label {
    padding-right: 20px;
    line-height: 30px;
  }

-  :deep(.el-form-item__content) {
+  ::v-deep .el-form-item__content {
    line-height: 30px;

    pre {
--- a/src/components/Apps/AccountListTable/UpdateSecretInfo.vue
+++ b/src/components/Apps/AccountListTable/UpdateSecretInfo.vue
@@ -1,10 +1,11 @@
 <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"
@@ -22,13 +23,11 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
-import { encryptPassword } from '@/utils/secure'
+import { encryptPassword } from '@/utils/crypto'
 import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
-import vModelMixin from '@/utils/vue/vModelMixin'

 export default {
  name: 'UpdateSecretInfo',
-  mixins: [vModelMixin('visible')],
  components: {
    AutoDataForm,
    Dialog
@@ -43,19 +42,12 @@ 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,
@@ -72,25 +64,34 @@ 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.$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)
-        })
+      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
+      })
    },
    handleCancel() {
      this.$emit('update:visible', false)
--- a/src/components/Apps/AccountListTable/ViewSecret.vue
+++ b/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="iTitle"
+      :title="title"
+      :visible.sync="showSecret"
      :width="'50'"
+      v-bind="$attrs"
      @confirm="accountConfirmHandle"
      v-on="$listeners"
    >
@@ -20,12 +20,10 @@
        <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>
@@ -38,12 +36,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>
@@ -53,17 +51,17 @@
    </Dialog>
    <PasswordHistoryDialog
      v-if="showPasswordHistoryDialog"
-      v-model:visible="showPasswordHistoryDialog"
      :account="account"
+      :visible.sync="showPasswordHistoryDialog"
    />
  </div>
 </template>

-<script lang="jsx">
+<script>
 import Dialog from '@/components/Dialog/index.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
 import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
-import { encryptPassword } from '@/utils/secure'
+import { encryptPassword } from '@/utils/crypto'

 export default {
  name: 'ShowSecretInfo',
@@ -91,14 +89,15 @@ export default {
    },
    title: {
      type: String,
-      default: ''
+      default: function() {
+        return this.$tc('Detail')
+      }
    },
    showPasswordRecord: {
      type: Boolean,
      default: true
    }
  },
-  emits: ['update:visible'],
  data() {
    return {
      modifiedSecret: '',
@@ -108,7 +107,6 @@ export default {
      mfaDialogVisible: true,
      sshKeyFingerprint: '-',
      historyCount: 0,
-      iTitle: this.title || this.$tc('Detail'),
      showPasswordHistoryDialog: false
    }
  },
@@ -142,14 +140,13 @@ 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
@@ -170,54 +167,54 @@ export default {
 </script>

 <style lang="scss" scoped>
-.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;
+  .item-textarea ::v-deep .el-textarea__inner {
+    height: 110px;
  }

-  :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;
-  }
+  .el-form-item {
+    border-bottom: 1px solid #EBEEF5;
+    padding: 5px 0;
+    margin-bottom: 0;

-  :deep(.el-form-item__content) {
-    line-height: 30px;
+    &:last-child {
+      border-bottom: none;
+    }

-    pre {
-      margin: 0;
+    ::v-deep .el-form-item__label {
+      display: flex;
+      align-items: center;
+      justify-content: flex-start;
+      padding-right: 20px;
+      line-height: 30px;
+      word-break: keep-all;
+      overflow-wrap: break-word;
+      white-space: normal;
+    }
+
+    ::v-deep .el-form-item__content {
+      line-height: 30px;
+
+      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;
+  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>
--- a/src/components/Apps/AccountListTable/const.js
+++ b/src/components/Apps/AccountListTable/const.js
@@ -1,5 +1,5 @@
 import { ChoicesFormatter } from '@/components/Table/TableFormatters'
-import { openTaskPage } from '@/utils/jms/index'
+import { openTaskPage } from '@/utils/jms'

 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,11 +62,9 @@ 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
@@ -87,11 +85,9 @@ 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 = {
@@ -114,11 +110,9 @@ 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 = {
@@ -144,26 +138,29 @@ 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'))
+        })
      }
    },
    {
@@ -187,11 +184,9 @@ 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
@@ -209,11 +204,9 @@ export const accountOtherActions = vm => {
      title: vm.$t('MoveToAsset'),
      type: 'primary',
      can: ({ row }) => {
-        return (
-          vm.$hasPerm('accounts.delete_account') &&
+        return vm.$hasPerm('accounts.add_account') &&
          !vm.$store.getters.currentOrgIsRoot &&
          !isDirectoryServiceAccount(row, vm)
-        )
      },
      has: () => {
        return !vm.asset
@@ -229,7 +222,7 @@ export const accountOtherActions = vm => {
  ]
 }

-export const accountQuickFilters = vm => [
+export const accountQuickFilters = (vm) => [
  {
    label: vm.$t('Recent (7 days)'),
    options: [
--- a/src/components/Apps/AccountSelect/dialog.vue
+++ b/src/components/Apps/AccountSelect/dialog.vue
@@ -0,0 +1,221 @@
+<template>
+  <Dialog
+    :close-on-click-modal="false"
+    :title="$t('AssetAccount')"
+    custom-class="account-select-dialog"
+    top="2vh"
+    v-bind="$attrs"
+    width="1000px"
+    @cancel="handleCancel"
+    @close="handleClose"
+    @confirm="handleConfirm"
+    v-on="$listeners"
+  >
+    <AssetTreeTable
+      ref="ListPage"
+      :header-actions="headerActions"
+      :node-url="baseNodeUrl"
+      :sync-select-to-url="false"
+      :table-config="tableConfig"
+      :tree-setting="iTreeSetting"
+      :tree-url="`${baseNodeUrl}children/tree/`"
+      :url="baseUrl"
+      class="tree-table"
+      v-bind="$attrs"
+      @loaded="handleTableLoaded"
+      v-on="$listeners"
+    />
+  </Dialog>
+</template>
+
+<script>
+import AssetTreeTable from '@/components/Apps/AssetTreeTable/index.vue'
+import Dialog from '@/components/Dialog/index.vue'
+
+export default {
+  componentName: 'AssetSelectDialog',
+  components: { AssetTreeTable, Dialog },
+  props: {
+    baseUrl: {
+      type: String,
+      default: '/api/v1/accounts/accounts/'
+    },
+    baseNodeUrl: {
+      type: String,
+      default: '/api/v1/assets/nodes/'
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    canSelect: {
+      type: Function,
+      default(row, index) {
+        return true
+      }
+    },
+    disabled: {
+      type: [Boolean, Function],
+      default: false
+    },
+    treeSetting: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    const vm = this
+    return {
+      isLoaded: false,
+      dialogVisible: false,
+      rowSelected: _.cloneDeep(this.value) || [],
+      rowsAdd: [],
+      tableConfig: {
+        url: this.baseUrl,
+        hasTree: true,
+        canSelect: this.canSelect,
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('Name'),
+            sortable: true
+          },
+          {
+            prop: 'username',
+            label: this.$t('Username'),
+            sortable: 'custom'
+          },
+          {
+            prop: 'asset.name',
+            label: this.$t('Asset'),
+            sortable: 'custom',
+            formatter: function(row) {
+              return row.asset.name
+            }
+          },
+          {
+            prop: 'asset.platform.name',
+            label: this.$t('Platform'),
+            sortable: true,
+            formatter: function(row) {
+              return row.asset.platform.name
+            }
+          },
+          {
+            prop: 'secret_type.label',
+            label: this.$t('SecretType'),
+            sortable: true,
+            formatter: function(row) {
+              return row.secret_type.label
+            }
+          },
+          {
+            prop: 'actions',
+            has: false
+          }
+        ],
+        listeners: {
+          'toggle-row-selection': (isSelected, row) => {
+            if (isSelected) {
+              vm.addRowToSelect(row)
+            } else {
+              vm.removeRowFromSelect(row)
+            }
+          }
+        }
+        // theRowDefaultIsSelected: (row) => {
+        //   return this.value.indexOf(row.id) > -1
+        // }
+      },
+      headerActions: {
+        hasLeftActions: false,
+        hasRightActions: false,
+        hasLabelSearch: true,
+        searchConfig: {
+          getUrlQuery: false
+        }
+      }
+    }
+  },
+  computed: {
+    iTreeSetting() {
+      return { ...this.treeSetting, selectSyncToRoute: false }
+    }
+  },
+  methods: {
+    handleTableLoaded() {
+      this.isLoaded = true
+    },
+    handleClose() {
+      this.$refs.ListPage.$refs.TreeList.componentKey += 1
+    },
+    handleConfirm() {
+      this.$emit('confirm', this.rowSelected, this.rowsAdd)
+      if (this.rowSelected.length > 0) {
+        this.handleClose()
+      }
+    },
+    handleCancel() {
+      this.$emit('cancel')
+      this.handleClose()
+    },
+    addRowToSelect(row) {
+      this.rowSelected.push(row.username)
+      this.rowsAdd.push(row)
+      // const selectValueIndex = this.rowSelected.indexOf(row.id)
+      // if (selectValueIndex === -1) {
+      //   this.rowSelected.push(row.id)
+      //   this.rowsAdd.push(row)
+      // }
+    },
+    removeRowFromSelect(row) {
+      const selectValueIndex = this.rowSelected.indexOf(row.username)
+      this.rowSelected.splice(selectValueIndex, 1)
+      // const selectValueIndex = this.rowSelected.indexOf(row.id)
+      // if (selectValueIndex > -1) {
+      //   this.rowSelected.splice(selectValueIndex, 1)
+      // }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page ::v-deep .page-heading {
+  display: none;
+}
+
+.el-dialog__wrapper ::v-deep .el-dialog__body {
+  padding: 0 0 0 3px;
+
+  .tree-table {
+    .search {
+    }
+
+    .left {
+      padding: 5px;
+    }
+
+    .right {
+      min-height: 500px;
+      overflow: auto;
+    }
+
+    .mini {
+      padding-top: 8px;
+    }
+
+    .transition-box {
+      padding: 10px 5px;
+    }
+  }
+}
+
+.page ::v-deep .treebox .ztree {
+
+}
+
+.account-select-dialog ::v-deep .el-icon-circle-check {
+  display: none;
+}
+</style>
--- a/src/components/Apps/AssetSelect/dialog.vue
+++ b/src/components/Apps/AssetSelect/dialog.vue
@@ -161,11 +161,11 @@ export default {
 </script>

 <style lang="scss" scoped>
-.page :deep(.page-heading) {
+.page ::v-deep .page-heading {
  display: none;
 }

-.el-dialog__wrapper :deep(.el-dialog__body) {
+.el-dialog__wrapper ::v-deep .el-dialog__body {
  padding: 0 0 0 3px;

  .tree-table {
@@ -191,11 +191,11 @@ export default {
  }
 }

-.page :deep(.treebox .ztree) {
+.page ::v-deep .treebox .ztree {

 }

-.asset-select-dialog :deep(.el-icon-circle-check) {
+.asset-select-dialog ::v-deep .el-icon-circle-check {
  display: none;
 }
 </style>
--- a/src/components/Apps/AssetSelect/index.vue
+++ b/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 :deep(.page-heading) {
+.page ::v-deep .page-heading {
  display: none;
 }

-.el-dialog__wrapper :deep(.el-dialog__body) {
+.el-dialog__wrapper ::v-deep .el-dialog__body {
  padding: 0 0 0 3px;

  .tree-table {
@@ -168,7 +168,7 @@ export default {
  }
 }

-.page :deep(.treebox) {
+.page ::v-deep .treebox {
  height: inherit !important;
 }
 </style>
--- a/src/components/Apps/AssetTreeTable/index.vue
+++ b/src/components/Apps/AssetTreeTable/index.vue
@@ -1,7 +1,7 @@
 <template>
  <TreeTable
    ref="TreeList"
-    v-model:active-menu="treeTableConfig.activeMenu"
+    :active-menu.sync="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/index'
+import { setRouterQuery, setUrlParam } from '@/utils/common'
 import $ from '@/utils/jquery-vendor'

 export default {
--- a/src/components/Apps/AutomationParams/index.vue
+++ b/src/components/Apps/AutomationParams/index.vue
@@ -1,7 +1,12 @@
 <template>
  <div>
    <div>
-      <el-button :disabled="isDisabled" size="small" type="primary" @click="onOpenDialog">
+      <el-button
+        :disabled="isDisabled"
+        size="mini"
+        type="primary"
+        @click="onOpenDialog"
+      >
        {{ $tc('Setting') }}
      </el-button>
    </div>
@@ -11,7 +16,7 @@
      :show-cancel="false"
      :show-confirm="false"
      :title="title"
-      :visible="visible"
+      :visible.sync="visible"
      v-bind="$attrs"
      width="60%"
      v-on="$listeners"
@@ -45,7 +50,7 @@ export default {
    title: {
      type: String,
      default: function() {
-        return 'PushParams'
+        return this.$t('PushParams')
      }
    },
    assets: {
@@ -122,21 +127,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
    },
@@ -147,14 +152,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 (Object.prototype.hasOwnProperty.call(this.form, method)) {
+        if (this.form.hasOwnProperty(method)) {
          newForm[method] = this.form[method]
        }
        fields.push([filterField.label, [method]])
@@ -194,4 +199,5 @@ export default {
 }
 </script>

-<style scoped></style>
+<style scoped>
+</style>
--- a/src/components/Apps/BlockedIPs/index.vue
+++ b/src/components/Apps/BlockedIPs/index.vue
@@ -2,7 +2,7 @@
  <div>
    <div>
      <el-button
-        size="small"
+        size="mini"
        type="primary"
        @click="onOpenDialog"
      >
@@ -15,10 +15,9 @@
      :show-cancel="false"
      :show-confirm="false"
      :title="title"
-      :visible="visible"
+      :visible.sync="visible"
      v-bind="$attrs"
      width="40%"
-      @update:visible="$emit('update:visible', $event)"
      v-on="$listeners"
    >
      <BlockedIPList />
@@ -44,7 +43,7 @@ export default {
    title: {
      type: String,
      default: function() {
-        return 'BlockedIPS'
+        return this.$t('BlockedIPS')
      }
    },
    url: {
--- a/src/components/Apps/ChangeSecret/RecordViewSecret.vue
+++ b/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="iTitle"
+      :title="title"
+      :visible.sync="showSecret"
      :width="'50'"
      v-bind="$attrs"
      @confirm="accountConfirmHandle"
@@ -53,15 +53,16 @@ export default {
    },
    title: {
      type: String,
-      default: ''
+      default: function() {
+        return this.$tc('ViewSecret')
+      }
    }
  },
  data() {
    return {
      secretInfo: {},
      showSecret: false,
-      mfaDialogVisible: true,
-      iTitle: this.title || this.$tc('ViewSecret')
+      mfaDialogVisible: true
    }
  },
  computed: {},
@@ -87,7 +88,7 @@ export default {
 </script>

 <style lang="scss" scoped>
-  .item-textarea :deep(.el-textarea__inner) {
+  .item-textarea ::v-deep .el-textarea__inner {
    height: 110px;
  }

@@ -100,12 +101,12 @@ export default {
      border-bottom: none;
    }

-    :deep(.el-form-item__label) {
+    ::v-deep .el-form-item__label {
      padding-right: 20px;
      line-height: 30px;
    }

-    :deep(.el-form-item__content) {
+    ::v-deep .el-form-item__content {
      line-height: 30px;

      pre {
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
@@ -1,60 +1,12 @@
 <template>
  <div class="container">
-    <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 v-if="hasPrompt" class="chat-action">
+      <Select2
+        v-model="select.value"
+        :disabled="isLoading || isSelectDisabled"
+        v-bind="select"
+        @change="onSelectChange"
+      />
    </div>
    <div class="chat-input">
      <el-input
@@ -85,37 +37,9 @@ export default {
      type: Boolean,
      default: false
    },
-    modelOptions: {
-      type: Array,
-      default: () => []
-    },
-    selectedModel: {
-      type: String,
-      default: ''
-    },
-    loading: {
+    hasPrompt: {
      type: Boolean,
-      default: false
-    },
-    toolOptions: {
-      type: Array,
-      default: () => []
-    },
-    toolServerOptions: {
-      type: Array,
-      default: () => []
-    },
-    selectedTools: {
-      type: Array,
-      default: () => []
-    },
-    selectedToolServers: {
-      type: Array,
-      default: () => []
-    },
-    toolsLoading: {
-      type: Boolean,
-      default: false
+      default: true
    }
  },
  data() {
@@ -123,10 +47,15 @@ export default {
      isIM: false,
      inputValue: '',
      select: {
+        url: '/api/v1/settings/chatai-prompts/',
        value: '',
        multiple: false,
-        placeholder: this.$t('Model'),
-        options: []
+        placeholder: this.$t('Role'),
+        ajax: {
+          transformOption: (item) => {
+            return { label: item.name, value: item.content }
+          }
+        }
      }
    }
  },
@@ -135,32 +64,7 @@ export default {
      isLoading: state => state.chat.loading
    }),
    isSelectDisabled() {
-      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 || ''
-      }
+      return !!this.select.value
    }
  },
  methods: {
@@ -180,25 +84,7 @@ export default {
      this.inputValue = ''
    },
    onSelectChange(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))
+      this.$emit('select-prompt', value)
    }
  }
 }
@@ -213,18 +99,9 @@ export default {
  .chat-action {
    width: 100%;
    margin: 6px 0;
-    display: flex;
-    align-items: center;
-    gap: 8px;

-    .model-select {
-      flex: 0 0 48%;
-      max-width: 240px;
-      min-width: 160px;
-    }
-
-    &:deep(.el-select) {
-      width: 100%;
+    &::v-deep .el-select {
+      width: 50%;

      .el-input__inner {
        height: 28px;
@@ -252,7 +129,7 @@ export default {
    flex-direction: column;
    border-radius: 12px;

-    &:deep(.el-textarea) {
+    &::v-deep .el-textarea {
      height: 100%;

      .el-textarea__inner {
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
@@ -3,13 +3,9 @@
    <div class="chart-item-container">
      <div class="avatar">
        <el-avatar
-          v-if="isUserRole"
-          :src="userUrl"
+          :src="isUserRole ? userUrl : chatUrl"
          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">
@@ -80,18 +76,16 @@

 <script>
 import MessageText from './MessageText.vue'
-import ModelIcon from '../../models/ModelIcon.vue'
 import { mapGetters, mapState } from 'vuex'
-import { copy } from '@/utils/common/index'
+import { copy } from '@/utils/common'
 import { useChat } from '../../useChat.js'
-import { reconnect } from '@/utils/request'
+import { reconnect } from '@/utils/socket'

 const { setLoading, removeLoadingMessageInChat } = useChat()

 export default {
  components: {
-    MessageText,
-    ModelIcon
+    MessageText
  },
  props: {
    item: {
@@ -99,10 +93,6 @@ export default {
      default: () => {
      }
    },
-    selectedModel: {
-      type: String,
-      default: ''
-    },
    isTerminal: {
      type: Boolean,
      default: false
@@ -139,8 +129,10 @@ export default {
        ? this.$i18n.t('ServerBusyRetry')
        : ''
    },
-    modelIconName() {
-      return (this.item?.message?.model || this.selectedModel || this.publicSettings.CHAT_AI_TYPE || '').toString()
+    chatUrl() {
+      return this.publicSettings.CHAT_AI_TYPE === 'gpt'
+        ? require('@/assets/img/chat.png')
+        : require('@/assets/img/deepSeek.png')
    }
  },
  methods: {
@@ -179,18 +171,11 @@ export default {
        width: 100%;
        height: 100%;
        border-radius: 50%;
-        background-color: transparent;

-        &:deep(img) {
+        &::v-deep img {
          background-color: #fff;
        }
      }
-
-      .model-icon {
-        width: 100%;
-        height: 100%;
-        display: block;
-      }
    }

    .content {
@@ -249,7 +234,7 @@ export default {
              margin: unset;
              padding-left: 0.5rem;

-              :deep(p) {
+              ::v-deep p {
                color: #8b8b8b;
              }
            }
--- a/src/components/Apps/ChatAi/components/ChitChat/MessageText.vue
+++ b/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/index'
+import { copy } from '@/utils/common'

 export default {
  props: {
@@ -40,7 +40,7 @@ export default {
    text() {
      const value = this.message?.content || ''
      if (value && this.markdown) {
-        return this.renderContentWithDetails(value)
+        return this.markdown?.render(value)
      }
      return this.$xss.process(value)
    }
@@ -51,7 +51,7 @@ export default {
  updated() {
    this.addEvents()
  },
-  unmounted() {
+  destroyed() {
    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,77 +120,6 @@ 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) => {
@@ -213,13 +142,13 @@ export default {
  font-size: 13px;
  max-width: 300px;;

-  &:deep(p) {
+  &::v-deep p {
    margin-bottom: 0 !important;
  }

  background: inherit;

-  &:deep(pre) {
+  &::v-deep pre {
    padding: 0 0 6px 0;

    .hljs.code-block-body {
@@ -227,7 +156,7 @@ export default {
    }
  }

-  &:deep(.code-block-wrapper) {
+  &::v-deep .code-block-wrapper {
    background: #1F2329;
    padding: 0;
    margin: 5px 0;
@@ -281,7 +210,7 @@ export default {
  }
 }

-:deep(.link-style) {
+::v-deep .link-style {
  color: #487bf4;

  &:hover {
@@ -329,64 +258,4 @@ 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>
--- a/src/components/Apps/ChatAi/components/ChitChat/index.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/index.vue
--- a/src/components/Apps/ChatAi/components/Sidebar/index.vue
+++ b/src/components/Apps/ChatAi/components/Sidebar/index.vue
@@ -13,8 +13,6 @@
 </template>

 <script>
-import { BASE_URL } from '@/utils/common/index'
-
 export default {
  props: {
    active: {
@@ -43,16 +41,6 @@ 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
    }
  }
 }
@@ -92,7 +80,7 @@ export default {
  transform: rotate(-90deg)
 }

-:deep(.el-tabs) {
+::v-deep .el-tabs {
  .el-tabs__item {
    padding: 0 10px;
    font-size: 14px;
--- a/src/components/Apps/ChatAi/index.vue
+++ b/src/components/Apps/ChatAi/index.vue
@@ -1,6 +1,5 @@
 <template>
  <DrawerPanel
-    v-if="visible"
    ref="drawer"
    :default-show-panel="!!defaultShowPanel"
    :expanded="expanded"
@@ -29,7 +28,7 @@
      </div>
      <div class="sidebar">
        <Sidebar
-          v-model:active="active"
+          :active.sync="active"
          :expanded="expanded"
          v-bind="$attrs"
          @close="onClose"
@@ -46,10 +45,9 @@
 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 {
@@ -62,7 +60,7 @@ export default {
    title: {
      type: String,
      default: function() {
-        return i18n.global.t('ChatAI')
+        return this.$t('ChatAI')
      }
    },
    defaultShowPanel: {
@@ -76,66 +74,27 @@ export default {
  },
  data() {
    return {
-      visible: false,
      active: 'chat',
      robotUrl: require('@/assets/img/robot-assistant.png'),
      height: '400px',
      expanded: false,
      clientOffset: {},
-      currentTerminalContent: {},
-      initialized: false
+      currentTerminalContent: {}
    }
  },
-  computed: {
-    ...mapGetters([
-      'publicSettings'
-    ])
-  },
  watch: {
-    'publicSettings.CHAT_AI_METHOD': {
-      handler(newVal) {
-        this.visible = newVal === 'api'
-      }
-    }
  },
  mounted() {
-    this.handleStartChat()
+    const expanded = aiPannelLocalStorage.get('expanded')
+    this.updateExpandedState(expanded)
+    this.handlePostMessage()
  },
  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.initAssistant()
+          this.initWebSocket()
          return
        }
        const msg = event.data
@@ -160,6 +119,11 @@ export default {
      }
      this.$refs.drawer.handleHeaderMoveUp(event)
    },
+    initWebSocket() {
+      if (!ws) {
+        this.$refs.component?.init()
+      }
+    },
    onClose() {
      this.$refs.drawer.show = false
    },
@@ -173,6 +137,7 @@ export default {
    },
    save_pannel_settings() {
      aiPannelLocalStorage.set('expanded', this.expanded)
+      console.log('AI panel settings saved:', this.expanded)
    },
    updateExpandedState(expanded) {
      this.expanded = expanded
@@ -186,8 +151,8 @@ export default {
      })
    },
    onToggle(status) {
+      this.initWebSocket()
      if (status) {
-        this.initAssistant()
        getInputFocus()
      }
    }
--- a/src/components/Apps/ChatAi/models/ChatGPT.vue
+++ b/src/components/Apps/ChatAi/models/ChatGPT.vue
@@ -1,33 +0,0 @@
-<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>
--- a/src/components/Apps/ChatAi/models/Claude.vue
+++ b/src/components/Apps/ChatAi/models/Claude.vue
@@ -1,45 +0,0 @@
-<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>
--- a/src/components/Apps/ChatAi/models/DeepSeek.vue
+++ b/src/components/Apps/ChatAi/models/DeepSeek.vue
@@ -1,34 +0,0 @@
-<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>
--- a/src/components/Apps/ChatAi/models/Gemini.vue
+++ b/src/components/Apps/ChatAi/models/Gemini.vue
@@ -1,33 +0,0 @@
-<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>
--- a/src/components/Apps/ChatAi/models/Grok.vue
+++ b/src/components/Apps/ChatAi/models/Grok.vue
@@ -1,33 +0,0 @@
-<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>
--- a/src/components/Apps/ChatAi/models/ModelIcon.vue
+++ b/src/components/Apps/ChatAi/models/ModelIcon.vue
@@ -1,50 +0,0 @@
-<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>
--- a/src/components/Apps/ChatAi/useChat.js
+++ b/src/components/Apps/ChatAi/useChat.js
@@ -1,5 +1,5 @@
 import store from '@/store'
-import { pageScroll } from '@/utils/common/index'
+import { pageScroll } from '@/utils/common'

 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)
  }
--- a/src/components/Apps/DrawerPanel/index.vue
+++ b/src/components/Apps/DrawerPanel/index.vue
@@ -74,7 +74,7 @@ export default {
    this.init()
    this.insertToBody()
  },
-  beforeUnmount() {
+  beforeDestroy() {
    const element = this.$refs.drawer
    element.remove()
    // window.removeEventListener('click', this.closeSidebar)
--- a/src/components/Apps/GatewayTestDialog/index.vue
+++ b/src/components/Apps/GatewayTestDialog/index.vue
@@ -1,32 +1,31 @@
 <template>
  <Dialog
-    v-if="visible"
+    v-if="iVisible"
    :destroy-on-close="true"
    :show-cancel="false"
    :show-confirm="false"
    :title="$tc('TestGatewayTestConnection')"
-    :visible="visible"
+    :visible.sync="iVisible"
    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="iPort" />
+        <el-input v-model="port" />
        <span class="help-tips help-block">{{ $t('TestGatewayHelpMessage') }}</span>
      </el-col>
      <el-col :md="4" :sm="24">
        <el-button
          :loading="loading"
-          size="small"
-          style="line-height: 20px"
+          size="mini"
+          style="line-height:20px "
          type="primary"
          @click="dialogConfirm"
        >
-          {{ $t('Confirm') }}
+          {{ this.$t('Confirm') }}
        </el-button>
      </el-col>
    </el-row>
@@ -35,7 +34,7 @@

 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { openTaskPage } from '@/utils/jms/index'
+import { openTaskPage } from '@/utils/jms'

 export default {
  name: 'GatewayDialog',
@@ -60,17 +59,16 @@ export default {
      default: ''
    }
  },
-  emits: ['update:visible', 'update:port'],
  data() {
    return {}
  },
  computed: {
-    iPort: {
+    iVisible: {
      get() {
-        return this.port
+        return this.visible
      },
      set(val) {
-        this.$emit('update:port', val)
+        this.$emit('update:visible', val)
      }
    }
  },
@@ -79,13 +77,14 @@ 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.$emit('update:visible', false)
+        }).finally(() => {
+          this.iVisible = false
        })
    }
  }
--- a/src/components/Apps/GrantedAssets/index.vue
+++ b/src/components/Apps/GrantedAssets/index.vue
@@ -44,7 +44,9 @@ export default {
    },
    getShowUrl: {
      type: Function,
-      default: ({ row, col }) => this.tableUrl.replace('/assets/', `/assets/${row.id}/accounts/`)
+      default({ row, col }) {
+        return this.tableUrl.replace('/assets/', `/assets/${row.id}/accounts/`)
+      }
    },
    name: {
      type: Object,
@@ -83,7 +85,6 @@ export default {
        hasTree: true,
        columnsExtra: ['view_account'],
        columnsExclude: ['spec_info'],
-        columns: ['id', 'name', 'address', 'comment', 'labels', 'connectivity', 'platform', 'view_account', 'actions'],
        columnsShow: {
          min: ['name', 'address', 'accounts'],
          default: ['name', 'address', 'platform', 'view_account', 'actions']
@@ -107,6 +108,11 @@ export default {
          },
          connectivity: connectivityMeta,
          comment: { ...this.comment }
+        },
+        tableAttrs: {
+          rowClassName({ row }) {
+            return !row.is_active ? 'row_disabled' : ''
+          }
        }
      },
      headerActions: {
--- a/src/components/Apps/LeakPasswords/LeakPasswordList.vue
+++ b/src/components/Apps/LeakPasswords/LeakPasswordList.vue
@@ -37,12 +37,8 @@ export default {

      },
      headerActions: {
-        hasExport: true,
-        hasImport: true,
-        importOptions: {
-          encryptFields: [''], // 这里不加密 password，''只是为了保证数组有值
-          canImportUpdate: false
-        },
+        hasExport: false,
+        hasImport: false,
        hasCreate: true,
        hasSearch: true,
        hasRefresh: true,
--- a/src/components/Apps/LeakPasswords/index.vue
+++ b/src/components/Apps/LeakPasswords/index.vue
@@ -1,7 +1,11 @@
 <template>
  <div>
    <div>
-      <el-button size="small" type="primary" @click="onOpenDialog">
+      <el-button
+        size="mini"
+        type="primary"
+        @click="onOpenDialog"
+      >
        {{ $tc('View') }}
      </el-button>
    </div>
@@ -10,10 +14,9 @@
      :show-cancel="false"
      :show-confirm="false"
      :title="title"
-      :visible="visible"
+      :visible.sync="visible"
      v-bind="$attrs"
      width="40%"
-      @update:visible="$emit('update:visible', $event)"
      v-on="$listeners"
    >
      <LeakPasswordList />
@@ -39,7 +42,7 @@ export default {
    title: {
      type: String,
      default: function() {
-        return 'LeakPasswordList'
+        return this.$t('LeakPasswordList')
      }
    },
    url: {
@@ -69,4 +72,5 @@ export default {
 }
 </script>

-<style scoped></style>
+<style scoped>
+</style>
--- a/src/components/Apps/ManyJsonTabs/AssetJsonTab.vue
+++ b/src/components/Apps/ManyJsonTabs/AssetJsonTab.vue
@@ -6,7 +6,7 @@

 <script>
 import { DrawerListTable as ListTable } from '@/components'
-import { toM2MJsonParams } from '@/utils/jms/index'
+import { toM2MJsonParams } from '@/utils/jms'
 import { DetailFormatter } from '@/components/Table/TableFormatters'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'

@@ -25,7 +25,6 @@ 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: {
@@ -34,7 +33,7 @@ export default {
          hasExport: false
        },
        tableConfig: {
-          url: `/api/v1/assets/assets/?${key}=${value}&oid=${org_id}`,
+          url: `/api/v1/assets/assets/?${key}=${value}`,
          columns: ['name', 'address', 'platform', 'type', 'is_active'],
          columnsShow: {
            min: ['name', 'address'],
@@ -46,7 +45,7 @@ export default {
              formatter: DetailFormatter,
              formatterArgs: {
                getRoute: ({ row }) => {
-                  return { name: 'AssetDetail', params: { id: row.id } }
+                  return { name: 'AssetDetail', params: { id: row.id }}
                }
              }
            },
--- a/src/components/Apps/ManyJsonTabs/UserJsonTab.vue
+++ b/src/components/Apps/ManyJsonTabs/UserJsonTab.vue
@@ -6,7 +6,7 @@

 <script>
 import { DrawerListTable as ListTable } from '@/components'
-import { toM2MJsonParams } from '@/utils/jms/index'
+import { toM2MJsonParams } from '@/utils/jms'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 import { DetailFormatter } from '@/components/Table/TableFormatters'

@@ -25,7 +25,6 @@ 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: {
@@ -34,7 +33,7 @@ export default {
          hasExport: false
        },
        tableConfig: {
-          url: `/api/v1/users/users/?${key}=${value}&oid=${org_id}`,
+          url: `/api/v1/users/users/?${key}=${value}`,
          columns: [
            'name', 'username', 'email', 'groups', 'system_roles',
            'org_roles', 'source', 'is_valid'
--- a/src/components/Apps/ResourceActivity/index.vue
+++ b/src/components/Apps/ResourceActivity/index.vue
@@ -27,11 +27,11 @@
  </div>
 </template>

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

 export default {
--- a/src/components/Apps/UserConfirmDialog/index.vue
+++ b/src/components/Apps/UserConfirmDialog/index.vue
@@ -5,33 +5,38 @@
    :show-cancel="false"
    :show-confirm="false"
    :title="title"
-    :visible="visible"
+    :visible.sync="visible"
    class="dialog-content"
    v-bind="$attrs"
-    width="600px"
+    width="740px"
    @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="small" type="primary" @click="logout">
-            {{ $t('ReLogin') }}
+          <el-button class="confirm-btn" size="mini" type="primary" @click="logout">
+            {{ this.$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
@@ -44,22 +49,19 @@
          </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="small"
-              style="line-height: 14px; float: right"
+              size="mini"
+              style="line-height: 14px; float: right;"
              type="primary"
              @click="sendCode"
            >
@@ -70,46 +72,50 @@
      </el-row>
      <el-row>
        <el-col>
-          <iframe v-if="passkeyVisible" :src="passkeyUrl" style="display: none" />
          <iframe
-            v-if="isFaceCaptureVisible && subTypeSelected === 'face' && faceCaptureUrl"
+            v-if="passkeyVisible"
+            :src="passkeyUrl"
+            style="display: none"
+          />
+          <iframe
+            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="small"
+            size="mini"
            type="primary"
            @click="handleConfirm"
          >
-            {{ $t('Confirm') }}
+            {{ this.$t('Confirm') }}
          </el-button>
          <el-button
            v-if="subTypeSelected === 'face'"
            v-show="!isFaceCaptureVisible"
            class="confirm-btn"
-            size="small"
+            size="mini"
            type="primary"
            @click="handleFaceCapture"
          >
-            {{ $tc('VerifyFace') }}
+            {{ this.$tc('VerifyFace') }}
          </el-button>
          <el-button
            v-if="subTypeSelected === 'passkey'"
            v-loading="passkeyVisible"
            class="confirm-btn"
-            size="small"
+            size="mini"
            type="primary"
            @click="handlePasskeyVerify"
          >
-            {{ $tc('Next') }}
+            {{ this.$tc('Next') }}
          </el-button>
        </el-col>
      </el-row>
@@ -118,7 +124,7 @@
 </template>
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { encryptPassword } from '@/utils/secure'
+import { encryptPassword } from '@/utils/crypto'

 export default {
  name: 'UserConfirmDialog',
@@ -167,7 +173,7 @@ export default {
  mounted() {
    this.$eventBus.$on('showConfirmDialog', this.performConfirm)
  },
-  beforeUnmount() {
+  beforeDestroy() {
    this.$eventBus.$off('showConfirmDialog', this.performConfirm)
  },
  methods: {
@@ -189,65 +195,55 @@ 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
@@ -271,26 +267,23 @@ 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()
@@ -313,33 +306,27 @@ 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 :deep(.el-dialog__footer) {
+.dialog-content ::v-deep .el-dialog__footer {
  padding: 0;
 }

-.dialog-content :deep(.el-dialog) {
+.dialog-content ::v-deep .el-dialog {
  padding: 8px;

  .el-dialog__body {
--- a/src/components/Apps/VariableCreateUpdateForm/index.vue
+++ b/src/components/Apps/VariableCreateUpdateForm/index.vue
@@ -115,7 +115,7 @@ export default {

 <style lang='scss' scoped>
 .variable-add {
-  :deep(.el-form-item) {
+  ::v-deep .el-form-item {
    margin-bottom: 5px;

    .help-block {
@@ -123,7 +123,7 @@ export default {
    }
  }

-  :deep(.form-group-header) {
+  ::v-deep .form-group-header {
    .hr-line-dashed {
      margin: 5px 0;
    }
--- a/src/components/Apps/VariableSetForm/index.vue
+++ b/src/components/Apps/VariableSetForm/index.vue
@@ -53,7 +53,7 @@ export default {

 <style lang='scss' scoped>
 .variable-set {
-  :deep(.el-form-item) {
+  ::v-deep .el-form-item {
    margin-bottom: 5px;

    .help-block {
@@ -61,7 +61,7 @@ export default {
    }
  }

-  :deep(.form-group-header) {
+  ::v-deep .form-group-header {
    .hr-line-dashed {
      margin: 5px 0;
    }
--- a/src/components/Apps/VariablesHelpTextDialog/index.vue
+++ b/src/components/Apps/VariablesHelpTextDialog/index.vue
@@ -1,98 +0,0 @@
-<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>
--- a/src/components/Cards/DetailCard/ItemValue.vue
+++ b/src/components/Cards/DetailCard/ItemValue.vue
@@ -1,5 +1,5 @@
-<script lang="jsx">
-import { toSafeLocalDateStr } from '@/utils/common/time'
+<script type="text/jsx">
+import { toSafeLocalDateStr } from '@/utils/time'

 export default {
  name: 'ItemValue',
--- a/src/components/Cards/DetailCard/auto.vue
+++ b/src/components/Cards/DetailCard/auto.vue
@@ -10,10 +10,10 @@
  </div>
 </template>

-<script lang="jsx">
+<script>
 import DetailCard from './index.vue'
-import { copy } from '@/utils/common/index'
-import { toSafeLocalDateStr } from '@/utils/common/time'
+import { copy } from '@/utils/common'
+import { toSafeLocalDateStr } from '@/utils/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 (Object.prototype.hasOwnProperty.call(firstValue, 'name')) {
+            if (firstValue.hasOwnProperty('name')) {
              value.forEach(item => {
                const fieldName = `${name}.${item.name}`
                if (excludes.includes(fieldName)) {
--- a/src/components/Cards/DetailCard/index.vue
+++ b/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">
-            <component
+            <template
              :is="item.component"
              v-if="item.component"
              v-bind="{...item}"
@@ -29,7 +29,7 @@ export default {
    title: {
      type: String,
      default() {
-        return 'BasicInfo'
+        return this.$t('BasicInfo')
      }
    },
    fa: {
@@ -52,7 +52,7 @@ export default {
  data() {
    return {
      iItems: this.items.filter(item => {
-        return !Object.prototype.hasOwnProperty.call(item, 'has') || item.has === true
+        return !item.hasOwnProperty('has') || item.has === true
      })
    }
  },
@@ -76,7 +76,7 @@ export default {
  font-size: 13px;
  line-height: 2;

-  :deep(.el-form-item) {
+  ::v-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;

-      :deep(.el-form-item__content) {
+      ::v-deep .el-form-item__content {
        border-bottom: 1px dashed #EBEEF5
      }

-      :deep(.el-form-item__label:last-child) {
+      ::v-deep .el-form-item__label:last-child {
        border: 1px dashed #EBEEF5;
      }
    }
@@ -127,13 +127,13 @@ export default {
      padding: 5px 0;
    }

-    :deep(.el-tag--small) {
+    ::v-deep .el-tag--mini {
      margin-right: 3px;
    }
  }

  .item-value {
-    :deep(span) {
+    ::v-deep span {
      //display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
--- a/src/components/Cards/RelationCard/index.vue
+++ b/src/components/Cards/RelationCard/index.vue
@@ -1,52 +1,34 @@
 <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="small"
-              style="float: right"
-              type="danger"
-              @click="removeObject(obj)"
-            >
+            <el-button :disabled="iDisabled" size="mini" style="float: right" type="danger" @click="removeObject(obj)">
              <i class="fa fa-minus" />
            </el-button>
          </td>
@@ -54,13 +36,7 @@
      </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>
@@ -131,7 +107,8 @@ export default {
    },
    performDelete: {
      type: Function,
-      default: (obj, that) => {}
+      default: (obj, that) => {
+      }
    },
    allowCreate: {
      type: Boolean,
@@ -139,13 +116,14 @@ 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
@@ -176,7 +154,8 @@ export default {
    },
    performAdd: {
      type: Function,
-      default: (objects, that) => {}
+      default: (objects, that) => {
+      }
    },
    showAddAll: {
      type: Boolean,
@@ -187,14 +166,11 @@ 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'))
-        that.$refs.select2.refresh()
-        that.$emit('addSuccess')
+        this.$refs.select2.refresh()
+        this.$emit('addSuccess')
      }
    },
    getHasObjects: {
@@ -255,7 +231,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
        })
      }
@@ -293,7 +269,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
          }
@@ -302,8 +278,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)
          }
        })
@@ -319,7 +295,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 {
@@ -329,25 +305,22 @@ 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
@@ -360,9 +333,8 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
-b,
-strong {
+<style lang='scss' scoped>
+b, strong {
  font-weight: 700;
  font-size: 13px;
 }
@@ -374,14 +346,14 @@ tr td {
 }

 tr.item td {
-  border-top: 1px dashed #ebeef5;
+  border-top: 1px dashed #EBEEF5;
 }

 .box-margin {
  margin-bottom: 20px;
 }

-.the-box :deep(.el-card__body) {
+.the-box ::v-deep .el-card__body {
  padding: 20px;
 }
 </style>
--- a/src/components/Common/DataActions/index.vue
+++ b/src/components/Common/DataActions/index.vue
@@ -1,10 +1,11 @@
 <template>
  <div :class="grouped ? 'el-button-group' : 'el-button-ungroup'" class="layout">
-    <template v-for="action in iActions" :key="action.name">
+    <template v-for="action in iActions">
      <el-dropdown
        v-if="action.dropdown"
        v-show="action.dropdown.length > 0"
-        :class="[action.name, { grouped: action.grouped }]"
+        :key="action.name"
+        :class="[action.name, {grouped: action.grouped }]"
        :size="action.size"
        :split-button="!!action.split"
        :type="action.type"
@@ -22,59 +23,65 @@
          :class="action.name"
          :size="size"
          class="more-action"
-          v-bind="{ ...cleanButtonAction(action), icon: '' }"
+          v-bind="{...cleanButtonAction(action), icon: ''}"
        >
-          <Icon v-if="action.icon" :icon="action.icon" class="pre-icon" />
+          <span class="pre-icon">
+            <Icon v-if="action.icon" :icon="action.icon" />
+          </span>
          <span v-if="action.title">
-            {{ action.title }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
+            {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
          </span>
        </el-button>
-
-        <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"
+        <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: ''}"
              >
-                <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>
+                <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>

      <el-button
        v-else
-        :class="[action.name, { grouped: action.grouped }]"
+        :key="action.name"
+        :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">
-          <div>
-            <Icon v-if="action.icon" :icon="action.icon" class="pre-icon" />
-            <span>
-              {{ action.title }}
+          <span>
+            <span v-if="action.icon" style="vertical-align: initial">
+              <Icon :icon="action.icon" />
            </span>
-          </div>
+            {{ action.title }}
+          </span>
        </el-tooltip>
      </el-button>
    </template>
@@ -82,7 +89,7 @@
 </template>

 <script>
-import { toSentenceCase } from '@/utils/common/index'
+import { toSentenceCase } from '@/utils/common'
 import Icon from '@/components/Widgets/Icon/index.vue'

 export default {
@@ -221,36 +228,17 @@ 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;
    }
@@ -259,6 +247,10 @@ $color-drop-menu-border: #e4e7ed;
      margin-left: 0;
    }
  }
+
+  .el-button.el-button--default {
+    color: var(--color-text-primary) !important;
+  }
 }

 // 主要是左侧 LeftSide
@@ -266,22 +258,14 @@ $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 {
-      :deep(.el-icon-arrow-down.el-icon--right) {
+      ::v-deep .el-icon-arrow-down.el-icon--right {
        color: var(--color-icon-primary) !important;
      }
    }

    .el-button--primary {
-      :deep(.el-icon-arrow-down.el-icon--right) {
+      ::v-deep .el-icon-arrow-down.el-icon--right {
        color: #ffffff !important;
      }

@@ -291,4 +275,120 @@ $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>
--- a/src/components/Common/ErrorBoundary/index.vue
+++ b/src/components/Common/ErrorBoundary/index.vue
@@ -1,138 +0,0 @@
-<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>
--- a/src/components/Common/IBox/index.vue
+++ b/src/components/Common/IBox/index.vue
@@ -1,10 +1,9 @@
 <template>
  <el-card :class="'ibox ' + type" :shadow="shadow" v-bind="$attrs">
-    <template v-if="title" #header>
+    <template #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>
@@ -41,53 +40,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 :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 ::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-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 :deep(.el-card__body) {
-  //padding: 30px 30px 20px 30px; // 这个设置会影响详情中的 quick update 和 relations
-  color: var(--color-icon-primary);
-}
+  .ibox ::v-deep .el-card__body {
+    //padding: 30px 30px 20px 30px; // 这个设置会影响详情中的 quick update 和 relations
+    color: var(--color-icon-primary);
+  }
 </style>
--- a/src/components/Common/QuickActions/action.vue
+++ b/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/index'
+import { toSentenceCase } from '@/utils/common'

 class Action {
  constructor() {
--- a/src/components/Common/QuickActions/index.vue
+++ b/src/components/Common/QuickActions/index.vue
@@ -27,7 +27,7 @@ export default {
    title: {
      type: String,
      default() {
-        return 'QuickUpdate'
+        return this.$t('QuickUpdate')
      }
    },
    actions: {
@@ -39,11 +39,11 @@ export default {
 </script>

 <style scoped>
-.quick-actions :deep(table) {
+.quick-actions ::v-deep table {
  width: 100%;
 }

-.quick-actions :deep(tr > td) {
+.quick-actions ::v-deep tr > td {
  line-height: 1.43;
  padding: 8px 0;
  vertical-align: top;
@@ -51,11 +51,11 @@ export default {
  width: 50%;
 }

-.quick-actions :deep(tr > td > span:last-child) {
+.quick-actions ::v-deep tr > td > span:last-child {
  float: right;
 }

-.quick-actions :deep(button) {
+.quick-actions ::v-deep button {
  padding: 4px 5px;
  font-size: 13px;
  min-width: 65px;
--- a/src/components/Dashboard/ColumnChart.vue
+++ b/src/components/Dashboard/ColumnChart.vue
@@ -1,6 +1,6 @@
 <template>
-  <div>
-    <Echart
+  <div class="content">
+    <echarts
      ref="echarts"
      :options="options"
      :autoresize="true"
@@ -12,10 +12,9 @@
 // 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 },
+  components: {},
  props: {
    datesMetrics: {
      type: Array,
--- a/src/components/Dashboard/DataCard.vue
+++ b/src/components/Dashboard/DataCard.vue
@@ -111,7 +111,7 @@ export default {
  .ring {
    padding: 26px 0 10px;

-    & :deep(.echarts) {
+    & ::v-deep .echarts {
      width: 100% !important;
      height: 278px !important;
    }
--- a/src/components/Dashboard/Echart.vue
+++ b/src/components/Dashboard/Echart.vue
@@ -1,71 +0,0 @@
-<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>
--- a/src/components/Dashboard/LineChart.vue
+++ b/src/components/Dashboard/LineChart.vue
@@ -1,12 +1,14 @@
 <template>
  <div>
-    <Echart
+    <echarts
      ref="echarts"
      :options="options"
      :autoresize="true"
      theme="light"
-      @finished="genSnapshot"
+      class="disabled-when-print"
+      @finished="getDataUrl"
    />
+    <img v-if="dataUrl" :src="dataUrl" class="enabled-when-print" style="display: none;width: 100%;">
  </div>
 </template>

@@ -14,11 +16,9 @@
 // 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,6 +110,7 @@ export default {
            },
            axisLabel: {
              textStyle: {
+                // 坐标轴颜色
                color: '#8F959E'
              }
            },
@@ -154,7 +155,7 @@ export default {
            type: 'line',
            smooth: true,
            areaStyle: {
-              // 区域填充样式
+            // 区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
@@ -186,7 +187,7 @@ export default {
            type: 'line',
            smooth: true,
            areaStyle: {
-              // 区域填充样式
+            // 区域填充样式
              normal: {
                color: new echarts.graphic.LinearGradient(
                  0,
@@ -219,58 +220,23 @@ export default {
  },
  watch: {
    range() {
-      this.genSnapshot()
-    },
-    datesMetrics() {
-      this.genSnapshot()
-    },
-    primaryData() {
-      this.genSnapshot()
-    },
-    secondaryData() {
-      this.genSnapshot()
+      this.getMetricData()
    }
  },
  mounted() {
-    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)
-    }
+    this.getMetricData()
  },
  methods: {
-    forceResize() {
-      const inst = this.$refs.echarts?.echartsInstance
-      if (inst) inst.resize()
-    },
-    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 = ''
+    getDataUrl() {
+      const instance = this.$refs.echarts.echartsInstance
+      if (instance) {
+        this.dataUrl = instance.getDataURL()
      }
+    },
+    getMetricData() {
+      this.getDataUrl()
    }
  }
-
 }
 </script>

@@ -279,4 +245,16 @@ 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>
--- a/src/components/Dashboard/ProgressChart.vue
+++ b/src/components/Dashboard/ProgressChart.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <Echart
+    <echarts
      ref="echarts"
      :options="options"
      :autoresize="true"
@@ -13,10 +13,8 @@
 // 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,
@@ -37,15 +35,14 @@ 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
@@ -180,8 +177,8 @@ export default {
 </script>

 <style lang="scss" scoped>
-.echarts {
-  width: 100%;
-  height: 72px;
-}
+  .echarts {
+    width: 100%;
+    height: 72px;
+  }
 </style>
--- a/src/components/Dashboard/RankTable.vue
+++ b/src/components/Dashboard/RankTable.vue
@@ -9,7 +9,7 @@
      class="table"
      style="width: 100%"
    >
-      <el-table-column :label="$tc('Ranking')" width="100">
+      <el-table-column :label="$tc('Ranking')">
        <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 {
  }
 }

-:deep(.el-table td, .el-table th) {
+::v-deep .el-table td, .el-table th {
  padding: 5px 0;
 }

-:deep(.el-table th, .el-table tr) {
+::v-deep .el-table th, .el-table tr {
  background-color: #F5F6F7 !important;

 }

-:deep(.el-table .cell) {
+::v-deep .el-table .cell {
  white-space: nowrap;
 }
 </style>
--- a/src/components/Dashboard/RealTimeSummary.vue
+++ b/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')
          }
--- a/src/components/Dashboard/RingChart.vue
+++ b/src/components/Dashboard/RingChart.vue
@@ -1,6 +1,6 @@
 <template>
  <div>
-    <Echart
+    <echarts
      ref="echarts"
      :autoresize="true"
      :options="options"
@@ -13,15 +13,12 @@ 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: {
@@ -36,7 +33,7 @@ export default {

      const formatTitle = (text) => {
        if (!text) return ''
-        const maxLength = 25
+        const maxLength = 23
        const lines = []
        for (let i = 0; i < text.length; i += maxLength) {
          lines.push(text.slice(i, i + maxLength))
@@ -91,7 +88,6 @@ export default {
          {
            name: title,
            type: 'pie',
-            minAngle: 5,
            radius: ['72%', '90%'],
            avoidLabelOverlap: false,
            itemStyle: {
--- a/src/components/Dashboard/SwitchDate.vue
+++ b/src/components/Dashboard/SwitchDate.vue
@@ -1,6 +1,11 @@
 <template>
  <span>
-    <el-radio-group v-model="select" class="switch" size="small" @change="onChange">
+    <el-radio-group
+      v-model="select"
+      class="switch"
+      size="mini"
+      @change="onChange"
+    >
      <el-radio-button v-for="i in iOptions" :key="i.value" :label="i.value">
        {{ i.label }}
      </el-radio-button>
@@ -11,13 +16,11 @@
 <script>
 export default {
  props: {
-    name: {
-      type: String,
-      default: 'dashboardDays'
-    },
    days: {
-      type: [String, Number],
-      default: null
+      type: String,
+      default: () => {
+        return localStorage.getItem('dashboardDays') || '7'
+      }
    },
    options: {
      type: Array,
@@ -44,28 +47,8 @@ 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)
    }
  }
@@ -78,7 +61,7 @@ $origin-color: #ffffff;
 .switch {
  font-weight: 400;

-  :deep(.el-radio-button) {
+  ::v-deep .el-radio-button {
    &.is-active {
      .el-radio-button__inner {
        border-color: var(--color-primary);
@@ -88,7 +71,7 @@ $origin-color: #ffffff;
    }
  }

-  :deep(.el-radio-button) {
+  ::v-deep .el-radio-button {
    .el-radio-button__inner {
      color: var(--color-text-primary);
      background: $origin-color;
--- a/src/components/Dialog/DiffDetail.vue
+++ b/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">
-        {{ $tc('NoContent') }}
+        {{ this.$tc('NoContent') }}
      </div>
      <div v-else>
        <el-table
@@ -99,7 +99,7 @@ export default {
    width: 100%;
    max-height: 80vh;

-    & :deep(td) {
+    & ::v-deep td {
      padding: 5px 0 !important;
    }
  }
--- a/src/components/Dialog/ProcessingDialog.vue
+++ b/src/components/Dialog/ProcessingDialog.vue
@@ -1,13 +1,12 @@
 <template>
  <Dialog
    :show-cancel="false"
-    :visible="visible"
+    :visible="iVisible"
    class="processing-dialog"
    height="300"
    :title="$tc('Processing')"
    width="300"
-    @update:visible="$emit('update:visible', $event)"
-    @confirm="$emit('update:visible', false)"
+    @confirm="iVisible=false"
  >
    <div id="load">
      <div class="spinner" />
@@ -27,16 +26,25 @@ 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 {
-  :deep(.el-dialog__body) {
+  ::v-deep .el-dialog__body {
    overflow: hidden;
  }
 }
--- a/src/components/Dialog/RemoteProcessingDialog.vue
+++ b/src/components/Dialog/RemoteProcessingDialog.vue
@@ -1,11 +1,10 @@
 <template>
  <Dialog
-    :visible="visible"
+    :visible="iVisible"
    height="300"
    title="Processing"
    width="300"
    class="processing-dialog"
-    @update:visible="$emit('update:visible', $event)"
  >
    <div id="load">
      <div class="spinner" />
@@ -25,27 +24,36 @@ 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 {
-  :deep(.el-dialog__body) {
+  ::v-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 {
@@ -54,8 +62,8 @@ export default {
 }

@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+    to {
+        transform: rotate(360deg);
+    }
 }
 </style>
--- a/src/components/Dialog/ReportDialog.vue
+++ b/src/components/Dialog/ReportDialog.vue
@@ -1,27 +1,26 @@
 <template>
  <div>
    <Dialog
-      v-if="visible"
-      v-model:visible="iVisible"
+      v-if="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
@@ -36,14 +35,25 @@ export default {
      default: ''
    }
  },
-  emits: ['update:visible'],
  data() {
    return {
      loading: true
    }
  },
-  mounted() {},
-  beforeMount() {},
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  mounted() {
+  },
+  beforeMount() {
+  },
  methods: {
    onIframeLoad() {
      this.loading = false
--- a/src/components/Dialog/Secret.vue
+++ b/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,16 +28,14 @@

 <script>
 import i18n from '@/i18n/i18n'
-import { copy } from '@/utils/common/index'
+import { copy } from '@/utils/common'
 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,
@@ -67,10 +65,11 @@ export default {
    }
  }
 }
+
 </script>

-<style lang="scss" scoped>
-.secret {
+<style lang='scss' scoped>
+ .secret {
  color: #2b2f3a;
  margin-top: 20px;
 }
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -35,7 +35,7 @@

 <script>
 export default {
-  name: 'DialogComponent',
+  name: 'Dialog',
  props: {
    title: {
      type: String,
@@ -56,7 +56,7 @@ export default {
    confirmTitle: {
      type: String,
      default() {
-        return 'Confirm'
+        return this.$t('Confirm')
      }
    },
    showCancel: {
@@ -66,7 +66,7 @@ export default {
    cancelTitle: {
      type: String,
      default() {
-        return 'Cancel'
+        return this.$t('Cancel')
      }
    },
    showButtons: {
@@ -106,11 +106,11 @@ export default {
 </script>

 <style lang="scss" scoped>
-.dialog.shadow :deep(.el-dialog) {
+.dialog.shadow ::v-deep .el-dialog {
  box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.6);
 }

-.dialog :deep(.el-dialog) {
+.dialog ::v-deep .el-dialog {
  border-radius: 0.3em;
  max-width: min(100vw, 1500px);

@@ -128,14 +128,14 @@ export default {
    display: none;
  }

-  &.dialog__header {
+  &__header {
    box-sizing: border-box;
    padding: 15px 22px;
    border-bottom: 1px solid #dee2e6;
    font-weight: 400;
  }

-  &.dialog__body {
+  &__body {
    padding: 20px 30px;
    font-size: 13px;

@@ -144,7 +144,7 @@ export default {
    }
  }

-  &.dialog__footer {
+  &__footer {
    border-top: 1px solid #dee2e6;
    padding: 16px 25px;
    justify-content: flex-end;
@@ -152,12 +152,12 @@ export default {
 }

@media (max-width: 900px) {
-  .dialog :deep(.el-dialog) {
+  .dialog ::v-deep .el-dialog {
    max-width: calc(100% - 30px);
  }
 }

-.dialog-footer :deep(button.el-button) {
+.dialog-footer ::v-deep button.el-button {
  font-size: 13px;
  padding: 8px 12px;
 }
--- a/src/components/Drawer/index.vue
+++ b/src/components/Drawer/index.vue
@@ -1,18 +1,17 @@
 <template>
-  <!-- DEBUG: Drawer visible={{ visible }}, component={{ component ? 'EXISTS' : 'EMPTY' }}, title={{ title }} -->
  <el-drawer
    ref="drawer"
-    :model-value="visible"
+    v-el-drawer-drag-width
    :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">
@@ -31,8 +30,7 @@
 </template>

 <script>
-import { getDrawerWidth } from '@/utils/common/index'
-import { useDrawerDrag } from '@/utils/vue/useDrawerDrag'
+import { getDrawerWidth } from '@/utils/common'

 export default {
  props: {
@@ -74,64 +72,22 @@ export default {
  data() {
    return {
      loading: false,
-      formLabelWidth: '80px',
-      drawerDrag: null
+      formLabelWidth: '80px'
    }
  },
-  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()
-        }
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
      }
    }
  },
  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()
@@ -140,25 +96,29 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .drawer__no-footer {
-  :deep(.drawer){
+  ::v-deep {
+    .drawer {
      .page {
        height: calc(100vh - 55px);
      }
+    }
  }
 }

@media (max-width: 992px) {
-  .drawer :deep(.el-form-item){
+  .drawer ::v-deep {
+    .el-form-item {
      display: flex;
      flex-direction: column;
      gap: 0.3rem;
+    }
  }
 }

 .drawer {
-  :deep(.el-form-item){
+  ::v-deep {
    min-width: 565px;

    .el-card__body {
@@ -282,7 +242,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;
@@ -322,8 +282,7 @@ export default {
      }
    }

-    .drawer__content,
-    .tab-page-content {
+    .drawer__content, .tab-page-content {
      height: 100%;
      background: #f3f3f3;
    }
--- a/src/components/Form/AutoDataForm/index.vue
+++ b/src/components/Form/AutoDataForm/index.vue
@@ -5,7 +5,6 @@
      ref="dataForm"
      :fields="totalFields"
      :form="iForm"
-      :server-errors="serverErrors"
      v-bind="$attrs"
      v-on="$listeners"
    >
@@ -29,7 +28,6 @@
 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',
@@ -67,8 +65,7 @@ export default {
      totalFields: [],
      loading: true,
      groups: [],
-      errors: {},
-      serverErrors: {}
+      errors: {}
    }
  },
  computed: {
@@ -97,7 +94,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 })
      }
@@ -106,8 +103,6 @@ export default {
      this.generateColumns()
      this.$emit('afterGenerateColumns', this.totalFields)
      this.cleanFormValue()
-      // 初始化时清空错误
-      this.serverErrors = {}
      this.loading = false
    },
    generateColumns() {
@@ -115,47 +110,6 @@ 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) {
@@ -185,69 +139,15 @@ export default {
    cleanFormValue() {
      this._cleanFormValue(this.iForm, this.remoteMeta)
    },
-    _getElFormInstance() {
-      try {
-        return this.$refs?.dataForm?.$refs?.form?.$refs?.elForm || null
-      } catch (e) {
-        return null
-      }
-    },
-    /**
-     * @description 仅清理 UI 的错误展示,不触发表单内容重建
-     */
-    clearAllFieldErrors() {
-      const elForm = this._getElFormInstance()
-      if (elForm && Array.isArray(elForm.fields)) {
-        elForm.fields.forEach((item) => {
-          item.validateMessage = ''
-          item.validateState = ''
-        })
-      }
-      // 不修改 totalFields/attrs，避免触发 content 重建导致输入丢失
-      this.serverErrors = {}
-    },
    setFieldError(name, error) {
-      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' : ''
-        }
+      error = error.replace(/[。.]+$/, '')
+      const field = this.totalFields.find((v) => v.prop === name)
+      if (!field) {
+        return
      }
-      // 不写入 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' : ''
-        })
+      if (typeof error === 'string') {
+        field.el.errors = error
+        field.attrs.error = error
      }
    },
    groupHidden(group, i) {
--- a/src/components/Form/AutoDataForm/utils.js
+++ b/src/components/Form/AutoDataForm/utils.js
@@ -1,13 +1,12 @@
-// Vue dependency removed; use console for debug logs
+import Vue from 'vue'
 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/index'
+import { assignIfNot, toSentenceCase } from '@/utils/common'
 import TagInput from '@/components/Form/FormFields/TagInput.vue'
 import i18n from '@/i18n/i18n'
-import _ from 'lodash'

 export class FormFieldGenerator {
  constructor() {
@@ -120,7 +119,7 @@ export class FormFieldGenerator {
      const f = this.generateField(name, nestedFieldsMeta, nestedFieldsRemoteMeta)
      fields.push(f)
    }
-    console.debug('NestFields: ', fields)
+    Vue.$log.debug('NestFields: ', fields)
    return fields
  }

@@ -178,10 +177,7 @@ 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
@@ -243,7 +239,7 @@ export class FormFieldGenerator {
    field = this.setPlaceholder(field, remoteFieldMeta)
    field = this.afterGenerateField(field)
    _.set(field, 'attrs.error', '')
-    console.debug('Generate field: ', name, field)
+    Vue.$log.debug('Generate field: ', name, field)
    return field
  }

@@ -256,7 +252,7 @@ export class FormFieldGenerator {
      return field
    }
    if (field.type === 'select' || [ObjectSelect2].indexOf(field.component) > -1) {
-      field.el.placeholder = i18n.global.t('PleaseSelect') + label.toLowerCase()
+      field.el.placeholder = i18n.t('PleaseSelect') + label.toLowerCase()
    } else if (field.type === 'input') {
      field.el.placeholder = field.label
    }
--- a/src/components/Form/DataForm/components/el-form-renderer/components/render-form-group.vue
+++ b/src/components/Form/DataForm/components/el-form-renderer/components/render-form-group.vue
@@ -1,9 +1,10 @@
 <template>
  <div>
-    <template v-for="(item, index) in data.items" :key="item.id || index">
+    <template v-for="(item, index) in data.items">
      <slot :name="`id:${item.id}`" />
      <slot :name="`$id:${item.id}`" />
      <render-form-item
+        :key="index"
        :prop="`${data.id}.${item.id}`"
        :data="item"
        :value="value"
@@ -11,7 +12,7 @@
        :disabled="disabled"
        :readonly="readonly"
        :options="options[item.id]"
-        @update-value="updateValue"
+        @updateValue="updateValue"
      />
    </template>
  </div>
--- a/src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue
+++ b/src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue
@@ -6,7 +6,6 @@
    :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">
@@ -20,8 +19,7 @@
          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>
@@ -29,12 +27,18 @@
    <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'">
-        {{ multipleValue }}
+        <template>
+          {{ multipleValue }}
+        </template>
      </div>
    </template>
    <custom-component
@@ -45,10 +49,15 @@
      v-bind="componentProps"
      v-on="listeners"
    >
-      <template v-for="opt in options" :key="opt.value">
-        <el-option v-if="data.type === 'select'" v-bind="opt" />
+      <template v-for="opt in options">
+        <el-option
+          v-if="data.type === 'select'"
+          :key="opt.label"
+          v-bind="opt"
+        />
        <el-checkbox-button
          v-else-if="data.type === 'checkbox-group' && data.style === 'button'"
+          :key="opt.value"
          :label="'value' in opt ? opt.value : opt.label"
          v-bind="opt"
        >
@@ -57,6 +66,7 @@

        <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"
        >
@@ -70,6 +80,7 @@
        <!-- 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"
        >
@@ -100,10 +111,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) {
@@ -141,10 +152,6 @@ export default {
  props: {
    // eslint-disable-next-line vue/require-default-prop
    data: Object,
-    serverErrors: {
-      type: Object,
-      default: () => ({})
-    },
    prop: {
      type: String,
      default() {
@@ -163,8 +170,7 @@ export default {
  data() {
    return {
      propsInner: {},
-      isBlurTrigger:
-        this.data.rules &&
+      isBlurTrigger: this.data.rules &&
        this.data.rules.some(rule => {
          return rule.required && rule.trigger === 'blur'
        })
@@ -173,7 +179,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),
    // 是否显示
@@ -183,11 +189,6 @@ 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: {
@@ -203,7 +204,10 @@ 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) => {
@@ -228,7 +232,9 @@ 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()
@@ -248,7 +254,8 @@ 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),
@@ -316,7 +323,7 @@ export default {
  }
 }
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .help-tips {
  opacity: 0.8;
  line-height: 2;
@@ -324,8 +331,8 @@ export default {
 }

 .help-block {
-  :deep(.el-alert__icon) {
-    font-size: 16px;
+  ::v-deep .el-alert__icon {
+    font-size: 16px
  }

  &.checkbox {
--- a/src/components/Form/DataForm/components/el-form-renderer/el-form-renderer.vue
+++ b/src/components/Form/DataForm/components/el-form-renderer/el-form-renderer.vue
@@ -1,23 +1,17 @@
 <template>
-  <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">
+  <el-form ref="elForm" :model="value" class="el-form-renderer" v-bind="$attrs">
+    <template v-for="item in innerContent">
      <slot v-if="!isHidden(item)" :name="`id:${item.id}`" />
      <component
        :is="item.type === GROUP ? 'render-form-group' : 'render-form-item'"
+        :key="item.id"
        :data="item"
-        :server-errors="serverErrors"
        :disabled="disabled || item.disabled"
        :item-value="value[item.id]"
        :options="options[item.id]"
        :readonly="readonly || item.readonly"
        :value="value"
-        @update-value="updateValue"
+        @updateValue="updateValue"
      />
      <slot v-if="!isHidden(item)" :name="`$id:${item.id}`" />
    </template>
@@ -25,19 +19,13 @@
  </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'

@@ -59,10 +47,6 @@ export default {
      type: Array,
      required: true
    },
-    serverErrors: {
-      type: Object,
-      default: () => ({})
-    },
    disabled: {
      type: Boolean,
      default: false
@@ -131,9 +115,7 @@ export default {
    this.initValue = _clonedeep(this.value)
    this.$nextTick(() => {
      // proxy
-      const methods = this.$refs.elForm.$options.methods || {}
-
-      Object.keys(methods).forEach(item => {
+      Object.keys(this.$refs.elForm.$options.methods).forEach(item => {
        if (item in this) return
        this[item] = this.$refs.elForm[item]
      })
@@ -226,11 +208,6 @@ export default {
        return item.hidden(this.value)
      }
      return false
-    },
-    clearValidate() {
-      if (this.$refs.elForm) {
-        this.$refs.elForm.clearValidate()
-      }
    }
  }
 }
--- a/src/components/Form/DataForm/components/el-form-renderer/util/enable-when.js
+++ b/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,5 +20,7 @@ export default function getEnableWhenStatus(enableWhen, value) {
    })
  }

-  return Array.isArray(enableWhen) ? enableWhen.some(handleCondition) : handleCondition(enableWhen)
+  return Array.isArray(enableWhen)
+    ? enableWhen.some(handleCondition)
+    : handleCondition(enableWhen)
 }
--- a/src/components/Form/DataForm/components/el-form-renderer/util/transform-content.js
+++ b/src/components/Form/DataForm/components/el-form-renderer/util/transform-content.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-sequences */
-import _ from 'lodash'
+import _kebabcase from 'lodash.kebabcase'
 /**
 * 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,5 +34,8 @@ 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)
+  ]
 }
--- a/Show More
+++ b/Show More
				`@@ -1 +0,0 @@`
				<?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>