Fixed: Task Click

perf: 优化一下 form group
perf: update copy icon (#4692 )
2026-01-14 11:55:34 +00:00 · 2025-02-27 18:48:40 +08:00 · 2025-02-27 18:31:07 +08:00 · 2025-02-27 17:13:03 +08:00 · 2025-02-26 14:50:17 +08:00 · 2025-02-26 11:52:15 +08:00
417 changed files with 14907 additions and 4221 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,5 @@ tests/**/coverage/
 *.sln
 .env.development
 .python-version
 helper.json
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -5,5 +5,6 @@
        "@/*": ["src/*"]
    }
  },
  "include": ["src"],
  "exclude": ["node_modules", "dist"]
 }
--- a/package.json
+++ b/package.json
@@ -94,6 +94,7 @@
    "@vue/cli-plugin-unit-jest": "3.6.3",
    "@vue/cli-service": "3.6.0",
    "@vue/test-utils": "1.0.0-beta.29",
    "@vue/runtime-dom": "3.5.13",
    "autoprefixer": "^9.5.1",
    "babel-core": "7.0.0-bridge.0",
    "babel-eslint": "10.0.1",
@@ -120,7 +121,7 @@
    "serve-static": "^1.16.0",
    "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"
  },
--- a/public/index.html
+++ b/public/index.html
@@ -2,37 +2,70 @@
 <html>
  <head>
    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
-    <meta http-equiv="Expires" content="0">
+    <meta content="0" http-equiv="Expires">
-    <meta http-equiv="Pragma" content="no-cache">
+    <meta content="no-cache" http-equiv="Pragma">
-    <meta http-equiv="Cache-control" content="no-cache">
+    <meta content="no-cache" http-equiv="Cache-control">
-    <meta http-equiv="Cache" content="no-cache">
+    <meta content="no-cache" http-equiv="Cache">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <title><%= webpackConfig.name %></title>
-    <link rel="stylesheet" href="<%= BASE_URL %>theme/element-ui.css">
+    <link href="<%= BASE_URL %>theme/element-ui.css" rel="stylesheet">
    <style>
        #loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: white;
            z-index: 9999;
        }
        .spinner {
            width: 50px;
            height: 50px;
            border: 5px solid rgba(0, 0, 0, 0.1);
            border-radius: 50%;
            border-top-color: #3498db;
            animation: spin 1s infinite linear;
        }
        @keyframes spin {
            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() {
+      window.onload = function () {
-        if (location.pathname === '/') {
+          if (location.pathname === '/') {
-           location.pathname = '/ui/'
+              location.pathname = '/ui/'
-        }
+          }
-        const pathname = window.location.pathname
+          const pathname = window.location.pathname
-        if (pathname.startsWith('/core')) {
+          if (pathname.startsWith('/core')) {
-            return
+              return
-        }
+          }
-        if(pathname.indexOf('/ui') === -1) {
+          if (pathname.indexOf('/ui') === -1) {
-          window.location.href = window.location.origin + '/ui/#' + pathname
+              window.location.href = window.location.origin + '/ui/#' + pathname
-        }
+          }
-        if (pathname.startsWith('/ui/#/chat')) {
+          if (pathname.startsWith('/ui/#/chat')) {
-          window.location.href = window.location.origin + pathname
+              window.location.href = window.location.origin + pathname
-        }
+          }
      }
    </script>
-    <div id="app"></div>
+    <div id="app">
    </div>
    <div id="loading">
      <div class="spinner"></div>
    </div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- a/src/assets/img/deepSeek.png
+++ b/src/assets/img/deepSeek.png
--- a/src/components/Apps/AccountCreateUpdateForm/const.js
+++ b/src/components/Apps/AccountCreateUpdateForm/const.js
@@ -5,6 +5,7 @@ import AutomationParamsForm from '@/views/assets/Platform/AutomationParamsSettin
 export const accountFieldsMeta = (vm) => {
  const defaultPrivilegedAccounts = ['root', 'administrator']
  return {
    assets: {
      component: Select2,
@@ -27,6 +28,9 @@ export const accountFieldsMeta = (vm) => {
      component: Select2,
      rules: [Required],
      el: {
        get disabled() {
          return vm.isDisabled
        },
        multiple: false,
        ajax: {
          url: '/api/v1/accounts/account-templates/',
@@ -43,6 +47,11 @@ export const accountFieldsMeta = (vm) => {
      rules: [Required],
      label: vm.$t('AccountPolicy'),
      helpTip: vm.$t('AccountPolicyHelpText'),
      el: {
        get disabled() {
          return vm.isDisabled
        }
      },
      hidden: () => {
        return vm.platform || vm.asset
      }
@@ -50,6 +59,11 @@ export const accountFieldsMeta = (vm) => {
    name: {
      label: vm.$t('Name'),
      rules: [RequiredChange],
      el: {
        get disabled() {
          return vm.isDisabled
        }
      },
      on: {
        input: ([value], updateForm) => {
          if (!vm.usernameChanged) {
@@ -69,7 +83,9 @@ export const accountFieldsMeta = (vm) => {
    },
    username: {
      el: {
-        disabled: !!vm.account?.name
+        get disabled() {
          return !!vm.account?.name || vm.isDisabled
        }
      },
      on: {
        input: ([value], updateForm) => {
@@ -88,6 +104,11 @@ export const accountFieldsMeta = (vm) => {
    },
    privileged: {
      label: vm.$t('Privileged'),
      el: {
        get disabled() {
          return vm.isDisabled
        }
      },
      hidden: () => {
        return vm.addTemplate
      }
@@ -100,6 +121,11 @@ export const accountFieldsMeta = (vm) => {
      el: {
        multiple: false,
        clearable: true,
        disabled: {
          get disabled() {
            return vm.isDisabled
          }
        },
        ajax: {
          url: `/api/v1/accounts/accounts/su-from-accounts/?account=${vm.account?.id || ''}&asset=${vm.asset?.id || ''}`,
          transformOption: (item) => {
@@ -110,6 +136,11 @@ export const accountFieldsMeta = (vm) => {
    },
    su_from_username: {
      label: vm.$t('UserSwitchFrom'),
      el: {
        get disabled() {
          return vm.isDisabled
        }
      },
      hidden: (formValue) => {
        return vm.platform || vm.asset || vm.addTemplate
      }
@@ -117,6 +148,11 @@ export const accountFieldsMeta = (vm) => {
    password: {
      label: vm.$t('Password'),
      component: UpdateToken,
      el: {
        get disabled() {
          return vm.isDisabled
        }
      },
      hidden: (formValue) => {
        return formValue.secret_type !== 'password' || vm.addTemplate
      }
@@ -124,33 +160,63 @@ export const accountFieldsMeta = (vm) => {
    ssh_key: {
      label: vm.$t('PrivateKey'),
      component: UploadSecret,
      el: {
        get disabled() {
          return vm.isDisabled
        }
      },
      hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
    },
    passphrase: {
      label: vm.$t('Passphrase'),
      component: UpdateToken,
      el: {
        get disabled() {
          return vm.isDisabled
        }
      },
      hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
    },
    token: {
      label: vm.$t('Token'),
      component: UploadSecret,
      el: {
        get disabled() {
          return vm.isDisabled
        }
      },
      hidden: (formValue) => formValue.secret_type !== 'token' || vm.addTemplate
    },
    access_key: {
      id: 'access_key',
      label: vm.$t('AccessKey'),
      component: UploadSecret,
      el: {
        get disabled() {
          return vm.isDisabled
        }
      },
      hidden: (formValue) => formValue.secret_type !== 'access_key' || vm.addTemplate
    },
    api_key: {
      id: 'api_key',
      label: vm.$t('ApiKey'),
      component: UploadSecret,
      el: {
        get disabled() {
          return vm.isDisabled
        }
      },
      hidden: (formValue) => formValue.secret_type !== 'api_key' || vm.addTemplate
    },
    secret_type: {
      type: 'radio-group',
      options: [],
      el: {
        get disabled() {
          return vm.isDisabled
        }
      },
      hidden: () => {
        return vm.addTemplate
      }
@@ -163,7 +229,8 @@ export const accountFieldsMeta = (vm) => {
          !automation.ansible_enabled ||
          !vm.$hasPerm('accounts.push_account') ||
          (formValue.secret_type === 'ssh_key' && vm.iPlatform.type.value === 'windows') ||
-          vm.addTemplate
+          vm.addTemplate ||
          !formValue.secret_reset
      }
    },
    params: {
@@ -184,12 +251,27 @@ export const accountFieldsMeta = (vm) => {
      }
    },
    is_active: {
-      label: vm.$t('IsActive')
+      label: vm.$t('IsActive'),
      el: {
        get disabled() {
          return vm.isDisabled
        }
      }
    },
    comment: {
      label: vm.$t('Comment'),
-      hidden: () => {
+      el: {
-        return vm.addTemplate
+        get disabled() {
          return vm.isDisabled
        }
      }
    },
    secret_reset: {
      label: vm.$t('SecretReset'),
      el: {
        get disabled() {
          return vm.isDisabled
        }
      }
    }
  }
--- a/src/components/Apps/AccountCreateUpdateForm/index.vue
+++ b/src/components/Apps/AccountCreateUpdateForm/index.vue
@@ -45,6 +45,7 @@ export default {
  data() {
    return {
      loading: true,
      isDisabled: false,
      usernameChanged: false,
      submitBtnText: this.$t('Confirm'),
      iPlatform: {
@@ -61,11 +62,12 @@ export default {
      form: Object.assign({ 'on_invalid': 'error' }, this.account || {}),
      encryptedFields: ['secret'],
      fields: [
-        [this.$t('AccountTemplate'), ['template']],
+        [this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
-        [this.$t('Basic'), ['assets', 'name', 'username', 'privileged', 'su_from', 'su_from_username']],
+        [this.$t('Assets'), ['assets']],
        [this.$t('Secret'), [
          'secret_type', 'password', 'ssh_key', 'token',
-          'access_key', 'passphrase', 'api_key'
+          'access_key', 'passphrase', 'api_key',
          'secret_reset'
        ]],
        [this.$t('Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']]
      ],
@@ -73,6 +75,16 @@ export default {
      hasSaveContinue: false
    }
  },
  watch: {
    '$route.query': {
      handler(nv, ov) {
        if (nv && (nv.flag === 'move' || nv.flag === 'copy')) {
          this.isDisabled = true
        }
      },
      immediate: true
    }
  },
  async mounted() {
    try {
      await this.getPlatform()
@@ -145,7 +157,11 @@ export default {
        delete form['secret']
      }
      if (this.account?.name) {
-        this.$emit('edit', form)
+        if (this.account.payload && this.account.payload === 'pam_account_clone') {
          this.$emit('add', form)
        } else {
          this.$emit('edit', form)
        }
      } else {
        this.$emit('add', form)
      }
@@ -157,16 +173,16 @@ export default {
 <style lang='scss' scoped>
 .account-add {
  ::v-deep .el-form-item {
-    margin-bottom: 5px;
+    //margin-bottom: 5px;
    .help-block {
-      margin-bottom: 5px;
+      //margin-bottom: 5px;
    }
  }
  ::v-deep .form-group-header {
    .hr-line-dashed {
-      margin: 5px 0;
+      //margin: 5px 0;
    }
    h3 {
--- a/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
+++ b/src/components/Apps/AccountListTable/AccountCreateUpdate.vue
@@ -1,36 +1,38 @@
-<template>
+<template v-if="iVisible">
-  <Dialog
+  <Drawer
    v-if="iVisible"
    :close-on-click-modal="false"
    :destroy-on-close="true"
    :show-cancel="false"
    :show-confirm="false"
    :title="title"
-    :visible.sync="iVisible"
+    :visible="iVisible"
-    v-bind="$attrs"
+    class="drawer"
-    width="900px"
+    @close-drawer="handleCloseDrawer"
    v-on="$listeners"
  >
-    <AccountCreateUpdateForm
+    <Page :title="'null'">
-      v-if="!loading"
+      <IBox class="content">
-      ref="form"
+        <AccountCreateUpdateForm
-      :account="account"
+          v-if="!loading"
-      :add-template="addTemplate"
+          ref="form"
-      :asset="asset"
+          :account="account"
-      @add="addAccount"
+          :add-template="addTemplate"
-      @edit="editAccount"
+          :asset="asset"
-    />
+          @add="addAccount"
-  </Dialog>
+          @edit="editAccount"
        />
      </IBox>
    </Page>
  </Drawer>
 </template>
 <script>
-import Dialog from '@/components/Dialog/index.vue'
+import Drawer from '@/components/Drawer/index.vue'
 import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
 import IBox from '@/components/IBox/index.vue'
 import Page from '@/layout/components/Page/index.vue'
 export default {
  name: 'CreateAccountDialog',
  components: {
-    Dialog,
+    IBox,
    Drawer,
    Page,
    AccountCreateUpdateForm
  },
  props: {
@@ -111,11 +113,22 @@ export default {
    },
    editAccount(form) {
      const data = { ...form }
-      this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
+      const flag = this.$route.query.flag
-        this.iVisible = false
+
-        this.$emit('add', true)
+      switch (flag) {
-        this.$message.success(this.$tc('UpdateSuccessMsg'))
+        case 'copy':
-      }).catch(error => this.setFieldError(error))
+          this.handleAccountOperation(this.account.id, 'copy-to-assets', data)
          break
        case 'move':
          this.handleAccountOperation(this.account.id, 'move-to-assets', data)
          break
        default:
          this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
            this.iVisible = false
            this.$emit('add', true)
            this.$message.success(this.$tc('UpdateSuccessMsg'))
          }).catch(error => this.setFieldError(error))
      }
    },
    handleResult(resp, error) {
      let bulkCreate = !this.asset
@@ -168,7 +181,29 @@ export default {
          refsAutoDataForm.setFieldError(current, err)
        }
      }
    },
    handleCloseDrawer() {
      this.iVisible = false
      Reflect.deleteProperty(this.$route.query, 'flag')
    },
    handleAccountOperation(id, path, data) {
      this.$axios.post(`/api/v1/accounts/accounts/${id}/${path}/`, data).then((res) => {
        this.iVisible = false
        this.$emit('add', true)
        this.handleResult(res, null)
      }).catch(error => this.handleResult(null, error))
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 .drawer {
  ::v-deep .el-drawer__body {
    .el-form {
      margin-right: 30px;
    }
  }
 }
 </style>
--- a/src/components/Apps/AccountListTable/AccountList.vue
+++ b/src/components/Apps/AccountListTable/AccountList.vue
@@ -1,6 +1,12 @@
 <template>
  <div>
-    <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
+    <DrawerListTable
      ref="ListTable"
      :detail-drawer="detailDrawer"
      :header-actions="headerActions"
      :quick-filters="quickFilters"
      :table-config="tableConfig"
    />
    <ViewSecret
      v-if="showViewSecretDialog"
      :account="account"
@@ -16,22 +22,13 @@
    <AccountCreateUpdate
      v-if="showAddDialog"
      :account="account"
      :add-template="addTemplate"
      :asset="iAsset"
      :title="accountCreateUpdateTitle"
      :visible.sync="showAddDialog"
      @add="addAccountSuccess"
      @bulk-create-done="showBulkCreateResult($event)"
    />
    <AccountCreateUpdate
      v-if="showAddTemplateDialog"
      :account="account"
      :add-template="true"
      :asset="iAsset"
      :title="accountCreateByTemplateTitle"
      :visible.sync="showAddTemplateDialog"
      @add="addAccountSuccess"
      @bulk-create-done="showBulkCreateResult($event)"
    />
    <ResultDialog
      v-if="showResultDialog"
      :result="createAccountResults"
@@ -44,29 +41,36 @@
      v-bind="updateSelectedDialogSetting"
      @update="handleAccountBulkUpdate"
    />
    <PasswordHistoryDialog
      v-if="showPasswordHistoryDialog"
      :account="currentAccountColumn"
      :visible.sync="showPasswordHistoryDialog"
    />
  </div>
 </template>
 <script>
-import ListTable from '@/components/Table/ListTable/index.vue'
+import { accountOtherActions, accountQuickFilters, connectivityMeta } from './const'
-import { ActionsFormatter } from '@/components/Table/TableFormatters'
+import { openTaskPage } from '@/utils/jms'
 import { ActionsFormatter, PlatformFormatter, SecretViewerFormatter, AccountConnectFormatter } from '@/components/Table/TableFormatters'
 import ViewSecret from './ViewSecret.vue'
 import UpdateSecretInfo from './UpdateSecretInfo.vue'
 import AccountCreateUpdate from './AccountCreateUpdate.vue'
 import { connectivityMeta } from './const'
 import { openTaskPage } from '@/utils/jms'
 import ResultDialog from './BulkCreateResultDialog.vue'
 import AccountCreateUpdate from './AccountCreateUpdate.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
 import DrawerListTable from '@/components/Table/DrawerListTable/index.vue'
 import AccountBulkUpdateDialog from '@/components/Apps/AccountListTable/AccountBulkUpdateDialog.vue'
 export default {
  name: 'AccountListTable',
  components: {
    AccountBulkUpdateDialog,
    ResultDialog,
    ListTable,
    UpdateSecretInfo,
    ViewSecret,
-    AccountCreateUpdate
+    ResultDialog,
    DrawerListTable,
    UpdateSecretInfo,
    AccountCreateUpdate,
    PasswordHistoryDialog,
    AccountBulkUpdateDialog
  },
  props: {
    url: {
@@ -89,7 +93,7 @@ export default {
    },
    hasClone: {
      type: Boolean,
-      default: false
+      default: true
    },
    asset: {
      type: Object,
@@ -119,7 +123,7 @@ export default {
    columnsDefault: {
      type: Array,
      default: () => ([
-        'name', 'username', 'asset', 'date_updated'
+        'name', 'username', 'secret', 'asset', 'platform', 'connect'
      ])
    },
    headerExtraActions: {
@@ -129,22 +133,29 @@ export default {
    extraQuery: {
      type: Object,
      default: () => ({})
    },
    showQuickFilters: {
      type: Boolean,
      default: true
    }
  },
  data() {
    const vm = this
    return {
      addTemplate: false,
      currentAccountColumn: {},
      showPasswordHistoryDialog: false,
      showViewSecretDialog: false,
      showUpdateSecretDialog: false,
      showResultDialog: false,
      showAddDialog: false,
      showAddTemplateDialog: false,
      detailDrawer: () => import('@/views/accounts/Account/AccountDetail/index.vue'),
      createAccountResults: [],
      accountCreateUpdateTitle: this.$t('AddAccount'),
      accountCreateByTemplateTitle: this.$t('AddAccountByTemplate'),
      iAsset: this.asset,
      account: {},
      secretUrl: '',
      quickFilters: this.showQuickFilters ? accountQuickFilters(this) : [],
      tableConfig: {
        url: this.url,
        permissions: {
@@ -153,6 +164,7 @@ export default {
        },
        extraQuery: this.extraQuery,
        columnsExclude: ['spec_info'],
        columnsAdd: ['secret', 'platform', 'connect'],
        columnsShow: {
          min: ['name', 'username', 'actions'],
          default: this.columnsDefault
@@ -160,29 +172,50 @@ export default {
        columnsMeta: {
          name: {
            width: '120px',
-            formatter: function(row) {
+            formatterArgs: {
-              const to = {
+              can: () => vm.$hasPerm('accounts.view_account'),
-                name: 'AssetAccountDetail',
+              getDrawerTitle({ row }) {
-                params: { id: row.id }
+                return `${row.username}@${row.asset.name}`
              }
-              if (vm.$hasPerm('accounts.view_account')) {
+            }
-                return <router-link to={to}>{row.name}</router-link>
+          },
-              } else {
+          secret: {
-                return <span>{row.name}</span>
+            formatter: SecretViewerFormatter,
            width: '130px',
            formatterArgs: {
              secretFrom: 'api',
              hasDownload: false,
              actionLeft: true
            }
          },
          connect: {
            label: this.$t('Connect'),
            width: '80px',
            formatter: AccountConnectFormatter,
            formatterArgs: {
              buttonIcon: 'fa fa-desktop',
              titleText: '可选协议',
              url: '/api/v1/assets/assets/{id}',
              connectUrlTemplate: (row) => `/luna/pam_connect/${row.id}/${row.username}/${row.asset.id}/${row.asset.name}/`,
              setMapItem: (id, protocol) => {
                this.$store.commit('table/SET_PROTOCOL_MAP_ITEM', {
                  key: id,
                  value: protocol
                })
              }
            }
          },
          platform: {
            label: this.$t('Platform'),
            width: '120px',
            formatter: PlatformFormatter,
            formatterArgs: {
              platformAttr: 'asset.platform'
            }
          },
          asset: {
            formatter: function(row) {
-              const to = {
+              return row.asset.name
                name: 'AssetDetail',
                params: { id: row.asset.id }
              }
              if (vm.$hasPerm('assets.view_asset')) {
                return <router-link to={to}>{row.asset.name}</router-link>
              } else {
                return <span>{row.asset.name}</span>
              }
            }
          },
          username: {
@@ -216,75 +249,11 @@ export default {
            formatter: ActionsFormatter,
            formatterArgs: {
              hasUpdate: false, // can set function(row, value)
-              hasDelete: false, // can set function(row, value)
+              hasDelete: true, // can set function(row, value)
-              hasClone: this.hasClone,
+              hasClone: false,
              canDelete: () => vm.$hasPerm('accounts.delete_account'),
              moreActionsTitle: this.$t('More'),
-              extraActions: [
+              extraActions: accountOtherActions(this)
                {
                  name: 'View',
                  title: this.$t('View'),
                  can: this.$hasPerm('accounts.view_accountsecret'),
                  type: 'primary',
                  callback: ({ row }) => {
                    // debugger
                    vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
                    vm.account = row
                    vm.showViewSecretDialog = false
                    setTimeout(() => {
                      vm.showViewSecretDialog = true
                    })
                  }
                },
                {
                  name: 'Update',
                  title: this.$t('Edit'),
                  can: this.$hasPerm('accounts.change_account') && !this.$store.getters.currentOrgIsRoot,
                  callback: ({ row }) => {
                    const data = {
                      ...this.asset,
                      ...row.asset
                    }
                    vm.account = row
                    vm.iAsset = data
                    vm.showAddDialog = false
                    vm.accountCreateUpdateTitle = this.$t('UpdateAccount')
                    setTimeout(() => {
                      vm.showAddDialog = true
                    })
                  }
                },
                {
                  name: 'Test',
                  title: this.$t('Test'),
                  can: ({ row }) =>
                    !this.$store.getters.currentOrgIsRoot &&
                    this.$hasPerm('accounts.verify_account') &&
                    row.asset['auto_config'].ansible_enabled &&
                    row.asset['auto_config'].ping_enabled,
                  callback: ({ row }) => {
                    this.$axios.post(
                      `/api/v1/accounts/accounts/tasks/`,
                      { action: 'verify', accounts: [row.id] }
                    ).then(res => {
                      openTaskPage(res['task'])
                    })
                  }
                },
                {
                  name: 'ClearSecret',
                  title: this.$t('ClearSecret'),
                  can: this.$hasPerm('accounts.change_account'),
                  type: 'primary',
                  callback: ({ row }) => {
                    this.$axios.patch(
                      `/api/v1/accounts/accounts/clear-secret/`,
                      { account_ids: [row.id] }
                    ).then(() => {
                      this.$message.success(this.$tc('ClearSuccessMsg'))
                    })
                  }
                }
              ]
            }
          },
          ...this.columnsMeta
@@ -320,6 +289,7 @@ export default {
              setTimeout(() => {
                vm.iAsset = this.asset
                vm.account = {}
                vm.addTemplate = false
                vm.showAddDialog = true
              })
            }
@@ -336,7 +306,8 @@ export default {
              setTimeout(() => {
                vm.iAsset = this.asset
                vm.account = {}
-                vm.showAddTemplateDialog = true
+                vm.showAddDialog = true
                vm.addTemplate = true
              })
            }
          },
@@ -347,11 +318,11 @@ export default {
            name: 'TestSelected',
            title: this.$t('TestSelected'),
            type: 'primary',
-            icon: 'fa-link',
+            icon: 'verify',
            can: ({ selectedRows }) => {
              return selectedRows.length > 0 &&
-                  ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
+                ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
-                  !this.$store.getters.currentOrgIsRoot
+                !this.$store.getters.currentOrgIsRoot
            },
            callback: function({ selectedRows }) {
              const ids = selectedRows.map(v => {
@@ -416,6 +387,15 @@ export default {
      }
    }
  },
  computed: {
    accountCreateUpdateTitle() {
      if (this.addTemplate) {
        return this.$t('AddAccountByTemplate')
      } else {
        return this.$t('AddAccount')
      }
    }
  },
  watch: {
    url(iNew) {
      this.$set(this.tableConfig, 'url', iNew)
@@ -423,52 +403,34 @@ export default {
    }
  },
  mounted() {
-    if (this.columns.length > 0) {
+    this.setActions()
      this.tableConfig.columns = this.columns
    }
    if (this.otherActions) {
      const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
      for (const item of this.otherActions) {
        actionColumn.formatterArgs.extraActions.push(item)
      }
    }
    if (this.hasDeleteAction) {
      this.tableConfig.columnsMeta.actions.formatterArgs.extraActions.push(
        {
          name: 'Delete',
          title: this.$t('Delete'),
          can: this.$hasPerm('accounts.delete_account'),
          type: 'primary',
          callback: ({ row }) => {
            const msg = this.$t('AccountDeleteConfirmMsg')
            this.$confirm(msg, this.$tc('Info'), {
              type: 'warning',
              confirmButtonClass: 'el-button--danger',
              beforeClose: async(action, instance, done) => {
                if (action !== 'confirm') return done()
                this.$axios.delete(`/api/v1/accounts/accounts/${row.id}/`).then(() => {
                  done()
                  this.$refs.ListTable.reloadTable()
                  this.$message.success(this.$tc('DeleteSuccessMsg'))
                })
              }
            })
          }
        }
      )
    }
  },
  activated() {
    // 由于组件嵌套较深，有可能导致 Error in activated hook: "TypeError: Cannot read properties of undefined (reading 'getList')" 的问题
-    setTimeout(() => {
+    if (this.tabDeactivated) {
-      this.refresh()
+      setTimeout(() => this.refresh(), 300)
-    }, 300)
+    }
  },
  deactivated() {
    this.tabDeactivated = true
  },
  methods: {
    setActions() {
      if (this.columns.length > 0) {
        this.tableConfig.columns = this.columns
      }
      if (this.otherActions) {
        const actionColumn = this.tableConfig.columns[this.tableConfig.columns.length - 1]
        for (const item of this.otherActions) {
          actionColumn.formatterArgs.extraActions.push(item)
        }
      }
    },
    onUpdateAuthDone(account) {
      Object.assign(this.account, account)
    },
    addAccountSuccess() {
      Reflect.deleteProperty(this.$route.query, 'flag')
      this.$refs.ListTable.reloadTable()
    },
    async getAssetDetail() {
@@ -507,7 +469,7 @@ export default {
 }
 </script>
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .cell a {
  color: var(--color-info);
 }
--- a/src/components/Apps/AccountListTable/PasswordHistoryDialog.vue
+++ b/src/components/Apps/AccountListTable/PasswordHistoryDialog.vue
@@ -4,7 +4,7 @@
 <script>
 import { GenericListTableDialog } from '@/layout/components'
-import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
+import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
 export default {
  components: {
@@ -33,7 +33,7 @@ export default {
          columnsMeta: {
            secret: {
              label: this.$t('Password'),
-              formatter: ShowKeyCopyFormatter,
+              formatter: SecretViewerFormatter,
              formatterArgs: {
                hasDownload: false,
                name: this.account.name
--- a/src/components/Apps/AccountListTable/UpdateSecretInfo.vue
+++ b/src/components/Apps/AccountListTable/UpdateSecretInfo.vue
@@ -1,44 +1,36 @@
 <template>
  <Dialog
    :destroy-on-close="true"
    :show-buttons="false"
    :title="$tc('UpdateAssetUserToken')"
-    :visible.sync="visible"
+    :visible.sync="iVisible"
-    width="50"
+    width="800px"
    @cancel="handleCancel()"
    @confirm="handleConfirm()"
    v-on="$listeners"
  >
-    <el-form label-position="right" label-width="90px">
+    <AutoDataForm
-      <el-form-item :label="$tc('Name')">
+      :fields="fields"
-        <el-input v-model="account['asset_name']" readonly />
+      :fields-meta="fieldsMeta"
-      </el-form-item>
+      :form="init"
-      <el-form-item :label="$tc('Username')">
+      :has-reset="false"
-        <el-input v-model="account['username']" readonly />
+      :has-save-continue="false"
-      </el-form-item>
+      :url="''"
-      <el-form-item :label="$tc('Password')">
+      method="patch"
-        <UpdateToken v-model="authInfo.password" />
+      @submit="handleConfirm"
-      </el-form-item>
+    />
      <el-form-item :label="$tc('SSHSecretKey')">
        <UploadKey @input="getFile" />
      </el-form-item>
      <el-form-item :label="$tc('Passphrase')">
        <UpdateToken v-model="authInfo.passphrase" />
      </el-form-item>
    </el-form>
  </Dialog>
 </template>
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { UpdateToken, UploadKey } from '@/components/Form/FormFields'
+import { accountFieldsMeta } from '@/components/Apps/AccountCreateUpdateForm/const'
 import { encryptPassword } from '@/utils/crypto'
 import AutoDataForm from '@/components/Form/AutoDataForm/index.vue'
 export default {
  name: 'UpdateSecretInfo',
  components: {
-    Dialog,
+    AutoDataForm,
-    UploadKey,
+    Dialog
    UpdateToken
  },
  props: {
    account: {
@@ -51,49 +43,59 @@ export default {
    }
  },
  data() {
    const accountMeta = accountFieldsMeta(this)
    return {
-      secretInfo: {
+      fields: [
-        password: '',
+        'name', 'secret_type', 'password', 'ssh_key', 'token',
-        private_key: '',
+        'access_key', 'passphrase', 'api_key'
-        passphrase: ''
+      ],
      fieldsMeta: {
        ...accountMeta,
        name: {
          ...accountMeta.name,
          readonly: true
        },
        secret_type: {
          hidden: () => true
        }
      },
      init: {
        ...this.account
      }
    }
  },
  computed: {
    iVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
-    handleConfirm() {
+    handleConfirm(form) {
-      const data = {}
+      const secretType = this.account.secret_type.value
-      if (this.secretInfo.password !== '') {
+      const data = {
-        data.password = encryptPassword(this.secretInfo.password)
+        secret: encryptPassword(form[secretType])
      }
      if (this.secretInfo.private_key !== '') {
        data.private_key = encryptPassword(this.secretInfo.private_key)
        if (this.secretInfo.passphrase) data.passphrase = this.secretInfo.passphrase
      }
      this.$axios.patch(
        `/api/v1/accounts/accounts/${this.account.id}/`,
        data,
        { disableFlashErrorMsg: true }
      ).then(res => {
        this.authInfo = { password: '', private_key: '' }
        this.$message.success(this.$tc('UpdateSuccessMsg'))
-        this.$emit('updateAuthDone', res)
+        this.iVisible = false
        this.$emit('update:visible', false)
      }).catch(err => {
        const errMsg = Object.values(err.response.data).join(', ')
        this.$message.error(this.$tc('UpdateErrorMsg') + ' ' + errMsg)
-        this.$emit('update:visible', true)
+        this.iVisible = false
      })
    },
    handleCancel() {
      this.$emit('update:visible', false)
    },
    getFile(file) {
      this.secretInfo.private_key = file
    }
  }
 }
 </script>
 <style scoped>
 </style>
--- a/src/components/Apps/AccountListTable/ViewSecret.vue
+++ b/src/components/Apps/AccountListTable/ViewSecret.vue
@@ -18,7 +18,7 @@
          <span>{{ account['username'] }}</span>
        </el-form-item>
        <el-form-item :label="secretTypeLabel">
-          <ShowKeyCopyFormatter
+          <SecretViewerFormatter
            :cell-value="secretInfo.secret"
            :col="{ formatterArgs: {
              name: account['name'],
@@ -60,7 +60,7 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import PasswordHistoryDialog from './PasswordHistoryDialog.vue'
-import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
+import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
 import { encryptPassword } from '@/utils/crypto'
 export default {
@@ -68,7 +68,7 @@ export default {
  components: {
    Dialog,
    PasswordHistoryDialog,
-    ShowKeyCopyFormatter
+    SecretViewerFormatter
  },
  props: {
    account: {
--- a/src/components/Apps/AccountListTable/const.js
+++ b/src/components/Apps/AccountListTable/const.js
@@ -1,4 +1,5 @@
 import { ChoicesFormatter } from '@/components/Table/TableFormatters'
 import { openTaskPage } from '@/utils/jms'
 export const connectivityMeta = {
  formatter: ChoicesFormatter,
@@ -22,3 +23,274 @@ export const connectivityMeta = {
  },
  width: '130px'
 }
 export const accountOtherActions = (vm) => [
  {
    name: 'View',
    title: vm.$t('View'),
    can: vm.$hasPerm('accounts.view_accountsecret'),
    type: 'primary',
    order: 1,
    callback: ({ row }) => {
      // debugger
      vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
      vm.account = row
      vm.showViewSecretDialog = false
      setTimeout(() => {
        vm.showViewSecretDialog = true
      })
    }
  },
  {
    name: 'Update',
    title: vm.$t('Edit'),
    can: vm.$hasPerm('accounts.change_account') && !vm.$store.getters.currentOrgIsRoot,
    callback: ({ row }) => {
      const data = {
        ...vm.asset,
        ...row.asset
      }
      vm.account = row
      vm.iAsset = data
      vm.showAddDialog = false
      vm.accountCreateUpdateTitle = vm.$t('UpdateAccount')
      setTimeout(() => {
        vm.showAddDialog = true
      })
    }
  },
  {
    name: 'UpdateSecret',
    title: vm.$t('EditSecret'),
    can: vm.$hasPerm('accounts.change_account') && !vm.$store.getters.currentOrgIsRoot,
    callback: ({ row }) => {
      const data = {
        ...vm.asset,
        ...row.asset
      }
      vm.account = row
      vm.iAsset = data
      vm.showUpdateSecretDialog = false
      vm.accountCreateUpdateTitle = vm.$t('UpdateAccount')
      setTimeout(() => {
        vm.showUpdateSecretDialog = true
      })
    }
  },
  {
    name: 'Clone',
    title: vm.$t('Duplicate'),
    can: vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot,
    callback: ({ row }) => {
      vm.account = {
        name: `${row.name} - ${vm.$t('Duplicate').toLowerCase()}`,
        username: `${row.username} - ${vm.$t('Duplicate').toLowerCase()}`,
        payload: 'pam_account_clone'
      }
      vm.iAsset = vm.asset
      vm.showAddDialog = false
      setTimeout(() => {
        vm.showAddDialog = true
      })
    }
  },
  {
    name: 'Test',
    title: vm.$t('VerifySecret'),
    divided: true,
    can: ({ row }) =>
      !vm.$store.getters.currentOrgIsRoot &&
      vm.$hasPerm('accounts.verify_account') &&
      row.asset['auto_config'].ansible_enabled &&
      row.asset['auto_config'].ping_enabled,
    callback: ({ row }) => {
      vm.$axios.post(
        `/api/v1/accounts/accounts/tasks/`,
        { action: 'verify', accounts: [row.id] }
      ).then(res => {
        openTaskPage(res['task'])
      })
    }
  },
  {
    name: 'ClearSecret',
    title: vm.$t('ClearSecret'),
    can: vm.$hasPerm('accounts.change_account'),
    type: 'primary',
    callback: ({ row }) => {
      vm.$axios.patch(
        `/api/v1/accounts/accounts/clear-secret/`,
        { account_ids: [row.id] }
      ).then(() => {
        vm.$message.success(vm.$tc('ClearSuccessMsg'))
      })
    }
  },
  {
    name: 'SecretHistory',
    title: vm.$t('HistoryPassword'),
    can: () => vm.$hasPerm('accounts.view_accountsecret'),
    type: 'primary',
    callback: ({ row }) => {
      vm.account = row
      vm.currentAccountColumn = row
      vm.showViewSecretDialog = false
      vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
      setTimeout(() => {
        vm.showViewSecretDialog = true
      })
    }
  },
  {
    name: 'CopyToOther',
    title: vm.$t('CopyToAsset'),
    type: 'primary',
    divided: true,
    callback: ({ row }) => {
      vm.accountCreateUpdateTitle = vm.$t('CopyToOther')
      vm.$route.query.flag = 'copy'
      vm.iAsset = vm.asset
      vm.account = row
      vm.showAddDialog = true
    }
  },
  {
    name: 'MoveToOther',
    title: vm.$t('MoveToAsset'),
    type: 'primary',
    callback: ({ row }) => {
      vm.accountCreateUpdateTitle = vm.$t('MoveToOther')
      vm.$route.query.flag = 'move'
      vm.iAsset = vm.asset
      vm.account = row
      vm.showAddDialog = true
    }
  }
 ]
 export const accountQuickFilters = (vm) => [
  {
    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: {
          risk: 'long_time_no_login'
        }
      },
      {
        label: vm.$t('UnmanagedAccount'),
        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('LongTimeNoVerify'),
        filter: {
          long_time_no_verify: '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/AssetSelect/dialog.vue
+++ b/src/components/Apps/AssetSelect/dialog.vue
@@ -2,7 +2,6 @@
  <Dialog
    :close-on-click-modal="false"
    :title="$tc('Assets')"
    :disabled-status="!isLoaded"
    custom-class="asset-select-dialog"
    top="2vh"
    v-bind="$attrs"
@@ -23,8 +22,8 @@
      :url="baseUrl"
      class="tree-table"
      v-bind="$attrs"
      v-on="$listeners"
      @loaded="handleTableLoaded"
      v-on="$listeners"
    />
  </Dialog>
 </template>
--- a/src/components/Apps/AssetTreeTable/index.vue
+++ b/src/components/Apps/AssetTreeTable/index.vue
@@ -142,6 +142,9 @@ export default {
    treeSetting.showDelete = this.$hasPerm('assets.delete_node')
  },
  methods: {
    reloadTable() {
      this.$refs.TreeList.reloadTable()
    },
    setTreeUrlQuery() {
      let str = ''
      for (const key in this.treeUrlQuery) {
--- a/src/components/Apps/BlockedIPs/BlockedIPList.vue
+++ b/src/components/Apps/BlockedIPs/BlockedIPList.vue
@@ -3,7 +3,7 @@
 </template>
 <script>
-import ListTable from '@/components/Table/ListTable/index.vue'
+import { DrawerListTable as ListTable } from '@/components'
 export default {
  name: 'BlockedIPList',
--- a/src/components/Apps/ChangeSecret/RecordViewSecret.vue
+++ b/src/components/Apps/ChangeSecret/RecordViewSecret.vue
@@ -12,7 +12,7 @@
    >
      <el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
        <el-form-item :label="$tc('OldSecret')">
-          <ShowKeyCopyFormatter
+          <SecretViewerFormatter
            :cell-value="secretInfo.old_secret"
            :col="{ formatterArgs: {
              name: 'old_secret'
@@ -20,7 +20,7 @@
          />
        </el-form-item>
        <el-form-item :label="$tc('NewSecret')">
-          <ShowKeyCopyFormatter
+          <SecretViewerFormatter
            :cell-value="secretInfo.new_secret"
            :col="{ formatterArgs: {
              name: 'new_secret'
@@ -34,13 +34,13 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import { ShowKeyCopyFormatter } from '@/components/Table/TableFormatters'
+import { SecretViewerFormatter } from '@/components/Table/TableFormatters'
 export default {
  name: 'RecordViewSecret',
  components: {
    Dialog,
-    ShowKeyCopyFormatter
+    SecretViewerFormatter
  },
  props: {
    visible: {
--- a/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/ChatMessage.vue
@@ -1,42 +1,74 @@
 <template>
-  <div :class="{'user-role': isUserRole}" class="chat-item">
+  <div :class="{ 'user-role': isUserRole }" class="chat-item">
-    <div class="avatar">
+    <div class="chart-item-container">
-      <el-avatar :src="isUserRole ? userUrl : chatUrl" class="header-avatar" />
+      <div class="avatar">
-    </div>
+        <el-avatar
-    <div class="content">
+          :src="isUserRole ? userUrl : chatUrl"
-      <div class="operational">
+          class="header-avatar"
-        <span class="date">
+        />
          {{ $moment(item.message.create_time).format('YYYY-MM-DD HH:mm:ss') }}
        </span>
      </div>
-      <div class="message">
+      <div class="content">
-        <div class="message-content">
+        <div class="operational">
-          <span v-if="isSystemError" class="error">
+          <div v-if="!item.message.is_reasoning" class="date">
-            {{ item.message.content }}
+            {{
-          </span>
+              $moment(item.message.create_time).format("YYYY-MM-DD HH:mm:ss")
-          <span v-else class="chat-text">
+            }}
-            <MessageText :message="item.message" />
+          </div>
-          </span>
+
          <div v-else class="thinking-time">{{ $i18n.t('DeeplyThoughtAbout') }}</div>
        </div>
-        <div class="action">
+        <div :class="item.reasoning ? 'reasoning' : 'message'">
-          <el-tooltip
+          <div class="message-content">
-            v-if="isSystemError && isLoading"
+            <div v-if="!item.reasoning">
-            :content="$tc('Reconnect')"
+              <span v-if="isSystemError" class="error">
-            :open-delay="500"
+                {{ item.message.content }}
-            placement="top"
+              </span>
-          >
+              <span v-else class="chat-text">
-            <svg-icon icon-class="refresh" @click="onRefresh" />
+                <MessageText :message="item.message" />
-          </el-tooltip>
+              </span>
-          <el-dropdown v-else size="small" @command="handleCommand">
+            </div>
-            <span class="el-dropdown-link">
+
-              <i class="fa fa-ellipsis-v" />
+            <div v-else class="thinking-wrapper">
-            </span>
+              <div class="thinking-content">
-            <el-dropdown-menu slot="dropdown">
+                <!-- eslint-disable-next-line -->
-              <el-dropdown-item v-for="i in dropdownOptions" :key="i.action" :command="i.action">
+                <div class="divider"></div>
-                {{ i.label }}
+                <p>
-              </el-dropdown-item>
+                  <MessageText :message="item.reasoning" />
-            </el-dropdown-menu>
+                </p>
-          </el-dropdown>
+              </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>
      </div>
    </div>
@@ -45,7 +77,7 @@
 <script>
 import MessageText from './MessageText.vue'
-import { mapState } from 'vuex'
+import { mapGetters, mapState } from 'vuex'
 import { copy } from '@/utils/common'
 import { useChat } from '../../useChat.js'
 import { reconnect } from '@/utils/socket'
@@ -65,7 +97,6 @@ export default {
  },
  data() {
    return {
      chatUrl: require('@/assets/img/chat.png'),
      userUrl: '/api/v1/settings/logo/',
      dropdownOptions: [
        {
@@ -79,11 +110,26 @@ export default {
    ...mapState({
      isLoading: state => state.chat.loading
    }),
    ...mapGetters([
      'publicSettings'
    ]),
    isUserRole() {
      return this.item.message?.role === 'user'
    },
    isSystemError() {
-      return this.item.type === 'error' && this.item.message?.role === 'assistant'
+      return (
        this.item.type === 'error' && this.item?.role === 'assistant'
      )
    },
    isServerError() {
      return (this.item.type === 'finish' && this.item.result.content === '')
        ? this.$i18n.t('ServerBusyRetry')
        : ''
    },
    chatUrl() {
      return this.publicSettings.CHAT_AI_TYPE === 'gpt'
        ? require('@/assets/img/chat.png')
        : require('@/assets/img/deepSeek.png')
    }
  },
  methods: {
@@ -94,7 +140,7 @@ export default {
    },
    handleCommand(value) {
      if (value === 'copy') {
-        copy(this.item.message.content)
+        copy(this.item.result.content)
      }
    }
  }
@@ -104,101 +150,160 @@ export default {
 <style lang="scss" scoped>
 .chat-item {
  display: flex;
-  padding: 16px 14px 0;
+  padding: 0.5rem;
-  &:last-child {
+  .chart-item-container {
-    padding-bottom: 16px;
+    display: flex;
-  }
+    gap: 0.5rem;
-  .avatar {
+    .avatar {
-    width: 22px;
+      width: 24px;
-    height: 22px;
+      height: 24px;
-    margin-top: 2px;
+      margin-top: 2px;
-    .header-avatar {
+      .header-avatar {
-      width: 100%;
+        width: 100%;
-      height: 100%;
+        height: 100%;
        border-radius: 50%;
-      &::v-deep img {
+        &::v-deep img {
-        background-color: #e5e5e7;
+          background-color: #fff;
        }
      }
    }
  }
-  .content {
+    .content {
    margin-left: 6px;
    overflow: hidden;
    .operational {
      display: flex;
-      justify-content: space-between;
+      flex-direction: column;
      // gap: 0.5rem;
      overflow: hidden;
-      .copy {
+      .operational {
-        float: right;
+        display: flex;
-        cursor: pointer;
+        justify-content: space-between;
-      }
+        overflow: hidden;
    }
-    .message {
+        .date {
-      display: -webkit-box;
+          padding-top: 5px;
      .message-content {
        flex: 1;
        padding: 6px 10px;
        border-radius: 2px 12px 12px;
        background-color: #f0f1f5;
      }
      .action {
        .svg-icon {
          transform: translateY(50%);
          margin-left: 3px;
          cursor: pointer;
        }
-        .el-dropdown {
+        .thinking-time {
-          height: 32px;
+          width: 6rem;
-          line-height: 37px;
+          display: flex;
-          font-size: 13px;
+          justify-content: center;
          padding: 5px 10px;
          border-radius: 0.5rem;
          background-color: #f5f5f5;
        }
-          .el-dropdown-link {
+        .copy {
-            i {
+          float: right;
-              padding: 4px 5px;
+          cursor: pointer;
-              font-size: 15px;
+        }
-              color: #8d9091;
+      }
-              &:hover {
+      .reasoning {
-                color: #7b8085
+        display: flex;
        gap: 0.5rem;
        align-items: flex-end;
        .message-content .thinking-wrapper {
          display: flex;
          flex-direction: column;
          gap: 0.5rem;
          .thinking-content {
            position: relative;
            color: #8b8b8b;
            .divider {
              position: absolute;
              top: 0;
              left: 0;
              height: 100%;
              border-left: 2px solid #e5e5e5;
            }
            p {
              margin: unset;
              padding-left: 0.5rem;
              ::v-deep p {
                color: #8b8b8b;
              }
            }
          }
        }
      }
-      .error {
+      .message {
-        color: red;
+        display: -webkit-box;
        .message-content {
          flex: 1;
          padding: 6px 10px;
          border-radius: 2px 12px 12px;
          background-color: #f0f1f5;
        }
        .action {
          .svg-icon {
            transform: translateY(50%);
            margin-left: 3px;
            cursor: pointer;
          }
          .el-dropdown {
            height: 32px;
            line-height: 37px;
            font-size: 13px;
            .el-dropdown-link {
              i {
                padding: 4px 5px;
                font-size: 15px;
                color: #8d9091;
                &:hover {
                  color: #7b8085;
                }
              }
            }
          }
        }
        .error {
          color: red;
        }
      }
    }
  }
 }
-.user-role {
+  &:last-child {
-  flex-direction: row-reverse;
+    padding-bottom: 16px;
  }
-  .content {
+  &.user-role {
-    margin-right: 10px;
+    flex-direction: row-reverse;
-    .operational {
+    .chart-item-container {
      flex-direction: row-reverse;
    }
-    .message {
+    .content {
-      flex-direction: row-reverse;
+      margin-right: 10px;
-      .message-content {
+      .operational {
-        background-color: var(--menu-hover);
+        flex-direction: row-reverse;
-        border-radius: 12px 2px 12px 12px;
+      }
      .message {
        flex-direction: row-reverse;
        .message-content {
          background-color: var(--menu-hover);
          border-radius: 12px 2px 12px 12px;
        }
      }
    }
  }
--- a/src/components/Apps/ChatAi/components/ChitChat/index.vue
+++ b/src/components/Apps/ChatAi/components/ChitChat/index.vue
@@ -123,7 +123,17 @@ export default {
        setLoading(true)
        removeLoadingMessageInChat()
        this.conversationId = data.id
-        updateChaMessageContentById(data.message.id, data)
+
        const newFragment = {
          message: { id: data.message.id, is_reasoning: data.message.is_reasoning },
          reasoning: { content: data.message.is_reasoning ? data.message.content : '' },
          result: { content: data.message.is_reasoning ? '' : data.message.content },
          role: data.message.role,
          type: data.message.type,
          create_time: data.message.create_time
        }
        updateChaMessageContentById(data.message.id, newFragment)
      }
      if (data.message?.type === 'finish') {
        setLoading(false)
--- a/src/components/Apps/GrantedAssets/index.vue
+++ b/src/components/Apps/GrantedAssets/index.vue
@@ -87,7 +87,7 @@ export default {
        columnsExclude: ['spec_info'],
        columnsShow: {
          min: ['name', 'address', 'accounts'],
-          default: ['name', 'address', 'platform', 'connectivity', 'view_account', 'actions']
+          default: ['name', 'address', 'platform', 'view_account', 'actions']
        },
        columnsMeta: {
          name: {
--- a/src/components/Apps/ManyJsonTabs/AssetJsonTab.vue
+++ b/src/components/Apps/ManyJsonTabs/AssetJsonTab.vue
@@ -1,24 +1,25 @@
 <template>
-  <el-row :gutter="24">
+  <TwoCol>
-    <el-col :md="20" :sm="22">
+    <ListTable v-bind="config" />
-      <ListTable v-bind="config" />
+  </TwoCol>
    </el-col>
  </el-row>
 </template>
 <script>
-import ListTable from '@/components/Table/ListTable/index.vue'
+import { DrawerListTable as ListTable } from '@/components'
 import { toM2MJsonParams } from '@/utils/jms'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 export default {
  name: 'AssetJsonTab',
  components: {
    TwoCol,
    ListTable
  },
  props: {
    object: {
      type: Object,
-      default: () => {}
+      default: () => {
      }
    }
  },
  data() {
@@ -32,9 +33,11 @@ export default {
        },
        tableConfig: {
          url: `/api/v1/assets/assets/?${key}=${value}`,
-          columns: ['name', 'address', 'platform',
+          columns: ['name', 'address', 'platform', 'type', 'is_active'],
-            'type', 'is_active'
+          columnsShow: {
-          ],
+            min: ['name', 'address'],
            default: ['name', 'address', 'platform']
          },
          columnsMeta: {
            name: {
              label: this.$t('Asset'),
--- a/src/components/Apps/ManyJsonTabs/UserJsonTab.vue
+++ b/src/components/Apps/ManyJsonTabs/UserJsonTab.vue
@@ -1,18 +1,18 @@
 <template>
-  <el-row :gutter="24">
+  <TwoCol>
-    <el-col :md="20" :sm="22">
+    <ListTable v-bind="config" />
-      <ListTable v-bind="config" />
+  </TwoCol>
    </el-col>
  </el-row>
 </template>
 <script>
-import ListTable from '@/components/Table/ListTable/index.vue'
+import { DrawerListTable as ListTable } from '@/components'
 import { toM2MJsonParams } from '@/utils/jms'
 import TwoCol from '@/layout/components/Page/TwoColPage.vue'
 export default {
  name: 'User',
  components: {
    TwoCol,
    ListTable
  },
  props: {
@@ -34,13 +34,16 @@ export default {
        tableConfig: {
          url: `/api/v1/users/users/?${key}=${value}`,
          columns: [
-            'name', 'username', 'groups', 'system_roles',
+            'name', 'username', 'email', 'groups', 'system_roles',
            'org_roles', 'source', 'is_valid'
          ],
          columnsShow: {
            min: ['name', 'username'],
            default: ['name', 'username', 'email']
          },
          columnsMeta: {
            name: {
              label: this.$t('Name'),
              width: 85,
              formatter: (row) => {
                const to = {
                  name: 'UserDetail',
--- a/src/components/Apps/ResourceActivity/index.vue
+++ b/src/components/Apps/ResourceActivity/index.vue
@@ -1,30 +1,28 @@
 <template>
  <div>
-    <el-row :gutter="20">
+    <TwoCol>
-      <el-col :md="16" :sm="24">
+      <IBox :title="title" class="block" v-bind="$attrs">
-        <IBox :title="title" class="block" v-bind="$attrs">
+        <el-timeline>
-          <el-timeline>
+          <el-timeline-item
-            <el-timeline-item
+            v-for="(activity, index) in activities"
-              v-for="(activity, index) in activities"
+            :key="index"
-              :key="index"
+            :size="activity.size"
-              :size="activity.size"
+            :timestamp="activity.timestamp"
-              :timestamp="activity.timestamp"
+            :type="activity.type"
-              :type="activity.type"
+            placement="bottom"
-              placement="bottom"
+          >
            {{ activity.content }}
            <el-link
              v-if="activity['detail_url']"
              type="primary"
              @click.native="onClick(activity)"
            >
-              {{ activity.content }}
+              {{ $tc('Detail') }}
-              <el-link
+            </el-link>
-                v-if="activity['detail_url']"
+          </el-timeline-item>
-                type="primary"
+        </el-timeline>
-                @click.native="onClick(activity)"
+      </IBox>
-              >
+    </TwoCol>
                {{ $tc('Detail') }}
              </el-link>
            </el-timeline-item>
          </el-timeline>
        </IBox>
      </el-col>
    </el-row>
    <DiffDetail ref="DetailDialog" :title="$tc('OperateLog')" />
  </div>
 </template>
@@ -34,10 +32,12 @@ 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
@@ -98,7 +98,7 @@
            type="primary"
            @click="handleFaceCapture"
          >
-            开始人脸识别
+            {{ this.$tc('VerifyFace') }}
          </el-button>
        </el-col>
      </el-row>
--- a/src/components/Cards/DetailCard/auto.vue
+++ b/src/components/Cards/DetailCard/auto.vue
@@ -1,7 +1,12 @@
 <template>
  <IBox v-if="loading" style="width: 100%; height: 200px" />
  <div v-else>
-    <DetailCard v-if="hasObject && items.length > 0" :items="validItems" :loading="loading" v-bind="$attrs" />
+    <DetailCard
      v-if="hasObject && items.length > 0"
      :items="validItems"
      :loading="loading"
      v-bind="$attrs"
    />
  </div>
 </template>
@@ -32,7 +37,7 @@ export default {
      type: Array,
      default: null
    },
-    showUndefine: {
+    showUndefined: {
      type: Boolean,
      default: true
    },
@@ -168,7 +173,7 @@ export default {
      const data = await this.$store.dispatch('common/getUrlMeta', { url: this.url })
      let remoteMeta = data.actions['GET'] || {}
      if (this.nested) {
-        remoteMeta = remoteMeta[this.nested]?.children || {}
+        remoteMeta = remoteMeta[this.nested]?.children || remoteMeta || {}
      }
      let fields = this.fields
      fields = fields || Object.keys(remoteMeta)
@@ -220,7 +225,7 @@ export default {
        value = this.parseValue(value, fieldMeta.type)
        if (value === undefined) {
-          if (this.showUndefine) {
+          if (this.showUndefined) {
            value = '-'
          } else {
            continue
--- a/src/components/Cards/DetailCard/index.vue
+++ b/src/components/Cards/DetailCard/index.vue
@@ -1,19 +1,20 @@
 <template>
  <IBox :fa="fa" :title="title">
-    <el-form :label-width="labelWidth" class="content" label-position="left">
+    <el-form :label-width="labelWidth" class="content detail-card" label-position="left">
-      <span v-for="item in items" :key="item.key">
+      <template v-for="item in items">
-        <el-form-item v-if="item.has !== false" :class="item.class" :label="item.key">
+        <div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
-          <span slot="label"> {{ formateLabel(item.key) }}</span>
+          <span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
-          <span
+          <span class="item-value el-form-item__content">
-            :is="item.component"
+            <template
-            v-if="item.component"
+              :is="item.component"
-            v-bind="{...item}"
+              v-if="item.component"
-          />
+              v-bind="{...item}"
-          <ItemValue v-else :value="item.value" class="item-value" v-bind="item" />
+            />
-        </el-form-item>
+            <ItemValue v-else :value="item.value" v-bind="item" />
-      </span>
+          </span>
        </div>
      </template>
    </el-form>
    <slot />
  </IBox>
 </template>
@@ -45,7 +46,7 @@ export default {
    },
    labelWidth: {
      type: String,
-      default: '25%'
+      default: '120px'
    }
  },
  data() {
@@ -71,55 +72,76 @@ export default {
  padding: 20px 40px;
 }
 .el-form-item {
  border-bottom: 1px dashed #EBEEF5;
  padding: 1px 0;
  margin-bottom: 0;
  &:last-child {
    border-bottom: none;
  }
  &.array-item {
    border-bottom: none;
    ::v-deep .el-form-item__content {
      border-bottom: 1px dashed #EBEEF5
    }
    ::v-deep .el-form-item__label:last-child {
      border: 1px dashed #EBEEF5;
    }
  }
  ::v-deep .el-form-item__label {
    padding-right: 8%;
    overflow: hidden;
    color: var(--color-icon-primary);
    span {
      display: inline-block;
      line-height: 1.5;
    }
  }
  ::v-deep .el-form-item__content {
    color: var(--color-text-primary);
    font-size: 13px;
    line-height: 40px;
  }
  ::v-deep .el-tag--mini {
    margin-right: 3px;
  }
 }
 .item-value span {
  word-break: break-word;
 }
 .content {
  font-size: 13px;
-  line-height: 2.5;
+  line-height: 2;
  ::v-deep .el-form-item {
    border-bottom: 1px dashed #F4F4F4;
    padding: 1px 0;
    margin-bottom: 0;
    display: flex;
    align-items: center;
    //text-align: end;
    line-height: 32px;
    min-height: 32px;
    &:last-child {
      //border-bottom: none;
    }
    &.array-item {
      border-bottom: none;
      ::v-deep .el-form-item__content {
        border-bottom: 1px dashed #EBEEF5
      }
      ::v-deep .el-form-item__label:last-child {
        border: 1px dashed #EBEEF5;
      }
    }
    .el-form-item__label {
      //padding-right: 8%;
      overflow: hidden;
      color: var(--color-icon-primary);
      font-size: 12px;
      line-height: 1.5;
      font-weight: 400;
      width: 33%;
      min-width: 120px;
      padding: 5px 0;
      span {
        display: inline-block;
        //line-height: 1.1;
      }
    }
    .el-form-item__content {
      color: var(--color-text-primary);
      font-size: 13px;
      line-height: 1.5;
      width: calc(100% - 120px);
      padding: 5px 0;
    }
    ::v-deep .el-tag--mini {
      margin-right: 3px;
    }
  }
  .item-value {
    ::v-deep span {
      //display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-word;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      vertical-align: middle;
    }
  }
 }
 </style>
--- a/src/components/Cards/RelationCard/index.vue
+++ b/src/components/Cards/RelationCard/index.vue
@@ -340,13 +340,13 @@ b, strong {
 }
 tr td {
-  line-height: 1.42857;
+  line-height: 1.4;
-  padding: 8px;
+  padding: 8px 0;
  vertical-align: top;
 }
 tr.item td {
-  border-top: 1px solid #e7eaec;
+  border-top: 1px dashed #EBEEF5;
 }
 .box-margin {
--- a/src/components/Cards/SummaryCard/index.vue
+++ b/src/components/Cards/SummaryCard/index.vue
@@ -1,21 +1,22 @@
 <template>
-  <el-card shadow="never">
+  <div>
-    <div slot="header" class="summary-header">
+    <div class="summary-header">
-      <span class="header-title">{{ title }}</span>
+      <el-tooltip :content="title" placement="top" :open-delay="500">
        <span class="title">{{ title }}</span>
      </el-tooltip>
    </div>
    <slot>
-      <h1 class="no-margins">
+      <h3 class="no-margins ">
-        <span v-if="body.disabled" class="disabled-link">{{ body.count }}</span>
+        <span v-async="iCount" class="num" @click="handleClick">
-        <router-link v-else :to="body.route">
+          -
-          <span>{{ body.count }}</span>
+        </span>
-        </router-link>
+      </h3>
      </h1>
      <small>{{ body.comment }}</small>
    </slot>
-  </el-card>
+  </div>
 </template>
 <script>
 export default {
  name: 'SummaryCard',
  props: {
@@ -23,56 +24,90 @@ export default {
      type: String,
      default: ''
    },
    rightSideLabel: {
      type: Object,
      default: () => ({})
    },
    body: {
      type: Object,
      default: () => ({})
    },
    count: {
      type: [Number, String, Promise],
      default: 0
    },
    route: {
      type: [String, Object],
      default: ''
    },
    callback: {
      type: Function,
      default: () => {
      }
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    iCount() {
      const count = this.body.count || this.count
      return count
    },
    iRoute() {
      return this.body.route || this.route
    },
    iDisabled() {
      return this.body.disabled === undefined ? this.disabled : this.body.disabled
    }
  },
  methods: {
    handleClick() {
      if (this.iDisabled) {
        return
      }
      if (this.iRoute) {
        this.$router.push(this.iRoute)
        return
      }
      this.callback.bind(this)()
      this.$emit('click')
    }
  }
 }
 </script>
 <style lang="scss" scoped>
-  .pull-right {
+.summary-header {
-    float: right !important;
+  //color: var(--color-icon-primary);
-  }
+  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  cursor: pointer;
-  .header-title {
+  .title {
-    font-size: 14px;
+    font-style: normal;
    margin: 0 0 7px;
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    line-height: 1.2;
  }
 }
-  .right-side ::v-deep .el-tag {
+.no-margins {
-    font-weight: 600;
+  margin: 0 !important;
    padding: 3px 8px;
    text-shadow: none;
    line-height: 1;
  }
-  h1 {
+  .num {
-    font-size: 30px;
+    font-style: normal;
-    font-weight: 100;
+    font-weight: 500;
-  }
+    font-size: 24px;
    line-height: 40px;
    color: var(--color-text-primary);
    cursor: pointer;
-  .el-card__body {
+    &:hover {
-    background-color: #ffffff;
+      color: var(--color-primary);
-    color: inherit;
+    }
    padding: 15px 20px 20px 20px !important;
    border-color: #e7eaec;
    border-image: none;
    border-style: solid solid none;
    border-width: 1px 0;
  }
  .no-margins {
    margin: 0 !important;
  }
  .disabled-link {
    color: #428bca;
  }
 }
 </style>
--- a/src/views/dashboard/components/ColumnChart.vue
+++ b/src/views/dashboard/components/ColumnChart.vue
--- a/src/views/dashboard/components/DataCard.vue
+++ b/src/views/dashboard/components/DataCard.vue
--- a/src/views/dashboard/components/LineChart.vue
+++ b/src/views/dashboard/components/LineChart.vue
--- a/src/views/dashboard/components/ProgressChart.vue
+++ b/src/views/dashboard/components/ProgressChart.vue
--- a/src/views/dashboard/components/RankTable.vue
+++ b/src/views/dashboard/components/RankTable.vue
@@ -9,18 +9,29 @@
      class="table"
      style="width: 100%"
    >
-      <el-table-column :label="$tc('Ranking')" width="80px">
+      <el-table-column :label="$tc('Ranking')">
-        <template v-slot="scope">
+        <template #header>
-          <span>{{ scope.$index + 1 }}</span>
+          <el-tooltip :content="$t('Ranking')" placement="top" :open-delay="500">
            <span style="cursor: pointer;">{{ $t('Ranking') }}</span>
          </el-tooltip>
        </template>
        <template #default="scope">
          {{ scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column
        v-for="i in config.columns"
        :key="i.prop"
        :label="i.label"
        :prop="i.prop"
-        :width="i.width"
+        :width="getColumnWidth(i)"
-      />
+      >
        <template #header>
          <el-tooltip :content="i.label" placement="top" :open-delay="500">
            <span style="cursor: pointer;">{{ i.label }}</span>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
 </template>
@@ -56,6 +67,19 @@ export default {
    this.getList()
  },
  methods: {
    getColumnWidth(column) {
      if (column.prop === 'total') {
        const locale = this.$i18n.locale
        switch (locale) {
          case 'en':
            return '120px'
          case 'pt-br':
            return '220px'
          default:
            return '100px'
        }
      }
    },
    getList() {
      this.$axios.get(this.tableUrl).then(res => {
        this.tableData = this.config.data ? res?.[this.config.data] : res
--- a/src/views/dashboard/components/RealTimeSummary.vue
+++ b/src/views/dashboard/components/RealTimeSummary.vue
@@ -15,7 +15,7 @@
 <script>
 import Title from './Title.vue'
-import SummaryCard from './SummaryCard'
+import SummaryCard from '@/components/Cards/SummaryCard'
 export default {
  components: { Title, SummaryCard },
@@ -85,15 +85,18 @@ export default {
 .box {
  padding: 20px;
  background: #FFFFFF;
  .content {
    .el-col {
      padding-left: 16px;
      border-left: 1px solid #EFF0F1;
      &:first-child {
        padding-left: 0;
        border-left: none;
      }
    }
    .sub {
      font-style: normal;
      font-weight: 400;
@@ -101,6 +104,7 @@ export default {
      line-height: 20px;
      color: #646A73;
    }
    .num {
      font-style: normal;
      font-weight: 500;
--- a/src/views/dashboard/components/RingChart.vue
+++ b/src/views/dashboard/components/RingChart.vue
@@ -23,24 +23,42 @@ export default {
  },
  computed: {
    options() {
-      const { total = 0, active = 0, title, color } = this.config
+      const { total = 0, active = 0, title, color, colors } = this.config
      const activeDecimal = new Decimal(active)
      const totalDecimal = new Decimal(total)
      let percentage = activeDecimal.dividedBy(totalDecimal).times(100)
      percentage = isNaN(percentage) ? 0 : percentage
      percentage = percentage.toFixed(2)
      const formatTitle = (text) => {
        if (!text) return ''
        const maxLength = 23
        const lines = []
        for (let i = 0; i < text.length; i += maxLength) {
          lines.push(text.slice(i, i + maxLength))
        }
        return lines.join('\n')
      }
      return {
        title: [
          {
-            text: this.config.chartTitle,
+            text: formatTitle(this.config.chartTitle),
            textStyle: {
              color: '#646A73',
-              fontSize: 12
+              fontSize: 12,
              lineHeight: 16,
              rich: {
                width: 100,
                overflow: 'break'
              }
            },
            textAlign: 'center',
            left: '48%',
-            top: '32%'
+            top: '32%',
            width: 100,
            overflow: 'break'
          },
          {
            left: '48%',
@@ -61,7 +79,7 @@ export default {
        legend: {
          show: false
        },
-        color: [color, 'rgba(43, 147, 124, 0.05)'],
+        color: colors || [color, 'rgba(43, 147, 124, 0.05)'],
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {d}%'
--- a/src/views/dashboard/components/SummaryCountCard.vue
+++ b/src/views/dashboard/components/SummaryCountCard.vue
@@ -4,18 +4,20 @@
      <Title :config="config" />
    </div>
    <div class="content">
-      <el-row type="flex" justify="space-between">
+      <SummaryCard
-        <el-col v-for="item of items" :key="item.title" :md="8" :sm="12" :xs="12">
+        v-for="item of items"
-          <SummaryCard :title="item.title" :body="item.body" />
+        :key="item.title"
-        </el-col>
+        :body="item.body"
-      </el-row>
+        :title="item.title"
        class="summary-card"
      />
    </div>
  </div>
 </template>
 <script>
-import Title from '../components/Title.vue'
+import Title from './Title.vue'
-import SummaryCard from '../components/SummaryCard'
+import SummaryCard from '@/components/Cards/SummaryCard'
 export default {
  components: { Title, SummaryCard },
@@ -35,8 +37,7 @@ export default {
    }
  },
  data() {
-    return {
+    return {}
    }
  }
 }
 </script>
@@ -45,28 +46,21 @@ export default {
 .box {
  padding: 20px;
  background: #FFFFFF;
  .content {
-    .el-col {
+    display: flex;
    justify-content: space-between;
    padding: 0 10px;
    .summary-card {
      padding-left: 16px;
      border-left: 1px solid #EFF0F1;
      &:first-child {
        padding-left: 0;
        border-left: none;
      }
    }
    .sub {
      font-style: normal;
      font-weight: 400;
      font-size: 12px;
      line-height: 20px;
      color: #646A73;
    }
    .num {
      font-style: normal;
      font-weight: 500;
      font-size: 24px;
      cursor: pointer;
    }
  }
 }
 </style>
--- a/src/views/dashboard/components/SwitchDate.vue
+++ b/src/views/dashboard/components/SwitchDate.vue
--- a/src/views/dashboard/components/Title.vue
+++ b/src/views/dashboard/components/Title.vue
--- a/src/components/DataActions/index.vue
+++ b/src/components/DataActions/index.vue
@@ -5,15 +5,28 @@
        v-if="action.dropdown"
        v-show="action.dropdown.length > 0"
        :key="action.name"
        :class="[action.name, {grouped: action.grouped }]"
        :size="action.size"
        :split-button="!!action.split"
        :type="action.type"
        class="action-item"
        placement="bottom-start"
        trigger="click"
        @click="handleClick(action)"
        @command="handleDropdownCallback"
      >
-        <el-button :size="size" class="more-action" v-bind="cleanButtonAction(action)">
+        <span v-if="action.split">
-          <span v-if="action.icon && !action.icon.startsWith('el-')" class="pre-icon">
+          {{ action.title }}
-            <i v-if="action.icon.startsWith('fa')" :class="'fa fa-fw ' + action.icon" />
+        </span>
-            <svg-icon v-else :icon-class="action.icon" />
+        <el-button
          v-else
          :class="action.name"
          :size="size"
          class="more-action"
          v-bind="{...cleanButtonAction(action), icon: ''}"
        >
          <span class="pre-icon">
            <Icon v-if="action.icon" :icon="action.icon" />
          </span>
          <span v-if="action.title">
            {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
@@ -29,7 +42,13 @@
            >
              {{ option.group }}
            </div>
-            <el-tooltip :key="option.name" :content="option.tip" :disabled="!option.tip" :open-delay="500" placement="top">
+            <el-tooltip
              :key="option.name"
              :content="option.tip"
              :disabled="!option.tip"
              :open-delay="500"
              placement="top"
            >
              <el-dropdown-item
                :key="option.name"
                :command="[option, action]"
@@ -37,9 +56,8 @@
                class="dropdown-item"
                v-bind="{...option, icon: ''}"
              >
-                <span v-if="option.icon" class="pre-icon">
+                <span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
-                  <i v-if="option.icon.startsWith('fa')" :class="'fa fa-fw ' + option.icon" />
+                  <Icon v-if="option.icon" :icon="option.icon" />
                  <svg-icon v-else :icon-class="option.icon" />
                </span>
                {{ option.title }}
              </el-dropdown-item>
@@ -51,16 +69,16 @@
      <el-button
        v-else
        :key="action.name"
        :class="[action.name, {grouped: action.grouped }]"
        :size="size"
        class="action-item"
-        v-bind="{...cleanButtonAction(action), icon: action.icon && action.icon.startsWith('el-') ? action.icon : ''}"
+        v-bind="{...cleanButtonAction(action), icon: ''}"
        @click="handleClick(action)"
      >
-        <el-tooltip :content="action.tip" :disabled="!action.tip" :open-delay="500" placement="top">
+        <el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
          <span>
-            <span v-if="action.icon && !action.icon.startsWith('el-')" style="vertical-align: initial">
+            <span v-if="action.icon" style="vertical-align: initial">
-              <i v-if="action.icon.startsWith('fa')" :class="'fa ' + action.icon" />
+              <Icon :icon="action.icon" />
              <svg-icon v-else :icon-class="action.icon" />
            </span>
            {{ action.title }}
          </span>
@@ -72,9 +90,13 @@
 <script>
 import { toSentenceCase } from '@/utils/common'
 import Icon from '@/components/Widgets/Icon/index.vue'
 export default {
  name: 'DataActions',
  components: {
    Icon
  },
  props: {
    grouped: {
      type: Boolean,
@@ -99,6 +121,9 @@ export default {
    }
  },
  methods: {
    actionsHasIcon(actions) {
      return actions.some(action => action.icon)
    },
    hasIcon(action, type = '') {
      const icon = action.icon
      if (!icon) {
@@ -156,6 +181,7 @@ export default {
      delete action['callback']
      delete action['name']
      delete action['can']
      delete action['split']
      return action
    },
    cleanActions(actions) {
@@ -185,6 +211,10 @@ export default {
        }
        delete action['can']
        if (!action.size) {
          action.size = 'small'
        }
        if (action.dropdown) {
          action.dropdown = this.cleanActions(action.dropdown)
        }
@@ -209,6 +239,10 @@ $color-drop-menu-border: #e4e7ed;
  .action-item {
    margin-left: 5px;
    &.grouped {
      margin-left: 0;
    }
    &:first-child {
      margin-left: 0;
    }
@@ -249,10 +283,15 @@ $color-drop-menu-border: #e4e7ed;
  align-items: flex-end;
  .el-button {
-    display: flex;
+    padding: 2px 5px;
-    align-items: center;
+
-    padding: 2px 6px;
+    &:not(.is-plain) {
-    color: $btn-text-color;
+      color: $btn-text-color;
    }
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    * {
      vertical-align: baseline !important;
@@ -280,7 +319,6 @@ $color-drop-menu-border: #e4e7ed;
 // 下拉 options
 .el-dropdown-menu {
  ::v-deep .more-batch-processing {
    text-align: center;
    &:hover {
      background-color: transparent !important;
@@ -303,6 +341,7 @@ $color-drop-menu-border: #e4e7ed;
  .dropdown-item {
    color: var(--color-text-primary);
    line-height: 34px;
    .pre-icon {
      width: 17px;
@@ -324,6 +363,8 @@ $color-drop-menu-border: #e4e7ed;
  }
  .el-dropdown-menu__item {
    padding: 0 20px;
    &.is-disabled {
      color: var(--color-disabled);
      cursor: not-allowed;
--- a/src/components/Dialog/DiffDetail.vue
+++ b/src/components/Dialog/DiffDetail.vue
@@ -1,6 +1,7 @@
 <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
@@ -0,0 +1,71 @@
 <template>
  <Dialog
    :show-cancel="false"
    :visible="iVisible"
    class="processing-dialog"
    height="300"
    title="Processing"
    width="300"
    @confirm="iVisible=false"
  >
    <div id="load">
      <div class="spinner" />
    </div>
  </Dialog>
 </template>
 <script>
 import Dialog from './index.vue'
 export default {
  name: 'ProcessingDialog',
  components: { Dialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    iVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 .processing-dialog {
  ::v-deep .el-dialog__body {
    overflow: hidden;
  }
 }
 .spinner {
  width: 100px;
  height: 100px;
  border: 5px solid rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  border-top-color: var(--color-primary);
  animation: spin 1s infinite linear;
 }
 #load {
  display: flex;
  justify-content: center;
 }
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
 }
 </style>
--- a/src/components/Dialog/RemoteProcessingDialog.vue
+++ b/src/components/Dialog/RemoteProcessingDialog.vue
@@ -0,0 +1,69 @@
 <template>
  <Dialog
    :visible="iVisible"
    height="300"
    title="Processing"
    width="300"
    class="processing-dialog"
  >
    <div id="load">
      <div class="spinner" />
    </div>
  </Dialog>
 </template>
 <script>
 import Dialog from './index.vue'
 export default {
  name: 'RemoteProcessingDialog',
  components: { Dialog },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {}
  },
  computed: {
    iVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 .processing-dialog {
  ::v-deep .el-dialog__body {
    overflow: hidden;
  }
 }
 .spinner {
    width: 100px;
    height: 100px;
    border: 5px solid rgba(0, 0, 0, 0.1);
    border-radius: 50%;
    border-top-color: var(--color-primary);
    animation: spin 1s infinite linear;
 }
 #load {
  display: flex;
  justify-content: center;
 }
@keyframes spin {
    to {
        transform: rotate(360deg);
    }
 }
 </style>
--- a/src/components/Dialog/ReportDialog.vue
+++ b/src/components/Dialog/ReportDialog.vue
@@ -0,0 +1,75 @@
 <template>
  <div>
    <Dialog
      v-if="iVisible"
      :destroy-on-close="true"
      :show-cancel="false"
      :show-confirm="false"
      :title="$tc('Report')"
      :visible.sync="iVisible"
      top="35vh"
      width="80%"
      @close="loading=true"
    >
      <span v-if="loading" v-loading="loading" class="loading" />
      <iframe title="dialog" :src="url" style="border: none;" @load="onIframeLoad" />
    </Dialog>
  </div>
 </template>
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 export default {
  name: 'ReportDialog',
  components: {
    Dialog
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    url: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      loading: true
    }
  },
  computed: {
    iVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  mounted() {
  },
  beforeMount() {
  },
  methods: {
    onIframeLoad() {
      this.loading = false
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 iframe {
  width: 100%;
  height: 500px;
 }
 .loading {
  margin-top: 20px;
  display: block;
 }
 </style>
--- a/src/components/Dialog/Secret.vue
+++ b/src/components/Dialog/Secret.vue
@@ -0,0 +1,96 @@
 <template>
  <Dialog
    :show-cancel="false"
    :title="title"
    :visible.sync="visible"
    :close-on-click-modal="false"
    width="700px"
    @close="onClose"
    @confirm="visible = false"
  >
    <el-alert type="warning" :closable="false">
      {{ warningText }}
      <div class="secret">
        <div class="row">
          <span class="col">ID:</span>
          <span class="value">{{ keyInfo.id }}</span>
          <i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.id)" />
        </div>
        <div class="row">
          <span class="col">Secret:</span>
          <span class="value">{{ keyInfo.secret }}</span>
          <i class="el-icon-copy-document copy-icon" @click="handleCopy(keyInfo.secret)" />
        </div>
      </div>
    </el-alert>
  </Dialog>
 </template>
 <script>
 import i18n from '@/i18n/i18n'
 import { copy } from '@/utils/common'
 import Dialog from '@/components/Dialog/index'
 export default {
  name: 'Secret',
  components: {
    Dialog
  },
  props: {
    title: {
      type: String,
      default: () => i18n.t('CreateAccessKey')
    },
    warningText: {
      type: String,
      default: () => i18n.t('ApiKeyWarning')
    }
  },
  data() {
    return {
      keyInfo: { id: '', secret: '' },
      visible: false
    }
  },
  methods: {
    show(data) {
      this.keyInfo = data
      this.visible = true
    },
    onClose() {
      this.$emit('close')
    },
    handleCopy(value) {
      copy(value)
    }
  }
 }
 </script>
 <style lang='scss' scoped>
 .secret {
  color: #2b2f3a;
  margin-top: 20px;
 }
 .row {
  margin-bottom: 10px;
 }
 .col {
  width: 100px;
  text-align: left;
  display: inline-block;
 }
 .copy-icon {
  margin-left: 5px;
  cursor: pointer;
  transition: color 0.2s;
 }
 .value {
  font-weight: 600;
 }
 </style>
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -82,8 +82,7 @@ export default {
    }
  },
  data() {
-    return {
+    return {}
    }
  },
  computed: {
    iWidth() {
@@ -102,59 +101,69 @@ export default {
 </script>
 <style lang="scss" scoped>
-  .dialog ::v-deep .el-dialog {
+.dialog ::v-deep .el-dialog {
-    border-radius: 0.3em;
+  border-radius: 0.3em;
-    max-width: min(100vw, 1500px);
+  max-width: min(100vw, 1500px);
  //.el-form, .form-buttons {
  //  margin-left: 20px;
  //}
  .form-group-header {
    margin-left: 20px;
  }
  .el-form--label-top {
    .form-group-header {
-      margin-left: 20px;
+      margin-left: 0;
    }
  }
-    .el-icon-circle-check {
+  .el-icon-circle-check {
-      display: none;
+    display: none;
-    }
+  }
-    &__header {
+  &__header {
-      box-sizing: border-box;
+    box-sizing: border-box;
-      padding: 15px 22px;
+    padding: 15px 22px;
-      border-bottom: 1px solid #dee2e6;
+    border-bottom: 1px solid #dee2e6;
-      font-weight: 400;
+    font-weight: 400;
-    }
+  }
-    &__body {
+  &__body {
-      padding: 20px 30px;
+    padding: 20px 30px;
      font-size: 13px;
-      &:has(.el-table) {
+    &:has(.el-table) {
-        background: #f3f3f4;
+      background: #f3f3f4;
      }
    }
    &__footer {
      border-top: 1px solid #dee2e6;
      padding: 16px 25px;
      justify-content: flex-end;
    }
  }
-  @media (max-width: 900px) {
+  &__footer {
-    .dialog ::v-deep .el-dialog {
+    border-top: 1px solid #dee2e6;
-      max-width: calc(100% - 30px);
+    padding: 16px 25px;
-    }
+    justify-content: flex-end;
  }
 }
-  .dialog-footer ::v-deep button.el-button {
+@media (max-width: 900px) {
-    font-size: 13px;
+  .dialog ::v-deep .el-dialog {
-    padding: 8px 12px;
+    max-width: calc(100% - 30px);
  }
 }
-  .dialog-fade-enter-active, .dialog-fade-leave-active {
+.dialog-footer ::v-deep button.el-button {
-    transition: opacity 1s ease;
+  font-size: 13px;
-  }
+  padding: 8px 12px;
 }
-  .dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
+.dialog-fade-enter-active, .dialog-fade-leave-active {
-  {
+  transition: opacity 1s ease;
-    opacity: 0;
+}
-  }
+
 .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
@@ -0,0 +1,289 @@
 <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
    direction="rtl"
    v-on="$listeners"
  >
    <div class="drawer__content">
      <slot name="default">
        <component
          :is="component"
          v-if="component"
          ref="dynamicComponent"
          v-bind="componentProps"
          v-on="componentListeners"
        />
      </slot>
    </div>
    <div v-if="hasFooter" ref="drawerFooter" class="drawer__footer" />
  </el-drawer>
 </template>
 <script>
 export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    size: {
      type: String,
      default: '768px'
    },
    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 {
      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()
    }
  }
 }
 </script>
 <style lang='scss' scoped>
 .drawer__no-footer {
  ::v-deep {
    .drawer {
      .page {
        height: calc(100vh - 55px);
      }
    }
  }
 }
 .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;
      }
      // 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;
      font-size: 16px;
      font-weight: 500;
      color: var(--color-text-primary);
    }
    .sql.container {
      display: none;
    }
    .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 {
      background: #f3f3f3;
    }
    .drawer__footer {
      border-top: solid 1px #f3f3f3;
    }
    //.el-drawer__header {
    //  margin-bottom: 20px;
    //
    //  span {
    //    font-size: 16px;
    //    font-weight: 800;
    //    color: var(--color-text-primary);
    //  }
    //}
  }
 }
 </style>
--- a/src/components/Form/AutoDataForm/index.vue
+++ b/src/components/Form/AutoDataForm/index.vue
@@ -7,18 +7,18 @@
    v-bind="$attrs"
    v-on="$listeners"
  >
-    <div
+    <template
      v-for="(group, i) in groups"
      :key="'group-'+group.name"
      :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)"
      />
-    </div>
+    </template>
  </DataForm>
 </template>
@@ -163,5 +163,6 @@ export default {
      return true
    }
  }
 }
 </script>
--- a/src/components/Form/AutoDataForm/utils.js
+++ b/src/components/Form/AutoDataForm/utils.js
@@ -1,7 +1,6 @@
 import Vue from 'vue'
 import ObjectSelect2 from '@/components/Form/FormFields/NestedObjectSelect2.vue'
 import NestedField from '@/components/Form/AutoDataForm/components/NestedField.vue'
 import Switcher from '@/components/Form/FormFields/Switcher.vue'
 import rules from '@/components/Form/DataForm/rules'
 import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
 import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
@@ -64,8 +63,9 @@ export class FormFieldGenerator {
        }
        break
      case 'boolean':
-        type = ''
+        type = 'checkbox'
-        field.component = Switcher
+        // field.component = Switcher
        // field.type = 'checkbox'
        break
      case 'list':
        type = 'input'
@@ -112,7 +112,7 @@ export class FormFieldGenerator {
    let nestedFields = fieldMeta.fields || []
    const nestedFieldsMeta = fieldMeta.fieldsMeta || {}
    const nestedFieldsRemoteMeta = fieldRemoteMeta.children || {}
-    if (nestedFields === '__all__') {
+    if (nestedFields.toString() === '__all__') {
      nestedFields = Object.keys(nestedFieldsRemoteMeta)
    }
    for (const name of nestedFields) {
--- 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,18 +8,20 @@
    v-bind="data.attrs"
  >
    <template v-if="data.label" #label>
-      <span>{{ data.label }}</span>
+      <span :title="data.label">
-      <el-tooltip
+        {{ data.label }}
-        v-if="data.helpTip"
+        <el-tooltip
-        :open-delay="500"
+          v-if="data.helpTip"
-        :tabindex="-1"
+          :open-delay="500"
-        effect="dark"
+          :tabindex="-1"
-        placement="right"
+          effect="dark"
-        popper-class="help-tips"
+          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" />
+          <div slot="content" v-sanitize="data.helpTip" class="help-tip-content" /> <!-- Noncompliant -->
-      </el-tooltip>
+          <i class="fa fa-question-circle-o help-tip-icon" />
        </el-tooltip>
      </span>
    </template>
    <template v-if="readonly && hasReadonlyContent">
      <div
@@ -71,6 +73,7 @@
          <el-tooltip v-if="opt.tip" :content="opt.tip" :open-delay="500" placement="top">
            <i class="el-icon-warning-outline" />
          </el-tooltip>
          <span v-if="data.helpText">{{ data.helpText }}</span>
        </el-checkbox>
        <!-- WARNING: radio 用 label 属性来表示 value 的含义 -->
        <!-- FYI: radio 的 value 属性可以在没有 radio-group 时用来关联到同一个 v-model -->
@@ -87,7 +90,7 @@
        </el-radio>
      </template>
    </custom-component>
-    <div v-if="data.helpText" class="help-block">
+    <div v-if="data.helpText" :class="data.type" class="help-block">
      <el-alert
        v-if="data.helpText.startsWith('!')"
        :closable="false"
@@ -99,6 +102,9 @@
      </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>
@@ -121,6 +127,18 @@ 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
@@ -315,6 +333,10 @@ export default {
  ::v-deep .el-alert__icon {
    font-size: 16px
  }
  &.checkbox {
    //display: inline;
  }
 }
 .help-tip-icon {
--- a/src/components/Form/DataForm/index.vue
+++ b/src/components/Form/DataForm/index.vue
@@ -1,68 +1,71 @@
 <template>
-  <ElFormRender
+  <div>
-    :id="id"
+    <ElFormRender
-    ref="form"
+      :id="id"
-    :class="mobile ? 'mobile' : 'desktop'"
+      ref="form"
-    :content="fields"
+      :class="[mobile ? 'mobile' : 'desktop']"
-    :form="basicForm"
+      :content="fields"
-    :label-position="labelPosition"
+      :form="basicForm"
-    label-width="25%"
+      :label-position="iLabelPosition"
-    v-bind="$attrs"
+      class="form-fields"
-    v-on="$listeners"
+      label-width="25%"
-  >
+      v-bind="$attrs"
-    <!-- slot 透传 -->
+      v-on="$listeners"
-    <slot
+    >
-      v-for="item in fields"
+      <!-- slot 透传 -->
-      :slot="`id:${item.id}`"
+      <slot
-      :name="`id:${item.id}`"
+        v-for="item in fields"
-    />
+        :slot="`id:${item.id}`"
-    <slot
+        :name="`id:${item.id}`"
-      v-for="item in fields"
+      />
-      :slot="`$id:${item.id}`"
+      <slot
-      :name="`$id:${item.id}`"
+        v-for="item in fields"
-    />
+        :slot="`$id:${item.id}`"
        :name="`$id:${item.id}`"
      />
-    <el-form-item v-if="hasButtons" class="form-buttons">
+      <div v-if="hasButtons" class="form-buttons">
-      <el-button
+        <el-button
-        v-if="defaultButton"
+          v-if="defaultButton"
-        :disabled="!canSubmit"
+          :disabled="!canSubmit"
-        :loading="isSubmitting"
+          :loading="isSubmitting"
-        :size="submitBtnSize"
+          :size="submitBtnSize"
-        type="primary"
+          type="primary"
-        @click="submitForm('form')"
+          @click="submitForm('form')"
-      >
+        >
-        {{ iSubmitBtnText }}
+          {{ iSubmitBtnText }}
-      </el-button>
+        </el-button>
-      <el-button
+        <el-button
-        v-if="defaultButton && hasSaveContinue"
+          v-if="defaultButton && hasSaveContinue"
-        size="small"
+          size="small"
-        @click="submitForm('form', true)"
+          @click="submitForm('form', true)"
-      >
+        >
-        {{ $t("SaveAndAddAnother") }}
+          {{ $t("SaveAndAddAnother") }}
-      </el-button>
+        </el-button>
-      <el-button
+        <el-button
-        v-if="defaultButton && hasReset"
+          v-if="defaultButton && hasReset"
-        size="small"
+          size="small"
-        @click="resetForm('form')"
+          @click="resetForm('form')"
-      >
+        >
-        {{ $t("Reset") }}
+          {{ $t("Reset") }}
-      </el-button>
+        </el-button>
-      <el-button
+        <el-button
-        v-for="button in moreButtons"
+          v-for="button in moreButtons"
-        v-show="!button.hidden"
+          v-show="!button.hidden"
-        :key="button.title"
+          :key="button.title"
-        :loading="button.loading"
+          :loading="button.loading"
-        size="small"
+          size="small"
-        v-bind="button"
+          v-bind="button"
-        @click="handleClick(button)"
+          @click="handleClick(button)"
-      >
+        >
-        {{ button.title }}
+          {{ button.title }}
-      </el-button>
+        </el-button>
-    </el-form-item>
+      </div>
-  </ElFormRender>
+    </ElFormRender>
  </div>
 </template>
 <script>
@@ -121,6 +124,10 @@ export default {
    isSubmitting: {
      type: Boolean,
      default: false
    },
    labelPosition: {
      type: String,
      default: ''
    }
  },
  data() {
@@ -137,7 +144,17 @@ export default {
    mobile() {
      return this.$store.state.app.device === 'mobile'
    },
-    labelPosition() {
+    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'
      return this.mobile ? 'top' : 'right'
    }
  },
@@ -211,21 +228,38 @@ 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 {
@@ -301,8 +335,9 @@ export default {
    }
  }
-  ::v-deep .el-form-item.form-buttons {
+  ::v-deep .form-buttons {
-    margin-top: 20px;
+    margin-top: 30px;
    margin-left: 25%;
  }
 }
--- a/src/components/Form/FormFields/BasicTree.vue
+++ b/src/components/Form/FormFields/BasicTree.vue
@@ -115,6 +115,73 @@ 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;
  }
@@ -129,7 +196,7 @@ export default {
    }
    .el-tree-node__children {
-      margin-left: -25px;
+      //margin-left: -25px;
    }
  }
 }
--- a/src/components/Form/FormFields/CronTab/Crontab.vue
+++ b/src/components/Form/FormFields/CronTab/Crontab.vue
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Day.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Day.vue
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Hour.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Hour.vue
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Min.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Min.vue
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Month.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Month.vue
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Result.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Result.vue
--- a/src/components/Form/FormFields/CronTab/components/Crontab-Week.vue
+++ b/src/components/Form/FormFields/CronTab/components/Crontab-Week.vue
--- a/src/components/Form/FormFields/CronTab/index.vue
+++ b/src/components/Form/FormFields/CronTab/index.vue
--- 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,6 +28,15 @@ export default {
    dateEnd: {
      type: [Number, String, Date],
      default: null
    },
    type: {
      type: String,
      default: 'daterange'
      // default: 'datetimerange'
    },
    toMinMax: {
      type: Boolean,
      default: true
    }
  },
  data() {
@@ -35,6 +44,10 @@ 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: {
@@ -74,9 +87,13 @@ export default {
      }
    },
    onShortcutClick(picker, day) {
-      const end = new Date()
+      let start = new Date()
-      const start = new Date()
+      let end = 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])
    }
  }
@@ -84,9 +101,18 @@ 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/JSONManyToManySelect/AttrMatchResultDialog.vue
+++ b/src/components/Form/FormFields/JSONManyToManySelect/AttrMatchResultDialog.vue
@@ -13,7 +13,7 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
-import ListTable from '@/components/Table/ListTable/index.vue'
+import { DrawerListTable as ListTable } from '@/components'
 export default {
  name: 'AttrMatchResultDialog',
--- a/src/components/Form/FormFields/PasswordInput.vue
+++ b/src/components/Form/FormFields/PasswordInput.vue
@@ -5,7 +5,9 @@
    v-bind="iAttrs"
    @input="handleInput"
    v-on="$listeners"
-  />
+  >
    hello
  </Password>
 </template>
 <script>
--- a/src/components/Form/FormFields/PasswordRule.vue
+++ b/src/components/Form/FormFields/PasswordRule.vue
@@ -55,22 +55,22 @@ export default {
          {
            id: 'uppercase',
            label: this.$t('Uppercase'),
-            type: 'switch'
+            type: 'checkbox'
          },
          {
            id: 'lowercase',
            label: this.$t('Lowercase'),
-            type: 'switch'
+            type: 'checkbox'
          },
          {
            id: 'digit',
            label: this.$t('Digit'),
-            type: 'switch'
+            type: 'checkbox'
          },
          {
            id: 'symbol',
            label: this.$t('SpecialSymbol'),
-            type: 'switch'
+            type: 'checkbox'
          },
          {
            id: 'exclude_symbols',
--- 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: 1px 2px 1px;
+  padding: 0 6px;
  border: 1px solid #dcdee2;
  border-radius: 1px;
  background-color: #fff;
@@ -162,7 +162,7 @@ export default {
  }
  & ::v-deep .el-tag {
-    margin-top: 1px;
+    margin-bottom: 1px;
    font-family: sans-serif !important;
  }
@@ -178,6 +178,7 @@ export default {
    max-width: 100%;
    border: none;
    padding-left: 10px;
    height: 28px;
  }
 }
@@ -187,7 +188,7 @@ export default {
 }
 .filter-field ::v-deep .el-input__inner {
-  height: 28px;
+  height: 28px !important;
 }
 .show-password {
--- a/src/components/Form/FormFields/UpdateToken.vue
+++ b/src/components/Form/FormFields/UpdateToken.vue
@@ -1,21 +1,27 @@
 <template>
-  <div>
+  <div class="update-token">
    <el-button v-show="!isShow" icon="el-icon-edit" type="text" @click="isShow=true">
      {{ text }}
    </el-button>
    <el-input
      v-show="isShow"
      v-model.trim="curValue"
      :disabled="disabled"
      :placeholder="placeholder"
      :type="type"
-      autocomplete="new-password"
+      class="password-input"
      show-password
      @change="onChange"
    />
    <el-button :disabled="disabled" size="small" type="text" @click="randomPassword">
      <i class="fa fa-refresh" />
    </el-button>
  </div>
 </template>
 <script>
 import { randomString } from '@/utils/string'
 export default {
  props: {
    value: {
@@ -39,6 +45,10 @@ export default {
    placeholder: {
      type: String,
      default: () => ''
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
@@ -55,7 +65,24 @@ export default {
  methods: {
    onChange(e) {
      this.$emit('input', this.curValue)
    },
    randomPassword() {
      this.curValue = randomString(24, true)
      this.$emit('input', this.curValue)
    }
  }
 }
 </script>
 <style lang='scss' scoped>
 .password-input {
  width: calc(100% - 50px);
 }
 .update-token {
  i {
    color: var(--color-text-secondary);
    font-size: 14px;
  }
 }
 </style>
--- a/src/components/Form/FormFields/UploadField.vue
+++ b/src/components/Form/FormFields/UploadField.vue
@@ -8,7 +8,7 @@
    <div v-if="tip !== ''" class="help-block">{{ tip }}</div>
    <input v-model="value" hidden type="text" v-on="$listeners">
    <div>
-      <img :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs">
+      <img v-if="preview" :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs" alt="">
    </div>
  </div>
 </template>
--- 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}" :style="styleValue" />
+    <div :class="{'c-schedue': true, 'c-schedue-notransi': mode}" />
    <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,6 +45,7 @@
 const createArr = len => {
  return Array.from(Array(len)).map((ret, id) => id)
 }
 function splicing(list) {
  let same
  let i = -1
@@ -67,6 +68,7 @@ function splicing(list) {
  arr.shift()
  return arr.join('')
 }
 export default {
  name: 'WeekCronSelect',
  props: {
@@ -77,7 +79,7 @@ export default {
    colspan: {
      type: Number,
      default() {
-        return 2
+        return 1
      }
    }
  },
@@ -100,7 +102,7 @@ export default {
        this.$t('Saturday'),
        this.$t('Sunday')
      ],
-      weektimeData: [],
+      weekTimeData: [],
      timeRange: [] // 格式化之后数据
    }
  },
@@ -142,10 +144,10 @@ export default {
        return {
          value: ret,
          row: index,
-          child: children(ret, index, 48)
+          child: children(ret, index, 24 * this.colspan)
        }
      })
-      this.weektimeData = isData
+      this.weekTimeData = isData
    },
    // 反解析传递过来的默认值
    nextValue() {
@@ -169,7 +171,7 @@ 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 curWeek = this.weekTimeData[idNum]
        curWeek.child[i].check = true
      }
    },
@@ -209,8 +211,9 @@ export default {
      const nowDate = new Date(timeStamp).getTime()
      const targetStamp = new Date(nowDate + offsetGMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime()
-      const beginStamp = targetStamp + col * 1800000 // col * 30 * 60 * 1000
+      // (2 / this.colspan) 原来是一个单元格 30分钟，现在是一个单元格 30 * 2 / this.colspan 分钟
-      const endStamp = beginStamp + 1800000
+      const beginStamp = targetStamp + col * 1800000 * (2 / this.colspan) // col * 30 * 60 * 1000
      const endStamp = beginStamp + 1800000 * (2 / this.colspan)
      const begin = this.formatDate(new Date(beginStamp), 'hh:mm')
      const end = this.formatDate(new Date(endStamp), 'hh:mm')
@@ -218,7 +221,7 @@ export default {
    },
    // 清空时间段
    clearWeektime() {
-      this.weektimeData.forEach(item => {
+      this.weekTimeData.forEach(item => {
        item.child.forEach(t => {
          this.$set(t, 'check', false)
        })
@@ -228,7 +231,7 @@ export default {
    },
    // 全选
    selectAll() {
-      this.weektimeData.forEach(item => {
+      this.weekTimeData.forEach(item => {
        item.child.forEach(t => {
          this.$set(t, 'check', true)
        })
@@ -241,7 +244,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)
@@ -308,7 +311,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)
@@ -321,11 +324,12 @@ export default {
 </script>
 <style lang="scss" scoped>
 .c-weektime {
-  min-width: 640px;
+  //min-width: 440px;
  position: relative;
  display: inline-block;
  padding-right: 20px;
 }
 .c-schedue {
  background: #598fe6;
  position: absolute;
@@ -334,55 +338,70 @@ 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: 12px;
+    min-width: 10px;
    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: 13px;
+    font-size: 11px;
    .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;
@@ -392,11 +411,13 @@ export default {
    }
  }
 }
 .c-min-table {
  tr, td, th {
-    min-width: 24px;
+    min-width: 17px;
  }
 }
 .g-clearfix {
  &:after, &:before {
    clear: both;
@@ -404,16 +425,20 @@ 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,7 +1,13 @@
 <template>
-  <div class="form-group-header">
+  <div ref="formGroup" class="form-group-header">
    <div v-if="line" class="hr-line-dashed" />
-    <h3>{{ group['title'] }} </h3>
+    <h3 @click="toggle">{{ group['title'] }} </h3>
    <span class="compass" @click="toggle">
      <i :class="iconClass" />
    </span>
    <div v-if="!isVisible" class="ellipsis" @click="toggle">
      <i class="fa fa-angle-double-down" />
    </div>
  </div>
 </template>
@@ -20,16 +26,62 @@ 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;
+  border-top: 1px dashed #e7eaec;
-    color: #ffffff;
+  color: #ffffff;
-    background-color: #ffffff;
+  background-color: #ffffff;
-    height: 1px;
+  height: 1px;
-    margin: 20px 0;
+  margin: 20px 0;
 }
 h3 {
  display: inline-block;
  cursor: pointer;
 }
 .compass {
  display: inline-block;
  float: right;
  cursor: pointer;
 }
 .ellipsis {
  text-align: center;
  cursor: pointer;
 }
 </style>
--- a/src/components/IBox/index.vue
+++ b/src/components/IBox/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-card :class="'ibox ' + type" shadow="never" v-bind="$attrs">
+  <el-card :class="'ibox ' + type" :shadow="shadow" v-bind="$attrs">
    <template #header>
      <slot name="header">
        <div v-if="title" slot="header" class="clearfix ibox-title">
@@ -26,6 +26,10 @@ export default {
    type: {
      type: String,
      default: 'default'
    },
    shadow: {
      type: String,
      default: 'never'
    }
  },
  computed: {
--- a/src/components/QuickActions/index.vue
+++ b/src/components/QuickActions/index.vue
@@ -39,47 +39,32 @@ export default {
 </script>
 <style scoped>
-  html:lang(en) .quick-actions ::v-deep button {
+.quick-actions ::v-deep table {
-    width: 80px;
+  width: 100%;
-  }
+}
-  html:lang(ja) .quick-actions ::v-deep button {
+.quick-actions ::v-deep tr > td {
-    width: 100px;
+  line-height: 1.43;
-  }
+  padding: 8px 0;
  vertical-align: top;
  font-size: 13px;
  width: 50%;
 }
-  html:lang(zh-tw) .quick-actions ::v-deep button {
+.quick-actions ::v-deep tr > td > span:last-child {
-    width: 65px;
+  float: right;
-  }
+}
-  html:lang(zh-cn) .quick-actions ::v-deep button {
+.quick-actions ::v-deep button {
-    width: 65px;
+  padding: 4px 5px;
-  }
+  font-size: 13px;
  min-width: 65px;
-  .quick-actions ::v-deep table {
+  span {
-    width: 100%;
+    overflow: hidden;
-  }
+    white-space: nowrap; /* 控制文本不换行 */
-
+    text-overflow: ellipsis;
-  .quick-actions ::v-deep tr > td {
+    display: block;
    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;
    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
@@ -36,6 +36,7 @@
          <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,11 +23,17 @@
 <script type="text/jsx">
 import DataTable from '@/components/Table/DataTable/index.vue'
 import {
-  ActionsFormatter, ArrayFormatter, ChoicesFormatter, DateFormatter, DetailFormatter, DisplayFormatter,
+  ActionsFormatter,
  ArrayFormatter,
  ChoicesFormatter,
  CopyableFormatter,
  DateFormatter,
  DetailFormatter,
  DisplayFormatter,
  ObjectRelatedFormatter
 } from '@/components/Table/TableFormatters'
 import i18n from '@/i18n/i18n'
-import { newURL, replaceAllUUID, toSentenceCase } from '@/utils/common'
+import { newURL, ObjectLocalStorage, replaceAllUUID, toSentenceCase } from '@/utils/common'
 import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
 import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'
@@ -62,10 +68,21 @@ export default {
        currentCols: [],
        defaultCols: []
      },
-      isDeactivated: false
+      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'
    }
  },
  computed: {},
  watch: {
    config: {
      handler: _.debounce(function(iNew, iOld) {
@@ -120,6 +137,11 @@ export default {
    },
    generateColumnByName(name, col) {
      switch (name) {
        case 'id':
          col.width = '290px'
          col.formatter = CopyableFormatter
          col.iconPosition = 'left'
          break
        case 'name':
          col.formatter = DetailFormatter
          col.sortable = 'custom'
@@ -131,7 +153,7 @@ export default {
            prop: 'actions',
            label: i18n.t('Actions'),
            align: 'center',
-            width: '100px',
+            width: this.dynamicActionWidth,
            formatter: ActionsFormatter,
            fixed: 'right',
            formatterArgs: {}
@@ -187,7 +209,7 @@ export default {
          break
        case 'datetime':
          col.formatter = DateFormatter
-          col.width = '175px'
+          col.width = '155px'
          break
        case 'object_related_field':
          col.formatter = ObjectRelatedFormatter
@@ -348,6 +370,8 @@ export default {
      let configColumns = config.columns || allColumnNames
      const columnsExclude = config.columnsExclude || []
      const columnsAdd = config.columnsAdd || []
      configColumns = configColumns.concat(columnsAdd)
      configColumns = configColumns.filter(item => !columnsExclude.includes(item))
      // 解决后端 API 返回字段中包含 actions 的问题;
@@ -417,13 +441,9 @@ 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 = _.get(_tableConfig[tableName], 'showColumns', null)
+      const configShowColumnsNames = this.objTableColumns.get(tableName)
      let showColumnsNames = configShowColumnsNames || defaultColumnsNames
      if (showColumnsNames.length === 0) {
        showColumnsNames = totalColumnsNames
@@ -470,17 +490,12 @@ 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)
-      _tableConfig[tableName] = {
+      this.objTableColumns.set(tableName, columns)
-        'showColumns': columns
+
      }
      localStorage.setItem('tableConfig', JSON.stringify(_tableConfig))
      this.filterShowColumns()
    },
    filterChange(filters) {
--- a/src/components/Table/CardTable/DataCardTable/CardPanel.vue
+++ b/src/components/Table/CardTable/DataCardTable/CardPanel.vue
@@ -0,0 +1,178 @@
 <template>
  <div class="account-panel">
    <el-row :gutter="20">
      <el-col :span="21">
        <div class="title">
          <span>{{ object.name }}</span>
        </div>
      </el-col>
      <el-col v-if="iActions.length !== 0" :span="3" @click.native="handleClick($event)">
        <el-dropdown>
          <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"
              :key="action.name"
              :disabled="action.disabled"
              @click.native="action.callback(object)"
            >
              <i v-if="action.icon" :class="action.icon" /> {{ action.name }}
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </el-col>
    </el-row>
    <el-row :gutter="20" class="panel-content">
      <el-col :span="6" class="panel-image">
        <el-image :src="imageUrl" fit="contain" />
      </el-col>
      <el-col :span="18" class="panel-info">
        <InfoPanel
          v-for="(obj, index) in getInfos(object)"
          :key="index"
          :content="obj.content"
          :title="obj.title"
        />
      </el-col>
    </el-row>
  </div>
 </template>
 <script>
 import InfoPanel from './InfoPanel'
 export default {
  name: 'CardPanel',
  components: {
    InfoPanel
  },
  props: {
    tableConfig: {
      type: Object,
      default: () => ({})
    },
    object: {
      type: Object,
      required: true
    },
    actions: {
      type: Array,
      default: () => []
    },
    infos: {
      type: Array,
      default: () => []
    },
    getImage: {
      type: Function,
      default: (obj) => ''
    },
    getInfos: {
      type: Function,
      default: (obj) => []
    },
    handleUpdate: {
      type: Function,
      default: () => {
      }
    }
  },
  data() {
    return {
      defaultActions: [
        {
          id: 'update',
          name: this.$tc('Update'),
          icon: 'el-icon-edit',
          callback: this.handleUpdate,
          disabled: this.isDisabled('change')
        },
        {
          id: 'delete',
          name: this.$tc('Delete'),
          icon: 'el-icon-delete',
          callback: this.handleDelete,
          disabled: this.isDisabled('delete')
        }
      ]
    }
  },
  computed: {
    imageUrl() {
      return this.getImage(this.object)
    },
    iActions() {
      const mergedActions = new Map()
      this.defaultActions.forEach(a => {
        mergedActions.set(a.id, { ...a })
      })
      this.actions.forEach(a => {
        mergedActions.set(a.id, { ...a })
      })
      return Array.from(mergedActions.values())
    }
  },
  methods: {
    isDisabled(action) {
      const app = this.tableConfig.permissions?.app
      const resource = this.tableConfig.permissions?.resource
      return !this.$hasPerm(`${app}.${action}_${resource}`)
    },
    handleClick(event) {
      event.stopPropagation()
    },
    handleDelete() {
      const url = this.tableConfig.url
      this.$confirm(this.$tc('DeleteConfirmMessage'), this.$tc('Delete'), {
        confirmButtonText: this.$tc('Confirm'),
        cancelButtonText: this.$tc('Cancel'),
        type: 'warning'
      }).then(() => {
        this.$axios.delete(`${url}${this.object.id}/`).then(() => {
          this.$message({
            type: 'success',
            message: this.$tc('DeleteSuccess')
          })
          this.$emit('refresh')
        })
      })
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 .account-panel {
  display: flex;
  flex-direction: column;
  //height: 100%;
  cursor: pointer;
  .title {
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 1.1em;
    color: #555555;
  }
  .panel-content {
    display: flex;
    height: 100px;
    padding: 10px 0;
    .panel-image {
      margin: auto 5px;
    }
  }
  .el-divider--horizontal {
    margin: 5px 0;
  }
 }
 </style>
--- a/src/components/Table/CardTable/DataCardTable/InfoPanel.vue
+++ b/src/components/Table/CardTable/DataCardTable/InfoPanel.vue
@@ -1,9 +1,7 @@
 <template>
  <div class="panel-item">
    <span class="item-label">{{ title }} </span>
-    <el-link :underline="false" class="item-value">
+    <span :title="content" class="text-info">{{ content || '' }}</span>
      <span class="content">{{ content }}</span>
    </el-link>
  </div>
 </template>
@@ -38,14 +36,22 @@ export default {
 .panel-item {
  text-align: left;
-  padding: 5px 0;
+  padding: 3px 0;
  line-height: 20px;
  @include textOverflow;
  .item-label {
    text-align: left;
    display: inline-block;
-    width: 100px;
+    width: 35%;
  }
  .item-label::after {
    content: ':';
    margin-left: 1px;
  }
  .text-info {
    @include textOverflow;
  }
 }
--- a/src/components/Table/CardTable/DataCardTable/index.vue
+++ b/src/components/Table/CardTable/DataCardTable/index.vue
@@ -0,0 +1,44 @@
 <template>
  <CardTable
    ref="table"
    :columns="3"
    :table-config="tableConfig"
    v-bind="$attrs"
  >
    <template v-slot:default="slotProps">
      <CardPanel :object="slotProps.item" :table-config="tableConfig" v-bind="subComponentProps" />
    </template>
  </CardTable>
 </template>
 <script type="text/jsx">
 import CardTable from '@/components/Table/CardTable/index.vue'
 import CardPanel from './CardPanel.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>
--- a/src/components/Table/CardTable/index.vue
+++ b/src/components/Table/CardTable/index.vue
@@ -10,7 +10,7 @@
      <IBox v-if="totalData.length === 0">
        <el-empty :description="$t('NoData')" :image-size="200" class="no-data" style="padding: 20px" />
      </IBox>
-      <el-col v-for="(d, index) in totalData" :key="index" :lg="8" :md="12" :sm="24" style="min-width: 335px;">
+      <el-col v-for="(d, index) in totalData" :key="index" :lg="8" :md="12" :sm="24" class="el-col">
        <el-card
          :body-style="{ 'text-align': 'center', 'padding': '15px' }"
          :class="{'is-disabled': isDisabled(d)}"
@@ -19,8 +19,7 @@
          @click.native="onView(d)"
        >
          <keep-alive>
-            <component :is="subComponent" v-if="subComponent" :object="d" @refresh="getList" />
+            <slot :index="index" :item="d">
            <slot v-else :index="index" :item="d">
              <span v-if="d.edition === 'enterprise'" class="enterprise">
                {{ $t('Enterprise') }}
              </span>
@@ -85,6 +84,10 @@ export default {
  },
  props: {
    // 定义 table 的配置
    columns: {
      type: Number,
      default: 3
    },
    tableConfig: {
      type: Object,
      default: () => ({})
@@ -100,6 +103,10 @@ export default {
    subComponent: {
      type: Object,
      default: () => null
    },
    subComponentProps: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
@@ -371,6 +378,10 @@ export default {
  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
@@ -105,14 +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"
--- 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
@@ -34,14 +34,12 @@ 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()
  }
@@ -52,12 +50,12 @@ class StrategyNormal extends StrategyAbstract {
 */
 class StrategyPersistSelection extends StrategyAbstract {
  /**
-   * el-table 的 selection-change 事件不适用于开启跨页保存的情况。
+   * el-table的selection-change事件不适用于开启跨页保存的情况。
-   * 比如，当开启 persistSelection时，发生以下两个场景：
+   * 比如，当开启persistSelection时，发生以下两个场景：
   * 1. 用户点击翻页
   * 2. 用户点击行首的切换全选项按钮，清空当前页多选项数据
-   * 其中场景 1 应该保持 selected 不变；而场景 2 只应该从 selected 移除当前页所有行，保留其他页面的多选状态。
+   * 其中场景1应该保持selected不变；而场景2只应该从selected移除当前页所有行，保留其他页面的多选状态。
-   * 但 el-table 的 selection-change 事件在两个场景中无差别发生，所以这里不处理这个事件
+   * 但el-table的selection-change事件在两个场景中无差别发生，所以这里不处理这个事件
   */
  /**
@@ -65,24 +63,54 @@ class StrategyPersistSelection extends StrategyAbstract {
   */
  onSelect(selection, row) {
    const isChosen = selection.indexOf(row) > -1
    this.toggleRowSelection(row, isChosen)
  }
  /**
   * 用户切换当前页的多选
   */
  onSelectAll(selection, selectable = () => true) {
-    // 获取当前所有已选择的项
+    const { id, selected, data } = this.elDataTable
-    const selectedRows = this.elDataTable.data.filter(r => selection.includes(r))
+    const selectableRows = data.filter(selectable)
    // const isSelected = !!selection.length
-    // 判断是否已全选
+    // 创建已选择项的 id 集合，用于快速查找
-    const isSelected = this.elDataTable.data.every(r => selectable(r) && selectedRows.includes(r))
+    const selectedIds = new Set(selected.map(r => r[id]))
    const currentPageIds = new Set(selectableRows.map(row => row[id]))
-    this.elDataTable.data.forEach(r => {
+    // 前页面的选中状态
-      if (selectable(r)) {
+    const currentPageSelectedCount = selectableRows.filter(row =>
-        this.toggleRowSelection(r, isSelected)
+      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)
  }
  /**
   * toggleRowSelection和clearSelection管理elDataTable的selected数组
@@ -105,29 +133,26 @@ class StrategyPersistSelection extends StrategyAbstract {
    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]))
-    // 历史勾选的行已经不在当前页了，所以要将当前页的行数据和selected合并
+    this.elTable.clearSelection()
    const mergeData = _.uniqWith([...data, ...selected], _.isEqual)
-    mergeData.forEach(r => {
+    data.forEach(row => {
-      const isSelected = !!selected.find(r2 => r[id] === r2[id])
+      const shouldBeSelected = selectedIds.has(row[id])
      if (!this.elTable) return
-      if (!this.elTable) {
+      if (shouldBeSelected) {
-        return
+        this.elTable.toggleRowSelection(row, true)
      }
      this.elTable.toggleRowSelection(r, isSelected)
    })
  }
 }
--- a/src/components/Table/DataTable/index.vue
+++ b/src/components/Table/DataTable/index.vue
@@ -10,6 +10,7 @@
 </template>
 <script>
 import { newURL, ObjectLocalStorage } from '@/utils/common'
 import { default as ElDatableTable } from './compenents/el-data-table'
 import { mapGetters } from 'vuex'
@@ -27,7 +28,11 @@ 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,
@@ -70,7 +75,7 @@ export default {
        },
        pageCount: 5,
        paginationLayout: 'total, sizes, prev, pager, next',
-        paginationSize: JSON.parse(localStorage.getItem('paginationSize')) || 15,
+        paginationSize: objTableSize.get(pathName) || 15,
        paginationSizes: [15, 30, 50, 100],
        paginationBackground: true,
        transformQuery: query => {
@@ -107,7 +112,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)
@@ -157,13 +162,7 @@ export default {
      this.$emit('loaded')
    },
    handleSizeChange(val) {
-      localStorage.setItem('paginationSize', val)
+      this.objTableSize.set(this.pathName, 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
@@ -0,0 +1,83 @@
 <template>
  <Drawer
    :component="component"
    :component-listeners="listener"
    :size="drawerSize"
    :title="title"
    :visible.sync="iVisible"
    append-to-body
    class="form-drawer"
    destroy-on-close
    v-bind="props"
    @close="closeDrawer"
    v-on="$listeners"
  />
 </template>
 <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: {
    drawerSize() {
      const drawerWidth = localStorage.getItem('drawerWidth')
      if (drawerWidth && drawerWidth > 100 && drawerWidth < 2000) {
        return drawerWidth + 'px'
      }
      const width = window.innerWidth
      if (width >= 800) return '767px'
      return '90%'
    },
    iVisible: {
      get() {
        return this.visible
      },
      set(val) {
        this.$emit('update:visible', val)
      }
    }
  },
  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
@@ -0,0 +1,239 @@
 <template>
  <div>
    <ListTable
      ref="ListTable"
      :header-actions="iHeaderActions"
      :table-config="iTableConfig"
      v-bind="$attrs"
    />
    <PageDrawer
      :action="action"
      :class="[action]"
      :component="drawerComponent"
      :props="drawerProps"
      :title="drawerTitle"
      :visible.sync="drawerVisible"
      class="page-drawer"
    />
  </div>
 </template>
 <script>
 import ListTable from '../ListTable'
 import PageDrawer from './PageDrawer.vue'
 import { setUrlParam, toLowerCaseExcludeAbbr, toSentenceCase } from '@/utils/common'
 import { mapGetters } from 'vuex'
 const drawerType = [String, Function]
 export default {
  name: 'GenericListPage',
  components: {
    ListTable, PageDrawer
  },
  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 {
      title: '',
      action: '',
      visible: false,
      drawerVisible: false,
      drawerComponent: ''
    }
  },
  computed: {
    ...mapGetters(['inDrawer']),
    drawerTitle() {
      return this.getDefaultTitle()
    },
    iHeaderActions() {
      const actions = this.headerActions
      if (!actions.onCreate) {
        actions.onCreate = this.onCreate
      }
      return actions
    },
    iTableConfig() {
      const config = {
        ...this.tableConfig
      }
      const actionMap = {
        'columnsMeta.actions.formatterArgs.onUpdate': this.onUpdate,
        'columnsMeta.actions.formatterArgs.onClone': this.onClone,
        'columnsMeta.name.formatterArgs.drawer': true,
        'columnsMeta.name.formatterArgs.drawerComponent': this.detailDrawer
      }
      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)) {
        if (
          value.formatter && value.formatter.name === 'AmountFormatter' &&
          value.formatterArgs && !value.formatterArgs.drawer
        ) {
          value.formatterArgs.drawer = this.detailDrawer
        }
      }
      return config
    }
  },
  watch: {
    inDrawer(val) {
      if (!this.drawerVisible) {
        return
      }
      if (!val) {
        this.drawerVisible = false
        this.reloadTable()
      }
    }
  },
  methods: {
    getDefaultTitle() {
      let title = this.title
      let dispatchAction = ''
      if (!title && this.resource) {
        title = this.resource
      }
      if (!title) {
        title = this.$route.meta?.title
        title = title.replace('List', '').replace('列表', '')
        title = _.trimEnd(title, 's')
      }
      if (!title) {
        title = this.$t('NoTitle')
      }
      const action = this.action
      if (action === 'clone' || action === 'create') {
        dispatchAction = this.$t('Create')
      } else if (action === 'update') {
        dispatchAction = this.$t('Update')
      }
      title = dispatchAction + 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
      }
    },
    async showDrawer(action) {
      this.action = action
      if (action === 'create') {
        this.drawerComponent = this.createDrawer
      } else if (action === 'update') {
        this.drawerComponent = this.updateDrawer || this.createDrawer
      } else if (action === 'detail') {
        this.drawerComponent = this.detailDrawer
      } else if (action === 'clone') {
        this.drawerComponent = this.createDrawer || this.getDefaultDrawer('create')
      } else {
        this.drawerComponent = this.createDrawer
      }
      if (!this.drawerComponent) {
        this.drawerComponent = this.getDefaultDrawer(action)
      }
      if (this.getDrawerTitle) {
        const actionMeta = await this.$store.getters['common/drawerActionMeta']
        this.title = this.getDrawerTitle({ action, ...actionMeta })
      }
      this.drawerVisible = true
    },
    onCreate(meta) {
      if (!meta) {
        meta = {}
      }
      this.$store.dispatch('common/setDrawerActionMeta', {
        action: 'create', ...meta
      }).then(() => {
        this.showDrawer('create')
      })
    },
    reloadTable() {
      if (this.reloadOrderQuery) {
        this.iTableConfig.url = setUrlParam(this.iTableConfig.url, 'order', this.reloadOrderQuery)
      }
      this.$refs.ListTable.reloadTable()
    },
    onClone({ row, col }) {
      this.$store.dispatch('common/setDrawerActionMeta', {
        action: 'clone', row: row, col: col, id: row.id
      }).then(() => {
        this.showDrawer('clone')
      })
    },
    onUpdate({ row, col }) {
      this.$route.params.id = row.id
      this.$route.params.action = 'update'
      this.$store.dispatch('common/setDrawerActionMeta', {
        action: 'update', row: row, col: col, id: row.id
      }).then(() => {
        this.showDrawer('update')
      })
    }
  }
 }
 </script>
 <style lang="scss" scoped>
 </style>
--- a/src/components/Table/ListTable/TableAction/LeftSide.vue
+++ b/src/components/Table/ListTable/TableAction/LeftSide.vue
@@ -8,14 +8,16 @@
 </template>
 <script>
 import { cleanActions } from './utils'
 import { createSourceIdCache } from '@/api/common'
 import { getErrorResponseMsg } from '@/utils/common'
 import i18n from '@/i18n/i18n'
 import DataActions from '@/components/DataActions/index.vue'
 import { createSourceIdCache } from '@/api/common'
 import { cleanActions } from './utils'
 import { getErrorResponseMsg } from '@/utils/common'
 const defaultTrue = { type: [Boolean, Function, String], default: true }
 const defaultFalse = { type: [Boolean, Function, String], default: false }
 export default {
  name: 'LeftSide',
  components: {
@@ -31,6 +33,10 @@ export default {
        return this.$route.name?.replace('List', 'Create')
      }
    },
    beforeCreate: {
      type: Function,
      default: () => null
    },
    onCreate: {
      type: Function,
      default: null
@@ -75,6 +81,10 @@ export default {
      default: () => ([])
    },
    moreActionsTitle: {
      type: String,
      default: ''
    },
    moreActionsType: {
      type: String,
      default: null
    },
@@ -95,7 +105,7 @@ export default {
          title: this.$t('DeleteSelected'),
          name: 'actionDeleteSelected',
          has: this.hasBulkDelete,
-          icon: 'fa fa-trash-o',
+          icon: 'trash',
          can({ selectedRows }) {
            return selectedRows.length > 0 && vm.canBulkDelete
          },
@@ -128,7 +138,11 @@ export default {
          has: this.hasCreate && !this.moreCreates,
          can: this.canCreate,
          icon: 'plus',
-          callback: this.onCreate || this.handleCreate
+          callback: () => {
            this.beforeCreate()
            const callback = this.onCreate || this.handleCreate
            callback()
          }
        }
      ]
      if (this.moreCreates) {
@@ -140,7 +154,11 @@ export default {
          icon: 'plus',
          can: this.canCreate,
          dropdown: [],
-          callback: this.onCreate || this.handleCreate
+          callback: () => {
            this.beforeCreate()
            const callback = this.onCreate || this.handleCreate
            callback()
          }
        }
        const createCreateAction = Object.assign(defaultMoreCreate, this.moreCreates)
        defaultActions.push(createCreateAction)
@@ -181,7 +199,8 @@ export default {
      return {
        name: 'moreActions',
        title: this.moreActionsTitle || this.$t('MoreActions'),
-        dropdown: dropdown
+        dropdown: dropdown,
        type: this.moreActionsType
      }
    },
    hasSelectedRows() {
@@ -194,6 +213,7 @@ export default {
  methods: {
    handleCreate() {
      let route
      if (typeof this.createRoute === 'string') {
        route = { name: this.createRoute }
        route.name = this.createRoute
@@ -202,7 +222,9 @@ export default {
      } else if (typeof this.createRoute === 'object') {
        route = this.createRoute
      }
      this.$log.debug('handle create')
      if (this.createInNewPage) {
        const { href } = this.$router.resolve(route)
        window.open(href, '_blank')
@@ -248,3 +270,6 @@ export default {
  }
 }
 </script>
 <style lang="scss" scoped>
 </style>
--- a/src/components/Table/ListTable/TableAction/QuickFilter.vue
+++ b/src/components/Table/ListTable/TableAction/QuickFilter.vue
@@ -0,0 +1,303 @@
 <template>
  <div v-show="isExpand">
    <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 }}
                  <span v-if="option.hasCount">
                    (<span v-async="getCount(option)">-</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="getCount(item)"
              :title="item.title"
              @click="handleFilterClick(item)"
            />
          </span>
        </div>
      </div>
      <div class="expand-bar-wrap">
        <div class="expand-bar" @click="toggle">
          <i :class="isExpand ? 'expand': 'shrink' " class="fa fa-angle-double-up" />
          <span v-show="!isExpand"> 展开过滤器 </span>
        </div>
      </div>
    </div>
  </div>
 </template>
 <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: this.cleanFilters(),
      iSummary: this.cleanSummary(),
      filtered: {},
      activeFilters: []
    }
  },
  computed: {
    isExpand: {
      set(val) {
        this.$emit('update:expand', val)
      },
      get() {
        return this.expand
      }
    }
  },
  methods: {
    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,
          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
@@ -40,8 +40,8 @@ export default {
    handleExportClick: {
      type: Function,
      default: function({ selectedRows }) {
-        const { exportOptions, tableUrl } = this
+        // const { exportOptions, tableUrl } = this
-        const url = exportOptions?.url ? exportOptions.url : tableUrl
+        const url = this.iExportOptions.url
        this.dialogExportVisible = true
        this.$nextTick(() => {
          this.$eventBus.$emit('showExportDialog', { selectedRows, url, name: this.name })
@@ -98,11 +98,23 @@ 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',
@@ -155,10 +167,24 @@ export default {
      })
    },
    iExportOptions() {
-      return assignIfNot(this.exportOptions, { url: this.tableUrl })
+      /**
       *  原本是使用 assignIfNot 此函数内部使用 partialRight, 该函数
       *  只在目标对象的属性未定义时才从源对象复制属性，如果目标对象已经有值，则保留原值
       *  那如果首次点击的树节点，那么此时 url 就会被确定，后续点击的树节点，那么 url 就将不会携带节点信息
       *
       */
      // return assignIfNot(this.exportOptions, { url: this.tableUrl })
      return {
        ...this.exportOptions,
        url: this.tableUrl
      }
    }
  },
  methods: {
    handleFilterClick() {
      this.$emit('update:quick-filter-expand', !this.quickFilterExpand)
    },
    handleTagSearch(val) {
      this.searchTable(val)
    },
@@ -185,7 +211,6 @@ export default {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-left: 10px;
  height: 30px;
  line-height: 30px;
--- a/src/components/Table/ListTable/TableAction/index.vue
+++ b/src/components/Table/ListTable/TableAction/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="device" class="table-header clearfix">
+  <div :class="device" class="table-header clearfix container">
    <slot name="header">
      <LeftSide
        v-if="hasLeftActions"
@@ -10,6 +10,7 @@
        v-on="$listeners"
        @init-actions-done="handleActionsDone"
      />
      <RightSide
        v-if="hasRightActions"
        :selected-rows="selectedRows"
@@ -18,6 +19,7 @@
        v-bind="$attrs"
        v-on="$listeners"
      />
      <div :class="searchClass" class="search">
        <LabelSearch
          v-if="hasLabelSearch"
@@ -158,7 +160,7 @@ $headerHeight: 30px;
 .table-header {
  .left-side {
    display: block;
-    float: left;
+    //float: left;
    ::v-deep .action-item.el-dropdown > .el-button {
      height: 100%;
@@ -166,13 +168,14 @@ $headerHeight: 30px;
  }
  .right-side {
-    float: right;
+    //float: right;
    height: 30px;
  }
  .search {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    .right-side-item.action-search {
      border: 1px solid var(--color-border);
@@ -181,65 +184,60 @@ $headerHeight: 30px;
  }
  .search.left {
    float: left;
    padding: 0 !important;
    gap: 10px;
  }
  .search.right {
-    float: right;
+    display: flex;
    flex-wrap: wrap;
    padding-right: 10px;
  }
 }
 .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 0;
  &.mobile {
    justify-content: flex-start;
    .left-side {
      gap: 0;
    }
    .search {
      justify-content: flex-start;
      gap: 10px;
    }
  }
 }
 .left-side {
  order: 1;
 }
 .search {
  order: 2;
  flex-grow: 1; /* This allows it to grow and fill available space */
 }
 .right-side {
  order: 3;
 }
 /* When .left-side is not present, adjust the layout */
 .container:not(:has(.left-side)) .search {
  margin-right: auto; /* Pushes .search to the left */
  justify-content: flex-start;
 }
 .export-item {
  display: block;
  padding: 5px 20px;
 }
 .mobile .search {
  display: inherit;
 }
 .mobile .search .datepicker {
  margin-left: 0;
 }
 .mobile .search.right {
  clear: both;
  float: none;
  padding-top: 10px;
  .label-search {
    margin-right: 0;
    ::v-deep .el-button.label-button {
      border: 1px solid var(--color-border);
    }
    ::v-deep .label-cascader {
      display: block;
      width: 100%;
    }
  }
 }
 .mobile .search.right .action-search {
  display: inline-block;
  width: 100%;
  margin-top: 5px;
 }
 .mobile .right-side {
  padding-top: 3px;
 }
@media (max-width: 481px) {
  .mobile .right-side {
    float: left;
    margin-left: -15px;
  }
  .mobile .left-side {
    width: 100%;
  }
 }
 </style>
--- a/src/components/Table/ListTable/index.vue
+++ b/src/components/Table/ListTable/index.vue
@@ -1,8 +1,18 @@
 <template>
  <div>
    <QuickFilter
      :expand.sync="filterExpand"
      :filters="quickFilters"
      :summary="quickSummary"
      :table-url="tableUrl"
      @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"
@@ -31,11 +41,14 @@ 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 { getDayEnd, getDaysAgo } from '@/utils/time'
 import { ObjectLocalStorage } from '@/utils/common'
 export default {
  name: 'ListTable',
  components: {
    QuickFilter,
    AutoDataTable,
    TableAction,
    IBox
@@ -51,6 +64,14 @@ export default {
    headerActions: {
      type: Object,
      default: () => ({})
    },
    quickFilters: {
      type: Array,
      default: () => null
    },
    quickSummary: {
      type: Array,
      default: () => null
    }
  },
  data() {
@@ -79,13 +100,34 @@ export default {
      isDeactivated: false,
      extraQuery: extraQuery,
      actionInit: this.headerActions.has === false,
-      initQuery: {}
+      initQuery: {},
      tablePath: new URL(this.tableConfig.url || '', 'http://127.0.0.1').pathname,
      objStorage: new ObjectLocalStorage('filterExpand'),
      iFilterExpand: null
    }
  },
  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 组织下是否可以创建等
@@ -208,6 +250,28 @@ export default {
    })
  },
  methods: {
    handleFilterExpandChanged(expand) {
      this.filterExpand = expand
    },
    handleQuickFilter(option) {
      if (option.route) {
        this.$router.push(option.route)
        return
      }
      if (option.filter) {
        const filter = { ...option.filter }
        if (option.active) {
          for (const key in filter) {
            filter[key] = ''
          }
        }
        this.filter(option.filter)
        return
      }
      if (option.callback) {
        option.callback(option.active)
      }
    },
    handleActionInitialDone() {
      setTimeout(() => {
        this.actionInit = true
@@ -282,6 +346,12 @@ 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
@@ -0,0 +1,140 @@
 <template>
  <el-dropdown
    size="small"
    trigger="hover"
    :show-timeout="500"
    @command="handleCommand"
    @visible-change="visibleChange"
  >
    <el-button
      plain
      size="mini"
      type="primary"
      @click="handlePamConnect"
    >
      <i :class="IButtonIcon" />
    </el-button>
    <el-dropdown-menu slot="dropdown">
      <el-dropdown-item command="Title" disabled>
        {{ ITitleText }}
      </el-dropdown-item>
      <el-dropdown-item divided />
      <el-dropdown-item
        v-for="protocol in protocols"
        :key="protocol.id"
        :command="protocol.name"
      >
        {{ protocol.name }}
      </el-dropdown-item>
    </el-dropdown-menu>
  </el-dropdown>
 </template>
 <script>
 import BaseFormatter from './base.vue'
 export default {
  name: 'AccountConnectFormatter',
  extends: BaseFormatter,
  props: {
    buttonIcon: {
      type: String,
      default: 'fa fa-desktop'
    },
    titleText: {
      type: String,
      default: ''
    },
    url: {
      type: String,
      default: ''
    },
    connectUrlTemplate: {
      type: Function,
      default: () => {}
    }
  },
  data() {
    return {
      protocols: []
    }
  },
  computed: {
    IButtonIcon() {
      return this.buttonIcon
    },
    ITitleText() {
      return this.titleText || this.$t('SelectProtocol')
    }
  },
  methods: {
    handleCommand(protocol) {
      if (protocol === 'Title') return
      this.formatterArgs.setMapItem(this.row.id, protocol)
      this.handleWindowOpen(this.row, protocol)
    },
    visibleChange(visible) {
      if (visible) {
        this.getProtocols(this.row.asset.id)
      }
    },
    handleWindowOpen(row, protocol) {
      const url = this.formatterArgs.connectUrlTemplate(row) + `${protocol}`
      this.$nextTick(() => {
        window.open(url, '_blank')
      })
    },
    async handlePamConnect() {
      const protocolMap = this.$store.getters.protocolMap
      if (protocolMap.has(this.row.id)) {
        // 直连
        const protocol = protocolMap.get(this.row.id)
        this.handleWindowOpen(this.row, protocol)
      } else {
        try {
          const url = this.formatterArgs.url.replace('{id}', this.row.asset.id)
          const res = await this.$axios.get(url)
          if (res && res.protocols.length > 0) {
            const protocol = res.protocols[0]
            this.formatterArgs.setMapItem(this.row.id, protocol.name)
            this.handleWindowOpen(this.row, protocol.name)
          }
        } catch (e) {
          throw new Error(`Error getting protocols: ${e}`)
        }
      }
    },
    async getProtocols(assetId) {
      try {
        const url = this.formatterArgs.url.replace('{id}', assetId)
        const res = await this.$axios.get(url)
        if (res) this.protocols = res.protocols
      } catch (e) {
        throw new Error(`Error getting protocols: ${e}`)
      }
    }
  }
 }
 </script>
 <style scoped lang="scss">
 .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/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/ActionsGroup/index.vue'
 const defaultPerformDelete = function({ row, col }) {
  const id = row.id
@@ -33,6 +33,7 @@ const defaultUpdateCallback = function({ row, col }) {
  } else {
    route.name = updateRoute
  }
  this.$router.push(route)
 }
@@ -106,7 +107,7 @@ export default {
          onUpdate: defaultUpdateCallback,
          onDelete: defaultDeleteCallback,
          onClone: defaultCloneCallback,
-          extraActions: [] // format see defaultActions
+          extraActions: []
        }
      }
    }
@@ -135,7 +136,7 @@ export default {
      {
        name: 'clone',
        title: this.$t('Duplicate'),
-        type: 'info',
+        type: 'primary',
        has: colActions.hasClone,
        can: colActions.canClone,
        callback: colActions.onClone,
@@ -146,8 +147,8 @@ export default {
      colActions: colActions,
      defaultActions: defaultActions,
      extraActions: colActions.extraActions,
      moreActionsTitle: ''
      // moreActionsTitle: colActions.moreActionsTitle || null
      moreActionsTitle: ''
    }
  },
  computed: {
@@ -223,7 +224,7 @@ export default {
 }
 </script>
-<style scoped>
+<style scoped lang="scss">
 .table-actions {
  ::v-deep {
    .el-icon-arrow-down {
--- a/src/components/Table/TableFormatters/ChoicesFormatter.vue
+++ b/src/components/Table/TableFormatters/ChoicesFormatter.vue
@@ -12,8 +12,42 @@
 </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,
@@ -21,51 +55,22 @@ export default {
    formatterArgsDefault: {
      type: Object,
      default() {
-        return {
+        return { ...formatterArgsDefault }
          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() {
-      return this.formatterArgs.getKey(
+      const k = this.formatterArgs.getKey(
        { row: this.row, cellValue: this.cellValue }
      )
      return k
    },
    icon() {
      const icon = this.formatterArgs.getIcon(
--- a/src/components/Table/TableFormatters/CopyableFormatter.vue
+++ b/src/components/Table/TableFormatters/CopyableFormatter.vue
@@ -0,0 +1,68 @@
 <script>
 import BaseFormatter from './base.vue'
 import { copy } from '@/utils/common'
 export default {
  name: 'CopyableFormatter',
  extends: BaseFormatter,
  props: {
    formatterArgsDefault: {
      type: Object,
      default() {
        return {
          shadow: false,
          getText: ({ cellValue }) => cellValue,
          iconPosition: 'right'
        }
      }
    }
  },
  data() {
    return {
      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
    }
  },
  computed: {
    iCellValue() {
      if (this.formatterArgs.shadow) {
        return '*'.repeat(6)
      } else {
        return this.cellValue
      }
    },
    iconPosition() {
      return this.formatterArgs.iconPosition
    }
  },
  methods: {
    async copy() {
      const text = await this.formatterArgs.getText({ cellValue: this.cellValue, row: this.row })
      copy(text)
    }
  }
 }
 </script>
 <template>
  <span class="copyable">
    <span :style="{ order: 2 }">{{ iCellValue }}</span>
    <i :style="{ order: iconPosition === 'left' ? 0 : 3 } " class="el-icon-copy-document copy" @click="copy()" />
  </span>
 </template>
 <style lang="scss" scoped>
 .copyable {
  display: flex;
  align-items: center;
  gap: 4px; /* 元素间距 */
 }
 .copy {
  cursor: pointer;
  &:hover {
    color: var(--color-primary);
  }
 }
 </style>
--- a/src/components/Table/TableFormatters/DetailFormatter.vue
+++ b/src/components/Table/TableFormatters/DetailFormatter.vue
@@ -6,20 +6,30 @@
      :disabled="disabled"
      :type="col.type || 'info'"
      class="detail"
-      @click="goDetail"
+      @click="handleClick"
    >
      <slot>
        {{ iTitle }}
      </slot>
    </el-link>
    <Drawer
      v-if="formatterArgs.drawer && drawerVisible"
      :component="drawerComponent"
      :has-footer="false"
      :title="drawerTitle"
      :visible.sync="drawerVisible"
      class="detail-drawer"
    />
  </div>
 </template>
 <script>
 import BaseFormatter from './base.vue'
 import Drawer from '@/components/Drawer/index.vue'
 export default {
  name: 'DetailFormatter',
  components: { Drawer },
  extends: BaseFormatter,
  props: {
    formatterArgsDefault: {
@@ -27,14 +37,19 @@ export default {
      default() {
        return {
          route: this.$route.name.replace('List', 'Detail'),
          can: true,
          getRoute: null,
          routeQuery: null,
-          can: true,
+          drawer: false,
          onClick: null,
          openInNewPage: false,
          removeColorOnClick: false,
-          getTitle({ col, row, cellValue }) {
+          beforeClick: () => {
            return cellValue
          },
          getTitle({ row, cellValue }) {
            return cellValue != null ? cellValue : row.name
          },
          getDrawerTitle: null,
          getIcon({ col, row, cellValue }) {
            return null
          }
@@ -45,8 +60,13 @@ export default {
  data() {
    const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
    return {
      drawerTitle: '',
      linkClicked: false,
-      formatterArgs: formatterArgs
+      drawerComponent: '',
      showTableDetailDrawer: false,
      currentTemplate: null,
      formatterArgs: formatterArgs,
      drawerVisible: false
    }
  },
  computed: {
@@ -54,7 +74,8 @@ export default {
      return this.formatterArgs.getTitle({
        col: this.col,
        row: this.row,
-        cellValue: this.cellValue
+        cellValue: this.cellValue,
        index: this.index
      })
    },
    disabled() {
@@ -70,18 +91,101 @@ export default {
        row: this.row,
        cellValue: this.cellValue
      })
    },
    callbackArgs() {
      return {
        col: this.col,
        row: this.row,
        cellValue: this.cellValue
      }
    }
  },
  methods: {
    getResource() {
      const route = this.resolveRoute()
      if (!route) {
        return
      }
      const resource = route.meta.title || route.name
      return resource.replace(' details', '').replace('详情', '')
    },
    getDrawerTitle() {
      let drawerTitle = ''
      if (this.formatterArgs?.getTitle && typeof this.formatterArgs.getTitle === 'function') {
        drawerTitle = this.formatterArgs.getTitle({
          col: this.col,
          row: this.row,
          cellValue: this.cellValue
        })
      }
      let title = this.cellValue?.name || drawerTitle
      const resource = this.getResource()
      if (resource) {
        title = `${resource}: ${title}`
      }
      return title
    },
    resolveRoute() {
      const route = this.getDetailRoute()
      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]
      }
    },
    getRouteComponent() {
      const route = this.resolveRoute()
      if (route) {
        return route.components.default
      }
    },
    showDrawer() {
      if (this.formatterArgs.drawerComponent) {
        this.drawerComponent = this.formatterArgs.drawerComponent
      } else {
        this.drawerComponent = this.getRouteComponent()
      }
      const route = this.getDetailRoute()
      if (route?.query?.tab) {
        this.$cookie.set(route.name, route.query.tab, 1)
        this.$route.query.tab = route.query.tab
      }
      const payload = {
        action: 'detail',
        row: this.row,
        col: this.col,
        id: route.params.id || this.row.id
      }
      this.$store.dispatch('common/setDrawerActionMeta', payload).then(() => {
        this.drawerTitle = this.getDrawerTitle(payload)
        this.drawerVisible = true
      })
    },
    handleClick() {
      if (this.formatterArgs.beforeClick) {
        this.formatterArgs.beforeClick(this.callbackArgs)
      }
      if (this.formatterArgs.onClick) {
        this.formatterArgs.onClick(this.callbackArgs)
        return
      }
      if (this.formatterArgs.drawer) {
        this.showDrawer()
        return
      }
      this.goDetail()
    },
    getDetailRoute() {
      // const defaultRoute = this.$route.name.replace('List', 'Detail')
      let route = this.formatterArgs.route
      if (this.formatterArgs.getRoute && typeof this.formatterArgs.getRoute === 'function') {
-        route = this.formatterArgs.getRoute({
+        route = this.formatterArgs.getRoute(this.callbackArgs)
          row: this.row,
          col: this.col,
          cellValue: this.cellValue
        })
      }
      if (!route) {
        console.error('No route found')
@@ -89,7 +193,6 @@ export default {
      }
      let detailRoute = { replace: true }
      if (typeof route === 'string') {
        detailRoute.name = route
        detailRoute.params = { id: this.row.id }
@@ -107,18 +210,18 @@ export default {
      const detailRoute = this.getDetailRoute()
      if (this.formatterArgs.openInNewPage) {
        this.linkClicked = this.formatterArgs.removeColorOnClick
        const { href } = this.$router.resolve(detailRoute)
-        window.open(href, '_blank')
+        this.linkClicked = this.formatterArgs.removeColorOnClick
-      } else {
+        return window.open(href, '_blank')
        this.$router.push(detailRoute)
      }
      this.$router.push(detailRoute)
    }
  }
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .detail {
  display: inline-block;
  max-width: 100%;
@@ -142,4 +245,18 @@ export default {
  width: 28px;
  height: 28px;
 }
 ::v-deep .go-back {
  display: none;
 }
 .detail-drawer {
  ::v-deep {
    .el-drawer__header {
      border-bottom: none;
      padding-bottom: 1px;
    }
  }
 }
 </style>
--- a/src/components/Table/TableFormatters/DiscoverConfirmFormatter.vue
+++ b/src/components/Table/TableFormatters/DiscoverConfirmFormatter.vue
@@ -0,0 +1,172 @@
 <template>
  <span class="conform-td">
    <span v-if="iValue === statusMap.pending">
      <el-dropdown trigger="click" @command="handleRisk">
        <el-button class="confirm action" size="mini">
          <i class="fa fa-check" />
        </el-button>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-for="item of iActions" :key="item.name" :command="item.name">
            {{ item.label }}
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-tooltip :content="$tc('Ignore')" :open-delay="400">
        <el-button class="ignore action" size="mini">
          <svg-icon icon-class="ignore" @click="handleRisk('ignore')" />
        </el-button>
      </el-tooltip>
    </span>
    <el-tooltip v-else :content="iLabel" :open-delay="400" class="platform-status">
      <span v-if="iValue === statusMap.confirmed ">
        <i class="fa fa-check color-primary" />
      </span>
      <span v-else>
        <svg-icon icon-class="ignore" />
      </span>
    </el-tooltip>
    <ProcessingDialog :visible="processing" />
  </span>
 </template>
 <script>
 import BaseFormatter from './base.vue'
 import ProcessingDialog from '@/components/Dialog/ProcessingDialog.vue'
 const statusMap = {
  pending: '0',
  confirmed: '1',
  ignored: '2'
 }
 export default {
  name: 'ConfirmOrIgnoreFormatter',
  components: { ProcessingDialog },
  extends: BaseFormatter,
  props: {
    formatterArgsDefault: {
      type: Object,
      default() {
        return {
          confirm: ({ row, cellValue }) => {
          },
          ignore: ({ row, cellValue }) => {
          },
          remove: ({ row, cellValue }) => {
          },
          confirmIcon: 'fa fa-check'
        }
      }
    }
  },
  data() {
    return {
      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs),
      processing: false,
      statusMap: statusMap
    }
  },
  computed: {
    iValue() {
      if (this.cellValueIsLabelChoice()) {
        return this.cellValue.value
      } else {
        return this.cellValue
      }
    },
    iLabel() {
      if (this.cellValueIsLabelChoice()) {
        return this.cellValue.label
      } else {
        return this.cellValue
      }
    },
    iActions() {
      return this.getActions()
    }
  },
  methods: {
    handleRemove() {
      this.formatterArgs.remove({ row: this.row, cellValue: this.cellValue })
    },
    handleRisk(cmd) {
      const data = {
        asset: this.row.asset.id,
        username: this.row.username,
        action: cmd,
        risk: ''
      }
      this.processing = true
      this.$axios.post(`/api/v1/accounts/account-risks/handle/`, data).then(() => {
        if (cmd === 'add_account') {
          this.row.present = true
        }
        if (cmd === 'ignore') {
          this.row.status = { 'value': statusMap.ignored }
        }
        this.row.status = { 'value': statusMap.confirmed }
      }).finally(() => {
        setTimeout(() => {
          this.processing = false
        }, 500)
      })
    },
    getActions() {
      const actions = [
        // {
        //   name: 'disable_account',
        //   label: this.$t('Disable remote account'),
        //   has: this.row.remote_present
        // },
        {
          name: 'delete_remote',
          label: this.$t('Delete remote account'),
          has: this.row.remote_present
        },
        {
          name: 'add_account',
          label: this.$t('Add account'),
          has: !this.row.present
        },
        {
          name: 'change_password_add',
          label: this.$t('Add account after changing password'),
          has: !this.row.present
        }
      ]
      return actions.filter(action => {
        return action.has
      })
    }
  }
 }
 </script>
 <style lang='scss' scoped>
 .action.el-button--mini {
  cursor: pointer;
  padding: 1px 4px;
  &.confirm {
    ::v-deep i {
      color: var(--color-primary);
    }
  }
  &.remove {
    ::v-deep i {
      color: var(--color-danger);
    }
  }
  &.ignore {
    ::v-deep svg.svg-icon {
    }
  }
 }
 .action.ignore {
  margin-left: 2px;
 }
 </style>
--- a/src/components/Table/TableFormatters/PlatformFormatter.vue
+++ b/src/components/Table/TableFormatters/PlatformFormatter.vue
@@ -0,0 +1,60 @@
 <template>
  <span class="platform-td">
    <span class="icon-zone">
      <img :src="icon" alt="icon" class="asset-icon">
    </span>
    <span class="platform-name">{{ value.name }}</span>
  </span>
 </template>
 <script>
 import BaseFormatter from './base.vue'
 import { loadPlatformIcon } from '@/utils/jms'
 export default {
  name: 'PlatformFormatter',
  extends: BaseFormatter,
  props: {
    formatterArgsDefault: {
      type: Object,
      default() {
        return {
          platformAttr: ''
        }
      }
    }
  },
  data() {
    return {
      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
    }
  },
  computed: {
    icon() {
      return loadPlatformIcon(this.value.name, this.value.type)
    },
    value() {
      if (!this.formatterArgs.platformAttr) {
        return this.cellValue
      } else {
        return _.get(this.row, this.formatterArgs.platformAttr)
      }
    }
  },
  methods: {}
 }
 </script>
 <style scoped>
 .icon-zone {
  display: inline-block;
  width: 1.5em;
 }
 .asset-icon {
  height: 1.5em;
  vertical-align: -0.2em;
  fill: currentColor;
 }
 </style>
--- a/src/components/Table/TableFormatters/SecretViewerFormatter.vue
+++ b/src/components/Table/TableFormatters/SecretViewerFormatter.vue
@@ -1,8 +1,24 @@
 <template>
  <div class="content">
    <span :class="formatterArgs.actionLeft ? 'left' : 'right'" class="action">
      <template v-for="(item, index) in iActions">
        <el-tooltip
          v-if="item.has"
          :key="index"
          :content="item.tooltip"
          :open-delay="500"
          effect="dark"
          placement="top"
        >
          <i :class="[item.class, item.icon]" class="fa" @click="item.action()" />
        </el-tooltip>
      </template>
    </span>
    <el-tooltip
      v-if="!isEdit"
      :content="currentValue"
      :disabled="!isShow"
      :open-delay="500"
      placement="top"
    >
      <pre class="text" style="cursor: pointer">{{ currentValue }}</pre>
@@ -16,21 +32,6 @@
      size="small"
      @blur="onEditBlur"
    />
    <span v-if="realValue" class="action">
      <template v-for="(item, index) in iActions">
        <el-tooltip
          v-if="item.has"
          :key="index"
          :content="item.tooltip"
          effect="dark"
          open-delay="500"
          placement="top"
        >
          <i :class="[item.class, item.icon]" class="fa" @click="item.action()" />
        </el-tooltip>
      </template>
    </span>
  </div>
 </template>
@@ -39,7 +40,7 @@ import { copy, downloadText } from '@/utils/common'
 import BaseFormatter from '@/components/Table/TableFormatters/base.vue'
 export default {
-  name: 'ShowKeyCopyFormatter',
+  name: 'SecretViewerFormatter',
  extends: BaseFormatter,
  props: {
    formatterArgsDefault: {
@@ -51,7 +52,9 @@ export default {
          hasDownload: true,
          hasCopy: true,
          hasEdit: true,
-          defaultShow: false
+          defaultShow: false,
          secretFrom: 'cellValue', // fromCellValue or api,
          actionLeft: false
        }
      }
    }
@@ -61,7 +64,8 @@ export default {
      isEdit: false,
      realValue: this.cellValue,
      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs || {}),
-      isShow: false
+      isShow: false,
      getIt: false
    }
  },
  computed: {
@@ -107,6 +111,9 @@ export default {
          tooltip: this.$t('Copy')
        }
      ]
      if (this.formatterArgs.actionLeft) {
        actions.reverse()
      }
      return actions
    },
    currentValue() {
@@ -117,20 +124,45 @@ export default {
      }
    }
  },
  watch: {
    cellValue: {
      handler: function(val) {
        this.realValue = val
      },
      immediate: true
    }
  },
  mounted() {
    this.isShow = this.formatterArgs.defaultShow
    if (this.formatterArgs.secretFrom !== 'cellValue') {
      this.realValue = '--'
    }
  },
  methods: {
-    onShow() {
+    async getAccountSecret() {
-      this.isShow = !this.isShow
+      if (this.formatterArgs.secretFrom === 'cellValue' || this.getIt) {
        return
      }
      const res = await this.$axios.get(`/api/v1/accounts/account-secrets/${this.row.id}/`)
      this.realValue = res.secret
    },
-    onCopy() {
+    async onShow() {
      await this.getAccountSecret()
      this.isShow = !this.isShow
      setTimeout(() => {
        this.isShow = false
      }, 10000)
    },
    async onCopy() {
      await this.getAccountSecret()
      copy(this.realValue)
    },
-    onDownload() {
+    async onDownload() {
      await this.getAccountSecret()
      downloadText(this.realValue, this.name + '.txt')
    },
-    onEdit() {
+    async onEdit() {
      await this.getAccountSecret()
      this.isEdit = !this.isEdit
      if (this.isEdit) {
        this.$nextTick(() => {
@@ -146,7 +178,7 @@ export default {
 </script>
 <style lang="scss" scoped>
  .content {
-    display: flex;
+    display: inline-block;
    width: 100%;
    overflow: hidden;
    //white-space: nowrap;
@@ -155,6 +187,7 @@ export default {
    .text {
      flex: 1;
      display: inline;
      margin: 0;
      padding: 0;
      overflow: hidden;
@@ -163,13 +196,17 @@ export default {
    }
    .action {
-      float: right;
+      font-size: 13px;
      font-size: 15px;
      cursor: pointer;
-      margin-left: 5px;
+      margin-left: 1px;
      display: inline;
      &.right {
        float: right;
      }
      .fa {
-        margin-right: 10px;
+        margin-right: 5px;
        &:hover {
          color: var(--color-primary);
--- a/src/components/Table/TableFormatters/TaskStatusFormatter.vue
+++ b/src/components/Table/TableFormatters/TaskStatusFormatter.vue
@@ -0,0 +1,58 @@
 <template>
  <ChoicesFormatter :formatter-args-default="iFormatterArgsDefault" v-bind="$props" />
 </template>
 <script>
 import ChoicesFormatter from './ChoicesFormatter.vue'
 export default {
  name: 'TaskStatusFormatter',
  components: {
    ChoicesFormatter
  },
  extends: ChoicesFormatter,
  props: {
    formatterArgsDefault: {
      type: Object,
      default() {
        return {
          faChoices: {
            ready: 'fa-clock-o',
            pending: 'fa-clock-o',
            running: 'fa-spinner',
            success: 'fa-check-circle',
            failed: 'fa-times-circle',
            error: 'fa-exclamation-circle',
            canceled: 'fa-ban'
          },
          classChoices: {
            success: 'text-primary',
            failed: 'text-danger',
            error: 'text-danger'
          },
          textChoices: {
            ready: this.$t('Ready'),
            pending: this.$t('Pending'),
            running: this.$t('Running'),
            success: this.$t('Success'),
            failed: this.$t('Failed'),
            error: this.$t('Error'),
            canceled: this.$t('Canceled')
          }
        }
      }
    }
  },
  data() {
    return {
      iFormatterArgsDefault: Object.assign({}, ChoicesFormatter.formatterArgsDefault, this.formatterArgsDefault)
    }
  },
  mounted() {
  }
 }
 </script>
 <style scoped>
 </style>
--- a/src/components/Table/TableFormatters/base.vue
+++ b/src/components/Table/TableFormatters/base.vue
@@ -47,6 +47,11 @@ export default {
    return {
      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
    }
  },
  methods: {
    cellValueIsLabelChoice() {
      return typeof this.cellValue === 'object' && this.cellValue['value'] !== undefined
    }
  }
 }
 </script>
--- a/src/components/Table/TableFormatters/index.js
+++ b/src/components/Table/TableFormatters/index.js
@@ -6,9 +6,10 @@ import ActionsFormatter from './ActionsFormatter.vue'
 import DeleteActionFormatter from './DeleteActionFormatter.vue'
 import DateFormatter from './DateFormatter.vue'
 import AccountShowFormatter from './GrantedAccountShowFormatter.vue'
-import ShowKeyCopyFormatter from './ShowKeyCopyFormatter.vue'
+import SecretViewerFormatter from './SecretViewerFormatter.vue'
 import DialogDetailFormatter from './DialogDetailFormatter.vue'
 import EditableInputFormatter from './EditableInputFormatter.vue'
 import CopyableFormatter from './CopyableFormatter.vue'
 import StatusFormatter from './StatusFormatter.vue'
 import TagsFormatter from './TagsFormatter.vue'
 import LabelsFormatter from './LabelsFormatter.vue'
@@ -18,6 +19,9 @@ import ProtocolsFormatter from './ProtocolsFormatter.vue'
 import TagChoicesFormatter from './TagChoicesFormatter.vue'
 import SwitchFormatter from './SwitchFormatter.vue'
 import AccountInfoFormatter from './AccountInfoFormatter.vue'
 import PlatformFormatter from './PlatformFormatter.vue'
 import DiscoverConfirmFormatter from './DiscoverConfirmFormatter.vue'
 import AccountConnectFormatter from './AccountConnectFormatter.vue'
 export default {
  DetailFormatter,
@@ -27,7 +31,7 @@ export default {
  DeleteActionFormatter,
  DateFormatter,
  AccountShowFormatter,
-  ShowKeyCopyFormatter,
+  SecretViewerFormatter,
  DialogDetailFormatter,
  ArrayFormatter,
  EditableInputFormatter,
@@ -39,7 +43,11 @@ export default {
  TagChoicesFormatter,
  LabelsFormatter,
  SwitchFormatter,
-  AccountInfoFormatter
+  PlatformFormatter,
  AccountInfoFormatter,
  CopyableFormatter,
  DiscoverConfirmFormatter,
  AccountConnectFormatter
 }
 export {
@@ -50,17 +58,21 @@ export {
  DeleteActionFormatter,
  DateFormatter,
  AccountShowFormatter,
-  ShowKeyCopyFormatter,
+  SecretViewerFormatter,
  DialogDetailFormatter,
  ArrayFormatter,
  EditableInputFormatter,
  StatusFormatter,
  TagsFormatter,
  CopyableFormatter,
  ObjectRelatedFormatter,
  TwoTabFormatter,
  ProtocolsFormatter,
  TagChoicesFormatter,
  LabelsFormatter,
  SwitchFormatter,
-  AccountInfoFormatter
+  PlatformFormatter,
  DiscoverConfirmFormatter,
  AccountInfoFormatter,
  AccountConnectFormatter
 }
--- a/src/components/Table/TagSearch/index.vue
+++ b/src/components/Table/TagSearch/index.vue
@@ -17,7 +17,7 @@
      size="small"
      type="info"
      @click="handleTagClick(v,k)"
-      @close="handleTagClose(k)"
+      @close.stop="handleTagClose(k)"
    >
      <strong v-if="v.label">{{ v.label + ':' }}</strong>
      <span v-if="v.valueLabel">{{ v.valueLabel }}</span>
@@ -128,7 +128,7 @@ export default {
      deep: true
    },
    filterTags: {
-      handler() {
+      handler(newValue) {
        this.$emit('tag-search', this.filterMaps)
      },
      deep: true
@@ -137,6 +137,15 @@ export default {
      if (newValue === '' && oldValue !== '') {
        this.emptyCount = 1
      }
    },
    '$route'(to, from) {
      if (from.query !== to.query) {
        this.filterTags = {}
        if (to.query && Object.keys(to.query).length) {
          const routeFilter = this.checkInTableColumns(this.options)
          this.filterTagSearch(routeFilter)
        }
      }
    }
  },
  mounted() {
--- a/src/components/Table/TreeTable/index.vue
+++ b/src/components/Table/TreeTable/index.vue
@@ -43,6 +43,8 @@
              :key="componentKey"
              ref="ListTable"
              :header-actions="headerActions"
              :quick-filters="quickFilters"
              :quick-summary="quickSummary"
              :table-config="iTableConfig"
              v-on="$listeners"
            />
@@ -56,7 +58,7 @@
 <script>
 import Dialog from '@/components/Dialog/index.vue'
 import { setUrlParam } from '@/utils/common'
-import ListTable from '@/components/Table/ListTable/index.vue'
+import ListTable from '@/components/Table/DrawerListTable/index.vue'
 import FileTree from '@/components/Table/TreeTable/components/FileTree.vue'
 import IBox from '../../IBox/index.vue'
 import TabTree from '../TabTree/index.vue'
@@ -94,6 +96,18 @@ export default {
    treeWidth: {
      type: String,
      default: () => '23.6%'
    },
    quickFilters: {
      type: Array,
      default: null
    },
    quickSummary: {
      type: Array,
      default: null
    },
    headerActions: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
@@ -243,7 +257,7 @@ $origin-color: #ffffff;
  text-align: center;
  padding: 5px 0;
  border: 1px solid #DCDFE6;
-  background-color: #fff;
+  background-color: #f3f3f3;
  border-radius: 2px;
  cursor: pointer;
  height: 30px;
--- a/src/components/Tree/AutoDataZTree/index.vue
+++ b/src/components/Tree/AutoDataZTree/index.vue
@@ -1,15 +1,22 @@
 <template>
  <DataZTree ref="dataztree" :setting="treeSetting" class="data-z-tree" v-on="$listeners">
-    <slot v-if="treeSetting.hasRightMenu" slot="rMenu">
+    <slot slot="rMenu">
-      <li v-if="treeSetting.showCreate" id="m_create" class="rmenu" tabindex="-1" @click="createTreeNode">
+      <div v-if="menu && menu.length > 0">
-        <i class="fa fa-plus-square-o" /> {{ this.$t('CreateNode') }}
+        <span v-for="item in menu" :key="item.id">
-      </li>
+          <li
-      <li v-if="treeSetting.showUpdate" id="m_edit" class="rmenu" tabindex="-1" @click="editTreeNode">
+            v-if="hasMenuItem(item)"
-        <i class="fa fa-pencil-square-o" /> {{ this.$t('RenameNode') }}
+            :id="item.id"
-      </li>
+            :key="item.id"
-      <li v-if="treeSetting.showDelete" id="m_del" class="rmenu" tabindex="-1" @click="removeTreeNode">
+            :class="{ 'disabled': checkDisabled(item) }"
-        <i class="fa fa-minus-square" /> {{ this.$t('DeleteNode') }}
+            class="rmenu"
-      </li>
+            tabindex="-1"
            @click="onMenuItemClick(item)"
          >
            <Icon :icon="item.icon" class="icon" /> {{ item.name }}
          </li>
          <li v-if="item.divided" class="divider" />
        </span>
      </div>
      <slot name="rMenu" />
    </slot>
  </DataZTree>
@@ -17,13 +24,15 @@
 <script>
 import DataZTree from '../DataZTree/index.vue'
 import Icon from '@/components/Widgets/Icon'
 import $ from '@/utils/jquery-vendor'
 import { mapGetters } from 'vuex'
 export default {
  name: 'AutoDataZTree',
  components: {
-    DataZTree
+    DataZTree,
    Icon
  },
  props: {
    setting: {
@@ -34,7 +43,32 @@ export default {
  },
  data() {
    return {
      defaultMenu: [
        {
          id: 'm_create',
          name: this.$t('CreateNode'),
          icon: 'fa-plus-square-o',
          callback: this.createTreeNode,
          has: () => this.setting.showCreate
        },
        {
          id: 'm_edit',
          name: this.$t('RenameNode'),
          icon: 'fa-pencil-square-o',
          callback: this.editTreeNode,
          has: () => this.setting.showUpdate
        },
        {
          id: 'm_del',
          name: this.$t('DeleteNode'),
          icon: 'fa-minus-square',
          callback: this.removeTreeNode,
          has: () => this.setting.showDelete
        }
      ],
      defaultSetting: {
        showDefaultMenu: true,
        showMenu: false,
        showCreate: true,
        showDelete: true,
        showUpdate: true,
@@ -80,12 +114,49 @@ export default {
    },
    rMenu() {
      return this.$refs.dataztree.rMenu
    },
    menu() {
      let menu = []
      if (this.setting.showDefaultMenu) {
        menu = menu.concat(this.defaultMenu)
      }
      if (this.setting.menu && this.setting.menu.length > 0) {
        menu = menu.concat(this.setting.menu)
      }
      return menu
    }
  },
  beforeDestroy() {
    $('body').unbind('mousedown')
  },
  methods: {
    checkDisabled(item) {
      let disabled = item.disabled
      if (typeof disabled === 'function') {
        disabled = disabled(this.currentNode)
      }
      if (typeof disabled === 'undefined') {
        disabled = false
      }
      return disabled
    },
    hasMenu(node) {
      return false
    },
    hasMenuItem(item) {
      let has = item.has
      if (typeof has === 'function') {
        has = has(this.currentNode)
      }
      if (typeof has === 'undefined') {
        has = true
      }
      return has
    },
    onMenuItemClick(item) {
      item.callback(this.currentNode)
      this.hideRMenu()
    },
    onAsyncSuccess(event, treeId, treeNode, msg) {
      const nodes = JSON.parse(msg)
      nodes.forEach((node) => {
@@ -115,7 +186,7 @@ export default {
      if (this.rMenu) this.rMenu.css({ 'visibility': 'hidden' })
      $('body').unbind('mousedown', this.onBodyMouseDown)
    },
-    // Request URL: http://localhost/api/v1/assets/assets/?node_id=d8212328-538d-41a6-bcfd-1e8cc7e3aed4&show_current_asset=null&draw=2&limit=15&offset=0&_=1587022917769
+    // Request URL: http://localhost/api/v1/assets/assets/?node_id=ID&show_current_asset=null&draw=2&limit=15&offset=0&_=1587022917769
    onSelected: function(event, treeNode) {
      const show_current_asset = this.$cookie.get('show_current_asset') || '0'
      if (!this.setting.url) {
@@ -191,6 +262,8 @@ export default {
      const offset = $(`#${zTreeID}`).offset()
      const scrollTop = document.querySelector('.treebox')?.scrollTop
      x -= offset.left
      x = x < 0 ? 0 : x
      // Tmp
      y -= (offset.top + scrollTop) / 3 - 10
      x += document.body.scrollLeft
@@ -199,15 +272,25 @@ export default {
      if (y + $(`#${rMenuID} ul`).height() >= window.innerHeight) {
        y -= $(`#${rMenuID} ul`).height()
      }
      y = y < 0 ? 0 : y
      this.rMenu.css({ 'top': y + 'px', 'left': x + 'px', 'visibility': 'visible' })
      $(`#${rMenuID} ul`).show()
      $('body').bind('mousedown', this.onBodyMouseDown)
    },
    onRightClick: function(event, treeId, treeNode) {
-      if (!this.setting.showMenu) {
+      let showMenu = this.setting.showMenu
      if (typeof showMenu === 'function') {
        showMenu = showMenu(treeNode)
      }
      if (!showMenu) {
        return
      }
      if (!treeNode) {
        return
      }
      this.currentNode = treeNode
      this.currentNodeId = treeNode.meta.data.id
      // 屏蔽收藏资产
      if (treeNode?.id === '-12') {
        return
@@ -321,9 +404,14 @@ export default {
  background-color: #f5f7fa;
 }
 .icon {
  width: 15px;
  display: inline-block;
 }
 .data-z-tree {
  ::v-deep {
-    .fa {
+    .icon {
      width: 10px;
      margin-right: 3px;
    }
--- a/Show More
+++ b/Show More