完成前端获取用户信息、获取智能体列表，搜索功能开发

main/manager-web/src/apis/module/user.js

@@ -18,20 +18,6 @@ export default {
                 })
             }).send()
     },
-    // 获取用户信息
-    getUserInfo(callback) {
-        RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/info`)
-            .method('GET')
-            .success((res) => {
-                RequestService.clearRequestTime()
-                callback(res)
-            })
-            .fail(() => {
-                RequestService.reAjaxFun(() => {
-                    this.getUserInfo()
-                })
-            }).send()
-    },
     // 获取设备信息
     getHomeList(callback) {
         RequestService.sendRequest().url(`${getServiceUrl()}/api/v1/user/device/bind`)
@@ -174,4 +160,35 @@ export default {
             }).send();
     },
 
+       // 获取智能体列表
+        getAgentList(callback) {
+            RequestService.sendRequest()
+                .url(`${getServiceUrl()}/api/v1/user/agent`)
+                .method('GET')
+                .success((res) => {
+                    RequestService.clearRequestTime();
+                    callback(res);
+                })
+                .fail(() => {
+                    RequestService.reAjaxFun(() => {
+                        this.getAgentList(callback);
+                    });
+                }).send();
+        },
+        getUserInfo(callback) {
+            RequestService.sendRequest()
+                .url(`${getServiceUrl()}/api/v1/user/info`)
+                .method('GET')
+                .success((res) => {
+                    RequestService.clearRequestTime()
+                    callback(res)
+                })
+                .fail((err) => {
+                    console.error('接口请求失败:', err)
+                    RequestService.reAjaxFun(() => {
+                        this.getUserInfo(callback)
+                    })
+                }).send()
+        },
+
 }

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

@@ -2,7 +2,7 @@
   <div class="device-item">
     <div style="display: flex;justify-content: space-between;">
       <div style="font-weight: 700;font-size: 24px;text-align: left;color: #3d4566;">
-        {{ device.mac }}
+         {{ device.agentName }}
       </div>
       <div>
         <img src="@/assets/home/delete.png" alt=""
@@ -11,10 +11,10 @@
       </div>
     </div>
     <div class="device-name">
-      设备型号：{{ device.model }}
+      设备型号：{{ device.ttsModelName }}
     </div>
     <div class="device-name">
-      音色模型：{{ device.voiceModel }}
+      音色模型：{{ device.ttsVoiceName }}
     </div>
     <div style="display: flex;gap: 10px;align-items: center;">
       <div class="settings-btn" @click="$emit('configure')">
@@ -31,7 +31,7 @@
       </div>
     </div>
     <div class="version-info">
-      <div>最近对话：{{ device.lastConversation }}</div>
+      <div>最近对话：{{ device.lastConnectedAt }}</div>
     </div>
   </div>
 </template>

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

@@ -19,13 +19,13 @@
       </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;" />
+          <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;" />
+               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">
-          158 3632 4642
+           {{ userInfo.mobile || '加载中...' }}
         </div>
       </div>
     </div>
@@ -33,17 +33,57 @@
 </template>
 
 <script>
+import userApi from '@/apis/module/user'
+
+
 export default {
   name: 'HeaderBar',
+  props: ['devices'],  // 接收父组件设备列表
   data() {
-    return { serach: '' }
+    return {
+      serach: '',
+      userInfo: {
+        mobile: ''
+      }
+    }
+  },
+  mounted() {
+    this.fetchUserInfo()
   },
   methods: {
     goHome() {
       // 跳转到首页
       this.$router.push('/')
+    },
+    // 获取用户信息
+    fetchUserInfo() {
+      userApi.getUserInfo(({data}) => {
+        this.userInfo = data.data
+      })
+    },
+
+     // 处理搜索
+    handleSearch() {
+      const searchValue = this.serach.trim();
+      let filteredDevices;
+
+      if (!searchValue) {
+        // 当搜索内容为空时，显示原始完整列表
+        filteredDevices = this.$parent.originalDevices;
+      } else {
+         // 过滤逻辑
+        filteredDevices = this.devices.filter(device => {
+          return device.agentName.includes(searchValue) ||
+              device.ttsModelName.includes(searchValue) ||
+              device.ttsVoiceName.includes(searchValue);
+        });
+      }
+
+      this.$emit('search-result', filteredDevices);
     }
+
   }
+
 }
 </script>
 

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

@@ -1,7 +1,7 @@
 <template>
   <div class="welcome">
       <!-- 公共头部 -->
-      <HeaderBar />
+      <HeaderBar :devices="devices" @search-result="handleSearchResult" />
       <el-main style="padding: 20px;display: flex;flex-direction: column;">
         <div>
           <!-- 首页内容 -->
@@ -30,7 +30,7 @@
               </div>
             </div>
           </div>
-          <div style="display: flex;flex-wrap: wrap;margin-top: 20px;gap: 20px;justify-content: space-between;box-sizing: border-box;">
+          <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" />
           </div>
         </div>
@@ -47,22 +47,22 @@
 import DeviceItem from '@/components/DeviceItem.vue'
 import AddWisdomBodyDialog from '@/components/AddWisdomBodyDialog.vue'
 import HeaderBar from '@/components/HeaderBar.vue'
+
 export default {
   name: 'HomePage',
   components: { DeviceItem, AddWisdomBodyDialog, HeaderBar },
   data() {
     return {
       addDeviceDialogVisible: false,
-      // 此处模拟设备列表（10条数据）
+      devices: [],
-      devices: Array.from({ length: 10 }, (_, i) => ({
+      originalDevices: [],
-        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天前',
-      }))
     }
   },
+
+  mounted() {
+    this.fetchAgentList();
+  },
+
   methods: {
     showAddDialog() {
       this.addDeviceDialogVisible = true
@@ -78,6 +78,20 @@ export default {
     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;
+        });
+      });
+    },
+    // 搜索更新智能体列表
+    handleSearchResult(filteredList) {
+      this.devices = filteredList; // 更新设备列表
+    }
+
   }
 }
 </script>