update:修改样式、调整页面命名

main/manager-web/src/components/AddAgentDialog.vue

@@ -1,21 +1,21 @@
 <template>
-  <el-dialog :visible.sync="visible" width="480px" center>
-    <div style="margin: 0 20px 20px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
-      <div style="width: 36px;height: 36px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
-        <img src="@/assets/home/equipment.png" alt="" style="width: 16px;height: 14px;" />
+  <el-dialog :visible.sync="visible" width="400px" center>
+    <div style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
+      <div style="width: 40px;height: 40px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
+        <img src="@/assets/home/equipment.png" alt="" style="width: 18px;height: 15px;" />
       </div>
       添加智能体
     </div>
     <div style="height: 1px;background: #e8f0ff;" />
-    <div style="margin: 30px 20px;">
+    <div style="margin: 22px 15px;">
       <div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;">
         <div style="color: red;display: inline-block;">*</div>智能体名称：
       </div>
-      <div class="input-46" style="margin-top: 10px;">
+      <div style="margin-top: 12px;">
         <el-input placeholder="请输入智能体名称.." v-model="agentName" />
       </div>
     </div>
-    <div style="display: flex;margin: 0 20px;gap: 10px;">
+    <div style="display: flex;margin: 15px 15px;gap: 7px;">
       <div class="dialog-btn" @click="confirm">
         确定
       </div>
@@ -29,6 +29,9 @@
 </template>
 
 <script>
+import userApi from '@/apis/module/user';
+
+
 export default {
   name: 'AddAgentDialog',
   props: {
@@ -39,9 +42,16 @@ export default {
   },
   methods: {
     confirm() {
-      this.$emit('update:visible', false)
-      this.$emit('added', this.agentName)
-      this.agentName = ""
+      if (!this.agentName.trim()) {
+        this.$message.error('请输入智能体名称');
+        return;
+      }
+      userApi.addAgent(this.agentName, (res) => {
+        this.$message.success('添加成功');
+        this.$emit('confirm', res);
+        this.$emit('update:visible', false);
+        this.agentName = "";
+      });
     },
     cancel() {
       this.$emit('update:visible', false)
@@ -52,24 +62,29 @@ export default {
 </script>
 
 <style scoped>
-
-
-.input-46 {
-  border: 1px solid #e4e6ef;
-  background: #f6f8fb;
-  border-radius: 10px;
-}
-
 .dialog-btn {
   cursor: pointer;
   flex: 1;
   border-radius: 23px;
   background: #5778ff;
-  height: 46px;
+  height: 40px;
   font-weight: 500;
-  font-size: 14px;
+  font-size: 12px;
   color: #fff;
-  line-height: 46px;
+  line-height: 40px;
   text-align: center;
 }
+::v-deep .el-dialog {
+  border-radius: 15px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+::v-deep .el-dialog__headerbtn {
+  display: none;
+}
+::v-deep .el-dialog__body {
+  padding: 4px 6px;
+}
+::v-deep .el-dialog__header{
+  padding: 10px;
+}
 </style>

main/manager-web/src/components/AddDeviceDialog.vue

@@ -53,13 +53,6 @@ export default {
 </script>
 
 <style scoped>
-
-.input-46 {
-  border: 1px solid #e4e6ef;
-  background: #f6f8fb;
-  border-radius: 10px;
-}
-
 .dialog-btn {
   cursor: pointer;
   flex: 1;

main/manager-web/src/components/AddWisdomBodyDialog.vue

@@ -1,97 +0,0 @@
-<template>
-  <el-dialog :visible.sync="visible" width="400px" center>
-    <div style="margin: 0 10px 10px;display: flex;align-items: center;gap: 10px;font-weight: 700;font-size: 20px;text-align: left;color: #3d4566;">
-      <div style="width: 40px;height: 40px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
-        <img src="@/assets/home/equipment.png" alt="" style="width: 18px;height: 15px;" />
-      </div>
-      添加智慧体
-    </div>
-    <div style="height: 1px;background: #e8f0ff;" />
-    <div style="margin: 22px 15px;">
-      <div style="font-weight: 400;font-size: 14px;text-align: left;color: #3d4566;">
-        <div style="color: red;display: inline-block;">*</div> 智慧体名称：
-      </div>
-      <div class="input-46" style="margin-top: 12px;">
-        <el-input placeholder="请输入智慧体名称.." v-model="wisdomBodyName" />
-      </div>
-    </div>
-    <div style="display: flex;margin: 15px 15px;gap: 7px;">
-      <div class="dialog-btn" @click="confirm">
-        确定
-      </div>
-      <div class="dialog-btn"
-           style="background: #e6ebff;border: 1px solid #adbdff;color: #5778ff;"
-           @click="cancel">
-        取消
-      </div>
-    </div>
-  </el-dialog>
-</template>
-
-<script>
-import userApi from '@/apis/module/user';
-
-
-export default {
-  name: 'AddWisdomBodyDialog',
-  props: {
-    visible: { type: Boolean, required: true }
-  },
-  data() {
-    return { wisdomBodyName: "" }
-  },
-  methods: {
-    confirm() {
-      if (!this.wisdomBodyName.trim()) {
-        this.$message.error('请输入智慧体名称');
-        return;
-      }
-      userApi.addAgent(this.wisdomBodyName, (res) => {
-        this.$message.success('添加成功');
-        this.$emit('confirm', res);
-        this.$emit('update:visible', false);
-        this.wisdomBodyName = "";
-      });
-    },
-    cancel() {
-      this.$emit('update:visible', false)
-      this.wisdomBodyName = ""
-    }
-  }
-}
-</script>
-
-<style scoped>
-
-.input-46 {
-  border: 1px solid #e4e6ef;
-  background: #f6f8fb;
-  border-radius: 15px;
-}
-
-.dialog-btn {
-  cursor: pointer;
-  flex: 1;
-  border-radius: 23px;
-  background: #5778ff;
-  height: 40px;
-  font-weight: 500;
-  font-size: 12px;
-  color: #fff;
-  line-height: 40px;
-  text-align: center;
-}
-::v-deep .el-dialog {
-  border-radius: 15px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-}
-::v-deep .el-dialog__headerbtn {
-  display: none;
-}
-::v-deep .el-dialog__body {
-  padding: 4px 6px;
-}
-::v-deep .el-dialog__header{
-  padding: 10px;
-}
-</style>

main/manager-web/src/components/DeviceItem.vue

@@ -1,87 +0,0 @@
-<template>
-  <div class="device-item">
-    <div style="display: flex;justify-content: space-between;">
-      <div style="font-weight: 700;font-size: 18px;text-align: left;color: #3d4566;">
-         {{ device.agentName }}
-      </div>
-      <div>
-        <img src="@/assets/home/delete.png" alt=""
-             style="width: 18px;height: 18px;margin-right: 10px;" />
-        <img src="@/assets/home/info.png" alt="" style="width: 18px;height: 18px;" />
-      </div>
-    </div>
-    <div class="device-name">
-      设备型号：{{ device.ttsModelName }}
-    </div>
-    <div class="device-name">
-      音色模型：{{ device.ttsVoiceName }}
-    </div>
-    <div style="display: flex;gap: 10px;align-items: center;">
-      <div class="settings-btn" @click="$emit('configure')">
-        配置角色
-      </div>
-      <div class="settings-btn">
-        声纹识别
-      </div>
-      <div class="settings-btn">
-        历史对话
-      </div>
-      <div class="settings-btn"  @click="$emit('deviceManage')">
-        设备管理
-      </div>
-    </div>
-    <div class="version-info">
-      <div>最近对话：{{ device.lastConnectedAt }}</div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'DeviceItem',
-  props: {
-    device: { type: Object, required: true }
-  },
-  data() {
-    return { switchValue: false }
-  }
-}
-</script>
-<style scoped>
-.device-item {
-  width: 342px;
-  border-radius: 20px;
-  background: #fafcfe;
-  padding: 22px;
-  box-sizing: border-box;
-}
-.device-name {
-  margin: 7px 0 10px;
-  font-weight: 400;
-  font-size: 11px;
-  color: #3d4566;
-  text-align: left;
-}
-
-.settings-btn {
-  font-weight: 500;
-  font-size: 10px;
-  color: #5778ff;
-  background: #e6ebff;
-  width: 57px;
-  height: 21px;
-  line-height: 21px;
-  cursor: pointer;
-  border-radius: 14px;
-}
-
-.version-info {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 15px;
-  font-size: 10px;
-  color: #979db1;
-  font-weight: 400;
-}
-
-</style>

main/manager-web/src/components/HeaderBar.vue

@@ -5,17 +5,18 @@
         <img alt="" src="@/assets/xiaozhi-logo.png" style="width: 42px;height: 42px;"/>
         <img alt="" src="@/assets/xiaozhi-ai.png" style="width: 58px;height: 12px;"/>
         <div class="ml-20 menu-btn active" @click="goHome">
-          <img alt="" src="@/assets/home/equipment.png" style="width: 12px;height: 10px;"/>
+          <!-- <img alt="" src="@/assets/home/equipment.png" style="width: 12px;height: 10px;"/> -->
+          <i class="el-icon-cpu"></i>
           智能体
         </div>
         <div class="menu-btn">
           <i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;"/>
           控制台
         </div>
-        <div class="menu-btn">
+        <!-- <div class="menu-btn">
           设备管理
           <img alt="" src="@/assets/home/close.png" style="width: 6px;height: 6px;"/>
-        </div>
+        </div> -->
       </div>
       <div style="display: flex;align-items: center;gap: 7px; margin-top: 2px;">
         <div class="serach-box">
@@ -109,7 +110,7 @@ export default {
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 4px;
   font-weight: 500;
   font-size: 14px;
   cursor: pointer;

main/manager-web/src/router/index.js

@@ -12,17 +12,10 @@ const routes = [
     }
   },
   {
-    path: '/device',
-    name: 'RoleConfig',
+    path: '/register',
+    name: 'Register',
     component: function () {
-      return import('../views/device.vue')
-    }
-  },
-  {
-    path: '/role-config',
-    name: 'RoleConfig',
-    component: function () {
-      return import('../views/roleConfig.vue')
+      return import('../views/register.vue')
     }
   },
   {
@@ -40,20 +33,18 @@ const routes = [
     }
   },
   {
-    path: '/register',
-    name: 'Register',
+    path: '/role-config',
+    name: 'RoleConfig',
     component: function () {
-      return import('../views/register.vue')
+      return import('../views/roleConfig.vue')
     }
   },
-      // 新增设备管理页面路由
   {
-    path: '/device-management',
-    name: 'DeviceManagement',
+    path: '/device',
+    name: 'Device',
     component: function () {
-      return import('../views/DeviceManagement.vue')
+      return import('../views/device.vue')
     }
-
   }
 ]
 

main/manager-web/src/views/DeviceManagement.vue

@@ -1,169 +0,0 @@
-<template>
-  <div class="welcome">
-        <HeaderBar />
-    <el-main style="padding: 20px; display: flex; flex-direction: column;">
-      <div class="table-container">
-         <h3 class="device-list-title">设备列表</h3>
-        <el-button type="primary" class="add-device-btn" @click="handleAddDevice">
-          + 添加设备
-        </el-button>
-        <el-table :data="deviceList" style="width: 100%; margin-top: 20px" border stripe>
-          <el-table-column label="设备型号" prop="model" flex></el-table-column>
-          <el-table-column label="固件版本" prop="firmwareVersion" width="140"></el-table-column>
-          <el-table-column label="Mac地址" prop="macAddress" width="220"></el-table-column>
-          <el-table-column label="绑定时间" prop="bindTime" width="260"></el-table-column>
-          <el-table-column label="最近对话" prop="lastConversation" width="100"></el-table-column>
-          <el-table-column label="备注" width="220">
-             <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>
-              </span>
-            </template>
-          </el-table-column>
-          <el-table-column label="OTA升级" width="120">
-            <template slot-scope="scope">
-              <el-switch v-model="scope.row.otaSwitch" size="mini" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
-            </template>
-          </el-table-column>
-          <el-table-column label="操作" width="80">
-            <template slot-scope="scope">
-              <el-button size="mini" type="text" @click="handleUnbind(scope.row)" style="color: #ff4949">
-                解绑
-              </el-button>
-            </template>
-          </el-table-column>
-        </el-table>
-      </div>
-      <div style="font-size: 12px; font-weight: 400; margin-top: auto; padding-top: 30px; color: #979db1;">
-        ©2025 xiaozhi-esp32-server
-      </div>
-      <AddDeviceDialog :visible.sync="addDeviceDialogVisible" @added="handleDeviceAdded" />
-    </el-main>
-  </div>
-</template>
-
-<script>
-import HeaderBar from "@/components/HeaderBar.vue";
-import AddDeviceDialog from "@/components/AddDeviceDialog.vue";
-
-export default {
-  components: {HeaderBar, AddDeviceDialog },
-  data() {
-    return {
-      addDeviceDialogVisible: false,
-      deviceList: [
-        {
-          model: 'xingzhi-cube-0.96oled-wifi',
-          firmwareVersion: '1.4.6',
-          macAddress: 'fc:01:2c:c5:d5:7c',
-          bindTime: '2025-03-10 18:16:21',
-          lastConversation: '6 天前',
-          remark: '',
-          isEdit: false,
-          otaSwitch: false
-        },
-        {
-          model: 'xingzhi-board-1.3tft-ble',
-          firmwareVersion: '2.1.0',
-          macAddress: 'ac:12:3d:e7:f8:9a',
-          bindTime: '2025-03-12 09:30:15',
-          lastConversation: '4 天前',
-          remark: '测试设备',
-          isEdit: false,
-          otaSwitch: true
-      },
-      {
-        model: 'xingzhi-kit-0.91oled-4g',
-        firmwareVersion: '1.8.3',
-        macAddress: 'bc:45:6f:1e:2d:3c',
-        bindTime: '2025-03-15 14:22:08',
-        lastConversation: '2 天前',
-        remark: '生产环境设备',
-        isEdit: false,
-        otaSwitch: false
-      }
-      ]
-    };
-  },
-  methods: {
-    handleAddDevice() {
-      // 添加设备逻辑
-      this.addDeviceDialogVisible = true;
-    },
-    startEditRemark(index, row) {
-      this.deviceList[index].isEdit = true;
-    },
-    stopEditRemark(index) {
-      this.deviceList[index].isEdit = false;
-    },
-    handleUnbind(device) {
-      // 解绑逻辑
-      console.log('解绑设备', device);
-    },
-    handleDeviceAdded(deviceCode) {
-      console.log('添加的智慧体名称：', deviceCode);
-    },
-  }
-};
-</script>
-
-<style scoped>
-.welcome {
-  min-width: 900px;
-  min-height: 506px;
-  height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background-image: url("@/assets/home/background.png");
-  background-size: cover;
-  background-position: center;
-  -webkit-background-size: cover;
-  -o-background-size: cover;
-}
-
-.table-container {
-  background: #f9fafc;
-  padding: 20px;
-  border-radius: 20px;
-  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
-  margin-top: 15px;
-}
-
-.add-device-btn {
-  float: right;
-  background: #409eff;
-  border: none;
-  border-radius: 10px;
-  width: 105px;
-  height: 32px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  gap: 8px;
-  margin-bottom: 15px;
-  &:hover {
-    background: #3a8ee6;
-  }
-}
-
-.device-list-title {
-  float: left;
-  font-size: 18px;
-  font-weight: 700;
-  margin: 5px;
-  color: #2c3e50;
-}
-
-.el-icon-edit {
-  color: #409eff;
-  cursor: pointer;
-  font-size: 14px;
-  vertical-align: middle;
-}
-
-</style>

main/manager-web/src/views/device.vue

@@ -1,104 +1,59 @@
 <template>
   <div class="welcome">
-      <!-- 公共头部 -->
-      <HeaderBar :devices="devices" @search-result="handleSearchResult" />
-      <el-main style="padding: 20px;display: flex;flex-direction: column;">
-        <div>
-          <!-- 首页内容 -->
-          <div class="add-device">
-            <div class="add-device-bg">
-              <div class="hellow-text" style="margin-top: 30px;">
-                您好，小智
-              </div>
-              <div class="hellow-text">
-                让我们度过
-                <div style="display: inline-block;color: #5778FF;">
-                  美好的一天！
-                </div>
-              </div>
-              <div class="hi-hint">
-                Hello, Let's have a wonderful day!
-              </div>
-              <div class="add-device-btn" @click="showAddDialog">
-                <div class="left-add">
-                  添加设备
-                </div>
-                <div style="width: 23px;height: 13px;background: #5778ff;margin-left: -10px;" />
-                <div class="right-add">
-                  <i class="el-icon-right" style="font-size: 20px;color: #fff;" />
-                </div>
-              </div>
-            </div>
-          </div>
-          <!-- 面包屑-->
-          <div class="breadcrumbs">
-            <el-breadcrumb separator="/">
-              <el-breadcrumb-item>控制台</el-breadcrumb-item>
-              <el-breadcrumb-item><router-link to="/home">智能体</router-link></el-breadcrumb-item>
-              <el-breadcrumb-item>设备管理</el-breadcrumb-item>
-            </el-breadcrumb>
-          </div>
-          <!-- 设备列表-->
-          <el-card class="box-card" shadow="hover" style="margin-top: 20px;">
-            <div slot="header" class="clearfix" style="text-align: left;">
-              <span>设备列表</span>
-            </div>
-            <div style="display: flex;flex-direction: column;align-items: end;padding: 0 20px;gap: 10px;">
-              <el-table :data="devices" style="width: 100%">
-                <el-table-column prop="device_type" label="设备型号">
-                </el-table-column>
-                <el-table-column prop="app_version" label="固件版本" width="180">
-                </el-table-column>
-                <el-table-column prop="mac_address" label="MAC地址">
-                </el-table-column>
-                <el-table-column prop="bind_time" label="绑定时间">
-                </el-table-column>
-                <el-table-column prop="recent_chat_time" label="最近对话">
-                </el-table-column>
-                <el-table-column prop="desc" label="备注">
-                  <template slot-scope="scope">
-                    <div v-if="scope.row.isEdit">
-                      <el-input
-                        placeholder="请输入内容"
-                        v-model="scope.row.desc"
-                        @blur="handleEditSave(scope.row)"
-                        clearable>
-                      </el-input>
-                    </div>
-                    <div v-else>
-                      {{ scope.row.desc }}
-                      <i class="el-icon-edit" style="color:#1890ff;cursor: pointer;" @click="handleEdit(scope.row)"></i>
-                    </div>
-                  </template>
-                </el-table-column>
-                <el-table-column label="OTA升级" width="100" align="center">
-                  <template slot-scope="scope">
-                    <el-switch v-model="scope.row.ota_upgrade" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949">
-                    </el-switch>
-                  </template>
-                </el-table-column>
-                <el-table-column label="操作" width="80" align="center">
-                  <template slot-scope="scope">
-                    <el-button size="mini" type="danger">解绑</el-button>
-                  </template>
-                </el-table-column>
-              </el-table>
-              <el-pagination
-                :page-size="10"
-                :pager-count="5"
-                layout="prev, pager, next"
-                :total="150">
-              </el-pagination>
-          </div>
-          </el-card>
-        </div>
-        <!-- 底部 -->
-        <Footer :visible="true" />
-        <!-- 添加设备对话框 -->
-        <AddDeviceDialog :visible.sync="addDeviceDialogVisible" @added="handleDeviceAdded" />
-      </el-main>
+    <!-- 公共头部 -->
+    <HeaderBar />
+    <!-- 首页内容 -->
+    <el-main style="padding: 20px; display: flex; flex-direction: column;">
+      <!-- 面包屑-->
+      <div class="breadcrumbs">
+        <el-breadcrumb separator="/">
+          <el-breadcrumb-item>控制台</el-breadcrumb-item>
+          <el-breadcrumb-item><router-link to="/home">智能体</router-link></el-breadcrumb-item>
+          <el-breadcrumb-item>设备管理</el-breadcrumb-item>
+        </el-breadcrumb>
+      </div>
+      <div class="table-container">
+         <h3 class="device-list-title">设备列表</h3>
+        <el-button type="primary" class="add-device-btn" @click="handleAddDevice">
+          + 添加设备
+        </el-button>
+        <el-table :data="devices" style="width: 100%; margin-top: 20px" border>
+          <el-table-column label="设备型号" prop="device_type" flex></el-table-column>
+          <el-table-column label="固件版本" prop="app_version" width="140"></el-table-column>
+          <el-table-column label="MAC地址" prop="mac_address" width="220"></el-table-column>
+          <el-table-column label="绑定时间" prop="bind_time" width="260"></el-table-column>
+          <el-table-column label="最近对话" prop="recent_chat_time" width="100"></el-table-column>
+          <el-table-column label="备注" width="220">
+            <template slot-scope="scope">
+              <el-input v-if="scope.row.isEdit" v-model="scope.row.remark" size="small" @blur="stopEditRemark(scope.$index)"></el-input>
+              <span v-else>
+                {{ scope.row.remark }}
+              </span>
+              <i  v-if="!scope.row.isEdit" class="el-icon-edit" @click="startEditRemark(scope.$index, scope.row)"></i>
+            </template>
+          </el-table-column>
+          <el-table-column label="OTA升级" width="100" align="center">
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.ota_upgrade" size="mini" :active-value="1" :inactive-value="0" active-color="#13ce66" inactive-color="#ff4949"></el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="80" align="center">
+            <template slot-scope="scope">
+              <el-button size="mini" type="text" @click="handleUnbind(scope.row)" style="color: #ff4949">
+                解绑
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+        <!-- 分页 -->
+        <el-pagination background :page-size="10" :pager-count="5" layout="prev, pager, next" :total="150" style="margin-top: 4px;text-align: right;"></el-pagination>
+      </div>
+      <!-- 底部 -->
+      <Footer :visible="true" />
+      <!-- 添加设备对话框 -->
+      <AddDeviceDialog :visible.sync="addDeviceDialogVisible" @added="handleDeviceAdded" />
+    </el-main>
   </div>
-
 </template>
 
 <script>
@@ -107,6 +62,7 @@ import Api from '@/apis/api';
 import AddDeviceDialog from '@/components/AddDeviceDialog.vue'
 import HeaderBar from '@/components/HeaderBar.vue'
 import Footer from '@/components/Footer.vue'
+
 export default {
   name: 'DevicePage',
   components: { AddDeviceDialog, HeaderBar, Footer },
@@ -131,25 +87,26 @@ export default {
         }
       })
     },
-    showAddDialog() {
-      this.addDeviceDialogVisible = true
+    handleAddDevice() {
+      // 添加设备逻辑
+      this.addDeviceDialogVisible = true;
     },
-    goToRoleConfig() {
-      // 点击配置角色后跳转到角色配置页
-      this.$router.push('/role-config')
+    startEditRemark(index, row) {
+      this.devices[index].isEdit = true;
+    },
+    stopEditRemark(index) {
+      this.devices[index].isEdit = false;
+    },
+    handleUnbind(device) {
+      // 解绑逻辑
+      console.log('解绑设备', device);
     },
     handleDeviceAdded(deviceCode) {
       // 根据需要处理添加设备后逻辑，比如刷新设备列表等
       console.log('设备验证码：', deviceCode)
     },
-    handleEdit(row) {
-      row.isEdit=true
-    },
-    handleEditSave(row) {
-      row.isEdit=false
-    },
   }
-}
+};
 </script>
 
 <style scoped>
@@ -165,87 +122,50 @@ export default {
   flex-direction: column;
   background-image: url("@/assets/home/background.png");
   background-size: cover;
-  /* 确保背景图像覆盖整个元素 */
   background-position: center;
-  /* 从顶部中心对齐 */
   -webkit-background-size: cover;
-  /* 兼容老版本WebKit浏览器 */
   -o-background-size: cover;
-  /* 兼容老版本Opera浏览器 */
 }
-.add-device {
-  height: 195px;
-  border-radius: 15px;
-  position: relative;
-  overflow: hidden;
-  background: linear-gradient(
-      269.62deg,
-      #e0e6fd 0%,
-      #cce7ff 49.69%,
-      #d3d3fe 100%
-  );
-}
-.add-device-bg {
-  width: 100%;
-  height: 100%;
-  text-align: left;
-  background-image: url("@/assets/home/main-top-bg.png");
-  overflow: hidden;
-  background-size: cover;
-  /* 确保背景图像覆盖整个元素 */
-  background-position: center;
-  /* 从顶部中心对齐 */
-  -webkit-background-size: cover;
-  /* 兼容老版本WebKit浏览器 */
-  -o-background-size: cover;
-  box-sizing: border-box;
-  /* 兼容老版本Opera浏览器 */
-  .hellow-text {
-    margin-left: 75px;
-    color: #3d4566;
-    font-size: 33px;
-    font-weight: 700;
-    letter-spacing: 0;
-  }
 
-  .hi-hint {
-    font-weight: 400;
-    font-size: 10px;
-    text-align: left;
-    color: #818cae;
-    margin-left: 75px;
-    margin-top: 5px;
-  }
+.table-container {
+  background: #f9fafc;
+  padding: 20px;
+  border-radius: 20px;
+  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
+  margin-top: 15px;
 }
 
 .add-device-btn {
+  float: right;
+  background: #409eff;
+  border: none;
+  border-radius: 10px;
+  width: 105px;
+  height: 32px;
   display: flex;
   align-items: center;
-  margin-left: 75px;
-  margin-top: 15px;
-  cursor: pointer;
-
-  .left-add {
-    width: 105px;
-    height: 34px;
-    border-radius: 17px;
-    background: #5778ff;
-    color: #fff;
-    font-size: 10px;
-    font-weight: 500;
-    text-align: center;
-    line-height: 34px;
-  }
-
-  .right-add {
-    width: 34px;
-    height: 34px;
-    border-radius: 50%;
-    background: #5778ff;
-    margin-left: -6px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  gap: 8px;
+  margin-bottom: 15px;
+  &:hover {
+    background: #3a8ee6;
   }
 }
+
+.device-list-title {
+  float: left;
+  font-size: 18px;
+  font-weight: 700;
+  margin: 5px;
+  color: #2c3e50;
+}
+
+.el-icon-edit {
+  color: #409eff;
+  cursor: pointer;
+  font-size: 14px;
+  vertical-align: middle;
+}
+
 </style>

main/manager-web/src/views/home.vue

@@ -205,7 +205,7 @@ export default {
     border-radius: 17px;
     background: #5778ff;
     color: #fff;
-    font-size: 10px;
+    font-size: 12px;
     font-weight: 500;
     text-align: center;
     line-height: 34px;