perf: ZTree Search Input support select node or asset

* perf: upgrade vue version

* perf: Update Dockerfile with new base image tag

---------

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

.eslintrc.js

@@ -294,7 +294,8 @@ module.exports = {
         ],
         skipIfMatch: [
           'http://[^s]*',
-          '^[-\\w]+/[-\\w\\.]+$' // For import paths
+          '^[-\\w]+/[-\\w\\.]+$',
+          String.raw`^\/api\/[a-z0-9\/._-]+$`,
         ],
         minLength: 3
       }

Dockerfile

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

package.json

@@ -39,10 +39,9 @@
     "css-color-function": "^1.3.3",
     "decimal.js": "^10.4.3",
     "deepmerge": "^4.2.2",
-    "dompurify": "^3.1.6",
+    "dompurify": "^3.2.4",
     "echarts": "4.7.0",
-    "element-ui": "^2.15.14",
-    "elementui-lts": "^2.16.0",
+    "element-ui": "https://github.com/jumpserver-dev/element/releases/download/v2.15.15/jumpserver-element-ui-2.15.15.tgz",
     "eslint-plugin-html": "^6.0.0",
     "highlight.js": "^11.9.0",
     "install": "^0.13.0",
@@ -52,17 +51,6 @@
     "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",
@@ -71,9 +59,11 @@
     "npm": "^7.8.0",
     "nprogress": "0.2.0",
     "path-to-regexp": "3.3.0",
+    "socket.io-client": "^4.8.1",
     "sortablejs": "^1.15.6",
+    "uuid": "8.3.2",
     "v-sanitize": "^0.0.13",
-    "vue": "2.6.10",
+    "vue": "2.7.16",
     "vue-codemirror": "4.0.6",
     "vue-cookie": "^1.1.4",
     "vue-echarts": "^5.0.0-beta.0",
@@ -131,11 +121,11 @@
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.2",
     "vue-i18n-extract": "^1.1.1",
-    "vue-template-compiler": "2.6.10",
+    "vue-template-compiler": "2.7.16",
     "webpack": "^4.28.4"
   },
   "engines": {
-    "node": ">=8.9",
+    "node": ">=12",
     "npm": ">= 3.0.0"
   },
   "browserslist": [
@@ -152,5 +142,6 @@
     "src/**/*.{js,vue}": [
       "eslint --fix"
     ]
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

src/api/sessions.js

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

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -15,10 +15,25 @@ export const accountFieldsMeta = (vm) => {
   }
 
   return {
+    nodes: {
+      component: Select2,
+      label: vm.$t('Node'),
+      el: {
+        value: [],
+        ajax: {
+          url: '/api/v1/assets/nodes/',
+          transformOption: (item) => {
+            return { label: item.full_value, value: item.id }
+          }
+        }
+      },
+      hidden: () => {
+        return !vm.addTemplate
+      }
+    },
     assets: {
       component: AssetSelect,
       label: vm.$t('Asset'),
-      rules: [Required],
       el: {
         multiple: false
       },
@@ -33,7 +48,7 @@ export const accountFieldsMeta = (vm) => {
         get disabled() {
           return vm.isDisabled
         },
-        multiple: false,
+        multiple: vm.addTemplate,
         ajax: {
           url: '/api/v1/accounts/account-templates/',
           transformOption: (item) => {

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

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

@@ -93,8 +93,8 @@ export default {
         iVisible = true
         data = formValue
         url = `/api/v1/accounts/accounts/bulk/`
-        if (data.assets.length === 0) {
-          this.$message.error(this.$tc('PleaseSelectAsset'))
+        if ((!data.assets || data.assets.length === 0) && (!data.nodes || data.nodes.length === 0)) {
+          this.$message.error(this.$tc('PleaseSelectAssetOrNode'))
           return
         }
       }
@@ -107,6 +107,10 @@ export default {
           this.$emit('add', true)
         }
       }).catch(error => {
+        if (error?.response?.data?.code === 'no_valid_assets') {
+          this.$message.error(error?.response?.data?.detail)
+          return
+        }
         this.iVisible = true
         this.handleResult(null, error)
       })

src/components/Apps/AccountListTable/BulkCreateResultDialog.vue

@@ -49,6 +49,10 @@ export default {
             prop: 'asset',
             label: this.$t('Asset')
           },
+          {
+            prop: 'account',
+            label: this.$t('Account')
+          },
           {
             prop: 'state',
             label: this.$t('Status'),

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

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

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

@@ -3,9 +3,13 @@
     <div class="chart-item-container">
       <div class="avatar">
         <el-avatar
-          :src="isUserRole ? userUrl : chatUrl"
+          v-if="isUserRole"
+          :src="userUrl"
           class="header-avatar"
         />
+        <el-avatar v-else class="header-avatar" :style="{ backgroundColor: 'transparent' }">
+          <ModelIcon :name="modelIconName" class-name="model-icon" />
+        </el-avatar>
       </div>
       <div class="content">
         <div class="operational">
@@ -76,6 +80,7 @@
 
 <script>
 import MessageText from './MessageText.vue'
+import ModelIcon from '../../models/ModelIcon.vue'
 import { mapGetters, mapState } from 'vuex'
 import { copy } from '@/utils/common/index'
 import { useChat } from '../../useChat.js'
@@ -85,7 +90,8 @@ const { setLoading, removeLoadingMessageInChat } = useChat()
 
 export default {
   components: {
-    MessageText
+    MessageText,
+    ModelIcon
   },
   props: {
     item: {
@@ -93,6 +99,10 @@ export default {
       default: () => {
       }
     },
+    selectedModel: {
+      type: String,
+      default: ''
+    },
     isTerminal: {
       type: Boolean,
       default: false
@@ -129,10 +139,8 @@ export default {
         ? this.$i18n.t('ServerBusyRetry')
         : ''
     },
-    chatUrl() {
-      return this.publicSettings.CHAT_AI_TYPE === 'gpt'
-        ? require('@/assets/img/chat.png')
-        : require('@/assets/img/deepSeek.png')
+    modelIconName() {
+      return (this.item?.message?.model || this.selectedModel || this.publicSettings.CHAT_AI_TYPE || '').toString()
     }
   },
   methods: {
@@ -171,11 +179,18 @@ export default {
         width: 100%;
         height: 100%;
         border-radius: 50%;
+        background-color: transparent;
 
         &::v-deep img {
           background-color: #fff;
         }
       }
+
+      .model-icon {
+        width: 100%;
+        height: 100%;
+        display: block;
+      }
     }
 
     .content {

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

@@ -40,7 +40,7 @@ export default {
     text() {
       const value = this.message?.content || ''
       if (value && this.markdown) {
-        return this.markdown?.render(value)
+        return this.renderContentWithDetails(value)
       }
       return this.$xss.process(value)
     }
@@ -120,6 +120,77 @@ export default {
         btn.addEventListener('click', callback)
       })
     },
+    renderContentWithDetails(value) {
+      // Kael responses may wrap reasoning/thinking in <details type="reasoning">; render them with a custom block.
+      const detailRegex = /<details[^>]*>[\s\S]*?<\/details>/gi
+      let result = ''
+      let lastIndex = 0
+      let match
+      let hasDetails = false
+
+      while ((match = detailRegex.exec(value))) {
+        hasDetails = true
+        const preceding = value.slice(lastIndex, match.index)
+        if (preceding.trim()) {
+          result += this.markdown.render(preceding)
+        }
+        result += this.renderDetailBlock(match[0])
+        lastIndex = match.index + match[0].length
+      }
+
+      if (!hasDetails) {
+        return this.markdown.render(value)
+      }
+
+      const remaining = value.slice(lastIndex)
+      if (remaining.trim()) {
+        result += this.markdown.render(remaining)
+      }
+
+      return result
+    },
+    renderDetailBlock(detailStr) {
+      const attributes = this.extractAttributes(detailStr)
+      const inner = detailStr.replace(/^<details[^>]*>/i, '').replace(/<\/details>$/i, '')
+      const summaryMatch = inner.match(/<summary>([\s\S]*?)<\/summary>/i)
+      const summary = summaryMatch ? this.decodeHtml(summaryMatch[1]) : ''
+      const body = summaryMatch ? inner.replace(summaryMatch[0], '') : inner
+      const bodyHtml = body.trim() ? this.markdown.render(this.decodeHtml(body.trim())) : ''
+
+      const baseClass = 'kael-detail'
+      if (attributes.type === 'reasoning') {
+        const statusClass = attributes.done === 'true' ? 'is-done' : 'is-pending'
+        const title = summary || this.$t('DeeplyThoughtAbout')
+        return `<div class="${baseClass} ${baseClass}--reasoning ${statusClass}">
+          <div class="${baseClass}__header">
+            <span class="${baseClass}__status-dot"></span>
+            <span class="${baseClass}__title">${title}</span>
+          </div>
+          ${bodyHtml ? `<div class="${baseClass}__body">${bodyHtml}</div>` : ''}
+        </div>`
+      }
+
+      return `<div class="${baseClass}">
+        ${summary ? `<div class="${baseClass}__header">${summary}</div>` : ''}
+        ${bodyHtml ? `<div class="${baseClass}__body">${bodyHtml}</div>` : ''}
+      </div>`
+    },
+    extractAttributes(detailStr) {
+      const attrs = {}
+      const attrMatch = detailStr.match(/^<details([^>]*)>/i)
+      const attrStr = (attrMatch && attrMatch[1]) || ''
+      attrStr.replace(/(\w+)="(.*?)"/g, (all, key, val) => {
+        attrs[key] = val
+        return all
+      })
+      return attrs
+    },
+    decodeHtml(str) {
+      if (!str) return ''
+      const textArea = document.createElement('textarea')
+      textArea.innerHTML = str
+      return textArea.value
+    },
     removeBtnClickEvent(selector) {
       const buttons = this.$refs.textRef.querySelectorAll(selector)
       buttons.forEach((btn) => {
@@ -258,4 +329,64 @@ export default {
 .loading-box span:nth-child(3) {
   animation-delay: 0.49s;
 }
+
+.kael-detail {
+  margin: 8px 0;
+  padding: 8px 10px;
+  border-radius: 8px;
+  border: 1px solid #e5e5e5;
+  background: #f7f8fa;
+
+  &__header {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    font-size: 12px;
+    color: #6b7280;
+  }
+
+  &__title {
+    font-weight: 600;
+  }
+
+  &__status-dot {
+    width: 7px;
+    height: 7px;
+    border-radius: 50%;
+    background: #10b981;
+  }
+
+  &__body {
+    margin-top: 6px;
+    padding-left: 8px;
+    border-left: 2px solid #e5e5e5;
+  }
+
+  &--reasoning.is-pending {
+    border-color: #f59e0b40;
+    background: #fff8e6;
+
+    .kael-detail__status-dot {
+      background: #f59e0b;
+      animation: kael-pulse 1.2s ease-in-out infinite;
+    }
+  }
+
+  &--reasoning.is-done {
+    border-color: #dbeafe;
+    background: #f4f6ff;
+  }
+}
+
+@keyframes kael-pulse {
+  0% {
+    opacity: 0.45;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0.45;
+  }
+}
 </style>

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

@@ -13,6 +13,8 @@
 </template>
 
 <script>
+import { BASE_URL } from '@/utils/common/index'
+
 export default {
   props: {
     active: {
@@ -41,6 +43,16 @@ export default {
     },
     handleExpand() {
       this.$emit('expand-full')
+    },
+    async openWebsite() {
+      let url = `${BASE_URL}/?_=${Date.now()}`
+      if (process.env.NODE_ENV !== 'production') {
+        url = url.replace('9528', '5173')
+      }
+
+      const newUrl = new URL(url)
+      window.open(newUrl.toString(), '_blank')
+      return url
     }
   }
 }

src/components/Apps/ChatAi/index.vue

@@ -46,7 +46,6 @@
 import Sidebar from './components/Sidebar/index.vue'
 import Chat from './components/ChitChat/index.vue'
 import { getInputFocus } from './useChat.js'
-import { ws } from '@/utils/request'
 import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
 import { ObjectLocalStorage } from '@/utils/common'
 import { mapGetters } from 'vuex'
@@ -82,7 +81,8 @@ export default {
       height: '400px',
       expanded: false,
       clientOffset: {},
-      currentTerminalContent: {}
+      currentTerminalContent: {},
+      initialized: false
     }
   },
   computed: {
@@ -123,11 +123,18 @@ export default {
         document.body.appendChild(script)
       }
     },
+    initAssistant() {
+      if (this.initialized) return
+      this.initialized = true
+      this.$nextTick(() => {
+        this.$refs.component?.init()
+      })
+    },
     handlePostMessage() {
       window.addEventListener('message', (event) => {
         if (event.data === 'show-chat-panel') {
           this.$refs.drawer.show = true
-          this.initWebSocket()
+          this.initAssistant()
           return
         }
         const msg = event.data
@@ -152,11 +159,6 @@ export default {
       }
       this.$refs.drawer.handleHeaderMoveUp(event)
     },
-    initWebSocket() {
-      if (!ws) {
-        this.$refs.component?.init()
-      }
-    },
     onClose() {
       this.$refs.drawer.show = false
     },
@@ -170,7 +172,6 @@ export default {
     },
     save_pannel_settings() {
       aiPannelLocalStorage.set('expanded', this.expanded)
-      console.log('AI panel settings saved:', this.expanded)
     },
     updateExpandedState(expanded) {
       this.expanded = expanded
@@ -184,8 +185,8 @@ export default {
       })
     },
     onToggle(status) {
-      this.initWebSocket()
       if (status) {
+        this.initAssistant()
         getInputFocus()
       }
     }

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

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

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

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

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

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

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

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

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

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

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

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

src/components/Apps/GrantedAssets/index.vue

@@ -11,6 +11,7 @@
 import AssetTreeTable from '@/components/Apps/AssetTreeTable'
 import { AccountInfoFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
+import { setUrlParam } from '@/utils/common/index'
 
 export default {
   name: 'GrantedAssets',
@@ -34,7 +35,7 @@ export default {
         }
         const initialUrl = vm.tableConfig.initialUrl
         const nodeId = node.meta.data.id
-        const url = initialUrl.replace('/assets/', `/nodes/${nodeId}/assets/`)
+        const url = setUrlParam(initialUrl, 'node_id', nodeId)
         vm.tableConfig.url = url
       }
     },
@@ -70,7 +71,7 @@ export default {
         showMenu: false,
         showRefresh: true,
         showAssets: false,
-        showSearch: false,
+        showSearch: true,
         url: this.tableUrl,
         // ?assets=0不显示资产. =1显示资产
         treeUrl: this.treeUrl,
@@ -78,6 +79,9 @@ export default {
         callback: {
           onSelected: (event, node) => vm.onSelected(node, vm),
           refresh: vm.refreshObjectAssetPermission
+        },
+        async: {
+          enable: false
         }
       },
       tableConfig: {
@@ -109,11 +113,6 @@ export default {
           },
           connectivity: connectivityMeta,
           comment: { ...this.comment }
-        },
-        tableAttrs: {
-          rowClassName({ row }) {
-            return !row.is_active ? 'row_disabled' : ''
-          }
         }
       },
       headerActions: {

src/components/Apps/LeakPasswords/LeakPasswordList.vue

@@ -37,8 +37,12 @@ export default {
 
       },
       headerActions: {
-        hasExport: false,
-        hasImport: false,
+        hasExport: true,
+        hasImport: true,
+        importOptions: {
+          encryptFields: [''], // 这里不加密 password，''只是为了保证数组有值
+          canImportUpdate: false
+        },
         hasCreate: true,
         hasSearch: true,
         hasRefresh: true,

src/components/Apps/ManyJsonTabs/AssetJsonTab.vue

@@ -25,6 +25,7 @@ export default {
   },
   data() {
     const [key, value] = toM2MJsonParams(this.object.assets)
+    const org_id = this.object.org_id || this.$store.getters.currentOrg.id
     return {
       config: {
         headerActions: {
@@ -33,7 +34,7 @@ export default {
           hasExport: false
         },
         tableConfig: {
-          url: `/api/v1/assets/assets/?${key}=${value}`,
+          url: `/api/v1/assets/assets/?${key}=${value}&oid=${org_id}`,
           columns: ['name', 'address', 'platform', 'type', 'is_active'],
           columnsShow: {
             min: ['name', 'address'],

src/components/Apps/ManyJsonTabs/UserJsonTab.vue

@@ -25,6 +25,7 @@ export default {
   },
   data() {
     const [key, value] = toM2MJsonParams(this.object.users)
+    const org_id = this.object.org_id || this.$store.getters.currentOrg.id
     return {
       config: {
         headerActions: {
@@ -33,7 +34,7 @@ export default {
           hasExport: false
         },
         tableConfig: {
-          url: `/api/v1/users/users/?${key}=${value}`,
+          url: `/api/v1/users/users/?${key}=${value}&oid=${org_id}`,
           columns: [
             'name', 'username', 'email', 'groups', 'system_roles',
             'org_roles', 'source', 'is_valid'

src/components/Apps/UserConfirmDialog/index.vue

@@ -13,17 +13,12 @@
     v-on="$listeners"
   >
     <div v-if="confirmTypeRequired === 'relogin'">
-      <el-row :gutter="24" style="margin: 0 auto;">
+      <el-row :gutter="24" style="margin: 0 auto">
         <el-col :md="24" :sm="24">
-          <el-alert
-            :title="$tc('ReLoginTitle')"
-            center
-            style="margin-bottom: 20px;"
-            type="error"
-          />
+          <el-alert :title="$tc('ReLoginTitle')" center style="margin-bottom: 20px" type="error" />
         </el-col>
       </el-row>
-      <el-row :gutter="24" style="margin: 0 auto;">
+      <el-row :gutter="24" style="margin: 0 auto">
         <el-col :md="24" :sm="24">
           <el-button class="confirm-btn" size="mini" type="primary" @click="logout">
             {{ this.$t('ReLogin') }}
@@ -32,11 +27,11 @@
       </el-row>
     </div>
     <div v-else>
-      <el-row :gutter="24" style="margin: 0 auto;">
+      <el-row :gutter="24" style="margin: 0 auto">
         <el-col :md="24" :sm="24" :span="24" class="add">
           <el-select
             v-model="subTypeSelected"
-            style="width: 100%; margin-bottom: 20px;"
+            style="width: 100%; margin-bottom: 20px"
             @change="handleSubTypeChange"
           >
             <el-option
@@ -49,19 +44,22 @@
           </el-select>
         </el-col>
       </el-row>
-      <el-row v-if="!noCodeMFA.includes(subTypeSelected)" :gutter="24" style="margin: 0 auto;">
-        <el-col :md="24" :sm="24" style="display: flex; align-items: center; ">
+      <el-row v-if="!noCodeMFA.includes(subTypeSelected)" :gutter="24" style="margin: 0 auto">
+        <el-col :md="24" :sm="24" style="display: flex; align-items: center">
           <el-input
             v-model="secretValue"
             :placeholder="inputPlaceholder"
             :show-password="showPassword"
             @keyup.enter.native="handleConfirm"
           />
-          <span v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'" style="margin: -1px 0 0 20px;">
+          <span
+            v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'"
+            style="margin: -1px 0 0 20px"
+          >
             <el-button
               :disabled="smsBtnDisabled"
               size="mini"
-              style="line-height: 14px; float: right;"
+              style="line-height: 14px; float: right"
               type="primary"
               @click="sendCode"
             >
@@ -72,21 +70,17 @@
       </el-row>
       <el-row>
         <el-col>
+          <iframe v-if="passkeyVisible" :src="passkeyUrl" style="display: none" />
           <iframe
-            v-if="passkeyVisible"
-            :src="passkeyUrl"
-            style="display: none"
-          />
-          <iframe
-            v-if="isFaceCaptureVisible && subTypeSelected ==='face' && faceCaptureUrl"
+            v-if="isFaceCaptureVisible && subTypeSelected === 'face' && faceCaptureUrl"
             :src="faceCaptureUrl"
             allow="camera"
             sandbox="allow-scripts allow-same-origin"
-            style="width: 100%; height: 600px;border: none;"
+            style="width: 100%; height: 600px; border: none"
           />
         </el-col>
       </el-row>
-      <el-row :gutter="24" style="margin: 20px auto 10px;">
+      <el-row :gutter="24" style="margin: 20px auto 10px">
         <el-col :md="24" :sm="24">
           <el-button
             v-if="!noCodeMFA.includes(subTypeSelected)"
@@ -195,55 +189,65 @@ export default {
       this.$log.debug('perform confirm action')
       const confirmType = response.data?.code
       const confirmUrl = '/api/v1/authentication/confirm/'
-      this.$axios.get(confirmUrl, { params: { confirm_type: confirmType } }).then((data) => {
-        this.confirmTypeRequired = data.confirm_type
+      this.$axios
+        .get(confirmUrl, { params: { confirm_type: confirmType } })
+        .then(data => {
+          this.confirmTypeRequired = data.confirm_type
 
-        if (this.confirmTypeRequired === 'relogin') {
-          this.$axios.post(confirmUrl, { 'confirm_type': 'relogin', 'secret_key': 'x' }).then(() => {
-            this.callback()
-            this.visible = false
-          }).catch(() => {
-            this.title = this.$t('NeedReLogin')
-            this.visible = true
-          })
-          return
-        }
-        this.subTypeChoices = data.content
-        const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
-        this.subTypeSelected = defaultSubType.name
-        this.inputPlaceholder = defaultSubType.placeholder
-        this.visible = true
-      }).catch((err) => {
-        const data = err.response?.data
-        const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed')
-        this.$message.error(msg)
-        this.cancel(err)
-      }).finally(() => {
-        this.processing = false
-      })
+          if (this.confirmTypeRequired === 'relogin') {
+            this.$axios
+              .post(confirmUrl, { confirm_type: 'relogin', secret_key: 'x' })
+              .then(() => {
+                this.callback()
+                this.visible = false
+              })
+              .catch(() => {
+                this.title = this.$t('NeedReLogin')
+                this.visible = true
+              })
+            return
+          }
+          this.subTypeChoices = data.content
+          const defaultSubType = this.subTypeChoices.filter(item => !item.disabled)[0]
+          this.subTypeSelected = defaultSubType.name
+          this.inputPlaceholder = defaultSubType.placeholder
+          this.visible = true
+        })
+        .catch(err => {
+          const data = err.response?.data
+          const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed')
+          this.$message.error(msg)
+          this.cancel(err)
+        })
+        .finally(() => {
+          this.processing = false
+        })
     }, 500),
     logout() {
       window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
     },
     sendCode() {
-      this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected }).then(res => {
-        this.$message.success(this.$tc('VerificationCodeSent'))
-        let time = 60
-        this.smsBtnDisabled = true
+      this.$axios
+        .post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected })
+        .then(res => {
+          this.$message.success(this.$tc('VerificationCodeSent'))
+          let time = 60
+          this.smsBtnDisabled = true
 
-        const interval = setInterval(() => {
-          time -= 1
-          this.smsBtnText = `${this.$t('Pending')}: ${time}`
+          const interval = setInterval(() => {
+            time -= 1
+            this.smsBtnText = `${this.$t('Pending')}: ${time}`
 
-          if (time <= 0) {
-            clearInterval(interval)
-            this.smsBtnText = this.$t('SendVerificationCode')
-            this.smsBtnDisabled = false
-          }
-        }, 1000)
-      }).catch(() => {
-        this.$message.error(this.$tc('FailedToSendVerificationCode'))
-      })
+            if (time <= 0) {
+              clearInterval(interval)
+              this.smsBtnText = this.$t('SendVerificationCode')
+              this.smsBtnDisabled = false
+            }
+          }, 1000)
+        })
+        .catch(() => {
+          this.$message.error(this.$tc('FailedToSendVerificationCode'))
+        })
     },
     handlePasskeyVerify() {
       this.passkeyVisible = true
@@ -267,23 +271,26 @@ export default {
     },
     startFaceCapture() {
       const url = '/api/v1/authentication/face/context/'
-      this.$axios.post(url).then(data => {
-        const token = data['token']
-        this.faceCaptureUrl = '/facelive/capture?token=' + token
-        this.isFaceCaptureVisible = true
+      this.$axios
+        .post(url)
+        .then(data => {
+          const token = data['token']
+          this.faceCaptureUrl = '/facelive/capture?token=' + token
+          this.isFaceCaptureVisible = true
 
-        const timer = setInterval(() => {
-          this.$axios.get(url + `?token=${token}`).then(data => {
-            if (data['is_finished']) {
-              clearInterval(timer)
-              this.isFaceCaptureVisible = false
-              this.handleConfirm()
-            }
-          })
-        }, 1000)
-      }).catch(() => {
-        this.$message.error(this.$tc('FailedToStartFaceCapture'))
-      })
+          const timer = setInterval(() => {
+            this.$axios.get(url + `?token=${token}`).then(data => {
+              if (data['is_finished']) {
+                clearInterval(timer)
+                this.isFaceCaptureVisible = false
+                this.handleConfirm()
+              }
+            })
+          }, 1000)
+        })
+        .catch(() => {
+          this.$message.error(this.$tc('FailedToStartFaceCapture'))
+        })
     },
     handleFaceCapture() {
       this.startFaceCapture()
@@ -306,16 +313,22 @@ export default {
       const data = {
         confirm_type: this.confirmTypeRequired,
         mfa_type: this.confirmTypeRequired === 'mfa' ? this.subTypeSelected : '',
-        secret_key: this.confirmTypeRequired === 'password' ? encryptPassword(this.secretValue) : this.secretValue
+        secret_key:
+          this.confirmTypeRequired === 'password'
+            ? encryptPassword(this.secretValue)
+            : this.secretValue
       }
 
-      this.$axios.post(`/api/v1/authentication/confirm/`, data).then(() => {
-        this.onSuccess()
-      }).catch((err) => {
-        this.$message.error(err.message || this.$tc('ConfirmFailed'))
-        this.faceCaptureUrl = null
-        this.isFaceCaptureVisible = false
-      })
+      this.$axios
+        .post(`/api/v1/authentication/confirm/`, data)
+        .then(() => {
+          this.onSuccess()
+        })
+        .catch(err => {
+          this.$message.error(err.message || this.$tc('ConfirmFailed'))
+          this.faceCaptureUrl = null
+          this.isFaceCaptureVisible = false
+        })
     }
   }
 }

src/components/Apps/VariablesHelpTextDialog/index.vue

@@ -73,28 +73,28 @@ export default {
 }
 </script>
 
-<style>
-.help-dialog.dialog .el-dialog__footer {
+<style lang="scss" scoped>
+::v-deep .help-dialog.dialog .el-dialog__footer {
   border-top: none;
   padding: 8px;
 }
-</style>
 
-<style lang="scss" scoped>
 .help-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #dee2e6;
+}
 
-  &::v-deep th, td {
-    height: 40px;
-    padding: 0 8px;
-    text-align: left;
-  }
+::v-deep .help-table th,
+::v-deep .help-table td {
+  height: 40px;
+  padding: 0 8px;
+  text-align: left;
+}
 
-  &::v-deep .item-td, .item-label {
-    cursor: pointer;
-    color: var(--color-primary);
-  }
+::v-deep .help-table .item-td,
+::v-deep .help-table .item-label {
+  cursor: pointer;
+  color: var(--color-primary);
 }
 </style>

src/components/Cards/DetailCard/index.vue

@@ -5,7 +5,7 @@
         <div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
           <span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
           <span class="item-value el-form-item__content">
-            <template
+            <component
               :is="item.component"
               v-if="item.component"
               v-bind="{...item}"

src/components/Form/AutoDataForm/index.vue

@@ -29,6 +29,7 @@
 import DataForm from '../DataForm/index.vue'
 import FormGroupHeader from '@/components/Form/FormGroupHeader/index.vue'
 import { FormFieldGenerator } from '@/components/Form/AutoDataForm/utils'
+import { UniqueCheck } from '@/components/Form/DataForm/rules'
 
 export default {
   name: 'AutoDataForm',
@@ -114,6 +115,47 @@ export default {
       this.totalFields = generator.generateFields(this.fields, this.fieldsMeta, this.remoteMeta)
       this.groups = generator.groups
       this.$log.debug('Total fields: ', this.totalFields)
+      this.applyUniqueRules()
+    },
+    applyUniqueRules() {
+      const fields = this.totalFields || []
+      const currentIdGetter = () => {
+        return this.$route?.params?.id || this.form?.id || this.iForm?.id
+      }
+
+      // 移除 url 后拼接的参数
+      const defaultListUrl = (() => {
+        try {
+          const u = new URL(this.url, location.origin)
+          u.pathname = u.pathname.replace(/\/(\d+|[0-9a-fA-F-]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})\/?$/, '/')
+          return u.origin ? u.origin + u.pathname : u.pathname
+        } catch (e) {
+          return (this.url || '').replace(/\/(\d+|[0-9a-fA-F-]{8}(?:-[0-9a-fA-F]{4}){3}-[0-9a-fA-F]{12})\/?($|\?)/, '/$2')
+        }
+      })()
+
+      fields.forEach(field => {
+        const conf = field?.uniqueCheck
+
+        if (!conf) return
+
+        const confObj = (typeof conf === 'object') ? conf : {}
+        const param = confObj.param || field.prop || field.id
+        const url = confObj.url || defaultListUrl
+        const label = confObj.label || field.label || param
+        const entityName = confObj.entityName || ''
+
+        if (!Array.isArray(field.rules)) field.rules = []
+
+        field.rules.push(UniqueCheck({
+          url,
+          param,
+          label,
+          entityName,
+          getIgnoreId: currentIdGetter,
+          fieldName: field.prop || field.id
+        }))
+      })
     },
     _cleanFormValue(form, remoteMeta) {
       if (!form) {
@@ -181,8 +223,21 @@ export default {
       const mapped = {}
       Object.entries(errors || {}).forEach(([k, v]) => {
         let msg = v
-        if (Array.isArray(v)) msg = v.join('; ')
-        else if (typeof v === 'object' && v !== null) msg = JSON.stringify(v)
+        console.log(k, v)
+        // v是数组并且数组都是字符串，则拼接为字符串
+        if (Array.isArray(v) && v.every(item => typeof item === 'string')) msg = v.join('; ')
+        // 处理 [{"port":["请确保该值小于或者等于 65535。"]},{},{}] 这种情况
+        else if (Array.isArray(v) && v.every(item => _.isPlainObject(item))) {
+          const subMsg = []
+          v.forEach((subItem) => {
+            Object.values(subItem).forEach((subMsgArr) => {
+              if (Array.isArray(subMsgArr)) {
+                subMsg.push(...subMsgArr)
+              }
+            })
+          })
+          msg = subMsg.join(' ')
+        } else if (typeof v === 'object' && v !== null) msg = JSON.stringify(v)
         mapped[k] = String(msg || '')
       })
       this.serverErrors = mapped

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

@@ -20,7 +20,8 @@
           placement="right"
           popper-class="help-tips"
         >
-          <div slot="content" v-sanitize="data.helpTip" class="help-tip-content" /> <!-- Noncompliant -->
+          <div slot="content" v-sanitize="data.helpTip" class="help-tip-content" />
+          <!-- Noncompliant -->
           <i class="fa fa-question-circle-o help-tip-icon" />
         </el-tooltip>
       </span>
@@ -28,11 +29,7 @@
     <template v-if="readonly && hasReadonlyContent">
       <div
         v-if="data.type === 'input'"
-        :style="
-          componentProps.type === 'textarea'
-            ? {padding: '10px 0', lineHeight: 1.5}
-            : ''
-        "
+        :style="componentProps.type === 'textarea' ? { padding: '10px 0', lineHeight: 1.5 } : ''"
       >
         {{ itemValue }}
       </div>
@@ -51,11 +48,7 @@
       v-on="listeners"
     >
       <template v-for="opt in options">
-        <el-option
-          v-if="data.type === 'select'"
-          :key="opt.label"
-          v-bind="opt"
-        />
+        <el-option v-if="data.type === 'select'" :key="opt.label" v-bind="opt" />
         <el-checkbox-button
           v-else-if="data.type === 'checkbox-group' && data.style === 'button'"
           :key="opt.value"
@@ -112,10 +105,10 @@
 <script>
 import getEnableWhenStatus from '../util/enable-when'
 import { noop } from '../util/utils'
-import _get from 'lodash.get'
-import _includes from 'lodash.includes'
-import _topairs from 'lodash.topairs'
-import _frompairs from 'lodash.frompairs'
+import _get from 'lodash/get'
+import _includes from 'lodash/includes'
+import _topairs from 'lodash/toPairs'
+import _frompairs from 'lodash/fromPairs'
 
 function validator(data) {
   if (!data) {
@@ -175,7 +168,8 @@ export default {
   data() {
     return {
       propsInner: {},
-      isBlurTrigger: this.data.rules &&
+      isBlurTrigger:
+        this.data.rules &&
         this.data.rules.some(rule => {
           return rule.required && rule.trigger === 'blur'
         })
@@ -214,10 +208,7 @@ export default {
       } = this
       return {
         ..._frompairs(
-          _topairs(on).map(([eName, handler]) => [
-            eName,
-            (...args) => handler(args, updateForm)
-          ]),
+          _topairs(on).map(([eName, handler]) => [eName, (...args) => handler(args, updateForm)])
         ),
         // 手动更新表单数据
         input: (value, ...rest) => {
@@ -242,9 +233,7 @@ export default {
 
     multipleValue: ({ data, itemValue, options = [] }) => {
       const multipleSelectValue =
-        _get(data, 'el.multiple') && Array.isArray(itemValue)
-          ? itemValue
-          : [itemValue]
+        _get(data, 'el.multiple') && Array.isArray(itemValue) ? itemValue : [itemValue]
       return multipleSelectValue
         .map(val => (options.find(op => op.value === val) || {}).label)
         .join()
@@ -264,8 +253,7 @@ export default {
           if (v.url === oldV.url || v.request === oldV.request) return
         }
         const isOptionsCase =
-          ['select', 'checkbox-group', 'radio-group'].indexOf(this.data.type) >
-          -1
+          ['select', 'checkbox-group', 'radio-group'].indexOf(this.data.type) > -1
         const {
           url,
           request = () => this.$axios.get(url).then(resp => resp.data),
@@ -333,7 +321,7 @@ export default {
   }
 }
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .help-tips {
   opacity: 0.8;
   line-height: 2;
@@ -342,7 +330,7 @@ export default {
 
 .help-block {
   ::v-deep .el-alert__icon {
-    font-size: 16px
+    font-size: 16px;
   }
 
   &.checkbox {

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

@@ -1,5 +1,11 @@
 <template>
-  <el-form ref="elForm" :model="value" class="el-form-renderer" v-bind="$attrs" @submit.native.prevent>
+  <el-form
+    ref="elForm"
+    :model="value"
+    class="el-form-renderer"
+    v-bind="$attrs"
+    @submit.native.prevent
+  >
     <template v-for="item in innerContent">
       <slot v-if="!isHidden(item)" :name="`id:${item.id}`" />
       <component
@@ -20,13 +26,19 @@
   </el-form>
 </template>
 <script>
-import _set from 'lodash.set'
-import _isequal from 'lodash.isequal'
-import _clonedeep from 'lodash.clonedeep'
+import _set from 'lodash/set'
+import _isequal from 'lodash/isEqual'
+import _clonedeep from 'lodash/cloneDeep'
 import RenderFormGroup from './components/render-form-group.vue'
 import RenderFormItem from './components/render-form-item.vue'
 import transformContent from './util/transform-content'
-import { collect, correctValue, mergeValue, transformInputValue, transformOutputValue } from './util/utils'
+import {
+  collect,
+  correctValue,
+  mergeValue,
+  transformInputValue,
+  transformOutputValue
+} from './util/utils'
 
 const GROUP = 'group'
 

src/components/Form/DataForm/components/el-form-renderer/util/enable-when.js

@@ -1,5 +1,5 @@
-import _get from 'lodash.get'
-import _has from 'lodash.has'
+import _get from 'lodash/get'
+import _has from 'lodash/has'
 
 /**
  * 处理 enableWhen
@@ -20,7 +20,5 @@ export default function getEnableWhenStatus(enableWhen, value) {
     })
   }
 
-  return Array.isArray(enableWhen)
-    ? enableWhen.some(handleCondition)
-    : handleCondition(enableWhen)
+  return Array.isArray(enableWhen) ? enableWhen.some(handleCondition) : handleCondition(enableWhen)
 }

src/components/Form/DataForm/components/el-form-renderer/util/transform-content.js

@@ -1,5 +1,5 @@
 /* eslint-disable no-sequences */
-import _kebabcase from 'lodash.kebabcase'
+import _ from 'lodash'
 /**
  * content 的每一项会浅拷贝一层
  * 只可以在 item 层新增修改属性，如 item.a = b
@@ -13,7 +13,7 @@ export default function transformContent(content) {
       removeDollarInKey(item)
       extractRulesFromComponent(item)
       // 有些旧写法是 checkboxGroup & radioGroup
-      item.type = _kebabcase(item.type)
+      item.type = _.kebabCase(item.type)
     }
 
     return item
@@ -34,8 +34,5 @@ export function extractRulesFromComponent(item) {
   if (!component || typeof component === 'string') return
 
   const { rules = [] } = component
-  item.rules = [
-    ...(item.rules || []),
-    ...(typeof rules === 'function' ? rules(item) : rules)
-  ]
+  item.rules = [...(item.rules || []), ...(typeof rules === 'function' ? rules(item) : rules)]
 }

src/components/Form/DataForm/components/el-form-renderer/util/utils.js

@@ -1,5 +1,5 @@
-import _frompairs from 'lodash.frompairs'
-import _isplainobject from 'lodash.isplainobject'
+import _frompairs from 'lodash/fromPairs'
+import _isplainobject from 'lodash/isPlainObject'
 
 export function noop() {}
 
@@ -12,11 +12,9 @@ export function collect(content, key) {
         value: item.type === 'group' ? collect(item.items, key) : item[key]
       }))
       .filter(
-        ({ type, value }) =>
-          value !== undefined ||
-          (type === 'group' && Object.keys(value).length),
+        ({ type, value }) => value !== undefined || (type === 'group' && Object.keys(value).length)
       )
-      .map(({ id, value }) => [id, value]),
+      .map(({ id, value }) => [id, value])
   )
 }
 

src/components/Form/DataForm/index.vue

@@ -149,7 +149,7 @@ export default {
     },
     labelWidth: {
       type: String,
-      default: '25%'
+      default: '18.2%'
     }
   },
   data() {
@@ -244,6 +244,10 @@ export default {
   margin-right: 80px;
   margin-bottom: 20px;
 
+  .el-form {
+    margin-right: 0;
+  }
+
   ::v-deep .el-input-group__prepend {
     border-radius: 0;
   }

src/components/Form/DataForm/rules/index.js

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

src/components/Form/FormFields/CodeEditor.vue

@@ -14,6 +14,7 @@
               <el-button
                 :type="item.el && item.el.type"
                 class="start-stop-btn"
+                :disabled="item.disabled"
                 size="mini"
                 @click="item.callback()"
               >

src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue

@@ -28,27 +28,18 @@
           <template v-if="hasSelect">
             <el-data-table-column
               key="selection-key"
-              v-bind="{align: columnsAlign, ...columns[0]}"
+              v-bind="{ align: columnsAlign, ...columns[0] }"
             />
 
-            <el-data-table-column
-              key="tree-ctrl"
-              v-bind="{align: columnsAlign, ...columns[1]}"
-            >
+            <el-data-table-column key="tree-ctrl" v-bind="{ align: columnsAlign, ...columns[1] }">
               <template slot-scope="scope">
-                <span
-                  v-for="space in scope.row._level"
-                  :key="space"
-                  class="ms-tree-space"
-                />
+                <span v-for="space in scope.row._level" :key="space" class="ms-tree-space" />
                 <span
                   v-if="iconShow(scope.$index, scope.row)"
                   class="tree-ctrl"
                   @click="toggleExpanded(scope.$index)"
                 >
-                  <i
-                    :class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`"
-                  />
+                  <i :class="`el-icon-${scope.row._expanded ? 'minus' : 'plus'}`" />
                 </span>
                 {{ scope.row[columns[1].prop] }}
               </template>
@@ -57,23 +48,16 @@
             <el-data-table-column
               v-for="col in columns.filter((c, i) => i !== 0 && i !== 1)"
               :key="col.prop"
-              v-bind="{align: columnsAlign, ...col}"
+              v-bind="{ align: columnsAlign, ...col }"
             />
           </template>
 
           <!--无选择-->
           <template v-else>
             <!--展开这列, 丢失 el-data-table-column属性-->
-            <el-data-table-column
-              key="tree-ctrl"
-              v-bind="{align: columnsAlign, ...columns[0]}"
-            >
+            <el-data-table-column key="tree-ctrl" v-bind="{ align: columnsAlign, ...columns[0] }">
               <template slot-scope="scope">
-                <span
-                  v-for="space in scope.row._level"
-                  :key="space"
-                  class="ms-tree-space"
-                />
+                <span v-for="space in scope.row._level" :key="space" class="ms-tree-space" />
 
                 <span
                   v-if="iconShow(scope.$index, scope.row)"
@@ -89,14 +73,19 @@
             <el-data-table-column
               v-for="col in columns.filter((c, i) => i !== 0)"
               :key="col.prop"
-              v-bind="{align: columnsAlign, ...col}"
+              v-bind="{ align: columnsAlign, ...col }"
             />
           </template>
         </template>
 
         <!--非树-->
         <template v-else>
-          <el-data-table-column v-if="hasSelection" :align="selectionAlign" :selectable="canSelect" type="selection" />
+          <el-data-table-column
+            v-if="hasSelection"
+            :align="selectionAlign"
+            :selectable="canSelect"
+            type="selection"
+          />
           <el-data-table-column
             v-for="col in columns"
             :key="col.prop"
@@ -105,14 +94,14 @@
             :filters="col.filters || null"
             :formatter="typeof col.formatter === 'function' ? col.formatter : null"
             :title="col.label"
-            v-bind="{align: columnsAlign, ...col}"
+            v-bind="{ align: columnsAlign, ...col }"
           >
             <template #header>
               <span :title="col.label">{{ col.label }}</span>
             </template>
             <template
               v-if="col.formatter && typeof col.formatter !== 'function'"
-              v-slot:default="{row, column, $index}"
+              v-slot:default="{ row, column, $index }"
             >
               <div
                 :is="col.formatter"
@@ -166,9 +155,9 @@
 </template>
 
 <script>
-import _get from 'lodash.get'
-import _values from 'lodash.values'
-import _isEmpty from 'lodash.isempty'
+import _get from 'lodash/get'
+import _values from 'lodash/values'
+import _isEmpty from 'lodash/isEmpty'
 import SelfLoadingButton from './components/self-loading-button.vue'
 import TheDialog, { dialogModes } from './components/the-dialog.vue'
 import ElDataTableColumn from './components/el-data-table-column'
@@ -280,8 +269,7 @@ export default {
      */
     beforeSearch: {
       type: Function,
-      default() {
-      }
+      default() {}
     },
     /**
      * 单选, 适用场景: 不可以批量删除
@@ -446,8 +434,7 @@ export default {
      */
     onEdit: {
       type: Function,
-      default(row) {
-      }
+      default(row) {}
     },
     /**
      * 点击删除按钮时的方法, 当默认删除方法不满足需求时使用, 需要返回promise
@@ -456,9 +443,7 @@ export default {
     onDelete: {
       type: Function,
       default(data) {
-        const ids = Array.isArray(data)
-          ? data.map(v => v[this.id]).join(',')
-          : data[this.id]
+        const ids = Array.isArray(data) ? data.map(v => v[this.id]).join(',') : data[this.id]
         return this.$axios.delete(this.url + '/' + ids + '/', this.axiosConfig)
       }
     },
@@ -712,8 +697,8 @@ export default {
       }
     },
     /*
-    * 设置默认对齐方式
-    */
+     * 设置默认对齐方式
+     */
     defaultAlign: {
       type: String,
       default: 'center'
@@ -728,8 +713,7 @@ export default {
     },
     extraPaginationAttrs: {
       type: Object,
-      default: () => {
-      }
+      default: () => {}
     },
     hasSelection: {
       type: Boolean,
@@ -912,9 +896,7 @@ export default {
       }
       Object.assign(query, this._extraQuery)
       Object.assign(query, this.innerQuery)
-      query[this.pageSizeKey] = this.hasPagination
-        ? this.size
-        : this.noPaginationSize
+      query[this.pageSizeKey] = this.hasPagination ? this.size : this.noPaginationSize
 
       // 根据偏移值计算接口正确的页数
       const pageOffset = this.firstPage - defaultFirstPage
@@ -996,9 +978,7 @@ export default {
         formValue = this.$refs.searchForm.getFormValue()
         Object.assign(query, formValue)
       }
-      const queryStr =
-        (url.indexOf('?') > -1 ? '&' : '?') +
-        queryUtil.stringify(query, '=', '&')
+      const queryStr = (url.indexOf('?') > -1 ? '&' : '?') + queryUtil.stringify(query, '=', '&')
 
       // 请求开始
       this.tableLoading = loading
@@ -1018,10 +998,7 @@ export default {
 
           // 不分页
           if (!this.hasPagination) {
-            data =
-              _get(resp, this.dataPath) ||
-              _get(resp, noPaginationDataPath) ||
-              []
+            data = _get(resp, this.dataPath) || _get(resp, noPaginationDataPath) || []
             this.total = data.length
           } else {
             data = _get(resp, this.dataPath) || []
@@ -1240,11 +1217,7 @@ export default {
       }
       const remain = this.data.length - deleteCount
       const lastPage = Math.ceil(this.total / this.size)
-      if (
-        remain === 0 &&
-        this.page === lastPage &&
-        this.page > defaultFirstPage
-      ) {
+      if (remain === 0 && this.page === lastPage && this.page > defaultFirstPage) {
         this.page--
       }
     },
@@ -1272,20 +1245,14 @@ export default {
         tmp.push(record)
 
         if (record[this.treeChildKey] && record[this.treeChildKey].length > 0) {
-          const children = this.tree2Array(
-            record[this.treeChildKey],
-            expandAll,
-            record,
-            _level
-          )
+          const children = this.tree2Array(record[this.treeChildKey], expandAll, record, _level)
           tmp = tmp.concat(children)
         }
       })
       return tmp
     },
     rowClassName(...args) {
-      let rcn =
-        this.tableAttrs.rowClassName || this.tableAttrs['row-class-name'] || ''
+      let rcn = this.tableAttrs.rowClassName || this.tableAttrs['row-class-name'] || ''
       if (typeof rcn === 'function') rcn = rcn(...args)
       if (this.isTree) rcn += ' ' + this.showRow(...args)
       return rcn

src/components/Table/DrawerListTable/index.vue

@@ -107,8 +107,8 @@ export default {
         const formatterArgs = value?.formatterArgs
         // console.log('>>> name: ', key)
         // console.log('>>> formatter: ', formatter)
-        const detailFormaters = ['AmountFormatter', 'DetailFormatter']
-        if (formatter && detailFormaters.includes(formatter.name) && formatterArgs.drawer !== false) {
+        const detailFormatters = ['AmountFormatter', 'DetailFormatter']
+        if (formatter && detailFormatters.includes(formatter.name) && formatterArgs.drawer !== false) {
           formatterArgs.onClick = this.onDetail
         }
       }
@@ -223,7 +223,6 @@ export default {
       }
 
       title = actionLabel + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
-
       return title
     },
     getDefaultDrawer(action) {
@@ -295,7 +294,6 @@ export default {
         // 3. 设置组件
         this.drawerComponent = this.getDrawerComponent(action, payload)
         this.$log.debug('>>> drawerComponent: ', this.drawerComponent)
-        this.drawerTitle = this.getActionDrawerTitle({ action, row, col, cellValue, payload })
 
         // 4. 如果没有组件，尝试获取默认组件
         if (!this.drawerComponent) {
@@ -312,6 +310,7 @@ export default {
           const actionMeta = await this.$store.getters['common/drawerActionMeta']
           this.title = this.getDrawerTitle({ action, ...actionMeta })
         }
+        this.drawerTitle = this.getActionDrawerTitle({ action, row, col, cellValue, payload })
 
         // 7. 等待下一个 tick，确保组件已设置
         await this.$nextTick()

src/components/Table/ListTable/TableAction/ImportDialog.vue

@@ -58,6 +58,7 @@
         :import-option="importOption"
         :json-data="jsonData"
         :url="url"
+        v-bind="$attrs"
         @cancel="cancelUpload"
         @finish="closeDialog"
       />
@@ -247,46 +248,46 @@ export default {
 </script>
 
 <style lang='scss' scoped>
-  @import "~@/styles/variables";
+@import "~@/styles/variables";
 
-  .error-msg {
-    color: $--color-danger;
+.error-msg {
+  color: $--color-danger;
+}
+
+.error-msg.error-results {
+  background-color: #f3f3f4;
+  max-height: 200px;
+  overflow: auto
+}
+
+.file-uploader ::v-deep .el-upload {
+  width: 100%;
+  //padding-right: 150px;
+}
+
+.file-uploader ::v-deep .el-upload-dragger {
+  width: 100%;
+}
+
+.importTableZone {
+  padding: 0 20px;
+
+  .importTable {
+    overflow: auto;
   }
 
-  .error-msg.error-results {
-    background-color: #f3f3f4;
-    max-height: 200px;
-    overflow: auto
+  .tableFilter {
+    padding-bottom: 10px;
   }
+}
 
-  .file-uploader ::v-deep .el-upload {
-    width: 100%;
-    //padding-right: 150px;
-  }
+.importTable ::v-deep .el-dialog__body {
+  padding-bottom: 20px;
+}
 
-  .file-uploader ::v-deep .el-upload-dragger {
-    width: 100%;
-  }
-
-  .importTableZone {
-    padding: 0 20px;
-
-    .importTable {
-      overflow: auto;
-    }
-
-    .tableFilter {
-      padding-bottom: 10px;
-    }
-  }
-
-  .importTable ::v-deep .el-dialog__body {
-    padding-bottom: 20px;
-  }
-
-  .export-item {
-    margin-left: 80px;
-  }
+.export-item {
+  margin-left: 80px;
+}
 
 .export-item:first-child {
   margin-left: 0;

src/components/Table/ListTable/TableAction/ImportTable.vue

@@ -97,6 +97,10 @@ export default {
     origin: {
       type: String,
       default: ''
+    },
+    encryptFields: {
+      type: Array,
+      default: () => []
     }
   },
   data() {
@@ -273,11 +277,15 @@ export default {
       }
       return columns
     },
+    getEncryptFields() {
+      const fromProp = Array.isArray(this.encryptFields) && this.encryptFields.length ? this.encryptFields : null
+      return fromProp || ['password', 'secret', 'private_key']
+    },
     generateTableData(tableTitles, tableData) {
       const totalData = []
       tableData.forEach(item => {
         this.$set(item, '@status', 'pending')
-        const encryptFields = ['password', 'secret', 'private_key']
+        const encryptFields = this.getEncryptFields()
         for (const field of encryptFields) {
           if (item[field]) {
             item[field] = encryptPassword(item[field])

src/components/Table/ListTable/TableAction/index.vue

@@ -86,13 +86,11 @@ export default {
     },
     datePick: {
       type: Function,
-      default: (val) => {
-      }
+      default: val => {}
     },
     searchTable: {
       type: Function,
-      default: (val) => {
-      }
+      default: val => {}
     },
     selectedRows: {
       type: Array,
@@ -153,7 +151,7 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 $innerHeight: 28px;
 $headerHeight: 30px;
 
@@ -239,5 +237,4 @@ $headerHeight: 30px;
   display: block;
   padding: 5px 20px;
 }
-
 </style>

src/components/Table/ListTable/index.vue

@@ -9,7 +9,7 @@
     />
     <TableAction
       v-if="hasActions"
-      :class="{'filter-expand': filterExpand}"
+      :class="{ 'filter-expand': filterExpand }"
       :date-pick="handleDateChange"
       :has-quick-filter="iHasQuickFilter"
       :quick-filter-expand.sync="filterExpand"
@@ -85,10 +85,13 @@ export default {
         date_from: getDaysAgo(7).toISOString(),
         date_to: this.$moment(getDayEnd()).add(1, 'day').toISOString()
       }
-      this.headerActions.datePicker = Object.assign({
-        dateStart: extraQuery.date_from,
-        dateEnd: extraQuery.date_to
-      }, this.headerActions.datePicker)
+      this.headerActions.datePicker = Object.assign(
+        {
+          dateStart: extraQuery.date_from,
+          dateEnd: extraQuery.date_to
+        },
+        this.headerActions.datePicker
+      )
     }
     if (this.$route.query.order) {
       extraQuery['order'] = this.$route.query.order
@@ -169,7 +172,7 @@ export default {
         extraQuery: this.extraQuery
       })
       const checkRoot = !(this.$route.meta?.disableOrgsChange === true)
-      const checkPermAndRoot = (action) => {
+      const checkPermAndRoot = action => {
         if (!this.hasActionPerm(action)) {
           return this.$t('NoPermission')
         }
@@ -390,6 +393,6 @@ export default {
 
 //修改颜色
 .el-button--text {
-  color: #409EFF;
+  color: #409eff;
 }
 </style>

src/components/Table/TagSearch/index.vue

@@ -16,7 +16,7 @@
       closable
       size="small"
       type="info"
-      @click="handleTagClick(v,k)"
+      @click="handleTagClick(v, k)"
       @close.stop="handleTagClose(k)"
     >
       <strong v-if="v.label">{{ v.label + ':' }}</strong>
@@ -40,7 +40,6 @@
     />
     <span :class="isFocus ? 'is-focus ' : ''" class="keydown-focus">/</span>
   </div>
-
 </template>
 
 <script>
@@ -49,8 +48,7 @@ export default {
   props: {
     config: {
       type: Object,
-      default: () => {
-      }
+      default: () => {}
     },
     options: {
       type: Array,
@@ -90,13 +88,14 @@ export default {
     },
     filterMaps() {
       const data = {}
+      const keyword = 'search'
       for (let key in this.filterTags) {
         const value = this.filterTags[key]['value']
         if (key === '') {
-          key = 'search'
+          key = keyword
         }
-        if (key.startsWith('search')) {
-          data['search'] = (data.search ? data.search + ',' : '') + value
+        if (key.startsWith(keyword)) {
+          data[keyword] = (data[keyword] ? data[keyword] + ',' : '') + value
         } else {
           data[key] = value
         }
@@ -138,7 +137,7 @@ export default {
         this.emptyCount = 1
       }
     },
-    '$route'(to, from) {
+    $route(to, from) {
       if (from.query !== to.query) {
         this.filterTags = {}
         if (to.query && Object.keys(to.query).length) {
@@ -169,7 +168,7 @@ export default {
     // 获取url中的查询条件，判断是不是包含在当前查询条件里
     checkInTableColumns(options) {
       const searchFieldOptions = {}
-      const queryInfoValues = options.map((i) => i.value)
+      const queryInfoValues = options.map(i => i.value)
       const routeQuery = this.getUrlQuery ? this.$route?.query : {}
       const routeQueryKeysLength = Object.keys(routeQuery).length
       if (routeQueryKeysLength < 1) return searchFieldOptions

src/components/Tree/AutoDataZTree/index.vue

@@ -421,12 +421,8 @@ export default {
   display: inline-block;
 }
 
-.data-z-tree {
-  ::v-deep {
-    .icon {
-      width: 10px;
-      margin-right: 3px;
-    }
-  }
+.data-z-tree ::v-deep .icon {
+  width: 10px;
+  margin-right: 3px;
 }
 </style>

src/components/Tree/DataZTree/components/ZTree/index.vue

@@ -1,16 +1,67 @@
 <template>
   <div>
     <div class="treebox">
-      <div v-if="treeSetting.showSearch">
+      <div v-if="treeSetting.showSearch" @click="focusTreeSearchInput">
         <el-input
           v-show="showTreeSearch"
+          ref="treeSearchInput"
           v-model="treeSearchValue"
-          :placeholder="$tc('Search')"
           class="fixed-tree-search"
-          prefix-icon="fa fa-search"
+          :placeholder="treeSearchInputPlaceholder"
           size="mini"
           @input="treeSearchHandle"
         >
+          <template #prepend>
+
+            <template v-if="!isSearchTypeDropdownEnabled">
+              <el-tooltip
+                effect="dark"
+                placement="top"
+                :content="currentTreeSearchTypeTooltip"
+                :open-delay="300"
+              >
+                <span style="cursor: pointer;" @click.stop="focusTreeSearchInput">
+                  <i class="fa fa-search" />
+                  <span class="search-label">{{ treeSearchTypeLabel }}</span>
+                </span>
+              </el-tooltip>
+            </template>
+
+            <template v-else>
+              <el-dropdown trigger="hover" @command="onSearchTypeChange">
+                <el-tooltip
+                  effect="dark"
+                  placement="top"
+                  :content="currentTreeSearchTypeTooltip"
+                  :open-delay="1000"
+                >
+                  <span @click.stop="focusTreeSearchInput">
+                    <i class="fa fa-search" />
+                    <span class="search-label">{{ treeSearchTypeLabel }}</span>
+                    <i class="el-icon-arrow-down" />
+                  </span>
+                </el-tooltip>
+
+                <el-dropdown-menu slot="dropdown">
+                  <el-dropdown-item
+                    v-for="(item, type) in treeSearchTypeOptions"
+                    :key="type"
+                    :command="type"
+                    :class="{ 'is-active': treeSearchType === type }"
+                  >
+                    <el-tooltip
+                      effect="dark"
+                      placement="right"
+                      :content="item.tooltip"
+                      :open-delay="300"
+                    >
+                      <span>{{ item.label }}</span>
+                    </el-tooltip>
+                  </el-dropdown-item>
+                </el-dropdown-menu>
+              </el-dropdown>
+            </template>
+          </template>
           <span slot="suffix">
             <i
               class="el-icon-close"
@@ -47,6 +98,7 @@ import '@ztree/ztree_v3/js/jquery.ztree.exhide.min.js'
 import '@/styles/ztree.css'
 import '@/styles/ztree_icon.scss'
 import axiosRetry from 'axios-retry'
+import { setUrlParam } from '@/utils/common'
 
 const defaultObject = {
   type: Object,
@@ -66,18 +118,52 @@ export default {
       rMenu: '',
       init: false,
       loading: false,
-      showTreeSearch: false,
-      treeSearchValue: ''
+      showTreeSearch: true,
+      treeSearchValue: '',
+      treeSearchType: 'asset',
+      treeSearchTypeOptions: {},
+      treeSearchTypeSupportOptions: {
+        node: {
+          label: this.$t('Node'),
+          placeholder: this.$t('Search node'),
+          tooltip: this.$t('Search by node name'),
+          search_key: 'search_node'
+        },
+        asset: {
+          label: this.$t('Asset'),
+          placeholder: this.$t('Search asset'),
+          tooltip: this.$t('Search by asset name or address'),
+          search_key: 'search_asset'
+        }
+      },
+      treeType: '' // asset | node
     }
   },
   computed: {
     treeSetting() {
       return this.setting
+    },
+    isSearchTypeDropdownEnabled() {
+      return Object.keys(this.treeSearchTypeOptions).length > 1
+    },
+    currentTreeSearchType() {
+      return this.treeSearchTypeOptions[this.treeSearchType]
+    },
+    currentTreeSearchTypeTooltip() {
+      return this.currentTreeSearchType?.tooltip || ''
+    },
+    treeSearchTypeLabel() {
+      return this.currentTreeSearchType?.label || ''
+    },
+    treeSearchInputPlaceholder() {
+      return this.currentTreeSearchType?.placeholder || this.$t('Search')
     }
   },
   mounted() {
     window.refresh = this.refresh
     window.onSearch = this.onSearch
+    this.initTreeType()
+    this.initTreeSearchTypeOptions()
     this.initTree().then(() => {
       this.$nextTick(() => {
         this.updateTreeHeight()
@@ -90,6 +176,36 @@ export default {
     window.removeEventListener('resize', this.updateTreeHeight)
   },
   methods: {
+    initTreeType() {
+      let treeType = this.treeSetting.treeType
+      if (!treeType) {
+        treeType = this.treeSetting.async?.enable ? 'asset' : 'node'
+      }
+      this.treeType = treeType
+    },
+    initTreeSearchTypeOptions() {
+      if (this.treeType === 'asset') {
+        // 资产树支持异步搜索节点和资产
+        this.treeSearchTypeOptions = this.treeSearchTypeSupportOptions
+        // 默认搜索资产
+        this.treeSearchType = 'asset'
+      } else {
+        // 节点树只支持搜索节点
+        this.treeSearchTypeOptions = Object.fromEntries(
+          Object.entries(this.treeSearchTypeSupportOptions)
+            .filter(([key]) => key === 'node')
+        )
+        // 默认搜索节点
+        this.treeSearchType = 'node'
+      }
+    },
+    onSearchTypeChange(type) {
+      this.treeSearchType = type
+      this.focusTreeSearchInput()
+    },
+    focusTreeSearchInput() {
+      this.$refs.treeSearchInput.focus()
+    },
     onMenuClick(menu) {
       if (menu.disabled) {
         return
@@ -116,19 +232,14 @@ export default {
       const zTreeRect = tree.getBoundingClientRect()
       tree.style.height = `calc(100vh - ${zTreeRect.top}px - 30px - 25px)`
     }, 100),
-    async initTree(refresh = false) {
+    async initTree(refresh = false, iTreeUrl = '') {
       const vm = this
-      let treeUrl
       this.loading = true
-      if (refresh && this.treeSetting.treeUrl.indexOf('/perms/') !== -1 &&
-        this.treeSetting.treeUrl.indexOf('rebuild_tree') === -1
-      ) {
-        treeUrl = (this.treeSetting.treeUrl.indexOf('?') === -1)
-          ? `${this.treeSetting.treeUrl}?rebuild_tree=1`
-          : `${this.treeSetting.treeUrl}&rebuild_tree=1`
-      } else {
+      let treeUrl = iTreeUrl
+      if (!treeUrl) {
         treeUrl = this.treeSetting.treeUrl
       }
+      treeUrl = setUrlParam(treeUrl, 'tree_type', this.treeType)
 
       if (refresh) {
         $.fn.zTree.destroy(this.iZTreeID)
@@ -221,25 +332,31 @@ export default {
       searchInput.oninput = e => this.treeSearchHandle((e.target.value || ''))
     },
     treeSearchHandle: _.debounce(function(value) {
-      if (this.treeSetting.async.enable) {
-        this.filterAssetsServer(value)
+      if (this.treeSetting.async?.enable) {
+        this.searchFromServer(value)
       } else {
-        this.filterTree(value)
+        this.searchFromLocal(value)
       }
     }, 600),
     getCheckedNodes: function() {
       return this.zTree.getCheckedNodes(true)
     },
+
     recurseParent(node) {
       const parentNode = node.getParentNode()
-      if (parentNode && parentNode.pId) {
-        return [parentNode, ...this.recurseParent(parentNode)]
-      } else if (parentNode) {
-        return [parentNode]
-      } else {
+      if (!parentNode) {
         return []
       }
+      const allParents = []
+      if (parentNode) {
+        allParents.push(parentNode)
+        if (parentNode.pId) {
+          allParents.push(...this.recurseParent(parentNode))
+        }
+      }
+      return allParents
     },
+
     recurseChildren(node) {
       if (!node.isParent) {
         return []
@@ -248,49 +365,27 @@ export default {
       if (!children) {
         return []
       }
-      let allChildren = []
+      const allChildren = []
       children.forEach((n) => {
-        allChildren = [...children, ...this.recurseChildren(n)]
+        allChildren.push(n)
+        allChildren.push(...this.recurseChildren(n))
       })
       return allChildren
     },
-    groupBy(array, filter) {
-      const groups = {}
-      array.forEach(function(o) {
-        const group = JSON.stringify(filter(o))
-        groups[group] = groups[group] || []
-        groups[group].push(o)
-      })
-      return Object.keys(groups).map(function(group) {
-        return groups[group]
-      })
-    },
-    filterTree(keyword, tree = this.zTree) {
+
+    searchFromLocal(keyword, tree = this.zTree) {
       if (!this.zTree) return
+
       const searchNode = tree.getNodesByFilter((node) => node.id === 'search')
       if (searchNode) tree.removeNode(searchNode[0])
-      const nodes = tree.transformToArray(tree.getNodes())
+
+      const allNodes = tree.transformToArray(tree.getNodes())
       if (!keyword) {
-        tree.showNodes(nodes)
+        tree.showNodes(allNodes)
+        tree.expandAll(false)
         return
       }
 
-      if (!keyword) {
-        if (tree.hiddenNodes) {
-          tree.showNodes(tree.hiddenNodes)
-          tree.hiddenNodes = null
-        }
-        if (tree.expandNodes) {
-          tree.expandNodes.forEach((node) => {
-            if (node.id !== nodes[0].id) {
-              tree.expandNode(node, false)
-            }
-          })
-          tree.expandNodes = null
-        }
-        return null
-      }
-      let shouldShow = []
       const matchedNodes = tree.getNodesByFilter((node) => {
         return node.name.toLowerCase().indexOf(keyword.toLowerCase()) > -1
       })
@@ -300,67 +395,54 @@ export default {
         const assetsAmount = matchedNodes.length
         name = `${name} (${assetsAmount})`
         const newNode = { id: 'search', name: name, isParent: false, open: false }
-        tree.addNodes(null, newNode)
+        const addedNodes = tree.addNodes(null, newNode)
+        // 隐藏所有节点，只显示搜索节点
+        tree.hideNodes(allNodes)
+        tree.showNodes(addedNodes)
+        return
       }
 
+      // 获取应该展示的节点，以及应该展开的节点
+      let shouldShow = []
+      let shouldExpandNodes = []
+      let shouldCollapseNodes = []
       matchedNodes.forEach((node) => {
         const parents = this.recurseParent(node)
         const children = this.recurseChildren(node)
-        shouldShow = [...shouldShow, ...parents, ...children, node]
-      })
+        // 应该显示匹配节点本身、其祖先节点和子孙节点
+        shouldShow.push(node)
+        shouldShow.push(...parents)
+        shouldShow.push(...children)
 
-      tree.hiddenNodes = nodes
-      tree.expandNodes = shouldShow
-      tree.hideNodes(nodes)
+        // 应该展开匹配节点的父节点，不展开匹配节点的子孙节点
+        shouldExpandNodes.push(...parents)
+        // 应该折叠匹配节点的子孙节点
+        shouldCollapseNodes.push(node)
+        shouldCollapseNodes.push(...children)
+      })
+      shouldShow = Array.from(new Set(shouldShow))
+      shouldExpandNodes = Array.from(new Set(shouldExpandNodes))
+      shouldCollapseNodes = Array.from(new Set(shouldCollapseNodes))
+
+      // 隐藏所有节点，显示应该显示的节点
+      tree.hideNodes(allNodes)
       tree.showNodes(shouldShow)
-      for (const node of shouldShow) {
-        if (node.isParent) {
-          tree.expandNode(node, true)
-        }
+      // 展开应该展开的节点
+      for (const node of shouldExpandNodes) {
+        tree.expandNode(node, true)
+      }
+      // 折叠应该折叠的节点
+      for (const node of shouldCollapseNodes) {
+        tree.expandNode(node, false)
       }
     },
-    filterAssetsServer(keyword) {
-      if (!this.zTree) return
-      let searchNode = this.zTree.getNodesByFilter((node) => node.id === 'search')
-      if (searchNode) {
-        this.zTree.removeChildNodes(searchNode[0])
-        this.zTree.removeNode(searchNode[0])
-      }
-      const treeNodes = this.zTree.getNodes()
-      if (!keyword) {
-        if (treeNodes.length !== 0) {
-          this.zTree.showNodes(treeNodes)
-        }
-        return
-      }
-      if (treeNodes.length !== 0) {
-        this.zTree.hideNodes(treeNodes)
-      }
 
-      let treeUrl = this.treeSetting.searchUrl ? this.treeSetting.searchUrl : this.treeSetting.treeUrl
-      const filterField = treeUrl.includes('?') ? `&search=${keyword}` : `?search=${keyword}`
-      if (treeUrl.indexOf('assets/nodes/children/tree') > -1) {
-        treeUrl = treeUrl + '&all=all'
-      }
-      const searchUrl = `${treeUrl}${filterField}`
-      this.$axios.get(searchUrl).then(nodes => {
-        let name = this.$t('Search')
-        const assetsAmount = nodes.length
-        name = `${name} (${assetsAmount})`
-        const newNode = { id: 'search', name: name, isParent: true, open: true, zAsync: true }
-        searchNode = this.zTree.addNodes(null, newNode)[0]
-        searchNode.zAsync = true
-        this.rootNodeAddDom(searchNode)
-
-        const nodesGroupByOrg = this.groupBy(nodes, (node) => {
-          return node.meta?.data?.org_name
-        })
-
-        for (const item of nodesGroupByOrg) {
-          this.zTree.addNodes(searchNode, item)
-        }
-        searchNode.open = true
-      })
+    searchFromServer(keyword) {
+      // 直接用搜索 API 返回的数据重新初始化树
+      const treeUrl = this.treeSetting.searchUrl ? this.treeSetting.searchUrl : this.treeSetting.treeUrl
+      const searchTypeKey = this.treeSearchTypeOptions[this.treeSearchType]?.search_key || 'search'
+      const searchUrl = setUrlParam(treeUrl, searchTypeKey, keyword)
+      this.initTree(true, searchUrl)
     }
   }
 
@@ -624,12 +706,19 @@ div.rMenu li {
 
 .fixed-tree-search {
   margin-bottom: 10px;
+  border: 1px solid;
+  border-radius: 3px;
+
+  &:hover,
+  &:focus-within {
+    border-color: var(--color-primary);
+  }
 
   & ::v-deep .el-input__inner {
-    border-radius: 4px;
+    border: none;
     background: #fafafa;
     padding-right: 32px;
-    color: var(--color-text-primary)
+    color: var(--color-text-primary);
   }
 
   & ::v-deep .el-input__suffix {
@@ -653,6 +742,37 @@ div.rMenu li {
   & ::v-deep .el-input__suffix-inner {
     line-height: 30px;
   }
+
+  & ::v-deep .el-input-group__prepend {
+    padding-left: 5px;
+    padding-right: 3px;
+    border: none;
+    color: #999;
+    * {
+      color: inherit;
+    }
+
+    align-items: center;
+    background: #fafafa;
+    .el-icon-arrow-down {
+      display: inline-block;
+      transition: transform 0.8s ease; /* 动画关键 */
+    }
+    :hover {
+      .el-icon-arrow-down {
+        transform: rotate(180deg); /* 顺时针 180° */
+      }
+    }
+    .search-label {
+      margin-left: 1px;
+      margin-right: 1px;
+    }
+  }
+}
+
+::v-deep .el-dropdown-menu__item.is-active {
+  color: var(--color-primary);
+  font-weight: 500;
 }
 
 .icon-refresh {

src/i18n/i18n.js

@@ -1,6 +1,6 @@
 // i18n.js
 import Vue from 'vue'
-import locale from 'elementui-lts/lib/locale'
+import locale from 'element-ui/lib/locale'
 import VueI18n from 'vue-i18n'
 import messages from './langs'
 import date from './date'
@@ -54,7 +54,7 @@ export async function fetchTranslationsFromAPI() {
       }
     }
   } catch (error) {
-    alert(error)
+    console.log(error)
   } finally {
     await store.dispatch('app/setI18nLoaded', true)
   }

src/i18n/langs/index.js

@@ -1,49 +1,44 @@
-import zhLocale from 'elementui-lts/lib/locale/lang/zh-CN'
-import zhTWLocale from 'elementui-lts/lib/locale/lang/zh-TW'
-import enLocale from 'elementui-lts/lib/locale/lang/en'
-import jaLocale from 'elementui-lts/lib/locale/lang/ja'
-import ptBrLocale from 'elementui-lts/lib/locale/lang/pt-br'
-import esLocale from 'elementui-lts/lib/locale/lang/es'
-import ruLocale from 'elementui-lts/lib/locale/lang/ru-RU'
-import koLocale from 'elementui-lts/lib/locale/lang/ko'
-import viLocale from 'elementui-lts/lib/locale/lang/vi'
 import zh from './zh.json'
-import zhHant from './zh_hant.json'
+import zh_hant from './zh_hant.json'
 import en from './en.json'
 import ja from './ja.json'
 
-const messages = {
-  zh: {
-    ...zhLocale,
-    ...zh
-  },
-  zh_hant: {
-    ...zhTWLocale,
-    ...zhHant
-  },
-  en: {
-    ...enLocale,
-    ...en
-  },
-  ja: {
-    ...jaLocale,
-    ...ja
-  },
-  pt_br: {
-    ...ptBrLocale
-  },
-  es: {
-    ...esLocale
-  },
-  ru: {
-    ...ruLocale
-  },
-  ko: {
-    ...koLocale
-  },
-  vi: {
-    ...viLocale
+// Map app locales to Element-UI locale file names
+const elementLocaleNameByAppLocale = {
+  zh: 'zh-CN',
+  zh_hant: 'zh-TW',
+  en: 'en',
+  ja: 'ja',
+  pt_br: 'pt-br',
+  es: 'es',
+  ru: 'ru-RU',
+  ko: 'ko',
+  vi: 'vi'
+}
+
+function loadElementLocale(localeName) {
+  try {
+    // eslint-disable-next-line import/no-dynamic-require, global-require
+    const mod = require(`element-ui/lib/locale/lang/${localeName}`)
+    return (mod && (mod.default || mod)) || {}
+  } catch (e) {
+    return {}
   }
 }
 
+const appLocaleMessages = {
+  zh,
+  zh_hant,
+  en,
+  ja
+}
+
+const messages = Object.keys(elementLocaleNameByAppLocale).reduce((acc, appLocale) => {
+  const elementLocaleName = elementLocaleNameByAppLocale[appLocale]
+  const elementLocale = loadElementLocale(elementLocaleName)
+  const appMessages = appLocaleMessages[appLocale] || {}
+  acc[appLocale] = { ...elementLocale, ...appMessages }
+  return acc
+}, {})
+
 export default messages

src/layout/components/AppMain.vue

@@ -78,6 +78,3 @@ export default {
   }
 }
 </style>
-
-<style lang="scss">
-</style>

src/layout/components/NavHeader/Organization.vue

@@ -4,6 +4,7 @@
     :placeholder="$tc('Select')"
     :value="currentOrgId"
     class="org-select"
+    :style="{ width: selectWidth }"
     filterable
     popper-class="switch-org"
     @change="changeOrg"
@@ -54,7 +55,8 @@ export default {
   },
   data() {
     return {
-      orgOption: []
+      orgOption: [],
+      selectWidth: 'auto'
     }
   },
   computed: {
@@ -63,6 +65,17 @@ export default {
       'usingOrgs',
       'currentViewRoute'
     ]),
+    currentOrgDisplayName() {
+      const currentOrgId = this.currentOrg?.id
+      if (!currentOrgId) {
+        return this.$tc('Select')
+      }
+      const matchedOrg = this.usingOrgs.find(item => item.id === currentOrgId)
+      if (matchedOrg?.name) {
+        return matchedOrg.name
+      }
+      return this.currentOrg.name || this.$tc('Select')
+    },
     orgActionsGroup() {
       const orgActions = {
         label: this.$t('OrganizationList'),
@@ -107,7 +120,53 @@ export default {
       return currentOrgId
     }
   },
+  watch: {
+    currentOrgDisplayName() {
+      this.updateWidth()
+    }
+  },
+  mounted() {
+    this.updateWidth()
+  },
   methods: {
+    updateWidth() {
+      this.$nextTick(() => {
+        // 创建临时元素来测量文本宽度
+        const tempSpan = document.createElement('span')
+        tempSpan.style.visibility = 'hidden'
+        tempSpan.style.position = 'absolute'
+        tempSpan.style.whiteSpace = 'nowrap'
+        tempSpan.style.fontSize = '14px'
+        tempSpan.style.fontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif'
+        tempSpan.style.fontWeight = 'normal'
+        tempSpan.style.letterSpacing = 'normal'
+
+        // 获取当前组织显示名称
+        const orgName = this.currentOrgDisplayName
+
+        tempSpan.textContent = orgName
+        document.body.appendChild(tempSpan)
+
+        // 测量文本宽度
+        const textWidth = tempSpan.offsetWidth
+
+        // 固定空间：左侧图标 + padding + 右侧箭头
+        const iconWidth = 15 // 左侧图标
+        const paddingWidth = 35 // 左右 padding
+        const arrowWidth = 20 // 右侧箭头
+        const totalWidth = textWidth + iconWidth + paddingWidth + arrowWidth
+
+        // 设置合理的边界
+        const minWidth = 100
+        const maxWidth = 400
+        const finalWidth = Math.max(minWidth, Math.min(maxWidth, totalWidth))
+
+        this.selectWidth = finalWidth + 'px'
+
+        // 清理临时元素
+        document.body.removeChild(tempSpan)
+      })
+    },
     changeOrg(orgId) {
       const org = this.usingOrgs.find(item => item.id === orgId)
 
@@ -121,6 +180,7 @@ export default {
         default:
           orgUtil.changeOrg(org, true, this)
       }
+      this.updateWidth()
     }
   }
 }

src/layout/components/NavHeader/Search.vue

@@ -337,6 +337,7 @@ export default {
   height: 40px;
   padding: 5px 0;
   min-width: 200px;
+  margin-right: 5px;
 
   .search-trigger {
     height: 30px;
@@ -345,32 +346,39 @@ export default {
     .search-input {
       height: 30px;
       line-height: 1;
-      background-color: rgba(255, 255, 255, 0.1);
+      background-color: rgba(5, 5, 5, 0.1);
       border-radius: 4px;
       cursor: pointer;
 
       &:hover {
-        background-color: rgba(0, 0, 0, 0.1);
+        background-color: rgba(0, 0, 0, 0.2);
       }
 
-      ::v-deep .el-input__inner {
-        height: 30px;
-        line-height: 1;
-        background: transparent;
-        border: none;
-        color: #fff;
-        cursor: pointer;
-      }
+      ::v-deep {
+        .el-input__inner {
+          height: 30px;
+          line-height: 1;
+          background: transparent;
+          border: none;
+          color: #fff;
+          cursor: pointer;
 
-      ::v-deep .el-input__inner::placeholder {
-        color: #fff;
-        opacity: 0.7;
-      }
+          &::placeholder {
+            color: #fff;
+            opacity: 0.7;
+          }
+        }
 
-      ::v-deep .el-input__suffix {
-        display: flex;
-        align-items: center;
-        height: 100%;
+        .el-input__prefix .el-input__icon {
+          font-size: 15px;
+          line-height: 32px;
+        }
+
+        .el-input__suffix {
+          display: flex;
+          align-items: center;
+          height: 100%;
+        }
       }
 
       .search-shortcut {
@@ -394,11 +402,9 @@ export default {
     }
   }
 }
-</style>
 
-<style lang="scss">
 /* 搜索模态框全局样式 */
-.search-modal {
+::v-deep .search-modal {
   &.el-dialog {
     position: fixed;
     top: 5px;
@@ -407,8 +413,7 @@ export default {
     max-height: calc(100vh - 10px);
     max-width: calc(100vw - 10px);
     border-radius: 5px;
-    // box-shadow: 0 0 8px 4px #00000014;
-    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
+    box-shadow: 0 0 8px 4px #00000014;
 
     .el-dialog__body {
       padding: 0;
@@ -420,17 +425,17 @@ export default {
   }
 }
 
-body .v-modal {
+::v-deep body .v-modal {
   opacity: 0.3;
 }
 
-.search-modal-content {
+::v-deep .search-modal-content {
   height: 70vh;
   display: flex;
   flex-direction: column;
 }
 
-.search-input-wrapper {
+::v-deep .search-input-wrapper {
   padding: 20px;
   border-bottom: 1px solid #f0f0f0;
   // background: #fff;
@@ -444,7 +449,7 @@ body .v-modal {
   }
 }
 
-.search-results {
+::v-deep .search-results {
   flex: 1;
   overflow-y: auto;
   overflow-x: hidden;
@@ -469,7 +474,7 @@ body .v-modal {
   }
 }
 
-.section-title {
+::v-deep .section-title {
   padding: 12px 24px 6px;
   font-size: 12px;
   line-height: 1.5;
@@ -498,12 +503,12 @@ body .v-modal {
 
     .clear-icon {
       font-size: 14px;
-    color: red;
+      color: red;
     }
   }
 }
 
-.list {
+::v-deep .list {
   list-style: none;
   margin: 0;
   padding: 0;
@@ -574,15 +579,15 @@ body .v-modal {
   }
 }
 
-.loading,
-.empty {
+::v-deep .loading,
+::v-deep .empty {
   padding: 32px 24px;
   color: #909399;
   text-align: center;
   font-size: 14px;
 }
 
-.section.placeholder {
+::v-deep .section.placeholder {
   padding: 32px 24px;
 
   .placeholder-content {
@@ -630,4 +635,3 @@ body .v-modal {
   }
 }
 </style>
-

src/layout/components/NavHeader/index.vue

@@ -167,16 +167,16 @@ export default {
       .organization {
         display: flex;
         align-items: center;
-        padding: 0 0 0 15px !important;
+        padding: 0 0 0 15px ;
         border-radius: 3px;
-        background-color: rgba(255, 255, 255, 0.1);
+        // background-color: rgba(5, 5, 5, 0.1);
         color: #fff;
         font-weight: 600;
         font-size: 15px;
         max-width: 250px;
 
         ::v-deep .el-input__inner {
-          padding-left: 25px;
+          padding-left: 20px;
         }
 
         ::v-deep .el-input.is-disabled > input {
@@ -184,7 +184,7 @@ export default {
         }
 
         &:hover {
-          background-color: rgba(0, 0, 0, 0.12) !important;
+          background-color: rgba(0, 0, 0, 0.2);
         }
       }
 

src/layout/components/TabPage/index.vue

@@ -167,8 +167,7 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
-
+<style lang="scss" scoped>
 .page.no-title {
   ::v-deep {
     .page-submenu .el-tabs__header {
@@ -199,6 +198,14 @@ export default {
         opacity: 1;
       }
     }
+
+    &.is-disabled {
+      cursor: not-allowed;
+
+      &:hover {
+        color: #c0c4cc;
+      }
+    }
   }
 
   .el-tabs__nav-next {

src/layout/components/TagsView/index.vue

@@ -276,10 +276,8 @@ export default {
     }
   }
 }
-</style>
 
-<style lang="scss">
-//reset element css of el-icon-close
+// reset element css of el-icon-close
 .tags-view-wrapper {
   .tags-view-item {
     .el-icon-close {

src/main.js

@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import ElementUI from 'elementui-lts'
+import ElementUI from 'element-ui'
 import locale from 'elementLocale'
 import '@/styles/index.scss' // global css
 import App from './App'

src/router/console/acls.js

@@ -34,7 +34,9 @@ export default [
             name: 'UserLoginACLList',
             component: () => import('@/views/acls/UserLoginACL/UserLoginACLList.vue'),
             meta: {
-              title: i18n.t('UserLoginACLs'), menuTitle: i18n.t('UserLogin'), activeMenu: ''
+              title: i18n.t('UserLoginACLs'),
+              menuTitle: i18n.t('UserLogin'),
+              activeMenu: ''
             }
           },
           {
@@ -74,7 +76,7 @@ export default [
         },
         name: 'CmdACL',
         meta: {
-          title: i18n.t('CommandFilterACLs',),
+          title: i18n.t('CommandFilterACLs'),
           menuTitle: i18n.t('CommandFilter'),
           app: 'acls',
           resource: 'commandfilteracl'
@@ -136,7 +138,11 @@ export default [
             path: '',
             name: 'AssetACLList',
             component: () => import('@/views/acls/AssetLoginACL/AssetLoginAclList.vue'),
-            meta: { title: i18n.t('AssetACLs'), activeMenu: '', menuTitle: i18n.t('AssetConnect') }
+            meta: {
+              title: i18n.t('AssetACLs'),
+              activeMenu: '',
+              menuTitle: i18n.t('AssetConnect')
+            }
           },
           {
             path: 'create',
@@ -161,6 +167,53 @@ export default [
           }
         ]
       },
+      {
+        path: 'data-masking-rules',
+        component: empty,
+        redirect: {
+          name: 'DataMaskingRuleList'
+        },
+        name: 'DataMaskingRules',
+        meta: {
+          title: i18n.t('DataMasking'),
+          licenseRequired: true,
+          app: 'acls',
+          resource: 'datamaskingrule'
+        },
+        children: [
+          {
+            path: '',
+            name: 'DataMaskingRuleList',
+            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleList.vue'),
+            meta: {
+              title: i18n.t('DataMasking'),
+              activeMenu: '',
+              menuTitle: i18n.t('DataMasking')
+            }
+          },
+          {
+            path: 'create',
+            name: 'DataMaskingRuleCreate',
+            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue'),
+            hidden: true,
+            meta: { title: '', activeMenu: '' }
+          },
+          {
+            path: ':id',
+            name: 'DataMaskingRuleDetail',
+            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleDetail/index'),
+            hidden: true,
+            meta: { title: i18n.t('AssetACLDetail'), activeMenu: '' }
+          },
+          {
+            path: ':id/update',
+            name: 'DataMaskingRuleUpdate',
+            component: () => import('@/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue'),
+            hidden: true,
+            meta: { title: '', activeMenu: '' }
+          }
+        ]
+      },
       {
         path: 'cmd-groups',
         component: empty,
@@ -237,7 +290,11 @@ export default [
             path: '',
             name: 'ConnectMethodACLList',
             component: () => import('@/views/acls/ConnectMethodACL/ConnectMethodAclList.vue'),
-            meta: { title: i18n.t('ConnectMethodACLs'), activeMenu: '', menuTitle: i18n.t('ConnectMethod') }
+            meta: {
+              title: i18n.t('ConnectMethodACLs'),
+              activeMenu: '',
+              menuTitle: i18n.t('ConnectMethod')
+            }
           },
           {
             path: 'create',

src/styles/element-variables.scss

@@ -6,19 +6,21 @@
 
 /* Transition
 -------------------------- */
-$--all-transition: all .3s cubic-bezier(.645,.045,.355,1) !default;
+$--all-transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 $--fade-transition: opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
 $--fade-linear-transition: opacity 200ms linear !default;
-$--md-fade-transition: transform 300ms cubic-bezier(0.23, 1, 0.32, 1), opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
-$--border-transition-base: border-color .2s cubic-bezier(.645,.045,.355,1) !default;
-$--color-transition-base: color .2s cubic-bezier(.645,.045,.355,1) !default;
+$--md-fade-transition:
+  transform 300ms cubic-bezier(0.23, 1, 0.32, 1),
+  opacity 300ms cubic-bezier(0.23, 1, 0.32, 1) !default;
+$--border-transition-base: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
+$--color-transition-base: color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1) !default;
 
 /* Color
 -------------------------- */
 /// color|1|Brand Color|0
 $--color-primary: #1ab394 !default;
 /// color|1|Background Color|4
-$--color-white: #FFFFFF !default;
+$--color-white: #ffffff !default;
 /// color|1|Background Color|4
 $--color-black: #000000 !default;
 $--color-primary-light-1: mix($--color-white, $--color-primary, 10%) !default; /* 53a8ff */
@@ -55,19 +57,19 @@ $--color-text-regular: #606266 !default;
 /// color|1|Font Color|2
 $--color-text-secondary: #909399 !default;
 /// color|1|Font Color|2
-$--color-text-placeholder: #C0C4CC !default;
+$--color-text-placeholder: #c0c4cc !default;
 /// color|1|Border Color|3
-$--border-color-base: #DCDFE6 !default;
+$--border-color-base: #dcdfe6 !default;
 /// color|1|Border Color|3
-$--border-color-light: #E4E7ED !default;
+$--border-color-light: #e4e7ed !default;
 /// color|1|Border Color|3
-$--border-color-lighter: #EBEEF5 !default;
+$--border-color-lighter: #ebeef5 !default;
 /// color|1|Border Color|3
-$--border-color-extra-light: #F2F6FC !default;
+$--border-color-extra-light: #f2f6fc !default;
 
 // Background
 /// color|1|Background Color|4
-$--background-color-base: #F5F7FA !default;
+$--background-color-base: #f5f7fa !default;
 
 /* Link
 -------------------------- */
@@ -91,9 +93,13 @@ $--border-radius-zero: 0 !default;
 
 // Box-shadow
 /// boxShadow|1|Shadow|1
-$--box-shadow-base: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04) !default;
+$--box-shadow-base:
+  0 2px 4px rgba(0, 0, 0, 0.12),
+  0 0 6px rgba(0, 0, 0, 0.04) !default;
 // boxShadow|1|Shadow|1
-$--box-shadow-dark: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .12) !default;
+$--box-shadow-dark:
+  0 2px 4px rgba(0, 0, 0, 0.12),
+  0 0 6px rgba(0, 0, 0, 0.12) !default;
 /// boxShadow|1|Shadow|1
 $--box-shadow-light: 0 2px 12px 0 rgba(0, 0, 0, 0.1) !default;
 
@@ -210,8 +216,6 @@ $--checkbox-button-checked-font-color: $--color-white !default;
 /// color||Color|0
 $--checkbox-button-checked-border-color: $--color-primary !default;
 
-
-
 /* Radio
 -------------------------- */
 /// fontSize||Font|1
@@ -480,8 +484,8 @@ $--cascader-menu-radius: $--border-radius-base !default;
 $--cascader-menu-border: solid 1px $--border-color-light !default;
 $--cascader-menu-shadow: $--box-shadow-light !default;
 $--cascader-node-background-hover: $--background-color-base !default;
-$--cascader-node-color-disabled:$--color-text-placeholder !default;
-$--cascader-color-empty:$--color-text-placeholder !default;
+$--cascader-node-color-disabled: $--color-text-placeholder !default;
+$--cascader-color-empty: $--color-text-placeholder !default;
 $--cascader-tag-background: #f0f2f5;
 
 /* Group
@@ -591,7 +595,6 @@ $--button-info-background-color: $--color-info !default;
 $--button-hover-tint-percent: 20% !default;
 $--button-active-shade-percent: 10% !default;
 
-
 /* cascader
 -------------------------- */
 $--cascader-height: 200px !default;
@@ -639,7 +642,7 @@ $--table-row-hover-background-color: $--background-color-base !default;
 $--table-current-row-background-color: $--color-primary-light-9 !default;
 /// color||Color|0
 $--table-header-background-color: $--color-white !default;
-$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, .12) !default;
+$--table-fixed-box-shadow: 0 0 10px rgba(0, 0, 0, 0.12) !default;
 
 /* Pagination
 -------------------------- */
@@ -827,8 +830,8 @@ $--loading-fullscreen-spinner-size: 50px !default;
 
 /* Scrollbar
 --------------------------*/
-$--scrollbar-background-color: rgba($--color-text-secondary, .3) !default;
-$--scrollbar-hover-background-color: rgba($--color-text-secondary, .5) !default;
+$--scrollbar-background-color: rgba($--color-text-secondary, 0.3) !default;
+$--scrollbar-hover-background-color: rgba($--color-text-secondary, 0.5) !default;
 
 /* Carousel
 --------------------------*/
@@ -937,7 +940,7 @@ $--link-info-font-color: $--color-info !default;
 /// border||Other|4
 $--calendar-border: $--table-border !default;
 /// color||Other|4
-$--calendar-selected-background-color: #F2F8FE !default;
+$--calendar-selected-background-color: #f2f8fe !default;
 $--calendar-cell-width: 85px !default;
 
 /* Form
@@ -950,7 +953,7 @@ $--form-label-font-size: $--font-size-base !default;
 /// color||Color|0
 $--avatar-font-color: #fff !default;
 /// color||Color|0
-$--avatar-background-color: #C0C4CC !default;
+$--avatar-background-color: #c0c4cc !default;
 /// fontSize||Font Size|1
 $--avatar-text-font-size: 14px !default;
 /// fontSize||Font Size|1
@@ -972,26 +975,52 @@ $--lg: 1200px !default;
 $--xl: 1920px !default;
 
 $--breakpoints: (
-  'xs' : (max-width: $--sm - 1),
-  'sm' : (min-width: $--sm),
-  'md' : (min-width: $--md),
-  'lg' : (min-width: $--lg),
-  'xl' : (min-width: $--xl)
+  'xs': (
+    max-width: $--sm - 1
+  ),
+  'sm': (
+    min-width: $--sm
+  ),
+  'md': (
+    min-width: $--md
+  ),
+  'lg': (
+    min-width: $--lg
+  ),
+  'xl': (
+    min-width: $--xl
+  )
 );
 
 $--breakpoints-spec: (
-  'xs-only' : (max-width: $--sm - 1),
-  'sm-and-up' : (min-width: $--sm),
-  'sm-only': "(min-width: #{$--sm}) and (max-width: #{$--md - 1})",
-  'sm-and-down': (max-width: $--md - 1),
-  'md-and-up' : (min-width: $--md),
-  'md-only': "(min-width: #{$--md}) and (max-width: #{$--lg - 1})",
-  'md-and-down': (max-width: $--lg - 1),
-  'lg-and-up' : (min-width: $--lg),
-  'lg-only': "(min-width: #{$--lg}) and (max-width: #{$--xl - 1})",
-  'lg-and-down': (max-width: $--xl - 1),
-  'xl-only' : (min-width: $--xl),
+  'xs-only': (
+    max-width: $--sm - 1
+  ),
+  'sm-and-up': (
+    min-width: $--sm
+  ),
+  'sm-only': '(min-width: #{$--sm}) and (max-width: #{$--md - 1})',
+  'sm-and-down': (
+    max-width: $--md - 1
+  ),
+  'md-and-up': (
+    min-width: $--md
+  ),
+  'md-only': '(min-width: #{$--md}) and (max-width: #{$--lg - 1})',
+  'md-and-down': (
+    max-width: $--lg - 1
+  ),
+  'lg-and-up': (
+    min-width: $--lg
+  ),
+  'lg-only': '(min-width: #{$--lg}) and (max-width: #{$--xl - 1})',
+  'lg-and-down': (
+    max-width: $--xl - 1
+  ),
+  'xl-only': (
+    min-width: $--xl
+  )
 );
 
-$--font-path: '~elementui-lts/lib/theme-chalk/fonts';
-@import "~elementui-lts/packages/theme-chalk/src/index";
+$--font-path: '~element-ui/lib/theme-chalk/fonts';
+@import '~element-ui/packages/theme-chalk/src/index';

src/styles/index.scss

@@ -242,6 +242,10 @@ input[type='file'] {
   color: #737373 !important;
 }
 
+.el-select-dropdown.switch-org {
+  width: 220px;
+}
+
 @media screen and (max-width: 992px) {
   .el-select-dropdown.switch-org {
     left: 0 !important;

src/utils/common/index.js

@@ -149,6 +149,11 @@ export function getErrorResponseMsg(error) {
       .join('; ')
   } else if (typeof data === 'string') {
     return data
+  } else if (_.isPlainObject(data)) {
+    return Object.values(data)
+      .map(item => getErrorResponseMsg(item))
+      .filter(i => i)
+      .join('; ')
   } else {
     msg = error.toString()
   }

src/utils/request.js

@@ -3,7 +3,7 @@ import i18n from '@/i18n/i18n'
 import { eventBus } from '@/utils/vue/eventbus'
 import { getTokenFromCookie } from '@/utils/jms/auth'
 import { getErrorResponseMsg } from '@/utils/common'
-import { MessageBox } from 'elementui-lts'
+import { MessageBox } from 'element-ui'
 import { message } from '@/utils/vue/message'
 import store from '@/store'
 import axiosRetry from 'axios-retry'

src/utils/vue/elTableTooltipPatch.js

@@ -1,7 +1,7 @@
 // 鼠标可移入tooltip功能
-import { Table } from 'elementui-lts'
-import { getCell, getColumnByCell } from 'elementui-lts/packages/table/src/util'
-import { getStyle, hasClass } from 'elementui-lts/src/utils/dom'
+import { Table } from 'element-ui'
+import { getCell, getColumnByCell } from 'element-ui/packages/table/src/util'
+import { getStyle, hasClass } from 'element-ui/src/utils/dom'
 import { copy } from '../common/index'
 
 Object.assign(Table.components.TableBody.methods, {

src/views/accounts/AccountDiscover/DeleteDialog.vue

@@ -116,6 +116,7 @@ export default {
   },
   methods: {
     handleConfirm() {
+      this.$message.warning(this.$tc('ProcessingMessage'))
       const url = `/api/v1/accounts/gathered-accounts/${this.account.id}/`
       this.$axios.delete(url, {
         params: {

src/views/accounts/AccountPush/AccountPushCreateUpdate.vue

@@ -144,11 +144,6 @@ export default {
       deep: true
     }
   },
-  mounted() {
-    if (!this.$store.getters.hasValidLicense) {
-      delete this.fields[3]
-    }
-  },
   methods: {
     handleAfterGetRemoteMeta(meta) {
       const needSetOptionFields = [

src/views/accounts/RiskDetect/AccountRiskList.vue

@@ -43,7 +43,9 @@ export default {
         asset: ''
       },
       treeSetting: {
-        showMenu: true,
+        showMenu: (node) => {
+          return node?.meta?.type === 'asset'
+        },
         showRefresh: true,
         showSearch: true,
         showAssets: true,
@@ -55,7 +57,7 @@ export default {
         menu: [
           {
             id: 'check',
-            name: this.$t('Check'),
+            name: this.$t('RiskDetection'),
             icon: 'scan',
             callback: (node) => {
               vm.detectDialog.asset = node.id

src/views/accounts/RiskDetect/RiskHandlerFormatter/ReviewDrawer.vue

@@ -6,7 +6,6 @@
     class="risk-review-drawer"
     destroy-on-close
     direction="rtl"
-    style="z-index: 999"
   >
     <div class="drawer-container">
       <div class="drawer-body">

src/views/accounts/RiskDetect/RiskHandlerFormatter/index.vue

@@ -141,9 +141,9 @@ export default {
     },
     async handleCommon(cmd, payload) {
       let rows = this.rows
+      this.processing = true
       if (this.rows.length === 0) {
         rows = [this.row]
-        this.processing = true
       }
       if (!payload) {
         payload = {}

src/views/acls/DataMaskingRule/DataMaskingRuleCreateUpdate.vue

@@ -0,0 +1,62 @@
+<template>
+  <GenericCreateUpdatePage v-bind="$data" />
+</template>
+
+<script>
+import GenericCreateUpdatePage from '@/layout/components/GenericCreateUpdatePage'
+import { userJSONSelectMeta } from '@/views/users/const'
+import { assetJSONSelectMeta } from '@/views/assets/const'
+import AccountFormatter from '@/views/perms/AssetPermission/components/AccountFormatter.vue'
+
+export default {
+  name: 'DataMaskingRuleCreateUpdate',
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      initial: {
+        accounts: ['@ALL']
+      },
+      fields: [
+        [this.$t('Basic'), ['name', 'priority']],
+        [this.$t('Users'), ['users']],
+        [this.$t('Asset'), ['assets']],
+        [this.$t('Accounts'), ['accounts']],
+        [this.$t('Rules'), ['fields_pattern', 'masking_method', 'mask_pattern']],
+        [this.$t('Other'), ['is_active', 'comment']]
+      ],
+      fieldsMeta: {
+        assets: assetJSONSelectMeta(this),
+        users: userJSONSelectMeta(this),
+        accounts: {
+          component: AccountFormatter,
+          el: {
+            showAddTemplate: false,
+            enableVirtualAccount: false,
+            value: ['@ALL'],
+            assets: []
+          },
+          hidden: (formValue) => {
+            const ids = formValue.assets?.ids
+            this.fieldsMeta.accounts.el.assets = ids || []
+          }
+        },
+        fields_pattern: {
+          helpTip: this.$t('DataMaskingFieldsPatternHelpTip')
+        },
+        mask_pattern: {
+          hidden: (formValue) => {
+            return !['fixed_char'].includes(formValue.masking_method)
+          }
+        }
+      },
+      url: '/api/v1/acls/data-masking-rules/'
+    }
+  },
+  methods: {}
+}
+</script>
+
+<style>
+</style>

src/views/acls/DataMaskingRule/DataMaskingRuleDetail/Detail.vue

@@ -0,0 +1,39 @@
+<template>
+  <TwoCol>
+    <AutoDetailCard :fields="detailFields" :object="object" :url="url" />
+  </TwoCol>
+</template>
+
+<script>
+import AutoDetailCard from '@/components/Cards/DetailCard/auto'
+import TwoCol from '@/layout/components/Page/TwoColPage.vue'
+
+export default {
+  name: 'Detail',
+  components: {
+    TwoCol,
+    AutoDetailCard
+  },
+  props: {
+    object: {
+      type: Object,
+      default: () => {
+      }
+    }
+  },
+  data() {
+    return {
+      url: `/api/v1/acls/data-masking-rules/${this.object.id}/`,
+      detailFields: [
+        'name', 'fields_pattern', 'masking_method', 'mask_pattern',
+        'priority', 'date_created', 'created_by', 'comment'
+      ]
+    }
+  },
+  computed: {}
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>

src/views/acls/DataMaskingRule/DataMaskingRuleDetail/index.vue

@@ -0,0 +1,51 @@
+<template>
+  <GenericDetailPage :active-menu.sync="config.activeMenu" :object.sync="instance" v-bind="config" v-on="$listeners">
+    <keep-alive>
+      <component :is="config.activeMenu" :object="instance" />
+    </keep-alive>
+  </GenericDetailPage>
+</template>
+
+<script>
+import { GenericDetailPage } from '@/layout/components'
+import Detail from './Detail.vue'
+import UserJsonTab from '@/components/Apps/ManyJsonTabs/UserJsonTab.vue'
+import AssetJsonTab from '@/components/Apps/ManyJsonTabs/AssetJsonTab.vue'
+
+export default {
+  components: {
+    GenericDetailPage,
+    Detail,
+    UserJsonTab,
+    AssetJsonTab
+  },
+  data() {
+    return {
+      instance: {},
+      config: {
+        url: `/api/v1/acls/data-masking-rules/`,
+        activeMenu: 'Detail',
+        submenu: [
+          {
+            title: this.$t('Basic'),
+            name: 'Detail'
+          },
+          {
+            title: this.$t('MenuUsers'),
+            name: 'UserJsonTab'
+          },
+          {
+            title: this.$t('Assets'),
+            name: 'AssetJsonTab'
+          }
+        ],
+        hasRightSide: true
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/acls/DataMaskingRule/DataMaskingRuleList.vue

@@ -0,0 +1,35 @@
+<template>
+  <GenericListPage :header-actions="headerActions" :help-tip="helpMsg" :table-config="tableConfig" />
+</template>
+
+<script>
+import { GenericListPage } from '@/layout/components'
+
+export default {
+  components: {
+    GenericListPage
+  },
+  data() {
+    return {
+      helpMsg: this.$t('DataMaskingRuleHelpHelpMsg'),
+      tableConfig: {
+        url: '/api/v1/acls/data-masking-rules/',
+        columnsExclude: ['users', 'assets', 'accounts', 'rules', 'reviewers', 'action'],
+        columnsShow: {
+          min: ['name', 'actions'],
+          default: [
+            'name', 'priority', 'is_active', 'comment', 'actions'
+          ]
+        }
+      },
+      updateRoute: 'DataMaskingRuleUpdate',
+      headerActions: {
+        createRoute: 'DataMaskingRuleCreate',
+        hasRefresh: true,
+        hasExport: false,
+        hasImport: false
+      }
+    }
+  }
+}
+</script>

src/views/acls/index.vue

@@ -31,7 +31,7 @@ export default {
             id: 'connect-asset',
             display_name: this.$t('AssetACLs'),
             name: 'AssetACLList',
-            comment: this.$t('AssetLoginACLHelpText'),
+            comment: this.$t('DataMaskingRuleHelpHelpText'),
             icon: 'assets',
             edition: 'enterprise',
             tags: ['asset']

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

@@ -61,7 +61,7 @@ export default {
         updateSuccessNextRoute: this.updateSuccessNextRoute,
         hasDetailInMsg: false,
         fields: [
-          [this.$t('Basic'), ['name', 'address', 'platform', 'nodes']],
+          [this.$t('Basic'), ['name', 'address', 'platform', 'node']],
           [this.$t('Protocol'), ['protocols']],
           [this.$t('Account'), ['accounts']],
           [this.$t('Other'), ['directory_services', 'zone', 'labels', 'is_active', 'comment']]
@@ -73,8 +73,8 @@ export default {
           const values = _.cloneDeep(validValues)
           const submitMethod = id ? 'put' : 'post'
 
-          if (values.nodes && values.nodes.length === 0) {
-            delete values['nodes']
+          if (!values.node) {
+            delete values['node']
           }
 
           if (submitMethod === 'put') {
@@ -143,15 +143,14 @@ export default {
     },
     async setInitial() {
       const { defaultConfig } = this
-      const { node } = this.$route.query
-      const nodesInitial = node ? [node] : []
+      const { node_id } = this.$route.query
       const platformId = this.platformID || 'Linux'
       const url = `/api/v1/assets/platforms/${platformId}/`
       this.platform = await this.$axios.get(url)
       const initial = {
         labels: [],
         is_active: true,
-        nodes: nodesInitial,
+        node: node_id,
         platform: parseInt(this.platform.id),
         protocols: []
       }

src/views/assets/Asset/AssetList/AllList.vue

@@ -46,6 +46,9 @@ export default {
         url: '/api/v1/assets/assets/',
         showMenu: !this.$store.getters.currentOrgIsRoot,
         showDefaultMenu: true,
+        async: {
+          enable: false
+        },
         menu: [
         ]
       },

src/views/assets/Cloud/Account/components/AssetPanel.vue

@@ -1,10 +1,6 @@
 <template>
   <div class="asset-panel">
-    <el-alert
-      :center="false"
-      :closable="true"
-      style="margin-bottom: 6px"
-    >
+    <el-alert :center="false" :closable="true" style="margin-bottom: 6px">
       <el-link :icon="linkIcon" :type="linkType" :underline="false"> {{ tip }}</el-link>
     </el-alert>
     <ImportTable
@@ -18,9 +14,8 @@
 </template>
 
 <script>
-
 import ImportTable from '@/components/Table/ListTable/TableAction/ImportTable'
-import _isequal from 'lodash.isequal'
+import _isequal from 'lodash/isEqual'
 
 export default {
   name: 'AssetPanel',
@@ -114,16 +109,19 @@ export default {
       const url = '/ws/xpack/cloud/'
       const wsURL = scheme + '://' + document.location.hostname + port + url
       this.ws = new WebSocket(wsURL)
-      this.ws.onopen = (e) => {
+      this.ws.onopen = e => {
         this.settings.disableImportBtn = true
-        this.ws.send(JSON.stringify({
-          action: 'sync_task', account_id: this.object.id
-        }))
+        this.ws.send(
+          JSON.stringify({
+            action: 'sync_task',
+            account_id: this.object.id
+          })
+        )
       }
       this.ws.onerror = () => {
         this.$message.error(this.$tc('ConnectWebSocketError'))
       }
-      this.ws.onmessage = (e) => {
+      this.ws.onmessage = e => {
         const data = JSON.parse(e.data)
         if (data.action === 'sync_region') {
           this.addRegion(data.region_id)
@@ -163,6 +161,5 @@ export default {
 <style lang="scss" scoped>
 .asset-panel {
   display: block;
-
 }
 </style>

src/views/assets/Platform/PlatformDetail/Detail.vue

@@ -143,7 +143,20 @@ export default {
             disabled: !this.canEdit
           },
           callbacks: Object.freeze({
-            click: () => {
+            click: async () => {
+              try {
+                await this.$confirm(
+                  this.$t('overwriteProtocolsAndPortsMsg'),
+                  this.$t('Confirm'),
+                  {
+                    confirmButtonText: this.$t('Confirm'),
+                    cancelButtonText: this.$t('Cancel'),
+                    type: 'warning'
+                  }
+                )
+              } catch (e) {
+                return
+              }
               const data = { platform_id: this.object.id }
               this.$axios.post(
                 '/api/v1/assets/assets/sync-platform-protocols/', data).then(res => {

src/views/assets/Zone/ZoneCreateUpdate.vue

@@ -25,10 +25,7 @@ export default {
           component: AssetSelect,
           el: {
             value: [],
-            baseUrl: '/api/v1/assets/assets/?gateway_enabled=true',
-            treeUrlQuery: {
-              gateway_enabled: true
-            },
+            baseUrl: '/api/v1/assets/assets/',
             canSelect: (row) => {
               return !row.platform?.name.startsWith('Gateway')
             }

src/views/assets/Zone/components/AddAssetDialog.vue

@@ -62,10 +62,7 @@ export default {
             type: 'select2',
             el: {
               value: [],
-              url: '/api/v1/assets/assets/?gateway_enabled=true',
-              treeUrlQuery: {
-                gateway_enabled: true
-              },
+              url: '/api/v1/assets/assets/',
               canSelect: (row) => {
                 return !row.platform?.name.startsWith('Gateway') && this.object.assets.map(item => item.id).indexOf(row.id) === -1
               }

src/views/assets/Zone/components/AddGatewayDialog.vue

@@ -65,7 +65,7 @@ export default {
               multiple: true,
               clearable: true,
               ajax: {
-                url: '/api/v1/assets/assets/?gateway_enabled=true&is_gateway=1'
+                url: '/api/v1/assets/assets/?is_gateway=1'
               },
               disabledValues: this.object.gateways.map(item => item.id)
             }

src/views/assets/const.js

@@ -148,9 +148,10 @@ export const assetFieldsMeta = (vm, category, type) => {
         return vm.platform.ds_enabled === false
       }
     },
-    nodes: {
+    node: {
       rules: [rules.RequiredChange],
       el: {
+        multiple: false,
         ajax: {
           url: '/api/v1/assets/nodes/',
           transformOption: item => {

src/views/login/index.vue

@@ -125,17 +125,21 @@ export default {
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 /* 修复input 背景不协调 和光标变色 */
 /* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
 
-$bg:#283443;
-$light_gray:#fff;
-$cursor: #fff;
+$input-bg: #283443;
+$input-light-gray: #fff;
+$input-cursor: #fff;
 
-@supports (-webkit-mask: none) and (not (cater-color: $cursor)) {
+$login-bg: #2d3a4b;
+$login-dark-gray: #889aa4;
+$login-light-gray: #eee;
+
+@supports (-webkit-mask: none) and (not (cater-color: $input-cursor)) {
   .login-container .el-input input {
-    color: $cursor;
+    color: $input-cursor;
   }
 }
 
@@ -147,17 +151,17 @@ $cursor: #fff;
 
     input {
       background: transparent;
-      border: 0px;
+      border: 0;
       -webkit-appearance: none;
-      border-radius: 0px;
+      border-radius: 0;
       padding: 12px 5px 12px 15px;
-      color: $light_gray;
+      color: $input-light-gray;
       height: 47px;
-      caret-color: $cursor;
+      caret-color: $input-cursor;
 
       &:-webkit-autofill {
-        box-shadow: 0 0 0px 1000px $bg inset !important;
-        -webkit-text-fill-color: $cursor !important;
+        box-shadow: 0 0 0 1000px $input-bg inset !important;
+        -webkit-text-fill-color: $input-cursor !important;
       }
     }
   }
@@ -169,17 +173,11 @@ $cursor: #fff;
     color: #454545;
   }
 }
-</style>
-
-<style lang="scss" scoped>
-$bg:#2d3a4b;
-$dark_gray:#889aa4;
-$light_gray:#eee;
 
 .login-container {
   min-height: 100%;
   width: 100%;
-  background-color: $bg;
+  background-color: $login-bg;
   overflow: hidden;
 
   .login-form {
@@ -205,7 +203,7 @@ $light_gray:#eee;
 
   .svg-container {
     padding: 6px 5px 6px 15px;
-    color: $dark_gray;
+    color: $login-dark-gray;
     vertical-align: middle;
     width: 30px;
     display: inline-block;
@@ -216,7 +214,7 @@ $light_gray:#eee;
 
     .title {
       font-size: 26px;
-      color: $light_gray;
+      color: $login-light-gray;
       margin: 0px auto 40px auto;
       text-align: center;
       font-weight: bold;
@@ -228,7 +226,7 @@ $light_gray:#eee;
     right: 10px;
     top: 7px;
     font-size: 16px;
-    color: $dark_gray;
+    color: $login-dark-gray;
     cursor: pointer;
     user-select: none;
   }

src/views/ops/Adhoc/QuickJob.vue

@@ -1,6 +1,10 @@
 <template>
   <Page>
-    <AdhocOpenDialog v-if="showOpenAdhocDialog" :visible.sync="showOpenAdhocDialog" @select="onSelectAdhoc" />
+    <AdhocOpenDialog
+      v-if="showOpenAdhocDialog"
+      :visible.sync="showOpenAdhocDialog"
+      @select="onSelectAdhoc"
+    />
     <AdhocSaveDialog
       v-if="showOpenAdhocSaveDialog"
       :args="command"
@@ -20,38 +24,37 @@
       :assets="classifiedAssets"
       @submit="onConfirmRunAsset"
     />
-    <AssetTreeTable ref="TreeTable" :tree-setting="treeSetting">
-      <template slot="table">
-        <div class="transition-box" style="width: calc(100% - 17px);">
-          <CodeEditor
-            v-if="ready"
-            :options="cmOptions"
-            :toolbar="toolbar"
-            :value.sync="command"
-            style="margin-bottom: 20px"
+    <div class="job-container">
+      <div class="select-assets">
+        <SelectJobAssetDialog @change="handleSelectAssets" />
+      </div>
+      <div class="transition-box" style="width: calc(100% - 17px)">
+        <CodeEditor
+          v-if="ready"
+          :options="cmOptions"
+          :toolbar="toolbar"
+          :value.sync="command"
+          style="margin-bottom: 20px"
+        />
+        <span v-if="executionInfo.status" style="float: right" />
+        <div class="xterm-container">
+          <QuickJobTerm
+            ref="xterm"
+            :show-tool-bar="true"
+            :select-assets="selectAssets"
+            :xterm-config="xtermConfig"
+            :execution-info="executionInfo"
+            @view-assets="viewConfirmRunAssets"
           />
-          <span v-if="executionInfo.status" style="float: right" />
-          <div class="xterm-container">
-            <QuickJobTerm
-              ref="xterm"
-              :show-tool-bar="true"
-              :select-assets="selectAssets"
-              :xterm-config="xtermConfig"
-              :execution-info="executionInfo"
-              @view-assets="viewConfirmRunAssets"
-            />
-          </div>
-          <div style="display: flex;margin-top:10px;justify-content: space-between" />
         </div>
-      </template>
-    </AssetTreeTable>
+        <div style="display: flex; margin-top: 10px; justify-content: space-between" />
+      </div>
+    </div>
   </Page>
 </template>
 
 <script>
-import $ from '@/utils/jquery-vendor.js'
-import _isequal from 'lodash.isequal'
-import AssetTreeTable from '@/components/Apps/AssetTreeTable'
+import _isequal from 'lodash/isEqual'
 import QuickJobTerm from '@/views/ops/Adhoc/components/QuickJobTerm.vue'
 import CodeEditor from '@/components/Form/FormFields/CodeEditor'
 import Page from '@/layout/components/Page'
@@ -61,15 +64,16 @@ import VariableHelpDialog from './VariableHelpDialog.vue'
 import ConfirmRunAssetsDialog from './components/ConfirmRunAssetsDialog.vue'
 import SetVariableDialog from '@/views/ops/Template/components/SetVariableDialog.vue'
 import { createJob, getJob, getTaskDetail, stopJob } from '@/api/ops'
+import SelectJobAssetDialog from './components/SelectJobAssetDialog.vue'
 
 export default {
   name: 'CommandExecution',
   components: {
+    SelectJobAssetDialog,
     VariableHelpDialog,
     AdhocSaveDialog,
     AdhocOpenDialog,
     SetVariableDialog,
-    AssetTreeTable,
     Page,
     QuickJobTerm,
     CodeEditor,
@@ -91,7 +95,6 @@ export default {
       showOpenAdhocSaveDialog: false,
       showSetVariableDialog: false,
       showConfirmRunAssetsDialog: false,
-      DataZTree: 0,
       runas: '',
       runasPolicy: 'skip',
       chdir: '',
@@ -109,7 +112,7 @@ export default {
             align: 'left',
             icon: 'fa fa-play',
             tip: this.$t('RunCommand'),
-            isVisible: this.$store.getters.currentOrgIsRoot,
+            disabled: this.$store.getters.currentOrgIsRoot,
             el: {
               type: 'primary'
             },
@@ -141,7 +144,7 @@ export default {
             align: 'left',
             value: '',
             placeholder: this.$tc('EnterRunUser'),
-            // tip: this.$tc('RunasHelpText'),
+            tip: this.$tc('RunasHelpText'),
             el: {
               autoComplete: true,
               query: (query, cb) => {
@@ -152,20 +155,22 @@ export default {
                   return cb([])
                 }
                 cb([]) // 先返回空，避免输入时出现下拉闪烁
-                this.$axios.post('/api/v1/ops/username-hints/', {
-                  nodes: nodes,
-                  assets: hosts,
-                  query: query
-                }).then(data => {
-                  const ns = data.map(item => {
-                    return { value: item.username }
+                this.$axios
+                  .post('/api/v1/ops/username-hints/', {
+                    nodes: nodes,
+                    assets: hosts,
+                    query: query
+                  })
+                  .then(data => {
+                    const ns = data.map(item => {
+                      return { value: item.username }
+                    })
+                    cb(ns)
                   })
-                  cb(ns)
-                })
               }
             },
             options: [],
-            callback: (option) => {
+            callback: option => {
               this.runas = option
             }
           },
@@ -179,7 +184,8 @@ export default {
               {
                 label: this.$tc('Skip'),
                 value: 'skip'
-              }, {
+              },
+              {
                 label: this.$tc('PrivilegedFirst'),
                 value: 'privileged_first'
               },
@@ -188,7 +194,7 @@ export default {
                 value: 'privileged_only'
               }
             ],
-            callback: (option) => {
+            callback: option => {
               this.runasPolicy = option
             }
           },
@@ -199,31 +205,39 @@ export default {
             value: 'shell',
             options: [
               {
-                label: 'Shell', value: 'shell'
+                label: 'Shell',
+                value: 'shell'
               },
               {
-                label: 'Powershell', value: 'win_shell'
+                label: 'Powershell',
+                value: 'win_shell'
               },
               {
-                label: 'Raw', value: 'raw'
+                label: 'Raw',
+                value: 'raw'
               },
               {
-                label: 'Python', value: 'python'
+                label: 'Python',
+                value: 'python'
               },
               {
-                label: 'MySQL', value: 'mysql'
+                label: 'MySQL',
+                value: 'mysql'
               },
               {
-                label: 'PostgreSQL', value: 'postgresql'
+                label: 'PostgreSQL',
+                value: 'postgresql'
               },
               {
-                label: 'SQLServer', value: 'sqlserver'
+                label: 'SQLServer',
+                value: 'sqlserver'
               },
               {
-                label: 'CloudEngine', value: 'huawei'
+                label: 'CloudEngine',
+                value: 'huawei'
               }
             ],
-            callback: (option) => {
+            callback: option => {
               this.cmOptions.mode = option === 'win_shell' ? 'powershell' : option
               this.module = option
             }
@@ -240,7 +254,7 @@ export default {
               { label: '30', value: 30 },
               { label: '60', value: 60 }
             ],
-            callback: (option) => {
+            callback: option => {
               this.timeout = option
             }
           },
@@ -251,7 +265,7 @@ export default {
             value: '',
             placeholder: this.$tc('EnterRunningPath'),
             tip: this.$tc('RunningPathHelpText'),
-            callback: (val) => {
+            callback: val => {
               this.chdir = val
             }
           }
@@ -295,30 +309,6 @@ export default {
         lineWrapping: true,
         mode: 'shell'
       },
-      treeSetting: {
-        treeUrl: '/api/v1/perms/users/self/nodes/children-with-assets/tree/',
-        searchUrl: '/api/v1/perms/users/self/assets/tree/',
-        showRefresh: true,
-        showMenu: false,
-        showSearch: true,
-        notShowBuiltinTree: true,
-        check: {
-          enable: true
-        },
-        view: {
-          dblClickExpand: false,
-          showLine: true
-        },
-        callback: {
-          onCheck: function(_event, treeId, treeNode) {
-            const treeObj = $.fn.zTree.getZTreeObj(treeId)
-            if (treeNode.checked) {
-              treeObj.expandNode(treeNode, true, false, true)
-            }
-          }
-        }
-      },
-      iShowTree: true,
       variableFormData: [],
       variableQueryParam: '',
       classifiedAssets: {
@@ -328,6 +318,7 @@ export default {
       },
       selectAssets: [],
       selectNodes: [],
+      selectHosts: [],
       lastRequestPayload: null
     }
   },
@@ -335,9 +326,6 @@ export default {
     xterm() {
       return this.$refs.xterm.xterm
     },
-    ztree() {
-      return this.$refs.TreeTable.$refs.TreeList.$refs.AutoDataZTree.$refs.AutoDataZTree.$refs.dataztree.$refs.ztree
-    },
     isRunning() {
       return this.executionInfo.status.value === 'running'
     }
@@ -357,6 +345,9 @@ export default {
     async initData() {
       this.recoverStatus()
     },
+    handleSelectAssets(assets) {
+      this.selectHosts = assets
+    },
     recoverStatus() {
       if (this.$route.query.taskId) {
         this.currentTaskId = this.$route.query.taskId
@@ -380,7 +371,7 @@ export default {
       }
     },
     onSelectAdhoc(adhoc) {
-      this.variableFormData = adhoc?.variable.map((data) => {
+      this.variableFormData = adhoc?.variable.map(data => {
         return data.form_data
       })
       this.variableQueryParam = 'adhoc=' + adhoc.id
@@ -392,17 +383,20 @@ export default {
       const url = '/ws/ops/tasks/log/'
       const wsURL = scheme + '://' + document.location.hostname + port + url
       this.ws = new WebSocket(wsURL)
-      this.ws.onerror = (e) => {
+      this.ws.onerror = e => {
         this.xterm.write(this.wrapperError('Connect websocket server error'))
       }
       this.setWsCallback()
     },
     setWsCallback() {
-      this.ws.onmessage = (e) => {
+      this.ws.onmessage = e => {
         const data = JSON.parse(e.data)
         if (data.hasOwnProperty('message')) {
           let message = data.message
-          message = message.replace(/\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2} Task ops\.tasks\.run_ops_job_execution.*/, '')
+          message = message.replace(
+            /\d{4}-\d{2}-\d{2} \d{2}:\d{2}:\d{2} Task ops\.tasks\.run_ops_job_execution.*/,
+            ''
+          )
           this.xterm.write(message)
         }
         if (data.hasOwnProperty('event')) {
@@ -432,13 +426,6 @@ export default {
       msg = JSON.stringify({ task: this.currentTaskId })
       this.ws.send(msg)
     },
-    getSelectedNodes() {
-      return this.ztree.getCheckedNodes().filter(node => {
-        const status = node.getCheckStatus()
-        return node.id !== 'search' && status.half === false
-      })
-    },
-
     setCostTimeInterval() {
       this.toolbar.left.run.icon = 'fa fa-spinner fa-spin'
       this.toolbar.left.run.isVisible = true
@@ -448,17 +435,8 @@ export default {
     },
 
     getSelectedNodesAndHosts() {
-      const hosts = this.getSelectedNodes().filter((item) => {
-        return item.meta.type !== 'node'
-      }).map(function(node) {
-        return node.id
-      })
-
-      const nodes = this.getSelectedNodes().filter((item) => {
-        return item.meta.type === 'node'
-      }).map(function(node) {
-        return node.meta.data.id
-      })
+      const hosts = this.selectHosts
+      const nodes = []
       return { hosts, nodes }
     },
     shouldReRequest(payload) {
@@ -470,8 +448,7 @@ export default {
     execute() {
       // const size = 'rows=' + this.xterm.rows + '&cols=' + this.xterm.cols
       const { hosts, nodes } = this.getSelectedNodesAndHosts()
-
-      if (hosts.length === 0 && nodes.length === 0) {
+      if (this.selectHosts.length === 0) {
         this.$message.error(this.$tc('RequiredAssetOrNode'))
         return
       }
@@ -497,16 +474,18 @@ export default {
       }
 
       this.lastRequestPayload = { ...payload }
-      this.$axios.post('/api/v1/ops/classified-hosts/', {
-        ...payload
-      }).then(data => {
-        this.classifiedAssets = data
-        if (this.classifiedAssets.error.length === 0) {
-          this.onConfirmRunAsset(hosts, nodes)
-        } else {
-          this.showConfirmRunAssetsDialog = true
-        }
-      })
+      this.$axios
+        .post('/api/v1/ops/classified-hosts/', {
+          ...payload
+        })
+        .then(data => {
+          this.classifiedAssets = data
+          if (this.classifiedAssets.error.length === 0) {
+            this.onConfirmRunAsset(hosts, nodes)
+          } else {
+            this.showConfirmRunAssetsDialog = true
+          }
+        })
     },
     onConfirmRunAsset(assets, nodes) {
       const data = {
@@ -536,22 +515,30 @@ export default {
         this.setBtn()
         this.selectAssets = assets
         this.selectNodes = nodes
+      }).catch(() => {
+        this.lastRequestPayload = null
       })
     },
     viewConfirmRunAssets() {
       this.showConfirmRunAssetsDialog = true
     },
     stop() {
-      stopJob({ task_id: this.currentTaskId }).then(() => {
-        this.xterm.write('\x1b[31m' +
-          this.$tc('StopLogOutput').replace('currentTaskId', this.currentTaskId) + '\x1b[0m')
-        this.xterm.write(this.wrapperError(''))
-        this.getTaskStatus()
-      }).catch((e) => {
-        this.$log.error(e)
-      }).finally(() => {
-        this.setBtn()
-      })
+      stopJob({ task_id: this.currentTaskId })
+        .then(() => {
+          this.xterm.write(
+            '\x1b[31m' +
+            this.$tc('StopLogOutput').replace('currentTaskId', this.currentTaskId) +
+            '\x1b[0m'
+          )
+          this.xterm.write(this.wrapperError(''))
+          this.getTaskStatus()
+        })
+        .catch(e => {
+          this.$log.error(e)
+        })
+        .finally(() => {
+          this.setBtn()
+        })
     },
     setBtn() {
       if (!this.isRunning) {
@@ -572,6 +559,13 @@ export default {
 
 <style lang="scss" scoped>
 $container-bg-color: #f7f7f7;
+.job-container {
+  display: flex;
+
+  .select-assets {
+    width: 23.6%;
+  }
+}
 
 .transition-box {
   display: flex;
@@ -591,7 +585,7 @@ $container-bg-color: #f7f7f7;
 
       & ::v-deep .xterm {
         height: calc(100% - 8px);
-        overflow-y: auto;
+        overflow-y: hidden;
       }
     }
   }
@@ -604,55 +598,24 @@ $container-bg-color: #f7f7f7;
   padding: 5px 0;
   background-color: var(--color-primary);
   border-color: var(--color-primary);
-  color: #FFFFFF;
+  color: #ffffff;
   border-radius: 2px;
 }
 
-.el-tree {
-  background-color: inherit !important;
-}
-
 .mini {
   margin-right: 5px;
   width: 12px !important;
 }
 
-.auto-data-ztree {
-  overflow: auto;
-  /*border-right: solid 1px red;*/
-}
-
 .vue-codemirror-wrap ::v-deep .CodeMirror {
   width: 600px;
   height: 100px;
   border: 1px solid #eee;
 }
 
-.tree-box {
-  margin-right: 2px;
-  border: 1px solid #e0e0e0;
-
-  ::v-deep .ztree {
-    .level0 {
-      .node_name {
-        max-width: 100px;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        display: inline-block;
-      }
-    }
-  }
-}
-
 .output {
   padding-left: 30px;
   background-color: rgb(247 247 247);
-  border: solid 1px #f3f3f3;;
-}
-
-.tree-table-content {
-  ::v-deep .left {
-    padding-top: 4px;
-  }
+  border: solid 1px #f3f3f3;
 }
 </style>

src/views/ops/Adhoc/VariableHelpDialog.vue

@@ -67,28 +67,28 @@ export default {
 }
 </script>
 
-<style>
-.help-dialog.dialog .el-dialog__footer {
+<style lang="scss" scoped>
+::v-deep .help-dialog.dialog .el-dialog__footer {
   border-top: none;
   padding: 8px;
 }
-</style>
 
-<style lang="scss" scoped>
 .help-table {
   width: 100%;
   border-collapse: collapse;
   border: 1px solid #dee2e6;
+}
 
-  &::v-deep th, td {
-    height: 40px;
-    padding: 0 8px;
-    text-align: left;
-  }
+::v-deep .help-table th,
+::v-deep .help-table td {
+  height: 40px;
+  padding: 0 8px;
+  text-align: left;
+}
 
-  &::v-deep .item-td, .item-label {
-    cursor: pointer;
-    color: var(--color-primary);
-  }
+::v-deep .help-table .item-td,
+::v-deep .help-table .item-label {
+  cursor: pointer;
+  color: var(--color-primary);
 }
 </style>

src/views/ops/Adhoc/components/SelectJobAssetDialog.vue

@@ -0,0 +1,378 @@
+<template>
+  <div class="asset-select">
+    <el-card>
+      <div slot="header" class="clearfix">
+        <span>{{ $t('selectedAssets') }}({{ selectAssets.length }})</span>
+        <el-button
+          v-if="selectAssets.length > 0"
+          style="float: right; padding: 3px 0"
+          type="text"
+          @click="handleClick"
+        >
+          {{ $t('pleaseSelectAssets') }}
+        </el-button>
+      </div>
+      <div
+        v-if="selectAssets.length === 0"
+        class="empty-assets"
+        role="button"
+        tabindex="0"
+        aria-label="Select assets"
+        @click=" handleClick()"
+      >
+        <i class="icon el-icon-plus" />
+        <span class="title">{{ $t('pleaseSelectAssets') }}</span>
+        <span class="subtitle">{{ $t('clickToAdd') }}</span>
+      </div>
+      <div v-else class="asset-list">
+        <div
+          v-for="group in groupedAssets"
+          :key="group.key"
+          class="platform-group"
+        >
+          <div class="platform-group-header">
+            <el-checkbox
+              :indeterminate="isPlatformIndeterminate(group)"
+              :value="isPlatformAllSelected(group)"
+              @change="val => togglePlatformAll(group, val)"
+            >
+              <span class="platform-title">
+                <img
+                  v-if="group.assets.length"
+                  :src="getPlatformLogo(group.assets[0])"
+                  class="platform-icon"
+                >
+                {{ group.platformName }} ({{ group.assets.length }})
+              </span>
+            </el-checkbox>
+          </div>
+          <el-checkbox-group
+            v-model="selectAssets"
+            class="platform-group-assets"
+            @change="onCheckboxChange"
+          >
+            <el-checkbox
+              v-for="item in group.assets"
+              :key="item.id"
+              :label="item.id"
+            >
+              <span
+                :title="item.name"
+                class="asset-name"
+              >{{ item.name }}</span>
+              <i
+                class="el-icon-minus asset-remove-icon"
+                :title="$tc('Remove')"
+                @click.stop="removeAsset(item)"
+              />
+            </el-checkbox>
+          </el-checkbox-group>
+        </div>
+      </div>
+    </el-card>
+
+    <AssetSelectDialog
+      v-if="dialogVisible"
+      ref="dialog"
+      :base-node-url="baseNodeUrl"
+      :base-url="baseUrl"
+      :tree-setting="treeSetting"
+      :tree-url-query="treeUrlQuery"
+      :value="selectAssets"
+      :visible.sync="dialogVisible"
+      v-bind="$attrs"
+      @cancel="handleCancel"
+      @confirm="handleConfirm"
+      v-on="$listeners"
+    />
+  </div>
+</template>
+
+<script>
+import AssetSelectDialog from '@/components/Apps/AssetSelect/dialog.vue'
+import { loadPlatformIcon } from '@/utils/jms/index'
+
+export default {
+  componentName: 'SelectJobAssetDialog',
+  components: { AssetSelectDialog },
+  props: {
+    baseUrl: {
+      type: String,
+      default: '/api/v1/perms/users/self/assets/'
+    },
+    defaultPageSize: {
+      type: Number,
+      default: 10
+    },
+    baseNodeUrl: {
+      type: String,
+      default: '/api/v1/perms/users/self/nodes/'
+    },
+    treeUrlQuery: {
+      type: Object,
+      default: () => {
+      }
+    },
+    value: {
+      type: Array,
+      default: () => []
+    },
+    treeSetting: {
+      type: Object,
+      default: () => ({})
+    },
+    disabled: {
+      type: [Boolean, Function],
+      default: false
+    }
+  },
+  data() {
+    return {
+      dialogVisible: false,
+      selectAssetRows: [],
+      selectAssets: []
+    }
+  },
+  computed: {
+    groupedAssets() {
+      const map = {}
+      this.selectAssetRows.forEach(a => {
+        const key = a?.type?.value || 'unknown'
+        const name = a?.type?.label || a?.type?.value || 'Unknown'
+        if (!map[key]) {
+          map[key] = { key, platformName: name, assets: [] }
+        }
+        map[key].assets.push(a)
+      })
+      return Object.values(map)
+        .map(g => {
+          g.assets = g.assets.slice().sort((x, y) => (x.name || '').localeCompare(y.name || ''))
+          return g
+        })
+        .sort((a, b) => a.platformName.localeCompare(b.platformName))
+    }
+  },
+  methods: {
+    handleClick() {
+      this.dialogVisible = true
+    },
+    handleConfirm(valueSelected, rowsAdd) {
+      if (valueSelected === undefined) {
+        return
+      }
+      this.$emit('change', valueSelected)
+      rowsAdd.forEach(item => {
+        if (!this.selectAssetRows.find(i => i.id === item.id)) {
+          this.selectAssetRows.push(item)
+        }
+      })
+      // 移除已经取消选择的资产
+      this.selectAssetRows = this.selectAssetRows.filter(r => valueSelected.includes(r.id))
+      this.selectAssets = valueSelected
+      this.dialogVisible = false
+    },
+    handleCancel() {
+      this.dialogVisible = false
+    },
+    getPlatformLogo(platform) {
+      return loadPlatformIcon(platform.name, platform.type.value)
+    },
+    onCheckboxChange(value) {
+      this.selectAssets = value
+      this.$emit('change', value)
+    },
+    isPlatformAllSelected(group) {
+      return group.assets.length > 0 && group.assets.every(a => this.selectAssets.includes(a.id))
+    },
+    isPlatformIndeterminate(group) {
+      const selected = group.assets.filter(a => this.selectAssets.includes(a.id)).length
+      return selected > 0 && selected < group.assets.length
+    },
+    togglePlatformAll(group, checked) {
+      const ids = group.assets.map(a => a.id)
+      if (checked) {
+        const merged = new Set(this.selectAssets.concat(ids))
+        this.selectAssets = Array.from(merged)
+      } else {
+        this.selectAssets = this.selectAssets.filter(id => !ids.includes(id))
+      }
+      this.$emit('change', this.selectAssets)
+    },
+    removeAsset(asset) {
+      this.selectAssets = this.selectAssets.filter(id => id !== asset.id)
+      this.selectAssetRows = this.selectAssetRows.filter(r => r.id !== asset.id)
+      this.$emit('change', this.selectAssets)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.asset-select {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+  color: var(--color-border);
+
+  ::v-deep {
+    .el-card {
+      flex: 1;
+    }
+
+    .el-card__body {
+      height: calc(100vh - 200px);
+      overflow-y: auto;
+      overflow-x: hidden;
+      padding: 10px 16px;
+    }
+
+    .el-checkbox {
+      width: 100%;
+      display: flex;
+      padding: 3px 0;
+      margin-right: 0;
+      align-items: center;
+
+      .asset-remove-icon {
+        opacity: 0;
+        visibility: hidden;
+        cursor: pointer;
+        font-weight: normal;
+        transition: opacity .15s ease;
+        margin-left: auto;
+        color: var(--color-danger);
+      }
+
+      .el-checkbox__label {
+        width: 100%;
+        display: flex;
+        align-items: center;
+        gap: 3px;
+        padding-right: 20px;
+        padding-left: 3px;
+      }
+
+      .el-checkbox__label:hover .asset-remove-icon {
+        opacity: 1;
+        visibility: visible;
+      }
+    }
+  }
+
+  .asset-list {
+    margin: auto;
+  }
+
+  .asset-name {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 180px;
+  }
+
+  .platform-group {
+    margin-bottom: 8px;
+    padding: 6px 8px;
+  }
+
+  .platform-group-header {
+    padding-bottom: 4px;
+    margin-bottom: 4px;
+  }
+
+  .platform-title {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: #a2aabd;
+    font-weight: 800;
+    font-size: 12px;
+  }
+
+  .platform-icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .platform-group-assets {
+    padding-left: 15px;
+    margin-left: 3px;
+    border-left: 2px solid var(--color-border);
+  }
+
+  .select-asset-button {
+    position: relative;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%); /* 让中心点对齐 */
+  }
+
+}
+
+.el-select {
+  width: 100%;
+}
+
+.page ::v-deep .page-heading {
+  display: none;
+}
+
+.el-dialog__wrapper ::v-deep .el-dialog__body {
+  padding: 0 0 0 3px;
+}
+
+.empty-assets {
+  border: 2px dashed #d9d9d9;
+  border-radius: 6px;
+  padding: 56px 16px;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color .2s, background-color .25s, color .2s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: #909399;
+  height: 100%;
+  background: #fff;
+
+  .icon {
+    font-size: 42px;
+    line-height: 1;
+    margin-bottom: 14px;
+    color: #c0c4cc;
+    transition: color .2s;
+  }
+
+  .title {
+    font-size: 16px;
+    font-weight: 600;
+    margin-bottom: 6px;
+  }
+
+  .subtitle {
+    font-size: 12px;
+    opacity: .75;
+  }
+}
+
+.empty-assets:hover:not(.is-disabled) {
+  border-color: var(--color-primary);
+  background: #f5f9ff;
+  color: var(--color-primary);
+
+  .icon {
+    color: var(--color-primary);
+  }
+}
+
+.empty-assets.is-disabled {
+  cursor: not-allowed;
+  opacity: .55;
+  background: #fafafa;
+
+  .disabled-tip {
+    color: #c0c4cc;
+  }
+}
+</style>

src/views/ops/Execution/ExecutionDetail/JobExecutionDetail.vue

@@ -1,66 +1,72 @@
 <template>
   <TwoCol>
     <template>
-      <AutoDetailCard
-        :excludes="excludes"
-        :fields="detailFields"
-        :object="object"
-        :url="url"
-      />
+      <AutoDetailCard :excludes="excludes" :fields="detailFields" :object="object" :url="url" />
     </template>
     <template v-if="hasSummary" #right class="detail-right-quick-actions">
       <IBox
         v-if="object.summary.ok"
-        :title="`${$tc('SuccessAsset')} (${object.summary.ok.length})` "
+        :title="`${$tc('SuccessAsset')} (${object.summary.ok.length})`"
         type="success"
       >
         <el-collapse>
           <el-collapse-item
-            v-for="(item,index) in object.summary.ok"
+            v-for="(item, index) in object.summary.ok"
             :key="index"
             :name="index"
-            :title="item"
             disabled
-          />
+          >
+            <template #title>
+              <el-tooltip :content="item" placement="top" class="text-overflow">
+                <span>{{ item }}</span>
+              </el-tooltip>
+            </template>
+          </el-collapse-item>
         </el-collapse>
       </IBox>
       <IBox
         v-if="object.summary.excludes"
-        :title="`${$tc('ExcludeAsset')} (${Object.keys(object.summary.excludes).length})` "
+        :title="`${$tc('ExcludeAsset')} (${Object.keys(object.summary.excludes).length})`"
         type="warning"
       >
         <el-collapse>
           <el-collapse-item
-            v-for="(val,key,index) in object.summary.excludes"
+            v-for="(val, key, index) in object.summary.excludes"
             :key="index"
             :name="index"
-            :title="key"
           >
+            <template #title>
+              <el-tooltip :content="key" placement="top" class="text-overflow">
+                <span>{{ key }}</span>
+              </el-tooltip>
+            </template>
+
             <div>{{ $tc('Reason') }}: {{ val }}</div>
           </el-collapse-item>
         </el-collapse>
       </IBox>
       <IBox
         v-if="object.summary.failures"
-        :title="`${$tc('FailedAsset')} (${Object.keys(Object.assign(object.summary.failures,object.summary.dark)).length})` "
+        :title="`${$tc('FailedAsset')} (${Object.keys(Object.assign(object.summary.failures, object.summary.dark)).length})`"
         type="danger"
       >
         <el-collapse>
           <el-collapse-item
-            v-for="(val,key,index) in Object.assign(object.summary.failures,object.summary.dark)"
+            v-for="(val, key, index) in Object.assign(object.summary.failures, object.summary.dark)"
             :key="index"
             :name="index"
-            :title="key"
           >
+            <template #title>
+              <el-tooltip :content="key" placement="top" class="text-overflow">
+                <span>{{ key }}</span>
+              </el-tooltip>
+            </template>
+
             <div>{{ $tc('Reason') }}: {{ val }}</div>
           </el-collapse-item>
         </el-collapse>
       </IBox>
-      <IBox
-        v-if="object.summary.error"
-        :title="$tc('SystemError') "
-        type="danger"
-      >
+      <IBox v-if="object.summary.error" :title="$tc('SystemError')" type="danger">
         {{ object.summary.error }}
       </IBox>
     </template>
@@ -86,11 +92,10 @@ export default {
   },
   data() {
     return {
-      excludes: [
-        'job', 'parameters', 'summary', 'task_id', 'timedelta'
-      ],
+      excludes: ['job', 'parameters', 'summary', 'task_id', 'timedelta'],
       detailFields: [
-        'task_id', 'time_cost',
+        'task_id',
+        'time_cost',
         {
           key: this.$t('IsFinished'),
           value: this.object.is_finished ? this.$t('Yes') : this.$t('No')
@@ -99,8 +104,12 @@ export default {
           key: this.$t('IsSuccess'),
           value: this.object.is_success ? this.$t('Yes') : this.$t('No')
         },
-        'job_type', 'material', 'org_name',
-        'date_start', 'date_finished', 'date_created'
+        'job_type',
+        'material',
+        'org_name',
+        'date_start',
+        'date_finished',
+        'date_created'
       ],
       url: `/api/v1/ops/job-executions/${this.object.id}/`
     }

src/views/ops/File/index.vue

@@ -10,142 +10,148 @@
         {{ tip }}
       </span>
     </el-alert>
-
-    <AssetTreeTable ref="AssetTreeTable" :tree-setting="treeSetting">
-      <template slot="table">
-        <div class="transition-box" style="width: calc(100% - 17px);">
-          <div class="upload_input">
-            <el-button
-              :disabled="runButton.disabled"
-              :type="runButton.el&&runButton.el.type"
-              size="small"
-              style="display: inline-block; padding: 6px 10px"
-              @click="runButton.callback()"
-            >
-              <i :class="runButton.icon" style="margin-right: 4px;" />{{ runButton.name }}
-            </el-button>
-          </div>
-          <span style="color: red">*</span>
-          <div class="upload_input">{{ $t('Account') }}:</div>
-          <div class="upload_input">
-            <el-autocomplete
-              v-model="runAsInput.value"
-              :fetch-suggestions="runAsInput.el.query"
-              :placeholder="runAsInput.placeholder"
-              size="mini"
-              style="display: inline-block; margin: 0 2px"
-              @change="runAsInput.callback(runAsInput.value)"
-              @select="runAsInput.callback(runAsInput.value)"
-            />
-          </div>
-          <div class="upload_input">{{ $t('UploadDir') }}:</div>
-          <div class="upload_input">
-            <el-input
-              v-if="dstPathInput.type==='input'"
-              v-model="dstPath"
-              :placeholder="dstPathInput.placeholder"
-              size="mini"
-              @change="dstPathInput.callback(dstPathInput.value)"
-            >
-              <template slot="prepend">/tmp/</template>
-            </el-input>
-          </div>
-          <div
-            class="file-uploader"
+    <div class="job-container">
+      <div class="select-assets">
+        <SelectJobAssetDialog @change="handleSelectAssets" />
+      </div>
+      <div class="transition-box" style="width: calc(100% - 17px);">
+        <div class="upload_input">
+          <el-button
+            :disabled="runButton.disabled"
+            :type="runButton.el&&runButton.el.type"
+            size="small"
+            style="display: inline-block; padding: 6px 10px"
+            @click="runButton.callback()"
           >
-            <el-card>
-              <el-upload
-                v-if="ready"
-                ref="upload"
-                :auto-upload="false"
-                :on-change="onFileChange"
-                :value.sync="uploadFileList"
-                action=""
-                drag
-                multiple
-              >
-                <i class="el-icon-upload" />
-                <div class="el-upload__text" style="margin-bottom: 10px;padding: 0 5px 0 5px ">
-                  {{ $t('DragUploadFileInfo') }}
-                </div>
-                <span>
-                  {{ $t('UploadFileLthHelpText', {limit: SizeLimitMb}) }}
-                </span>
-                <div slot="file" slot-scope="{file}">
-                  <li class="el-upload-list__item is-ready" tabindex="0">
-                    <a :style="sameFileStyle(file)" class="el-upload-list__item-name">
-                      <i class="el-icon-document" />{{ file.name }}
-                      <i style="color: #1ab394;float: right;font-weight:normal">
-                        {{ formatFileSize(file.size) }}
-                        <i class="el-icon-close" @click="removeFile(file)" />
-                      </i>
-                    </a>
-                  </li>
-                </div>
-                <div
-                  v-if="uploadFileList.length === 0"
-                  slot="tip"
-                  class="empty-file-tip"
-                >
-                  {{ $tc('NoFiles') }}
-                </div>
-              </el-upload>
-              <el-progress
-                v-if="showProgress"
-                :percentage="progressLength"
-              />
-              <div v-if="showProgress" class="status-info">
-                <span class="left">{{ speedText }}</span>
-                <span class="right">{{ loadedSize }} / {{ totalSize }}</span>
+            <i :class="runButton.icon" style="margin-right: 4px;" />{{ runButton.name }}
+          </el-button>
+        </div>
+        <span style="color: red">*</span>
+        <div class="upload_input">{{ $t('Account') }}:</div>
+        <div class="upload_input">
+          <el-autocomplete
+            v-model="runAsInput.value"
+            :fetch-suggestions="runAsInput.el.query"
+            :placeholder="runAsInput.placeholder"
+            size="mini"
+            style="display: inline-block; margin: 0 2px"
+            @change="runAsInput.callback(runAsInput.value)"
+            @select="runAsInput.callback(runAsInput.value)"
+          />
+        </div>
+        <div class="upload_input">{{ $t('UploadDir') }}:</div>
+        <div class="upload_input">
+          <el-input
+            v-if="dstPathInput.type==='input'"
+            v-model="dstPath"
+            :placeholder="dstPathInput.placeholder"
+            size="mini"
+            @change="dstPathInput.callback(dstPathInput.value)"
+          >
+            <template slot="prepend">/tmp/</template>
+          </el-input>
+        </div>
+        <div
+          class="file-uploader"
+        >
+          <el-card>
+            <div class="file-uploader-header">
+              <span>{{ $t('selectFiles', {number: uploadFileList.length}) }}</span>
+              <el-tooltip v-if="uploadFileList.length > 0" :content="$t('ClearSelection')" placement="top">
+                <i class="el-icon-delete" @click="clearAllFiles" />
+              </el-tooltip>
+            </div>
+            <el-upload
+              v-if="ready"
+              ref="upload"
+              :auto-upload="false"
+              :on-change="onFileChange"
+              :value.sync="uploadFileList"
+              action=""
+              drag
+              multiple
+            >
+              <i class="el-icon-upload" />
+              <div class="el-upload__text" style="margin-bottom: 10px;padding: 0 5px 0 5px ">
+                {{ $t('DragUploadFileInfo') }}
               </div>
-            </el-card>
-          </div>
-          <div style="margin-bottom: 5px;font-weight: bold; display: inline-block">{{ $tc('Output') }}:</div>
-          <span v-if="executionInfo.status && summary && !showProgress" style="float: right">
-            <span>
-              <span><b>{{ $tc('Status') }}: </b></span>
-              <span
-                v-if="executionInfo.status==='timeout'"
-                class="status_warning"
-              >{{ $tc('Timeout') }}</span>
-              <span v-else>
-                <span class="status_success">{{ $tc('Success') + ': ' + summary.success }}</span>
-                <span class="status_warning">{{ $tc('Skip') + ': ' + summary.skip }}</span>
-                <span class="status_danger">{{ $tc('Failed') + ': ' + summary.failed }}</span>
+              <span>
+                {{ $t('UploadFileLthHelpText', {limit: sizeLimitMb}) }}
               </span>
-            </span>
-            <span>
-              <span><b>{{ $tc('TimeDelta') }}: </b></span>
-              <span>{{ executionInfo.timeCost }}</span>
+              <div slot="file" slot-scope="{file}">
+                <li class="el-upload-list__item is-ready" tabindex="0">
+                  <a :style="sameFileStyle(file)" class="el-upload-list__item-name">
+                    <i class="el-icon-document" />{{ file.name }}
+                    <i style="color: #1ab394;float: right;font-weight:normal">
+                      {{ formatFileSize(file.size) }}
+                      <i class="el-icon-close" @click="removeFile(file)" />
+                    </i>
+                  </a>
+                </li>
+              </div>
+              <div
+                v-if="uploadFileList.length === 0"
+                slot="tip"
+                class="empty-file-tip"
+              >
+                {{ $tc('NoFiles') }}
+              </div>
+            </el-upload>
+            <el-progress
+              v-if="showProgress"
+              :percentage="progressLength"
+            />
+            <div v-if="showProgress" class="status-info">
+              <span class="left">{{ speedText }}</span>
+              <span class="right">{{ loadedSize }} / {{ totalSize }}</span>
+            </div>
+          </el-card>
+        </div>
+        <div style="margin-bottom: 5px;font-weight: bold; display: inline-block">{{ $tc('Output') }}:</div>
+        <span v-if="executionInfo.status && summary && !showProgress" style="float: right">
+          <span>
+            <span><b>{{ $tc('Status') }}: </b></span>
+            <span
+              v-if="executionInfo.status==='timeout'"
+              class="status_warning"
+            >{{ $tc('Timeout') }}</span>
+            <span v-else>
+              <span class="status_success">{{ $tc('Success') + ': ' + summary.success }}</span>
+              <span class="status_warning">{{ $tc('Skip') + ': ' + summary.skip }}</span>
+              <span class="status_danger">{{ $tc('Failed') + ': ' + summary.failed }}</span>
             </span>
           </span>
-          <div class="output">
-            <Term
-              ref="xterm"
-              :show-tool-bar="true"
-              :xterm-config="xtermConfig"
-            />
-            <div style="height: 2px" />
-          </div>
-          <div style="display: flex; margin-top:10px; justify-content: space-between" />
+          <span>
+            <span><b>{{ $tc('TimeDelta') }}: </b></span>
+            <span>{{ executionInfo.timeCost }}</span>
+          </span>
+        </span>
+        <div class="output">
+          <Term
+            ref="xterm"
+            :show-tool-bar="true"
+            :xterm-config="xtermConfig"
+          />
+          <div style="height: 2px" />
         </div>
-      </template>
-    </AssetTreeTable>
+        <div style="display: flex; margin-top:10px; justify-content: space-between" />
+      </div>
+    </div>
   </Page>
 </template>
 
 <script>
-import AssetTreeTable from '@/components/Apps/AssetTreeTable'
 import Term from '@/components/Widgets/Term'
 import Page from '@/layout/components/Page'
 import { createJob, getTaskDetail, JobUploadFile } from '@/api/ops'
 import { formatFileSize } from '@/utils/common/index'
 import store from '@/store'
+import SelectJobAssetDialog from '@/views/ops/Adhoc/components/SelectJobAssetDialog.vue'
 
 export default {
   name: 'FileTransfer',
   components: {
-    AssetTreeTable,
+    SelectJobAssetDialog,
     Page,
     Term
   },
@@ -160,7 +166,6 @@ export default {
         cancel: 0
       },
       xtermConfig: {},
-      DataZTree: 0,
       runas: '',
       dstPath: '',
       runButton: {
@@ -215,27 +220,11 @@ export default {
           this.chdir = val
         }
       },
-      treeSetting: {
-        treeUrl: '/api/v1/perms/users/self/nodes/children-with-assets/tree/',
-        searchUrl: '/api/v1/perms/users/self/assets/tree/',
-        notShowBuiltinTree: true,
-        showRefresh: true,
-        showMenu: false,
-        showSearch: true,
-        check: {
-          enable: true
-        },
-        view: {
-          dblClickExpand: false,
-          showLine: true
-        }
-      },
-      iShowTree: true,
       progressLength: 0,
       showProgress: false,
       upload_interval: null,
       uploadFileList: [],
-      SizeLimitMb: store.getters.publicSettings['FILE_UPLOAD_SIZE_LIMIT_MB'],
+      sizeLimitMb: store.getters.publicSettings['FILE_UPLOAD_SIZE_LIMIT_MB'],
       summary: {
         'success': 0,
         'failed': 0,
@@ -248,15 +237,13 @@ export default {
       ],
       speedText: '',
       loadedSize: '',
-      totalSize: ''
+      totalSize: '',
+      selectHosts: []
     }
   },
   computed: {
     xterm() {
       return this.$refs.xterm.xterm
-    },
-    ztree() {
-      return this.$refs.AssetTreeTable.$refs.TreeList.$refs.AutoDataZTree.$refs.AutoDataZTree.$refs.dataztree.$refs.ztree
     }
   },
   mounted() {
@@ -323,13 +310,6 @@ export default {
       msg = JSON.stringify({ task: this.currentTaskId })
       this.ws.send(msg)
     },
-    getSelectedNodes() {
-      return this.ztree.getCheckedNodes().filter(node => {
-        const status = node.getCheckStatus()
-        return node.id !== 'search' && status.half === false
-      })
-    },
-
     setCostTimeInterval() {
       this.runButton.icon = 'fa fa-spinner fa-spin'
       this.runButton.disabled = true
@@ -338,17 +318,8 @@ export default {
       }, 1000)
     },
     getSelectedNodesAndHosts() {
-      const hosts = this.getSelectedNodes().filter((item) => {
-        return item.meta.type !== 'node'
-      }).map(function(node) {
-        return node.id
-      })
-
-      const nodes = this.getSelectedNodes().filter((item) => {
-        return item.meta.type === 'node'
-      }).map(function(node) {
-        return node.meta.data.id
-      })
+      const hosts = this.selectHosts
+      const nodes = []
       return { hosts, nodes }
     },
     truncateFileName(fullName) {
@@ -374,7 +345,7 @@ export default {
       return ''
     },
     isFileExceedsLimit(file) {
-      const isGtLimit = file.size / 1024 / 1024 > this.SizeLimitMb
+      const isGtLimit = file.size / 1024 / 1024 > this.sizeLimitMb
       if (isGtLimit) {
         this.$message.error(this.$tc('FileSizeExceedsLimit'))
       }
@@ -437,7 +408,6 @@ export default {
       createJob(data).then(res => {
         this.progressLength = 0
         this.executionInfo.timeCost = 0
-        this.showProgress = true
         this.speedText = ''
         const form = new FormData()
         const start = Date.now()
@@ -465,13 +435,13 @@ export default {
             }
           }
         }).then(res => {
+          this.showProgress = true
           this.executionInfo.status = 'running'
           this.currentTaskId = res.task_id
           this.xtermConfig = { taskId: this.currentTaskId, type: 'shortcut_cmd' }
           this.setCostTimeInterval()
           this.writeExecutionOutput()
-        }).catch((error) => {
-          this.$message.error(this.$tc('Error'), error)
+        }).catch(() => {
           this.execute_stop()
         })
       })
@@ -482,12 +452,31 @@ export default {
       this.runButton.disabled = false
       clearInterval(this.upload_interval)
       this.runButton.icon = 'fa fa-play'
+    },
+    handleSelectAssets(assets) {
+      this.selectHosts = assets
+    },
+    clearAllFiles() {
+      this.$refs.upload.clearFiles()
+      this.uploadFileList = []
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
+.job-container {
+  display: flex;
+
+  .select-assets {
+    width: 23.6%;
+  }
+}
+
+.transition-box {
+  margin-left: 30px;
+}
+
 .mini-button {
   width: 12px;
   float: right;
@@ -499,19 +488,11 @@ export default {
   border-radius: 2px;
 }
 
-.el-tree {
-  background-color: inherit !important;
-}
-
 .mini {
   margin-right: 5px;
   width: 12px !important;
 }
 
-.auto-data-ztree {
-  overflow: auto;
-}
-
 .vue-codemirror-wrap ::v-deep .CodeMirror {
   width: 600px;
   height: 100px;
@@ -522,11 +503,6 @@ export default {
   padding: 0 10px;
 }
 
-.tree-box {
-  margin-right: 2px;
-  border: 1px solid #e0e0e0;
-}
-
 .status_success {
   color: var(--color-primary);
 }
@@ -548,8 +524,15 @@ export default {
   margin: 10px 0;
   min-width: 925px;
 
+  .file-uploader-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 5px;
+  }
+
   ::v-deep .el-card__body {
-    > div:first-child {
+    > div:nth-child(2) {
       //不要影响到 el-progress
       display: flex;
       position: relative;

src/views/ops/Job/JobUpdateCreate.vue

@@ -224,11 +224,12 @@ export default {
           title: this.$t('ExecuteAfterSaving'),
           callback: (value, form, btn) => {
             form.value.run_after_save = true
-            const parameters = form.value.variable.reduce((acc, item) => {
-              acc[item.var_name] = item.default_value || ''
-              return acc
-            }, {})
-            form.value['parameters'] = parameters
+            if (form.value?.variable) {
+              form.value['parameters'] = form.value.variable.reduce((acc, item) => {
+                acc[item.var_name] = item.default_value || ''
+                return acc
+              }, {})
+            }
             this.submitForm(form, btn)
           }
         }

src/views/perms/AssetPermission/AssetPermissionCreateUpdate.vue

@@ -110,6 +110,8 @@ export default {
           type: 'input',
           component: AccountFormatter,
           el: {
+            enableExcludeAccounts: true,
+            enableNoneAccount: true,
             assets: [],
             nodes: []
           },

src/views/perms/AssetPermission/components/AccountFormatter.vue

@@ -3,7 +3,7 @@
     <el-form-item>
       <el-radio-group v-model="realRadioSelected" @input="handleRadioChanged">
         <el-radio
-          v-for="(i) in realChoices"
+          v-for="(i) in iRealChoices"
           :key="i.label"
           :disabled="i.disabled"
           :label="i.value"
@@ -125,6 +125,14 @@ export default {
       type: Boolean,
       default: true
     },
+    enableNoneAccount: {
+      type: Boolean,
+      default: false
+    },
+    enableExcludeAccounts: {
+      type: Boolean,
+      default: false
+    },
     addTemplateHelpText: {
       type: String,
       default() {
@@ -185,6 +193,18 @@ export default {
   computed: {
     virtualAccount() {
       return virtualAccount
+    },
+    iRealChoices: {
+      get() {
+        let choices = this.realChoices.slice()
+        if (!this.enableNoneAccount) {
+          choices = choices.filter(i => i.value !== NoneAccount)
+        }
+        if (!this.enableExcludeAccounts) {
+          choices = choices.filter(i => i.value !== ExcludeAccount)
+        }
+        return choices
+      }
     }
   },
   watch: {

src/views/perms/const.js

@@ -189,8 +189,7 @@ export const realChoices = [
   },
   {
     label: AccountLabelMapper[ExcludeAccount],
-    value: ExcludeAccount,
-    tip: i18n.t('ExcludeAccountTip')
+    value: ExcludeAccount
   },
   {
     label: AccountLabelMapper[NoneAccount],

src/views/profile/PasswordAndSSHKey/SSHKey/SSHKeyList.vue

@@ -20,7 +20,8 @@ export default {
         hasExport: false,
         hasImport: false,
         hasBulkDelete: false,
-        hasCreate: true
+        hasCreate: true,
+        canCreate: true
       },
       tableConfig: {
         hasSelection: true,
@@ -41,6 +42,12 @@ export default {
           date_created: {
             label: this.$t('DateCreated'),
             formatter: DateFormatter
+          },
+          actions: {
+            formatterArgs: {
+              canUpdate: true,
+              canClone: true
+            }
           }
         }
       }

src/views/profile/PasswordAndSSHKey/index.vue

@@ -32,6 +32,22 @@ export default {
       }
     }
   },
+  computed: {
+    passwordMenuDisabled() {
+      return this.$store.state.users.profile.source.value !== 'local'
+    }
+  },
+  watch: {
+    passwordMenuDisabled: {
+      immediate: true,
+      handler(disabled) {
+        this.config.submenu = this.getSubmenu()
+        if (disabled && this.config.activeMenu === 'Password') {
+          this.config.activeMenu = 'SSHKeyList'
+        }
+      }
+    }
+  },
   methods: {
     getSubmenu() {
       return [

src/views/profile/index.vue

@@ -237,7 +237,7 @@ export default {
           },
           callbacks: {
             click: function() {
-              this.$router.push({ name: 'SSHKeyList', query: { tab: 'SSHKey' } })
+              this.$router.push({ name: 'SSHKeyList', query: { tab: 'SSHKeyList' } })
             }.bind(this)
           }
         }

src/views/reports/base/RightAction.vue

@@ -65,7 +65,13 @@ export default {
       }
       const days = this.getDaysParam()
       this.$message.success(this.$t('EMailReport') + '...')
-      this.$axios.post(`/core/reports/send-mail/?chart=${this.name}&days=${days}`,).catch(error => {
+      this.$axios.post(`/core/reports/send-mail/?chart=${this.name}&days=${days}`,).then((res) => {
+        if (res.error) {
+          this.$message.error(res.error)
+        } else {
+          this.$message.success(res.message)
+        }
+      }).catch(error => {
         this.$message.error(this.$t('Failed') + ': ' + error.message)
       })
     },

src/views/settings/Applet/AppletHost/AppletHostList.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-alert type="success">
-      <span v-sanitize="$t('AppletHostSelectHelpMessage')" />
+      <span v-html="$t('AppletHostSelectHelpMessage')" />
     </el-alert>
     <DrawerListTable
       ref="table"