Merge pull request #421 from xinnan-tech/web-vue-modify

Web vue modify

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

@@ -1,21 +1,22 @@
 <template>
-  <el-dialog :visible.sync="visible" width="480px" center>
+  <el-dialog :visible.sync="visible" width="400px" 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="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: 36px;height: 36px;border-radius: 50%;background: #5778ff;display: flex;align-items: center;justify-content: center;">
+      <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: 16px;height: 14px;" />
+        <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 style="color: red;display: inline-block;">*</div>
+        <span style="font-size: 11px"> 验证码：</span>
       </div>
-      <div class="input-46" style="margin-top: 10px;">
+      <div class="input-46" style="margin-top: 12px;">
         <el-input placeholder="请输入设备播报的6位数验证码.." v-model="deviceCode" />
       </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>
@@ -53,7 +54,6 @@ export default {
 
 <style scoped>
 
-
 .input-46 {
   border: 1px solid #e4e6ef;
   background: #f6f8fb;
@@ -65,11 +65,26 @@ export default {
   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/AddWisdomBodyDialog.vue

@@ -0,0 +1,87 @@
+<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>
+export default {
+  name: 'AddWisdomBodyDialog',
+  props: {
+    visible: { type: Boolean, required: true }
+  },
+  data() {
+    return { wisdomBodyName: "" }
+  },
+  methods: {
+    confirm() {
+      this.$emit('update:visible', false)
+      this.$emit('confirmed', this.wisdomBodyName)
+      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

@@ -6,13 +6,16 @@
       </div>
       <div>
         <img src="@/assets/home/delete.png" alt=""
-             style="width: 24px;height: 24px;margin-right: 10px;" />
+             style="width: 18px;height: 18px;margin-right: 10px;" />
-        <img src="@/assets/home/info.png" alt="" style="width: 24px;height: 24px;" />
+        <img src="@/assets/home/info.png" alt="" style="width: 18px;height: 18px;" />
       </div>
     </div>
     <div class="device-name">
       设备型号：{{ device.model }}
     </div>
+    <div class="device-name">
+      音色模型：{{ device.voiceModel }}
+    </div>
     <div style="display: flex;gap: 10px;align-items: center;">
       <div class="settings-btn" @click="$emit('configure')">
         配置角色
@@ -23,12 +26,12 @@
       <div class="settings-btn">
         历史对话
       </div>
-      <el-switch v-model="switchValue" inactive-text="OTA升级:" :width="42"
+      <div class="settings-btn"  @click="$emit('deviceManage')">
-                 style="margin-left: auto;" />
+        设备管理
+      </div>
     </div>
     <div class="version-info">
       <div>最近对话：{{ device.lastConversation }}</div>
-      <div>APP版本：{{ device.appVersion }}</div>
     </div>
   </div>
 </template>
@@ -46,28 +49,28 @@ export default {
 </script>
 <style scoped>
 .device-item {
-  width: 455px;
+  width: 342px;
   border-radius: 20px;
   background: #fafcfe;
-  padding: 30px;
+  padding: 22px;
   box-sizing: border-box;
 }
 .device-name {
-  margin: 10px 0 14px;
+  margin: 7px 0 10px;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 10px;
   color: #3d4566;
   text-align: left;
 }
 
 .settings-btn {
   font-weight: 500;
-  font-size: 14px;
+  font-size: 10px;
   color: #5778ff;
   background: #e6ebff;
-  width: 76px;
+  width: 57px;
-  height: 28px;
+  height: 21px;
-  line-height: 28px;
+  line-height: 21px;
   cursor: pointer;
   border-radius: 14px;
 }
@@ -75,9 +78,10 @@ export default {
 .version-info {
   display: flex;
   justify-content: space-between;
-  margin-top: 20px;
+  margin-top: 15px;
-  font-size: 14px;
+  font-size: 10px;
   color: #979db1;
   font-weight: 400;
 }
+
 </style>

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

@@ -1,29 +1,29 @@
 <template>
   <el-header class="header">
-    <div style="display: flex;justify-content: space-between;">
+    <div style="display: flex;justify-content: space-between;margin-top: 6px; ">
       <div style="display: flex;align-items: center;gap: 10px;">
-        <img src="@/assets/xiaozhi-logo.png" alt="" style="width: 56px;height: 56px;" />
+        <img src="@/assets/xiaozhi-logo.png" alt="" style="width: 42px;height: 42px;" />
-        <img src="@/assets/xiaozhi-ai.png" alt="" style="width: 78px;height: 16px;" />
+        <img src="@/assets/xiaozhi-ai.png" alt="" style="width: 58px;height: 12px;" />
         <div class="equipment-management" @click="goHome">
-          <img src="@/assets/home/equipment.png" alt="" style="width: 16px;height: 14px;" />
+          <img src="@/assets/home/equipment.png" alt="" style="width: 12px;height: 10px;" />
-          设备管理
+          智能体管理
         </div>
         <div class="console">
-          <i class="el-icon-s-grid" style="font-size: 14px;color: #979db1;" />
+          <i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;" />
           控制台
         </div>
         <div class="equipment-management2">
           设备管理
-          <img src="@/assets/home/close.png" alt="" style="width: 8px;height: 8px;" />
+          <img src="@/assets/home/close.png" alt="" style="width: 6px;height: 6px;" />
         </div>
       </div>
-      <div style="display: flex;align-items: center;gap: 10px;">
+      <div style="display: flex;align-items: center;gap: 7px; margin-top: 2px;">
         <div class="serach-box">
-          <el-input placeholder="输入名称搜索.." v-model="serach" />
+          <el-input placeholder="输入名称搜索.." v-model="serach" style="border: none; background: transparent;" />
           <img src="@/assets/home/search.png" alt=""
-               style="width: 16px;height: 16px;margin-right: 15px;cursor: pointer;" />
+               style="width: 14px;height: 14px;margin-right: 11px;cursor: pointer;" />
         </div>
-        <img src="@/assets/home/avatar.png" alt="" style="width: 28px;height: 28px;" />
+        <img src="@/assets/home/avatar.png" alt="" style="width: 21px;height: 21px;" />
         <div class="user-info">
           158 3632 4642
         </div>
@@ -54,69 +54,82 @@ export default {
 }
 
 .equipment-management {
-  width: 110px;
+  width: 82px;
-  height: 32px;
+  height: 24px;
-  border-radius: 16px;
+  border-radius: 12px;
   background: #5778ff;
   display: flex;
   align-items: center;
   justify-content: center;
-  gap: 10px;
+  gap: 7px;
   font-weight: 500;
   color: #fff;
-  font-size: 14px;
+  font-size: 10px;
 }
 
 .equipment-management2 {
-  width: 116px;
+  width: 87px;
-  height: 30px;
+  height: 22px;
-  border-radius: 15px;
+  border-radius: 11px;
   background: #fff;
   display: flex;
   justify-content: center;
-  font-size: 12px;
+  font-size: 9px;
-  color: #979db1;
   font-weight: 400;
-  gap: 10px;
+  gap: 7px;
   color: #3d4566;
-  margin-left: 20px;
+  margin-left: 2px;
   align-items: center;
 }
 
 .header {
   background: #f6fcfe66;
   border: 1px solid #fff;
+  height: 53px !important;
 }
 
 .serach-box {
   display: flex;
-  width: 306px;
+  width: 220px;
-  height: 40px;
+  height: 30px;
-  border-radius: 20px;
+  border-radius: 15px;
-  background-color: #e2f5f7;
+  background-color: #f6fcfe66;
+  border: 1px solid #e4e6ef;
   align-items: center;
+  padding: 0 7px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  margin-right: 15px;
 }
 
+.serach-box /deep/ .el-input__inner {
+  border-radius: 15px;
+  height: 100%;
+  width: 100%;
+  border: 0;
+  background: transparent;
+  padding-left: 12px;
+}
+
+
 .user-info {
   font-weight: 600;
-  font-size: 16px;
+  font-size: 12px;
   letter-spacing: -0.02px;
   text-align: left;
   color: #3d4566;
 }
 .console {
-  width: 120px;
+  width: 90px;
-  height: 30px;
+  height: 22px;
-  border-radius: 15px;
+  border-radius: 11px;
   background: radial-gradient(50% 50% at 50% 50%, #fff 0%, #e8f0ff 100%);
   display: flex;
   align-items: center;
   justify-content: center;
-  font-size: 12px;
+  font-size: 9px;
   color: #979db1;
   font-weight: 400;
-  gap: 10px;
+  gap: 7px;
-  color: #979db1;
+  margin-left: 15px;
-  margin-left: 20px;
 }
 </style>

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

@@ -39,6 +39,15 @@ const routes = [
       return import('../views/register.vue')
     }
   },
+      // 新增设备管理页面路由
+  {
+    path: '/device-management',
+    name: 'DeviceManagement',
+    component: function () {
+      return import('../views/DeviceManagement.vue')
+    }
+
+  }
 ]
 
 const router = new VueRouter({

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

@@ -0,0 +1,169 @@
+<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/home.vue

@@ -21,23 +21,23 @@
               </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: 30px;color: #fff;" />
+                  <i class="el-icon-right" style="font-size: 20px;color: #fff;" />
                 </div>
               </div>
             </div>
           </div>
           <div style="display: flex;flex-wrap: wrap;margin-top: 20px;gap: 20px;justify-content: space-between;box-sizing: border-box;">
-            <DeviceItem v-for="(item,index) in devices" :key="index" :device="item" @configure="goToRoleConfig" />
+            <DeviceItem v-for="(item,index) in devices" :key="index" :device="item" @configure="goToRoleConfig" @deviceManage="handleDeviceManage" />
           </div>
         </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" />
+        <AddWisdomBodyDialog :visible.sync="addDeviceDialogVisible" @confirm="handleWisdomBodyAdded" />
       </el-main>
   </div>
 
@@ -45,11 +45,11 @@
 
 <script>
 import DeviceItem from '@/components/DeviceItem.vue'
-import AddDeviceDialog from '@/components/AddDeviceDialog.vue'
+import AddWisdomBodyDialog from '@/components/AddWisdomBodyDialog.vue'
 import HeaderBar from '@/components/HeaderBar.vue'
 export default {
   name: 'HomePage',
-  components: { DeviceItem, AddDeviceDialog, HeaderBar },
+  components: { DeviceItem, AddWisdomBodyDialog, HeaderBar },
   data() {
     return {
       addDeviceDialogVisible: false,
@@ -58,8 +58,8 @@ export default {
         id: i,
         mac: 'CC:ba:97:11:a6:ac',
         model: 'esp32-s3-touch-amoled-1.8',
+        voiceModel: 'esp32-s3-touch-amoled-1.8',
         lastConversation: '6天前',
-        appVersion: '1.1.0'
       }))
     }
   },
@@ -71,19 +71,24 @@ export default {
       // 点击配置角色后跳转到角色配置页
       this.$router.push('/role-config')
     },
-    handleDeviceAdded(deviceCode) {
+    handleWisdomBodyAdded(name) {
-      // 根据需要处理添加设备后逻辑，比如刷新设备列表等
+      console.log('新增智慧体名称：', name)
-      console.log('设备验证码：', deviceCode)
+      this.addDeviceDialogVisible = false
-    }
+    },
+    handleDeviceManage() {
+      this.$router.push('/device-management');
+    },
   }
 }
 </script>
 
 <style scoped>
 .welcome {
-  min-width: 1200px;
+  min-width: 900px;
-  min-height: 675px;
+  min-height: 506px;
   height: 100vh;
+  display: flex;
+  flex-direction: column;
   background-image: url("@/assets/home/background.png");
   background-size: cover;
   /* 确保背景图像覆盖整个元素 */
@@ -95,8 +100,8 @@ export default {
   /* 兼容老版本Opera浏览器 */
 }
 .add-device {
-  height: 260px;
+  height: 195px;
-  border-radius: 20px;
+  border-radius: 15px;
   position: relative;
   overflow: hidden;
   background: linear-gradient(
@@ -122,48 +127,48 @@ export default {
   box-sizing: border-box;
   /* 兼容老版本Opera浏览器 */
   .hellow-text {
-    margin-left: 100px;
+    margin-left: 75px;
     color: #3d4566;
-    font-size: 44px;
+    font-size: 33px;
     font-weight: 700;
     letter-spacing: 0;
   }
 
   .hi-hint {
     font-weight: 400;
-    font-size: 12px;
+    font-size: 10px;
     text-align: left;
     color: #818cae;
-    margin-left: 100px;
+    margin-left: 75px;
-    margin-top: 7px;
+    margin-top: 5px;
   }
 }
 
 .add-device-btn {
   display: flex;
   align-items: center;
-  margin-left: 100px;
+  margin-left: 75px;
-  margin-top: 20px;
+  margin-top: 15px;
   cursor: pointer;
 
   .left-add {
-    width: 140px;
+    width: 105px;
-    height: 46px;
+    height: 34px;
-    border-radius: 23px;
+    border-radius: 17px;
     background: #5778ff;
     color: #fff;
-    font-size: 14px;
+    font-size: 10px;
     font-weight: 500;
     text-align: center;
-    line-height: 46px;
+    line-height: 34px;
   }
 
   .right-add {
-    width: 46px;
+    width: 34px;
-    height: 46px;
+    height: 34px;
     border-radius: 50%;
     background: #5778ff;
-    margin-left: -8px;
+    margin-left: -6px;
     display: flex;
     justify-content: center;
     align-items: center;

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

@@ -2,45 +2,33 @@
   <div class="welcome">
     <!-- 公共头部 -->
     <HeaderBar/>
-    <el-main style="padding: 20px;display: flex;flex-direction: column;">
+    <el-main style="padding: 16px;display: flex;flex-direction: column;">
-      <div style="border-radius: 20px;background: #fafcfe;">
+      <div style="border-radius: 16px;background: #fafcfe; border: 1px solid #e8f0ff;">
         <div
-            style="padding: 19px 30px;font-weight: 700;font-size: 24px;text-align: left;color: #3d4566;display: flex;gap: 16px;align-items: center;">
+            style="padding: 15px 24px;font-weight: 700;font-size: 19px;text-align: left;color: #3d4566;display: flex;gap: 13px;align-items: center;">
           <div
-              style="width: 46px;height: 46px;background: #5778ff;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
+              style="width: 37px;height: 37px;background: #5778ff;border-radius: 50%;display: flex;align-items: center;justify-content: center;">
-            <img src="@/assets/home/setting-user.png" alt="" style="width: 24px;height: 24px;"/>
+            <img src="@/assets/home/setting-user.png" alt="" style="width: 19px;height: 19px;"/>
           </div>
           {{ deviceMac }}
         </div>
         <div style="height: 1px;background: #e8f0ff;"/>
-        <el-form ref="form" :model="form" label-width="90px">
+        <el-form ref="form" :model="form" label-width="72px">
-          <div style="padding: 20px 30px;max-width: 990px;">
+          <div style="padding: 16px 24px;max-width: 792px;">
             <el-form-item label="助手昵称：">
-              <div class="input-46">
+              <div class="input-46" style="width: 100%; max-width: 412px;">
                 <el-input v-model="form.name"/>
               </div>
             </el-form-item>
             <el-form-item label="角色模版：">
-              <div style="display: flex;gap: 10px;">
+              <div style="display: flex;gap: 8px;">
-                <div class="template-item">
+                <div v-for="template in templates" :key="template" class="template-item" @click="selectTemplate(template)">
-                  台湾女友
+                  {{ template }}
-                </div>
-                <div class="template-item">
-                  土豆子
-                </div>
-                <div class="template-item">
-                  英语老师
-                </div>
-                <div class="template-item">
-                  好奇小男孩
-                </div>
-                <div class="template-item">
-                  汪汪队队长
                 </div>
               </div>
             </el-form-item>
             <el-form-item label="角色音色：">
-              <div style="display: flex;gap: 10px;align-items: center;">
+              <div style="display: flex;gap: 8px;align-items: center;">
                 <div class="input-46" style="flex:1.4;">
                   <el-select v-model="form.timbre" placeholder="请选择" style="width: 100%;">
                     <el-option v-for="item in options" :key="item.value" :label="item.label"
@@ -56,45 +44,39 @@
             </el-form-item>
             <el-form-item label="角色介绍：">
               <div class="textarea-box">
-                <el-input type="textarea" rows="6" resize="none" placeholder="请输入内容"
+                <el-input type="textarea" rows="5" resize="none" placeholder="请输入内容"
                           v-model="form.introduction" maxlength="2000" show-word-limit/>
               </div>
             </el-form-item>
             <el-form-item label="记忆体：">
               <div class="textarea-box">
-                <el-input type="textarea" rows="6" resize="none" placeholder="请输入内容"
+                <el-input type="textarea" rows="5" resize="none" placeholder="请输入内容"
                           v-model="form.prompt" maxlength="1000"/>
                 <div class="prompt-bottom">
-                  <div style="display: flex;gap: 10px;align-items: center;">
+                  <div style="display: flex;gap: 8px;align-items: center;">
-                    <div style="color: #979db1;font-size: 14px;">当前记忆（每次对话后重新生成）</div>
+                    <div style="color: #979db1;font-size: 11px;">当前记忆（每次对话后重新生成）</div>
                     <div class="clear-btn">
-                      <i class="el-icon-delete-solid" style="font-size: 14px;"/>
+                      <i class="el-icon-delete-solid" style="font-size: 11px;"/>
                       清除
                     </div>
                   </div>
-                  <div style="color: #979db1;font-size:14px;">{{ form.prompt.length }}/1000</div>
+                  <div style="color: #979db1;font-size:11px;">{{ form.prompt.length }}/1000</div>
                 </div>
               </div>
             </el-form-item>
-            <el-form-item label="语言模型（内测）：" class="lh-form-item">
+            <el-form-item v-for="model in models" :key="model.label" :label="model.label" class="model-item">
-              <div style="display: flex;gap: 10px;">
+              <el-select v-model="form.model[model.key]" filterable placeholder="请选择" class="select-field">
-                <div class="input-46" style="width: 100%;">
+                <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
-                  <el-select v-model="form.model" placeholder="请选择" style="width: 100%;">
+              </el-select>
-                    <el-option v-for="item in options" :key="item.value" :label="item.label"
-                               :value="item.value">
-                    </el-option>
-                  </el-select>
-                </div>
-              </div>
             </el-form-item>
-            <el-form-item label="" class="lh-form-item">
+            <el-form-item label="" class="lh-form-item" style="margin-top: -25px;">
               <div style="color: #979db1;text-align: left;">除了“Qwen
                 实时”，其他模型通常会增加约1秒的延迟。改变模型后，建议清空记忆体，以免影响体验。
               </div>
             </el-form-item>
           </div>
         </el-form>
-        <div style="display: flex;padding: 20px;gap: 10px;align-items: center;">
+        <div style="display: flex;padding: 16px;gap: 8px;align-items: center;">
           <div class="save-btn" @click="saveConfig">
             保存配置
           </div>
@@ -102,12 +84,12 @@
             重制
           </div>
           <div class="clear-text">
-            <img src="@/assets/home/red-info.png" alt="" style="width: 24px;height: 24px;"/>
+            <img src="@/assets/home/red-info.png" alt="" style="width: 19px;height: 19px;"/>
             保存配置后，需要重启设备，新的配置才会生效。
           </div>
         </div>
       </div>
-      <div style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 30px;color: #979db1;">
+      <div style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 24px;color: #979db1;">
         ©2025 xiaozhi-esp32-server
       </div>
     </el-main>
@@ -128,15 +110,29 @@ export default {
         timbre: "",
         introduction: "",
         prompt: "",
-        model: ""
+        model: {
+          tts: "",
+          vad: "",
+          asr: "",
+          llm: "",
+          memory:"",
+          intent:""
+        }
       },
-      options: [{
+    options: [
-        value: '选项1',
+      { value: '选项1', label: '黄金糕' },
-        label: '黄金糕'
+      { value: '选项2', label: '双皮奶' }
-      }, {
+    ],
-        value: '选项2',
+      models: [
-        label: '双皮奶'
+      { label: '大语言模型(LLM)', key: 'llm' },
-      }]
+      { label: '语音转文本模型(ASR)', key: 'asr' },
+      { label: '语音活动检测模型(VAD)', key: 'vad' },
+      { label: '语音生成模型(TTS)', key: 'tts' },
+      { label: '意图分类模型(Intent)', key: 'intent' },
+      { label: '记忆增强模型(Memory)', key: 'memory' }
+    ],
+      templates: ['台湾女友', '土豆子', '英语老师', '好奇小男孩', '汪汪队队长']
+
     }
   },
   methods: {
@@ -161,6 +157,11 @@ export default {
         this.$message.success('配置已重置')
       }).catch(() => {
       })
+    },
+    // 处理选择模板的逻辑
+    selectTemplate(template) {
+      this.form.name = template;
+      this.$message.success(`已选择模板：${template}`);
     }
   }
 }
@@ -168,9 +169,11 @@ export default {
 
 <style scoped>
 .welcome {
-  min-width: 1200px;
+  min-width: 900px;
-  min-height: 675px;
+  min-height: 506px;
   height: 100vh;
+  display: flex;
+  flex-direction: column;
   background-image: url("@/assets/home/background.png");
   background-size: cover;
   /* 确保背景图像覆盖整个元素 */
@@ -181,71 +184,97 @@ export default {
   -o-background-size: cover;
   /* 兼容老版本Opera浏览器 */
 }
+
+.el-form-item ::v-deep .el-form-item__label {
+  font-size: 10px !important;
+  color: #3d4566 !important;
+  font-weight: 400;
+  line-height: 22px;
+  padding-bottom: 2px;
+}
+
+.select-field{
+  width: 100%;
+  max-width: 720px;
+  border: 1px solid #e4e6ef;
+  background: #f6f8fb;
+  border-radius: 8px;
+  height: 36px !important;
+}
+
 .audio-box {
   flex: 1;
-  height: 46px;
+  height: 37px;
-  border-radius: 10px;
+  border-radius: 20px;
   border: 1px solid #e4e6ef;
 }
 
 .clear-btn {
-  width: 60px;
+  width: 48px;
-  height: 24px;
+  height: 19px;
   background: #fd8383;
-  border-radius: 12px;
+  border-radius: 10px;
-  line-height: 24px;
+  line-height: 19px;
-  font-size: 14px;
+  font-size: 11px;
   color: #fff;
   cursor: pointer;
 }
 
 .clear-text {
   color: #979db1;
-  font-size: 14px;
+  font-size: 11px;
   display: flex;
   align-items: center;
-  gap: 10px;
+  gap: 8px;
-  margin-left: 20px;
+  margin-left: 16px;
 }
 
 .template-item {
-  height: 46px;
+  height: 37px;
-  width: 100px;
+  width: 76px;
-  border-radius: 10px;
+  border-radius: 8px;
   background: #e6ebff;
-  line-height: 46px;
+  line-height: 37px;
   font-weight: 400;
-  font-size: 14px;
+  font-size: 11px;
   text-align: center;
   color: #5778ff;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.template-item:hover {
+  background-color: #d0d8ff;
 }
 
 .prompt-bottom {
-  margin-bottom: 5px;
+  margin-bottom: 4px;
   display: flex;
   justify-content: space-between;
-  padding: 0 20px;
+  padding: 0 16px;
   align-items: center;
 }
 
 .input-46 {
   border: 1px solid #e4e6ef;
   background: #f6f8fb;
-  border-radius: 10px;
+  border-radius: 8px;
+  height: 36px !important;
 }
 
 .save-btn,
 .reset-btn {
-  width: 140px;
+  width: 112px;
-  height: 46px;
+  height: 37px;
-  border-radius: 23px;
+  border-radius: 18px;
-  line-height: 46px;
+  line-height: 37px;
   box-sizing: border-box;
   cursor: pointer;
+  font-size: 11px
 }
 
 .save-btn {
-  border-radius: 23px;
+  border-radius: 18px;
   background: #5778ff;
   color: #fff;
 }
@@ -258,7 +287,8 @@ export default {
 
 .textarea-box {
   border: 1px solid #e4e6ef;
-  border-radius: 10px;
+  border-radius: 8px;
   background: #f6f8fb;
 }
 </style>
+