# 三种显示模式实现方案

## 概述
本文档详细规划三种翻译显示模式的实现方案：
1. 并行对照模式（中英文并排）
2. 交替段落模式（一段英文一段中文）
3. 悬停翻译模式（鼠标悬停显示翻译）

## 1. 并行对照模式 (Parallel Layout)

### 设计目标
- 左右分栏显示原文和译文
- 保持段落对齐
- 支持灵活的栏宽调整

### Typst 实现方案

```typst
// 并行对照布局函数
#let parallel_layout(translation_data, content) = {
  // 设置两栏布局
  set page(columns: 2)
  
  // 创建左右两栏内容
  let left_column = []
  let right_column = []
  
  // 处理每个段落
  for segment in translation_data.segments {
    left_column.push(block([
      set text(style: "italic", fill: gray)
      segment.original_text
    ]))
    
    right_column.push(block([
      set text(fill: black)  
      segment.translated_text
    ]))
  }
  
  // 使用网格布局实现并行显示
  grid(
    columns: (1fr, 1fr),
    column-gutter: 2em,
    ..left_column,
    ..right_column
  )
}

// 使用示例
#import "translation-data.typ": book_translation

#show: doc => parallel_layout(
  translation_data: book_translation,
  content: doc
)
```

### 高级功能
1. **同步滚动**: 通过 JavaScript 实现（PDF 中有限支持）
2. **段落高亮**: 当前阅读段落高亮显示
3. **栏宽调整**: 用户可调整左右栏比例

## 2. 交替段落模式 (Alternating Layout)

### 设计目标
- 原文和译文交替显示
- 保持阅读流畅性
- 清晰的视觉区分

### Typst 实现方案

```typst
// 交替段落布局函数
#let alternating_layout(translation_data, content) = {
  let output = []
  
  for segment in translation_data.segments {
    // 原文段落（英文）
    output.push(block([
      set text(style: "italic", fill: gray, size: 10.5pt)
      segment.original_text
    ]))
    
    // 译文段落（中文）
    output.push(block([
      set text(fill: black, size: 12pt)
      segment.translated_text
    ]))
    
    // 段落间距
    output.push(v(1em))
  }
  
  // 返回组合内容
  output
}

// 样式优化版本
#let alternating_layout_enhanced(translation_data, content) = {
  set par(leading: 1.4em)
  
  for (i, segment) in translation_data.segments.enumerate() {
    // 原文段落带背景色
    block(
      fill: rgb("#F8F9FA"),
      inset: 1em,
      radius: 0.5em,
      stroke: (width: 0.5pt, color: gray),
      [
        set text(style: "italic", size: 10.5pt, fill: rgb("#495057"))
        segment.original_text
      ]
    )
    
    v(0.5em)
    
    // 译文段落
    block([
      set text(size: 12pt, fill: black)
      segment.translated_text
    ])
    
    // 章节分隔（每5段加分隔线）
    if i % 5 == 4 and i != translation_data.segments.len() - 1 {
      line(length: 100%, stroke: 0.5pt + lightgray)
      v(1em)
    } else {
      v(1.5em)
    }
  }
}
```

## 3. 悬停翻译模式 (Hover Layout)

### 设计目标
- 默认只显示原文
- 鼠标悬停时显示翻译
- 适合流畅阅读体验

### 实现挑战
- Typst/PDF本身不支持交互功能
- 需要生成交互式 PDF 或 HTML 输出

### 解决方案

#### 方案 A: 交互式 PDF（有限支持）
```typst
// 基础实现 - 使用注释形式
#let hover_layout(translation_data, content) = {
  for segment in translation_data.segments {
    block([
      // 原文文本
      segment.original_text
      
      // 翻译作为注释（PDF中显示为弹出注释）
      note[
        set text(size: 10pt)
        "翻译: " + segment.translated_text
      ]
    ])
    
    v(1em)
  }
}
```

#### 方案 B: HTML 输出（推荐）
```typst
// 生成带悬停效果的HTML
#let hover_layout_html(translation_data, content) = {
  let html_output = "<div class='translation-container'>"
  
  for segment in translation_data.segments {
    html_output += `
      <div class='translation-segment'>
        <span class='original-text'>${segment.original_text}</span>
        <span class='translation-tooltip'>${segment.translated_text}</span>
      </div>
    `
  }
  
  html_output += "</div>"
  
  // 返回原始内容（实际需要HTML输出功能）
  raw(html_output)
}
```

#### 方案 C: 双版本输出
```typst
// 生成PDF和HTML双版本
#let generate_dual_output(translation_data, content) = {
  // PDF版本（交替模式）
  let pdf_version = alternating_layout(translation_data, content)
  
  // HTML版本（悬停模式）
  let html_version = hover_layout_html(translation_data, content)
  
  // 根据输出格式选择
  if sys.output_format == "pdf" {
    pdf_version
  } else if sys.output_format == "html" {
    html_version
  } else {
    pdf_version // 默认
  }
}
```

## 综合实现架构

### 文件结构
```
templates/
├── translation-lib.typ          # 核心翻译功能库
├── parallel-layout.typ          # 并行布局实现
├── alternating-layout.typ       # 交替布局实现  
├── hover-layout.typ             # 悬停布局实现
└── bilingual-template.typ       # 主模板文件

scripts/
├── translate-text.py            # 文本翻译脚本
├── process-translations.py      # 翻译数据处理
└── generate-bilingual.py        # 双语文档生成
```

### 核心库函数
```typst
// translation-lib.typ
#let load_translation(file_path) = {
  // 加载翻译数据
  let data = read_json(file_path)
  return data
}

#let create_bilingual_document(translation_data, mode: "parallel") = {
  // 根据模式选择布局
  let layout_function = match mode {
    "parallel" => import("parallel-layout.typ").parallel_layout,
    "alternating" => import("alternating-layout.typ").alternating_layout,
    "hover" => import("hover-layout.typ").hover_layout,
    _ => import("parallel-layout.typ").parallel_layout
  }
  
  // 应用布局
  return layout_function(translation_data)
}
```

### Python 集成脚本
```python
# generate-bilingual.py
import json
import typst

def generate_bilingual_pdf(translation_file, template_file, output_file, mode="parallel"):
    # 加载翻译数据
    with open(translation_file, 'r', encoding='utf-8') as f:
        translation_data = json.load(f)
    
    # 生成 Typst 内容
    typst_content = f'''
    #import "templates/bilingual-template.typ": create_bilingual_document
    
    #let translation = {json.dumps(translation_data, ensure_ascii=False)}
    
    #create_bilingual_document(translation, mode: "{mode}")
    '''
    
    # 编译为 PDF
    typst.compile(typst_content, output=output_file)
```

## 实施路线图

### 阶段 1: 基础实现（1-2 周）
1. 实现并行对照模式
2. 实现交替段落模式  
3. 基础翻译数据加载

### 阶段 2: 功能增强（2-3 周）
1. 添加样式和主题支持
2. 实现缓存机制
3. 添加质量评估功能

### 阶段 3: 高级功能（3-4 周）
1. 实现交互式悬停模式（HTML 输出）
2. 添加批处理功能
3. 集成翻译 API

### 阶段 4: 优化发布（1-2 周）
1. 性能优化
2. 文档编写
3. 用户测试

## 技术注意事项

1. **性能考虑**: 大型文档需要分块处理
2. **内存管理**: 翻译数据可能很大，需要流式处理
3. **输出格式**: PDF 对交互支持有限，HTML 更适合悬停模式
4. **兼容性**: 确保与现有 PDF 处理流程兼容

这个实现方案提供了完整的三种显示模式支持，可以根据具体需求选择合适的布局方式。