chore: logo

Author: FinleyGe

modules/tool/packages/docDiff/README.md

@@ -4,9 +4,10 @@
 
 ## 功能特性
 
-- 📝 **段落级对比**: 逐段分析文档差异
-- 🎨 **可视化报告**: 生成美观的 HTML 对比报告
-- 📊 **统计信息**: 显示新增、删除、修改、未修改的段落数量
+- 📝 **行级对比**: 逐行分析文档差异，精确识别变更
+- 🎨 **可视化报告**: 生成美观的双栏 HTML 对比报告
+- 🔄 **导航功能**: 支持按钮和键盘快捷键在变更间跳转
+- 📊 **统计信息**: 显示新增、删除、修改、未修改的行数
 - 🔒 **安全防护**: 自动转义 HTML 字符，防止 XSS 攻击
 - 📱 **响应式设计**: 支持移动端浏览
 - ⚡ **高性能**: 基于相似度算法的智能对比
@@ -16,66 +17,70 @@
 ### 输入参数
 
 - **originalText** (必需): 原始的 Markdown 文档内容
-- **modifiedText** (必需): 修改后的 Markdown 文档内容  
+- **modifiedText** (必需): 修改后的 Markdown 文档内容
 - **title** (可选): 对比报告的标题，默认为"文档对比报告"
 
 ### 输出
 
-返回一个完整的 HTML 文件，包含：
+返回 HTML 文件访问 URL，包含：
 - 文档标题和生成时间
 - 变更统计信息
-- 逐段对比详情
-- 美观的样式设计
+- 双栏对比视图（左为原始文档，右为修改后文档）
+- 导航控制按钮
+- 响应式设计支持
 
 ## 对比算法
 
 工具使用智能的相似度算法来识别文档变化：
 
-1. **段落分割**: 将文档按空行分割为段落
+1. **行级分割**: 将文档按换行符分割为行
 2. **相似度计算**: 基于字符级别的相似度匹配
 3. **变更分类**:
    - 未修改 (>80% 相似度)
-   - 修改 (30%-80% 相似度)
+   - 修改 (10%-80% 相似度)
    - 新增 (仅在修改后文档中存在)
    - 删除 (仅在原始文档中存在)
-4. **最佳匹配**: 寻找最相似的段落配对
+4. **最佳匹配**: 寻找最相似的行配对
 
 ## 使用示例
 
 ```typescript
 const result = await tool({
   originalText: `# 项目文档
-  
+
 ## 功能介绍
 这是一个测试功能。
 
 ## 安装步骤
 1. 下载代码
 2. 运行安装命令`,
-  
+
   modifiedText: `# 项目文档
-  
+
 ## 功能介绍
 这是一个更新的测试功能。
 
 ## 安装步骤
 1. 下载代码
 2. 运行安装命令
 3. 配置环境变量`,
-  
+
   title: "项目文档变更记录"
 });
 
-console.log(result.html); // 输出 HTML 对比报告
+console.log(result.htmlUrl); // 输出 HTML 对比报告 URL
 ```
 
 ## HTML 报告特性
 
 - 🎨 **现代化设计**: 渐变背景、卡片布局、阴影效果
 - 📈 **统计仪表板**: 直观显示各类变更数量
+- 🔄 **双栏对比**: 左右并排显示原始和修改内容
+- 🎯 **导航功能**: 点击按钮或使用键盘快捷键在变更间跳转
 - 🏷️ **状态标签**: 不同颜色标识变更类型
-- 📝 **代码高亮**: 使用等宽字体显示内容
-- 🔄 **对比视图**: 并排显示原始和修改内容
+- ✨ **高亮效果**: 柔和的高亮提示，自动消失
+- 📝 **代码显示**: 使用等宽字体保持格式
+- 📱 **响应式布局**: 自适应不同屏幕尺寸
 
 ## 技术实现
 
@@ -119,4 +124,4 @@ bun run build
 
 - **当前版本**: 1.0.0
 - **FastGPT 兼容性**: 完全兼容
-- **依赖**: 仅依赖 Zod，无外部 API 调用
+- **依赖**: 仅依赖 Zod，无外部 API 调用

modules/tool/packages/docDiff/logo.svg

@@ -458,9 +458,8 @@ function generateHtmlReport(diffs: ParagraphDiff[], title: string): string {
         // 只统计左栏的变更项，避免重复统计
         const leftColumnItems = document.querySelector('.column:first-child').querySelectorAll('.diff-item');
         leftColumnItems.forEach((item, index) => {
-          // 只统计真正有变更的内容（新增、删除、修改）
-          if (item.classList.contains('added') ||
-              item.classList.contains('removed') ||
+          // 只统计左栏的变更项（删除和修改）
+          if (item.classList.contains('removed') ||
               item.classList.contains('modified')) {
             changes.push(index);
           }
@@ -502,7 +501,9 @@ function generateHtmlReport(diffs: ParagraphDiff[], title: string): string {
           const rightColumnItem = document.querySelector('.column:last-child').querySelectorAll('.diff-item')[targetIndex];
 
           if (leftColumnItem && rightColumnItem) {
+            // 同时滚动左右两栏到对应位置
             leftColumnItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
+            rightColumnItem.scrollIntoView({ behavior: 'smooth', block: 'center' });
             leftColumnItem.classList.add('highlight');
             rightColumnItem.classList.add('highlight');
 
@@ -565,20 +566,25 @@ function generateHtmlReport(diffs: ParagraphDiff[], title: string): string {
   const originalContent = diffs
     .map((diff, index) => {
       let content = '';
+      let badge = '';
       const typeClass = diff.type;
 
       if (diff.type === 'added') {
         // 新增的内容在左侧显示为空占位符
         content = '<div class="diff-paragraph empty-line"></div>';
-      } else if (diff.type === 'removed' || diff.type === 'modified') {
+      } else if (diff.type === 'removed') {
         content = `<div class="diff-paragraph">${escapeHtml(diff.original || '')}</div>`;
+        badge = '<span class="diff-badge badge-removed">删除</span>';
+      } else if (diff.type === 'modified') {
+        content = `<div class="diff-paragraph">${escapeHtml(diff.original || '')}</div>`;
+        badge = '<span class="diff-badge badge-removed">删除</span>';
       } else {
         content = `<div class="diff-paragraph">${escapeHtml(diff.original || '')}</div>`;
       }
 
       return `
       <div class="diff-item ${typeClass}" data-index="${index}">
-        ${diff.type !== 'unchanged' ? `<span class="diff-badge badge-${diff.type}">${diff.type === 'added' ? '新增' : diff.type === 'removed' ? '删除' : '修改'}</span>` : ''}
+        ${badge}
         ${content}
       </div>
     `;
@@ -589,20 +595,25 @@ function generateHtmlReport(diffs: ParagraphDiff[], title: string): string {
   const modifiedContent = diffs
     .map((diff, index) => {
       let content = '';
+      let badge = '';
       const typeClass = diff.type;
 
       if (diff.type === 'removed') {
         // 删除的内容在右侧显示为空占位符
         content = '<div class="diff-paragraph empty-line"></div>';
-      } else if (diff.type === 'added' || diff.type === 'modified') {
+      } else if (diff.type === 'added') {
+        content = `<div class="diff-paragraph">${escapeHtml(diff.modified || '')}</div>`;
+        badge = '<span class="diff-badge badge-added">新增</span>';
+      } else if (diff.type === 'modified') {
         content = `<div class="diff-paragraph">${escapeHtml(diff.modified || '')}</div>`;
+        badge = '<span class="diff-badge badge-added">新增</span>';
       } else {
         content = `<div class="diff-paragraph">${escapeHtml(diff.modified || '')}</div>`;
       }
 
       return `
       <div class="diff-item ${typeClass}" data-index="${index}">
-        ${diff.type !== 'unchanged' ? `<span class="diff-badge badge-${diff.type}">${diff.type === 'added' ? '新增' : diff.type === 'removed' ? '删除' : '修改'}</span>` : ''}
+        ${badge}
         ${content}
       </div>
     `;