perf: streamline onUpdate actions in PlayBook and Adhoc components

perf: update execution
perf: merge with remote
2025-11-07 18:08:50 +00:00 · 2025-02-21 14:20:59 +08:00 · 2025-02-20 18:43:22 +08:00 · 2025-02-20 18:41:15 +08:00 · 2025-02-20 18:40:16 +08:00 · 2025-02-20 14:41:50 +08:00
384 changed files with 14064 additions and 3880 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -17,3 +17,5 @@ tests/**/coverage/
 *.sln
 .env.development
 .python-version
+
+helper.json
--- a/Support/Code/User/settings.json
+++ b/Support/Code/User/settings.json
@@ -0,0 +1,10 @@
+{
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[vue]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  },
+  "prettier.printWidth": 100,
+  "prettier.singleAttributePerLine": true,
+  "editor.wordWrap": "on"
+}
--- 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.13.2",
    "strip-ansi": "^7.1.0",
    "svg-sprite-loader": "4.1.3",
-    "svgo": "1.2.2",
+    "svgo": "1.2.4",
    "vue-i18n-extract": "^1.1.1",
    "vue-template-compiler": "2.6.10"
  },
--- 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 http-equiv="Expires" content="0">
-    <meta http-equiv="Pragma" content="no-cache">
-    <meta http-equiv="Cache-control" content="no-cache">
-    <meta http-equiv="Cache" content="no-cache">
-    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
+    <meta content="IE=edge,chrome=1" http-equiv="X-UA-Compatible">
+    <meta content="0" http-equiv="Expires">
+    <meta content="no-cache" http-equiv="Pragma">
+    <meta content="no-cache" http-equiv="Cache-control">
+    <meta content="no-cache" http-equiv="Cache">
+    <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() {
-        if (location.pathname === '/') {
-           location.pathname = '/ui/'
-        }
-        const pathname = window.location.pathname
-        if (pathname.startsWith('/core')) {
-            return
-        }
-        if(pathname.indexOf('/ui') === -1) {
-          window.location.href = window.location.origin + '/ui/#' + pathname
-        }
-        if (pathname.startsWith('/ui/#/chat')) {
-          window.location.href = window.location.origin + pathname
-        }
+      window.onload = function () {
+          if (location.pathname === '/') {
+              location.pathname = '/ui/'
+          }
+          const pathname = window.location.pathname
+          if (pathname.startsWith('/core')) {
+              return
+          }
+          if (pathname.indexOf('/ui') === -1) {
+              window.location.href = window.location.origin + '/ui/#' + pathname
+          }
+          if (pathname.startsWith('/ui/#/chat')) {
+              window.location.href = window.location.origin + pathname
+          }
      }
    </script>
-    <div id="app"></div>
+    <div id="app">
+    </div>
+    <div id="loading">
+      <div class="spinner"></div>
+    </div>
    <!-- built files will be auto injected -->
  </body>
 </html>
--- 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: () => {
-        return vm.addTemplate
+      el: {
+        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'), ['assets', 'name', 'username', 'privileged', 'su_from', 'su_from_username']],
+        [this.$t('Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username', 'template']],
+        [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()
@@ -157,16 +169,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>
-  <Dialog
-    v-if="iVisible"
-    :close-on-click-modal="false"
-    :destroy-on-close="true"
-    :show-cancel="false"
-    :show-confirm="false"
+<template v-if="iVisible">
+  <Drawer
    :title="title"
-    :visible.sync="iVisible"
-    v-bind="$attrs"
-    width="900px"
-    v-on="$listeners"
+    :visible="iVisible"
+    class="drawer"
+    @close-drawer="handleCloseDrawer"
  >
-    <AccountCreateUpdateForm
-      v-if="!loading"
-      ref="form"
-      :account="account"
-      :add-template="addTemplate"
-      :asset="asset"
-      @add="addAccount"
-      @edit="editAccount"
-    />
-  </Dialog>
+    <Page :title="'null'">
+      <IBox class="content">
+        <AccountCreateUpdateForm
+          v-if="!loading"
+          ref="form"
+          :account="account"
+          :add-template="addTemplate"
+          :asset="asset"
+          @add="addAccount"
+          @edit="editAccount"
+        />
+      </IBox>
+    </Page>
+  </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(() => {
-        this.iVisible = false
-        this.$emit('add', true)
-        this.$message.success(this.$tc('UpdateSuccessMsg'))
-      }).catch(error => this.setFieldError(error))
+      const flag = this.$route.query.flag
+
+      switch (flag) {
+        case 'copy':
+          this.handleAccountOperation(this.account.id, 'copy-to-assets', data)
+          break
+        case 'move':
+          this.handleAccountOperation(this.account.id, 'move-to-assets', data)
+          break
+        default:
+          this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, data).then(() => {
+            this.iVisible = false
+            this.$emit('add', true)
+            this.$message.success(this.$tc('UpdateSuccessMsg'))
+          }).catch(error => this.setFieldError(error))
+      }
    },
    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 { ActionsFormatter } from '@/components/Table/TableFormatters'
+import { accountOtherActions, accountQuickFilters, connectivityMeta } from './const'
+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) {
-              const to = {
-                name: 'AssetAccountDetail',
-                params: { id: row.id }
+            formatterArgs: {
+              can: () => vm.$hasPerm('accounts.view_account'),
+              getDrawerTitle({ row }) {
+                return `${row.username}@${row.asset.name}`
              }
-              if (vm.$hasPerm('accounts.view_account')) {
-                return <router-link to={to}>{row.name}</router-link>
-              } else {
-                return <span>{row.name}</span>
+            }
+          },
+          secret: {
+            formatter: SecretViewerFormatter,
+            width: '130px',
+            formatterArgs: {
+              secretFrom: 'api',
+              hasDownload: false,
+              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 = {
-                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>
-              }
+              return row.asset.name
            }
          },
          username: {
@@ -216,75 +249,11 @@ export default {
            formatter: ActionsFormatter,
            formatterArgs: {
              hasUpdate: false, // can set function(row, value)
-              hasDelete: false, // can set function(row, value)
-              hasClone: this.hasClone,
+              hasDelete: true, // can set function(row, value)
+              hasClone: false,
+              canDelete: () => vm.$hasPerm('accounts.delete_account'),
              moreActionsTitle: this.$t('More'),
-              extraActions: [
-                {
-                  name: 'View',
-                  title: this.$t('View'),
-                  can: this.$hasPerm('accounts.view_accountsecret'),
-                  type: 'primary',
-                  callback: ({ row }) => {
-                    // debugger
-                    vm.secretUrl = `/api/v1/accounts/account-secrets/${row.id}/`
-                    vm.account = row
-                    vm.showViewSecretDialog = false
-                    setTimeout(() => {
-                      vm.showViewSecretDialog = true
-                    })
-                  }
-                },
-                {
-                  name: 'Update',
-                  title: this.$t('Edit'),
-                  can: this.$hasPerm('accounts.change_account') && !this.$store.getters.currentOrgIsRoot,
-                  callback: ({ row }) => {
-                    const data = {
-                      ...this.asset,
-                      ...row.asset
-                    }
-                    vm.account = row
-                    vm.iAsset = data
-                    vm.showAddDialog = false
-                    vm.accountCreateUpdateTitle = this.$t('UpdateAccount')
-                    setTimeout(() => {
-                      vm.showAddDialog = true
-                    })
-                  }
-                },
-                {
-                  name: 'Test',
-                  title: this.$t('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'))
-                    })
-                  }
-                }
-              ]
+              extraActions: accountOtherActions(this)
            }
          },
          ...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 &&
-                  !this.$store.getters.currentOrgIsRoot
+                ['clickhouse', 'redis', 'website', 'chatgpt'].indexOf(selectedRows[0].asset.type.value) === -1 &&
+                !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.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'))
-                })
-              }
-            })
-          }
-        }
-      )
-    }
+    this.setActions()
  },
  activated() {
    // 由于组件嵌套较深，有可能导致 Error in activated hook: "TypeError: Cannot read properties of undefined (reading 'getList')" 的问题
-    setTimeout(() => {
-      this.refresh()
-    }, 300)
+    if (this.tabDeactivated) {
+      setTimeout(() => this.refresh(), 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"
-    width="50"
-    @cancel="handleCancel()"
-    @confirm="handleConfirm()"
+    :visible.sync="iVisible"
+    width="800px"
    v-on="$listeners"
  >
-    <el-form label-position="right" label-width="90px">
-      <el-form-item :label="$tc('Name')">
-        <el-input v-model="account['asset_name']" readonly />
-      </el-form-item>
-      <el-form-item :label="$tc('Username')">
-        <el-input v-model="account['username']" readonly />
-      </el-form-item>
-      <el-form-item :label="$tc('Password')">
-        <UpdateToken v-model="authInfo.password" />
-      </el-form-item>
-      <el-form-item :label="$tc('SSHSecretKey')">
-        <UploadKey @input="getFile" />
-      </el-form-item>
-      <el-form-item :label="$tc('Passphrase')">
-        <UpdateToken v-model="authInfo.passphrase" />
-      </el-form-item>
-    </el-form>
+    <AutoDataForm
+      :fields="fields"
+      :fields-meta="fieldsMeta"
+      :form="init"
+      :has-reset="false"
+      :has-save-continue="false"
+      :url="''"
+      method="patch"
+      @submit="handleConfirm"
+    />
  </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,
-    UploadKey,
-    UpdateToken
+    AutoDataForm,
+    Dialog
  },
  props: {
    account: {
@@ -51,49 +43,59 @@ export default {
    }
  },
  data() {
+    const accountMeta = accountFieldsMeta(this)
    return {
-      secretInfo: {
-        password: '',
-        private_key: '',
-        passphrase: ''
+      fields: [
+        'name', 'secret_type', 'password', 'ssh_key', 'token',
+        'access_key', 'passphrase', 'api_key'
+      ],
+      fieldsMeta: {
+        ...accountMeta,
+        name: {
+          ...accountMeta.name,
+          readonly: true
+        },
+        secret_type: {
+          hidden: () => true
+        }
+      },
+      init: {
+        ...this.account
+      }
+    }
+  },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
      }
    }
  },
  methods: {
-    handleConfirm() {
-      const data = {}
-      if (this.secretInfo.password !== '') {
-        data.password = encryptPassword(this.secretInfo.password)
-      }
-      if (this.secretInfo.private_key !== '') {
-        data.private_key = encryptPassword(this.secretInfo.private_key)
-        if (this.secretInfo.passphrase) data.passphrase = this.secretInfo.passphrase
+    handleConfirm(form) {
+      const secretType = this.account.secret_type.value
+      const data = {
+        secret: encryptPassword(form[secretType])
      }
      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.$emit('update:visible', false)
+        this.iVisible = 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,276 @@ 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(() => {
+        console.log('Update secret')
+        vm.showUpdateSecretDialog = true
+      })
+    }
+  },
+  {
+    name: 'Clone',
+    title: vm.$t('Duplicate'),
+    can: vm.$hasPerm('accounts.add_account') && !vm.$store.getters.currentOrgIsRoot,
+    callback: ({ row }) => {
+      const data = {
+        ...vm.asset,
+        ...row.asset
+      }
+      vm.account = {
+        ...row,
+        name: `${row.name} - ${vm.$t('Duplicate').toLowerCase()}`
+      }
+      vm.iAsset = data
+      vm.showAddDialog = false
+      vm.accountCreateUpdateTitle = vm.$t('DuplicateAccount')
+      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.currentAccountColumn = row
+      vm.$nextTick(() => {
+        vm.showPasswordHistoryDialog = 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_changed_failed: '1'
+        }
+      }
+    ]
+  },
+  {
+    label: vm.$t('RiskyAccount'),
+    options: [
+      {
+        label: vm.$t('LongTimeNoLogin'),
+        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('LongTimeNoChangeSecret'),
+        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: 'website'
+        }
+      },
+      {
+        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
@@ -138,6 +138,10 @@ export default {
    treeSetting.showDelete = this.$hasPerm('assets.delete_node')
  },
  methods: {
+    reloadTable() {
+      console.log('Reload table')
+      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/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">
-    <el-col :md="20" :sm="22">
-      <ListTable v-bind="config" />
-    </el-col>
-  </el-row>
+  <TwoCol>
+    <ListTable v-bind="config" />
+  </TwoCol>
 </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',
-            'type', 'is_active'
-          ],
+          columns: ['name', 'address', 'platform', '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">
-    <el-col :md="20" :sm="22">
-      <ListTable v-bind="config" />
-    </el-col>
-  </el-row>
+  <TwoCol>
+    <ListTable v-bind="config" />
+  </TwoCol>
 </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">
-      <el-col :md="16" :sm="24">
-        <IBox :title="title" class="block" v-bind="$attrs">
-          <el-timeline>
-            <el-timeline-item
-              v-for="(activity, index) in activities"
-              :key="index"
-              :size="activity.size"
-              :timestamp="activity.timestamp"
-              :type="activity.type"
-              placement="bottom"
+    <TwoCol>
+      <IBox :title="title" class="block" v-bind="$attrs">
+        <el-timeline>
+          <el-timeline-item
+            v-for="(activity, index) in activities"
+            :key="index"
+            :size="activity.size"
+            :timestamp="activity.timestamp"
+            :type="activity.type"
+            placement="bottom"
+          >
+            {{ activity.content }}
+            <el-link
+              v-if="activity['detail_url']"
+              type="primary"
+              @click.native="onClick(activity)"
            >
-              {{ activity.content }}
-              <el-link
-                v-if="activity['detail_url']"
-                type="primary"
-                @click.native="onClick(activity)"
-              >
-                {{ $tc('Detail') }}
-              </el-link>
-            </el-timeline-item>
-          </el-timeline>
-        </IBox>
-      </el-col>
-    </el-row>
+              {{ $tc('Detail') }}
+            </el-link>
+          </el-timeline-item>
+        </el-timeline>
+      </IBox>
+    </TwoCol>
    <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/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">
-      <span v-for="item in items" :key="item.key">
-        <el-form-item v-if="item.has !== false" :class="item.class" :label="item.key">
-          <span slot="label"> {{ formateLabel(item.key) }}</span>
-          <span
-            :is="item.component"
-            v-if="item.component"
-            v-bind="{...item}"
-          />
-          <ItemValue v-else :value="item.value" class="item-value" v-bind="item" />
-        </el-form-item>
-      </span>
+    <el-form :label-width="labelWidth" class="content detail-card" label-position="left">
+      <template v-for="item in items">
+        <div v-if="item.has !== false" :key="item.key" :class="item.class " :label="item.key" class="el-form-item">
+          <span slot="label" class="el-form-item__label"> {{ formateLabel(item.key) }}</span>
+          <span class="item-value el-form-item__content">
+            <template
+              :is="item.component"
+              v-if="item.component"
+              v-bind="{...item}"
+            />
+            <ItemValue v-else :value="item.value" v-bind="item" />
+          </span>
+        </div>
+      </template>
    </el-form>
-    <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;
-  padding: 8px;
+  line-height: 1.4;
+  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 slot="header" class="summary-header">
-      <span class="header-title">{{ title }}</span>
+  <div>
+    <div class="summary-header">
+      <el-tooltip :content="title" placement="top" :open-delay="500">
+        <span class="title">{{ title }}</span>
+      </el-tooltip>
    </div>
    <slot>
-      <h1 class="no-margins">
-        <span v-if="body.disabled" class="disabled-link">{{ body.count }}</span>
-        <router-link v-else :to="body.route">
-          <span>{{ body.count }}</span>
-        </router-link>
-      </h1>
-      <small>{{ body.comment }}</small>
+      <h3 class="no-margins ">
+        <span v-async="iCount" class="num" @click="handleClick">
+          -
+        </span>
+      </h3>
    </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 {
-    float: right !important;
-  }
+.summary-header {
+  //color: var(--color-icon-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;

-  .header-title {
-    font-size: 14px;
-    margin: 0 0 7px;
+  .title {
+    font-style: normal;
    font-weight: 600;
+    font-size: 12px;
+    text-transform: uppercase;
+    line-height: 1.2;
  }
+}

-  .right-side ::v-deep .el-tag {
-    font-weight: 600;
-    padding: 3px 8px;
-    text-shadow: none;
-    line-height: 1;
-  }
+.no-margins {
+  margin: 0 !important;

-  h1 {
-    font-size: 30px;
-    font-weight: 100;
-  }
+  .num {
+    font-style: normal;
+    font-weight: 500;
+    font-size: 24px;
+    line-height: 40px;
+    color: var(--color-text-primary);
+    cursor: pointer;

-  .el-card__body {
-    background-color: #ffffff;
-    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;
+    &:hover {
+      color: var(--color-primary);
+    }
  }
+}
 </style>
--- 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.icon && !action.icon.startsWith('el-')" class="pre-icon">
-            <i v-if="action.icon.startsWith('fa')" :class="'fa fa-fw ' + action.icon" />
-            <svg-icon v-else :icon-class="action.icon" />
+        <span v-if="action.split">
+          {{ action.title }}
+        </span>
+        <el-button
+          v-else
+          :class="action.name"
+          :size="size"
+          class="more-action"
+          v-bind="{...cleanButtonAction(action), icon: ''}"
+        >
+          <span class="pre-icon">
+            <Icon v-if="action.icon" :icon="action.icon" />
          </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">
-                  <i v-if="option.icon.startsWith('fa')" :class="'fa fa-fw ' + option.icon" />
-                  <svg-icon v-else :icon-class="option.icon" />
+                <span v-if="actionsHasIcon(action.dropdown)" class="pre-icon">
+                  <Icon v-if="option.icon" :icon="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">
-              <i v-if="action.icon.startsWith('fa')" :class="'fa ' + action.icon" />
-              <svg-icon v-else :icon-class="action.icon" />
+            <span v-if="action.icon" style="vertical-align: initial">
+              <Icon :icon="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) {
@@ -110,6 +135,7 @@ export default {
      return true
    },
    handleDropdownCallback(command) {
+      console.log('Handle drop down lick')
      const [option, dropdown] = command
      if (option.disabled) {
        return
@@ -156,6 +182,7 @@ export default {
      delete action['callback']
      delete action['name']
      delete action['can']
+      delete action['split']
      return action
    },
    cleanActions(actions) {
@@ -185,6 +212,10 @@ export default {
        }
        delete action['can']

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

+    &.grouped {
+      margin-left: 0;
+    }
+
    &:first-child {
      margin-left: 0;
    }
@@ -252,7 +287,10 @@ $color-drop-menu-border: #e4e7ed;
    display: flex;
    align-items: center;
    padding: 2px 6px;
-    color: $btn-text-color;
+
+    &:not(.is-plain) {
+      color: $btn-text-color;
+    }

    * {
      vertical-align: baseline !important;
@@ -280,7 +318,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 +340,7 @@ $color-drop-menu-border: #e4e7ed;

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

    .pre-icon {
      width: 17px;
@@ -324,6 +362,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/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,58 +101,68 @@ export default {
 </script>

 <style lang="scss" scoped>
-  .dialog ::v-deep .el-dialog {
-    border-radius: 0.3em;
-    max-width: min(100vw, 1500px);
+.dialog ::v-deep .el-dialog {
+  border-radius: 0.3em;
+  max-width: min(100vw, 1500px);

+  //.el-form, .form-buttons {
+  //  margin-left: 20px;
+  //}
+
+  .form-group-header {
+    margin-left: 20px;
+  }
+
+  .el-form--label-top {
    .form-group-header {
-      margin-left: 20px;
-    }
-
-    .el-icon-circle-check {
-      display: none;
-    }
-
-    &__header {
-      box-sizing: border-box;
-      padding: 15px 22px;
-      border-bottom: 1px solid #dee2e6;
-      font-weight: 400;
-    }
-
-    &__body {
-      padding: 20px 30px;
-
-      &:has(.el-table) {
-        background: #f3f3f4;
-      }
-    }
-
-    &__footer {
-      border-top: 1px solid #dee2e6;
-      padding: 16px 25px;
-      justify-content: flex-end;
+      margin-left: 0;
    }
  }

-  @media (max-width: 900px) {
-    .dialog ::v-deep .el-dialog {
-      max-width: calc(100% - 30px);
+  .el-icon-circle-check {
+    display: none;
+  }
+
+  &__header {
+    box-sizing: border-box;
+    padding: 15px 22px;
+    border-bottom: 1px solid #dee2e6;
+    font-weight: 400;
+  }
+
+  &__body {
+    padding: 20px 30px;
+
+    &:has(.el-table) {
+      background: #f3f3f4;
    }
  }

-  .dialog-footer ::v-deep button.el-button {
-    font-size: 13px;
-    padding: 8px 12px;
+  &__footer {
+    border-top: 1px solid #dee2e6;
+    padding: 16px 25px;
+    justify-content: flex-end;
  }
+}

-  .dialog-fade-enter-active, .dialog-fade-leave-active {
-    transition: opacity 1s ease;
+@media (max-width: 900px) {
+  .dialog ::v-deep .el-dialog {
+    max-width: calc(100% - 30px);
  }
+}

-  .dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
-  {
-    opacity: 0;
-  }
+.dialog-footer ::v-deep button.el-button {
+  font-size: 13px;
+  padding: 8px 12px;
+}
+
+.dialog-fade-enter-active, .dialog-fade-leave-active {
+  transition: opacity 1s ease;
+}
+
+.dialog-fade-enter, .dialog-fade-leave-to /* .dialog-fade-leave-active 在 <2.1.8 中以及被重复声明 */
+{
+  opacity: 0;
+}

 </style>
--- a/src/components/Drawer/index.vue
+++ b/src/components/Drawer/index.vue
@@ -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"
  >
-    <span
+    <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)"
      />
-    </span>
+    </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'
@@ -65,8 +64,9 @@ export class FormFieldGenerator {
        }
        break
      case 'boolean':
-        type = ''
-        field.component = Switcher
+        type = 'checkbox'
+        // field.component = Switcher
+        // field.type = 'checkbox'
        break
      case 'list':
        type = 'input'
--- 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>
-      <el-tooltip
-        v-if="data.helpTip"
-        :open-delay="500"
-        :tabindex="-1"
-        effect="dark"
-        placement="right"
-        popper-class="help-tips"
-      >
-        <div slot="content" v-sanitize="data.helpTip" /> <!-- Noncompliant -->
-        <i class="fa fa-question-circle-o help-tip-icon" />
-      </el-tooltip>
+      <span :title="data.label">
+        {{ data.label }}
+        <el-tooltip
+          v-if="data.helpTip"
+          :open-delay="500"
+          :tabindex="-1"
+          effect="dark"
+          placement="right"
+          popper-class="help-tips"
+        >
+          <div slot="content" v-sanitize="data.helpTip" /> <!-- Noncompliant -->
+          <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
-    :id="id"
-    ref="form"
-    :class="mobile ? 'mobile' : 'desktop'"
-    :content="fields"
-    :form="basicForm"
-    :label-position="labelPosition"
-    label-width="25%"
-    v-bind="$attrs"
-    v-on="$listeners"
-  >
-    <!-- slot 透传 -->
-    <slot
-      v-for="item in fields"
-      :slot="`id:${item.id}`"
-      :name="`id:${item.id}`"
-    />
-    <slot
-      v-for="item in fields"
-      :slot="`$id:${item.id}`"
-      :name="`$id:${item.id}`"
-    />
+  <div>
+    <ElFormRender
+      :id="id"
+      ref="form"
+      :class="[mobile ? 'mobile' : 'desktop']"
+      :content="fields"
+      :form="basicForm"
+      :label-position="iLabelPosition"
+      class="form-fields"
+      label-width="25%"
+      v-bind="$attrs"
+      v-on="$listeners"
+    >
+      <!-- slot 透传 -->
+      <slot
+        v-for="item in fields"
+        :slot="`id:${item.id}`"
+        :name="`id:${item.id}`"
+      />
+      <slot
+        v-for="item in fields"
+        :slot="`$id:${item.id}`"
+        :name="`$id:${item.id}`"
+      />

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

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

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

-      <el-button
-        v-for="button in moreButtons"
-        v-show="!button.hidden"
-        :key="button.title"
-        :loading="button.loading"
-        size="small"
-        v-bind="button"
-        @click="handleClick(button)"
-      >
-        {{ button.title }}
-      </el-button>
-    </el-form-item>
-  </ElFormRender>
+        <el-button
+          v-for="button in moreButtons"
+          v-show="!button.hidden"
+          :key="button.title"
+          :loading="button.loading"
+          size="small"
+          v-bind="button"
+          @click="handleClick(button)"
+        >
+          {{ button.title }}
+        </el-button>
+      </div>
+    </ElFormRender>
+  </div>
 </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,13 +228,17 @@ 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;
@@ -226,6 +247,13 @@ export default {
      i {
        color: var(--color-icon-primary);
      }
+
+      span {
+        max-width: calc(100% - 25px);
+        white-space: nowrap; /* 禁止换行 */
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
    }

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

-  ::v-deep .el-form-item.form-buttons {
-    margin-top: 20px;
+  ::v-deep .form-buttons {
+    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()
-      const start = new Date()
+      let 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])
    }
  }
@@ -85,8 +102,11 @@ export default {

 <style lang='scss' scoped>
 .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
@@ -54,22 +54,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/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,11 @@ export default {
        return {
          value: ret,
          row: index,
-          child: children(ret, index, 48)
+          child: children(ret, index, 24 * this.colspan)
        }
      })
-      this.weektimeData = isData
+      console.log('isData', isData)
+      this.weekTimeData = isData
    },
    // 反解析传递过来的默认值
    nextValue() {
@@ -169,7 +172,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 +212,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
-      const endStamp = beginStamp + 1800000
+      // (2 / this.colspan) 原来是一个单元格 30分钟，现在是一个单元格 30 * 2 / this.colspan 分钟
+      const beginStamp = targetStamp + col * 1800000 * (2 / this.colspan) // col * 30 * 60 * 1000
+      const endStamp = beginStamp + 1800000 * (2 / this.colspan)

      const begin = this.formatDate(new Date(beginStamp), 'hh:mm')
      const end = this.formatDate(new Date(endStamp), 'hh:mm')
@@ -218,7 +222,7 @@ export default {
    },
    // 清空时间段
    clearWeektime() {
-      this.weektimeData.forEach(item => {
+      this.weekTimeData.forEach(item => {
        item.child.forEach(t => {
          this.$set(t, 'check', false)
        })
@@ -228,7 +232,7 @@ export default {
    },
    // 全选
    selectAll() {
-      this.weektimeData.forEach(item => {
+      this.weekTimeData.forEach(item => {
        item.child.forEach(t => {
          this.$set(t, 'check', true)
        })
@@ -241,12 +245,15 @@ export default {
      this.mode = 0
    },
    setTimeRange() {
-      this.timeRange = this.weektimeData.map(item => {
+      this.timeRange = this.weekTimeData.map(item => {
+        console.log('item', item)
+        console.log('Value', splicing(item.child))
        return {
          id: item.row === 6 ? 0 : item.row + 1,
          value: splicing(item.child)
        }
      })
+      console.log('Time range: ', this.timeRange)
      this.$emit('change', this.timeRange)
    },
    cellEnter(item) {
@@ -308,7 +315,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 +328,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 +342,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 +415,13 @@ export default {
    }
  }
 }
+
 .c-min-table {
  tr, td, th {
-    min-width: 24px;
+    min-width: 17px;
  }
 }
+
 .g-clearfix {
  &:after, &:before {
    clear: both;
@@ -404,16 +429,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="el-icon-more-outline" />
+    </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;
-    color: #ffffff;
-    background-color: #ffffff;
-    height: 1px;
-    margin: 20px 0;
+  border-top: 1px dashed #e7eaec;
+  color: #ffffff;
+  background-color: #ffffff;
+  height: 1px;
+  margin: 20px 0;
+}
+
+h3 {
+  display: inline-block;
+  cursor: pointer;
+}
+
+.compass {
+  display: inline-block;
+  float: right;
+  cursor: pointer;
+}
+
+.ellipsis {
+  text-align: center;
+  cursor: pointer;
 }
 </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,32 +39,32 @@ export default {
 </script>

 <style scoped>
-  .quick-actions ::v-deep table {
-    width: 100%;
-  }
+.quick-actions ::v-deep table {
+  width: 100%;
+}

-  .quick-actions ::v-deep tr > td {
-    line-height: 1.43;
-    padding: 8px;
-    vertical-align: top;
-    font-size: 13px;
-    width: 50%;
-  }
+.quick-actions ::v-deep tr > td {
+  line-height: 1.43;
+  padding: 8px 0;
+  vertical-align: top;
+  font-size: 13px;
+  width: 50%;
+}

-  .quick-actions ::v-deep tr > td > span:last-child {
-    float: right;
-  }
+.quick-actions ::v-deep tr > td > span:last-child {
+  float: right;
+}

-  .quick-actions ::v-deep button {
-    padding: 4px 5px;
-    font-size: 13px;
-    width: 65px;
+.quick-actions ::v-deep button {
+  padding: 4px 5px;
+  font-size: 13px;
+  min-width: 65px;

-    span {
-      overflow: hidden;
-      white-space: nowrap; /* 控制文本不换行 */
-      text-overflow: ellipsis;
-      display: block;
-    }
+  span {
+    overflow: hidden;
+    white-space: nowrap; /* 控制文本不换行 */
+    text-overflow: ellipsis;
+    display: block;
  }
+}
 </style>
--- a/src/components/Table/AutoDataTable/index.vue
+++ b/src/components/Table/AutoDataTable/index.vue
@@ -187,7 +187,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 +348,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 的问题;
--- 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 class="content">{{ content }}</span>
-    </el-link>
+    <span :title="content" class="text-info">{{ content || '' }}</span>
  </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 v-else :index="index" :item="d">
+            <slot :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/DrawerListTable/PageDrawer.vue
+++ b/src/components/Table/DrawerListTable/PageDrawer.vue
@@ -0,0 +1,79 @@
+<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
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>
--- a/src/components/Table/DrawerListTable/index.vue
+++ b/src/components/Table/DrawerListTable/index.vue
@@ -0,0 +1,235 @@
+<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
+      if (!title && this.resource) {
+        title = this.resource
+      }
+      if (!title) {
+        title = this.$route.meta?.title
+        title = title.replace('List', '').replace('列表', '')
+        title = _.trimEnd(title, 's')
+      }
+      if (!title) {
+        title = this.$t('NoTitle')
+      }
+      let action = this.action
+      if (action === 'clone') {
+        action = 'create'
+      }
+      title = toSentenceCase(action) + 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.$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
@@ -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',
@@ -159,6 +171,9 @@ export default {
    }
  },
  methods: {
+    handleFilterClick() {
+      this.$emit('update:quick-filter-expand', !this.quickFilterExpand)
+    },
    handleTagSearch(val) {
      this.searchTable(val)
    },
@@ -185,7 +200,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,13 @@ 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'

 export default {
  name: 'ListTable',
  components: {
+    QuickFilter,
    AutoDataTable,
    TableAction,
    IBox
@@ -51,6 +63,14 @@ export default {
    headerActions: {
      type: Object,
      default: () => ({})
+    },
+    quickFilters: {
+      type: Array,
+      default: () => null
+    },
+    quickSummary: {
+      type: Array,
+      default: () => null
    }
  },
  data() {
@@ -79,13 +99,20 @@ export default {
      isDeactivated: false,
      extraQuery: extraQuery,
      actionInit: this.headerActions.has === false,
-      initQuery: {}
+      initQuery: {},
+      filterExpand: localStorage.getItem('filterExpand') !== '0'
    }
  },
  computed: {
    ...mapGetters(['currentOrgIsRoot']),
+    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 组织下是否可以创建等
@@ -186,6 +213,11 @@ export default {
        this.$log.debug('ListTable: found colConfig change')
      },
      deep: true
+    },
+    filterExpand: {
+      handler(val) {
+        localStorage.setItem('filterExpand', val ? '1' : '0')
+      }
    }
  },
  mounted() {
@@ -208,6 +240,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 +336,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('OptionalProtocol')
+    }
+  },
+  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,7 +12,40 @@
 </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',
@@ -21,56 +54,29 @@ export default {
    formatterArgsDefault: {
      type: Object,
      default() {
-        return {
-          faChoices: {
-            true: 'fa-check-circle',
-            false: 'fa-times-circle'
-          },
-          classChoices: {
-            true: 'text-primary',
-            false: 'text-danger'
-          },
-          textChoices: {
-            true: this.$t('Yes'),
-            false: this.$t('No')
-          },
-          getKey({ row, cellValue }) {
-            return (cellValue && typeof cellValue === 'object') ? cellValue.value : cellValue
-          },
-          getText({ row, cellValue }) {
-            const key = this.getKey({ row, cellValue })
-            return (cellValue && typeof cellValue === 'object') ? cellValue.label : this.textChoices[key] || cellValue
-          },
-          getIcon({ row, cellValue }) {
-            const key = this.getKey({ row, cellValue })
-            return this.faChoices[key]
-          },
-          hasTips: false,
-          showIcon: true,
-          showText: true,
-          showFalse: true,
-          getTips: ({ row, cellValue }) => {
-            return cellValue
-          }
-        }
+        return { ...formatterArgsDefault }
      }
    }
  },
+  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(
        { row: this.row, cellValue: this.cellValue }
      )
+      console.log('choices: ', this.faChoices)
+      console.log('Icon: ', icon)
      return icon
    },
    classes() {
--- a/src/components/Table/TableFormatters/CopyableFormatter.vue
+++ b/src/components/Table/TableFormatters/CopyableFormatter.vue
@@ -0,0 +1,56 @@
+<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
+        }
+      }
+    }
+  },
+  data() {
+    return {
+      formatterArgs: Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
+    }
+  },
+  computed: {
+    iCellValue() {
+      if (this.formatterArgs.shadow) {
+        return '*'.repeat(6)
+      } else {
+        return this.cellValue
+      }
+    }
+  },
+  methods: {
+    async copy() {
+      const text = await this.formatterArgs.getText({ cellValue: this.cellValue, row: this.row })
+      copy(text)
+    }
+  }
+}
+</script>
+
+<template>
+  <span class="copyable">
+    {{ iCellValue }} <i class="el-icon-copy-document copy" @click="copy()" />
+  </span>
+</template>
+
+<style lang="scss" scoped>
+.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 }) {
-            return cellValue
+          beforeClick: () => {
          },
+          getTitle({ row, cellValue }) {
+            return 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,100 @@ 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() {
+      if (this.formatterArgs?.getDrawerTitle && typeof this.formatterArgs.getDrawerTitle === 'function') {
+        return this.formatterArgs.getDrawerTitle({
+          col: this.col,
+          row: this.row,
+          cellValue: this.cellValue
+        })
+      }
+      let title = this.cellValue || this.row.name
+      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({
-          row: this.row,
-          col: this.col,
-          cellValue: this.cellValue
-        })
+        route = this.formatterArgs.getRoute(this.callbackArgs)
      }
      if (!route) {
        console.error('No route found')
@@ -89,7 +192,6 @@ export default {
      }

      let detailRoute = { replace: true }
-
      if (typeof route === 'string') {
        detailRoute.name = route
        detailRoute.params = { id: this.row.id }
@@ -107,18 +209,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')
-      } else {
-        this.$router.push(detailRoute)
+        this.linkClicked = this.formatterArgs.removeColorOnClick
+        return window.open(href, '_blank')
      }
+
+      this.$router.push(detailRoute)
    }
  }
 }
 </script>

-<style scoped>
+<style lang="scss" scoped>
 .detail {
  display: inline-block;
  max-width: 100%;
@@ -142,4 +244,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() {
-      this.isShow = !this.isShow
+    async getAccountSecret() {
+      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: 15px;
+      font-size: 13px;
      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,7 +6,7 @@ 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 StatusFormatter from './StatusFormatter.vue'
@@ -18,6 +18,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 +30,7 @@ export default {
  DeleteActionFormatter,
  DateFormatter,
  AccountShowFormatter,
-  ShowKeyCopyFormatter,
+  SecretViewerFormatter,
  DialogDetailFormatter,
  ArrayFormatter,
  EditableInputFormatter,
@@ -39,7 +42,10 @@ export default {
  TagChoicesFormatter,
  LabelsFormatter,
  SwitchFormatter,
-  AccountInfoFormatter
+  PlatformFormatter,
+  AccountInfoFormatter,
+  DiscoverConfirmFormatter,
+  AccountConnectFormatter
 }

 export {
@@ -50,7 +56,7 @@ export {
  DeleteActionFormatter,
  DateFormatter,
  AccountShowFormatter,
-  ShowKeyCopyFormatter,
+  SecretViewerFormatter,
  DialogDetailFormatter,
  ArrayFormatter,
  EditableInputFormatter,
@@ -62,5 +68,8 @@ export {
  TagChoicesFormatter,
  LabelsFormatter,
  SwitchFormatter,
-  AccountInfoFormatter
+  PlatformFormatter,
+  DiscoverConfirmFormatter,
+  AccountInfoFormatter,
+  AccountConnectFormatter
 }
--- 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">
-      <li v-if="treeSetting.showCreate" id="m_create" class="rmenu" tabindex="-1" @click="createTreeNode">
-        <i class="fa fa-plus-square-o" /> {{ this.$t('CreateNode') }}
-      </li>
-      <li v-if="treeSetting.showUpdate" id="m_edit" class="rmenu" tabindex="-1" @click="editTreeNode">
-        <i class="fa fa-pencil-square-o" /> {{ this.$t('RenameNode') }}
-      </li>
-      <li v-if="treeSetting.showDelete" id="m_del" class="rmenu" tabindex="-1" @click="removeTreeNode">
-        <i class="fa fa-minus-square" /> {{ this.$t('DeleteNode') }}
-      </li>
+    <slot slot="rMenu">
+      <div v-if="menu && menu.length > 0">
+        <span v-for="item in menu" :key="item.id">
+          <li
+            v-if="hasMenuItem(item)"
+            :id="item.id"
+            :key="item.id"
+            :class="{ 'disabled': checkDisabled(item) }"
+            class="rmenu"
+            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/src/components/Tree/DataZTree/components/ZTree/index.vue
+++ b/src/components/Tree/DataZTree/components/ZTree/index.vue
@@ -29,6 +29,7 @@
        <a id="tree-refresh"><i class="fa fa-refresh" /></a>
      </div>
    </div>
+
    <div :id="iRMenuID" class="rMenu">
      <ul class="dropdown-menu menu-actions">
        <slot name="rMenu" />
@@ -49,8 +50,7 @@ import axiosRetry from 'axios-retry'

 const defaultObject = {
  type: Object,
-  default: () => {
-  }
+  default: () => ({})
 }
 export default {
  name: 'ZTree',
@@ -90,6 +90,12 @@ export default {
    window.removeEventListener('resize', this.updateTreeHeight)
  },
  methods: {
+    onMenuClick(menu) {
+      if (menu.disabled) {
+        return
+      }
+      menu.callback()
+    },
    updateTreeHeight: _.debounce(function() {
      const tree = document.getElementById(this.iZTreeID)
      if (!tree) {
@@ -106,8 +112,8 @@ export default {
        }
      }
      // 使用 table 的高度
-      const ztreeRect = tree.getBoundingClientRect()
-      tree.style.height = `calc(100vh - ${ztreeRect.top}px - 30px - 25px)`
+      const zTreeRect = tree.getBoundingClientRect()
+      tree.style.height = `calc(100vh - ${zTreeRect.top}px - 30px - 25px)`
    }, 100),
    async initTree(refresh = false) {
      const vm = this
@@ -156,9 +162,6 @@ export default {
      if (this.treeSetting.showMenu) {
        this.rMenu = $(`#${this.iRMenuID}`)
      }
-      if (this.treeSetting?.otherMenu) {
-        $('.menu-actions').append(this.otherMenu)
-      }
    },
    onSearch() {
      this.showTreeSearch = !this.showTreeSearch
@@ -435,6 +438,24 @@ div.rMenu li {
  list-style: none outside none;
 }

+.menu-item {
+    font-size: 12px;
+    padding: 0 16px;
+    position: relative;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    color: #606266;
+    height: 24px;
+    line-height: 24px;
+    box-sizing: border-box;
+    cursor: pointer;
+
+    i {
+      width: 15px;
+    }
+}
+
 .dropdown-menu {
  border: medium none;
  min-width: 160px;
@@ -451,7 +472,8 @@ div.rMenu li {
  text-shadow: none;
  top: 100%;
  z-index: 1000;
-  height: 300px;
+  max-height: 320px;
+  min-height: 150px;
  overflow: auto;
 }

--- a/src/components/Widgets/Loading/index.vue
+++ b/src/components/Widgets/Loading/index.vue
@@ -0,0 +1,26 @@
+<template>
+  <span v-if="loading" v-loading="loading" class="loading" />
+</template>
+
+<script>
+export default {
+  name: 'Index',
+  props: {
+    loading: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.loading {
+  margin-top: 20px;
+  display: block;
+}
+</style>
--- a/src/components/const.js
+++ b/src/components/const.js
@@ -1,4 +1,7 @@
 import i18n from '@/i18n/i18n'
+import CronTab from '@/components/Form/FormFields/CronTab/index.vue'
+import InputWithUnit from '@/components/Form/FormFields/InputWithUnit.vue'
+import store from '@/store'

 export const strMatchValues = ['exact', 'not', 'in', 'contains', 'startswith', 'endswith', 'regex']
 export const typeMatchMapper = {
@@ -26,3 +29,48 @@ export const attrMatchOptions = [
  { label: i18n.t('GreatEqualThan'), value: 'gte' },
  { label: i18n.t('LessEqualThan'), value: 'lte' }
 ]
+
+export const crontab = {
+  type: 'cronTab',
+  component: CronTab,
+  label: i18n.t('Crontab'),
+  hidden: (formValue) => {
+    return formValue.is_periodic === false
+  },
+  helpText: i18n.t('CrontabHelpText'),
+  helpTip: i18n.t('CrontabHelpTip')
+}
+
+const validatorInterval = (rule, value, callback) => {
+  if (parseInt(value) < 1) {
+    return callback(new Error(i18n.t('EnsureThisValueIsGreaterThanOrEqualTo1')))
+  }
+  callback()
+}
+
+export const interval = {
+  label: i18n.t('Interval'),
+  hidden: (formValue) => {
+    return formValue.is_periodic === false
+  },
+  component: InputWithUnit,
+  el: {
+    unit: 'hour'
+  },
+  rules: [
+    { validator: validatorInterval }
+  ]
+}
+
+export const is_periodic = {
+  type: 'checkbox',
+  hidden: (formValue) => {
+    return !store.getters.hasValidLicense
+  }
+}
+
+export const periodicMeta = {
+  is_periodic,
+  interval,
+  crontab
+}
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -11,6 +11,7 @@ export { default as Dialog } from './Dialog'
 export { default as FormGroupHeader } from './Form/FormGroupHeader'
 export { default as Hamburger } from './Widgets/Hamburger'
 export { default as ListTable } from './Table/ListTable'
+export { default as DrawerListTable } from './Table/DrawerListTable'
 export { default as RelationCard } from './Cards/RelationCard'
 export { default as Select2 } from './Form/FormFields/Select2'
 export { default as Checkbox } from './Form/FormFields/Checkbox'
@@ -30,7 +31,7 @@ export { default as AccountListTable } from './Apps/AccountListTable/AccountList
 export { default as AssetRelationCard } from './Apps/AssetRelationCard'
 export { default as UserConfirmDialog } from './Apps/UserConfirmDialog'
 export { default as Announcement } from './Widgets/Announcement'
-export { default as CronTab } from './Form/CronTab'
+export { default as CronTab } from './Form/FormFields/CronTab'
 export { default as Pagination } from './Table/Pagination'
 export { default as Tooltip } from './Widgets/Tooltip'
 export { default as ResourceActivity } from './Apps/ResourceActivity'
--- a/src/directive/async.js
+++ b/src/directive/async.js
@@ -0,0 +1,23 @@
+import Vue from 'vue'
+
+Vue.directive('async', {
+  async bind(el, binding) {
+    const { value: asyncFn, arg } = binding
+    if (typeof asyncFn === 'function') {
+      const result = await asyncFn(arg)
+      el.innerText = result
+    }
+  },
+  async update(el, binding) {
+    const { value: asyncFn, arg } = binding
+    if (typeof asyncFn === 'function') {
+      const result = await asyncFn(arg)
+      el.innerText = result
+    } else if (typeof asyncFn === 'object' && asyncFn.then) {
+      const result = await asyncFn
+      el.innerText = result
+    } else {
+      el.innerText = asyncFn
+    }
+  }
+})
--- a/src/directive/drawer-drag.js
+++ b/src/directive/drawer-drag.js
@@ -0,0 +1,33 @@
+import Vue from 'vue'
+
+Vue.directive('el-drawer-drag-width', {
+  bind(el, binding, vnode, oldVnode) {
+    const drawerEle = el.querySelector('.el-drawer')
+    // 创建触发拖拽的元素
+    const dragItem = document.createElement('div')
+    // 将元素放置到抽屉的左边边缘
+    dragItem.style.cssText = 'height: 100%;width: 5px;cursor: ew-resize;position: absolute;left: 0;'
+    drawerEle.append(dragItem)
+
+    dragItem.onmousedown = (downEvent) => {
+      // 拖拽时禁用文本选中
+      document.body.style.userSelect = 'none'
+      document.onmousemove = function(moveEvent) {
+        // 获取鼠标距离浏览器右边缘的距离
+        let realWidth = document.body.clientWidth - moveEvent.pageX
+        const width30 = document.body.clientWidth * 0.2
+        const width80 = document.body.clientWidth * 0.8
+        // 宽度不能大于浏览器宽度 80%，不能小于宽度的 20%
+        realWidth = realWidth > width80 ? width80 : realWidth < width30 ? width30 : realWidth
+        drawerEle.style.width = realWidth + 'px'
+        localStorage.setItem('drawerWidth', realWidth)
+      }
+      document.onmouseup = function(e) {
+        // 拖拽时结束时，取消禁用文本选中
+        document.body.style.userSelect = 'initial'
+        document.onmousemove = null
+        document.onmouseup = null
+      }
+    }
+  }
+})
--- a/src/directive/index.js
+++ b/src/directive/index.js
@@ -1 +1,3 @@
 import './permission'
+import './async'
+import './drawer-drag'
--- a/src/filters/datetime.js
+++ b/src/filters/datetime.js
@@ -5,3 +5,12 @@ Vue.filter('date', function(value) {
  return toSafeLocalDateStr(value)
 })

+Vue.filter('async', async(asyncFn, args) => {
+  if (typeof asyncFn === 'function') {
+    return await asyncFn(args)
+  } else if (typeof asyncFn === 'object' && asyncFn.then) {
+    return await asyncFn
+  } else {
+    return asyncFn
+  }
+})
--- a/src/guards.js
+++ b/src/guards.js
@@ -14,6 +14,7 @@ router.beforeEach(async(to, from, next) => {
  // start progress bar
  // NProgress.start()
  try {
+    await store.dispatch('common/cleanDrawerActionMeta')
    await startup({ to, from, next })
    next()
  } catch (e) {
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -7,6 +7,19 @@
    "notAlphanumericUnderscore": "Only alphanumeric characters and underscores are allowed.",
    "notParenthesis": "Parentheses are not allowed.",
    "InvalidJson": "Invalid JSON format.",
-    "requiredHasUserNameMapped": "Username attr is required."
-}
-
+    "requiredHasUserNameMapped": "Username attr is required.",
+    "NewFound": "New Found",
+    "LastLoginTime": "Last login time",
+    "Diff": "Difference",
+    "LastChangeTime": "Last change time",
+    "AccountDeleted": "Account deleted",
+    "WeakPassword": "Weak password",
+    "RepeatPassword": "Repeat password",
+    "LeakPassword": "Password leaked",
+    "Other": "Other",
+    "Details": "Details",
+    "Confirm": "Confirm",
+    "Ignore": "Ignore",
+    "Please enter a reason": "Please enter a reason",
+    "PleaseEnterReason": "Please enter a reason | Please enter reasons"
+}
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -1,11 +1,12 @@
 {
-    "FieldRequiredError": "这个字段是必需的。",
-    "InputEmailAddress": "输入一个电子邮件地址。",
-    "ServerError": "服务错误，请联系管理员。",
-    "FormatError": "格式错误。",
-    "NotSpecialEmoji": "不支持表情字符。",
-    "notAlphanumericUnderscore": "仅支持字母、数字和下划线。",
-    "notParenthesis": "不能包含括号。",
-    "InvalidJson": "JSON 格式错误.",
-    "requiredHasUserNameMapped": "用户名属性是必需的。"
+  "FieldRequiredError": "这个字段是必需的。",
+  "InputEmailAddress": "输入一个电子邮件地址。",
+  "ServerError": "服务错误，请联系管理员。",
+  "FormatError": "格式错误。",
+  "NotSpecialEmoji": "不支持表情字符。",
+  "notAlphanumericUnderscore": "仅支持字母、数字和下划线。",
+  "notParenthesis": "不能包含括号。",
+  "InvalidJson": "JSON 格式错误.",
+  "requiredHasUserNameMapped": "用户名属性是必需的。",
+  "Diff": ""
 }
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -7,5 +7,17 @@
    "notAlphanumericUnderscore": "仅支持字母、数字和下划线。",
    "notParenthesis": "不能包含括号。",
    "InvalidJson": "JSON 格式错误.",
-    "requiredHasUserNameMapped": "用户名属性是必需的。"
+    "requiredHasUserNameMapped": "用户名属性是必需的。",
+    "NewFound": "新发现",
+    "LastLoginTime": "最后登录时间",
+    "Diff": "差异",
+    "LastChangeTime": "最后修改时间",
+    "AccountDeleted": "账户已删除",
+    "WeakPassword": "弱密码",
+    "RepeatPassword": "重复密码",
+    "LeakPassword": "密码泄露",
+    "Other": "其他",
+    "Details": "详情",
+    "Confirm": "确认",
+    "Ignore": "忽略"
 }
--- a/src/icons/svg/activate.svg
+++ b/src/icons/svg/activate.svg
@@ -0,0 +1,5 @@
+<svg t="1736148692584" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="41075" width="200" height="200">
+    <path d="M512.034996 927.992188c-229.350883 0-415.937195-186.646305-415.937196-415.927196 0-229.290891 186.586312-415.937195 415.937196-415.937196s415.927197 186.646305 415.927196 415.937196c0 229.280892-186.576314 415.927197-415.927196 415.927196z m0-927.862205C229.330886 0.129983 0.099987 229.360882 0.099987 512.064992s229.230898 511.935008 511.935009 511.935008 511.935008-229.2209 511.935008-511.935008c0-282.70411-229.2209-511.935008-511.935008-511.935009z m209.893353 352.33527c-12.948356-0.539931-26.016697 3.789519-35.895443 13.728258L464.03109 588.195327 337.977093 462.131331c-9.878746-9.878746-22.947087-14.208196-35.835451-13.728257-11.628524 0.479939-23.127064 4.819388-32.045931 13.728257-8.848877 8.848877-13.188326 20.417408-13.668265 32.045932-0.479939 12.888364 3.849511 25.956705 13.668265 35.83545l159.969691 159.959693c9.388808 9.338814 21.677248 14.028219 33.905695 14.028219 12.28844 0 24.57688-4.699403 33.905696-14.028219l255.967504-255.967504c9.878746-9.878746 14.218195-22.947087 13.738256-35.835451-0.479939-11.628524-4.819388-23.187056-13.738256-32.045932-8.908869-8.838878-20.297423-13.238319-31.915948-13.658266z"
+          fill="#515151" p-id="41076"></path>
+</svg>
--- a/src/icons/svg/activity.svg
+++ b/src/icons/svg/activity.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="138px" height="134px" viewBox="0 0 138 134" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>activity</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="activity" fill="#3E3A39" fill-rule="nonzero">
+            <path d="M125.454545,123.012 C125.454545,123.30102 125.310273,123.469176 125.435727,123.484941 L12.7900909,123.553255 C12.7399091,123.521725 12.5454545,123.332549 12.5454545,123.012 L12.5454545,44.6614118 L125.454545,44.6614118 L125.454545,123.012 Z M12.5454545,18.865098 C12.5454545,18.5813333 12.6709091,18.4131765 12.5642727,18.386902 L37.6363636,18.386902 L37.6363636,21.0196078 C37.6363636,23.9218101 40.4447593,26.2745098 43.9090909,26.2745098 C47.3734225,26.2745098 50.1818182,23.9218101 50.1818182,21.0196078 L50.1818182,18.3921569 L87.8181818,18.3921569 L87.8181818,21.0196078 C87.8181818,23.9218101 90.6265775,26.2745098 94.0909091,26.2745098 C97.5552407,26.2745098 100.363636,23.9218101 100.363636,21.0196078 L100.363636,18.3921569 L125.260091,18.3921569 C125.385308,18.5275639 125.454545,18.6938135 125.454545,18.865098 L125.454545,34.1568627 L12.5454545,34.1568627 L12.5454545,18.865098 Z M125.423182,7.88235294 L100.363636,7.88235294 L100.363636,5.25490196 C100.363636,2.35269975 97.5552407,0 94.0909091,0 C90.6265775,0 87.8181818,2.35269975 87.8181818,5.25490196 L87.8181818,7.88235294 L50.1818182,7.88235294 L50.1818182,5.25490196 C50.1818182,2.35269975 47.3734225,0 43.9090909,0 C40.4447593,0 37.6363636,2.35269975 37.6363636,5.25490196 L37.6363636,7.88235294 L12.489,7.88235294 C5.60154545,7.88235294 0,12.811451 0,18.865098 L0,123.017255 C0,129.076157 5.60781818,134 12.4952727,134 L125.504727,134 C132.392182,134 138,129.076157 138,123.017255 L138,18.865098 C138,12.8061961 132.360818,7.87709804 125.423182,7.87709804 L125.423182,7.88235294 Z" id="形状"></path>
+            <path d="M44.3,76.5714286 L94.7,76.5714286 C98.1793939,76.5714286 101,74.2049337 101,71.2857143 C101,68.3664949 98.1793939,66 94.7,66 L44.3,66 C40.8206061,66 38,68.3664949 38,71.2857143 C38,74.2049337 40.8206061,76.5714286 44.3,76.5714286 M44.3,103 L94.7,103 C98.1793939,103 101,100.633505 101,97.7142857 C101,94.7950663 98.1793939,92.4285714 94.7,92.4285714 L44.3,92.4285714 C40.8206061,92.4285714 38,94.7950663 38,97.7142857 C38,100.633505 40.8206061,103 44.3,103" id="形状"></path>
+        </g>
+    </g>
+</svg>
--- a/src/icons/svg/backup.svg
+++ b/src/icons/svg/backup.svg
@@ -0,0 +1,7 @@
+<svg t="1730795663037" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="53312" width="200" height="200">
+    <path d="M81.4592 150.4768c-44.544 0-80.6912 35.0208-80.6912 78.2848v712.704c0 43.2128 36.1472 78.2848 80.6912 78.2848h686.6432c44.5952 0 80.7424-35.072 80.7424-78.336v-71.8848h90.3168c44.544 0 80.6912-35.0208 80.6912-78.2848V78.5408c0-43.2128-36.1472-78.2848-80.6912-78.2848H252.416c-44.544 0-80.6912 35.072-80.6912 78.336v71.8848H81.4592zM848.896 800.3584V228.7616c0-43.264-36.1472-78.336-80.7424-78.336H243.0976V69.2736h710.144v731.136h-104.448zM72.0896 941.4656V219.648h705.4336v731.136H72.0896v-9.3184z"
+          fill="#333333" p-id="53313"></path>
+    <path d="M215.1936 716.8a35.1232 35.1232 0 0 0-35.6352 34.6112c0 19.1488 15.9232 34.6112 35.6352 34.6112h203.3664a35.1232 35.1232 0 0 0 35.6864-34.6112 35.1232 35.1232 0 0 0-35.6864-34.56H215.1936z m0-186.9824a35.1232 35.1232 0 0 0-35.6352 34.56c0 19.0976 15.9232 34.6112 35.6352 34.6112h389.4272a35.1232 35.1232 0 0 0 35.6352-34.6112 35.1232 35.1232 0 0 0-35.6352-34.56H215.1936z m0-180.224a35.1232 35.1232 0 0 0-35.6352 34.56c0 19.1488 15.9232 34.6112 35.6352 34.6112h389.4272a35.1232 35.1232 0 0 0 35.6352-34.6112 35.1232 35.1232 0 0 0-35.6352-34.56H215.1936z"
+          fill="#333333" p-id="53314"></path>
+</svg>
--- a/src/icons/svg/batch-update.svg
+++ b/src/icons/svg/batch-update.svg
@@ -1,6 +1,7 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="40px" height="39px" viewBox="0 0 40 39" version="1.1" xmlns="http://www.w3.org/2000/svg"
->
-    <path d="M12.7391982,21.5403486 C12.7133829,21.5732044 12.6875676,21.6078314 12.6759662,21.649499 L10.6832746,28.9553115 C10.5670838,29.3806658 10.6861086,29.8390088 11.0009841,30.1621204 C11.2365098,30.3921997 11.5468245,30.5186636 11.8773309,30.5186636 C11.9864813,30.5186636 12.0958531,30.505601 12.2034979,30.476996 L19.4574584,28.4985184 C19.4691041,28.4985184 19.4747277,28.5087028 19.4834951,28.5087028 C19.5668302,28.5087028 19.648704,28.4783709 19.710519,28.4151832 L39.1078895,9.02064673 C39.6840617,8.44372176 40,7.6578391 40,6.802791 C40,5.83394311 39.589081,4.8654938 38.8694856,4.14780247 L37.037575,2.31296933 C36.3190866,1.59337396 35.3492646,1.18170217 34.3808595,1.18170217 C33.5260328,1.18170217 32.7401945,1.49772899 32.162561,2.07319277 L12.7680688,21.4729101 C12.7479213,21.4914191 12.7535892,21.5188285 12.7391982,21.5403486 M37.2098687,7.12120901 L35.2831545,9.04646203 L32.1597714,5.87348528 L34.0591649,3.97404751 C34.3592951,3.67227884 34.9412238,3.71629326 35.2860769,4.06238625 L37.1192274,5.89721939 C37.3105173,6.08819934 37.4195791,6.34245547 37.4195791,6.59387767 C37.4184278,6.7999571 37.3450115,6.98695182 37.2098687,7.12120901 M16.1888811,21.845084 L30.1857217,7.84744639 L33.3106546,11.0225486 L19.3398506,24.9926883 L16.1888811,21.845084 L16.1888811,21.845084 Z M13.6387477,27.5200617 L14.6502373,23.8073995 L17.3483103,26.5057382 L13.6387477,27.5200617 L13.6387477,27.5200617 Z M37.3756976,14.8069445 C36.6414455,14.8069445 35.9951336,15.4039284 35.9922997,16.1481434 L35.9922997,34.2967274 C35.9922997,35.2449408 35.2222251,35.9802999 34.2725062,35.9802999 L4.43717267,35.9802999 C3.48891504,35.9802999 2.7821609,35.2450294 2.7821609,34.2967274 L2.7821609,4.42906946 C2.7821609,3.48010335 3.48887077,2.76564445 4.43717267,2.76564445 L24.9126299,2.76564445 C25.651,2.76564445 26.2501094,2.10950242 26.2501094,1.37091088 C26.2501094,0.633780616 25.6509558,-6.14926012e-16 24.9126299,-6.14926012e-16 L4.23313012,-6.14926012e-16 C1.92135638,-6.14926012e-16 6.14926012e-16,1.91329748 6.14926012e-16,4.22644388 L6.14926012e-16,34.5008586 C6.14926012e-16,36.8140935 1.92140069,38.7597597 4.23313012,38.7597597 L34.4749546,38.7597597 C36.788411,38.7597597 38.7574127,36.8140935 38.7574127,34.5008586 L38.7574127,16.139686 C38.7545788,15.4039284 38.1097725,14.8069445 37.3756976,14.8069445"
-          id="形状"></path>
+<svg t="1736134870052" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="30043" width="200" height="200">
+    <path d="M863.936 864.448v-304a48 48 0 0 1 96 0v345.6c0 30.08-24.32 54.4-54.4 54.4H118.528a54.4 54.4 0 0 1-54.4-54.4V118.592c0-30.08 24.32-54.4 54.4-54.4h344.96a48 48 0 1 1 0 96h-303.36v704.256h703.808z"
+          fill="#666666" p-id="30044"></path>
+    <path d="M422.4 669.44a48 48 0 0 1-67.904-67.904L870.848 85.184a48 48 0 1 1 67.84 67.84L422.4 669.44z"
+          fill="#666666" p-id="30045"></path>
 </svg>
--- a/src/icons/svg/change-password.svg
+++ b/src/icons/svg/change-password.svg
@@ -1,8 +1,10 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<svg width="40px" height="44px" viewBox="0 0 40 44" version="1.1" xmlns="http://www.w3.org/2000/svg"
->
-    <path d="M30.2706254,38.229976 C30.2706254,39.3606857 29.7535516,39.817019 28.4764414,39.817019 L5.16450885,39.817019 C3.87961144,39.817019 3.36253758,39.3606857 3.36253758,38.229976 L3.36253758,25.2564058 C3.36253758,24.1256961 3.88116889,23.6678054 5.16450885,23.6678054 L26.9080879,23.6678054 L26.9080879,20.3052678 L3.6179596,20.3052678 C1.39859136,20.3052678 0,21.7038592 0,23.9232274 L0,39.5600395 C0,41.7794077 1.39859136,43.1779991 3.6179596,43.1779991 L30.0229907,43.1779991 C32.2330142,43.1779991 33.6316056,41.7794077 33.6316056,39.5600395 L33.6316056,29.0488 L30.269068,29.0488 L30.269068,38.229976 L30.2706254,38.229976 Z"
-          id="路径"></path>
-    <path d="M15.4763873,27.703162 C15.4755615,27.5244652 15.54618,27.3528466 15.6725391,27.2264875 C15.7988982,27.1001284 15.9705168,27.0295099 16.1492136,27.0303357 L17.4948516,27.0303357 C17.8639676,27.0303357 18.1676706,27.3324885 18.1676706,27.703162 L18.1676706,35.7816624 C18.1668142,36.1528948 17.866084,36.453625 17.4948516,36.4544887 L16.1492136,36.4544887 C15.9705168,36.4553145 15.7988982,36.384696 15.6725391,36.2583369 C15.54618,36.1319778 15.4755615,35.9603592 15.4763873,35.7816624 L15.4763873,27.703162 L15.4763873,27.703162 Z M39.5047548,15.4429045 C39.1907428,15.1267586 38.7635683,14.9489692 38.3179768,14.9489692 C37.8723853,14.9489692 37.4452109,15.1267586 37.1311989,15.4429045 L22.3821341,30.1919693 C21.9578609,30.6170771 21.7926087,31.2362399 21.9486262,31.8162251 C22.1046438,32.3962103 22.5582284,32.8489044 23.1385191,33.0037818 C23.7188098,33.1586592 24.3376467,32.9921905 24.7619198,32.5670827 L39.5047548,17.8242477 C39.8217544,17.5091076 40,17.0805683 40,16.6335761 C40,16.1865839 39.8217544,15.7580447 39.5047548,15.4429045 L39.5047548,15.4429045 Z M10.0876127,20.3068253 L10.0876127,10.6973501 C10.0876127,6.72273414 13.107511,3.48790758 16.8204751,3.48790758 C20.5334393,3.48790758 23.5455503,6.72273414 23.5455503,10.6973501 L23.5455503,16.2730261 L26.9080879,16.2730261 L26.9080879,10.2176551 C26.9532494,6.58243177 25.0397574,3.20385387 21.8988728,1.37308023 C18.7579882,-0.45769341 14.8751748,-0.45769341 11.7342902,1.37308023 C8.59340562,3.20385387 6.67991361,6.58243177 6.72507515,10.2176551 L6.72507515,23.6678054 L26.9080879,23.6678054 L26.9080879,20.3052678 L10.0876127,20.3052678 L10.0876127,20.3068253 Z"
-          id="形状"></path>
-</svg>
+<svg width="162px" height="176px" viewBox="0 0 162 176" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#2C2C2C" fill-rule="nonzero">
+            <path d="M145.273438,109.375 C142.304688,109.375 139.882812,111.796875 139.882812,114.765625 L139.882812,164.316406 L10.78125,164.316406 L10.78125,87.3046875 L91.1132813,87.3046875 C94.0820313,87.3046875 96.5039063,84.8828125 96.5039063,81.9140625 C96.5039063,78.9453125 94.0820313,76.5234375 91.1132813,76.5234375 L31.25,76.5234375 L31.25,50.4296875 C31.25,28.5742188 49.0234375,10.8007813 70.8984375,10.8007813 L78.90625,10.8007813 C100.761719,10.8007813 118.535156,28.5742188 118.535156,50.4296875 L118.535156,54.609375 L118.554688,54.609375 C118.730469,57.421875 121.074219,59.6484375 123.925781,59.6484375 C126.894531,59.6484375 129.316406,57.2460938 129.316406,54.2578125 C129.316406,54.1210938 129.316406,53.984375 129.296875,53.8476563 L129.296875,50.4101563 C129.296875,22.6757813 106.621094,0 78.8867188,0 L70.8789063,0 C43.1445313,0 20.46875,22.6757813 20.46875,50.4101563 L20.46875,76.5039063 L5.390625,76.5039063 C2.421875,76.5039063 0,78.9257812 0,81.8945313 L0,170 C0,172.96875 2.421875,175.390625 5.390625,175.390625 C6.03515625,175.390625 6.66015625,175.273438 7.24609375,175.058594 L143.417969,175.058594 C144.003906,175.273438 144.609375,175.390625 145.273438,175.390625 C148.242188,175.390625 150.664063,172.96875 150.664063,170 L150.664063,114.746094 C150.644531,111.796875 148.222656,109.375 145.273438,109.375 Z" id="路径"></path>
+            <path d="M159.648438,56.9335938 C157.558594,54.84375 154.121094,54.84375 152.03125,56.9335938 L76.8945312,132.050781 C74.8046875,134.140625 74.8046875,137.578125 76.8945312,139.667969 C78.984375,141.757813 82.421875,141.757813 84.5117188,139.667969 L159.628906,64.5507813 C161.738281,62.4414063 161.738281,59.0234375 159.648438,56.9335938 Z" id="路径"></path>
+        </g>
+    </g>
+</svg>
--- a/src/icons/svg/disable.svg
+++ b/src/icons/svg/disable.svg
@@ -0,0 +1,5 @@
+<svg t="1736148729915" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
+     p-id="42152" width="200" height="200">
+    <path d="M512 0a512 512 0 1 0 0 1024A512 512 0 0 0 512 0zM113.777778 512a398.222222 398.222222 0 0 1 398.222222-398.222222c89.429333 0 171.690667 29.809778 238.193778 79.587555L193.422222 750.136889A395.377778 395.377778 0 0 1 113.777778 512z m398.222222 398.222222a395.719111 395.719111 0 0 1-238.136889-79.587555L830.577778 273.806222A396.060444 396.060444 0 0 1 910.222222 512a398.222222 398.222222 0 0 1-398.222222 398.222222z"
+          fill="#515151" p-id="42153"></path>
+</svg>
--- a/src/icons/svg/discovery.svg
+++ b/src/icons/svg/discovery.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="175px" height="172px" viewBox="0 0 175 172" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="编组" fill="#000000" fill-rule="nonzero">
+            <path d="M173.785375,165.454861 L123.361962,115.009064 C137.448412,98.2738101 143.521494,75.2018529 137.651474,52.4540759 C128.018006,15.1217873 89.8109099,-7.40014283 52.4770224,2.22233315 C34.3936829,6.89116772 19.2091781,18.3220175 9.72181048,34.4071119 C0.234442898,50.4958037 -2.41955769,69.3134455 2.24727825,87.3967849 C6.91431399,105.480124 18.3433652,120.666428 34.432057,130.153995 C45.3350648,136.583636 57.4928218,139.875204 69.8298572,139.875204 C75.6914829,139.875204 81.5950804,139.12991 87.4219298,137.628528 C99.4151984,134.532427 109.877505,128.483928 118.240035,120.466763 L168.495562,170.744875 C169.224268,171.475579 170.183418,171.840932 171.140568,171.840932 C172.097719,171.840932 173.054871,171.475579 173.785575,170.744875 C175.246584,169.283466 175.246584,166.916271 173.785375,165.454861 Z M85.551198,130.380442 C69.402147,134.552413 52.5955419,132.177823 38.2312808,123.705967 C23.865021,115.234111 13.6597404,101.677103 9.49156634,85.5262533 C5.32319251,69.3790011 7.69418489,52.5743947 16.1660409,38.2099337 C24.6396958,23.8418753 38.1985029,13.6347956 54.3475538,9.47021928 C59.5606195,8.12213334 64.7902738,7.47916928 69.9393825,7.47916928 C97.7275421,7.47916928 123.148307,26.2018753 130.407185,54.3242083 C135.890068,75.5734013 129.699865,97.1395794 115.85805,112.213559 C115.752321,112.298502 115.649591,112.388841 115.551457,112.486774 C115.398161,112.64007 115.264852,112.804958 115.143734,112.976043 C107.36301,121.170886 97.2760486,127.355893 85.551198,130.380442 Z" id="形状"></path>
+            <path d="M91.6046937,27.1300456 C86.1485929,23.9152253 79.7609238,23.0164347 73.6272824,24.5947646 C71.6270386,25.1136128 70.4234546,27.1520308 70.940304,29.1538736 C71.4553548,31.1559162 73.492174,32.3505062 75.4976142,31.8426505 C84.1721329,29.6031689 93.0403202,34.8382195 95.2798019,43.5073419 C95.7145072,45.1951976 97.2342767,46.3130396 98.9001472,46.3130396 C99.2089378,46.3130396 99.5229249,46.2764644 99.8371118,46.1925212 C101.837156,45.6774705 103.04094,43.6388527 102.52409,41.6370099 C100.940364,35.5031687 97.0625933,30.3484636 91.6046937,27.1300456 Z" id="路径"></path>
+        </g>
+    </g>
+</svg>
--- a/Show More
+++ b/Show More