选视频弹窗改 Tab 切换来源,卡片底部展示来源 Tag

- 顶部来源切换从仅 test 的下拉框改为 prod 常驻 Tabs:
  全部 / 粉丝喜欢(prior) / 已发优质相似(posterior) / 票圈热门(hot)
- 卡片左上角来源 Tag 移除
- 卡片底部"推荐指数"去掉,替换为带 icon 的来源 Tag,
  粉丝喜欢=绿(HeartOutlined) / 已发优质相似=蓝(HistoryOutlined) /
  票圈热门=橙(FireOutlined),prod 也展示
- weCom Drawer 标题"内容选取"→"选择视频",与 weGZH 对齐
- weCom 与 weGZH 同步改动

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

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

@@ -12,10 +12,11 @@ import {
 	message,
 	Modal,
 	Tag,
+	Tabs,
 	Popover,
 	Descriptions,
 } from 'antd';
-import { CheckCircleFilled, CaretRightFilled } from '@ant-design/icons';
+import { CheckCircleFilled, CaretRightFilled, HeartOutlined, HistoryOutlined, FireOutlined } from '@ant-design/icons';
 import { VideoListResponse } from '@src/views/publishContent/weGZH/components/types';
 import http from '@src/http';
 import { getVideoContentListApi } from '@src/http/api';
@@ -28,14 +29,19 @@ console.log('[VideoSelectModal] MODE=', import.meta.env.MODE, 'IS_NON_PROD=', IS
 
 type LoadMode = 'replace' | 'append' | 'jump';
 
-const SOURCE_OPTIONS = [
-	{ label: '全部', value: '' },
-	{ label: '先验', value: 'prior' },
-	{ label: '后验', value: 'posterior' },
-	{ label: '全局热门', value: 'hot' },
+const SOURCE_TABS = [
+	{ key: '', label: '全部' },
+	{ key: 'prior', label: '粉丝喜欢' },
+	{ key: 'posterior', label: '已发优质相似' },
+	{ key: 'hot', label: '票圈热门' },
 ];
-const SOURCE_LABEL: Record<string, string> = { prior: '先验', posterior: '后验', hot: '热门' };
-const SOURCE_COLOR: Record<string, string> = { prior: 'blue', posterior: 'green', hot: 'orange' };
+const SOURCE_LABEL: Record<string, string> = { prior: '粉丝喜欢', posterior: '已发优质相似', hot: '票圈热门' };
+const SOURCE_COLOR: Record<string, string> = { prior: 'green', posterior: 'blue', hot: 'orange' };
+const SOURCE_ICON: Record<string, React.ReactNode> = {
+	prior: <HeartOutlined />,
+	posterior: <HistoryOutlined />,
+	hot: <FireOutlined />,
+};
 
 const DEMAND_LABEL_STYLE = { width: 120, padding: '2px 8px', whiteSpace: 'nowrap' as const, backgroundColor: '#e6f4ff' };
 const DEMAND_CONTENT_STYLE = { padding: '2px 8px' };
@@ -345,7 +351,7 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 	return (
 		<>
 			<Drawer
-				title="内容选取"
+				title="选择视频"
 				open={visible}
 				onClose={onClose}
 				width={900}
@@ -375,6 +381,12 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 					</div>
 				}
 			>
+				<Tabs
+					activeKey={source}
+					onChange={handleChangeSource}
+					items={SOURCE_TABS.map(t => ({ key: t.key, label: t.label }))}
+					className="!mb-3"
+				/>
 				<div className="flex flex-wrap gap-2 mb-6">
 					<div className="flex items-center gap-2">
 						<span className="text-gray-600">品类:</span>
@@ -399,17 +411,6 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 						/>
 					</div>
 					<Button type="primary" loading={loading} onClick={handleSearch}>搜索</Button>
-					{IS_NON_PROD && (
-						<div className="flex items-center gap-2 ml-auto">
-							<span className="text-gray-600">来源(测试):</span>
-							<Select
-								value={source}
-								style={{ width: 110 }}
-								onChange={handleChangeSource}
-								options={SOURCE_OPTIONS}
-							/>
-						</div>
-					)}
 				</div>
 
 				<Spin spinning={loading}>
@@ -426,15 +427,6 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 								styles={{ body: { padding: 0 } }}
 								onClick={() => !isDisabled && handleSelectVideo(video.videoId)}
 							>
-								{IS_NON_PROD && video.source && (
-									<Tag
-										color={SOURCE_COLOR[video.source]}
-										className="!absolute !mr-0 z-10"
-										style={{ top: 8, left: 8 }}
-									>
-										{SOURCE_LABEL[video.source] || video.source}
-									</Tag>
-								)}
 								<div className="p-3">
 									<Text type="secondary" className="text-xs">票圈 | 3亿人喜欢的视频平台</Text>
 									<Paragraph className="mt-1 !mb-1" ellipsis={{ rows: 2, tooltip: true }} title={video.title}>{video.title}</Paragraph>
@@ -450,7 +442,11 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ visible, onClose, o
 									</div>
 								</div>
 								<div className="p-3 flex justify-between items-center">
-									<Text type="secondary" className="text-sm">推荐指数: <span className="text-gray-700 font-medium">{video.score?.toFixed(2) || '无'}</span></Text>
+									{video.source ? (
+										<Tag color={SOURCE_COLOR[video.source]} icon={SOURCE_ICON[video.source]} className="!mr-0">
+											{SOURCE_LABEL[video.source] || video.source}
+										</Tag>
+									) : <span />}
 									{isSelected ? (
 										<CheckCircleFilled className="text-green-500 text-xl" />
 									) : (

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

@@ -12,10 +12,11 @@ import {
 	message,
 	Modal,
 	Tag,
+	Tabs,
 	Popover,
 	Descriptions,
 } from 'antd';
-import { CheckCircleFilled, CaretRightFilled } from '@ant-design/icons';
+import { CheckCircleFilled, CaretRightFilled, HeartOutlined, HistoryOutlined, FireOutlined } from '@ant-design/icons';
 import { VideoItem, VideoListResponse } from '../types';
 import http from '@src/http';
 import { getVideoContentListApi } from '@src/http/api';
@@ -29,14 +30,19 @@ const IS_NON_PROD = import.meta.env.MODE !== 'production';
 
 type LoadMode = 'replace' | 'append' | 'jump';
 
-const SOURCE_OPTIONS = [
-	{ label: '全部', value: '' },
-	{ label: '先验', value: 'prior' },
-	{ label: '后验', value: 'posterior' },
-	{ label: '全局热门', value: 'hot' },
+const SOURCE_TABS = [
+	{ key: '', label: '全部' },
+	{ key: 'prior', label: '粉丝喜欢' },
+	{ key: 'posterior', label: '已发优质相似' },
+	{ key: 'hot', label: '票圈热门' },
 ];
-const SOURCE_LABEL: Record<string, string> = { prior: '先验', posterior: '后验', hot: '热门' };
-const SOURCE_COLOR: Record<string, string> = { prior: 'blue', posterior: 'green', hot: 'orange' };
+const SOURCE_LABEL: Record<string, string> = { prior: '粉丝喜欢', posterior: '已发优质相似', hot: '票圈热门' };
+const SOURCE_COLOR: Record<string, string> = { prior: 'green', posterior: 'blue', hot: 'orange' };
+const SOURCE_ICON: Record<string, React.ReactNode> = {
+	prior: <HeartOutlined />,
+	posterior: <HistoryOutlined />,
+	hot: <FireOutlined />,
+};
 
 const DEMAND_LABEL_STYLE = { width: 120, padding: '2px 8px', whiteSpace: 'nowrap' as const, backgroundColor: '#e6f4ff' };
 const DEMAND_CONTENT_STYLE = { padding: '2px 8px' };
@@ -373,6 +379,12 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 					</div>
 				}
 			>
+				<Tabs
+					activeKey={source}
+					onChange={handleChangeSource}
+					items={SOURCE_TABS.map(t => ({ key: t.key, label: t.label }))}
+					className="!mb-3"
+				/>
 				<div className="flex flex-wrap gap-2 mb-6">
 					<div className="flex items-center gap-2">
 						<span className="text-gray-600">品类:</span>
@@ -397,17 +409,6 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 						/>
 					</div>
 					<Button type="primary" loading={loading} onClick={handleSearch}>搜索</Button>
-					{IS_NON_PROD && (
-						<div className="flex items-center gap-2 ml-auto">
-							<span className="text-gray-600">来源(测试):</span>
-							<Select
-								value={source}
-								style={{ width: 110 }}
-								onChange={handleChangeSource}
-								options={SOURCE_OPTIONS}
-							/>
-						</div>
-					)}
 				</div>
 
 				<Spin spinning={loading}>
@@ -424,15 +425,6 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 								styles={{ body: { padding: 0 } }}
 								onClick={() => !isDisabled && handleSelectVideo(video.videoId)}
 							>
-								{IS_NON_PROD && video.source && (
-									<Tag
-										color={SOURCE_COLOR[video.source]}
-										className="!absolute !mr-0 z-10"
-										style={{ top: 8, left: 8 }}
-									>
-										{SOURCE_LABEL[video.source] || video.source}
-									</Tag>
-								)}
 								<div className="p-2">
 									<Text type="secondary" className="text-xs">票圈 | 3亿人喜欢的视频平台</Text>
 									<Paragraph className="mt-1 !mb-1" ellipsis={{ rows: 2, tooltip: true }} title={video.customTitle || video.title}>{video.customTitle || video.title}</Paragraph>
@@ -448,7 +440,11 @@ const VideoSelectModal: React.FC<VideoSelectModalProps> = ({ planType, visible,
 									</div>
 								</div>
 								<div className="p-3 flex justify-between items-center">
-									<Text type="secondary" className="text-sm">推荐指数: <span className="text-gray-700 font-medium">{video.score?.toFixed(2) || '无'}</span></Text>
+									{video.source ? (
+										<Tag color={SOURCE_COLOR[video.source]} icon={SOURCE_ICON[video.source]} className="!mr-0">
+											{SOURCE_LABEL[video.source] || video.source}
+										</Tag>
+									) : <span />}
 									{isSelected ? (
 										<CheckCircleFilled className="text-green-500 text-xl" />
 									) : (