From 1673ad7e70954151fbcc019ae65119aa004b7006 Mon Sep 17 00:00:00 2001
From: Ran_Chen <1908198662@qq.com>
Date: Thu, 3 Apr 2025 17:07:13 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BC=98=E5=8C=96=E6=99=BA=E8=83=BD=E4=BD=93?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=B8=83=E5=B1=80=EF=BC=8C=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?HeaderBar=E7=9A=84=E6=90=9C=E7=B4=A2=E5=8A=9F=E8=83=BD=EF=BC=8C?=
 =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=A1=AE=E8=AE=A4=E7=9A=84=E5=9B=9E=E8=BD=A6?=
 =?UTF-8?q?=E6=8C=89=E9=94=AE=E7=BB=91=E5=AE=9A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/AddDeviceDialog.vue        |  2 +-
 .../src/components/AddWisdomBodyDialog.vue    | 20 ++++--
 main/manager-web/src/components/HeaderBar.vue | 27 +++----
 main/manager-web/src/views/home.vue           | 71 +++++++++++++++----
 4 files changed, 89 insertions(+), 31 deletions(-)

diff --git a/main/manager-web/src/components/AddDeviceDialog.vue b/main/manager-web/src/components/AddDeviceDialog.vue
index 11189df7..fa8e3ab7 100644
--- a/main/manager-web/src/components/AddDeviceDialog.vue
+++ b/main/manager-web/src/components/AddDeviceDialog.vue
@@ -13,7 +13,7 @@
         <span style="font-size: 11px"> 验证码：</span>
       </div>
       <div class="input-46" style="margin-top: 12px;">
-        <el-input placeholder="请输入设备播报的6位数验证码.." v-model="deviceCode" />
+        <el-input placeholder="请输入设备播报的6位数验证码.." v-model="deviceCode" @keyup.enter.native="confirm"/>
       </div>
     </div>
     <div style="display: flex;margin: 15px 15px;gap: 7px;">
diff --git a/main/manager-web/src/components/AddWisdomBodyDialog.vue b/main/manager-web/src/components/AddWisdomBodyDialog.vue
index b0ace54f..c307effd 100644
--- a/main/manager-web/src/components/AddWisdomBodyDialog.vue
+++ b/main/manager-web/src/components/AddWisdomBodyDialog.vue
@@ -1,5 +1,5 @@
 <template>
-  <el-dialog :visible.sync="visible" width="400px" center>
+  <el-dialog :visible.sync="visible" width="400px" center @open="handleOpen">
     <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 loading="lazy" src="@/assets/home/equipment.png" alt="" style="width: 18px;height: 15px;" />
@@ -12,7 +12,11 @@
         <div style="color: red;display: inline-block;">*</div> 智慧体名称：
       </div>
       <div class="input-46" style="margin-top: 12px;">
-        <el-input placeholder="请输入智能体名称.." v-model="wisdomBodyName" />
+        <el-input
+          ref="inputRef"
+          placeholder="请输入智能体名称.."
+          v-model="wisdomBodyName"
+          @keyup.enter.native="confirm" />
       </div>
     </div>
     <div style="display: flex;margin: 15px 15px;gap: 7px;">
@@ -31,16 +35,23 @@
 <script>
 import userApi from '@/apis/module/agent';
 
-
 export default {
   name: 'AddWisdomBodyDialog',
   props: {
     visible: { type: Boolean, required: true }
   },
   data() {
-    return { wisdomBodyName: "" }
+    return {
+      wisdomBodyName: "",
+      inputRef: null
+    }
   },
   methods: {
+    handleOpen() {
+      this.$nextTick(() => {
+        this.$refs.inputRef.focus();
+      });
+    },
     confirm() {
       if (!this.wisdomBodyName.trim()) {
         this.$message.error('请输入智能体名称');
@@ -65,7 +76,6 @@ export default {
 </script>
 
 <style scoped>
-
 .input-46 {
   border: 1px solid #e4e6ef;
   background: #f6f8fb;
diff --git a/main/manager-web/src/components/HeaderBar.vue b/main/manager-web/src/components/HeaderBar.vue
index df5dbc95..f926f0c2 100644
--- a/main/manager-web/src/components/HeaderBar.vue
+++ b/main/manager-web/src/components/HeaderBar.vue
@@ -109,23 +109,26 @@ export default {
     // 处理搜索
     handleSearch() {
       const searchValue = this.search.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-reset');
+        return;
       }
 
-      this.$emit('search-result', filteredDevices);
+      try {
+        // 创建不区分大小写的正则表达式
+        const regex = new RegExp(searchValue, 'i');
+        // 触发搜索事件，将正则表达式传递给父组件
+        this.$emit('search', regex);
+      } catch (error) {
+        console.error('正则表达式创建失败:', error);
+        this.$message.error({
+          message: '搜索关键词格式不正确',
+          showClose: true
+        });
+      }
     },
-
     // 显示修改密码弹窗
     showChangePasswordDialog() {
       this.isChangePasswordDialogVisible = true;
diff --git a/main/manager-web/src/views/home.vue b/main/manager-web/src/views/home.vue
index 09a2f947..59699d3d 100644
--- a/main/manager-web/src/views/home.vue
+++ b/main/manager-web/src/views/home.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="welcome">
       <!-- 公共头部 -->
-      <HeaderBar :devices="devices" @search-result="handleSearchResult" />
+      <HeaderBar :devices="devices" @search="handleSearch" @search-reset="handleSearchReset"  />
       <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: flex-start;box-sizing: border-box;">
+          <div class="device-list-container">
             <DeviceItem v-for="(item,index) in devices" :key="index" :device="item"
                         @configure="goToRoleConfig"
                         @deviceManage="handleDeviceManage"
@@ -38,7 +38,7 @@
             />
           </div>
         </div>
-        <div style="font-size: 12px;font-weight: 400;margin-top: auto;padding-top: 30px;color: #979db1;">
+        <div class="footer">
           ©2025 xiaozhi-esp32-server
         </div>
         <AddWisdomBodyDialog :visible.sync="addDeviceDialogVisible" @confirm="handleWisdomBodyAdded" />
@@ -60,6 +60,8 @@ export default {
       addDeviceDialogVisible: false,
       devices: [],
       originalDevices: [],
+      isSearching: false,
+      searchRegex: null
     }
   },
 
@@ -83,22 +85,42 @@ export default {
     handleDeviceManage() {
       this.$router.push('/device-management');
     },
-    // 获取智能体列表
-    fetchAgentList() {
-      import('@/apis/module/agent').then(({ default: userApi }) => {
-        userApi.getAgentList(({data}) => {
-        this.originalDevices = data.data.map(item => ({
-          ...item,
-          agentId: item.id // 字段映射
-        }));
-        this.devices = this.originalDevices;
-        });
+    handleSearch(regex) {
+      this.isSearching = true;
+      this.searchRegex = regex;
+      this.applySearchFilter();
+    },
+    handleSearchReset() {
+      this.isSearching = false;
+      this.searchRegex = null;
+      this.devices = [...this.originalDevices];
+    },
+    applySearchFilter() {
+      if (!this.isSearching || !this.searchRegex) {
+        this.devices = [...this.originalDevices];
+        return;
+      }
+
+      this.devices = this.originalDevices.filter(device => {
+        return this.searchRegex.test(device.agentName);
       });
     },
     // 搜索更新智能体列表
     handleSearchResult(filteredList) {
       this.devices = filteredList; // 更新设备列表
     },
+    // 获取智能体列表
+    fetchAgentList() {
+      import('@/apis/module/agent').then(({ default: userApi }) => {
+        userApi.getAgentList(({data}) => {
+          this.originalDevices = data.data.map(item => ({
+            ...item,
+            agentId: item.id // 字段映射
+          }));
+          this.handleSearchReset(); // 重置搜索状态
+        });
+      });
+    },
     // 删除智能体
     handleDeleteAgent(agentId) {
       this.$confirm('确定要删除该智能体吗？', '提示', {
@@ -220,4 +242,27 @@ export default {
     align-items: center;
   }
 }
+
+.device-list-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
+  gap: 30px;
+  padding: 30px 0;
+}
+
+/* 在 DeviceItem.vue 的样式中 */
+.device-item {
+  margin: 0 !important; /* 避免冲突 */
+  width: auto !important;
+}
+
+.footer {
+  font-size: 12px;
+  font-weight: 400;
+  margin-top: auto;
+  padding-top: 30px;
+  color: #979db1;
+  text-align: center; /* 居中显示 */
+}
+
 </style>
\ No newline at end of file