feat: 公众号计划迭代

src/views/cooperationAccount/gzh/index.tsx

@@ -8,7 +8,8 @@ import { accountGetAuthQrCode, accountGetAuthResult, accountGetContentType, acco
 interface DataType {
   id: number;
   name: string;
-  ghId: string;
+	ghId: string;
+	type: AccountType;
   contentType: string;
   createTimestamp: number;
 }
@@ -34,10 +35,16 @@ interface AuthResultData {
   ghId: string;
 }
 
+enum AccountType {
+  公众号 = 0,
+  服务号 = 1
+}
+
 const AccountDialog = ({ title, isOpen, handleOk: parentHandleOk, handleCancel, accountData }: AccountDialogProps) => {
   const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
   const [accountName, setAccountName] = useState<string>("授权成功后展示");
-  const [accountId, setAccountId] = useState<string>("授权成功后展示");
+	const [accountId, setAccountId] = useState<string>("授权成功后展示");
+	const [accountType, setAccountType] = useState<AccountType>(AccountType.公众号);
   const [contentTypes, setContentTypes] = useState<string[]>([]);
   const [selectedContentType, setSelectedContentType] = useState<string>("");
   const [authSuccess, setAuthSuccess] = useState<boolean>(false);
@@ -136,7 +143,8 @@ const AccountDialog = ({ title, isOpen, handleOk: parentHandleOk, handleCancel,
       // 如果是编辑模式，填充账号数据并设置为授权成功状态
       if (accountData) {
         setAccountName(accountData.name);
-        setAccountId(accountData.ghId);
+				setAccountId(accountData.ghId);
+				setAccountType(accountData.type);
         setSelectedContentType(accountData.contentType);
         setAuthSuccess(true); // 编辑模式下直接显示授权成功状态
       }
@@ -155,7 +163,8 @@ const AccountDialog = ({ title, isOpen, handleOk: parentHandleOk, handleCancel,
   const resetState = () => {
     setQrCodeUrl("");
     setAccountName("授权成功后展示");
-    setAccountId("授权成功后展示");
+		setAccountId("授权成功后展示");
+		setAccountType(AccountType.公众号);
     setContentTypes([]);
     setSelectedContentType("");
     setAuthSuccess(false); // 重置授权成功状态
@@ -192,7 +201,8 @@ const AccountDialog = ({ title, isOpen, handleOk: parentHandleOk, handleCancel,
       // 准备请求参数
       const params: any = {
         contentType: selectedContentType,
-        ghId: accountId,
+				ghId: accountId,
+				type: accountType,
         name: accountName
       };
 
@@ -276,6 +286,21 @@ const AccountDialog = ({ title, isOpen, handleOk: parentHandleOk, handleCancel,
       <div className={"flex mb-[20px]"}>
         <div className={"w-[100px]"}>公众号ID</div>
         <div className={"flex-1"}>{accountId}</div>
+			</div>
+			<div className={"flex mb-[20px]"}>
+        <div className={"w-[100px] leading-[30px]"}>公众号类别</div>
+        <div className={"flex-1"}>
+					<Select
+						disabled={!!accountData}
+            value={accountType}
+            style={{ width: 130 }}
+            options={[
+              { label: '公众号', value: AccountType.公众号 },
+              { label: '服务号', value: AccountType.服务号 },
+            ]}
+            onChange={(value) => setAccountType(value)}
+          />
+        </div>
       </div>
       <div className={"flex mb-[20px]"}>
         <div className={"w-[100px] leading-[30px]"}>内容类别</div>
@@ -315,7 +340,15 @@ const Gzh: React.FC = () => {
       title: '账号id',
       dataIndex: 'ghId',
       key: 'ghId',
-    },
+		},
+		{
+			title: '公众号类别',
+			dataIndex: 'type',
+			key: 'type',
+			render: (type) => {
+				return type === AccountType.公众号 ? '公众号' : '服务号';
+			}
+		},
     {
       title: '内容类别',
       dataIndex: 'contentType',

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

@@ -1,11 +1,11 @@
 import React from 'react';
 import { Modal, Descriptions } from 'antd';
-import { GzhPlanType } from '../../hooks/useGzhPlanList';
+import { GzhPlanDataType } from '../../hooks/useGzhPlanList';
 import dayjs from 'dayjs';
 interface PunlishPlanDetailModalProps {
   visible: boolean;
   onCancel: () => void;
-  planData: GzhPlanType;
+  planData: GzhPlanDataType;
 }
 
 const PunlishPlanDetailModal: React.FC<PunlishPlanDetailModalProps> = ({

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

@@ -4,7 +4,7 @@ import { CloseOutlined, PlusOutlined, EditOutlined, CaretRightFilled } from '@an
 import VideoSelectModal from '../videoSelectModal';
 import EditTitleCoverModal from '../editTitleCoverModal';
 import { VideoItem } from '../types'; // Import from common types
-import { GzhPlanType } from '../../hooks/useGzhPlanList';
+import { GzhPlanDataType, GzhPlanType } from '../../hooks/useGzhPlanList';
 import { useAccountOptions } from '../../hooks/useAccountOptions';
 
 const { Option } = Select;
@@ -13,30 +13,50 @@ const { Paragraph } = Typography;
 interface AddPunlishPlanModalProps {
 	visible: boolean;
 	onCancel: () => void;
-	onOk: (values: GzhPlanType) => void; // Pass form values on OK
+	onOk: (values: GzhPlanDataType) => void; // Pass form values on OK
 	actionType: 'add' | 'edit';
-	editPlanData?: GzhPlanType;
+	planType: GzhPlanType;
+	editPlanData?: GzhPlanDataType;
 	isSubmiting?: boolean;
 }
 
-const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({ visible, isSubmiting, onCancel, onOk, actionType, editPlanData }) => {
+const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({
+	visible,
+	isSubmiting,
+	onCancel,
+	onOk,
+	actionType,
+	planType,
+	editPlanData
+}) => {
 	const [form] = Form.useForm();
+	const type = Form.useWatch('type', form);
+	const selectVideoType = Form.useWatch('selectVideoType', form);
 	const [selectedVideos, setSelectedVideos] = useState<VideoItem[]>([]);
 	const [isVideoSelectVisible, setIsVideoSelectVisible] = useState(false);
 	const [playingVideo, setPlayingVideo] = useState<VideoItem | null>(null); // State for video player modal
 	const [editingVideo, setEditingVideo] = useState<VideoItem | null>(null); // State for editing modal
-	const { accountOptions } = useAccountOptions();
+	const { accountOptions, getAccountList } = useAccountOptions();
 
 	useEffect(() => {
 		if (actionType === 'edit') {
-			form.setFieldsValue(editPlanData);
+			form.setFieldsValue({...editPlanData, type: editPlanData?.type.toString()});
 			setSelectedVideos(editPlanData?.videoList || []);
 		} else {
 			setSelectedVideos([]);
-			form.resetFields();
+			form.setFieldsValue({ type: planType, publishStage: 1, selectVideoType: 0 });
 		}
 	}, [actionType, editPlanData, visible]);
 
+	useEffect(() => {
+		getAccountList({accountType: planType});
+	}, [planType]);
+
+	const onTypeChange = (value: string) => {
+		form.setFieldsValue({ accountId: undefined });
+		getAccountList({ accountType: value });
+	}
+
 	const handleOk = () => {
 		form
 			.validateFields()
@@ -46,7 +66,12 @@ const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({ visible, isSu
 					message.error('请至少选择一个视频'); // Use Antd message
 					return;
 				}
-				onOk({ ...values, scene: 0, videoList: selectedVideos });
+				const formData = { ...values };
+				if (planType === GzhPlanType.自动回复) { 
+					formData.scene = 0;
+					formData.videoList = selectedVideos;
+				}
+				onOk(formData);
 			})
 			.catch((info) => {
 				console.log('Validate Failed:', info);
@@ -112,7 +137,7 @@ const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({ visible, isSu
 	return (
 		<>
 			<Modal
-				title="创建发布计划"
+				title={actionType === 'add' ? "创建发布计划" : "编辑发布计划"}
 				open={visible}
 				destroyOnClose
 				onCancel={onCancel}
@@ -134,17 +159,45 @@ const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({ visible, isSu
 						hidden
 					>
 					</Form.Item>
+					<Form.Item
+						name="type"
+						label="发布计划类型"
+						layout="horizontal"
+						labelCol={{ span: 4 }}
+						labelAlign='left'
+						required
+					>
+						<Select placeholder="选择计划类型" onChange={onTypeChange} className='!w-50' disabled={actionType === 'edit'}>
+							<Option value={GzhPlanType.自动回复}>自动回复</Option>
+							<Option value={GzhPlanType.服务号推送}>服务号推送</Option>
+						</Select>
+					</Form.Item>
+					<Form.Item
+						name="scene"
+						label="发布场景"
+						layout="horizontal"
+						labelCol={{ span: 4 }}
+						labelAlign='left'
+						initialValue={0}
+						hidden={type !== GzhPlanType.自动回复}
+					>
+						<Select
+							placeholder="发布场景"
+							className='!w-50'
+							options={[{ label: '关注回复', value: 0 }]}>
+						</Select>
+					</Form.Item>
 					<Form.Item
 						name="publishStage"
-						label="发布方"
+						label="发布方式"
 						labelCol={{ span: 4 }}
 						labelAlign='left'
 						layout="horizontal"
-						rules={[{ required: true, message: '请选择发布方' }]}
+						rules={[{ required: true, message: '请选择发布方式' }]}
 					>
-						<Select placeholder="选择发布方" allowClear className='!w-50'>
-							<Option value={0}>平台发布</Option>
-							<Option value={1}>用户发布</Option>
+						<Select placeholder="选择发布方式" allowClear className='!w-50'>
+							<Option value={0} disabled>平台发布</Option>
+							<Option value={1} >用户获取路径</Option>
 						</Select>
 					</Form.Item>
 					<Form.Item
@@ -164,25 +217,23 @@ const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({ visible, isSu
 							filterOption={(input, option) =>
 								(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
 							}
-							options={accountOptions.map(option => ({ label: option.name, value: option.id }))}>
+							options={accountOptions?.map(option => ({ label: option.name, value: option.id }))}>
 						</Select>
 					</Form.Item>
+					
 					<Form.Item
-						name="scene"
-						label="发布场景"
-						layout="horizontal"
+						name="selectVideoType"
+						label="视频选取方式"
 						labelCol={{ span: 4 }}
 						labelAlign='left'
-						initialValue={0}
-					>
-						<Select
-							placeholder="发布场景"
-							className='!w-50'
-							options={[{ label: '关注回复', value: 0 }]}>
+						layout="horizontal"
+						rules={[{ required: true, message: '请选择视频选取方式' }]}>
+						<Select placeholder="选择视频选取方式" allowClear className='!w-50'>
+							<Option value={0} >手动选取</Option>
+							<Option value={1} disabled>自动选取</Option>
 						</Select>
 					</Form.Item>
-
-					<Form.Item label="发布内容" required>
+					<Form.Item label="发布内容" hidden={selectVideoType !== 0} required>
 						<div className="flex flex-wrap gap-4">
 							{selectedVideos.map((video) => (
 								<Card

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

@@ -13,11 +13,15 @@ export const useAccountOptions = () => {
   const [loading, setLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
 
-  const getAccountList = async () => {
+  const getAccountList = async ({accountType}: {accountType?: string}) => {
     try {
       setLoading(true);
       setError(null);
-			const data = await request.get(getGzhAccountOptionsApi);
+			const data = await request.get(getGzhAccountOptionsApi, {
+				params: {
+					accountType
+				}
+			});
       setAccountOptions(data.data as Account[]);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to fetch accounts');
@@ -26,10 +30,6 @@ export const useAccountOptions = () => {
     }
   };
 
-  useEffect(() => {
-    getAccountList();
-  }, []);
-
   return {
     accountOptions,
     getAccountList,

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

@@ -3,13 +3,20 @@ import { getGzhPlanListApi } from '@src/http/api';
 import request from '@src/http/index';
 import { VideoItem } from '../components/types';
 
-export interface GzhPlanType {
+export enum GzhPlanType {
+	自动回复 = '0',
+	服务号推送 = '1',
+}
+
+export interface GzhPlanDataType {
   accountId: number;
   accountName: string;
   createTimestamp: number;
   id: number;
-  publishStage: number;
-  scene: number;
+	publishStage: number;
+	type: GzhPlanType;
+	scene: number;
+	selectVideoType: number;
   title: string[];
 	videoCount: number;
 	videoList: VideoItem[];
@@ -21,17 +28,19 @@ interface GzhPlanListParams {
 	createTimestampStart?: number;
 	publishStage?: number;
 	title?: string;
+	type?: string;
+	selectVideoType?: number;
 	pageNum: number;
 	pageSize: number;
 }
 
 interface GzhPlanListResponse {
-	objs: GzhPlanType[];
+	objs: GzhPlanDataType[];
 	totalSize: number;
 }
 
 export const useGzhPlanList = () => {
-  const [gzhPlanList, setGzhPlanList] = useState<GzhPlanType[]>([]);
+  const [gzhPlanList, setGzhPlanList] = useState<GzhPlanDataType[]>([]);
   const [loading, setLoading] = useState(false);
 	const [error, setError] = useState<string | null>(null);
 	const [totalSize, setTotalSize] = useState(0);
@@ -41,6 +50,8 @@ export const useGzhPlanList = () => {
 		createTimestampEnd,
 		createTimestampStart,
 		publishStage,
+		type = '0',
+		selectVideoType,
 		title,
 		pageNum,
 		pageSize
@@ -53,11 +64,13 @@ export const useGzhPlanList = () => {
 				createTimestampEnd,
 				createTimestampStart,
 				publishStage,
+				type: +type,
+				selectVideoType,
 				title,
 				pageNum,
 				pageSize,
 			});
-      setGzhPlanList(data.data.objs as GzhPlanType[]);
+      setGzhPlanList(data.data.objs as GzhPlanDataType[]);
 			setTotalSize(data.data.totalSize);
     } catch (err) {
       setError(err instanceof Error ? err.message : 'Failed to fetch accounts');

src/views/publishContent/weGZH/index.tsx

@@ -6,7 +6,7 @@ import styles from './index.module.css';
 import PunlishPlanModal from './components/publishPlanModal';
 const { RangePicker } = DatePicker;
 import { useAccountOptions } from '@src/views/publishContent/weGZH/hooks/useAccountOptions';
-import { useGzhPlanList, GzhPlanType } from '@src/views/publishContent/weGZH/hooks/useGzhPlanList';
+import { useGzhPlanList, GzhPlanDataType, GzhPlanType } from '@src/views/publishContent/weGZH/hooks/useGzhPlanList';
 import http from '@src/http';
 import { deleteGzhPlanApi, saveGzhPlanApi } from '@src/http/api';
 import PunlishPlanDetailModal from './components/PunlishPlanDetailModal';
@@ -14,6 +14,7 @@ import PunlishPlanDetailModal from './components/PunlishPlanDetailModal';
 const TableHeight = window.innerHeight - 380;
 
 const WeGZHContent: React.FC = () => {
+	const [planType, setPlanType] = useState<GzhPlanType>(GzhPlanType.自动回复);
 	// 状态管理
 	const [selectedAccount, setSelectedAccount] = useState<string>();
 	const [videoTitle, setVideoTitle] = useState<string>('');
@@ -21,17 +22,18 @@ const WeGZHContent: React.FC = () => {
 	const [dateRange, setDateRange] = useState<[Dayjs | null, Dayjs | null]>();
 	const [isShowAddPunlishPlan, setIsShowAddPunlishPlan] = useState<boolean>(false);
 	const [actionType, setActionType] = useState<'add' | 'edit'>('add');
-	const [editPlanData, setEditPlanData] = useState<GzhPlanType>();
-	const [activeKey, setActiveKey] = useState<string>('1');
+	const [editPlanData, setEditPlanData] = useState<GzhPlanDataType>();
+	const [selectVideoType, setSelectVideoType] = useState<number>();
 	const [isSubmiting, setIsSubmiting] = useState<boolean>(false);
 	const [isLoading, setIsLoading] = useState<boolean>(false);
-	const { accountOptions } = useAccountOptions();
+	const { accountOptions, getAccountList } = useAccountOptions();
 	const { gzhPlanList, getGzhPlanList, totalSize } = useGzhPlanList();
+	const [pageNum, setPageNum] = useState<number>(1);
 
 	const [isShowAddPunlishDetailPlan, setIsShowAddPunlishDetailPlan] = useState<boolean>(false);
 
 	// 表格列配置
-	const columns: TableProps<GzhPlanType>['columns'] = [
+	const columns: TableProps<GzhPlanDataType>['columns'] = [
 		{
 			title: '公众号名称',
 			dataIndex: 'accountName',
@@ -39,7 +41,25 @@ const WeGZHContent: React.FC = () => {
 			width: 160,
 		},
 		{
-			title: '场景',
+			title: '发布方式',
+			dataIndex: 'publishStage',
+			key: 'publishStage',
+			width: 120,
+			render: (_, record) => {
+				return record.publishStage === 0 ? '平台发布' : '用户获取路径';
+			}
+		},
+		{
+			title: '视频选取方式',
+			dataIndex: 'selectVideoType',
+			key: 'selectVideoType',
+			width: 120,
+			render: (_, record) => {
+				return record.selectVideoType === 0 ? '手动选取' : '自动选取';
+			}
+		},
+		{
+			title: '发布场景',
 			dataIndex: 'scene',
 			key: 'scene',
 			width: 120,
@@ -59,7 +79,7 @@ const WeGZHContent: React.FC = () => {
 			key: 'title',
 			ellipsis: true,
 			render: (_, record) => {
-				return record.videoList.map(video => {
+				return record?.videoList?.map(video => {
 					return <Typography.Paragraph style={{ maxWidth: '300px' }} ellipsis={{ rows: 1, tooltip: true }} key={video.videoId}>{video.customTitle || video.title}</Typography.Paragraph>
 				})
 			}
@@ -73,15 +93,7 @@ const WeGZHContent: React.FC = () => {
 				return record.createTimestamp ? dayjs(record.createTimestamp).format('YYYY-MM-DD HH:mm:ss') : '';
 			}
 		},
-		{
-			title: '发布方',
-			dataIndex: 'publishStage',
-			key: 'publishStage',
-			width: 120,
-			render: (_, record) => {
-				return record.publishStage === 0 ? '平台发布' : '用户发布';
-			}
-		},
+		
 		{
 			title: '操作',
 			key: 'action',
@@ -95,8 +107,9 @@ const WeGZHContent: React.FC = () => {
 			),
 		},
 	];
+	const cloumns2: TableProps<GzhPlanDataType>['columns'] = columns.filter(item => item.title !== '发布场景');
 
-	const deletePlan = async (record: GzhPlanType) => {
+	const deletePlan = async (record: GzhPlanDataType) => {
 		setIsLoading(true);
 		const res = await http.post(deleteGzhPlanApi, {
 			id: record.id,
@@ -106,8 +119,10 @@ const WeGZHContent: React.FC = () => {
 		if (res?.code === 0) {
 			message.success('删除成功');
 			getGzhPlanList({
+				type: planType,
 				pageNum: 1,
 				pageSize: 10,
+				selectVideoType: selectVideoType,
 			});
 		} else {
 			message.error(res?.msg || '删除失败');
@@ -115,13 +130,13 @@ const WeGZHContent: React.FC = () => {
 		setIsLoading(false);
 	}
 
-	const editPlan = (record: GzhPlanType) => {
+	const editPlan = (record: GzhPlanDataType) => {
 		setEditPlanData(record);
 		setActionType('edit');
 		setIsShowAddPunlishPlan(true);
 	};
 
-	const editPlanDetail = (record: GzhPlanType) => {
+	const editPlanDetail = (record: GzhPlanDataType) => {
 		setEditPlanData(record);
 		setActionType('edit');
 		setIsShowAddPunlishDetailPlan(true);
@@ -133,9 +148,12 @@ const WeGZHContent: React.FC = () => {
 		setIsShowAddPunlishPlan(true);
 	}
 
-	const handleAddPunlishPlan = async (params: GzhPlanType) => {
+	const handleAddPunlishPlan = async (params: GzhPlanDataType) => {
 		setIsSubmiting(true);
-		const res = await http.post<GzhPlanType>(saveGzhPlanApi, params)
+		if (params.type !== planType) { 
+			setPlanType(params.type as GzhPlanType);
+		}
+		const res = await http.post<GzhPlanDataType>(saveGzhPlanApi, params)
 			.catch(err => {
 				message.error(err.msg);
 			})
@@ -144,7 +162,9 @@ const WeGZHContent: React.FC = () => {
 			});
 		if (res?.code === 0) {
 			message.success('发布计划创建成功');
+			
 			getGzhPlanList({
+				type: params.type,
 				pageNum: 1,
 				pageSize: 10,
 			});
@@ -155,19 +175,29 @@ const WeGZHContent: React.FC = () => {
 	}
 
 	useEffect(() => {
+		setSelectedAccount(undefined);
+		setVideoTitle('');
+		setSelectedPublisher(undefined);
+		setSelectVideoType(undefined);
+		setDateRange(undefined);
+		setPageNum(1);
+		getAccountList({ accountType: planType });
 		getGzhPlanList({
+			type: planType,
 			pageNum: 1,
 			pageSize: 10,
 		});
-	}, []);
+	}, [planType]);
 
 	const handleSearch = () => {
 		getGzhPlanList({
 			pageNum: 1,
 			pageSize: 10,
 			title: videoTitle,
+			type: planType,
 			accountId: selectedAccount ? parseInt(selectedAccount) : undefined,
 			publishStage: selectedPublisher,
+			selectVideoType: selectVideoType,
 			createTimestampStart: dateRange?.[0]?.unix() ? dateRange[0].unix() * 1000 : undefined,
 			createTimestampEnd: dateRange?.[1]?.unix() ? dateRange[1].unix() * 1000 : undefined,
 		});
@@ -181,10 +211,10 @@ const WeGZHContent: React.FC = () => {
 				{/* 搜索区域 */}
 				<div className="flex flex-wrap gap-4 mb-3">
 					<div className="flex items-center gap-2">
-						<span className="text-gray-600">公众号名称:</span>
+						<span className="text-gray-600">{ planType === GzhPlanType.自动回复 ? '公众号名称' : '服务号名称' }:</span>
 						<Select
-							placeholder="选择公众号"
-							style={{ width: 200 }}
+							placeholder={planType === GzhPlanType.自动回复 ? '选择公众号' : '选择服务号'}
+							style={{ width: 150 }}
 							value={selectedAccount}
 							onChange={setSelectedAccount}
 							allowClear
@@ -192,7 +222,7 @@ const WeGZHContent: React.FC = () => {
 							filterOption={(input, option) =>
 								(option?.label ?? '').toLowerCase().includes(input.toLowerCase())
 							}
-							options={accountOptions.map(item => ({ label: item.name, value: item.id }))}
+							options={accountOptions?.map(item => ({ label: item.name, value: item.id })) || []}
 						/>
 					</div>
 
@@ -209,16 +239,30 @@ const WeGZHContent: React.FC = () => {
 					</div>
 
 					<div className="flex items-center gap-2">
-						<span className="text-gray-600">发布方:</span>
+						<span className="text-gray-600">发布方式:</span>
 						<Select
-							placeholder="选择发布方"
-							style={{ width: 200 }}
+							placeholder="选择发布方式"
+							style={{ width: 140 }}
 							value={selectedPublisher}
 							onChange={setSelectedPublisher}
 							allowClear
 							options={[
 								{ label: '平台发布', value: 0 },
-								{ label: '用户发布', value: 1 },
+								{ label: '用户获取路径', value: 1 },
+							]}
+						/>
+					</div>
+					<div className="flex items-center gap-2">
+						<span className="text-gray-600">视频选取方式:</span>
+						<Select
+							placeholder="视频选取方式"
+							style={{ width: 130 }}
+							value={selectVideoType}
+							onChange={setSelectVideoType}
+							allowClear
+							options={[
+								{ label: '手动选取', value: 0 },
+								{ label: '自动选取', value: 1 },
 							]}
 						/>
 					</div>
@@ -226,7 +270,7 @@ const WeGZHContent: React.FC = () => {
 					<div className="flex items-center gap-2">
 						<RangePicker
 							placeholder={['开始时间', '结束时间']}
-							style={{ width: 400 }}
+							style={{ width: 270 }}
 							allowClear
 							value={dateRange}
 							onChange={(dates) => {
@@ -238,15 +282,16 @@ const WeGZHContent: React.FC = () => {
 					<Button type="primary" className="ml-2" onClick={ handleSearch}>搜索</Button>
 				</div>
 				<Tabs
-					defaultActiveKey="1"
+					defaultActiveKey={ GzhPlanType.自动回复}
 					type="card"
 					size="large"
 					className={styles.antTableTab}
 					items={[
-						{ label: '自动回复', key: '1' },
+						{ label: '自动回复', key: GzhPlanType.自动回复 },
+						{ label: '服务号推送', key: GzhPlanType.服务号推送 },
 					]}
-					activeKey={activeKey}
-					onChange={setActiveKey}
+					activeKey={planType}
+					onChange={(key) => setPlanType(key as GzhPlanType)}
 					tabBarExtraContent={
 						{ right: <Button type="primary" onClick={addPunlishPlan}>+ 创建发布</Button> }}
 				/>
@@ -254,17 +299,20 @@ const WeGZHContent: React.FC = () => {
 				<Table
 					rowKey={(record) => record.id}
 					className={styles.antTable}
-					columns={columns}
+					columns={planType === GzhPlanType.自动回复 ? columns : cloumns2}
 					dataSource={gzhPlanList}
 					scroll={{ x: 'max-content', y: TableHeight }}
 					pagination={{
 						total: totalSize,
 						pageSize: 10,
+						current: pageNum,
 						showTotal: (total) => `共 ${total} 条`,
 						onChange: (page) => getGzhPlanList({
 							pageNum: page,
 							pageSize: 10,
 							title: videoTitle,
+							type: planType,
+							selectVideoType: selectVideoType,
 							accountId: selectedAccount ? parseInt(selectedAccount) : undefined,
 							publishStage: selectedPublisher,
 							createTimestampStart: dateRange?.[0]?.unix() ? dateRange[0].unix() * 1000 : undefined,
@@ -274,14 +322,15 @@ const WeGZHContent: React.FC = () => {
 				/>
 				<PunlishPlanModal
 					visible={isShowAddPunlishPlan}
-					onCancel={() => { 
+					onCancel={() => {
 						setEditPlanData(undefined);
 						setIsShowAddPunlishPlan(false);
-					} }
+					}}
 					onOk={handleAddPunlishPlan}
 					actionType={actionType}
 					editPlanData={editPlanData}
 					isSubmiting={isSubmiting}
+					planType={ planType}
 				/>
 				<PunlishPlanDetailModal
 					visible={isShowAddPunlishDetailPlan}
@@ -289,7 +338,7 @@ const WeGZHContent: React.FC = () => {
 						setEditPlanData(undefined);
 						setIsShowAddPunlishDetailPlan(false);
 					}}
-					planData={editPlanData as GzhPlanType}
+					planData={editPlanData as GzhPlanDataType}
 				/>
 			</div>
 		</Spin>