From a9c41aa9c3f7e2c3627d12069ea2e25c9ce43e37 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B6=85=E7=BA=A7=E8=80=81=E7=99=BD=E5=85=94?=
 <fsmecx@gmail.com>
Date: Mon, 22 Sep 2025 10:37:11 +0800
Subject: [PATCH] =?UTF-8?q?feat(=E6=89=B9=E9=87=8F=E5=8A=A0=E5=85=A5?=
 =?UTF-8?q?=E5=88=86=E7=BB=84):=20=E6=9B=B4=E6=96=B0BatchAddModal=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6=E4=BB=A5=E6=94=AF=E6=8C=81=E7=A1=AE=E8=AE=A4=E6=93=8D?=
 =?UTF-8?q?=E4=BD=9C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

在BatchAddModal组件中新增了确认按钮，优化了用户体验。更新onConfirm函数以接收选项参数，并调整了组件结构以提升可读性。同时，移除了未使用的Toast提示逻辑，简化了批量加入的处理逻辑。
---
 .../mine/traffic-pool/list/BatchAddModal.tsx  | 72 ++++++++++---------
 .../mine/traffic-pool/list/dataAnyx.tsx       | 29 ++++----
 2 files changed, 52 insertions(+), 49 deletions(-)

diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/BatchAddModal.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/BatchAddModal.tsx
index 86dda202..19ffcae4 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/BatchAddModal.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/BatchAddModal.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { Popup, Selector } from "antd-mobile";
+import { Popup, Selector, Button } from "antd-mobile";
 import type { PackageOption } from "./data";
 
 interface BatchAddModalProps {
@@ -9,7 +9,7 @@ interface BatchAddModalProps {
   batchTarget: string;
   setBatchTarget: (v: string) => void;
   selectedCount: number;
-  onConfirm: () => void;
+  onConfirm: (options) => void;
 }
 
 const BatchAddModal: React.FC<BatchAddModalProps> = ({
@@ -20,38 +20,40 @@ const BatchAddModal: React.FC<BatchAddModalProps> = ({
   setBatchTarget,
   selectedCount,
   onConfirm,
-}) => (
-  // <Modal visible={visible} title="批量加入分组" onConfirm={onConfirm}>
-  //   <div style={{ marginBottom: 12 }}>
-  //     <div>选择目标分组</div>
-  //     <Selector
-  //       options={packageOptions.map(p => ({ label: p.name, value: p.id }))}
-  //       value={[batchTarget]}
-  //       onChange={v => setBatchTarget(v[0])}
-  //     />
-  //   </div>
-  //   <div style={{ color: "#888", fontSize: 13 }}>
-  //     将选中的{selectedCount}个用户加入所选分组
-  //   </div>
-  // </Modal>
-  <Popup
-    visible={visible}
-    onMaskClick={() => onClose()}
-    position="bottom"
-    bodyStyle={{ height: "80vh" }}
-  >
-    <div style={{ marginBottom: 12 }}>
-      <div>选择目标分组</div>
-      <Selector
-        options={packageOptions.map(p => ({ label: p.name, value: p.id }))}
-        value={[batchTarget]}
-        onChange={v => setBatchTarget(v[0])}
-      />
-    </div>
-    <div style={{ color: "#888", fontSize: 13 }}>
-      将选中的{selectedCount}个用户加入所选分组
-    </div>
-  </Popup>
-);
+}) => {
+  const handSubmit = () => {
+    onConfirm(packageOptions);
+  };
+  return (
+    <Popup
+      visible={visible}
+      onMaskClick={() => onClose()}
+      position="bottom"
+      bodyStyle={{ height: "80vh" }}
+    >
+      <div style={{ marginBottom: 12, padding: 10 }}>
+        <div style={{ marginBottom: 12 }}>选择目标分组</div>
+        <Selector
+          options={packageOptions.map(p => ({ label: p.name, value: p.id }))}
+          value={[batchTarget]}
+          onChange={v => setBatchTarget(v[0])}
+        />
+        <div
+          style={{
+            color: "#888",
+            fontSize: 12,
+            paddingTop: 15,
+            marginBottom: 20,
+          }}
+        >
+          将选中的{selectedCount}个用户加入所选分组
+        </div>
+        <Button onClick={handSubmit} color="primary" block>
+          确定
+        </Button>
+      </div>
+    </Popup>
+  );
+};
 
 export default BatchAddModal;
diff --git a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/dataAnyx.tsx b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/dataAnyx.tsx
index 8a5f7edc..ad4fc037 100644
--- a/Cunkebao/src/pages/mobile/mine/traffic-pool/list/dataAnyx.tsx
+++ b/Cunkebao/src/pages/mobile/mine/traffic-pool/list/dataAnyx.tsx
@@ -5,7 +5,6 @@ import {
   fetchScenarioOptions,
 } from "./api";
 import type { TrafficPoolUser, PackageOption, ScenarioOption } from "./data";
-import { Toast } from "antd-mobile";
 
 export function useTrafficPoolListLogic() {
   const [loading, setLoading] = useState(false);
@@ -116,19 +115,21 @@ export function useTrafficPoolListLogic() {
   };
 
   // 批量加入分组/流量池
-  const handleBatchAdd = () => {
-    if (!batchTarget) {
-      Toast.show({ content: "请选择目标分组", position: "top" });
-      return;
-    }
-    // TODO: 调用后端批量接口，这里仅模拟
-    Toast.show({
-      content: `已将${selectedIds.length}个用户加入${packageOptions.find(p => p.id === batchTarget)?.name || ""}`,
-      position: "top",
-    });
-    setBatchModal(false);
-    setSelectedIds([]);
-    setBatchTarget("");
+  const handleBatchAdd = options => {
+    console.log("批量加入分组", options);
+
+    // if (!batchTarget) {
+    //   Toast.show({ content: "请选择目标分组", position: "top" });
+    //   return;
+    // }
+    // // TODO: 调用后端批量接口，这里仅模拟
+    // Toast.show({
+    //   content: `已将${selectedIds.length}个用户加入${packageOptions.find(p => p.id === batchTarget)?.name || ""}`,
+    //   position: "top",
+    // });
+    // setBatchModal(false);
+    // setSelectedIds([]);
+    // setBatchTarget("");
     // 可刷新列表
   };