Merge pull request #5239 from jumpserver/dev

v4.10.10

Dockerfile

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

package.json

@@ -26,6 +26,7 @@
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
     "@fontsource/open-sans": "^5.0.24",
+    "@kangc/v-md-editor": "^1.7.12",
     "@traptitech/markdown-it-katex": "^3.6.0",
     "@ztree/ztree_v3": "3.5.44",
     "axios": "0.28.0",

src/api/ops.js

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

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

@@ -109,11 +109,6 @@ export default {
           },
           connectivity: connectivityMeta,
           comment: { ...this.comment }
-        },
-        tableAttrs: {
-          rowClassName({ row }) {
-            return !row.is_active ? 'row_disabled' : ''
-          }
         }
       },
       headerActions: {

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

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

src/components/Common/DataActions/index.vue

@@ -5,7 +5,7 @@
         v-if="action.dropdown"
         v-show="action.dropdown.length > 0"
         :key="action.name"
-        :class="[action.name, {grouped: action.grouped }]"
+        :class="[action.name, { grouped: action.grouped }]"
         :size="action.size"
         :split-button="!!action.split"
         :type="action.type"
@@ -23,7 +23,7 @@
           :class="action.name"
           :size="size"
           class="more-action"
-          v-bind="{...cleanButtonAction(action), icon: ''}"
+          v-bind="{ ...cleanButtonAction(action), icon: '' }"
         >
           <span class="pre-icon">
             <Icon v-if="action.icon" :icon="action.icon" />
@@ -32,13 +32,13 @@
             {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
           </span>
         </el-button>
-        <el-dropdown-menu slot="dropdown" style="overflow: auto;max-height: 60vh">
+        <el-dropdown-menu slot="dropdown" style="overflow: auto; max-height: 60vh">
           <template v-for="option in action.dropdown">
             <div
               v-if="option.group"
-              :key="'group:'+option.name"
+              :key="'group:' + option.name"
               class="dropdown-menu-title"
-              style="width:130px"
+              style="width: 130px"
             >
               {{ option.group }}
             </div>
@@ -54,7 +54,7 @@
                 :command="[option, action]"
                 :title="option.tip"
                 class="dropdown-item"
-                v-bind="{...option, icon: ''}"
+                v-bind="{ ...option, icon: '' }"
               >
                 <span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
                   <Icon v-if="option.icon" :icon="option.icon" />
@@ -69,10 +69,10 @@
       <el-button
         v-else
         :key="action.name"
-        :class="[action.name, {grouped: action.grouped }]"
+        :class="[action.name, { grouped: action.grouped }]"
         :size="size"
         class="action-item"
-        v-bind="{...cleanButtonAction(action), icon: ''}"
+        v-bind="{ ...cleanButtonAction(action), icon: '' }"
         @click="handleClick(action)"
       >
         <el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
@@ -228,9 +228,9 @@ export default {
 
 <style lang="scss" scoped>
 $btn-text-color: #ffffff;
-$color-btn-background: #E8F7F4;
-$color-btn-focus-background: #83CBBA;
-$color-divided: #E4E7ED;
+$color-btn-background: #e8f7f4;
+$color-btn-focus-background: #83cbba;
+$color-divided: #e4e7ed;
 $color-drop-menu-title: #909399;
 $color-drop-menu-border: #e4e7ed;
 
@@ -284,6 +284,8 @@ $color-drop-menu-border: #e4e7ed;
 
   .el-button {
     padding: 2px 5px;
+    line-height: 1.3;
+    font-size: 13px;
 
     &:not(.is-plain) {
       color: $btn-text-color;
@@ -319,7 +321,6 @@ $color-drop-menu-border: #e4e7ed;
 // 下拉 options
 .el-dropdown-menu {
   ::v-deep .more-batch-processing {
-
     &:hover {
       background-color: transparent !important;
     }

src/components/Dashboard/ColumnChart.vue

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

src/components/Dashboard/Echart.vue

@@ -34,18 +34,32 @@ export default {
     }
   },
   created() {
-    if (!window.totalCharts) {
-      window.totalCharts = 0
+    if (!window._echarts) {
+      window._echarts = {
+        total: new Set(),
+        finished: new Set()
+      }
+    }
+    // 唯一 id，避免重复计数
+    this._chartId = `chart_${Date.now()}_${Math.random().toString(36).slice(2)}`
+    window._echarts.total.add(this._chartId)
+  },
+  beforeDestroy() {
+    if (window._echarts) {
+      window._echarts.total.delete(this._chartId)
+      window._echarts.finished.delete(this._chartId)
+      // 可选：当没有图表时清理全局对象
+      if (window._echarts.total.size === 0) {
+        delete window._echarts
+        delete window.echartsFinished
+      }
     }
-    window.totalCharts++
   },
   methods: {
     onFinished() {
-      if (!window.finishedCharts) {
-        window.finishedCharts = 0
-      }
-      window.finishedCharts++
-      if (window.finishedCharts === window.totalCharts) {
+      if (!window._echarts) return
+      window._echarts.finished.add(this._chartId)
+      if (window._echarts.finished.size === window._echarts.total.size) {
         window.echartsFinished = true
       }
     }

src/components/Dashboard/LineChart.vue

@@ -1,11 +1,11 @@
 <template>
   <div>
-    <echarts
+    <Echart
       ref="echarts"
       :options="options"
       :autoresize="true"
       theme="light"
-      @finished="getDataUrl"
+      @finished="genSnapshot"
     />
   </div>
 </template>
@@ -14,9 +14,11 @@
 // eslint-disable-next-line no-unused-vars
 import * as echarts from 'echarts'
 import { mix } from '@/utils/theme/color'
+import Echart from '@/components/Dashboard/Echart.vue'
 
 export default {
   name: 'LoginMetric',
+  components: { Echart },
   props: {
     range: {
       type: String,
@@ -230,12 +232,26 @@ export default {
     }
   },
   mounted() {
-    setTimeout(() => {
-      this.getMetricData()
-    }, 1000)
-    const vm = this
-    window.onbeforeprint = function() {
-      vm.$refs.echarts.resize()
+    this.genSnapshot()
+    this._before = () => this.genSnapshot(true)
+    this._after = () => this.forceResize()
+    window.addEventListener('beforeprint', this._before)
+    window.addEventListener('afterprint', this._after)
+    // 兼容某些浏览器（Safari）触发 print 媒体切换
+    this._mql = window.matchMedia && window.matchMedia('print')
+    if (this._mql) {
+      const handler = e => (e.matches ? this._before() : this._after())
+      this._mql.addEventListener?.('change', handler)
+      this._mql.addListener?.(handler)
+      this._mql._handler = handler
+    }
+  },
+  beforeDestroy() {
+    window.removeEventListener('beforeprint', this._before)
+    window.removeEventListener('afterprint', this._after)
+    if (this._mql) {
+      this._mql.removeEventListener?.('change', this._mql._handler)
+      this._mql.removeListener?.(this._mql._handler)
     }
   },
   methods: {

src/components/Dashboard/ProgressChart.vue

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

src/components/Dashboard/RingChart.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <echarts
+    <Echart
       ref="echarts"
       :autoresize="true"
       :options="options"
@@ -13,12 +13,15 @@ import 'echarts/lib/chart/line'
 import 'echarts/lib/component/legend'
 
 import Decimal from 'decimal.js'
+import Echart from '@/components/Dashboard/Echart.vue'
 
 export default {
+  components: { Echart },
   props: {
     config: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   computed: {

src/components/Form/AutoDataForm/index.vue

@@ -5,6 +5,7 @@
       ref="dataForm"
       :fields="totalFields"
       :form="iForm"
+      :server-errors="serverErrors"
       v-bind="$attrs"
       v-on="$listeners"
     >
@@ -65,7 +66,8 @@ export default {
       totalFields: [],
       loading: true,
       groups: [],
-      errors: {}
+      errors: {},
+      serverErrors: {}
     }
   },
   computed: {
@@ -103,6 +105,8 @@ export default {
       this.generateColumns()
       this.$emit('afterGenerateColumns', this.totalFields)
       this.cleanFormValue()
+      // 初始化时清空错误
+      this.serverErrors = {}
       this.loading = false
     },
     generateColumns() {
@@ -139,15 +143,56 @@ export default {
     cleanFormValue() {
       this._cleanFormValue(this.iForm, this.remoteMeta)
     },
-    setFieldError(name, error) {
-      error = error.replace(/[。.]+$/, '')
-      const field = this.totalFields.find((v) => v.prop === name)
-      if (!field) {
-        return
+    _getElFormInstance() {
+      try {
+        return this.$refs?.dataForm?.$refs?.form?.$refs?.elForm || null
+      } catch (e) {
+        return null
       }
-      if (typeof error === 'string') {
-        field.el.errors = error
-        field.attrs.error = error
+    },
+    /**
+     * @description 仅清理 UI 的错误展示,不触发表单内容重建
+     */
+    clearAllFieldErrors() {
+      const elForm = this._getElFormInstance()
+      if (elForm && Array.isArray(elForm.fields)) {
+        elForm.fields.forEach((item) => {
+          item.validateMessage = ''
+          item.validateState = ''
+        })
+      }
+      // 不修改 totalFields/attrs，避免触发 content 重建导致输入丢失
+      this.serverErrors = {}
+    },
+    setFieldError(name, error) {
+      error = (error || '').toString().replace(/[。.]+$/, '')
+      const elForm = this._getElFormInstance()
+      if (elForm && Array.isArray(elForm.fields)) {
+        const item = elForm.fields.find(f => f.prop === name)
+        if (item) {
+          item.validateMessage = error
+          item.validateState = error ? 'error' : ''
+        }
+      }
+      // 不写入 totalFields，避免触发 innerContent 变化导致表单值被覆盖
+      this.$set(this.serverErrors, name, error)
+    },
+    setErrors(errors) {
+      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)
+        mapped[k] = String(msg || '')
+      })
+      this.serverErrors = mapped
+      const elForm = this._getElFormInstance()
+      if (elForm && Array.isArray(elForm.fields)) {
+        elForm.fields.forEach((item) => {
+          const msg = mapped[item.prop] || ''
+          item.validateMessage = msg
+          item.validateState = msg ? 'error' : ''
+        })
       }
     },
     groupHidden(group, i) {

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

@@ -6,6 +6,7 @@
     :prop="prop"
     :rules="_show && Array.isArray(data.rules) ? data.rules : []"
     v-bind="data.attrs"
+    :error="errorText"
   >
     <template v-if="data.label" #label>
       <span :title="data.label">
@@ -152,6 +153,10 @@ export default {
   props: {
     // eslint-disable-next-line vue/require-default-prop
     data: Object,
+    serverErrors: {
+      type: Object,
+      default: () => ({})
+    },
     prop: {
       type: String,
       default() {
@@ -189,6 +194,11 @@ export default {
     classes() {
       return 'el-form-item-' + this.data.prop + ' ' + (this.data.attrs?.class || '')
     },
+    errorText() {
+      const fromAttrs = this.data?.attrs?.error
+      const fromServer = this.serverErrors ? this.serverErrors[this.data.prop] : ''
+      return fromAttrs || fromServer || ''
+    },
     listeners() {
       const {
         data: {

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

@@ -6,6 +6,7 @@
         :is="item.type === GROUP ? 'render-form-group' : 'render-form-item'"
         :key="item.id"
         :data="item"
+        :server-errors="serverErrors"
         :disabled="disabled || item.disabled"
         :item-value="value[item.id]"
         :options="options[item.id]"
@@ -47,6 +48,10 @@ export default {
       type: Array,
       required: true
     },
+    serverErrors: {
+      type: Object,
+      default: () => ({})
+    },
     disabled: {
       type: Boolean,
       default: false

src/components/Form/DataForm/index.vue

@@ -11,6 +11,7 @@
       :label-width="labelWidth"
       :style="{ '--label-width': labelWidth }"
       v-bind="$attrs"
+      :server-errors="serverErrors"
       v-on="$listeners"
     >
       <!-- slot 透传 -->
@@ -55,7 +56,7 @@
 
         <el-button
           v-for="button in moreButtons"
-          v-show="!button.hidden"
+          v-show="!iHidden(button)"
           :key="button.title"
           :loading="button.loading"
           size="small"
@@ -121,6 +122,10 @@ export default {
       type: Boolean,
       default: true
     },
+    serverErrors: {
+      type: Object,
+      default: () => ({})
+    },
     fields: {
       type: Array,
       default: () => []
@@ -226,6 +231,9 @@ export default {
     },
     getFormValue() {
       return this.$refs.form.getFormValue()
+    },
+    iHidden(item) {
+      return typeof item.hidden === 'function' ? item.hidden() : item.hidden
     }
   }
 }

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/Form/FormFields/NestedObjectSelect2.vue

@@ -19,7 +19,7 @@ export default {
   props: {
     value: {
       type: [Array, String, Number, Boolean, Object],
-      default: () => ([])
+      default: () => []
     },
     multiple: {
       type: Boolean,
@@ -36,7 +36,7 @@ export default {
   },
   computed: {
     attrsWithoutValue() {
-      const attrs = Object.assign({}, this.$attrs)
+      const attrs = Object.assign({ clearable: this.clearable }, this.$attrs)
       delete attrs.value
       return attrs
     },
@@ -50,6 +50,13 @@ export default {
         const value = this.objectsToValues(this.value)
         return value
       }
+    },
+    clearable() {
+      if (this.$attrs.clearable === undefined) {
+        return this.multiple
+      } else {
+        return this.$attrs.clearable
+      }
     }
   },
   methods: {
@@ -71,8 +78,11 @@ export default {
       value = value.map(v => {
         // uuid v4
         const uuid = /^[0-9A-F]{8}-[0-9A-F]{4}-[4][0-9A-F]{3}-[89AB][0-9A-F]{3}-[0-9A-F]{12}$/i
-        return typeof v === 'object' ? v
-          : this.$attrs?.allowCreate && !uuid.test(v) ? { [this.customLabelKeyName]: v } : { pk: v }
+        return typeof v === 'object'
+          ? v
+          : this.$attrs?.allowCreate && !uuid.test(v)
+            ? { [this.customLabelKeyName]: v }
+            : { pk: v }
       })
       if (!this.multiple) {
         value = value[0]
@@ -87,9 +97,13 @@ export default {
       if (!Array.isArray(val)) {
         val = [val]
       }
-      val = val.map((v) => {
+      val = val.map(v => {
         if (v && typeof v === 'object') {
-          return v.pk || v.id || (this.$attrs?.allowCreate ? (v?.[this.customLabelKeyName] + ':' + v?.value) : '')
+          return (
+            v.pk ||
+            v.id ||
+            (this.$attrs?.allowCreate ? v?.[this.customLabelKeyName] + ':' + v?.value : '')
+          )
         } else {
           return v
         }
@@ -103,6 +117,4 @@ export default {
 }
 </script>
 
-<style scoped>
-
-</style>
+<style scoped></style>

src/components/Form/FormFields/TagInput.vue

@@ -33,6 +33,9 @@
     >
       <i :class="[isCheckShowPassword ? 'fa-eye-slash' : 'fa-eye']" class="fa" />
     </span>
+    <span v-if="filterTags.length > 0" class="clear-icon" @click="handleClearAll">
+      <i class="el-icon-circle-close" :title="$t('Clear')" />
+    </span>
   </div>
 </template>
 
@@ -140,6 +143,11 @@ export default {
     },
     handleShowPassword() {
       this.isCheckShowPassword = !this.isCheckShowPassword
+    },
+    handleClearAll() {
+      this.filterTags = []
+      this.$emit('change', this.filterTags)
+      this.$emit('input', this.filterTags)
     }
   }
 }
@@ -161,7 +169,7 @@ export default {
   line-height: 30px;
 
   &:hover {
-    border-color: #C0C4CC;
+    border-color: #c0c4cc;
   }
 
   & ::v-deep .el-tag {
@@ -178,6 +186,7 @@ export default {
 
 .search-input {
   flex: 1;
+  min-width: 150px;
 
   & ::v-deep .el-input__inner {
     max-width: 100%;
@@ -205,4 +214,15 @@ export default {
     color: #999999;
   }
 }
+
+.clear-icon {
+  display: inherit;
+  padding-right: 6px;
+  cursor: pointer;
+  color: #c0c4cc;
+
+  &:hover {
+    color: #606164;
+  }
+}
 </style>

src/components/Table/TagSearch/index.vue

@@ -244,10 +244,12 @@ export default {
         delete routeFilter.search
       }
       const asFilterTags = _.cloneDeep(this.filterTags)
-      this.filterTags = {
-        ...asFilterTags,
-        ...routeFilter
-      }
+      setTimeout(() => {
+        this.filterTags = {
+          ...asFilterTags,
+          ...routeFilter
+        }
+      }, 100)
     },
     getValueLabel(key, value) {
       for (const field of this.options) {

src/components/Table/TreeTable/index.vue

@@ -8,7 +8,7 @@
         class="left"
       >
         <span v-if="component === 'AutoDataZTree'" class="title">
-          {{ $t('AssetTree') }}
+          {{ title }}
         </span>
         <component
           :is="component"
@@ -111,6 +111,13 @@ export default {
     headerActions: {
       type: Object,
       default: () => ({})
+    },
+    title: {
+      // eslint-disable-next-line vue/require-prop-type-constructor
+      type: String,
+      default() {
+        return this.$t('AssetTree')
+      }
     }
   },
   data() {

src/components/Widgets/Announcement/index.vue

@@ -1,20 +1,52 @@
 <template>
-  <el-alert
-    v-if="enabled && !isViewed()"
-    :center="false"
-    :title="title"
-    class="announcement"
-    type="success"
-    @close="onClose"
-  >
-    <MarkDown :value="announcement.content" class="markdown" />
-    <span v-if="announcement.link">
-      <el-link :href="announcement.link" class="link-more" target="_blank" type="info">
-        {{ $t('ViewMore') }}
-      </el-link>
-      <i class="fa fa-external-link icon" />
-    </span>
-  </el-alert>
+  <div>
+    <el-dialog
+      v-if="enabled && showModal"
+      :visible.sync="dialogVisible"
+      :title="title"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+      width="35%"
+      class="announcement-dialog"
+      center
+    >
+      <div class="announcement-content">
+        <div class="content-wrapper">
+          <MarkDown :value="announcement.content" class="markdown" />
+        </div>
+        <div v-if="announcement.link" class="link-section">
+          <el-link :href="announcement.link" class="link-more" target="_blank" type="info">
+            {{ $t('ViewMore') }}
+          </el-link>
+          <i class="fa fa-external-link icon" />
+        </div>
+      </div>
+
+      <div slot="footer" class="dialog-footer">
+        <el-button type="primary" @click="onModalConfirm">
+          {{ $t('Confirm') }}
+        </el-button>
+      </div>
+    </el-dialog>
+
+    <el-alert
+      v-if="enabled && showAlert"
+      :center="false"
+      :title="title"
+      class="announcement"
+      type="success"
+      @close="onAlertClose"
+    >
+      <MarkDown :value="announcement.content" class="markdown" />
+      <span v-if="announcement.link">
+        <el-link :href="announcement.link" class="link-more" target="_blank" type="info">
+          {{ $t('ViewMore') }}
+        </el-link>
+        <i class="fa fa-external-link icon" />
+      </span>
+    </el-alert>
+  </div>
 </template>
 
 <script>
@@ -26,7 +58,11 @@ export default {
   components: { MarkDown },
   data() {
     return {
-      viewedKey: 'AnnouncementViewed'
+      viewedKey: 'AnnouncementViewed',
+      modalConfirmedKey: 'AnnouncementModalConfirmed',
+      dialogVisible: false,
+      modalConfirmed: false,
+      alertViewed: false
     }
   },
   computed: {
@@ -58,48 +94,200 @@ export default {
       const start = new Date(this.announcement.date_start)
       const end = new Date(this.announcement.date_end)
       return now >= start && now <= end
+    },
+    showModal() {
+      return !this.modalConfirmed
+    },
+    showAlert() {
+      return this.modalConfirmed && !this.alertViewed
     }
   },
+  watch: {
+    enabled: {
+      handler(val) {
+        if (val) {
+          this.initializeState()
+          this.checkAndShowDialog()
+        }
+      },
+      immediate: true
+    }
+  },
+  mounted() {
+    this.initializeState()
+    this.checkAndShowDialog()
+  },
   methods: {
-    onClose() {
-      localStorage.setItem(this.viewedKey, this.announcement.id)
+    initializeState() {
+      this.modalConfirmed = this.isModalConfirmed()
+      this.alertViewed = this.isAlertViewed()
     },
-    isViewed() {
+    checkAndShowDialog() {
+      if (this.enabled && this.showModal) {
+        this.dialogVisible = true
+      }
+    },
+    onModalConfirm() {
+      localStorage.setItem(this.modalConfirmedKey, this.announcement.id)
+      this.modalConfirmed = true
+      this.dialogVisible = false
+
+      this.$emit('announcement-modal-confirmed', {
+        id: this.announcement.id,
+        subject: this.announcement.subject,
+        confirmedAt: new Date().toISOString()
+      })
+    },
+    onAlertClose() {
+      localStorage.setItem(this.viewedKey, this.announcement.id)
+      this.alertViewed = true
+
+      this.$emit('announcement-read', {
+        id: this.announcement.id,
+        subject: this.announcement.subject,
+        readAt: new Date().toISOString()
+      })
+    },
+    isModalConfirmed() {
+      const confirmedId = localStorage.getItem(this.modalConfirmedKey)
+      return confirmedId === this.announcement.id
+    },
+    isAlertViewed() {
       const viewedId = localStorage.getItem(this.viewedKey)
       return viewedId === this.announcement.id
+    },
+    isViewed() {
+      return this.isAlertViewed()
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.announcement ::v-deep .el-alert__content {
-  width: 100%;
+.announcement-dialog ::v-deep .el-dialog {
+  border-radius: 5px;
 }
 
-.announcement-main {
-  word-wrap: break-word;
-  white-space: pre-wrap;
+.announcement-dialog ::v-deep .el-dialog__wrapper {
+  backdrop-filter: blur(4px);
+}
+
+@media (max-width: 768px) {
+  .announcement-dialog ::v-deep .el-dialog {
+    width: 95% !important;
+    margin: 0 auto;
+  }
+
+  .announcement-content {
+    padding: 20px 25px 15px;
+
+    .content-wrapper {
+      padding: 15px;
+    }
+  }
+
+  .dialog-footer {
+    .el-button {
+      padding: 10px;
+      font-size: 14px;
+    }
+  }
+}
+
+.announcement-dialog ::v-deep .el-dialog__header {
+  border-radius: 8px 8px 0 0;
+  padding: 10px 20px 10px 20px;
+
+  .el-dialog__title {
+    color: black;
+    font-weight: 600;
+  }
+}
+
+.announcement-dialog ::v-deep .el-dialog__body {
+  padding: 0;
+}
+
+.announcement-content {
+  padding: 25px 30px 20px;
+
+  .link-section {
+    margin-top: 20px;
+    padding-top: 15px;
+    border-top: 1px solid #e4e7ed;
+    text-align: center;
+  }
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+
+  .el-button {
+    padding: 10px 20px;
+    font-size: 14px;
+  }
+}
+
+.announcement ::v-deep .el-alert__content {
+  width: 100%;
 }
 
 .icon {
   vertical-align: text-bottom;
   color: var(--color-info) !important;
+  margin-left: 5px;
 }
 
 .markdown {
   background-color: transparent !important;
+  font-size: 14px;
+  line-height: 1.8;
+  color: #2c3e50;
 
   .link-more {
-    font-size: 10px;
-    margin-left: 10px;
-    border-bottom: solid 1px;
-    color: var(--color-info) !important;
+    font-size: 13px;
+    color: #409eff !important;
+    text-decoration: none;
+    padding: 4px 8px;
+    border-radius: 4px;
+    background: rgba(64, 158, 255, 0.1);
+    transition: all 0.3s;
+
+    &:hover {
+      background: #409eff;
+      color: white !important;
+    }
   }
 
-  h1, h2, h3, h4, h5 {
-    margin-top: 0;
-    margin-bottom: 10px;
+  h1, h2, h3, h4, h5, h6 {
+    margin: 0 0 15px 0;
+    color: #303133;
+    font-weight: 600;
+    line-height: 1.4;
+  }
+
+  h1 {
+    font-size: 20px;
+  }
+
+  h2 {
+    font-size: 18px;
+  }
+
+  h3 {
+    font-size: 16px;
+  }
+
+  h4, h5, h6 {
+    font-size: 14px;
+  }
+
+  p {
+    margin-bottom: 16px;
+    line-height: 1.8;
+    color: #4b5563;
   }
 }
 </style>

src/components/index.js

@@ -37,3 +37,4 @@ export { default as Pagination } from './Table/Pagination'
 export { default as Tooltip } from './Widgets/Tooltip'
 export { default as ResourceActivity } from './Apps/ResourceActivity'
 export { default as MarkDown } from './Widgets/MarkDown'
+export { default as VariablesHelpTextDialog } from './Apps/VariablesHelpTextDialog'

src/i18n/langs/index.js

@@ -6,6 +6,7 @@ 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 en from './en.json'
@@ -39,6 +40,9 @@ const messages = {
   },
   ko: {
     ...koLocale
+  },
+  vi: {
+    ...viLocale
   }
 }
 

src/layout/components/GenericCreateUpdateForm/index.vue

@@ -225,24 +225,9 @@ export default {
       default(error, method, vm) {
         const response = error.response
         const data = response.data
-        if (response.status === 400) {
-          for (const key of Object.keys(data)) {
-            let err = ''
-            let errorTips = data[key]
-            if (errorTips instanceof Array) {
-              errorTips = _.filter(errorTips, (item) => Object.keys(item).length > 0)
-              for (const i of errorTips) {
-                if (i instanceof Object) {
-                  err += i?.port?.join(',')
-                } else {
-                  err += i
-                }
-              }
-            } else {
-              err = errorTips
-            }
-            this.$refs.form.setFieldError(key, err)
-          }
+        if (response.status === 400 && data && typeof data === 'object') {
+          // 覆盖式设置错误映射，避免触发表单内容重建
+          this.$refs.form.setErrors(data)
         }
         this.$emit('performError', data)
       }

src/layout/components/GenericUpdateFormDialog/index.vue

@@ -137,14 +137,15 @@ export default {
             this.$emit('submitError', error)
             const response = error.response
             const data = response.data
-            if (response.status === 400) {
-              for (const key of Object.keys(data)) {
-                let value = data[key]
-                if (value instanceof Array) {
-                  value = value.join(';')
-                }
-                this.$refs.form.setFieldError(key, value)
-              }
+            // 不要逐个设置字段的 attrs.error 或改动 fields 引用。
+            // 这样会触发表单 content 重建，导致用户已输入的内容被覆盖/清空，
+            // 且可能出现只能显示一个字段错误的现象。
+            // 这里改为使用 AutoDataForm 暴露的 setErrors(errors) 覆盖式设置：
+            // - 直接同步到 UI 的 el-form-item.validateMessage
+            // - 支持同时显示多个字段错误
+            // - 不修改 fields/attrs 引用，避免输入丢失
+            if (response.status === 400 && data && typeof data === 'object') {
+              this.$refs.form.setErrors(data)
             }
           })
         }

src/layout/components/NavHeader/AccountDropdown.vue

@@ -71,7 +71,7 @@ export default {
     },
     async logout() {
       const currentOrg = this.$store.getters.currentOrg
-      if (currentOrg.autoEnter || currentOrg.is_system) {
+      if (currentOrg && (currentOrg.autoEnter || currentOrg.is_system)) {
         await this.$store.dispatch('users/setCurrentOrg', this.$store.getters.preOrg)
       }
       window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`

src/layout/components/NavHeader/Search.vue

@@ -21,6 +21,7 @@
     <el-dialog
       :visible.sync="isOpen"
       :close-on-click-modal="true"
+      :close-on-press-escape="true"
       :append-to-body="true"
       custom-class="search-modal"
       width="70%"
@@ -46,16 +47,21 @@
           <div v-if="loading" class="section loading">{{ $t('Loading') }}...</div>
 
           <template v-if="showHistory">
-            <div class="section-title">{{ $t('History') }}</div>
+            <div class="section-title">
+              <span>{{ $t('History') }}</span>
+              <el-link class="clear-history-btn" @click="clearHistory">
+                {{ $t('Clear') }}
+              </el-link>
+            </div>
             <ul class="list">
               <li
-                v-for="(item, index) in filteredHistory"
+                v-for="(item, index) in history"
                 :key="'h-' + index"
                 class="item"
                 @click="applyHistory(item)"
               >
                 <i class="el-icon-time icon" />
-                <span class="label">{{ item.query }}</span>
+                <span class="label">{{ item.q }}</span>
                 <i class="el-icon-arrow-right go" />
               </li>
             </ul>
@@ -95,9 +101,23 @@
             </div>
           </template>
 
-          <div v-if="!loading && isEmpty" class="section empty">
+          <div v-if="search && isEmpty" class="section empty">
             {{ $t('NoData') }}
           </div>
+
+          <div v-if="!search && history.length === 0" class="section placeholder">
+            <div class="placeholder-content">
+              <div class="supported-types">
+                <div class="types-title">{{ $t('SupportedTypes') }}:</div>
+                <div class="types-list">
+                  <span v-for="(icon, type) in iconMap" :key="type" class="type-item">
+                    <Icon :icon="icon" class="type-icon" />
+                    {{ $t(type) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     </el-dialog>
@@ -105,9 +125,9 @@
 </template>
 
 <script>
-import { ObjectLocalStorage } from '@/utils/common'
-import { mapGetters } from 'vuex'
 import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import { ObjectLocalStorage } from '@/utils/common'
 import Icon from '@/components/Widgets/Icon/index.vue'
 
 export default {
@@ -131,7 +151,7 @@ export default {
         'UserGroup': 'user-group',
         'AssetPermission': 'permission'
       },
-      historyStore: new ObjectLocalStorage('global-search-history')
+      historyStore: new ObjectLocalStorage('globalSearchHistory')
     }
   },
   computed: {
@@ -139,14 +159,10 @@ export default {
       'viewRoutes'
     ]),
     isEmpty() {
-      return this.search && !this.routeSuggestions.length && this.options.length === 0
+      return !this.routeSuggestions.length && this.options.length === 0
     },
     showHistory() {
-      return this.history.length > 0 && !this.search && this.filteredHistory.length > 0
-    },
-    filteredHistory() {
-      if (!this.search) return this.history
-      return this.history.filter(h => h.query.toLowerCase().includes(this.search.toLowerCase()))
+      return this.history.length > 0 && !this.search
     },
     shortcutText() {
       return this.isMac ? '⌘K' : 'Ctrl+K'
@@ -218,6 +234,7 @@ export default {
         name: item.model + 'Detail',
         params: { id: item.id }
       }
+      this.addToHistory(this.search)
       this.$router.push(route)
       this.closePanel()
     },
@@ -261,26 +278,26 @@ export default {
       this.routes = flat
     },
     loadHistory() {
-      this.history = this.historyStore.get('list') || []
+      this.history = (this.historyStore.get('list') || []).filter(i => i.q)
     },
-    addToHistory(item) {
-      const entry = {
-        query: item.label || item.title || item.name,
-        url: item.url || item.path,
-        timestamp: Date.now()
-      }
+    addToHistory(q) {
+      const entry = { q: q }
       const list = this.historyStore.get('list') || []
       const next = [
         entry,
-        ...list.filter(i => i.query !== entry.query)
+        ...list.filter(i => i.q !== entry.q)
       ].slice(0, 10)
       this.historyStore.set('list', next)
       this.history = next
     },
     applyHistory(h) {
-      this.search = h.query
+      this.search = h.q
       this.onInput()
     },
+    clearHistory() {
+      this.historyStore.set('list', [])
+      this.history = []
+    },
     bindKeyboardShortcut() {
       document.addEventListener('keydown', this.handleKeyboardShortcut)
     },
@@ -416,7 +433,7 @@ body .v-modal {
 .search-input-wrapper {
   padding: 20px;
   border-bottom: 1px solid #f0f0f0;
-  background: #fff;
+  // background: #fff;
 
   .el-input {
     .el-input__inner {
@@ -460,8 +477,30 @@ body .v-modal {
   font-weight: 600;
   text-transform: uppercase;
   letter-spacing: 0.5px;
-  // background: #fafbfc;
   border-top: 1px solid #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  .clear-history-btn {
+    background: none;
+    border: none;
+    padding: 4px;
+    cursor: pointer;
+    border-radius: 4px;
+    transition: all 0.2s ease;
+    color: red;
+
+    &:hover {
+      background: #f5f5f5;
+      color: #f56c6c;
+    }
+
+    .clear-icon {
+      font-size: 14px;
+    color: red;
+    }
+  }
 }
 
 .list {
@@ -542,5 +581,53 @@ body .v-modal {
   text-align: center;
   font-size: 14px;
 }
+
+.section.placeholder {
+  padding: 32px 24px;
+
+  .placeholder-content {
+    text-align: center;
+
+    .supported-types {
+      margin-bottom: 24px;
+
+      .types-title {
+        margin-bottom: 12px;
+        font-size: 14px;
+        font-weight: 500;
+        color: #333;
+      }
+
+      .types-list {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: 16px;
+
+        .type-item {
+          display: flex;
+          align-items: center;
+          padding: 8px 12px;
+          background: #f8f9fa;
+          border-radius: 6px;
+          font-size: 13px;
+          color: #666;
+          transition: all 0.2s ease;
+
+          &:hover {
+            background: #e9ecef;
+            color: #333;
+          }
+
+          .type-icon {
+            margin-right: 6px;
+            font-size: 14px;
+            color: #409eff;
+          }
+        }
+      }
+    }
+  }
+}
 </style>
 

src/main.js

@@ -25,6 +25,7 @@ import xss from '@/utils/secure'
 import ElTableTooltipPatch from '@/utils/vue/elTableTooltipPatch.js'
 import VSanitize from 'v-sanitize'
 import moment from 'moment'
+
 moment.locale('zh-cn')
 
 /**
@@ -35,10 +36,11 @@ moment.locale('zh-cn')
  * Currently MockJs will be used in the production environment,
  * please remove it before going online ! ! !
  */
-if (process.env.NODE_ENV === 'development') {
-  const { mockXHR } = require('../mock')
-  mockXHR()
-}
+// 使用 mockXHR 无法使用 axios 中的 onUploadProgress 回调函数
+// if (process.env.NODE_ENV === 'development') {
+//   const { mockXHR } = require('../mock')
+//   mockXHR()
+// }
 
 // set ElementUI lang to EN
 ElementUI.Tooltip.props.openDelay.default = 1000

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/router/reports/dashboard.js

@@ -28,7 +28,7 @@ export default [
     component: () => import('@/views/reports/audits/Dashboard.vue'), // Parent router-view
     name: 'AuditsReport',
     meta: {
-      permissions: ['rbac.view_audits'],
+      permissions: ['rbac.view_audit'],
       expanded: true,
       icon: 'user-o',
       title: i18n.t('AuditsReport')

src/styles/index.scss

@@ -739,3 +739,7 @@ div.el-loading-parent--relative {
 .margin-top-20 {
   margin-top: 20px;
 }
+
+.el-message {
+  z-index: 999999 !important;
+}

src/utils/vue/elTableTooltipPatch.js

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

src/utils/vue/message.js

@@ -1,11 +1,18 @@
-// 重置message，防止重复点击重复弹出message弹框
 import { Message as elMessage } from 'element-ui'
 import { toSentenceCase } from '@/utils/common/index'
 
 let messageDom = null
+const DEFAULT_Z_INDEX = 20000
+
 const message = options => {
-  // 判断弹窗是否已存在, 若存在则关闭
   if (messageDom) messageDom.close()
+
+  if (typeof options === 'string') {
+    options = { message: options }
+  }
+
+  options.zIndex = options.zIndex || DEFAULT_Z_INDEX
+
   messageDom = elMessage(options)
 }
 

src/views/accounts/AccountChangeSecret/AccountChangeSecretCreateUpdate.vue

@@ -107,6 +107,10 @@ export default {
           data.secret = data[secretType]
           delete data[secretType]
         }
+
+        if (data.ssh_key_change_strategy === 'add') {
+          data.ssh_key_change_strategy = this.initial.ssh_key_change_strategy
+        }
         return data
       }
     }

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

@@ -117,6 +117,10 @@ export default {
           data.secret = data[secretType]
           delete data[secretType]
         }
+
+        if (data.ssh_key_change_strategy === 'add') {
+          data.ssh_key_change_strategy = this.initial.ssh_key_change_strategy
+        }
         return data
       }
     }

src/views/accounts/RiskDetect/RiskHandlerFormatter/const.js

@@ -1,4 +1,5 @@
 import i18n from '@/i18n/i18n'
+
 const accountExistCache = new Map()
 
 async function checkAccountExist(username, asset) {
@@ -8,9 +9,10 @@ async function checkAccountExist(username, asset) {
   }
   const url = `/api/v1/accounts/accounts/?username=${encodeURIComponent(username)}&asset=${asset}`
   const data = await this.$axios.get(url)
-  const result = data.length > 0
-  accountExistCache.set(cacheKey, result)
-  return result
+  const results = data
+  const isExist = results.length > 0
+  accountExistCache.set(cacheKey, isExist)
+  return isExist
 }
 
 async function checkAccountsExist() {

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/ConnectMethodACL/ConnectMethodAclCreateUpdate.vue

@@ -18,16 +18,13 @@ export default {
     return {
       initial: {},
       fields: [
-        [this.$t('Basic'), ['name', 'priority']],
+        [this.$t('Basic'), ['name']],
         [this.$t('Users'), ['users']],
         [this.$t('ConnectMethod'), ['connect_methods']],
         [this.$t('Action'), ['action', 'reviewers']],
         [this.$t('Other'), ['is_active', 'comment']]
       ],
       fieldsMeta: {
-        priority: {
-          rules: [rules.Required]
-        },
         assets: assetJSONSelectMeta(this),
         users: userJSONSelectMeta(this, true),
         connect_methods: {

src/views/acls/ConnectMethodACL/ConnectMethodAclDetail/Detail.vue

@@ -34,7 +34,7 @@ export default {
           key: this.$t('Reviewer'),
           value: this.object.reviewers.map(item => item.name).join(', ')
         },
-        'priority', 'date_created', 'created_by', 'comment'
+        'date_created', 'created_by', 'comment'
       ]
     }
   },

src/views/acls/ConnectMethodACL/ConnectMethodAclList.vue

@@ -17,8 +17,31 @@ export default {
         columnsShow: {
           min: ['name', 'actions'],
           default: [
-            'name', 'priority', 'is_active', 'comment', 'actions'
+            'name', 'is_active', 'comment', 'actions'
           ]
+        },
+        columnsMeta: {
+          'connect_methods': {
+            width: '240px',
+            formatter: (row) => {
+              const methods = Array.isArray(row.connect_methods) ? row.connect_methods : []
+              const colors = ['success', 'warning', 'info', 'danger']
+
+              return (
+                <div style='display: flex; flex-wrap: wrap; gap: 4px;'>
+                  {methods.map((item, idx) => (
+                    <el-tag
+                      key={idx}
+                      size='small'
+                      type={colors[idx % colors.length]}
+                    >
+                      {item}
+                    </el-tag>
+                  ))}
+                </div>
+              )
+            }
+          }
         }
       },
       headerActions: {

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

@@ -86,6 +86,8 @@ export default {
           component: UploadKey
         }
       }
+
+      fieldsMeta['db_name']['rules'] = []
       if (['mongodb', 'postgresql'].indexOf(platform) !== -1) {
         fieldsMeta['db_name']['rules'] = [rules.Required]
       }

src/views/assets/Platform/AutomationParamsSetting.vue

@@ -32,9 +32,7 @@
 <script>
 import Dialog from '@/components/Dialog'
 import AutoDataForm from '@/components/Form/AutoDataForm'
-import Select2 from '@/components/Form/FormFields/Select2'
 import { DynamicInput, Switcher } from '@/components/Form/FormFields'
-import DynamicWebParams from '@/views/assets/Platform/components/DynamicWebParams.vue'
 
 export default {
   components: {
@@ -102,21 +100,6 @@ export default {
           commands: {
             helpTextAsTip: false
           }
-        },
-        'website_ping': {
-          steps: {
-            component: DynamicWebParams
-          }
-        },
-        'change_account_website': {
-          steps: {
-            component: DynamicWebParams
-          }
-        },
-        'verify_account_website': {
-          steps: {
-            component: DynamicWebParams
-          }
         }
       }
     }
@@ -166,13 +149,6 @@ export default {
           let component = 'el-input'
           const el = {}
           switch (v?.type) {
-            case 'choice':
-              component = Select2
-              el['multiple'] = false
-              el['clearable'] = false
-              el['value'] = v.default
-              el['options'] = v.choices
-              break
             case 'list':
               component = DynamicInput
               break

src/views/assets/Platform/components/DynamicWebParams.vue

@@ -1,390 +0,0 @@
-<template>
-  <div class="dynamic-form-list">
-    <div class="form-items-container">
-      <transition-group name="form-item" tag="div" class="form-items">
-        <div
-          v-for="(item, index) in formItems"
-          :key="item.id"
-          class="form-item"
-        >
-          <div class="form-field main-selector">
-            <label class="field-label">{{ $tc('Action') }}</label>
-            <Select2
-              v-model="item.action"
-              :options="actionOptions"
-              :multiple="false"
-              :clearable="false"
-              @change="onActionChange(index)"
-            />
-          </div>
-          <div class="conditional-fields">
-            <template v-if="item.action === 'click' || item.action === 'iframe' || item.action === 'input'">
-              <div class="form-field">
-                <label class="field-label">{{ $tc('Selector') }}</label>
-                <el-input
-                  v-model="item.config.selector"
-                  :placeholder="$tc('SelectorPlaceholder')"
-                  @input="onFieldChange(index)"
-                />
-              </div>
-            </template>
-
-            <template v-if="item.action === 'sleep'">
-              <div class="form-field">
-                <label class="field-label">{{ $tc('Sleep') }}</label>
-                <el-input
-                  v-model="item.config.value"
-                  type="number"
-                  :min="0"
-                  @input="onFieldChange(index)"
-                >
-                  <template slot="append">s</template>
-                </el-input>
-              </div>
-            </template>
-
-            <template v-if="item.action === 'input'">
-              <div class="form-field">
-                <label class="field-label">{{ $tc('Value') }}</label>
-                <Select2
-                  v-model="item.config.value"
-                  :options="valueOptions"
-                  :multiple="false"
-                  :clearable="false"
-                  :allow-create="true"
-                  @change="onFieldChange(index)"
-                />
-              </div>
-            </template>
-
-            <template v-if="item.action === 'check'">
-              <div class="form-field">
-                <label class="field-label">{{ $tc('Check') }}</label>
-                <Select2
-                  v-model="item.config.type"
-                  :options="checkTypeOptions"
-                  :multiple="false"
-                  :clearable="false"
-                  @change="onCheckTypeChange(index)"
-                />
-              </div>
-              <div v-if="item.config && item.config.type" class="form-field">
-                <label class="field-label">
-                  {{ getCheckFieldLabel(item.config.type) }}
-                </label>
-                <el-input
-                  v-if="item.config.type === 'wait_for_url'"
-                  v-model="item.config.url"
-                  :placeholder="$tc('Address')"
-                  @input="onFieldChange"
-                />
-                <el-input
-                  v-else-if="item.config.type === 'wait_for_selector'"
-                  v-model="item.config.selector"
-                  :placeholder="$tc('SelectorPlaceholder')"
-                  @input="onFieldChange"
-                />
-                <div
-                  v-else-if="item.config.type === 'check_response'"
-                  class="response-check-form"
-                >
-                  <div class="url-row">
-                    <label class="field-label">{{ $tc('URL') }}</label>
-                    <el-input
-                      v-model="item.config.url"
-                      :placeholder="$tc('Address')"
-                      @input="onFieldChange"
-                    />
-                  </div>
-                  <div class="method-status-row">
-                    <div class="field-group">
-                      <label class="field-label">{{ $tc('Method') }}</label>
-                      <Select2
-                        v-model="item.config.method"
-                        :options="checkMethodOptions"
-                        :multiple="false"
-                        :clearable="false"
-                        @change="onFieldChange"
-                      />
-                    </div>
-                    <div class="field-group">
-                      <label class="field-label">{{ $tc('StatusCode') }}</label>
-                      <el-input
-                        v-model="item.config.status"
-                        type="number"
-                        :placeholder="$tc('StatusCode')"
-                        @input="onFieldChange"
-                      />
-                    </div>
-                  </div>
-                  <div class="url-row">
-                    <el-tooltip
-                      :open-delay="500"
-                      :tabindex="-1"
-                      placement="top"
-                      effect="dark"
-                    >
-                      <div slot="content" v-sanitize="$t('ResponseExpressionTip')" class="help-tip-content" />
-                      <label class="field-label" for="response-expression-input">
-                        {{ $tc('ResponseExpression') }}
-                        <i class="fa fa-question-circle-o help-tip-icon" />
-                      </label>
-                    </el-tooltip>
-                    <el-input
-                      id="response-expression-input"
-                      v-model="item.config.body_expr"
-                      :placeholder="$tc('ResponseExpression')"
-                      @input="onFieldChange"
-                    />
-                  </div>
-                </div>
-              </div>
-            </template>
-          </div>
-          <div class="form-actions">
-            <el-button
-              type="primary"
-              icon="el-icon-plus"
-              style="flex-shrink: 0;"
-              @click="addItem(index)"
-            />
-            <el-button
-              type="danger"
-              icon="el-icon-minus"
-              :disabled="formItems.length <= 1"
-              @click="deleteItem(index)"
-            />
-          </div>
-        </div>
-      </transition-group>
-    </div>
-  </div>
-</template>
-
-<script>
-import Select2 from '@/components/Form/FormFields/Select2'
-
-export default {
-  name: 'DynamicFormList',
-  components: {
-    Select2
-  },
-  props: {
-    value: {
-      type: Array,
-      default: () => []
-    }
-  },
-  data() {
-    return {
-      actionOptions: [
-        { label: this.$t('Click'), value: 'click' },
-        { label: this.$t('Input'), value: 'input' },
-        { label: this.$t('Check'), value: 'check' },
-        { label: this.$t('iframe'), value: 'iframe' },
-        { label: this.$t('Sleep'), value: 'sleep' }
-      ],
-      valueOptions: [
-        { label: this.$t('LoginUsername'), value: 'login_username' },
-        { label: this.$t('LoginPasswordSetting'), value: 'login_password' },
-        { label: this.$t('Username'), value: 'username' },
-        { label: this.$t('NewPassword'), value: 'password' }
-      ],
-      checkTypeOptions: [
-        { label: this.$t('WaitForURL'), value: 'wait_for_url' },
-        { label: this.$t('WaitForSelector'), value: 'wait_for_selector' },
-        { label: this.$t('CheckResponse'), value: 'check_response' }
-      ],
-      checkMethodOptions: [
-        { label: 'GET', value: 'get' },
-        { label: 'POST', value: 'post' },
-        { label: 'PUT', value: 'put' },
-        { label: 'DELETE', value: 'delete' }
-      ],
-      formItems: []
-    }
-  },
-  mounted() {
-    this.syncFromParent()
-  },
-  methods: {
-    getDefaultConfig(action, checkType = null) {
-      switch (action) {
-        case 'click':
-        case 'iframe':
-          return { selector: '' }
-        case 'input':
-          return { selector: '', value: '' }
-        case 'sleep':
-          return { value: 1 }
-        case 'check':
-          switch (checkType) {
-            case 'wait_for_url':
-              return { type: 'wait_for_url', url: '' }
-            case 'wait_for_selector':
-              return { type: 'wait_for_selector', selector: '' }
-            case 'check_response':
-              return { type: 'check_response', url: '', method: 'get', status: 200, body_expr: '' }
-            default:
-              return {}
-          }
-        default:
-          return {}
-      }
-    },
-    syncFromParent() {
-      if (this.value && Array.isArray(this.value)) {
-        this.formItems = this.value.map(item => {
-          const newItem = { ...item }
-          if (!newItem.config || typeof newItem.config !== 'object') {
-            newItem.config = this.getDefaultConfig(newItem.action, newItem.config?.type)
-          } else if (newItem.action === 'check' && !newItem.config.type) {
-            newItem.config = this.getDefaultConfig('check', 'wait_for_url')
-          }
-          return newItem
-        })
-      } else {
-        this.formItems = []
-      }
-      if (this.formItems.length === 0) {
-        this.addItem()
-      }
-    },
-    addItem(index = -1) {
-      const newItem = {
-        id: `item_${this.formItems.length + 1}`,
-        action: 'click',
-        config: this.getDefaultConfig('click')
-      }
-      if (index >= 0) {
-        this.formItems.splice(index + 1, 0, newItem)
-      } else {
-        this.formItems.push(newItem)
-      }
-    },
-    deleteItem(index) {
-      if (this.formItems.length <= 1 || index < 0 || index >= this.formItems.length) {
-        return
-      }
-      this.formItems.splice(index, 1)
-      this.emitChange()
-    },
-    onFieldChange() {
-      this.emitChange()
-    },
-    emitChange() {
-      this.$emit('input', this.formItems)
-    },
-    onActionChange(index) {
-      const item = this.formItems[index]
-      if (!item) {
-        return
-      }
-      item.config = this.getDefaultConfig(item.action, 'wait_for_url')
-      this.emitChange()
-    },
-    onCheckTypeChange(index) {
-      const item = this.formItems[index]
-      if (!item || !item.config || !item.config.type) {
-        return
-      }
-      item.config = this.getDefaultConfig('check', item.config.type)
-      this.emitChange()
-    },
-    getCheckFieldLabel(checkType) {
-      const labels = {
-        wait_for_url: this.$t('Address'),
-        wait_for_selector: this.$t('Selector'),
-        check_response: this.$t('Response')
-      }
-      return labels[checkType] || this.$t('Value')
-    }
-  }
-}
-</script>
-
-<style scoped>
-.form-items-container {
-  width: 100%;
-}
-
-.form-items {
-  display: flex;
-  flex-direction: column;
-  gap: 10px;
-}
-
-.form-item {
-  display: flex;
-  align-items: flex-start;
-  gap: 8px;
-  padding: 10px 15px;
-  background: #fbfbfb;
-  border: 1px solid #e4e7ed;
-  border-radius: 8px;
-  transition: all 0.2s ease;
-  position: relative;
-}
-
-.form-item:hover {
-  border-color: #c0c4cc;
-  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-}
-
-.form-field {
-  display: flex;
-  flex-direction: column;
-}
-
-.main-selector {
-  flex: 0 0 90px;
-}
-
-.conditional-fields {
-  display: flex;
-  gap: 12px;
-  flex: 1;
-  flex-wrap: wrap;
-}
-
-.conditional-fields .form-field {
-  flex: 1;
-  min-width: 200px;
-}
-
-.field-label {
-  font-size: 12px;
-  font-weight: 500;
-}
-
-.form-actions {
-  display: flex;
-}
-
-.form-actions .el-button {
-  padding: 5px 7px;
-  font-size: 10px;
-  margin: 0 1px;
-}
-
-.el-form {
-  margin-right: 0 !important;
-}
-
-.response-check-form .method-status-row {
-  display: flex;
-  gap: 10px;
-}
-
-.response-check-form .field-label {
-  display: block;
-  height: 25px;
-  font-size: 10px;
-  color: #6a6a6a;
-}
-
-.help-tip-content {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
-</style>

src/views/assets/Platform/const.js

@@ -32,10 +32,7 @@ export const platformFieldsMeta = (vm) => {
         remove_account_enabled: {},
         ping_method: {},
         ping_params: {
-          label: '',
-          el: {
-            title: vm.$t('setVariable')
-          }
+          label: ''
         },
         gather_facts_method: {},
         push_account_method: {},
@@ -58,11 +55,7 @@ export const platformFieldsMeta = (vm) => {
             method: 'change_secret_posix'
           }
         },
-        verify_account_method: {
-          el: {
-            title: vm.$t('setVariable')
-          }
-        }
+        verify_account_method: {}
       }
     },
     category_type: {

src/views/ops/Adhoc/QuickJob.vue

@@ -20,38 +20,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 QuickJobTerm from '@/views/ops/Adhoc/components/QuickJobTerm.vue'
 import CodeEditor from '@/components/Form/FormFields/CodeEditor'
 import Page from '@/layout/components/Page'
@@ -61,15 +60,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 +91,6 @@ export default {
       showOpenAdhocSaveDialog: false,
       showSetVariableDialog: false,
       showConfirmRunAssetsDialog: false,
-      DataZTree: 0,
       runas: '',
       runasPolicy: 'skip',
       chdir: '',
@@ -109,7 +108,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'
             },
@@ -151,7 +150,7 @@ export default {
                   this.$message.warning(`${this.$t('RequiredAssetOrNode')}`)
                   return cb([])
                 }
-
+                cb([]) // 先返回空，避免输入时出现下拉闪烁
                 this.$axios.post('/api/v1/ops/username-hints/', {
                   nodes: nodes,
                   assets: hosts,
@@ -295,30 +294,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 +303,7 @@ export default {
       },
       selectAssets: [],
       selectNodes: [],
+      selectHosts: [],
       lastRequestPayload: null
     }
   },
@@ -335,9 +311,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 +330,9 @@ export default {
     async initData() {
       this.recoverStatus()
     },
+    handleSelectAssets(assets) {
+      this.selectHosts = assets
+    },
     recoverStatus() {
       if (this.$route.query.taskId) {
         this.currentTaskId = this.$route.query.taskId
@@ -432,13 +408,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 +417,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 +430,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
       }
@@ -572,6 +531,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 +557,7 @@ $container-bg-color: #f7f7f7;
 
       & ::v-deep .xterm {
         height: calc(100% - 8px);
-        overflow-y: auto;
+        overflow-y: hidden;
       }
     }
   }
@@ -608,51 +574,21 @@ $container-bg-color: #f7f7f7;
   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;
-  }
-}
 </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>已选资产({{ selectAssets.length }})</span>
+        <el-button
+          v-if="selectAssets.length > 0"
+          style="float: right; padding: 3px 0"
+          type="text"
+          @click="handleClick"
+        >
+          请选择资产
+        </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">请选择资产</span>
+        <span class="subtitle">点击添加</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="移除"
+                @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/File/index.vue

@@ -10,136 +10,142 @@
         {{ 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" />
-
-            </el-card>
-          </div>
-          <div style="margin-bottom: 5px;font-weight: bold; display: inline-block">{{ $tc('Output') }}:</div>
-          <span v-if="executionInfo.status && summary" 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>
+            <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>
+            <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>
-            </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
   },
@@ -154,7 +160,6 @@ export default {
         cancel: 0
       },
       xtermConfig: {},
-      DataZTree: 0,
       runas: '',
       dstPath: '',
       runButton: {
@@ -181,6 +186,7 @@ export default {
           autoComplete: true,
           query: (query, cb) => {
             const { hosts, nodes } = this.getSelectedNodesAndHosts()
+            cb([]) // 先返回空，避免输入时出现下拉闪烁
             this.$axios.post('/api/v1/ops/username-hints/', {
               nodes: nodes,
               assets: hosts,
@@ -208,27 +214,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,
+      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,
@@ -238,15 +228,16 @@ export default {
         this.$tc('FileTransferBootStepHelpTips1'),
         this.$tc('FileTransferBootStepHelpTips2'),
         this.$tc('FileTransferBootStepHelpTips3')
-      ]
+      ],
+      speedText: '',
+      loadedSize: '',
+      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() {
@@ -300,8 +291,7 @@ export default {
         if (this.executionInfo.status === 'success') {
           this.$message.success(this.$tc('RunSucceed'))
           clearInterval(this.upload_interval)
-          this.progressLength = 100
-          this.ShowProgress = true
+          this.showProgress = false
         }
       })
     },
@@ -314,13 +304,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
@@ -329,17 +312,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) {
@@ -365,7 +339,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'))
       }
@@ -380,6 +354,9 @@ export default {
       this.uploadFileList.splice(this.uploadFileList.indexOf(file), 1)
       this.handleSameFile(this.uploadFileList)
     },
+    formatSpeed(bps) {
+      return `${this.formatFileSize(bps)}/s`
+    },
     execute() {
       const { hosts, nodes } = this.getSelectedNodesAndHosts()
       for (const file of this.uploadFileList) {
@@ -425,8 +402,10 @@ export default {
       createJob(data).then(res => {
         this.progressLength = 0
         this.executionInfo.timeCost = 0
-        this.ShowProgress = true
+        this.showProgress = true
+        this.speedText = ''
         const form = new FormData()
+        const start = Date.now()
         for (const file of this.uploadFileList) {
           form.append('files', file.raw)
           form.append('job_id', res.id)
@@ -436,31 +415,59 @@ export default {
             clearInterval(this.upload_interval)
             return
           }
-          this.progressLength += 1
         }, 100)
-        JobUploadFile(form).then(res => {
+        JobUploadFile(form, {
+          onUploadProgress: (e) => {
+            if (!e.total) return
+            const percent = Math.floor((e.loaded / e.total) * 100)
+            this.progressLength = Math.min(percent, 100)
+            this.loadedSize = formatFileSize(e.loaded)
+            this.totalSize = formatFileSize(e.total)
+            const elapsedSec = (Date.now() - start) / 1000
+            if (elapsedSec > 0) {
+              const speed = e.loaded / elapsedSec
+              this.speedText = this.formatSpeed(speed)
+            }
+          }
+        }).then(res => {
           this.executionInfo.status = 'running'
           this.currentTaskId = res.task_id
           this.xtermConfig = { taskId: this.currentTaskId, type: 'shortcut_cmd' }
           this.setCostTimeInterval()
           this.writeExecutionOutput()
-        }).catch(() => {
+        }).catch((error) => {
+          this.$message.error(this.$tc('Error'), error)
           this.execute_stop()
         })
       })
     },
     execute_stop() {
       this.progressLength = 0
-      this.ShowProgress = false
+      this.showProgress = false
       this.runButton.disabled = false
       clearInterval(this.upload_interval)
       this.runButton.icon = 'fa fa-play'
+    },
+    handleSelectAssets(assets) {
+      this.selectHosts = assets
     }
   }
 }
 </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;
@@ -472,19 +479,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;
@@ -495,11 +494,6 @@ export default {
   padding: 0 10px;
 }
 
-.tree-box {
-  margin-right: 2px;
-  border: 1px solid #e0e0e0;
-}
-
 .status_success {
   color: var(--color-primary);
 }
@@ -567,6 +561,14 @@ export default {
         }
       }
     }
+
+    .el-progress-bar {
+      padding-right: 0;
+    }
+
+    .el-progress__text {
+      display: none;
+    }
   }
 }
 
@@ -579,4 +581,11 @@ export default {
 .output ::v-deep #terminal {
   border: dashed 1px #d9d9d9;
 }
+
+.status-info {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+}
+
 </style>

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/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/accounts/AccountAutomation.vue

@@ -28,7 +28,7 @@
           <div class="chart-container-title">
             <div class="chart-container-title-text">{{ $t('TaskExecutionTrends') }}</div>
             <div class="chart">
-              <echarts
+              <Echart
                 :options="ExecutionMetricsOptions"
                 :autoresize="true"
               />
@@ -52,6 +52,7 @@ import BaseReport from '../base/BaseReport.vue'
 import SummaryCountCard from '@/components/Dashboard/SummaryCountCard.vue'
 import SwitchDate from '@/components/Dashboard/SwitchDate.vue'
 import * as echarts from 'echarts'
+import Echart from '@/components/Dashboard/Echart.vue'
 import AccountSummary from '@/views/reports/pam/ChangeSecret/AccountSummary.vue'
 import RiskSummary from '@/views/reports/pam/Dashboard/RiskSummary.vue'
 
@@ -61,7 +62,8 @@ export default {
     AccountSummary,
     SwitchDate,
     SummaryCountCard,
-    BaseReport
+    BaseReport,
+    Echart
   },
   props: {
     nav: {

src/views/reports/accounts/AccountStatistics.vue

@@ -20,7 +20,7 @@
           <div class="chart-container-title">
             <div class="chart-container-title-text">{{ $t('AccountCreationSourceDistribution') }}</div>
             <div class="chart">
-              <echarts
+              <Echart
                 :options="SourceOptions"
                 :autoresize="true"
               />
@@ -31,7 +31,7 @@
           <div class="chart-container-title">
             <div class="chart-container-title-text">{{ $t('AccountConnectivityStatusDistribution') }}</div>
             <div class="chart">
-              <echarts
+              <Echart
                 :options="ConnectivityOptions"
                 :autoresize="true"
               />
@@ -42,7 +42,7 @@
           <div class="chart-container-title">
             <div class="chart-container-title-text">{{ $t('AccountPasswordChangeTrends') }}</div>
             <div class="chart">
-              <echarts
+              <Echart
                 :options="ChangeSecretOptions"
                 :autoresize="true"
               />
@@ -70,6 +70,7 @@
 import BaseReport from '../base/BaseReport.vue'
 import SummaryCountCard from '@/components/Dashboard/SummaryCountCard.vue'
 import * as echarts from 'echarts'
+import Echart from '@/components/Dashboard/Echart.vue'
 import { mixColors } from '@/views/reports/const'
 import RankTable from '@/views/reports/users/components/RankTable.vue'
 
@@ -77,7 +78,8 @@ export default {
   components: {
     RankTable,
     SummaryCountCard,
-    BaseReport
+    BaseReport,
+    Echart
   },
   props: {
     nav: {

src/views/reports/assets/AssetActivity.vue

@@ -28,7 +28,7 @@
           <div class="chart-container-title">
             <div class="chart-container-title-text">{{ $t('DistributionOfAssetLoginMethods') }}</div>
             <div class="chart">
-              <echarts
+              <Echart
                 :options="LoginEntryOptions"
                 :autoresize="true"
               />
@@ -40,7 +40,7 @@
           <div class="chart-container-title">
             <div class="chart-container-title-text">{{ $t('RemoteLoginProtocolUsageDistribution') }}</div>
             <div class="chart">
-              <echarts
+              <Echart
                 :options="LoginProtocolOptions"
                 :autoresize="true"
               />
@@ -52,7 +52,7 @@
           <div class="chart-container-title">
             <div class="chart-container-title-text">{{ $t('OperatingSystemDistributionOfLoginAssets') }}</div>
             <div class="chart">
-              <echarts
+              <Echart
                 :options="LoginOSOptions"
                 :autoresize="true"
               />
@@ -64,7 +64,7 @@
           <div class="chart-container-title">
             <div class="chart-container-title-text">{{ $t('AssetLoginTrends') }}</div>
             <div class="chart">
-              <echarts
+              <Echart
                 ref="loginTrend"
                 :options="loginTrendOptions"
                 :autoresize="true"
@@ -83,6 +83,7 @@ import BaseReport from '@/views/reports/base/BaseReport.vue'
 import SummaryCountCard from '@/components/Dashboard/SummaryCountCard.vue'
 import UserAssetActivity from '@/views/reports/console/UserAssetActivity.vue'
 import * as echarts from 'echarts'
+import Echart from '@/components/Dashboard/Echart.vue'
 import { mixColors } from '@/views/reports/const'
 
 export default {
@@ -90,7 +91,8 @@ export default {
     UserAssetActivity,
     SummaryCountCard,
     BaseReport,
-    SwitchDate
+    SwitchDate,
+    Echart
   },
   props: {
     nav: {

src/views/reports/assets/AssetStatistics.vue

@@ -20,7 +20,7 @@
           <div class="chart-container-title">
             <div class="chart-container-title-text">{{ $t('AssetTypeDistribution') }}</div>
             <div class="chart">
-              <echarts
+              <Echart
                 :options="AssetTypeOptions"
                 :autoresize="true"
               />
@@ -31,7 +31,7 @@
           <div class="chart-container-title">
             <div class="chart-container-title-text">{{ $t('WeeklyGrowthTrend') }}</div>
             <div class="chart">
-              <echarts
+              <Echart
                 :options="AddedAssetOptions"
                 :autoresize="true"
               />
@@ -47,12 +47,14 @@
 import BaseReport from '../base/BaseReport.vue'
 import SummaryCountCard from '@/components/Dashboard/SummaryCountCard.vue'
 import * as echarts from 'echarts'
+import Echart from '@/components/Dashboard/Echart.vue'
 import { mixColors } from '@/views/reports/const'
 
 export default {
   components: {
     SummaryCountCard,
-    BaseReport
+    BaseReport,
+    Echart
   },
   props: {
     nav: {

src/views/reports/base/BaseReport.vue

@@ -26,7 +26,7 @@
           {{ description }}
         </div>
       </div>
-      <span v-if="!nav && url" class="export-btn">
+      <span v-if="!nav && url && showReportExportBtn" class="export-btn">
         <el-button type="text" @click="openNewWindow">
           <i class="fa fa-external-link" style="font-size: 15px;" />
           {{ $t('Export') }}
@@ -42,6 +42,7 @@
 <script>
 import Logo from '@/layout/components/NavLeft/Logo'
 import RightAction from './RightAction.vue'
+import store from '@/store'
 
 export default {
   components: {
@@ -84,6 +85,9 @@ export default {
   computed: {
     isDescription() {
       return this.description && this.description.trim() !== ''
+    },
+    showReportExportBtn() {
+      return store.getters.hasValidLicense
     }
   },
   methods: {

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/reports/console/UserAssetActivity.vue

@@ -52,17 +52,20 @@ export default {
   },
   methods: {
     async getMetricData() {
-      const url = `/api/v1/index/?dates_metrics=1&days=${this.days}`
-      const data = await this.$axios.get(url)
-      const activeUsers = data?.dates_metrics_total_count_active_users
-      const activeAssets = data?.dates_metrics_total_count_active_assets
-      this.lineChartConfig.datesMetrics = data.dates_metrics_date
-      if (activeUsers.length > 0) {
-        this.lineChartConfig.primaryData = activeUsers
-      }
-      if (activeAssets.length > 0) {
-        this.lineChartConfig.secondaryData = activeAssets
-      }
+      setTimeout(() => {
+        const url = `/api/v1/index/?dates_metrics=1&days=${this.days}`
+        this.$axios.get(url).then(data => {
+          const activeUsers = data?.dates_metrics_total_count_active_users
+          const activeAssets = data?.dates_metrics_total_count_active_assets
+          this.lineChartConfig.datesMetrics = data.dates_metrics_date
+          if (activeUsers.length > 0) {
+            this.lineChartConfig.primaryData = activeUsers
+          }
+          if (activeAssets.length > 0) {
+            this.lineChartConfig.secondaryData = activeAssets
+          }
+        })
+      }, 500)
     }
   }
 }

src/views/reports/pam/ChangeSecret/AccountSummary.vue

@@ -60,17 +60,20 @@ export default {
   },
   methods: {
     async getMetricData() {
-      const url = `/api/v1/accounts/change-secret-dashboard/?daily_success_and_failure_metrics=1&days=${this.days}`
-      const data = await this.$axios.get(url)
-      const success = data?.dates_metrics_total_count_success
-      const failed = data?.dates_metrics_total_count_failed
-      this.lineChartConfig.datesMetrics = data?.dates_metrics_date
-      if (success.length > 0) {
-        this.lineChartConfig.primaryData = success
-      }
-      if (failed.length > 0) {
-        this.lineChartConfig.secondaryData = failed
-      }
+      setTimeout(() => {
+        const url = `/api/v1/accounts/change-secret-dashboard/?daily_success_and_failure_metrics=1&days=${this.days}`
+        this.$axios.get(url).then(data => {
+          const success = data?.dates_metrics_total_count_success
+          const failed = data?.dates_metrics_total_count_failed
+          this.lineChartConfig.datesMetrics = data?.dates_metrics_date
+          if (success.length > 0) {
+            this.lineChartConfig.primaryData = success
+          }
+          if (failed.length > 0) {
+            this.lineChartConfig.secondaryData = failed
+          }
+        })
+      }, 500)
     }
   }
 }

src/views/reports/pam/Dashboard/MissionSummery.vue

@@ -6,7 +6,7 @@
 
     <div class="chart-content">
       <!-- eslint-disable-next-line -->
-      <echarts ref="chartRef" :options="chartOption" :autoresize="true" />
+      <Echart ref="chartRef" :options="chartOption" :autoresize="true"/>
     </div>
   </div>
 </template>
@@ -14,6 +14,7 @@
 <script>
 import Title from '@/components/Dashboard/Title.vue'
 import * as echarts from 'echarts'
+import Echart from '@/components/Dashboard/Echart.vue'
 import 'echarts/lib/chart/pie'
 import 'echarts/lib/component/tooltip'
 import 'echarts/lib/component/title'
@@ -21,7 +22,7 @@ import 'echarts/lib/component/legend'
 
 export default {
   name: 'MissionSummery',
-  components: { Title },
+  components: { Title, Echart },
   data() {
     return {
       config: {

src/views/reports/users/ChangePassword.vue

@@ -22,7 +22,7 @@
           <div class="chart-container-title">
             <div class="chart-container-title-text">{{ $t('UserModificationTrends') }}</div>
             <div class="chart">
-              <echarts
+              <Echart
                 :options="UserModificationOptions"
                 :autoresize="true"
               />
@@ -55,13 +55,15 @@ import BaseReport from '../base/BaseReport.vue'
 import SummaryCountCard from '@/components/Dashboard/SummaryCountCard.vue'
 import { mixColors } from '@/views/reports/const'
 import * as echarts from 'echarts'
+import Echart from '@/components/Dashboard/Echart.vue'
 
 export default {
   components: {
     SummaryCountCard,
     RankTable,
     BaseReport,
-    SwitchDate
+    SwitchDate,
+    Echart
   },
   props: {
     nav: {

src/views/sessions/CommandList/BaseList.vue

@@ -2,6 +2,7 @@
   <TreeTable
     ref="CommandTreeTable"
     v-loading="loading"
+    :title="title"
     :header-actions="headerActions"
     :table-config="tableConfig"
     :tree-setting="treeSetting"
@@ -39,6 +40,7 @@ export default {
     const dateFrom = getDaysAgo(7).toISOString()
     const dateTo = this.$moment(getDayEnd()).add(1, 'day').toISOString()
     return {
+      title: this.$t('CommandStorage'),
       loading: true,
       tableConfig: {
         url: '/api/v1/terminal/commands/',

src/views/settings/Msg/Email/EmailTemplate.vue

@@ -1,6 +1,9 @@
 <template>
   <div>
-    <el-button size="mini" type="primary" icon="el-icon-setting" @click="visible = !visible"> {{ $t("Setting") }} </el-button>
+    <el-button size="mini" type="primary" icon="el-icon-setting" @click="visible = !visible"> {{
+      $t("Setting")
+    }}
+    </el-button>
     <Dialog
       v-if="visible"
       :show-cancel="false"
@@ -21,7 +24,7 @@ import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm
 import { Dialog } from '@/components'
 
 export default {
-  name: 'EmailTemplate',
+  name: 'MsgTemplate',
   components: {
     GenericCreateUpdateForm,
     Dialog

src/views/settings/Msg/Email/index.vue

@@ -16,8 +16,8 @@
 import { IBox } from '@/components'
 import { GenericCreateUpdateForm } from '@/layout/components'
 import { testEmailSetting } from '@/api/settings'
-import EmailTemplate from './EmailTemplate.vue'
 import rules from '@/components/Form/DataForm/rules'
+import EmailTemplate from './EmailTemplate.vue'
 
 export default {
   name: 'Email',

src/views/settings/Msg/Email/markDownEditor.vue

@@ -0,0 +1,50 @@
+<template>
+  <div style="border: 1px solid #ccc; padding: 10px;">
+    <vue-markdown-editor v-model="localValue" :right-toolbar="rightToolbar" :left-toolbar="leftToolbar" height="400px" />
+  </div>
+</template>
+<script>
+import VueMarkdownEditor, { xss } from '@kangc/v-md-editor'
+import '@kangc/v-md-editor/lib/style/base-editor.css'
+import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js'
+import '@kangc/v-md-editor/lib/theme/style/vuepress.css'
+import Prism from 'prismjs'
+
+VueMarkdownEditor.use(vuepressTheme, {
+  Prism
+})
+
+export default {
+  name: 'RichEditor',
+  components: { VueMarkdownEditor },
+  props: {
+    value: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      localValue: this.value,
+      rightToolbar: 'preview  sync-scroll fullscreen',
+      leftToolbar: 'undo redo clear | h bold italic strikethrough quote | ul ol hr | link  code '
+    }
+  },
+  computed: {
+    html() {
+      return xss.process(VueMarkdownEditor.themeConfig.markdownParser.render(this.localValue))
+    }
+  },
+  watch: {
+    value(val) {
+      if (val !== this.localValue) {
+        this.localValue = val
+      }
+    },
+    localValue(val) {
+      this.$emit('input', val)
+      this.$emit('htmlChange', this.html)
+    }
+  }
+}
+</script>

src/views/settings/Msg/MsgTemplate/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <div>
+    <IBox>
+      <GenericCreateUpdateForm
+        :create-success-next-route="successUrl"
+        :update-success-next-route="successUrl"
+        v-bind="$data"
+      />
+    </IBox>
+    <VariablesHelpTextDialog
+      :variables-help-text="variablesHelpText"
+      :variables="variables"
+      :visible.sync="showHelpDialog"
+    />
+  </div>
+</template>
+
+<script>
+import { IBox } from '@/components'
+import { GenericCreateUpdateForm } from '@/layout/components'
+import MarkDownEditor from '@/views/settings/Msg/Email/markDownEditor.vue'
+import { Select2 } from '@/components/Form/FormFields'
+import VariablesHelpTextDialog from '@/components/Apps/VariablesHelpTextDialog'
+import variable from '@/views/ops/Template/components/Variable.vue'
+
+export default {
+  name: 'MsgTemplate',
+  components: {
+    GenericCreateUpdateForm,
+    IBox,
+    VariablesHelpTextDialog
+  },
+  data() {
+    const vm = this
+    return {
+      initial: {
+        template_name: localStorage.getItem('selectTemplateName') || 'terminal/_msg_session_sharing.html'
+      },
+      fields: [
+        [this.$t('Basic'), [
+          'template_name',
+          'template_content'
+        ]]
+      ],
+      fieldsMeta: {
+        template_name: {
+          label: this.$t('Name'),
+          helpTextFormatter: () => {
+            const handleClick = () => {
+              this.showHelpDialog = true
+            }
+            return (
+              <i onClick={handleClick} class='fa fa-question-circle' style='cursor: pointer'>{this.$t('Help')}</i>
+            )
+          },
+          component: Select2,
+          el: {
+            multiple: false,
+            options: []
+          },
+          on: {
+            input: ([event], updateForm) => {
+              setTimeout(() => {
+                vm.templates.map(item => {
+                  if (item.template_name === event) {
+                    this.selectTemplateName = item.template_name
+                    localStorage.setItem('selectTemplateName', item.template_name)
+                    this.variables = item.contexts
+                    this.source = item.source
+                    updateForm({
+                      template_content: item.content.trimStart()
+                    })
+                  }
+                })
+              },
+              500
+              )
+            }
+          }
+        },
+        template_content: {
+          component: MarkDownEditor,
+          on: {
+            htmlChange: ([html]) => {
+              vm.html = html
+            }
+          }
+        }
+      },
+      templates: [],
+      successUrl: { name: 'Msg' },
+      showHelpDialog: false,
+      variables: [],
+      html: '',
+      source: 'original',
+      selectTemplateName: '',
+      variablesHelpText: this.$t('TemplateVariablesHelpText'),
+      hasSaveContinue: false,
+      onPerformError() {
+      },
+      performSubmit(validValues) {
+        validValues['render_html'] = vm.html
+        return this.$axios['patch']('/api/v1/notifications/templates/edit/', validValues).then(res => {
+          this.$router.push({ name: 'Msg', query: { t: new Date().getTime() } })
+        })
+      },
+      moreButtons: [
+        {
+          title: this.$t('Reset'),
+          type: 'default',
+          // hidden: () => this.source === 'original',
+          callback: (value, form, btn) => {
+            return this.$axios['post']('/api/v1/notifications/templates/reset/', { template_name: this.selectTemplateName }).then(
+              () => {
+                this.$router.push({ name: 'Msg', query: { t: new Date().getTime() } })
+                this.$message.success(this.$t('ResetSuccessfully'))
+              }
+            )
+          }
+        }
+      ]
+    }
+  },
+  computed: {
+    variable() {
+      return variable
+    }
+  },
+  mounted() {
+    this.fetchTemplates()
+  },
+  methods: {
+    fetchTemplates() {
+      this.$axios.get('/api/v1/notifications/templates/').then(data => {
+        if (data.length > 0) {
+          this.templates = data
+          this.fieldsMeta.template_name.el.options = data.map(item => ({
+            label: item.subject,
+            value: item.template_name
+          }))
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/settings/Msg/Subscribe/index.vue

@@ -93,7 +93,9 @@ export default {
       this.$axios.patch(
         `/api/v1/notifications/system-msg-subscription/${sub.id}/`,
         { receive_backends: backends }
-      ).catch(err => {
+      ).then(() => {
+        this.$message.success(this.$t('UpdateSuccessMsg'))
+      }).catch(err => {
         this.$log.error(err)
       })
     },

src/views/settings/Msg/index.vue

@@ -9,12 +9,13 @@
 <script>
 import TabPage from '@/layout/components/TabPage/index.vue'
 import Email from './Email/index.vue'
+import MsgTemplate from '@/views/settings/Msg/MsgTemplate/index.vue'
 import Subscribe from './Subscribe/index.vue'
 import SMS from './SMS/index.vue'
 
 export default {
   name: 'Index',
-  components: { TabPage, Email, Subscribe, SMS },
+  components: { TabPage, Email, MsgTemplate, Subscribe, SMS },
   data() {
     return {
       activeMenu: 'Email',
@@ -24,6 +25,11 @@ export default {
           name: 'Email',
           hidden: !this.$hasPerm('settings.change_email')
         },
+        {
+          title: this.$t('MsgTemplate'),
+          name: 'MsgTemplate',
+          hidden: !this.$hasPerm('settings.change_email') || !this.$store.getters.hasValidLicense
+        },
         {
           title: this.$t('SMS'),
           name: 'SMS',

src/views/settings/Security/Session.vue

@@ -9,7 +9,7 @@
 <script>
 import IBox from '@/components/Common/IBox/index.vue'
 import GenericCreateUpdateForm from '@/layout/components/GenericCreateUpdateForm/index.vue'
-import WatermarkHelpDialog from './WatermarkHelpDialog.vue'
+import WatermarkHelpDialog from '@/components/Apps/VariablesHelpTextDialog'
 
 export default {
   name: 'SessionSecurity',
@@ -18,21 +18,21 @@ export default {
     return {
       showSessionHelpDialog: false,
       showConsoleHelpDialog: false,
-      sessionVariables: {
-        'userId': this.$t('userId'),
-        'name': this.$t('name'),
-        'userName': this.$t('userName'),
-        'currentTime': this.$t('currentTime'),
-        'assetId': this.$t('assetId'),
-        'assetName': this.$t('assetName'),
-        'assetAddress': this.$t('assetAddress')
-      },
-      consoleVariables: {
-        'userId': this.$t('userId'),
-        'name': this.$t('name'),
-        'userName': this.$t('userName'),
-        'currentTime': this.$t('currentTime')
-      },
+      sessionVariables: [
+        { name: 'userId', label: this.$t('userId'), default: '00000000-0000-0000-0000-000000000001' },
+        { name: 'name', label: this.$t('name'), default: '张三' },
+        { name: 'userName', label: this.$t('userName'), default: 'zhangsan' },
+        { name: 'currentTime', label: this.$t('currentTime'), default: '2025-06-01 12:00:00' },
+        { name: 'assetId', label: this.$t('assetId'), default: '00000000-0000-0000-0000-000000000001' },
+        { name: 'assetName', label: this.$t('assetName'), default: '服务器01' },
+        { name: 'assetAddress', label: this.$t('assetAddress'), default: '192.168.1.1' }
+      ],
+      consoleVariables: [
+        { name: 'userId', label: this.$t('userId'), default: '00000000-0000-0000-0000-000000000001' },
+        { name: 'name', label: this.$t('name'), default: '张三' },
+        { name: 'userName', label: this.$t('userName'), default: 'zhangsan' },
+        { name: 'currentTime', label: this.$t('currentTime'), default: '2025-06-01 12:00:00' }
+      ],
       config: {
         url: '/api/v1/settings/setting/?category=security_session',
         hasDetailInMsg: false,

src/views/settings/Security/WatermarkHelpDialog.vue

@@ -8,17 +8,19 @@
     top="1vh"
     width="50%"
   >
-    <p>{{ $t('WatermarkVariableHelpText') }}</p>
+    <p>{{ variablesHelpText }}</p>
     <table border="1" class="help-table">
       <tr>
         <th>{{ $tc('Variable') }}</th>
         <th>{{ $tc('Description') }}</th>
+        <th>{{ $tc('Example') }}</th>
       </tr>
-      <tr v-for="(val, key, index) in variables" :key="index">
-        <td :title="$tc('ClickCopy')" class="item-td text-link" @click="onCopy(key)">
-          <label class="item-label">{{ key }}</label>
+      <tr v-for="(item, index) in variables" :key="index">
+        <td :title="$tc('ClickCopy')" class="item-td text-link" @click="onCopy(item.key)">
+          <label class="item-label">{{ item.key }}</label>
         </td>
-        <td><span>{{ val }}</span></td>
+        <td><span>{{ item.label }}</span></td>
+        <td><span>{{ item.example }}</span></td>
       </tr>
     </table>
   </Dialog>
@@ -38,8 +40,14 @@ export default {
       default: false
     },
     variables: {
-      type: Object,
-      default: () => ({})
+      type: Array,
+      default: () => []
+    },
+    variablesHelpText: {
+      type: String,
+      default() {
+        return this.$t('WatermarkVariableHelpText')
+      }
     }
   },
   data() {

src/views/settings/Terminal/Component/TerminalUpdate.vue

@@ -50,20 +50,25 @@ export default {
   },
   methods: {
     async initialSelect() {
-      const commandOptions = await getAllCommandStorage()
-      commandOptions.forEach(item => {
-        this.fieldsMeta.command_storage.options.push({ label: item.name, value: item.name })
-      })
-      const replayOptions = await getAllReplayStorage()
-      replayOptions.forEach(item => {
-        if (item.type.value === 'sftp') return
-        this.fieldsMeta.replay_storage.options.push({ label: item.name, value: item.name })
-      })
+      try {
+        const commandOptions = await getAllCommandStorage()
+        const replayOptions = await getAllReplayStorage()
+
+        if (commandOptions) {
+          commandOptions.forEach(item => {
+            this.fieldsMeta.command_storage.options.push({ label: item.name, value: item.name })
+          })
+        }
+        if (replayOptions) {
+          replayOptions.forEach(item => {
+            if (item.type.value === 'sftp') return
+            this.fieldsMeta.replay_storage.options.push({ label: item.name, value: item.name })
+          })
+        }
+      } catch (error) {
+        console.error(error)
+      }
     }
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/views/tickets/components/Comments.vue

@@ -147,7 +147,7 @@ export default {
       this.loading = true
       const url = `/api/v1/tickets/comments/?ticket_id=${this.object.id}`
       this.$axios.get(url).then(res => {
-        this.comments = res
+        this.comments = res.results
       }).catch(err => {
         this.$message.error(err)
       }).finally(() => {

src/views/workbench/myassets/index.vue

@@ -41,7 +41,6 @@ export default {
               name: 'connect',
               icon: 'fa-desktop',
               type: 'primary',
-              plain: true,
               can: ({ row }) => row.is_active,
               callback: ({ row }) => {
                 const oid = this.$store.getters.currentOrg ? this.$store.getters.currentOrg.id : ''