refactor(PoolSelection): 重命名组件及相关接口从Group到Pool

将组件及相关接口从GroupSelection重命名为PoolSelection以更准确反映其用途更新相关引用和类型定义调整流量池选择弹窗的样式和交互
2025-08-21 16:47:55 +08:00
parent 61e1ffc6c4
commit cfb752509a
7 changed files with 69 additions and 34 deletions
--- a/Cunkebao/src/components/PoolSelection/data.ts
+++ b/Cunkebao/src/components/PoolSelection/data.ts
@@ -28,7 +28,7 @@ export interface PoolItem {
  tags: any[];
 }

-export interface GroupSelectionItem {
+export interface PoolSelectionItem {
  id: string;
  avatar?: string;
  name: string;
@@ -42,10 +42,10 @@ export interface GroupSelectionItem {
 }

 // 组件属性接口
-export interface GroupSelectionProps {
-  selectedOptions: GroupSelectionItem[];
-  onSelect: (groups: GroupSelectionItem[]) => void;
-  onSelectDetail?: (groups: PoolPackageItem[]) => void;
+export interface PoolSelectionProps {
+  selectedOptions: PoolSelectionItem[];
+  onSelect: (Pools: PoolSelectionItem[]) => void;
+  onSelectDetail?: (Pools: PoolPackageItem[]) => void;
  placeholder?: string;
  className?: string;
  visible?: boolean;
@@ -56,6 +56,6 @@ export interface GroupSelectionProps {
  readonly?: boolean;
  onConfirm?: (
    selectedIds: string[],
-    selectedItems: GroupSelectionItem[],
+    selectedItems: PoolSelectionItem[],
  ) => void;
 }
--- a/Cunkebao/src/components/PoolSelection/index.module.scss
+++ b/Cunkebao/src/components/PoolSelection/index.module.scss
@@ -106,7 +106,7 @@
 .groupAvatar {
  width: 40px;
  height: 40px;
-  border-radius: 50%;
+  border-radius: 8px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
--- a/Cunkebao/src/components/PoolSelection/index.tsx
+++ b/Cunkebao/src/components/PoolSelection/index.tsx
@@ -1,10 +1,9 @@
 import React, { useState } from "react";
 import { SearchOutlined, DeleteOutlined } from "@ant-design/icons";
 import { Button, Input } from "antd";
-import { Avatar } from "antd-mobile";
 import style from "./index.module.scss";
 import SelectionPopup from "./selectionPopup";
-import { GroupSelectionProps } from "./data";
+import { PoolSelectionProps } from "./data";
 export default function PoolSelection({
  selectedOptions,
  onSelect,
@@ -18,7 +17,7 @@ export default function PoolSelection({
  showSelectedList = true,
  readonly = false,
  onConfirm,
-}: GroupSelectionProps) {
+}: PoolSelectionProps) {
  const [popupVisible, setPopupVisible] = useState(false);

  // 删除已选流量池项
--- a/Cunkebao/src/components/PoolSelection/selectionPopup.tsx
+++ b/Cunkebao/src/components/PoolSelection/selectionPopup.tsx
@@ -6,19 +6,19 @@ import style from "./index.module.scss";
 import Layout from "@/components/Layout/Layout";
 import PopupHeader from "@/components/PopuLayout/header";
 import PopupFooter from "@/components/PopuLayout/footer";
-import { GroupSelectionItem, PoolPackageItem } from "./data";
+import { PoolSelectionItem, PoolPackageItem } from "./data";

 // 弹窗属性接口
 interface SelectionPopupProps {
  visible: boolean;
  onVisibleChange: (visible: boolean) => void;
-  selectedOptions: GroupSelectionItem[];
-  onSelect: (items: GroupSelectionItem[]) => void;
+  selectedOptions: PoolSelectionItem[];
+  onSelect: (items: PoolSelectionItem[]) => void;
  onSelectDetail?: (items: PoolPackageItem[]) => void;
  readonly?: boolean;
  onConfirm?: (
    selectedIds: string[],
-    selectedItems: GroupSelectionItem[],
+    selectedItems: PoolSelectionItem[],
  ) => void;
 }

@@ -66,7 +66,7 @@ export default function SelectionPopup({
    if (readonly) return;

    // 将PoolPackageItem转换为GroupSelectionItem格式
-    const selectionItem: GroupSelectionItem = {
+    const selectionItem: PoolSelectionItem = {
      id: String(item.id),
      name: item.name,
      description: item.description,
--- a/Cunkebao/src/pages/mobile/test/select.tsx
+++ b/Cunkebao/src/pages/mobile/test/select.tsx
@@ -14,7 +14,7 @@ import { ContentItem } from "@/components/ContentSelection/data";
 import { FriendSelectionItem } from "@/components/FriendSelection/data";
 import { DeviceSelectionItem } from "@/components/DeviceSelection/data";
 import { AccountItem } from "@/components/AccountSelection/data";
-import { GroupSelectionItem as PoolSelectionItem } from "@/components/PoolSelection/data";
+import { PoolSelectionItem } from "@/components/PoolSelection/data";
 const ComponentTest: React.FC = () => {
  const [activeTab, setActiveTab] = useState("pools");

@@ -161,6 +161,32 @@ const ComponentTest: React.FC = () => {
            </div>
          </Tabs.Tab>

+          <Tabs.Tab title="群组选择" key="groups">
+            <div style={{ padding: "16px 0" }}>
+              <h3 style={{ marginBottom: 16 }}>GroupSelection 组件测试</h3>
+              <GroupSelection
+                selectedOptions={selectedGroups}
+                onSelect={setSelectedGroups}
+                placeholder="请选择微信群组"
+                showSelectedList={true}
+                selectedListMaxHeight={300}
+              />
+              <div
+                style={{
+                  marginTop: 16,
+                  padding: 12,
+                  background: "#f5f5f5",
+                  borderRadius: 8,
+                }}
+              >
+                <strong>已选群组:</strong> {selectedGroups.length} 个
+                <br />
+                <strong>群组ID:</strong>{" "}
+                {selectedGroups.map(g => g.id).join(", ") || "无"}
+              </div>
+            </div>
+          </Tabs.Tab>
+
          <Tabs.Tab title="流量池选择" key="pools">
            <div style={{ padding: "16px 0" }}>
              <h3 style={{ marginBottom: 16 }}>PoolSelection 组件测试</h3>
--- a/Cunkebao/src/pages/mobile/workspace/auto-group/form/components/ContentSelector.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/auto-group/form/components/ContentSelector.tsx
@@ -1,13 +1,16 @@
 import React, { useImperativeHandle, forwardRef } from "react";
 import { Form, Card } from "antd";
-import ContentSelection from "@/components/ContentSelection";
-import { ContentItem } from "@/components/ContentSelection/data";
+import PoolSelection from "@/components/PoolSelection";
+import {
+  PoolSelectionItem,
+  PoolPackageItem,
+} from "@/components/PoolSelection/data";

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

@@ -37,7 +40,7 @@ const ContentSelector = forwardRef<ContentSelectorRef, ContentSelectorProps>(
    }));

    // 处理选择变化
-    const handleContentChange = (contentGroupsOptions: ContentItem[]) => {
+    const handleContentChange = (contentGroupsOptions: PoolSelectionItem[]) => {
      const contentGroups = contentGroupsOptions.map(c => c.id.toString());
      form.setFieldValue("contentGroups", contentGroups);
      onNext({
@@ -46,6 +49,11 @@ const ContentSelector = forwardRef<ContentSelectorRef, ContentSelectorProps>(
      });
    };

+    // 处理详细选择数据
+    const handleSelectDetail = (poolPackages: PoolPackageItem[]) => {
+      // 如果需要处理原始流量池包数据，可以在这里添加逻辑
+    };
+
    return (
      <div style={{ marginBottom: 24 }}>
        <Card>
@@ -58,25 +66,26 @@ const ContentSelector = forwardRef<ContentSelectorRef, ContentSelectorProps>(
          >
            <div style={{ marginBottom: 16 }}>
              <h2 style={{ margin: 0, fontSize: 18, fontWeight: 600 }}>
-                选择内容库
+                选择流量池包
              </h2>
              <p style={{ margin: "8px 0 0 0", color: "#666", fontSize: 14 }}>
-                请选择要用于建群的内容库
+                请选择要用于建群的流量池包
              </p>
            </div>

            <Form.Item
              name="contentGroups"
              rules={[
-                { required: true, message: "请选择至少一个内容库" },
-                { type: "array", min: 1, message: "请选择至少一个内容库" },
-                { type: "array", max: 20, message: "最多只能选择20个内容库" },
+                { required: true, message: "请选择至少一个流量池包" },
+                { type: "array", min: 1, message: "请选择至少一个流量池包" },
+                { type: "array", max: 20, message: "最多只能选择20个流量池包" },
              ]}
            >
-              <ContentSelection
+              <PoolSelection
                selectedOptions={selectedContent}
                onSelect={handleContentChange}
-                placeholder="选择内容库"
+                onSelectDetail={handleSelectDetail}
+                placeholder="选择流量池包"
                showInput={true}
                showSelectedList={true}
                readonly={false}
--- a/Cunkebao/src/pages/mobile/workspace/auto-group/form/index.tsx
+++ b/Cunkebao/src/pages/mobile/workspace/auto-group/form/index.tsx
@@ -14,12 +14,13 @@ import ContentSelector, {
 import NavCommon from "@/components/NavCommon/index";
 import dayjs from "dayjs";
 import { DeviceSelectionItem } from "@/components/DeviceSelection/data";
-import { ContentItem } from "@/components/ContentSelection/data";
+import { PoolSelectionItem } from "@/components/PoolSelection/data";
+import { GroupSelectionItem } from "../../../../../components/GroupSelection/data";

 const steps: StepItem[] = [
  { id: 1, title: "步骤 1", subtitle: "基础设置" },
  { id: 2, title: "步骤 2", subtitle: "选择设备" },
-  { id: 3, title: "步骤 3", subtitle: "选择内容库" },
+  { id: 3, title: "步骤 3", subtitle: "选择流量池包" },
 ];

 const defaultForm: AutoGroupFormData = {
@@ -51,7 +52,7 @@ const AutoGroupForm: React.FC = () => {
    DeviceSelectionItem[]
  >([]);
  const [contentGroupsOptions, setContentGroupsOptions] = useState<
-    ContentItem[]
+    PoolSelectionItem[]
  >([]);

  // 创建子组件的ref
@@ -104,10 +105,10 @@ const AutoGroupForm: React.FC = () => {
    setDeviceGroupsOptions(data.deveiceGroupsOptions);
  };

-  // 内容库选择
+  // 流量池包选择
  const handleContentChange = (data: {
    contentGroups: string[];
-    contentGroupsOptions: ContentItem[];
+    contentGroupsOptions: PoolSelectionItem[];
  }) => {
    setFormData(prev => ({ ...prev, contentGroups: data.contentGroups }));
    setContentGroupsOptions(data.contentGroupsOptions);
@@ -123,7 +124,7 @@ const AutoGroupForm: React.FC = () => {
      return;
    }
    if (formData.contentGroups.length === 0) {
-      Toast.show({ content: "请选择至少一个内容库" });
+      Toast.show({ content: "请选择至少一个流量池包" });
      return;
    }