ReelShortWeb/docs/plans/2026-10-22-transcode-panel-split.md

剧集转码面板组件拆分

目标

• 将 EpisodeTranscodePanel.vue 从 816 行降到 500 行以内。
• 状态轮询、分页请求与切集重置继续由父面板统一管理。
• UI 按职责拆为状态徽标、状态操作区、清晰度表格、帧图预览。

组件

1. EpisodeTranscodeStatusBadge.vue：折叠标题中的状态与进度。
2. EpisodeTranscodeStatusPanel.vue：状态、进度、重试次数、错误与重转按钮。
3. EpisodeTranscodeRenditions.vue：清晰度表格、复制地址、新窗口打开。
4. EpisodeTranscodeFrames.vue：逐帧网格、雪碧图、分页与放大预览。

公共状态映射与格式化放入 episodeTranscodeUi.ts。

风险

• 父组件仍负责全部接口、轮询、请求序号和分页状态，子组件只通过 props/emits 交互。
• 不新增依赖、不改接口和 locales 文案。

验证

• wc -l 确认所有相关文件不超过 500 行。
• pnpm lint:eslint、pnpm build:dev。