chore(deps): bump cipher-base from 1.0.4 to 1.0.6

Bumps [cipher-base](https://github.com/crypto-browserify/cipher-base) from 1.0.4 to 1.0.6.
- [Changelog](https://github.com/browserify/cipher-base/blob/master/CHANGELOG.md)
- [Commits](https://github.com/crypto-browserify/cipher-base/compare/v1.0.4...v1.0.6)

---
updated-dependencies:
- dependency-name: cipher-base
  dependency-version: 1.0.6
  dependency-type: indirect
...

Signed-off-by: dependabot[bot] <support@github.com>

.eslintrc.js

@@ -14,64 +14,97 @@ module.exports = {
     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': [
+      2,
+      {
+        singleline: 10,
+        multiline: {
+          max: 1,
+          allowFirstLine: false
+        }
       }
-    }],
+    ],
     'vue/singleline-html-element-content-newline': 'off',
     'vue/multiline-html-element-content-newline': 'off',
     'vue/name-property-casing': ['error', 'PascalCase'],
     'vue/no-v-html': '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 +135,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 +179,125 @@ 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\\.]+$' // For import paths
+        ],
+        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,11 @@
+module.exports = {
+  singleQuote: true,
+  semi: false,
+  trailingComma: 'none',
+  printWidth: 100,
+  tabWidth: 2,
+  useTabs: false,
+  bracketSpacing: true,
+  arrowParens: 'avoid',
+  endOfLine: 'auto'
+}

Dockerfile

@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20240723_084702 AS stage-build
+FROM jumpserver/lina-base:20250901_103352 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` 配置正确。

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,7 +2,7 @@
   "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",
@@ -30,6 +30,8 @@
     "@ztree/ztree_v3": "3.5.44",
     "axios": "0.28.0",
     "axios-retry": "^3.1.9",
+    "babel-loader": "^10.0.0",
+    "cache-loader": "^4.1.0",
     "caniuse-lite": "^1.0.30001642",
     "cron-parser": "^4.0.0",
     "crypto-js": "^4.1.1",
@@ -38,7 +40,8 @@
     "deepmerge": "^4.2.2",
     "dompurify": "^3.1.6",
     "echarts": "4.7.0",
-    "element-ui": "2.15.14",
+    "element-ui": "^2.15.14",
+    "elementui-lts": "^2.16.0",
     "eslint-plugin-html": "^6.0.0",
     "highlight.js": "^11.9.0",
     "install": "^0.13.0",
@@ -67,6 +70,7 @@
     "npm": "^7.8.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "3.3.0",
+    "sortablejs": "^1.15.6",
     "v-sanitize": "^0.0.13",
     "vue": "2.6.10",
     "vue-codemirror": "4.0.6",
@@ -75,12 +79,12 @@
     "vue-i18n": "^8.15.5",
     "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",
     "vuejs-logger": "^1.5.4",
     "vuex": "3.1.0",
+    "watermark-js-plus": "^1.5.8",
     "xss": "^1.0.14",
     "xterm": "^4.5.0",
     "xterm-addon-fit": "^0.3.0",
@@ -94,17 +98,18 @@
     "@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-core": "6.26.3",
     "babel-eslint": "10.0.1",
     "babel-jest": "23.6.0",
     "chalk": "2.4.2",
     "compression-webpack-plugin": "^6.1.1",
     "connect": "3.6.6",
     "deasync": "^0.1.29",
-    "element-theme-chalk": "^2.13.1",
     "eslint": "^5.15.3",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-spellcheck": "^0.0.20",
     "eslint-plugin-vue": "5.2.2",
     "eslint-plugin-vue-i18n": "^0.3.0",
     "github-markdown-css": "^5.1.0",
@@ -113,6 +118,8 @@
     "less-loader": "^5.0.0",
     "lint-staged": "^10.1.2",
     "mockjs": "1.0.1-beta3",
+    "prettier": "^3.6.2",
+    "pretty-bytes": "^5.6.0",
     "runjs": "^4.3.2",
     "sass": "~1.32.6",
     "sass-loader": "^7.1.0",
@@ -121,9 +128,10 @@
     "serve-static": "^1.16.0",
     "strip-ansi": "^7.1.0",
     "svg-sprite-loader": "4.1.3",
-    "svgo": "1.2.4",
+    "svgo": "1.2.2",
     "vue-i18n-extract": "^1.1.1",
-    "vue-template-compiler": "2.6.10"
+    "vue-template-compiler": "2.6.10",
+    "webpack": "^4.28.4"
   },
   "engines": {
     "node": ">=8.9",

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">
@@ -20,52 +20,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>

src/App.vue

@@ -5,14 +5,90 @@
 </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()
+      }
+    }
+  },
+  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/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,24 +1,26 @@
 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: {
-      component: Select2,
-      label: vm.$t('Assets'),
+      component: AssetSelect,
+      label: vm.$t('Asset'),
       rules: [Required],
       el: {
-        multiple: true,
-        ajax: {
-          url: '/api/v1/assets/assets/',
-          transformOption: (item) => {
-            return { label: item.name + '(' + item.address + ')', value: item.id }
-          }
-        }
+        multiple: false
       },
       hidden: () => {
         return vm.platform || vm.asset
@@ -70,11 +72,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 +91,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 +117,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 +230,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

@@ -11,7 +11,7 @@
 
 <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'), ['assets']],
         [this.$t('Secret'), [
           'secret_type', 'password', 'ssh_key', 'token',
           'access_key', 'passphrase', 'api_key',

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

@@ -24,7 +24,7 @@
 <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'
 
 export default {
@@ -184,7 +184,7 @@ export default {
     },
     handleCloseDrawer() {
       this.iVisible = false
-      Reflect.deleteProperty(this.$route.query, 'flag')
+      // Reflect.deleteProperty(this.$route.query, 'flag')
     },
     handleAccountOperation(id, path, data) {
       this.$axios.post(`/api/v1/accounts/accounts/${id}/${path}/`, data).then((res) => {

src/components/Apps/AccountListTable/AccountList.vue

@@ -50,9 +50,15 @@
 </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'
@@ -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,
@@ -171,9 +182,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 +216,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 +282,17 @@ 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 +323,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 +339,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
@@ -322,7 +362,7 @@ export default {
             can: ({ selectedRows }) => {
               return selectedRows.length > 0 &&
                 ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
-                !this.$store.getters.currentOrgIsRoot
+                !this.$store.getters.currentOrgIsRoot && vm.$hasPerm('accounts.verify_account')
             },
             callback: function({ selectedRows }) {
               const ids = selectedRows.map(v => {
@@ -388,9 +428,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')
       }
@@ -430,11 +473,12 @@ 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/RemoveAccount.vue

@@ -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',

src/components/Apps/AccountListTable/UpdateSecretInfo.vue

@@ -23,7 +23,7 @@
 <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'
 
 export default {

src/components/Apps/AccountListTable/ViewSecret.vue

@@ -61,7 +61,7 @@
 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',

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'
           },
           {

src/components/Apps/AssetSelect/index.vue

@@ -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,

src/components/Apps/AssetTreeTable/index.vue

@@ -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/ChatAi/components/ChitChat/ChatInput.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="chat-action">
+    <div v-if="hasPrompt" class="chat-action">
       <Select2
         v-model="select.value"
         :disabled="isLoading || isSelectDisabled"
@@ -36,6 +36,10 @@ export default {
     expanded: {
       type: Boolean,
       default: false
+    },
+    hasPrompt: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -46,7 +50,7 @@ export default {
         url: '/api/v1/settings/chatai-prompts/',
         value: '',
         multiple: false,
-        placeholder: this.$t('Prompt'),
+        placeholder: this.$t('Role'),
         ajax: {
           transformOption: (item) => {
             return { label: item.name, value: item.content }

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

@@ -33,7 +33,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 +41,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">
@@ -78,9 +77,9 @@
 <script>
 import MessageText from './MessageText.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()
 
@@ -93,6 +92,10 @@ export default {
       type: Object,
       default: () => {
       }
+    },
+    isTerminal: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -142,6 +145,9 @@ export default {
       if (value === 'copy') {
         copy(this.item.result.content)
       }
+    },
+    handleInsertCode(code) {
+      this.$emit('insert-code', code)
     }
   }
 }

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() {
@@ -45,10 +49,10 @@ export default {
     this.init()
   },
   updated() {
-    this.addCopyEvents()
+    this.addEvents()
   },
   destroyed() {
-    this.removeCopyEvents()
+    this.removeEvents()
   },
   methods: {
     init() {
@@ -65,30 +69,68 @@ 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)
+      })
+    },
+    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,6 +140,7 @@ export default {
 <style lang="scss" scoped>
 .markdown-body {
   font-size: 13px;
+  max-width: 300px;;
 
   &::v-deep p {
     margin-bottom: 0 !important;
@@ -115,26 +158,46 @@ export default {
 
   &::v-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;
+          }
         }
       }
     }
@@ -178,6 +241,7 @@ export default {
   0% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }

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

@@ -17,7 +17,7 @@
           </div>
         </div>
       </div>
-      <ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" />
+      <ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" :is-terminal="isTerminal" @insert-code="insertCode" />
     </div>
     <div class="input-box">
       <el-button
@@ -28,7 +28,7 @@
         size="small"
         @click="onStopHandle"
       >{{ $tc('Stop') }}</el-button>
-      <ChatInput ref="chatInput" :expanded="expanded" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
+      <ChatInput ref="chatInput" :expanded="expanded" :has-prompt="!isTerminal" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
     </div>
   </div>
 </template>
@@ -37,7 +37,7 @@
 import ChatInput from './ChatInput.vue'
 import ChatMessage from './ChatMessage.vue'
 import { mapState } from 'vuex'
-import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/socket'
+import { closeWebSocket, createWebSocket, onSend, ws } from '@/utils/request'
 import { getInputFocus, useChat } from '../../useChat.js'
 
 const {
@@ -68,7 +68,10 @@ export default {
       prompt: '',
       conversationId: '',
       showIntroduction: false,
-      introduction: []
+      introduction: [],
+      terminalContext: null,
+      isTerminal: false,
+      sessionChat: {}
     }
   },
   computed: {
@@ -100,6 +103,9 @@ export default {
       this.showIntroduction = true
       this.conversationId = ''
       this.$refs.chatInput.select.value = ''
+      if (this.terminalContext) {
+        this.prompt = this.terminalContext.content || ''
+      }
       const chat = {
         message: {
           content: this.$t('ChatHello'),
@@ -150,6 +156,32 @@ export default {
       addMessageToActiveChat(data)
       setLoading(true)
     },
+    onTerminalContext(terminalContext) {
+      const originSessionId = this.terminalContext?.sessionId
+      const newSessionId = terminalContext.sessionId || ''
+      if (originSessionId) {
+        this.saveSessionChat(originSessionId)
+      }
+      this.terminalContext = terminalContext
+      this.isTerminal = true
+      this.prompt = terminalContext.content || ''
+      if (originSessionId !== newSessionId) {
+        if (this.sessionChat[newSessionId]) {
+          clearChats()
+          for (const chat of this.sessionChat[newSessionId]) {
+            addChatMessageById(chat)
+          }
+        } else {
+          this.onNewChat()
+        }
+      }
+    },
+    saveSessionChat(sessionId) {
+      if (this.terminalContext) {
+        this.sessionChat[sessionId] = JSON.parse(JSON.stringify(this.activeChat.chats))
+      }
+    },
+
     onSendHandle(value) {
       this.showIntroduction = false
       this.socket = ws || {}
@@ -204,6 +236,15 @@ export default {
     sendIntroduction(item) {
       this.showIntroduction = false
       this.onSendHandle(item.content)
+    },
+    insertCode(code) {
+      this.sendPostMessage({
+        name: 'INSERT_TERMINAL_CODE',
+        data: code.replace(/^[\s\r\n]+|[\s\r\n]+$/g, '')
+      })
+    },
+    sendPostMessage(data) {
+      window.parent.postMessage(data)
     }
   }
 }

src/components/Apps/ChatAi/index.vue

@@ -1,5 +1,6 @@
 <template>
   <DrawerPanel
+    v-if="visible"
     ref="drawer"
     :default-show-panel="!!defaultShowPanel"
     :expanded="expanded"
@@ -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 { ws } from '@/utils/request'
 import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
+import { ObjectLocalStorage } from '@/utils/common'
+import { mapGetters } from 'vuex'
 
+const aiPannelLocalStorage = new ObjectLocalStorage('ai_panel_settings')
 export default {
   components: {
     DrawerPanel,
@@ -72,23 +76,68 @@ export default {
   },
   data() {
     return {
+      visible: false,
       active: 'chat',
       robotUrl: require('@/assets/img/robot-assistant.png'),
       height: '400px',
       expanded: false,
-      clientOffset: {}
+      clientOffset: {},
+      currentTerminalContent: {}
     }
   },
+  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)
+      }
+    },
     handlePostMessage() {
       window.addEventListener('message', (event) => {
         if (event.data === 'show-chat-panel') {
           this.$refs.drawer.show = true
+          this.initWebSocket()
+          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,6 +145,11 @@ export default {
       this.$refs.drawer.handleHeaderMoveDown(event)
     },
     handleMouseMoveUp(event) {
+      // 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)
     },
     initWebSocket() {
@@ -107,12 +161,20 @@ export default {
       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)
+      console.log('AI panel settings saved:', this.expanded)
+    },
+    updateExpandedState(expanded) {
+      this.expanded = expanded
+      this.height = expanded ? '100%' : '400px'
     },
     onNewChat() {
       this.active = 'chat'

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

@@ -34,7 +34,7 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { openTaskPage } from '@/utils/jms'
+import { openTaskPage } from '@/utils/jms/index'
 
 export default {
   name: 'GatewayDialog',

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'
@@ -85,6 +85,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']

src/components/Apps/LeakPasswords/LeakPasswordList.vue

@@ -0,0 +1,59 @@
+<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: false,
+        hasImport: 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,76 @@
+<template>
+  <div>
+    <div>
+      <el-button
+        size="mini"
+        type="primary"
+        @click="onOpenDialog"
+      >
+        {{ $tc('View') }}
+      </el-button>
+    </div>
+    <Dialog
+      :destroy-on-close="true"
+      :show-cancel="false"
+      :show-confirm="false"
+      :title="title"
+      :visible.sync="visible"
+      v-bind="$attrs"
+      width="40%"
+      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 this.$t('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 {
@@ -41,15 +42,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 +64,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',
@@ -44,15 +45,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 +89,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/Apps/ResourceActivity/index.vue

@@ -28,10 +28,10 @@
 </template>
 
 <script>
-import IBox from '@/components/IBox/index.vue'
+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

@@ -8,7 +8,7 @@
     :visible.sync="visible"
     class="dialog-content"
     v-bind="$attrs"
-    width="740px"
+    width="600px"
     @confirm="visible = false"
     v-on="$listeners"
   >
@@ -49,41 +49,47 @@
           </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;"
               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"
             type="primary"
@@ -92,7 +98,8 @@
             {{ this.$t('Confirm') }}
           </el-button>
           <el-button
-            v-if="subTypeSelected==='face'&&!isFaceCaptureVisible"
+            v-if="subTypeSelected === 'face'"
+            v-show="!isFaceCaptureVisible"
             class="confirm-btn"
             size="mini"
             type="primary"
@@ -100,6 +107,16 @@
           >
             {{ this.$tc('VerifyFace') }}
           </el-button>
+          <el-button
+            v-if="subTypeSelected === 'passkey'"
+            v-loading="passkeyVisible"
+            class="confirm-btn"
+            size="mini"
+            type="primary"
+            @click="handlePasskeyVerify"
+          >
+            {{ this.$tc('Next') }}
+          </el-button>
         </el-col>
       </el-row>
     </div>
@@ -107,7 +124,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 +158,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: {
@@ -174,7 +195,7 @@ 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.$axios.get(confirmUrl, { params: { confirm_type: confirmType } }).then((data) => {
         this.confirmTypeRequired = data.confirm_type
 
         if (this.confirmTypeRequired === 'relogin') {
@@ -204,8 +225,8 @@ export default {
     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 => {
+    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
@@ -224,6 +245,26 @@ export default {
         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 => {
@@ -247,6 +288,13 @@ export default {
     handleFaceCapture() {
       this.startFaceCapture()
     },
+    onSuccess() {
+      this.secretValue = ''
+      this.visible = false
+      this.$nextTick(() => {
+        this.callback()
+      })
+    },
     handleConfirm() {
       if (this.confirmTypeRequired === 'relogin') {
         return this.logout()
@@ -262,11 +310,7 @@ export default {
       }
 
       this.$axios.post(`/api/v1/authentication/confirm/`, data).then(() => {
-        this.secretValue = ''
-        this.visible = false
-        this.$nextTick(() => {
-          this.callback()
-        })
+        this.onSuccess()
       }).catch((err) => {
         this.$message.error(err.message || this.$tc('ConfirmFailed'))
         this.faceCaptureUrl = null

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) => {

src/components/Cards/DetailCard/ItemValue.vue

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

src/components/Cards/DetailCard/auto.vue

@@ -12,9 +12,9 @@
 
 <script>
 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,8 +129,18 @@ 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')) {

src/components/Cards/DetailCard/index.vue

@@ -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 {

src/components/Cards/RelationCard/index.vue

@@ -49,7 +49,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 {

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

@@ -15,7 +15,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
@@ -89,7 +89,7 @@
 </template>
 
 <script>
-import { toSentenceCase } from '@/utils/common'
+import { toSentenceCase } from '@/utils/common/index'
 import Icon from '@/components/Widgets/Icon/index.vue'
 
 export default {

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/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 {

src/components/Dashboard/ColumnChart.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="content">
+  <div>
     <echarts
       ref="echarts"
       :options="options"

src/components/Dashboard/Echart.vue

@@ -0,0 +1,57 @@
+<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.totalCharts) {
+      window.totalCharts = 0
+    }
+    window.totalCharts++
+  },
+  methods: {
+    onFinished() {
+      if (!window.finishedCharts) {
+        window.finishedCharts = 0
+      }
+      window.finishedCharts++
+      if (window.finishedCharts === window.totalCharts) {
+        window.echartsFinished = true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+</style>

src/components/Dashboard/LineChart.vue

@@ -5,10 +5,8 @@
       :options="options"
       :autoresize="true"
       theme="light"
-      class="disabled-when-print"
       @finished="getDataUrl"
     />
-    <img v-if="dataUrl" :src="dataUrl" class="enabled-when-print" style="display: none;width: 100%;">
   </div>
 </template>
 
@@ -110,7 +108,6 @@ export default {
             },
             axisLabel: {
               textStyle: {
-                // 坐标轴颜色
                 color: '#8F959E'
               }
             },
@@ -155,7 +152,7 @@ export default {
             type: 'line',
             smooth: true,
             areaStyle: {
-            // 区域填充样式
+              // 区域填充样式
               normal: {
                 color: new echarts.graphic.LinearGradient(
                   0,
@@ -187,7 +184,7 @@ export default {
             type: 'line',
             smooth: true,
             areaStyle: {
-            // 区域填充样式
+              // 区域填充样式
               normal: {
                 color: new echarts.graphic.LinearGradient(
                   0,
@@ -220,23 +217,44 @@ export default {
   },
   watch: {
     range() {
-      this.getMetricData()
+      this.genSnapshot()
+    },
+    datesMetrics() {
+      this.genSnapshot()
+    },
+    primaryData() {
+      this.genSnapshot()
+    },
+    secondaryData() {
+      this.genSnapshot()
     }
   },
   mounted() {
-    this.getMetricData()
+    setTimeout(() => {
+      this.getMetricData()
+    }, 1000)
+    const vm = this
+    window.onbeforeprint = function() {
+      vm.$refs.echarts.resize()
+    }
   },
   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 +263,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/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>

src/components/Dashboard/RealTimeSummary.vue

@@ -6,7 +6,7 @@
     <div class="content">
       <el-row justify="space-between" type="flex">
         <el-col v-for="item of summaryItems" :key="item.title" :md="8" :sm="12" :xs="12">
-          <SummaryCard :body="item.body" :title="item.title" />
+          <SummaryCard :title="item.title" v-bind="item.body" />
         </el-col>
       </el-row>
     </div>
@@ -38,7 +38,7 @@ export default {
         {
           title: this.$t('OnlineSessions'),
           body: {
-            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
+            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' } },
             count: this.counter.total_count_online_sessions,
             disabled: !this.$hasPerm('terminal.view_session')
           }
@@ -46,7 +46,7 @@ export default {
         {
           title: this.$t('CurrentConnectionUsers'),
           body: {
-            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' }},
+            route: { name: `SessionList`, params: { activeMenu: 'OnlineList' } },
             count: this.counter.total_count_online_users,
             disabled: !this.$hasPerm('terminal.view_session')
           }

src/components/Dashboard/RingChart.vue

@@ -33,7 +33,7 @@ export default {
 
       const formatTitle = (text) => {
         if (!text) return ''
-        const maxLength = 23
+        const maxLength = 25
         const lines = []
         for (let i = 0; i < text.length; i += maxLength) {
           lines.push(text.slice(i, i + maxLength))
@@ -88,6 +88,7 @@ export default {
           {
             name: title,
             type: 'pie',
+            minAngle: 5,
             radius: ['72%', '90%'],
             avoidLabelOverlap: false,
             itemStyle: {

src/components/Dashboard/SummaryCountCard.vue

@@ -7,9 +7,9 @@
       <SummaryCard
         v-for="item of items"
         :key="item.title"
-        :body="item.body"
         :title="item.title"
         class="summary-card"
+        v-bind="item.body"
       />
     </div>
   </div>

src/components/Dashboard/SwitchDate.vue

@@ -16,11 +16,13 @@
 <script>
 export default {
   props: {
-    days: {
+    name: {
       type: String,
-      default: () => {
-        return localStorage.getItem('dashboardDays') || '7'
-      }
+      default: 'dashboardDays'
+    },
+    days: {
+      type: [String, Number],
+      default: null
     },
     options: {
       type: Array,
@@ -47,8 +49,28 @@ export default {
       iOptions: this.options.length > 0 ? this.options : defaultOptions
     }
   },
+  created() {
+    let days = this.days
+    if (!days) {
+      days = this.$route.query.days
+    }
+    if (!days) {
+      days = localStorage.getItem(this.name)
+    }
+    if (!days) {
+      days = '7'
+    }
+    if (days && days !== this.select) {
+      this.select = days
+      this.$emit('change', days)
+    }
+  },
+  mounted() {
+    this.$emit('change', this.select)
+  },
   methods: {
     onChange(val) {
+      localStorage.setItem(this.name, val)
       this.$emit('change', val)
     }
   }

src/components/Dialog/ProcessingDialog.vue

@@ -4,7 +4,7 @@
     :visible="iVisible"
     class="processing-dialog"
     height="300"
-    title="Processing"
+    :title="$tc('Processing')"
     width="300"
     @confirm="iVisible=false"
   >

src/components/Dialog/Secret.vue

@@ -28,7 +28,7 @@
 
 <script>
 import i18n from '@/i18n/i18n'
-import { copy } from '@/utils/common'
+import { copy } from '@/utils/common/index'
 import Dialog from '@/components/Dialog/index'
 
 export default {

src/components/Dialog/index.vue

@@ -2,6 +2,7 @@
   <transition name="dialog-fade">
     <el-dialog
       :append-to-body="true"
+      :class="{ shadow: shadow }"
       :modal-append-to-body="true"
       :title="title"
       :top="top"
@@ -46,7 +47,7 @@ export default {
     },
     width: {
       type: String,
-      default: '60%'
+      default: '800px'
     },
     showConfirm: {
       type: Boolean,
@@ -79,6 +80,10 @@ export default {
     maxWidth: {
       type: String,
       default: '1200px'
+    },
+    shadow: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -101,14 +106,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.dialog.shadow ::v-deep .el-dialog {
+  box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.6);
+}
+
 .dialog ::v-deep .el-dialog {
   border-radius: 0.3em;
   max-width: min(100vw, 1500px);
 
-  //.el-form, .form-buttons {
-  //  margin-left: 20px;
-  //}
-
   .form-group-header {
     margin-left: 20px;
   }
@@ -132,7 +137,7 @@ export default {
 
   &__body {
     padding: 20px 30px;
-      font-size: 13px;
+    font-size: 13px;
 
     &:has(.el-table) {
       background: #f3f3f4;

src/components/Drawer/index.vue

@@ -30,6 +30,8 @@
 </template>
 
 <script>
+import { getDrawerWidth } from '@/utils/common/index'
+
 export default {
   props: {
     title: {
@@ -38,7 +40,9 @@ export default {
     },
     size: {
       type: String,
-      default: '768px'
+      default: () => {
+        return getDrawerWidth()
+      }
     },
     component: {
       type: [String, Function, Object],
@@ -103,6 +107,16 @@ export default {
   }
 }
 
+@media (max-width: 992px) {
+  .drawer ::v-deep {
+    .el-form-item {
+      display: flex;
+      flex-direction: column;
+      gap: 0.3rem;
+    }
+  }
+}
+
 .drawer {
   ::v-deep {
     min-width: 565px;
@@ -133,6 +147,7 @@ export default {
 
       &.detail-card {
         padding-right: 0;
+        margin-top: unset;
       }
 
       // Detail 中
@@ -268,6 +283,7 @@ export default {
     }
 
     .drawer__content, .tab-page-content {
+      height: 100%;
       background: #f3f3f3;
     }
 

src/components/Form/AutoDataForm/index.vue

@@ -1,25 +1,27 @@
 <template>
-  <DataForm
-    v-if="!loading"
-    ref="dataForm"
-    :fields="totalFields"
-    :form="iForm"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <template
-      v-for="(group, i) in groups"
-      :slot="'id:'+group.name"
+  <div>
+    <DataForm
+      v-if="!loading"
+      ref="dataForm"
+      :fields="totalFields"
+      :form="iForm"
+      v-bind="$attrs"
+      v-on="$listeners"
     >
-      <FormGroupHeader
-        v-if="!groupHidden(group, i)"
-        :key="'group-' + group.name"
-        :group="group"
-        :index="i"
-        :line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
-      />
-    </template>
-  </DataForm>
+      <template
+        v-for="(group, i) in groups"
+        :slot="'id:'+group.name"
+      >
+        <FormGroupHeader
+          v-if="!groupHidden(group, i)"
+          :key="'group-' + group.name"
+          :group="group"
+          :index="i"
+          :line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
+        />
+      </template>
+    </DataForm>
+  </div>
 </template>
 
 <script>
@@ -87,11 +89,12 @@ export default {
     }
   },
   mounted() {
+    // this.$log.debug('>>> Method: ', this.method)
     this.optionUrlMetaAndGenerateColumns()
   },
   methods: {
     async optionUrlMetaAndGenerateColumns() {
-      let data = { actions: {}}
+      let data = { actions: {} }
       if (this.url) {
         data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
       }
@@ -137,14 +140,11 @@ export default {
       this._cleanFormValue(this.iForm, this.remoteMeta)
     },
     setFieldError(name, error) {
+      error = error.replace(/[。.]+$/, '')
       const field = this.totalFields.find((v) => v.prop === name)
       if (!field) {
         return
       }
-      if (field.attrs.error === error) {
-        error += '.'
-      }
-
       if (typeof error === 'string') {
         field.el.errors = error
         field.attrs.error = error

src/components/Form/AutoDataForm/utils.js

@@ -4,7 +4,7 @@ import NestedField from '@/components/Form/AutoDataForm/components/NestedField.v
 import rules from '@/components/Form/DataForm/rules'
 import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
 import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
-import { assignIfNot, toSentenceCase } from '@/utils/common'
+import { assignIfNot, toSentenceCase } from '@/utils/common/index'
 import TagInput from '@/components/Form/FormFields/TagInput.vue'
 import i18n from '@/i18n/i18n'
 
@@ -177,7 +177,10 @@ export class FormFieldGenerator {
     const systemLang = document.cookie.django_language
     if (helpTextAsPlaceholder !== undefined) {
       helpTextAsPlaceholder = !!helpTextAsPlaceholder
-    } else if (placeholderType.indexOf(field.type) === -1 && placeholderComponent.indexOf(field.component) === -1) {
+    } else if (
+      placeholderType.indexOf(field.type) === -1 &&
+      placeholderComponent.indexOf(field.component) === -1
+    ) {
       helpTextAsPlaceholder = false
     } else if ((helpTextWordLength <= 5 || helpText.length <= 10) && systemLang === 'en') {
       helpTextAsPlaceholder = true

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

@@ -9,6 +9,7 @@
   >
     <template v-if="data.label" #label>
       <span :title="data.label">
+        <span v-if="data.required">* </span>
         {{ data.label }}
         <el-tooltip
           v-if="data.helpTip"
@@ -178,7 +179,7 @@ export default {
   computed: {
     // 解构运算符会处理 undefined 的情况
     componentProps: ({ data: { el }, propsInner }) => ({ ...el, ...propsInner }),
-    hasReadonlyContent: ({ data: { type }}) => _includes(['input', 'select'], type),
+    hasReadonlyContent: ({ data: { type } }) => _includes(['input', 'select'], type),
     hiddenStatus: ({ data: { hidden = () => false }, data, value }) => hidden(value, data),
     enableWhenStatus: ({ data: { enableWhen }, value }) => getEnableWhenStatus(enableWhen, value),
     // 是否显示

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

@@ -1,5 +1,5 @@
 <template>
-  <el-form ref="elForm" :model="value" class="el-form-renderer" v-bind="$attrs">
+  <el-form ref="elForm" :model="value" class="el-form-renderer" v-bind="$attrs" @submit.native.prevent>
     <template v-for="item in innerContent">
       <slot v-if="!isHidden(item)" :name="`id:${item.id}`" />
       <component

src/components/Form/DataForm/index.vue

@@ -8,7 +8,8 @@
       :form="basicForm"
       :label-position="iLabelPosition"
       class="form-fields"
-      label-width="25%"
+      :label-width="labelWidth"
+      :style="{ '--label-width': labelWidth }"
       v-bind="$attrs"
       v-on="$listeners"
     >
@@ -70,8 +71,20 @@
 
 <script>
 import ElFormRender from './components/el-form-renderer'
-import { randomString } from '@/utils/string'
-import { scrollToError } from '@/utils'
+import { randomString } from '@/utils/common/index'
+
+const scrollToError = (
+  el,
+  scrollOption = {
+    behavior: 'smooth',
+    block: 'center'
+  }
+) => {
+  setTimeout(() => {
+    const isError = el.getElementsByClassName('is-error')
+    isError[0].scrollIntoView(scrollOption)
+  }, 0)
+}
 
 export default {
   components: {
@@ -128,6 +141,10 @@ export default {
     labelPosition: {
       type: String,
       default: ''
+    },
+    labelWidth: {
+      type: String,
+      default: '25%'
     }
   },
   data() {
@@ -263,7 +280,7 @@ export default {
     }
 
     .el-form-item__content {
-      width: 75%;
+      width: calc(100% - var(--label-width));
       line-height: 32px;
 
       // 禁用的输入框
@@ -337,7 +354,7 @@ export default {
 
   ::v-deep .form-buttons {
     margin-top: 30px;
-    margin-left: 25%;
+    margin-left: var(--label-width);
   }
 }
 

src/components/Form/FormFields/AttrInput.vue

@@ -27,7 +27,9 @@ export default {
     },
     beforeSubmit: {
       type: Function,
-      default: (val) => { return true }
+      default: (val) => {
+        return true
+      }
     }
   },
   data() {
@@ -50,14 +52,16 @@ export default {
 ::v-deep .el-select {
   width: 100%;
 }
+
 ::v-deep .el-form-item__content {
   width: 100% !important;
 }
+
 ::v-deep .form-buttons {
   margin: 0 !important;
 }
+
 .attr-input {
-  margin-top: -10px;
 }
 </style>
 

src/components/Form/FormFields/BasicTree.vue

@@ -47,6 +47,9 @@ export default {
   },
   computed: {
     iValue() {
+      if (!this.value) {
+        return []
+      }
       return this.value.map(item => {
         if (item.value) {
           return item.value

src/components/Form/FormFields/CronTab/Crontab.vue

@@ -361,9 +361,10 @@ export default {
     },
     // 填充表达式
     submitFill() {
+      const minMinutes = 60
       const crontabDiffMin = this.crontabDiff / 1000 / 60
-      if (crontabDiffMin > 0 && crontabDiffMin < 10) {
-        const msg = this.$tc('CrontabDiffError')
+      if (crontabDiffMin > 0 && crontabDiffMin < minMinutes) {
+        const msg = this.$t('CrontabDiffError', { minutes: minMinutes })
         this.$message.error(msg)
         return
       }

src/components/Form/FormFields/CronTab/components/Crontab-Hour.vue

@@ -10,15 +10,18 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="2">
         {{ this.$t('From') }}
-        <el-input-number v-model="cycle01" :max="60" :min="0" size="mini" /> -
-        <el-input-number v-model="cycle02" :max="60" :min="0" size="mini" /> {{ this.$t('Hour') }}
+        <el-input-number v-model="cycle01" :max="23" :min="0" size="mini" />
+        -
+        <el-input-number v-model="cycle02" :max="23" :min="0" size="mini" />
+        {{ this.$t('Hour') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
         {{ this.$t('Every') }}
-        <el-input-number v-model="average02" :max="60" :min="1" size="mini" /> {{ this.$t('Hour') }} {{ this.$t('ExecuteOnce') }}
+        <el-input-number v-model="average02" :max="23" :min="1" size="mini" />
+        {{ this.$t('Hour') }} {{ this.$t('ExecuteOnce') }}
       </el-radio>
     </el-form-item>
 
@@ -32,7 +35,7 @@
           multiple
           style="width:100%"
         >
-          <el-option v-for="item in 24" :key="item" :value="item-1">{{ item-1 }}</el-option>
+          <el-option v-for="item in 24" :key="item" :value="item-1">{{ item - 1 }}</el-option>
         </el-select>
       </el-radio>
     </el-form-item>

src/components/Form/FormFields/CronTab/components/Crontab-Min.vue

@@ -9,7 +9,7 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
         {{ this.$t('From') }}
-        <el-input-number v-model="average02" :max="60" :min="1" size="mini" />
+        <el-input-number v-model="average02" :max="59" :min="1" size="mini" />
         {{ this.$t('Min') }} {{ this.$t('ExecuteOnce') }}
       </el-radio>
     </el-form-item>

src/components/Form/FormFields/CronTab/components/Crontab-Result.vue

@@ -13,7 +13,7 @@
 
 <script>
 import parser from 'cron-parser'
-import { toSafeLocalDateStr } from '@/utils/time'
+import { toSafeLocalDateStr } from '@/utils/common/time'
 
 export default {
   name: 'CrontabResult',

src/components/Form/FormFields/CronTab/index.vue

@@ -39,6 +39,13 @@ export default {
       showCron: false
     }
   },
+  watch: {
+    value: {
+      handler(val) {
+        this.crontabFill(val)
+      }
+    }
+  },
   methods: {
     crontabFill(value) {
       // 确定后回传的值

src/components/Form/FormFields/JSONManyToManySelect/AttrMatchResultDialog.vue

@@ -13,7 +13,7 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { DrawerListTable as ListTable } from '@/components'
+import ListTable from '@/components/Table/ListTable/index.vue'
 
 export default {
   name: 'AttrMatchResultDialog',

src/components/Form/FormFields/JSONManyToManySelect/ValueFormatter.vue

@@ -10,7 +10,7 @@
 
 <script>
 import BaseFormatter from '@/components/Table/TableFormatters/base.vue'
-import { setUrlParam } from '@/utils/common'
+import { setUrlParam } from '@/utils/common/index'
 
 export default {
   name: 'ValueFormatter',

src/components/Form/FormFields/JSONManyToManySelect/index.vue

@@ -42,9 +42,9 @@ import DataTable from '@/components/Table/DataTable/index.vue'
 import ValueFormatter from './ValueFormatter.vue'
 import AttrFormDialog from './AttrFormDialog.vue'
 import AttrMatchResultDialog from './AttrMatchResultDialog.vue'
-import { setUrlParam } from '@/utils/common'
+import { setUrlParam } from '@/utils/common/index'
 import { attrMatchOptions } from '@/components/const'
-import { toM2MJsonParams } from '@/utils/jms'
+import { toM2MJsonParams } from '@/utils/jms/index'
 
 export default {
   name: 'JSONManyToManySelect',
@@ -109,7 +109,7 @@ export default {
         columns: [
           { prop: 'name', label: this.$t('AttrName'), formatter: tableFormatter('name') },
           { prop: 'match', label: this.$t('Match'), formatter: tableFormatter('match') },
-          { prop: 'value', label: this.$t('AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs }},
+          { prop: 'value', label: this.$t('AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs } },
           {
             prop: 'action',
             label: this.$t('Action'),

src/components/Form/FormFields/PhoneInput.vue

@@ -5,7 +5,6 @@
         slot="prepend"
         :placeholder="$tc('Select')"
         :value="rawValue.code"
-        style="width: 105px;"
         @change="onChange"
       >
         <el-option
@@ -47,7 +46,7 @@ export default {
     }
   },
   mounted() {
-    const defaults = { code: localStorage.getItem('prePhoneCode') || '+86', phone: '' }
+    const defaults = { code: this.getDefaultCode(), phone: '' }
     this.rawValue = this.value || defaults
     this.$axios.get('/api/v1/common/countries/').then(res => {
       this.countries = res.map(item => {
@@ -57,6 +56,22 @@ export default {
     this.$emit('input', this.fullPhone)
   },
   methods: {
+    getDefaultCode() {
+      const mapper = {
+        'zh': '+86',
+        'en': '+1',
+        'ja': '+81',
+        'ko': '+82',
+        'fr': '+33',
+        'de': '+49',
+        'es': '+34',
+        'it': '+39',
+        'ru': '+7',
+        'ar': '+966'
+      }
+      const locale = this.$i18n.locale.split('-')[0]
+      return localStorage.getItem('prePhoneCode') || mapper[locale] || '+86'
+    },
     onChange(countryCode) {
       this.rawValue.code = countryCode
       this.onInputChange()
@@ -69,7 +84,11 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
+.el-select {
+  width: 85px;
+}
+
 .country-name {
   display: inline-block;
   width: 150px;

src/components/Form/FormFields/ProtocolSelector/ProtocolSettingDialog.vue

@@ -3,6 +3,7 @@
     v-if="$attrs.visible"
     :close-on-click-modal="false"
     :destroy-on-close="true"
+    :modal="false"
     :show-cancel="false"
     :show-confirm="false"
     :title="$tc('PlatformProtocolConfig') + '：' + protocol.name"
@@ -52,6 +53,7 @@ export default {
     const vm = this
     const platform = this.$route.query.platform
     return {
+      platform: '',
       loading: true,
       form: this.protocol,
       platformDetail: platform ? '#/console/assets/platforms/' + platform : '',
@@ -96,11 +98,29 @@ export default {
       }
     }
   },
+  async mounted() {
+    try {
+      const drawActionMeta = await this.$store.dispatch('common/getDrawerActionMeta')
+      const platform = drawActionMeta.row.platform.id
+      const name = drawActionMeta.row.platform.name
+
+      if (platform) {
+        this.platformDetail = `/ui/#/settings/platforms?id=${platform}&name=${name}`
+      } else {
+        this.platformDetail = ''
+      }
+    } catch (e) {
+      throw new Error(e)
+    }
+  },
   methods: {
     onSubmit(form) {
       this.protocol = Object.assign(this.protocol, form)
       this.$emit('update:visible', false)
       this.$emit('confirm', this.protocol)
+    },
+    openInNewTab() {
+      window.open(this.platformDetail, '_blank')
     }
   }
 }

src/components/Form/FormFields/TagInput.vue

@@ -78,16 +78,18 @@ export default {
   },
   data() {
     return {
-      filterTags: this.value,
       focus: false,
       filterValue: '',
-      isCheckShowPassword: this.replaceShowPassword,
-      component: this.autocomplete ? 'el-autocomplete' : 'el-input'
+      filterTags: this.value,
+      isCheckShowPassword: this.replaceShowPassword
     }
   },
   computed: {
     iPlaceholder() {
       return `${this.placeholder} (${this.$t('EnterToContinue')})`
+    },
+    component() {
+      return this.autocomplete !== null ? 'el-autocomplete' : 'el-input'
     }
   },
   watch: {
@@ -113,8 +115,9 @@ export default {
       if (!this.filterTags.includes(this.filterValue)) {
         this.filterTags.push(this.filterValue)
         this.filterValue = ''
-        this.$emit('change', this.filterTags)
       }
+      this.$emit('change', this.filterTags)
+      this.$emit('input', this.filterTags)
       this.$refs.SearchInput.focus()
     },
     handleTagClick(v, k) {
@@ -151,7 +154,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  padding: 1px 2px 1px;
+  //padding: 0 6px;
   border: 1px solid #dcdee2;
   border-radius: 1px;
   background-color: #fff;
@@ -162,8 +165,10 @@ export default {
   }
 
   & ::v-deep .el-tag {
-    margin-top: 1px;
+    margin-bottom: 2px;
+    margin-top: 2px;
     font-family: sans-serif !important;
+    margin-left: 5px;
   }
 
   & ::v-deep .el-autocomplete {
@@ -177,7 +182,8 @@ export default {
   & ::v-deep .el-input__inner {
     max-width: 100%;
     border: none;
-    padding-left: 10px;
+    padding-left: 12px;
+    height: 28px;
   }
 }
 
@@ -187,7 +193,7 @@ export default {
 }
 
 .filter-field ::v-deep .el-input__inner {
-  height: 28px;
+  height: 27px !important;
 }
 
 .show-password {

src/components/Form/FormFields/TransferSelect.vue

@@ -68,7 +68,7 @@ export default {
       return { label: item.name, value: item.id }
     })
     const url = vm.url || vm.ajax.url
-    const getPageData = async({ pageIndex, pageSize, keyword }) => {
+    const getPageData = async ({ pageIndex, pageSize, keyword }) => {
       const limit = pageSize
       const offset = (pageIndex - 1) * pageSize
       const params = {

src/components/Form/FormFields/UpdateSelect.vue

@@ -24,7 +24,7 @@
 
 <script>
 import Select2 from './Select2.vue'
-import { hasUUID } from '@/utils/common'
+import { hasUUID } from '@/utils/common/index'
 
 export default {
   components: {