chore(merge): 剧集列表分页条始终显示

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/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"