Fixed: Tree icons

v4.10.2

.github/workflows/.github/workflows/llm-code-review.yml

@@ -0,0 +1,28 @@
+name: LLM Code Review
+
+permissions:
+  contents: read
+  pull-requests: write
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  llm-code-review:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: fit2cloud/LLM-CodeReview-Action@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
+          OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
+          LANGUAGE: English
+          OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
+          MODEL: qwen2-1.5b-instruct
+          PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
+          top_p: 1
+          temperature: 1
+          # max_tokens: 10000
+          MAX_PATCH_LENGTH: 10000 
+          IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
+          FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"

.github/workflows/build-base-image.yml

@@ -15,8 +15,13 @@ jobs:
     runs-on: ubuntu-latest
 
     steps:
+      - name: Lock Pull Request
+        run: |
+          curl -X POST -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+          -d '{"state":"pending", "description":"Action running, merge disabled", "context":"Lock PR"}' \
+          "https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }}"
       - name: Checkout repository
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v3
@@ -59,3 +64,9 @@ jobs:
           git push
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: Unlock Pull Request
+        run: |
+          curl -X POST -H "Authorization: token ${{ secrets.GITHUB_TOKEN }}" \
+          -d '{"state":"success", "description":"Action running, merge disabled", "context":"Lock PR"}' \
+          "https://api.github.com/repos/${{ github.repository }}/statuses/${{ github.sha }}"

.github/workflows/llm-code-review.yml

@@ -0,0 +1,28 @@
+name: LLM Code Review
+
+permissions:
+  contents: read
+  pull-requests: write
+
+on:
+  pull_request:
+    types: [opened, reopened, synchronize]
+
+jobs:
+  llm-code-review:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: fit2cloud/LLM-CodeReview-Action@main
+        env:
+          GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
+          OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
+          LANGUAGE: English
+          OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
+          MODEL: qwen2-1.5b-instruct
+          PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
+          top_p: 1
+          temperature: 1
+          # max_tokens: 10000
+          MAX_PATCH_LENGTH: 10000 
+          IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
+          FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"

.github/workflows/release-drafter.yml

@@ -31,7 +31,7 @@ jobs:
           tag: ${{ steps.get_version.outputs.TAG }}
       - uses: actions/setup-node@v2
         with:
-          node-version: '16.20'
+          node-version: '20.15'
       - name: Install dependencies
         run: yarn install
       - name: Build web

.gitignore

@@ -17,3 +17,5 @@ tests/**/coverage/
 *.sln
 .env.development
 .python-version
+
+helper.json

Dockerfile

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

jsconfig.json

@@ -5,5 +5,6 @@
         "@/*": ["src/*"]
     }
   },
+  "include": ["src"],
   "exclude": ["node_modules", "dist"]
 }

package.json

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

public/index.html

@@ -1,38 +1,90 @@
 <!DOCTYPE html>
 <html>
-  <head>
+<head>
     <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    <meta http-equiv="Expires" content="0">
+    <meta content="0" http-equiv="Expires">
-    <meta http-equiv="Pragma" content="no-cache">
+    <meta content="no-cache" http-equiv="Pragma">
-    <meta http-equiv="Cache-control" content="no-cache">
+    <meta content="no-cache" http-equiv="Cache-control">
-    <meta http-equiv="Cache" content="no-cache">
+    <meta content="no-cache" http-equiv="Cache">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
     <title><%= webpackConfig.name %></title>
-    <link rel="stylesheet" href="<%= BASE_URL %>theme/element-ui.css">
+    <link href="<%= BASE_URL %>theme/element-ui.css" rel="stylesheet">
-  </head>
+    <style>
-  <body>
+        #loading {
-    <noscript>
+            position: fixed;
-      <strong>We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+            top: 0;
-    </noscript>
+            left: 0;
-    <script>
+            width: 100vw;
-      window.onload = function() {
+            height: 100vh;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            background-color: rgba(255, 255, 255, 0.98);
+            z-index: 9999;
+        }
+
+        #loading .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid transparent;
+            border-top-color: var(--color-primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+
+        #loading .spinner::after {
+            content: '';
+            position: absolute;
+            top: -3px;
+            left: -3px;
+            width: 40px;
+            height: 40px;
+            border: 3px solid transparent;
+            border-top-color: rgba(64, 158, 255, 0.2);
+            border-radius: 50%;
+            animation: spin 2s linear infinite;
+        }
+
+        @keyframes spin {
+            0% {
+                transform: rotate(0deg);
+            }
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+<body>
+<noscript>
+    <strong>
+        We're sorry but <%= webpackConfig.name %> doesn't work properly without JavaScript enabled.
+        Please enable it to continue.
+    </strong>
+</noscript>
+<script>
+    window.onload = function () {
         if (location.pathname === '/') {
-           location.pathname = '/ui/'
+            location.pathname = '/ui/'
         }
         const pathname = window.location.pathname
         if (pathname.startsWith('/core')) {
             return
         }
-        if(pathname.indexOf('/ui') === -1) {
+        if (pathname.indexOf('/ui') === -1) {
-          window.location.href = window.location.origin + '/ui/#' + pathname
+            window.location.href = window.location.origin + '/ui/#' + pathname
         }
         if (pathname.startsWith('/ui/#/chat')) {
-          window.location.href = window.location.origin + pathname
+            window.location.href = window.location.origin + pathname
         }
-      }
+    }
-    </script>
+</script>
-    <div id="app"></div>
+<div id="app">
-    <!-- built files will be auto injected -->
+</div>
-  </body>
+<div id="loading">
+    <div class="spinner"></div>
+</div>
+<!-- built files will be auto injected -->
+</body>
 </html>

src/App.vue

@@ -5,14 +5,90 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState, mapGetters } from 'vuex'
+import { Watermark } from 'watermark-js-plus'
 
 export default {
   name: 'App',
+  data() {
+    return {
+      watermark: null
+    }
+  },
   computed: {
     ...mapState({
       isRouterAlive: state => state.common.isRouterAlive
+    }),
+    ...mapGetters({
+      currentUser: 'currentUser',
+      publicSettings: 'publicSettings'
     })
+  },
+  watch: {
+    currentUser: {
+      handler(newVal) {
+        this.createWatermark()
+      }
+    },
+    'publicSettings.SECURITY_WATERMARK_ENABLED': {
+      handler(newVal) {
+        if (!newVal) {
+          return setTimeout(() => {
+            this.watermark?.destroy()
+            this.watermark = null
+          })
+        }
+
+        this.createWatermark()
+      }
+    }
+  },
+  methods: {
+    getWaterMarkFields() {
+      const user = this.currentUser
+      const userId = user?.id || ''
+      const name = user?.name || ''
+      const userName = user?.username || ''
+      const currentTime = this.$moment(new Date()).format('YYYY-MM-DD HH:mm:ss')
+      return { userId, name, userName, currentTime }
+    },
+    getWaterMarkContent() {
+      const fields = this.getWaterMarkFields()
+      const template = this.publicSettings.SECURITY_WATERMARK_CONSOLE_CONTENT || ''
+
+      // 找出模板中所有的变量占位符 ${xxx}
+      const placeholders = template.match(/\${([^}]+)}/g) || []
+      const allVariables = {}
+
+      // 为模板中的每个变量准备值
+      placeholders.forEach(placeholder => {
+        const varName = placeholder.slice(2, -1) // 提取变量名，去掉 ${ 和 }
+        allVariables[varName] = fields[varName] !== undefined ? fields[varName] : 'N/A'
+      })
+
+      // 合并用户现有的字段和模板中可能缺失的字段
+      const safeFields = { ...fields, ...allVariables }
+
+      // 安全解析模板
+      return new Function(...Object.keys(safeFields), `return \`${template}\`;`)(...Object.values(safeFields))
+    },
+
+    createWatermark() {
+      if (this.currentUser?.username && this.publicSettings?.SECURITY_WATERMARK_ENABLED) {
+        this.watermark = new Watermark({
+          content: this.getWaterMarkContent(),
+          width: this.publicSettings?.SECURITY_WATERMARK_WIDTH,
+          height: this.publicSettings?.SECURITY_WATERMARK_HEIGHT,
+          rotate: this.publicSettings?.SECURITY_WATERMARK_ROTATE,
+          fontWeight: 'normal',
+          fontSize: this.publicSettings?.SECURITY_WATERMARK_FONT_SIZE + 'px',
+          fontColor: this.publicSettings?.SECURITY_WATERMARK_COLOR,
+          contentType: 'multi-line-text',
+          lineHeight: this.publicSettings?.SECURITY_WATERMARK_FONT_SIZE
+        })
+        this.watermark.create()
+      }
+    }
   }
 }
 </script>

src/api/asset.js

@@ -16,9 +16,9 @@ export function getSystemUserList(data) {
   })
 }
 
-export function getDomainList(data) {
+export function getZoneList(data) {
   return request({
-    url: '/api/v1/assets/domains/',
+    url: '/api/v1/assets/zones/',
     method: 'get',
     params: data
   })

src/api/ops.js

@@ -53,7 +53,7 @@ export function createJob(form) {
   })
 }
 
-export function StopJob(form) {
+export function stopJob(form) {
   return request({
     url: '/api/v1/ops/job-executions/stop/',
     method: 'post',
@@ -71,3 +71,10 @@ export function JobUploadFile(form) {
   })
 }
 
+export function auditUpdateJob(id, form) {
+  return request({
+    url: `/api/v1/audits/jobs/${id}/`,
+    method: 'patch',
+    data: form
+  })
+}

src/api/settings.js

@@ -15,6 +15,7 @@ export function testEmailSetting(data) {
     data: data
   })
 }
+
 export function importLicense(formData) {
   return request({
     url: '/api/v1/xpack/license/import',
@@ -25,6 +26,7 @@ export function importLicense(formData) {
     data: formData
   })
 }
+
 export function testLdapSetting(data, refresh = true) {
   let url = '/api/v1/settings/ldap/testing/config/'
   if (refresh) {
@@ -96,9 +98,17 @@ export function getPublicSettings(isOpen) {
     method: 'get'
   })
 }
+
 export function getLogo() {
   return request({
     url: '/api/v1/xpack/interface/setting/',
     method: 'get'
   })
 }
+
+export function getPreference() {
+  return request({
+    url: '/api/v1/users/preference/?category=luna',
+    method: 'get'
+  })
+}

src/api/users.js

@@ -8,11 +8,20 @@ export function login(data) {
   })
 }
 
-export function getProfile(token) {
+export async function getProfile(token) {
-  return request({
+  let profile = await request({
     url: '/api/v1/users/profile/',
     method: 'get'
   })
+  const perms = await request({
+    url: '/api/v1/users/profile/permissions/',
+    method: 'get'
+  })
+  profile = {
+    ...profile,
+    ...perms
+  }
+  return profile
 }
 
 export function getUserList(data) {
@@ -22,6 +31,7 @@ export function getUserList(data) {
     params: data
   })
 }
+
 export function getUserGroupList(params) {
   return request({
     url: '/api/v1/users/groups/',
@@ -29,6 +39,7 @@ export function getUserGroupList(params) {
     params: params
   })
 }
+
 export function getUserGroupDetail(id) {
   return request({
     url: `/api/v1/users/groups/${id}/`,
@@ -50,6 +61,7 @@ export function editUserGroup(data) {
     data: data
   })
 }
+
 export function updateUserGroup(id, data) {
   return request({
     url: '/api/v1/users/groups/' + id + '/',

src/assets/img/cloud/smartx.svg

@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1748326203303" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2853" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M10.24 605.184l839.168-481.28L1013.76 220.672v191.488L174.592 895.488 10.24 804.352z" fill="#0096FF" p-id="2854"></path><path d="M10.24 416.768V220.672l168.96-96.768 308.736 178.688-331.776 193.536zM541.184 717.312l331.264-195.072 141.312 88.064v194.048l-165.376 95.744z" fill="#25C764" p-id="2855"></path></svg>

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -5,10 +5,18 @@ import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSettin
 
 export const accountFieldsMeta = (vm) => {
   const defaultPrivilegedAccounts = ['root', 'administrator']
+
+  function onPrivilegedUser(value, updateForm) {
+    const maybePrivileged = defaultPrivilegedAccounts.includes(value)
+    if (maybePrivileged) {
+      updateForm({ privileged: true, secret_reset: false, push_now: false })
+    }
+  }
+
   return {
     assets: {
       component: Select2,
-      label: vm.$t('Assets'),
+      label: vm.$t('Asset'),
       rules: [Required],
       el: {
         multiple: true,
@@ -27,6 +35,9 @@ export const accountFieldsMeta = (vm) => {
       component: Select2,
       rules: [Required],
       el: {
+        get disabled() {
+          return vm.isDisabled
+        },
         multiple: false,
         ajax: {
           url: '/api/v1/accounts/account-templates/',
@@ -43,6 +54,11 @@ export const accountFieldsMeta = (vm) => {
       rules: [Required],
       label: vm.$t('AccountPolicy'),
       helpTip: vm.$t('AccountPolicyHelpText'),
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
       hidden: () => {
         return vm.platform || vm.asset
       }
@@ -50,17 +66,19 @@ export const accountFieldsMeta = (vm) => {
     name: {
       label: vm.$t('Name'),
       rules: [RequiredChange],
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
       on: {
         input: ([value], updateForm) => {
           if (!vm.usernameChanged) {
             if (!vm.account?.name) {
               updateForm({ username: value })
             }
-            const maybePrivileged = defaultPrivilegedAccounts.includes(value)
-            if (maybePrivileged) {
-              updateForm({ privileged: true })
-            }
           }
+          onPrivilegedUser(value, updateForm)
         }
       },
       hidden: () => {
@@ -69,17 +87,16 @@ export const accountFieldsMeta = (vm) => {
     },
     username: {
       el: {
-        disabled: !!vm.account?.name
+        get disabled() {
+          return !!vm.account?.name || vm.isDisabled
+        }
       },
       on: {
         input: ([value], updateForm) => {
           vm.usernameChanged = true
         },
         change: ([value], updateForm) => {
-          const maybePrivileged = defaultPrivilegedAccounts.includes(value)
+          onPrivilegedUser(value, updateForm)
-          if (maybePrivileged) {
-            updateForm({ privileged: true })
-          }
         }
       },
       hidden: () => {
@@ -88,6 +105,11 @@ export const accountFieldsMeta = (vm) => {
     },
     privileged: {
       label: vm.$t('Privileged'),
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
       hidden: () => {
         return vm.addTemplate
       }
@@ -110,6 +132,11 @@ export const accountFieldsMeta = (vm) => {
     },
     su_from_username: {
       label: vm.$t('UserSwitchFrom'),
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
       hidden: (formValue) => {
         return vm.platform || vm.asset || vm.addTemplate
       }
@@ -117,6 +144,11 @@ export const accountFieldsMeta = (vm) => {
     password: {
       label: vm.$t('Password'),
       component: UpdateToken,
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
       hidden: (formValue) => {
         return formValue.secret_type !== 'password' || vm.addTemplate
       }
@@ -124,33 +156,63 @@ export const accountFieldsMeta = (vm) => {
     ssh_key: {
       label: vm.$t('PrivateKey'),
       component: UploadSecret,
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
       hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
     },
     passphrase: {
       label: vm.$t('Passphrase'),
       component: UpdateToken,
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
       hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
     },
     token: {
       label: vm.$t('Token'),
       component: UploadSecret,
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
       hidden: (formValue) => formValue.secret_type !== 'token' || vm.addTemplate
     },
     access_key: {
       id: 'access_key',
       label: vm.$t('AccessKey'),
       component: UploadSecret,
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
       hidden: (formValue) => formValue.secret_type !== 'access_key' || vm.addTemplate
     },
     api_key: {
       id: 'api_key',
       label: vm.$t('ApiKey'),
       component: UploadSecret,
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
       hidden: (formValue) => formValue.secret_type !== 'api_key' || vm.addTemplate
     },
     secret_type: {
       type: 'radio-group',
       options: [],
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      },
       hidden: () => {
         return vm.addTemplate
       }
@@ -163,7 +225,8 @@ export const accountFieldsMeta = (vm) => {
           !automation.ansible_enabled ||
           !vm.$hasPerm('accounts.push_account') ||
           (formValue.secret_type === 'ssh_key' && vm.iPlatform.type.value === 'windows') ||
-          vm.addTemplate
+          vm.addTemplate ||
+          !formValue.secret_reset
       }
     },
     params: {
@@ -172,6 +235,9 @@ export const accountFieldsMeta = (vm) => {
       el: {},
       hidden: (formValue) => {
         const automation = vm.iPlatform.automation || {}
+        if (!vm.iPlatform.automation) {
+          return true
+        }
         vm.fieldsMeta.params.el.method = vm.iPlatform.automation.push_account_method
         vm.fieldsMeta.params.el.pushAccountParams = vm.iPlatform.automation.push_account_params
         return !formValue.push_now ||
@@ -184,12 +250,27 @@ export const accountFieldsMeta = (vm) => {
       }
     },
     is_active: {
-      label: vm.$t('IsActive')
+      label: vm.$t('IsActive'),
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
+      }
     },
     comment: {
       label: vm.$t('Comment'),
-      hidden: () => {
+      el: {
-        return vm.addTemplate
+        get disabled() {
+          return vm.isDisabled
+        }
+      }
+    },
+    secret_reset: {
+      label: vm.$t('SecretReset'),
+      el: {
+        get disabled() {
+          return vm.isDisabled
+        }
       }
     }
   }

src/components/Apps/AccountCreateUpdateForm/index.vue

@@ -45,6 +45,7 @@ export default {
   data() {
     return {
       loading: true,
+      isDisabled: false,
       usernameChanged: false,
       submitBtnText: this.$t('Confirm'),
       iPlatform: {
@@ -61,11 +62,12 @@ export default {
       form: Object.assign({ 'on_invalid': 'error' }, this.account || {}),
       encryptedFields: ['secret'],
       fields: [
-        [this.$t('AccountTemplate'), ['template']],
+        [this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
-        [this.$t('Basic'), ['assets', 'name', 'username', 'privileged', 'su_from', 'su_from_username']],
+        [this.$t('Asset'), ['assets']],
         [this.$t('Secret'), [
           'secret_type', 'password', 'ssh_key', 'token',
-          'access_key', 'passphrase', 'api_key'
+          'access_key', 'passphrase', 'api_key',
+          'secret_reset'
         ]],
         [this.$t('Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']]
       ],
@@ -73,6 +75,16 @@ export default {
       hasSaveContinue: false
     }
   },
+  watch: {
+    '$route.query': {
+      handler(nv, ov) {
+        if (nv && (nv.flag === 'move' || nv.flag === 'copy')) {
+          this.isDisabled = true
+        }
+      },
+      immediate: true
+    }
+  },
   async mounted() {
     try {
       await this.getPlatform()
@@ -145,7 +157,11 @@ export default {
         delete form['secret']
       }
       if (this.account?.name) {
-        this.$emit('edit', form)
+        if (this.account.payload && this.account.payload === 'pam_account_clone') {
+          this.$emit('add', form)
+        } else {
+          this.$emit('edit', form)
+        }
       } else {
         this.$emit('add', form)
       }
@@ -157,16 +173,16 @@ export default {
 <style lang='scss' scoped>
 .account-add {
   ::v-deep .el-form-item {
-    margin-bottom: 5px;
+    //margin-bottom: 5px;
 
     .help-block {
-      margin-bottom: 5px;
+      //margin-bottom: 5px;
     }
   }
 
   ::v-deep .form-group-header {
     .hr-line-dashed {
-      margin: 5px 0;
+      //margin: 5px 0;
     }
 
     h3 {

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

@@ -1,36 +1,38 @@
-<template>
+<template v-if="iVisible">
-  <Dialog
+  <Drawer
-    v-if="iVisible"
-    :close-on-click-modal="false"
-    :destroy-on-close="true"
-    :show-cancel="false"
-    :show-confirm="false"
     :title="title"
-    :visible.sync="iVisible"
+    :visible="iVisible"
-    v-bind="$attrs"
+    class="drawer"
-    width="900px"
+    @close-drawer="handleCloseDrawer"
-    v-on="$listeners"
   >
-    <AccountCreateUpdateForm
+    <Page :title="'null'">
-      v-if="!loading"
+      <IBox class="content">
-      ref="form"
+        <AccountCreateUpdateForm
-      :account="account"
+          v-if="!loading"
-      :add-template="addTemplate"
+          ref="form"
-      :asset="asset"
+          :account="account"
-      @add="addAccount"
+          :add-template="addTemplate"
-      @edit="editAccount"
+          :asset="asset"
-    />
+          @add="addAccount"
-  </Dialog>
+          @edit="editAccount"
+        />
+      </IBox>
+    </Page>
+  </Drawer>
 </template>
 
 <script>
-import Dialog from '@/components/Dialog/index.vue'
+import Drawer from '@/components/Drawer/index.vue'
 import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
+import IBox from '@/components/Common/IBox/index.vue'
+import Page from '@/layout/components/Page/index.vue'
 
 export default {
   name: 'CreateAccountDialog',
   components: {
-    Dialog,
+    IBox,
+    Drawer,
+    Page,
     AccountCreateUpdateForm
   },
   props: {
@@ -111,11 +113,22 @@ export default {
     },
     editAccount(form) {
       const data = { ...form }
-      this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
+      const flag = this.$route.query.flag
-        this.iVisible = false
+
-        this.$emit('add', true)
+      switch (flag) {
-        this.$message.success(this.$tc('UpdateSuccessMsg'))
+        case 'copy':
-      }).catch(error => this.setFieldError(error))
+          this.handleAccountOperation(this.account.id, 'copy-to-assets', data)
+          break
+        case 'move':
+          this.handleAccountOperation(this.account.id, 'move-to-assets', data)
+          break
+        default:
+          this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
+            this.iVisible = false
+            this.$emit('add', true)
+            this.$message.success(this.$tc('UpdateSuccessMsg'))
+          }).catch(error => this.setFieldError(error))
+      }
     },
     handleResult(resp, error) {
       let bulkCreate = !this.asset
@@ -168,7 +181,29 @@ export default {
           refsAutoDataForm.setFieldError(current, err)
         }
       }
+    },
+    handleCloseDrawer() {
+      this.iVisible = false
+      // Reflect.deleteProperty(this.$route.query, 'flag')
+    },
+    handleAccountOperation(id, path, data) {
+      this.$axios.post(`/api/v1/accounts/accounts/${id}/${path}/`, data).then((res) => {
+        this.iVisible = false
+        this.$emit('add', true)
+        this.handleResult(res, null)
+      }).catch(error => this.handleResult(null, error))
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.drawer {
+  ::v-deep .el-drawer__body {
+
+    .el-form {
+      margin-right: 30px;
+    }
+  }
+}
+</style>

src/components/Apps/AccountListTable/AccountList.vue

@@ -1,6 +1,12 @@
 <template>
   <div>
-    <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
+    <DrawerListTable
+      ref="ListTable"
+      :detail-drawer="detailDrawer"
+      :header-actions="headerActions"
+      :quick-filters="quickFilters"
+      :table-config="tableConfig"
+    />
     <ViewSecret
       v-if="showViewSecretDialog"
       :account="account"
@@ -16,22 +22,13 @@
     <AccountCreateUpdate
       v-if="showAddDialog"
       :account="account"
+      :add-template="addTemplate"
       :asset="iAsset"
       :title="accountCreateUpdateTitle"
       :visible.sync="showAddDialog"
       @add="addAccountSuccess"
       @bulk-create-done="showBulkCreateResult($event)"
     />
-    <AccountCreateUpdate
-      v-if="showAddTemplateDialog"
-      :account="account"
-      :add-template="true"
-      :asset="iAsset"
-      :title="accountCreateByTemplateTitle"
-      :visible.sync="showAddTemplateDialog"
-      @add="addAccountSuccess"
-      @bulk-create-done="showBulkCreateResult($event)"
-    />
     <ResultDialog
       v-if="showResultDialog"
       :result="createAccountResults"
@@ -44,29 +41,42 @@
       v-bind="updateSelectedDialogSetting"
       @update="handleAccountBulkUpdate"
     />
+    <PasswordHistoryDialog
+      v-if="showPasswordHistoryDialog"
+      :account="currentAccountColumn"
+      :visible.sync="showPasswordHistoryDialog"
+    />
   </div>
 </template>
 
 <script>
-import ListTable from '@/components/Table/ListTable/index.vue'
+import { mapGetters } from 'vuex'
-import { ActionsFormatter } from '@/components/Table/TableFormatters'
+import { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const'
+import { openTaskPage } from '@/utils/jms'
+import {
+  AccountConnectFormatter,
+  ActionsFormatter,
+  PlatformFormatter,
+  SecretViewerFormatter
+} from '@/components/Table/TableFormatters'
 import ViewSecret from './ViewSecret.vue'
 import UpdateSecretInfo from './UpdateSecretInfo.vue'
-import AccountCreateUpdate from './AccountCreateUpdate.vue'
-import { connectivityMeta } from './const'
-import { openTaskPage } from '@/utils/jms'
 import ResultDialog from './BulkCreateResultDialog.vue'
+import AccountCreateUpdate from './AccountCreateUpdate.vue'
+import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
+import DrawerListTable from '@/components/Table/DrawerListTable/index.vue'
 import AccountBulkUpdateDialog from '@/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue'
 
 export default {
   name: 'AccountListTable',
   components: {
-    AccountBulkUpdateDialog,
-    ResultDialog,
-    ListTable,
-    UpdateSecretInfo,
     ViewSecret,
-    AccountCreateUpdate
+    ResultDialog,
+    DrawerListTable,
+    UpdateSecretInfo,
+    AccountCreateUpdate,
+    PasswordHistoryDialog,
+    AccountBulkUpdateDialog
   },
   props: {
     url: {
@@ -89,7 +99,7 @@ export default {
     },
     hasClone: {
       type: Boolean,
-      default: false
+      default: true
     },
     asset: {
       type: Object,
@@ -119,7 +129,7 @@ export default {
     columnsDefault: {
       type: Array,
       default: () => ([
-        'name', 'username', 'asset', 'date_updated'
+        'name', 'username', 'secret', 'asset', 'platform', 'connect'
       ])
     },
     headerExtraActions: {
@@ -129,22 +139,34 @@ export default {
     extraQuery: {
       type: Object,
       default: () => ({})
+    },
+    showQuickFilters: {
+      type: Boolean,
+      default: true
+    },
+    showActions: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
     const vm = this
     return {
+      addTemplate: false,
+      isUpdateAccount: false,
+      currentAccountColumn: {},
+      showPasswordHistoryDialog: false,
       showViewSecretDialog: false,
       showUpdateSecretDialog: false,
       showResultDialog: false,
       showAddDialog: false,
       showAddTemplateDialog: false,
+      detailDrawer: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
       createAccountResults: [],
-      accountCreateUpdateTitle: this.$t('AddAccount'),
-      accountCreateByTemplateTitle: this.$t('AddAccountByTemplate'),
       iAsset: this.asset,
       account: {},
       secretUrl: '',
+      quickFilters: this.showQuickFilters ? accountQuickFilters(this) : [],
       tableConfig: {
         url: this.url,
         permissions: {
@@ -153,40 +175,86 @@ export default {
         },
         extraQuery: this.extraQuery,
         columnsExclude: ['spec_info'],
+        columnsAdd: ['secret', 'platform', 'connect'],
         columnsShow: {
           min: ['name', 'username', 'actions'],
           default: this.columnsDefault
         },
         columnsMeta: {
           name: {
-            width: '120px',
+            minWidth: '60px',
-            formatter: function(row) {
+            formatterArgs: {
-              const to = {
+              can: () => vm.$hasPerm('accounts.view_account'),
-                name: 'AssetAccountDetail',
+              getRoute: ({ row }) => ({
+                name: 'AccountDetail',
                 params: { id: row.id }
+              }),
+              getTitle: ({ row }) => {
+                let title = row.name
+                if (row.ds && this.asset && this.asset.id !== row.asset.id) {
+                  const dsID = row.ds.id.split('-')[0]
+                  title = `${row.name}@${dsID}`
+                }
+                return title
+              },
+              getDrawerTitle({ row }) {
+                return `${row.username}@${row.asset.name}`
               }
-              if (vm.$hasPerm('accounts.view_account')) {
+            }
-                return <router-link to={to}>{row.name}</router-link>
+          },
+          secret: {
+            formatter: SecretViewerFormatter,
+            width: '130px',
+            formatterArgs: {
+              secretFrom: 'api',
+              hasDownload: false,
+              actionLeft: true
+            }
+          },
+          connect: {
+            label: this.$t('Connect'),
+            width: '80px',
+            formatter: AccountConnectFormatter,
+            formatterArgs: {
+              asset: this.asset,
+              can: ({ row }) => {
+                return this.currentUserIsSuperAdmin
+              }
+            }
+          },
+          ds: {
+            width: '100px',
+            formatter: (row) => {
+              if (row.ds && row.ds['domain_name']) {
+                return row.ds['domain_name']
               } else {
-                return <span>{row.name}</span>
+                return ''
               }
             }
           },
+          platform: {
+            label: this.$t('Platform'),
+            width: '150px',
+            formatter: PlatformFormatter,
+            formatterArgs: {
+              platformAttr: 'asset.platform'
+            }
+          },
           asset: {
+            minWidth: '100px',
             formatter: function(row) {
-              const to = {
+              return row.asset.name
-                name: 'AssetDetail',
-                params: { id: row.asset.id }
-              }
-              if (vm.$hasPerm('assets.view_asset')) {
-                return <router-link to={to}>{row.asset.name}</router-link>
-              } else {
-                return <span>{row.asset.name}</span>
-              }
             }
           },
           username: {
-            width: '120px'
+            minWidth: '60px',
+            formatter: function(row) {
+              if (row.ds && row.ds['domain_name']) {
+                return `${row.username}@${row.ds['domain_name']}`
+              } else {
+                return row.username
+              }
+            }
           },
           secret_type: {
             formatter: function(row) {
@@ -214,77 +282,19 @@ export default {
           connectivity: connectivityMeta,
           actions: {
             formatter: ActionsFormatter,
+            has: this.showActions,
             formatterArgs: {
+              performDelete: ({ row }) => {
+                const id = row.id
+                const url = `/api/v1/accounts/accounts/${id}/`
+                return this.$axios.delete(url)
+              },
               hasUpdate: false, // can set function(row, value)
-              hasDelete: false, // can set function(row, value)
+              hasDelete: true, // can set function(row, value)
-              hasClone: this.hasClone,
+              hasClone: false,
+              canDelete: ({ row }) => vm.$hasPerm('accounts.delete_account') && !isDirectoryServiceAccount(row, this),
               moreActionsTitle: this.$t('More'),
-              extraActions: [
+              extraActions: accountOtherActions(this)
-                {
-                  name: 'View',
-                  title: this.$t('View'),
-                  can: this.$hasPerm('accounts.view_accountsecret'),
-                  type: 'primary',
-                  callback: ({ row }) => {
-                    // debugger
-                    vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
-                    vm.account = row
-                    vm.showViewSecretDialog = false
-                    setTimeout(() => {
-                      vm.showViewSecretDialog = true
-                    })
-                  }
-                },
-                {
-                  name: 'Update',
-                  title: this.$t('Edit'),
-                  can: this.$hasPerm('accounts.change_account') && !this.$store.getters.currentOrgIsRoot,
-                  callback: ({ row }) => {
-                    const data = {
-                      ...this.asset,
-                      ...row.asset
-                    }
-                    vm.account = row
-                    vm.iAsset = data
-                    vm.showAddDialog = false
-                    vm.accountCreateUpdateTitle = this.$t('UpdateAccount')
-                    setTimeout(() => {
-                      vm.showAddDialog = true
-                    })
-                  }
-                },
-                {
-                  name: 'Test',
-                  title: this.$t('Test'),
-                  can: ({ row }) =>
-                    !this.$store.getters.currentOrgIsRoot &&
-                    this.$hasPerm('accounts.verify_account') &&
-                    row.asset['auto_config'].ansible_enabled &&
-                    row.asset['auto_config'].ping_enabled,
-                  callback: ({ row }) => {
-                    this.$axios.post(
-                      `/api/v1/accounts/accounts/tasks/`,
-                      { action: 'verify', accounts: [row.id] }
-                    ).then(res => {
-                      openTaskPage(res['task'])
-                    })
-                  }
-                },
-                {
-                  name: 'ClearSecret',
-                  title: this.$t('ClearSecret'),
-                  can: this.$hasPerm('accounts.change_account'),
-                  type: 'primary',
-                  callback: ({ row }) => {
-                    this.$axios.patch(
-                      `/api/v1/accounts/accounts/clear-secret/`,
-                      { account_ids: [row.id] }
-                    ).then(() => {
-                      this.$message.success(this.$tc('ClearSuccessMsg'))
-                    })
-                  }
-                }
-              ]
             }
           },
           ...this.columnsMeta
@@ -313,15 +323,15 @@ export default {
             type: 'primary',
             icon: 'plus',
             can: () => {
-              return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
+              return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
             },
-            callback: async() => {
+            callback: () => {
-              await this.getAssetDetail()
               setTimeout(() => {
                 vm.iAsset = this.asset
                 vm.account = {}
-                vm.showAddDialog = true
+                this.addTemplate = false
-              })
+                this.showAddDialog = true
+              }, 200)
             }
           },
           {
@@ -329,14 +339,15 @@ export default {
             title: this.$t('TemplateAdd'),
             has: !(this.platform || this.asset),
             can: () => {
-              return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
+              return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
             },
             callback: async() => {
               await this.getAssetDetail()
               setTimeout(() => {
                 vm.iAsset = this.asset
                 vm.account = {}
-                vm.showAddTemplateDialog = true
+                vm.showAddDialog = true
+                vm.addTemplate = true
               })
             }
           },
@@ -347,11 +358,11 @@ export default {
             name: 'TestSelected',
             title: this.$t('TestSelected'),
             type: 'primary',
-            icon: 'fa-link',
+            icon: 'verify',
             can: ({ selectedRows }) => {
               return selectedRows.length > 0 &&
-                  ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
+                ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
-                  !this.$store.getters.currentOrgIsRoot
+                !this.$store.getters.currentOrgIsRoot
             },
             callback: function({ selectedRows }) {
               const ids = selectedRows.map(v => {
@@ -416,6 +427,18 @@ export default {
       }
     }
   },
+  computed: {
+    ...mapGetters(['currentUserIsSuperAdmin']),
+    accountCreateUpdateTitle() {
+      if (this.addTemplate) {
+        return this.$t('AddAccountByTemplate')
+      } else if (this.isUpdateAccount) {
+        return this.$t('UpdateAccount')
+      } else {
+        return this.$t('AddAccount')
+      }
+    }
+  },
   watch: {
     url(iNew) {
       this.$set(this.tableConfig, 'url', iNew)
@@ -423,52 +446,35 @@ export default {
     }
   },
   mounted() {
-    if (this.columns.length > 0) {
+    this.setActions()
-      this.tableConfig.columns = this.columns
-    }
-    if (this.otherActions) {
-      const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
-      for (const item of this.otherActions) {
-        actionColumn.formatterArgs.extraActions.push(item)
-      }
-    }
-    if (this.hasDeleteAction) {
-      this.tableConfig.columnsMeta.actions.formatterArgs.extraActions.push(
-        {
-          name: 'Delete',
-          title: this.$t('Delete'),
-          can: this.$hasPerm('accounts.delete_account'),
-          type: 'primary',
-          callback: ({ row }) => {
-            const msg = this.$t('AccountDeleteConfirmMsg')
-            this.$confirm(msg, this.$tc('Info'), {
-              type: 'warning',
-              confirmButtonClass: 'el-button--danger',
-              beforeClose: async(action, instance, done) => {
-                if (action !== 'confirm') return done()
-                this.$axios.delete(`/api/v1/accounts/accounts/${row.id}/`).then(() => {
-                  done()
-                  this.$refs.ListTable.reloadTable()
-                  this.$message.success(this.$tc('DeleteSuccessMsg'))
-                })
-              }
-            })
-          }
-        }
-      )
-    }
   },
   activated() {
     // 由于组件嵌套较深，有可能导致 Error in activated hook: "TypeError: Cannot read properties of undefined (reading 'getList')" 的问题
-    setTimeout(() => {
+    if (this.tabDeactivated) {
-      this.refresh()
+      setTimeout(() => this.refresh(), 300)
-    }, 300)
+    }
+  },
+  deactivated() {
+    this.tabDeactivated = true
   },
   methods: {
+    setActions() {
+      if (this.columns.length > 0) {
+        this.tableConfig.columns = this.columns
+      }
+      if (this.otherActions) {
+        const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
+        for (const item of this.otherActions) {
+          actionColumn.formatterArgs.extraActions.push(item)
+        }
+      }
+    },
     onUpdateAuthDone(account) {
       Object.assign(this.account, account)
     },
     addAccountSuccess() {
+      // Reflect.deleteProperty(this.$route.query, 'flag')
+      this.isUpdateAccount = false
       this.$refs.ListTable.reloadTable()
     },
     async getAssetDetail() {
@@ -507,7 +513,7 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .cell a {
   color: var(--color-info);
 }

src/components/Apps/AccountListTable/PasswordHistoryDialog.vue

@@ -4,7 +4,7 @@
 
 <script>
 import { GenericListTableDialog } from '@/layout/components'
-import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
+import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   components: {
@@ -33,7 +33,7 @@ export default {
           columnsMeta: {
             secret: {
               label: this.$t('Password'),
-              formatter: ShowKeyCopyFormatter,
+              formatter: SecretViewerFormatter,
               formatterArgs: {
                 hasDownload: false,
                 name: this.account.name

src/components/Apps/AccountListTable/UpdateSecretInfo.vue

@@ -1,44 +1,36 @@
 <template>
   <Dialog
     :destroy-on-close="true"
+    :show-buttons="false"
     :title="$tc('UpdateAssetUserToken')"
-    :visible.sync="visible"
+    :visible.sync="iVisible"
-    width="50"
+    width="800px"
-    @cancel="handleCancel()"
-    @confirm="handleConfirm()"
     v-on="$listeners"
   >
-    <el-form label-position="right" label-width="90px">
+    <AutoDataForm
-      <el-form-item :label="$tc('Name')">
+      :fields="fields"
-        <el-input v-model="account['asset_name']" readonly />
+      :fields-meta="fieldsMeta"
-      </el-form-item>
+      :form="init"
-      <el-form-item :label="$tc('Username')">
+      :has-reset="false"
-        <el-input v-model="account['username']" readonly />
+      :has-save-continue="false"
-      </el-form-item>
+      :url="''"
-      <el-form-item :label="$tc('Password')">
+      method="patch"
-        <UpdateToken v-model="authInfo.password" />
+      @submit="handleConfirm"
-      </el-form-item>
+    />
-      <el-form-item :label="$tc('SSHSecretKey')">
-        <UploadKey @input="getFile" />
-      </el-form-item>
-      <el-form-item :label="$tc('Passphrase')">
-        <UpdateToken v-model="authInfo.passphrase" />
-      </el-form-item>
-    </el-form>
   </Dialog>
 </template>
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { UpdateToken, UploadKey } from '@/components/Form/FormFields'
+import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
 import { encryptPassword } from '@/utils/crypto'
+import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
 
 export default {
   name: 'UpdateSecretInfo',
   components: {
-    Dialog,
+    AutoDataForm,
-    UploadKey,
+    Dialog
-    UpdateToken
   },
   props: {
     account: {
@@ -51,49 +43,59 @@ export default {
     }
   },
   data() {
+    const accountMeta = accountFieldsMeta(this)
     return {
-      secretInfo: {
+      fields: [
-        password: '',
+        'name', 'secret_type', 'password', 'ssh_key', 'token',
-        private_key: '',
+        'access_key', 'passphrase', 'api_key'
-        passphrase: ''
+      ],
+      fieldsMeta: {
+        ...accountMeta,
+        name: {
+          ...accountMeta.name,
+          readonly: true
+        },
+        secret_type: {
+          hidden: () => true
+        }
+      },
+      init: {
+        ...this.account
+      }
+    }
+  },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
       }
     }
   },
   methods: {
-    handleConfirm() {
+    handleConfirm(form) {
-      const data = {}
+      const secretType = this.account.secret_type.value
-      if (this.secretInfo.password !== '') {
+      const data = {
-        data.password = encryptPassword(this.secretInfo.password)
+        secret: encryptPassword(form[secretType])
-      }
-      if (this.secretInfo.private_key !== '') {
-        data.private_key = encryptPassword(this.secretInfo.private_key)
-        if (this.secretInfo.passphrase) data.passphrase = this.secretInfo.passphrase
       }
       this.$axios.patch(
         `/api/v1/accounts/accounts/${this.account.id}/`,
         data,
         { disableFlashErrorMsg: true }
       ).then(res => {
-        this.authInfo = { password: '', private_key: '' }
         this.$message.success(this.$tc('UpdateSuccessMsg'))
-        this.$emit('updateAuthDone', res)
+        this.iVisible = false
-        this.$emit('update:visible', false)
       }).catch(err => {
         const errMsg = Object.values(err.response.data).join(', ')
         this.$message.error(this.$tc('UpdateErrorMsg') + ' ' + errMsg)
-        this.$emit('update:visible', true)
+        this.iVisible = false
       })
     },
     handleCancel() {
       this.$emit('update:visible', false)
-    },
-    getFile(file) {
-      this.secretInfo.private_key = file
     }
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/Apps/AccountListTable/ViewSecret.vue

@@ -18,7 +18,7 @@
           <span>{{ account['username'] }}</span>
         </el-form-item>
         <el-form-item :label="secretTypeLabel">
-          <ShowKeyCopyFormatter
+          <SecretViewerFormatter
             :cell-value="secretInfo.secret"
             :col="{ formatterArgs: {
               name: account['name'],
@@ -60,7 +60,7 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
-import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
+import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
 import { encryptPassword } from '@/utils/crypto'
 
 export default {
@@ -68,7 +68,7 @@ export default {
   components: {
     Dialog,
     PasswordHistoryDialog,
-    ShowKeyCopyFormatter
+    SecretViewerFormatter
   },
   props: {
     account: {

src/components/Apps/AccountListTable/const.js

@@ -1,4 +1,5 @@
 import { ChoicesFormatter } from '@/components/Table/TableFormatters'
+import { openTaskPage } from '@/utils/jms'
 
 export const connectivityMeta = {
   formatter: ChoicesFormatter,
@@ -6,11 +7,23 @@ export const connectivityMeta = {
     faChoices: {
       '-': '',
       ok: 'fa-check-circle',
-      err: 'fa-times-circle'
+      err: 'fa-times-circle',
+      auth_err: 'fa-times-circle',
+      rdp_err: 'fa-times-circle',
+      password_err: 'fa-times-circle',
+      openssh_key_err: 'fa-times-circle',
+      ntlm_err: 'fa-times-circle',
+      create_temp_err: 'fa-times-circle'
     },
     classChoices: {
       ok: 'text-primary',
-      err: 'text-danger'
+      err: 'text-danger',
+      auth_err: 'text-danger',
+      rdp_err: 'text-danger',
+      password_err: 'text-danger',
+      openssh_key_err: 'text-danger',
+      ntlm_err: 'text-danger',
+      create_temp_err: 'text-danger'
     },
     getText({ cellValue }) {
       if (cellValue?.value === '-' || cellValue?.value === 'unknown') {
@@ -22,3 +35,309 @@ export const connectivityMeta = {
   },
   width: '130px'
 }
+
+export function isDirectoryServiceAccount(account, vm) {
+  return vm.asset && vm.asset.id !== account.asset.id
+}
+
+export const accountOtherActions = (vm) => {
+  return [
+    {
+      name: 'View',
+      title: vm.$t('View'),
+      can: vm.$hasPerm('accounts.view_accountsecret'),
+      type: 'primary',
+      order: 1,
+      callback: ({ row }) => {
+        // debugger
+        vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
+        vm.account = row
+        vm.showViewSecretDialog = false
+        setTimeout(() => {
+          vm.showViewSecretDialog = true
+        })
+      }
+    },
+    {
+      name: 'Update',
+      title: vm.$t('Edit'),
+      can: ({ row }) => {
+        return vm.$hasPerm('accounts.change_account') &&
+          !vm.$store.getters.currentOrgIsRoot &&
+          !isDirectoryServiceAccount(row, vm)
+      },
+      callback: ({ row }) => {
+        vm.isUpdateAccount = true
+        const data = {
+          ...vm.asset,
+          ...row.asset
+        }
+        vm.iAsset = data
+        vm.account = row
+        vm.addTemplate = false
+        vm.showAddDialog = false
+        setTimeout(() => {
+          vm.showAddDialog = true
+        })
+      }
+    },
+    {
+      name: 'UpdateSecret',
+      title: vm.$t('EditSecret'),
+      can: ({ row }) => {
+        return vm.$hasPerm('accounts.change_account') &&
+          !vm.$store.getters.currentOrgIsRoot &&
+          !isDirectoryServiceAccount(row, vm)
+      },
+      callback: ({ row }) => {
+        const data = {
+          ...vm.asset,
+          ...row.asset
+        }
+        vm.account = row
+        vm.iAsset = data
+        vm.showUpdateSecretDialog = false
+        vm.accountCreateUpdateTitle = vm.$t('UpdateAccount')
+        setTimeout(() => {
+          vm.showUpdateSecretDialog = true
+        })
+      }
+    },
+    {
+      name: 'Clone',
+      title: vm.$t('Duplicate'),
+      has: () => {
+        return !vm.asset
+      },
+      can: ({ row }) => {
+        return vm.$hasPerm('accounts.add_account') &&
+          !vm.$store.getters.currentOrgIsRoot &&
+          !isDirectoryServiceAccount(row, vm)
+      },
+      callback: ({ row }) => {
+        vm.account = {
+          name: `${row.name} - ${vm.$t('Duplicate').toLowerCase()}`,
+          username: `${row.username} - ${vm.$t('Duplicate').toLowerCase()}`,
+          payload: 'pam_account_clone'
+        }
+        vm.iAsset = vm.asset
+
+        vm.showAddDialog = false
+        setTimeout(() => {
+          vm.showAddDialog = true
+        })
+      }
+    },
+    {
+      name: 'Test',
+      title: vm.$t('VerifySecret'),
+      divided: true,
+      can: ({ row }) =>
+        !vm.$store.getters.currentOrgIsRoot &&
+        vm.$hasPerm('accounts.verify_account') &&
+        row.asset['auto_config'].ansible_enabled &&
+        row.asset['auto_config'].ping_enabled,
+      callback: ({ row }) => {
+        vm.$axios.post(
+          `/api/v1/accounts/accounts/tasks/`,
+          { action: 'verify', accounts: [row.id] }
+        ).then(res => {
+          openTaskPage(res['task'])
+        })
+      }
+    },
+    {
+      name: 'ClearSecret',
+      title: vm.$t('ClearSecret'),
+      can: ({ row }) => {
+        return vm.$hasPerm('accounts.change_account') &&
+          !isDirectoryServiceAccount(row, vm)
+      },
+      type: 'primary',
+      callback: ({ row }) => {
+        vm.$axios.patch(
+          `/api/v1/accounts/accounts/clear-secret/`,
+          { account_ids: [row.id] }
+        ).then(() => {
+          vm.$message.success(vm.$tc('ClearSuccessMsg'))
+        })
+      }
+    },
+    {
+      name: 'SecretHistory',
+      title: vm.$t('HistoryPassword'),
+      can: () => vm.$hasPerm('accounts.view_accountsecret'),
+      type: 'primary',
+      callback: ({ row }) => {
+        vm.account = row
+        vm.currentAccountColumn = row
+        vm.showViewSecretDialog = false
+        vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
+        setTimeout(() => {
+          vm.showViewSecretDialog = true
+        })
+      }
+    },
+    {
+      name: 'CopyToOther',
+      title: vm.$t('CopyToAsset'),
+      type: 'primary',
+      divided: true,
+      can: ({ row }) => {
+        return vm.$hasPerm('accounts.add_account') &&
+          !vm.$store.getters.currentOrgIsRoot &&
+          !isDirectoryServiceAccount(row, vm)
+      },
+      has: () => {
+        return !vm.asset
+      },
+      callback: ({ row }) => {
+        vm.accountCreateUpdateTitle = vm.$t('CopyToOther')
+        vm.$route.query.flag = 'copy'
+        vm.iAsset = vm.asset
+        vm.account = row
+        vm.showAddDialog = true
+      }
+    },
+    {
+      name: 'MoveToOther',
+      title: vm.$t('MoveToAsset'),
+      type: 'primary',
+      can: ({ row }) => {
+        return vm.$hasPerm('accounts.add_account') &&
+          !vm.$store.getters.currentOrgIsRoot &&
+          !isDirectoryServiceAccount(row, vm)
+      },
+      has: () => {
+        return !vm.asset
+      },
+      callback: ({ row }) => {
+        vm.accountCreateUpdateTitle = vm.$t('MoveToOther')
+        vm.$route.query.flag = 'move'
+        vm.iAsset = vm.asset
+        vm.account = row
+        vm.showAddDialog = true
+      }
+    }
+  ]
+}
+
+export const accountQuickFilters = (vm) => [
+  {
+    label: vm.$t('Recent (7 days)'),
+    options: [
+      {
+        label: vm.$t('RecentlyDiscovered'),
+        filter: {
+          latest_discovery: '1'
+        }
+      },
+      {
+        label: vm.$t('RecentlyLoggedIn'),
+        filter: {
+          latest_accessed: '1'
+        }
+      },
+      {
+        label: vm.$t('RecentlyModified'),
+        filter: {
+          latest_updated: '1'
+        }
+      },
+      {
+        label: vm.$t('RecentlyChangedPassword'),
+        filter: {
+          latest_secret_changed: '1'
+        }
+      },
+      {
+        label: vm.$t('RecentPasswordChangeFailed'),
+        filter: {
+          latest_secret_change_failed: '1'
+        }
+      }
+    ]
+  },
+  {
+    label: vm.$t('RiskyAccount'),
+    options: [
+      {
+        label: vm.$t('NoLoginLongTime'),
+        filter: {
+          long_time_no_login: 'true'
+        }
+      },
+      {
+        label: vm.$t('AddAccount'),
+        filter: {
+          risk: 'new_found'
+        }
+      },
+      {
+        label: vm.$t('WeakPassword'),
+        filter: {
+          risk: 'weak_password'
+        }
+      },
+      {
+        label: vm.$t('EmptyPassword'),
+        filter: {
+          has_secret: 'false'
+        }
+      },
+      {
+        label: vm.$t('LongTimePassword'),
+        filter: {
+          long_time_no_change_secret: 'true'
+        }
+      }
+    ]
+  },
+  {
+    label: vm.$t('AccountType'),
+    options: [
+      {
+        label: vm.$t('All'),
+        filter: {
+          category: ''
+        }
+      },
+      {
+        label: vm.$t('Host'),
+        filter: {
+          category: 'host'
+        }
+      },
+      {
+        label: vm.$t('Database'),
+        filter: {
+          category: 'database'
+        }
+      },
+      {
+        label: vm.$t('Cloud'),
+        filter: {
+          category: 'cloud'
+        }
+      },
+      {
+        label: vm.$t('Device'),
+        filter: {
+          category: 'device'
+        }
+      },
+      {
+        label: 'Web',
+        filter: {
+          category: 'web'
+        }
+      },
+      {
+        label: vm.$t('Other'),
+        filter: {
+          category: 'custom'
+        }
+      }
+    ]
+  }
+]

src/components/Apps/AssetRelationCard/index.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import IBox from '@/components/IBox/index.vue'
+import IBox from '@/components/Common/IBox/index.vue'
 import AssetSelect from '@/components/Apps/AssetSelect/index.vue'
 
 export default {
@@ -48,11 +48,13 @@ export default {
     },
     performAdd: {
       type: Function,
-      default: (objects, that) => {}
+      default: (objects, that) => {
+      }
     },
     onAddSuccess: {
       type: Function,
-      default: (objects, that) => {}
+      default: (objects, that) => {
+      }
     },
     canSelect: {
       type: Function,
@@ -62,8 +64,7 @@ export default {
     }
   },
   data() {
-    return {
+    return {}
-    }
   },
   methods: {
     addObjects() {
@@ -77,18 +78,18 @@ export default {
 </script>
 
 <style scoped>
-  b, strong {
+b, strong {
-    font-weight: 700;
+  font-weight: 700;
-    font-size: 13px;
+  font-size: 13px;
-  }
+}
 
-  tr td {
+tr td {
-    line-height: 1.42857;
+  line-height: 1.42857;
-    padding: 8px;
+  padding: 8px;
-    vertical-align: top;
+  vertical-align: top;
-  }
+}
 
-  tr.item td {
+tr.item td {
-    border-top: 1px solid #e7eaec;
+  border-top: 1px solid #e7eaec;
-  }
+}
 </style>

src/components/Apps/AssetSelect/dialog.vue

@@ -2,7 +2,6 @@
   <Dialog
     :close-on-click-modal="false"
     :title="$tc('Assets')"
-    :disabled-status="!isLoaded"
     custom-class="asset-select-dialog"
     top="2vh"
     v-bind="$attrs"
@@ -23,8 +22,8 @@
       :url="baseUrl"
       class="tree-table"
       v-bind="$attrs"
-      v-on="$listeners"
       @loaded="handleTableLoaded"
+      v-on="$listeners"
     />
   </Dialog>
 </template>
@@ -83,7 +82,7 @@ export default {
           },
           {
             prop: 'address',
-            label: this.$t('IpDomain'),
+            label: this.$t('Address'),
             sortable: 'custom'
           },
           {

src/components/Apps/AssetSelect/index.vue

@@ -37,6 +37,10 @@ export default {
       type: String,
       default: '/api/v1/assets/assets/'
     },
+    defaultPageSize: {
+      type: Number,
+      default: 10
+    },
     baseNodeUrl: {
       type: String,
       default: '/api/v1/assets/nodes/'
@@ -52,6 +56,10 @@ export default {
     treeSetting: {
       type: Object,
       default: () => ({})
+    },
+    disabled: {
+      type: [Boolean, Function],
+      default: false
     }
   },
   data() {
@@ -67,9 +75,11 @@ export default {
       dialogVisible: false,
       initialValue: _.cloneDeep(iValue),
       select2Config: {
+        disabled: this.disabled,
         value: iValue,
         multiple: true,
         clearable: true,
+        defaultPageSize: this.defaultPageSize,
         ajax: {
           url: this.baseUrl,
           transformOption: (item) => {

src/components/Apps/AssetTreeTable/index.vue

@@ -32,6 +32,10 @@ export default {
       type: String,
       default: '/api/v1/assets/assets/'
     },
+    typeUrl: {
+      type: String,
+      default: '/api/v1/assets/nodes/category/tree/'
+    },
     nodeUrl: {
       type: String,
       default: '/api/v1/assets/nodes/'
@@ -105,11 +109,16 @@ export default {
               showAssets: false,
               showSearch: false,
               customTreeHeaderName: this.$t('TypeTree'),
-              url: '/api/v1/assets/nodes/category/tree/',
+              url: this.typeUrl,
               nodeUrl: this.treeSetting?.nodeUrl || this.nodeUrl,
-              treeUrl: `/api/v1/assets/nodes/category/tree/?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
+              treeUrl: `${this.typeUrl}?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
               callback: {
                 onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
+              },
+              edit: {
+                drag: {
+                  isMove: false
+                }
               }
             }
           }
@@ -138,6 +147,9 @@ export default {
     treeSetting.showDelete = this.$hasPerm('assets.delete_node')
   },
   methods: {
+    reloadTable() {
+      this.$refs.TreeList.reloadTable()
+    },
     setTreeUrlQuery() {
       let str = ''
       for (const key in this.treeUrlQuery) {

src/components/Apps/BlockedIPs/BlockedIPList.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import ListTable from '@/components/Table/ListTable/index.vue'
+import { DrawerListTable as ListTable } from '@/components'
 
 export default {
   name: 'BlockedIPList',

src/components/Apps/ChangeSecret/RecordViewSecret.vue

@@ -12,7 +12,7 @@
     >
       <el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
         <el-form-item :label="$tc('OldSecret')">
-          <ShowKeyCopyFormatter
+          <SecretViewerFormatter
             :cell-value="secretInfo.old_secret"
             :col="{ formatterArgs: {
               name: 'old_secret'
@@ -20,7 +20,7 @@
           />
         </el-form-item>
         <el-form-item :label="$tc('NewSecret')">
-          <ShowKeyCopyFormatter
+          <SecretViewerFormatter
             :cell-value="secretInfo.new_secret"
             :col="{ formatterArgs: {
               name: 'new_secret'
@@ -34,13 +34,13 @@
 
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
+import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'RecordViewSecret',
   components: {
     Dialog,
-    ShowKeyCopyFormatter
+    SecretViewerFormatter
   },
   props: {
     visible: {

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

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <div class="chat-action">
+    <div v-if="hasPrompt" class="chat-action">
       <Select2
         v-model="select.value"
         :disabled="isLoading || isSelectDisabled"
@@ -36,6 +36,10 @@ export default {
     expanded: {
       type: Boolean,
       default: false
+    },
+    hasPrompt: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -46,7 +50,7 @@ export default {
         url: '/api/v1/settings/chatai-prompts/',
         value: '',
         multiple: false,
-        placeholder: this.$t('Prompt'),
+        placeholder: this.$t('Role'),
         ajax: {
           transformOption: (item) => {
             return { label: item.name, value: item.content }

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

@@ -1,42 +1,73 @@
 <template>
-  <div :class="{'user-role': isUserRole}" class="chat-item">
+  <div :class="{ 'user-role': isUserRole }" class="chat-item">
-    <div class="avatar">
+    <div class="chart-item-container">
-      <el-avatar :src="isUserRole ? userUrl : chatUrl" class="header-avatar" />
+      <div class="avatar">
-    </div>
+        <el-avatar
-    <div class="content">
+          :src="isUserRole ? userUrl : chatUrl"
-      <div class="operational">
+          class="header-avatar"
-        <span class="date">
+        />
-          {{ $moment(item.message.create_time).format('YYYY-MM-DD HH:mm:ss') }}
-        </span>
       </div>
-      <div class="message">
+      <div class="content">
-        <div class="message-content">
+        <div class="operational">
-          <span v-if="isSystemError" class="error">
+          <div v-if="!item.message.is_reasoning" class="date">
-            {{ item.message.content }}
+            {{
-          </span>
+              $moment(item.message.create_time).format("YYYY-MM-DD HH:mm:ss")
-          <span v-else class="chat-text">
+            }}
-            <MessageText :message="item.message" />
+          </div>
-          </span>
+
+          <div v-else class="thinking-time">{{ $i18n.t('DeeplyThoughtAbout') }}</div>
         </div>
-        <div class="action">
+        <div :class="item.reasoning ? 'reasoning' : 'message'">
-          <el-tooltip
+          <div class="message-content">
-            v-if="isSystemError && isLoading"
+            <div v-if="!item.reasoning">
-            :content="$tc('Reconnect')"
+              <span v-if="isSystemError" class="error">
-            :open-delay="500"
+                {{ item.message.content }}
-            placement="top"
+              </span>
-          >
+              <span v-else class="chat-text">
-            <svg-icon icon-class="refresh" @click="onRefresh" />
+                <MessageText :message="item.message" />
-          </el-tooltip>
+              </span>
-          <el-dropdown v-else size="small" @command="handleCommand">
+            </div>
-            <span class="el-dropdown-link">
+
-              <i class="fa fa-ellipsis-v" />
+            <div v-else class="thinking-wrapper">
-            </span>
+              <div class="thinking-content">
-            <el-dropdown-menu slot="dropdown">
+                <!-- eslint-disable-next-line -->
-              <el-dropdown-item v-for="i in dropdownOptions" :key="i.action" :command="i.action">
+                <div class="divider"></div>
-                {{ i.label }}
+                <p>
-              </el-dropdown-item>
+                  <MessageText :message="item.reasoning" @insert-code="handleInsertCode" />
-            </el-dropdown-menu>
+                </p>
-          </el-dropdown>
+              </div>
+
+              <div class="thinking-result">
+                <span v-if="isServerError" class="error">
+                  {{ isServerError }}
+                </span>
+                <MessageText :message="item.result" :is-terminal="isTerminal" @insert-code="handleInsertCode" /></div>
+            </div>
+          </div>
+          <div class="action">
+            <el-tooltip
+              v-if="isSystemError && isLoading"
+              :content="$tc('Reconnect')"
+              :open-delay="500"
+              placement="top"
+            >
+              <svg-icon icon-class="refresh" @click="onRefresh" />
+            </el-tooltip>
+            <el-dropdown v-else size="small" @command="handleCommand">
+              <span class="el-dropdown-link">
+                <i class="fa fa-ellipsis-v" />
+              </span>
+              <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item
+                  v-for="i in dropdownOptions"
+                  :key="i.action"
+                  :command="i.action"
+                >
+                  {{ i.label }}
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </el-dropdown>
+          </div>
         </div>
       </div>
     </div>
@@ -45,7 +76,7 @@
 
 <script>
 import MessageText from './MessageText.vue'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { copy } from '@/utils/common'
 import { useChat } from '../../useChat.js'
 import { reconnect } from '@/utils/socket'
@@ -61,11 +92,14 @@ export default {
       type: Object,
       default: () => {
       }
+    },
+    isTerminal: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
-      chatUrl: require('@/assets/img/chat.png'),
       userUrl: '/api/v1/settings/logo/',
       dropdownOptions: [
         {
@@ -79,11 +113,26 @@ export default {
     ...mapState({
       isLoading: state => state.chat.loading
     }),
+    ...mapGetters([
+      'publicSettings'
+    ]),
     isUserRole() {
       return this.item.message?.role === 'user'
     },
     isSystemError() {
-      return this.item.type === 'error' && this.item.message?.role === 'assistant'
+      return (
+        this.item.type === 'error' && this.item?.role === 'assistant'
+      )
+    },
+    isServerError() {
+      return (this.item.type === 'finish' && this.item.result.content === '')
+        ? this.$i18n.t('ServerBusyRetry')
+        : ''
+    },
+    chatUrl() {
+      return this.publicSettings.CHAT_AI_TYPE === 'gpt'
+        ? require('@/assets/img/chat.png')
+        : require('@/assets/img/deepSeek.png')
     }
   },
   methods: {
@@ -94,8 +143,11 @@ export default {
     },
     handleCommand(value) {
       if (value === 'copy') {
-        copy(this.item.message.content)
+        copy(this.item.result.content)
       }
+    },
+    handleInsertCode(code) {
+      this.$emit('insert-code', code)
     }
   }
 }
@@ -104,101 +156,160 @@ export default {
 <style lang="scss" scoped>
 .chat-item {
   display: flex;
-  padding: 16px 14px 0;
+  padding: 0.5rem;
 
-  &:last-child {
+  .chart-item-container {
-    padding-bottom: 16px;
+    display: flex;
-  }
+    gap: 0.5rem;
 
-  .avatar {
+    .avatar {
-    width: 22px;
+      width: 24px;
-    height: 22px;
+      height: 24px;
-    margin-top: 2px;
+      margin-top: 2px;
 
-    .header-avatar {
+      .header-avatar {
-      width: 100%;
+        width: 100%;
-      height: 100%;
+        height: 100%;
+        border-radius: 50%;
 
-      &::v-deep img {
+        &::v-deep img {
-        background-color: #e5e5e7;
+          background-color: #fff;
+        }
       }
     }
-  }
 
-  .content {
+    .content {
-    margin-left: 6px;
-    overflow: hidden;
-
-    .operational {
       display: flex;
-      justify-content: space-between;
+      flex-direction: column;
+      // gap: 0.5rem;
       overflow: hidden;
 
-      .copy {
+      .operational {
-        float: right;
+        display: flex;
-        cursor: pointer;
+        justify-content: space-between;
-      }
+        overflow: hidden;
-    }
 
-    .message {
+        .date {
-      display: -webkit-box;
+          padding-top: 5px;
-
-      .message-content {
-        flex: 1;
-        padding: 6px 10px;
-        border-radius: 2px 12px 12px;
-        background-color: #f0f1f5;
-      }
-
-      .action {
-        .svg-icon {
-          transform: translateY(50%);
-          margin-left: 3px;
-          cursor: pointer;
         }
 
-        .el-dropdown {
+        .thinking-time {
-          height: 32px;
+          width: 6rem;
-          line-height: 37px;
+          display: flex;
-          font-size: 13px;
+          justify-content: center;
+          padding: 5px 10px;
+          border-radius: 0.5rem;
+          background-color: #f5f5f5;
+        }
 
-          .el-dropdown-link {
+        .copy {
-            i {
+          float: right;
-              padding: 4px 5px;
+          cursor: pointer;
-              font-size: 15px;
+        }
-              color: #8d9091;
+      }
 
-              &:hover {
+      .reasoning {
-                color: #7b8085
+        display: flex;
+        gap: 0.5rem;
+        align-items: flex-end;
+
+        .message-content .thinking-wrapper {
+          display: flex;
+          flex-direction: column;
+          gap: 0.5rem;
+
+          .thinking-content {
+            position: relative;
+            color: #8b8b8b;
+
+            .divider {
+              position: absolute;
+              top: 0;
+              left: 0;
+              height: 100%;
+              border-left: 2px solid #e5e5e5;
+            }
+
+            p {
+              margin: unset;
+              padding-left: 0.5rem;
+
+              ::v-deep p {
+                color: #8b8b8b;
               }
             }
           }
         }
       }
 
-      .error {
+      .message {
-        color: red;
+        display: -webkit-box;
+
+        .message-content {
+          flex: 1;
+          padding: 6px 10px;
+          border-radius: 2px 12px 12px;
+          background-color: #f0f1f5;
+        }
+
+        .action {
+          .svg-icon {
+            transform: translateY(50%);
+            margin-left: 3px;
+            cursor: pointer;
+          }
+
+          .el-dropdown {
+            height: 32px;
+            line-height: 37px;
+            font-size: 13px;
+
+            .el-dropdown-link {
+              i {
+                padding: 4px 5px;
+                font-size: 15px;
+                color: #8d9091;
+
+                &:hover {
+                  color: #7b8085;
+                }
+              }
+            }
+          }
+        }
+
+        .error {
+          color: red;
+        }
       }
     }
   }
-}
 
-.user-role {
+  &:last-child {
-  flex-direction: row-reverse;
+    padding-bottom: 16px;
+  }
 
-  .content {
+  &.user-role {
-    margin-right: 10px;
+    flex-direction: row-reverse;
 
-    .operational {
+    .chart-item-container {
       flex-direction: row-reverse;
     }
 
-    .message {
+    .content {
-      flex-direction: row-reverse;
+      margin-right: 10px;
 
-      .message-content {
+      .operational {
-        background-color: var(--menu-hover);
+        flex-direction: row-reverse;
-        border-radius: 12px 2px 12px 12px;
+      }
+
+      .message {
+        flex-direction: row-reverse;
+
+        .message-content {
+          background-color: var(--menu-hover);
+          border-radius: 12px 2px 12px 12px;
+        }
       }
     }
   }

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

@@ -25,6 +25,10 @@ export default {
       type: Object,
       default: () => {
       }
+    },
+    isTerminal: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -45,10 +49,10 @@ export default {
     this.init()
   },
   updated() {
-    this.addCopyEvents()
+    this.addEvents()
   },
   destroyed() {
-    this.removeCopyEvents()
+    this.removeEvents()
   },
   methods: {
     init() {
@@ -69,26 +73,64 @@ export default {
       this.markdown.use(mdKatex, { blockClass: 'katexmath-block rounded-md', errorColor: ' #cc0000' })
     },
     highlightBlock(str, lang) {
-      return `<pre class="code-block-wrapper"><div class="code-block-header"><span class="code-block-header__lang">${lang}</span><span class="code-block-header__copy">${'Copy'}</span></div><code class="hljs code-block-body ${lang}">${str}</code></pre>`
+      let insertSpanHtml = `<span class="code-block-header__insert">${this.$t('Insert')}</span>`
+      if (!this.isTerminal) {
+        insertSpanHtml = ''
+      }
+      return `<pre class="code-block-wrapper">
+        <div class="code-block-header">
+        <span class="code-block-header__lang">${lang}</span>  
+        <span class="code-block-header__actions">
+        ${insertSpanHtml}
+          <span class="code-block-header__copy">${this.$t('Copy')}</span>
+        </span>
+        </div>
+        <code class="hljs code-block-body ${lang}">${str}</code></pre>`
     },
-    addCopyEvents() {
+    addEvents() {
-      const copyBtn = document.querySelectorAll('.code-block-header__copy')
+      this.addBtnClickEvents('.code-block-header__copy', this.handlerClickCopy)
-      copyBtn.forEach((btn) => {
+      this.addBtnClickEvents('.code-block-header__insert', this.handlerClickInsert)
-        btn.addEventListener('click', () => {
+    },
-          const code = btn.parentElement?.nextElementSibling?.textContent
+
-          if (code) {
+    handlerClickCopy(event) {
-            copy(code)
+      const wrapper = event.target.closest('.code-block-wrapper')
-          }
+      if (wrapper) {
+        // 查找里面的 code 元素
+        const codeElement = wrapper.querySelector('code.code-block-body')
+        if (codeElement) {
+          const codeText = codeElement.textContent
+          copy(codeText)
+        }
+      }
+    },
+    handlerClickInsert(event) {
+      const wrapper = event.target.closest('.code-block-wrapper')
+      if (wrapper) {
+        // 查找里面的 code 元素
+        const codeElement = wrapper.querySelector('code.code-block-body')
+        if (codeElement) {
+          const codeText = codeElement.textContent
+          this.$emit('insert-code', codeText)
+        }
+      }
+    },
+    addBtnClickEvents(selector, callback) {
+      const buttons = this.$refs.textRef.querySelectorAll(selector)
+      buttons.forEach((btn) => {
+        btn.addEventListener('click', callback)
+      })
+    },
+    removeBtnClickEvent(selector) {
+      const buttons = this.$refs.textRef.querySelectorAll(selector)
+      buttons.forEach((btn) => {
+        btn.removeEventListener('click', () => {
         })
       })
     },
-    removeCopyEvents() {
+    removeEvents() {
       if (this.$refs.textRef) {
-        const copyBtn = this.$refs.textRef.querySelectorAll('.code-block-header__copy')
+        this.removeBtnClickEvent('.code-block-header__copy')
-        copyBtn.forEach((btn) => {
+        this.addBtnClickEvents('.code-block-header__insert')
-          btn.removeEventListener('click', () => {
-          })
-        })
       }
     }
   }
@@ -98,6 +140,7 @@ export default {
 <style lang="scss" scoped>
 .markdown-body {
   font-size: 13px;
+  max-width: 300px;;
 
   &::v-deep p {
     margin-bottom: 0 !important;
@@ -115,26 +158,46 @@ export default {
 
   &::v-deep .code-block-wrapper {
     background: #1F2329;
-    padding: 2px 6px;
+    padding: 0;
     margin: 5px 0;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
 
     .code-block-body {
-      padding: 5px 10px 0;
+      padding: 5px 10px;
     }
-  ;
 
     .code-block-header {
       margin-bottom: 4px;
       overflow: hidden;
       background: #353946;
       color: #c2d1e1;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 4px 8px;
+      width: 100%;
+      box-sizing: border-box;
 
-      .code-block-header__copy {
+      .code-block-header__actions {
-        float: right;
+        display: flex;
-        cursor: pointer;
+        gap: 8px;
 
-        &:hover {
+        .code-block-header__copy {
-          color: #6e747b;
+          cursor: pointer;
+
+          &:hover {
+            color: #6e747b;
+          }
+        }
+
+        .code-block-header__insert {
+          cursor: pointer;
+
+          &:hover {
+            color: #6e747b;
+          }
         }
       }
     }
@@ -178,6 +241,7 @@ export default {
   0% {
     opacity: 1;
   }
+
   100% {
     opacity: 0;
   }

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

@@ -17,7 +17,7 @@
           </div>
         </div>
       </div>
-      <ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" />
+      <ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" :is-terminal="isTerminal" @insert-code="insertCode" />
     </div>
     <div class="input-box">
       <el-button
@@ -28,7 +28,7 @@
         size="small"
         @click="onStopHandle"
       >{{ $tc('Stop') }}</el-button>
-      <ChatInput ref="chatInput" :expanded="expanded" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
+      <ChatInput ref="chatInput" :expanded="expanded" :has-prompt="!isTerminal" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
     </div>
   </div>
 </template>
@@ -68,7 +68,10 @@ export default {
       prompt: '',
       conversationId: '',
       showIntroduction: false,
-      introduction: []
+      introduction: [],
+      terminalContext: null,
+      isTerminal: false,
+      sessionChat: {}
     }
   },
   computed: {
@@ -100,6 +103,9 @@ export default {
       this.showIntroduction = true
       this.conversationId = ''
       this.$refs.chatInput.select.value = ''
+      if (this.terminalContext) {
+        this.prompt = this.terminalContext.content || ''
+      }
       const chat = {
         message: {
           content: this.$t('ChatHello'),
@@ -123,7 +129,17 @@ export default {
         setLoading(true)
         removeLoadingMessageInChat()
         this.conversationId = data.id
-        updateChaMessageContentById(data.message.id, data)
+
+        const newFragment = {
+          message: { id: data.message.id, is_reasoning: data.message.is_reasoning },
+          reasoning: { content: data.message.is_reasoning ? data.message.content : '' },
+          result: { content: data.message.is_reasoning ? '' : data.message.content },
+          role: data.message.role,
+          type: data.message.type,
+          create_time: data.message.create_time
+        }
+
+        updateChaMessageContentById(data.message.id, newFragment)
       }
       if (data.message?.type === 'finish') {
         setLoading(false)
@@ -140,6 +156,32 @@ export default {
       addMessageToActiveChat(data)
       setLoading(true)
     },
+    onTerminalContext(terminalContext) {
+      const originSessionId = this.terminalContext?.sessionId
+      const newSessionId = terminalContext.sessionId || ''
+      if (originSessionId) {
+        this.saveSessionChat(originSessionId)
+      }
+      this.terminalContext = terminalContext
+      this.isTerminal = true
+      this.prompt = terminalContext.content || ''
+      if (originSessionId !== newSessionId) {
+        if (this.sessionChat[newSessionId]) {
+          clearChats()
+          for (const chat of this.sessionChat[newSessionId]) {
+            addChatMessageById(chat)
+          }
+        } else {
+          this.onNewChat()
+        }
+      }
+    },
+    saveSessionChat(sessionId) {
+      if (this.terminalContext) {
+        this.sessionChat[sessionId] = JSON.parse(JSON.stringify(this.activeChat.chats))
+      }
+    },
+
     onSendHandle(value) {
       this.showIntroduction = false
       this.socket = ws || {}
@@ -194,6 +236,15 @@ export default {
     sendIntroduction(item) {
       this.showIntroduction = false
       this.onSendHandle(item.content)
+    },
+    insertCode(code) {
+      this.sendPostMessage({
+        name: 'INSERT_TERMINAL_CODE',
+        data: code.replace(/^[\s\r\n]+|[\s\r\n]+$/g, '')
+      })
+    },
+    sendPostMessage(data) {
+      window.parent.postMessage(data)
     }
   }
 }

src/components/Apps/ChatAi/index.vue

@@ -47,7 +47,9 @@ import Chat from './components/ChitChat/index.vue'
 import { getInputFocus } from './useChat.js'
 import { ws } from '@/utils/socket'
 import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
+import { ObjectLocalStorage } from '@/utils/common'
 
+const aiPannelLocalStorage = new ObjectLocalStorage('ai_panel_settings')
 export default {
   components: {
     DrawerPanel,
@@ -76,12 +78,15 @@ export default {
       robotUrl: require('@/assets/img/robot-assistant.png'),
       height: '400px',
       expanded: false,
-      clientOffset: {}
+      clientOffset: {},
+      currentTerminalContent: {}
     }
   },
   watch: {
   },
   mounted() {
+    const expanded = aiPannelLocalStorage.get('expanded')
+    this.updateExpandedState(expanded)
     this.handlePostMessage()
   },
   methods: {
@@ -89,6 +94,17 @@ export default {
       window.addEventListener('message', (event) => {
         if (event.data === 'show-chat-panel') {
           this.$refs.drawer.show = true
+          this.initWebSocket()
+          return
+        }
+        const msg = event.data
+        switch (msg.name) {
+          case 'current_terminal_content':
+            // {content: '...', terminalId: '',sessionId: '',viewId: '',viewName: ''}
+            this.$log.debug('current_terminal_content', msg)
+            this.currentTerminalContent = msg.data
+            this.$refs.component?.onTerminalContext(msg.data)
+            break
         }
       })
     },
@@ -96,6 +112,11 @@ export default {
       this.$refs.drawer.handleHeaderMoveDown(event)
     },
     handleMouseMoveUp(event) {
+      // Prevent the new chat button from triggering the header move up
+      const newButton = event.target.closest('.new')
+      if (newButton) {
+        return
+      }
       this.$refs.drawer.handleHeaderMoveUp(event)
     },
     initWebSocket() {
@@ -107,12 +128,20 @@ export default {
       this.$refs.drawer.show = false
     },
     expandFull() {
-      this.height = '100%'
+      this.updateExpandedState(true)
-      this.expanded = true
+      this.save_pannel_settings()
     },
     compress() {
-      this.height = '400px'
+      this.updateExpandedState(false)
-      this.expanded = false
+      this.save_pannel_settings()
+    },
+    save_pannel_settings() {
+      aiPannelLocalStorage.set('expanded', this.expanded)
+      console.log('AI panel settings saved:', this.expanded)
+    },
+    updateExpandedState(expanded) {
+      this.expanded = expanded
+      this.height = expanded ? '100%' : '400px'
     },
     onNewChat() {
       this.active = 'chat'

src/components/Apps/GrantedAssets/index.vue

@@ -7,7 +7,7 @@
   />
 </template>
 
-<script type="text/jsx">
+<script>
 import AssetTreeTable from '@/components/Apps/AssetTreeTable'
 import { AccountInfoFormatter, DetailFormatter } from '@/components/Table/TableFormatters'
 import { connectivityMeta } from '@/components/Apps/AccountListTable/const'
@@ -87,7 +87,7 @@ export default {
         columnsExclude: ['spec_info'],
         columnsShow: {
           min: ['name', 'address', 'accounts'],
-          default: ['name', 'address', 'platform', 'connectivity', 'view_account', 'actions']
+          default: ['name', 'address', 'platform', 'view_account', 'actions']
         },
         columnsMeta: {
           name: {

src/components/Apps/LeakPasswords/LeakPasswordList.vue

@@ -0,0 +1,59 @@
+<template>
+  <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" :create-drawer="createDrawer" />
+</template>
+
+<script>
+import { DrawerListTable as ListTable } from '@/components'
+
+export default {
+  name: 'LeakPasswordList',
+  components: {
+    ListTable
+  },
+  props: {
+    object: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    }
+  },
+  data() {
+    return {
+      createDrawer: () => import('@/components/Apps/LeakPasswords/LeakPasswordsCreateUpdate.vue'),
+      tableConfig: {
+        url: '/api/v1/settings/leak-passwords/',
+        columns: [
+          'password'
+        ],
+        columnsMeta: {
+          actions: {
+            formatterArgs: {
+              hasClone: false,
+              canDelete: this.$hasPerm('settings.change_security'),
+              canUpdate: this.$hasPerm('settings.change_security')
+            }
+          }
+        }
+
+      },
+      headerActions: {
+        hasExport: false,
+        hasImport: false,
+        hasCreate: true,
+        hasSearch: true,
+        hasRefresh: true,
+        hasBulkDelete: true,
+        hasBulkUpdate: false,
+        hasLeftActions: true,
+        hasRightActions: true,
+        canCreate: this.$hasPerm('settings.change_security'),
+        canBulkDelete: this.$hasPerm('settings.change_security')
+      }
+    }
+  }
+}
+</script>
+
+<style lang='less' scoped>
+
+</style>

src/components/Apps/LeakPasswords/LeakPasswordsCreateUpdate.vue

@@ -0,0 +1,41 @@
+<template>
+  <div v-loading="loading">
+    <GenericCreateUpdatePage
+      v-if="!loading"
+      class="user-create-update"
+      v-bind="$data"
+      :title="null"
+      v-on="$listeners"
+    />
+  </div>
+</template>
+
+<script>
+import { GenericCreateUpdatePage } from '@/layout/components'
+
+export default {
+  name: 'LeakPasswordsCreateUpdate',
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      loading: true,
+      fields: [
+        [this.$t('Basic'), ['password']]
+      ],
+      encryptedFields: [],
+      url: '/api/v1/settings/leak-passwords/'
+
+    }
+  },
+  async mounted() {
+    this.loading = false
+  },
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

src/components/Apps/LeakPasswords/index.vue

@@ -0,0 +1,76 @@
+<template>
+  <div>
+    <div>
+      <el-button
+        size="mini"
+        type="primary"
+        @click="onOpenDialog"
+      >
+        {{ $tc('View') }}
+      </el-button>
+    </div>
+    <Dialog
+      :destroy-on-close="true"
+      :show-cancel="false"
+      :show-confirm="false"
+      :title="title"
+      :visible.sync="visible"
+      v-bind="$attrs"
+      width="40%"
+      v-on="$listeners"
+    >
+      <LeakPasswordList />
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import { Dialog } from '@/components'
+import LeakPasswordList from '@/components/Apps/LeakPasswords/LeakPasswordList.vue'
+
+export default {
+  componentName: 'LeakPasswords',
+  components: {
+    LeakPasswordList,
+    Dialog
+  },
+  props: {
+    value: {
+      type: Object,
+      default: () => ({})
+    },
+    title: {
+      type: String,
+      default: function() {
+        return this.$t('LeakPasswordList')
+      }
+    },
+    url: {
+      type: String,
+      default: `/api/v1/settings/leak-passwords/`
+    }
+  },
+  data() {
+    return {
+      visible: false,
+      form: this.value,
+      config: {
+        url: this.url,
+        hasSaveContinue: false,
+        hasButtons: true,
+        fields: [],
+        fieldsMeta: {}
+      }
+    }
+  },
+
+  methods: {
+    onOpenDialog() {
+      this.visible = true
+    }
+  }
+}
+</script>
+
+<style scoped>
+</style>

src/components/Apps/ManyJsonTabs/AssetJsonTab.vue

@@ -1,24 +1,26 @@
 <template>
-  <el-row :gutter="24">
+  <TwoCol>
-    <el-col :md="20" :sm="22">
+    <ListTable v-bind="config" />
-      <ListTable v-bind="config" />
+  </TwoCol>
-    </el-col>
-  </el-row>
 </template>
 
 <script>
-import ListTable from '@/components/Table/ListTable/index.vue'
+import { DrawerListTable as ListTable } from '@/components'
 import { toM2MJsonParams } from '@/utils/jms'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
+import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
 export default {
   name: 'AssetJsonTab',
   components: {
+    TwoCol,
     ListTable
   },
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -32,21 +34,18 @@ export default {
         },
         tableConfig: {
           url: `/api/v1/assets/assets/?${key}=${value}`,
-          columns: ['name', 'address', 'platform',
+          columns: ['name', 'address', 'platform', 'type', 'is_active'],
-            'type', 'is_active'
+          columnsShow: {
-          ],
+            min: ['name', 'address'],
+            default: ['name', 'address', 'platform']
+          },
           columnsMeta: {
             name: {
               label: this.$t('Asset'),
-              formatter: (row) => {
+              formatter: DetailFormatter,
-                const to = {
+              formatterArgs: {
-                  name: 'AssetDetail',
+                getRoute: ({ row }) => {
-                  params: { id: row.id }
+                  return { name: 'AssetDetail', params: { id: row.id }}
-                }
-                if (this.$hasPerm('assets.view_asset')) {
-                  return <router-link to={to} class='text-link'>{row.name}</router-link>
-                } else {
-                  return <span>{row.name}</span>
                 }
               }
             },
@@ -65,7 +64,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/Apps/ManyJsonTabs/UserJsonTab.vue

@@ -1,18 +1,19 @@
 <template>
-  <el-row :gutter="24">
+  <TwoCol>
-    <el-col :md="20" :sm="22">
+    <ListTable v-bind="config" />
-      <ListTable v-bind="config" />
+  </TwoCol>
-    </el-col>
-  </el-row>
 </template>
 
 <script>
-import ListTable from '@/components/Table/ListTable/index.vue'
+import { DrawerListTable as ListTable } from '@/components'
 import { toM2MJsonParams } from '@/utils/jms'
+import TwoCol from '@/layout/components/Page/TwoColPage.vue'
+import { DetailFormatter } from '@/components/Table/TableFormatters'
 
 export default {
   name: 'User',
   components: {
+    TwoCol,
     ListTable
   },
   props: {
@@ -34,22 +35,23 @@ export default {
         tableConfig: {
           url: `/api/v1/users/users/?${key}=${value}`,
           columns: [
-            'name', 'username', 'groups', 'system_roles',
+            'name', 'username', 'email', 'groups', 'system_roles',
             'org_roles', 'source', 'is_valid'
           ],
+          columnsShow: {
+            min: ['name', 'username'],
+            default: ['name', 'username', 'email']
+          },
           columnsMeta: {
             name: {
               label: this.$t('Name'),
-              width: 85,
+              formatter: DetailFormatter,
-              formatter: (row) => {
+              formatterArgs: {
-                const to = {
+                getRoute: ({ row }) => {
-                  name: 'UserDetail',
+                  return {
-                  params: { id: row.id }
+                    name: 'UserDetail',
-                }
+                    params: { id: row.id }
-                if (this.$hasPerm('users.view_user')) {
+                  }
-                  return <router-link to={to} class='text-link'>{row.name}</router-link>
-                } else {
-                  return <span>{row.name}</span>
                 }
               }
             },
@@ -87,7 +89,3 @@ export default {
   }
 }
 </script>
-
-<style scoped>
-
-</style>

src/components/Apps/ResourceActivity/index.vue

@@ -1,43 +1,43 @@
 <template>
   <div>
-    <el-row :gutter="20">
+    <TwoCol>
-      <el-col :md="16" :sm="24">
+      <IBox :title="title" class="block" v-bind="$attrs">
-        <IBox :title="title" class="block" v-bind="$attrs">
+        <el-timeline>
-          <el-timeline>
+          <el-timeline-item
-            <el-timeline-item
+            v-for="(activity, index) in activities"
-              v-for="(activity, index) in activities"
+            :key="index"
-              :key="index"
+            :size="activity.size"
-              :size="activity.size"
+            :timestamp="activity.timestamp"
-              :timestamp="activity.timestamp"
+            :type="activity.type"
-              :type="activity.type"
+            placement="bottom"
-              placement="bottom"
+          >
+            {{ activity.content }}
+            <el-link
+              v-if="activity['detail_url']"
+              type="primary"
+              @click.native="onClick(activity)"
             >
-              {{ activity.content }}
+              {{ $tc('Detail') }}
-              <el-link
+            </el-link>
-                v-if="activity['detail_url']"
+          </el-timeline-item>
-                type="primary"
+        </el-timeline>
-                @click.native="onClick(activity)"
+      </IBox>
-              >
+    </TwoCol>
-                {{ $tc('Detail') }}
-              </el-link>
-            </el-timeline-item>
-          </el-timeline>
-        </IBox>
-      </el-col>
-    </el-row>
     <DiffDetail ref="DetailDialog" :title="$tc('OperateLog')" />
   </div>
 </template>
 
 <script>
-import IBox from '@/components/IBox/index.vue'
+import IBox from '@/components/Common/IBox/index.vue'
 import DiffDetail from '@/components/Dialog/DiffDetail.vue'
 import { openTaskPage } from '@/utils/jms'
 import { toSafeLocalDateStr } from '@/utils/time'
+import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 
 export default {
   name: 'ResourceActivity',
   components: {
+    TwoCol,
     IBox,
     DiffDetail
   },

src/components/Apps/UserConfirmDialog/index.vue

@@ -8,7 +8,7 @@
     :visible.sync="visible"
     class="dialog-content"
     v-bind="$attrs"
-    width="600px"
+    width="740px"
     @confirm="visible = false"
     v-on="$listeners"
   >
@@ -49,32 +49,74 @@
           </el-select>
         </el-col>
       </el-row>
-      <el-row :gutter="24" style="margin: 0 auto;">
+      <el-row v-if="!noCodeMFA.includes(subTypeSelected)" :gutter="24" style="margin: 0 auto;">
-        <el-col :md="24" :sm="24" style="display: flex; align-items: center; margin-bottom: 20px;">
+        <el-col :md="24" :sm="24" style="display: flex; align-items: center; ">
           <el-input
             v-model="secretValue"
             :placeholder="inputPlaceholder"
             :show-password="showPassword"
             @keyup.enter.native="handleConfirm"
           />
-          <span v-if="subTypeSelected === 'sms'" style="margin: -1px 0 0 20px;">
+          <span v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'" style="margin: -1px 0 0 20px;">
             <el-button
               :disabled="smsBtnDisabled"
               size="mini"
               style="line-height: 14px; float: right;"
               type="primary"
-              @click="sendSMSCode"
+              @click="sendCode"
             >
               {{ smsBtnText }}
             </el-button>
           </span>
         </el-col>
       </el-row>
-      <el-row :gutter="24" style="margin: 10px auto;">
+      <el-row>
+        <el-col>
+          <iframe
+            v-if="passkeyVisible"
+            :src="passkeyUrl"
+            style="display: none"
+          />
+          <iframe
+            v-if="isFaceCaptureVisible && subTypeSelected ==='face' && faceCaptureUrl"
+            :src="faceCaptureUrl"
+            allow="camera"
+            sandbox="allow-scripts allow-same-origin"
+            style="width: 100%; height: 600px;border: none;"
+          />
+        </el-col>
+      </el-row>
+      <el-row :gutter="24" style="margin: 20px auto 10px;">
         <el-col :md="24" :sm="24">
-          <el-button class="confirm-btn" size="mini" type="primary" @click="handleConfirm">
+          <el-button
+            v-if="!noCodeMFA.includes(subTypeSelected)"
+            class="confirm-btn"
+            size="mini"
+            type="primary"
+            @click="handleConfirm"
+          >
             {{ this.$t('Confirm') }}
           </el-button>
+          <el-button
+            v-if="subTypeSelected === 'face'"
+            v-show="!isFaceCaptureVisible"
+            class="confirm-btn"
+            size="mini"
+            type="primary"
+            @click="handleFaceCapture"
+          >
+            {{ this.$tc('VerifyFace') }}
+          </el-button>
+          <el-button
+            v-if="subTypeSelected === 'passkey'"
+            v-loading="passkeyVisible"
+            class="confirm-btn"
+            size="mini"
+            type="primary"
+            @click="handlePasskeyVerify"
+          >
+            {{ this.$tc('Next') }}
+          </el-button>
         </el-col>
       </el-row>
     </div>
@@ -113,7 +155,14 @@ export default {
       visible: false,
       callback: null,
       cancel: null,
-      processing: false
+      processing: false,
+      isFaceCaptureVisible: false,
+      faceToken: null,
+      faceCaptureUrl: null,
+      noCodeMFA: ['face', 'passkey'],
+      sendCodeMFA: ['email', 'sms', 'otp'],
+      passkeyVisible: false,
+      passkeyUrl: '/api/v1/authentication/passkeys/login/?mfa=1'
     }
   },
   computed: {
@@ -129,6 +178,10 @@ export default {
   },
   methods: {
     handleSubTypeChange(val) {
+      if (val !== 'face') {
+        this.isFaceCaptureVisible = false
+      }
+
       this.inputPlaceholder = this.subTypeChoices.filter(item => item.name === val)[0]?.placeholder
       this.smsWidth = val === 'sms' ? 6 : 0
     },
@@ -172,8 +225,8 @@ export default {
     logout() {
       window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
     },
-    sendSMSCode() {
+    sendCode() {
-      this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: 'sms' }).then(res => {
+      this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected }).then(res => {
         this.$message.success(this.$tc('VerificationCodeSent'))
         let time = 60
         this.smsBtnDisabled = true
@@ -192,6 +245,56 @@ export default {
         this.$message.error(this.$tc('FailedToSendVerificationCode'))
       })
     },
+    handlePasskeyVerify() {
+      this.passkeyVisible = true
+      this.checkPasskeyStatus()
+    },
+    checkPasskeyStatus() {
+      const url = '/api/v1/authentication/confirm/check/?confirm_type=mfa'
+      const t = setInterval(() => {
+        this.$axios.get(url).then(data => {
+          this.passkeyVisible = false
+          this.onSuccess()
+        })
+      }, 2000)
+      setTimeout(() => {
+        clearInterval(t)
+        if (this.passkeyVisible) {
+          this.passkeyVisible = false
+          this.$message.error(this.$tc('PasskeyTimeout'))
+        }
+      }, 20000)
+    },
+    startFaceCapture() {
+      const url = '/api/v1/authentication/face/context/'
+      this.$axios.post(url).then(data => {
+        const token = data['token']
+        this.faceCaptureUrl = '/facelive/capture?token=' + token
+        this.isFaceCaptureVisible = true
+
+        const timer = setInterval(() => {
+          this.$axios.get(url + `?token=${token}`).then(data => {
+            if (data['is_finished']) {
+              clearInterval(timer)
+              this.isFaceCaptureVisible = false
+              this.handleConfirm()
+            }
+          })
+        }, 1000)
+      }).catch(() => {
+        this.$message.error(this.$tc('FailedToStartFaceCapture'))
+      })
+    },
+    handleFaceCapture() {
+      this.startFaceCapture()
+    },
+    onSuccess() {
+      this.secretValue = ''
+      this.visible = false
+      this.$nextTick(() => {
+        this.callback()
+      })
+    },
     handleConfirm() {
       if (this.confirmTypeRequired === 'relogin') {
         return this.logout()
@@ -207,13 +310,11 @@ export default {
       }
 
       this.$axios.post(`/api/v1/authentication/confirm/`, data).then(() => {
-        this.secretValue = ''
+        this.onSuccess()
-        this.visible = false
-        this.$nextTick(() => {
-          this.callback()
-        })
       }).catch((err) => {
         this.$message.error(err.message || this.$tc('ConfirmFailed'))
+        this.faceCaptureUrl = null
+        this.isFaceCaptureVisible = false
       })
     }
   }
@@ -221,21 +322,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .dialog-content ::v-deep .el-dialog__footer {
+.dialog-content ::v-deep .el-dialog__footer {
-    padding: 0;
+  padding: 0;
-  }
+}
 
-  .dialog-content ::v-deep .el-dialog {
+.dialog-content ::v-deep .el-dialog {
-    padding: 8px;
+  padding: 8px;
 
-    .el-dialog__body {
+  .el-dialog__body {
-      padding-top: 30px;
+    padding-top: 30px;
-      padding-bottom: 30px;
+    padding-bottom: 30px;
-    }
   }
+}
 
-  .confirm-btn {
+.confirm-btn {
-    width: 100%;
+  width: 100%;
-    line-height: 20px;
+  line-height: 20px;
-  }
+}
 </style>

src/components/Apps/VariableCreateUpdateForm/index.vue

@@ -0,0 +1,136 @@
+<template>
+  <AutoDataForm
+    ref="AutoDataForm"
+    class="variable-add"
+    :submit-btn-text="submitBtnText"
+    v-bind="$data"
+    @submit="confirm"
+  />
+</template>
+
+<script>
+import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
+
+export default {
+  name: 'VariableCreateForm',
+  components: {
+    AutoDataForm
+  },
+  props: {
+    variable: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+  data() {
+    const defaultValidator = (rule, value, callback) => {
+      if (this.defaultValueRequired && !value) {
+        callback(new Error(this.$t('FieldRequiredError')))
+      } else {
+        callback()
+      }
+    }
+    return {
+      defaultValueRequired: false,
+      submitBtnText: this.$t('Confirm'),
+      url: '/api/v1/ops/variables/',
+      form: Object.assign({ 'on_invalid': 'error' }, this.variable || {}),
+      fields: [
+        ['', ['name', 'var_name', 'type', 'text_default_value', 'select_default_value', 'extra_args', 'tips', 'required']]
+      ],
+      fieldsMeta: {
+        var_name: {
+          helpTextAsTip: false
+        },
+        text_default_value: {
+          label: this.$t('DefaultValue'),
+          hidden: (formValue) => {
+            return formValue.type !== 'text'
+          },
+          rules: [{ validator: defaultValidator }],
+          helpTip: this.$t('DefaultValueTip'),
+          el: {
+            type: 'input'
+          }
+        },
+        select_default_value: {
+          label: this.$t('DefaultValue'),
+          helpTip: this.$t('DefaultValueTip'),
+          hidden: (formValue) => {
+            return formValue.type !== 'select'
+          },
+          rules: [{ validator: defaultValidator }],
+          el: { type: 'input' }
+        },
+        extra_args: {
+          hidden: (formValue) => {
+            return formValue.type !== 'select'
+          },
+          el: { type: 'textarea', rows: 4, placeholder: this.$t('ExtraArgsPlaceholder') },
+          rules: [
+            {
+              validator: (rule, value, callback) => {
+                try {
+                  const lines = value.split('\n')
+                  const regex = /^[^:]+:[^:]+$/
+                  for (const line of lines) {
+                    if (!regex.test(line.trim())) {
+                      callback(new Error(this.$t('ExtraArgsFormatError')))
+                    }
+                  }
+                } catch (e) {
+                  callback(new Error(this.$t('ExtraArgsFormatError')))
+                }
+                callback()
+              }
+            }
+          ]
+        },
+        required: {
+          on: {
+            change: ([event], updateForm) => {
+              this.defaultValueRequired = event
+            }
+          }
+        }
+      },
+      hasSaveContinue: false,
+      method: 'get'
+    }
+  },
+  mounted() {
+    this.defaultValueRequired = this.variable?.required || false
+  },
+  methods: {
+    confirm(form) {
+      if (this.variable?.name) {
+        this.$emit('edit', form)
+      } else {
+        this.$emit('add', form)
+      }
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.variable-add {
+  ::v-deep .el-form-item {
+    margin-bottom: 5px;
+
+    .help-block {
+      margin-bottom: 5px;
+    }
+  }
+
+  ::v-deep .form-group-header {
+    .hr-line-dashed {
+      margin: 5px 0;
+    }
+
+    h3 {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>

src/components/Apps/VariableSetForm/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <AutoDataForm
+    ref="AutoDataForm"
+    class="variable-set"
+    :submit-btn-text="submitBtnText"
+    v-bind="$data"
+    :fields="fields"
+    @submit="confirm"
+  />
+</template>
+
+<script>
+import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
+
+export default {
+  name: 'VariableSetForm',
+  components: {
+    AutoDataForm
+  },
+  props: {
+    formData: {
+      type: Array,
+      default: () => ([])
+    },
+    queryParam: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      submitBtnText: this.$t('Confirm'),
+      // 防止缓存form remoteMeta
+      url: `/api/v1/ops/variables/form-data/?t=${new Date().getTime()}&` + this.queryParam,
+      form: {},
+      hasSaveContinue: false,
+      method: 'get',
+      hasReset: false
+    }
+  },
+  computed: {
+    fields() {
+      return [['', this.formData.map(item => item.var_name)]]
+    }
+  },
+  methods: {
+    confirm(form) {
+      this.$emit('confirm', form)
+    }
+  }
+}
+</script>
+
+<style lang='scss' scoped>
+.variable-set {
+  ::v-deep .el-form-item {
+    margin-bottom: 5px;
+
+    .help-block {
+      margin-bottom: 5px;
+    }
+  }
+
+  ::v-deep .form-group-header {
+    .hr-line-dashed {
+      margin: 5px 0;
+    }
+
+    h3 {
+      margin-bottom: 10px;
+    }
+  }
+}
+</style>

src/components/Cards/DetailCard/ItemValue.vue

@@ -78,7 +78,7 @@ export default {
         formatterData = data
       }
       return (
-        <span>{formatterData}</span>
+        <span style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: '1.2' }}>{formatterData}</span>
       )
     }
     if (this.value instanceof Array) {
@@ -92,7 +92,7 @@ export default {
       )
     }
     return (
-      <span title={this.displayValue}>{this.displayValue}</span>
+      <span style='white-space: pre-wrap;' title={this.displayValue}>{this.displayValue}</span>
     )
   }
 }

src/components/Cards/DetailCard/auto.vue

@@ -1,7 +1,12 @@
 <template>
   <IBox v-if="loading" style="width: 100%; height: 200px" />
   <div v-else>
-    <DetailCard v-if="hasObject && items.length > 0" :items="validItems" :loading="loading" v-bind="$attrs" />
+    <DetailCard
+      v-if="hasObject && items.length > 0"
+      :items="validItems"
+      :loading="loading"
+      v-bind="$attrs"
+    />
   </div>
 </template>
 
@@ -9,7 +14,7 @@
 import DetailCard from './index.vue'
 import { copy } from '@/utils/common'
 import { toSafeLocalDateStr } from '@/utils/time'
-import IBox from '@/components/IBox/index.vue'
+import IBox from '@/components/Common/IBox/index.vue'
 import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue'
 
 export default {
@@ -32,7 +37,7 @@ export default {
       type: Array,
       default: null
     },
-    showUndefine: {
+    showUndefined: {
       type: Boolean,
       default: true
     },
@@ -124,8 +129,18 @@ export default {
     parseArrayValue(value, excludes, label) {
       if (Array.isArray(value)) {
         const tp = typeof value[0]
+        let object = {}
+
+        if (value.length === 0) {
+          object = {
+            key: label,
+            value: '-'
+          }
+          return this.items.push(object)
+        }
+
+        // 如果是空数组，那么循环体将不会执行
         for (const [index, item] of value.entries()) {
-          let object = {}
           if (tp === 'object') {
             const firstValue = value[0]
             if (firstValue.hasOwnProperty('name')) {
@@ -168,7 +183,7 @@ export default {
       const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
       let remoteMeta = data.actions['GET'] || {}
       if (this.nested) {
-        remoteMeta = remoteMeta[this.nested]?.children || {}
+        remoteMeta = remoteMeta[this.nested]?.children || remoteMeta || {}
       }
       let fields = this.fields
       fields = fields || Object.keys(remoteMeta)
@@ -220,7 +235,7 @@ export default {
         value = this.parseValue(value, fieldMeta.type)
 
         if (value === undefined) {
-          if (this.showUndefine) {
+          if (this.showUndefined) {
             value = '-'
           } else {
             continue

src/components/Cards/DetailCard/index.vue

@@ -1,24 +1,25 @@
 <template>
   <IBox :fa="fa" :title="title">
-    <el-form :label-width="labelWidth" class="content" label-position="left">
+    <el-form :label-width="labelWidth" class="content detail-card" label-position="left">
-      <span v-for="item in items" :key="item.key">
+      <template v-for="item in items">
-        <el-form-item v-if="item.has !== false" :class="item.class" :label="item.key">
+        <div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
-          <span slot="label"> {{ formateLabel(item.key) }}</span>
+          <span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
-          <span
+          <span class="item-value el-form-item__content">
-            :is="item.component"
+            <template
-            v-if="item.component"
+              :is="item.component"
-            v-bind="{...item}"
+              v-if="item.component"
-          />
+              v-bind="{...item}"
-          <ItemValue v-else :value="item.value" class="item-value" v-bind="item" />
+            />
-        </el-form-item>
+            <ItemValue v-else :value="item.value" v-bind="item" />
-      </span>
+          </span>
+        </div>
+      </template>
     </el-form>
-    <slot />
   </IBox>
 </template>
 
 <script>
-import IBox from '../../IBox/index.vue'
+import IBox from '@/components/Common/IBox/index.vue'
 import ItemValue from './ItemValue.vue'
 
 export default {
@@ -45,7 +46,7 @@ export default {
     },
     labelWidth: {
       type: String,
-      default: '25%'
+      default: '120px'
     }
   },
   data() {
@@ -71,55 +72,76 @@ export default {
   padding: 20px 40px;
 }
 
-.el-form-item {
-  border-bottom: 1px dashed #EBEEF5;
-  padding: 1px 0;
-  margin-bottom: 0;
-
-  &:last-child {
-    border-bottom: none;
-  }
-
-  &.array-item {
-    border-bottom: none;
-
-    ::v-deep .el-form-item__content {
-      border-bottom: 1px dashed #EBEEF5
-    }
-
-    ::v-deep .el-form-item__label:last-child {
-      border: 1px dashed #EBEEF5;
-    }
-  }
-
-  ::v-deep .el-form-item__label {
-    padding-right: 8%;
-    overflow: hidden;
-    color: var(--color-icon-primary);
-
-    span {
-      display: inline-block;
-      line-height: 1.5;
-    }
-  }
-
-  ::v-deep .el-form-item__content {
-    color: var(--color-text-primary);
-    font-size: 13px;
-    line-height: 40px;
-  }
-
-  ::v-deep .el-tag--mini {
-    margin-right: 3px;
-  }
-}
-
-.item-value span {
-  word-break: break-word;
-}
-
 .content {
   font-size: 13px;
-  line-height: 2.5;
+  line-height: 2;
+
+  ::v-deep .el-form-item {
+    border-bottom: 1px dashed #F4F4F4;
+    padding: 1px 0;
+    margin-bottom: 0;
+    display: flex;
+    align-items: center;
+    //text-align: end;
+    line-height: 32px;
+    min-height: 32px;
+
+    &:last-child {
+      //border-bottom: none;
+    }
+
+    &.array-item {
+      border-bottom: none;
+
+      ::v-deep .el-form-item__content {
+        border-bottom: 1px dashed #EBEEF5
+      }
+
+      ::v-deep .el-form-item__label:last-child {
+        border: 1px dashed #EBEEF5;
+      }
+    }
+
+    .el-form-item__label {
+      //padding-right: 8%;
+      overflow: hidden;
+      color: var(--color-icon-primary);
+      font-size: 12px;
+      line-height: 1.5;
+      font-weight: 400;
+      width: 33%;
+      min-width: 120px;
+      padding: 5px 0;
+
+      span {
+        display: inline-block;
+        //line-height: 1.1;
+      }
+    }
+
+    .el-form-item__content {
+      color: var(--color-text-primary);
+      font-size: 13px;
+      line-height: 1.5;
+      width: calc(100% - 120px);
+      padding: 5px 0;
+    }
+
+    ::v-deep .el-tag--mini {
+      margin-right: 3px;
+    }
+  }
+
+  .item-value {
+    ::v-deep span {
+      //display: -webkit-box;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      word-break: break-word;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      vertical-align: middle;
+    }
+  }
 }
 </style>

src/components/Cards/RelationCard/index.vue

@@ -49,7 +49,7 @@
 <script>
 import { createSourceIdCache } from '@/api/common'
 import { Select2 } from '@/components/Form/FormFields'
-import IBox from '@/components/IBox/index.vue'
+import IBox from '@/components/Common/IBox/index.vue'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -340,13 +340,13 @@ b, strong {
 }
 
 tr td {
-  line-height: 1.42857;
+  line-height: 1.4;
-  padding: 8px;
+  padding: 8px 0;
   vertical-align: top;
 }
 
 tr.item td {
-  border-top: 1px solid #e7eaec;
+  border-top: 1px dashed #EBEEF5;
 }
 
 .box-margin {

src/components/Cards/SummaryCard/index.vue

@@ -1,18 +1,23 @@
 <template>
-  <el-card shadow="never">
+  <div>
-    <div slot="header" class="summary-header">
+    <div class="summary-header">
-      <span class="header-title">{{ title }}</span>
+      <el-tooltip :content="title" :open-delay="500" placement="top">
+        <span class="title">{{ title }}</span>
+      </el-tooltip>
     </div>
     <slot>
-      <h1 class="no-margins">
+      <h3 class="no-margins ">
-        <span v-if="body.disabled" class="disabled-link">{{ body.count }}</span>
+        <span
-        <router-link v-else :to="body.route">
+          :class="{ 'can-direct': canDirect }"
-          <span>{{ body.count }}</span>
+          class="num"
-        </router-link>
+          @click="handleClick"
-      </h1>
+        >
-      <small>{{ body.comment }}</small>
+          <span v-if="count === null"> - </span>
+          <span v-else>{{ count }}</span>
+        </span>
+      </h3>
     </slot>
-  </el-card>
+  </div>
 </template>
 
 <script>
@@ -23,56 +28,78 @@ export default {
       type: String,
       default: ''
     },
-    rightSideLabel: {
+    count: {
-      type: Object,
+      type: [Number, String, Promise],
-      default: () => ({})
+      default: null
     },
-    body: {
+    route: {
-      type: Object,
+      type: [String, Object],
-      default: () => ({})
+      default: ''
+    },
+    canDirect: {
+      type: Boolean,
+      default: false
+    },
+    callback: {
+      type: Function,
+      default: () => {
+      }
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {
+    handleClick() {
+      if (this.disabled) {
+        return
+      }
+      if (this.route) {
+        this.$router.push(this.route)
+        return
+      }
+      this.callback.bind(this)()
+      this.$emit('click')
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  .pull-right {
+.summary-header {
-    float: right !important;
+  //color: var(--color-icon-primary);
-  }
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
 
-  .header-title {
+  .title {
-    font-size: 14px;
+    font-style: normal;
-    margin: 0 0 7px;
     font-weight: 600;
+    font-size: 12px;
+    text-transform: uppercase;
+    line-height: 1.2;
   }
+}
 
-  .right-side ::v-deep .el-tag {
+.no-margins {
-    font-weight: 600;
+  margin: 0 !important;
-    padding: 3px 8px;
-    text-shadow: none;
-    line-height: 1;
-  }
 
-  h1 {
+  .num {
-    font-size: 30px;
+    font-style: normal;
-    font-weight: 100;
+    font-weight: 500;
-  }
+    font-size: 24px;
+    line-height: 40px;
+    color: var(--color-text-primary);
+    cursor: pointer;
 
-  .el-card__body {
+    &.can-direct:hover {
-    background-color: #ffffff;
+      color: var(--color-primary);
-    color: inherit;
+    }
-    padding: 15px 20px 20px 20px !important;
-    border-color: #e7eaec;
-    border-image: none;
-    border-style: solid solid none;
-    border-width: 1px 0;
-  }
-
-  .no-margins {
-    margin: 0 !important;
-  }
-
-  .disabled-link {
-    color: #428bca;
   }
+}
 </style>

src/components/Common/ActionsGroup/index.vue

@@ -3,7 +3,7 @@
 </template>
 
 <script>
-import DataActions from '@/components/DataActions'
+import DataActions from '@/components/Common/DataActions/index.vue'
 
 export default {
   name: 'ActionsGroup',

src/components/Common/DataActions/index.vue

@@ -5,15 +5,28 @@
         v-if="action.dropdown"
         v-show="action.dropdown.length > 0"
         :key="action.name"
+        :class="[action.name, {grouped: action.grouped }]"
+        :size="action.size"
+        :split-button="!!action.split"
+        :type="action.type"
         class="action-item"
         placement="bottom-start"
         trigger="click"
+        @click="handleClick(action)"
         @command="handleDropdownCallback"
       >
-        <el-button :size="size" class="more-action" v-bind="cleanButtonAction(action)">
+        <span v-if="action.split" :style="{ cursor: action.disabled ? 'not-allowed' : 'pointer' }">
-          <span v-if="action.icon && !action.icon.startsWith('el-')" class="pre-icon">
+          {{ action.title }}
-            <i v-if="action.icon.startsWith('fa')" :class="'fa fa-fw ' + action.icon" />
+        </span>
-            <svg-icon v-else :icon-class="action.icon" />
+        <el-button
+          v-else
+          :class="action.name"
+          :size="size"
+          class="more-action"
+          v-bind="{...cleanButtonAction(action), icon: ''}"
+        >
+          <span class="pre-icon">
+            <Icon v-if="action.icon" :icon="action.icon" />
           </span>
           <span v-if="action.title">
             {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
@@ -29,7 +42,13 @@
             >
               {{ option.group }}
             </div>
-            <el-tooltip :key="option.name" :content="option.tip" :disabled="!option.tip" :open-delay="500" placement="top">
+            <el-tooltip
+              :key="option.name"
+              :content="option.tip"
+              :disabled="!option.tip"
+              :open-delay="500"
+              placement="top"
+            >
               <el-dropdown-item
                 :key="option.name"
                 :command="[option, action]"
@@ -37,9 +56,8 @@
                 class="dropdown-item"
                 v-bind="{...option, icon: ''}"
               >
-                <span v-if="option.icon" class="pre-icon">
+                <span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
-                  <i v-if="option.icon.startsWith('fa')" :class="'fa fa-fw ' + option.icon" />
+                  <Icon v-if="option.icon" :icon="option.icon" />
-                  <svg-icon v-else :icon-class="option.icon" />
                 </span>
                 {{ option.title }}
               </el-dropdown-item>
@@ -51,16 +69,16 @@
       <el-button
         v-else
         :key="action.name"
+        :class="[action.name, {grouped: action.grouped }]"
         :size="size"
         class="action-item"
-        v-bind="{...cleanButtonAction(action), icon: action.icon && action.icon.startsWith('el-') ? action.icon : ''}"
+        v-bind="{...cleanButtonAction(action), icon: ''}"
         @click="handleClick(action)"
       >
-        <el-tooltip :content="action.tip" :disabled="!action.tip" :open-delay="500" placement="top">
+        <el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
           <span>
-            <span v-if="action.icon && !action.icon.startsWith('el-')" style="vertical-align: initial">
+            <span v-if="action.icon" style="vertical-align: initial">
-              <i v-if="action.icon.startsWith('fa')" :class="'fa ' + action.icon" />
+              <Icon :icon="action.icon" />
-              <svg-icon v-else :icon-class="action.icon" />
             </span>
             {{ action.title }}
           </span>
@@ -72,9 +90,13 @@
 
 <script>
 import { toSentenceCase } from '@/utils/common'
+import Icon from '@/components/Widgets/Icon/index.vue'
 
 export default {
   name: 'DataActions',
+  components: {
+    Icon
+  },
   props: {
     grouped: {
       type: Boolean,
@@ -99,6 +121,9 @@ export default {
     }
   },
   methods: {
+    actionsHasIcon(actions) {
+      return actions.some(action => action.icon)
+    },
     hasIcon(action, type = '') {
       const icon = action.icon
       if (!icon) {
@@ -156,6 +181,7 @@ export default {
       delete action['callback']
       delete action['name']
       delete action['can']
+      delete action['split']
       return action
     },
     cleanActions(actions) {
@@ -185,6 +211,10 @@ export default {
         }
         delete action['can']
 
+        if (!action.size) {
+          action.size = 'small'
+        }
+
         if (action.dropdown) {
           action.dropdown = this.cleanActions(action.dropdown)
         }
@@ -209,6 +239,10 @@ $color-drop-menu-border: #e4e7ed;
   .action-item {
     margin-left: 5px;
 
+    &.grouped {
+      margin-left: 0;
+    }
+
     &:first-child {
       margin-left: 0;
     }
@@ -249,10 +283,15 @@ $color-drop-menu-border: #e4e7ed;
   align-items: flex-end;
 
   .el-button {
-    display: flex;
+    padding: 2px 5px;
-    align-items: center;
+
-    padding: 2px 6px;
+    &:not(.is-plain) {
-    color: $btn-text-color;
+      color: $btn-text-color;
+    }
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 
     * {
       vertical-align: baseline !important;
@@ -280,7 +319,6 @@ $color-drop-menu-border: #e4e7ed;
 // 下拉 options
 .el-dropdown-menu {
   ::v-deep .more-batch-processing {
-    text-align: center;
 
     &:hover {
       background-color: transparent !important;
@@ -303,6 +341,7 @@ $color-drop-menu-border: #e4e7ed;
 
   .dropdown-item {
     color: var(--color-text-primary);
+    line-height: 34px;
 
     .pre-icon {
       width: 17px;
@@ -324,6 +363,8 @@ $color-drop-menu-border: #e4e7ed;
   }
 
   .el-dropdown-menu__item {
+    padding: 0 20px;
+
     &.is-disabled {
       color: var(--color-disabled);
       cursor: not-allowed;

src/components/Common/IBox/HeadingIBox.vue

@@ -2,7 +2,8 @@
   <IBox v-bind="$attrs">
     <div v-if="contentHeading" class="ibox-heading">
       <slot name="content-heading">
-        <h3 v-if="contentHeading.title"><i v-if="contentHeading.fa" :class="'fa ' + contentHeading.fa" /> {{ contentHeading.title }}</h3>
+        <h3 v-if="contentHeading.title"><i v-if="contentHeading.fa" :class="'fa ' + contentHeading.fa" /> {{
+          contentHeading.title }}</h3>
         <small v-if="contentHeading.content"><i class="fa fa-tim" /> {{ contentHeading.content }}</small>
       </slot>
     </div>
@@ -11,7 +12,8 @@
 </template>
 
 <script>
-import IBox from './index'
+import IBox from './index.vue'
+
 export default {
   name: 'HeadingIBox',
   components: { IBox },
@@ -25,20 +27,22 @@ export default {
 </script>
 
 <style scoped>
-  .ibox-heading {
+.ibox-heading {
-    background-color: #f3f6fb;
+  background-color: #f3f6fb;
-    border-bottom: none;
+  border-bottom: none;
-    margin: -15px -20px 20px -20px;
+  margin: -15px -20px 20px -20px;
-    padding: 20px
+  padding: 20px
-  }
+}
-  .ibox-heading h3 {
+
-    font-weight: 200;
+.ibox-heading h3 {
-    font-size: 24px;
+  font-weight: 200;
-    margin-top: 5px;
+  font-size: 24px;
-    margin-bottom: 10px;
+  margin-top: 5px;
-    line-height: 1.1;
+  margin-bottom: 10px;
-  }
+  line-height: 1.1;
-  .ibox .el-card__body {
+}
-   background-color: #f3f6fb;
+
-  }
+.ibox .el-card__body {
+  background-color: #f3f6fb;
+}
 </style>

src/components/Common/IBox/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <el-card :class="'ibox ' + type" shadow="never" v-bind="$attrs">
+  <el-card :class="'ibox ' + type" :shadow="shadow" v-bind="$attrs">
     <template #header>
       <slot name="header">
         <div v-if="title" slot="header" class="clearfix ibox-title">
@@ -26,6 +26,10 @@ export default {
     type: {
       type: String,
       default: 'default'
+    },
+    shadow: {
+      type: String,
+      default: 'never'
     }
   },
   computed: {

src/components/Common/QuickActions/action.vue

@@ -25,9 +25,9 @@
 </template>
 
 <script>
-import Switcher from '@/components/Form/FormFields/Switcher'
+import Switcher from '@/components/Form/FormFields/Switcher.vue'
-import Select2 from '@/components/Form/FormFields/Select2'
+import Select2 from '@/components/Form/FormFields/Select2.vue'
-import UpdateSelect from '@/components/Form/FormFields/UpdateSelect'
+import UpdateSelect from '@/components/Form/FormFields/UpdateSelect.vue'
 import { toSentenceCase } from '@/utils/common'
 
 class Action {

src/components/Common/QuickActions/index.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import IBox from '@/components/IBox'
+import IBox from '@/components/Common/IBox/index.vue'
-import ActionItem from './action'
+import ActionItem from './action.vue'
 
 // 查看 views/users/users/UserDetail/UserInfo.vue 使用样例
 export default {
@@ -39,32 +39,32 @@ export default {
 </script>
 
 <style scoped>
-  .quick-actions ::v-deep table {
+.quick-actions ::v-deep table {
-    width: 100%;
+  width: 100%;
-  }
+}
 
-  .quick-actions ::v-deep tr > td {
+.quick-actions ::v-deep tr > td {
-    line-height: 1.43;
+  line-height: 1.43;
-    padding: 8px;
+  padding: 8px 0;
-    vertical-align: top;
+  vertical-align: top;
-    font-size: 13px;
+  font-size: 13px;
-    width: 50%;
+  width: 50%;
-  }
+}
 
-  .quick-actions ::v-deep tr > td > span:last-child {
+.quick-actions ::v-deep tr > td > span:last-child {
-    float: right;
+  float: right;
-  }
+}
 
-  .quick-actions ::v-deep button {
+.quick-actions ::v-deep button {
-    padding: 4px 5px;
+  padding: 4px 5px;
-    font-size: 13px;
+  font-size: 13px;
-    width: 65px;
+  min-width: 65px;
 
-    span {
+  span {
-      overflow: hidden;
+    overflow: hidden;
-      white-space: nowrap; /* 控制文本不换行 */
+    white-space: nowrap; /* 控制文本不换行 */
-      text-overflow: ellipsis;
+    text-overflow: ellipsis;
-      display: block;
+    display: block;
-    }
   }
+}
 </style>

src/components/Dashboard/ProgressChart.vue

@@ -128,7 +128,8 @@ export default {
               tip += current.label + '：' + current.total + '<br/>'
             }
             return tip
-          }
+          },
+          appendToBody: true
         },
         grid: {
           top: '60%',

src/components/Dashboard/RankTable.vue

@@ -9,18 +9,29 @@
       class="table"
       style="width: 100%"
     >
-      <el-table-column :label="$tc('Ranking')" width="80px">
+      <el-table-column :label="$tc('Ranking')">
-        <template v-slot="scope">
+        <template #header>
-          <span>{{ scope.$index + 1 }}</span>
+          <el-tooltip :content="$t('Ranking')" placement="top" :open-delay="500">
+            <span style="cursor: pointer;">{{ $t('Ranking') }}</span>
+          </el-tooltip>
+        </template>
+        <template #default="scope">
+          {{ scope.$index + 1 }}
         </template>
       </el-table-column>
+
       <el-table-column
         v-for="i in config.columns"
         :key="i.prop"
-        :label="i.label"
         :prop="i.prop"
-        :width="i.width"
+        :width="getColumnWidth(i)"
-      />
+      >
+        <template #header>
+          <el-tooltip :content="i.label" placement="top" :open-delay="500">
+            <span style="cursor: pointer;">{{ i.label }}</span>
+          </el-tooltip>
+        </template>
+      </el-table-column>
     </el-table>
   </div>
 </template>
@@ -56,6 +67,19 @@ export default {
     this.getList()
   },
   methods: {
+    getColumnWidth(column) {
+      if (column.prop === 'total') {
+        const locale = this.$i18n.locale
+        switch (locale) {
+          case 'en':
+            return '120px'
+          case 'pt-br':
+            return '220px'
+          default:
+            return '100px'
+        }
+      }
+    },
     getList() {
       this.$axios.get(this.tableUrl).then(res => {
         this.tableData = this.config.data ? res?.[this.config.data] : res

src/components/Dashboard/RealTimeSummary.vue

@@ -6,7 +6,7 @@
     <div class="content">
       <el-row justify="space-between" type="flex">
         <el-col v-for="item of summaryItems" :key="item.title" :md="8" :sm="12" :xs="12">
-          <SummaryCard :body="item.body" :title="item.title" />
+          <SummaryCard :title="item.title" v-bind="item.body" />
         </el-col>
       </el-row>
     </div>
@@ -15,7 +15,7 @@
 
 <script>
 import Title from './Title.vue'
-import SummaryCard from './SummaryCard'
+import SummaryCard from '@/components/Cards/SummaryCard'
 
 export default {
   components: { Title, SummaryCard },
@@ -85,15 +85,18 @@ export default {
 .box {
   padding: 20px;
   background: #FFFFFF;
+
   .content {
     .el-col {
       padding-left: 16px;
       border-left: 1px solid #EFF0F1;
+
       &:first-child {
         padding-left: 0;
         border-left: none;
       }
     }
+
     .sub {
       font-style: normal;
       font-weight: 400;
@@ -101,6 +104,7 @@ export default {
       line-height: 20px;
       color: #646A73;
     }
+
     .num {
       font-style: normal;
       font-weight: 500;

src/components/Dashboard/RingChart.vue

@@ -23,24 +23,42 @@ export default {
   },
   computed: {
     options() {
-      const { total = 0, active = 0, title, color } = this.config
+      const { total = 0, active = 0, title, color, colors } = this.config
       const activeDecimal = new Decimal(active)
       const totalDecimal = new Decimal(total)
 
       let percentage = activeDecimal.dividedBy(totalDecimal).times(100)
       percentage = isNaN(percentage) ? 0 : percentage
       percentage = percentage.toFixed(2)
+
+      const formatTitle = (text) => {
+        if (!text) return ''
+        const maxLength = 23
+        const lines = []
+        for (let i = 0; i < text.length; i += maxLength) {
+          lines.push(text.slice(i, i + maxLength))
+        }
+        return lines.join('\n')
+      }
+
       return {
         title: [
           {
-            text: this.config.chartTitle,
+            text: formatTitle(this.config.chartTitle),
             textStyle: {
               color: '#646A73',
-              fontSize: 12
+              fontSize: 12,
+              lineHeight: 16,
+              rich: {
+                width: 100,
+                overflow: 'break'
+              }
             },
             textAlign: 'center',
             left: '48%',
-            top: '32%'
+            top: '32%',
+            width: 100,
+            overflow: 'break'
           },
           {
             left: '48%',
@@ -61,7 +79,7 @@ export default {
         legend: {
           show: false
         },
-        color: [color, 'rgba(43, 147, 124, 0.05)'],
+        color: colors || [color, 'rgba(43, 147, 124, 0.05)'],
         tooltip: {
           trigger: 'item',
           formatter: '{a} <br/>{b}: {d}%'

src/components/Dashboard/SummaryCountCard.vue

@@ -4,18 +4,20 @@
       <Title :config="config" />
     </div>
     <div class="content">
-      <el-row type="flex" justify="space-between">
+      <SummaryCard
-        <el-col v-for="item of items" :key="item.title" :md="8" :sm="12" :xs="12">
+        v-for="item of items"
-          <SummaryCard :title="item.title" :body="item.body" />
+        :key="item.title"
-        </el-col>
+        :title="item.title"
-      </el-row>
+        class="summary-card"
+        v-bind="item.body"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import Title from '../components/Title.vue'
+import Title from './Title.vue'
-import SummaryCard from '../components/SummaryCard'
+import SummaryCard from '@/components/Cards/SummaryCard'
 
 export default {
   components: { Title, SummaryCard },
@@ -35,8 +37,7 @@ export default {
     }
   },
   data() {
-    return {
+    return {}
-    }
   }
 }
 </script>
@@ -45,28 +46,21 @@ export default {
 .box {
   padding: 20px;
   background: #FFFFFF;
+
   .content {
-    .el-col {
+    display: flex;
+    justify-content: space-between;
+    padding: 0 10px;
+
+    .summary-card {
       padding-left: 16px;
       border-left: 1px solid #EFF0F1;
+
       &:first-child {
         padding-left: 0;
         border-left: none;
       }
     }
-    .sub {
-      font-style: normal;
-      font-weight: 400;
-      font-size: 12px;
-      line-height: 20px;
-      color: #646A73;
-    }
-    .num {
-      font-style: normal;
-      font-weight: 500;
-      font-size: 24px;
-      cursor: pointer;
-    }
   }
 }
 </style>

src/components/Dialog/DiffDetail.vue

@@ -1,6 +1,7 @@
 <template>
   <Dialog
     v-if="detailVisible"
+    :modal="false"
     :show-cancel="false"
     :show-confirm="false"
     :title="title"

src/components/Dialog/ProcessingDialog.vue

@@ -0,0 +1,71 @@
+<template>
+  <Dialog
+    :show-cancel="false"
+    :visible="iVisible"
+    class="processing-dialog"
+    height="300"
+    :title="$tc('Processing')"
+    width="300"
+    @confirm="iVisible=false"
+  >
+    <div id="load">
+      <div class="spinner" />
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from './index.vue'
+
+export default {
+  name: 'ProcessingDialog',
+  components: { Dialog },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.processing-dialog {
+  ::v-deep .el-dialog__body {
+    overflow: hidden;
+  }
+}
+
+.spinner {
+  width: 100px;
+  height: 100px;
+  border: 5px solid rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  border-top-color: var(--color-primary);
+  animation: spin 1s infinite linear;
+}
+
+#load {
+  display: flex;
+  justify-content: center;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+</style>

src/components/Dialog/RemoteProcessingDialog.vue

@@ -0,0 +1,69 @@
+<template>
+  <Dialog
+    :visible="iVisible"
+    height="300"
+    title="Processing"
+    width="300"
+    class="processing-dialog"
+  >
+    <div id="load">
+      <div class="spinner" />
+    </div>
+  </Dialog>
+</template>
+
+<script>
+import Dialog from './index.vue'
+
+export default {
+  name: 'RemoteProcessingDialog',
+  components: { Dialog },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.processing-dialog {
+  ::v-deep .el-dialog__body {
+    overflow: hidden;
+  }
+}
+
+.spinner {
+    width: 100px;
+    height: 100px;
+    border: 5px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top-color: var(--color-primary);
+    animation: spin 1s infinite linear;
+}
+
+#load {
+  display: flex;
+  justify-content: center;
+}
+
+@keyframes spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+</style>

src/components/Dialog/ReportDialog.vue

@@ -0,0 +1,75 @@
+<template>
+  <div>
+    <Dialog
+      v-if="iVisible"
+      :destroy-on-close="true"
+      :show-cancel="false"
+      :show-confirm="false"
+      :title="$tc('Report')"
+      :visible.sync="iVisible"
+      top="35vh"
+      width="80%"
+      @close="loading=true"
+    >
+      <span v-if="loading" v-loading="loading" class="loading" />
+      <iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
+    </Dialog>
+  </div>
+</template>
+
+<script>
+import Dialog from '@/components/Dialog/index.vue'
+
+export default {
+  name: 'ReportDialog',
+  components: {
+    Dialog
+  },
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    url: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      loading: true
+    }
+  },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  mounted() {
+  },
+  beforeMount() {
+  },
+  methods: {
+    onIframeLoad() {
+      this.loading = false
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+iframe {
+  width: 100%;
+  height: 500px;
+}
+
+.loading {
+  margin-top: 20px;
+  display: block;
+}
+</style>

src/components/Dialog/Secret.vue

@@ -0,0 +1,96 @@
+<template>
+  <Dialog
+    :show-cancel="false"
+    :title="title"
+    :visible.sync="visible"
+    :close-on-click-modal="false"
+    width="700px"
+    @close="onClose"
+    @confirm="visible = false"
+  >
+    <el-alert type="warning" :closable="false">
+      {{ warningText }}
+      <div class="secret">
+        <div class="row">
+          <span class="col">ID:</span>
+          <span class="value">{{ keyInfo.id }}</span>
+          <i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.id)" />
+        </div>
+        <div class="row">
+          <span class="col">Secret:</span>
+          <span class="value">{{ keyInfo.secret }}</span>
+          <i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.secret)" />
+        </div>
+      </div>
+    </el-alert>
+  </Dialog>
+</template>
+
+<script>
+import i18n from '@/i18n/i18n'
+import { copy } from '@/utils/common'
+import Dialog from '@/components/Dialog/index'
+
+export default {
+  name: 'Secret',
+  components: {
+    Dialog
+  },
+  props: {
+    title: {
+      type: String,
+      default: () => i18n.t('CreateAccessKey')
+    },
+    warningText: {
+      type: String,
+      default: () => i18n.t('ApiKeyWarning')
+    }
+  },
+  data() {
+    return {
+      keyInfo: { id: '', secret: '' },
+      visible: false
+    }
+  },
+  methods: {
+    show(data) {
+      this.keyInfo = data
+      this.visible = true
+    },
+    onClose() {
+      this.$emit('close')
+    },
+    handleCopy(value) {
+      copy(value)
+    }
+  }
+}
+
+</script>
+
+<style lang='scss' scoped>
+ .secret {
+  color: #2b2f3a;
+  margin-top: 20px;
+}
+
+.row {
+  margin-bottom: 10px;
+}
+
+.col {
+  width: 100px;
+  text-align: left;
+  display: inline-block;
+}
+
+.copy-icon {
+  margin-left: 5px;
+  cursor: pointer;
+  transition: color 0.2s;
+}
+
+.value {
+  font-weight: 600;
+}
+</style>