tag修改为枚举形式

src/views/publishContent/types.ts

@@ -1,3 +1,5 @@
+import { TagType } from "./weCom/components/videoSelectModal";
+
 export interface VideoItem {
   videoId: number;
   video: string;
@@ -13,7 +15,7 @@ export interface VideoItem {
   channelFissionRate?: number;
   videoLibraryType?: number;
   recommendScore?: number;
-  tags?: string[];
+  tags?: TagType[];
   scene?: 0 | 1;
 }
 

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

@@ -2,7 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { Modal, Form, Input, Select, Button, Card, Typography, message } from 'antd';
-import { WeComPlanType, WeVideoItem, AddWeComPlanParam } from '../../type';
+import { WeComPlanType, WeVideoItem, AddWeComPlanParam, VideoSearchPlanType } from '../../type';
 import { CloseOutlined, PlusOutlined, CaretRightFilled } from '@ant-design/icons';
 import VideoSelectModal from '../videoSelectModal';
 import VideoPlayModal from '../videoPlayModal';
@@ -17,7 +17,8 @@ const AddPlanModal: React.FC<{
 	isLoading: boolean;
 }> = ({ initType, visible, onClose, onOk, isLoading }) => {
 	const [form] = Form.useForm();
-	const type = Form.useWatch(['type'], form);
+	const type = Form.useWatch('type', form);
+	const [defaultSearchVideoType, setDefaultSearchVideoType] = useState<VideoSearchPlanType>(VideoSearchPlanType.企微社群);
 	const [selectedVideos, setSelectedVideos] = useState<WeVideoItem[]>([]);
 	const [isVideoSelectVisible, setIsVideoSelectVisible] = useState(false);
 	const [playingVideo, setPlayingVideo] = useState<WeVideoItem | null>(null);
@@ -29,6 +30,10 @@ const AddPlanModal: React.FC<{
 		});
 		setSelectedVideos([]);
 	}, [visible]);
+
+	useEffect(() => {
+		setDefaultSearchVideoType(type === WeComPlanType.社群 ? VideoSearchPlanType.企微社群 : VideoSearchPlanType.企微自动回复);
+	}, [type]);
 	const handleSelectVideo = (videos: WeVideoItem[]) => {
 		setSelectedVideos(videos);
 		setIsVideoSelectVisible(false);
@@ -178,9 +183,9 @@ const AddPlanModal: React.FC<{
 		}}
 		onOk={handleSelectVideo}
 		initialSelectedIds={selectedVideos.map((video) => video.videoId)}
-			planType={type}
-			selectedVideos={selectedVideos}
-		/>
+		planType={defaultSearchVideoType}
+		selectedVideos={selectedVideos}
+	/>
 		<VideoPlayModal
 			visible={!!playingVideo}
 			onClose={() => setPlayingVideo(null)}

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

@@ -20,10 +20,9 @@ import { VideoItem, VideoListResponse } from '@src/views/publishContent/weGZH/co
 import http from '@src/http';
 import { getVideoContentListApi, getUploadVideoContentListApi } from '@src/http/api';
 import { useVideoCategoryOptions } from '@src/views/publishContent/weGZH/hooks/useVideoCategoryOptions';
-import { WeComPlanType, VideoSearchPlanType } from '@src/views/publishContent/weCom/type'
+import { VideoSearchPlanType } from '@src/views/publishContent/weCom/type'
 import { enumToOptions } from '@src/utils/helper';
 import { isNil } from 'lodash';
-import { GzhPlanType } from '@src/views/publishContent/weGZH/hooks/useGzhPlanList';
 
 export enum VideoLibraryType {
 	平台视频库 = 0,
@@ -33,7 +32,7 @@ export enum VideoLibraryType {
 const { Text, Paragraph } = Typography;
 
 interface VideoSelectModalProps {
-	planType: WeComPlanType | GzhPlanType;
+	planType: VideoSearchPlanType;
 	visible: boolean;
 	onClose: () => void;
 	onOk: (selectedVideos: VideoItem[]) => void;
@@ -62,12 +61,17 @@ export enum SortTypeEnum {
 	更新时间 = 1,
 }
 
-export const Tags = [
-	'票圈受欢迎',
-	'同类用户喜欢',
-	'你的用户爱看',
-	'猜TA想看',
-];
+export enum TagType {
+	票圈受欢迎 = 1,
+	用户喜欢 = 2,
+	你的渠道热门 = 3,
+	猜你的用户爱分享 = 4,
+}
+
+export interface TagTypeOptions {
+	label: string;
+	value: TagType;
+}
 
 interface GetVideoListParams {
 	pageNum?: number;
@@ -75,17 +79,18 @@ interface GetVideoListParams {
 	_sortType?: SortTypeEnum;
 	_recentNotUsed?: RecentNotUsedType | '';
 	_category?: string;
-	_tags?: string[];
+	_tags?: TagType[];
 	_videoLibraryType?: VideoLibraryType;
 }
 
 const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, onOk, planType, initialSelectedIds = [], selectedVideos = [], defaultVideoLibraryType }) => {
 	const { videoCategoryOptions } = useVideoCategoryOptions();
+	const [tagOptions, setTagOptions] = useState<TagTypeOptions[]>([]);
 	const [category, setCategory] = useState<string>();
 	// const [sort, setSort] = useState<VideoSortType>(VideoSortType.推荐指数);
 	const [sortType, setSortType] = useState<SortTypeEnum>(SortTypeEnum.推荐指数);
 	const [recentNotUsed, setRecentNotUsed] = useState<RecentNotUsedType>();
-	const [tags, setTags] = useState<string[]>([]);
+	const [tags, setTags] = useState<TagType[]>([]);
 	const [searchTerm, setSearchTerm] = useState<string>('');
 	const [currentPage, setCurrentPage] = useState(1);
 	const [pageSize, setPageSize] = useState(10);
@@ -98,20 +103,6 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 	const [videoLibraryType, setVideoLibraryType] = useState<VideoLibraryType>(defaultVideoLibraryType || VideoLibraryType.平台视频库);
 	const MAX_SELECTION = 3;
 
-	const getVideoListType = (planType: GzhPlanType | WeComPlanType) => {
-		if (planType === GzhPlanType.自动回复) {
-			return VideoSearchPlanType.自动回复;
-		} else if (planType === GzhPlanType.公众号推送) {
-			return VideoSearchPlanType.公众号推送;
-		} else if (planType === GzhPlanType.服务号推送) {
-			return VideoSearchPlanType.服务号推送;
-		} else if (planType === WeComPlanType.社群) {
-			return VideoSearchPlanType.企微社群;
-		} else {
-			return VideoSearchPlanType.企微自动回复;
-		}
-	}
-
 	useEffect(() => {
 		if (defaultVideoLibraryType) {
 			setVideoLibraryType(defaultVideoLibraryType);
@@ -133,7 +124,7 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 			recentNotUsed: isNil(_recentNotUsed) ? recentNotUsed : _recentNotUsed,
 			sortType: isNil(_sortType) ? sortType : _sortType,
 			tags: isNil(_tags) ? tags : _tags,
-			type: getVideoListType(planType),
+			type: planType,
 			pageNum: pageNum || currentPage,
 			pageSize: _pageSize || pageSize,
 		};
@@ -150,12 +141,22 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 		}
 	}
 
+	const getTagLabel = (tagType: TagType) => {
+		switch (tagType) {
+			case TagType.用户喜欢:
+				return planType === VideoSearchPlanType.企微社群 || planType === VideoSearchPlanType.企微自动回复 ? '企微用户喜欢' : '公众号用户喜欢';
+			default:
+				return TagType[tagType];
+		}
+	}
+
 	useEffect(() => {
 		if (visible) {
 			console.log('selectedVideos', selectedVideos);
 			// 初始化时设置 selectedVideos
 			setVideoList(selectedVideos);
 			setVideoListAll(selectedVideos);
+			setTagOptions(enumToOptions(TagType).map(option => ({ label: getTagLabel(option.value as TagType), value: option.value as TagType })));
 			getVideoList({});
 		} else { 
 			setRecentNotUsed(undefined);
@@ -242,8 +243,8 @@ const playVideo = (video: VideoItem) => {
 		}
 	}
 
-	const handleTagChange = (tag: string, checked: boolean) => {
-		const newTags = checked ? [...tags, tag] : tags.filter(t => t !== tag);
+	const handleTagChange = (tag: TagType, checked: boolean) => {
+		const newTags = checked ? [...tags, tag as TagType] : tags.filter(t => t !== tag as TagType);
 		setTags(newTags);
 		getVideoList({pageNum: 1, _tags: newTags});
 	}
@@ -343,13 +344,13 @@ const playVideo = (video: VideoItem) => {
 					</div>
 					<div className="flex flex-wrap gap-2 mb-6 ml-10 items-center">
 						<span className="text-gray-600 ">推荐标签：</span>
-						{Tags.map<React.ReactNode>((tag) => (
+						{tagOptions.map<React.ReactNode>((option) => (
 							<Tag.CheckableTag
-								key={tag}
-								checked={tags.includes(tag)}
-								onChange={(checked) => handleTagChange(tag, checked)}
+								key={option.value}
+								checked={tags.includes(option.value)}
+								onChange={(checked) => handleTagChange(option.value, checked)}
 							>
-								{tag}
+								{option.label}
 							</Tag.CheckableTag>
 						))}
 					</div>
@@ -383,7 +384,7 @@ const playVideo = (video: VideoItem) => {
 									<div className="flex flex-1 flex-col gap-1">
 										<Text type="secondary" className="text-xs">推荐指数: {video.recommendScore?.toFixed(2) || '无'}</Text>
 										<Text type="secondary" className="text-xs">推荐标签: {'tags' in video && video.tags && video.tags.length > 0 ?
-											video.tags.map(tag => <Tag key={tag} className="text-xs">{tag}</Tag>) : '无'}</Text>
+											video.tags.map(tag => <Tag key={tag} className="text-xs">{getTagLabel(tag as TagType)}</Tag>) : '无'}</Text>
 									</div>
 									{isSelected ? (
 										<CheckCircleFilled className="text-green-500 text-xl" />

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

@@ -328,7 +328,7 @@ const AddPunlishPlanModal: React.FC<AddPunlishPlanModalProps> = ({ visible, isSu
 
 			{/* Video Selection Drawer */}
 			<VideoSelectModal
-				planType={planType}
+				planType={type}
 				visible={isVideoSelectVisible}
 				onClose={handleVideoSelectionCancel}
 				onOk={handleVideoSelectionOk}