From 4409f370006df98ccad7634fae46caa05c110cc4 Mon Sep 17 00:00:00 2001
From: Erlei Chen <dreamchenel@gmail.com>
Date: Fri, 21 Mar 2025 01:39:23 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=E6=A0=B7=E5=BC=8F=E5=8F=8A?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 main/manager-web/src/apis/api.js              |   6 +-
 main/manager-web/src/apis/module/agent.js     |  84 ++++++
 main/manager-web/src/apis/module/device.js    |  51 ++++
 main/manager-web/src/apis/module/user.js      |  16 --
 .../src/components/AddAgentDialog.vue         |  75 ++++++
 main/manager-web/src/components/AgentItem.vue |  77 ++++++
 main/manager-web/src/components/Footer.vue    |  30 +++
 main/manager-web/src/components/HeaderBar.vue | 114 ++++----
 main/manager-web/src/router/index.js          |   7 +
 main/manager-web/src/views/device.vue         | 251 ++++++++++++++++++
 main/manager-web/src/views/home.vue           | 115 +++++---
 main/manager-web/src/views/roleConfig.vue     | 129 ++++-----
 12 files changed, 756 insertions(+), 199 deletions(-)
 create mode 100755 main/manager-web/src/apis/module/agent.js
 create mode 100755 main/manager-web/src/apis/module/device.js
 create mode 100644 main/manager-web/src/components/AddAgentDialog.vue
 create mode 100644 main/manager-web/src/components/AgentItem.vue
 create mode 100644 main/manager-web/src/components/Footer.vue
 create mode 100644 main/manager-web/src/views/device.vue

diff --git a/main/manager-web/src/apis/api.js b/main/manager-web/src/apis/api.js
index bb6ec96b..38c2f86b 100755
--- a/main/manager-web/src/apis/api.js
+++ b/main/manager-web/src/apis/api.js
@@ -1,4 +1,6 @@
 // 引入各个模块的请求
+import agent from './module/agent.js'
+import device from './module/device.js'
 import user from './module/user.js'
 
 /**
@@ -7,7 +9,7 @@ import user from './module/user.js'
  * 如果你想调用8002端口，就用'/xiaozhi-esp32-api/api/v1'，请与vue.config.js的devServer配置相结合，方便跨域请求
  *
  */
-const DEV_API_SERVICE = 'https://apifoxmock.com/m1/5931378-5618560-default'
+const DEV_API_SERVICE = 'https://m1.apifoxmock.com/m1/5931378-5618560-default'
 // 8002开发完成完成后使用这个
 // const DEV_API_SERVICE = '/xiaozhi-esp32-api'
 
@@ -24,4 +26,6 @@ export function getServiceUrl() {
 export default {
     getServiceUrl,
     user,
+    agent,
+    device
 }
diff --git a/main/manager-web/src/apis/module/agent.js b/main/manager-web/src/apis/module/agent.js
new file mode 100755
index 00000000..721f075c
--- /dev/null
+++ b/main/manager-web/src/apis/module/agent.js
@@ -0,0 +1,84 @@
+import RequestService from '../httpRequest'
+import {getServiceUrl} from '../api'
+
+
+export default {
+    //智能体列表
+    getAgentList(callback) {
+        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/agent`)
+            .method('GET')
+            .success((res) => {
+                RequestService.clearRequestTime()
+                callback(res)
+            })
+            .fail((err) => {
+                console.error('获取智能体列表失败:', err);
+            }).send()
+    },
+    //添加智能体
+    addAgent(name, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/user/agent`)
+            .method('POST')
+            .data({name})
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('添加智能体失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.addAgent(name, callback);
+                });
+            }).send();
+    },
+    //获取智能体配置
+    getAgentConfig(agent_id, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/user/agent/${agent_id}`)
+            .method('GET')
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('获取智能体配置失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.getAgentConfig(agent_id, callback);
+                });
+            }).send();
+    },
+    //配置智能体
+    saveAgentConfig(agent_id, configData, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/user/agent/${agent_id}`)
+            .method('PUT')
+            .data(configData)
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('保存智能体配置失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.saveAgentConfig(device_id, configData, callback);
+                });
+            }).send();
+    },
+    //删除智能体
+    delAgent(agent_id, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/user/agent/${agent_id}`)
+            .method('DELETE')
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('删除智能体失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.deleteAgent(agent_id, callback);
+                });
+            }).send();
+    },
+}
diff --git a/main/manager-web/src/apis/module/device.js b/main/manager-web/src/apis/module/device.js
new file mode 100755
index 00000000..cd568745
--- /dev/null
+++ b/main/manager-web/src/apis/module/device.js
@@ -0,0 +1,51 @@
+import RequestService from '../httpRequest'
+import {getServiceUrl} from '../api'
+
+
+export default {
+    //设备列表
+    getDeviceList(agent_id, callback) {
+        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/agent/device/bind/${agent_id}`)
+            .method('GET')
+            .success((res) => {
+                RequestService.clearRequestTime()
+                callback(res)
+            })
+            .fail((err) => {
+                console.error('获取设备列表失败:', err);
+            }).send()
+    },
+    //绑定设备
+    bindDevice(agent_id, code, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/user/agent/device/bind/${agent_id}`)
+            .method('POST')
+            .data({code})
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail((err) => {
+                console.error('绑定设备失败:', err);
+                RequestService.reAjaxFun(() => {
+                    this.addDevice(name, callback);
+                });
+            }).send();
+    },
+    // 解绑设备
+    unbindDevice(device_id, callback) {
+        RequestService.sendRequest()
+            .url(`${getServiceUrl()}/api/v1/user/device/unbind/${device_id}`)
+            .method('PUT')
+            .success((res) => {
+                RequestService.clearRequestTime();
+                callback(res);
+            })
+            .fail(() => {
+                RequestService.reAjaxFun(() => {
+                  this.unbindDevice(device_id, callback);
+                });
+              }).send()
+    },
+
+}
diff --git a/main/manager-web/src/apis/module/user.js b/main/manager-web/src/apis/module/user.js
index bf3eea34..1879afaf 100755
--- a/main/manager-web/src/apis/module/user.js
+++ b/main/manager-web/src/apis/module/user.js
@@ -47,22 +47,6 @@ export default {
                 });
               }).send()
     },
-    // 绑定设备
-    bindDevice(deviceCode, callback) {
-        RequestService.sendRequest()
-            .url(`${getServiceUrl()}/api/v1/user/device/bind/${deviceCode}`)
-            .method('POST')
-            .success((res) => {
-                RequestService.clearRequestTime();
-                callback(res);
-            })
-            .fail((err) => {
-                console.error('绑定设备失败:', err);
-                RequestService.reAjaxFun(() => {
-                    this.bindDevice(deviceCode, callback);
-                });
-            }).send();
-    },
     // 获取验证码
     getCaptcha(uuid, callback) {
 
diff --git a/main/manager-web/src/components/AddAgentDialog.vue b/main/manager-web/src/components/AddAgentDialog.vue
new file mode 100644
index 00000000..a7df2940
--- /dev/null
+++ b/main/manager-web/src/components/AddAgentDialog.vue
@@ -0,0 +1,75 @@
+<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;" />
+      </div>
+      添加智能体
+    </div>
+    <div style="height: 1px;background: #e8f0ff;" />
+    <div style="margin: 30px 20px;">
+      <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;">
+        <el-input placeholder="请输入智能体名称.." v-model="agentName" />
+      </div>
+    </div>
+    <div style="display: flex;margin: 0 20px;gap: 10px;">
+      <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: 'AddAgentDialog',
+  props: {
+    visible: { type: Boolean, required: true }
+  },
+  data() {
+    return { agentName: "" }
+  },
+  methods: {
+    confirm() {
+      this.$emit('update:visible', false)
+      this.$emit('added', this.agentName)
+      this.agentName = ""
+    },
+    cancel() {
+      this.$emit('update:visible', false)
+      this.agentName = ""
+    }
+  }
+}
+</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;
+  font-weight: 500;
+  font-size: 14px;
+  color: #fff;
+  line-height: 46px;
+  text-align: center;
+}
+</style>
\ No newline at end of file
diff --git a/main/manager-web/src/components/AgentItem.vue b/main/manager-web/src/components/AgentItem.vue
new file mode 100644
index 00000000..eb0b852d
--- /dev/null
+++ b/main/manager-web/src/components/AgentItem.vue
@@ -0,0 +1,77 @@
+<template>
+  <div class="agent-item">
+    <div style="display: flex;justify-content: space-between;">
+      <div style="font-weight: 700;font-size: 18px;text-align: left;color: #3d4566;">
+         {{ agent.agentName }}
+      </div>
+      <div>
+        <img src="@/assets/home/delete.png" alt=""
+             style="width: 18px;height: 18px;" @click="$emit('del', agent.id)" />
+        <!-- <img src="@/assets/home/info.png" alt="" style="width: 18px;height: 18px;" /> -->
+      </div>
+    </div>
+    <div class="agent-name">
+      角色音色：{{ agent.ttsModelName }}
+    </div>
+    <div class="agent-name">
+      语言模型：{{ agent.llmModelName }}
+    </div>
+    <div class="agent-name">
+      最近对话：{{ agent.lastConnectedAt }}
+    </div>
+    <div style="display: flex;justify-content: space-between;align-items: center;gap: 10px;">
+      <div class="settings-btn" @click="$emit('configure', agent.id, agent.agentName)">
+        配置角色
+      </div>
+      <div class="settings-btn" @click="$emit('asr', agent.id)">
+        声纹识别
+      </div>
+      <div class="settings-btn" @click="$emit('chat', agent.id)">
+        历史对话
+      </div>
+      <div class="settings-btn" @click="$emit('device', agent.id)">
+        设备数量({{agent.deviceCount}})
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AgentItem',
+  props: {
+    agent: { type: Object, required: true }
+  },
+  data() {
+    return { }
+  }
+}
+</script>
+<style scoped>
+.agent-item {
+  width: 342px;
+  border-radius: 20px;
+  background: #fafcfe;
+  padding: 22px 22px 11px 22px;
+  box-sizing: border-box;
+}
+.agent-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;
+  padding: 2px 10px;
+  line-height: 21px;
+  cursor: pointer;
+  border-radius: 14px;
+}
+
+</style>
\ No newline at end of file
diff --git a/main/manager-web/src/components/Footer.vue b/main/manager-web/src/components/Footer.vue
new file mode 100644
index 00000000..3ccb543c
--- /dev/null
+++ b/main/manager-web/src/components/Footer.vue
@@ -0,0 +1,30 @@
+<template>
+  <div v-if="visible" class="message">
+          {{message}}
+        </div>
+</template>
+
+<script>
+export default {
+  name: 'Footer',
+  props: {
+    visible: { type: Boolean, required: true },
+    message: { type: String, required: false, default: '©2025 xiaozhi-esp32-server' }
+  },
+  data() {
+    return {  }
+  },
+  methods: {
+  }
+}
+</script>
+
+<style scoped>
+.message {
+  font-size: 14px;
+  font-weight: 400;
+  margin-top: auto;
+  padding-top: 30px;
+  color: #979db1;
+}
+</style>
\ No newline at end of file
diff --git a/main/manager-web/src/components/HeaderBar.vue b/main/manager-web/src/components/HeaderBar.vue
index acc0e981..00400e30 100644
--- a/main/manager-web/src/components/HeaderBar.vue
+++ b/main/manager-web/src/components/HeaderBar.vue
@@ -1,32 +1,40 @@
 <template>
   <el-header class="header">
-    <div style="display: flex;justify-content: space-between;margin-top: 6px; ">
+    <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: 42px;height: 42px;" />
-        <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: 12px;height: 10px;" />
-          智能体管理
+        <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;"/>
+          智能体
         </div>
-        <div class="console">
-          <i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;" />
+        <div class="menu-btn">
+          <i class="el-icon-s-grid" style="font-size: 10px;color: #979db1;"/>
           控制台
         </div>
-        <div class="equipment-management2">
+        <div class="menu-btn">
           设备管理
-          <img src="@/assets/home/close.png" alt="" style="width: 6px;height: 6px;" />
+          <img alt="" src="@/assets/home/close.png" style="width: 6px;height: 6px;"/>
         </div>
       </div>
       <div style="display: flex;align-items: center;gap: 7px; margin-top: 2px;">
         <div class="serach-box">
-          <el-input placeholder="输入名称搜索.." v-model="serach" style="border: none; background: transparent;" @keyup.enter.native="handleSearch" />
-          <img src="@/assets/home/search.png" alt=""
-               style="width: 14px;height: 14px;margin-right: 11px;cursor: pointer;" @click="handleSearch" />
-        </div>
-        <img src="@/assets/home/avatar.png" alt="" style="width: 21px;height: 21px;" />
-        <div class="user-info">
-           {{ userInfo.mobile || '加载中...' }}
+          <el-input v-model="serach" placeholder="输入名称搜索.." style="border: none; background: transparent;"
+                    @keyup.enter.native="handleSearch"/>
+          <img alt="" src="@/assets/home/search.png"
+               style="width: 14px;height: 14px;margin-right: 11px;cursor: pointer;" @click="handleSearch"/>
         </div>
+        <img alt="" src="@/assets/home/avatar.png" style="width: 21px;height: 21px;"/>
+        <el-dropdown trigger="click">
+          <span class="el-dropdown-link">
+             {{ userInfo.username || '加载中...' }}<i class="el-icon-arrow-down el-icon--right"></i>
+          </span>
+          <el-dropdown-menu slot="dropdown">
+            <el-dropdown-item icon="el-icon-user" @click.native="">个人中心</el-dropdown-item>
+            <el-dropdown-item icon="el-icon-key" @click.native="">修改密码</el-dropdown-item>
+            <el-dropdown-item icon="el-icon-connection" @click.native="">退出登录</el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
       </div>
     </div>
   </el-header>
@@ -43,6 +51,7 @@ export default {
     return {
       serach: '',
       userInfo: {
+        username: '',
         mobile: ''
       }
     }
@@ -53,7 +62,7 @@ export default {
   methods: {
     goHome() {
       // 跳转到首页
-      this.$router.push('/')
+      this.$router.push('/home')
     },
     // 获取用户信息
     fetchUserInfo() {
@@ -71,7 +80,7 @@ export default {
         // 当搜索内容为空时，显示原始完整列表
         filteredDevices = this.$parent.originalDevices;
       } else {
-         // 过滤逻辑
+        // 过滤逻辑
         filteredDevices = this.devices.filter(device => {
           return device.agentName.includes(searchValue) ||
               device.ttsModelName.includes(searchValue) ||
@@ -88,38 +97,26 @@ export default {
 </script>
 
 <style scoped>
-.equipment-management,
-.equipment-management2 {
+.ml-20 {
+  margin-left: 20px;
+}
+
+.menu-btn {
+  padding: 8px 14px;
+  border-radius: 8px;
+  background: #fff;
+  color: #979db1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+  font-weight: 500;
+  font-size: 14px;
   cursor: pointer;
 }
-
-.equipment-management {
-  width: 82px;
-  height: 24px;
-  border-radius: 12px;
+.menu-btn.active {
   background: #5778ff;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 7px;
-  font-weight: 500;
   color: #fff;
-  font-size: 10px;
-}
-
-.equipment-management2 {
-  width: 87px;
-  height: 22px;
-  border-radius: 11px;
-  background: #fff;
-  display: flex;
-  justify-content: center;
-  font-size: 9px;
-  font-weight: 400;
-  gap: 7px;
-  color: #3d4566;
-  margin-left: 2px;
-  align-items: center;
 }
 
 .header {
@@ -150,7 +147,6 @@ export default {
   padding-left: 12px;
 }
 
-
 .user-info {
   font-weight: 600;
   font-size: 12px;
@@ -158,18 +154,14 @@ export default {
   text-align: left;
   color: #3d4566;
 }
-.console {
-  width: 90px;
-  height: 22px;
-  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: 9px;
-  color: #979db1;
-  font-weight: 400;
-  gap: 7px;
-  margin-left: 15px;
+
+.el-dropdown-link {
+  cursor: pointer;
+  color: #5778ff;
 }
+
+.el-icon-arrow-down {
+  font-size: 12px;
+}
+
 </style>
\ No newline at end of file
diff --git a/main/manager-web/src/router/index.js b/main/manager-web/src/router/index.js
index d3add00a..6ceb086f 100644
--- a/main/manager-web/src/router/index.js
+++ b/main/manager-web/src/router/index.js
@@ -11,6 +11,13 @@ const routes = [
       return import('../views/login.vue')
     }
   },
+  {
+    path: '/device',
+    name: 'RoleConfig',
+    component: function () {
+      return import('../views/device.vue')
+    }
+  },
   {
     path: '/role-config',
     name: 'RoleConfig',
diff --git a/main/manager-web/src/views/device.vue b/main/manager-web/src/views/device.vue
new file mode 100644
index 00000000..05daf0a1
--- /dev/null
+++ b/main/manager-web/src/views/device.vue
@@ -0,0 +1,251 @@
+<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>
+  </div>
+
+</template>
+
+<script>
+import {getUUID, goToPage, showDanger, showSuccess} from '@/utils'
+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 },
+  data() {
+    return {
+      addDeviceDialogVisible: false,
+      devices: [],
+      agentId: this.$route.query.agentId
+    }
+  },
+  mounted() {
+    this.getDeviceList();
+  },
+  methods: {
+    // 获取设备列表
+    getDeviceList() {
+      Api.device.getDeviceList(this.agentId, ({data}) => {
+        if (data.code === 0) {
+          this.devices = data.data[0].list.map((item)=>{item.isEdit=false;return item;})
+        } else {
+          showDanger(data.msg)
+        }
+      })
+    },
+    showAddDialog() {
+      this.addDeviceDialogVisible = true
+    },
+    goToRoleConfig() {
+      // 点击配置角色后跳转到角色配置页
+      this.$router.push('/role-config')
+    },
+    handleDeviceAdded(deviceCode) {
+      // 根据需要处理添加设备后逻辑，比如刷新设备列表等
+      console.log('设备验证码：', deviceCode)
+    },
+    handleEdit(row) {
+      row.isEdit=true
+    },
+    handleEditSave(row) {
+      row.isEdit=false
+    },
+  }
+}
+</script>
+
+<style scoped>
+.breadcrumbs{
+  padding: 10px 0 0 5px;
+}
+
+.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;
+  /* 兼容老版本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;
+  }
+}
+
+.add-device-btn {
+  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;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/main/manager-web/src/views/home.vue b/main/manager-web/src/views/home.vue
index 0c914e77..80cfee1a 100644
--- a/main/manager-web/src/views/home.vue
+++ b/main/manager-web/src/views/home.vue
@@ -5,8 +5,8 @@
       <el-main style="padding: 20px;display: flex;flex-direction: column;">
         <div>
           <!-- 首页内容 -->
-          <div class="add-device">
-            <div class="add-device-bg">
+          <div class="add-agent">
+            <div class="add-agent-bg">
               <div class="hellow-text" style="margin-top: 30px;">
                 您好，小智
               </div>
@@ -19,7 +19,7 @@
               <div class="hi-hint">
                 Hello, Let's have a wonderful day!
               </div>
-              <div class="add-device-btn" @click="showAddDialog">
+              <div class="add-agent-btn" @click="showAddDialog">
                 <div class="left-add">
                   添加智能体
                 </div>
@@ -30,74 +30,107 @@
               </div>
             </div>
           </div>
+          <!-- 面包屑-->
+          <div class="breadcrumbs">
+            <el-breadcrumb separator="/">
+              <el-breadcrumb-item>控制台</el-breadcrumb-item>
+              <el-breadcrumb-item>智能体</el-breadcrumb-item>
+            </el-breadcrumb>
+          </div>
+          <!-- 智能体列表-->
           <div style="display: flex;flex-wrap: wrap;margin-top: 20px;gap: 20px;justify-content: flex-start;box-sizing: border-box;">
-            <DeviceItem v-for="(item,index) in devices" :key="index" :device="item" @configure="goToRoleConfig" @deviceManage="handleDeviceManage" />
+            <AgentItem v-for="(item,index) in agents" :key="index" :agent="item" @configure="goToRoleConfig" @device="goToDevice" @del="handleAgentDel" />
           </div>
         </div>
-        <div style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 30px;color: #979db1;">
-          ©2025 xiaozhi-esp32-server
-        </div>
-        <AddWisdomBodyDialog :visible.sync="addDeviceDialogVisible" @confirm="handleWisdomBodyAdded" />
+        <!-- 底部 -->
+        <Footer :visible="true" />
+        <!-- 添加设备对话框 -->
+        <AddAgentDialog :visible.sync="addAgentDialogVisible" @added="handleAgentAdded" />
       </el-main>
   </div>
 
 </template>
 
 <script>
-import DeviceItem from '@/components/DeviceItem.vue'
-import AddWisdomBodyDialog from '@/components/AddWisdomBodyDialog.vue'
+import {getUUID, goToPage, showDanger, showSuccess} from '@/utils'
+import Api from '@/apis/api';
+import AgentItem from '@/components/AgentItem.vue'
+import AddAgentDialog from '@/components/AddAgentDialog.vue'
 import HeaderBar from '@/components/HeaderBar.vue'
-
+import Footer from '@/components/Footer.vue'
 export default {
   name: 'HomePage',
-  components: { DeviceItem, AddWisdomBodyDialog, HeaderBar },
+  components: { AgentItem, AddAgentDialog, HeaderBar, Footer },
   data() {
     return {
-      addDeviceDialogVisible: false,
-      devices: [],
-      originalDevices: [],
+      addAgentDialogVisible: false,
+      agents: [],
     }
   },
 
   mounted() {
+    // 获取智能体列表
     this.fetchAgentList();
   },
 
   methods: {
-    showAddDialog() {
-      this.addDeviceDialogVisible = true
-    },
-    goToRoleConfig() {
-      // 点击配置角色后跳转到角色配置页
-      this.$router.push('/role-config')
-    },
-    handleWisdomBodyAdded(res) {
-      console.log('新增智能体响应：', res);
-      this.fetchAgentList();
-      this.addDeviceDialogVisible = false;
-    },
-    handleDeviceManage() {
-      this.$router.push('/device-management');
-    },
-    // 获取智能体列表
     fetchAgentList() {
-      import('@/apis/module/user').then(({ default: userApi }) => {
-        userApi.getAgentList(({data}) => {
-          this.originalDevices = data.data;
-          this.devices = data.data;
-        });
-      });
+      // 获取智能体列表
+      Api.agent.getAgentList(({data}) => {
+        if (data.code === 0) {
+          this.agents = data.data
+        } else {
+          showDanger(data.msg)
+        }
+      })
+    },
+    showAddDialog() {
+      this.addAgentDialogVisible = true
+    },
+    goToRoleConfig(agentId, agentName) {
+      // 点击配置角色后跳转到角色配置页
+      this.$router.push({path:'/role-config', query: {agentId: agentId, agentName: agentName}})
+    },
+
+    goToDevice(agentId) {
+      // 点击设备后跳转到设备页
+      this.$router.push({path:'/device', query: {agentId: agentId}})
+    },
+    handleAgentAdded(agentName) {
+      // 添加智能体
+      Api.agent.addAgent(agentName, ({data}) => {
+        if (data.status === 200) {
+          showSuccess('添加成功')
+          this.getAgentList()
+        } else {
+          showDanger(data.msg)
+        }
+      })
+    },
+    handleAgentDel(agetnId){
+      // 删除智能体
+      Api.agent.delAgent(agetnId, (data) => {
+        if (data.status === 200) {
+          showSuccess('删除成功')
+          this.getAgentList()
+        } else {
+          showDanger(data.msg)
+        }
+      })
     },
     // 搜索更新智能体列表
     handleSearchResult(filteredList) {
       this.devices = filteredList; // 更新设备列表
     }
-
   }
 }
 </script>
 
 <style scoped>
+.breadcrumbs{
+  padding: 10px 0 0 5px;
+}
+
 .welcome {
   min-width: 900px;
   min-height: 506px;
@@ -114,7 +147,7 @@ export default {
   -o-background-size: cover;
   /* 兼容老版本Opera浏览器 */
 }
-.add-device {
+.add-agent {
   height: 195px;
   border-radius: 15px;
   position: relative;
@@ -126,7 +159,7 @@ export default {
       #d3d3fe 100%
   );
 }
-.add-device-bg {
+.add-agent-bg {
   width: 100%;
   height: 100%;
   text-align: left;
@@ -159,7 +192,7 @@ export default {
   }
 }
 
-.add-device-btn {
+.add-agent-btn {
   display: flex;
   align-items: center;
   margin-left: 75px;
diff --git a/main/manager-web/src/views/roleConfig.vue b/main/manager-web/src/views/roleConfig.vue
index 77ecc85f..36ae7ecc 100644
--- a/main/manager-web/src/views/roleConfig.vue
+++ b/main/manager-web/src/views/roleConfig.vue
@@ -2,34 +2,40 @@
   <div class="welcome">
     <!-- 公共头部 -->
     <HeaderBar/>
-    <el-main style="padding: 16px;display: flex;flex-direction: column;">
-      <div style="border-radius: 16px;background: #fafcfe; border: 1px solid #e8f0ff;">
+    <!-- 面包屑-->
+    <div class="breadcrumbs" style="padding: 20px;">
+      <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-main style="padding: 16px;display: flex;flex-direction: column;align-items: center;">
+      <div style="border-radius: 16px;background: #fafcfe; border: 1px solid #e8f0ff;max-width: 800px;">
         <div
             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: 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: 19px;height: 19px;"/>
           </div>
-          {{ deviceMac }}
+          {{ agentName }} ({{ agentId }})
         </div>
         <div style="height: 1px;background: #e8f0ff;"/>
-        <el-form ref="form" :model="form" label-width="72px">
-          <div style="padding: 16px 24px;max-width: 792px;">
-            <el-form-item label="助手昵称：">
-              <div class="input-46" style="width: 100%; max-width: 412px;">
-                <el-input v-model="form.name"/>
-              </div>
-            </el-form-item>
+        <div style="padding: 16px 24px;max-width: 792px;">
+        <el-form ref="form" :model="form" label-width="100px">
             <el-form-item label="角色模版：">
-              <div style="display: flex;gap: 8px;">
+              <div style="display: flex;gap: 8px;flex-wrap: wrap;">
                 <div v-for="template in templates" :key="template" class="template-item" @click="selectTemplate(template)">
                   {{ template }}
                 </div>
               </div>
             </el-form-item>
+            <el-form-item label="助手昵称：">
+              <el-input v-model="form.name"/>
+            </el-form-item>
             <el-form-item label="角色音色：">
               <div style="display: flex;gap: 8px;align-items: center;">
-                <div class="input-46" style="flex:1.4;">
+                <div style="flex:1;">
                   <el-select v-model="form.timbre" placeholder="请选择" style="width: 100%;">
                     <el-option v-for="item in options" :key="item.value" :label="item.label"
                                :value="item.value">
@@ -43,29 +49,23 @@
               </div>
             </el-form-item>
             <el-form-item label="角色介绍：">
-              <div class="textarea-box">
-                <el-input type="textarea" rows="5" resize="none" placeholder="请输入内容"
-                          v-model="form.introduction" maxlength="2000" show-word-limit/>
-              </div>
+              <el-input type="textarea" rows="5" resize="none" placeholder="请输入内容" v-model="form.introduction" maxlength="2000" show-word-limit/>
             </el-form-item>
             <el-form-item label="记忆体：">
-              <div class="textarea-box">
-                <el-input type="textarea" rows="5" resize="none" placeholder="请输入内容"
-                          v-model="form.prompt" maxlength="1000"/>
-                <div class="prompt-bottom">
-                  <div style="display: flex;gap: 8px;align-items: center;">
-                    <div style="color: #979db1;font-size: 11px;">当前记忆（每次对话后重新生成）</div>
-                    <div class="clear-btn">
-                      <i class="el-icon-delete-solid" style="font-size: 11px;"/>
-                      清除
-                    </div>
+              <el-input type="textarea" rows="5" resize="none" placeholder="请输入内容" v-model="form.prompt" maxlength="1000" show-word-limit/>
+                <div style="display: flex;gap: 8px;align-items: center;">
+                  <div style="color: #979db1;font-size: 11px;">当前记忆（每次对话后重新生成）</div>
+                  <div class="clear-btn">
+                    <i class="el-icon-delete-solid" style="font-size: 11px;"/>
+                    清除
                   </div>
-                  <div style="color: #979db1;font-size:11px;">{{ form.prompt.length }}/1000</div>
                 </div>
-              </div>
             </el-form-item>
-            <el-form-item v-for="model in models" :key="model.label" :label="model.label" class="model-item">
-              <el-select v-model="form.model[model.key]" filterable placeholder="请选择" class="select-field">
+            <el-form-item v-for="model in models" :key="model.label" :label="model.label">
+              <template slot="label">
+                <div style="line-height: 20px;">{{model.label}}</div>
+              </template>
+              <el-select v-model="form.model[model.key]" filterable placeholder="请选择" style="width: 100%;">
                 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"/>
               </el-select>
             </el-form-item>
@@ -74,8 +74,8 @@
                 实时”，其他模型通常会增加约1秒的延迟。改变模型后，建议清空记忆体，以免影响体验。
               </div>
             </el-form-item>
-          </div>
         </el-form>
+      </div>
         <div style="display: flex;padding: 16px;gap: 8px;align-items: center;">
           <div class="save-btn" @click="saveConfig">
             保存配置
@@ -89,22 +89,22 @@
           </div>
         </div>
       </div>
-      <div style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 24px;color: #979db1;">
-        ©2025 xiaozhi-esp32-server
-      </div>
     </el-main>
+    <Footer :visible="true" />
   </div>
 </template>
 
 <script>
 import HeaderBar from "@/components/HeaderBar.vue";
+import Footer from "@/components/Footer.vue";
 
 export default {
   name: 'RoleConfigPage',
-  components: {HeaderBar},
+  components: {HeaderBar,Footer},
   data() {
     return {
-      deviceMac: 'CC:ba:97:11:a6:ac',
+      agentId: this.$route.query.agentId,
+      agentName: this.$route.query.agentName,
       form: {
         name: "",
         timbre: "",
@@ -136,6 +136,11 @@ export default {
     }
   },
   methods: {
+    handleGetConfig(){
+      api.agent.getAgentConfig(this.agentId, ({data}) => {
+        this.form = data
+      })
+    },
     saveConfig() {
       // 此处写保存配置逻辑
       this.$message.success('配置已保存')
@@ -168,6 +173,10 @@ export default {
 </script>
 
 <style scoped>
+.breadcrumbs{
+  padding: 20px 0 0 5px;
+}
+
 .welcome {
   min-width: 900px;
   min-height: 506px;
@@ -185,23 +194,6 @@ export default {
   /* 兼容老版本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: 37px;
@@ -230,13 +222,11 @@ export default {
 }
 
 .template-item {
-  height: 37px;
-  width: 76px;
-  border-radius: 8px;
+  padding: 0 20px;
+  border-radius: 6px;
   background: #e6ebff;
-  line-height: 37px;
-  font-weight: 400;
-  font-size: 11px;
+  font-weight: 500;
+  font-size: 14px;
   text-align: center;
   color: #5778ff;
   cursor: pointer;
@@ -247,21 +237,6 @@ export default {
   background-color: #d0d8ff;
 }
 
-.prompt-bottom {
-  margin-bottom: 4px;
-  display: flex;
-  justify-content: space-between;
-  padding: 0 16px;
-  align-items: center;
-}
-
-.input-46 {
-  border: 1px solid #e4e6ef;
-  background: #f6f8fb;
-  border-radius: 8px;
-  height: 36px !important;
-}
-
 .save-btn,
 .reset-btn {
   width: 112px;
@@ -284,11 +259,5 @@ export default {
   background: #e6ebff;
   color: #5778ff;
 }
-
-.textarea-box {
-  border: 1px solid #e4e6ef;
-  border-radius: 8px;
-  background: #f6f8fb;
-}
 </style>