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

弹窗暂时封装完成

nkebao/.env.development

@@ -1,4 +1,4 @@
 # 基础环境变量示例
-VITE_API_BASE_URL=https://ckbapi.quwanzhi.com
+VITE_API_BASE_URL=http://www.yishi.com
 VITE_APP_TITLE=Nkebao Base
 

nkebao/src/components/DeviceSelection/index.tsx

@@ -1,248 +1,369 @@
-import React, { useState, useEffect } from "react";
-import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
-import { Checkbox, Popup, Toast } from "antd-mobile";
-import { Input, Button } from "antd";
-import { getDeviceList } from "./api";
-import style from "./index.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);
-  const [currentPage, setCurrentPage] = useState(1); // 新增
-  const [total, setTotal] = useState(0); // 新增
-  const pageSize = 20; // 每页条数
-
-  // 获取设备列表，支持keyword和分页
-  const fetchDevices = async (keyword: string = "", page: number = 1) => {
-    setLoading(true);
-    try {
-      const res = await getDeviceList({
-        page,
-        limit: pageSize,
-        keyword: keyword.trim() || undefined,
-      });
-      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",
-          }))
-        );
-        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("", 1);
-  };
-
-  // 搜索防抖
-  useEffect(() => {
-    if (!popupVisible) return;
-    const timer = setTimeout(() => {
-      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 =
-      statusFilter === "all" ||
-      (statusFilter === "online" && device.status === "online") ||
-      (statusFilter === "offline" && device.status === "offline");
-    return matchesStatus;
-  });
-
-  const totalPages = Math.max(1, Math.ceil(total / pageSize));
-
-  // 处理设备选择
-  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}`}>
-        <Input
-          placeholder={placeholder}
-          value={getDisplayText()}
-          onClick={openPopup}
-          prefix={<SearchOutlined />}
-          allowClear
-          size="large"
-        />
-      </div>
-
-      {/* 设备选择弹窗 */}
-      <Popup
-        visible={popupVisible}
-        onMaskClick={() => setPopupVisible(false)}
-        position="bottom"
-        bodyStyle={{ height: "100vh" }}
-      >
-        <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.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} 个设备
-            </div>
-            <div className={style.footerBtnGroup}>
-              <Button fill="outline" onClick={() => setPopupVisible(false)}>
-                取消
-              </Button>
-              <Button color="primary" onClick={() => setPopupVisible(false)}>
-                确定
-              </Button>
-            </div>
-          </div>
-        </div>
-      </Popup>
-    </>
-  );
-}
+import React, { useState, useEffect, useCallback } from "react";
+import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Checkbox, Popup, Toast } from "antd-mobile";
+import { Input, Button } from "antd";
+import { getDeviceList } from "./api";
+import style from "./index.module.scss";
+import { DeleteOutlined } from "@ant-design/icons";
+
+// 设备选择项接口
+interface DeviceSelectionItem {
+  id: string;
+  name: string;
+  imei: string;
+  wechatId: string;
+  status: "online" | "offline";
+  wxid?: string;
+  nickname?: string;
+  usedInPlans?: number;
+}
+
+// 组件属性接口
+interface DeviceSelectionProps {
+  selectedDevices: string[];
+  onSelect: (devices: string[]) => void;
+  placeholder?: string;
+  className?: string;
+  mode?: "input" | "dialog"; // 新增，默认input
+  open?: boolean; // 仅mode=dialog时生效
+  onOpenChange?: (open: boolean) => void; // 仅mode=dialog时生效
+  selectedListMaxHeight?: number; // 新增，已选列表最大高度，默认500
+  showInput?: boolean; // 新增
+  showSelectedList?: boolean; // 新增
+}
+
+const PAGE_SIZE = 20;
+
+const DeviceSelection: React.FC<DeviceSelectionProps> = ({
+  selectedDevices,
+  onSelect,
+  placeholder = "选择设备",
+  className = "",
+  mode = "input",
+  open,
+  onOpenChange,
+  selectedListMaxHeight = 300, // 默认300
+  showInput = true,
+  showSelectedList = true,
+}) => {
+  // 弹窗控制
+  const [popupVisible, setPopupVisible] = useState(false);
+  const isDialog = mode === "dialog";
+  const realVisible = isDialog ? !!open : popupVisible;
+  const setRealVisible = (v: boolean) => {
+    if (isDialog && onOpenChange) onOpenChange(v);
+    if (!isDialog) setPopupVisible(v);
+  };
+
+  // 设备数据
+  const [devices, setDevices] = useState<DeviceSelectionItem[]>([]);
+  const [searchQuery, setSearchQuery] = useState("");
+  const [statusFilter, setStatusFilter] = useState("all");
+  const [loading, setLoading] = useState(false);
+  const [currentPage, setCurrentPage] = useState(1);
+  const [total, setTotal] = useState(0);
+
+  // 获取设备列表，支持keyword和分页
+  const fetchDevices = useCallback(
+    async (keyword: string = "", page: number = 1) => {
+      setLoading(true);
+      try {
+        const res = await getDeviceList({
+          page,
+          limit: PAGE_SIZE,
+          keyword: keyword.trim() || undefined,
+        });
+        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",
+              wxid: d.wechatId || "",
+              nickname: d.nickname || "",
+              usedInPlans: d.usedInPlans || 0,
+            }))
+          );
+          setTotal(res.total || 0);
+        }
+      } catch (error) {
+        console.error("获取设备列表失败:", error);
+      } finally {
+        setLoading(false);
+      }
+    },
+    []
+  );
+
+  // 打开弹窗时获取第一页
+  const openPopup = () => {
+    setSearchQuery("");
+    setCurrentPage(1);
+    setRealVisible(true);
+    fetchDevices("", 1);
+  };
+
+  // 搜索防抖
+  useEffect(() => {
+    if (!realVisible) return;
+    const timer = setTimeout(() => {
+      setCurrentPage(1);
+      fetchDevices(searchQuery, 1);
+    }, 500);
+    return () => clearTimeout(timer);
+  }, [searchQuery, realVisible, fetchDevices]);
+
+  // 翻页时重新请求
+  useEffect(() => {
+    if (!realVisible) return;
+    fetchDevices(searchQuery, currentPage);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [currentPage]);
+
+  // 过滤设备（只保留状态过滤）
+  const filteredDevices = devices.filter((device) => {
+    const matchesStatus =
+      statusFilter === "all" ||
+      (statusFilter === "online" && device.status === "online") ||
+      (statusFilter === "offline" && device.status === "offline");
+    return matchesStatus;
+  });
+
+  const totalPages = Math.max(1, Math.ceil(total / PAGE_SIZE));
+
+  // 处理设备选择
+  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} 个设备`;
+  };
+
+  // 获取已选设备详细信息
+  const selectedDeviceObjs = selectedDevices
+    .map((id) => devices.find((d) => d.id === id))
+    .filter(Boolean) as DeviceSelectionItem[];
+
+  // 删除已选设备
+  const handleRemoveDevice = (id: string) => {
+    onSelect(selectedDevices.filter((d) => d !== id));
+  };
+
+  // 弹窗内容
+  const popupContent = (
+    <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, currentPage)}
+          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>
+        ) : (
+          <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.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} 个设备
+        </div>
+        <div className={style.footerBtnGroup}>
+          <Button fill="outline" onClick={() => setRealVisible(false)}>
+            取消
+          </Button>
+          <Button color="primary" onClick={() => setRealVisible(false)}>
+            确定
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+
+  return (
+    <>
+      {/* mode=input 显示输入框，mode=dialog不显示 */}
+      {mode === "input" && showInput && (
+        <div className={`${style.inputWrapper} ${className}`}>
+          <Input
+            placeholder={placeholder}
+            value={getDisplayText()}
+            onClick={openPopup}
+            prefix={<SearchOutlined />}
+            allowClear
+            size="large"
+          />
+        </div>
+      )}
+      {/* 已选设备列表窗口 */}
+      {mode === "input" &&
+        showSelectedList &&
+        selectedDeviceObjs.length > 0 && (
+          <div
+            className={style.selectedListWindow}
+            style={{
+              maxHeight: selectedListMaxHeight,
+              overflowY: "auto",
+              marginTop: 8,
+              border: "1px solid #e5e6eb",
+              borderRadius: 8,
+              background: "#fff",
+            }}
+          >
+            {selectedDeviceObjs.map((device) => (
+              <div
+                key={device.id}
+                className={style.selectedListRow}
+                style={{
+                  display: "flex",
+                  alignItems: "center",
+                  padding: "4px 8px",
+                  borderBottom: "1px solid #f0f0f0",
+                  fontSize: 14,
+                }}
+              >
+                <div
+                  style={{
+                    flex: 1,
+                    minWidth: 0,
+                    whiteSpace: "nowrap",
+                    overflow: "hidden",
+                    textOverflow: "ellipsis",
+                  }}
+                >
+                  {device.name}
+                </div>
+                <Button
+                  type="text"
+                  icon={<DeleteOutlined />}
+                  size="small"
+                  style={{
+                    marginLeft: 4,
+                    color: "#ff4d4f",
+                    border: "none",
+                    background: "none",
+                    minWidth: 24,
+                    height: 24,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                  }}
+                  onClick={() => handleRemoveDevice(device.id)}
+                />
+              </div>
+            ))}
+          </div>
+        )}
+      {/* 弹窗 */}
+      <Popup
+        visible={realVisible}
+        onMaskClick={() => setRealVisible(false)}
+        position="bottom"
+        bodyStyle={{ height: "100vh" }}
+      >
+        {popupContent}
+      </Popup>
+    </>
+  );
+};
+
+export default DeviceSelection;

nkebao/src/components/DeviceSelection/selectionPopup.tsx

@@ -0,0 +1,197 @@
+import React from "react";
+import { SearchOutlined, ReloadOutlined } from "@ant-design/icons";
+import { Input, Button, Checkbox, Popup } from "antd-mobile";
+import style from "./index.module.scss";
+
+interface DeviceSelectionItem {
+  id: string;
+  name: string;
+  imei: string;
+  wechatId: string;
+  status: "online" | "offline";
+  wxid?: string;
+  nickname?: string;
+  usedInPlans?: number;
+}
+
+interface SelectionPopupProps {
+  visible: boolean;
+  onClose: () => void;
+  selectedDevices: string[];
+  onSelect: (devices: string[]) => void;
+  devices: DeviceSelectionItem[];
+  loading: boolean;
+  searchQuery: string;
+  setSearchQuery: (v: string) => void;
+  statusFilter: string;
+  setStatusFilter: (v: string) => void;
+  onRefresh: () => void;
+  filteredDevices: DeviceSelectionItem[];
+  total: number;
+  currentPage: number;
+  totalPages: number;
+  setCurrentPage: (v: number) => void;
+  onCancel: () => void;
+  onConfirm: () => void;
+}
+
+const SelectionPopup: React.FC<SelectionPopupProps> = ({
+  visible,
+  onClose,
+  selectedDevices,
+  onSelect,
+  devices,
+  loading,
+  searchQuery,
+  setSearchQuery,
+  statusFilter,
+  setStatusFilter,
+  onRefresh,
+  filteredDevices,
+  total,
+  currentPage,
+  totalPages,
+  setCurrentPage,
+  onCancel,
+  onConfirm,
+}) => {
+  // 处理设备选择
+  const handleDeviceToggle = (deviceId: string) => {
+    if (selectedDevices.includes(deviceId)) {
+      onSelect(selectedDevices.filter((id) => id !== deviceId));
+    } else {
+      onSelect([...selectedDevices, deviceId]);
+    }
+  };
+
+  return (
+    <Popup
+      visible={visible}
+      // 禁止点击遮罩关闭
+      onMaskClick={() => {}}
+      position="bottom"
+      bodyStyle={{ height: "100vh" }}
+      closeOnMaskClick={false}
+    >
+      <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={setSearchQuery}
+              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={onRefresh}
+            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>
+          ) : (
+            <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.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} 个设备
+          </div>
+          <div className={style.footerBtnGroup}>
+            <Button fill="outline" onClick={onCancel}>
+              取消
+            </Button>
+            <Button color="primary" onClick={onConfirm}>
+              确定
+            </Button>
+          </div>
+        </div>
+      </div>
+    </Popup>
+  );
+};
+
+export default SelectionPopup;