收藏页面

src/views/contentManage/collectVideos/index.tsx

@@ -0,0 +1,11 @@
+import React, { } from 'react';
+
+const CollectVideos: React.FC = () => {
+	return (
+		<div>
+			<h1>Collect Videos</h1>
+		</div>
+	);
+};
+
+export default CollectVideos;

src/views/contentManage/contentManage.router.tsx

@@ -1,4 +1,4 @@
-import Icon, { UploadOutlined, PlayCircleOutlined } from '@ant-design/icons'
+import Icon, { UploadOutlined, PlayCircleOutlined, StarOutlined } from '@ant-design/icons'
 import { AdminRouterItem } from "../../router";
 import React, { Suspense } from 'react';
 
@@ -6,8 +6,8 @@ import LogoIcon from "@src/assets/images/login/logo.svg?react";
 import { Outlet } from "react-router-dom";
 
 // Lazy load components
-const Videos = React.lazy(() => import('./videos/index'));
-
+const Videos = React.lazy(() => import('./uploadVideos/index'));
+const CollectVideos = React.lazy(() => import('./collectVideos/index'));
 // Loading fallback component
 // eslint-disable-next-line react-refresh/only-export-components
 const LazyLoadingFallback = () => (
@@ -47,6 +47,16 @@ const demoRoutes: AdminRouterItem[] = [
 					icon: <UploadOutlined className="!text-[20px]"/>,
 				}
 			},
+			{
+				path: 'collectVideos',
+				element: <LazyComponent Component={CollectVideos} />,
+				meta: {
+					label: "收藏",
+					title: "收藏",
+					key: "/contentManage/collectVideos",
+					icon: <StarOutlined className="!text-[20px]"/>,
+				}
+			}
 		]
 	}
 ]

src/views/publishContent/types.ts

@@ -16,6 +16,7 @@ export interface VideoItem {
   videoLibraryType?: number;
   recommendScore?: number;
   tags?: TagType[];
-  scene?: 0 | 1;
+	scene?: 0 | 1;
+	isCollected?: boolean;
 }
 

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

@@ -14,8 +14,9 @@ import {
 	RadioChangeEvent,
 	Tooltip,
 	Tag,
+	Flex,
 } from 'antd';
-import { CheckCircleFilled, CaretRightFilled, QuestionCircleOutlined } from '@ant-design/icons';
+import { CheckCircleFilled, CaretRightFilled, QuestionCircleOutlined, StarOutlined, StarFilled } from '@ant-design/icons';
 import { VideoItem, VideoListResponse } from '@src/views/publishContent/weGZH/components/types';
 import http from '@src/http';
 import { getVideoContentListApi, getUploadVideoContentListApi } from '@src/http/api';
@@ -249,6 +250,15 @@ const playVideo = (video: VideoItem) => {
 		getVideoList({pageNum: 1, _tags: newTags});
 	}
 
+	const handleCollectVideo = (videoId: number) => {
+		console.log('handleCollectVideo', videoId);
+		const video = videoList.find(v => v.videoId === videoId);
+		if (video) {
+			setVideoList(prev => prev.map(v => v.videoId === videoId ? {...v, isCollected: !v.isCollected} : v));
+			message.success(video.isCollected ? '取消收藏' : '收藏成功');
+		}
+	}
+
 	return (
 		<>
 			<Drawer
@@ -362,7 +372,7 @@ const playVideo = (video: VideoItem) => {
 						return (
 							<Card
 								key={video.videoId}
-								className={`relative ${isDisabled ? 'opacity-50' : 'cursor-pointer'} ${isSelected ? 'border-blue-500 border-2 bg-blue-50 shadow-md' : 'hover:shadow-sm'}`}
+								className={`relative ${isDisabled ? 'opacity-50' : 'cursor-pointer'} ${isSelected ? 'border-2 !bg-blue-50 shadow-md' : 'hover:shadow-sm'}`}
 								styles={{ body: { padding: 0 } }}
 								onClick={() => !isDisabled && handleSelectVideo(video.videoId)}
 							>
@@ -386,11 +396,33 @@ const playVideo = (video: VideoItem) => {
 										<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">{getTagLabel(tag as TagType)}</Tag>) : '无'}</Text>
 									</div>
-									{isSelected ? (
-										<CheckCircleFilled className="text-green-500 text-xl" />
-									) : (
-										<div className={`w-5 h-5 border-2 ${isDisabled ? 'border-gray-200 bg-gray-100' : 'border-gray-300' } rounded-full`}></div>
-									)}
+									<div className="flex flex-col items-center gap-2">
+										{ 
+											video.isCollected ? (
+												<Flex gap={4} onClick={(e) => { e.stopPropagation(); handleCollectVideo(video.videoId); }}>
+													<StarFilled className="text-xl !text-[#1890ff]" />
+													<Text>收藏</Text>
+												</Flex>
+											) : (
+													<Flex gap={4} onClick={(e) => { e.stopPropagation(); handleCollectVideo(video.videoId); }}>
+														<StarOutlined className="text-xl !text-black/50" />
+														<Text className="!text-black/70">收藏</Text>
+													</Flex>
+											)
+										}
+										{isSelected ? (
+											<Flex gap={4}>
+												<CheckCircleFilled className="text-base !text-[#1890ff]" />
+												<Text className="!text-black/70">已选</Text>
+											</Flex>
+										) : (
+											<Flex gap={4} className="items-center">
+												<div className={`w-4 h-4 border-2 ${isDisabled ? 'border-gray-200 bg-gray-100' : 'border-black/50' } rounded-full`}></div>
+												<Text className="!text-black/70">选择</Text>
+											</Flex>
+										)}
+									</div>
+									
 								</div>
 								{/* {isSelected && (
 									<div className="p-3 flex justify-between items-center relative z-10">