Merge pull request #5239 from jumpserver/dev

v4.10.10
Merge pull request #5212 from jumpserver/dev
2026-01-13 19:35:24 +00:00 · 2025-10-16 17:29:18 +08:00 · 2025-09-18 16:49:05 +08:00 · 2025-08-21 18:59:54 +08:00 · 2025-07-17 15:04:47 +08:00 · 2025-06-19 20:13:12 +08:00
572 changed files with 14634 additions and 13757 deletions
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -1,21 +1,15 @@
 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
@@ -24,28 +18,20 @@ module.exports = {
  // 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,
@@ -308,8 +294,7 @@ module.exports = {
        ],
        skipIfMatch: [
          'http://[^s]*',
-          '^[-\\w]+/[-\\w\\.]+$',
-          String.raw`^\/api\/[a-z0-9\/._-]+$`
+          '^[-\\w]+/[-\\w\\.]+$' // For import paths
        ],
        minLength: 3
      }
--- a/.prettierrc.js
+++ b/.prettierrc.js
@@ -7,6 +7,5 @@ module.exports = {
  useTabs: false,
  bracketSpacing: true,
  arrowParens: 'avoid',
-  endOfLine: 'auto',
-  spaceBeforeFunctionParen: false
+  endOfLine: 'auto'
 }
--- a/2
+++ b/2
@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20251204_081759 AS stage-build
+FROM jumpserver/lina-base:20250910_084112 AS stage-build

 ARG VERSION
 ENV VERSION=$VERSION
--- 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/package.json
+++ b/package.json
@@ -5,7 +5,7 @@
  "author": "JumpServer Team <support@lxware.hk>",
  "license": "GPL-3.0-or-later",
  "scripts": {
-    "dev": "NODE_OPTIONS='--openssl-legacy-provider' vue-cli-service serve",
+    "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",
@@ -21,127 +21,133 @@
    "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"
+    "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.2.7",
+    "@fontsource/open-sans": "^5.0.24",
    "@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",
+    "@ztree/ztree_v3": "3.5.44",
+    "axios": "0.28.0",
+    "axios-retry": "^3.1.9",
    "babel-loader": "^10.0.0",
-    "babel-runtime": "^6.26.0",
+    "cache-loader": "^4.1.0",
    "caniuse-lite": "^1.0.30001642",
-    "core-js": "^3.47.0",
-    "cron-parser": "^4.9.0",
-    "crypto-js": "^4.2.0",
+    "cron-parser": "^4.0.0",
+    "crypto-js": "^4.1.1",
    "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",
+    "decimal.js": "^10.4.3",
+    "deepmerge": "^4.2.2",
+    "dompurify": "^3.1.6",
+    "echarts": "4.7.0",
+    "element-ui": "^2.15.14",
+    "elementui-lts": "^2.16.0",
    "eslint-plugin-html": "^6.0.0",
-    "highlight.js": "^11.11.1",
+    "highlight.js": "^11.9.0",
    "install": "^0.13.0",
-    "jquery": "^3.7.1",
-    "js-cookie": "^3.0.5",
-    "jsencrypt": "^3.5.4",
+    "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",
-    "mitt": "^3.0.1",
-    "moment": "^2.30.1",
+    "moment": "^2.29.4",
    "moment-parseformat": "^4.0.0",
-    "normalize.css": "^8.0.1",
-    "nprogress": "^0.2.0",
-    "path-browserify": "^1.0.1",
+    "normalize.css": "7.0.0",
+    "npm": "^7.8.0",
+    "nprogress": "0.2.0",
    "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",
+    "v-sanitize": "^0.0.13",
+    "vue": "2.6.10",
    "vue-codemirror": "4.0.6",
-    "vue-cookie-next": "^1.0.0",
-    "vue-echarts": "^8.0.1",
-    "vue-i18n": "^9.9.0",
+    "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": "^4.3.0",
-    "vue-select": "^3.20.4",
+    "vue-router": "3.0.6",
+    "vue-select": "^3.9.5",
    "vuejs-logger": "^1.5.4",
-    "vuex": "^4.1.0",
-    "watermark-js-plus": "^1.6.3",
-    "xss": "^1.0.15",
+    "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.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",
+    "@babel/core": "7.18.6",
+    "@babel/register": "7.0.0",
+    "@vue/cli-plugin-babel": "3.6.0",
+    "@vue/cli-plugin-eslint": "^3.9.1",
+    "@vue/cli-plugin-unit-jest": "3.6.3",
+    "@vue/cli-service": "3.6.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "^9.5.1",
+    "babel-core": "6.26.3",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "23.6.0",
+    "chalk": "2.4.2",
+    "compression-webpack-plugin": "^6.1.1",
+    "connect": "3.6.6",
+    "deasync": "^0.1.29",
+    "eslint": "^5.15.3",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.4.1",
    "eslint-plugin-spellcheck": "^0.0.20",
-    "eslint-plugin-vue": "^9.33.0",
+    "eslint-plugin-vue": "5.2.2",
    "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",
+    "github-markdown-css": "^5.1.0",
+    "html-webpack-plugin": "3.2.0",
+    "husky": "^4.2.3",
+    "less-loader": "^5.0.0",
+    "lint-staged": "^10.1.2",
+    "mockjs": "1.0.1-beta3",
+    "prettier": "^3.6.2",
+    "pretty-bytes": "^5.6.0",
+    "runjs": "^4.3.2",
+    "sass": "~1.32.6",
+    "sass-loader": "^7.1.0",
+    "script-ext-html-webpack-plugin": "2.1.3",
    "script-loader": "0.7.2",
-    "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"
+    "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",
+    "webpack": "^4.28.4"
  },
  "engines": {
-    "node": ">=16",
+    "node": ">=8.9",
    "npm": ">= 3.0.0"
  },
  "browserslist": [
    "> 1%",
    "last 4 versions",
-    "not ie <= 11"
+    "ie 11"
  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
  "lint-staged": {
    "src/**/*.{js,vue}": [
      "eslint --fix"
--- 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/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/deepSeek.png
+++ b/src/assets/img/deepSeek.png
--- a/src/components/Apps/AccountCreateUpdateForm/const.js
+++ b/src/components/Apps/AccountCreateUpdateForm/const.js
@@ -15,25 +15,10 @@ export const accountFieldsMeta = (vm) => {
  }

  return {
-    nodes: {
-      component: Select2,
-      label: vm.$t('Node'),
-      el: {
-        value: [],
-        ajax: {
-          url: '/api/v1/assets/nodes/',
-          transformOption: (item) => {
-            return { label: item.full_value, value: item.id }
-          }
-        }
-      },
-      hidden: () => {
-        return !vm.addTemplate
-      }
-    },
    assets: {
      component: AssetSelect,
      label: vm.$t('Asset'),
+      rules: [Required],
      el: {
        multiple: false
      },
@@ -48,7 +33,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,9 +2,9 @@
  <AutoDataForm
    v-if="!loading"
    ref="AutoDataForm"
-    v-bind="$data"
    :class="addTemplate? '': 'account-add'"
    :submit-btn-text="submitBtnText"
+    v-bind="$data"
    @submit="confirm"
  />
 </template>
@@ -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/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,54 +9,49 @@
    />
    <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 { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const'
 import { openTaskPage } from '@/utils/jms/index'
 import {
  AccountConnectFormatter,
@@ -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)
            }
@@ -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 && vm.$hasPerm('accounts.verify_account')
            },
            callback: function({ selectedRows }) {
              const ids = selectedRows.map(v => {
                return v.id
              })
-              this.$axios
-                .post('/api/v1/accounts/accounts/tasks/', { action: 'verify', accounts: ids })
-                .then(res => {
-                  openTaskPage(res['task'])
-                })
-                .catch(err => {
-                  this.$message.error(this.$tc('BulkVerifyErrorMsg' + ' ' + err))
-                })
+              this.$axios.post(
+                '/api/v1/accounts/accounts/tasks/',
+                { action: 'verify', accounts: ids }).then(res => {
+                openTaskPage(res['task'])
+              }).catch(err => {
+                this.$message.error(this.$tc('BulkVerifyErrorMsg' + ' ' + err))
+              })
            }.bind(this)
          },
          {
@@ -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"
@@ -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"
@@ -24,11 +25,9 @@ import Dialog from '@/components/Dialog/index.vue'
 import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
 import { encryptPassword } from '@/utils/secure'
 import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
-import vModelMixin from '@/utils/vue/vModelMixin'

 export default {
  name: 'UpdateSecretInfo',
-  mixins: [vModelMixin('visible')],
  components: {
    AutoDataForm,
    Dialog
@@ -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,13 +51,13 @@
    </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'
@@ -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/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"
--- 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,7 +76,6 @@

 <script>
 import MessageText from './MessageText.vue'
-import ModelIcon from '../../models/ModelIcon.vue'
 import { mapGetters, mapState } from 'vuex'
 import { copy } from '@/utils/common/index'
 import { useChat } from '../../useChat.js'
@@ -90,8 +85,7 @@ 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
@@ -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: {
@@ -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
@@ -92,7 +92,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
@@ -29,7 +29,7 @@
      </div>
      <div class="sidebar">
        <Sidebar
-          v-model:active="active"
+          :active.sync="active"
          :expanded="expanded"
          v-bind="$attrs"
          @close="onClose"
@@ -46,9 +46,9 @@
 import Sidebar from './components/Sidebar/index.vue'
 import Chat from './components/ChitChat/index.vue'
 import { getInputFocus } from './useChat.js'
+import { ws } from '@/utils/request'
 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')
@@ -62,7 +62,7 @@ export default {
    title: {
      type: String,
      default: function() {
-        return i18n.global.t('ChatAI')
+        return this.$t('ChatAI')
      }
    },
    defaultShowPanel: {
@@ -82,8 +82,7 @@ export default {
      height: '400px',
      expanded: false,
      clientOffset: {},
-      currentTerminalContent: {},
-      initialized: false
+      currentTerminalContent: {}
    }
  },
  computed: {
@@ -124,18 +123,11 @@ export default {
        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 +152,11 @@ export default {
      }
      this.$refs.drawer.handleHeaderMoveUp(event)
    },
+    initWebSocket() {
+      if (!ws) {
+        this.$refs.component?.init()
+      }
+    },
    onClose() {
      this.$refs.drawer.show = false
    },
@@ -173,6 +170,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 +184,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/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>
@@ -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,
--- 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/ResourceActivity/index.vue
+++ b/src/components/Apps/ResourceActivity/index.vue
@@ -27,7 +27,7 @@
  </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'
--- a/src/components/Apps/UserConfirmDialog/index.vue
+++ b/src/components/Apps/UserConfirmDialog/index.vue
@@ -5,7 +5,7 @@
    :show-cancel="false"
    :show-confirm="false"
    :title="title"
-    :visible="visible"
+    :visible.sync="visible"
    class="dialog-content"
    v-bind="$attrs"
    width="600px"
@@ -13,25 +13,30 @@
    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>
@@ -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
@@ -3,11 +3,10 @@
    :show-cancel="false"
    :show-confirm="false"
    :title="title"
-    :visible="visible"
+    :visible.sync="iVisible"
    class="help-dialog"
    top="1vh"
    width="50%"
-    @update:visible="$emit('update:visible', $event)"
  >
    <p>{{ variablesHelpText }}</p>
    <table border="1" class="help-table">
@@ -20,12 +19,8 @@
        <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>
+        <td><span>{{ item.label }}</span></td>
+        <td><span>{{ item.default }}</span></td>
      </tr>
    </table>
  </Dialog>
@@ -51,16 +46,25 @@ export default {
    variablesHelpText: {
      type: String,
      default() {
-        return 'WatermarkVariableHelpText'
+        return this.$t('WatermarkVariableHelpText')
      }
    }
  },
-  emits: ['update:visible'],
  data() {
    return {
      title: this.$t('BuiltinVariable')
    }
  },
+  computed: {
+    iVisible: {
+      set(val) {
+        this.$emit('update:visible', val)
+      },
+      get() {
+        return this.visible
+      }
+    }
+  },
  methods: {
    onCopy(key) {
      copy(key)
@@ -69,28 +73,26 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
-:deep(.help-dialog.dialog .el-dialog__footer) {
+<style>
+.help-dialog.dialog .el-dialog__footer {
  border-top: none;
  padding: 8px;
 }
+</style>

+<style lang="scss" scoped>
 .help-table {
  width: 100%;
  border-collapse: collapse;
  border: 1px solid #dee2e6;
-}

-:deep(.help-table) {
-  th,
-  td {
+  &::v-deep th, td {
    height: 40px;
    padding: 0 8px;
    text-align: left;
  }

-  .item-td,
-  .item-label {
+  &::v-deep .item-td, .item-label {
    cursor: pointer;
    color: var(--color-primary);
  }
--- a/src/components/Cards/DetailCard/ItemValue.vue
+++ b/src/components/Cards/DetailCard/ItemValue.vue
@@ -1,4 +1,4 @@
-<script lang="jsx">
+<script type="text/jsx">
 import { toSafeLocalDateStr } from '@/utils/common/time'

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

-<script lang="jsx">
+<script>
 import DetailCard from './index.vue'
 import { copy } from '@/utils/common/index'
 import { toSafeLocalDateStr } from '@/utils/common/time'
@@ -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,9 +1,10 @@
 <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"
+        :key="action.name"
        :class="[action.name, { grouped: action.grouped }]"
        :size="action.size"
        :split-button="!!action.split"
@@ -24,44 +25,50 @@
          class="more-action"
          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
+        :key="action.name"
        :class="[action.name, { grouped: action.grouped }]"
        :size="size"
        class="action-item"
@@ -69,12 +76,12 @@
        @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>
@@ -229,28 +236,9 @@ $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,121 @@ $color-drop-menu-border: #e4e7ed;
    }
  }
 }
+
+// 主要是 Table 中的操作列
+.layout.table-actions {
+  display: flex;
+  justify-content: center;
+  align-items: flex-end;
+
+  .el-button {
+    padding: 2px 5px;
+    line-height: 1.3;
+    font-size: 13px;
+
+    &: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/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/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
@@ -44,7 +44,7 @@ export default {
    this._chartId = `chart_${Date.now()}_${Math.random().toString(36).slice(2)}`
    window._echarts.total.add(this._chartId)
  },
-  beforeUnmount() {
+  beforeDestroy() {
    if (window._echarts) {
      window._echarts.total.delete(this._chartId)
      window._echarts.finished.delete(this._chartId)
--- a/src/components/Dashboard/LineChart.vue
+++ b/src/components/Dashboard/LineChart.vue
@@ -246,7 +246,7 @@ export default {
      this._mql._handler = handler
    }
  },
-  beforeUnmount() {
+  beforeDestroy() {
    window.removeEventListener('beforeprint', this._before)
    window.removeEventListener('afterprint', this._after)
    if (this._mql) {
--- a/src/components/Dashboard/RankTable.vue
+++ b/src/components/Dashboard/RankTable.vue
@@ -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/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>
@@ -78,7 +83,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 +93,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"
@@ -30,14 +30,12 @@
 import i18n from '@/i18n/i18n'
 import { copy } from '@/utils/common/index'
 import Dialog from '@/components/Dialog/index'
-import vModelMixin from '@/utils/vue/vModelMixin'

 export default {
  name: 'Secret',
  components: {
    Dialog
  },
-  mixins: [vModelMixin('visible')],
  props: {
    title: {
      type: String,
@@ -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">
@@ -32,7 +31,6 @@

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

 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
@@ -29,7 +29,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',
@@ -115,47 +114,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) {
@@ -223,21 +181,8 @@ export default {
      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)
+        if (Array.isArray(v)) msg = v.join('; ')
+        else if (typeof v === 'object' && v !== null) msg = JSON.stringify(v)
        mapped[k] = String(msg || '')
      })
      this.serverErrors = mapped
--- a/src/components/Form/AutoDataForm/utils.js
+++ b/src/components/Form/AutoDataForm/utils.js
@@ -1,4 +1,4 @@
-// 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'
@@ -7,7 +7,6 @@ import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
 import { assignIfNot, toSentenceCase } from '@/utils/common/index'
 import TagInput from '@/components/Form/FormFields/TagInput.vue'
 import i18n from '@/i18n/i18n'
-import _ from 'lodash'

 export class FormFieldGenerator {
  constructor() {
@@ -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
  }

@@ -243,7 +242,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 +255,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
@@ -20,8 +20,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 +28,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 +50,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 +67,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 +81,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 +112,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) {
@@ -163,8 +175,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'
        })
@@ -203,7 +214,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 +242,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 +264,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 +333,7 @@ export default {
  }
 }
 </script>
-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .help-tips {
  opacity: 0.8;
  line-height: 2;
@@ -324,8 +341,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,15 +1,10 @@
 <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" @submit.native.prevent>
+    <template v-for="item in innerContent">
      <slot v-if="!isHidden(item)" :name="`id:${item.id}`" />
      <component
        :is="item.type === GROUP ? 'render-form-group' : 'render-form-item'"
+        :key="item.id"
        :data="item"
        :server-errors="serverErrors"
        :disabled="disabled || item.disabled"
@@ -17,7 +12,7 @@
        :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 +20,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'

@@ -131,9 +120,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 +213,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/src/components/Form/DataForm/components/el-form-renderer/util/utils.js
+++ b/src/components/Form/DataForm/components/el-form-renderer/util/utils.js
@@ -1,5 +1,5 @@
-import _frompairs from 'lodash/fromPairs'
-import _isplainobject from 'lodash/isPlainObject'
+import _frompairs from 'lodash.frompairs'
+import _isplainobject from 'lodash.isplainobject'

 export function noop() {}

@@ -12,9 +12,11 @@ export function collect(content, key) {
        value: item.type === 'group' ? collect(item.items, key) : item[key]
      }))
      .filter(
-        ({ type, value }) => value !== undefined || (type === 'group' && Object.keys(value).length)
+        ({ type, value }) =>
+          value !== undefined ||
+          (type === 'group' && Object.keys(value).length),
      )
-      .map(({ id, value }) => [id, value])
+      .map(({ id, value }) => [id, value]),
  )
 }

--- a/src/components/Form/DataForm/index.vue
+++ b/src/components/Form/DataForm/index.vue
@@ -12,10 +12,19 @@
      :style="{ '--label-width': labelWidth }"
      v-bind="$attrs"
      :server-errors="serverErrors"
+      v-on="$listeners"
    >
      <!-- slot 透传 -->
-      <slot v-for="item in fields" :slot="`id:${item.id}`" :name="`id:${item.id}`" />
-      <slot v-for="item in fields" :slot="`$id:${item.id}`" :name="`$id:${item.id}`" />
+      <slot
+        v-for="item in fields"
+        :slot="`id:${item.id}`"
+        :name="`id:${item.id}`"
+      />
+      <slot
+        v-for="item in fields"
+        :slot="`$id:${item.id}`"
+        :name="`$id:${item.id}`"
+      />

      <div v-if="hasButtons" class="form-buttons">
        <el-button
@@ -34,11 +43,15 @@
          size="small"
          @click="submitForm('form', true)"
        >
-          {{ $t('SaveAndAddAnother') }}
+          {{ $t("SaveAndAddAnother") }}
        </el-button>

-        <el-button v-if="defaultButton && hasReset" size="small" @click="resetForm('form')">
-          {{ $t('Reset') }}
+        <el-button
+          v-if="defaultButton && hasReset"
+          size="small"
+          @click="resetForm('form')"
+        >
+          {{ $t("Reset") }}
        </el-button>

        <el-button
@@ -62,23 +75,15 @@ import ElFormRender from './components/el-form-renderer'
 import { randomString } from '@/utils/common/index'

 const scrollToError = (
-  formInstance,
+  el,
  scrollOption = {
    behavior: 'smooth',
    block: 'center'
  }
 ) => {
  setTimeout(() => {
-    // formInstance 是 ElFormRender 组件实例，需要访问内部的 el-form 元素
-    const elForm = formInstance.$refs?.elForm
-    if (!elForm || !elForm.$el) {
-      return
-    }
-    const formEl = elForm.$el
-    const errorElements = formEl.getElementsByClassName('is-error')
-    if (errorElements && errorElements.length > 0) {
-      errorElements[0].scrollIntoView(scrollOption)
-    }
+    const isError = el.getElementsByClassName('is-error')
+    isError[0].scrollIntoView(scrollOption)
  }, 0)
 }

@@ -86,7 +91,6 @@ export default {
  components: {
    ElFormRender
  },
-  inheritAttrs: true,
  props: {
    defaultButton: {
      type: Boolean,
@@ -106,7 +110,7 @@ export default {
    },
    submitBtnSize: {
      type: String,
-      default: 'default'
+      default: 'small'
    },
    submitBtnText: {
      type: String,
@@ -145,10 +149,9 @@ export default {
    },
    labelWidth: {
      type: String,
-      default: '18.2%'
+      default: '25%'
    }
  },
-  emits: ['submit', 'invalid'],
  data() {
    return {
      basicForm: this.form,
@@ -200,16 +203,17 @@ export default {
     * @param {string} formName - 表单的引用名称
     * @param {boolean} [addContinue] - 是否继续添加
     */
-    async submitForm(formName, addContinue) {
+    submitForm(formName, addContinue) {
      const form = this.$refs[formName]
-      try {
-        await form.validate()
-        this.$emit('submit', form.getFormValue(), form, addContinue)
-      } catch (error) {
-        this.$emit('invalid', false)
-        scrollToError(form)
-        return false
-      }
+      form.validate(valid => {
+        if (valid) {
+          this.$emit('submit', form.getFormValue(), form, addContinue)
+        } else {
+          this.$emit('invalid', valid)
+          scrollToError(form.$el)
+          return false
+        }
+      })
    },
    // 重置表单
    resetForm() {
@@ -218,7 +222,7 @@ export default {
    handleClick(button) {
      const callback =
        button.callback ||
-        function (values, form) {
+        function(values, form) {
          // debug('Click ', button.title, ': ', values)
        }
      const form = this.$refs['form']
@@ -240,28 +244,24 @@ export default {
  margin-right: 80px;
  margin-bottom: 20px;

-  .el-form {
-    margin-right: 0;
-  }
-
-  :deep(.el-input-group__prepend) {
+  ::v-deep .el-input-group__prepend {
    border-radius: 0;
  }

-  :deep(.form-group-header) {
+  ::v-deep .form-group-header {
    margin-left: 50px;
    color: var(--color-text-primary);
  }

  &.label-top {
-    :deep(.el-form-item) {
+    ::v-deep .el-form-item {
      .el-form-item__content {
        width: 100%;
      }
    }
  }

-  :deep(.el-form-item) {
+  ::v-deep .el-form-item {
    margin-bottom: 10px;

    .el-form-item__label {
@@ -360,17 +360,17 @@ export default {
    }
  }

-  :deep(.form-buttons) {
+  ::v-deep .form-buttons {
    margin-top: 30px;
    margin-left: var(--label-width);
  }
 }

-.mobile.el-form :deep(.el-form-item__content) {
+.mobile.el-form ::v-deep .el-form-item__content {
  width: 100%;
 }

-.el-form.mobile :deep(.form-group-header) {
+.el-form.mobile ::v-deep .form-group-header {
  margin-left: 0;
 }
 </style>
--- a/src/components/Form/DataForm/rules/index.js
+++ b/src/components/Form/DataForm/rules/index.js
@@ -1,5 +1,4 @@
 import i18n from '@/i18n/i18n'
-import request from '@/utils/request'

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

 <style lang="scss" scoped>

-:deep(.el-select) {
+::v-deep .el-select {
  width: 100%;
 }

-:deep(.el-form-item__content) {
+::v-deep .el-form-item__content {
  width: 100% !important;
 }

-:deep(.form-buttons) {
+::v-deep .form-buttons {
  margin: 0 !important;
 }

 .attr-input {
 }
 </style>
+
--- a/src/components/Form/FormFields/BasicTree.vue
+++ b/src/components/Form/FormFields/BasicTree.vue
@@ -13,7 +13,7 @@
  />
 </template>

-<script lang="jsx">
+<script>
 export default {
  props: {
    value: {
@@ -111,7 +111,7 @@ export default {

 <style lang="scss" scoped>

-.el-tree-custom :deep(.el-tree){
+.el-tree-custom ::v-deep {
  .help-tips {
    margin-left: 10px;
    font-size: 12px;
--- a/src/components/Form/FormFields/BoolTextReadonly.vue
+++ b/src/components/Form/FormFields/BoolTextReadonly.vue
@@ -17,13 +17,13 @@ export default {
    trueText: {
      type: String,
      default: function() {
-        return 'Yes'
+        return this.$t('Yes')
      }
    },
    falseText: {
      type: String,
      default: function() {
-        return 'No'
+        return this.$t('No')
      }
    },
    trueIcon: {
--- a/src/components/Form/FormFields/CodeEditor.vue
+++ b/src/components/Form/FormFields/CodeEditor.vue
@@ -8,13 +8,14 @@
          :label="item.name"
          :prop="item.name"
        >
+
          <template v-if="item.type === 'button' && !item.isVisible">
            <el-tooltip :disabled="!item.tip" :content="item.tip">
              <el-button
                :type="item.el && item.el.type"
                class="start-stop-btn"
                :disabled="item.disabled"
-                size="small"
+                size="mini"
                @click="item.callback()"
              >
                <i :class="item.icon" />
@@ -31,7 +32,7 @@
                :fetch-suggestions="item.el.query"
                :placeholder="item.placeholder"
                class="inline-input"
-                size="small"
+                size="mini"
                clearable
                @change="handleInputChange(item)"
                @select="handleInputChange(item)"
@@ -46,7 +47,7 @@
                :class="!isFold ? 'special-style' : ''"
                :placeholder="item.placeholder"
                class="inline-input"
-                size="small"
+                size="mini"
                @change="item.callback(formModel[item.name])"
              />
            </el-tooltip>
@@ -65,7 +66,7 @@
                :placeholder="item.name"
                class="autoWidth-select"
                default-first-option
-                size="small"
+                size="mini"
                @change="item.callback(item.value)"
              >
                <template slot="prefix">{{ item.label + ':' + item.value }}</template>
@@ -85,14 +86,12 @@
              <el-dropdown
                class="select-dropdown"
                trigger="click"
-                @command="
-                  command => {
-                    item.value = command
-                    item.callback(command)
-                  }
-                "
+                @command="(command) => {
+                  item.value = command
+                  item.callback(command)
+                }"
              >
-                <el-button size="small" type="primary">
+                <el-button size="mini" type="primary">
                  <div class="text-content">
                    <span class="content">
                      {{ getLabel(item.value, item.options) }}
@@ -100,17 +99,15 @@
                    </span>
                  </div>
                </el-button>
-                <template #dropdown>
-                  <el-dropdown-menu>
-                    <el-dropdown-item
-                      v-for="(option, i) in item.options"
-                      :key="i"
-                      :command="option.value"
-                    >
-                      {{ option.label }}
-                    </el-dropdown-item>
-                  </el-dropdown-menu>
-                </template>
+                <el-dropdown-menu v-slot="dropdown">
+                  <el-dropdown-item
+                    v-for="(option, i) in item.options"
+                    :key="i"
+                    :command="option.value"
+                  >
+                    {{ option.label }}
+                  </el-dropdown-item>
+                </el-dropdown-menu>
              </el-dropdown>
            </el-tooltip>
          </template>
@@ -127,7 +124,7 @@
          </template>
        </el-form-item>
        <div
-          v-if="Object.prototype.hasOwnProperty.call(toolbar, 'fold')"
+          v-if="toolbar.hasOwnProperty('fold')"
          :class="!isFold ? 'sepcial-icon' : ''"
          class="fold"
        >
@@ -146,12 +143,12 @@
            <el-button
              v-if="item.type === 'button'"
              :disabled="item.disabled"
-              size="small"
+              size="mini"
              type="default"
              @click="item.callback()"
            >
              <i v-if="item.icon.startsWith('fa')" :class="'fa ' + item.icon" />
-              <svg-icon v-else :icon-class="item.icon" style="font-size: 14px" />
+              <svg-icon v-else :icon-class="item.icon" style="font-size: 14px;" />
            </el-button>
          </el-tooltip>
        </div>
@@ -219,7 +216,7 @@ export default {
      const actions = Object.values(actionsObj)

      actions.forEach(action => {
-        if (!Object.prototype.hasOwnProperty.call(this.formModel, action.name)) {
+        if (!this.formModel.hasOwnProperty(action.name)) {
          this.$set(this.formModel, action.name, action.value || '')
        }
      })
@@ -237,9 +234,7 @@ export default {

      Object.values(actionsObj).forEach(action => {
        if (action.name === this.$t('RunAs') && action.type === 'input') {
-          rules[action.name] = [
-            { required: true, message: this.$t('RequiredRunas'), trigger: 'blur' }
-          ]
+          rules[action.name] = [{ required: true, message: this.$t('RequiredRunas'), trigger: 'blur' }]
        }
      })

@@ -286,8 +281,8 @@ export default {
 </script>

 <style lang="scss" scoped>
-$header-bg-color: #f5f6f7;
-$input-border-color: #c0c4cc;
+$header-bg-color: #F5F6F7;
+$input-border-color: #C0C4CC;

 .code-editor {
  display: flex;
@@ -312,7 +307,7 @@ $input-border-color: #c0c4cc;
        margin-right: 5px;

        // input 框与 label 相关样式
-        :deep(.el-form-item__label) {
+        ::v-deep .el-form-item__label {
          display: flex;
          justify-items: flex-start;
          align-items: center;
@@ -323,20 +318,20 @@ $input-border-color: #c0c4cc;
          font-size: 11px;
        }

-        :deep(.el-form-item__content .inline-input .el-input__inner) {
+        ::v-deep .el-form-item__content .inline-input .el-input__inner {
          //width: 130px;
          min-width: 130px;
        }

        // 执行、暂停按钮
-        :deep(.el-form-item__content .start-stop-btn) {
+        ::v-deep .el-form-item__content .start-stop-btn {
          display: flex;
          align-items: center;
          height: 28px;
          margin-bottom: 1.5px;
        }

-        :deep(.el-form-item__content) .select-dropdown .el-button {
+        ::v-deep .el-form-item__content .select-dropdown .el-button {
          width: 125px;
          background-color: $header-bg-color;
          border-color: $input-border-color;
@@ -354,6 +349,7 @@ $input-border-color: #c0c4cc;
              display: flex;
              justify-content: space-between;
            }
+          ;
          }
        }

@@ -408,16 +404,18 @@ $input-border-color: #c0c4cc;
  }
 }

-:deep(.CodeMirror) pre.CodeMirror-line,
-:deep(.CodeMirror-linenumber.CodeMirror-gutter-elt) {
+::v-deep .CodeMirror pre.CodeMirror-line,
+::v-deep .CodeMirror-linenumber.CodeMirror-gutter-elt {
  line-height: 18px !important;
 }

 .runas-input {
  height: 28px;

-  :deep(.el-select) {
-    width: 100px;
+  ::v-deep {
+    .el-select {
+      width: 100px;
+    }
  }
 }

@@ -425,7 +423,7 @@ $input-border-color: #c0c4cc;
  min-width: 100px;
 }

-.autoWidth-select :deep(.el-input__prefix) {
+.autoWidth-select ::v-deep .el-input__prefix {
  position: relative;
  left: 0;
  box-sizing: border-box;
@@ -434,7 +432,7 @@ $input-border-color: #c0c4cc;
  visibility: hidden;
 }

-.autoWidth-select :deep(input) {
+.autoWidth-select ::v-deep input {
  position: absolute;
  padding-left: 0px;
  border: none;
@@ -445,7 +443,7 @@ $input-border-color: #c0c4cc;
  line-height: 27px;
 }

-:deep(.el-select) {
+::v-deep .el-select {
  top: -1px;

  .el-input .el-select__caret {
@@ -466,7 +464,7 @@ $input-border-color: #c0c4cc;
  line-height: 28px;
  padding-left: 15px;
  font-size: 0;
-  border: 1px solid #dcdfe6;
+  border: 1px solid #DCDFE6;
  border-radius: 4px;
  background-color: #e6e6e6;
 }
--- a/src/components/Form/FormFields/CronTab/Crontab.vue
+++ b/src/components/Form/FormFields/CronTab/Crontab.vue
@@ -50,7 +50,7 @@

    <div class="popup-main">
      <div class="popup-result">
-        <p class="title">{{ $t('TimeExpression') }}</p>
+        <p class="title">{{ this.$t('TimeExpression') }}</p>
        <table>
          <thead>
            <th v-for="item of tabTitles" :key="item" width="40">{{ item }}</th>
@@ -62,40 +62,40 @@
                max="5"
                min="0"
                onkeyup="value=value.replace(/[^\0-9\-\*\,]/g,'')"
-                size="small"
+                size="mini"
              />
            </td>
            <td>
              <el-input
                v-model.trim="contabValueObj.hour"
                onkeyup="value=value.replace(/[^\0-9\-\*\,]/g,'')"
-                size="small"
+                size="mini"
              />
            </td>
            <td>
              <el-input
                v-model.trim="contabValueObj.day"
                onkeyup="value=value.replace(/[^\0-9\\-\*\,]/g,'')"
-                size="small"
+                size="mini"
              />
            </td>
            <td>
              <el-input
                v-model.trim="contabValueObj.month"
                onkeyup="value=value.replace(/[^\0-9\-\*\,]/g,'')"
-                size="small"
+                size="mini"
              />
            </td>
            <td>
              <el-input
                v-model.trim="contabValueObj.week"
                onkeyup="value=value.replace(/[^\0-9\-\*\,]/g,'')"
-                size="small"
+                size="mini"
              />
            </td>
          </tbody>
        </table>
-        <CrontabResult :ex="contabValueString" @crontab-diff-change="crontabDiffChangeHandle" />
+        <CrontabResult :ex="contabValueString" @crontabDiffChange="crontabDiffChangeHandle" />
      </div>

      <div class="pop_btn">
@@ -103,14 +103,14 @@
          size="small"
          @click="clearCron"
        >
-          {{ $t('Reset') }}
+          {{ this.$t('Reset') }}
        </el-button>
        <el-button
          size="small"
          type="primary"
          @click="submitFill"
        >
-          {{ $t('Confirm') }}
+          {{ this.$t('Confirm') }}
        </el-button>
      </div>
    </div>
@@ -457,9 +457,9 @@ export default {
  overflow-y: auto;
 }

-:deep(.el-form-item){
-  &.el-form-item--small,
-  &.el-form-item--small {
+::v-deep {
+  .el-form-item--mini.el-form-item,
+  .el-form-item--small.el-form-item {
    margin-bottom: 5px;
  }

@@ -477,7 +477,7 @@ export default {
  border: 1px solid #dcdfe6;
 }

-:deep(.el-tabs__header) {
+::v-deep .el-tabs__header {
  background-color: white;
  margin-top: -10px;
  padding: 0 30px;
@@ -499,11 +499,11 @@ export default {
 }

 .tab-page {
-  :deep(.page-heading) {
+  ::v-deep .page-heading {
    border-bottom: none;
  }

-  :deep(.page-content) {
+  ::v-deep .page-content {
    overflow-y: hidden;
    padding: 0;
  }
@@ -520,7 +520,7 @@ export default {
  }
 }

-:deep(.el-tabs__nav-wrap) {
+::v-deep .el-tabs__nav-wrap {
  position: static;
 }
 </style>
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Day.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Day.vue
@@ -3,28 +3,28 @@
  <el-form size="small">
    <el-form-item>
      <el-radio v-model="radioValue" :label="1">
-        {{ $t('Day') }}，{{ $t('WildcardsAllowed') }}[, - * /]
+        {{ this.$t('Day') }}，{{ this.$t('WildcardsAllowed') }}[, - * /]
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="3">
-        {{ $t('From') }}
-        <el-input-number v-model="cycle01" :max="31" :min="0" size="small" /> -
-        <el-input-number v-model="cycle02" :max="31" :min="0" size="small" /> {{ $t('Day') }}
+        {{ this.$t('From') }}
+        <el-input-number v-model="cycle01" :max="31" :min="0" size="mini" /> -
+        <el-input-number v-model="cycle02" :max="31" :min="0" size="mini" /> {{ this.$t('Day') }}
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="4">
-        {{ $t('Every') }}
-        <el-input-number v-model="average02" :max="31" :min="1" size="small" /> {{ $t('Day') }} {{ $t('ExecuteOnce') }}
+        {{ this.$t('Every') }}
+        <el-input-number v-model="average02" :max="31" :min="1" size="mini" /> {{ this.$t('Day') }} {{ this.$t('ExecuteOnce') }}
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="7">
-        {{ $t('Appoint') }}
+        {{ this.$t('Appoint') }}
        <el-select
          v-model="checkboxList"
          :placeholder="$tc('ManyChoose')"
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Hour.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Hour.vue
@@ -3,31 +3,31 @@
  <el-form size="small">
    <el-form-item>
      <el-radio v-model="radioValue" :label="1">
-        {{ $t('Hour') }}，{{ $t('WildcardsAllowed') }}[, - * /]
+        {{ this.$t('Hour') }}，{{ this.$t('WildcardsAllowed') }}[, - * /]
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="2">
-        {{ $t('From') }}
-        <el-input-number v-model="cycle01" :max="23" :min="0" size="small" />
+        {{ this.$t('From') }}
+        <el-input-number v-model="cycle01" :max="23" :min="0" size="mini" />
        -
-        <el-input-number v-model="cycle02" :max="23" :min="0" size="small" />
-        {{ $t('Hour') }}
+        <el-input-number v-model="cycle02" :max="23" :min="0" size="mini" />
+        {{ this.$t('Hour') }}
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="3">
-        {{ $t('Every') }}
-        <el-input-number v-model="average02" :max="23" :min="1" size="small" />
-        {{ $t('Hour') }} {{ $t('ExecuteOnce') }}
+        {{ this.$t('Every') }}
+        <el-input-number v-model="average02" :max="23" :min="1" size="mini" />
+        {{ this.$t('Hour') }} {{ this.$t('ExecuteOnce') }}
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="4">
-        {{ $t('Appoint') }}
+        {{ this.$t('Appoint') }}
        <el-select
          v-model="checkboxList"
          :placeholder="$tc('ManyChoose')"
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Min.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Min.vue
@@ -2,21 +2,21 @@
 <template>
  <el-form size="small">
    <el-form-item>
-      <el-radio v-model="radioValue" :label="1" size="small">
-        {{ $t('Min') }}，{{ $t('WildcardsAllowed') }}[, - * /]
+      <el-radio v-model="radioValue" :label="1" size="mini">
+        {{ this.$t('Min') }}，{{ this.$t('WildcardsAllowed') }}[, - * /]
      </el-radio>
    </el-form-item>
    <el-form-item>
      <el-radio v-model="radioValue" :label="3">
-        {{ $t('From') }}
-        <el-input-number v-model="average02" :max="59" :min="1" size="small" />
-        {{ $t('Min') }} {{ $t('ExecuteOnce') }}
+        {{ this.$t('From') }}
+        <el-input-number v-model="average02" :max="59" :min="1" size="mini" />
+        {{ this.$t('Min') }} {{ this.$t('ExecuteOnce') }}
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="4">
-        {{ $t('Appoint') }}
+        {{ this.$t('Appoint') }}
        <el-select
          v-model="checkboxList"
          :placeholder="$tc('ManyChoose')"
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Month.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Month.vue
@@ -3,28 +3,28 @@
  <el-form size="small">
    <el-form-item>
      <el-radio v-model="radioValue" :label="1">
-        {{ $t('Month') }}，{{ $t('WildcardsAllowed') }}[, - * /]
+        {{ this.$t('Month') }}，{{ this.$t('WildcardsAllowed') }}[, - * /]
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="2">
-        {{ $t('From') }}
-        <el-input-number v-model="cycle01" :max="12" :min="1" size="small" /> -
-        <el-input-number v-model="cycle02" :max="12" :min="1" size="small" /> {{ $t('Month') }}
+        {{ this.$t('From') }}
+        <el-input-number v-model="cycle01" :max="12" :min="1" size="mini" /> -
+        <el-input-number v-model="cycle02" :max="12" :min="1" size="mini" /> {{ this.$t('Month') }}
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="3">
-        {{ $t('Every') }}
-        <el-input-number v-model="average02" :max="12" :min="1" size="small" /> {{ $t('Month') }} {{ $t('ExecuteOnce') }}
+        {{ this.$t('Every') }}
+        <el-input-number v-model="average02" :max="12" :min="1" size="mini" /> {{ this.$t('Month') }} {{ this.$t('ExecuteOnce') }}
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="4">
-        {{ $t('Appoint') }}
+        {{ this.$t('Appoint') }}
        <el-select
          v-model="checkboxList"
          :placeholder="$tc('ManyChoose')"
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Result.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Result.vue
@@ -1,12 +1,12 @@
 /* eslint-disable */
 <template>
  <div class="popup-result-time">
-    <p class="title">{{ $t('RunningTimes') }}</p>
+    <p class="title">{{ this.$t('RunningTimes') }}</p>
    <ul class="popup-result-scroll">
      <template v-if="isShow">
        <li v-for="item in resultList" :key="item">{{ item }}</li>
      </template>
-      <li v-else>{{ $t('CalculationResults') }}</li>
+      <li v-else>{{ this.$t('CalculationResults') }}</li>
    </ul>
  </div>
 </template>
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Week.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Week.vue
@@ -3,21 +3,21 @@
  <el-form size="small">
    <el-form-item>
      <el-radio v-model="radioValue" :label="1">
-        {{ $t('Week') }}，{{ $t('WildcardsAllowed') }}[, - * /]
+        {{ this.$t('Week') }}，{{ this.$t('WildcardsAllowed') }}[, - * /]
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="3">
-        {{ $t('CycleFromWeek') }}
-        <el-input-number v-model="cycle01" :max="7" :min="1" size="small" /> -
-        <el-input-number v-model="cycle02" :max="7" :min="1" size="small" />
+        {{ this.$t('CycleFromWeek') }}
+        <el-input-number v-model="cycle01" :max="7" :min="1" size="mini" /> -
+        <el-input-number v-model="cycle02" :max="7" :min="1" size="mini" />
      </el-radio>
    </el-form-item>

    <el-form-item>
      <el-radio v-model="radioValue" :label="6">
-        {{ $t('Appoint') }}
+        {{ this.$t('Appoint') }}
        <el-select
          v-model="checkboxList"
          :placeholder="$tc('ManyChoose')"
--- a/src/components/Form/FormFields/CronTab/index.vue
+++ b/src/components/Form/FormFields/CronTab/index.vue
@@ -4,9 +4,9 @@
      <el-input v-model="input" clearable @clear="onClear" @focus="showDialog" />
    </div>
    <Dialog
-      v-model:visible="showCron"
      :show-buttons="false"
      :title="$tc('NewCron')"
+      :visible.sync="showCron"
      append-to-body
      top="8vh"
      width="650px"
--- a/src/components/Form/FormFields/DatetimeRangePicker.vue
+++ b/src/components/Form/FormFields/DatetimeRangePicker.vue
@@ -102,7 +102,7 @@ export default {

 <style lang='scss' scoped>
 html:lang(pt-br) {
-  .datepicker :deep(.el-range-separator) {
+  .datepicker ::v-deep .el-range-separator {
    padding: 0 10px;
  }
 }
@@ -117,17 +117,17 @@ html:lang(pt-br) {
  border-radius: 2px;
  height: 28px;

-  :deep(.el-range-separator),
-  :deep(.el-input__icon) {
+  ::v-deep .el-range-separator,
+  ::v-deep .el-input__icon {
    line-height: 26px;
    color: var(--color-icon-primary) !important;
  }

-  :deep(.el-range-input) {
+  ::v-deep .el-range-input {
    color: var(--color-text-primary) !important;
  }

-  :deep(.el-range-input) {
+  ::v-deep .el-range-input {
    width: 49%;
  }
 }
--- a/src/components/Form/FormFields/DynamicInput.vue
+++ b/src/components/Form/FormFields/DynamicInput.vue
@@ -1,28 +1,23 @@
 <template>
  <div>
-    <div
-      v-for="(command, index) in iValue"
-      :key="index"
-      :prop="'iValue.' + index + '.value'"
-      class="command-item"
-    >
-      <el-input v-model="iValue[index]" size="small">
+    <div v-for="(command, index) in iValue" :key="index" :prop="'iValue.' + index + '.value'" class="command-item">
+      <el-input v-model="iValue[index]" size="mini">
        <template slot="prepend"> {{ inputTitle + ' ' + (index + 1) }}</template>
      </el-input>
      <div class="input-button">
        <el-button
          :disabled="deleteDisabled()"
          icon="el-icon-minus"
-          size="small"
-          style="flex-shrink: 0"
+          size="mini"
+          style="flex-shrink: 0;"
          type="danger"
          @click="handleDelete(command)"
        />
        <el-button
          v-if="index === iValue.length - 1"
          icon="el-icon-plus"
-          size="small"
-          style="flex-shrink: 0"
+          size="mini"
+          style="flex-shrink: 0;"
          type="primary"
          @click="handleAdd()"
        />
@@ -32,6 +27,7 @@
 </template>

 <script>
+
 export default {
  props: {
    value: {
@@ -86,9 +82,9 @@ export default {
 .input-button {
  margin-top: 2px;
  display: flex;
-  margin-left: 20px;
+  margin-left: 20px
 }
-.input-button :deep(.el-button.el-button--small) {
+.input-button ::v-deep .el-button.el-button--mini {
  height: 25px;
  padding: 5px;
 }
--- a/src/components/Form/FormFields/InputWithUnit.vue
+++ b/src/components/Form/FormFields/InputWithUnit.vue
@@ -37,7 +37,7 @@ export default {

 <style scoped>

-:deep(.el-input-group__append) {
+::v-deep .el-input-group__append {
  color: inherit;
  padding: 0 15px;
 }
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Jiangjie Bai	f7830e9b85	Merge pull request #5239 from jumpserver/dev v4.10.10	2025-10-16 17:29:18 +08:00
Bryan	16a92d10bc	Merge pull request #5212 from jumpserver/dev v4.10.8-lts	2025-09-18 16:49:05 +08:00
Bryan	7b568ec84f	1	2025-08-21 18:59:54 +08:00
Bryan	73d6bda8c3	Merge pull request #5092 from jumpserver/dev merge: v4.10.4-lts	2025-07-17 15:04:47 +08:00
Bryan	3934b45367	Merge pull request #5064 from jumpserver/dev v4.10.2	2025-06-19 20:13:12 +08:00
Bryan	0c5e84d1e3	Merge pull request #5010 from jumpserver/dev v4.10.0	2025-05-15 17:12:07 +08:00
Bryan	18a3f42717	Merge pull request #4972 from jumpserver/dev v4.9.0	2025-04-17 20:18:08 +08:00
Bryan	68030d98b2	Merge pull request #4890 from jumpserver/dev v4.8.0	2025-03-20 18:44:31 +08:00
Bryan	a861f77609	Merge pull request #4659 from jumpserver/dev v4.7.0	2025-02-20 10:20:32 +08:00
Bryan	e58ec6057c	Merge pull request #4600 from jumpserver/dev v4.6.0	2025-01-15 14:39:21 +08:00
Bryan	7ab20c5885	Merge pull request #4537 from jumpserver/dev v4.5.0	2024-12-19 15:57:44 +08:00
Bryan	e47ddb5355	Merge pull request #4451 from jumpserver/dev v4.4.0	2024-11-21 19:01:11 +08:00
Bryan	56aa3caa83	Merge pull request #4410 from jumpserver/dev v4.3.0	2024-10-17 14:56:18 +08:00
Bryan	19b1dc0dbc	Merge pull request #4367 from jumpserver/dev merge: from dev to master	2024-09-19 19:36:42 +08:00
Bryan	77ef172a23	Merge pull request #4320 from jumpserver/dev v4.1.0	2024-08-15 21:42:42 +08:00
Bryan	4596887bf1	Merge pull request #4178 from jumpserver/dev v4.0.0	2024-07-03 19:06:07 +08:00
Bryan	0a3dc30c85	Merge pull request #4072 from jumpserver/dev v3.10.11-lts	2024-06-19 16:04:12 +08:00
Bryan	51d24bc8e5	Merge pull request #3941 from jumpserver/dev v3.10.10-lts	2024-05-16 16:05:04 +08:00
Bryan	1b15a4d043	Merge pull request #3871 from jumpserver/dev v3.10.9 (dev to master)	2024-04-22 19:44:33 +08:00
Bryan	7d3f818242	Merge pull request #3864 from jumpserver/v3.10 v3.10.8	2024-04-18 17:58:05 +08:00
Bryan	4e26f18d77	Merge pull request #3862 from jumpserver/dev v3.10.8	2024-04-18 17:17:36 +08:00
Bryan	b22613617a	Revert "build(deps): bump follow-redirects from 1.15.3 to 1.15.4" This reverts commit `e971cbf4a8`.	2024-03-27 16:16:07 +08:00
dependabot[bot]	e971cbf4a8	build(deps): bump follow-redirects from 1.15.3 to 1.15.4 Bumps [follow-redirects](https://github.com/follow-redirects/follow-redirects) from 1.15.3 to 1.15.4. - [Release notes](https://github.com/follow-redirects/follow-redirects/releases) - [Commits](https://github.com/follow-redirects/follow-redirects/compare/v1.15.3...v1.15.4) --- updated-dependencies: - dependency-name: follow-redirects dependency-type: indirect ... Signed-off-by: dependabot[bot] <support@github.com>	2024-03-27 16:11:26 +08:00
wangruidong	4672abae35	fix: 刷新页面根据搜索条件过滤出对应的资源	2024-03-04 19:17:05 +08:00
Bryan	ba36d72602	Merge pull request #3761 from jumpserver/master v3.10.4 (branch-v3.10)	2024-02-29 16:26:13 +08:00
Bryan	4bfbbba4c5	Merge pull request #3760 from jumpserver/dev v3.10.4	2024-02-29 16:15:33 +08:00
Bryan	ea038ce43a	Merge pull request #3697 from jumpserver/master v3.10.2	2024-01-17 13:34:12 +00:00
Bryan	e16b19666c	Merge pull request #3696 from jumpserver/dev v3.10.2	2024-01-17 13:33:22 +00:00
Bryan	c7f5409eb6	Merge pull request #3694 from jumpserver/master v3.10.2	2024-01-17 07:35:33 -04:00
Bryan	fdbd7d2222	Merge pull request #3693 from jumpserver/dev v3.10.2	2024-01-17 07:24:50 -04:00
Bryan	ddbaeeafea	Merge pull request #3668 from jumpserver/master v3.10.1	2023-12-29 11:34:04 +05:00
Bryan	efb0e9dacb	Merge pull request #3665 from jumpserver/dev v3.10.1	2023-12-29 11:14:54 +05:00
huailei	f6f8301ad5	Revert "perf: 账号收集翻译" This reverts commit `9a63ae63d4`.	2023-12-22 15:25:31 +08:00
“huailei000”	9a63ae63d4	perf: 账号收集翻译	2023-12-22 11:31:45 +08:00
Bryan	1e007ccda3	Merge pull request #3642 from jumpserver/dev v3.10	2023-12-21 15:15:52 +05:00
老广	d1d0b06b53	Merge pull request #3546 from jumpserver/dev v3.9.0	2023-11-16 18:25:10 +08:00
Bryan	5fb70d2f24	Merge pull request #3450 from jumpserver/dev v3.8.0	2023-10-19 03:33:53 -05:00
Bryan	b54a95430f	Merge pull request #3404 from jumpserver/dev v3.7.0	2023-09-21 17:04:42 +08:00
Bryan	4d8b4c45af	Merge pull request #3355 from jumpserver/dev v3.6.0	2023-08-17 14:00:33 +05:00
Bryan	a6d642df60	Merge pull request #3283 from jumpserver/dev v3.5.0	2023-07-20 19:04:29 +08:00
Jiangjie.Bai	2e74f1522f	Merge pull request #3222 from jumpserver/dev v3.4.0	2023-06-15 14:51:36 +08:00
Jiangjie.Bai	fe615e0314	Merge pull request #3219 from jumpserver/dev v3.4.0	2023-06-15 14:17:46 +08:00
Jiangjie.Bai	09f734e6fc	Merge pull request #3135 from jumpserver/dev v3.3.0	2023-05-18 19:18:11 +08:00
Jiangjie.Bai	3117046342	Merge pull request #3061 from jumpserver/dev v3.2.0	2023-04-20 18:40:08 +08:00
Bai	b68aecb5cc	fix: 批量更新资产平台help-text	2023-04-20 18:39:22 +08:00
Jiangjie.Bai	1c9b155d97	Merge pull request #3057 from jumpserver/dev v3.2.0	2023-04-20 18:22:46 +08:00
Jiangjie.Bai	75b1be9864	Merge pull request #3019 from jumpserver/dev v3.2.0 rc2	2023-04-14 19:01:37 +08:00
Jiangjie.Bai	615c3c1cf4	Merge pull request #3014 from jumpserver/dev v3.2.0 rc1	2023-04-13 20:02:38 +08:00
Jiangjie.Bai	4d82231af4	Merge pull request #3012 from jumpserver/dev v3.2.0 rc1	2023-04-13 19:22:38 +08:00
“huailei000”	c6cf6571b6	perf: ldap导入用户列表-组织下拉框设置最大宽度	2023-03-16 16:44:36 +08:00
Bai	8ea990d070	fix: 修复创建资产添加账号模版报错问题	2023-03-16 16:44:36 +08:00
“huailei000”	f4a32170d5	perf: message	2023-03-16 16:44:36 +08:00
ibuler	073508675e	perf: 添加默认的信息	2023-03-16 16:44:36 +08:00
Jiangjie.Bai	1d6ca0a93a	Merge pull request #2924 from jumpserver/dev v3.1.0 rc4	2023-03-15 19:46:31 +08:00
Jiangjie.Bai	36aea652d6	Merge pull request #2788 from jumpserver/dev v3.0.0	2023-02-23 20:16:41 +08:00
Jiangjie.Bai	1a42ce90ab	Merge pull request #2760 from jumpserver/dev v3.0.0-rc-latest	2023-02-22 22:21:54 +08:00
Jiangjie.Bai	31a401b55d	Merge pull request #2463 from jumpserver/dev v3.0.0-rc4	2023-01-31 18:55:34 +08:00
Jiangjie.Bai	582a84178d	Merge pull request #2187 from jumpserver/dev v2.28.0	2022-11-17 17:44:19 +08:00
Jiangjie.Bai	9b9f7c936c	Merge pull request #2184 from jumpserver/dev v2.28.0-rc5	2022-11-17 14:18:15 +08:00
Jiangjie.Bai	2a6100957f	Merge pull request #2182 from jumpserver/dev v2.28.0-rc4	2022-11-16 21:08:55 +08:00
Jiangjie.Bai	16606d6a27	Merge pull request #2176 from jumpserver/dev v2.28.0-rc2	2022-11-14 10:01:05 +08:00
Jiangjie.Bai	0a612f50e6	Merge pull request #2164 from jumpserver/dev v2.28.0-rc1	2022-11-10 17:45:47 +08:00
Jiangjie.Bai	fe36fa9390	Merge pull request #2117 from jumpserver/dev v2.27.0-rc4	2022-10-18 21:02:10 +08:00
Jiangjie.Bai	ba109900ec	Merge pull request #2113 from jumpserver/dev v2.27.0-rc3	2022-10-18 11:20:57 +08:00
Jiangjie.Bai	ec7768267f	Merge pull request #2105 from jumpserver/dev v2.27.0-rc2	2022-10-14 11:01:32 +08:00
Jiangjie.Bai	cc58b374ab	Merge pull request #2101 from jumpserver/dev v2.27.0-rc1	2022-10-13 17:44:53 +08:00
Jiangjie.Bai	04ffbb8fd6	Merge pull request #2097 from jumpserver/dev v2.27.0-rc1	2022-10-13 15:14:40 +08:00
Jiangjie.Bai	49880f6739	Merge pull request #2059 from jumpserver/dev v2.26.0	2022-09-15 17:49:44 +08:00
Jiangjie.Bai	e6f98d58c4	Merge pull request #2057 from jumpserver/dev v2.26.0-rc4	2022-09-15 16:18:03 +08:00
Jiangjie.Bai	fd1f16d43c	Merge pull request #2050 from jumpserver/dev v2.26.0-rc2	2022-09-13 17:41:39 +08:00
Jiangjie.Bai	968b2415b1	Merge pull request #2043 from jumpserver/dev v2.26.0-rc1	2022-09-08 15:46:44 +08:00
Jiangjie.Bai	776090d6ba	Merge pull request #2001 from jumpserver/dev v2.25.0	2022-08-18 16:12:45 +08:00
Jiangjie.Bai	3a37952288	Merge pull request #1996 from jumpserver/dev v2.25.0-rc4	2022-08-17 16:53:23 +08:00
Jiangjie.Bai	62b8fc0e3b	Merge pull request #1994 from jumpserver/dev v2.25.0-rc3	2022-08-16 19:08:23 +08:00
Jiangjie.Bai	b2028869cb	Merge pull request #1986 from jumpserver/dev v2.25.0-rc2	2022-08-12 18:06:56 +08:00
Jiangjie.Bai	5277a725f8	Merge pull request #1973 from jumpserver/dev v2.25.0-rc1	2022-08-11 14:11:59 +08:00
Jiangjie.Bai	f137788c1a	Merge pull request #1957 from jumpserver/dev v2.24.0-rc5	2022-07-20 19:06:03 +08:00
Jiangjie.Bai	f7d17c8de7	Merge pull request #1954 from jumpserver/dev v2.24.0-rc4	2022-07-19 16:18:13 +08:00
Jiangjie.Bai	feea70b0be	Merge pull request #1944 from jumpserver/dev v2.24.0-rc3	2022-07-18 12:05:42 +08:00
Jiangjie.Bai	04696ef3d6	Merge pull request #1940 from jumpserver/dev v2.24.0-rc2	2022-07-15 18:07:37 +08:00
Jiangjie.Bai	1731f4f788	Merge pull request #1934 from jumpserver/dev v2.24.0-rc1	2022-07-14 18:27:51 +08:00
Jiangjie.Bai	6f25d93909	Merge pull request #1931 from jumpserver/dev v2.24.0-rc1	2022-07-14 17:51:58 +08:00
Jiangjie.Bai	46461ec324	Merge pull request #1925 from jumpserver/dev v2.24.0-rc1	2022-07-14 15:12:15 +08:00