diff --git a/src/components/AccountCreateUpdateForm/index.vue b/src/components/AccountCreateUpdateForm/index.vue
index 7f93aba22..d7f27c748 100644
--- a/src/components/AccountCreateUpdateForm/index.vue
+++ b/src/components/AccountCreateUpdateForm/index.vue
@@ -99,7 +99,7 @@ export default {
         },
         push_now: {
           hidden: () => {
-            return !this.platform.automation['push_account_enabled']
+            return !this.platform.automation?.['push_account_enabled']
           }
         }
       },
@@ -112,7 +112,7 @@ export default {
     afterGetRemoteMeta(meta) {
       const choices = meta.secret_type.choices
       const secretTypes = []
-      this.platform.protocols.forEach(p => {
+      this.platform.protocols?.forEach(p => {
         secretTypes.push(...p['secret_types'])
       })
       if (!this.form.secret_type) {
diff --git a/src/components/AccountListTable/AddAccount.vue b/src/components/AccountListTable/AddAccount.vue
index c1e9f4bf7..f91d263d9 100644
--- a/src/components/AccountListTable/AddAccount.vue
+++ b/src/components/AccountListTable/AddAccount.vue
@@ -72,11 +72,11 @@ export default {
   },
   methods: {
     async getPlatform() {
-      this.platform = await this.$axios.get(`/api/v1/assets/platforms/${this.asset.platform.id}/`)
-      console.log('Platform: ', this.platform)
+      const platformId = this.asset?.platform?.id || this.asset?.platform_id
+      this.platform = await this.$axios.get(`/api/v1/assets/platforms/${platformId}/`)
     },
     addAccount(form) {
-      const data = { asset: this.asset.id, ...form }
+      const data = { asset: this.asset?.id || '', ...form }
       this.$axios.post(`/api/v1/assets/accounts/`, data).then(() => {
         this.iVisible = false
         this.$emit('add', true)
diff --git a/src/components/AccountListTable/PasswordHistoryDialog.vue b/src/components/AccountListTable/PasswordHistoryDialog.vue
new file mode 100644
index 000000000..eb66af16e
--- /dev/null
+++ b/src/components/AccountListTable/PasswordHistoryDialog.vue
@@ -0,0 +1,75 @@
+<template>
+  <GenericListTableDialog :visible.sync="iVisible" v-bind="config" />
+</template>
+
+<script>
+import { GenericListTableDialog } from '@/layout/components'
+
+export default {
+  components: {
+    GenericListTableDialog
+  },
+  props: {
+    account: {
+      type: Object,
+      default: () => ({})
+    },
+    visible: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      config: {
+        title: this.$t('accounts.HistoryPassword'),
+        visible: false,
+        width: '60%',
+        tableConfig: {
+          url: `/api/v1/assets/accounts-historys?id=${this.account.id}`,
+          columns: [
+            'name', 'version', 'password', 'date_created'
+          ],
+          columnsShow: {
+            min: ['name'],
+            default: [
+              'name', 'version', 'password', 'date_created'
+            ]
+          },
+          columnsMeta: {
+            name: {
+              showOverflowTooltip: true
+            }
+          }
+        },
+        headerActions: {
+          hasImport: false,
+          hasExport: false,
+          hasLeftActions: false,
+          hasColumnSetting: false
+        }
+      }
+    }
+  },
+  computed: {
+    iVisible: {
+      get() {
+        return this.visible
+      },
+      set(val) {
+        this.$emit('update:visible', val)
+      }
+    }
+  },
+  created() {
+
+  },
+  methods: {
+
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/components/AccountListTable/ViewSecret.vue b/src/components/AccountListTable/ViewSecret.vue
index 9c7b5d92e..238bd19cf 100644
--- a/src/components/AccountListTable/ViewSecret.vue
+++ b/src/components/AccountListTable/ViewSecret.vue
@@ -17,17 +17,26 @@
     >
       <div>
         <el-form label-position="right" label-width="80px" :model="authInfo">
-          <el-form-item :label="this.$tc('assets.Name')">
-            <el-input v-model="account['name']" readonly />
+          <el-form-item :label="this.$t('assets.Name')">
+            <el-input v-model="account.asset.name" readonly />
           </el-form-item>
           <el-form-item :label="this.$tc('assets.Username')">
             <el-input v-model="account['username']" readonly />
           </el-form-item>
-          <el-form-item v-if="account['secret_type'] === 'password'" :label="this.$tc('assets.Password')">
-            <el-input v-model="authInfo.secret" type="password" show-password />
+          <el-form-item v-if="secretTypePassword" :label="this.$t('assets.Password')">
+            <ShowKeyCopyFormatter v-model="authInfo.secret" />
           </el-form-item>
-          <el-form-item v-else :label="this.$tc('assets.Key')">
-            <el-input v-model="authInfo.secret" type="textarea" :rows="10" />
+          <el-form-item v-else :label="this.$t('users.SSHKey')">
+            <el-input v-model="authInfo['private_key']" class="item-textarea" type="textarea" show-password readonly />
+          </el-form-item>
+          <el-form-item :label="this.$t('common.DateCreated')">
+            <span>{{ $moment(authInfo.date_created, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') }}</span>
+          </el-form-item>
+          <el-form-item :label="this.$t('common.DateUpdated')">
+            <span>{{ $moment(authInfo.date_updated, 'YYYY-MM-DD HH:mm:ss').format('YYYY-MM-DD HH:mm:ss') }}</span>
+          </el-form-item>
+          <el-form-item :label="this.$t('accounts.PasswordRecord')">
+            <span>{{ authInfo.version }}</span>
           </el-form-item>
         </el-form>
       </div>
@@ -38,11 +47,14 @@
 <script>
 import Dialog from '@/components/Dialog'
 import UserConfirmDialog from '@/components/UserConfirmDialog'
+import { ShowKeyCopyFormatter } from '@/components/TableFormatters'
+
 export default {
   name: 'ShowSecretInfo',
   components: {
     Dialog,
-    UserConfirmDialog
+    UserConfirmDialog,
+    ShowKeyCopyFormatter
   },
   props: {
     account: {
@@ -62,6 +74,11 @@ export default {
       url: `/api/v1/assets/account-secrets/${this.account.id}/`
     }
   },
+  computed: {
+    secretTypePassword() {
+      return this.authInfo.secret_type === 'password'
+    }
+  },
   methods: {
     getAuthInfo() {
       this.$axios.get(this.url, { disableFlashErrorMsg: true }).then(resp => {
@@ -76,8 +93,23 @@ export default {
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
   .item-textarea >>> .el-textarea__inner {
     height: 110px;
   }
+  ul {
+    margin: 0;
+  }
+  li {
+    display: block;
+    font-size: 13px;
+    margin-bottom: 8px;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    .title {
+      color: #303133;
+      font-weight: 500;
+    }
+  }
 </style>
diff --git a/src/components/AccountListTable/index.vue b/src/components/AccountListTable/index.vue
index c4735f4f1..73f5b53f8 100644
--- a/src/components/AccountListTable/index.vue
+++ b/src/components/AccountListTable/index.vue
@@ -15,6 +15,11 @@
       :account="account"
       @add="addAccountSuccess"
     />
+    <PasswordHistoryDialog
+      v-if="showPasswordHistoryDialog"
+      :account="account"
+      :visible.sync="showPasswordHistoryDialog"
+    />
   </div>
 </template>
 
@@ -27,12 +32,14 @@ import AddAccount from './AddAccount'
 import { connectivityMeta } from './const'
 import { openTaskPage } from '@/utils/jms'
 import { hasUUID } from '@/utils/common'
+import PasswordHistoryDialog from './PasswordHistoryDialog'
 
 export default {
   name: 'AccountListTable',
   components: {
     ListTable,
     UpdateSecretInfo,
+    PasswordHistoryDialog,
     ViewSecret,
     AddAccount
   },
@@ -61,7 +68,7 @@ export default {
     },
     asset: {
       type: Object,
-      default: null
+      default: () => ({})
     },
     columns: {
       type: Array,
@@ -71,6 +78,7 @@ export default {
   data() {
     const vm = this
     return {
+      showPasswordHistoryDialog: false,
       showViewSecretDialog: false,
       showUpdateSecretDialog: false,
       showAddDialog: false,
@@ -171,11 +179,23 @@ export default {
                   can: this.$hasPerm('assets.change_account') && !this.$store.getters.currentOrgIsRoot,
                   callback: ({ row }) => {
                     vm.account = row
+                    vm.$set(this.iAsset, 'platform_id', row.asset.platform_id)
                     vm.showAddDialog = false
                     setTimeout(() => {
                       vm.showAddDialog = true
                     })
                   }
+                },
+                {
+                  title: this.$t('accounts.HistoryPassword'),
+                  can: this.$hasPerm('assets.change_assetaccountsecret') && !this.$store.getters.currentOrgIsRoot,
+                  callback: ({ row }) => {
+                    vm.account = row
+                    vm.showPasswordHistoryDialog = false
+                    setTimeout(() => {
+                      vm.showPasswordHistoryDialog = true
+                    })
+                  }
                 }
               ]
             }
@@ -216,7 +236,7 @@ export default {
       this.$set(this.tableConfig, 'url', iNew)
       this.$set(this.headerActions.exportOptions, 'url', iNew.replace('/accounts/', '/account-secrets/'))
     },
-    '$route.query.assets': {
+    '$route.query.asset': {
       immediate: true,
       handler() {
         this.hasAccountPermission()
@@ -233,8 +253,6 @@ export default {
         actionColumn.formatterArgs.extraActions.push(item)
       }
     }
-
-    console.log('Has perm: ', this.$hasPerm('assets.change_account'))
   },
   methods: {
     onUpdateAuthDone(account) {
@@ -243,11 +261,15 @@ export default {
     addAccountSuccess() {
       this.$refs.ListTable.reloadTable()
     },
+    async getAssetDetail() {
+      const { query: { asset }} = this.$route
+      this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
+    },
     hasAccountPermission() {
-      const { path, query } = this.$route
+      const { path, query: { asset }} = this.$route
       if (!hasUUID(path)) {
-        const hasPerm = this.$hasPerm('assets.add_account') && !!query.assets
-        this.iAsset = { id: query.assets }
+        if (asset) this.getAssetDetail()
+        const hasPerm = this.$hasPerm('assets.add_account') && !!asset
         this.$set(this.headerActions.extraActions[0], 'can', hasPerm)
       }
     }
diff --git a/src/components/AutoDataTable/index.vue b/src/components/AutoDataTable/index.vue
index 2d3ef2e76..0ca6faf40 100644
--- a/src/components/AutoDataTable/index.vue
+++ b/src/components/AutoDataTable/index.vue
@@ -27,7 +27,8 @@ import {
   DisplayFormatter,
   ActionsFormatter,
   ChoicesFormatter,
-  ObjectRelatedFormatter
+  ObjectRelatedFormatter,
+  ChoicesDisplayFormatter
 } from '@/components/TableFormatters'
 import i18n from '@/i18n/i18n'
 import ColumnSettingPopover from './components/ColumnSettingPopover'
@@ -136,6 +137,10 @@ export default {
           col.sortable = 'custom'
           col.formatter = DisplayFormatter
           break
+        case 'labeled_choice':
+          col.sortable = 'custom'
+          col.formatter = ChoicesDisplayFormatter
+          break
         case 'boolean':
           col.formatter = ChoicesFormatter
           col.align = 'center'
diff --git a/src/components/Dialog/index.vue b/src/components/Dialog/index.vue
index ad9667a61..796fab487 100644
--- a/src/components/Dialog/index.vue
+++ b/src/components/Dialog/index.vue
@@ -83,12 +83,24 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-  .dialog >>> .el-dialog__header {
-    /*padding-top: 10px;*/
+  .dialog >>> .el-dialog {
+    padding: 30px 40px 35px;
+
+    &__header {
+      padding: 0 10px 0 0;
+    }
+
+    &__body {
+      padding: 15px 0 0;
+    }
+
+    &__footer {
+      padding: 0 0 10px 0;
+    }
   }
 
-  .dialog-footer {
-    padding-right: 20px;
+  .dialog-footer >>> button.el-button--small {
+    padding: 10px 21px;
+    font-size: 13px;
   }
-
 </style>
diff --git a/src/components/ListTable/TableAction/ImportDialog.vue b/src/components/ListTable/TableAction/ImportDialog.vue
index d1e8d2fb3..58932b3b7 100644
--- a/src/components/ListTable/TableAction/ImportDialog.vue
+++ b/src/components/ListTable/TableAction/ImportDialog.vue
@@ -5,14 +5,14 @@
     :destroy-on-close="true"
     :close-on-click-modal="false"
     :loading-status="loadStatus"
-    width="80%"
+    width="60%"
     class="importDialog"
     :show-cancel="false"
     :show-confirm="false"
     @close="handleImportCancel"
   >
-    <el-form v-if="!showTable" label-position="left" style="padding-left: 50px">
-      <el-form-item :label="$t('common.Import' )" :label-width="'100px'">
+    <el-form v-if="!showTable" label-position="left">
+      <el-form-item :label="$tc('common.Import' )" :label-width="'100px'">
         <el-radio v-if="canImportCreate" v-model="importOption" class="export-item" label="create">
           {{ this.$t('common.Create') }}
         </el-radio>
@@ -22,12 +22,12 @@
         <div style="line-height: 1.5">
           <span class="el-upload__tip">
             {{ downloadTemplateTitle }}
-            <el-link type="success" :underline="false" style="padding-left: 10px" @click="downloadTemplateFile('csv')"> CSV </el-link>
-            <el-link type="success" :underline="false" style="padding-left: 10px" @click="downloadTemplateFile('xlsx')"> XLSX </el-link>
+            <el-link type="success" @click="downloadTemplateFile('csv')"> CSV </el-link>
+            <el-link type="success" @click="downloadTemplateFile('xlsx')"> XLSX </el-link>
           </span>
         </div>
       </el-form-item>
-      <el-form-item :label="$t('common.Upload' )" :label-width="'100px'" class="file-uploader">
+      <el-form-item :label="$tc('common.Upload' )" :label-width="'100px'" class="file-uploader">
         <el-upload
           ref="upload"
           drag
@@ -40,9 +40,13 @@
           accept=".csv,.xlsx"
         >
           <i class="el-icon-upload" />
-          <div class="el-upload__text">{{ $t('common.imExport.dragUploadFileInfo') }}</div>
+          <div class="el-upload__text">
+            {{ $t('common.imExport.dragUploadFileInfo') }}
+          </div>
           <div slot="tip" class="el-upload__tip">
-            <span :class="{'hasError': hasFileFormatOrSizeError }">{{ $t('common.imExport.uploadCsvLth10MHelpText') }}</span>
+            <span :class="{'hasError': hasFileFormatOrSizeError }">
+              {{ $t('common.imExport.uploadCsvLth10MHelpText') }}
+            </span>
             <div v-if="renderError" class="hasError">{{ renderError }}</div>
           </div>
         </el-upload>
@@ -168,7 +172,10 @@ export default {
       this.$axios.post(
         renderToJsonUrl,
         file.raw,
-        { headers: { 'Content-Type': isCsv ? 'text/csv' : 'text/xlsx' }, disableFlashErrorMsg: true }
+        {
+          headers: { 'Content-Type': isCsv ? 'text/csv' : 'text/xlsx' },
+          disableFlashErrorMsg: true
+        }
       ).then(data => {
         this.jsonData = data
         this.showTable = true
@@ -205,9 +212,8 @@ export default {
       }
       return this.url.indexOf('?') === -1 ? `${this.url}?${query}` : `${this.url}&${query}`
     },
-    // eslint-disable-next-line handle-callback-err
-    catchError(error) {
-      // debug(error)
+    catchError(err) {
+      console.log(err)
     },
     onSuccess(msg) {
       this.errorMsg = ''
@@ -220,7 +226,7 @@ export default {
       window.URL.revokeObjectURL(url)
     },
     async handleImportConfirm() {
-      this.$refs['importTable'].performUpload()
+      await this.$refs['importTable'].performUpload()
     },
     handleImportCancel() {
       this.showImportDialog = false
@@ -243,10 +249,6 @@ export default {
     overflow: auto
   }
 
-  .importDialog >>> .el-form-item.file-uploader {
-    padding-right: 150px;
-  }
-
   .file-uploader >>> .el-upload {
     width: 100%;
     //padding-right: 150px;
@@ -287,5 +289,9 @@ export default {
   .el-upload__tip {
     line-height: 1.5;
     padding-top: 0;
+
+    .el-link {
+      margin-left: 10px;
+    }
   }
 </style>
diff --git a/src/components/TableFormatters/ShowKeyCopyFormatter.vue b/src/components/TableFormatters/ShowKeyCopyFormatter.vue
index 6ce047a24..9d533ea9f 100644
--- a/src/components/TableFormatters/ShowKeyCopyFormatter.vue
+++ b/src/components/TableFormatters/ShowKeyCopyFormatter.vue
@@ -3,6 +3,7 @@
     <span>{{ currentValue }}</span>
     <span class="right">
       <el-tooltip
+        v-if="hasShow"
         effect="dark"
         placement="top"
         :content="this.$t('common.View')"
@@ -10,6 +11,7 @@
         <i class="el-icon-view" @click="onShow()" />
       </el-tooltip>
       <el-tooltip
+        v-if="hasCopy"
         effect="dark"
         placement="top"
         :content="this.$t('common.Copy')"
@@ -21,15 +23,24 @@
 </template>
 
 <script>
-import BaseFormatter from './base'
-
 export default {
   name: 'ShowKeyCopyFormatter',
-  extends: BaseFormatter,
-  proops: {
-    cellValue: {
+  props: {
+    value: {
       type: String,
       default: () => ''
+    },
+    cellValue: {
+      type: [String, Number],
+      default: null
+    },
+    hasShow: {
+      type: Boolean,
+      default: true
+    },
+    hasCopy: {
+      type: Boolean,
+      default: true
     }
   },
   data() {
@@ -37,18 +48,24 @@ export default {
       currentValue: this.switchShowValue()
     }
   },
+  computed: {
+    iValue() {
+      return this.value || this.cellValue
+    }
+  },
   methods: {
     switchShowValue() {
-      return '******' + this.cellValue.replace(/[\w-]/g, '')
+      const value = this.value || this.cellValue
+      return '******' + value.replace(/[\s\S]/g, '')
     },
     onShow() {
-      const { currentValue, cellValue, switchShowValue } = this
-      this.currentValue = currentValue === cellValue ? switchShowValue() : cellValue
+      const { currentValue, switchShowValue } = this
+      this.currentValue = currentValue === this.iValue ? switchShowValue() : this.iValue
     },
     onCopy: _.throttle(function() {
       const inputDom = document.createElement('input')
-      inputDom.id = 'creatInputDom'
-      inputDom.value = this.cellValue
+      inputDom.id = 'createInputDom'
+      inputDom.value = this.iValue
       document.body.appendChild(inputDom)
       inputDom.select()
       document?.execCommand('copy')
@@ -74,7 +91,7 @@ export default {
       cursor: pointer;
       .el-icon-view, .el-icon-copy-document {
         &:hover {
-          color: #1c84c6;
+          color: var(--color-primary);
         }
       }
     }
diff --git a/src/components/TreeTable/index.vue b/src/components/TreeTable/index.vue
index 25194cdaa..54efaac96 100644
--- a/src/components/TreeTable/index.vue
+++ b/src/components/TreeTable/index.vue
@@ -44,6 +44,8 @@ import AutoDataZTree from '../AutoDataZTree'
 import Dialog from '@/components/Dialog'
 import ListTable from '../ListTable'
 import IBox from '../IBox'
+import { setUrlParam } from '@/utils/common'
+
 export default {
   name: 'TreeTable',
   components: {
@@ -88,8 +90,16 @@ export default {
   },
   mounted() {
     // debug(this.treeSetting)
+    this.initSetTableUrl()
   },
   methods: {
+    initSetTableUrl() {
+      const { asset = '', node = '' } = this.$route.query || {}
+      let url = this.iTableConfig.url
+      url = setUrlParam(url, 'asset', asset)
+      url = setUrlParam(url, 'node', node)
+      this.$set(this.iTableConfig, 'url', url)
+    },
     handleUrlChange(url) {
       this.$set(this.iTableConfig, 'url', url)
       this.$emit('urlChange', url)
diff --git a/src/i18n/langs/en.json b/src/i18n/langs/en.json
index e3cfcad22..ec77b2f69 100644
--- a/src/i18n/langs/en.json
+++ b/src/i18n/langs/en.json
@@ -1,6 +1,8 @@
 {
   "": "",
   "accounts": {
+    "HistoryPassword": "History password",
+    "PasswordRecord": "Password record",
     "AccountHistableHelpMessage": "Record the historical version of the current account",
     "PleaseClickLeftAssetToViewAssetAccount": "Asset account list,  please click on the assets on the left to view",
     "PleaseClickLeftApplicationToViewApplicationAccount": "Application account list, please click on the application on the left to view",
diff --git a/src/i18n/langs/ja.json b/src/i18n/langs/ja.json
index d267cfdc0..73e09dd76 100644
--- a/src/i18n/langs/ja.json
+++ b/src/i18n/langs/ja.json
@@ -1,6 +1,8 @@
 {
   "": "",
   "accounts": {
+    "HistoryPassword": "履歴パスワード",
+    "PasswordRecord": "パスワードレコード",
     "AccountHistableHelpMessage": "現在のアカウントの履歴バージョンを記録する",
     "PleaseClickLeftAssetToViewAssetAccount": "資産のアカウントのリスト、左側の資産をクリックして表示します",
     "PleaseClickLeftApplicationToViewApplicationAccount": "アカウントのリストを適用して、左側のアプリケーションをクリックして表示します",
diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index 96c174804..cf64f3285 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -1,6 +1,8 @@
 {
   "": "",
   "accounts": {
+    "HistoryPassword": "历史密码",
+    "PasswordRecord": "密码记录",
     "AccountHistableHelpMessage": "记录当前账号的历史版本",
     "PleaseClickLeftAssetToViewAssetAccount": "资产账号列表，点击左侧资产进行查看",
     "PleaseClickLeftApplicationToViewApplicationAccount": "应用账号列表，点击左侧应用进行查看",
@@ -96,6 +98,7 @@
     "NoSQLProtocol": "非关系数据库"
   },
   "assets": {
+    "Address": "地址",
     "PrivateKey": "密钥",
     "Secret": "密码",
     "Network": "网络",
@@ -406,6 +409,7 @@
     "Update": "更新",
     "Revise": "修改",
     "Upload": "上传",
+    "OfflineUpload": "离线上传",
     "Clone": "克隆",
     "Username": "用户名",
     "Validity": "有效",
@@ -707,6 +711,9 @@
   },
   "route": {
     "": "",
+    "AppletHostCreate": "添加远程应用发布机",
+    "AppletHostUpdate": "更新远程应用发布机",
+    "AppletCreate": "创建远程应用",
     "CreateEndpoint": "创建端点",
     "UpdateEndpoint": "更新端点",
     "CreateEndpointRule": "创建端点规则",
@@ -887,6 +894,11 @@
   "rbac": {
     "Permissions": "权限"
   },
+  "terminal": {
+    "Applets": "远程应用",
+    "AppletHosts": "应用发布机",
+    "uploadZipTips": "请上传zip格式的文件"
+  },
   "sessions": {
     "SetToDefaultStorage": "设置为默认存储",
     "SetToDefault": "设为默认",
@@ -968,6 +980,7 @@
     }
   },
   "setting": {
+    "Applets": "远程应用",
     "EndpointListHelpMessage": "服务端点是用户访问服务的地址(端口)，当用户在连接资产时，会根据端点规则和资产标签选择服务端点，作为访问入口建立连接，实现分布式连接资产",
     "EndpointRuleListHelpMessage": "对于服务端点选择策略，目前支持两种：<br>1、根据端点规则指定端点(当前页面)；<br>2、通过资产标签选择端点，标签名固定是 endpoint，值是端点的名称。<br>两种方式优先使用标签匹配，因为 IP 段可能冲突，标签方式是作为规则的补充存在的。",
     "EnableKoKoSSHHelpText": "开启时连接资产会显示 SSH Client 拉起方式",
diff --git a/src/router/settings/index.js b/src/router/settings/index.js
index ac9de5c95..44e737794 100644
--- a/src/router/settings/index.js
+++ b/src/router/settings/index.js
@@ -199,6 +199,48 @@ export default {
         }
       ]
     },
+    {
+      path: '/settings/applets',
+      component: empty,
+      redirect: '',
+      meta: {
+        title: i18n.t('setting.Applets'),
+        app: 'terminal',
+        permissions: ['settings.change_terminal']
+      },
+      children: [
+        {
+          path: '',
+          name: 'Applets',
+          component: () => import('@/views/settings/Applet'),
+          meta: {
+            title: i18n.t('setting.Applets'),
+            icon: 'tasks',
+            permissions: ['settings.change_terminal']
+          }
+        },
+        {
+          path: 'hosts/create',
+          name: 'AppletHostCreate',
+          component: () => import('@/views/settings/Applet/AppletHosts/AppletHostCreateUpdate'),
+          hidden: true,
+          meta: {
+            title: i18n.t('route.AppletHostCreate'),
+            permissions: ['settings.change_terminal']
+          }
+        },
+        {
+          path: 'hosts/:id/update',
+          name: 'AppletHostUpdate',
+          component: () => import('@/views/settings/Applet/AppletHosts/AppletHostCreateUpdate'),
+          hidden: true,
+          meta: {
+            title: i18n.t('route.AppletHostUpdate'),
+            permissions: ['settings.change_terminal']
+          }
+        }
+      ]
+    },
     {
       path: '/settings/security',
       name: 'Security',
diff --git a/src/router/workbench/index.js b/src/router/workbench/index.js
index 8c21a50b2..e4d64545d 100644
--- a/src/router/workbench/index.js
+++ b/src/router/workbench/index.js
@@ -42,48 +42,6 @@ export default {
         permissions: ['perms.view_myassets']
       }
     },
-    {
-      path: '/workbench/apps',
-      name: 'Apps',
-      component: empty,
-      redirect: 'remoteapp',
-      alwaysShow: true,
-      meta: {
-        title: i18n.t('route.MyApps'),
-        icon: 'th',
-        permissions: ['perms.view_myapps']
-      },
-      children: [
-        {
-          path: 'remote-apps',
-          name: 'MyRemoteApps',
-          component: () => import('@/views/myapps/RemoteApp'),
-          meta: {
-            title: i18n.t('route.RemoteApp'),
-            permissions: [],
-            licenseRequired: true
-          }
-        },
-        {
-          path: 'databases',
-          name: 'MyDatabases',
-          component: () => import('@/views/myapps/DatabaseApp'),
-          meta: {
-            title: i18n.t('route.DatabaseApp'),
-            permissions: []
-          }
-        },
-        {
-          path: 'kubernetes',
-          name: 'MyKubernetes',
-          component: () => import('@/views/myapps/KubernetesApp'),
-          meta: {
-            title: i18n.t('route.KubernetesApp'),
-            permissions: []
-          }
-        }
-      ]
-    },
     {
       path: '/workbench/ops',
       component: empty,
diff --git a/src/views/accounts/AssetAccount/AssetAccountList.vue b/src/views/accounts/AssetAccount/AssetAccountList.vue
index fac6f2eec..a456b156f 100644
--- a/src/views/accounts/AssetAccount/AssetAccountList.vue
+++ b/src/views/accounts/AssetAccount/AssetAccountList.vue
@@ -42,12 +42,12 @@ export default {
       let url = '/api/v1/assets/accounts/'
       if (treeNode.meta.type === 'node') {
         const nodeId = treeNode.meta.data.id
-        url = setUrlParam(url, 'assets', '')
-        url = setUrlParam(url, 'nodes', nodeId)
+        url = setUrlParam(url, 'asset', '')
+        url = setUrlParam(url, 'node', nodeId)
       } else if (treeNode.meta.type === 'asset') {
         const assetId = treeNode.meta.data.id
-        url = setUrlParam(url, 'nodes', '')
-        url = setUrlParam(url, 'assets', assetId)
+        url = setUrlParam(url, 'node', '')
+        url = setUrlParam(url, 'asset', assetId)
       }
 
       this.$set(this.tableConfig, 'url', url)
diff --git a/src/views/assets/Asset/AssetCreateUpdate/BaseAssetCreateUpdate.vue b/src/views/assets/Asset/AssetCreateUpdate/BaseAssetCreateUpdate.vue
index b2a508ba9..604b8f4fb 100644
--- a/src/views/assets/Asset/AssetCreateUpdate/BaseAssetCreateUpdate.vue
+++ b/src/views/assets/Asset/AssetCreateUpdate/BaseAssetCreateUpdate.vue
@@ -21,6 +21,14 @@ export default {
     addFieldsMeta: {
       type: Object,
       default: () => ({})
+    },
+    createSuccessNextRoute: {
+      type: Object,
+      default: () => ({ name: 'AssetList' })
+    },
+    updateSuccessNextRoute: {
+      type: Object,
+      default: () => ({ name: 'AssetList' })
     }
   },
   data() {
@@ -31,8 +39,8 @@ export default {
         initial: {},
         platform: {},
         url: '/api/v1/assets/hosts/',
-        createSuccessNextRoute: { name: 'AssetList' },
-        updateSuccessNextRoute: { name: 'AssetList' },
+        createSuccessNextRoute: this.createSuccessNextRoute,
+        updateSuccessNextRoute: this.updateSuccessNextRoute,
         hasDetailInMsg: false,
         fields: [
           [this.$t('common.Basic'), ['name', 'address', 'platform']],
diff --git a/src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue b/src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue
index 5ee5b786c..c1985b6d7 100644
--- a/src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue
+++ b/src/views/assets/Asset/AssetCreateUpdate/components/AssetAccounts.vue
@@ -1,36 +1,37 @@
 <template>
-  <div v-if="isUpdate(this)">
-    在资产详情中更新账号信息
-  </div>
-  <div v-else class="accounts">
-    <el-table :data="accounts" style="width: 100%">
-      <el-table-column prop="username" label="用户名" width="180" />
-      <el-table-column prop="privileged" label="特权账号">
-        <template v-slot="scope">
-          <i class="fa text-primary" :class="scope.row['privileged'] ? 'fa-check' : ''" />
-        </template>
-      </el-table-column>
-      <el-table-column fixed="right" align="right" label="操作" width="135" class-name="buttons">
-        <template v-slot="scope">
-          <el-button type="danger" icon="el-icon-minus" size="mini" @click="removeAccount(scope.row)" />
-          <el-button type="primary" icon="el-icon-edit" size="mini" @click="onEditClick(scope.row)" />
-        </template>
-      </el-table-column>
-    </el-table>
-    <div class="actions">
-      <el-button size="mini" type="primary" @click="onAddClick">添加</el-button>
-      <el-button size="mini" type="success" @click="onAddFromTemplateClick">模版添加</el-button>
+  <div>
+    <div v-if="isUpdate(this)">
+      在资产详情中更新账号信息
+    </div>
+    <div v-else class="accounts">
+      <el-table :data="accounts" style="width: 100%">
+        <el-table-column prop="username" label="用户名" width="180" />
+        <el-table-column prop="privileged" label="特权账号">
+          <template v-slot="scope">
+            <i class="fa text-primary" :class="scope.row['privileged'] ? 'fa-check' : ''" />
+          </template>
+        </el-table-column>
+        <el-table-column fixed="right" align="right" label="操作" width="135" class-name="buttons">
+          <template v-slot="scope">
+            <el-button type="danger" icon="el-icon-minus" size="mini" @click="removeAccount(scope.row)" />
+            <el-button type="primary" icon="el-icon-edit" size="mini" @click="onEditClick(scope.row)" />
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="actions">
+        <el-button size="mini" type="primary" @click="onAddClick">添加</el-button>
+        <el-button size="mini" type="success" @click="onAddFromTemplateClick">模版添加</el-button>
+      </div>
+      <AddAccountDialog
+        :visible.sync="addAccountDialogVisible"
+        :platform="platform"
+        :account="account"
+        :accounts="accounts"
+      />
+      <AccountTemplateDialog
+        :visible.sync="templateDialogVisible"
+      />
     </div>
-
-    <AddAccountDialog
-      :visible.sync="addAccountDialogVisible"
-      :platform="platform"
-      :account="account"
-      :accounts="accounts"
-    />
-    <AccountTemplateDialog
-      :visible.sync="templateDialogVisible"
-    />
   </div>
 </template>
 
@@ -61,11 +62,11 @@ export default {
   },
   data() {
     return {
-      addAccountDialogVisible: false,
-      templateDialogVisible: false,
       accounts: [],
       account: {},
-      initial: false
+      initial: false,
+      addAccountDialogVisible: false,
+      templateDialogVisible: false
     }
   },
   watch: {
@@ -91,7 +92,7 @@ export default {
     onEditClick(account) {
       this.account = account
       setTimeout(() => {
-        this.visible = true
+        this.addAccountDialogVisible = true
       })
     },
     onAddClick() {
diff --git a/src/views/assets/Asset/AssetList/components/BaseList.vue b/src/views/assets/Asset/AssetList/components/BaseList.vue
index 633045818..6347fbdee 100644
--- a/src/views/assets/Asset/AssetList/components/BaseList.vue
+++ b/src/views/assets/Asset/AssetList/components/BaseList.vue
@@ -110,8 +110,7 @@ export default {
           },
           protocols: {
             formatter: (row) => {
-              let data = row.protocols.map(item => item.name + '/' + item.port)
-              data = data.join(', ')
+              const data = row.protocols.map(p => <el-tag size='mini'>{p.name}/{p.port} </el-tag>)
               return <span> {data} </span>
             }
           },
diff --git a/src/views/assets/Platform/const.js b/src/views/assets/Platform/const.js
index 9149897a2..3110405a9 100644
--- a/src/views/assets/Platform/const.js
+++ b/src/views/assets/Platform/const.js
@@ -14,7 +14,7 @@ export const platformFieldsMeta = (vm) => {
         'ansible_enabled', 'ansible_config',
         'ping_enabled', 'ping_method',
         'gather_facts_enabled', 'gather_facts_method',
-        'create_account_enabled', 'create_account_method',
+        'push_account_enabled', 'push_account_method',
         'change_secret_enabled', 'change_secret_method',
         'verify_account_enabled', 'verify_account_method'
       ],
@@ -25,7 +25,7 @@ export const platformFieldsMeta = (vm) => {
         },
         ping_method: {},
         gather_facts_method: {},
-        create_account_method: {},
+        push_account_method: {},
         change_secret_method: {},
         verify_account_method: {}
       }
diff --git a/src/views/myapps/DatabaseApp.vue b/src/views/myapps/DatabaseApp.vue
deleted file mode 100644
index 9998dbb52..000000000
--- a/src/views/myapps/DatabaseApp.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <Page>
-    <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-  </Page>
-
-</template>
-
-<script>
-import ListTable from '@/components/ListTable'
-import Page from '@/layout/components/Page'
-import { ActionsFormatter } from '@/components/TableFormatters'
-
-export default {
-  name: 'DatabaseApp',
-  components: {
-    ListTable,
-    Page
-  },
-  props: {
-  },
-  data() {
-    return {
-      tableConfig: {
-        url: `/api/v1/perms/users/applications/?category=db`,
-        columns: [
-          {
-            prop: 'name',
-            align: 'center',
-            label: this.$t('assets.Name'),
-            sortable: true
-          },
-          {
-            prop: 'type_display',
-            align: 'center',
-            label: this.$t('assets.Type')
-          },
-          {
-            prop: 'attrs.database',
-            align: 'center',
-            label: this.$t('assets.Database')
-          },
-          {
-            prop: 'comment',
-            align: 'center',
-            showOverflowTooltip: true,
-            label: this.$t('assets.Comment')
-          },
-          {
-            prop: 'id',
-            align: 'center',
-            label: this.$t('assets.Action'),
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              hasDelete: false,
-              hasUpdate: false,
-              hasClone: false,
-              extraActions: [
-                {
-                  name: 'connect',
-                  fa: 'fa-terminal',
-                  type: 'primary',
-                  callback: function({ row }) {
-                    window.open(`/luna/?type=database_app&login_to=${row.id}`, '_blank')
-                  }
-                }
-              ]
-            }
-          }
-        ]
-      },
-      headerActions: {
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: true,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false,
-        hasLeftActions: false,
-        hasSearch: true,
-        hasRightActions: true
-      }
-    }
-  },
-  computed: {
-
-  },
-  mounted() {
-  },
-  methods: {
-  }
-}
-</script>
-
-<style lang='less' scoped>
-
-</style>
diff --git a/src/views/myapps/KubernetesApp.vue b/src/views/myapps/KubernetesApp.vue
deleted file mode 100644
index d59db2a62..000000000
--- a/src/views/myapps/KubernetesApp.vue
+++ /dev/null
@@ -1,96 +0,0 @@
-<template>
-  <Page>
-    <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-  </Page>
-
-</template>
-
-<script>
-import ListTable from '@/components/ListTable'
-import Page from '@/layout/components/Page'
-import { ActionsFormatter } from '@/components/TableFormatters'
-
-export default {
-  name: 'KubernetesApp',
-  components: {
-    ListTable,
-    Page
-  },
-  props: {
-  },
-  data() {
-    return {
-      tableConfig: {
-        url: `/api/v1/perms/users/applications/?category=cloud`,
-        columns: [
-          {
-            prop: 'name',
-            align: 'center',
-            label: this.$t('assets.Name'),
-            sortable: true
-          },
-          {
-            prop: 'type_display',
-            align: 'center',
-            label: this.$t('assets.Type')
-          },
-          {
-            prop: 'attrs.cluster',
-            align: 'center',
-            label: this.$t('applications.cluster')
-          },
-          {
-            prop: 'comment',
-            align: 'center',
-            showOverflowTooltip: true,
-            label: this.$t('assets.Comment')
-          },
-          {
-            prop: 'id',
-            align: 'center',
-            label: this.$t('assets.Action'),
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              hasDelete: false,
-              hasUpdate: false,
-              hasClone: false,
-              extraActions: [
-                {
-                  name: 'connect',
-                  fa: 'fa-terminal',
-                  type: 'primary',
-                  callback: function({ row }) {
-                    window.open(`/luna/?type=k8s_app&login_to=${row.id}`, '_blank')
-                  }
-                }
-              ]
-            }
-          }
-        ]
-      },
-      headerActions: {
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: true,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false,
-        hasLeftActions: false,
-        hasSearch: true,
-        hasRightActions: true
-      }
-    }
-  },
-  computed: {
-
-  },
-  mounted() {
-  },
-  methods: {
-  }
-}
-</script>
-
-<style lang='less' scoped>
-
-</style>
diff --git a/src/views/myapps/RemoteApp.vue b/src/views/myapps/RemoteApp.vue
deleted file mode 100644
index 381ccf65b..000000000
--- a/src/views/myapps/RemoteApp.vue
+++ /dev/null
@@ -1,95 +0,0 @@
-<template>
-  <Page>
-    <ListTable ref="ListTable" :table-config="tableConfig" :header-actions="headerActions" />
-  </Page>
-</template>
-
-<script>
-import ListTable from '@/components/ListTable'
-import Page from '@/layout/components/Page'
-import { ActionsFormatter } from '@/components/TableFormatters'
-
-export default {
-  name: 'RemoteApp',
-  components: {
-    ListTable,
-    Page
-  },
-  props: {
-  },
-  data() {
-    return {
-      tableConfig: {
-        url: `/api/v1/perms/users/applications/?category=remote_app`,
-        columns: [
-          {
-            prop: 'name',
-            align: 'center',
-            label: this.$t('assets.Name'),
-            sortable: true
-          },
-          {
-            prop: 'type_display',
-            align: 'center',
-            label: this.$t('assets.Type')
-          },
-          {
-            prop: 'attrs.asset_info.hostname',
-            align: 'center',
-            label: this.$t('assets.Asset')
-          },
-          {
-            prop: 'comment',
-            align: 'center',
-            showOverflowTooltip: true,
-            label: this.$t('assets.Comment')
-          },
-          {
-            prop: 'id',
-            align: 'center',
-            label: this.$t('assets.Action'),
-            formatter: ActionsFormatter,
-            formatterArgs: {
-              hasDelete: false,
-              hasUpdate: false,
-              hasClone: false,
-              extraActions: [
-                {
-                  name: 'connect',
-                  fa: 'fa-terminal',
-                  type: 'primary',
-                  callback: function({ row }) {
-                    window.open(`/luna/?type=remote_app&login_to=${row.id}`, '_blank')
-                  }
-                }
-              ]
-            }
-          }
-        ]
-      },
-      headerActions: {
-        hasExport: false,
-        hasImport: false,
-        hasRefresh: true,
-        hasCreate: false,
-        hasBulkDelete: false,
-        hasBulkUpdate: false,
-        hasLeftActions: false,
-        hasSearch: true,
-        hasRightActions: true
-      }
-    }
-  },
-  computed: {
-
-  },
-  mounted() {
-  },
-  methods: {
-  }
-}
-</script>
-
-<style lang='less' scoped>
-
-</style>
diff --git a/src/views/settings/Applet/AppletHosts/AppletHostCreateUpdate.vue b/src/views/settings/Applet/AppletHosts/AppletHostCreateUpdate.vue
new file mode 100644
index 000000000..b207c1335
--- /dev/null
+++ b/src/views/settings/Applet/AppletHosts/AppletHostCreateUpdate.vue
@@ -0,0 +1,48 @@
+<template>
+  <BaseAssetCreateUpdate v-if="!loading" v-bind="config" />
+</template>
+
+<script>
+import BaseAssetCreateUpdate from '@/views/assets/Asset/AssetCreateUpdate/BaseAssetCreateUpdate'
+export default {
+  components: {
+    BaseAssetCreateUpdate
+  },
+  data() {
+    return {
+      loading: true,
+      config: {
+        url: '/api/v1/terminal/applet-hosts/?oid=RemoteAppHost',
+        addFields: [
+          [this.$t('assets.Account'), ['account_automation']]
+        ],
+        addFieldsMeta: {
+          platform: {
+            hidden: () => true
+          },
+          nodes: {
+            hidden: () => true
+          },
+          labels: {
+            hidden: () => true
+          }
+        },
+        createSuccessNextRoute: { name: 'Applets' },
+        updateSuccessNextRoute: { name: 'Applets' }
+      }
+    }
+  },
+  async mounted() {
+    const platform = await this.$axios.get('/api/v1/assets/platforms/RemoteAppHost/')
+    this.$route.query.platform = platform['id']
+    this.$route.query.oid = 'SYSTEM'
+    this.loading = false
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/views/settings/Applet/AppletHosts/AppletHostList.vue b/src/views/settings/Applet/AppletHosts/AppletHostList.vue
new file mode 100644
index 000000000..3c53aaf64
--- /dev/null
+++ b/src/views/settings/Applet/AppletHosts/AppletHostList.vue
@@ -0,0 +1,55 @@
+<template>
+  <ListTable class="applet-host" v-bind="$data" />
+</template>
+
+<script>
+import { ListTable } from '@/components'
+export default {
+  name: 'AppletHost',
+  components: {
+    ListTable
+  },
+  data() {
+    return {
+      tableConfig: {
+        url: '/api/v1/terminal/applet-hosts/',
+        columns: [
+          'name', 'address', 'protocols',
+          'comment', 'date_created', 'date_updated', 'actions'
+        ],
+        columnsShow: {
+          min: ['name', 'actions'],
+          default: [
+            'name', 'address', 'protocols',
+            'comment', 'actions'
+          ]
+        },
+        columnsMeta: {
+          protocols: {
+            label: this.$t('assets.Protocols'),
+            formatter: (row) => {
+              return row.protocols.map(p => <el-tag size='mini' class='protocol'>{p.name}/{p.port} </el-tag>)
+            }
+          },
+          actions: {
+            formatterArgs: {
+              updateRoute: 'AppletHostUpdate'
+            }
+          }
+        }
+      },
+      headerActions: {
+        createRoute: 'AppletHostCreate'
+      }
+    }
+  }
+
+}
+</script>
+
+<style lang="scss" scoped>
+.applet-host >>> .protocol {
+  margin-left: 3px;
+}
+
+</style>
diff --git a/src/views/settings/Applet/Applets/AppletList.vue b/src/views/settings/Applet/Applets/AppletList.vue
new file mode 100644
index 000000000..9809d4bfd
--- /dev/null
+++ b/src/views/settings/Applet/Applets/AppletList.vue
@@ -0,0 +1,86 @@
+<template>
+  <div>
+    <ListTable v-bind="$data" />
+    <UploadDialog :visible.sync="uploadDialogVisible" />
+  </div>
+</template>
+
+<script>
+import { ListTable } from '@/components'
+import UploadDialog from './UploadDialog'
+export default {
+  name: 'Applets',
+  components: {
+    ListTable,
+    UploadDialog
+  },
+  data() {
+    return {
+      uploadDialogVisible: false,
+      tableConfig: {
+        url: '/api/v1/terminal/applets/',
+        columns: [
+          'icon', 'name', 'version', 'author', 'protocols',
+          'type', 'comment', 'date_created', 'date_updated', 'actions'
+        ],
+        columnsShow: {
+          min: ['icon', 'name', 'version', 'author', 'protocols', 'actions'],
+          default: [
+            'icon', 'name', 'version', 'author', 'protocols',
+            'type', 'comment', 'actions'
+          ]
+        },
+        columnsMeta: {
+          icon: {
+            align: 'center',
+            width: '60px',
+            formatter: (row) => {
+              return <img src={row.icon} width='30' height='30' alt='icon'></img>
+            }
+          },
+          name: {
+            formatterArgs: {
+              getTitle: ({ row }) => row['display_name']
+            }
+          },
+          version: {
+            width: '80px'
+          },
+          type: {
+            width: '80px'
+          },
+          protocols: {
+            formatter: (row) => {
+              return row.protocols.map(tag => <el-tag size='mini'>{tag}</el-tag>)
+            }
+          }
+        }
+      },
+      headerActions: {
+        onCreate: () => {
+          this.uploadDialogVisible = true
+        }
+        // moreCreates: {
+        //   callback: (option) => {
+        //     this.uploadDialogVisible = true
+        //   },
+        //   dropdown: [
+        //     {
+        //       title: this.$t('common.OfflineUpload'),
+        //       name: 'ByUpload'
+        //     }
+        //     {
+        //       title: this.$t('common.Online'),
+        //       name: 'Online'
+        //     }
+        //    ]
+        // }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/settings/Applet/Applets/UploadDialog.vue b/src/views/settings/Applet/Applets/UploadDialog.vue
new file mode 100644
index 000000000..be96eaa4f
--- /dev/null
+++ b/src/views/settings/Applet/Applets/UploadDialog.vue
@@ -0,0 +1,100 @@
+<template>
+  <Dialog
+    title="离线上传"
+    v-bind="$attrs"
+    @confirm="onSubmit"
+    v-on="$listeners"
+  >
+    <el-form label-position="top">
+      <el-form-item
+        :label="$tc('common.Upload' )"
+        :label-width="'100px'"
+        class="file-uploader"
+      >
+        <el-upload
+          ref="upload"
+          drag
+          action="string"
+          list-type="text/csv"
+          :limit="1"
+          :auto-upload="false"
+          :on-change="onFileChange"
+          :before-upload="beforeUpload"
+          accept=".zip"
+        >
+          <i class="el-icon-upload" />
+          <div class="el-upload__text">
+            {{ $t('common.imExport.dragUploadFileInfo') }}
+          </div>
+          <div slot="tip" class="el-upload__tip">
+            <span :class="{'hasError': hasFileFormatOrSizeError }">
+              {{ $t('terminal.uploadZipTips') }}
+            </span>
+            <div v-if="renderError" class="hasError">{{ renderError }}</div>
+          </div>
+        </el-upload>
+      </el-form-item>
+    </el-form>
+  </Dialog>
+</template>
+
+<script>
+import { Dialog } from '@/components'
+export default {
+  name: 'UploadDialog',
+  components: {
+    Dialog
+  },
+  data() {
+    return {
+      hasFileFormatOrSizeError: false,
+      renderError: '',
+      file: null
+    }
+  },
+  methods: {
+    onFileChange(file, fileList) {
+      if (file.status !== 'ready') {
+        return
+      }
+      this.file = file
+    },
+    beforeUpload(file) {
+    },
+    onSubmit() {
+      if (!this.file) {
+        return
+      }
+      const form = new FormData()
+      form.append('file', this.file.raw)
+      this.$axios.post(
+        '/api/v1/terminal/applets/upload/',
+        form,
+        {
+          headers: { 'Content-Type': 'multipart/form-data' },
+          disableFlashErrorMsg: true
+        }
+      ).then(res => {
+        this.$message.success('上传成功')
+        this.$emit('update:visible', false)
+      }).catch(err => {
+        this.$message.error(err)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.file-uploader.el-form-item {
+  margin-bottom: 0;
+
+  >>> .el-upload {
+    width: 100%;
+    .el-upload-dragger {
+      width: 100%;
+    }
+  }
+}
+
+</style>
diff --git a/src/views/settings/Applet/index.vue b/src/views/settings/Applet/index.vue
new file mode 100644
index 000000000..246d44572
--- /dev/null
+++ b/src/views/settings/Applet/index.vue
@@ -0,0 +1,40 @@
+<template>
+  <TabPage :submenu="submenu" :active-menu.sync="activeMenu">
+    <keep-alive>
+      <component :is="activeMenu" />
+    </keep-alive>
+  </TabPage>
+</template>
+
+<script>
+import { TabPage } from '@/layout/components'
+import Applets from './Applets/AppletList'
+import AppletHosts from './AppletHosts/AppletHostList'
+export default {
+  name: 'Applet',
+  components: {
+    TabPage,
+    Applets,
+    AppletHosts
+  },
+  data() {
+    return {
+      activeMenu: 'Applets',
+      submenu: [
+        {
+          title: this.$t('terminal.Applets'),
+          name: 'Applets'
+        },
+        {
+          title: this.$t('terminal.AppletHosts'),
+          name: 'AppletHosts'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/users/User/UserList.vue b/src/views/users/User/UserList.vue
index 34911cba1..3b0559636 100644
--- a/src/views/users/User/UserList.vue
+++ b/src/views/users/User/UserList.vue
@@ -140,7 +140,7 @@ export default {
               return !this.currentOrgIsRoot && this.publicSettings.XPACK_LICENSE_IS_VALID
             },
             can: () => vm.$hasPerm('users.invite_user'),
-            callback: function() { this.InviteDialogSetting.InviteDialogVisible = true }.bind(this)
+            callback: () => { this.InviteDialogSetting.InviteDialogVisible = true }
           }
         ],
         extraMoreActions: [