pref: 修改 remote applet

src/components/TableFormatters/DetailFormatter.vue

@@ -5,7 +5,8 @@
     :type="col.type || 'info'"
     @click="goDetail"
   >
-    {{ iTitle }}
+    <img v-if="icon" :src="icon" alt="icon" class="icon">
+    <span class="title">{{ iTitle }}</span>
   </el-link>
 </template>
 
@@ -26,6 +27,9 @@ export default {
           can: true,
           getTitle({ col, row, cellValue }) {
             return cellValue
+          },
+          getIcon({ col, row, cellValue }) {
+            return null
           }
         }
       }
@@ -51,6 +55,13 @@ export default {
         can = can(this.col)
       }
       return !can
+    },
+    icon() {
+      return this.formatterArgs.getIcon({
+        col: this.col,
+        row: this.row,
+        cellValue: this.cellValue
+      })
     }
   },
   methods: {
@@ -98,4 +109,13 @@ export default {
   white-space: nowrap;
   font-weight: 400;
 }
+
+.detail {
+  line-height: 25px;
+}
+
+.icon {
+  width: 25px;
+  height: 25px;
+}
 </style>

src/i18n/langs/zh.json

@@ -289,6 +289,8 @@
     "ReLoginErr": "登录时长已超过 5 分钟，请重新登录"
   },
   "common": {
+    "Icon": "图标",
+    "DisplayName": "名称",
     "Automations": "自动化",
     "Sync": "同步",
     "Deploy": "部署",
@@ -997,6 +999,9 @@
       "esDocType": "es 默认文档类型：command"
     }
   },
+  "applets": {
+    "NoPublished": "未发布"
+  },
   "setting": {
     "Applets": "远程应用",
     "EndpointListHelpMessage": "服务端点是用户访问服务的地址(端口)，当用户在连接资产时，会根据端点规则和资产标签选择服务端点，作为访问入口建立连接，实现分布式连接资产",

src/router/settings/index.js

@@ -222,7 +222,7 @@ export default {
         {
           path: 'hosts/create',
           name: 'AppletHostCreate',
-          component: () => import('@/views/settings/Applet/AppletHosts/AppletHostCreateUpdate'),
+          component: () => import('@/views/settings/Applet/AppletHost/AppletHostCreateUpdate'),
           hidden: true,
           meta: {
             title: i18n.t('route.AppletHostCreate'),
@@ -232,7 +232,7 @@ export default {
         {
           path: 'hosts/:id',
           name: 'AppletHostDetail',
-          component: () => import('@/views/settings/Applet/AppletHosts/AppletHostDetail/index'),
+          component: () => import('@/views/settings/Applet/AppletHost/AppletHostDetail/index'),
           hidden: true,
           meta: {
             title: i18n.t('route.AppletHostDetail'),
@@ -242,7 +242,7 @@ export default {
         {
           path: 'hosts/:id/update',
           name: 'AppletHostUpdate',
-          component: () => import('@/views/settings/Applet/AppletHosts/AppletHostCreateUpdate'),
+          component: () => import('@/views/settings/Applet/AppletHost/AppletHostCreateUpdate'),
           hidden: true,
           meta: {
             title: i18n.t('route.AppletHostUpdate'),

src/views/settings/Applet/Applet/AppletList.vue

@@ -20,7 +20,7 @@ export default {
       tableConfig: {
         url: '/api/v1/terminal/applets/',
         columns: [
-          'icon', 'name', 'version', 'author', 'protocols',
+          'name', 'version', 'author', 'protocols',
           'type', 'comment', 'date_created', 'date_updated', 'actions'
         ],
         columnsShow: {
@@ -40,7 +40,8 @@ export default {
           },
           name: {
             formatterArgs: {
-              getTitle: ({ row }) => row['display_name']
+              getTitle: ({ row }) => row['display_name'],
+              getIcon: ({ row }) => row['icon']
             }
           },
           version: {

src/views/settings/Applet/AppletHost/AppletHostDetail/Applets.vue

@@ -29,14 +29,33 @@ export default {
       config: {
         url: `/api/v1/terminal/applet-publications/?host=${this.object.id}`,
         columns: [
-          'name', 'applet', 'comment', 'date_created', 'date_updated', 'actions'
+          'applet.icon', 'applet.display_name', 'date_updated', 'status',
+          'actions'
         ],
         columnsMeta: {
-          applet: {
+          'applet.icon': {
+            label: this.$t('common.Icon'),
+            align: 'center',
+            width: '60px',
             formatter: (row) => {
-              return row.applet.name
+              return <img src={row.applet.icon} width='30' height='30' alt='icon'></img>
             }
           },
+          'applet.display_name': {
+            label: this.$t('common.DisplayName')
+          },
+          status: {
+            label: this.$t('common.Status'),
+            formatter: (row) => {
+              if (!row.status) {
+                return <el-tag size='mini' type='danger'>{ this.$t('applets.NoPublished') }</el-tag>
+              }
+              return row.status.label
+            }
+          },
+          date_updated: {
+            label: '发布日期'
+          },
           actions: {
             formatterArgs: {
               updateRoute: 'AppletPublicationUpdate'

src/views/settings/Applet/index.vue

@@ -8,8 +8,8 @@
 
 <script>
 import { TabPage } from '@/layout/components'
-import Applets from './Applets/AppletList'
+import Applets from './Applet/AppletList'
-import AppletHosts from './AppletHosts/AppletHostList'
+import AppletHosts from './AppletHost/AppletHostList'
 export default {
   name: 'Applet',
   components: {