AI论文编辑器前端开发路线（GPT生成）

🧱 前端开发文档：AI 论文编辑器

---

⚙️ 技术选型

• 框架：Vue 3 + Vite
• 组件库：推荐 Element Plus（功能丰富、适配 PC 编辑器）
• 状态管理：Pinia（轻量、Vue 3 原生支持）
• 路由：Vue Router
• 富文本编辑器：推荐 TipTap 或 Editor.js
  • 支持 Markdown 格式、嵌入图片、表格、标题
• PDF预览：pdfjs-dist + <iframe> 或 vue-pdf-embed
• Markdown解析：markdown-it（将 AI 输出的 Markdown 渲染成 HTML）

---

📁 项目结构

frontend/
├── public/
├── src/
│   ├── assets/
│   ├── components/       # 通用组件（按钮、对话框等）
│   ├── views/            # 页面（编辑器页、登录页）
│   ├── editor/           # 富文本编辑器相关组件
│   ├── layout/           # 页面布局（侧边栏、顶部导航）
│   ├── router/
│   ├── store/
│   ├── utils/            # 工具函数（JWT解析、API封装）
│   └── App.vue
└── vite.config.ts

---

🧭 页面设计

页面	说明
登录/注册页	用户认证，获取JWT
主编辑器页面	核心编辑器，包含目录树、编辑区、AI对话
模板选择页面	选择docx/pdf模板，预览样式
论文预览页面	LaTeX→PDF后的预览

---

🧩 功能组件（模块划分）

1. 📚 目录树组件（OutlineTree）

• 作用：显示论文结构，支持增删改查、拖拽排序
• 功能：
  • 添加/删除章节
  • 修改标题文本
  • 拖动排序
• 技术建议：使用 element-plus 的 el-tree + 拖拽插件（如 vuedraggable）

---

2. ✍️ 富文本编辑器组件（RichEditor）

• 每个目录节点对应一个编辑器实例（或者通过切换加载）
• 支持：
  • Markdown / HTML 编辑
  • 图片上传
  • 表格插入
• 推荐：Tiptap（可用 @tiptap/vue-3）

---

3. 🤖 AI 对话组件（ChatPanel）

• 支持上下文提示输入
• 可预设 prompt 模板（“写摘要”、“润色该段”、“按学术格式重写”等）
• 支持 Markdown 渲染 AI 回复，点击“应用”按钮插入到当前章节

---

4. 🧾 模板选择与导出组件（TemplateManager）

• 显示所有可用模板（后端返回）
• 可上传 zip 格式模板
• 支持设置默认模板
• 导出按钮发送 POST 请求生成 PDF（返回下载链接或预览）

---

5. 🖼 PDF 预览组件（PdfPreview）

• 使用 pdfjs-dist 或 vue-pdf-embed
• 将生成的 PDF 放入 <iframe> 或直接嵌入预览

---

6. 🧑 用户中心（UserPanel）

• 用户信息展示
• JWT 管理（登录时写入 LocalStorage）
• 支持修改密码、退出登录

---

🔗 与后端接口对接

登录认证

• 登录成功后保存 JWT 到本地

localStorage.setItem("token", res.data.access_token)

• 所有请求需带上 Authorization: Bearer <token>

与后端交互接口示例

const api = axios.create({
  baseURL: 'http://localhost:8000/api',
  headers: {
    'Authorization': `Bearer ${localStorage.getItem('token')}`
  }
});

---

🛠 本地存储与状态管理

• 使用 Pinia 管理全局状态（论文结构、当前编辑节点、AI上下文等）
• 使用 localStorage 持久化当前论文内容（防止断网或退出丢失）

---

🧪 页面交互流程（简化）

用户登录
  ↓
进入编辑页面（加载论文结构）
  ↓
选择某一章节 → 加载富文本内容
  ↓
可编辑 / AI生成 / 插入段落
  ↓
点击导出 → 后端生成PDF → 前端预览/下载

---

🧩 推荐依赖清单（部分）

npm install vue-router pinia axios element-plus tiptap @tiptap/vue-3 markdown-it pdfjs-dist vue-pdf-embed vuedraggable

---

🚀 后续可拓展功能

• 支持多人协作编辑（WebSocket）
• 引用管理（文献库 + BibTeX 解析）
• 编辑历史版本回退
• AI 风格选择（科普、学术、简洁）

---