|
|
@@ -0,0 +1,137 @@
|
|
|
+# Table Line Generator
|
|
|
+
|
|
|
+基于 Vue 3 + TypeScript + Konva.js 的表格线条编辑工具。
|
|
|
+
|
|
|
+## 功能特性
|
|
|
+
|
|
|
+- 📤 上传 OCR JSON + 图片文件进行分析
|
|
|
+- 🖱️ 鼠标拖拽调整线条位置
|
|
|
+- ⌨️ 键盘快捷键支持 (Ctrl+Z 撤销, Delete 删除等)
|
|
|
+- ➕ 添加/删除横线和竖线
|
|
|
+- 📐 精确坐标输入调整
|
|
|
+- 💾 保存结构 JSON 和绘制后的图片
|
|
|
+- 🔄 批量处理多页文档
|
|
|
+
|
|
|
+## 技术栈
|
|
|
+
|
|
|
+### 前端
|
|
|
+- Vue 3 + TypeScript
|
|
|
+- vue-konva (Canvas 绘制)
|
|
|
+- Element Plus (UI 组件)
|
|
|
+- Pinia (状态管理)
|
|
|
+- Vite (构建工具)
|
|
|
+
|
|
|
+### 后端
|
|
|
+- FastAPI
|
|
|
+- Python 3.8+
|
|
|
+- Pillow (图像处理)
|
|
|
+- NumPy (数值计算)
|
|
|
+
|
|
|
+## 快速开始
|
|
|
+
|
|
|
+### 1. 安装后端依赖
|
|
|
+
|
|
|
+```bash
|
|
|
+cd ocr_platform/table_line_generator
|
|
|
+pip install -e ./core
|
|
|
+pip install -r backend/requirements.txt
|
|
|
+```
|
|
|
+
|
|
|
+### 2. 启动后端服务
|
|
|
+
|
|
|
+```bash
|
|
|
+cd ocr_platform/table_line_generator/backend
|
|
|
+uvicorn main:app --reload --port 8000
|
|
|
+```
|
|
|
+
|
|
|
+后端服务将在 http://localhost:8000 启动。
|
|
|
+
|
|
|
+### 3. 安装前端依赖
|
|
|
+
|
|
|
+```bash
|
|
|
+cd ocr_platform/table_line_generator/frontend
|
|
|
+npm install
|
|
|
+```
|
|
|
+
|
|
|
+### 4. 启动前端开发服务器
|
|
|
+
|
|
|
+```bash
|
|
|
+cd ocr_platform/table_line_generator/frontend
|
|
|
+npm run dev
|
|
|
+```
|
|
|
+
|
|
|
+前端服务将在 http://localhost:5173 启动。
|
|
|
+
|
|
|
+## 使用说明
|
|
|
+
|
|
|
+### 上传文件
|
|
|
+1. 打开浏览器访问 http://localhost:5173
|
|
|
+2. 将 OCR JSON 文件和对应图片拖拽到上传区域
|
|
|
+3. 点击"开始分析"按钮
|
|
|
+
|
|
|
+### 编辑线条
|
|
|
+- **拖拽移动**: 直接拖拽线条调整位置
|
|
|
+- **选中线条**: 点击线条进行选中（选中后变为红色）
|
|
|
+- **删除线条**: 选中后按 Delete 键，或点击工具栏删除按钮
|
|
|
+- **添加线条**: 点击工具栏"添加横线/竖线"按钮
|
|
|
+- **精确调整**: 在右侧面板输入精确坐标值
|
|
|
+
|
|
|
+### 键盘快捷键
|
|
|
+| 快捷键 | 功能 |
|
|
|
+|-------|------|
|
|
|
+| Ctrl+Z | 撤销 |
|
|
|
+| Ctrl+Y / Ctrl+Shift+Z | 重做 |
|
|
|
+| Delete / Backspace | 删除选中线条 |
|
|
|
+| ↑↓ | 微调横线 ±1px |
|
|
|
+| ←→ | 微调竖线 ±1px |
|
|
|
+| Shift+方向键 | 微调 ±10px |
|
|
|
+
|
|
|
+### 保存结果
|
|
|
+1. 在右侧面板设置输出目录和文件名
|
|
|
+2. 点击"保存结果"按钮
|
|
|
+3. 将生成结构 JSON 和绘制线条的图片
|
|
|
+
|
|
|
+## 项目结构
|
|
|
+
|
|
|
+```
|
|
|
+table_line_generator/
|
|
|
+├── core/ # Python 核心模块
|
|
|
+│ ├── ocr_parser.py # OCR 数据解析
|
|
|
+│ ├── table_analyzer.py # 表格结构分析
|
|
|
+│ └── drawing_service.py # 绘图服务
|
|
|
+├── backend/ # FastAPI 后端
|
|
|
+│ ├── main.py # 应用入口
|
|
|
+│ ├── api/ # API 路由
|
|
|
+│ ├── services/ # 业务逻辑
|
|
|
+│ ├── models/ # 数据模型
|
|
|
+│ └── config/ # 配置文件
|
|
|
+└── frontend/ # Vue 3 前端
|
|
|
+ ├── src/
|
|
|
+ │ ├── components/ # Vue 组件
|
|
|
+ │ ├── composables/ # 组合式函数
|
|
|
+ │ ├── stores/ # Pinia 状态管理
|
|
|
+ │ ├── api/ # API 客户端
|
|
|
+ │ └── types/ # TypeScript 类型
|
|
|
+ └── package.json
|
|
|
+```
|
|
|
+
|
|
|
+## 坐标系统说明
|
|
|
+
|
|
|
+- **原图坐标**: 所有结构数据使用原图像素坐标
|
|
|
+- **显示坐标**: 前端显示时乘以 `scaleFactor`
|
|
|
+- **保存时**: 直接使用原图坐标，无需转换
|
|
|
+
|
|
|
+对于超过 4096×4096 的大图，系统会自动计算 `scaleFactor` 进行缩放显示。
|
|
|
+
|
|
|
+## 依赖关系
|
|
|
+
|
|
|
+本模块依赖 `ocr_platform/ocr_utils` 中的公共工具函数。如果需要使用图片处理相关的工具函数，可以从 `ocr_utils.image_utils` 导入。
|
|
|
+
|
|
|
+## API 文档
|
|
|
+
|
|
|
+启动后端后，访问 http://localhost:8000/docs 查看 Swagger API 文档。
|
|
|
+
|
|
|
+## License
|
|
|
+
|
|
|
+MIT
|
|
|
+
|
