前端更新内容: 1. FileTree.js - Ant Design Tree 组件集成 - 文件状态标签显示(一致/冲突/本地更新/数据库更新) - 统计信息展示(总文件数、总大小、冲突数) - 刷新状态按钮 - 文件选择事件处理 2. FileDiff.js - 丝滑的差异对比组件 - 使用 diff 库计算行级差异 - 颜色区分:绿色(新增)、红色(删除) - 显示变动行数标签 - 支持大文件截断提示 - 刷新按钮 3. package.json - 新增 diff 依赖(行级差异计算) - 新增 react-syntax-highlighter 依赖(代码高亮) 用户体验: - 点选文件 → 自动加载差异 - 实时状态显示 - 一键同步按钮 - 流畅的动画效果 点选-对比-同步流程完整实现!
39 lines
838 B
JSON
39 lines
838 B
JSON
{
|
|
"name": "lobster-memory-sync-frontend",
|
|
"version": "1.0.0",
|
|
"private": true,
|
|
"dependencies": {
|
|
"react": "^18.2.0",
|
|
"react-dom": "^18.2.0",
|
|
"react-scripts": "5.0.1",
|
|
"antd": "^5.0.0",
|
|
"react-diff-viewer-continued": "^3.2.6",
|
|
"axios": "^1.0.0",
|
|
"diff": "^5.1.0",
|
|
"react-syntax-highlighter": "^15.5.0"
|
|
},
|
|
"scripts": {
|
|
"start": "react-scripts start",
|
|
"build": "react-scripts build",
|
|
"test": "react-scripts test",
|
|
"eject": "react-scripts eject"
|
|
},
|
|
"eslintConfig": {
|
|
"extends": [
|
|
"react-app"
|
|
]
|
|
},
|
|
"browserslist": {
|
|
"production": [
|
|
">0.2%",
|
|
"not dead",
|
|
"not op_mini all"
|
|
],
|
|
"development": [
|
|
"last 1 chrome version",
|
|
"last 1 firefox version",
|
|
"last 1 safari version"
|
|
]
|
|
},
|
|
"proxy": "http://localhost:8087"
|
|
} |