perf: usign draw to create

fix: 修复创建账号时，资产没有默认值的问题

package.json

@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@babel/plugin-proposal-optional-chaining": "^7.13.12",
+    "@fontsource/open-sans": "^5.0.24",
     "@traptitech/markdown-it-katex": "^3.6.0",
     "@ztree/ztree_v3": "3.5.44",
     "axios": "0.21.1",

public/theme/element-extra.css

@@ -21,13 +21,13 @@
 }
 
 .el-alert--info.is-light {
-  background-color: light-9;
-  color: light-2;
+  background-color: rgba(255, 255, 255, 0.5);
+  color: info;
   border: 1px solid;
 }
 
 .el-alert--info .el-alert__description {
-  color: light-2;
+  color: info;
 }
 
 .el-pagination.is-background .el-pager li:not(.disabled):hover {
@@ -45,7 +45,6 @@
   border-radius: 2px;
   border: 1px solid #DCDFE6;
   font-size: 12px;
-  line-height: 26px;
   font-weight: 400;
 }
 
@@ -85,8 +84,12 @@
 
 
 td .el-button.el-button--mini {
-  padding: 1px 5px;
+  padding: 2px 4px;
   line-height: 1.5;
+
+  .el-icon--right {
+      margin-bottom: 2px;
+  }
 }
 
 .el-tabs__item.is-active, .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
@@ -191,7 +194,7 @@ td .el-button.el-button--mini {
 }
 
 .el-input--small .el-input__icon {
-  line-height: 34px;
+  line-height: 30px;
 }
 
 .option-group .el-select-dropdown__item.hover, .option-group .el-select-dropdown__item.selected {
@@ -313,11 +316,11 @@ td .el-button.el-button--mini {
 
 .el-tooltip__popper.is-light {
   background: #FFF;
+  max-width: 500px;
   border: 1px solid #e7eaec;
-}
-
-.el-tooltip__popper.is-light .popper__arrow {
-  border-bottom-color: #e7eaec !important;
+  box-shadow: 0 1.6px 3.6px 0 rgba(0, 0, 0, .132), 0 .3px .9px 0 rgba(0, 0, 0, .108);
+  line-height: 1.5;
+  padding: 10px;
 }
 
 .el-dialog__headerbtn .el-dialog__close {

src/components/ActionsGroup/index.vue

@@ -4,6 +4,7 @@
 
 <script>
 import DataActions from '@/components/DataActions'
+
 export default {
   name: 'ActionsGroup',
   components: {
@@ -24,9 +25,7 @@ export default {
     },
     moreActionsTitle: {
       type: String,
-      default() {
-        return this.$t('common.MoreActions')
-      }
+      default: ''
     },
     moreActionsPlacement: {
       type: String,
@@ -45,8 +44,9 @@ export default {
     iMoreAction() {
       const defaultBtn = {
         name: 'moreActions',
-        title: this.$t('common.MoreActions'),
+        title: '',
         type: 'primary',
+        icon: 'el-icon-more',
         plain: true
       }
       const btn = {

src/components/Apps/AccountCreateUpdateForm/const.js

@@ -10,7 +10,7 @@ export const accountFieldsMeta = (vm) => {
     assets: {
       rules: [Required],
       component: AssetSelect,
-      label: vm.$t('assets.Asset'),
+      label: vm.$t('Asset'),
       el: {
         multiple: false
       },
@@ -36,14 +36,15 @@ export const accountFieldsMeta = (vm) => {
     },
     on_invalid: {
       rules: [Required],
-      label: vm.$t('accounts.AccountPolicy'),
-      helpText: vm.$t('accounts.BulkCreateStrategy'),
+      label: vm.$t('AccountPolicy'),
+      helpText: vm.$t('AccountPolicyHelpText'),
+      helpTextAsTip: true,
       hidden: () => {
         return vm.platform || vm.asset
       }
     },
     name: {
-      label: vm.$t('common.Name'),
+      label: vm.$t('Name'),
       rules: [RequiredChange],
       on: {
         input: ([value], updateForm) => {
@@ -82,7 +83,7 @@ export const accountFieldsMeta = (vm) => {
       }
     },
     privileged: {
-      label: vm.$t('assets.Privileged'),
+      label: vm.$t('Privileged'),
       hidden: () => {
         return vm.addTemplate
       }
@@ -104,43 +105,42 @@ export const accountFieldsMeta = (vm) => {
       }
     },
     su_from_username: {
-      label: vm.$t('assets.UserSwitchFrom'),
+      label: vm.$t('UserSwitchFrom'),
       hidden: (formValue) => {
         return vm.platform || vm.asset || vm.addTemplate
       }
     },
     password: {
-      label: vm.$t('assets.Password'),
+      label: vm.$t('Password'),
       component: UpdateToken,
       hidden: (formValue) => {
-        console.log('formValue: ', formValue)
         return formValue.secret_type !== 'password' || vm.addTemplate
       }
     },
     ssh_key: {
-      label: vm.$t('assets.PrivateKey'),
+      label: vm.$t('PrivateKey'),
       component: UploadSecret,
       hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
     },
     passphrase: {
-      label: vm.$t('assets.Passphrase'),
+      label: vm.$t('Passphrase'),
       component: UpdateToken,
       hidden: (formValue) => formValue.secret_type !== 'ssh_key' || vm.addTemplate
     },
     token: {
-      label: vm.$t('assets.Token'),
+      label: vm.$t('Token'),
       component: UploadSecret,
       hidden: (formValue) => formValue.secret_type !== 'token' || vm.addTemplate
     },
     access_key: {
       id: 'access_key',
-      label: vm.$t('assets.AccessKey'),
+      label: vm.$t('AccessKey'),
       component: UploadSecret,
       hidden: (formValue) => formValue.secret_type !== 'access_key' || vm.addTemplate
     },
     api_key: {
       id: 'api_key',
-      label: vm.$t('assets.ApiKey'),
+      label: vm.$t('ApiKey'),
       component: UploadSecret,
       hidden: (formValue) => formValue.secret_type !== 'api_key' || vm.addTemplate
     },
@@ -152,7 +152,7 @@ export const accountFieldsMeta = (vm) => {
       }
     },
     push_now: {
-      helpText: vm.$t('accounts.AccountPush.WindowsPushHelpText'),
+      helpText: vm.$t('WindowsPushHelpText'),
       hidden: (formValue) => {
         const automation = vm.iPlatform.automation || {}
         return !automation.push_account_enabled ||
@@ -163,7 +163,7 @@ export const accountFieldsMeta = (vm) => {
       }
     },
     params: {
-      label: vm.$t('assets.PushParams'),
+      label: vm.$t('PushParams'),
       component: AutomationParamsForm,
       el: {
         method: vm.asset?.auto_config?.push_account_method
@@ -179,10 +179,10 @@ export const accountFieldsMeta = (vm) => {
       }
     },
     is_active: {
-      label: vm.$t('common.IsActive')
+      label: vm.$t('IsActive')
     },
     comment: {
-      label: vm.$t('common.Comment'),
+      label: vm.$t('Comment'),
       hidden: () => {
         return vm.addTemplate
       }

src/components/Apps/AccountCreateUpdateForm/index.vue

@@ -2,6 +2,7 @@
   <AutoDataForm
     v-if="!loading"
     ref="AutoDataForm"
+    :class="addTemplate? '': 'account-add'"
     v-bind="$data"
     @submit="confirm"
   />
@@ -58,14 +59,13 @@ export default {
       form: Object.assign({ 'on_invalid': 'error' }, this.account || {}),
       encryptedFields: ['secret'],
       fields: [
-        [this.$t('assets.Asset'), ['assets']],
-        [this.$t('accounts.AccountTemplate'), ['template']],
-        [this.$t('common.Basic'), ['name', 'username', 'privileged', 'su_from', 'su_from_username']],
-        [this.$t('assets.Secret'), [
+        [this.$t('AccountTemplate'), ['template']],
+        [this.$t('Basic'), ['assets', 'name', 'username', 'privileged', 'su_from', 'su_from_username']],
+        [this.$t('Secret'), [
           'secret_type', 'password', 'ssh_key', 'token',
           'access_key', 'passphrase', 'api_key'
         ]],
-        [this.$t('common.Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']]
+        [this.$t('Other'), ['push_now', 'params', 'on_invalid', 'is_active', 'comment']]
       ],
       fieldsMeta: accountFieldsMeta(this),
       hasSaveContinue: false
@@ -75,11 +75,18 @@ export default {
     try {
       await this.getPlatform()
       this.setSecretTypeOptions()
+      this.getDefaultAssets()
     } finally {
       this.loading = false
     }
   },
   methods: {
+    async getDefaultAssets() {
+      const assetId = this.$route.query.asset_id
+      if (assetId && !this.form.name) {
+        this.form.assets = [assetId]
+      }
+    },
     async getPlatform() {
       if (this.platform) {
         this.iPlatform = this.platform
@@ -93,23 +100,23 @@ export default {
     setSecretTypeOptions() {
       const choices = [
         {
-          label: this.$t('assets.Password'),
+          label: this.$t('Password'),
           value: 'password'
         },
         {
-          label: this.$t('assets.SSHKey'),
+          label: this.$t('SSHKey'),
           value: 'ssh_key'
         },
         {
-          label: this.$t('assets.Token'),
+          label: this.$t('Token'),
           value: 'token'
         },
         {
-          label: this.$t('assets.AccessKey'),
+          label: this.$t('AccessKey'),
           value: 'access_key'
         },
         {
-          label: this.$t('assets.ApiKey'),
+          label: this.$t('ApiKey'),
           value: 'api_key'
         }
       ]
@@ -145,5 +152,21 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
+.account-add {
+  >>> .el-form-item {
+    margin-bottom: 5px;
+    .help-block {
+      margin-bottom: 5px;
+    }
+  }
+  >>> .form-group-header {
+    .hr-line-dashed {
+      margin: 5px 0;
+    }
+    h3 {
+      margin-bottom: 10px;
+    }
+  }
+}
 </style>

src/components/Apps/AccountListTable/AccountCreateUpdate.vue

@@ -8,6 +8,7 @@
     :title="title"
     :visible.sync="iVisible"
     v-bind="$attrs"
+    width="900px"
     v-on="$listeners"
   >
     <AccountCreateUpdateForm
@@ -52,7 +53,7 @@ export default {
     title: {
       type: String,
       default: function() {
-        return this.$t('assets.AddAccount')
+        return this.$t('AddAccount')
       }
     }
   },
@@ -91,7 +92,7 @@ export default {
         data = formValue
         url = `/api/v1/accounts/accounts/bulk/`
         if (data.assets.length === 0) {
-          this.$message.error(this.$tc('assets.PleaseSelectAsset'))
+          this.$message.error(this.$tc('PleaseSelectAsset'))
           return
         }
       }
@@ -113,7 +114,7 @@ export 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('common.updateSuccessMsg'))
+        this.$message.success(this.$tc('UpdateSuccessMsg'))
       }).catch(error => this.setFieldError(error))
     },
     handleResult(resp, error) {
@@ -126,7 +127,7 @@ export default {
       }
       if (!bulkCreate) {
         if (!error) {
-          this.$message.success(this.$tc('common.createSuccessMsg'))
+          this.$message.success(this.$tc('CreateSuccessMsg'))
         } else {
           this.setFieldError(error)
         }

src/components/Apps/AccountListTable/AccountList.vue

@@ -27,7 +27,7 @@
       :account="account"
       :add-template="true"
       :asset="iAsset"
-      :title="accountCreateUpdateTitle"
+      :title="accountCreateByTemplateTitle"
       :visible.sync="showAddTemplateDialog"
       @add="addAccountSuccess"
       @bulk-create-done="showBulkCreateResult($event)"
@@ -118,8 +118,7 @@ export default {
     columnsDefault: {
       type: Array,
       default: () => ([
-        'name', 'username', 'asset', 'privileged',
-        'secret_type', 'is_active', 'date_updated'
+        'name', 'username', 'asset', 'date_updated'
       ])
     },
     headerExtraActions: {
@@ -140,7 +139,8 @@ export default {
       showAddDialog: false,
       showAddTemplateDialog: false,
       createAccountResults: [],
-      accountCreateUpdateTitle: this.$t('assets.AddAccount'),
+      accountCreateUpdateTitle: this.$t('AddAccount'),
+      accountCreateByTemplateTitle: this.$t('AddAccountByTemplate'),
       iAsset: this.asset,
       account: {},
       secretUrl: '',
@@ -158,6 +158,7 @@ export default {
         },
         columnsMeta: {
           name: {
+            width: '120px',
             formatter: function(row) {
               const to = {
                 name: 'AssetAccountDetail',
@@ -171,7 +172,6 @@ export default {
             }
           },
           asset: {
-            label: this.$t('assets.Asset'),
             formatter: function(row) {
               const to = {
                 name: 'AssetDetail',
@@ -184,8 +184,10 @@ export default {
               }
             }
           },
+          username: {
+            width: '120px'
+          },
           secret_type: {
-            width: '100px',
             formatter: function(row) {
               return row.secret_type.label
             }
@@ -196,13 +198,12 @@ export default {
             }
           },
           has_secret: {
-            width: '100px',
+            width: '120px',
             formatterArgs: {
               showFalse: false
             }
           },
           privileged: {
-            label: this.$t('assets.Privileged'),
             width: '120px',
             formatterArgs: {
               showText: false,
@@ -216,11 +217,11 @@ export default {
               hasUpdate: false, // can set function(row, value)
               hasDelete: false, // can set function(row, value)
               hasClone: this.hasClone,
-              moreActionsTitle: this.$t('common.More'),
+              moreActionsTitle: this.$t('More'),
               extraActions: [
                 {
                   name: 'View',
-                  title: this.$t('common.View'),
+                  title: this.$t('View'),
                   can: this.$hasPerm('accounts.view_accountsecret'),
                   type: 'primary',
                   callback: ({ row }) => {
@@ -234,22 +235,26 @@ export default {
                   }
                 },
                 {
-                  name: 'ClearSecret',
-                  title: this.$t('common.ClearSecret'),
-                  can: this.$hasPerm('accounts.change_account'),
-                  type: 'primary',
+                  name: 'Update',
+                  title: this.$t('Edit'),
+                  can: this.$hasPerm('accounts.change_account') && !this.$store.getters.currentOrgIsRoot,
                   callback: ({ row }) => {
-                    this.$axios.patch(
-                      `/api/v1/accounts/accounts/clear-secret/`,
-                      { account_ids: [row.id] }
-                    ).then(() => {
-                      this.$message.success(this.$tc('common.ClearSuccessMsg'))
+                    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('accounts.Test'),
+                  title: this.$t('Test'),
                   can: ({ row }) =>
                     !this.$store.getters.currentOrgIsRoot &&
                     this.$hasPerm('accounts.change_account') &&
@@ -265,20 +270,16 @@ export default {
                   }
                 },
                 {
-                  name: 'Update',
-                  title: this.$t('common.Update'),
-                  can: this.$hasPerm('accounts.change_account') && !this.$store.getters.currentOrgIsRoot,
+                  name: 'ClearSecret',
+                  title: this.$t('ClearSecret'),
+                  can: this.$hasPerm('accounts.change_account'),
+                  type: 'primary',
                   callback: ({ row }) => {
-                    const data = {
-                      ...this.asset,
-                      ...row.asset
-                    }
-                    vm.account = row
-                    vm.iAsset = data
-                    vm.showAddDialog = false
-                    vm.accountCreateUpdateTitle = this.$t('assets.UpdateAccount')
-                    setTimeout(() => {
-                      vm.showAddDialog = true
+                    this.$axios.patch(
+                      `/api/v1/accounts/accounts/clear-secret/`,
+                      { account_ids: [row.id] }
+                    ).then(() => {
+                      this.$message.success(this.$tc('ClearSuccessMsg'))
                     })
                   }
                 }
@@ -305,7 +306,7 @@ export default {
         exportOptions: {
           url: this.exportUrl,
           mfaVerifyRequired: true,
-          tips: this.$t('accounts.AccountExportTips')
+          tips: this.$t('AccountExportTips')
         },
         importOptions: {
           canImportCreate: this.$hasPerm('accounts.add_account'),
@@ -314,8 +315,9 @@ export default {
         extraActions: [
           {
             name: 'add',
-            title: this.$t('common.Add'),
+            title: this.$t('Create'),
             type: 'primary',
+            icon: 'plus',
             can: () => {
               return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
             },
@@ -324,14 +326,13 @@ export default {
               setTimeout(() => {
                 vm.iAsset = this.asset
                 vm.account = {}
-                vm.accountCreateUpdateTitle = this.$t('assets.AddAccount')
                 vm.showAddDialog = true
               })
             }
           },
           {
             name: 'add-template',
-            title: this.$t('common.TemplateAdd'),
+            title: this.$t('TemplateAdd'),
             has: !(this.platform || this.asset),
             can: () => {
               return vm.$hasPerm('accounts.add_account') && !this.$store.getters.currentOrgIsRoot
@@ -341,7 +342,6 @@ export default {
               setTimeout(() => {
                 vm.iAsset = this.asset
                 vm.account = {}
-                vm.accountCreateUpdateTitle = this.$t('assets.AddAccount')
                 vm.showAddTemplateDialog = true
               })
             }
@@ -350,10 +350,10 @@ export default {
         ],
         extraMoreActions: [
           {
-            name: 'BulkVerify',
-            title: this.$t('accounts.BulkVerify'),
+            name: 'BatchTest',
+            title: this.$t('BatchTest'),
             type: 'primary',
-            fa: 'fa-handshake-o',
+            icon: 'fa-handshake-o',
             can: ({ selectedRows }) => {
               return selectedRows.length > 0
             },
@@ -364,15 +364,15 @@ export default {
                 { action: 'verify', accounts: ids }).then(res => {
                 openTaskPage(res['task'])
               }).catch(err => {
-                this.$message.error(this.$tc('common.bulkVerifyErrorMsg' + ' ' + err))
+                this.$message.error(this.$tc('BulkVerifyErrorMsg' + ' ' + err))
               })
             }.bind(this)
           },
           {
-            name: 'ClearSecrets',
-            title: this.$t('common.ClearSecret'),
+            name: 'BatchClearSecret',
+            title: this.$t('ClearSecret'),
             type: 'primary',
-            fa: 'clean',
+            icon: 'clean',
             can: ({ selectedRows }) => {
               return selectedRows.length > 0 && vm.$hasPerm('accounts.change_account')
             },
@@ -381,16 +381,16 @@ export default {
               this.$axios.patch(
                 '/api/v1/accounts/accounts/clear-secret/',
                 { account_ids: ids }).then(() => {
-                this.$message.success(this.$tc('common.ClearSuccessMsg'))
+                this.$message.success(this.$tc('ClearSuccessMsg'))
               }).catch(err => {
-                this.$message.error(this.$tc('common.bulkClearErrorMsg' + ' ' + err))
+                this.$message.error(this.$tc('BatchClearErrorMsg' + ' ' + err))
               })
             }.bind(this)
           },
           {
-            name: 'actionUpdateSelected',
-            title: this.$t('accounts.AccountBatchUpdate'),
-            fa: 'batch-update',
+            name: 'BatchUpdate',
+            title: this.$t('BatchUpdate'),
+            icon: 'batch-update',
             can: ({ selectedRows }) => {
               return selectedRows.length > 0 &&
                 !this.$store.getters.currentOrgIsRoot &&
@@ -436,12 +436,12 @@ export default {
       this.tableConfig.columnsMeta.actions.formatterArgs.extraActions.push(
         {
           name: 'Delete',
-          title: this.$t('common.Delete'),
+          title: this.$t('Delete'),
           can: this.$hasPerm('accounts.delete_account'),
           type: 'primary',
           callback: ({ row }) => {
-            const msg = this.$t('accounts.AccountDeleteConfirmMsg')
-            this.$confirm(msg, this.$tc('common.Info'), {
+            const msg = this.$t('AccountDeleteConfirmMsg')
+            this.$confirm(msg, this.$tc('Info'), {
               type: 'warning',
               confirmButtonClass: 'el-button--danger',
               beforeClose: async(action, instance, done) => {
@@ -449,7 +449,7 @@ export default {
                 this.$axios.delete(`/api/v1/accounts/accounts/${row.id}/`).then(() => {
                   done()
                   this.$refs.ListTable.reloadTable()
-                  this.$message.success(this.$tc('common.deleteSuccessMsg'))
+                  this.$message.success(this.$tc('DeleteSuccessMsg'))
                 })
               }
             })

src/components/Apps/AccountListTable/BulkCreateResultDialog.vue

@@ -30,11 +30,11 @@ export default {
     }
   },
   data() {
-    const errorProp = this.$t('common.Error')
+    const errorProp = this.$t('Error')
     const stateMap = {
-      'created': this.$tc('common.Created'),
-      'updated': this.$tc('common.Updated'),
-      'skipped': this.$tc('common.Skipped')
+      'created': this.$tc('Created'),
+      'updated': this.$tc('Updated'),
+      'skipped': this.$tc('Skipped')
     }
     const stateClsMap = {
       'created': 'color-primary',
@@ -42,16 +42,16 @@ export default {
       'skipped': 'color-default'
     }
     return {
-      title: this.$t('accounts.AddAccountResult'),
+      title: this.$t('AddAccountResult'),
       config: {
         columns: [
           {
             prop: 'asset',
-            label: this.$t('assets.Asset')
+            label: this.$t('Asset')
           },
           {
             prop: 'state',
-            label: this.$t('common.Status'),
+            label: this.$t('Status'),
             width: '200px',
             formatter: (row) => {
               if (row.error) {
@@ -71,11 +71,11 @@ export default {
   computed: {
     summary() {
       const labels = {
-        total: this.$tc('common.Total'),
-        created: this.$tc('common.Created'),
-        updated: this.$tc('common.Updated'),
-        skipped: this.$tc('common.Skipped'),
-        error: this.$tc('common.Error')
+        total: this.$tc('Total'),
+        created: this.$tc('Created'),
+        updated: this.$tc('Updated'),
+        skipped: this.$tc('Skipped'),
+        error: this.$tc('Error')
       }
       const grouped = _.groupBy(this.result, 'state')
       const groupedLength = _.mapValues(grouped, 'length')

src/components/Apps/AccountListTable/PasswordHistoryDialog.vue

@@ -23,7 +23,7 @@ export default {
   data() {
     return {
       config: {
-        title: this.$t('accounts.HistoryPassword'),
+        title: this.$t('HistoryPassword'),
         visible: false,
         width: '60%',
         tableConfig: {
@@ -32,7 +32,7 @@ export default {
           columns: ['secret', 'version', 'history_date'],
           columnsMeta: {
             secret: {
-              label: this.$t('assets.Password'),
+              label: this.$t('Password'),
               formatter: ShowKeyCopyFormatter,
               formatterArgs: {
                 hasDownload: false,
@@ -40,7 +40,7 @@ export default {
               }
             },
             history_date: {
-              label: this.$t('accounts.HistoryDate')
+              label: this.$t('HistoryDate')
             },
             secret_type: {
               width: '200px'

src/components/Apps/AccountListTable/RemoveAccount.vue

@@ -65,7 +65,7 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.item-textarea > > > .el-textarea__inner {
+.item-textarea >>> .el-textarea__inner {
   height: 110px;
 }
 
@@ -78,12 +78,12 @@ export default {
     border-bottom: none;
   }
 
-  > > > .el-form-item__label {
+  >>> .el-form-item__label {
     padding-right: 20px;
     line-height: 30px;
   }
 
-  > > > .el-form-item__content {
+  >>> .el-form-item__content {
     line-height: 30px;
 
     pre {

src/components/Apps/AccountListTable/UpdateSecretInfo.vue

@@ -1,7 +1,7 @@
 <template>
   <Dialog
     :destroy-on-close="true"
-    :title="$tc('assets.UpdateAssetUserToken')"
+    :title="$tc('UpdateAssetUserToken')"
     :visible.sync="visible"
     width="50"
     @cancel="handleCancel()"
@@ -9,19 +9,19 @@
     v-on="$listeners"
   >
     <el-form label-position="right" label-width="90px">
-      <el-form-item :label="$tc('assets.Name')">
+      <el-form-item :label="$tc('Name')">
         <el-input v-model="account['asset_name']" readonly />
       </el-form-item>
-      <el-form-item :label="$tc('assets.Username')">
+      <el-form-item :label="$tc('Username')">
         <el-input v-model="account['username']" readonly />
       </el-form-item>
-      <el-form-item :label="$tc('assets.Password')">
+      <el-form-item :label="$tc('Password')">
         <UpdateToken v-model="authInfo.password" />
       </el-form-item>
-      <el-form-item :label="$tc('assets.SSHSecretKey')">
+      <el-form-item :label="$tc('SSHSecretKey')">
         <UploadKey @input="getFile" />
       </el-form-item>
-      <el-form-item :label="$tc('assets.Passphrase')">
+      <el-form-item :label="$tc('Passphrase')">
         <UpdateToken v-model="authInfo.passphrase" />
       </el-form-item>
     </el-form>
@@ -75,12 +75,12 @@ export default {
         { disableFlashErrorMsg: true }
       ).then(res => {
         this.authInfo = { password: '', private_key: '' }
-        this.$message.success(this.$tc('common.updateSuccessMsg'))
+        this.$message.success(this.$tc('UpdateSuccessMsg'))
         this.$emit('updateAuthDone', res)
         this.$emit('update:visible', false)
       }).catch(err => {
         const errMsg = Object.values(err.response.data).join(', ')
-        this.$message.error(this.$tc('common.updateErrorMsg') + ' ' + errMsg)
+        this.$message.error(this.$tc('UpdateErrorMsg') + ' ' + errMsg)
         this.$emit('update:visible', true)
       })
     },

src/components/Apps/AccountListTable/ViewSecret.vue

@@ -11,10 +11,10 @@
       v-on="$listeners"
     >
       <el-form :model="secretInfo" class="password-form" label-position="right" label-width="100px">
-        <el-form-item :label="$tc('assets.Name')">
+        <el-form-item :label="$tc('Name')">
           <span>{{ account['name'] }}</span>
         </el-form-item>
-        <el-form-item :label="$tc('assets.Username')">
+        <el-form-item :label="$tc('Username')">
           <span>{{ account['username'] }}</span>
         </el-form-item>
         <el-form-item :label="secretTypeLabel">
@@ -27,16 +27,16 @@
             @input="onShowKeyCopyFormatterChange"
           />
         </el-form-item>
-        <el-form-item v-if="secretType === 'ssh_key'" :label="$tc('assets.sshKeyFingerprint')">
+        <el-form-item v-if="secretType === 'ssh_key'" :label="$tc('SshKeyFingerprint')">
           <span>{{ sshKeyFingerprint }}</span>
         </el-form-item>
-        <el-form-item :label="$tc('common.DateCreated')">
+        <el-form-item :label="$tc('DateCreated')">
           <span>{{ account['date_created'] | date }}</span>
         </el-form-item>
-        <el-form-item :label="$tc('common.DateUpdated')">
+        <el-form-item :label="$tc('DateUpdated')">
           <span>{{ account['date_updated'] | date }}</span>
         </el-form-item>
-        <el-form-item v-if="showPasswordRecord" v-perms="'accounts.view_accountsecret'" :label="$tc('accounts.PasswordRecord')">
+        <el-form-item v-if="showPasswordRecord" v-perms="'accounts.view_accountsecret'" :label="$tc('PasswordRecord')">
           <el-link
             :underline="false"
             type="success"
@@ -86,7 +86,7 @@ export default {
     title: {
       type: String,
       default: function() {
-        return this.$tc('assets.AccountDetail')
+        return this.$tc('Detail')
       }
     },
     showPasswordRecord: {
@@ -137,7 +137,7 @@ export default {
         secret: encryptPassword(this.modifiedSecret)
       }
       this.$axios.patch(`/api/v1/accounts/accounts/${this.account.id}/`, params).then(() => {
-        this.$message.success(this.$tc('common.updateSuccessMsg'))
+        this.$message.success(this.$tc('UpdateSuccessMsg'))
       })
     },
     showSecretDialog() {

src/components/Apps/AccountListTable/const.js

@@ -1,8 +1,6 @@
-import i18n from '@/i18n/i18n'
 import { ChoicesFormatter } from '@/components/Table/TableFormatters'
 
 export const connectivityMeta = {
-  label: i18n.t('assets.Connectivity'),
   formatter: ChoicesFormatter,
   formatterArgs: {
     faChoices: {
@@ -22,5 +20,5 @@ export const connectivityMeta = {
       }
     }
   },
-  width: '100px'
+  width: '130px'
 }

src/components/Apps/AssetRelationCard/index.vue

@@ -8,7 +8,7 @@
       </tr>
       <tr>
         <td colspan="2">
-          <el-button :disabled="disabled" :type="type" size="small" @click="addObjects">{{ $t('common.Add') }}</el-button>
+          <el-button :disabled="disabled" :type="type" size="small" @click="addObjects">{{ $t('Add') }}</el-button>
         </td>
       </tr>
     </table>

src/components/Apps/AssetSelect/dialog.vue

@@ -1,7 +1,7 @@
 <template>
   <Dialog
     :close-on-click-modal="false"
-    :title="$tc('assets.Assets')"
+    :title="$tc('Assets')"
     custom-class="asset-select-dialog"
     top="2vh"
     v-bind="$attrs"
@@ -16,9 +16,9 @@
       :header-actions="headerActions"
       :node-url="baseNodeUrl"
       :table-config="tableConfig"
+      :tree-setting="treeSetting"
       :tree-url="`${baseNodeUrl}children/tree/`"
       :url="baseUrl"
-      :tree-setting="treeSetting"
       class="tree-table"
       v-bind="$attrs"
     />
@@ -73,17 +73,17 @@ export default {
         columns: [
           {
             prop: 'name',
-            label: this.$t('assets.Name'),
+            label: this.$t('Name'),
             sortable: true
           },
           {
             prop: 'address',
-            label: this.$t('assets.ipDomain'),
+            label: this.$t('IpDomain'),
             sortable: 'custom'
           },
           {
             prop: 'platform',
-            label: this.$t('assets.Platform'),
+            label: this.$t('Platform'),
             sortable: true,
             formatter: function(row) {
               return row.platform.name

src/components/Apps/AssetSelect/index.vue

@@ -136,16 +136,22 @@ export default {
 
   .tree-table {
     .left {
-      padding: 5px;
+      padding: 5px 0;
 
       .ztree {
-        min-height: 500px;
-        height: inherit !important;
+        height: 100%;
+      }
+    }
+
+    .right {
+      .transition-box {
+        padding-left: 0;
       }
     }
 
     .mini {
       padding-top: 8px;
+      width: 1px;
     }
 
     .transition-box {

src/components/Apps/AssetTreeTable/index.vue

@@ -2,9 +2,9 @@
   <TreeTable
     ref="TreeList"
     :active-menu.sync="treeTableConfig.activeMenu"
+    :component="treeComponent"
     :table-config="tableConfig"
     :tree-tab-config="treeTableConfig"
-    component="TabTree"
     v-bind="$attrs"
     v-on="$listeners"
   >
@@ -63,12 +63,14 @@ export default {
     const vm = this
 
     return {
+      treeComponent: 'TabTree',
       treeTabConfig: {
         activeMenu: 'CustomTree',
         submenu: [
           {
-            title: this.$t('assets.AssetTree'),
+            title: this.$t('AssetTree'),
             name: 'CustomTree',
+            icon: 'fa-tree',
             treeSetting: {
               showAssets,
               showMenu: false,
@@ -94,13 +96,14 @@ export default {
             }
           },
           {
-            title: this.$t('assets.BuiltinTree'),
+            title: this.$t('TypeTree'),
+            icon: 'fa-list-ul',
             name: 'BuiltinTree',
             treeSetting: {
               showRefresh: true,
               showAssets: false,
               showSearch: false,
-              customTreeHeaderName: this.$t('assets.BuiltinTree'),
+              customTreeHeaderName: this.$t('TypeTree'),
               url: '/api/v1/assets/nodes/category/tree/',
               nodeUrl: this.treeSetting?.nodeUrl || this.nodeUrl,
               treeUrl: `/api/v1/assets/nodes/category/tree/?assets=${showAssets ? '1' : '0'}&count_resource=${this.treeSetting.countResource || 'asset'}`,

src/components/Apps/AutomationParams/index.vue

@@ -7,7 +7,7 @@
         type="primary"
         @click="onOpenDialog"
       >
-        {{ $tc('common.Setting') }}
+        {{ $tc('Setting') }}
       </el-button>
     </div>
     <Dialog
@@ -50,7 +50,7 @@ export default {
     title: {
       type: String,
       default: function() {
-        return this.$t('assets.PushParams')
+        return this.$t('PushParams')
       }
     },
     assets: {

src/components/Apps/BlockedIPs/BlockedIPList.vue

@@ -1,5 +1,5 @@
 <template>
-  <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
+  <ListTable ref="ListTable" :header-actions="headerActions" :table-config="tableConfig" />
 </template>
 
 <script>
@@ -27,7 +27,7 @@ export default {
         ],
         columnsMeta: {
           ip: {
-            label: this.$t('assets.ip')
+            label: this.$t('Ip')
           },
           actions: {
             formatterArgs: {
@@ -37,7 +37,7 @@ export default {
               extraActions: [
                 {
                   name: 'UnlockIP',
-                  title: this.$t('setting.Unblock'),
+                  title: this.$t('Unblock'),
                   can: this.$hasPerm('settings.change_security'),
                   type: 'primary',
                   callback: ({ row }) => {
@@ -45,7 +45,7 @@ export default {
                       '/api/v1/settings/security/unlock-ip/',
                       { ips: [row.ip] }
                     ).then(() => {
-                      vm.$message.success(this.$tc('common.UnlockSuccessMsg'))
+                      vm.$message.success(this.$tc('UnlockSuccessMsg'))
                       vm.$refs.ListTable.reloadTable()
                     })
                   }
@@ -68,7 +68,7 @@ export default {
         extraMoreActions: [
           {
             name: 'UnlockSelected',
-            title: this.$t('setting.BulkUnblock'),
+            title: this.$t('BatchUnblock'),
             type: 'primary',
             can: ({ selectedRows }) => {
               return selectedRows.length > 0
@@ -80,7 +80,7 @@ export default {
                   ips: selectedRows.map(v => { return v.ip })
                 }
               ).then(res => {
-                vm.$message.success(vm.$tc('common.UnlockSuccessMsg'))
+                vm.$message.success(vm.$tc('UnlockSuccessMsg'))
                 vm.$refs.ListTable.reloadTable()
               })
             }

src/components/Apps/BlockedIPs/index.vue

@@ -6,18 +6,18 @@
         type="primary"
         @click="onOpenDialog"
       >
-        {{ $tc('common.View') }}
-        <span>({{ $tc('setting.LockedIP', ipCounts ) }})</span>
+        {{ $tc('View') }}
+        <span>({{ $tc('LockedIP', ipCounts ) }})</span>
       </el-button>
     </div>
     <Dialog
-      :visible.sync="visible"
-      :title="title"
-      width="40%"
+      :destroy-on-close="true"
       :show-cancel="false"
       :show-confirm="false"
-      :destroy-on-close="true"
+      :title="title"
+      :visible.sync="visible"
       v-bind="$attrs"
+      width="40%"
       v-on="$listeners"
     >
       <BlockedIPList />
@@ -43,7 +43,7 @@ export default {
     title: {
       type: String,
       default: function() {
-        return this.$t('setting.BlockedIPS')
+        return this.$t('BlockedIPS')
       }
     },
     url: {

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

@@ -1,42 +1,33 @@
 <template>
   <div class="container">
-    <div class="chat-action">
-      <Select2
-        v-model="select.value"
-        :disabled="isLoading || isSelectDisabled"
-        v-bind="select"
-        @change="onSelectChange"
-      />
-    </div>
     <div class="chat-input">
       <el-input
         v-model="inputValue"
         :disabled="isLoading"
-        :placeholder="$tc('common.InputMessage')"
+        :placeholder="$tc('InputMessage')"
+        :rows="expanded ? 3 :2"
         type="textarea"
         @compositionend="isIM = false"
         @compositionstart="isIM = true"
         @keypress.native="onKeyEnter"
       />
-      <div class="input-action">
-        <span class="right">
-          <i :class="{'active': inputValue }" class="fa fa-send" @click="onSendHandle" />
-        </span>
-      </div>
     </div>
   </div>
 </template>
 
 <script>
 import { mapState } from 'vuex'
-import Select2 from '../../../../Form/FormFields/Select2.vue'
 import { useChat } from '../../useChat.js'
 
 const { setLoading } = useChat()
 
 export default {
-  components: { Select2 },
+  components: { },
   props: {
+    expanded: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -46,7 +37,7 @@ export default {
         url: '/api/v1/settings/chatai-prompts/',
         value: '',
         multiple: false,
-        placeholder: this.$t('common.Prompt'),
+        placeholder: this.$t('Prompt'),
         ajax: {
           transformOption: (item) => {
             return { label: item.name, value: item.content }
@@ -109,7 +100,7 @@ export default {
         }
       }
       .el-input__icon {
-        line-height: 0px;
+        line-height: 0;
       }
     }
   }
@@ -117,20 +108,14 @@ export default {
     flex: 1;
     display: flex;
     flex-direction: column;
-    border: 1px solid #DCDFE6;
     border-radius: 12px;
-    &:has(.el-textarea__inner:focus) {
-      border: 1px solid var(--color-primary);
-    }
     &>>> .el-textarea {
       height: 100%;
       .el-textarea__inner {
         height: 100%;
         padding: 8px 10px;
-        border: none;
-        border-top-left-radius: 12px;
-        border-top-right-radius: 12px;
         resize: none;
+        border-radius: 5px;
         &::-webkit-scrollbar {
           width: 12px;
         }
@@ -143,21 +128,6 @@ export default {
         cursor: no-drop;
       }
     }
-    .input-action {
-      overflow: hidden;
-      padding: 0 16px 15px;
-      border-bottom-left-radius: 12px;
-      border-bottom-right-radius: 12px;
-      .right {
-        float: right;
-        .active {
-          color: var(--color-primary);
-        }
-        i {
-          cursor: pointer;
-        }
-      }
-    }
   }
 }
 </style>

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

@@ -21,7 +21,7 @@
         <div class="action">
           <el-tooltip
             v-if="isSystemError && isLoading"
-            :content="$tc('common.Reconnect')"
+            :content="$tc('Reconnect')"
             effect="dark"
             placement="top"
           >
@@ -69,7 +69,7 @@ export default {
       dropdownOptions: [
         {
           action: 'copy',
-          label: this.$t('common.Copy')
+          label: this.$t('Copy')
         }
       ]
     }

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

@@ -22,8 +22,8 @@
         round
         size="small"
         @click="onStopHandle"
-      >{{ $tc('common.Stop') }}</el-button>
-      <ChatInput ref="chatInput" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
+      >{{ $tc('Stop') }}</el-button>
+      <ChatInput ref="chatInput" :expanded="expanded" @send="onSendHandle" @select-prompt="onSelectPromptHandle" />
     </div>
   </div>
 </template>
@@ -52,6 +52,10 @@ export default {
     ChatMessage
   },
   props: {
+    expanded: {
+      type: Boolean,
+      default: false
+    }
   },
   data() {
     return {
@@ -60,14 +64,6 @@ export default {
       currentConversationId: '',
       showIntroduction: false,
       introduction: [
-        {
-          title: this.$t('common.introduction.ConceptTitle'),
-          content: this.$t('common.introduction.ConceptContent')
-        },
-        {
-          title: this.$t('common.introduction.IdeaTitle'),
-          content: this.$t('common.introduction.IdeaContent')
-        }
       ]
     }
   },
@@ -102,7 +98,7 @@ export default {
       this.$refs.chatInput.select.value = ''
       const chat = {
         message: {
-          content: this.$t('common.ChatHello'),
+          content: this.$t('ChatHello'),
           role: 'assistant',
           create_time: new Date()
         }
@@ -164,7 +160,7 @@ export default {
       } else {
         const chat = {
           message: {
-            content: this.$t('common.ConnectionDropped'),
+            content: this.$t('ConnectionDropped'),
             role: 'assistant',
             create_time: new Date()
           },
@@ -252,10 +248,10 @@ export default {
   }
   .input-box {
     position: relative;
-    height: 160px;
+    //height: 60px;
     padding: 0 15px;
     margin-bottom: 15px;
-    border-top: 1px solid #ececec;
+    //border-top: 1px solid #ececec;
   }
   .stop {
     position: absolute;

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

@@ -3,15 +3,12 @@
     <div class="close-sidebar">
       <i v-if="hasClose" class="el-icon-close" @click="onClose" />
     </div>
-    <el-tabs v-model="active" :tab-position="'right'" @tab-click="handleClick">
-      <el-tab-pane v-for="(item) in submenu" :key="item.name" :name="item.name">
-        <span slot="label">
-          <el-tooltip effect="dark" placement="left" :content="item.label">
-            <svg-icon :icon-class="item.icon" />
-          </el-tooltip>
-        </span>
-      </el-tab-pane>
-    </el-tabs>
+    <div v-if="!expanded" class="close-sidebar">
+      <i class="fa fa-expand" style="font-weight: 200" @click="$emit('expand')" />
+    </div>
+    <div v-if="expanded" class="close-sidebar">
+      <i class="fa fa-compress" style="font-weight: 200" @click="$emit('compress')" />
+    </div>
   </div>
 </template>
 
@@ -29,6 +26,10 @@ export default {
     submenu: {
       type: Array,
       default: () => []
+    },
+    expanded: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -36,11 +37,11 @@ export default {
     }
   },
   methods: {
-    handleClick(tab, event) {
-      this.$emit('tab-click', tab)
-    },
     onClose() {
-      this.$parent.onClose()
+      this.$emit('close')
+    },
+    handleExpand() {
+      this.$emit('expand-full')
     }
   }
 }
@@ -51,17 +52,23 @@ export default {
   width: 100%;
   height: 100%;
   background-color: #f0f1f5;
+
   .close-sidebar {
     height: 48px;
     padding: 12px 0;
     text-align: center;
-    font-size: 14px;
+    font-size: 16px;
     cursor: pointer;
+
     i {
       font-size: 16px;
       font-weight: 600;
       padding: 4px;
+    }
+
+    i, .svg{
       border-radius: 2px;
+
       &:hover {
         color: var(--color-primary);
         background: var(--menu-hover);
@@ -71,8 +78,8 @@ export default {
 }
 >>> .el-tabs {
   .el-tabs__item {
-    padding: 0 13px;
-    font-size: 15px;
+    padding: 0 10px;
+    font-size: 14px;
     :hover {
       color: #7b8085;
     }

src/components/Apps/ChatAi/index.vue

@@ -1,26 +1,36 @@
 <template>
-  <div class="chat">
-    <div class="container">
-      <div class="header">
-        <div class="left">
-          <img :src="robotUrl" alt="">
-          <span class="title">{{ title }}</span>
+  <DrawerPanel ref="drawer" :expanded="expanded" :height="height" :icon="robotUrl" :modal="false" @toggle="onToggle">
+    <div class="chat">
+      <div class="container">
+        <div ref="header" class="header" @mousedown="handleMoveMouseDown" @mouseup="handleMouseMoveUp">
+          <div class="left">
+            <img :src="robotUrl" alt="">
+            <span class="title">{{ title }}</span>
+          </div>
+          <span class="new" @click="onNewChat">
+            <i class="el-icon-plus" />
+            <span>{{ $tc('NewChat') }}</span>
+          </span>
+        </div>
+        <div class="content">
+          <keep-alive>
+            <component :is="active" ref="component" :expanded="expanded" />
+          </keep-alive>
         </div>
-        <span class="new" @click="onNewChat">
-          <i class="el-icon-plus" />
-          <span>{{ $tc('common.NewChat') }}</span>
-        </span>
       </div>
-      <div class="content">
-        <keep-alive>
-          <component :is="active" ref="component" />
-        </keep-alive>
+      <div class="sidebar">
+        <Sidebar
+          :active.sync="active"
+          :expanded="expanded"
+          v-bind="$attrs"
+          @close="onClose"
+          @compress="compress"
+          @expand="expandFull"
+          v-on="$listeners"
+        />
       </div>
     </div>
-    <div class="sidebar">
-      <Sidebar v-bind="$attrs" :active.sync="active" :submenu="submenu" />
-    </div>
-  </div>
+  </DrawerPanel>
 </template>
 
 <script>
@@ -28,9 +38,11 @@ import Sidebar from './components/Sidebar/index.vue'
 import Chat from './components/ChitChat/index.vue'
 import { getInputFocus } from './useChat.js'
 import { ws } from '@/utils/socket'
+import DrawerPanel from '@/components/Apps/DrawerPanel/index.vue'
 
 export default {
   components: {
+    DrawerPanel,
     Chat,
     Sidebar
   },
@@ -38,7 +50,7 @@ export default {
     title: {
       type: String,
       default: function() {
-        return this.$t('setting.ChatAI')
+        return this.$t('ChatAI')
       }
     },
     drawerPanelVisible: {
@@ -49,29 +61,39 @@ export default {
   data() {
     return {
       active: 'chat',
-      robotUrl: require('../../../assets/img/robot-assistant.png'),
-      submenu: [
-        {
-          name: 'chat',
-          label: this.$t('common.Chat'),
-          icon: 'chat'
-        }
-      ]
+      robotUrl: require('@/assets/img/robot-assistant.png'),
+      height: '400px',
+      expanded: false,
+      clientOffset: {}
     }
   },
   watch: {
-    drawerPanelVisible(value) {
-      if (value && !ws) {
-        this.initWebSocket()
-      }
-    }
+  },
+  mounted() {
   },
   methods: {
+    handleMoveMouseDown(event) {
+      console.log('Event: ', event)
+      this.$refs.drawer.handleHeaderMoveDown(event)
+    },
+    handleMouseMoveUp(event) {
+      this.$refs.drawer.handleHeaderMoveUp(event)
+    },
     initWebSocket() {
-      this.$refs.component?.init()
+      if (!ws) {
+        this.$refs.component?.init()
+      }
     },
     onClose() {
-      this.$parent.show = false
+      this.$refs.drawer.show = false
+    },
+    expandFull() {
+      this.height = '100%'
+      this.expanded = true
+    },
+    compress() {
+      this.height = '400px'
+      this.expanded = false
     },
     onNewChat() {
       this.active = 'chat'
@@ -79,6 +101,12 @@ export default {
         this.$refs.component?.onNewChat()
         getInputFocus()
       })
+    },
+    onToggle(status) {
+      this.initWebSocket()
+      if (status) {
+        getInputFocus()
+      }
     }
   }
 }
@@ -89,12 +117,15 @@ export default {
   display: flex;
   width: 100%;
   height: 100%;
+
   .container {
     flex: 1;
     display: flex;
     flex-direction: column;
     overflow: hidden;
+
     .header {
+      background: linear-gradient(90deg, #ebf1ff 24.34%, #e5fbf8 56.18%, #f2ebfe 90.18%);;
       display: flex;
       justify-content: space-between;
       height: 48px;

src/components/Apps/DrawerPanel/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div ref="drawer" :class="{show: show}" class="drawer">
-    <div :style="{'background-color': modal ? 'rgba(0, 0, 0, .3)' : 'transparent'}" class="modal" />
-    <div :style="{'width': width}" class="drawer-panel">
+    <div v-if="modal" :style="{'background-color': modal ? 'rgba(0, 0, 0, .3)' : 'transparent'}" class="modal" />
+    <div ref="panel" :style="{width: width, height: height }" class="drawer-panel">
       <div v-show="!show" ref="dragBox" class="handle-button">
         <i v-if="icon.startsWith('fa') || icon.startsWith('el')" :class="show ? 'el-icon-close': icon" />
         <img v-else :src="icon" alt="">
@@ -12,7 +12,6 @@
     </div>
   </div>
 </template>
-
 <script>
 
 export default {
@@ -26,6 +25,10 @@ export default {
       type: String,
       default: '440px'
     },
+    height: {
+      type: String,
+      default: '400px'
+    },
     modal: {
       type: Boolean,
       default: true
@@ -33,11 +36,16 @@ export default {
     clickNotClose: {
       type: Boolean,
       default: false
+    },
+    expanded: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
     return {
-      show: false
+      show: false,
+      clientOffset: {}
     }
   },
   watch: {
@@ -46,6 +54,14 @@ export default {
         this.addEventClick()
       }
       this.$emit('toggle', this.show)
+    },
+    expanded(value) {
+      if (value) {
+        this.$refs.panel.style.top = '0px'
+      } else {
+        this.$refs.panel.style.top = 'auto'
+        this.$refs.panel.style.bottom = '2px'
+      }
     }
   },
   mounted() {
@@ -55,49 +71,66 @@ export default {
   beforeDestroy() {
     const element = this.$refs.drawer
     element.remove()
-    window.removeEventListener('click', this.closeSidebar)
+    // window.removeEventListener('click', this.closeSidebar)
   },
   methods: {
+    handleHeaderMoveUp(event) {
+      this.handleMouseMoveUp(event)
+    },
+    handleHeaderMoveDown(event) {
+      this.handleMoveMouseDown(event, true)
+    },
+    handleMoveMouseDown(event, isHeader = false) {
+      const dragBox = this.$refs.dragBox
+      const vm = this
+      const rect = dragBox.getBoundingClientRect()
+      const parentRect = dragBox.parentElement.getBoundingClientRect()
+      const clientOffset = this.clientOffset
+      clientOffset.clientX = event.clientX
+      clientOffset.clientY = event.clientY
+
+      const handleOnMouseMove = _.debounce(function(event) {
+        const diffY = rect.top - parentRect.top
+        const maxY = window.innerHeight - parentRect.height
+        let parentY = event.clientY - diffY
+        // 这个是拖动的 header, 不是 bar
+        if (isHeader) {
+          parentY = event.clientY - rect.height / 2
+        }
+        if (parentY < 0) {
+          parentY = 0
+        } else if (parentY > maxY) {
+          parentY = maxY
+        }
+        if (vm.$refs.panel) {
+          vm.$refs.panel.style.top = parentY + 'px'
+        }
+      })
+
+      document.onmousemove = handleOnMouseMove
+      document.onmouseup = function() {
+        document.removeEventListener('mousemove', handleOnMouseMove)
+        setTimeout(() => {
+          document.onmousemove = null
+          document.onmouseup = null
+        }, 0)
+      }
+    },
+
+    handleMouseMoveUp(event) {
+      const clientOffset = this.clientOffset
+      const clientX = event.clientX
+      const clientY = event.clientY
+      if (this.isDifferenceWithinThreshold(clientX, clientOffset.clientX) &&
+        this.isDifferenceWithinThreshold(clientY, clientOffset.clientY)) {
+        this.show = !this.show
+      }
+    },
     init() {
       this.$nextTick(() => {
         const dragBox = this.$refs.dragBox
-        const clientOffset = {}
-        dragBox.addEventListener('mousedown', (event) => {
-          const offsetX = dragBox.getBoundingClientRect().left
-          const offsetY = dragBox.getBoundingClientRect().top
-          const innerX = event.clientX - offsetX
-          const innerY = event.clientY - offsetY
-
-          clientOffset.clientX = event.clientX
-          clientOffset.clientY = event.clientY
-          document.onmousemove = function(event) {
-            dragBox.style.left = event.clientX - innerX + 'px'
-            dragBox.style.top = event.clientY - innerY + 'px'
-            const dragDivTop = window.innerHeight - dragBox.getBoundingClientRect().height
-            const dragDivLeft = window.innerWidth - dragBox.getBoundingClientRect().width
-            dragBox.style.left = dragDivLeft + 'px'
-            dragBox.style.left = '-48px'
-            if (dragBox.getBoundingClientRect().top <= 0) {
-              dragBox.style.top = '0px'
-            }
-            if (dragBox.getBoundingClientRect().top >= dragDivTop) {
-              dragBox.style.top = dragDivTop + 'px'
-            }
-            event.preventDefault()
-            event.stopPropagation()
-          }
-          document.onmouseup = function() {
-            document.onmousemove = null
-            document.onmouseup = null
-          }
-        }, false)
-        dragBox.addEventListener('mouseup', (event) => {
-          const clientX = event.clientX
-          const clientY = event.clientY
-          if (this.isDifferenceWithinThreshold(clientX, clientOffset.clientX) && this.isDifferenceWithinThreshold(clientY, clientOffset.clientY)) {
-            this.show = !this.show
-          }
-        })
+        dragBox.addEventListener('mousedown', this.handleMoveMouseDown, false)
+        dragBox.addEventListener('mouseup', this.handleMouseMoveUp, false)
       })
     },
     isDifferenceWithinThreshold(num1, num2, threshold = 5) {
@@ -105,7 +138,7 @@ export default {
       return difference <= threshold
     },
     addEventClick() {
-      window.addEventListener('click', this.closeSidebar)
+      // window.addEventListener('click', this.closeSidebar)
     },
     closeSidebar(evt) {
       const parent = evt.target.closest('.drawer-panel')
@@ -135,11 +168,10 @@ export default {
 
 .drawer-panel {
   position: fixed;
-  top: 0;
-  right: 0;
+  bottom: 1px;
+  right: -1px;
   width: 100%;
   min-width: 260px;
-  height: 100vh;
   user-select: none;
   transition: transform .25s cubic-bezier(.7, .3, .1, 1);
   box-shadow: 0 0 8px 4px #00000014;
@@ -174,7 +206,7 @@ export default {
 
 .handle-button {
   position: absolute;
-  top: 30%;
+  bottom: 20%;
   left: -48px;
   width: 48px;
   height: 45px;
@@ -191,19 +223,21 @@ export default {
   cursor: pointer;
 
   &:hover {
-    left: -50px !important;
+    left: -51px !important;
     width: 50px !important;
-    transform: scale(1.06);
+    transform: scale(1.01);
   }
   i {
     font-size: 20px;
     line-height: 45px;
+    pointer-events: none;
   }
   img {
     width: 22px;
     height: 22px;
     transform: translateY(10%);
     margin-left: 3px;
+    pointer-events: none;
   }
 }
 </style>

src/components/Apps/GatewayDialog/index.vue

@@ -4,18 +4,18 @@
     :destroy-on-close="true"
     :show-cancel="false"
     :show-confirm="false"
-    :title="$tc('assets.TestGatewayTestConnection')"
+    :title="$tc('TestGatewayTestConnection')"
     :visible.sync="iVisible"
     top="35vh"
     width="40%"
   >
     <el-row :gutter="20">
       <el-col :md="4" :sm="24">
-        <div style="line-height: 34px">{{ $t('assets.SSHPort') }}</div>
+        <div style="line-height: 34px">{{ $t('SSHPort') }}</div>
       </el-col>
       <el-col :md="14" :sm="24">
         <el-input v-model="port" />
-        <span class="help-tips help-block">{{ $t('assets.TestGatewayHelpMessage') }}</span>
+        <span class="help-tips help-block">{{ $t('TestGatewayHelpMessage') }}</span>
       </el-col>
       <el-col :md="4" :sm="24">
         <el-button
@@ -25,7 +25,7 @@
           type="primary"
           @click="dialogConfirm"
         >
-          {{ this.$t('common.Confirm') }}
+          {{ this.$t('Confirm') }}
         </el-button>
       </el-col>
     </el-row>
@@ -75,7 +75,7 @@ export default {
   methods: {
     dialogConfirm() {
       if (isNaN(this.port)) {
-        return this.$message.error(this.$tc('common.TestPortErrorMsg'))
+        return this.$message.error(this.$tc('TestPortErrorMsg'))
       }
       this.$axios.post(
         `/api/v1/assets/gateways/${this.cell}/test-connective/`,

src/components/Apps/ManyJsonTabs/AssetJsonTab.vue

@@ -37,7 +37,7 @@ export default {
           ],
           columnsMeta: {
             name: {
-              label: this.$t('assets.Asset'),
+              label: this.$t('Asset'),
               formatter: (row) => {
                 const to = {
                   name: 'AssetDetail',

src/components/Apps/ManyJsonTabs/UserJsonTab.vue

@@ -18,7 +18,8 @@ export default {
   props: {
     object: {
       type: Object,
-      default: () => {}
+      default: () => {
+      }
     }
   },
   data() {
@@ -38,7 +39,8 @@ export default {
           ],
           columnsMeta: {
             name: {
-              label: this.$t('common.Name'),
+              label: this.$t('Name'),
+              width: 90,
               formatter: (row) => {
                 const to = {
                   name: 'UserDetail',
@@ -52,7 +54,7 @@ export default {
               }
             },
             system_roles: {
-              label: this.$t('users.SystemRoles'),
+              label: this.$t('SystemRoles'),
               formatter: (row) => {
                 return row['system_roles'].map(item => item['display_name']).join(', ') || '-'
               },
@@ -60,7 +62,7 @@ export default {
               columnKey: 'system_roles'
             },
             org_roles: {
-              label: this.$t('users.OrgRoles'),
+              label: this.$t('OrgRoles'),
               formatter: (row) => {
                 return row['org_roles'].map(item => item['display_name']).join(', ') || '-'
               },

src/components/Apps/ResourceActivity/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="20">
-      <el-col :md="12" :sm="24">
+      <el-col :md="16" :sm="24">
         <IBox :title="title" class="block" v-bind="$attrs">
           <el-timeline>
             <el-timeline-item
@@ -18,14 +18,14 @@
                 type="primary"
                 @click.native="onClick(activity)"
               >
-                {{ $tc('common.Detail') }}
+                {{ $tc('Detail') }}
               </el-link>
             </el-timeline-item>
           </el-timeline>
         </IBox>
       </el-col>
     </el-row>
-    <DiffDetail ref="DetailDialog" :title="$tc('route.OperateLog')" />
+    <DiffDetail ref="DetailDialog" :title="$tc('OperateLog')" />
   </div>
 </template>
 
@@ -49,10 +49,10 @@ export default {
   data() {
     return {
       activityUrl: `/api/v1/audits/activities/?resource_id=${this.object.id}`,
-      title: `${this.$t('common.Activity')} - ${this.$t('common.Last30')}`,
+      title: `${this.$t('Activity')} - ${this.$t('Last30')}`,
       activities: [
         {
-          content: this.$t('common.Now'),
+          content: this.$t('Now'),
           timestamp: this.$moment().format('YYYY-MM-DD HH:mm:ss'),
           type: 'primary'
         }

src/components/Apps/UserConfirmDialog/index.vue

@@ -16,7 +16,7 @@
       <el-row :gutter="24" style="margin: 0 auto;">
         <el-col :md="24" :sm="24">
           <el-alert
-            :title="$tc('auth.ReLoginTitle')"
+            :title="$tc('ReLoginTitle')"
             center
             style="margin-bottom: 20px;"
             type="error"
@@ -26,7 +26,7 @@
       <el-row :gutter="24" style="margin: 0 auto;">
         <el-col :md="24" :sm="24">
           <el-button class="confirm-btn" size="mini" type="primary" @click="logout">
-            {{ this.$t('auth.ReLogin') }}
+            {{ this.$t('ReLogin') }}
           </el-button>
         </el-col>
       </el-row>
@@ -73,7 +73,7 @@
       <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">
-            {{ this.$t('common.Confirm') }}
+            {{ this.$t('Confirm') }}
           </el-button>
         </el-col>
       </el-row>
@@ -100,11 +100,11 @@ export default {
   },
   data() {
     return {
-      title: this.$t('common.CurrentUserVerify'),
+      title: this.$t('CurrentUserVerify'),
       smsWidth: 0,
       subTypeSelected: '',
       inputPlaceholder: '',
-      smsBtnText: this.$t('common.SendVerificationCode'),
+      smsBtnText: this.$t('SendVerificationCode'),
       smsBtnDisabled: false,
       confirmTypeRequired: '',
       subTypeChoices: [],
@@ -146,7 +146,7 @@ export default {
             this.callback()
             this.visible = false
           }).catch(() => {
-            this.title = this.$t('auth.NeedReLogin')
+            this.title = this.$t('NeedReLogin')
             this.visible = true
           })
           return
@@ -158,7 +158,7 @@ export default {
         this.visible = true
       }).catch((err) => {
         const data = err.response?.data
-        const msg = data?.error || data?.detail || data?.msg || this.$t('common.GetConfirmTypeFailed')
+        const msg = data?.error || data?.detail || data?.msg || this.$t('GetConfirmTypeFailed')
         this.$message.error(msg)
         this.cancel(err)
       }).finally(() => {
@@ -170,11 +170,11 @@ export default {
     },
     sendSMSCode() {
       this.$axios.post(`/api/v1/authentication/mfa/select/`, { type: 'sms' }).then(res => {
-        this.$message.success(this.$tc('common.VerificationCodeSent'))
+        this.$message.success(this.$tc('VerificationCodeSent'))
         let time = 60
         const interval = setInterval(() => {
           const originText = this.smsBtnText
-          this.smsBtnText = this.$t('common.Pending') + `: ${time}`
+          this.smsBtnText = this.$t('Pending') + `: ${time}`
           this.smsBtnDisabled = true
           time -= 1
 
@@ -191,7 +191,7 @@ export default {
         return this.logout()
       }
       if (this.subTypeSelected === 'otp' && this.secretValue.length !== 6) {
-        return this.$message.error(this.$tc('common.MFAErrorMsg'))
+        return this.$message.error(this.$tc('MFAErrorMsg'))
       }
       const data = {
         confirm_type: this.confirmTypeRequired,

src/components/Cards/DetailCard/ItemValue.vue

@@ -47,9 +47,9 @@ export default {
   methods: {
     toChoicesDisplay(value) {
       if (!value) {
-        return this.$t('common.No')
+        return this.$t('No')
       }
-      return this.$t('common.Yes')
+      return this.$t('Yes')
     },
     isDatetime(value) {
       if (typeof value !== 'string') {
@@ -92,7 +92,7 @@ export default {
       )
     }
     return (
-      <span>{this.displayValue}</span>
+      <span title={this.displayValue}>{this.displayValue}</span>
     )
   }
 }

src/components/Cards/DetailCard/auto.vue

@@ -1,14 +1,18 @@
 <template>
-  <DetailCard v-if="!loading && hasObject && items.length > 0" :items="items" v-bind="$attrs" />
+  <IBox v-if="loading" style="width: 100%; height: 200px" />
+  <div v-else>
+    <DetailCard v-if="hasObject && items.length > 0" :items="items" :loading="loading" v-bind="$attrs" />
+  </div>
 </template>
 
 <script>
 import DetailCard from './index.vue'
 import { copy, toSafeLocalDateStr } from '@/utils/common'
+import IBox from '@/components/IBox/index.vue'
 
 export default {
   name: 'AutoDetailCard',
-  components: { DetailCard },
+  components: { IBox, DetailCard },
   props: {
     object: {
       type: Object,
@@ -69,7 +73,7 @@ export default {
           if (val === '-') {
             return <span>{'-'}</span>
           }
-          return (<span style={{ cursor: 'pointer' }} onClick={() => copy(val)}>
+          return (<span style={{ cursor: 'pointer' }} onClick={() => copy(val)} title={val}>
             {val}
           </span>)
         }
@@ -104,48 +108,58 @@ export default {
         let value = this.iObject[name]
         const label = fieldMeta.label
 
+        const formatter = this.formatters[name]
+        if (formatter) {
+          this.items.push({
+            key: label,
+            value: value,
+            formatter: formatter
+          })
+          continue
+        }
+
         if (Array.isArray(value)) {
-          if (typeof value[0] === 'object') {
-            value.forEach(item => {
+          const tp = typeof value[0]
+          for (const [index, item] of value.entries()) {
+            let object = {}
+            if (tp === 'object') {
               const fieldName = `${name}.${item.name}`
               if (excludes.includes(fieldName)) {
-                return
+                continue
               }
-              this.items.push({
+              object = {
                 key: item.label,
                 value: item.value
-              })
-            })
-          } else if (typeof value[0] === 'string') {
-            value.forEach((item, index) => {
-              let data = {}
-              if (index === 0) {
-                data = {
-                  key: label,
-                  value: value[index]
-                }
-              } else {
-                data = {
-                  value: value[index]
-                }
               }
-              this.items.push(data)
-            })
+            } else if (tp === 'string') {
+              object = {
+                value: value[index]
+              }
+              if (index === 0) {
+                object['key'] = label
+              }
+            }
+            if (index !== value.length - 1) {
+              object['class'] = 'array-item'
+            }
+            this.items.push(object)
           }
           continue
         }
         if (value === null || value === '') {
           value = '-'
+        } else if (value === 0) {
+          value = 0
         } else if (fieldMeta.type === 'datetime') {
           value = toSafeLocalDateStr(value)
         } else if (fieldMeta.type === 'labeled_choice') {
           value = value?.['label']
-        } else if (fieldMeta.type === 'related_field' || fieldMeta.type === 'nested object') {
+        } else if (fieldMeta.type === 'related_field' || fieldMeta.type === 'nested object' || value?.name) {
           value = value?.['name']
         } else if (fieldMeta.type === 'm2m_related_field') {
           value = value?.map(item => item['name']).join(', ')
         } else if (fieldMeta.type === 'boolean') {
-          value = value ? this.$t('common.Yes') : this.$t('common.No')
+          value = value ? this.$t('Yes') : this.$t('No')
         }
 
         if (value === undefined) {
@@ -159,7 +173,7 @@ export default {
         const item = {
           key: label,
           value: value,
-          formatter: this.formatters[name] || defaultFormatter[name]
+          formatter: defaultFormatter[name]
         }
         this.items.push(item)
       }

src/components/Cards/DetailCard/index.vue

@@ -1,7 +1,8 @@
 <template>
   <IBox :fa="fa" :title="title">
-    <el-form class="content" label-position="left" label-width="25%">
-      <el-form-item v-for="item in items" :key="item.key" :label="item.key">
+    <el-form :label-width="labelWidth" class="content" label-position="left">
+      <el-form-item v-for="item in items" :key="item.key" :class="item.class" :label="item.key">
+        <span slot="label"> {{ formateLabel(item.key) }}</span>
         <ItemValue :value="item.value" class="item-value" v-bind="item" />
       </el-form-item>
     </el-form>
@@ -20,7 +21,7 @@ export default {
     title: {
       type: String,
       default() {
-        return this.$t('common.BasicInfo')
+        return this.$t('BasicInfo')
       }
     },
     fa: {
@@ -34,6 +35,18 @@ export default {
     align: {
       type: String,
       default: 'left'
+    },
+    labelWidth: {
+      type: String,
+      default: '25%'
+    }
+  },
+  methods: {
+    formateLabel(label) {
+      if (!label) {
+        return label
+      }
+      return label.replace(' amount', '').replace('数量', '')
     }
   }
 }
@@ -53,14 +66,31 @@ export default {
       border-bottom: none;
     }
 
+    &.array-item {
+      border-bottom: none;
+
+      >>> .el-form-item__content {
+        border-bottom: 1px dashed #EBEEF5
+      }
+
+      >>> .el-form-item__label:last-child {
+        border: 1px dashed #EBEEF5;
+      }
+    }
+
     &:hover {
     }
 
     >>> .el-form-item__label {
       padding-right: 8%;
-      white-space: nowrap;
-      text-overflow: ellipsis;
+      //white-space: nowrap;
+      //text-overflow: ellipsis;
       overflow: hidden;
+
+      span {
+        display: inline-block;
+        line-height: 1.5;
+      }
     }
 
     >>> .el-form-item__content {

src/components/Cards/RelationCard/index.vue

@@ -3,14 +3,14 @@
     <table class="CardTable" style="width: 100%;table-layout:fixed;">
       <tr>
         <td colspan="2">
-          <Select2 ref="select2" v-model="select2.value" :disabled="iDisabled" v-bind="select2" />
+          <Select2 ref="select2" v-model="select2.value" :disabled="iDisabled" show-select-all v-bind="select2" />
         </td>
       </tr>
       <slot />
       <tr>
         <td colspan="2">
           <el-button :disabled="iDisabled" :loading="submitLoading" :type="type" size="small" @click="addObjects">
-            {{ $t('common.Add') }}
+            {{ $t('Add') }}
           </el-button>
         </td>
       </tr>
@@ -32,7 +32,7 @@
         <td colspan="2">
           <el-button :disabled="iDisabled" :type="type" size="small" style="width: 100%" @click="loadMore">
             <i class="fa fa-arrow-down" />
-            {{ $t('common.More') }}
+            {{ $t('More') }}
           </el-button>
         </td>
       </tr>
@@ -119,7 +119,7 @@ export default {
           this.$log.debug('disabled values remove index: ', i)
           that.select2.disabledValues.splice(i, 1)
         }
-        that.$message.success(that.$t('common.RemoveSuccessMsg'))
+        that.$message.success(that.$t('RemoveSuccessMsg'))
       }
     },
     onDeleteFail: {
@@ -142,13 +142,17 @@ export default {
       type: Function,
       default: (objects, that) => {}
     },
+    showAddAll: {
+      type: Boolean,
+      default: false
+    },
     onAddSuccess: {
       type: Function,
       default(objects, that) {
         that.$log.debug('Select value', that.select2.value)
         that.iHasObjects = [...that.iHasObjects, ...objects]
         that.$refs.select2.clearSelected()
-        that.$message.success(that.$t('common.AddSuccessMsg'))
+        that.$message.success(that.$t('AddSuccessMsg'))
       }
     },
     getHasObjects: {
@@ -161,6 +165,7 @@ export default {
       iHasObjects: this.hasObjects || [],
       totalHasObjectsLength: 0,
       submitLoading: false,
+      selectAllDisabled: false,
       params: {
         page: 1,
         hasMore: false,
@@ -253,11 +258,13 @@ export default {
         }
       })
       data = this.iAjax.processResults.bind(this)(data)
-      data.results && data.results.forEach((v) => {
-        if (!this.hasObjects.find((item) => item.value === v.value)) {
-          this.iHasObjects.push(v)
-        }
-      })
+      if (data.results) {
+        data.results.forEach((v) => {
+          if (!this.iHasObjects.find((item) => item.value === v.value)) {
+            this.iHasObjects.push(v)
+          }
+        })
+      }
       // 如果还有其它页，继续获取, 如果没有就停止
       this.params.hasMore = !!data.pagination
       this.totalHasObjectsLength = data.total
@@ -292,6 +299,13 @@ export default {
       this.performAdd(objects, this).then(
         () => this.onAddSuccess(objects, this)
       )
+    },
+    async selectAll() {
+      this.selectAllDisabled = true
+      this.disabled = true
+      await this.$refs.select2.selectAll()
+      this.selectAllDisabled = false
+      this.disabled = false
     }
   }
 }

src/components/DataActions/index.vue

@@ -6,12 +6,18 @@
         v-show="action.dropdown.length > 0"
         :key="action.name"
         class="action-item"
-        trigger="click"
         placement="bottom-start"
+        trigger="click"
         @command="handleDropdownCallback"
       >
-        <el-button class="more-action" :size="size" v-bind="cleanButtonAction(action)">
-          {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
+        <el-button :size="size" class="more-action" v-bind="cleanButtonAction(action)">
+          <span v-if="action.icon && !action.icon.startsWith('el-')" class="pre-icon">
+            <i v-if="action.icon.startsWith('fa')" :class="'fa fa-fw ' + action.icon" />
+            <svg-icon v-else :icon-class="action.icon" />
+          </span>
+          <span v-if="action.title">
+            {{ action.title }}<i class="el-icon-arrow-down el-icon--right" />
+          </span>
         </el-button>
         <el-dropdown-menu slot="dropdown" style="overflow: auto;max-height: 60vh">
           <template v-for="option in action.dropdown">
@@ -26,11 +32,12 @@
             <el-dropdown-item
               :key="option.name"
               :command="[option, action]"
-              v-bind="option"
+              class="dropdown-item"
+              v-bind="{...option, icon: ''}"
             >
-              <span v-if="option.fa">
-                <i v-if="option.fa.startsWith('fa-')" :class="'fa ' + option.fa" />
-                <svg-icon v-else :icon-class="option.fa" style="font-size: 14px; margin-right: 2px; margin-left: -2px;" />
+              <span v-if="option.icon" class="pre-icon">
+                <i v-if="option.icon.startsWith('fa')" :class="'fa fa-fw ' + option.icon" />
+                <svg-icon v-else :icon-class="option.icon" />
               </span>
               {{ option.title }}
             </el-dropdown-item>
@@ -42,15 +49,15 @@
         v-else
         :key="action.name"
         :size="size"
-        v-bind="cleanButtonAction(action)"
         class="action-item"
+        v-bind="{...cleanButtonAction(action), icon: action.icon && action.icon.startsWith('el-') ? action.icon : ''}"
         @click="handleClick(action)"
       >
-        <el-tooltip :disabled="!action.tip" :content="action.tip" placement="top">
+        <el-tooltip :content="action.tip" :disabled="!action.tip" placement="top">
           <span>
-            <span v-if="action.fa" style="vertical-align: initial;">
-              <i v-if="action.fa.startsWith('fa-')" :class="'fa ' + action.fa" />
-              <svg-icon v-else :icon-class="action.fa" style="font-size: 14px;" />
+            <span v-if="action.icon && !action.icon.startsWith('el-')" style="vertical-align: initial">
+              <i v-if="action.icon.startsWith('fa')" :class="'fa ' + action.icon" />
+              <svg-icon v-else :icon-class="action.icon" />
             </span>
             {{ action.title }}
           </span>
@@ -61,6 +68,7 @@
 </template>
 
 <script>
+import { toSentenceCase } from '@/utils/common'
 
 export default {
   name: 'DataActions',
@@ -88,6 +96,16 @@ export default {
     }
   },
   methods: {
+    hasIcon(action, type = '') {
+      const icon = action.icon
+      if (!icon) {
+        return false
+      }
+      if (type) {
+        return icon.startsWith(type)
+      }
+      return true
+    },
     handleDropdownCallback(command) {
       const [option, dropdown] = command
       const defaultCallback = () => this.$log.debug('No callback found: ', option, dropdown)
@@ -100,6 +118,9 @@ export default {
       }
       return callback(option)
     },
+    toSentenceCase(s) {
+      return toSentenceCase(s)
+    },
     handleClick(action) {
       if (action && action.callback) {
         action.callback(action)
@@ -135,7 +156,7 @@ export default {
         if (!v) {
           continue
         }
-        const action = Object.assign({}, v)
+        const action = { ...v }
         // 是否拥有这个action
         const has = this.checkItem(action, 'has')
         delete action['has']
@@ -150,7 +171,6 @@ export default {
         action.disabled = !can
 
         if (action.dropdown) {
-          // const dropdown = this.cleanActions(action.dropdown)
           action.dropdown = this.cleanActions(action.dropdown)
         }
         cleanedActions.push(action)
@@ -167,6 +187,25 @@ export default {
   justify-content: center;
 }
 
+.dropdown-item {
+  .pre-icon {
+    width: 17px;
+    display: inline-block;
+  }
+
+  >>> i.fa {
+    font-size: 13px;
+    height: 13px;
+    width: 13px;
+    margin-right: 0;
+  }
+
+  >>> .svg-icon {
+    font-size: 13px;
+    height: 13px;
+    width: 13px;
+  }
+}
 .dropdown-menu-title {
   text-align: left;
   font-size: 12px;
@@ -184,6 +223,11 @@ export default {
 
 .el-button-ungroup .action-item {
   margin-left: 4px;
+  line-height: 1;
+}
+
+.action-item.el-dropdown {
+  font-size: 11px;
 }
 
 .el-button-ungroup .action-item:first-child {

src/components/Dialog/DiffDetail.vue

@@ -8,7 +8,7 @@
   >
     <div>
       <div v-if="isEmpty()" style="text-align: center">
-        {{ this.$tc('common.NoContent') }}
+        {{ this.$tc('NoContent') }}
       </div>
       <div v-else>
         <el-table
@@ -16,18 +16,18 @@
           class="diffTable"
         >
           <el-table-column
-            :label="$tc('audits.ChangeField')"
+            :label="$tc('ChangeField')"
             :prop="fieldName"
             show-overflow-tooltip
-            width="100"
+            width="150"
           />
           <el-table-column
-            :label="$tc('audits.BeforeChange')"
+            :label="$tc('BeforeChange')"
             :prop="leftKeyName"
             show-overflow-tooltip
           />
           <el-table-column
-            :label="$tc('audits.AfterChange')"
+            :label="$tc('AfterChange')"
             :prop="rightKeyName"
             show-overflow-tooltip
           />

src/components/Dialog/index.vue

@@ -12,8 +12,8 @@
     <slot />
     <div slot="footer" class="dialog-footer">
       <slot name="footer">
-        <el-button v-if="showCancel && showButtons" @click="onCancel">{{ cancelTitle }}</el-button>
-        <el-button v-if="showConfirm && showButtons" :loading="loadingStatus" type="primary" @click="onConfirm">
+        <el-button v-if="showCancel && showButtons" size="small" @click="onCancel">{{ cancelTitle }}</el-button>
+        <el-button v-if="showConfirm && showButtons" :loading="loadingStatus" size="small" type="primary" @click="onConfirm">
           {{ confirmTitle }}
         </el-button>
       </slot>
@@ -44,7 +44,7 @@ export default {
     confirmTitle: {
       type: String,
       default() {
-        return this.$t('common.Confirm')
+        return this.$t('Confirm')
       }
     },
     showCancel: {
@@ -54,7 +54,7 @@ export default {
     cancelTitle: {
       type: String,
       default() {
-        return this.$t('common.Cancel')
+        return this.$t('Cancel')
       }
     },
     showButtons: {
@@ -94,6 +94,18 @@ export default {
     border-radius: 0.3em;
     max-width: 1500px;
 
+    .form-group-header {
+      margin-left: 20px;
+    }
+
+    //.el-form-item__label {
+    //  width: 30% !important;
+    //}
+    //
+    //.el-form-item__content {
+    //  margin-left: 30% !important;
+    //}
+
     .el-icon-circle-check {
       display: none;
     }
@@ -122,6 +134,6 @@ export default {
 
   .dialog-footer >>> button.el-button {
     font-size: 13px;
-    padding: 10px 20px;
+    padding: 8px 12px;
   }
 </style>

src/components/Drawers/DrawerComponent.vue

@@ -0,0 +1,31 @@
+<!-- DrawerComponent.vue -->
+<template>
+  <el-drawer
+    :modal="false"
+    :visible.sync="drawerVisible"
+    append-to-body
+    size="600px"
+    title="Create Resource"
+    @close="closeDrawer"
+  >
+    <router-view /> <!-- 这里展示创建页面的路由组件 -->
+  </el-drawer>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      drawerVisible: true
+    }
+  },
+  methods: {
+    openDrawer() {
+      this.drawerVisible = true
+    },
+    closeDrawer() {
+      this.drawerVisible = false
+    }
+  }
+}
+</script>

src/components/Form/AutoDataForm/components/NestedField.vue

@@ -4,7 +4,7 @@
     :disabled="disabled"
     :fields="iFields"
     :form="value"
-    style="margin-left: -26%;margin-right: -6%"
+    class="sub-form"
     v-bind="kwargs"
     @change="updateValue($event)"
     @input="updateValue($event)"
@@ -106,5 +106,9 @@ export default {
 </script>
 
 <style scoped>
+.sub-form {
+  margin-left: -33%;
+  margin-right: 10px;
+}
 
 </style>

src/components/Form/AutoDataForm/utils.js

@@ -5,9 +5,10 @@ import Switcher from '@/components/Form/FormFields/Switcher.vue'
 import rules from '@/components/Form/DataForm/rules'
 import BasicTree from '@/components/Form/FormFields/BasicTree.vue'
 import JsonEditor from '@/components/Form/FormFields/JsonEditor.vue'
-import { assignIfNot } from '@/utils/common'
+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 {
   constructor(emit) {
@@ -103,6 +104,7 @@ export class FormFieldGenerator {
         field.el.filterable = true
       }
     }
+
     field.type = type
     return field
   }
@@ -158,12 +160,24 @@ export class FormFieldGenerator {
     return field
   }
 
+  afterGenerateField(field) {
+    field.label = toSentenceCase(field.label)
+    if (field.helpText) {
+      field.helpText = toSentenceCase(field.helpText)
+    }
+    if ((!field.helpTip && field.helpText && field.helpTextAsTip) || field.component === Switcher) {
+      field.helpTip = field.helpText
+      field.helpText = ''
+    }
+    return field
+  }
+
   generateField(name, fieldsMeta, remoteFieldsMeta) {
     let field = { id: name, prop: name, el: {}, attrs: {}, rules: [] }
     const remoteFieldMeta = remoteFieldsMeta[name] || {}
     const fieldMeta = fieldsMeta[name] || {}
     field.label = remoteFieldMeta.label
-    field.helpText = remoteFieldMeta['help_text']
+    field.helpText = toSentenceCase(remoteFieldMeta['help_text'])
     field = this.generateFieldByType(remoteFieldMeta.type, field, fieldMeta, remoteFieldMeta)
     field = this.generateFieldByName(name, field)
     field = this.generateFieldByOther(field, fieldMeta, remoteFieldMeta)
@@ -172,8 +186,23 @@ export class FormFieldGenerator {
     field = Object.assign(field, fieldMeta)
     field.el = el
     field.rules = rules
+    field = this.setPlaceholder(field, remoteFieldMeta)
+    field = this.afterGenerateField(field)
     _.set(field, 'attrs.error', '')
-    // Vue.$log.debug('Generate field: ', name, field)
+    Vue.$log.debug('Generate field: ', name, field)
+    return field
+  }
+
+  setPlaceholder(field, remoteFieldMeta) {
+    const label = field.label
+    if (!label) {
+      return field
+    }
+    if (field.type === 'select' || [ObjectSelect2].indexOf(field.component) > -1) {
+      field.el.placeholder = i18n.t('Please select ') + label.toLowerCase()
+    } else if (field.type === 'input') {
+      field.el.placeholder = field.label
+    }
     return field
   }
 

src/components/Form/CronTab/Crontab.vue

@@ -2,7 +2,7 @@
 <template>
   <div>
     <el-tabs type="border-card">
-      <el-tab-pane v-if="shouldHide('min')" :label="$tc('common.CronTab.min')" class="crontab-panel">
+      <el-tab-pane v-if="shouldHide('min')" :label="$tc('Min')" class="crontab-panel">
         <CrontabMin
           ref="cronmin"
           :check="checkNumber"
@@ -11,7 +11,7 @@
         />
       </el-tab-pane>
 
-      <el-tab-pane v-if="shouldHide('hour')" :label="$tc('common.CronTab.hour')">
+      <el-tab-pane v-if="shouldHide('hour')" :label="$tc('Hour')">
         <CrontabHour
           ref="cronhour"
           :check="checkNumber"
@@ -20,7 +20,7 @@
         />
       </el-tab-pane>
 
-      <el-tab-pane v-if="shouldHide('day')" :label="$tc('common.CronTab.day')">
+      <el-tab-pane v-if="shouldHide('day')" :label="$tc('Day')">
         <CrontabDay
           ref="cronday"
           :check="checkNumber"
@@ -29,7 +29,7 @@
         />
       </el-tab-pane>
 
-      <el-tab-pane v-if="shouldHide('month')" :label="$tc('common.CronTab.month')">
+      <el-tab-pane v-if="shouldHide('month')" :label="$tc('Month')">
         <CrontabMonth
           ref="cronmonth"
           :check="checkNumber"
@@ -38,7 +38,7 @@
         />
       </el-tab-pane>
 
-      <el-tab-pane v-if="shouldHide('week')" :label="$tc('common.CronTab.week')">
+      <el-tab-pane v-if="shouldHide('week')" :label="$tc('Week')">
         <CrontabWeek
           ref="cronweek"
           :check="checkNumber"
@@ -50,7 +50,7 @@
 
     <div class="popup-main">
       <div class="popup-result">
-        <p class="title">{{ this.$t('common.CronTab.timeExpression') }}</p>
+        <p class="title">{{ this.$t('TimeExpression') }}</p>
         <table>
           <thead>
             <th v-for="item of tabTitles" :key="item" width="40">{{ item }}</th>
@@ -95,26 +95,22 @@
             </td>
           </tbody>
         </table>
-        <div style="margin: 0 auto; text-align: center">
-          <div style="font-size: 13px;">{{ this.$t('common.CronTab.cronExpression') }}</div>
-          <div style="font-size: 13px;">{{ contabValueString }}</div>
-        </div>
+        <CrontabResult :ex="contabValueString" @crontabDiffChange="crontabDiffChangeHandle" />
       </div>
-      <CrontabResult :ex="contabValueString" @crontabDiffChange="crontabDiffChangeHandle" />
 
       <div class="pop_btn">
         <el-button
           size="small"
           @click="clearCron"
         >
-          {{ this.$t('common.Reset') }}
+          {{ this.$t('Reset') }}
         </el-button>
         <el-button
           size="small"
           type="primary"
           @click="submitFill"
         >
-          {{ this.$t('common.Confirm') }}
+          {{ this.$t('Confirm') }}
         </el-button>
       </div>
     </div>
@@ -155,7 +151,7 @@ export default {
   },
   data() {
     return {
-      tabTitles: [this.$t('common.CronTab.min'), this.$t('common.CronTab.hour'), this.$t('common.CronTab.day'), this.$t('common.CronTab.month'), this.$t('common.CronTab.week')],
+      tabTitles: [this.$t('Min'), this.$t('Hour'), this.$t('Day'), this.$t('Month'), this.$t('Week')],
       tabActive: 0,
       myindex: 0,
       contabValueObj: {
@@ -367,7 +363,7 @@ export default {
     submitFill() {
       const crontabDiffMin = this.crontabDiff / 1000 / 60
       if (crontabDiffMin > 0 && crontabDiffMin < 10) {
-        const msg = this.$tc('common.crontabDiffError')
+        const msg = this.$tc('CrontabDiffError')
         this.$message.error(msg)
         return
       }
@@ -398,7 +394,7 @@ export default {
 <style lang='scss' scoped>
 .pop_btn {
   float: right;
-  margin-top: 20px;
+  margin-top: 10px;
 }
 
 .popup-main {
@@ -424,7 +420,6 @@ export default {
   margin: 17px auto;
   padding: 10px 10px 10px;
   border: 1px solid #dcdfe6;
-  box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%);
 }
 
 .popup-result .title {
@@ -448,12 +443,10 @@ export default {
 .popup-result table span {
   display: block;
   width: 100%;
-  font-family: arial;
   line-height: 30px;
   height: 30px;
   white-space: nowrap;
   overflow: hidden;
-  border: 1px solid #e8e8e8;
 }
 
 .popup-result-scroll {
@@ -463,14 +456,14 @@ export default {
   overflow-y: auto;
 }
 
-.crontab-panel {
-  > > > .el-input-number {
+ >>> {
+  .el-form-item--mini.el-form-item,
+  .el-form-item--small.el-form-item {
+    margin-bottom: 5px;
+  }
+
+   .el-input-number {
     margin: 0 5px
   }
 }
-
-.el-form-item--mini.el-form-item,
-.el-form-item--small.el-form-item {
-  margin-bottom: 10px;
-}
 </style>

src/components/Form/CronTab/components/Crontab-Day.vue

@@ -3,31 +3,31 @@
   <el-form size="small">
     <el-form-item>
       <el-radio v-model="radioValue" :label="1">
-        {{ this.$t('common.CronTab.day') }}，{{ this.$t('common.CronTab.wildcardsAllowed') }}[, - * /]
+        {{ this.$t('Day') }}，{{ this.$t('WildcardsAllowed') }}[, - * /]
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
-        {{ this.$t('common.CronTab.from') }}
+        {{ this.$t('From') }}
         <el-input-number v-model="cycle01" :max="31" :min="0" size="mini" /> -
-        <el-input-number v-model="cycle02" :max="31" :min="0" size="mini" /> {{ this.$t('common.CronTab.day') }}
+        <el-input-number v-model="cycle02" :max="31" :min="0" size="mini" /> {{ this.$t('Day') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="4">
-        {{ this.$t('common.CronTab.every') }}
-        <el-input-number v-model="average02" :max="31" :min="1" size="mini" /> {{ this.$t('common.CronTab.day') }}{{ this.$t('common.CronTab.executeOnce') }}
+        {{ this.$t('Every') }}
+        <el-input-number v-model="average02" :max="31" :min="1" size="mini" /> {{ this.$t('Day') }} {{ this.$t('ExecuteOnce') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="7">
-        {{ this.$t('common.CronTab.appoint') }}
+        {{ this.$t('Appoint') }}
         <el-select
           v-model="checkboxList"
-          :placeholder="$tc('common.CronTab.manyChoose')"
+          :placeholder="$tc('ManyChoose')"
           clearable
           multiple
           style="width:100%"
@@ -190,7 +190,5 @@ export default {
 </script>
 
 <style scoped>
-	.el-form-item--small.el-form-item {
-    margin-bottom: 10px;
-  }
+
 </style>

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

@@ -3,31 +3,31 @@
   <el-form size="small">
     <el-form-item>
       <el-radio v-model="radioValue" :label="1">
-        {{ this.$t('common.CronTab.hour') }}，{{ this.$t('common.CronTab.wildcardsAllowed') }}[, - * /]
+        {{ this.$t('Hour') }}，{{ this.$t('WildcardsAllowed') }}[, - * /]
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="2">
-        {{ this.$t('common.CronTab.from') }}
+        {{ this.$t('From') }}
         <el-input-number v-model="cycle01" :max="60" :min="0" size="mini" /> -
-        <el-input-number v-model="cycle02" :max="60" :min="0" size="mini" /> {{ this.$t('common.CronTab.hour') }}
+        <el-input-number v-model="cycle02" :max="60" :min="0" size="mini" /> {{ this.$t('Hour') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
-        {{ this.$t('common.CronTab.every') }}
-        <el-input-number v-model="average02" :max="60" :min="1" size="mini" /> {{ this.$t('common.CronTab.hour') }}{{ this.$t('common.CronTab.executeOnce') }}
+        {{ this.$t('Every') }}
+        <el-input-number v-model="average02" :max="60" :min="1" size="mini" /> {{ this.$t('Hour') }} {{ this.$t('ExecuteOnce') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="4">
-        {{ this.$t('common.CronTab.appoint') }}
+        {{ this.$t('Appoint') }}
         <el-select
           v-model="checkboxList"
-          :placeholder="$tc('common.CronTab.manyChoose')"
+          :placeholder="$tc('ManyChoose')"
           clearable
           multiple
           style="width:100%"
@@ -159,7 +159,5 @@ export default {
 </script>
 
 <style scoped>
-	.el-form-item--small.el-form-item {
-    margin-bottom: 10px
-  }
+
 </style>

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

@@ -3,31 +3,31 @@
   <el-form size="small">
     <el-form-item>
       <el-radio v-model="radioValue" :label="1" size="mini">
-        {{ this.$t('common.CronTab.min') }}，{{ this.$t('common.CronTab.wildcardsAllowed') }}[, - * /]
+        {{ this.$t('Minute') }}，{{ this.$t('WildcardsAllowed') }}[, - * /]
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="2">
-        {{ this.$t('common.CronTab.from') }}
+        {{ this.$t('From') }}
         <el-input-number v-model="cycle01" :max="60" :min="0" size="mini" /> -
-        <el-input-number v-model="cycle02" :max="60" :min="0" size="mini" /> {{ this.$t('common.CronTab.min') }}
+        <el-input-number v-model="cycle02" :max="60" :min="0" size="mini" /> {{ this.$t('Minute') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
-        {{ this.$t('common.CronTab.from') }}
-        <el-input-number v-model="average02" :max="60" :min="1" size="mini" /> {{ this.$t('common.CronTab.min') }}{{ this.$t('common.CronTab.executeOnce') }}
+        {{ this.$t('From') }}
+        <el-input-number v-model="average02" :max="60" :min="1" size="mini" /> {{ this.$t('Minute') }} {{ this.$t('ExecuteOnce') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="4">
-        {{ this.$t('common.CronTab.appoint') }}
+        {{ this.$t('Appoint') }}
         <el-select
           v-model="checkboxList"
-          :placeholder="$tc('common.CronTab.manyChoose')"
+          :placeholder="$tc('ManyChoose')"
           clearable
           multiple
           size="small"
@@ -158,7 +158,5 @@ export default {
 </script>
 
 <style scoped>
-	.el-form-item--small.el-form-item {
-    margin-bottom: 10px;
-  }
+
 </style>

src/components/Form/CronTab/components/Crontab-Month.vue

@@ -3,31 +3,31 @@
   <el-form size="small">
     <el-form-item>
       <el-radio v-model="radioValue" :label="1">
-        {{ this.$t('common.CronTab.month') }}，{{ this.$t('common.CronTab.wildcardsAllowed') }}[, - * /]
+        {{ this.$t('Month') }}，{{ this.$t('WildcardsAllowed') }}[, - * /]
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="2">
-        {{ this.$t('common.CronTab.from') }}
+        {{ this.$t('From') }}
         <el-input-number v-model="cycle01" :max="12" :min="1" size="mini" /> -
-        <el-input-number v-model="cycle02" :max="12" :min="1" size="mini" /> {{ this.$t('common.CronTab.month') }}
+        <el-input-number v-model="cycle02" :max="12" :min="1" size="mini" /> {{ this.$t('Month') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
-        {{ this.$t('common.CronTab.every') }}
-        <el-input-number v-model="average02" :max="12" :min="1" size="mini" /> {{ this.$t('common.CronTab.month') }}{{ this.$t('common.CronTab.executeOnce') }}
+        {{ this.$t('Every') }}
+        <el-input-number v-model="average02" :max="12" :min="1" size="mini" /> {{ this.$t('Month') }} {{ this.$t('ExecuteOnce') }}
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="4">
-        {{ this.$t('common.CronTab.appoint') }}
+        {{ this.$t('Appoint') }}
         <el-select
           v-model="checkboxList"
-          :placeholder="$tc('common.CronTab.manyChoose')"
+          :placeholder="$tc('ManyChoose')"
           clearable
           multiple
           style="width:100%"
@@ -164,7 +164,5 @@ export default {
 </script>
 
 <style scoped>
-	.el-form-item--small.el-form-item {
-    margin-bottom: 10px;
-  }
+
 </style>

src/components/Form/CronTab/components/Crontab-Result.vue

@@ -1,12 +1,12 @@
 /* eslint-disable */
 <template>
-  <div class="popup-result">
-    <p class="title">{{ this.$t('common.CronTab.runningTimes') }}</p>
+  <div class="popup-result-time">
+    <p class="title">{{ this.$t('RunningTimes') }}</p>
     <ul class="popup-result-scroll">
       <template v-if="isShow">
         <li v-for="item in resultList" :key="item">{{ item }}</li>
       </template>
-      <li v-else>{{ this.$t('common.CronTab.calculationResults') }}</li>
+      <li v-else>{{ this.$t('CalculationResults') }}</li>
     </ul>
   </div>
 </template>
@@ -65,3 +65,12 @@ export default {
 }
 
 </script>
+<style lang='scss' scoped>
+.popup-result-time {
+  margin-top: 10px;
+}
+.title {
+  margin-bottom: 0;
+}
+
+</style>

src/components/Form/CronTab/components/Crontab-Week.vue

@@ -3,13 +3,13 @@
   <el-form size="small">
     <el-form-item>
       <el-radio v-model="radioValue" :label="1">
-        {{ this.$t('common.CronTab.week') }}，{{ this.$t('common.CronTab.wildcardsAllowed') }}[, - * /]
+        {{ this.$t('Week') }}，{{ this.$t('WildcardsAllowed') }}[, - * /]
       </el-radio>
     </el-form-item>
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="3">
-        {{ this.$t('common.CronTab.cycleFromWeek') }}
+        {{ this.$t('CycleFromWeek') }}
         <el-input-number v-model="cycle01" :max="7" :min="1" size="mini" /> -
         <el-input-number v-model="cycle02" :max="7" :min="1" size="mini" />
       </el-radio>
@@ -17,10 +17,10 @@
 
     <el-form-item>
       <el-radio v-model="radioValue" :label="6">
-        {{ this.$t('common.CronTab.appoint') }}
+        {{ this.$t('Appoint') }}
         <el-select
           v-model="checkboxList"
-          :placeholder="$tc('common.CronTab.manyChoose')"
+          :placeholder="$tc('ManyChoose')"
           clearable
           multiple
           style="width:100%"
@@ -60,7 +60,7 @@ export default {
       average01: 1,
       average02: 1,
       checkboxList: [],
-      weekList: [this.$t('common.CronTab.Monday'), this.$t('common.CronTab.Tuesday'), this.$t('common.CronTab.Wednesday'), this.$t('common.CronTab.Thursday'), this.$t('common.CronTab.Friday'), this.$t('common.CronTab.Saturday'), this.$t('common.CronTab.Sunday')],
+      weekList: [this.$t('Monday'), this.$t('Tuesday'), this.$t('Wednesday'), this.$t('Thursday'), this.$t('Friday'), this.$t('Saturday'), this.$t('Sunday')],
       checkNum: this.$options.propsData.check
     }
   },
@@ -181,7 +181,5 @@ export default {
 </script>
 
 <style scoped>
-	.el-form-item--small.el-form-item {
-    margin-bottom: 10px;
-  }
+
 </style>

src/components/Form/CronTab/index.vue

@@ -3,8 +3,9 @@
     <div class="box">
       <el-input v-model="input" clearable @clear="onClear" @focus="showDialog" />
     </div>
-    <el-dialog
-      :title="$tc('common.CronTab.newCron')"
+    <Dialog
+      :show-buttons="false"
+      :title="$tc('NewCron')"
       :visible.sync="showCron"
       append-to-body
       top="8vh"
@@ -15,15 +16,16 @@
         @fill="crontabFill"
         @hide="showCron = false"
       />
-    </el-dialog>
+    </Dialog>
   </div>
 </template>
 
 <script>
 import Crontab from './Crontab.vue'
+import Dialog from '@/components/Dialog/index.vue'
 
 export default {
-  components: { Crontab },
+  components: { Crontab, Dialog },
   props: {
     value: {
       type: String,
@@ -55,8 +57,9 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang='scss' scoped>
   .el-dialog__body {
     padding: 12px 16px;
   }
+
 </style>

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

@@ -1,17 +1,18 @@
 <template>
   <el-form-item
-    v-show="_show"
-    :prop="prop"
+    v-if="_show"
+    :class="classes"
     :label="data.label"
+    :prop="prop"
     :rules="_show && Array.isArray(data.rules) ? data.rules : []"
     v-bind="data.attrs"
   >
-    <template v-if="data.helpTips" #label>
-      {{ data.label }}
-      <el-tooltip placement="top" effect="light" popper-class="help-tips">
-        <div slot="content" v-html="data.helpTips" />
-        <i class="fa fa-question-circle-o" />
+    <template v-if="data.label" #label>
+      <el-tooltip v-if="data.helpTip" effect="light" placement="top" popper-class="help-tips">
+        <div slot="content" v-html="data.helpTip" />
+        <i class="el-icon-warning-outline help-tip-icon" />
       </el-tooltip>
+      <span>{{ data.label }}</span>
     </template>
     <template v-if="readonly && hasReadonlyContent">
       <div
@@ -33,9 +34,9 @@
     <custom-component
       v-else
       :component="data.component || `el-${data.type}`"
-      v-bind="componentProps"
-      :value="itemValue"
       :disabled="disabled || componentProps.disabled || readonly"
+      :value="itemValue"
+      v-bind="componentProps"
       v-on="listeners"
     >
       <template v-for="opt in options">
@@ -47,8 +48,8 @@
         <el-checkbox-button
           v-else-if="data.type === 'checkbox-group' && data.style === 'button'"
           :key="opt.value"
-          v-bind="opt"
           :label="'value' in opt ? opt.value : opt.label"
+          v-bind="opt"
         >
           {{ opt.label }}
         </el-checkbox-button>
@@ -56,8 +57,8 @@
         <el-checkbox
           v-else-if="data.type === 'checkbox-group' && data.style !== 'button'"
           :key="opt.value"
-          v-bind="opt"
           :label="'value' in opt ? opt.value : opt.label"
+          v-bind="opt"
         >
           {{ opt.label }}
         </el-checkbox>
@@ -66,8 +67,8 @@
         <el-radio
           v-else-if="data.type === 'radio-group'"
           :key="opt.label"
-          v-bind="opt"
           :label="'value' in opt ? opt.value : opt.label"
+          v-bind="opt"
         >{{ opt.label }}
         </el-radio>
       </template>
@@ -125,8 +126,7 @@ export default {
   data() {
     return {
       propsInner: {},
-      isBlurTrigger:
-        this.data.rules &&
+      isBlurTrigger: this.data.rules &&
         this.data.rules.some(rule => {
           return rule.required && rule.trigger === 'blur'
         })
@@ -145,6 +145,9 @@ export default {
     _show() {
       return !this.hiddenStatus && this.enableWhenStatus
     },
+    classes() {
+      return 'el-form-item-' + this.data.prop + ' ' + (this.data.attrs?.class || '')
+    },
     listeners() {
       const {
         data: {
@@ -279,3 +282,10 @@ export default {
   }
 }
 </script>
+<style lang='scss'>
+.help-tip-icon {
+  &:hover {
+    cursor: pointer;
+  }
+}
+</style>

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

@@ -1,16 +1,16 @@
 <template>
-  <el-form ref="elForm" v-bind="$attrs" :model="value" class="el-form-renderer">
+  <el-form ref="elForm" :model="value" class="el-form-renderer" v-bind="$attrs">
     <template v-for="item in innerContent">
       <slot v-if="!isHidden(item)" :name="`id:${item.id}`" />
       <component
         :is="item.type === GROUP ? 'render-form-group' : 'render-form-item'"
         :key="item.id"
         :data="item"
-        :value="value"
-        :item-value="value[item.id]"
         :disabled="disabled || item.disabled"
-        :readonly="readonly || item.readonly"
+        :item-value="value[item.id]"
         :options="options[item.id]"
+        :readonly="readonly || item.readonly"
+        :value="value"
         @updateValue="updateValue"
       />
       <slot v-if="!isHidden(item)" :name="`$id:${item.id}`" />
@@ -25,13 +25,7 @@ import _clonedeep from 'lodash.clonedeep'
 import RenderFormGroup from './components/render-form-group.vue'
 import RenderFormItem from './components/render-form-item.vue'
 import transformContent from './util/transform-content'
-import {
-  collect,
-  mergeValue,
-  transformOutputValue,
-  transformInputValue,
-  correctValue
-} from './util/utils'
+import { collect, correctValue, mergeValue, transformInputValue, transformOutputValue } from './util/utils'
 
 const GROUP = 'group'
 

src/components/Form/DataForm/index.vue

@@ -5,7 +5,7 @@
     :content="fields"
     :form="basicForm"
     :label-position="labelPosition"
-    label-width="20%"
+    label-width="25%"
     v-bind="$attrs"
     v-on="$listeners"
   >
@@ -25,14 +25,14 @@
         {{ button.title }}
       </el-button>
       <el-button v-if="defaultButton && hasReset" size="small" @click="resetForm('form')">
-        {{ $t('common.Reset') }}
+        {{ $t('Reset') }}
       </el-button>
       <el-button
         v-if="defaultButton && hasSaveContinue"
         size="small"
         @click="submitForm('form', true)"
       >
-        {{ $t('common.SaveAndAddAnother') }}
+        {{ $t('SaveAndAddAnother') }}
       </el-button>
       <el-button
         v-if="defaultButton"
@@ -80,7 +80,7 @@ export default {
     submitBtnText: {
       type: String,
       default() {
-        return this.$t('common.Submit')
+        return this.$t('Submit')
       }
     },
     hasSaveContinue: {
@@ -155,12 +155,16 @@ export default {
 </script>
 
 <style lang="less" scoped>
+  .el-form {
+    margin-right: 80px;
+  }
   .el-form ::v-deep .el-form-item {
-    margin-bottom: 12px;
+    margin-bottom: 10px;
   }
 
   .el-form ::v-deep .el-form-item__content {
     width: 75%;
+    line-height: 32px;
   }
 
   .mobile.el-form ::v-deep .el-form-item__content {
@@ -169,6 +173,7 @@ export default {
 
   .el-form ::v-deep .el-form-item__label {
     padding: 0 30px 0 0;
+    line-height: 32px;
   }
 
   .el-form ::v-deep .el-form-item__error {
@@ -183,15 +188,6 @@ export default {
     margin-left: 0;
   }
 
-  .el-form ::v-deep .help-block {
-    display: block;
-    margin-top: 5px;
-    margin-bottom: 10px;
-    color: #999;
-    font-size: 12px;
-    line-height: 18px;
-  }
-
   .el-form ::v-deep .help-block a {
     color: var(--color-primary);
   }

src/components/Form/DataForm/rules/index.js

@@ -1,16 +1,16 @@
 import i18n from '@/i18n/i18n'
 
 export const Required = {
-  required: true, message: i18n.t('common.fieldRequiredError'), trigger: 'blur'
+  required: true, message: i18n.t('FieldRequiredError'), trigger: 'blur'
 }
 
 export const RequiredChange = {
-  required: true, message: i18n.t('common.fieldRequiredError'), trigger: 'change'
+  required: true, message: i18n.t('FieldRequiredError'), trigger: 'change'
 }
 
 export const EmailCheck = {
   type: 'email',
-  message: i18n.t('common.InputEmailAddress'),
+  message: i18n.t('InputEmailAddress'),
   trigger: ['blur', 'change']
 }
 
@@ -22,7 +22,7 @@ export const IpCheck = {
     if (urlRegExp.test(value)) {
       callback()
     } else {
-      callback(new Error(i18n.t('common.FormatError')))
+      callback(new Error(i18n.t('FormatError')))
     }
   },
   trigger: ['blur', 'change']
@@ -32,7 +32,7 @@ export const specialEmojiCheck = {
   validator: (rule, value, callback) => {
     value = value?.trim()
     if (/[\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/.test(value)) {
-      callback(new Error(i18n.t('common.NotSpecialEmoji')))
+      callback(new Error(i18n.t('NotSpecialEmoji')))
     } else {
       callback()
     }
@@ -45,7 +45,7 @@ export const matchAlphanumericUnderscore = {
   validator: (rule, value, callback) => {
     value = value?.trim()
     if (!/^[a-zA-Z0-9_]+$/.test(value)) {
-      callback(new Error(i18n.t('common.notAlphanumericUnderscore')))
+      callback(new Error(i18n.t('notAlphanumericUnderscore')))
     } else {
       callback()
     }
@@ -58,7 +58,7 @@ export const MatchExcludeParenthesis = {
   validator: (rule, value, callback) => {
     value = value?.trim()
     if (!/^[^()]*$/.test(value)) {
-      callback(new Error(i18n.t('common.notParenthesis')))
+      callback(new Error(i18n.t('notParenthesis')))
     } else {
       callback()
     }
@@ -84,7 +84,7 @@ export const JsonRequired = {
       typeof value === 'string' ? JSON.parse(value) : value
       callback()
     } catch (e) {
-      callback(new Error(i18n.t('common.InvalidJson')))
+      callback(new Error(i18n.t('InvalidJson')))
     }
   }
 }
@@ -97,11 +97,11 @@ export const JsonRequiredUserNameMapped = {
       const v = typeof value === 'string' ? JSON.parse(value) : value
       const hasUserName = _.map(v, (value) => value)
       if (!hasUserName.includes('username')) {
-        callback(new Error(i18n.t('common.requiredHasUserNameMapped')))
+        callback(new Error(i18n.t('requiredHasUserNameMapped')))
       }
       callback()
     } catch (e) {
-      callback(new Error(i18n.t('common.InvalidJson')))
+      callback(new Error(i18n.t('InvalidJson')))
     }
   }
 }

src/components/Form/FormFields/AllOrSpec.vue

@@ -33,8 +33,8 @@ export default {
     return {
       type: 'all', // all, selected
       types: [
-        { name: 'all', label: this.$t('common.All') },
-        { name: 'spec', label: this.$t('common.Spec') + this.$t('common.WordSep') + this.resource }
+        { name: 'all', label: this.$t('All') },
+        { name: 'spec', label: this.$t('Spec') + this.$t('WordSep') + this.resource }
       ],
       selected: []
     }

src/components/Form/FormFields/BoolTextReadonly.vue

@@ -14,13 +14,13 @@ export default {
     trueText: {
       type: String,
       default: function() {
-        return this.$t('common.Yes')
+        return this.$t('Yes')
       }
     },
     falseText: {
       type: String,
       default: function() {
-        return this.$t('common.No')
+        return this.$t('No')
       }
     }
 

src/components/Form/FormFields/CodeEditor.vue

@@ -19,12 +19,12 @@
           <el-autocomplete
             v-if="item.type === 'input' &&item.el && item.el.autoComplete"
             v-model="item.value"
-            :placeholder="item.placeholder"
             :fetch-suggestions="item.el.query"
+            :placeholder="item.placeholder"
             class="inline-input"
             size="mini"
-            @select="item.callback(item.value)"
             @change="item.callback(item.value)"
+            @select="item.callback(item.value)"
           />
           <el-input
             v-else-if="item.type==='input'"
@@ -94,10 +94,10 @@
       </div>
 
       <div v-if="toolbar.hasOwnProperty('fold')" class="fold">
-        <el-tooltip :content="$tc('common.MoreActions')" placement="top">
+        <el-tooltip :content="$tc('MoreActions')" placement="top">
           <i
-            class="fa"
             :class="[isFold ? 'fa-angle-double-right': 'fa-angle-double-down']"
+            class="fa"
             @click="onChangeFold"
           />
         </el-tooltip>
@@ -238,15 +238,15 @@ export default {
   }
 }
 
-> > > .CodeMirror pre.CodeMirror-line,
-> > > .CodeMirror-linenumber.CodeMirror-gutter-elt {
+>>> .CodeMirror pre.CodeMirror-line,
+>>> .CodeMirror-linenumber.CodeMirror-gutter-elt {
   line-height: 18px !important;
 }
 
 .runas-input {
   height: 28px;
 
-  > > > {
+  >>> {
     .el-select {
       width: 100px;
     }
@@ -258,8 +258,8 @@ export default {
     border: none;
     padding: 2px;
     font-size: 14px;
-    width: 26px;
-    height: 26px;
+    width: 28px;
+    height: 28px;
     color: #888;
     background-color: transparent;
     margin-left: 2px;
@@ -270,16 +270,16 @@ export default {
   min-width: 100px;
 }
 
-.autoWidth-select > > > .el-input__prefix {
+.autoWidth-select >>> .el-input__prefix {
   position: relative;
-  left: 0px;
+  left: 0;
   box-sizing: border-box;
-  height: 28px;
-  line-height: 28px;
+  height: 30px;
+  line-height: 30px;
   visibility: hidden;
 }
 
-.autoWidth-select > > > input {
+.autoWidth-select >>> input {
   position: absolute;
   padding-left: 0px;
   border: none;
@@ -290,7 +290,7 @@ export default {
   line-height: 27px;
 }
 
-> > > .el-select {
+>>> .el-select {
   top: -1px;
 
   .el-input .el-select__caret {
@@ -298,7 +298,7 @@ export default {
   }
 }
 
-> > > .el-button.el-button--default {
+>>> .el-button.el-button--default {
   background-color: #e6e6e6;
 }
 

src/components/Form/FormFields/DatetimeRangePicker.vue

@@ -1,15 +1,15 @@
 <template>
   <el-date-picker
     v-model="value"
-    type="datetimerange"
-    :range-separator="$tc('common.To')"
-    :start-placeholder="$tc('common.DateStart')"
-    :end-placeholder="$tc('common.DateEnd')"
-    size="small"
     :clearable="false"
-    class="datepicker"
-    :picker-options="pickerOptions"
     :default-time="['00:00:01', '23:59:59']"
+    :end-placeholder="$tc('DateEnd')"
+    :picker-options="pickerOptions"
+    :range-separator="$tc('To')"
+    :start-placeholder="$tc('DateStart')"
+    class="datepicker"
+    size="small"
+    type="datetimerange"
     v-bind="$attrs"
     @change="handleDateChange"
     v-on="$listeners"
@@ -40,23 +40,23 @@ export default {
       pickerOptions: {
         shortcuts: [
           {
-            text: this.$t('common.DateLast24Hours'),
+            text: this.$t('DateLast24Hours'),
             onClick: (picker) => this.onShortcutClick(picker, 1)
           },
           {
-            text: this.$t('common.DateLastWeek'),
+            text: this.$t('DateLastWeek'),
             onClick: (picker) => this.onShortcutClick(picker, 7)
           }, {
-            text: this.$t('common.DateLastMonth'),
+            text: this.$t('DateLastMonth'),
             onClick: (picker) => this.onShortcutClick(picker, 30)
           }, {
-            text: this.$t('common.DateLast3Months'),
+            text: this.$t('DateLast3Months'),
             onClick: (picker) => this.onShortcutClick(picker, 90)
           }, {
-            text: this.$t('common.DateLastHarfYear'),
+            text: this.$t('DateLastHarfYear'),
             onClick: (picker) => this.onShortcutClick(picker, 183)
           }, {
-            text: this.$t('common.DateLastYear'),
+            text: this.$t('DateLastYear'),
             onClick: (picker) => this.onShortcutClick(picker, 365)
           }
         ]
@@ -87,11 +87,6 @@ export default {
   .datepicker {
     width: 233px;
 
-    & >>> .el-range__icon {
-      margin-top: 2px;
-      margin-right: 3px;
-    }
-
     & >>> .el-range-input {
       width: 49%;
     }

src/components/Form/FormFields/InputWithUnit.vue

@@ -0,0 +1,45 @@
+<template>
+  <el-input v-bind="$attrs" v-on="$listeners">
+    <template slot="append">{{ iUnit }}</template>
+  </el-input>
+</template>
+
+<script>
+export default {
+  name: 'InputWithUnit',
+  props: {
+    unit: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      displayMapper: {
+        'second': this.$t('Second'), // 'sec' is the default value of 'unit
+        'min': this.$t('Minute'), // 'min' is the default value of 'unit
+        'hour': this.$t('Hour'), // 'hour' is the default value of 'unit
+        'day': this.$t('Day'), // 'day' is the default value of 'unit
+        'week': this.$t('Week'), // 'week' is the default value of 'unit
+        'month': this.$t('Month'), // 'month' is the default value of 'unit
+        'year': this.$t('Year') // 'year' is the default value of 'unit
+      }
+    }
+  },
+  computed: {
+    iUnit() {
+      console.log('Unit is:', this.unit)
+      return this.displayMapper[this.unit] || this.unit
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+>>> .el-input-group__append {
+  color: inherit;
+  padding: 0 15px;
+}
+
+</style>

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

@@ -2,7 +2,7 @@
   <Dialog
     :destroy-on-close="true"
     :show-buttons="false"
-    :title="$tc('common.SelectAttrs')"
+    :title="$tc('SelectAttrs')"
     v-bind="$attrs"
     v-on="$listeners"
   >
@@ -51,7 +51,7 @@ export default {
         fields: [
           {
             id: 'name',
-            label: this.$t('common.AttrName'),
+            label: this.$t('AttrName'),
             type: 'select',
             options: this.attrs.map(attr => {
               let disabled = this.attrsAdded.includes(attr.name) && this.form.name !== attr.name
@@ -74,7 +74,7 @@ export default {
           },
           {
             id: 'match',
-            label: this.$t('common.Match'),
+            label: this.$t('Match'),
             type: 'select',
             options: attrMatchOptions,
             on: {
@@ -88,7 +88,7 @@ export default {
           },
           {
             id: 'value',
-            label: this.$t('common.AttrValue'),
+            label: this.$t('AttrValue'),
             component: ValueField,
             el: {
               match: attrMatchOptions[0].value,

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

@@ -2,7 +2,7 @@
   <Dialog
     :destroy-on-close="true"
     :show-buttons="false"
-    :title="$tc('common.MatchResult')"
+    :title="$tc('MatchResult')"
     :v-bind="$attrs"
     :v-on="$listeners"
     :visible.sync="iVisible"

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

@@ -10,10 +10,10 @@
       <DataTable :config="tableConfig" class="attr-list" />
       <div class="actions">
         <el-button size="mini" type="primary" @click="handleAttrAdd">
-          {{ $t('common.Add') }}
+          {{ $t('Add') }}
         </el-button>
         <span style="padding-left: 10px; font-size: 13px">
-          <span class="help-tips; ">{{ $t('common.MatchedCount') }}:</span>
+          <span class="help-tips; ">{{ $t('MatchedCount') }}:</span>
           <a class="text-link" style="padding: 0 5px;" @click="showAttrMatchTable">{{ attrMatchCount }}</a>
         </span>
       </div>
@@ -101,16 +101,16 @@ export default {
       ids: this.value.ids || [],
       editIndex: -1,
       types: [
-        { name: 'all', label: this.$t('common.All') + this.resource },
-        { name: 'ids', label: this.$t('common.Spec') + this.resource },
-        { name: 'attrs', label: this.$t('common.SelectByAttr') }
+        { name: 'all', label: this.$t('All') + ' ' + this.resource },
+        { name: 'ids', label: this.$t('Spec') + ' ' + this.resource },
+        { name: 'attrs', label: this.$t('SelectByAttr') }
       ],
       tableConfig: {
         columns: [
-          { prop: 'name', label: this.$t('common.AttrName'), formatter: tableFormatter('name') },
-          { prop: 'match', label: this.$t('common.Match'), formatter: tableFormatter('match') },
-          { prop: 'value', label: this.$t('common.AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs }},
-          { prop: 'action', label: this.$t('common.Action'), align: 'center', width: '120px', formatter: (row, col, cellValue, index) => {
+          { prop: 'name', label: this.$t('AttrName'), formatter: tableFormatter('name') },
+          { prop: 'match', label: this.$t('Match'), formatter: tableFormatter('match') },
+          { prop: 'value', label: this.$t('AttrValue'), formatter: ValueFormatter, formatterArgs: { attrs: this.attrs }},
+          { prop: 'action', label: this.$t('Action'), align: 'center', width: '120px', formatter: (row, col, cellValue, index) => {
             return (
               <div className='input-button'>
                 <el-button

src/components/Form/FormFields/JsonEditor.vue

@@ -2,9 +2,9 @@
   <div class="json-editor">
     <JsonEditor
       v-model="resultInfo"
+      :class="{resize: resize === 'vertical'}"
       :mode="'code'"
       :show-btns="false"
-      :class="{resize: resize === 'vertical'}"
       @json-change="onJsonChange"
       @json-save="onJsonSave"
       @has-error="onError"
@@ -53,7 +53,7 @@ export default {
       }, 500)
     },
     onError: _.debounce(function(value) {
-      this.$message.error(this.$tc('common.FormatError'))
+      this.$message.error(this.$tc('FormatError'))
     }, 1500)
   }
 }
@@ -64,28 +64,28 @@ export default {
 
   .json-editor {
     .resize {
-      & > > > .jsoneditor {
+      & >>> .jsoneditor {
       resize: vertical;
       cursor: s-resize;
       }
     }
-    & > > > .jsoneditor {
+    & >>> .jsoneditor {
       border: 1px solid #e5e6e7;
     }
 
-    & > > > .jsoneditor-compact {
+    & >>> .jsoneditor-compact {
       display: none;
     }
 
-    & > > > .jsoneditor-modes {
+    & >>> .jsoneditor-modes {
       display: none;
     }
 
-    & > > > .jsoneditor-poweredBy {
+    & >>> .jsoneditor-poweredBy {
       display: none;
     }
 
-    & > > > .jsoneditor-menu {
+    & >>> .jsoneditor-menu {
       background: var(--color-primary);
       border-bottom: 1px solid var(--color-primary);
     }

src/components/Form/FormFields/PasswordRule.vue

@@ -1,11 +1,11 @@
 <template>
   <div style="display: block">
     <el-button size="mini" type="primary" @click="visible=true">
-      {{ $t('common.Setting') }}
+      {{ $t('Setting') }}
     </el-button>
     <Dialog
       :destroy-on-close="true"
-      :title="$tc('common.PasswordRule')"
+      :title="$tc('PasswordRule')"
       :visible.sync="visible"
       width="600px"
       @cancel="handleCancel"
@@ -44,7 +44,7 @@ export default {
         fields: [
           {
             id: 'length',
-            label: this.$t('common.Length'),
+            label: this.$t('Length'),
             type: 'input-number',
             el: {
               min: 8,
@@ -53,27 +53,27 @@ export default {
           },
           {
             id: 'uppercase',
-            label: this.$t('common.Uppercase'),
+            label: this.$t('Uppercase'),
             type: 'switch'
           },
           {
             id: 'lowercase',
-            label: this.$t('common.Lowercase'),
+            label: this.$t('Lowercase'),
             type: 'switch'
           },
           {
             id: 'digit',
-            label: this.$t('common.Digit'),
+            label: this.$t('Digit'),
             type: 'switch'
           },
           {
             id: 'symbol',
-            label: this.$t('common.SpecialSymbol'),
+            label: this.$t('SpecialSymbol'),
             type: 'switch'
           },
           {
             id: 'exclude_symbols',
-            label: this.$t('common.ExcludeSymbol'),
+            label: this.$t('ExcludeSymbol'),
             type: 'input'
           }
         ]

src/components/Form/FormFields/PhoneInput.vue

@@ -1,10 +1,10 @@
 <template>
   <div>
-    <el-input v-model="rawValue.phone" :placeholder="$tc('users.inputPhone')" @input="OnInputChange">
+    <el-input v-model="rawValue.phone" :placeholder="$tc('InputPhone')" @input="OnInputChange">
       <el-select
         slot="prepend"
+        :placeholder="$tc('Select')"
         :value="rawValue.code"
-        :placeholder="$tc('common.Select')"
         style="width: 90px;"
         @change="OnChange"
       >

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

@@ -5,16 +5,16 @@
     :destroy-on-close="true"
     :show-cancel="false"
     :show-confirm="false"
-    :title="$tc('assets.PlatformProtocolConfig') + '：' + protocol.name"
+    :title="$tc('PlatformProtocolConfig') + '：' + protocol.name"
     class="setting-dialog"
     v-bind="$attrs"
     width="800px"
     v-on="$listeners"
   >
     <el-alert v-if="disabled && platformDetail" style="margin-bottom: 10px" type="success">
-      {{ $t('assets.InheritPlatformConfig') }}
+      {{ $t('InheritPlatformConfig') }}
       <el-link :href="platformDetail" class="link-more" target="_blank">
-        {{ $t('common.View') }}
+        {{ $t('View') }}
       </el-link>
       <i class="fa fa-external-link" />
     </el-alert>
@@ -60,10 +60,10 @@ export default {
         hasButtons: !this.disabled,
         url: '/api/v1/assets/protocol-settings/?name=' + this.protocol.name,
         fields: [
-          [vm.$t('common.Basic'), [
+          [vm.$t('Basic'), [
             'primary', 'required', 'default', 'public'
           ]],
-          [vm.$t('common.Advanced'), ['setting']]
+          [vm.$t('Advanced'), ['setting']]
         ],
         fieldsMeta: {
           setting: {
@@ -107,12 +107,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-.data-form > > > .el-form-item.form-buttons {
+.data-form >>> .el-form-item.form-buttons {
   padding-top: 10px;
   margin-bottom: 0;
 }
 
-.setting-dialog > > > .el-dialog__body {
+.setting-dialog >>> .el-dialog__body {
   padding-top: 10px;
 }
 

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

@@ -129,9 +129,9 @@ export default {
     },
     portPlaceholder() {
       if (this.settingReadonly) {
-        return this.$t('applications.port')
+        return this.$t('Port')
       } else {
-        return this.$t('assets.DefaultPort')
+        return this.$t('DefaultPort')
       }
     },
     iChoices() {
@@ -348,7 +348,7 @@ export default {
 }
 
 .input-button {
-  margin-top: 4px;
+  margin-top: 2px;
   display: flex;
   margin-left: 20px
 }

src/components/Form/FormFields/Select2.vue

@@ -6,19 +6,21 @@
     :clearable="clearable"
     :collapse-tags="collapseTags"
     :disabled="!!selectDisabled"
+    :filterable="true"
     :loading="!initialized"
     :multiple="multiple"
     :options="iOptions"
     :remote="remote"
     :remote-method="filterOptions"
     class="select2"
-    filterable
     popper-append-to-body
-    v-bind="$attrs"
     @change="onChange"
     v-on="$listeners"
     @visible-change="onVisibleChange"
   >
+    <div v-if="showSelectAll" class="el-select-dropdown__header">
+      <el-checkbox v-model="allSelected" @change="handleSelectAllChange">{{ $t('SelectAll') }}</el-checkbox>
+    </div>
     <el-option
       v-for="item in iOptions"
       :key="item.value"
@@ -26,6 +28,7 @@
       :label="item.label"
       :value="item.value"
     />
+
   </el-select>
 </template>
 
@@ -95,6 +98,10 @@ export default {
     collapseTagsCount: {
       type: Number,
       default: 10
+    },
+    showSelectAll: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -126,7 +133,8 @@ export default {
       params: _.cloneDeep(defaultParams),
       iOptions: this.options || [],
       initialOptions: [],
-      remote: true
+      remote: true,
+      allSelected: false
     }
   },
   computed: {
@@ -376,6 +384,25 @@ export default {
         this.$log.debug('Visible change, refresh select2')
       }
       this.$emit('visible-change', visible)
+    },
+    async loadAll() {
+      if (!this.iAjax.url) {
+        return
+      }
+      while (this.params.hasMore) {
+        await this.loadMore()
+      }
+    },
+    async selectAll() {
+      await this.loadAll()
+      this.iValue = this.iOptions.map((v) => v.value)
+    },
+    handleSelectAllChange(checked) {
+      if (checked) {
+        this.selectAll()
+      } else {
+        this.iValue = []
+      }
     }
   }
 }
@@ -391,4 +418,13 @@ export default {
   height: auto;
   white-space: normal;
 }
+
+.select2 >>> input::placeholder {
+  padding-left: 2px;
+}
+
+.el-select-dropdown__header {
+  padding: 10px 20px;
+  border-bottom: solid 1px #ebeef5;
+}
 </style>

src/components/Form/FormFields/TagInput.vue

@@ -17,12 +17,12 @@
       ref="SearchInput"
       v-model.trim="filterValue"
       :fetch-suggestions="autocomplete"
-      :placeholder="this.$t('common.EnterToContinue')"
+      :placeholder="this.$t('EnterToContinue')"
       :type="inputType"
       class="search-input"
       @blur="focus = false"
-      @focus="focus = true"
       @change="handleChange"
+      @focus="focus = true"
       @select="handleSelect"
       @keyup.enter.native="handleConfirm"
     />
@@ -53,7 +53,7 @@ export default {
     },
     placeholder: {
       type: String,
-      default: () => i18n.t('perms.Input')
+      default: () => i18n.t('Input')
     },
     autocomplete: {
       type: Function,
@@ -153,7 +153,7 @@ export default {
     border: 1px solid #dcdee2;
     border-radius: 1px;
     background-color: #fff;
-    line-height: 32px;
+    line-height: 30px;
 
     &:hover {
       border-color: #C0C4CC;
@@ -165,7 +165,7 @@ export default {
     }
 
     &>>> .el-autocomplete {
-      height: 30px;
+      height: 28px;
     }
   }
 
@@ -184,7 +184,7 @@ export default {
   }
 
   .filter-field >>> .el-input__inner {
-    height: 29px;
+    height: 28px;
   }
 
   .show-password {

src/components/Form/FormFields/TextReadonly.vue

@@ -1,6 +1,6 @@
 <template>
   <div :class="bolder ? 'bolder' : ''" class="input-text">
-    {{ value.toString() || text }}
+    {{ text || value.toString() }}
   </div>
 </template>
 
@@ -8,7 +8,7 @@
 export default {
   props: {
     value: {
-      type: [String, Boolean],
+      type: [String, Boolean, Object, Array],
       default: ''
     },
     text: {

src/components/Form/FormFields/TransferSelect.vue

@@ -11,9 +11,9 @@
     />
     <Dialog
       v-if="showTransfer"
+      :close-on-click-modal="false"
       :title="label"
       :visible.sync="showTransfer"
-      :close-on-click-modal="false"
       width="730px"
       @cancel="handleTransCancel"
       @confirm="handleTransConfirm"
@@ -100,6 +100,7 @@ export default {
         filterable: true,
         async: true,
         dataList: [],
+        transferOnCheck: true,
         getPageData: function(pageIndex, pageSize) {
           return getPageData({ pageIndex, pageSize })
         },

src/components/Form/FormFields/UpdateToken.vue

@@ -1,15 +1,15 @@
 <template>
   <div>
-    <el-button v-show="!isShow" type="text" icon="el-icon-edit" @click="isShow=true">
+    <el-button v-show="!isShow" icon="el-icon-edit" type="text" @click="isShow=true">
       {{ text }}
     </el-button>
     <el-input
       v-show="isShow"
       v-model.trim="curValue"
-      show-password
+      :placeholder="placeholder"
       :type="type"
       autocomplete="new-password"
-      :placeholder="placeholder"
+      show-password
       @change="onChange"
     />
   </div>
@@ -29,7 +29,7 @@ export default {
     text: {
       type: String,
       default() {
-        return this.$t('common.Update')
+        return this.$t('Update')
       }
     },
     showInput: {

src/components/Form/FormFields/UploadField.vue

@@ -2,13 +2,13 @@
   <div>
     <input ref="upLoadFile" :accept="accept" style="display: none" type="file" @change="Onchange">
     <el-button size="mini" @click.native.stop="onUpLoad">
-      {{ this.$t('common.SelectFile') }}
+      {{ this.$t('SelectFile') }}
     </el-button>
     <span>{{ fileName }}</span>
     <div v-if="tip !== ''" class="help-block">{{ tip }}</div>
     <input v-model="value" hidden type="text" v-on="$listeners">
     <div>
-      <img :src="preview" v-bind="$attrs">
+      <img :class="showBG ? 'show-bg' : ''" :src="preview" v-bind="$attrs">
     </div>
   </div>
 </template>
@@ -27,6 +27,10 @@ export default {
     accept: {
       type: String,
       default: '*'
+    },
+    showBG: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -74,6 +78,8 @@ export default {
 }
 </script>
 
-<style scoped>
-
+<style lang="scss" scoped>
+.show-bg {
+  background-color: var(--banner-bg);
+}
 </style>

src/components/Form/FormFields/UploadKey.vue

@@ -1,12 +1,12 @@
 <template>
   <div class="upload-key">
-    <input ref="upLoadFile" type="file" style="display: none" @change="onChange">
+    <input ref="upLoadFile" style="display: none" type="file" @change="onChange">
     <el-button v-if="!fingerprint" size="mini" @click.native.stop="onUpLoad">
-      {{ this.$t('common.SelectFile') }}
+      {{ this.$t('SelectFile') }}
     </el-button>
     <span v-else>
-      <el-button type="text" icon="el-icon-edit" @click.native.stop="onUpLoad">
-        {{ this.$t('common.Update') }}
+      <el-button icon="el-icon-edit" type="text" @click.native.stop="onUpLoad">
+        {{ this.$t('Update') }}
       </el-button>
       <span v-if="!fileName" class="fingerprint">{{ fingerprint }}</span>
     </span>

src/components/Form/FormFields/UploadSecret.vue

@@ -2,21 +2,21 @@
   <div class="">
     <el-input
       v-model="iValue"
-      type="textarea"
-      :rows="rows"
       :placeholder="placeholder"
+      :rows="rows"
+      type="textarea"
     />
     <el-upload
       ref="upload"
-      class="upload-secret"
-      :action="''"
       :accept="accept"
+      :action="''"
       :auto-upload="false"
+      :file-list="fileList"
       :limit="limit"
-      v-bind="$attrs"
       :on-change="handleChange"
       :on-remove="handleRemove"
-      :file-list="fileList"
+      class="upload-secret"
+      v-bind="$attrs"
     >
       <el-button size="mini" type="primary">
         {{ btnText }}
@@ -38,7 +38,7 @@ export default {
     btnText: {
       type: String,
       default: function() {
-        return this.$t('common.SelectFile')
+        return this.$t('SelectFile')
       }
     },
     rows: {

src/components/Form/FormFields/UserPassword.vue

@@ -1,7 +1,7 @@
 <template>
   <PasswordInput
-    :value="value"
     :attrs="attrs"
+    :value="value"
     @input="handleInput"
   />
 </template>
@@ -33,17 +33,17 @@ export default {
       }
       const patterns = []
       if (passwordRule['SECURITY_PASSWORD_UPPER_CASE']) {
-        patterns.push([/[A-Z]/, i18n.t('common.password.UPPER_CASE_REQUIRED')])
+        patterns.push([/[A-Z]/, i18n.t('UPPER_CASE_REQUIRED')])
       }
       if (passwordRule['SECURITY_PASSWORD_LOWER_CASE']) {
-        patterns.push([/[a-z]/, i18n.t('common.password.LOWER_CASE_REQUIRED')])
+        patterns.push([/[a-z]/, i18n.t('LOWER_CASE_REQUIRED')])
       }
       if (passwordRule['SECURITY_PASSWORD_NUMBER']) {
-        patterns.push([/\d/, i18n.t('common.password.NUMBER_REQUIRED')])
+        patterns.push([/\d/, i18n.t('NUMBER_REQUIRED')])
       }
       if (passwordRule['SECURITY_PASSWORD_SPECIAL_CHAR']) {
         const pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
-        patterns.push([pattern, i18n.t('common.password.SPECIAL_CHAR_REQUIRED')])
+        patterns.push([pattern, i18n.t('SPECIAL_CHAR_REQUIRED')])
       }
       for (const [pattern, msg] of patterns) {
         if (!pattern.test(value)) {
@@ -55,7 +55,7 @@ export default {
         secureLength = passwordRule ? passwordRule.SECURITY_ADMIN_USER_PASSWORD_MIN_LENGTH : 7
       }
       if (value.length < secureLength) {
-        return callback(new Error(i18n.t('common.password.MIN_LENGTH_ERROR', [secureLength])))
+        return callback(new Error(i18n.t('MIN_LENGTH_ERROR', [secureLength])))
       }
       callback()
     }

src/components/Form/FormFields/WeekCronSelect.vue

@@ -5,7 +5,7 @@
     <table :class="{'c-min-table': colspan < 2}" class="c-weektime-table">
       <thead class="c-weektime-head">
         <tr>
-          <th class="week-td" rowspan="8">{{ this.$t('common.WeekCronSelect.WeekOrTime') }}</th>
+          <th class="week-td" rowspan="8">{{ this.$t('WeekOrTime') }}</th>
           <th :colspan="12 * colspan">00:00 - 12:00</th>
           <th :colspan="12 * colspan">12:00 - 24:00</th>
         </tr>
@@ -31,9 +31,9 @@
         <tr>
           <td class="c-weektime-preview" colspan="49">
             <div class="g-clearfix c-weektime-con">
-              <span class="g-pull-left">{{ this.$t('common.WeekCronSelect.CanDragSelect') }}</span>
-              <a class="g-pull-right" @click.prevent="clearWeektime">{{ this.$t('common.WeekCronSelect.ClearSelection') }}</a>
-              <a class="g-pull-right g-pull-margin" @click.prevent="selectAll">{{ this.$t('common.WeekCronSelect.SelectAll') }}</a>
+              <span class="g-pull-left">{{ this.$t('CanDragSelect') }}</span>
+              <a class="g-pull-right" @click.prevent="clearWeektime">{{ this.$t('ClearSelection') }}</a>
+              <a class="g-pull-right g-pull-margin" @click.prevent="selectAll">{{ this.$t('SelectAll') }}</a>
             </div>
           </td>
         </tr>
@@ -92,13 +92,13 @@ export default {
       col: 0,
       theadArr: [],
       weekArr: [
-        this.$t('common.WeekCronSelect.Monday'),
-        this.$t('common.WeekCronSelect.Tuesday'),
-        this.$t('common.WeekCronSelect.Wednesday'),
-        this.$t('common.WeekCronSelect.Thursday'),
-        this.$t('common.WeekCronSelect.Friday'),
-        this.$t('common.WeekCronSelect.Saturday'),
-        this.$t('common.WeekCronSelect.Sunday')
+        this.$t('Monday'),
+        this.$t('Tuesday'),
+        this.$t('Wednesday'),
+        this.$t('Thursday'),
+        this.$t('Friday'),
+        this.$t('Saturday'),
+        this.$t('Sunday')
       ],
       weektimeData: [],
       timeRange: [] // 格式化之后数据

src/components/Libs/Krry/paging/index.vue

@@ -5,7 +5,7 @@
       :async="async"
       :async-search-flag="asyncSearchFlag"
       :data-show-list="notSelectDataList"
-      :filter-placeholder="filterPlaceholder[0] || $tc('common.Search')"
+      :filter-placeholder="filterPlaceholder[0] || $tc('Search')"
       :filterable="filterable"
       :highlight-color="highlightColor"
       :is-highlight="isHighlight"
@@ -14,7 +14,7 @@
       :page-size="pageSize"
       :page-texts="pageTexts"
       :show-clear-btn="showClearBtn"
-      :title="boxTitle[0] || $tc('common.Selection')"
+      :title="boxTitle[0] || $tc('Selection')"
       @check-district="noCheckSelect"
       @search-word="searchWord"
       @check-disable="checkDisable"
@@ -42,7 +42,7 @@
     <krry-box
       ref="hasSelect"
       :data-show-list="checkedData"
-      :filter-placeholder="filterPlaceholder[1] || $tc('common.Search')"
+      :filter-placeholder="filterPlaceholder[1] || $tc('Search')"
       :filterable="filterable"
       :highlight-color="highlightColor"
       :is-highlight="isHighlight"
@@ -50,7 +50,7 @@
       :page-size="pageSize"
       :page-texts="pageTexts"
       :show-clear-btn="showClearBtn"
-      :title="boxTitle[1] || $tc('common.Selected')"
+      :title="boxTitle[1] || $tc('Selected')"
       @check-district="hasCheckSelect"
       @search-word="searchWord"
       @check-disable="checkDisable"
@@ -70,7 +70,7 @@ export default {
   props: {
     boxTitle: {
       type: Array,
-      // default: () => [this.$tc('common.Selection'), this.$tc('common.Selected')]
+      // default: () => [this.$tc('Selection'), this.$tc('Selected')]
       default: () => ['', '']
     },
     pageSize: {
@@ -92,12 +92,12 @@ export default {
     filterPlaceholder: {
       type: Array,
       default: () => ['', '']
-      // default: () => [this.$tc('common.Search'), this.$tc('common.Search')]
+      // default: () => [this.$tc('Search'), this.$tc('Search')]
     },
     pageTexts: {
       type: Array,
       default: () => ['', '']
-      // default: () => ['< ' + this.$tc('common.PagePrev'), this.$tc('common.PageNext') + ' >']
+      // default: () => ['< ' + this.$tc('PagePrev'), this.$tc('PageNext') + ' >']
     },
     sort: {
       type: Boolean,
@@ -126,6 +126,10 @@ export default {
     showClearBtn: {
       type: Boolean,
       default: () => false
+    },
+    transferOnCheck: {
+      type: Boolean,
+      default: false
     }
   },
   data() {
@@ -259,10 +263,14 @@ export default {
     // 未选中区域的选泽
     noCheckSelect(val) {
       this.noCheckData = val
+      if (this.transferOnCheck) {
+        setTimeout(() => this.addData(), 300)
+      }
     },
     // 已选中区域的选泽
     hasCheckSelect(val) {
       this.hasCheckData = val
+      setTimeout(() => this.deleteData(), 300)
     },
     // 关键：把未选择的数据当做已选择的过滤数组，把已选择的数据当做未选择的过滤数组，在全局data进行过滤，最后进行一次搜索
     // 添加至已选
@@ -418,8 +426,5 @@ export default {
     padding: 5px;
   }
 }
-.el-transfer-panel__filter .el-input__inner {
-  border-radius: 0;
-}
 
 </style>

src/components/Libs/Krry/paging/models/box.vue

@@ -50,7 +50,7 @@
           <span v-html="isHighlight ? filterHighlight(item.label) : item.label" />
         </el-checkbox>
       </el-checkbox-group>
-      <p v-else class="no-data">{{ this.$t('common.NoData') }}</p>
+      <p v-else class="no-data">{{ this.$t('NoData') }}</p>
     </div>
     <div class="vip-footer">
       <el-button :disabled="disabledPre" class="v-page" plain small @click="prev">
@@ -131,8 +131,8 @@ export default {
       asyncSearch: false, // 要执行异步搜索的标记
       asyncPageIndex: 1, // 异步分页的 pageIndex
       asyncSearchPageIndex: 1, // 异步搜索的 pageIndex,
-      defaultPrev: '< ' + this.$tc('common.PagePrev'),
-      defaultNext: this.$tc('common.PageNext') + ' >'
+      defaultPrev: '< ' + this.$tc('PagePrev'),
+      defaultNext: this.$tc('PageNext') + ' >'
     }
   },
   watch: {
@@ -307,6 +307,10 @@ export default {
       margin: 6px 14px;
       line-height: 0;
 
+      .el-input__inner {
+        height: 30px;
+      }
+
       .showClear {
         padding-right: 30px;
         border-radius: 0;

src/components/QuickActions/action.vue

@@ -1,12 +1,12 @@
 <template>
   <tr>
-    <td>{{ action.title }}:</td>
+    <td>{{ getActionTitle(action) }}:</td>
     <td>
       <el-popover
+        :content="action.attrs.tip"
+        :disabled="!action.attrs.showTip"
         placement="left-end"
         trigger="hover"
-        :disabled="!action.attrs.showTip"
-        :content="action.attrs.tip"
       >
         <span slot="reference">
           <component
@@ -27,6 +27,7 @@
 import Switcher from '@/components/Form/FormFields/Switcher'
 import Select2 from '@/components/Form/FormFields/Select2'
 import UpdateSelect from '@/components/Form/FormFields/UpdateSelect'
+import { toSentenceCase } from '@/utils/common'
 
 class Action {
   constructor() {
@@ -84,6 +85,11 @@ export default {
       }
       return wrappers
     }
+  },
+  methods: {
+    getActionTitle(action) {
+      return toSentenceCase(action.title)
+    }
   }
 }
 </script>

src/components/QuickActions/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <IBox :fa="fa" :title="title" v-bind="$attrs">
+  <IBox :fa="fa" :title="$tc('QuickUpdate')" v-bind="$attrs">
     <div v-for="action of actions" :key="action.title" class="quick-actions">
       <table>
         <ActionItem v-if="action.has === undefined || action.has" :action="action" />
@@ -27,7 +27,7 @@ export default {
     title: {
       type: String,
       default() {
-        return this.$t('common.QuickUpdate')
+        return this.$t('QuickUpdate')
       }
     },
     actions: {

src/components/Table/AutoDataSearch/index.vue

@@ -3,7 +3,14 @@
     <el-button v-if="shouldFold" circle class="search-btn" size="mini" @click="handleManualSearch">
       <svg-icon icon-class="search" />
     </el-button>
-    <TagSearch v-else :options="iOption" v-bind="$attrs" v-on="$listeners" @tag-search="handleTagSearch" />
+    <TagSearch
+      v-show="!shouldFold"
+      :options="iOption"
+      v-bind="$attrs"
+      @blur="handleBlur"
+      v-on="$listeners"
+      @tag-search="handleTagSearch"
+    />
   </span>
 </template>
 
@@ -50,7 +57,7 @@ export default {
       return _.uniqWith(options, _.isEqual)
     },
     shouldFold() {
-      return this.fold && this.tags.length === 0 && !this.manualSearch
+      return this.fold && (!this.tags || this.tags.length === 0) && !this.manualSearch
     }
   },
   watch: {
@@ -71,12 +78,15 @@ export default {
       if (_.isEqual(tags, this.tags)) {
         return
       }
-      this.tags = tags
+      this.tags = (tags || [])
       if (tags.length === 0) {
         this.manualSearch = false
       }
       this.$emit('tagSearch', tags)
     },
+    handleBlur() {
+      this.manualSearch = false
+    },
     handleManualSearch() {
       this.manualSearch = true
     },
@@ -111,8 +121,8 @@ export default {
         }
         if (field.type === 'boolean') {
           option.children = [
-            { label: i18n.t('common.Yes'), value: true },
-            { label: i18n.t('common.No'), value: false }
+            { label: i18n.t('Yes'), value: true },
+            { label: i18n.t('No'), value: false }
           ]
         }
         if (option.value === 'id') {
@@ -131,7 +141,7 @@ export default {
 
 <style lang='less' scoped>
 .search-btn {
-  margin-top: 4px;
+  margin-top: 1px;
   cursor: pointer;
   &:hover {
     color: #409eff;

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

@@ -1,27 +1,26 @@
 <template>
   <Dialog
     v-if="showColumnSettingPopover"
-    :cancel-title="$tc('common.RestoreDefault')"
+    :cancel-title="$tc('RestoreDefault')"
     :destroy-on-close="true"
-    :title="$tc('common.CustomCol')"
+    :title="$tc('TableSetting')"
     :visible.sync="showColumnSettingPopover"
     top="10%"
     width="50%"
     @cancel="restoreDefault()"
     @confirm="handleColumnConfirm()"
   >
-    <el-alert type="success">
-      {{ this.$t('common.TableColSettingInfo') }}
-    </el-alert>
+    <label>{{ this.$t('TableColSetting') }}</label>
     <el-checkbox-group
       v-model="iCurrentColumns"
+      class="column-setting"
     >
       <el-row>
         <el-col
           v-for="item in totalColumnsList"
           :key="item.prop"
           :span="8"
-          style="margin-top:5px;"
+          class="col-item"
         >
           <el-checkbox
             :disabled="item.prop==='actions' || minColumns.indexOf(item.prop)!==-1"
@@ -88,5 +87,29 @@ export default {
 }
 </script>
 
-<style lang='less' scoped>
+<style lang='scss' scoped>
+.column-setting {
+  margin-left: 10px;
+
+  .col-item {
+    margin-top: 5px;
+
+    >>> .el-checkbox {
+      width: 100%;
+
+      .el-checkbox__input {
+        line-height: 16px
+      }
+
+      .el-checkbox__label {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+        width: calc(100% - 20px); // 20px is the width of the checkbox
+        line-height: 16px;
+        vertical-align: text-top;
+      }
+    }
+  }
+}
 </style>

src/components/Table/AutoDataTable/index.vue

@@ -26,7 +26,7 @@ import {
   ObjectRelatedFormatter
 } from '@/components/Table/TableFormatters'
 import i18n from '@/i18n/i18n'
-import { newURL, replaceAllUUID } from '@/utils/common'
+import { newURL, replaceAllUUID, toSentenceCase } from '@/utils/common'
 import ColumnSettingPopover from './components/ColumnSettingPopover.vue'
 import LabelsFormatter from '@/components/Table/TableFormatters/LabelsFormatter.vue'
 
@@ -105,24 +105,26 @@ export default {
           col.formatter = DetailFormatter
           col.sortable = 'custom'
           col.showOverflowTooltip = true
+          col.minWidth = '150px'
           break
         case 'actions':
           col = {
             prop: 'actions',
-            label: i18n.t('common.Actions'),
+            label: i18n.t('Actions'),
             align: 'center',
-            width: '150px',
+            width: '100px',
             formatter: ActionsFormatter,
+            fixed: 'right',
             formatterArgs: {}
           }
           break
         case 'is_valid':
-          col.label = i18n.t('common.Validity')
+          col.label = i18n.t('Valid')
           col.formatter = ChoicesFormatter
           col.formatterArgs = {
             textChoices: {
-              true: i18n.t('common.Yes'),
-              false: i18n.t('common.No')
+              true: i18n.t('Yes'),
+              false: i18n.t('No')
             }
           }
           col.width = '80px'
@@ -131,11 +133,11 @@ export default {
           col.formatter = ChoicesFormatter
           col.formatterArgs = {
             textChoices: {
-              true: i18n.t('common.Active'),
-              false: i18n.t('common.Inactive')
+              true: i18n.t('Active'),
+              false: i18n.t('Inactive')
             }
           }
-          col.width = '80px'
+          col.width = '100px'
           break
         case 'datetime':
         case 'date_start':
@@ -143,6 +145,7 @@ export default {
           break
         case 'labels':
           col.formatter = LabelsFormatter
+          col.width = '200px'
           break
         case 'comment':
           col.showOverflowTooltip = true
@@ -165,7 +168,7 @@ export default {
           break
         case 'datetime':
           col.formatter = DateFormatter
-          col.width = '160px'
+          col.width = '175px'
           break
         case 'object_related_field':
           col.formatter = ObjectRelatedFormatter
@@ -186,16 +189,16 @@ export default {
       // this.$log.debug('Field: ', type, col.prop, col)
       return col
     },
-    addHelpTipsIfNeed(col) {
-      const helpTips = col.helpTips
-      if (!helpTips) {
+    addHelpTipIfNeed(col) {
+      const helpTip = col.helpTip
+      if (!helpTip) {
         return col
       }
       col.renderHeader = (h, { column, $index }) => {
         return (
           <span>{column.label}
             <el-tooltip placement='bottom' effect='light' popperClass='help-tips'>
-              <div slot='content' domPropsInnerHTML={helpTips}/>
+              <div slot='content' domPropsInnerHTML={helpTip}/>
               <el-button style='padding: 0'>
                 <i class='fa fa-info-circle'/>
               </el-button>
@@ -213,8 +216,8 @@ export default {
         }
         if (column.type === 'boolean') {
           col.filters = [
-            { text: i18n.t('common.Yes'), value: true },
-            { text: i18n.t('common.No'), value: false }
+            { text: i18n.t('Yes'), value: true },
+            { text: i18n.t('No'), value: false }
           ]
           col.sortable = false
           col['column-key'] = col.prop
@@ -261,19 +264,45 @@ export default {
       }
       return col
     },
-
+    setDefaultWidthIfNeed(col) {
+      const lang = this.$i18n.locale
+      let factor = 10
+      if (lang === 'zh') {
+        factor = 20
+      }
+      if (col && !col.width && col.label && !col.minWidth) {
+        col.minWidth = `${col.label.length * factor + 30}px`
+      }
+      return col
+    },
     generateColumn(name) {
       const colMeta = this.meta[name] || {}
       const customMeta = this.config.columnsMeta ? this.config.columnsMeta[name] : {}
       let col = { prop: name, label: colMeta.label, showOverflowTooltip: true }
 
-      col = this.generateColumnByName(name, col)
       col = this.generateColumnByType(colMeta.type, col, colMeta)
+      col = this.generateColumnByName(name, col)
       col = this.setDefaultFormatterIfNeed(col)
       col = Object.assign(col, customMeta)
-      col = this.addHelpTipsIfNeed(col)
+      col = this.addHelpTipIfNeed(col)
       col = this.addFilterIfNeed(col)
       col = this.addOrderingIfNeed(col)
+      col = this.updateLabelIfNeed(col)
+      col = this.setDefaultWidthIfNeed(col)
+      return col
+    },
+    updateLabelIfNeed(col) {
+      if (!col.label) {
+        return col
+      }
+      col.label = col.label
+        .replace(' Amount', '')
+        .replace(' amount', '')
+        .replace('数量', '')
+      if (col.label.startsWith('Is ')) {
+        col.label = col.label.replace('Is ', '')
+      }
+      col.label = toSentenceCase(col.label)
       return col
     },
     generateTotalColumns() {
@@ -315,11 +344,31 @@ export default {
         }
         return has
       })
+
+      columns = this.orderingColumns(columns)
       // 第一次初始化时记录 totalColumns
       this.totalColumns = columns
       config.columns = columns
       this.iConfig = config
     },
+    orderingColumns(columns) {
+      const cols = _.cloneDeep(this.config.columns)
+      const defaults = _.get(this.config, 'columnsShow.default')
+      const ordering = (cols || defaults || []).map(item => {
+        let prop = item
+        if (typeof item === 'object') {
+          prop = item.prop
+        }
+        return prop
+      })
+      return _.sortBy(columns, (item) => {
+        if (item.prop === 'actions') {
+          return 1000
+        }
+        const i = ordering.indexOf(item.prop)
+        return i === -1 ? 999 : i
+      })
+    },
     // 生成给子组件使用的TotalColList
     cleanColumnsShow() {
       const totalColumnsNames = this.totalColumns.map(obj => obj.prop)

src/components/Table/CardTable.vue

@@ -8,41 +8,51 @@
     />
     <div style="padding-top: 15px">
       <el-row :gutter="20">
-        <el-col v-for="(d, index) in totalData" :key="index" :span="6">
+        <el-col v-for="(d, index) in totalData" :key="index" :span="8">
           <el-card
             :body-style="{ 'text-align': 'center', 'padding': '20px' }"
             class="my-card"
             shadow="hover"
             @click.native="onView(d)"
           >
-            <span v-if="d.edition === 'enterprise'" class="enterprise">
-              {{ $t('common.Enterprise') }}
-            </span>
-            <el-row :gutter="20">
-              <el-col :span="8">
-                <img :src="d.icon" class="image">
-              </el-col>
-              <el-col :span="16" style="text-align: left; padding: 5px 0">
-                <div class="one-line">
-                  <b>{{ d.display_name }}</b>
-                  <el-tag size="mini" style="margin-left: 5px">
-                    {{ d.version }}
-                  </el-tag>
-                </div>
-                <el-divider class="my-divider" />
-                <div class="comment">
-                  {{ d.comment }}
-                </div>
-                <el-tag v-for="tag of d.tags" :key="tag" size="mini">
-                  {{ capitalize(tag) }}
-                </el-tag>
-              </el-col>
-            </el-row>
+            <slot :index="index" :item="d">
+              <span v-if="d.edition === 'enterprise'" class="enterprise">
+                {{ $t('Enterprise') }}
+              </span>
+              <el-row :gutter="20">
+                <el-col v-if="d.icon" :span="8" class="image">
+                  <img
+                    v-if="d.icon.startsWith('/') || d.icon.startsWith('data:')"
+                    :alt="d.display_name"
+                    :src="d.icon"
+                  >
+                  <Icon v-else :icon="d.icon" />
+                </el-col>
+                <el-col :span="16" class="text-zone">
+                  <div class="one-line">
+                    <b>{{ d.display_name }}</b>
+                    <el-tag v-if="d.version" size="mini" style="margin-left: 5px">
+                      {{ d.version }}
+                    </el-tag>
+                  </div>
+                  <el-divider class="my-divider" />
+                  <div class="comment">
+                    {{ d.comment }}
+                  </div>
+                  <div class="tag-zone">
+                    <el-tag v-for="tag of d.tags" :key="tag" size="mini">
+                      {{ capitalize(tag) }}
+                    </el-tag>
+                  </div>
+                </el-col>
+              </el-row>
+            </slot>
           </el-card>
         </el-col>
       </el-row>
     </div>
     <Pagination
+      v-if="pagination"
       ref="pagination"
       v-bind="$data"
       @currentSizeChange="handleCurrentChange"
@@ -54,7 +64,7 @@
 <script>
 import TableAction from '@/components/Table/ListTable/TableAction'
 import { Pagination } from '@/components'
-import { toSafeLocalDateStr } from '@/utils/common'
+import Icon from '@/components/Widgets/Icon/index.vue'
 
 const defaultFirstPage = 1
 
@@ -62,7 +72,8 @@ export default {
   name: 'CardTable',
   components: {
     TableAction,
-    Pagination
+    Pagination,
+    Icon
   },
   props: {
     // 定义 table 的配置
@@ -73,6 +84,10 @@ export default {
     headerActions: {
       type: Object,
       default: () => ({})
+    },
+    pagination: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -112,13 +127,15 @@ export default {
       }
       return `<i class="fa ${iconClass}" />`
     },
-    convertData(data) {
-      return toSafeLocalDateStr(data)
-    },
     getPageQuery(currentPage, pageSize) {
       return this.$refs.pagination.getPageQuery(currentPage, pageSize)
     },
     getList() {
+      if (this.tableConfig.totalData) {
+        this.totalData = this.tableConfig.totalData
+        this.total = this.totalData.length
+        return
+      }
       if (!this.tableUrl) {
         return
       }
@@ -176,8 +193,8 @@ export default {
       viewFunc(obj)
     },
     onDelete(obj) {
-      const msg = `${this.$t('common.deleteWarningMsg')} "${obj.name}" ?`
-      this.$confirm(msg, this.$tc('common.Info'), {
+      const msg = `${this.$t('DeleteWarningMsg')} "${obj.name}" ?`
+      this.$confirm(msg, this.$tc('Info'), {
         type: 'warning',
         confirmButtonClass: 'el-button--danger',
         beforeClose: async(action, instance, done) => {
@@ -186,7 +203,7 @@ export default {
           await deleteFunc(obj)
           done()
           this.reloadTable()
-          this.$message.success(this.$tc('common.deleteSuccessMsg'))
+          this.$message.success(this.$tc('DeleteSuccessMsg'))
         }
       }).catch(() => {
         /* 取消*/
@@ -207,10 +224,16 @@ export default {
 }
 
 .image {
-  width: 60px;
-  height: 60px;
-  display: block;
-  margin: 50% auto;
+  img, span {
+    width: 60px;
+    height: 60px;
+    display: block;
+    margin: 50% auto;
+  }
+  span {
+    font-size: 36px;
+    color: black;
+  }
 }
 
 .one-line {
@@ -225,6 +248,7 @@ export default {
   height: 50px;
   overflow: hidden;
   margin-bottom: 10px;
+  padding-right: 5px;
   display: -webkit-box;
   -webkit-line-clamp: 3;
   -webkit-box-orient: vertical;
@@ -260,4 +284,17 @@ export default {
   border-radius: 3px 3px 3px 10px;
 }
 
+.tag-zone {
+  margin-top: 20px;
+
+  .el-tag {
+    margin-right: 3px;
+  }
+}
+
+.text-zone {
+  text-align: left;
+  height: 100%;
+}
+
 </style>

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

@@ -99,8 +99,12 @@
             :filter-multiple="false"
             :filters="col.filters || null"
             :formatter="typeof col.formatter === 'function' ? col.formatter : null"
+            :title="col.label"
             v-bind="{align: columnsAlign, ...col}"
           >
+            <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}">
               <div
                 :is="col.formatter"
@@ -362,7 +366,7 @@ export default {
     newText: {
       type: String,
       default: function() {
-        return this.$t('ops.Add')
+        return this.$t('Add')
       }
     },
     /**
@@ -371,7 +375,7 @@ export default {
     editText: {
       type: String,
       default: function() {
-        return this.$t('ops.Modify')
+        return this.$t('Modify')
       }
     },
     /**
@@ -380,7 +384,7 @@ export default {
     viewText: {
       type: String,
       default: function() {
-        return this.$t('ops.View')
+        return this.$t('View')
       }
     },
     /**
@@ -389,7 +393,7 @@ export default {
     deleteText: {
       type: String,
       default: function() {
-        return this.$t('ops.Delete')
+        return this.$t('Delete')
       }
     },
     /**
@@ -400,7 +404,7 @@ export default {
     deleteMessage: {
       type: Function,
       default() {
-        return this.$t('ops.Confirm') + this.deleteText + '?'
+        return this.$t('Confirm') + this.deleteText + '?'
       }
     },
     /**
@@ -459,7 +463,7 @@ export default {
     onSuccess: {
       type: Function,
       default() {
-        return this.$message.success(this.$t('ops.SuccessfulOperation'))
+        return this.$message.success(this.$t('SuccessfulOperation'))
       }
     },
     /**
@@ -1167,7 +1171,7 @@ export default {
      * @param {object|object[]} - 要删除的数据对象或数组
      */
     onDefaultDelete(data) {
-      this.$confirm(this.deleteMessage(data), this.$t('common.Info'), {
+      this.$confirm(this.deleteMessage(data), this.$t('Info'), {
         type: 'warning',
         confirmButtonClass: 'el-button--danger',
         beforeClose: async(action, instance, done) => {

src/components/Table/DataTable/index.vue

@@ -168,4 +168,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.el-data-table {
+  >>> .el-pagination.is-background .el-pager li {
+    margin: 0 1px;
+    padding: 0 2px;
+  }
+}
 </style>

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

@@ -3,7 +3,7 @@
     <Dialog
       v-if="exportDialogShow"
       :destroy-on-close="true"
-      :title="$tc('common.Export')"
+      :title="$tc('Export')"
       :visible.sync="exportDialogShow"
       width="700px"
       @cancel="handleExportCancel()"
@@ -13,7 +13,7 @@
         {{ tips }}
       </el-alert>
       <el-form label-position="left" style="padding-left: 20px">
-        <el-form-item :label="$tc('common.fileType' )" :label-width="'100px'">
+        <el-form-item :label="$tc('FileType' )" :label-width="'100px'">
           <el-radio-group v-model="exportTypeOption">
             <el-radio
               v-for="option of exportTypeOptions"
@@ -26,7 +26,7 @@
             </el-radio>
           </el-radio-group>
         </el-form-item>
-        <el-form-item :label="$tc('common.imExport.ExportRange')" :label-width="'100px'" class="export-form">
+        <el-form-item :label="$tc('ExportRange')" :label-width="'100px'" class="export-form">
           <el-radio-group v-model="exportOption">
             <el-radio
               v-for="option of exportOptions"
@@ -138,17 +138,17 @@ export default {
     exportOptions() {
       return [
         {
-          label: this.$t('common.imExport.ExportAll'),
+          label: this.$t('ExportAll'),
           value: 'all',
           can: this.canExportAll && !this.tableHasQuery
         },
         {
-          label: this.$t('common.imExport.ExportOnlySelectedItems'),
+          label: this.$t('ExportOnlySelectedItems'),
           value: 'selected',
           can: this.selectedRows.length > 0 && this.canExportSelected
         },
         {
-          label: this.$t('common.imExport.ExportOnlyFiltered'),
+          label: this.$t('ExportOnlyFiltered'),
           value: 'filtered',
           can: this.tableHasQuery && this.canExportFiltered
         }

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

@@ -12,12 +12,12 @@
     @close="handleImportCancel"
   >
     <el-form v-if="!showTable" label-position="left" style="padding-left: 20px">
-      <el-form-item :label="$tc('common.Import' )" :label-width="'100px'">
+      <el-form-item :label="$tc('Import' )" :label-width="'100px'">
         <el-radio v-if="canImportCreate" v-model="importOption" class="export-item" label="create">
-          {{ this.$t('common.Create') }}
+          {{ this.$t('Create') }}
         </el-radio>
         <el-radio v-if="canImportUpdate" v-model="importOption" class="export-item" label="update">
-          {{ this.$t('common.Update') }}
+          {{ this.$t('Update') }}
         </el-radio>
         <div style="line-height: 1.5">
           <span class="el-upload__tip">
@@ -27,7 +27,7 @@
           </span>
         </div>
       </el-form-item>
-      <el-form-item :label="$tc('common.Upload' )" :label-width="'100px'" class="file-uploader">
+      <el-form-item :label="$tc('Upload' )" :label-width="'100px'" class="file-uploader">
         <el-upload
           ref="upload"
           :auto-upload="false"
@@ -41,11 +41,11 @@
         >
           <i class="el-icon-upload" />
           <div class="el-upload__text">
-            {{ $t('common.imExport.dragUploadFileInfo') }}
+            {{ $t('DragUploadFileInfo') }}
           </div>
           <div slot="tip" class="el-upload__tip">
             <span :class="{'hasError': hasFileFormatOrSizeError }">
-              {{ $t('common.imExport.uploadCsvLth10MHelpText') }}
+              {{ $t('UploadCsvLth10MHelpText') }}
             </span>
             <div v-if="renderError" class="hasError">{{ renderError }}</div>
           </div>
@@ -122,16 +122,16 @@ export default {
     },
     downloadTemplateTitle() {
       if (this.importOption === 'create') {
-        return this.$t('common.imExport.downloadImportTemplateMsg')
+        return this.$t('DownloadImportTemplateMsg')
       } else {
-        return this.$t('common.imExport.downloadUpdateTemplateMsg')
+        return this.$t('DownloadUpdateTemplateMsg')
       }
     },
     importTitle() {
       if (this.importOption === 'create') {
-        return this.$t('common.Import') + this.$t('common.Create')
+        return this.$t('Import') + this.$t('Create')
       } else {
-        return this.$t('common.Import') + this.$t('common.Update')
+        return this.$t('Import') + this.$t('Update')
       }
     }
   },

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

@@ -4,18 +4,18 @@
       <el-col :md="8" :sm="24">
         <div class="tableFilter">
           <el-radio-group v-model="importStatusFilter" size="small">
-            <el-radio-button label="all">{{ $t('common.Total') }}</el-radio-button>
-            <el-radio-button label="ok">{{ $t('common.Success') }}</el-radio-button>
-            <el-radio-button label="error">{{ $t('common.Failed') }}</el-radio-button>
-            <el-radio-button label="pending">{{ $t('common.Pending') }}</el-radio-button>
+            <el-radio-button label="all">{{ $t('Total') }}</el-radio-button>
+            <el-radio-button label="ok">{{ $t('Success') }}</el-radio-button>
+            <el-radio-button label="error">{{ $t('Failed') }}</el-radio-button>
+            <el-radio-button label="pending">{{ $t('Pending') }}</el-radio-button>
           </el-radio-group>
         </div>
       </el-col>
       <el-col :md="8" :sm="24" style="text-align: center">
-        <span class="summary-item summary-total"> {{ $t('common.Total') }}: {{ totalCount }}</span>
-        <span class="summary-item summary-success"> {{ $t('common.Success') }}: {{ successCount }}</span>
-        <span class="summary-item summary-failed"> {{ $t('common.Failed') }}: {{ failedCount }}</span>
-        <span class="summary-item summary-pending"> {{ $t('common.Pending') }}: {{ pendingCount }}</span>
+        <span class="summary-item summary-total"> {{ $t('Total') }}: {{ totalCount }}</span>
+        <span class="summary-item summary-success"> {{ $t('Success') }}: {{ successCount }}</span>
+        <span class="summary-item summary-failed"> {{ $t('Failed') }}: {{ failedCount }}</span>
+        <span class="summary-item summary-pending"> {{ $t('Pending') }}: {{ pendingCount }}</span>
       </el-col>
     </el-row>
     <div class="row">
@@ -24,7 +24,7 @@
     <DataTable v-if="tableGenDone" id="importTable" ref="dataTable" :config="tableConfig" class="importTable" />
     <div class="row" style="padding-top: 20px">
       <div style="float: right">
-        <el-button size="small" @click="performCancel">{{ $t('common.Cancel') }}</el-button>
+        <el-button size="small" @click="performCancel">{{ $t('Cancel') }}</el-button>
         <el-button size="small" type="primary" @click="performImportAction">{{ importActionTitle }}</el-button>
       </div>
     </div>
@@ -81,10 +81,10 @@ export default {
       hasImport: false,
       hasContinueButton: false,
       importActions: {
-        import: this.$t('common.Import'),
-        continue: this.$t('common.Continue'),
-        stop: this.$t('common.Stop'),
-        finished: this.$t('common.Finished')
+        import: this.$t('Import'),
+        continue: this.$t('Continue'),
+        stop: this.$t('Stop'),
+        finished: this.$t('Finished')
       }
     }
   },
@@ -173,7 +173,7 @@ export default {
       const vm = this
       const columns = [{
         prop: '@status',
-        label: vm.$t('common.Status'),
+        label: vm.$t('Status'),
         width: '80px',
         align: 'center',
         formatter: StatusFormatter,
@@ -191,9 +191,9 @@ export default {
           },
           getTip(val) {
             if (val === 'ok') {
-              return vm.$t('common.Success')
+              return vm.$t('Success')
             } else if (val === 'pending') {
-              return vm.$t('common.Pending')
+              return vm.$t('Pending')
             } else if (val && val.name === 'error') {
               return val.error
             }
@@ -366,7 +366,7 @@ export default {
         this.importTaskStatus = 'done'
       }
       if (this.failedCount > 0) {
-        this.$message.error(this.$tc('common.imExport.hasImportErrorItemMsg') + '')
+        this.$message.error(this.$tc('HasImportErrorItemMsg') + '')
       }
     },
     async performUpdateObject(item) {

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

@@ -7,7 +7,6 @@
       @click="showSearchSelect"
     >
       <svg-icon icon-class="tag" />
-      <span>{{ $t('common.Label') }}</span>
     </el-button>
     <el-cascader
       v-else
@@ -45,7 +44,7 @@ export default {
       },
       labelOptions: [],
       labelValue: [],
-      placeholder: this.$t('labels.SelectLabelFilter')
+      placeholder: this.$t('SelectLabelFilter')
     }
   },
   watch: {
@@ -92,18 +91,22 @@ export default {
       this.setSearchFocus()
     },
     handleCascaderVisibleChange(visible) {
+      const input = this.$refs.labelCascader.$el
+        .getElementsByClassName('el-input--suffix')[0]
+        .querySelector('input')
       if (visible) {
         setTimeout(() => {
           this.$refs.labelCascader.updateStyle()
+          input.style.height = '30px'
         },)
         return
       } else {
-        const input = this.$refs.labelCascader.$el.getElementsByClassName('el-input--suffix')[0].querySelector('input')
-        input.style.height = '34px'
+        input.style.height = '30px'
       }
       if (this.labelValue.length === 0) {
         this.showLabelSearch = false
       }
+      this.$emit('showLabelSearch', this.showLabelSearch)
     },
     getLabelOptions() {
       if (this.labelOptions.length > 0) {
@@ -114,7 +117,7 @@ export default {
         const groupedLabelOptions = _.groupBy(data, 'name')
         const labelOptions = []
         for (const [key, labels] of Object.entries(groupedLabelOptions)) {
-          const all = { value: '*', label: this.$t('common.All') }
+          const all = { value: '*', label: this.$t('All') }
           const children = _.sortBy(labels, 'value').map(label => ({
             value: label.value,
             label: label.value
@@ -151,7 +154,7 @@ export default {
 }
 
 .label-button {
-  padding: 10px 13px 10px 12px;
+  //padding: 10px 13px 10px 12px;
 }
 
 .label-select {
@@ -159,11 +162,12 @@ export default {
 
 .label-cascader {
   width: 300px;
-  >>> .el-input--suffix.el-input {
-    input {
-      height: 34px;
-    }
+  height: 30px;
+
+  >>> .el-input input {
+    height: 30px;
   }
+
   >>> .el-input__inner {
     font-size: 13px;
   }

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

@@ -27,6 +27,7 @@ export default {
     createRoute: {
       type: [String, Object, Function],
       default() {
+        console.log('This: ', this.$route)
         return this.$route.name?.replace('List', 'Create')
       }
     },
@@ -83,7 +84,7 @@ export default {
     },
     createTitle: {
       type: String,
-      default: () => i18n.t('common.Create')
+      default: () => i18n.t('Create')
     }
   },
   data() {
@@ -91,7 +92,7 @@ export default {
     return {
       defaultMoreActions: [
         {
-          title: this.$t('common.BatchDelete'),
+          title: this.$t('DeleteSelected'),
           name: 'actionDeleteSelected',
           has: this.hasBulkDelete,
           icon: 'fa fa-trash-o',
@@ -101,10 +102,10 @@ export default {
           callback: this.defaultBulkDeleteCallback
         },
         {
-          title: this.$t('common.BatchUpdate'),
+          title: this.$t('UpdateSelected'),
           name: 'actionUpdateSelected',
           has: this.hasBulkUpdate,
-          fa: 'batch-update',
+          icon: 'batch-update',
           can: function({ selectedRows }) {
             let canBulkUpdate = vm.canBulkUpdate
             if (typeof canBulkUpdate === 'function') {
@@ -114,36 +115,22 @@ export default {
           },
           callback: this.handleBulkUpdate
         }
-      ]
-    }
-  },
-  computed: {
-    defaultActions() {
-      const defaultActions = [
+      ],
+      defaultActions: [
         {
           name: 'actionCreate',
           title: this.createTitle,
           type: 'primary',
           has: this.hasCreate && !this.moreCreates,
           can: this.canCreate,
+          icon: 'plus',
           callback: this.onCreate || this.handleCreate
         }
       ]
-      if (this.moreCreates) {
-        const defaultMoreCreate = {
-          name: 'actionMoreCreate',
-          title: this.createTitle,
-          type: 'primary',
-          has: true,
-          can: this.canCreate,
-          dropdown: [],
-          callback: this.onCreate || this.handleCreate
-        }
-        const createCreateAction = Object.assign(defaultMoreCreate, this.moreCreates)
-        defaultActions.push(createCreateAction)
-      }
-      return defaultActions
-    },
+    }
+  },
+  computed: {
+
     iActions() {
       return [...this.actions, this.moreAction]
     },
@@ -161,7 +148,7 @@ export default {
       const invariantActions = [
         {
           name: 'batch',
-          title: this.$t('common.BatchProcessing', { 'Number': this.selectedRows.length }),
+          title: this.$t('BatchProcessing', { 'Number': this.selectedRows.length }),
           divided: true,
           has: function({ selectedRows }) {
             return selectedRows.length > 0
@@ -177,7 +164,7 @@ export default {
       })
       return {
         name: 'moreActions',
-        title: this.moreActionsTitle || this.$t('common.MoreActions'),
+        title: this.moreActionsTitle || this.$t('MoreActions'),
         dropdown: dropdown
       }
     },
@@ -187,6 +174,11 @@ export default {
   },
   methods: {
     handleCreate() {
+      // this.$router.push({
+      //   name: 'UserCreate'
+      // })
+      // return
+      console.log('This: ', this.$router)
       let route
       if (typeof this.createRoute === 'string') {
         route = { name: this.createRoute }
@@ -196,7 +188,7 @@ export default {
       } else if (typeof this.createRoute === 'object') {
         route = this.createRoute
       }
-      this.$log.debug('handle create')
+      this.$log.debug('handle create: ', route, this.createRoute)
       if (this.createInNewPage) {
         const { href } = this.$router.resolve(route)
         window.open(href, '_blank')
@@ -205,8 +197,8 @@ export default {
       }
     },
     defaultBulkDeleteCallback({ selectedRows, reloadTable }) {
-      const msg = this.$t('common.deleteWarningMsg') + ' ' + selectedRows.length + ' ' + this.$t('common.rows') + ' ?'
-      const title = this.$tc('common.Info')
+      const msg = this.$t('DeleteWarningMsg') + ' ' + selectedRows.length + ' ' + this.$t('Rows') + ' ?'
+      const title = this.$tc('Info')
       const performDelete = this.performBulkDelete || this.defaultPerformBulkDelete
       this.$alert(msg, title, {
         type: 'warning',
@@ -219,9 +211,9 @@ export default {
             await performDelete(selectedRows)
             done()
             reloadTable()
-            this.$message.success(this.$tc('common.bulkDeleteSuccessMsg'))
+            this.$message.success(this.$tc('BulkDeleteSuccessMsg'))
           } catch (error) {
-            this.$message.error(this.$tc('common.bulkDeleteErrorMsg') + error.message)
+            this.$message.error(this.$tc('BulkDeleteErrorMsg') + error.message)
           } finally {
             instance.confirmButtonLoading = false
           }

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

@@ -94,10 +94,10 @@ export default {
   data() {
     return {
       defaultRightSideActions: [
-        { name: 'actionColumnSetting', fa: 'system-setting', tip: this.$t('common.CustomCol'), has: this.hasColumnSetting, callback: this.handleTableSettingClick.bind(this) },
-        { name: 'actionImport', fa: 'upload', tip: this.$t('common.Import'), has: this.hasImport, callback: this.handleImportClick.bind(this) },
-        { name: 'actionExport', fa: 'download', tip: this.$t('common.Export'), has: this.hasExport, callback: this.handleExportClick.bind(this) },
-        { name: 'actionRefresh', fa: 'refresh', tip: this.$t('common.Refresh'), has: this.hasRefresh, callback: this.handleRefreshClick.bind(this) }
+        { name: 'actionSetting', icon: 'system-setting', tip: this.$t('TableSetting'), has: this.hasColumnSetting, callback: this.handleTableSettingClick.bind(this) },
+        { name: 'actionImport', icon: 'upload', tip: this.$t('Import'), has: this.hasImport, callback: this.handleImportClick.bind(this) },
+        { name: 'actionExport', icon: 'download', tip: this.$t('Export'), has: this.hasExport, callback: this.handleExportClick.bind(this) },
+        { name: 'actionRefresh', icon: 'refresh', tip: this.$t('Refresh'), has: this.hasRefresh, callback: this.handleRefreshClick.bind(this) }
       ],
       dialogExportVisible: false
     }
@@ -146,15 +146,12 @@ export default {
   }
 
   .right-side-item {
-    padding-top: 4px;
   }
 
   .right-side-actions >>> .el-button {
     border: none;
     padding: 5px;
     font-size: 14px;
-    width: 26px;
-    height: 26px;
     color: #888;
     background-color: transparent;
   }
@@ -178,6 +175,8 @@ export default {
     padding-left: 10px;
     align-items: center;
     justify-content:center;
+    height: 30px;
+    line-height: 30px;
   }
 
   .table-action-right-side {

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

@@ -144,119 +144,138 @@ export default {
 </script>
 
 <style lang='scss' scoped>
+  $headerHeight: 30px;
+  $innerHeight: 28px;
   .table-header {
-    /*display: flex;*/
-    /*flex-direction: row;*/
-    /*justify-content: space-between;*/
+    >>> {
+      .el-cascader {
+        line-height: $innerHeight;
+        .el-input.el-input--suffix {
+          .el-input__inner {
+            height: calc(#{$headerHeight} - 3px);
+          }
+        }
+      }
+      .el-input__inner {
+        height: $innerHeight;
+      }
+
+      .el-button.el-button--primary {
+        border-color: #DCDFE6;
+      }
+
+      .el-input__suffix {
+        height: $innerHeight;
+        line-height: $innerHeight;
+      }
+
+       .el-input__icon {
+        line-height: $innerHeight;
+      }
+
+      .el-range-editor--small {
+        .el-input__icon, .el-range-separator {
+          line-height: 22px;
+        }
+      }
+    }
   }
 
   .right-side-item {
   }
 
-  .right-side-actions >>> .el-button {
-    border: none;
-    padding: 5px;
-    font-size: 14px;
-    width: 26px;
-    height: 26px;
-    color: #888;
-    background-color: transparent;
-  }
-
-  .right-side-actions >>> .fa {
-    height: 16px;
-    width: 16px;
-  }
-
-  .right-side-actions >>> .el-button:hover {
-    background-color: rgb(0, 0, 0, 0.05);
-  }
-
-  .action-search >>> .el-input__suffix i {
-    font-weight: 500;
-    color: #888;
-  }
-
-  .action-search >>> .el-cascader {
-    line-height: 32px !important;
-  }
-
   .right-side-actions {
     display: flex;
     padding-left: 10px;
     align-items: center;
     justify-content: center;
-  }
+    height: $headerHeight;
 
-  .table-action-right-side {
-    display: flex;
-    justify-content: center;
-  }
+    >>> .fa {
+      height: 16px;
+      width: 16px;
+    }
 
-  .export-item {
-    display: block;
-    padding: 5px 20px;
-  }
-
-  .datepicker {
-    margin-left: 10px;
-  }
-
-  .table-header {
-    line-height: 32px;
-  }
-
-  .left-side {
-    float: left;
-    display: block;
-    &>>> .action-item.el-dropdown {
-      height: 33px;
-      &> .el-button {
-        height: 100%;
-      }
+    >>> .el-button:hover {
+      background-color: rgb(0, 0, 0, 0.05);
     }
   }
 
-  .right-side {
-    float: right;
-  }
+    .action-search >>> .el-input__suffix i {
+      font-weight: 500;
+      color: #888;
+    }
 
-  .search {
-    display: flex;
-    flex-direction: row;
-  }
+    .action-search >>> .el-cascader {
+      line-height: $innerHeight !important;
+    }
 
-  .mobile .search {
-    display: inherit;
-  }
+    .table-action-right-side {
+      display: flex;
+      justify-content: center;
+    }
 
-  .mobile .search .datepicker {
-    margin-left: 0;
-  }
+    .export-item {
+      display: block;
+      padding: 5px 20px;
+    }
 
-  .search.left {
-    float: left;
-    padding: 0 !important;
-  }
+    .datepicker {
+      margin-left: 10px;
+    }
 
-  .search.right {
-    float: right;
-  }
+    .left-side {
+      float: left;
+      display: block;
+      &>>> .action-item.el-dropdown {
+        &> .el-button {
+          height: 100%;
+        }
+      }
+      >>> .el-button {
+      }
+    }
 
-  .mobile .search.right {
-    float: none;
-  }
+    .right-side {
+      float: right;
+    }
 
-  .mobile .search.right .action-search {
-    width: 100%;
-  }
+    .search {
+      display: flex;
+      flex-direction: row;
+    }
 
-  .mobile .right-side {
-    padding-top: 5px;
-  }
+    .mobile .search {
+      display: inherit;
+    }
 
-  .filter-field.right-side-item.action-search {
-    height: 34px;
-  }
+    .mobile .search .datepicker {
+      margin-left: 0;
+    }
+
+    .search.left {
+      float: left;
+      padding: 0 !important;
+    }
+
+    .search.right {
+      float: right;
+    }
+
+    .mobile .search.right {
+      float: none;
+    }
+
+    .mobile .search.right .action-search {
+      width: 100%;
+    }
+
+    .mobile .right-side {
+      padding-top: 5px;
+    }
+
+    .filter-field.right-side-item.action-search {
+      height: 30px;
+    }
 
 </style>

src/components/Table/ListTable/index.vue

@@ -222,27 +222,29 @@ export default {
 .table-content {
   margin-top: 10px;
 
-  & > > > .el-card__body {
-    padding: 0;
-  }
+  >>> {
+    .el-card__body {
+      padding: 0;
+    }
 
-  & > > > .el-table__header thead > tr > th {
-    background-color: white;
-  }
+    .el-table__header thead > tr > th {
+      background-color: white;
+    }
 
-  & > > > .el-table__row .cell {
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
+    .el-table__row .cell {
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
 
-  & > > > .el-table__expanded-cell pre {
-    max-height: 500px;
-    overflow-y: scroll;
-  }
+   .el-table__expanded-cell pre {
+      max-height: 500px;
+      overflow-y: scroll;
+    }
 
-  & > > > .el-button-ungroup .el-dropdown > .more-action {
-    height: 24.6px;
+    .el-button-ungroup .el-dropdown > .more-action {
+      //height: 24.6px;
+    }
   }
 }
 

src/components/Table/TabTree/index.vue

@@ -15,9 +15,9 @@
           :label-content="item.labelContent"
           :name="item.name"
         >
-          <span slot="label">
-            <i v-if="item.icon" :class="item.icon" class="fa " />
-            {{ item.title }}
+          <span slot="label" class="tab-container">
+            <i v-if="item.icon && !showText" :class="item.icon" class="tab-icon fa " />
+            <span v-if="showText" class="tab-text">{{ item.title }}</span>
             <slot :tab="item.name" name="badge" />
           </span>
         </el-tab-pane>
@@ -67,7 +67,9 @@ export default {
     return {
       flag: false,
       componentKey: 1,
-      activeTreeSetting: {}
+      activeTreeSetting: {},
+      showText: true,
+      keyMap: {}
     }
   },
   computed: {
@@ -99,10 +101,21 @@ export default {
   async mounted() {
     this.iActiveMenu = await this.getPropActiveTab()
     this.$eventBus.$on('treeComponentKey', () => {
-      this.componentKey += 1
+      this.componentKey += '1'
     })
+    this.hiddenTextIfNeed()
   },
   methods: {
+    hiddenTextIfNeed() {
+      const vm = this
+      const hideOverflowingText = _.debounce(function() {
+        const tabs = document.querySelector('.tree-tab .el-tabs__nav-wrap.is-scrollable')
+        vm.showText = !tabs
+      }, 800)
+
+      hideOverflowingText()
+      window.addEventListener('resize', hideOverflowingText)
+    },
     hideRMenu() {
       this.$refs.AutoDataZTree?.hideRMenu()
     },
@@ -119,7 +132,10 @@ export default {
       this.$emit('urlChange', url)
     },
     handleTabClick(tab) {
-      this.componentKey += 1
+      this.componentKey = this.keyMap[tab.name]
+      if (!this.componentKey) {
+        this.componentKey = this.$route.name + '_' + tab.name
+      }
       this.$emit('tab-click', tab)
       this.$emit('update:activeMenu', tab.name)
       this.$cookie.set(ACTIVE_TREE_TAB_KEY, tab.name, 1)
@@ -171,19 +187,14 @@ export default {
 </script>
 
 <style lang="scss" scoped>
->>> .ztree,
->>> .ztree li,
->>> .ztree li ul,
-.tree-tab {
-}
->>> .ztree {
+>>> .data-z-tree {
   padding: 0;
 }
 .page-submenu >>> .el-tabs__nav-wrap {
   position: static;
-
-  .el-tabs__item.is-active {
-    color:  var(--menu-text-active);
+  .el-tabs__item {
+    padding-right: 0;
+    padding-left: 0;
   }
 }
 .only-submenu  {
@@ -195,4 +206,9 @@ export default {
     padding: 0 20px;
   }
 }
+>>> {
+  .ztree {
+    padding: 0;
+  }
+}
 </style>

src/components/Table/TableFormatters/ActionsFormatter.vue

@@ -5,6 +5,7 @@
     :more-actions="moreActions"
     :more-actions-title="moreActionsTitle"
     :size="'mini'"
+    class="table-actions"
   />
 </template>
 
@@ -51,13 +52,13 @@ const defaultCloneCallback = function({ row, col }) {
 }
 
 const defaultDeleteCallback = function({ row, col, cellValue, reload }) {
-  let msg = this.$t('common.deleteWarningMsg')
+  let msg = this.$t('DeleteWarningMsg')
   const name = row.name || row.hostname
   if (name) {
     msg += ` "${name}" `
   }
   msg += ' ?'
-  const title = this.$t('common.Info')
+  const title = this.$t('Info')
   const performDelete = this.colActions.performDelete
   this.$alert(msg, title, {
     type: 'warning',
@@ -70,7 +71,7 @@ const defaultDeleteCallback = function({ row, col, cellValue, reload }) {
         await performDelete.bind(this)({ row: row, col: col })
         done()
         reload()
-        this.$message.success(this.$tc('common.deleteSuccessMsg'))
+        this.$message.success(this.$tc('DeleteSuccessMsg'))
       } finally {
         instance.confirmButtonLoading = false
       }
@@ -95,8 +96,8 @@ export default {
           canDelete: true,
           hasClone: true,
           canClone: true,
-          updateRoute: this.$route.name.replace('List', 'Update'),
-          cloneRoute: this.$route.name.replace('List', 'Create'),
+          updateRoute: 'UserUpdate',
+          cloneRoute: 'UserCreate',
           performDelete: defaultPerformDelete,
           onUpdate: defaultUpdateCallback,
           onDelete: defaultDeleteCallback,
@@ -111,7 +112,7 @@ export default {
     const defaultActions = [
       {
         name: 'update',
-        title: this.$t('common.Update'),
+        title: this.$t('Edit'),
         type: 'primary',
         has: colActions.hasUpdate,
         can: colActions.canUpdate,
@@ -120,7 +121,7 @@ export default {
       },
       {
         name: 'delete',
-        title: this.$t('common.Delete'),
+        title: this.$t('Delete'),
         type: 'danger',
         has: colActions.hasDelete,
         can: colActions.canDelete,
@@ -129,7 +130,7 @@ export default {
       },
       {
         name: 'clone',
-        title: this.$t('common.Clone'),
+        title: this.$t('Clone'),
         type: 'info',
         has: colActions.hasClone,
         can: colActions.canClone,
@@ -141,7 +142,8 @@ export default {
       colActions: colActions,
       defaultActions: defaultActions,
       extraActions: colActions.extraActions,
-      moreActionsTitle: colActions.moreActionsTitle || this.$t('common.More')
+      moreActionsTitle: ''
+      // moreActionsTitle: colActions.moreActionsTitle || null
     }
   },
   computed: {
@@ -152,7 +154,7 @@ export default {
         v.has = this.cleanBoolean(v, 'has', true)
         v.can = this.cleanBoolean(v, 'can', true)
         v.callback = this.cleanCallback(v, 'callback')
-        v.fa = this.cleanValue(v, 'fa')
+        v.icon = this.cleanValue(v, 'icon')
         v.order = v.order || 100
         v.tip = this.cleanValue(v, 'tip')
         v.title = this.cleanValue(v, 'title')
@@ -216,5 +218,10 @@ export default {
 </script>
 
 <style scoped>
+.table-actions >>> {
+  .el-icon-arrow-down {
+    display: none;
+  }
+}
 
 </style>

src/components/Table/TableFormatters/AmountFormatter.vue

@@ -11,7 +11,7 @@
         @show="getAsyncItems"
       >
         <div class="detail-content">
-          <div v-for="item of items" :key="getKey(item)" class="detail-item">
+          <div v-for="[index, item] of Object.entries(items)" :key="getKey(item, index)" class="detail-item">
             <span class="detail-item-name">{{ item }}</span>
           </div>
         </div>
@@ -62,7 +62,7 @@ export default {
     },
     items() {
       if (this.formatterArgs.async && !this.asyncGetDone) {
-        return [this.$t('common.tree.Loading') + '...']
+        return [this.$t('Loading') + '...']
       }
       const getItem = this.formatterArgs.getItem || (item => item.name)
       let data = this.data.map(item => getItem(item)) || []
@@ -77,9 +77,8 @@ export default {
     this.amount = this.formatterArgs.async ? this.cellValue : (this.cellValue || []).length
   },
   methods: {
-    getKey(item) {
-      const id = Math.random().toString(36).substring(16)
-      return id + item
+    getKey(item, index) {
+      return index + item
     },
     getDefaultUrl() {
       const url = new URL(this.url, location.origin)

src/components/Table/TableFormatters/ChoicesFormatter.vue

@@ -31,8 +31,8 @@ export default {
             false: 'text-danger'
           },
           textChoices: {
-            true: this.$t('common.Yes'),
-            false: this.$t('common.No')
+            true: this.$t('Yes'),
+            false: this.$t('No')
           },
           getKey({ row, cellValue }) {
             return (cellValue && typeof cellValue === 'object') ? cellValue.value : cellValue

src/components/Table/TableFormatters/DeleteActionFormatter.vue

@@ -2,6 +2,7 @@
   <el-button
     ref="deleteButton"
     :disabled="iDisabled"
+    :title="$t('Remove')"
     size="mini"
     type="danger"
     @click="onDelete(col, row, cellValue, reload)"
@@ -35,10 +36,10 @@ export default {
     defaultOnDelete(col, row, cellValue, reload) {
       const url = col.deleteUrl + cellValue
       this.$axios.delete(url).then(res => {
-        this.$message.success(this.$tc('common.deleteSuccessMsg'))
+        this.$message.success(this.$tc('DeleteSuccessMsg'))
         reload()
       }).catch(error => {
-        this.$message.error(this.$tc('common.deleteErrorMsg') + ' ' + error)
+        this.$message.error(this.$tc('DeleteErrorMsg') + ' ' + error)
       })
     },
     onDelete(col, row, cellValue, reload) {

src/components/Table/TableFormatters/DetailFormatter.vue

@@ -25,7 +25,7 @@ export default {
       type: Object,
       default() {
         return {
-          route: this.$route.name.replace('List', 'Detail'),
+          route: 'abc',
           getRoute: null,
           routeQuery: null,
           can: true,