选视频框

src/http/api.ts

@@ -35,6 +35,7 @@ export const deleteQwPlanApi = `${import.meta.env.VITE_API_URL}/contentPlatform/
 export const getVideoContentCategoryListApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/videoContentCategoryList`
 export const getVideoContentCoverFrameListApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/videoContentCoverFrameList`
 export const getVideoContentListApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/videoContentList`
+export const getUploadVideoContentListApi = `${import.meta.env.VITE_API_URL}/contentPlatform/plan/upload/videoContentList`
 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`
 

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

@@ -14,11 +14,16 @@ import {
 import { CheckCircleFilled, CaretRightFilled } from '@ant-design/icons';
 import { VideoListResponse } from '@src/views/publishContent/weGZH/components/types';
 import http from '@src/http';
-import { getVideoContentListApi } from '@src/http/api';
+import { getVideoContentListApi, getUploadVideoContentListApi } from '@src/http/api';
 import { useVideoCategoryOptions } from '@src/views/publishContent/weGZH/hooks/useVideoCategoryOptions';
 import { WeComPlanType, WeVideoItem, VideoSearchPlanType } from '@src/views/publishContent/weCom/type'
 import { enumToOptions } from '@src/utils/helper';
 
+export enum VideoLibraryType {
+	平台视频库 = 0,
+	我的上传 = 1,
+}
+
 const { Text, Paragraph } = Typography;
 
 interface VideoSelectModalProps {
@@ -48,20 +53,27 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 	const [videoListAll, setVideoListAll] = useState<WeVideoItem[]>([]);
 	const [selectedVideoIds, setSelectedVideoIds] = useState<Set<number>>(new Set(initialSelectedIds));
 	const [playingVideo, setPlayingVideo] = useState<WeVideoItem | null>(null);
+	const [videoLibraryType, setVideoLibraryType] = useState<VideoLibraryType>(VideoLibraryType.平台视频库);
 	const MAX_SELECTION = 3;
 
 	const getVideoList = async (pageNum?: number, _pageSize?: number) => {
 		setLoading(true);
 		setCurrentPage(pageNum || currentPage);
 		setPageSize(_pageSize || pageSize);
-		const res = await http.post<VideoListResponse>(getVideoContentListApi, {
+
+		// 根据视频库类型选择不同的API
+		const apiUrl = videoLibraryType === VideoLibraryType.平台视频库 ? getVideoContentListApi : getUploadVideoContentListApi;
+
+		const requestParams = {
 			category,
 			title: searchTerm,
 			sort,
 			type: planType === WeComPlanType.社群 ? VideoSearchPlanType.企微社群 : VideoSearchPlanType.企微自动回复,
 			pageNum: pageNum || currentPage,
 			pageSize: _pageSize || pageSize,
-		}).catch(() => {
+		};
+
+		const res = await http.post<VideoListResponse>(apiUrl, requestParams).catch(() => {
 			message.error('获取视频列表失败');
 		}).finally(() => {
 			setLoading(false);
@@ -74,6 +86,11 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 		}
 	}
 
+	// 监听视频库类型变化，重新加载数据
+	useEffect(() => {
+		getVideoList();
+	}, [videoLibraryType]);
+
 	useEffect(() => {
 		getVideoList();
 	}, []);
@@ -151,7 +168,7 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 				title="内容选取"
 				open={visible}
 				onClose={onClose}
-				width={800}
+				width={900}
 				placement="right"
 				loading={loading}
 				destroyOnClose
@@ -180,7 +197,16 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 					</div>
 				}
 			>
-				<div className="flex flex-wrap gap-4 mb-6">
+				<div className="flex flex-wrap gap-2 mb-6">
+					<div className="flex items-center gap-2">
+						<span className="text-gray-600">视频来源:</span>
+						<Select
+							style={{ width: 120 }}
+							value={videoLibraryType}
+							onChange={setVideoLibraryType}
+							options={enumToOptions(VideoLibraryType)}
+						/>
+					</div>
 					<div className="flex items-center gap-2">
 						<span className="text-gray-600">排序选项:</span>
 						<Select
@@ -194,7 +220,7 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 						<span className="text-gray-600">品类:</span>
 						<Select
 							placeholder="选择品类"
-							style={{ width: 160 }}
+							style={{ width: 120 }}
 							value={category}
 							allowClear
 							onChange={setCategory}
@@ -205,7 +231,7 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 						<span className="text-gray-600">视频标题:</span>
 						<Input
 							placeholder="搜索视频标题"
-							style={{ width: 180 }}
+							style={{ width: 120 }}
 							value={searchTerm}
 							allowClear
 							onChange={e => setSearchTerm(e.target.value)}

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

@@ -14,9 +14,9 @@ import {
 import { CheckCircleFilled, CaretRightFilled } from '@ant-design/icons';
 import { VideoItem, VideoListResponse } from '../types';
 import http from '@src/http';
-import { getVideoContentListApi } from '@src/http/api';
+import { getVideoContentListApi, getUploadVideoContentListApi } from '@src/http/api';
 import { useVideoCategoryOptions } from '../../hooks/useVideoCategoryOptions';
-import { VideoSortType } from '@src/views/publishContent/weCom/components/videoSelectModal';
+import { VideoSortType, VideoLibraryType } from '@src/views/publishContent/weCom/components/videoSelectModal';
 import { GzhPlanType } from '../../hooks/useGzhPlanList';
 import { VideoSearchPlanType } from '@src/views/publishContent/weCom/type';
 import { enumToOptions } from '@src/utils/helper';
@@ -45,6 +45,7 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 	const [videoListAll, setVideoListAll] = useState<VideoItem[]>([]);
 	const [selectedVideoIds, setSelectedVideoIds] = useState<Set<number>>(new Set(initialSelectedIds));
 	const [playingVideo, setPlayingVideo] = useState<VideoItem | null>(null);
+	const [videoLibraryType, setVideoLibraryType] = useState<VideoLibraryType>(VideoLibraryType.平台视频库);
 	const MAX_SELECTION = 3;
 
 	const getVideoListType = (planType: GzhPlanType) => {
@@ -61,14 +62,19 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 		setLoading(true);
 		setCurrentPage(pageNum || currentPage);
 		setPageSize(_pageSize || pageSize);
-		const res = await http.post<VideoListResponse>(getVideoContentListApi, {
+		// 根据视频库类型选择不同的API
+		const apiUrl = videoLibraryType === VideoLibraryType.平台视频库 ? getVideoContentListApi : getUploadVideoContentListApi;
+
+		const requestParams = {
 			category,
 			title: searchTerm,
 			sort,
 			type: getVideoListType(planType),
 			pageNum: pageNum || currentPage,
 			pageSize: _pageSize || pageSize,
-		}).catch(() => {
+		};
+
+		const res = await http.post<VideoListResponse>(apiUrl, requestParams).catch(() => {
 			message.error('获取视频列表失败');
 		}).finally(() => {
 			setLoading(false);
@@ -80,6 +86,13 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 		}
 	}
 
+	// 监听视频库类型变化，重新加载数据
+	useEffect(() => {
+		if (visible) {
+			getVideoList();
+		}
+	}, [videoLibraryType, visible]);
+
 	useEffect(() => {
 		if (visible) {
 			setVideoList(selectedVideos);
@@ -134,10 +147,10 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 	return (
 		<>
 			<Drawer
-				title="内容选取"
+				title="选择视频"
 				open={visible}
 				onClose={onClose}
-				width={800}
+				width={900}
 				placement="right"
 				loading={loading}
 				styles={{ footer: { textAlign: 'right', padding: '10px 24px' } }}
@@ -165,21 +178,30 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 					</div>
 				}
 			>
-				<div className="flex flex-wrap gap-4 mb-6">
-					<div className="flex items-center gap-2">
-						<span className="text-gray-600">排序选项:</span>
-						<Select
-							style={{ width: 120 }}
-							value={sort}
-							onChange={setSort}
-							options={enumToOptions(VideoSortType)}
-						/>
-					</div>
+				<div className="flex flex-wrap gap-2 mb-6">
+			<div className="flex items-center gap-2">
+				<span className="text-gray-600">视频来源:</span>
+				<Select
+					style={{ width: 120 }}
+					value={videoLibraryType}
+					onChange={setVideoLibraryType}
+					options={enumToOptions(VideoLibraryType)}
+				/>
+			</div>
+			<div className="flex items-center gap-2">
+				<span className="text-gray-600">排序选项:</span>
+				<Select
+					style={{ width: 120 }}
+					value={sort}
+					onChange={setSort}
+					options={enumToOptions(VideoSortType)}
+				/>
+			</div>
 					<div className="flex items-center gap-2">
 						<span className="text-gray-600">品类:</span>
 						<Select
 							placeholder="选择品类"
-							style={{ width: 160 }}
+							style={{ width: 120 }}
 							value={category}
 							allowClear
 							onChange={setCategory}
@@ -190,7 +212,7 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 						<span className="text-gray-600">视频标题:</span>
 						<Input
 							placeholder="搜索视频标题"
-							style={{ width: 180 }}
+							style={{ width: 120 }}
 							value={searchTerm}
 							onPressEnter={handleSearch}
 							allowClear