FEAT => 本次更新项目为：

设备选择构建完成

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

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>

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}>

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>