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