# smart-docx-five

**Repository Path**: ylchenxd/smart-docx-five

## Basic Information

- **Project Name**: smart-docx-five
- **Description**: 一个前后端分离的在线文档处理工具，允许用户上传DOCX文档，通过PDF预览进行可视化标注编辑，最终在原文档指定位置添加内容并生成新的DOCX文档。
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 1
- **Created**: 2025-12-11
- **Last Updated**: 2026-01-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 文档编辑系统

一个前后端分离的在线文档处理工具，允许用户上传DOCX文档，通过PDF预览进行可视化标注编辑，最终在原文档指定位置添加内容并生成新的DOCX文档。

## 功能特性

- 📄 **文档上传**: 支持DOCX格式文件上传，自动转换为PDF预览
- 🎨 **可视化标注**: 在PDF上拖拽绘制方框，精确定位编辑位置
- ✏️ **内容编辑**: 为每个标注添加文本内容，支持多段落编辑
- ⬇️ **文档下载**: 生成编辑后的DOCX文档，保持原有格式

## 技术栈

### 前端
- Vue3 + TypeScript
- Vite
- Element Plus
- Axios
- Canvas绘图

### 后端
- Python 3.10+
- FastAPI
- SQLite
- python-docx
- reportlab
- pdf2image

## 快速开始

### 环境要求

- Node.js 20+
- Python 3.10+
- Windows系统（或安装libreoffice的Linux系统）

### 安装依赖

1. **前端依赖**
```bash
npm install
```

2. **后端依赖**
```bash
cd api
uv sync
```

### 启动服务

1. **启动后端服务**
```bash
cd api
uv run python -m uvicorn main:app --host 0.0.0.0 --port 8000 --reload
```

2. **启动前端服务**
```bash
npm run dev
```

3. **访问应用**
打开浏览器访问: http://localhost:5173

## API接口

### 文件上传
```
POST /api/upload
Content-Type: multipart/form-data
Body: file (DOCX文件)
```

### 获取PDF页面
```
GET /api/pdf/{fileId}?page={pageNum}
```

### 提交编辑
```
POST /api/edit
Content-Type: application/json
Body: {
  "fileId": "string",
  "boxes": [{
    "pageNum": number,
    "x": number,
    "y": number,
    "width": number,
    "height": number,
    "text": "string"
  }]
}
```

### 下载文件
```
GET /api/download/{fileId}
```

## 项目结构

```
edit-docx/
├── src/                    # 前端源码
│   ├── components/         # 公共组件
│   ├── pages/             # 页面组件
│   ├── utils/             # 工具函数
│   ├── types/             # TypeScript类型定义
│   └── router/            # 路由配置
├── api/                    # 后端源码
│   ├── routers/           # API路由
│   ├── services/          # 业务逻辑
│   ├── models.py          # 数据库模型
│   └── main.py            # 应用入口
└── .trae/documents/       # 项目文档
```

## 使用说明

1. **上传文档**: 点击首页"开始编辑文档"按钮，选择DOCX文件上传
2. **预览编辑**: 在PDF预览页面，使用鼠标拖拽绘制标注方框
3. **添加内容**: 在右侧标注面板中为每个方框输入要添加的文本内容
4. **完成编辑**: 点击"完成编辑"按钮，系统将处理文档并跳转到下载页面
5. **下载文档**: 在下载页面查看编辑摘要并下载编辑后的DOCX文件

## 注意事项

- 仅支持DOCX格式文件
- 文件大小限制为10MB
- 建议使用现代浏览器访问
- 需要系统安装libreoffice以获得最佳PDF转换效果

## 开发说明

### 前端开发
```bash
npm run dev          # 开发服务器
npm run build        # 构建生产版本
npm run preview      # 预览构建结果
```

### 后端开发
```bash
uv run python -m uvicorn main:app --reload  # 开发服务器
uv run python test_api.py                    # 运行测试
```

### 代码检查
```bash
npm run check        # TypeScript类型检查
```

## 许可证

MIT License