feat(web): 重做剧集编辑弹窗

src/views/contentManagement/EpisodeManagementView.vue

@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
@@ -30,9 +30,12 @@ const dialogVisible = ref(false)
 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 formRef = ref()
 const form = reactive({
   number: 1,
   title: '',
@@ -50,7 +53,40 @@ const statusOptions = [
   { code: 'offline', text: '已下线' }
 ]
 
+const MAX_VIDEO_SIZE = 500 * 1024 * 1024
+const VIDEO_EXTENSIONS = ['mp4', 'mov']
+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 selectedDrama = computed(() => dramas.value.find((item) => item.id === selectedDramaId.value))
+const videoDisplayName = computed(
+  () => videoFileName.value || (form.videoUrl ? episodeBasename(form.videoUrl) : '尚未选择视频')
+)
+
+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 })
@@ -93,7 +129,10 @@ function openCreate() {
     unlockCoin: selectedDrama.value?.unlockCoin ?? 0,
     status: 'draft'
   })
+  videoFileName.value = ''
+  videoError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 function openEdit(row) {
@@ -107,12 +146,19 @@ function openEdit(row) {
     unlockCoin: row.unlockCoin || 0,
     status: row.status
   })
+  videoFileName.value = row.videoUrl ? episodeBasename(row.videoUrl) : ''
+  videoError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 async function saveEpisode() {
-  if (!form.title.trim()) return ElMessage.warning('请填写剧集标题')
-  if (!form.number || form.number < 1) return ElMessage.warning('请填写正确的集号')
+  if (saving.value || uploadingVideo.value) return
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
   const payload = {
     dramaId: selectedDramaId.value,
     number: form.number,
@@ -139,10 +185,28 @@ async function saveEpisode() {
   }
 }
 
+function beforeVideoUpload(file) {
+  videoError.value = ''
+  const extension = String(file.name || '')
+    .split('.')
+    .pop()
+    ?.toLowerCase()
+  if (!VIDEO_EXTENSIONS.includes(extension)) {
+    videoError.value = '视频仅支持 MP4 或 MOV 格式'
+    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, {
@@ -151,13 +215,33 @@ async function uploadVideo(options) {
       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()
+}
+
 async function confirmDelete(row) {
   try {
     await ElMessageBox.confirm(`确定删除第 ${row.number} 集「${row.title}」吗？`, '删除确认', {
@@ -354,53 +438,179 @@ onMounted(async () => {
       >
     </el-table>
   </section>
-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑剧集' : '新增剧集'" width="560px"
-    ><el-form label-position="top"
-      ><div class="form-row"
-        ><el-form-item label="集号" required
-          ><el-input-number v-model="form.number" :min="1" :max="999" /></el-form-item
-        ><el-form-item label="时长（秒）"
-          ><el-input-number v-model="form.durationSec" :min="0" :max="9999" /></el-form-item></div
-      ><el-form-item label="剧集标题" required
-        ><el-input v-model="form.title" placeholder="例如：命运的相遇" /></el-form-item
-      ><el-form-item label="视频文件"
-        ><div class="video-field"
-          ><div class="video-field-actions"
-            ><el-upload
-              drag
-              :show-file-list="false"
-              accept="video/*"
-              :http-request="uploadVideo"
-              :disabled="uploadingVideo"
-              ><div class="upload-copy"
-                >拖放视频文件到此处，或点击选择<br /><small>支持 MP4、MOV，自动分片上传</small></div
-              ></el-upload
-            ><p v-if="uploadingVideo" class="selected-file">上传中 {{ videoPercent }}%</p
-            ><p v-else-if="form.videoUrl" class="selected-file">视频已上传</p
-            ><el-input v-model="form.videoUrl" placeholder="也可以直接填写视频地址" /></div
-          ><video
-            v-if="form.videoUrl"
-            :src="form.videoUrl"
-            controls
-            class="form-video-preview"
-          ></video></div></el-form-item
-      ><div class="form-row"
-        ><el-form-item label="是否免费"><el-switch v-model="form.isFree" /></el-form-item
-        ><el-form-item v-if="!form.isFree" label="解锁金币"
-          ><el-input-number v-model="form.unlockCoin" :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
-    ></el-form>
-    <template #footer
-      ><el-button @click="dialogVisible = false">取消</el-button
-      ><el-button type="primary" :loading="saving" @click="saveEpisode">保存</el-button></template
-    ></el-dialog
+  <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=".mp4,.mov"
+                :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</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">支持 MP4、MOV，单个文件不超过 500MB。</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=".mp4,.mov"
+                  :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--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>
   <el-dialog
     v-model="previewVisible"
     :title="`预览：第 ${previewEpisode?.number ?? ''} 集 ${previewEpisode?.title ?? ''}`"