From b7d94b56f003a8665ace3bfc834336209b4523a3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?=
 <fsmecx@gmail.com>
Date: Fri, 8 Aug 2025 14:58:26 +0800
Subject: [PATCH] =?UTF-8?q?FEAT=20=3D>=20=E6=9C=AC=E6=AC=A1=E6=9B=B4?=
 =?UTF-8?q?=E6=96=B0=E9=A1=B9=E7=9B=AE=E4=B8=BA=EF=BC=9A=20=E8=AE=BE?=
 =?UTF-8?q?=E5=A4=87=E9=80=89=E6=8B=A9=E6=9E=84=E5=BB=BA=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 nkebao/src/components/DeviceSelection/data.ts |  6 ++--
 .../src/components/DeviceSelection/index.tsx  | 12 ++++----
 .../DeviceSelection/selectionPopup.tsx        | 29 +++++++------------
 nkebao/src/pages/mobile/test/select.tsx       | 10 +++++--
 4 files changed, 26 insertions(+), 31 deletions(-)

diff --git a/nkebao/src/components/DeviceSelection/data.ts b/nkebao/src/components/DeviceSelection/data.ts
index e8a09b5f2..f493e0718 100644
--- a/nkebao/src/components/DeviceSelection/data.ts
+++ b/nkebao/src/components/DeviceSelection/data.ts
@@ -1,6 +1,6 @@
 // 设备选择项接口
 export interface DeviceSelectionItem {
-  id: string;
+  id: number;
   name: string;
   imei: string;
   wechatId: string;
@@ -12,8 +12,8 @@ export interface DeviceSelectionItem {
 
 // 组件属性接口
 export interface DeviceSelectionProps {
-  selectedOptions: string[];
-  onSelect: (devices: string[]) => void;
+  selectedOptions: DeviceSelectionItem[];
+  onSelect: (devices: DeviceSelectionItem[]) => void;
   placeholder?: string;
   className?: string;
   mode?: "input" | "dialog"; // 新增，默认input
diff --git a/nkebao/src/components/DeviceSelection/index.tsx b/nkebao/src/components/DeviceSelection/index.tsx
index c358e0ff9..d3f9bfc5f 100644
--- a/nkebao/src/components/DeviceSelection/index.tsx
+++ b/nkebao/src/components/DeviceSelection/index.tsx
@@ -41,9 +41,9 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
   };
 
   // 删除已选设备
-  const handleRemoveDevice = (id: string) => {
+  const handleRemoveDevice = (id: number) => {
     if (readonly) return;
-    onSelect(selectedOptions.filter(d => d !== id));
+    onSelect(selectedOptions.filter(v => v.id !== id));
   };
 
   return (
@@ -79,9 +79,9 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
             background: "#fff",
           }}
         >
-          {selectedOptions.map(deviceId => (
+          {selectedOptions.map(device => (
             <div
-              key={deviceId}
+              key={device.id}
               className={style.selectedListRow}
               style={{
                 display: "flex",
@@ -100,7 +100,7 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
                   textOverflow: "ellipsis",
                 }}
               >
-                {deviceId}
+                【 {device.name}】 - {device.wechatId}
               </div>
               {!readonly && (
                 <Button
@@ -118,7 +118,7 @@ const DeviceSelection: React.FC<DeviceSelectionProps> = ({
                     alignItems: "center",
                     justifyContent: "center",
                   }}
-                  onClick={() => handleRemoveDevice(deviceId)}
+                  onClick={() => handleRemoveDevice(device.id)}
                 />
               )}
             </div>
diff --git a/nkebao/src/components/DeviceSelection/selectionPopup.tsx b/nkebao/src/components/DeviceSelection/selectionPopup.tsx
index 49a933e1f..daaca8e4d 100644
--- a/nkebao/src/components/DeviceSelection/selectionPopup.tsx
+++ b/nkebao/src/components/DeviceSelection/selectionPopup.tsx
@@ -5,23 +5,13 @@ import style from "./index.module.scss";
 import Layout from "@/components/Layout/Layout";
 import PopupHeader from "@/components/PopuLayout/header";
 import PopupFooter from "@/components/PopuLayout/footer";
-
-interface DeviceSelectionItem {
-  id: string;
-  name: string;
-  imei: string;
-  wechatId: string;
-  status: "online" | "offline";
-  wxid?: string;
-  nickname?: string;
-  usedInPlans?: number;
-}
+import { DeviceSelectionItem } from "./data";
 
 interface SelectionPopupProps {
   visible: boolean;
   onClose: () => void;
-  selectedOptions: string[];
-  onSelect: (devices: string[]) => void;
+  selectedOptions: DeviceSelectionItem[];
+  onSelect: (devices: DeviceSelectionItem[]) => void;
 }
 
 const PAGE_SIZE = 20;
@@ -112,11 +102,12 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
   const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
 
   // 处理设备选择
-  const handleDeviceToggle = (deviceId: string) => {
-    if (selectedOptions.includes(deviceId)) {
-      onSelect(selectedOptions.filter(id => id !== deviceId));
+  const handleDeviceToggle = (device: DeviceSelectionItem) => {
+    if (selectedOptions.some(v => v.id === device.id)) {
+      onSelect(selectedOptions.filter(v => v.id !== device.id));
     } else {
-      onSelect([...selectedOptions, deviceId]);
+      const newSelectedOptions = [...selectedOptions, device];
+      onSelect(newSelectedOptions);
     }
   };
 
@@ -172,8 +163,8 @@ const SelectionPopup: React.FC<SelectionPopupProps> = ({
               {filteredDevices.map(device => (
                 <label key={device.id} className={style.deviceItem}>
                   <Checkbox
-                    checked={selectedOptions.includes(device.id)}
-                    onChange={() => handleDeviceToggle(device.id)}
+                    checked={selectedOptions.some(v => v.id === device.id)}
+                    onChange={() => handleDeviceToggle(device)}
                     className={style.deviceCheckbox}
                   />
                   <div className={style.deviceInfo}>
diff --git a/nkebao/src/pages/mobile/test/select.tsx b/nkebao/src/pages/mobile/test/select.tsx
index 9dea5a6ad..34046b96c 100644
--- a/nkebao/src/pages/mobile/test/select.tsx
+++ b/nkebao/src/pages/mobile/test/select.tsx
@@ -11,11 +11,14 @@ import { isDevelopment } from "@/utils/env";
 import { GroupSelectionItem } from "@/components/GroupSelection/data";
 import { ContentItem } from "@/components/ContentSelection/data";
 import { FriendSelectionItem } from "@/components/FriendSelection/data";
+import { DeviceSelectionItem } from "@/components/DeviceSelection/data";
 const ComponentTest: React.FC = () => {
-  const [activeTab, setActiveTab] = useState("friends");
+  const [activeTab, setActiveTab] = useState("devices");
 
   // 设备选择状态
-  const [selectedDevices, setSelectedDevices] = useState<string[]>([]);
+  const [selectedDevices, setSelectedDevices] = useState<DeviceSelectionItem[]>(
+    [],
+  );
 
   // 群组选择状态
   const [selectedGroups, setSelectedGroups] = useState<GroupSelectionItem[]>(
@@ -126,7 +129,8 @@ const ComponentTest: React.FC = () => {
               >
                 <strong>已选设备:</strong> {selectedDevices.length} 个
                 <br />
-                <strong>设备ID:</strong> {selectedDevices.join(", ") || "无"}
+                <strong>设备ID:</strong>
+                {selectedDevices.map(d => d.id).join(", ") || "无"}
               </div>
             </div>
           </Tabs.Tab>