From fceb787924c717f3e6404908e50d995360877b46 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=AC=94=E8=AE=B0=E6=9C=AC=E9=87=8C=E7=9A=84=E6=B0=B8?=
 =?UTF-8?q?=E5=B9=B3?= <fsmecx@gmail.com>
Date: Tue, 22 Jul 2025 16:47:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=9C=AC=E6=AC=A1=E6=8F=90=E4=BA=A4?=
 =?UTF-8?q?=E6=9B=B4=E6=96=B0=E5=86=85=E5=AE=B9=E5=A6=82=E4=B8=8B=20?=
 =?UTF-8?q?=E9=80=89=E6=8B=A9=E7=BB=84=E4=BB=B6=E6=9E=84=E5=BB=BA=E5=AE=8C?=
 =?UTF-8?q?=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/DeviceSelection/index.tsx  | 49 ++++++++++++-------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/nkebao/src/components/DeviceSelection/index.tsx b/nkebao/src/components/DeviceSelection/index.tsx
index 126d43fc..a62625d2 100644
--- a/nkebao/src/components/DeviceSelection/index.tsx
+++ b/nkebao/src/components/DeviceSelection/index.tsx
@@ -30,6 +30,7 @@ interface DeviceSelectionProps {
   selectedListMaxHeight?: number; // 新增，已选列表最大高度，默认500
   showInput?: boolean; // 新增
   showSelectedList?: boolean; // 新增
+  readonly?: boolean; // 新增
 }
 
 const PAGE_SIZE = 20;
@@ -45,6 +46,7 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
   selectedListMaxHeight = 300, // 默认300
   showInput = true,
   showSelectedList = true,
+  readonly = false,
 }) => {
   // 弹窗控制
   const [popupVisible, setPopupVisible] = useState(false);
@@ -99,6 +101,7 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
 
   // 打开弹窗时获取第一页
   const openPopup = () => {
+    if (readonly) return;
     setSearchQuery("");
     setCurrentPage(1);
     setRealVisible(true);
@@ -155,6 +158,7 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
 
   // 删除已选设备
   const handleRemoveDevice = (id: string) => {
+    if (readonly) return;
     onSelect(selectedDevices.filter((d) => d !== id));
   };
 
@@ -289,8 +293,13 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
             value={getDisplayText()}
             onClick={openPopup}
             prefix={<SearchOutlined />}
-            allowClear
+            allowClear={!readonly}
             size="large"
+            readOnly={readonly}
+            disabled={readonly}
+            style={
+              readonly ? { background: "#f5f5f5", cursor: "not-allowed" } : {}
+            }
           />
         </div>
       )}
@@ -332,30 +341,32 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
                 >
                   {device.name}
                 </div>
-                <Button
-                  type="text"
-                  icon={<DeleteOutlined />}
-                  size="small"
-                  style={{
-                    marginLeft: 4,
-                    color: "#ff4d4f",
-                    border: "none",
-                    background: "none",
-                    minWidth: 24,
-                    height: 24,
-                    display: "flex",
-                    alignItems: "center",
-                    justifyContent: "center",
-                  }}
-                  onClick={() => handleRemoveDevice(device.id)}
-                />
+                {!readonly && (
+                  <Button
+                    type="text"
+                    icon={<DeleteOutlined />}
+                    size="small"
+                    style={{
+                      marginLeft: 4,
+                      color: "#ff4d4f",
+                      border: "none",
+                      background: "none",
+                      minWidth: 24,
+                      height: 24,
+                      display: "flex",
+                      alignItems: "center",
+                      justifyContent: "center",
+                    }}
+                    onClick={() => handleRemoveDevice(device.id)}
+                  />
+                )}
               </div>
             ))}
           </div>
         )}
       {/* 弹窗 */}
       <Popup
-        visible={realVisible}
+        visible={realVisible && !readonly}
         onMaskClick={() => setRealVisible(false)}
         position="bottom"
         bodyStyle={{ height: "100vh" }}