chore(web): 合并剧集编辑弹窗

src/styles/business/drama-management.css

@@ -289,26 +289,239 @@ html.dark .cover-preview-empty {
   background: var(--el-fill-color-light);
 }
 
-/* 编辑弹窗里的视频预览 */
+/* 剧集编辑弹窗 */
-.video-field {
+.episode-editor-dialog {
   display: flex;
-  gap: 12px;
+  max-height: calc(100vh - 40px);
-  align-items: flex-start;
+  overflow: hidden;
-  width: 100%;
+  flex-direction: column;
+  border-radius: var(--app-radius-lg) !important;
 }
-.video-field-actions {
+
+.episode-editor-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  padding: 8px 24px 0;
+  overflow-y: auto;
+}
+
+.episode-editor-dialog .el-dialog__footer {
+  flex: 0 0 auto;
+  padding: 14px 24px;
+  background: var(--el-bg-color-overlay);
+  border-top: 1px solid var(--el-border-color-lighter);
+}
+
+.episode-editor-dialog .el-dialog__footer .el-button {
+  min-width: 88px;
+  height: 36px;
+}
+
+.episode-editor-section {
+  padding: 4px 0 18px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.episode-editor-section + .episode-editor-section {
+  padding-top: 18px;
+}
+
+.episode-editor-section:last-child {
+  padding-bottom: 4px;
+  border-bottom: 0;
+}
+
+.episode-editor-section-title {
+  margin: 0 0 14px;
+  color: var(--el-text-color-primary);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.episode-editor-grid {
+  display: grid;
+  gap: 0 16px;
+}
+
+.episode-editor-grid--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.episode-editor-grid--three {
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+}
+
+.episode-editor-number {
+  width: 180px !important;
+}
+
+.episode-video-editor {
+  display: flex;
+  gap: 18px;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.episode-video-preview-card {
+  position: relative;
+  flex: 0 0 240px;
+  width: 240px;
+  aspect-ratio: 16 / 9;
+  overflow: hidden;
+  border: 1px solid var(--el-border-color);
+  border-radius: 10px;
+  background: #000;
+}
+
+.episode-editor-video {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  background: #000;
+}
+
+.episode-video-empty-upload,
+.episode-video-empty-upload .el-upload {
+  width: 100%;
+  height: 100%;
+}
+
+.episode-video-empty-upload .el-upload-dragger {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  color: var(--el-text-color-secondary);
+  background: var(--el-fill-color-lighter);
+  border: 1px dashed var(--el-border-color);
+  border-radius: 9px;
+  align-items: center;
+  justify-content: center;
+}
+
+.episode-video-empty-copy {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 5px;
+  color: var(--el-text-color-secondary);
+}
+
+.episode-video-empty-copy b {
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+}
+
+.episode-video-empty-copy span {
+  font-size: 11px;
+}
+
+.episode-video-upload-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  color: #fff;
+  font-size: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+  background: color-mix(in srgb, var(--el-color-primary) 78%, transparent);
+}
+
+.episode-video-upload-mask b {
+  font-size: 16px;
+}
+
+.episode-video-meta {
+  display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  flex-direction: column;
+  gap: 10px;
 }
-.form-video-preview {
+
-  display: block;
+.episode-video-status {
-  width: 200px;
+  display: flex;
-  height: 112px;
+  align-items: center;
-  flex: 0 0 200px;
+  gap: 10px;
-  object-fit: contain;
+  min-width: 0;
-  border: 1px solid var(--el-border-color-lighter);
+}
-  border-radius: var(--app-radius-md);
+
-  background: #000 !important;
+.episode-video-filename {
+  overflow: hidden;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.episode-video-hint {
+  margin: 0;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.episode-video-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.episode-video-actions .el-button {
+  height: 36px;
+}
+
+.episode-video-link {
+  color: var(--el-color-primary);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.episode-video-link:hover {
+  text-decoration: underline;
+}
+
+.episode-video-empty-upload {
+  cursor: pointer;
+}
+
+@media (max-width: 600px) {
+  .episode-editor-dialog {
+    width: calc(100vw - 24px) !important;
+    margin: 12px auto !important;
+  }
+
+  .episode-editor-dialog .el-dialog__body {
+    padding-right: 18px;
+    padding-left: 18px;
+  }
+
+  .episode-editor-grid--two,
+  .episode-editor-grid--three {
+    grid-template-columns: 1fr;
+  }
+
+  .episode-video-editor {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .episode-video-preview-card {
+    flex-basis: 135px;
+  }
+
+  .episode-video-meta {
+    width: 100%;
+  }
+}
+
+html.dark .episode-video-preview-card,
+html.dark .episode-video-empty-upload .el-upload-dragger {
+  background: var(--el-fill-color-light);
 }
 
 /* 剧集预览弹窗里的播放器 */

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 (saving.value || uploadingVideo.value) return
-  if (!form.number || form.number < 1) return ElMessage.warning('请填写正确的集号')
+  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-dialog
-    ><el-form label-position="top"
+    v-model="dialogVisible"
-      ><div class="form-row"
+    :title="editingId ? '编辑剧集' : '新增剧集'"
-        ><el-form-item label="集号" required
+    width="680px"
-          ><el-input-number v-model="form.number" :min="1" :max="999" /></el-form-item
+    class="episode-editor-dialog"
-        ><el-form-item label="时长（秒）"
+    :close-on-click-modal="false"
-          ><el-input-number v-model="form.durationSec" :min="0" :max="9999" /></el-form-item></div
+    :before-close="beforeDialogClose"
-      ><el-form-item label="剧集标题" required
+  >
-        ><el-input v-model="form.title" placeholder="例如：命运的相遇" /></el-form-item
+    <el-form
-      ><el-form-item label="视频文件"
+      ref="formRef"
-        ><div class="video-field"
+      :model="form"
-          ><div class="video-field-actions"
+      :rules="formRules"
-            ><el-upload
+      label-position="top"
-              drag
+      class="episode-editor-form"
-              :show-file-list="false"
+    >
-              accept="video/*"
+      <section class="episode-editor-section">
-              :http-request="uploadVideo"
+        <h3 class="episode-editor-section-title">基础信息</h3>
-              :disabled="uploadingVideo"
+        <div class="episode-editor-grid episode-editor-grid--two">
-              ><div class="upload-copy"
+          <el-form-item label="集号" prop="number">
-                >拖放视频文件到此处，或点击选择<br /><small>支持 MP4、MOV，自动分片上传</small></div
+            <el-input-number
-              ></el-upload
+              v-model="form.number"
-            ><p v-if="uploadingVideo" class="selected-file">上传中 {{ videoPercent }}%</p
+              class="episode-editor-number"
-            ><p v-else-if="form.videoUrl" class="selected-file">视频已上传</p
+              controls-position="right"
-            ><el-input v-model="form.videoUrl" placeholder="也可以直接填写视频地址" /></div
+              :min="1"
-          ><video
+              :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
-            class="form-video-preview"
+                preload="metadata"
-          ></video></div></el-form-item
+                class="episode-editor-video"
-      ><div class="form-row"
+              ></video>
-        ><el-form-item label="是否免费"><el-switch v-model="form.isFree" /></el-form-item
+              <el-upload
-        ><el-form-item v-if="!form.isFree" label="解锁金币"
+                v-else
-          ><el-input-number v-model="form.unlockCoin" :min="0" :max="9999" /></el-form-item
+                drag
-        ><el-form-item label="状态"
+                class="episode-video-empty-upload"
-          ><el-select v-model="form.status"
+                :show-file-list="false"
-            ><el-option
+                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
+                :value="item.code"
-    ></el-form>
+              />
-    <template #footer
+            </el-select>
-      ><el-button @click="dialogVisible = false">取消</el-button
+          </el-form-item>
-      ><el-button type="primary" :loading="saving" @click="saveEpisode">保存</el-button></template
+        </div>
-    ></el-dialog
+      </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 ?? ''}`"