refactor(admin): 拆分剧集管理页超长组件

Co-authored-by: Cursor <cursoragent@cursor.com>

src/views/contentManagement/EpisodeManagementView.vue

@@ -1,26 +1,19 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { computed, nextTick, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
 import { pageDramasApi } from '@/api/admin/drama'
-import {
-  createEpisodeApi,
-  deleteEpisodeApi,
-  listEpisodesApi,
-  sortEpisodesApi,
-  updateEpisodeApi
-} from '@/api/admin/episode'
+import { deleteEpisodeApi, listEpisodesApi, sortEpisodesApi } from '@/api/admin/episode'
 import { useRbac } from '@/stores/rbac'
 import { formatCount } from '@/utils/format'
 import { statusClass } from '@/utils/status'
 import { useI18n } from '@/hooks/web/useI18n'
-import { probeVideoDuration, uploadFile } from '@/utils/uploader'
 import BatchUploadDialog from './upload/BatchUploadDialog.vue'
+import EpisodeFormDialog from './upload/EpisodeFormDialog.vue'
 import { listPendingSessions } from './upload/uploadSessions'
-import { MAX_VIDEO_SIZE, VIDEO_ACCEPT_ATTR, VIDEO_EXTENSIONS } from './upload/videoLimit'
 
 const route = useRoute()
 const { can } = useRbac()
@@ -30,71 +23,17 @@ const loading = ref(false)
 const dramas = ref([])
 const episodes = ref([])
 const selectedDramaId = ref(undefined)
-
-const dialogVisible = ref(false)
 const batchUploadVisible = ref(false)
-const batchNextNumber = computed(() => nextNumber())
-const saving = ref(false)
-const uploadingVideo = ref(false)
-const videoPercent = ref(0)
-const videoError = ref('')
-const videoFileName = ref('')
 const previewVisible = ref(false)
 const previewEpisode = ref(null)
-const editingId = ref(null)
-const editingCommentCount = ref(0)
-const formRef = ref()
-const form = reactive({
-  number: 1,
-  title: '',
-  durationSec: 0,
-  videoUrl: '',
-  isFree: true,
-  unlockCoin: 0,
-  likeCount: 0,
-  status: 'draft'
-})
-
-const statusOptions = [
-  { code: 'draft', text: '草稿' },
-  { code: 'approved', text: '待发布' },
-  { code: 'published', text: '已上线' },
-  { code: 'offline', text: '已下线' }
-]
-
-const formRules = {
-  number: [{ required: true, message: '请输入集号', trigger: 'change' }],
-  title: [{ required: true, message: '请输入剧集标题', trigger: 'blur' }],
-  videoUrl: [
-    {
-      validator: (_rule, value, callback) => {
-        if (form.status === 'published' && !value) {
-          callback(new Error('上线剧集必须上传视频'))
-        } else {
-          callback()
-        }
-      },
-      trigger: 'change'
-    }
-  ]
-}
+const formDialogRef = ref()
 
+const batchNextNumber = computed(() => nextNumber())
 const selectedDrama = computed(() => dramas.value.find((item) => item.id === selectedDramaId.value))
-const videoDisplayName = computed(
-  () => videoFileName.value || (form.videoUrl ? episodeBasename(form.videoUrl) : '尚未选择视频')
+const existingEpisodeNumbers = computed(() =>
+  episodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
 )
 
-function episodeBasename(path) {
-  if (!path) return ''
-  const clean = path.split('?')[0].split('#')[0]
-  return decodeURIComponent(clean.split('/').pop() || clean)
-}
-
-async function resetValidation() {
-  await nextTick()
-  formRef.value?.clearValidate()
-}
-
 async function loadDramas() {
   const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
   dramas.value = res.data?.list || []
@@ -125,10 +64,6 @@ function nextNumber() {
   return episodes.value.reduce((max, item) => Math.max(max, item.number || 0), 0) + 1
 }
 
-const existingEpisodeNumbers = computed(() =>
-  episodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
-)
-
 function openBatchUpload() {
   if (!selectedDramaId.value) return
   batchUploadVisible.value = true
@@ -139,132 +74,11 @@ async function onBatchEpisodesCreated() {
 }
 
 function openCreate() {
-  editingId.value = null
-  Object.assign(form, {
-    number: nextNumber(),
-    title: '',
-    durationSec: 0,
-    videoUrl: '',
-    isFree: true,
-    unlockCoin: selectedDrama.value?.unlockCoin ?? 0,
-    likeCount: 0,
-    status: 'draft'
-  })
-  videoFileName.value = ''
-  videoError.value = ''
-  editingCommentCount.value = 0
-  dialogVisible.value = true
-  resetValidation()
+  formDialogRef.value?.openCreate()
 }
 
 function openEdit(row) {
-  editingId.value = row.id
-  Object.assign(form, {
-    number: row.number,
-    title: row.title,
-    durationSec: row.durationSec || 0,
-    videoUrl: row.videoUrl || '',
-    isFree: !!row.isFree,
-    unlockCoin: row.unlockCoin || 0,
-    likeCount: row.likeCount ?? 0,
-    status: row.status
-  })
-  videoFileName.value = row.videoUrl ? episodeBasename(row.videoUrl) : ''
-  videoError.value = ''
-  editingCommentCount.value = row.commentCount ?? 0
-  dialogVisible.value = true
-  resetValidation()
-}
-
-async function saveEpisode() {
-  if (saving.value || uploadingVideo.value) return
-  try {
-    await formRef.value?.validate()
-  } catch {
-    return
-  }
-  const payload = {
-    dramaId: selectedDramaId.value,
-    number: form.number,
-    title: form.title.trim(),
-    durationSec: form.durationSec || 0,
-    videoUrl: form.videoUrl.trim(),
-    isFree: form.isFree,
-    unlockCoin: form.isFree ? 0 : form.unlockCoin || 0,
-    likeCount: form.likeCount,
-    status: form.status
-  }
-  saving.value = true
-  try {
-    if (editingId.value) {
-      await updateEpisodeApi(editingId.value, payload)
-      ElMessage.success('剧集已更新')
-    } else {
-      await createEpisodeApi(payload)
-      ElMessage.success('剧集已创建')
-    }
-    dialogVisible.value = false
-    await loadEpisodes()
-  } finally {
-    saving.value = false
-  }
-}
-
-function beforeVideoUpload(file) {
-  videoError.value = ''
-  const extension = String(file.name || '')
-    .split('.')
-    .pop()
-    ?.toLowerCase()
-  if (!VIDEO_EXTENSIONS.includes(extension)) {
-    videoError.value = t('episodeBatch.invalidType')
-    return false
-  }
-  if (file.size > MAX_VIDEO_SIZE) {
-    videoError.value = '视频大小不能超过 500MB'
-    return false
-  }
-  return true
-}
-
-/** 视频分片上传：先探测时长，再交给上传器，完成后回填地址与时长。 */
-async function uploadVideo(options) {
-  uploadingVideo.value = true
-  videoPercent.value = 0
-  videoError.value = ''
-  try {
-    const duration = await probeVideoDuration(options.file)
-    const asset = await uploadFile(options.file, {
-      bizType: 'EPISODE',
-      durationSec: duration,
-      onProgress: (percent) => (videoPercent.value = percent)
-    })
-    form.videoUrl = asset.url
-    videoFileName.value = options.file.name
-    if (duration > 0) form.durationSec = duration
-    await resetValidation()
-    ElMessage.success('视频已上传')
-  } catch {
-    videoError.value = '视频上传失败，请检查网络后重试'
-  } finally {
-    uploadingVideo.value = false
-  }
-}
-
-function removeVideo() {
-  if (uploadingVideo.value) return
-  form.videoUrl = ''
-  videoFileName.value = ''
-  videoError.value = ''
-  resetValidation()
-}
-
-function beforeDialogClose(done) {
-  if (saving.value || uploadingVideo.value) {
-    ElMessage.warning(saving.value ? '正在保存，请稍候' : '视频正在上传，请稍候')
-    return
-  }
-  done()
+  formDialogRef.value?.openEdit(row)
 }
 
 async function confirmDelete(row) {
@@ -496,198 +310,12 @@ onMounted(async () => {
       >
     </el-table>
   </section>
-  <el-dialog
-    v-model="dialogVisible"
-    :title="editingId ? '编辑剧集' : '新增剧集'"
-    width="680px"
-    class="episode-editor-dialog"
-    :close-on-click-modal="false"
-    :before-close="beforeDialogClose"
-  >
-    <el-form
-      ref="formRef"
-      :model="form"
-      :rules="formRules"
-      label-position="top"
-      class="episode-editor-form"
-    >
-      <section class="episode-editor-section">
-        <h3 class="episode-editor-section-title">基础信息</h3>
-        <div class="episode-editor-grid episode-editor-grid--two">
-          <el-form-item label="集号" prop="number">
-            <el-input-number
-              v-model="form.number"
-              class="episode-editor-number"
-              controls-position="right"
-              :min="1"
-              :max="999"
-            />
-          </el-form-item>
-          <el-form-item label="时长（秒）">
-            <el-input-number
-              v-model="form.durationSec"
-              class="episode-editor-number"
-              controls-position="right"
-              :min="0"
-              :max="9999"
-            />
-          </el-form-item>
-        </div>
-        <el-form-item label="剧集标题" prop="title">
-          <el-input v-model="form.title" maxlength="100" placeholder="例如：命运的相遇" />
-        </el-form-item>
-      </section>
-
-      <section class="episode-editor-section">
-        <h3 class="episode-editor-section-title">视频文件</h3>
-        <el-form-item prop="videoUrl">
-          <div class="episode-video-editor">
-            <div class="episode-video-preview-card">
-              <video
-                v-if="form.videoUrl"
-                :src="form.videoUrl"
-                controls
-                preload="metadata"
-                class="episode-editor-video"
-              ></video>
-              <el-upload
-                v-else
-                drag
-                class="episode-video-empty-upload"
-                :show-file-list="false"
-                :accept="VIDEO_ACCEPT_ATTR"
-                :before-upload="beforeVideoUpload"
-                :http-request="uploadVideo"
-                :disabled="uploadingVideo"
-              >
-                <div class="episode-video-empty-copy">
-                  <AppIcon :icon="AppIcons.videoCameraFront" :size="30" />
-                  <b>拖放或点击上传</b>
-                  <span>MP4、MOV、MKV、WEBM</span>
-                </div>
-              </el-upload>
-              <div v-if="uploadingVideo" class="episode-video-upload-mask">
-                <span>上传中</span>
-                <b>{{ videoPercent }}%</b>
-              </div>
-            </div>
-
-            <div class="episode-video-meta">
-              <div class="episode-video-status">
-                <el-tag :type="form.videoUrl ? 'success' : 'info'" effect="light">
-                  {{ form.videoUrl ? '已上传' : '未上传' }}
-                </el-tag>
-                <span class="episode-video-filename" :title="videoDisplayName">
-                  {{ videoDisplayName }}
-                </span>
-              </div>
-              <p class="episode-video-hint">{{ t('episodeBatch.hint') }}</p>
-              <el-alert
-                v-if="videoError"
-                :title="videoError"
-                type="error"
-                :closable="false"
-                show-icon
-              />
-              <div class="episode-video-actions">
-                <el-upload
-                  v-if="form.videoUrl"
-                  :show-file-list="false"
-                  :accept="VIDEO_ACCEPT_ATTR"
-                  :before-upload="beforeVideoUpload"
-                  :http-request="uploadVideo"
-                  :disabled="uploadingVideo"
-                >
-                  <el-button :loading="uploadingVideo" :disabled="uploadingVideo">
-                    <AppIcon :icon="AppIcons.upload" />
-                    更换视频
-                  </el-button>
-                </el-upload>
-                <el-button
-                  v-if="form.videoUrl"
-                  type="danger"
-                  :disabled="uploadingVideo"
-                  @click="removeVideo"
-                >
-                  移除
-                </el-button>
-                <a
-                  v-if="form.videoUrl"
-                  class="episode-video-link"
-                  :href="form.videoUrl"
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  查看视频
-                </a>
-              </div>
-            </div>
-          </div>
-        </el-form-item>
-      </section>
-
-      <section class="episode-editor-section">
-        <h3 class="episode-editor-section-title">互动数据</h3>
-        <div class="episode-editor-grid episode-editor-grid--two">
-          <el-form-item label="本集点赞数">
-            <el-input-number
-              v-model="form.likeCount"
-              class="episode-editor-number"
-              controls-position="right"
-              :min="0"
-              :precision="0"
-            />
-          </el-form-item>
-          <el-form-item label="本集评论数">
-            <div class="readonly-stat">{{ formatCount(editingCommentCount) }}</div>
-            <p class="readonly-stat-hint">按集实时统计，不可编辑</p>
-          </el-form-item>
-        </div>
-      </section>
-
-      <section class="episode-editor-section">
-        <h3 class="episode-editor-section-title">付费与状态</h3>
-        <div class="episode-editor-grid episode-editor-grid--three">
-          <el-form-item label="是否免费">
-            <el-switch v-model="form.isFree" />
-          </el-form-item>
-          <el-form-item v-show="!form.isFree" label="解锁金币">
-            <el-input-number
-              v-model="form.unlockCoin"
-              class="episode-editor-number"
-              controls-position="right"
-              :min="0"
-              :max="9999"
-            />
-          </el-form-item>
-          <el-form-item label="状态">
-            <el-select v-model="form.status">
-              <el-option
-                v-for="item in statusOptions"
-                :key="item.code"
-                :label="item.text"
-                :value="item.code"
-              />
-            </el-select>
-          </el-form-item>
-        </div>
-      </section>
-    </el-form>
-
-    <template #footer>
-      <el-button :disabled="saving || uploadingVideo" @click="dialogVisible = false">
-        取消
-      </el-button>
-      <el-button
-        type="primary"
-        :loading="saving"
-        :disabled="saving || uploadingVideo"
-        @click="saveEpisode"
-      >
-        保存
-      </el-button>
-    </template>
-  </el-dialog>
+  <EpisodeFormDialog
+    ref="formDialogRef"
+    :drama-options="selectedDrama"
+    :next-number="batchNextNumber"
+    @saved="loadEpisodes"
+  />
   <el-dialog
     v-model="previewVisible"
     :title="`预览：第 ${previewEpisode?.number ?? ''} 集 ${previewEpisode?.title ?? ''}`"

src/views/contentManagement/upload/EpisodeFormDialog.vue

@@ -0,0 +1,280 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集新建/编辑弹窗：表单校验、单集视频上传与保存 -->
+
+<script setup>
+import { nextTick, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { createEpisodeApi, updateEpisodeApi } from '@/api/admin/episode'
+import { formatCount } from '@/utils/format'
+import EpisodeVideoUploader from './EpisodeVideoUploader.vue'
+
+const props = defineProps({
+  dramaOptions: { type: Object, default: null },
+  nextNumber: { type: Number, default: 1 },
+  row: { type: Object, default: null }
+})
+
+const emit = defineEmits(['saved'])
+
+const dialogVisible = ref(false)
+const saving = ref(false)
+const uploadingVideo = ref(false)
+const videoFileName = ref('')
+const editingId = ref(null)
+const editingCommentCount = ref(0)
+const formRef = ref()
+const uploaderRef = ref()
+
+const form = reactive({
+  number: 1,
+  title: '',
+  durationSec: 0,
+  videoUrl: '',
+  isFree: true,
+  unlockCoin: 0,
+  likeCount: 0,
+  status: 'draft'
+})
+
+const statusOptions = [
+  { code: 'draft', text: '草稿' },
+  { code: 'approved', text: '待发布' },
+  { code: 'published', text: '已上线' },
+  { code: 'offline', text: '已下线' }
+]
+
+const formRules = {
+  number: [{ required: true, message: '请输入集号', trigger: 'change' }],
+  title: [{ required: true, message: '请输入剧集标题', trigger: 'blur' }],
+  videoUrl: [
+    {
+      validator: (_rule, value, callback) => {
+        if (form.status === 'published' && !value) {
+          callback(new Error('上线剧集必须上传视频'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'change'
+    }
+  ]
+}
+
+function episodeBasename(path) {
+  if (!path) return ''
+  const clean = path.split('?')[0].split('#')[0]
+  return decodeURIComponent(clean.split('/').pop() || clean)
+}
+
+async function resetValidation() {
+  await nextTick()
+  formRef.value?.clearValidate()
+}
+
+function openCreate() {
+  editingId.value = null
+  Object.assign(form, {
+    number: props.nextNumber,
+    title: '',
+    durationSec: 0,
+    videoUrl: '',
+    isFree: true,
+    unlockCoin: props.dramaOptions?.unlockCoin ?? 0,
+    likeCount: 0,
+    status: 'draft'
+  })
+  videoFileName.value = ''
+  uploaderRef.value?.clearError()
+  editingCommentCount.value = 0
+  dialogVisible.value = true
+  resetValidation()
+}
+
+function openEdit(row) {
+  const target = row || props.row
+  if (!target) return
+  editingId.value = target.id
+  Object.assign(form, {
+    number: target.number,
+    title: target.title,
+    durationSec: target.durationSec || 0,
+    videoUrl: target.videoUrl || '',
+    isFree: !!target.isFree,
+    unlockCoin: target.unlockCoin || 0,
+    likeCount: target.likeCount ?? 0,
+    status: target.status
+  })
+  videoFileName.value = target.videoUrl ? episodeBasename(target.videoUrl) : ''
+  uploaderRef.value?.clearError()
+  editingCommentCount.value = target.commentCount ?? 0
+  dialogVisible.value = true
+  resetValidation()
+}
+
+async function saveEpisode() {
+  if (saving.value || uploadingVideo.value) return
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
+  const dramaId = props.dramaOptions?.id
+  if (!dramaId) return
+  const payload = {
+    dramaId,
+    number: form.number,
+    title: form.title.trim(),
+    durationSec: form.durationSec || 0,
+    videoUrl: form.videoUrl.trim(),
+    isFree: form.isFree,
+    unlockCoin: form.isFree ? 0 : form.unlockCoin || 0,
+    likeCount: form.likeCount,
+    status: form.status
+  }
+  saving.value = true
+  try {
+    if (editingId.value) {
+      await updateEpisodeApi(editingId.value, payload)
+      ElMessage.success('剧集已更新')
+    } else {
+      await createEpisodeApi(payload)
+      ElMessage.success('剧集已创建')
+    }
+    dialogVisible.value = false
+    emit('saved')
+  } finally {
+    saving.value = false
+  }
+}
+
+function beforeDialogClose(done) {
+  if (saving.value || uploadingVideo.value) {
+    ElMessage.warning(saving.value ? '正在保存，请稍候' : '视频正在上传，请稍候')
+    return
+  }
+  done()
+}
+
+defineExpose({ openCreate, openEdit })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="editingId ? '编辑剧集' : '新增剧集'"
+    width="680px"
+    class="episode-editor-dialog"
+    :close-on-click-modal="false"
+    :before-close="beforeDialogClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="formRules"
+      label-position="top"
+      class="episode-editor-form"
+    >
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">基础信息</h3>
+        <div class="episode-editor-grid episode-editor-grid--two">
+          <el-form-item label="集号" prop="number">
+            <el-input-number
+              v-model="form.number"
+              class="episode-editor-number"
+              controls-position="right"
+              :min="1"
+              :max="999"
+            />
+          </el-form-item>
+          <el-form-item label="时长（秒）">
+            <el-input-number
+              v-model="form.durationSec"
+              class="episode-editor-number"
+              controls-position="right"
+              :min="0"
+              :max="9999"
+            />
+          </el-form-item>
+        </div>
+        <el-form-item label="剧集标题" prop="title">
+          <el-input v-model="form.title" maxlength="100" placeholder="例如：命运的相遇" />
+        </el-form-item>
+      </section>
+
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">视频文件</h3>
+        <el-form-item prop="videoUrl">
+          <EpisodeVideoUploader
+            ref="uploaderRef"
+            v-model:video-url="form.videoUrl"
+            v-model:duration-sec="form.durationSec"
+            v-model:file-name="videoFileName"
+            v-model:uploading="uploadingVideo"
+            @change="resetValidation"
+          />
+        </el-form-item>
+      </section>
+
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">互动数据</h3>
+        <div class="episode-editor-grid episode-editor-grid--two">
+          <el-form-item label="本集点赞数">
+            <el-input-number
+              v-model="form.likeCount"
+              class="episode-editor-number"
+              controls-position="right"
+              :min="0"
+              :precision="0"
+            />
+          </el-form-item>
+          <el-form-item label="本集评论数">
+            <div class="readonly-stat">{{ formatCount(editingCommentCount) }}</div>
+            <p class="readonly-stat-hint">按集实时统计，不可编辑</p>
+          </el-form-item>
+        </div>
+      </section>
+
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">付费与状态</h3>
+        <div class="episode-editor-grid episode-editor-grid--three">
+          <el-form-item label="是否免费">
+            <el-switch v-model="form.isFree" />
+          </el-form-item>
+          <el-form-item v-show="!form.isFree" label="解锁金币">
+            <el-input-number
+              v-model="form.unlockCoin"
+              class="episode-editor-number"
+              controls-position="right"
+              :min="0"
+              :max="9999"
+            />
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-select v-model="form.status">
+              <el-option
+                v-for="item in statusOptions"
+                :key="item.code"
+                :label="item.text"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+        </div>
+      </section>
+    </el-form>
+
+    <template #footer>
+      <el-button :disabled="saving || uploadingVideo" @click="dialogVisible = false">
+        取消
+      </el-button>
+      <el-button
+        type="primary"
+        :loading="saving"
+        :disabled="saving || uploadingVideo"
+        @click="saveEpisode"
+      >
+        保存
+      </el-button>
+    </template>
+  </el-dialog>
+</template>

src/views/contentManagement/upload/EpisodeVideoUploader.vue

@@ -0,0 +1,172 @@
+<!-- Author: fruit.com.cn -->
+<!-- 单集视频上传：格式/大小校验、分片上传、预览与移除 -->
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { AppIcons } from '@/constants/icons'
+import { useI18n } from '@/hooks/web/useI18n'
+import { probeVideoDuration, uploadFile } from '@/utils/uploader'
+import { MAX_VIDEO_SIZE, VIDEO_ACCEPT_ATTR, VIDEO_EXTENSIONS } from './videoLimit'
+
+const props = defineProps({
+  videoUrl: { type: String, default: '' },
+  durationSec: { type: Number, default: 0 },
+  fileName: { type: String, default: '' }
+})
+
+const emit = defineEmits([
+  'update:videoUrl',
+  'update:durationSec',
+  'update:fileName',
+  'update:uploading',
+  'change'
+])
+
+const { t } = useI18n()
+
+const uploadingVideo = ref(false)
+const videoPercent = ref(0)
+const videoError = ref('')
+
+const videoDisplayName = computed(
+  () => props.fileName || (props.videoUrl ? episodeBasename(props.videoUrl) : '尚未选择视频')
+)
+
+watch(uploadingVideo, (value) => emit('update:uploading', value))
+
+function episodeBasename(path) {
+  if (!path) return ''
+  const clean = path.split('?')[0].split('#')[0]
+  return decodeURIComponent(clean.split('/').pop() || clean)
+}
+
+function clearError() {
+  videoError.value = ''
+}
+
+function beforeVideoUpload(file) {
+  videoError.value = ''
+  const extension = String(file.name || '')
+    .split('.')
+    .pop()
+    ?.toLowerCase()
+  if (!VIDEO_EXTENSIONS.includes(extension)) {
+    videoError.value = t('episodeBatch.invalidType')
+    return false
+  }
+  if (file.size > MAX_VIDEO_SIZE) {
+    videoError.value = '视频大小不能超过 500MB'
+    return false
+  }
+  return true
+}
+
+/** 视频分片上传：先探测时长，再交给上传器，完成后回填地址与时长。 */
+async function uploadVideo(options) {
+  uploadingVideo.value = true
+  videoPercent.value = 0
+  videoError.value = ''
+  try {
+    const duration = await probeVideoDuration(options.file)
+    const asset = await uploadFile(options.file, {
+      bizType: 'EPISODE',
+      durationSec: duration,
+      onProgress: (percent) => (videoPercent.value = percent)
+    })
+    emit('update:videoUrl', asset.url)
+    emit('update:fileName', options.file.name)
+    if (duration > 0) emit('update:durationSec', duration)
+    emit('change')
+    ElMessage.success('视频已上传')
+  } catch {
+    videoError.value = '视频上传失败，请检查网络后重试'
+  } finally {
+    uploadingVideo.value = false
+  }
+}
+
+function removeVideo() {
+  if (uploadingVideo.value) return
+  emit('update:videoUrl', '')
+  emit('update:fileName', '')
+  videoError.value = ''
+  emit('change')
+}
+
+defineExpose({ clearError, uploadingVideo })
+</script>
+
+<template>
+  <div class="episode-video-editor">
+    <div class="episode-video-preview-card">
+      <video
+        v-if="videoUrl"
+        :src="videoUrl"
+        controls
+        preload="metadata"
+        class="episode-editor-video"
+      ></video>
+      <el-upload
+        v-else
+        drag
+        class="episode-video-empty-upload"
+        :show-file-list="false"
+        :accept="VIDEO_ACCEPT_ATTR"
+        :before-upload="beforeVideoUpload"
+        :http-request="uploadVideo"
+        :disabled="uploadingVideo"
+      >
+        <div class="episode-video-empty-copy">
+          <AppIcon :icon="AppIcons.videoCameraFront" :size="30" />
+          <b>拖放或点击上传</b>
+          <span>MP4、MOV、MKV、WEBM</span>
+        </div>
+      </el-upload>
+      <div v-if="uploadingVideo" class="episode-video-upload-mask">
+        <span>上传中</span>
+        <b>{{ videoPercent }}%</b>
+      </div>
+    </div>
+
+    <div class="episode-video-meta">
+      <div class="episode-video-status">
+        <el-tag :type="videoUrl ? 'success' : 'info'" effect="light">
+          {{ videoUrl ? '已上传' : '未上传' }}
+        </el-tag>
+        <span class="episode-video-filename" :title="videoDisplayName">
+          {{ videoDisplayName }}
+        </span>
+      </div>
+      <p class="episode-video-hint">{{ t('episodeBatch.hint') }}</p>
+      <el-alert v-if="videoError" :title="videoError" type="error" :closable="false" show-icon />
+      <div class="episode-video-actions">
+        <el-upload
+          v-if="videoUrl"
+          :show-file-list="false"
+          :accept="VIDEO_ACCEPT_ATTR"
+          :before-upload="beforeVideoUpload"
+          :http-request="uploadVideo"
+          :disabled="uploadingVideo"
+        >
+          <el-button :loading="uploadingVideo" :disabled="uploadingVideo">
+            <AppIcon :icon="AppIcons.upload" />
+            更换视频
+          </el-button>
+        </el-upload>
+        <el-button v-if="videoUrl" type="danger" :disabled="uploadingVideo" @click="removeVideo">
+          移除
+        </el-button>
+        <a
+          v-if="videoUrl"
+          class="episode-video-link"
+          :href="videoUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          查看视频
+        </a>
+      </div>
+    </div>
+  </div>
+</template>