# 答题卡查看器组件

这是一个简化的独立组件，用于在 App 中显示带批注的答题卡。

## 功能特点

- ✅ 显示答题卡图片
- ✅ 渲染批改标记（形状、符号、文本）
- ✅ 显示得分、满分、阅卷老师
- ✅ 翻页功能
- ✅ 控制显示/隐藏各种信息
- ✅ 自动缩放以适应屏幕

## 使用方法

### 基础用法

```vue
<template>
  <AnswerSheetWithMarking :data="answerSheetData" :loading="loading" :error="error" />
</template>

<script setup lang="ts">
import { AnswerSheetWithMarking, useDataParser } from '@/components/answer-sheet-viewer';
import type { AnswerSheetData } from '@/components/answer-sheet-viewer';

// 从 API 获取数据
const { data: apiData, loading, error } = useQuery({
  queryKey: ['answerSheet', infoId],
  queryFn: () => api.getAnswerSheetDetail(infoId)
});

// 解析为组件需要的格式
const { parseAnswerSheetData } = useDataParser();
const answerSheetData = computed(() => {
  if (!apiData.value) return null;
  return parseAnswerSheetData(apiData.value);
});
</script>
```

### API 数据格式

组件需要的数据格式：

```typescript
interface AnswerSheetData {
  studentInfo: {
    studentName: string;
    examNumber: string;
    objectiveScore: number;
    subjectiveScore: number;
    totalScore: number;
    fullScore: number;
  };
  answerSheetImages: string[]; // 答题卡图片 URL 列表
  markings: MarkingItem[]; // 批注列表
}
```

使用 `useDataParser` 可以直接将 API 返回的数据转换为组件需要的格式。

## 组件结构

```
answer-sheet-viewer/
├── AnswerSheetWithMarking.vue    # 主组件
├── types.ts                       # 类型定义
├── composables/
│   ├── useMarkingRenderer.ts      # 标记渲染器
│   └── useDataParser.ts           # 数据解析器
├── index.ts                       # 导出入口
└── README.md                      # 说明文档
```

## 核心原理

1. **数据解析** - `useDataParser` 将 API 数据转换为组件格式
2. **图片显示** - 使用原生 `<img>` 标签显示答题卡
3. **标记渲染** - 使用 Konva.js 在图片上方叠加批注
4. **缩放适配** - 根据容器大小自动计算缩放比例

## 依赖

- `konva` - 用于渲染批注（需要在项目中安装）

## 注意事项

1. 组件完全独立，不依赖 TemplateEditor 相关组件
2. 只用于查看，不支持编辑批注
3. 适用于 H5/小程序/APP 多端
4. 图片和批注坐标使用原始像素值，组件内部处理缩放


