Fixed: Task Click

.prettierrc

@@ -1,11 +0,0 @@
-{
-  "printWidth": 100,
-  "tabWidth": 2,
-  "useTabs": false,
-  "singleQuote": true,
-  "semi": false,
-  "trailingComma": "none",
-  "bracketSpacing": true,
-  "arrowParens": "avoid",
-  "endOfLine": "lf"
-}

Dockerfile

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

package.json

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

public/index.html

@@ -1,6 +1,6 @@
 <!DOCTYPE html>
 <html>
-<head>
+  <head>
     <meta charset="utf-8">
     <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
     <meta content="0" http-equiv="Expires">
@@ -20,71 +20,52 @@
             display: flex;
             justify-content: center;
             align-items: center;
-            background-color: rgba(255, 255, 255, 0.98);
+            background-color: white;
             z-index: 9999;
         }
 
-        #loading .spinner {
-            width: 40px;
-            height: 40px;
-            border: 3px solid transparent;
-            border-top-color: var(--color-primary);
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(0, 0, 0, 0.1);
             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;
+            border-top-color: #3498db;
+            animation: spin 1s infinite linear;
         }
 
         @keyframes spin {
-            0% {
-                transform: rotate(0deg);
-            }
-            100% {
+            to {
                 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/'
-        }
-        const pathname = window.location.pathname
-        if (pathname.startsWith('/core')) {
-            return
-        }
-        if (pathname.indexOf('/ui') === -1) {
-            window.location.href = window.location.origin + '/ui/#' + pathname
-        }
-        if (pathname.startsWith('/ui/#/chat')) {
-            window.location.href = window.location.origin + pathname
-        }
-    }
-</script>
-<div id="app">
-</div>
-<div id="loading">
-    <div class="spinner"></div>
-</div>
-<!-- built files will be auto injected -->
-</body>
+  </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/'
+          }
+          const pathname = window.location.pathname
+          if (pathname.startsWith('/core')) {
+              return
+          }
+          if (pathname.indexOf('/ui') === -1) {
+              window.location.href = window.location.origin + '/ui/#' + pathname
+          }
+          if (pathname.startsWith('/ui/#/chat')) {
+              window.location.href = window.location.origin + pathname
+          }
+      }
+    </script>
+    <div id="app">
+    </div>
+    <div id="loading">
+      <div class="spinner"></div>
+    </div>
+    <!-- built files will be auto injected -->
+  </body>
 </html>

src/App.vue

@@ -5,90 +5,14 @@
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
-import { Watermark } from 'watermark-js-plus'
+import { mapState } from 'vuex'
 
 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 getZoneList(data) {
+export function getDomainList(data) {
   return request({
-    url: '/api/v1/assets/zones/',
+    url: '/api/v1/assets/domains/',
     method: 'get',
     params: data
   })

src/api/users.js

@@ -8,20 +8,11 @@ export function login(data) {
   })
 }
 
-export async function getProfile(token) {
-  let profile = await request({
+export function getProfile(token) {
+  return 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) {
@@ -31,7 +22,6 @@ export function getUserList(data) {
     params: data
   })
 }
-
 export function getUserGroupList(params) {
   return request({
     url: '/api/v1/users/groups/',
@@ -39,7 +29,6 @@ export function getUserGroupList(params) {
     params: params
   })
 }
-
 export function getUserGroupDetail(id) {
   return request({
     url: `/api/v1/users/groups/${id}/`,
@@ -61,7 +50,6 @@ 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

@@ -1 +0,0 @@
-<?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/ActionsGroup/index.vue

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

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -6,17 +6,10 @@ 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('Asset'),
+      label: vm.$t('Assets'),
       rules: [Required],
       el: {
         multiple: true,
@@ -77,8 +70,11 @@ export const accountFieldsMeta = (vm) => {
             if (!vm.account?.name) {
               updateForm({ username: value })
             }
+            const maybePrivileged = defaultPrivilegedAccounts.includes(value)
+            if (maybePrivileged) {
+              updateForm({ privileged: true })
+            }
           }
-          onPrivilegedUser(value, updateForm)
         }
       },
       hidden: () => {
@@ -96,7 +92,10 @@ export const accountFieldsMeta = (vm) => {
           vm.usernameChanged = true
         },
         change: ([value], updateForm) => {
-          onPrivilegedUser(value, updateForm)
+          const maybePrivileged = defaultPrivilegedAccounts.includes(value)
+          if (maybePrivileged) {
+            updateForm({ privileged: true })
+          }
         }
       },
       hidden: () => {
@@ -122,6 +121,11 @@ export const accountFieldsMeta = (vm) => {
       el: {
         multiple: false,
         clearable: true,
+        disabled: {
+          get disabled() {
+            return vm.isDisabled
+          }
+        },
         ajax: {
           url: `/api/v1/accounts/accounts/su-from-accounts/?account=${vm.account?.id || ''}&asset=${vm.asset?.id || ''}`,
           transformOption: (item) => {
@@ -235,9 +239,6 @@ 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 ||

src/components/Apps/AccountCreateUpdateForm/index.vue

@@ -63,7 +63,7 @@ export default {
       encryptedFields: ['secret'],
       fields: [
         [this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
-        [this.$t('Asset'), ['assets']],
+        [this.$t('Assets'), ['assets']],
         [this.$t('Secret'), [
           'secret_type', 'password', 'ssh_key', 'token',
           'access_key', 'passphrase', 'api_key',

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

@@ -24,7 +24,7 @@
 <script>
 import Drawer from '@/components/Drawer/index.vue'
 import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
-import IBox from '@/components/Common/IBox/index.vue'
+import IBox from '@/components/IBox/index.vue'
 import Page from '@/layout/components/Page/index.vue'
 
 export default {
@@ -184,7 +184,7 @@ export default {
     },
     handleCloseDrawer() {
       this.iVisible = false
-      // Reflect.deleteProperty(this.$route.query, 'flag')
+      Reflect.deleteProperty(this.$route.query, 'flag')
     },
     handleAccountOperation(id, path, data) {
       this.$axios.post(`/api/v1/accounts/accounts/${id}/${path}/`, data).then((res) => {

src/components/Apps/AccountListTable/AccountList.vue

@@ -50,15 +50,9 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const'
+import { accountOtherActions, accountQuickFilters, connectivityMeta } from './const'
 import { openTaskPage } from '@/utils/jms'
-import {
-  AccountConnectFormatter,
-  ActionsFormatter,
-  PlatformFormatter,
-  SecretViewerFormatter
-} from '@/components/Table/TableFormatters'
+import { ActionsFormatter, PlatformFormatter, SecretViewerFormatter, AccountConnectFormatter } from '@/components/Table/TableFormatters'
 import ViewSecret from './ViewSecret.vue'
 import UpdateSecretInfo from './UpdateSecretInfo.vue'
 import ResultDialog from './BulkCreateResultDialog.vue'
@@ -143,17 +137,12 @@ export 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,
@@ -182,21 +171,9 @@ export default {
         },
         columnsMeta: {
           name: {
-            minWidth: '60px',
+            width: '120px',
             formatterArgs: {
               can: () => vm.$hasPerm('accounts.view_account'),
-              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}`
               }
@@ -216,45 +193,33 @@ export default {
             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 ''
+              buttonIcon: 'fa fa-desktop',
+              titleText: '可选协议',
+              url: '/api/v1/assets/assets/{id}',
+              connectUrlTemplate: (row) => `/luna/pam_connect/${row.id}/${row.username}/${row.asset.id}/${row.asset.name}/`,
+              setMapItem: (id, protocol) => {
+                this.$store.commit('table/SET_PROTOCOL_MAP_ITEM', {
+                  key: id,
+                  value: protocol
+                })
               }
             }
           },
           platform: {
             label: this.$t('Platform'),
-            width: '150px',
+            width: '120px',
             formatter: PlatformFormatter,
             formatterArgs: {
               platformAttr: 'asset.platform'
             }
           },
           asset: {
-            minWidth: '100px',
             formatter: function(row) {
               return row.asset.name
             }
           },
           username: {
-            minWidth: '60px',
-            formatter: function(row) {
-              if (row.ds && row.ds['domain_name']) {
-                return `${row.username}@${row.ds['domain_name']}`
-              } else {
-                return row.username
-              }
-            }
+            width: '120px'
           },
           secret_type: {
             formatter: function(row) {
@@ -282,17 +247,11 @@ 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: true, // can set function(row, value)
               hasClone: false,
-              canDelete: ({ row }) => vm.$hasPerm('accounts.delete_account') && !isDirectoryServiceAccount(row, this),
+              canDelete: () => vm.$hasPerm('accounts.delete_account'),
               moreActionsTitle: this.$t('More'),
               extraActions: accountOtherActions(this)
             }
@@ -323,15 +282,16 @@ export default {
             type: 'primary',
             icon: 'plus',
             can: () => {
-              return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
+              return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
             },
-            callback: () => {
+            callback: async() => {
+              await this.getAssetDetail()
               setTimeout(() => {
                 vm.iAsset = this.asset
                 vm.account = {}
-                this.addTemplate = false
-                this.showAddDialog = true
-              }, 200)
+                vm.addTemplate = false
+                vm.showAddDialog = true
+              })
             }
           },
           {
@@ -339,7 +299,7 @@ export default {
             title: this.$t('TemplateAdd'),
             has: !(this.platform || this.asset),
             can: () => {
-              return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
+              return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
             },
             callback: async() => {
               await this.getAssetDetail()
@@ -428,12 +388,9 @@ 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')
       }
@@ -473,8 +430,7 @@ export default {
       Object.assign(this.account, account)
     },
     addAccountSuccess() {
-      // Reflect.deleteProperty(this.$route.query, 'flag')
-      this.isUpdateAccount = false
+      Reflect.deleteProperty(this.$route.query, 'flag')
       this.$refs.ListTable.reloadTable()
     },
     async getAssetDetail() {

src/components/Apps/AccountListTable/const.js

@@ -7,23 +7,11 @@ export const connectivityMeta = {
     faChoices: {
       '-': '',
       ok: 'fa-check-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'
+      err: 'fa-times-circle'
     },
     classChoices: {
       ok: 'text-primary',
-      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'
+      err: 'text-danger'
     },
     getText({ cellValue }) {
       if (cellValue?.value === '-' || cellValue?.value === 'unknown') {
@@ -36,191 +24,150 @@ 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 accountOtherActions = (vm) => [
+  {
+    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: vm.$hasPerm('accounts.change_account') && !vm.$store.getters.currentOrgIsRoot,
+    callback: ({ row }) => {
+      const data = {
+        ...vm.asset,
+        ...row.asset
+      }
+      vm.account = row
+      vm.iAsset = data
+      vm.showAddDialog = false
+      vm.accountCreateUpdateTitle = vm.$t('UpdateAccount')
+      setTimeout(() => {
+        vm.showAddDialog = true
+      })
+    }
+  },
+  {
+    name: 'UpdateSecret',
+    title: vm.$t('EditSecret'),
+    can: vm.$hasPerm('accounts.change_account') && !vm.$store.getters.currentOrgIsRoot,
+    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'),
+    can: vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot,
+    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: vm.$hasPerm('accounts.change_account'),
+    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,
+    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',
+    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) => [
   {
@@ -264,11 +211,11 @@ export const accountQuickFilters = (vm) => [
       {
         label: vm.$t('NoLoginLongTime'),
         filter: {
-          long_time_no_login: 'true'
+          risk: 'long_time_no_login'
         }
       },
       {
-        label: vm.$t('AddAccount'),
+        label: vm.$t('UnmanagedAccount'),
         filter: {
           risk: 'new_found'
         }
@@ -290,6 +237,12 @@ export const accountQuickFilters = (vm) => [
         filter: {
           long_time_no_change_secret: 'true'
         }
+      },
+      {
+        label: vm.$t('LongTimeNoVerify'),
+        filter: {
+          long_time_no_verify: 'true'
+        }
       }
     ]
   },

src/components/Apps/AssetRelationCard/index.vue

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

src/components/Apps/AssetSelect/dialog.vue

@@ -82,7 +82,7 @@ export default {
           },
           {
             prop: 'address',
-            label: this.$t('Address'),
+            label: this.$t('IpDomain'),
             sortable: 'custom'
           },
           {

src/components/Apps/AssetSelect/index.vue

@@ -56,10 +56,6 @@ export default {
     treeSetting: {
       type: Object,
       default: () => ({})
-    },
-    disabled: {
-      type: [Boolean, Function],
-      default: false
     }
   },
   data() {
@@ -75,7 +71,6 @@ export default {
       dialogVisible: false,
       initialValue: _.cloneDeep(iValue),
       select2Config: {
-        disabled: this.disabled,
         value: iValue,
         multiple: true,
         clearable: true,

src/components/Apps/AssetTreeTable/index.vue

@@ -114,11 +114,6 @@ export default {
               treeUrl: `${this.typeUrl}?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
               callback: {
                 onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
-              },
-              edit: {
-                drag: {
-                  isMove: false
-                }
               }
             }
           }

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

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

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

@@ -33,7 +33,7 @@
                 <!-- eslint-disable-next-line -->
                 <div class="divider"></div>
                 <p>
-                  <MessageText :message="item.reasoning" @insert-code="handleInsertCode" />
+                  <MessageText :message="item.reasoning" />
                 </p>
               </div>
 
@@ -41,7 +41,8 @@
                 <span v-if="isServerError" class="error">
                   {{ isServerError }}
                 </span>
-                <MessageText :message="item.result" :is-terminal="isTerminal" @insert-code="handleInsertCode" /></div>
+                <MessageText :message="item.result" />
+              </div>
             </div>
           </div>
           <div class="action">
@@ -92,10 +93,6 @@ export default {
       type: Object,
       default: () => {
       }
-    },
-    isTerminal: {
-      type: Boolean,
-      default: false
     }
   },
   data() {
@@ -145,9 +142,6 @@ export default {
       if (value === 'copy') {
         copy(this.item.result.content)
       }
-    },
-    handleInsertCode(code) {
-      this.$emit('insert-code', code)
     }
   }
 }

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

@@ -25,10 +25,6 @@ export default {
       type: Object,
       default: () => {
       }
-    },
-    isTerminal: {
-      type: Boolean,
-      default: false
     }
   },
   data() {
@@ -49,10 +45,10 @@ export default {
     this.init()
   },
   updated() {
-    this.addEvents()
+    this.addCopyEvents()
   },
   destroyed() {
-    this.removeEvents()
+    this.removeCopyEvents()
   },
   methods: {
     init() {
@@ -73,64 +69,26 @@ export default {
       this.markdown.use(mdKatex, { blockClass: 'katexmath-block rounded-md', errorColor: ' #cc0000' })
     },
     highlightBlock(str, lang) {
-      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>`
+      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>`
     },
-    addEvents() {
-      this.addBtnClickEvents('.code-block-header__copy', this.handlerClickCopy)
-      this.addBtnClickEvents('.code-block-header__insert', this.handlerClickInsert)
-    },
-
-    handlerClickCopy(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
-          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', () => {
+    addCopyEvents() {
+      const copyBtn = document.querySelectorAll('.code-block-header__copy')
+      copyBtn.forEach((btn) => {
+        btn.addEventListener('click', () => {
+          const code = btn.parentElement?.nextElementSibling?.textContent
+          if (code) {
+            copy(code)
+          }
         })
       })
     },
-    removeEvents() {
+    removeCopyEvents() {
       if (this.$refs.textRef) {
-        this.removeBtnClickEvent('.code-block-header__copy')
-        this.addBtnClickEvents('.code-block-header__insert')
+        const copyBtn = this.$refs.textRef.querySelectorAll('.code-block-header__copy')
+        copyBtn.forEach((btn) => {
+          btn.removeEventListener('click', () => {
+          })
+        })
       }
     }
   }
@@ -140,7 +98,6 @@ export default {
 <style lang="scss" scoped>
 .markdown-body {
   font-size: 13px;
-  max-width: 300px;;
 
   &::v-deep p {
     margin-bottom: 0 !important;
@@ -158,46 +115,26 @@ export default {
 
   &::v-deep .code-block-wrapper {
     background: #1F2329;
-    padding: 0;
+    padding: 2px 6px;
     margin: 5px 0;
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
 
     .code-block-body {
-      padding: 5px 10px;
+      padding: 5px 10px 0;
     }
+  ;
 
     .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__actions {
-        display: flex;
-        gap: 8px;
+      .code-block-header__copy {
+        float: right;
+        cursor: pointer;
 
-        .code-block-header__copy {
-          cursor: pointer;
-
-          &:hover {
-            color: #6e747b;
-          }
-        }
-
-        .code-block-header__insert {
-          cursor: pointer;
-
-          &:hover {
-            color: #6e747b;
-          }
+        &:hover {
+          color: #6e747b;
         }
       }
     }
@@ -241,7 +178,6 @@ 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" :is-terminal="isTerminal" @insert-code="insertCode" />
+      <ChatMessage v-for="(item, index) in activeChat.chats" :key="index" :item="item" />
     </div>
     <div class="input-box">
       <el-button
@@ -28,7 +28,7 @@
         size="small"
         @click="onStopHandle"
       >{{ $tc('Stop') }}</el-button>
-      <ChatInput ref="chatInput" :expanded="expanded" :has-prompt="!isTerminal" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
+      <ChatInput ref="chatInput" :expanded="expanded" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
     </div>
   </div>
 </template>
@@ -68,10 +68,7 @@ export default {
       prompt: '',
       conversationId: '',
       showIntroduction: false,
-      introduction: [],
-      terminalContext: null,
-      isTerminal: false,
-      sessionChat: {}
+      introduction: []
     }
   },
   computed: {
@@ -103,9 +100,6 @@ 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'),
@@ -156,32 +150,6 @@ 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 || {}
@@ -236,15 +204,6 @@ 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,9 +47,7 @@ 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,
@@ -78,15 +76,12 @@ export default {
       robotUrl: require('@/assets/img/robot-assistant.png'),
       height: '400px',
       expanded: false,
-      clientOffset: {},
-      currentTerminalContent: {}
+      clientOffset: {}
     }
   },
   watch: {
   },
   mounted() {
-    const expanded = aiPannelLocalStorage.get('expanded')
-    this.updateExpandedState(expanded)
     this.handlePostMessage()
   },
   methods: {
@@ -94,17 +89,6 @@ 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
         }
       })
     },
@@ -112,11 +96,6 @@ 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() {
@@ -128,20 +107,12 @@ export default {
       this.$refs.drawer.show = false
     },
     expandFull() {
-      this.updateExpandedState(true)
-      this.save_pannel_settings()
+      this.height = '100%'
+      this.expanded = true
     },
     compress() {
-      this.updateExpandedState(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'
+      this.height = '400px'
+      this.expanded = false
     },
     onNewChat() {
       this.active = 'chat'

src/components/Apps/GrantedAssets/index.vue

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

src/components/Apps/LeakPasswords/LeakPasswordList.vue

@@ -1,59 +0,0 @@
-<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

@@ -1,41 +0,0 @@
-<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

@@ -1,76 +0,0 @@
-<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

@@ -7,7 +7,6 @@
 <script>
 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 {
@@ -42,10 +41,15 @@ export default {
           columnsMeta: {
             name: {
               label: this.$t('Asset'),
-              formatter: DetailFormatter,
-              formatterArgs: {
-                getRoute: ({ row }) => {
-                  return { name: 'AssetDetail', params: { id: row.id }}
+              formatter: (row) => {
+                const to = {
+                  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>
                 }
               }
             },
@@ -64,3 +68,7 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+
+</style>

src/components/Apps/ManyJsonTabs/UserJsonTab.vue

@@ -8,7 +8,6 @@
 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',
@@ -45,13 +44,15 @@ export default {
           columnsMeta: {
             name: {
               label: this.$t('Name'),
-              formatter: DetailFormatter,
-              formatterArgs: {
-                getRoute: ({ row }) => {
-                  return {
-                    name: 'UserDetail',
-                    params: { id: row.id }
-                  }
+              formatter: (row) => {
+                const to = {
+                  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>
                 }
               }
             },
@@ -89,3 +90,7 @@ export default {
   }
 }
 </script>
+
+<style scoped>
+
+</style>

src/components/Apps/ResourceActivity/index.vue

@@ -28,7 +28,7 @@
 </template>
 
 <script>
-import IBox from '@/components/Common/IBox/index.vue'
+import IBox from '@/components/IBox/index.vue'
 import DiffDetail from '@/components/Dialog/DiffDetail.vue'
 import { openTaskPage } from '@/utils/jms'
 import { toSafeLocalDateStr } from '@/utils/time'

src/components/Apps/UserConfirmDialog/index.vue

@@ -49,47 +49,41 @@
           </el-select>
         </el-col>
       </el-row>
-      <el-row v-if="!noCodeMFA.includes(subTypeSelected)" :gutter="24" style="margin: 0 auto;">
-        <el-col :md="24" :sm="24" style="display: flex; align-items: center; ">
+      <el-row :gutter="24" style="margin: 0 auto;">
+        <el-col :md="24" :sm="24" style="display: flex; align-items: center; margin-bottom: 20px;">
           <el-input
+            v-if="subTypeSelected !== 'face'"
             v-model="secretValue"
             :placeholder="inputPlaceholder"
             :show-password="showPassword"
             @keyup.enter.native="handleConfirm"
           />
-          <span v-if="subTypeSelected === 'sms' || subTypeSelected === 'email'" style="margin: -1px 0 0 20px;">
+
+          <iframe
+            v-if="isFaceCaptureVisible && subTypeSelected ==='face' && faceCaptureUrl"
+            :src="faceCaptureUrl"
+            allow="camera"
+            sandbox="allow-scripts allow-same-origin"
+            style="width: 100%; height: 800px;border: none;"
+          />
+
+          <span v-if="subTypeSelected === 'sms'" style="margin: -1px 0 0 20px;">
             <el-button
               :disabled="smsBtnDisabled"
               size="mini"
               style="line-height: 14px; float: right;"
               type="primary"
-              @click="sendCode"
+              @click="sendSMSCode"
             >
               {{ smsBtnText }}
             </el-button>
           </span>
         </el-col>
       </el-row>
-      <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-row :gutter="24" style="margin: 10px auto;">
         <el-col :md="24" :sm="24">
           <el-button
-            v-if="!noCodeMFA.includes(subTypeSelected)"
+            v-if="subTypeSelected!=='face'"
             class="confirm-btn"
             size="mini"
             type="primary"
@@ -98,8 +92,7 @@
             {{ this.$t('Confirm') }}
           </el-button>
           <el-button
-            v-if="subTypeSelected === 'face'"
-            v-show="!isFaceCaptureVisible"
+            v-if="subTypeSelected==='face'&&!isFaceCaptureVisible"
             class="confirm-btn"
             size="mini"
             type="primary"
@@ -107,16 +100,6 @@
           >
             {{ 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>
@@ -158,11 +141,7 @@ export default {
       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'
+      faceCaptureUrl: null
     }
   },
   computed: {
@@ -225,8 +204,8 @@ export default {
     logout() {
       window.location.href = `${process.env.VUE_APP_LOGOUT_PATH}?next=${this.$route.fullPath}`
     },
-    sendCode() {
-      this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: this.subTypeSelected }).then(res => {
+    sendSMSCode() {
+      this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: 'sms' }).then(res => {
         this.$message.success(this.$tc('VerificationCodeSent'))
         let time = 60
         this.smsBtnDisabled = true
@@ -245,26 +224,6 @@ 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 => {
@@ -288,13 +247,6 @@ export default {
     handleFaceCapture() {
       this.startFaceCapture()
     },
-    onSuccess() {
-      this.secretValue = ''
-      this.visible = false
-      this.$nextTick(() => {
-        this.callback()
-      })
-    },
     handleConfirm() {
       if (this.confirmTypeRequired === 'relogin') {
         return this.logout()
@@ -310,7 +262,11 @@ export default {
       }
 
       this.$axios.post(`/api/v1/authentication/confirm/`, data).then(() => {
-        this.onSuccess()
+        this.secretValue = ''
+        this.visible = false
+        this.$nextTick(() => {
+          this.callback()
+        })
       }).catch((err) => {
         this.$message.error(err.message || this.$tc('ConfirmFailed'))
         this.faceCaptureUrl = null

src/components/Apps/VariableCreateUpdateForm/index.vue

@@ -39,9 +39,6 @@ export default {
         ['', ['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) => {

src/components/Cards/DetailCard/auto.vue

@@ -14,7 +14,7 @@
 import DetailCard from './index.vue'
 import { copy } from '@/utils/common'
 import { toSafeLocalDateStr } from '@/utils/time'
-import IBox from '@/components/Common/IBox/index.vue'
+import IBox from '@/components/IBox/index.vue'
 import LabelsDetailFormatter from '../Formatters/LabelsDetailFormatter.vue'
 
 export default {
@@ -129,18 +129,8 @@ 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')) {

src/components/Cards/DetailCard/index.vue

@@ -19,7 +19,7 @@
 </template>
 
 <script>
-import IBox from '@/components/Common/IBox/index.vue'
+import IBox from '../../IBox/index.vue'
 import ItemValue from './ItemValue.vue'
 
 export default {

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/Common/IBox/index.vue'
+import IBox from '@/components/IBox/index.vue'
 import { mapGetters } from 'vuex'
 
 export default {

src/components/Cards/SummaryCard/index.vue

@@ -1,19 +1,14 @@
 <template>
   <div>
     <div class="summary-header">
-      <el-tooltip :content="title" :open-delay="500" placement="top">
+      <el-tooltip :content="title" placement="top" :open-delay="500">
         <span class="title">{{ title }}</span>
       </el-tooltip>
     </div>
     <slot>
       <h3 class="no-margins ">
-        <span
-          :class="{ 'can-direct': canDirect }"
-          class="num"
-          @click="handleClick"
-        >
-          <span v-if="count === null"> - </span>
-          <span v-else>{{ count }}</span>
+        <span v-async="iCount" class="num" @click="handleClick">
+          -
         </span>
       </h3>
     </slot>
@@ -21,6 +16,7 @@
 </template>
 
 <script>
+
 export default {
   name: 'SummaryCard',
   props: {
@@ -28,18 +24,18 @@ export default {
       type: String,
       default: ''
     },
+    body: {
+      type: Object,
+      default: () => ({})
+    },
     count: {
       type: [Number, String, Promise],
-      default: null
+      default: 0
     },
     route: {
       type: [String, Object],
       default: ''
     },
-    canDirect: {
-      type: Boolean,
-      default: false
-    },
     callback: {
       type: Function,
       default: () => {
@@ -53,13 +49,25 @@ export default {
   data() {
     return {}
   },
+  computed: {
+    iCount() {
+      const count = this.body.count || this.count
+      return count
+    },
+    iRoute() {
+      return this.body.route || this.route
+    },
+    iDisabled() {
+      return this.body.disabled === undefined ? this.disabled : this.body.disabled
+    }
+  },
   methods: {
     handleClick() {
-      if (this.disabled) {
+      if (this.iDisabled) {
         return
       }
-      if (this.route) {
-        this.$router.push(this.route)
+      if (this.iRoute) {
+        this.$router.push(this.iRoute)
         return
       }
       this.callback.bind(this)()
@@ -97,7 +105,7 @@ export default {
     color: var(--color-text-primary);
     cursor: pointer;
 
-    &.can-direct:hover {
+    &:hover {
       color: var(--color-primary);
     }
   }

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 :title="item.title" v-bind="item.body" />
+          <SummaryCard :body="item.body" :title="item.title" />
         </el-col>
       </el-row>
     </div>

src/components/Dashboard/SummaryCountCard.vue

@@ -7,9 +7,9 @@
       <SummaryCard
         v-for="item of items"
         :key="item.title"
+        :body="item.body"
         :title="item.title"
         class="summary-card"
-        v-bind="item.body"
       />
     </div>
   </div>

src/components/DataActions/index.vue

@@ -15,7 +15,7 @@
         @click="handleClick(action)"
         @command="handleDropdownCallback"
       >
-        <span v-if="action.split" :style="{ cursor: action.disabled ? 'not-allowed' : 'pointer' }">
+        <span v-if="action.split">
           {{ action.title }}
         </span>
         <el-button

src/components/Dialog/ProcessingDialog.vue

@@ -4,7 +4,7 @@
     :visible="iVisible"
     class="processing-dialog"
     height="300"
-    :title="$tc('Processing')"
+    title="Processing"
     width="300"
     @confirm="iVisible=false"
   >

src/components/Dialog/index.vue

@@ -2,7 +2,6 @@
   <transition name="dialog-fade">
     <el-dialog
       :append-to-body="true"
-      :class="{ shadow: shadow }"
       :modal-append-to-body="true"
       :title="title"
       :top="top"
@@ -47,7 +46,7 @@ export default {
     },
     width: {
       type: String,
-      default: '800px'
+      default: '60%'
     },
     showConfirm: {
       type: Boolean,
@@ -80,10 +79,6 @@ export default {
     maxWidth: {
       type: String,
       default: '1200px'
-    },
-    shadow: {
-      type: Boolean,
-      default: true
     }
   },
   data() {
@@ -106,14 +101,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.dialog.shadow ::v-deep .el-dialog {
-  box-shadow: 1px 2px 12px 0 rgba(0, 0, 0, 0.6);
-}
-
 .dialog ::v-deep .el-dialog {
   border-radius: 0.3em;
   max-width: min(100vw, 1500px);
 
+  //.el-form, .form-buttons {
+  //  margin-left: 20px;
+  //}
+
   .form-group-header {
     margin-left: 20px;
   }
@@ -137,7 +132,7 @@ export default {
 
   &__body {
     padding: 20px 30px;
-    font-size: 13px;
+      font-size: 13px;
 
     &:has(.el-table) {
       background: #f3f3f4;

src/components/Drawer/index.vue

@@ -30,8 +30,6 @@
 </template>
 
 <script>
-import { getDrawerWidth } from '@/utils/common'
-
 export default {
   props: {
     title: {
@@ -40,9 +38,7 @@ export default {
     },
     size: {
       type: String,
-      default: () => {
-        return getDrawerWidth()
-      }
+      default: '768px'
     },
     component: {
       type: [String, Function, Object],
@@ -107,16 +103,6 @@ export default {
   }
 }
 
-@media (max-width: 992px) {
-  .drawer ::v-deep {
-    .el-form-item {
-      display: flex;
-      flex-direction: column;
-      gap: 0.3rem;
-    }
-  }
-}
-
 .drawer {
   ::v-deep {
     min-width: 565px;
@@ -147,7 +133,6 @@ export default {
 
       &.detail-card {
         padding-right: 0;
-        margin-top: unset;
       }
 
       // Detail 中
@@ -283,7 +268,6 @@ export default {
     }
 
     .drawer__content, .tab-page-content {
-      height: 100%;
       background: #f3f3f3;
     }
 

src/components/Form/AutoDataForm/index.vue

@@ -1,27 +1,25 @@
 <template>
-  <div>
-    <DataForm
-      v-if="!loading"
-      ref="dataForm"
-      :fields="totalFields"
-      :form="iForm"
-      v-bind="$attrs"
-      v-on="$listeners"
+  <DataForm
+    v-if="!loading"
+    ref="dataForm"
+    :fields="totalFields"
+    :form="iForm"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <template
+      v-for="(group, i) in groups"
+      :slot="'id:'+group.name"
     >
-      <template
-        v-for="(group, i) in groups"
-        :slot="'id:'+group.name"
-      >
-        <FormGroupHeader
-          v-if="!groupHidden(group, i)"
-          :key="'group-' + group.name"
-          :group="group"
-          :index="i"
-          :line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
-        />
-      </template>
-    </DataForm>
-  </div>
+      <FormGroupHeader
+        v-if="!groupHidden(group, i)"
+        :key="'group-' + group.name"
+        :group="group"
+        :index="i"
+        :line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
+      />
+    </template>
+  </DataForm>
 </template>
 
 <script>
@@ -89,7 +87,6 @@ export default {
     }
   },
   mounted() {
-    // this.$log.debug('>>> Method: ', this.method)
     this.optionUrlMetaAndGenerateColumns()
   },
   methods: {
@@ -140,11 +137,14 @@ export default {
       this._cleanFormValue(this.iForm, this.remoteMeta)
     },
     setFieldError(name, error) {
-      error = error.replace(/[。.]+$/, '')
       const field = this.totalFields.find((v) => v.prop === name)
       if (!field) {
         return
       }
+      if (field.attrs.error === error) {
+        error += '.'
+      }
+
       if (typeof error === 'string') {
         field.el.errors = error
         field.attrs.error = error

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

@@ -9,7 +9,6 @@
   >
     <template v-if="data.label" #label>
       <span :title="data.label">
-        <span v-if="data.required">* </span>
         {{ data.label }}
         <el-tooltip
           v-if="data.helpTip"

src/components/Form/FormFields/AttrInput.vue

@@ -27,9 +27,7 @@ export default {
     },
     beforeSubmit: {
       type: Function,
-      default: (val) => {
-        return true
-      }
+      default: (val) => { return true }
     }
   },
   data() {
@@ -52,16 +50,14 @@ export default {
 ::v-deep .el-select {
   width: 100%;
 }
-
 ::v-deep .el-form-item__content {
   width: 100% !important;
 }
-
 ::v-deep .form-buttons {
   margin: 0 !important;
 }
-
 .attr-input {
+  margin-top: -10px;
 }
 </style>
 

src/components/Form/FormFields/BasicTree.vue

@@ -47,9 +47,6 @@ export default {
   },
   computed: {
     iValue() {
-      if (!this.value) {
-        return []
-      }
       return this.value.map(item => {
         if (item.value) {
           return item.value

src/components/Form/FormFields/CronTab/Crontab.vue

@@ -361,10 +361,9 @@ export default {
     },
     // 填充表达式
     submitFill() {
-      const minMinutes = 60
       const crontabDiffMin = this.crontabDiff / 1000 / 60
-      if (crontabDiffMin > 0 && crontabDiffMin < minMinutes) {
-        const msg = this.$t('CrontabDiffError', { minutes: minMinutes })
+      if (crontabDiffMin > 0 && crontabDiffMin < 10) {
+        const msg = this.$tc('CrontabDiffError')
         this.$message.error(msg)
         return
       }

src/components/Form/FormFields/CronTab/components/Crontab-Hour.vue

@@ -10,18 +10,15 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="2">
         {{ this.$t('From') }}
-        <el-input-number v-model="cycle01" :max="23" :min="0" size="mini" />
-        -
-        <el-input-number v-model="cycle02" :max="23" :min="0" size="mini" />
-        {{ this.$t('Hour') }}
+        <el-input-number v-model="cycle01" :max="60" :min="0" size="mini" /> -
+        <el-input-number v-model="cycle02" :max="60" :min="0" size="mini" /> {{ this.$t('Hour') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
         {{ this.$t('Every') }}
-        <el-input-number v-model="average02" :max="23" :min="1" size="mini" />
-        {{ this.$t('Hour') }} {{ this.$t('ExecuteOnce') }}
+        <el-input-number v-model="average02" :max="60" :min="1" size="mini" /> {{ this.$t('Hour') }} {{ this.$t('ExecuteOnce') }}
       </el-radio>
     </el-form-item>
 
@@ -35,7 +32,7 @@
           multiple
           style="width:100%"
         >
-          <el-option v-for="item in 24" :key="item" :value="item-1">{{ item - 1 }}</el-option>
+          <el-option v-for="item in 24" :key="item" :value="item-1">{{ item-1 }}</el-option>
         </el-select>
       </el-radio>
     </el-form-item>

src/components/Form/FormFields/CronTab/components/Crontab-Min.vue

@@ -9,7 +9,7 @@
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
         {{ this.$t('From') }}
-        <el-input-number v-model="average02" :max="59" :min="1" size="mini" />
+        <el-input-number v-model="average02" :max="60" :min="1" size="mini" />
         {{ this.$t('Min') }} {{ this.$t('ExecuteOnce') }}
       </el-radio>
     </el-form-item>

src/components/Form/FormFields/CronTab/index.vue

@@ -39,13 +39,6 @@ export default {
       showCron: false
     }
   },
-  watch: {
-    value: {
-      handler(val) {
-        this.crontabFill(val)
-      }
-    }
-  },
   methods: {
     crontabFill(value) {
       // 确定后回传的值

src/components/Form/FormFields/JSONManyToManySelect/AttrMatchResultDialog.vue

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

src/components/Form/FormFields/PhoneInput.vue

@@ -5,6 +5,7 @@
         slot="prepend"
         :placeholder="$tc('Select')"
         :value="rawValue.code"
+        style="width: 105px;"
         @change="onChange"
       >
         <el-option
@@ -68,11 +69,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
-.el-select {
-  width: 85px;
-}
-
+<style scoped>
 .country-name {
   display: inline-block;
   width: 150px;

src/components/Form/FormFields/ProtocolSelector/ProtocolSettingDialog.vue

@@ -3,7 +3,6 @@
     v-if="$attrs.visible"
     :close-on-click-modal="false"
     :destroy-on-close="true"
-    :modal="false"
     :show-cancel="false"
     :show-confirm="false"
     :title="$tc('PlatformProtocolConfig') + '：' + protocol.name"
@@ -53,7 +52,6 @@ export default {
     const vm = this
     const platform = this.$route.query.platform
     return {
-      platform: '',
       loading: true,
       form: this.protocol,
       platformDetail: platform ? '#/console/assets/platforms/' + platform : '',
@@ -98,29 +96,11 @@ export default {
       }
     }
   },
-  async mounted() {
-    try {
-      const drawActionMeta = await this.$store.dispatch('common/getDrawerActionMeta')
-      const platform = drawActionMeta.row.platform.id
-      const name = drawActionMeta.row.platform.name
-
-      if (platform) {
-        this.platformDetail = `/ui/#/settings/platforms?id=${platform}&name=${name}`
-      } else {
-        this.platformDetail = ''
-      }
-    } catch (e) {
-      throw new Error(e)
-    }
-  },
   methods: {
     onSubmit(form) {
       this.protocol = Object.assign(this.protocol, form)
       this.$emit('update:visible', false)
       this.$emit('confirm', this.protocol)
-    },
-    openInNewTab() {
-      window.open(this.platformDetail, '_blank')
     }
   }
 }

src/components/Form/FormFields/TagInput.vue

@@ -78,18 +78,16 @@ export default {
   },
   data() {
     return {
+      filterTags: this.value,
       focus: false,
       filterValue: '',
-      filterTags: this.value,
-      isCheckShowPassword: this.replaceShowPassword
+      isCheckShowPassword: this.replaceShowPassword,
+      component: this.autocomplete ? 'el-autocomplete' : 'el-input'
     }
   },
   computed: {
     iPlaceholder() {
       return `${this.placeholder} (${this.$t('EnterToContinue')})`
-    },
-    component() {
-      return this.autocomplete !== null ? 'el-autocomplete' : 'el-input'
     }
   },
   watch: {
@@ -100,7 +98,7 @@ export default {
   methods: {
     handleTagClose(tag) {
       this.filterTags.splice(this.filterTags.indexOf(tag), 1)
-      this.handleConfirm()
+      this.$emit('change', this.filterTags)
     },
     handleSelect(item) {
       this.filterValue = item.value
@@ -115,9 +113,8 @@ export default {
       if (!this.filterTags.includes(this.filterValue)) {
         this.filterTags.push(this.filterValue)
         this.filterValue = ''
+        this.$emit('change', this.filterTags)
       }
-      this.$emit('change', this.filterTags)
-      this.$emit('input', this.filterTags)
       this.$refs.SearchInput.focus()
     },
     handleTagClick(v, k) {
@@ -154,7 +151,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  //padding: 0 6px;
+  padding: 0 6px;
   border: 1px solid #dcdee2;
   border-radius: 1px;
   background-color: #fff;
@@ -167,7 +164,6 @@ export default {
   & ::v-deep .el-tag {
     margin-bottom: 1px;
     font-family: sans-serif !important;
-    margin-left: 5px;
   }
 
   & ::v-deep .el-autocomplete {
@@ -181,7 +177,7 @@ export default {
   & ::v-deep .el-input__inner {
     max-width: 100%;
     border: none;
-    padding-left: 12px;
+    padding-left: 10px;
     height: 28px;
   }
 }
@@ -192,7 +188,7 @@ export default {
 }
 
 .filter-field ::v-deep .el-input__inner {
-  height: 27px !important;
+  height: 28px !important;
 }
 
 .show-password {

src/components/Form/FormFields/UploadField.vue

@@ -10,9 +10,6 @@
     <div>
       <img v-if="preview" :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs" alt="">
     </div>
-    <el-button v-if="fileName" size="mini" type="danger" @click.native.stop="resetUpload">
-      {{ this.$t('Cancel') }}
-    </el-button>
   </div>
 </template>
 
@@ -58,29 +55,21 @@ export default {
     },
     Onchange(e) {
       const upLoadFile = e.target.files[0]
-
       if (upLoadFile === undefined) {
+        this.$emit('input', this.initial)
         return
       }
-
       this.fileName = upLoadFile?.name || ''
       this.$emit('fileChange', upLoadFile)
       this.$emit('input', this.getObjectURL(upLoadFile))
     },
-    resetUpload() {
-      this.fileName = ''
-      this.preview = ''
-      this.$refs.upLoadFile.value = ''
-      this.$emit('input', '')
-      this.$emit('fileChange', null)
-    },
     getObjectURL(file) {
       let url = null
-      if (window.createObjectURL !== undefined) {
+      if (window.createObjectURL !== undefined) { // basic
         url = window.createObjectURL(file)
-      } else if (window.URL !== undefined) {
+      } else if (window.URL !== undefined) { // mozilla(firefox)
         url = window.URL.createObjectURL(file)
-      } else if (window.webkitURL !== undefined) {
+      } else if (window.webkitURL !== undefined) { // webkit or chrome
         url = window.webkitURL.createObjectURL(file)
       }
       return url

src/components/Form/FormFields/WeekCronSelect.vue

@@ -170,19 +170,19 @@ export default {
       const [start, end] = val.split('~')
       const startVal = this.countIndex(start)
       const endVal = this.countIndex(end)
-      for (let i = startVal; i < (endVal === 0 ? 24 : endVal); i++) {
+      for (let i = startVal; i < (endVal === 0 ? 48 : endVal); i++) {
         const curWeek = this.weekTimeData[idNum]
-        const curChild = curWeek.child[i]
-        if (curChild) {
-          curChild.check = true
-        }
+        curWeek.child[i].check = true
       }
     },
     // 计算索引
     countIndex(val) {
       const one = val.substr(0, 2)
-      const index = one.startsWith('0') ? one.substr(1, 2) : one
-      return Number(index)
+      const a1 = one.startsWith('0') ? one.substr(1, 2) : one
+      var reg = RegExp(/30/)
+      const a2 = val.match(reg) ? 1 : 0
+      const curIndex = (a1 * 2) + a2
+      return curIndex
     },
     formatDate(date, fmt) {
       const o = {

src/components/Form/FormGroupHeader/index.vue

@@ -1,12 +1,10 @@
 <template>
   <div ref="formGroup" class="form-group-header">
     <div v-if="line" class="hr-line-dashed" />
-    <div v-if="group['title']">
-      <h3 @click="toggle">{{ group['title'] }} </h3>
-      <span class="compass" @click="toggle">
-        <i :class="iconClass" />
-      </span>
-    </div>
+    <h3 @click="toggle">{{ group['title'] }} </h3>
+    <span class="compass" @click="toggle">
+      <i :class="iconClass" />
+    </span>
     <div v-if="!isVisible" class="ellipsis" @click="toggle">
       <i class="fa fa-angle-double-down" />
     </div>

src/components/IBox/HeadingIBox.vue

@@ -2,8 +2,7 @@
   <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>
@@ -12,8 +11,7 @@
 </template>
 
 <script>
-import IBox from './index.vue'
-
+import IBox from './index'
 export default {
   name: 'HeadingIBox',
   components: { IBox },
@@ -27,22 +25,20 @@ export default {
 </script>
 
 <style scoped>
-.ibox-heading {
-  background-color: #f3f6fb;
-  border-bottom: none;
-  margin: -15px -20px 20px -20px;
-  padding: 20px
-}
-
-.ibox-heading h3 {
-  font-weight: 200;
-  font-size: 24px;
-  margin-top: 5px;
-  margin-bottom: 10px;
-  line-height: 1.1;
-}
-
-.ibox .el-card__body {
-  background-color: #f3f6fb;
-}
+  .ibox-heading {
+    background-color: #f3f6fb;
+    border-bottom: none;
+    margin: -15px -20px 20px -20px;
+    padding: 20px
+  }
+  .ibox-heading h3 {
+    font-weight: 200;
+    font-size: 24px;
+    margin-top: 5px;
+    margin-bottom: 10px;
+    line-height: 1.1;
+  }
+  .ibox .el-card__body {
+   background-color: #f3f6fb;
+  }
 </style>

src/components/QuickActions/action.vue

@@ -1,31 +1,33 @@
 <template>
   <tr>
+    <td>{{ getActionTitle(action) }}</td>
     <td>
-      {{ getActionTitle(action) }}
-      <el-tooltip v-if="action.attrs.showTip" :content="action.attrs.tip" :open-delay="500" effect="dark">
-        <i class="fa fa-question-circle-o" />
-      </el-tooltip>
-    </td>
-    <td>
-      <span slot="reference">
-        <component
-          :is="iType"
-          v-model="action.attrs.model"
-          :title="label"
-          v-bind="action.attrs"
-          v-on="callbacks"
-        >
-          {{ label }}
-        </component>
-      </span>
+      <el-popover
+        :content="action.attrs.tip"
+        :disabled="!action.attrs.showTip"
+        placement="left-end"
+        trigger="hover"
+      >
+        <span slot="reference">
+          <component
+            :is="iType"
+            v-model="action.attrs.model"
+            :title="label"
+            v-bind="action.attrs"
+            v-on="callbacks"
+          >
+            {{ label }}
+          </component>
+        </span>
+      </el-popover>
     </td>
   </tr>
 </template>
 
 <script>
-import Switcher from '@/components/Form/FormFields/Switcher.vue'
-import Select2 from '@/components/Form/FormFields/Select2.vue'
-import UpdateSelect from '@/components/Form/FormFields/UpdateSelect.vue'
+import Switcher from '@/components/Form/FormFields/Switcher'
+import Select2 from '@/components/Form/FormFields/Select2'
+import UpdateSelect from '@/components/Form/FormFields/UpdateSelect'
 import { toSentenceCase } from '@/utils/common'
 
 class Action {

src/components/QuickActions/index.vue

@@ -9,8 +9,8 @@
 </template>
 
 <script>
-import IBox from '@/components/Common/IBox/index.vue'
-import ActionItem from './action.vue'
+import IBox from '@/components/IBox'
+import ActionItem from './action'
 
 // 查看 views/users/users/UserDetail/UserInfo.vue 使用样例
 export default {

src/components/Table/AutoDataTable/index.vue

@@ -21,11 +21,21 @@
 </template>
 
 <script type="text/jsx">
-import Sortable from 'sortablejs'
 import DataTable from '@/components/Table/DataTable/index.vue'
-import { newURL, ObjectLocalStorage, replaceAllUUID } from '@/utils/common'
+import {
+  ActionsFormatter,
+  ArrayFormatter,
+  ChoicesFormatter,
+  CopyableFormatter,
+  DateFormatter,
+  DetailFormatter,
+  DisplayFormatter,
+  ObjectRelatedFormatter
+} from '@/components/Table/TableFormatters'
+import i18n from '@/i18n/i18n'
+import { newURL, ObjectLocalStorage, replaceAllUUID, toSentenceCase } from '@/utils/common'
 import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
-import { TableColumnsGenerator } from './utils'
+import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'
 
 export default {
   name: 'AutoDataTable',
@@ -47,9 +57,9 @@ export default {
     return {
       loading: true,
       method: 'get',
-      meta: {},
-      iConfig: {},
       autoConfig: {},
+      iConfig: {},
+      meta: {},
       cleanedColumnsShow: {},
       totalColumns: [],
       popoverColumns: {
@@ -59,8 +69,18 @@ export default {
         defaultCols: []
       },
       isDeactivated: false,
-      tableColumnsStorage: this.getTableColumnsStorage(),
-      sortable: null
+      objTableColumns: new ObjectLocalStorage('tableColumns')
+    }
+  },
+  computed: {
+    dynamicActionWidth() {
+      if (this.$i18n.locale === 'en') {
+        return '120px'
+      }
+      if (this.$i18n.locale === 'pt-br') {
+        return '160px'
+      }
+      return '100px'
     }
   },
   watch: {
@@ -82,9 +102,8 @@ export default {
       }, 200)
     }
   },
-  async created() {
-    await this.optionUrlMetaAndGenCols()
-    this.loading = false
+  created() {
+    this.optionUrlMetaAndGenCols()
   },
   deactivated() {
     this.isDeactivated = true
@@ -93,101 +112,319 @@ export default {
     this.isDeactivated = false
   },
   methods: {
-    setColumnDraggable() {
-      const el = this.$el.querySelector('.el-table__header-wrapper thead tr')
-      if (!el) {
-        setTimeout(() => this.setColumnDraggable(), 500)
-        return
-      }
-      if (this.sortable) {
-        this.sortable.destroy()
-      }
-
-      this.sortable = Sortable.create(el, {
-        animation: 150,
-        onEnd: (evt) => {
-          let { oldIndex, newIndex } = evt
-          if (oldIndex === newIndex) {
-            return
-          }
-          // 检测表格是否有选择列
-          const hasSelectionColumn = this.$el.querySelector('.el-table-column--selection') !== null
-          if (hasSelectionColumn) {
-            // 如果有选择列，调整索引
-            if (oldIndex > 0) oldIndex -= 1
-            if (newIndex > 0) newIndex -= 1
-          }
-
-          let columnNames = [...this.cleanedColumnsShow.show]
-          if (columnNames.includes('actions')) {
-            columnNames = columnNames.filter(item => item !== 'actions')
-            columnNames.push('actions')
-          }
-          // 边界
-          if (oldIndex >= 0 && oldIndex < columnNames.length &&
-            newIndex >= 0 && newIndex < columnNames.length) {
-            const movedItem = columnNames.splice(oldIndex, 1)[0]
-            columnNames.splice(newIndex, 0, movedItem)
-
-            this.$log.debug('Column moved: ', movedItem, oldIndex, ' => ', newIndex)
-            // 保存更新的列顺序
-            this.tableColumnsStorage.set(columnNames)
-
-            // 更新内部状态
-            this.cleanedColumnsShow.show = columnNames
-            this.popoverColumns.currentCols = columnNames
-
-            // 重新应用列顺序
-            this.filterShowColumns()
-
-            this.loading = true
-            setTimeout(() => {
-              this.loading = false
-              // 在DOM完全更新后重新初始化拖拽
-              this.$nextTick(() => {
-                setTimeout(() => this.setColumnDraggable(), 200)
-              })
-            }, 300)
-          }
-        }
-      })
-    },
-    generateTotalColumns() {
-      const generator = new TableColumnsGenerator(this.config, this.meta, this)
-      this.totalColumns = generator.generateColumns()
-      this.config.columns = this.totalColumns
-      this.iConfig = _.cloneDeep(this.config)
-    },
     async optionUrlMetaAndGenCols() {
       if (this.config.url === '') {
         return
       }
       const url = (this.config.url.indexOf('?') === -1)
-        ? `${this.config.url}?display=1`
-        : `${this.config.url}&display=1`
-
-      /**
-       * 原有代码无法正确的同步 storage 的原因是 currentOrder 总是在 totalColumns 之前进行的
-       * 这导致在首次加载时，currentOrder总是为空数组，因为此时cleanedColumnsShow.show还未初始化
-       */
-      try {
-        const data = await this.$store.dispatch('common/getUrlMeta', { url: url })
+        ? `${this.config.url}?draw=1&display=1`
+        : `${this.config.url}&draw=1&display=1`
+      this.$store.dispatch('common/getUrlMeta', { url: url }).then(data => {
         const method = this.method.toUpperCase()
         this.meta = data.actions && data.actions[method] ? data.actions[method] : {}
-
         this.generateTotalColumns()
-        this.cleanColumnsShow()
+      }).then(() => {
+        //  根据当前列重新生成最终渲染表格
         this.filterShowColumns()
+      }).then(() => {
+        // 生成给子组件使用的TotalColList
         this.generatePopoverColumns()
-        this.setColumnDraggable()
-      } catch (error) {
+      }).catch((error) => {
         this.$log.error('Error occur: ', error)
-      }
+      }).finally(() => {
+        this.loading = false
+      })
     },
-    getTableColumnsStorage() {
-      let tableName = this.config.name || this.$route.name + '_' + newURL(this.config.url).pathname
-      tableName = replaceAllUUID(tableName)
-      return new ObjectLocalStorage('tableColumns', tableName)
+    generateColumnByName(name, col) {
+      switch (name) {
+        case 'id':
+          col.width = '290px'
+          col.formatter = CopyableFormatter
+          col.iconPosition = 'left'
+          break
+        case 'name':
+          col.formatter = DetailFormatter
+          col.sortable = 'custom'
+          col.showOverflowTooltip = true
+          col.minWidth = '150px'
+          break
+        case 'actions':
+          col = {
+            prop: 'actions',
+            label: i18n.t('Actions'),
+            align: 'center',
+            width: this.dynamicActionWidth,
+            formatter: ActionsFormatter,
+            fixed: 'right',
+            formatterArgs: {}
+          }
+          break
+        case 'is_valid':
+          col.label = i18n.t('Valid')
+          col.formatter = ChoicesFormatter
+          col.formatterArgs = {
+            textChoices: {
+              true: i18n.t('Yes'),
+              false: i18n.t('No')
+            }
+          }
+          col.width = '80px'
+          break
+        case 'is_active':
+          col.formatter = ChoicesFormatter
+          col.formatterArgs = {
+            textChoices: {
+              true: i18n.t('Active'),
+              false: i18n.t('Inactive')
+            }
+          }
+          col.width = '100px'
+          break
+        case 'datetime':
+        case 'date_start':
+          col.formatter = DateFormatter
+          break
+        case 'labels':
+          col.formatter = LabelsFormatter
+          col.width = '200px'
+          break
+        case 'comment':
+          col.showOverflowTooltip = true
+      }
+      return col
+    },
+    generateColumnByType(type, col, meta) {
+      switch (type) {
+        case 'choice':
+          col.sortable = 'custom'
+          col.formatter = DisplayFormatter
+          break
+        case 'labeled_choice':
+          col.sortable = 'custom'
+          col.formatter = ChoicesFormatter
+          break
+        case 'boolean':
+          col.formatter = ChoicesFormatter
+          // col.width = '80px'
+          break
+        case 'datetime':
+          col.formatter = DateFormatter
+          col.width = '155px'
+          break
+        case 'object_related_field':
+          col.formatter = ObjectRelatedFormatter
+          break
+        case 'm2m_related_field':
+          col.formatter = ObjectRelatedFormatter
+          break
+        case 'list':
+          col.formatter = ArrayFormatter
+          break
+        case 'json':
+        case 'field':
+          if (meta.child && meta.child.type === 'nested object') {
+            col.formatter = ObjectRelatedFormatter
+          }
+          break
+      }
+      // this.$log.debug('Field: ', type, col.prop, col)
+      return col
+    },
+    addHelpTipIfNeed(col) {
+      const helpTip = col.helpTip
+      if (!helpTip) {
+        return col
+      }
+      col.renderHeader = (h, { column, $index }) => {
+        const binds = {
+          props: {
+            placement: 'bottom',
+            effect: 'dark',
+            openDelay: 500,
+            popperClass: 'help-tips'
+          }
+        }
+
+        return (
+          <span>{column.label}
+            <el-tooltip {...binds}>
+              <div slot='content' v-sanitize={helpTip}/>
+              <i class='fa fa-question-circle-o help-tip-icon' style='padding-left: 2px'/>
+            </el-tooltip>
+          </span>
+        )
+      }
+      return col
+    },
+    addFilterIfNeed(col) {
+      if (col.prop) {
+        const column = this.meta[col.prop] || {}
+        if (!column.filter) {
+          return col
+        }
+        if (column.type === 'boolean') {
+          col.filters = [
+            { text: i18n.t('Yes'), value: true },
+            { text: i18n.t('No'), value: false }
+          ]
+          col.sortable = false
+          col['column-key'] = col.prop
+        }
+        if (column.type === 'choice' && column.choices) {
+          col.filters = column.choices.map(item => {
+            if (typeof (item.value) === 'boolean') {
+              if (item.value) {
+                return { text: item['label'], value: 'True' }
+              } else {
+                return { text: item['label'], value: 'False' }
+              }
+            }
+            return { text: item['label'], value: item.value }
+          })
+          col.sortable = false
+          col['column-key'] = col.prop
+        }
+      }
+      return col
+    },
+    addOrderingIfNeed(col) {
+      if (col.prop) {
+        const column = this.meta[col.prop] || {}
+        if (column.order) {
+          col.sortable = 'custom'
+          col['column-key'] = col.prop
+        }
+      }
+      return col
+    },
+    setDefaultFormatterIfNeed(col) {
+      if (!col.formatter) {
+        col.formatter = (row, column, cellValue) => {
+          let value = cellValue
+          let padding = '0'
+          const excludes = [undefined, null, '']
+          if (excludes.indexOf(value) !== -1) {
+            padding = '6px'
+            value = '-'
+          }
+          return <span style={{ marginLeft: padding }}>{value}</span>
+        }
+      }
+      return col
+    },
+    setDefaultWidthIfNeed(col) {
+      const lang = this.$i18n.locale
+      let factor = 10
+      if (lang === 'zh') {
+        factor = 20
+      }
+      let [sortable, filters] = [0, 0]
+      if (col && col?.sortable === 'custom') {
+        sortable = 10
+      }
+      if (col && col?.filters?.length > 0) {
+        filters = 12
+      }
+      if (col && !col.width && col.label && !col.minWidth) {
+        col.minWidth = `${col.label.length * factor + sortable + filters + 30}px`
+      }
+      return col
+    },
+    generateColumn(name) {
+      const colMeta = this.meta[name] || {}
+      const customMeta = this.config.columnsMeta ? this.config.columnsMeta[name] : {}
+      let col = { prop: name, label: colMeta.label, showOverflowTooltip: true }
+
+      col = this.generateColumnByType(colMeta.type, col, colMeta)
+      col = this.generateColumnByName(name, col)
+      col = this.setDefaultFormatterIfNeed(col)
+      col = Object.assign(col, customMeta)
+      col = this.addHelpTipIfNeed(col)
+      col = this.addFilterIfNeed(col)
+      col = this.addOrderingIfNeed(col)
+      col = this.updateLabelIfNeed(col)
+      col = this.setDefaultWidthIfNeed(col)
+      return col
+    },
+    updateLabelIfNeed(col) {
+      if (!col.label) {
+        return col
+      }
+      col.label = col.label
+        .replace(' Amount', '')
+        .replace(' amount', '')
+        .replace('数量', '')
+      if (col.label.startsWith('Is ')) {
+        col.label = col.label.replace('Is ', '')
+      }
+      col.label = toSentenceCase(col.label)
+      return col
+    },
+    generateTotalColumns() {
+      const config = _.cloneDeep(this.config)
+      let columns = []
+      const allColumnNames = Object.entries(this.meta)
+        .filter(([name, meta]) => !meta['write_only'])
+        .map(([name, meta]) => name)
+        .concat(config.columnsExtra || [])
+
+      let configColumns = config.columns || allColumnNames
+      const columnsExclude = config.columnsExclude || []
+      const columnsAdd = config.columnsAdd || []
+      configColumns = configColumns.concat(columnsAdd)
+      configColumns = configColumns.filter(item => !columnsExclude.includes(item))
+
+      // 解决后端 API 返回字段中包含 actions 的问题;
+      const hasColumnActions = configColumns.findIndex(item => item?.prop === 'actions') !== -1
+      if (!hasColumnActions) {
+        configColumns = [...configColumns.filter(i => i !== 'actions'), 'actions']
+      }
+
+      for (let col of configColumns) {
+        if (typeof col === 'object') {
+          columns.push(col)
+        } else if (typeof col === 'string') {
+          col = this.generateColumn(col)
+          columns.push(col)
+        }
+      }
+
+      columns = columns.filter(item => {
+        if (item?.showFullContent) {
+          item.className = 'show-full-content'
+        }
+        let has = item.has
+        if (has === undefined) {
+          has = true
+        } else if (typeof has === 'function') {
+          has = has()
+        }
+        return has
+      })
+
+      columns = this.orderingColumns(columns)
+      // 第一次初始化时记录 totalColumns
+      this.totalColumns = columns
+      config.columns = columns
+      this.iConfig = config
+    },
+    orderingColumns(columns) {
+      const cols = _.cloneDeep(this.config.columns)
+      const defaults = _.get(this.config, 'columnsShow.default')
+      const ordering = (cols || defaults || []).map(item => {
+        let prop = item
+        if (typeof item === 'object') {
+          prop = item.prop
+        }
+        return prop
+      })
+      return _.sortBy(columns, (item) => {
+        if (item.prop === 'actions') {
+          return 1000
+        }
+        const i = ordering.indexOf(item.prop)
+        return i === -1 ? 999 : i
+      })
     },
     // 生成给子组件使用的TotalColList
     cleanColumnsShow() {
@@ -197,12 +434,16 @@ export default {
       if (defaultColumnsNames.length === 0) {
         defaultColumnsNames = totalColumnsNames
       }
+      // Clean it
+      defaultColumnsNames = totalColumnsNames.filter(n => defaultColumnsNames.indexOf(n) > -1)
 
       // 最小列
       const minColumnsNames = _.get(this.iConfig, 'columnsShow.min', ['actions', 'id'])
         .filter(n => totalColumnsNames.includes(n))
 
-      const configShowColumnsNames = this.tableColumnsStorage.get()
+      let tableName = this.config.name || this.$route.name + '_' + newURL(this.config.url).pathname
+      tableName = replaceAllUUID(tableName)
+      const configShowColumnsNames = this.objTableColumns.get(tableName)
       let showColumnsNames = configShowColumnsNames || defaultColumnsNames
       if (showColumnsNames.length === 0) {
         showColumnsNames = totalColumnsNames
@@ -213,6 +454,8 @@ export default {
           showColumnsNames.push(v)
         }
       })
+      // Clean it
+      showColumnsNames = totalColumnsNames.filter(n => showColumnsNames.indexOf(n) > -1)
 
       this.cleanedColumnsShow = {
         default: defaultColumnsNames,
@@ -224,38 +467,9 @@ export default {
     },
     filterShowColumns() {
       this.cleanColumnsShow()
-      const showFieldNames = this.cleanedColumnsShow.show
-      let showFields = this.totalColumns.filter(obj => {
-        return showFieldNames.indexOf(obj.prop) > -1
+      this.iConfig.columns = this.totalColumns.filter(obj => {
+        return this.cleanedColumnsShow.show.indexOf(obj.prop) > -1
       })
-      showFields = this.orderingColumns(showFields)
-      this.iConfig.columns = showFields
-
-      // 确保最新的列配置也应用到config对象上，保持同步
-      this.config.columns = this.iConfig.columns
-
-      this.$nextTick(() => {
-        if (this.$refs.dataTable) {
-          this.$refs.dataTable.getList()
-        }
-      })
-    },
-    orderingColumns(columns) {
-      const cols = _.cloneDeep(this.config.columns)
-      const show = this.cleanedColumnsShow.show
-      const ordering = (show || cols || []).map(item => {
-        let prop = item
-        if (typeof item === 'object') {
-          prop = item.prop
-        }
-        return prop
-      })
-      const sorted = _.sortBy(columns, (item) => {
-        const i = ordering.indexOf(item.prop)
-        item.order = i
-        return i === -1 ? 999 : i
-      })
-      return sorted
     },
     generatePopoverColumns() {
       this.popoverColumns.totalColumnsList = this.totalColumns.filter(obj => {
@@ -275,7 +489,13 @@ export default {
         columns = this.cleanedColumnsShow.default
       }
       this.popoverColumns.currentCols = columns
-      this.tableColumnsStorage.set(columns)
+
+      let tableName = this.config.name || this.$route.name + '_' + newURL(url).pathname
+      // 替换url中的uuid，避免同一个类型接口生成多个key，localStorage中的数据无法共用.
+      tableName = replaceAllUUID(tableName)
+
+      this.objTableColumns.set(tableName, columns)
+
       this.filterShowColumns()
     },
     filterChange(filters) {

src/components/Table/AutoDataTable/utils.js

@@ -1,326 +0,0 @@
-import { toSentenceCase } from '@/utils/common'
-import i18n from '@/i18n/i18n'
-
-import {
-  ActionsFormatter,
-  ArrayFormatter,
-  ChoicesFormatter,
-  CopyableFormatter,
-  DateFormatter,
-  DetailFormatter,
-  DisplayFormatter,
-  ObjectRelatedFormatter
-} from '@/components/Table/TableFormatters'
-import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'
-
-export class TableColumnsGenerator {
-  constructor(config, meta, vm) {
-    this.config = config
-    this.meta = meta
-    this.vm = vm
-  }
-
-  // dynamicActionWidth() {
-  //   console.log(i18n.locale)
-  //   if (i18n.locale === 'zh-hans' || i18n.locale === 'zh-hant') {
-  //     return '100px'
-  //   }
-
-  //   if (i18n.locale === 'ja' || i18n.locale === 'ko') {
-  //     return '120px'
-  //   }
-
-  //   return '160px'
-  // }
-
-  generateColumns() {
-    const config = _.cloneDeep(this.config)
-    let columns = []
-    const allColumnNames = Object.entries(this.meta)
-      .filter(([name, meta]) => !meta['write_only'])
-      .map(([name, meta]) => name)
-      .concat(config.columnsExtra || [])
-
-    let configColumns = config.columns || allColumnNames
-    const columnsExclude = config.columnsExclude || []
-    const columnsAdd = config.columnsAdd || []
-    configColumns = configColumns.concat(columnsAdd)
-    configColumns = configColumns.filter(item => !columnsExclude.includes(item))
-
-    // 解决后端 API 返回字段中包含 actions 的问题;
-    const hasColumnActions = configColumns.findIndex(item => item?.prop === 'actions') !== -1
-    if (!hasColumnActions) {
-      configColumns = [...configColumns.filter(i => i !== 'actions'), 'actions']
-    }
-
-    for (let col of configColumns) {
-      if (typeof col === 'object') {
-        columns.push(col)
-      } else if (typeof col === 'string') {
-        col = this.generateColumn(col)
-        columns.push(col)
-      }
-    }
-
-    columns = columns.filter(item => {
-      if (item?.showFullContent) {
-        item.className = 'show-full-content'
-      }
-      let has = item.has
-      if (has === undefined) {
-        has = true
-      } else if (typeof has === 'function') {
-        has = has()
-      }
-      return has
-    })
-
-    // columns = this.orderingColumns(columns)
-    // 第一次初始化时记录 totalColumns
-    config.columns = columns
-    return columns
-  }
-
-  updateLabelIfNeed(col) {
-    if (!col.label) {
-      return col
-    }
-    col.label = col.label
-      .replace(' Amount', '')
-      .replace(' amount', '')
-      .replace('数量', '')
-    if (col.label.startsWith('Is ')) {
-      col.label = col.label.replace('Is ', '')
-    }
-    col.label = toSentenceCase(col.label)
-    return col
-  }
-
-  generateColumn(name) {
-    const colMeta = this.meta[name] || {}
-    const customMeta = this.config.columnsMeta ? this.config.columnsMeta[name] : {}
-    let col = { prop: name, label: colMeta.label, showOverflowTooltip: true }
-
-    col = this.generateColumnByType(colMeta.type, col, colMeta)
-    col = this.generateColumnByName(name, col)
-    col = this.setDefaultFormatterIfNeed(col)
-    col = Object.assign(col, customMeta)
-    col = this.addHelpTipIfNeed(col)
-    col = this.addFilterIfNeed(col)
-    col = this.addOrderingIfNeed(col)
-    col = this.updateLabelIfNeed(col)
-    col = this.setDefaultWidthIfNeed(col)
-    return col
-  }
-
-  generateColumnByName(name, col) {
-    switch (name) {
-      case 'id':
-        if (!col.width) {
-          col.width = '299px'
-        }
-        if (!col.formatter) {
-          col.formatter = CopyableFormatter
-          col.iconPosition = 'left'
-        }
-        break
-      case 'name':
-        col.formatter = DetailFormatter
-        col.sortable = 'custom'
-        col.showOverflowTooltip = true
-        col.minWidth = '150px'
-        break
-      case 'actions':
-        col = {
-          prop: 'actions',
-          label: i18n.t('Actions'),
-          align: 'center',
-          width: '120px',
-          formatter: ActionsFormatter,
-          fixed: 'right',
-          formatterArgs: {}
-        }
-        break
-      case 'is_valid':
-        col.label = i18n.t('Valid')
-        col.formatter = ChoicesFormatter
-        col.formatterArgs = {
-          textChoices: {
-            true: i18n.t('Yes'),
-            false: i18n.t('No')
-          }
-        }
-        col.width = '80px'
-        break
-      case 'is_active':
-        col.formatter = ChoicesFormatter
-        col.formatterArgs = {
-          textChoices: {
-            true: i18n.t('Active'),
-            false: i18n.t('Inactive')
-          }
-        }
-        col.width = '100px'
-        break
-      case 'datetime':
-      case 'date_start':
-        col.formatter = DateFormatter
-        break
-      case 'labels':
-        col.formatter = LabelsFormatter
-        col.width = '200px'
-        break
-      case 'comment':
-        col.showOverflowTooltip = true
-    }
-    return col
-  }
-
-  generateColumnByType(type, col, meta) {
-    switch (type) {
-      case 'choice':
-        col.sortable = 'custom'
-        col.formatter = DisplayFormatter
-        break
-      case 'labeled_choice':
-        col.sortable = 'custom'
-        col.formatter = ChoicesFormatter
-        break
-      case 'boolean':
-        col.formatter = ChoicesFormatter
-        // col.width = '80px'
-        break
-      case 'datetime':
-        col.formatter = DateFormatter
-        col.width = '155px'
-        break
-      case 'object_related_field':
-        col.formatter = ObjectRelatedFormatter
-        break
-      case 'm2m_related_field':
-        col.formatter = ObjectRelatedFormatter
-        break
-      case 'list':
-        col.formatter = ArrayFormatter
-        break
-      case 'json':
-      case 'field':
-        if (meta.child && meta.child.type === 'nested object') {
-          col.formatter = ObjectRelatedFormatter
-        }
-        break
-    }
-    // this.$log.debug('Field: ', type, col.prop, col)
-    return col
-  }
-
-  setDefaultFormatterIfNeed(col) {
-    const h = this.vm.$createElement
-    if (!col.formatter) {
-      col.formatter = (row, column, cellValue) => {
-        let value = cellValue
-        let padding = '0'
-        const excludes = [undefined, null, '']
-        if (excludes.indexOf(value) !== -1) {
-          padding = '6px'
-          value = '-'
-        }
-        return h('span', {
-          'style': {
-            marginLeft: padding
-          }
-        }, [value])
-      }
-    }
-    return col
-  }
-
-  setDefaultWidthIfNeed(col) {
-    const lang = i18n.locale
-    let factor = 10
-    if (lang === 'zh') {
-      factor = 20
-    }
-    let [sortable, filters] = [0, 0]
-    if (col && col?.sortable === 'custom') {
-      sortable = 10
-    }
-    if (col && col?.filters?.length > 0) {
-      filters = 12
-    }
-    if (col && !col.width && col.label && !col.minWidth) {
-      col.minWidth = `${col.label.length * factor + sortable + filters + 30}px`
-    }
-    return col
-  }
-
-  addOrderingIfNeed(col) {
-    if (col.prop) {
-      const column = this.meta[col.prop] || {}
-      if (column.order) {
-        col.sortable = 'custom'
-        col['column-key'] = col.prop
-      }
-    }
-    return col
-  }
-
-  addHelpTipIfNeed(col) {
-    const helpTip = col.helpTip
-    if (!helpTip) {
-      return col
-    }
-    col.renderHeader = (h, { column, $index }) => {
-      const binds = {
-        props: {
-          placement: 'bottom',
-          effect: 'dark',
-          openDelay: 500,
-          popperClass: 'help-tips'
-        }
-      }
-
-      return (
-        <span>{column.label}
-          <el-tooltip {...binds}>
-            <div slot='content' v-sanitize={helpTip}/>
-            <i class='fa fa-question-circle-o help-tip-icon' style='padding-left: 2px'/>
-          </el-tooltip>
-        </span>
-      )
-    }
-    return col
-  }
-
-  addFilterIfNeed(col) {
-    if (col.prop) {
-      const column = this.meta[col.prop] || {}
-      if (!column.filter) {
-        return col
-      }
-      if (column.type === 'boolean') {
-        col.filters = [
-          { text: i18n.t('Yes'), value: true },
-          { text: i18n.t('No'), value: false }
-        ]
-        col.sortable = false
-        col['column-key'] = col.prop
-      }
-      if (column.type === 'choice' && column.choices) {
-        col.filters = column.choices.map(item => {
-          if (typeof (item.value) === 'boolean') {
-            if (item.value) {
-              return { text: item['label'], value: 'True' }
-            } else {
-              return { text: item['label'], value: 'False' }
-            }
-          }
-          return { text: item['label'], value: item.value }
-        })
-        col.sortable = false
-        col['column-key'] = col.prop
-      }
-    }
-    return col
-  }
-}

src/components/Table/CardTable/DataCardTable/CardPanel.vue

@@ -1,22 +1,16 @@
 <template>
-  <div class="info-panel" @click="gotoDetail">
-    <div class="panel-header">
-      <div class="panel-title">
-        <el-avatar :src="imageUrl" shape="square" />
-        <div class="title-display">
-          <span class="name">{{ object.name }}</span>
-          <span class="comment">{{ object.provider.label }}</span>
+  <div class="account-panel">
+    <el-row :gutter="20">
+      <el-col :span="21">
+        <div class="title">
+          <span>{{ object.name }}</span>
         </div>
-      </div>
-      <div
-        v-if="iActions.length !== 0"
-        class="panel-actions"
-        @click="handleClick($event)"
-      >
+      </el-col>
+      <el-col v-if="iActions.length !== 0" :span="3" @click.native="handleClick($event)">
         <el-dropdown>
-          <el-button size="mini">
-            <i class="el-icon-more el-icon--right" />
-          </el-button>
+          <el-link :underline="false" type="primary">
+            <i class="el-icon-more el-icon--right" style="color: var(--color-text-primary)" />
+          </el-link>
           <el-dropdown-menu default="dropdown">
             <el-dropdown-item
               v-for="action in iActions"
@@ -24,21 +18,30 @@
               :disabled="action.disabled"
               @click.native="action.callback(object)"
             >
-              {{ action.name }}
+              <i v-if="action.icon" :class="action.icon" /> {{ action.name }}
             </el-dropdown-item>
           </el-dropdown-menu>
         </el-dropdown>
-      </div>
-    </div>
-    <div class="panel-content">
-      <InfoPanel :infos="getInfos(object)" />
-    </div>
-    <el-row class="panel-footer" />
+      </el-col>
+    </el-row>
+    <el-row :gutter="20" class="panel-content">
+      <el-col :span="6" class="panel-image">
+        <el-image :src="imageUrl" fit="contain" />
+      </el-col>
+      <el-col :span="18" class="panel-info">
+        <InfoPanel
+          v-for="(obj, index) in getInfos(object)"
+          :key="index"
+          :content="obj.content"
+          :title="obj.title"
+        />
+      </el-col>
+    </el-row>
   </div>
 </template>
 
 <script>
-import InfoPanel from './Info.vue'
+import InfoPanel from './InfoPanel'
 
 export default {
   name: 'CardPanel',
@@ -74,11 +77,6 @@ export default {
       type: Function,
       default: () => {
       }
-    },
-    onView: {
-      type: Function,
-      default: () => {
-      }
     }
   },
   data() {
@@ -116,18 +114,12 @@ export default {
       return Array.from(mergedActions.values())
     }
   },
-  mounted() {
-    // this.$log.debug('>>> Object: ', this.object)
-  },
   methods: {
     isDisabled(action) {
       const app = this.tableConfig.permissions?.app
       const resource = this.tableConfig.permissions?.resource
       return !this.$hasPerm(`${app}.${action}_${resource}`)
     },
-    gotoDetail() {
-      this.onView(this.object)
-    },
     handleClick(event) {
       event.stopPropagation()
     },
@@ -153,79 +145,29 @@ export default {
 
 <style lang="scss" scoped>
 
-div.info-panel {
+.account-panel {
   display: flex;
   flex-direction: column;
-  padding: 10px;
-  gap: 10px;
+  //height: 100%;
   cursor: pointer;
 
-  .panel-header {
-    padding: 10px 20px;
-    //border-bottom: solid 1px #e7eaec;
-    display: flex;
-    justify-content: space-between;
-    gap: 10px;
-
-    .panel-title {
-      display: flex;
-      align-items: center;
-      font-weight: 600;
-      gap: 10px;
-
-      .title-display {
-        display: flex;
-        flex-direction: column;
-        text-align: left;
-
-        .name {
-          font-size: 1.1em;
-          color: #555555;
-        }
-
-        .comment {
-          color: #62686c;
-          font-weight: 300;
-          font-size: 0.8em;
-        }
-      }
-
-      ::v-deep {
-        .el-avatar {
-          background: #fff;
-        }
-      }
-    }
-
-    .panel-actions {
-      display: flex;
-      align-items: center;
-
-      ::v-deep {
-        button.el-button--mini {
-          padding: 5px 7px;
-
-          .el-icon--right {
-            margin-left: 0;
-          }
-        }
-      }
-    }
+  .title {
+    text-align: left;
+    font-weight: 600;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    font-size: 1.1em;
+    color: #555555;
   }
 
   .panel-content {
-    display: block;
-    padding: 1px 25px 10px;
+    display: flex;
+    height: 100px;
+    padding: 10px 0;
 
     .panel-image {
       margin: auto 5px;
-      width: 100px;
-    }
-
-    .panel-info {
-      display: flex;
-      flex-direction: column;
-      justify-content: space-between;
     }
   }
 

src/components/Table/CardTable/DataCardTable/InfoPanel.vue

@@ -0,0 +1,73 @@
+<template>
+  <div class="panel-item">
+    <span class="item-label">{{ title }} </span>
+    <span :title="content" class="text-info">{{ content || '' }}</span>
+  </div>
+</template>
+
+<script>
+
+export default {
+  name: 'InfoPanel',
+  components: {},
+  props: {
+    title: {
+      type: String,
+      default: () => ''
+    },
+    content: {
+      type: [String, Number],
+      default: () => ''
+    }
+  },
+  data() {
+    return {}
+  },
+  methods: {}
+}
+</script>
+
+<style lang='scss' scoped>
+@mixin textOverflow {
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+.panel-item {
+  text-align: left;
+  padding: 3px 0;
+  line-height: 20px;
+
+  .item-label {
+    text-align: left;
+    display: inline-block;
+    width: 35%;
+  }
+
+  .item-label::after {
+    content: ':';
+    margin-left: 1px;
+  }
+
+  .text-info {
+    @include textOverflow;
+  }
+}
+
+html:lang(en) .panel-item span {
+  min-width: 100px;
+}
+
+html:lang(ja) .panel-item span {
+  min-width: 160px;
+}
+
+html:lang(cn) .panel-item span {
+  min-width: 120px;
+}
+
+html:lang(zh_hant) .panel-item span {
+  min-width: 120px;
+}
+</style>

src/components/Table/CardTable/DataCardTable/index.vue

@@ -3,25 +3,17 @@
     ref="table"
     :columns="3"
     :table-config="tableConfig"
-    class="info-card-table"
     v-bind="$attrs"
-    v-on="$listeners"
   >
     <template v-slot:default="slotProps">
-      <CardPanel
-        :object="slotProps.item"
-        :on-view="slotProps.onView"
-        :table-config="tableConfig"
-        v-bind="subComponentProps"
-        @refresh="reloadTable"
-      />
+      <CardPanel :object="slotProps.item" :table-config="tableConfig" v-bind="subComponentProps" />
     </template>
   </CardTable>
 </template>
 
 <script type="text/jsx">
 import CardTable from '@/components/Table/CardTable/index.vue'
-import CardPanel from './Panel.vue'
+import CardPanel from './CardPanel.vue'
 
 export default {
   name: 'SmallCard',
@@ -40,7 +32,8 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+    }
   },
   methods: {
     reloadTable() {
@@ -49,13 +42,3 @@ export default {
   }
 }
 </script>
-
-<style lang="scss" scoped>
-.info-card-table {
-  ::v-deep {
-    div.the-card {
-      padding: 0;
-    }
-  }
-}
-</style>

src/components/Table/CardTable/Panel.vue

@@ -1,151 +0,0 @@
-<template>
-  <div @click="handleClick">
-    <span v-if="d.edition === 'enterprise'" class="enterprise">
-      {{ $t('Enterprise') }}
-    </span>
-    <el-row class="panel">
-      <el-col v-if="d.icon" :span="d.icon ? 8 : 0" class="image">
-        <img
-          v-if="d.icon.startsWith('/') || d.icon.startsWith('data:')"
-          :alt="d.display_name"
-          :src="d.icon"
-        >
-        <Icon v-else :icon="d.icon" />
-      </el-col>
-      <el-col :span="d.icon ? 16 : 24" class="text-zone">
-        <div class="one-line">
-          <b>{{ d.display_name }}</b>
-        </div>
-        <div class="tag-zone">
-          <el-tag v-if="d.version" size="mini" style="margin-left: 5px; background-color: #ecf5ff; color: #409eff;">
-            {{ d.version }}
-          </el-tag>
-          <el-tag v-for="tag of d.tags" :key="tag" size="mini">
-            {{ capitalize(tag) }}
-          </el-tag>
-        </div>
-        <div :title="d.comment " class="comment">
-          {{ d.comment }}
-        </div>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-import Icon from '@/components/Widgets/Icon/index.vue'
-
-export default {
-  name: 'Panel',
-  components: { Icon },
-  props: {
-    d: {
-      type: Object,
-      required: true
-    }
-  },
-  data() {
-    return {}
-  },
-  methods: {
-    capitalize(str) {
-      return str.charAt(0).toUpperCase() + str.slice(1)
-    },
-    handleClick() {
-      this.$emit('onClick', this.d)
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.panel {
-  display: flex;
-  flex-wrap: nowrap;
-  margin-top: 0;
-  height: 100%;
-
-  .image {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    img {
-      width: 60px;
-      height: 60px;
-      object-fit: contain;
-    }
-
-    svg {
-      width: 40px;
-      height: 40px;
-    }
-  }
-
-  .text-zone {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-
-    .one-line {
-      display: flex;
-      flex-wrap: wrap;
-      align-items: center;
-      padding-top: 10px;
-      text-overflow: ellipsis;
-      white-space: nowrap;
-      cursor: pointer;
-
-      b {
-        padding-right: 5px;
-      }
-
-      span {
-        margin-left: 0 !important;
-      }
-    }
-
-    .comment {
-      display: -webkit-box;
-      margin-top: 10px;
-      font-size: 12px;
-      cursor: pointer;
-      overflow: hidden;
-      -webkit-line-clamp: 4;
-      -webkit-box-orient: vertical;
-    }
-
-    .tag-zone {
-      display: flex;
-      align-items: center;
-      cursor: pointer;
-      margin-top: 10px;
-      margin-left: -5px;
-    }
-  }
-}
-
-.enterprise {
-  position: absolute;
-  right: -1px;
-  top: -1px;
-  background-color: var(--color-primary);
-  color: #fff;
-  padding: 3px 8px 4px 9px;
-  font-size: 13px;
-  border-radius: 3px 3px 3px 8px;
-}
-
-.tag-zone {
-  margin-top: 10px;
-
-  .el-tag {
-    margin-right: 3px;
-  }
-}
-
-.text-zone {
-  text-align: left;
-  height: 100%;
-}
-</style>

src/components/Table/CardTable/index.vue

@@ -6,25 +6,53 @@
       :table-url="tableUrl"
       v-bind="headerActions"
     />
-    <el-row v-loading="loading" class="the-row">
-      <IBox v-if="totalData.length === 0" class="empty-box">
+    <el-row :gutter="10" class="the-row">
+      <IBox v-if="totalData.length === 0">
         <el-empty :description="$t('NoData')" :image-size="200" class="no-data" style="padding: 20px" />
       </IBox>
-      <div class="card-container">
+      <el-col v-for="(d, index) in totalData" :key="index" :lg="8" :md="12" :sm="24" class="el-col">
         <el-card
-          v-for="(d, index) in totalData"
-          :key="index"
+          :body-style="{ 'text-align': 'center', 'padding': '15px' }"
           :class="{'is-disabled': isDisabled(d)}"
-          class="the-card"
+          class="my-card"
           shadow="hover"
+          @click.native="onView(d)"
         >
           <keep-alive>
-            <slot :index="index" :item="d" :onView="onView">
-              <Panel :d="d" @click.native="onView(d)" />
+            <slot :index="index" :item="d">
+              <span v-if="d.edition === 'enterprise'" class="enterprise">
+                {{ $t('Enterprise') }}
+              </span>
+              <el-row>
+                <el-col v-if="d.icon" :span="8" class="image">
+                  <img
+                    v-if="d.icon.startsWith('/') || d.icon.startsWith('data:')"
+                    :alt="d.display_name"
+                    :src="d.icon"
+                  >
+                  <Icon v-else :icon="d.icon" />
+                </el-col>
+                <el-col :span="16" class="text-zone">
+                  <div class="one-line">
+                    <b>{{ d.display_name }}</b>
+                    <el-tag v-if="d.version" size="mini" style="margin-left: 5px">
+                      {{ d.version }}
+                    </el-tag>
+                  </div>
+                  <div :title="d.comment " class="comment">
+                    {{ d.comment }}
+                  </div>
+                  <div class="tag-zone">
+                    <el-tag v-for="tag of d.tags" :key="tag" size="mini">
+                      {{ capitalize(tag) }}
+                    </el-tag>
+                  </div>
+                </el-col>
+              </el-row>
             </slot>
           </keep-alive>
         </el-card>
-      </div>
+      </el-col>
     </el-row>
     <Pagination
       v-show="pagination && total > paginationSize"
@@ -34,33 +62,25 @@
       @currentSizeChange="handleCurrentChange"
       @sizeChange="handleSizeChange"
     />
-    <Drawer
-      v-if="detailDrawer"
-      :component="detailDrawer"
-      :title="detailTitle"
-      :visible.sync="detailDrawerVisible"
-    />
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { Pagination } from '@/components'
 import TableAction from '@/components/Table/ListTable/TableAction'
-import IBox from '@/components/Common/IBox/index.vue'
-import Panel from './Panel'
-import Drawer from '@/components/Drawer/index.vue'
+import { Pagination } from '@/components'
+import Icon from '@/components/Widgets/Icon/index.vue'
+import { mapGetters } from 'vuex'
+import IBox from '@/components/IBox/index.vue'
 
 const defaultFirstPage = 1
 
 export default {
   name: 'CardTable',
   components: {
-    Drawer,
     IBox,
-    Panel,
     TableAction,
-    Pagination
+    Pagination,
+    Icon
   },
   props: {
     // 定义 table 的配置
@@ -87,10 +107,6 @@ export default {
     subComponentProps: {
       type: Object,
       default: () => ({})
-    },
-    detailDrawer: {
-      type: [String, Function],
-      default: ''
     }
   },
   data() {
@@ -102,16 +118,13 @@ export default {
       paginationSize: 6,
       paginationLayout: 'total, sizes, prev, pager, next',
       paginationSizes: [6, 18, 27],
-      loading: true,
       axiosConfig: {
         raw: 1,
         params: {
           display: 1,
           draw: 1
         }
-      },
-      detailDrawerVisible: false,
-      detailTitle: ''
+      }
     }
   },
   computed: {
@@ -120,17 +133,16 @@ export default {
       return this.tableConfig.url || ''
     }
   },
-  async mounted() {
-    try {
-      await this.getList()
-    } finally {
-      this.loading = false
-    }
+  mounted() {
+    this.getList()
   },
   methods: {
     isDisabled(item) {
       return item.edition?.value === 'enterprise' && !this.hasValidLicense
     },
+    capitalize(str) {
+      return str.charAt(0).toUpperCase() + str.slice(1)
+    },
     getIcon(status) {
       let iconClass = 'fa-check-circle'
       if (status === false) {
@@ -141,7 +153,7 @@ export default {
     getPageQuery(currentPage, pageSize) {
       return this.$refs.pagination.getPageQuery(currentPage, pageSize)
     },
-    async getList() {
+    getList() {
       if (this.tableConfig.totalData) {
         this.totalData = this.tableConfig.totalData
         this.total = this.totalData.length
@@ -151,15 +163,20 @@ export default {
         return
       }
       const pageQuery = this.getPageQuery(this.page, this.paginationSize)
-      const query = Object.assign(this.extraQuery, pageQuery, this.tableConfig.extraQuery)
+      const query = Object.assign(this.extraQuery, pageQuery)
       const queryString = Object.keys(query).map(key => key + '=' + query[key]).join('&')
-      const connector = this.tableUrl.indexOf('?') === -1 ? '?' : '&'
-      const url = `${this.tableUrl}${connector}${queryString}`
+      const url = `${this.tableUrl}?${queryString}`
 
-      const resp = await this.$axios.get(url, this.axiosConfig)
-      const data = resp.data
-      this.total = data?.count || 0
-      this.totalData = data?.results || []
+      this.$axios
+        .get(url, this.axiosConfig)
+        .then(({ data: resp }) => {
+          this.total = resp?.count || 0
+          this.totalData = resp?.results || []
+        })
+        .catch(err => {
+          this.$log.error('Error occur: ', err)
+          this.total = 0
+        })
     },
     reloadTable() {
       this.getList()
@@ -190,22 +207,16 @@ export default {
       this.$router.push(detailRoute)
     },
     defaultPerformDelete(obj) {
-      this.$axios.delete(`${this.tableConfig.url}${obj.id}/`)
+      this.$axios.delete(
+        `${this.tableConfig.url}${obj.id}/`
+      )
     },
-    async onView(obj) {
+    onView(obj) {
       if (this.isDisabled(obj)) {
         return
       }
-      if (this.detailDrawer) {
-        await this.$store.dispatch('common/setDrawerActionMeta', {
-          action: 'detail', row: obj, col: {}, id: obj.id
-        })
-        this.detailTitle = `${this.$t('Detail')}: ${obj.name}`
-        this.detailDrawerVisible = true
-      } else {
-        const viewFunc = this.tableConfig.onView || this.defaultPerformView
-        await viewFunc(obj)
-      }
+      const viewFunc = this.tableConfig.onView || this.defaultPerformView
+      viewFunc(obj)
     },
     onDelete(obj) {
       const msg = `${this.$t('DeleteWarningMsg')} "${obj.name}" ?`
@@ -229,46 +240,88 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.the-row .empty-box {
-  display: block;
-
-  ::v-deep {
-    .el-empty {
-      margin: 0 auto;
-    }
-  }
-}
-
 .the-row {
   margin-top: 15px;
   max-width: 1600px;
   text-align: center;
 
-  .card-container {
-    display: flex;
-    justify-content: left;
-    flex-wrap: wrap;
-
-    .el-card .el-card__body div {
-      height: inherit;
-    }
-  }
-
   .el-col, div {
-    gap: 20px;
-
-    .the-card {
+    .my-card {
       min-width: 330px;
+      width: 100%;
       position: relative;
       margin-bottom: 20px;
-      //height: 230px;
-      width: 380px;
-      padding: 15px;
 
       ::v-deep .el-card__body {
         height: 100%;
-        width: 100%;
-        padding: 0;
+
+        .el-row {
+          display: flex;
+          flex-wrap: nowrap;
+          margin-top: 0;
+          height: 100%;
+
+          .image {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+
+            img {
+              width: 60px;
+              height: 60px;
+              object-fit: contain;
+            }
+
+            svg {
+              width: 40px;
+              height: 40px;
+            }
+          }
+
+          .text-zone {
+            display: flex;
+            flex-direction: column;
+            align-items: flex-start;
+
+            .one-line {
+              display: flex;
+              flex-wrap: wrap;
+              align-items: center;
+              padding-top: 10px;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              cursor: pointer;
+
+              b {
+                padding-right: 5px;
+              }
+
+              span {
+                margin-left: 0 !important;
+              }
+            }
+
+            .comment {
+              display: -webkit-box;
+              height: 120px;
+              font-size: 12px;
+              padding: 10px 0;
+              cursor: pointer;
+              overflow: hidden;
+              -webkit-line-clamp: 4;
+              -webkit-box-flex: 1;
+              -webkit-box-orient: vertical;
+              text-align: left;
+            }
+
+            .tag-zone {
+              display: flex;
+              height: 30%;
+              align-items: center;
+              cursor: pointer;
+            }
+          }
+        }
       }
 
       &.is-disabled {
@@ -296,6 +349,30 @@ export default {
   }
 }
 
+.enterprise {
+  position: absolute;
+  right: -1px;
+  top: -1px;
+  background-color: var(--color-primary);
+  color: #fff;
+  padding: 3px 8px 4px 9px;
+  font-size: 13px;
+  border-radius: 3px 3px 3px 8px;
+}
+
+.tag-zone {
+  margin-top: 10px;
+
+  .el-tag {
+    margin-right: 3px;
+  }
+}
+
+.text-zone {
+  text-align: left;
+  height: 100%;
+}
+
 .pagination {
   padding-top: 10px;
   border-top: 1px solid #e7eaec;

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

@@ -105,10 +105,7 @@
             <template #header>
               <span :title="col.label">{{ col.label }}</span>
             </template>
-            <template
-              v-if="col.formatter && typeof col.formatter !== 'function'"
-              v-slot:default="{row, column, $index}"
-            >
+            <template v-if="col.formatter && typeof col.formatter !== 'function'" v-slot:default="{row, column, $index}">
               <div
                 :is="col.formatter"
                 :key="row.id"
@@ -1036,7 +1033,7 @@ export default {
 
           // 开启persistSelection时，需要同步selected状态到el-table中
           this.$nextTick(() => {
-            this.selectStrategy?.updateElTableSelection()
+            this.selectStrategy.updateElTableSelection()
           })
         })
         .catch(err => {
@@ -1133,7 +1130,7 @@ export default {
      * @public
      */
     clearSelection() {
-      return this.selectStrategy?.clearSelection()
+      return this.selectStrategy.clearSelection()
     },
     // 弹窗相关
     // 除非树形结构在操作列点击新增, 否则 row 是 MouseEvent

src/components/Table/DataTable/compenents/el-data-table/utils/select-strategy.js

@@ -13,28 +13,15 @@ class StrategyAbstract {
     this.onSelect = this.onSelect.bind(this)
     this.onSelectAll = this.onSelectAll.bind(this)
   }
-
   get elTable() {
     return this.elDataTable.$refs.table
   }
-
-  onSelectionChange() {
-  }
-
-  onSelect() {
-  }
-
-  onSelectAll() {
-  }
-
-  toggleRowSelection() {
-  }
-
-  clearSelection() {
-  }
-
-  updateElTableSelection() {
-  }
+  onSelectionChange() {}
+  onSelect() {}
+  onSelectAll() {}
+  toggleRowSelection() {}
+  clearSelection() {}
+  updateElTableSelection() {}
 }
 
 /**
@@ -47,16 +34,14 @@ class StrategyNormal extends StrategyAbstract {
   onSelectionChange(val) {
     this.elDataTable.selected = val
   }
-
   /**
    * toggleRowSelection和clearSelection的表现与el-table一致
    */
   toggleRowSelection(...args) {
     return this.elTable.toggleRowSelection(...args)
   }
-
   clearSelection() {
-    return this.elTable?.clearSelection()
+    return this.elTable.clearSelection()
   }
 }
 
@@ -80,7 +65,6 @@ class StrategyPersistSelection extends StrategyAbstract {
     const isChosen = selection.indexOf(row) > -1
     this.toggleRowSelection(row, isChosen)
   }
-
   /**
    * 用户切换当前页的多选
    */
@@ -101,7 +85,7 @@ class StrategyPersistSelection extends StrategyAbstract {
     // 判断是全选还是取消全选
     const shouldSelectAll = currentPageSelectedCount < selectableRows.length
 
-    this.elTable?.clearSelection()
+    this.elTable.clearSelection()
 
     if (shouldSelectAll) {
       selectableRows.forEach(row => {
@@ -128,7 +112,6 @@ class StrategyPersistSelection extends StrategyAbstract {
 
     this.elDataTable.$emit('selection-change', this.elDataTable.selected)
   }
-
   /**
    * toggleRowSelection和clearSelection管理elDataTable的selected数组
    * 记得最后要将状态同步到el-table中
@@ -150,12 +133,10 @@ class StrategyPersistSelection extends StrategyAbstract {
     this.elDataTable.$emit('toggle-row-selection', isSelected, row)
     this.updateElTableSelection()
   }
-
   clearSelection() {
     this.elDataTable.selected = []
     this.updateElTableSelection()
   }
-
   /**
    * 将selected状态同步到el-table中
    */
@@ -163,7 +144,7 @@ class StrategyPersistSelection extends StrategyAbstract {
     const { data, id, selected } = this.elDataTable
     const selectedIds = new Set(selected.map(r => r[id]))
 
-    this.elTable?.clearSelection()
+    this.elTable.clearSelection()
 
     data.forEach(row => {
       const shouldBeSelected = selectedIds.has(row[id])

src/components/Table/DataTable/index.vue

@@ -129,7 +129,7 @@ export default {
   watch: {},
   methods: {
     getList() {
-      this.$refs.table?.clearSelection()
+      this.$refs.table.clearSelection()
       return this.$refs.table.getList()
     },
     getData() {

src/components/Table/DrawerListTable/PageDrawer.vue

@@ -2,11 +2,14 @@
   <Drawer
     :component="component"
     :component-listeners="listener"
+    :size="drawerSize"
     :title="title"
     :visible.sync="iVisible"
     append-to-body
     class="form-drawer"
+    destroy-on-close
     v-bind="props"
+    @close="closeDrawer"
     v-on="$listeners"
   />
 </template>
@@ -46,26 +49,31 @@ export default {
     }
   },
   computed: {
+    drawerSize() {
+      const drawerWidth = localStorage.getItem('drawerWidth')
+      if (drawerWidth && drawerWidth > 100 && drawerWidth < 2000) {
+        return drawerWidth + 'px'
+      }
+      const width = window.innerWidth
+      if (width >= 800) return '767px'
+      return '90%'
+    },
     iVisible: {
       get() {
         return this.visible
       },
       set(val) {
-        this.$log.debug('>>> PageDrawer set to: ', val, this)
         this.$emit('update:visible', val)
       }
     }
   },
-  mounted() {
-    this.$log.debug('>>> PageDrawer component: ', this.component)
-  },
   methods: {
     closeDrawer() {
       this.iVisible = false
       // 关闭 Drawer 后，清空所有 params 参数
-      // Reflect.ownKeys(this.$route.params).forEach(key => {
-      //   Reflect.deleteProperty(this.$route.params, key)
-      // })
+      Reflect.ownKeys(this.$route.params).forEach(key => {
+        Reflect.deleteProperty(this.$route.params, key)
+      })
     }
   }
 }

src/components/Table/DrawerListTable/index.vue

@@ -6,8 +6,7 @@
       :table-config="iTableConfig"
       v-bind="$attrs"
     />
-    <Drawer
-      v-if="drawerComponent"
+    <PageDrawer
       :action="action"
       :class="[action]"
       :component="drawerComponent"
@@ -21,7 +20,7 @@
 
 <script>
 import ListTable from '../ListTable'
-import Drawer from '@/components/Drawer/index.vue'
+import PageDrawer from './PageDrawer.vue'
 import { setUrlParam, toLowerCaseExcludeAbbr, toSentenceCase } from '@/utils/common'
 import { mapGetters } from 'vuex'
 
@@ -30,7 +29,7 @@ const drawerType = [String, Function]
 export default {
   name: 'GenericListPage',
   components: {
-    ListTable, Drawer
+    ListTable, PageDrawer
   },
   props: {
     detailDrawer: {
@@ -72,14 +71,18 @@ export default {
   },
   data() {
     return {
-      drawerTitle: '',
+      title: '',
       action: '',
+      visible: false,
       drawerVisible: false,
       drawerComponent: ''
     }
   },
   computed: {
     ...mapGetters(['inDrawer']),
+    drawerTitle() {
+      return this.getDefaultTitle()
+    },
     iHeaderActions() {
       const actions = this.headerActions
       if (!actions.onCreate) {
@@ -88,11 +91,14 @@ export default {
       return actions
     },
     iTableConfig() {
-      const config = _.cloneDeep(this.tableConfig)
+      const config = {
+        ...this.tableConfig
+      }
       const actionMap = {
         'columnsMeta.actions.formatterArgs.onUpdate': this.onUpdate,
         'columnsMeta.actions.formatterArgs.onClone': this.onClone,
-        'columnsMeta.name.formatterArgs.onClick': this.onDetail
+        'columnsMeta.name.formatterArgs.drawer': true,
+        'columnsMeta.name.formatterArgs.drawerComponent': this.detailDrawer
       }
       for (const [key, value] of Object.entries(actionMap)) {
         if (_.get(config, key)) {
@@ -102,13 +108,11 @@ export default {
       }
       const columnsMeta = config.columnsMeta
       for (const value of Object.values(columnsMeta)) {
-        const formatter = value?.formatter
-        const formatterArgs = value?.formatterArgs
-        // console.log('>>> name: ', key)
-        // console.log('>>> formatter: ', formatter)
-        const detailFormaters = ['AmountFormatter', 'DetailFormatter']
-        if (formatter && detailFormaters.includes(formatter.name) && formatterArgs.drawer !== false) {
-          formatterArgs.onClick = this.onDetail
+        if (
+          value.formatter && value.formatter.name === 'AmountFormatter' &&
+          value.formatterArgs && !value.formatterArgs.drawer
+        ) {
+          value.formatterArgs.drawer = this.detailDrawer
         }
       }
       return config
@@ -123,106 +127,30 @@ export default {
         this.drawerVisible = false
         this.reloadTable()
       }
-    },
-    drawerVisible: {
-      handler(val, oldVal) {
-        this.$log.debug('>>> drawerVisible changed: ', oldVal, '->', val)
-        if (!val && oldVal) {
-          this.$nextTick(() => {
-            this.afterCloseDrawer()
-          })
-        }
-      }
     }
   },
-  mounted() {
-    this.routeFreeze = {
-      params: _.cloneDeep(this.$route.params),
-      query: _.cloneDeep(this.$route.query)
-    }
-    this.$log.debug('>>> DrawerListTable mounted: ', this.routeFreeze)
-  },
-  destroyed() {
-    this.$log.debug('>>> DrawerListTable destroyed')
-  },
-  activated() {
-    this.$log.debug('>>> DrawerListTable activated')
-  },
-  deactivated() {
-    this.$log.debug('>>> DrawerListTable deactivated')
-  },
   methods: {
-    afterCloseDrawer() {
-      // 清空路由参数, 恢复路由参数
-      for (const key of ['params', 'query']) {
-        const curValue = this.$route[key] || {}
-        for (const k in curValue) {
-          this.$route[key][k] = ''
-        }
-        const value = this.routeFreeze[key] || {}
-        for (const k in value) {
-          this.$route[key][k] = value[k]
-        }
-      }
-      this.drawerComponent = ''
-    },
-    getDetailDrawerTitle({ col, row, cellValue, payload = {}}) {
-      this.$log.debug('>>> getDetailDrawerTitle: ', col, row, cellValue, payload)
-      const { detailRoute = {}, formatterArgs = {}} = payload
-      const getTitle = formatterArgs.getDrawerTitle
-      this.$log.debug('>>> getTitle: ', getTitle)
-      if (getTitle && typeof getTitle === 'function') {
-        return getTitle({ col, row, cellValue })
-      }
-      if (formatterArgs.title) {
-        return formatterArgs.title
-      }
-      const resolvedRoute = this.resolveRoute(detailRoute)
-      let title = cellValue || row.name
-      if (formatterArgs.getTitle) {
-        title = formatterArgs.getTitle({ col, row, cellValue })
-      }
-      let resource = resolvedRoute?.meta?.title || resolvedRoute?.name || ''
-      resource = resource.replace('Detail', '').replace('详情', '')
-
-      if (resource) {
-        title = `${resource}: ${title}`
-      }
-      return title
-    },
-    getActionDrawerTitle({ action, row, col, cellValue, payload }) {
-      if (action === 'detail') {
-        return this.getDetailDrawerTitle({ col, row, cellValue, payload })
-      }
-
+    getDefaultTitle() {
       let title = this.title
-
+      let dispatchAction = ''
       if (!title && this.resource) {
         title = this.resource
       }
-
       if (!title) {
         title = this.$route.meta?.title
         title = title.replace('List', '').replace('列表', '')
         title = _.trimEnd(title, 's')
       }
-
       if (!title) {
         title = this.$t('NoTitle')
       }
-
-      let actionLabel = ''
-
+      const action = this.action
       if (action === 'clone' || action === 'create') {
-        actionLabel = this.$t('Create')
+        dispatchAction = this.$t('Create')
       } else if (action === 'update') {
-        actionLabel = this.$t('Update')
-      } else if (action === 'detail') {
-        actionLabel = this.$t('Detail')
+        dispatchAction = this.$t('Update')
       }
-
-      title = actionLabel + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
-
+      title = dispatchAction + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
       return title
     },
     getDefaultDrawer(action) {
@@ -249,103 +177,37 @@ export default {
         return component
       }
     },
-    resolveRoute(route) {
-      const routes = this.$router.resolve(route)
-      if (!routes) {
-        return
+    async showDrawer(action) {
+      this.action = action
+      if (action === 'create') {
+        this.drawerComponent = this.createDrawer
+      } else if (action === 'update') {
+        this.drawerComponent = this.updateDrawer || this.createDrawer
+      } else if (action === 'detail') {
+        this.drawerComponent = this.detailDrawer
+      } else if (action === 'clone') {
+        this.drawerComponent = this.createDrawer || this.getDefaultDrawer('create')
+      } else {
+        this.drawerComponent = this.createDrawer
       }
-      const matched = routes.resolved.matched.filter(item => item.name === route.name && item.components)
-      if (matched.length === 0) {
-        return
+      if (!this.drawerComponent) {
+        this.drawerComponent = this.getDefaultDrawer(action)
       }
-      if (matched[0] && matched[0].components?.default) {
-        return matched[0]
+      if (this.getDrawerTitle) {
+        const actionMeta = await this.$store.getters['common/drawerActionMeta']
+        this.title = this.getDrawerTitle({ action, ...actionMeta })
       }
+      this.drawerVisible = true
     },
-    getDetailComponent({ detailRoute }) {
-      if (!detailRoute) {
-        return this.detailDrawer
-      }
-      this.$log.debug('>>> getDetailComponent: ', detailRoute)
-      const route = this.resolveRoute(detailRoute)
-      let component = null
-      if (route) {
-        component = route.components.default
-      }
-      if (!component) {
-        component = this.detailDrawer
-      }
-      return component
-    },
-    getDrawerComponent(action, payload) {
-      this.$log.debug('>>> getDrawerComponent: ', action, payload)
-      switch (action) {
-        case 'create':
-          return this.createDrawer
-        case 'update':
-          return this.updateDrawer || this.createDrawer
-        case 'detail':
-          return this.getDetailComponent(payload)
-        case 'clone':
-          return this.createDrawer || this.getDefaultDrawer('create')
-        default:
-          return this.createDrawer
-      }
-    },
-
-    async showDrawer(action, { row = {}, col = {}, query = {}, cellValue = '', payload = {}} = {}) {
-      try {
-        // 1. 先重置状态
-        this.drawerVisible = false
-        this.action = action
-
-        for (const key in query) {
-          this.$route.query[key] = query[key]
-        }
-
-        // 2. 等待下一个 tick，确保状态已重置
-        await this.$nextTick()
-
-        // 3. 设置组件
-        this.drawerComponent = this.getDrawerComponent(action, payload)
-        this.$log.debug('>>> drawerComponent: ', this.drawerComponent)
-        this.drawerTitle = this.getActionDrawerTitle({ action, row, col, cellValue, payload })
-
-        // 4. 如果没有组件，尝试获取默认组件
-        if (!this.drawerComponent) {
-          this.drawerComponent = this.getDefaultDrawer(action)
-        }
-
-        // 5. 如果还是没有组件，报错
-        if (!this.drawerComponent) {
-          throw new Error(`No drawer component found for action: ${action}`)
-        }
-
-        // 6. 获取标题
-        if (this.getDrawerTitle) {
-          const actionMeta = await this.$store.getters['common/drawerActionMeta']
-          this.title = this.getDrawerTitle({ action, ...actionMeta })
-        }
-
-        // 7. 等待下一个 tick，确保组件已设置
-        await this.$nextTick()
-
-        // 8. 显示抽屉
-        this.drawerVisible = true
-
-        this.$log.debug('Drawer initialized:', {
-          title: this.title,
-          visible: this.drawerVisible,
-          component: this.drawerComponent,
-          action: this.action,
-          'this': this,
-          'vm': this.vm
-        })
-      } catch (error) {
-        console.error('Failed to show drawer:', error)
-        this.drawerVisible = false
-        this.drawerComponent = ''
+    onCreate(meta) {
+      if (!meta) {
+        meta = {}
       }
+      this.$store.dispatch('common/setDrawerActionMeta', {
+        action: 'create', ...meta
+      }).then(() => {
+        this.showDrawer('create')
+      })
     },
     reloadTable() {
       if (this.reloadOrderQuery) {
@@ -353,48 +215,25 @@ export default {
       }
       this.$refs.ListTable.reloadTable()
     },
-    async onDetail({ row, col, cellValue, detailRoute, formatterArgs }) {
-      this.$log.debug('>>> onDetail: ', detailRoute, formatterArgs)
-      this.$route.params.id = row.id
-      // 因为使用 detail formatter 时，id 可能并非 row 的，比如 execution 的 task id
-      const query = detailRoute?.query || {}
-      const params = detailRoute?.params || {}
-      for (const key in query) {
-        this.$route.query[key] = query[key]
-      }
-      for (const key in params) {
-        this.$route.params[key] = params[key]
-      }
-      // 有可能来自 params 或者 row
-      const id = params.id || row.id
-      await this.$store.dispatch('common/setDrawerActionMeta', {
-        action: 'detail', row: row, col: col, id: id
-      })
-      await this.showDrawer('detail', { row, col, cellValue, payload: { detailRoute, formatterArgs }})
-    },
-    async onCreate(meta) {
-      if (!meta) {
-        meta = {}
-      }
-      this.$route.params.id = ''
-      await this.$store.dispatch('common/setDrawerActionMeta', { action: 'create', ...meta })
-      await this.showDrawer('create', meta)
-    },
-    async onClone({ row, col, query = {}}) {
-      this.$route.params.id = ''
-      await this.$store.dispatch('common/setDrawerActionMeta', {
+    onClone({ row, col }) {
+      this.$store.dispatch('common/setDrawerActionMeta', {
         action: 'clone', row: row, col: col, id: row.id
+      }).then(() => {
+        this.showDrawer('clone')
       })
-      await this.showDrawer('clone', { query })
     },
-    async onUpdate({ row, col, query = {}}) {
+    onUpdate({ row, col }) {
       this.$route.params.id = row.id
       this.$route.params.action = 'update'
-      await this.$store.dispatch('common/setDrawerActionMeta', {
+      this.$store.dispatch('common/setDrawerActionMeta', {
         action: 'update', row: row, col: col, id: row.id
+      }).then(() => {
+        this.showDrawer('update')
       })
-      await this.showDrawer('update', { query })
     }
   }
 }
 </script>
+<style lang="scss" scoped>
+
+</style>

src/components/Table/InfoCardTable/Info.vue

@@ -1,64 +0,0 @@
-<template>
-  <div class="item-info">
-    <el-row>
-      <el-col v-for="(item, i) of infos" :key="i" :span="12" class="panel-item">
-        <small class="item-label">{{ item.title }}</small>
-        <h4 class="item-value">{{ item.content }}</h4>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'InfoPanel',
-  components: {},
-  props: {
-    infos: {
-      type: Array,
-      default: () => ([])
-    }
-  },
-  data() {
-    return {}
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-@mixin textOverflow {
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  overflow: hidden;
-}
-
-.panel-item {
-  text-align: start;
-}
-
-.panel-label {
-
-}
-
-//
-//.panel-item {
-//  flex-wrap: nowrap;
-//  text-align: left;
-//  padding: 3px 0;
-//  line-height: 20px;
-//
-//  .item-label {
-//    text-align: left;
-//    display: flex;
-//    flex: 1;
-//    min-width: 110px;
-//  }
-//
-//  .text-info {
-//    flex: 2;
-//    @include textOverflow;
-//  }
-//}
-//
-
-</style>

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

@@ -1,7 +1,7 @@
 <template>
   <div>
     <div class="tableFilter">
-      <el-radio-group v-model="importStatusFilter" size="mini">
+      <el-radio-group v-model="importStatusFilter" size="small">
         <el-radio-button label="all">{{ $t('Total') }}: {{ totalCount }}</el-radio-button>
         <el-radio-button label="ok">{{ $t('Success') }}: {{ successCount }}</el-radio-button>
         <el-radio-button label="error">{{ $t('Failed') }}: {{ failedCount }}</el-radio-button>
@@ -13,7 +13,7 @@
     </div>
     <DataTable v-if="tableGenDone" id="importTable" ref="dataTable" :config="tableConfig" class="importTable" />
     <div class="row" style="padding-top: 20px">
-      <div class="btn-groups">
+      <div class="btn-groups" style="float: right">
         <el-button v-if="showCancel" size="small" @click="performCancel">{{ $t('Cancel') }}</el-button>
         <el-button
           v-show="!disableImportBtn"
@@ -27,8 +27,8 @@
           v-for="button in moreButtons"
           v-show="!button.hidden"
           :key="button.title"
-          :disabled="disableImportBtn"
           :loading="button.loading"
+          :disabled="disableImportBtn"
           size="small"
           v-bind="button"
           @click="handleClick(button)"
@@ -105,7 +105,6 @@ export default {
       importStatusFilter: 'all',
       iTotalData: [],
       defaultTableConfig: {
-        url: '',
         hasSelection: false,
         // hasPagination: false,
         columns: [],
@@ -490,9 +489,6 @@ export default {
 }
 
 .btn-groups {
-  display: flex;
-  justify-content: flex-end;
-
   ::v-deep .el-button.is-disabled {
     cursor: not-allowed;
   }

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

@@ -13,7 +13,7 @@ import { createSourceIdCache } from '@/api/common'
 import { getErrorResponseMsg } from '@/utils/common'
 
 import i18n from '@/i18n/i18n'
-import DataActions from '@/components/Common/DataActions/index.vue'
+import DataActions from '@/components/DataActions/index.vue'
 
 const defaultTrue = { type: [Boolean, Function, String], default: true }
 const defaultFalse = { type: [Boolean, Function, String], default: false }

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

@@ -1,10 +1,6 @@
 <template>
   <div v-show="isExpand">
-    <div
-      v-if="(filters && filters.length > 0) || (summary && summary.length > 0)"
-      :class="isExpand ? 'expand': 'shrink' "
-      class="quick-filter"
-    >
+    <div v-if="filters || summary" :class="isExpand ? 'expand': 'shrink' " class="quick-filter">
       <div v-show="isExpand" class="quick-filter-wrap">
         <div v-if="filters" class="quick-filter-zone">
           <div v-for="category in iFilters" :key="category.label" class="item-zone">
@@ -20,7 +16,7 @@
                 >
                   {{ option.label }}
                   <span v-if="option.hasCount">
-                    <span>({{ option.count }})</span>
+                    (<span v-async="getCount(option)">-</span>)
                   </span>
                   <!--                  <i class="el-icon-circle-check" />-->
                 </span>
@@ -32,13 +28,19 @@
           <span v-for="item of iSummary" :key="item.title" class="summary-block">
             <SummaryCard
               :class="item.active ? 'active' : ''"
-              :count="item.count"
+              :count="getCount(item)"
               :title="item.title"
               @click="handleFilterClick(item)"
             />
           </span>
         </div>
       </div>
+      <div class="expand-bar-wrap">
+        <div class="expand-bar" @click="toggle">
+          <i :class="isExpand ? 'expand': 'shrink' " class="fa fa-angle-double-up" />
+          <span v-show="!isExpand"> 展开过滤器 </span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -70,11 +72,10 @@ export default {
   },
   data() {
     return {
-      iFilters: [],
-      iSummary: [],
+      iFilters: this.cleanFilters(),
+      iSummary: this.cleanSummary(),
       filtered: {},
-      activeFilters: [],
-      reCount: false
+      activeFilters: []
     }
   },
   computed: {
@@ -87,32 +88,7 @@ export default {
       }
     }
   },
-  watch: {
-    tableUrl() {
-      this.generateCount()
-    }
-  },
-  mounted() {
-    this.iFilters = this.cleanFilters()
-    this.iSummary = this.cleanSummary()
-    this.generateCount()
-  },
   methods: {
-    async generateCount() {
-      this.iFilters.forEach(category => {
-        category.options.forEach(option => {
-          if (option.hasCount) {
-            option.count = null
-            this.getCount(option)
-          }
-        })
-      })
-
-      this.iSummary.forEach(item => {
-        item.count = null
-        this.getCount(item)
-      })
-    },
     async getCount(item) {
       if (item.count || item.count === 0) {
         return item.count
@@ -137,7 +113,6 @@ export default {
           category: 'summary',
           label: item.title,
           ...item,
-          count: null,
           filter: item.filter || {},
           active: false
         }
@@ -191,138 +166,138 @@ export default {
 }
 </script>
 <style lang='scss' scoped>
-.quick-filter {
-  background: white;
-  padding: 10px 10px 10px 20px;
-  margin-bottom: 10px;
-  display: flex;
-  place-content: stretch flex-end;
-  justify-content: center;
-  align-content: stretch;
-  box-shadow: 0 1px 1px 0 rgba(54, 58, 80, .32);
+ .quick-filter {
+   background: white;
+   padding: 10px 10px 10px 20px;
+   margin-bottom: 10px;
+   display: flex;
+   place-content: stretch flex-end;
+   justify-content: center;
+   align-content: stretch;
+   box-shadow: 0 1px 1px 0 rgba(54, 58, 80, .32);
 
-  &.shrink {
-    background: inherit;
-    padding: 0;
-    margin-bottom: 0;
-    box-shadow: none;
-  }
+   &.shrink {
+     background: inherit;
+     padding: 0;
+     margin-bottom: 0;
+     box-shadow: none;
+   }
 
-  .quick-filter-wrap {
-    display: inline-block;
-    width: calc(100% - 70px);
+   .quick-filter-wrap {
+     display: inline-block;
+     width: calc(100% - 70px);
 
-    .summary-zone {
-      padding-top: 10px;
-      display: flex;
-      justify-content: space-between;
-    }
+     .summary-zone {
+       padding-top: 10px;
+       display: flex;
+       justify-content: space-between;
+     }
 
-    .summary-block {
-      .active {
-        ::v-deep .no-margins .num {
-          color: var(--color-primary);
+     .summary-block {
+       .active {
+         ::v-deep .no-margins .num {
+           color: var(--color-primary);
 
-          &::after {
-            content: "\e720";
-            font-family: element-icons !important;
-            font-size: 13px;
-            line-height: 1;
-          }
-        }
-      }
-    }
+           &::after {
+             content: "\e720";
+             font-family: element-icons !important;
+             font-size: 13px;
+             line-height: 1;
+           }
+         }
+       }
+     }
 
-    .quick-filter-zone {
-      display: flex;
-      justify-content: flex-start;
-      flex-wrap: wrap; /* 允许 item-zone 换行 */
-      gap: 10px;
+     .quick-filter-zone {
+       display: flex;
+       justify-content: flex-start;
+       flex-wrap: wrap; /* 允许 item-zone 换行 */
+       gap: 10px;
 
-      h5 {
-        font-weight: 600;
-        text-transform: uppercase;
-        font-size: 12px;
-        margin-bottom: .5rem;
-        line-height: 1.2;
-        display: inline-block;
-      }
+       h5 {
+         font-weight: 600;
+         text-transform: uppercase;
+         font-size: 12px;
+         margin-bottom: .5rem;
+         line-height: 1.2;
+         display: inline-block;
+       }
 
-      .item-zone {
-        margin-right: 30px;
-        margin-bottom: 5px;
-      }
+       .item-zone {
+         margin-right: 30px;
+         margin-bottom: 5px;
+       }
 
-      .item {
-        display: inline-block;
-        margin-right: 8px;
-        color: #303133;
-        font-size: 12px;
-        cursor: pointer;
+       .item {
+         display: inline-block;
+         margin-right: 8px;
+         color: #303133;
+         font-size: 12px;
+         cursor: pointer;
 
-        &::after {
-          content: "";
-          margin-left: 4px;
-          margin-bottom: 2px;
-          vertical-align: middle;
-          width: 1px; /* 分割线宽度 */
-          height: 8px; /* 分割线高度 */
-          background-color: var(--color-icon-primary); /* 分割线颜色 */
-          display: inline-block;
-        }
+         &::after {
+           content: "";
+           margin-left: 4px;
+           margin-bottom: 2px;
+           vertical-align: middle;
+           width: 1px; /* 分割线宽度 */
+           height: 8px; /* 分割线高度 */
+           background-color: var(--color-icon-primary); /* 分割线颜色 */
+           display: inline-block;
+         }
 
-        &:last-child::after {
-          display: none;
-        }
+         &:last-child::after {
+           display: none;
+         }
 
-        i {
-          visibility: hidden;
-          margin-left: -3px;
-        }
+         i {
+           visibility: hidden;
+           margin-left: -3px;
+         }
 
-        &.active {
-          color: var(--color-primary);
+         &.active {
+           color: var(--color-primary);
 
-          i {
-            visibility: visible;
-          }
-        }
+           i {
+             visibility: visible;
+           }
+         }
 
-        &:hover {
-          color: var(--color-primary);
-        }
-      }
+         &:hover {
+           color: var(--color-primary);
+         }
+       }
 
-      ul {
-        list-style: none outside none;
-        margin-block-start: 0;
-        padding-left: 0;
-      }
-    }
-  }
-}
+       ul {
+         list-style: none outside none;
+         margin-block-start: 0;
+         padding-left: 0;
+       }
+     }
+   }
+ }
 
-.filter-options {
-  display: block;
-}
+ .filter-options {
+   display: block;
+ }
 
-.expand-bar-wrap {
-  margin: auto 0;
-  min-width: 60px;
+ .expand-bar-wrap {
+   margin: auto 0;
+   min-width: 60px;
 
-  .expand-bar {
-    float: right;
-    display: block;
-    cursor: pointer;
+   .expand-bar {
+     float: right;
+     display: block;
+     cursor: pointer;
 
-    i {
-      padding: 5px;
+     i {
+       padding: 5px;
 
-      &.shrink {
-        transform: rotate(180deg);
-      }
-    }
-  }
-}
+       &.shrink {
+         transform: rotate(180deg);
+       }
+     }
+   }
+ }
 
 </style>

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

@@ -14,7 +14,7 @@
 </template>
 
 <script>
-import ActionsGroup from '@/components/Common/ActionsGroup/index.vue'
+import ActionsGroup from '@/components/ActionsGroup/index.vue'
 import ImExportDialog from './ImExportDialog.vue'
 import { cleanActions } from './utils'
 import { assignIfNot } from '@/utils/common'
@@ -176,8 +176,8 @@ export default {
       // return assignIfNot(this.exportOptions, { url: this.tableUrl })
 
       return {
-        url: this.tableUrl,
-        ...this.exportOptions
+        ...this.exportOptions,
+        url: this.tableUrl
       }
     }
   },

src/components/Table/ListTable/index.vue

@@ -20,7 +20,7 @@
       v-bind="iHeaderActions"
       @done="handleActionInitialDone"
     />
-    <IBox v-loading="!actionInit" class="table-content">
+    <IBox class="table-content">
       <AutoDataTable
         v-if="actionInit"
         ref="dataTable"
@@ -37,7 +37,7 @@
 import { getResourceFromApiUrl } from '@/utils/jms'
 import deepmerge from 'deepmerge'
 import { mapGetters } from 'vuex'
-import IBox from '@/components/Common/IBox/index.vue'
+import IBox from '../../IBox/index.vue'
 import TableAction from './TableAction/index.vue'
 import Emitter from '@/mixins/emitter'
 import AutoDataTable from '../AutoDataTable/index.vue'
@@ -103,8 +103,7 @@ export default {
       initQuery: {},
       tablePath: new URL(this.tableConfig.url || '', 'http://127.0.0.1').pathname,
       objStorage: new ObjectLocalStorage('filterExpand'),
-      iFilterExpand: null,
-      reloadTable: _.debounce(this._reloadTable, 300)
+      iFilterExpand: null
     }
   },
   computed: {
@@ -125,7 +124,6 @@ export default {
       const has =
         (this.quickFilters && this.quickFilters.length > 0) ||
         (this.quickSummary && this.quickSummary.length > 0)
-
       return !!has
     },
     dataTable() {
@@ -282,7 +280,7 @@ export default {
     handleSelectionChange(val) {
       this.selectedRows = val
     },
-    _reloadTable() {
+    reloadTable() {
       this.dataTable?.getList()
     },
     updateInitQuery(attrs) {

src/components/Table/TableFormatters/AccountConnectFormatter.vue

@@ -1,45 +1,33 @@
 <template>
-  <div>
-    <el-dropdown
-      :disabled="!hasPerm"
-      :show-timeout="500"
-      class="action-connect"
-      size="small"
-      trigger="hover"
+  <el-dropdown
+    size="small"
+    trigger="hover"
+    :show-timeout="500"
+    @command="handleCommand"
+    @visible-change="visibleChange"
+  >
+    <el-button
+      plain
+      size="mini"
       type="primary"
-      @command="handleProtocolConnect"
-      @visible-change="visibleChange"
+      @click="handlePamConnect"
     >
-      <el-button
-        plain
-        size="mini"
-        type="primary"
-        :disabled="!hasPerm"
-        @click="handleBtnConnect"
+      <i :class="IButtonIcon" />
+    </el-button>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item command="Title" disabled>
+        {{ ITitleText }}
+      </el-dropdown-item>
+      <el-dropdown-item divided />
+      <el-dropdown-item
+        v-for="protocol in protocols"
+        :key="protocol.id"
+        :command="protocol.name"
       >
-        <i :class="iButtonIcon" :style="{ color: hasPerm ? '' : '#fff' }" />
-      </el-button>
-
-      <el-dropdown-menu v-if="!isClick" slot="dropdown">
-        <el-dropdown-item command="title" disabled>
-          <div v-if="getProtocolsLoading">
-            {{ $t('Loading') }}
-          </div>
-          <div v-else>
-            {{ dropdownTitle }}
-          </div>
-        </el-dropdown-item>
-        <el-dropdown-item divided />
-        <el-dropdown-item
-          v-for="protocol in protocols"
-          :key="protocol.id"
-          :command="protocol.name"
-        >
-          {{ protocol.name }}
-        </el-dropdown-item>
-      </el-dropdown-menu>
-    </el-dropdown>
-  </div>
+        {{ protocol.name }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
 </template>
 
 <script>
@@ -49,74 +37,84 @@ export default {
   name: 'AccountConnectFormatter',
   extends: BaseFormatter,
   props: {
-    formatterArgsDefault: {
-      type: Object,
-      default() {
-        return {
-          can: () => true,
-          getConnectUrl: (row, protocol, asset) => {
-            const assetId = asset ? asset.id : row.asset.id
-            return `/luna/admin-connect/?
-              asset=${assetId}
-              &account=${row.id}
-              &protocol=${protocol}
-              &org_id=${this.$store.getters.currentOrg.id}
-            `.replace(/\s+/g, '')
-          },
-          asset: null,
-          assetUrl: '/api/v1/assets/assets/{id}/',
-          buttonIcon: 'fa fa-desktop'
-        }
-      }
+    buttonIcon: {
+      type: String,
+      default: 'fa fa-desktop'
+    },
+    titleText: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    connectUrlTemplate: {
+      type: Function,
+      default: () => {}
     }
   },
   data() {
     return {
-      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs),
-      protocols: [],
-      isClick: false,
-      getProtocolsLoading: false,
-      dropdownTitle: this.$t('Protocols')
+      protocols: []
     }
   },
   computed: {
-    iButtonIcon() {
-      return this.formatterArgs.buttonIcon
+    IButtonIcon() {
+      return this.buttonIcon
     },
-    hasPerm() {
-      return this.formatterArgs.can({ row: this.row, cellValue: this.cellValue })
+    ITitleText() {
+      return this.titleText || this.$t('SelectProtocol')
     }
   },
   methods: {
-    handleProtocolConnect(protocol) {
-      const url = this.formatterArgs.getConnectUrl(this.row, protocol, this.formatterArgs.asset)
-      window.open(url, '_blank')
+    handleCommand(protocol) {
+      if (protocol === 'Title') return
+
+      this.formatterArgs.setMapItem(this.row.id, protocol)
+      this.handleWindowOpen(this.row, protocol)
     },
     visibleChange(visible) {
       if (visible) {
         this.getProtocols(this.row.asset.id)
       }
     },
-    async handleBtnConnect() {
-      this.isClick = true
-      if (this.protocols === 0) {
-        await this.getProtocols(this.row.asset.id)
-      }
+    handleWindowOpen(row, protocol) {
+      const url = this.formatterArgs.connectUrlTemplate(row) + `${protocol}`
 
-      if (this.protocols.length > 0) {
-        this.handleProtocolConnect(this.protocols[0].name)
+      this.$nextTick(() => {
+        window.open(url, '_blank')
+      })
+    },
+    async handlePamConnect() {
+      const protocolMap = this.$store.getters.protocolMap
+
+      if (protocolMap.has(this.row.id)) {
+        // 直连
+        const protocol = protocolMap.get(this.row.id)
+        this.handleWindowOpen(this.row, protocol)
+      } else {
+        try {
+          const url = this.formatterArgs.url.replace('{id}', this.row.asset.id)
+          const res = await this.$axios.get(url)
+
+          if (res && res.protocols.length > 0) {
+            const protocol = res.protocols[0]
+
+            this.formatterArgs.setMapItem(this.row.id, protocol.name)
+            this.handleWindowOpen(this.row, protocol.name)
+          }
+        } catch (e) {
+          throw new Error(`Error getting protocols: ${e}`)
+        }
       }
-      setTimeout(() => {
-        this.isClick = false
-      }, 1000)
     },
     async getProtocols(assetId) {
-      if (this.protocols.length > 0) return
       try {
-        const url = this.formatterArgs.assetUrl.replace('{id}', assetId)
+        const url = this.formatterArgs.url.replace('{id}', assetId)
         const res = await this.$axios.get(url)
 
-        this.protocols = res.protocols.filter(protocol => (protocol.name !== 'winrm')) || []
+        if (res) this.protocols = res.protocols
       } catch (e) {
         throw new Error(`Error getting protocols: ${e}`)
       }
@@ -125,7 +123,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .el-dropdown-menu__item.is-disabled {
   font-weight: 500;
   color: var(--el-text-color-secondary);

src/components/Table/TableFormatters/AccountInfoFormatter.vue

@@ -1,22 +1,19 @@
 <template>
   <el-popover
     :title="title"
-    placement="left"
+    placement="left-start"
     trigger="click"
-    width="300"
     @show="getAsyncItems"
   >
-    <div v-if="!loading" class="detail-content">
+    <div class="detail-content">
       <div v-if="accountData.length === 0" class="empty-item">
         <span>{{ $t('No accounts') }}</span>
       </div>
       <div v-for="account of accountData" :key="account.id" class="detail-item">
-        <span>{{ getDisplay(account) }}</span>
+        <span>{{ account.name }}({{ account.username }})</span>
       </div>
     </div>
-    <el-button slot="reference" class="link-btn" plain size="mini" type="primary">
-      {{ $t('View') }} <i class="el-icon-arrow-down" />
-    </el-button>
+    <el-button slot="reference" class="link-btn" size="mini" type="text">{{ $t('View') }}</el-button>
   </el-popover>
 </template>
 
@@ -30,8 +27,7 @@ export default {
     return {
       formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs),
       value: this.cellValue,
-      accountData: [],
-      loading: false
+      accountData: []
     }
   },
   computed: {
@@ -40,24 +36,11 @@ export default {
     }
   },
   methods: {
-    getDisplay(account) {
-      const { username, name } = account
-      if (username.startsWith('@')) {
-        return name
-      } else if (name === username) {
-        return username
-      } else {
-        return `${name}(${username})`
-      }
-    },
     async getAsyncItems() {
-      this.loading = true
       const userId = this.$route.params.id || 'self'
-      const url = `/api/v1/perms/users/${userId}/assets/${this.row.id}/`
+      const url = `/api/v1/perms/users/${userId}/assets/${this.row.id}`
       this.$axios.get(url).then(res => {
         this.accountData = res?.permed_accounts || []
-      }).finally(() => {
-        this.loading = false
       })
     }
   }

src/components/Table/TableFormatters/ActionsFormatter.vue

@@ -11,7 +11,7 @@
 
 <script>
 import BaseFormatter from './base.vue'
-import ActionsGroup from '@/components/Common/ActionsGroup/index.vue'
+import ActionsGroup from '@/components/ActionsGroup/index.vue'
 
 const defaultPerformDelete = function({ row, col }) {
   const id = row.id
@@ -37,22 +37,6 @@ const defaultUpdateCallback = function({ row, col }) {
   this.$router.push(route)
 }
 
-const defaultViewCallback = function({ row, col }) {
-  const id = row.id
-  let route = { params: { id: id }}
-  const viewRoute = this.colActions.viewRoute
-
-  if (typeof updateRoute === 'object') {
-    route = Object.assign(route, viewRoute)
-  } else if (typeof updateRoute === 'function') {
-    route = viewRoute({ row, col })
-  } else {
-    route.name = viewRoute
-  }
-
-  this.$router.push(route)
-}
-
 const defaultCloneCallback = function({ row, col }) {
   const id = row.id
   let route = { query: { clone_from: id }}
@@ -121,7 +105,6 @@ export default {
           cloneRoute: this.$route.name.replace('List', 'Create'),
           performDelete: defaultPerformDelete,
           onUpdate: defaultUpdateCallback,
-          onView: defaultViewCallback,
           onDelete: defaultDeleteCallback,
           onClone: defaultCloneCallback,
           extraActions: []
@@ -241,7 +224,7 @@ export default {
 }
 </script>
 
-<style lang="scss" scoped>
+<style scoped lang="scss">
 .table-actions {
   ::v-deep {
     .el-icon-arrow-down {

src/components/Table/TableFormatters/AmountFormatter.vue

@@ -1,5 +1,5 @@
 <template>
-  <DetailFormatter :col="col" :row="row" :prevent-click="formatterArgs.preventClick">
+  <DetailFormatter :col="col" :row="row">
     <template>
       <el-popover
         :disabled="!showItems"
@@ -42,8 +42,7 @@ export default {
           },
           async: false,
           ajax: {},
-          title: '',
-          preventClick: false
+          title: ''
         }
       }
     }

src/components/Table/TableFormatters/ChoicesFormatter.vue

@@ -24,17 +24,16 @@ const formatterArgsDefault = {
     true: 'text-primary',
     false: 'text-danger'
   },
+  textChoices: {
+    true: i18n.t('Yes'),
+    false: i18n.t('No')
+  },
   getKey({ row, cellValue }) {
     return (cellValue && typeof cellValue === 'object') ? cellValue.value : cellValue
   },
   getText({ row, cellValue }) {
     const key = this.getKey({ row, cellValue })
-    if (cellValue && typeof cellValue === 'object') {
-      return cellValue.label
-    }
-    if (key === true || key === 'true') return i18n.t('Yes')
-    if (key === false || key === 'false') return i18n.t('No')
-    return cellValue
+    return (cellValue && typeof cellValue === 'object') ? cellValue.label : this.textChoices[key] || cellValue
   },
   getIcon({ row, cellValue }) {
     const key = this.getKey({ row, cellValue })