# 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