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

This reverts commit 2002519f30.
Fixed: Fix the issue of storage failure when updating components.
2025-11-08 02:18:44 +00:00 · 2025-09-15 14:41:01 +08:00 · 2025-09-15 14:40:58 +08:00 · 2025-09-15 14:22:30 +08:00 · 2025-09-12 18:32:13 +08:00 · 2025-09-12 18:32:13 +08:00
38 changed files with 2855 additions and 491 deletions
--- a/.prettierignore
+++ b/.prettierignore
@@ -0,0 +1,57 @@
+# Dependencies
+node_modules/
+dist/
+build/
+lina/
+
+# Logs
+*.log
+logs/
+
+# Runtime data
+pids/
+*.pid
+*.seed
+
+# Coverage directory used by tools like istanbul
+coverage/
+
+# Generated files
+*.min.js
+*.min.css
+
+# Package files
+*.tgz
+*.tar.gz
+
+# Lock files
+package-lock.json
+yarn.lock
+
+# Build outputs
+*.map
+
+# Config files that shouldn't be formatted
+.eslintrc.js
+babel.config.js
+jest.config.js
+vue.config.js
+postcss.config.js
+
+# Theme files
+src/styles/fonts/
+public/fonts/
+lina/fonts/
+
+# Assets
+src/assets/
+public/
+
+# Mock data
+mock/
+
+# Test files
+tests/
+
+# Documentation
+*.md
--- a/.prettierrc
+++ b/.prettierrc
@@ -1,11 +0,0 @@
-{
-  "printWidth": 100,
-  "tabWidth": 2,
-  "useTabs": false,
-  "singleQuote": true,
-  "semi": false,
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "arrowParens": "avoid",
-  "endOfLine": "lf"
-}
--- a/2
+++ b/2
@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20250805_081024 AS stage-build
+FROM jumpserver/lina-base:20250910_084112 AS stage-build

 ARG VERSION
 ENV VERSION=$VERSION
--- a/PRETTIER.md
+++ b/PRETTIER.md
@@ -0,0 +1,76 @@
+# Prettier 配置说明
+
+本项目已配置 Prettier 代码格式化工具，**仅在保存时自动格式化**，不进行批量格式化，以保持现有代码风格。
+
+## 配置文件
+
+- `.prettierrc` - Prettier 配置文件
+- `.prettierignore` - 忽略格式化的文件列表
+- `.vscode/settings.json` - VSCode 编辑器配置（保存时自动格式化）
+- `.vscode/extensions.json` - 推荐的 VSCode 扩展
+
+## 使用方法
+
+### 1. 安装依赖
+项目已安装以下依赖：
+- `prettier@^2.8.8` - Prettier 核心
+- `eslint-plugin-prettier@^3.1.4` - ESLint 与 Prettier 集成
+- `eslint-config-prettier@^6.15.0` - 禁用与 Prettier 冲突的 ESLint 规则
+
+### 2. 命令行使用
+
+```bash
+# ESLint 检查和修复
+npm run fix
+```
+
+**注意**：本项目配置为仅在保存时自动格式化，不提供批量格式化命令。
+
+### 3. VSCode 编辑器配置
+
+确保安装了推荐的扩展：
+- Prettier - Code formatter (esbenp.prettier-vscode)
+- ESLint (dbaeumer.vscode-eslint)
+- Vetur (octref.vetur)
+
+配置已设置为保存时自动格式化。
+
+### 4. Git 提交钩子
+
+项目使用 `husky` 和 `lint-staged` 在提交时进行代码检查：
+- 提交时运行 ESLint 检查和修复
+- 不进行批量格式化，保持原有代码风格
+
+## Prettier 配置说明
+
+```json
+{
+  "semi": false,              // 不使用分号
+  "singleQuote": true,        // 使用单引号
+  "tabWidth": 0,              // 不使用缩进
+  "useTabs": false,           // 使用空格而不是制表符
+  "trailingComma": "none",    // 不使用尾随逗号
+  "printWidth": 100,          // 行宽 100 字符
+  "bracketSpacing": true,     // 对象括号内有空格
+  "arrowParens": "avoid",     // 箭头函数单参数时不使用括号
+  "endOfLine": "lf",          // 使用 LF 换行符
+  "vueIndentScriptAndStyle": false  // Vue 文件中 script 和 style 标签不缩进
+}
+```
+
+## 常见问题
+
+### Q: 如何临时禁用格式化？
+A: 使用注释：
+```javascript
+// prettier-ignore
+const uglyCode = {
+    a:1,b:2
+}
+```
+
+### Q: 如何添加文件到忽略列表？
+A: 编辑 `.prettierignore` 文件，添加文件或目录路径。
+
+### Q: VSCode 保存时没有自动格式化？
+A: 检查是否安装了 Prettier 扩展，并确认 `.vscode/settings.json` 配置正确。
--- a/package.json
+++ b/package.json
@@ -1,150 +1,156 @@
 {
-    "name": "lina",
-    "version": "v4.0.0",
-    "description": "JumpServer Web UI",
-    "author": "JumpServer Team <support@lxware.hk>",
-    "license": "GPL-3.0-or-later",
-    "scripts": {
-        "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
-        "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
-        "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
-        "build:prod": "vue-cli-service build",
-        "build:stage": "vue-cli-service build --mode staging",
-        "preview": "node build/index.js --preview",
-        "lint": "eslint --ext .js,.vue src",
-        "fix": "eslint --ext .js,.vue --fix src",
-        "test:unit": "jest --clearCache && vue-cli-service test:unit",
-        "test:ci": "npm run lint && npm run test:unit",
-        "svgo": "svgo -f src/icons/svg --config=src/icas/svgo.yml",
-        "vue-i18n-extract": "vue-i18n-extract",
-        "vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
-        "vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
-        "vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a",
-        "diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja zh_Hant",
-        "apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja zh_Hant"
-    },
-    "dependencies": {
-        "@babel/plugin-proposal-optional-chaining": "^7.13.12",
-        "@fontsource/open-sans": "^5.0.24",
-        "@traptitech/markdown-it-katex": "^3.6.0",
-        "@ztree/ztree_v3": "3.5.44",
-        "axios": "0.28.0",
-        "axios-retry": "^3.1.9",
-        "caniuse-lite": "^1.0.30001642",
-        "cron-parser": "^4.0.0",
-        "crypto-js": "^4.1.1",
-        "css-color-function": "^1.3.3",
-        "decimal.js": "^10.4.3",
-        "deepmerge": "^4.2.2",
-        "dompurify": "^3.1.6",
-        "echarts": "4.7.0",
-        "element-ui": "^2.15.14",
-        "elementui-lts": "^2.16.0",
-        "eslint-plugin-html": "^6.0.0",
-        "highlight.js": "^11.9.0",
-        "install": "^0.13.0",
-        "jquery": "^3.6.1",
-        "js-cookie": "2.2.0",
-        "jsencrypt": "^3.2.1",
-        "less": "^3.10.3",
-        "less-loader": "^5.0.0",
-        "lodash": "^4.17.21",
-        "lodash.clonedeep": "^4.5.0",
-        "lodash.frompairs": "^4.0.1",
-        "lodash.get": "^4.4.2",
-        "lodash.has": "^4.5.2",
-        "lodash.includes": "^4.3.0",
-        "lodash.isempty": "^4.4.0",
-        "lodash.isequal": "^4.5.0",
-        "lodash.isplainobject": "^4.0.6",
-        "lodash.set": "^4.3.2",
-        "lodash.topairs": "^4.3.0",
-        "lodash.values": "^4.3.0",
-        "markdown-it": "^13.0.2",
-        "markdown-it-link-attributes": "^4.0.1",
-        "moment": "^2.29.4",
-        "moment-parseformat": "^4.0.0",
-        "normalize.css": "7.0.0",
-        "npm": "^7.8.0",
-        "nprogress": "0.2.0",
-        "path-to-regexp": "3.3.0",
-        "sortablejs": "^1.15.6",
-        "v-sanitize": "^0.0.13",
-        "vue": "2.6.10",
-        "vue-codemirror": "4.0.6",
-        "vue-cookie": "^1.1.4",
-        "vue-echarts": "^5.0.0-beta.0",
-        "vue-i18n": "^8.15.5",
-        "vue-json-editor": "^1.4.3",
-        "vue-markdown": "^2.2.4",
-        "vue-password-strength-meter": "^1.7.2",
-        "vue-router": "3.0.6",
-        "vue-select": "^3.9.5",
-        "vuejs-logger": "^1.5.4",
-        "vuex": "3.1.0",
-        "watermark-js-plus": "^1.5.8",
-        "xss": "^1.0.14",
-        "xterm": "^4.5.0",
-        "xterm-addon-fit": "^0.3.0",
-        "zxcvbn": "^4.4.2"
-    },
-    "devDependencies": {
-        "@babel/core": "7.18.6",
-        "@babel/register": "7.0.0",
-        "@vue/cli-plugin-babel": "3.6.0",
-        "@vue/cli-plugin-eslint": "^3.9.1",
-        "@vue/cli-plugin-unit-jest": "3.6.3",
-        "@vue/cli-service": "3.6.0",
-        "@vue/test-utils": "1.0.0-beta.29",
-        "autoprefixer": "^9.5.1",
-        "babel-core": "7.0.0-bridge.0",
-        "babel-eslint": "10.0.1",
-        "babel-jest": "23.6.0",
-        "chalk": "2.4.2",
-        "compression-webpack-plugin": "^6.1.1",
-        "connect": "3.6.6",
-        "deasync": "^0.1.29",
-        "eslint": "^5.15.3",
-        "eslint-plugin-spellcheck": "^0.0.20",
-        "eslint-plugin-vue": "5.2.2",
-        "eslint-plugin-vue-i18n": "^0.3.0",
-        "github-markdown-css": "^5.1.0",
-        "html-webpack-plugin": "3.2.0",
-        "husky": "^4.2.3",
-        "less-loader": "^5.0.0",
-        "lint-staged": "^10.1.2",
-        "mockjs": "1.0.1-beta3",
-        "pretty-bytes": "^5.6.0",
-        "runjs": "^4.3.2",
-        "sass": "~1.32.6",
-        "sass-loader": "^7.1.0",
-        "script-ext-html-webpack-plugin": "2.1.3",
-        "script-loader": "0.7.2",
-        "serve-static": "^1.16.0",
-        "strip-ansi": "^7.1.0",
-        "svg-sprite-loader": "4.1.3",
-        "svgo": "1.2.2",
-        "vue-i18n-extract": "^1.1.1",
-        "vue-template-compiler": "2.6.10"
-    },
-    "engines": {
-        "node": ">=8.9",
-        "npm": ">= 3.0.0"
-    },
-    "browserslist": [
-        "> 1%",
-        "last 4 versions",
-        "ie 11"
-    ],
-    "husky": {
-        "hooks": {
-            "pre-commit": "lint-staged"
-        }
-    },
-    "lint-staged": {
-        "src/**/*.{js,vue}": [
-            "eslint --fix"
-        ]
-    },
-    "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  "name": "lina",
+  "version": "v4.0.0",
+  "description": "JumpServer Web UI",
+  "author": "JumpServer Team <support@lxware.hk>",
+  "license": "GPL-3.0-or-later",
+  "scripts": {
+    "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
+    "serve": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
+    "build": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service build",
+    "build:prod": "vue-cli-service build",
+    "build:stage": "vue-cli-service build --mode staging",
+    "preview": "node build/index.js --preview",
+    "lint": "eslint --ext .js,.vue src",
+    "fix": "eslint --ext .js,.vue --fix src",
+    "test:unit": "jest --clearCache && vue-cli-service test:unit",
+    "test:ci": "npm run lint && npm run test:unit",
+    "svgo": "svgo -f src/icons/svg --config=src/icas/svgo.yml",
+    "vue-i18n-extract": "vue-i18n-extract",
+    "vue-i18n-report": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json'",
+    "vue-i18n-report-json": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -o /tmp/abc.json",
+    "vue-i18n-report-add-miss": "vue-i18n-extract report -v './src/**/*.?(js|vue)' -l './src/i18n/langs/**/*.json' -a",
+    "diff-i18n": "python ./src/i18n/langs/i18n-util.py diff en ja zh_Hant",
+    "apply-i18n": "python ./src/i18n/langs/i18n-util.py apply en ja zh_Hant"
+  },
+  "dependencies": {
+    "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+    "@fontsource/open-sans": "^5.0.24",
+    "@kangc/v-md-editor": "^1.7.12",
+    "@traptitech/markdown-it-katex": "^3.6.0",
+    "@ztree/ztree_v3": "3.5.44",
+    "axios": "0.28.0",
+    "axios-retry": "^3.1.9",
+    "babel-loader": "^10.0.0",
+    "cache-loader": "^4.1.0",
+    "caniuse-lite": "^1.0.30001642",
+    "cron-parser": "^4.0.0",
+    "crypto-js": "^4.1.1",
+    "css-color-function": "^1.3.3",
+    "decimal.js": "^10.4.3",
+    "deepmerge": "^4.2.2",
+    "dompurify": "^3.1.6",
+    "echarts": "4.7.0",
+    "element-ui": "^2.15.14",
+    "elementui-lts": "^2.16.0",
+    "eslint-plugin-html": "^6.0.0",
+    "highlight.js": "^11.9.0",
+    "install": "^0.13.0",
+    "jquery": "^3.6.1",
+    "js-cookie": "2.2.0",
+    "jsencrypt": "^3.2.1",
+    "less": "^3.10.3",
+    "less-loader": "^5.0.0",
+    "lodash": "^4.17.21",
+    "lodash.clonedeep": "^4.5.0",
+    "lodash.frompairs": "^4.0.1",
+    "lodash.get": "^4.4.2",
+    "lodash.has": "^4.5.2",
+    "lodash.includes": "^4.3.0",
+    "lodash.isempty": "^4.4.0",
+    "lodash.isequal": "^4.5.0",
+    "lodash.isplainobject": "^4.0.6",
+    "lodash.set": "^4.3.2",
+    "lodash.topairs": "^4.3.0",
+    "lodash.values": "^4.3.0",
+    "markdown-it": "^13.0.2",
+    "markdown-it-link-attributes": "^4.0.1",
+    "moment": "^2.29.4",
+    "moment-parseformat": "^4.0.0",
+    "normalize.css": "7.0.0",
+    "npm": "^7.8.0",
+    "nprogress": "0.2.0",
+    "path-to-regexp": "3.3.0",
+    "sortablejs": "^1.15.6",
+    "v-sanitize": "^0.0.13",
+    "vue": "2.6.10",
+    "vue-codemirror": "4.0.6",
+    "vue-cookie": "^1.1.4",
+    "vue-echarts": "^5.0.0-beta.0",
+    "vue-i18n": "^8.15.5",
+    "vue-json-editor": "^1.4.3",
+    "vue-markdown": "^2.2.4",
+    "vue-password-strength-meter": "^1.7.2",
+    "vue-router": "3.0.6",
+    "vue-select": "^3.9.5",
+    "vuejs-logger": "^1.5.4",
+    "vuex": "3.1.0",
+    "watermark-js-plus": "^1.5.8",
+    "xss": "^1.0.14",
+    "xterm": "^4.5.0",
+    "xterm-addon-fit": "^0.3.0",
+    "zxcvbn": "^4.4.2"
+  },
+  "devDependencies": {
+    "@babel/core": "7.18.6",
+    "@babel/register": "7.0.0",
+    "@vue/cli-plugin-babel": "3.6.0",
+    "@vue/cli-plugin-eslint": "^3.9.1",
+    "@vue/cli-plugin-unit-jest": "3.6.3",
+    "@vue/cli-service": "3.6.0",
+    "@vue/test-utils": "1.0.0-beta.29",
+    "autoprefixer": "^9.5.1",
+    "babel-core": "6.26.3",
+    "babel-eslint": "10.0.1",
+    "babel-jest": "23.6.0",
+    "chalk": "2.4.2",
+    "compression-webpack-plugin": "^6.1.1",
+    "connect": "3.6.6",
+    "deasync": "^0.1.29",
+    "eslint": "^5.15.3",
+    "eslint-config-prettier": "^6.15.0",
+    "eslint-plugin-prettier": "^3.4.1",
+    "eslint-plugin-spellcheck": "^0.0.20",
+    "eslint-plugin-vue": "5.2.2",
+    "eslint-plugin-vue-i18n": "^0.3.0",
+    "github-markdown-css": "^5.1.0",
+    "html-webpack-plugin": "3.2.0",
+    "husky": "^4.2.3",
+    "less-loader": "^5.0.0",
+    "lint-staged": "^10.1.2",
+    "mockjs": "1.0.1-beta3",
+    "prettier": "^3.6.2",
+    "pretty-bytes": "^5.6.0",
+    "runjs": "^4.3.2",
+    "sass": "~1.32.6",
+    "sass-loader": "^7.1.0",
+    "script-ext-html-webpack-plugin": "2.1.3",
+    "script-loader": "0.7.2",
+    "serve-static": "^1.16.0",
+    "strip-ansi": "^7.1.0",
+    "svg-sprite-loader": "4.1.3",
+    "svgo": "1.2.2",
+    "vue-i18n-extract": "^1.1.1",
+    "vue-template-compiler": "2.6.10",
+    "webpack": "^4.28.4"
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 4 versions",
+    "ie 11"
+  ],
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "src/**/*.{js,vue}": [
+      "eslint --fix"
+    ]
+  }
 }
--- a/src/assets/img/dream_bg.png
+++ b/src/assets/img/dream_bg.png
--- a/src/components/Apps/VariablesHelpTextDialog/index.vue
+++ b/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>
--- a/src/components/Common/DataActions/index.vue
+++ b/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;
    }
--- a/src/components/Dashboard/LineChart.vue
+++ b/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: {
--- a/src/components/Form/DataForm/index.vue
+++ b/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
    }
  }
 }
--- a/src/components/Form/FormFields/NestedObjectSelect2.vue
+++ b/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>
--- a/src/components/Form/FormFields/TagInput.vue
+++ b/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>
--- a/src/components/Widgets/Announcement/index.vue
+++ b/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>
--- a/src/components/Widgets/Icon/index.vue
+++ b/src/components/Widgets/Icon/index.vue
@@ -1,6 +1,6 @@
 <script>
 export default {
-  name: 'Index',
+  name: 'Icon',
  props: {
    icon: {
      type: String,
--- a/src/components/index.js
+++ b/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'
--- a/src/layout/components/NavHeader/AccountDropdown.vue
+++ b/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}`
--- a/src/layout/components/NavHeader/Search.vue
+++ b/src/layout/components/NavHeader/Search.vue
@@ -0,0 +1,633 @@
+<template>
+  <span ref="root" class="global-search">
+    <!-- 搜索触发按钮 -->
+    <div class="search-trigger" @click="openPanel">
+      <el-input
+        v-model="search"
+        :placeholder="$t('Search')"
+        class="search-input"
+        readonly
+        prefix-icon="el-icon-search"
+        @keydown.esc.prevent="closePanel"
+        @clear="clearSearch"
+      >
+        <template slot="suffix">
+          <span class="search-shortcut">{{ shortcutText }}</span>
+        </template>
+      </el-input>
+    </div>
+
+    <!-- 搜索模态框 -->
+    <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%"
+      @close="closePanel"
+    >
+      <div class="search-modal-content">
+        <!-- 搜索框 -->
+        <div class="search-input-wrapper">
+          <el-input
+            ref="panelSearchInput"
+            v-model="search"
+            :placeholder="$t('Search')"
+            :clearable="true"
+            size="large"
+            prefix-icon="el-icon-search"
+            @input="onInput"
+            @keydown.enter.prevent="onEnter"
+          />
+        </div>
+
+        <!-- 搜索结果内容 -->
+        <div class="search-results">
+          <div v-if="loading" class="section loading">{{ $t('Loading') }}...</div>
+
+          <template v-if="showHistory">
+            <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 history"
+                :key="'h-' + index"
+                class="item"
+                @click="applyHistory(item)"
+              >
+                <i class="el-icon-time icon" />
+                <span class="label">{{ item.q }}</span>
+                <i class="el-icon-arrow-right go" />
+              </li>
+            </ul>
+          </template>
+
+          <template v-if="routeSuggestions.length">
+            <div class="section-title">{{ $t('Routes') }}</div>
+            <ul class="list">
+              <li
+                v-for="route in routeSuggestions"
+                :key="'r-' + route.name + route.path"
+                class="item"
+                @click="navigateRoute(route)"
+              >
+                <i class="el-icon-location-outline icon" />
+                <span class="label">{{ route.title || route.name || route.path }}</span>
+                <span class="sub">{{ route.path }}</span>
+              </li>
+            </ul>
+          </template>
+
+          <template v-if="options.length">
+            <div v-for="group in options" :key="'g-' + group.label" class="section">
+              <div class="section-title">{{ group.label }}</div>
+              <ul class="list">
+                <li
+                  v-for="item in group.options"
+                  :key="item.value"
+                  class="item"
+                  @click="handleSearch(item)"
+                >
+                  <Icon :icon="iconMap[item.model] || 'el-icon-document'" class="icon" />
+                  <span class="label">{{ item.name }}</span>
+                  <span class="sub">{{ item.content }}</span>
+                </li>
+              </ul>
+            </div>
+          </template>
+
+          <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>
+  </span>
+</template>
+
+<script>
+import _ from 'lodash'
+import { mapGetters } from 'vuex'
+import { ObjectLocalStorage } from '@/utils/common'
+import Icon from '@/components/Widgets/Icon/index.vue'
+
+export default {
+  name: 'Search',
+  components: {
+    Icon
+  },
+  data() {
+    return {
+      search: '',
+      loading: false,
+      options: [],
+      isOpen: false,
+      history: [],
+      routeSuggestions: [],
+      routes: [],
+      iconMap: {
+        'Account': 'accounts',
+        'Asset': 'assets',
+        'User': 'user-o',
+        'UserGroup': 'user-group',
+        'AssetPermission': 'permission'
+      },
+      historyStore: new ObjectLocalStorage('globalSearchHistory')
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'viewRoutes'
+    ]),
+    isEmpty() {
+      return !this.routeSuggestions.length && this.options.length === 0
+    },
+    showHistory() {
+      return this.history.length > 0 && !this.search
+    },
+    shortcutText() {
+      return this.isMac ? '⌘K' : 'Ctrl+K'
+    },
+    isMac() {
+      return navigator.platform.toUpperCase().indexOf('MAC') >= 0
+    }
+  },
+  mounted() {
+    this.loadHistory()
+    this.buildRouteSuggestions()
+    this.bindKeyboardShortcut()
+  },
+  beforeDestroy() {
+    this.unbindKeyboardShortcut()
+  },
+  methods: {
+    openPanel() {
+      this.isOpen = true
+      this.buildRouteSuggestions()
+      this.$nextTick(() => {
+        this.$refs.panelSearchInput?.focus()
+      })
+    },
+    closePanel() {
+      this.isOpen = false
+    },
+    onInput() {
+      this.openPanel()
+      this.debouncedQuery()
+    },
+    clearSearch() {
+      this.search = ''
+      this.options = []
+      this.buildRouteSuggestions()
+    },
+    onEnter() {
+      if (this.options.length > 0) {
+        this.handleSearch(this.options[0].options[0])
+      }
+    },
+    debouncedQuery: _.debounce(function() {
+      this.searchQuery(this.search)
+    }, 300),
+    async searchQuery(q) {
+      if (!q) {
+        this.options = []
+        return
+      }
+      this.loading = true
+      const url = '/api/v1/search/?q=' + q
+      try {
+        const res = await this.$axios.get(url)
+        let options = res || []
+        options = _.groupBy(res, 'model_label')
+        this.options = Object.keys(options).map(key => ({
+          label: key,
+          options: options[key]
+        }))
+      } catch (error) {
+        console.error('Search error:', error)
+        this.options = []
+      } finally {
+        this.loading = false
+      }
+    },
+    handleSearch(item) {
+      const route = {
+        name: item.model + 'Detail',
+        params: { id: item.id }
+      }
+      this.addToHistory(this.search)
+      this.$router.push(route)
+      this.closePanel()
+    },
+    navigateRoute(route) {
+      this.$router.push(route.path)
+      this.closePanel()
+    },
+    filterRouteSuggestions(q) {
+      if (!q) {
+        this.routeSuggestions = []
+        return
+      }
+      this.routeSuggestions = this.routes.filter(r => {
+        const title = r.title || r.name || r.path
+        return title.toLowerCase().includes(q.toLowerCase()) || r.path.toLowerCase().includes(q.toLowerCase())
+      }).slice(0, 5)
+    },
+    buildRouteSuggestions() {
+      if (this.routes.length > 0) {
+        return
+      }
+      const allRoutes = this.viewRoutes
+      const flat = []
+      const walk = (routes, parentPath = '') => {
+        for (const r of routes) {
+          const path = parentPath + r.path
+          if (r.path && r.path !== '/' && !r.hidden) {
+            flat.push({
+              name: r.name,
+              path: path,
+              title: r.meta?.title
+            })
+          }
+
+          if (r.children && r.children.length) {
+            walk(r.children, path)
+          }
+        }
+      }
+      walk(allRoutes)
+      this.routes = flat
+    },
+    loadHistory() {
+      this.history = (this.historyStore.get('list') || []).filter(i => i.q)
+    },
+    addToHistory(q) {
+      const entry = { q: q }
+      const list = this.historyStore.get('list') || []
+      const next = [
+        entry,
+        ...list.filter(i => i.q !== entry.q)
+      ].slice(0, 10)
+      this.historyStore.set('list', next)
+      this.history = next
+    },
+    applyHistory(h) {
+      this.search = h.q
+      this.onInput()
+    },
+    clearHistory() {
+      this.historyStore.set('list', [])
+      this.history = []
+    },
+    bindKeyboardShortcut() {
+      document.addEventListener('keydown', this.handleKeyboardShortcut)
+    },
+    unbindKeyboardShortcut() {
+      document.removeEventListener('keydown', this.handleKeyboardShortcut)
+    },
+    handleKeyboardShortcut(event) {
+      // 检查是否按下了正确的快捷键
+      const isCorrectKey = event.key === 'k' || event.key === 'K'
+      const isCorrectModifier = this.isMac ? event.metaKey : event.ctrlKey
+
+      if (isCorrectKey && isCorrectModifier) {
+        // 阻止默认行为
+        event.preventDefault()
+
+        // 如果当前有输入框聚焦，不触发搜索
+        const activeElement = document.activeElement
+        const isInputFocused = activeElement && (
+          activeElement.tagName === 'INPUT' ||
+          activeElement.tagName === 'TEXTAREA' ||
+          activeElement.contentEditable === 'true'
+        )
+
+        if (!isInputFocused) {
+          this.openPanel()
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.global-search {
+  position: relative;
+  width: 200px;
+  height: 40px;
+  padding: 5px 0;
+  min-width: 200px;
+
+  .search-trigger {
+    height: 30px;
+    line-height: 1;
+
+    .search-input {
+      height: 30px;
+      line-height: 1;
+      background-color: rgba(255, 255, 255, 0.1);
+      border-radius: 4px;
+      cursor: pointer;
+
+      &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+      }
+
+      ::v-deep .el-input__inner {
+        height: 30px;
+        line-height: 1;
+        background: transparent;
+        border: none;
+        color: #fff;
+        cursor: pointer;
+      }
+
+      ::v-deep .el-input__inner::placeholder {
+        color: #fff;
+        opacity: 0.7;
+      }
+
+      ::v-deep .el-input__suffix {
+        display: flex;
+        align-items: center;
+        height: 100%;
+      }
+
+      .search-shortcut {
+        color: rgba(255, 255, 255, 0.6);
+        font-size: 11px;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
+        font-weight: 500;
+        letter-spacing: 0.5px;
+        padding: 2px 6px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 3px;
+        border: 1px solid rgba(255, 255, 255, 0.2);
+        user-select: none;
+        pointer-events: none;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: 18px;
+        line-height: 1;
+      }
+    }
+  }
+}
+</style>
+
+<style lang="scss">
+/* 搜索模态框全局样式 */
+.search-modal {
+  &.el-dialog {
+    position: fixed;
+    top: 5px;
+    left: 50%;
+    transform: translateX(-50%);
+    max-height: calc(100vh - 10px);
+    max-width: calc(100vw - 10px);
+    border-radius: 5px;
+    // box-shadow: 0 0 8px 4px #00000014;
+    box-shadow: rgba(0, 0, 0, 0.2) 0px 3px 3px -2px, rgba(0, 0, 0, 0.14) 0px 3px 4px 0px, rgba(0, 0, 0, 0.12) 0px 1px 8px 0px;
+
+    .el-dialog__body {
+      padding: 0;
+    }
+
+    .el-dialog__header {
+      display: none;
+    }
+  }
+}
+
+body .v-modal {
+  opacity: 0.3;
+}
+
+.search-modal-content {
+  height: 70vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-input-wrapper {
+  padding: 20px;
+  border-bottom: 1px solid #f0f0f0;
+  // background: #fff;
+
+  .el-input {
+    .el-input__inner {
+      font-size: 14px;
+      height: 34px;
+      line-height: 34px;
+    }
+  }
+}
+
+.search-results {
+  flex: 1;
+  overflow-y: auto;
+  overflow-x: hidden;
+
+  /* 自定义滚动条 */
+  &::-webkit-scrollbar {
+    width: 6px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: #f1f1f1;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: #c1c1c1;
+    border-radius: 3px;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: #a8a8a8;
+  }
+}
+
+.section-title {
+  padding: 12px 24px 6px;
+  font-size: 12px;
+  line-height: 1.5;
+  color: #909399;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  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 {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+
+  .item {
+    display: flex;
+    align-items: center;
+    padding: 8px 24px;
+    cursor: pointer;
+    border-bottom: 1px solid #f8f9fa;
+    transition: all 0.2s ease;
+    position: relative;
+
+    &:before {
+      content: '';
+      position: absolute;
+      left: 0;
+      top: 0;
+      bottom: 0;
+      width: 3px;
+      background: transparent;
+      transition: background 0.2s ease;
+    }
+
+    &:hover {
+      background: #f8f9fa;
+    }
+
+    &:last-child {
+      border-bottom: none;
+    }
+
+    .icon {
+      // color: var(--color-primary, #409eff);
+      margin-right: 12px;
+      font-size: 14px;
+      font-weight: 400;
+    }
+
+    .label {
+      flex: 1;
+      font-size: 14px;
+      color: #333;
+      font-weight: 500;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      max-width: 60%;
+    }
+
+    .sub {
+      color: #909399;
+      font-size: 12px;
+      margin-left: 12px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex-shrink: 0;
+      width: 40%;
+      text-align: right;
+    }
+
+    .go {
+      color: #c0c4cc;
+      font-size: 12px;
+      flex-shrink: 0;
+    }
+  }
+}
+
+.loading,
+.empty {
+  padding: 32px 24px;
+  color: #909399;
+  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>
+
--- a/src/layout/components/NavHeader/index.vue
+++ b/src/layout/components/NavHeader/index.vue
@@ -1,6 +1,9 @@
 <template>
  <div class="navbar">
    <ul class="navbar-right">
+      <li class="header-item header-icon none-hover">
+        <Search @search-open="handleSearchOpen" />
+      </li>
      <li class="header-item header-icon">
        <el-tooltip :content="$tc('SiteMessageList')" :open-delay="500" effect="dark">
          <SiteMessages />
@@ -31,14 +34,18 @@
        <AccountDropdown />
      </li>
    </ul>
-    <hamburger :is-active="sidebar.opened" class="hamburger-container is-show-menu" @toggleClick="toggleSideBar" />
+    <hamburger
+      :is-active="sidebar.opened"
+      class="hamburger-container is-show-menu"
+      @toggleClick="toggleSideBar"
+    />
    <ul class="navbar-left">
      <li class="left-item">
        <div class="nav-logo">
          <Logo v-if="showLogo" :collapse="false" />
        </div>
      </li>
-      <li v-if="orgsShow" class="left-item" style="margin-left: 20px;">
+      <li v-if="orgsShow" class="left-item" style="margin-left: 20px">
        <Organization :disabled="orgsDisabled" class="organization" />
      </li>
    </ul>
@@ -57,6 +64,7 @@ import Organization from './Organization'
 import SystemSetting from './SystemSetting'
 import Logo from '../NavLeft/Logo'
 import Language from './Language'
+import Search from './Search'

 export default {
  components: {
@@ -69,19 +77,22 @@ export default {
    SiteMessages,
    SystemSetting,
    Logo,
-    Language
+    Language,
+    Search
  },
  data() {
-    return {}
+    return {
+      searchOpen: false
+    }
  },
  computed: {
-    ...mapGetters([
-      'sidebar', 'publicSettings', 'currentOrgRoles', 'currentViewRoute', 'isMobile'
-    ]),
+    ...mapGetters(['sidebar', 'publicSettings', 'currentOrgRoles', 'currentViewRoute', 'isMobile']),
    ticketsEnabled() {
-      return this.publicSettings['TICKETS_ENABLED'] &&
+      return (
+        this.publicSettings['TICKETS_ENABLED'] &&
        this.$hasLicense() &&
        this.$hasPerm('tickets.view_ticket')
+      )
    },
    showLogo() {
      return this.$store.state.settings.sidebarLogo
@@ -90,178 +101,188 @@ export default {
      return this.$route.meta?.disableOrgsChange === true
    },
    orgsShow() {
-      return (this.$route.meta?.showOrganization !== false) && this.$hasLicense()
+      return this.$route.meta?.showOrganization !== false && this.$hasLicense()
    }
  },
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
+    },
+    handleSearchOpen(val) {
+      // this.searchOpen = val
    }
  }
 }
 </script>
 <style lang="scss" scoped>
-  @import "~@/styles/variables.scss";
+@import '~@/styles/variables.scss';

-  .navbar {
-    position: relative;
-    overflow: hidden;
-    background-color: var(--banner-bg);
+.navbar {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--banner-bg);

-    ul {
-      margin: 0;
-      padding-inline-start: 0;
-    }
+  ul {
+    margin: 0;
+    padding-inline-start: 0;
+  }

-    .is-show-menu {
-      display: none;
-    }
+  .is-show-menu {
+    display: none;
+  }

-    .hamburger-container {
-      float: left;
-      height: 25px;
-      line-height: 25px;
-      margin: 8px;
-      padding: 1px 8px !important;
-      border-radius: 5px;
-      border-color: $--color-primary;
-      background-color: white;
-      color: var(--text-primary);
-      cursor: pointer;
-      transition: .2s;
-      opacity: 0.7;
-    }
+  .hamburger-container {
+    float: left;
+    height: 25px;
+    line-height: 25px;
+    margin: 8px;
+    padding: 1px 8px !important;
+    border-radius: 5px;
+    border-color: $--color-primary;
+    background-color: white;
+    color: var(--text-primary);
+    cursor: pointer;
+    transition: 0.2s;
+    opacity: 0.7;
+  }

-    .navbar-left {
-      float: left;
+  .navbar-left {
+    float: left;
+    display: flex;
+    height: 100%;
+
+    .left-item {
      display: flex;
-      height: 100%;
-
-      .left-item {
-        display: flex;
-        align-items: center;
-        list-style: none;
-
-        .nav-logo {
-          width: 200px;
-
-          &:hover {
-            background: rgba(0, 0, 0, 12%);
-          }
-        }
-
-        .organization {
-          display: flex;
-          align-items: center;
-          padding: 0 0 0 15px !important;
-          border-radius: 3px;
-          background-color: rgba(255, 255, 255, .10);
-          color: #fff;
-          font-weight: 600;
-          font-size: 15px;
-          max-width: 250px;
-
-          ::v-deep .el-input__inner {
-            padding-left: 25px;
-          }
-
-          ::v-deep .el-input.is-disabled > input {
-            background: none;
-          }
-
-          &:hover {
-            background-color: rgba(0, 0, 0, .12) !important;
-          }
-        }
-
-        // 未找到与之对应的
-        & ::v-deep .el-submenu__title {
-          font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-          padding: 0 8px;
-          line-height: $headerHeight;
-          height: $headerHeight;
-        }
-
-        // 未找到与之对应的
-        & ::v-deep .svg-icon {
-          color: #FFF !important;
-        }
-      }
-    }
-
-    .navbar-right {
-      display: flex;
-      float: right;
      align-items: center;
-      margin-right: 10px;
+      list-style: none;

-      .header-item {
-        display: flex;
-        line-height: $headerHeight;
-        padding-right: 10px;
-        padding-left: 10px;
-
-        & ::v-deep .svg-icon {
-          line-height: 40px;
-          color: #FFF !important;
-          font-size: 15px;
-        }
-
-        & ::v-deep .el-badge {
-          vertical-align: top;
-
-          .el-link {
-            vertical-align: baseline;
-          }
-
-          .el-badge__content--primary {
-            background-color: #fff;
-          }
-
-          .el-badge__content {
-            top: 8px;
-            height: 15px;
-            line-height: 15px;
-            border: none;
-            color: var(--color-primary);
-          }
-        }
-
-        & ::v-deep i {
-          color: #FFF;
-          font-size: 16px;
-
-          &.el-icon-arrow-down {
-            font-size: 13px;
-          }
-        }
-
-        & ::v-deep i.el-dialog__close.el-icon-close {
-          color: #7c7e7f;
-        }
+      .nav-logo {
+        width: 200px;

        &:hover {
          background: rgba(0, 0, 0, 12%);
        }
      }
-    }
-  }

-  @media screen and (max-width: 1006px) {
-    .navbar {
-      .is-show-menu {
-        display: block;
+      .organization {
+        display: flex;
+        align-items: center;
+        padding: 0 0 0 15px !important;
+        border-radius: 3px;
+        background-color: rgba(255, 255, 255, 0.1);
+        color: #fff;
+        font-weight: 600;
+        font-size: 15px;
+        max-width: 250px;
+
+        ::v-deep .el-input__inner {
+          padding-left: 25px;
+        }
+
+        ::v-deep .el-input.is-disabled > input {
+          background: none;
+        }
+
+        &:hover {
+          background-color: rgba(0, 0, 0, 0.12) !important;
+        }
      }

-      .navbar-left {
-        display: none;
+      // 未找到与之对应的
+      & ::v-deep .el-submenu__title {
+        font-family: 'Open Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
+        padding: 0 8px;
+        line-height: $headerHeight;
+        height: $headerHeight;
+      }
+
+      // 未找到与之对应的
+      & ::v-deep .svg-icon {
+        color: #fff !important;
      }
    }
  }

-  @media screen and (max-width: 480px) {
-    .active-menu {
-      display: none !important;;
+  .navbar-right {
+    display: flex;
+    float: right;
+    align-items: center;
+    margin-right: 10px;
+
+    .header-item {
+      display: flex;
+      line-height: $headerHeight;
+      padding-right: 10px;
+      padding-left: 10px;
+
+      & ::v-deep .svg-icon {
+        line-height: 40px;
+        color: #fff;
+        font-size: 15px;
+      }
+
+      & ::v-deep .el-badge {
+        vertical-align: top;
+
+        .el-link {
+          vertical-align: baseline;
+        }
+
+        .el-badge__content--primary {
+          background-color: #fff;
+        }
+
+        .el-badge__content {
+          top: 8px;
+          height: 15px;
+          line-height: 15px;
+          border: none;
+          color: var(--color-primary);
+        }
+      }
+
+      & ::v-deep i {
+        color: #fff;
+        font-size: 16px;
+
+        &.el-icon-arrow-down {
+          font-size: 13px;
+        }
+      }
+
+      & ::v-deep i.el-dialog__close.el-icon-close {
+        color: #7c7e7f;
+      }
+
+      &.none-hover {
+        padding: 0;
+        &:hover {
+          background: none;
+        }
+      }
+
+      &:hover {
+        background: rgba(0, 0, 0, 12%);
+      }
    }
  }
+}
+
+@media screen and (max-width: 1006px) {
+  .navbar {
+    .is-show-menu {
+      display: block;
+    }
+
+    .navbar-left {
+      display: none;
+    }
+  }
+}
+
+@media screen and (max-width: 480px) {
+  .active-menu {
+    display: none !important;
+  }
+}
 </style>
--- a/src/layout/components/NavLeft/index.vue
+++ b/src/layout/components/NavLeft/index.vue
@@ -1,18 +1,24 @@
 <template>
-  <div :class="{'has-logo': showLogo, 'show-orgs': showOrgs, 'collapsed': isCollapse}" class="left-side-wrapper">
+  <div
+    :class="{ 'has-logo': showLogo, 'show-orgs': showOrgs, collapsed: isCollapse }"
+    class="left-side-wrapper"
+  >
    <div class="nav-header">
      <div class="active-mobile">
        <Organization v-if="$hasLicense()" class="organization" />
      </div>
      <div class="nav-title">
        <span :class="switchViewOtherClasses" class="switch-view active-switch-view">
-          <el-popover
-            :open-delay="200"
-            placement="right-start"
-            trigger="hover"
-          >
+          <el-popover :open-delay="200" placement="right-start" trigger="hover">
            <span slot="reference" style="width: 100%">
-              <el-tooltip v-show="!isCollapse" :content="isRouteMeta.title" :open-delay="1000" placement="bottom" effect="dark" class="view-title">
+              <el-tooltip
+                v-show="!isCollapse"
+                :content="isRouteMeta.title"
+                :open-delay="1000"
+                placement="bottom"
+                effect="dark"
+                class="view-title"
+              >
                <span class="text-overflow">{{ isRouteMeta.title || '' }}</span>
              </el-tooltip>
              <span class="icon-zone">
@@ -49,10 +55,14 @@
    </div>
    <div class="nav-footer">
      <div class="toggle-bar">
-        <Hamburger :is-active="sidebar.opened" class="hamburger-container" @toggleClick="toggleSideBar" />
+        <Hamburger
+          :is-active="sidebar.opened"
+          class="hamburger-container"
+          @toggleClick="toggleSideBar"
+        />
      </div>
    </div>
-    <div :class="{'is-show': viewShown}" class="mobile-menu" @click="viewShown = false">
+    <div :class="{ 'is-show': viewShown }" class="mobile-menu" @click="viewShown = false">
      <ViewSwitcher :mode="'vertical'" />
    </div>
  </div>
@@ -81,10 +91,7 @@ export default {
    }
  },
  computed: {
-    ...mapGetters([
-      'currentViewRoute',
-      'sidebar'
-    ]),
+    ...mapGetters(['currentViewRoute', 'sidebar']),
    defaultOpensMenu() {
      return []
    },
@@ -127,8 +134,7 @@ export default {
      return this.currentViewRoute.meta || {}
    }
  },
-  mounted() {
-  },
+  mounted() {},
  methods: {
    toggleSideBar() {
      this.$store.dispatch('app/toggleSideBar')
@@ -143,7 +149,9 @@ export default {
      }, 500)
    },
    setLeastMenuOpen() {
-      const hasOpened = document.querySelector('.el-submenu-sidebar.submenu-item.el-submenu.is-opened')
+      const hasOpened = document.querySelector(
+        '.el-submenu-sidebar.submenu-item.el-submenu.is-opened'
+      )
      if (hasOpened) {
        return
      }
@@ -156,7 +164,7 @@ export default {
 }
 </script>
 <style lang="scss" scoped>
-@import "~@/styles/variables.scss";
+@import '~@/styles/variables.scss';

 $mobileHeight: 40px;
 $origin-color: #ffffff;
@@ -235,7 +243,7 @@ $hover-border-color: #d2d2d2;

          .view-title {
            width: calc(100% - 10px);
-            display: inline-block
+            display: inline-block;
          }

          .icon-zone {
@@ -299,7 +307,7 @@ $hover-border-color: #d2d2d2;
  }

  .is-show {
-    display: block !important;;
+    display: block !important;
  }

  .mobile-menu {
--- a/src/router/audit/index.js
+++ b/src/router/audit/index.js
@@ -90,7 +90,8 @@ export default {
      meta: {
        title: i18n.t('Report'),
        icon: 'report',
-        permissions: []
+        permissions: [],
+        licenseRequired: true
      },
      children: ReportsRoutes
    }
--- a/src/router/console/accounts.js
+++ b/src/router/console/accounts.js
@@ -22,6 +22,7 @@ export default [
        component: () => import('@/views/accounts/Account/index.vue'),
        meta: {
          title: i18n.t('AssetAccount'),
+          showInSearch: true,
          app: 'accounts',
          permissions: ['accounts.view_account']
        }
@@ -29,8 +30,8 @@ export default [
      {
        path: ':id',
        component: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
-        name: 'AssetAccountDetail',
-        meta: { title: i18n.t('AssetAccountDetail') },
+        name: 'AccountDetail',
+        meta: { title: i18n.t('AccountDetail') },
        hidden: true
      }
    ]
--- a/src/router/console/assets.js
+++ b/src/router/console/assets.js
@@ -20,7 +20,7 @@ export default [
        path: '',
        name: 'AssetList',
        component: () => import('@/views/assets/Asset/AssetList/index.vue'),
-        meta: { title: i18n.t('AssetList') }
+        meta: { title: i18n.t('AssetList'), showInSearch: true }
      },
      {
        path: ':id',
--- a/src/router/console/sessions.js
+++ b/src/router/console/sessions.js
@@ -34,14 +34,12 @@ export default [
  {
    path: `${BASE_URL}/luna/?_=${Date.now()}`,
    name: 'WebTerminal',
-    // component: () => window.open(`/luna/?_=${Date.now()}`),
    meta: { title: i18n.t('WebTerminal') }
    // hidden: true
  },
  {
    path: `${BASE_URL}/koko/elfinder/sftp/?`,
    name: 'FileManagement',
-    // component: () => window.open(`/koko/elfinder/sftp/?`),
    meta: { title: i18n.t('FileManagement') }
  }
 ]
--- a/src/utils/vue/message.js
+++ b/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)
 }

--- a/src/views/assets/Asset/AssetCreateUpdate/DatabaseCreateUpdate.vue
+++ b/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]
      }
--- a/src/views/assets/Asset/AssetList/index.vue
+++ b/src/views/assets/Asset/AssetList/index.vue
@@ -84,7 +84,7 @@ export default {
      nameComponentMap[item.name] = item
    }
    this.$axios.get('/api/v1/assets/categories/').then(categories => {
-      for (const item of categories.results) {
+      for (const item of categories) {
        const name = item.value
        // 如果报错，需要在上面的 submenu 中添加对应的组件
        nameComponentMap[name]['hidden'] = false
--- a/src/views/assets/Zone/ZoneDetail/GatewayList.vue
+++ b/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
--- a/src/views/ops/Adhoc/QuickJob.vue
+++ b/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,
--- a/src/views/ops/File/index.vue
+++ b/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,
@@ -522,7 +523,8 @@ export default {
  min-width: 925px;

  ::v-deep .el-card__body {
-    div {
+    > div:first-child {
+      //不要影响到 el-progress
      display: flex;
      position: relative;

--- a/src/views/settings/Msg/Email/EmailTemplate.vue
+++ b/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
--- a/src/views/settings/Msg/Email/index.vue
+++ b/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',
--- a/src/views/settings/Msg/Email/markDownEditor.vue
+++ b/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>
--- a/src/views/settings/Msg/MsgTemplate/index.vue
+++ b/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>
--- a/src/views/settings/Msg/index.vue
+++ b/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',
--- a/src/views/settings/Security/Session.vue
+++ b/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,
--- a/src/views/settings/Security/WatermarkHelpDialog.vue
+++ b/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() {
--- a/src/views/tickets/components/Comments.vue
+++ b/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(() => {
--- a/yarn.lock
+++ b/yarn.lock
Author	SHA1	Message	Date
ZhaoJiSen	1ed853e19a	Revert "Fixed: Fix the issue of storage failure when updating components." This reverts commit `2002519f30`.	2025-09-15 14:41:01 +08:00
zhaojisen	2002519f30	Fixed: Fix the issue of storage failure when updating components.	2025-09-15 14:40:58 +08:00
zhaojisen	c8f3e71d2c	Fixed: Fixed the issue of failing to add a gateway in domain details.	2025-09-15 14:22:30 +08:00
w940853815	bd8f21e17a	perf: Init template name	2025-09-12 18:32:13 +08:00
w940853815	0981b1854b	perf: Remember select template	2025-09-12 18:32:13 +08:00
w940853815	94ab823b50	fix: Trim whitespace in email template content	2025-09-12 18:32:13 +08:00
w940853815	b378f41c07	fix: vue el-autocomplete flashes	2025-09-12 16:39:35 +08:00
zhaojisen	6cce077441	Confirm dialog for new announcement content	2025-09-11 17:11:40 +08:00
ibuler	361e522c5e	perf: tag input min width	2025-09-11 16:53:26 +08:00
w940853815	08161c892e	fix: LineChart component error	2025-09-11 15:09:05 +08:00
ibuler	39e4fdf40c	perf: 优化 action btn 的大小	2025-09-11 15:03:37 +08:00
w940853815	11011f6b68	fix: Modify Dialog components import	2025-09-11 14:51:34 +08:00
mikebofs	7eb2e08f03	perf: add search place holder	2025-09-10 18:18:47 +08:00
w940853815	7d422bea51	perf: And license validation in msg template page	2025-09-10 17:24:58 +08:00
feng	3367ec624c	perf: Ticket not display comment	2025-09-10 17:07:55 +08:00
fit2bot	091db8e6aa	feat: setting email template content (#5173 ) * feat: setting email template content * perf: template list * perf: show variable help text * perf: custom template render to string * perf: help text * perf: update email template variable structure and improve formatting * perf: Template content reset * perf: typo MsgTemplate * fix: email page error * fix: package.json conflict * perf: Update Dockerfile with new base image tag --------- Co-authored-by: w940853815 <940853815@qq.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>	2025-09-10 16:49:14 +08:00
feng	5d0f2c5c60	perf: Message zIndex 20000	2025-09-09 15:09:20 +08:00
feng	71b9e87786	perf: Update mysql db_name not required	2025-09-09 11:09:14 +08:00
fit2bot	ae0b3572f8	perf: Complete the search (#5175 ) * perf: global search * perf: Update Dockerfile with new base image tag * perf: 完成基本搜索 * perf: show search direct * perf: change search style * perf: 优化 panel 格式，不再用 select * perf: search add route * perf: add route search * perf: change view * perf: add to body * perf: 再次优化格式 * perf: 优化了一些显示 * perf: 基本完成搜索功能 * perf: 完成搜索 * perf: Update Dockerfile with new base image tag * perf: merge with remote --------- Co-authored-by: mikebofs <mikebofs@gmail.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: ibuler <ibuler@qq.com>	2025-09-05 17:23:37 +08:00
fit2bot	217a09ebd6	perf: global search (#5171 ) * perf: global search * perf: Update Dockerfile with new base image tag * perf: 完成基本搜索 * perf: show search direct * perf: change search style * perf: 优化 panel 格式，不再用 select * perf: search add route * perf: add route search * perf: change view --------- Co-authored-by: ibuler <ibuler@qq.com>	2025-09-05 16:39:37 +08:00
w940853815	ca61a75997	perf: refine layout of card body to avoid affecting el-progress	2025-09-01 10:09:19 +08:00
ibuler	3310459b2c	perf: reports menus	2025-08-28 15:08:20 +08:00