From 71ee469563fd4879eee2e06703bbeb9763f93972 Mon Sep 17 00:00:00 2001
From: Zhou Weidong <502333560@qq.com>
Date: Mon, 9 Nov 2026 10:27:41 +0800
Subject: [PATCH] =?UTF-8?q?feat(creator-center):=20=E5=88=86=E9=9B=86?=
 =?UTF-8?q?=E6=94=AF=E6=8C=81=E8=A7=86=E9=A2=91=E9=A2=84=E8=A7=88=E4=B8=8E?=
 =?UTF-8?q?=E8=A1=A8=E6=A0=BC=E6=A8=AA=E5=90=91=E6=BB=9A=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/creator-center/DramaEditView.vue    | 297 ++++++++++--------
 .../composables/useDramaEdit.js               |   2 +-
 2 files changed, 163 insertions(+), 136 deletions(-)

diff --git a/src/views/creator-center/DramaEditView.vue b/src/views/creator-center/DramaEditView.vue
index 1858b7f..991fee4 100644
--- a/src/views/creator-center/DramaEditView.vue
+++ b/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,80 +198,92 @@ function requestDramaCover(options) {
         show-icon
         :title="resumeHint"
       />
-      <el-table :data="episodes" row-key="id" border class="drama-el-table" empty-text="还没有分集">
-        <el-table-column prop="number" label="集号" width="70" />
-        <el-table-column label="封面" width="88">
-          <template #default="{ row }">
-            <div class="creator-episode-cover">
-              <AppImage
-                v-if="row.cover"
-                :src="row.cover"
-                :preview-list="episodeCoverPreviewList"
-                :initial-index="episodeCoverPreviewIndex(row)"
-                fit="cover"
-                class="creator-episode-image"
-                :alt="row.title"
-              />
-              <span v-else>无</span>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column prop="title" label="标题" min-width="150" show-overflow-tooltip />
-        <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>
-          </template>
-        </el-table-column>
-        <el-table-column label="状态" width="90">
-          <template #default="{ row }">
-            <el-tag
-              size="small"
-              effect="light"
-              :type="row.status === 'published' ? 'success' : 'info'"
-            >
-              {{ row.statusText }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column label="操作" width="300" fixed="right">
-          <template #default="{ row, $index }">
-            <div class="table-actions">
-              <el-button
+      <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 }">
+              <div class="creator-episode-cover">
+                <AppImage
+                  v-if="row.cover"
+                  :src="row.cover"
+                  :preview-list="episodeCoverPreviewList"
+                  :initial-index="episodeCoverPreviewIndex(row)"
+                  fit="cover"
+                  class="creator-episode-image"
+                  :alt="row.title"
+                />
+                <span v-else>无</span>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="title" label="标题" min-width="150" show-overflow-tooltip />
+          <el-table-column prop="duration" label="时长" width="90" />
+          <el-table-column label="片源" min-width="120">
+            <template #default="{ row }">
+              <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">
+            <template #default="{ row }">
+              <el-tag
                 size="small"
-                :disabled="!editable || $index === 0"
-                @click="moveEpisode(row, -1)"
-                >上移</el-button
+                effect="light"
+                :type="row.status === 'published' ? 'success' : 'info'"
               >
-              <el-button
-                size="small"
-                :disabled="!editable || $index === episodes.length - 1"
-                @click="moveEpisode(row, 1)"
-                >下移</el-button
-              >
-              <el-button size="small" :disabled="!editable" @click="openEpisode(row)"
-                >编辑</el-button
-              >
-              <el-upload
-                v-if="canUpload"
-                :show-file-list="false"
-                accept="video/*"
-                :http-request="(options) => requestVideo(row, options)"
-                :disabled="!editable || uploadingId !== null"
-              >
-                <el-button size="small">{{ hasResumeSession ? '继续上传' : '上传视频' }}</el-button>
-              </el-upload>
-              <el-button
-                type="danger"
-                size="small"
-                :disabled="!editable"
-                @click="removeEpisode(row)"
-                >删除</el-button
-              >
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
+                {{ row.statusText }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column label="操作" width="340">
+            <template #default="{ row, $index }">
+              <div class="table-actions">
+                <el-button
+                  size="small"
+                  :disabled="!editable || $index === 0"
+                  @click="moveEpisode(row, -1)"
+                  >上移</el-button
+                >
+                <el-button
+                  size="small"
+                  :disabled="!editable || $index === episodes.length - 1"
+                  @click="moveEpisode(row, 1)"
+                  >下移</el-button
+                >
+                <el-button size="small" :disabled="!editable" @click="openEpisode(row)"
+                  >编辑</el-button
+                >
+                <el-upload
+                  v-if="canUpload"
+                  :show-file-list="false"
+                  accept="video/*"
+                  :http-request="(options) => requestVideo(row, options)"
+                  :disabled="!editable || uploadingId !== null"
+                >
+                  <el-button size="small">上传视频</el-button>
+                </el-upload>
+                <el-button
+                  type="danger"
+                  size="small"
+                  :disabled="!editable"
+                  @click="removeEpisode(row)"
+                  >删除</el-button
+                >
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
       <p v-if="uploadingId !== null" class="creator-upload-hint"
         >上传中 {{ uploadPercent }}%（分片上传，可断点续传）</p
       >
@@ -283,56 +291,75 @@ function requestDramaCover(options) {
 
     <section class="panel">
       <h3 class="creator-section-title">提交记录</h3>
-      <el-table
-        :data="submissions"
-        row-key="id"
-        border
-        class="drama-el-table"
-        empty-text="还没有提交记录"
-      >
-        <el-table-column prop="version" label="版本" width="70" />
-        <el-table-column label="类型" width="100">
-          <template #default="{ row }">{{ submissionTypeText(row.type) }}</template>
-        </el-table-column>
-        <el-table-column label="状态" width="100">
-          <template #default="{ row }">
-            <el-tag size="small" :type="submissionStatusMeta(row.status).tag" effect="light">
-              {{ submissionStatusMeta(row.status).label }}
-            </el-tag>
-          </template>
-        </el-table-column>
-        <el-table-column
-          prop="submitAt"
-          label="提交时间"
-          min-width="165"
-          :formatter="dateCell"
-          show-overflow-tooltip
-        />
-        <el-table-column
-          prop="reviewAt"
-          label="审核时间"
-          min-width="165"
-          :formatter="dateCell"
-          show-overflow-tooltip
-        />
-        <el-table-column prop="reviewNote" label="审核意见" min-width="200" show-overflow-tooltip />
-        <el-table-column label="操作" width="110" fixed="right">
-          <template #default="{ row }">
-            <div class="table-actions">
-              <el-button
-                v-if="canEdit && ['SUBMITTED', 'REVIEWING'].includes(row.status)"
-                type="danger"
-                size="small"
-                @click="withdraw(row.id)"
-                >撤回</el-button
-              >
-              <span v-else class="console-muted">—</span>
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
+      <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" />
+          <el-table-column label="类型" width="100">
+            <template #default="{ row }">{{ submissionTypeText(row.type) }}</template>
+          </el-table-column>
+          <el-table-column label="状态" width="100">
+            <template #default="{ row }">
+              <el-tag size="small" :type="submissionStatusMeta(row.status).tag" effect="light">
+                {{ submissionStatusMeta(row.status).label }}
+              </el-tag>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="submitAt"
+            label="提交时间"
+            min-width="165"
+            :formatter="dateCell"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            prop="reviewAt"
+            label="审核时间"
+            min-width="165"
+            :formatter="dateCell"
+            show-overflow-tooltip
+          />
+          <el-table-column
+            prop="reviewNote"
+            label="审核意见"
+            min-width="200"
+            show-overflow-tooltip
+          />
+          <el-table-column label="操作" width="110">
+            <template #default="{ row }">
+              <div class="table-actions">
+                <el-button
+                  v-if="canEdit && ['SUBMITTED', 'REVIEWING'].includes(row.status)"
+                  type="danger"
+                  size="small"
+                  @click="withdraw(row.id)"
+                  >撤回</el-button
+                >
+                <span v-else class="console-muted">—</span>
+              </div>
+            </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 ? '编辑分集' : '新增分集'"
diff --git a/src/views/creator-center/composables/useDramaEdit.js b/src/views/creator-center/composables/useDramaEdit.js
index 2849af7..26e54fa 100644
--- a/src/views/creator-center/composables/useDramaEdit.js
+++ b/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