From 9885d4758bd27a97daa6ff5d48c82968ec8f765f Mon Sep 17 00:00:00 2001
From: caixypromise <caixypromised@gmail.com>
Date: Mon, 16 Jun 2025 03:27:12 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BF=AE=E5=A4=8D=E8=AE=BE=E5=A4=87?=
 =?UTF-8?q?=E7=AE=A1=E7=90=86=E6=97=A0=E6=B3=95=E6=8F=90=E4=BA=A4=E5=A4=87?=
 =?UTF-8?q?=E6=B3=A8=E4=BF=A1=E6=81=AF=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82?=
 =?UTF-8?q?=20chore:=20=E5=B0=86=E8=AE=BE=E5=A4=87=E8=87=AA=E5=8A=A8?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=8A=B6=E6=80=81=E6=8E=A5=E5=8F=A3=E9=87=8D?=
 =?UTF-8?q?=E6=9E=84=E4=B8=BA=E8=AE=BE=E5=A4=87=E4=BF=A1=E6=81=AF=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E6=8E=A5=E5=8F=A3=EF=BC=8C=E4=BB=A5=E6=AD=A4=E5=AE=9E?=
 =?UTF-8?q?=E7=8E=B0=E5=A4=87=E6=B3=A8=E3=80=81=E8=87=AA=E5=8A=A8=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E5=90=88=E5=B9=B6=E5=9C=A8=E4=B8=80=E4=B8=AA=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E5=86=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../device/controller/DeviceController.java   |  12 +-
 .../modules/device/dto/DeviceUpdateDTO.java   |  29 ++++
 main/manager-web/src/apis/module/device.js    |   7 +-
 .../src/views/DeviceManagement.vue            | 153 +++++++++++-------
 4 files changed, 138 insertions(+), 63 deletions(-)
 create mode 100644 main/manager-api/src/main/java/xiaozhi/modules/device/dto/DeviceUpdateDTO.java

diff --git a/main/manager-api/src/main/java/xiaozhi/modules/device/controller/DeviceController.java b/main/manager-api/src/main/java/xiaozhi/modules/device/controller/DeviceController.java
index 5b0bf4bc..dc0b7498 100644
--- a/main/manager-api/src/main/java/xiaozhi/modules/device/controller/DeviceController.java
+++ b/main/manager-api/src/main/java/xiaozhi/modules/device/controller/DeviceController.java
@@ -2,8 +2,11 @@ package xiaozhi.modules.device.controller;
 
 import java.util.List;
 
+import jakarta.validation.Valid;
 import org.apache.commons.lang3.StringUtils;
 import org.apache.shiro.authz.annotation.RequiresPermissions;
+import org.springframework.beans.BeanUtils;
+import org.springframework.context.annotation.Bean;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
 import org.springframework.web.bind.annotation.PostMapping;
@@ -22,6 +25,7 @@ import xiaozhi.common.user.UserDetail;
 import xiaozhi.common.utils.Result;
 import xiaozhi.modules.device.dto.DeviceRegisterDTO;
 import xiaozhi.modules.device.dto.DeviceUnBindDTO;
+import xiaozhi.modules.device.dto.DeviceUpdateDTO;
 import xiaozhi.modules.device.entity.DeviceEntity;
 import xiaozhi.modules.device.service.DeviceService;
 import xiaozhi.modules.security.user.SecurityUser;
@@ -80,15 +84,15 @@ public class DeviceController {
         return new Result<Void>();
     }
 
-    @PutMapping("/enableOta/{id}/{status}")
-    @Operation(summary = "启用/关闭OTA自动升级")
+    @PutMapping("/update/{id}")
+    @Operation(summary = "更新设备信息")
     @RequiresPermissions("sys:role:normal")
-    public Result<Void> enableOtaUpgrade(@PathVariable String id, @PathVariable Integer status) {
+    public Result<Void> updateDeviceInfo(@PathVariable String id, @Valid @RequestBody DeviceUpdateDTO deviceUpdateDTO) {
         DeviceEntity entity = deviceService.selectById(id);
         if (entity == null) {
             return new Result<Void>().error("设备不存在");
         }
-        entity.setAutoUpdate(status);
+        BeanUtils.copyProperties(deviceUpdateDTO, entity);
         deviceService.updateById(entity);
         return new Result<Void>();
     }
diff --git a/main/manager-api/src/main/java/xiaozhi/modules/device/dto/DeviceUpdateDTO.java b/main/manager-api/src/main/java/xiaozhi/modules/device/dto/DeviceUpdateDTO.java
new file mode 100644
index 00000000..2e9a4793
--- /dev/null
+++ b/main/manager-api/src/main/java/xiaozhi/modules/device/dto/DeviceUpdateDTO.java
@@ -0,0 +1,29 @@
+package xiaozhi.modules.device.dto;
+
+import jakarta.validation.constraints.Max;
+import jakarta.validation.constraints.Min;
+import jakarta.validation.constraints.Size;
+import lombok.Data;
+
+import java.io.Serializable;
+
+/**
+ * 设备更新DTO
+ */
+@Data
+public class DeviceUpdateDTO implements Serializable {
+    /**
+    * 自动更新状态
+    */
+    @Max(1)
+    @Min(0)
+    private Integer autoUpdate;
+
+    /**
+    * 设备别名
+    */
+    @Size(max = 64)
+    private String alias;
+
+    private static final long serialVersionUID = 1L;
+}
diff --git a/main/manager-web/src/apis/module/device.js b/main/manager-web/src/apis/module/device.js
index 2f20425d..e6d61353 100644
--- a/main/manager-web/src/apis/module/device.js
+++ b/main/manager-web/src/apis/module/device.js
@@ -51,10 +51,11 @@ export default {
                 });
             }).send();
     },
-    enableOtaUpgrade(id, status, callback) {
+    updateDeviceInfo(id, payload, callback) {
         RequestService.sendRequest()
-            .url(`${getServiceUrl()}/device/enableOta/${id}/${status}`)
+            .url(`${getServiceUrl()}/device/update/${id}`)
             .method('PUT')
+            .data(payload)
             .success((res) => {
                 RequestService.clearRequestTime()
                 callback(res)
@@ -63,7 +64,7 @@ export default {
                 console.error('更新OTA状态失败:', err)
                 this.$message.error(err.msg || '更新OTA状态失败')
                 RequestService.reAjaxFun(() => {
-                    this.enableOtaUpgrade(id, status, callback)
+                    this.updateDeviceInfo(id, payload, callback)
                 })
             }).send()
     },
diff --git a/main/manager-web/src/views/DeviceManagement.vue b/main/manager-web/src/views/DeviceManagement.vue
index 14138bd8..25cd5a68 100644
--- a/main/manager-web/src/views/DeviceManagement.vue
+++ b/main/manager-web/src/views/DeviceManagement.vue
@@ -1,12 +1,12 @@
 <template>
   <div class="welcome">
-    <HeaderBar />
+    <HeaderBar/>
 
     <div class="operation-bar">
       <h2 class="page-title">设备管理</h2>
       <div class="right-operations">
         <el-input placeholder="请输入设备型号或Mac地址查询" v-model="searchKeyword" class="search-input"
-          @keyup.enter.native="handleSearch" clearable />
+                  @keyup.enter.native="handleSearch" clearable/>
         <el-button class="btn-search" @click="handleSearch">搜索</el-button>
       </div>
     </div>
@@ -16,8 +16,9 @@
         <div class="content-area">
           <el-card class="device-card" shadow="never">
             <el-table ref="deviceTable" :data="paginatedDeviceList" class="transparent-table"
-              :header-cell-class-name="headerCellClassName" v-loading="loading" element-loading-text="拼命加载中"
-              element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.7)">
+                      :header-cell-class-name="headerCellClassName" v-loading="loading"
+                      element-loading-text="拼命加载中"
+                      element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.7)">
               <el-table-column label="选择" align="center" width="120">
                 <template slot-scope="scope">
                   <el-checkbox v-model="scope.row.selected"></el-checkbox>
@@ -33,22 +34,32 @@
               <el-table-column label="绑定时间" prop="bindTime" align="center"></el-table-column>
               <el-table-column label="最近对话" prop="lastConversation" align="center"></el-table-column>
               <el-table-column label="备注" align="center">
-                <template slot-scope="scope">
-                  <el-input v-if="scope.row.isEdit" v-model="scope.row.remark" size="mini"
-                    @blur="stopEditRemark(scope.$index)"></el-input>
-                  <span v-else>
-                    <i v-if="!scope.row.remark" class="el-icon-edit"
-                      @click="startEditRemark(scope.$index, scope.row)"></i>
-                    <span v-else @click="startEditRemark(scope.$index, scope.row)">
-                      {{ scope.row.remark }}
-                    </span>
+                <template #default="{ row }">
+                  <el-input
+                      v-show="row.isEdit"
+                      v-model="row.remark"
+                      size="mini"
+                      maxlength="64"
+                      show-word-limit
+                      @blur="onRemarkBlur(row)"
+                      @keyup.enter.native="onRemarkEnter(row)"
+                  />
+                  <span v-show="!row.isEdit" class="remark-view">
+                  <i
+                      class="el-icon-edit"
+                      @click="row.isEdit = true"
+                      style="cursor: pointer;"
+                  ></i>
+                  <span @click="row.isEdit = true">
+                    {{ row.remark || '—' }}
                   </span>
+                </span>
                 </template>
               </el-table-column>
               <el-table-column label="OTA升级" align="center">
                 <template slot-scope="scope">
                   <el-switch v-model="scope.row.otaSwitch" size="mini" active-color="#13ce66" inactive-color="#ff4949"
-                    @change="handleOtaSwitchChange(scope.row)"></el-switch>
+                             @change="handleOtaSwitchChange(scope.row)"></el-switch>
                 </template>
               </el-table-column>
               <el-table-column label="操作" align="center">
@@ -78,7 +89,7 @@
                 <button class="pagination-btn" :disabled="currentPage === 1" @click="goFirst">首页</button>
                 <button class="pagination-btn" :disabled="currentPage === 1" @click="goPrev">上一页</button>
                 <button v-for="page in visiblePages" :key="page" class="pagination-btn"
-                  :class="{ active: page === currentPage }" @click="goToPage(page)">
+                        :class="{ active: page === currentPage }" @click="goToPage(page)">
                   {{ page }}
                 </button>
                 <button class="pagination-btn" :disabled="currentPage === pageCount" @click="goNext">下一页</button>
@@ -91,7 +102,7 @@
     </div>
 
     <AddDeviceDialog :visible.sync="addDeviceDialogVisible" :agent-id="currentAgentId"
-      @refresh="fetchBindDevices(currentAgentId)" />
+                     @refresh="fetchBindDevices(currentAgentId)"/>
 
   </div>
 </template>
@@ -102,7 +113,7 @@ import AddDeviceDialog from "@/components/AddDeviceDialog.vue";
 import HeaderBar from "@/components/HeaderBar.vue";
 
 export default {
-  components: { HeaderBar, AddDeviceDialog },
+  components: {HeaderBar, AddDeviceDialog},
   data() {
     return {
       addDeviceDialogVisible: false,
@@ -125,18 +136,15 @@ export default {
       const keyword = this.activeSearchKeyword.toLowerCase();
       if (!keyword) return this.deviceList;
       return this.deviceList.filter(device =>
-        (device.model && device.model.toLowerCase().includes(keyword)) ||
-        (device.macAddress && device.macAddress.toLowerCase().includes(keyword))
+          (device.model && device.model.toLowerCase().includes(keyword)) ||
+          (device.macAddress && device.macAddress.toLowerCase().includes(keyword))
       );
     },
 
     paginatedDeviceList() {
       const start = (this.currentPage - 1) * this.pageSize;
       const end = start + this.pageSize;
-      return this.filteredDeviceList.slice(start, end).map(item => ({
-        ...item,
-        selected: false
-      }));
+      return this.filteredDeviceList.slice(start, end);
     },
     pageCount() {
       return Math.ceil(this.filteredDeviceList.length / this.pageSize);
@@ -212,11 +220,10 @@ export default {
         this.batchUnbindDevices(deviceIds);
       });
     },
-
     batchUnbindDevices(deviceIds) {
       const promises = deviceIds.map(id => {
         return new Promise((resolve, reject) => {
-          Api.device.unbindDevice(id, ({ data }) => {
+          Api.device.unbindDevice(id, ({data}) => {
             if (data.code === 0) {
               resolve();
             } else {
@@ -225,33 +232,61 @@ export default {
           });
         });
       });
-
       Promise.all(promises)
-        .then(() => {
-          this.$message.success({
-            message: `成功解绑 ${deviceIds.length} 台设备`,
-            showClose: true
+          .then(() => {
+            this.$message.success({
+              message: `成功解绑 ${deviceIds.length} 台设备`,
+              showClose: true
+            });
+            this.fetchBindDevices(this.currentAgentId);
+            this.selectedDevices = [];
+            this.isAllSelected = false;
+          })
+          .catch(error => {
+            this.$message.error({
+              message: error || '批量解绑过程中出现错误',
+              showClose: true
+            });
           });
-          this.fetchBindDevices(this.currentAgentId);
-          this.selectedDevices = [];
-          this.isAllSelected = false;
-        })
-        .catch(error => {
-          this.$message.error({
-            message: error || '批量解绑过程中出现错误',
-            showClose: true
-          });
-        });
     },
-
     handleAddDevice() {
       this.addDeviceDialogVisible = true;
     },
-    startEditRemark(index, row) {
-      this.deviceList[index].isEdit = true;
+    submitRemark(row) {
+      if (row._submitting) return;
+
+      const text = (row.remark || '').trim();
+      if (text.length > 64) {
+        this.$message.warning('备注不能超过 64 字符');
+        return;
+      }
+      if (text === row._originalRemark) {
+        return;
+      }
+
+      row._submitting = true;
+      this.updateDeviceInfo(row.device_id, { alias: text }, (ok, resp) => {
+        if (ok) {
+          row._originalRemark = text;
+          this.$message.success('备注已保存');
+        } else {
+          row.remark = row._originalRemark;
+          this.$message.error(resp.msg || '备注保存失败');
+        }
+        row._submitting = false;
+      });
     },
-    stopEditRemark(index) {
-      this.deviceList[index].isEdit = false;
+    // 备注输入框：失焦时提交
+    onRemarkBlur(row) {
+      row.isEdit = false;
+      setTimeout(() => {
+        this.submitRemark(row);
+      }, 100); // 延迟 100ms，避开 enter+blur 同时触发的窗口
+    },
+    // 备注输入框：按回车时提交
+    onRemarkEnter(row) {
+      row.isEdit = false;
+      this.submitRemark(row);
     },
     handleUnbind(device_id) {
       this.$confirm('确认要解绑该设备吗？', '警告', {
@@ -259,7 +294,7 @@ export default {
         cancelButtonText: '取消',
         type: 'warning'
       }).then(() => {
-        Api.device.unbindDevice(device_id, ({ data }) => {
+        Api.device.unbindDevice(device_id, ({data}) => {
           if (data.code === 0) {
             this.$message.success({
               message: '设备解绑成功',
@@ -290,7 +325,7 @@ export default {
 
     fetchBindDevices(agentId) {
       this.loading = true;
-      Api.device.getAgentBindDevices(agentId, ({ data }) => {
+      Api.device.getAgentBindDevices(agentId, ({data}) => {
         this.loading = false;
         if (data.code === 0) {
           this.deviceList = data.data.map(device => {
@@ -302,12 +337,14 @@ export default {
               bindTime: device.createDate,
               lastConversation: device.lastConnectedAt,
               remark: device.alias,
+              _originalRemark: device.alias,
               isEdit: false,
+              _submitting: false,
               otaSwitch: device.autoUpdate === 1,
               rawBindTime: new Date(device.createDate).getTime()
             };
           })
-            .sort((a, b) => a.rawBindTime - b.rawBindTime);
+              .sort((a, b) => a.rawBindTime - b.rawBindTime);
           this.activeSearchKeyword = "";
           this.searchKeyword = "";
         } else {
@@ -315,7 +352,7 @@ export default {
         }
       });
     },
-    headerCellClassName({ columnIndex }) {
+    headerCellClassName({columnIndex}) {
       if (columnIndex === 0) {
         return "custom-selection-header";
       }
@@ -325,14 +362,19 @@ export default {
       const firmwareType = this.firmwareTypes.find(item => item.key === type)
       return firmwareType ? firmwareType.name : type
     },
+    updateDeviceInfo(device_id, payload, callback) {
+      return Api.device.updateDeviceInfo(device_id, payload, ({data}) => {
+        callback(data.code === 0, data);
+      })
+    },
     handleOtaSwitchChange(row) {
-      Api.device.enableOtaUpgrade(row.device_id, row.otaSwitch ? 1 : 0, ({ data }) => {
-        if (data.code === 0) {
-          this.$message.success(row.otaSwitch ? '已设置成自动升级' : '已关闭自动升级')
-        } else {
-          row.otaSwitch = !row.otaSwitch
-          this.$message.error(data.msg || '操作失败')
+      this.updateDeviceInfo(row.device_id, {autoUpdate: row.otaSwitch ? 1 : 0}, (result, {msg}) => {
+        if (result) {
+          this.$message.success(row.otaSwitch ? '已设置成自动升级' : '已关闭自动升级');
+          return;
         }
+        row.otaSwitch = !row.otaSwitch
+        this.$message.error(msg || '操作失败')
       })
     },
   }
@@ -645,7 +687,6 @@ export default {
 }
 
 
-
 :deep(.el-table .el-button--text) {
   color: #7079aa;
 }