# 智能翻译页面实现计划

## 1. 目标概述
- 新增“智能翻译”页面，并接入现有入口与路由。
- 页面包含两个视图：
  - a）主页面：文本翻译 / 文档上传翻译 + 上传记录
  - b）文档对照页面：文档标题 + 文章导航树 + 原文/译文段落对照
- 当前阶段全部使用前端占位数据，不接真实接口。

---

## 2. 入口与路由接入

### 2.1 moduleHeader 入口
- 文件：`src/components/base/moduleHeader/index.vue`
- 在指定区域（315-326 附近）新增“智能翻译”入口
  - 文案：`智能翻译`
  - 图标：`@/assets/icons/tool-item-icon2.png`
  - 点击跳转到路由名：`intelligentTranslation`

### 2.2 路由
- 新增主路由：
  - `name: intelligentTranslation`
  - `path: /intelligent-translation`（可按项目现有习惯微调）
  - `component: src/views/intelligentTranslation/index.vue`
- 新增文档对照页路由：
  - 建议 `name: intelligentTranslationDocument`
  - 建议 `path: /intelligent-translation/document`
  - `component: src/views/intelligentTranslation/documentCompare.vue`

---

## 3. 目录与文件规划

在 `src/views/intelligentTranslation/` 下创建：

1. `index.vue`：主页面（需求 a）
2. `documentCompare.vue`：文档对照页面（需求 b）
3. `mock.ts`（可选）：占位数据统一管理
4. `types.ts`（可选）：类型定义，便于后续接接口

---

## 4. 页面 a（主页面）实现方案

## 4.1 布局结构
- 页面最左侧使用通用组件：`src/components/intelligenceLeftTabBar/index.vue`
- 右侧为主工作区：
  - 上方约 2/3：翻译操作区
  - 下方约 1/3：文档翻译上传记录

## 4.2 上方翻译区状态
定义两种状态：

### 状态 1：文本模式（默认）
- 左侧：原文输入区（文本输入框）
- 左侧底部：上传文档按钮
- 左侧右上：翻译按钮
- 右侧：翻译内容展示区
- 交互：输入原文并点击翻译，在右侧展示占位翻译结果

### 状态 2：文件模式（上传文件后）
- 上传后左侧输入区切换为“上传文件列表”
- 右侧翻译内容区隐藏
- 左侧右上继续保留翻译按钮
- 点击翻译按钮后跳转到页面 b

## 4.3 上传记录区
- 展示“文档名 + 时间”两列（占位数据）
- 数据来源先用 mock，后续替换为接口

---

## 5. 页面 b（文档对照页）实现方案

## 5.1 页面结构
- 顶部 Header：显示文档名称（来自上传文件名）
- 下方左右两栏：
  - 左侧：文章导航树（占位数据模拟接口）
  - 右侧：原文/译文按段落一一对照

## 5.2 数据与交互
- 树数据：模拟章节结构（可含 children）
- 段落数据：`[{ sectionId, sourceText, translatedText }]`
- 交互：点击左侧章节，右侧过滤或定位对应段落

---

## 6. 占位数据策略
- 所有“接口返回数据”先统一在 `mock.ts` 管理，避免散落到组件内。
- 页面仅依赖数据结构，后续接真实接口时只替换数据来源。
- 在关键数据位置添加 `TODO: replace with API` 便于后续联调。

---

## 7. 样式与结构约束
- 样式先做简洁版，保证可读与可用。
- 重点保证 HTML 结构和 class 命名清晰，便于后续二次改样式。
- 建议类名示例：
  - `intelligent-translation-page`
  - `translation-main`
  - `source-upload-panel`
  - `translation-result-panel`
  - `upload-record-list`
  - `document-compare-page`
  - `article-nav-tree`
  - `paragraph-compare-row`

---

## 8. 验收清单

1. moduleHeader 中新增“智能翻译”入口并可跳转
2. 主页面默认文本模式可输入并生成占位翻译结果
3. 上传文档后切换到文件模式（输入区变文件列表，右侧翻译区隐藏）
4. 文件模式点击翻译可进入文档对照页
5. 文档对照页 header 正确显示上传文件名
6. 文档对照页左侧展示文章树，右侧按段落对照展示原文/译文
7. 上传记录区展示占位“文档名+时间”
8. 代码结构清晰，便于后续样式和接口替换
