feat: Asset permossion add user selection component and its dialog

This reverts commit 59d6df5dce.

Dockerfile

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

package.json

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

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

@@ -6,10 +6,17 @@ import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSettin
 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'),
+      label: vm.$t('Asset'),
       rules: [Required],
       el: {
         multiple: true,
@@ -70,11 +77,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 +96,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: () => {

src/components/Apps/AccountCreateUpdateForm/index.vue

@@ -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/AccountList.vue

@@ -51,7 +51,7 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import { accountOtherActions, accountQuickFilters, connectivityMeta } from './const'
+import { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const'
 import { openTaskPage } from '@/utils/jms'
 import {
   AccountConnectFormatter,
@@ -182,13 +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}`
               }
@@ -208,15 +216,19 @@ export default {
             width: '80px',
             formatter: AccountConnectFormatter,
             formatterArgs: {
-              buttonIcon: 'fa fa-desktop',
-              url: '/api/v1/assets/assets/{id}',
-              can: () => this.currentUserIsSuperAdmin,
-              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 ''
               }
             }
           },
@@ -229,12 +241,20 @@ export default {
             }
           },
           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) {
@@ -264,10 +284,15 @@ export default {
             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)
             }

src/components/Apps/AccountListTable/const.js

@@ -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,162 +36,191 @@ 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 }) => {
-      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: 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'),
-    has: () => {
-      return !vm.asset
-    },
-    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(() => {
+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
+
+        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: '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,
-    can: () => vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot,
-    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.add_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
+      }
     }
-  },
-  {
-    name: 'MoveToOther',
-    title: vm.$t('MoveToAsset'),
-    type: 'primary',
-    can: () => vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot,
-    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) => [
   {

src/components/Apps/AssetTreeTable/index.vue

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

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

@@ -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() {
@@ -69,26 +73,64 @@ export default {
       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>
@@ -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

@@ -47,7 +47,9 @@ import Chat from './components/ChitChat/index.vue'
 import { getInputFocus } from './useChat.js'
 import { ws } from '@/utils/socket'
 import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
+import { ObjectLocalStorage } from '@/utils/common'
 
+const aiPannelLocalStorage = new ObjectLocalStorage('ai_panel_settings')
 export default {
   components: {
     DrawerPanel,
@@ -76,12 +78,15 @@ export default {
       robotUrl: require('@/assets/img/robot-assistant.png'),
       height: '400px',
       expanded: false,
-      clientOffset: {}
+      clientOffset: {},
+      currentTerminalContent: {}
     }
   },
   watch: {
   },
   mounted() {
+    const expanded = aiPannelLocalStorage.get('expanded')
+    this.updateExpandedState(expanded)
     this.handlePostMessage()
   },
   methods: {
@@ -89,6 +94,17 @@ export default {
       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 +112,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 +128,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/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/UserConfirmDialog/index.vue

@@ -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>
@@ -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: {
@@ -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/UserSelect/dialog.vue

@@ -0,0 +1,162 @@
+<template>
+  <Dialog
+    :close-on-click-modal="false"
+    :title="$tc('Users')"
+    custom-class="user-select-dialog"
+    v-bind="$attrs"
+    @cancel="handleCancel"
+    @confirm="handleConfirm"
+    v-on="$listeners"
+  >
+    <ListTable
+      ref="ListPage"
+      :header-actions="headerActions"
+      :sync-select-to-url="false"
+      :table-config="tableConfig"
+      :url="baseUrl"
+      v-bind="$attrs"
+      @loaded="handleTableLoaded"
+      v-on="$listeners"
+    />
+  </Dialog>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog'
+import ListTable from '@/components/Table/ListTable'
+
+export default {
+  componentName: 'AssetSelectDialog',
+  components: { Dialog, ListTable },
+  props: {
+    baseUrl: {
+      type: String,
+      default: '/api/v1/users/users/?fields_size=small'
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    canSelect: {
+      type: Function,
+      default(row, index) {
+        return true
+      }
+    },
+    disabled: {
+      type: [Boolean, Function],
+      default: false
+    }
+  },
+  data() {
+    const vm = this
+    return {
+      isLoaded: false,
+      dialogVisible: false,
+      rowSelected: _.cloneDeep(this.value) || [],
+      rowsAdd: [],
+      tableConfig: {
+        url: this.baseUrl,
+        canSelect: this.canSelect,
+        columns: [
+          {
+            prop: 'name',
+            label: this.$t('Name'),
+            sortable: true
+          },
+          {
+            prop: 'username',
+            label: this.$t('Username'),
+            sortable: true
+          },
+          {
+            prop: 'email',
+            label: this.$t('Email'),
+            sortable: true
+          },
+          {
+            prop: 'mfa_level.label',
+            label: this.$t('MfaLevel'),
+            sortable: true,
+            formatter: function(row) {
+              return row.mfa_level.label
+            }
+          },
+          {
+            prop: 'source.label',
+            label: this.$t('Source'),
+            sortable: true,
+            formatter: function(row) {
+              return row.source.label
+            }
+          },
+          {
+            prop: 'org_roles.display_name',
+            label: this.$t('OrgRoles'),
+            sortable: true,
+            formatter: function(row) {
+              return row.org_roles.map(role => role.display_name).join(', ')
+            }
+          }
+        ],
+        columnsMeta: {
+          actions: {
+            has: false
+          }
+        },
+        listeners: {
+          'toggle-row-selection': (isSelected, row) => {
+            if (isSelected) {
+              vm.addRowToSelect(row)
+            } else {
+              vm.removeRowFromSelect(row)
+            }
+          }
+        },
+        theRowDefaultIsSelected: (row) => {
+          return this.value.indexOf(row.id) > -1
+        }
+      },
+      headerActions: {
+        hasLeftActions: false,
+        hasImport: false,
+        hasExport: false
+      }
+    }
+  },
+  methods: {
+    handleTableLoaded() {
+      this.isLoaded = true
+    },
+    handleConfirm() {
+      this.$emit('confirm', this.rowSelected, this.rowsAdd)
+    },
+    handleCancel() {
+      this.$emit('cancel')
+    },
+    addRowToSelect(row) {
+      const selectValueIndex = this.rowSelected.indexOf(row.id)
+      if (selectValueIndex === -1) {
+        this.rowSelected.push(row.id)
+        this.rowsAdd.push(row)
+      }
+    },
+    removeRowFromSelect(row) {
+      const selectValueIndex = this.rowSelected.indexOf(row.id)
+      if (selectValueIndex > -1) {
+        this.rowSelected.splice(selectValueIndex, 1)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page ::v-deep .page-heading {
+  display: none;
+}
+
+.user-select-dialog ::v-deep .el-icon-circle-check {
+  display: none;
+}
+</style>

src/components/Apps/UserSelect/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="user-select-formatter">
+    <Select2
+      ref="select2"
+      v-model="select2Config.value"
+      v-bind="select2Config"
+      @input="onInputChange"
+      v-on="$listeners"
+      @focus.stop="handleFocus"
+    />
+    <UserSelectDialog
+      v-if="dialogVisible"
+      ref="dialog"
+      :base-url="baseUrl"
+      :value="value"
+      :visible.sync="dialogVisible"
+      v-bind="$attrs"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      v-on="$listeners"
+    />
+  </div>
+</template>
+
+<script>
+import Select2 from '@/components/Form/FormFields/Select2.vue'
+import UserSelectDialog from './dialog.vue'
+
+export default {
+  componentName: 'UserSelect',
+  components: { UserSelectDialog, Select2 },
+  props: {
+    baseUrl: {
+      type: String,
+      default: '/api/v1/users/users/?fields_size=small'
+    },
+    defaultPageSize: {
+      type: Number,
+      default: 10
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    disabled: {
+      type: [Boolean, Function],
+      default: false
+    }
+  },
+  data() {
+    const iValue = []
+    for (const item of this.value) {
+      if (typeof item === 'object') {
+        iValue.push(item.id)
+      } else {
+        iValue.push(item)
+      }
+    }
+    return {
+      dialogVisible: false,
+      initialValue: _.cloneDeep(iValue),
+      select2Config: {
+        disabled: this.disabled,
+        value: iValue,
+        multiple: true,
+        clearable: true,
+        defaultPageSize: this.defaultPageSize,
+        ajax: {
+          url: this.baseUrl,
+          transformOption: (item) => {
+            return { label: item.name + '(' + item.username + ')', value: item.id }
+          }
+        }
+      }
+    }
+  },
+  methods: {
+    handleFocus() {
+      this.$refs.select2.selectRef.blur()
+      this.dialogVisible = true
+    },
+    handleConfirm(valueSelected, rowsAdd) {
+      if (valueSelected === undefined) {
+        return
+      }
+      this.$refs.select2.iValue = valueSelected
+      this.addRowsToSelect(rowsAdd)
+      this.onInputChange(valueSelected)
+      this.dialogVisible = false
+    },
+    handleCancel() {
+      this.dialogVisible = false
+    },
+    onInputChange(val) {
+      this.$emit('change', val)
+    },
+    addToSelect(options, row) {
+      const selectOptionsHas = options.find(item => item.value === row.id)
+      // 如果select2的options中没有，那么可能无法显示正常的值
+      if (selectOptionsHas === undefined) {
+        const option = {
+          label: `${row.name}(${row.username})`,
+          value: row.id
+        }
+        options.push(option)
+      }
+    },
+    addRowsToSelect(rows) {
+      const outSelectOptions = this.$refs.select2.options
+      for (const row of rows) {
+        this.addToSelect(outSelectOptions, row)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.el-select {
+  width: 100%;
+}
+
+.page ::v-deep .page-heading {
+  display: none;
+}
+
+.page ::v-deep .treebox {
+  height: inherit !important;
+}
+</style>

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

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

src/components/Form/AutoDataForm/index.vue

@@ -140,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/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/index.vue

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

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
@@ -69,7 +68,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

@@ -53,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 : '',
@@ -97,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: {
@@ -98,7 +100,7 @@ export default {
   methods: {
     handleTagClose(tag) {
       this.filterTags.splice(this.filterTags.indexOf(tag), 1)
-      this.$emit('change', this.filterTags)
+      this.handleConfirm()
     },
     handleSelect(item) {
       this.filterValue = item.value
@@ -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) {
@@ -189,7 +192,7 @@ export default {
 }
 
 .filter-field ::v-deep .el-input__inner {
-  height: 28px !important;
+  height: 27px !important;
 }
 
 .show-password {

src/components/Form/FormFields/WeekCronSelect.vue

@@ -170,7 +170,7 @@ export default {
       const [start, end] = val.split('~')
       const startVal = this.countIndex(start)
       const endVal = this.countIndex(end)
-      for (let i = startVal; i < (endVal === 0 ? 48 : endVal); i++) {
+      for (let i = startVal; i < (endVal === 0 ? 24 : endVal); i++) {
         const curWeek = this.weekTimeData[idNum]
         const curChild = curWeek.child[i]
         if (curChild) {
@@ -181,11 +181,8 @@ export default {
     // 计算索引
     countIndex(val) {
       const one = val.substr(0, 2)
-      const a1 = one.startsWith('0') ? one.substr(1, 2) : one
-      var reg = RegExp(/30/)
-      const a2 = val.match(reg) ? 1 : 0
-      const curIndex = (a1 * 2) + a2
-      return curIndex
+      const index = one.startsWith('0') ? one.substr(1, 2) : one
+      return Number(index)
     },
     formatDate(date, fmt) {
       const o = {

src/components/Table/AutoDataTable/index.vue

@@ -21,21 +21,11 @@
 </template>
 
 <script type="text/jsx">
+import Sortable from 'sortablejs'
 import DataTable from '@/components/Table/DataTable/index.vue'
-import {
-  ActionsFormatter,
-  ArrayFormatter,
-  ChoicesFormatter,
-  CopyableFormatter,
-  DateFormatter,
-  DetailFormatter,
-  DisplayFormatter,
-  ObjectRelatedFormatter
-} from '@/components/Table/TableFormatters'
-import i18n from '@/i18n/i18n'
-import { newURL, ObjectLocalStorage, replaceAllUUID, toSentenceCase } from '@/utils/common'
+import { newURL, ObjectLocalStorage, replaceAllUUID } from '@/utils/common'
 import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
-import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'
+import { TableColumnsGenerator } from './utils'
 
 export default {
   name: 'AutoDataTable',
@@ -57,9 +47,9 @@ export default {
     return {
       loading: true,
       method: 'get',
-      autoConfig: {},
-      iConfig: {},
       meta: {},
+      iConfig: {},
+      autoConfig: {},
       cleanedColumnsShow: {},
       totalColumns: [],
       popoverColumns: {
@@ -69,18 +59,8 @@ export default {
         defaultCols: []
       },
       isDeactivated: false,
-      objTableColumns: new ObjectLocalStorage('tableColumns')
-    }
-  },
-  computed: {
-    dynamicActionWidth() {
-      if (this.$i18n.locale === 'en') {
-        return '120px'
-      }
-      if (this.$i18n.locale === 'pt-br') {
-        return '160px'
-      }
-      return '100px'
+      tableColumnsStorage: this.getTableColumnsStorage(),
+      sortable: null
     }
   },
   watch: {
@@ -102,8 +82,9 @@ export default {
       }, 200)
     }
   },
-  created() {
-    this.optionUrlMetaAndGenCols()
+  async created() {
+    await this.optionUrlMetaAndGenCols()
+    this.loading = false
   },
   deactivated() {
     this.isDeactivated = true
@@ -112,323 +93,101 @@ export default {
     this.isDeactivated = false
   },
   methods: {
+    setColumnDraggable() {
+      const el = this.$el.querySelector('.el-table__header-wrapper thead tr')
+      if (!el) {
+        setTimeout(() => this.setColumnDraggable(), 500)
+        return
+      }
+      if (this.sortable) {
+        this.sortable.destroy()
+      }
+
+      this.sortable = Sortable.create(el, {
+        animation: 150,
+        onEnd: (evt) => {
+          let { oldIndex, newIndex } = evt
+          if (oldIndex === newIndex) {
+            return
+          }
+          // 检测表格是否有选择列
+          const hasSelectionColumn = this.$el.querySelector('.el-table-column--selection') !== null
+          if (hasSelectionColumn) {
+            // 如果有选择列，调整索引
+            if (oldIndex > 0) oldIndex -= 1
+            if (newIndex > 0) newIndex -= 1
+          }
+
+          let columnNames = [...this.cleanedColumnsShow.show]
+          if (columnNames.includes('actions')) {
+            columnNames = columnNames.filter(item => item !== 'actions')
+            columnNames.push('actions')
+          }
+          // 边界
+          if (oldIndex >= 0 && oldIndex < columnNames.length &&
+            newIndex >= 0 && newIndex < columnNames.length) {
+            const movedItem = columnNames.splice(oldIndex, 1)[0]
+            columnNames.splice(newIndex, 0, movedItem)
+
+            this.$log.debug('Column moved: ', movedItem, oldIndex, ' => ', newIndex)
+            // 保存更新的列顺序
+            this.tableColumnsStorage.set(columnNames)
+
+            // 更新内部状态
+            this.cleanedColumnsShow.show = columnNames
+            this.popoverColumns.currentCols = columnNames
+
+            // 重新应用列顺序
+            this.filterShowColumns()
+
+            this.loading = true
+            setTimeout(() => {
+              this.loading = false
+              // 在DOM完全更新后重新初始化拖拽
+              this.$nextTick(() => {
+                setTimeout(() => this.setColumnDraggable(), 200)
+              })
+            }, 300)
+          }
+        }
+      })
+    },
+    generateTotalColumns() {
+      const generator = new TableColumnsGenerator(this.config, this.meta, this)
+      this.totalColumns = generator.generateColumns()
+      this.config.columns = this.totalColumns
+      this.iConfig = _.cloneDeep(this.config)
+    },
     async optionUrlMetaAndGenCols() {
       if (this.config.url === '') {
         return
       }
       const url = (this.config.url.indexOf('?') === -1)
-        ? `${this.config.url}?draw=1&display=1`
-        : `${this.config.url}&draw=1&display=1`
-      this.$store.dispatch('common/getUrlMeta', { url: url }).then(data => {
+        ? `${this.config.url}?display=1`
+        : `${this.config.url}&display=1`
+
+      /**
+       * 原有代码无法正确的同步 storage 的原因是 currentOrder 总是在 totalColumns 之前进行的
+       * 这导致在首次加载时，currentOrder总是为空数组，因为此时cleanedColumnsShow.show还未初始化
+       */
+      try {
+        const data = await this.$store.dispatch('common/getUrlMeta', { url: url })
         const method = this.method.toUpperCase()
         this.meta = data.actions && data.actions[method] ? data.actions[method] : {}
+
         this.generateTotalColumns()
-      }).then(() => {
-        //  根据当前列重新生成最终渲染表格
+        this.cleanColumnsShow()
         this.filterShowColumns()
-      }).then(() => {
-        // 生成给子组件使用的TotalColList
         this.generatePopoverColumns()
-      }).catch((error) => {
+        this.setColumnDraggable()
+      } catch (error) {
         this.$log.error('Error occur: ', error)
-      }).finally(() => {
-        this.loading = false
-      })
+      }
     },
-    generateColumnByName(name, col) {
-      switch (name) {
-        case 'id':
-          if (!col.width) {
-            col.width = '299px'
-          }
-          if (!col.formatter) {
-            col.formatter = CopyableFormatter
-            col.iconPosition = 'left'
-          }
-          break
-        case 'name':
-          col.formatter = DetailFormatter
-          col.sortable = 'custom'
-          col.showOverflowTooltip = true
-          col.minWidth = '150px'
-          break
-        case 'actions':
-          col = {
-            prop: 'actions',
-            label: i18n.t('Actions'),
-            align: 'center',
-            width: this.dynamicActionWidth,
-            formatter: ActionsFormatter,
-            fixed: 'right',
-            formatterArgs: {}
-          }
-          break
-        case 'is_valid':
-          col.label = i18n.t('Valid')
-          col.formatter = ChoicesFormatter
-          col.formatterArgs = {
-            textChoices: {
-              true: i18n.t('Yes'),
-              false: i18n.t('No')
-            }
-          }
-          col.width = '80px'
-          break
-        case 'is_active':
-          col.formatter = ChoicesFormatter
-          col.formatterArgs = {
-            textChoices: {
-              true: i18n.t('Active'),
-              false: i18n.t('Inactive')
-            }
-          }
-          col.width = '100px'
-          break
-        case 'datetime':
-        case 'date_start':
-          col.formatter = DateFormatter
-          break
-        case 'labels':
-          col.formatter = LabelsFormatter
-          col.width = '200px'
-          break
-        case 'comment':
-          col.showOverflowTooltip = true
-      }
-      return col
-    },
-    generateColumnByType(type, col, meta) {
-      switch (type) {
-        case 'choice':
-          col.sortable = 'custom'
-          col.formatter = DisplayFormatter
-          break
-        case 'labeled_choice':
-          col.sortable = 'custom'
-          col.formatter = ChoicesFormatter
-          break
-        case 'boolean':
-          col.formatter = ChoicesFormatter
-          // col.width = '80px'
-          break
-        case 'datetime':
-          col.formatter = DateFormatter
-          col.width = '155px'
-          break
-        case 'object_related_field':
-          col.formatter = ObjectRelatedFormatter
-          break
-        case 'm2m_related_field':
-          col.formatter = ObjectRelatedFormatter
-          break
-        case 'list':
-          col.formatter = ArrayFormatter
-          break
-        case 'json':
-        case 'field':
-          if (meta.child && meta.child.type === 'nested object') {
-            col.formatter = ObjectRelatedFormatter
-          }
-          break
-      }
-      // this.$log.debug('Field: ', type, col.prop, col)
-      return col
-    },
-    addHelpTipIfNeed(col) {
-      const helpTip = col.helpTip
-      if (!helpTip) {
-        return col
-      }
-      col.renderHeader = (h, { column, $index }) => {
-        const binds = {
-          props: {
-            placement: 'bottom',
-            effect: 'dark',
-            openDelay: 500,
-            popperClass: 'help-tips'
-          }
-        }
-
-        return (
-          <span>{column.label}
-            <el-tooltip {...binds}>
-              <div slot='content' v-sanitize={helpTip}/>
-              <i class='fa fa-question-circle-o help-tip-icon' style='padding-left: 2px'/>
-            </el-tooltip>
-          </span>
-        )
-      }
-      return col
-    },
-    addFilterIfNeed(col) {
-      if (col.prop) {
-        const column = this.meta[col.prop] || {}
-        if (!column.filter) {
-          return col
-        }
-        if (column.type === 'boolean') {
-          col.filters = [
-            { text: i18n.t('Yes'), value: true },
-            { text: i18n.t('No'), value: false }
-          ]
-          col.sortable = false
-          col['column-key'] = col.prop
-        }
-        if (column.type === 'choice' && column.choices) {
-          col.filters = column.choices.map(item => {
-            if (typeof (item.value) === 'boolean') {
-              if (item.value) {
-                return { text: item['label'], value: 'True' }
-              } else {
-                return { text: item['label'], value: 'False' }
-              }
-            }
-            return { text: item['label'], value: item.value }
-          })
-          col.sortable = false
-          col['column-key'] = col.prop
-        }
-      }
-      return col
-    },
-    addOrderingIfNeed(col) {
-      if (col.prop) {
-        const column = this.meta[col.prop] || {}
-        if (column.order) {
-          col.sortable = 'custom'
-          col['column-key'] = col.prop
-        }
-      }
-      return col
-    },
-    setDefaultFormatterIfNeed(col) {
-      if (!col.formatter) {
-        col.formatter = (row, column, cellValue) => {
-          let value = cellValue
-          let padding = '0'
-          const excludes = [undefined, null, '']
-          if (excludes.indexOf(value) !== -1) {
-            padding = '6px'
-            value = '-'
-          }
-          return <span style={{ marginLeft: padding }}>{value}</span>
-        }
-      }
-      return col
-    },
-    setDefaultWidthIfNeed(col) {
-      const lang = this.$i18n.locale
-      let factor = 10
-      if (lang === 'zh') {
-        factor = 20
-      }
-      let [sortable, filters] = [0, 0]
-      if (col && col?.sortable === 'custom') {
-        sortable = 10
-      }
-      if (col && col?.filters?.length > 0) {
-        filters = 12
-      }
-      if (col && !col.width && col.label && !col.minWidth) {
-        col.minWidth = `${col.label.length * factor + sortable + filters + 30}px`
-      }
-      return col
-    },
-    generateColumn(name) {
-      const colMeta = this.meta[name] || {}
-      const customMeta = this.config.columnsMeta ? this.config.columnsMeta[name] : {}
-      let col = { prop: name, label: colMeta.label, showOverflowTooltip: true }
-
-      col = this.generateColumnByType(colMeta.type, col, colMeta)
-      col = this.generateColumnByName(name, col)
-      col = this.setDefaultFormatterIfNeed(col)
-      col = Object.assign(col, customMeta)
-      col = this.addHelpTipIfNeed(col)
-      col = this.addFilterIfNeed(col)
-      col = this.addOrderingIfNeed(col)
-      col = this.updateLabelIfNeed(col)
-      col = this.setDefaultWidthIfNeed(col)
-      return col
-    },
-    updateLabelIfNeed(col) {
-      if (!col.label) {
-        return col
-      }
-      col.label = col.label
-        .replace(' Amount', '')
-        .replace(' amount', '')
-        .replace('数量', '')
-      if (col.label.startsWith('Is ')) {
-        col.label = col.label.replace('Is ', '')
-      }
-      col.label = toSentenceCase(col.label)
-      return col
-    },
-    generateTotalColumns() {
-      const config = _.cloneDeep(this.config)
-      let columns = []
-      const allColumnNames = Object.entries(this.meta)
-        .filter(([name, meta]) => !meta['write_only'])
-        .map(([name, meta]) => name)
-        .concat(config.columnsExtra || [])
-
-      let configColumns = config.columns || allColumnNames
-      const columnsExclude = config.columnsExclude || []
-      const columnsAdd = config.columnsAdd || []
-      configColumns = configColumns.concat(columnsAdd)
-      configColumns = configColumns.filter(item => !columnsExclude.includes(item))
-
-      // 解决后端 API 返回字段中包含 actions 的问题;
-      const hasColumnActions = configColumns.findIndex(item => item?.prop === 'actions') !== -1
-      if (!hasColumnActions) {
-        configColumns = [...configColumns.filter(i => i !== 'actions'), 'actions']
-      }
-
-      for (let col of configColumns) {
-        if (typeof col === 'object') {
-          columns.push(col)
-        } else if (typeof col === 'string') {
-          col = this.generateColumn(col)
-          columns.push(col)
-        }
-      }
-
-      columns = columns.filter(item => {
-        if (item?.showFullContent) {
-          item.className = 'show-full-content'
-        }
-        let has = item.has
-        if (has === undefined) {
-          has = true
-        } else if (typeof has === 'function') {
-          has = has()
-        }
-        return has
-      })
-
-      columns = this.orderingColumns(columns)
-      // 第一次初始化时记录 totalColumns
-      this.totalColumns = columns
-      config.columns = columns
-      this.iConfig = config
-    },
-    orderingColumns(columns) {
-      const cols = _.cloneDeep(this.config.columns)
-      const defaults = _.get(this.config, 'columnsShow.default')
-      const ordering = (cols || defaults || []).map(item => {
-        let prop = item
-        if (typeof item === 'object') {
-          prop = item.prop
-        }
-        return prop
-      })
-      return _.sortBy(columns, (item) => {
-        if (item.prop === 'actions') {
-          return 1000
-        }
-        const i = ordering.indexOf(item.prop)
-        return i === -1 ? 999 : i
-      })
+    getTableColumnsStorage() {
+      let tableName = this.config.name || this.$route.name + '_' + newURL(this.config.url).pathname
+      tableName = replaceAllUUID(tableName)
+      return new ObjectLocalStorage('tableColumns', tableName)
     },
     // 生成给子组件使用的TotalColList
     cleanColumnsShow() {
@@ -438,16 +197,12 @@ export default {
       if (defaultColumnsNames.length === 0) {
         defaultColumnsNames = totalColumnsNames
       }
-      // Clean it
-      defaultColumnsNames = totalColumnsNames.filter(n => defaultColumnsNames.indexOf(n) > -1)
 
       // 最小列
       const minColumnsNames = _.get(this.iConfig, 'columnsShow.min', ['actions', 'id'])
         .filter(n => totalColumnsNames.includes(n))
 
-      let tableName = this.config.name || this.$route.name + '_' + newURL(this.config.url).pathname
-      tableName = replaceAllUUID(tableName)
-      const configShowColumnsNames = this.objTableColumns.get(tableName)
+      const configShowColumnsNames = this.tableColumnsStorage.get()
       let showColumnsNames = configShowColumnsNames || defaultColumnsNames
       if (showColumnsNames.length === 0) {
         showColumnsNames = totalColumnsNames
@@ -458,8 +213,6 @@ export default {
           showColumnsNames.push(v)
         }
       })
-      // Clean it
-      showColumnsNames = totalColumnsNames.filter(n => showColumnsNames.indexOf(n) > -1)
 
       this.cleanedColumnsShow = {
         default: defaultColumnsNames,
@@ -471,9 +224,38 @@ export default {
     },
     filterShowColumns() {
       this.cleanColumnsShow()
-      this.iConfig.columns = this.totalColumns.filter(obj => {
-        return this.cleanedColumnsShow.show.indexOf(obj.prop) > -1
+      const showFieldNames = this.cleanedColumnsShow.show
+      let showFields = this.totalColumns.filter(obj => {
+        return showFieldNames.indexOf(obj.prop) > -1
       })
+      showFields = this.orderingColumns(showFields)
+      this.iConfig.columns = showFields
+
+      // 确保最新的列配置也应用到config对象上，保持同步
+      this.config.columns = this.iConfig.columns
+
+      this.$nextTick(() => {
+        if (this.$refs.dataTable) {
+          this.$refs.dataTable.getList()
+        }
+      })
+    },
+    orderingColumns(columns) {
+      const cols = _.cloneDeep(this.config.columns)
+      const show = this.cleanedColumnsShow.show
+      const ordering = (show || cols || []).map(item => {
+        let prop = item
+        if (typeof item === 'object') {
+          prop = item.prop
+        }
+        return prop
+      })
+      const sorted = _.sortBy(columns, (item) => {
+        const i = ordering.indexOf(item.prop)
+        item.order = i
+        return i === -1 ? 999 : i
+      })
+      return sorted
     },
     generatePopoverColumns() {
       this.popoverColumns.totalColumnsList = this.totalColumns.filter(obj => {
@@ -493,13 +275,7 @@ export default {
         columns = this.cleanedColumnsShow.default
       }
       this.popoverColumns.currentCols = columns
-
-      let tableName = this.config.name || this.$route.name + '_' + newURL(url).pathname
-      // 替换url中的uuid，避免同一个类型接口生成多个key，localStorage中的数据无法共用.
-      tableName = replaceAllUUID(tableName)
-
-      this.objTableColumns.set(tableName, columns)
-
+      this.tableColumnsStorage.set(columns)
       this.filterShowColumns()
     },
     filterChange(filters) {

src/components/Table/AutoDataTable/utils.js

@@ -0,0 +1,326 @@
+import { toSentenceCase } from '@/utils/common'
+import i18n from '@/i18n/i18n'
+
+import {
+  ActionsFormatter,
+  ArrayFormatter,
+  ChoicesFormatter,
+  CopyableFormatter,
+  DateFormatter,
+  DetailFormatter,
+  DisplayFormatter,
+  ObjectRelatedFormatter
+} from '@/components/Table/TableFormatters'
+import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'
+
+export class TableColumnsGenerator {
+  constructor(config, meta, vm) {
+    this.config = config
+    this.meta = meta
+    this.vm = vm
+  }
+
+  dynamicActionWidth() {
+    console.log(i18n.locale)
+    if (i18n.locale === 'zh-hans' || i18n.locale === 'zh-hant') {
+      return '100px'
+    }
+
+    if (i18n.locale === 'ja' || i18n.locale === 'ko') {
+      return '120px'
+    }
+
+    return '160px'
+  }
+
+  generateColumns() {
+    const config = _.cloneDeep(this.config)
+    let columns = []
+    const allColumnNames = Object.entries(this.meta)
+      .filter(([name, meta]) => !meta['write_only'])
+      .map(([name, meta]) => name)
+      .concat(config.columnsExtra || [])
+
+    let configColumns = config.columns || allColumnNames
+    const columnsExclude = config.columnsExclude || []
+    const columnsAdd = config.columnsAdd || []
+    configColumns = configColumns.concat(columnsAdd)
+    configColumns = configColumns.filter(item => !columnsExclude.includes(item))
+
+    // 解决后端 API 返回字段中包含 actions 的问题;
+    const hasColumnActions = configColumns.findIndex(item => item?.prop === 'actions') !== -1
+    if (!hasColumnActions) {
+      configColumns = [...configColumns.filter(i => i !== 'actions'), 'actions']
+    }
+
+    for (let col of configColumns) {
+      if (typeof col === 'object') {
+        columns.push(col)
+      } else if (typeof col === 'string') {
+        col = this.generateColumn(col)
+        columns.push(col)
+      }
+    }
+
+    columns = columns.filter(item => {
+      if (item?.showFullContent) {
+        item.className = 'show-full-content'
+      }
+      let has = item.has
+      if (has === undefined) {
+        has = true
+      } else if (typeof has === 'function') {
+        has = has()
+      }
+      return has
+    })
+
+    // columns = this.orderingColumns(columns)
+    // 第一次初始化时记录 totalColumns
+    config.columns = columns
+    return columns
+  }
+
+  updateLabelIfNeed(col) {
+    if (!col.label) {
+      return col
+    }
+    col.label = col.label
+      .replace(' Amount', '')
+      .replace(' amount', '')
+      .replace('数量', '')
+    if (col.label.startsWith('Is ')) {
+      col.label = col.label.replace('Is ', '')
+    }
+    col.label = toSentenceCase(col.label)
+    return col
+  }
+
+  generateColumn(name) {
+    const colMeta = this.meta[name] || {}
+    const customMeta = this.config.columnsMeta ? this.config.columnsMeta[name] : {}
+    let col = { prop: name, label: colMeta.label, showOverflowTooltip: true }
+
+    col = this.generateColumnByType(colMeta.type, col, colMeta)
+    col = this.generateColumnByName(name, col)
+    col = this.setDefaultFormatterIfNeed(col)
+    col = Object.assign(col, customMeta)
+    col = this.addHelpTipIfNeed(col)
+    col = this.addFilterIfNeed(col)
+    col = this.addOrderingIfNeed(col)
+    col = this.updateLabelIfNeed(col)
+    col = this.setDefaultWidthIfNeed(col)
+    return col
+  }
+
+  generateColumnByName(name, col) {
+    switch (name) {
+      case 'id':
+        if (!col.width) {
+          col.width = '299px'
+        }
+        if (!col.formatter) {
+          col.formatter = CopyableFormatter
+          col.iconPosition = 'left'
+        }
+        break
+      case 'name':
+        col.formatter = DetailFormatter
+        col.sortable = 'custom'
+        col.showOverflowTooltip = true
+        col.minWidth = '150px'
+        break
+      case 'actions':
+        col = {
+          prop: 'actions',
+          label: i18n.t('Actions'),
+          align: 'center',
+          width: this.dynamicActionWidth(),
+          formatter: ActionsFormatter,
+          fixed: 'right',
+          formatterArgs: {}
+        }
+        break
+      case 'is_valid':
+        col.label = i18n.t('Valid')
+        col.formatter = ChoicesFormatter
+        col.formatterArgs = {
+          textChoices: {
+            true: i18n.t('Yes'),
+            false: i18n.t('No')
+          }
+        }
+        col.width = '80px'
+        break
+      case 'is_active':
+        col.formatter = ChoicesFormatter
+        col.formatterArgs = {
+          textChoices: {
+            true: i18n.t('Active'),
+            false: i18n.t('Inactive')
+          }
+        }
+        col.width = '100px'
+        break
+      case 'datetime':
+      case 'date_start':
+        col.formatter = DateFormatter
+        break
+      case 'labels':
+        col.formatter = LabelsFormatter
+        col.width = '200px'
+        break
+      case 'comment':
+        col.showOverflowTooltip = true
+    }
+    return col
+  }
+
+  generateColumnByType(type, col, meta) {
+    switch (type) {
+      case 'choice':
+        col.sortable = 'custom'
+        col.formatter = DisplayFormatter
+        break
+      case 'labeled_choice':
+        col.sortable = 'custom'
+        col.formatter = ChoicesFormatter
+        break
+      case 'boolean':
+        col.formatter = ChoicesFormatter
+        // col.width = '80px'
+        break
+      case 'datetime':
+        col.formatter = DateFormatter
+        col.width = '155px'
+        break
+      case 'object_related_field':
+        col.formatter = ObjectRelatedFormatter
+        break
+      case 'm2m_related_field':
+        col.formatter = ObjectRelatedFormatter
+        break
+      case 'list':
+        col.formatter = ArrayFormatter
+        break
+      case 'json':
+      case 'field':
+        if (meta.child && meta.child.type === 'nested object') {
+          col.formatter = ObjectRelatedFormatter
+        }
+        break
+    }
+    // this.$log.debug('Field: ', type, col.prop, col)
+    return col
+  }
+
+  setDefaultFormatterIfNeed(col) {
+    const h = this.vm.$createElement
+    if (!col.formatter) {
+      col.formatter = (row, column, cellValue) => {
+        let value = cellValue
+        let padding = '0'
+        const excludes = [undefined, null, '']
+        if (excludes.indexOf(value) !== -1) {
+          padding = '6px'
+          value = '-'
+        }
+        return h('span', {
+          'style': {
+            marginLeft: padding
+          }
+        }, [value])
+      }
+    }
+    return col
+  }
+
+  setDefaultWidthIfNeed(col) {
+    const lang = i18n.locale
+    let factor = 10
+    if (lang === 'zh') {
+      factor = 20
+    }
+    let [sortable, filters] = [0, 0]
+    if (col && col?.sortable === 'custom') {
+      sortable = 10
+    }
+    if (col && col?.filters?.length > 0) {
+      filters = 12
+    }
+    if (col && !col.width && col.label && !col.minWidth) {
+      col.minWidth = `${col.label.length * factor + sortable + filters + 30}px`
+    }
+    return col
+  }
+
+  addOrderingIfNeed(col) {
+    if (col.prop) {
+      const column = this.meta[col.prop] || {}
+      if (column.order) {
+        col.sortable = 'custom'
+        col['column-key'] = col.prop
+      }
+    }
+    return col
+  }
+
+  addHelpTipIfNeed(col) {
+    const helpTip = col.helpTip
+    if (!helpTip) {
+      return col
+    }
+    col.renderHeader = (h, { column, $index }) => {
+      const binds = {
+        props: {
+          placement: 'bottom',
+          effect: 'dark',
+          openDelay: 500,
+          popperClass: 'help-tips'
+        }
+      }
+
+      return (
+        <span>{column.label}
+          <el-tooltip {...binds}>
+            <div slot='content' v-sanitize={helpTip}/>
+            <i class='fa fa-question-circle-o help-tip-icon' style='padding-left: 2px'/>
+          </el-tooltip>
+        </span>
+      )
+    }
+    return col
+  }
+
+  addFilterIfNeed(col) {
+    if (col.prop) {
+      const column = this.meta[col.prop] || {}
+      if (!column.filter) {
+        return col
+      }
+      if (column.type === 'boolean') {
+        col.filters = [
+          { text: i18n.t('Yes'), value: true },
+          { text: i18n.t('No'), value: false }
+        ]
+        col.sortable = false
+        col['column-key'] = col.prop
+      }
+      if (column.type === 'choice' && column.choices) {
+        col.filters = column.choices.map(item => {
+          if (typeof (item.value) === 'boolean') {
+            if (item.value) {
+              return { text: item['label'], value: 'True' }
+            } else {
+              return { text: item['label'], value: 'False' }
+            }
+          }
+          return { text: item['label'], value: item.value }
+        })
+        col.sortable = false
+        col['column-key'] = col.prop
+      }
+    }
+    return col
+  }
+}

src/components/Table/CardTable/index.vue

@@ -34,6 +34,12 @@
       @currentSizeChange="handleCurrentChange"
       @sizeChange="handleSizeChange"
     />
+    <Drawer
+      v-if="detailDrawer"
+      :component="detailDrawer"
+      :title="detailTitle"
+      :visible.sync="detailDrawerVisible"
+    />
   </div>
 </template>
 
@@ -43,12 +49,14 @@ import { Pagination } from '@/components'
 import TableAction from '@/components/Table/ListTable/TableAction'
 import IBox from '@/components/Common/IBox/index.vue'
 import Panel from './Panel'
+import Drawer from '@/components/Drawer/index.vue'
 
 const defaultFirstPage = 1
 
 export default {
   name: 'CardTable',
   components: {
+    Drawer,
     IBox,
     Panel,
     TableAction,
@@ -79,6 +87,10 @@ export default {
     subComponentProps: {
       type: Object,
       default: () => ({})
+    },
+    detailDrawer: {
+      type: [String, Function],
+      default: ''
     }
   },
   data() {
@@ -97,7 +109,9 @@ export default {
           display: 1,
           draw: 1
         }
-      }
+      },
+      detailDrawerVisible: false,
+      detailTitle: ''
     }
   },
   computed: {
@@ -137,9 +151,10 @@ export default {
         return
       }
       const pageQuery = this.getPageQuery(this.page, this.paginationSize)
-      const query = Object.assign(this.extraQuery, pageQuery)
+      const query = Object.assign(this.extraQuery, pageQuery, this.tableConfig.extraQuery)
       const queryString = Object.keys(query).map(key => key + '=' + query[key]).join('&')
-      const url = `${this.tableUrl}?${queryString}`
+      const connector = this.tableUrl.indexOf('?') === -1 ? '?' : '&'
+      const url = `${this.tableUrl}${connector}${queryString}`
 
       const resp = await this.$axios.get(url, this.axiosConfig)
       const data = resp.data
@@ -177,12 +192,20 @@ export default {
     defaultPerformDelete(obj) {
       this.$axios.delete(`${this.tableConfig.url}${obj.id}/`)
     },
-    onView(obj) {
+    async onView(obj) {
       if (this.isDisabled(obj)) {
         return
       }
-      const viewFunc = this.tableConfig.onView || this.defaultPerformView
-      viewFunc(obj)
+      if (this.detailDrawer) {
+        await this.$store.dispatch('common/setDrawerActionMeta', {
+          action: 'detail', row: obj, col: {}, id: obj.id
+        })
+        this.detailTitle = `${this.$t('Detail')}: ${obj.name}`
+        this.detailDrawerVisible = true
+      } else {
+        const viewFunc = this.tableConfig.onView || this.defaultPerformView
+        await viewFunc(obj)
+      }
     },
     onDelete(obj) {
       const msg = `${this.$t('DeleteWarningMsg')} "${obj.name}" ?`
@@ -212,9 +235,6 @@ export default {
   ::v-deep {
     .el-empty {
       margin: 0 auto;
-
-      .el-empty__image {
-      }
     }
   }
 }
@@ -226,6 +246,8 @@ export default {
 
   .card-container {
     display: flex;
+    justify-content: left;
+    flex-wrap: wrap;
   }
 
   .el-col, div {

src/components/Table/InfoCardTable/Info.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="item-info">
     <el-row>
-      <el-col v-for="item of infos" :key="item.content" :span="12" class="panel-item">
+      <el-col v-for="(item, i) of infos" :key="i" :span="12" class="panel-item">
         <small class="item-label">{{ item.title }}</small>
         <h4 class="item-value">{{ item.content }}</h4>
       </el-col>

src/components/Table/InfoCardTable/Panel.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="info-panel">
+  <div class="info-panel" @click="gotoDetail">
     <div class="panel-header">
       <div class="panel-title">
         <el-avatar :src="imageUrl" shape="square" />
@@ -30,7 +30,7 @@
         </el-dropdown>
       </div>
     </div>
-    <div class="panel-content" @click="gotoDetail">
+    <div class="panel-content">
       <InfoPanel :infos="getInfos(object)" />
     </div>
     <el-row class="panel-footer" />
@@ -158,6 +158,7 @@ div.info-panel {
   flex-direction: column;
   padding: 10px;
   gap: 10px;
+  cursor: pointer;
 
   .panel-header {
     padding: 10px 20px;
@@ -165,7 +166,6 @@ div.info-panel {
     display: flex;
     justify-content: space-between;
     gap: 10px;
-    cursor: default;
 
     .panel-title {
       display: flex;
@@ -216,7 +216,6 @@ div.info-panel {
   .panel-content {
     display: block;
     padding: 1px 25px 10px;
-    cursor: pointer;
 
     .panel-image {
       margin: auto 5px;

src/components/Table/TableFormatters/AccountConnectFormatter.vue

@@ -1,24 +1,33 @@
 <template>
   <div>
     <el-dropdown
-      v-if="hasPerm"
+      :disabled="!hasPerm"
+      :show-timeout="500"
+      class="action-connect"
       size="small"
       trigger="hover"
-      :show-timeout="500"
-      @command="handleCommand"
+      type="primary"
+      @command="handleProtocolConnect"
       @visible-change="visibleChange"
     >
       <el-button
         plain
         size="mini"
         type="primary"
-        @click="handlePamConnect"
+        :disabled="!hasPerm"
+        @click="handleBtnConnect"
       >
-        <i :class="IButtonIcon" />
+        <i :class="iButtonIcon" :style="{ color: hasPerm ? '' : '#fff' }" />
       </el-button>
-      <el-dropdown-menu slot="dropdown">
-        <el-dropdown-item command="Title" disabled>
-          {{ ITitleText }}
+
+      <el-dropdown-menu v-if="!isClick" slot="dropdown">
+        <el-dropdown-item command="title" disabled>
+          <div v-if="getProtocolsLoading">
+            {{ $t('Loading') }}
+          </div>
+          <div v-else>
+            {{ dropdownTitle }}
+          </div>
         </el-dropdown-item>
         <el-dropdown-item divided />
         <el-dropdown-item
@@ -30,16 +39,6 @@
         </el-dropdown-item>
       </el-dropdown-menu>
     </el-dropdown>
-
-    <el-button
-      v-else
-      plain
-      size="mini"
-      type="primary"
-      :disabled="!hasPerm"
-    >
-      <i :class="IButtonIcon" style="color: #fff" />
-    </el-button>
   </div>
 </template>
 
@@ -50,85 +49,73 @@ export default {
   name: 'AccountConnectFormatter',
   extends: BaseFormatter,
   props: {
-    buttonIcon: {
-      type: String,
-      default: 'fa fa-desktop'
-    },
-    titleText: {
-      type: String,
-      default: ''
-    },
-    url: {
-      type: String,
-      default: ''
+    formatterArgsDefault: {
+      type: Object,
+      default() {
+        return {
+          can: () => true,
+          getConnectUrl: (row, protocol, asset) => {
+            const assetId = asset ? asset.id : row.asset.id
+            return `/luna/admin-connect/?
+              asset=${assetId}
+              &account=${row.id}
+              &protocol=${protocol}
+            `.replace(/\s+/g, '')
+          },
+          asset: null,
+          assetUrl: '/api/v1/assets/assets/{id}/',
+          buttonIcon: 'fa fa-desktop'
+        }
+      }
     }
   },
   data() {
     return {
-      hasPerm: false,
-      protocols: []
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs),
+      protocols: [],
+      isClick: false,
+      getProtocolsLoading: false,
+      dropdownTitle: this.$t('Protocols')
     }
   },
   computed: {
-    IButtonIcon() {
-      return this.buttonIcon
+    iButtonIcon() {
+      return this.formatterArgs.buttonIcon
     },
-    ITitleText() {
-      return this.titleText || this.$t('SelectProtocol')
+    hasPerm() {
+      return this.formatterArgs.can({ row: this.row, cellValue: this.cellValue })
     }
   },
-  mounted() {
-    this.hasPerm = this.formatterArgs.can()
-  },
   methods: {
-    handleCommand(protocol) {
-      if (protocol === 'Title') return
-
-      this.formatterArgs.setMapItem(this.row.id, protocol)
-      this.handleWindowOpen(this.row, protocol)
+    handleProtocolConnect(protocol) {
+      const url = this.formatterArgs.getConnectUrl(this.row, protocol, this.formatterArgs.asset)
+      window.open(url, '_blank')
     },
     visibleChange(visible) {
       if (visible) {
         this.getProtocols(this.row.asset.id)
       }
     },
-    handleWindowOpen(row, protocol) {
-      const url = this.formatterArgs.connectUrlTemplate(row) + `${protocol}`
-
-      this.$nextTick(() => {
-        window.open(url, '_blank')
-      })
-    },
-    async handlePamConnect() {
-      const protocolMap = this.$store.getters.protocolMap
-
-      if (protocolMap.has(this.row.id)) {
-        // 直连
-        const protocol = protocolMap.get(this.row.id)
-        this.handleWindowOpen(this.row, protocol)
-      } else {
-        try {
-          const url = this.formatterArgs.url.replace('{id}', this.row.asset.id)
-          const res = await this.$axios.get(url)
-
-          if (res && res.protocols.length > 0) {
-            const protocol = res.protocols.filter(protocol => protocol.name !== 'sftp')[0]
-
-            this.formatterArgs.setMapItem(this.row.id, protocol.name)
-            this.handleWindowOpen(this.row, protocol.name)
-          }
-        } catch (e) {
-          throw new Error(`Error getting protocols: ${e}`)
-        }
+    async handleBtnConnect() {
+      this.isClick = true
+      if (this.protocols === 0) {
+        await this.getProtocols(this.row.asset.id)
       }
+
+      if (this.protocols.length > 0) {
+        this.handleProtocolConnect(this.protocols[0].name)
+      }
+      setTimeout(() => {
+        this.isClick = false
+      }, 1000)
     },
     async getProtocols(assetId) {
+      if (this.protocols.length > 0) return
       try {
-        const url = this.formatterArgs.url.replace('{id}', assetId)
+        const url = this.formatterArgs.assetUrl.replace('{id}', assetId)
         const res = await this.$axios.get(url)
 
-        // 暂将 SFTP 过滤
-        if (res) this.protocols = res.protocols.filter(protocol => protocol.name !== 'sftp')
+        this.protocols = res.protocols.filter(protocol => (protocol.name !== 'winrm')) || []
       } catch (e) {
         throw new Error(`Error getting protocols: ${e}`)
       }
@@ -137,7 +124,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .el-dropdown-menu__item.is-disabled {
   font-weight: 500;
   color: var(--el-text-color-secondary);

src/components/Table/TableFormatters/AccountInfoFormatter.vue

@@ -10,7 +10,7 @@
         <span>{{ $t('No accounts') }}</span>
       </div>
       <div v-for="account of accountData" :key="account.id" class="detail-item">
-        <span>{{ account.name }}({{ account.username }})</span>
+        <span>{{ getDisplay(account) }}</span>
       </div>
     </div>
     <el-button slot="reference" class="link-btn" plain size="mini" type="primary">
@@ -39,10 +39,20 @@ export default {
     }
   },
   methods: {
+    getDisplay(account) {
+      const { username, name } = account
+      if (username.startsWith('@')) {
+        return name
+      } else if (name === username) {
+        return username
+      } else {
+        return `${name}(${username})`
+      }
+    },
     async getAsyncItems() {
       this.loading = true
       const userId = this.$route.params.id || 'self'
-      const url = `/api/v1/perms/users/${userId}/assets/${this.row.id}`
+      const url = `/api/v1/perms/users/${userId}/assets/${this.row.id}/`
       this.$axios.get(url).then(res => {
         this.accountData = res?.permed_accounts || []
       }).finally(() => {

src/components/Table/TableFormatters/ChoicesFormatter.vue

@@ -24,16 +24,17 @@ const formatterArgsDefault = {
     true: 'text-primary',
     false: 'text-danger'
   },
-  textChoices: {
-    true: i18n.t('Yes'),
-    false: i18n.t('No')
-  },
   getKey({ row, cellValue }) {
     return (cellValue && typeof cellValue === 'object') ? cellValue.value : cellValue
   },
   getText({ row, cellValue }) {
     const key = this.getKey({ row, cellValue })
-    return (cellValue && typeof cellValue === 'object') ? cellValue.label : this.textChoices[key] || cellValue
+    if (cellValue && typeof cellValue === 'object') {
+      return cellValue.label
+    }
+    if (key === true || key === 'true') return i18n.t('Yes')
+    if (key === false || key === 'false') return i18n.t('No')
+    return cellValue
   },
   getIcon({ row, cellValue }) {
     const key = this.getKey({ row, cellValue })

src/components/Table/TableFormatters/DiscoverConfirmFormatter.vue

@@ -6,7 +6,7 @@
           <i class="fa fa-check" />
         </el-button>
         <el-dropdown-menu slot="dropdown">
-          <el-dropdown-item v-for="item of iActions" :key="item.name" :command="item.name">
+          <el-dropdown-item v-for="item of iActions" :key="item.name" :command="item.name" :disabled="item.disabled">
             {{ item.label }}
           </el-dropdown-item>
         </el-dropdown-menu>
@@ -123,17 +123,20 @@ export default {
         {
           name: 'delete_remote',
           label: this.$t('DeleteRemoteAccount'),
-          has: this.row.remote_present
+          has: this.row.remote_present,
+          disabled: this.$store.getters.currentOrgIsRoot
         },
         {
           name: 'add_account',
           label: this.$t('AddAccount'),
-          has: !this.row.present
+          has: !this.row.present,
+          disabled: this.$store.getters.currentOrgIsRoot
         },
         {
           name: 'change_password_add',
           label: this.$t('AddAccountAfterChangingPassword'),
-          has: !this.row.present
+          has: !this.row.present,
+          disabled: this.$store.getters.currentOrgIsRoot
         }
       ]
       return actions.filter(action => {

src/components/Table/TableFormatters/HostInfoFormatter.vue

@@ -50,23 +50,75 @@ export default {
       return cellValue
     },
     viewText() {
-      const cpuCount = this.items['cpu_count']
-      const cpuCores = this.items['cpu_cores']
-      const cpuVcpus = this.items['cpu_vcpus']
-      const memory = this.items['memory']
-      const diskTotal = this.items['disk_total']
+      const cpuCount = Number(this.items['cpu_count'] || 0)
+      const cpuCores = Number(this.items['cpu_cores'] || 0)
+      const cpuVcpus = Number(this.items['cpu_vcpus'] || 0)
+      const memory = Number(this.items['memory'] || 0)
+      const diskTotal = Number(this.items['disk_total'] || 0)
+      const rawCpuModel = this.items['cpu_model']
+      const rawGpuModel = this.items['gpu_model']
+
+      let summary = ''
+
       if (cpuCount) {
-        let text = `${cpuVcpus || cpuCores * cpuCount} Core`
+        const coreCount = cpuVcpus || (cpuCores * cpuCount)
+        summary = `${coreCount} Core`
+
         if (memory) {
-          text += ` ${memory}G`
+          summary += ` ${Math.round(memory)}G`
         }
+
         if (diskTotal) {
-          text += ` ${diskTotal}G`
+          summary += ` ${Math.round(diskTotal)}G`
         }
-        return text
+
+        const cpuModel = this.formatCpuModel(rawCpuModel)
+        if (cpuModel) {
+          summary += ` (${cpuModel})`
+        }
+
+        if (rawGpuModel) {
+          const gpu = this.formatGpuModel(rawGpuModel)
+          summary += ` ${gpu}`
+        }
+
+        return summary
       }
+
       return this.items?.distribution || '-'
     }
+  },
+  methods: {
+    formatCpuModel(raw) {
+      if (!raw) return ''
+
+      const match = raw.match(/^([^\s]+)\s*(x\d+)?$/)
+      let base = match?.[1] || raw
+      const suffix = match?.[2] || ''
+
+      base = base
+        .replace(/GenuineIntel/i, '')
+        .replace(/\b\d+(st|nd|rd|th)? Gen\b/i, '')
+        .replace(/\(R\)/g, '')
+        .replace(/\(TM\)/g, '')
+        .replace(/\s+/g, ' ')
+        .trim()
+
+      return `${base}${suffix}`
+    },
+    formatGpuModel(raw) {
+      if (!raw) return ''
+
+      const match = raw.match(/(.+?),\s*(\d+),\s*([\d.]+)(?:\s*x(\d+))?/)
+      if (match) {
+        const [, model, vramMb, driverVersion, countStr] = match
+        const count = countStr ? parseInt(countStr) : 1
+        const vramGb = Math.round(parseInt(vramMb) / 1024)
+        const label = `${model} (${vramGb}GB, Driver ${driverVersion})`
+        return count > 1 ? `${label} x${count}` : label
+      }
+      return raw // fallback
+    }
   }
 }
 </script>

src/components/Table/TableFormatters/PlatformFormatter.vue

@@ -45,7 +45,7 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
+<style lang="scss" scoped>
 .platform-td {
   display: flex;
   flex-wrap: nowrap;
@@ -55,6 +55,7 @@ export default {
   .icon-zone {
     width: 1.5em;
     height: 1.5em;
+    flex-shrink: 0;
 
     .asset-icon {
       height: 100%;
@@ -66,6 +67,10 @@ export default {
 
   .platform-name {
     flex: 1;
+    min-width: 0;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis
   }
 }
 

src/components/Table/TagSearch/index.vue

@@ -320,15 +320,15 @@ export default {
       // this.$emit('tagSearch', this.filterMaps)
 
       // 修改查询参数时改变url中保存的参数
-      if (this.getUrlQuery) {
-        let newQuery = _.cloneDeep(this.$route.query)
-        if (this.filterKey.startsWith('search')) {
-          newQuery = { ...newQuery, search: encodeURI(this.filterMaps.search) }
-        } else {
-          newQuery = { ...newQuery, [this.filterKey]: encodeURI(this.filterValue) }
-        }
-        this.$router.replace({ query: newQuery })
-      }
+      // if (this.getUrlQuery) {
+      // let newQuery = _.cloneDeep(this.$route.query)
+      // if (this.filterKey.startsWith('search')) {
+      // newQuery = { ...newQuery, search: encodeURI(this.filterMaps.search) }
+      // } else {
+      // newQuery = { ...newQuery, [this.filterKey]: encodeURI(this.filterValue) }
+      // }
+      // this.$router.replace({ query: newQuery })
+      // }
 
       this.filterKey = ''
       this.filterValue = ''

src/components/Tree/AutoDataZTree/index.vue

@@ -178,7 +178,18 @@ export default {
         return
       }
       if (currentNode) {
-        currentNode.name = currentNode.meta.data.value
+        // 从节点名称中提取资产数量并保存
+        const nameMatch = currentNode.name.match(/^(.+?)\s*\((\d+)\)$/)
+
+        if (nameMatch) {
+          const pureName = nameMatch[1]
+          const assetsAmount = parseInt(nameMatch[2])
+
+          currentNode.name = pureName
+          currentNode.meta.data['assetsAmount'] = assetsAmount // 保存资产数量，确保重命名时不会丢失
+        } else {
+          currentNode.name = currentNode.meta.data.value
+        }
       }
       this.zTree.editName(currentNode)
     },
@@ -237,13 +248,14 @@ export default {
       if (isCancel) {
         return
       }
+
+      const originalAssetsAmount = treeNode.meta.data['assetsAmount'] || 0
+
       this.$axios.patch(url, { 'value': treeNode.name }).then(res => {
-        let assetsAmount = treeNode.meta.data['assetsAmount']
-        if (!assetsAmount) {
-          assetsAmount = 0
-        }
-        treeNode.name = treeNode.name + ' (' + assetsAmount + ')'
-        treeNode.meta.data = res
+        treeNode.name = treeNode.name + ' (' + originalAssetsAmount + ')'
+        treeNode.meta.data = Object.assign({}, treeNode.meta.data, res)
+        treeNode.meta.data['assetsAmount'] = originalAssetsAmount
+
         this.zTree.updateNode(treeNode)
         this.$message.success(this.$tc('UpdateSuccessMsg'))
       }).finally(() => {

src/components/Widgets/MarkDown/index.vue

@@ -53,24 +53,24 @@ export default {
       resizeObserver: null,
       span: 12,
       isShow: true,
-      iValue: this.value
+      iValue: this.sanitizeContent(this.value)
     }
   },
   computed: {
     sanitizedValue() {
-      // 转义特殊字符
-      let content = this.iValue.replace(/\\/g, '\\\\').replace(/\$/g, '\\$')
+      const content = this.iValue.replace(/\\/g, '\\\\').replace(/\$/g, '\\$')
 
-      // 使用 DOMPurify 进行 XSS 过滤
-      content = DOMPurify.sanitize(content)
-
-      return content
+      return this.sanitizeContent(content)
+    }
+  },
+  watch: {
+    value(newVal) {
+      this.iValue = this.sanitizeContent(newVal)
     }
   },
   mounted() {
     this.$nextTick(() => {
       this.resizeObserver = new ResizeObserver(entries => {
-        // 监听高度变化
         const height = entries[0].target.offsetHeight
         if (height) {
           this.height = height
@@ -90,8 +90,19 @@ export default {
     this.resizeObserver = null
   },
   methods: {
+    sanitizeContent(content) {
+      if (!content) return ''
+
+      return DOMPurify.sanitize(content, {
+        ALLOWED_TAGS: ['p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ul', 'ol', 'li', 'strong', 'em', 'code', 'pre', 'blockquote', 'a'],
+        FORBID_TAGS: ['script', 'style', 'iframe', 'frame', 'object', 'embed'],
+        FORBID_ATTR: ['onerror', 'onload', 'onclick', 'onmouseover']
+      })
+    },
     onChange() {
-      this.$emit('change', this.iValue)
+      const sanitizedValue = this.sanitizeContent(this.iValue)
+      this.iValue = sanitizedValue
+      this.$emit('change', sanitizedValue)
     },
     onView() {
       this.isShow = !this.isShow

src/components/const.js

@@ -38,10 +38,20 @@ export const crontab = {
     return formValue.is_periodic === false
   },
   helpText: i18n.t('CrontabHelpText'),
-  helpTip: i18n.t('CrontabHelpTip')
+  helpTip: i18n.t('CrontabHelpTip'),
+  on: {
+    change: (val, updateForm) => {
+      updateForm({
+        interval: null
+      })
+    }
+  }
 }
 
 const validatorInterval = (rule, value, callback) => {
+  if (value === '') {
+    return callback()
+  }
   if (parseInt(value) < 1) {
     return callback(new Error(i18n.t('EnsureThisValueIsGreaterThanOrEqualTo1')))
   }
@@ -59,7 +69,14 @@ export const interval = {
   },
   rules: [
     { validator: validatorInterval }
-  ]
+  ],
+  on: {
+    input: (val, updateForm) => {
+      updateForm({
+        crontab: ''
+      })
+    }
+  }
 }
 
 export const is_periodic = {

src/components/index.js

@@ -19,6 +19,7 @@ export { default as UploadKey } from './Form/FormFields/UploadKey.vue'
 export { default as AssetSelect } from './Apps/AssetSelect'
 export { default as AutomationParams } from './Apps/AutomationParams'
 export { default as BlockedIPs } from './Apps/BlockedIPs'
+export { default as LeakPasswords } from './Apps/LeakPasswords'
 export { default as SvgIcon } from './Widgets/SvgIcon'
 export { default as TreeTable } from './Table/TreeTable'
 export { default as AssetTreeTable } from './Apps/AssetTreeTable'

src/i18n/langs/index.js

@@ -2,6 +2,10 @@ import zhLocale from 'element-ui/lib/locale/lang/zh-CN'
 import zhTWLocale from 'element-ui/lib/locale/lang/zh-TW'
 import enLocale from 'element-ui/lib/locale/lang/en'
 import jaLocale from 'element-ui/lib/locale/lang/ja'
+import ptBrLocale from 'element-ui/lib/locale/lang/pt-br'
+import esLocale from 'element-ui/lib/locale/lang/es'
+import ruLocale from 'element-ui/lib/locale/lang/ru-RU'
+import koLocale from 'element-ui/lib/locale/lang/ko'
 import zh from './zh.json'
 import zhHant from './zh_hant.json'
 import en from './en.json'
@@ -23,6 +27,18 @@ const messages = {
   ja: {
     ...jaLocale,
     ...ja
+  },
+  pt_br: {
+    ...ptBrLocale
+  },
+  es: {
+    ...esLocale
+  },
+  ru: {
+    ...ruLocale
+  },
+  ko: {
+    ...koLocale
   }
 }
 

src/layout/components/GenericCreateUpdateForm/index.vue

@@ -244,6 +244,7 @@ export default {
             this.$refs.form.setFieldError(key, err)
           }
         }
+        this.$emit('performError', data)
       }
     },
     hasSaveContinue: {

src/layout/components/NavHeader/Help.vue

@@ -51,7 +51,7 @@ export default {
           window.open(this.URLSite.HELP_SUPPORT_URL, '_blank')
           break
         case 'enterprise':
-          window.open('https://jumpserver.org/enterprise.html', '_blank')
+          window.open('https://www.jumpserver.com/#section-edition', '_blank')
           break
         case 'about':
           this.visible = true

src/layout/components/Page/index.vue

@@ -38,14 +38,14 @@
             <div class="disabled-text">
               {{ $t('UpgradeEnterpriseEditionHelpText') }}
             </div>
-            <el-button class="upgrade-btn" type="primary">
+            <el-button class="upgrade-btn" type="primary" @click="handleUpgrade">
               {{ $t('UpgradeEnterpriseEdition') }}
             </el-button>
           </div>
         </IBox>
       </div>
-      <el-alert v-if="helpMessage" type="success">
-        <span v-sanitize="helpMessage" class="announcement-main" />
+      <el-alert v-if="iHelpMessage" type="success">
+        <span v-sanitize="iHelpMessage" class="announcement-main" />
       </el-alert>
       <slot />
     </PageContent>
@@ -119,6 +119,9 @@ export default {
         return true
       }
       return window.history.length <= 2
+    },
+    iHelpMessage() {
+      return this.helpMessage || this.helpTip
     }
   },
   methods: {
@@ -136,7 +139,7 @@ export default {
       clearTimeout(this.longPressTimer)
     },
     handleUpgrade() {
-      const url = 'http://www.jumpserver.org/support/'
+      const url = 'https://www.lxware.hk/pages/about'
       window.open(url, '_blank')
     }
   }
@@ -153,8 +156,8 @@ export default {
   overflow-x: hidden;
 
   .el-alert {
-    margin-top: -5px;
-    margin-bottom: 5px;
+    margin: -5px 0 5px 0!important;
+    width: calc(100% - 10px);
   }
 
   .page-content {

src/main.js

@@ -24,6 +24,9 @@ import { message } from '@/utils/message'
 import xss from '@/utils/xss'
 import ElTableTooltipPatch from '@/utils/elTableTooltipPatch.js'
 import VSanitize from 'v-sanitize'
+import moment from 'moment'
+moment.locale('zh-cn')
+
 /**
  * If you don't want to use mock-server
  * you want to use MockJs for mock api
@@ -50,11 +53,7 @@ Vue.config.productionTip = false
 Vue.use(VueCookie)
 window.$cookie = VueCookie
 
-const moment = require('moment')
-require('moment/locale/zh-cn')
-Vue.use(require('vue-moment'), {
-  moment
-})
+Vue.prototype.$moment = moment
 
 Vue.use(VueLogger, loggerOptions)
 

src/router/console/acls.js

@@ -25,7 +25,8 @@ export default [
           title: i18n.t('UserLoginACLs'),
           app: 'acls',
           resource: 'loginacl',
-          disableOrgsChange: true
+          disableOrgsChange: true,
+          licenseRequired: true
         },
         children: [
           {

src/router/console/assets.js

@@ -228,35 +228,35 @@ export default [
     component: empty,
     redirect: '',
     meta: {
-      resource: 'domain',
+      resource: 'zone',
       icon: 'zone',
-      permissions: ['assets.view_domain']
+      permissions: ['assets.view_zone']
     },
     children: [
       {
         path: '',
         name: 'ZoneList',
-        component: () => import('@/views/assets/Domain/DomainList.vue'),
+        component: () => import('@/views/assets/Zone/ZoneList.vue'),
         meta: { title: i18n.t('ZoneList') }
       },
       {
         path: 'create',
         name: 'ZoneCreate',
-        component: () => import('@/views/assets/Domain/DomainCreateUpdate.vue'),
+        component: () => import('@/views/assets/Zone/ZoneCreateUpdate.vue'),
         hidden: true,
         meta: { title: i18n.t('ZoneCreate') }
       },
       {
         path: ':id/update',
         name: 'ZoneUpdate',
-        component: () => import('@/views/assets/Domain/DomainCreateUpdate.vue'),
+        component: () => import('@/views/assets/Zone/ZoneCreateUpdate.vue'),
         hidden: true,
         meta: { title: i18n.t('ZoneUpdate') }
       },
       {
         path: ':id',
         name: 'ZoneDetail',
-        component: () => import('@/views/assets/Domain/DomainDetail'),
+        component: () => import('@/views/assets/Zone/ZoneDetail'),
         hidden: true,
         meta: { title: i18n.t('Zone') }
       }
@@ -274,7 +274,7 @@ export default [
       {
         path: 'create',
         name: 'GatewayCreate',
-        component: () => import('@/views/assets/Domain/DomainDetail/GatewayCreateUpdate.vue'),
+        component: () => import('@/views/assets/Zone/ZoneDetail/GatewayCreateUpdate.vue'),
         meta: {
           title: i18n.t('GatewayCreate'),
           permissions: ['assets.view_gateway']
@@ -283,7 +283,7 @@ export default [
       {
         path: ':id/update',
         name: 'GatewayUpdate',
-        component: () => import('@/views/assets/Domain/DomainDetail/GatewayCreateUpdate.vue'),
+        component: () => import('@/views/assets/Zone/ZoneDetail/GatewayCreateUpdate.vue'),
         meta: {
           title: i18n.t('GatewayUpdate'),
           permissions: ['assets.change_gateway']

src/store/modules/assets.js

@@ -89,6 +89,9 @@ const actions = {
         })
     })
   },
+  cleanPlatforms({ commit, dispatch, state }) {
+    state.platforms = []
+  },
   addToRecentPlatforms({ commit, display, state }, platform) {
     const recentPlatformIds = state.recentPlatformIds.filter(i => i !== platform.id)
     recentPlatformIds.unshift(platform.id)

src/store/modules/settings.js

@@ -2,6 +2,7 @@ import defaultSettings from '@/settings'
 import { getPublicSettings } from '@/api/settings'
 import { changeElementColor, changeThemeColors } from '@/utils/theme/index'
 import { changeMenuColor } from '@/utils/theme/color'
+import request from '@/utils/request'
 
 const { showSettings, fixedHeader, sidebarLogo, tagsView } = defaultSettings
 
@@ -12,6 +13,7 @@ const state = {
   tagsView: tagsView,
   publicSettings: {},
   hasValidLicense: false,
+  authMethods: {},
   themeColors: JSON.parse(localStorage.getItem('themeColors')) || {}
 }
 
@@ -29,6 +31,9 @@ const mutations = {
       state.hasValidLicense = settings['XPACK_LICENSE_IS_VALID']
     }
   },
+  SET_SECURITY_WATERMARK_ENABLED: (state, value) => {
+    state.publicSettings['SECURITY_WATERMARK_ENABLED'] = value
+  },
   setTheme(state, data) {
     state.themeColors = data
     localStorage.setItem('themeColors', JSON.stringify(data))
@@ -57,7 +62,7 @@ const actions = {
             link.href = faviconURL
           }
           // 动态修改Title
-          document.title = data['INTERFACE']['login_title']
+          document.title = data?.INTERFACE?.login_title || ''
         }
         const themeColors = data?.INTERFACE?.theme_info?.colors || {}
         commit('SET_PUBLIC_SETTINGS', data)
@@ -75,6 +80,34 @@ const actions = {
     changeMenuColor(themeColors)
     changeElementColor(themeColors)
     commit('setTheme', themeColors)
+  },
+  updateAuthItemStatus({ commit }, payload) {
+    const [key, value] = payload
+    return new Promise((resolve, reject) => {
+      const url = '/api/v1/settings/setting/?category=auth'
+      const data = { [key]: value }
+      request.patch(url, data).then(res => {
+        state.authMethods[key] = value
+        resolve(res)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  getAuthMethods({ commit, state }) {
+    return new Promise((resolve, reject) => {
+      if (state.authMethods && Object.keys(state.authMethods).length > 0) {
+        resolve(state.authMethods)
+      } else {
+        const url = '/api/v1/settings/setting/?category=auth'
+        request.get(url).then(res => {
+          state.authMethods = res
+          resolve(res)
+        }).catch(error => {
+          reject(error)
+        })
+      }
+    })
   }
 }
 

src/styles/menu.scss

@@ -144,6 +144,9 @@ $single-menu-height: 38px;
       line-height: $single-menu-height;
       display: inline-block;
 
+      .el-tooltip {
+          width: 55px !important;
+        }
     }
 
     .group-title {

src/utils/common.js

@@ -397,8 +397,9 @@ export function getDrawerWidth() {
 }
 
 export class ObjectLocalStorage {
-  constructor(key) {
+  constructor(key, attr) {
     this.key = key
+    this.attr = attr
   }
 
   b64(val) {
@@ -421,6 +422,9 @@ export class ObjectLocalStorage {
 
   get(attr, defaults) {
     const obj = this.getObject(this.key)
+    if (!attr && this.attr) {
+      attr = this.attr
+    }
     const attrSafe = this.b64(attr)
     const val = obj[attrSafe]
     if (val === undefined) {
@@ -431,6 +435,10 @@ export class ObjectLocalStorage {
 
   set(attr, value) {
     const obj = this.getObject(this.key)
+    if (value === undefined && this.attr) {
+      value = attr
+      attr = this.attr
+    }
     const attrSafe = this.b64(attr)
     obj[attrSafe] = value
     window.localStorage.setItem(this.key, JSON.stringify(obj))

src/utils/passkey.js

@@ -8,7 +8,9 @@ for (let i = 0; i < chars.length; i++) {
 
 const encode = function(arraybuffer) {
   const bytes = new Uint8Array(arraybuffer)
-  let i; const len = bytes.length; let base64url = ''
+  let i
+  const len = bytes.length
+  let base64url = ''
 
   for (i = 0; i < len; i += 3) {
     base64url += chars[bytes[i] >> 2]
@@ -17,7 +19,7 @@ const encode = function(arraybuffer) {
     base64url += chars[bytes[i + 2] & 63]
   }
 
-  if ((len % 3) === 2) {
+  if (len % 3 === 2) {
     base64url = base64url.substring(0, base64url.length - 1)
   } else if (len % 3 === 1) {
     base64url = base64url.substring(0, base64url.length - 2)
@@ -28,8 +30,13 @@ const encode = function(arraybuffer) {
 
 const decode = function(base64string) {
   const bufferLength = base64string.length * 0.75
-  const len = base64string.length; let i; let p = 0
-  let encoded1; let encoded2; let encoded3; let encoded4
+  const len = base64string.length
+  let i
+  let p = 0
+  let encoded1
+  let encoded2
+  let encoded3
+  let encoded4
 
   const bytes = new Uint8Array(bufferLength)
 
@@ -47,15 +54,16 @@ const decode = function(base64string) {
   return bytes.buffer
 }
 
-const publicKeyCredentialToJSON = (pubKeyCred) => {
+const publicKeyCredentialToJSON = pubKeyCred => {
   if (pubKeyCred instanceof Array) {
     const arr = []
-    for (const i of pubKeyCred) { arr.push(publicKeyCredentialToJSON(i)) }
-
+    for (const i of pubKeyCred) {
+      arr.push(publicKeyCredentialToJSON(i))
+    }
     return arr
   }
 
-  if (pubKeyCred instanceof ArrayBuffer) {
+  if (pubKeyCred instanceof ArrayBuffer || pubKeyCred instanceof Uint8Array) {
     return encode(pubKeyCred)
   }
 
@@ -73,8 +81,7 @@ const publicKeyCredentialToJSON = (pubKeyCred) => {
 }
 
 export default {
-  'decode': decode,
-  'encode': encode,
-  'publicKeyCredentialToJSON': publicKeyCredentialToJSON
+  decode: decode,
+  encode: encode,
+  publicKeyCredentialToJSON: publicKeyCredentialToJSON
 }
-

src/utils/startup.js

@@ -138,13 +138,20 @@ export async function generatePageRoutes({ to, from, next }) {
 }
 
 export async function checkUserFirstLogin({ to, from, next }) {
+  // 防止递归调用
+  if (to.path === '/profile/improvement') return true
   if (store.state.users.profile.is_first_login) {
-    next('/profile/improvement')
-  }
-  const nextRoute = localStorage.getItem('next')
-  if (nextRoute) {
-    localStorage.setItem('next', '')
-    next(nextRoute.replace('#', ''))
+    next({
+      name: 'Improvement',
+      replace: true,
+      query: { _t: Date.now() } // 添加时间戳，防止 from 一样 next 不触发 guard.js router.beforeEach逻辑
+    })
+  } else {
+    const nextRoute = localStorage.getItem('next')
+    if (nextRoute) {
+      localStorage.setItem('next', '')
+      next(nextRoute.replace('#', ''))
+    }
   }
 }
 
@@ -160,13 +167,18 @@ export async function changeCurrentViewIfNeed({ to, from, next }) {
   Vue.$log.debug('Change has current view, has perm: ', viewName, '=>', has)
   if (has) {
     await store.dispatch('users/changeToView', viewName)
-    return
+    return { status: 'continue' }
   }
   viewName = getPropView()
   // Next 之前要重置 init 状态，否则这些路由守卫就不走了
   await store.dispatch('app/reset')
   next(`/${viewName}/`)
-  return new Promise((resolve, reject) => reject(''))
+
+  // new Promise((resolve, reject) => reject('')) 这种方式通过输出发现在页面除此渲染的时候执行两次，
+  // 返回一个 Promise 我理解是为了中断第一次导航，确保只有第二次导航到到有权限的视图。由于第一个 has 为 false
+  // 导致被 startup catch 捕获，而 error 的 trace 之所以锁定为到 runtime 等中也是因为由于 Babel 和 Polyfill 的缘故
+
+  return { status: 'redirected', to: viewName }
 }
 
 function onI18nLoaded() {
@@ -188,6 +200,8 @@ function onI18nLoaded() {
 export async function startup({ to, from, next }) {
   // if (store.getters.inited) { return true }
   if (store.getters.inited) {
+    // 页面初始化后也需要检测
+    await checkUserFirstLogin({ to, from, next })
     return true
   }
 
@@ -200,7 +214,8 @@ export async function startup({ to, from, next }) {
     await checkLogin({ to, from, next })
     await onI18nLoaded()
     await getPublicSetting({ to, from, next }, false)
-    await changeCurrentViewIfNeed({ to, from, next })
+    const viewResult = await changeCurrentViewIfNeed({ to, from, next })
+    if (viewResult && viewResult.status === 'redirected') return true
     await changeCurrentOrgIfNeed({ to, from, next })
     await generatePageRoutes({ to, from, next })
     await checkUserFirstLogin({ to, from, next })

src/views/accounts/Account/AccountList.vue

@@ -47,7 +47,12 @@ export default {
         showMenu: false,
         showAssets: true,
         url: '/api/v1/accounts/accounts/',
-        countResource: 'account'
+        countResource: 'account',
+        edit: {
+          drag: {
+            isMove: false
+          }
+        }
       }
     }
   }

src/views/accounts/AccountBackup/AccountBackupList.vue

@@ -56,18 +56,9 @@ export default {
             }
           },
           executed_amount: {
-            formatter: DetailFormatter,
-            formatterArgs: {
-              can: vm.$hasPerm('accounts.view_backupaccountexecution'),
-              getRoute({ row }) {
-                return {
-                  name: 'AccountBackupList',
-                  query: {
-                    tab: 'AccountBackupExecutionList',
-                    automation_id: row.id
-                  }
-                }
-              }
+            formatter: (row) => {
+              const can = vm.$hasPerm('accounts.view_backupaccountexecution')
+              return <el-link onClick={ () => this.handleExecAmount(row) } disabled={ !can }>{ row.executed_amount }</el-link>
             }
           },
           actions: {
@@ -104,6 +95,17 @@ export default {
         hasImport: false
       }
     }
+  },
+  methods: {
+    handleExecAmount(row) {
+      this.$router.push({
+        name: 'AccountBackupList',
+        query: {
+          tab: 'AccountBackupExecutionList',
+          automation_id: row.id
+        }
+      })
+    }
   }
 }
 </script>

src/views/accounts/AccountBackup/index.vue

@@ -40,6 +40,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-</style>

src/views/accounts/AccountChangeSecret/AccountChangeSecretList.vue

@@ -61,19 +61,9 @@ export default {
             width: '180px'
           },
           executed_amount: {
-            formatter: DetailFormatter,
-            formatterArgs: {
-              route: 'AccountDiscoverList',
-              can: vm.$hasPerm('accounts.view_changesecretexecution'),
-              getRoute({ row }) {
-                return {
-                  name: 'AccountChangeSecretDetail',
-                  query: {
-                    tab: 'AccountChangeSecretExecutionList',
-                    automation_id: row.id
-                  }
-                }
-              }
+            formatter: (row) => {
+              const can = vm.$hasPerm('accounts.view_changesecretexecution')
+              return <el-link onClick={() => this.handleExecAmount(row)} disabled={!can}>{row.executed_amount}</el-link>
             }
           },
           actions: {
@@ -111,9 +101,62 @@ export default {
         hasRefresh: true,
         hasExport: false,
         hasImport: false,
-        createRoute: 'AccountChangeSecretCreate'
+        createRoute: 'AccountChangeSecretCreate',
+        extraMoreActions: [
+          {
+            name: 'BatchDisable',
+            title: this.$t('DisableSelected'),
+            icon: 'fa fa-ban',
+            can: ({ selectedRows }) => selectedRows.length > 0 && this.$hasPerm('accounts.change_changesecretautomation'),
+            callback: ({ selectedRows, reloadTable }) => this.bulkDisableCallback(selectedRows, reloadTable)
+          },
+          {
+            name: 'BatchActivate',
+            title: this.$t('ActivateSelected'),
+            icon: 'fa fa-check-circle-o',
+            can: ({ selectedRows }) => selectedRows.length > 0 && this.$hasPerm('accounts.change_changesecretautomation'),
+            callback: ({ selectedRows, reloadTable }) => this.bulkActivateCallback(selectedRows, reloadTable)
+          }
+        ]
       }
     }
+  },
+  methods: {
+    handleExecAmount(row) {
+      this.$router.push({
+        name: 'AccountChangeSecretList',
+        query: {
+          tab: 'AccountChangeSecretExecutionList',
+          automation_id: row.id
+        }
+      })
+    },
+    bulkDisableCallback(selectedRows, reloadTable) {
+      const url = '/api/v1/accounts/change-secret-automations/'
+      const data = selectedRows.map(row => {
+        return { id: row.id, is_active: false }
+      })
+      if (data.length === 0) return
+      this.$axios.patch(url, data).then(() => {
+        reloadTable()
+        this.$message.success(this.$t('DisableSuccessMsg'))
+      }).catch(error => {
+        this.$message.error(this.$t('UpdateErrorMsg') + ' ' + error)
+      })
+    },
+    bulkActivateCallback(selectedRows, reloadTable) {
+      const url = '/api/v1/accounts/change-secret-automations/'
+      const data = selectedRows.map(row => {
+        return { id: row.id, is_active: true }
+      })
+      if (data.length === 0) return
+      this.$axios.patch(url, data).then(() => {
+        reloadTable()
+        this.$message.success(this.$t('ActivateSuccessMsg'))
+      }).catch(error => {
+        this.$message.error(this.$t('UpdateErrorMsg') + ' ' + error)
+      })
+    }
   }
 }
 </script>

src/views/accounts/AccountChangeSecret/AccountList.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <GenericListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
+  </div>
+</template>
+
+<script>
+import { GenericListTable } from '@/layout/components'
+import { ActionsFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
+
+export default {
+  name: 'AccountChangeSecret',
+  components: {
+    GenericListTable
+  },
+  data() {
+    const vm = this
+    return {
+      secretUrl: '',
+      showViewSecretDialog: false,
+      tableConfig: {
+        url: '/api/v1/accounts/change-secret-status/',
+        columns: [
+          'execution_id', 'asset', 'account', 'status', 'ttl', 'actions'
+        ],
+        columnsMeta: {
+          asset: {
+            formatter: DetailFormatter,
+            formatterArgs: {
+              drawer: true,
+              can: this.$hasPerm('assets.view_asset'),
+              getTitle: ({ row }) => row.asset.name,
+              getDrawerTitle: ({ row }) => row.asset.name,
+              getRoute: ({ row }) => ({
+                name: 'AssetDetail',
+                params: { id: row.asset.id },
+                query: { tab: 'Basic' }
+              })
+            }
+          },
+          account: {
+            label: vm.$t('Username'),
+            formatter: DetailFormatter,
+            formatterArgs: {
+              drawer: true,
+              can: this.$hasPerm('accounts.view_account'),
+              getTitle: ({ row }) => row.username,
+              getDrawerTitle: ({ row }) => row.username,
+              getRoute: ({ row }) => ({
+                name: 'AssetAccountDetail',
+                params: { id: row.id },
+                query: { tab: 'Basic' }
+              })
+            }
+          },
+          ttl: {
+            label: vm.$t('TTL')
+          },
+          execution_id: {
+            width: '200px',
+            label: vm.$t('ExecutionID'),
+            formatter: DetailFormatter,
+            formatterArgs: {
+              drawer: true,
+              can: true,
+              getTitle: ({ row }) => row.meta?.execution_id ? row.meta.execution_id : '-',
+              getDrawerTitle: ({ row }) => row.meta?.execution_id,
+              getRoute: ({ row }) => ({
+                name: 'AccountChangeSecretExecutionDetail',
+                params: { id: row.meta?.execution_id }
+              })
+            }
+          },
+          status: {
+            width: '100px',
+            label: vm.$t('Status'),
+            formatter: (row) => {
+              const statusMap = {
+                queued: 'Queued',
+                ready: 'Ready',
+                processing: 'Processing'
+              }
+
+              if (statusMap[row.meta.status]) {
+                return <span>{ vm.$t(statusMap[row.meta.status]) }</span>
+              }
+              return <span>–</span>
+            }
+          },
+          actions: {
+            formatter: ActionsFormatter,
+            formatterArgs: {
+              hasUpdate: false,
+              hasDelete: false,
+              hasClone: false,
+              moreActionsTitle: this.$t('More'),
+              extraActions: [
+                {
+                  name: 'Delete',
+                  title: this.$t('Delete'),
+                  can: this.$hasPerm('accounts.add_changesecretexecution'),
+                  type: 'danger',
+                  callback: ({ row }) => {
+                    this.$axios.delete(
+                      '/api/v1/accounts/change-secret-status/',
+                      {
+                        data: {
+                          account_ids: [row.id]
+                        }
+                      }
+                    )
+                    vm.$refs.ListTable.reloadTable()
+                  }
+                }
+              ]
+            }
+          }
+        }
+      },
+      headerActions: {
+        hasSearch: true,
+        hasRefresh: true,
+        hasLeftActions: true,
+        hasRightActions: true,
+        hasExport: false,
+        hasImport: false,
+        hasCreate: false,
+        hasBulkDelete: false,
+        hasBulkUpdate: false,
+        searchConfig: {
+          getUrlQuery: true,
+          options: [
+            {
+              label: this.$t('AssetName'),
+              value: 'asset_name'
+            },
+            {
+              label: this.$t('ExecutionID'),
+              value: 'execution_id'
+            },
+            {
+              value: 'status',
+              label: this.$t('Status'),
+              type: 'choice',
+              children: [
+                {
+                  default: true,
+                  value: 'queued',
+                  label: this.$t('Queued')
+                },
+                {
+                  value: 'ready',
+                  label: this.$t('Ready')
+                },
+                {
+                  value: 'processing',
+                  label: this.$t('Processing')
+                }
+              ]
+            }
+          ]
+        },
+        extraMoreActions: [
+          {
+            name: 'DeleteSelected',
+            title: this.$t('DeleteSelected'),
+            type: 'primary',
+            fa: 'fa-retweet',
+            can: ({ selectedRows }) => {
+              return selectedRows.length > 0
+            },
+            callback: function({ selectedRows }) {
+              const ids = selectedRows.map(v => {
+                return v.id
+              })
+              this.$axios.delete(
+                '/api/v1/accounts/change-secret-status/',
+                {
+                  data: {
+                    account_ids: ids
+                  }
+                }
+              )
+              vm.$refs.ListTable.reloadTable()
+            }.bind(this)
+          }
+        ]
+      }
+    }
+  }
+}
+</script>

src/views/accounts/AccountChangeSecret/Executions/AccountChangeSecretExecutionList.vue

@@ -17,9 +17,8 @@ export default {
     BaseExecutionList
   },
   data() {
-    const params = new URLSearchParams(this.$route.params).toString()
     return {
-      url: `/api/v1/accounts/change-secret-executions/?${params}`,
+      url: `/api/v1/accounts/change-secret-executions/`,
       detailRoute: 'AccountChangeSecretExecutionDetail',
       automationRoute: 'AccountChangeSecretDetail',
       resource: 'changesecretexecution',

src/views/accounts/AccountChangeSecret/index.vue

@@ -5,6 +5,7 @@
 <script>
 import { TabPage } from '@/layout/components'
 import { mapGetters } from 'vuex'
+import store from '@/store'
 
 export default {
   name: 'Index',
@@ -38,13 +39,22 @@ export default {
             name: 'ChangeSecretRecord',
             hidden: () => !this.$hasPerm('accounts.view_changesecretrecord'),
             component: () => import('@/views/accounts/AccountChangeSecret/ExecutionDetail/AccountChangeSecretRecord.vue')
+          },
+          {
+            title: this.$t('ChangeSecretStatus'),
+            name: 'ChangeSecretStatus',
+            hidden: () => !this.$hasPerm('accounts.view_changesecretexecution') || !this.ChangeSecretAfterSessionEnd,
+            component: () => import('@/views/accounts/AccountChangeSecret/AccountList.vue')
           }
         ]
       }
     }
   },
   computed: {
-    ...mapGetters(['hasValidLicense'])
+    ...mapGetters(['hasValidLicense']),
+    ChangeSecretAfterSessionEnd() {
+      return store.getters.publicSettings?.CHANGE_SECRET_AFTER_SESSION_END
+    }
   },
   mounted() {
     this.$eventBus.$on('change-tab', this.handleChangeTab)

src/views/accounts/AccountDiscover/AccountDiscoverTaskList.vue

@@ -3,7 +3,7 @@
     :create-drawer="createDrawer"
     :detail-drawer="detailDrawer"
     :header-actions="headerActions"
-    :resource="$tc('AccountDiscoverTask')"
+    :resource="$tc('DiscoverAccountTask')"
     :table-config="tableConfig"
   />
 </template>
@@ -69,19 +69,9 @@ export default {
           },
           periodic_display: {},
           executed_amount: {
-            formatter: DetailFormatter,
-            formatterArgs: {
-              route: 'AccountDiscoverList',
-              can: vm.$hasPerm('accounts.view_gatheraccountsexecution'),
-              getRoute({ row }) {
-                return {
-                  name: 'AccountDiscoverList',
-                  query: {
-                    tab: 'AccountDiscoverTaskExecutionList',
-                    automation_id: row.id
-                  }
-                }
-              }
+            formatter: (row) => {
+              const can = vm.$hasPerm('accounts.view_gatheraccountsexecution')
+              return <el-link onClick={ () => this.handleExecAmount(row) } disabled={ !can }>{ row.executed_amount }</el-link>
             }
           },
           actions: {
@@ -124,6 +114,17 @@ export default {
         }
       }
     }
+  },
+  methods: {
+    handleExecAmount(row) {
+      this.$router.push({
+        name: 'AccountDiscoverList',
+        query: {
+          tab: 'AccountDiscoverTaskExecutionList',
+          automation_id: row.id
+        }
+      })
+    }
   }
 }
 </script>

src/views/accounts/AccountPush/AccountPushList.vue

@@ -64,18 +64,9 @@ export default {
             showOverflowTooltip: true
           },
           executed_amount: {
-            formatter: DetailFormatter,
-            formatterArgs: {
-              can: vm.$hasPerm('accounts.view_pushaccountexecution'),
-              getRoute({ row }) {
-                return {
-                  name: 'AccountPushList',
-                  query: {
-                    tab: 'AccountPushExecutionList',
-                    automation_id: row.id
-                  }
-                }
-              }
+            formatter: (row) => {
+              const can = vm.$hasPerm('accounts.view_pushaccountexecution')
+              return <el-link onClick={ () => this.handleExecAmount(row) } disabled={ !can }>{ row.executed_amount }</el-link>
             }
           },
           actions: {
@@ -113,9 +104,62 @@ export default {
         hasRefresh: true,
         hasExport: false,
         hasImport: false,
-        createRoute: 'AccountPushCreate'
+        createRoute: 'AccountPushCreate',
+        extraMoreActions: [
+          {
+            name: 'BatchDisable',
+            title: this.$t('DisableSelected'),
+            icon: 'fa fa-ban',
+            can: ({ selectedRows }) => selectedRows.length > 0 && this.$hasPerm('accounts.change_pushaccountautomation'),
+            callback: ({ selectedRows, reloadTable }) => this.bulkDisableCallback(selectedRows, reloadTable)
+          },
+          {
+            name: 'BatchActivate',
+            title: this.$t('ActivateSelected'),
+            icon: 'fa fa-check-circle-o',
+            can: ({ selectedRows }) => selectedRows.length > 0 && this.$hasPerm('accounts.change_pushaccountautomation'),
+            callback: ({ selectedRows, reloadTable }) => this.bulkActivateCallback(selectedRows, reloadTable)
+          }
+        ]
       }
     }
+  },
+  methods: {
+    handleExecAmount(row) {
+      this.$router.push({
+        name: 'AccountPushList',
+        query: {
+          tab: 'AccountPushExecutionList',
+          automation_id: row.id
+        }
+      })
+    },
+    bulkDisableCallback(selectedRows, reloadTable) {
+      const url = '/api/v1/accounts/push-account-automations/'
+      const data = selectedRows.map(row => {
+        return { id: row.id, is_active: false }
+      })
+      if (data.length === 0) return
+      this.$axios.patch(url, data).then(() => {
+        reloadTable()
+        this.$message.success(this.$t('DisableSuccessMsg'))
+      }).catch(error => {
+        this.$message.error(this.$t('UpdateErrorMsg') + ' ' + error)
+      })
+    },
+    bulkActivateCallback(selectedRows, reloadTable) {
+      const url = '/api/v1/accounts/push-account-automations/'
+      const data = selectedRows.map(row => {
+        return { id: row.id, is_active: true }
+      })
+      if (data.length === 0) return
+      this.$axios.patch(url, data).then(() => {
+        reloadTable()
+        this.$message.success(this.$t('DisableSuccessMsg'))
+      }).catch(error => {
+        this.$message.error(this.$t('UpdateErrorMsg') + ' ' + error)
+      })
+    }
   }
 }
 </script>

src/views/accounts/AccountTemplate/AccountTemplateCreateUpdate.vue

@@ -69,7 +69,35 @@ export default {
       updateSuccessNextRoute: { name: 'AccountTemplateList' }
     }
   },
+  async mounted() {
+    this.setSecretTypeOptions()
+  },
   methods: {
+    setSecretTypeOptions() {
+      const choices = [
+        {
+          label: this.$t('Password'),
+          value: 'password'
+        },
+        {
+          label: this.$t('SSHKey'),
+          value: 'ssh_key'
+        },
+        {
+          label: this.$t('Token'),
+          value: 'token'
+        },
+        {
+          label: this.$t('AccessKey'),
+          value: 'access_key'
+        },
+        {
+          label: this.$t('ApiKey'),
+          value: 'api_key'
+        }
+      ]
+      this.fieldsMeta.secret_type.options = choices
+    },
     getObjectDone(obj) {
       if (['token', 'access_key', 'api_key'].includes(obj.secret_type.value)) {
         this.fieldsMeta.auto_push.el.disabled = true

src/views/accounts/AccountTemplate/AccountTemplateTable.vue

@@ -5,6 +5,7 @@
       :detail-drawer="detailDrawer"
       :header-actions="headerActions"
       :table-config="tableConfig"
+      :resource="$t('AccountTemplate')"
     />
     <ViewSecret
       v-if="showViewSecretDialog"

src/views/accounts/AccountTemplate/Detail/Account.vue

@@ -140,7 +140,14 @@ export default {
         hasImport: false,
         hasCreate: false,
         searchConfig: {
-          getUrlQuery: false
+          getUrlQuery: true,
+          exclude: ['asset'],
+          options: [
+            {
+              label: this.$t('AssetName'),
+              value: 'asset_name'
+            }
+          ]
         },
         hasMoreActions: false
       }

src/views/accounts/Automation/BaseExecutionList.vue

@@ -87,8 +87,8 @@ export default {
             formatter: DetailFormatter,
             minWidth: '180px',
             formatterArgs: {
-              getTitle: ({ row }) => row.snapshot.name,
-              getDrawerTitle: ({ row }) => row.snapshot.name,
+              getTitle: ({ row }) => row.automation?.name || row.snapshot.name,
+              getDrawerTitle: ({ row }) => row.automation?.name || row.snapshot.name,
               getRoute: ({ row }) => ({
                 name: this.automationRoute,
                 params: { id: row.automation.id }
@@ -155,11 +155,6 @@ export default {
     }
   },
   mounted() {
-    const automation_id = this.$route.query.automation_id
-    if (automation_id !== undefined) {
-      this.tableConfig.url = `${this.tableConfig.url}?automation_id=${automation_id}`
-    }
-
     const defaultExtraActions = this.tableConfig.columnsMeta.actions.formatterArgs.extraActions
 
     if (this.customActions) {

src/views/accounts/Integration/ApplicationCreateUpdate.vue

@@ -61,14 +61,7 @@ export default {
             fileChange: ([value], updateForm) => {
               this.logo_file = value
             }
-          },
-          rules: [
-            {
-              required: true,
-              message: this.$t('FieldRequiredError'),
-              trigger: 'blur'
-            }
-          ]
+          }
         }
       },
       hasSaveContinue: false,
@@ -100,7 +93,6 @@ export default {
       }
     }
   },
-  methods: {
-  }
+  methods: {}
 }
 </script>

src/views/accounts/Integration/ApplicationList.vue

@@ -55,7 +55,7 @@ export default {
             formatter: DetailFormatter
           },
           secret: {
-            label: this.$t('Secret'),
+            label: 'Secret',
             formatter: CopyableFormatter,
             formatterArgs: {
               shadow: true,

src/views/accounts/PAM/AssetList.vue

@@ -20,7 +20,7 @@ export default {
         category: 'all'
       },
       tableConfig: {
-        columnsExclude: ['date_verified']
+        columnsExclude: ['date_verified', 'spec_info']
       },
       headerActions: {
         handleImportClick: ({ selectedRows }) => {

src/views/accounts/RiskDetect/AccountCheckTaskList.vue

@@ -1,5 +1,10 @@
 <template>
-  <GenericListTable ref="listTable" :header-actions="headerActions" :table-config="tableConfig" />
+  <GenericListTable
+    ref="listTable"
+    :header-actions="headerActions"
+    :table-config="tableConfig"
+    :resource="$t('DetectTasks')"
+  />
 </template>
 
 <script>

src/views/accounts/const.js

@@ -1,5 +1,6 @@
 import { toSafeLocalDateStr } from '@/utils/time'
 import { ActionsFormatter, DetailFormatter, DiscoverConfirmFormatter } from '@/components/Table/TableFormatters'
+
 export const statusMap = {
   pending: '0',
   confirmed: '1',
@@ -135,7 +136,7 @@ export const gatherAccountHeaderActions = (vm) => {
         type: 'primary',
         icon: 'fa fa-check',
         can: ({ selectedRows }) => {
-          return selectedRows.length > 0 && vm.$hasPerm('accounts.add_account')
+          return selectedRows.length > 0 && vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
         },
         callback: function({ selectedRows }) {
           const ids = selectedRows.map(v => {
@@ -157,7 +158,7 @@ export const gatherAccountHeaderActions = (vm) => {
         type: 'primary',
         icon: 'fa fa-exchange',
         can: ({ selectedRows }) => {
-          return selectedRows.length > 0 && vm.$hasPerm('accounts.remove_account')
+          return selectedRows.length > 0 && vm.$hasPerm('accounts.remove_account') && !vm.$store.getters.currentOrgIsRoot
         },
         callback: function({ selectedRows }) {
           vm.gatherAccounts = selectedRows

src/views/acls/AssetLoginACL/AssetLoginAclCreateUpdate.vue

@@ -55,7 +55,7 @@ export default {
           component: AccountFormatter,
           el: {
             showAddTemplate: false,
-            showVirtualAccount: false,
+            enableVirtualAccount: false,
             value: ['@ALL'],
             assets: []
           },

src/views/acls/CommandFilterACL/CommandFilterAcl/CommandFilterAclCreateUpdate.vue

@@ -44,7 +44,7 @@ export default {
           component: AccountFormatter,
           el: {
             showAddTemplate: false,
-            showVirtualAccount: false
+            enableVirtualAccount: false
           }
         },
         action: {},

src/views/acls/UserLoginACL/UserLoginACLCreateUpdate.vue

@@ -81,6 +81,13 @@ export default {
         return url
       },
       cleanFormValue(value) {
+        if (
+          Array.isArray(value.rules.time_period) &&
+          value.rules.time_period.every(item => item.value === '')
+        ) {
+          value.rules.time_period = []
+        }
+
         if (!Array.isArray(value.rules.ip_group)) {
           value.rules.ip_group = value.rules.ip_group ? value.rules.ip_group.split(',') : []
         }

src/views/assets/Asset/AssetCreateUpdate/BaseAssetCreateUpdate.vue

@@ -47,7 +47,9 @@ export default {
     return {
       loading: true,
       platform: {},
-      changePlatformID: '',
+      initing: false,
+      // 在 meta 中，可能改变 platform id
+      platformID: this.$route.query.platform || '',
       meta: {},
       iConfig: {},
       defaultConfig: {
@@ -62,12 +64,12 @@ export default {
           [this.$t('Basic'), ['name', 'address', 'platform', 'nodes']],
           [this.$t('Protocol'), ['protocols']],
           [this.$t('Account'), ['accounts']],
-          [this.$t('Other'), ['domain', 'labels', 'is_active', 'comment']]
+          [this.$t('Other'), ['directory_services', 'zone', 'labels', 'is_active', 'comment']]
         ],
         fieldsMeta: {},
         performSubmit(validValues) {
           let url = this.url
-          const { id = '' } = this.$route.query
+          const { id = '' } = this.$route.params
           const values = _.cloneDeep(validValues)
           const submitMethod = id ? 'put' : 'post'
 
@@ -95,21 +97,28 @@ export default {
   },
   methods: {
     async init() {
+      // 更改平台时，就不重新 loading 了
+      this.$log.debug('Initing asset base upcate create', this.initing)
+      if (this.initing) {
+        return
+      }
+      this.initing = true
       try {
         await this.genConfig()
         await this.setInitial()
         await this.setPlatformConstrains()
       } finally {
+        this.initing = false
         this.loading = false
       }
     },
     async genConfig() {
       const { addFields, addFieldsMeta, defaultConfig } = this
-      defaultConfig.fieldsMeta = assetFieldsMeta(this, this.$route.query.type)
+      defaultConfig.fieldsMeta = assetFieldsMeta(this)
       let url = this.url
-      const { id = '', platform } = this.$route.query
-      if (platform && !id) {
-        url = setUrlParam(url, 'platform', platform)
+      const id = this.$route.params.id
+      if (!id) {
+        url = setUrlParam(url, 'platform', this.platformID)
       }
       // 过滤类型为：null, undefined 的元素
       defaultConfig.fields = defaultConfig.fields.filter(Boolean)
@@ -134,9 +143,9 @@ export default {
     },
     async setInitial() {
       const { defaultConfig } = this
-      const { node, platform } = this.$route.query
+      const { node } = this.$route.query
       const nodesInitial = node ? [node] : []
-      const platformId = this.changePlatformID || this.$route.query.platform || (platform || 'Linux')
+      const platformId = this.platformID || 'Linux'
       const url = `/api/v1/assets/platforms/${platformId}/`
       this.platform = await this.$axios.get(url)
       const initial = {
@@ -165,13 +174,6 @@ export default {
       const protocolChoices = this.iConfig.fieldsMeta.protocols.el.choices
       protocolChoices.splice(0, protocolChoices.length, ...protocols)
       this.iConfig.fieldsMeta.accounts.el.platform = platform
-      const hiddenCheckFields = ['protocols', 'domain']
-
-      for (const field of hiddenCheckFields) {
-        if (platform[field + '_enabled'] === false) {
-          this.iConfig.fieldsMeta[field].hidden = () => true
-        }
-      }
     }
   }
 }