feat(admin): 批量上传改为手动点击开始

上传为异步队列，文件数量不设上限，提示只保留格式与单文件大小限制

.husky/commit-msg

@@ -1,4 +1,9 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
+if grep -qiE "(co-authored-by|generated with|assisted by).*(cursor|claude|codex|gpt|copilot|ai)" "$1"; then
+  echo "commit message contains AI attribution, remove it before committing" >&2
+  exit 1
+fi
+
 pnpm commitlint --edit "$1"

src/api/admin/episode.ts

@@ -1,10 +1,35 @@
 // Author: fruit.com.cn
 
 import request from '@/axios'
-import type { EpisodeItem, EpisodeSaveData } from './types'
+import type { EpisodeItem, EpisodeSaveData, PageResult } from './types'
 
-export const listEpisodesApi = (dramaId: number, status?: string) => {
+export interface EpisodePageParams {
-  return request.get<EpisodeItem[]>({ url: '/admin/episodes', params: { dramaId, status } })
+  dramaId: number | string
+  status?: string
+  pageIndex?: number
+  pageSize?: number
+}
+
+/**
+ * 解包剧集列表分页。
+ * 契约（OpenAPI PageResultEpisodeRespVO）：data = { total, list }。
+ * 兼容误把 data 当数组的旧调用，避免列表空白。
+ */
+export function parseEpisodePage(payload: unknown): PageResult<EpisodeItem> {
+  if (Array.isArray(payload)) {
+    return { total: payload.length, list: payload as EpisodeItem[] }
+  }
+  if (payload && typeof payload === 'object') {
+    const page = payload as { total?: unknown; list?: unknown }
+    const list = Array.isArray(page.list) ? (page.list as EpisodeItem[]) : []
+    const total = Number(page.total)
+    return { total: Number.isFinite(total) ? total : list.length, list }
+  }
+  return { total: 0, list: [] }
+}
+
+export const listEpisodesApi = (params: EpisodePageParams) => {
+  return request.get<PageResult<EpisodeItem>>({ url: '/admin/episodes', params })
 }
 
 export const createEpisodeApi = (data: EpisodeSaveData) => {

src/locales/en.ts

@@ -532,16 +532,19 @@ export default {
     title: 'Batch upload episodes',
     entry: 'Batch upload',
     selectFiles: 'Select videos',
+    startUpload: 'Start upload',
+    uploadingAction: 'Uploading',
     pause: 'Pause',
     resume: 'Resume',
     retry: 'Retry',
     retryAll: 'Retry all',
     remove: 'Remove',
-    hint: 'Supports MP4 / MOV / MKV / WEBM, max 500MB each; multi-select allowed, 2 upload in parallel, the rest queue automatically.',
+    hint: 'Supports MP4 / MOV / MKV / WEBM, max 500MB each. Files stay queued until you click Start upload.',
     invalidType: 'Only MP4, MOV, MKV, WEBM are allowed',
     oversize: 'File exceeds 500MB and was not queued',
     overallProgress: 'Overall progress',
     empty: 'No videos selected',
+    resultSummary: 'Upload finished: {done} succeeded, {failed} failed',
     createEpisodes: 'Create episodes',
     closeWhileUploading:
       'Uploads are still in progress. Closing will stop dispatching new tasks. Continue?',
@@ -551,25 +554,27 @@ export default {
     resumeYes: 'Pick files to resume',
     resumeNo: 'Discard',
     resumeAbandoned: 'Unfinished uploads discarded',
-    resumeMatched: 'Matched {count} file(s) and resumed',
+    resumeMatched: 'Matched {count} file(s). Click Start upload to continue.',
     resumeUnmatched: '{count} session(s) could not match local files; pick again manually',
     createTitle: 'Create episodes in batch',
+    createHint:
+      'Title uses the video file name; episode numbers are assigned automatically. Free vs paid follows the drama free-episode count; episodes beyond that are paid. You can edit them later in episode settings.',
     colSource: 'Source file',
     colNumber: 'Episode No.',
     colTitle: 'Title',
-    colFree: 'Free',
+    colFree: 'Pricing',
+    labelFree: 'Free',
+    labelPaid: 'Paid',
     colResult: 'Result',
-    numberConflict: 'Episode number conflict',
     missingVideo: 'Missing video URL',
     createOk: 'Created',
     createFailed: 'Create failed',
     createAllSuccess: 'All episodes created',
     createPartial: 'Some episodes failed; you can retry',
-    fixConflict: 'Resolve episode number conflicts first',
+    submitCreate: 'Create',
-    submitCreate: 'Submit',
     retryFailed: 'Retry failed',
     status: {
-      waiting: 'Waiting',
+      waiting: 'Pending',
       uploading: 'Uploading',
       merging: 'Merging',
       done: 'Done',

src/locales/zh-CN.ts

@@ -526,16 +526,19 @@ export default {
     title: '批量上传剧集',
     entry: '批量上传',
     selectFiles: '选择视频',
+    startUpload: '开始上传',
+    uploadingAction: '上传中',
     pause: '暂停',
     resume: '继续',
     retry: '重试',
     retryAll: '全部重试',
     remove: '移除',
-    hint: '支持 MP4 / MOV / MKV / WEBM，单文件不超过 500MB；可一次多选，同时上传 2 个，其余自动排队。',
+    hint: '支持 MP4 / MOV / MKV / WEBM，单文件不超过 500MB；选完文件后点击「开始上传」才会真正上传',
     invalidType: '仅支持 MP4、MOV、MKV、WEBM',
     oversize: '文件超过 500MB，未入队',
     overallProgress: '总进度',
     empty: '尚未选择视频',
+    resultSummary: '上传结束：成功 {done} 个，失败 {failed} 个',
     createEpisodes: '批量创建分集',
     closeWhileUploading: '仍有未完成上传，关闭后将暂停派发新任务，确定关闭吗？',
     resumeTitle: '发现未完成上传',
@@ -543,25 +546,27 @@ export default {
     resumeYes: '选择文件续传',
     resumeNo: '放弃',
     resumeAbandoned: '已放弃未完成上传',
-    resumeMatched: '已匹配 {count} 个文件并开始续传',
+    resumeMatched: '已匹配 {count} 个文件，请点击「开始上传」继续',
     resumeUnmatched: '有 {count} 个会话无法匹配本地文件，请手动重选',
     createTitle: '批量创建分集',
+    createHint:
+      '标题取视频文件名，集号自动顺延分配；免费集数由短剧管理中的「免费集数」配置决定，超出部分为收费集；创建后可在分集编辑中修改',
     colSource: '源文件',
     colNumber: '集号',
     colTitle: '标题',
-    colFree: '免费',
+    colFree: '收费类型',
+    labelFree: '免费',
+    labelPaid: '收费',
     colResult: '结果',
-    numberConflict: '集号冲突',
     missingVideo: '缺少视频地址',
     createOk: '已创建',
     createFailed: '创建失败',
     createAllSuccess: '全部分集已创建',
     createPartial: '部分分集创建失败，可重试',
-    fixConflict: '请先解决集号冲突',
+    submitCreate: '创建',
-    submitCreate: '提交创建',
     retryFailed: '重试失败项',
     status: {
-      waiting: '等待中',
+      waiting: '待上传',
       uploading: '上传中',
       merging: '合并中',
       done: '已完成',

src/styles/business/style.css

@@ -560,13 +560,16 @@ body {
   gap: 6px;
 }
 
-.drama-select {
+.drama-select,
+.status-select {
   width: 100%;
 }
-.drama-select .el-input__wrapper {
+.drama-select .el-input__wrapper,
+.status-select .el-input__wrapper {
   box-shadow: 0 0 0 1px #efedf3 inset !important;
 }
-.drama-select .el-input__inner {
+.drama-select .el-input__inner,
+.status-select .el-input__inner {
   font-size: 13px;
 }
 

src/views/contentManagement/EpisodeManagementView.vue

@@ -6,7 +6,12 @@ import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
 import { pageDramasApi } from '@/api/admin/drama'
-import { deleteEpisodeApi, listEpisodesApi, sortEpisodesApi } from '@/api/admin/episode'
+import {
+  deleteEpisodeApi,
+  listEpisodesApi,
+  parseEpisodePage,
+  sortEpisodesApi
+} from '@/api/admin/episode'
 import { useRbac } from '@/stores/rbac'
 import { formatCount } from '@/utils/format'
 import { statusClass } from '@/utils/status'
@@ -15,6 +20,11 @@ import BatchUploadDialog from './upload/BatchUploadDialog.vue'
 import EpisodeFormDialog from './upload/EpisodeFormDialog.vue'
 import { listPendingSessions } from './upload/uploadSessions'
 
+/** 排序/批量建集需要全集快照，单次请求不超过接口 pageSize 上限。 */
+const SNAPSHOT_PAGE_SIZE = 200
+const DEFAULT_PAGE_SIZE = 100
+const PAGE_SIZE_OPTIONS = [50, 100, 200]
+
 const route = useRoute()
 const { can } = useRbac()
 const { t } = useI18n()
@@ -22,18 +32,26 @@ const { t } = useI18n()
 const loading = ref(false)
 const dramas = ref([])
 const episodes = ref([])
+const total = ref(0)
 const selectedDramaId = ref(undefined)
+const statusFilter = ref(undefined)
+const pageIndex = ref(1)
+const pageSize = ref(DEFAULT_PAGE_SIZE)
 const batchUploadVisible = ref(false)
 const previewVisible = ref(false)
 const previewEpisode = ref(null)
 const formDialogRef = ref()
+/** 上移/下移与批量建集用的全集快照。 */
+const snapshotEpisodes = ref([])
 
 const batchNextNumber = computed(() => nextNumber())
 const selectedDrama = computed(() => dramas.value.find((item) => item.id === selectedDramaId.value))
 const existingEpisodeNumbers = computed(() =>
-  episodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
+  snapshotEpisodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
 )
 
+const showEmpty = computed(() => !loading.value && episodes.value.length === 0)
+
 async function loadDramas() {
   const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
   dramas.value = res.data?.list || []
@@ -49,23 +67,75 @@ async function loadDramas() {
 async function loadEpisodes() {
   if (!selectedDramaId.value) {
     episodes.value = []
+    total.value = 0
+    snapshotEpisodes.value = []
     return
   }
   loading.value = true
   try {
-    const res = await listEpisodesApi(selectedDramaId.value)
+    const res = await listEpisodesApi({
-    episodes.value = res.data || []
+      dramaId: selectedDramaId.value,
+      status: statusFilter.value || undefined,
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value
+    })
+    // 按 OpenAPI PageResult{total,list} 解包，禁止再把 data 当数组切片
+    const page = parseEpisodePage(res.data)
+    episodes.value = page.list
+    total.value = page.total
+    await clampOrRetreatPage()
   } finally {
     loading.value = false
   }
 }
 
-function nextNumber() {
+/** 拉当前剧全集快照，供排序与批量建集集号计算。不过滤 status，按页取完。 */
-  return episodes.value.reduce((max, item) => Math.max(max, item.number || 0), 0) + 1
+async function refreshSnapshot() {
+  if (!selectedDramaId.value) {
+    snapshotEpisodes.value = []
+    return
+  }
+  const collected = []
+  let page = 1
+  let totalCount = 0
+  do {
+    const res = await listEpisodesApi({
+      dramaId: selectedDramaId.value,
+      pageIndex: page,
+      pageSize: SNAPSHOT_PAGE_SIZE
+    })
+    const parsed = parseEpisodePage(res.data)
+    totalCount = parsed.total
+    collected.push(...parsed.list)
+    if (!parsed.list.length) break
+    page += 1
+  } while (collected.length < totalCount)
+  snapshotEpisodes.value = collected
 }
 
-function openBatchUpload() {
+/**
+ * 删除后若当前页空且仍有数据，回退上一页再拉；否则夹页。
+ */
+async function clampOrRetreatPage() {
+  const maxPage = Math.max(1, Math.ceil(total.value / pageSize.value) || 1)
+  if (episodes.value.length === 0 && total.value > 0 && pageIndex.value > 1) {
+    pageIndex.value = Math.min(pageIndex.value - 1, maxPage)
+    await loadEpisodes()
+    return
+  }
+  if (pageIndex.value > maxPage) {
+    pageIndex.value = maxPage
+    await loadEpisodes()
+  }
+}
+
+function nextNumber() {
+  return snapshotEpisodes.value.reduce((max, item) => Math.max(max, item.number || 0), 0) + 1
+}
+
+async function openBatchUpload() {
   if (!selectedDramaId.value) return
+  await refreshSnapshot()
   batchUploadVisible.value = true
 }
 
@@ -73,7 +143,8 @@ async function onBatchEpisodesCreated() {
   await loadEpisodes()
 }
 
-function openCreate() {
+async function openCreate() {
+  await refreshSnapshot()
   formDialogRef.value?.openCreate()
 }
 
@@ -94,6 +165,9 @@ async function confirmDelete(row) {
   }
   await deleteEpisodeApi(row.id)
   ElMessage.success('剧集已删除')
+  if (episodes.value.length === 1 && pageIndex.value > 1) {
+    pageIndex.value -= 1
+  }
   await loadEpisodes()
 }
 
@@ -122,11 +196,32 @@ function stopThumb(event) {
   }
 }
 
-/** 上移/下移后把新顺序整表提交，由后端重排 sort。 */
+function pageLocalIndex(row) {
-async function move(index, offset) {
+  return episodes.value.findIndex((item) => item.id === row.id)
+}
+
+function globalIndex(row) {
+  const local = pageLocalIndex(row)
+  if (local < 0) return -1
+  return (pageIndex.value - 1) * pageSize.value + local
+}
+
+function canMoveUp(row) {
+  return globalIndex(row) > 0
+}
+
+function canMoveDown(row) {
+  const index = globalIndex(row)
+  return index >= 0 && index < total.value - 1
+}
+
+/** 上移/下移后把快照新顺序整表提交，由后端重排 sort。 */
+async function move(row, offset) {
+  await refreshSnapshot()
+  const index = snapshotEpisodes.value.findIndex((item) => item.id === row.id)
   const target = index + offset
-  if (target < 0 || target >= episodes.value.length) return
+  if (index < 0 || target < 0 || target >= snapshotEpisodes.value.length) return
-  const next = [...episodes.value]
+  const next = [...snapshotEpisodes.value]
   const [moved] = next.splice(index, 1)
   next.splice(target, 0, moved)
   await sortEpisodesApi(next.map((item) => item.id))
@@ -135,10 +230,25 @@ async function move(index, offset) {
 }
 
 async function onDramaChange() {
+  pageIndex.value = 1
   await loadEpisodes()
   openBatchIfPendingSessions()
 }
 
+function onStatusChange() {
+  pageIndex.value = 1
+  loadEpisodes()
+}
+
+function handleSizeChange() {
+  pageIndex.value = 1
+  loadEpisodes()
+}
+
+function handlePageChange() {
+  loadEpisodes()
+}
+
 /** 进入页面或切换短剧时，若有 24h 内未完成上传则打开批量上传弹窗以提示续传。 */
 function openBatchIfPendingSessions() {
   if (!selectedDramaId.value || !can('episode:upload')) return
@@ -177,7 +287,7 @@ onMounted(async () => {
         <span class="episode-context-label">当前短剧</span>
         <b class="episode-context-title">{{ selectedDrama?.title || '暂无短剧' }}</b>
         <small class="episode-context-count"
-          >共 {{ selectedDrama?.episodes ?? episodes.length }} 集 · 收藏
+          >共 {{ selectedDrama?.episodes ?? total }} 集 · 收藏
           {{ formatCount(selectedDrama?.favoriteCount ?? 0) }} · 热度
           {{ formatCount(selectedDrama?.views ?? 0) }}</small
         >
@@ -197,23 +307,40 @@ onMounted(async () => {
             :value="item.id"
           />
         </el-select>
+        <span class="episode-context-label">状态</span>
+        <el-select
+          v-model="statusFilter"
+          clearable
+          placeholder="全部状态"
+          class="status-select"
+          @change="onStatusChange"
+        >
+          <el-option label="草稿" value="draft" />
+          <el-option label="已上线" value="published" />
+          <el-option label="已下线" value="offline" />
+        </el-select>
       </div>
     </div>
     <div class="episode-toolbar"
       ><div
-        ><h2>剧集列表（{{ episodes.length }}）</h2><p>按列表顺序播放</p></div
+        ><h2>剧集列表（{{ total }}）</h2><p>按列表顺序播放</p></div
       ></div
     >
     <el-table
       v-loading="loading"
       :data="episodes"
       row-key="id"
-      empty-text="该短剧暂无剧集"
       class="drama-el-table episode-el-table"
     >
+      <template #empty>
+        <el-empty
+          v-if="showEmpty"
+          :description="selectedDramaId ? '该短剧暂无剧集' : '请先选择短剧'"
+        />
+      </template>
       <el-table-column label="集数" width="90"
         ><template #default="{ row }">{{
-          String(row.number).padStart(2, '0')
+          String(row.number ?? 0).padStart(2, '0')
         }}</template></el-table-column
       >
       <el-table-column label="剧集名称" min-width="240"
@@ -278,7 +405,7 @@ onMounted(async () => {
         ></el-table-column
       >
       <el-table-column label="操作" width="250" fixed="right"
-        ><template #default="{ row, $index }"
+        ><template #default="{ row }"
           ><div class="table-actions"
             ><el-button
               v-if="can('episode:upload')"
@@ -289,14 +416,14 @@ onMounted(async () => {
             ><el-button
               v-if="can('episode:sort')"
               size="small"
-              :disabled="$index === 0"
+              :disabled="!canMoveUp(row)"
-              @click="move($index, -1)"
+              @click="move(row, -1)"
               >上移</el-button
             ><el-button
               v-if="can('episode:sort')"
               size="small"
-              :disabled="$index === episodes.length - 1"
+              :disabled="!canMoveDown(row)"
-              @click="move($index, 1)"
+              @click="move(row, 1)"
               >下移</el-button
             ><el-button
               v-if="can('episode:upload')"
@@ -309,6 +436,18 @@ onMounted(async () => {
         ></el-table-column
       >
     </el-table>
+    <div class="pagination"
+      ><el-pagination
+        v-model:current-page="pageIndex"
+        v-model:page-size="pageSize"
+        :page-sizes="PAGE_SIZE_OPTIONS"
+        :total="total"
+        :pager-count="7"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @size-change="handleSizeChange"
+        @current-change="handlePageChange"
+    /></div>
   </section>
   <EpisodeFormDialog
     ref="formDialogRef"
@@ -337,6 +476,7 @@ onMounted(async () => {
     :drama-id="selectedDramaId"
     :next-episode-number="batchNextNumber"
     :default-unlock-coin="selectedDrama?.unlockCoin ?? 0"
+    :free-episodes="selectedDrama?.freeEpisodes ?? 0"
     :existing-numbers="existingEpisodeNumbers"
     @refreshed="loadEpisodes"
     @created="onBatchEpisodesCreated"

src/views/contentManagement/upload/BatchUploadDialog.vue

@@ -1,5 +1,5 @@
 <!-- Author: fruit.com.cn -->
-<!-- 剧集批量上传弹窗：多选、队列、总进度、续传与批量建集入口 -->
+<!-- 剧集批量上传弹窗：先入队待上传，点「开始上传」后再执行 -->
 
 <script setup lang="ts">
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
@@ -12,13 +12,20 @@ import { useUploadQueue } from './useUploadQueue'
 import { MAX_VIDEO_SIZE, VIDEO_ACCEPT_ATTR, VIDEO_EXTENSIONS } from './videoLimit'
 import type { UploadSessionRecord } from './uploadSessions'
 
-const props = defineProps<{
+const props = withDefaults(
-  modelValue: boolean
+  defineProps<{
-  dramaId: string | number
+    modelValue: boolean
-  nextEpisodeNumber: number
+    dramaId: string | number
-  defaultUnlockCoin: number
+    nextEpisodeNumber: number
-  existingNumbers: number[]
+    defaultUnlockCoin: number
-}>()
+    existingNumbers: number[]
+    /** 所属短剧免费集数；不传默认 0 */
+    freeEpisodes?: number
+  }>(),
+  {
+    freeEpisodes: 0
+  }
+)
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
@@ -53,6 +60,10 @@ watch(
 
 const canCreateEpisodes = computed(() => queue.doneItems.value.length > 0)
 
+const startButtonLabel = computed(() =>
+  queue.isUploading.value ? t('episodeBatch.uploadingAction') : t('episodeBatch.startUpload')
+)
+
 function extensionOf(fileName: string): string {
   const parts = String(fileName || '').split('.')
   return (parts.pop() || '').toLowerCase()
@@ -85,14 +96,19 @@ function onPickFiles(event: Event): void {
   }
   rejectedNames.value = rejected
   if (!accepted.length) return
+  // 只入队，不发起上传；等用户点「开始上传」
   queue.enqueue(accepted)
-  queue.start()
 }
 
 function openFilePicker(): void {
   fileInputRef.value?.click()
 }
 
+function onStartUpload(): void {
+  if (!queue.canStart.value) return
+  queue.start()
+}
+
 function onBeforeUnload(event: BeforeUnloadEvent): void {
   if (!queue.hasActiveUpload.value) return
   event.preventDefault()
@@ -151,7 +167,6 @@ async function onResumeFiles(event: Event): Promise<void> {
   }
   if (matched.length) {
     ElMessage.success(t('episodeBatch.resumeMatched', { count: matched.length }))
-    queue.start()
   }
 }
 
@@ -222,10 +237,13 @@ function onEpisodesCreated(): void {
         <AppIcon :icon="AppIcons.upload" />
         {{ t('episodeBatch.selectFiles') }}
       </el-button>
-      <el-button :disabled="!queue.items.value.length" @click="queue.pause()">
+      <el-button
+        :disabled="!queue.started.value || !queue.items.value.length"
+        @click="queue.pause()"
+      >
         {{ t('episodeBatch.pause') }}
       </el-button>
-      <el-button :disabled="!queue.items.value.length" @click="queue.start()">
+      <el-button :disabled="!queue.canStart.value" @click="queue.start()">
         {{ t('episodeBatch.resume') }}
       </el-button>
       <el-button
@@ -247,11 +265,22 @@ function onEpisodesCreated(): void {
       <el-progress :percentage="queue.overallPercent.value" :stroke-width="12" />
     </div>
 
+    <p v-if="queue.showResultSummary.value" class="batch-upload-summary">
+      {{
+        t('episodeBatch.resultSummary', {
+          done: queue.doneItems.value.length,
+          failed: queue.failedCount.value
+        })
+      }}
+    </p>
+
     <div class="batch-upload-list">
       <UploadTaskRow
-        v-for="item in queue.items.value"
+        v-for="(item, index) in queue.items.value"
         :key="item.id"
         :item="item"
+        :index="index + 1"
+        :allow-remove="!queue.started.value && item.status === 'waiting'"
         @retry="queue.retry"
         @remove="queue.remove"
       />
@@ -260,7 +289,15 @@ function onEpisodesCreated(): void {
 
     <template #footer>
       <el-button @click="visible = false">{{ t('common.cancel') }}</el-button>
-      <el-button type="primary" :disabled="!canCreateEpisodes" @click="openCreateDialog">
+      <el-button
+        type="primary"
+        :disabled="!queue.canStart.value"
+        :loading="queue.isUploading.value"
+        @click="onStartUpload"
+      >
+        {{ startButtonLabel }}
+      </el-button>
+      <el-button type="success" :disabled="!canCreateEpisodes" @click="openCreateDialog">
         {{ t('episodeBatch.createEpisodes') }}
       </el-button>
     </template>
@@ -272,6 +309,7 @@ function onEpisodesCreated(): void {
     :done-items="queue.doneItems.value"
     :next-episode-number="nextEpisodeNumber"
     :default-unlock-coin="defaultUnlockCoin"
+    :free-episodes="freeEpisodes"
     :existing-numbers="existingNumbers"
     @settled="emit('refreshed')"
     @created="onEpisodesCreated"
@@ -309,6 +347,15 @@ function onEpisodesCreated(): void {
   margin-bottom: 12px;
 }
 
+.batch-upload-summary {
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--el-color-success) 10%, transparent);
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+}
+
 .batch-upload-list {
   max-height: 360px;
   overflow: auto;

src/views/contentManagement/upload/CreateEpisodesDialog.vue

@@ -1,5 +1,5 @@
 <!-- Author: fruit.com.cn -->
-<!-- 批量创建分集：自然排序预填集号与标题，冲突标红，失败可重试 -->
+<!-- 批量创建分集确认清单：标题取文件名，集号自动顺延，失败可重试 -->
 
 <script setup lang="ts">
 import { ref, watch } from 'vue'
@@ -8,14 +8,21 @@ import { createEpisodeApi } from '@/api/admin/episode'
 import { useI18n } from '@/hooks/web/useI18n'
 import type { UploadQueueItem } from './useUploadQueue'
 
-const props = defineProps<{
+const props = withDefaults(
-  modelValue: boolean
+  defineProps<{
-  dramaId: string | number
+    modelValue: boolean
-  doneItems: UploadQueueItem[]
+    dramaId: string | number
-  nextEpisodeNumber: number
+    doneItems: UploadQueueItem[]
-  defaultUnlockCoin: number
+    nextEpisodeNumber: number
-  existingNumbers: number[]
+    defaultUnlockCoin: number
-}>()
+    existingNumbers: number[]
+    /** 所属短剧免费集数；不传默认 0 */
+    freeEpisodes?: number
+  }>(),
+  {
+    freeEpisodes: 0
+  }
+)
 
 const emit = defineEmits<{
   'update:modelValue': [value: boolean]
@@ -37,7 +44,7 @@ interface EpisodeDraft {
   error: string
 }
 
-const DRAFT_STATUS = 'draft'
+const PUBLISHED_STATUS = 'published'
 const rows = ref<EpisodeDraft[]>([])
 const submitting = ref(false)
 
@@ -51,22 +58,39 @@ function compareNatural(left: string, right: string): number {
   return left.localeCompare(right, undefined, { numeric: true, sensitivity: 'base' })
 }
 
+/** 从起点起跳过已占用集号，返回下一个可用值。 */
+function nextFreeNumber(start: number, used: Set<number>): number {
+  let candidate = start
+  while (used.has(candidate)) {
+    candidate += 1
+  }
+  return candidate
+}
+
 function buildRows(): void {
   const sorted = [...props.doneItems].sort((left, right) =>
     compareNatural(baseName(left.fileName), baseName(right.fileName))
   )
-  let number = props.nextEpisodeNumber
+  const used = new Set(props.existingNumbers)
-  rows.value = sorted.map((item) => ({
+  let cursor = props.nextEpisodeNumber
-    key: item.id,
+  const freeLimit = props.freeEpisodes
-    sourceName: item.fileName,
+  rows.value = sorted.map((item) => {
-    number: number++,
+    const number = nextFreeNumber(cursor, used)
-    title: baseName(item.fileName),
+    used.add(number)
-    isFree: true,
+    cursor = number + 1
-    videoUrl: item.url || '',
+    const isFree = number <= freeLimit
-    durationSec: item.durationSec || 0,
+    return {
-    saved: false,
+      key: item.id,
-    error: ''
+      sourceName: item.fileName,
-  }))
+      number,
+      title: baseName(item.fileName),
+      isFree,
+      videoUrl: item.url || '',
+      durationSec: item.durationSec || 0,
+      saved: false,
+      error: ''
+    }
+  })
 }
 
 watch(
@@ -76,12 +100,6 @@ watch(
   }
 )
 
-function conflictOf(row: EpisodeDraft): boolean {
-  if (row.saved) return false
-  const duplicated = rows.value.filter((item) => item.number === row.number).length > 1
-  return duplicated || props.existingNumbers.includes(Number(row.number))
-}
-
 function errorText(error: unknown): string {
   if (error instanceof Error && error.message) return error.message
   return t('episodeBatch.createFailed')
@@ -96,12 +114,12 @@ async function createOne(row: EpisodeDraft): Promise<void> {
     await createEpisodeApi({
       dramaId: props.dramaId as unknown as number,
       number: row.number,
-      title: row.title.trim(),
+      title: baseName(row.sourceName),
       durationSec: row.durationSec,
       videoUrl: row.videoUrl,
       isFree: row.isFree,
       unlockCoin: row.isFree ? 0 : props.defaultUnlockCoin,
-      status: DRAFT_STATUS
+      status: PUBLISHED_STATUS
     })
     row.saved = true
     row.error = ''
@@ -112,10 +130,6 @@ async function createOne(row: EpisodeDraft): Promise<void> {
 
 async function submit(): Promise<void> {
   if (submitting.value) return
-  if (rows.value.some((row) => conflictOf(row))) {
-    ElMessage.warning(t('episodeBatch.fixConflict'))
-    return
-  }
   submitting.value = true
   try {
     for (const row of rows.value) {
@@ -150,6 +164,7 @@ function hasFailed(): boolean {
     :close-on-click-modal="false"
     @update:model-value="emit('update:modelValue', $event)"
   >
+    <p class="create-episode-hint">{{ t('episodeBatch.createHint') }}</p>
     <div class="create-episode-head">
       <span>{{ t('episodeBatch.colSource') }}</span>
       <span>{{ t('episodeBatch.colNumber') }}</span>
@@ -162,24 +177,16 @@ function hasFailed(): boolean {
         v-for="row in rows"
         :key="row.key"
         class="create-episode-row"
-        :class="{ 'is-conflict': conflictOf(row), 'is-saved': row.saved }"
+        :class="{ 'is-saved': row.saved }"
       >
         <b class="create-episode-source" :title="row.sourceName">{{ row.sourceName }}</b>
-        <el-input-number
+        <span class="create-episode-number">{{ row.number }}</span>
-          v-model="row.number"
+        <span class="create-episode-title" :title="row.title">{{ row.title }}</span>
-          :min="1"
+        <span class="create-episode-free" :class="row.isFree ? 'is-free' : 'is-paid'">
-          :max="999"
+          {{ row.isFree ? t('episodeBatch.labelFree') : t('episodeBatch.labelPaid') }}
-          :disabled="row.saved"
+        </span>
-          controls-position="right"
-        />
-        <el-input v-model="row.title" maxlength="100" :disabled="row.saved" />
-        <el-switch v-model="row.isFree" :disabled="row.saved" />
         <span class="create-episode-result">
-          {{
+          {{ row.saved ? t('episodeBatch.createOk') : row.error }}
-            row.saved
-              ? t('episodeBatch.createOk')
-              : row.error || (conflictOf(row) ? t('episodeBatch.numberConflict') : '')
-          }}
         </span>
       </div>
     </div>
@@ -193,14 +200,33 @@ function hasFailed(): boolean {
 </template>
 
 <style scoped>
+.create-episode-hint {
+  margin: 0 0 12px;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
 .create-episode-head,
 .create-episode-row {
   display: grid;
-  grid-template-columns: minmax(120px, 1.2fr) 120px minmax(140px, 1.4fr) 48px minmax(80px, 0.8fr);
+  grid-template-columns: minmax(120px, 1.2fr) 72px minmax(140px, 1.4fr) 56px minmax(80px, 0.8fr);
   gap: 8px;
   align-items: center;
 }
 
+.create-episode-free {
+  font-size: 12px;
+}
+
+.create-episode-free.is-free {
+  color: var(--el-color-success);
+}
+
+.create-episode-free.is-paid {
+  color: var(--el-color-warning);
+}
+
 .create-episode-head {
   margin-bottom: 8px;
   color: var(--el-text-color-secondary);
@@ -215,26 +241,22 @@ function hasFailed(): boolean {
   overflow: auto;
 }
 
-.create-episode-source {
+.create-episode-source,
+.create-episode-title {
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
 }
 
+.create-episode-number {
+  font-variant-numeric: tabular-nums;
+}
+
 .create-episode-result {
   color: var(--el-text-color-secondary);
   font-size: 12px;
 }
 
-.create-episode-row.is-conflict :deep(.el-input-number) {
-  box-shadow: 0 0 0 1px var(--el-color-danger) inset;
-  border-radius: 4px;
-}
-
-.create-episode-row.is-conflict .create-episode-result {
-  color: var(--el-color-danger);
-}
-
 .create-episode-row.is-saved .create-episode-result {
   color: var(--el-color-success);
 }

src/views/contentManagement/upload/UploadTaskRow.vue

@@ -1,5 +1,5 @@
 <!-- Author: fruit.com.cn -->
-<!-- 批量上传队列单行：文件名、大小、进度、状态与操作 -->
+<!-- 批量上传队列单行：序号、文件名、大小、进度、状态与操作 -->
 
 <script setup lang="ts">
 import { computed } from 'vue'
@@ -8,6 +8,10 @@ import type { UploadQueueItem } from './useUploadQueue'
 
 const props = defineProps<{
   item: UploadQueueItem
+  /** 自然排序后的展示序号（从 1 起） */
+  index: number
+  /** 选择阶段才允许移除 */
+  allowRemove: boolean
 }>()
 
 const emit = defineEmits<{
@@ -47,14 +51,12 @@ const statusType = computed(() => {
 })
 
 const canRetry = computed(() => props.item.status === 'failed')
-const canRemove = computed(
-  () => props.item.status !== 'uploading' && props.item.status !== 'merging'
-)
 </script>
 
 <template>
   <div class="upload-task-row" :class="{ 'is-failed': item.status === 'failed' }">
     <div class="upload-task-row__meta">
+      <span class="upload-task-row__index">{{ index }}</span>
       <b class="upload-task-row__name" :title="item.fileName">{{ item.fileName }}</b>
       <small>{{ sizeLabel }}</small>
       <el-tag :type="statusType" effect="light" size="small">{{ statusLabel }}</el-tag>
@@ -71,7 +73,13 @@ const canRemove = computed(
       <el-button v-if="canRetry" size="small" type="primary" @click="emit('retry', item.id)">
         {{ t('episodeBatch.retry') }}
       </el-button>
-      <el-button v-if="canRemove" size="small" type="danger" text @click="emit('remove', item.id)">
+      <el-button
+        v-if="allowRemove"
+        size="small"
+        type="danger"
+        text
+        @click="emit('remove', item.id)"
+      >
         {{ t('episodeBatch.remove') }}
       </el-button>
     </div>
@@ -91,6 +99,14 @@ const canRemove = computed(
   margin-bottom: 8px;
 }
 
+.upload-task-row__index {
+  flex: 0 0 auto;
+  min-width: 1.5em;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
 .upload-task-row__name {
   flex: 1;
   overflow: hidden;
@@ -108,6 +124,8 @@ const canRemove = computed(
   margin-top: 8px;
   display: flex;
   gap: 8px;
+  justify-content: flex-end;
+  margin-left: auto;
 }
 
 .upload-task-row.is-failed {

src/views/contentManagement/upload/useUploadQueue.ts

@@ -1,5 +1,5 @@
 // Author: fruit.com.cn
-/** 剧集批量上传队列：文件并发、进度加权、断点会话、失败隔离 */
+/** 剧集批量上传队列：手动开始、文件并发、进度加权、断点会话、失败隔离 */
 
 import { computed, ref } from 'vue'
 import { getUploadProgressApi } from '@/api/admin/media'
@@ -58,6 +58,11 @@ function isHttpNotFound(error: unknown): boolean {
   return status === 404
 }
 
+/** 文件名自然排序（数字感知），保证队列序号稳定。 */
+function compareFileName(a: string, b: string): number {
+  return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
+}
+
 /**
  * 创建上传队列控制器。
  * @param options dramaId 与可选 bizType
@@ -65,6 +70,8 @@ function isHttpNotFound(error: unknown): boolean {
 export function useUploadQueue(options: UseUploadQueueOptions) {
   const items = ref<UploadQueueItem[]>([])
   const paused = ref(false)
+  /** 用户是否已点过「开始上传」；选文件阶段不派发、不占用并发。 */
+  const started = ref(false)
   const bizType = options.bizType || DEFAULT_BIZ_TYPE
   let running = 0
 
@@ -77,18 +84,36 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
     return Math.min(MAX_PERCENT, Math.round(weighted / totalBytes))
   })
 
-  const hasActiveUpload = computed(() =>
+  const isUploading = computed(() =>
-    items.value.some(
+    items.value.some((item) => item.status === 'uploading' || item.status === 'merging')
+  )
+
+  /** 关闭弹窗需二次确认：仅在已开始且仍有未完成任务时。 */
+  const hasActiveUpload = computed(() => {
+    if (!started.value) return false
+    return items.value.some(
       (item) =>
         item.status === 'waiting' ||
         item.status === 'uploading' ||
         item.status === 'merging' ||
         item.status === 'paused'
     )
-  )
+  })
+
+  const canStart = computed(() => {
+    if (isUploading.value) return false
+    return items.value.some((item) => item.status === 'waiting' || item.status === 'paused')
+  })
 
   const doneItems = computed(() => items.value.filter((item) => item.status === 'done'))
 
+  const failedCount = computed(() => items.value.filter((item) => item.status === 'failed').length)
+
+  /** 已开始且队列已无进行中任务时，可展示结果汇总。 */
+  const showResultSummary = computed(
+    () => started.value && items.value.length > 0 && !hasActiveUpload.value
+  )
+
   function persistSession(item: UploadQueueItem, uploadId: string): void {
     item.uploadId = uploadId
     upsertUploadSession({
@@ -106,6 +131,10 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
     if (uploadId) removeUploadSession(uploadId)
   }
 
+  function sortItemsByName(): void {
+    items.value.sort((a, b) => compareFileName(a.fileName, b.fileName))
+  }
+
   async function runOne(item: UploadQueueItem, resumeId?: string): Promise<void> {
     item.status = 'uploading'
     item.error = ''
@@ -140,7 +169,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
   }
 
   function pump(): void {
-    if (paused.value) return
+    if (!started.value || paused.value) return
     while (running < FILE_CONCURRENCY && !paused.value) {
       const next = items.value.find((item) => item.status === 'waiting')
       if (!next) return
@@ -155,9 +184,10 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
     }
   }
 
-  /** 入队本地文件（调用方已完成类型/大小校验）。 */
+  /** 入队本地文件（调用方已完成类型/大小校验）；只展示待上传，不发起请求。 */
   function enqueue(files: File[]): void {
-    for (const file of files) {
+    const sorted = [...files].sort((a, b) => compareFileName(a.name, b.name))
+    for (const file of sorted) {
       items.value.push({
         id: nextItemId(),
         file,
@@ -165,15 +195,18 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
         fileSize: file.size,
         lastModified: file.lastModified,
         percent: 0,
-        status: paused.value ? 'paused' : 'waiting',
+        status: 'waiting',
         error: '',
         uploadId: ''
       })
     }
+    sortItemsByName()
   }
 
-  /** 开始或继续派发。 */
+  /** 开始或继续派发（含断点续传项上的 uploadId）。 */
   function start(): void {
+    if (!items.value.length) return
+    started.value = true
     paused.value = false
     for (const item of items.value) {
       if (item.status === 'paused') item.status = 'waiting'
@@ -183,6 +216,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
 
   /** 暂停：不派新任务；进行中分片跑完。 */
   function pause(): void {
+    if (!started.value) return
     paused.value = true
     for (const item of items.value) {
       if (item.status === 'waiting') item.status = 'paused'
@@ -196,7 +230,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
     item.error = ''
     item.percent = item.uploadId ? item.percent : 0
     item.status = paused.value ? 'paused' : 'waiting'
-    if (!paused.value) void pump()
+    if (started.value && !paused.value) void pump()
   }
 
   /** 重试全部失败项。 */
@@ -207,11 +241,12 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
         item.status = paused.value ? 'paused' : 'waiting'
       }
     }
-    if (!paused.value) void pump()
+    if (started.value && !paused.value) void pump()
   }
 
-  /** 移除单项并清理会话。 */
+  /** 仅选择阶段可移除；已开始上传后禁止直接移除，避免脏会话。 */
   function remove(id: string): void {
+    if (started.value) return
     const index = items.value.findIndex((row) => row.id === id)
     if (index < 0) return
     const [removed] = items.value.splice(index, 1)
@@ -225,6 +260,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
     }
     items.value = []
     paused.value = false
+    started.value = false
     running = 0
   }
 
@@ -234,7 +270,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
   }
 
   /**
-   * 用本地重选文件匹配会话并入队续传。
+   * 用本地重选文件匹配会话并入队（待上传）；不自动开始，由用户点「开始上传」续传。
    * @returns matched / unmatched 会话列表
    */
   async function resumeFromSessions(
@@ -267,7 +303,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
           fileSize: file.size,
           lastModified: file.lastModified,
           percent: Math.min(MERGING_PERCENT, Number(progress.percent) || 0),
-          status: paused.value ? 'paused' : 'waiting',
+          status: 'waiting',
           error: '',
           uploadId: session.uploadId
         })
@@ -280,6 +316,7 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
         }
       }
     }
+    sortItemsByName()
     return { matched, unmatched }
   }
 
@@ -294,7 +331,12 @@ export function useUploadQueue(options: UseUploadQueueOptions) {
     items,
     overallPercent,
     hasActiveUpload,
+    isUploading,
+    canStart,
     doneItems,
+    failedCount,
+    showResultSummary,
+    started,
     paused,
     enqueue,
     start,