每日浏览记录总结 Web 应用

基于 Java Spring Boot + Vue.js 的浏览历史总结 Web 应用，提供可视化界面来查看和生成浏览记录总结。

技术栈

• 后端: Java 17 + Spring Boot 3.2
• 前端: Vue 3 + Element Plus + Vite
• 数据库: SQLite (Edge浏览器历史)
• AI: DeepSeek API
• 部署: 本地运行

项目结构

daily-summary-web/
├── backend/                    # Spring Boot后端
│   ├── src/main/java/com/daily/summary/
│   │   ├── config/            # 配置类
│   │   ├── controller/        # REST控制器
│   │   ├── service/           # 业务服务
│   │   ├── model/dto/         # 数据传输对象
│   │   ├── util/              # 工具类
│   │   └── exception/         # 异常处理
│   └── pom.xml
├── frontend/                   # Vue前端
│   ├── src/
│   │   ├── views/             # 页面组件
│   │   ├── components/        # 通用组件
│   │   ├── api/               # API封装
│   │   └── router/            # 路由配置
│   └── package.json
└── README.md

快速开始

前置要求

• Java 17 或更高版本
• Maven 3.6+
• Node.js 18+ 和 npm
• Microsoft Edge 浏览器

后端启动

# 进入后端目录
cd backend

# 编译项目
mvn clean install

# 启动应用
mvn spring-boot:run

后端将在 http://localhost:8080 启动

前端启动

# 进入前端目录
cd frontend

# 安装依赖
npm install

# 启动开发服务器
npm run dev

前端将在 http://localhost:3000 启动

配置说明

后端配置 (application.yml)

app:
  edge:
    history-path: /Users/ethan/Library/Application Support/Microsoft Edge/Default/History
  deepseek:
    api-key: ${DEEPSEEK_API_KEY:your-api-key-here}
    api-url: https://api.deepseek.com/v1/chat/completions
  storage:
    summary-dir: /Users/ethan/Documents/daily/summaries
    log-dir: /Users/ethan/Documents/daily/logs

重要:

• 确保 edge.history-path 指向正确的 Edge 浏览器历史数据库路径
• 设置环境变量 DEEPSEEK_API_KEY 或在配置文件中填写 API 密钥
• 确保 summary-dir 目录存在且有写权限

前端代理配置 (vite.config.js)

前端开发服务器已配置代理，自动转发 /api 请求到后端 http://localhost:8080

核心功能

1. 查看历史总结列表

• 卡片式展示所有已生成的总结
• 显示日期、访问次数、时间范围等信息
• 点击卡片查看详细内容

2. 生成今日总结

• 一键生成当天的浏览记录总结
• 自动读取 Edge 浏览器历史
• 调用 DeepSeek AI 生成分析总结

3. 选择日期生成总结

• 支持选择任意历史日期
• 自动检测是否已存在总结
• 可选择强制重新生成

4. Markdown 渲染展示

• 支持完整的 Markdown 语法
• 代码高亮显示
• GitHub 风格样式

5. 复制和下载

• 一键复制 Markdown 内容到剪贴板
• 下载为 .md 文件

API 端点

方法	路径	描述
GET	/api/v1/summaries	获取所有历史总结列表
GET	/api/v1/summaries/{date}	获取指定日期的总结内容
POST	/api/v1/summaries/generate/today	生成今日总结
POST	/api/v1/summaries/generate	生成指定日期的总结
GET	/api/v1/summaries/exists/{date}	检查日期是否已生成

故障排除

后端问题

无法连接到 Edge 数据库

• 确保 Edge 浏览器未运行（Edge 会锁定数据库）
• 检查 history-path 配置是否正确
• 确保有读取数据库文件的权限

DeepSeek API 调用失败

• 检查 API 密钥是否正确配置
• 确保网络连接正常
• 查看后端日志获取详细错误信息

无法保存 Markdown 文件

• 确保 summary-dir 目录存在
• 检查目录写入权限
• 查看后端日志获取详细错误

前端问题

无法连接到后端

• 确保后端服务已启动（http://localhost:8080）
• 检查浏览器控制台的网络请求
• 确认 CORS 配置正确

页面显示异常

• 清除浏览器缓存
• 检查浏览器控制台的错误信息
• 确保所有依赖已正确安装

开发说明

添加新功能

1. 后端:

   • 在 service 包中添加业务逻辑
   • 在 controller 包中添加 REST 端点
   • 在 model/dto 包中定义数据传输对象

2. 前端:

   • 在 api/summary.js 中添加 API 调用方法
   • 在 views 或 components 中创建新组件
   • 在 router/index.js 中添加路由（如需要）

测试

后端测试:

# 运行单元测试
mvn test

# 使用 curl 测试 API
curl http://localhost:8080/api/v1/summaries
curl -X POST http://localhost:8080/api/v1/summaries/generate/today

前端测试:

• 在浏览器中访问 http://localhost:3000
• 使用浏览器开发者工具检查网络请求
• 测试各个功能页面

生产构建

前端构建

cd frontend
npm run build

构建产物将输出到 frontend/dist/ 目录

后端打包

cd backend
mvn clean package

生成的 JAR 文件位于 backend/target/daily-summary-1.0.0.jar

运行生产版本

# 启动后端
java -jar backend/target/daily-summary-1.0.0.jar

# 前端静态文件可以通过 Nginx 或其他 Web 服务器提供

许可证

MIT License

贡献

欢迎提交 Issue 和 Pull Request！

daily-summary-web