feat: 本次提交更新内容如下

选择组件构建完成

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
+                {!readonly && (
-                  type="text"
+                  <Button
-                  icon={<DeleteOutlined />}
+                    type="text"
-                  size="small"
+                    icon={<DeleteOutlined />}
-                  style={{
+                    size="small"
-                    marginLeft: 4,
+                    style={{
-                    color: "#ff4d4f",
+                      marginLeft: 4,
-                    border: "none",
+                      color: "#ff4d4f",
-                    background: "none",
+                      border: "none",
-                    minWidth: 24,
+                      background: "none",
-                    height: 24,
+                      minWidth: 24,
-                    display: "flex",
+                      height: 24,
-                    alignItems: "center",
+                      display: "flex",
-                    justifyContent: "center",
+                      alignItems: "center",
-                  }}
+                      justifyContent: "center",
-                  onClick={() => handleRemoveDevice(device.id)}
+                    }}
-                />
+                    onClick={() => handleRemoveDevice(device.id)}
+                  />
+                )}
               </div>
             ))}
           </div>
         )}
       {/* 弹窗 */}
       <Popup
-        visible={realVisible}
+        visible={realVisible && !readonly}
         onMaskClick={() => setRealVisible(false)}
         position="bottom"
         bodyStyle={{ height: "100vh" }}