chore(merge): 将 develop 同步到 release/v1.0.0

docs/plans/2026-10-22-transcode-media-id-fix-ui.md

@@ -0,0 +1,18 @@
+# 转码媒资 ID 前端精度修复
+
+## 根因
+
+聚合接口把 Snowflake 媒资 ID 以字符串返回，但面板使用
+`Number(detail.mediaAssetId)`，超过 `2^53` 后发生精度丢失，手动转码请求了错误 ID。
+
+## 修复
+
+- 聚合响应中的 episodeId/mediaAssetId/taskId 类型改为字符串。
+- 父面板不再 Number 归一化，媒体 ID 校验改为字符串 `/\d+/`。
+- 手动转码、帧图分页 URL 原样传递字符串。
+- mediaAssetId 为空时禁用重新转码并展示明确空态。
+
+## 验证
+
+- 超 2^53 ID 字符串保持逐位一致。
+- `pnpm lint:eslint`、`pnpm build:dev`。

docs/plans/2026-10-22-transcode-progress-ui.md

@@ -0,0 +1,12 @@
+# 转码面板实时进度与更新时间
+
+## 目标
+
+- 展示后端 task progress、状态文案与 updatedAt。
+- RUNNING/QUEUED 且 progress=0 时显示“处理中（等待进度上报）”。
+- FAILED 保持错误信息与重新转码入口。
+- 保持现有轮询停止、关闭清理与字符串 ID 逻辑。
+
+## 验证
+
+- `pnpm lint:eslint`、`pnpm build:dev`。

docs/plans/PROGRESS.md

@@ -100,3 +100,90 @@ Build successful. Please see dist-dev directory
 
 解读：组件 props/emits、类型检查、ESLint 和开发构建全部通过；
 循环 chunk 为项目既有警告。轮询启停、接口路径、分页参数和 locales 文案未改变。
+
+## 2026-10-22 转码媒资 ID 前端精度修复
+
+- 分支：`feature/transcode-media-id-fix-ui`
+- 基线：`develop` / `origin/develop` = `a4893c3`
+
+已复现 `Number('2113150398670966786')` 变为 `2113150398670966800`。
+本次将媒资、任务 id 全链路按字符串处理，禁止 Number 转换；没有媒资时
+禁用重新转码并显示空态。
+
+```text
+$ node -e "const id='2113150398670966786'; console.log(String(Number(id)))"
+2113150398670966800
+```
+
+解读：Snowflake id 超过 JS 安全整数，字符串化后的 Number 已失真。
+
+### 实现
+
+- `EpisodeTranscodeItem` 的 episodeId/mediaAssetId/taskId，以及 rendition/thumbnail
+  相关 id 类型改为字符串。
+- 父面板使用 `detail.mediaAssetId` 原始字符串和正则校验，不再 Number 转换。
+- 手动转码与帧图分页接口原样传递字符串 id。
+- `mediaAssetId` 为空时按钮保持禁用，空态优先展示后端 errorMsg 原因。
+
+静态检查确认：
+
+```text
+$ rg -n "Number\([^\n]*mediaAssetId|mediaAssetId[^\n]*Number\(" \
+  src/views/contentManagement/upload src/api/admin
+（无匹配）
+```
+
+### 门禁
+
+```text
+$ pnpm lint:eslint
+> eslint --fix --ext .js,.ts,.vue ./src
+（0 error / 0 warning）
+
+$ pnpm ts:check
+> vue-tsc --noEmit --skipLibCheck
+（通过）
+
+$ pnpm build:dev
+ WARN  Circular chunk: element-plus -> vue-chunks -> element-plus.
+Build successful. Please see dist-dev directory
+```
+
+解读：字符串 id 链路、类型检查、ESLint 与开发构建均通过；
+循环 chunk 为项目既有警告。
+
+## 2026-10-22 转码面板实时进度与更新时间
+
+- 分支：`feature/transcode-progress-ui`
+- 基线：`develop` / `origin/develop` = `0d5d0d8`
+- 计划：`docs/plans/2026-10-22-transcode-progress-ui.md`
+
+后端将补充 task.updatedAt；前端在现有轮询面板中展示进度、状态、
+最近更新时间，并在 RUNNING/QUEUED progress=0 时显示等待进度上报提示。
+
+### 实现
+
+- `EpisodeTranscodeItem` 增加 `updatedAt`。
+- 状态区展示“最近更新”，格式沿用 `formatDateTime`。
+- RUNNING/QUEUED 且 progress=0 时显示“处理中（等待进度上报）”。
+- SUCCESS/FAILED 继续停止轮询；关闭面板继续清理定时器。
+- 所有 id 保持字符串传递，不引入 Number 转换。
+
+### 门禁
+
+```text
+$ pnpm lint:eslint
+> eslint --fix --ext .js,.ts,.vue ./src
+（0 error / 0 warning）
+
+$ pnpm ts:check
+> vue-tsc --noEmit --skipLibCheck
+（通过）
+
+$ pnpm build:dev
+ WARN  Circular chunk: element-plus -> vue-chunks -> element-plus.
+Build successful. Please see dist-dev directory
+```
+
+解读：进度与更新时间类型、ESLint、TypeScript 和开发构建全部通过；
+循环 chunk 为项目既有警告。

package.json

@@ -38,6 +38,7 @@
     "echarts": "^5.4.3",
     "echarts-wordcloud": "^2.1.0",
     "element-plus": "2.5.5",
+    "hls.js": "^1.7.3",
     "lodash-es": "^4.17.21",
     "mitt": "^3.0.1",
     "nprogress": "^0.2.0",

src/api/admin/dramaClassification.ts

@@ -0,0 +1,85 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { PageResult } from './types'
+
+export interface DramaClassificationItem {
+  id: number
+  name: string
+  sort: number
+  status: number
+  dramaCount: number
+  updatedAt?: string
+}
+
+export interface DramaClassificationSaveData {
+  name: string
+  sort?: number
+  status?: number
+}
+
+export interface ClassificationDramaItem {
+  id: number
+  title: string
+  cover: string
+  status: string
+  totalEpisodes: number
+  sort: number
+  updatedAt: string
+}
+
+export interface ClassificationDramaPageParams {
+  keyword?: string
+  pageIndex?: number
+  pageSize?: number
+}
+
+export const listClassificationsApi = () => {
+  return request.get<DramaClassificationItem[]>({ url: '/admin/drama-classifications' })
+}
+
+export const createClassificationApi = (data: DramaClassificationSaveData) => {
+  return request.post<number>({ url: '/admin/drama-classifications', data })
+}
+
+export const updateClassificationApi = (id: number, data: DramaClassificationSaveData) => {
+  return request.put<void>({ url: `/admin/drama-classifications/${id}`, data })
+}
+
+export const deleteClassificationApi = (id: number) => {
+  return request.delete<void>({ url: `/admin/drama-classifications/${id}` })
+}
+
+/** 分类下已关联的短剧 */
+export const listClassificationDramasApi = (id: number, params: ClassificationDramaPageParams) => {
+  return request.get<PageResult<ClassificationDramaItem>>({
+    url: `/admin/drama-classifications/${id}/dramas`,
+    params
+  })
+}
+
+/** 尚未关联到该分类的短剧（添加弹窗用） */
+export const listClassificationDramaCandidatesApi = (
+  id: number,
+  params: ClassificationDramaPageParams
+) => {
+  return request.get<PageResult<ClassificationDramaItem>>({
+    url: `/admin/drama-classifications/${id}/dramas/candidates`,
+    params
+  })
+}
+
+/** 批量关联短剧，返回实际新增数量 */
+export const bindClassificationDramasApi = (id: number, dramaIds: number[]) => {
+  return request.post<number>({
+    url: `/admin/drama-classifications/${id}/dramas`,
+    data: { dramaIds }
+  })
+}
+
+/** 从分类移除短剧 */
+export const unbindClassificationDramaApi = (id: number, dramaId: number) => {
+  return request.delete<void>({
+    url: `/admin/drama-classifications/${id}/dramas/${dramaId}`
+  })
+}

src/api/admin/dramaPlaylistCategory.ts

@@ -0,0 +1,80 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { PageResult } from './types'
+import type { ClassificationDramaItem } from './dramaClassification'
+
+export interface DramaPlaylistCategoryItem {
+  id: number
+  name: string
+  description: string
+  sort: number
+  status: number
+  dramaCount: number
+}
+
+export interface DramaPlaylistCategorySaveData {
+  name: string
+  description?: string
+  sort?: number
+  status?: number
+}
+
+export interface PlaylistCategoryDramaPageParams {
+  keyword?: string
+  pageIndex?: number
+  pageSize?: number
+}
+
+export const listPlaylistCategoriesApi = () => {
+  return request.get<DramaPlaylistCategoryItem[]>({ url: '/admin/drama-playlist-categories' })
+}
+
+export const createPlaylistCategoryApi = (data: DramaPlaylistCategorySaveData) => {
+  return request.post<number>({ url: '/admin/drama-playlist-categories', data })
+}
+
+export const updatePlaylistCategoryApi = (id: number, data: DramaPlaylistCategorySaveData) => {
+  return request.put<void>({ url: `/admin/drama-playlist-categories/${id}`, data })
+}
+
+export const deletePlaylistCategoryApi = (id: number) => {
+  return request.delete<void>({ url: `/admin/drama-playlist-categories/${id}` })
+}
+
+/** 分类下已关联的短剧 */
+export const listPlaylistCategoryDramasApi = (
+  id: number,
+  params: PlaylistCategoryDramaPageParams
+) => {
+  return request.get<PageResult<ClassificationDramaItem>>({
+    url: `/admin/drama-playlist-categories/${id}/dramas`,
+    params
+  })
+}
+
+/** 尚未关联到该分类的短剧（选择弹窗用） */
+export const listPlaylistCategoryDramaCandidatesApi = (
+  id: number,
+  params: PlaylistCategoryDramaPageParams
+) => {
+  return request.get<PageResult<ClassificationDramaItem>>({
+    url: `/admin/drama-playlist-categories/${id}/dramas/candidates`,
+    params
+  })
+}
+
+/** 批量关联短剧，返回实际新增数量 */
+export const bindPlaylistCategoryDramasApi = (id: number, dramaIds: number[]) => {
+  return request.post<number>({
+    url: `/admin/drama-playlist-categories/${id}/dramas`,
+    data: { dramaIds }
+  })
+}
+
+/** 从分类移除短剧 */
+export const unbindPlaylistCategoryDramaApi = (id: number, dramaId: number) => {
+  return request.delete<void>({
+    url: `/admin/drama-playlist-categories/${id}/dramas/${dramaId}`
+  })
+}

src/api/admin/legalDocument.ts

@@ -0,0 +1,18 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+
+export interface LegalDocument {
+  docCode: 'terms' | 'privacy' | string
+  lang: 'zh' | 'en' | 'id' | string
+  title: string
+  content: string
+}
+
+export const listLegalDocumentsApi = () => {
+  return request.get<LegalDocument[]>({ url: '/admin/legal-documents' })
+}
+
+export const saveLegalDocumentsApi = (items: LegalDocument[]) => {
+  return request.put<void>({ url: '/admin/legal-documents', data: items })
+}

src/api/admin/transcode.ts

@@ -12,7 +12,7 @@ export const getEpisodeTranscodeApi = (episodeId: number | string) => {
 
 /** 按媒体分页读取帧图；页面切换时复用该接口。 */
 export const getMediaThumbnailsApi = (
-  mediaAssetId: number | string,
+  mediaAssetId: string,
   pageIndex: number,
   pageSize: number
 ) => {
@@ -23,7 +23,7 @@ export const getMediaThumbnailsApi = (
 }
 
 /** 手动触发或重转当前分集绑定的媒体。 */
-export const triggerMediaTranscodeApi = (mediaAssetId: number | string) => {
+export const triggerMediaTranscodeApi = (mediaAssetId: string) => {
   return request.post<TranscodeTriggerResult>({
     url: `/admin/media/${mediaAssetId}/transcode`
   })

src/api/admin/types.ts

@@ -249,7 +249,7 @@ export interface MediaTranscodeProfile {
 }
 
 export interface MediaRenditionItem {
-  id: number
+  id: string
   quality: string
   qualityName: string
   width: number
@@ -292,8 +292,8 @@ export interface MediaThumbnailSpriteInfo {
 }
 
 export interface MediaThumbnailResult {
-  mediaAssetId?: number | null
-  episodeId?: number | null
+  mediaAssetId?: string | null
+  episodeId?: string | null
   /** READY / FAILED / EMPTY / INVALID / NO_EPISODE */
   status: string
   errorMsg?: string
@@ -304,19 +304,20 @@ export interface MediaThumbnailResult {
 }
 
 export interface EpisodeTranscodeItem {
-  episodeId: number
-  mediaAssetId?: number | null
-  taskId?: number | null
+  episodeId: string
+  mediaAssetId?: string | null
+  taskId?: string | null
   status: string
   progress?: number
   retryCount?: number
   errorMsg?: string
+  updatedAt?: string
   renditions: MediaRenditionItem[]
   thumbnails?: MediaThumbnailResult | null
 }
 
 export interface TranscodeTriggerResult {
-  taskId: number
+  taskId: string
   status: string
 }
 
@@ -385,6 +386,10 @@ export interface AppUserItem {
   maskedTarget: string
   createdAt?: string
   lastLoginAt?: string
+  /** ANDROID / IOS / WEB */
+  platform?: string
+  /** 系统版本，例如 Android 16 */
+  osVersion?: string
   /** 预留：会员等级与到期（第二阶段） */
   vipLevel?: number
   vipExpireAt?: string
@@ -424,6 +429,8 @@ export interface WatchHistoryItem {
   finished?: boolean
   source: string
   deviceId: string
+  platform?: string
+  osVersion?: string
   watchedAt?: string
 }
 

src/locales/en.ts

@@ -535,6 +535,8 @@ export default {
     statusLabel: 'Status',
     progress: 'Progress',
     retryCount: 'Retries',
+    updatedAt: 'Last updated',
+    waitingProgress: 'Processing (waiting for progress report)',
     reprocess: 'Transcode again',
     reprocessing: 'Submitting',
     triggerSuccess: 'Transcode task submitted',
@@ -557,6 +559,9 @@ export default {
     actions: 'Actions',
     copyUrl: 'Copy playback URL',
     openUrl: 'Open in new window',
+    play: 'Preview playback',
+    playerFailed: 'Playback failed, please check the rendition output',
+    playerUnsupported: 'This browser does not support HLS playback',
     copySuccess: 'Playback URL copied',
     copyFailed: 'Failed to copy playback URL',
     openFailed: 'Unable to open playback URL',

src/locales/zh-CN.ts

@@ -529,6 +529,8 @@ export default {
     statusLabel: '状态',
     progress: '进度',
     retryCount: '重试次数',
+    updatedAt: '最近更新',
+    waitingProgress: '处理中（等待进度上报）',
     reprocess: '重新转码',
     reprocessing: '正在触发',
     triggerSuccess: '已提交转码任务',
@@ -551,6 +553,9 @@ export default {
     actions: '操作',
     copyUrl: '复制播放地址',
     openUrl: '新窗口打开',
+    play: '预览播放',
+    playerFailed: '播放失败，请检查产物是否完整',
+    playerUnsupported: '当前浏览器不支持 HLS 播放',
     copySuccess: '播放地址已复制',
     copyFailed: '复制播放地址失败',
     openFailed: '无法打开播放地址',

src/router/index.ts

@@ -211,6 +211,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: '操作日志'
         }
+      },
+      {
+        path: 'legal-documents',
+        name: 'legal-documents',
+        component: () => import('@/views/systemManagement/LegalDocumentView.vue'),
+        meta: {
+          title: '协议设置'
+        }
       }
     ]
   }

src/router/localRoutes.ts

@@ -10,16 +10,15 @@ const TRANSCODE_ROUTE_PATH = 'media-transcode'
 const TRANSCODE_COMPONENT = 'views/systemManagement/TranscodeSettingsView'
 const TRANSCODE_TITLE_KEY = 'router.transcodeSettings'
 
-const findRouteByName = (
-  routes: AppCustomRouteRecordRaw[],
-  name: string
-): AppCustomRouteRecordRaw | undefined => {
+/** 服务端菜单可能用别的路由名指向同一个组件，这里按路由名或组件路径判定是否已存在 */
+const hasTranscodeRoute = (routes: AppCustomRouteRecordRaw[]): boolean => {
   for (const route of routes) {
-    if (route.name === name) return route
-    const child = findRouteByName(route.children || [], name)
-    if (child) return child
+    if (route.name === TRANSCODE_ROUTE_NAME || route.component === TRANSCODE_COMPONENT) {
+      return true
+    }
+    if (hasTranscodeRoute(route.children || [])) return true
   }
-  return undefined
+  return false
 }
 
 /**
@@ -32,12 +31,11 @@ export const supplementLocalAdminRoutes = (
   if (!permissions.includes(TRANSCODE_PERMISSION)) {
     return routes
   }
-  const nextRoutes = cloneDeep(routes)
-  const existing = findRouteByName(nextRoutes, TRANSCODE_ROUTE_NAME)
-  if (existing) {
-    existing.meta = { ...existing.meta, title: TRANSCODE_TITLE_KEY }
-    return nextRoutes
+  // 服务端菜单里已经有转码设置时不再补，否则侧边栏会出现两条
+  if (hasTranscodeRoute(routes)) {
+    return routes
   }
+  const nextRoutes = cloneDeep(routes)
   const contentRoute = nextRoutes.find(
     (route) => route.path === CONTENT_ROUTE_PATH || route.name === CONTENT_ROUTE_NAME
   )

src/views/contentManagement/CategoryDramaView.vue

@@ -0,0 +1,594 @@
+<!-- Author: fruit.com.cn -->
+<!-- 分类管理：运营自定义分类（与「类型」是两个概念），并关联任意多部短剧 -->
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+import {
+  bindClassificationDramasApi,
+  createClassificationApi,
+  deleteClassificationApi,
+  listClassificationDramaCandidatesApi,
+  listClassificationDramasApi,
+  listClassificationsApi,
+  unbindClassificationDramaApi,
+  updateClassificationApi
+} from '@/api/admin/dramaClassification'
+import { statusClass } from '@/utils/status'
+import { useRbac } from '@/stores/rbac'
+import PageHeading from '@/views/components/PageHeading.vue'
+
+const { can } = useRbac()
+
+const STATUS_TEXT = {
+  draft: '草稿',
+  reviewing: '审核中',
+  approved: '待发布',
+  published: '已上线',
+  offline: '已下线'
+}
+
+const classifications = ref([])
+const activeId = ref(null)
+const activeClassification = computed(
+  () => classifications.value.find((item) => item.id === activeId.value) || null
+)
+
+const loading = ref(false)
+const dramas = ref([])
+const total = ref(0)
+const pageIndex = ref(1)
+const pageSize = ref(10)
+const keyword = ref('')
+
+const dialogVisible = ref(false)
+const saving = ref(false)
+const editingId = ref(null)
+const form = reactive({ name: '', sort: 1, status: 1 })
+
+const candidateVisible = ref(false)
+const candidateLoading = ref(false)
+const candidates = ref([])
+const candidateTotal = ref(0)
+const candidatePage = ref(1)
+const candidatePageSize = ref(10)
+const candidateKeyword = ref('')
+const selectedDramas = ref([])
+const binding = ref(false)
+
+async function loadClassifications() {
+  const res = await listClassificationsApi()
+  classifications.value = res.data || []
+  if (activeId.value && !classifications.value.some((item) => item.id === activeId.value)) {
+    activeId.value = classifications.value[0]?.id ?? null
+  }
+  if (!activeId.value) {
+    activeId.value = classifications.value[0]?.id ?? null
+  }
+  await loadDramas()
+}
+
+async function loadDramas() {
+  if (!activeId.value) {
+    dramas.value = []
+    total.value = 0
+    return
+  }
+  loading.value = true
+  try {
+    const res = await listClassificationDramasApi(activeId.value, {
+      keyword: keyword.value || undefined,
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value
+    })
+    dramas.value = res.data?.list || []
+    total.value = res.data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectClassification(row) {
+  if (activeId.value === row.id) return
+  activeId.value = row.id
+  pageIndex.value = 1
+  keyword.value = ''
+  loadDramas()
+}
+
+function search() {
+  pageIndex.value = 1
+  loadDramas()
+}
+
+function changePage(value) {
+  pageIndex.value = value
+  loadDramas()
+}
+
+function openCreate() {
+  editingId.value = null
+  const maxSort = classifications.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
+  Object.assign(form, { name: '', sort: maxSort + 1, status: 1 })
+  dialogVisible.value = true
+}
+
+function openEdit(row) {
+  editingId.value = row.id
+  Object.assign(form, { name: row.name, sort: row.sort ?? 0, status: row.status ?? 1 })
+  dialogVisible.value = true
+}
+
+async function saveClassification() {
+  if (!form.name.trim()) {
+    ElMessage.warning('请填写分类名称')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = { name: form.name.trim(), sort: form.sort, status: form.status }
+    if (editingId.value) {
+      await updateClassificationApi(editingId.value, payload)
+      ElMessage.success('分类已更新')
+    } else {
+      const res = await createClassificationApi(payload)
+      activeId.value = res.data
+      pageIndex.value = 1
+      ElMessage.success('分类已创建')
+    }
+    dialogVisible.value = false
+    await loadClassifications()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function confirmDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定删除分类「${row.name}」吗？关联关系会一起删除，短剧本身不受影响。`,
+      '删除确认',
+      { confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning' }
+    )
+  } catch {
+    return
+  }
+  await deleteClassificationApi(row.id)
+  if (activeId.value === row.id) {
+    activeId.value = null
+  }
+  ElMessage.success('分类已删除')
+  await loadClassifications()
+}
+
+async function removeDrama(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定把「${row.title}」从「${activeClassification.value?.name}」移出吗？`,
+      '移除确认',
+      { confirmButtonText: '确认移出', cancelButtonText: '取消', type: 'warning' }
+    )
+  } catch {
+    return
+  }
+  await unbindClassificationDramaApi(activeId.value, row.id)
+  ElMessage.success('已移出')
+  await Promise.all([loadDramas(), loadClassifications()])
+}
+
+function openCandidates() {
+  candidateVisible.value = true
+  candidatePage.value = 1
+  candidateKeyword.value = ''
+  selectedDramas.value = []
+  loadCandidates()
+}
+
+async function loadCandidates() {
+  if (!activeId.value) return
+  candidateLoading.value = true
+  try {
+    const res = await listClassificationDramaCandidatesApi(activeId.value, {
+      keyword: candidateKeyword.value || undefined,
+      pageIndex: candidatePage.value,
+      pageSize: candidatePageSize.value
+    })
+    candidates.value = res.data?.list || []
+    candidateTotal.value = res.data?.total || 0
+  } finally {
+    candidateLoading.value = false
+  }
+}
+
+function candidateSearch() {
+  candidatePage.value = 1
+  loadCandidates()
+}
+
+function changeCandidatePage(value) {
+  candidatePage.value = value
+  loadCandidates()
+}
+
+function onSelectionChange(rows) {
+  selectedDramas.value = rows
+}
+
+async function confirmBind() {
+  if (!selectedDramas.value.length) {
+    ElMessage.warning('请先选择要关联的短剧')
+    return
+  }
+  binding.value = true
+  try {
+    const res = await bindClassificationDramasApi(
+      activeId.value,
+      selectedDramas.value.map((item) => item.id)
+    )
+    ElMessage.success(`已关联 ${res.data ?? selectedDramas.value.length} 部短剧`)
+    candidateVisible.value = false
+    await Promise.all([loadDramas(), loadClassifications()])
+  } finally {
+    binding.value = false
+  }
+}
+
+function formatTime(value) {
+  if (!value) return '—'
+  return String(value).replace('T', ' ').slice(0, 19)
+}
+
+onMounted(loadClassifications)
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="内容管理"
+    title="分类管理"
+    description="分类是运营自定义的分组，与「类型」无关；一个分类可以关联任意多部短剧。"
+  >
+    <el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate">
+      <AppIcon :icon="AppIcons.add" />
+      新建分类
+    </el-button>
+  </PageHeading>
+
+  <div class="classification-layout">
+    <aside class="panel classification-layout__side">
+      <div class="classification-layout__side-title">全部分类</div>
+      <el-scrollbar height="560px">
+        <ul class="classification-list">
+          <li
+            v-for="item in classifications"
+            :key="item.id"
+            class="classification-list__item"
+            :class="{ 'is-active': item.id === activeId }"
+            @click="selectClassification(item)"
+          >
+            <div class="classification-list__main">
+              <span class="classification-list__name">{{ item.name }}</span>
+              <span class="classification-list__count">{{ item.dramaCount || 0 }}</span>
+            </div>
+            <div class="classification-list__actions" @click.stop>
+              <el-button
+                v-if="can('drama:update')"
+                text
+                circle
+                size="small"
+                @click="openEdit(item)"
+              >
+                <AppIcon :icon="AppIcons.edit" :size="15" />
+              </el-button>
+              <el-button
+                v-if="can('drama:delete')"
+                text
+                circle
+                size="small"
+                @click="confirmDelete(item)"
+              >
+                <AppIcon :icon="AppIcons.delete" :size="15" />
+              </el-button>
+            </div>
+          </li>
+          <li v-if="!classifications.length" class="classification-list__empty">
+            还没有分类，点右上角「新建分类」开始
+          </li>
+        </ul>
+      </el-scrollbar>
+    </aside>
+
+    <section class="panel classification-layout__main">
+      <div class="classification-toolbar">
+        <div class="classification-toolbar__title">
+          {{ activeClassification?.name || '请选择分类' }}
+          <small>共 {{ total }} 部关联短剧</small>
+        </div>
+        <div class="classification-toolbar__search">
+          <el-input
+            v-model="keyword"
+            placeholder="搜索短剧名称"
+            clearable
+            style="width: 200px"
+            @keyup.enter="search"
+            @clear="search"
+          />
+          <el-button type="primary" plain @click="search">查询</el-button>
+          <el-button v-if="can('drama:update')" :disabled="!activeId" @click="openCandidates">
+            <AppIcon :icon="AppIcons.add" />
+            添加短剧
+          </el-button>
+        </div>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="dramas"
+        row-key="id"
+        border
+        class="drama-el-table"
+        empty-text="该分类下还没有关联短剧"
+      >
+        <el-table-column label="封面" width="88">
+          <template #default="{ row }">
+            <img v-if="row.cover" :src="row.cover" class="classification-cover" alt="封面" />
+            <div v-else class="classification-cover classification-cover--empty">无</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="title" label="短剧名称" min-width="200" />
+        <el-table-column label="集数" width="90">
+          <template #default="{ row }">{{ row.totalEpisodes || 0 }}</template>
+        </el-table-column>
+        <el-table-column label="状态" width="110">
+          <template #default="{ row }">
+            <span class="status-dot" :class="statusClass(row.status)">
+              {{ STATUS_TEXT[row.status] || row.status }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sort" label="排序" width="90" />
+        <el-table-column label="更新时间" width="180">
+          <template #default="{ row }">{{ formatTime(row.updatedAt) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="110" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              v-if="can('drama:update')"
+              type="danger"
+              size="small"
+              @click="removeDrama(row)"
+              >移出</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="classification-pagination">
+        <el-pagination
+          :current-page="pageIndex"
+          :page-size="pageSize"
+          :total="total"
+          layout="total, prev, pager, next"
+          @current-change="changePage"
+        />
+      </div>
+    </section>
+  </div>
+
+  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑分类' : '新建分类'" width="460px">
+    <el-form label-position="top">
+      <el-form-item label="分类名称" required>
+        <el-input v-model="form.name" maxlength="20" placeholder="例如：本周必看" />
+      </el-form-item>
+      <div class="classification-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>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" :loading="saving" @click="saveClassification">保存</el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog v-model="candidateVisible" title="添加关联短剧" width="760px">
+    <div class="classification-toolbar__search" style="margin-bottom: 12px">
+      <el-input
+        v-model="candidateKeyword"
+        placeholder="搜索短剧名称"
+        clearable
+        style="width: 220px"
+        @keyup.enter="candidateSearch"
+        @clear="candidateSearch"
+      />
+      <el-button type="primary" plain @click="candidateSearch">查询</el-button>
+    </div>
+    <el-table
+      v-loading="candidateLoading"
+      :data="candidates"
+      row-key="id"
+      border
+      max-height="380"
+      empty-text="没有可关联的短剧"
+      @selection-change="onSelectionChange"
+    >
+      <el-table-column type="selection" width="48" />
+      <el-table-column prop="title" label="短剧名称" min-width="220" />
+      <el-table-column label="集数" width="90">
+        <template #default="{ row }">{{ row.totalEpisodes || 0 }}</template>
+      </el-table-column>
+      <el-table-column label="状态" width="110">
+        <template #default="{ row }">
+          <span class="status-dot" :class="statusClass(row.status)">
+            {{ STATUS_TEXT[row.status] || row.status }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序" width="90" />
+    </el-table>
+    <div class="classification-pagination">
+      <el-pagination
+        :current-page="candidatePage"
+        :page-size="candidatePageSize"
+        :total="candidateTotal"
+        layout="total, prev, pager, next"
+        @current-change="changeCandidatePage"
+      />
+    </div>
+    <template #footer>
+      <el-button @click="candidateVisible = false">取消</el-button>
+      <el-button type="primary" :loading="binding" @click="confirmBind">
+        确定关联{{ selectedDramas.length ? `（${selectedDramas.length}）` : '' }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.classification-layout {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.classification-layout__side {
+  padding: 12px 0 8px;
+}
+
+.classification-layout__side-title {
+  padding: 0 16px 10px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.classification-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.classification-list__item {
+  display: flex;
+  padding: 8px 12px 8px 16px;
+  color: var(--el-text-color-regular);
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.classification-list__item:hover {
+  background: var(--el-fill-color-light);
+}
+
+.classification-list__item.is-active {
+  font-weight: 600;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  border-left-color: var(--el-color-primary);
+}
+
+.classification-list__main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.classification-list__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.classification-list__count {
+  min-width: 24px;
+  padding: 0 6px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--el-text-color-secondary);
+  text-align: center;
+  background: var(--el-fill-color);
+  border-radius: 9px;
+}
+
+.classification-list__actions {
+  display: none;
+  gap: 2px;
+}
+
+.classification-list__item:hover .classification-list__actions {
+  display: flex;
+}
+
+.classification-list__empty {
+  padding: 16px;
+  line-height: 1.6;
+  color: var(--el-text-color-secondary);
+}
+
+.classification-layout__main {
+  padding: 16px;
+}
+
+.classification-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.classification-toolbar__title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.classification-toolbar__title small {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--el-text-color-secondary);
+}
+
+.classification-toolbar__search {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.classification-cover {
+  width: 48px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.classification-cover--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  background: var(--el-fill-color-light);
+}
+
+.classification-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
+.classification-form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+</style>

src/views/contentManagement/DramaManagementView.vue

@@ -632,7 +632,7 @@ onMounted(async () => {
             v-model="form.description"
             type="textarea"
             :rows="3"
-            maxlength="200"
+            maxlength="1000"
             show-word-limit
             placeholder="简要介绍剧情"
           />

src/views/contentManagement/DramaPlaylistView.vue

@@ -0,0 +1,619 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧单管理：剧单使用自己的一套分类（与「分类管理」无关），分类下直接关联短剧 -->
+
+<script setup>
+import { computed, onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+import {
+  bindPlaylistCategoryDramasApi,
+  createPlaylistCategoryApi,
+  deletePlaylistCategoryApi,
+  listPlaylistCategoriesApi,
+  listPlaylistCategoryDramaCandidatesApi,
+  listPlaylistCategoryDramasApi,
+  unbindPlaylistCategoryDramaApi,
+  updatePlaylistCategoryApi
+} from '@/api/admin/dramaPlaylistCategory'
+import { statusClass } from '@/utils/status'
+import { useRbac } from '@/stores/rbac'
+import PageHeading from '@/views/components/PageHeading.vue'
+
+const { can } = useRbac()
+
+const STATUS_TEXT = {
+  draft: '草稿',
+  reviewing: '审核中',
+  approved: '待发布',
+  published: '已上线',
+  offline: '已下线'
+}
+
+const categories = ref([])
+const activeId = ref(null)
+const activeCategory = computed(
+  () => categories.value.find((item) => item.id === activeId.value) || null
+)
+
+const loading = ref(false)
+const dramas = ref([])
+const total = ref(0)
+const pageIndex = ref(1)
+const pageSize = ref(10)
+const keyword = ref('')
+
+const dialogVisible = ref(false)
+const saving = ref(false)
+const editingId = ref(null)
+const form = reactive({ name: '', description: '', sort: 1, status: 1 })
+
+const candidateVisible = ref(false)
+const candidateLoading = ref(false)
+const candidates = ref([])
+const candidateTotal = ref(0)
+const candidatePage = ref(1)
+const candidatePageSize = ref(10)
+const candidateKeyword = ref('')
+const selectedDramas = ref([])
+const binding = ref(false)
+
+async function loadCategories() {
+  const res = await listPlaylistCategoriesApi()
+  categories.value = res.data || []
+  if (activeId.value && !categories.value.some((item) => item.id === activeId.value)) {
+    activeId.value = categories.value[0]?.id ?? null
+  }
+  if (!activeId.value) {
+    activeId.value = categories.value[0]?.id ?? null
+  }
+  await loadDramas()
+}
+
+async function loadDramas() {
+  if (!activeId.value) {
+    dramas.value = []
+    total.value = 0
+    return
+  }
+  loading.value = true
+  try {
+    const res = await listPlaylistCategoryDramasApi(activeId.value, {
+      keyword: keyword.value || undefined,
+      pageIndex: pageIndex.value,
+      pageSize: pageSize.value
+    })
+    dramas.value = res.data?.list || []
+    total.value = res.data?.total || 0
+  } finally {
+    loading.value = false
+  }
+}
+
+function selectCategory(row) {
+  if (activeId.value === row.id) return
+  activeId.value = row.id
+  pageIndex.value = 1
+  keyword.value = ''
+  loadDramas()
+}
+
+function search() {
+  pageIndex.value = 1
+  loadDramas()
+}
+
+function changePage(value) {
+  pageIndex.value = value
+  loadDramas()
+}
+
+function openCreate() {
+  editingId.value = null
+  const maxSort = categories.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
+  Object.assign(form, { name: '', description: '', sort: maxSort + 1, status: 1 })
+  dialogVisible.value = true
+}
+
+function openEdit(row) {
+  editingId.value = row.id
+  Object.assign(form, {
+    name: row.name,
+    description: row.description || '',
+    sort: row.sort ?? 0,
+    status: row.status ?? 1
+  })
+  dialogVisible.value = true
+}
+
+async function saveCategory() {
+  if (!form.name.trim()) {
+    ElMessage.warning('请填写剧单分类名称')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = {
+      name: form.name.trim(),
+      description: form.description.trim(),
+      sort: form.sort,
+      status: form.status
+    }
+    if (editingId.value) {
+      await updatePlaylistCategoryApi(editingId.value, payload)
+      ElMessage.success('剧单分类已更新')
+    } else {
+      const res = await createPlaylistCategoryApi(payload)
+      activeId.value = res.data
+      pageIndex.value = 1
+      ElMessage.success('剧单分类已创建')
+    }
+    dialogVisible.value = false
+    await loadCategories()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function confirmDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定删除剧单分类「${row.name}」吗？关联关系会一起删除，短剧本身不受影响。`,
+      '删除确认',
+      { confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning' }
+    )
+  } catch {
+    return
+  }
+  await deletePlaylistCategoryApi(row.id)
+  if (activeId.value === row.id) {
+    activeId.value = null
+  }
+  ElMessage.success('剧单分类已删除')
+  await loadCategories()
+}
+
+async function removeDrama(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定把「${row.title}」从「${activeCategory.value?.name}」移出吗？`,
+      '移除确认',
+      { confirmButtonText: '确认移出', cancelButtonText: '取消', type: 'warning' }
+    )
+  } catch {
+    return
+  }
+  await unbindPlaylistCategoryDramaApi(activeId.value, row.id)
+  ElMessage.success('已移出')
+  await Promise.all([loadDramas(), loadCategories()])
+}
+
+function openCandidates() {
+  candidateVisible.value = true
+  candidatePage.value = 1
+  candidateKeyword.value = ''
+  selectedDramas.value = []
+  loadCandidates()
+}
+
+async function loadCandidates() {
+  if (!activeId.value) return
+  candidateLoading.value = true
+  try {
+    const res = await listPlaylistCategoryDramaCandidatesApi(activeId.value, {
+      keyword: candidateKeyword.value || undefined,
+      pageIndex: candidatePage.value,
+      pageSize: candidatePageSize.value
+    })
+    candidates.value = res.data?.list || []
+    candidateTotal.value = res.data?.total || 0
+  } finally {
+    candidateLoading.value = false
+  }
+}
+
+function candidateSearch() {
+  candidatePage.value = 1
+  loadCandidates()
+}
+
+function changeCandidatePage(value) {
+  candidatePage.value = value
+  loadCandidates()
+}
+
+function onSelectionChange(rows) {
+  selectedDramas.value = rows
+}
+
+async function confirmBind() {
+  if (!selectedDramas.value.length) {
+    ElMessage.warning('请先选择要加入的短剧')
+    return
+  }
+  binding.value = true
+  try {
+    const res = await bindPlaylistCategoryDramasApi(
+      activeId.value,
+      selectedDramas.value.map((item) => item.id)
+    )
+    ElMessage.success(`已加入 ${res.data ?? selectedDramas.value.length} 部短剧`)
+    candidateVisible.value = false
+    await Promise.all([loadDramas(), loadCategories()])
+  } finally {
+    binding.value = false
+  }
+}
+
+function formatTime(value) {
+  if (!value) return '—'
+  return String(value).replace('T', ' ').slice(0, 19)
+}
+
+onMounted(loadCategories)
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="内容管理"
+    title="剧单管理"
+    description="剧单使用自己的分类体系（与「分类管理」无关），每个分类下直接选择短剧。"
+  >
+    <el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate">
+      <AppIcon :icon="AppIcons.add" />
+      新建分类
+    </el-button>
+  </PageHeading>
+
+  <div class="playlist-layout">
+    <aside class="panel playlist-layout__side">
+      <div class="playlist-layout__side-title">剧单分类</div>
+      <el-scrollbar height="560px">
+        <ul class="playlist-list">
+          <li
+            v-for="item in categories"
+            :key="item.id"
+            class="playlist-list__item"
+            :class="{ 'is-active': item.id === activeId }"
+            @click="selectCategory(item)"
+          >
+            <div class="playlist-list__main">
+              <span class="playlist-list__name">{{ item.name }}</span>
+              <span class="playlist-list__count">{{ item.dramaCount || 0 }}</span>
+            </div>
+            <div class="playlist-list__actions" @click.stop>
+              <el-button
+                v-if="can('drama:update')"
+                text
+                circle
+                size="small"
+                @click="openEdit(item)"
+              >
+                <AppIcon :icon="AppIcons.edit" :size="15" />
+              </el-button>
+              <el-button
+                v-if="can('drama:delete')"
+                text
+                circle
+                size="small"
+                @click="confirmDelete(item)"
+              >
+                <AppIcon :icon="AppIcons.delete" :size="15" />
+              </el-button>
+            </div>
+          </li>
+          <li v-if="!categories.length" class="playlist-list__empty">
+            还没有剧单分类，点右上角「新建分类」开始
+          </li>
+        </ul>
+      </el-scrollbar>
+    </aside>
+
+    <section class="panel playlist-layout__main">
+      <div class="playlist-toolbar">
+        <div class="playlist-toolbar__title">
+          {{ activeCategory?.name || '请选择剧单分类' }}
+          <small>共 {{ total }} 部短剧</small>
+          <small v-if="activeCategory?.description">{{ activeCategory.description }}</small>
+        </div>
+        <div class="playlist-toolbar__search">
+          <el-input
+            v-model="keyword"
+            placeholder="搜索短剧名称"
+            clearable
+            style="width: 200px"
+            @keyup.enter="search"
+            @clear="search"
+          />
+          <el-button type="primary" plain @click="search">查询</el-button>
+          <el-button v-if="can('drama:update')" :disabled="!activeId" @click="openCandidates">
+            <AppIcon :icon="AppIcons.add" />
+            选择短剧
+          </el-button>
+        </div>
+      </div>
+
+      <el-table
+        v-loading="loading"
+        :data="dramas"
+        row-key="id"
+        border
+        class="drama-el-table"
+        empty-text="该剧单分类下还没有短剧"
+      >
+        <el-table-column label="封面" width="88">
+          <template #default="{ row }">
+            <img v-if="row.cover" :src="row.cover" class="playlist-cover" alt="封面" />
+            <div v-else class="playlist-cover playlist-cover--empty">无</div>
+          </template>
+        </el-table-column>
+        <el-table-column prop="title" label="短剧名称" min-width="200" />
+        <el-table-column label="集数" width="90">
+          <template #default="{ row }">{{ row.totalEpisodes || 0 }}</template>
+        </el-table-column>
+        <el-table-column label="状态" width="110">
+          <template #default="{ row }">
+            <span class="status-dot" :class="statusClass(row.status)">
+              {{ STATUS_TEXT[row.status] || row.status }}
+            </span>
+          </template>
+        </el-table-column>
+        <el-table-column prop="sort" label="排序" width="90" />
+        <el-table-column label="更新时间" width="180">
+          <template #default="{ row }">{{ formatTime(row.updatedAt) }}</template>
+        </el-table-column>
+        <el-table-column label="操作" width="110" fixed="right">
+          <template #default="{ row }">
+            <el-button
+              v-if="can('drama:update')"
+              type="danger"
+              size="small"
+              @click="removeDrama(row)"
+              >移出</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+
+      <div class="playlist-pagination">
+        <el-pagination
+          :current-page="pageIndex"
+          :page-size="pageSize"
+          :total="total"
+          layout="total, prev, pager, next"
+          @current-change="changePage"
+        />
+      </div>
+    </section>
+  </div>
+
+  <el-dialog
+    v-model="dialogVisible"
+    :title="editingId ? '编辑剧单分类' : '新建剧单分类'"
+    width="460px"
+  >
+    <el-form label-position="top">
+      <el-form-item label="分类名称" required>
+        <el-input v-model="form.name" maxlength="20" placeholder="例如：本周必看" />
+      </el-form-item>
+      <el-form-item label="描述">
+        <el-input
+          v-model="form.description"
+          type="textarea"
+          :rows="2"
+          maxlength="255"
+          show-word-limit
+          placeholder="分类用途说明"
+        />
+      </el-form-item>
+      <div class="playlist-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>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" :loading="saving" @click="saveCategory">保存</el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog v-model="candidateVisible" title="选择短剧" width="760px">
+    <div class="playlist-toolbar__search" style="margin-bottom: 12px">
+      <el-input
+        v-model="candidateKeyword"
+        placeholder="搜索短剧名称"
+        clearable
+        style="width: 220px"
+        @keyup.enter="candidateSearch"
+        @clear="candidateSearch"
+      />
+      <el-button type="primary" plain @click="candidateSearch">查询</el-button>
+    </div>
+    <el-table
+      v-loading="candidateLoading"
+      :data="candidates"
+      row-key="id"
+      border
+      max-height="380"
+      empty-text="没有可选择的短剧"
+      @selection-change="onSelectionChange"
+    >
+      <el-table-column type="selection" width="48" />
+      <el-table-column prop="title" label="短剧名称" min-width="220" />
+      <el-table-column label="集数" width="90">
+        <template #default="{ row }">{{ row.totalEpisodes || 0 }}</template>
+      </el-table-column>
+      <el-table-column label="状态" width="110">
+        <template #default="{ row }">
+          <span class="status-dot" :class="statusClass(row.status)">
+            {{ STATUS_TEXT[row.status] || row.status }}
+          </span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序" width="90" />
+    </el-table>
+    <div class="playlist-pagination">
+      <el-pagination
+        :current-page="candidatePage"
+        :page-size="candidatePageSize"
+        :total="candidateTotal"
+        layout="total, prev, pager, next"
+        @current-change="changeCandidatePage"
+      />
+    </div>
+    <template #footer>
+      <el-button @click="candidateVisible = false">取消</el-button>
+      <el-button type="primary" :loading="binding" @click="confirmBind">
+        确定添加{{ selectedDramas.length ? `（${selectedDramas.length}）` : '' }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.playlist-layout {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.playlist-layout__side {
+  padding: 12px 0 8px;
+}
+
+.playlist-layout__side-title {
+  padding: 0 16px 10px;
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+}
+
+.playlist-list {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.playlist-list__item {
+  display: flex;
+  padding: 8px 12px 8px 16px;
+  color: var(--el-text-color-regular);
+  cursor: pointer;
+  border-left: 3px solid transparent;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.playlist-list__item:hover {
+  background: var(--el-fill-color-light);
+}
+
+.playlist-list__item.is-active {
+  font-weight: 600;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  border-left-color: var(--el-color-primary);
+}
+
+.playlist-list__main {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  min-width: 0;
+}
+
+.playlist-list__name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.playlist-list__count {
+  min-width: 24px;
+  padding: 0 6px;
+  font-size: 12px;
+  line-height: 18px;
+  color: var(--el-text-color-secondary);
+  text-align: center;
+  background: var(--el-fill-color);
+  border-radius: 9px;
+}
+
+.playlist-list__actions {
+  display: none;
+  gap: 2px;
+}
+
+.playlist-list__item:hover .playlist-list__actions {
+  display: flex;
+}
+
+.playlist-list__empty {
+  padding: 16px;
+  line-height: 1.6;
+  color: var(--el-text-color-secondary);
+}
+
+.playlist-layout__main {
+  padding: 16px;
+}
+
+.playlist-toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin-bottom: 14px;
+}
+
+.playlist-toolbar__title {
+  font-size: 16px;
+  font-weight: 600;
+}
+
+.playlist-toolbar__title small {
+  margin-left: 8px;
+  font-size: 12px;
+  font-weight: 400;
+  color: var(--el-text-color-secondary);
+}
+
+.playlist-toolbar__search {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+
+.playlist-cover {
+  width: 48px;
+  height: 64px;
+  object-fit: cover;
+  border-radius: 4px;
+}
+
+.playlist-cover--empty {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  background: var(--el-fill-color-light);
+}
+
+.playlist-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+
+.playlist-form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+</style>

src/views/contentManagement/upload/BatchUploadDialog.vue

@@ -326,17 +326,17 @@ function onEpisodesCreated(): void {
 
 .batch-upload-hint {
   margin: 0 0 12px;
-  color: var(--el-text-color-secondary);
   font-size: 13px;
+  color: var(--el-text-color-secondary);
 }
 
 .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);
+  margin-bottom: 12px;
   font-size: 12px;
+  color: var(--el-color-danger);
+  background: color-mix(in srgb, var(--el-color-danger) 8%, transparent);
+  border-radius: 6px;
 }
 
 .batch-upload-rejected p {
@@ -348,12 +348,12 @@ function onEpisodesCreated(): void {
 }
 
 .batch-upload-summary {
-  margin: 0 0 12px;
   padding: 8px 12px;
-  border-radius: 6px;
-  background: color-mix(in srgb, var(--el-color-success) 10%, transparent);
-  color: var(--el-text-color-primary);
+  margin: 0 0 12px;
   font-size: 13px;
+  color: var(--el-text-color-primary);
+  background: color-mix(in srgb, var(--el-color-success) 10%, transparent);
+  border-radius: 6px;
 }
 
 .batch-upload-list {

src/views/contentManagement/upload/CreateEpisodesDialog.vue

@@ -202,9 +202,9 @@ function hasFailed(): boolean {
 <style scoped>
 .create-episode-hint {
   margin: 0 0 12px;
-  color: var(--el-text-color-secondary);
   font-size: 13px;
   line-height: 1.5;
+  color: var(--el-text-color-secondary);
 }
 
 .create-episode-head,
@@ -229,8 +229,8 @@ function hasFailed(): boolean {
 
 .create-episode-head {
   margin-bottom: 8px;
-  color: var(--el-text-color-secondary);
   font-size: 12px;
+  color: var(--el-text-color-secondary);
 }
 
 .create-episode-list {
@@ -253,8 +253,8 @@ function hasFailed(): boolean {
 }
 
 .create-episode-result {
-  color: var(--el-text-color-secondary);
   font-size: 12px;
+  color: var(--el-text-color-secondary);
 }
 
 .create-episode-row.is-saved .create-episode-result {

src/views/contentManagement/upload/EpisodeTranscodePanel.vue

@@ -24,7 +24,7 @@ import {
 } from './episodeTranscodeUi'
 
 const props = defineProps<{
-  episodeId: number
+  episodeId: string | number
   active: boolean
 }>()
 
@@ -45,8 +45,8 @@ let pollTimer: ReturnType<typeof setTimeout> | null = null
 let requestSeq = 0
 let thumbnailSeq = 0
 
-const mediaAssetId = computed(() => Number(detail.value?.mediaAssetId || 0))
-const hasMedia = computed(() => mediaAssetId.value > 0)
+const mediaAssetId = computed(() => detail.value?.mediaAssetId || '')
+const hasMedia = computed(() => /^[1-9]\d*$/.test(mediaAssetId.value))
 const normalizedStatus = computed(() => String(detail.value?.status || '').toUpperCase())
 const renditions = computed(() => detail.value?.renditions || [])
 const isProcessing = computed(

src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue

@@ -2,12 +2,12 @@
 <!-- 剧集转码清晰度表格与播放地址操作 -->
 
 <script setup lang="ts">
-import { useClipboard } from '@vueuse/core'
-import { ElMessage } from 'element-plus'
+import { ref } from 'vue'
 import type { MediaRenditionItem } from '@/api/admin/types'
 import { AppIcon } from '@/components/AppIcon'
 import { AppIcons } from '@/constants/icons'
 import { useI18n } from '@/hooks/web/useI18n'
+import RenditionPlayerDialog from './RenditionPlayerDialog.vue'
 import {
   formatBytes,
   formatDuration,
@@ -20,30 +20,20 @@ defineProps<{
 }>()
 
 const { t } = useI18n()
-const { copy, isSupported } = useClipboard()
+
+const playerVisible = ref(false)
+const playerUrl = ref('')
+const playerTitle = ref('')
 
 function statusLabel(rendition: MediaRenditionItem) {
   return t(`episodeTranscode.status.${renditionStatusLabelKey(rendition.status)}`)
 }
 
-async function copyPlayUrl(url: string) {
-  if (!url) return
-  if (!isSupported.value) {
-    ElMessage.error(t('episodeTranscode.copyFailed'))
-    return
-  }
-  try {
-    await copy(url)
-    ElMessage.success(t('episodeTranscode.copySuccess'))
-  } catch {
-    ElMessage.error(t('episodeTranscode.copyFailed'))
-  }
-}
-
-function openPlayUrl(url: string) {
-  if (!url || !window.open(url, '_blank', 'noopener,noreferrer')) {
-    ElMessage.error(t('episodeTranscode.openFailed'))
-  }
+function playRendition(rendition: MediaRenditionItem) {
+  if (!rendition.hlsUrl) return
+  playerUrl.value = rendition.hlsUrl
+  playerTitle.value = `${rendition.qualityName} · ${rendition.resolution}`
+  playerVisible.value = true
 }
 </script>
 
@@ -82,21 +72,18 @@ function openPlayUrl(url: string) {
         </el-tag>
       </template>
     </el-table-column>
-    <el-table-column :label="t('episodeTranscode.actions')" width="92" fixed="right" align="center">
+    <el-table-column :label="t('episodeTranscode.actions')" width="76" fixed="right" align="center">
       <template #default="{ row }">
-        <el-tooltip :content="t('episodeTranscode.copyUrl')" placement="top">
-          <el-button text circle @click="copyPlayUrl(row.hlsUrl)">
-            <AppIcon :icon="AppIcons.copy" :size="17" />
-          </el-button>
-        </el-tooltip>
-        <el-tooltip :content="t('episodeTranscode.openUrl')" placement="top">
-          <el-button text circle @click="openPlayUrl(row.hlsUrl)">
-            <AppIcon :icon="AppIcons.openInNew" :size="17" />
+        <el-tooltip :content="t('episodeTranscode.play')" placement="top">
+          <el-button text circle @click="playRendition(row)">
+            <AppIcon :icon="AppIcons.videoPlay" :size="17" />
           </el-button>
         </el-tooltip>
       </template>
     </el-table-column>
   </el-table>
+
+  <RenditionPlayerDialog v-model="playerVisible" :url="playerUrl" :title="playerTitle" />
 </template>
 
 <style scoped>

src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue

@@ -6,6 +6,7 @@ import type { EpisodeTranscodeItem } from '@/api/admin/types'
 import { AppIcon } from '@/components/AppIcon'
 import { AppIcons } from '@/constants/icons'
 import { useI18n } from '@/hooks/web/useI18n'
+import { formatDateTime } from '@/utils/format'
 import type { TranscodeProgressStatus, TranscodeTagType } from './episodeTranscodeUi'
 
 interface StatusView {
@@ -47,7 +48,7 @@ const { t } = useI18n()
   </div>
   <el-empty
     v-else-if="detail && !view.hasMedia"
-    :description="t('episodeTranscode.noMedia')"
+    :description="detail.errorMsg || t('episodeTranscode.noMedia')"
     :image-size="72"
   />
   <template v-else-if="detail">
@@ -64,6 +65,10 @@ const { t } = useI18n()
         <span>{{ t('episodeTranscode.retryCount') }}</span>
         <b>{{ detail.retryCount || 0 }}</b>
       </div>
+      <div class="episode-transcode-status__metric">
+        <span>{{ t('episodeTranscode.updatedAt') }}</span>
+        <b>{{ formatDateTime(detail.updatedAt) }}</b>
+      </div>
       <el-button
         class="episode-transcode-status__retry"
         type="primary"
@@ -84,6 +89,9 @@ const { t } = useI18n()
       :status="view.progressStatus"
       :stroke-width="8"
     />
+    <p v-if="view.isProcessing && view.progress === 0" class="episode-transcode-status__waiting">
+      {{ t('episodeTranscode.waitingProgress') }}
+    </p>
     <el-alert
       v-if="detail.errorMsg"
       class="episode-transcode-status__error-alert"
@@ -138,6 +146,12 @@ const { t } = useI18n()
   margin-top: 12px;
 }
 
+.episode-transcode-status__waiting {
+  margin: 8px 0 0;
+  font-size: 12px;
+  color: var(--el-color-warning);
+}
+
 .episode-transcode-status__error-alert {
   margin-top: 12px;
 }

src/views/contentManagement/upload/RenditionPlayerDialog.vue

@@ -0,0 +1,126 @@
+<!-- Author: fruit.com.cn -->
+<!-- 清晰度产物 HLS 预览播放器：Chrome/Edge 用 hls.js，Safari 走原生 -->
+
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, ref, watch } from 'vue'
+import type Hls from 'hls.js'
+import { useI18n } from '@/hooks/web/useI18n'
+
+const props = defineProps<{
+  modelValue: boolean
+  url: string
+  title: string
+}>()
+
+const emit = defineEmits<{
+  (event: 'update:modelValue', value: boolean): void
+}>()
+
+const { t } = useI18n()
+
+const videoRef = ref<HTMLVideoElement>()
+const errorMsg = ref('')
+let hls: Hls | null = null
+
+function destroy() {
+  hls?.destroy()
+  hls = null
+  const video = videoRef.value
+  if (video) {
+    video.pause()
+    video.removeAttribute('src')
+    video.load()
+  }
+}
+
+async function start(url: string) {
+  await nextTick()
+  const video = videoRef.value
+  if (!video || !url) return
+  errorMsg.value = ''
+  destroy()
+
+  if (video.canPlayType('application/vnd.apple.mpegurl')) {
+    video.src = url
+    video.play().catch(() => {})
+    return
+  }
+
+  const { default: HlsPlayer } = await import('hls.js')
+  if (!HlsPlayer.isSupported()) {
+    errorMsg.value = t('episodeTranscode.playerUnsupported')
+    return
+  }
+  const instance = new HlsPlayer()
+  hls = instance
+  instance.on(HlsPlayer.Events.MANIFEST_PARSED, () => {
+    video.play().catch(() => {})
+  })
+  instance.on(HlsPlayer.Events.ERROR, (_event, data) => {
+    if (data?.fatal) {
+      errorMsg.value = t('episodeTranscode.playerFailed')
+    }
+  })
+  instance.loadSource(url)
+  instance.attachMedia(video)
+}
+
+watch(
+  () => props.modelValue,
+  (visible) => {
+    if (visible) {
+      start(props.url)
+    } else {
+      destroy()
+    }
+  }
+)
+
+onBeforeUnmount(destroy)
+</script>
+
+<template>
+  <el-dialog
+    :model-value="modelValue"
+    :title="title"
+    width="720px"
+    destroy-on-close
+    class="rendition-player-dialog"
+    @update:model-value="emit('update:modelValue', $event)"
+    @closed="destroy"
+  >
+    <div class="rendition-player">
+      <video ref="videoRef" class="rendition-player__video" controls playsinline></video>
+      <p v-if="errorMsg" class="rendition-player__error">{{ errorMsg }}</p>
+      <p class="rendition-player__url" :title="url">{{ url }}</p>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.rendition-player {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+
+.rendition-player__video {
+  width: 100%;
+  max-height: 62vh;
+  background: #000;
+  border-radius: 8px;
+}
+
+.rendition-player__error {
+  margin: 0;
+  font-size: 13px;
+  color: var(--el-color-danger);
+}
+
+.rendition-player__url {
+  margin: 0;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  word-break: break-all;
+}
+</style>

src/views/contentManagement/upload/UploadTaskRow.vue

@@ -100,10 +100,10 @@ const canRetry = computed(() => props.item.status === 'failed')
 }
 
 .upload-task-row__index {
-  flex: 0 0 auto;
   min-width: 1.5em;
-  color: var(--el-text-color-secondary);
   font-size: 13px;
+  color: var(--el-text-color-secondary);
+  flex: 0 0 auto;
   font-variant-numeric: tabular-nums;
 }
 
@@ -116,22 +116,22 @@ const canRetry = computed(() => props.item.status === 'failed')
 
 .upload-task-row__error {
   margin: 6px 0 0;
-  color: var(--el-color-danger);
   font-size: 12px;
+  color: var(--el-color-danger);
 }
 
 .upload-task-row__actions {
-  margin-top: 8px;
   display: flex;
+  margin-top: 8px;
+  margin-left: auto;
   gap: 8px;
   justify-content: flex-end;
-  margin-left: auto;
 }
 
 .upload-task-row.is-failed {
+  padding-right: 8px;
+  padding-left: 8px;
   background: color-mix(in srgb, var(--el-color-danger) 6%, transparent);
   border-radius: 6px;
-  padding-left: 8px;
-  padding-right: 8px;
 }
 </style>

src/views/systemManagement/LegalDocumentView.vue

@@ -0,0 +1,119 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup lang="ts">
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage } from 'element-plus'
+import {
+  listLegalDocumentsApi,
+  saveLegalDocumentsApi,
+  type LegalDocument
+} from '@/api/admin/legalDocument'
+
+const languages = [
+  { code: 'zh', label: '中文' },
+  { code: 'en', label: 'English' },
+  { code: 'id', label: 'Indonesia' }
+]
+
+const documents = [
+  { code: 'terms', label: '服务条款', path: '/terms' },
+  { code: 'privacy', label: '隐私协议', path: '/privacy' }
+]
+
+const loading = ref(false)
+const saving = ref(false)
+const activeDoc = ref('terms')
+const form = reactive<Record<string, LegalDocument>>({})
+
+const blank = (docCode: string, lang: string): LegalDocument => ({
+  docCode,
+  lang,
+  title: '',
+  content: ''
+})
+
+const fieldKey = (docCode: string, lang: string) => `${docCode}:${lang}`
+
+function ensureFields() {
+  for (const doc of documents) {
+    for (const lang of languages) {
+      const key = fieldKey(doc.code, lang.code)
+      if (!form[key]) form[key] = blank(doc.code, lang.code)
+    }
+  }
+}
+
+async function load() {
+  loading.value = true
+  try {
+    ensureFields()
+    const res = await listLegalDocumentsApi()
+    for (const item of res.data || []) {
+      form[fieldKey(item.docCode, item.lang)] = { ...item }
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+async function save() {
+  saving.value = true
+  try {
+    ensureFields()
+    const items = documents.flatMap((doc) =>
+      languages.map((lang) => ({ ...form[fieldKey(doc.code, lang.code)], title: '' }))
+    )
+    await saveLegalDocumentsApi(items)
+    ElMessage.success('协议已保存')
+    await load()
+  } finally {
+    saving.value = false
+  }
+}
+
+onMounted(load)
+ensureFields()
+</script>
+
+<template>
+  <div class="page-heading">
+    <div>
+      <div class="eyebrow">系统管理</div>
+      <h1>协议设置</h1>
+      <p>服务条款与隐私协议各维护中文、英文、印尼语。正文用 Markdown，打开后的页面不另加标题。</p>
+    </div>
+  </div>
+  <section v-loading="loading" class="panel settings-panel">
+    <el-tabs v-model="activeDoc">
+      <el-tab-pane v-for="doc in documents" :key="doc.code" :name="doc.code" :label="doc.label" />
+    </el-tabs>
+    <template v-for="doc in documents" :key="doc.code">
+      <div v-show="activeDoc === doc.code">
+        <p class="legal-path"
+          >公开地址：{{ doc.path }}/zh 、{{ doc.path }}/en 、{{ doc.path }}/id</p
+        >
+        <div v-for="lang in languages" :key="`${doc.code}-${lang.code}`" class="legal-block">
+          <h2>{{ lang.label }}</h2>
+          <el-input
+            v-model="form[`${doc.code}:${lang.code}`].content"
+            type="textarea"
+            :rows="14"
+            placeholder="直接写 Markdown，页面不再另加标题"
+          />
+        </div>
+      </div>
+    </template>
+    <el-button type="primary" :loading="saving" @click="save">保存</el-button>
+  </section>
+</template>
+
+<style scoped>
+.legal-path {
+  margin: 0 0 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.legal-block + .legal-block {
+  margin-top: 8px;
+}
+</style>

src/views/userManagement/AppUsersView.vue

@@ -11,6 +11,7 @@ import {
   COUNTRY_OPTIONS,
   formatDuration,
   statusMeta,
+  systemText,
   useAppUsers
 } from './composables/useAppUsers'
 
@@ -172,6 +173,9 @@ function canBeBanned(row) {
           </div>
         </template>
       </el-table-column>
+      <el-table-column label="系统" width="130" show-overflow-tooltip>
+        <template #default="{ row }">{{ systemText(row) }}</template>
+      </el-table-column>
       <el-table-column label="手机 / 邮箱" min-width="150" show-overflow-tooltip>
         <template #default="{ row }">
           <span class="app-user-mono">{{ row.maskedTarget || '—' }}</span>
@@ -268,6 +272,7 @@ function canBeBanned(row) {
             <el-descriptions-item label="最后登录">{{
               detail.lastLoginAt || '—'
             }}</el-descriptions-item>
+            <el-descriptions-item label="系统">{{ systemText(detail) }}</el-descriptions-item>
             <el-descriptions-item label="会员">
               {{ detail.vipLevel ? `等级 ${detail.vipLevel}` : '未开通（第二阶段）' }}
             </el-descriptions-item>
@@ -299,6 +304,9 @@ function canBeBanned(row) {
             <el-table-column label="完成" width="70">
               <template #default="{ row }">{{ row.finished ? '是' : '否' }}</template>
             </el-table-column>
+            <el-table-column label="系统" width="120" show-overflow-tooltip>
+              <template #default="{ row }">{{ systemText(row) }}</template>
+            </el-table-column>
             <el-table-column label="来源" width="80">
               <template #default="{ row }">{{
                 SOURCE_TEXT[row.source] || row.source || '—'

src/views/userManagement/WatchHistoryView.vue

@@ -4,7 +4,7 @@
 import { onMounted, reactive, ref } from 'vue'
 import PageHeading from '@/views/components/PageHeading.vue'
 import { pageWatchHistoryApi } from '@/api/admin/appUser'
-import { formatDuration } from './composables/useAppUsers'
+import { formatDuration, systemText } from './composables/useAppUsers'
 
 const SOURCE_OPTIONS = [
   { value: '', label: '全部' },
@@ -176,6 +176,9 @@ onMounted(load)
           </div>
         </template>
       </el-table-column>
+      <el-table-column label="系统" width="130" show-overflow-tooltip>
+        <template #default="{ row }">{{ systemText(row) }}</template>
+      </el-table-column>
       <el-table-column label="短剧" min-width="190">
         <template #default="{ row }">
           <el-tooltip :content="contentTooltip(row)" placement="top">

src/views/userManagement/composables/useAppUsers.js

@@ -34,6 +34,16 @@ export function statusMeta(status) {
   )
 }
 
+const PLATFORM_TEXT = { ANDROID: 'Android', IOS: 'iOS', WEB: 'Web' }
+
+/** 登录会话上的系统，例如 Android 16。没有记录时显示横线。 */
+export function systemText(row) {
+  const name = PLATFORM_TEXT[row?.platform] || row?.platform || ''
+  const version = row?.osVersion || ''
+  const text = `${name} ${version}`.trim()
+  return text || '—'
+}
+
 /** 毫秒转 mm:ss，观看流水里的进度用 */
 export function formatDuration(ms) {
   const total = Math.max(0, Math.floor((ms || 0) / 1000))