refactor(auto-group): 将内容库选择器替换为流量池选择器

将原有的内容库选择组件(ContentSelector)替换为流量池选择组件(PoolSelector)，并更新相关类型定义和表单逻辑
2025-08-21 16:58:12 +08:00
parent cfb752509a
commit eadb7a8f3e
3 changed files with 42 additions and 51 deletions
--- a/Cunkebao/src/pages/mobile/workspace/auto-group/form/components/ContentSelector.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/auto-group/form/components/ContentSelector.tsx
@@ -6,21 +6,21 @@ import {
  PoolPackageItem,
 } from "@/components/PoolSelection/data";

-interface ContentSelectorProps {
-  selectedContent: PoolSelectionItem[];
+interface PoolSelectorProps {
+  selectedPools: PoolSelectionItem[];
  onNext: (data: {
-    contentGroups: string[];
-    contentGroupsOptions: PoolSelectionItem[];
+    poolGroups: string[];
+    poolGroupsOptions: PoolSelectionItem[];
  }) => void;
 }

-export interface ContentSelectorRef {
+export interface PoolSelectorRef {
  validate: () => Promise<boolean>;
  getValues: () => any;
 }

-const ContentSelector = forwardRef<ContentSelectorRef, ContentSelectorProps>(
-  ({ selectedContent, onNext }, ref) => {
+const PoolSelector = forwardRef<PoolSelectorRef, PoolSelectorProps>(
+  ({ selectedPools, onNext }, ref) => {
    const [form] = Form.useForm();

    // 暴露方法给父组件
@@ -30,7 +30,7 @@ const ContentSelector = forwardRef<ContentSelectorRef, ContentSelectorProps>(
          await form.validateFields();
          return true;
        } catch (error) {
-          console.log("ContentSelector 表单验证失败:", error);
+          console.log("PoolSelector 表单验证失败:", error);
          return false;
        }
      },
@@ -40,12 +40,12 @@ const ContentSelector = forwardRef<ContentSelectorRef, ContentSelectorProps>(
    }));

    // 处理选择变化
-    const handleContentChange = (contentGroupsOptions: PoolSelectionItem[]) => {
-      const contentGroups = contentGroupsOptions.map(c => c.id.toString());
-      form.setFieldValue("contentGroups", contentGroups);
+    const handlePoolChange = (poolGroupsOptions: PoolSelectionItem[]) => {
+      const poolGroups = poolGroupsOptions.map(c => c.id.toString());
+      form.setFieldValue("poolGroups", poolGroups);
      onNext({
-        contentGroups,
-        contentGroupsOptions,
+        poolGroups,
+        poolGroupsOptions,
      });
    };

@@ -61,7 +61,7 @@ const ContentSelector = forwardRef<ContentSelectorRef, ContentSelectorProps>(
            form={form}
            layout="vertical"
            initialValues={{
-              contentGroups: selectedContent.map(c => c.id.toString()),
+              poolGroups: selectedPools.map(c => c.id.toString()),
            }}
          >
            <div style={{ marginBottom: 16 }}>
@@ -74,7 +74,7 @@ const ContentSelector = forwardRef<ContentSelectorRef, ContentSelectorProps>(
            </div>

            <Form.Item
-              name="contentGroups"
+              name="poolGroups"
              rules={[
                { required: true, message: "请选择至少一个流量池包" },
                { type: "array", min: 1, message: "请选择至少一个流量池包" },
@@ -82,14 +82,8 @@ const ContentSelector = forwardRef<ContentSelectorRef, ContentSelectorProps>(
              ]}
            >
              <PoolSelection
-                selectedOptions={selectedContent}
-                onSelect={handleContentChange}
-                onSelectDetail={handleSelectDetail}
-                placeholder="选择流量池包"
-                showInput={true}
-                showSelectedList={true}
-                readonly={false}
-                selectedListMaxHeight={320}
+                selectedOptions={selectedPools}
+                onSelect={handlePoolChange}
              />
            </Form.Item>
          </Form>
@@ -99,6 +93,6 @@ const ContentSelector = forwardRef<ContentSelectorRef, ContentSelectorProps>(
  },
 );

-ContentSelector.displayName = "ContentSelector";
+PoolSelector.displayName = "PoolSelector";

-export default ContentSelector;
+export default PoolSelector;
--- a/Cunkebao/src/pages/mobile/workspace/auto-group/form/index.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/auto-group/form/index.tsx
@@ -8,14 +8,11 @@ import { AutoGroupFormData, StepItem } from "./types";
 import StepIndicator from "@/components/StepIndicator";
 import BasicSettings, { BasicSettingsRef } from "./components/BasicSettings";
 import DeviceSelector, { DeviceSelectorRef } from "./components/DeviceSelector";
-import ContentSelector, {
-  ContentSelectorRef,
-} from "./components/ContentSelector";
+import PoolSelector, { PoolSelectorRef } from "./components/PoolSelector";
 import NavCommon from "@/components/NavCommon/index";
 import dayjs from "dayjs";
 import { DeviceSelectionItem } from "@/components/DeviceSelection/data";
 import { PoolSelectionItem } from "@/components/PoolSelection/data";
-import { GroupSelectionItem } from "../../../../../components/GroupSelection/data";

 const steps: StepItem[] = [
  { id: 1, title: "步骤 1", subtitle: "基础设置" },
@@ -28,8 +25,8 @@ const defaultForm: AutoGroupFormData = {
  type: 4,
  deveiceGroups: [], // 设备组
  deveiceGroupsOptions: [], // 设备组选项
-  contentGroups: [], // 内容库
-  contentGroupsOptions: [], // 内容库选项
+  poolGroups: [], // 内容库
+  poolGroupsOptions: [], // 内容库选项
  startTime: dayjs().format("HH:mm"), // 开始时间 (HH:mm)
  endTime: dayjs().add(1, "hour").format("HH:mm"), // 结束时间 (HH:mm)
  groupSizeMin: 20, // 群组最小人数
@@ -51,14 +48,14 @@ const AutoGroupForm: React.FC = () => {
  const [deviceGroupsOptions, setDeviceGroupsOptions] = useState<
    DeviceSelectionItem[]
  >([]);
-  const [contentGroupsOptions, setContentGroupsOptions] = useState<
+  const [poolGroupsOptions, setpoolGroupsOptions] = useState<
    PoolSelectionItem[]
  >([]);

  // 创建子组件的ref
  const basicSettingsRef = useRef<BasicSettingsRef>(null);
  const deviceSelectorRef = useRef<DeviceSelectorRef>(null);
-  const contentSelectorRef = useRef<ContentSelectorRef>(null);
+  const poolSelectorRef = useRef<PoolSelectorRef>(null);

  useEffect(() => {
    if (!id) return;
@@ -69,8 +66,8 @@ const AutoGroupForm: React.FC = () => {
        name: res.name,
        deveiceGroups: res.config.deveiceGroups || [],
        deveiceGroupsOptions: res.config.deveiceGroupsOptions || [],
-        contentGroups: res.config.contentGroups || [],
-        contentGroupsOptions: res.config.contentGroupsOptions || [],
+        poolGroups: res.config.poolGroups || [],
+        poolGroupsOptions: res.config.poolGroupsOptions || [],
        startTime: res.config.startTime,
        endTime: res.config.endTime,
        groupSizeMin: res.config.groupSizeMin,
@@ -84,7 +81,7 @@ const AutoGroupForm: React.FC = () => {
      };
      setFormData(updatedForm);
      setDeviceGroupsOptions(res.config.deveiceGroupsOptions || []);
-      setContentGroupsOptions(res.config.contentGroupsOptions || []);
+      setpoolGroupsOptions(res.config.poolGroupsOptions || []);
      setDataLoaded(true); // 标记数据已加载
    });
  }, [id]);
@@ -106,12 +103,12 @@ const AutoGroupForm: React.FC = () => {
  };

  // 流量池包选择
-  const handleContentChange = (data: {
-    contentGroups: string[];
-    contentGroupsOptions: PoolSelectionItem[];
+  const handlePoolsChange = (data: {
+    poolGroups: string[];
+    poolGroupsOptions: PoolSelectionItem[];
  }) => {
-    setFormData(prev => ({ ...prev, contentGroups: data.contentGroups }));
-    setContentGroupsOptions(data.contentGroupsOptions);
+    setFormData(prev => ({ ...prev, poolGroups: data.poolGroups }));
+    setpoolGroupsOptions(data.poolGroupsOptions);
  };

  const handleSave = async () => {
@@ -123,7 +120,7 @@ const AutoGroupForm: React.FC = () => {
      Toast.show({ content: "请选择至少一个设备组" });
      return;
    }
-    if (formData.contentGroups.length === 0) {
+    if (formData.poolGroups.length === 0) {
      Toast.show({ content: "请选择至少一个流量池包" });
      return;
    }
@@ -133,7 +130,7 @@ const AutoGroupForm: React.FC = () => {
      const submitData = {
        ...formData,
        deveiceGroupsOptions: deviceGroupsOptions,
-        contentGroupsOptions: contentGroupsOptions,
+        poolGroupsOptions: poolGroupsOptions,
      };

      if (isEdit) {
@@ -228,10 +225,10 @@ const AutoGroupForm: React.FC = () => {
        );
      case 3:
        return (
-          <ContentSelector
-            ref={contentSelectorRef}
-            selectedContent={contentGroupsOptions}
-            onNext={handleContentChange}
+          <PoolSelector
+            ref={poolSelectorRef}
+            selectedPools={poolGroupsOptions}
+            onNext={handlePoolsChange}
          />
        );
      default:
--- a/Cunkebao/src/pages/mobile/workspace/auto-group/form/types.ts
+++ b/Cunkebao/src/pages/mobile/workspace/auto-group/form/types.ts
@@ -1,5 +1,5 @@
 import { DeviceSelectionItem } from "@/components/DeviceSelection/data";
-import { ContentItem } from "@/components/ContentSelection/data";
+import { PoolSelectionItem } from "@/components/PoolSelection/data";

 // 自动建群表单数据类型定义
 export interface AutoGroupFormData {
@@ -8,8 +8,8 @@ export interface AutoGroupFormData {
  name: string; // 任务名称
  deveiceGroups: string[]; // 设备组
  deveiceGroupsOptions: DeviceSelectionItem[]; // 设备组选项
-  contentGroups: string[]; // 内容库
-  contentGroupsOptions: ContentItem[]; // 内容库选项
+  poolGroups: string[]; // 流量池
+  poolGroupsOptions: PoolSelectionItem[]; // 流量池选项
  startTime: string; // 开始时间 (YYYY-MM-DD HH:mm:ss)
  endTime: string; // 结束时间 (YYYY-MM-DD HH:mm:ss)
  groupSizeMin: number; // 群组最小人数
@@ -38,7 +38,7 @@ export const formValidationRules = {
    { required: true, message: "请选择设备组" },
    { type: "array", min: 1, message: "至少选择一个设备组" },
  ],
-  contentGroups: [
+  poolGroups: [
    { required: true, message: "请选择内容库" },
    { type: "array", min: 1, message: "至少选择一个内容库" },
  ],