From e9a567c3fe3f5ba9d924b8ea82553b5c737926d9 Mon Sep 17 00:00:00 2001
From: chaos-zhu <ggchaos1022@gmail.com>
Date: Sun, 20 Oct 2024 21:56:41 +0800
Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E4=BC=98=E5=8C=96=E7=A7=BB?=
 =?UTF-8?q?=E5=8A=A8=E7=AB=AF=E5=85=BC=E5=AE=B9UI?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 web/package.json                              |  1 +
 web/src/store/index.js                        |  2 +
 .../views/server/components/host-table.vue    | 63 +++++++++++++++----
 yarn.lock                                     |  5 ++
 4 files changed, 59 insertions(+), 12 deletions(-)

diff --git a/web/package.json b/web/package.json
index 2985610..39a3b55 100644
--- a/web/package.json
+++ b/web/package.json
@@ -33,6 +33,7 @@
     "codemirror": "^6.0.1",
     "crypto-js": "^4.2.0",
     "csv-parse": "^5.5.6",
+    "dayjs": "^1.11.13",
     "element-plus": "^2.7.6",
     "jsencrypt": "^3.3.2",
     "pinia": "^2.1.7",
diff --git a/web/src/store/index.js b/web/src/store/index.js
index 48a4722..5c08b6d 100644
--- a/web/src/store/index.js
+++ b/web/src/store/index.js
@@ -1,5 +1,6 @@
 import { io } from 'socket.io-client'
 import { defineStore, acceptHMRUpdate } from 'pinia'
+import dayjs from 'dayjs'
 import $api from '@/api'
 import config from '@/config'
 import { isHttps } from '@/utils'
@@ -72,6 +73,7 @@ const useStore = defineStore({
     async getHostList() {
       let { data: newHostList } = await $api.getHostList()
       newHostList = newHostList.map(newHostObj => {
+        newHostObj.expired = dayjs(newHostObj.expired).format('YYYY-MM-DD')
         const oldHostObj = this.hostList.find(({ id }) => id === newHostObj.id)
         return oldHostObj ? Object.assign({}, { ...oldHostObj }, { ...newHostObj }) : newHostObj
       })
diff --git a/web/src/views/server/components/host-table.vue b/web/src/views/server/components/host-table.vue
index f4cdeaf..8740eb1 100644
--- a/web/src/views/server/components/host-table.vue
+++ b/web/src/views/server/components/host-table.vue
@@ -36,9 +36,15 @@
             <el-descriptions-item label="位置" width="20%">
               {{ row.monitorData?.ipInfo.country || '--' }} {{ row.monitorData?.ipInfo.regionName }}
             </el-descriptions-item>
-            <el-descriptions-item v-show="row.consoleUrl" label="其他" width="20%">
+            <el-descriptions-item v-show="row.expired" label="到期时间" width="20%">
+              <span>{{ row.expired }}</span>
+            </el-descriptions-item>
+            <el-descriptions-item v-show="row.consoleUrl" label="服务商控制台" width="20%">
               <span class="link" @click="handleToConsole(row)">服务商控制台</span>
             </el-descriptions-item>
+            <el-descriptions-item label="客户端端口" width="20%">
+              <span>{{ row.clientPort }}</span>
+            </el-descriptions-item>
           </el-descriptions>
           <div v-else class="no_client_data">
             客户端监控服务未安装或连接失败，无法获取实例监控数据。<span class="link" @click="handleOnekey(row)">去安装</span>
@@ -79,18 +85,48 @@
         </template>
       </el-table-column>
       <!-- <el-table-column property="isConfig" label="登录配置" /> -->
-      <el-table-column label="操作" fixed="right" width="260px">
+      <el-table-column label="操作" fixed="right" :width="isMobileScreen ? 'auto' : '260px'">
         <template #default="{ row }">
-          <el-tooltip
-            :disabled="row.isConfig"
-            effect="dark"
-            content="请先配置ssh连接信息"
-            placement="left"
-          >
-            <el-button type="success" :disabled="!row.isConfig" @click="handleSSH(row)">连接终端</el-button>
-          </el-tooltip>
-          <el-button type="primary" @click="handleUpdate(row)">配置</el-button>
-          <el-button type="danger" @click="handleRemoveHost(row)">删除</el-button>
+          <el-dropdown v-if="isMobileScreen" trigger="click">
+            <span class="el-dropdown-link">
+              操作
+              <el-icon class="el-icon--right">
+                <arrow-down />
+              </el-icon>
+            </span>
+            <template #dropdown>
+              <el-dropdown-menu>
+                <el-dropdown-item>
+                  <el-tooltip
+                    :disabled="row.isConfig"
+                    effect="dark"
+                    content="请先配置ssh连接信息"
+                    placement="left"
+                  >
+                    <el-button type="success" :disabled="!row.isConfig" @click="handleSSH(row)">连接</el-button>
+                  </el-tooltip>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <el-button type="primary" @click="handleUpdate(row)">配置</el-button>
+                </el-dropdown-item>
+                <el-dropdown-item>
+                  <el-button type="danger" @click="handleRemoveHost(row)">删除</el-button>
+                </el-dropdown-item>
+              </el-dropdown-menu>
+            </template>
+          </el-dropdown>
+          <template v-else>
+            <el-tooltip
+              :disabled="row.isConfig"
+              effect="dark"
+              content="请先配置ssh连接信息"
+              placement="left"
+            >
+              <el-button type="success" :disabled="!row.isConfig" @click="handleSSH(row)">连接</el-button>
+            </el-tooltip>
+            <el-button type="primary" @click="handleUpdate(row)">配置</el-button>
+            <el-button type="danger" @click="handleRemoveHost(row)">删除</el-button>
+          </template>
         </template>
       </el-table-column>
     </el-table>
@@ -100,6 +136,8 @@
 <script setup>
 import { ref, computed, getCurrentInstance, nextTick } from 'vue'
 import { Download, Upload } from '@element-plus/icons-vue'
+import { ArrowDown } from '@element-plus/icons-vue'
+import useMobileWidth from '@/composables/useMobileWidth'
 
 const { proxy: { $message, $messageBox, $api, $router, $tools } } = getCurrentInstance()
 
@@ -112,6 +150,7 @@ const props = defineProps({
 
 const emit = defineEmits(['update-list', 'update-host', 'select-change',])
 
+const { isMobileScreen } = useMobileWidth()
 let tableRef = ref(null)
 
 let hosts = computed(() => {
diff --git a/yarn.lock b/yarn.lock
index 25dec79..ce99f4a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2029,6 +2029,11 @@ date-format@^4.0.14:
   resolved "https://registry.yarnpkg.com/date-format/-/date-format-4.0.14.tgz#7a8e584434fb169a521c8b7aa481f355810d9400"
   integrity sha512-39BOQLs9ZjKh0/patS9nrT8wc3ioX3/eA/zgbKNopnF2wCqJEoxywwwElATYvRsXdnOxA/OQeQoFZ3rFjVajhg==
 
+dayjs@^1.11.13:
+  version "1.11.13"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.13.tgz#92430b0139055c3ebb60150aa13e860a4b5a366c"
+  integrity sha512-oaMBel6gjolK862uaPQOVTA7q3TZhuSvuMQAAglQDOWYO9A91IrAOUJEyKVlqJlHE0vq5p5UXxzdPfMH/x6xNg==
+
 dayjs@^1.11.3:
   version "1.11.11"
   resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.11.tgz#dfe0e9d54c5f8b68ccf8ca5f72ac603e7e5ed59e"