feat(creator-center): 分集支持视频预览与表格横向滚动

src/views/creator-center/DramaEditView.vue

@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
 import { AppIcons } from '@/constants/icons'
 import { AppImage } from '@/components/AppImage'
 import PageHeading from '@/views/components/PageHeading.vue'
@@ -45,7 +45,6 @@ const {
   moveEpisode,
   uploadVideo,
   uploadCover,
-  hasResumeSession,
   submit,
   withdraw
 } = useDramaEdit()
@@ -62,6 +61,16 @@ function back() {
   window.history.back()
 }
 
+/* ---------- 分集视频预览 ---------- */
+const videoPreviewVisible = ref(false)
+const videoPreviewUrl = ref('')
+
+function playEpisode(row) {
+  if (!row.videoUrl) return
+  videoPreviewUrl.value = row.videoUrl
+  videoPreviewVisible.value = true
+}
+
 /** el-upload 的 http-request 回调：拿到原始 File 后交给统一的（可续传）上传逻辑 */
 function requestVideo(row, options) {
   return uploadVideo(row, options.file)
@@ -123,15 +132,9 @@ function requestDramaCover(options) {
           <el-form-item label="作品名称" required>
             <el-input v-model="infoForm.title" maxlength="64" />
           </el-form-item>
-          <el-form-item label="副标题">
-            <el-input v-model="infoForm.subtitle" maxlength="64" />
-          </el-form-item>
           <el-form-item label="题材">
             <el-input v-model="infoForm.genre" maxlength="32" placeholder="例如：都市情感" />
           </el-form-item>
-          <el-form-item label="语言">
-            <el-input v-model="infoForm.language" maxlength="16" placeholder="zh-CN / id-ID" />
-          </el-form-item>
         </div>
         <el-form-item label="简介">
           <el-input
@@ -163,13 +166,6 @@ function requestDramaCover(options) {
               </div>
             </div>
           </el-form-item>
-          <el-form-item label="预告片地址">
-            <el-input
-              v-model="infoForm.trailerUrl"
-              maxlength="512"
-              placeholder="整剧一支预告片，可留空"
-            />
-          </el-form-item>
         </div>
         <el-button
           v-if="canEdit"
@@ -202,7 +198,15 @@ function requestDramaCover(options) {
         show-icon
         :title="resumeHint"
       />
-      <el-table :data="episodes" row-key="id" border class="drama-el-table" empty-text="还没有分集">
+      <div class="creator-table-scroll creator-table-scroll--episodes">
+        <el-table
+          :data="episodes"
+          row-key="id"
+          border
+          class="drama-el-table"
+          style="min-width: 1150px"
+          empty-text="还没有分集"
+        >
           <el-table-column prop="number" label="集号" width="70" />
           <el-table-column label="封面" width="88">
             <template #default="{ row }">
@@ -224,7 +228,10 @@ function requestDramaCover(options) {
           <el-table-column prop="duration" label="时长" width="90" />
           <el-table-column label="片源" min-width="120">
             <template #default="{ row }">
-            <span class="console-muted">{{ row.videoUrl ? '已上传' : '未上传' }}</span>
+              <el-button v-if="row.videoUrl" link type="primary" @click="playEpisode(row)"
+                >播放</el-button
+              >
+              <span v-else class="console-muted">未上传</span>
             </template>
           </el-table-column>
           <el-table-column label="状态" width="90">
@@ -238,7 +245,7 @@ function requestDramaCover(options) {
               </el-tag>
             </template>
           </el-table-column>
-        <el-table-column label="操作" width="300" fixed="right">
+          <el-table-column label="操作" width="340">
             <template #default="{ row, $index }">
               <div class="table-actions">
                 <el-button
@@ -263,7 +270,7 @@ function requestDramaCover(options) {
                   :http-request="(options) => requestVideo(row, options)"
                   :disabled="!editable || uploadingId !== null"
                 >
-                <el-button size="small">{{ hasResumeSession ? '继续上传' : '上传视频' }}</el-button>
+                  <el-button size="small">上传视频</el-button>
                 </el-upload>
                 <el-button
                   type="danger"
@@ -276,6 +283,7 @@ function requestDramaCover(options) {
             </template>
           </el-table-column>
         </el-table>
+      </div>
       <p v-if="uploadingId !== null" class="creator-upload-hint"
         >上传中 {{ uploadPercent }}%（分片上传，可断点续传）</p
       >
@@ -283,11 +291,13 @@ function requestDramaCover(options) {
 
     <section class="panel">
       <h3 class="creator-section-title">提交记录</h3>
+      <div class="creator-table-scroll creator-table-scroll--submissions">
         <el-table
           :data="submissions"
           row-key="id"
           border
           class="drama-el-table"
+          style="min-width: 1000px"
           empty-text="还没有提交记录"
         >
           <el-table-column prop="version" label="版本" width="70" />
@@ -315,8 +325,13 @@ function requestDramaCover(options) {
             :formatter="dateCell"
             show-overflow-tooltip
           />
-        <el-table-column prop="reviewNote" label="审核意见" min-width="200" show-overflow-tooltip />
+          <el-table-column
-        <el-table-column label="操作" width="110" fixed="right">
+            prop="reviewNote"
+            label="审核意见"
+            min-width="200"
+            show-overflow-tooltip
+          />
+          <el-table-column label="操作" width="110">
             <template #default="{ row }">
               <div class="table-actions">
                 <el-button
@@ -331,8 +346,20 @@ function requestDramaCover(options) {
             </template>
           </el-table-column>
         </el-table>
+      </div>
     </section>
 
+    <el-dialog v-model="videoPreviewVisible" title="视频预览" width="720px" append-to-body>
+      <video
+        v-if="videoPreviewUrl"
+        :src="videoPreviewUrl"
+        controls
+        autoplay
+        playsinline
+        class="creator-video-preview"
+      ></video>
+    </el-dialog>
+
     <el-dialog
       v-model="episodeVisible"
       :title="episodeEditingId ? '编辑分集' : '新增分集'"

src/views/creator-center/composables/useDramaEdit.js

@@ -259,7 +259,7 @@ export function useDramaEdit() {
       ElMessage.success('视频已上传并挂到该分集')
       await loadEpisodes()
     } catch {
-      resumeHint.value = `「${file.name}」上传中断，进度已记住，可点「继续上传」接着传`
+      resumeHint.value = `「${file.name}」上传中断，进度已记住；重新选择同一个文件即可续传`
     } finally {
       uploadingId.value = null
       uploadPercent.value = 0