From 8d023ff11f1026e7054dddb249ee452309689938 Mon Sep 17 00:00:00 2001
From: zhang1106 <849185023@qq.com>
Date: Mon, 29 Dec 2025 16:29:10 +0800
Subject: [PATCH] =?UTF-8?q?fix(=E8=AE=BE=E5=A4=87=E7=AE=A1=E7=90=86):=20?=
 =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E6=89=B9=E9=87=8F=E5=88=A0=E9=99=A4=E5=90=8E?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E5=88=B7=E6=96=B0=E9=97=AE=E9=A2=98=E5=B9=B6?=
 =?UTF-8?q?=E4=BC=98=E5=8C=96=E8=A1=A8=E6=A0=BC=E5=B8=83=E5=B1=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

添加forceRefresh参数强制刷新设备数据，解决批量删除后缓存未更新问题
优化表格布局样式，添加flex布局确保表格正确显示和滚动
---
 frontend/src/pages/DeviceManagement.jsx | 32 ++++++++++++++++++++-----
 1 file changed, 26 insertions(+), 6 deletions(-)

diff --git a/frontend/src/pages/DeviceManagement.jsx b/frontend/src/pages/DeviceManagement.jsx
index b0a32d1..46fded8 100644
--- a/frontend/src/pages/DeviceManagement.jsx
+++ b/frontend/src/pages/DeviceManagement.jsx
@@ -380,12 +380,12 @@ function DeviceManagement() {
   }, [allDevices, status, type, debouncedKeyword, searchDevices]);
 
   // 获取所有设备（支持搜索、筛选和分页）- 使用缓存和useCallback
-  const fetchDevices = useCallback(async (page = 1, pageSize = 10) => {
+  const fetchDevices = useCallback(async (page = 1, pageSize = 10, forceRefresh = false) => {
     try {
       setLoading(true);
       
-      // 先获取所有设备数据（使用缓存）
-      const allData = await fetchAllDevices();
+      // 先获取所有设备数据（使用缓存，批量删除后强制刷新）
+      const allData = await fetchAllDevices(forceRefresh);
       setAllDevices(allData);
       
       // 更新分页信息（筛选后的数据会通过useMemo自动更新）
@@ -655,7 +655,7 @@ function DeviceManagement() {
           message.success(response.data.message || '批量删除成功');
           setSelectedDevices([]);
           setSelectAll(false);
-          fetchDevices();
+          fetchDevices(1, 10, true);
         } catch (error) {
           message.error('批量删除失败');
           console.error('批量删除设备失败:', error);
@@ -1285,6 +1285,12 @@ function DeviceManagement() {
     <div style={{ padding: '24px' }}>
       <style>{`
         /* 表格自适应换行样式 */
+        .device-table-wrapper {
+          display: flex;
+          flex-direction: column;
+          min-height: 0;
+        }
+        
         .device-table-wrapper .ant-table {
           width: 100% !important;
           max-width: 100% !important;
@@ -1293,6 +1299,8 @@ function DeviceManagement() {
         .device-table-wrapper .ant-table-container {
           width: 100% !important;
           max-width: 100% !important;
+          display: flex;
+          flex-direction: column;
         }
         
         .device-table-wrapper .ant-table-content {
@@ -1301,6 +1309,10 @@ function DeviceManagement() {
           overflow-x: hidden !important;
         }
         
+        .device-table-wrapper .ant-table-thead {
+          flex-shrink: 0;
+        }
+        
         .device-table-wrapper .ant-table-thead > tr > th {
           white-space: normal !important;
           word-break: break-word !important;
@@ -1310,6 +1322,11 @@ function DeviceManagement() {
           padding: 12px 8px !important;
         }
         
+        .device-table-wrapper .ant-table-tbody {
+          flex-shrink: 1;
+          min-height: 0;
+        }
+        
         .device-table-wrapper .ant-table-tbody > tr > td {
           white-space: normal !important;
           word-break: break-word !important;
@@ -1568,8 +1585,9 @@ function DeviceManagement() {
             <p>暂无设备数据</p>
           </div>
         )}
-        <div className="device-table-wrapper">
-          <Table
+        {filteredDevicesMemo.length > 0 && (
+          <div className="device-table-wrapper">
+            <Table
             columns={columns}
             dataSource={filteredDevicesMemo}
             rowKey="deviceId"
@@ -1585,6 +1603,7 @@ function DeviceManagement() {
             }}
             style={{ width: '100%', maxWidth: '100%' }}
             size="middle"
+            showHeader={filteredDevicesMemo.length > 0}
             rowSelection={{
               selectedRowKeys: selectedDevices,
               onChange: handleSelectionChange,
@@ -1625,6 +1644,7 @@ function DeviceManagement() {
             }}
           />
         </div>
+        )}
       </Card>
 
       <Modal