feat(批量加入分组): 更新BatchAddModal组件以支持确认操作

在BatchAddModal组件中新增了确认按钮，优化了用户体验。更新onConfirm函数以接收选项参数，并调整了组件结构以提升可读性。同时，移除了未使用的Toast提示逻辑，简化了批量加入的处理逻辑。

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;

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("");
     // 可刷新列表
   };