style: Optimized style

2025-11-10 20:00:45 +00:00 · 2024-12-05 10:25:13 +08:00
567 changed files with 9157 additions and 15521 deletions
--- a/.github/workflows/.github/workflows/llm-code-review.yml
+++ b/.github/workflows/.github/workflows/llm-code-review.yml
@@ -1,28 +0,0 @@
-name: LLM Code Review
-
-permissions:
-  contents: read
-  pull-requests: write
-
-on:
-  pull_request:
-    types: [opened, reopened, synchronize]
-
-jobs:
-  llm-code-review:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: fit2cloud/LLM-CodeReview-Action@main
-        env:
-          GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
-          OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
-          LANGUAGE: English
-          OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
-          MODEL: qwen2-1.5b-instruct
-          PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
-          top_p: 1
-          temperature: 1
-          # max_tokens: 10000
-          MAX_PATCH_LENGTH: 10000 
-          IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
-          FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"
--- a/.github/workflows/llm-code-review.yml
+++ b/.github/workflows/llm-code-review.yml
@@ -1,28 +0,0 @@
-name: LLM Code Review
-
-permissions:
-  contents: read
-  pull-requests: write
-
-on:
-  pull_request:
-    types: [opened, reopened, synchronize]
-
-jobs:
-  llm-code-review:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: fit2cloud/LLM-CodeReview-Action@main
-        env:
-          GITHUB_TOKEN: ${{ secrets.FIT2CLOUDRD_LLM_CODE_REVIEW_TOKEN }}
-          OPENAI_API_KEY: ${{ secrets.ALIYUN_LLM_API_KEY }}
-          LANGUAGE: English
-          OPENAI_API_ENDPOINT: https://dashscope.aliyuncs.com/compatible-mode/v1
-          MODEL: qwen2-1.5b-instruct
-          PROMPT: "Please check the following code differences for any irregularities, potential issues, or optimization suggestions, and provide your answers in English."
-          top_p: 1
-          temperature: 1
-          # max_tokens: 10000
-          MAX_PATCH_LENGTH: 10000 
-          IGNORE_PATTERNS: "/node_modules,*.md,/dist,/.github"
-          FILE_PATTERNS: "*.java,*.go,*.py,*.vue,*.ts,*.js,*.css,*.scss,*.html"
--- a/.gitignore
+++ b/.gitignore
@@ -17,5 +17,3 @@ tests/**/coverage/
 *.sln
 .env.development
 .python-version
-
-helper.json
--- a/2
+++ b/2
@@ -1,4 +1,4 @@
-FROM jumpserver/lina-base:20250408_074136 AS stage-build
+FROM jumpserver/lina-base:20240723_084702 AS stage-build

 ARG VERSION
 ENV VERSION=$VERSION
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -5,6 +5,5 @@
        "@/*": ["src/*"]
    }
  },
-  "include": ["src"],
  "exclude": ["node_modules", "dist"]
 }
--- a/package.json
+++ b/package.json
@@ -2,7 +2,7 @@
  "name": "lina",
  "version": "v4.0.0",
  "description": "JumpServer Web UI",
-  "author": "JumpServer Team <support@lxware.hk>",
+  "author": "JumpServer Team <support@fit2cloud.com>",
  "license": "GPL-3.0-or-later",
  "scripts": {
    "dev": "NODE_OPTIONS=--openssl-legacy-provider vue-cli-service serve",
@@ -66,7 +66,7 @@
    "normalize.css": "7.0.0",
    "npm": "^7.8.0",
    "nprogress": "0.2.0",
-    "path-to-regexp": "3.3.0",
+    "path-to-regexp": "2.4.0",
    "v-sanitize": "^0.0.13",
    "vue": "2.6.10",
    "vue-codemirror": "4.0.6",
@@ -81,7 +81,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",
@@ -118,10 +117,10 @@
    "sass-loader": "^7.1.0",
    "script-ext-html-webpack-plugin": "2.1.3",
    "script-loader": "0.7.2",
-    "serve-static": "^1.16.0",
+    "serve-static": "^1.13.2",
    "strip-ansi": "^7.1.0",
    "svg-sprite-loader": "4.1.3",
-    "svgo": "1.2.2",
+    "svgo": "1.2.4",
    "vue-i18n-extract": "^1.1.1",
    "vue-template-compiler": "2.6.10"
  },
@@ -143,6 +142,5 @@
    "src/**/*.{js,vue}": [
      "eslint --fix"
    ]
-  },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
+  }
 }
--- a/public/index.html
+++ b/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>
--- a/src/App.vue
+++ b/src/App.vue
@@ -5,59 +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: {
-    createWatermark() {
-      if (this.currentUser?.username && this.publicSettings?.SECURITY_WATERMARK_ENABLED) {
-        this.watermark = new Watermark({
-          content: `${this.currentUser.username}(${this.currentUser.name})`,
-          width: 200,
-          height: 200,
-          rotate: 45,
-          fontWeight: 'normal',
-          fontColor: 'rgba(128, 128, 128, 0.2)'
-        })
-
-        this.watermark.create()
-      }
-    }
  }
 }
 </script>
--- a/src/api/ops.js
+++ b/src/api/ops.js
@@ -53,7 +53,7 @@ export function createJob(form) {
  })
 }

-export function stopJob(form) {
+export function StopJob(form) {
  return request({
    url: '/api/v1/ops/job-executions/stop/',
    method: 'post',
@@ -71,10 +71,3 @@ export function JobUploadFile(form) {
  })
 }

-export function auditUpdateJob(id, form) {
-  return request({
-    url: `/api/v1/audits/jobs/${id}/`,
-    method: 'patch',
-    data: form
-  })
-}
--- a/src/api/settings.js
+++ b/src/api/settings.js
@@ -15,7 +15,6 @@ export function testEmailSetting(data) {
    data: data
  })
 }
-
 export function importLicense(formData) {
  return request({
    url: '/api/v1/xpack/license/import',
@@ -26,7 +25,6 @@ export function importLicense(formData) {
    data: formData
  })
 }
-
 export function testLdapSetting(data, refresh = true) {
  let url = '/api/v1/settings/ldap/testing/config/'
  if (refresh) {
@@ -98,17 +96,9 @@ export function getPublicSettings(isOpen) {
    method: 'get'
  })
 }
-
 export function getLogo() {
  return request({
    url: '/api/v1/xpack/interface/setting/',
    method: 'get'
  })
 }
-
-export function getPreference() {
-  return request({
-    url: '/api/v1/users/preference/?category=luna',
-    method: 'get'
-  })
-}
--- a/src/assets/img/deepSeek.png
+++ b/src/assets/img/deepSeek.png
--- a/src/assets/img/icons/general.png
+++ b/src/assets/img/icons/general.png
--- a/src/assets/img/icons/other.png
+++ b/src/assets/img/icons/other.png
--- a/src/assets/img/icons/windows_ad.png
+++ b/src/assets/img/icons/windows_ad.png
--- a/src/components/Common/ActionsGroup/index.vue
+++ b/src/components/Common/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',
--- a/src/components/Apps/AccountCreateUpdateForm/const.js
+++ b/src/components/Apps/AccountCreateUpdateForm/const.js
@@ -5,14 +5,6 @@ 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,
@@ -35,9 +27,6 @@ export const accountFieldsMeta = (vm) => {
      component: Select2,
      rules: [Required],
      el: {
-        get disabled() {
-          return vm.isDisabled
-        },
        multiple: false,
        ajax: {
          url: '/api/v1/accounts/account-templates/',
@@ -54,11 +43,6 @@ export const accountFieldsMeta = (vm) => {
      rules: [Required],
      label: vm.$t('AccountPolicy'),
      helpTip: vm.$t('AccountPolicyHelpText'),
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
      hidden: () => {
        return vm.platform || vm.asset
      }
@@ -66,19 +50,17 @@ export const accountFieldsMeta = (vm) => {
    name: {
      label: vm.$t('Name'),
      rules: [RequiredChange],
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
      on: {
        input: ([value], updateForm) => {
          if (!vm.usernameChanged) {
            if (!vm.account?.name) {
              updateForm({ username: value })
            }
+            const maybePrivileged = defaultPrivilegedAccounts.includes(value)
+            if (maybePrivileged) {
+              updateForm({ privileged: true })
+            }
          }
-          onPrivilegedUser(value, updateForm)
        }
      },
      hidden: () => {
@@ -87,16 +69,17 @@ export const accountFieldsMeta = (vm) => {
    },
    username: {
      el: {
-        get disabled() {
-          return !!vm.account?.name || vm.isDisabled
-        }
+        disabled: !!vm.account?.name
      },
      on: {
        input: ([value], updateForm) => {
          vm.usernameChanged = true
        },
        change: ([value], updateForm) => {
-          onPrivilegedUser(value, updateForm)
+          const maybePrivileged = defaultPrivilegedAccounts.includes(value)
+          if (maybePrivileged) {
+            updateForm({ privileged: true })
+          }
        }
      },
      hidden: () => {
@@ -105,11 +88,6 @@ export const accountFieldsMeta = (vm) => {
    },
    privileged: {
      label: vm.$t('Privileged'),
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
      hidden: () => {
        return vm.addTemplate
      }
@@ -132,11 +110,6 @@ export const accountFieldsMeta = (vm) => {
    },
    su_from_username: {
      label: vm.$t('UserSwitchFrom'),
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
      hidden: (formValue) => {
        return vm.platform || vm.asset || vm.addTemplate
      }
@@ -144,11 +117,6 @@ export const accountFieldsMeta = (vm) => {
    password: {
      label: vm.$t('Password'),
      component: UpdateToken,
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
      hidden: (formValue) => {
        return formValue.secret_type !== 'password' || vm.addTemplate
      }
@@ -156,63 +124,33 @@ export const accountFieldsMeta = (vm) => {
    ssh_key: {
      label: vm.$t('PrivateKey'),
      component: UploadSecret,
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
      hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
    },
    passphrase: {
      label: vm.$t('Passphrase'),
      component: UpdateToken,
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
      hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
    },
    token: {
      label: vm.$t('Token'),
      component: UploadSecret,
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
      hidden: (formValue) => formValue.secret_type !== 'token' || vm.addTemplate
    },
    access_key: {
      id: 'access_key',
      label: vm.$t('AccessKey'),
      component: UploadSecret,
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
      hidden: (formValue) => formValue.secret_type !== 'access_key' || vm.addTemplate
    },
    api_key: {
      id: 'api_key',
      label: vm.$t('ApiKey'),
      component: UploadSecret,
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
      hidden: (formValue) => formValue.secret_type !== 'api_key' || vm.addTemplate
    },
    secret_type: {
      type: 'radio-group',
      options: [],
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      },
      hidden: () => {
        return vm.addTemplate
      }
@@ -235,9 +173,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 ||
@@ -250,27 +185,12 @@ export const accountFieldsMeta = (vm) => {
      }
    },
    is_active: {
-      label: vm.$t('IsActive'),
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      }
+      label: vm.$t('IsActive')
    },
    comment: {
      label: vm.$t('Comment'),
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
-      }
-    },
-    secret_reset: {
-      label: vm.$t('SecretReset'),
-      el: {
-        get disabled() {
-          return vm.isDisabled
-        }
+      hidden: () => {
+        return vm.addTemplate
      }
    }
  }
--- a/src/components/Apps/AccountCreateUpdateForm/index.vue
+++ b/src/components/Apps/AccountCreateUpdateForm/index.vue
@@ -45,7 +45,6 @@ export default {
  data() {
    return {
      loading: true,
-      isDisabled: false,
      usernameChanged: false,
      submitBtnText: this.$t('Confirm'),
      iPlatform: {
@@ -62,8 +61,8 @@ export default {
      form: Object.assign({ 'on_invalid': 'error' }, this.account || {}),
      encryptedFields: ['secret'],
      fields: [
-        [this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
-        [this.$t('Assets'), ['assets']],
+        [this.$t('AccountTemplate'), ['template']],
+        [this.$t('Basic'), ['assets', 'name', 'username', 'privileged', 'su_from', 'su_from_username']],
        [this.$t('Secret'), [
          'secret_type', 'password', 'ssh_key', 'token',
          'access_key', 'passphrase', 'api_key',
@@ -75,16 +74,6 @@ export default {
      hasSaveContinue: false
    }
  },
-  watch: {
-    '$route.query': {
-      handler(nv, ov) {
-        if (nv && (nv.flag === 'move' || nv.flag === 'copy')) {
-          this.isDisabled = true
-        }
-      },
-      immediate: true
-    }
-  },
  async mounted() {
    try {
      await this.getPlatform()
@@ -157,11 +146,7 @@ export default {
        delete form['secret']
      }
      if (this.account?.name) {
-        if (this.account.payload && this.account.payload === 'pam_account_clone') {
-          this.$emit('add', form)
-        } else {
-          this.$emit('edit', form)
-        }
+        this.$emit('edit', form)
      } else {
        this.$emit('add', form)
      }
@@ -173,16 +158,16 @@ export default {
 <style lang='scss' scoped>
 .account-add {
  ::v-deep .el-form-item {
-    //margin-bottom: 5px;
+    margin-bottom: 5px;

    .help-block {
-      //margin-bottom: 5px;
+      margin-bottom: 5px;
    }
  }

  ::v-deep .form-group-header {
    .hr-line-dashed {
-      //margin: 5px 0;
+      margin: 5px 0;
    }

    h3 {
--- a/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
+++ b/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
@@ -1,38 +1,54 @@
 <template v-if="iVisible">
-  <Drawer
+  <Dialog
+    v-if="origin !== 'pam'"
+    :close-on-click-modal="false"
+    :destroy-on-close="true"
+    :show-cancel="false"
+    :show-confirm="false"
    :title="title"
-    :visible="iVisible"
-    class="drawer"
-    @close-drawer="handleCloseDrawer"
+    :visible.sync="iVisible"
+    v-bind="$attrs"
+    width="900px"
+    v-on="$listeners"
  >
-    <Page :title="'null'">
-      <IBox class="content">
-        <AccountCreateUpdateForm
-          v-if="!loading"
-          ref="form"
-          :account="account"
-          :add-template="addTemplate"
-          :asset="asset"
-          @add="addAccount"
-          @edit="editAccount"
-        />
-      </IBox>
-    </Page>
+    <AccountCreateUpdateForm
+      v-if="!loading"
+      ref="form"
+      :account="account"
+      :add-template="addTemplate"
+      :asset="asset"
+      @add="addAccount"
+      @edit="editAccount"
+    />
+  </Dialog>
+
+  <Drawer
+    v-else
+    :title="title"
+    @close-drawer="iVisible = false"
+  >
+    <AccountCreateUpdateForm
+      v-if="!loading"
+      ref="form"
+      :account="account"
+      :add-template="addTemplate"
+      :asset="asset"
+      @add="addAccount"
+      @edit="editAccount"
+    />
  </Drawer>
 </template>

 <script>
 import Drawer from '@/components/Drawer/index.vue'
+import Dialog from '@/components/Dialog/index.vue'
 import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
-import IBox from '@/components/Common/IBox/index.vue'
-import Page from '@/layout/components/Page/index.vue'

 export default {
  name: 'CreateAccountDialog',
  components: {
-    IBox,
    Drawer,
-    Page,
+    Dialog,
    AccountCreateUpdateForm
  },
  props: {
@@ -57,6 +73,10 @@ export default {
      default: function() {
        return this.$t('AddAccount')
      }
+    },
+    origin: {
+      type: String,
+      default: ''
    }
  },
  data() {
@@ -108,27 +128,18 @@ export default {
        }
      }).catch(error => {
        this.iVisible = true
+        console.log(this.iVisible)
+        console.log(this.origin)
        this.handleResult(null, error)
      })
    },
    editAccount(form) {
      const data = { ...form }
-      const flag = this.$route.query.flag
-
-      switch (flag) {
-        case 'copy':
-          this.handleAccountOperation(this.account.id, 'copy-to-assets', data)
-          break
-        case 'move':
-          this.handleAccountOperation(this.account.id, 'move-to-assets', data)
-          break
-        default:
-          this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
-            this.iVisible = false
-            this.$emit('add', true)
-            this.$message.success(this.$tc('UpdateSuccessMsg'))
-          }).catch(error => this.setFieldError(error))
-      }
+      this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
+        this.iVisible = false
+        this.$emit('add', true)
+        this.$message.success(this.$tc('UpdateSuccessMsg'))
+      }).catch(error => this.setFieldError(error))
    },
    handleResult(resp, error) {
      let bulkCreate = !this.asset
@@ -181,29 +192,7 @@ export default {
          refsAutoDataForm.setFieldError(current, err)
        }
      }
-    },
-    handleCloseDrawer() {
-      this.iVisible = false
-      // Reflect.deleteProperty(this.$route.query, 'flag')
-    },
-    handleAccountOperation(id, path, data) {
-      this.$axios.post(`/api/v1/accounts/accounts/${id}/${path}/`, data).then((res) => {
-        this.iVisible = false
-        this.$emit('add', true)
-        this.handleResult(res, null)
-      }).catch(error => this.handleResult(null, error))
    }
  }
 }
 </script>
-
-<style lang="scss" scoped>
-.drawer {
-  ::v-deep .el-drawer__body {
-
-    .el-form {
-      margin-right: 30px;
-    }
-  }
-}
-</style>
--- a/src/components/Apps/AccountListTable/AccountList.vue
+++ b/src/components/Apps/AccountListTable/AccountList.vue
@@ -1,8 +1,7 @@
 <template>
  <div>
-    <DrawerListTable
+    <ListTable
      ref="ListTable"
-      :detail-drawer="detailDrawer"
      :header-actions="headerActions"
      :quick-filters="quickFilters"
      :table-config="tableConfig"
@@ -22,13 +21,24 @@
    <AccountCreateUpdate
      v-if="showAddDialog"
      :account="account"
-      :add-template="addTemplate"
+      :origin="origin"
      :asset="iAsset"
      :title="accountCreateUpdateTitle"
      :visible.sync="showAddDialog"
      @add="addAccountSuccess"
      @bulk-create-done="showBulkCreateResult($event)"
    />
+    <AccountCreateUpdate
+      v-if="showAddTemplateDialog"
+      :account="account"
+      :origin="origin"
+      :add-template="true"
+      :asset="iAsset"
+      :title="accountCreateByTemplateTitle"
+      :visible.sync="showAddTemplateDialog"
+      @add="addAccountSuccess"
+      @bulk-create-done="showBulkCreateResult($event)"
+    />
    <ResultDialog
      v-if="showResultDialog"
      :result="createAccountResults"
@@ -41,42 +51,31 @@
      v-bind="updateSelectedDialogSetting"
      @update="handleAccountBulkUpdate"
    />
-    <PasswordHistoryDialog
-      v-if="showPasswordHistoryDialog"
-      :account="currentAccountColumn"
-      :visible.sync="showPasswordHistoryDialog"
-    />
  </div>
 </template>

 <script>
-import { mapGetters } from 'vuex'
-import { accountOtherActions, accountQuickFilters, connectivityMeta, isDirectoryServiceAccount } from './const'
-import { openTaskPage } from '@/utils/jms'
+import ListTable from '@/components/Table/ListTable/index.vue'
 import {
-  AccountConnectFormatter,
-  ActionsFormatter,
-  PlatformFormatter,
-  SecretViewerFormatter
+  ActionsFormatter, PlatformFormatter, SecretViewerFormatter
 } from '@/components/Table/TableFormatters'
 import ViewSecret from './ViewSecret.vue'
 import UpdateSecretInfo from './UpdateSecretInfo.vue'
-import ResultDialog from './BulkCreateResultDialog.vue'
 import AccountCreateUpdate from './AccountCreateUpdate.vue'
-import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
-import DrawerListTable from '@/components/Table/DrawerListTable/index.vue'
+import { connectivityMeta } from './const'
+import { openTaskPage } from '@/utils/jms'
+import ResultDialog from './BulkCreateResultDialog.vue'
 import AccountBulkUpdateDialog from '@/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue'

 export default {
  name: 'AccountListTable',
  components: {
-    ViewSecret,
+    AccountBulkUpdateDialog,
    ResultDialog,
-    DrawerListTable,
+    ListTable,
    UpdateSecretInfo,
-    AccountCreateUpdate,
-    PasswordHistoryDialog,
-    AccountBulkUpdateDialog
+    ViewSecret,
+    AccountCreateUpdate
  },
  props: {
    url: {
@@ -129,7 +128,7 @@ export default {
    columnsDefault: {
      type: Array,
      default: () => ([
-        'name', 'username', 'secret', 'asset', 'platform', 'connect'
+        'name', 'username', 'secret', 'asset', 'platform', 'date_updated', 'connect'
      ])
    },
    headerExtraActions: {
@@ -140,33 +139,150 @@ export default {
      type: Object,
      default: () => ({})
    },
-    showQuickFilters: {
-      type: Boolean,
-      default: true
-    },
-    showActions: {
-      type: Boolean,
-      default: true
+    origin: {
+      type: String,
+      default: ''
    }
  },
  data() {
    const vm = this
    return {
-      addTemplate: false,
-      isUpdateAccount: false,
-      currentAccountColumn: {},
-      showPasswordHistoryDialog: false,
      showViewSecretDialog: false,
      showUpdateSecretDialog: false,
      showResultDialog: false,
      showAddDialog: false,
      showAddTemplateDialog: false,
-      detailDrawer: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
      createAccountResults: [],
+      accountCreateUpdateTitle: this.$t('AddAccount'),
+      accountCreateByTemplateTitle: this.$t('AddAccountByTemplate'),
      iAsset: this.asset,
      account: {},
      secretUrl: '',
-      quickFilters: this.showQuickFilters ? accountQuickFilters(this) : [],
+      quickFilters: [
+        {
+          label: '最近(7天)',
+          options: [
+            {
+              label: '最近发现',
+              filter: {
+                latest_discovery: '1'
+              }
+            },
+            {
+              label: '最近被登录',
+              filter: {
+                latest_accessed: '1'
+              }
+            },
+            {
+              label: '最近修改',
+              filter: {
+                latest_updated: '1'
+              }
+            },
+            {
+              label: '最近改密',
+              filter: {
+                latest_secret_changed: '1'
+              }
+            },
+            {
+              label: '最近改密失败',
+              filter: {
+                latest_secret_changed_failed: '1'
+              }
+            }
+          ]
+        },
+        {
+          label: '风险账号',
+          options: [
+            {
+              label: '僵尸账号',
+              filter: {
+                risk: 'zombie'
+              }
+            },
+            {
+              label: '幽灵账号',
+              filter: {
+                risk: 'ghost'
+              }
+            },
+            {
+              label: '弱密码',
+              filter: {
+                risk: 'week_password'
+              }
+            },
+            {
+              label: '空密码',
+              filter: {
+                has_secret: 'false'
+              }
+            },
+            {
+              label: '长时间未改密',
+              filter: {
+                long_time_no_change_secret: 'true'
+              }
+            },
+            {
+              label: '长时间未验证',
+              filter: {
+                long_time_no_verify: 'true'
+              }
+            }
+          ]
+        },
+        {
+          label: '账号类型',
+          options: [
+            {
+              label: '全部',
+              filter: {
+                category: ''
+              }
+            },
+            {
+              label: ' 主机',
+              filter: {
+                category: 'host'
+              }
+            },
+            {
+              label: '数据库',
+              filter: {
+                category: 'database'
+              }
+            },
+            {
+              label: '云',
+              filter: {
+                category: 'cloud'
+              }
+            },
+            {
+              label: '网络设备',
+              filter: {
+                category: 'device'
+              }
+            },
+            {
+              label: 'Web',
+              filter: {
+                category: 'website'
+              }
+            },
+            {
+              label: '其他',
+              filter: {
+                category: 'custom'
+              }
+            }
+          ]
+        }
+      ],
      tableConfig: {
        url: this.url,
        permissions: {
@@ -182,29 +298,21 @@ export default {
        },
        columnsMeta: {
          name: {
-            minWidth: '60px',
-            formatterArgs: {
-              can: () => vm.$hasPerm('accounts.view_account'),
-              getRoute: ({ row }) => ({
-                name: 'AccountDetail',
+            width: '120px',
+            formatter: function(row) {
+              const to = {
+                name: 'AssetAccountDetail',
                params: { id: row.id }
-              }),
-              getTitle: ({ row }) => {
-                let title = row.name
-                if (row.ds && this.asset && this.asset.id !== row.asset.id) {
-                  const dsID = row.ds.id.split('-')[0]
-                  title = `${row.name}@${dsID}`
-                }
-                return title
-              },
-              getDrawerTitle({ row }) {
-                return `${row.username}@${row.asset.name}`
+              }
+              if (vm.$hasPerm('accounts.view_account')) {
+                return <router-link to={to}>{row.name}</router-link>
+              } else {
+                return <span>{row.name}</span>
              }
            }
          },
          secret: {
            formatter: SecretViewerFormatter,
-            width: '130px',
            formatterArgs: {
              secretFrom: 'api',
              hasDownload: false,
@@ -214,47 +322,38 @@ export default {
          connect: {
            label: this.$t('Connect'),
            width: '80px',
-            formatter: AccountConnectFormatter,
-            formatterArgs: {
-              asset: this.asset,
-              can: ({ row }) => {
-                return this.currentUserIsSuperAdmin
-              }
+            formatter: () => {
+              return (
+                <span className='connect'>
+                  <el-button type='primary' size='mini' plain>
+                    <i className='fa fa-desktop'/>
+                  </el-button>
+                </span>
+              )
            }
          },
-          ds: {
-            width: '100px',
-            formatter: (row) => {
-              if (row.ds && row.ds['domain_name']) {
-                return row.ds['domain_name']
+          asset: {
+            formatter: function(row) {
+              const to = {
+                name: 'AssetDetail',
+                params: { id: row.asset.id }
+              }
+              if (vm.$hasPerm('assets.view_asset')) {
+                return <router-link to={to}>{row.asset.name}</router-link>
              } else {
-                return ''
+                return <span>{row.asset.name}</span>
              }
            }
          },
          platform: {
            label: this.$t('Platform'),
-            width: '150px',
            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,19 +381,98 @@ 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)
+              hasDelete: false, // can set function(row, value)
              hasClone: false,
-              canDelete: ({ row }) => vm.$hasPerm('accounts.delete_account') && !isDirectoryServiceAccount(row, this),
+              canClone: true,
              moreActionsTitle: this.$t('More'),
-              extraActions: accountOtherActions(this)
+              extraActions: [
+                {
+                  name: 'View',
+                  title: this.$t('View'),
+                  can: this.$hasPerm('accounts.view_accountsecret'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    // debugger
+                    vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
+                    vm.account = row
+                    vm.showViewSecretDialog = false
+                    setTimeout(() => {
+                      vm.showViewSecretDialog = true
+                    })
+                  }
+                },
+                {
+                  name: 'Update',
+                  title: this.$t('Edit'),
+                  can: this.$hasPerm('accounts.change_account') && !this.$store.getters.currentOrgIsRoot,
+                  callback: ({ row }) => {
+                    const data = {
+                      ...this.asset,
+                      ...row.asset
+                    }
+                    vm.account = row
+                    vm.iAsset = data
+                    vm.showAddDialog = false
+                    vm.accountCreateUpdateTitle = this.$t('UpdateAccount')
+                    setTimeout(() => {
+                      vm.showAddDialog = true
+                    })
+                  }
+                },
+                {
+                  name: 'Test',
+                  title: this.$t('验证密文'),
+                  can: ({ row }) =>
+                    !this.$store.getters.currentOrgIsRoot &&
+                    this.$hasPerm('accounts.verify_account') &&
+                    row.asset['auto_config'].ansible_enabled &&
+                    row.asset['auto_config'].ping_enabled,
+                  callback: ({ row }) => {
+                    this.$axios.post(
+                      `/api/v1/accounts/accounts/tasks/`,
+                      { action: 'verify', accounts: [row.id] }
+                    ).then(res => {
+                      openTaskPage(res['task'])
+                    })
+                  }
+                },
+                {
+                  name: 'ClearSecret',
+                  title: this.$t('ClearSecret'),
+                  can: this.$hasPerm('accounts.change_account'),
+                  type: 'primary',
+                  callback: ({ row }) => {
+                    this.$axios.patch(
+                      `/api/v1/accounts/accounts/clear-secret/`,
+                      { account_ids: [row.id] }
+                    ).then(() => {
+                      this.$message.success(this.$tc('ClearSuccessMsg'))
+                    })
+                  }
+                },
+                {
+                  name: 'SecretHistory',
+                  title: '密文历史'
+                },
+                {
+                  name: 'CopyToOther',
+                  title: '复制到其他资产',
+                  type: 'primary',
+                  divided: true
+                },
+                {
+                  name: 'MoveToOther',
+                  title: '移动到其他资产',
+                  type: 'primary'
+                },
+                {
+                  name: 'Clone',
+                  title: this.$t('Duplicate'),
+                  divided: true
+                }
+              ]
            }
          },
          ...this.columnsMeta
@@ -323,23 +501,7 @@ export default {
            type: 'primary',
            icon: 'plus',
            can: () => {
-              return vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot
-            },
-            callback: () => {
-              setTimeout(() => {
-                vm.iAsset = this.asset
-                vm.account = {}
-                this.addTemplate = false
-                this.showAddDialog = true
-              }, 200)
-            }
-          },
-          {
-            name: 'add-template',
-            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()
@@ -347,7 +509,22 @@ export default {
                vm.iAsset = this.asset
                vm.account = {}
                vm.showAddDialog = true
-                vm.addTemplate = true
+              })
+            }
+          },
+          {
+            name: 'add-template',
+            title: this.$t('TemplateAdd'),
+            has: !(this.platform || this.asset),
+            can: () => {
+              return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
+            },
+            callback: async() => {
+              await this.getAssetDetail()
+              setTimeout(() => {
+                vm.iAsset = this.asset
+                vm.account = {}
+                vm.showAddTemplateDialog = true
              })
            }
          },
@@ -358,7 +535,7 @@ export default {
            name: 'TestSelected',
            title: this.$t('TestSelected'),
            type: 'primary',
-            icon: 'verify',
+            icon: 'fa-link',
            can: ({ selectedRows }) => {
              return selectedRows.length > 0 &&
                ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
@@ -427,18 +604,6 @@ export default {
      }
    }
  },
-  computed: {
-    ...mapGetters(['currentUserIsSuperAdmin']),
-    accountCreateUpdateTitle() {
-      if (this.addTemplate) {
-        return this.$t('AddAccountByTemplate')
-      } else if (this.isUpdateAccount) {
-        return this.$t('UpdateAccount')
-      } else {
-        return this.$t('AddAccount')
-      }
-    }
-  },
  watch: {
    url(iNew) {
      this.$set(this.tableConfig, 'url', iNew)
@@ -446,35 +611,52 @@ export default {
    }
  },
  mounted() {
-    this.setActions()
+    if (this.columns.length > 0) {
+      this.tableConfig.columns = this.columns
+    }
+    if (this.otherActions) {
+      const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
+      for (const item of this.otherActions) {
+        actionColumn.formatterArgs.extraActions.push(item)
+      }
+    }
+    if (this.hasDeleteAction) {
+      this.tableConfig.columnsMeta.actions.formatterArgs.extraActions.push(
+        {
+          name: 'Delete',
+          title: this.$t('Delete'),
+          can: this.$hasPerm('accounts.delete_account'),
+          type: 'primary',
+          callback: ({ row }) => {
+            const msg = this.$t('AccountDeleteConfirmMsg')
+            this.$confirm(msg, this.$tc('Info'), {
+              type: 'warning',
+              confirmButtonClass: 'el-button--danger',
+              beforeClose: async(action, instance, done) => {
+                if (action !== 'confirm') return done()
+                this.$axios.delete(`/api/v1/accounts/accounts/${row.id}/`).then(() => {
+                  done()
+                  this.$refs.ListTable.reloadTable()
+                  this.$message.success(this.$tc('DeleteSuccessMsg'))
+                })
+              }
+            })
+          }
+        }
+      )
+    }
  },
  activated() {
    // 由于组件嵌套较深，有可能导致 Error in activated hook: "TypeError: Cannot read properties of undefined (reading 'getList')" 的问题
-    if (this.tabDeactivated) {
-      setTimeout(() => this.refresh(), 300)
-    }
-  },
-  deactivated() {
-    this.tabDeactivated = true
+    setTimeout(() => {
+      this.refresh()
+    }, 300)
  },
  methods: {
-    setActions() {
-      if (this.columns.length > 0) {
-        this.tableConfig.columns = this.columns
-      }
-      if (this.otherActions) {
-        const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
-        for (const item of this.otherActions) {
-          actionColumn.formatterArgs.extraActions.push(item)
-        }
-      }
-    },
    onUpdateAuthDone(account) {
      Object.assign(this.account, account)
    },
    addAccountSuccess() {
-      // Reflect.deleteProperty(this.$route.query, 'flag')
-      this.isUpdateAccount = false
      this.$refs.ListTable.reloadTable()
    },
    async getAssetDetail() {
@@ -513,8 +695,9 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
+<style lang='scss' scoped>
 .cell a {
  color: var(--color-info);
 }
+
 </style>
--- a/src/components/Apps/AccountListTable/UpdateSecretInfo.vue
+++ b/src/components/Apps/AccountListTable/UpdateSecretInfo.vue
@@ -1,36 +1,44 @@
 <template>
  <Dialog
    :destroy-on-close="true"
-    :show-buttons="false"
    :title="$tc('UpdateAssetUserToken')"
-    :visible.sync="iVisible"
-    width="800px"
+    :visible.sync="visible"
+    width="50"
+    @cancel="handleCancel()"
+    @confirm="handleConfirm()"
    v-on="$listeners"
  >
-    <AutoDataForm
-      :fields="fields"
-      :fields-meta="fieldsMeta"
-      :form="init"
-      :has-reset="false"
-      :has-save-continue="false"
-      :url="''"
-      method="patch"
-      @submit="handleConfirm"
-    />
+    <el-form label-position="right" label-width="90px">
+      <el-form-item :label="$tc('Name')">
+        <el-input v-model="account['asset_name']" readonly />
+      </el-form-item>
+      <el-form-item :label="$tc('Username')">
+        <el-input v-model="account['username']" readonly />
+      </el-form-item>
+      <el-form-item :label="$tc('Password')">
+        <UpdateToken v-model="authInfo.password" />
+      </el-form-item>
+      <el-form-item :label="$tc('SSHSecretKey')">
+        <UploadKey @input="getFile" />
+      </el-form-item>
+      <el-form-item :label="$tc('Passphrase')">
+        <UpdateToken v-model="authInfo.passphrase" />
+      </el-form-item>
+    </el-form>
  </Dialog>
 </template>

 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
+import { UpdateToken, UploadKey } from '@/components/Form/FormFields'
 import { encryptPassword } from '@/utils/crypto'
-import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'

 export default {
  name: 'UpdateSecretInfo',
  components: {
-    AutoDataForm,
-    Dialog
+    Dialog,
+    UploadKey,
+    UpdateToken
  },
  props: {
    account: {
@@ -43,59 +51,49 @@ export default {
    }
  },
  data() {
-    const accountMeta = accountFieldsMeta(this)
    return {
-      fields: [
-        'name', 'secret_type', 'password', 'ssh_key', 'token',
-        'access_key', 'passphrase', 'api_key'
-      ],
-      fieldsMeta: {
-        ...accountMeta,
-        name: {
-          ...accountMeta.name,
-          readonly: true
-        },
-        secret_type: {
-          hidden: () => true
-        }
-      },
-      init: {
-        ...this.account
-      }
-    }
-  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
+      secretInfo: {
+        password: '',
+        private_key: '',
+        passphrase: ''
      }
    }
  },
  methods: {
-    handleConfirm(form) {
-      const secretType = this.account.secret_type.value
-      const data = {
-        secret: encryptPassword(form[secretType])
+    handleConfirm() {
+      const data = {}
+      if (this.secretInfo.password !== '') {
+        data.password = encryptPassword(this.secretInfo.password)
+      }
+      if (this.secretInfo.private_key !== '') {
+        data.private_key = encryptPassword(this.secretInfo.private_key)
+        if (this.secretInfo.passphrase) data.passphrase = this.secretInfo.passphrase
      }
      this.$axios.patch(
        `/api/v1/accounts/accounts/${this.account.id}/`,
        data,
        { disableFlashErrorMsg: true }
      ).then(res => {
+        this.authInfo = { password: '', private_key: '' }
        this.$message.success(this.$tc('UpdateSuccessMsg'))
-        this.iVisible = false
+        this.$emit('updateAuthDone', res)
+        this.$emit('update:visible', false)
      }).catch(err => {
        const errMsg = Object.values(err.response.data).join(', ')
        this.$message.error(this.$tc('UpdateErrorMsg') + ' ' + errMsg)
-        this.iVisible = false
+        this.$emit('update:visible', true)
      })
    },
    handleCancel() {
      this.$emit('update:visible', false)
+    },
+    getFile(file) {
+      this.secretInfo.private_key = file
    }
  }
 }
 </script>
+
+<style scoped>
+
+</style>
--- a/src/components/Apps/AccountListTable/const.js
+++ b/src/components/Apps/AccountListTable/const.js
@@ -1,5 +1,4 @@
 import { ChoicesFormatter } from '@/components/Table/TableFormatters'
-import { openTaskPage } from '@/utils/jms'

 export const connectivityMeta = {
  formatter: ChoicesFormatter,
@@ -23,309 +22,3 @@ export const connectivityMeta = {
  },
  width: '130px'
 }
-
-export function isDirectoryServiceAccount(account, vm) {
-  return vm.asset && vm.asset.id !== account.asset.id
-}
-
-export const accountOtherActions = (vm) => {
-  return [
-    {
-      name: 'View',
-      title: vm.$t('View'),
-      can: vm.$hasPerm('accounts.view_accountsecret'),
-      type: 'primary',
-      order: 1,
-      callback: ({ row }) => {
-        // debugger
-        vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
-        vm.account = row
-        vm.showViewSecretDialog = false
-        setTimeout(() => {
-          vm.showViewSecretDialog = true
-        })
-      }
-    },
-    {
-      name: 'Update',
-      title: vm.$t('Edit'),
-      can: ({ row }) => {
-        return vm.$hasPerm('accounts.change_account') &&
-          !vm.$store.getters.currentOrgIsRoot &&
-          !isDirectoryServiceAccount(row, vm)
-      },
-      callback: ({ row }) => {
-        vm.isUpdateAccount = true
-        const data = {
-          ...vm.asset,
-          ...row.asset
-        }
-        vm.iAsset = data
-        vm.account = row
-        vm.addTemplate = false
-        vm.showAddDialog = false
-        setTimeout(() => {
-          vm.showAddDialog = true
-        })
-      }
-    },
-    {
-      name: 'UpdateSecret',
-      title: vm.$t('EditSecret'),
-      can: ({ row }) => {
-        return vm.$hasPerm('accounts.change_account') &&
-          !vm.$store.getters.currentOrgIsRoot &&
-          !isDirectoryServiceAccount(row, vm)
-      },
-      callback: ({ row }) => {
-        const data = {
-          ...vm.asset,
-          ...row.asset
-        }
-        vm.account = row
-        vm.iAsset = data
-        vm.showUpdateSecretDialog = false
-        vm.accountCreateUpdateTitle = vm.$t('UpdateAccount')
-        setTimeout(() => {
-          vm.showUpdateSecretDialog = true
-        })
-      }
-    },
-    {
-      name: 'Clone',
-      title: vm.$t('Duplicate'),
-      has: () => {
-        return !vm.asset
-      },
-      can: ({ row }) => {
-        return vm.$hasPerm('accounts.add_account') &&
-          !vm.$store.getters.currentOrgIsRoot &&
-          !isDirectoryServiceAccount(row, vm)
-      },
-      callback: ({ row }) => {
-        vm.account = {
-          name: `${row.name} - ${vm.$t('Duplicate').toLowerCase()}`,
-          username: `${row.username} - ${vm.$t('Duplicate').toLowerCase()}`,
-          payload: 'pam_account_clone'
-        }
-        vm.iAsset = vm.asset
-
-        vm.showAddDialog = false
-        setTimeout(() => {
-          vm.showAddDialog = true
-        })
-      }
-    },
-    {
-      name: 'Test',
-      title: vm.$t('VerifySecret'),
-      divided: true,
-      can: ({ row }) =>
-        !vm.$store.getters.currentOrgIsRoot &&
-        vm.$hasPerm('accounts.verify_account') &&
-        row.asset['auto_config'].ansible_enabled &&
-        row.asset['auto_config'].ping_enabled,
-      callback: ({ row }) => {
-        vm.$axios.post(
-          `/api/v1/accounts/accounts/tasks/`,
-          { action: 'verify', accounts: [row.id] }
-        ).then(res => {
-          openTaskPage(res['task'])
-        })
-      }
-    },
-    {
-      name: 'ClearSecret',
-      title: vm.$t('ClearSecret'),
-      can: ({ row }) => {
-        return vm.$hasPerm('accounts.change_account') &&
-          !isDirectoryServiceAccount(row, vm)
-      },
-      type: 'primary',
-      callback: ({ row }) => {
-        vm.$axios.patch(
-          `/api/v1/accounts/accounts/clear-secret/`,
-          { account_ids: [row.id] }
-        ).then(() => {
-          vm.$message.success(vm.$tc('ClearSuccessMsg'))
-        })
-      }
-    },
-    {
-      name: 'SecretHistory',
-      title: vm.$t('HistoryPassword'),
-      can: () => vm.$hasPerm('accounts.view_accountsecret'),
-      type: 'primary',
-      callback: ({ row }) => {
-        vm.account = row
-        vm.currentAccountColumn = row
-        vm.showViewSecretDialog = false
-        vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
-        setTimeout(() => {
-          vm.showViewSecretDialog = true
-        })
-      }
-    },
-    {
-      name: 'CopyToOther',
-      title: vm.$t('CopyToAsset'),
-      type: 'primary',
-      divided: true,
-      can: ({ row }) => {
-        return vm.$hasPerm('accounts.add_account') &&
-          !vm.$store.getters.currentOrgIsRoot &&
-          !isDirectoryServiceAccount(row, vm)
-      },
-      has: () => {
-        return !vm.asset
-      },
-      callback: ({ row }) => {
-        vm.accountCreateUpdateTitle = vm.$t('CopyToOther')
-        vm.$route.query.flag = 'copy'
-        vm.iAsset = vm.asset
-        vm.account = row
-        vm.showAddDialog = true
-      }
-    },
-    {
-      name: 'MoveToOther',
-      title: vm.$t('MoveToAsset'),
-      type: 'primary',
-      can: ({ row }) => {
-        return vm.$hasPerm('accounts.add_account') &&
-          !vm.$store.getters.currentOrgIsRoot &&
-          !isDirectoryServiceAccount(row, vm)
-      },
-      has: () => {
-        return !vm.asset
-      },
-      callback: ({ row }) => {
-        vm.accountCreateUpdateTitle = vm.$t('MoveToOther')
-        vm.$route.query.flag = 'move'
-        vm.iAsset = vm.asset
-        vm.account = row
-        vm.showAddDialog = true
-      }
-    }
-  ]
-}
-
-export const accountQuickFilters = (vm) => [
-  {
-    label: vm.$t('Recent (7 days)'),
-    options: [
-      {
-        label: vm.$t('RecentlyDiscovered'),
-        filter: {
-          latest_discovery: '1'
-        }
-      },
-      {
-        label: vm.$t('RecentlyLoggedIn'),
-        filter: {
-          latest_accessed: '1'
-        }
-      },
-      {
-        label: vm.$t('RecentlyModified'),
-        filter: {
-          latest_updated: '1'
-        }
-      },
-      {
-        label: vm.$t('RecentlyChangedPassword'),
-        filter: {
-          latest_secret_changed: '1'
-        }
-      },
-      {
-        label: vm.$t('RecentPasswordChangeFailed'),
-        filter: {
-          latest_secret_change_failed: '1'
-        }
-      }
-    ]
-  },
-  {
-    label: vm.$t('RiskyAccount'),
-    options: [
-      {
-        label: vm.$t('NoLoginLongTime'),
-        filter: {
-          long_time_no_login: 'true'
-        }
-      },
-      {
-        label: vm.$t('AddAccount'),
-        filter: {
-          risk: 'new_found'
-        }
-      },
-      {
-        label: vm.$t('WeakPassword'),
-        filter: {
-          risk: 'weak_password'
-        }
-      },
-      {
-        label: vm.$t('EmptyPassword'),
-        filter: {
-          has_secret: 'false'
-        }
-      },
-      {
-        label: vm.$t('LongTimePassword'),
-        filter: {
-          long_time_no_change_secret: 'true'
-        }
-      }
-    ]
-  },
-  {
-    label: vm.$t('AccountType'),
-    options: [
-      {
-        label: vm.$t('All'),
-        filter: {
-          category: ''
-        }
-      },
-      {
-        label: vm.$t('Host'),
-        filter: {
-          category: 'host'
-        }
-      },
-      {
-        label: vm.$t('Database'),
-        filter: {
-          category: 'database'
-        }
-      },
-      {
-        label: vm.$t('Cloud'),
-        filter: {
-          category: 'cloud'
-        }
-      },
-      {
-        label: vm.$t('Device'),
-        filter: {
-          category: 'device'
-        }
-      },
-      {
-        label: 'Web',
-        filter: {
-          category: 'web'
-        }
-      },
-      {
-        label: vm.$t('Other'),
-        filter: {
-          category: 'custom'
-        }
-      }
-    ]
-  }
-]
--- a/src/components/Apps/AssetRelationCard/index.vue
+++ b/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>
--- a/src/components/Apps/AssetSelect/dialog.vue
+++ b/src/components/Apps/AssetSelect/dialog.vue
@@ -2,6 +2,7 @@
  <Dialog
    :close-on-click-modal="false"
    :title="$tc('Assets')"
+    :disabled-status="!isLoaded"
    custom-class="asset-select-dialog"
    top="2vh"
    v-bind="$attrs"
@@ -22,8 +23,8 @@
      :url="baseUrl"
      class="tree-table"
      v-bind="$attrs"
-      @loaded="handleTableLoaded"
      v-on="$listeners"
+      @loaded="handleTableLoaded"
    />
  </Dialog>
 </template>
@@ -82,7 +83,7 @@ export default {
          },
          {
            prop: 'address',
-            label: this.$t('Address'),
+            label: this.$t('IpDomain'),
            sortable: 'custom'
          },
          {
--- a/src/components/Apps/AssetSelect/index.vue
+++ b/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,
--- a/src/components/Apps/AssetTreeTable/index.vue
+++ b/src/components/Apps/AssetTreeTable/index.vue
@@ -32,10 +32,6 @@ export default {
      type: String,
      default: '/api/v1/assets/assets/'
    },
-    typeUrl: {
-      type: String,
-      default: '/api/v1/assets/nodes/category/tree/'
-    },
    nodeUrl: {
      type: String,
      default: '/api/v1/assets/nodes/'
@@ -109,9 +105,9 @@ export default {
              showAssets: false,
              showSearch: false,
              customTreeHeaderName: this.$t('TypeTree'),
-              url: this.typeUrl,
+              url: '/api/v1/assets/nodes/category/tree/',
              nodeUrl: this.treeSetting?.nodeUrl || this.nodeUrl,
-              treeUrl: `${this.typeUrl}?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
+              treeUrl: `/api/v1/assets/nodes/category/tree/?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,
              callback: {
                onSelected: (event, treeNode) => this.getAssetsUrl(treeNode)
              }
@@ -142,9 +138,6 @@ export default {
    treeSetting.showDelete = this.$hasPerm('assets.delete_node')
  },
  methods: {
-    reloadTable() {
-      this.$refs.TreeList.reloadTable()
-    },
    setTreeUrlQuery() {
      let str = ''
      for (const key in this.treeUrlQuery) {
--- a/src/components/Apps/BlockedIPs/BlockedIPList.vue
+++ b/src/components/Apps/BlockedIPs/BlockedIPList.vue
@@ -3,7 +3,7 @@
 </template>

 <script>
-import { DrawerListTable as ListTable } from '@/components'
+import ListTable from '@/components/Table/ListTable/index.vue'

 export default {
  name: 'BlockedIPList',
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatInput.vue
@@ -46,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 }
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
@@ -1,74 +1,42 @@
 <template>
-  <div :class="{ 'user-role': isUserRole }" class="chat-item">
-    <div class="chart-item-container">
-      <div class="avatar">
-        <el-avatar
-          :src="isUserRole ? userUrl : chatUrl"
-          class="header-avatar"
-        />
+  <div :class="{'user-role': isUserRole}" class="chat-item">
+    <div class="avatar">
+      <el-avatar :src="isUserRole ? userUrl : chatUrl" class="header-avatar" />
+    </div>
+    <div class="content">
+      <div class="operational">
+        <span class="date">
+          {{ $moment(item.message.create_time).format('YYYY-MM-DD HH:mm:ss') }}
+        </span>
      </div>
-      <div class="content">
-        <div class="operational">
-          <div v-if="!item.message.is_reasoning" class="date">
-            {{
-              $moment(item.message.create_time).format("YYYY-MM-DD HH:mm:ss")
-            }}
-          </div>
-
-          <div v-else class="thinking-time">{{ $i18n.t('DeeplyThoughtAbout') }}</div>
+      <div class="message">
+        <div class="message-content">
+          <span v-if="isSystemError" class="error">
+            {{ item.message.content }}
+          </span>
+          <span v-else class="chat-text">
+            <MessageText :message="item.message" />
+          </span>
        </div>
-        <div :class="item.reasoning ? 'reasoning' : 'message'">
-          <div class="message-content">
-            <div v-if="!item.reasoning">
-              <span v-if="isSystemError" class="error">
-                {{ item.message.content }}
-              </span>
-              <span v-else class="chat-text">
-                <MessageText :message="item.message" />
-              </span>
-            </div>
-
-            <div v-else class="thinking-wrapper">
-              <div class="thinking-content">
-                <!-- eslint-disable-next-line -->
-                <div class="divider"></div>
-                <p>
-                  <MessageText :message="item.reasoning" />
-                </p>
-              </div>
-
-              <div class="thinking-result">
-                <span v-if="isServerError" class="error">
-                  {{ isServerError }}
-                </span>
-                <MessageText :message="item.result" />
-              </div>
-            </div>
-          </div>
-          <div class="action">
-            <el-tooltip
-              v-if="isSystemError && isLoading"
-              :content="$tc('Reconnect')"
-              :open-delay="500"
-              placement="top"
-            >
-              <svg-icon icon-class="refresh" @click="onRefresh" />
-            </el-tooltip>
-            <el-dropdown v-else size="small" @command="handleCommand">
-              <span class="el-dropdown-link">
-                <i class="fa fa-ellipsis-v" />
-              </span>
-              <el-dropdown-menu slot="dropdown">
-                <el-dropdown-item
-                  v-for="i in dropdownOptions"
-                  :key="i.action"
-                  :command="i.action"
-                >
-                  {{ i.label }}
-                </el-dropdown-item>
-              </el-dropdown-menu>
-            </el-dropdown>
-          </div>
+        <div class="action">
+          <el-tooltip
+            v-if="isSystemError && isLoading"
+            :content="$tc('Reconnect')"
+            :open-delay="500"
+            placement="top"
+          >
+            <svg-icon icon-class="refresh" @click="onRefresh" />
+          </el-tooltip>
+          <el-dropdown v-else size="small" @command="handleCommand">
+            <span class="el-dropdown-link">
+              <i class="fa fa-ellipsis-v" />
+            </span>
+            <el-dropdown-menu slot="dropdown">
+              <el-dropdown-item v-for="i in dropdownOptions" :key="i.action" :command="i.action">
+                {{ i.label }}
+              </el-dropdown-item>
+            </el-dropdown-menu>
+          </el-dropdown>
        </div>
      </div>
    </div>
@@ -77,7 +45,7 @@

 <script>
 import MessageText from './MessageText.vue'
-import { mapGetters, mapState } from 'vuex'
+import { mapState } from 'vuex'
 import { copy } from '@/utils/common'
 import { useChat } from '../../useChat.js'
 import { reconnect } from '@/utils/socket'
@@ -97,6 +65,7 @@ export default {
  },
  data() {
    return {
+      chatUrl: require('@/assets/img/chat.png'),
      userUrl: '/api/v1/settings/logo/',
      dropdownOptions: [
        {
@@ -110,26 +79,11 @@ export default {
    ...mapState({
      isLoading: state => state.chat.loading
    }),
-    ...mapGetters([
-      'publicSettings'
-    ]),
    isUserRole() {
      return this.item.message?.role === 'user'
    },
    isSystemError() {
-      return (
-        this.item.type === 'error' && this.item?.role === 'assistant'
-      )
-    },
-    isServerError() {
-      return (this.item.type === 'finish' && this.item.result.content === '')
-        ? this.$i18n.t('ServerBusyRetry')
-        : ''
-    },
-    chatUrl() {
-      return this.publicSettings.CHAT_AI_TYPE === 'gpt'
-        ? require('@/assets/img/chat.png')
-        : require('@/assets/img/deepSeek.png')
+      return this.item.type === 'error' && this.item.message?.role === 'assistant'
    }
  },
  methods: {
@@ -140,7 +94,7 @@ export default {
    },
    handleCommand(value) {
      if (value === 'copy') {
-        copy(this.item.result.content)
+        copy(this.item.message.content)
      }
    }
  }
@@ -150,160 +104,101 @@ export default {
 <style lang="scss" scoped>
 .chat-item {
  display: flex;
-  padding: 0.5rem;
-
-  .chart-item-container {
-    display: flex;
-    gap: 0.5rem;
-
-    .avatar {
-      width: 24px;
-      height: 24px;
-      margin-top: 2px;
-
-      .header-avatar {
-        width: 100%;
-        height: 100%;
-        border-radius: 50%;
-
-        &::v-deep img {
-          background-color: #fff;
-        }
-      }
-    }
-
-    .content {
-      display: flex;
-      flex-direction: column;
-      // gap: 0.5rem;
-      overflow: hidden;
-
-      .operational {
-        display: flex;
-        justify-content: space-between;
-        overflow: hidden;
-
-        .date {
-          padding-top: 5px;
-        }
-
-        .thinking-time {
-          width: 6rem;
-          display: flex;
-          justify-content: center;
-          padding: 5px 10px;
-          border-radius: 0.5rem;
-          background-color: #f5f5f5;
-        }
-
-        .copy {
-          float: right;
-          cursor: pointer;
-        }
-      }
-
-      .reasoning {
-        display: flex;
-        gap: 0.5rem;
-        align-items: flex-end;
-
-        .message-content .thinking-wrapper {
-          display: flex;
-          flex-direction: column;
-          gap: 0.5rem;
-
-          .thinking-content {
-            position: relative;
-            color: #8b8b8b;
-
-            .divider {
-              position: absolute;
-              top: 0;
-              left: 0;
-              height: 100%;
-              border-left: 2px solid #e5e5e5;
-            }
-
-            p {
-              margin: unset;
-              padding-left: 0.5rem;
-
-              ::v-deep p {
-                color: #8b8b8b;
-              }
-            }
-          }
-        }
-      }
-
-      .message {
-        display: -webkit-box;
-
-        .message-content {
-          flex: 1;
-          padding: 6px 10px;
-          border-radius: 2px 12px 12px;
-          background-color: #f0f1f5;
-        }
-
-        .action {
-          .svg-icon {
-            transform: translateY(50%);
-            margin-left: 3px;
-            cursor: pointer;
-          }
-
-          .el-dropdown {
-            height: 32px;
-            line-height: 37px;
-            font-size: 13px;
-
-            .el-dropdown-link {
-              i {
-                padding: 4px 5px;
-                font-size: 15px;
-                color: #8d9091;
-
-                &:hover {
-                  color: #7b8085;
-                }
-              }
-            }
-          }
-        }
-
-        .error {
-          color: red;
-        }
-      }
-    }
-  }
+  padding: 16px 14px 0;

  &:last-child {
    padding-bottom: 16px;
  }

-  &.user-role {
-    flex-direction: row-reverse;
+  .avatar {
+    width: 22px;
+    height: 22px;
+    margin-top: 2px;

-    .chart-item-container {
+    .header-avatar {
+      width: 100%;
+      height: 100%;
+
+      &::v-deep img {
+        background-color: #e5e5e7;
+      }
+    }
+  }
+
+  .content {
+    margin-left: 6px;
+    overflow: hidden;
+
+    .operational {
+      display: flex;
+      justify-content: space-between;
+      overflow: hidden;
+
+      .copy {
+        float: right;
+        cursor: pointer;
+      }
+    }
+
+    .message {
+      display: -webkit-box;
+
+      .message-content {
+        flex: 1;
+        padding: 6px 10px;
+        border-radius: 2px 12px 12px;
+        background-color: #f0f1f5;
+      }
+
+      .action {
+        .svg-icon {
+          transform: translateY(50%);
+          margin-left: 3px;
+          cursor: pointer;
+        }
+
+        .el-dropdown {
+          height: 32px;
+          line-height: 37px;
+          font-size: 13px;
+
+          .el-dropdown-link {
+            i {
+              padding: 4px 5px;
+              font-size: 15px;
+              color: #8d9091;
+
+              &:hover {
+                color: #7b8085
+              }
+            }
+          }
+        }
+      }
+
+      .error {
+        color: red;
+      }
+    }
+  }
+}
+
+.user-role {
+  flex-direction: row-reverse;
+
+  .content {
+    margin-right: 10px;
+
+    .operational {
      flex-direction: row-reverse;
    }

-    .content {
-      margin-right: 10px;
+    .message {
+      flex-direction: row-reverse;

-      .operational {
-        flex-direction: row-reverse;
-      }
-
-      .message {
-        flex-direction: row-reverse;
-
-        .message-content {
-          background-color: var(--menu-hover);
-          border-radius: 12px 2px 12px 12px;
-        }
+      .message-content {
+        background-color: var(--menu-hover);
+        border-radius: 12px 2px 12px 12px;
      }
    }
  }
--- a/src/components/Apps/ChatAi/components/ChitChat/index.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/index.vue
@@ -123,17 +123,7 @@ export default {
        setLoading(true)
        removeLoadingMessageInChat()
        this.conversationId = data.id
-
-        const newFragment = {
-          message: { id: data.message.id, is_reasoning: data.message.is_reasoning },
-          reasoning: { content: data.message.is_reasoning ? data.message.content : '' },
-          result: { content: data.message.is_reasoning ? '' : data.message.content },
-          role: data.message.role,
-          type: data.message.type,
-          create_time: data.message.create_time
-        }
-
-        updateChaMessageContentById(data.message.id, newFragment)
+        updateChaMessageContentById(data.message.id, data)
      }
      if (data.message?.type === 'finish') {
        setLoading(false)
--- a/src/components/Apps/GatewayTestDialog/index.vue
+++ b/src/components/Apps/GatewayTestDialog/index.vue
--- a/src/components/Apps/GrantedAssets/index.vue
+++ b/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'
@@ -87,7 +87,7 @@ export default {
        columnsExclude: ['spec_info'],
        columnsShow: {
          min: ['name', 'address', 'accounts'],
-          default: ['name', 'address', 'platform', 'view_account', 'actions']
+          default: ['name', 'address', 'platform', 'connectivity', 'view_account', 'actions']
        },
        columnsMeta: {
          name: {
--- a/src/components/Apps/ManyJsonTabs/AssetJsonTab.vue
+++ b/src/components/Apps/ManyJsonTabs/AssetJsonTab.vue
@@ -1,26 +1,24 @@
 <template>
-  <TwoCol>
-    <ListTable v-bind="config" />
-  </TwoCol>
+  <el-row :gutter="24">
+    <el-col :md="20" :sm="22">
+      <ListTable v-bind="config" />
+    </el-col>
+  </el-row>
 </template>

 <script>
-import { DrawerListTable as ListTable } from '@/components'
+import ListTable from '@/components/Table/ListTable/index.vue'
 import { toM2MJsonParams } from '@/utils/jms'
-import { DetailFormatter } from '@/components/Table/TableFormatters'
-import TwoCol from '@/layout/components/Page/TwoColPage.vue'

 export default {
  name: 'AssetJsonTab',
  components: {
-    TwoCol,
    ListTable
  },
  props: {
    object: {
      type: Object,
-      default: () => {
-      }
+      default: () => {}
    }
  },
  data() {
@@ -34,18 +32,21 @@ export default {
        },
        tableConfig: {
          url: `/api/v1/assets/assets/?${key}=${value}`,
-          columns: ['name', 'address', 'platform', 'type', 'is_active'],
-          columnsShow: {
-            min: ['name', 'address'],
-            default: ['name', 'address', 'platform']
-          },
+          columns: ['name', 'address', 'platform',
+            'type', 'is_active'
+          ],
          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 +65,7 @@ export default {
  }
 }
 </script>
+
+<style scoped>
+
+</style>
--- a/src/components/Apps/ManyJsonTabs/UserJsonTab.vue
+++ b/src/components/Apps/ManyJsonTabs/UserJsonTab.vue
@@ -1,19 +1,18 @@
 <template>
-  <TwoCol>
-    <ListTable v-bind="config" />
-  </TwoCol>
+  <el-row :gutter="24">
+    <el-col :md="20" :sm="22">
+      <ListTable v-bind="config" />
+    </el-col>
+  </el-row>
 </template>

 <script>
-import { DrawerListTable as ListTable } from '@/components'
+import ListTable from '@/components/Table/ListTable/index.vue'
 import { toM2MJsonParams } from '@/utils/jms'
-import TwoCol from '@/layout/components/Page/TwoColPage.vue'
-import { DetailFormatter } from '@/components/Table/TableFormatters'

 export default {
  name: 'User',
  components: {
-    TwoCol,
    ListTable
  },
  props: {
@@ -35,23 +34,22 @@ export default {
        tableConfig: {
          url: `/api/v1/users/users/?${key}=${value}`,
          columns: [
-            'name', 'username', 'email', 'groups', 'system_roles',
+            'name', 'username', 'groups', 'system_roles',
            'org_roles', 'source', 'is_valid'
          ],
-          columnsShow: {
-            min: ['name', 'username'],
-            default: ['name', 'username', 'email']
-          },
          columnsMeta: {
            name: {
              label: this.$t('Name'),
-              formatter: DetailFormatter,
-              formatterArgs: {
-                getRoute: ({ row }) => {
-                  return {
-                    name: 'UserDetail',
-                    params: { id: row.id }
-                  }
+              width: 85,
+              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 +87,7 @@ export default {
  }
 }
 </script>
+
+<style scoped>
+
+</style>
--- a/src/components/Apps/ResourceActivity/index.vue
+++ b/src/components/Apps/ResourceActivity/index.vue
@@ -1,43 +1,43 @@
 <template>
  <div>
-    <TwoCol>
-      <IBox :title="title" class="block" v-bind="$attrs">
-        <el-timeline>
-          <el-timeline-item
-            v-for="(activity, index) in activities"
-            :key="index"
-            :size="activity.size"
-            :timestamp="activity.timestamp"
-            :type="activity.type"
-            placement="bottom"
-          >
-            {{ activity.content }}
-            <el-link
-              v-if="activity['detail_url']"
-              type="primary"
-              @click.native="onClick(activity)"
+    <el-row :gutter="20">
+      <el-col :md="16" :sm="24" class="resource-activity">
+        <IBox :title="title" class="block" v-bind="$attrs">
+          <el-timeline>
+            <el-timeline-item
+              v-for="(activity, index) in activities"
+              :key="index"
+              :size="activity.size"
+              :timestamp="activity.timestamp"
+              :type="activity.type"
+              placement="bottom"
            >
-              {{ $tc('Detail') }}
-            </el-link>
-          </el-timeline-item>
-        </el-timeline>
-      </IBox>
-    </TwoCol>
+              {{ activity.content }}
+              <el-link
+                v-if="activity['detail_url']"
+                type="primary"
+                @click.native="onClick(activity)"
+              >
+                {{ $tc('Detail') }}
+              </el-link>
+            </el-timeline-item>
+          </el-timeline>
+        </IBox>
+      </el-col>
+    </el-row>
    <DiffDetail ref="DetailDialog" :title="$tc('OperateLog')" />
  </div>
 </template>

 <script>
-import IBox from '@/components/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'
-import TwoCol from '@/layout/components/Page/TwoColPage.vue'

 export default {
  name: 'ResourceActivity',
  components: {
-    TwoCol,
    IBox,
    DiffDetail
  },
--- a/src/components/Apps/UserConfirmDialog/index.vue
+++ b/src/components/Apps/UserConfirmDialog/index.vue
@@ -8,7 +8,7 @@
    :visible.sync="visible"
    class="dialog-content"
    v-bind="$attrs"
-    width="740px"
+    width="600px"
    @confirm="visible = false"
    v-on="$listeners"
  >
@@ -52,28 +52,18 @@
      <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"
          />
-
-          <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' || subTypeSelected === 'email'" style="margin: -1px 0 0 20px;">
+          <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>
@@ -82,24 +72,9 @@
      </el-row>
      <el-row :gutter="24" style="margin: 10px auto;">
        <el-col :md="24" :sm="24">
-          <el-button
-            v-if="subTypeSelected!=='face'"
-            class="confirm-btn"
-            size="mini"
-            type="primary"
-            @click="handleConfirm"
-          >
+          <el-button class="confirm-btn" size="mini" type="primary" @click="handleConfirm">
            {{ this.$t('Confirm') }}
          </el-button>
-          <el-button
-            v-if="subTypeSelected==='face'&&!isFaceCaptureVisible"
-            class="confirm-btn"
-            size="mini"
-            type="primary"
-            @click="handleFaceCapture"
-          >
-            {{ this.$tc('VerifyFace') }}
-          </el-button>
        </el-col>
      </el-row>
    </div>
@@ -138,10 +113,7 @@ export default {
      visible: false,
      callback: null,
      cancel: null,
-      processing: false,
-      isFaceCaptureVisible: false,
-      faceToken: null,
-      faceCaptureUrl: null
+      processing: false
    }
  },
  computed: {
@@ -157,10 +129,6 @@ export default {
  },
  methods: {
    handleSubTypeChange(val) {
-      if (val !== 'face') {
-        this.isFaceCaptureVisible = false
-      }
-
      this.inputPlaceholder = this.subTypeChoices.filter(item => item.name === val)[0]?.placeholder
      this.smsWidth = val === 'sms' ? 6 : 0
    },
@@ -204,8 +172,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
@@ -224,29 +192,6 @@ export default {
        this.$message.error(this.$tc('FailedToSendVerificationCode'))
      })
    },
-    startFaceCapture() {
-      const url = '/api/v1/authentication/face/context/'
-      this.$axios.post(url).then(data => {
-        const token = data['token']
-        this.faceCaptureUrl = '/facelive/capture?token=' + token
-        this.isFaceCaptureVisible = true
-
-        const timer = setInterval(() => {
-          this.$axios.get(url + `?token=${token}`).then(data => {
-            if (data['is_finished']) {
-              clearInterval(timer)
-              this.isFaceCaptureVisible = false
-              this.handleConfirm()
-            }
-          })
-        }, 1000)
-      }).catch(() => {
-        this.$message.error(this.$tc('FailedToStartFaceCapture'))
-      })
-    },
-    handleFaceCapture() {
-      this.startFaceCapture()
-    },
    handleConfirm() {
      if (this.confirmTypeRequired === 'relogin') {
        return this.logout()
@@ -269,8 +214,6 @@ export default {
        })
      }).catch((err) => {
        this.$message.error(err.message || this.$tc('ConfirmFailed'))
-        this.faceCaptureUrl = null
-        this.isFaceCaptureVisible = false
      })
    }
  }
@@ -278,21 +221,21 @@ export default {
 </script>

 <style lang="scss" scoped>
-.dialog-content ::v-deep .el-dialog__footer {
-  padding: 0;
-}
-
-.dialog-content ::v-deep .el-dialog {
-  padding: 8px;
-
-  .el-dialog__body {
-    padding-top: 30px;
-    padding-bottom: 30px;
+  .dialog-content ::v-deep .el-dialog__footer {
+    padding: 0;
  }
-}

-.confirm-btn {
-  width: 100%;
-  line-height: 20px;
-}
+  .dialog-content ::v-deep .el-dialog {
+    padding: 8px;
+
+    .el-dialog__body {
+      padding-top: 30px;
+      padding-bottom: 30px;
+    }
+  }
+
+  .confirm-btn {
+    width: 100%;
+    line-height: 20px;
+  }
 </style>
--- a/src/components/Apps/VariableCreateUpdateForm/index.vue
+++ b/src/components/Apps/VariableCreateUpdateForm/index.vue
@@ -1,133 +0,0 @@
-<template>
-  <AutoDataForm
-    ref="AutoDataForm"
-    class="variable-add"
-    :submit-btn-text="submitBtnText"
-    v-bind="$data"
-    @submit="confirm"
-  />
-</template>
-
-<script>
-import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
-
-export default {
-  name: 'VariableCreateForm',
-  components: {
-    AutoDataForm
-  },
-  props: {
-    variable: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    const defaultValidator = (rule, value, callback) => {
-      if (this.defaultValueRequired && !value) {
-        callback(new Error(this.$t('FieldRequiredError')))
-      } else {
-        callback()
-      }
-    }
-    return {
-      defaultValueRequired: false,
-      submitBtnText: this.$t('Confirm'),
-      url: '/api/v1/ops/variables/',
-      form: Object.assign({ 'on_invalid': 'error' }, this.variable || {}),
-      fields: [
-        ['', ['name', 'var_name', 'type', 'text_default_value', 'select_default_value', 'extra_args', 'tips', 'required']]
-      ],
-      fieldsMeta: {
-        text_default_value: {
-          label: this.$t('DefaultValue'),
-          hidden: (formValue) => {
-            return formValue.type !== 'text'
-          },
-          rules: [{ validator: defaultValidator }],
-          helpTip: this.$t('DefaultValueTip'),
-          el: {
-            type: 'input'
-          }
-        },
-        select_default_value: {
-          label: this.$t('DefaultValue'),
-          helpTip: this.$t('DefaultValueTip'),
-          hidden: (formValue) => {
-            return formValue.type !== 'select'
-          },
-          rules: [{ validator: defaultValidator }],
-          el: { type: 'input' }
-        },
-        extra_args: {
-          hidden: (formValue) => {
-            return formValue.type !== 'select'
-          },
-          el: { type: 'textarea', rows: 4, placeholder: this.$t('ExtraArgsPlaceholder') },
-          rules: [
-            {
-              validator: (rule, value, callback) => {
-                try {
-                  const lines = value.split('\n')
-                  const regex = /^[^:]+:[^:]+$/
-                  for (const line of lines) {
-                    if (!regex.test(line.trim())) {
-                      callback(new Error(this.$t('ExtraArgsFormatError')))
-                    }
-                  }
-                } catch (e) {
-                  callback(new Error(this.$t('ExtraArgsFormatError')))
-                }
-                callback()
-              }
-            }
-          ]
-        },
-        required: {
-          on: {
-            change: ([event], updateForm) => {
-              this.defaultValueRequired = event
-            }
-          }
-        }
-      },
-      hasSaveContinue: false,
-      method: 'get'
-    }
-  },
-  mounted() {
-    this.defaultValueRequired = this.variable?.required || false
-  },
-  methods: {
-    confirm(form) {
-      if (this.variable?.name) {
-        this.$emit('edit', form)
-      } else {
-        this.$emit('add', form)
-      }
-    }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-.variable-add {
-  ::v-deep .el-form-item {
-    margin-bottom: 5px;
-
-    .help-block {
-      margin-bottom: 5px;
-    }
-  }
-
-  ::v-deep .form-group-header {
-    .hr-line-dashed {
-      margin: 5px 0;
-    }
-
-    h3 {
-      margin-bottom: 10px;
-    }
-  }
-}
-</style>
--- a/src/components/Apps/VariableSetForm/index.vue
+++ b/src/components/Apps/VariableSetForm/index.vue
@@ -1,74 +0,0 @@
-<template>
-  <AutoDataForm
-    ref="AutoDataForm"
-    class="variable-set"
-    :submit-btn-text="submitBtnText"
-    v-bind="$data"
-    :fields="fields"
-    @submit="confirm"
-  />
-</template>
-
-<script>
-import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
-
-export default {
-  name: 'VariableSetForm',
-  components: {
-    AutoDataForm
-  },
-  props: {
-    formData: {
-      type: Array,
-      default: () => ([])
-    },
-    queryParam: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      submitBtnText: this.$t('Confirm'),
-      // 防止缓存form remoteMeta
-      url: `/api/v1/ops/variables/form-data/?t=${new Date().getTime()}&` + this.queryParam,
-      form: {},
-      hasSaveContinue: false,
-      method: 'get',
-      hasReset: false
-    }
-  },
-  computed: {
-    fields() {
-      return [['', this.formData.map(item => item.var_name)]]
-    }
-  },
-  methods: {
-    confirm(form) {
-      this.$emit('confirm', form)
-    }
-  }
-}
-</script>
-
-<style lang='scss' scoped>
-.variable-set {
-  ::v-deep .el-form-item {
-    margin-bottom: 5px;
-
-    .help-block {
-      margin-bottom: 5px;
-    }
-  }
-
-  ::v-deep .form-group-header {
-    .hr-line-dashed {
-      margin: 5px 0;
-    }
-
-    h3 {
-      margin-bottom: 10px;
-    }
-  }
-}
-</style>
--- a/src/components/Cards/DetailCard/ItemValue.vue
+++ b/src/components/Cards/DetailCard/ItemValue.vue
@@ -78,7 +78,7 @@ export default {
        formatterData = data
      }
      return (
-        <span style={{ whiteSpace: 'pre-wrap', wordBreak: 'break-word', lineHeight: '1.2' }}>{formatterData}</span>
+        <span>{formatterData}</span>
      )
    }
    if (this.value instanceof Array) {
@@ -92,7 +92,7 @@ export default {
      )
    }
    return (
-      <span style='white-space: pre-wrap;' title={this.displayValue}>{this.displayValue}</span>
+      <span title={this.displayValue}>{this.displayValue}</span>
    )
  }
 }
--- a/src/components/Cards/DetailCard/auto.vue
+++ b/src/components/Cards/DetailCard/auto.vue
@@ -1,12 +1,7 @@
 <template>
  <IBox v-if="loading" style="width: 100%; height: 200px" />
  <div v-else>
-    <DetailCard
-      v-if="hasObject && items.length > 0"
-      :items="validItems"
-      :loading="loading"
-      v-bind="$attrs"
-    />
+    <DetailCard v-if="hasObject && items.length > 0" :items="validItems" :loading="loading" v-bind="$attrs" />
  </div>
 </template>

@@ -14,7 +9,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 {
@@ -37,7 +32,7 @@ export default {
      type: Array,
      default: null
    },
-    showUndefined: {
+    showUndefine: {
      type: Boolean,
      default: true
    },
@@ -173,7 +168,7 @@ export default {
      const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
      let remoteMeta = data.actions['GET'] || {}
      if (this.nested) {
-        remoteMeta = remoteMeta[this.nested]?.children || remoteMeta || {}
+        remoteMeta = remoteMeta[this.nested]?.children || {}
      }
      let fields = this.fields
      fields = fields || Object.keys(remoteMeta)
@@ -225,7 +220,7 @@ export default {
        value = this.parseValue(value, fieldMeta.type)

        if (value === undefined) {
-          if (this.showUndefined) {
+          if (this.showUndefine) {
            value = '-'
          } else {
            continue
--- a/src/components/Cards/DetailCard/index.vue
+++ b/src/components/Cards/DetailCard/index.vue
@@ -1,25 +1,24 @@
 <template>
  <IBox :fa="fa" :title="title">
-    <el-form :label-width="labelWidth" class="content detail-card" label-position="left">
-      <template v-for="item in items">
-        <div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
-          <span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
-          <span class="item-value el-form-item__content">
-            <template
-              :is="item.component"
-              v-if="item.component"
-              v-bind="{...item}"
-            />
-            <ItemValue v-else :value="item.value" v-bind="item" />
-          </span>
-        </div>
-      </template>
+    <el-form :label-width="labelWidth" class="content" label-position="left">
+      <span v-for="item in items" :key="item.key">
+        <el-form-item v-if="item.has !== false" :class="item.class" :label="item.key">
+          <span slot="label"> {{ formateLabel(item.key) }}</span>
+          <span
+            :is="item.component"
+            v-if="item.component"
+            v-bind="{...item}"
+          />
+          <ItemValue v-else :value="item.value" class="item-value" v-bind="item" />
+        </el-form-item>
+      </span>
    </el-form>
+    <slot />
  </IBox>
 </template>

 <script>
-import IBox from '@/components/Common/IBox/index.vue'
+import IBox from '../../IBox/index.vue'
 import ItemValue from './ItemValue.vue'

 export default {
@@ -46,7 +45,7 @@ export default {
    },
    labelWidth: {
      type: String,
-      default: '120px'
+      default: '25%'
    }
  },
  data() {
@@ -72,76 +71,55 @@ export default {
  padding: 20px 40px;
 }

-.content {
-  font-size: 13px;
-  line-height: 2;
+.el-form-item {
+  border-bottom: 1px dashed #EBEEF5;
+  padding: 1px 0;
+  margin-bottom: 0;

-  ::v-deep .el-form-item {
-    border-bottom: 1px dashed #F4F4F4;
-    padding: 1px 0;
-    margin-bottom: 0;
-    display: flex;
-    align-items: center;
-    //text-align: end;
-    line-height: 32px;
-    min-height: 32px;
+  &:last-child {
+    border-bottom: none;
+  }

-    &:last-child {
-      //border-bottom: none;
+  &.array-item {
+    border-bottom: none;
+
+    ::v-deep .el-form-item__content {
+      border-bottom: 1px dashed #EBEEF5
    }

-    &.array-item {
-      border-bottom: none;
-
-      ::v-deep .el-form-item__content {
-        border-bottom: 1px dashed #EBEEF5
-      }
-
-      ::v-deep .el-form-item__label:last-child {
-        border: 1px dashed #EBEEF5;
-      }
-    }
-
-    .el-form-item__label {
-      //padding-right: 8%;
-      overflow: hidden;
-      color: var(--color-icon-primary);
-      font-size: 12px;
-      line-height: 1.5;
-      font-weight: 400;
-      width: 33%;
-      min-width: 120px;
-      padding: 5px 0;
-
-      span {
-        display: inline-block;
-        //line-height: 1.1;
-      }
-    }
-
-    .el-form-item__content {
-      color: var(--color-text-primary);
-      font-size: 13px;
-      line-height: 1.5;
-      width: calc(100% - 120px);
-      padding: 5px 0;
-    }
-
-    ::v-deep .el-tag--mini {
-      margin-right: 3px;
+    ::v-deep .el-form-item__label:last-child {
+      border: 1px dashed #EBEEF5;
    }
  }

-  .item-value {
-    ::v-deep span {
-      //display: -webkit-box;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      word-break: break-word;
-      -webkit-line-clamp: 2;
-      -webkit-box-orient: vertical;
-      vertical-align: middle;
+  ::v-deep .el-form-item__label {
+    padding-right: 8%;
+    overflow: hidden;
+    color: var(--color-icon-primary);
+
+    span {
+      display: inline-block;
+      line-height: 1.5;
    }
  }
+
+  ::v-deep .el-form-item__content {
+    color: var(--color-text-primary);
+    font-size: 13px;
+    line-height: 40px;
+  }
+
+  ::v-deep .el-tag--mini {
+    margin-right: 3px;
+  }
+}
+
+.item-value span {
+  word-break: break-word;
+}
+
+.content {
+  font-size: 13px;
+  line-height: 2.5;
 }
 </style>
--- a/src/components/Cards/RelationCard/index.vue
+++ b/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 {
@@ -340,13 +340,13 @@ b, strong {
 }

 tr td {
-  line-height: 1.4;
-  padding: 8px 0;
+  line-height: 1.42857;
+  padding: 8px;
  vertical-align: top;
 }

 tr.item td {
-  border-top: 1px dashed #EBEEF5;
+  border-top: 1px solid #e7eaec;
 }

 .box-margin {
--- a/src/components/Cards/SummaryCard/index.vue
+++ b/src/components/Cards/SummaryCard/index.vue
@@ -1,19 +1,12 @@
 <template>
  <div>
    <div class="summary-header">
-      <el-tooltip :content="title" :open-delay="500" placement="top">
-        <span class="title">{{ title }}</span>
-      </el-tooltip>
+      <span class="title">{{ title }}</span>
    </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 class="num" @click="handleClick">
+          {{ iCount }}
        </span>
      </h3>
    </slot>
@@ -21,6 +14,7 @@
 </template>

 <script>
+
 export default {
  name: 'SummaryCard',
  props: {
@@ -28,18 +22,18 @@ export default {
      type: String,
      default: ''
    },
+    body: {
+      type: Object,
+      default: () => ({})
+    },
    count: {
-      type: [Number, String, Promise],
-      default: null
+      type: [Number, String],
+      default: 0
    },
    route: {
      type: [String, Object],
      default: ''
    },
-    canDirect: {
-      type: Boolean,
-      default: false
-    },
    callback: {
      type: Function,
      default: () => {
@@ -53,13 +47,24 @@ export default {
  data() {
    return {}
  },
+  computed: {
+    iCount() {
+      return this.body.count || this.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)()
@@ -72,10 +77,6 @@ export default {
 <style lang="scss" scoped>
 .summary-header {
  //color: var(--color-icon-primary);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  cursor: pointer;

  .title {
    font-style: normal;
@@ -97,7 +98,7 @@ export default {
    color: var(--color-text-primary);
    cursor: pointer;

-    &.can-direct:hover {
+    &:hover {
      color: var(--color-primary);
    }
  }
--- a/src/components/Common/DataActions/index.vue
+++ b/src/components/Common/DataActions/index.vue
@@ -5,28 +5,15 @@
        v-if="action.dropdown"
        v-show="action.dropdown.length > 0"
        :key="action.name"
-        :class="[action.name, {grouped: action.grouped }]"
-        :size="action.size"
-        :split-button="!!action.split"
-        :type="action.type"
        class="action-item"
        placement="bottom-start"
        trigger="click"
-        @click="handleClick(action)"
        @command="handleDropdownCallback"
      >
-        <span v-if="action.split">
-          {{ action.title }}
-        </span>
-        <el-button
-          v-else
-          :class="action.name"
-          :size="size"
-          class="more-action"
-          v-bind="{...cleanButtonAction(action), icon: ''}"
-        >
-          <span class="pre-icon">
-            <Icon v-if="action.icon" :icon="action.icon" />
+        <el-button :size="size" class="more-action" v-bind="cleanButtonAction(action)">
+          <span v-if="action.icon && !action.icon.startsWith('el-')" class="pre-icon">
+            <i v-if="action.icon.startsWith('fa')" :class="'fa fa-fw ' + action.icon" />
+            <svg-icon v-else :icon-class="action.icon" />
          </span>
          <span v-if="action.title">
            {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
@@ -56,8 +43,9 @@
                class="dropdown-item"
                v-bind="{...option, icon: ''}"
              >
-                <span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
-                  <Icon v-if="option.icon" :icon="option.icon" />
+                <span v-if="option.icon" class="pre-icon">
+                  <i v-if="option.icon.startsWith('fa')" :class="'fa fa-fw ' + option.icon" />
+                  <svg-icon v-else :icon-class="option.icon" />
                </span>
                {{ option.title }}
              </el-dropdown-item>
@@ -69,16 +57,16 @@
      <el-button
        v-else
        :key="action.name"
-        :class="[action.name, {grouped: action.grouped }]"
        :size="size"
        class="action-item"
-        v-bind="{...cleanButtonAction(action), icon: ''}"
+        v-bind="{...cleanButtonAction(action), icon: action.icon && action.icon.startsWith('el-') ? action.icon : ''}"
        @click="handleClick(action)"
      >
-        <el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
+        <el-tooltip :content="action.tip" :disabled="!action.tip" :open-delay="500" placement="top">
          <span>
-            <span v-if="action.icon" style="vertical-align: initial">
-              <Icon :icon="action.icon" />
+            <span v-if="action.icon && !action.icon.startsWith('el-')" style="vertical-align: initial">
+              <i v-if="action.icon.startsWith('fa')" :class="'fa ' + action.icon" />
+              <svg-icon v-else :icon-class="action.icon" />
            </span>
            {{ action.title }}
          </span>
@@ -90,13 +78,9 @@

 <script>
 import { toSentenceCase } from '@/utils/common'
-import Icon from '@/components/Widgets/Icon/index.vue'

 export default {
  name: 'DataActions',
-  components: {
-    Icon
-  },
  props: {
    grouped: {
      type: Boolean,
@@ -121,9 +105,6 @@ export default {
    }
  },
  methods: {
-    actionsHasIcon(actions) {
-      return actions.some(action => action.icon)
-    },
    hasIcon(action, type = '') {
      const icon = action.icon
      if (!icon) {
@@ -181,7 +162,6 @@ export default {
      delete action['callback']
      delete action['name']
      delete action['can']
-      delete action['split']
      return action
    },
    cleanActions(actions) {
@@ -211,10 +191,6 @@ export default {
        }
        delete action['can']

-        if (!action.size) {
-          action.size = 'small'
-        }
-
        if (action.dropdown) {
          action.dropdown = this.cleanActions(action.dropdown)
        }
@@ -239,10 +215,6 @@ $color-drop-menu-border: #e4e7ed;
  .action-item {
    margin-left: 5px;

-    &.grouped {
-      margin-left: 0;
-    }
-
    &:first-child {
      margin-left: 0;
    }
@@ -283,16 +255,14 @@ $color-drop-menu-border: #e4e7ed;
  align-items: flex-end;

  .el-button {
-    padding: 2px 5px;
+    display: flex;
+    align-items: center;
+    padding: 2px 6px;

    &:not(.is-plain) {
      color: $btn-text-color;
    }

-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-
    * {
      vertical-align: baseline !important;
    }
@@ -319,6 +289,7 @@ $color-drop-menu-border: #e4e7ed;
 // 下拉 options
 .el-dropdown-menu {
  ::v-deep .more-batch-processing {
+    text-align: center;

    &:hover {
      background-color: transparent !important;
@@ -341,7 +312,6 @@ $color-drop-menu-border: #e4e7ed;

  .dropdown-item {
    color: var(--color-text-primary);
-    line-height: 34px;

    .pre-icon {
      width: 17px;
@@ -363,8 +333,6 @@ $color-drop-menu-border: #e4e7ed;
  }

  .el-dropdown-menu__item {
-    padding: 0 20px;
-
    &.is-disabled {
      color: var(--color-disabled);
      cursor: not-allowed;
--- a/src/components/Dialog/DiffDetail.vue
+++ b/src/components/Dialog/DiffDetail.vue
@@ -1,7 +1,6 @@
 <template>
  <Dialog
    v-if="detailVisible"
-    :modal="false"
    :show-cancel="false"
    :show-confirm="false"
    :title="title"
--- a/src/components/Dialog/ProcessingDialog.vue
+++ b/src/components/Dialog/ProcessingDialog.vue
@@ -1,12 +1,9 @@
 <template>
  <Dialog
-    :show-cancel="false"
    :visible="iVisible"
-    class="processing-dialog"
    height="300"
-    :title="$tc('Processing')"
+    title="Processing"
    width="300"
-    @confirm="iVisible=false"
  >
    <div id="load">
      <div class="spinner" />
@@ -43,19 +40,13 @@ export default {
 </script>

 <style lang="scss" scoped>
-.processing-dialog {
-  ::v-deep .el-dialog__body {
-    overflow: hidden;
-  }
-}
-
 .spinner {
-  width: 100px;
-  height: 100px;
-  border: 5px solid rgba(0, 0, 0, 0.1);
-  border-radius: 50%;
-  border-top-color: var(--color-primary);
-  animation: spin 1s infinite linear;
+    width: 100px;
+    height: 100px;
+    border: 5px solid rgba(0, 0, 0, 0.1);
+    border-radius: 50%;
+    border-top-color: #3498db;
+    animation: spin 1s infinite linear;
 }

 #load {
@@ -64,8 +55,8 @@ export default {
 }

@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
+    to {
+        transform: rotate(360deg);
+    }
 }
 </style>
--- a/src/components/Dialog/RemoteProcessingDialog.vue
+++ b/src/components/Dialog/RemoteProcessingDialog.vue
@@ -1,69 +0,0 @@
-<template>
-  <Dialog
-    :visible="iVisible"
-    height="300"
-    title="Processing"
-    width="300"
-    class="processing-dialog"
-  >
-    <div id="load">
-      <div class="spinner" />
-    </div>
-  </Dialog>
-</template>
-
-<script>
-import Dialog from './index.vue'
-
-export default {
-  name: 'RemoteProcessingDialog',
-  components: { Dialog },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    }
-  },
-  data() {
-    return {}
-  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.processing-dialog {
-  ::v-deep .el-dialog__body {
-    overflow: hidden;
-  }
-}
-
-.spinner {
-    width: 100px;
-    height: 100px;
-    border: 5px solid rgba(0, 0, 0, 0.1);
-    border-radius: 50%;
-    border-top-color: var(--color-primary);
-    animation: spin 1s infinite linear;
-}
-
-#load {
-  display: flex;
-  justify-content: center;
-}
-
-@keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
-}
-</style>
--- a/src/components/Dialog/ReportDialog.vue
+++ b/src/components/Dialog/ReportDialog.vue
@@ -1,75 +0,0 @@
-<template>
-  <div>
-    <Dialog
-      v-if="iVisible"
-      :destroy-on-close="true"
-      :show-cancel="false"
-      :show-confirm="false"
-      :title="$tc('Report')"
-      :visible.sync="iVisible"
-      top="35vh"
-      width="80%"
-      @close="loading=true"
-    >
-      <span v-if="loading" v-loading="loading" class="loading" />
-      <iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
-    </Dialog>
-  </div>
-</template>
-
-<script>
-import Dialog from '@/components/Dialog/index.vue'
-
-export default {
-  name: 'ReportDialog',
-  components: {
-    Dialog
-  },
-  props: {
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    url: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      loading: true
-    }
-  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
-  },
-  mounted() {
-  },
-  beforeMount() {
-  },
-  methods: {
-    onIframeLoad() {
-      this.loading = false
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-iframe {
-  width: 100%;
-  height: 500px;
-}
-
-.loading {
-  margin-top: 20px;
-  display: block;
-}
-</style>
--- a/src/components/Dialog/index.vue
+++ b/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,14 +79,11 @@ export default {
    maxWidth: {
      type: String,
      default: '1200px'
-    },
-    shadow: {
-      type: Boolean,
-      default: true
    }
  },
  data() {
-    return {}
+    return {
+    }
  },
  computed: {
    iWidth() {
@@ -106,69 +102,58 @@ 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);
-
-  .form-group-header {
-    margin-left: 20px;
-  }
-
-  .el-form--label-top {
-    .form-group-header {
-      margin-left: 0;
-    }
-  }
-
-  .el-icon-circle-check {
-    display: none;
-  }
-
-  &__header {
-    box-sizing: border-box;
-    padding: 15px 22px;
-    border-bottom: 1px solid #dee2e6;
-    font-weight: 400;
-  }
-
-  &__body {
-    padding: 20px 30px;
-    font-size: 13px;
-
-    &:has(.el-table) {
-      background: #f3f3f4;
-    }
-  }
-
-  &__footer {
-    border-top: 1px solid #dee2e6;
-    padding: 16px 25px;
-    justify-content: flex-end;
-  }
-}
-
-@media (max-width: 900px) {
  .dialog ::v-deep .el-dialog {
-    max-width: calc(100% - 30px);
+    border-radius: 0.3em;
+    max-width: min(100vw, 1500px);
+
+    .form-group-header {
+      margin-left: 20px;
+    }
+
+    .el-icon-circle-check {
+      display: none;
+    }
+
+    &__header {
+      box-sizing: border-box;
+      padding: 15px 22px;
+      border-bottom: 1px solid #dee2e6;
+      font-weight: 400;
+    }
+
+    &__body {
+      padding: 20px 30px;
+
+      &:has(.el-table) {
+        background: #f3f3f4;
+      }
+    }
+
+    &__footer {
+      border-top: 1px solid #dee2e6;
+      padding: 16px 25px;
+      justify-content: flex-end;
+    }
  }
-}

-.dialog-footer ::v-deep button.el-button {
-  font-size: 13px;
-  padding: 8px 12px;
-}
+  @media (max-width: 900px) {
+    .dialog ::v-deep .el-dialog {
+      max-width: calc(100% - 30px);
+    }
+  }

-.dialog-fade-enter-active, .dialog-fade-leave-active {
-  transition: opacity 1s ease;
-}
+  .dialog-footer ::v-deep button.el-button {
+    font-size: 13px;
+    padding: 8px 12px;
+  }

-.dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
-{
-  opacity: 0;
-}
+  .dialog-fade-enter-active, .dialog-fade-leave-active {
+    transition: opacity 1s ease;
+  }
+
+  .dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
+  {
+    opacity: 0;
+  }

 </style>
--- a/src/components/Drawer/index.vue
+++ b/src/components/Drawer/index.vue
@@ -1,305 +1,106 @@
 <template>
  <el-drawer
    ref="drawer"
-    v-el-drawer-drag-width
-    :append-to-body="true"
-    :before-close="handleClose"
-    :class="['drawer', { 'drawer__no-footer': !hasFooter }]"
-    :modal="modal"
-    :size="size"
-    :title="title"
-    :visible.sync="iVisible"
-    custom-class="drawer"
-    destroy-on-close
+    size="61.8%"
    direction="rtl"
-    v-on="$listeners"
+    custom-class="drawer"
+    :title="title"
+    :before-close="handleClose"
+    :visible.sync="dialog"
+    :wrapper-closable="true"
  >
    <div class="drawer__content">
-      <slot name="default">
-        <component
-          :is="component"
-          v-if="component"
-          ref="dynamicComponent"
-          v-bind="componentProps"
-          v-on="componentListeners"
-        />
-      </slot>
+      <slot name="default" />
    </div>
-    <div v-if="hasFooter" ref="drawerFooter" class="drawer__footer" />
  </el-drawer>
 </template>

 <script>
-import { getDrawerWidth } from '@/utils/common'
-
 export default {
  props: {
    title: {
      type: String,
-      default: ''
-    },
-    size: {
-      type: String,
-      default: () => {
-        return getDrawerWidth()
+      default: function() {
+        return this.$t('AddAccount')
      }
-    },
-    component: {
-      type: [String, Function, Object],
-      default: ''
-    },
-    componentProps: {
-      type: Object,
-      default: () => ({})
-    },
-    componentListeners: {
-      type: Object,
-      default: () => ({})
-    },
-    visible: {
-      type: Boolean,
-      default: false
-    },
-    modal: {
-      type: Boolean,
-      default: true
-    },
-    hasFooter: {
-      type: Boolean,
-      default: false
    }
  },
  data() {
    return {
+      dialog: true,
      loading: false,
      formLabelWidth: '80px'
    }
  },
-  computed: {
-    iVisible: {
-      get() {
-        return this.visible
-      },
-      set(val) {
-        this.$emit('update:visible', val)
-      }
-    }
-  },
-  mounted() {
-  },
  methods: {
    handleClose(done) {
      this.$emit('close-drawer')
      done()
+    },
+    cancelForm() {
+      this.loading = false
+      this.dialog = false
    }
  }
 }
 </script>

-<style lang='scss' scoped>
-.drawer__no-footer {
-  ::v-deep {
-    .drawer {
-      .page {
-        height: calc(100vh - 55px);
-      }
-    }
-  }
-}
+<style scoped lang='scss'>
+::v-deep .drawer {
+  min-width: 565px;

-@media (max-width: 992px) {
-  .drawer ::v-deep {
-    .el-form-item {
-      display: flex;
-      flex-direction: column;
-      gap: 0.3rem;
-    }
-  }
-}
+  .el-drawer__header {
+    margin-bottom: 20px;

-.drawer {
-  ::v-deep {
-    min-width: 565px;
-
-    .el-card__body {
-      padding-top: 10px;
-      padding-bottom: 20px;
-    }
-
-    .page-submenu {
-      .el-tabs__header {
-        padding: 0 15px;
-      }
-
-      .el-tabs__item.is-top {
-        padding: 0 10px;
-      }
-    }
-
-    .form-buttons {
-      margin-left: 13px;
-    }
-
-    .el-form {
-      margin-right: 1px;
-      padding-right: 15px;
-      height: 100%;
-
-      &.detail-card {
-        padding-right: 0;
-        margin-top: unset;
-      }
-
-      // Detail 中
-      &.content {
-        margin-right: 0;
-      }
-
-      .form-buttons {
-        //position: absolute;
-        // bottom: 13px;
-        // margin-left: 20%;
-        // margin-top: 0;
-      }
-
-      // Form 中的子 form
-      .el-form {
-        margin-left: 0;
-        margin-top: 0;
-        margin-bottom: 0;
-      }
-
-      .el-form-item {
-        .el-form-item__label {
-          padding-right: 20px;
-        }
-
-        .el-radio {
-          line-height: 25px;
-          margin-right: 13px;
-
-          .el-radio__label {
-            padding-left: 5px;
-          }
-        }
-      }
-
-      &.el-form--label-top {
-        .el-radio-group {
-          .el-radio {
-            display: block;
-            padding-bottom: 3px;
-          }
-        }
-
-        .el-form-item {
-          padding-left: 12px;
-
-          .el-form-item__label {
-            padding: 0 20px 0 0;
-            line-height: 30px;
-          }
-
-          .sub-form {
-            margin-left: -1px;
-
-            .form-fields {
-              max-height: unset;
-            }
-          }
-        }
-
-        &.form-fields {
-          //overflow: auto;
-          //max-height: calc(100vh - 180px);
-        }
-
-        .el-checkbox-group {
-          .el-checkbox {
-            display: block;
-            padding-bottom: 3px;
-          }
-        }
-
-        .el-form-item__content:has(.el-checkbox):not(:has(.el-checkbox-group)) {
-          display: inline-block; /* 更改为 inline-block */
-          //width: unset; /* 这个设置上去后，平台详情中， Automations 会有问题 */
-          vertical-align: bottom;
-        }
-
-        .el-form-item__content {
-          form {
-            .el-form-item {
-              padding-left: 0;
-            }
-          }
-        }
-      }
-
-      .form-group-header {
-        margin-left: 20px;
-      }
-    }
-
-    .el-drawer__header {
-      border-bottom: 1px solid #EBEEF5;
-      margin-bottom: 0;
-      padding: 15px 20px;
+    span {
      font-size: 16px;
-      font-weight: 500;
+      font-weight: 800;
      color: var(--color-text-primary);
    }
+  }

-    .sql.container {
-      display: none;
-    }
+  .el-drawer__body {

-    .page {
-      overflow-y: auto;
-
-      height: calc(100vh - 110px);
-
-      &.tab-page {
-        .page-content {
-          padding-right: 0;
-          padding-left: 0;
-        }
-      }
-
-      .page-content {
-        height: unset;
-        padding-right: 10px;
-        padding-left: 20px;
-
-        & > div {
-          margin-bottom: 1px;
-        }
-      }
-
-      .ibox {
-        margin-bottom: 10px;
-        border: none;
-      }
-    }
-
-    .drawer__content, .tab-page-content {
+    .drawer__content {
      height: 100%;
-      background: #f3f3f3;
-    }

-    .drawer__footer {
-      border-top: solid 1px #f3f3f3;
-    }
+      .el-form {
+        position: relative;
+        display: flex;
+        flex-wrap: nowrap;
+        flex-direction: column;
+        justify-content: flex-start;
+        margin: unset !important;
+        padding-right: 50px;
+        height: 100%;

-    //.el-drawer__header {
-    //  margin-bottom: 20px;
-    //
-    //  span {
-    //    font-size: 16px;
-    //    font-weight: 800;
-    //    color: var(--color-text-primary);
-    //  }
-    //}
+        .el-form-item {
+          margin: 5px 0 5px 0;
+        }
+
+        .form-buttons {
+          position: absolute;
+          left: 0;
+          bottom: 0;
+          width: 100%;
+          display: flex;
+          flex-wrap: nowrap;
+          padding: 0 10px 0 10px;
+
+          .el-form-item__content {
+            width: 100%;
+            display: flex;
+            margin: unset !important;
+            justify-content: center;
+
+            .el-button {
+              width: 50%;
+              border-radius: 10px;
+            }
+          }
+        }
+      }
+    }
  }
 }
 </style>
--- a/src/components/Form/AutoDataForm/index.vue
+++ b/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"
+  >
+    <span
+      v-for="(group, i) in groups"
+      :key="'group-'+group.name"
+      :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)"
+        :group="group"
+        :index="i"
+        :line="i !== 0 && !groupHidden(groups[i - 1], i - 1)"
+      />
+    </span>
+  </DataForm>
 </template>

 <script>
@@ -89,7 +87,6 @@ export default {
    }
  },
  mounted() {
-    // this.$log.debug('>>> Method: ', this.method)
    this.optionUrlMetaAndGenerateColumns()
  },
  methods: {
@@ -166,6 +163,5 @@ export default {
      return true
    }
  }
-
 }
 </script>
--- a/src/components/Form/AutoDataForm/utils.js
+++ b/src/components/Form/AutoDataForm/utils.js
@@ -6,6 +6,7 @@ import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
 import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
 import { assignIfNot, toSentenceCase } from '@/utils/common'
 import TagInput from '@/components/Form/FormFields/TagInput.vue'
+import TransferSelect from '@/components/Form/FormFields/TransferSelect.vue'
 import i18n from '@/i18n/i18n'

 export class FormFieldGenerator {
@@ -112,7 +113,7 @@ export class FormFieldGenerator {
    let nestedFields = fieldMeta.fields || []
    const nestedFieldsMeta = fieldMeta.fieldsMeta || {}
    const nestedFieldsRemoteMeta = fieldRemoteMeta.children || {}
-    if (nestedFields.toString() === '__all__') {
+    if (nestedFields === '__all__') {
      nestedFields = Object.keys(nestedFieldsRemoteMeta)
    }
    for (const name of nestedFields) {
@@ -134,6 +135,9 @@ export class FormFieldGenerator {
      case 'comment':
        field.el.type = 'textarea'
        break
+      case 'users':
+        field.component = TransferSelect
+        field.el.label = field.label
    }
    return field
  }
--- a/src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue
+++ b/src/components/Form/DataForm/components/el-form-renderer/components/render-form-item.vue
@@ -8,21 +8,18 @@
    v-bind="data.attrs"
  >
    <template v-if="data.label" #label>
-      <span :title="data.label">
-        <span v-if="data.required">* </span>
-        {{ data.label }}
-        <el-tooltip
-          v-if="data.helpTip"
-          :open-delay="500"
-          :tabindex="-1"
-          effect="dark"
-          placement="right"
-          popper-class="help-tips"
-        >
-          <div slot="content" v-sanitize="data.helpTip" class="help-tip-content" /> <!-- Noncompliant -->
-          <i class="fa fa-question-circle-o help-tip-icon" />
-        </el-tooltip>
-      </span>
+      <span>{{ data.label }}</span>
+      <el-tooltip
+        v-if="data.helpTip"
+        :open-delay="500"
+        :tabindex="-1"
+        effect="dark"
+        placement="right"
+        popper-class="help-tips"
+      >
+        <div slot="content" v-sanitize="data.helpTip" /> <!-- Noncompliant -->
+        <i class="fa fa-question-circle-o help-tip-icon" />
+      </el-tooltip>
    </template>
    <template v-if="readonly && hasReadonlyContent">
      <div
@@ -103,9 +100,6 @@
      </el-alert>
      <span v-else v-sanitize="data.helpText" />
    </div>
-    <div v-if="data.helpTextFormatter" class="help-block">
-      <RenderHelpTextSafe :render-content="data.helpTextFormatter" />
-    </div>
  </el-form-item>
 </template>
 <script>
@@ -128,18 +122,6 @@ function validator(data) {

 export default {
  components: {
-    RenderHelpTextSafe: {
-      functional: true,
-      props: {
-        renderContent: {
-          type: Function,
-          required: true
-        }
-      },
-      render(h, { props }) {
-        return props.renderContent()
-      }
-    },
    /**
     * 🐂🍺只需要有组件选项对象，就可以立刻包装成函数式组件在 template 中使用
     * FYI: https://cn.vuejs.org/v2/guide/render-function.html#%E5%87%BD%E6%95%B0%E5%BC%8F%E7%BB%84%E4%BB%B6
@@ -345,9 +327,4 @@ export default {
    cursor: pointer;
  }
 }
-
-.help-tip-content {
-  white-space: pre-wrap;
-  word-wrap: break-word;
-}
 </style>
--- a/src/components/Form/DataForm/index.vue
+++ b/src/components/Form/DataForm/index.vue
@@ -1,71 +1,68 @@
 <template>
-  <div>
-    <ElFormRender
-      :id="id"
-      ref="form"
-      :class="[mobile ? 'mobile' : 'desktop']"
-      :content="fields"
-      :form="basicForm"
-      :label-position="iLabelPosition"
-      class="form-fields"
-      label-width="25%"
-      v-bind="$attrs"
-      v-on="$listeners"
-    >
-      <!-- slot 透传 -->
-      <slot
-        v-for="item in fields"
-        :slot="`id:${item.id}`"
-        :name="`id:${item.id}`"
-      />
-      <slot
-        v-for="item in fields"
-        :slot="`$id:${item.id}`"
-        :name="`$id:${item.id}`"
-      />
+  <ElFormRender
+    :id="id"
+    ref="form"
+    :class="mobile ? 'mobile' : 'desktop'"
+    :content="fields"
+    :form="basicForm"
+    :label-position="labelPosition"
+    label-width="25%"
+    v-bind="$attrs"
+    v-on="$listeners"
+  >
+    <!-- slot 透传 -->
+    <slot
+      v-for="item in fields"
+      :slot="`id:${item.id}`"
+      :name="`id:${item.id}`"
+    />
+    <slot
+      v-for="item in fields"
+      :slot="`$id:${item.id}`"
+      :name="`$id:${item.id}`"
+    />

-      <div v-if="hasButtons" class="form-buttons">
-        <el-button
-          v-if="defaultButton"
-          :disabled="!canSubmit"
-          :loading="isSubmitting"
-          :size="submitBtnSize"
-          type="primary"
-          @click="submitForm('form')"
-        >
-          {{ iSubmitBtnText }}
-        </el-button>
+    <el-form-item v-if="hasButtons" class="form-buttons">
+      <el-button
+        v-if="defaultButton"
+        :disabled="!canSubmit"
+        :loading="isSubmitting"
+        :size="submitBtnSize"
+        type="primary"
+        @click="submitForm('form')"
+      >
+        {{ iSubmitBtnText }}
+      </el-button>

-        <el-button
-          v-if="defaultButton && hasSaveContinue"
-          size="small"
-          @click="submitForm('form', true)"
-        >
-          {{ $t("SaveAndAddAnother") }}
-        </el-button>
+      <el-button
+        v-if="defaultButton && hasSaveContinue"
+        size="small"
+        @click="submitForm('form', true)"
+      >
+        {{ $t("SaveAndAddAnother") }}
+      </el-button>

-        <el-button
-          v-if="defaultButton && hasReset"
-          size="small"
-          @click="resetForm('form')"
-        >
-          {{ $t("Reset") }}
-        </el-button>
+      <el-button
+        v-if="defaultButton && hasReset"
+        size="small"
+        @click="resetForm('form')"
+      >
+        {{ $t("Reset") }}
+      </el-button>

-        <el-button
-          v-for="button in moreButtons"
-          v-show="!button.hidden"
-          :key="button.title"
-          :loading="button.loading"
-          size="small"
-          v-bind="button"
-          @click="handleClick(button)"
-        >
-          {{ button.title }}
-        </el-button>
-      </div>
-    </ElFormRender>
-  </div>
+      <el-button
+        v-for="button in moreButtons"
+        v-show="!button.hidden"
+        :key="button.title"
+        :loading="button.loading"
+        size="small"
+        v-bind="button"
+        @click="handleClick(button)"
+      >
+        {{ button.title }}
+      </el-button>
+    </el-form-item>
+  </ElFormRender>
 </template>

 <script>
@@ -124,10 +121,6 @@ export default {
    isSubmitting: {
      type: Boolean,
      default: false
-    },
-    labelPosition: {
-      type: String,
-      default: ''
    }
  },
  data() {
@@ -144,17 +137,7 @@ export default {
    mobile() {
      return this.$store.state.app.device === 'mobile'
    },
-    drawer() {
-      return this.$store.state.common.inDrawer
-    },
-    iLabelPosition() {
-      if (this.labelPosition) {
-        return this.labelPosition
-      }
-      // if (this.drawer) {
-      //   return 'left'
-      // }
-      // return this.drawer || this.mobile ? 'top' : 'right'
+    labelPosition() {
      return this.mobile ? 'top' : 'right'
    }
  },
@@ -228,38 +211,21 @@ export default {
    color: var(--color-text-primary);
  }

-  &.label-top {
-    ::v-deep .el-form-item {
-      .el-form-item__content {
-        width: 100%;
-      }
-    }
-  }
-
  ::v-deep .el-form-item {
    margin-bottom: 10px;

+    .item-params {
+      margin-top: 0;
+    }
+
    .el-form-item__label {
      padding: 0 30px 0 0;
      line-height: 30px;
      color: var(--color-text-primary);

-      span {
-        display: unset;
-      }
-
      i {
        color: var(--color-icon-primary);
      }
-
-      span {
-        max-width: calc(100% - 25px);
-        //white-space: nowrap; /* 禁止换行 */
-        //text-overflow: ellipsis;
-        overflow: hidden;
-        display: inline-block;
-        line-height: 16px;
-      }
    }

    .el-form-item__content {
@@ -335,9 +301,8 @@ export default {
    }
  }

-  ::v-deep .form-buttons {
-    margin-top: 30px;
-    margin-left: 25%;
+  ::v-deep .el-form-item.form-buttons {
+    margin-top: 20px;
  }
 }

--- a/src/components/Form/FormFields/AttrInput.vue
+++ b/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>

--- a/src/components/Form/FormFields/BasicTree.vue
+++ b/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
@@ -118,73 +115,6 @@ export default {
    color: #999;
  }

-  .el-tree > .el-tree-node:after {
-    border-top: none;
-  }
-
-  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
-  .el-tree-node__expand-icon.is-leaf {
-    display: none;
-  }
-
-  .el-tree > .el-tree-node:before {
-    border-left: none;
-    display: none;
-  }
-
-  .el-tree > .el-tree-node:after {
-    border-top: none;
-    display: none;
-  }
-
-  .el-tree-node__children {
-    padding-left: 13px;
-
-    .el-tree-node {
-      position: relative;
-      padding-left: 13px;
-
-      &:before {
-        content: "";
-        left: -4px;
-        position: absolute;
-        right: auto;
-        border-width: 1px;
-      }
-
-      &:first-child::before {
-        display: none;
-      }
-
-      &:last-child:before {
-        height: 38px;
-      }
-
-      &:before {
-        border-left: 1px dashed #dcdcdc;
-        bottom: 0;
-        height: 100%;
-        top: -26px;
-        width: 1px;
-      }
-
-      &:after {
-        content: "";
-        left: -4px;
-        position: absolute;
-        right: auto;
-        border-width: 1px;
-      }
-
-      &:after {
-        border-top: 1px dashed #dcdcdc;
-        height: 20px;
-        top: 12px;
-        width: 24px;
-      }
-    }
-  }
-
  .el-tree-node__content:hover {
    background-color: transparent;
  }
@@ -199,7 +129,7 @@ export default {
    }

    .el-tree-node__children {
-      //margin-left: -25px;
+      margin-left: -25px;
    }
  }
 }
--- a/src/components/Form/FormFields/CodeEditor.vue
+++ b/src/components/Form/FormFields/CodeEditor.vue
@@ -245,7 +245,7 @@ export default {
      },
      set(val) {
        this.$emit('update:value', val)
-        this.$emit('input', val)
+        this.$emit('change', val)
      }
    },
    iOptions() {
--- a/src/components/Form/FormFields/CronTab/Crontab.vue
+++ b/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
      }
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Hour.vue
+++ b/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>
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Min.vue
+++ b/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>
--- a/src/components/Form/FormFields/CronTab/index.vue
+++ b/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) {
      // 确定后回传的值
--- a/src/components/Form/FormFields/DatetimeRangePicker.vue
+++ b/src/components/Form/FormFields/DatetimeRangePicker.vue
@@ -5,11 +5,11 @@
    :default-time="['00:00:01', '23:59:59']"
    :end-placeholder="$tc('DateEnd')"
    :picker-options="pickerOptions"
+    :range-separator="$tc('To')"
    :start-placeholder="$tc('DateStart')"
-    :type="type"
    class="datepicker"
-    range-separator="-"
    size="small"
+    type="datetimerange"
    v-bind="$attrs"
    @change="handleDateChange"
    v-on="$listeners"
@@ -28,15 +28,6 @@ export default {
    dateEnd: {
      type: [Number, String, Date],
      default: null
-    },
-    type: {
-      type: String,
-      default: 'daterange'
-      // default: 'datetimerange'
-    },
-    toMinMax: {
-      type: Boolean,
-      default: true
    }
  },
  data() {
@@ -44,10 +35,6 @@ export default {
    const endValue = this.dateEnd || this.$route.query['date_end']
    const dateStart = new Date(startValue)
    const dateTo = new Date(endValue)
-    if (this.toMinMax) {
-      dateStart.setHours(0, 0, 0, 0)
-      dateTo.setHours(23, 59, 59, 999)
-    }
    return {
      value: [dateStart, dateTo],
      pickerOptions: {
@@ -87,13 +74,9 @@ export default {
      }
    },
    onShortcutClick(picker, day) {
-      let start = new Date()
-      let end = new Date()
+      const end = new Date()
+      const start = new Date()
      start.setTime(start.getTime() - 3600 * 1000 * 24 * day)
-      if (this.toMinMax) {
-        start = new Date(start.setHours(0, 0, 0, 0))
-        end = new Date(end.setHours(23, 59, 59, 999))
-      }
      picker.$emit('pick', [start, end])
    }
  }
@@ -101,18 +84,9 @@ export default {
 </script>

 <style lang='scss' scoped>
-html:lang(pt-br) {
-  .datepicker ::v-deep .el-range-separator {
-    padding: 0 10px;
-  }
-}
-
 .datepicker {
-  &.el-date-editor--daterange.el-input__inner {
-    width: 243px;
-  }
-
  margin-left: 10px;
+  width: 233px;
  border: 1px solid #dcdee2;
  border-radius: 2px;
  height: 28px;
--- a/src/components/Form/FormFields/InputWithUnit.vue
+++ b/src/components/Form/FormFields/InputWithUnit.vue
@@ -15,7 +15,6 @@ export default {
  },
  data() {
    return {
-      defaultValue: 24,
      displayMapper: {
        'second': this.$t('Second'), // 'sec' is the default value of 'unit
        'min': this.$t('Minute'), // 'min' is the default value of 'unit
--- a/src/components/Form/FormFields/PasswordRule.vue
+++ b/src/components/Form/FormFields/PasswordRule.vue
@@ -48,8 +48,7 @@ export default {
            type: 'input-number',
            el: {
              min: 8,
-              max: 36,
-              size: 'mini'
+              max: 30
            }
          },
          {
--- a/src/components/Form/FormFields/ProtocolSelector/ProtocolSettingDialog.vue
+++ b/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')
    }
  }
 }
--- a/src/components/Form/FormFields/ProtocolSelector/index.vue
+++ b/src/components/Form/FormFields/ProtocolSelector/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="showSetting ? 'show-setting' : 'hide-setting'">
+  <div v-if="!loading" :class="showSetting ? 'show-setting' : 'hide-setting'">
    <div v-for="(item, index) in items" :key="item.name" class="protocol-item">
      <el-input
        v-model="item.port"
@@ -114,7 +114,8 @@ export default {
      name: '',
      items: [],
      currentProtocol: {},
-      showDialog: false
+      showDialog: false,
+      loading: false
    }
  },
  computed: {
@@ -143,8 +144,10 @@ export default {
  watch: {
    choices: {
      handler(value, oldValue) {
+        this.loading = true
        setTimeout(() => {
          this.setDefaultItems(value)
+          this.loading = false
        },)
      },
      deep: true,
--- a/src/components/Form/FormFields/TagInput.vue
+++ b/src/components/Form/FormFields/TagInput.vue
@@ -151,7 +151,7 @@ export default {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
-  //padding: 0 6px;
+  padding: 1px 2px 1px;
  border: 1px solid #dcdee2;
  border-radius: 1px;
  background-color: #fff;
@@ -162,9 +162,8 @@ export default {
  }

  & ::v-deep .el-tag {
-    margin-bottom: 1px;
+    margin-top: 1px;
    font-family: sans-serif !important;
-    margin-left: 5px;
  }

  & ::v-deep .el-autocomplete {
@@ -178,8 +177,7 @@ export default {
  & ::v-deep .el-input__inner {
    max-width: 100%;
    border: none;
-    padding-left: 12px;
-    height: 28px;
+    padding-left: 10px;
  }
 }

@@ -189,7 +187,7 @@ export default {
 }

 .filter-field ::v-deep .el-input__inner {
-  height: 28px !important;
+  height: 28px;
 }

 .show-password {
--- a/src/components/Form/FormFields/UpdateToken.vue
+++ b/src/components/Form/FormFields/UpdateToken.vue
@@ -6,15 +6,14 @@
    <el-input
      v-show="isShow"
      v-model.trim="curValue"
-      :disabled="disabled"
      :placeholder="placeholder"
      :type="type"
      class="password-input"
      show-password
      @change="onChange"
    />
-    <el-button :disabled="disabled" size="small" type="text" @click="randomPassword">
-      <i class="fa fa-refresh" />
+    <el-button size="small" type="text" @click="randomPassword">
+      <i class="fa fa-retweet" />
    </el-button>
  </div>
 </template>
@@ -45,10 +44,6 @@ export default {
    placeholder: {
      type: String,
      default: () => ''
-    },
-    disabled: {
-      type: Boolean,
-      default: false
    }
  },
  data() {
--- a/src/components/Form/FormFields/UploadField.vue
+++ b/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
--- a/src/components/Form/FormFields/UserPassword.vue
+++ b/src/components/Form/FormFields/UserPassword.vue
@@ -42,7 +42,7 @@ export default {
        patterns.push([/\d/, i18n.t('NUMBER_REQUIRED')])
      }
      if (passwordRule['SECURITY_PASSWORD_SPECIAL_CHAR']) {
-        const pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？_+-]")
+        const pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
        patterns.push([pattern, i18n.t('SPECIAL_CHAR_REQUIRED')])
      }
      for (const [pattern, msg] of patterns) {
--- a/src/components/Form/FormFields/WeekCronSelect.vue
+++ b/src/components/Form/FormFields/WeekCronSelect.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="c-weektime">
    <div class="c-schedue" />
-    <div :class="{'c-schedue': true, 'c-schedue-notransi': mode}" />
+    <div :class="{'c-schedue': true, 'c-schedue-notransi': mode}" :style="styleValue" />
    <table :class="{'c-min-table': colspan < 2}" class="c-weektime-table">
      <thead class="c-weektime-head">
        <tr>
@@ -14,7 +14,7 @@
        </tr>
      </thead>
      <tbody class="c-weektime-body" @mouseleave="containerLeave()">
-        <tr v-for="t in weekTimeData" :key="t.row">
+        <tr v-for="t in weektimeData" :key="t.row">
          <td>{{ t.value }}</td>
          <td
            v-for="n in t.child"
@@ -45,7 +45,6 @@
 const createArr = len => {
  return Array.from(Array(len)).map((ret, id) => id)
 }
-
 function splicing(list) {
  let same
  let i = -1
@@ -68,7 +67,6 @@ function splicing(list) {
  arr.shift()
  return arr.join('')
 }
-
 export default {
  name: 'WeekCronSelect',
  props: {
@@ -79,7 +77,7 @@ export default {
    colspan: {
      type: Number,
      default() {
-        return 1
+        return 2
      }
    }
  },
@@ -102,7 +100,7 @@ export default {
        this.$t('Saturday'),
        this.$t('Sunday')
      ],
-      weekTimeData: [],
+      weektimeData: [],
      timeRange: [] // 格式化之后数据
    }
  },
@@ -144,10 +142,10 @@ export default {
        return {
          value: ret,
          row: index,
-          child: children(ret, index, 24 * this.colspan)
+          child: children(ret, index, 48)
        }
      })
-      this.weekTimeData = isData
+      this.weektimeData = isData
    },
    // 反解析传递过来的默认值
    nextValue() {
@@ -171,11 +169,8 @@ export default {
      const startVal = this.countIndex(start)
      const endVal = this.countIndex(end)
      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
-        }
+        const curWeek = this.weektimeData[idNum]
+        curWeek.child[i].check = true
      }
    },
    // 计算索引
@@ -214,9 +209,8 @@ export default {
      const nowDate = new Date(timeStamp).getTime()
      const targetStamp = new Date(nowDate + offsetGMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime()

-      // (2 / this.colspan) 原来是一个单元格 30分钟，现在是一个单元格 30 * 2 / this.colspan 分钟
-      const beginStamp = targetStamp + col * 1800000 * (2 / this.colspan) // col * 30 * 60 * 1000
-      const endStamp = beginStamp + 1800000 * (2 / this.colspan)
+      const beginStamp = targetStamp + col * 1800000 // col * 30 * 60 * 1000
+      const endStamp = beginStamp + 1800000

      const begin = this.formatDate(new Date(beginStamp), 'hh:mm')
      const end = this.formatDate(new Date(endStamp), 'hh:mm')
@@ -224,7 +218,7 @@ export default {
    },
    // 清空时间段
    clearWeektime() {
-      this.weekTimeData.forEach(item => {
+      this.weektimeData.forEach(item => {
        item.child.forEach(t => {
          this.$set(t, 'check', false)
        })
@@ -234,7 +228,7 @@ export default {
    },
    // 全选
    selectAll() {
-      this.weekTimeData.forEach(item => {
+      this.weektimeData.forEach(item => {
        item.child.forEach(t => {
          this.$set(t, 'check', true)
        })
@@ -247,7 +241,7 @@ export default {
      this.mode = 0
    },
    setTimeRange() {
-      this.timeRange = this.weekTimeData.map(item => {
+      this.timeRange = this.weektimeData.map(item => {
        return {
          id: item.row === 6 ? 0 : item.row + 1,
          value: splicing(item.child)
@@ -314,7 +308,7 @@ export default {
    selectWeek(row, col, check) {
      const [minRow, maxRow] = row
      const [minCol, maxCol] = col
-      this.weekTimeData.forEach(item => {
+      this.weektimeData.forEach(item => {
        item.child.forEach(t => {
          if (t.row >= minRow && t.row <= maxRow && t.col >= minCol && t.col <= maxCol) {
            this.$set(t, 'check', check)
@@ -327,12 +321,11 @@ export default {
 </script>
 <style lang="scss" scoped>
 .c-weektime {
-  //min-width: 440px;
+  min-width: 640px;
  position: relative;
  display: inline-block;
  padding-right: 20px;
 }
-
 .c-schedue {
  background: #598fe6;
  position: absolute;
@@ -341,70 +334,55 @@ export default {
  opacity: .6;
  pointer-events: none;
 }
-
 .c-schedue-notransi {
  transition: width .12s ease, height .12s ease, top .12s ease, left .12s ease;
 }
-
 .c-weektime-table {
  border-collapse: collapse;
-
  th {
    vertical-align: inherit;
    font-weight: bold;
  }
-
  tr {
    height: 30px;
  }
-
  tr, td, th {
    user-select: none;
    border: 1px solid #dee4f5;
    text-align: center;
-    min-width: 10px;
+    min-width: 12px;
    line-height: 1.6em;
    transition: background .16s ease;
  }
-
  .c-weektime-head {
    font-size: 12px;
-
    .week-td {
      width: 72px;
    }
  }
-
  .c-weektime-body {
    font-size: 12px;
-
    td {
      &.weektime-atom-item {
        user-select: unset;
        background-color: #f5f5f5;
-        width: 18px;
      }
-
      &.ui-selected {
        background-color: #598fe6;
      }
    }
  }
-
  .c-weektime-preview {
    line-height: 2.4em;
    padding: 0 10px;
-    font-size: 11px;
-
+    font-size: 13px;
    .c-weektime-con {
      line-height: 42px;
      user-select: none;
    }
-
    .c-weektime-time {
      text-align: left;
      line-height: 2.4em;
-
      p {
        max-width: 625px;
        line-height: 1.4em;
@@ -414,13 +392,11 @@ export default {
    }
  }
 }
-
 .c-min-table {
  tr, td, th {
-    min-width: 17px;
+    min-width: 24px;
  }
 }
-
 .g-clearfix {
  &:after, &:before {
    clear: both;
@@ -428,20 +404,16 @@ export default {
    display: table;
  }
 }
-
 .g-pull-left {
  float: left;
 }
-
 .g-pull-right {
  float: right;
-  color: #409eff !important;
+  color: #409eff!important;
 }
-
 .g-pull-margin {
  margin-right: 12px;
 }
-
 .g-tip-text {
  color: #999;
 }
--- a/src/components/Form/FormGroupHeader/index.vue
+++ b/src/components/Form/FormGroupHeader/index.vue
@@ -1,15 +1,7 @@
 <template>
-  <div ref="formGroup" class="form-group-header">
+  <div 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>
-    <div v-if="!isVisible" class="ellipsis" @click="toggle">
-      <i class="fa fa-angle-double-down" />
-    </div>
+    <h3>{{ group['title'] }} </h3>
  </div>
 </template>

@@ -28,62 +20,16 @@ export default {
      type: Object,
      default: () => ({})
    }
-  },
-  data() {
-    return {
-      isVisible: true
-    }
-  },
-  computed: {
-    iconClass() {
-      return this.isVisible ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
-    }
-  },
-  methods: {
-    toggle() {
-      this.isVisible = !this.isVisible
-      this.toggleSiblingVisibility()
-    },
-    toggleSiblingVisibility() {
-      // 当前 form-group-header 的 DOM 元素
-      const formGroupHeader = this.$refs.formGroup
-      if (!formGroupHeader) return
-
-      // 找到当前 form-group-header 的下一个兄弟节点
-      let sibling = formGroupHeader.nextElementSibling
-
-      // 循环隐藏或显示直到找到下一个 form-group-header
-      while (sibling && sibling.classList.contains('el-form-item')) {
-        sibling.style.display = this.isVisible ? '' : 'none'
-        sibling = sibling.nextElementSibling
-      }
-    }
  }
 }
 </script>

 <style lang="less" scoped>
 .hr-line-dashed {
-  border-top: 1px dashed #e7eaec;
-  color: #ffffff;
-  background-color: #ffffff;
-  height: 1px;
-  margin: 20px 0;
-}
-
-h3 {
-  display: inline-block;
-  cursor: pointer;
-}
-
-.compass {
-  display: inline-block;
-  float: right;
-  cursor: pointer;
-}
-
-.ellipsis {
-  text-align: center;
-  cursor: pointer;
+    border-top: 1px dashed #e7eaec;
+    color: #ffffff;
+    background-color: #ffffff;
+    height: 1px;
+    margin: 20px 0;
 }
 </style>
--- a/src/components/Common/IBox/HeadingIBox.vue
+++ b/src/components/Common/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>
--- a/src/components/Common/IBox/index.vue
+++ b/src/components/Common/IBox/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card :class="'ibox ' + type" :shadow="shadow" v-bind="$attrs">
+  <el-card :class="'ibox ' + type" shadow="never" v-bind="$attrs">
    <template #header>
      <slot name="header">
        <div v-if="title" slot="header" class="clearfix ibox-title">
@@ -26,10 +26,6 @@ export default {
    type: {
      type: String,
      default: 'default'
-    },
-    shadow: {
-      type: String,
-      default: 'never'
    }
  },
  computed: {
--- a/src/components/Common/QuickActions/action.vue
+++ b/src/components/Common/QuickActions/action.vue
@@ -25,9 +25,9 @@
 </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 {
--- a/src/components/Common/QuickActions/index.vue
+++ b/src/components/Common/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 {
@@ -39,32 +39,32 @@ export default {
 </script>

 <style scoped>
-.quick-actions ::v-deep table {
-  width: 100%;
-}
-
-.quick-actions ::v-deep tr > td {
-  line-height: 1.43;
-  padding: 8px 0;
-  vertical-align: top;
-  font-size: 13px;
-  width: 50%;
-}
-
-.quick-actions ::v-deep tr > td > span:last-child {
-  float: right;
-}
-
-.quick-actions ::v-deep button {
-  padding: 4px 5px;
-  font-size: 13px;
-  min-width: 65px;
-
-  span {
-    overflow: hidden;
-    white-space: nowrap; /* 控制文本不换行 */
-    text-overflow: ellipsis;
-    display: block;
+  .quick-actions ::v-deep table {
+    width: 100%;
+  }
+
+  .quick-actions ::v-deep tr > td {
+    line-height: 1.43;
+    padding: 8px;
+    vertical-align: top;
+    font-size: 13px;
+    width: 50%;
+  }
+
+  .quick-actions ::v-deep tr > td > span:last-child {
+    float: right;
+  }
+
+  .quick-actions ::v-deep button {
+    padding: 4px 5px;
+    font-size: 13px;
+    width: 65px;
+
+    span {
+      overflow: hidden;
+      white-space: nowrap; /* 控制文本不换行 */
+      text-overflow: ellipsis;
+      display: block;
+    }
  }
-}
 </style>
--- a/src/components/Table/AutoDataTable/components/ColumnSettingPopover.vue
+++ b/src/components/Table/AutoDataTable/components/ColumnSettingPopover.vue
@@ -3,7 +3,7 @@
    v-if="showColumnSettingPopover"
    :cancel-title="$tc('RestoreDefault')"
    :destroy-on-close="true"
-    :title="$tc('ListPreference')"
+    :title="$tc('TableSetting')"
    :visible.sync="showColumnSettingPopover"
    top="10%"
    width="50%"
@@ -36,7 +36,6 @@
          <el-checkbox
            :disabled="item.prop==='actions' || minColumns.indexOf(item.prop)!==-1"
            :label="item.prop"
-            :title="item.label"
          >
            {{ item.label }}
          </el-checkbox>
--- a/src/components/Table/AutoDataTable/index.vue
+++ b/src/components/Table/AutoDataTable/index.vue
@@ -23,17 +23,11 @@
 <script type="text/jsx">
 import DataTable from '@/components/Table/DataTable/index.vue'
 import {
-  ActionsFormatter,
-  ArrayFormatter,
-  ChoicesFormatter,
-  CopyableFormatter,
-  DateFormatter,
-  DetailFormatter,
-  DisplayFormatter,
+  ActionsFormatter, ArrayFormatter, ChoicesFormatter, DateFormatter, DetailFormatter, DisplayFormatter,
  ObjectRelatedFormatter
 } from '@/components/Table/TableFormatters'
 import i18n from '@/i18n/i18n'
-import { newURL, ObjectLocalStorage, replaceAllUUID, toSentenceCase } from '@/utils/common'
+import { newURL, replaceAllUUID, toSentenceCase } from '@/utils/common'
 import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
 import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'

@@ -68,21 +62,10 @@ export default {
        currentCols: [],
        defaultCols: []
      },
-      isDeactivated: false,
-      objTableColumns: new ObjectLocalStorage('tableColumns')
-    }
-  },
-  computed: {
-    dynamicActionWidth() {
-      if (this.$i18n.locale === 'en') {
-        return '120px'
-      }
-      if (this.$i18n.locale === 'pt-br') {
-        return '160px'
-      }
-      return '100px'
+      isDeactivated: false
    }
  },
+  computed: {},
  watch: {
    config: {
      handler: _.debounce(function(iNew, iOld) {
@@ -137,15 +120,6 @@ export default {
    },
    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'
@@ -157,7 +131,7 @@ export default {
            prop: 'actions',
            label: i18n.t('Actions'),
            align: 'center',
-            width: this.dynamicActionWidth,
+            width: '100px',
            formatter: ActionsFormatter,
            fixed: 'right',
            formatterArgs: {}
@@ -213,7 +187,7 @@ export default {
          break
        case 'datetime':
          col.formatter = DateFormatter
-          col.width = '155px'
+          col.width = '175px'
          break
        case 'object_related_field':
          col.formatter = ObjectRelatedFormatter
@@ -445,9 +419,13 @@ export default {
      const minColumnsNames = _.get(this.iConfig, 'columnsShow.min', ['actions', 'id'])
        .filter(n => totalColumnsNames.includes(n))

+      // 应该显示的列
+      const _tableConfig = localStorage.getItem('tableConfig')
+        ? JSON.parse(localStorage.getItem('tableConfig'))
+        : {}
      let tableName = this.config.name || this.$route.name + '_' + newURL(this.config.url).pathname
      tableName = replaceAllUUID(tableName)
-      const configShowColumnsNames = this.objTableColumns.get(tableName)
+      const configShowColumnsNames = _.get(_tableConfig[tableName], 'showColumns', null)
      let showColumnsNames = configShowColumnsNames || defaultColumnsNames
      if (showColumnsNames.length === 0) {
        showColumnsNames = totalColumnsNames
@@ -494,12 +472,17 @@ export default {
      }
      this.popoverColumns.currentCols = columns

+      const _tableConfig = localStorage.getItem('tableConfig')
+        ? JSON.parse(localStorage.getItem('tableConfig'))
+        : {}
      let tableName = this.config.name || this.$route.name + '_' + newURL(url).pathname
      // 替换url中的uuid，避免同一个类型接口生成多个key，localStorage中的数据无法共用.
      tableName = replaceAllUUID(tableName)

-      this.objTableColumns.set(tableName, columns)
-
+      _tableConfig[tableName] = {
+        'showColumns': columns
+      }
+      localStorage.setItem('tableConfig', JSON.stringify(_tableConfig))
      this.filterShowColumns()
    },
    filterChange(filters) {
--- a/src/components/Table/CardTable/Panel.vue
+++ b/src/components/Table/CardTable/Panel.vue
@@ -1,153 +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="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>
-  </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;
-      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;
-    }
-  }
-}
-
-.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>
--- a/src/components/Table/CardTable/SmallCard.vue
+++ b/src/components/Table/CardTable/SmallCard.vue
@@ -0,0 +1,32 @@
+<template>
+  <div>
+    <CardTable
+      ref="table"
+      :columns="3"
+      :sub-component="subComponent"
+      v-bind="$attrs"
+    />
+  </div>
+</template>
+
+<script type="text/jsx">
+import CardTable from '@/components/Table/CardTable'
+import CardPanel from './components/CardPanel.vue'
+
+export default {
+  name: 'SmallCard',
+  components: {
+    CardTable
+  },
+  data() {
+    return {
+      subComponent: CardPanel
+    }
+  },
+  methods: {
+    reloadTable() {
+      this.$refs.table.reloadTable()
+    }
+  }
+}
+</script>
--- a/src/components/Table/CardTable/components/CardPanel.vue
+++ b/src/components/Table/CardTable/components/CardPanel.vue
@@ -1,22 +1,16 @@
 <template>
-  <div class="info-panel">
-    <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,31 @@
              :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" @click="gotoDetail">
-      <InfoPanel :infos="getInfos(object)" />
-    </div>
-    <el-row class="panel-footer" />
+      </el-col>
+    </el-row>
+    <el-divider />
+    <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',
@@ -72,13 +76,7 @@ export default {
    },
    handleUpdate: {
      type: Function,
-      default: () => {
-      }
-    },
-    onView: {
-      type: Function,
-      default: () => {
-      }
+      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,80 +145,27 @@ 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;
-    cursor: default;
-
-    .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: 500;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
  }

  .panel-content {
-    display: block;
-    padding: 1px 25px 10px;
-    cursor: pointer;
+    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;
    }
  }

--- a/src/components/Table/CardTable/components/InfoPanel.vue
+++ b/src/components/Table/CardTable/components/InfoPanel.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="panel-item">
+    <div class="item-label">{{ title }}</div>
+    <div class="text-info" :title="content">{{ content }}</div>
+  </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;
+  }
+  .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>
--- a/src/components/Table/CardTable/index.vue
+++ b/src/components/Table/CardTable/index.vue
@@ -6,25 +6,61 @@
      :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="24 / columns" :md="12" :sm="24" style="min-width: 335px;">
        <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)" />
+            <component
+              :is="subComponent"
+              v-if="subComponent"
+              :object="d"
+              :table-config="tableConfig"
+              v-bind="subComponentProps"
+              @refresh="getList"
+            />
+            <slot v-else :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"
@@ -38,11 +74,11 @@
 </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 { 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

@@ -50,9 +86,9 @@ export default {
  name: 'CardTable',
  components: {
    IBox,
-    Panel,
    TableAction,
-    Pagination
+    Pagination,
+    Icon
  },
  props: {
    // 定义 table 的配置
@@ -90,7 +126,6 @@ export default {
      paginationSize: 6,
      paginationLayout: 'total, sizes, prev, pager, next',
      paginationSizes: [6, 18, 27],
-      loading: true,
      axiosConfig: {
        raw: 1,
        params: {
@@ -106,17 +141,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) {
@@ -127,7 +161,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
@@ -141,10 +175,16 @@ export default {
      const queryString = Object.keys(query).map(key => key + '=' + query[key]).join('&')
      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()
@@ -175,7 +215,9 @@ export default {
      this.$router.push(detailRoute)
    },
    defaultPerformDelete(obj) {
-      this.$axios.delete(`${this.tableConfig.url}${obj.id}/`)
+      this.$axios.delete(
+        `${this.tableConfig.url}${obj.id}/`
+      )
    },
    onView(obj) {
      if (this.isDisabled(obj)) {
@@ -206,42 +248,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-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 {
@@ -269,15 +357,35 @@ 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;
 }

-.el-col {
-  //min-width: 330px; 设置完后，remote app 列表会有问题
-}
-
 .no-data {
  display: flex;
  flex-direction: column;
--- a/src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue
+++ b/src/components/Table/DataTable/compenents/el-data-table/el-data-table.vue
@@ -7,14 +7,14 @@
    <template v-else>
      <el-table
        ref="table"
-        v-loading="tableLoading"
+        v-loading="loading"
        :data="data"
        :row-class-name="rowClassName"
        v-bind="tableAttrs"
        @select="selectStrategy.onSelect"
        v-on="$listeners"
        @selection-change="selectStrategy.onSelectionChange"
-        @select-all="handleSelectAll($event, canSelect)"
+        @select-all="selectStrategy.onSelectAll($event, canSelect)"
        @sort-change="onSortChange"
      >
        <!--TODO 不用jsx写, 感觉template逻辑有点不清晰了-->
@@ -105,17 +105,14 @@
            <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"
                :cell-value="row[col.prop]"
                :col="col"
                :column="column"
-                :index="$index"
+                :index="index"
                :reload="getList"
                :row="row"
                :table-data="data"
@@ -752,7 +749,7 @@ export default {
      page: defaultFirstPage,
      // https://github.com/ElemeFE/element/issues/1153
      total: null,
-      tableLoading: false,
+      loading: false,
      // 多选项的数组
      selected: [],

@@ -943,11 +940,11 @@ export default {
    },
    getListFromStaticData({ loading = true } = {}) {
      if (loading) {
-        this.tableLoading = true
+        this.loading = true
      }
      if (!this.hasPagination) {
        this.data = this.totalData
-        this.tableLoading = false
+        this.loading = false
        if (this.isTree) {
          this.data = this.tree2Array(this.data, this.expandAll)
        }
@@ -960,7 +957,7 @@ export default {
      const end = (page + pageOffset) * this.size
      this.$log.debug(`page: ${page}, size: ${this.size}, start: ${start}, end: ${end}`)
      this.data = this.totalData.slice(start, end)
-      this.tableLoading = false
+      this.loading = false
      this.data = this.tree2Array(this.data, this.expandAll)
      return this.data
    },
@@ -986,7 +983,7 @@ export default {
        queryUtil.stringify(query, '=', '&')

      // 请求开始
-      this.tableLoading = loading
+      this.loading = loading

      // 存储query记录, 便于后面恢复
      if (this.saveQuery) {
@@ -1026,7 +1023,7 @@ export default {
            this.total === 0 &&
            (_isEmpty(formValue) || _values(formValue).every(isFalsey))

-          this.tableLoading = false
+          this.loading = false
          /**
           * 请求返回, 数据更新后触发
           * @property {object} data - table的数据
@@ -1036,7 +1033,7 @@ export default {

          // 开启persistSelection时，需要同步selected状态到el-table中
          this.$nextTick(() => {
-            this.selectStrategy?.updateElTableSelection()
+            this.selectStrategy.updateElTableSelection()
          })
        })
        .catch(err => {
@@ -1046,7 +1043,7 @@ export default {
           */
          this.$emit('error', err)
          this.total = 0
-          this.tableLoading = false
+          this.loading = false
        })
    },
    search(attrs, reset) {
@@ -1109,14 +1106,6 @@ export default {
      this.page = val
      this.getList()
    },
-    handleSelectAll(selection, selectable = () => true) {
-      this.tableLoading = true
-      try {
-        this.selectStrategy.onSelectAll(selection, selectable)
-      } finally {
-        this.tableLoading = false
-      }
-    },
    /**
     * 切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否
     *
@@ -1133,7 +1122,7 @@ export default {
     * @public
     */
    clearSelection() {
-      return this.selectStrategy?.clearSelection()
+      return this.selectStrategy.clearSelection()
    },
    // 弹窗相关
    // 除非树形结构在操作列点击新增, 否则 row 是 MouseEvent
--- a/src/components/Table/DataTable/compenents/el-data-table/utils/select-strategy.js
+++ b/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,55 +65,17 @@ class StrategyPersistSelection extends StrategyAbstract {
    const isChosen = selection.indexOf(row) > -1
    this.toggleRowSelection(row, isChosen)
  }
-
  /**
   * 用户切换当前页的多选
   */
  onSelectAll(selection, selectable = () => true) {
-    const { id, selected, data } = this.elDataTable
-    const selectableRows = data.filter(selectable)
-    // const isSelected = !!selection.length
-
-    // 创建已选择项的 id 集合，用于快速查找
-    const selectedIds = new Set(selected.map(r => r[id]))
-    const currentPageIds = new Set(selectableRows.map(row => row[id]))
-
-    // 前页面的选中状态
-    const currentPageSelectedCount = selectableRows.filter(row =>
-      selectedIds.has(row[id])
-    ).length
-
-    // 判断是全选还是取消全选
-    const shouldSelectAll = currentPageSelectedCount < selectableRows.length
-
-    this.elTable?.clearSelection()
-
-    if (shouldSelectAll) {
-      selectableRows.forEach(row => {
-        if (!selectedIds.has(row[id])) selected.push(row)
-
-        this.elTable.toggleRowSelection(row, true)
-
-        // ! 这里需要触发事件，否则在 el-table 中无法触发 selection-change 事件
-        this.elDataTable.$emit('toggle-row-selection', true, row)
-      })
-    } else {
-      const newSelected = []
-
-      selected.forEach(row => {
-        if (!currentPageIds.has(row[id])) {
-          newSelected.push(row)
-        } else {
-          this.elDataTable.$emit('toggle-row-selection', false, row)
-        }
-      })
-
-      this.elDataTable.selected = newSelected
-    }
-
-    this.elDataTable.$emit('selection-change', this.elDataTable.selected)
+    const isSelected = !!selection.length
+    this.elDataTable.data.forEach(r => {
+      if (selectable(r)) {
+        this.toggleRowSelection(r, isSelected)
+      }
+    })
  }
-
  /**
   * toggleRowSelection和clearSelection管理elDataTable的selected数组
   * 记得最后要将状态同步到el-table中
@@ -136,42 +83,34 @@ class StrategyPersistSelection extends StrategyAbstract {
  toggleRowSelection(row, isSelected) {
    const { id, selected } = this.elDataTable
    const foundIndex = selected.findIndex(r => r[id] === row[id])
-
    if (typeof isSelected === 'undefined') {
      isSelected = foundIndex <= -1
    }
-
    if (isSelected && foundIndex === -1) {
      selected.push(row)
    } else if (!isSelected && foundIndex > -1) {
      selected.splice(foundIndex, 1)
    }
-
    this.elDataTable.$emit('toggle-row-selection', isSelected, row)
    this.updateElTableSelection()
  }
-
  clearSelection() {
    this.elDataTable.selected = []
    this.updateElTableSelection()
  }
-
  /**
   * 将selected状态同步到el-table中
   */
  updateElTableSelection() {
    const { data, id, selected } = this.elDataTable
-    const selectedIds = new Set(selected.map(r => r[id]))
-
-    this.elTable?.clearSelection()
-
-    data.forEach(row => {
-      const shouldBeSelected = selectedIds.has(row[id])
-      if (!this.elTable) return
-
-      if (shouldBeSelected) {
-        this.elTable.toggleRowSelection(row, true)
+    // 历史勾选的行已经不在当前页了，所以要将当前页的行数据和selected合并
+    const mergeData = _.uniqWith([...data, ...selected], _.isEqual)
+    mergeData.forEach(r => {
+      const isSelected = !!selected.find(r2 => r[id] === r2[id])
+      if (!this.elTable) {
+        return
      }
+      this.elTable.toggleRowSelection(r, isSelected)
    })
  }
 }
--- a/src/components/Table/DataTable/index.vue
+++ b/src/components/Table/DataTable/index.vue
@@ -10,7 +10,6 @@
 </template>

 <script>
-import { newURL, ObjectLocalStorage } from '@/utils/common'
 import { default as ElDatableTable } from './compenents/el-data-table'
 import { mapGetters } from 'vuex'

@@ -28,11 +27,7 @@ export default {
  },
  data() {
    const userTableActions = this.config.tableActions || {}
-    const objTableSize = new ObjectLocalStorage('tableSize')
-    const pathName = newURL(this.config.url).pathname
    return {
-      objTableSize: objTableSize,
-      pathName: pathName,
      defaultConfig: {
        axiosConfig: {
          raw: 1,
@@ -75,7 +70,7 @@ export default {
        },
        pageCount: 5,
        paginationLayout: 'total, sizes, prev, pager, next',
-        paginationSize: objTableSize.get(pathName) || 15,
+        paginationSize: JSON.parse(localStorage.getItem('paginationSize')) || 15,
        paginationSizes: [15, 30, 50, 100],
        paginationBackground: true,
        transformQuery: query => {
@@ -112,7 +107,7 @@ export default {
      return this.$refs.table
    },
    tableConfig() {
-      const tableDefaultConfig = this.defaultConfig || {}
+      const tableDefaultConfig = this.defaultConfig
      let tableAttrs = tableDefaultConfig.tableAttrs
      if (this.config.tableAttrs) {
        tableAttrs = Object.assign(tableAttrs, this.config.tableAttrs)
@@ -129,7 +124,7 @@ export default {
  watch: {},
  methods: {
    getList() {
-      this.$refs.table?.clearSelection()
+      this.$refs.table.clearSelection()
      return this.$refs.table.getList()
    },
    getData() {
@@ -162,7 +157,13 @@ export default {
      this.$emit('loaded')
    },
    handleSizeChange(val) {
-      this.objTableSize.set(this.pathName, val)
+      localStorage.setItem('paginationSize', val)
+      this.$store.commit('table/SET_TABLE_CONFIG',
+        {
+          key: 'paginationSize',
+          value: val
+        }
+      )
    }
  }
 }
--- a/src/components/Table/DrawerListTable/PageDrawer.vue
+++ b/src/components/Table/DrawerListTable/PageDrawer.vue
@@ -1,75 +0,0 @@
-<template>
-  <Drawer
-    :component="component"
-    :component-listeners="listener"
-    :title="title"
-    :visible.sync="iVisible"
-    append-to-body
-    class="form-drawer"
-    v-bind="props"
-    v-on="$listeners"
-  />
-</template>
-
-<script>
-import Drawer from '@/components/Drawer/index.vue'
-
-export default {
-  components: { Drawer },
-  props: {
-    visible: {
-      type: Boolean,
-      required: true
-    },
-    title: {
-      type: String,
-      default: ''
-    },
-    component: {
-      type: [String, Function],
-      required: true
-    },
-    props: {
-      type: Object,
-      default: () => ({})
-    },
-    action: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      listener: {
-        ...this.$listeners
-      }
-    }
-  },
-  computed: {
-    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)
-      // })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-</style>
--- a/src/components/Table/DrawerListTable/index.vue
+++ b/src/components/Table/DrawerListTable/index.vue
@@ -1,393 +0,0 @@
-<template>
-  <div>
-    <ListTable
-      ref="ListTable"
-      :header-actions="iHeaderActions"
-      :table-config="iTableConfig"
-      v-bind="$attrs"
-    />
-    <Drawer
-      v-if="drawerComponent"
-      :action="action"
-      :class="[action]"
-      :component="drawerComponent"
-      :props="drawerProps"
-      :title="drawerTitle"
-      :visible.sync="drawerVisible"
-      class="page-drawer"
-    />
-  </div>
-</template>
-
-<script>
-import ListTable from '../ListTable'
-import Drawer from '@/components/Drawer/index.vue'
-import { setUrlParam, toLowerCaseExcludeAbbr, toSentenceCase } from '@/utils/common'
-import { mapGetters } from 'vuex'
-
-const drawerType = [String, Function]
-
-export default {
-  name: 'GenericListPage',
-  components: {
-    ListTable, Drawer
-  },
-  props: {
-    detailDrawer: {
-      type: drawerType,
-      default: ''
-    },
-    createDrawer: {
-      type: drawerType,
-      default: ''
-    },
-    updateDrawer: {
-      type: drawerType,
-      default: ''
-    },
-    tableConfig: {
-      type: Object,
-      required: true
-    },
-    headerActions: {
-      type: Object,
-      required: true
-    },
-    drawerProps: {
-      type: Object,
-      default: () => ({})
-    },
-    reloadOrderQuery: {
-      type: String,
-      default: '-date_updated'
-    },
-    resource: {
-      type: String,
-      default: ''
-    },
-    getDrawerTitle: {
-      type: Function,
-      default: null
-    }
-  },
-  data() {
-    return {
-      drawerTitle: '',
-      action: '',
-      drawerVisible: false,
-      drawerComponent: ''
-    }
-  },
-  computed: {
-    ...mapGetters(['inDrawer']),
-    iHeaderActions() {
-      const actions = this.headerActions
-      if (!actions.onCreate) {
-        actions.onCreate = this.onCreate
-      }
-      return actions
-    },
-    iTableConfig() {
-      const config = _.cloneDeep(this.tableConfig)
-      const actionMap = {
-        'columnsMeta.actions.formatterArgs.onUpdate': this.onUpdate,
-        'columnsMeta.actions.formatterArgs.onClone': this.onClone,
-        'columnsMeta.name.formatterArgs.onClick': this.onDetail
-      }
-      for (const [key, value] of Object.entries(actionMap)) {
-        if (_.get(config, key)) {
-          continue
-        }
-        _.set(config, key, value)
-      }
-      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
-        }
-      }
-      return config
-    }
-  },
-  watch: {
-    inDrawer(val) {
-      if (!this.drawerVisible) {
-        return
-      }
-      if (!val) {
-        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 })
-      }
-
-      let title = this.title
-      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 = ''
-      if (action === 'clone' || action === 'create') {
-        actionLabel = this.$t('Create')
-      } else if (action === 'update') {
-        actionLabel = this.$t('Update')
-      } else if (action === 'detail') {
-        actionLabel = this.$t('Detail')
-      }
-      title = actionLabel + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
-      return title
-    },
-    getDefaultDrawer(action) {
-      const route = this.$route.name
-      const actionRouteName = route.replace('List', toSentenceCase(action))
-      return this.getRouteNameComponent(actionRouteName, action)
-    },
-    getRouteNameComponent(name, action) {
-      const route = { name: name }
-      if (action === 'detail' || action === 'update') {
-        route.params = { id: '1' }
-      }
-      const routes = this.$router.resolve(route)
-      if (!routes) {
-        return
-      }
-      const matched = routes.resolved.matched.filter(item => item.name === name && item.components)
-      if (matched.length === 0) {
-        return
-      }
-
-      if (matched[0] && matched[0].components?.default) {
-        const component = matched[0].components.default
-        return component
-      }
-    },
-    resolveRoute(route) {
-      const routes = this.$router.resolve(route)
-      if (!routes) {
-        return
-      }
-      const matched = routes.resolved.matched.filter(item => item.name === route.name && item.components)
-      if (matched.length === 0) {
-        return
-      }
-      if (matched[0] && matched[0].components?.default) {
-        return matched[0]
-      }
-    },
-    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 = ''
-      }
-    },
-    reloadTable() {
-      if (this.reloadOrderQuery) {
-        this.iTableConfig.url = setUrlParam(this.iTableConfig.url, 'order', this.reloadOrderQuery)
-      }
-      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', {
-        action: 'clone', row: row, col: col, id: row.id
-      })
-      await this.showDrawer('clone', { query })
-    },
-    async onUpdate({ row, col, query = {}}) {
-      this.$route.params.id = row.id
-      this.$route.params.action = 'update'
-      await this.$store.dispatch('common/setDrawerActionMeta', {
-        action: 'update', row: row, col: col, id: row.id
-      })
-      await this.showDrawer('update', { query })
-    }
-  }
-}
-</script>
--- a/src/components/Table/InfoCardTable/Info.vue
+++ b/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>
--- a/src/components/Table/InfoCardTable/index.vue
+++ b/src/components/Table/InfoCardTable/index.vue
@@ -1,61 +0,0 @@
-<template>
-  <CardTable
-    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"
-      />
-    </template>
-  </CardTable>
-</template>
-
-<script type="text/jsx">
-import CardTable from '@/components/Table/CardTable/index.vue'
-import CardPanel from './Panel.vue'
-
-export default {
-  name: 'SmallCard',
-  components: {
-    CardPanel,
-    CardTable
-  },
-  props: {
-    tableConfig: {
-      type: Object,
-      default: () => ({})
-    },
-    subComponentProps: {
-      type: Object,
-      default: () => ({})
-    }
-  },
-  data() {
-    return {}
-  },
-  methods: {
-    reloadTable() {
-      this.$refs.table.reloadTable()
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.info-card-table {
-  ::v-deep {
-    div.the-card {
-      padding: 0;
-    }
-  }
-}
-</style>
--- a/src/components/Table/ListTable/QuickFilter.vue
+++ b/src/components/Table/ListTable/QuickFilter.vue
@@ -0,0 +1,263 @@
+<template>
+  <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">
+          <div>
+            <h5>{{ category.label }}</h5>
+            <div class="filter-options">
+              <span
+                v-for="option in category.options"
+                :key="option.label"
+                :class="option.active ? 'active' : ''"
+                class="item"
+                @click="handleFilterClick(option)"
+              >
+                {{ option.label }}
+                <i class="el-icon-circle-check" />
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div v-if="summary" class="summary-zone">
+        <span v-for="item of iSummary" :key="item.title" class="summary-block">
+          <SummaryCard
+            :class="item.active ? 'active' : ''"
+            :count="item.count"
+            :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>
+</template>
+
+<script>
+import SummaryCard from '@/components/Cards/SummaryCard'
+
+export default {
+  name: 'QuickFilter',
+  components: { SummaryCard },
+  props: {
+    filters: {
+      type: Array,
+      default: () => []
+    },
+    summary: {
+      type: Array,
+      default: null
+    },
+    expand: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      isExpand: this.expand,
+      iFilters: this.cleanFilters(),
+      iSummary: this.cleanSummary(),
+      filtered: {},
+      activeFilters: []
+    }
+  },
+  computed: {},
+  watch: {
+    isExpand(val) {
+      this.$emit('expand', val)
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    cleanSummary() {
+      if (!this.summary) {
+        return []
+      }
+      return this.summary.map(item => {
+        return {
+          category: 'summary',
+          label: item.title,
+          ...item,
+          filter: item.filter || {},
+          active: false
+        }
+      })
+    },
+    cleanFilters() {
+      if (!this.filters) {
+        return []
+      }
+      return this.filters.map(category => {
+        return {
+          ...category,
+          options: category.options.map(option => {
+            return {
+              category: category.label,
+              ...option,
+              active: false,
+              filter: option.filter || {}
+            }
+          })
+        }
+      })
+    },
+    toggle() {
+      this.isExpand = !this.isExpand
+    },
+    handleFilterClick(option) {
+      if (!option.active) {
+        this.activeFilters = this.activeFilters.filter(item => {
+          const conflict = Object.keys(item.filter).some(key => {
+            return Object.keys(option.filter).includes(key)
+          })
+          if (conflict) {
+            item.active = false
+          }
+          return !conflict
+        })
+        this.activeFilters.push(option)
+      } else {
+        this.activeFilters = this.activeFilters.filter(item => {
+          return item.label !== option.label && item.category !== option.category
+        })
+      }
+      option.active = !option.active
+      this.activeFilters.forEach(item => {
+        this.filtered = { ...item.filter }
+      })
+      this.$emit('filter', this.filtered)
+    }
+  }
+}
+</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);
+
+   &.shrink {
+     background: inherit;
+     padding: 0;
+     margin-bottom: 0;
+     box-shadow: none;
+   }
+
+   .quick-filter-wrap {
+     display: inline-block;
+     width: calc(100% - 70px);
+
+     .summary-zone {
+       padding-top: 10px;
+       display: flex;
+       justify-content: space-between;
+     }
+
+     .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;
+           }
+         }
+       }
+     }
+
+     .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;
+       }
+
+       .item-zone {
+         margin-right: 30px;
+         margin-bottom: 5px;
+       }
+
+       .item {
+         display: inline-block;
+         margin-right: 5px;
+         color: #303133;
+         font-size: 12px;
+         cursor: pointer;
+
+         i {
+           visibility: hidden;
+           margin-left: -3px;
+         }
+
+         &.active {
+           color: var(--color-primary);
+           font-weight: 500;
+
+           i {
+             visibility: visible;
+           }
+         }
+
+         &:hover {
+           color: var(--color-primary);
+         }
+       }
+
+       ul {
+         list-style: none outside none;
+         margin-block-start: 0;
+         padding-left: 0;
+       }
+     }
+   }
+ }
+
+ .filter-options {
+   display: block;
+ }
+
+ .expand-bar-wrap {
+   margin: auto 0;
+   min-width: 60px;
+
+   .expand-bar {
+     float: right;
+     display: block;
+     cursor: pointer;
+
+     i {
+       padding: 5px;
+
+       &.shrink {
+         transform: rotate(180deg);
+       }
+     }
+   }
+ }
+
+</style>
--- a/src/components/Table/ListTable/TableAction/ImportTable.vue
+++ b/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;
  }
--- a/src/components/Table/ListTable/TableAction/LeftSide.vue
+++ b/src/components/Table/ListTable/TableAction/LeftSide.vue
@@ -1,10 +1,16 @@
 <template>
-  <DataActions
-    v-if="hasLeftActions && iActions.length > 0"
-    :actions="iActions"
-    class="header-action"
-    v-bind="$attrs"
-  />
+  <div>
+    <DataActions
+      v-if="hasLeftActions && iActions.length > 0"
+      :actions="iActions"
+      class="header-action"
+      v-bind="$attrs"
+    />
+
+    <Drawer v-if="showDrawer" @close-drawer="handleCloseDrawer">
+      <component :is="dynamicTemplateComponent" />
+    </Drawer>
+  </div>
 </template>

 <script>
@@ -13,7 +19,9 @@ import { createSourceIdCache } from '@/api/common'
 import { getErrorResponseMsg } from '@/utils/common'

 import i18n from '@/i18n/i18n'
-import DataActions from '@/components/Common/DataActions/index.vue'
+import Drawer from '@/components/Drawer/index.vue'
+import DataActions from '@/components/DataActions/index.vue'
+import AccountTemplateCreate from '@/views/accounts/AccountTemplate/AccountTemplateCreateUpdate.vue'

 const defaultTrue = { type: [Boolean, Function, String], default: true }
 const defaultFalse = { type: [Boolean, Function, String], default: false }
@@ -21,7 +29,9 @@ const defaultFalse = { type: [Boolean, Function, String], default: false }
 export default {
  name: 'LeftSide',
  components: {
-    DataActions
+    Drawer,
+    DataActions,
+    AccountTemplateCreate
  },
  props: {
    hasLeftActions: defaultTrue,
@@ -33,10 +43,6 @@ export default {
        return this.$route.name?.replace('List', 'Create')
      }
    },
-    beforeCreate: {
-      type: Function,
-      default: () => null
-    },
    onCreate: {
      type: Function,
      default: null
@@ -81,10 +87,6 @@ export default {
      default: () => ([])
    },
    moreActionsTitle: {
-      type: String,
-      default: ''
-    },
-    moreActionsType: {
      type: String,
      default: null
    },
@@ -100,12 +102,14 @@ export default {
  data() {
    const vm = this
    return {
+      showDrawer: false,
+      dynamicTemplateComponent: null,
      defaultMoreActions: [
        {
          title: this.$t('DeleteSelected'),
          name: 'actionDeleteSelected',
          has: this.hasBulkDelete,
-          icon: 'trash',
+          icon: 'fa fa-trash-o',
          can({ selectedRows }) {
            return selectedRows.length > 0 && vm.canBulkDelete
          },
@@ -138,11 +142,7 @@ export default {
          has: this.hasCreate && !this.moreCreates,
          can: this.canCreate,
          icon: 'plus',
-          callback: () => {
-            this.beforeCreate()
-            const callback = this.onCreate || this.handleCreate
-            callback()
-          }
+          callback: this.onCreate || this.handleCreate
        }
      ]
      if (this.moreCreates) {
@@ -154,11 +154,7 @@ export default {
          icon: 'plus',
          can: this.canCreate,
          dropdown: [],
-          callback: () => {
-            this.beforeCreate()
-            const callback = this.onCreate || this.handleCreate
-            callback()
-          }
+          callback: this.onCreate || this.handleCreate
        }
        const createCreateAction = Object.assign(defaultMoreCreate, this.moreCreates)
        defaultActions.push(createCreateAction)
@@ -199,8 +195,7 @@ export default {
      return {
        name: 'moreActions',
        title: this.moreActionsTitle || this.$t('MoreActions'),
-        dropdown: dropdown,
-        type: this.moreActionsType
+        dropdown: dropdown
      }
    },
    hasSelectedRows() {
@@ -229,9 +224,20 @@ export default {
        const { href } = this.$router.resolve(route)
        window.open(href, '_blank')
      } else {
+        if (route.isPam) {
+          this.showDrawer = true
+          this.dynamicTemplateComponent = route.name
+
+          return
+        }
+
        this.$router.push(route)
      }
    },
+    handleCloseDrawer() {
+      this.showDrawer = false
+      this.dynamicTemplateComponent = null
+    },
    defaultBulkDeleteCallback({ selectedRows, reloadTable }) {
      const msg = this.$t('DeleteWarningMsg') + ' ' + selectedRows.length + ' ' + this.$t('Rows') + ' ?'
      const title = this.$tc('Info')
@@ -271,5 +277,16 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
+<style scoped lang="scss">
+::v-deep .ibox {
+  height: 100% !important;
+  margin: unset !important;
+  border: unset !important;
+
+  .el-card__body {
+    padding-top: unset !important;
+    padding-bottom: unset !important;
+    height: 100% !important;
+  }
+}
 </style>
--- a/src/components/Table/ListTable/TableAction/QuickFilter.vue
+++ b/src/components/Table/ListTable/TableAction/QuickFilter.vue
@@ -1,328 +0,0 @@
-<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-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">
-            <div>
-              <h5>{{ category.label }}</h5>
-              <div class="filter-options">
-                <span
-                  v-for="option in category.options"
-                  :key="option.label"
-                  :class="option.active ? 'active' : ''"
-                  class="item"
-                  @click="handleFilterClick(option)"
-                >
-                  {{ option.label }}
-                  <span v-if="option.hasCount">
-                    <span>({{ option.count }})</span>
-                  </span>
-                  <!--                  <i class="el-icon-circle-check" />-->
-                </span>
-              </div>
-            </div>
-          </div>
-        </div>
-        <div v-if="summary" class="summary-zone">
-          <span v-for="item of iSummary" :key="item.title" class="summary-block">
-            <SummaryCard
-              :class="item.active ? 'active' : ''"
-              :count="item.count"
-              :title="item.title"
-              @click="handleFilterClick(item)"
-            />
-          </span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import SummaryCard from '@/components/Cards/SummaryCard/index.vue'
-import { setUrlParam } from '@/utils/common'
-
-export default {
-  name: 'QuickFilter',
-  components: { SummaryCard },
-  props: {
-    filters: {
-      type: Array,
-      default: () => []
-    },
-    summary: {
-      type: Array,
-      default: null
-    },
-    expand: {
-      type: Boolean,
-      default: true
-    },
-    tableUrl: {
-      type: String,
-      default: ''
-    }
-  },
-  data() {
-    return {
-      iFilters: [],
-      iSummary: [],
-      filtered: {},
-      activeFilters: [],
-      reCount: false
-    }
-  },
-  computed: {
-    isExpand: {
-      set(val) {
-        this.$emit('update:expand', val)
-      },
-      get() {
-        return this.expand
-      }
-    }
-  },
-  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
-      }
-      if (!item.filter) {
-        return '-'
-      }
-      let url = this.tableUrl
-      for (const [k, v] of Object.entries({ ...item.filter, limit: 1 })) {
-        url = setUrlParam(url, k, v)
-      }
-      const res = await this.$axios.get(url, { raw: 1 })
-      item.count = res.data.count
-      return item.count
-    },
-    cleanSummary() {
-      if (!this.summary) {
-        return []
-      }
-      return this.summary.map(item => {
-        return {
-          category: 'summary',
-          label: item.title,
-          ...item,
-          count: null,
-          filter: item.filter || {},
-          active: false
-        }
-      })
-    },
-    cleanFilters() {
-      if (!this.filters) {
-        return []
-      }
-      return this.filters.map(category => {
-        return {
-          ...category,
-          options: category.options.map(option => {
-            return {
-              category: category.label,
-              ...option,
-              active: false,
-              filter: option.filter || {}
-            }
-          })
-        }
-      })
-    },
-    toggle() {
-      this.isExpand = !this.isExpand
-    },
-    handleFilterClick(option) {
-      if (!option.active) {
-        this.activeFilters = this.activeFilters.filter(item => {
-          const conflict = Object.keys(item.filter).some(key => {
-            return Object.keys(option.filter).includes(key)
-          })
-          if (conflict) {
-            item.active = false
-          }
-          return !conflict
-        })
-        this.activeFilters.push(option)
-      } else {
-        this.activeFilters = this.activeFilters.filter(item => {
-          return item.label !== option.label && item.category !== option.category
-        })
-      }
-      option.active = !option.active
-      this.filtered = this.activeFilters.reduce((acc, item) => {
-        return { ...acc, ...item.filter }
-      }, {})
-      this.$emit('filter', this.filtered)
-    }
-  }
-}
-</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);
-
-  &.shrink {
-    background: inherit;
-    padding: 0;
-    margin-bottom: 0;
-    box-shadow: none;
-  }
-
-  .quick-filter-wrap {
-    display: inline-block;
-    width: calc(100% - 70px);
-
-    .summary-zone {
-      padding-top: 10px;
-      display: flex;
-      justify-content: space-between;
-    }
-
-    .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;
-          }
-        }
-      }
-    }
-
-    .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;
-      }
-
-      .item-zone {
-        margin-right: 30px;
-        margin-bottom: 5px;
-      }
-
-      .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;
-        }
-
-        &:last-child::after {
-          display: none;
-        }
-
-        i {
-          visibility: hidden;
-          margin-left: -3px;
-        }
-
-        &.active {
-          color: var(--color-primary);
-
-          i {
-            visibility: visible;
-          }
-        }
-
-        &:hover {
-          color: var(--color-primary);
-        }
-      }
-
-      ul {
-        list-style: none outside none;
-        margin-block-start: 0;
-        padding-left: 0;
-      }
-    }
-  }
-}
-
-.filter-options {
-  display: block;
-}
-
-.expand-bar-wrap {
-  margin: auto 0;
-  min-width: 60px;
-
-  .expand-bar {
-    float: right;
-    display: block;
-    cursor: pointer;
-
-    i {
-      padding: 5px;
-
-      &.shrink {
-        transform: rotate(180deg);
-      }
-    }
-  }
-}
-
-</style>
--- a/src/components/Table/ListTable/TableAction/RightSide.vue
+++ b/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'
@@ -40,8 +40,8 @@ export default {
    handleExportClick: {
      type: Function,
      default: function({ selectedRows }) {
-        // const { exportOptions, tableUrl } = this
-        const url = this.iExportOptions.url
+        const { exportOptions, tableUrl } = this
+        const url = exportOptions?.url ? exportOptions.url : tableUrl
        this.dialogExportVisible = true
        this.$nextTick(() => {
          this.$eventBus.$emit('showExportDialog', { selectedRows, url, name: this.name })
@@ -98,27 +98,15 @@ export default {
    canBulkUpdate: {
      type: [Boolean, Function, String],
      default: false
-    },
-    hasQuickFilter: defaultTrue,
-    quickFilterExpand: {
-      type: Boolean,
-      default: true
    }
  },
  data() {
    return {
      defaultRightSideActions: [
-        {
-          name: 'actionFilter',
-          icon: 'filter',
-          tip: this.$t('Filter'),
-          has: this.hasQuickFilter,
-          callback: this.handleFilterClick.bind(this)
-        },
        {
          name: 'actionSetting',
          icon: 'system-setting',
-          tip: this.$t('ListPreference'),
+          tip: this.$t('TableSetting'),
          has: this.hasColumnSetting,
          callback: this.handleTableSettingClick.bind(this)
        },
@@ -167,24 +155,10 @@ export default {
      })
    },
    iExportOptions() {
-      /**
-       *  原本是使用 assignIfNot 此函数内部使用 partialRight, 该函数
-       *  只在目标对象的属性未定义时才从源对象复制属性，如果目标对象已经有值，则保留原值
-       *  那如果首次点击的树节点，那么此时 url 就会被确定，后续点击的树节点，那么 url 就将不会携带节点信息
-       *
-       */
-      // return assignIfNot(this.exportOptions, { url: this.tableUrl })
-
-      return {
-        url: this.tableUrl,
-        ...this.exportOptions
-      }
+      return assignIfNot(this.exportOptions, { url: this.tableUrl })
    }
  },
  methods: {
-    handleFilterClick() {
-      this.$emit('update:quick-filter-expand', !this.quickFilterExpand)
-    },
    handleTagSearch(val) {
      this.searchTable(val)
    },
--- a/src/components/Table/ListTable/index.vue
+++ b/src/components/Table/ListTable/index.vue
@@ -1,18 +1,9 @@
 <template>
  <div>
-    <QuickFilter
-      :expand.sync="filterExpand"
-      :filters="quickFilters"
-      :summary="quickSummary"
-      :table-url="tableUrl"
-      @filter="filter"
-    />
+    <QuickFilter :filters="quickFilters" :summary="quickSummary" @filter="filter" />
    <TableAction
      v-if="hasActions"
-      :class="{'filter-expand': filterExpand}"
      :date-pick="handleDateChange"
-      :has-quick-filter="iHasQuickFilter"
-      :quick-filter-expand.sync="filterExpand"
      :reload-table="reloadTable"
      :search-table="search"
      :selected-rows="selectedRows"
@@ -20,7 +11,7 @@
      v-bind="iHeaderActions"
      @done="handleActionInitialDone"
    />
-    <IBox v-loading="!actionInit" class="table-content">
+    <IBox class="table-content">
      <AutoDataTable
        v-if="actionInit"
        ref="dataTable"
@@ -37,13 +28,12 @@
 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'
-import QuickFilter from './TableAction/QuickFilter.vue'
+import QuickFilter from './QuickFilter.vue'
 import { getDayEnd, getDaysAgo } from '@/utils/time'
-import { ObjectLocalStorage } from '@/utils/common'

 export default {
  name: 'ListTable',
@@ -100,36 +90,13 @@ export default {
      isDeactivated: false,
      extraQuery: extraQuery,
      actionInit: this.headerActions.has === false,
-      initQuery: {},
-      tablePath: new URL(this.tableConfig.url || '', 'http://127.0.0.1').pathname,
-      objStorage: new ObjectLocalStorage('filterExpand'),
-      iFilterExpand: null,
-      reloadTable: _.debounce(this._reloadTable, 300)
+      initQuery: {}
    }
  },
  computed: {
    ...mapGetters(['currentOrgIsRoot']),
-    filterExpand: {
-      get() {
-        if (this.iFilterExpand !== null) {
-          return this.iFilterExpand
-        }
-        return this.objStorage.get(this.tablePath)
-      },
-      set(val) {
-        this.iFilterExpand = val
-        this.objStorage.set(this.tablePath, val)
-      }
-    },
-    iHasQuickFilter() {
-      const has =
-        (this.quickFilters && this.quickFilters.length > 0) ||
-        (this.quickSummary && this.quickSummary.length > 0)
-
-      return !!has
-    },
    dataTable() {
-      return this.$refs.dataTable?.$refs.dataTable
+      return this.$refs.dataTable.$refs.dataTable
    },
    iHeaderActions() {
      // 如果路由中锁定了 root 组织，就不在检查 root 组织下是否可以创建等
@@ -252,9 +219,6 @@ export default {
    })
  },
  methods: {
-    handleFilterExpandChanged(expand) {
-      this.filterExpand = expand
-    },
    handleQuickFilter(option) {
      if (option.route) {
        this.$router.push(option.route)
@@ -282,7 +246,7 @@ export default {
    handleSelectionChange(val) {
      this.selectedRows = val
    },
-    _reloadTable() {
+    reloadTable() {
      this.dataTable?.getList()
    },
    updateInitQuery(attrs) {
@@ -348,12 +312,6 @@ export default {
 </script>

 <style lang="scss" scoped>
-.filter-expand {
-  &::v-deep button.actionFilter {
-    background-color: rgb(0, 0, 0, 0.08) !important;
-  }
-}
-
 .table-content {
  margin-top: 10px;

--- a/src/components/Table/TableFormatters/AccountConnectFormatter.vue
+++ b/src/components/Table/TableFormatters/AccountConnectFormatter.vue
@@ -1,142 +0,0 @@
-<template>
-  <div>
-    <el-dropdown
-      :disabled="!hasPerm"
-      :show-timeout="500"
-      class="action-connect"
-      size="small"
-      trigger="hover"
-      type="primary"
-      @command="handleProtocolConnect"
-      @visible-change="visibleChange"
-    >
-      <el-button
-        plain
-        size="mini"
-        type="primary"
-        :disabled="!hasPerm"
-        @click="handleBtnConnect"
-      >
-        <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>
-</template>
-
-<script>
-import BaseFormatter from './base.vue'
-
-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}
-            `.replace(/\s+/g, '')
-          },
-          asset: null,
-          assetUrl: '/api/v1/assets/assets/{id}/',
-          buttonIcon: 'fa fa-desktop'
-        }
-      }
-    }
-  },
-  data() {
-    return {
-      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs),
-      protocols: [],
-      isClick: false,
-      getProtocolsLoading: false,
-      dropdownTitle: this.$t('Protocols')
-    }
-  },
-  computed: {
-    iButtonIcon() {
-      return this.formatterArgs.buttonIcon
-    },
-    hasPerm() {
-      return this.formatterArgs.can({ row: this.row, cellValue: this.cellValue })
-    }
-  },
-  methods: {
-    handleProtocolConnect(protocol) {
-      const url = this.formatterArgs.getConnectUrl(this.row, protocol, this.formatterArgs.asset)
-      window.open(url, '_blank')
-    },
-    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)
-      }
-
-      if (this.protocols.length > 0) {
-        this.handleProtocolConnect(this.protocols[0].name)
-      }
-      setTimeout(() => {
-        this.isClick = false
-      }, 1000)
-    },
-    async getProtocols(assetId) {
-      if (this.protocols.length > 0) return
-      try {
-        const url = this.formatterArgs.assetUrl.replace('{id}', assetId)
-        const res = await this.$axios.get(url)
-
-        // TODO 暂时将 sftp 隐藏
-        this.protocols = res.protocols.filter(protocol => (protocol.name !== 'sftp') && (protocol.name !== 'winrm')) || []
-      } catch (e) {
-        throw new Error(`Error getting protocols: ${e}`)
-      }
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.el-dropdown-menu__item.is-disabled {
-  font-weight: 500;
-  color: var(--el-text-color-secondary);
-}
-
-::v-deep .el-dropdown-menu__item {
-  transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
-  overflow: hidden;
-}
-
-::v-deep .el-dropdown-menu {
-  transition: min-height 0.3s ease-in-out;
-}
-</style>
--- a/src/components/Table/TableFormatters/AccountInfoFormatter.vue
+++ b/src/components/Table/TableFormatters/AccountInfoFormatter.vue
@@ -5,17 +5,15 @@
    trigger="click"
    @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>

@@ -29,8 +27,7 @@ export default {
    return {
      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs),
      value: this.cellValue,
-      accountData: [],
-      loading: false
+      accountData: []
    }
  },
  computed: {
@@ -39,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
      })
    }
  }
--- a/src/components/Table/TableFormatters/ActionsFormatter.vue
+++ b/src/components/Table/TableFormatters/ActionsFormatter.vue
@@ -10,8 +10,8 @@
 </template>

 <script>
+import ActionsGroup from '@/components/ActionsGroup/index.vue'
 import BaseFormatter from './base.vue'
-import ActionsGroup from '@/components/Common/ActionsGroup/index.vue'

 const defaultPerformDelete = function({ row, col }) {
  const id = row.id
@@ -33,23 +33,6 @@ const defaultUpdateCallback = function({ row, col }) {
  } else {
    route.name = updateRoute
  }
-
-  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)
 }

@@ -121,10 +104,9 @@ export default {
          cloneRoute: this.$route.name.replace('List', 'Create'),
          performDelete: defaultPerformDelete,
          onUpdate: defaultUpdateCallback,
-          onView: defaultViewCallback,
          onDelete: defaultDeleteCallback,
          onClone: defaultCloneCallback,
-          extraActions: []
+          extraActions: [] // format see defaultActions
        }
      }
    }
@@ -164,8 +146,8 @@ export default {
      colActions: colActions,
      defaultActions: defaultActions,
      extraActions: colActions.extraActions,
-      // moreActionsTitle: colActions.moreActionsTitle || null
      moreActionsTitle: ''
+      // moreActionsTitle: colActions.moreActionsTitle || null
    }
  },
  computed: {
@@ -241,7 +223,7 @@ export default {
 }
 </script>

-<style lang="scss" scoped>
+<style scoped>
 .table-actions {
  ::v-deep {
    .el-icon-arrow-down {
--- a/src/components/Table/TableFormatters/AmountFormatter.vue
+++ b/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: ''
        }
      }
    }
--- a/src/components/Table/TableFormatters/ChoicesFormatter.vue
+++ b/src/components/Table/TableFormatters/ChoicesFormatter.vue
@@ -12,42 +12,8 @@
 </template>

 <script>
-import i18n from '@/i18n/i18n'
 import BaseFormatter from './base.vue'

-const formatterArgsDefault = {
-  faChoices: {
-    true: 'fa-check-circle',
-    false: 'fa-times-circle'
-  },
-  classChoices: {
-    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 })
-    return (cellValue && typeof cellValue === 'object') ? cellValue.label : this.textChoices[key] || cellValue
-  },
-  getIcon({ row, cellValue }) {
-    const key = this.getKey({ row, cellValue })
-    return this.faChoices[key]
-  },
-  hasTips: false,
-  showIcon: true,
-  showText: true,
-  showFalse: true,
-  getTips: ({ row, cellValue }) => {
-    return cellValue
-  }
-}
-
 export default {
  name: 'ChoicesFormatter',
  extends: BaseFormatter,
@@ -55,22 +21,51 @@ export default {
    formatterArgsDefault: {
      type: Object,
      default() {
-        return { ...formatterArgsDefault }
+        return {
+          faChoices: {
+            true: 'fa-check-circle',
+            false: 'fa-times-circle'
+          },
+          classChoices: {
+            true: 'text-primary',
+            false: 'text-danger'
+          },
+          textChoices: {
+            true: this.$t('Yes'),
+            false: this.$t('No')
+          },
+          getKey({ row, cellValue }) {
+            return (cellValue && typeof cellValue === 'object') ? cellValue.value : cellValue
+          },
+          getText({ row, cellValue }) {
+            const key = this.getKey({ row, cellValue })
+            return (cellValue && typeof cellValue === 'object') ? cellValue.label : this.textChoices[key] || cellValue
+          },
+          getIcon({ row, cellValue }) {
+            const key = this.getKey({ row, cellValue })
+            return this.faChoices[key]
+          },
+          hasTips: false,
+          showIcon: true,
+          showText: true,
+          showFalse: true,
+          getTips: ({ row, cellValue }) => {
+            return cellValue
+          }
+        }
      }
    }
  },
-  formatterArgsDefault: formatterArgsDefault,
  data() {
    return {
-      formatterArgs: Object.assign({}, this.formatterArgsDefault, this.col.formatterArgs)
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
    }
  },
  computed: {
    key() {
-      const k = this.formatterArgs.getKey(
+      return this.formatterArgs.getKey(
        { row: this.row, cellValue: this.cellValue }
      )
-      return k
    },
    icon() {
      const icon = this.formatterArgs.getIcon(
--- a/Show More
+++ b/Show More