Просмотр исходного кода

style: 旧字段 3 列改为多行换行展示

刘立冬 2 дней назад
Родитель
Сommit
35c6d366f5
1 измененных файлов с 19 добавлено и 4 удалено
  1. 19 4
      src/components/RecallResultTable.tsx

+ 19 - 4
src/components/RecallResultTable.tsx

@@ -81,9 +81,9 @@ export default function RecallResultTable({ items }: Props) {
     pointsCol('解构:灵感点', '灵感点', 240),
     pointsCol('解构:灵感点', '灵感点', 240),
     pointsCol('解构:关键点', '关键点', 240),
     pointsCol('解构:关键点', '关键点', 240),
     pointsCol('解构:目的点', '目的点', 240),
     pointsCol('解构:目的点', '目的点', 240),
-    textCol('视频主题-旧', '视频主题', 110),
-    textCol('内容选题-旧', '内容选题', 130),
-    textCol('视频关键词-旧', '视频关键词', 120),
+    textCol('视频主题-旧', '视频主题', 110, true),
+    textCol('内容选题-旧', '内容选题', 130, true),
+    textCol('视频关键词-旧', '视频关键词', 120, true),
     {
     {
       title: '分发曝光pv',
       title: '分发曝光pv',
       key: '分发曝光pv',
       key: '分发曝光pv',
@@ -130,11 +130,16 @@ export default function RecallResultTable({ items }: Props) {
   )
   )
 }
 }
 
 
-/** 长文本列: ellipsis 单行 + hover tooltip 显示完整 */
+/**
+ * 长文本列
+ * - wrap=false (默认): ellipsis 单行 + hover tooltip 看全
+ * - wrap=true: 自动换行,最多 4 行后仍 tooltip 兜底
+ */
 function textCol(
 function textCol(
   title: string,
   title: string,
   key: string,
   key: string,
   width: number,
   width: number,
+  wrap = false,
 ): ColumnsType<VideoMatchEnrichedVO>[number] {
 ): ColumnsType<VideoMatchEnrichedVO>[number] {
   return {
   return {
     title,
     title,
@@ -144,6 +149,16 @@ function textCol(
       const raw = item.videoDetail?.[key]
       const raw = item.videoDetail?.[key]
       const text = typeof raw === 'string' ? raw : ''
       const text = typeof raw === 'string' ? raw : ''
       if (!text) return <Text type="secondary">--</Text>
       if (!text) return <Text type="secondary">--</Text>
+      if (wrap) {
+        return (
+          <Paragraph
+            style={{ marginBottom: 0, fontSize: 12, lineHeight: 1.45, whiteSpace: 'normal', wordBreak: 'break-word' }}
+            ellipsis={{ rows: 4, tooltip: text }}
+          >
+            {text}
+          </Paragraph>
+        )
+      }
       return (
       return (
         <Tooltip title={text} placement="topLeft" overlayStyle={{ maxWidth: 480 }}>
         <Tooltip title={text} placement="topLeft" overlayStyle={{ maxWidth: 480 }}>
           <Text style={{ fontSize: 12 }} ellipsis={{ tooltip: false }}>
           <Text style={{ fontSize: 12 }} ellipsis={{ tooltip: false }}>