小程序投流 接入(仅内部账号 type==2 可见)

- 新增页面 publishContent/xcxTouliu:列表 + 创建发布弹窗,人群包选择驱动 demand 候选过滤
- 路由 requireType:2 / sidebar 按账号 type 过滤菜单项,内部账号才显示「小程序投流」入口
- VideoSearchPlanType 加 小程序投流=5;GzhPlanType 加 小程序投流='3';weGZH videoSelectModal getVideoListType 加映射
- xcxPublishPlanModal 给 VideoSelectModal 传 planType=小程序投流 + crowdPackage,后端按 channel='小程序投流-稳定' 拉候选并精确过滤人群包
- 新增 api 常量:xcx list/save/delete/getSharePic/getAudiencePackageList
- UserInfo 加 type?: number 字段配合权限判断

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/components/layout/sidebar.tsx

@@ -3,27 +3,29 @@ import { Badge, Layout, Menu } from 'antd';
 import { AdminRouterItem, routes } from '../../router';
 import { useLocation, useNavigate } from 'react-router-dom';
 import useMessagesHook from '@src/hooks/messages';
+import { getUserInfo } from '@src/http/sso';
 
 const { Sider } = Layout;
 
-const getMenuItems = (routes: AdminRouterItem[], notReadMessageCount: number): any[] => {
+const getMenuItems = (routes: AdminRouterItem[], notReadMessageCount: number, userType?: number): any[] => {
   return routes.map(itm => {
     if (!itm.meta) return null
+    if (itm.requireType != null && itm.requireType !== userType) return null
     let children: any[] = []
-    if (itm.children) children = getMenuItems(itm.children, notReadMessageCount)
-    
+    if (itm.children) children = getMenuItems(itm.children, notReadMessageCount, userType)
+
     const menuItem = children.length > 0 ? {
       ...itm.meta,
       children
     } : {
       ...itm.meta,
       path: itm.path,
-			}    
+			}
     // 为消息菜单添加未读数量徽章
     if (menuItem.key === '/messages' && notReadMessageCount > 0) {
       menuItem.extra = <Badge count={notReadMessageCount} />
     }
-    
+
     return menuItem
   }).filter(itm => !!itm)
 }
@@ -45,7 +47,8 @@ const PageSidebar = (props: {
   const location = useLocation()
 
 	useEffect(() => {
-		const _menuItems = getMenuItems(routes, notReadMessageCount)
+		const userType = getUserInfo()?.type
+		const _menuItems = getMenuItems(routes, notReadMessageCount, userType)
 		setMenuItems(_menuItems)
 	}, [notReadMessageCount])
 

src/http/api.ts

@@ -40,6 +40,13 @@ export const getDemandVideoContentListApi = `${import.meta.env.VITE_API_URL}/con
 export const getShareQrPic = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/qw/getSharePic`
 export const getShareQrLink = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/getShareUrlLink`
 
+/* 小程序投流(仅内部账号) */
+export const getXcxPlanListApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/xcx/list`
+export const saveXcxPlanApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/xcx/save`
+export const deleteXcxPlanApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/xcx/delete`
+export const getXcxSharePicApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/xcx/getSharePic`
+export const getXcxAudiencePackageListApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/xcx/getAudiencePackageList`
+
 /* 数据统计 */
 export const gzhDataList = `${import.meta.env.VITE_API_URL}/contentPlatform/datastat/gzh`
 export const gzhDataExport = `${import.meta.env.VITE_API_URL}/contentPlatform/datastat/gzh/export`

src/http/sso.ts

@@ -5,7 +5,7 @@ import {
   userLogin, sendVerificationCode, loginPhone,
 } from './api.ts'
 
-type UserInfo = { 
+type UserInfo = {
 	channel: string,
 	contactName: string,
 	createTimestamp: number,
@@ -13,7 +13,8 @@ type UserInfo = {
 	identity: number,
 	name: string,
 	telNum: string,
-	token: string
+	token: string,
+	type?: number
 }
 
 export function getUserInfo(): UserInfo {

src/router/index.tsx

@@ -12,7 +12,9 @@ export type AdminRouterItem = RouteObject & {
   meta?: MenuItemType
 	children?: AdminRouterItem[],
 	sortKey?: number,
-	extra?: any
+	extra?: any,
+	// 仅当登录用户的 ContentPlatformAccount.type 等于该值时显示此菜单
+	requireType?: number
 }
 
 /**

src/views/publishContent/publishContent.router.tsx

@@ -9,6 +9,7 @@ import { Outlet } from "react-router-dom";
 // Lazy load components
 const WeCom = React.lazy(() => import('./weCom/index'));
 const WeGZH = React.lazy(() => import('./weGZH/index'));
+const XcxTouliu = React.lazy(() => import('./xcxTouliu/index'));
 
 // Loading fallback component
 // eslint-disable-next-line react-refresh/only-export-components
@@ -59,6 +60,17 @@ const demoRoutes: AdminRouterItem[] = [
 					icon: <Icon component={WeComIcon} className="!text-[20px]"/>,
 				}
 			},
+			{
+				path: 'xcxTouliu',
+				element: <LazyComponent Component={XcxTouliu} />,
+				requireType: 2,
+				meta: {
+					label: "小程序投流",
+					title: "小程序投流",
+					key: "/publishContent/xcxTouliu",
+					icon: <Icon component={WeComIcon} className="!text-[20px]"/>,
+				}
+			},
 		]
 	}
 ]

src/views/publishContent/weCom/type.ts

@@ -26,6 +26,7 @@ export enum VideoSearchPlanType {
 	企微社群 = 2,
 	企微自动回复 = 3,
 	公众号推送 = 4,
+	小程序投流 = 5,
 }
 
 export interface WeVideoItem {

src/views/publishContent/weGZH/components/videoSelectModal/index.tsx

@@ -113,9 +113,11 @@ interface VideoSelectModalProps {
 	initialSelectedIds?: number[];
 	selectedVideos?: VideoItem[];
 	ghName?: string;
+	// 小程序投流入口:按人群包过滤候选(只影响 demand 来源池 prior/posterior)
+	crowdPackage?: string;
 }
 
-const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible, onClose, onOk, initialSelectedIds = [], selectedVideos = [], ghName }) => {
+const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible, onClose, onOk, initialSelectedIds = [], selectedVideos = [], ghName, crowdPackage }) => {
 	const { videoCategoryOptions } = useVideoCategoryOptions();
 	const { uploadLogVideoListQuery, uploadLogVideoPlay, uploadLogVideoPlayEnd, uploadLogVideoCollect } = useLogger();
 	const debouncedUploadLogVideoListQuery = useMemo(() => debounce(uploadLogVideoListQuery, 500), [uploadLogVideoListQuery]);
@@ -156,6 +158,8 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 			return VideoSearchPlanType.自动回复;
 		} else if (planType === GzhPlanType.公众号推送) {
 			return VideoSearchPlanType.公众号推送;
+		} else if (planType === GzhPlanType.小程序投流) {
+			return VideoSearchPlanType.小程序投流;
 		} else {
 			return VideoSearchPlanType.服务号推送;
 		}
@@ -192,6 +196,7 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 			pageSize: PAGE_SIZE,
 			...(source ? { source } : {}),
 			...(ghName ? { ghName } : {}),
+			...(crowdPackage ? { crowdPackage } : {}),
 		};
 
 		const res = await http.post<VideoListResponse>(getVideoContentListApi, requestParams).catch(() => {

src/views/publishContent/weGZH/hooks/useGzhPlanList.ts

@@ -7,6 +7,7 @@ export enum GzhPlanType {
 	自动回复 = '0',
 	服务号推送 = '1',
 	公众号推送 = '2',
+	小程序投流 = '3',
 }
 
 export interface GzhPlanDataType {

src/views/publishContent/xcxTouliu/components/publishPlanModal/index.tsx

@@ -0,0 +1,251 @@
+import React, { useEffect, useState } from 'react';
+import { Modal, Form, Input, Select, Button, Card, Typography, message } from 'antd';
+import { CloseOutlined, PlusOutlined, EditOutlined, CaretRightFilled } from '@ant-design/icons';
+import VideoSelectModal from '@src/views/publishContent/weGZH/components/videoSelectModal';
+import EditTitleCoverModal from '@src/views/publishContent/weGZH/components/editTitleCoverModal';
+import { VideoItem } from '@src/views/publishContent/weGZH/components/types';
+import { GzhPlanType } from '@src/views/publishContent/weGZH/hooks/useGzhPlanList';
+import { VideoSearchPlanType } from '@src/views/publishContent/weCom/type';
+import useLogger from '@src/hooks/useLogger';
+import { XcxPlanDataType } from '../../hooks/useXcxPlanList';
+import { useAudiencePackageOptions } from '../../hooks/useAudiencePackageOptions';
+
+const { Paragraph } = Typography;
+
+interface XcxPublishPlanModalProps {
+	visible: boolean;
+	onCancel: () => void;
+	onOk: (values: XcxPlanDataType & { videoList: VideoItem[] }) => void;
+	isSubmiting?: boolean;
+}
+
+const XcxPublishPlanModal: React.FC<XcxPublishPlanModalProps> = ({
+	visible,
+	isSubmiting,
+	onCancel,
+	onOk,
+}) => {
+	const [form] = Form.useForm();
+	const audiencePackage = Form.useWatch('audiencePackage', form);
+	const [selectedVideos, setSelectedVideos] = useState<VideoItem[]>([]);
+	const [isVideoSelectVisible, setIsVideoSelectVisible] = useState(false);
+	const [playingVideo, setPlayingVideo] = useState<VideoItem | null>(null);
+	const [editingVideo, setEditingVideo] = useState<VideoItem | null>(null);
+	const { uploadLogVideoCreatePublish } = useLogger();
+	const { options: audiencePackageOptions } = useAudiencePackageOptions();
+
+	useEffect(() => {
+		if (!visible) return;
+		form.resetFields();
+		setSelectedVideos([]);
+	}, [visible]);
+
+	const handleOk = () => {
+		form
+			.validateFields()
+			.then((values) => {
+				if (selectedVideos.length === 0) {
+					message.error('请至少选择一个视频');
+					return;
+				}
+				onOk({ ...values, videoList: selectedVideos });
+				uploadLogVideoCreatePublish({
+					videoList: selectedVideos,
+					traceId: Date.now(),
+					planType: VideoSearchPlanType.小程序投流,
+					subChannel: 'xcxTouliu',
+				});
+			})
+			.catch((info) => {
+				console.log('Validate Failed:', info);
+			});
+	};
+
+	const removeVideo = (idToRemove: number) => {
+		setSelectedVideos((cur) => cur.filter((v) => v.videoId !== idToRemove));
+	};
+
+	const openVideoSelector = () => {
+		if (!audiencePackage) {
+			message.warning('请先选择人群包,为您推荐适配的视频');
+			return;
+		}
+		setIsVideoSelectVisible(true);
+	};
+
+	const handleVideoSelectionOk = (newlySelectedVideos: VideoItem[]) => {
+		const currentCustomData = new Map<number, Partial<VideoItem>>();
+		selectedVideos.forEach((v) => {
+			if (v.videoId) {
+				currentCustomData.set(v.videoId, {
+					customTitle: v.customTitle,
+					customCover: v.customCover,
+					customCoverType: v.customCoverType,
+				});
+			}
+		});
+		const mergedVideos = newlySelectedVideos.map((newVideo) => {
+			const customData = currentCustomData.get(newVideo.videoId);
+			return { ...newVideo, ...customData };
+		});
+		setSelectedVideos(mergedVideos);
+		setIsVideoSelectVisible(false);
+	};
+
+	const handleEditOk = (updatedData: Partial<VideoItem>) => {
+		setSelectedVideos((cur) =>
+			cur.map((v) =>
+				v.videoId === editingVideo?.videoId ? { ...v, ...updatedData } : v
+			)
+		);
+		setEditingVideo(null);
+	};
+
+	return (
+		<>
+			<Modal
+				title="创建发布计划"
+				open={visible}
+				destroyOnClose
+				onCancel={onCancel}
+				width={900}
+				footer={[
+					<Button key="back" onClick={onCancel}>
+						取消
+					</Button>,
+					<Button key="submit" type="primary" loading={isSubmiting} onClick={handleOk}>
+						确定
+					</Button>,
+				]}
+				zIndex={10}
+			>
+				<Form form={form} layout="vertical">
+					<Form.Item
+						name="audiencePackage"
+						label="人群包选择"
+						labelCol={{ span: 4 }}
+						labelAlign="left"
+						layout="horizontal"
+						rules={[{ required: true, message: '请选择人群包' }]}
+					>
+						<Select
+							placeholder="选择人群包"
+							className="!w-80"
+							allowClear
+							showSearch
+							filterOption={(input, option) =>
+								(option?.label ?? '').toString().toLowerCase().includes(input.toLowerCase())
+							}
+							options={audiencePackageOptions.map((v) => ({ label: v, value: v }))}
+							onChange={() => setSelectedVideos([])}
+						/>
+					</Form.Item>
+					<Form.Item
+						name="remark"
+						label="备注"
+						labelCol={{ span: 4 }}
+						labelAlign="left"
+						layout="horizontal"
+					>
+						<Input.TextArea placeholder="可选,内部备注" className="!w-80" rows={2} maxLength={200} />
+					</Form.Item>
+					<Form.Item label="发布内容" required>
+						<div className="flex flex-wrap gap-4 max-h-[660px] overflow-y-auto pr-2">
+							{selectedVideos.map((video) => (
+								<Card key={video.videoId} className="w-[240px] relative group">
+									<Button
+										shape="circle"
+										icon={<CloseOutlined />}
+										className="!absolute top-1 right-1 z-10 bg-gray-400 bg-opacity-50 border-none text-white hidden group-hover:inline-flex justify-center items-center"
+										size="small"
+										onClick={() => removeVideo(video.videoId)}
+									/>
+									<div className="p-0">
+										<Paragraph
+											className="mt-1 !mb-1"
+											ellipsis={{ rows: 2, tooltip: true }}
+											title={video.customTitle || video.title}
+										>
+											{video.customTitle || video.title}
+										</Paragraph>
+									</div>
+									<div
+										className="relative"
+										style={{ paddingBottom: '79.8%' }}
+										onClick={(e) => {
+											e.stopPropagation();
+											setPlayingVideo(video);
+										}}
+									>
+										<img
+											src={video.customCover || video.cover}
+											referrerPolicy="no-referrer"
+											className="absolute inset-0 w-full h-full object-cover"
+										/>
+										<div className="absolute inset-0 flex justify-center items-center cursor-pointer">
+											<CaretRightFilled className="!text-white text-4xl bg-black/20 rounded-full p-1 pl-2" />
+										</div>
+									</div>
+									<div className="p-3">
+										<Button
+											icon={<EditOutlined />}
+											className="w-full mt-2"
+											onClick={() => setEditingVideo(video)}
+										>
+											编辑标题/封面
+										</Button>
+									</div>
+								</Card>
+							))}
+							{selectedVideos.length < 20 && (
+								<div
+									className={`w-[240px] h-[316px] flex flex-col justify-center items-center border border-dashed rounded ${audiencePackage ? 'border-gray-300 cursor-pointer dark:border-gray-600 hover:border-blue-500 hover:text-blue-500' : 'border-gray-200 text-gray-300 cursor-not-allowed bg-gray-50'}`}
+									onClick={openVideoSelector}
+								>
+									<PlusOutlined className="text-2xl mb-2" />
+									<Typography.Text type={audiencePackage ? undefined : 'secondary'}>添加视频</Typography.Text>
+								</div>
+							)}
+						</div>
+					</Form.Item>
+				</Form>
+			</Modal>
+
+			<VideoSelectModal
+				planType={GzhPlanType.小程序投流}
+				visible={isVideoSelectVisible}
+				onClose={() => setIsVideoSelectVisible(false)}
+				onOk={handleVideoSelectionOk}
+				selectedVideos={selectedVideos}
+				initialSelectedIds={selectedVideos.map((v) => v.videoId)}
+				crowdPackage={audiencePackage}
+			/>
+
+			<Modal
+				open={!!playingVideo}
+				onCancel={() => setPlayingVideo(null)}
+				title={playingVideo?.customTitle || playingVideo?.title}
+				footer={null}
+				destroyOnClose
+				width={720}
+				styles={{ body: { padding: 0, background: '#000' } }}
+				zIndex={20}
+			>
+				{playingVideo && (
+					<video controls autoPlay className="w-full h-auto max-h-[80vh] block" src={playingVideo.video}>
+						Your browser does not support the video tag.
+					</video>
+				)}
+			</Modal>
+
+			<EditTitleCoverModal
+				visible={!!editingVideo}
+				onCancel={() => setEditingVideo(null)}
+				onOk={handleEditOk}
+				video={editingVideo}
+			/>
+		</>
+	);
+};
+
+export default XcxPublishPlanModal;

src/views/publishContent/xcxTouliu/hooks/useAudiencePackageOptions.ts

@@ -0,0 +1,28 @@
+import { useCallback, useEffect, useState } from 'react';
+import request from '@src/http/index';
+import { getXcxAudiencePackageListApi } from '@src/http/api';
+
+export const useAudiencePackageOptions = () => {
+	const [options, setOptions] = useState<string[]>([]);
+	const [loading, setLoading] = useState(false);
+
+	const fetchOptions = useCallback(async () => {
+		try {
+			setLoading(true);
+			const res = await request.get<string[]>(getXcxAudiencePackageListApi);
+			if (res?.data && Array.isArray(res.data)) {
+				setOptions(res.data);
+			}
+		} catch (err) {
+			console.error('fetch audience package options failed', err);
+		} finally {
+			setLoading(false);
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchOptions();
+	}, [fetchOptions]);
+
+	return { options, loading, refetch: fetchOptions };
+};

src/views/publishContent/xcxTouliu/hooks/useXcxPlanList.ts

@@ -0,0 +1,74 @@
+import { useState } from 'react';
+import { getXcxPlanListApi } from '@src/http/api';
+import request from '@src/http/index';
+import { VideoItem } from '@src/views/publishContent/weGZH/components/types';
+
+export interface XcxPlanDataType {
+	id: number;
+	audiencePackage: string;
+	title: string;
+	cover: string;
+	shareCover?: string;
+	video: string;
+	pageUrl: string;
+	remark?: string;
+	createTimestamp: number;
+	videoList?: VideoItem[];
+}
+
+interface XcxPlanListParams {
+	audiencePackage?: string;
+	title?: string;
+	createTimestampStart?: number;
+	createTimestampEnd?: number;
+	pageNum: number;
+	pageSize: number;
+}
+
+interface XcxPlanListResponse {
+	objs: XcxPlanDataType[];
+	totalSize: number;
+}
+
+export const useXcxPlanList = () => {
+	const [xcxPlanList, setXcxPlanList] = useState<XcxPlanDataType[]>([]);
+	const [loading, setLoading] = useState(false);
+	const [error, setError] = useState<string | null>(null);
+	const [totalSize, setTotalSize] = useState(0);
+
+	const getXcxPlanList = async ({
+		audiencePackage,
+		title,
+		createTimestampStart,
+		createTimestampEnd,
+		pageNum,
+		pageSize,
+	}: XcxPlanListParams) => {
+		try {
+			setLoading(true);
+			setError(null);
+			const data = await request.post<XcxPlanListResponse>(getXcxPlanListApi, {
+				audiencePackage,
+				title,
+				createTimestampStart,
+				createTimestampEnd,
+				pageNum,
+				pageSize,
+			});
+			setXcxPlanList(data.data.objs as XcxPlanDataType[]);
+			setTotalSize(data.data.totalSize);
+		} catch (err) {
+			setError(err instanceof Error ? err.message : 'Failed to fetch xcx plan list');
+		} finally {
+			setLoading(false);
+		}
+	};
+
+	return {
+		xcxPlanList,
+		getXcxPlanList,
+		totalSize,
+		loading,
+		error,
+	};
+};

src/views/publishContent/xcxTouliu/index.module.css

@@ -0,0 +1,3 @@
+.antTable {
+	border-top: none;
+}

src/views/publishContent/xcxTouliu/index.tsx

@@ -0,0 +1,253 @@
+import React, { useEffect, useState } from 'react';
+import { Space, Table, Button, Input, Select, DatePicker, message, Typography, Spin, Popconfirm } from 'antd';
+import type { TableProps } from 'antd';
+import dayjs, { Dayjs } from 'dayjs';
+import styles from './index.module.css';
+import XcxPublishPlanModal from './components/publishPlanModal';
+import { useXcxPlanList, XcxPlanDataType } from './hooks/useXcxPlanList';
+import { useAudiencePackageOptions } from './hooks/useAudiencePackageOptions';
+import { VideoItem } from '@src/views/publishContent/weGZH/components/types';
+import http from '@src/http';
+import { deleteXcxPlanApi, saveXcxPlanApi } from '@src/http/api';
+
+const { RangePicker } = DatePicker;
+const TableHeight = window.innerHeight - 380;
+
+const XcxTouliuContent: React.FC = () => {
+	const [audiencePackage, setAudiencePackage] = useState<string>('');
+	const [videoTitle, setVideoTitle] = useState<string>('');
+	const [dateRange, setDateRange] = useState<[Dayjs | null, Dayjs | null]>();
+	const [isShowAddPunlishPlan, setIsShowAddPunlishPlan] = useState<boolean>(false);
+	const [isSubmiting, setIsSubmiting] = useState<boolean>(false);
+	const [isLoading, setIsLoading] = useState<boolean>(false);
+	const [pageNum, setPageNum] = useState<number>(1);
+	const [pageSize, setPageSize] = useState<number>(10);
+	const { xcxPlanList, getXcxPlanList, totalSize } = useXcxPlanList();
+	const { options: audiencePackageOptions } = useAudiencePackageOptions();
+
+	const columns: TableProps<XcxPlanDataType>['columns'] = [
+		{
+			title: '人群包',
+			dataIndex: 'audiencePackage',
+			key: 'audiencePackage',
+			width: 200,
+		},
+		{
+			title: '视频标题',
+			dataIndex: 'title',
+			key: 'title',
+			ellipsis: true,
+			render: (_, record) => (
+				<Typography.Paragraph
+					style={{ maxWidth: '300px', marginBottom: 0 }}
+					ellipsis={{ rows: 2, tooltip: true }}
+				>
+					{record.title}
+				</Typography.Paragraph>
+			),
+		},
+		{
+			title: '封面',
+			dataIndex: 'cover',
+			key: 'cover',
+			width: 110,
+			render: (_, record) =>
+				record.cover ? (
+					<img src={record.cover} referrerPolicy="no-referrer" className="w-[80px] h-auto" />
+				) : '-',
+		},
+		{
+			title: '备注',
+			dataIndex: 'remark',
+			key: 'remark',
+			width: 180,
+			ellipsis: true,
+		},
+		{
+			title: '计划创建时间',
+			dataIndex: 'createTimestamp',
+			key: 'createTimestamp',
+			width: 180,
+			render: (_, record) =>
+				record.createTimestamp ? dayjs(record.createTimestamp).format('YYYY-MM-DD HH:mm:ss') : '',
+		},
+		{
+			title: '操作',
+			key: 'action',
+			fixed: 'right',
+			width: 80,
+			render: (_, record) => (
+				<Space size="middle">
+					<Popconfirm
+						title="确定删除该计划吗？"
+						okText="确定"
+						cancelText="取消"
+						onConfirm={() => deletePlan(record)}
+					>
+						<Button type="link">删除</Button>
+					</Popconfirm>
+				</Space>
+			),
+		},
+	];
+
+	const deletePlan = async (record: XcxPlanDataType) => {
+		setIsLoading(true);
+		const res = await http
+			.post(deleteXcxPlanApi, { id: record.id })
+			.catch((err) => {
+				message.error(err?.msg || '删除失败');
+			});
+		if (res?.code === 0) {
+			message.success('删除成功');
+			refresh();
+		} else if (res) {
+			message.error(res?.msg || '删除失败');
+		}
+		setIsLoading(false);
+	};
+
+	const addPunlishPlan = () => {
+		setIsShowAddPunlishPlan(true);
+	};
+
+	const handleAddPunlishPlan = async (
+		params: XcxPlanDataType & { videoList: VideoItem[] }
+	) => {
+		setIsSubmiting(true);
+		const payload = {
+			audiencePackage: params.audiencePackage,
+			remark: params.remark,
+			videoList: (params.videoList || []).map((v) => ({
+				videoId: v.videoId,
+				title: v.customTitle || v.title,
+				cover: v.customCover || v.cover,
+				video: v.video,
+				experimentId: v.experimentId,
+			})),
+		};
+		const res = await http
+			.post<XcxPlanDataType>(saveXcxPlanApi, payload)
+			.catch((err) => {
+				message.error(err?.msg || '保存失败');
+			})
+			.finally(() => {
+				setIsSubmiting(false);
+			});
+		if (res?.code === 0) {
+			message.success('发布计划保存成功');
+			setIsShowAddPunlishPlan(false);
+			refresh();
+		} else if (res) {
+			message.error(res?.msg || '保存失败');
+		}
+	};
+
+	const refresh = (overridePage?: number) => {
+		const targetPage = overridePage ?? pageNum;
+		getXcxPlanList({
+			pageNum: targetPage,
+			pageSize,
+			audiencePackage: audiencePackage || undefined,
+			title: videoTitle || undefined,
+			createTimestampStart: dateRange?.[0]?.unix() ? dateRange[0].unix() * 1000 : undefined,
+			createTimestampEnd: dateRange?.[1]?.unix() ? dateRange[1].unix() * 1000 : undefined,
+		});
+	};
+
+	useEffect(() => {
+		getXcxPlanList({ pageNum: 1, pageSize });
+		// eslint-disable-next-line react-hooks/exhaustive-deps
+	}, []);
+
+	const handleSearch = () => {
+		setPageNum(1);
+		refresh(1);
+	};
+
+	return (
+		<Spin spinning={isLoading || isSubmiting}>
+			<div className="rounded-lg">
+				<div className="text-lg font-medium mb-3">小程序投流</div>
+
+				<div className="flex flex-wrap gap-4 mb-3">
+					<div className="flex items-center gap-2">
+						<span className="text-gray-600">人群包:</span>
+						<Select
+							placeholder="选择人群包"
+							style={{ width: 200 }}
+							value={audiencePackage || undefined}
+							allowClear
+							showSearch
+							filterOption={(input, option) =>
+								(option?.label ?? '').toString().toLowerCase().includes(input.toLowerCase())
+							}
+							options={audiencePackageOptions.map((v) => ({ label: v, value: v }))}
+							onChange={(v) => setAudiencePackage(v || '')}
+						/>
+					</div>
+
+					<div className="flex items-center gap-2">
+						<span className="text-gray-600">视频标题:</span>
+						<Input
+							placeholder="搜索视频标题"
+							style={{ width: 200 }}
+							value={videoTitle}
+							allowClear
+							onPressEnter={handleSearch}
+							onChange={(e) => setVideoTitle(e.target.value)}
+						/>
+					</div>
+
+					<div className="flex items-center gap-2">
+						<RangePicker
+							placeholder={['开始时间', '结束时间']}
+							style={{ width: 270 }}
+							allowClear
+							value={dateRange}
+							onChange={(dates) => setDateRange(dates || undefined)}
+						/>
+					</div>
+
+					<Button type="primary" className="ml-2" onClick={handleSearch}>搜索</Button>
+					<Button type="primary" onClick={addPunlishPlan}>+ 创建发布</Button>
+				</div>
+
+				<Table
+					rowKey={(record) => record.id}
+					className={styles.antTable}
+					columns={columns}
+					dataSource={xcxPlanList}
+					scroll={{ x: 'max-content', y: TableHeight }}
+					pagination={{
+						total: totalSize,
+						pageSize,
+						current: pageNum,
+						showTotal: (total) => `共 ${total} 条`,
+						onChange: (page, size) => {
+							setPageNum(page);
+							setPageSize(size);
+							getXcxPlanList({
+								pageNum: page,
+								pageSize: size,
+								audiencePackage: audiencePackage || undefined,
+								title: videoTitle || undefined,
+								createTimestampStart: dateRange?.[0]?.unix() ? dateRange[0].unix() * 1000 : undefined,
+								createTimestampEnd: dateRange?.[1]?.unix() ? dateRange[1].unix() * 1000 : undefined,
+							});
+						},
+					}}
+				/>
+
+				<XcxPublishPlanModal
+					visible={isShowAddPunlishPlan}
+					onCancel={() => setIsShowAddPunlishPlan(false)}
+					onOk={handleAddPunlishPlan}
+					isSubmiting={isSubmiting}
+				/>
+			</div>
+		</Spin>
+	);
+};
+
+export default XcxTouliuContent;