refactor(admin): 拆分剧集管理页超长组件

Co-authored-by: Cursor <cursoragent@cursor.com>

.gitignore

@@ -7,3 +7,9 @@ dist-ssr
 *-lock.*
 pnpm-debug
 stats.html
+*.apk
+
+# 本机运行时产物（start-dev.bat / vite 日志）
+start-dev.bat
+dev.out.log
+dev.err.log

package.json

@@ -6,7 +6,7 @@
   "private": true,
   "scripts": {
     "i": "pnpm install",
-    "dev": "VITE_CJS_IGNORE_WARNING=1 vite --mode base",
+    "dev": "vite --mode base",
     "ts:check": "pnpm vue-tsc --noEmit --skipLibCheck",
     "build:pro": "VITE_CJS_IGNORE_WARNING=1 vite build --mode pro",
     "build:dev": "VITE_CJS_IGNORE_WARNING=1 vite build --mode dev",

src/api/admin/appUser.ts

@@ -13,6 +13,20 @@ export interface AppUserPageParams {
   registerSource?: string
 }
 
+export interface WatchHistoryPageParams {
+  pageIndex?: number
+  pageSize?: number
+  keyword?: string
+  userId?: number
+  dramaTitle?: string
+  dramaId?: number
+  episodeId?: number
+  source?: string
+  finished?: boolean
+  startTime?: string
+  endTime?: string
+}
+
 export const pageAppUsersApi = (params: AppUserPageParams) => {
   return request.get<PageResult<AppUserItem>>({ url: '/admin/app-users/page', params })
 }
@@ -32,6 +46,13 @@ export const listAppUserWatchHistoryApi = (id: number, limit = 50) => {
   })
 }
 
+export const pageWatchHistoryApi = (params: WatchHistoryPageParams) => {
+  return request.get<PageResult<WatchHistoryItem>>({
+    url: '/admin/watch-history/page',
+    params
+  })
+}
+
 /** normal / limited / banned，封禁与限制会立即吊销该用户全部会话 */
 export const updateAppUserStatusApi = (id: number, status: string, reason?: string) => {
   return request.put<void>({

src/api/admin/drama.ts

@@ -15,7 +15,9 @@ export interface DramaPageParams {
   keyword?: string
   status?: string
   categoryId?: number
+  categoryIds?: number[]
   isHot?: boolean
+  dramaTypes?: Array<'ANIME' | 'LIVE'>
 }
 
 export const pageDramasApi = (params: DramaPageParams) => {

src/api/admin/types.ts

@@ -20,11 +20,15 @@ export interface DramaItem {
   title: string
   subtitle?: string
   categoryId?: number
+  categoryIds?: number[]
+  categoryNames?: string[]
   category?: string
   genre?: string
   description?: string
   cover?: string
   language?: string
+  dramaType?: 'ANIME' | 'LIVE'
+  dramaTypes?: Array<'ANIME' | 'LIVE'>
   episodes?: number
   freeEpisodes?: number
   unlockCoin?: number
@@ -33,6 +37,9 @@ export interface DramaItem {
   status: string
   statusText: string
   views?: number
+  favoriteCount?: number
+  likeCount?: number
+  commentCount?: number
   sort?: number
   publishAt?: string
   createdAt?: string
@@ -43,12 +50,18 @@ export interface DramaSaveData {
   title: string
   subtitle?: string
   categoryId?: number
+  categoryIds?: number[]
   genre?: string
   description?: string
   cover?: string
   language?: string
+  dramaType?: 'ANIME' | 'LIVE'
+  dramaTypes?: Array<'ANIME' | 'LIVE'>
   freeEpisodes?: number
   unlockCoin?: number
+  favoriteCount?: number
+  likeCount?: number
+  heat?: number
   isHot?: boolean
   sort?: number
 }
@@ -69,6 +82,10 @@ export interface EpisodeItem {
   status: string
   statusText: string
   views?: number
+  likeCount?: number
+  commentCount?: number
+  favoriteCount?: number
+  heat?: number
   sort?: number
 }
 
@@ -81,6 +98,7 @@ export interface EpisodeSaveData {
   videoUrl?: string
   isFree?: boolean
   unlockCoin?: number
+  likeCount?: number
   status?: string
   sort?: number
 }
@@ -294,11 +312,15 @@ export interface AppUserBanRecord {
 
 export interface WatchHistoryItem {
   id: number
+  userId?: number
+  uid?: string
+  nickname?: string
   dramaId: number
   dramaTitle?: string
   dramaPublished?: boolean
   episodeId: number
   episodeNo?: number
+  episodeTitle?: string
   positionMs: number
   durationMs: number
   finished?: boolean
@@ -311,7 +333,10 @@ export interface WatchHistoryItem {
 export interface CommentItem {
   id: number
   dramaId: number
+  dramaTitle?: string
   episodeId: number
+  episodeNo?: number
+  episodeTitle?: string
   parentId: number
   rootId: number
   userId: number
@@ -330,9 +355,20 @@ export interface CommentItem {
 export interface ReportItem {
   id: number
   reporterId: number
+  reporterNickname?: string
+  reporterUid?: string
   /** COMMENT / USER / DRAMA */
   targetType: string
   targetId: number
+  targetSummary?: string
+  dramaId?: number
+  dramaTitle?: string
+  episodeId?: number
+  episodeNo?: number
+  episodeTitle?: string
+  commentContent?: string
+  targetNickname?: string
+  targetUid?: string
   reasonCode: string
   description: string
   /** pending / handled / rejected */

src/components/AppImage/index.ts

@@ -0,0 +1,5 @@
+// Author: fruit.com.cn
+
+import AppImage from './src/AppImage.vue'
+
+export { AppImage }

src/components/AppImage/src/AppImage.vue

@@ -0,0 +1,94 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { PropType } from 'vue'
+import { ElImage } from 'element-plus'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  src: {
+    type: String,
+    required: true
+  },
+  previewList: {
+    type: Array as () => string[],
+    default: () => []
+  },
+  initialIndex: {
+    type: Number,
+    default: 0
+  },
+  fit: {
+    type: String as PropType<'fill' | 'contain' | 'cover' | 'none' | 'scale-down'>,
+    default: 'cover'
+  },
+  class: {
+    type: [String, Array, Object],
+    default: ''
+  },
+  style: {
+    type: [String, Array, Object],
+    default: undefined
+  },
+  alt: {
+    type: String,
+    default: ''
+  }
+})
+
+const resolvedPreviewList = computed(() => {
+  const images = (props.previewList || []).filter(Boolean)
+  return images.length ? images : [props.src]
+})
+
+const resolvedInitialIndex = computed(() =>
+  Math.max(0, Math.min(props.initialIndex, resolvedPreviewList.value.length - 1))
+)
+</script>
+
+<template>
+  <ElImage
+    v-bind="$attrs"
+    :src="src"
+    :alt="alt"
+    :fit="fit"
+    :preview-src-list="resolvedPreviewList"
+    :initial-index="resolvedInitialIndex"
+    :preview-teleported="true"
+    :hide-on-click-modal="true"
+    :class="['app-image', props.class]"
+    :style="style"
+  >
+    <template #error>
+      <div class="app-image-error">
+        <AppIcon :icon="AppIcons.error" :size="20" />
+      </div>
+    </template>
+  </ElImage>
+</template>
+
+<style scoped>
+.app-image {
+  cursor: zoom-in;
+}
+
+.app-image :deep(.el-image__inner) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.app-image-error {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: var(--el-text-color-placeholder);
+  background: var(--el-fill-color-lighter);
+  align-items: center;
+  justify-content: center;
+}
+</style>

src/components/Form/src/helper/componentMap.ts

@@ -1,5 +1,6 @@
 // Author: fruit.com.cn
 
+import { defineAsyncComponent } from 'vue'
 import type { Component } from 'vue'
 import {
   ElCascader,
@@ -23,9 +24,12 @@ import {
   ElUpload
 } from 'element-plus'
 import { InputPassword } from '@/components/InputPassword'
-import { Editor } from '@/components/Editor'
 import { ComponentName } from '../types'
 
+// wang-editor 打包后约 1.1MB：改成异步组件，只有真正渲染编辑器字段时才加载，
+// 避免登录页这类只是用了 Form 的页面把它一并拉进首屏。
+const Editor = defineAsyncComponent(() => import('@/components/Editor'))
+
 const componentMap: Recordable<Component, ComponentName> = {
   RadioGroup: ElRadioGroup,
   RadioButton: ElRadioGroup,

src/components/Form/src/types/index.ts

@@ -22,7 +22,8 @@ import {
   ISelectProps,
   UploadProps
 } from 'element-plus'
-import { IEditorConfig } from '@wangeditor/editor'
+// 仅类型引用：必须用 import type，否则会把整个 wang-editor 打进登录页的依赖链
+import type { IEditorConfig } from '@wangeditor/editor'
 import { CSSProperties } from 'vue'
 
 export interface PlaceholderModel {

src/components/index.ts

@@ -3,10 +3,12 @@
 import type { App } from 'vue'
 import { Icon } from './Icon'
 import { AppIcon } from './AppIcon'
+import { AppImage } from './AppImage'
 import { BaseButton } from './Button'
 
 export const setupGlobCom = (app: App<Element>): void => {
   app.component('Icon', Icon)
   app.component('AppIcon', AppIcon)
+  app.component('AppImage', AppImage)
   app.component('BaseButton', BaseButton)
 }

src/locales/en.ts

@@ -112,6 +112,7 @@ export default {
     login: 'Sign in',
     remember: 'Remember me',
     forgetPassword: 'Forget password',
+    forgetPasswordHint: 'Please contact the administrator to reset your password',
     usernamePlaceholder: 'Please input username',
     passwordPlaceholder: 'Please input password'
   },
@@ -526,5 +527,54 @@ export default {
   inputPasswordDemo: {
     title: 'InputPassword',
     inputPasswordDes: 'Secondary packaging of Input components based on ElementPlus'
+  },
+  episodeBatch: {
+    title: 'Batch upload episodes',
+    entry: 'Batch upload',
+    selectFiles: 'Select videos',
+    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.',
+    invalidType: 'Only MP4, MOV, MKV, WEBM are allowed',
+    oversize: 'File exceeds 500MB and was not queued',
+    overallProgress: 'Overall progress',
+    empty: 'No videos selected',
+    createEpisodes: 'Create episodes',
+    closeWhileUploading:
+      'Uploads are still in progress. Closing will stop dispatching new tasks. Continue?',
+    resumeTitle: 'Unfinished uploads found',
+    resumeConfirm:
+      '{count} unfinished upload(s) found. Resume? Re-select the same local files to match.',
+    resumeYes: 'Pick files to resume',
+    resumeNo: 'Discard',
+    resumeAbandoned: 'Unfinished uploads discarded',
+    resumeMatched: 'Matched {count} file(s) and resumed',
+    resumeUnmatched: '{count} session(s) could not match local files; pick again manually',
+    createTitle: 'Create episodes in batch',
+    colSource: 'Source file',
+    colNumber: 'Episode No.',
+    colTitle: 'Title',
+    colFree: 'Free',
+    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: 'Submit',
+    retryFailed: 'Retry failed',
+    status: {
+      waiting: 'Waiting',
+      uploading: 'Uploading',
+      merging: 'Merging',
+      done: 'Done',
+      failed: 'Failed',
+      paused: 'Paused'
+    }
   }
 }

src/locales/zh-CN.ts

@@ -112,6 +112,7 @@ export default {
     login: '登录',
     remember: '记住我',
     forgetPassword: '忘记密码',
+    forgetPasswordHint: '请联系管理员重置密码',
     usernamePlaceholder: '请输入用户名',
     passwordPlaceholder: '请输入密码'
   },
@@ -520,5 +521,52 @@ export default {
   inputPasswordDemo: {
     title: '密码输入框',
     inputPasswordDes: '基于 ElementPlus 的 Input 组件二次封装'
+  },
+  episodeBatch: {
+    title: '批量上传剧集',
+    entry: '批量上传',
+    selectFiles: '选择视频',
+    pause: '暂停',
+    resume: '继续',
+    retry: '重试',
+    retryAll: '全部重试',
+    remove: '移除',
+    hint: '支持 MP4 / MOV / MKV / WEBM，单文件不超过 500MB；可一次多选，同时上传 2 个，其余自动排队。',
+    invalidType: '仅支持 MP4、MOV、MKV、WEBM',
+    oversize: '文件超过 500MB，未入队',
+    overallProgress: '总进度',
+    empty: '尚未选择视频',
+    createEpisodes: '批量创建分集',
+    closeWhileUploading: '仍有未完成上传，关闭后将暂停派发新任务，确定关闭吗？',
+    resumeTitle: '发现未完成上传',
+    resumeConfirm: '发现 {count} 个未完成上传，是否续传？请重新选择相同本地文件以匹配。',
+    resumeYes: '选择文件续传',
+    resumeNo: '放弃',
+    resumeAbandoned: '已放弃未完成上传',
+    resumeMatched: '已匹配 {count} 个文件并开始续传',
+    resumeUnmatched: '有 {count} 个会话无法匹配本地文件，请手动重选',
+    createTitle: '批量创建分集',
+    colSource: '源文件',
+    colNumber: '集号',
+    colTitle: '标题',
+    colFree: '免费',
+    colResult: '结果',
+    numberConflict: '集号冲突',
+    missingVideo: '缺少视频地址',
+    createOk: '已创建',
+    createFailed: '创建失败',
+    createAllSuccess: '全部分集已创建',
+    createPartial: '部分分集创建失败，可重试',
+    fixConflict: '请先解决集号冲突',
+    submitCreate: '提交创建',
+    retryFailed: '重试失败项',
+    status: {
+      waiting: '等待中',
+      uploading: '上传中',
+      merging: '合并中',
+      done: '已完成',
+      failed: '失败',
+      paused: '已暂停'
+    }
   }
 }

src/styles/business/app-user-management.css

@@ -53,7 +53,8 @@
   line-height: 1;
 }
 
-.app-user-avatar img {
+.app-user-avatar img,
+.app-user-avatar .app-user-avatar-image {
   width: 100%;
   height: 100%;
   object-fit: cover;

src/styles/business/banner-management.css

@@ -19,31 +19,206 @@
   font-size: 12px;
 }
 
-.banner-field {
+.banner-editor-dialog {
   display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  width: 100%;
+  max-height: calc(100vh - 40px);
+  overflow: hidden;
+  flex-direction: column;
+  border-radius: var(--app-radius-lg) !important;
 }
-.banner-field-actions {
+
+.banner-editor-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  padding: 8px 24px 0;
+  overflow-y: auto;
+}
+
+.banner-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);
+}
+
+.banner-editor-dialog .el-dialog__footer .el-button {
+  min-width: 88px;
+  height: 36px;
+}
+
+.banner-editor-section {
+  padding: 4px 0 18px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.banner-editor-section + .banner-editor-section {
+  padding-top: 18px;
+}
+
+.banner-editor-section:last-child {
+  padding-bottom: 4px;
+  border-bottom: 0;
+}
+
+.banner-editor-section-title {
+  margin: 0 0 14px;
+  color: var(--el-text-color-primary);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.banner-editor-grid {
+  display: grid;
+  gap: 0 16px;
+}
+
+.banner-editor-grid--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.banner-editor-number {
+  width: 180px !important;
+}
+
+.banner-image-editor {
+  display: flex;
+  gap: 18px;
+  width: 100%;
+  align-items: flex-start;
+}
+
+.banner-image-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: 8px;
+  background: var(--el-fill-color-lighter);
+}
+
+.banner-image-preview-card > img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.banner-image-empty {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  border: 1px dashed var(--el-border-color);
+  border-radius: 8px;
+}
+
+.banner-image-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);
+}
+
+.banner-image-upload-mask b {
+  font-size: 16px;
+}
+
+.banner-image-meta {
+  display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  flex-direction: column;
+  gap: 10px;
 }
-/* 编辑弹窗里的轮播图预览：和上传控件并排，控制弹窗高度 */
-.form-banner-preview {
-  display: block;
-  width: 200px;
-  height: 112px;
-  flex: 0 0 200px;
-  object-fit: contain;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--app-radius-md);
-  background: #f0f2f4 !important;
+
+.banner-image-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.banner-image-filename {
+  overflow: hidden;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.banner-image-hint {
+  margin: 0;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.banner-image-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.banner-image-actions .el-button {
+  height: 36px;
+}
+
+.banner-original-link {
+  color: var(--el-color-primary);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.banner-original-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 600px) {
+  .banner-editor-dialog {
+    width: calc(100vw - 24px) !important;
+    margin: 12px auto !important;
+  }
+
+  .banner-editor-dialog .el-dialog__body {
+    padding-right: 18px;
+    padding-left: 18px;
+  }
+
+  .banner-editor-grid--two {
+    grid-template-columns: 1fr;
+  }
+
+  .banner-image-editor {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .banner-image-preview-card {
+    flex-basis: 135px;
+  }
+
+  .banner-image-meta {
+    width: 100%;
+  }
 }
 
 .dark .banner-thumb,
 .dark .banner-thumb-empty,
-.dark .form-banner-preview {
+.dark .banner-image-preview-card,
+.dark .banner-image-empty {
   background: #353b45 !important;
   color: #b9c1cb;
 }

src/styles/business/creator-center.css

@@ -59,8 +59,10 @@
 }
 
 .creator-drama-cover img,
+.creator-drama-cover .creator-drama-image,
 .creator-cover-preview img,
-.creator-episode-cover img {
+.creator-episode-cover img,
+.creator-episode-cover .creator-episode-image {
   width: 100%;
   height: 100%;
   object-fit: cover;

src/styles/business/drama-management.css

@@ -147,6 +147,24 @@
   width: 180px !important;
 }
 
+.readonly-stat {
+  min-width: 180px;
+  height: 32px;
+  padding: 0 12px;
+  color: var(--el-text-color-secondary);
+  line-height: 32px;
+  background: var(--el-fill-color-lighter);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: var(--el-border-radius-base);
+}
+
+.readonly-stat-hint {
+  margin: 4px 0 0;
+  color: var(--el-text-color-placeholder);
+  font-size: 12px;
+  line-height: 1.4;
+}
+
 .cover-editor {
   display: flex;
   gap: 18px;
@@ -289,26 +307,239 @@ html.dark .cover-preview-empty {
   background: var(--el-fill-color-light);
 }
 
-/* 编辑弹窗里的视频预览 */
-.video-field {
+/* 剧集编辑弹窗 */
+.episode-editor-dialog {
   display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  width: 100%;
+  max-height: calc(100vh - 40px);
+  overflow: hidden;
+  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;
-  width: 200px;
-  height: 112px;
-  flex: 0 0 200px;
-  object-fit: contain;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--app-radius-md);
-  background: #000 !important;
+
+.episode-video-status {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.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/styles/business/style.css

@@ -511,6 +511,8 @@ body {
 .episode-context {
   display: flex;
   align-items: center;
+  justify-content: space-between;
+  gap: 24px;
   padding: 20px 0;
   border-bottom: 1px solid #f0eff4;
 }
@@ -520,32 +522,65 @@ body {
   font-size: 22px;
   border-radius: var(--app-radius-md);
 }
-.episode-context-copy {
-  margin-left: 12px;
+.episode-context-info {
   display: flex;
+  min-width: 0;
   flex-direction: column;
   gap: 4px;
 }
-.episode-context-copy > span {
-  font-size: 9px;
-  color: #a7a5b3;
+
+.episode-context-label {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  line-height: 1.4;
 }
-.episode-context-copy b {
-  font-size: 13px;
+
+.episode-context-title {
+  overflow: hidden;
+  color: var(--el-text-color-primary);
+  font-size: 16px;
+  font-weight: 650;
+  line-height: 1.4;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
-.episode-context-copy small {
-  font-size: 9px;
-  color: #aaa8b6;
+
+.episode-context-count {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+  line-height: 1.4;
 }
+
+.episode-switcher {
+  display: flex;
+  flex: 0 0 clamp(320px, 32vw, 360px);
+  width: clamp(320px, 32vw, 360px);
+  min-width: 0;
+  flex-direction: column;
+  gap: 6px;
+}
+
 .drama-select {
-  margin-left: auto;
-  width: 215px;
+  width: 100%;
 }
 .drama-select .el-input__wrapper {
   box-shadow: 0 0 0 1px #efedf3 inset !important;
 }
 .drama-select .el-input__inner {
-  font-size: 10px;
+  font-size: 13px;
+}
+
+@media (max-width: 768px) {
+  .episode-context {
+    align-items: stretch;
+    gap: 14px;
+    flex-direction: column;
+  }
+
+  .episode-switcher {
+    flex-basis: auto;
+    width: 100%;
+  }
 }
 .episode-toolbar {
   display: flex;

src/utils/uploader.ts

@@ -32,8 +32,9 @@ export async function uploadFile(file: File, options: UploadFileOptions = {}): P
     bizType
   })
   const info = initRes.data
+  const chunkSize = Number(info.chunkSize)
   options.onSession?.(info.uploadId)
-  const total = Math.max(info.totalChunks, 1)
+  const total = Math.max(Number(info.totalChunks), 1)
   const pending: number[] = Array.from({ length: total }, (_, index) => index)
   let finished = 0
 
@@ -41,8 +42,8 @@ export async function uploadFile(file: File, options: UploadFileOptions = {}): P
     for (;;) {
       const index = pending.shift()
       if (index === undefined) return
-      const start = index * info.chunkSize
-      const chunk = file.slice(start, Math.min(start + info.chunkSize, file.size))
+      const start = index * chunkSize
+      const chunk = file.slice(start, Math.min(start + chunkSize, file.size))
       await uploadChunkApi(info.uploadId, index, chunk, file.name)
       finished += 1
       onProgress?.(Math.min(95, Math.round((finished / total) * 95)))
@@ -68,7 +69,8 @@ export async function resumeUpload(
 ): Promise<MediaAsset> {
   const { concurrency = 3, onProgress } = options
   const progress = (await getUploadProgressApi(uploadId)).data
-  const total = Math.max(progress.totalChunks, 1)
+  const chunkSize = Number(progress.chunkSize)
+  const total = Math.max(Number(progress.totalChunks), 1)
   const received = Math.min(progress.receivedChunks || 0, total)
   const pending: number[] = []
   for (let index = received; index < total; index += 1) {
@@ -81,8 +83,8 @@ export async function resumeUpload(
     for (;;) {
       const index = pending.shift()
       if (index === undefined) return
-      const start = index * progress.chunkSize
-      const chunk = file.slice(start, Math.min(start + progress.chunkSize, file.size))
+      const start = index * chunkSize
+      const chunk = file.slice(start, Math.min(start + chunkSize, file.size))
       await uploadChunkApi(uploadId, index, chunk, file.name)
       finished += 1
       onProgress?.(Math.min(95, Math.round((finished / total) * 95)))

src/views/Login/components/LoginForm.vue

@@ -4,7 +4,7 @@
 import { reactive, ref, watch, onMounted, unref } from 'vue'
 import { Form, FormSchema } from '@/components/Form'
 import { useI18n } from '@/hooks/web/useI18n'
-import { ElCheckbox, ElLink } from 'element-plus'
+import { ElCheckbox, ElLink, ElMessage } from 'element-plus'
 import { useForm } from '@/hooks/web/useForm'
 import { loginApi, getAdminRoleApi } from '@/api/login'
 import { useAppStore } from '@/store/modules/app'
@@ -92,7 +92,11 @@ const schema = reactive<FormSchema[]>([
             <>
               <div class="flex justify-between items-center w-[100%]">
                 <ElCheckbox v-model={remember.value} label={t('login.remember')} size="small" />
-                <ElLink type="primary" underline={false}>
+                <ElLink
+                  type="primary"
+                  underline={false}
+                  onClick={() => ElMessage.info(t('login.forgetPasswordHint'))}
+                >
                   {t('login.forgetPassword')}
                 </ElLink>
               </div>

src/views/contentManagement/BannerManagementView.vue

@@ -1,9 +1,10 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import {
   createBannerApi,
   deleteBannerApi,
@@ -32,7 +33,10 @@ const dialogVisible = ref(false)
 const saving = ref(false)
 const uploadingImage = ref(false)
 const imagePercent = ref(0)
+const imageError = ref('')
+const imageFileName = ref('')
 const editingId = ref(null)
+const formRef = ref()
 const form = reactive({
   imageUrl: '',
   position: 'HOME_TOP',
@@ -53,6 +57,47 @@ const linkTypeOptions = [
   { code: 'URL', text: '打开链接' }
 ]
 
+const MAX_BANNER_IMAGE_SIZE = 5 * 1024 * 1024
+const BANNER_IMAGE_TYPES = ['image/jpeg', 'image/png', 'image/webp']
+const formRules = {
+  imageUrl: [{ required: true, message: '请上传轮播图片', trigger: 'change' }],
+  position: [{ required: true, message: '请选择展示位置', trigger: 'change' }],
+  linkValue: [
+    {
+      validator: (_rule, value, callback) => {
+        if (form.linkType === 'DRAMA' && !value) {
+          callback(new Error('请选择要跳转的短剧'))
+        } else if (form.linkType === 'URL' && !String(value || '').trim()) {
+          callback(new Error('请填写跳转地址'))
+        } else {
+          callback()
+        }
+      },
+      trigger: 'change'
+    }
+  ]
+}
+
+const bannerPreviewList = computed(() => list.value.map((item) => item.imageUrl).filter(Boolean))
+const imageDisplayName = computed(
+  () => imageFileName.value || (form.imageUrl ? bannerBasename(form.imageUrl) : '尚未选择图片')
+)
+
+function bannerPreviewIndex(row) {
+  return Math.max(0, bannerPreviewList.value.indexOf(row.imageUrl))
+}
+
+function bannerBasename(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 load() {
   loading.value = true
   try {
@@ -100,7 +145,10 @@ function openCreate() {
     sort: nextSort(),
     status: 1
   })
+  imageFileName.value = ''
+  imageError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 function openEdit(row) {
@@ -113,7 +161,10 @@ function openEdit(row) {
     sort: row.sort ?? 0,
     status: row.status
   })
+  imageFileName.value = row.imageUrl ? bannerBasename(row.imageUrl) : ''
+  imageError.value = ''
   dialogVisible.value = true
+  resetValidation()
 }
 
 function nextSort() {
@@ -121,12 +172,11 @@ function nextSort() {
 }
 
 async function saveBanner() {
-  if (!form.imageUrl.trim()) return ElMessage.warning('请上传轮播图片')
-  if (form.linkType === 'DRAMA' && !form.linkValue) {
-    return ElMessage.warning('请选择要跳转的短剧')
-  }
-  if (form.linkType === 'URL' && !form.linkValue.trim()) {
-    return ElMessage.warning('请填写跳转地址')
+  if (saving.value || uploadingImage.value) return
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
   }
   const payload = {
     ...form,
@@ -150,21 +200,55 @@ async function saveBanner() {
   }
 }
 
+function beforeImageUpload(file) {
+  imageError.value = ''
+  if (!BANNER_IMAGE_TYPES.includes(file.type)) {
+    imageError.value = '图片仅支持 JPG、PNG 或 WebP 格式'
+    return false
+  }
+  if (file.size > MAX_BANNER_IMAGE_SIZE) {
+    imageError.value = '图片大小不能超过 5MB'
+    return false
+  }
+  return true
+}
+
 async function uploadImage(options) {
   uploadingImage.value = true
   imagePercent.value = 0
+  imageError.value = ''
   try {
     const asset = await uploadFile(options.file, {
       bizType: 'BANNER',
       onProgress: (percent) => (imagePercent.value = percent)
     })
     form.imageUrl = asset.url
+    imageFileName.value = options.file.name
+    await resetValidation()
     ElMessage.success('图片已上传')
+  } catch {
+    imageError.value = '图片上传失败，请检查网络后重试'
   } finally {
     uploadingImage.value = false
   }
 }
 
+function removeImage() {
+  if (uploadingImage.value) return
+  form.imageUrl = ''
+  imageFileName.value = ''
+  imageError.value = ''
+  resetValidation()
+}
+
+function beforeDialogClose(done) {
+  if (saving.value || uploadingImage.value) {
+    ElMessage.warning(saving.value ? '正在保存，请稍候' : '图片正在上传，请稍候')
+    return
+  }
+  done()
+}
+
 async function toggleStatus(row) {
   const next = row.status === 1 ? 0 : 1
   await updateBannerStatusApi(row.id, next)
@@ -253,7 +337,15 @@ onMounted(async () => {
     >
       <el-table-column label="预览" width="190">
         <template #default="{ row }">
-          <img v-if="row.imageUrl" :src="row.imageUrl" class="banner-thumb" />
+          <AppImage
+            v-if="row.imageUrl"
+            :src="row.imageUrl"
+            :preview-list="bannerPreviewList"
+            :initial-index="bannerPreviewIndex(row)"
+            fit="cover"
+            class="banner-thumb"
+            :alt="row.title"
+          />
           <div v-else class="banner-thumb-empty">暂无图片</div>
         </template>
       </el-table-column>
@@ -335,75 +427,160 @@ onMounted(async () => {
     </div>
   </section>
 
-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑轮播图' : '新建轮播图'" width="620px">
-    <el-form label-position="top">
-      <el-form-item label="轮播图片" required>
-        <div class="banner-field">
-          <div class="banner-field-actions">
-            <el-upload
-              :show-file-list="false"
-              accept="image/*"
-              :http-request="uploadImage"
-              :disabled="uploadingImage"
-            >
-              <el-button :loading="uploadingImage">{{
-                form.imageUrl ? '更换图片' : '选择图片'
-              }}</el-button>
-            </el-upload>
-            <p v-if="uploadingImage" class="selected-file">上传中 {{ imagePercent }}%</p>
-            <p v-else-if="form.imageUrl" class="selected-file">图片已上传</p>
-            <el-input v-model="form.imageUrl" placeholder="也可以直接填写图片地址" />
+  <el-dialog
+    v-model="dialogVisible"
+    :title="editingId ? '编辑轮播图' : '新建轮播图'"
+    width="680px"
+    class="banner-editor-dialog"
+    :close-on-click-modal="false"
+    :before-close="beforeDialogClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="formRules"
+      label-position="top"
+      class="banner-editor-form"
+    >
+      <section class="banner-editor-section">
+        <h3 class="banner-editor-section-title">轮播图片</h3>
+        <el-form-item prop="imageUrl">
+          <div class="banner-image-editor">
+            <div class="banner-image-preview-card">
+              <img v-if="form.imageUrl" :src="form.imageUrl" alt="轮播图预览" />
+              <div v-else class="banner-image-empty">
+                <AppIcon :icon="AppIcons.content" :size="28" />
+                <span>暂无图片</span>
+              </div>
+              <div v-if="uploadingImage" class="banner-image-upload-mask">
+                <span>上传中</span>
+                <b>{{ imagePercent }}%</b>
+              </div>
+            </div>
+
+            <div class="banner-image-meta">
+              <div class="banner-image-status">
+                <el-tag :type="form.imageUrl ? 'success' : 'info'" effect="light">
+                  {{ form.imageUrl ? '已上传' : '未上传' }}
+                </el-tag>
+                <span class="banner-image-filename" :title="imageDisplayName">
+                  {{ imageDisplayName }}
+                </span>
+              </div>
+              <p class="banner-image-hint">支持 JPG、PNG、WebP，单张不超过 5MB。</p>
+              <el-alert
+                v-if="imageError"
+                :title="imageError"
+                type="error"
+                :closable="false"
+                show-icon
+              />
+              <div class="banner-image-actions">
+                <el-upload
+                  :show-file-list="false"
+                  accept="image/jpeg,image/png,image/webp"
+                  :before-upload="beforeImageUpload"
+                  :http-request="uploadImage"
+                  :disabled="uploadingImage"
+                >
+                  <el-button :loading="uploadingImage" :disabled="uploadingImage">
+                    <AppIcon :icon="AppIcons.upload" />
+                    {{ form.imageUrl ? '更换图片' : '选择图片' }}
+                  </el-button>
+                </el-upload>
+                <el-button
+                  v-if="form.imageUrl"
+                  type="danger"
+                  :disabled="uploadingImage"
+                  @click="removeImage"
+                >
+                  移除
+                </el-button>
+                <a
+                  v-if="form.imageUrl"
+                  class="banner-original-link"
+                  :href="form.imageUrl"
+                  target="_blank"
+                  rel="noopener noreferrer"
+                >
+                  查看原图
+                </a>
+              </div>
+            </div>
           </div>
-          <img v-if="form.imageUrl" :src="form.imageUrl" class="form-banner-preview" />
+        </el-form-item>
+      </section>
+
+      <section class="banner-editor-section">
+        <h3 class="banner-editor-section-title">跳转配置</h3>
+        <div class="banner-editor-grid banner-editor-grid--two">
+          <el-form-item label="展示位置" prop="position">
+            <el-select v-model="form.position" placeholder="请选择展示位置">
+              <el-option
+                v-for="item in positionOptions"
+                :key="item.code"
+                :label="item.text"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="跳转类型">
+            <el-select v-model="form.linkType">
+              <el-option
+                v-for="item in linkTypeOptions"
+                :key="item.code"
+                :label="item.text"
+                :value="item.code"
+              />
+            </el-select>
+          </el-form-item>
         </div>
-      </el-form-item>
-      <div class="form-row">
-        <el-form-item label="展示位置" required>
-          <el-select v-model="form.position">
+        <el-form-item v-if="form.linkType === 'DRAMA'" label="跳转短剧" prop="linkValue">
+          <el-select v-model="form.linkValue" filterable placeholder="搜索短剧">
             <el-option
-              v-for="item in positionOptions"
-              :key="item.code"
-              :label="item.text"
-              :value="item.code"
+              v-for="item in dramas"
+              :key="item.id"
+              :label="`${item.title}（${item.statusText}）`"
+              :value="String(item.id)"
             />
           </el-select>
         </el-form-item>
-        <el-form-item label="跳转类型">
-          <el-select v-model="form.linkType">
-            <el-option
-              v-for="item in linkTypeOptions"
-              :key="item.code"
-              :label="item.text"
-              :value="item.code"
+        <el-form-item v-if="form.linkType === 'URL'" label="跳转地址" prop="linkValue">
+          <el-input v-model="form.linkValue" placeholder="https://..." />
+        </el-form-item>
+      </section>
+
+      <section class="banner-editor-section">
+        <h3 class="banner-editor-section-title">排序与状态</h3>
+        <div class="banner-editor-grid banner-editor-grid--two">
+          <el-form-item label="排序">
+            <el-input-number
+              v-model="form.sort"
+              class="banner-editor-number"
+              controls-position="right"
+              :min="0"
+              :max="999"
             />
-          </el-select>
-        </el-form-item>
-      </div>
-      <el-form-item v-if="form.linkType === 'DRAMA'" label="跳转短剧" required>
-        <el-select v-model="form.linkValue" filterable placeholder="搜索短剧">
-          <el-option
-            v-for="item in dramas"
-            :key="item.id"
-            :label="`${item.title}（${item.statusText}）`"
-            :value="String(item.id)"
-          />
-        </el-select>
-      </el-form-item>
-      <el-form-item v-if="form.linkType === 'URL'" label="跳转地址" required>
-        <el-input v-model="form.linkValue" placeholder="https://..." />
-      </el-form-item>
-      <div class="form-row">
-        <el-form-item label="排序">
-          <el-input-number v-model="form.sort" :min="0" :max="999" />
-        </el-form-item>
-        <el-form-item label="状态">
-          <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
-        </el-form-item>
-      </div>
+          </el-form-item>
+          <el-form-item label="状态">
+            <el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
+          </el-form-item>
+        </div>
+      </section>
     </el-form>
+
     <template #footer>
-      <el-button @click="dialogVisible = false">取消</el-button>
-      <el-button type="primary" :loading="saving" @click="saveBanner">保存</el-button>
+      <el-button :disabled="saving || uploadingImage" @click="dialogVisible = false">
+        取消
+      </el-button>
+      <el-button
+        type="primary"
+        :loading="saving"
+        :disabled="saving || uploadingImage"
+        @click="saveBanner"
+      >
+        保存
+      </el-button>
     </template>
   </el-dialog>
 </template>

src/views/contentManagement/DramaManagementView.vue

@@ -5,6 +5,7 @@ import { computed, nextTick, onMounted, reactive, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import {
   changeDramaStatusApi,
   createDramaApi,
@@ -28,7 +29,8 @@ const categories = ref([])
 
 const keyword = ref('')
 const statusFilter = ref(undefined)
-const categoryId = ref(undefined)
+const categoryIds = ref([])
+const dramaTypes = ref([])
 const hotFilter = ref(undefined)
 const pageIndex = ref(1)
 const pageSize = ref(10)
@@ -40,14 +42,20 @@ const coverPercent = ref(0)
 const coverError = ref('')
 const coverFileName = ref('')
 const editingId = ref(null)
+const editingCommentCount = ref(0)
+const editingLikeCount = ref(0)
 const formRef = ref()
 const form = reactive({
   title: '',
-  categoryId: undefined,
+  categoryIds: [],
+  dramaTypes: ['LIVE'],
   description: '',
   freeEpisodes: 3,
   unlockCoin: 0,
+  favoriteCount: 0,
+  heat: 0,
   isHot: false,
+  sort: 0,
   cover: ''
 })
 
@@ -56,13 +64,24 @@ const COVER_TYPES = ['image/jpeg', 'image/png', 'image/webp']
 
 const formRules = {
   title: [{ required: true, message: '请输入短剧名称', trigger: 'blur' }],
-  categoryId: [{ required: true, message: '请选择短剧类型', trigger: 'change' }]
+  categoryIds: [
+    { type: 'array', required: true, min: 1, message: '请至少选择一个类型', trigger: 'change' }
+  ],
+  dramaTypes: [
+    { type: 'array', required: true, min: 1, message: '请至少选择一个内容类型', trigger: 'change' }
+  ]
 }
 
 const coverDisplayName = computed(
   () => coverFileName.value || (form.cover ? coverBasename(form.cover) : '尚未选择封面')
 )
 
+const pageCoverPreviewList = computed(() => list.value.map((item) => item.cover).filter(Boolean))
+
+function coverPreviewIndex(row) {
+  return Math.max(0, pageCoverPreviewList.value.indexOf(row.cover))
+}
+
 const statusOptions = [
   { code: 'draft', text: '草稿' },
   { code: 'reviewing', text: '审核中' },
@@ -71,6 +90,11 @@ const statusOptions = [
   { code: 'offline', text: '已下线' }
 ]
 
+const dramaTypeOptions = [
+  { value: 'ANIME', label: '漫剧' },
+  { value: 'LIVE', label: '真人剧' }
+]
+
 const actionMeta = {
   submit: { label: '提交审核', done: '已提交审核' },
   approve: { label: '审核通过', done: '已通过审核' },
@@ -87,7 +111,8 @@ async function load() {
       pageSize: pageSize.value,
       keyword: keyword.value.trim() || undefined,
       status: statusFilter.value || undefined,
-      categoryId: categoryId.value,
+      categoryIds: categoryIds.value.length ? categoryIds.value : undefined,
+      dramaTypes: dramaTypes.value.length ? dramaTypes.value : undefined,
       isHot: hotFilter.value
     })
     list.value = res.data?.list || []
@@ -110,7 +135,8 @@ function search() {
 function resetFilters() {
   keyword.value = ''
   statusFilter.value = undefined
-  categoryId.value = undefined
+  categoryIds.value = []
+  dramaTypes.value = []
   hotFilter.value = undefined
   search()
 }
@@ -135,15 +161,21 @@ function openCreate() {
   editingId.value = null
   Object.assign(form, {
     title: '',
-    categoryId: undefined,
+    categoryIds: [],
+    dramaTypes: ['LIVE'],
     description: '',
     freeEpisodes: 3,
     unlockCoin: 0,
+    favoriteCount: 0,
+    heat: 0,
     isHot: false,
+    sort: 0,
     cover: ''
   })
   coverFileName.value = ''
   coverError.value = ''
+  editingCommentCount.value = 0
+  editingLikeCount.value = 0
   dialogVisible.value = true
   resetValidation()
 }
@@ -152,19 +184,55 @@ function openEdit(row) {
   editingId.value = row.id
   Object.assign(form, {
     title: row.title,
-    categoryId: row.categoryId || undefined,
+    categoryIds:
+      Array.isArray(row.categoryIds) && row.categoryIds.length
+        ? row.categoryIds
+        : row.categoryId
+          ? [row.categoryId]
+          : [],
+    dramaTypes:
+      Array.isArray(row.dramaTypes) && row.dramaTypes.length
+        ? row.dramaTypes
+        : row.dramaType
+          ? [row.dramaType]
+          : ['LIVE'],
     description: row.description || '',
     freeEpisodes: row.freeEpisodes ?? 3,
     unlockCoin: row.unlockCoin ?? 0,
+    favoriteCount: row.favoriteCount ?? 0,
+    heat: row.views ?? 0,
     isHot: !!row.isHot,
+    sort: row.sort ?? 0,
     cover: row.cover || ''
   })
   coverFileName.value = row.cover ? coverBasename(row.cover) : ''
   coverError.value = ''
+  editingCommentCount.value = row.commentCount ?? 0
+  editingLikeCount.value = row.likeCount ?? 0
   dialogVisible.value = true
   resetValidation()
 }
 
+function dramaTypeLabel(value) {
+  return dramaTypeOptions.find((item) => item.value === value)?.label || '真人剧'
+}
+
+function rowCategoryList(row) {
+  if (Array.isArray(row.categoryNames) && row.categoryNames.length) {
+    return row.categoryNames.filter(Boolean)
+  }
+  if (!row.genre) return []
+  return row.genre
+    .split('/')
+    .map((name) => name.trim())
+    .filter(Boolean)
+}
+
+function rowDramaTypes(row) {
+  if (Array.isArray(row.dramaTypes) && row.dramaTypes.length) return row.dramaTypes
+  return row.dramaType ? [row.dramaType] : []
+}
+
 async function saveDrama() {
   if (saving.value || uploadingCover.value) return
   try {
@@ -172,11 +240,13 @@ async function saveDrama() {
   } catch {
     return
   }
-  const category = categories.value.find((item) => item.id === form.categoryId)
+  const categoryNames = form.categoryIds
+    .map((id) => categories.value.find((item) => item.id === id)?.name)
+    .filter(Boolean)
   const payload = {
     ...form,
     title: form.title.trim(),
-    genre: category?.name || ''
+    genre: categoryNames.join(' / ')
   }
   saving.value = true
   try {
@@ -331,12 +401,30 @@ onMounted(async () => {
             :key="item.code"
             :label="item.text"
             :value="item.code" /></el-select
-        ><el-select v-model="categoryId" clearable placeholder="全部类型" @change="search"
+        ><el-select
+          v-model="categoryIds"
+          class="drama-multi-select"
+          multiple
+          clearable
+          placeholder="全部类型"
+          @change="search"
           ><el-option
             v-for="item in categories"
             :key="item.id"
             :label="item.name"
             :value="item.id" /></el-select
+        ><el-select
+          v-model="dramaTypes"
+          class="drama-multi-select"
+          multiple
+          clearable
+          placeholder="全部内容类型"
+          @change="search"
+          ><el-option
+            v-for="item in dramaTypeOptions"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value" /></el-select
         ><el-select v-model="hotFilter" clearable placeholder="全部热度" @change="search"
           ><el-option label="仅热门" :value="true" /><el-option
             label="非热门"
@@ -354,10 +442,15 @@ onMounted(async () => {
       <el-table-column label="短剧名称" min-width="220"
         ><template #default="{ row }"
           ><div class="drama-cell"
-            ><img v-if="row.cover" :src="row.cover" class="drama-cover-image" /><div
-              v-else
-              class="drama-cover"
-              >暂无封面</div
+            ><AppImage
+              v-if="row.cover"
+              :src="row.cover"
+              :preview-list="pageCoverPreviewList"
+              :initial-index="coverPreviewIndex(row)"
+              fit="cover"
+              class="drama-cover-image"
+              :alt="row.title"
+            /><div v-else class="drama-cover">暂无封面</div
             ><div
               ><b>{{ row.title }}</b></div
             ></div
@@ -370,13 +463,49 @@ onMounted(async () => {
           ><span v-else class="table-empty-text">—</span></template
         ></el-table-column
       >
-      <el-table-column prop="genre" label="类型" width="110" />
+      <el-table-column label="类型" min-width="200"
+        ><template #default="{ row }"
+          ><div class="tag-wrap"
+            ><el-tag v-for="name in rowCategoryList(row)" :key="name" type="info" effect="light">{{
+              name
+            }}</el-tag></div
+          ></template
+        >
+      </el-table-column>
+      <el-table-column label="内容类型" min-width="180"
+        ><template #default="{ row }"
+          ><div class="tag-wrap"
+            ><el-tag
+              v-for="type in rowDramaTypes(row)"
+              :key="type"
+              :type="type === 'ANIME' ? 'warning' : 'info'"
+              effect="light"
+              >{{ dramaTypeLabel(type) }}</el-tag
+            ></div
+          ></template
+        ></el-table-column
+      >
       <el-table-column label="集数" width="90"
         ><template #default="{ row }">{{ row.episodes }} 集</template></el-table-column
       >
-      <el-table-column label="播放量" width="110"
+      <el-table-column label="热度" width="110"
         ><template #default="{ row }">{{ formatCount(row.views) }}</template></el-table-column
       >
+      <el-table-column label="收藏" width="90"
+        ><template #default="{ row }">{{
+          formatCount(row.favoriteCount ?? 0)
+        }}</template></el-table-column
+      >
+      <el-table-column label="点赞" width="90"
+        ><template #default="{ row }">{{
+          formatCount(row.likeCount ?? 0)
+        }}</template></el-table-column
+      >
+      <el-table-column label="评论" width="90"
+        ><template #default="{ row }">{{
+          formatCount(row.commentCount ?? 0)
+        }}</template></el-table-column
+      >
       <el-table-column label="状态" width="110"
         ><template #default="{ row }"
           ><el-tag :class="['status-badge', statusClass(row.status)]" effect="light">{{
@@ -465,8 +594,14 @@ onMounted(async () => {
           <el-form-item label="短剧名称" prop="title">
             <el-input v-model="form.title" maxlength="80" placeholder="请输入短剧名称" />
           </el-form-item>
-          <el-form-item label="类型" prop="categoryId">
-            <el-select v-model="form.categoryId" placeholder="请选择类型">
+          <el-form-item label="类型" prop="categoryIds">
+            <el-select
+              v-model="form.categoryIds"
+              class="drama-multi-select"
+              multiple
+              filterable
+              placeholder="请选择类型"
+            >
               <el-option
                 v-for="item in categories"
                 :key="item.id"
@@ -475,6 +610,22 @@ onMounted(async () => {
               />
             </el-select>
           </el-form-item>
+          <el-form-item label="内容类型" prop="dramaTypes">
+            <el-select
+              v-model="form.dramaTypes"
+              class="drama-multi-select"
+              multiple
+              filterable
+              placeholder="请选择内容类型"
+            >
+              <el-option
+                v-for="item in dramaTypeOptions"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
         </div>
         <el-form-item label="简介">
           <el-input
@@ -510,9 +661,54 @@ onMounted(async () => {
             />
           </el-form-item>
         </div>
-        <el-form-item label="是否热门">
-          <el-switch v-model="form.isHot" />
-        </el-form-item>
+        <div class="editor-grid editor-grid--two">
+          <el-form-item label="是否热门">
+            <el-switch v-model="form.isHot" />
+          </el-form-item>
+          <el-form-item label="排序权重">
+            <el-input-number
+              v-model="form.sort"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :max="99999"
+              :precision="0"
+            />
+            <p class="readonly-stat-hint">数值越大越靠前，相同权重按 ID 倒序</p>
+          </el-form-item>
+        </div>
+      </section>
+
+      <section class="editor-section">
+        <h3 class="editor-section-title">互动数据</h3>
+        <div class="editor-grid editor-grid--two">
+          <el-form-item label="收藏数">
+            <el-input-number
+              v-model="form.favoriteCount"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :precision="0"
+            />
+          </el-form-item>
+          <el-form-item label="点赞数">
+            <div class="readonly-stat">{{ formatCount(editingLikeCount) }}</div>
+            <p class="readonly-stat-hint">全剧分集汇总，只读</p>
+          </el-form-item>
+          <el-form-item label="热度">
+            <el-input-number
+              v-model="form.heat"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :precision="0"
+            />
+          </el-form-item>
+          <el-form-item label="评论数">
+            <div class="readonly-stat">{{ formatCount(editingCommentCount) }}</div>
+            <p class="readonly-stat-hint">全剧汇总，实时统计，只读</p>
+          </el-form-item>
+        </div>
       </section>
 
       <section class="editor-section">
@@ -597,3 +793,32 @@ onMounted(async () => {
     </template>
   </el-dialog>
 </template>
+
+<style scoped>
+.drama-multi-select {
+  min-width: 220px;
+}
+
+.drama-multi-select :deep(.el-select__wrapper) {
+  height: auto;
+  min-height: 32px;
+  padding-top: 3px;
+  padding-bottom: 3px;
+}
+
+.drama-multi-select :deep(.el-select__selection) {
+  flex-wrap: wrap;
+  row-gap: 4px;
+}
+
+.drama-editor-form .drama-multi-select {
+  width: 100%;
+  min-width: 0;
+}
+
+.tag-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+</style>

src/views/contentManagement/EpisodeManagementView.vue

@@ -1,56 +1,38 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { computed, onMounted, ref } from 'vue'
 import { useRoute } from 'vue-router'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
 import { pageDramasApi } from '@/api/admin/drama'
-import {
-  createEpisodeApi,
-  deleteEpisodeApi,
-  listEpisodesApi,
-  sortEpisodesApi,
-  updateEpisodeApi
-} from '@/api/admin/episode'
+import { deleteEpisodeApi, listEpisodesApi, sortEpisodesApi } from '@/api/admin/episode'
 import { useRbac } from '@/stores/rbac'
 import { formatCount } from '@/utils/format'
 import { statusClass } from '@/utils/status'
-import { probeVideoDuration, uploadFile } from '@/utils/uploader'
+import { useI18n } from '@/hooks/web/useI18n'
+import BatchUploadDialog from './upload/BatchUploadDialog.vue'
+import EpisodeFormDialog from './upload/EpisodeFormDialog.vue'
+import { listPendingSessions } from './upload/uploadSessions'
 
 const route = useRoute()
 const { can } = useRbac()
+const { t } = useI18n()
 
 const loading = ref(false)
 const dramas = ref([])
 const episodes = ref([])
 const selectedDramaId = ref(undefined)
-
-const dialogVisible = ref(false)
-const saving = ref(false)
-const uploadingVideo = ref(false)
-const videoPercent = ref(0)
+const batchUploadVisible = ref(false)
 const previewVisible = ref(false)
 const previewEpisode = ref(null)
-const editingId = ref(null)
-const form = reactive({
-  number: 1,
-  title: '',
-  durationSec: 0,
-  videoUrl: '',
-  isFree: true,
-  unlockCoin: 0,
-  status: 'draft'
-})
-
-const statusOptions = [
-  { code: 'draft', text: '草稿' },
-  { code: 'approved', text: '待发布' },
-  { code: 'published', text: '已上线' },
-  { code: 'offline', text: '已下线' }
-]
+const formDialogRef = 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))
+)
 
 async function loadDramas() {
   const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
@@ -82,80 +64,21 @@ function nextNumber() {
   return episodes.value.reduce((max, item) => Math.max(max, item.number || 0), 0) + 1
 }
 
+function openBatchUpload() {
+  if (!selectedDramaId.value) return
+  batchUploadVisible.value = true
+}
+
+async function onBatchEpisodesCreated() {
+  await loadEpisodes()
+}
+
 function openCreate() {
-  editingId.value = null
-  Object.assign(form, {
-    number: nextNumber(),
-    title: '',
-    durationSec: 0,
-    videoUrl: '',
-    isFree: true,
-    unlockCoin: selectedDrama.value?.unlockCoin ?? 0,
-    status: 'draft'
-  })
-  dialogVisible.value = true
+  formDialogRef.value?.openCreate()
 }
 
 function openEdit(row) {
-  editingId.value = row.id
-  Object.assign(form, {
-    number: row.number,
-    title: row.title,
-    durationSec: row.durationSec || 0,
-    videoUrl: row.videoUrl || '',
-    isFree: !!row.isFree,
-    unlockCoin: row.unlockCoin || 0,
-    status: row.status
-  })
-  dialogVisible.value = true
-}
-
-async function saveEpisode() {
-  if (!form.title.trim()) return ElMessage.warning('请填写剧集标题')
-  if (!form.number || form.number < 1) return ElMessage.warning('请填写正确的集号')
-  const payload = {
-    dramaId: selectedDramaId.value,
-    number: form.number,
-    title: form.title.trim(),
-    durationSec: form.durationSec || 0,
-    videoUrl: form.videoUrl.trim(),
-    isFree: form.isFree,
-    unlockCoin: form.isFree ? 0 : form.unlockCoin || 0,
-    status: form.status
-  }
-  saving.value = true
-  try {
-    if (editingId.value) {
-      await updateEpisodeApi(editingId.value, payload)
-      ElMessage.success('剧集已更新')
-    } else {
-      await createEpisodeApi(payload)
-      ElMessage.success('剧集已创建')
-    }
-    dialogVisible.value = false
-    await loadEpisodes()
-  } finally {
-    saving.value = false
-  }
-}
-
-/** 视频分片上传：先探测时长，再交给上传器，完成后回填地址与时长。 */
-async function uploadVideo(options) {
-  uploadingVideo.value = true
-  videoPercent.value = 0
-  try {
-    const duration = await probeVideoDuration(options.file)
-    const asset = await uploadFile(options.file, {
-      bizType: 'EPISODE',
-      durationSec: duration,
-      onProgress: (percent) => (videoPercent.value = percent)
-    })
-    form.videoUrl = asset.url
-    if (duration > 0) form.durationSec = duration
-    ElMessage.success('视频已上传')
-  } finally {
-    uploadingVideo.value = false
-  }
+  formDialogRef.value?.openEdit(row)
 }
 
 async function confirmDelete(row) {
@@ -213,11 +136,20 @@ async function move(index, offset) {
 
 async function onDramaChange() {
   await loadEpisodes()
+  openBatchIfPendingSessions()
+}
+
+/** 进入页面或切换短剧时，若有 24h 内未完成上传则打开批量上传弹窗以提示续传。 */
+function openBatchIfPendingSessions() {
+  if (!selectedDramaId.value || !can('episode:upload')) return
+  const pending = listPendingSessions(String(selectedDramaId.value))
+  if (pending.length) batchUploadVisible.value = true
 }
 
 onMounted(async () => {
   await loadDramas()
   await loadEpisodes()
+  openBatchIfPendingSessions()
 })
 </script>
 
@@ -226,26 +158,47 @@ onMounted(async () => {
     ><div
       ><div class="eyebrow">内容管理</div><h1>剧集管理</h1
       ><p>为短剧维护剧集信息、视频地址与播放顺序。</p></div
-    ><el-button
-      v-if="can('episode:upload')"
-      type="primary"
-      class="primary-button"
-      :disabled="!selectedDramaId"
-      @click="openCreate"
-      ><AppIcon :icon="AppIcons.add" />新增剧集</el-button
+    ><div class="page-heading-actions">
+      <el-button v-if="can('episode:upload')" :disabled="!selectedDramaId" @click="openBatchUpload"
+        ><AppIcon :icon="AppIcons.upload" />{{ t('episodeBatch.entry') }}</el-button
+      ><el-button
+        v-if="can('episode:upload')"
+        type="primary"
+        class="primary-button"
+        :disabled="!selectedDramaId"
+        @click="openCreate"
+        ><AppIcon :icon="AppIcons.add" />新增剧集</el-button
+      ></div
     ></div
   >
   <section class="panel episode-panel">
-    <div class="episode-context"
-      ><div class="episode-context-copy"
-        ><span>选择短剧</span><b>{{ selectedDrama?.title || '暂无短剧' }}</b></div
-      ><el-select v-model="selectedDramaId" class="drama-select" @change="onDramaChange"
-        ><el-option
-          v-for="item in dramas"
-          :key="item.id"
-          :label="`${item.title}（${item.episodes} 集）`"
-          :value="item.id" /></el-select
-    ></div>
+    <div class="episode-context">
+      <div class="episode-context-info">
+        <span class="episode-context-label">当前短剧</span>
+        <b class="episode-context-title">{{ selectedDrama?.title || '暂无短剧' }}</b>
+        <small class="episode-context-count"
+          >共 {{ selectedDrama?.episodes ?? episodes.length }} 集 · 收藏
+          {{ formatCount(selectedDrama?.favoriteCount ?? 0) }} · 热度
+          {{ formatCount(selectedDrama?.views ?? 0) }}</small
+        >
+      </div>
+      <div class="episode-switcher">
+        <span class="episode-context-label">切换短剧</span>
+        <el-select
+          v-model="selectedDramaId"
+          class="drama-select"
+          placeholder="请选择短剧"
+          @change="onDramaChange"
+        >
+          <el-option
+            v-for="item in dramas"
+            :key="item.id"
+            :label="`${item.title}（${item.episodes} 集）`"
+            :value="item.id"
+          />
+        </el-select>
+      </div>
+    </div>
     <div class="episode-toolbar"
       ><div
         ><h2>剧集列表（{{ episodes.length }}）</h2><p>按列表顺序播放</p></div
@@ -299,6 +252,24 @@ onMounted(async () => {
       <el-table-column label="播放量" width="120"
         ><template #default="{ row }">{{ formatCount(row.views) }}</template></el-table-column
       >
+      <el-table-column label="点赞（本集）" width="120"
+        ><template #default="{ row }">{{
+          formatCount(row.likeCount ?? 0)
+        }}</template></el-table-column
+      >
+      <el-table-column label="评论（本集）" width="120"
+        ><template #default="{ row }">{{
+          formatCount(row.commentCount ?? 0)
+        }}</template></el-table-column
+      >
+      <el-table-column label="所属剧收藏" width="120"
+        ><template #default="{ row }">{{
+          formatCount(row.favoriteCount ?? 0)
+        }}</template></el-table-column
+      >
+      <el-table-column label="所属剧热度" width="120"
+        ><template #default="{ row }">{{ formatCount(row.heat ?? 0) }}</template></el-table-column
+      >
       <el-table-column label="状态" width="110"
         ><template #default="{ row }"
           ><el-tag :class="['status-badge', statusClass(row.status)]" effect="light">{{
@@ -339,53 +310,12 @@ onMounted(async () => {
       >
     </el-table>
   </section>
-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑剧集' : '新增剧集'" width="560px"
-    ><el-form label-position="top"
-      ><div class="form-row"
-        ><el-form-item label="集号" required
-          ><el-input-number v-model="form.number" :min="1" :max="999" /></el-form-item
-        ><el-form-item label="时长（秒）"
-          ><el-input-number v-model="form.durationSec" :min="0" :max="9999" /></el-form-item></div
-      ><el-form-item label="剧集标题" required
-        ><el-input v-model="form.title" placeholder="例如：命运的相遇" /></el-form-item
-      ><el-form-item label="视频文件"
-        ><div class="video-field"
-          ><div class="video-field-actions"
-            ><el-upload
-              drag
-              :show-file-list="false"
-              accept="video/*"
-              :http-request="uploadVideo"
-              :disabled="uploadingVideo"
-              ><div class="upload-copy"
-                >拖放视频文件到此处，或点击选择<br /><small>支持 MP4、MOV，自动分片上传</small></div
-              ></el-upload
-            ><p v-if="uploadingVideo" class="selected-file">上传中 {{ videoPercent }}%</p
-            ><p v-else-if="form.videoUrl" class="selected-file">视频已上传</p
-            ><el-input v-model="form.videoUrl" placeholder="也可以直接填写视频地址" /></div
-          ><video
-            v-if="form.videoUrl"
-            :src="form.videoUrl"
-            controls
-            class="form-video-preview"
-          ></video></div></el-form-item
-      ><div class="form-row"
-        ><el-form-item label="是否免费"><el-switch v-model="form.isFree" /></el-form-item
-        ><el-form-item v-if="!form.isFree" label="解锁金币"
-          ><el-input-number v-model="form.unlockCoin" :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
-    ></el-form>
-    <template #footer
-      ><el-button @click="dialogVisible = false">取消</el-button
-      ><el-button type="primary" :loading="saving" @click="saveEpisode">保存</el-button></template
-    ></el-dialog
-  >
+  <EpisodeFormDialog
+    ref="formDialogRef"
+    :drama-options="selectedDrama"
+    :next-number="batchNextNumber"
+    @saved="loadEpisodes"
+  />
   <el-dialog
     v-model="previewVisible"
     :title="`预览：第 ${previewEpisode?.number ?? ''} 集 ${previewEpisode?.title ?? ''}`"
@@ -401,4 +331,14 @@ onMounted(async () => {
     ></video>
     <el-empty v-else description="该剧集还没有上传视频" />
   </el-dialog>
+  <BatchUploadDialog
+    v-if="selectedDramaId"
+    v-model="batchUploadVisible"
+    :drama-id="selectedDramaId"
+    :next-episode-number="batchNextNumber"
+    :default-unlock-coin="selectedDrama?.unlockCoin ?? 0"
+    :existing-numbers="existingEpisodeNumbers"
+    @refreshed="loadEpisodes"
+    @created="onBatchEpisodesCreated"
+  />
 </template>

src/views/contentManagement/upload/BatchUploadDialog.vue

@@ -0,0 +1,316 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集批量上传弹窗：多选、队列、总进度、续传与批量建集入口 -->
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { AppIcons } from '@/constants/icons'
+import { useI18n } from '@/hooks/web/useI18n'
+import CreateEpisodesDialog from './CreateEpisodesDialog.vue'
+import UploadTaskRow from './UploadTaskRow.vue'
+import { useUploadQueue } from './useUploadQueue'
+import { MAX_VIDEO_SIZE, VIDEO_ACCEPT_ATTR, VIDEO_EXTENSIONS } from './videoLimit'
+import type { UploadSessionRecord } from './uploadSessions'
+
+const props = defineProps<{
+  modelValue: boolean
+  dramaId: string | number
+  nextEpisodeNumber: number
+  defaultUnlockCoin: number
+  existingNumbers: number[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  created: []
+  refreshed: []
+}>()
+
+const { t } = useI18n()
+
+const visible = computed({
+  get: () => props.modelValue,
+  set: (value: boolean) => emit('update:modelValue', value)
+})
+
+const dramaKey = computed(() => String(props.dramaId || ''))
+const fileInputRef = ref<HTMLInputElement | null>(null)
+const resumeFileInputRef = ref<HTMLInputElement | null>(null)
+const rejectedNames = ref<string[]>([])
+const pendingSessions = ref<UploadSessionRecord[]>([])
+const createVisible = ref(false)
+const resumePromptShown = ref(false)
+
+const queue = useUploadQueue({ getDramaId: () => dramaKey.value })
+
+watch(
+  () => props.dramaId,
+  () => {
+    queue.clear()
+    resumePromptShown.value = false
+  }
+)
+
+const canCreateEpisodes = computed(() => queue.doneItems.value.length > 0)
+
+function extensionOf(fileName: string): string {
+  const parts = String(fileName || '').split('.')
+  return (parts.pop() || '').toLowerCase()
+}
+
+function validateFile(file: File): string {
+  if (!VIDEO_EXTENSIONS.includes(extensionOf(file.name))) {
+    return t('episodeBatch.invalidType')
+  }
+  if (file.size > MAX_VIDEO_SIZE) {
+    return t('episodeBatch.oversize')
+  }
+  return ''
+}
+
+function onPickFiles(event: Event): void {
+  const input = event.target as HTMLInputElement
+  const files = Array.from(input.files || [])
+  input.value = ''
+  if (!files.length) return
+  const accepted: File[] = []
+  const rejected: string[] = []
+  for (const file of files) {
+    const reason = validateFile(file)
+    if (reason) {
+      rejected.push(`${file.name}: ${reason}`)
+    } else {
+      accepted.push(file)
+    }
+  }
+  rejectedNames.value = rejected
+  if (!accepted.length) return
+  queue.enqueue(accepted)
+  queue.start()
+}
+
+function openFilePicker(): void {
+  fileInputRef.value?.click()
+}
+
+function onBeforeUnload(event: BeforeUnloadEvent): void {
+  if (!queue.hasActiveUpload.value) return
+  event.preventDefault()
+  event.returnValue = ''
+}
+
+watch(
+  () => queue.hasActiveUpload.value,
+  (active) => {
+    if (active) {
+      window.addEventListener('beforeunload', onBeforeUnload)
+    } else {
+      window.removeEventListener('beforeunload', onBeforeUnload)
+    }
+  }
+)
+
+onBeforeUnmount(() => {
+  window.removeEventListener('beforeunload', onBeforeUnload)
+})
+
+async function promptResumeIfNeeded(): Promise<void> {
+  if (resumePromptShown.value || !dramaKey.value) return
+  const sessions = queue.getPendingSessions()
+  if (!sessions.length) return
+  resumePromptShown.value = true
+  pendingSessions.value = sessions
+  try {
+    await ElMessageBox.confirm(
+      t('episodeBatch.resumeConfirm', { count: sessions.length }),
+      t('episodeBatch.resumeTitle'),
+      {
+        confirmButtonText: t('episodeBatch.resumeYes'),
+        cancelButtonText: t('episodeBatch.resumeNo'),
+        type: 'info'
+      }
+    )
+    resumeFileInputRef.value?.click()
+  } catch {
+    queue.abandonSessions(sessions)
+    pendingSessions.value = []
+    ElMessage.info(t('episodeBatch.resumeAbandoned'))
+  }
+}
+
+async function onResumeFiles(event: Event): Promise<void> {
+  const input = event.target as HTMLInputElement
+  const files = Array.from(input.files || [])
+  input.value = ''
+  const sessions = pendingSessions.value
+  if (!files.length || !sessions.length) return
+  const { matched, unmatched } = await queue.resumeFromSessions(sessions, files)
+  pendingSessions.value = []
+  if (unmatched.length) {
+    ElMessage.warning(t('episodeBatch.resumeUnmatched', { count: unmatched.length }))
+  }
+  if (matched.length) {
+    ElMessage.success(t('episodeBatch.resumeMatched', { count: matched.length }))
+    queue.start()
+  }
+}
+
+function beforeClose(done: () => void): void {
+  if (!queue.hasActiveUpload.value) {
+    done()
+    return
+  }
+  ElMessageBox.confirm(t('episodeBatch.closeWhileUploading'), t('common.reminder'), {
+    type: 'warning',
+    confirmButtonText: t('common.ok'),
+    cancelButtonText: t('common.cancel')
+  })
+    .then(() => {
+      queue.pause()
+      done()
+    })
+    .catch(() => undefined)
+}
+
+watch(visible, (open) => {
+  if (open) {
+    void promptResumeIfNeeded()
+  }
+})
+
+function openCreateDialog(): void {
+  if (!canCreateEpisodes.value) return
+  createVisible.value = true
+}
+
+function onEpisodesCreated(): void {
+  createVisible.value = false
+  emit('created')
+  visible.value = false
+  queue.clear()
+}
+</script>
+
+<template>
+  <el-dialog
+    v-model="visible"
+    :title="t('episodeBatch.title')"
+    width="720px"
+    class="batch-upload-dialog"
+    :close-on-click-modal="false"
+    :before-close="beforeClose"
+  >
+    <input
+      ref="fileInputRef"
+      type="file"
+      multiple
+      hidden
+      :accept="VIDEO_ACCEPT_ATTR"
+      @change="onPickFiles"
+    />
+    <input
+      ref="resumeFileInputRef"
+      type="file"
+      multiple
+      hidden
+      :accept="VIDEO_ACCEPT_ATTR"
+      @change="onResumeFiles"
+    />
+
+    <div class="batch-upload-toolbar">
+      <el-button type="primary" @click="openFilePicker">
+        <AppIcon :icon="AppIcons.upload" />
+        {{ t('episodeBatch.selectFiles') }}
+      </el-button>
+      <el-button :disabled="!queue.items.value.length" @click="queue.pause()">
+        {{ t('episodeBatch.pause') }}
+      </el-button>
+      <el-button :disabled="!queue.items.value.length" @click="queue.start()">
+        {{ t('episodeBatch.resume') }}
+      </el-button>
+      <el-button
+        :disabled="!queue.items.value.some((item) => item.status === 'failed')"
+        @click="queue.retryAll()"
+      >
+        {{ t('episodeBatch.retryAll') }}
+      </el-button>
+    </div>
+
+    <p class="batch-upload-hint">{{ t('episodeBatch.hint') }}</p>
+
+    <div v-if="rejectedNames.length" class="batch-upload-rejected">
+      <p v-for="name in rejectedNames" :key="name">{{ name }}</p>
+    </div>
+
+    <div v-if="queue.items.value.length" class="batch-upload-overall">
+      <span>{{ t('episodeBatch.overallProgress') }}</span>
+      <el-progress :percentage="queue.overallPercent.value" :stroke-width="12" />
+    </div>
+
+    <div class="batch-upload-list">
+      <UploadTaskRow
+        v-for="item in queue.items.value"
+        :key="item.id"
+        :item="item"
+        @retry="queue.retry"
+        @remove="queue.remove"
+      />
+      <el-empty v-if="!queue.items.value.length" :description="t('episodeBatch.empty')" />
+    </div>
+
+    <template #footer>
+      <el-button @click="visible = false">{{ t('common.cancel') }}</el-button>
+      <el-button type="primary" :disabled="!canCreateEpisodes" @click="openCreateDialog">
+        {{ t('episodeBatch.createEpisodes') }}
+      </el-button>
+    </template>
+  </el-dialog>
+
+  <CreateEpisodesDialog
+    v-model="createVisible"
+    :drama-id="dramaId"
+    :done-items="queue.doneItems.value"
+    :next-episode-number="nextEpisodeNumber"
+    :default-unlock-coin="defaultUnlockCoin"
+    :existing-numbers="existingNumbers"
+    @settled="emit('refreshed')"
+    @created="onEpisodesCreated"
+  />
+</template>
+
+<style scoped>
+.batch-upload-toolbar {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.batch-upload-hint {
+  margin: 0 0 12px;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+}
+
+.batch-upload-rejected {
+  margin-bottom: 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--el-color-danger) 8%, transparent);
+  color: var(--el-color-danger);
+  font-size: 12px;
+}
+
+.batch-upload-rejected p {
+  margin: 0;
+}
+
+.batch-upload-overall {
+  margin-bottom: 12px;
+}
+
+.batch-upload-list {
+  max-height: 360px;
+  overflow: auto;
+}
+</style>

src/views/contentManagement/upload/CreateEpisodesDialog.vue

@@ -0,0 +1,241 @@
+<!-- Author: fruit.com.cn -->
+<!-- 批量创建分集：自然排序预填集号与标题，冲突标红，失败可重试 -->
+
+<script setup lang="ts">
+import { ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { createEpisodeApi } from '@/api/admin/episode'
+import { useI18n } from '@/hooks/web/useI18n'
+import type { UploadQueueItem } from './useUploadQueue'
+
+const props = defineProps<{
+  modelValue: boolean
+  dramaId: string | number
+  doneItems: UploadQueueItem[]
+  nextEpisodeNumber: number
+  defaultUnlockCoin: number
+  existingNumbers: number[]
+}>()
+
+const emit = defineEmits<{
+  'update:modelValue': [value: boolean]
+  settled: []
+  created: []
+}>()
+
+const { t } = useI18n()
+
+interface EpisodeDraft {
+  key: string
+  sourceName: string
+  number: number
+  title: string
+  isFree: boolean
+  videoUrl: string
+  durationSec: number
+  saved: boolean
+  error: string
+}
+
+const DRAFT_STATUS = 'draft'
+const rows = ref<EpisodeDraft[]>([])
+const submitting = ref(false)
+
+function baseName(fileName: string): string {
+  const dot = fileName.lastIndexOf('.')
+  if (dot <= 0) return fileName
+  return fileName.slice(0, dot)
+}
+
+function compareNatural(left: string, right: string): number {
+  return left.localeCompare(right, undefined, { numeric: true, sensitivity: 'base' })
+}
+
+function buildRows(): void {
+  const sorted = [...props.doneItems].sort((left, right) =>
+    compareNatural(baseName(left.fileName), baseName(right.fileName))
+  )
+  let number = props.nextEpisodeNumber
+  rows.value = sorted.map((item) => ({
+    key: item.id,
+    sourceName: item.fileName,
+    number: number++,
+    title: baseName(item.fileName),
+    isFree: true,
+    videoUrl: item.url || '',
+    durationSec: item.durationSec || 0,
+    saved: false,
+    error: ''
+  }))
+}
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) buildRows()
+  }
+)
+
+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')
+}
+
+async function createOne(row: EpisodeDraft): Promise<void> {
+  if (!row.videoUrl) {
+    row.error = t('episodeBatch.missingVideo')
+    return
+  }
+  try {
+    await createEpisodeApi({
+      dramaId: props.dramaId as unknown as number,
+      number: row.number,
+      title: row.title.trim(),
+      durationSec: row.durationSec,
+      videoUrl: row.videoUrl,
+      isFree: row.isFree,
+      unlockCoin: row.isFree ? 0 : props.defaultUnlockCoin,
+      status: DRAFT_STATUS
+    })
+    row.saved = true
+    row.error = ''
+  } catch (error) {
+    row.error = errorText(error)
+  }
+}
+
+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) {
+      if (!row.saved) await createOne(row)
+    }
+  } finally {
+    submitting.value = false
+  }
+  emit('settled')
+  if (rows.value.every((row) => row.saved)) {
+    ElMessage.success(t('episodeBatch.createAllSuccess'))
+    emit('created')
+    return
+  }
+  ElMessage.warning(t('episodeBatch.createPartial'))
+}
+
+function closeDialog(): void {
+  emit('update:modelValue', false)
+}
+
+function hasFailed(): boolean {
+  return rows.value.some((row) => !row.saved && !!row.error)
+}
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    :title="t('episodeBatch.createTitle')"
+    width="760px"
+    :close-on-click-modal="false"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <div class="create-episode-head">
+      <span>{{ t('episodeBatch.colSource') }}</span>
+      <span>{{ t('episodeBatch.colNumber') }}</span>
+      <span>{{ t('episodeBatch.colTitle') }}</span>
+      <span>{{ t('episodeBatch.colFree') }}</span>
+      <span>{{ t('episodeBatch.colResult') }}</span>
+    </div>
+    <div class="create-episode-list">
+      <div
+        v-for="row in rows"
+        :key="row.key"
+        class="create-episode-row"
+        :class="{ 'is-conflict': conflictOf(row), 'is-saved': row.saved }"
+      >
+        <b class="create-episode-source" :title="row.sourceName">{{ row.sourceName }}</b>
+        <el-input-number
+          v-model="row.number"
+          :min="1"
+          :max="999"
+          :disabled="row.saved"
+          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 || (conflictOf(row) ? t('episodeBatch.numberConflict') : '')
+          }}
+        </span>
+      </div>
+    </div>
+    <template #footer>
+      <el-button @click="closeDialog">{{ t('common.cancel') }}</el-button>
+      <el-button type="primary" :loading="submitting" @click="submit">
+        {{ hasFailed() ? t('episodeBatch.retryFailed') : t('episodeBatch.submitCreate') }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.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);
+  gap: 8px;
+  align-items: center;
+}
+
+.create-episode-head {
+  margin-bottom: 8px;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.create-episode-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 420px;
+  overflow: auto;
+}
+
+.create-episode-source {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.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);
+}
+</style>

src/views/contentManagement/upload/EpisodeFormDialog.vue

@@ -0,0 +1,280 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集新建/编辑弹窗：表单校验、单集视频上传与保存 -->
+
+<script setup>
+import { nextTick, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import { createEpisodeApi, updateEpisodeApi } from '@/api/admin/episode'
+import { formatCount } from '@/utils/format'
+import EpisodeVideoUploader from './EpisodeVideoUploader.vue'
+
+const props = defineProps({
+  dramaOptions: { type: Object, default: null },
+  nextNumber: { type: Number, default: 1 },
+  row: { type: Object, default: null }
+})
+
+const emit = defineEmits(['saved'])
+
+const dialogVisible = ref(false)
+const saving = ref(false)
+const uploadingVideo = ref(false)
+const videoFileName = ref('')
+const editingId = ref(null)
+const editingCommentCount = ref(0)
+const formRef = ref()
+const uploaderRef = ref()
+
+const form = reactive({
+  number: 1,
+  title: '',
+  durationSec: 0,
+  videoUrl: '',
+  isFree: true,
+  unlockCoin: 0,
+  likeCount: 0,
+  status: 'draft'
+})
+
+const statusOptions = [
+  { code: 'draft', text: '草稿' },
+  { code: 'approved', text: '待发布' },
+  { code: 'published', text: '已上线' },
+  { code: 'offline', text: '已下线' }
+]
+
+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'
+    }
+  ]
+}
+
+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()
+}
+
+function openCreate() {
+  editingId.value = null
+  Object.assign(form, {
+    number: props.nextNumber,
+    title: '',
+    durationSec: 0,
+    videoUrl: '',
+    isFree: true,
+    unlockCoin: props.dramaOptions?.unlockCoin ?? 0,
+    likeCount: 0,
+    status: 'draft'
+  })
+  videoFileName.value = ''
+  uploaderRef.value?.clearError()
+  editingCommentCount.value = 0
+  dialogVisible.value = true
+  resetValidation()
+}
+
+function openEdit(row) {
+  const target = row || props.row
+  if (!target) return
+  editingId.value = target.id
+  Object.assign(form, {
+    number: target.number,
+    title: target.title,
+    durationSec: target.durationSec || 0,
+    videoUrl: target.videoUrl || '',
+    isFree: !!target.isFree,
+    unlockCoin: target.unlockCoin || 0,
+    likeCount: target.likeCount ?? 0,
+    status: target.status
+  })
+  videoFileName.value = target.videoUrl ? episodeBasename(target.videoUrl) : ''
+  uploaderRef.value?.clearError()
+  editingCommentCount.value = target.commentCount ?? 0
+  dialogVisible.value = true
+  resetValidation()
+}
+
+async function saveEpisode() {
+  if (saving.value || uploadingVideo.value) return
+  try {
+    await formRef.value?.validate()
+  } catch {
+    return
+  }
+  const dramaId = props.dramaOptions?.id
+  if (!dramaId) return
+  const payload = {
+    dramaId,
+    number: form.number,
+    title: form.title.trim(),
+    durationSec: form.durationSec || 0,
+    videoUrl: form.videoUrl.trim(),
+    isFree: form.isFree,
+    unlockCoin: form.isFree ? 0 : form.unlockCoin || 0,
+    likeCount: form.likeCount,
+    status: form.status
+  }
+  saving.value = true
+  try {
+    if (editingId.value) {
+      await updateEpisodeApi(editingId.value, payload)
+      ElMessage.success('剧集已更新')
+    } else {
+      await createEpisodeApi(payload)
+      ElMessage.success('剧集已创建')
+    }
+    dialogVisible.value = false
+    emit('saved')
+  } finally {
+    saving.value = false
+  }
+}
+
+function beforeDialogClose(done) {
+  if (saving.value || uploadingVideo.value) {
+    ElMessage.warning(saving.value ? '正在保存，请稍候' : '视频正在上传，请稍候')
+    return
+  }
+  done()
+}
+
+defineExpose({ openCreate, openEdit })
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="editingId ? '编辑剧集' : '新增剧集'"
+    width="680px"
+    class="episode-editor-dialog"
+    :close-on-click-modal="false"
+    :before-close="beforeDialogClose"
+  >
+    <el-form
+      ref="formRef"
+      :model="form"
+      :rules="formRules"
+      label-position="top"
+      class="episode-editor-form"
+    >
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">基础信息</h3>
+        <div class="episode-editor-grid episode-editor-grid--two">
+          <el-form-item label="集号" prop="number">
+            <el-input-number
+              v-model="form.number"
+              class="episode-editor-number"
+              controls-position="right"
+              :min="1"
+              :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">
+          <EpisodeVideoUploader
+            ref="uploaderRef"
+            v-model:video-url="form.videoUrl"
+            v-model:duration-sec="form.durationSec"
+            v-model:file-name="videoFileName"
+            v-model:uploading="uploadingVideo"
+            @change="resetValidation"
+          />
+        </el-form-item>
+      </section>
+
+      <section class="episode-editor-section">
+        <h3 class="episode-editor-section-title">互动数据</h3>
+        <div class="episode-editor-grid episode-editor-grid--two">
+          <el-form-item label="本集点赞数">
+            <el-input-number
+              v-model="form.likeCount"
+              class="episode-editor-number"
+              controls-position="right"
+              :min="0"
+              :precision="0"
+            />
+          </el-form-item>
+          <el-form-item label="本集评论数">
+            <div class="readonly-stat">{{ formatCount(editingCommentCount) }}</div>
+            <p class="readonly-stat-hint">按集实时统计，不可编辑</p>
+          </el-form-item>
+        </div>
+      </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>
+      </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>
+</template>

src/views/contentManagement/upload/EpisodeVideoUploader.vue

@@ -0,0 +1,172 @@
+<!-- Author: fruit.com.cn -->
+<!-- 单集视频上传：格式/大小校验、分片上传、预览与移除 -->
+
+<script setup>
+import { computed, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import { AppIcons } from '@/constants/icons'
+import { useI18n } from '@/hooks/web/useI18n'
+import { probeVideoDuration, uploadFile } from '@/utils/uploader'
+import { MAX_VIDEO_SIZE, VIDEO_ACCEPT_ATTR, VIDEO_EXTENSIONS } from './videoLimit'
+
+const props = defineProps({
+  videoUrl: { type: String, default: '' },
+  durationSec: { type: Number, default: 0 },
+  fileName: { type: String, default: '' }
+})
+
+const emit = defineEmits([
+  'update:videoUrl',
+  'update:durationSec',
+  'update:fileName',
+  'update:uploading',
+  'change'
+])
+
+const { t } = useI18n()
+
+const uploadingVideo = ref(false)
+const videoPercent = ref(0)
+const videoError = ref('')
+
+const videoDisplayName = computed(
+  () => props.fileName || (props.videoUrl ? episodeBasename(props.videoUrl) : '尚未选择视频')
+)
+
+watch(uploadingVideo, (value) => emit('update:uploading', value))
+
+function episodeBasename(path) {
+  if (!path) return ''
+  const clean = path.split('?')[0].split('#')[0]
+  return decodeURIComponent(clean.split('/').pop() || clean)
+}
+
+function clearError() {
+  videoError.value = ''
+}
+
+function beforeVideoUpload(file) {
+  videoError.value = ''
+  const extension = String(file.name || '')
+    .split('.')
+    .pop()
+    ?.toLowerCase()
+  if (!VIDEO_EXTENSIONS.includes(extension)) {
+    videoError.value = t('episodeBatch.invalidType')
+    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, {
+      bizType: 'EPISODE',
+      durationSec: duration,
+      onProgress: (percent) => (videoPercent.value = percent)
+    })
+    emit('update:videoUrl', asset.url)
+    emit('update:fileName', options.file.name)
+    if (duration > 0) emit('update:durationSec', duration)
+    emit('change')
+    ElMessage.success('视频已上传')
+  } catch {
+    videoError.value = '视频上传失败，请检查网络后重试'
+  } finally {
+    uploadingVideo.value = false
+  }
+}
+
+function removeVideo() {
+  if (uploadingVideo.value) return
+  emit('update:videoUrl', '')
+  emit('update:fileName', '')
+  videoError.value = ''
+  emit('change')
+}
+
+defineExpose({ clearError, uploadingVideo })
+</script>
+
+<template>
+  <div class="episode-video-editor">
+    <div class="episode-video-preview-card">
+      <video
+        v-if="videoUrl"
+        :src="videoUrl"
+        controls
+        preload="metadata"
+        class="episode-editor-video"
+      ></video>
+      <el-upload
+        v-else
+        drag
+        class="episode-video-empty-upload"
+        :show-file-list="false"
+        :accept="VIDEO_ACCEPT_ATTR"
+        :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、MKV、WEBM</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="videoUrl ? 'success' : 'info'" effect="light">
+          {{ videoUrl ? '已上传' : '未上传' }}
+        </el-tag>
+        <span class="episode-video-filename" :title="videoDisplayName">
+          {{ videoDisplayName }}
+        </span>
+      </div>
+      <p class="episode-video-hint">{{ t('episodeBatch.hint') }}</p>
+      <el-alert v-if="videoError" :title="videoError" type="error" :closable="false" show-icon />
+      <div class="episode-video-actions">
+        <el-upload
+          v-if="videoUrl"
+          :show-file-list="false"
+          :accept="VIDEO_ACCEPT_ATTR"
+          :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="videoUrl" type="danger" :disabled="uploadingVideo" @click="removeVideo">
+          移除
+        </el-button>
+        <a
+          v-if="videoUrl"
+          class="episode-video-link"
+          :href="videoUrl"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          查看视频
+        </a>
+      </div>
+    </div>
+  </div>
+</template>

src/views/contentManagement/upload/UploadTaskRow.vue

@@ -0,0 +1,119 @@
+<!-- Author: fruit.com.cn -->
+<!-- 批量上传队列单行：文件名、大小、进度、状态与操作 -->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { useI18n } from '@/hooks/web/useI18n'
+import type { UploadQueueItem } from './useUploadQueue'
+
+const props = defineProps<{
+  item: UploadQueueItem
+}>()
+
+const emit = defineEmits<{
+  retry: [id: string]
+  remove: [id: string]
+}>()
+
+const { t } = useI18n()
+
+const BYTES_PER_KB = 1024
+const BYTES_PER_MB = 1024 * 1024
+
+const sizeLabel = computed(() => {
+  const size = props.item.fileSize
+  if (size >= BYTES_PER_MB) {
+    return `${(size / BYTES_PER_MB).toFixed(1)} MB`
+  }
+  return `${Math.max(1, Math.round(size / BYTES_PER_KB))} KB`
+})
+
+const statusLabel = computed(() => t(`episodeBatch.status.${props.item.status}`))
+
+const statusType = computed(() => {
+  switch (props.item.status) {
+    case 'done':
+      return 'success'
+    case 'failed':
+      return 'danger'
+    case 'paused':
+      return 'warning'
+    case 'merging':
+    case 'uploading':
+      return ''
+    default:
+      return 'info'
+  }
+})
+
+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">
+      <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>
+    </div>
+    <el-progress
+      :percentage="item.percent"
+      :status="
+        item.status === 'failed' ? 'exception' : item.status === 'done' ? 'success' : undefined
+      "
+      :stroke-width="10"
+    />
+    <p v-if="item.error" class="upload-task-row__error">{{ item.error }}</p>
+    <div class="upload-task-row__actions">
+      <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)">
+        {{ t('episodeBatch.remove') }}
+      </el-button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.upload-task-row {
+  padding: 12px 0;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.upload-task-row__meta {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 8px;
+}
+
+.upload-task-row__name {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.upload-task-row__error {
+  margin: 6px 0 0;
+  color: var(--el-color-danger);
+  font-size: 12px;
+}
+
+.upload-task-row__actions {
+  margin-top: 8px;
+  display: flex;
+  gap: 8px;
+}
+
+.upload-task-row.is-failed {
+  background: color-mix(in srgb, var(--el-color-danger) 6%, transparent);
+  border-radius: 6px;
+  padding-left: 8px;
+  padding-right: 8px;
+}
+</style>

src/views/contentManagement/upload/uploadSessions.ts

@@ -0,0 +1,72 @@
+// Author: fruit.com.cn
+/** 剧集批量上传断点会话：localStorage 读写与清理 */
+
+export const UPLOAD_SESSION_KEY = 'reel_upload_sessions'
+export const UPLOAD_SESSION_TTL_MS = 24 * 60 * 60 * 1000
+
+export interface UploadSessionRecord {
+  uploadId: string
+  fileName: string
+  fileSize: number
+  lastModified: number
+  dramaId: string
+  bizType: string
+  createdAt: number
+}
+
+/** 读取全部会话，解析失败时返回空数组。 */
+export function loadUploadSessions(): UploadSessionRecord[] {
+  try {
+    const raw = localStorage.getItem(UPLOAD_SESSION_KEY)
+    if (!raw) return []
+    const parsed = JSON.parse(raw)
+    return Array.isArray(parsed) ? (parsed as UploadSessionRecord[]) : []
+  } catch {
+    return []
+  }
+}
+
+/** 覆盖写入全部会话。 */
+export function saveUploadSessions(sessions: UploadSessionRecord[]): void {
+  localStorage.setItem(UPLOAD_SESSION_KEY, JSON.stringify(sessions))
+}
+
+/** 按 dramaId 过滤且未超过 TTL 的未完成会话。 */
+export function listPendingSessions(dramaId: string, now = Date.now()): UploadSessionRecord[] {
+  const dramaKey = String(dramaId)
+  return loadUploadSessions().filter(
+    (item) =>
+      String(item.dramaId) === dramaKey &&
+      now - Number(item.createdAt || 0) <= UPLOAD_SESSION_TTL_MS
+  )
+}
+
+/** 新增或按 uploadId 覆盖一条会话。 */
+export function upsertUploadSession(record: UploadSessionRecord): void {
+  const next = loadUploadSessions().filter((item) => item.uploadId !== record.uploadId)
+  next.push(record)
+  saveUploadSessions(next)
+}
+
+/** 按 uploadId 移除会话。 */
+export function removeUploadSession(uploadId: string): void {
+  if (!uploadId) return
+  saveUploadSessions(loadUploadSessions().filter((item) => item.uploadId !== uploadId))
+}
+
+/** 批量移除会话。 */
+export function removeUploadSessions(uploadIds: string[]): void {
+  if (!uploadIds.length) return
+  const idSet = new Set(uploadIds)
+  saveUploadSessions(loadUploadSessions().filter((item) => !idSet.has(item.uploadId)))
+}
+
+/** 用文件名 + size + lastModified 匹配本地文件。 */
+export function matchFileForSession(session: UploadSessionRecord, files: File[]): File | undefined {
+  return files.find(
+    (file) =>
+      file.name === session.fileName &&
+      file.size === session.fileSize &&
+      file.lastModified === session.lastModified
+  )
+}

src/views/contentManagement/upload/useUploadQueue.ts

@@ -0,0 +1,310 @@
+// Author: fruit.com.cn
+/** 剧集批量上传队列：文件并发、进度加权、断点会话、失败隔离 */
+
+import { computed, ref } from 'vue'
+import { getUploadProgressApi } from '@/api/admin/media'
+import { probeVideoDuration, resumeUpload, uploadFile } from '@/utils/uploader'
+import {
+  listPendingSessions,
+  matchFileForSession,
+  removeUploadSession,
+  type UploadSessionRecord,
+  upsertUploadSession
+} from './uploadSessions'
+
+export type UploadItemStatus = 'waiting' | 'uploading' | 'merging' | 'done' | 'failed' | 'paused'
+
+export interface UploadQueueItem {
+  id: string
+  file: File
+  fileName: string
+  fileSize: number
+  lastModified: number
+  percent: number
+  status: UploadItemStatus
+  error: string
+  uploadId: string
+  assetId?: number
+  url?: string
+  durationSec?: number
+}
+
+export interface UseUploadQueueOptions {
+  /** 当前短剧 id（调用时读取，避免切换剧后闭包过期） */
+  getDramaId: () => string
+  bizType?: string
+}
+
+const FILE_CONCURRENCY = 2
+const CHUNK_CONCURRENCY = 3
+const DEFAULT_BIZ_TYPE = 'EPISODE'
+const MERGING_PERCENT = 95
+const MAX_PERCENT = 100
+
+let queueSeq = 0
+
+function nextItemId(): string {
+  queueSeq += 1
+  return `uq-${Date.now()}-${queueSeq}`
+}
+
+function extractErrorMessage(error: unknown): string {
+  if (error instanceof Error && error.message) return error.message
+  return String(error || 'upload failed')
+}
+
+function isHttpNotFound(error: unknown): boolean {
+  const status = (error as { response?: { status?: number } })?.response?.status
+  return status === 404
+}
+
+/**
+ * 创建上传队列控制器。
+ * @param options dramaId 与可选 bizType
+ */
+export function useUploadQueue(options: UseUploadQueueOptions) {
+  const items = ref<UploadQueueItem[]>([])
+  const paused = ref(false)
+  const bizType = options.bizType || DEFAULT_BIZ_TYPE
+  let running = 0
+
+  const overallPercent = computed(() => {
+    const list = items.value
+    if (!list.length) return 0
+    const totalBytes = list.reduce((sum, item) => sum + item.fileSize, 0)
+    if (totalBytes <= 0) return 0
+    const weighted = list.reduce((sum, item) => sum + item.fileSize * item.percent, 0)
+    return Math.min(MAX_PERCENT, Math.round(weighted / totalBytes))
+  })
+
+  const hasActiveUpload = computed(() =>
+    items.value.some(
+      (item) =>
+        item.status === 'waiting' ||
+        item.status === 'uploading' ||
+        item.status === 'merging' ||
+        item.status === 'paused'
+    )
+  )
+
+  const doneItems = computed(() => items.value.filter((item) => item.status === 'done'))
+
+  function persistSession(item: UploadQueueItem, uploadId: string): void {
+    item.uploadId = uploadId
+    upsertUploadSession({
+      uploadId,
+      fileName: item.fileName,
+      fileSize: item.fileSize,
+      lastModified: item.lastModified,
+      dramaId: String(options.getDramaId()),
+      bizType,
+      createdAt: Date.now()
+    })
+  }
+
+  function clearSession(uploadId: string): void {
+    if (uploadId) removeUploadSession(uploadId)
+  }
+
+  async function runOne(item: UploadQueueItem, resumeId?: string): Promise<void> {
+    item.status = 'uploading'
+    item.error = ''
+    try {
+      const durationSec = await probeVideoDuration(item.file)
+      item.durationSec = durationSec
+      const uploadOptions = {
+        bizType,
+        concurrency: CHUNK_CONCURRENCY,
+        durationSec,
+        onSession: (uploadId: string) => persistSession(item, uploadId),
+        onProgress: (percent: number) => {
+          item.percent = percent
+          if (percent >= MERGING_PERCENT && item.status === 'uploading') {
+            item.status = 'merging'
+          }
+        }
+      }
+      const asset = resumeId
+        ? await resumeUpload(item.file, resumeId, uploadOptions)
+        : await uploadFile(item.file, uploadOptions)
+      item.percent = MAX_PERCENT
+      item.status = 'done'
+      item.assetId = asset.id
+      item.url = asset.url
+      if (asset.durationSec != null) item.durationSec = asset.durationSec
+      clearSession(item.uploadId || resumeId || '')
+    } catch (error) {
+      item.status = 'failed'
+      item.error = extractErrorMessage(error)
+    }
+  }
+
+  function pump(): void {
+    if (paused.value) return
+    while (running < FILE_CONCURRENCY && !paused.value) {
+      const next = items.value.find((item) => item.status === 'waiting')
+      if (!next) return
+      // 立刻占位，避免同步 while 循环把同一项派发两次
+      next.status = 'uploading'
+      running += 1
+      const resumeId = next.uploadId || undefined
+      void runOne(next, resumeId).finally(() => {
+        running -= 1
+        if (!paused.value) pump()
+      })
+    }
+  }
+
+  /** 入队本地文件（调用方已完成类型/大小校验）。 */
+  function enqueue(files: File[]): void {
+    for (const file of files) {
+      items.value.push({
+        id: nextItemId(),
+        file,
+        fileName: file.name,
+        fileSize: file.size,
+        lastModified: file.lastModified,
+        percent: 0,
+        status: paused.value ? 'paused' : 'waiting',
+        error: '',
+        uploadId: ''
+      })
+    }
+  }
+
+  /** 开始或继续派发。 */
+  function start(): void {
+    paused.value = false
+    for (const item of items.value) {
+      if (item.status === 'paused') item.status = 'waiting'
+    }
+    void pump()
+  }
+
+  /** 暂停：不派新任务；进行中分片跑完。 */
+  function pause(): void {
+    paused.value = true
+    for (const item of items.value) {
+      if (item.status === 'waiting') item.status = 'paused'
+    }
+  }
+
+  /** 重试单个失败项。 */
+  function retry(id: string): void {
+    const item = items.value.find((row) => row.id === id)
+    if (!item || item.status !== 'failed') return
+    item.error = ''
+    item.percent = item.uploadId ? item.percent : 0
+    item.status = paused.value ? 'paused' : 'waiting'
+    if (!paused.value) void pump()
+  }
+
+  /** 重试全部失败项。 */
+  function retryAll(): void {
+    for (const item of items.value) {
+      if (item.status === 'failed') {
+        item.error = ''
+        item.status = paused.value ? 'paused' : 'waiting'
+      }
+    }
+    if (!paused.value) void pump()
+  }
+
+  /** 移除单项并清理会话。 */
+  function remove(id: string): void {
+    const index = items.value.findIndex((row) => row.id === id)
+    if (index < 0) return
+    const [removed] = items.value.splice(index, 1)
+    clearSession(removed.uploadId)
+  }
+
+  /** 清空队列并清理本队列会话。 */
+  function clear(): void {
+    for (const item of items.value) {
+      clearSession(item.uploadId)
+    }
+    items.value = []
+    paused.value = false
+    running = 0
+  }
+
+  /** 读取当前剧未完成会话（24h 内）。 */
+  function getPendingSessions(): UploadSessionRecord[] {
+    return listPendingSessions(String(options.getDramaId()))
+  }
+
+  /**
+   * 用本地重选文件匹配会话并入队续传。
+   * @returns matched / unmatched 会话列表
+   */
+  async function resumeFromSessions(
+    sessions: UploadSessionRecord[],
+    files: File[]
+  ): Promise<{ matched: UploadSessionRecord[]; unmatched: UploadSessionRecord[] }> {
+    const matched: UploadSessionRecord[] = []
+    const unmatched: UploadSessionRecord[] = []
+    for (const session of sessions) {
+      const file = matchFileForSession(session, files)
+      if (!file) {
+        unmatched.push(session)
+        continue
+      }
+      try {
+        const progressRes = await getUploadProgressApi(session.uploadId)
+        const progress = progressRes?.data
+        if (!progress) {
+          unmatched.push(session)
+          continue
+        }
+        if (String(progress.status || '').toLowerCase() === 'completed') {
+          clearSession(session.uploadId)
+          continue
+        }
+        items.value.push({
+          id: nextItemId(),
+          file,
+          fileName: file.name,
+          fileSize: file.size,
+          lastModified: file.lastModified,
+          percent: Math.min(MERGING_PERCENT, Number(progress.percent) || 0),
+          status: paused.value ? 'paused' : 'waiting',
+          error: '',
+          uploadId: session.uploadId
+        })
+        matched.push(session)
+      } catch (error) {
+        if (isHttpNotFound(error)) {
+          clearSession(session.uploadId)
+        } else {
+          unmatched.push(session)
+        }
+      }
+    }
+    return { matched, unmatched }
+  }
+
+  /** 放弃续传：清理给定会话。 */
+  function abandonSessions(sessions: UploadSessionRecord[]): void {
+    for (const session of sessions) {
+      clearSession(session.uploadId)
+    }
+  }
+
+  return {
+    items,
+    overallPercent,
+    hasActiveUpload,
+    doneItems,
+    paused,
+    enqueue,
+    start,
+    pause,
+    retry,
+    retryAll,
+    remove,
+    clear,
+    getPendingSessions,
+    resumeFromSessions,
+    abandonSessions
+  }
+}

src/views/contentManagement/upload/videoLimit.ts

@@ -0,0 +1,9 @@
+// Author: fruit.com.cn
+/** 剧集视频大小上限，单文件上传与批量上传共用。 */
+export const MAX_VIDEO_SIZE = 500 * 1024 * 1024
+
+/** 允许的视频扩展名（小写，不含点），单文件与批量上传同源。 */
+export const VIDEO_EXTENSIONS: string[] = ['mp4', 'mov', 'mkv', 'webm']
+
+/** el-upload / input[type=file] 的 accept 属性，与 VIDEO_EXTENSIONS 保持一致。 */
+export const VIDEO_ACCEPT_ATTR = '.mp4,.mov,.mkv,.webm,video/*'

src/views/creator-center/DramaEditView.vue

@@ -1,7 +1,9 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
+import { computed } from 'vue'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import PageHeading from '@/views/components/PageHeading.vue'
 import CreatorCenterPage from './components/CreatorCenterPage.vue'
 import { useRbac } from '@/stores/rbac'
@@ -47,6 +49,14 @@ const {
   withdraw
 } = useDramaEdit()
 
+const episodeCoverPreviewList = computed(() =>
+  episodes.value.map((row) => row.cover).filter(Boolean)
+)
+
+function episodeCoverPreviewIndex(row) {
+  return Math.max(0, episodeCoverPreviewList.value.indexOf(row.cover))
+}
+
 function back() {
   window.history.back()
 }
@@ -193,7 +203,15 @@ function requestDramaCover(options) {
         <el-table-column label="封面" width="88">
           <template #default="{ row }">
             <div class="creator-episode-cover">
-              <img v-if="row.cover" :src="row.cover" alt="" />
+              <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>

src/views/creator-center/WorkspaceView.vue

@@ -1,9 +1,10 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { ref } from 'vue'
+import { computed, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import PageHeading from '@/views/components/PageHeading.vue'
 import CreatorCenterPage from './components/CreatorCenterPage.vue'
 import { useCreatorAccess } from './composables/useCreatorAccess'
@@ -43,6 +44,14 @@ const {
 
 const activeTab = ref('dramas')
 
+const workspaceCoverPreviewList = computed(() =>
+  (dramas.rows || []).map((row) => row.cover).filter(Boolean)
+)
+
+function workspaceCoverPreviewIndex(row) {
+  return Math.max(0, workspaceCoverPreviewList.value.indexOf(row.cover))
+}
+
 function onTabChange(name) {
   if (name === 'notices' && !notices.loaded) loadNotices()
 }
@@ -149,7 +158,15 @@ function openEdit(row) {
               <template #default="{ row }">
                 <div class="creator-drama-cell">
                   <div class="creator-drama-cover">
-                    <img v-if="row.cover" :src="row.cover" alt="" />
+                    <AppImage
+                      v-if="row.cover"
+                      :src="row.cover"
+                      :preview-list="workspaceCoverPreviewList"
+                      :initial-index="workspaceCoverPreviewIndex(row)"
+                      fit="cover"
+                      class="creator-drama-image"
+                      :alt="row.title"
+                    />
                     <span v-else>{{ (row.title || '?').slice(0, 1) }}</span>
                   </div>
                   <div class="creator-drama-meta">

src/views/governance/ContentGovernanceView.vue

@@ -1,7 +1,7 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { computed, onMounted, reactive, ref } from 'vue'
+import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import PageHeading from '@/views/components/PageHeading.vue'
 import { useRbac } from '@/stores/rbac'
@@ -26,16 +26,23 @@ const canWordUpdate = can('sensitive-word:update')
 const activeTab = ref('comments')
 
 const COMMENT_STATUS = [
+  { value: '', label: '全部状态', tag: 'info' },
   { value: 'pending', label: '待审核', tag: 'warning' },
   { value: 'published', label: '已发布', tag: 'success' },
   { value: 'rejected', label: '已驳回', tag: 'danger' },
   { value: 'deleted', label: '已删除', tag: 'info' }
 ]
 const REPORT_STATUS = [
+  { value: '', label: '全部状态', tag: 'info' },
   { value: 'pending', label: '待处理', tag: 'warning' },
   { value: 'handled', label: '已处理', tag: 'success' },
   { value: 'rejected', label: '已驳回', tag: 'info' }
 ]
+const REPORT_TARGET_TYPES = {
+  COMMENT: { label: '评论', tag: 'warning' },
+  USER: { label: '用户', tag: 'success' },
+  DRAMA: { label: '短剧', tag: 'info' }
+}
 const WORD_LEVELS = [
   { value: 'BLOCK', label: '禁止发布' },
   { value: 'REVIEW', label: '转人工审核' },
@@ -48,6 +55,22 @@ function meta(list, value) {
 function levelText(level) {
   return WORD_LEVELS.find((item) => item.value === level)?.label || level
 }
+function commentEpisodeText(row) {
+  if (row.episodeNo) return `第 ${row.episodeNo} 集`
+  return row.episodeId ? `分集 #${row.episodeId}` : '未关联分集'
+}
+function commentContentTooltip(row) {
+  return `短剧 ID：${row.dramaId} / 分集 ID：${row.episodeId || '未关联'}`
+}
+function reportTargetMeta(type) {
+  return REPORT_TARGET_TYPES[type] || { label: type || '-', tag: 'info' }
+}
+function reportTargetSummary(row) {
+  return row.targetSummary || `${reportTargetMeta(row.targetType).label} #${row.targetId}`
+}
+function reporterText(row) {
+  return row.reporterNickname || row.reporterUid || `#${row.reporterId}`
+}
 
 const comments = reactive({
   rows: [],
@@ -55,7 +78,7 @@ const comments = reactive({
   loading: false,
   page: 1,
   size: 10,
-  status: 'pending',
+  status: '',
   keyword: ''
 })
 async function loadComments() {
@@ -123,7 +146,7 @@ const reports = reactive({
   loading: false,
   page: 1,
   size: 10,
-  status: 'pending'
+  status: ''
 })
 async function loadReports() {
   reports.loading = true
@@ -271,11 +294,6 @@ function onTabChange(name) {
   if (name === 'reports') loadReports()
   if (name === 'words') loadWords()
 }
-
-const handleTargetText = computed(() => {
-  const row = handleTarget.value
-  return row ? `${row.targetType} #${row.targetId}` : ''
-})
 </script>
 
 <template>
@@ -325,7 +343,17 @@ const handleTargetText = computed(() => {
           <el-table-column prop="id" label="ID" width="80" />
           <el-table-column prop="nickname" label="用户" min-width="120" show-overflow-tooltip />
           <el-table-column prop="content" label="内容" min-width="220" show-overflow-tooltip />
-          <el-table-column prop="dramaId" label="短剧ID" width="90" />
+          <el-table-column label="短剧 / 分集" min-width="190">
+            <template #default="{ row }">
+              <el-tooltip :content="commentContentTooltip(row)" placement="top">
+                <div class="episode-table-title">
+                  <b>{{ row.dramaTitle || `短剧 #${row.dramaId}` }}</b>
+                  <small>{{ commentEpisodeText(row) }}</small>
+                  <small v-if="row.episodeTitle">{{ row.episodeTitle }}</small>
+                </div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
           <el-table-column label="状态" width="100">
             <template #default="{ row }">
               <el-tag :type="meta(COMMENT_STATUS, row.status).tag" effect="light">{{
@@ -410,8 +438,22 @@ const handleTargetText = computed(() => {
           empty-text="没有符合条件的工单"
         >
           <el-table-column prop="id" label="工单ID" width="90" />
-          <el-table-column prop="targetType" label="对象" width="100" />
-          <el-table-column prop="targetId" label="对象ID" width="90" />
+          <el-table-column label="对象" min-width="240">
+            <template #default="{ row }">
+              <el-tooltip placement="top">
+                <template #content>
+                  <div>原始对象：#{{ row.targetId }}</div>
+                  <div v-if="row.commentContent">评论内容：{{ row.commentContent }}</div>
+                </template>
+                <div class="episode-table-title">
+                  <el-tag :type="reportTargetMeta(row.targetType).tag" size="small" effect="light">
+                    {{ reportTargetMeta(row.targetType).label }}
+                  </el-tag>
+                  <b>{{ reportTargetSummary(row) }}</b>
+                </div>
+              </el-tooltip>
+            </template>
+          </el-table-column>
           <el-table-column prop="reasonCode" label="原因码" width="120" />
           <el-table-column
             prop="description"
@@ -419,7 +461,9 @@ const handleTargetText = computed(() => {
             min-width="180"
             show-overflow-tooltip
           />
-          <el-table-column prop="reporterId" label="举报人" width="90" />
+          <el-table-column label="举报人" min-width="140" show-overflow-tooltip>
+            <template #default="{ row }">{{ reporterText(row) }}</template>
+          </el-table-column>
           <el-table-column label="状态" width="100">
             <template #default="{ row }">
               <el-tag :type="meta(REPORT_STATUS, row.status).tag" effect="light">{{
@@ -550,7 +594,12 @@ const handleTargetText = computed(() => {
   <el-dialog v-model="handleVisible" title="处理举报工单" width="480px">
     <el-form label-position="top">
       <el-form-item label="工单对象">
-        <el-input :model-value="handleTargetText" disabled />
+        <div v-if="handleTarget" class="episode-table-title">
+          <el-tag :type="reportTargetMeta(handleTarget.targetType).tag" size="small" effect="light">
+            {{ reportTargetMeta(handleTarget.targetType).label }}
+          </el-tag>
+          <b>{{ reportTargetSummary(handleTarget) }}</b>
+        </div>
       </el-form-item>
       <el-form-item label="处理结论">
         <el-radio-group v-model="handleForm.status">

src/views/userManagement/AppUsersView.vue

@@ -3,6 +3,7 @@
 <script setup>
 import { computed } from 'vue'
 import { AppIcons } from '@/constants/icons'
+import { AppImage } from '@/components/AppImage'
 import PageHeading from '@/views/components/PageHeading.vue'
 import { useRbac } from '@/stores/rbac'
 import {
@@ -70,6 +71,12 @@ function avatarText(row) {
   return name.slice(0, 1).toUpperCase()
 }
 
+const avatarPreviewList = computed(() => users.value.map((row) => row.avatarUrl).filter(Boolean))
+
+function avatarPreviewIndex(row) {
+  return Math.max(0, avatarPreviewList.value.indexOf(row.avatarUrl))
+}
+
 function canBeBanned(row) {
   return row.status !== 'banned' && row.status !== 'deactivated'
 }
@@ -145,7 +152,15 @@ function canBeBanned(row) {
         <template #default="{ row }">
           <div class="app-user-cell">
             <span class="app-user-avatar">
-              <img v-if="row.avatarUrl" :src="row.avatarUrl" alt="" />
+              <AppImage
+                v-if="row.avatarUrl"
+                :src="row.avatarUrl"
+                :preview-list="avatarPreviewList"
+                :initial-index="avatarPreviewIndex(row)"
+                fit="cover"
+                class="app-user-avatar-image"
+                :alt="row.nickname || row.uid"
+              />
               <template v-else>{{ avatarText(row) }}</template>
             </span>
             <div class="app-user-meta">
@@ -217,7 +232,15 @@ function canBeBanned(row) {
       <template v-if="detail">
         <div class="app-user-summary">
           <span class="app-user-avatar">
-            <img v-if="detail.avatarUrl" :src="detail.avatarUrl" alt="" />
+            <AppImage
+              v-if="detail.avatarUrl"
+              :src="detail.avatarUrl"
+              :preview-list="avatarPreviewList"
+              :initial-index="avatarPreviewIndex(detail)"
+              fit="cover"
+              class="app-user-avatar-image"
+              :alt="detail.nickname || detail.uid"
+            />
             <template v-else>{{ avatarText(detail) }}</template>
           </span>
           <div class="app-user-meta">

src/views/userManagement/WatchHistoryView.vue

@@ -0,0 +1,239 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import PageHeading from '@/views/components/PageHeading.vue'
+import { pageWatchHistoryApi } from '@/api/admin/appUser'
+import { formatDuration } from './composables/useAppUsers'
+
+const SOURCE_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: 'HOME', label: '首页' },
+  { value: 'DETAIL', label: '详情页' },
+  { value: 'SEARCH', label: '搜索' },
+  { value: 'FAVORITE', label: '收藏' }
+]
+
+const FINISHED_OPTIONS = [
+  { value: '', label: '全部' },
+  { value: true, label: '已看完' },
+  { value: false, label: '未看完' }
+]
+
+const filters = reactive({
+  keyword: '',
+  dramaTitle: '',
+  source: '',
+  finished: '',
+  range: null
+})
+const rows = ref([])
+const total = ref(0)
+const loading = ref(false)
+const pageIndex = ref(1)
+const pageSize = ref(10)
+
+async function load() {
+  loading.value = true
+  try {
+    const res = await pageWatchHistoryApi({
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value,
+      keyword: filters.keyword.trim() || undefined,
+      dramaTitle: filters.dramaTitle.trim() || undefined,
+      source: filters.source || undefined,
+      finished: filters.finished === '' ? undefined : filters.finished,
+      startTime: filters.range?.[0] || undefined,
+      endTime: filters.range?.[1] || undefined
+    })
+    rows.value = res.data?.list || []
+    total.value = res.data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function search() {
+  pageIndex.value = 1
+  load()
+}
+
+function resetFilters() {
+  filters.keyword = ''
+  filters.dramaTitle = ''
+  filters.source = ''
+  filters.finished = ''
+  filters.range = null
+  search()
+}
+
+function handleSizeChange() {
+  pageIndex.value = 1
+  load()
+}
+
+function sourceText(source) {
+  return SOURCE_OPTIONS.find((item) => item.value === source)?.label || source || '—'
+}
+
+function episodeText(row) {
+  if (row.episodeNo) return `第 ${row.episodeNo} 集`
+  return row.episodeId ? `分集 #${row.episodeId}` : '未关联分集'
+}
+
+function progressText(row) {
+  if (!row.durationMs) return '—'
+  return `${formatDuration(row.positionMs)} / ${formatDuration(row.durationMs)}`
+}
+
+function contentTooltip(row) {
+  return `短剧 ID：${row.dramaId} / 分集 ID：${row.episodeId || '未关联'}`
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="用户管理"
+    title="观看记录"
+    description="跨用户检索观看流水，核对短剧、分集、进度与来源。"
+  />
+
+  <section class="panel">
+    <div class="console-toolbar">
+      <el-input
+        v-model="filters.keyword"
+        class="console-keyword"
+        clearable
+        placeholder="uid / 昵称"
+        @keyup.enter="search"
+        @clear="search"
+      />
+      <el-input
+        v-model="filters.dramaTitle"
+        class="console-keyword"
+        clearable
+        placeholder="短剧名称"
+        @keyup.enter="search"
+        @clear="search"
+      />
+      <el-select
+        v-model="filters.source"
+        class="console-select"
+        placeholder="全部来源"
+        @change="search"
+      >
+        <el-option
+          v-for="item in SOURCE_OPTIONS"
+          :key="item.value"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-select
+        v-model="filters.finished"
+        class="console-select"
+        placeholder="全部完成状态"
+        @change="search"
+      >
+        <el-option
+          v-for="item in FINISHED_OPTIONS"
+          :key="String(item.value)"
+          :label="item.label"
+          :value="item.value"
+        />
+      </el-select>
+      <el-date-picker
+        v-model="filters.range"
+        class="watch-history-range"
+        type="datetimerange"
+        value-format="YYYY-MM-DD HH:mm:ss"
+        range-separator="至"
+        start-placeholder="开始时间"
+        end-placeholder="结束时间"
+        @change="search"
+      />
+      <el-button type="primary" @click="search">查询</el-button>
+      <el-button @click="resetFilters">重置</el-button>
+      <span class="console-count">共 {{ total }} 条</span>
+    </div>
+
+    <el-table
+      v-loading="loading"
+      :data="rows"
+      row-key="id"
+      border
+      class="drama-el-table"
+      empty-text="暂无符合条件的观看记录"
+    >
+      <el-table-column prop="watchedAt" label="观看时间" min-width="170" show-overflow-tooltip />
+      <el-table-column label="用户" min-width="180">
+        <template #default="{ row }">
+          <div class="app-user-meta">
+            <span class="app-user-name">{{ row.nickname || '未设置昵称' }}</span>
+            <span class="app-user-uid">{{ row.uid || `用户 #${row.userId || '—'}` }}</span>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="短剧" min-width="190">
+        <template #default="{ row }">
+          <el-tooltip :content="contentTooltip(row)" placement="top">
+            <div class="episode-table-title">
+              <b>{{ row.dramaTitle || `短剧 #${row.dramaId}` }}</b>
+              <el-tag v-if="row.dramaPublished === false" type="info" size="small" effect="plain"
+                >已下线</el-tag
+              >
+            </div>
+          </el-tooltip>
+        </template>
+      </el-table-column>
+      <el-table-column label="分集" min-width="180" show-overflow-tooltip>
+        <template #default="{ row }">
+          <div class="episode-table-title">
+            <b>{{ episodeText(row) }}</b>
+            <small v-if="row.episodeTitle">{{ row.episodeTitle }}</small>
+          </div>
+        </template>
+      </el-table-column>
+      <el-table-column label="进度" min-width="120">
+        <template #default="{ row }">
+          <span class="app-user-mono">{{ progressText(row) }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="完成" width="92">
+        <template #default="{ row }">
+          <el-tag :type="row.finished ? 'success' : 'info'" effect="light">
+            {{ row.finished ? '已看完' : '未看完' }}
+          </el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="来源" width="96">
+        <template #default="{ row }">{{ sourceText(row.source) }}</template>
+      </el-table-column>
+      <el-table-column prop="deviceId" label="设备" min-width="150" show-overflow-tooltip>
+        <template #default="{ row }">{{ row.deviceId || '—' }}</template>
+      </el-table-column>
+    </el-table>
+
+    <div class="pagination">
+      <el-pagination
+        v-model:current-page="pageIndex"
+        v-model:page-size="pageSize"
+        :page-sizes="[10, 20, 50]"
+        :total="total"
+        layout="total, sizes, prev, pager, next, jumper"
+        background
+        @current-change="load"
+        @size-change="handleSizeChange"
+      />
+    </div>
+  </section>
+</template>
+
+<style scoped>
+.watch-history-range {
+  width: 360px;
+  max-width: 100%;
+}
+</style>

vite.config.mts

@@ -139,7 +139,10 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
       hmr: {
         overlay: false
       },
-      host: '0.0.0.0'
+      // 必须同时监听 IPv6：Windows 上 localhost 先解析成 ::1，
+      // 只绑 0.0.0.0 会让每次新建连接都等 IPv6 超时（约 2s）再回退到 IPv4，
+      // 表现为页面白屏很久。'::' 是双栈，IPv4 局域网访问同样可用。
+      host: '::'
     },
     optimizeDeps: {
       include: [