feat: phase1 UI prep — 后台 App 用户列表支持系统筛选 + 国家中文名 + 标签语义优化

新增: 系统下拉 (ANDROID/IOS)、国家中文名映射、用户列昵称/UID 冒号标签
详情抽屉: 同步系统/国家/标签展示

.env.base

@@ -17,4 +17,4 @@ VITE_USE_ALL_ELEMENT_PLUS_STYLE=true
 VITE_USE_MOCK=false
 
 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=false

.env.dev

@@ -29,10 +29,10 @@ VITE_USE_BUNDLE_ANALYZER=false
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
+VITE_USE_MOCK=false
 
 # 是否切割css
 VITE_USE_CSS_SPLIT=true
 
 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=false

.env.pro

@@ -29,10 +29,10 @@ VITE_USE_BUNDLE_ANALYZER=true
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
+VITE_USE_MOCK=false
 
 # 是否切割css
 VITE_USE_CSS_SPLIT=true
 
 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=false

.env.test

@@ -29,10 +29,10 @@ VITE_USE_BUNDLE_ANALYZER=false
 VITE_USE_ALL_ELEMENT_PLUS_STYLE=false
 
 # 是否开启mock
-VITE_USE_MOCK=true
+VITE_USE_MOCK=false
 
 # 是否切割css
 VITE_USE_CSS_SPLIT=false
 
 # 是否使用在线图标
-VITE_USE_ONLINE_ICON=true
+VITE_USE_ONLINE_ICON=false

.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

.husky/commit-msg

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

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-panel-split.md

@@ -0,0 +1,26 @@
+# 剧集转码面板组件拆分
+
+## 目标
+
+- 将 `EpisodeTranscodePanel.vue` 从 816 行降到 500 行以内。
+- 状态轮询、分页请求与切集重置继续由父面板统一管理。
+- UI 按职责拆为状态徽标、状态操作区、清晰度表格、帧图预览。
+
+## 组件
+
+1. `EpisodeTranscodeStatusBadge.vue`：折叠标题中的状态与进度。
+2. `EpisodeTranscodeStatusPanel.vue`：状态、进度、重试次数、错误与重转按钮。
+3. `EpisodeTranscodeRenditions.vue`：清晰度表格、复制地址、新窗口打开。
+4. `EpisodeTranscodeFrames.vue`：逐帧网格、雪碧图、分页与放大预览。
+
+公共状态映射与格式化放入 `episodeTranscodeUi.ts`。
+
+## 风险
+
+- 父组件仍负责全部接口、轮询、请求序号和分页状态，子组件只通过 props/emits 交互。
+- 不新增依赖、不改接口和 locales 文案。
+
+## 验证
+
+- `wc -l` 确认所有相关文件不超过 500 行。
+- `pnpm lint:eslint`、`pnpm build:dev`。

docs/plans/2026-10-22-transcode-profile-settings.md

@@ -0,0 +1,39 @@
+# 后台转码设置页面
+
+## 目标
+
+1. 在内容管理下新增「转码设置」页面，权限沿用 `episode:upload`。
+2. 页面字段与 FruitServer `MediaTranscodeProfile` 完全一致。
+3. 对接 `GET/PUT /admin/media/transcode-profile`，保存后回填服务端响应。
+4. 前端校验规则与后端一致，并在失败时定位到首个错误字段。
+
+## 方案
+
+- API：在 `src/api/admin/media.ts` 增加读取、保存函数，类型定义放
+  `src/api/admin/types.ts`；响应继续遵循现有 `Result {code,message,data}`。
+- 路由：静态路由表增加 `/content/media-transcode`；默认服务端动态路由模式下，
+  根据 `episode:upload` 权限把同一条本地路由补充进服务端 `/content` 菜单，
+  已存在同名菜单时不重复添加，仅统一 i18n 标题。
+- 页面：`views/systemManagement/TranscodeSettingsView.vue`，使用 Element Plus 表单、
+  表格、数字输入和开关；保存按钮受 `episode:upload` 控制。
+- 校验：
+  - quality 非空且忽略首尾空格后唯一；
+  - width/height 为正偶数；
+  - videoBitrateKbps/audioBitrateKbps 为正整数；
+  - segmentSeconds 2–10；
+  - sprite.intervalSeconds 1–10、columns 5–20、thumbWidth 120–240；
+  - ladder 至少一档 enabled。
+- 校验失败由 Element Plus 定位到首个错误 prop，动态列表错误会定位到对应行。
+- 所有可见文案、提示和校验信息进入 `zh-CN.ts` / `en.ts`。
+
+## 非目标
+
+- 不修改 FruitServer、ReelShort 或接口契约。
+- 不新增权限码、不新增依赖、不启动服务。
+
+## 测试与门禁
+
+- 当前工程没有单元/组件测试框架，不引入新依赖；使用 TS 类型检查和构建门禁。
+- `pnpm lint:eslint`
+- `pnpm ts:check`
+- `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

@@ -0,0 +1,189 @@
+## 2026-10-22 后台转码设置页面
+
+### 开工确认与计划
+
+- 仓库：ReelShortWeb
+- 基线：`develop` / `origin/develop` = `723d056`
+- 工作区：开工前干净
+- 分支：`feature/transcode-profile-settings`
+- 计划：`docs/plans/2026-10-22-transcode-profile-settings.md`
+
+```text
+$ git status --short --branch && git rev-parse --short HEAD
+## develop...origin/develop
+723d056
+```
+
+解读：基于指定 develop 基线创建隔离工作树。后端契约已确认字段为
+`enabled / segmentSeconds / ladder / sprite`，权限为 `episode:upload`。
+默认服务端动态菜单只读取 `sys_menu`，本单按“只改 Web”约束在不改后端的前提下，
+对具备 `episode:upload` 的账号补充本地受控菜单，后端接口仍执行最终鉴权。
+
+### 实现与门禁
+
+- 新增 `/content/media-transcode` 静态路由和服务端动态菜单补充；
+  菜单标题走 `router.transcodeSettings`，只在账号具备 `episode:upload` 时加入。
+- 新增转码设置页面，字段严格为 `enabled / segmentSeconds / ladder / sprite`；
+  支持档位增删、动态行校验、首个错误字段定位及服务端返回值回填。
+- API 使用现有 axios Result 包装，GET 初始化、PUT 保存；成功/失败/校验提示全部走中英 i18n。
+- 当前工程没有单元/组件测试框架，未新增依赖；使用 ESLint、TypeScript 与构建门禁。
+
+```text
+$ pnpm lint:eslint
+> fruitshorts-admin@1.0.0 lint:eslint /private/tmp/reelshortweb-transcode-settings
+> eslint --fix --ext .js,.ts,.vue ./src
+
+$ pnpm ts:check
+> fruitshorts-admin@1.0.0 ts:check /private/tmp/reelshortweb-transcode-settings
+> pnpm vue-tsc --noEmit --skipLibCheck
+```
+
+解读：ESLint 零告警，TypeScript 类型检查通过。
+
+```text
+$ pnpm build:dev
+> fruitshorts-admin@1.0.0 build:dev /private/tmp/reelshortweb-transcode-settings
+> VITE_CJS_IGNORE_WARNING=1 vite build --mode dev
+
+ WARN  Circular chunk: element-plus -> vue-chunks -> element-plus. Please adjust the manual chunk logic for these chunks.
+
+Build successful. Please see dist-dev directory
+```
+
+解读：开发构建成功；circular chunk 为仓库既有 Element Plus 分包警告，本次未改构建配置。
+
+## 2026-10-22 剧集转码面板组件拆分
+
+- 分支：`feature/transcode-panel-split`
+- 基线：`develop` / `origin/develop` = `52b10d3`
+- 计划：`docs/plans/2026-10-22-transcode-panel-split.md`
+
+已读取 `AGENTS.md` 与 `CODING_STANDARDS.md`。当前
+`EpisodeTranscodePanel.vue` 为 816 行，超过单文件 500 行红线。
+拆分将保持父组件的数据获取、轮询清理、分页请求与切集重置逻辑不变。
+
+### 拆分结果
+
+```text
+$ wc -l src/views/contentManagement/upload/EpisodeTranscodePanel.vue \
+  src/views/contentManagement/upload/EpisodeTranscodeStatusBadge.vue \
+  src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue \
+  src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue \
+  src/views/contentManagement/upload/EpisodeTranscodeFrames.vue \
+  src/views/contentManagement/upload/episodeTranscodeUi.ts
+266 EpisodeTranscodePanel.vue
+45 EpisodeTranscodeStatusBadge.vue
+155 EpisodeTranscodeStatusPanel.vue
+119 EpisodeTranscodeRenditions.vue
+315 EpisodeTranscodeFrames.vue
+93 episodeTranscodeUi.ts
+```
+
+解读：父面板只保留接口调用、轮询、请求序号、分页状态与组件组合；
+状态、清晰度、帧图分别独立，全部文件均低于 500 行。
+
+### 门禁
+
+```text
+$ pnpm ts:check
+> vue-tsc --noEmit --skipLibCheck
+（通过）
+
+$ pnpm lint:eslint
+> eslint --fix --ext .js,.ts,.vue ./src
+（0 error / 0 warning）
+
+$ pnpm build:dev
+ WARN  Circular chunk: element-plus -> vue-chunks -> element-plus.
+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 为项目既有警告。

index.html

@@ -2,7 +2,7 @@
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" href="/favicon.ico" />
+    <link rel="icon" type="image/png" href="/brand-mark.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title><%= title %></title>
   </head>
@@ -16,7 +16,8 @@
           justify-content: center;
           align-items: center;
           flex-direction: column;
-          background: #f0f2f5;
+          color: #f8f1ea;
+          background: #100c0a;
         }
 
         .app-loading .app-loading-wrap {
@@ -38,8 +39,9 @@
         }
 
         .app-loading .app-loading-logo {
-          width: 100px;
+          width: 72px;
           margin: 0 auto 15px;
+          border-radius: 12px;
         }
 
         .app-loading .app-loading-item {
@@ -55,7 +57,7 @@
           position: absolute;
           width: 100%;
           height: 100%;
-          border: 4px solid #2d8cf0;
+          border: 4px solid #c4322a;
           border-bottom: 0;
           border-left-color: transparent;
           border-radius: 50%;
@@ -68,7 +70,7 @@
           left: calc(50% - 20px);
           width: 40px;
           height: 40px;
-          border: 4px solid #87bdff;
+          border: 4px solid #ff8a72;
           border-right: 0;
           border-top-color: transparent;
           border-radius: 50%;
@@ -85,16 +87,6 @@
           }
         }
 
-        @keyframes loader-outter {
-          0% {
-            transform: rotate(0deg);
-          }
-
-          100% {
-            transform: rotate(360deg);
-          }
-        }
-
         @keyframes loader-inner {
           0% {
             transform: rotate(0deg);
@@ -105,20 +97,11 @@
           }
         }
 
-        @keyframes loader-inner {
-          0% {
-            transform: rotate(0deg);
-          }
-
-          100% {
-            transform: rotate(-360deg);
-          }
-        }
       </style>
       <div class="app-loading">
         <div class="app-loading-wrap">
           <div class="app-loading-title">
-            <img src="/logo.png" class="app-loading-logo" alt="Logo" />
+            <img src="/brand-mark.png" class="app-loading-logo" alt="Logo" />
             <div class="app-loading-title"><%= title %></div>
           </div>
           <div class="app-loading-item">

mock/_createProductionServer.ts

@@ -1,20 +0,0 @@
-// Author: fruit.com.cn
-
-import { createProdMockServer } from 'vite-plugin-mock/es/createProdMockServer'
-
-const modules = import.meta.glob('./**/*.mock.ts', {
-  import: 'default',
-  eager: true
-})
-
-const mockModules: any[] = []
-Object.keys(modules).forEach(async (key) => {
-  if (key.includes('_')) {
-    return
-  }
-  mockModules.push(...(modules[key] as any))
-})
-
-export function setupProdMockServer() {
-  createProdMockServer(mockModules)
-}

mock/role/index.mock.ts

@@ -1,131 +0,0 @@
-// Author: fruit.com.cn
-
-import { MockMethod } from 'vite-plugin-mock'
-import { SUCCESS_CODE } from '@/constants'
-
-const timeout = 1000
-
-const adminList = [
-  {
-    path: '/dashboard',
-    component: '#',
-    redirect: '/dashboard/index',
-    name: 'Dashboard',
-    meta: {
-      title: '工作台',
-      icon: 'ant-design:dashboard-filled'
-    },
-    children: [
-      {
-        path: 'index',
-        name: 'dashboard',
-        component: 'views/common/DashboardView',
-        meta: {
-          title: '工作台',
-          icon: 'ant-design:dashboard-filled',
-          affix: true
-        }
-      }
-    ]
-  },
-  {
-    path: '/content',
-    component: '#',
-    redirect: '/content/dramas',
-    name: 'Content',
-    meta: {
-      title: '内容管理',
-      icon: 'ep:video-camera',
-      alwaysShow: true
-    },
-    children: [
-      {
-        path: 'dramas',
-        name: 'dramas',
-        component: 'views/contentManagement/DramaManagementView',
-        meta: {
-          title: '短剧管理'
-        }
-      },
-      {
-        path: 'episodes',
-        name: 'episodes',
-        component: 'views/contentManagement/EpisodeManagementView',
-        meta: {
-          title: '剧集管理'
-        }
-      }
-    ]
-  },
-  {
-    path: '/system',
-    component: '#',
-    redirect: '/system/access',
-    name: 'System',
-    meta: {
-      title: '后台管理',
-      icon: 'ep:setting',
-      alwaysShow: true
-    },
-    children: [
-      {
-        path: 'access',
-        name: 'access',
-        component: 'views/permission/RoleManagementView',
-        meta: {
-          title: '角色权限配置'
-        }
-      },
-      {
-        path: 'admin-users',
-        name: 'admin-users',
-        component: 'views/userManagement/AdminUsersView',
-        meta: {
-          title: '管理员用户列表'
-        }
-      },
-      {
-        path: 'menus',
-        name: 'menus',
-        component: 'views/permission/MenuManagementView',
-        meta: {
-          title: '菜单管理'
-        }
-      },
-      {
-        path: 'role-categories',
-        name: 'role-categories',
-        component: 'views/permission/RoleCategoriesView',
-        meta: {
-          title: '角色分类'
-        }
-      },
-      {
-        path: 'settings',
-        name: 'settings',
-        component: 'views/systemManagement/SettingsView',
-        meta: {
-          title: '系统设置'
-        }
-      }
-    ]
-  }
-]
-
-const testList = adminList.filter((route) => route.path !== '/system')
-
-export default [
-  // 列表接口
-  {
-    url: '/mock/role/list',
-    method: 'get',
-    timeout,
-    response: ({ query }) => {
-      const { roleName } = query
-      return {
-        code: SUCCESS_CODE,
-        data: roleName === 'admin' ? adminList : testList
-      }
-    }
-  }
-] as MockMethod[]

mock/user/index.mock.ts

@@ -1,92 +0,0 @@
-// Author: fruit.com.cn
-
-import { SUCCESS_CODE } from '@/constants'
-
-const timeout = 1000
-
-const List: {
-  username: string
-  password: string
-  role: string
-  roleId: string
-  permissions: string | string[]
-}[] = [
-  {
-    username: 'admin',
-    password: 'admin123',
-    role: 'admin',
-    roleId: '1',
-    permissions: ['*.*.*']
-  },
-  {
-    username: 'test',
-    password: 'test',
-    role: 'test',
-    roleId: '2',
-    permissions: ['example:dialog:create', 'example:dialog:delete']
-  }
-]
-
-export default [
-  // 列表接口
-  {
-    url: '/mock/user/list',
-    method: 'get',
-    response: ({ query }) => {
-      const { username, pageIndex, pageSize } = query
-
-      const mockList = List.filter((item) => {
-        if (username && item.username.indexOf(username) < 0) return false
-        return true
-      })
-      const pageList = mockList.filter(
-        (_, index) => index < pageSize * pageIndex && index >= pageSize * (pageIndex - 1)
-      )
-
-      return {
-        code: SUCCESS_CODE,
-        data: {
-          total: mockList.length,
-          list: pageList
-        }
-      }
-    }
-  },
-  // 登录接口
-  {
-    url: '/mock/user/login',
-    method: 'post',
-    timeout,
-    response: ({ body }) => {
-      const data = body
-      let hasUser = false
-      for (const user of List) {
-        if (user.username === data.username && user.password === data.password) {
-          hasUser = true
-          return {
-            code: SUCCESS_CODE,
-            data: user
-          }
-        }
-      }
-      if (!hasUser) {
-        return {
-          code: 500,
-          message: '账号或密码错误'
-        }
-      }
-    }
-  },
-  // 退出接口
-  {
-    url: '/mock/user/loginOut',
-    method: 'get',
-    timeout,
-    response: () => {
-      return {
-        code: SUCCESS_CODE,
-        data: null
-      }
-    }
-  }
-]

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",
@@ -24,8 +24,6 @@
     "prepare": "husky install"
   },
   "dependencies": {
-    "@element-plus/icons-vue": "^2.3.2",
-    "@faker-js/faker": "^8.4.0",
     "@iconify/iconify": "^3.1.1",
     "@iconify/vue": "^4.1.1",
     "@vueuse/core": "^10.7.2",
@@ -40,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",
@@ -103,7 +102,6 @@
     "vite": "5.0.12",
     "vite-plugin-ejs": "^1.7.0",
     "vite-plugin-eslint": "^1.8.1",
-    "vite-plugin-mock": "2.9.6",
     "vite-plugin-progress": "^0.0.7",
     "vite-plugin-purge-icons": "^0.10.0",
     "vite-plugin-style-import": "2.0.0",

src/App.vue

@@ -22,6 +22,7 @@ appStore.initTheme()
 <template>
   <ConfigGlobal :size="currentSize">
     <RouterView :class="greyMode ? `${prefixCls}-grey-mode` : ''" />
+    <footer class="app-copyright">© FruitShorts</footer>
   </ConfigGlobal>
 </template>
 
@@ -48,4 +49,15 @@ body {
 .@{prefix-cls}-grey-mode {
   filter: grayscale(100%);
 }
+
+.app-copyright {
+  position: fixed;
+  right: 20px;
+  bottom: 10px;
+  z-index: 5;
+  font-size: 12px;
+  line-height: 1;
+  color: var(--el-text-color-secondary, #909399);
+  pointer-events: none;
+}
 </style>

src/api/admin/appUser.ts

@@ -11,6 +11,24 @@ export interface AppUserPageParams {
   status?: string
   countryCode?: string
   registerSource?: string
+  /** 客户端平台：ANDROID / IOS / WEB */
+  platform?: string
+}
+
+export interface WatchHistoryPageParams {
+  pageIndex?: number
+  pageSize?: number
+  keyword?: string
+  userId?: number
+  dramaTitle?: string
+  dramaId?: number
+  episodeId?: number
+  /** 客户端平台：ANDROID / IOS / WEB */
+  platform?: string
+  source?: string
+  finished?: boolean
+  startTime?: string
+  endTime?: string
 }
 
 export const pageAppUsersApi = (params: AppUserPageParams) => {
@@ -32,6 +50,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/appVersion.ts

@@ -0,0 +1,69 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+
+export interface AppVersionItem {
+  id: string
+  platform: 'ANDROID' | 'IOS'
+  platformText: string
+  versionCode: number
+  versionName: string
+  downloadUrl: string
+  updateContent?: string
+  forceUpdate: number
+  minSupportedCode: number
+  status: number
+  statusText: string
+  releasedAt?: string
+  createdAt?: string
+}
+
+export interface AppVersionSaveData {
+  platform: 'ANDROID' | 'IOS'
+  versionCode: number
+  versionName: string
+  downloadUrl: string
+  updateContent?: string
+  forceUpdate?: 0 | 1
+  minSupportedCode?: number
+}
+
+export const listAppVersionsApi = (params: {
+  pageIndex?: number
+  pageSize?: number
+  platform?: string
+  status?: number
+  keyword?: string
+}) => {
+  return request.get<{ total: number; list: AppVersionItem[] }>({
+    url: '/admin/app-versions/page',
+    params
+  })
+}
+
+export const getAppVersionApi = (id: string | number) => {
+  return request.get<AppVersionItem>({ url: `/admin/app-versions/${id}` })
+}
+
+export const createAppVersionApi = (data: AppVersionSaveData) => {
+  return request.post<string>({ url: '/admin/app-versions', data })
+}
+
+export const batchCreateAppVersionsApi = (data: AppVersionSaveData[]) => {
+  return request.post<string[]>({ url: '/admin/app-versions/batch', data })
+}
+
+export const updateAppVersionApi = (id: string | number, data: AppVersionSaveData) => {
+  return request.post<void>({ url: `/admin/app-versions/${id}`, data })
+}
+
+export const updateAppVersionStatusApi = (id: string | number, status: 0 | 1) => {
+  return request.post<void>({
+    url: `/admin/app-versions/${id}/status`,
+    params: { status }
+  })
+}
+
+export const deleteAppVersionApi = (id: string | number) => {
+  return request.delete<void>({ url: `/admin/app-versions/${id}` })
+}

src/api/admin/contentTag.ts

@@ -0,0 +1,41 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+
+export interface ContentTagItem {
+  id: number
+  name: string
+  nameEn: string
+  nameId: string
+  locales?: Record<string, string>
+  bgColor?: string
+  sort: number
+  status: number
+}
+
+export interface ContentTagSaveData {
+  name: string
+  locales: Record<string, string>
+  bgColor?: string
+  sort?: number
+  status?: number
+}
+
+export const listContentTagsApi = (enabledOnly = false) => {
+  return request.get<ContentTagItem[]>({
+    url: '/admin/content-tags',
+    params: enabledOnly ? { enabledOnly: true } : undefined
+  })
+}
+
+export const createContentTagApi = (data: ContentTagSaveData) => {
+  return request.post<number>({ url: '/admin/content-tags', data })
+}
+
+export const updateContentTagApi = (id: number, data: ContentTagSaveData) => {
+  return request.put<void>({ url: `/admin/content-tags/${id}`, data })
+}
+
+export const deleteContentTagApi = (id: number) => {
+  return request.delete<void>({ url: `/admin/content-tags/${id}` })
+}

src/api/admin/dashboard.ts

@@ -27,6 +27,28 @@ export interface TranscodeBoard {
   notes: string[]
 }
 
+/** 近 7 天每日趋势（给折线图用）。 */
+export interface DashboardTrend {
+  dates: string[]
+  newUsers: number[]
+  playEvents: number[]
+  newTranscodes: number[]
+  transcodeSuccess: number[]
+}
+
+/** 分布项（给饼图用）。 */
+export interface DistributionItem {
+  label: string
+  value: number
+}
+
+export interface DashboardDistribution {
+  dramaStatus: Record<string, number>
+  transcodeStatus: Record<string, number>
+  episodeMedia: Record<string, number>
+  pendingModeration: DistributionItem[]
+}
+
 export const getDashboardOverviewApi = () => {
   return request.get<DashboardOverview>({ url: '/admin/dashboard/overview' })
 }
@@ -34,3 +56,11 @@ export const getDashboardOverviewApi = () => {
 export const getTranscodeBoardApi = () => {
   return request.get<TranscodeBoard>({ url: '/admin/dashboard/transcode' })
 }
+
+export const getDashboardTrendApi = () => {
+  return request.get<DashboardTrend>({ url: '/admin/dashboard/trend' })
+}
+
+export const getDashboardDistributionApi = () => {
+  return request.get<DashboardDistribution>({ url: '/admin/dashboard/distribution' })
+}

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) => {
@@ -50,6 +52,7 @@ export const listDramaCategoryOptionsApi = () => {
 
 export interface DramaCategorySaveData {
   name: string
+  locales: Record<string, string>
   sort?: number
   status?: number
 }

src/api/admin/dramaClassification.ts

@@ -0,0 +1,89 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { PageResult } from './types'
+
+export interface DramaClassificationItem {
+  id: number
+  name: string
+  nameEn: string
+  nameId: string
+  locales?: Record<string, string>
+  sort: number
+  status: number
+  dramaCount: number
+  updatedAt?: string
+}
+
+export interface DramaClassificationSaveData {
+  name: string
+  locales: Record<string, 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,87 @@
+// 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
+  nameEn: string
+  nameId: string
+  description: string
+  descriptionEn: string
+  descriptionId: string
+  locales?: Record<string, string>
+  descriptionLocales?: Record<string, string>
+  sort: number
+  status: number
+  dramaCount: number
+}
+
+export interface DramaPlaylistCategorySaveData {
+  name: string
+  locales: Record<string, string>
+  descriptionLocales?: Record<string, 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/engagement.ts

@@ -0,0 +1,54 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type { PageResult } from './types'
+
+/** 收藏与点赞只读分页筛选条件。 */
+export interface EngagementPageParams {
+  pageIndex?: number
+  pageSize?: number
+  keyword?: string
+  userId?: string | number
+  deviceId?: string
+  /** 客户端平台：ANDROID / IOS / WEB */
+  platform?: string
+  dramaId?: string | number
+  dramaTitle?: string
+  targetType?: string
+  targetId?: string | number
+  episodeId?: string | number
+  startTime?: string
+  endTime?: string
+}
+
+/** 后台互动列表行。 */
+export interface EngagementItem {
+  id: string
+  userId: string | null
+  uid: string | null
+  nickname: string | null
+  deviceId: string | null
+  /** 客户端平台 ANDROID / IOS / WEB；老客户端未上报时为空。 */
+  platform: string | null
+  anonymous: boolean
+  dramaId: string | null
+  dramaTitle: string | null
+  dramaCover: string | null
+  dramaStatus: string | null
+  dramaPublished: boolean | null
+  targetType: string
+  targetId: string
+  episodeId: string | null
+  episodeNo: number | null
+  episodeTitle: string | null
+  commentSummary: string | null
+  createdAt: string
+}
+
+/** 查询收藏分页。 */
+export const pageFavoritesApi = (params: EngagementPageParams) =>
+  request.get<PageResult<EngagementItem>>({ url: '/admin/favorites/page', params })
+
+/** 查询点赞分页。 */
+export const pageLikesApi = (params: EngagementPageParams) =>
+  request.get<PageResult<EngagementItem>>({ url: '/admin/likes/page', params })

src/api/admin/episode.ts

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

src/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/media.ts

@@ -1,7 +1,7 @@
 // Author: fruit.com.cn
 
 import request from '@/axios'
-import type { MediaAsset } from './types'
+import type { MediaAsset, MediaTranscodeProfile } from './types'
 
 export interface UploadInitData {
   fileName: string
@@ -61,3 +61,20 @@ export const getUploadProgressApi = (uploadId: string) => {
 export const getMediaApi = (id: number) => {
   return request.get<MediaAsset>({ url: `/admin/media/${id}` })
 }
+
+/** 读取当前转码档位配置；缺省时后端返回四档默认值。 */
+export const getMediaTranscodeProfileApi = () => {
+  return request.get<MediaTranscodeProfile>({
+    url: '/admin/media/transcode-profile',
+    silent: true
+  })
+}
+
+/** 保存转码档位配置，并返回服务端最终生效值。 */
+export const saveMediaTranscodeProfileApi = (data: MediaTranscodeProfile) => {
+  return request.put<MediaTranscodeProfile>({
+    url: '/admin/media/transcode-profile',
+    data,
+    silent: true
+  })
+}

src/api/admin/transcode.ts

@@ -0,0 +1,43 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+import type {
+  EpisodeTranscodeItem,
+  MediaThumbnailResult,
+  TranscodeBackfillResult,
+  TranscodeTriggerResult
+} from './types'
+
+/** 分集编辑页聚合查询转码任务、清晰度与帧图。 */
+export const getEpisodeTranscodeApi = (episodeId: number | string) => {
+  return request.get<EpisodeTranscodeItem>({
+    url: `/admin/episodes/${episodeId}/transcode`
+  })
+}
+
+/** 按媒体分页读取帧图；页面切换时复用该接口。 */
+export const getMediaThumbnailsApi = (
+  mediaAssetId: string,
+  pageIndex: number,
+  pageSize: number
+) => {
+  return request.get<MediaThumbnailResult>({
+    url: `/admin/media/${mediaAssetId}/thumbnails`,
+    params: { pageIndex, pageSize }
+  })
+}
+
+/** 手动触发或重转当前分集绑定的媒体。 */
+export const triggerMediaTranscodeApi = (mediaAssetId: string) => {
+  return request.post<TranscodeTriggerResult>({
+    url: `/admin/media/${mediaAssetId}/transcode`
+  })
+}
+
+/** 手动补齐转码：扫描缺码率产物/帧图的分集并入队。 */
+export const runTranscodeBackfillApi = (batchSize?: number) => {
+  return request.post<TranscodeBackfillResult>({
+    url: '/admin/media/transcode/backfill',
+    params: batchSize ? { batchSize } : undefined
+  })
+}

src/api/admin/transcodeNotice.ts

@@ -0,0 +1,27 @@
+// Author: fruit.com.cn
+
+import request from '@/axios'
+
+export interface TranscodeNoticeItem {
+  id: number
+  status: string
+  dramaTitle: string
+  episodeNo?: number
+  episodeTitle?: string
+  progress?: number
+  errorMsg?: string
+  updatedAt?: string
+}
+
+export interface TranscodeNotice {
+  running: number
+  success: number
+  failed: number
+  runningList: TranscodeNoticeItem[]
+  successList: TranscodeNoticeItem[]
+  failedList: TranscodeNoticeItem[]
+}
+
+export const getTranscodeNoticesApi = () => {
+  return request.get<TranscodeNotice>({ url: '/admin/notifications/transcode' })
+}

src/api/admin/types.ts

@@ -8,6 +8,9 @@ export interface PageResult<T> {
 export interface DramaCategory {
   id: number
   name: string
+  nameEn?: string
+  nameId?: string
+  locales?: Record<string, string>
   sort?: number
   status?: number
   /** 该类型下的短剧数量，管理列表才有 */
@@ -20,11 +23,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 +40,9 @@ export interface DramaItem {
   status: string
   statusText: string
   views?: number
+  favoriteCount?: number
+  likeCount?: number
+  commentCount?: number
   sort?: number
   publishAt?: string
   createdAt?: string
@@ -43,12 +53,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 +85,10 @@ export interface EpisodeItem {
   status: string
   statusText: string
   views?: number
+  likeCount?: number
+  commentCount?: number
+  favoriteCount?: number
+  heat?: number
   sort?: number
 }
 
@@ -81,6 +101,7 @@ export interface EpisodeSaveData {
   videoUrl?: string
   isFree?: boolean
   unlockCoin?: number
+  likeCount?: number
   status?: string
   sort?: number
 }
@@ -204,6 +225,115 @@ export interface MediaAsset {
   createdAt?: string
 }
 
+/** 单档清晰度配置，字段与 FruitServer MediaTranscodeProfile.Rung 一致。 */
+export interface MediaTranscodeLadderRung {
+  quality: string
+  width: number
+  height: number
+  videoBitrateKbps: number
+  audioBitrateKbps: number
+  enabled: boolean
+}
+
+/** 雪碧图采样配置，字段与 FruitServer MediaTranscodeProfile.Sprite 一致。 */
+export interface MediaTranscodeSprite {
+  enabled: boolean
+  intervalSeconds: number
+  columns: number
+  thumbWidth: number
+}
+
+/** 转码档位配置，字段与 FruitServer MediaTranscodeProfile 一致。 */
+export interface MediaTranscodeProfile {
+  enabled: boolean
+  segmentSeconds: number
+  ladder: MediaTranscodeLadderRung[]
+  sprite: MediaTranscodeSprite
+}
+
+export interface MediaRenditionItem {
+  id: string
+  quality: string
+  qualityName: string
+  width: number
+  height: number
+  resolution: string
+  videoBitrateKbps: number
+  audioBitrateKbps: number
+  videoCodec: string
+  audioCodec?: string
+  container: string
+  hlsUrl: string
+  sizeBytes: number
+  durationSec: number
+  segmentCount: number
+  status: string
+}
+
+export interface MediaThumbnailFrameItem {
+  frameIndex: number
+  timeMs: number
+  endTimeMs?: number
+  imageUrl: string
+  spriteUrl: string
+  x: number
+  y: number
+  width: number
+  height: number
+}
+
+export interface MediaThumbnailSpriteInfo {
+  spriteUrl?: string
+  spriteUrls: string[]
+  vttUrl?: string
+  columns: number
+  rows: number
+  totalFrames: number
+  thumbWidth: number
+  thumbHeight: number
+  intervalSeconds: number
+}
+
+export interface MediaThumbnailResult {
+  mediaAssetId?: string | null
+  episodeId?: string | null
+  /** READY / FAILED / EMPTY / INVALID / NO_EPISODE */
+  status: string
+  errorMsg?: string
+  pageIndex: number
+  pageSize: number
+  frames: PageResult<MediaThumbnailFrameItem>
+  sprite?: MediaThumbnailSpriteInfo | null
+}
+
+export interface EpisodeTranscodeItem {
+  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: string
+  status: string
+}
+
+export interface TranscodeBackfillItem {
+  episodeId: string
+  taskId: string
+}
+
+export interface TranscodeBackfillResult {
+  triggered: number
+  items: TranscodeBackfillItem[]
+}
+
 export interface BannerItem {
   id: number
   imageUrl: string
@@ -269,6 +399,10 @@ export interface AppUserItem {
   maskedTarget: string
   createdAt?: string
   lastLoginAt?: string
+  /** ANDROID / IOS / WEB */
+  platform?: string
+  /** 系统版本，例如 Android 16 */
+  osVersion?: string
   /** 预留：会员等级与到期（第二阶段） */
   vipLevel?: number
   vipExpireAt?: string
@@ -294,16 +428,22 @@ 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
   source: string
   deviceId: string
+  platform?: string
+  osVersion?: string
   watchedAt?: string
 }
 
@@ -311,7 +451,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 +473,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/api/login/index.ts

@@ -26,10 +26,6 @@ export const getAdminRoleApi = (
   return request.get({ url: '/admin/auth/menus', params })
 }
 
-export const getTestRoleApi = (params: RoleParams): Promise<IResponse<string[]>> => {
-  return request.get({ url: '/mock/role/list2', params })
-}
-
 /** 自助改密（首登强制改密也走这个接口） */
 export const changePasswordApi = (data: { oldPassword: string; newPassword: string }) => {
   return request.post<void>({ url: '/admin/auth/password', data })

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/Logo/src/Logo.vue

@@ -68,7 +68,12 @@ watch(
     >
       <img
         src="@/assets/imgs/brand-mark.png"
-        class="w-[var(--brand-mark-size)] h-[var(--brand-mark-size)] rounded-[var(--brand-mark-radius)] object-cover"
+        class="object-cover"
+        style="
+          width: var(--brand-mark-size);
+          height: var(--brand-mark-size);
+          border-radius: var(--brand-mark-radius);
+        "
       />
       <div
         v-if="show"

src/components/Menu/src/components/useRenderMenuItem.tsx

@@ -9,7 +9,7 @@ const { renderMenuTitle } = useRenderMenuTitle()
 export const useRenderMenuItem = () =>
   // allRouters: AppRouteRecordRaw[] = [],
   {
-    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/') => {
+    const renderMenuItem = (routers: AppRouteRecordRaw[], parentPath = '/', nested = false) => {
       return routers
         .filter((v) => !v.meta?.hidden)
         .map((v) => {
@@ -22,21 +22,25 @@ export const useRenderMenuItem = () =>
             (!onlyOneChild?.children || onlyOneChild?.noShowingChildren) &&
             !meta?.alwaysShow
           ) {
+            const leafMeta = onlyOneChild?.meta
+              ? {
+                  ...onlyOneChild.meta,
+                  icon: onlyOneChild.meta.icon || meta.icon
+                }
+              : meta
             return (
               <ElMenuItem
                 index={onlyOneChild ? pathResolve(fullPath, onlyOneChild.path) : fullPath}
               >
-                {{
-                  default: () => renderMenuTitle(onlyOneChild ? onlyOneChild?.meta : meta)
-                }}
+                {{ default: () => renderMenuTitle(leafMeta, !nested) }}
               </ElMenuItem>
             )
           } else {
             return (
               <ElSubMenu index={fullPath}>
                 {{
-                  title: () => renderMenuTitle(meta),
-                  default: () => renderMenuItem(v.children!, fullPath)
+                  title: () => renderMenuTitle(meta, !nested),
+                  default: () => renderMenuItem(v.children!, fullPath, true)
                 }}
               </ElSubMenu>
             )

src/components/Menu/src/components/useRenderMenuTitle.tsx

@@ -5,11 +5,11 @@ import { AppIcon } from '@/components/AppIcon'
 import { useI18n } from '@/hooks/web/useI18n'
 
 export const useRenderMenuTitle = () => {
-  const renderMenuTitle = (meta: RouteMeta) => {
+  const renderMenuTitle = (meta: RouteMeta, showIcon = true) => {
     const { t } = useI18n()
     const { title = 'Please set title', icon } = meta
 
-    return icon ? (
+    return icon && showIcon ? (
       <>
         <AppIcon icon={meta.icon}></AppIcon>
         <span class="v-menu__title overflow-hidden overflow-ellipsis whitespace-nowrap">

src/components/Setting/src/Setting.vue

@@ -195,7 +195,7 @@ const themeChange = () => {
       <ColorRadioPicker
         v-model="systemTheme"
         :schema="[
-          '#409eff',
+          '#c4322a',
           '#009688',
           '#536dfe',
           '#ff5c93',

src/components/UserInfo/src/components/LockDialog.vue

@@ -2,11 +2,10 @@
 
 <script setup lang="ts">
 import { useI18n } from '@/hooks/web/useI18n'
-import { ref } from 'vue'
+import { computed, reactive } from 'vue'
 import { Dialog } from '@/components/Dialog'
 import { Form } from '@/components/Form'
 import { useForm } from '@/hooks/web/useForm'
-import { reactive, computed } from 'vue'
 import { useValidator } from '@/hooks/web/useValidator'
 import { FormSchema } from '@/components/Form'
 import { ElButton } from 'element-plus'
@@ -41,13 +40,10 @@ const emit = defineEmits(['update:modelValue'])
 
 const dialogVisible = computed({
   get: () => props.modelValue,
-  set: (val) => {
-    console.log('set: ', val)
-    emit('update:modelValue', val)
-  }
+  set: (val) => emit('update:modelValue', val)
 })
 
-const dialogTitle = ref(t('lock.lockScreen'))
+const dialogTitle = computed(() => t('lock.lockScreen'))
 
 const rules = reactive({
   password: [required()]
@@ -60,7 +56,10 @@ const schema: FormSchema[] = reactive([
     component: 'Input',
     componentProps: {
       type: 'password',
-      showPassword: true
+      showPassword: true,
+      style: {
+        width: '100%'
+      }
     }
   }
 ])
@@ -82,41 +81,169 @@ const handleLock = async () => {
     }
   })
 }
+
+const cancel = () => {
+  dialogVisible.value = false
+}
 </script>
 
 <template>
   <Dialog
     v-model="dialogVisible"
-    width="500px"
-    max-height="170px"
+    width="440px"
+    max-height="320px"
     :class="prefixCls"
     :title="dialogTitle"
+    :fullscreen="false"
   >
-    <div class="flex flex-col items-center">
-      <img
-        v-if="avatarUrl"
-        :src="avatarUrl"
-        alt=""
-        class="w-70px h-70px rounded-[50%] object-cover"
-      />
-      <span
-        v-else
-        class="w-70px h-70px rounded-[50%] flex items-center justify-center bg-[var(--el-fill-color)]"
-        ><AppIcon :icon="AppIcons.person" :size="30"
-      /></span>
-      <span class="text-14px my-10px text-[var(--top-header-text-color)]">{{ displayName }}</span>
+    <template #title>
+      <div class="lock-dialog-heading">
+        <AppIcon :icon="AppIcons.lock" :size="20" />
+        <div>
+          <h2>{{ dialogTitle }}</h2>
+          <p>{{ t('lock.description') }}</p>
+        </div>
+      </div>
+    </template>
+
+    <div class="lock-dialog-body">
+      <div class="lock-dialog-user">
+        <img v-if="avatarUrl" :src="avatarUrl" alt="" class="lock-dialog-avatar" />
+        <span v-else class="lock-dialog-avatar lock-dialog-avatar--empty">
+          <AppIcon :icon="AppIcons.person" :size="28" />
+        </span>
+        <span class="lock-dialog-name">{{ displayName }}</span>
+      </div>
+      <div class="lock-password-field" @keyup.enter.prevent.stop="handleLock">
+        <Form
+          :is-col="false"
+          :schema="schema"
+          :rules="rules"
+          label-position="top"
+          @register="formRegister"
+        />
+      </div>
     </div>
-    <Form :is-col="false" :schema="schema" :rules="rules" @register="formRegister" />
+
     <template #footer>
-      <ElButton type="primary" @click="handleLock">{{ t('lock.lock') }}</ElButton>
+      <ElButton class="lock-dialog-cancel" @click="cancel">{{ t('common.cancel') }}</ElButton>
+      <ElButton type="primary" class="lock-dialog-submit" @click="handleLock">
+        {{ t('lock.lock') }}
+      </ElButton>
     </template>
   </Dialog>
 </template>
 
 <style lang="less" scoped>
 :global(.v-lock-dialog) {
-  @media (width <= 767px) {
+  display: flex;
+  width: 440px !important;
+  height: auto !important;
+  max-width: calc(100vw - 24px);
+  max-height: 440px;
+  overflow: hidden;
+  flex-direction: column;
+}
+
+:global(.v-lock-dialog .el-dialog__header) {
+  height: auto;
+  min-height: 56px;
+  padding: 8px 20px 4px !important;
+  border-bottom: 0;
+}
+
+:global(.v-lock-dialog .el-dialog__body) {
+  min-height: 0;
+  padding: 4px 20px 8px !important;
+  overflow: hidden;
+}
+
+:global(.v-lock-dialog .el-dialog__footer) {
+  padding: 6px 20px 10px;
+}
+
+:global(.v-lock-dialog .el-dialog__footer .el-button) {
+  height: 36px;
+  min-width: 96px;
+}
+
+:global(.v-lock-dialog .el-dialog__header .absolute) {
+  right: -14px !important;
+}
+
+@media (width <= 767px) {
+  :global(.v-lock-dialog) {
     max-width: calc(100vw - 16px);
   }
 }
+
+.lock-dialog-heading {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  padding-right: 40px;
+  color: var(--el-text-color-primary);
+
+  .app-icon {
+    margin-top: 2px;
+    color: var(--el-color-primary);
+  }
+
+  h2 {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 650;
+    line-height: 1.4;
+  }
+
+  p {
+    margin: 3px 0 0;
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 1.4;
+    color: var(--el-text-color-secondary);
+  }
+}
+
+.lock-dialog-body {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.lock-dialog-user {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 10px;
+}
+
+.lock-dialog-avatar {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  object-fit: cover;
+}
+
+.lock-dialog-avatar--empty {
+  display: flex;
+  color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9);
+  align-items: center;
+  justify-content: center;
+}
+
+.lock-dialog-name {
+  font-size: 14px;
+  font-weight: 600;
+  color: var(--el-text-color-regular);
+}
+
+.lock-password-field {
+  width: 100%;
+}
+
+.lock-dialog-submit {
+  min-width: 96px;
+}
 </style>

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/constants/contentLanguages.ts

@@ -0,0 +1,46 @@
+// Author: fruit.com.cn
+
+export interface ContentLanguage {
+  code: string
+  label: string
+}
+
+export const CONTENT_LANGUAGES: ContentLanguage[] = [
+  { code: 'zh', label: '中文' },
+  { code: 'en', label: '英文' },
+  { code: 'id', label: '印尼语' }
+]
+
+export function languageLabel(code: string) {
+  return CONTENT_LANGUAGES.find((item) => item.code === code)?.label || code
+}
+
+export function languageCodes(locales?: Record<string, string> | null) {
+  const source = locales || {}
+  return CONTENT_LANGUAGES.map((item) => item.code).filter((code) => source[code])
+}
+
+export function localesFromColumns(
+  locales: Record<string, string> | null | undefined,
+  zh?: string,
+  en?: string,
+  id?: string
+) {
+  if (locales && Object.keys(locales).length) {
+    return { ...locales }
+  }
+  const result: Record<string, string> = {}
+  if (zh) result.zh = zh
+  if (en) result.en = en
+  if (id) result.id = id
+  if (!result.zh) result.zh = ''
+  return result
+}
+
+export function payloadLocales(locales: Record<string, string>, codes: string[]) {
+  const result: Record<string, string> = {}
+  codes.forEach((code) => {
+    result[code] = String(locales[code] || '').trim()
+  })
+  return result
+}

src/constants/icons.ts

@@ -37,6 +37,8 @@ export const AppIcons = {
   delete: 'material-symbols:delete-rounded',
   upload: 'material-symbols:upload-rounded',
   download: 'material-symbols:download-rounded',
+  copy: 'material-symbols:content-copy-rounded',
+  openInNew: 'material-symbols:open-in-new-rounded',
   visibility: 'material-symbols:visibility-rounded',
   arrowUp: 'material-symbols:arrow-upward-rounded',
   arrowDown: 'material-symbols:arrow-downward-rounded',

src/layout/components/ToolHeader.vue

@@ -6,6 +6,7 @@ import { Collapse } from '@/components/Collapse'
 import { LocaleDropdown } from '@/components/LocaleDropdown'
 import { SizeDropdown } from '@/components/SizeDropdown'
 import { UserInfo } from '@/components/UserInfo'
+import TranscodeNoticeButton from './TranscodeNoticeButton.vue'
 import { Screenfull } from '@/components/Screenfull'
 import { Breadcrumb } from '@/components/Breadcrumb'
 import { useAppStore } from '@/store/modules/app'
@@ -73,6 +74,7 @@ export default defineComponent({
               color="var(--top-header-text-color)"
             ></LocaleDropdown>
           ) : undefined}
+          <TranscodeNoticeButton color="var(--top-header-text-color)"></TranscodeNoticeButton>
           <UserInfo></UserInfo>
         </div>
       </div>
@@ -95,7 +97,7 @@ export default defineComponent({
   }
 }
 
-@media (max-width: 768px) {
+@media (width <= 768px) {
   .@{prefix-cls} {
     padding-right: 8px;
     padding-left: 8px;

src/layout/components/TranscodeNoticeButton.vue

@@ -0,0 +1,89 @@
+<!-- Author: fruit.com.cn -->
+<!-- 顶栏转码通知：角标汇总转码中、成功、失败，点击进入通知页。 -->
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, onMounted, ref } from 'vue'
+import { useRouter } from 'vue-router'
+import { Bell } from '@element-plus/icons-vue'
+import { getTranscodeNoticesApi } from '@/api/admin/transcodeNotice'
+import { TRANSCODE_NOTICE_SEEN, unreadCounts } from '@/utils/transcodeNoticeSeen'
+
+const POLL_MS = 30000
+const BADGE_MAX = 99
+
+defineProps<{ color?: string }>()
+const router = useRouter()
+const running = ref(0)
+const success = ref(0)
+const failed = ref(0)
+const seenTick = ref(0)
+let timer = 0
+
+const total = computed(() => {
+  seenTick.value
+  const unread = unreadCounts({
+    running: running.value,
+    success: success.value,
+    failed: failed.value
+  })
+  return unread.running + unread.success + unread.failed
+})
+
+async function refresh() {
+  const res = await getTranscodeNoticesApi()
+  running.value = Number(res.data?.running || 0)
+  success.value = Number(res.data?.success || 0)
+  failed.value = Number(res.data?.failed || 0)
+}
+
+function open() {
+  router.push({ name: 'transcode-notices' })
+}
+
+function onSeen() {
+  seenTick.value += 1
+}
+
+onMounted(() => {
+  refresh().catch(() => undefined)
+  window.addEventListener(TRANSCODE_NOTICE_SEEN, onSeen)
+  timer = window.setInterval(() => {
+    refresh().catch(() => undefined)
+  }, POLL_MS)
+})
+
+onBeforeUnmount(() => {
+  window.removeEventListener(TRANSCODE_NOTICE_SEEN, onSeen)
+  window.clearInterval(timer)
+})
+</script>
+
+<template>
+  <el-badge :value="total" :max="BADGE_MAX" :hidden="total === 0" class="notice-badge">
+    <div class="notice-button" :style="{ color }" @click="open">
+      <el-icon :size="18"><Bell /></el-icon>
+    </div>
+  </el-badge>
+</template>
+
+<style scoped>
+.notice-badge {
+  display: flex;
+  align-items: center;
+  height: 100%;
+}
+
+.notice-button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 36px;
+  height: 100%;
+  cursor: pointer;
+}
+
+.notice-badge :deep(.el-badge__content.is-fixed) {
+  top: 8px;
+  right: 2px;
+}
+</style>

src/locales/en.ts

@@ -52,6 +52,7 @@ export default {
     lockScreen: 'Lock screen',
     lock: 'Lock',
     lockPassword: 'Lock screen password',
+    description: 'Enter your password to unlock this session.',
     unlock: 'Click to unlock',
     backToLogin: 'Back to login',
     entrySystem: 'Entry the system',
@@ -105,25 +106,15 @@ export default {
   login: {
     welcome: 'Short-drama workspace',
     consoleLabel: 'Content Operations',
-    message: 'Manage dramas, episodes, publishing, and access.',
     hint: 'Sign in with an admin account',
-    noAccount: 'No account yet?',
-    pointDrama: 'Dramas and episodes',
-    pointPublish: 'Publishing',
-    pointAccess: 'Access',
     username: 'Username',
     password: 'Password',
-    register: 'Register',
-    checkPassword: 'Confirm password',
     login: 'Sign in',
-    otherLogin: 'Sign in with',
     remember: 'Remember me',
-    hasUser: 'Existing account? Go to login',
     forgetPassword: 'Forget password',
+    forgetPasswordHint: 'Please contact the administrator to reset your password',
     usernamePlaceholder: 'Please input username',
-    passwordPlaceholder: 'Please input password',
-    code: 'Verification code',
-    codePlaceholder: 'Please input verification code'
+    passwordPlaceholder: 'Please input password'
   },
   router: {
     login: 'Login',
@@ -172,7 +163,8 @@ export default {
     treeTable: 'Tree table',
     PicturePreview: 'Table Image Preview',
     department: 'Department management',
-    menuManagement: 'Menu management'
+    menuManagement: 'Menu management',
+    transcodeSettings: 'Transcode settings'
   },
   permission: {
     hasPermission: 'Please set the operation permission value'
@@ -536,5 +528,172 @@ export default {
   inputPasswordDemo: {
     title: 'InputPassword',
     inputPasswordDes: 'Secondary packaging of Input components based on ElementPlus'
+  },
+  episodeTranscode: {
+    title: 'Transcode outputs',
+    description: 'Review the transcode task, renditions and frame previews for this episode.',
+    statusLabel: 'Status',
+    progress: 'Progress',
+    retryCount: 'Retries',
+    updatedAt: 'Last updated',
+    waitingProgress: 'Processing (waiting for progress report)',
+    reprocess: 'Transcode again',
+    reprocessing: 'Submitting',
+    triggerSuccess: 'Transcode task submitted',
+    loadFailed: 'Failed to load transcode outputs',
+    retryLoad: 'Reload',
+    triggerFailed: 'Failed to retry transcode',
+    noMedia: 'No uploaded media is bound to this episode yet.',
+    noRendition: 'No rendition outputs',
+    renditionTitle: 'Rendition outputs',
+    quality: 'Quality',
+    resolution: 'Resolution',
+    videoBitrate: 'Video bitrate',
+    audioBitrate: 'Audio bitrate',
+    codec: 'Codec',
+    container: 'Container',
+    fileSize: 'File size',
+    duration: 'Duration',
+    segments: 'Segments',
+    statusColumn: 'Status',
+    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',
+    frameTitle: 'Frame previews',
+    frameView: 'Frames',
+    spriteView: 'Sprites',
+    frameCount: '{total} frames',
+    frameTime: 'Timestamp',
+    previewFrame: 'Preview frame at {time}',
+    spriteSheet: 'Sprite {index}',
+    spriteSheetFrames: '{count} frames',
+    noFrames: 'No frame previews',
+    noSprites: 'No sprite sheets available',
+    zoomTitle: 'Frame preview',
+    status: {
+      queued: 'Queued',
+      running: 'Transcoding',
+      success: 'Success',
+      failed: 'Failed',
+      empty: 'No output',
+      noVideo: 'No video',
+      noMediaAsset: 'No media asset',
+      noTask: 'No transcode task',
+      noEpisode: 'No episode binding',
+      episodeNotFound: 'Episode not found',
+      invalid: 'Invalid output',
+      ready: 'Ready',
+      unknown: 'Unknown'
+    }
+  },
+  episodeBatch: {
+    title: 'Batch upload episodes',
+    entry: 'Batch upload',
+    selectFiles: 'Select videos',
+    startUpload: 'Start upload',
+    uploadingAction: 'Uploading',
+    pause: 'Pause',
+    resume: 'Resume',
+    retry: 'Retry',
+    retryAll: 'Retry all',
+    remove: 'Remove',
+    hint: 'Supports MP4 / MOV / MKV / WEBM, max 500MB each. Files stay queued until you click Start upload.',
+    invalidType: 'Only MP4, MOV, MKV, WEBM are allowed',
+    oversize: 'File exceeds 500MB and was not queued',
+    overallProgress: 'Overall progress',
+    empty: 'No videos selected',
+    resultSummary: 'Upload finished: {done} succeeded, {failed} failed',
+    createEpisodes: 'Create episodes',
+    closeWhileUploading:
+      'Uploads are still in progress. Closing will stop dispatching new tasks. Continue?',
+    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). Click Start upload to continue.',
+    resumeUnmatched: '{count} session(s) could not match local files; pick again manually',
+    createTitle: 'Create episodes in batch',
+    createHint:
+      'Title uses the video file name; episode numbers are assigned automatically. Free vs paid follows the drama free-episode count; episodes beyond that are paid. You can edit them later in episode settings.',
+    colSource: 'Source file',
+    colNumber: 'Episode No.',
+    colTitle: 'Title',
+    colFree: 'Pricing',
+    labelFree: 'Free',
+    labelPaid: 'Paid',
+    colResult: 'Result',
+    missingVideo: 'Missing video URL',
+    createOk: 'Created',
+    createFailed: 'Create failed',
+    createAllSuccess: 'All episodes created',
+    createPartial: 'Some episodes failed; you can retry',
+    submitCreate: 'Create',
+    retryFailed: 'Retry failed',
+    status: {
+      waiting: 'Pending',
+      uploading: 'Uploading',
+      merging: 'Merging',
+      done: 'Done',
+      failed: 'Failed',
+      paused: 'Paused'
+    }
+  },
+  transcodeSettings: {
+    eyebrow: 'Content management',
+    title: 'Transcode settings',
+    description:
+      'Configure the quality ladder, HLS segment duration and thumbnail sprite options for new tasks.',
+    reload: 'Reload',
+    save: 'Save settings',
+    saved: 'Transcode settings saved',
+    saveFailed: 'Failed to save transcode settings',
+    loadFailed: 'Failed to load transcode settings',
+    noPermission: 'This account cannot manage transcode settings',
+    backfill: 'Backfill transcodes',
+    backfillTip: 'Scan episodes missing renditions or thumbnails and enqueue them for transcoding',
+    backfillDone: 'Enqueued {count} episodes into the transcode queue',
+    backfillEmpty: 'No episodes need transcoding',
+    backfillFailed: 'Failed to run transcode backfill',
+    enabled: 'Enable transcode profile',
+    enabledDescription:
+      'Marks whether this transcode profile is enabled; the quality ladder is still validated when saved.',
+    segmentSeconds: 'HLS segment duration (seconds)',
+    ladderTitle: 'Quality ladder',
+    ladderDescription:
+      'Changes apply only to tasks queued afterwards; historical tasks are not reprocessed.',
+    quality: 'Quality key',
+    width: 'Width',
+    height: 'Height',
+    videoBitrateKbps: 'Video bitrate (kbps)',
+    audioBitrateKbps: 'Audio bitrate (kbps)',
+    rowEnabled: 'Enabled',
+    addRung: 'Add quality',
+    deleteRung: 'Delete',
+    emptyLadder: 'No quality rungs configured',
+    spriteTitle: 'Thumbnail sprite',
+    spriteDescription:
+      'Sample frames at a fixed interval, tile them into sprites and generate a WebVTT timeline.',
+    spriteEnabled: 'Enable thumbnail sprites',
+    intervalSeconds: 'Sampling interval (seconds)',
+    columns: 'Frames per row',
+    thumbWidth: 'Thumbnail width (px)',
+    validation: {
+      required: 'This field is required',
+      qualityUnique: 'Quality keys must be unique',
+      qualityTooLong: 'Quality key must not exceed 16 characters',
+      positiveEven: 'Enter an even number greater than 0',
+      positiveInteger: 'Enter an integer greater than 0',
+      range: 'Enter an integer between {min} and {max}',
+      atLeastOneEnabled: 'Enable at least one quality rung',
+      fixErrors: 'Fix the marked transcode fields before saving'
+    }
   }
 }

src/locales/zh-CN.ts

@@ -52,6 +52,7 @@ export default {
     lockScreen: '锁定屏幕',
     lock: '锁定',
     lockPassword: '锁屏密码',
+    description: '输入密码解锁当前会话。',
     unlock: '点击解锁',
     backToLogin: '返回登录',
     entrySystem: '进入系统',
@@ -105,25 +106,15 @@ export default {
   login: {
     welcome: '短剧内容管理',
     consoleLabel: '内容运营后台',
-    message: '管理短剧、剧集、发布状态和后台权限。',
     hint: '使用管理员账号进入工作台',
-    noAccount: '还没有账号？',
-    pointDrama: '短剧与剧集',
-    pointPublish: '发布状态',
-    pointAccess: '角色权限',
     username: '用户名',
     password: '密码',
-    register: '注册',
-    checkPassword: '确认密码',
     login: '登录',
-    otherLogin: '其它登录方式',
     remember: '记住我',
-    hasUser: '已有账号？去登录',
     forgetPassword: '忘记密码',
+    forgetPasswordHint: '请联系管理员重置密码',
     usernamePlaceholder: '请输入用户名',
-    passwordPlaceholder: '请输入密码',
-    code: '验证码',
-    codePlaceholder: '请输入验证码'
+    passwordPlaceholder: '请输入密码'
   },
   router: {
     login: '登录',
@@ -172,7 +163,8 @@ export default {
     treeTable: '树形表格',
     PicturePreview: '表格图片预览',
     department: '部门管理',
-    menuManagement: '菜单管理'
+    menuManagement: '菜单管理',
+    transcodeSettings: '转码设置'
   },
   permission: {
     hasPermission: '请设置操作权限值'
@@ -530,5 +522,166 @@ export default {
   inputPasswordDemo: {
     title: '密码输入框',
     inputPasswordDes: '基于 ElementPlus 的 Input 组件二次封装'
+  },
+  episodeTranscode: {
+    title: '转码产物',
+    description: '查看当前分集的转码任务、清晰度与帧图产物。',
+    statusLabel: '状态',
+    progress: '进度',
+    retryCount: '重试次数',
+    updatedAt: '最近更新',
+    waitingProgress: '处理中（等待进度上报）',
+    reprocess: '重新转码',
+    reprocessing: '正在触发',
+    triggerSuccess: '已提交转码任务',
+    loadFailed: '转码产物加载失败',
+    retryLoad: '重新加载',
+    triggerFailed: '重新转码失败',
+    noMedia: '当前分集尚未绑定已上传视频，暂无可查询的转码产物。',
+    noRendition: '暂无清晰度产物',
+    renditionTitle: '清晰度产物',
+    quality: '档位名称',
+    resolution: '分辨率',
+    videoBitrate: '视频码率',
+    audioBitrate: '音频码率',
+    codec: '编码',
+    container: '容器',
+    fileSize: '文件大小',
+    duration: '时长',
+    segments: '分片数',
+    statusColumn: '状态',
+    actions: '操作',
+    copyUrl: '复制播放地址',
+    openUrl: '新窗口打开',
+    play: '预览播放',
+    playerFailed: '播放失败，请检查产物是否完整',
+    playerUnsupported: '当前浏览器不支持 HLS 播放',
+    copySuccess: '播放地址已复制',
+    copyFailed: '复制播放地址失败',
+    openFailed: '无法打开播放地址',
+    frameTitle: '帧图预览',
+    frameView: '逐帧',
+    spriteView: '雪碧图',
+    frameCount: '共 {total} 帧',
+    frameTime: '时间点',
+    previewFrame: '预览 {time} 帧图',
+    spriteSheet: '雪碧图 {index}',
+    spriteSheetFrames: '{count} 帧',
+    noFrames: '暂无帧图产物',
+    noSprites: '暂无可展示的雪碧图',
+    zoomTitle: '帧图预览',
+    status: {
+      queued: '排队中',
+      running: '转码中',
+      success: '成功',
+      failed: '失败',
+      empty: '暂无产物',
+      noVideo: '无视频',
+      noMediaAsset: '未绑定媒资',
+      noTask: '无转码任务',
+      noEpisode: '未绑定分集',
+      episodeNotFound: '分集不存在',
+      invalid: '产物异常',
+      ready: '就绪',
+      unknown: '未知状态'
+    }
+  },
+  episodeBatch: {
+    title: '批量上传剧集',
+    entry: '批量上传',
+    selectFiles: '选择视频',
+    startUpload: '开始上传',
+    uploadingAction: '上传中',
+    pause: '暂停',
+    resume: '继续',
+    retry: '重试',
+    retryAll: '全部重试',
+    remove: '移除',
+    hint: '支持 MP4 / MOV / MKV / WEBM，单文件不超过 500MB；选完文件后点击「开始上传」才会真正上传',
+    invalidType: '仅支持 MP4、MOV、MKV、WEBM',
+    oversize: '文件超过 500MB，未入队',
+    overallProgress: '总进度',
+    empty: '尚未选择视频',
+    resultSummary: '上传结束：成功 {done} 个，失败 {failed} 个',
+    createEpisodes: '批量创建分集',
+    closeWhileUploading: '仍有未完成上传，关闭后将暂停派发新任务，确定关闭吗？',
+    resumeTitle: '发现未完成上传',
+    resumeConfirm: '发现 {count} 个未完成上传，是否续传？请重新选择相同本地文件以匹配。',
+    resumeYes: '选择文件续传',
+    resumeNo: '放弃',
+    resumeAbandoned: '已放弃未完成上传',
+    resumeMatched: '已匹配 {count} 个文件，请点击「开始上传」继续',
+    resumeUnmatched: '有 {count} 个会话无法匹配本地文件，请手动重选',
+    createTitle: '批量创建分集',
+    createHint:
+      '标题取视频文件名，集号自动顺延分配；免费集数由短剧管理中的「免费集数」配置决定，超出部分为收费集；创建后可在分集编辑中修改',
+    colSource: '源文件',
+    colNumber: '集号',
+    colTitle: '标题',
+    colFree: '收费类型',
+    labelFree: '免费',
+    labelPaid: '收费',
+    colResult: '结果',
+    missingVideo: '缺少视频地址',
+    createOk: '已创建',
+    createFailed: '创建失败',
+    createAllSuccess: '全部分集已创建',
+    createPartial: '部分分集创建失败，可重试',
+    submitCreate: '创建',
+    retryFailed: '重试失败项',
+    status: {
+      waiting: '待上传',
+      uploading: '上传中',
+      merging: '合并中',
+      done: '已完成',
+      failed: '失败',
+      paused: '已暂停'
+    }
+  },
+  transcodeSettings: {
+    eyebrow: '内容管理',
+    title: '转码设置',
+    description: '配置之后新任务的清晰度阶梯、HLS 分片与缩略图雪碧图参数。',
+    reload: '重新加载',
+    save: '保存设置',
+    saved: '转码设置已保存',
+    saveFailed: '转码设置保存失败',
+    loadFailed: '转码设置加载失败',
+    noPermission: '当前账号没有转码设置权限',
+    backfill: '立即补齐转码',
+    backfillTip: '扫描缺少清晰度产物或帧图的分集并自动入队转码',
+    backfillDone: '本轮已补入 {count} 个分集进入转码队列',
+    backfillEmpty: '没有需要补转的分集',
+    backfillFailed: '补齐转码执行失败',
+    enabled: '启用转码配置',
+    enabledDescription: '标记当前转码配置是否启用；保存时仍会校验下方档位。',
+    segmentSeconds: 'HLS 分片时长（秒）',
+    ladderTitle: '清晰度阶梯',
+    ladderDescription: '保存后只影响之后进入队列的新任务，不回跑历史任务。',
+    quality: '清晰度标识',
+    width: '宽',
+    height: '高',
+    videoBitrateKbps: '视频码率（kbps）',
+    audioBitrateKbps: '音频码率（kbps）',
+    rowEnabled: '启用',
+    addRung: '新增档位',
+    deleteRung: '删除',
+    emptyLadder: '尚未配置清晰度档位',
+    spriteTitle: '缩略图雪碧图',
+    spriteDescription: '按固定间隔抽帧并拼成雪碧图，同时生成 WebVTT 时间轴。',
+    spriteEnabled: '启用雪碧图',
+    intervalSeconds: '抽帧间隔（秒）',
+    columns: '每行帧数',
+    thumbWidth: '缩略图宽度（px）',
+    validation: {
+      required: '该项为必填项',
+      qualityUnique: '清晰度标识不能重复',
+      qualityTooLong: '清晰度标识不能超过 16 个字符',
+      positiveEven: '请输入大于 0 的偶数',
+      positiveInteger: '请输入大于 0 的整数',
+      range: '请输入 {min} 到 {max} 之间的整数',
+      atLeastOneEnabled: '至少需要启用一档清晰度',
+      fixErrors: '请修正标记的转码配置后再保存'
+    }
   }
 }

src/permission.ts

@@ -11,6 +11,7 @@ import { NO_REDIRECT_WHITE_LIST } from '@/constants'
 import { useUserStoreWithOut } from '@/store/modules/user'
 import { getAdminRoleApi, getProfileApi } from '@/api/login'
 import { landingPath } from '@/utils/landing'
+import { supplementLocalAdminRoutes } from '@/router/localRoutes'
 
 const { start, done } = useNProgress()
 
@@ -68,6 +69,10 @@ router.beforeEach(async (to, from, next) => {
           } catch {
             // 拉取失败时退回上次缓存的菜单，不阻塞进入
           }
+          const permissions = Array.isArray(userStore.getUserInfo?.permissions)
+            ? userStore.getUserInfo.permissions
+            : []
+          routers = supplementLocalAdminRoutes(routers, permissions)
           await permissionStore.generateRoutes('server', routers)
         } else {
           await permissionStore.generateRoutes('frontEnd', roleRouters as string[])
@@ -91,7 +96,12 @@ router.beforeEach(async (to, from, next) => {
 
       const redirectPath = from.query.redirect || to.path
       const redirect = decodeURIComponent(redirectPath as string)
-      const nextData = to.path === redirect ? { ...to, replace: true } : { path: redirect }
+      // 只按路径重进。刷新时动态路由还没注册，先被兜底路由接住；
+      // 若把当时匹配到的 name 带回去，会一直停在 404。
+      const nextData =
+        to.path === redirect
+          ? { path: to.path, query: to.query, hash: to.hash, replace: true }
+          : { path: redirect, replace: true }
       permissionStore.setIsAddRouters(true)
       next(nextData)
     }

src/router/index.ts

@@ -4,6 +4,7 @@ import { createRouter, createWebHashHistory } from 'vue-router'
 import type { RouteRecordRaw } from 'vue-router'
 import type { App } from 'vue'
 import { Layout } from '@/utils/routerHelper'
+import { AppIcons } from '@/constants/icons'
 
 export const constantRouterMap: AppRouteRecordRaw[] = [
   {
@@ -51,6 +52,35 @@ export const constantRouterMap: AppRouteRecordRaw[] = [
       title: '404',
       noTagsView: true
     }
+  },
+  {
+    path: '/notifications',
+    component: Layout,
+    name: 'Notifications',
+    meta: {
+      hidden: true,
+      title: '通知'
+    },
+    children: [
+      {
+        path: 'transcode',
+        name: 'transcode-notices',
+        component: () => import('@/views/common/TranscodeNoticeView.vue'),
+        meta: {
+          title: '转码通知'
+        }
+      }
+    ]
+  },
+  {
+    path: '/:pathMatch(.*)*',
+    name: 'UnresolvedPath',
+    component: () => import('@/views/Error/404.vue'),
+    meta: {
+      hidden: true,
+      title: '404',
+      noTagsView: true
+    }
   }
 ]
 
@@ -62,7 +92,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
     name: 'Dashboard',
     meta: {
       title: '工作台',
-      icon: 'ant-design:dashboard-filled'
+      icon: AppIcons.dashboard
     },
     children: [
       {
@@ -71,7 +101,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         component: () => import('@/views/common/DashboardView.vue'),
         meta: {
           title: '工作台',
-          icon: 'ant-design:dashboard-filled',
+          icon: AppIcons.dashboard,
           affix: true
         }
       }
@@ -84,7 +114,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
     name: 'Content',
     meta: {
       title: '内容管理',
-      icon: 'ep:video-camera',
+      icon: AppIcons.content,
       alwaysShow: true
     },
     children: [
@@ -119,6 +149,15 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: '类型管理'
         }
+      },
+      {
+        path: 'media-transcode',
+        name: 'media-transcode',
+        component: () => import('@/views/systemManagement/TranscodeSettingsView.vue'),
+        meta: {
+          title: 'router.transcodeSettings',
+          permission: ['episode:upload']
+        }
       }
     ]
   },
@@ -129,7 +168,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
     name: 'UserCenter',
     meta: {
       title: '用户管理',
-      icon: 'ep:user',
+      icon: AppIcons.group,
       alwaysShow: true
     },
     children: [
@@ -150,7 +189,7 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
     name: 'System',
     meta: {
       title: '后台管理',
-      icon: 'ep:setting',
+      icon: AppIcons.settings,
       alwaysShow: true
     },
     children: [
@@ -201,6 +240,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
         meta: {
           title: '操作日志'
         }
+      },
+      {
+        path: 'legal-documents',
+        name: 'legal-documents',
+        component: () => import('@/views/systemManagement/LegalDocumentView.vue'),
+        meta: {
+          title: '协议设置'
+        }
       }
     ]
   }
@@ -214,7 +261,14 @@ const router = createRouter({
 })
 
 export const resetRouter = (): void => {
-  const resetWhiteNameList = ['Redirect', 'RedirectParent', 'Login', 'NoFind', 'Root']
+  const resetWhiteNameList = [
+    'Redirect',
+    'RedirectParent',
+    'Login',
+    'NoFind',
+    'Root',
+    'UnresolvedPath'
+  ]
   router.getRoutes().forEach((route) => {
     const { name } = route
     if (name && !resetWhiteNameList.includes(name as string)) {

src/router/localRoutes.ts

@@ -0,0 +1,57 @@
+// Author: fruit.com.cn
+
+import { cloneDeep } from 'lodash-es'
+
+const TRANSCODE_PERMISSION = 'episode:upload'
+const CONTENT_ROUTE_PATH = '/content'
+const CONTENT_ROUTE_NAME = 'Content'
+const TRANSCODE_ROUTE_NAME = 'media-transcode'
+const TRANSCODE_ROUTE_PATH = 'media-transcode'
+const TRANSCODE_COMPONENT = 'views/systemManagement/TranscodeSettingsView'
+const TRANSCODE_TITLE_KEY = 'router.transcodeSettings'
+
+/** 服务端菜单可能用别的路由名指向同一个组件，这里按路由名或组件路径判定是否已存在 */
+const hasTranscodeRoute = (routes: AppCustomRouteRecordRaw[]): boolean => {
+  for (const route of routes) {
+    if (route.name === TRANSCODE_ROUTE_NAME || route.component === TRANSCODE_COMPONENT) {
+      return true
+    }
+    if (hasTranscodeRoute(route.children || [])) return true
+  }
+  return false
+}
+
+/**
+ * 服务端动态菜单未落库时，给具备内容上传权限的账号补充受控的本地转码菜单。
+ */
+export const supplementLocalAdminRoutes = (
+  routes: AppCustomRouteRecordRaw[],
+  permissions: string[]
+): AppCustomRouteRecordRaw[] => {
+  if (!permissions.includes(TRANSCODE_PERMISSION)) {
+    return routes
+  }
+  // 服务端菜单里已经有转码设置时不再补，否则侧边栏会出现两条
+  if (hasTranscodeRoute(routes)) {
+    return routes
+  }
+  const nextRoutes = cloneDeep(routes)
+  const contentRoute = nextRoutes.find(
+    (route) => route.path === CONTENT_ROUTE_PATH || route.name === CONTENT_ROUTE_NAME
+  )
+  if (!contentRoute) {
+    return routes
+  }
+  contentRoute.children = contentRoute.children || []
+  contentRoute.children.push({
+    path: TRANSCODE_ROUTE_PATH,
+    name: TRANSCODE_ROUTE_NAME,
+    component: TRANSCODE_COMPONENT,
+    redirect: '',
+    meta: {
+      title: TRANSCODE_TITLE_KEY,
+      permission: [TRANSCODE_PERMISSION]
+    }
+  })
+  return nextRoutes
+}

src/store/modules/app.ts

@@ -47,7 +47,7 @@ export const useAppStore = defineStore('app', {
       breadcrumb: true, // 面包屑
       breadcrumbIcon: true, // 面包屑图标
       collapse: false, // 折叠菜单
-      uniqueOpened: false, // 是否只保持一个子菜单的展开
+      uniqueOpened: true, // 是否只保持一个子菜单的展开（菜单手风琴）
       hamburger: true, // 折叠图标
       screenfull: true, // 全屏图标
       size: true, // 尺寸图标
@@ -67,13 +67,13 @@ export const useAppStore = defineStore('app', {
       currentSize: 'default', // 组件尺寸
       theme: {
         // 主题色
-        elColorPrimary: '#409eff',
+        elColorPrimary: '#c4322a',
         // 左侧菜单边框颜色
         leftMenuBorderColor: 'inherit',
         // 左侧菜单背景颜色
-        leftMenuBgColor: '#001529',
+        leftMenuBgColor: '#fff',
         // 左侧菜单浅色背景颜色
-        leftMenuBgLightColor: '#0f2438',
+        leftMenuBgLightColor: '#fff',
         // 左侧菜单选中背景颜色
         leftMenuBgActiveColor: 'var(--app-primary-strong)',
         // 左侧菜单收起选中背景颜色
@@ -89,7 +89,7 @@ export const useAppStore = defineStore('app', {
         // 头部背景颜色
         topHeaderBgColor: '#fff',
         // 头部字体颜色
-        topHeaderTextColor: 'inherit',
+        topHeaderTextColor: '#303133',
         // 头部悬停颜色
         topHeaderHoverColor: '#f6f6f6',
         // 头部边框颜色
@@ -299,7 +299,7 @@ export const useAppStore = defineStore('app', {
         // 左侧菜单选中字体颜色
         leftMenuTextActiveColor: isDarkColor ? '#fff' : 'var(--el-color-primary)',
         // logo字体颜色
-        logoTitleTextColor: isDarkColor ? '#fff' : 'inherit',
+        logoTitleTextColor: isDarkColor ? '#fff' : '#303133',
         // logo边框颜色
         logoBorderColor: isDarkColor ? color : '#eee'
       }
@@ -308,7 +308,7 @@ export const useAppStore = defineStore('app', {
     },
     setHeaderTheme(color: string) {
       const isDarkColor = colorIsDark(color)
-      const textColor = isDarkColor ? '#fff' : 'inherit'
+      const textColor = isDarkColor ? '#fff' : '#303133'
       const textHoverColor = isDarkColor ? lighten(color!, 6) : '#f6f6f6'
       const topToolBorderColor = isDarkColor ? color : '#eee'
       setCssVar('--top-header-bg-color', color)
@@ -343,6 +343,13 @@ export const useAppStore = defineStore('app', {
   persist: {
     afterRestore: (context) => {
       context.store.title = import.meta.env.VITE_APP_TITLE
+      if (context.store.theme?.elColorPrimary !== '#c4322a') {
+        context.store.setTheme({ elColorPrimary: '#c4322a' })
+      }
+      // 头部主题默认强制为白色、菜单主题也强制为白色
+      // 避免老用户浏览器残留其他主题色，清缓存也能恢复到项目品牌配色
+      context.store.setHeaderTheme('#fff')
+      context.store.setMenuTheme('#fff')
     }
   }
 })

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

@@ -18,7 +18,8 @@
 }
 
 .app-user-toolbar .app-user-status,
-.app-user-toolbar .app-user-country {
+.app-user-toolbar .app-user-country,
+.app-user-toolbar .app-user-platform {
   width: 150px;
   flex: 0 0 150px;
 }
@@ -53,7 +54,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;
@@ -62,6 +64,7 @@
 .app-user-meta {
   display: flex;
   flex-direction: column;
+  align-items: flex-start;
   gap: 2px;
   min-width: 0;
 }

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/dark.css

@@ -28,12 +28,12 @@ html.dark .role-card {
 
 html.dark .stat-icon,
 html.dark .role-icon {
-  background: rgb(64 158 255 / 16%) !important;
+  background: color-mix(in srgb, var(--el-color-primary) 18%, transparent) !important;
   color: var(--el-color-primary) !important;
 }
 
 html.dark .role-active {
-  background: rgb(64 158 255 / 12%);
+  background: color-mix(in srgb, var(--el-color-primary) 14%, transparent);
   border-color: var(--el-color-primary);
 }
 
@@ -106,12 +106,12 @@ html.dark .el-tag.status-badge.is-draft {
   color: #c0c4cc !important;
 }
 html.dark .el-tag.status-badge.is-pending {
-  --el-tag-bg-color: rgba(64, 158, 255, 0.18);
-  --el-tag-border-color: rgba(121, 187, 255, 0.45);
-  --el-tag-text-color: #8cc5ff;
-  background: rgba(64, 158, 255, 0.18) !important;
-  border-color: rgba(121, 187, 255, 0.45) !important;
-  color: #8cc5ff !important;
+  --el-tag-bg-color: color-mix(in srgb, var(--el-color-primary) 18%, transparent);
+  --el-tag-border-color: color-mix(in srgb, var(--el-color-primary) 45%, transparent);
+  --el-tag-text-color: var(--el-color-primary-light-5);
+  background: color-mix(in srgb, var(--el-color-primary) 18%, transparent) !important;
+  border-color: color-mix(in srgb, var(--el-color-primary) 45%, transparent) !important;
+  color: var(--el-color-primary-light-5) !important;
 }
 html.dark .el-tag.status-badge.is-offline {
   --el-tag-bg-color: rgba(245, 108, 108, 0.18);

src/styles/business/drama-management.css

@@ -37,7 +37,7 @@
   align-items: center;
   gap: 8px;
   white-space: nowrap;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
 }
 .table-actions .el-button {
   /* 统一尺寸：高度固定、水平内边距，靠行高垂直居中，避免文字被压扁 */
@@ -53,12 +53,6 @@
 .table-actions .el-button + .el-button {
   margin-left: 0 !important;
 }
-.table-actions .danger-action {
-  color: #a66a6a !important;
-}
-.table-actions .danger-action:hover {
-  color: #b54848 !important;
-}
 .drama-cell .drama-cover,
 .drama-cell .drama-cover-image {
   width: 44px;
@@ -91,51 +85,461 @@
   font-size: 13px;
 }
 
-/* 编辑弹窗里的封面预览：固定竖版尺寸，和上传控件并排，避免弹窗过高 */
-.cover-field {
+/* 短剧编辑弹窗：固定宽度、内容区滚动、底部操作固定。 */
+.drama-editor-dialog {
   display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  width: 100%;
-}
-.cover-field-actions {
-  flex: 1 1 auto;
-  min-width: 0;
-}
-.form-cover-preview {
-  display: block;
-  width: 84px;
-  height: 112px;
-  flex: 0 0 84px;
-  object-fit: cover;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--app-radius-md);
-  background: #f0f2f4 !important;
-}
-.dark .form-cover-preview {
-  background: #353b45 !important;
+  max-height: calc(100vh - 40px);
+  overflow: hidden;
+  flex-direction: column;
+  border-radius: var(--app-radius-lg) !important;
 }
 
-/* 编辑弹窗里的视频预览 */
-.video-field {
-  display: flex;
-  gap: 12px;
-  align-items: flex-start;
-  width: 100%;
+.drama-editor-dialog .el-dialog__body {
+  flex: 1 1 auto;
+  padding: 8px 24px 0;
+  overflow-y: auto;
 }
-.video-field-actions {
+
+.drama-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);
+}
+
+.drama-editor-dialog .el-dialog__footer .el-button {
+  min-width: 88px;
+  height: 36px;
+}
+
+.editor-section {
+  padding: 4px 0 18px;
+  border-bottom: 1px solid var(--el-border-color-lighter);
+}
+
+.editor-section + .editor-section {
+  padding-top: 18px;
+}
+
+.editor-section:last-child {
+  padding-bottom: 4px;
+  border-bottom: 0;
+}
+
+.editor-section-title {
+  margin: 0 0 14px;
+  color: var(--el-text-color-primary);
+  font-size: 15px;
+  font-weight: 650;
+  line-height: 1.4;
+}
+
+.editor-grid {
+  display: grid;
+  gap: 0 16px;
+}
+
+.editor-grid--two {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+}
+
+.editor-number {
+  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;
+  align-items: flex-start;
+}
+
+.cover-preview-card {
+  position: relative;
+  display: grid;
+  flex: 0 0 96px;
+  width: 96px;
+  height: 128px;
+  overflow: hidden;
+  border: 1px solid var(--el-border-color);
+  border-radius: 8px;
+  background: var(--el-fill-color-lighter);
+}
+
+.cover-preview-card img {
+  position: absolute;
+  inset: 0;
+  display: block;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
+  object-fit: cover;
+}
+
+.cover-preview-empty {
+  display: flex;
+  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;
+}
+
+.cover-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);
+}
+
+.cover-upload-mask b {
+  font-size: 16px;
+}
+
+.cover-editor-meta {
+  display: flex;
   flex: 1 1 auto;
   min-width: 0;
+  flex-direction: column;
+  gap: 10px;
 }
-.form-video-preview {
+
+.cover-status-line {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+}
+
+.cover-filename {
+  overflow: hidden;
+  color: var(--el-text-color-regular);
+  font-size: 13px;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.cover-hint {
+  margin: 0;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.cover-actions {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+.cover-actions .el-button {
+  height: 36px;
+}
+
+.cover-original-link {
+  color: var(--el-color-primary);
+  font-size: 13px;
+  text-decoration: none;
+}
+
+.cover-original-link:hover {
+  text-decoration: underline;
+}
+
+@media (max-width: 600px) {
+  .drama-editor-dialog {
+    width: calc(100vw - 24px) !important;
+    margin: 12px auto !important;
+  }
+
+  .drama-editor-dialog .el-dialog__body {
+    padding-right: 18px;
+    padding-left: 18px;
+  }
+
+  .editor-grid--two {
+    grid-template-columns: 1fr;
+  }
+
+  .cover-editor {
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .cover-preview-card {
+    flex-basis: 128px;
+  }
+
+  .cover-editor-meta {
+    width: 100%;
+  }
+}
+
+html.dark .cover-preview-card,
+html.dark .cover-preview-empty {
+  background: var(--el-fill-color-light);
+}
+
+/* 剧集编辑弹窗 */
+.episode-editor-dialog {
+  display: flex;
+  max-height: calc(100vh - 40px);
+  overflow: hidden;
+  flex-direction: column;
+  border-radius: var(--app-radius-lg) !important;
+}
+
+.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: 200px;
-  height: 112px;
-  flex: 0 0 200px;
+  width: 100%;
+  height: 100%;
   object-fit: contain;
-  border: 1px solid var(--el-border-color-lighter);
-  border-radius: var(--app-radius-md);
-  background: #000 !important;
+  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;
+}
+
+.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);
 }
 
 /* 剧集预览弹窗里的播放器 */
@@ -163,7 +567,7 @@
 /* 列表里点视频即放大播放，给个悬停反馈 */
 .episode-video-thumb:hover {
   border-color: var(--el-color-primary);
-  box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.25);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--el-color-primary) 25%, transparent);
 }
 .dark .table-result-count {
   color: #a6aeb9;
@@ -233,8 +637,8 @@
 .table-actions .el-button--primary {
   --el-button-bg-color: var(--el-color-primary);
   --el-button-border-color: var(--el-color-primary);
-  --el-button-hover-bg-color: var(--el-color-primary-light-3);
-  --el-button-hover-border-color: var(--el-color-primary-light-3);
+  --el-button-hover-bg-color: var(--el-color-primary-dark-2);
+  --el-button-hover-border-color: var(--el-color-primary-dark-2);
 }
 .table-actions .el-button--success {
   --el-button-bg-color: #4d866a;
@@ -243,10 +647,10 @@
   --el-button-hover-border-color: #3c7358;
 }
 .table-actions .el-button--danger {
-  --el-button-bg-color: #bd5b5b;
-  --el-button-border-color: #bd5b5b;
-  --el-button-hover-bg-color: #a94b4b;
-  --el-button-hover-border-color: #a94b4b;
+  --el-button-bg-color: var(--el-color-danger);
+  --el-button-border-color: var(--el-color-danger);
+  --el-button-hover-bg-color: var(--el-color-danger-dark-2);
+  --el-button-hover-border-color: var(--el-color-danger-dark-2);
 }
 .pagination {
   display: flex;

src/styles/business/index.css

@@ -8,4 +8,5 @@
 @import './console.css';
 @import './creator-center.css';
 @import './layout.css';
+@import './menu.css';
 @import './dark.css';

src/styles/business/menu.css

@@ -0,0 +1,144 @@
+/* 左侧菜单：统一行高、缩进、图标和选中态。 */
+#v-menu .el-menu {
+  padding: 4px 0;
+  background: transparent;
+}
+
+#v-menu .el-menu-item,
+#v-menu .el-sub-menu__title {
+  /* 42px = 16px padding + 18px icon + 8px gap，父子菜单文字共用该基线。 */
+  height: 44px;
+  padding-left: 16px !important;
+  margin: 4px 8px 4px 0;
+  overflow: hidden;
+  color: var(--left-menu-text-color);
+  font-size: 14px;
+  line-height: 44px;
+  border-radius: 8px;
+  transition:
+    color var(--transition-time-02),
+    background-color var(--transition-time-02);
+}
+
+#v-menu .el-menu--inline {
+  padding-left: 0 !important;
+}
+
+#v-menu .el-menu--inline .el-menu-item,
+#v-menu .el-menu--inline .el-sub-menu__title {
+  height: 40px;
+  padding-left: 0 !important;
+  margin: 3px 8px 3px 42px;
+  line-height: 40px;
+}
+
+#v-menu .el-menu--inline .app-icon {
+  display: none;
+}
+
+#v-menu .el-menu-item .app-icon,
+#v-menu .el-sub-menu__title .app-icon {
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
+#v-menu .el-menu-item:hover,
+#v-menu .el-sub-menu__title:hover,
+#v-menu .el-sub-menu.is-opened > .el-sub-menu__title,
+#v-menu .el-sub-menu.is-active > .el-sub-menu__title,
+#v-menu .el-menu-item.is-active {
+  color: var(--el-color-primary) !important;
+  background-color: var(--el-color-primary-light-9) !important;
+}
+
+#v-menu .el-menu--inline .el-menu-item:hover,
+#v-menu .el-menu--inline .el-menu-item.is-active {
+  color: var(--el-color-primary) !important;
+  background-color: transparent !important;
+}
+
+#v-menu .el-menu .el-menu {
+  background: transparent;
+}
+
+#v-menu .el-menu--collapse .el-menu-item,
+#v-menu .el-menu--collapse .el-sub-menu__title {
+  justify-content: center;
+  padding: 0 !important;
+  margin: 4px 6px;
+}
+
+#v-menu .el-menu--collapse .app-icon {
+  margin-right: 0;
+}
+
+html.dark #v-menu .el-menu-item:hover,
+html.dark #v-menu .el-sub-menu__title:hover {
+  color: #fff !important;
+  background-color: color-mix(in srgb, var(--el-color-primary) 72%, transparent) !important;
+}
+
+html.dark #v-menu .el-sub-menu.is-opened > .el-sub-menu__title,
+html.dark #v-menu .el-sub-menu.is-active > .el-sub-menu__title,
+html.dark #v-menu .el-menu-item.is-active {
+  color: #fff !important;
+  background-color: var(--app-primary-strong) !important;
+}
+
+html.dark #v-menu .el-menu--inline .el-menu-item:hover,
+html.dark #v-menu .el-menu--inline .el-menu-item.is-active {
+  color: #fff !important;
+  background-color: transparent !important;
+}
+
+.v-menu-popper--vertical,
+.v-menu-popper--horizontal {
+  padding: 4px;
+  border: 1px solid var(--el-border-color-light);
+  border-radius: 8px;
+  background: var(--el-bg-color-overlay);
+}
+
+.v-menu-popper--vertical .el-menu-item,
+.v-menu-popper--vertical .el-sub-menu__title,
+.v-menu-popper--horizontal .el-menu-item,
+.v-menu-popper--horizontal .el-sub-menu__title {
+  height: 40px;
+  padding-left: 16px !important;
+  margin: 2px 4px;
+  color: var(--el-text-color-regular);
+  font-size: 14px;
+  line-height: 40px;
+  border-radius: 8px;
+}
+
+.v-menu-popper--vertical .app-icon,
+.v-menu-popper--horizontal .app-icon {
+  flex: 0 0 18px;
+  width: 18px;
+  height: 18px;
+  margin-right: 8px;
+}
+
+html .v-menu-popper--vertical .el-menu-item:hover,
+html .v-menu-popper--horizontal .el-menu-item:hover,
+html .v-menu-popper--vertical .el-menu-item.is-active,
+html .v-menu-popper--horizontal .el-menu-item.is-active {
+  color: var(--el-color-primary) !important;
+  background-color: transparent !important;
+}
+
+html.dark .v-menu-popper--vertical,
+html.dark .v-menu-popper--horizontal {
+  border-color: var(--el-border-color);
+}
+
+html.dark .v-menu-popper--vertical .el-menu-item:hover,
+html.dark .v-menu-popper--horizontal .el-menu-item:hover,
+html.dark .v-menu-popper--vertical .el-menu-item.is-active,
+html.dark .v-menu-popper--horizontal .el-menu-item.is-active {
+  color: #fff !important;
+  background-color: transparent !important;
+}

src/styles/business/style.css

@@ -6,7 +6,7 @@ body {
   min-width: 0;
   min-height: 100vh;
 }
- .page-heading {
+.page-heading {
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -396,7 +396,11 @@ body {
   background: linear-gradient(145deg, #f8d6d7, #ffece4);
 }
 .purple {
-  background: linear-gradient(145deg, var(--el-color-primary-light-8), var(--el-color-primary-light-9));
+  background: linear-gradient(
+    145deg,
+    var(--el-color-primary-light-8),
+    var(--el-color-primary-light-9)
+  );
 }
 .peach {
   background: linear-gradient(145deg, #ffd6bd, #fff0d7);
@@ -507,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;
 }
@@ -516,32 +522,68 @@ 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;
 }
-.drama-select {
-  margin-left: auto;
-  width: 215px;
+
+.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 .el-input__wrapper {
+
+.drama-select,
+.status-select {
+  width: 100%;
+}
+.drama-select .el-input__wrapper,
+.status-select .el-input__wrapper {
   box-shadow: 0 0 0 1px #efedf3 inset !important;
 }
-.drama-select .el-input__inner {
-  font-size: 10px;
+.drama-select .el-input__inner,
+.status-select .el-input__inner {
+  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;
@@ -615,9 +657,6 @@ body {
   padding: 5px;
   color: #9997a7;
 }
-.episode-actions .danger-action:hover {
-  color: #e77680;
-}
 .episode-footer {
   display: flex;
   justify-content: space-between;

src/styles/business/theme.css

@@ -15,13 +15,13 @@
   font-family: var(--font-body);
   color: var(--el-text-color-primary);
   background: var(--el-bg-color-page);
-  --el-color-primary: #409eff;
-  --el-color-primary-light-3: #79bbff;
-  --el-color-primary-light-5: #a0cfff;
-  --el-color-primary-light-7: #c6e2ff;
-  --el-color-primary-light-8: #d9ecff;
-  --el-color-primary-light-9: #ecf5ff;
-  --el-color-primary-dark-2: #337ecc;
+  --el-color-primary: #c4322a;
+  --el-color-primary-light-3: #d3615b;
+  --el-color-primary-light-5: #e19995;
+  --el-color-primary-light-7: #f0c2c0;
+  --el-color-primary-light-8: #f5d9d8;
+  --el-color-primary-light-9: #faeeed;
+  --el-color-primary-dark-2: #9d2822;
   --purple: var(--el-color-primary);
   --muted: #909399;
   --line: #e4e7ed;
@@ -30,6 +30,41 @@ body {
   background: var(--el-bg-color-page);
   color: var(--el-text-color-primary);
 }
+.el-button--primary {
+  --el-button-bg-color: var(--el-color-primary);
+  --el-button-border-color: var(--el-color-primary);
+  --el-button-hover-bg-color: var(--el-color-primary-dark-2);
+  --el-button-hover-border-color: var(--el-color-primary-dark-2);
+  --el-button-active-bg-color: var(--el-color-primary-dark-2);
+  --el-button-active-border-color: var(--el-color-primary-dark-2);
+}
+.el-button--danger {
+  --el-button-text-color: #fff;
+  --el-button-bg-color: var(--el-color-danger);
+  --el-button-border-color: var(--el-color-danger);
+  --el-button-hover-bg-color: var(--el-color-danger-dark-2);
+  --el-button-hover-border-color: var(--el-color-danger-dark-2);
+  color: #fff !important;
+  background: var(--el-color-danger) !important;
+  border-color: var(--el-color-danger) !important;
+}
+.el-button--danger:hover {
+  background: var(--el-color-danger-dark-2) !important;
+  border-color: var(--el-color-danger-dark-2) !important;
+}
+.el-button--danger.is-disabled,
+.el-button--danger.is-disabled:hover {
+  color: var(--el-text-color-placeholder) !important;
+  background: var(--el-fill-color-light) !important;
+  border-color: var(--el-border-color-lighter) !important;
+  cursor: not-allowed;
+  opacity: 1;
+}
+.el-message-box__btns .el-button--danger {
+  color: #fff !important;
+  background: var(--el-color-danger) !important;
+  border-color: var(--el-color-danger) !important;
+}
 .eyebrow {
   letter-spacing: 0.7px;
   color: #9298a1;
@@ -52,8 +87,8 @@ body {
   box-shadow: none !important;
 }
 .primary-button:hover {
-  background: var(--el-color-primary-light-3) !important;
-  border-color: var(--el-color-primary-light-3) !important;
+  background: var(--el-color-primary-dark-2) !important;
+  border-color: var(--el-color-primary-dark-2) !important;
 }
 .stats-grid {
   gap: 12px;
@@ -73,7 +108,7 @@ body {
 }
 .stat-icon {
   border-radius: var(--app-radius-sm);
-  background: #ecf5ff !important;
+  background: var(--el-color-primary-light-9) !important;
   color: var(--el-color-primary) !important;
 }
 .stat-value {
@@ -97,7 +132,7 @@ body {
   color: #61738a;
 }
 .chart-svg path:first-of-type {
-  fill: #d9ecff;
+  fill: var(--el-color-primary-light-8);
 }
 .chart-svg path:last-of-type {
   stroke: var(--el-color-primary);
@@ -241,12 +276,12 @@ body {
   border-color: #e7e9ec;
 }
 .role-active {
-  border-color: #a0cfff;
-  background: #ecf5ff;
+  border-color: var(--el-color-primary-light-5);
+  background: var(--el-color-primary-light-9);
 }
 .role-icon {
   border-radius: var(--app-radius-sm);
-  background: #ecf5ff !important;
+  background: var(--el-color-primary-light-9) !important;
   color: var(--el-color-primary) !important;
 }
 .role-badge {
@@ -314,12 +349,12 @@ body {
   color: #6b7280 !important;
 }
 .el-tag.status-badge.is-pending {
-  --el-tag-bg-color: #ecf5ff;
-  --el-tag-border-color: #c6e2ff;
-  --el-tag-text-color: #2b7de9;
-  background: #ecf5ff !important;
-  border-color: #c6e2ff !important;
-  color: #2b7de9 !important;
+  --el-tag-bg-color: var(--el-color-primary-light-9);
+  --el-tag-border-color: var(--el-color-primary-light-7);
+  --el-tag-text-color: var(--el-color-primary);
+  background: var(--el-color-primary-light-9) !important;
+  border-color: var(--el-color-primary-light-7) !important;
+  color: var(--el-color-primary) !important;
 }
 .el-tag.status-badge.is-offline {
   --el-tag-bg-color: #fdecec;

src/styles/var.css

@@ -6,23 +6,25 @@
 
   --left-menu-min-width: 64px;
 
-  --left-menu-bg-color: #17110f;
+  --left-menu-bg-color: #fff;
 
-  --left-menu-bg-light-color: #221815;
+  --left-menu-bg-light-color: #fff;
 
-  --left-menu-bg-active-color: var(--app-primary-strong);
+  --left-menu-bg-active-color: rgba(196, 50, 42, 0.1);
 
-  --left-menu-text-color: #d7cbc4;
+  --left-menu-text-color: #333;
 
-  --left-menu-text-active-color: #fff;
+  --left-menu-text-active-color: var(--el-color-primary);
 
-  --left-menu-collapse-bg-active-color: var(--app-primary-strong);
+  --left-menu-border-color: #eee;
+
+  --left-menu-collapse-bg-active-color: rgba(196, 50, 42, 0.1);
   /* left menu end */
 
   /* logo start */
   --logo-height: 50px;
 
-  --logo-title-text-color: #fff;
+  --logo-title-text-color: #303133;
   /* logo end */
 
   /* header start */

src/utils/transcodeNoticeSeen.ts

@@ -0,0 +1,51 @@
+// Author: fruit.com.cn
+
+const SEEN_KEY = 'transcode-notice-seen'
+
+export const TRANSCODE_NOTICE_SEEN = 'transcode-notice-seen'
+
+export interface NoticeCounts {
+  running: number
+  success: number
+  failed: number
+}
+
+/** 上次打开通知页时已经看过的数量。 */
+export function readSeen(): NoticeCounts {
+  try {
+    const raw = localStorage.getItem(SEEN_KEY)
+    if (!raw) return { running: 0, success: 0, failed: 0 }
+    const data = JSON.parse(raw) as NoticeCounts
+    return {
+      running: Number(data.running || 0),
+      success: Number(data.success || 0),
+      failed: Number(data.failed || 0)
+    }
+  } catch {
+    return { running: 0, success: 0, failed: 0 }
+  }
+}
+
+/** 比上次查看多出来的数量，看过的不再计入角标。 */
+export function unreadCounts(current: NoticeCounts): NoticeCounts {
+  const seen = readSeen()
+  return {
+    running: Math.max(0, current.running - seen.running),
+    success: Math.max(0, current.success - seen.success),
+    failed: Math.max(0, current.failed - seen.failed)
+  }
+}
+
+/** 把当前数量记为已读，并通知顶栏收起角标。 */
+export function markTranscodeNoticeSeen(current: NoticeCounts) {
+  const seen = readSeen()
+  localStorage.setItem(
+    SEEN_KEY,
+    JSON.stringify({
+      running: Math.max(seen.running, current.running),
+      success: Math.max(seen.success, current.success),
+      failed: Math.max(seen.failed, current.failed)
+    })
+  )
+  window.dispatchEvent(new Event(TRANSCODE_NOTICE_SEEN))
+}

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/Login.vue

@@ -1,18 +1,17 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup lang="ts">
-import { LoginForm, RegisterForm } from './components'
+import { LoginForm } from './components'
 import { ThemeSwitch } from '@/components/ThemeSwitch'
 import { LocaleDropdown } from '@/components/LocaleDropdown'
 import { useI18n } from '@/hooks/web/useI18n'
 import { getCssVar, underlineToHump } from '@/utils'
 import { useAppStore } from '@/store/modules/app'
-import { computed, ref } from 'vue'
+import { computed } from 'vue'
 import { ElScrollbar } from 'element-plus'
 
 const appStore = useAppStore()
 const { t } = useI18n()
-const isLogin = ref(true)
 const isDark = computed(() => appStore.getIsDark)
 const toolColor = computed(() => (isDark.value ? '#e5eaf3' : '#303133'))
 
@@ -32,15 +31,97 @@ const themeChange = () => {
             <img src="@/assets/imgs/brand-mark.png" alt="" />
             <span>{{ underlineToHump(appStore.getTitle) }}</span>
           </div>
+          <div class="hero-fruits" aria-hidden="true">
+            <svg class="fruit cherry" viewBox="0 0 120 140">
+              <path
+                d="M62 38c8-16 24-24 36-22"
+                fill="none"
+                stroke="#7d9a62"
+                stroke-width="3"
+                stroke-linecap="round"
+              />
+              <path
+                d="M58 40c2-18-8-30-6-36"
+                fill="none"
+                stroke="#6d8a55"
+                stroke-width="3"
+                stroke-linecap="round"
+              />
+              <ellipse
+                cx="34"
+                cy="28"
+                rx="14"
+                ry="7"
+                fill="#8fb56f"
+                transform="rotate(-28 34 28)"
+              />
+              <circle cx="42" cy="78" r="28" fill="#c4322a" />
+              <circle cx="78" cy="86" r="26" fill="#a82822" />
+              <circle cx="32" cy="68" r="8" fill="#fff" opacity=".28" />
+            </svg>
+            <svg class="fruit mango" viewBox="0 0 150 170">
+              <path d="M78 28c18 2 28 8 34 16-22 4-36 2-48-8 4-4 8-8 14-8z" fill="#6d8a55" />
+              <path
+                d="M86 36c6-16 2-24-2-28"
+                fill="none"
+                stroke="#5f7a4c"
+                stroke-width="3"
+                stroke-linecap="round"
+              />
+              <path
+                d="M46 58c-18 28-16 62 8 84 28 24 62 10 74-16 14-30 4-62-16-80-18-16-46-10-66 12z"
+                fill="#f0b429"
+              />
+              <path
+                d="M58 78c8 22 10 40 4 58"
+                fill="none"
+                stroke="#ffe08a"
+                stroke-width="8"
+                stroke-linecap="round"
+                opacity=".55"
+              />
+              <ellipse
+                cx="62"
+                cy="86"
+                rx="14"
+                ry="22"
+                fill="#fff"
+                opacity=".2"
+                transform="rotate(-24 62 86)"
+              />
+            </svg>
+            <svg class="fruit banana" viewBox="0 0 160 150">
+              <path
+                d="M28 108c18-46 48-74 92-86 8 10 10 22 4 34-28 10-50 28-66 58-6 12-16 16-30 12-8-2-12-10 0-18z"
+                fill="#f2d34b"
+              />
+              <path
+                d="M36 102c16-38 42-62 80-74"
+                fill="none"
+                stroke="#ffe98a"
+                stroke-width="7"
+                stroke-linecap="round"
+                opacity=".7"
+              />
+              <path
+                d="M118 24c8 2 14 10 12 16"
+                fill="none"
+                stroke="#6d8a55"
+                stroke-width="4"
+                stroke-linecap="round"
+              />
+              <path
+                d="M30 112c-6 8-4 16 4 16"
+                fill="none"
+                stroke="#c9a227"
+                stroke-width="4"
+                stroke-linecap="round"
+              />
+            </svg>
+          </div>
           <div class="hero-copy">
             <p class="hero-kicker">{{ t('login.consoleLabel') }}</p>
             <h1>{{ t('login.welcome') }}</h1>
-            <p>{{ t('login.message') }}</p>
-            <ul>
-              <li>{{ t('login.pointDrama') }}</li>
-              <li>{{ t('login.pointPublish') }}</li>
-              <li>{{ t('login.pointAccess') }}</li>
-            </ul>
           </div>
         </section>
 
@@ -50,8 +131,7 @@ const themeChange = () => {
             <LocaleDropdown :color="toolColor" />
           </div>
           <div class="login-card">
-            <LoginForm v-if="isLogin" @to-register="isLogin = false" />
-            <RegisterForm v-else @to-login="isLogin = true" />
+            <LoginForm />
           </div>
         </section>
       </div>
@@ -89,16 +169,58 @@ const themeChange = () => {
   flex-direction: column;
   justify-content: space-between;
 
+  &::before,
   &::after {
     position: absolute;
-    right: -80px;
-    bottom: -120px;
-    width: 360px;
-    height: 360px;
-    border: 1px solid rgb(255 255 255 / 16%);
+    border: 1px solid rgb(255 255 255 / 12%);
     border-radius: 50%;
     content: '';
   }
+
+  &::before {
+    top: -140px;
+    left: -80px;
+    width: 420px;
+    height: 420px;
+  }
+
+  &::after {
+    right: -120px;
+    bottom: -160px;
+    width: 460px;
+    height: 460px;
+  }
+}
+
+.hero-fruits {
+  position: absolute;
+  inset: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.fruit {
+  position: absolute;
+  filter: drop-shadow(0 18px 24px rgb(0 0 0 / 28%));
+}
+
+.cherry {
+  top: 16%;
+  right: 14%;
+  width: 150px;
+}
+
+.mango {
+  top: 30%;
+  left: 38%;
+  width: 210px;
+}
+
+.banana {
+  top: 54%;
+  left: 12%;
+  width: 200px;
+  transform: rotate(-8deg);
 }
 
 .hero-brand {
@@ -121,47 +243,24 @@ const themeChange = () => {
 .hero-copy {
   position: relative;
   z-index: 1;
-  max-width: 460px;
+  max-width: 420px;
 
   h1 {
-    margin: 10px 0 12px;
-    font-size: 40px;
-    font-weight: 700;
-    line-height: 1.2;
+    margin: 12px 0 0;
+    font-size: 44px;
+    font-weight: 600;
+    line-height: 1.15;
+    letter-spacing: -0.03em;
     color: #fff;
   }
-
-  p {
-    margin: 0;
-    font-size: 15px;
-    line-height: 1.7;
-    color: rgb(255 255 255 / 82%);
-  }
 }
 
 .hero-kicker {
+  margin: 0;
   font-size: 13px;
   font-weight: 600;
   letter-spacing: 0.08em;
-  color: #d9ecff !important;
-}
-
-.hero-copy ul {
-  display: flex;
-  padding: 0;
-  margin: 28px 0 0;
-  list-style: none;
-  flex-wrap: wrap;
-  gap: 10px;
-
-  li {
-    padding: 8px 14px;
-    font-size: 13px;
-    color: #fff;
-    background: rgb(255 255 255 / 12%);
-    border: 1px solid rgb(255 255 255 / 18%);
-    border-radius: 999px;
-  }
+  color: var(--el-color-primary-light-8) !important;
 }
 
 .login-panel {
@@ -223,13 +322,13 @@ const themeChange = () => {
     padding: 16px 24px 20px;
   }
 
-  .hero-copy h1 {
-    margin: 6px 0 8px;
-    font-size: 28px;
+  .hero-fruits {
+    display: none;
   }
 
-  .hero-copy ul {
-    display: none;
+  .hero-copy h1 {
+    margin: 6px 0 0;
+    font-size: 28px;
   }
 
   .login-panel {
@@ -253,10 +352,6 @@ const themeChange = () => {
     padding: 16px 18px 18px;
   }
 
-  .hero-copy p {
-    font-size: 13px;
-  }
-
   .login-card {
     padding: 28px 20px 24px;
   }
@@ -282,25 +377,6 @@ const themeChange = () => {
   }
 }
 
-.login-register {
-  display: flex;
-  margin-top: 16px;
-  font-size: 14px;
-  color: var(--el-text-color-secondary);
-  gap: 6px;
-  align-items: center;
-  justify-content: center;
-
-  button {
-    padding: 0;
-    font: inherit;
-    color: var(--el-color-primary);
-    cursor: pointer;
-    background: none;
-    border: 0;
-  }
-}
-
 .login-card :deep(.el-button--primary) {
   --el-button-bg-color: var(--app-brand);
   --el-button-border-color: var(--app-brand);

src/views/Login/components/LoginForm.vue

@@ -4,9 +4,9 @@
 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, getTestRoleApi, getAdminRoleApi } from '@/api/login'
+import { loginApi, getAdminRoleApi } from '@/api/login'
 import { useAppStore } from '@/store/modules/app'
 import { usePermissionStore } from '@/store/modules/permission'
 import { landingPath } from '@/utils/landing'
@@ -19,8 +19,6 @@ import { BaseButton } from '@/components/Button'
 
 const { required } = useValidator()
 
-const emit = defineEmits(['to-register'])
-
 const appStore = useAppStore()
 
 const userStore = useUserStore()
@@ -94,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>
@@ -113,24 +115,11 @@ const schema = reactive<FormSchema[]>([
       slots: {
         default: () => {
           return (
-            <>
-              <div class="w-[100%]">
-                <BaseButton
-                  loading={loading.value}
-                  type="primary"
-                  class="w-[100%]"
-                  onClick={signIn}
-                >
-                  {t('login.login')}
-                </BaseButton>
-              </div>
-              <div class="login-register">
-                <span>{t('login.noAccount')}</span>
-                <button type="button" onClick={toRegister}>
-                  {t('login.register')}
-                </button>
-              </div>
-            </>
+            <div class="w-[100%]">
+              <BaseButton loading={loading.value} type="primary" class="w-[100%]" onClick={signIn}>
+                {t('login.login')}
+              </BaseButton>
+            </div>
           )
         }
       }
@@ -218,16 +207,11 @@ const getRole = async () => {
   const params = {
     roleName: formData.username
   }
-  const res =
-    appStore.getDynamicRouter && appStore.getServerDynamicRouter
-      ? await getAdminRoleApi(params)
-      : await getTestRoleApi(params)
+  const res = await getAdminRoleApi(params)
   if (res) {
     const routers = res.data || []
     userStore.setRoleRouters(routers)
-    appStore.getDynamicRouter && appStore.getServerDynamicRouter
-      ? await permissionStore.generateRoutes('server', routers).catch(() => {})
-      : await permissionStore.generateRoutes('frontEnd', routers).catch(() => {})
+    await permissionStore.generateRoutes('server', routers).catch(() => {})
 
     permissionStore.getAddRouters.forEach((route) => {
       addRoute(route as RouteRecordRaw) // 动态添加可访问路由表
@@ -238,11 +222,6 @@ const getRole = async () => {
     push({ path: redirect.value || landingPath() })
   }
 }
-
-// 去注册页面
-const toRegister = () => {
-  emit('to-register')
-}
 </script>
 
 <template>

src/views/Login/components/RegisterForm.vue

@@ -1,172 +0,0 @@
-<!-- Author: fruit.com.cn -->
-
-<script setup lang="tsx">
-import { Form, FormSchema } from '@/components/Form'
-import { reactive, ref } from 'vue'
-import { useI18n } from '@/hooks/web/useI18n'
-import { useForm } from '@/hooks/web/useForm'
-import { ElButton, ElInput, FormRules } from 'element-plus'
-import { useValidator } from '@/hooks/web/useValidator'
-
-const emit = defineEmits(['to-login'])
-
-const { formRegister, formMethods } = useForm()
-const { getElFormExpose } = formMethods
-
-const { t } = useI18n()
-
-const { required } = useValidator()
-
-const schema = reactive<FormSchema[]>([
-  {
-    field: 'title',
-    colProps: {
-      span: 24
-    },
-    formItemProps: {
-      slots: {
-        default: () => {
-          return (
-            <div class="login-heading">
-              <h2>{t('login.register')}</h2>
-              <p>{t('login.message')}</p>
-            </div>
-          )
-        }
-      }
-    }
-  },
-  {
-    field: 'username',
-    label: t('login.username'),
-    value: '',
-    component: 'Input',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      placeholder: t('login.usernamePlaceholder')
-    }
-  },
-  {
-    field: 'password',
-    label: t('login.password'),
-    value: '',
-    component: 'InputPassword',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      style: {
-        width: '100%'
-      },
-      strength: true,
-      placeholder: t('login.passwordPlaceholder')
-    }
-  },
-  {
-    field: 'check_password',
-    label: t('login.checkPassword'),
-    value: '',
-    component: 'InputPassword',
-    colProps: {
-      span: 24
-    },
-    componentProps: {
-      style: {
-        width: '100%'
-      },
-      strength: true,
-      placeholder: t('login.passwordPlaceholder')
-    }
-  },
-  {
-    field: 'code',
-    label: t('login.code'),
-    colProps: {
-      span: 24
-    },
-    formItemProps: {
-      slots: {
-        default: (formData) => {
-          return (
-            <div class="w-[100%] flex">
-              <ElInput v-model={formData.code} placeholder={t('login.codePlaceholder')} />
-            </div>
-          )
-        }
-      }
-    }
-  },
-  {
-    field: 'register',
-    colProps: {
-      span: 24
-    },
-    formItemProps: {
-      slots: {
-        default: () => {
-          return (
-            <>
-              <div class="w-[100%]">
-                <ElButton
-                  type="primary"
-                  class="w-[100%]"
-                  loading={loading.value}
-                  onClick={loginRegister}
-                >
-                  {t('login.register')}
-                </ElButton>
-              </div>
-              <div class="w-[100%] mt-15px">
-                <ElButton class="w-[100%]" onClick={toLogin}>
-                  {t('login.hasUser')}
-                </ElButton>
-              </div>
-            </>
-          )
-        }
-      }
-    }
-  }
-])
-
-const rules: FormRules = {
-  username: [required()],
-  password: [required()],
-  check_password: [required()],
-  code: [required()]
-}
-
-const toLogin = () => {
-  emit('to-login')
-}
-
-const loading = ref(false)
-
-const loginRegister = async () => {
-  const formRef = await getElFormExpose()
-  formRef?.validate(async (valid) => {
-    if (valid) {
-      try {
-        loading.value = true
-        toLogin()
-      } finally {
-        loading.value = false
-      }
-    }
-  })
-}
-</script>
-
-<template>
-  <Form
-    :schema="schema"
-    :rules="rules"
-    label-position="top"
-    hide-required-asterisk
-    size="large"
-    class="login-form"
-    @register="formRegister"
-  />
-</template>

src/views/Login/components/index.ts

@@ -1,6 +1,5 @@
 // Author: fruit.com.cn
 
 import LoginForm from './LoginForm.vue'
-import RegisterForm from './RegisterForm.vue'
 
-export { LoginForm, RegisterForm }
+export { LoginForm }

src/views/commerce/OrderManagementView.vue

@@ -102,6 +102,7 @@ async function refund(row) {
       {
         confirmButtonText: '确认退款',
         cancelButtonText: '取消',
+        confirmButtonClass: 'el-button--danger',
         inputValidator: (val) => (val && val.trim() ? true : '退款原因不能为空')
       }
     )
@@ -375,8 +376,8 @@ function onTabChange(name) {
                 >
                 <el-button
                   v-if="canOrderUpdate && (row.status === 'PAID' || row.status === 'DELIVERED')"
+                  type="danger"
                   size="small"
-                  class="danger-action"
                   @click="refund(row)"
                   >退款</el-button
                 >
@@ -461,8 +462,8 @@ function onTabChange(name) {
               <div class="table-actions">
                 <el-button
                   v-if="canEntitlementUpdate && row.status === 'ACTIVE'"
+                  type="danger"
                   size="small"
-                  class="danger-action"
                   @click="revokeEntitlement(row)"
                   >回收</el-button
                 >

src/views/common/DashboardView.vue

@@ -5,6 +5,8 @@ import { computed, onMounted, ref } from 'vue'
 import { useRouter } from 'vue-router'
 import { AppIcons } from '@/constants/icons'
 import { pageDramasApi } from '@/api/admin/drama'
+import { getDashboardOverviewApi, getDashboardTrendApi } from '@/api/admin/dashboard'
+import DashboardMetricWall from '@/views/dashboard/DashboardMetricWall.vue'
 import { useRbac } from '@/stores/rbac'
 import { formatCount } from '@/utils/format'
 import { statusClass } from '@/utils/status'
@@ -15,6 +17,8 @@ const { can } = useRbac()
 const loading = ref(false)
 const dramas = ref([])
 const total = ref(0)
+const overview = ref(null)
+const trend = ref(null)
 
 const totalViews = computed(() =>
   dramas.value.reduce((sum, item) => sum + Number(item.views || 0), 0)
@@ -25,6 +29,12 @@ const reviewingCount = computed(
 const publishedCount = computed(
   () => dramas.value.filter((item) => item.status === 'published').length
 )
+const metricFallback = computed(() => ({
+  'content.dramaTotal': total.value,
+  'content.dramaReviewing': reviewingCount.value,
+  'content.dramaPublished': publishedCount.value,
+  'playback.viewTotal': totalViews.value
+}))
 const recentDramas = computed(() =>
   [...dramas.value]
     .sort((a, b) => String(b.updatedAt || '').localeCompare(String(a.updatedAt || '')))
@@ -34,10 +44,16 @@ const recentDramas = computed(() =>
 onMounted(async () => {
   loading.value = true
   try {
-    const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
+    const [res, board, trendRes] = await Promise.all([
+      pageDramasApi({ pageIndex: 1, pageSize: 200 }),
+      getDashboardOverviewApi().catch(() => null),
+      getDashboardTrendApi().catch(() => null)
+    ])
     // 接口失败时 axios 拦截器会把业务错误吞成 undefined，这里不能让页面跟着崩
     dramas.value = res?.data?.list || []
     total.value = res?.data?.total || 0
+    overview.value = board?.data || null
+    trend.value = trendRes?.data || null
   } finally {
     loading.value = false
   }
@@ -45,72 +61,83 @@ onMounted(async () => {
 </script>
 
 <template>
-  <div class="page-heading"
-    ><div><div class="eyebrow">内容概览</div><h1>工作台</h1><p>查看短剧内容与近期处理事项。</p></div
-    ><el-button
-      v-if="can('drama:create')"
-      type="primary"
-      class="primary-button"
-      @click="router.push({ name: 'dramas' })"
-      ><AppIcon :icon="AppIcons.add" />上传新短剧</el-button
-    ></div
-  >
-  <div v-loading="loading" class="stats-grid">
-    <div class="stat-card"
-      ><div class="stat-top"
-        ><span>短剧总数</span
-        ><span class="stat-icon"><AppIcon :icon="AppIcons.content" /></span></div
-      ><div class="stat-value">{{ total }} <small>部</small></div></div
-    >
-    <div class="stat-card"
-      ><div class="stat-top"
-        ><span>累计播放量</span
-        ><span class="stat-icon"><AppIcon :icon="AppIcons.videoPlay" /></span></div
-      ><div class="stat-value">{{ formatCount(totalViews) }}</div></div
-    >
-    <div class="stat-card"
-      ><div class="stat-top"
-        ><span>待审核内容</span
-        ><span class="stat-icon"><AppIcon :icon="AppIcons.clock" /></span></div
-      ><div class="stat-value">{{ reviewingCount }} <small>项</small></div></div
-    >
-    <div class="stat-card"
-      ><div class="stat-top"
-        ><span>已上线</span
-        ><span class="stat-icon"><AppIcon :icon="AppIcons.checkCircle" /></span></div
-      ><div class="stat-value">{{ publishedCount }} <small>部</small></div></div
-    >
-  </div>
-  <section class="panel recent-panel"
-    ><div class="panel-heading"
-      ><div><h2>最近更新</h2><p>短剧内容与发布状态</p></div
-      ><el-button text class="view-all" @click="router.push({ name: 'dramas' })"
-        >短剧管理</el-button
+  <div class="workbench">
+    <div class="page-heading"
+      ><div
+        ><div class="eyebrow">内容概览</div><h1>工作台</h1
+        ><p>用户、设备、留存与短剧内容总览。</p></div
+      ><el-button
+        v-if="can('drama:create')"
+        type="primary"
+        class="primary-button"
+        @click="router.push({ name: 'dramas' })"
+        ><AppIcon :icon="AppIcons.add" />上传新短剧</el-button
       ></div
     >
-    <el-table
+    <DashboardMetricWall
       v-loading="loading"
-      :data="recentDramas"
-      row-key="id"
-      empty-text="暂无短剧数据"
-      class="dashboard-el-table"
-      ><el-table-column prop="title" label="短剧名称" min-width="280" /><el-table-column
-        prop="genre"
-        label="类型"
-        width="150" /><el-table-column label="集数" width="120"
-        ><template #default="scope">{{ scope?.row?.episodes }} 集</template></el-table-column
-      ><el-table-column label="播放量" width="140"
-        ><template #default="scope">{{ formatCount(scope?.row?.views) }}</template></el-table-column
-      ><el-table-column label="状态" width="130"
-        ><template #default="scope"
-          ><el-tag
-            v-if="scope?.row"
-            :class="['status-badge', statusClass(scope.row.status)]"
-            effect="light"
-            >{{ scope.row.statusText }}</el-tag
-          ></template
-        ></el-table-column
-      ><el-table-column prop="updatedAt" label="更新时间" width="180"
-    /></el-table>
-  </section>
+      :overview="overview"
+      :trend="trend"
+      :fallback="metricFallback"
+    />
+    <section class="panel recent-panel"
+      ><div class="panel-heading"
+        ><div><h2>最近更新</h2><p>短剧内容与发布状态</p></div
+        ><el-button text class="view-all" @click="router.push({ name: 'dramas' })"
+          >短剧管理</el-button
+        ></div
+      >
+      <el-table
+        v-loading="loading"
+        :data="recentDramas"
+        row-key="id"
+        empty-text="暂无短剧数据"
+        class="dashboard-el-table"
+        ><el-table-column prop="title" label="短剧名称" min-width="280" /><el-table-column
+          prop="genre"
+          label="类型"
+          width="150" /><el-table-column label="集数" width="120"
+          ><template #default="scope">{{ scope?.row?.episodes }} 集</template></el-table-column
+        ><el-table-column label="播放量" width="140"
+          ><template #default="scope">{{
+            formatCount(scope?.row?.views)
+          }}</template></el-table-column
+        ><el-table-column label="状态" width="130"
+          ><template #default="scope"
+            ><el-tag
+              v-if="scope?.row"
+              :class="['status-badge', statusClass(scope.row.status)]"
+              effect="light"
+              >{{ scope.row.statusText }}</el-tag
+            ></template
+          ></el-table-column
+        ><el-table-column prop="updatedAt" label="更新时间" width="180"
+      /></el-table>
+    </section>
+  </div>
 </template>
+
+<style scoped>
+.workbench {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.workbench .page-heading {
+  flex: none;
+  margin-bottom: 12px;
+}
+
+.workbench :deep(.screen) {
+  flex: 1;
+  min-height: 0;
+}
+
+.recent-panel {
+  flex: none;
+  max-height: 220px;
+  margin-top: 12px;
+  overflow: auto;
+}
+</style>

src/views/common/TranscodeNoticeView.vue

@@ -0,0 +1,100 @@
+<!-- Author: fruit.com.cn -->
+<!-- 转码通知页：按转码中、成功、失败查看短剧和集数。 -->
+
+<script setup lang="ts">
+import { computed, onMounted, ref } from 'vue'
+import PageHeading from '@/views/components/PageHeading.vue'
+import {
+  getTranscodeNoticesApi,
+  type TranscodeNotice,
+  type TranscodeNoticeItem
+} from '@/api/admin/transcodeNotice'
+import { formatDateTime } from '@/utils/format'
+import { markTranscodeNoticeSeen } from '@/utils/transcodeNoticeSeen'
+
+const loading = ref(false)
+const tab = ref('RUNNING')
+const notice = ref<TranscodeNotice | null>(null)
+
+const rows = computed<TranscodeNoticeItem[]>(() => {
+  if (tab.value === 'SUCCESS') return notice.value?.successList || []
+  if (tab.value === 'FAILED') return notice.value?.failedList || []
+  return notice.value?.runningList || []
+})
+
+function episodeText(row: TranscodeNoticeItem) {
+  const no = row.episodeNo ? `第${row.episodeNo}集` : ''
+  if (!row.episodeTitle || row.episodeTitle === no) return no || '集数未知'
+  return no ? `${no} ${row.episodeTitle}` : row.episodeTitle
+}
+
+async function load() {
+  loading.value = true
+  try {
+    const res = await getTranscodeNoticesApi()
+    notice.value = res.data || null
+    if (notice.value) {
+      markTranscodeNoticeSeen({
+        running: Number(notice.value.running || 0),
+        success: Number(notice.value.success || 0),
+        failed: Number(notice.value.failed || 0)
+      })
+    }
+  } finally {
+    loading.value = false
+  }
+}
+
+onMounted(load)
+</script>
+
+<template>
+  <PageHeading
+    eyebrow="通知"
+    title="转码通知"
+    description="查看转码中、转码成功和转码失败的短剧与集数。"
+  >
+    <el-button :loading="loading" @click="load">刷新</el-button>
+  </PageHeading>
+
+  <section class="panel notice-panel">
+    <el-tabs v-model="tab">
+      <el-tab-pane label="转码中" name="RUNNING" />
+      <el-tab-pane label="转码成功" name="SUCCESS" />
+      <el-tab-pane label="转码失败" name="FAILED" />
+    </el-tabs>
+
+    <el-table
+      v-loading="loading"
+      :data="rows"
+      row-key="id"
+      border
+      class="drama-el-table"
+      empty-text="暂无通知"
+    >
+      <el-table-column prop="dramaTitle" label="短剧" min-width="220" show-overflow-tooltip />
+      <el-table-column label="集数" min-width="180" show-overflow-tooltip>
+        <template #default="{ row }">{{ episodeText(row) }}</template>
+      </el-table-column>
+      <el-table-column label="进度" width="100">
+        <template #default="{ row }">{{ row.progress ?? 0 }}%</template>
+      </el-table-column>
+      <el-table-column
+        v-if="tab === 'FAILED'"
+        prop="errorMsg"
+        label="失败原因"
+        min-width="220"
+        show-overflow-tooltip
+      />
+      <el-table-column label="更新时间" width="180">
+        <template #default="{ row }">{{ formatDateTime(row.updatedAt) }}</template>
+      </el-table-column>
+    </el-table>
+  </section>
+</template>
+
+<style scoped>
+.notice-panel {
+  padding: 8px 16px 16px;
+}
+</style>

src/views/components/AppUserCell.vue

@@ -0,0 +1,43 @@
+<!-- Author: fruit.com.cn -->
+
+<script setup>
+import { computed } from 'vue'
+
+/**
+ * 后台各列表共用的「用户」单元格。
+ *
+ * 口径：已登录显示昵称 + `UID xxx`；未登录显示「游客」标签 + `设备 xxx`。
+ * 两行都带标签，避免一串随机字母看不出是什么。平台由独立的「系统」列展示。
+ */
+const props = defineProps({
+  row: { type: Object, required: true }
+})
+
+const isGuest = computed(() => props.row?.userId == null)
+</script>
+
+<template>
+  <div class="app-user-meta">
+    <template v-if="isGuest">
+      <el-tag type="info" size="small">游客</el-tag>
+      <span class="app-user-uid app-user-device" :title="row.deviceId || ''">
+        设备: {{ row.deviceId || '—' }}
+      </span>
+    </template>
+    <template v-else>
+      <span class="app-user-name" :title="row.nickname || ''">
+        昵称: {{ row.nickname || '未设置昵称' }}
+      </span>
+      <span class="app-user-uid">UID: {{ row.uid || `#${row.userId}` }}</span>
+    </template>
+  </div>
+</template>
+
+<style scoped>
+.app-user-device {
+  max-width: 150px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+</style>

src/views/components/LocaleTextFields.vue

@@ -0,0 +1,75 @@
+<!-- Author: fruit.com.cn -->
+<!-- 先勾选语言，再填写对应文案。中文始终保留。 -->
+
+<script setup>
+import { CONTENT_LANGUAGES, languageLabel } from '@/constants/contentLanguages'
+
+const props = defineProps({
+  languages: { type: Array, required: true },
+  locales: { type: Object, required: true },
+  label: { type: String, default: '名称' },
+  maxlength: { type: Number, default: 64 },
+  multiline: { type: Boolean, default: false },
+  showLanguages: { type: Boolean, default: true },
+  required: { type: Boolean, default: true }
+})
+const emit = defineEmits(['update:languages', 'update:locales'])
+
+function changeLanguages(codes) {
+  const next = codes.includes('zh') ? codes : ['zh', ...codes]
+  const locales = { ...props.locales }
+  next.forEach((code) => {
+    if (locales[code] == null) locales[code] = ''
+  })
+  emit('update:locales', locales)
+  emit('update:languages', next)
+}
+
+function changeLocale(code, value) {
+  emit('update:locales', { ...props.locales, [code]: value })
+}
+</script>
+
+<template>
+  <el-form-item v-if="showLanguages" label="语言" required>
+    <el-select
+      :model-value="languages"
+      multiple
+      placeholder="选择语言"
+      style="width: 100%"
+      @change="changeLanguages"
+    >
+      <el-option
+        v-for="item in CONTENT_LANGUAGES"
+        :key="item.code"
+        :label="item.label"
+        :value="item.code"
+        :disabled="item.code === 'zh'"
+      />
+    </el-select>
+  </el-form-item>
+  <el-form-item
+    v-for="code in languages"
+    :key="label + code"
+    :label="languageLabel(code) + label"
+    :required="required"
+  >
+    <el-input
+      v-if="!multiline"
+      :model-value="locales[code]"
+      @update:model-value="changeLocale(code, $event)"
+      :maxlength="maxlength"
+      :placeholder="'请填写' + languageLabel(code) + label"
+    />
+    <el-input
+      v-else
+      :model-value="locales[code]"
+      @update:model-value="changeLocale(code, $event)"
+      type="textarea"
+      :rows="2"
+      :maxlength="maxlength"
+      show-word-limit
+      :placeholder="'请填写' + languageLabel(code) + label"
+    />
+  </el-form-item>
+</template>

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/CategoryDramaView.vue

@@ -0,0 +1,451 @@
+<!-- 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 {
+  languageCodes,
+  languageLabel,
+  localesFromColumns,
+  payloadLocales
+} from '@/constants/contentLanguages'
+import {
+  bindClassificationDramasApi,
+  createClassificationApi,
+  deleteClassificationApi,
+  listClassificationDramaCandidatesApi,
+  listClassificationDramasApi,
+  listClassificationsApi,
+  unbindClassificationDramaApi,
+  updateClassificationApi
+} from '@/api/admin/dramaClassification'
+import { statusClass } from '@/utils/status'
+import { useRbac } from '@/stores/rbac'
+import ClassificationDramaDialogs from './ClassificationDramaDialogs.vue'
+import ClassificationSideList from './ClassificationSideList.vue'
+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 languages = ref(['zh'])
+const emptyForm = () => ({ locales: { zh: '' }, sort: 1, status: 1 })
+const form = reactive(emptyForm())
+
+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
+  languages.value = ['zh']
+  const maxSort = classifications.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
+  Object.assign(form, emptyForm(), { sort: maxSort + 1 })
+  dialogVisible.value = true
+}
+
+function openEdit(row) {
+  editingId.value = row.id
+  const locales = localesFromColumns(row.locales, row.name, row.nameEn, row.nameId)
+  languages.value = languageCodes(locales)
+  Object.assign(form, {
+    locales,
+    sort: row.sort ?? 0,
+    status: row.status ?? 1
+  })
+  dialogVisible.value = true
+}
+
+async function saveClassification() {
+  const locales = payloadLocales(form.locales, languages.value)
+  const missing = languages.value.find((code) => !locales[code])
+  if (!locales.zh || missing) {
+    ElMessage.warning(missing ? `请填写${languageLabel(missing)}名称` : '请填写中文名称')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = {
+      name: locales.zh,
+      locales,
+      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">
+    <ClassificationSideList
+      :classifications="classifications"
+      :active-id="activeId"
+      @select="selectClassification"
+      @edit="openEdit"
+      @remove="confirmDelete"
+    />
+
+    <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>
+
+  <ClassificationDramaDialogs
+    v-model:editor-visible="dialogVisible"
+    v-model:languages="languages"
+    v-model:candidate-visible="candidateVisible"
+    v-model:candidate-keyword="candidateKeyword"
+    :editing-id="editingId"
+    :form="form"
+    @update:form="Object.assign(form, $event)"
+    :saving="saving"
+    :candidate-loading="candidateLoading"
+    :candidates="candidates"
+    :candidate-page="candidatePage"
+    :candidate-page-size="candidatePageSize"
+    :candidate-total="candidateTotal"
+    :binding="binding"
+    :selected-count="selectedDramas.length"
+    @save="saveClassification"
+    @search="candidateSearch"
+    @page="changeCandidatePage"
+    @selection="onSelectionChange"
+    @confirm="confirmBind"
+  />
+</template>
+
+<style scoped>
+.classification-layout {
+  display: grid;
+  grid-template-columns: 260px minmax(0, 1fr);
+  gap: 16px;
+  align-items: start;
+}
+
+.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;
+}
+</style>

src/views/contentManagement/CategoryManagementView.vue

@@ -4,6 +4,12 @@
 import { onMounted, reactive, ref } from 'vue'
 import { ElMessage, ElMessageBox } from 'element-plus'
 import { AppIcons } from '@/constants/icons'
+import {
+  languageCodes,
+  languageLabel,
+  localesFromColumns,
+  payloadLocales
+} from '@/constants/contentLanguages'
 import {
   createDramaCategoryApi,
   deleteDramaCategoryApi,
@@ -11,6 +17,7 @@ import {
   updateDramaCategoryApi
 } from '@/api/admin/drama'
 import { useRbac } from '@/stores/rbac'
+import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
 import PageHeading from '@/views/components/PageHeading.vue'
 
 const { can } = useRbac()
@@ -20,7 +27,8 @@ const list = ref([])
 const dialogVisible = ref(false)
 const saving = ref(false)
 const editingId = ref(null)
-const form = reactive({ name: '', sort: 1, status: 1 })
+const languages = ref(['zh'])
+const form = reactive({ locales: { zh: '' }, sort: 1, status: 1 })
 
 async function load() {
   loading.value = true
@@ -38,21 +46,29 @@ function nextSort() {
 
 function openCreate() {
   editingId.value = null
-  Object.assign(form, { name: '', sort: nextSort(), status: 1 })
+  languages.value = ['zh']
+  Object.assign(form, { locales: { zh: '' }, sort: nextSort(), 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 })
+  const locales = localesFromColumns(row.locales, row.name, row.nameEn, row.nameId)
+  languages.value = languageCodes(locales)
+  Object.assign(form, { locales, sort: row.sort ?? 0, status: row.status ?? 1 })
   dialogVisible.value = true
 }
 
 async function saveCategory() {
-  if (!form.name.trim()) return ElMessage.warning('请填写类型名称')
+  const locales = payloadLocales(form.locales, languages.value)
+  const missing = languages.value.find((code) => !locales[code])
+  if (!locales.zh || missing) {
+    ElMessage.warning(missing ? `请填写${languageLabel(missing)}名称` : '请填写中文名称')
+    return
+  }
   saving.value = true
   try {
-    const payload = { name: form.name.trim(), sort: form.sort, status: form.status }
+    const payload = { name: locales.zh, locales, sort: form.sort, status: form.status }
     if (editingId.value) {
       await updateDramaCategoryApi(editingId.value, payload)
       ElMessage.success('类型已更新')
@@ -115,7 +131,20 @@ onMounted(load)
       empty-text="还没有短剧类型"
     >
       <el-table-column type="index" label="序号" width="80" />
-      <el-table-column prop="name" label="类型名称" min-width="200" />
+      <el-table-column prop="name" label="类型名称" min-width="160" />
+      <el-table-column label="语言" min-width="180">
+        <template #default="{ row }">
+          <el-tag
+            v-for="code in languageCodes(
+              row.locales || localesFromColumns(null, row.name, row.nameEn, row.nameId)
+            )"
+            :key="code"
+            effect="light"
+            class="locale-tag"
+            >{{ languageLabel(code) }}</el-tag
+          >
+        </template>
+      </el-table-column>
       <el-table-column label="短剧数" width="110">
         <template #default="{ row }">{{ row.dramaCount || 0 }} 部</template>
       </el-table-column>
@@ -146,11 +175,15 @@ onMounted(load)
     </el-table>
   </section>
 
-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑类型' : '新建类型'" width="460px">
+  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑类型' : '新建类型'" width="560px">
     <el-form label-position="top">
-      <el-form-item label="类型名称" required>
-        <el-input v-model="form.name" maxlength="20" placeholder="例如：都市情感" />
-      </el-form-item>
+      <LocaleTextFields
+        v-model:languages="languages"
+        :locales="form.locales"
+        @update:locales="form.locales = $event"
+        label="名称"
+        :maxlength="64"
+      />
       <div class="form-row">
         <el-form-item label="排序">
           <el-input-number v-model="form.sort" :min="0" :max="999" />
@@ -166,3 +199,9 @@ onMounted(load)
     </template>
   </el-dialog>
 </template>
+
+<style scoped>
+.locale-tag + .locale-tag {
+  margin-left: 6px;
+}
+</style>

src/views/contentManagement/ClassificationDramaDialogs.vue

@@ -0,0 +1,171 @@
+<!-- Author: fruit.com.cn -->
+<!-- 分类管理弹窗：编辑分类，以及把短剧关联进分类。 -->
+
+<script setup>
+import { statusClass } from '@/utils/status'
+import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+
+const SORT_MAX = 9999
+
+const STATUS_TEXT = {
+  draft: '草稿',
+  reviewing: '审核中',
+  approved: '待发布',
+  published: '已上线',
+  offline: '已下线'
+}
+
+defineProps({
+  editorVisible: { type: Boolean, default: false },
+  editingId: { type: [String, Number], default: null },
+  languages: { type: Array, default: () => ['zh'] },
+  form: { type: Object, required: true },
+  saving: { type: Boolean, default: false },
+  candidateVisible: { type: Boolean, default: false },
+  candidateLoading: { type: Boolean, default: false },
+  candidates: { type: Array, default: () => [] },
+  candidateKeyword: { type: String, default: '' },
+  candidatePage: { type: Number, default: 1 },
+  candidatePageSize: { type: Number, default: 10 },
+  candidateTotal: { type: Number, default: 0 },
+  binding: { type: Boolean, default: false },
+  selectedCount: { type: Number, default: 0 }
+})
+
+const emit = defineEmits([
+  'update:editorVisible',
+  'update:languages',
+  'update:form',
+  'update:candidateVisible',
+  'update:candidateKeyword',
+  'save',
+  'search',
+  'page',
+  'selection',
+  'confirm'
+])
+</script>
+
+<template>
+  <el-dialog
+    :model-value="editorVisible"
+    :title="editingId ? '编辑分类' : '新建分类'"
+    width="560px"
+    @update:model-value="emit('update:editorVisible', $event)"
+  >
+    <el-form label-position="top">
+      <LocaleTextFields
+        :languages="languages"
+        :locales="form.locales"
+        label="名称"
+        :maxlength="64"
+        @update:languages="emit('update:languages', $event)"
+        @update:locales="emit('update:form', { ...form, locales: $event })"
+      />
+      <div class="classification-form-row">
+        <el-form-item label="排序">
+          <el-input-number
+            :model-value="form.sort"
+            :min="0"
+            :max="SORT_MAX"
+            controls-position="right"
+            @update:model-value="emit('update:form', { ...form, sort: $event })"
+          />
+        </el-form-item>
+        <el-form-item label="状态">
+          <el-switch
+            :model-value="form.status"
+            :active-value="1"
+            :inactive-value="0"
+            @update:model-value="emit('update:form', { ...form, status: $event })"
+          />
+        </el-form-item>
+      </div>
+    </el-form>
+    <template #footer>
+      <el-button @click="emit('update:editorVisible', false)">取消</el-button>
+      <el-button type="primary" :loading="saving" @click="emit('save')">保存</el-button>
+    </template>
+  </el-dialog>
+
+  <el-dialog
+    :model-value="candidateVisible"
+    title="添加关联短剧"
+    width="760px"
+    @update:model-value="emit('update:candidateVisible', $event)"
+  >
+    <div class="classification-toolbar__search">
+      <el-input
+        :model-value="candidateKeyword"
+        placeholder="搜索短剧名称"
+        clearable
+        style="width: 220px"
+        @update:model-value="emit('update:candidateKeyword', $event)"
+        @keyup.enter="emit('search')"
+        @clear="emit('search')"
+      />
+      <el-button type="primary" plain @click="emit('search')">查询</el-button>
+    </div>
+    <el-table
+      v-loading="candidateLoading"
+      :data="candidates"
+      row-key="id"
+      border
+      max-height="380"
+      empty-text="没有可关联的短剧"
+      @selection-change="emit('selection', $event)"
+    >
+      <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="emit('page', $event)"
+      />
+    </div>
+    <template #footer>
+      <el-button @click="emit('update:candidateVisible', false)">取消</el-button>
+      <el-button type="primary" :loading="binding" @click="emit('confirm')">
+        确定关联{{ selectedCount ? `（${selectedCount}）` : '' }}
+      </el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.classification-form-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 12px;
+}
+
+.classification-toolbar__search {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  margin-bottom: 12px;
+}
+
+.classification-pagination {
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 14px;
+}
+</style>

src/views/contentManagement/ClassificationSideList.vue

@@ -0,0 +1,140 @@
+<!-- Author: fruit.com.cn -->
+<!-- 分类管理左侧列表：切换、编辑、删除。 -->
+
+<script setup>
+import { AppIcon } from '@/components/AppIcon'
+import { AppIcons } from '@/constants/icons'
+import { useRbac } from '@/stores/rbac'
+
+defineProps({
+  classifications: { type: Array, default: () => [] },
+  activeId: { type: [String, Number], default: null }
+})
+
+const emit = defineEmits(['select', 'edit', 'remove'])
+const { can } = useRbac()
+</script>
+
+<template>
+  <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="emit('select', 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="emit('edit', item)"
+            >
+              <AppIcon :icon="AppIcons.edit" :size="15" />
+            </el-button>
+            <el-button
+              v-if="can('drama:delete')"
+              text
+              circle
+              size="small"
+              @click="emit('remove', 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>
+</template>
+
+<style scoped>
+.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);
+}
+</style>

src/views/contentManagement/DramaManagementView.vue

@@ -1,10 +1,18 @@
 <!-- Author: fruit.com.cn -->
 
 <script setup>
-import { onMounted, reactive, ref } from 'vue'
+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 {
+  languageLabel,
+  languageCodes,
+  localesFromColumns,
+  payloadLocales
+} from '@/constants/contentLanguages'
+import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
+import { AppImage } from '@/components/AppImage'
 import {
   changeDramaStatusApi,
   createDramaApi,
@@ -15,6 +23,7 @@ import {
 } from '@/api/admin/drama'
 import { useRbac } from '@/stores/rbac'
 import { formatCount } from '@/utils/format'
+import { listContentTagsApi } from '@/api/admin/contentTag'
 import { statusClass } from '@/utils/status'
 import { uploadFile } from '@/utils/uploader'
 
@@ -28,8 +37,8 @@ const categories = ref([])
 
 const keyword = ref('')
 const statusFilter = ref(undefined)
-const categoryId = ref(undefined)
-const hotFilter = ref(undefined)
+const categoryIds = ref([])
+const tags = ref([])
 const pageIndex = ref(1)
 const pageSize = ref(10)
 
@@ -37,16 +46,42 @@ const dialogVisible = ref(false)
 const saving = ref(false)
 const uploadingCover = ref(false)
 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 textLanguages = ref(['zh'])
 const form = reactive({
   title: '',
-  categoryId: undefined,
+  titleLocales: { zh: '' },
+  categoryIds: [],
+  tagId: null,
   description: '',
+  synopsisLocales: { zh: '' },
   freeEpisodes: 3,
   unlockCoin: 0,
+  favoriteCount: 0,
+  heat: 0,
+  isHot: false,
+  sort: 0,
   cover: ''
 })
 
+const MAX_COVER_SIZE = 5 * 1024 * 1024
+const COVER_TYPES = ['image/jpeg', 'image/png', 'image/webp']
+
+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,8 +106,7 @@ async function load() {
       pageSize: pageSize.value,
       keyword: keyword.value.trim() || undefined,
       status: statusFilter.value || undefined,
-      categoryId: categoryId.value,
-      isHot: hotFilter.value
+      categoryIds: categoryIds.value.length ? categoryIds.value : undefined
     })
     list.value = res.data?.list || []
     total.value = res.data?.total || 0
@@ -86,6 +120,11 @@ async function loadCategories() {
   categories.value = res.data || []
 }
 
+async function loadTags() {
+  const res = await listContentTagsApi(true)
+  tags.value = res.data || []
+}
+
 function search() {
   pageIndex.value = 1
   load()
@@ -94,8 +133,7 @@ function search() {
 function resetFilters() {
   keyword.value = ''
   statusFilter.value = undefined
-  categoryId.value = undefined
-  hotFilter.value = undefined
+  categoryIds.value = []
   search()
 }
 
@@ -104,42 +142,128 @@ function handleSizeChange() {
   load()
 }
 
+function selectedCategoryIds(row) {
+  const values =
+    Array.isArray(row.categoryIds) && row.categoryIds.length
+      ? row.categoryIds
+      : row.categoryId
+        ? [row.categoryId]
+        : []
+  return values.filter((id) => Number(id) > 0)
+}
+
+function coverBasename(path) {
+  if (!path) return ''
+  const clean = path.split('?')[0].split('#')[0]
+  return decodeURIComponent(clean.split('/').pop() || clean)
+}
+
+/** 长整型计数字段在接口里是字符串，数字输入框只接受 number。 */
+function toCount(value) {
+  const count = Number(value)
+  return Number.isFinite(count) ? count : 0
+}
+
+async function resetValidation() {
+  await nextTick()
+  formRef.value?.clearValidate()
+}
+
+function changeTextLanguages(codes) {
+  textLanguages.value = codes
+  codes.forEach((code) => {
+    if (form.synopsisLocales[code] == null) form.synopsisLocales[code] = ''
+  })
+}
+
 function openCreate() {
   editingId.value = null
+  textLanguages.value = ['zh']
   Object.assign(form, {
     title: '',
-    categoryId: undefined,
+    titleLocales: { zh: '' },
+    categoryIds: [],
+    tagId: null,
     description: '',
+    synopsisLocales: { zh: '' },
     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()
 }
 
 function openEdit(row) {
   editingId.value = row.id
+  const titleLocales = localesFromColumns(row.titleLocales, row.title)
+  const synopsisLocales = localesFromColumns(row.synopsisLocales, row.description)
+  textLanguages.value = languageCodes(titleLocales)
+  textLanguages.value.forEach((code) => {
+    if (synopsisLocales[code] == null) synopsisLocales[code] = ''
+  })
   Object.assign(form, {
     title: row.title,
-    categoryId: row.categoryId || undefined,
+    titleLocales,
+    categoryIds: selectedCategoryIds(row),
+    tagId: Number(row.tagId) > 0 ? row.tagId : null,
     description: row.description || '',
-    freeEpisodes: row.freeEpisodes ?? 3,
-    unlockCoin: row.unlockCoin ?? 0,
+    synopsisLocales,
+    freeEpisodes: toCount(row.freeEpisodes ?? 3),
+    unlockCoin: toCount(row.unlockCoin),
+    favoriteCount: toCount(row.favoriteCount),
+    heat: toCount(row.views),
     isHot: !!row.isHot,
+    sort: toCount(row.sort),
     cover: row.cover || ''
   })
+  coverFileName.value = row.cover ? coverBasename(row.cover) : ''
+  coverError.value = ''
+  editingCommentCount.value = toCount(row.commentCount)
+  editingLikeCount.value = toCount(row.likeCount)
   dialogVisible.value = true
+  resetValidation()
+}
+
+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)
 }
 
 async function saveDrama() {
-  if (!form.title.trim()) return ElMessage.warning('请填写短剧名称')
-  if (!form.categoryId) return ElMessage.warning('请选择短剧类型')
-  const category = categories.value.find((item) => item.id === form.categoryId)
+  if (saving.value || uploadingCover.value) return
+  const titles = payloadLocales(form.titleLocales, textLanguages.value)
+  const missing = textLanguages.value.find((code) => !titles[code])
+  if (!titles.zh || missing) {
+    ElMessage.warning(missing ? `请填写${languageLabel(missing)}名称` : '请输入短剧名称')
+    return
+  }
+  const synopses = payloadLocales(form.synopsisLocales, textLanguages.value)
+  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 || ''
+    title: titles.zh,
+    titleLocales: titles,
+    description: synopses.zh || '',
+    synopsisLocales: synopses,
+    genre: categoryNames.join(' / '),
+    tagId: form.tagId || 0
   }
   saving.value = true
   try {
@@ -158,22 +282,54 @@ async function saveDrama() {
   }
 }
 
+function beforeCoverUpload(file) {
+  coverError.value = ''
+  if (!COVER_TYPES.includes(file.type)) {
+    coverError.value = '封面仅支持 JPG、PNG 或 WebP 格式'
+    return false
+  }
+  if (file.size > MAX_COVER_SIZE) {
+    coverError.value = '封面大小不能超过 5MB'
+    return false
+  }
+  return true
+}
+
 /** 封面走分片上传（图片只有一个分片），成功后回填地址。 */
 async function uploadCover(options) {
   uploadingCover.value = true
   coverPercent.value = 0
+  coverError.value = ''
   try {
     const asset = await uploadFile(options.file, {
       bizType: 'DRAMA_COVER',
       onProgress: (percent) => (coverPercent.value = percent)
     })
     form.cover = asset.url
+    coverFileName.value = options.file.name
     ElMessage.success('封面已上传')
+  } catch {
+    coverError.value = '封面上传失败，请检查网络后重试'
   } finally {
     uploadingCover.value = false
   }
 }
 
+function removeCover() {
+  if (uploadingCover.value) return
+  form.cover = ''
+  coverFileName.value = ''
+  coverError.value = ''
+}
+
+function beforeDialogClose(done) {
+  if (saving.value || uploadingCover.value) {
+    ElMessage.warning(saving.value ? '正在保存，请稍候' : '封面正在上传，请稍候')
+    return
+  }
+  done()
+}
+
 async function confirmDelete(row) {
   try {
     await ElMessageBox.confirm(`确定删除短剧「${row.title}」吗？删除后无法恢复。`, '删除确认', {
@@ -231,7 +387,7 @@ function reviewActions(row) {
 }
 
 onMounted(async () => {
-  await loadCategories()
+  await Promise.all([loadCategories(), loadTags()])
   await load()
 })
 </script>
@@ -262,16 +418,18 @@ 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="hotFilter" clearable placeholder="全部热度" @change="search"
-          ><el-option label="仅热门" :value="true" /><el-option
-            label="非热门"
-            :value="false" /></el-select
         ><el-button @click="resetFilters">重置</el-button></div
       ><span class="table-result-count">共 {{ total }} 部短剧</span></div
     >
@@ -285,10 +443,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
@@ -301,13 +464,42 @@ 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 v-if="rowCategoryList(row).length" class="tag-wrap"
+            ><el-tag v-for="name in rowCategoryList(row)" :key="name" type="info" effect="light">{{
+              name
+            }}</el-tag></div
+          ><span v-else class="table-empty-text">—</span></template
+        >
+      </el-table-column>
+      <el-table-column label="标签" min-width="120"
+        ><template #default="{ row }"
+          ><span v-if="row.tagName">{{ row.tagName }}</span
+          ><span v-else class="table-empty-text">—</span></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">{{
@@ -315,12 +507,6 @@ onMounted(async () => {
           }}</el-tag></template
         ></el-table-column
       >
-      <el-table-column label="热门" width="90"
-        ><template #default="{ row }"
-          ><el-tag v-if="row.isHot" type="danger" effect="light">热门</el-tag
-          ><span v-else class="table-empty-text">—</span></template
-        ></el-table-column
-      >
       <el-table-column prop="updatedAt" label="更新时间" width="160" />
       <el-table-column label="审核" width="140"
         ><template #default="{ row }"
@@ -375,56 +561,250 @@ onMounted(async () => {
         @size-change="handleSizeChange"
     /></div>
   </section>
-  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑短剧' : '新建短剧'" width="600px"
-    ><el-form label-position="top"
-      ><div class="form-row"
-        ><el-form-item label="短剧名称" required
-          ><el-input v-model="form.title" placeholder="请输入短剧名称" /></el-form-item
-        ><el-form-item label="类型" required
-          ><el-select v-model="form.categoryId" placeholder="请选择"
-            ><el-option
-              v-for="item in categories"
-              :key="item.id"
-              :label="item.name"
-              :value="item.id" /></el-select></el-form-item></div
-      ><el-form-item label="简介"
-        ><el-input
-          v-model="form.description"
-          type="textarea"
-          :rows="2"
-          maxlength="200"
-          show-word-limit /></el-form-item
-      ><div class="form-row"
-        ><el-form-item label="免费集数"
-          ><el-input-number v-model="form.freeEpisodes" :min="0" :max="200" /></el-form-item
-        ><el-form-item label="单集解锁金币"
-          ><el-input-number v-model="form.unlockCoin" :min="0" :max="9999" /></el-form-item
-      ></div>
-      <el-form-item label="是否热门"><el-switch v-model="form.isHot" /></el-form-item>
-      <el-form-item label="短剧封面"
-        ><div class="cover-field"
-          ><div class="cover-field-actions"
-            ><el-upload
-              v-if="can('cover:upload')"
-              :show-file-list="false"
-              accept="image/*"
-              :http-request="uploadCover"
-              :disabled="uploadingCover"
-              ><el-button :loading="uploadingCover">{{
-                form.cover ? '更换封面' : '选择封面'
-              }}</el-button></el-upload
-            ><p v-if="uploadingCover" class="selected-file">上传中 {{ coverPercent }}%</p
-            ><p v-else-if="form.cover" class="selected-file">封面已上传</p
-            ><el-input v-model="form.cover" placeholder="也可以直接填写图片地址" /></div
-          ><img
-            v-if="form.cover"
-            :src="form.cover"
-            class="form-cover-preview" /></div></el-form-item></el-form
-    ><template #footer
-      ><el-button @click="dialogVisible = false">取消</el-button
-      ><el-button type="primary" :loading="saving" @click="saveDrama">{{
-        editingId ? '保存修改' : '保存草稿'
-      }}</el-button></template
-    ></el-dialog
+  <el-dialog
+    v-model="dialogVisible"
+    :title="editingId ? '编辑短剧' : '新建短剧'"
+    width="760px"
+    class="drama-editor-dialog"
+    :close-on-click-modal="false"
+    :before-close="beforeDialogClose"
   >
+    <el-form ref="formRef" :model="form" label-position="top" class="drama-editor-form">
+      <section class="editor-section">
+        <h3 class="editor-section-title">封面</h3>
+        <div class="cover-editor">
+          <div class="cover-preview-card">
+            <img v-if="form.cover" :src="form.cover" alt="短剧封面" />
+            <div v-else class="cover-preview-empty">
+              <AppIcon :icon="AppIcons.content" :size="28" />
+              <span>暂无封面</span>
+            </div>
+            <div v-if="uploadingCover" class="cover-upload-mask">
+              <span>上传中</span>
+              <b>{{ coverPercent }}%</b>
+            </div>
+          </div>
+
+          <div class="cover-editor-meta">
+            <div class="cover-status-line">
+              <el-tag :type="form.cover ? 'success' : 'info'" effect="light">
+                {{ form.cover ? '已上传' : '未上传' }}
+              </el-tag>
+              <span class="cover-filename" :title="coverDisplayName">{{ coverDisplayName }}</span>
+            </div>
+            <p class="cover-hint">支持 JPG、PNG、WebP，单张不超过 5MB。</p>
+            <el-alert
+              v-if="coverError"
+              :title="coverError"
+              type="error"
+              :closable="false"
+              show-icon
+            />
+            <div class="cover-actions">
+              <el-upload
+                v-if="can('cover:upload')"
+                :show-file-list="false"
+                accept="image/jpeg,image/png,image/webp"
+                :before-upload="beforeCoverUpload"
+                :http-request="uploadCover"
+                :disabled="uploadingCover"
+              >
+                <el-button :loading="uploadingCover" :disabled="uploadingCover">
+                  <AppIcon :icon="AppIcons.upload" />
+                  {{ form.cover ? '更换封面' : '选择封面' }}
+                </el-button>
+              </el-upload>
+              <el-button
+                v-if="can('cover:upload') && form.cover"
+                type="danger"
+                :disabled="uploadingCover"
+                @click="removeCover"
+              >
+                移除
+              </el-button>
+              <a
+                v-if="form.cover"
+                class="cover-original-link"
+                :href="form.cover"
+                target="_blank"
+                rel="noopener noreferrer"
+              >
+                查看原图
+              </a>
+            </div>
+          </div>
+        </div>
+      </section>
+
+      <section class="editor-section">
+        <h3 class="editor-section-title">基础信息</h3>
+        <LocaleTextFields
+          :languages="textLanguages"
+          :locales="form.titleLocales"
+          @update:locales="form.titleLocales = $event"
+          label="名称"
+          :maxlength="80"
+          @update:languages="changeTextLanguages"
+        />
+        <div class="editor-grid editor-grid--two">
+          <el-form-item label="类型">
+            <el-select
+              v-model="form.categoryIds"
+              class="drama-multi-select"
+              multiple
+              filterable
+              clearable
+              placeholder="可不选"
+            >
+              <el-option
+                v-for="item in categories"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item label="标签">
+            <el-select v-model="form.tagId" clearable filterable placeholder="可不选">
+              <el-option v-for="item in tags" :key="item.id" :label="item.name" :value="item.id" />
+            </el-select>
+          </el-form-item>
+        </div>
+        <LocaleTextFields
+          :languages="textLanguages"
+          :locales="form.synopsisLocales"
+          @update:locales="form.synopsisLocales = $event"
+          label="简介"
+          :maxlength="1000"
+          multiline
+          :show-languages="false"
+          :required="false"
+        />
+      </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.freeEpisodes"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :max="200"
+            />
+          </el-form-item>
+          <el-form-item label="单集解锁金币">
+            <el-input-number
+              v-model="form.unlockCoin"
+              class="editor-number"
+              controls-position="right"
+              :min="0"
+              :max="9999"
+            />
+          </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>
+    </el-form>
+
+    <template #footer>
+      <el-button :disabled="saving || uploadingCover" @click="dialogVisible = false"
+        >取消</el-button
+      >
+      <el-button
+        type="primary"
+        :loading="saving"
+        :disabled="saving || uploadingCover"
+        @click="saveDrama"
+      >
+        {{ editingId ? '保存修改' : '保存草稿' }}
+      </el-button>
+    </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;
+}
+
+.drama-editor-form :deep(.el-form-item) {
+  margin-right: 0;
+}
+
+.drama-editor-form :deep(.el-form-item__content) {
+  min-width: 0;
+}
+
+.drama-editor-form :deep(.el-input),
+.drama-editor-form :deep(.el-textarea),
+.drama-editor-form :deep(.el-select) {
+  width: 100%;
+}
+
+.tag-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+}
+</style>

src/views/contentManagement/DramaPlaylistView.vue

@@ -0,0 +1,660 @@
+<!-- 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 {
+  languageCodes,
+  languageLabel,
+  localesFromColumns,
+  payloadLocales
+} from '@/constants/contentLanguages'
+import {
+  bindPlaylistCategoryDramasApi,
+  createPlaylistCategoryApi,
+  deletePlaylistCategoryApi,
+  listPlaylistCategoriesApi,
+  listPlaylistCategoryDramaCandidatesApi,
+  listPlaylistCategoryDramasApi,
+  unbindPlaylistCategoryDramaApi,
+  updatePlaylistCategoryApi
+} from '@/api/admin/dramaPlaylistCategory'
+import { statusClass } from '@/utils/status'
+import { useRbac } from '@/stores/rbac'
+import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
+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 languages = ref(['zh'])
+const emptyForm = () => ({
+  locales: { zh: '' },
+  descriptionLocales: { zh: '' },
+  sort: 1,
+  status: 1
+})
+const form = reactive(emptyForm())
+
+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 changeLanguages(codes) {
+  languages.value = codes
+  codes.forEach((code) => {
+    if (form.descriptionLocales[code] == null) form.descriptionLocales[code] = ''
+  })
+}
+
+function openCreate() {
+  editingId.value = null
+  languages.value = ['zh']
+  const maxSort = categories.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
+  Object.assign(form, emptyForm(), { sort: maxSort + 1 })
+  dialogVisible.value = true
+}
+
+function openEdit(row) {
+  editingId.value = row.id
+  const locales = localesFromColumns(row.locales, row.name, row.nameEn, row.nameId)
+  languages.value = languageCodes(locales)
+  const descriptionLocales = localesFromColumns(
+    row.descriptionLocales,
+    row.description,
+    row.descriptionEn,
+    row.descriptionId
+  )
+  languages.value.forEach((code) => {
+    if (descriptionLocales[code] == null) descriptionLocales[code] = ''
+  })
+  Object.assign(form, {
+    locales,
+    descriptionLocales,
+    sort: row.sort ?? 0,
+    status: row.status ?? 1
+  })
+  dialogVisible.value = true
+}
+
+async function saveCategory() {
+  const locales = payloadLocales(form.locales, languages.value)
+  const missing = languages.value.find((code) => !locales[code])
+  if (!locales.zh || missing) {
+    ElMessage.warning(missing ? `请填写${languageLabel(missing)}名称` : '请填写中文名称')
+    return
+  }
+  saving.value = true
+  try {
+    const payload = {
+      name: locales.zh,
+      locales,
+      descriptionLocales: payloadLocales(form.descriptionLocales, languages.value),
+      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="640px"
+  >
+    <el-form label-position="top">
+      <LocaleTextFields
+        :languages="languages"
+        :locales="form.locales"
+        @update:locales="form.locales = $event"
+        label="名称"
+        :maxlength="64"
+        @update:languages="changeLanguages"
+      />
+      <LocaleTextFields
+        :languages="languages"
+        :locales="form.descriptionLocales"
+        @update:locales="form.descriptionLocales = $event"
+        label="描述"
+        :maxlength="255"
+        multiline
+        :show-languages="false"
+        :required="false"
+      />
+      <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/EpisodeManagementView.vue

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

src/views/contentManagement/TagManagementView.vue

@@ -0,0 +1,239 @@
+<!-- Author: fruit.com.cn -->
+<!-- 标签管理：名称分中文、英文、印尼语。短剧编辑时单选一个标签。 -->
+
+<script setup>
+import { onMounted, reactive, ref } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { AppIcons } from '@/constants/icons'
+import {
+  languageCodes,
+  languageLabel,
+  localesFromColumns,
+  payloadLocales
+} from '@/constants/contentLanguages'
+import {
+  createContentTagApi,
+  deleteContentTagApi,
+  listContentTagsApi,
+  updateContentTagApi
+} from '@/api/admin/contentTag'
+import { useRbac } from '@/stores/rbac'
+import LocaleTextFields from '@/views/components/LocaleTextFields.vue'
+import PageHeading from '@/views/components/PageHeading.vue'
+
+const { can } = useRbac()
+
+const tags = ref([])
+const loading = ref(false)
+const saving = ref(false)
+const dialogVisible = ref(false)
+const editingId = ref(null)
+const languages = ref(['zh'])
+const DEFAULT_TAG_COLOR = '#E5484D'
+const emptyForm = () => ({
+  locales: { zh: '' },
+  bgColor: DEFAULT_TAG_COLOR,
+  sort: 1,
+  status: 1
+})
+const form = reactive(emptyForm())
+
+async function load() {
+  loading.value = true
+  try {
+    const res = await listContentTagsApi()
+    tags.value = res.data || []
+  } finally {
+    loading.value = false
+  }
+}
+
+function nextSort() {
+  return tags.value.reduce((max, item) => Math.max(max, item.sort || 0), 0) + 1
+}
+
+function openCreate() {
+  editingId.value = null
+  languages.value = ['zh']
+  Object.assign(form, emptyForm(), { sort: nextSort() })
+  dialogVisible.value = true
+}
+
+function openEdit(row) {
+  editingId.value = row.id
+  const locales = localesFromColumns(row.locales, row.name, row.nameEn, row.nameId)
+  languages.value = languageCodes(locales)
+  Object.assign(form, {
+    locales,
+    bgColor: row.bgColor || DEFAULT_TAG_COLOR,
+    sort: row.sort ?? 0,
+    status: row.status ?? 1
+  })
+  dialogVisible.value = true
+}
+
+async function save() {
+  const locales = payloadLocales(form.locales, languages.value)
+  if (!locales.zh) {
+    ElMessage.warning('请填写中文名称')
+    return
+  }
+  const missing = languages.value.find((code) => !locales[code])
+  if (missing) {
+    ElMessage.warning(`请填写${languageLabel(missing)}名称`)
+    return
+  }
+  saving.value = true
+  try {
+    const payload = {
+      name: locales.zh,
+      locales,
+      bgColor: form.bgColor || DEFAULT_TAG_COLOR,
+      sort: form.sort,
+      status: form.status
+    }
+    if (editingId.value) {
+      await updateContentTagApi(editingId.value, payload)
+      ElMessage.success('标签已更新')
+    } else {
+      await createContentTagApi(payload)
+      ElMessage.success('标签已创建')
+    }
+    dialogVisible.value = false
+    await load()
+  } finally {
+    saving.value = false
+  }
+}
+
+async function confirmDelete(row) {
+  try {
+    await ElMessageBox.confirm(
+      `确定删除标签「${row.name}」吗？已选该标签的短剧会取消选择。`,
+      '删除确认',
+      {
+        confirmButtonText: '确认删除',
+        cancelButtonText: '取消',
+        type: 'warning',
+        confirmButtonClass: 'el-button--danger'
+      }
+    )
+  } catch {
+    return
+  }
+  await deleteContentTagApi(row.id)
+  ElMessage.success('标签已删除')
+  await load()
+}
+
+onMounted(load)
+</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>
+
+  <section class="panel">
+    <el-table
+      v-loading="loading"
+      :data="tags"
+      row-key="id"
+      border
+      class="drama-el-table"
+      empty-text="还没有标签"
+    >
+      <el-table-column type="index" label="序号" width="80" />
+      <el-table-column prop="name" label="中文名称" min-width="160" />
+      <el-table-column label="语言" min-width="220">
+        <template #default="{ row }">
+          <el-tag
+            v-for="code in languageCodes(
+              row.locales || localesFromColumns(null, row.name, row.nameEn, row.nameId)
+            )"
+            :key="code"
+            effect="light"
+            class="locale-tag"
+            >{{ languageLabel(code) }}</el-tag
+          >
+        </template>
+      </el-table-column>
+      <el-table-column label="背景色" width="100">
+        <template #default="{ row }">
+          <span class="tag-color" :style="{ background: row.bgColor || DEFAULT_TAG_COLOR }"></span>
+        </template>
+      </el-table-column>
+      <el-table-column prop="sort" label="排序" width="100" />
+      <el-table-column label="状态" width="110">
+        <template #default="{ row }">
+          <el-tag :type="row.status === 1 ? 'success' : 'info'" effect="light">{{
+            row.status === 1 ? '启用' : '停用'
+          }}</el-tag>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" width="200" fixed="right">
+        <template #default="{ row }">
+          <div class="table-actions">
+            <el-button v-if="can('drama:update')" type="primary" size="small" @click="openEdit(row)"
+              >编辑</el-button
+            >
+            <el-button
+              v-if="can('drama:delete')"
+              type="danger"
+              size="small"
+              @click="confirmDelete(row)"
+              >删除</el-button
+            >
+          </div>
+        </template>
+      </el-table-column>
+    </el-table>
+  </section>
+
+  <el-dialog v-model="dialogVisible" :title="editingId ? '编辑标签' : '新建标签'" width="560px">
+    <el-form label-position="top">
+      <LocaleTextFields
+        v-model:languages="languages"
+        :locales="form.locales"
+        @update:locales="form.locales = $event"
+        label="名称"
+        :maxlength="64"
+      />
+      <el-form-item label="背景色">
+        <el-color-picker v-model="form.bgColor" color-format="hex" />
+      </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>
+    <template #footer>
+      <el-button @click="dialogVisible = false">取消</el-button>
+      <el-button type="primary" :loading="saving" @click="save">保存</el-button>
+    </template>
+  </el-dialog>
+</template>
+
+<style scoped>
+.locale-tag + .locale-tag {
+  margin-left: 6px;
+}
+
+.tag-color {
+  display: inline-block;
+  width: 28px;
+  height: 16px;
+  border-radius: 4px;
+}
+</style>

src/views/contentManagement/upload/BatchUploadDialog.vue

@@ -0,0 +1,363 @@
+<!-- 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 = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    dramaId: string | number
+    nextEpisodeNumber: number
+    defaultUnlockCoin: number
+    existingNumbers: number[]
+    /** 所属短剧免费集数；不传默认 0 */
+    freeEpisodes?: number
+  }>(),
+  {
+    freeEpisodes: 0
+  }
+)
+
+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)
+
+const startButtonLabel = computed(() =>
+  queue.isUploading.value ? t('episodeBatch.uploadingAction') : t('episodeBatch.startUpload')
+)
+
+function extensionOf(fileName: string): string {
+  const parts = String(fileName || '').split('.')
+  return (parts.pop() || '').toLowerCase()
+}
+
+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)
+}
+
+function openFilePicker(): void {
+  fileInputRef.value?.click()
+}
+
+function onStartUpload(): void {
+  if (!queue.canStart.value) return
+  queue.start()
+}
+
+function onBeforeUnload(event: BeforeUnloadEvent): void {
+  if (!queue.hasActiveUpload.value) return
+  event.preventDefault()
+  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 }))
+  }
+}
+
+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.started.value || !queue.items.value.length"
+        @click="queue.pause()"
+      >
+        {{ t('episodeBatch.pause') }}
+      </el-button>
+      <el-button :disabled="!queue.canStart.value" @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>
+
+    <p v-if="queue.showResultSummary.value" class="batch-upload-summary">
+      {{
+        t('episodeBatch.resultSummary', {
+          done: queue.doneItems.value.length,
+          failed: queue.failedCount.value
+        })
+      }}
+    </p>
+
+    <div class="batch-upload-list">
+      <UploadTaskRow
+        v-for="(item, index) in queue.items.value"
+        :key="item.id"
+        :item="item"
+        :index="index + 1"
+        :allow-remove="!queue.started.value && item.status === 'waiting'"
+        @retry="queue.retry"
+        @remove="queue.remove"
+      />
+      <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="!queue.canStart.value"
+        :loading="queue.isUploading.value"
+        @click="onStartUpload"
+      >
+        {{ startButtonLabel }}
+      </el-button>
+      <el-button type="success" :disabled="!canCreateEpisodes" @click="openCreateDialog">
+        {{ t('episodeBatch.createEpisodes') }}
+      </el-button>
+    </template>
+  </el-dialog>
+
+  <CreateEpisodesDialog
+    v-model="createVisible"
+    :drama-id="dramaId"
+    :done-items="queue.doneItems.value"
+    :next-episode-number="nextEpisodeNumber"
+    :default-unlock-coin="defaultUnlockCoin"
+    :free-episodes="freeEpisodes"
+    :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-summary {
+  margin: 0 0 12px;
+  padding: 8px 12px;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--el-color-success) 10%, transparent);
+  color: var(--el-text-color-primary);
+  font-size: 13px;
+}
+
+.batch-upload-list {
+  max-height: 360px;
+  overflow: auto;
+}
+</style>

src/views/contentManagement/upload/CreateEpisodesDialog.vue

@@ -0,0 +1,263 @@
+<!-- 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 = withDefaults(
+  defineProps<{
+    modelValue: boolean
+    dramaId: string | number
+    doneItems: UploadQueueItem[]
+    nextEpisodeNumber: number
+    defaultUnlockCoin: number
+    existingNumbers: number[]
+    /** 所属短剧免费集数；不传默认 0 */
+    freeEpisodes?: number
+  }>(),
+  {
+    freeEpisodes: 0
+  }
+)
+
+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 PUBLISHED_STATUS = 'published'
+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 nextFreeNumber(start: number, used: Set<number>): number {
+  let candidate = start
+  while (used.has(candidate)) {
+    candidate += 1
+  }
+  return candidate
+}
+
+function buildRows(): void {
+  const sorted = [...props.doneItems].sort((left, right) =>
+    compareNatural(baseName(left.fileName), baseName(right.fileName))
+  )
+  const used = new Set(props.existingNumbers)
+  let cursor = props.nextEpisodeNumber
+  const freeLimit = props.freeEpisodes
+  rows.value = sorted.map((item) => {
+    const number = nextFreeNumber(cursor, used)
+    used.add(number)
+    cursor = number + 1
+    const isFree = number <= freeLimit
+    return {
+      key: item.id,
+      sourceName: item.fileName,
+      number,
+      title: baseName(item.fileName),
+      isFree,
+      videoUrl: item.url || '',
+      durationSec: item.durationSec || 0,
+      saved: false,
+      error: ''
+    }
+  })
+}
+
+watch(
+  () => props.modelValue,
+  (open) => {
+    if (open) buildRows()
+  }
+)
+
+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: baseName(row.sourceName),
+      durationSec: row.durationSec,
+      videoUrl: row.videoUrl,
+      isFree: row.isFree,
+      unlockCoin: row.isFree ? 0 : props.defaultUnlockCoin,
+      status: PUBLISHED_STATUS
+    })
+    row.saved = true
+    row.error = ''
+  } catch (error) {
+    row.error = errorText(error)
+  }
+}
+
+async function submit(): Promise<void> {
+  if (submitting.value) 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)"
+  >
+    <p class="create-episode-hint">{{ t('episodeBatch.createHint') }}</p>
+    <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-saved': row.saved }"
+      >
+        <b class="create-episode-source" :title="row.sourceName">{{ row.sourceName }}</b>
+        <span class="create-episode-number">{{ row.number }}</span>
+        <span class="create-episode-title" :title="row.title">{{ row.title }}</span>
+        <span class="create-episode-free" :class="row.isFree ? 'is-free' : 'is-paid'">
+          {{ row.isFree ? t('episodeBatch.labelFree') : t('episodeBatch.labelPaid') }}
+        </span>
+        <span class="create-episode-result">
+          {{ row.saved ? t('episodeBatch.createOk') : row.error }}
+        </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-hint {
+  margin: 0 0 12px;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+  line-height: 1.5;
+}
+
+.create-episode-head,
+.create-episode-row {
+  display: grid;
+  grid-template-columns: minmax(120px, 1.2fr) 72px minmax(140px, 1.4fr) 56px minmax(80px, 0.8fr);
+  gap: 8px;
+  align-items: center;
+}
+
+.create-episode-free {
+  font-size: 12px;
+}
+
+.create-episode-free.is-free {
+  color: var(--el-color-success);
+}
+
+.create-episode-free.is-paid {
+  color: var(--el-color-warning);
+}
+
+.create-episode-head {
+  margin-bottom: 8px;
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.create-episode-list {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  max-height: 420px;
+  overflow: auto;
+}
+
+.create-episode-source,
+.create-episode-title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.create-episode-number {
+  font-variant-numeric: tabular-nums;
+}
+
+.create-episode-result {
+  color: var(--el-text-color-secondary);
+  font-size: 12px;
+}
+
+.create-episode-row.is-saved .create-episode-result {
+  color: var(--el-color-success);
+}
+</style>

src/views/contentManagement/upload/EpisodeFormDialog.vue

@@ -0,0 +1,283 @@
+<!-- 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 EpisodeTranscodePanel from './EpisodeTranscodePanel.vue'
+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>
+
+    <EpisodeTranscodePanel v-if="editingId" :episode-id="editingId" :active="dialogVisible" />
+
+    <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/EpisodeTranscodeFrames.vue

@@ -0,0 +1,315 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码逐帧、雪碧图与分页预览 -->
+
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import type {
+  MediaThumbnailFrameItem,
+  MediaThumbnailResult,
+  MediaThumbnailSpriteInfo
+} from '@/api/admin/types'
+import { useI18n } from '@/hooks/web/useI18n'
+import { formatTimeMs, THUMBNAIL_PAGE_SIZES } from './episodeTranscodeUi'
+
+interface FramesView {
+  data: MediaThumbnailResult | null
+  loading: boolean
+  errorMessage: string
+  pageIndex: number
+  pageSize: number
+}
+
+const props = defineProps<{
+  view: FramesView
+}>()
+
+const emit = defineEmits<{
+  pageChange: [value: number]
+  pageSizeChange: [value: number]
+  retry: []
+}>()
+
+const FRAME_CARD_WIDTH = 128
+const PREVIEW_MAX_WIDTH = 520
+const PREVIEW_MAX_HEIGHT = 360
+
+const { t } = useI18n()
+const frameView = ref<'frames' | 'sprites'>('frames')
+const previewVisible = ref(false)
+const previewFrame = ref<MediaThumbnailFrameItem | null>(null)
+const frames = computed(() => props.view.data?.frames?.list || [])
+const sprite = computed(() => props.view.data?.sprite || null)
+const spriteUrls = computed(() => sprite.value?.spriteUrls || [])
+const framesTotal = computed(() => Number(props.view.data?.frames?.total || 0))
+const previewStyle = computed(() => {
+  const frame = previewFrame.value
+  const info = sprite.value
+  if (!frame || !info) return {}
+  const scale = Math.min(
+    PREVIEW_MAX_WIDTH / Math.max(1, frame.width),
+    PREVIEW_MAX_HEIGHT / Math.max(1, frame.height)
+  )
+  return frameStyle(frame, info, scale)
+})
+
+function openFramePreview(frame: MediaThumbnailFrameItem) {
+  previewFrame.value = frame
+  previewVisible.value = true
+}
+
+function frameStyle(frame: MediaThumbnailFrameItem, info: MediaThumbnailSpriteInfo, scale: number) {
+  return {
+    width: `${Math.round(frame.width * scale)}px`,
+    height: `${Math.round(frame.height * scale)}px`,
+    backgroundImage: `url("${frame.spriteUrl || frame.imageUrl}")`,
+    backgroundPosition: `-${Math.round(frame.x * scale)}px -${Math.round(frame.y * scale)}px`,
+    backgroundSize: `${Math.round((info.columns || 1) * frame.width * scale)}px ${Math.round(
+      (info.rows || 1) * frame.height * scale
+    )}px`
+  }
+}
+
+function frameCardStyle(frame: MediaThumbnailFrameItem) {
+  if (!sprite.value) return {}
+  return frameStyle(frame, sprite.value, FRAME_CARD_WIDTH / Math.max(1, frame.width))
+}
+
+function spriteFrameCount(index: number) {
+  const info = sprite.value
+  if (!info) return 0
+  const capacity = Math.max(1, info.columns * info.rows)
+  return Math.max(0, Math.min(capacity, info.totalFrames - index * capacity))
+}
+</script>
+
+<template>
+  <div class="episode-transcode-frames__heading">
+    <h4>{{ t('episodeTranscode.frameTitle') }}</h4>
+    <div class="episode-transcode-frames__tools">
+      <span>{{ t('episodeTranscode.frameCount', { total: framesTotal }) }}</span>
+      <el-radio-group v-model="frameView" size="small">
+        <el-radio-button label="frames">{{ t('episodeTranscode.frameView') }}</el-radio-button>
+        <el-radio-button label="sprites">{{ t('episodeTranscode.spriteView') }}</el-radio-button>
+      </el-radio-group>
+    </div>
+  </div>
+  <el-alert
+    v-if="view.errorMessage"
+    type="error"
+    :title="view.errorMessage"
+    :closable="false"
+    show-icon
+  >
+    <template #default>
+      <el-button size="small" text @click="emit('retry')">
+        {{ t('episodeTranscode.retryLoad') }}
+      </el-button>
+    </template>
+  </el-alert>
+  <div v-loading="view.loading">
+    <template v-if="frameView === 'frames'">
+      <div v-if="frames.length" class="episode-transcode-frames__grid">
+        <button
+          v-for="frame in frames"
+          :key="frame.frameIndex"
+          class="episode-transcode-frames__card"
+          type="button"
+          :aria-label="t('episodeTranscode.previewFrame', { time: formatTimeMs(frame.timeMs) })"
+          @click="openFramePreview(frame)"
+        >
+          <span class="episode-transcode-frames__image" :style="frameCardStyle(frame)"></span>
+          <span>{{ formatTimeMs(frame.timeMs) }}</span>
+        </button>
+      </div>
+      <el-empty v-else :description="t('episodeTranscode.noFrames')" :image-size="58" />
+      <el-pagination
+        v-if="framesTotal"
+        class="episode-transcode-frames__pagination"
+        background
+        layout="sizes, prev, pager, next"
+        :current-page="view.pageIndex"
+        :page-size="view.pageSize"
+        :page-sizes="THUMBNAIL_PAGE_SIZES"
+        :total="framesTotal"
+        @current-change="emit('pageChange', $event)"
+        @size-change="emit('pageSizeChange', $event)"
+      />
+    </template>
+    <div v-else-if="spriteUrls.length && sprite" class="episode-transcode-frames__sprites">
+      <figure
+        v-for="(url, index) in spriteUrls"
+        :key="url"
+        class="episode-transcode-frames__sprite"
+      >
+        <div
+          class="episode-transcode-frames__sprite-frame"
+          :style="{
+            aspectRatio: `${sprite.columns * sprite.thumbWidth} / ${
+              sprite.rows * sprite.thumbHeight
+            }`
+          }"
+        >
+          <el-image
+            :src="url"
+            :preview-src-list="spriteUrls"
+            :initial-index="index"
+            fit="contain"
+            preview-teleported
+            hide-on-click-modal
+          />
+          <span
+            class="episode-transcode-frames__sprite-grid"
+            :style="{
+              backgroundSize: `calc(100% / ${sprite.columns}) calc(100% / ${sprite.rows})`
+            }"
+          ></span>
+        </div>
+        <figcaption>
+          <b>{{ t('episodeTranscode.spriteSheet', { index: index + 1 }) }}</b>
+          <span>{{
+            t('episodeTranscode.spriteSheetFrames', { count: spriteFrameCount(index) })
+          }}</span>
+        </figcaption>
+      </figure>
+    </div>
+    <el-empty v-else :description="t('episodeTranscode.noSprites')" :image-size="58" />
+  </div>
+
+  <el-dialog
+    v-model="previewVisible"
+    :title="t('episodeTranscode.zoomTitle')"
+    width="min(92vw, 600px)"
+    append-to-body
+    destroy-on-close
+  >
+    <div class="episode-transcode-frames__preview-shell">
+      <div class="episode-transcode-frames__preview-image" :style="previewStyle"></div>
+    </div>
+  </el-dialog>
+</template>
+
+<style scoped>
+.episode-transcode-frames__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 18px 0 10px;
+}
+
+.episode-transcode-frames__heading h4 {
+  margin: 0;
+  font-size: 13px;
+}
+
+.episode-transcode-frames__tools {
+  display: flex;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  align-items: center;
+  gap: 12px;
+}
+
+.episode-transcode-frames__grid {
+  display: grid;
+  justify-content: center;
+  gap: 10px;
+  grid-template-columns: repeat(4, 128px);
+}
+
+.episode-transcode-frames__card {
+  display: flex;
+  min-width: 0;
+  padding: 0;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  cursor: zoom-in;
+  background: transparent;
+  border: 0;
+  flex-direction: column;
+  gap: 5px;
+}
+
+.episode-transcode-frames__image {
+  display: block;
+  overflow: hidden;
+  background-color: var(--el-fill-color-dark);
+  background-repeat: no-repeat;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 7px;
+}
+
+.episode-transcode-frames__card:hover .episode-transcode-frames__image {
+  border-color: var(--el-color-primary);
+}
+
+.episode-transcode-frames__pagination {
+  margin-top: 14px;
+  justify-content: flex-end;
+}
+
+.episode-transcode-frames__sprites {
+  display: grid;
+  gap: 16px;
+  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+}
+
+.episode-transcode-frames__sprite {
+  min-width: 0;
+  margin: 0;
+}
+
+.episode-transcode-frames__sprite-frame {
+  position: relative;
+  overflow: hidden;
+  background: var(--el-fill-color-dark);
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+}
+
+.episode-transcode-frames__sprite-frame :deep(.el-image) {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+
+.episode-transcode-frames__sprite-grid {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image:
+    linear-gradient(to right, rgb(255 255 255 / 34%) 1px, transparent 1px),
+    linear-gradient(to bottom, rgb(255 255 255 / 34%) 1px, transparent 1px);
+  background-repeat: repeat;
+}
+
+.episode-transcode-frames__sprite figcaption {
+  display: flex;
+  padding-top: 6px;
+  font-size: 11px;
+  color: var(--el-text-color-secondary);
+  justify-content: space-between;
+  gap: 8px;
+}
+
+.episode-transcode-frames__preview-shell {
+  display: flex;
+  min-height: 240px;
+  background: var(--el-fill-color-dark);
+  border-radius: 8px;
+  align-items: center;
+  justify-content: center;
+}
+
+.episode-transcode-frames__preview-image {
+  background-repeat: no-repeat;
+  border: 1px solid var(--el-border-color-lighter);
+  border-radius: 8px;
+}
+
+@media (width <= 600px) {
+  .episode-transcode-frames__grid {
+    grid-template-columns: repeat(2, 128px);
+  }
+}
+</style>

src/views/contentManagement/upload/EpisodeTranscodePanel.vue

@@ -0,0 +1,266 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码面板：数据获取、轮询与子组件组合 -->
+
+<script setup lang="ts">
+import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { ElMessage } from 'element-plus'
+import {
+  getEpisodeTranscodeApi,
+  getMediaThumbnailsApi,
+  triggerMediaTranscodeApi
+} from '@/api/admin/transcode'
+import type { EpisodeTranscodeItem, MediaThumbnailResult } from '@/api/admin/types'
+import { useI18n } from '@/hooks/web/useI18n'
+import EpisodeTranscodeFrames from './EpisodeTranscodeFrames.vue'
+import EpisodeTranscodeRenditions from './EpisodeTranscodeRenditions.vue'
+import EpisodeTranscodeStatusBadge from './EpisodeTranscodeStatusBadge.vue'
+import EpisodeTranscodeStatusPanel from './EpisodeTranscodeStatusPanel.vue'
+import {
+  safeTranscodeProgress,
+  THUMBNAIL_PAGE_SIZE,
+  transcodeProgressStatus,
+  transcodeStatusKey,
+  transcodeStatusType
+} from './episodeTranscodeUi'
+
+const props = defineProps<{
+  episodeId: string | number
+  active: boolean
+}>()
+
+const POLL_INTERVAL_MS = 4000
+
+const { t } = useI18n()
+const expanded = ref<string[]>(['transcode'])
+const detail = ref<EpisodeTranscodeItem | null>(null)
+const thumbnails = ref<MediaThumbnailResult | null>(null)
+const loading = ref(false)
+const thumbnailLoading = ref(false)
+const retriggering = ref(false)
+const errorMessage = ref('')
+const thumbnailError = ref('')
+const pageIndex = ref(1)
+const pageSize = ref(THUMBNAIL_PAGE_SIZE)
+let pollTimer: ReturnType<typeof setTimeout> | null = null
+let requestSeq = 0
+let thumbnailSeq = 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(
+  () => normalizedStatus.value === 'QUEUED' || normalizedStatus.value === 'RUNNING'
+)
+const statusLabel = computed(() =>
+  t(`episodeTranscode.status.${transcodeStatusKey(detail.value?.status)}`)
+)
+const statusType = computed(() => transcodeStatusType(detail.value?.status))
+const progressStatus = computed(() => transcodeProgressStatus(detail.value?.status))
+const progress = computed(() => safeTranscodeProgress(detail.value?.progress))
+const showOutputs = computed(() => !!detail.value && hasMedia.value && !errorMessage.value)
+const statusView = computed(() => ({
+  loading: loading.value,
+  errorMessage: errorMessage.value,
+  hasMedia: hasMedia.value,
+  retriggering: retriggering.value,
+  isProcessing: isProcessing.value,
+  statusLabel: statusLabel.value,
+  statusType: statusType.value,
+  progressStatus: progressStatus.value,
+  progress: progress.value
+}))
+const framesView = computed(() => ({
+  data: thumbnails.value,
+  loading: thumbnailLoading.value,
+  errorMessage: thumbnailError.value,
+  pageIndex: pageIndex.value,
+  pageSize: pageSize.value
+}))
+
+watch(
+  [() => props.episodeId, () => props.active],
+  ([episodeId, active], [previousEpisodeId]) => {
+    if (episodeId !== previousEpisodeId) resetState()
+    if (!active) {
+      stopPolling()
+      return
+    }
+    if (episodeId) void loadDetail()
+  },
+  { immediate: true }
+)
+
+onBeforeUnmount(stopPolling)
+
+function resetState() {
+  stopPolling()
+  requestSeq += 1
+  thumbnailSeq += 1
+  detail.value = null
+  thumbnails.value = null
+  errorMessage.value = ''
+  thumbnailError.value = ''
+  pageIndex.value = 1
+  pageSize.value = THUMBNAIL_PAGE_SIZE
+}
+
+function stopPolling() {
+  if (pollTimer) clearTimeout(pollTimer)
+  pollTimer = null
+}
+
+function schedulePolling() {
+  stopPolling()
+  if (!props.active || !isProcessing.value) return
+  pollTimer = setTimeout(() => {
+    pollTimer = null
+    void loadDetail(true)
+  }, POLL_INTERVAL_MS)
+}
+
+async function loadDetail(silent = false) {
+  if (!props.active || !props.episodeId) return
+  const seq = ++requestSeq
+  stopPolling()
+  if (!silent) loading.value = true
+  errorMessage.value = ''
+  try {
+    const response = await getEpisodeTranscodeApi(props.episodeId)
+    if (seq !== requestSeq) return
+    const result = response.data
+    detail.value = result
+    if (result.thumbnails) {
+      thumbnails.value = result.thumbnails
+      pageIndex.value = result.thumbnails.pageIndex || 1
+      pageSize.value = result.thumbnails.pageSize || THUMBNAIL_PAGE_SIZE
+      thumbnailError.value = ''
+    }
+    if (isProcessing.value) schedulePolling()
+  } catch (error) {
+    if (seq !== requestSeq) return
+    errorMessage.value = errorText(error, t('episodeTranscode.loadFailed'))
+    stopPolling()
+  } finally {
+    if (seq === requestSeq) loading.value = false
+  }
+}
+
+async function loadThumbnailPage() {
+  if (!hasMedia.value || thumbnailLoading.value) return
+  const seq = ++thumbnailSeq
+  thumbnailLoading.value = true
+  thumbnailError.value = ''
+  try {
+    const response = await getMediaThumbnailsApi(
+      mediaAssetId.value,
+      pageIndex.value,
+      pageSize.value
+    )
+    if (seq !== thumbnailSeq) return
+    const result = response.data
+    thumbnails.value = result
+    pageIndex.value = result.pageIndex || pageIndex.value
+    pageSize.value = result.pageSize || pageSize.value
+  } catch (error) {
+    if (seq !== thumbnailSeq) return
+    thumbnailError.value = errorText(error, t('episodeTranscode.loadFailed'))
+  } finally {
+    if (seq === thumbnailSeq) thumbnailLoading.value = false
+  }
+}
+
+async function retrigger() {
+  if (!hasMedia.value || isProcessing.value || retriggering.value) return
+  retriggering.value = true
+  errorMessage.value = ''
+  try {
+    await triggerMediaTranscodeApi(mediaAssetId.value)
+    if (detail.value) {
+      detail.value = { ...detail.value, status: 'QUEUED', progress: 0, errorMsg: '' }
+    }
+    ElMessage.success(t('episodeTranscode.triggerSuccess'))
+    await loadDetail(true)
+    schedulePolling()
+  } catch (error) {
+    errorMessage.value = errorText(error, t('episodeTranscode.triggerFailed'))
+  } finally {
+    retriggering.value = false
+  }
+}
+
+function changePage(value: number) {
+  pageIndex.value = value
+  void loadThumbnailPage()
+}
+
+function changePageSize(value: number) {
+  pageSize.value = value
+  pageIndex.value = 1
+  void loadThumbnailPage()
+}
+
+function errorText(error: unknown, fallback: string) {
+  return error instanceof Error && error.message ? error.message : fallback
+}
+</script>
+
+<template>
+  <section class="episode-editor-section episode-transcode-panel">
+    <el-collapse v-model="expanded">
+      <el-collapse-item name="transcode">
+        <template #title>
+          <div class="episode-transcode-panel__heading">
+            <span>{{ t('episodeTranscode.title') }}</span>
+            <EpisodeTranscodeStatusBadge
+              :visible="!!detail"
+              :status-label="statusLabel"
+              :status-type="statusType"
+              :progress="progress"
+              :progress-status="progressStatus"
+              :show-progress="!!detail && hasMedia"
+            />
+          </div>
+        </template>
+
+        <EpisodeTranscodeStatusPanel
+          :detail="detail"
+          :view="statusView"
+          @retry="loadDetail()"
+          @retrigger="retrigger"
+        />
+        <template v-if="showOutputs">
+          <EpisodeTranscodeRenditions :renditions="renditions" />
+          <EpisodeTranscodeFrames
+            :view="framesView"
+            @page-change="changePage"
+            @page-size-change="changePageSize"
+            @retry="loadThumbnailPage"
+          />
+        </template>
+      </el-collapse-item>
+    </el-collapse>
+  </section>
+</template>
+
+<style scoped>
+.episode-transcode-panel :deep(.el-collapse) {
+  border: 0;
+}
+
+.episode-transcode-panel :deep(.el-collapse-item__header),
+.episode-transcode-panel :deep(.el-collapse-item__wrap) {
+  background: transparent;
+}
+
+.episode-transcode-panel__heading {
+  display: flex;
+  width: 100%;
+  padding-right: 12px;
+  font-size: 15px;
+  font-weight: 650;
+  color: var(--el-text-color-primary);
+  align-items: center;
+  gap: 10px;
+}
+</style>

src/views/contentManagement/upload/EpisodeTranscodeRenditions.vue

@@ -0,0 +1,106 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码清晰度表格与播放地址操作 -->
+
+<script setup lang="ts">
+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,
+  renditionStatusLabelKey,
+  renditionStatusType
+} from './episodeTranscodeUi'
+
+defineProps<{
+  renditions: MediaRenditionItem[]
+}>()
+
+const { t } = useI18n()
+
+const playerVisible = ref(false)
+const playerUrl = ref('')
+const playerTitle = ref('')
+
+function statusLabel(rendition: MediaRenditionItem) {
+  return t(`episodeTranscode.status.${renditionStatusLabelKey(rendition.status)}`)
+}
+
+function playRendition(rendition: MediaRenditionItem) {
+  if (!rendition.hlsUrl) return
+  playerUrl.value = rendition.hlsUrl
+  playerTitle.value = `${rendition.qualityName} · ${rendition.resolution}`
+  playerVisible.value = true
+}
+</script>
+
+<template>
+  <div class="episode-transcode-renditions__heading">
+    <h4>{{ t('episodeTranscode.renditionTitle') }}</h4>
+  </div>
+  <el-table
+    :data="renditions"
+    size="small"
+    border
+    class="episode-transcode-renditions__table"
+    :empty-text="t('episodeTranscode.noRendition')"
+  >
+    <el-table-column prop="qualityName" :label="t('episodeTranscode.quality')" min-width="88" />
+    <el-table-column prop="resolution" :label="t('episodeTranscode.resolution')" min-width="105" />
+    <el-table-column :label="t('episodeTranscode.videoBitrate')" min-width="105">
+      <template #default="{ row }">{{ row.videoBitrateKbps }} kbps</template>
+    </el-table-column>
+    <el-table-column :label="t('episodeTranscode.audioBitrate')" min-width="105">
+      <template #default="{ row }">{{ row.audioBitrateKbps }} kbps</template>
+    </el-table-column>
+    <el-table-column prop="videoCodec" :label="t('episodeTranscode.codec')" min-width="82" />
+    <el-table-column prop="container" :label="t('episodeTranscode.container')" min-width="82" />
+    <el-table-column :label="t('episodeTranscode.fileSize')" min-width="92">
+      <template #default="{ row }">{{ formatBytes(row.sizeBytes) }}</template>
+    </el-table-column>
+    <el-table-column :label="t('episodeTranscode.duration')" min-width="76">
+      <template #default="{ row }">{{ formatDuration(row.durationSec) }}</template>
+    </el-table-column>
+    <el-table-column prop="segmentCount" :label="t('episodeTranscode.segments')" min-width="76" />
+    <el-table-column :label="t('episodeTranscode.statusColumn')" min-width="82">
+      <template #default="{ row }">
+        <el-tag :type="renditionStatusType(row.status)" effect="light" size="small">
+          {{ statusLabel(row) }}
+        </el-tag>
+      </template>
+    </el-table-column>
+    <el-table-column :label="t('episodeTranscode.actions')" width="76" fixed="right" align="center">
+      <template #default="{ row }">
+        <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>
+.episode-transcode-renditions__heading {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 12px;
+  margin: 18px 0 10px;
+}
+
+.episode-transcode-renditions__heading h4 {
+  margin: 0;
+  font-size: 13px;
+}
+
+.episode-transcode-renditions__table {
+  width: 100%;
+}
+</style>

src/views/contentManagement/upload/EpisodeTranscodeStatusBadge.vue

@@ -0,0 +1,45 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码折叠标题状态徽标 -->
+
+<script setup lang="ts">
+import type { TranscodeProgressStatus, TranscodeTagType } from './episodeTranscodeUi'
+
+defineProps<{
+  visible: boolean
+  statusLabel: string
+  statusType: TranscodeTagType
+  progress: number
+  progressStatus: TranscodeProgressStatus
+  showProgress: boolean
+}>()
+</script>
+
+<template>
+  <span class="episode-transcode-badge">
+    <el-tag v-if="visible" :type="statusType" effect="light" size="small">
+      {{ statusLabel }}
+    </el-tag>
+    <el-progress
+      v-if="showProgress"
+      class="episode-transcode-badge__progress"
+      :percentage="progress"
+      :status="progressStatus"
+      :stroke-width="6"
+      :show-text="false"
+    />
+  </span>
+</template>
+
+<style scoped>
+.episode-transcode-badge {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  gap: 10px;
+}
+
+.episode-transcode-badge__progress {
+  width: 110px;
+  margin-left: auto;
+}
+</style>

src/views/contentManagement/upload/EpisodeTranscodeStatusPanel.vue

@@ -0,0 +1,169 @@
+<!-- Author: fruit.com.cn -->
+<!-- 剧集转码状态、进度、错误与重新转码操作 -->
+
+<script setup lang="ts">
+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 {
+  loading: boolean
+  errorMessage: string
+  hasMedia: boolean
+  retriggering: boolean
+  isProcessing: boolean
+  statusLabel: string
+  statusType: TranscodeTagType
+  progressStatus: TranscodeProgressStatus
+  progress: number
+}
+
+defineProps<{
+  detail: EpisodeTranscodeItem | null
+  view: StatusView
+}>()
+
+const emit = defineEmits<{
+  retry: []
+  retrigger: []
+}>()
+
+const { t } = useI18n()
+</script>
+
+<template>
+  <p class="episode-transcode-status__description">
+    {{ t('episodeTranscode.description') }}
+  </p>
+  <el-skeleton v-if="view.loading && !detail" :rows="4" animated />
+  <div v-else-if="view.errorMessage" class="episode-transcode-status__error">
+    <el-alert type="error" :title="view.errorMessage" :closable="false" show-icon />
+    <el-button size="small" @click="emit('retry')">
+      <AppIcon :icon="AppIcons.refresh" :size="16" />
+      {{ t('episodeTranscode.retryLoad') }}
+    </el-button>
+  </div>
+  <el-empty
+    v-else-if="detail && !view.hasMedia"
+    :description="detail.errorMsg || t('episodeTranscode.noMedia')"
+    :image-size="72"
+  />
+  <template v-else-if="detail">
+    <div class="episode-transcode-status__summary">
+      <div class="episode-transcode-status__metric">
+        <span>{{ t('episodeTranscode.statusLabel') }}</span>
+        <el-tag :type="view.statusType" effect="light">{{ view.statusLabel }}</el-tag>
+      </div>
+      <div class="episode-transcode-status__metric">
+        <span>{{ t('episodeTranscode.progress') }}</span>
+        <b>{{ view.progress }}%</b>
+      </div>
+      <div class="episode-transcode-status__metric">
+        <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"
+        plain
+        :loading="view.retriggering"
+        :disabled="!view.hasMedia || view.isProcessing || view.retriggering"
+        @click="emit('retrigger')"
+      >
+        <AppIcon :icon="AppIcons.restart" :size="16" />
+        {{
+          view.retriggering ? t('episodeTranscode.reprocessing') : t('episodeTranscode.reprocess')
+        }}
+      </el-button>
+    </div>
+    <el-progress
+      class="episode-transcode-status__progress"
+      :percentage="view.progress"
+      :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"
+      type="error"
+      :title="detail.errorMsg"
+      :closable="false"
+      show-icon
+    />
+  </template>
+</template>
+
+<style scoped>
+.episode-transcode-status__description {
+  margin: 0 0 14px;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+}
+
+.episode-transcode-status__error {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  flex-direction: column;
+}
+
+.episode-transcode-status__summary {
+  display: flex;
+  align-items: center;
+  gap: 18px;
+  flex-wrap: wrap;
+}
+
+.episode-transcode-status__metric {
+  display: flex;
+  font-size: 12px;
+  color: var(--el-text-color-secondary);
+  align-items: center;
+  gap: 8px;
+}
+
+.episode-transcode-status__metric b {
+  font-size: 14px;
+  color: var(--el-text-color-primary);
+  font-variant-numeric: tabular-nums;
+}
+
+.episode-transcode-status__retry {
+  margin-left: auto;
+}
+
+.episode-transcode-status__progress {
+  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;
+}
+
+@media (width <= 600px) {
+  .episode-transcode-status__summary {
+    align-items: flex-start;
+  }
+
+  .episode-transcode-status__retry {
+    width: 100%;
+    margin-left: 0;
+  }
+}
+</style>

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

@@ -0,0 +1,137 @@
+<!-- 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
+  /** 自然排序后的展示序号（从 1 起） */
+  index: number
+  /** 选择阶段才允许移除 */
+  allowRemove: boolean
+}>()
+
+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')
+</script>
+
+<template>
+  <div class="upload-task-row" :class="{ 'is-failed': item.status === 'failed' }">
+    <div class="upload-task-row__meta">
+      <span class="upload-task-row__index">{{ index }}</span>
+      <b class="upload-task-row__name" :title="item.fileName">{{ item.fileName }}</b>
+      <small>{{ sizeLabel }}</small>
+      <el-tag :type="statusType" effect="light" size="small">{{ statusLabel }}</el-tag>
+    </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="allowRemove"
+        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__index {
+  flex: 0 0 auto;
+  min-width: 1.5em;
+  color: var(--el-text-color-secondary);
+  font-size: 13px;
+  font-variant-numeric: tabular-nums;
+}
+
+.upload-task-row__name {
+  flex: 1;
+  overflow: hidden;
+  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;
+  justify-content: flex-end;
+  margin-left: auto;
+}
+
+.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/episodeTranscodeUi.ts

@@ -0,0 +1,93 @@
+// Author: fruit.com.cn
+// 剧集转码面板的状态映射与展示格式化
+
+export type TranscodeTagType = 'primary' | 'success' | 'warning' | 'danger' | 'info'
+export type TranscodeProgressStatus = 'success' | 'exception' | undefined
+
+export const THUMBNAIL_PAGE_SIZE = 100
+export const THUMBNAIL_PAGE_SIZES = [100, 200, 500]
+
+const STATUS_KEYS: Record<string, string> = {
+  QUEUED: 'queued',
+  RUNNING: 'running',
+  SUCCESS: 'success',
+  FAILED: 'failed',
+  EMPTY: 'empty',
+  NO_VIDEO: 'noVideo',
+  NO_MEDIA_ASSET: 'noMediaAsset',
+  NO_TASK: 'noTask',
+  NO_EPISODE: 'noEpisode',
+  EPISODE_NOT_FOUND: 'episodeNotFound',
+  INVALID: 'invalid',
+  READY: 'ready'
+}
+const BYTES_PER_KB = 1024
+const BYTES_PER_MB = BYTES_PER_KB * 1024
+const BYTES_PER_GB = BYTES_PER_MB * 1024
+const SECONDS_PER_MINUTE = 60
+const MILLIS_PER_SECOND = 1000
+
+export function transcodeStatusKey(status?: string): string {
+  return STATUS_KEYS[String(status || '').toUpperCase()] || 'unknown'
+}
+
+export function transcodeStatusType(status?: string): TranscodeTagType {
+  switch (String(status || '').toUpperCase()) {
+    case 'SUCCESS':
+      return 'success'
+    case 'RUNNING':
+      return 'warning'
+    case 'FAILED':
+      return 'danger'
+    case 'QUEUED':
+      return 'primary'
+    default:
+      return 'info'
+  }
+}
+
+export function transcodeProgressStatus(status?: string): TranscodeProgressStatus {
+  const normalized = String(status || '').toUpperCase()
+  if (normalized === 'SUCCESS') return 'success'
+  if (normalized === 'FAILED') return 'exception'
+  return undefined
+}
+
+export function safeTranscodeProgress(value?: number): number {
+  return Math.min(100, Math.max(0, Number(value || 0)))
+}
+
+export function renditionStatusLabelKey(status?: string): string {
+  return transcodeStatusKey(status)
+}
+
+export function renditionStatusType(status?: string): TranscodeTagType {
+  const normalized = String(status || '').toUpperCase()
+  if (normalized === 'READY') return 'success'
+  if (normalized === 'FAILED') return 'danger'
+  return 'info'
+}
+
+export function formatBytes(value?: number): string {
+  const size = Number(value || 0)
+  if (size >= BYTES_PER_GB) return `${(size / BYTES_PER_GB).toFixed(2)} GB`
+  if (size >= BYTES_PER_MB) return `${(size / BYTES_PER_MB).toFixed(1)} MB`
+  if (size >= BYTES_PER_KB) return `${Math.round(size / BYTES_PER_KB)} KB`
+  return `${size} B`
+}
+
+export function formatDuration(seconds?: number): string {
+  const total = Math.max(0, Number(seconds || 0))
+  const minutes = Math.floor(total / SECONDS_PER_MINUTE)
+  const remainder = total % SECONDS_PER_MINUTE
+  return `${String(minutes).padStart(2, '0')}:${String(remainder).padStart(2, '0')}`
+}
+
+export function formatTimeMs(milliseconds?: number): string {
+  const totalMs = Math.max(0, Number(milliseconds || 0))
+  const totalSeconds = Math.floor(totalMs / MILLIS_PER_SECOND)
+  const minutes = Math.floor(totalSeconds / SECONDS_PER_MINUTE)
+  const seconds = totalSeconds % SECONDS_PER_MINUTE
+  const tenths = Math.floor((totalMs % MILLIS_PER_SECOND) / 100)
+  return `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}.${tenths}`
+}

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
+  )
+}