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

做好了

nkebao/src/components/DeviceSelection/index.module.scss

@@ -154,3 +154,35 @@
   display: flex;
   gap: 12px;
 }
+.refreshBtn {
+  width: 36px;
+  height: 36px;
+}
+.paginationRow {
+  border-top: 1px solid #f0f0f0;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+.totalCount {
+  font-size: 14px;
+  color: #888;
+}
+.paginationControls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.pageBtn {
+  padding: 0 8px;
+  height: 32px;
+  min-width: 32px;
+  border-radius: 16px;
+}
+.pageInfo {
+  font-size: 14px;
+  color: #222;
+  margin: 0 8px;
+}

nkebao/src/components/DeviceSelection/index.tsx

@@ -33,17 +33,19 @@ export default function DeviceSelection({
   const [searchQuery, setSearchQuery] = useState("");
   const [statusFilter, setStatusFilter] = useState("all");
   const [loading, setLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1); // 新增
+  const [total, setTotal] = useState(0); // 新增
+  const pageSize = 20; // 每页条数
 
-  // 获取设备列表，支持keyword
+  // 获取设备列表，支持keyword和分页
-  const fetchDevices = async (keyword: string = "") => {
+  const fetchDevices = async (keyword: string = "", page: number = 1) => {
     setLoading(true);
     try {
       const res = await getDeviceList({
-        page: 1,
+        page,
-        limit: 100,
+        limit: pageSize,
         keyword: keyword.trim() || undefined,
       });
-
       if (res && Array.isArray(res.list)) {
         setDevices(
           res.list.map((d: any) => ({
@@ -54,30 +56,41 @@ export default function DeviceSelection({
             status: d.alive === 1 ? "online" : "offline",
           }))
         );
+        setTotal(res.total || 0);
       }
     } catch (error) {
       console.error("获取设备列表失败:", error);
+      Toast.show({ content: "获取设备列表失败", position: "top" });
     } finally {
       setLoading(false);
     }
   };
 
-  // 打开弹窗时获取设备列表
+  // 打开弹窗时获取第一页
   const openPopup = () => {
     setSearchQuery("");
+    setCurrentPage(1);
     setPopupVisible(true);
-    fetchDevices("");
+    fetchDevices("", 1);
   };
 
   // 搜索防抖
   useEffect(() => {
     if (!popupVisible) return;
     const timer = setTimeout(() => {
-      fetchDevices(searchQuery);
+      setCurrentPage(1);
+      fetchDevices(searchQuery, 1);
     }, 500);
     return () => clearTimeout(timer);
   }, [searchQuery, popupVisible]);
 
+  // 翻页时重新请求
+  useEffect(() => {
+    if (!popupVisible) return;
+    fetchDevices(searchQuery, currentPage);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPage]);
+
   // 过滤设备（只保留状态过滤）
   const filteredDevices = devices.filter((device) => {
     const matchesStatus =
@@ -87,6 +100,8 @@ export default function DeviceSelection({
     return matchesStatus;
   });
 
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
   // 处理设备选择
   const handleDeviceToggle = (deviceId: string) => {
     if (selectedDevices.includes(deviceId)) {
@@ -129,13 +144,12 @@ export default function DeviceSelection({
           </div>
           <div className={style.popupSearchRow}>
             <div className={style.popupSearchInputWrap}>
+              <SearchOutlined className={style.inputIcon} />
               <Input
                 placeholder="搜索设备IMEI/备注/微信号"
                 value={searchQuery}
-                onChange={(e) => setSearchQuery(e.target.value)}
+                onChange={(val) => setSearchQuery(val)}
-                prefix={<SearchOutlined />}
+                className={style.popupSearchInput}
-                allowClear
-                size="large"
               />
             </div>
             <select
@@ -147,19 +161,6 @@ export default function DeviceSelection({
               <option value="online">在线</option>
               <option value="offline">离线</option>
             </select>
-            <Button
-              type="primary"
-              size="large"
-              onClick={() => fetchDevices(searchQuery)}
-              disabled={loading}
-              className={style.refreshBtn}
-            >
-              {loading ? (
-                <div className={style.loadingIcon}>⟳</div>
-              ) : (
-                <ReloadOutlined />
-              )}
-            </Button>
           </div>
           <div className={style.deviceList}>
             {loading ? (
@@ -198,6 +199,35 @@ export default function DeviceSelection({
               </div>
             )}
           </div>
+          {/* 分页栏 */}
+          <div className={style.paginationRow}>
+            <div className={style.totalCount}>总计 {total} 个设备</div>
+            <div className={style.paginationControls}>
+              <Button
+                fill="none"
+                size="mini"
+                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+                disabled={currentPage === 1 || loading}
+                className={style.pageBtn}
+              >
+                &lt;
+              </Button>
+              <span className={style.pageInfo}>
+                {currentPage} / {totalPages}
+              </span>
+              <Button
+                fill="none"
+                size="mini"
+                onClick={() =>
+                  setCurrentPage(Math.min(totalPages, currentPage + 1))
+                }
+                disabled={currentPage === totalPages || loading}
+                className={style.pageBtn}
+              >
+                &gt;
+              </Button>
+            </div>
+          </div>
           <div className={style.popupFooter}>
             <div className={style.selectedCount}>
               已选择 {selectedDevices.length} 个设备

nkebao/src/components/DeviceSelectionDialog/index.module.scss

@@ -163,3 +163,35 @@
   display: flex;
   gap: 12px;
 }
+.refreshBtn {
+  width: 36px;
+  height: 36px;
+}
+.paginationRow {
+  border-top: 1px solid #f0f0f0;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+.totalCount {
+  font-size: 14px;
+  color: #888;
+}
+.paginationControls {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+.pageBtn {
+  padding: 0 8px;
+  height: 32px;
+  min-width: 32px;
+  border-radius: 16px;
+}
+.pageInfo {
+  font-size: 14px;
+  color: #222;
+  margin: 0 8px;
+}

nkebao/src/components/DeviceSelectionDialog/index.tsx

@@ -32,47 +32,53 @@ export function DeviceSelectionDialog({
   const [statusFilter, setStatusFilter] = useState("all");
   const [loading, setLoading] = useState(false);
   const [devices, setDevices] = useState<Device[]>([]);
+  const [currentPage, setCurrentPage] = useState(1); // 新增
+  const [total, setTotal] = useState(0); // 新增
+  const pageSize = 20; // 每页条数
 
-  // 获取设备列表，支持keyword
+  // 获取设备列表，支持keyword和分页
-  const fetchDevices = useCallback(async (keyword: string = "") => {
+  const fetchDevices = useCallback(
-    setLoading(true);
+    async (keyword: string = "", page: number = 1) => {
-    try {
+      setLoading(true);
-      const response = await getDeviceList({
+      try {
-        page: 1,
+        const response = await getDeviceList({
-        limit: 100,
+          page,
-        keyword: keyword.trim() || undefined,
+          limit: pageSize,
-      });
+          keyword: keyword.trim() || undefined,
-
+        });
-      if (response && Array.isArray(response.list)) {
+        if (response && Array.isArray(response.list)) {
-        // 转换服务端数据格式为组件需要的格式
+          const convertedDevices: Device[] = response.list.map(
-        const convertedDevices: Device[] = response.list.map(
+            (serverDevice: any) => ({
-          (serverDevice: any) => ({
+              id: serverDevice.id.toString(),
-            id: serverDevice.id.toString(),
+              name: serverDevice.memo || `设备 ${serverDevice.id}`,
-            name: serverDevice.memo || `设备 ${serverDevice.id}`,
+              imei: serverDevice.imei,
-            imei: serverDevice.imei,
+              wxid: serverDevice.wechatId || "",
-            wxid: serverDevice.wechatId || "",
+              status: serverDevice.alive === 1 ? "online" : "offline",
-            status: serverDevice.alive === 1 ? "online" : "offline",
+              usedInPlans: 0,
-            usedInPlans: 0, // 这个字段需要从其他API获取
+              nickname: serverDevice.nickname || "",
-            nickname: serverDevice.nickname || "",
+            })
-          })
+          );
-        );
+          setDevices(convertedDevices);
-        setDevices(convertedDevices);
+          setTotal(response.total || 0);
+        }
+      } catch (error) {
+        console.error("获取设备列表失败:", error);
+        Toast.show({
+          content: "获取设备列表失败，请检查网络连接",
+          position: "top",
+        });
+      } finally {
+        setLoading(false);
       }
-    } catch (error) {
+    },
-      console.error("获取设备列表失败:", error);
+    []
-      Toast.show({
+  );
-        content: "获取设备列表失败，请检查网络连接",
-        position: "top",
-      });
-    } finally {
-      setLoading(false);
-    }
-  }, []);
 
-  // 打开弹窗时获取设备列表
+  // 打开弹窗时获取第一页
   useEffect(() => {
     if (open) {
-      fetchDevices("");
+      setCurrentPage(1);
+      fetchDevices("", 1);
     }
   }, [open, fetchDevices]);
 
@@ -80,11 +86,19 @@ export function DeviceSelectionDialog({
   useEffect(() => {
     if (!open) return;
     const timer = setTimeout(() => {
-      fetchDevices(searchQuery);
+      setCurrentPage(1);
+      fetchDevices(searchQuery, 1);
     }, 500);
     return () => clearTimeout(timer);
   }, [searchQuery, open, fetchDevices]);
 
+  // 翻页时重新请求
+  useEffect(() => {
+    if (!open) return;
+    fetchDevices(searchQuery, currentPage);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPage]);
+
   // 过滤设备（只保留状态过滤）
   const filteredDevices = devices.filter((device) => {
     const matchesStatus =
@@ -102,6 +116,8 @@ export function DeviceSelectionDialog({
     }
   };
 
+  const totalPages = Math.max(1, Math.ceil(total / pageSize));
+
   return (
     <Popup
       visible={open}
@@ -115,13 +131,12 @@ export function DeviceSelectionDialog({
         </div>
         <div className={style.popupSearchRow}>
           <div className={style.popupSearchInputWrap}>
+            <SearchOutlined className={style.inputIcon} />
             <Input
-              placeholder="搜索设备IMEI/备注/微信号"
+              placeholder="搜索设备IMEI/备注"
               value={searchQuery}
-              onChange={(e) => setSearchQuery(e.target.value)}
+              onChange={(val) => setSearchQuery(val)}
-              prefix={<SearchOutlined />}
+              className={style.popupSearchInput}
-              allowClear
-              size="large"
             />
           </div>
           <select
@@ -134,9 +149,9 @@ export function DeviceSelectionDialog({
             <option value="offline">离线</option>
           </select>
           <Button
-            type="primary"
+            fill="outline"
-            size="large"
+            size="mini"
-            onClick={() => fetchDevices(searchQuery)}
+            onClick={() => fetchDevices(searchQuery, currentPage)}
             disabled={loading}
             className={style.refreshBtn}
           >
@@ -180,7 +195,7 @@ export function DeviceSelectionDialog({
                     </div>
                     <div className={style.deviceInfoDetail}>
                       <div>IMEI: {device.imei}</div>
-                      <div>微信号: {device.wxid || "-"}</div>
+                      <div>微信号: {device.wxid || "-"} </div>
                       <div>昵称: {device.nickname || "-"}</div>
                     </div>
                     {device.usedInPlans > 0 && (
@@ -194,6 +209,35 @@ export function DeviceSelectionDialog({
             </div>
           )}
         </div>
+        {/* 分页栏 */}
+        <div className={style.paginationRow}>
+          <div className={style.totalCount}>总计 {total} 个设备</div>
+          <div className={style.paginationControls}>
+            <Button
+              fill="none"
+              size="mini"
+              onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+              disabled={currentPage === 1 || loading}
+              className={style.pageBtn}
+            >
+              &lt;
+            </Button>
+            <span className={style.pageInfo}>
+              {currentPage} / {totalPages}
+            </span>
+            <Button
+              fill="none"
+              size="mini"
+              onClick={() =>
+                setCurrentPage(Math.min(totalPages, currentPage + 1))
+              }
+              disabled={currentPage === totalPages || loading}
+              className={style.pageBtn}
+            >
+              &gt;
+            </Button>
+          </div>
+        </div>
         <div className={style.popupFooter}>
           <div className={style.selectedCount}>
             已选择 {selectedDevices.length} 个设备