refactor(admin): 拆分剧集转码产物面板组件

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

@@ -0,0 +1,26 @@
+# 剧集转码面板组件拆分
+
+## 目标
+
+- 将 `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`。

docs/plans/PROGRESS.md

@@ -51,3 +51,52 @@ Build successful. Please see dist-dev directory
 ```
 
 解读：开发构建成功；circular chunk 为仓库既有 Element Plus 分包警告，本次未改构建配置。
+
+## 2026-10-22 剧集转码面板组件拆分
+
+- 分支：`feature/transcode-panel-split`
+- 基线：`develop` / `origin/develop` = `52b10d3`
+- 计划：`docs/plans/2026-10-22-transcode-panel-split.md`
+
+已读取 `AGENTS.md` 与 `CODING_STANDARDS.md`。当前
+`EpisodeTranscodePanel.vue` 为 816 行，超过单文件 500 行红线。
+拆分将保持父组件的数据获取、轮询清理、分页请求与切集重置逻辑不变。
+
+### 拆分结果
+
+```text
+$ wc -l src/views/contentManagement/upload/EpisodeTranscodePanel.vue \
+  src/views/contentManagement/upload/EpisodeTranscodeStatusBadge.vue \
+  src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue \
+  src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue \
+  src/views/contentManagement/upload/EpisodeTranscodeFrames.vue \
+  src/views/contentManagement/upload/episodeTranscodeUi.ts
+266 EpisodeTranscodePanel.vue
+45 EpisodeTranscodeStatusBadge.vue
+155 EpisodeTranscodeStatusPanel.vue
+119 EpisodeTranscodeRenditions.vue
+315 EpisodeTranscodeFrames.vue
+93 episodeTranscodeUi.ts
+```
+
+解读：父面板只保留接口调用、轮询、请求序号、分页状态与组件组合；
+状态、清晰度、帧图分别独立，全部文件均低于 500 行。
+
+### 门禁
+
+```text
+$ pnpm ts:check
+> vue-tsc --noEmit --skipLibCheck
+（通过）
+
+$ pnpm lint:eslint
+> eslint --fix --ext .js,.ts,.vue ./src
+（0 error / 0 warning）
+
+$ pnpm build:dev
+ WARN  Circular chunk: element-plus -> vue-chunks -> element-plus.
+Build successful. Please see dist-dev directory
+```
+
+解读：组件 props/emits、类型检查、ESLint 和开发构建全部通过；
+循环 chunk 为项目既有警告。轮询启停、接口路径、分页参数和 locales 文案未改变。

src/views/contentManagement/upload/EpisodeTranscodeFrames.vue

@@ -0,0 +1,315 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码逐帧、雪碧图与分页预览 -->
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type {
+  MediaThumbnailFrameItem,
+  MediaThumbnailResult,
+  MediaThumbnailSpriteInfo
+} from '@/api/admin/types'
+import { useI18n } from '@/hooks/web/useI18n'
+import { formatTimeMs, THUMBNAIL_PAGE_SIZES } from './episodeTranscodeUi'
+
+interface FramesView {
+  data: MediaThumbnailResult | null
+  loading: boolean
+  errorMessage: string
+  pageIndex: number
+  pageSize: number
+}
+
+const props = defineProps<{
+  view: FramesView
+}>()
+
+const emit = defineEmits<{
+  pageChange: [value: number]
+  pageSizeChange: [value: number]
+  retry: []
+}>()
+
+const FRAME_CARD_WIDTH = 128
+const PREVIEW_MAX_WIDTH = 520
+const PREVIEW_MAX_HEIGHT = 360
+
+const { t } = useI18n()
+const frameView = ref<'frames' | 'sprites'>('frames')
+const previewVisible = ref(false)
+const previewFrame = ref<MediaThumbnailFrameItem | null>(null)
+const frames = computed(() => props.view.data?.frames?.list || [])
+const sprite = computed(() => props.view.data?.sprite || null)
+const spriteUrls = computed(() => sprite.value?.spriteUrls || [])
+const framesTotal = computed(() => Number(props.view.data?.frames?.total || 0))
+const previewStyle = computed(() => {
+  const frame = previewFrame.value
+  const info = sprite.value
+  if (!frame || !info) return {}
+  const scale = Math.min(
+    PREVIEW_MAX_WIDTH / Math.max(1, frame.width),
+    PREVIEW_MAX_HEIGHT / Math.max(1, frame.height)
+  )
+  return frameStyle(frame, info, scale)
+})
+
+function openFramePreview(frame: MediaThumbnailFrameItem) {
+  previewFrame.value = frame
+  previewVisible.value = true
+}
+
+function frameStyle(frame: MediaThumbnailFrameItem, info: MediaThumbnailSpriteInfo, scale: number) {
+  return {
+    width: `${Math.round(frame.width * scale)}px`,
+    height: `${Math.round(frame.height * scale)}px`,
+    backgroundImage: `url("${frame.spriteUrl || frame.imageUrl}")`,
+    backgroundPosition: `-${Math.round(frame.x * scale)}px -${Math.round(frame.y * scale)}px`,
+    backgroundSize: `${Math.round((info.columns || 1) * frame.width * scale)}px ${Math.round(
+      (info.rows || 1) * frame.height * scale
+    )}px`
+  }
+}
+
+function frameCardStyle(frame: MediaThumbnailFrameItem) {
+  if (!sprite.value) return {}
+  return frameStyle(frame, sprite.value, FRAME_CARD_WIDTH / Math.max(1, frame.width))
+}
+
+function spriteFrameCount(index: number) {
+  const info = sprite.value
+  if (!info) return 0
+  const capacity = Math.max(1, info.columns * info.rows)
+  return Math.max(0, Math.min(capacity, info.totalFrames - index * capacity))
+}
+</script>
+
+<template>
+  <div class="episode-transcode-frames__heading">
+    <h4>{{ t('episodeTranscode.frameTitle') }}</h4>
+    <div class="episode-transcode-frames__tools">
+      <span>{{ t('episodeTranscode.frameCount', { total: framesTotal }) }}</span>
+      <el-radio-group v-model="frameView" size="small">
+        <el-radio-button label="frames">{{ t('episodeTranscode.frameView') }}</el-radio-button>
+        <el-radio-button label="sprites">{{ t('episodeTranscode.spriteView') }}</el-radio-button>
+      </el-radio-group>
+    </div>
+  </div>
+  <el-alert
+    v-if="view.errorMessage"
+    type="error"
+    :title="view.errorMessage"
+    :closable="false"
+    show-icon
+  >
+    <template #default>
+      <el-button size="small" text @click="emit('retry')">
+        {{ t('episodeTranscode.retryLoad') }}
+      </el-button>
+    </template>
+  </el-alert>
+  <div v-loading="view.loading">
+    <template v-if="frameView === 'frames'">
+      <div v-if="frames.length" class="episode-transcode-frames__grid">
+        <button
+          v-for="frame in frames"
+          :key="frame.frameIndex"
+          class="episode-transcode-frames__card"
+          type="button"
+          :aria-label="t('episodeTranscode.previewFrame', { time: formatTimeMs(frame.timeMs) })"
+          @click="openFramePreview(frame)"
+        >
+          <span class="episode-transcode-frames__image" :style="frameCardStyle(frame)"></span>
+          <span>{{ formatTimeMs(frame.timeMs) }}</span>
+        </button>
+      </div>
+      <el-empty v-else :description="t('episodeTranscode.noFrames')" :image-size="58" />
+      <el-pagination
+        v-if="framesTotal"
+        class="episode-transcode-frames__pagination"
+        background
+        layout="sizes, prev, pager, next"
+        :current-page="view.pageIndex"
+        :page-size="view.pageSize"
+        :page-sizes="THUMBNAIL_PAGE_SIZES"
+        :total="framesTotal"
+        @current-change="emit('pageChange', $event)"
+        @size-change="emit('pageSizeChange', $event)"
+      />
+    </template>
+    <div v-else-if="spriteUrls.length && sprite" class="episode-transcode-frames__sprites">
+      <figure
+        v-for="(url, index) in spriteUrls"
+        :key="url"
+        class="episode-transcode-frames__sprite"
+      >
+        <div
+          class="episode-transcode-frames__sprite-frame"
+          :style="{
+            aspectRatio: `${sprite.columns * sprite.thumbWidth} / ${
+              sprite.rows * sprite.thumbHeight
+            }`
+          }"
+        >
+          <el-image
+            :src="url"
+            :preview-src-list="spriteUrls"
+            :initial-index="index"
+            fit="contain"
+            preview-teleported
+            hide-on-click-modal
+          />
+          <span
+            class="episode-transcode-frames__sprite-grid"
+            :style="{
+              backgroundSize: `calc(100% / ${sprite.columns}) calc(100% / ${sprite.rows})`
+            }"
+          ></span>
+        </div>
+        <figcaption>
+          <b>{{ t('episodeTranscode.spriteSheet', { index: index + 1 }) }}</b>
+          <span>{{
+            t('episodeTranscode.spriteSheetFrames', { count: spriteFrameCount(index) })
+          }}</span>
+        </figcaption>
+      </figure>
+    </div>
+    <el-empty v-else :description="t('episodeTranscode.noSprites')" :image-size="58" />
+  </div>
+
+  <el-dialog
+    v-model="previewVisible"
+    :title="t('episodeTranscode.zoomTitle')"
+    width="min(92vw, 600px)"
+    append-to-body
+    destroy-on-close
+  >
+    <div class="episode-transcode-frames__preview-shell">
+      <div class="episode-transcode-frames__preview-image" :style="previewStyle"></div>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.episode-transcode-frames__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 18px 0 10px;
+}
+
+.episode-transcode-frames__heading h4 {
+  margin: 0;
+  font-size: 13px;
+}
+
+.episode-transcode-frames__tools {
+  display: flex;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  align-items: center;
+  gap: 12px;
+}
+
+.episode-transcode-frames__grid {
+  display: grid;
+  justify-content: center;
+  gap: 10px;
+  grid-template-columns: repeat(4, 128px);
+}
+
+.episode-transcode-frames__card {
+  display: flex;
+  min-width: 0;
+  padding: 0;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  cursor: zoom-in;
+  background: transparent;
+  border: 0;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.episode-transcode-frames__image {
+  display: block;
+  overflow: hidden;
+  background-color: var(--el-fill-color-dark);
+  background-repeat: no-repeat;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 7px;
+}
+
+.episode-transcode-frames__card:hover .episode-transcode-frames__image {
+  border-color: var(--el-color-primary);
+}
+
+.episode-transcode-frames__pagination {
+  margin-top: 14px;
+  justify-content: flex-end;
+}
+
+.episode-transcode-frames__sprites {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.episode-transcode-frames__sprite {
+  min-width: 0;
+  margin: 0;
+}
+
+.episode-transcode-frames__sprite-frame {
+  position: relative;
+  overflow: hidden;
+  background: var(--el-fill-color-dark);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+}
+
+.episode-transcode-frames__sprite-frame :deep(.el-image) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.episode-transcode-frames__sprite-grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(to right, rgb(255 255 255 / 34%) 1px, transparent 1px),
+    linear-gradient(to bottom, rgb(255 255 255 / 34%) 1px, transparent 1px);
+  background-repeat: repeat;
+}
+
+.episode-transcode-frames__sprite figcaption {
+  display: flex;
+  padding-top: 6px;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.episode-transcode-frames__preview-shell {
+  display: flex;
+  min-height: 240px;
+  background: var(--el-fill-color-dark);
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+}
+
+.episode-transcode-frames__preview-image {
+  background-repeat: no-repeat;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+}
+
+@media (width <= 600px) {
+  .episode-transcode-frames__grid {
+    grid-template-columns: repeat(2, 128px);
+  }
+}
+</style>

src/views/contentManagement/upload/EpisodeTranscodePanel.vue

@@ -1,55 +1,36 @@
 <!-- Author: fruit.com.cn -->
-<!-- 剧集转码产物：任务状态、清晰度列表、帧图与雪碧图预览 -->
+<!-- 剧集转码面板：数据获取、轮询与子组件组合 -->
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
-import { useClipboard } from '@vueuse/core'
 import { ElMessage } from 'element-plus'
 import {
   getEpisodeTranscodeApi,
   getMediaThumbnailsApi,
   triggerMediaTranscodeApi
 } from '@/api/admin/transcode'
-import type {
+import type { EpisodeTranscodeItem, MediaThumbnailResult } from '@/api/admin/types'
-  EpisodeTranscodeItem,
-  MediaRenditionItem,
-  MediaThumbnailFrameItem,
-  MediaThumbnailResult,
-  MediaThumbnailSpriteInfo
-} from '@/api/admin/types'
-import { AppIcon } from '@/components/AppIcon'
-import { AppIcons } from '@/constants/icons'
 import { useI18n } from '@/hooks/web/useI18n'
+import EpisodeTranscodeFrames from './EpisodeTranscodeFrames.vue'
+import EpisodeTranscodeRenditions from './EpisodeTranscodeRenditions.vue'
+import EpisodeTranscodeStatusBadge from './EpisodeTranscodeStatusBadge.vue'
+import EpisodeTranscodeStatusPanel from './EpisodeTranscodeStatusPanel.vue'
+import {
+  safeTranscodeProgress,
+  THUMBNAIL_PAGE_SIZE,
+  transcodeProgressStatus,
+  transcodeStatusKey,
+  transcodeStatusType
+} from './episodeTranscodeUi'
 
 const props = defineProps<{
   episodeId: number
   active: boolean
 }>()
 
-const { t } = useI18n()
-const { copy, isSupported } = useClipboard()
-
 const POLL_INTERVAL_MS = 4000
-const THUMBNAIL_PAGE_SIZE = 100
-const THUMBNAIL_PAGE_SIZES = [100, 200, 500]
-const FRAME_CARD_WIDTH = 128
-const PREVIEW_MAX_WIDTH = 520
-const PREVIEW_MAX_HEIGHT = 360
-const STATUS_KEYS: Record<string, string> = {
-  QUEUED: 'queued',
-  RUNNING: 'running',
-  SUCCESS: 'success',
-  FAILED: 'failed',
-  EMPTY: 'empty',
-  NO_VIDEO: 'noVideo',
-  NO_MEDIA_ASSET: 'noMediaAsset',
-  NO_TASK: 'noTask',
-  NO_EPISODE: 'noEpisode',
-  EPISODE_NOT_FOUND: 'episodeNotFound',
-  INVALID: 'invalid',
-  READY: 'ready'
-}
 
+const { t } = useI18n()
 const expanded = ref<string[]>(['transcode'])
 const detail = ref<EpisodeTranscodeItem | null>(null)
 const thumbnails = ref<MediaThumbnailResult | null>(null)
@@ -58,11 +39,8 @@ const thumbnailLoading = ref(false)
 const retriggering = ref(false)
 const errorMessage = ref('')
 const thumbnailError = ref('')
-const frameView = ref<'frames' | 'sprites'>('frames')
 const pageIndex = ref(1)
 const pageSize = ref(THUMBNAIL_PAGE_SIZE)
-const previewVisible = ref(false)
-const previewFrame = ref<MediaThumbnailFrameItem | null>(null)
 let pollTimer: ReturnType<typeof setTimeout> | null = null
 let requestSeq = 0
 let thumbnailSeq = 0
@@ -71,51 +49,34 @@ const mediaAssetId = computed(() => Number(detail.value?.mediaAssetId || 0))
 const hasMedia = computed(() => mediaAssetId.value > 0)
 const normalizedStatus = computed(() => String(detail.value?.status || '').toUpperCase())
 const renditions = computed(() => detail.value?.renditions || [])
-const frames = computed(() => thumbnails.value?.frames?.list || [])
-const sprite = computed(() => thumbnails.value?.sprite || null)
-const spriteUrls = computed(() => sprite.value?.spriteUrls || [])
-const framesTotal = computed(() => Number(thumbnails.value?.frames?.total || 0))
 const isProcessing = computed(
   () => normalizedStatus.value === 'QUEUED' || normalizedStatus.value === 'RUNNING'
 )
-const safeProgress = computed(() => Math.min(100, Math.max(0, Number(detail.value?.progress || 0))))
+const statusLabel = computed(() =>
-
+  t(`episodeTranscode.status.${transcodeStatusKey(detail.value?.status)}`)
-const statusLabel = computed(() => {
+)
-  const key = STATUS_KEYS[String(detail.value?.status || '').toUpperCase()] || 'unknown'
+const statusType = computed(() => transcodeStatusType(detail.value?.status))
-  return t(`episodeTranscode.status.${key}`)
+const progressStatus = computed(() => transcodeProgressStatus(detail.value?.status))
-})
+const progress = computed(() => safeTranscodeProgress(detail.value?.progress))
-
+const showOutputs = computed(() => !!detail.value && hasMedia.value && !errorMessage.value)
-const statusTagType = computed(() => {
+const statusView = computed(() => ({
-  switch (normalizedStatus.value) {
+  loading: loading.value,
-    case 'SUCCESS':
+  errorMessage: errorMessage.value,
-      return 'success'
+  hasMedia: hasMedia.value,
-    case 'RUNNING':
+  retriggering: retriggering.value,
-      return 'warning'
+  isProcessing: isProcessing.value,
-    case 'FAILED':
+  statusLabel: statusLabel.value,
-      return 'danger'
+  statusType: statusType.value,
-    case 'QUEUED':
+  progressStatus: progressStatus.value,
-      return 'primary'
+  progress: progress.value
-    default:
+}))
-      return 'info'
+const framesView = computed(() => ({
-  }
+  data: thumbnails.value,
-})
+  loading: thumbnailLoading.value,
-
+  errorMessage: thumbnailError.value,
-const progressStatus = computed(() => {
+  pageIndex: pageIndex.value,
-  if (normalizedStatus.value === 'SUCCESS') return 'success'
+  pageSize: pageSize.value
-  if (normalizedStatus.value === 'FAILED') return 'exception'
+}))
-  return undefined
-})
-
-const previewStyle = computed(() => {
-  const frame = previewFrame.value
-  const info = sprite.value
-  if (!frame || !info) return {}
-  const scale = Math.min(
-    PREVIEW_MAX_WIDTH / Math.max(1, frame.width),
-    PREVIEW_MAX_HEIGHT / Math.max(1, frame.height)
-  )
-  return frameStyle(frame, info, scale)
-})
 
 watch(
   [() => props.episodeId, () => props.active],
@@ -142,9 +103,6 @@ function resetState() {
   thumbnailError.value = ''
   pageIndex.value = 1
   pageSize.value = THUMBNAIL_PAGE_SIZE
-  frameView.value = 'frames'
-  previewVisible.value = false
-  previewFrame.value = null
 }
 
 function stopPolling() {
@@ -242,90 +200,6 @@ function changePageSize(value: number) {
   void loadThumbnailPage()
 }
 
-async function copyPlayUrl(url: string) {
-  if (!url) return
-  if (!isSupported.value) {
-    ElMessage.error(t('episodeTranscode.copyFailed'))
-    return
-  }
-  try {
-    await copy(url)
-    ElMessage.success(t('episodeTranscode.copySuccess'))
-  } catch {
-    ElMessage.error(t('episodeTranscode.copyFailed'))
-  }
-}
-
-function openPlayUrl(url: string) {
-  if (!url || !window.open(url, '_blank', 'noopener,noreferrer')) {
-    ElMessage.error(t('episodeTranscode.openFailed'))
-  }
-}
-
-function openFramePreview(frame: MediaThumbnailFrameItem) {
-  previewFrame.value = frame
-  previewVisible.value = true
-}
-
-function frameStyle(frame: MediaThumbnailFrameItem, info: MediaThumbnailSpriteInfo, scale: number) {
-  return {
-    width: `${Math.round(frame.width * scale)}px`,
-    height: `${Math.round(frame.height * scale)}px`,
-    backgroundImage: `url("${frame.spriteUrl || frame.imageUrl}")`,
-    backgroundPosition: `-${Math.round(frame.x * scale)}px -${Math.round(frame.y * scale)}px`,
-    backgroundSize: `${Math.round((info.columns || 1) * frame.width * scale)}px ${Math.round(
-      (info.rows || 1) * frame.height * scale
-    )}px`
-  }
-}
-
-function frameCardStyle(frame: MediaThumbnailFrameItem) {
-  if (!sprite.value) return {}
-  return frameStyle(frame, sprite.value, FRAME_CARD_WIDTH / Math.max(1, frame.width))
-}
-
-function spriteFrameCount(index: number) {
-  const info = sprite.value
-  if (!info) return 0
-  const capacity = Math.max(1, info.columns * info.rows)
-  return Math.max(0, Math.min(capacity, info.totalFrames - index * capacity))
-}
-
-function renditionStatusLabel(rendition: MediaRenditionItem) {
-  const key = STATUS_KEYS[String(rendition.status || '').toUpperCase()] || 'unknown'
-  return t(`episodeTranscode.status.${key}`)
-}
-
-function renditionStatusType(status: string) {
-  if (status === 'ready') return 'success'
-  if (status === 'failed') return 'danger'
-  return 'info'
-}
-
-function formatBytes(value?: number) {
-  const size = Number(value || 0)
-  if (size >= 1024 * 1024 * 1024) return `${(size / 1024 / 1024 / 1024).toFixed(2)} GB`
-  if (size >= 1024 * 1024) return `${(size / 1024 / 1024).toFixed(1)} MB`
-  if (size >= 1024) return `${Math.round(size / 1024)} KB`
-  return `${size} B`
-}
-
-function formatDuration(seconds?: number) {
-  const total = Math.max(0, Number(seconds || 0))
-  const minutes = Math.floor(total / 60)
-  return `${String(minutes).padStart(2, '0')}:${String(total % 60).padStart(2, '0')}`
-}
-
-function formatTimeMs(milliseconds?: number) {
-  const totalMs = Math.max(0, Number(milliseconds || 0))
-  const totalSeconds = Math.floor(totalMs / 1000)
-  const minutes = Math.floor(totalSeconds / 60)
-  const seconds = totalSeconds % 60
-  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${Math.floor(
-    (totalMs % 1000) / 100
-  )}`
-}
-
 function errorText(error: unknown, fallback: string) {
   return error instanceof Error && error.message ? error.message : fallback
 }
@@ -338,269 +212,34 @@ function errorText(error: unknown, fallback: string) {
         <template #title>
           <div class="episode-transcode-panel__heading">
             <span>{{ t('episodeTranscode.title') }}</span>
-            <el-tag v-if="detail" :type="statusTagType" effect="light" size="small">
+            <EpisodeTranscodeStatusBadge
-              {{ statusLabel }}
+              :visible="!!detail"
-            </el-tag>
+              :status-label="statusLabel"
-            <el-progress
+              :status-type="statusType"
-              v-if="detail && hasMedia"
+              :progress="progress"
-              class="episode-transcode-panel__heading-progress"
+              :progress-status="progressStatus"
-              :percentage="safeProgress"
+              :show-progress="!!detail && hasMedia"
-              :status="progressStatus"
-              :stroke-width="6"
-              :show-text="false"
             />
           </div>
         </template>
 
-        <p class="episode-transcode-panel__description">
+        <EpisodeTranscodeStatusPanel
-          {{ t('episodeTranscode.description') }}
+          :detail="detail"
-        </p>
+          :view="statusView"
-        <el-skeleton v-if="loading && !detail" :rows="4" animated />
+          @retry="loadDetail()"
-        <div v-else-if="errorMessage" class="episode-transcode-panel__error">
+          @retrigger="retrigger"
-          <el-alert type="error" :title="errorMessage" :closable="false" show-icon />
-          <el-button size="small" @click="loadDetail()">
-            <AppIcon :icon="AppIcons.refresh" :size="16" />
-            {{ t('episodeTranscode.retryLoad') }}
-          </el-button>
-        </div>
-        <el-empty
-          v-else-if="detail && !hasMedia"
-          :description="t('episodeTranscode.noMedia')"
-          :image-size="72"
         />
-        <template v-else-if="detail">
+        <template v-if="showOutputs">
-          <div class="episode-transcode-panel__summary">
+          <EpisodeTranscodeRenditions :renditions="renditions" />
-            <div class="episode-transcode-panel__metric">
+          <EpisodeTranscodeFrames
-              <span>{{ t('episodeTranscode.statusLabel') }}</span>
+            :view="framesView"
-              <el-tag :type="statusTagType" effect="light">{{ statusLabel }}</el-tag>
+            @page-change="changePage"
-            </div>
+            @page-size-change="changePageSize"
-            <div class="episode-transcode-panel__metric">
+            @retry="loadThumbnailPage"
-              <span>{{ t('episodeTranscode.progress') }}</span>
-              <b>{{ safeProgress }}%</b>
-            </div>
-            <div class="episode-transcode-panel__metric">
-              <span>{{ t('episodeTranscode.retryCount') }}</span>
-              <b>{{ detail.retryCount || 0 }}</b>
-            </div>
-            <el-button
-              class="episode-transcode-panel__retry"
-              type="primary"
-              plain
-              :loading="retriggering"
-              :disabled="!hasMedia || isProcessing || retriggering"
-              @click="retrigger"
-            >
-              <AppIcon :icon="AppIcons.restart" :size="16" />
-              {{
-                retriggering ? t('episodeTranscode.reprocessing') : t('episodeTranscode.reprocess')
-              }}
-            </el-button>
-          </div>
-          <el-progress
-            class="episode-transcode-panel__progress"
-            :percentage="safeProgress"
-            :status="progressStatus"
-            :stroke-width="8"
           />
-          <el-alert
-            v-if="detail.errorMsg"
-            class="episode-transcode-panel__error-alert"
-            type="error"
-            :title="detail.errorMsg"
-            :closable="false"
-            show-icon
-          />
-
-          <div class="episode-transcode-panel__subheading">
-            <h4>{{ t('episodeTranscode.renditionTitle') }}</h4>
-          </div>
-          <el-table
-            :data="renditions"
-            size="small"
-            border
-            class="episode-transcode-panel__table"
-            :empty-text="t('episodeTranscode.noRendition')"
-          >
-            <el-table-column
-              prop="qualityName"
-              :label="t('episodeTranscode.quality')"
-              min-width="88"
-            />
-            <el-table-column
-              prop="resolution"
-              :label="t('episodeTranscode.resolution')"
-              min-width="105"
-            />
-            <el-table-column :label="t('episodeTranscode.videoBitrate')" min-width="105">
-              <template #default="{ row }">{{ row.videoBitrateKbps }} kbps</template>
-            </el-table-column>
-            <el-table-column :label="t('episodeTranscode.audioBitrate')" min-width="105">
-              <template #default="{ row }">{{ row.audioBitrateKbps }} kbps</template>
-            </el-table-column>
-            <el-table-column
-              prop="videoCodec"
-              :label="t('episodeTranscode.codec')"
-              min-width="82"
-            />
-            <el-table-column
-              prop="container"
-              :label="t('episodeTranscode.container')"
-              min-width="82"
-            />
-            <el-table-column :label="t('episodeTranscode.fileSize')" min-width="92">
-              <template #default="{ row }">{{ formatBytes(row.sizeBytes) }}</template>
-            </el-table-column>
-            <el-table-column :label="t('episodeTranscode.duration')" min-width="76">
-              <template #default="{ row }">{{ formatDuration(row.durationSec) }}</template>
-            </el-table-column>
-            <el-table-column
-              prop="segmentCount"
-              :label="t('episodeTranscode.segments')"
-              min-width="76"
-            />
-            <el-table-column :label="t('episodeTranscode.statusColumn')" min-width="82">
-              <template #default="{ row }">
-                <el-tag :type="renditionStatusType(row.status)" effect="light" size="small">
-                  {{ renditionStatusLabel(row) }}
-                </el-tag>
-              </template>
-            </el-table-column>
-            <el-table-column
-              :label="t('episodeTranscode.actions')"
-              width="92"
-              fixed="right"
-              align="center"
-            >
-              <template #default="{ row }">
-                <el-tooltip :content="t('episodeTranscode.copyUrl')" placement="top">
-                  <el-button text circle @click="copyPlayUrl(row.hlsUrl)">
-                    <AppIcon :icon="AppIcons.copy" :size="17" />
-                  </el-button>
-                </el-tooltip>
-                <el-tooltip :content="t('episodeTranscode.openUrl')" placement="top">
-                  <el-button text circle @click="openPlayUrl(row.hlsUrl)">
-                    <AppIcon :icon="AppIcons.openInNew" :size="17" />
-                  </el-button>
-                </el-tooltip>
-              </template>
-            </el-table-column>
-          </el-table>
-
-          <div class="episode-transcode-panel__subheading">
-            <h4>{{ t('episodeTranscode.frameTitle') }}</h4>
-            <div class="episode-transcode-panel__frame-tools">
-              <span>{{ t('episodeTranscode.frameCount', { total: framesTotal }) }}</span>
-              <el-radio-group v-model="frameView" size="small">
-                <el-radio-button label="frames">{{
-                  t('episodeTranscode.frameView')
-                }}</el-radio-button>
-                <el-radio-button label="sprites">{{
-                  t('episodeTranscode.spriteView')
-                }}</el-radio-button>
-              </el-radio-group>
-            </div>
-          </div>
-          <el-alert
-            v-if="thumbnailError"
-            type="error"
-            :title="thumbnailError"
-            :closable="false"
-            show-icon
-          >
-            <template #default>
-              <el-button size="small" text @click="loadThumbnailPage">
-                {{ t('episodeTranscode.retryLoad') }}
-              </el-button>
-            </template>
-          </el-alert>
-          <div v-loading="thumbnailLoading">
-            <template v-if="frameView === 'frames'">
-              <div v-if="frames.length" class="episode-transcode-panel__frames">
-                <button
-                  v-for="frame in frames"
-                  :key="frame.frameIndex"
-                  class="episode-transcode-panel__frame"
-                  type="button"
-                  :aria-label="
-                    t('episodeTranscode.previewFrame', { time: formatTimeMs(frame.timeMs) })
-                  "
-                  @click="openFramePreview(frame)"
-                >
-                  <span
-                    class="episode-transcode-panel__frame-image"
-                    :style="frameCardStyle(frame)"
-                  ></span>
-                  <span>{{ formatTimeMs(frame.timeMs) }}</span>
-                </button>
-              </div>
-              <el-empty v-else :description="t('episodeTranscode.noFrames')" :image-size="58" />
-              <el-pagination
-                v-if="framesTotal"
-                class="episode-transcode-panel__pagination"
-                background
-                layout="sizes, prev, pager, next"
-                :current-page="pageIndex"
-                :page-size="pageSize"
-                :page-sizes="THUMBNAIL_PAGE_SIZES"
-                :total="framesTotal"
-                @current-change="changePage"
-                @size-change="changePageSize"
-              />
-            </template>
-            <div v-else-if="spriteUrls.length && sprite" class="episode-transcode-panel__sprites">
-              <figure
-                v-for="(url, index) in spriteUrls"
-                :key="url"
-                class="episode-transcode-panel__sprite"
-              >
-                <div
-                  class="episode-transcode-panel__sprite-frame"
-                  :style="{
-                    aspectRatio: `${sprite.columns * sprite.thumbWidth} / ${
-                      sprite.rows * sprite.thumbHeight
-                    }`
-                  }"
-                >
-                  <el-image
-                    :src="url"
-                    :preview-src-list="spriteUrls"
-                    :initial-index="index"
-                    fit="contain"
-                    preview-teleported
-                    hide-on-click-modal
-                  />
-                  <span
-                    class="episode-transcode-panel__sprite-grid"
-                    :style="{
-                      backgroundSize: `calc(100% / ${sprite.columns}) calc(100% / ${sprite.rows})`
-                    }"
-                  ></span>
-                </div>
-                <figcaption>
-                  <b>{{ t('episodeTranscode.spriteSheet', { index: index + 1 }) }}</b>
-                  <span>{{
-                    t('episodeTranscode.spriteSheetFrames', { count: spriteFrameCount(index) })
-                  }}</span>
-                </figcaption>
-              </figure>
-            </div>
-            <el-empty v-else :description="t('episodeTranscode.noSprites')" :image-size="58" />
-          </div>
         </template>
       </el-collapse-item>
     </el-collapse>
-
-    <el-dialog
-      v-model="previewVisible"
-      :title="t('episodeTranscode.zoomTitle')"
-      width="min(92vw, 600px)"
-      append-to-body
-      destroy-on-close
-    >
-      <div class="episode-transcode-panel__preview-shell">
-        <div class="episode-transcode-panel__preview-image" :style="previewStyle"></div>
-      </div>
-    </el-dialog>
   </section>
 </template>
 
@@ -624,193 +263,4 @@ function errorText(error: unknown, fallback: string) {
   align-items: center;
   gap: 10px;
 }
-
-.episode-transcode-panel__heading-progress {
-  width: 110px;
-  margin-left: auto;
-}
-
-.episode-transcode-panel__description {
-  margin: 0 0 14px;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-}
-
-.episode-transcode-panel__error {
-  display: flex;
-  align-items: flex-start;
-  gap: 10px;
-  flex-direction: column;
-}
-
-.episode-transcode-panel__summary {
-  display: flex;
-  align-items: center;
-  gap: 18px;
-  flex-wrap: wrap;
-}
-
-.episode-transcode-panel__metric {
-  display: flex;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  align-items: center;
-  gap: 8px;
-}
-
-.episode-transcode-panel__metric b {
-  font-size: 14px;
-  color: var(--el-text-color-primary);
-  font-variant-numeric: tabular-nums;
-}
-
-.episode-transcode-panel__retry {
-  margin-left: auto;
-}
-
-.episode-transcode-panel__progress {
-  margin-top: 12px;
-}
-
-.episode-transcode-panel__error-alert,
-.episode-transcode-panel__thumbnail-error {
-  margin-top: 12px;
-}
-
-.episode-transcode-panel__subheading {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: 12px;
-  margin: 18px 0 10px;
-}
-
-.episode-transcode-panel__subheading h4 {
-  margin: 0;
-  font-size: 13px;
-}
-
-.episode-transcode-panel__table {
-  width: 100%;
-}
-
-.episode-transcode-panel__frame-tools {
-  display: flex;
-  font-size: 12px;
-  color: var(--el-text-color-secondary);
-  align-items: center;
-  gap: 12px;
-}
-
-.episode-transcode-panel__frames {
-  display: grid;
-  justify-content: center;
-  gap: 10px;
-  grid-template-columns: repeat(4, 128px);
-}
-
-.episode-transcode-panel__frame {
-  display: flex;
-  min-width: 0;
-  padding: 0;
-  font-size: 11px;
-  color: var(--el-text-color-secondary);
-  cursor: zoom-in;
-  background: transparent;
-  border: 0;
-  flex-direction: column;
-  gap: 5px;
-}
-
-.episode-transcode-panel__frame-image {
-  display: block;
-  overflow: hidden;
-  background-color: var(--el-fill-color-dark);
-  background-repeat: no-repeat;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 7px;
-}
-
-.episode-transcode-panel__frame:hover .episode-transcode-panel__frame-image {
-  border-color: var(--el-color-primary);
-}
-
-.episode-transcode-panel__pagination {
-  margin-top: 14px;
-  justify-content: flex-end;
-}
-
-.episode-transcode-panel__sprites {
-  display: grid;
-  gap: 16px;
-  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
-}
-
-.episode-transcode-panel__sprite {
-  min-width: 0;
-  margin: 0;
-}
-
-.episode-transcode-panel__sprite-frame {
-  position: relative;
-  overflow: hidden;
-  background: var(--el-fill-color-dark);
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-}
-
-.episode-transcode-panel__sprite-frame :deep(.el-image) {
-  display: block;
-  width: 100%;
-  height: 100%;
-}
-
-.episode-transcode-panel__sprite-grid {
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  background-image:
-    linear-gradient(to right, rgb(255 255 255 / 34%) 1px, transparent 1px),
-    linear-gradient(to bottom, rgb(255 255 255 / 34%) 1px, transparent 1px);
-  background-repeat: repeat;
-}
-
-.episode-transcode-panel__sprite figcaption {
-  display: flex;
-  padding-top: 6px;
-  font-size: 11px;
-  color: var(--el-text-color-secondary);
-  justify-content: space-between;
-  gap: 8px;
-}
-
-.episode-transcode-panel__preview-shell {
-  display: flex;
-  min-height: 240px;
-  align-items: center;
-  justify-content: center;
-  background: var(--el-fill-color-dark);
-  border-radius: 8px;
-}
-
-.episode-transcode-panel__preview-image {
-  background-repeat: no-repeat;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: 8px;
-}
-
-@media (width <= 600px) {
-  .episode-transcode-panel__frames {
-    grid-template-columns: repeat(2, 128px);
-  }
-
-  .episode-transcode-panel__summary {
-    align-items: flex-start;
-  }
-
-  .episode-transcode-panel__retry {
-    width: 100%;
-    margin-left: 0;
-  }
-}
 </style>

src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue

@@ -0,0 +1,119 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码清晰度表格与播放地址操作 -->
+
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+import { ElMessage } from 'element-plus'
+import type { MediaRenditionItem } from '@/api/admin/types'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+import { useI18n } from '@/hooks/web/useI18n'
+import {
+  formatBytes,
+  formatDuration,
+  renditionStatusLabelKey,
+  renditionStatusType
+} from './episodeTranscodeUi'
+
+defineProps<{
+  renditions: MediaRenditionItem[]
+}>()
+
+const { t } = useI18n()
+const { copy, isSupported } = useClipboard()
+
+function statusLabel(rendition: MediaRenditionItem) {
+  return t(`episodeTranscode.status.${renditionStatusLabelKey(rendition.status)}`)
+}
+
+async function copyPlayUrl(url: string) {
+  if (!url) return
+  if (!isSupported.value) {
+    ElMessage.error(t('episodeTranscode.copyFailed'))
+    return
+  }
+  try {
+    await copy(url)
+    ElMessage.success(t('episodeTranscode.copySuccess'))
+  } catch {
+    ElMessage.error(t('episodeTranscode.copyFailed'))
+  }
+}
+
+function openPlayUrl(url: string) {
+  if (!url || !window.open(url, '_blank', 'noopener,noreferrer')) {
+    ElMessage.error(t('episodeTranscode.openFailed'))
+  }
+}
+</script>
+
+<template>
+  <div class="episode-transcode-renditions__heading">
+    <h4>{{ t('episodeTranscode.renditionTitle') }}</h4>
+  </div>
+  <el-table
+    :data="renditions"
+    size="small"
+    border
+    class="episode-transcode-renditions__table"
+    :empty-text="t('episodeTranscode.noRendition')"
+  >
+    <el-table-column prop="qualityName" :label="t('episodeTranscode.quality')" min-width="88" />
+    <el-table-column prop="resolution" :label="t('episodeTranscode.resolution')" min-width="105" />
+    <el-table-column :label="t('episodeTranscode.videoBitrate')" min-width="105">
+      <template #default="{ row }">{{ row.videoBitrateKbps }} kbps</template>
+    </el-table-column>
+    <el-table-column :label="t('episodeTranscode.audioBitrate')" min-width="105">
+      <template #default="{ row }">{{ row.audioBitrateKbps }} kbps</template>
+    </el-table-column>
+    <el-table-column prop="videoCodec" :label="t('episodeTranscode.codec')" min-width="82" />
+    <el-table-column prop="container" :label="t('episodeTranscode.container')" min-width="82" />
+    <el-table-column :label="t('episodeTranscode.fileSize')" min-width="92">
+      <template #default="{ row }">{{ formatBytes(row.sizeBytes) }}</template>
+    </el-table-column>
+    <el-table-column :label="t('episodeTranscode.duration')" min-width="76">
+      <template #default="{ row }">{{ formatDuration(row.durationSec) }}</template>
+    </el-table-column>
+    <el-table-column prop="segmentCount" :label="t('episodeTranscode.segments')" min-width="76" />
+    <el-table-column :label="t('episodeTranscode.statusColumn')" min-width="82">
+      <template #default="{ row }">
+        <el-tag :type="renditionStatusType(row.status)" effect="light" size="small">
+          {{ statusLabel(row) }}
+        </el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column :label="t('episodeTranscode.actions')" width="92" fixed="right" align="center">
+      <template #default="{ row }">
+        <el-tooltip :content="t('episodeTranscode.copyUrl')" placement="top">
+          <el-button text circle @click="copyPlayUrl(row.hlsUrl)">
+            <AppIcon :icon="AppIcons.copy" :size="17" />
+          </el-button>
+        </el-tooltip>
+        <el-tooltip :content="t('episodeTranscode.openUrl')" placement="top">
+          <el-button text circle @click="openPlayUrl(row.hlsUrl)">
+            <AppIcon :icon="AppIcons.openInNew" :size="17" />
+          </el-button>
+        </el-tooltip>
+      </template>
+    </el-table-column>
+  </el-table>
+</template>
+
+<style scoped>
+.episode-transcode-renditions__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 18px 0 10px;
+}
+
+.episode-transcode-renditions__heading h4 {
+  margin: 0;
+  font-size: 13px;
+}
+
+.episode-transcode-renditions__table {
+  width: 100%;
+}
+</style>

src/views/contentManagement/upload/EpisodeTranscodeStatusBadge.vue

@@ -0,0 +1,45 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码折叠标题状态徽标 -->
+
+<script setup lang="ts">
+import type { TranscodeProgressStatus, TranscodeTagType } from './episodeTranscodeUi'
+
+defineProps<{
+  visible: boolean
+  statusLabel: string
+  statusType: TranscodeTagType
+  progress: number
+  progressStatus: TranscodeProgressStatus
+  showProgress: boolean
+}>()
+</script>
+
+<template>
+  <span class="episode-transcode-badge">
+    <el-tag v-if="visible" :type="statusType" effect="light" size="small">
+      {{ statusLabel }}
+    </el-tag>
+    <el-progress
+      v-if="showProgress"
+      class="episode-transcode-badge__progress"
+      :percentage="progress"
+      :status="progressStatus"
+      :stroke-width="6"
+      :show-text="false"
+    />
+  </span>
+</template>
+
+<style scoped>
+.episode-transcode-badge {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 10px;
+}
+
+.episode-transcode-badge__progress {
+  width: 110px;
+  margin-left: auto;
+}
+</style>

src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue

@@ -0,0 +1,155 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码状态、进度、错误与重新转码操作 -->
+
+<script setup lang="ts">
+import type { EpisodeTranscodeItem } from '@/api/admin/types'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+import { useI18n } from '@/hooks/web/useI18n'
+import type { TranscodeProgressStatus, TranscodeTagType } from './episodeTranscodeUi'
+
+interface StatusView {
+  loading: boolean
+  errorMessage: string
+  hasMedia: boolean
+  retriggering: boolean
+  isProcessing: boolean
+  statusLabel: string
+  statusType: TranscodeTagType
+  progressStatus: TranscodeProgressStatus
+  progress: number
+}
+
+defineProps<{
+  detail: EpisodeTranscodeItem | null
+  view: StatusView
+}>()
+
+const emit = defineEmits<{
+  retry: []
+  retrigger: []
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <p class="episode-transcode-status__description">
+    {{ t('episodeTranscode.description') }}
+  </p>
+  <el-skeleton v-if="view.loading && !detail" :rows="4" animated />
+  <div v-else-if="view.errorMessage" class="episode-transcode-status__error">
+    <el-alert type="error" :title="view.errorMessage" :closable="false" show-icon />
+    <el-button size="small" @click="emit('retry')">
+      <AppIcon :icon="AppIcons.refresh" :size="16" />
+      {{ t('episodeTranscode.retryLoad') }}
+    </el-button>
+  </div>
+  <el-empty
+    v-else-if="detail && !view.hasMedia"
+    :description="t('episodeTranscode.noMedia')"
+    :image-size="72"
+  />
+  <template v-else-if="detail">
+    <div class="episode-transcode-status__summary">
+      <div class="episode-transcode-status__metric">
+        <span>{{ t('episodeTranscode.statusLabel') }}</span>
+        <el-tag :type="view.statusType" effect="light">{{ view.statusLabel }}</el-tag>
+      </div>
+      <div class="episode-transcode-status__metric">
+        <span>{{ t('episodeTranscode.progress') }}</span>
+        <b>{{ view.progress }}%</b>
+      </div>
+      <div class="episode-transcode-status__metric">
+        <span>{{ t('episodeTranscode.retryCount') }}</span>
+        <b>{{ detail.retryCount || 0 }}</b>
+      </div>
+      <el-button
+        class="episode-transcode-status__retry"
+        type="primary"
+        plain
+        :loading="view.retriggering"
+        :disabled="!view.hasMedia || view.isProcessing || view.retriggering"
+        @click="emit('retrigger')"
+      >
+        <AppIcon :icon="AppIcons.restart" :size="16" />
+        {{
+          view.retriggering ? t('episodeTranscode.reprocessing') : t('episodeTranscode.reprocess')
+        }}
+      </el-button>
+    </div>
+    <el-progress
+      class="episode-transcode-status__progress"
+      :percentage="view.progress"
+      :status="view.progressStatus"
+      :stroke-width="8"
+    />
+    <el-alert
+      v-if="detail.errorMsg"
+      class="episode-transcode-status__error-alert"
+      type="error"
+      :title="detail.errorMsg"
+      :closable="false"
+      show-icon
+    />
+  </template>
+</template>
+
+<style scoped>
+.episode-transcode-status__description {
+  margin: 0 0 14px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.episode-transcode-status__error {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  flex-direction: column;
+}
+
+.episode-transcode-status__summary {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+.episode-transcode-status__metric {
+  display: flex;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  align-items: center;
+  gap: 8px;
+}
+
+.episode-transcode-status__metric b {
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.episode-transcode-status__retry {
+  margin-left: auto;
+}
+
+.episode-transcode-status__progress {
+  margin-top: 12px;
+}
+
+.episode-transcode-status__error-alert {
+  margin-top: 12px;
+}
+
+@media (width <= 600px) {
+  .episode-transcode-status__summary {
+    align-items: flex-start;
+  }
+
+  .episode-transcode-status__retry {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+</style>

src/views/contentManagement/upload/episodeTranscodeUi.ts

@@ -0,0 +1,93 @@
+// Author: fruit.com.cn
+// 剧集转码面板的状态映射与展示格式化
+
+export type TranscodeTagType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+export type TranscodeProgressStatus = 'success' | 'exception' | undefined
+
+export const THUMBNAIL_PAGE_SIZE = 100
+export const THUMBNAIL_PAGE_SIZES = [100, 200, 500]
+
+const STATUS_KEYS: Record<string, string> = {
+  QUEUED: 'queued',
+  RUNNING: 'running',
+  SUCCESS: 'success',
+  FAILED: 'failed',
+  EMPTY: 'empty',
+  NO_VIDEO: 'noVideo',
+  NO_MEDIA_ASSET: 'noMediaAsset',
+  NO_TASK: 'noTask',
+  NO_EPISODE: 'noEpisode',
+  EPISODE_NOT_FOUND: 'episodeNotFound',
+  INVALID: 'invalid',
+  READY: 'ready'
+}
+const BYTES_PER_KB = 1024
+const BYTES_PER_MB = BYTES_PER_KB * 1024
+const BYTES_PER_GB = BYTES_PER_MB * 1024
+const SECONDS_PER_MINUTE = 60
+const MILLIS_PER_SECOND = 1000
+
+export function transcodeStatusKey(status?: string): string {
+  return STATUS_KEYS[String(status || '').toUpperCase()] || 'unknown'
+}
+
+export function transcodeStatusType(status?: string): TranscodeTagType {
+  switch (String(status || '').toUpperCase()) {
+    case 'SUCCESS':
+      return 'success'
+    case 'RUNNING':
+      return 'warning'
+    case 'FAILED':
+      return 'danger'
+    case 'QUEUED':
+      return 'primary'
+    default:
+      return 'info'
+  }
+}
+
+export function transcodeProgressStatus(status?: string): TranscodeProgressStatus {
+  const normalized = String(status || '').toUpperCase()
+  if (normalized === 'SUCCESS') return 'success'
+  if (normalized === 'FAILED') return 'exception'
+  return undefined
+}
+
+export function safeTranscodeProgress(value?: number): number {
+  return Math.min(100, Math.max(0, Number(value || 0)))
+}
+
+export function renditionStatusLabelKey(status?: string): string {
+  return transcodeStatusKey(status)
+}
+
+export function renditionStatusType(status?: string): TranscodeTagType {
+  const normalized = String(status || '').toUpperCase()
+  if (normalized === 'READY') return 'success'
+  if (normalized === 'FAILED') return 'danger'
+  return 'info'
+}
+
+export function formatBytes(value?: number): string {
+  const size = Number(value || 0)
+  if (size >= BYTES_PER_GB) return `${(size / BYTES_PER_GB).toFixed(2)} GB`
+  if (size >= BYTES_PER_MB) return `${(size / BYTES_PER_MB).toFixed(1)} MB`
+  if (size >= BYTES_PER_KB) return `${Math.round(size / BYTES_PER_KB)} KB`
+  return `${size} B`
+}
+
+export function formatDuration(seconds?: number): string {
+  const total = Math.max(0, Number(seconds || 0))
+  const minutes = Math.floor(total / SECONDS_PER_MINUTE)
+  const remainder = total % SECONDS_PER_MINUTE
+  return `${String(minutes).padStart(2, '0')}:${String(remainder).padStart(2, '0')}`
+}
+
+export function formatTimeMs(milliseconds?: number): string {
+  const totalMs = Math.max(0, Number(milliseconds || 0))
+  const totalSeconds = Math.floor(totalMs / MILLIS_PER_SECOND)
+  const minutes = Math.floor(totalSeconds / SECONDS_PER_MINUTE)
+  const seconds = totalSeconds % SECONDS_PER_MINUTE
+  const tenths = Math.floor((totalMs % MILLIS_PER_SECOND) / 100)
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${tenths}`
+}