可视化

visualization/knowledge_search_traverse/index.js

@@ -532,53 +532,71 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
       <div
         onClick={handleCardClick}
         style={{
-          padding: '14px',
-          borderRadius: '20px',
-          border: data.isHighlighted ? '3px solid #ec4899' : '2px solid #fce7f3',
+          padding: '28px',
+          borderRadius: '40px',
+          border: data.isHighlighted ? '6px solid #ec4899' : '4px solid #fce7f3',
           background: data.isHighlighted ? '#eef2ff' : 'white',
-          minWidth: '220px',
-          maxWidth: '300px',
-          boxShadow: data.isHighlighted ? '0 0 0 4px rgba(236, 72, 153, 0.25), 0 4px 16px rgba(236, 72, 153, 0.4)' : '0 4px 12px rgba(236, 72, 153, 0.15)',
+          minWidth: '880px',
+          maxWidth: '1200px',
+          boxShadow: data.isHighlighted ? '0 0 0 8px rgba(236, 72, 153, 0.25), 0 8px 32px rgba(236, 72, 153, 0.4)' : '0 8px 24px rgba(236, 72, 153, 0.15)',
           transition: 'all 0.3s ease',
           cursor: 'pointer',
         }}
       >
         {/* 笔记标题 */}
-        <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: '8px' }}>
+        <div style={{ display: 'flex', alignItems: 'flex-start', marginBottom: '16px' }}>
           <div style={{ flex: 1 }}>
             <div style={{
-              fontSize: '13px',
+              fontSize: '40px',
               fontWeight: '600',
               color: '#831843',
               lineHeight: '1.4',
-              marginBottom: '4px',
+              marginBottom: '8px',
             }}>
               {data.title}
             </div>
           </div>
         </div>
 
+        {/* 🆕 原始问题展示 - 在标题下方 */}
+        {data.originalQuestion && (
+          <div style={{
+            marginBottom: '24px',
+            paddingBottom: '24px',
+            borderBottom: '2px solid #fce7f3',
+          }}>
+            <div style={{
+              fontSize: '40px',
+              color: '#6b21a8',
+              lineHeight: '1.4',
+              fontWeight: '600',
+            }}>
+              <strong style={{ fontWeight: '700' }}>[原始需求问题]</strong> {data.originalQuestion}
+            </div>
+          </div>
+        )}
+
         {/* 评估信息区域 (V2) */}
         {(data.knowledge_score !== undefined || data.post_relevance_score !== undefined || data.is_knowledge !== undefined) && (
           <div style={{
-            marginBottom: '10px',
-            paddingBottom: '8px',
-            borderBottom: '1px solid #fce7f3',
+            marginBottom: '20px',
+            paddingBottom: '16px',
+            borderBottom: '2px solid #fce7f3',
           }}>
             {/* 知识评估 (V2) */}
             {(data.knowledge_score !== undefined || data.is_knowledge !== undefined) && (
-              <div style={{ marginBottom: '8px' }}>
-                <div style={{ display: 'flex', alignItems: 'center', gap: '8px', marginBottom: '4px' }}>
+              <div style={{ marginBottom: '16px' }}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: '16px', marginBottom: '8px' }}>
                   {/* 星级评分 */}
                   {data.knowledge_level && (
-                    <span style={{ fontSize: '12px', lineHeight: '1' }}>
+                    <span style={{ fontSize: '24px', lineHeight: '1' }}>
                       {'⭐'.repeat(data.knowledge_level)}
                     </span>
                   )}
                   {/* 综合得分 */}
                   {data.knowledge_score != null && (
                     <span style={{
-                      fontSize: '11px',
+                      fontSize: '34px',
                       fontWeight: '700',
                       color: data.knowledge_score >= 70 ? '#166534' : data.knowledge_score >= 40 ? '#854d0e' : '#991b1b',
                     }}>
@@ -589,9 +607,9 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
                   {!data.knowledge_score && data.is_knowledge !== undefined && (
                     <span style={{
                       display: 'inline-block',
-                      padding: '3px 10px',
-                      borderRadius: '12px',
-                      fontSize: '11px',
+                      padding: '6px 20px',
+                      borderRadius: '24px',
+                      fontSize: '34px',
                       fontWeight: '600',
                       background: data.is_knowledge ? '#dcfce7' : '#fee2e2',
                       color: data.is_knowledge ? '#166534' : '#991b1b',
@@ -603,10 +621,10 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
                 {/* 知识评估总结 */}
                 {data.knowledge_evaluation?.summary && (
                   <div style={{
-                    fontSize: '10px',
+                    fontSize: '30px',
                     color: '#9f1239',
                     lineHeight: '1.4',
-                    marginTop: '4px',
+                    marginTop: '8px',
                   }}>
                     {data.knowledge_evaluation.summary}
                   </div>
@@ -614,10 +632,10 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
                 {/* 兼容旧版: 知识理由 */}
                 {!data.knowledge_evaluation?.summary && data.knowledge_reason && (
                   <div style={{
-                    fontSize: '10px',
+                    fontSize: '30px',
                     color: '#9f1239',
                     lineHeight: '1.4',
-                    marginTop: '4px',
+                    marginTop: '8px',
                   }}>
                     {data.knowledge_reason}
                   </div>
@@ -631,12 +649,12 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
                 <div style={{
                   display: 'flex',
                   alignItems: 'center',
-                  gap: '6px',
-                  marginBottom: '4px',
+                  gap: '12px',
+                  marginBottom: '8px',
                 }}>
                   {/* V2: 0-100分制 (统一显示分数) */}
                   <span style={{
-                    fontSize: '11px',
+                    fontSize: '34px',
                     fontWeight: '600',
                     color: '#9f1239',
                   }}>
@@ -645,9 +663,9 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
                   {/* V2结论标签 */}
                   {data.relevance_conclusion && (
                     <span style={{
-                      padding: '2px 8px',
-                      borderRadius: '10px',
-                      fontSize: '10px',
+                      padding: '4px 16px',
+                      borderRadius: '20px',
+                      fontSize: '30px',
                       fontWeight: '600',
                       background:
                         data.relevance_conclusion.includes('高度') ? '#dcfce7' :
@@ -662,9 +680,9 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
                   {/* V1兼容: 显示旧的相关性等级 */}
                   {!data.relevance_conclusion && data.relevance_level && (
                     <span style={{
-                      padding: '2px 8px',
-                      borderRadius: '10px',
-                      fontSize: '10px',
+                      padding: '4px 16px',
+                      borderRadius: '20px',
+                      fontSize: '30px',
                       fontWeight: '600',
                       background:
                         data.relevance_level === '高度相关' ? '#dcfce7' :
@@ -680,7 +698,7 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
                 {/* 相关性评估总结 (V2) */}
                 {data.relevance_evaluation?.summary && (
                   <div style={{
-                    fontSize: '10px',
+                    fontSize: '30px',
                     color: '#9f1239',
                     lineHeight: '1.4',
                   }}>
@@ -690,9 +708,9 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
                 {/* 目的性和品类得分 (V2) */}
                 {data.relevance_evaluation?.purpose_score != null && data.relevance_evaluation?.category_score != null && (
                   <div style={{
-                    fontSize: '9px',
+                    fontSize: '28px',
                     color: '#9f1239',
-                    marginTop: '3px',
+                    marginTop: '6px',
                     opacity: 0.8,
                   }}>
                     目的性:{data.relevance_evaluation.purpose_score.toFixed(0)}分(70%) |
@@ -702,7 +720,7 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
                 {/* 兼容旧版: 相关性理由 */}
                 {!data.relevance_evaluation?.summary && data.relevance_reason && (
                   <div style={{
-                    fontSize: '10px',
+                    fontSize: '30px',
                     color: '#9f1239',
                     lineHeight: '1.4',
                   }}>
@@ -718,8 +736,8 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
         {hasImages && (
           <div style={{
             position: 'relative',
-            marginBottom: '8px',
-            borderRadius: '12px',
+            marginBottom: '16px',
+            borderRadius: '24px',
             overflow: 'hidden',
           }}>
             <img
@@ -727,7 +745,7 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
               alt={\`Image \${currentImageIndex + 1}\`}
               style={{
                 width: '100%',
-                aspectRatio: '2/3',
+                aspectRatio: '1/1',
                 height: 'auto',
                 objectFit: 'cover',
                 display: 'block',
@@ -743,20 +761,20 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
                   onClick={prevImage}
                   style={{
                     position: 'absolute',
-                    left: '4px',
+                    left: '8px',
                     top: '50%',
                     transform: 'translateY(-50%)',
                     background: 'rgba(0, 0, 0, 0.5)',
                     color: 'white',
                     border: 'none',
                     borderRadius: '50%',
-                    width: '24px',
-                    height: '24px',
+                    width: '48px',
+                    height: '48px',
                     cursor: 'pointer',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                    fontSize: '14px',
+                    fontSize: '28px',
                   }}
                 >
                   ‹
@@ -765,20 +783,20 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
                   onClick={nextImage}
                   style={{
                     position: 'absolute',
-                    right: '4px',
+                    right: '8px',
                     top: '50%',
                     transform: 'translateY(-50%)',
                     background: 'rgba(0, 0, 0, 0.5)',
                     color: 'white',
                     border: 'none',
                     borderRadius: '50%',
-                    width: '24px',
-                    height: '24px',
+                    width: '48px',
+                    height: '48px',
                     cursor: 'pointer',
                     display: 'flex',
                     alignItems: 'center',
                     justifyContent: 'center',
-                    fontSize: '14px',
+                    fontSize: '28px',
                   }}
                 >
                   ›
@@ -786,13 +804,13 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
                 {/* 图片计数 */}
                 <div style={{
                   position: 'absolute',
-                  bottom: '4px',
-                  right: '4px',
+                  bottom: '8px',
+                  right: '8px',
                   background: 'rgba(0, 0, 0, 0.6)',
                   color: 'white',
-                  padding: '2px 6px',
-                  borderRadius: '10px',
-                  fontSize: '10px',
+                  padding: '4px 12px',
+                  borderRadius: '20px',
+                  fontSize: '20px',
                 }}>
                   {currentImageIndex + 1}/{data.imageList.length}
                 </div>
@@ -805,29 +823,29 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
         {data.interact_info && (
           <div style={{
             display: 'flex',
-            gap: '8px',
-            marginBottom: '8px',
+            gap: '16px',
+            marginBottom: '16px',
             flexWrap: 'wrap',
-            fontSize: '11px',
+            fontSize: '22px',
             color: '#9f1239',
           }}>
             {data.interact_info.liked_count > 0 && (
-              <span style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+              <span style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                 ❤️ {data.interact_info.liked_count}
               </span>
             )}
             {data.interact_info.collected_count > 0 && (
-              <span style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+              <span style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                 ⭐ {data.interact_info.collected_count}
               </span>
             )}
             {data.interact_info.comment_count > 0 && (
-              <span style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+              <span style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                 💬 {data.interact_info.comment_count}
               </span>
             )}
             {data.interact_info.shared_count > 0 && (
-              <span style={{ display: 'flex', alignItems: 'center', gap: '2px' }}>
+              <span style={{ display: 'flex', alignItems: 'center', gap: '4px' }}>
                 🔗 {data.interact_info.shared_count}
               </span>
             )}
@@ -837,29 +855,29 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
         {/* 被哪些query找到 */}
         {data.foundByQueries && data.foundByQueries.length > 0 && (
           <div style={{
-            marginBottom: '8px',
-            padding: '6px 8px',
+            marginBottom: '16px',
+            padding: '12px 16px',
             background: '#f0fdf4',
-            borderRadius: '6px',
-            fontSize: '10px',
+            borderRadius: '12px',
+            fontSize: '20px',
           }}>
             <strong style={{ color: '#16a34a' }}>🔍 被找到:</strong>
-            <div style={{ marginTop: '4px', display: 'flex', flexWrap: 'wrap', gap: '4px' }}>
+            <div style={{ marginTop: '8px', display: 'flex', flexWrap: 'wrap', gap: '8px' }}>
               {data.foundByQueries.map((query, idx) => (
                 <span key={idx} style={{
                   display: 'inline-block',
-                  padding: '2px 6px',
+                  padding: '4px 12px',
                   background: '#dcfce7',
                   color: '#166534',
-                  borderRadius: '4px',
-                  fontSize: '9px',
+                  borderRadius: '8px',
+                  fontSize: '18px',
                 }}>
                   {query}
                 </span>
               ))}
             </div>
             {data.foundInRounds && data.foundInRounds.length > 0 && (
-              <div style={{ marginTop: '4px', color: '#6b7280' }}>
+              <div style={{ marginTop: '8px', color: '#6b7280' }}>
                 出现在: Round {data.foundInRounds.join(', ')}
               </div>
             )}
@@ -868,15 +886,15 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
 
         {/* 标签 */}
         {(data.matchLevel || data.score) && (
-          <div style={{ display: 'flex', gap: '6px', marginBottom: '8px', flexWrap: 'wrap' }}>
+          <div style={{ display: 'flex', gap: '12px', marginBottom: '16px', flexWrap: 'wrap' }}>
             {data.matchLevel && (
               <span style={{
                 display: 'inline-block',
-                padding: '2px 8px',
-                borderRadius: '12px',
+                padding: '4px 16px',
+                borderRadius: '24px',
                 background: '#fff1f2',
                 color: '#be123c',
-                fontSize: '10px',
+                fontSize: '20px',
                 fontWeight: '500',
               }}>
                 {data.matchLevel}
@@ -889,11 +907,11 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
         {/* 描述 */}
         {expanded && data.description && (
           <div style={{
-            fontSize: '11px',
+            fontSize: '22px',
             color: '#9f1239',
             lineHeight: '1.5',
-            paddingTop: '8px',
-            borderTop: '1px solid #fbcfe8',
+            paddingTop: '16px',
+            borderTop: '2px solid #fbcfe8',
           }}>
             {data.description}
           </div>
@@ -902,15 +920,15 @@ function NoteNode({ id, data, sourcePosition, targetPosition }) {
         {/* 评估理由 */}
         {expanded && data.evaluationReason && (
           <div style={{
-            fontSize: '10px',
+            fontSize: '20px',
             color: '#831843',
             lineHeight: '1.5',
-            paddingTop: '8px',
-            marginTop: '8px',
-            borderTop: '1px solid #fbcfe8',
+            paddingTop: '16px',
+            marginTop: '16px',
+            borderTop: '2px solid #fbcfe8',
           }}>
             <strong style={{ color: '#9f1239' }}>评估:</strong>
-            <div style={{ marginTop: '2px' }}>{data.evaluationReason}</div>
+            <div style={{ marginTop: '4px' }}>{data.evaluationReason}</div>
           </div>
         )}
       </div>
@@ -1521,7 +1539,7 @@ function getLayoutedElements(nodes, edges, direction = 'LR') {
     const isHorizontal = direction === 'LR';
     dagreGraph.setGraph({
       rankdir: direction,
-      nodesep: 250,   // 垂直间距 - 增加以适应更高的note节点
+      nodesep: 800,   // 垂直间距 - 增加以适应更高的note节点（卡片高度2600px + 800px间距）
       ranksep: 400,  // 水平间距 - 增加以容纳更宽的节点
     });
 
@@ -1533,7 +1551,7 @@ function getLayoutedElements(nodes, edges, direction = 'LR') {
       // note 节点有轮播图，需要更大的空间
       if (node.type === 'note') {
         nodeWidth = 360;
-        nodeHeight = 550;  // 更新以适应 2:3 比例的轮播图（约450px）+ 其他内容
+        nodeHeight = 2600;  // 更新以适应完整内容：1:1图片(880px) + 标题/原始问题/评估(500px) + 正文/AI提取(最多1200px)
       }
       // analysis 节点内容很多，需要更大的空间
       else if (node.type === 'analysis') {
@@ -1570,7 +1588,7 @@ function getLayoutedElements(nodes, edges, direction = 'LR') {
       let nodeHeight = 220;
       if (node.type === 'note') {
         nodeWidth = 360;
-        nodeHeight = 550;
+        nodeHeight = 2600;  // 与dagre布局参数保持一致
       }
 
       // 将 dagre 的中心点位置转换为 React Flow 的左上角位置
@@ -1602,24 +1620,28 @@ function getLayoutedElements(nodes, edges, direction = 'LR') {
         console.log('  [' + i + '] ' + n.id.substring(0, 40) + '... | pos=(' + n.position.x.toFixed(0) + ', ' + n.position.y.toFixed(0) + ')');
       });
 
-      // 为相邻的 note 节点添加 X 方向的交错
+      // 为相邻的 note 节点添加 X 方向的交错（3个位置：左、中、右）
+      const baseX = noteNodes.length > 0 ? noteNodes[0].position.x : 0;
+      const leftX = baseX - 1500;
+      const centerX = baseX;
+      const rightX = baseX + 1500;
+
       let appliedCount = 0;
       noteNodes.forEach((node, index) => {
-        if (index > 0) {
-          const prevNode = noteNodes[index - 1];
-          const yDistance = node.position.y - prevNode.position.y;
-
-          console.log('检查节点对 [' + (index-1) + '] vs [' + index + ']:');
-          console.log('  Y距离: ' + yDistance.toFixed(0) + 'px');
-
-          // 直接应用偏移，不再判断 Y 距离（因为实际内容高度可能超过预设）
-          // 奇数索引向右偏移，偶数索引向左偏移
-          const offset = (index % 2 === 0) ? -200 : 200;
-          const oldX = node.position.x;
-          node.position.x += offset;
-          appliedCount++;
-          console.log('  ✅ 应用偏移: X ' + oldX.toFixed(0) + ' → ' + node.position.x.toFixed(0) + ' (偏移' + offset + 'px)');
+        const oldX = node.position.x;
+        const position = index % 3;
+
+        if (position === 0) {
+          node.position.x = leftX;
+          console.log('  [' + index + '] 设置为左侧: X ' + oldX.toFixed(0) + ' → ' + node.position.x.toFixed(0));
+        } else if (position === 1) {
+          node.position.x = centerX;
+          console.log('  [' + index + '] 设置为中间: X ' + oldX.toFixed(0) + ' → ' + node.position.x.toFixed(0));
+        } else {
+          node.position.x = rightX;
+          console.log('  [' + index + '] 设置为右侧: X ' + oldX.toFixed(0) + ' → ' + node.position.x.toFixed(0));
         }
+        appliedCount++;
       });
 
       console.log('总共应用了 ' + appliedCount + ' 次偏移');
@@ -1664,6 +1686,9 @@ function transformData(data) {
   const canvasIdToNodeData = {}; // 避免重复创建相同的节点
   let analysisNodeCount = 0; // 用于给analysis节点添加X偏移
 
+  // 🆕 获取原始问题（从root节点）
+  const originalQuestion = data.nodes['root_o']?.query || '';
+
   // 创建节点
   Object.entries(data.nodes).forEach(([originalId, node]) => {
     // 统一处理所有类型的节点
@@ -1707,7 +1732,9 @@ function transformData(data) {
             relevance_level: node.relevance_level || '',
             relevance_reason: node.relevance_reason || '',
             relevance_conclusion: node.relevance_conclusion || '',
-            relevance_evaluation: node.relevance_evaluation || null
+            relevance_evaluation: node.relevance_evaluation || null,
+            // 🆕 原始问题
+            originalQuestion: originalQuestion
           },
           position: { x: 0, y: 0 },
         });
@@ -2045,7 +2072,7 @@ function FlowContent() {
 
         dagreGraph.setGraph({
           rankdir: 'LR',
-          nodesep: 250,   // 增加垂直间距以适应更高的note节点
+          nodesep: 800,   // 与static layout保持一致，确保不重叠
           ranksep: 400,  // 增加水平间距
         });
 
@@ -2056,7 +2083,7 @@ function FlowContent() {
           // note 节点有轮播图，需要更大的空间
           if (node.type === 'note') {
             nodeWidth = 360;
-            nodeHeight = 550;  // 更新以适应 2:3 比例的轮播图（约450px）+ 其他内容
+            nodeHeight = 2600;  // 与static layout保持一致
           }
 
           dagreGraph.setNode(node.id, { width: nodeWidth, height: nodeHeight });
@@ -2076,7 +2103,7 @@ function FlowContent() {
             let nodeHeight = 220;
             if (node.type === 'note') {
               nodeWidth = 360;
-              nodeHeight = 550;  // 更新以适应 2:3 比例的轮播图
+              nodeHeight = 2600;  // 与static layout保持一致
             }
 
             node.position = {
@@ -2102,17 +2129,28 @@ function FlowContent() {
             console.log('  [' + i + '] ' + n.id.substring(0, 40) + '... | pos=(' + n.position.x.toFixed(0) + ', ' + n.position.y.toFixed(0) + ')');
           });
 
-          // 为相邻的 note 节点添加 X 方向的交错
+          // 为相邻的 note 节点添加 X 方向的交错（3个位置：左、中、右）
+          const baseX = noteNodesToStagger.length > 0 ? noteNodesToStagger[0].position.x : 0;
+          const leftX = baseX - 1500;
+          const centerX = baseX;
+          const rightX = baseX + 1500;
+
           let appliedCount = 0;
           noteNodesToStagger.forEach((node, index) => {
-            if (index > 0) {
-              // 奇数索引向右偏移，偶数索引向左偏移
-              const offset = (index % 2 === 0) ? -200 : 200;
-              const oldX = node.position.x;
-              node.position.x += offset;
-              appliedCount++;
-              console.log('[DYNAMIC LAYOUT] ✅ 应用偏移: X ' + oldX.toFixed(0) + ' → ' + node.position.x.toFixed(0) + ' (偏移' + offset + 'px)');
+            const oldX = node.position.x;
+            const position = index % 3;
+
+            if (position === 0) {
+              node.position.x = leftX;
+              console.log('[DYNAMIC LAYOUT] [' + index + '] 设置为左侧: X ' + oldX.toFixed(0) + ' → ' + node.position.x.toFixed(0));
+            } else if (position === 1) {
+              node.position.x = centerX;
+              console.log('[DYNAMIC LAYOUT] [' + index + '] 设置为中间: X ' + oldX.toFixed(0) + ' → ' + node.position.x.toFixed(0));
+            } else {
+              node.position.x = rightX;
+              console.log('[DYNAMIC LAYOUT] [' + index + '] 设置为右侧: X ' + oldX.toFixed(0) + ' → ' + node.position.x.toFixed(0));
             }
+            appliedCount++;
           });
 
           console.log('[DYNAMIC LAYOUT] 总共应用了 ' + appliedCount + ' 次偏移');
@@ -3060,7 +3098,7 @@ function FlowContent() {
             nodeTypes={nodeTypes}
             fitView
             fitViewOptions={{ padding: 0.2, duration: 500 }}
-            minZoom={0.1}
+            minZoom={0.4}
             maxZoom={1.5}
             nodesDraggable={true}
             nodesConnectable={false}