# 智能翻译开发任务拆分（Checklist）

> 目标：按最小可交付顺序完成“智能翻译”功能，并保持结构清晰、便于后续接接口与调整样式。

## 阶段 1：入口与路由
- [x] 在 `moduleHeader` 增加“智能翻译”入口（图标 `tool-item-icon2.png`）
- [x] 配置主路由 `intelligentTranslation`
- [x] 配置文档对照页路由（建议 `intelligentTranslationDocument`）
- [x] 本地验证：点击入口可进入主页面

## 阶段 2：页面骨架搭建
- [x] 创建目录 `src/views/intelligentTranslation/`
- [x] 创建 `index.vue`（主页面）
- [x] 创建 `documentCompare.vue`（文档对照页）
- [x] 引入左侧通用组件 `src/components/intelligenceLeftTabBar/index.vue`
- [x] 搭建基础布局结构（左侧导航 + 右侧内容区）

## 阶段 3：主页面核心交互（需求 a）
- [x] 实现“文本模式”默认视图
  - [x] 原文输入框
  - [x] 上传文档按钮
  - [x] 翻译按钮（位于右上）
  - [x] 右侧翻译内容区
- [x] 实现文本翻译占位逻辑（点击翻译后展示 mock 结果）
- [x] 实现“文件模式”切换逻辑
  - [x] 上传后输入区替换为上传文件列表
  - [x] 右侧翻译内容区隐藏
- [x] 实现文件模式“翻译”按钮跳转到文档对照页
  - [x] 传递上传文件名到对照页

## 阶段 4：上传记录区（需求 a 下半区）
- [x] 在主页面底部实现上传记录区域
- [x] 以占位数据展示：文档名、时间
- [x] 保持结构和类名清晰，便于后续替换为接口

## 阶段 5：文档对照页实现（需求 b）
- [x] 顶部 header 显示文档名称（来自上传文件名）
- [x] 左侧实现文章标题树（mock）
- [x] 右侧实现段落对照（左原文右译文）
- [x] 实现点击树节点后右侧过滤/定位对应段落

## 阶段 6：占位数据与类型管理
- [x] 新建 `mock.js` 统一管理页面 mock 数据
- [x] （可选）不使用 `types.ts`，采用 JS 方案
- [x] 在关键位置加 `TODO: replace with API`

## 阶段 7：样式与可维护性
- [x] 输出简洁样式（不做复杂视觉）
- [x] 统一语义化 class 命名
- [x] 检查结构是否便于后续改样式

## 阶段 8：联调与验收
- [x] 从入口进入主页面流程完整可跑通
- [x] 文本翻译流程可用（占位）
- [x] 文档上传 -> 文件模式 -> 跳转对照页流程可用
- [x] 对照页标题、树、段落对照展示正确
- [x] 检查并修复本次改动引入的 lint 问题
- [x] 左侧导航“智能翻译”支持直接跳转并高亮
