53 lines
1.3 KiB
Markdown
53 lines
1.3 KiB
Markdown
|
# 导出按钮缺失修复计划
|
|||
|
|
|
|||
|
|
## 问题分析
|
|||
|
|
当前 `action-buttons` 区域只有以下按钮可见：
|
|||
|
|
- 上传文件
|
|||
|
|
- 导入 Markdown
|
|||
|
|
- 导出 Markdown
|
|||
|
|
- 上传图片
|
|||
|
|
- AI 切换按钮
|
|||
|
|
|
|||
|
|
**缺失功能**：DOCX 和 PDF 导出按钮
|
|||
|
|
|
|||
|
|
## 调查结果
|
|||
|
|
1. ✅ 翻译文件中已存在 `exportDocx` 和 `exportPdf` 键名（src/utils/i18n.js）
|
|||
|
|
2. ❌ 模板中**完全缺失**这两个按钮的 HTML 代码
|
|||
|
|
3. ❓ 导出功能后端已实现，前端只需要添加调用接口的按钮
|
|||
|
|
4. ✅ 相关 CSS 样式已存在，按钮外观无需额外调整
|
|||
|
|
|
|||
|
|
## 实施计划
|
|||
|
|
|
|||
|
|
### 1. 添加 UI 按钮
|
|||
|
|
在 `src/components/MilkdownEditor.vue:79` 之后添加两个新按钮：
|
|||
|
|
- DOCX 导出按钮
|
|||
|
|
- PDF 导出按钮
|
|||
|
|
|
|||
|
|
按钮位置：
|
|||
|
|
```
|
|||
|
|
导出 Markdown → 导出 DOCX → 导出 PDF → 上传图片
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 实现前端导出功能
|
|||
|
|
使用已安装的依赖库：
|
|||
|
|
- `docx` 库：用于 DOCX 导出
|
|||
|
|
- `html2pdf.js` 库：用于 PDF 导出
|
|||
|
|
|
|||
|
|
需要添加的函数：
|
|||
|
|
```javascript
|
|||
|
|
const exportDocx = async () => {
|
|||
|
|
// 使用 docx 库实现导出
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
const exportPdf = async () => {
|
|||
|
|
// 使用 html2pdf.js 实现导出
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 按钮图标
|
|||
|
|
- DOCX：使用文档图标
|
|||
|
|
- PDF：使用 PDF 专用图标
|
|||
|
|
|
|||
|
|
### 4. 状态管理
|
|||
|
|
添加加载状态和错误处理，与现有按钮保持一致风格
|