From 8950d57ff802462556fc0f5d371162eb947fe22a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Mon, 24 Oct 2022 14:57:45 +0800
Subject: [PATCH 1/5] =?UTF-8?q?feat:=20=E8=B5=84=E4=BA=A7=E8=B4=A6?=
 =?UTF-8?q?=E5=8F=B7=E5=A2=9E=E5=8A=A0=E6=9F=A5=E7=9C=8B=E5=8E=86=E5=8F=B2?=
 =?UTF-8?q?=E5=AF=86=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../PasswordHistoryDialog.vue                 | 75 +++++++++++++++++++
 .../AccountListTable/ShowSecretInfo.vue       | 46 ++++++++++--
 src/components/AccountListTable/index.vue     | 21 +++++-
 .../TableFormatters/ShowKeyCopyFormatter.vue  | 39 +++++++---
 src/i18n/langs/en.json                        |  2 +
 src/i18n/langs/ja.json                        |  2 +
 src/i18n/langs/zh.json                        |  2 +
 7 files changed, 168 insertions(+), 19 deletions(-)
 create mode 100644 src/components/AccountListTable/PasswordHistoryDialog.vue

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/ShowSecretInfo.vue b/src/components/AccountListTable/ShowSecretInfo.vue
index 6cbab634d..08da85ec6 100644
--- a/src/components/AccountListTable/ShowSecretInfo.vue
+++ b/src/components/AccountListTable/ShowSecretInfo.vue
@@ -18,16 +18,25 @@
       <div>
         <el-form label-position="right" label-width="80px" :model="authInfo">
           <el-form-item :label="this.$t('assets.Name')">
-            <el-input v-model="account['asset_name']" readonly />
+            <el-input v-model="account.asset.name" readonly />
           </el-form-item>
           <el-form-item :label="this.$t('assets.Username')">
             <el-input v-model="account['username']" readonly />
           </el-form-item>
-          <el-form-item :label="this.$t('assets.Password')">
-            <el-input v-model="authInfo.password" 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 :label="this.$t('users.SSHKey')">
-            <el-input v-model="authInfo['private_key']" class="item-textarea" type="textarea" show-password />
+          <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 6921712ab..5bb221193 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,6 +32,7 @@ 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',
@@ -34,7 +40,8 @@ export default {
     ListTable,
     UpdateSecretInfo,
     ShowSecretInfo,
-    AddAccount
+    AddAccount,
+    PasswordHistoryDialog
   },
   props: {
     url: {
@@ -71,6 +78,7 @@ export default {
   data() {
     const vm = this
     return {
+      showPasswordHistoryDialog: false,
       showViewSecretDialog: false,
       showUpdateSecretDialog: false,
       showAddDialog: false,
@@ -176,6 +184,17 @@ export default {
                       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
+                    })
+                  }
                 }
               ]
             }
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/i18n/langs/en.json b/src/i18n/langs/en.json
index f274d35b4..4d3cd9b29 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 5b99f93da..a2627f9fc 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -1,6 +1,8 @@
 {
   "": "",
   "accounts": {
+    "HistoryPassword": "历史密码",
+    "PasswordRecord": "密码记录",
     "AccountHistableHelpMessage": "记录当前账号的历史版本",
     "PleaseClickLeftAssetToViewAssetAccount": "资产账号列表，点击左侧资产进行查看",
     "PleaseClickLeftApplicationToViewApplicationAccount": "应用账号列表，点击左侧应用进行查看",

From 13122b07d4bf7a8cc141eedcc8bb63d4a94931ee Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Tue, 25 Oct 2022 16:42:45 +0800
Subject: [PATCH 2/5] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=B5=84=E4=BA=A7?=
 =?UTF-8?q?=E8=B4=A6=E5=8F=B7=E5=88=9B=E5=BB=BA=E3=80=81=E6=9B=B4=E6=96=B0?=
 =?UTF-8?q?=E6=8A=A5=E9=94=99=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AccountListTable/AddAccount.vue |  5 +++--
 src/components/AccountListTable/index.vue      | 15 +++++++++------
 2 files changed, 12 insertions(+), 8 deletions(-)

diff --git a/src/components/AccountListTable/AddAccount.vue b/src/components/AccountListTable/AddAccount.vue
index 48d01773b..f91d263d9 100644
--- a/src/components/AccountListTable/AddAccount.vue
+++ b/src/components/AccountListTable/AddAccount.vue
@@ -72,10 +72,11 @@ export default {
   },
   methods: {
     async getPlatform() {
-      this.platform = await this.$axios.get(`/api/v1/assets/platforms/${this.asset?.platform?.id}/`)
+      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/index.vue b/src/components/AccountListTable/index.vue
index 971ee4d44..aab19a2bf 100644
--- a/src/components/AccountListTable/index.vue
+++ b/src/components/AccountListTable/index.vue
@@ -68,7 +68,7 @@ export default {
     },
     asset: {
       type: Object,
-      default: null
+      default: () => ({})
     },
     columns: {
       type: Array,
@@ -179,6 +179,7 @@ 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
@@ -252,8 +253,6 @@ export default {
         actionColumn.formatterArgs.extraActions.push(item)
       }
     }
-
-    console.log('Has perm: ', this.$hasPerm('assets.change_account'))
   },
   methods: {
     onUpdateAuthDone(account) {
@@ -262,11 +261,15 @@ export default {
     addAccountSuccess() {
       this.$refs.ListTable.reloadTable()
     },
+    async getAssetDetail() {
+      const { query: { assets }} = this.$route
+      this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${assets}/`)
+    },
     hasAccountPermission() {
-      const { path, query } = this.$route
+      const { path, query: { assets }} = this.$route
       if (!hasUUID(path)) {
-        const hasPerm = this.$hasPerm('assets.add_account') && !!query.assets
-        this.iAsset = { id: query.assets }
+        if (assets) this.getAssetDetail()
+        const hasPerm = this.$hasPerm('assets.add_account') && !!assets
         this.$set(this.headerActions.extraActions[0], 'can', hasPerm)
       }
     }

From 7b6ccf3f30baea2f98380dde9a334cac410af836 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Wed, 26 Oct 2022 16:04:38 +0800
Subject: [PATCH 3/5] =?UTF-8?q?pref:=20=E4=BF=AE=E6=94=B9=20dialog=20?=
 =?UTF-8?q?=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AutoDataTable/index.vue        |  7 +-
 src/components/Dialog/index.vue               | 22 ++++-
 .../ListTable/TableAction/ImportDialog.vue    | 16 ++--
 src/i18n/langs/zh.json                        |  8 ++
 src/router/settings/index.js                  | 32 +++++++
 src/router/workbench/index.js                 | 42 --------
 .../components/AssetAccounts.vue              | 71 +++++++-------
 src/views/assets/Platform/const.js            |  4 +-
 src/views/myapps/DatabaseApp.vue              | 96 -------------------
 src/views/myapps/KubernetesApp.vue            | 96 -------------------
 src/views/myapps/RemoteApp.vue                | 95 ------------------
 src/views/settings/Applet/AppletHosts.vue     | 14 +++
 .../Applet/Applets/AppletCreateUpdate.vue     | 34 +++++++
 .../settings/Applet/Applets/AppletList.vue    | 60 ++++++++++++
 .../settings/Applet/Applets/UploadDialog.vue  | 72 ++++++++++++++
 src/views/settings/Applet/index.vue           | 40 ++++++++
 16 files changed, 328 insertions(+), 381 deletions(-)
 delete mode 100644 src/views/myapps/DatabaseApp.vue
 delete mode 100644 src/views/myapps/KubernetesApp.vue
 delete mode 100644 src/views/myapps/RemoteApp.vue
 create mode 100644 src/views/settings/Applet/AppletHosts.vue
 create mode 100644 src/views/settings/Applet/Applets/AppletCreateUpdate.vue
 create mode 100644 src/views/settings/Applet/Applets/AppletList.vue
 create mode 100644 src/views/settings/Applet/Applets/UploadDialog.vue
 create mode 100644 src/views/settings/Applet/index.vue

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..b2d9110a4 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>
@@ -27,7 +27,7 @@
           </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
@@ -42,7 +42,9 @@
           <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('common.imExport.uploadCsvLth10MHelpText') }}</span>
+            <span :class="{'hasError': hasFileFormatOrSizeError }">
+              {{ $t('common.imExport.uploadCsvLth10MHelpText') }}
+            </span>
             <div v-if="renderError" class="hasError">{{ renderError }}</div>
           </div>
         </el-upload>
@@ -243,10 +245,6 @@ export default {
     overflow: auto
   }
 
-  .importDialog >>> .el-form-item.file-uploader {
-    padding-right: 150px;
-  }
-
   .file-uploader >>> .el-upload {
     width: 100%;
     //padding-right: 150px;
diff --git a/src/i18n/langs/zh.json b/src/i18n/langs/zh.json
index 7f799c172..13e23a0b7 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -408,6 +408,7 @@
     "Update": "更新",
     "Revise": "修改",
     "Upload": "上传",
+    "OfflineUpload": "离线上传",
     "Clone": "克隆",
     "Username": "用户名",
     "Validity": "有效",
@@ -705,6 +706,7 @@
   },
   "route": {
     "": "",
+    "AppletCreate": "创建远程应用",
     "CreateEndpoint": "创建端点",
     "UpdateEndpoint": "更新端点",
     "CreateEndpointRule": "创建端点规则",
@@ -885,6 +887,11 @@
   "rbac": {
     "Permissions": "权限"
   },
+  "terminal": {
+    "Applets": "远程应用",
+    "AppletHosts": "应用发布机",
+    "uploadZipTips": "请上传zip格式的文件"
+  },
   "sessions": {
     "SetToDefaultStorage": "设置为默认存储",
     "SetToDefault": "设为默认",
@@ -966,6 +973,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..527e1dd97 100644
--- a/src/router/settings/index.js
+++ b/src/router/settings/index.js
@@ -199,6 +199,38 @@ 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: 'create',
+          name: 'AppletCreate',
+          component: () => import('@/views/settings/Applet/Applets/AppletCreateUpdate'),
+          meta: {
+            title: i18n.t('route.AppletCreate'),
+            permissions: ['settings.change_terminal']
+          },
+          hidden: true
+        }
+      ]
+    },
     {
       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/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/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.vue b/src/views/settings/Applet/AppletHosts.vue
new file mode 100644
index 000000000..62cb080dc
--- /dev/null
+++ b/src/views/settings/Applet/AppletHosts.vue
@@ -0,0 +1,14 @@
+<template>
+  <span />
+
+</template>
+
+<script>
+export default {
+  name: 'AppletHosts'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/settings/Applet/Applets/AppletCreateUpdate.vue b/src/views/settings/Applet/Applets/AppletCreateUpdate.vue
new file mode 100644
index 000000000..654101260
--- /dev/null
+++ b/src/views/settings/Applet/Applets/AppletCreateUpdate.vue
@@ -0,0 +1,34 @@
+<template>
+  <GenericCreateUpdatePage v-bind="config" />
+</template>
+
+<script>
+import { GenericCreateUpdatePage } from '@/layout/components'
+export default {
+  components: {
+    GenericCreateUpdatePage
+  },
+  data() {
+    return {
+      config: {
+        initial: {
+          users: []
+        },
+        url: '/api/v1/terminal/applets/',
+        fields: [
+          [this.$t('common.Basic'), ['name']],
+          [this.$t('common.Other'), ['comment']]
+        ],
+        fieldsMeta: {
+        }
+      }
+    }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+
+</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..5764a0751
--- /dev/null
+++ b/src/views/settings/Applet/Applets/AppletList.vue
@@ -0,0 +1,60 @@
+<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: [
+          'name', 'display_name', 'icon', 'type', 'actions'
+        ],
+        columnsMeta: {
+          icon: {
+            formatter: (row) => {
+              return <img src={row.icon} width='32' height='32' alt='icon'></img>
+            }
+          }
+        }
+      },
+      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..95e77dfb7
--- /dev/null
+++ b/src/views/settings/Applet/Applets/UploadDialog.vue
@@ -0,0 +1,72 @@
+<template>
+  <Dialog
+    title="离线上传"
+    v-bind="$attrs"
+    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: ''
+    }
+  },
+  methods: {
+    onFileChange(file, fileList) {
+    },
+    beforeUpload(file) {
+    }
+  }
+}
+</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..4a8f15f73
--- /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'
+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>

From da4cc3de20c2e0e4b2b00863b9fd54fa9a3f9798 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=9Chuailei000=E2=80=9D?= <2280131253@qq.com>
Date: Thu, 27 Oct 2022 15:03:00 +0800
Subject: [PATCH 4/5] =?UTF-8?q?perf:=20=E4=BC=98=E5=8C=96ZTree=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E9=80=89=E6=8B=A9=E5=AE=8C=E5=B7=A6=E4=BE=A7=E8=B5=84?=
 =?UTF-8?q?=E4=BA=A7=E5=90=8E=E8=BF=9B=E5=85=A5=E8=B5=84=E4=BA=A7=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E5=9C=A8=E8=BF=94=E5=9B=9E=E5=88=97=E8=A1=A8=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E8=BF=98=E4=BF=9D=E6=8C=81=E4=B9=8B=E5=89=8D=E9=80=89?=
 =?UTF-8?q?=E6=8B=A9=E7=9A=84=E7=8A=B6=E6=80=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/AccountListTable/index.vue            | 12 ++++++------
 src/components/TreeTable/index.vue                   | 10 ++++++++++
 src/views/accounts/AssetAccount/AssetAccountList.vue |  8 ++++----
 3 files changed, 20 insertions(+), 10 deletions(-)

diff --git a/src/components/AccountListTable/index.vue b/src/components/AccountListTable/index.vue
index aab19a2bf..73f5b53f8 100644
--- a/src/components/AccountListTable/index.vue
+++ b/src/components/AccountListTable/index.vue
@@ -236,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()
@@ -262,14 +262,14 @@ export default {
       this.$refs.ListTable.reloadTable()
     },
     async getAssetDetail() {
-      const { query: { assets }} = this.$route
-      this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${assets}/`)
+      const { query: { asset }} = this.$route
+      this.iAsset = await this.$axios.get(`/api/v1/assets/assets/${asset}/`)
     },
     hasAccountPermission() {
-      const { path, query: { assets }} = this.$route
+      const { path, query: { asset }} = this.$route
       if (!hasUUID(path)) {
-        if (assets) this.getAssetDetail()
-        const hasPerm = this.$hasPerm('assets.add_account') && !!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/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/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)

From ba5a19582eb4e76e17e93f04f1692e9e6c9f97e1 Mon Sep 17 00:00:00 2001
From: ibuler <ibuler@qq.com>
Date: Thu, 27 Oct 2022 19:05:43 +0800
Subject: [PATCH 5/5] =?UTF-8?q?pref:=20=E4=BF=AE=E6=94=B9=20Applet=20Host?=
 =?UTF-8?q?=20=E5=88=9B=E5=BB=BA?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ListTable/TableAction/ImportDialog.vue    | 24 +++++---
 src/i18n/langs/zh.json                        |  3 +
 src/router/settings/index.js                  | 22 ++++++--
 .../BaseAssetCreateUpdate.vue                 | 12 +++-
 .../Asset/AssetList/components/BaseList.vue   |  3 +-
 src/views/settings/Applet/AppletHosts.vue     | 14 -----
 .../AppletHosts/AppletHostCreateUpdate.vue    | 48 ++++++++++++++++
 .../Applet/AppletHosts/AppletHostList.vue     | 55 +++++++++++++++++++
 .../Applet/Applets/AppletCreateUpdate.vue     | 34 ------------
 .../settings/Applet/Applets/AppletList.vue    | 30 +++++++++-
 .../settings/Applet/Applets/UploadDialog.vue  | 32 ++++++++++-
 src/views/settings/Applet/index.vue           |  2 +-
 src/views/users/User/UserList.vue             |  2 +-
 13 files changed, 209 insertions(+), 72 deletions(-)
 delete mode 100644 src/views/settings/Applet/AppletHosts.vue
 create mode 100644 src/views/settings/Applet/AppletHosts/AppletHostCreateUpdate.vue
 create mode 100644 src/views/settings/Applet/AppletHosts/AppletHostList.vue
 delete mode 100644 src/views/settings/Applet/Applets/AppletCreateUpdate.vue

diff --git a/src/components/ListTable/TableAction/ImportDialog.vue b/src/components/ListTable/TableAction/ImportDialog.vue
index b2d9110a4..58932b3b7 100644
--- a/src/components/ListTable/TableAction/ImportDialog.vue
+++ b/src/components/ListTable/TableAction/ImportDialog.vue
@@ -22,8 +22,8 @@
         <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>
@@ -40,7 +40,9 @@
           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') }}
@@ -170,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
@@ -207,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 = ''
@@ -222,7 +226,7 @@ export default {
       window.URL.revokeObjectURL(url)
     },
     async handleImportConfirm() {
-      this.$refs['importTable'].performUpload()
+      await this.$refs['importTable'].performUpload()
     },
     handleImportCancel() {
       this.showImportDialog = false
@@ -285,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/i18n/langs/zh.json b/src/i18n/langs/zh.json
index 13e23a0b7..e1b5e9250 100644
--- a/src/i18n/langs/zh.json
+++ b/src/i18n/langs/zh.json
@@ -98,6 +98,7 @@
     "NoSQLProtocol": "非关系数据库"
   },
   "assets": {
+    "Address": "地址",
     "PrivateKey": "密钥",
     "Secret": "密码",
     "Network": "网络",
@@ -706,6 +707,8 @@
   },
   "route": {
     "": "",
+    "AppletHostCreate": "添加远程应用发布机",
+    "AppletHostUpdate": "更新远程应用发布机",
     "AppletCreate": "创建远程应用",
     "CreateEndpoint": "创建端点",
     "UpdateEndpoint": "更新端点",
diff --git a/src/router/settings/index.js b/src/router/settings/index.js
index 527e1dd97..44e737794 100644
--- a/src/router/settings/index.js
+++ b/src/router/settings/index.js
@@ -220,14 +220,24 @@ export default {
           }
         },
         {
-          path: 'create',
-          name: 'AppletCreate',
-          component: () => import('@/views/settings/Applet/Applets/AppletCreateUpdate'),
+          path: 'hosts/create',
+          name: 'AppletHostCreate',
+          component: () => import('@/views/settings/Applet/AppletHosts/AppletHostCreateUpdate'),
+          hidden: true,
           meta: {
-            title: i18n.t('route.AppletCreate'),
+            title: i18n.t('route.AppletHostCreate'),
             permissions: ['settings.change_terminal']
-          },
-          hidden: true
+          }
+        },
+        {
+          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']
+          }
         }
       ]
     },
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/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/settings/Applet/AppletHosts.vue b/src/views/settings/Applet/AppletHosts.vue
deleted file mode 100644
index 62cb080dc..000000000
--- a/src/views/settings/Applet/AppletHosts.vue
+++ /dev/null
@@ -1,14 +0,0 @@
-<template>
-  <span />
-
-</template>
-
-<script>
-export default {
-  name: 'AppletHosts'
-}
-</script>
-
-<style 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/AppletCreateUpdate.vue b/src/views/settings/Applet/Applets/AppletCreateUpdate.vue
deleted file mode 100644
index 654101260..000000000
--- a/src/views/settings/Applet/Applets/AppletCreateUpdate.vue
+++ /dev/null
@@ -1,34 +0,0 @@
-<template>
-  <GenericCreateUpdatePage v-bind="config" />
-</template>
-
-<script>
-import { GenericCreateUpdatePage } from '@/layout/components'
-export default {
-  components: {
-    GenericCreateUpdatePage
-  },
-  data() {
-    return {
-      config: {
-        initial: {
-          users: []
-        },
-        url: '/api/v1/terminal/applets/',
-        fields: [
-          [this.$t('common.Basic'), ['name']],
-          [this.$t('common.Other'), ['comment']]
-        ],
-        fieldsMeta: {
-        }
-      }
-    }
-  },
-  methods: {
-  }
-}
-</script>
-
-<style lang="less" scoped>
-
-</style>
diff --git a/src/views/settings/Applet/Applets/AppletList.vue b/src/views/settings/Applet/Applets/AppletList.vue
index 5764a0751..9809d4bfd 100644
--- a/src/views/settings/Applet/Applets/AppletList.vue
+++ b/src/views/settings/Applet/Applets/AppletList.vue
@@ -20,12 +20,38 @@ export default {
       tableConfig: {
         url: '/api/v1/terminal/applets/',
         columns: [
-          'name', 'display_name', 'icon', 'type', 'actions'
+          '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='32' height='32' alt='icon'></img>
+              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>)
             }
           }
         }
diff --git a/src/views/settings/Applet/Applets/UploadDialog.vue b/src/views/settings/Applet/Applets/UploadDialog.vue
index 95e77dfb7..be96eaa4f 100644
--- a/src/views/settings/Applet/Applets/UploadDialog.vue
+++ b/src/views/settings/Applet/Applets/UploadDialog.vue
@@ -2,6 +2,7 @@
   <Dialog
     title="离线上传"
     v-bind="$attrs"
+    @confirm="onSubmit"
     v-on="$listeners"
   >
     <el-form label-position="top">
@@ -22,7 +23,9 @@
           accept=".zip"
         >
           <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('terminal.uploadZipTips') }}
@@ -45,13 +48,38 @@ export default {
   data() {
     return {
       hasFileFormatOrSizeError: false,
-      renderError: ''
+      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)
+      })
     }
   }
 }
diff --git a/src/views/settings/Applet/index.vue b/src/views/settings/Applet/index.vue
index 4a8f15f73..246d44572 100644
--- a/src/views/settings/Applet/index.vue
+++ b/src/views/settings/Applet/index.vue
@@ -9,7 +9,7 @@
 <script>
 import { TabPage } from '@/layout/components'
 import Applets from './Applets/AppletList'
-import AppletHosts from './AppletHosts'
+import AppletHosts from './AppletHosts/AppletHostList'
 export default {
   name: 'Applet',
   components: {
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: [