feat: add danmaku replay player integration

- Add IDanmakuService interface and DanmakuService implementation to parse danmaku XML files
- Add GET /api/record-tasks/{id}/danmaku and GET /api/record-sessions/{id}/danmaku endpoints
- Add DanmakuPlayer Vue component with native video + CSS overlay danmaku rendering
- Add danmakuEngine.ts pure-TypeScript animation loop with binary search, track management, and event notifications
- Add useDanmakuPlayer composable for reusable danmaku data loading
- Integrate danmaku toggle button into RecordTaskDetailView
- Integrate danmaku replay modal dialog into RecordSessionDetailView segment table

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

frontend/src/views/RecordSessionDetailView.vue

@@ -3,9 +3,12 @@ import { computed, onMounted, ref, watch } from "vue";
 import { useRouter } from "vue-router";
 import { ElMessage } from "element-plus";
 import { useViewport } from "@/composables/useViewport";
-import apiClient, { getApiErrorMessage } from "@/api/client";
+import apiClient, { getApiErrorMessage, buildApiUrl } from "@/api/client";
+import { useDanmakuPlayer } from "@/composables/useDanmakuPlayer";
+import DanmakuPlayer from "@/components/player/DanmakuPlayer.vue";
 import type {
   RecordArtifactUploadBatchResult,
+  RecordPreviewTicket,
   RecordSessionDetail,
   RecordSessionTimelineEvent,
   RecordSessionHeatBucket,
@@ -28,6 +31,47 @@ const props = defineProps<{
 const router = useRouter();
 const { isMobile } = useViewport();
 
+// Danmaku replay dialog
+const { danmakuEvents, loading: danmakuLoading, error: danmakuError, loadTaskDanmaku, clear: clearDanmaku } = useDanmakuPlayer();
+const danmakuDialogVisible = ref(false);
+const danmakuDialogTitle = ref("");
+const danmakuPreviewUrl = ref("");
+const danmakuPreviewLoading = ref(false);
+const danmakuPreviewMessage = ref("");
+
+async function openDanmakuReplay(recordTaskId: string, segmentIndex: number) {
+  danmakuDialogVisible.value = true;
+  danmakuDialogTitle.value = `弹幕回放 — 分片 #${segmentIndex}`;
+  danmakuPreviewUrl.value = "";
+  danmakuPreviewMessage.value = "";
+  clearDanmaku();
+
+  // Load preview ticket and danmaku in parallel
+  danmakuPreviewLoading.value = true;
+  try {
+    const [ticketResult] = await Promise.allSettled([
+      apiClient.post<RecordPreviewTicket>(`/record-tasks/${recordTaskId}/preview-ticket`),
+      loadTaskDanmaku(recordTaskId)
+    ]);
+
+    if (ticketResult.status === "fulfilled") {
+      danmakuPreviewUrl.value = ticketResult.value.data.url;
+    } else {
+      danmakuPreviewMessage.value = "无法获取视频预览票据，请稍后重试。";
+    }
+  } catch {
+    danmakuPreviewMessage.value = "加载预览资源失败。";
+  } finally {
+    danmakuPreviewLoading.value = false;
+  }
+}
+
+function closeDanmakuDialog() {
+  danmakuDialogVisible.value = false;
+  danmakuPreviewUrl.value = "";
+  clearDanmaku();
+}
+
 const loading = ref(false);
 const uploadLoading = ref(false);
 const loadError = ref("");
@@ -502,9 +546,18 @@ onMounted(loadDetail);
                 {{ formatDuration(row.durationSeconds) }}
               </template>
             </el-table-column>
-            <el-table-column label="操作" width="120">
+            <el-table-column label="操作" min-width="200">
               <template #default="{ row }">
                 <el-button size="small" @click="openTaskDetail(row.recordTaskId)">查看分片</el-button>
+                <el-button
+                  size="small"
+                  type="primary"
+                  plain
+                  :disabled="row.status !== 4 && row.status !== 6"
+                  @click="openDanmakuReplay(row.recordTaskId, row.segmentIndex)"
+                >
+                  弹幕回放
+                </el-button>
               </template>
             </el-table-column>
           </el-table>
@@ -544,6 +597,24 @@ onMounted(loadDetail);
         </div>
       </el-card>
     </template>
+
+    <!-- Danmaku Replay Dialog -->
+    <el-dialog
+      v-model="danmakuDialogVisible"
+      :title="danmakuDialogTitle"
+      width="90%"
+      :close-on-click-modal="false"
+      @close="closeDanmakuDialog"
+    >
+      <div v-if="danmakuPreviewLoading" class="preview-empty">正在准备预览资源…</div>
+      <div v-else-if="danmakuPreviewMessage" class="preview-empty">{{ danmakuPreviewMessage }}</div>
+      <DanmakuPlayer
+        v-else-if="danmakuPreviewUrl"
+        :video-src="danmakuPreviewUrl"
+        :danmaku-events="danmakuEvents"
+      />
+      <div v-else class="preview-empty">无法加载该分片的预览。</div>
+    </el-dialog>
   </div>
 </template>
 
@@ -720,6 +791,17 @@ onMounted(loadDetail);
   color: var(--text-secondary);
 }
 
+.preview-empty {
+  display: grid;
+  place-items: center;
+  min-height: 260px;
+  padding: 24px;
+  border-radius: 12px;
+  border: 1px dashed var(--border-base);
+  color: var(--text-muted);
+  background: var(--surface-muted);
+}
+
 @media (max-width: 768px) {
   .header-actions {
     width: 100%;
@@ -730,5 +812,10 @@ onMounted(loadDetail);
     flex: 1 1 0;
     margin: 0;
   }
+
+  .preview-empty {
+    min-height: 180px;
+    padding: 18px;
+  }
 }
 </style>