Fixed: Task Click

* perf: update change secret overview

* fix: Typo in latest_secret_change_failed

* Fixed: Fix dialog display order problem

* Fixed: Fix: Password field disappears during user update (#4687)

* fix: Update resource names and permissions for account backup automation

* Fixed: Fix: Password field disappears during user update

* Fixed: Account Change Secret Record List

* perf: update i18n

* perf: update copy icon

---------

Co-authored-by: ibuler <ibuler@qq.com>
Co-authored-by: w940853815 <940853815@qq.com>
Co-authored-by: zhaojisen <1301338853@qq.com>

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

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

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

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

.gitignore

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

jsconfig.json

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

package.json

@@ -66,7 +66,7 @@
     "normalize.css": "7.0.0",
     "npm": "^7.8.0",
     "nprogress": "0.2.0",
-    "path-to-regexp": "2.4.0",
+    "path-to-regexp": "3.3.0",
     "v-sanitize": "^0.0.13",
     "vue": "2.6.10",
     "vue-codemirror": "4.0.6",
@@ -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",
@@ -117,7 +118,7 @@
     "sass-loader": "^7.1.0",
     "script-ext-html-webpack-plugin": "2.1.3",
     "script-loader": "0.7.2",
-    "serve-static": "^1.13.2",
+    "serve-static": "^1.16.0",
     "strip-ansi": "^7.1.0",
     "svg-sprite-loader": "4.1.3",
     "svgo": "1.2.4",

src/api/ops.js

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

src/api/settings.js

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

src/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
       }
@@ -185,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
+        }
       }
     }
   }

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,8 +62,8 @@ 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',
@@ -74,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()
@@ -146,7 +157,11 @@ export default {
         delete form['secret']
       }
       if (this.account?.name) {
-        this.$emit('edit', form)
+        if (this.account.payload && this.account.payload === 'pam_account_clone') {
+          this.$emit('add', form)
+        } else {
+          this.$emit('edit', form)
+        }
       } else {
         this.$emit('add', form)
       }
@@ -158,16 +173,16 @@ export default {
 <style lang='scss' scoped>
 .account-add {
   ::v-deep .el-form-item {
-    margin-bottom: 5px;
+    //margin-bottom: 5px;
 
     .help-block {
-      margin-bottom: 5px;
+      //margin-bottom: 5px;
     }
   }
 
   ::v-deep .form-group-header {
     .hr-line-dashed {
-      margin: 5px 0;
+      //margin: 5px 0;
     }
 
     h3 {

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

@@ -1,54 +1,38 @@
 <template v-if="iVisible">
-  <Dialog
-    v-if="origin !== 'pam'"
-    :close-on-click-modal="false"
-    :destroy-on-close="true"
-    :show-cancel="false"
-    :show-confirm="false"
-    :title="title"
-    :visible.sync="iVisible"
-    v-bind="$attrs"
-    width="900px"
-    v-on="$listeners"
-  >
-    <AccountCreateUpdateForm
-      v-if="!loading"
-      ref="form"
-      :account="account"
-      :add-template="addTemplate"
-      :asset="asset"
-      @add="addAccount"
-      @edit="editAccount"
-    />
-  </Dialog>
-
   <Drawer
-    v-else
     :title="title"
-    @close-drawer="iVisible = false"
+    :visible="iVisible"
+    class="drawer"
+    @close-drawer="handleCloseDrawer"
   >
-    <AccountCreateUpdateForm
-      v-if="!loading"
-      ref="form"
-      :account="account"
-      :add-template="addTemplate"
-      :asset="asset"
-      @add="addAccount"
-      @edit="editAccount"
-    />
+    <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 Drawer from '@/components/Drawer/index.vue'
-import Dialog from '@/components/Dialog/index.vue'
 import AccountCreateUpdateForm from '@/components/Apps/AccountCreateUpdateForm/index.vue'
+import IBox from '@/components/IBox/index.vue'
+import Page from '@/layout/components/Page/index.vue'
 
 export default {
   name: 'CreateAccountDialog',
   components: {
+    IBox,
     Drawer,
-    Dialog,
+    Page,
     AccountCreateUpdateForm
   },
   props: {
@@ -73,10 +57,6 @@ export default {
       default: function() {
         return this.$t('AddAccount')
       }
-    },
-    origin: {
-      type: String,
-      default: ''
     }
   },
   data() {
@@ -128,18 +108,27 @@ export default {
         }
       }).catch(error => {
         this.iVisible = true
-        console.log(this.iVisible)
-        console.log(this.origin)
         this.handleResult(null, error)
       })
     },
     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
@@ -192,7 +181,29 @@ export default {
           refsAutoDataForm.setFieldError(current, err)
         }
       }
+    },
+    handleCloseDrawer() {
+      this.iVisible = false
+      Reflect.deleteProperty(this.$route.query, 'flag')
+    },
+    handleAccountOperation(id, path, data) {
+      this.$axios.post(`/api/v1/accounts/accounts/${id}/${path}/`, data).then((res) => {
+        this.iVisible = false
+        this.$emit('add', true)
+        this.handleResult(res, null)
+      }).catch(error => this.handleResult(null, error))
     }
   }
 }
 </script>
+
+<style lang="scss" scoped>
+.drawer {
+  ::v-deep .el-drawer__body {
+
+    .el-form {
+      margin-right: 30px;
+    }
+  }
+}
+</style>

src/components/Apps/AccountListTable/AccountList.vue

@@ -1,7 +1,8 @@
 <template>
   <div>
-    <ListTable
+    <DrawerListTable
       ref="ListTable"
+      :detail-drawer="detailDrawer"
       :header-actions="headerActions"
       :quick-filters="quickFilters"
       :table-config="tableConfig"
@@ -21,24 +22,13 @@
     <AccountCreateUpdate
       v-if="showAddDialog"
       :account="account"
+      :add-template="addTemplate"
       :asset="iAsset"
-      :origin="origin"
       :title="accountCreateUpdateTitle"
       :visible.sync="showAddDialog"
       @add="addAccountSuccess"
       @bulk-create-done="showBulkCreateResult($event)"
     />
-    <AccountCreateUpdate
-      v-if="showAddTemplateDialog"
-      :account="account"
-      :add-template="true"
-      :asset="iAsset"
-      :origin="origin"
-      :title="accountCreateByTemplateTitle"
-      :visible.sync="showAddTemplateDialog"
-      @add="addAccountSuccess"
-      @bulk-create-done="showBulkCreateResult($event)"
-    />
     <ResultDialog
       v-if="showResultDialog"
       :result="createAccountResults"
@@ -51,31 +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, PlatformFormatter, SecretViewerFormatter
-} 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: {
@@ -128,7 +123,7 @@ export default {
     columnsDefault: {
       type: Array,
       default: () => ([
-        'name', 'username', 'secret', 'asset', 'platform', 'date_updated', 'connect'
+        'name', 'username', 'secret', 'asset', 'platform', 'connect'
       ])
     },
     headerExtraActions: {
@@ -139,150 +134,28 @@ export default {
       type: Object,
       default: () => ({})
     },
-    origin: {
-      type: String,
-      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: [
-        {
-          label: '最近(7天)',
-          options: [
-            {
-              label: '最近发现',
-              filter: {
-                latest_discovery: '1'
-              }
-            },
-            {
-              label: '最近被登录',
-              filter: {
-                latest_accessed: '1'
-              }
-            },
-            {
-              label: '最近修改',
-              filter: {
-                latest_updated: '1'
-              }
-            },
-            {
-              label: '最近改密',
-              filter: {
-                latest_secret_changed: '1'
-              }
-            },
-            {
-              label: '最近改密失败',
-              filter: {
-                latest_secret_changed_failed: '1'
-              }
-            }
-          ]
-        },
-        {
-          label: '风险账号',
-          options: [
-            {
-              label: '僵尸账号',
-              filter: {
-                risk: 'long_time_no_login'
-              }
-            },
-            {
-              label: '幽灵账号',
-              filter: {
-                risk: 'new_found'
-              }
-            },
-            {
-              label: '弱密码',
-              filter: {
-                risk: 'week_password'
-              }
-            },
-            {
-              label: '空密码',
-              filter: {
-                has_secret: 'false'
-              }
-            },
-            {
-              label: '长时间未改密',
-              filter: {
-                long_time_no_change_secret: 'true'
-              }
-            },
-            {
-              label: '长时间未验证',
-              filter: {
-                long_time_no_verify: 'true'
-              }
-            }
-          ]
-        },
-        {
-          label: '账号类型',
-          options: [
-            {
-              label: '全部',
-              filter: {
-                category: ''
-              }
-            },
-            {
-              label: ' 主机',
-              filter: {
-                category: 'host'
-              }
-            },
-            {
-              label: '数据库',
-              filter: {
-                category: 'database'
-              }
-            },
-            {
-              label: '云',
-              filter: {
-                category: 'cloud'
-              }
-            },
-            {
-              label: '网络设备',
-              filter: {
-                category: 'device'
-              }
-            },
-            {
-              label: 'Web',
-              filter: {
-                category: 'website'
-              }
-            },
-            {
-              label: '其他',
-              filter: {
-                category: 'custom'
-              }
-            }
-          ]
-        }
-      ],
+      quickFilters: this.showQuickFilters ? accountQuickFilters(this) : [],
       tableConfig: {
         url: this.url,
         permissions: {
@@ -299,20 +172,16 @@ export default {
         columnsMeta: {
           name: {
             width: '120px',
-            formatter: (row) => {
-              const to = {
-                name: 'AssetAccountDetail',
-                params: { id: row.id }
-              }
-              if (vm.$hasPerm('accounts.view_account')) {
-                return <router-link to={to}>{row.name}</router-link>
-              } else {
-                return <span>{row.name}</span>
+            formatterArgs: {
+              can: () => vm.$hasPerm('accounts.view_account'),
+              getDrawerTitle({ row }) {
+                return `${row.username}@${row.asset.name}`
               }
             }
           },
           secret: {
             formatter: SecretViewerFormatter,
+            width: '130px',
             formatterArgs: {
               secretFrom: 'api',
               hasDownload: false,
@@ -322,36 +191,33 @@ export default {
           connect: {
             label: this.$t('Connect'),
             width: '80px',
-            formatter: () => {
-              return (
-                <span className='connect'>
-                  <el-button type='primary' size='mini' plain>
-                    <i className='fa fa-desktop'/>
-                  </el-button>
-                </span>
-              )
-            }
-          },
-          asset: {
-            formatter: (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>
+            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) {
+              return row.asset.name
+            }
+          },
           username: {
             width: '120px'
           },
@@ -383,96 +249,11 @@ export default {
             formatter: ActionsFormatter,
             formatterArgs: {
               hasUpdate: false, // can set function(row, value)
-              hasDelete: false, // can set function(row, value)
+              hasDelete: true, // can set function(row, value)
               hasClone: false,
-              canClone: true,
+              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('验证密文'),
-                  can: ({ row }) =>
-                    !this.$store.getters.currentOrgIsRoot &&
-                    this.$hasPerm('accounts.verify_account') &&
-                    row.asset['auto_config'].ansible_enabled &&
-                    row.asset['auto_config'].ping_enabled,
-                  callback: ({ row }) => {
-                    this.$axios.post(
-                      `/api/v1/accounts/accounts/tasks/`,
-                      { action: 'verify', accounts: [row.id] }
-                    ).then(res => {
-                      openTaskPage(res['task'])
-                    })
-                  }
-                },
-                {
-                  name: 'ClearSecret',
-                  title: this.$t('ClearSecret'),
-                  can: this.$hasPerm('accounts.change_account'),
-                  type: 'primary',
-                  callback: ({ row }) => {
-                    this.$axios.patch(
-                      `/api/v1/accounts/accounts/clear-secret/`,
-                      { account_ids: [row.id] }
-                    ).then(() => {
-                      this.$message.success(this.$tc('ClearSuccessMsg'))
-                    })
-                  }
-                },
-                {
-                  name: 'SecretHistory',
-                  title: '密文历史'
-                },
-                {
-                  name: 'CopyToOther',
-                  title: '复制到其他资产',
-                  type: 'primary',
-                  divided: true
-                },
-                {
-                  name: 'MoveToOther',
-                  title: '移动到其他资产',
-                  type: 'primary'
-                },
-                {
-                  name: 'Clone',
-                  title: this.$t('Duplicate'),
-                  divided: true
-                }
-              ]
+              extraActions: accountOtherActions(this)
             }
           },
           ...this.columnsMeta
@@ -508,6 +289,7 @@ export default {
               setTimeout(() => {
                 vm.iAsset = this.asset
                 vm.account = {}
+                vm.addTemplate = false
                 vm.showAddDialog = true
               })
             }
@@ -524,7 +306,8 @@ export default {
               setTimeout(() => {
                 vm.iAsset = this.asset
                 vm.account = {}
-                vm.showAddTemplateDialog = true
+                vm.showAddDialog = true
+                vm.addTemplate = true
               })
             }
           },
@@ -535,7 +318,7 @@ 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 &&
@@ -604,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)
@@ -611,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() {
@@ -695,9 +469,8 @@ export default {
 }
 </script>
 
-<style lang='scss' scoped>
+<style lang="scss" scoped>
 .cell a {
   color: var(--color-info);
 }
-
 </style>

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>

src/components/Apps/AccountListTable/const.js

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

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>

src/components/Apps/AssetTreeTable/index.vue

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

src/components/Apps/BlockedIPs/BlockedIPList.vue

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

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

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

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

@@ -123,7 +123,17 @@ export default {
         setLoading(true)
         removeLoadingMessageInChat()
         this.conversationId = data.id
-        updateChaMessageContentById(data.message.id, data)
+
+        const newFragment = {
+          message: { id: data.message.id, is_reasoning: data.message.is_reasoning },
+          reasoning: { content: data.message.is_reasoning ? data.message.content : '' },
+          result: { content: data.message.is_reasoning ? '' : data.message.content },
+          role: data.message.role,
+          type: data.message.type,
+          create_time: data.message.create_time
+        }
+
+        updateChaMessageContentById(data.message.id, newFragment)
       }
       if (data.message?.type === 'finish') {
         setLoading(false)

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: {

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'),

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',

src/components/Apps/ResourceActivity/index.vue

@@ -1,30 +1,28 @@
 <template>
   <div>
-    <el-row :gutter="20">
-      <el-col :md="16" :sm="24" class="resource-activity">
-        <IBox :title="title" class="block" v-bind="$attrs">
-          <el-timeline>
-            <el-timeline-item
-              v-for="(activity, index) in activities"
-              :key="index"
-              :size="activity.size"
-              :timestamp="activity.timestamp"
-              :type="activity.type"
-              placement="bottom"
+    <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
   },

src/components/Apps/UserConfirmDialog/index.vue

@@ -8,7 +8,7 @@
     :visible.sync="visible"
     class="dialog-content"
     v-bind="$attrs"
-    width="600px"
+    width="740px"
     @confirm="visible = false"
     v-on="$listeners"
   >
@@ -52,11 +52,21 @@
       <el-row :gutter="24" style="margin: 0 auto;">
         <el-col :md="24" :sm="24" style="display: flex; align-items: center; margin-bottom: 20px;">
           <el-input
+            v-if="subTypeSelected !== 'face'"
             v-model="secretValue"
             :placeholder="inputPlaceholder"
             :show-password="showPassword"
             @keyup.enter.native="handleConfirm"
           />
+
+          <iframe
+            v-if="isFaceCaptureVisible && subTypeSelected ==='face' && faceCaptureUrl"
+            :src="faceCaptureUrl"
+            allow="camera"
+            sandbox="allow-scripts allow-same-origin"
+            style="width: 100%; height: 800px;border: none;"
+          />
+
           <span v-if="subTypeSelected === 'sms'" style="margin: -1px 0 0 20px;">
             <el-button
               :disabled="smsBtnDisabled"
@@ -72,9 +82,24 @@
       </el-row>
       <el-row :gutter="24" style="margin: 10px auto;">
         <el-col :md="24" :sm="24">
-          <el-button class="confirm-btn" size="mini" type="primary" @click="handleConfirm">
+          <el-button
+            v-if="subTypeSelected!=='face'"
+            class="confirm-btn"
+            size="mini"
+            type="primary"
+            @click="handleConfirm"
+          >
             {{ this.$t('Confirm') }}
           </el-button>
+          <el-button
+            v-if="subTypeSelected==='face'&&!isFaceCaptureVisible"
+            class="confirm-btn"
+            size="mini"
+            type="primary"
+            @click="handleFaceCapture"
+          >
+            {{ this.$tc('VerifyFace') }}
+          </el-button>
         </el-col>
       </el-row>
     </div>
@@ -113,7 +138,10 @@ export default {
       visible: false,
       callback: null,
       cancel: null,
-      processing: false
+      processing: false,
+      isFaceCaptureVisible: false,
+      faceToken: null,
+      faceCaptureUrl: null
     }
   },
   computed: {
@@ -129,6 +157,10 @@ export default {
   },
   methods: {
     handleSubTypeChange(val) {
+      if (val !== 'face') {
+        this.isFaceCaptureVisible = false
+      }
+
       this.inputPlaceholder = this.subTypeChoices.filter(item => item.name === val)[0]?.placeholder
       this.smsWidth = val === 'sms' ? 6 : 0
     },
@@ -192,6 +224,29 @@ export default {
         this.$message.error(this.$tc('FailedToSendVerificationCode'))
       })
     },
+    startFaceCapture() {
+      const url = '/api/v1/authentication/face/context/'
+      this.$axios.post(url).then(data => {
+        const token = data['token']
+        this.faceCaptureUrl = '/facelive/capture?token=' + token
+        this.isFaceCaptureVisible = true
+
+        const timer = setInterval(() => {
+          this.$axios.get(url + `?token=${token}`).then(data => {
+            if (data['is_finished']) {
+              clearInterval(timer)
+              this.isFaceCaptureVisible = false
+              this.handleConfirm()
+            }
+          })
+        }, 1000)
+      }).catch(() => {
+        this.$message.error(this.$tc('FailedToStartFaceCapture'))
+      })
+    },
+    handleFaceCapture() {
+      this.startFaceCapture()
+    },
     handleConfirm() {
       if (this.confirmTypeRequired === 'relogin') {
         return this.logout()
@@ -214,6 +269,8 @@ export default {
         })
       }).catch((err) => {
         this.$message.error(err.message || this.$tc('ConfirmFailed'))
+        this.faceCaptureUrl = null
+        this.isFaceCaptureVisible = false
       })
     }
   }
@@ -221,21 +278,21 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .dialog-content ::v-deep .el-dialog__footer {
-    padding: 0;
-  }
+.dialog-content ::v-deep .el-dialog__footer {
+  padding: 0;
+}
 
-  .dialog-content ::v-deep .el-dialog {
-    padding: 8px;
+.dialog-content ::v-deep .el-dialog {
+  padding: 8px;
 
-    .el-dialog__body {
-      padding-top: 30px;
-      padding-bottom: 30px;
-    }
+  .el-dialog__body {
+    padding-top: 30px;
+    padding-bottom: 30px;
   }
+}
 
-  .confirm-btn {
-    width: 100%;
-    line-height: 20px;
-  }
+.confirm-btn {
+  width: 100%;
+  line-height: 20px;
+}
 </style>

src/components/Apps/VariableCreateUpdateForm/index.vue

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

src/components/Apps/VariableSetForm/index.vue

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

src/components/Cards/DetailCard/ItemValue.vue

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

src/components/Cards/DetailCard/auto.vue

@@ -1,7 +1,12 @@
 <template>
   <IBox v-if="loading" style="width: 100%; height: 200px" />
   <div v-else>
-    <DetailCard v-if="hasObject && items.length > 0" :items="validItems" :loading="loading" v-bind="$attrs" />
+    <DetailCard
+      v-if="hasObject && items.length > 0"
+      :items="validItems"
+      :loading="loading"
+      v-bind="$attrs"
+    />
   </div>
 </template>
 
@@ -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

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>

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 {

src/components/Cards/SummaryCard/index.vue

@@ -1,7 +1,9 @@
 <template>
   <div>
     <div class="summary-header">
-      <span class="title">{{ title }}</span>
+      <el-tooltip :content="title" placement="top" :open-delay="500">
+        <span class="title">{{ title }}</span>
+      </el-tooltip>
     </div>
     <slot>
       <h3 class="no-margins ">
@@ -78,6 +80,10 @@ export default {
 <style lang="scss" scoped>
 .summary-header {
   //color: var(--color-icon-primary);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: pointer;
 
   .title {
     font-style: normal;

src/components/Dashboard/ProgressChart.vue

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

src/components/Dashboard/RankTable.vue

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

src/components/Dashboard/RingChart.vue

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

src/components/Dashboard/SummaryCountCard.vue

@@ -16,7 +16,7 @@
 </template>
 
 <script>
-import Title from '../components/Title.vue'
+import Title from './Title.vue'
 import SummaryCard from '@/components/Cards/SummaryCard'
 
 export default {

src/components/DataActions/index.vue

@@ -5,14 +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 :class="action.name" :size="size" class="more-action" v-bind="{...cleanButtonAction(action), icon: ''}">
-          <span v-if="action.icon" class="pre-icon">
-            <Icon :icon="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" />
@@ -42,8 +56,8 @@
                 class="dropdown-item"
                 v-bind="{...option, icon: ''}"
               >
-                <span v-if="option.icon" class="pre-icon">
-                  <Icon :icon="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>
@@ -55,13 +69,13 @@
       <el-button
         v-else
         :key="action.name"
-        :class="action.name"
+        :class="[action.name, {grouped: action.grouped }]"
         :size="size"
         class="action-item"
         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" style="vertical-align: initial">
               <Icon :icon="action.icon" />
@@ -107,6 +121,9 @@ export default {
     }
   },
   methods: {
+    actionsHasIcon(actions) {
+      return actions.some(action => action.icon)
+    },
     hasIcon(action, type = '') {
       const icon = action.icon
       if (!icon) {
@@ -164,6 +181,7 @@ export default {
       delete action['callback']
       delete action['name']
       delete action['can']
+      delete action['split']
       return action
     },
     cleanActions(actions) {
@@ -193,6 +211,10 @@ export default {
         }
         delete action['can']
 
+        if (!action.size) {
+          action.size = 'small'
+        }
+
         if (action.dropdown) {
           action.dropdown = this.cleanActions(action.dropdown)
         }
@@ -217,6 +239,10 @@ $color-drop-menu-border: #e4e7ed;
   .action-item {
     margin-left: 5px;
 
+    &.grouped {
+      margin-left: 0;
+    }
+
     &:first-child {
       margin-left: 0;
     }
@@ -257,14 +283,16 @@ $color-drop-menu-border: #e4e7ed;
   align-items: flex-end;
 
   .el-button {
-    display: flex;
-    align-items: center;
-    padding: 2px 6px;
+    padding: 2px 5px;
 
     &:not(.is-plain) {
       color: $btn-text-color;
     }
 
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+
     * {
       vertical-align: baseline !important;
     }
@@ -291,7 +319,6 @@ $color-drop-menu-border: #e4e7ed;
 // 下拉 options
 .el-dropdown-menu {
   ::v-deep .more-batch-processing {
-    text-align: center;
 
     &:hover {
       background-color: transparent !important;
@@ -314,6 +341,7 @@ $color-drop-menu-border: #e4e7ed;
 
   .dropdown-item {
     color: var(--color-text-primary);
+    line-height: 34px;
 
     .pre-icon {
       width: 17px;
@@ -335,6 +363,8 @@ $color-drop-menu-border: #e4e7ed;
   }
 
   .el-dropdown-menu__item {
+    padding: 0 20px;
+
     &.is-disabled {
       color: var(--color-disabled);
       cursor: not-allowed;

src/components/Dialog/DiffDetail.vue

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

src/components/Dialog/ProcessingDialog.vue

@@ -1,9 +1,12 @@
 <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" />
@@ -40,13 +43,19 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.processing-dialog {
+  ::v-deep .el-dialog__body {
+    overflow: hidden;
+  }
+}
+
 .spinner {
-    width: 100px;
-    height: 100px;
-    border: 5px solid rgba(0, 0, 0, 0.1);
-    border-radius: 50%;
-    border-top-color: #3498db;
-    animation: spin 1s infinite linear;
+  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 {
@@ -55,8 +64,8 @@ export default {
 }
 
 @keyframes spin {
-    to {
-        transform: rotate(360deg);
-    }
+  to {
+    transform: rotate(360deg);
+  }
 }
 </style>

src/components/Dialog/RemoteProcessingDialog.vue

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

src/components/Dialog/ReportDialog.vue

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

src/components/Dialog/index.vue

@@ -82,8 +82,7 @@ export default {
     }
   },
   data() {
-    return {
-    }
+    return {}
   },
   computed: {
     iWidth() {
@@ -102,58 +101,69 @@ 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;
+      font-size: 13px;
+
+    &: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>

src/components/Drawer/index.vue

@@ -1,18 +1,31 @@
 <template>
   <el-drawer
     ref="drawer"
-    size="61.8%"
-    direction="rtl"
-    custom-class="drawer"
-    :title="title"
-    :before-close="handleClose"
-    :visible.sync="dialog"
-    :wrapper-closable="true"
+    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" />
+      <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>
 
@@ -21,87 +34,256 @@ export default {
   props: {
     title: {
       type: String,
-      default: function() {
-        return this.$t('AddAccount')
-      }
+      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 {
-      dialog: true,
       loading: false,
       formLabelWidth: '80px'
     }
   },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  mounted() {
+  },
   methods: {
     handleClose(done) {
       this.$emit('close-drawer')
       done()
-    },
-    cancelForm() {
-      this.loading = false
-      this.dialog = false
     }
   }
 }
 </script>
 
-<style scoped lang='scss'>
-::v-deep .drawer {
-  min-width: 565px;
-
-  .el-drawer__header {
-    margin-bottom: 20px;
-
-    span {
-      font-size: 16px;
-      font-weight: 800;
-      color: var(--color-text-primary);
-    }
-  }
-
-  .el-drawer__body {
-
-    .drawer__content {
-      height: 100%;
-
-      .el-form {
-        position: relative;
-        display: flex;
-        flex-wrap: nowrap;
-        flex-direction: column;
-        justify-content: flex-start;
-        margin: unset !important;
-        padding-right: 50px;
-        height: 100%;
-
-        .el-form-item {
-          margin: 5px 0 5px 0;
-        }
-
-        .form-buttons {
-          position: absolute;
-          left: 0;
-          bottom: 0;
-          width: 100%;
-          display: flex;
-          flex-wrap: nowrap;
-          padding: 0 10px 0 10px;
-
-          .el-form-item__content {
-            width: 100%;
-            display: flex;
-            margin: unset !important;
-            justify-content: center;
-
-            .el-button {
-              width: 50%;
-              border-radius: 10px;
-            }
-          }
-        }
+<style 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>

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>

src/components/Form/AutoDataForm/utils.js

@@ -6,7 +6,6 @@ import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
 import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
 import { assignIfNot, toSentenceCase } from '@/utils/common'
 import TagInput from '@/components/Form/FormFields/TagInput.vue'
-import TransferSelect from '@/components/Form/FormFields/TransferSelect.vue'
 import i18n from '@/i18n/i18n'
 
 export class FormFieldGenerator {
@@ -113,7 +112,7 @@ export class FormFieldGenerator {
     let nestedFields = fieldMeta.fields || []
     const nestedFieldsMeta = fieldMeta.fieldsMeta || {}
     const nestedFieldsRemoteMeta = fieldRemoteMeta.children || {}
-    if (nestedFields === '__all__') {
+    if (nestedFields.toString() === '__all__') {
       nestedFields = Object.keys(nestedFieldsRemoteMeta)
     }
     for (const name of nestedFields) {
@@ -135,9 +134,6 @@ export class FormFieldGenerator {
       case 'comment':
         field.el.type = 'textarea'
         break
-      case 'users':
-        field.component = TransferSelect
-        field.el.label = field.label
     }
     return field
   }

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" class="help-tip-content" /> <!-- Noncompliant -->
+          <i class="fa fa-question-circle-o help-tip-icon" />
+        </el-tooltip>
+      </span>
     </template>
     <template v-if="readonly && hasReadonlyContent">
       <div
@@ -100,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>
@@ -122,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
@@ -327,4 +344,9 @@ export default {
     cursor: pointer;
   }
 }
+
+.help-tip-content {
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
 </style>

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,21 +228,38 @@ export default {
     color: var(--color-text-primary);
   }
 
+  &.label-top {
+    ::v-deep .el-form-item {
+      .el-form-item__content {
+        width: 100%;
+      }
+    }
+  }
+
   ::v-deep .el-form-item {
     margin-bottom: 10px;
 
-    .item-params {
-      margin-top: 0;
-    }
-
     .el-form-item__label {
       padding: 0 30px 0 0;
       line-height: 30px;
       color: var(--color-text-primary);
 
+      span {
+        display: unset;
+      }
+
       i {
         color: var(--color-icon-primary);
       }
+
+      span {
+        max-width: calc(100% - 25px);
+        //white-space: nowrap; /* 禁止换行 */
+        //text-overflow: ellipsis;
+        overflow: hidden;
+        display: inline-block;
+        line-height: 16px;
+      }
     }
 
     .el-form-item__content {
@@ -301,8 +335,9 @@ export default {
     }
   }
 
-  ::v-deep .el-form-item.form-buttons {
-    margin-top: 20px;
+  ::v-deep .form-buttons {
+    margin-top: 30px;
+    margin-left: 25%;
   }
 }
 

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;
     }
   }
 }

src/components/Form/FormFields/CodeEditor.vue

@@ -245,7 +245,7 @@ export default {
       },
       set(val) {
         this.$emit('update:value', val)
-        this.$emit('change', val)
+        this.$emit('input', val)
       }
     },
     iOptions() {

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])
     }
   }
@@ -84,9 +101,18 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+html:lang(pt-br) {
+  .datepicker ::v-deep .el-range-separator {
+    padding: 0 10px;
+  }
+}
+
 .datepicker {
+  &.el-date-editor--daterange.el-input__inner {
+    width: 243px;
+  }
+
   margin-left: 10px;
-  width: 233px;
   border: 1px solid #dcdee2;
   border-radius: 2px;
   height: 28px;

src/components/Form/FormFields/InputWithUnit.vue

@@ -15,6 +15,7 @@ export default {
   },
   data() {
     return {
+      defaultValue: 24,
       displayMapper: {
         'second': this.$t('Second'), // 'sec' is the default value of 'unit
         'min': this.$t('Minute'), // 'min' is the default value of 'unit

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

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

src/components/Form/FormFields/PasswordRule.vue

@@ -48,7 +48,8 @@ export default {
             type: 'input-number',
             el: {
               min: 8,
-              max: 30
+              max: 36,
+              size: 'mini'
             }
           },
           {

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

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="!loading" :class="showSetting ? 'show-setting' : 'hide-setting'">
+  <div :class="showSetting ? 'show-setting' : 'hide-setting'">
     <div v-for="(item, index) in items" :key="item.name" class="protocol-item">
       <el-input
         v-model="item.port"
@@ -114,8 +114,7 @@ export default {
       name: '',
       items: [],
       currentProtocol: {},
-      showDialog: false,
-      loading: false
+      showDialog: false
     }
   },
   computed: {
@@ -144,10 +143,8 @@ export default {
   watch: {
     choices: {
       handler(value, oldValue) {
-        this.loading = true
         setTimeout(() => {
           this.setDefaultItems(value)
-          this.loading = false
         },)
       },
       deep: true,

src/components/Form/FormFields/TagInput.vue

@@ -151,7 +151,7 @@ export default {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  padding: 1px 2px 1px;
+  padding: 0 6px;
   border: 1px solid #dcdee2;
   border-radius: 1px;
   background-color: #fff;
@@ -162,7 +162,7 @@ export default {
   }
 
   & ::v-deep .el-tag {
-    margin-top: 1px;
+    margin-bottom: 1px;
     font-family: sans-serif !important;
   }
 
@@ -178,6 +178,7 @@ export default {
     max-width: 100%;
     border: none;
     padding-left: 10px;
+    height: 28px;
   }
 }
 
@@ -187,7 +188,7 @@ export default {
 }
 
 .filter-field ::v-deep .el-input__inner {
-  height: 28px;
+  height: 28px !important;
 }
 
 .show-password {

src/components/Form/FormFields/UpdateToken.vue

@@ -6,14 +6,15 @@
     <el-input
       v-show="isShow"
       v-model.trim="curValue"
+      :disabled="disabled"
       :placeholder="placeholder"
       :type="type"
       class="password-input"
       show-password
       @change="onChange"
     />
-    <el-button size="small" type="text" @click="randomPassword">
-      <i class="fa fa-retweet" />
+    <el-button :disabled="disabled" size="small" type="text" @click="randomPassword">
+      <i class="fa fa-refresh" />
     </el-button>
   </div>
 </template>
@@ -44,6 +45,10 @@ export default {
     placeholder: {
       type: String,
       default: () => ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
     }
   },
   data() {

src/components/Form/FormFields/UserPassword.vue

@@ -42,7 +42,7 @@ export default {
         patterns.push([/\d/, i18n.t('NUMBER_REQUIRED')])
       }
       if (passwordRule['SECURITY_PASSWORD_SPECIAL_CHAR']) {
-        const pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
+        const pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？_+-]")
         patterns.push([pattern, i18n.t('SPECIAL_CHAR_REQUIRED')])
       }
       for (const [pattern, msg] of patterns) {

src/components/Form/FormFields/WeekCronSelect.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="c-weektime">
     <div class="c-schedue" />
-    <div :class="{'c-schedue': true, 'c-schedue-notransi': mode}" :style="styleValue" />
+    <div :class="{'c-schedue': true, 'c-schedue-notransi': mode}" />
     <table :class="{'c-min-table': colspan < 2}" class="c-weektime-table">
       <thead class="c-weektime-head">
         <tr>
@@ -14,7 +14,7 @@
         </tr>
       </thead>
       <tbody class="c-weektime-body" @mouseleave="containerLeave()">
-        <tr v-for="t in weektimeData" :key="t.row">
+        <tr v-for="t in weekTimeData" :key="t.row">
           <td>{{ t.value }}</td>
           <td
             v-for="n in t.child"
@@ -45,6 +45,7 @@
 const createArr = len => {
   return Array.from(Array(len)).map((ret, id) => id)
 }
+
 function splicing(list) {
   let same
   let i = -1
@@ -67,6 +68,7 @@ function splicing(list) {
   arr.shift()
   return arr.join('')
 }
+
 export default {
   name: 'WeekCronSelect',
   props: {
@@ -77,7 +79,7 @@ export default {
     colspan: {
       type: Number,
       default() {
-        return 2
+        return 1
       }
     }
   },
@@ -100,7 +102,7 @@ export default {
         this.$t('Saturday'),
         this.$t('Sunday')
       ],
-      weektimeData: [],
+      weekTimeData: [],
       timeRange: [] // 格式化之后数据
     }
   },
@@ -142,10 +144,10 @@ export default {
         return {
           value: ret,
           row: index,
-          child: children(ret, index, 48)
+          child: children(ret, index, 24 * this.colspan)
         }
       })
-      this.weektimeData = isData
+      this.weekTimeData = isData
     },
     // 反解析传递过来的默认值
     nextValue() {
@@ -169,7 +171,7 @@ export default {
       const startVal = this.countIndex(start)
       const endVal = this.countIndex(end)
       for (let i = startVal; i < (endVal === 0 ? 48 : endVal); i++) {
-        const curWeek = this.weektimeData[idNum]
+        const curWeek = this.weekTimeData[idNum]
         curWeek.child[i].check = true
       }
     },
@@ -209,8 +211,9 @@ export default {
       const nowDate = new Date(timeStamp).getTime()
       const targetStamp = new Date(nowDate + offsetGMT * 60 * 1000 + timezone * 60 * 60 * 1000).getTime()
 
-      const beginStamp = targetStamp + col * 1800000 // col * 30 * 60 * 1000
-      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 +221,7 @@ export default {
     },
     // 清空时间段
     clearWeektime() {
-      this.weektimeData.forEach(item => {
+      this.weekTimeData.forEach(item => {
         item.child.forEach(t => {
           this.$set(t, 'check', false)
         })
@@ -228,7 +231,7 @@ export default {
     },
     // 全选
     selectAll() {
-      this.weektimeData.forEach(item => {
+      this.weekTimeData.forEach(item => {
         item.child.forEach(t => {
           this.$set(t, 'check', true)
         })
@@ -241,7 +244,7 @@ export default {
       this.mode = 0
     },
     setTimeRange() {
-      this.timeRange = this.weektimeData.map(item => {
+      this.timeRange = this.weekTimeData.map(item => {
         return {
           id: item.row === 6 ? 0 : item.row + 1,
           value: splicing(item.child)
@@ -308,7 +311,7 @@ export default {
     selectWeek(row, col, check) {
       const [minRow, maxRow] = row
       const [minCol, maxCol] = col
-      this.weektimeData.forEach(item => {
+      this.weekTimeData.forEach(item => {
         item.child.forEach(t => {
           if (t.row >= minRow && t.row <= maxRow && t.col >= minCol && t.col <= maxCol) {
             this.$set(t, 'check', check)
@@ -321,11 +324,12 @@ export default {
 </script>
 <style lang="scss" scoped>
 .c-weektime {
-  min-width: 640px;
+  //min-width: 440px;
   position: relative;
   display: inline-block;
   padding-right: 20px;
 }
+
 .c-schedue {
   background: #598fe6;
   position: absolute;
@@ -334,55 +338,70 @@ export default {
   opacity: .6;
   pointer-events: none;
 }
+
 .c-schedue-notransi {
   transition: width .12s ease, height .12s ease, top .12s ease, left .12s ease;
 }
+
 .c-weektime-table {
   border-collapse: collapse;
+
   th {
     vertical-align: inherit;
     font-weight: bold;
   }
+
   tr {
     height: 30px;
   }
+
   tr, td, th {
     user-select: none;
     border: 1px solid #dee4f5;
     text-align: center;
-    min-width: 12px;
+    min-width: 10px;
     line-height: 1.6em;
     transition: background .16s ease;
   }
+
   .c-weektime-head {
     font-size: 12px;
+
     .week-td {
       width: 72px;
     }
   }
+
   .c-weektime-body {
     font-size: 12px;
+
     td {
       &.weektime-atom-item {
         user-select: unset;
         background-color: #f5f5f5;
+        width: 18px;
       }
+
       &.ui-selected {
         background-color: #598fe6;
       }
     }
   }
+
   .c-weektime-preview {
     line-height: 2.4em;
     padding: 0 10px;
-    font-size: 13px;
+    font-size: 11px;
+
     .c-weektime-con {
       line-height: 42px;
       user-select: none;
     }
+
     .c-weektime-time {
       text-align: left;
       line-height: 2.4em;
+
       p {
         max-width: 625px;
         line-height: 1.4em;
@@ -392,11 +411,13 @@ export default {
     }
   }
 }
+
 .c-min-table {
   tr, td, th {
-    min-width: 24px;
+    min-width: 17px;
   }
 }
+
 .g-clearfix {
   &:after, &:before {
     clear: both;
@@ -404,16 +425,20 @@ export default {
     display: table;
   }
 }
+
 .g-pull-left {
   float: left;
 }
+
 .g-pull-right {
   float: right;
-  color: #409eff!important;
+  color: #409eff !important;
 }
+
 .g-pull-margin {
   margin-right: 12px;
 }
+
 .g-tip-text {
   color: #999;
 }

src/components/Form/FormGroupHeader/index.vue

@@ -1,7 +1,13 @@
 <template>
-  <div class="form-group-header">
+  <div ref="formGroup" class="form-group-header">
     <div v-if="line" class="hr-line-dashed" />
-    <h3>{{ group['title'] }} </h3>
+    <h3 @click="toggle">{{ group['title'] }} </h3>
+    <span class="compass" @click="toggle">
+      <i :class="iconClass" />
+    </span>
+    <div v-if="!isVisible" class="ellipsis" @click="toggle">
+      <i class="fa fa-angle-double-down" />
+    </div>
   </div>
 </template>
 
@@ -20,16 +26,62 @@ export default {
       type: Object,
       default: () => ({})
     }
+  },
+  data() {
+    return {
+      isVisible: true
+    }
+  },
+  computed: {
+    iconClass() {
+      return this.isVisible ? 'el-icon-arrow-down' : 'el-icon-arrow-up'
+    }
+  },
+  methods: {
+    toggle() {
+      this.isVisible = !this.isVisible
+      this.toggleSiblingVisibility()
+    },
+    toggleSiblingVisibility() {
+      // 当前 form-group-header 的 DOM 元素
+      const formGroupHeader = this.$refs.formGroup
+      if (!formGroupHeader) return
+
+      // 找到当前 form-group-header 的下一个兄弟节点
+      let sibling = formGroupHeader.nextElementSibling
+
+      // 循环隐藏或显示直到找到下一个 form-group-header
+      while (sibling && sibling.classList.contains('el-form-item')) {
+        sibling.style.display = this.isVisible ? '' : 'none'
+        sibling = sibling.nextElementSibling
+      }
+    }
   }
 }
 </script>
 
 <style lang="less" scoped>
 .hr-line-dashed {
-    border-top: 1px dashed #e7eaec;
-    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>

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: {

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>

src/components/Table/AutoDataTable/components/ColumnSettingPopover.vue

@@ -3,7 +3,7 @@
     v-if="showColumnSettingPopover"
     :cancel-title="$tc('RestoreDefault')"
     :destroy-on-close="true"
-    :title="$tc('TableSetting')"
+    :title="$tc('ListPreference')"
     :visible.sync="showColumnSettingPopover"
     top="10%"
     width="50%"
@@ -36,6 +36,7 @@
           <el-checkbox
             :disabled="item.prop==='actions' || minColumns.indexOf(item.prop)!==-1"
             :label="item.prop"
+            :title="item.label"
           >
             {{ item.label }}
           </el-checkbox>

src/components/Table/AutoDataTable/index.vue

@@ -23,11 +23,17 @@
 <script type="text/jsx">
 import DataTable from '@/components/Table/DataTable/index.vue'
 import {
-  ActionsFormatter, ArrayFormatter, ChoicesFormatter, DateFormatter, DetailFormatter, DisplayFormatter,
+  ActionsFormatter,
+  ArrayFormatter,
+  ChoicesFormatter,
+  CopyableFormatter,
+  DateFormatter,
+  DetailFormatter,
+  DisplayFormatter,
   ObjectRelatedFormatter
 } from '@/components/Table/TableFormatters'
 import i18n from '@/i18n/i18n'
-import { newURL, replaceAllUUID, toSentenceCase } from '@/utils/common'
+import { newURL, ObjectLocalStorage, replaceAllUUID, toSentenceCase } from '@/utils/common'
 import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
 import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'
 
@@ -62,10 +68,21 @@ export default {
         currentCols: [],
         defaultCols: []
       },
-      isDeactivated: false
+      isDeactivated: false,
+      objTableColumns: new ObjectLocalStorage('tableColumns')
+    }
+  },
+  computed: {
+    dynamicActionWidth() {
+      if (this.$i18n.locale === 'en') {
+        return '120px'
+      }
+      if (this.$i18n.locale === 'pt-br') {
+        return '160px'
+      }
+      return '100px'
     }
   },
-  computed: {},
   watch: {
     config: {
       handler: _.debounce(function(iNew, iOld) {
@@ -120,6 +137,11 @@ export default {
     },
     generateColumnByName(name, col) {
       switch (name) {
+        case 'id':
+          col.width = '290px'
+          col.formatter = CopyableFormatter
+          col.iconPosition = 'left'
+          break
         case 'name':
           col.formatter = DetailFormatter
           col.sortable = 'custom'
@@ -131,7 +153,7 @@ export default {
             prop: 'actions',
             label: i18n.t('Actions'),
             align: 'center',
-            width: '100px',
+            width: this.dynamicActionWidth,
             formatter: ActionsFormatter,
             fixed: 'right',
             formatterArgs: {}
@@ -187,7 +209,7 @@ export default {
           break
         case 'datetime':
           col.formatter = DateFormatter
-          col.width = '175px'
+          col.width = '155px'
           break
         case 'object_related_field':
           col.formatter = ObjectRelatedFormatter
@@ -419,13 +441,9 @@ export default {
       const minColumnsNames = _.get(this.iConfig, 'columnsShow.min', ['actions', 'id'])
         .filter(n => totalColumnsNames.includes(n))
 
-      // 应该显示的列
-      const _tableConfig = localStorage.getItem('tableConfig')
-        ? JSON.parse(localStorage.getItem('tableConfig'))
-        : {}
       let tableName = this.config.name || this.$route.name + '_' + newURL(this.config.url).pathname
       tableName = replaceAllUUID(tableName)
-      const configShowColumnsNames = _.get(_tableConfig[tableName], 'showColumns', null)
+      const configShowColumnsNames = this.objTableColumns.get(tableName)
       let showColumnsNames = configShowColumnsNames || defaultColumnsNames
       if (showColumnsNames.length === 0) {
         showColumnsNames = totalColumnsNames
@@ -472,17 +490,12 @@ export default {
       }
       this.popoverColumns.currentCols = columns
 
-      const _tableConfig = localStorage.getItem('tableConfig')
-        ? JSON.parse(localStorage.getItem('tableConfig'))
-        : {}
       let tableName = this.config.name || this.$route.name + '_' + newURL(url).pathname
       // 替换url中的uuid，避免同一个类型接口生成多个key，localStorage中的数据无法共用.
       tableName = replaceAllUUID(tableName)
 
-      _tableConfig[tableName] = {
-        'showColumns': columns
-      }
-      localStorage.setItem('tableConfig', JSON.stringify(_tableConfig))
+      this.objTableColumns.set(tableName, columns)
+
       this.filterShowColumns()
     },
     filterChange(filters) {

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

@@ -75,7 +75,8 @@ export default {
     },
     handleUpdate: {
       type: Function,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -152,10 +153,12 @@ export default {
 
   .title {
     text-align: left;
-    font-weight: 500;
+    font-weight: 600;
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
+    font-size: 1.1em;
+    color: #555555;
   }
 
   .panel-content {

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

@@ -41,11 +41,15 @@ export default {
 
   .item-label {
     text-align: left;
+    display: inline-block;
+    width: 35%;
   }
+
   .item-label::after {
     content: ':';
     margin-left: 1px;
   }
+
   .text-info {
     @include textOverflow;
   }

src/components/Table/CardTable/index.vue

@@ -379,7 +379,7 @@ export default {
 }
 
 .el-col {
-  min-width: 330px;
+  //min-width: 330px; 设置完后，remote app 列表会有问题
 }
 
 .no-data {

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

@@ -7,14 +7,14 @@
     <template v-else>
       <el-table
         ref="table"
-        v-loading="loading"
+        v-loading="tableLoading"
         :data="data"
         :row-class-name="rowClassName"
         v-bind="tableAttrs"
         @select="selectStrategy.onSelect"
         v-on="$listeners"
         @selection-change="selectStrategy.onSelectionChange"
-        @select-all="selectStrategy.onSelectAll($event, canSelect)"
+        @select-all="handleSelectAll($event, canSelect)"
         @sort-change="onSortChange"
       >
         <!--TODO 不用jsx写, 感觉template逻辑有点不清晰了-->
@@ -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"
@@ -749,7 +749,7 @@ export default {
       page: defaultFirstPage,
       // https://github.com/ElemeFE/element/issues/1153
       total: null,
-      loading: false,
+      tableLoading: false,
       // 多选项的数组
       selected: [],
 
@@ -940,11 +940,11 @@ export default {
     },
     getListFromStaticData({ loading = true } = {}) {
       if (loading) {
-        this.loading = true
+        this.tableLoading = true
       }
       if (!this.hasPagination) {
         this.data = this.totalData
-        this.loading = false
+        this.tableLoading = false
         if (this.isTree) {
           this.data = this.tree2Array(this.data, this.expandAll)
         }
@@ -957,7 +957,7 @@ export default {
       const end = (page + pageOffset) * this.size
       this.$log.debug(`page: ${page}, size: ${this.size}, start: ${start}, end: ${end}`)
       this.data = this.totalData.slice(start, end)
-      this.loading = false
+      this.tableLoading = false
       this.data = this.tree2Array(this.data, this.expandAll)
       return this.data
     },
@@ -983,7 +983,7 @@ export default {
         queryUtil.stringify(query, '=', '&')
 
       // 请求开始
-      this.loading = loading
+      this.tableLoading = loading
 
       // 存储query记录, 便于后面恢复
       if (this.saveQuery) {
@@ -1023,7 +1023,7 @@ export default {
             this.total === 0 &&
             (_isEmpty(formValue) || _values(formValue).every(isFalsey))
 
-          this.loading = false
+          this.tableLoading = false
           /**
            * 请求返回, 数据更新后触发
            * @property {object} data - table的数据
@@ -1043,7 +1043,7 @@ export default {
            */
           this.$emit('error', err)
           this.total = 0
-          this.loading = false
+          this.tableLoading = false
         })
     },
     search(attrs, reset) {
@@ -1106,6 +1106,14 @@ export default {
       this.page = val
       this.getList()
     },
+    handleSelectAll(selection, selectable = () => true) {
+      this.tableLoading = true
+      try {
+        this.selectStrategy.onSelectAll(selection, selectable)
+      } finally {
+        this.tableLoading = false
+      }
+    },
     /**
      * 切换某一行的选中状态，如果使用了第二个参数，则是设置这一行选中与否
      *

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

@@ -69,12 +69,48 @@ class StrategyPersistSelection extends StrategyAbstract {
    * 用户切换当前页的多选
    */
   onSelectAll(selection, selectable = () => true) {
-    const isSelected = !!selection.length
-    this.elDataTable.data.forEach(r => {
-      if (selectable(r)) {
-        this.toggleRowSelection(r, isSelected)
-      }
-    })
+    const { id, selected, data } = this.elDataTable
+    const selectableRows = data.filter(selectable)
+    // const isSelected = !!selection.length
+
+    // 创建已选择项的 id 集合，用于快速查找
+    const selectedIds = new Set(selected.map(r => r[id]))
+    const currentPageIds = new Set(selectableRows.map(row => row[id]))
+
+    // 前页面的选中状态
+    const currentPageSelectedCount = selectableRows.filter(row =>
+      selectedIds.has(row[id])
+    ).length
+
+    // 判断是全选还是取消全选
+    const shouldSelectAll = currentPageSelectedCount < selectableRows.length
+
+    this.elTable.clearSelection()
+
+    if (shouldSelectAll) {
+      selectableRows.forEach(row => {
+        if (!selectedIds.has(row[id])) selected.push(row)
+
+        this.elTable.toggleRowSelection(row, true)
+
+        // ! 这里需要触发事件，否则在 el-table 中无法触发 selection-change 事件
+        this.elDataTable.$emit('toggle-row-selection', true, row)
+      })
+    } else {
+      const newSelected = []
+
+      selected.forEach(row => {
+        if (!currentPageIds.has(row[id])) {
+          newSelected.push(row)
+        } else {
+          this.elDataTable.$emit('toggle-row-selection', false, row)
+        }
+      })
+
+      this.elDataTable.selected = newSelected
+    }
+
+    this.elDataTable.$emit('selection-change', this.elDataTable.selected)
   }
   /**
    * toggleRowSelection和clearSelection管理elDataTable的selected数组
@@ -83,14 +119,17 @@ class StrategyPersistSelection extends StrategyAbstract {
   toggleRowSelection(row, isSelected) {
     const { id, selected } = this.elDataTable
     const foundIndex = selected.findIndex(r => r[id] === row[id])
+
     if (typeof isSelected === 'undefined') {
       isSelected = foundIndex <= -1
     }
+
     if (isSelected && foundIndex === -1) {
       selected.push(row)
     } else if (!isSelected && foundIndex > -1) {
       selected.splice(foundIndex, 1)
     }
+
     this.elDataTable.$emit('toggle-row-selection', isSelected, row)
     this.updateElTableSelection()
   }
@@ -103,14 +142,17 @@ class StrategyPersistSelection extends StrategyAbstract {
    */
   updateElTableSelection() {
     const { data, id, selected } = this.elDataTable
-    // 历史勾选的行已经不在当前页了，所以要将当前页的行数据和selected合并
-    const mergeData = _.uniqWith([...data, ...selected], _.isEqual)
-    mergeData.forEach(r => {
-      const isSelected = !!selected.find(r2 => r[id] === r2[id])
-      if (!this.elTable) {
-        return
+    const selectedIds = new Set(selected.map(r => r[id]))
+
+    this.elTable.clearSelection()
+
+    data.forEach(row => {
+      const shouldBeSelected = selectedIds.has(row[id])
+      if (!this.elTable) return
+
+      if (shouldBeSelected) {
+        this.elTable.toggleRowSelection(row, true)
       }
-      this.elTable.toggleRowSelection(r, isSelected)
     })
   }
 }

src/components/Table/DataTable/index.vue

@@ -10,6 +10,7 @@
 </template>
 
 <script>
+import { newURL, ObjectLocalStorage } from '@/utils/common'
 import { default as ElDatableTable } from './compenents/el-data-table'
 import { mapGetters } from 'vuex'
 
@@ -27,7 +28,11 @@ export default {
   },
   data() {
     const userTableActions = this.config.tableActions || {}
+    const objTableSize = new ObjectLocalStorage('tableSize')
+    const pathName = newURL(this.config.url).pathname
     return {
+      objTableSize: objTableSize,
+      pathName: pathName,
       defaultConfig: {
         axiosConfig: {
           raw: 1,
@@ -70,7 +75,7 @@ export default {
         },
         pageCount: 5,
         paginationLayout: 'total, sizes, prev, pager, next',
-        paginationSize: JSON.parse(localStorage.getItem('paginationSize')) || 15,
+        paginationSize: objTableSize.get(pathName) || 15,
         paginationSizes: [15, 30, 50, 100],
         paginationBackground: true,
         transformQuery: query => {
@@ -107,7 +112,7 @@ export default {
       return this.$refs.table
     },
     tableConfig() {
-      const tableDefaultConfig = this.defaultConfig
+      const tableDefaultConfig = this.defaultConfig || {}
       let tableAttrs = tableDefaultConfig.tableAttrs
       if (this.config.tableAttrs) {
         tableAttrs = Object.assign(tableAttrs, this.config.tableAttrs)
@@ -157,13 +162,7 @@ export default {
       this.$emit('loaded')
     },
     handleSizeChange(val) {
-      localStorage.setItem('paginationSize', val)
-      this.$store.commit('table/SET_TABLE_CONFIG',
-        {
-          key: 'paginationSize',
-          value: val
-        }
-      )
+      this.objTableSize.set(this.pathName, val)
     }
   }
 }

src/components/Table/DrawerListTable/PageDrawer.vue

@@ -1,24 +1,24 @@
 <template>
-  <el-drawer
+  <Drawer
+    :component="component"
+    :component-listeners="listener"
     :size="drawerSize"
     :title="title"
     :visible.sync="iVisible"
     append-to-body
     class="form-drawer"
     destroy-on-close
-  >
-    <component
-      :is="component"
-      v-bind="props"
-      @close="closeDrawer"
-      v-on="$listeners"
-      @close-drawer="iVisible=false"
-    />
-  </el-drawer>
+    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,
@@ -41,7 +41,23 @@ export default {
       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
@@ -49,38 +65,19 @@ export default {
       set(val) {
         this.$emit('update:visible', val)
       }
-    },
-    drawerSize() {
-      const width = window.innerWidth
-      if (width >= 768) return '800px'
-      return '90%'
     }
   },
   methods: {
     closeDrawer() {
       this.iVisible = false
+      // 关闭 Drawer 后，清空所有 params 参数
+      Reflect.ownKeys(this.$route.params).forEach(key => {
+        Reflect.deleteProperty(this.$route.params, key)
+      })
     }
   }
 }
 </script>
 
 <style lang="scss" scoped>
-.form-drawer {
-  /* 可自定义样式 */
-
-  ::v-deep {
-    .el-card.ibox {
-      //border: none;
-    }
-
-    .el-drawer__header {
-      //border-bottom: 1px solid #EBEEF5;
-      margin-bottom: 10px;
-      padding-top: 10px;
-      font-size: 16px;
-      font-weight: 500;
-      color: var(--color-text-primary);
-    }
-  }
-}
 </style>

src/components/Table/DrawerListTable/index.vue

@@ -0,0 +1,239 @@
+<template>
+  <div>
+    <ListTable
+      ref="ListTable"
+      :header-actions="iHeaderActions"
+      :table-config="iTableConfig"
+      v-bind="$attrs"
+    />
+    <PageDrawer
+      :action="action"
+      :class="[action]"
+      :component="drawerComponent"
+      :props="drawerProps"
+      :title="drawerTitle"
+      :visible.sync="drawerVisible"
+      class="page-drawer"
+    />
+  </div>
+</template>
+
+<script>
+import ListTable from '../ListTable'
+import PageDrawer from './PageDrawer.vue'
+import { setUrlParam, toLowerCaseExcludeAbbr, toSentenceCase } from '@/utils/common'
+import { mapGetters } from 'vuex'
+
+const drawerType = [String, Function]
+
+export default {
+  name: 'GenericListPage',
+  components: {
+    ListTable, PageDrawer
+  },
+  props: {
+    detailDrawer: {
+      type: drawerType,
+      default: ''
+    },
+    createDrawer: {
+      type: drawerType,
+      default: ''
+    },
+    updateDrawer: {
+      type: drawerType,
+      default: ''
+    },
+    tableConfig: {
+      type: Object,
+      required: true
+    },
+    headerActions: {
+      type: Object,
+      required: true
+    },
+    drawerProps: {
+      type: Object,
+      default: () => ({})
+    },
+    reloadOrderQuery: {
+      type: String,
+      default: '-date_updated'
+    },
+    resource: {
+      type: String,
+      default: ''
+    },
+    getDrawerTitle: {
+      type: Function,
+      default: null
+    }
+  },
+  data() {
+    return {
+      title: '',
+      action: '',
+      visible: false,
+      drawerVisible: false,
+      drawerComponent: ''
+    }
+  },
+  computed: {
+    ...mapGetters(['inDrawer']),
+    drawerTitle() {
+      return this.getDefaultTitle()
+    },
+    iHeaderActions() {
+      const actions = this.headerActions
+      if (!actions.onCreate) {
+        actions.onCreate = this.onCreate
+      }
+      return actions
+    },
+    iTableConfig() {
+      const config = {
+        ...this.tableConfig
+      }
+      const actionMap = {
+        'columnsMeta.actions.formatterArgs.onUpdate': this.onUpdate,
+        'columnsMeta.actions.formatterArgs.onClone': this.onClone,
+        'columnsMeta.name.formatterArgs.drawer': true,
+        'columnsMeta.name.formatterArgs.drawerComponent': this.detailDrawer
+      }
+      for (const [key, value] of Object.entries(actionMap)) {
+        if (_.get(config, key)) {
+          continue
+        }
+        _.set(config, key, value)
+      }
+      const columnsMeta = config.columnsMeta
+      for (const value of Object.values(columnsMeta)) {
+        if (
+          value.formatter && value.formatter.name === 'AmountFormatter' &&
+          value.formatterArgs && !value.formatterArgs.drawer
+        ) {
+          value.formatterArgs.drawer = this.detailDrawer
+        }
+      }
+      return config
+    }
+  },
+  watch: {
+    inDrawer(val) {
+      if (!this.drawerVisible) {
+        return
+      }
+      if (!val) {
+        this.drawerVisible = false
+        this.reloadTable()
+      }
+    }
+  },
+  methods: {
+    getDefaultTitle() {
+      let title = this.title
+      let dispatchAction = ''
+      if (!title && this.resource) {
+        title = this.resource
+      }
+      if (!title) {
+        title = this.$route.meta?.title
+        title = title.replace('List', '').replace('列表', '')
+        title = _.trimEnd(title, 's')
+      }
+      if (!title) {
+        title = this.$t('NoTitle')
+      }
+      const action = this.action
+      if (action === 'clone' || action === 'create') {
+        dispatchAction = this.$t('Create')
+      } else if (action === 'update') {
+        dispatchAction = this.$t('Update')
+      }
+      title = dispatchAction + this.$t('WordSep') + toLowerCaseExcludeAbbr(title)
+      return title
+    },
+    getDefaultDrawer(action) {
+      const route = this.$route.name
+      const actionRouteName = route.replace('List', toSentenceCase(action))
+      return this.getRouteNameComponent(actionRouteName, action)
+    },
+    getRouteNameComponent(name, action) {
+      const route = { name: name }
+      if (action === 'detail' || action === 'update') {
+        route.params = { id: '1' }
+      }
+      const routes = this.$router.resolve(route)
+      if (!routes) {
+        return
+      }
+      const matched = routes.resolved.matched.filter(item => item.name === name && item.components)
+      if (matched.length === 0) {
+        return
+      }
+
+      if (matched[0] && matched[0].components?.default) {
+        const component = matched[0].components.default
+        return component
+      }
+    },
+    async showDrawer(action) {
+      this.action = action
+      if (action === 'create') {
+        this.drawerComponent = this.createDrawer
+      } else if (action === 'update') {
+        this.drawerComponent = this.updateDrawer || this.createDrawer
+      } else if (action === 'detail') {
+        this.drawerComponent = this.detailDrawer
+      } else if (action === 'clone') {
+        this.drawerComponent = this.createDrawer || this.getDefaultDrawer('create')
+      } else {
+        this.drawerComponent = this.createDrawer
+      }
+      if (!this.drawerComponent) {
+        this.drawerComponent = this.getDefaultDrawer(action)
+      }
+      if (this.getDrawerTitle) {
+        const actionMeta = await this.$store.getters['common/drawerActionMeta']
+        this.title = this.getDrawerTitle({ action, ...actionMeta })
+      }
+      this.drawerVisible = true
+    },
+    onCreate(meta) {
+      if (!meta) {
+        meta = {}
+      }
+      this.$store.dispatch('common/setDrawerActionMeta', {
+        action: 'create', ...meta
+      }).then(() => {
+        this.showDrawer('create')
+      })
+    },
+    reloadTable() {
+      if (this.reloadOrderQuery) {
+        this.iTableConfig.url = setUrlParam(this.iTableConfig.url, 'order', this.reloadOrderQuery)
+      }
+      this.$refs.ListTable.reloadTable()
+    },
+    onClone({ row, col }) {
+      this.$store.dispatch('common/setDrawerActionMeta', {
+        action: 'clone', row: row, col: col, id: row.id
+      }).then(() => {
+        this.showDrawer('clone')
+      })
+    },
+    onUpdate({ row, col }) {
+      this.$route.params.id = row.id
+      this.$route.params.action = 'update'
+      this.$store.dispatch('common/setDrawerActionMeta', {
+        action: 'update', row: row, col: col, id: row.id
+      }).then(() => {
+        this.showDrawer('update')
+      })
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+</style>

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

@@ -1,16 +1,10 @@
 <template>
-  <div>
-    <DataActions
-      v-if="hasLeftActions && iActions.length > 0"
-      :actions="iActions"
-      class="header-action"
-      v-bind="$attrs"
-    />
-
-    <Drawer v-if="showDrawer" @close-drawer="handleCloseDrawer">
-      <component :is="dynamicTemplateComponent" />
-    </Drawer>
-  </div>
+  <DataActions
+    v-if="hasLeftActions && iActions.length > 0"
+    :actions="iActions"
+    class="header-action"
+    v-bind="$attrs"
+  />
 </template>
 
 <script>
@@ -19,9 +13,7 @@ import { createSourceIdCache } from '@/api/common'
 import { getErrorResponseMsg } from '@/utils/common'
 
 import i18n from '@/i18n/i18n'
-import Drawer from '@/components/Drawer/index.vue'
 import DataActions from '@/components/DataActions/index.vue'
-import AccountTemplateCreate from '@/views/accounts/AccountTemplate/AccountTemplateCreateUpdate.vue'
 
 const defaultTrue = { type: [Boolean, Function, String], default: true }
 const defaultFalse = { type: [Boolean, Function, String], default: false }
@@ -29,9 +21,7 @@ const defaultFalse = { type: [Boolean, Function, String], default: false }
 export default {
   name: 'LeftSide',
   components: {
-    Drawer,
-    DataActions,
-    AccountTemplateCreate
+    DataActions
   },
   props: {
     hasLeftActions: defaultTrue,
@@ -43,6 +33,10 @@ export default {
         return this.$route.name?.replace('List', 'Create')
       }
     },
+    beforeCreate: {
+      type: Function,
+      default: () => null
+    },
     onCreate: {
       type: Function,
       default: null
@@ -90,6 +84,10 @@ export default {
       type: String,
       default: ''
     },
+    moreActionsType: {
+      type: String,
+      default: null
+    },
     moreCreates: {
       type: Object,
       default: null
@@ -102,14 +100,12 @@ export default {
   data() {
     const vm = this
     return {
-      showDrawer: false,
-      dynamicTemplateComponent: null,
       defaultMoreActions: [
         {
           title: this.$t('DeleteSelected'),
           name: 'actionDeleteSelected',
           has: this.hasBulkDelete,
-          icon: 'fa fa-trash-o',
+          icon: 'trash',
           can({ selectedRows }) {
             return selectedRows.length > 0 && vm.canBulkDelete
           },
@@ -142,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) {
@@ -154,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)
@@ -195,7 +199,8 @@ export default {
       return {
         name: 'moreActions',
         title: this.moreActionsTitle || this.$t('MoreActions'),
-        dropdown: dropdown
+        dropdown: dropdown,
+        type: this.moreActionsType
       }
     },
     hasSelectedRows() {
@@ -224,20 +229,9 @@ export default {
         const { href } = this.$router.resolve(route)
         window.open(href, '_blank')
       } else {
-        if (route.isPam) {
-          this.showDrawer = true
-          this.dynamicTemplateComponent = route.name
-
-          return
-        }
-
         this.$router.push(route)
       }
     },
-    handleCloseDrawer() {
-      this.showDrawer = false
-      this.dynamicTemplateComponent = null
-    },
     defaultBulkDeleteCallback({ selectedRows, reloadTable }) {
       const msg = this.$t('DeleteWarningMsg') + ' ' + selectedRows.length + ' ' + this.$t('Rows') + ' ?'
       const title = this.$tc('Info')
@@ -277,16 +271,5 @@ export default {
 }
 </script>
 
-<style scoped lang="scss">
-::v-deep .ibox {
-  height: 100% !important;
-  margin: unset !important;
-  border: unset !important;
-
-  .el-card__body {
-    padding-top: unset !important;
-    padding-bottom: unset !important;
-    height: 100% !important;
-  }
-}
+<style lang="scss" scoped>
 </style>

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

@@ -88,11 +88,9 @@ export default {
       }
     }
   },
-  mounted() {
-  },
   methods: {
     async getCount(item) {
-      if (item.count) {
+      if (item.count || item.count === 0) {
         return item.count
       }
       if (!item.filter) {
@@ -104,7 +102,6 @@ export default {
       }
       const res = await this.$axios.get(url, { raw: 1 })
       item.count = res.data.count
-      console.log('............get count: ', item.count)
       return item.count
     },
     cleanSummary() {
@@ -160,9 +157,9 @@ export default {
         })
       }
       option.active = !option.active
-      this.activeFilters.forEach(item => {
-        this.filtered = { ...item.filter }
-      })
+      this.filtered = this.activeFilters.reduce((acc, item) => {
+        return { ...acc, ...item.filter }
+      }, {})
       this.$emit('filter', this.filtered)
     }
   }
@@ -233,11 +230,26 @@ export default {
 
        .item {
          display: inline-block;
-         margin-right: 5px;
+         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;
@@ -245,7 +257,6 @@ export default {
 
          &.active {
            color: var(--color-primary);
-           font-weight: 500;
 
            i {
              visibility: visible;

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

@@ -40,8 +40,8 @@ export default {
     handleExportClick: {
       type: Function,
       default: function({ selectedRows }) {
-        const { exportOptions, tableUrl } = this
-        const url = exportOptions?.url ? exportOptions.url : tableUrl
+        // const { exportOptions, tableUrl } = this
+        const url = this.iExportOptions.url
         this.dialogExportVisible = true
         this.$nextTick(() => {
           this.$eventBus.$emit('showExportDialog', { selectedRows, url, name: this.name })
@@ -118,7 +118,7 @@ export default {
         {
           name: 'actionSetting',
           icon: 'system-setting',
-          tip: this.$t('TableSetting'),
+          tip: this.$t('ListPreference'),
           has: this.hasColumnSetting,
           callback: this.handleTableSettingClick.bind(this)
         },
@@ -167,7 +167,18 @@ export default {
       })
     },
     iExportOptions() {
-      return assignIfNot(this.exportOptions, { url: this.tableUrl })
+      /**
+       *  原本是使用 assignIfNot 此函数内部使用 partialRight, 该函数
+       *  只在目标对象的属性未定义时才从源对象复制属性，如果目标对象已经有值，则保留原值
+       *  那如果首次点击的树节点，那么此时 url 就会被确定，后续点击的树节点，那么 url 就将不会携带节点信息
+       *
+       */
+      // return assignIfNot(this.exportOptions, { url: this.tableUrl })
+
+      return {
+        ...this.exportOptions,
+        url: this.tableUrl
+      }
     }
   },
   methods: {

src/components/Table/ListTable/index.vue

@@ -43,6 +43,7 @@ import Emitter from '@/mixins/emitter'
 import AutoDataTable from '../AutoDataTable/index.vue'
 import QuickFilter from './TableAction/QuickFilter.vue'
 import { getDayEnd, getDaysAgo } from '@/utils/time'
+import { ObjectLocalStorage } from '@/utils/common'
 
 export default {
   name: 'ListTable',
@@ -100,13 +101,29 @@ export default {
       extraQuery: extraQuery,
       actionInit: this.headerActions.has === false,
       initQuery: {},
-      filterExpand: true
+      tablePath: new URL(this.tableConfig.url || '', 'http://127.0.0.1').pathname,
+      objStorage: new ObjectLocalStorage('filterExpand'),
+      iFilterExpand: null
     }
   },
   computed: {
     ...mapGetters(['currentOrgIsRoot']),
+    filterExpand: {
+      get() {
+        if (this.iFilterExpand !== null) {
+          return this.iFilterExpand
+        }
+        return this.objStorage.get(this.tablePath)
+      },
+      set(val) {
+        this.iFilterExpand = val
+        this.objStorage.set(this.tablePath, val)
+      }
+    },
     iHasQuickFilter() {
-      const has = this.quickFilters && this.quickFilters.length > 0
+      const has =
+        (this.quickFilters && this.quickFilters.length > 0) ||
+        (this.quickSummary && this.quickSummary.length > 0)
       return !!has
     },
     dataTable() {
@@ -334,6 +351,7 @@ export default {
     background-color: rgb(0, 0, 0, 0.08) !important;
   }
 }
+
 .table-content {
   margin-top: 10px;
 

src/components/Table/TableFormatters/AccountConnectFormatter.vue

@@ -0,0 +1,140 @@
+<template>
+  <el-dropdown
+    size="small"
+    trigger="hover"
+    :show-timeout="500"
+    @command="handleCommand"
+    @visible-change="visibleChange"
+  >
+    <el-button
+      plain
+      size="mini"
+      type="primary"
+      @click="handlePamConnect"
+    >
+      <i :class="IButtonIcon" />
+    </el-button>
+    <el-dropdown-menu slot="dropdown">
+      <el-dropdown-item command="Title" disabled>
+        {{ ITitleText }}
+      </el-dropdown-item>
+      <el-dropdown-item divided />
+      <el-dropdown-item
+        v-for="protocol in protocols"
+        :key="protocol.id"
+        :command="protocol.name"
+      >
+        {{ protocol.name }}
+      </el-dropdown-item>
+    </el-dropdown-menu>
+  </el-dropdown>
+</template>
+
+<script>
+import BaseFormatter from './base.vue'
+
+export default {
+  name: 'AccountConnectFormatter',
+  extends: BaseFormatter,
+  props: {
+    buttonIcon: {
+      type: String,
+      default: 'fa fa-desktop'
+    },
+    titleText: {
+      type: String,
+      default: ''
+    },
+    url: {
+      type: String,
+      default: ''
+    },
+    connectUrlTemplate: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      protocols: []
+    }
+  },
+  computed: {
+    IButtonIcon() {
+      return this.buttonIcon
+    },
+    ITitleText() {
+      return this.titleText || this.$t('SelectProtocol')
+    }
+  },
+  methods: {
+    handleCommand(protocol) {
+      if (protocol === 'Title') return
+
+      this.formatterArgs.setMapItem(this.row.id, protocol)
+      this.handleWindowOpen(this.row, protocol)
+    },
+    visibleChange(visible) {
+      if (visible) {
+        this.getProtocols(this.row.asset.id)
+      }
+    },
+    handleWindowOpen(row, protocol) {
+      const url = this.formatterArgs.connectUrlTemplate(row) + `${protocol}`
+
+      this.$nextTick(() => {
+        window.open(url, '_blank')
+      })
+    },
+    async handlePamConnect() {
+      const protocolMap = this.$store.getters.protocolMap
+
+      if (protocolMap.has(this.row.id)) {
+        // 直连
+        const protocol = protocolMap.get(this.row.id)
+        this.handleWindowOpen(this.row, protocol)
+      } else {
+        try {
+          const url = this.formatterArgs.url.replace('{id}', this.row.asset.id)
+          const res = await this.$axios.get(url)
+
+          if (res && res.protocols.length > 0) {
+            const protocol = res.protocols[0]
+
+            this.formatterArgs.setMapItem(this.row.id, protocol.name)
+            this.handleWindowOpen(this.row, protocol.name)
+          }
+        } catch (e) {
+          throw new Error(`Error getting protocols: ${e}`)
+        }
+      }
+    },
+    async getProtocols(assetId) {
+      try {
+        const url = this.formatterArgs.url.replace('{id}', assetId)
+        const res = await this.$axios.get(url)
+
+        if (res) this.protocols = res.protocols
+      } catch (e) {
+        throw new Error(`Error getting protocols: ${e}`)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+.el-dropdown-menu__item.is-disabled {
+  font-weight: 500;
+  color: var(--el-text-color-secondary);
+}
+
+::v-deep .el-dropdown-menu__item {
+  transition: height 0.3s ease-in-out, padding 0.3s ease-in-out;
+  overflow: hidden;
+}
+
+::v-deep .el-dropdown-menu {
+  transition: min-height 0.3s ease-in-out;
+}
+</style>

src/components/Table/TableFormatters/ActionsFormatter.vue

@@ -23,9 +23,7 @@ const defaultPerformDelete = function({ row, col }) {
 
 const defaultUpdateCallback = function({ row, col }) {
   const id = row.id
-
   let route = { params: { id: id }}
-
   const updateRoute = this.colActions.updateRoute
 
   if (typeof updateRoute === 'object') {
@@ -226,7 +224,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
 .table-actions {
   ::v-deep {
     .el-icon-arrow-down {

src/components/Table/TableFormatters/ChoicesFormatter.vue

@@ -12,8 +12,42 @@
 </template>
 
 <script>
+import i18n from '@/i18n/i18n'
 import BaseFormatter from './base.vue'
 
+const formatterArgsDefault = {
+  faChoices: {
+    true: 'fa-check-circle',
+    false: 'fa-times-circle'
+  },
+  classChoices: {
+    true: 'text-primary',
+    false: 'text-danger'
+  },
+  textChoices: {
+    true: i18n.t('Yes'),
+    false: i18n.t('No')
+  },
+  getKey({ row, cellValue }) {
+    return (cellValue && typeof cellValue === 'object') ? cellValue.value : cellValue
+  },
+  getText({ row, cellValue }) {
+    const key = this.getKey({ row, cellValue })
+    return (cellValue && typeof cellValue === 'object') ? cellValue.label : this.textChoices[key] || cellValue
+  },
+  getIcon({ row, cellValue }) {
+    const key = this.getKey({ row, cellValue })
+    return this.faChoices[key]
+  },
+  hasTips: false,
+  showIcon: true,
+  showText: true,
+  showFalse: true,
+  getTips: ({ row, cellValue }) => {
+    return cellValue
+  }
+}
+
 export default {
   name: 'ChoicesFormatter',
   extends: BaseFormatter,
@@ -21,51 +55,22 @@ export default {
     formatterArgsDefault: {
       type: Object,
       default() {
-        return {
-          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(

src/components/Table/TableFormatters/CopyableFormatter.vue

@@ -1,6 +1,7 @@
 <script>
 import BaseFormatter from './base.vue'
 import { copy } from '@/utils/common'
+
 export default {
   name: 'CopyableFormatter',
   extends: BaseFormatter,
@@ -10,7 +11,8 @@ export default {
       default() {
         return {
           shadow: false,
-          getText: ({ cellValue }) => cellValue
+          getText: ({ cellValue }) => cellValue,
+          iconPosition: 'right'
         }
       }
     }
@@ -27,6 +29,9 @@ export default {
       } else {
         return this.cellValue
       }
+    },
+    iconPosition() {
+      return this.formatterArgs.iconPosition
     }
   },
   methods: {
@@ -40,11 +45,18 @@ export default {
 
 <template>
   <span class="copyable">
-    {{ iCellValue }} <i class="el-icon-copy-document copy" @click="copy()" />
+    <span :style="{ order: 2 }">{{ iCellValue }}</span>
+    <i :style="{ order: iconPosition === 'left' ? 0 : 3 } " class="el-icon-copy-document copy" @click="copy()" />
   </span>
 </template>
 
 <style lang="scss" scoped>
+.copyable {
+  display: flex;
+  align-items: center;
+  gap: 4px; /* 元素间距 */
+}
+
 .copy {
   cursor: pointer;
 

src/components/Table/TableFormatters/DetailFormatter.vue

@@ -12,14 +12,24 @@
         {{ 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,15 +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 != null ? cellValue : row.name
+          },
+          getDrawerTitle: null,
           getIcon({ col, row, cellValue }) {
             return null
           }
@@ -46,11 +60,13 @@ export default {
   data() {
     const formatterArgs = Object.assign(this.formatterArgsDefault, this.col.formatterArgs)
     return {
-      linkClicked: false,
-      showTableDetailDrawer: false,
       drawerTitle: '',
+      linkClicked: false,
+      drawerComponent: '',
+      showTableDetailDrawer: false,
       currentTemplate: null,
-      formatterArgs: formatterArgs
+      formatterArgs: formatterArgs,
+      drawerVisible: false
     }
   },
   computed: {
@@ -58,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() {
@@ -74,29 +91,101 @@ export default {
         row: this.row,
         cellValue: this.cellValue
       })
+    },
+    callbackArgs() {
+      return {
+        col: this.col,
+        row: this.row,
+        cellValue: this.cellValue
+      }
     }
   },
   methods: {
-    handleClick() {
-      if (this.formatterArgs.onClick) {
-        this.formatterArgs.onClick({
+    getResource() {
+      const route = this.resolveRoute()
+      if (!route) {
+        return
+      }
+      const resource = route.meta.title || route.name
+      return resource.replace(' details', '').replace('详情', '')
+    },
+    getDrawerTitle() {
+      let drawerTitle = ''
+      if (this.formatterArgs?.getTitle && typeof this.formatterArgs.getTitle === 'function') {
+        drawerTitle = this.formatterArgs.getTitle({
           col: this.col,
           row: this.row,
           cellValue: this.cellValue
         })
-      } else {
-        this.goDetail()
       }
+      let title = this.cellValue?.name || drawerTitle
+      const resource = this.getResource()
+      if (resource) {
+        title = `${resource}: ${title}`
+      }
+      return title
+    },
+    resolveRoute() {
+      const route = this.getDetailRoute()
+      const routes = this.$router.resolve(route)
+      if (!routes) {
+        return
+      }
+      const matched = routes.resolved.matched.filter(item => item.name === route.name && item.components)
+      if (matched.length === 0) {
+        return
+      }
+      if (matched[0] && matched[0].components?.default) {
+        return matched[0]
+      }
+    },
+    getRouteComponent() {
+      const route = this.resolveRoute()
+      if (route) {
+        return route.components.default
+      }
+    },
+    showDrawer() {
+      if (this.formatterArgs.drawerComponent) {
+        this.drawerComponent = this.formatterArgs.drawerComponent
+      } else {
+        this.drawerComponent = this.getRouteComponent()
+      }
+      const route = this.getDetailRoute()
+      if (route?.query?.tab) {
+        this.$cookie.set(route.name, route.query.tab, 1)
+        this.$route.query.tab = route.query.tab
+      }
+      const payload = {
+        action: 'detail',
+        row: this.row,
+        col: this.col,
+        id: route.params.id || this.row.id
+      }
+      this.$store.dispatch('common/setDrawerActionMeta', payload).then(() => {
+        this.drawerTitle = this.getDrawerTitle(payload)
+        this.drawerVisible = true
+      })
+    },
+    handleClick() {
+      if (this.formatterArgs.beforeClick) {
+        this.formatterArgs.beforeClick(this.callbackArgs)
+      }
+      if (this.formatterArgs.onClick) {
+        this.formatterArgs.onClick(this.callbackArgs)
+        return
+      }
+      if (this.formatterArgs.drawer) {
+        this.showDrawer()
+        return
+      }
+      this.goDetail()
     },
     getDetailRoute() {
       // const defaultRoute = this.$route.name.replace('List', 'Detail')
       let route = this.formatterArgs.route
       if (this.formatterArgs.getRoute && typeof this.formatterArgs.getRoute === 'function') {
-        route = this.formatterArgs.getRoute({
-          row: this.row,
-          col: this.col,
-          cellValue: this.cellValue
-        })
+        route = this.formatterArgs.getRoute(this.callbackArgs)
       }
       if (!route) {
         console.error('No route found')
@@ -104,7 +193,6 @@ export default {
       }
 
       let detailRoute = { replace: true }
-
       if (typeof route === 'string') {
         detailRoute.name = route
         detailRoute.params = { id: this.row.id }
@@ -133,7 +221,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .detail {
   display: inline-block;
   max-width: 100%;
@@ -161,4 +249,14 @@ export default {
 ::v-deep .go-back {
   display: none;
 }
+
+.detail-drawer {
+  ::v-deep {
+    .el-drawer__header {
+      border-bottom: none;
+      padding-bottom: 1px;
+    }
+  }
+}
+
 </style>

src/components/Table/TableFormatters/DiscoverConfirmFormatter.vue

@@ -128,7 +128,7 @@ export default {
           has: !this.row.present
         },
         {
-          name: 'add_account_after_change_password',
+          name: 'change_password_add',
           label: this.$t('Add account after changing password'),
           has: !this.row.present
         }

src/components/Table/TableFormatters/LabelsFormatter.vue

@@ -131,6 +131,16 @@ export default {
     }
   },
   computed: {},
+  watch: {
+    cellValue: {
+      handler(newValue) {
+        if (newValue) {
+          this.initial = this.formatterArgs.getLabels(this.cellValue)
+          this.iLabels = [...this.initial]
+        }
+      }
+    }
+  },
   mounted() {
     this.initial = this.formatterArgs.getLabels(this.cellValue)
     this.iLabels = [...this.initial]

src/components/Table/TableFormatters/SecretViewerFormatter.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="content">
-    <span v-if="realValue" :class="formatterArgs.actionLeft ? 'left' : 'right'" class="action">
+    <span :class="formatterArgs.actionLeft ? 'left' : 'right'" class="action">
       <template v-for="(item, index) in iActions">
         <el-tooltip
           v-if="item.has"

src/components/Table/TableFormatters/SwitchFormatter.vue

@@ -24,6 +24,9 @@ export default {
           },
           isDisplay(row) {
             return true
+          },
+          callback({ row }) {
+            return null
           }
         }
       }
@@ -49,10 +52,11 @@ export default {
   methods: {
     onChange(val) {
       this.$axios.patch(this.patchUrl, this.patchData).then(res => {
-        this.$message.success(this.$t('updateSuccessMsg'))
+        this.formatterArgs.callback(this.row)
+        this.$message.success(this.$t('UpdateSuccessMsg'))
       }).catch(err => {
         this.value = !val
-        this.$message.error(this.$t('updateErrorMsg' + ' ' + err))
+        this.$message.error(this.$t('UpdateErrorMsg' + ' ' + err))
       })
     }
   }

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>

src/components/Table/TableFormatters/index.js

@@ -9,6 +9,7 @@ import AccountShowFormatter from './GrantedAccountShowFormatter.vue'
 import SecretViewerFormatter from './SecretViewerFormatter.vue'
 import DialogDetailFormatter from './DialogDetailFormatter.vue'
 import EditableInputFormatter from './EditableInputFormatter.vue'
+import CopyableFormatter from './CopyableFormatter.vue'
 import StatusFormatter from './StatusFormatter.vue'
 import TagsFormatter from './TagsFormatter.vue'
 import LabelsFormatter from './LabelsFormatter.vue'
@@ -20,6 +21,7 @@ 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,
@@ -43,7 +45,9 @@ export default {
   SwitchFormatter,
   PlatformFormatter,
   AccountInfoFormatter,
-  DiscoverConfirmFormatter
+  CopyableFormatter,
+  DiscoverConfirmFormatter,
+  AccountConnectFormatter
 }
 
 export {
@@ -60,6 +64,7 @@ export {
   EditableInputFormatter,
   StatusFormatter,
   TagsFormatter,
+  CopyableFormatter,
   ObjectRelatedFormatter,
   TwoTabFormatter,
   ProtocolsFormatter,
@@ -68,5 +73,6 @@ export {
   SwitchFormatter,
   PlatformFormatter,
   DiscoverConfirmFormatter,
-  AccountInfoFormatter
+  AccountInfoFormatter,
+  AccountConnectFormatter
 }

src/components/Table/TagSearch/index.vue

@@ -17,7 +17,7 @@
       size="small"
       type="info"
       @click="handleTagClick(v,k)"
-      @close="handleTagClose(k)"
+      @close.stop="handleTagClose(k)"
     >
       <strong v-if="v.label">{{ v.label + ':' }}</strong>
       <span v-if="v.valueLabel">{{ v.valueLabel }}</span>
@@ -128,7 +128,7 @@ export default {
       deep: true
     },
     filterTags: {
-      handler() {
+      handler(newValue) {
         this.$emit('tag-search', this.filterMaps)
       },
       deep: true
@@ -137,6 +137,15 @@ export default {
       if (newValue === '' && oldValue !== '') {
         this.emptyCount = 1
       }
+    },
+    '$route'(to, from) {
+      if (from.query !== to.query) {
+        this.filterTags = {}
+        if (to.query && Object.keys(to.query).length) {
+          const routeFilter = this.checkInTableColumns(this.options)
+          this.filterTagSearch(routeFilter)
+        }
+      }
     }
   },
   mounted() {
@@ -202,9 +211,10 @@ export default {
             label: current.label,
             value: valueDecode
           }
+
           if (curChildren.length > 0) {
             for (const item of curChildren) {
-              if (valueDecode === item.value) {
+              if (valueDecode === String(item.value)) {
                 searchFieldOption.valueLabel = item.label
                 break
               }

src/components/Table/TreeTable/index.vue

@@ -58,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'
@@ -96,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() {

src/components/Tree/AutoDataZTree/index.vue

@@ -286,6 +286,9 @@ export default {
       if (!showMenu) {
         return
       }
+      if (!treeNode) {
+        return
+      }
       this.currentNode = treeNode
       this.currentNodeId = treeNode.meta.data.id
       // 屏蔽收藏资产

src/components/const.js

@@ -74,4 +74,3 @@ export const periodicMeta = {
   interval,
   crontab
 }
-

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'

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
+      }
+    }
+  }
+})

src/directive/index.js

@@ -1,2 +1,3 @@
 import './permission'
 import './async'
+import './drawer-drag'

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"
+}

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": ""
 }