feat: 优化ipv6的展示&快捷复制

web/src/views/server/components/host-table.vue

@@ -64,7 +64,11 @@
         <template #default="scope">{{ scope.row.name }}</template>
       </el-table-column>
       <el-table-column property="username" label="用户名" />
-      <el-table-column property="host" label="IP" />
+      <el-table-column property="host" label="IP">
+        <template #default="scope">
+          <span @click="handleCopy(scope.row.host)">{{ scope.row.host }}</span>
+        </template>
+      </el-table-column>
       <el-table-column property="port" label="端口" />
       <!-- <el-table-column property="port" label="认证类型">
         <template #default="scope">{{ scope.row.authType === 'password' ? '密码' : '密钥' }}</template>
@@ -227,6 +231,11 @@ const handleRemoveHost = async ({ id }) => {
     clearSelection()
   })
 }
+
+const handleCopy = async (host) => {
+  await navigator.clipboard.writeText(host)
+  $message.success({ message: '复制成功', center: true })
+}
 </script>
 
 <style lang="scss" scoped>

web/src/views/terminal/components/info-side.vue

@@ -13,7 +13,7 @@
             IP
           </div>
         </template>
-        <span style="margin-right: 10px;">{{ host }}</span>
+        <span class="host-info-ip" :title="host">{{ host }}</span>
         <template v-if="pingMs">
           <el-tooltip effect="dark" content="该值为EasyNode服务端主机到目标主机的ping值" placement="bottom">
             <span class="host-ping" :style="{backgroundColor: handlePingColor(pingMs)}">{{ pingMs }}ms</span>
@@ -264,7 +264,7 @@ const pingMs = computed(() => {
 
 const handleCopy = async () => {
   await navigator.clipboard.writeText(host.value)
-  $message.success({ message: 'success', center: true })
+  $message.success({ message: '复制成功', center: true })
 }
 
 const handleUsedColor = (num) => {
@@ -315,6 +315,17 @@ onBeforeUnmount(() => {
     max-width: 30px;
   }
 
+  .host-info-ip {
+    word-break: break-all;
+    max-width: 100px;
+    display: inline-block;
+    vertical-align: top;
+    margin-right: 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
   .host-ping {
     display: inline-block;
     font-size: 10px;

web/src/views/terminal/index.vue

@@ -6,8 +6,11 @@
         <el-table-column prop="name" label="name" />
         <el-table-column>
           <template #default="{ row }">
-            <span>{{ row.username ? `ssh ${row.username}@` : '' }}{{ row.host }}{{ row.port ? ` -p ${row.port}` : ''
-            }}</span>
+            <span @click="handleCopy(row.host)">
+              {{
+                row.username ? `ssh ${row.username}@` : '' }}{{ row.host }}{{ row.port ? ` -p ${row.port}` : ''
+              }}
+            </span>
           </template>
         </el-table-column>
         <el-table-column fixed="right" width="80px">
@@ -114,6 +117,11 @@ onActivated(async () => {
   terminalTabs.push(...targetHosts)
 })
 
+const handleCopy = async (host) => {
+  await navigator.clipboard.writeText(host)
+  $message.success({ message: '复制成功', center: true })
+}
+
 </script>
 
 <style lang="scss" scoped>