fix some slot errors

* perf: upgrade vue version

* perf: Update Dockerfile with new base image tag

---------

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

.eslintrc.js

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

.prettierignore

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

.prettierrc.js

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

.yarnrc

@@ -0,0 +1,3 @@
+cache-folder ".yarn-cache"
+global-folder ".yarn-global"
+prefix ".yarn-global"

Dockerfile

@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20240723_084702 AS stage-build
+FROM jumpserver/lina-base:20251204_081759 AS stage-build
 
 ARG VERSION
 ENV VERSION=$VERSION

PRETTIER.md

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

babel.config.js

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

jest.config.js

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

mock/index.js

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

package.json

@@ -2,10 +2,10 @@
   "name": "lina",
   "version": "v4.0.0",
   "description": "JumpServer Web UI",
-  "author": "JumpServer Team <support@fit2cloud.com>",
+  "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,124 +21,127 @@
     "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"
+    "apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja zh_Hant",
+    "prepare": "husky install || true"
   },
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
-    "@fontsource/open-sans": "^5.0.24",
+    "@fontsource/open-sans": "^5.2.7",
+    "@kangc/v-md-editor": "^1.7.12",
     "@traptitech/markdown-it-katex": "^3.6.0",
-    "@ztree/ztree_v3": "3.5.44",
-    "axios": "0.28.0",
-    "axios-retry": "^3.1.9",
+    "@vue/compat": "^3.4.27",
+    "@ztree/ztree_v3": "3.5.48",
+    "axios": "^1.7.9",
+    "axios-retry": "^4.5.0",
+    "babel-loader": "^10.0.0",
+    "babel-runtime": "^6.26.0",
     "caniuse-lite": "^1.0.30001642",
-    "cron-parser": "^4.0.0",
-    "crypto-js": "^4.1.1",
+    "core-js": "^3.47.0",
+    "cron-parser": "^4.9.0",
+    "crypto-js": "^4.2.0",
     "css-color-function": "^1.3.3",
-    "decimal.js": "^10.4.3",
-    "deepmerge": "^4.2.2",
-    "dompurify": "^3.1.6",
-    "echarts": "4.7.0",
-    "element-ui": "2.15.14",
+    "decimal.js": "^10.6.0",
+    "deepmerge": "^4.3.1",
+    "dompurify": "^3.3.1",
+    "echarts": "^5.5.0",
+    "element-plus": "^2.8.4",
     "eslint-plugin-html": "^6.0.0",
-    "highlight.js": "^11.9.0",
+    "highlight.js": "^11.11.1",
     "install": "^0.13.0",
-    "jquery": "^3.6.1",
-    "js-cookie": "2.2.0",
-    "jsencrypt": "^3.2.1",
+    "jquery": "^3.7.1",
+    "js-cookie": "^3.0.5",
+    "jsencrypt": "^3.5.4",
     "less": "^3.10.3",
-    "less-loader": "^5.0.0",
     "lodash": "^4.17.21",
-    "lodash.clonedeep": "^4.5.0",
-    "lodash.frompairs": "^4.0.1",
-    "lodash.get": "^4.4.2",
-    "lodash.has": "^4.5.2",
-    "lodash.includes": "^4.3.0",
-    "lodash.isempty": "^4.4.0",
-    "lodash.isequal": "^4.5.0",
-    "lodash.isplainobject": "^4.0.6",
-    "lodash.set": "^4.3.2",
-    "lodash.topairs": "^4.3.0",
-    "lodash.values": "^4.3.0",
     "markdown-it": "^13.0.2",
     "markdown-it-link-attributes": "^4.0.1",
-    "moment": "^2.29.4",
+    "mitt": "^3.0.1",
+    "moment": "^2.30.1",
     "moment-parseformat": "^4.0.0",
-    "normalize.css": "7.0.0",
-    "npm": "^7.8.0",
-    "nprogress": "0.2.0",
+    "normalize.css": "^8.0.1",
+    "nprogress": "^0.2.0",
+    "path-browserify": "^1.0.1",
     "path-to-regexp": "3.3.0",
-    "v-sanitize": "^0.0.13",
-    "vue": "2.6.10",
+    "socket.io-client": "^4.8.2",
+    "sortablejs": "^1.15.6",
+    "uuid": "^10.0.0",
+    "v-sanitize": "^0.0.14",
+    "vue": "^3.4.27",
     "vue-codemirror": "4.0.6",
-    "vue-cookie": "^1.1.4",
-    "vue-echarts": "^5.0.0-beta.0",
-    "vue-i18n": "^8.15.5",
+    "vue-cookie-next": "^1.0.0",
+    "vue-echarts": "^8.0.1",
+    "vue-i18n": "^9.9.0",
     "vue-json-editor": "^1.4.3",
     "vue-markdown": "^2.2.4",
-    "vue-moment": "^4.1.0",
     "vue-password-strength-meter": "^1.7.2",
-    "vue-router": "3.0.6",
-    "vue-select": "^3.9.5",
+    "vue-router": "^4.3.0",
+    "vue-select": "^3.20.4",
     "vuejs-logger": "^1.5.4",
-    "vuex": "3.1.0",
-    "xss": "^1.0.14",
+    "vuex": "^4.1.0",
+    "watermark-js-plus": "^1.6.3",
+    "xss": "^1.0.15",
     "xterm": "^4.5.0",
     "xterm-addon-fit": "^0.3.0",
     "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
-    "@babel/core": "7.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",
-    "@vue/runtime-dom": "3.5.13",
-    "autoprefixer": "^9.5.1",
-    "babel-core": "7.0.0-bridge.0",
-    "babel-eslint": "10.0.1",
-    "babel-jest": "23.6.0",
-    "chalk": "2.4.2",
-    "compression-webpack-plugin": "^6.1.1",
-    "connect": "3.6.6",
-    "deasync": "^0.1.29",
-    "element-theme-chalk": "^2.13.1",
-    "eslint": "^5.15.3",
-    "eslint-plugin-vue": "5.2.2",
+    "@babel/core": "^7.28.5",
+    "@babel/eslint-parser": "^7.24.7",
+    "@babel/register": "^7.28.3",
+    "@vue/babel-plugin-jsx": "^1.2.2",
+    "@vue/cli-plugin-babel": "^5.0.8",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-unit-jest": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/compiler-sfc": "^3.4.27",
+    "@vue/test-utils": "^2.4.2",
+    "@vue/vue3-jest": "^29.2.4",
+    "autoprefixer": "^10.4.20",
+    "babel-jest": "^30.2.0",
+    "balanced-match": "^3.0.1",
+    "chalk": "^5.6.2",
+    "color-name": "^2.1.0",
+    "compression-webpack-plugin": "^11.1.0",
+    "connect": "^3.7.0",
+    "deasync": "^0.1.31",
+    "entities": "^7.0.0",
+    "eslint": "^8.57.1",
+    "eslint-config-prettier": "^9.1.2",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-spellcheck": "^0.0.20",
+    "eslint-plugin-vue": "^9.33.0",
     "eslint-plugin-vue-i18n": "^0.3.0",
-    "github-markdown-css": "^5.1.0",
-    "html-webpack-plugin": "3.2.0",
-    "husky": "^4.2.3",
-    "less-loader": "^5.0.0",
-    "lint-staged": "^10.1.2",
-    "mockjs": "1.0.1-beta3",
-    "runjs": "^4.3.2",
-    "sass": "~1.32.6",
-    "sass-loader": "^7.1.0",
-    "script-ext-html-webpack-plugin": "2.1.3",
+    "github-markdown-css": "^5.8.1",
+    "html-webpack-plugin": "^5.5.3",
+    "husky": "^9.1.7",
+    "less-loader": "^11.1.4",
+    "lint-staged": "^16.2.7",
+    "mockjs": "^1.1.0",
+    "prettier": "^3.7.4",
+    "pretty-bytes": "^7.1.0",
+    "runjs": "^4.4.1",
+    "sass": "^1.83.0",
+    "sass-loader": "^16.0.6",
     "script-loader": "0.7.2",
-    "serve-static": "^1.16.0",
-    "strip-ansi": "^7.1.0",
-    "svg-sprite-loader": "4.1.3",
-    "svgo": "1.2.4",
-    "vue-i18n-extract": "^1.1.1",
-    "vue-template-compiler": "2.6.10"
+    "semver": "^7.7.3",
+    "serve-static": "^1.16.3",
+    "strip-ansi": "^7.1.2",
+    "svg-sprite-loader": "^6.0.11",
+    "svgo": "^4.0.0",
+    "vue-eslint-parser": "^10.2.0",
+    "vue-i18n-extract": "^2.0.7",
+    "vue-loader": "^17.0.0",
+    "webpack": "^5.104.1"
   },
   "engines": {
-    "node": ">=8.9",
+    "node": ">=16",
     "npm": ">= 3.0.0"
   },
   "browserslist": [
     "> 1%",
     "last 4 versions",
-    "ie 11"
+    "not ie <= 11"
   ],
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
   "lint-staged": {
     "src/**/*.{js,vue}": [
       "eslint --fix"

public/index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="utf-8">
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <meta content="0" http-equiv="Expires">
@@ -9,7 +9,6 @@
     <meta content="no-cache" http-equiv="Cache">
     <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <title><%= webpackConfig.name %></title>
-    <link href="<%= BASE_URL %>theme/element-ui.css" rel="stylesheet">
     <style>
         #loading {
             position: fixed;
@@ -20,52 +19,71 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            background-color: white;
+            background-color: rgba(255, 255, 255, 0.98);
             z-index: 9999;
         }
 
-        .spinner {
-            width: 50px;
-            height: 50px;
-            border: 5px solid rgba(0, 0, 0, 0.1);
+        #loading .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid transparent;
+            border-top-color: var(--color-primary);
             border-radius: 50%;
-            border-top-color: #3498db;
-            animation: spin 1s infinite linear;
+            animation: spin 1s linear infinite;
+        }
+
+        #loading .spinner::after {
+            content: '';
+            position: absolute;
+            top: -3px;
+            left: -3px;
+            width: 40px;
+            height: 40px;
+            border: 3px solid transparent;
+            border-top-color: rgba(64, 158, 255, 0.2);
+            border-radius: 50%;
+            animation: spin 2s linear infinite;
         }
 
         @keyframes spin {
-            to {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
                 transform: rotate(360deg);
             }
         }
     </style>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <script>
-      window.onload = function () {
-          if (location.pathname === '/') {
-              location.pathname = '/ui/'
-          }
-          const pathname = window.location.pathname
-          if (pathname.startsWith('/core')) {
-              return
-          }
-          if (pathname.indexOf('/ui') === -1) {
-              window.location.href = window.location.origin + '/ui/#' + pathname
-          }
-          if (pathname.startsWith('/ui/#/chat')) {
-              window.location.href = window.location.origin + pathname
-          }
-      }
-    </script>
-    <div id="app">
-    </div>
-    <div id="loading">
-      <div class="spinner"></div>
-    </div>
-    <!-- built files will be auto injected -->
-  </body>
+</head>
+<body>
+<noscript>
+    <strong>
+        We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.
+    </strong>
+</noscript>
+<script>
+    window.onload = function () {
+        if (location.pathname === '/') {
+            location.pathname = '/ui/'
+        }
+        const pathname = window.location.pathname
+        if (pathname.startsWith('/core')) {
+            return
+        }
+        if (pathname.indexOf('/ui') === -1) {
+            window.location.href = window.location.origin + '/ui/#' + pathname
+        }
+        if (pathname.startsWith('/ui/#/chat')) {
+            window.location.href = window.location.origin + pathname
+        }
+    }
+</script>
+<div id="app">
+</div>
+<div id="loading">
+    <div class="spinner"></div>
+</div>
+<!-- built files will be auto injected -->
+</body>
 </html>

public/theme/element-extra.css

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

src/App.vue

@@ -1,18 +1,121 @@
 <template>
   <div id="app">
-    <router-view v-if="isRouterAlive" />
+    <!-- 使用 key 而不是 v-if 来强制重新渲染 router-view，避免根节点被完全卸载导致的 DOM insertBefore 错误 -->
+    <router-view :key="isRouterAlive" />
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
+import { Watermark } from 'watermark-js-plus'
 
 export default {
   name: 'App',
+  data() {
+    return {
+      watermark: null
+    }
+  },
   computed: {
     ...mapState({
       isRouterAlive: state => state.common.isRouterAlive
+    }),
+    ...mapGetters({
+      currentUser: 'currentUser',
+      publicSettings: 'publicSettings'
     })
+  },
+  watch: {
+    currentUser: {
+      handler(newVal) {
+        this.createWatermark()
+      }
+    },
+    'publicSettings.SECURITY_WATERMARK_ENABLED': {
+      handler(newVal) {
+        if (!newVal) {
+          return setTimeout(() => {
+            this.watermark?.destroy()
+            this.watermark = null
+          })
+        }
+
+        this.createWatermark()
+      }
+    }
+  },
+  // 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
+      const userId = user?.id || ''
+      const name = user?.name || ''
+      const userName = user?.username || ''
+      const currentTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+      return { userId, name, userName, currentTime }
+    },
+    getWaterMarkContent() {
+      const fields = this.getWaterMarkFields()
+      const template = this.publicSettings.SECURITY_WATERMARK_CONSOLE_CONTENT || ''
+
+      // 找出模板中所有的变量占位符 ${xxx}
+      const placeholders = template.match(/\${([^}]+)}/g) || []
+      const allVariables = {}
+
+      // 为模板中的每个变量准备值
+      placeholders.forEach(placeholder => {
+        const varName = placeholder.slice(2, -1) // 提取变量名，去掉 ${ 和 }
+        allVariables[varName] = fields[varName] !== undefined ? fields[varName] : 'N/A'
+      })
+
+      // 合并用户现有的字段和模板中可能缺失的字段
+      const safeFields = { ...fields, ...allVariables }
+
+      // 安全解析模板
+      return new Function(...Object.keys(safeFields), `return \`${template}\`;`)(
+        ...Object.values(safeFields)
+      )
+    },
+
+    createWatermark() {
+      if (this.currentUser?.username && this.publicSettings?.SECURITY_WATERMARK_ENABLED) {
+        this.watermark = new Watermark({
+          content: this.getWaterMarkContent(),
+          width: this.publicSettings?.SECURITY_WATERMARK_WIDTH,
+          height: this.publicSettings?.SECURITY_WATERMARK_HEIGHT,
+          rotate: this.publicSettings?.SECURITY_WATERMARK_ROTATE,
+          fontWeight: 'normal',
+          fontSize: this.publicSettings?.SECURITY_WATERMARK_FONT_SIZE + 'px',
+          fontColor: this.publicSettings?.SECURITY_WATERMARK_COLOR,
+          contentType: 'multi-line-text',
+          lineHeight: this.publicSettings?.SECURITY_WATERMARK_FONT_SIZE
+        })
+        this.watermark.create()
+      }
+    }
   }
 }
 </script>

src/api/asset.js

@@ -16,9 +16,9 @@ export function getSystemUserList(data) {
   })
 }
 
-export function getDomainList(data) {
+export function getZoneList(data) {
   return request({
-    url: '/api/v1/assets/domains/',
+    url: '/api/v1/assets/zones/',
     method: 'get',
     params: data
   })

src/api/ops.js

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

src/api/sessions.js

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

src/api/users.js

@@ -8,11 +8,20 @@ export function login(data) {
   })
 }
 
-export function getProfile(token) {
-  return request({
+export async function getProfile(token) {
+  let profile = await request({
     url: '/api/v1/users/profile/',
     method: 'get'
   })
+  const perms = await request({
+    url: '/api/v1/users/profile/permissions/',
+    method: 'get'
+  })
+  profile = {
+    ...profile,
+    ...perms
+  }
+  return profile
 }
 
 export function getUserList(data) {
@@ -22,6 +31,7 @@ export function getUserList(data) {
     params: data
   })
 }
+
 export function getUserGroupList(params) {
   return request({
     url: '/api/v1/users/groups/',
@@ -29,6 +39,7 @@ export function getUserGroupList(params) {
     params: params
   })
 }
+
 export function getUserGroupDetail(id) {
   return request({
     url: `/api/v1/users/groups/${id}/`,
@@ -50,6 +61,7 @@ export function editUserGroup(data) {
     data: data
   })
 }
+
 export function updateUserGroup(id, data) {
   return request({
     url: '/api/v1/users/groups/' + id + '/',

src/assets/img/cloud/proxmox.svg

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

src/assets/img/cloud/smartx.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1748326203303" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2853" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M10.24 605.184l839.168-481.28L1013.76 220.672v191.488L174.592 895.488 10.24 804.352z" fill="#0096FF" p-id="2854"></path><path d="M10.24 416.768V220.672l168.96-96.768 308.736 178.688-331.776 193.536zM541.184 717.312l331.264-195.072 141.312 88.064v194.048l-165.376 95.744z" fill="#25C764" p-id="2855"></path></svg>

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -1,25 +1,42 @@
 import { UpdateToken, UploadSecret } from '@/components/Form/FormFields'
 import Select2 from '@/components/Form/FormFields/Select2.vue'
+import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
 import { Required, RequiredChange } from '@/components/Form/DataForm/rules'
 import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSetting.vue'
 
 export const accountFieldsMeta = (vm) => {
   const defaultPrivilegedAccounts = ['root', 'administrator']
 
+  function onPrivilegedUser(value, updateForm) {
+    const maybePrivileged = defaultPrivilegedAccounts.includes(value)
+    if (maybePrivileged) {
+      updateForm({ privileged: true, secret_reset: false, push_now: false })
+    }
+  }
+
   return {
-    assets: {
+    nodes: {
       component: Select2,
-      label: vm.$t('Assets'),
-      rules: [Required],
+      label: vm.$t('Node'),
       el: {
-        multiple: true,
+        value: [],
         ajax: {
-          url: '/api/v1/assets/assets/',
+          url: '/api/v1/assets/nodes/',
           transformOption: (item) => {
-            return { label: item.name + '(' + item.address + ')', value: item.id }
+            return { label: item.full_value, value: item.id }
           }
         }
       },
+      hidden: () => {
+        return !vm.addTemplate
+      }
+    },
+    assets: {
+      component: AssetSelect,
+      label: vm.$t('Asset'),
+      el: {
+        multiple: false
+      },
       hidden: () => {
         return vm.platform || vm.asset
       }
@@ -31,7 +48,7 @@ export const accountFieldsMeta = (vm) => {
         get disabled() {
           return vm.isDisabled
         },
-        multiple: false,
+        multiple: vm.addTemplate,
         ajax: {
           url: '/api/v1/accounts/account-templates/',
           transformOption: (item) => {
@@ -70,11 +87,8 @@ export const accountFieldsMeta = (vm) => {
             if (!vm.account?.name) {
               updateForm({ username: value })
             }
-            const maybePrivileged = defaultPrivilegedAccounts.includes(value)
-            if (maybePrivileged) {
-              updateForm({ privileged: true })
-            }
           }
+          onPrivilegedUser(value, updateForm)
         }
       },
       hidden: () => {
@@ -92,10 +106,7 @@ export const accountFieldsMeta = (vm) => {
           vm.usernameChanged = true
         },
         change: ([value], updateForm) => {
-          const maybePrivileged = defaultPrivilegedAccounts.includes(value)
-          if (maybePrivileged) {
-            updateForm({ privileged: true })
-          }
+          onPrivilegedUser(value, updateForm)
         }
       },
       hidden: () => {
@@ -121,11 +132,6 @@ export const accountFieldsMeta = (vm) => {
       el: {
         multiple: false,
         clearable: true,
-        disabled: {
-          get disabled() {
-            return vm.isDisabled
-          }
-        },
         ajax: {
           url: `/api/v1/accounts/accounts/su-from-accounts/?account=${vm.account?.id || ''}&asset=${vm.asset?.id || ''}`,
           transformOption: (item) => {
@@ -239,6 +245,9 @@ export const accountFieldsMeta = (vm) => {
       el: {},
       hidden: (formValue) => {
         const automation = vm.iPlatform.automation || {}
+        if (!vm.iPlatform.automation) {
+          return true
+        }
         vm.fieldsMeta.params.el.method = vm.iPlatform.automation.push_account_method
         vm.fieldsMeta.params.el.pushAccountParams = vm.iPlatform.automation.push_account_params
         return !formValue.push_now ||

src/components/Apps/AccountCreateUpdateForm/index.vue

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

src/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue

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

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

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

src/components/Apps/AccountListTable/AccountList.vue

@@ -9,50 +9,61 @@
     />
     <ViewSecret
       v-if="showViewSecretDialog"
+      v-model:visible="showViewSecretDialog"
       :account="account"
       :url="secretUrl"
-      :visible.sync="showViewSecretDialog"
     />
     <UpdateSecretInfo
       v-if="showUpdateSecretDialog"
+      v-model:visible="showUpdateSecretDialog"
       :account="account"
-      :visible.sync="showUpdateSecretDialog"
-      @updateAuthDone="onUpdateAuthDone"
+      @update-auth-done="onUpdateAuthDone"
     />
     <AccountCreateUpdate
       v-if="showAddDialog"
+      v-model:visible="showAddDialog"
       :account="account"
       :add-template="addTemplate"
       :asset="iAsset"
       :title="accountCreateUpdateTitle"
-      :visible.sync="showAddDialog"
       @add="addAccountSuccess"
       @bulk-create-done="showBulkCreateResult($event)"
     />
     <ResultDialog
       v-if="showResultDialog"
+      v-model:visible="showResultDialog"
       :result="createAccountResults"
-      :visible.sync="showResultDialog"
       @close-all="closeAll"
     />
     <AccountBulkUpdateDialog
       v-if="updateSelectedDialogSetting.visible"
-      :visible.sync="updateSelectedDialogSetting.visible"
       v-bind="updateSelectedDialogSetting"
+      v-model:visible="updateSelectedDialogSetting.visible"
       @update="handleAccountBulkUpdate"
     />
     <PasswordHistoryDialog
       v-if="showPasswordHistoryDialog"
+      v-model:visible="showPasswordHistoryDialog"
       :account="currentAccountColumn"
-      :visible.sync="showPasswordHistoryDialog"
     />
   </div>
 </template>
 
 <script>
-import { accountOtherActions, accountQuickFilters, connectivityMeta } from './const'
-import { openTaskPage } from '@/utils/jms'
-import { ActionsFormatter, PlatformFormatter, SecretViewerFormatter, AccountConnectFormatter } from '@/components/Table/TableFormatters'
+import { mapGetters } from 'vuex'
+import {
+  accountOtherActions,
+  accountQuickFilters,
+  connectivityMeta,
+  isDirectoryServiceAccount
+} from './const'
+import { openTaskPage } from '@/utils/jms/index'
+import {
+  AccountConnectFormatter,
+  ActionsFormatter,
+  PlatformFormatter,
+  SecretViewerFormatter
+} from '@/components/Table/TableFormatters'
 import ViewSecret from './ViewSecret.vue'
 import UpdateSecretInfo from './UpdateSecretInfo.vue'
 import ResultDialog from './BulkCreateResultDialog.vue'
@@ -79,9 +90,7 @@ export default {
     },
     exportUrl: {
       type: String,
-      default() {
-        return this.url.replace('/accounts/accounts/', '/accounts/account-secrets/')
-      }
+      default: ''
     },
     hasLeftActions: {
       type: Boolean,
@@ -117,14 +126,11 @@ export default {
     },
     columnsMeta: {
       type: Object,
-      default: () => {
-      }
+      default: () => {}
     },
     columnsDefault: {
       type: Array,
-      default: () => ([
-        'name', 'username', 'secret', 'asset', 'platform', 'connect'
-      ])
+      default: () => ['name', 'username', 'secret', 'asset', 'platform', 'connect']
     },
     headerExtraActions: {
       type: Array,
@@ -137,12 +143,17 @@ export default {
     showQuickFilters: {
       type: Boolean,
       default: true
+    },
+    showActions: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
     const vm = this
     return {
       addTemplate: false,
+      isUpdateAccount: false,
       currentAccountColumn: {},
       showPasswordHistoryDialog: false,
       showViewSecretDialog: false,
@@ -150,6 +161,8 @@ export default {
       showResultDialog: false,
       showAddDialog: false,
       showAddTemplateDialog: false,
+      iExportUrl:
+        this.exportUrl || this.url.replace('/accounts/accounts/', '/accounts/account-secrets/'),
       detailDrawer: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
       createAccountResults: [],
       iAsset: this.asset,
@@ -171,9 +184,21 @@ export default {
         },
         columnsMeta: {
           name: {
-            width: '120px',
+            minWidth: '60px',
             formatterArgs: {
               can: () => vm.$hasPerm('accounts.view_account'),
+              getRoute: ({ row }) => ({
+                name: 'AccountDetail',
+                params: { id: row.id }
+              }),
+              getTitle: ({ row }) => {
+                let title = row.name
+                if (row.ds && this.asset && this.asset.id !== row.asset.id) {
+                  const dsID = row.ds.id.split('-')[0]
+                  title = `${row.name}@${dsID}`
+                }
+                return title
+              },
               getDrawerTitle({ row }) {
                 return `${row.username}@${row.asset.name}`
               }
@@ -193,33 +218,45 @@ export default {
             width: '80px',
             formatter: AccountConnectFormatter,
             formatterArgs: {
-              buttonIcon: 'fa fa-desktop',
-              titleText: '可选协议',
-              url: '/api/v1/assets/assets/{id}',
-              connectUrlTemplate: (row) => `/luna/pam_connect/${row.id}/${row.username}/${row.asset.id}/${row.asset.name}/`,
-              setMapItem: (id, protocol) => {
-                this.$store.commit('table/SET_PROTOCOL_MAP_ITEM', {
-                  key: id,
-                  value: protocol
-                })
+              asset: this.asset,
+              can: ({ row }) => {
+                return this.currentUserIsSuperAdmin
+              }
+            }
+          },
+          ds: {
+            width: '100px',
+            formatter: row => {
+              if (row.ds && row.ds['domain_name']) {
+                return row.ds['domain_name']
+              } else {
+                return ''
               }
             }
           },
           platform: {
             label: this.$t('Platform'),
-            width: '120px',
+            width: '150px',
             formatter: PlatformFormatter,
             formatterArgs: {
               platformAttr: 'asset.platform'
             }
           },
           asset: {
+            minWidth: '100px',
             formatter: function(row) {
               return row.asset.name
             }
           },
           username: {
-            width: '120px'
+            minWidth: '60px',
+            formatter: function(row) {
+              if (row.ds && row.ds['domain_name']) {
+                return `${row.username}@${row.ds['domain_name']}`
+              } else {
+                return row.username
+              }
+            }
           },
           secret_type: {
             formatter: function(row) {
@@ -247,11 +284,18 @@ export default {
           connectivity: connectivityMeta,
           actions: {
             formatter: ActionsFormatter,
+            has: this.showActions,
             formatterArgs: {
+              performDelete: ({ row }) => {
+                const id = row.id
+                const url = `/api/v1/accounts/accounts/${id}/`
+                return this.$axios.delete(url)
+              },
               hasUpdate: false, // can set function(row, value)
               hasDelete: true, // can set function(row, value)
               hasClone: false,
-              canDelete: () => vm.$hasPerm('accounts.delete_account'),
+              canDelete: ({ row }) =>
+                vm.$hasPerm('accounts.delete_account') && !isDirectoryServiceAccount(row, this),
               moreActionsTitle: this.$t('More'),
               extraActions: accountOtherActions(this)
             }
@@ -282,16 +326,15 @@ export default {
             type: 'primary',
             icon: 'plus',
             can: () => {
-              return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
+              return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
             },
-            callback: async() => {
-              await this.getAssetDetail()
+            callback: () => {
               setTimeout(() => {
                 vm.iAsset = this.asset
                 vm.account = {}
-                vm.addTemplate = false
-                vm.showAddDialog = true
-              })
+                this.addTemplate = false
+                this.showAddDialog = true
+              }, 200)
             }
           },
           {
@@ -299,9 +342,9 @@ export default {
             title: this.$t('TemplateAdd'),
             has: !(this.platform || this.asset),
             can: () => {
-              return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
+              return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
             },
-            callback: async() => {
+            callback: async () => {
               await this.getAssetDetail()
               setTimeout(() => {
                 vm.iAsset = this.asset
@@ -320,21 +363,27 @@ export default {
             type: 'primary',
             icon: 'verify',
             can: ({ selectedRows }) => {
-              return selectedRows.length > 0 &&
-                ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
-                !this.$store.getters.currentOrgIsRoot
+              return (
+                selectedRows.length > 0 &&
+                ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(
+                  selectedRows[0].asset.type.value
+                ) === -1 &&
+                !this.$store.getters.currentOrgIsRoot &&
+                vm.$hasPerm('accounts.verify_account')
+              )
             },
             callback: function({ selectedRows }) {
               const ids = selectedRows.map(v => {
                 return v.id
               })
-              this.$axios.post(
-                '/api/v1/accounts/accounts/tasks/',
-                { action: 'verify', accounts: ids }).then(res => {
-                openTaskPage(res['task'])
-              }).catch(err => {
-                this.$message.error(this.$tc('BulkVerifyErrorMsg' + ' ' + err))
-              })
+              this.$axios
+                .post('/api/v1/accounts/accounts/tasks/', { action: 'verify', accounts: ids })
+                .then(res => {
+                  openTaskPage(res['task'])
+                })
+                .catch(err => {
+                  this.$message.error(this.$tc('BulkVerifyErrorMsg' + ' ' + err))
+                })
             }.bind(this)
           },
           {
@@ -349,13 +398,14 @@ export default {
               const ids = selectedRows.map(v => {
                 return v.id
               })
-              this.$axios.patch(
-                '/api/v1/accounts/accounts/clear-secret/',
-                { account_ids: ids }).then(() => {
-                this.$message.success(this.$tc('ClearSuccessMsg'))
-              }).catch(err => {
-                this.$message.error(this.$tc('ClearErrorMsg' + ' ' + err))
-              })
+              this.$axios
+                .patch('/api/v1/accounts/accounts/clear-secret/', { account_ids: ids })
+                .then(() => {
+                  this.$message.success(this.$tc('ClearSuccessMsg'))
+                })
+                .catch(err => {
+                  this.$message.error(this.$tc('ClearErrorMsg' + ' ' + err))
+                })
             }.bind(this)
           },
           {
@@ -363,10 +413,12 @@ export default {
             title: this.$t('UpdateSelected'),
             icon: 'batch-update',
             can: ({ selectedRows }) => {
-              return selectedRows.length > 0 &&
+              return (
+                selectedRows.length > 0 &&
                 !this.$store.getters.currentOrgIsRoot &&
                 vm.$hasPerm('accounts.change_account') &&
                 selectedRows.every(i => i.secret_type.value === selectedRows[0].secret_type.value)
+              )
             },
             callback: ({ selectedRows }) => {
               vm.updateSelectedDialogSetting.selectedRows = selectedRows
@@ -388,9 +440,12 @@ export default {
     }
   },
   computed: {
+    ...mapGetters(['currentUserIsSuperAdmin']),
     accountCreateUpdateTitle() {
       if (this.addTemplate) {
         return this.$t('AddAccountByTemplate')
+      } else if (this.isUpdateAccount) {
+        return this.$t('UpdateAccount')
       } else {
         return this.$t('AddAccount')
       }
@@ -399,7 +454,11 @@ export default {
   watch: {
     url(iNew) {
       this.$set(this.tableConfig, 'url', iNew)
-      this.$set(this.headerActions.exportOptions, 'url', iNew.replace(/(.*)accounts/, '$1account-secrets'))
+      this.$set(
+        this.headerActions.exportOptions,
+        'url',
+        iNew.replace(/(.*)accounts/, '$1account-secrets')
+      )
     }
   },
   mounted() {
@@ -430,11 +489,14 @@ export default {
       Object.assign(this.account, account)
     },
     addAccountSuccess() {
-      Reflect.deleteProperty(this.$route.query, 'flag')
+      // Reflect.deleteProperty(this.$route.query, 'flag')
+      this.isUpdateAccount = false
       this.$refs.ListTable.reloadTable()
     },
     async getAssetDetail() {
-      const { query: { asset }} = this.$route
+      const {
+        query: { asset }
+      } = this.$route
       if (asset) {
         this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
       }

src/components/Apps/AccountListTable/BulkCreateResultDialog.vue

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

src/components/Apps/AccountListTable/PasswordHistoryDialog.vue

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

src/components/Apps/AccountListTable/RemoveAccount.vue

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

src/components/Apps/AccountListTable/UpdateSecretInfo.vue

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

src/components/Apps/AccountListTable/ViewSecret.vue

@@ -1,12 +1,12 @@
 <template>
   <div>
     <Dialog
+      v-bind="$attrs"
+      v-model:visible="showSecret"
       :destroy-on-close="true"
       :show-cancel="false"
-      :title="title"
-      :visible.sync="showSecret"
+      :title="iTitle"
       :width="'50'"
-      v-bind="$attrs"
       @confirm="accountConfirmHandle"
       v-on="$listeners"
     >
@@ -20,10 +20,12 @@
         <el-form-item :label="secretTypeLabel">
           <SecretViewerFormatter
             :cell-value="secretInfo.secret"
-            :col="{ formatterArgs: {
-              name: account['name'],
-              secretType: secretType || ''
-            }}"
+            :col="{
+              formatterArgs: {
+                name: account['name'],
+                secretType: secretType || ''
+              }
+            }"
             @input="onShowKeyCopyFormatterChange"
           />
         </el-form-item>
@@ -36,12 +38,12 @@
         <el-form-item :label="$tc('DateUpdated')">
           <span>{{ account['date_updated'] | date }}</span>
         </el-form-item>
-        <el-form-item v-if="showPasswordRecord" v-perms="'accounts.view_accountsecret'" :label="$tc('PasswordRecord')">
-          <el-link
-            :underline="false"
-            type="success"
-            @click="showHistoryDialog"
-          >
+        <el-form-item
+          v-if="showPasswordRecord"
+          v-perms="'accounts.view_accountsecret'"
+          :label="$tc('PasswordRecord')"
+        >
+          <el-link :underline="false" type="success" @click="showHistoryDialog">
             <span style="padding-right: 30px">
               {{ versions }}
             </span>
@@ -51,17 +53,17 @@
     </Dialog>
     <PasswordHistoryDialog
       v-if="showPasswordHistoryDialog"
+      v-model:visible="showPasswordHistoryDialog"
       :account="account"
-      :visible.sync="showPasswordHistoryDialog"
     />
   </div>
 </template>
 
-<script>
+<script lang="jsx">
 import Dialog from '@/components/Dialog/index.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
 import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 
 export default {
   name: 'ShowSecretInfo',
@@ -89,15 +91,14 @@ export default {
     },
     title: {
       type: String,
-      default: function() {
-        return this.$tc('Detail')
-      }
+      default: ''
     },
     showPasswordRecord: {
       type: Boolean,
       default: true
     }
   },
+  emits: ['update:visible'],
   data() {
     return {
       modifiedSecret: '',
@@ -107,6 +108,7 @@ export default {
       mfaDialogVisible: true,
       sshKeyFingerprint: '-',
       historyCount: 0,
+      iTitle: this.title || this.$tc('Detail'),
       showPasswordHistoryDialog: false
     }
   },
@@ -140,13 +142,14 @@ export default {
         name: this.secretInfo.name,
         secret: encryptPassword(this.modifiedSecret)
       }
-      const url = this.type === 'account' ? `/api/v1/accounts/accounts` : `/api/v1/accounts/account-templates`
+      const url =
+        this.type === 'account' ? `/api/v1/accounts/accounts` : `/api/v1/accounts/account-templates`
       this.$axios.patch(`${url}/${this.account.id}/`, params).then(() => {
         this.$message.success(this.$tc('UpdateSuccessMsg'))
       })
     },
     showSecretDialog() {
-      return this.$axios.get(this.url, { disableFlashErrorMsg: true }).then((res) => {
+      return this.$axios.get(this.url, { disableFlashErrorMsg: true }).then(res => {
         this.secretInfo = res
         this.sshKeyFingerprint = res?.spec_info?.ssh_key_fingerprint || '-'
         this.showSecret = true
@@ -167,54 +170,54 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .item-textarea ::v-deep .el-textarea__inner {
-    height: 110px;
+.item-textarea :deep(.el-textarea__inner) {
+  height: 110px;
+}
+
+.el-form-item {
+  border-bottom: 1px solid #ebeef5;
+  padding: 5px 0;
+  margin-bottom: 0;
+
+  &:last-child {
+    border-bottom: none;
   }
 
-  .el-form-item {
-    border-bottom: 1px solid #EBEEF5;
-    padding: 5px 0;
-    margin-bottom: 0;
-
-    &:last-child {
-      border-bottom: none;
-    }
-
-    ::v-deep .el-form-item__label {
-      display: flex;
-      align-items: center;
-      justify-content: flex-start;
-      padding-right: 20px;
-      line-height: 30px;
-      word-break: keep-all;
-      overflow-wrap: break-word;
-      white-space: normal;
-    }
-
-    ::v-deep .el-form-item__content {
-      line-height: 30px;
-
-      pre {
-        margin: 0;
-      }
-    }
+  :deep(.el-form-item__label) {
+    display: flex;
+    align-items: center;
+    justify-content: flex-start;
+    padding-right: 20px;
+    line-height: 30px;
+    word-break: keep-all;
+    overflow-wrap: break-word;
+    white-space: normal;
   }
 
-  ul {
-    margin: 0;
-  }
+  :deep(.el-form-item__content) {
+    line-height: 30px;
 
-  li {
-    display: block;
-    font-size: 13px;
-    margin-bottom: 8px;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-
-    .title {
-      color: #303133;
-      font-weight: 500;
+    pre {
+      margin: 0;
     }
   }
+}
+
+ul {
+  margin: 0;
+}
+
+li {
+  display: block;
+  font-size: 13px;
+  margin-bottom: 8px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+
+  .title {
+    color: #303133;
+    font-weight: 500;
+  }
+}
 </style>

src/components/Apps/AccountListTable/const.js

@@ -1,5 +1,5 @@
 import { ChoicesFormatter } from '@/components/Table/TableFormatters'
-import { openTaskPage } from '@/utils/jms'
+import { openTaskPage } from '@/utils/jms/index'
 
 export const connectivityMeta = {
   formatter: ChoicesFormatter,
@@ -7,11 +7,23 @@ export const connectivityMeta = {
     faChoices: {
       '-': '',
       ok: 'fa-check-circle',
-      err: 'fa-times-circle'
+      err: 'fa-times-circle',
+      auth_err: 'fa-times-circle',
+      rdp_err: 'fa-times-circle',
+      password_err: 'fa-times-circle',
+      openssh_key_err: 'fa-times-circle',
+      ntlm_err: 'fa-times-circle',
+      create_temp_err: 'fa-times-circle'
     },
     classChoices: {
       ok: 'text-primary',
-      err: 'text-danger'
+      err: 'text-danger',
+      auth_err: 'text-danger',
+      rdp_err: 'text-danger',
+      password_err: 'text-danger',
+      openssh_key_err: 'text-danger',
+      ntlm_err: 'text-danger',
+      create_temp_err: 'text-danger'
     },
     getText({ cellValue }) {
       if (cellValue?.value === '-' || cellValue?.value === 'unknown') {
@@ -24,152 +36,200 @@ export const connectivityMeta = {
   width: '130px'
 }
 
-export const accountOtherActions = (vm) => [
-  {
-    name: 'View',
-    title: vm.$t('View'),
-    can: vm.$hasPerm('accounts.view_accountsecret'),
-    type: 'primary',
-    order: 1,
-    callback: ({ row }) => {
-      // debugger
-      vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
-      vm.account = row
-      vm.showViewSecretDialog = false
-      setTimeout(() => {
-        vm.showViewSecretDialog = true
-      })
-    }
-  },
-  {
-    name: 'Update',
-    title: vm.$t('Edit'),
-    can: vm.$hasPerm('accounts.change_account') && !vm.$store.getters.currentOrgIsRoot,
-    callback: ({ row }) => {
-      const data = {
-        ...vm.asset,
-        ...row.asset
-      }
-      vm.account = row
-      vm.iAsset = data
-      vm.showAddDialog = false
-      vm.accountCreateUpdateTitle = vm.$t('UpdateAccount')
-      setTimeout(() => {
-        vm.showAddDialog = true
-      })
-    }
-  },
-  {
-    name: 'UpdateSecret',
-    title: vm.$t('EditSecret'),
-    can: vm.$hasPerm('accounts.change_account') && !vm.$store.getters.currentOrgIsRoot,
-    callback: ({ row }) => {
-      const data = {
-        ...vm.asset,
-        ...row.asset
-      }
-      vm.account = row
-      vm.iAsset = data
-      vm.showUpdateSecretDialog = false
-      vm.accountCreateUpdateTitle = vm.$t('UpdateAccount')
-      setTimeout(() => {
-        vm.showUpdateSecretDialog = true
-      })
-    }
-  },
-  {
-    name: 'Clone',
-    title: vm.$t('Duplicate'),
-    can: vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot,
-    callback: ({ row }) => {
-      vm.account = {
-        name: `${row.name} - ${vm.$t('Duplicate').toLowerCase()}`,
-        username: `${row.username} - ${vm.$t('Duplicate').toLowerCase()}`,
-        payload: 'pam_account_clone'
-      }
-      vm.iAsset = vm.asset
+export function isDirectoryServiceAccount(account, vm) {
+  return vm.asset && vm.asset.id !== account.asset.id
+}
 
-      vm.showAddDialog = false
-      setTimeout(() => {
-        vm.showAddDialog = true
-      })
-    }
-  },
-  {
-    name: 'Test',
-    title: vm.$t('VerifySecret'),
-    divided: true,
-    can: ({ row }) =>
-      !vm.$store.getters.currentOrgIsRoot &&
-      vm.$hasPerm('accounts.verify_account') &&
-      row.asset['auto_config'].ansible_enabled &&
-      row.asset['auto_config'].ping_enabled,
-    callback: ({ row }) => {
-      vm.$axios.post(
-        `/api/v1/accounts/accounts/tasks/`,
-        { action: 'verify', accounts: [row.id] }
-      ).then(res => {
-        openTaskPage(res['task'])
-      })
-    }
-  },
-  {
-    name: 'ClearSecret',
-    title: vm.$t('ClearSecret'),
-    can: vm.$hasPerm('accounts.change_account'),
-    type: 'primary',
-    callback: ({ row }) => {
-      vm.$axios.patch(
-        `/api/v1/accounts/accounts/clear-secret/`,
-        { account_ids: [row.id] }
-      ).then(() => {
-        vm.$message.success(vm.$tc('ClearSuccessMsg'))
-      })
-    }
-  },
-  {
-    name: 'SecretHistory',
-    title: vm.$t('HistoryPassword'),
-    can: () => vm.$hasPerm('accounts.view_accountsecret'),
-    type: 'primary',
-    callback: ({ row }) => {
-      vm.account = row
-      vm.currentAccountColumn = row
-      vm.showViewSecretDialog = false
-      vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
-      setTimeout(() => {
-        vm.showViewSecretDialog = true
-      })
-    }
-  },
-  {
-    name: 'CopyToOther',
-    title: vm.$t('CopyToAsset'),
-    type: 'primary',
-    divided: true,
-    callback: ({ row }) => {
-      vm.accountCreateUpdateTitle = vm.$t('CopyToOther')
-      vm.$route.query.flag = 'copy'
-      vm.iAsset = vm.asset
-      vm.account = row
-      vm.showAddDialog = true
-    }
-  },
-  {
-    name: 'MoveToOther',
-    title: vm.$t('MoveToAsset'),
-    type: 'primary',
-    callback: ({ row }) => {
-      vm.accountCreateUpdateTitle = vm.$t('MoveToOther')
-      vm.$route.query.flag = 'move'
-      vm.iAsset = vm.asset
-      vm.account = row
-      vm.showAddDialog = true
-    }
-  }
-]
+export const accountOtherActions = vm => {
+  return [
+    {
+      name: 'View',
+      title: vm.$t('View'),
+      can: vm.$hasPerm('accounts.view_accountsecret'),
+      type: 'primary',
+      order: 1,
+      callback: ({ row }) => {
+        // debugger
+        vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
+        vm.account = row
+        vm.showViewSecretDialog = false
+        setTimeout(() => {
+          vm.showViewSecretDialog = true
+        })
+      }
+    },
+    {
+      name: 'Update',
+      title: vm.$t('Edit'),
+      can: ({ row }) => {
+        return (
+          vm.$hasPerm('accounts.change_account') &&
+          !vm.$store.getters.currentOrgIsRoot &&
+          !isDirectoryServiceAccount(row, vm)
+        )
+      },
+      callback: ({ row }) => {
+        vm.isUpdateAccount = true
+        const data = {
+          ...vm.asset,
+          ...row.asset
+        }
+        vm.iAsset = data
+        vm.account = row
+        vm.addTemplate = false
+        vm.showAddDialog = false
+        setTimeout(() => {
+          vm.showAddDialog = true
+        })
+      }
+    },
+    {
+      name: 'UpdateSecret',
+      title: vm.$t('EditSecret'),
+      can: ({ row }) => {
+        return (
+          vm.$hasPerm('accounts.change_account') &&
+          !vm.$store.getters.currentOrgIsRoot &&
+          !isDirectoryServiceAccount(row, vm)
+        )
+      },
+      callback: ({ row }) => {
+        const data = {
+          ...vm.asset,
+          ...row.asset
+        }
+        vm.account = row
+        vm.iAsset = data
+        vm.showUpdateSecretDialog = false
+        vm.accountCreateUpdateTitle = vm.$t('UpdateAccount')
+        setTimeout(() => {
+          vm.showUpdateSecretDialog = true
+        })
+      }
+    },
+    {
+      name: 'Clone',
+      title: vm.$t('Duplicate'),
+      has: () => {
+        return !vm.asset
+      },
+      can: ({ row }) => {
+        return (
+          vm.$hasPerm('accounts.add_account') &&
+          !vm.$store.getters.currentOrgIsRoot &&
+          !isDirectoryServiceAccount(row, vm)
+        )
+      },
+      callback: ({ row }) => {
+        vm.account = {
+          name: `${row.name} - ${vm.$t('Duplicate').toLowerCase()}`,
+          username: `${row.username} - ${vm.$t('Duplicate').toLowerCase()}`,
+          payload: 'pam_account_clone'
+        }
+        vm.iAsset = vm.asset
 
-export const accountQuickFilters = (vm) => [
+        vm.showAddDialog = false
+        setTimeout(() => {
+          vm.showAddDialog = true
+        })
+      }
+    },
+    {
+      name: 'Test',
+      title: vm.$t('VerifySecret'),
+      divided: true,
+      can: ({ row }) =>
+        !vm.$store.getters.currentOrgIsRoot &&
+        vm.$hasPerm('accounts.verify_account') &&
+        row.asset['auto_config'].ansible_enabled &&
+        row.asset['auto_config'].ping_enabled,
+      callback: ({ row }) => {
+        vm.$axios
+          .post(`/api/v1/accounts/accounts/tasks/`, { action: 'verify', accounts: [row.id] })
+          .then(res => {
+            openTaskPage(res['task'])
+          })
+      }
+    },
+    {
+      name: 'ClearSecret',
+      title: vm.$t('ClearSecret'),
+      can: ({ row }) => {
+        return vm.$hasPerm('accounts.change_account') && !isDirectoryServiceAccount(row, vm)
+      },
+      type: 'primary',
+      callback: ({ row }) => {
+        vm.$axios
+          .patch(`/api/v1/accounts/accounts/clear-secret/`, { account_ids: [row.id] })
+          .then(() => {
+            vm.$message.success(vm.$tc('ClearSuccessMsg'))
+          })
+      }
+    },
+    {
+      name: 'SecretHistory',
+      title: vm.$t('HistoryPassword'),
+      can: () => vm.$hasPerm('accounts.view_accountsecret'),
+      type: 'primary',
+      callback: ({ row }) => {
+        vm.account = row
+        vm.currentAccountColumn = row
+        vm.showViewSecretDialog = false
+        vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
+        setTimeout(() => {
+          vm.showViewSecretDialog = true
+        })
+      }
+    },
+    {
+      name: 'CopyToOther',
+      title: vm.$t('CopyToAsset'),
+      type: 'primary',
+      divided: true,
+      can: ({ row }) => {
+        return (
+          vm.$hasPerm('accounts.add_account') &&
+          !vm.$store.getters.currentOrgIsRoot &&
+          !isDirectoryServiceAccount(row, vm)
+        )
+      },
+      has: () => {
+        return !vm.asset
+      },
+      callback: ({ row }) => {
+        vm.accountCreateUpdateTitle = vm.$t('CopyToOther')
+        vm.$route.query.flag = 'copy'
+        vm.iAsset = vm.asset
+        vm.account = row
+        vm.showAddDialog = true
+      }
+    },
+    {
+      name: 'MoveToOther',
+      title: vm.$t('MoveToAsset'),
+      type: 'primary',
+      can: ({ row }) => {
+        return (
+          vm.$hasPerm('accounts.delete_account') &&
+          !vm.$store.getters.currentOrgIsRoot &&
+          !isDirectoryServiceAccount(row, vm)
+        )
+      },
+      has: () => {
+        return !vm.asset
+      },
+      callback: ({ row }) => {
+        vm.accountCreateUpdateTitle = vm.$t('MoveToOther')
+        vm.$route.query.flag = 'move'
+        vm.iAsset = vm.asset
+        vm.account = row
+        vm.showAddDialog = true
+      }
+    }
+  ]
+}
+
+export const accountQuickFilters = vm => [
   {
     label: vm.$t('Recent (7 days)'),
     options: [
@@ -211,11 +271,11 @@ export const accountQuickFilters = (vm) => [
       {
         label: vm.$t('NoLoginLongTime'),
         filter: {
-          risk: 'long_time_no_login'
+          long_time_no_login: 'true'
         }
       },
       {
-        label: vm.$t('UnmanagedAccount'),
+        label: vm.$t('AddAccount'),
         filter: {
           risk: 'new_found'
         }
@@ -237,12 +297,6 @@ export const accountQuickFilters = (vm) => [
         filter: {
           long_time_no_change_secret: 'true'
         }
-      },
-      {
-        label: vm.$t('LongTimeNoVerify'),
-        filter: {
-          long_time_no_verify: 'true'
-        }
       }
     ]
   },

src/components/Apps/AssetRelationCard/index.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import IBox from '@/components/IBox/index.vue'
+import IBox from '@/components/Common/IBox/index.vue'
 import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
 
 export default {
@@ -48,11 +48,13 @@ export default {
     },
     performAdd: {
       type: Function,
-      default: (objects, that) => {}
+      default: (objects, that) => {
+      }
     },
     onAddSuccess: {
       type: Function,
-      default: (objects, that) => {}
+      default: (objects, that) => {
+      }
     },
     canSelect: {
       type: Function,
@@ -62,8 +64,7 @@ export default {
     }
   },
   data() {
-    return {
-    }
+    return {}
   },
   methods: {
     addObjects() {
@@ -77,18 +78,18 @@ export default {
 </script>
 
 <style scoped>
-  b, strong {
-    font-weight: 700;
-    font-size: 13px;
-  }
+b, strong {
+  font-weight: 700;
+  font-size: 13px;
+}
 
-  tr td {
-    line-height: 1.42857;
-    padding: 8px;
-    vertical-align: top;
-  }
+tr td {
+  line-height: 1.42857;
+  padding: 8px;
+  vertical-align: top;
+}
 
-  tr.item td {
-    border-top: 1px solid #e7eaec;
-  }
+tr.item td {
+  border-top: 1px solid #e7eaec;
+}
 </style>

src/components/Apps/AssetSelect/dialog.vue

@@ -82,7 +82,7 @@ export default {
           },
           {
             prop: 'address',
-            label: this.$t('IpDomain'),
+            label: this.$t('Address'),
             sortable: 'custom'
           },
           {
@@ -161,11 +161,11 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.page ::v-deep .page-heading {
+.page :deep(.page-heading) {
   display: none;
 }
 
-.el-dialog__wrapper ::v-deep .el-dialog__body {
+.el-dialog__wrapper :deep(.el-dialog__body) {
   padding: 0 0 0 3px;
 
   .tree-table {
@@ -191,11 +191,11 @@ export default {
   }
 }
 
-.page ::v-deep .treebox .ztree {
+.page :deep(.treebox .ztree) {
 
 }
 
-.asset-select-dialog ::v-deep .el-icon-circle-check {
+.asset-select-dialog :deep(.el-icon-circle-check) {
   display: none;
 }
 </style>

src/components/Apps/AssetSelect/index.vue

@@ -11,12 +11,12 @@
     <AssetSelectDialog
       v-if="dialogVisible"
       ref="dialog"
+      v-model:visible="dialogVisible"
       :base-node-url="baseNodeUrl"
       :base-url="baseUrl"
       :tree-setting="treeSetting"
       :tree-url-query="treeUrlQuery"
       :value="value"
-      :visible.sync="dialogVisible"
       v-bind="$attrs"
       @cancel="handleCancel"
       @confirm="handleConfirm"
@@ -56,6 +56,10 @@ export default {
     treeSetting: {
       type: Object,
       default: () => ({})
+    },
+    disabled: {
+      type: [Boolean, Function],
+      default: false
     }
   },
   data() {
@@ -71,6 +75,7 @@ export default {
       dialogVisible: false,
       initialValue: _.cloneDeep(iValue),
       select2Config: {
+        disabled: this.disabled,
         value: iValue,
         multiple: true,
         clearable: true,
@@ -130,11 +135,11 @@ export default {
   width: 100%;
 }
 
-.page ::v-deep .page-heading {
+.page :deep(.page-heading) {
   display: none;
 }
 
-.el-dialog__wrapper ::v-deep .el-dialog__body {
+.el-dialog__wrapper :deep(.el-dialog__body) {
   padding: 0 0 0 3px;
 
   .tree-table {
@@ -163,7 +168,7 @@ export default {
   }
 }
 
-.page ::v-deep .treebox {
+.page :deep(.treebox) {
   height: inherit !important;
 }
 </style>

src/components/Apps/AssetTreeTable/index.vue

@@ -1,7 +1,7 @@
 <template>
   <TreeTable
     ref="TreeList"
-    :active-menu.sync="treeTableConfig.activeMenu"
+    v-model:active-menu="treeTableConfig.activeMenu"
     :component="treeComponent"
     :table-config="tableConfig"
     :tree-tab-config="treeTableConfig"
@@ -20,7 +20,7 @@
 
 <script>
 import TreeTable from '../../Table/TreeTable/index.vue'
-import { setRouterQuery, setUrlParam } from '@/utils/common'
+import { setRouterQuery, setUrlParam } from '@/utils/common/index'
 import $ from '@/utils/jquery-vendor'
 
 export default {
@@ -114,6 +114,11 @@ export default {
               treeUrl: `${this.typeUrl}?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
               callback: {
                 onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
+              },
+              edit: {
+                drag: {
+                  isMove: false
+                }
               }
             }
           }

src/components/Apps/AutomationParams/index.vue

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

src/components/Apps/BlockedIPs/index.vue

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

src/components/Apps/ChangeSecret/RecordViewSecret.vue

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

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

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

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

@@ -3,9 +3,13 @@
     <div class="chart-item-container">
       <div class="avatar">
         <el-avatar
-          :src="isUserRole ? userUrl : chatUrl"
+          v-if="isUserRole"
+          :src="userUrl"
           class="header-avatar"
         />
+        <el-avatar v-else class="header-avatar" :style="{ backgroundColor: 'transparent' }">
+          <ModelIcon :name="modelIconName" class-name="model-icon" />
+        </el-avatar>
       </div>
       <div class="content">
         <div class="operational">
@@ -33,7 +37,7 @@
                 <!-- eslint-disable-next-line -->
                 <div class="divider"></div>
                 <p>
-                  <MessageText :message="item.reasoning" />
+                  <MessageText :message="item.reasoning" @insert-code="handleInsertCode" />
                 </p>
               </div>
 
@@ -41,8 +45,7 @@
                 <span v-if="isServerError" class="error">
                   {{ isServerError }}
                 </span>
-                <MessageText :message="item.result" />
-              </div>
+                <MessageText :message="item.result" :is-terminal="isTerminal" @insert-code="handleInsertCode" /></div>
             </div>
           </div>
           <div class="action">
@@ -77,22 +80,32 @@
 
 <script>
 import MessageText from './MessageText.vue'
+import ModelIcon from '../../models/ModelIcon.vue'
 import { mapGetters, mapState } from 'vuex'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 import { useChat } from '../../useChat.js'
-import { reconnect } from '@/utils/socket'
+import { reconnect } from '@/utils/request'
 
 const { setLoading, removeLoadingMessageInChat } = useChat()
 
 export default {
   components: {
-    MessageText
+    MessageText,
+    ModelIcon
   },
   props: {
     item: {
       type: Object,
       default: () => {
       }
+    },
+    selectedModel: {
+      type: String,
+      default: ''
+    },
+    isTerminal: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -126,10 +139,8 @@ export default {
         ? this.$i18n.t('ServerBusyRetry')
         : ''
     },
-    chatUrl() {
-      return this.publicSettings.CHAT_AI_TYPE === 'gpt'
-        ? require('@/assets/img/chat.png')
-        : require('@/assets/img/deepSeek.png')
+    modelIconName() {
+      return (this.item?.message?.model || this.selectedModel || this.publicSettings.CHAT_AI_TYPE || '').toString()
     }
   },
   methods: {
@@ -142,6 +153,9 @@ export default {
       if (value === 'copy') {
         copy(this.item.result.content)
       }
+    },
+    handleInsertCode(code) {
+      this.$emit('insert-code', code)
     }
   }
 }
@@ -165,11 +179,18 @@ export default {
         width: 100%;
         height: 100%;
         border-radius: 50%;
+        background-color: transparent;
 
-        &::v-deep img {
+        &:deep(img) {
           background-color: #fff;
         }
       }
+
+      .model-icon {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
     }
 
     .content {
@@ -228,7 +249,7 @@ export default {
               margin: unset;
               padding-left: 0.5rem;
 
-              ::v-deep p {
+              :deep(p) {
                 color: #8b8b8b;
               }
             }

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

@@ -17,7 +17,7 @@ import mdKatex from '@traptitech/markdown-it-katex'
 import mila from 'markdown-it-link-attributes'
 import hljs from 'highlight.js'
 import 'highlight.js/styles/atom-one-dark.css'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 
 export default {
   props: {
@@ -25,6 +25,10 @@ export default {
       type: Object,
       default: () => {
       }
+    },
+    isTerminal: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -36,7 +40,7 @@ export default {
     text() {
       const value = this.message?.content || ''
       if (value && this.markdown) {
-        return this.markdown?.render(value)
+        return this.renderContentWithDetails(value)
       }
       return this.$xss.process(value)
     }
@@ -45,10 +49,10 @@ export default {
     this.init()
   },
   updated() {
-    this.addCopyEvents()
+    this.addEvents()
   },
-  destroyed() {
-    this.removeCopyEvents()
+  unmounted() {
+    this.removeEvents()
   },
   methods: {
     init() {
@@ -65,30 +69,139 @@ export default {
           return vm.highlightBlock(hljs.highlightAuto(code).value, '')
         }
       })
-      this.markdown.use(mila, { attrs: { target: '_blank', rel: 'noopener', class: 'link-style' }})
+      this.markdown.use(mila, { attrs: { target: '_blank', rel: 'noopener', class: 'link-style' } })
       this.markdown.use(mdKatex, { blockClass: 'katexmath-block rounded-md', errorColor: ' #cc0000' })
     },
     highlightBlock(str, lang) {
-      return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${'Copy'}</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
+      let insertSpanHtml = `<span class="code-block-header__insert">${this.$t('Insert')}</span>`
+      if (!this.isTerminal) {
+        insertSpanHtml = ''
+      }
+      return `<pre class="code-block-wrapper">
+        <div class="code-block-header">
+        <span class="code-block-header__lang">${lang}</span>  
+        <span class="code-block-header__actions">
+        ${insertSpanHtml}
+          <span class="code-block-header__copy">${this.$t('Copy')}</span>
+        </span>
+        </div>
+        <code class="hljs code-block-body ${lang}">${str}</code></pre>`
     },
-    addCopyEvents() {
-      const copyBtn = document.querySelectorAll('.code-block-header__copy')
-      copyBtn.forEach((btn) => {
-        btn.addEventListener('click', () => {
-          const code = btn.parentElement?.nextElementSibling?.textContent
-          if (code) {
-            copy(code)
-          }
+    addEvents() {
+      this.addBtnClickEvents('.code-block-header__copy', this.handlerClickCopy)
+      this.addBtnClickEvents('.code-block-header__insert', this.handlerClickInsert)
+    },
+
+    handlerClickCopy(event) {
+      const wrapper = event.target.closest('.code-block-wrapper')
+      if (wrapper) {
+        // 查找里面的 code 元素
+        const codeElement = wrapper.querySelector('code.code-block-body')
+        if (codeElement) {
+          const codeText = codeElement.textContent
+          copy(codeText)
+        }
+      }
+    },
+    handlerClickInsert(event) {
+      const wrapper = event.target.closest('.code-block-wrapper')
+      if (wrapper) {
+        // 查找里面的 code 元素
+        const codeElement = wrapper.querySelector('code.code-block-body')
+        if (codeElement) {
+          const codeText = codeElement.textContent
+          this.$emit('insert-code', codeText)
+        }
+      }
+    },
+    addBtnClickEvents(selector, callback) {
+      const buttons = this.$refs.textRef.querySelectorAll(selector)
+      buttons.forEach((btn) => {
+        btn.addEventListener('click', callback)
+      })
+    },
+    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) => {
+        btn.removeEventListener('click', () => {
         })
       })
     },
-    removeCopyEvents() {
+    removeEvents() {
       if (this.$refs.textRef) {
-        const copyBtn = this.$refs.textRef.querySelectorAll('.code-block-header__copy')
-        copyBtn.forEach((btn) => {
-          btn.removeEventListener('click', () => {
-          })
-        })
+        this.removeBtnClickEvent('.code-block-header__copy')
+        this.addBtnClickEvents('.code-block-header__insert')
       }
     }
   }
@@ -98,14 +211,15 @@ export default {
 <style lang="scss" scoped>
 .markdown-body {
   font-size: 13px;
+  max-width: 300px;;
 
-  &::v-deep p {
+  &:deep(p) {
     margin-bottom: 0 !important;
   }
 
   background: inherit;
 
-  &::v-deep pre {
+  &:deep(pre) {
     padding: 0 0 6px 0;
 
     .hljs.code-block-body {
@@ -113,28 +227,48 @@ export default {
     }
   }
 
-  &::v-deep .code-block-wrapper {
+  &:deep(.code-block-wrapper) {
     background: #1F2329;
-    padding: 2px 6px;
+    padding: 0;
     margin: 5px 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 
     .code-block-body {
-      padding: 5px 10px 0;
+      padding: 5px 10px;
     }
-  ;
 
     .code-block-header {
       margin-bottom: 4px;
       overflow: hidden;
       background: #353946;
       color: #c2d1e1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 4px 8px;
+      width: 100%;
+      box-sizing: border-box;
 
-      .code-block-header__copy {
-        float: right;
-        cursor: pointer;
+      .code-block-header__actions {
+        display: flex;
+        gap: 8px;
 
-        &:hover {
-          color: #6e747b;
+        .code-block-header__copy {
+          cursor: pointer;
+
+          &:hover {
+            color: #6e747b;
+          }
+        }
+
+        .code-block-header__insert {
+          cursor: pointer;
+
+          &:hover {
+            color: #6e747b;
+          }
         }
       }
     }
@@ -147,7 +281,7 @@ export default {
   }
 }
 
-::v-deep .link-style {
+:deep(.link-style) {
   color: #487bf4;
 
   &:hover {
@@ -178,6 +312,7 @@ export default {
   0% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }
@@ -194,4 +329,64 @@ export default {
 .loading-box span:nth-child(3) {
   animation-delay: 0.49s;
 }
+
+.kael-detail {
+  margin: 8px 0;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid #e5e5e5;
+  background: #f7f8fa;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: #6b7280;
+  }
+
+  &__title {
+    font-weight: 600;
+  }
+
+  &__status-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #10b981;
+  }
+
+  &__body {
+    margin-top: 6px;
+    padding-left: 8px;
+    border-left: 2px solid #e5e5e5;
+  }
+
+  &--reasoning.is-pending {
+    border-color: #f59e0b40;
+    background: #fff8e6;
+
+    .kael-detail__status-dot {
+      background: #f59e0b;
+      animation: kael-pulse 1.2s ease-in-out infinite;
+    }
+  }
+
+  &--reasoning.is-done {
+    border-color: #dbeafe;
+    background: #f4f6ff;
+  }
+}
+
+@keyframes kael-pulse {
+  0% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.45;
+  }
+}
 </style>

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

@@ -13,6 +13,8 @@
 </template>
 
 <script>
+import { BASE_URL } from '@/utils/common/index'
+
 export default {
   props: {
     active: {
@@ -41,6 +43,16 @@ export default {
     },
     handleExpand() {
       this.$emit('expand-full')
+    },
+    async openWebsite() {
+      let url = `${BASE_URL}/?_=${Date.now()}`
+      if (process.env.NODE_ENV !== 'production') {
+        url = url.replace('9528', '5173')
+      }
+
+      const newUrl = new URL(url)
+      window.open(newUrl.toString(), '_blank')
+      return url
     }
   }
 }
@@ -80,7 +92,7 @@ export default {
   transform: rotate(-90deg)
 }
 
-::v-deep .el-tabs {
+:deep(.el-tabs) {
   .el-tabs__item {
     padding: 0 10px;
     font-size: 14px;

src/components/Apps/ChatAi/index.vue

@@ -1,5 +1,6 @@
 <template>
   <DrawerPanel
+    v-if="visible"
     ref="drawer"
     :default-show-panel="!!defaultShowPanel"
     :expanded="expanded"
@@ -28,7 +29,7 @@
       </div>
       <div class="sidebar">
         <Sidebar
-          :active.sync="active"
+          v-model:active="active"
           :expanded="expanded"
           v-bind="$attrs"
           @close="onClose"
@@ -45,9 +46,12 @@
 import Sidebar from './components/Sidebar/index.vue'
 import Chat from './components/ChitChat/index.vue'
 import { getInputFocus } from './useChat.js'
-import { ws } from '@/utils/socket'
 import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
+import { ObjectLocalStorage } from '@/utils/common'
+import i18n from '@/i18n/i18n'
+import { mapGetters } from 'vuex'
 
+const aiPannelLocalStorage = new ObjectLocalStorage('ai_panel_settings')
 export default {
   components: {
     DrawerPanel,
@@ -58,7 +62,7 @@ export default {
     title: {
       type: String,
       default: function() {
-        return this.$t('ChatAI')
+        return i18n.global.t('ChatAI')
       }
     },
     defaultShowPanel: {
@@ -72,23 +76,76 @@ export default {
   },
   data() {
     return {
+      visible: false,
       active: 'chat',
       robotUrl: require('@/assets/img/robot-assistant.png'),
       height: '400px',
       expanded: false,
-      clientOffset: {}
+      clientOffset: {},
+      currentTerminalContent: {},
+      initialized: false
     }
   },
+  computed: {
+    ...mapGetters([
+      'publicSettings'
+    ])
+  },
   watch: {
+    'publicSettings.CHAT_AI_METHOD': {
+      handler(newVal) {
+        this.visible = newVal === 'api'
+      }
+    }
   },
   mounted() {
-    this.handlePostMessage()
+    this.handleStartChat()
   },
   methods: {
+    handleStartChat() {
+      if (this.publicSettings.CHAT_AI_METHOD === 'api') {
+        this.visible = true
+        const expanded = aiPannelLocalStorage.get('expanded')
+        this.updateExpandedState(expanded)
+        this.handlePostMessage()
+      } else if (this.publicSettings.CHAT_AI_METHOD === 'embed') {
+        const embedScriptId = 'chat-ai-embed-id'
+        if (document.getElementById(embedScriptId)) {
+          return
+        }
+        const script = document.createElement('script')
+        script.id = embedScriptId
+        script.src = this.publicSettings.CHAT_AI_EMBED_URL
+        script.async = true
+        script.onload = () => {
+          const loadEvent = new Event('load', { bubbles: false, cancelable: false })
+          window.dispatchEvent(loadEvent)
+        }
+        document.body.appendChild(script)
+      }
+    },
+    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()
+          return
+        }
+        const msg = event.data
+        switch (msg.name) {
+          case 'current_terminal_content':
+            // {content: '...', terminalId: '',sessionId: '',viewId: '',viewName: ''}
+            this.$log.debug('current_terminal_content', msg)
+            this.currentTerminalContent = msg.data
+            this.$refs.component?.onTerminalContext(msg.data)
+            break
         }
       })
     },
@@ -96,23 +153,30 @@ export default {
       this.$refs.drawer.handleHeaderMoveDown(event)
     },
     handleMouseMoveUp(event) {
-      this.$refs.drawer.handleHeaderMoveUp(event)
-    },
-    initWebSocket() {
-      if (!ws) {
-        this.$refs.component?.init()
+      // Prevent the new chat button from triggering the header move up
+      const newButton = event.target.closest('.new')
+      if (newButton) {
+        return
       }
+      this.$refs.drawer.handleHeaderMoveUp(event)
     },
     onClose() {
       this.$refs.drawer.show = false
     },
     expandFull() {
-      this.height = '100%'
-      this.expanded = true
+      this.updateExpandedState(true)
+      this.save_pannel_settings()
     },
     compress() {
-      this.height = '400px'
-      this.expanded = false
+      this.updateExpandedState(false)
+      this.save_pannel_settings()
+    },
+    save_pannel_settings() {
+      aiPannelLocalStorage.set('expanded', this.expanded)
+    },
+    updateExpandedState(expanded) {
+      this.expanded = expanded
+      this.height = expanded ? '100%' : '400px'
     },
     onNewChat() {
       this.active = 'chat'
@@ -122,8 +186,8 @@ export default {
       })
     },
     onToggle(status) {
-      this.initWebSocket()
       if (status) {
+        this.initAssistant()
         getInputFocus()
       }
     }

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

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

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

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

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

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

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

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

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

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

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

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

src/components/Apps/ChatAi/useChat.js

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

src/components/Apps/DrawerPanel/index.vue

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

src/components/Apps/GatewayTestDialog/index.vue

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

src/components/Apps/GrantedAssets/index.vue

@@ -7,7 +7,7 @@
   />
 </template>
 
-<script type="text/jsx">
+<script>
 import AssetTreeTable from '@/components/Apps/AssetTreeTable'
 import { AccountInfoFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
@@ -44,9 +44,7 @@ export default {
     },
     getShowUrl: {
       type: Function,
-      default({ row, col }) {
-        return this.tableUrl.replace('/assets/', `/assets/${row.id}/accounts/`)
-      }
+      default: ({ row, col }) => this.tableUrl.replace('/assets/', `/assets/${row.id}/accounts/`)
     },
     name: {
       type: Object,
@@ -85,6 +83,7 @@ export default {
         hasTree: true,
         columnsExtra: ['view_account'],
         columnsExclude: ['spec_info'],
+        columns: ['id', 'name', 'address', 'comment', 'labels', 'connectivity', 'platform', 'view_account', 'actions'],
         columnsShow: {
           min: ['name', 'address', 'accounts'],
           default: ['name', 'address', 'platform', 'view_account', 'actions']
@@ -108,11 +107,6 @@ export default {
           },
           connectivity: connectivityMeta,
           comment: { ...this.comment }
-        },
-        tableAttrs: {
-          rowClassName({ row }) {
-            return !row.is_active ? 'row_disabled' : ''
-          }
         }
       },
       headerActions: {

src/components/Apps/LeakPasswords/LeakPasswordList.vue

@@ -0,0 +1,63 @@
+<template>
+  <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" :create-drawer="createDrawer" />
+</template>
+
+<script>
+import { DrawerListTable as ListTable } from '@/components'
+
+export default {
+  name: 'LeakPasswordList',
+  components: {
+    ListTable
+  },
+  props: {
+    object: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      createDrawer: () => import('@/components/Apps/LeakPasswords/LeakPasswordsCreateUpdate.vue'),
+      tableConfig: {
+        url: '/api/v1/settings/leak-passwords/',
+        columns: [
+          'password'
+        ],
+        columnsMeta: {
+          actions: {
+            formatterArgs: {
+              hasClone: false,
+              canDelete: this.$hasPerm('settings.change_security'),
+              canUpdate: this.$hasPerm('settings.change_security')
+            }
+          }
+        }
+
+      },
+      headerActions: {
+        hasExport: true,
+        hasImport: true,
+        importOptions: {
+          encryptFields: [''], // 这里不加密 password，''只是为了保证数组有值
+          canImportUpdate: false
+        },
+        hasCreate: true,
+        hasSearch: true,
+        hasRefresh: true,
+        hasBulkDelete: true,
+        hasBulkUpdate: false,
+        hasLeftActions: true,
+        hasRightActions: true,
+        canCreate: this.$hasPerm('settings.change_security'),
+        canBulkDelete: this.$hasPerm('settings.change_security')
+      }
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>

src/components/Apps/LeakPasswords/LeakPasswordsCreateUpdate.vue

@@ -0,0 +1,41 @@
+<template>
+  <div v-loading="loading">
+    <GenericCreateUpdatePage
+      v-if="!loading"
+      class="user-create-update"
+      v-bind="$data"
+      :title="null"
+      v-on="$listeners"
+    />
+  </div>
+</template>
+
+<script>
+import { GenericCreateUpdatePage } from '@/layout/components'
+
+export default {
+  name: 'LeakPasswordsCreateUpdate',
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      loading: true,
+      fields: [
+        [this.$t('Basic'), ['password']]
+      ],
+      encryptedFields: [],
+      url: '/api/v1/settings/leak-passwords/'
+
+    }
+  },
+  async mounted() {
+    this.loading = false
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/Apps/LeakPasswords/index.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <div>
+      <el-button size="small" type="primary" @click="onOpenDialog">
+        {{ $tc('View') }}
+      </el-button>
+    </div>
+    <Dialog
+      :destroy-on-close="true"
+      :show-cancel="false"
+      :show-confirm="false"
+      :title="title"
+      :visible="visible"
+      v-bind="$attrs"
+      width="40%"
+      @update:visible="$emit('update:visible', $event)"
+      v-on="$listeners"
+    >
+      <LeakPasswordList />
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import { Dialog } from '@/components'
+import LeakPasswordList from '@/components/Apps/LeakPasswords/LeakPasswordList.vue'
+
+export default {
+  componentName: 'LeakPasswords',
+  components: {
+    LeakPasswordList,
+    Dialog
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    title: {
+      type: String,
+      default: function() {
+        return 'LeakPasswordList'
+      }
+    },
+    url: {
+      type: String,
+      default: `/api/v1/settings/leak-passwords/`
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      form: this.value,
+      config: {
+        url: this.url,
+        hasSaveContinue: false,
+        hasButtons: true,
+        fields: [],
+        fieldsMeta: {}
+      }
+    }
+  },
+
+  methods: {
+    onOpenDialog() {
+      this.visible = true
+    }
+  }
+}
+</script>
+
+<style scoped></style>

src/components/Apps/ManyJsonTabs/AssetJsonTab.vue

@@ -6,7 +6,8 @@
 
 <script>
 import { DrawerListTable as ListTable } from '@/components'
-import { toM2MJsonParams } from '@/utils/jms'
+import { toM2MJsonParams } from '@/utils/jms/index'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
 export default {
@@ -24,6 +25,7 @@ export default {
   },
   data() {
     const [key, value] = toM2MJsonParams(this.object.assets)
+    const org_id = this.object.org_id || this.$store.getters.currentOrg.id
     return {
       config: {
         headerActions: {
@@ -32,7 +34,7 @@ export default {
           hasExport: false
         },
         tableConfig: {
-          url: `/api/v1/assets/assets/?${key}=${value}`,
+          url: `/api/v1/assets/assets/?${key}=${value}&oid=${org_id}`,
           columns: ['name', 'address', 'platform', 'type', 'is_active'],
           columnsShow: {
             min: ['name', 'address'],
@@ -41,15 +43,10 @@ export default {
           columnsMeta: {
             name: {
               label: this.$t('Asset'),
-              formatter: (row) => {
-                const to = {
-                  name: 'AssetDetail',
-                  params: { id: row.id }
-                }
-                if (this.$hasPerm('assets.view_asset')) {
-                  return <router-link to={to} class='text-link'>{row.name}</router-link>
-                } else {
-                  return <span>{row.name}</span>
+              formatter: DetailFormatter,
+              formatterArgs: {
+                getRoute: ({ row }) => {
+                  return { name: 'AssetDetail', params: { id: row.id } }
                 }
               }
             },
@@ -68,7 +65,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/Apps/ManyJsonTabs/UserJsonTab.vue

@@ -6,8 +6,9 @@
 
 <script>
 import { DrawerListTable as ListTable } from '@/components'
-import { toM2MJsonParams } from '@/utils/jms'
+import { toM2MJsonParams } from '@/utils/jms/index'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'User',
@@ -24,6 +25,7 @@ export default {
   },
   data() {
     const [key, value] = toM2MJsonParams(this.object.users)
+    const org_id = this.object.org_id || this.$store.getters.currentOrg.id
     return {
       config: {
         headerActions: {
@@ -32,7 +34,7 @@ export default {
           hasExport: false
         },
         tableConfig: {
-          url: `/api/v1/users/users/?${key}=${value}`,
+          url: `/api/v1/users/users/?${key}=${value}&oid=${org_id}`,
           columns: [
             'name', 'username', 'email', 'groups', 'system_roles',
             'org_roles', 'source', 'is_valid'
@@ -44,15 +46,13 @@ export default {
           columnsMeta: {
             name: {
               label: this.$t('Name'),
-              formatter: (row) => {
-                const to = {
-                  name: 'UserDetail',
-                  params: { id: row.id }
-                }
-                if (this.$hasPerm('users.view_user')) {
-                  return <router-link to={to} class='text-link'>{row.name}</router-link>
-                } else {
-                  return <span>{row.name}</span>
+              formatter: DetailFormatter,
+              formatterArgs: {
+                getRoute: ({ row }) => {
+                  return {
+                    name: 'UserDetail',
+                    params: { id: row.id }
+                  }
                 }
               }
             },
@@ -90,7 +90,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/Apps/ResourceActivity/index.vue

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

src/components/Apps/UserConfirmDialog/index.vue

@@ -5,38 +5,33 @@
     :show-cancel="false"
     :show-confirm="false"
     :title="title"
-    :visible.sync="visible"
+    :visible="visible"
     class="dialog-content"
     v-bind="$attrs"
-    width="740px"
+    width="600px"
     @confirm="visible = false"
     v-on="$listeners"
   >
     <div v-if="confirmTypeRequired === 'relogin'">
-      <el-row :gutter="24" style="margin: 0 auto;">
+      <el-row :gutter="24" style="margin: 0 auto">
         <el-col :md="24" :sm="24">
-          <el-alert
-            :title="$tc('ReLoginTitle')"
-            center
-            style="margin-bottom: 20px;"
-            type="error"
-          />
+          <el-alert :title="$tc('ReLoginTitle')" center style="margin-bottom: 20px" type="error" />
         </el-col>
       </el-row>
-      <el-row :gutter="24" style="margin: 0 auto;">
+      <el-row :gutter="24" style="margin: 0 auto">
         <el-col :md="24" :sm="24">
-          <el-button class="confirm-btn" size="mini" type="primary" @click="logout">
-            {{ this.$t('ReLogin') }}
+          <el-button class="confirm-btn" size="small" type="primary" @click="logout">
+            {{ $t('ReLogin') }}
           </el-button>
         </el-col>
       </el-row>
     </div>
     <div v-else>
-      <el-row :gutter="24" style="margin: 0 auto;">
+      <el-row :gutter="24" style="margin: 0 auto">
         <el-col :md="24" :sm="24" :span="24" class="add">
           <el-select
             v-model="subTypeSelected"
-            style="width: 100%; margin-bottom: 20px;"
+            style="width: 100%; margin-bottom: 20px"
             @change="handleSubTypeChange"
           >
             <el-option
@@ -49,56 +44,72 @@
           </el-select>
         </el-col>
       </el-row>
-      <el-row :gutter="24" style="margin: 0 auto;">
-        <el-col :md="24" :sm="24" style="display: flex; align-items: center; margin-bottom: 20px;">
+      <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-if="subTypeSelected !== 'face'"
             v-model="secretValue"
             :placeholder="inputPlaceholder"
             :show-password="showPassword"
             @keyup.enter.native="handleConfirm"
           />
-
-          <iframe
-            v-if="isFaceCaptureVisible && subTypeSelected ==='face' && faceCaptureUrl"
-            :src="faceCaptureUrl"
-            allow="camera"
-            sandbox="allow-scripts allow-same-origin"
-            style="width: 100%; height: 800px;border: none;"
-          />
-
-          <span v-if="subTypeSelected === 'sms'" style="margin: -1px 0 0 20px;">
+          <span
+            v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'"
+            style="margin: -1px 0 0 20px"
+          >
             <el-button
               :disabled="smsBtnDisabled"
-              size="mini"
-              style="line-height: 14px; float: right;"
+              size="small"
+              style="line-height: 14px; float: right"
               type="primary"
-              @click="sendSMSCode"
+              @click="sendCode"
             >
               {{ smsBtnText }}
             </el-button>
           </span>
         </el-col>
       </el-row>
-      <el-row :gutter="24" style="margin: 10px auto;">
+      <el-row>
+        <el-col>
+          <iframe 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"
+          />
+        </el-col>
+      </el-row>
+      <el-row :gutter="24" style="margin: 20px auto 10px">
         <el-col :md="24" :sm="24">
           <el-button
-            v-if="subTypeSelected!=='face'"
+            v-if="!noCodeMFA.includes(subTypeSelected)"
             class="confirm-btn"
-            size="mini"
+            size="small"
             type="primary"
             @click="handleConfirm"
           >
-            {{ this.$t('Confirm') }}
+            {{ $t('Confirm') }}
           </el-button>
           <el-button
-            v-if="subTypeSelected==='face'&&!isFaceCaptureVisible"
+            v-if="subTypeSelected === 'face'"
+            v-show="!isFaceCaptureVisible"
             class="confirm-btn"
-            size="mini"
+            size="small"
             type="primary"
             @click="handleFaceCapture"
           >
-            {{ this.$tc('VerifyFace') }}
+            {{ $tc('VerifyFace') }}
+          </el-button>
+          <el-button
+            v-if="subTypeSelected === 'passkey'"
+            v-loading="passkeyVisible"
+            class="confirm-btn"
+            size="small"
+            type="primary"
+            @click="handlePasskeyVerify"
+          >
+            {{ $tc('Next') }}
           </el-button>
         </el-col>
       </el-row>
@@ -107,7 +118,7 @@
 </template>
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { encryptPassword } from '@/utils/crypto'
+import { encryptPassword } from '@/utils/secure'
 
 export default {
   name: 'UserConfirmDialog',
@@ -141,7 +152,11 @@ export default {
       processing: false,
       isFaceCaptureVisible: false,
       faceToken: null,
-      faceCaptureUrl: null
+      faceCaptureUrl: null,
+      noCodeMFA: ['face', 'passkey'],
+      sendCodeMFA: ['email', 'sms', 'otp'],
+      passkeyVisible: false,
+      passkeyUrl: '/api/v1/authentication/passkeys/login/?mfa=1'
     }
   },
   computed: {
@@ -152,7 +167,7 @@ export default {
   mounted() {
     this.$eventBus.$on('showConfirmDialog', this.performConfirm)
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.$eventBus.$off('showConfirmDialog', this.performConfirm)
   },
   methods: {
@@ -174,79 +189,119 @@ 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}`
     },
-    sendSMSCode() {
-      this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: 'sms' }).then(res => {
-        this.$message.success(this.$tc('VerificationCodeSent'))
-        let time = 60
-        this.smsBtnDisabled = true
+    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
 
-        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
+      this.checkPasskeyStatus()
+    },
+    checkPasskeyStatus() {
+      const url = '/api/v1/authentication/confirm/check/?confirm_type=mfa'
+      const t = setInterval(() => {
+        this.$axios.get(url).then(data => {
+          this.passkeyVisible = false
+          this.onSuccess()
+        })
+      }, 2000)
+      setTimeout(() => {
+        clearInterval(t)
+        if (this.passkeyVisible) {
+          this.passkeyVisible = false
+          this.$message.error(this.$tc('PasskeyTimeout'))
+        }
+      }, 20000)
     },
     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()
     },
+    onSuccess() {
+      this.secretValue = ''
+      this.visible = false
+      this.$nextTick(() => {
+        this.callback()
+      })
+    },
     handleConfirm() {
       if (this.confirmTypeRequired === 'relogin') {
         return this.logout()
@@ -258,31 +313,33 @@ export default {
       const data = {
         confirm_type: this.confirmTypeRequired,
         mfa_type: this.confirmTypeRequired === 'mfa' ? this.subTypeSelected : '',
-        secret_key: this.confirmTypeRequired === 'password' ? encryptPassword(this.secretValue) : this.secretValue
+        secret_key:
+          this.confirmTypeRequired === 'password'
+            ? encryptPassword(this.secretValue)
+            : this.secretValue
       }
 
-      this.$axios.post(`/api/v1/authentication/confirm/`, data).then(() => {
-        this.secretValue = ''
-        this.visible = false
-        this.$nextTick(() => {
-          this.callback()
+      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
         })
-      }).catch((err) => {
-        this.$message.error(err.message || this.$tc('ConfirmFailed'))
-        this.faceCaptureUrl = null
-        this.isFaceCaptureVisible = false
-      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.dialog-content ::v-deep .el-dialog__footer {
+.dialog-content :deep(.el-dialog__footer) {
   padding: 0;
 }
 
-.dialog-content ::v-deep .el-dialog {
+.dialog-content :deep(.el-dialog) {
   padding: 8px;
 
   .el-dialog__body {

src/components/Apps/VariableCreateUpdateForm/index.vue

@@ -39,6 +39,9 @@ export default {
         ['', ['name', 'var_name', 'type', 'text_default_value', 'select_default_value', 'extra_args', 'tips', 'required']]
       ],
       fieldsMeta: {
+        var_name: {
+          helpTextAsTip: false
+        },
         text_default_value: {
           label: this.$t('DefaultValue'),
           hidden: (formValue) => {
@@ -112,7 +115,7 @@ export default {
 
 <style lang='scss' scoped>
 .variable-add {
-  ::v-deep .el-form-item {
+  :deep(.el-form-item) {
     margin-bottom: 5px;
 
     .help-block {
@@ -120,7 +123,7 @@ export default {
     }
   }
 
-  ::v-deep .form-group-header {
+  :deep(.form-group-header) {
     .hr-line-dashed {
       margin: 5px 0;
     }

src/components/Apps/VariableSetForm/index.vue

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

src/components/Apps/VariablesHelpTextDialog/index.vue

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

src/components/Cards/DetailCard/ItemValue.vue

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

src/components/Cards/DetailCard/auto.vue

@@ -10,11 +10,11 @@
   </div>
 </template>
 
-<script>
+<script lang="jsx">
 import DetailCard from './index.vue'
-import { copy } from '@/utils/common'
-import { toSafeLocalDateStr } from '@/utils/time'
-import IBox from '@/components/IBox/index.vue'
+import { copy } from '@/utils/common/index'
+import { toSafeLocalDateStr } from '@/utils/common/time'
+import IBox from '@/components/Common/IBox/index.vue'
 import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue'
 
 export default {
@@ -129,11 +129,21 @@ export default {
     parseArrayValue(value, excludes, label) {
       if (Array.isArray(value)) {
         const tp = typeof value[0]
+        let object = {}
+
+        if (value.length === 0) {
+          object = {
+            key: label,
+            value: '-'
+          }
+          return this.items.push(object)
+        }
+
+        // 如果是空数组，那么循环体将不会执行
         for (const [index, item] of value.entries()) {
-          let object = {}
           if (tp === 'object') {
             const firstValue = value[0]
-            if (firstValue.hasOwnProperty('name')) {
+            if (Object.prototype.hasOwnProperty.call(firstValue, 'name')) {
               value.forEach(item => {
                 const fieldName = `${name}.${item.name}`
                 if (excludes.includes(fieldName)) {

src/components/Cards/DetailCard/index.vue

@@ -5,7 +5,7 @@
         <div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
           <span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
           <span class="item-value el-form-item__content">
-            <template
+            <component
               :is="item.component"
               v-if="item.component"
               v-bind="{...item}"
@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import IBox from '../../IBox/index.vue'
+import IBox from '@/components/Common/IBox/index.vue'
 import ItemValue from './ItemValue.vue'
 
 export default {
@@ -29,7 +29,7 @@ export default {
     title: {
       type: String,
       default() {
-        return this.$t('BasicInfo')
+        return 'BasicInfo'
       }
     },
     fa: {
@@ -52,7 +52,7 @@ export default {
   data() {
     return {
       iItems: this.items.filter(item => {
-        return !item.hasOwnProperty('has') || item.has === true
+        return !Object.prototype.hasOwnProperty.call(item, 'has') || item.has === true
       })
     }
   },
@@ -76,7 +76,7 @@ export default {
   font-size: 13px;
   line-height: 2;
 
-  ::v-deep .el-form-item {
+  :deep(.el-form-item) {
     border-bottom: 1px dashed #F4F4F4;
     padding: 1px 0;
     margin-bottom: 0;
@@ -93,11 +93,11 @@ export default {
     &.array-item {
       border-bottom: none;
 
-      ::v-deep .el-form-item__content {
+      :deep(.el-form-item__content) {
         border-bottom: 1px dashed #EBEEF5
       }
 
-      ::v-deep .el-form-item__label:last-child {
+      :deep(.el-form-item__label:last-child) {
         border: 1px dashed #EBEEF5;
       }
     }
@@ -127,13 +127,13 @@ export default {
       padding: 5px 0;
     }
 
-    ::v-deep .el-tag--mini {
+    :deep(.el-tag--small) {
       margin-right: 3px;
     }
   }
 
   .item-value {
-    ::v-deep span {
+    :deep(span) {
       //display: -webkit-box;
       overflow: hidden;
       text-overflow: ellipsis;

src/components/Cards/RelationCard/index.vue

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

src/components/Cards/SummaryCard/index.vue

@@ -1,14 +1,19 @@
 <template>
   <div>
     <div class="summary-header">
-      <el-tooltip :content="title" placement="top" :open-delay="500">
+      <el-tooltip :content="title" :open-delay="500" placement="top">
         <span class="title">{{ title }}</span>
       </el-tooltip>
     </div>
     <slot>
       <h3 class="no-margins ">
-        <span v-async="iCount" class="num" @click="handleClick">
-          -
+        <span
+          :class="{ 'can-direct': canDirect }"
+          class="num"
+          @click="handleClick"
+        >
+          <span v-if="count === null"> - </span>
+          <span v-else>{{ count }}</span>
         </span>
       </h3>
     </slot>
@@ -16,7 +21,6 @@
 </template>
 
 <script>
-
 export default {
   name: 'SummaryCard',
   props: {
@@ -24,18 +28,18 @@ export default {
       type: String,
       default: ''
     },
-    body: {
-      type: Object,
-      default: () => ({})
-    },
     count: {
       type: [Number, String, Promise],
-      default: 0
+      default: null
     },
     route: {
       type: [String, Object],
       default: ''
     },
+    canDirect: {
+      type: Boolean,
+      default: false
+    },
     callback: {
       type: Function,
       default: () => {
@@ -49,25 +53,13 @@ export default {
   data() {
     return {}
   },
-  computed: {
-    iCount() {
-      const count = this.body.count || this.count
-      return count
-    },
-    iRoute() {
-      return this.body.route || this.route
-    },
-    iDisabled() {
-      return this.body.disabled === undefined ? this.disabled : this.body.disabled
-    }
-  },
   methods: {
     handleClick() {
-      if (this.iDisabled) {
+      if (this.disabled) {
         return
       }
-      if (this.iRoute) {
-        this.$router.push(this.iRoute)
+      if (this.route) {
+        this.$router.push(this.route)
         return
       }
       this.callback.bind(this)()
@@ -105,7 +97,7 @@ export default {
     color: var(--color-text-primary);
     cursor: pointer;
 
-    &:hover {
+    &.can-direct:hover {
       color: var(--color-primary);
     }
   }

src/components/Common/ActionsGroup/index.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import DataActions from '@/components/DataActions'
+import DataActions from '@/components/Common/DataActions/index.vue'
 
 export default {
   name: 'ActionsGroup',

src/components/Common/DataActions/index.vue

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

src/components/Common/ErrorBoundary/index.vue

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

src/components/Common/IBox/HeadingIBox.vue

@@ -2,7 +2,8 @@
   <IBox v-bind="$attrs">
     <div v-if="contentHeading" class="ibox-heading">
       <slot name="content-heading">
-        <h3 v-if="contentHeading.title"><i v-if="contentHeading.fa" :class="'fa ' + contentHeading.fa" /> {{ contentHeading.title }}</h3>
+        <h3 v-if="contentHeading.title"><i v-if="contentHeading.fa" :class="'fa ' + contentHeading.fa" /> {{
+          contentHeading.title }}</h3>
         <small v-if="contentHeading.content"><i class="fa fa-tim" /> {{ contentHeading.content }}</small>
       </slot>
     </div>
@@ -11,7 +12,8 @@
 </template>
 
 <script>
-import IBox from './index'
+import IBox from './index.vue'
+
 export default {
   name: 'HeadingIBox',
   components: { IBox },
@@ -25,20 +27,22 @@ export default {
 </script>
 
 <style scoped>
-  .ibox-heading {
-    background-color: #f3f6fb;
-    border-bottom: none;
-    margin: -15px -20px 20px -20px;
-    padding: 20px
-  }
-  .ibox-heading h3 {
-    font-weight: 200;
-    font-size: 24px;
-    margin-top: 5px;
-    margin-bottom: 10px;
-    line-height: 1.1;
-  }
-  .ibox .el-card__body {
-   background-color: #f3f6fb;
-  }
+.ibox-heading {
+  background-color: #f3f6fb;
+  border-bottom: none;
+  margin: -15px -20px 20px -20px;
+  padding: 20px
+}
+
+.ibox-heading h3 {
+  font-weight: 200;
+  font-size: 24px;
+  margin-top: 5px;
+  margin-bottom: 10px;
+  line-height: 1.1;
+}
+
+.ibox .el-card__body {
+  background-color: #f3f6fb;
+}
 </style>

src/components/Common/IBox/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <el-card :class="'ibox ' + type" :shadow="shadow" v-bind="$attrs">
+    <template v-if="title" #header>
+      <slot name="header">
+        <div v-if="title" slot="header" class="clearfix ibox-title">
+          <i v-if="fa" :class="'fa ' + fa" />
+          <h5>{{ title }}</h5>
+        </div>
+      </slot>
+    </template>
+    <slot />
+  </el-card>
+</template>
+
+<script>
+export default {
+  name: 'IBox',
+  props: {
+    title: {
+      type: String,
+      default: () => null
+    },
+    fa: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'default'
+    },
+    shadow: {
+      type: String,
+      default: 'never'
+    }
+  },
+  computed: {
+    iClass() {
+      return this.type
+    }
+  }
+}
+</script>
+
+<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-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 {
+  display: block;
+  float: none;
+  margin-top: 0;
+  position: relative;
+  padding: 0;
+  text-align: right;
+}
+
+.fa {
+  font-size: 14px;
+}
+
+.ibox :deep(.el-card__body) {
+  //padding: 30px 30px 20px 30px; // 这个设置会影响详情中的 quick update 和 relations
+  color: var(--color-icon-primary);
+}
+</style>

src/components/Common/QuickActions/action.vue

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

src/components/Common/QuickActions/index.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import IBox from '@/components/IBox'
-import ActionItem from './action'
+import IBox from '@/components/Common/IBox/index.vue'
+import ActionItem from './action.vue'
 
 // 查看 views/users/users/UserDetail/UserInfo.vue 使用样例
 export default {
@@ -27,7 +27,7 @@ export default {
     title: {
       type: String,
       default() {
-        return this.$t('QuickUpdate')
+        return 'QuickUpdate'
       }
     },
     actions: {
@@ -39,11 +39,11 @@ export default {
 </script>
 
 <style scoped>
-.quick-actions ::v-deep table {
+.quick-actions :deep(table) {
   width: 100%;
 }
 
-.quick-actions ::v-deep tr > td {
+.quick-actions :deep(tr > td) {
   line-height: 1.43;
   padding: 8px 0;
   vertical-align: top;
@@ -51,11 +51,11 @@ export default {
   width: 50%;
 }
 
-.quick-actions ::v-deep tr > td > span:last-child {
+.quick-actions :deep(tr > td > span:last-child) {
   float: right;
 }
 
-.quick-actions ::v-deep button {
+.quick-actions :deep(button) {
   padding: 4px 5px;
   font-size: 13px;
   min-width: 65px;

src/components/Dashboard/ColumnChart.vue

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

src/components/Dashboard/DataCard.vue

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

src/components/Dashboard/Echart.vue

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

src/components/Dashboard/LineChart.vue

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

src/components/Dashboard/ProgressChart.vue

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

src/components/Dashboard/RankTable.vue

@@ -9,7 +9,7 @@
       class="table"
       style="width: 100%"
     >
-      <el-table-column :label="$tc('Ranking')">
+      <el-table-column :label="$tc('Ranking')" width="100">
         <template #header>
           <el-tooltip :content="$t('Ranking')" placement="top" :open-delay="500">
             <span style="cursor: pointer;">{{ $t('Ranking') }}</span>
@@ -107,16 +107,16 @@ export default {
   }
 }
 
-::v-deep .el-table td, .el-table th {
+:deep(.el-table td, .el-table th) {
   padding: 5px 0;
 }
 
-::v-deep .el-table th, .el-table tr {
+:deep(.el-table th, .el-table tr) {
   background-color: #F5F6F7 !important;
 
 }
 
-::v-deep .el-table .cell {
+:deep(.el-table .cell) {
   white-space: nowrap;
 }
 </style>