From cfb752509a55c300ece9dfad21cc357671bffa70 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?= Date: Thu, 21 Aug 2025 16:47:55 +0800 Subject: [PATCH] =?UTF-8?q?refactor(PoolSelection):=20=E9=87=8D=E5=91=BD?= =?UTF-8?q?=E5=90=8D=E7=BB=84=E4=BB=B6=E5=8F=8A=E7=9B=B8=E5=85=B3=E6=8E=A5?= =?UTF-8?q?=E5=8F=A3=E4=BB=8EGroup=E5=88=B0Pool?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 将组件及相关接口从GroupSelection重命名为PoolSelection以更准确反映其用途 更新相关引用和类型定义 调整流量池选择弹窗的样式和交互 --- Cunkebao/src/components/PoolSelection/data.ts | 12 +++---- .../PoolSelection/index.module.scss | 2 +- .../src/components/PoolSelection/index.tsx | 5 ++- .../PoolSelection/selectionPopup.tsx | 10 +++--- Cunkebao/src/pages/mobile/test/select.tsx | 28 +++++++++++++++- .../form/components/ContentSelector.tsx | 33 ++++++++++++------- .../workspace/auto-group/form/index.tsx | 13 ++++---- 7 files changed, 69 insertions(+), 34 deletions(-) diff --git a/Cunkebao/src/components/PoolSelection/data.ts b/Cunkebao/src/components/PoolSelection/data.ts index e3aac263..95ff55d4 100644 --- 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; } diff --git a/Cunkebao/src/components/PoolSelection/index.module.scss b/Cunkebao/src/components/PoolSelection/index.module.scss index bedba3ef..f0421ca1 100644 --- 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; diff --git a/Cunkebao/src/components/PoolSelection/index.tsx b/Cunkebao/src/components/PoolSelection/index.tsx index 184fd1e8..5118bacd 100644 --- 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); // 删除已选流量池项 diff --git a/Cunkebao/src/components/PoolSelection/selectionPopup.tsx b/Cunkebao/src/components/PoolSelection/selectionPopup.tsx index 3d681ac3..d952efc8 100644 --- 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, diff --git a/Cunkebao/src/pages/mobile/test/select.tsx b/Cunkebao/src/pages/mobile/test/select.tsx index a24e53ac..f7c1edd7 100644 --- 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 = () => { + +
+

GroupSelection 组件测试

+ +
+ 已选群组: {selectedGroups.length} 个 +
+ 群组ID:{" "} + {selectedGroups.map(g => g.id).join(", ") || "无"} +
+
+ +

PoolSelection 组件测试

diff --git a/Cunkebao/src/pages/mobile/workspace/auto-group/form/components/ContentSelector.tsx b/Cunkebao/src/pages/mobile/workspace/auto-group/form/components/ContentSelector.tsx index a4cc905f..b045ae4b 100644 --- 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( })); // 处理选择变化 - 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( }); }; + // 处理详细选择数据 + const handleSelectDetail = (poolPackages: PoolPackageItem[]) => { + // 如果需要处理原始流量池包数据，可以在这里添加逻辑 + }; + return (
@@ -58,25 +66,26 @@ const ContentSelector = forwardRef( >

- 选择内容库 + 选择流量池包

- 请选择要用于建群的内容库 + 请选择要用于建群的流量池包

- { 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; }