数据差异可视化工具产品系统

本项目为“数据差异对比可视化工具”，主要面向软件开发、科研数据分析、企业办公和数据审计等场景。传统文件对比工具多以纯文本逐行比较为主，对 JSON、CSV、Excel 等结构化文件支持不足，差异展示不够直观，也缺少历史记录、规则复用、结果导出和审计追踪等完整业务流程。因此，本项目旨在设计并实现一个支持多格式文件差异检测、可视化展示、规则过滤、任务管理和统计分析的一体化平台，提高用户对数据变更的识别效率和管理能力。

1、立项背景和目标

本项目为“数据差异对比可视化工具”，主要面向软件开发、科研数据分析、企业办公和数据审计等场景。传统文件对比工具多以纯文本逐行比较为主，对 JSON、CSV、Excel 等结构化文件支持不足，差异展示不够直观，也缺少历史记录、规则复用、结果导出和审计追踪等完整业务流程。因此，本项目旨在设计并实现一个支持多格式文件差异检测、可视化展示、规则过滤、任务管理和统计分析的一体化平台，提高用户对数据变更的识别效率和管理能力。

2、软件功能、核心功能模块介绍

系统主要包括用户登录注册、文件上传与文本输入、数据差异对比、差异可视化、过滤规则设置、对比任务中心、文件记录管理、差异备注标记、结果导出、多版本连续对比和数据看板等模块。核心功能是对文本、JSON、CSV、Excel 文件进行差异检测，并根据文件结构展示新增、删除、修改等结果。系统支持忽略空白、忽略大小写、忽略注释、高级规则过滤、归一化处理和规则预设保存，方便用户根据不同业务场景灵活配置对比规则。同时，系统会保存对比任务、上传文件元数据、导出记录和多版本对比记录，形成完整的数据对比与追踪闭环。

3、业务流程、功能路径描述

用户首先通过 /login 页面完成注册或登录，进入系统首页 / 后可查看功能入口。用户在 /compare 数据对比页面选择文件上传、文本粘贴或多版本文件上传方式，设置文件类型和过滤规则后发起对比。系统完成差异分析后，会以统计卡片、左右分栏、高亮列表、JSON 树形视图或表格差异视图展示结果，用户可以定位具体差异、添加备注、设置标签和处理状态，并将结果导出为 HTML 或 PDF 报告。对比完成后，系统自动保存任务记录，用户可在 /jobs 查看对比任务详情和多版本记录，在 /history 查看历史结果，在 /files 查看上传文件信息，在 /settings 配置默认规则和主题，在 /dashboard 查看任务数量、差异分布、导出次数和最近趋势等统计信息。

1、整体架构和设计思路

本项目采用前后端分离架构，前端使用 React、TypeScript、Vite 和 React Router 实现页面展示与交互，主要包括登录注册、数据对比、任务中心、历史记录、文件记录、个人设置和数据看板等页面。后端使用 Node.js、Express、TypeScript 构建 RESTful API，负责文件解析、差异计算、规则过滤、任务保存和结果导出。数据库使用 SQLite 保存用户、文件元数据、对比任务、差异结果、导出记录、规则预设和多版本记录。系统整体设计思路是将“文件输入、差异计算、结果展示、任务沉淀、导出审计、统计分析”串成完整业务闭环。

2、“我”负责的模块和结果

我主要负责系统核心业务功能的设计与实现，包括多格式文件差异对比、规则过滤、结果可视化、任务记录、文件记录、导出记录和数据看板等模块。项目最终支持文本、JSON、CSV、Excel 共 4 类文件对比，支持忽略空白、忽略大小写、忽略注释以及 JSON 字段、表格列、数值容差等高级规则；实现了 HTML 和 PDF 两种结果导出方式；设计并使用了 10 余张数据库表保存业务数据；完成了登录、对比、任务中心、文件记录、设置、看板等多个页面。系统能够记录每次对比任务、参与文件、差异数量、导出行为和最近 7 天趋势，使项目从单一对比工具扩展为可追踪、可复用、可统计的数据差异分析平台。

3、遇到的难点、坑和解决方案

实现过程中最大的难点是不同文件类型的数据结构差异较大。文本是行级内容，JSON 是树形节点，CSV 和 Excel 是表格单元格，如果直接分别展示，前端逻辑会非常混乱。我的解决方案是设计统一差异结果模型，用 kind、type、meta、diffId 等字段描述差异类型、位置和展示信息，再由前端根据类型渲染不同视图。第二个难点是表格类文件容易出现列顺序变化、空值、日期格式、数值精度等问题，我通过归一化处理、主键列对齐、数值容差和路径标识解决误判问题。第三个难点是结果保存和用户隔离，最后通过 JWT 登录认证、按 user_id 查询数据、SQLite 外键约束和级联规则，保证不同用户只能访问自己的任务和记录。