浮层拆需求侧/匹配视频两块,蓝橙色区分,需求侧置顶

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

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

@@ -37,18 +37,28 @@ const SOURCE_OPTIONS = [
 const SOURCE_LABEL: Record<string, string> = { prior: '先验', posterior: '后验', hot: '热门' };
 const SOURCE_COLOR: Record<string, string> = { prior: 'blue', posterior: 'green', hot: 'orange' };
 
+const DEMAND_LABEL_STYLE = { width: 120, padding: '2px 8px', whiteSpace: 'nowrap' as const, backgroundColor: '#e6f4ff' };
+const DEMAND_CONTENT_STYLE = { padding: '2px 8px' };
+const MATCH_LABEL_STYLE = { width: 120, padding: '2px 8px', whiteSpace: 'nowrap' as const, backgroundColor: '#fff7e6' };
+const MATCH_CONTENT_STYLE = { padding: '2px 8px' };
+
 const renderDemandDetail = (video: WeVideoItem) => (
 	<div style={{ maxWidth: 620, maxHeight: '70vh', overflowY: 'auto' }}>
 		<Descriptions
 			size="small"
 			column={1}
 			bordered
-			labelStyle={{ width: 120, padding: '2px 8px', whiteSpace: 'nowrap' }}
-			contentStyle={{ padding: '2px 8px' }}
+			title={<span style={{ color: '#1677ff' }}>需求侧</span>}
+			labelStyle={DEMAND_LABEL_STYLE}
+			contentStyle={DEMAND_CONTENT_STYLE}
 		>
-			<Descriptions.Item label="来源">{video.source ? SOURCE_LABEL[video.source] || video.source : '-'}</Descriptions.Item>
+			<Descriptions.Item label="渠道类名称">{video.channelName || '-'}</Descriptions.Item>
+			<Descriptions.Item label="三级渠道">{video.channelLevel3 || '-'}</Descriptions.Item>
 			<Descriptions.Item label="人群分组">{video.crowdSegment || '-'}</Descriptions.Item>
 			<Descriptions.Item label="需求策略">{video.demandStrategy || '-'}</Descriptions.Item>
+			<Descriptions.Item label="需求类型">{video.demandType || '-'}</Descriptions.Item>
+			<Descriptions.Item label="需求过滤排序">{video.demandFilterSortStrategy || '-'}</Descriptions.Item>
+			<Descriptions.Item label="驱动维度时间">{video.driveDimensionTime || '-'}</Descriptions.Item>
 			<Descriptions.Item label="点位类型">{video.pointType || '-'}</Descriptions.Item>
 			<Descriptions.Item label="标准元素">{video.standardElement || '-'}</Descriptions.Item>
 			<Descriptions.Item label="维度">{video.dimension || '-'}</Descriptions.Item>
@@ -62,20 +72,26 @@ const renderDemandDetail = (video: WeVideoItem) => (
 			<Descriptions.Item label="合作伙伴">{video.partner || '-'}</Descriptions.Item>
 			<Descriptions.Item label="账号">{video.account || '-'}</Descriptions.Item>
 			<Descriptions.Item label="场景值">{video.sceneValue || '-'}</Descriptions.Item>
-			<Descriptions.Item label="需求过滤排序">{video.demandFilterSortStrategy || '-'}</Descriptions.Item>
-			<Descriptions.Item label="需求类型">{video.demandType || '-'}</Descriptions.Item>
-			<Descriptions.Item label="驱动维度时间">{video.driveDimensionTime || '-'}</Descriptions.Item>
 			<Descriptions.Item label="实验id">{video.experimentId || '-'}</Descriptions.Item>
-			<Descriptions.Item label="score">{video.score != null ? video.score.toFixed(4) : '-'}</Descriptions.Item>
-			<Descriptions.Item label="相似度">{video.sim != null ? video.sim.toFixed(4) : '-'}</Descriptions.Item>
-			<Descriptions.Item label="rov">{video.rov != null ? video.rov.toFixed(4) : '-'}</Descriptions.Item>
-			<Descriptions.Item label="渠道类名称">{video.channelName || '-'}</Descriptions.Item>
-			<Descriptions.Item label="三级渠道">{video.channelLevel3 || '-'}</Descriptions.Item>
 			<Descriptions.Item label="需求侧视频数">{video.videoCount != null ? video.videoCount : '-'}</Descriptions.Item>
 			<Descriptions.Item label="需求侧访问UV">{video.visitUv != null ? video.visitUv : '-'}</Descriptions.Item>
 			<Descriptions.Item label="需求侧UV占比">{video.uvRatio != null ? video.uvRatio.toFixed(4) : '-'}</Descriptions.Item>
 			<Descriptions.Item label="需求侧总ROV">{video.totalRov != null ? video.totalRov.toFixed(4) : '-'}</Descriptions.Item>
 		</Descriptions>
+		<div style={{ height: 8 }} />
+		<Descriptions
+			size="small"
+			column={1}
+			bordered
+			title={<span style={{ color: '#fa8c16' }}>匹配视频</span>}
+			labelStyle={MATCH_LABEL_STYLE}
+			contentStyle={MATCH_CONTENT_STYLE}
+		>
+			<Descriptions.Item label="来源">{video.source ? SOURCE_LABEL[video.source] || video.source : '-'}</Descriptions.Item>
+			<Descriptions.Item label="score">{video.score != null ? video.score.toFixed(4) : '-'}</Descriptions.Item>
+			<Descriptions.Item label="相似度">{video.sim != null ? video.sim.toFixed(4) : '-'}</Descriptions.Item>
+			<Descriptions.Item label="rov">{video.rov != null ? video.rov.toFixed(4) : '-'}</Descriptions.Item>
+		</Descriptions>
 	</div>
 );
 

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

@@ -38,18 +38,28 @@ const SOURCE_OPTIONS = [
 const SOURCE_LABEL: Record<string, string> = { prior: '先验', posterior: '后验', hot: '热门' };
 const SOURCE_COLOR: Record<string, string> = { prior: 'blue', posterior: 'green', hot: 'orange' };
 
+const DEMAND_LABEL_STYLE = { width: 120, padding: '2px 8px', whiteSpace: 'nowrap' as const, backgroundColor: '#e6f4ff' };
+const DEMAND_CONTENT_STYLE = { padding: '2px 8px' };
+const MATCH_LABEL_STYLE = { width: 120, padding: '2px 8px', whiteSpace: 'nowrap' as const, backgroundColor: '#fff7e6' };
+const MATCH_CONTENT_STYLE = { padding: '2px 8px' };
+
 const renderDemandDetail = (video: VideoItem) => (
 	<div style={{ maxWidth: 620, maxHeight: '70vh', overflowY: 'auto' }}>
 		<Descriptions
 			size="small"
 			column={1}
 			bordered
-			labelStyle={{ width: 120, padding: '2px 8px', whiteSpace: 'nowrap' }}
-			contentStyle={{ padding: '2px 8px' }}
+			title={<span style={{ color: '#1677ff' }}>需求侧</span>}
+			labelStyle={DEMAND_LABEL_STYLE}
+			contentStyle={DEMAND_CONTENT_STYLE}
 		>
-			<Descriptions.Item label="来源">{video.source ? SOURCE_LABEL[video.source] || video.source : '-'}</Descriptions.Item>
+			<Descriptions.Item label="渠道类名称">{video.channelName || '-'}</Descriptions.Item>
+			<Descriptions.Item label="三级渠道">{video.channelLevel3 || '-'}</Descriptions.Item>
 			<Descriptions.Item label="人群分组">{video.crowdSegment || '-'}</Descriptions.Item>
 			<Descriptions.Item label="需求策略">{video.demandStrategy || '-'}</Descriptions.Item>
+			<Descriptions.Item label="需求类型">{video.demandType || '-'}</Descriptions.Item>
+			<Descriptions.Item label="需求过滤排序">{video.demandFilterSortStrategy || '-'}</Descriptions.Item>
+			<Descriptions.Item label="驱动维度时间">{video.driveDimensionTime || '-'}</Descriptions.Item>
 			<Descriptions.Item label="点位类型">{video.pointType || '-'}</Descriptions.Item>
 			<Descriptions.Item label="标准元素">{video.standardElement || '-'}</Descriptions.Item>
 			<Descriptions.Item label="维度">{video.dimension || '-'}</Descriptions.Item>
@@ -63,20 +73,26 @@ const renderDemandDetail = (video: VideoItem) => (
 			<Descriptions.Item label="合作伙伴">{video.partner || '-'}</Descriptions.Item>
 			<Descriptions.Item label="账号">{video.account || '-'}</Descriptions.Item>
 			<Descriptions.Item label="场景值">{video.sceneValue || '-'}</Descriptions.Item>
-			<Descriptions.Item label="需求过滤排序">{video.demandFilterSortStrategy || '-'}</Descriptions.Item>
-			<Descriptions.Item label="需求类型">{video.demandType || '-'}</Descriptions.Item>
-			<Descriptions.Item label="驱动维度时间">{video.driveDimensionTime || '-'}</Descriptions.Item>
 			<Descriptions.Item label="实验id">{video.experimentId || '-'}</Descriptions.Item>
-			<Descriptions.Item label="score">{video.score != null ? video.score.toFixed(4) : '-'}</Descriptions.Item>
-			<Descriptions.Item label="相似度">{video.sim != null ? video.sim.toFixed(4) : '-'}</Descriptions.Item>
-			<Descriptions.Item label="rov">{video.rov != null ? video.rov.toFixed(4) : '-'}</Descriptions.Item>
-			<Descriptions.Item label="渠道类名称">{video.channelName || '-'}</Descriptions.Item>
-			<Descriptions.Item label="三级渠道">{video.channelLevel3 || '-'}</Descriptions.Item>
 			<Descriptions.Item label="需求侧视频数">{video.videoCount != null ? video.videoCount : '-'}</Descriptions.Item>
 			<Descriptions.Item label="需求侧访问UV">{video.visitUv != null ? video.visitUv : '-'}</Descriptions.Item>
 			<Descriptions.Item label="需求侧UV占比">{video.uvRatio != null ? video.uvRatio.toFixed(4) : '-'}</Descriptions.Item>
 			<Descriptions.Item label="需求侧总ROV">{video.totalRov != null ? video.totalRov.toFixed(4) : '-'}</Descriptions.Item>
 		</Descriptions>
+		<div style={{ height: 8 }} />
+		<Descriptions
+			size="small"
+			column={1}
+			bordered
+			title={<span style={{ color: '#fa8c16' }}>匹配视频</span>}
+			labelStyle={MATCH_LABEL_STYLE}
+			contentStyle={MATCH_CONTENT_STYLE}
+		>
+			<Descriptions.Item label="来源">{video.source ? SOURCE_LABEL[video.source] || video.source : '-'}</Descriptions.Item>
+			<Descriptions.Item label="score">{video.score != null ? video.score.toFixed(4) : '-'}</Descriptions.Item>
+			<Descriptions.Item label="相似度">{video.sim != null ? video.sim.toFixed(4) : '-'}</Descriptions.Item>
+			<Descriptions.Item label="rov">{video.rov != null ? video.rov.toFixed(4) : '-'}</Descriptions.Item>
+		</Descriptions>
 	</div>
 );