fix: 优化markdown解析器

apps/desktop/docs/markdown_parser_byte_offset_fix.md

@@ -0,0 +1,143 @@
+# Markdown解析器byte_offset计算修复报告
+
+## 问题描述
+
+根据promptx/tauri-desktop-app-expert开发规范的要求，检查了markdown解析逻辑中byte_offset的计算是否正确。发现了以下关键问题：
+
+### 1. 原始问题
+
+**问题1：错误的偏移量计算方式**
+- 原代码在解析过程中手动累加`current_offset`，这种方式不准确
+- 没有正确处理pulldown-cmark解析器的事件顺序和内容映射关系
+- 对于UTF-8字符的字节长度计算不准确
+
+**问题2：缺乏UTF-8支持验证**
+- 缺少针对UTF-8字符的byte_offset计算测试
+- 没有验证字符偏移和字节偏移之间的转换正确性
+
+## 修复方案
+
+### 1. 使用pulldown-cmark的offset_iter
+
+**修复前：**
+```rust
+let parser = CmarkParser::new(text);
+let mut events = Vec::new();
+let mut current_offset = 0;
+
+for event in parser {
+    events.push((event.clone(), current_offset));
+    // 手动计算偏移量（不准确）
+    match &event {
+        Event::Text(text) => current_offset += text.len(),
+        // ...
+    }
+}
+```
+
+**修复后：**
+```rust
+let parser = CmarkParser::new_with_broken_link_callback(
+    text,
+    pulldown_cmark::Options::all(),
+    None
+);
+let mut events = Vec::new();
+
+// 使用pulldown-cmark提供的正确偏移量信息
+for (event, range) in parser.into_offset_iter() {
+    events.push((event, range.start));
+}
+```
+
+### 2. 正确的字节偏移计算
+
+**修复前：**
+```rust
+// 使用不准确的字符串长度
+end: self.calculate_position(source_text, current_offset + text.len())
+```
+
+**修复后：**
+```rust
+// 使用正确的字节长度
+end: self.calculate_position_from_byte_offset(source_text, *byte_offset + text.as_bytes().len())
+```
+
+### 3. 增强的位置计算方法
+
+添加了专门的方法来处理字节偏移和字符偏移之间的转换：
+
+```rust
+/// 根据字节偏移计算位置信息
+fn calculate_position_from_byte_offset(&self, text: &str, byte_offset: usize) -> Position
+
+/// 根据字符偏移计算位置信息  
+fn calculate_position_from_char_offset(&self, text: &str, char_offset: usize) -> Position
+```
+
+## 测试验证
+
+### 1. ASCII字符测试
+```rust
+#[test]
+fn test_byte_offset_calculation_ascii() {
+    let text = "Hello\nWorld";
+    // 验证各个位置的字节偏移计算正确性
+}
+```
+
+### 2. UTF-8字符测试
+```rust
+#[test]
+fn test_byte_offset_calculation_utf8() {
+    let text = "你好\n世界"; // UTF-8字符测试
+    // 验证中文字符的字节偏移计算正确性
+}
+```
+
+### 3. 字符偏移转换测试
+```rust
+#[test]
+fn test_char_offset_to_byte_offset_conversion() {
+    // 验证字符偏移和字节偏移之间的双向转换
+}
+```
+
+### 4. 复杂markdown测试
+```rust
+#[test]
+fn test_complex_markdown_byte_offsets() {
+    let markdown = "# 标题\n\n这是**粗体**和*斜体*文本。\n\n```rust\nfn main() {\n    println!(\"你好\");\n}\n```";
+    // 验证复杂markdown结构的偏移量计算
+}
+```
+
+## 修复结果
+
+### 测试通过情况
+- ✅ ASCII字符byte_offset计算正确
+- ✅ UTF-8字符byte_offset计算正确  
+- ✅ 字符偏移与字节偏移转换正确
+- ✅ 复杂markdown结构解析正确
+- ✅ 位置一致性验证通过
+- ✅ 所有原有测试继续通过
+
+### 性能影响
+- 使用pulldown-cmark的内置offset_iter，性能更优
+- 减少了手动计算的开销
+- 提高了解析准确性
+
+## 符合开发规范
+
+根据promptx/tauri-desktop-app-expert规范要求：
+
+1. **类型安全**：✅ 使用Rust的类型系统确保偏移量计算的安全性
+2. **性能优先**：✅ 使用高效的pulldown-cmark内置方法
+3. **代码质量**：✅ 添加了全面的单元测试
+4. **错误处理**：✅ 完善的边界检查和错误处理
+5. **文档完整**：✅ 详细的代码注释和测试文档
+
+## 总结
+
+通过这次修复，markdown解析器的byte_offset计算现在完全正确，特别是对UTF-8字符的支持。修复遵循了Tauri开发规范，确保了代码质量、性能和可维护性。所有测试都通过，证明修复是成功的且没有破坏现有功能。

apps/desktop/src-tauri/src/infrastructure/markdown_parser.rs

@@ -229,31 +229,17 @@ impl MarkdownParser {
             return Err(anyhow!("Text too large: {} bytes", text.len()));
         }
 
-        // 使用pulldown-cmark解析
-        let parser = CmarkParser::new(text);
+        // 使用pulldown-cmark解析，带有偏移量信息
+        let parser = CmarkParser::new_with_broken_link_callback(
+            text,
+            pulldown_cmark::Options::all(),
+            None
+        );
         let mut events = Vec::new();
-        let mut current_offset = 0;
 
-        // 收集所有事件和位置信息
-        for event in parser {
-            events.push((event.clone(), current_offset));
-
-            // 根据事件类型正确计算字节偏移
-            match &event {
-                Event::Text(text) => {
-                    current_offset += text.len();
-                }
-                Event::Code(code) => {
-                    current_offset += code.len();
-                }
-                Event::SoftBreak | Event::HardBreak => {
-                    current_offset += 1; // 换行符通常是1字节
-                }
-                _ => {
-                    // 对于其他事件类型，不增加偏移量
-                    // 因为它们通常是结构性的，不对应实际的文本内容
-                }
-            }
+        // 收集所有事件，pulldown-cmark会提供正确的偏移量信息
+        for (event, range) in parser.into_offset_iter() {
+            events.push((event, range.start));
         }
 
         // 构建AST
@@ -285,18 +271,16 @@ impl MarkdownParser {
             attributes: HashMap::new(),
         };
 
-        let mut current_offset = 0;
-
-        for (event, _) in events {
+        for (event, byte_offset) in events {
             match event {
                 Event::Start(tag) => {
-                    let node = self.create_node_from_tag(tag, current_offset, source_text)?;
+                    let node = self.create_node_from_tag(tag, *byte_offset, source_text)?;
                     stack.push(node);
                 }
                 Event::End(_) => {
                     if let Some(mut node) = stack.pop() {
-                        // 更新结束位置
-                        node.range.end = self.calculate_position(source_text, current_offset);
+                        // 更新结束位置 - 使用当前字节偏移
+                        node.range.end = self.calculate_position_from_byte_offset(source_text, *byte_offset);
 
                         if let Some(parent) = stack.last_mut() {
                             parent.children.push(node);
@@ -310,8 +294,8 @@ impl MarkdownParser {
                         node_type: MarkdownNodeType::Text,
                         content: text.to_string(),
                         range: Range {
-                            start: self.calculate_position(source_text, current_offset),
-                            end: self.calculate_position(source_text, current_offset + text.len()),
+                            start: self.calculate_position_from_byte_offset(source_text, *byte_offset),
+                            end: self.calculate_position_from_byte_offset(source_text, *byte_offset + text.as_bytes().len()),
                         },
                         children: Vec::new(),
                         attributes: HashMap::new(),
@@ -328,8 +312,8 @@ impl MarkdownParser {
                         node_type: MarkdownNodeType::InlineCode,
                         content: code.to_string(),
                         range: Range {
-                            start: self.calculate_position(source_text, current_offset),
-                            end: self.calculate_position(source_text, current_offset + code.len()),
+                            start: self.calculate_position_from_byte_offset(source_text, *byte_offset),
+                            end: self.calculate_position_from_byte_offset(source_text, *byte_offset + code.as_bytes().len()),
                         },
                         children: Vec::new(),
                         attributes: HashMap::new(),
@@ -346,8 +330,8 @@ impl MarkdownParser {
                         node_type: MarkdownNodeType::LineBreak,
                         content: "\n".to_string(),
                         range: Range {
-                            start: self.calculate_position(source_text, current_offset),
-                            end: self.calculate_position(source_text, current_offset + 1),
+                            start: self.calculate_position_from_byte_offset(source_text, *byte_offset),
+                            end: self.calculate_position_from_byte_offset(source_text, *byte_offset + 1),
                         },
                         children: Vec::new(),
                         attributes: HashMap::new(),
@@ -370,7 +354,7 @@ impl MarkdownParser {
 
     /// 从pulldown-cmark标签创建节点
     fn create_node_from_tag(&self, tag: &Tag, offset: usize, source_text: &str) -> Result<MarkdownNode> {
-        let start_pos = self.calculate_position(source_text, offset);
+        let start_pos = self.calculate_position_from_byte_offset(source_text, offset);
 
         let (node_type, attributes) = match tag {
             Tag::Heading(level, _, _) => {
@@ -895,6 +879,188 @@ mod tests {
         assert!(parse_result.statistics.total_nodes > 1000);
     }
 
+    #[test]
+    fn test_byte_offset_calculation_ascii() {
+        let parser = create_test_parser();
+        let text = "Hello\nWorld";
+
+        // Test position at start
+        let pos = parser.calculate_position_from_byte_offset(text, 0);
+        assert_eq!(pos.line, 0);
+        assert_eq!(pos.column, 0);
+        assert_eq!(pos.offset, 0);
+        assert_eq!(pos.byte_offset, 0);
+
+        // Test position after "Hello"
+        let pos = parser.calculate_position_from_byte_offset(text, 5);
+        assert_eq!(pos.line, 0);
+        assert_eq!(pos.column, 5);
+        assert_eq!(pos.offset, 5);
+        assert_eq!(pos.byte_offset, 5);
+
+        // Test position after newline
+        let pos = parser.calculate_position_from_byte_offset(text, 6);
+        assert_eq!(pos.line, 1);
+        assert_eq!(pos.column, 0);
+        assert_eq!(pos.offset, 6);
+        assert_eq!(pos.byte_offset, 6);
+
+        // Test position at end
+        let pos = parser.calculate_position_from_byte_offset(text, text.len());
+        assert_eq!(pos.line, 1);
+        assert_eq!(pos.column, 5);
+        assert_eq!(pos.offset, 11);
+        assert_eq!(pos.byte_offset, 11);
+    }
+
+    #[test]
+    fn test_byte_offset_calculation_utf8() {
+        let parser = create_test_parser();
+        let text = "你好\n世界"; // UTF-8 characters: 你(3 bytes) 好(3 bytes) \n(1 byte) 世(3 bytes) 界(3 bytes)
+
+        // Test position at start
+        let pos = parser.calculate_position_from_byte_offset(text, 0);
+        assert_eq!(pos.line, 0);
+        assert_eq!(pos.column, 0);
+        assert_eq!(pos.offset, 0);
+        assert_eq!(pos.byte_offset, 0);
+
+        // Test position after first character "你" (3 bytes)
+        let pos = parser.calculate_position_from_byte_offset(text, 3);
+        assert_eq!(pos.line, 0);
+        assert_eq!(pos.column, 1);
+        assert_eq!(pos.offset, 1);
+        assert_eq!(pos.byte_offset, 3);
+
+        // Test position after "你好" (6 bytes)
+        let pos = parser.calculate_position_from_byte_offset(text, 6);
+        assert_eq!(pos.line, 0);
+        assert_eq!(pos.column, 2);
+        assert_eq!(pos.offset, 2);
+        assert_eq!(pos.byte_offset, 6);
+
+        // Test position after newline (7 bytes)
+        let pos = parser.calculate_position_from_byte_offset(text, 7);
+        assert_eq!(pos.line, 1);
+        assert_eq!(pos.column, 0);
+        assert_eq!(pos.offset, 3);
+        assert_eq!(pos.byte_offset, 7);
+
+        // Test position after "世" (10 bytes)
+        let pos = parser.calculate_position_from_byte_offset(text, 10);
+        assert_eq!(pos.line, 1);
+        assert_eq!(pos.column, 1);
+        assert_eq!(pos.offset, 4);
+        assert_eq!(pos.byte_offset, 10);
+    }
+
+    #[test]
+    fn test_char_offset_to_byte_offset_conversion() {
+        let parser = create_test_parser();
+        let text = "你好\n世界";
+
+        // Test char offset 0 -> byte offset 0
+        let pos = parser.calculate_position_from_char_offset(text, 0);
+        assert_eq!(pos.byte_offset, 0);
+
+        // Test char offset 1 -> byte offset 3 (after "你")
+        let pos = parser.calculate_position_from_char_offset(text, 1);
+        assert_eq!(pos.byte_offset, 3);
+
+        // Test char offset 2 -> byte offset 6 (after "你好")
+        let pos = parser.calculate_position_from_char_offset(text, 2);
+        assert_eq!(pos.byte_offset, 6);
+
+        // Test char offset 3 -> byte offset 7 (after newline)
+        let pos = parser.calculate_position_from_char_offset(text, 3);
+        assert_eq!(pos.byte_offset, 7);
+
+        // Test char offset 4 -> byte offset 10 (after "世")
+        let pos = parser.calculate_position_from_char_offset(text, 4);
+        assert_eq!(pos.byte_offset, 10);
+
+        // Test char offset 5 -> byte offset 13 (after "世界")
+        let pos = parser.calculate_position_from_char_offset(text, 5);
+        assert_eq!(pos.byte_offset, 13);
+    }
+
+    #[test]
+    fn test_markdown_parsing_with_utf8() {
+        let mut parser = create_test_parser();
+        let markdown = "# 中文标题\n\n这是一段**中文**内容。";
+
+        let result = parser.parse(markdown);
+        assert!(result.is_ok(), "Failed to parse UTF-8 markdown");
+
+        let parse_result = result.unwrap();
+        assert_eq!(parse_result.source_text, markdown);
+
+        // Verify that positions are calculated correctly
+        let root = &parse_result.root;
+        assert_eq!(root.range.start.byte_offset, 0);
+        assert_eq!(root.range.end.byte_offset, markdown.len());
+
+        // Check that child nodes have valid byte offsets
+        for child in &root.children {
+            assert!(child.range.start.byte_offset <= child.range.end.byte_offset);
+            assert!(child.range.end.byte_offset <= markdown.len());
+        }
+    }
+
+    #[test]
+    fn test_complex_markdown_byte_offsets() {
+        let mut parser = create_test_parser();
+        let markdown = "# 标题\n\n这是**粗体**和*斜体*文本。\n\n```rust\nfn main() {\n    println!(\"你好\");\n}\n```\n\n- 列表项1\n- 列表项2";
+
+        let result = parser.parse(markdown);
+        assert!(result.is_ok(), "Failed to parse complex UTF-8 markdown");
+
+        let parse_result = result.unwrap();
+
+        // 验证所有节点的字节偏移量都在有效范围内
+        fn validate_node_offsets(node: &MarkdownNode, source_len: usize) {
+            assert!(node.range.start.byte_offset <= node.range.end.byte_offset,
+                "Start offset should be <= end offset for node: {:?}", node.node_type);
+            assert!(node.range.end.byte_offset <= source_len,
+                "End offset should be <= source length for node: {:?}", node.node_type);
+
+            // 验证行列号与字节偏移的一致性
+            assert!(node.range.start.line <= node.range.end.line,
+                "Start line should be <= end line for node: {:?}", node.node_type);
+
+            if node.range.start.line == node.range.end.line {
+                assert!(node.range.start.column <= node.range.end.column,
+                    "Start column should be <= end column on same line for node: {:?}", node.node_type);
+            }
+
+            // 递归验证子节点
+            for child in &node.children {
+                validate_node_offsets(child, source_len);
+            }
+        }
+
+        validate_node_offsets(&parse_result.root, markdown.len());
+    }
+
+    #[test]
+    fn test_position_consistency() {
+        let parser = create_test_parser();
+        let text = "Hello 世界\nNew line";
+
+        // 测试字节偏移和字符偏移之间的一致性
+        for i in 0..text.chars().count() {
+            let pos_from_char = parser.calculate_position_from_char_offset(text, i);
+            let pos_from_byte = parser.calculate_position_from_byte_offset(text, pos_from_char.byte_offset);
+
+            assert_eq!(pos_from_char.line, pos_from_byte.line,
+                "Line mismatch at char offset {}", i);
+            assert_eq!(pos_from_char.column, pos_from_byte.column,
+                "Column mismatch at char offset {}", i);
+            assert_eq!(pos_from_char.offset, pos_from_byte.offset,
+                "Char offset mismatch at char offset {}", i);
+        }
+    }
+
     #[test]
     fn test_parser_config() {
         let config = MarkdownParserConfig {

apps/desktop/src/components/EnhancedMarkdownRenderer.tsx

@@ -7,6 +7,8 @@ import {
   MarkdownNodeType,
   ValidationResult
 } from '../types/markdown';
+import ImageCard from './ImageCard';
+import ImagePreviewModal from './ImagePreviewModal';
 
 /**
  * 增强Markdown渲染器属性接口
@@ -45,6 +47,9 @@ export const EnhancedMarkdownRenderer: React.FC<EnhancedMarkdownRendererProps> =
   const [isLoading, setIsLoading] = useState(false);
   const [error, setError] = useState<string | null>(null);
   const [validation, setValidation] = useState<ValidationResult | null>(null);
+  const [selectedGrounding, setSelectedGrounding] = useState<any>(null);
+  const [showGroundingModal, setShowGroundingModal] = useState(false);
+  const [previewSource, setPreviewSource] = useState<any>(null);
 
   // 解析Markdown内容
   const parseContent = useCallback(async () => {
@@ -93,6 +98,28 @@ export const EnhancedMarkdownRenderer: React.FC<EnhancedMarkdownRendererProps> =
     }
   }, [parseContent, enableRealTimeParsing]);
 
+  // 显示grounding详情
+  const showGroundingDetails = useCallback((groundingAnalysis: any) => {
+    setSelectedGrounding(groundingAnalysis);
+    setShowGroundingModal(true);
+  }, []);
+
+  // 关闭grounding详情
+  const closeGroundingDetails = useCallback(() => {
+    setShowGroundingModal(false);
+    setSelectedGrounding(null);
+  }, []);
+
+  // 查看大图
+  const handleViewLarge = useCallback((source: any) => {
+    setPreviewSource(source);
+  }, []);
+
+  // 关闭图片预览
+  const handleClosePreview = useCallback(() => {
+    setPreviewSource(null);
+  }, []);
+
   // 分析节点与引用资源的关联
   const analyzeNodeGrounding = useCallback((node: MarkdownNode) => {
     if (!groundingMetadata?.grounding_supports || !parseResult) {
@@ -102,31 +129,31 @@ export const EnhancedMarkdownRenderer: React.FC<EnhancedMarkdownRendererProps> =
     // 计算节点在原始文本中的字节偏移位置（与grounding数据的字节偏移匹配）
     const nodeStartOffset = node.range?.start?.byte_offset || 0;
     const nodeEndOffset = node.range?.end?.byte_offset || 0;
-    const nodeStartOffset1 = node.range?.start?.offset || 0;
-    const nodeEndOffset1 = node.range?.end?.offset || 0;
     // 查找与当前节点位置重叠的grounding支持信息
     const relatedSupports = groundingMetadata.grounding_supports.filter(support => {
       // grounding数据使用字节偏移
       const segmentStart = support.segment.startIndex;
       const segmentEnd = support.segment.endIndex;
-
-      const hasOverlap = (nodeEndOffset <= segmentEnd && nodeStartOffset >= segmentStart);
+      const hasOverlap = (nodeStartOffset <= segmentEnd && nodeEndOffset >= segmentStart);
       // 检查节点范围与grounding片段是否有重叠
       return hasOverlap;
     });
-    console.log({
-      relatedSupports,
-      nodeStartOffset,
-      nodeEndOffset,
-      nodeStartOffset1,
-      nodeEndOffset1
-    })
     if (relatedSupports.length > 0) {
       // 获取相关的来源信息
+      console.log('🔍 Related supports:', relatedSupports);
       const relatedSources = relatedSupports.flatMap(support =>
         support.groundingChunkIndices.map(index => groundingMetadata.sources[index])
       ).filter(Boolean);
 
+      console.log('📚 Related sources:', relatedSources);
+      console.log('🖼️ Source content examples:', relatedSources.map(s => ({
+        title: s.title,
+        uri: s.uri,
+        contentType: typeof s.content,
+        contentKeys: s.content ? Object.keys(s.content) : null,
+        contentSample: s.content
+      })));
+
       const analysisResult = {
         node: {
           type: node.node_type,
@@ -141,11 +168,39 @@ export const EnhancedMarkdownRenderer: React.FC<EnhancedMarkdownRendererProps> =
         groundingInfo: {
           supportCount: relatedSupports.length,
           sourceCount: relatedSources.length,
-          sources: relatedSources.map(source => ({
-            title: source.title,
-            uri: source.uri,
-            snippet: source.content?.snippet || 'No snippet available'
-          })),
+          sources: relatedSources.map(source => {
+            // 解析content字段中的图片信息
+            let imageData = null;
+            if (source.content) {
+              // 如果content是字符串，尝试解析为JSON
+              if (typeof source.content === 'string') {
+                try {
+                  imageData = JSON.parse(source.content);
+                } catch {
+                  imageData = { description: source.content };
+                }
+              } else if (source.content.text) {
+                // 如果content有text字段，使用text字段
+                try {
+                  imageData = typeof source.content.text === 'string'
+                    ? JSON.parse(source.content.text)
+                    : source.content.text;
+                } catch {
+                  imageData = { description: source.content.text };
+                }
+              } else {
+                // 直接使用content对象
+                imageData = source.content;
+              }
+            }
+
+            return {
+              title: source.title,
+              uri: source.uri,
+              content: imageData,
+              snippet: imageData?.description || imageData?.snippet || 'No description available'
+            };
+          }),
           segments: relatedSupports.map(support => ({
             start: support.segment.startIndex,
             end: support.segment.endIndex,
@@ -172,10 +227,11 @@ export const EnhancedMarkdownRenderer: React.FC<EnhancedMarkdownRendererProps> =
         title={`引用了 ${groundingAnalysis.groundingInfo.sourceCount} 个来源`}
         onClick={() => {
           console.log('📚 点击查看引用详情:', groundingAnalysis);
-          // 这里可以添加弹窗或侧边栏显示详细引用信息
+          // 显示详细的引用信息，包括图片
+          showGroundingDetails(groundingAnalysis);
         }}
       >
-        📚 {groundingAnalysis.groundingInfo.sourceCount}
+        {groundingAnalysis.groundingInfo.sourceCount}
       </span>
     ) : null;
 
@@ -201,7 +257,6 @@ export const EnhancedMarkdownRenderer: React.FC<EnhancedMarkdownRendererProps> =
         return (
           <HeadingTag key={key} className={headingClasses[level as keyof typeof headingClasses] || headingClasses[3]}>
             {node.children.map((child, childIndex) => renderNode(child, depth + 1, childIndex))}
-            {GroundingIndicator}
           </HeadingTag>
         );
 
@@ -209,7 +264,6 @@ export const EnhancedMarkdownRenderer: React.FC<EnhancedMarkdownRendererProps> =
         return (
           <p key={key} className="mb-2">
             {node.children.map((child, childIndex) => renderNode(child, depth + 1, childIndex))}
-            {GroundingIndicator}
           </p>
         );
 
@@ -297,7 +351,7 @@ export const EnhancedMarkdownRenderer: React.FC<EnhancedMarkdownRendererProps> =
         );
 
       case MarkdownNodeType.Text:
-        return <span key={key}>{node.content}</span>;
+        return <span key={key}>{node.content} {GroundingIndicator}</span>;
 
       case MarkdownNodeType.LineBreak:
         return <br key={key} />;
@@ -381,8 +435,14 @@ export const EnhancedMarkdownRenderer: React.FC<EnhancedMarkdownRendererProps> =
             {groundingMetadata.sources.slice(0, 5).map((source, index) => (
               <span
                 key={index}
-                className="inline-flex items-center px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded-full"
+                className="inline-flex items-center px-2 py-1 text-xs bg-blue-50 text-blue-700 rounded-full cursor-pointer hover:bg-blue-100"
                 title={source.title || `来源 ${index + 1}`}
+                onClick={() => showGroundingDetails({
+                  groundingInfo: {
+                    sourceCount: 1,
+                    sources: [source]
+                  }
+                })}
               >
                 {index + 1}
               </span>
@@ -395,6 +455,57 @@ export const EnhancedMarkdownRenderer: React.FC<EnhancedMarkdownRendererProps> =
           </div>
         </div>
       )}
+
+      {/* Grounding详情模态框 */}
+      {showGroundingModal && selectedGrounding && (
+        <div className="fixed inset-0 z-50 flex items-center justify-center bg-black bg-opacity-50">
+          <div className="bg-white rounded-lg shadow-xl max-w-4xl max-h-[90vh] overflow-hidden">
+            {/* 模态框头部 */}
+            <div className="flex items-center justify-between p-4 border-b border-gray-200">
+              <h3 className="text-lg font-semibold text-gray-900">相关素材详情</h3>
+              <button
+                onClick={closeGroundingDetails}
+                className="text-gray-400 hover:text-gray-600 transition-colors"
+              >
+                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                  <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+                </svg>
+              </button>
+            </div>
+
+            {/* 模态框内容 */}
+            <div className="p-4 overflow-y-auto max-h-[calc(90vh-8rem)]">
+              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+                {selectedGrounding.groundingInfo?.sources?.map((source: any, index: number) => (
+                  <div key={index} className="relative">
+                    <ImageCard
+                      source={source}
+                      showDetails={true}
+                      onViewLarge={handleViewLarge}
+                      className="shadow-lg border border-gray-200 hover:shadow-xl transition-shadow"
+                    />
+                  </div>
+                ))}
+              </div>
+
+              {/* 如果没有图片，显示提示信息 */}
+              {(!selectedGrounding.groundingInfo?.sources || selectedGrounding.groundingInfo.sources.length === 0) && (
+                <div className="text-center py-8 text-gray-500">
+                  <div className="text-4xl mb-2">🖼️</div>
+                  <p>暂无相关图片素材</p>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+      )}
+
+      {/* 图片预览模态框 */}
+      <ImagePreviewModal
+        isOpen={!!previewSource}
+        source={previewSource}
+        onClose={handleClosePreview}
+      />
     </div>
   );
 };