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

通用设备、微信组件迁移

nkebao/src/components/DeviceSelection/index.tsx

@@ -0,0 +1,208 @@
+import React, { useState, useEffect } from "react";
+import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Input, Button, Checkbox, Popup, Toast } from "antd-mobile";
+import request from "@/api/request";
+import style from "./module.scss";
+
+// 设备选择项接口
+interface DeviceSelectionItem {
+  id: string;
+  name: string;
+  imei: string;
+  wechatId: string;
+  status: "online" | "offline";
+}
+
+// 组件属性接口
+interface DeviceSelectionProps {
+  selectedDevices: string[];
+  onSelect: (devices: string[]) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export default function DeviceSelection({
+  selectedDevices,
+  onSelect,
+  placeholder = "选择设备",
+  className = "",
+}: DeviceSelectionProps) {
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [devices, setDevices] = useState<DeviceSelectionItem[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [loading, setLoading] = useState(false);
+
+  // 获取设备列表，支持keyword
+  const fetchDevices = async (keyword: string = "") => {
+    setLoading(true);
+    try {
+      const res = await request(
+        "/v1/device/list",
+        {
+          page: 1,
+          limit: 100,
+          keyword: keyword.trim() || undefined,
+        },
+        "GET"
+      );
+
+      if (res && Array.isArray(res.list)) {
+        setDevices(
+          res.list.map((d: any) => ({
+            id: d.id?.toString() || "",
+            name: d.memo || d.imei || "",
+            imei: d.imei || "",
+            wechatId: d.wechatId || "",
+            status: d.alive === 1 ? "online" : "offline",
+          }))
+        );
+      }
+    } catch (error) {
+      console.error("获取设备列表失败:", error);
+      Toast.show({ content: "获取设备列表失败", position: "top" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 打开弹窗时获取设备列表
+  const openPopup = () => {
+    setSearchQuery("");
+    setPopupVisible(true);
+    fetchDevices("");
+  };
+
+  // 搜索防抖
+  useEffect(() => {
+    if (!popupVisible) return;
+    const timer = setTimeout(() => {
+      fetchDevices(searchQuery);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchQuery, popupVisible]);
+
+  // 过滤设备（只保留状态过滤）
+  const filteredDevices = devices.filter((device) => {
+    const matchesStatus =
+      statusFilter === "all" ||
+      (statusFilter === "online" && device.status === "online") ||
+      (statusFilter === "offline" && device.status === "offline");
+    return matchesStatus;
+  });
+
+  // 处理设备选择
+  const handleDeviceToggle = (deviceId: string) => {
+    if (selectedDevices.includes(deviceId)) {
+      onSelect(selectedDevices.filter((id) => id !== deviceId));
+    } else {
+      onSelect([...selectedDevices, deviceId]);
+    }
+  };
+
+  // 获取显示文本
+  const getDisplayText = () => {
+    if (selectedDevices.length === 0) return "";
+    return `已选择 ${selectedDevices.length} 个设备`;
+  };
+
+  return (
+    <>
+      {/* 输入框 */}
+      <div className={`${style.inputWrapper} ${className}`}>
+        <SearchOutlined className={style.inputIcon} />
+        <Input
+          placeholder={placeholder}
+          className={style.input}
+          readOnly
+          onClick={openPopup}
+          value={getDisplayText()}
+        />
+      </div>
+
+      {/* 设备选择弹窗 */}
+      <Popup
+        visible={popupVisible}
+        onMaskClick={() => setPopupVisible(false)}
+        position="bottom"
+        bodyStyle={{ height: "80vh" }}
+      >
+        <div className={style.popupContainer}>
+          <div className={style.popupHeader}>
+            <div className={style.popupTitle}>选择设备</div>
+          </div>
+          <div className={style.popupSearchRow}>
+            <div className={style.popupSearchInputWrap}>
+              <SearchOutlined className={style.inputIcon} />
+              <Input
+                placeholder="搜索设备IMEI/备注/微信号"
+                value={searchQuery}
+                onChange={(val) => setSearchQuery(val)}
+                className={style.popupSearchInput}
+              />
+            </div>
+            <select
+              value={statusFilter}
+              onChange={(e) => setStatusFilter(e.target.value)}
+              className={style.statusSelect}
+            >
+              <option value="all">全部状态</option>
+              <option value="online">在线</option>
+              <option value="offline">离线</option>
+            </select>
+          </div>
+          <div className={style.deviceList}>
+            {loading ? (
+              <div className={style.loadingBox}>
+                <div className={style.loadingText}>加载中...</div>
+              </div>
+            ) : (
+              <div className={style.deviceListInner}>
+                {filteredDevices.map((device) => (
+                  <label key={device.id} className={style.deviceItem}>
+                    <Checkbox
+                      checked={selectedDevices.includes(device.id)}
+                      onChange={() => handleDeviceToggle(device.id)}
+                      className={style.deviceCheckbox}
+                    />
+                    <div className={style.deviceInfo}>
+                      <div className={style.deviceInfoRow}>
+                        <span className={style.deviceName}>{device.name}</span>
+                        <div
+                          className={
+                            device.status === "online"
+                              ? style.statusOnline
+                              : style.statusOffline
+                          }
+                        >
+                          {device.status === "online" ? "在线" : "离线"}
+                        </div>
+                      </div>
+                      <div className={style.deviceInfoDetail}>
+                        <div>IMEI: {device.imei}</div>
+                        <div>微信号: {device.wechatId}</div>
+                      </div>
+                    </div>
+                  </label>
+                ))}
+              </div>
+            )}
+          </div>
+          <div className={style.popupFooter}>
+            <div className={style.selectedCount}>
+              已选择 {selectedDevices.length} 个设备
+            </div>
+            <div className={style.footerBtnGroup}>
+              <Button fill="outline" onClick={() => setPopupVisible(false)}>
+                取消
+              </Button>
+              <Button color="primary" onClick={() => setPopupVisible(false)}>
+                确定
+              </Button>
+            </div>
+          </div>
+        </div>
+      </Popup>
+    </>
+  );
+}

nkebao/src/components/DeviceSelection/module.scss

@@ -0,0 +1,156 @@
+.inputWrapper {
+  position: relative;
+}
+.inputIcon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #bdbdbd;
+  z-index: 10;
+  font-size: 18px;
+}
+.input {
+  padding-left: 38px !important;
+  height: 56px;
+  border-radius: 16px !important;
+  border: 1px solid #e5e6eb !important;
+  font-size: 16px;
+  background: #f8f9fa;
+}
+
+.popupContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #fff;
+}
+.popupHeader {
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.popupTitle {
+  font-size: 20px;
+  font-weight: 600;
+  text-align: center;
+}
+.popupSearchRow {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+}
+.popupSearchInputWrap {
+  position: relative;
+  flex: 1;
+}
+.popupSearchInput {
+  padding-left: 36px !important;
+  border-radius: 12px !important;
+  height: 44px;
+  font-size: 15px;
+  border: 1px solid #e5e6eb !important;
+  background: #f8f9fa;
+}
+.statusSelect {
+  width: 120px;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid #e5e6eb;
+  font-size: 15px;
+  padding: 0 10px;
+  background: #fff;
+}
+.deviceList {
+  flex: 1;
+  overflow-y: auto;
+}
+.deviceListInner {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+}
+.deviceItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 12px;
+  border: 1px solid #f0f0f0;
+  background: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+  &:hover {
+    background: #f5f6fa;
+  }
+}
+.deviceCheckbox {
+  margin-top: 4px;
+}
+.deviceInfo {
+  flex: 1;
+}
+.deviceInfoRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.deviceName {
+  font-weight: 500;
+  font-size: 16px;
+  color: #222;
+}
+.statusOnline {
+  width: 56px;
+  height: 24px;
+  border-radius: 12px;
+  background: #52c41a;
+  color: #fff;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.statusOffline {
+  width: 56px;
+  height: 24px;
+  border-radius: 12px;
+  background: #e5e6eb;
+  color: #888;
+  font-size: 13px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.deviceInfoDetail {
+  font-size: 13px;
+  color: #888;
+  margin-top: 4px;
+}
+.loadingBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.loadingText {
+  color: #888;
+  font-size: 15px;
+}
+.popupFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+}
+.selectedCount {
+  font-size: 14px;
+  color: #888;
+}
+.footerBtnGroup {
+  display: flex;
+  gap: 12px;
+}

nkebao/src/components/DeviceSelectionDialog/index.tsx

@@ -0,0 +1,216 @@
+import React, { useState, useEffect, useCallback } from "react";
+import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Input, Button, Checkbox, Popup, Toast } from "antd-mobile";
+import request from "@/api/request";
+import style from "./module.scss";
+
+interface Device {
+  id: string;
+  name: string;
+  imei: string;
+  wxid: string;
+  status: "online" | "offline";
+  usedInPlans: number;
+  nickname: string;
+}
+
+interface DeviceSelectionDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  selectedDevices: string[];
+  onSelect: (devices: string[]) => void;
+}
+
+export function DeviceSelectionDialog({
+  open,
+  onOpenChange,
+  selectedDevices,
+  onSelect,
+}: DeviceSelectionDialogProps) {
+  const [searchQuery, setSearchQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [loading, setLoading] = useState(false);
+  const [devices, setDevices] = useState<Device[]>([]);
+
+  // 获取设备列表，支持keyword
+  const fetchDevices = useCallback(async (keyword: string = "") => {
+    setLoading(true);
+    try {
+      const response = await request(
+        "/v1/device/list",
+        {
+          page: 1,
+          limit: 100,
+          keyword: keyword.trim() || undefined,
+        },
+        "GET"
+      );
+
+      if (response && Array.isArray(response.list)) {
+        // 转换服务端数据格式为组件需要的格式
+        const convertedDevices: Device[] = response.list.map(
+          (serverDevice: any) => ({
+            id: serverDevice.id.toString(),
+            name: serverDevice.memo || `设备 ${serverDevice.id}`,
+            imei: serverDevice.imei,
+            wxid: serverDevice.wechatId || "",
+            status: serverDevice.alive === 1 ? "online" : "offline",
+            usedInPlans: 0, // 这个字段需要从其他API获取
+            nickname: serverDevice.nickname || "",
+          })
+        );
+        setDevices(convertedDevices);
+      }
+    } catch (error) {
+      console.error("获取设备列表失败:", error);
+      Toast.show({
+        content: "获取设备列表失败，请检查网络连接",
+        position: "top",
+      });
+    } finally {
+      setLoading(false);
+    }
+  }, []);
+
+  // 打开弹窗时获取设备列表
+  useEffect(() => {
+    if (open) {
+      fetchDevices("");
+    }
+  }, [open, fetchDevices]);
+
+  // 搜索防抖
+  useEffect(() => {
+    if (!open) return;
+    const timer = setTimeout(() => {
+      fetchDevices(searchQuery);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchQuery, open, fetchDevices]);
+
+  // 过滤设备（只保留状态过滤）
+  const filteredDevices = devices.filter((device) => {
+    const matchesStatus =
+      statusFilter === "all" ||
+      (statusFilter === "online" && device.status === "online") ||
+      (statusFilter === "offline" && device.status === "offline");
+    return matchesStatus;
+  });
+
+  const handleDeviceSelect = (deviceId: string) => {
+    if (selectedDevices.includes(deviceId)) {
+      onSelect(selectedDevices.filter((id) => id !== deviceId));
+    } else {
+      onSelect([...selectedDevices, deviceId]);
+    }
+  };
+
+  return (
+    <Popup
+      visible={open}
+      onMaskClick={() => onOpenChange(false)}
+      position="bottom"
+      bodyStyle={{ height: "80vh" }}
+    >
+      <div className={style.popupContainer}>
+        <div className={style.popupHeader}>
+          <div className={style.popupTitle}>选择设备</div>
+        </div>
+        <div className={style.popupSearchRow}>
+          <div className={style.popupSearchInputWrap}>
+            <SearchOutlined className={style.inputIcon} />
+            <Input
+              placeholder="搜索设备IMEI/备注"
+              value={searchQuery}
+              onChange={(val) => setSearchQuery(val)}
+              className={style.popupSearchInput}
+            />
+          </div>
+          <select
+            value={statusFilter}
+            onChange={(e) => setStatusFilter(e.target.value)}
+            className={style.statusSelect}
+          >
+            <option value="all">全部状态</option>
+            <option value="online">在线</option>
+            <option value="offline">离线</option>
+          </select>
+          <Button
+            fill="outline"
+            size="mini"
+            onClick={() => fetchDevices(searchQuery)}
+            disabled={loading}
+            className={style.refreshBtn}
+          >
+            {loading ? (
+              <div className={style.loadingIcon}>⟳</div>
+            ) : (
+              <ReloadOutlined />
+            )}
+          </Button>
+        </div>
+        <div className={style.deviceList}>
+          {loading ? (
+            <div className={style.loadingBox}>
+              <div className={style.loadingText}>加载中...</div>
+            </div>
+          ) : filteredDevices.length === 0 ? (
+            <div className={style.emptyBox}>
+              <div className={style.emptyText}>暂无数据</div>
+            </div>
+          ) : (
+            <div className={style.deviceListInner}>
+              {filteredDevices.map((device) => (
+                <label key={device.id} className={style.deviceItem}>
+                  <Checkbox
+                    checked={selectedDevices.includes(device.id)}
+                    onChange={() => handleDeviceSelect(device.id)}
+                    className={style.deviceCheckbox}
+                  />
+                  <div className={style.deviceInfo}>
+                    <div className={style.deviceInfoRow}>
+                      <span className={style.deviceName}>{device.name}</span>
+                      <div
+                        className={
+                          device.status === "online"
+                            ? style.statusOnline
+                            : style.statusOffline
+                        }
+                      >
+                        {device.status === "online" ? "在线" : "离线"}
+                      </div>
+                    </div>
+                    <div className={style.deviceInfoDetail}>
+                      <div>IMEI: {device.imei}</div>
+                      <div>微信号: {device.wxid || "-"}</div>
+                      <div>昵称: {device.nickname || "-"}</div>
+                    </div>
+                    {device.usedInPlans > 0 && (
+                      <div className={style.usedInPlans}>
+                        已用于 {device.usedInPlans} 个计划
+                      </div>
+                    )}
+                  </div>
+                </label>
+              ))}
+            </div>
+          )}
+        </div>
+        <div className={style.popupFooter}>
+          <div className={style.selectedCount}>
+            已选择 {selectedDevices.length} 个设备
+          </div>
+          <div className={style.footerBtnGroup}>
+            <Button fill="outline" onClick={() => onOpenChange(false)}>
+              取消
+            </Button>
+            <Button color="primary" onClick={() => onOpenChange(false)}>
+              确定
+              {selectedDevices.length > 0 ? ` (${selectedDevices.length})` : ""}
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Popup>
+  );
+}

nkebao/src/components/DeviceSelectionDialog/module.scss

@@ -0,0 +1,170 @@
+.popupContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #fff;
+}
+.popupHeader {
+  padding: 16px;
+  border-bottom: 1px solid #f0f0f0;
+}
+.popupTitle {
+  font-size: 18px;
+  font-weight: 600;
+  text-align: center;
+}
+.popupSearchRow {
+  display: flex;
+  align-items: center;
+  gap: 16px;
+  padding: 16px;
+}
+.popupSearchInputWrap {
+  position: relative;
+  flex: 1;
+}
+.inputIcon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #bdbdbd;
+  z-index: 10;
+  font-size: 16px;
+}
+.popupSearchInput {
+  padding-left: 36px !important;
+  border-radius: 12px !important;
+  height: 44px;
+  font-size: 15px;
+  border: 1px solid #e5e6eb !important;
+  background: #f8f9fa;
+}
+.statusSelect {
+  width: 128px;
+  height: 40px;
+  border-radius: 8px;
+  border: 1px solid #e5e6eb;
+  font-size: 14px;
+  padding: 0 12px;
+  background: #fff;
+}
+.refreshBtn {
+  min-width: 40px;
+  height: 40px;
+  border-radius: 8px;
+}
+.loadingIcon {
+  animation: spin 1s linear infinite;
+  font-size: 16px;
+}
+@keyframes spin {
+  from { transform: rotate(0deg); }
+  to { transform: rotate(360deg); }
+}
+.deviceList {
+  flex: 1;
+  overflow-y: auto;
+}
+.deviceListInner {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  padding: 16px;
+}
+.deviceItem {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 16px;
+  border-radius: 12px;
+  border: 1px solid #f0f0f0;
+  background: #fff;
+  cursor: pointer;
+  transition: background 0.2s;
+  &:hover {
+    background: #f5f6fa;
+  }
+}
+.deviceCheckbox {
+  margin-top: 4px;
+}
+.deviceInfo {
+  flex: 1;
+}
+.deviceInfoRow {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.deviceName {
+  font-weight: 500;
+  font-size: 16px;
+  color: #222;
+}
+.statusOnline {
+  padding: 4px 8px;
+  border-radius: 12px;
+  background: #52c41a;
+  color: #fff;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.statusOffline {
+  padding: 4px 8px;
+  border-radius: 12px;
+  background: #e5e6eb;
+  color: #888;
+  font-size: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.deviceInfoDetail {
+  font-size: 13px;
+  color: #888;
+  margin-top: 4px;
+}
+.usedInPlans {
+  font-size: 13px;
+  color: #fa8c16;
+  margin-top: 4px;
+}
+.loadingBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.loadingText {
+  color: #888;
+  font-size: 15px;
+}
+.emptyBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.emptyText {
+  color: #888;
+  font-size: 15px;
+}
+.popupFooter {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 16px;
+  border-top: 1px solid #f0f0f0;
+  background: #fff;
+}
+.selectedCount {
+  font-size: 14px;
+  color: #888;
+}
+.footerBtnGroup {
+  display: flex;
+  gap: 12px;
+}

nkebao/src/components/FriendSelection/index.tsx

@@ -0,0 +1,332 @@
+import React, { useState, useEffect } from "react";
+import {
+  SearchOutlined,
+  CloseOutlined,
+  LeftOutlined,
+  RightOutlined,
+} from "@ant-design/icons";
+import { Input, Button, Popup, Toast } from "antd-mobile";
+import request from "@/api/request";
+import style from "./module.scss";
+
+// 微信好友接口类型
+interface WechatFriend {
+  id: string;
+  nickname: string;
+  wechatId: string;
+  avatar: string;
+  customer: string;
+}
+
+// 组件属性接口
+interface FriendSelectionProps {
+  selectedFriends: string[];
+  onSelect: (friends: string[]) => void;
+  onSelectDetail?: (friends: WechatFriend[]) => void;
+  deviceIds?: string[];
+  enableDeviceFilter?: boolean;
+  placeholder?: string;
+  className?: string;
+}
+
+export default function FriendSelection({
+  selectedFriends,
+  onSelect,
+  onSelectDetail,
+  deviceIds = [],
+  enableDeviceFilter = true,
+  placeholder = "选择微信好友",
+  className = "",
+}: FriendSelectionProps) {
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [friends, setFriends] = useState<WechatFriend[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalFriends, setTotalFriends] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  // 打开弹窗并请求第一页好友
+  const openPopup = () => {
+    setCurrentPage(1);
+    setSearchQuery("");
+    setPopupVisible(true);
+    fetchFriends(1, "");
+  };
+
+  // 当页码变化时，拉取对应页数据（弹窗已打开时）
+  useEffect(() => {
+    if (popupVisible && currentPage !== 1) {
+      fetchFriends(currentPage, searchQuery);
+    }
+  }, [currentPage, popupVisible, searchQuery]);
+
+  // 搜索防抖
+  useEffect(() => {
+    if (!popupVisible) return;
+
+    const timer = setTimeout(() => {
+      setCurrentPage(1);
+      fetchFriends(1, searchQuery);
+    }, 500);
+
+    return () => clearTimeout(timer);
+  }, [searchQuery, popupVisible]);
+
+  // 获取好友列表API - 添加 keyword 参数
+  const fetchFriends = async (page: number, keyword: string = "") => {
+    setLoading(true);
+    try {
+      let params: any = {
+        page,
+        limit: 20,
+      };
+
+      if (keyword.trim()) {
+        params.keyword = keyword.trim();
+      }
+
+      if (enableDeviceFilter) {
+        if (deviceIds.length === 0) {
+          setFriends([]);
+          setTotalFriends(0);
+          setTotalPages(1);
+          setLoading(false);
+          return;
+        }
+        params.deviceIds = deviceIds.join(",");
+      }
+
+      const res = await request("/v1/friend", params, "GET");
+
+      if (res && Array.isArray(res.list)) {
+        setFriends(
+          res.list.map((friend: any) => ({
+            id: friend.id?.toString() || "",
+            nickname: friend.nickname || "",
+            wechatId: friend.wechatId || "",
+            avatar: friend.avatar || "",
+            customer: friend.customer || "",
+          }))
+        );
+        setTotalFriends(res.total || 0);
+        setTotalPages(Math.ceil((res.total || 0) / 20));
+      }
+    } catch (error) {
+      console.error("获取好友列表失败:", error);
+      Toast.show({ content: "获取好友列表失败", position: "top" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 处理好友选择
+  const handleFriendToggle = (friendId: string) => {
+    let newIds: string[];
+    if (selectedFriends.includes(friendId)) {
+      newIds = selectedFriends.filter((id) => id !== friendId);
+    } else {
+      newIds = [...selectedFriends, friendId];
+    }
+    onSelect(newIds);
+    if (onSelectDetail) {
+      const selectedObjs = friends.filter((f) => newIds.includes(f.id));
+      onSelectDetail(selectedObjs);
+    }
+  };
+
+  // 获取显示文本
+  const getDisplayText = () => {
+    if (selectedFriends.length === 0) return "";
+    return `已选择 ${selectedFriends.length} 个好友`;
+  };
+
+  const handleConfirm = () => {
+    setPopupVisible(false);
+  };
+
+  // 清空搜索
+  const handleClearSearch = () => {
+    setSearchQuery("");
+    setCurrentPage(1);
+    fetchFriends(1, "");
+  };
+
+  return (
+    <>
+      {/* 输入框 */}
+      <div className={`${style.inputWrapper} ${className}`}>
+        <span className={style.inputIcon}>
+          <svg
+            width="20"
+            height="20"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+            />
+          </svg>
+        </span>
+        <Input
+          placeholder={placeholder}
+          className={style.input}
+          readOnly
+          onClick={openPopup}
+          value={getDisplayText()}
+        />
+      </div>
+
+      {/* 微信好友选择弹窗 */}
+      <Popup
+        visible={popupVisible}
+        onMaskClick={() => setPopupVisible(false)}
+        position="bottom"
+        bodyStyle={{ height: "80vh" }}
+      >
+        <div className={style.popupContainer}>
+          <div className={style.popupHeader}>
+            <div className={style.popupTitle}>选择微信好友</div>
+            <div className={style.searchWrapper}>
+              <Input
+                placeholder="搜索好友"
+                value={searchQuery}
+                onChange={(val) => setSearchQuery(val)}
+                className={style.searchInput}
+              />
+              <SearchOutlined className={style.searchIcon} />
+              {searchQuery && (
+                <Button
+                  fill="none"
+                  size="mini"
+                  className={style.clearBtn}
+                  onClick={handleClearSearch}
+                >
+                  <CloseOutlined />
+                </Button>
+              )}
+            </div>
+          </div>
+
+          <div className={style.friendList}>
+            {loading ? (
+              <div className={style.loadingBox}>
+                <div className={style.loadingText}>加载中...</div>
+              </div>
+            ) : friends.length > 0 ? (
+              <div className={style.friendListInner}>
+                {friends.map((friend) => (
+                  <label
+                    key={friend.id}
+                    className={style.friendItem}
+                    onClick={() => handleFriendToggle(friend.id)}
+                  >
+                    <div className={style.radioWrapper}>
+                      <div
+                        className={
+                          selectedFriends.includes(friend.id)
+                            ? style.radioSelected
+                            : style.radioUnselected
+                        }
+                      >
+                        {selectedFriends.includes(friend.id) && (
+                          <div className={style.radioDot}></div>
+                        )}
+                      </div>
+                    </div>
+                    <div className={style.friendInfo}>
+                      <div className={style.friendAvatar}>
+                        {friend.avatar ? (
+                          <img
+                            src={friend.avatar}
+                            alt={friend.nickname}
+                            className={style.avatarImg}
+                          />
+                        ) : (
+                          friend.nickname.charAt(0)
+                        )}
+                      </div>
+                      <div className={style.friendDetail}>
+                        <div className={style.friendName}>
+                          {friend.nickname}
+                        </div>
+                        <div className={style.friendId}>
+                          微信ID: {friend.wechatId}
+                        </div>
+                        {friend.customer && (
+                          <div className={style.friendCustomer}>
+                            归属客户: {friend.customer}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </label>
+                ))}
+              </div>
+            ) : (
+              <div className={style.emptyBox}>
+                <div className={style.emptyText}>
+                  {deviceIds.length === 0
+                    ? "请先选择设备"
+                    : searchQuery
+                      ? `没有找到包含"${searchQuery}"的好友`
+                      : "没有找到好友"}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className={style.paginationRow}>
+            <div className={style.totalCount}>总计 {totalFriends} 个好友</div>
+            <div className={style.paginationControls}>
+              <Button
+                fill="none"
+                size="mini"
+                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+                disabled={currentPage === 1 || loading}
+                className={style.pageBtn}
+              >
+                <LeftOutlined />
+              </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}
+              >
+                <RightOutlined />
+              </Button>
+            </div>
+          </div>
+
+          <div className={style.popupFooter}>
+            <Button
+              fill="outline"
+              onClick={() => setPopupVisible(false)}
+              className={style.cancelBtn}
+            >
+              取消
+            </Button>
+            <Button
+              color="primary"
+              onClick={handleConfirm}
+              className={style.confirmBtn}
+            >
+              确定 ({selectedFriends.length})
+            </Button>
+          </div>
+        </div>
+      </Popup>
+    </>
+  );
+}

nkebao/src/components/FriendSelection/module.scss

@@ -0,0 +1,223 @@
+.inputWrapper {
+  position: relative;
+}
+.inputIcon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #bdbdbd;
+  font-size: 20px;
+}
+.input {
+  padding-left: 38px !important;
+  height: 48px;
+  border-radius: 16px !important;
+  border: 1px solid #e5e6eb !important;
+  font-size: 16px;
+  background: #f8f9fa;
+}
+
+.popupContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #fff;
+}
+.popupHeader {
+  padding: 24px;
+}
+.popupTitle {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 24px;
+}
+.searchWrapper {
+  position: relative;
+  margin-bottom: 16px;
+}
+.searchInput {
+  padding-left: 40px !important;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+  border-radius: 24px !important;
+  border: 1px solid #e5e6eb !important;
+  font-size: 15px;
+  background: #f8f9fa;
+}
+.searchIcon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #bdbdbd;
+  font-size: 16px;
+}
+.clearBtn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  min-width: 24px;
+}
+
+.friendList {
+  flex: 1;
+  overflow-y: auto;
+}
+.friendListInner {
+  border-top: 1px solid #f0f0f0;
+}
+.friendItem {
+  display: flex;
+  align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  transition: background 0.2s;
+  &:hover {
+    background: #f5f6fa;
+  }
+}
+.radioWrapper {
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.radioSelected {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #1890ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.radioUnselected {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #e5e6eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.radioDot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #1890ff;
+}
+.friendInfo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+.friendAvatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  overflow: hidden;
+}
+.avatarImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.friendDetail {
+  flex: 1;
+}
+.friendName {
+  font-weight: 500;
+  font-size: 16px;
+  color: #222;
+  margin-bottom: 2px;
+}
+.friendId {
+  font-size: 13px;
+  color: #888;
+  margin-bottom: 2px;
+}
+.friendCustomer {
+  font-size: 13px;
+  color: #bdbdbd;
+}
+
+.loadingBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.loadingText {
+  color: #888;
+  font-size: 15px;
+}
+.emptyBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.emptyText {
+  color: #888;
+  font-size: 15px;
+}
+
+.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;
+}
+.pageInfo {
+  font-size: 14px;
+  color: #222;
+}
+
+.popupFooter {
+  border-top: 1px solid #f0f0f0;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+.cancelBtn {
+  padding: 0 24px;
+  border-radius: 24px;
+  border: 1px solid #e5e6eb;
+}
+.confirmBtn {
+  padding: 0 24px;
+  border-radius: 24px;
+}

nkebao/src/components/GroupSelection/index.tsx

@@ -0,0 +1,317 @@
+import React, { useState, useEffect } from "react";
+import {
+  SearchOutlined,
+  CloseOutlined,
+  LeftOutlined,
+  RightOutlined,
+} from "@ant-design/icons";
+import { Input, Button, Popup, Toast } from "antd-mobile";
+import request from "@/api/request";
+import style from "./module.scss";
+
+// 群组接口类型
+interface WechatGroup {
+  id: string;
+  chatroomId: string;
+  name: string;
+  avatar: string;
+  ownerWechatId: string;
+  ownerNickname: string;
+  ownerAvatar: string;
+}
+
+// 组件属性接口
+interface GroupSelectionProps {
+  selectedGroups: string[];
+  onSelect: (groups: string[]) => void;
+  onSelectDetail?: (groups: WechatGroup[]) => void;
+  placeholder?: string;
+  className?: string;
+}
+
+export default function GroupSelection({
+  selectedGroups,
+  onSelect,
+  onSelectDetail,
+  placeholder = "选择群聊",
+  className = "",
+}: GroupSelectionProps) {
+  const [popupVisible, setPopupVisible] = useState(false);
+  const [groups, setGroups] = useState<WechatGroup[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [currentPage, setCurrentPage] = useState(1);
+  const [totalPages, setTotalPages] = useState(1);
+  const [totalGroups, setTotalGroups] = useState(0);
+  const [loading, setLoading] = useState(false);
+
+  // 打开弹窗并请求第一页群组
+  const openPopup = () => {
+    setCurrentPage(1);
+    setSearchQuery("");
+    setPopupVisible(true);
+    fetchGroups(1, "");
+  };
+
+  // 当页码变化时，拉取对应页数据（弹窗已打开时）
+  useEffect(() => {
+    if (popupVisible && currentPage !== 1) {
+      fetchGroups(currentPage, searchQuery);
+    }
+  }, [currentPage, popupVisible, searchQuery]);
+
+  // 搜索防抖
+  useEffect(() => {
+    if (!popupVisible) return;
+    const timer = setTimeout(() => {
+      setCurrentPage(1);
+      fetchGroups(1, searchQuery);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchQuery, popupVisible]);
+
+  // 获取群组列表API - 支持keyword
+  const fetchGroups = async (page: number, keyword: string = "") => {
+    setLoading(true);
+    try {
+      const params: any = {
+        page,
+        limit: 20,
+      };
+      if (keyword.trim()) {
+        params.keyword = keyword.trim();
+      }
+
+      const res = await request("/v1/chatroom", params, "GET");
+
+      if (res && Array.isArray(res.list)) {
+        setGroups(
+          res.list.map((group: any) => ({
+            id: group.id?.toString() || "",
+            chatroomId: group.chatroomId || "",
+            name: group.name || "",
+            avatar: group.avatar || "",
+            ownerWechatId: group.ownerWechatId || "",
+            ownerNickname: group.ownerNickname || "",
+            ownerAvatar: group.ownerAvatar || "",
+          }))
+        );
+        setTotalGroups(res.total || 0);
+        setTotalPages(Math.ceil((res.total || 0) / 20));
+      }
+    } catch (error) {
+      console.error("获取群组列表失败:", error);
+      Toast.show({ content: "获取群组列表失败", position: "top" });
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // 处理群组选择
+  const handleGroupToggle = (groupId: string) => {
+    let newIds: string[];
+    if (selectedGroups.includes(groupId)) {
+      newIds = selectedGroups.filter((id) => id !== groupId);
+    } else {
+      newIds = [...selectedGroups, groupId];
+    }
+    onSelect(newIds);
+    if (onSelectDetail) {
+      const selectedObjs = groups.filter((g) => newIds.includes(g.id));
+      onSelectDetail(selectedObjs);
+    }
+  };
+
+  // 获取显示文本
+  const getDisplayText = () => {
+    if (selectedGroups.length === 0) return "";
+    return `已选择 ${selectedGroups.length} 个群聊`;
+  };
+
+  const handleConfirm = () => {
+    setPopupVisible(false);
+  };
+
+  // 清空搜索
+  const handleClearSearch = () => {
+    setSearchQuery("");
+    setCurrentPage(1);
+    fetchGroups(1, "");
+  };
+
+  return (
+    <>
+      {/* 输入框 */}
+      <div className={`${style.inputWrapper} ${className}`}>
+        <span className={style.inputIcon}>
+          <svg
+            width="20"
+            height="20"
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth="2"
+              d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
+            />
+          </svg>
+        </span>
+        <Input
+          placeholder={placeholder}
+          className={style.input}
+          readOnly
+          onClick={openPopup}
+          value={getDisplayText()}
+        />
+      </div>
+
+      {/* 群组选择弹窗 */}
+      <Popup
+        visible={popupVisible}
+        onMaskClick={() => setPopupVisible(false)}
+        position="bottom"
+        bodyStyle={{ height: "80vh" }}
+      >
+        <div className={style.popupContainer}>
+          <div className={style.popupHeader}>
+            <div className={style.popupTitle}>选择群聊</div>
+            <div className={style.searchWrapper}>
+              <Input
+                placeholder="搜索群聊"
+                value={searchQuery}
+                onChange={(val) => setSearchQuery(val)}
+                className={style.searchInput}
+              />
+              <SearchOutlined className={style.searchIcon} />
+              {searchQuery && (
+                <Button
+                  fill="none"
+                  size="mini"
+                  className={style.clearBtn}
+                  onClick={handleClearSearch}
+                >
+                  <CloseOutlined />
+                </Button>
+              )}
+            </div>
+          </div>
+
+          <div className={style.groupList}>
+            {loading ? (
+              <div className={style.loadingBox}>
+                <div className={style.loadingText}>加载中...</div>
+              </div>
+            ) : groups.length > 0 ? (
+              <div className={style.groupListInner}>
+                {groups.map((group) => (
+                  <label
+                    key={group.id}
+                    className={style.groupItem}
+                    onClick={() => handleGroupToggle(group.id)}
+                  >
+                    <div className={style.radioWrapper}>
+                      <div
+                        className={
+                          selectedGroups.includes(group.id)
+                            ? style.radioSelected
+                            : style.radioUnselected
+                        }
+                      >
+                        {selectedGroups.includes(group.id) && (
+                          <div className={style.radioDot}></div>
+                        )}
+                      </div>
+                    </div>
+                    <div className={style.groupInfo}>
+                      <div className={style.groupAvatar}>
+                        {group.avatar ? (
+                          <img
+                            src={group.avatar}
+                            alt={group.name}
+                            className={style.avatarImg}
+                          />
+                        ) : (
+                          group.name.charAt(0)
+                        )}
+                      </div>
+                      <div className={style.groupDetail}>
+                        <div className={style.groupName}>{group.name}</div>
+                        <div className={style.groupId}>
+                          群ID: {group.chatroomId}
+                        </div>
+                        {group.ownerNickname && (
+                          <div className={style.groupOwner}>
+                            群主: {group.ownerNickname}
+                          </div>
+                        )}
+                      </div>
+                    </div>
+                  </label>
+                ))}
+              </div>
+            ) : (
+              <div className={style.emptyBox}>
+                <div className={style.emptyText}>
+                  {searchQuery
+                    ? `没有找到包含"${searchQuery}"的群聊`
+                    : "没有找到群聊"}
+                </div>
+              </div>
+            )}
+          </div>
+
+          <div className={style.paginationRow}>
+            <div className={style.totalCount}>
+              总计 {totalGroups} 个群聊
+              {searchQuery && ` (搜索: "${searchQuery}")`}
+            </div>
+            <div className={style.paginationControls}>
+              <Button
+                fill="none"
+                size="mini"
+                onClick={() => setCurrentPage(Math.max(1, currentPage - 1))}
+                disabled={currentPage === 1 || loading}
+                className={style.pageBtn}
+              >
+                <LeftOutlined />
+              </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}
+              >
+                <RightOutlined />
+              </Button>
+            </div>
+          </div>
+
+          <div className={style.popupFooter}>
+            <Button
+              fill="outline"
+              onClick={() => setPopupVisible(false)}
+              className={style.cancelBtn}
+            >
+              取消
+            </Button>
+            <Button
+              color="primary"
+              onClick={handleConfirm}
+              className={style.confirmBtn}
+            >
+              确定 ({selectedGroups.length})
+            </Button>
+          </div>
+        </div>
+      </Popup>
+    </>
+  );
+}

nkebao/src/components/GroupSelection/module.scss

@@ -0,0 +1,223 @@
+.inputWrapper {
+  position: relative;
+}
+.inputIcon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #bdbdbd;
+  font-size: 20px;
+}
+.input {
+  padding-left: 38px !important;
+  height: 48px;
+  border-radius: 16px !important;
+  border: 1px solid #e5e6eb !important;
+  font-size: 16px;
+  background: #f8f9fa;
+}
+
+.popupContainer {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  background: #fff;
+}
+.popupHeader {
+  padding: 24px;
+}
+.popupTitle {
+  text-align: center;
+  font-size: 20px;
+  font-weight: 600;
+  margin-bottom: 24px;
+}
+.searchWrapper {
+  position: relative;
+  margin-bottom: 16px;
+}
+.searchInput {
+  padding-left: 40px !important;
+  padding-top: 8px !important;
+  padding-bottom: 8px !important;
+  border-radius: 24px !important;
+  border: 1px solid #e5e6eb !important;
+  font-size: 15px;
+  background: #f8f9fa;
+}
+.searchIcon {
+  position: absolute;
+  left: 12px;
+  top: 50%;
+  transform: translateY(-50%);
+  color: #bdbdbd;
+  font-size: 16px;
+}
+.clearBtn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  height: 24px;
+  width: 24px;
+  border-radius: 50%;
+  min-width: 24px;
+}
+
+.groupList {
+  flex: 1;
+  overflow-y: auto;
+}
+.groupListInner {
+  border-top: 1px solid #f0f0f0;
+}
+.groupItem {
+  display: flex;
+  align-items: center;
+  padding: 16px 24px;
+  border-bottom: 1px solid #f0f0f0;
+  cursor: pointer;
+  transition: background 0.2s;
+  &:hover {
+    background: #f5f6fa;
+  }
+}
+.radioWrapper {
+  margin-right: 12px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.radioSelected {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #1890ff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.radioUnselected {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #e5e6eb;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.radioDot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: #1890ff;
+}
+.groupInfo {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  flex: 1;
+}
+.groupAvatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #fff;
+  font-size: 14px;
+  font-weight: 500;
+  overflow: hidden;
+}
+.avatarImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.groupDetail {
+  flex: 1;
+}
+.groupName {
+  font-weight: 500;
+  font-size: 16px;
+  color: #222;
+  margin-bottom: 2px;
+}
+.groupId {
+  font-size: 13px;
+  color: #888;
+  margin-bottom: 2px;
+}
+.groupOwner {
+  font-size: 13px;
+  color: #bdbdbd;
+}
+
+.loadingBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.loadingText {
+  color: #888;
+  font-size: 15px;
+}
+.emptyBox {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+.emptyText {
+  color: #888;
+  font-size: 15px;
+}
+
+.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;
+}
+.pageInfo {
+  font-size: 14px;
+  color: #222;
+}
+
+.popupFooter {
+  border-top: 1px solid #f0f0f0;
+  padding: 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background: #fff;
+}
+.cancelBtn {
+  padding: 0 24px;
+  border-radius: 24px;
+  border: 1px solid #e5e6eb;
+}
+.confirmBtn {
+  padding: 0 24px;
+  border-radius: 24px;
+}