Revert "Fixed: Fix the issue of storage failure when updating components."

This reverts commit 2002519f30.

Dockerfile

@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20250905_085804 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/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.key)">
+          <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/LineChart.vue

@@ -5,7 +5,7 @@
       :options="options"
       :autoresize="true"
       theme="light"
-      @finished="getDataUrl"
+      @finished="genSnapshot"
     />
   </div>
 </template>
@@ -230,12 +230,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/Form/DataForm/index.vue

@@ -55,7 +55,7 @@
 
         <el-button
           v-for="button in moreButtons"
-          v-show="!button.hidden"
+          v-show="!iHidden(button)"
           :key="button.title"
           :loading="button.loading"
           size="small"
@@ -226,6 +226,9 @@ export default {
     },
     getFormValue() {
       return this.$refs.form.getFormValue()
+    },
+    iHidden(item) {
+      return typeof item.hidden === 'function' ? item.hidden() : item.hidden
     }
   }
 }

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/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: 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/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/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/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/Zone/ZoneDetail/GatewayList.vue

@@ -181,10 +181,10 @@ export default {
               try {
                 const res = await this.$axios.get(this.tableConfig.url)
 
-                if (res) {
+                if (res && res.results) {
                   this.transObject = {
                     ...this.object,
-                    gateways: res.map(item => {
+                    gateways: res.results.map(item => {
                       return {
                         name: item.name,
                         id: item.id

src/views/ops/Adhoc/QuickJob.vue

@@ -141,7 +141,7 @@ export default {
             align: 'left',
             value: '',
             placeholder: this.$tc('EnterRunUser'),
-            tip: this.$tc('RunasHelpText'),
+            // tip: this.$tc('RunasHelpText'),
             el: {
               autoComplete: true,
               query: (query, cb) => {
@@ -151,7 +151,7 @@ export default {
                   this.$message.warning(`${this.$t('RequiredAssetOrNode')}`)
                   return cb([])
                 }
-
+                cb([]) // 先返回空，避免输入时出现下拉闪烁
                 this.$axios.post('/api/v1/ops/username-hints/', {
                   nodes: nodes,
                   assets: hosts,

src/views/ops/File/index.vue

@@ -181,6 +181,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,

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

@@ -1,11 +1,14 @@
 <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"
       :show-confirm="false"
-      :title="$tc('EmailTemplate')"
+      :title="$tc('Msg Template')"
       :visible.sync="visible"
       width="70%"
       @confirm="onConfirm()"
@@ -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,49 @@
+<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)
+    }
+  }
+}
+</script>

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

@@ -0,0 +1,144 @@
+<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: {
+        EMAIL_TEMPLATE_NAME: localStorage.getItem('selectTemplateName') || 'terminal/_msg_session_sharing.html'
+      },
+      helpText: this.$t('EmailHelpText'),
+      encryptedFields: ['EMAIL_HOST_PASSWORD'],
+      fields: [
+        [this.$t('Basic'), [
+          'EMAIL_TEMPLATE_NAME',
+          'EMAIL_TEMPLATE_CONTENT'
+        ]]
+      ],
+      fieldsMeta: {
+        EMAIL_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({
+                      EMAIL_TEMPLATE_CONTENT: item.content.trimStart()
+                    })
+                  }
+                })
+              },
+              500
+              )
+            }
+          }
+        },
+        EMAIL_TEMPLATE_CONTENT: {
+          component: MarkDownEditor
+        }
+      },
+      templates: [],
+      successUrl: { name: 'Msg' },
+      showHelpDialog: false,
+      variables: [],
+      source: 'original',
+      selectTemplateName: '',
+      variablesHelpText: '您可以选择一个模板在模板内容中使用 {{ key }} 读取内置变量,注意：只支持 {{ }} 语法，其他语法不支持。例如  {% if title %}',
+      hasSaveContinue: false,
+      performSubmit(validValues) {
+        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) => {
+            console.log(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.EMAIL_TEMPLATE_NAME.el.options = data.map(item => ({
+            label: item.subject,
+            value: item.template_name
+          }))
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

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('Msg Template'),
+          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/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(() => {