完成IP地址复制和改名操作

itbaima-monitor-server/src/main/java/com/example/controller/MonitorController.java

@@ -1,12 +1,12 @@
 package com.example.controller;
 
 import com.example.entity.RestBean;
+import com.example.entity.vo.request.RenameClientVO;
 import com.example.entity.vo.response.ClientPreviewVO;
 import com.example.service.ClientService;
 import jakarta.annotation.Resource;
-import org.springframework.web.bind.annotation.GetMapping;
-import org.springframework.web.bind.annotation.RequestMapping;
-import org.springframework.web.bind.annotation.RestController;
+import jakarta.validation.Valid;
+import org.springframework.web.bind.annotation.*;
 
 import java.util.List;
 
@@ -21,4 +21,10 @@ public class MonitorController {
     public RestBean<List<ClientPreviewVO>> listAllClient() {
         return RestBean.success(service.listClients());
     }
+
+    @PostMapping("/rename")
+    public RestBean<Void> renameClient(@RequestBody @Valid RenameClientVO vo) {
+        service.renameClient(vo);
+        return RestBean.success();
+    }
 }

itbaima-monitor-server/src/main/java/com/example/entity/vo/request/RenameClientVO.java

@@ -0,0 +1,13 @@
+package com.example.entity.vo.request;
+
+import jakarta.validation.constraints.NotNull;
+import lombok.Data;
+import org.hibernate.validator.constraints.Length;
+
+@Data
+public class RenameClientVO {
+    @NotNull
+    int id;
+    @Length(min = 1, max = 10)
+    String name;
+}

itbaima-monitor-server/src/main/java/com/example/service/ClientService.java

@@ -3,6 +3,7 @@ package com.example.service;
 import com.baomidou.mybatisplus.extension.service.IService;
 import com.example.entity.dto.Client;
 import com.example.entity.vo.request.ClientDetailVO;
+import com.example.entity.vo.request.RenameClientVO;
 import com.example.entity.vo.request.RuntimeDetailVO;
 import com.example.entity.vo.response.ClientPreviewVO;
 
@@ -16,4 +17,5 @@ public interface ClientService extends IService<Client> {
     void updateClientDetail(ClientDetailVO vo, Client client);
     void updateRuntimeDetail(RuntimeDetailVO vo, Client client);
     List<ClientPreviewVO> listClients();
+    void renameClient(RenameClientVO vo);
 }

itbaima-monitor-server/src/main/java/com/example/service/impl/ClientServiceImpl.java

@@ -1,9 +1,11 @@
 package com.example.service.impl;
 
+import com.baomidou.mybatisplus.core.toolkit.Wrappers;
 import com.baomidou.mybatisplus.extension.service.impl.ServiceImpl;
 import com.example.entity.dto.Client;
 import com.example.entity.dto.ClientDetail;
 import com.example.entity.vo.request.ClientDetailVO;
+import com.example.entity.vo.request.RenameClientVO;
 import com.example.entity.vo.request.RuntimeDetailVO;
 import com.example.entity.vo.response.ClientPreviewVO;
 import com.example.mapper.ClientDetailMapper;
@@ -101,6 +103,12 @@ public class ClientServiceImpl extends ServiceImpl<ClientMapper, Client> impleme
         }).toList();
     }
 
+    @Override
+    public void renameClient(RenameClientVO vo) {
+        this.update(Wrappers.<Client>update().eq("id", vo.getId()).set("name", vo.getName()));
+        this.initClientCache();
+    }
+
     private void addClientCache(Client client) {
         clientIdCache.put(client.getId(), client);
         clientTokenCache.put(client.getToken(), client);

itbaima-monitor-web/src/component/PreviewCard.vue

@@ -1,9 +1,33 @@
 <script setup>
 import {fitByUnit} from '@/tools'
+import {useClipboard} from "@vueuse/core";
+import {ElMessage, ElMessageBox} from "element-plus";
+import {post} from "@/net";
 
 const props = defineProps({
-  data: Object
+  data: Object,
+  update: Function
 })
+
+const { copy } = useClipboard()
+const copyIp = () => copy(props.data.ip).then(() => ElMessage.success('成功复制IP地址到剪贴板'))
+
+function rename() {
+  ElMessageBox.prompt('请输入新的服务器主机名称', '修改名称', {
+    confirmButtonText: '确认',
+    cancelButtonText: '取消',
+    inputValue: props.data.name,
+    inputPattern: /^[a-zA-Z0-9_\u4e00-\u9fa5]{1,10}$/,
+    inputErrorMessage: '名称只能包含中英文字符、数字和下划线',
+  }).then(({ value }) => post('/api/monitor/rename', {
+        id: props.data.id,
+        name: value
+      }, () => {
+        ElMessage.success('主机名称已更新')
+        props.update()
+      })
+  )
+}
 </script>
 
 <template>
@@ -13,7 +37,7 @@ const props = defineProps({
         <div class="name">
           <span :class="`flag-icon flag-icon-${data.location}`"></span>
           <span style="margin: 0 5px">{{ data.name }}</span>
-          <i class="fa-solid fa-pen-to-square"></i>
+          <i class="fa-solid fa-pen-to-square interact-item" @click.stop="rename"></i>
         </div>
         <div class="os">
           操作系统: {{`${data.osName} ${data.osVersion}`}}
@@ -31,7 +55,7 @@ const props = defineProps({
     <el-divider style="margin: 10px 0"/>
     <div class="network">
       <span style="margin-right: 10px">公网IP: {{data.ip}}</span>
-      <i class="fa-solid fa-copy" style="color: dodgerblue"></i>
+      <i class="fa-solid fa-copy interact-item" @click.stop="copyIp" style="color: dodgerblue"></i>
     </div>
     <div class="cpu">
       <span style="margin-right: 10px">处理器: {{data.cpuName}}</span>
@@ -76,6 +100,16 @@ const props = defineProps({
 
 .dark .instance-card { color: #d9d9d9 }
 
+.interact-item {
+  transition: .3s;
+
+  &:hover {
+    cursor: pointer;
+    scale: 1.1;
+    opacity: 0.8;
+  }
+}
+
 .instance-card {
   width: 320px;
   padding: 15px;

itbaima-monitor-web/src/views/main/Manage.vue

@@ -16,7 +16,7 @@ updateList()
     <div class="desc">在这里管理所有已经注册的主机实例，实时监控主机运行状态，快速进行管理和操作。</div>
     <el-divider style="margin: 10px 0"/>
     <div class="card-list">
-      <preview-card v-for="item in list" :data="item"/>
+      <preview-card v-for="item in list" :data="item" :update="updateList"/>
     </div>
   </div>
 </template>