【项目实训(个人12)】

甄心爱学习2026-06-07 10:42

继续进行法律文书智能摘要系统的开发

概述

本次开发围绕"文档创作"功能展开，系统从原先仅支持分析输出，扩展至支持用户输入与创作管理。整个项目分为两个主要阶段：第一阶段完成了文档管理的基础架构，包括数据库表设计（文档、文件夹、版本、权限、分享、操作日志）、CRUD API开发、文件夹层级管理、前端控制台与TipTap富文本编辑器的集成，实现了文档的增删改查、软删除、批量操作、视图切换和自动保存等核心能力。第二阶段引入了模板管理与版本历史功能，新增模板表、变量表和标签表，预置了法律意见书、合同等系统模板，支持模板渲染、复制和使用统计；同时实现了基于内容哈希的版本快照、版本对比、还原与清理功能，并在编辑器中集成版本历史面板，提升了文档创作的规范性与可回溯性。

此外，系统还增加了不同用户间的文档"@"功能，通过通知表、WebSocket实时推送和前端通知铃铛组件，实现了批注中的提及与回复的即时提醒。针对文书管理界面，优化了整体交互逻辑，修复了批注删除、回收站显示、搜索功能失效等问题，新增了文档对照查看模式（支持Word、PDF、TXT，两栏同步、全屏批注），并优化了文件目录的点击跳转、悬停展开及高亮样式。整个系统从后端存储、API层到前端状态管理和界面组件，形成了完整的文档创作与管理闭环。

文档创作功能

阶段1

问题：之前系统只能分析输出，不能输入创作

1. 数据库表结构设计与迁移 (后端)

新增表结构（在 connection.py 的 _migrate_document_management() 中）：

  • documents_new - 文档主表（支持笔记和文本文档，内容存储为TipTap JSON格式）
  • folders - 文件夹表（支持嵌套层级结构）
  • document_versions - 文档版本表（版本控制和历史回溯）
  • document_permissions - 文档权限表（owner/edit/comment/view）
  • document_shares - 文档分享表（用户分享和链接分享）
  • document_activity_logs - 文档操作日志表

索引优化：为所有常用查询字段创建了索引，包括 created_by, updated_at, folder_id, doc_type 等

2. 文档CRUD API开发 (后端)

新建文件：backend/app/api/docs_mgmt.py

  • POST /api/docs-mgmt/documents - 创建文档
  • GET /api/docs-mgmt/documents/{doc_id} - 获取文档详情
  • PUT /api/docs-mgmt/documents/{doc_id} - 更新文档
  • DELETE /api/docs-mgmt/documents/{doc_id} - 删除文档（支持软删除）
  • POST /api/docs-mgmt/documents/{doc_id}/restore - 恢复文档
  • GET /api/docs-mgmt/documents - 文档列表（分页、筛选、排序）
  • GET /api/docs-mgmt/documents/recent - 最近打开文档
  • POST /api/docs-mgmt/documents/batch_delete - 批量删除
  • POST /api/docs-mgmt/documents/batch_move - 批量移动
  • GET /api/docs-mgmt/documents/stats - 文档统计

数据库操作层：backend/app/db/docs_mgmt.py

  • 完整的文档增删改查功能
  • 权限控制（所有者检查）
  • 操作日志记录
  • 字数统计（自动计算中文字符+英文单词）
3. 文件夹管理功能 (后端)

新建文件：backend/app/api/folders.py

  • POST /api/folders/ - 创建文件夹
  • GET /api/folders/{folder_id} - 获取文件夹详情
  • GET /api/folders/tree - 获取文件夹树
  • GET /api/folders/root - 获取根文件夹
  • PUT /api/folders/{folder_id} - 更新文件夹
  • DELETE /api/folders/{folder_id} - 删除文件夹
  • POST /api/folders/{folder_id}/move - 移动文件夹
  • GET /api/folders/{folder_id}/documents - 获取文件夹内文档

数据库操作层：backend/app/db/folder_mgmt.py

  • 文件夹层级结构管理（递归查询）
  • 循环引用检测（防止）
  • 级联删除支持
  • 默认根文件夹创建
4. 前端API层

新建文件：frontend/src/api/docs-mgmt.ts

  • 完整的文档和文件夹API调用函数
  • TypeScript类型定义
  • 自动获取当前用户身份
5. 前端Pinia Store

新建文件：frontend/src/stores/docsMgmt.ts

  • 文档状态管理（列表、当前文档、选中状态）
  • 文件夹树状态管理
  • 视图模式切换（网格/列表）
  • 分页和筛选状态管理
  • 批量操作支持
6. 文档管理控制台页面

新建文件：frontend/src/views/DocsMgmtConsole.vue

  • 左侧侧边栏（导航 + 文件夹树）
  • 顶部工具栏（搜索、筛选、视图切换、新建菜单）
  • 新建菜单（空白笔记、文本文档、新建文件夹）
  • 网格视图（文档卡片，悬停显示操作）
  • 列表视图（表格形式，支持列头排序）
  • 批量操作栏（批量删除、批量移动）
  • 分页控件
7. TipTap编辑器页面

新建文件：frontend/src/views/DocumentEditor.vue

  • TipTap富文本编辑器集成（StarterKit + Underline + Highlight + Placeholder）
  • 自动保存（30秒定时 + 2秒防抖）
  • 手动保存（Ctrl+S / 按钮）
  • 保存状态显示（已保存/保存中/未保存）
  • 编辑工具栏（加粗、斜体、下划线、标题、列表、撤销/重做）
  • 编辑/只读模式切换
  • 文档标题编辑
  • 字数统计
  • 版本信息显示
8. 路由配置

更新文件：frontend/src/main.ts

  • 添加文档管理系统路由：
    • /docs - 文档管理控制台
    • /docs/editor/:id - 文档编辑器
    • /docs/recent - 最近打开
    • /docs/starred - 星标文档
    • /docs/trash - 回收站

阶段2

  1. 模板管理数据库表结构 (后端)

新增表结构 ：

  • document_templates - 模板主表（支持系统模板和用户自定义模板）

  • template_variables - 模板变量表（支持text/number/date/select四种变量类型）

  • template_tags - 模板标签表

预置系统模板 ：

  • 📝 空白笔记

  • 📄 空白文档

  • 📜 法律意见书（含案件名称、委托人、出具日期变量）

  • 合同模板（含甲方、乙方、合同金额、签署日期变量）

  1. 模板管理 API (后端)

新建文件 ： backend/app/api/templates.py

接口 方法 功能 /api/templates/ POST 创建模板 /api/templates/ GET 模板列表（分页/筛选/搜索） /api/templates/{id} GET 获取模板详情 /api/templates/{id} PUT 更新模板 /api/templates/{id} DELETE 删除模板 /api/templates/{id}/render POST 渲染模板（变量替换） /api/templates/{id}/duplicate POST 复制模板 /api/templates/categories GET 获取分类列表 /api/templates/types GET 获取类型列表

数据库操作层 ： backend/app/db/template_mgmt.py

  • 模板增删改查

  • 模板变量管理

  • 模板标签管理

  • 模板渲染（ {{变量名}} 占位符替换）

  • 模板复制功能

  • 使用次数统计

  1. 文档版本历史 API (后端)

新建文件 ： backend/app/api/versions.py

接口 方法 功能 /api/docs-mgmt/documents/{id}/versions/ POST 创建版本快照 /api/docs-mgmt/documents/{id}/versions/ GET 获取版本列表 /api/docs-mgmt/documents/{id}/versions/latest GET 获取最新版本 /api/docs-mgmt/documents/{id}/versions/{num} GET 获取指定版本详情 /api/docs-mgmt/documents/{id}/versions/restore POST 还原到指定版本 /api/docs-mgmt/documents/{id}/versions/compare POST 对比两个版本 /api/docs-mgmt/documents/{id}/versions/before/{ver} DELETE 清理历史版本 /api/docs-mgmt/documents/{id}/versions/count GET 获取版本数量 /api/docs-mgmt/documents/{id}/versions/major GET 获取主要版本列表

数据库操作层 ： backend/app/db/version_mgmt.py

  • 版本快照创建（基于内容哈希去重）

  • 版本列表查询（分页）

  • 版本还原（创建新版本记录还原操作）

  • 版本对比（行级差异对比）

  • 历史版本清理

  • 主要版本标记

  1. 前端 API 层

新建文件 ：

  • frontend/src/api/templates.ts - 模板API调用函数

  • frontend/src/api/versions.ts - 版本API调用函数

  1. 前端模板中心页面

新建文件 ： frontend/src/views/TemplateCenter.vue

功能特性：

  • 模板卡片式展示

  • 搜索模板（按名称/描述）

  • 按类型和分类筛选

  • 新建模板（支持设置变量和标签）

  • 使用模板创建文档（自动填充变量表单）

  • 复制模板

  • 删除自定义模板

  1. 前端版本历史面板

新建文件 ： frontend/src/components/VersionHistoryPanel.vue

功能特性：

  • 版本时间线列表

  • 当前版本高亮

  • 主要版本标记

  • 版本选择器（A/B选择用于对比）

  • 版本还原功能

  • 版本对比（显示新增/删除行数和具体行内容）

  • 历史版本清理

  • 分页支持

  1. 编辑器页面集成版本历史

更新文件 ： frontend/src/views/DocumentEditor.vue

新增功能：

  • 底部"版本历史"按钮

  • 右侧滑出版本历史面板

  • 版本还原后自动更新编辑器内容

  • 版本还原后更新当前版本号

  1. 路由配置

更新文件 ： frontend/src/main.ts

新增路由：

  • /docs/templates - 模板中心

更新文件 ： frontend/src/views/DocsMgmtConsole.vue

侧边栏新增"模板中心"导航项

优化

1.新建空白笔记和空白文档效果一样，或者直接合并

2.新建文件的时间不正确

3.建立的文件夹无法删除

4.几个文件夹置顶功能

5.新建文件自动编号，防止混乱

6.星标文件没有加星标的地方（星标的符号用文书管理界面中的星标的样式）

7.模板的内容暂时是空白的，而且无法预览（鼠标放在上面就可以预览到文件的内容格式）

8.文档创作最近打开页面不起作用

9.目前的文件无法移动到文件夹，放大版的文件页面应该也能移动；移动的时候，形成文件夹的下拉选项列表

10.对于文件的操作，打开和编辑是一种，重复了

不同用户间文档的@功能

新增文件（6 个）

文件 说明
backend/app/db/notifications_db.py 通知数据访问层（CRUD + 未读计数）
backend/app/api/notifications.py 通知 REST API（查询/已读/全部已读）
backend/app/services/ws_notify.py WebSocket 实时推送管理器
frontend/src/api/notifications.ts 前端通知 API 客户端
frontend/src/composables/useWebSocket.ts WebSocket 连接/心跳/重连组合函数
frontend/src/components/NotificationBell.vue 通知铃铛 + 下拉面板 UI 组件

修改文件（3 个）

文件 改动
backend/app/db/connection.py 新增 notifications 表 + 2 个索引
backend/app/db/annotations.py save_annotation_db() 和 add_reply_to_annotation() 中，@提及 / 回复时自动写入通知 + 实时推送
backend/app/main.py 注册通知 API 路由 + WebSocket 端点 /ws/notify
frontend/src/App.vue 导航栏集成通知铃铛，WebSocket 连接后自动刷新通知

功能流程

用户A在文档中@用户B 或 回复用户B的批注

→ annotations.py 写入

notifications 表

→ WS 实时推送 → 用户B浏览器收到通知

→ 导航栏铃铛显示红点 + 未读数

→ 点击通知 → 跳转到对应文档

→ 标记已读

文书管理界面优化

1.优化文书管理界面的总体逻辑，有些冗余，优化用户使用的逻辑

2.文书管理的文书详情页面，批注（已解决和未解决）都无法删除（lxj）

3.对比查看

文书可以原文和文字对比查看，两栏同步，可以放大到全屏，右侧是批注。

这里加入对照查看按钮，点击后进入全屏，原文word、pdf、txt都满足

4.问题修复

修复frontend/src/views/DocsMgmtConsole.vue这个文件的问题

确认已经解决

5.修复搜索功能

每个页面右上角的搜索，要求能够搜索文书管理和文档创作中的文件，目前搜索能力失效

6.回收站修复

文档创作界面，回收站没有正常显示；而且点击其他功能后无法回到"全部文档"

7.文件目录优化

加入点击跳转的功能；加入鼠标放在上面然后自动展开的功能；最开始的工作台不要自动展开

点击具体的项目后，要跳转到具体的位置，比如点击法智助手下的文档检索，要直接跳转到相应界面的文档检索选项。并且此时左侧目录中，法智助手下的"文档检索"要单独颜色变深（目前的颜色变化并不好看，需要美化）

小结

通过两阶段迭代，系统已具备完整的文档创作管理能力：用户可创建笔记或文本文档（TipTap JSON格式），组织到多级文件夹中，利用系统模板快速生成结构化文档，并通过版本历史回溯任意修改记录。权限控制（所有者/编辑/评论/查看）、操作日志、字数统计和自动保存等细节保证了数据安全与用户体验。前端采用网格/列表双视图、批量操作栏、分页控件及实时搜索筛选，文件夹树支持递归查询和循环引用检测。技术实现上，后端使用FastAPI + SQLite（带迁移机制），前端基于Vue 3 + Pinia + TipTap，WebSocket确保通知实时性，整体架构清晰且可扩展。

优化项 问题描述 解决方案 状态
笔记与文档合并 空白笔记和空白文档效果重复 统一为"新建文档"，减少冗余 ✅ 已解决
新建文件时间 创建时间显示不正确 修复时间戳生成逻辑 ✅ 已解决
文件夹删除 无法删除文件夹 增加级联删除选项和循环引用检测 ✅ 已解决
文件夹置顶 缺少置顶功能 在文件夹树中加入置顶标记与排序 ✅ 已解决
自动编号 新建文件名称重复混乱 实现"新建文档X"自动递增编号 ✅ 已解决
星标文件 无加星标入口（样式未复用） 在文档卡片/列表行集成星标按钮，复用设计样式 ✅ 已解决
模板预览 模板内容空白且无法预览 增加鼠标悬停卡片预览（展示TipTap纯文本摘要） ✅ 已解决
最近打开 路由下的最近打开页面无效 修复前端路由与store中最近打开文档的记录逻辑 ✅ 已解决
文件移动 无法移动文件到文件夹；放大页面也无移动功能 在文档详情页和列表批量操作中增加文件夹下拉树选择器 ✅ 已解决
打开与编辑重复 操作菜单中"打开"和"编辑"功能重叠 合并为"打开编辑"，单击卡片即进入编辑模式 ✅ 已解决
批注删除 文书详情页中已解决/未解决批注无法删除 增加批注删除API和前端确认弹窗，仅允许本人或管理员删除 ✅ 已解决
对照查看 缺乏原文与批注对照模式 新增"对照查看"按钮，全屏两栏显示（左侧原文，右侧批注），支持同步滚动 ✅ 已解决
全局搜索 页面右上角搜索无法搜到文档创作中的文件 重构搜索接口，统一检索文档、模板及文书内容 ✅ 已解决
回收站 回收站显示异常且无法返回"全部文档" 修复回收站列表视图，增加面包屑导航返回根目录 ✅ 已解决
目录跳转与高亮 左侧目录点击后无跳转，高亮样式不佳 实现点击目录项自动跳转对应路由（如"文档检索"），并优化选中态背景色与圆角样式 ✅ 已解决
相关推荐
毕竟是shy哥1 小时前
PromptHash：基于亲和提示协同学习的自适应哈希检索跨模态算法
学习·算法·哈希算法
协享科技1 小时前
前端 SSE 流式响应处理实践：从接收、解析到渲染
前端·人工智能·程序人生·go·ai编程·sse
何以解忧，唯有..1 小时前
Python 字符串完全指南：从基础到高级操作
开发语言·python
程序大视界1 小时前
AI正在“接管“法槌？2026年法律AI全面入侵：合同审查99.2%准确率，律师该何去何从？
人工智能·ai法律
kiss strong1 小时前
自制请求工具
开发语言·python·lua
暗夜猎手-大魔王1 小时前
转载--Hermes Agent 12 | 沙箱与执行环境：六种终端后端的安全隔离
人工智能·安全
ylscode1 小时前
CISA紧急拉响警报：SolarWinds Serv-U曝高危漏洞CVE-2026-28318，零认证即可瘫痪文件传输服务
人工智能·安全
PythonFun1 小时前
WPS智能文档：解锁高效写作新体验
人工智能·wps
PersistJiao1 小时前
在项目级别创建 Python 虚拟环境
python·虚拟环境
热门推荐
01GitHub 镜像站点02【AI】2026 年具身智能模型和世界模型总结032026 年 AI 编程工具终极横评：Cursor vs Claude Code vs Copilot vs Windsurf04Codex 下载安装指南：Windows 和 macOS 官方版下载05Codex 桌面端更新后 Chrome 插件和 Computer Use 不可用，怎么排查和修复06CC-Switch 下载、安装与使用配置指南【2026.5.29】07【踩坑记录 | 第一篇】微软商店无法使用时，如何手动安装 OpenAI Codex？附`.msix`文件系统错误解决方法08CC-Switch & Claude 基于 Linux 服务器安装使用指南09Codex 接入 DeepSeek API 完整配置文档10裂开！ChatGPT 居然开始要手机号验证，附详细解决方法