chore(merge): 将 develop 同步到 release/v1.0.0
This commit is contained in:
Zhou Weidong committed
commit
430ba59613
60 files changed
+6769
-426
No files matched your search
+6
-3
@@ -7,6 +7,9 @@ dist-ssr
|
||||
*-lock.*
|
||||
pnpm-debug
|
||||
stats.html
|
||||
dev.out.log
|
||||
dev.err.log
|
||||
start-dev.bat
|
||||
*.apk
|
||||
|
||||
# 本机运行时产物（start-dev.bat / vite 日志）
|
||||
start-dev.bat
|
||||
dev.out.log
|
||||
dev.err.log
|
||||
@@ -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"
|
||||
@@ -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`。
|
||||
@@ -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`。
|
||||
@@ -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`
|
||||
@@ -0,0 +1,12 @@
|
||||
# 转码面板实时进度与更新时间
|
||||
|
||||
## 目标
|
||||
|
||||
- 展示后端 task progress、状态文案与 updatedAt。
|
||||
- RUNNING/QUEUED 且 progress=0 时显示“处理中（等待进度上报）”。
|
||||
- FAILED 保持错误信息与重新转码入口。
|
||||
- 保持现有轮询停止、关闭清理与字符串 ID 逻辑。
|
||||
|
||||
## 验证
|
||||
|
||||
- `pnpm lint:eslint`、`pnpm build:dev`。
|
||||
@@ -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 为项目既有警告。
|
||||
+2
-1
@@ -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",
|
||||
@@ -38,6 +38,7 @@
|
||||
"echarts": "^5.4.3",
|
||||
"echarts-wordcloud": "^2.1.0",
|
||||
"element-plus": "2.5.5",
|
||||
"hls.js": "^1.7.3",
|
||||
"lodash-es": "^4.17.21",
|
||||
"mitt": "^3.0.1",
|
||||
"nprogress": "^0.2.0",
|
||||
|
||||
@@ -13,6 +13,20 @@ export interface AppUserPageParams {
|
||||
registerSource?: string
|
||||
}
|
||||
|
||||
export interface WatchHistoryPageParams {
|
||||
pageIndex?: number
|
||||
pageSize?: number
|
||||
keyword?: string
|
||||
userId?: number
|
||||
dramaTitle?: string
|
||||
dramaId?: number
|
||||
episodeId?: number
|
||||
source?: string
|
||||
finished?: boolean
|
||||
startTime?: string
|
||||
endTime?: string
|
||||
}
|
||||
|
||||
export const pageAppUsersApi = (params: AppUserPageParams) => {
|
||||
return request.get<PageResult<AppUserItem>>({ url: '/admin/app-users/page', params })
|
||||
}
|
||||
@@ -32,6 +46,13 @@ export const listAppUserWatchHistoryApi = (id: number, limit = 50) => {
|
||||
})
|
||||
}
|
||||
|
||||
export const pageWatchHistoryApi = (params: WatchHistoryPageParams) => {
|
||||
return request.get<PageResult<WatchHistoryItem>>({
|
||||
url: '/admin/watch-history/page',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/** normal / limited / banned，封禁与限制会立即吊销该用户全部会话 */
|
||||
export const updateAppUserStatusApi = (id: number, status: string, reason?: string) => {
|
||||
return request.put<void>({
|
||||
|
||||
@@ -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) => {
|
||||
|
||||
@@ -0,0 +1,85 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import request from '@/axios'
|
||||
import type { PageResult } from './types'
|
||||
|
||||
export interface DramaClassificationItem {
|
||||
id: number
|
||||
name: string
|
||||
sort: number
|
||||
status: number
|
||||
dramaCount: number
|
||||
updatedAt?: string
|
||||
}
|
||||
|
||||
export interface DramaClassificationSaveData {
|
||||
name: string
|
||||
sort?: number
|
||||
status?: number
|
||||
}
|
||||
|
||||
export interface ClassificationDramaItem {
|
||||
id: number
|
||||
title: string
|
||||
cover: string
|
||||
status: string
|
||||
totalEpisodes: number
|
||||
sort: number
|
||||
updatedAt: string
|
||||
}
|
||||
|
||||
export interface ClassificationDramaPageParams {
|
||||
keyword?: string
|
||||
pageIndex?: number
|
||||
pageSize?: number
|
||||
}
|
||||
|
||||
export const listClassificationsApi = () => {
|
||||
return request.get<DramaClassificationItem[]>({ url: '/admin/drama-classifications' })
|
||||
}
|
||||
|
||||
export const createClassificationApi = (data: DramaClassificationSaveData) => {
|
||||
return request.post<number>({ url: '/admin/drama-classifications', data })
|
||||
}
|
||||
|
||||
export const updateClassificationApi = (id: number, data: DramaClassificationSaveData) => {
|
||||
return request.put<void>({ url: `/admin/drama-classifications/${id}`, data })
|
||||
}
|
||||
|
||||
export const deleteClassificationApi = (id: number) => {
|
||||
return request.delete<void>({ url: `/admin/drama-classifications/${id}` })
|
||||
}
|
||||
|
||||
/** 分类下已关联的短剧 */
|
||||
export const listClassificationDramasApi = (id: number, params: ClassificationDramaPageParams) => {
|
||||
return request.get<PageResult<ClassificationDramaItem>>({
|
||||
url: `/admin/drama-classifications/${id}/dramas`,
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/** 尚未关联到该分类的短剧（添加弹窗用） */
|
||||
export const listClassificationDramaCandidatesApi = (
|
||||
id: number,
|
||||
params: ClassificationDramaPageParams
|
||||
) => {
|
||||
return request.get<PageResult<ClassificationDramaItem>>({
|
||||
url: `/admin/drama-classifications/${id}/dramas/candidates`,
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/** 批量关联短剧，返回实际新增数量 */
|
||||
export const bindClassificationDramasApi = (id: number, dramaIds: number[]) => {
|
||||
return request.post<number>({
|
||||
url: `/admin/drama-classifications/${id}/dramas`,
|
||||
data: { dramaIds }
|
||||
})
|
||||
}
|
||||
|
||||
/** 从分类移除短剧 */
|
||||
export const unbindClassificationDramaApi = (id: number, dramaId: number) => {
|
||||
return request.delete<void>({
|
||||
url: `/admin/drama-classifications/${id}/dramas/${dramaId}`
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,80 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import request from '@/axios'
|
||||
import type { PageResult } from './types'
|
||||
import type { ClassificationDramaItem } from './dramaClassification'
|
||||
|
||||
export interface DramaPlaylistCategoryItem {
|
||||
id: number
|
||||
name: string
|
||||
description: string
|
||||
sort: number
|
||||
status: number
|
||||
dramaCount: number
|
||||
}
|
||||
|
||||
export interface DramaPlaylistCategorySaveData {
|
||||
name: string
|
||||
description?: string
|
||||
sort?: number
|
||||
status?: number
|
||||
}
|
||||
|
||||
export interface PlaylistCategoryDramaPageParams {
|
||||
keyword?: string
|
||||
pageIndex?: number
|
||||
pageSize?: number
|
||||
}
|
||||
|
||||
export const listPlaylistCategoriesApi = () => {
|
||||
return request.get<DramaPlaylistCategoryItem[]>({ url: '/admin/drama-playlist-categories' })
|
||||
}
|
||||
|
||||
export const createPlaylistCategoryApi = (data: DramaPlaylistCategorySaveData) => {
|
||||
return request.post<number>({ url: '/admin/drama-playlist-categories', data })
|
||||
}
|
||||
|
||||
export const updatePlaylistCategoryApi = (id: number, data: DramaPlaylistCategorySaveData) => {
|
||||
return request.put<void>({ url: `/admin/drama-playlist-categories/${id}`, data })
|
||||
}
|
||||
|
||||
export const deletePlaylistCategoryApi = (id: number) => {
|
||||
return request.delete<void>({ url: `/admin/drama-playlist-categories/${id}` })
|
||||
}
|
||||
|
||||
/** 分类下已关联的短剧 */
|
||||
export const listPlaylistCategoryDramasApi = (
|
||||
id: number,
|
||||
params: PlaylistCategoryDramaPageParams
|
||||
) => {
|
||||
return request.get<PageResult<ClassificationDramaItem>>({
|
||||
url: `/admin/drama-playlist-categories/${id}/dramas`,
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/** 尚未关联到该分类的短剧（选择弹窗用） */
|
||||
export const listPlaylistCategoryDramaCandidatesApi = (
|
||||
id: number,
|
||||
params: PlaylistCategoryDramaPageParams
|
||||
) => {
|
||||
return request.get<PageResult<ClassificationDramaItem>>({
|
||||
url: `/admin/drama-playlist-categories/${id}/dramas/candidates`,
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
/** 批量关联短剧，返回实际新增数量 */
|
||||
export const bindPlaylistCategoryDramasApi = (id: number, dramaIds: number[]) => {
|
||||
return request.post<number>({
|
||||
url: `/admin/drama-playlist-categories/${id}/dramas`,
|
||||
data: { dramaIds }
|
||||
})
|
||||
}
|
||||
|
||||
/** 从分类移除短剧 */
|
||||
export const unbindPlaylistCategoryDramaApi = (id: number, dramaId: number) => {
|
||||
return request.delete<void>({
|
||||
url: `/admin/drama-playlist-categories/${id}/dramas/${dramaId}`
|
||||
})
|
||||
}
|
||||
@@ -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) => {
|
||||
|
||||
@@ -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 })
|
||||
}
|
||||
+18
-1
@@ -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
|
||||
})
|
||||
}
|
||||
@@ -0,0 +1,30 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import request from '@/axios'
|
||||
import type { EpisodeTranscodeItem, MediaThumbnailResult, 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`
|
||||
})
|
||||
}
|
||||
@@ -20,11 +20,15 @@ export interface DramaItem {
|
||||
title: string
|
||||
subtitle?: string
|
||||
categoryId?: number
|
||||
categoryIds?: number[]
|
||||
categoryNames?: string[]
|
||||
category?: string
|
||||
genre?: string
|
||||
description?: string
|
||||
cover?: string
|
||||
language?: string
|
||||
dramaType?: 'ANIME' | 'LIVE'
|
||||
dramaTypes?: Array<'ANIME' | 'LIVE'>
|
||||
episodes?: number
|
||||
freeEpisodes?: number
|
||||
unlockCoin?: number
|
||||
@@ -33,6 +37,9 @@ export interface DramaItem {
|
||||
status: string
|
||||
statusText: string
|
||||
views?: number
|
||||
favoriteCount?: number
|
||||
likeCount?: number
|
||||
commentCount?: number
|
||||
sort?: number
|
||||
publishAt?: string
|
||||
createdAt?: string
|
||||
@@ -43,12 +50,18 @@ export interface DramaSaveData {
|
||||
title: string
|
||||
subtitle?: string
|
||||
categoryId?: number
|
||||
categoryIds?: number[]
|
||||
genre?: string
|
||||
description?: string
|
||||
cover?: string
|
||||
language?: string
|
||||
dramaType?: 'ANIME' | 'LIVE'
|
||||
dramaTypes?: Array<'ANIME' | 'LIVE'>
|
||||
freeEpisodes?: number
|
||||
unlockCoin?: number
|
||||
favoriteCount?: number
|
||||
likeCount?: number
|
||||
heat?: number
|
||||
isHot?: boolean
|
||||
sort?: number
|
||||
}
|
||||
@@ -69,6 +82,10 @@ export interface EpisodeItem {
|
||||
status: string
|
||||
statusText: string
|
||||
views?: number
|
||||
likeCount?: number
|
||||
commentCount?: number
|
||||
favoriteCount?: number
|
||||
heat?: number
|
||||
sort?: number
|
||||
}
|
||||
|
||||
@@ -81,6 +98,7 @@ export interface EpisodeSaveData {
|
||||
videoUrl?: string
|
||||
isFree?: boolean
|
||||
unlockCoin?: number
|
||||
likeCount?: number
|
||||
status?: string
|
||||
sort?: number
|
||||
}
|
||||
@@ -204,6 +222,105 @@ 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 BannerItem {
|
||||
id: number
|
||||
imageUrl: string
|
||||
@@ -269,6 +386,10 @@ export interface AppUserItem {
|
||||
maskedTarget: string
|
||||
createdAt?: string
|
||||
lastLoginAt?: string
|
||||
/** ANDROID / IOS / WEB */
|
||||
platform?: string
|
||||
/** 系统版本，例如 Android 16 */
|
||||
osVersion?: string
|
||||
/** 预留：会员等级与到期（第二阶段） */
|
||||
vipLevel?: number
|
||||
vipExpireAt?: string
|
||||
@@ -294,16 +415,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 +438,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 +460,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 */
|
||||
|
||||
@@ -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,
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -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',
|
||||
|
||||
+165
-1
@@ -112,6 +112,7 @@ export default {
|
||||
login: 'Sign in',
|
||||
remember: 'Remember me',
|
||||
forgetPassword: 'Forget password',
|
||||
forgetPasswordHint: 'Please contact the administrator to reset your password',
|
||||
usernamePlaceholder: 'Please input username',
|
||||
passwordPlaceholder: 'Please input password'
|
||||
},
|
||||
@@ -162,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'
|
||||
@@ -526,5 +528,167 @@ 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',
|
||||
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'
|
||||
}
|
||||
}
|
||||
}
|
||||
+159
-1
@@ -112,6 +112,7 @@ export default {
|
||||
login: '登录',
|
||||
remember: '记住我',
|
||||
forgetPassword: '忘记密码',
|
||||
forgetPasswordHint: '请联系管理员重置密码',
|
||||
usernamePlaceholder: '请输入用户名',
|
||||
passwordPlaceholder: '请输入密码'
|
||||
},
|
||||
@@ -162,7 +163,8 @@ export default {
|
||||
treeTable: '树形表格',
|
||||
PicturePreview: '表格图片预览',
|
||||
department: '部门管理',
|
||||
menuManagement: '菜单管理'
|
||||
menuManagement: '菜单管理',
|
||||
transcodeSettings: '转码设置'
|
||||
},
|
||||
permission: {
|
||||
hasPermission: '请设置操作权限值'
|
||||
@@ -520,5 +522,161 @@ 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: '当前账号没有转码设置权限',
|
||||
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: '请修正标记的转码配置后再保存'
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -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[])
|
||||
|
||||
@@ -120,6 +120,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']
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
@@ -202,6 +211,14 @@ export const asyncRouterMap: AppRouteRecordRaw[] = [
|
||||
meta: {
|
||||
title: '操作日志'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'legal-documents',
|
||||
name: 'legal-documents',
|
||||
component: () => import('@/views/systemManagement/LegalDocumentView.vue'),
|
||||
meta: {
|
||||
title: '协议设置'
|
||||
}
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
@@ -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
|
||||
}
|
||||
@@ -147,6 +147,24 @@
|
||||
width: 180px !important;
|
||||
}
|
||||
|
||||
.readonly-stat {
|
||||
min-width: 180px;
|
||||
height: 32px;
|
||||
padding: 0 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
line-height: 32px;
|
||||
background: var(--el-fill-color-lighter);
|
||||
border: 1px solid var(--el-border-color-lighter);
|
||||
border-radius: var(--el-border-radius-base);
|
||||
}
|
||||
|
||||
.readonly-stat-hint {
|
||||
margin: 4px 0 0;
|
||||
color: var(--el-text-color-placeholder);
|
||||
font-size: 12px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
.cover-editor {
|
||||
display: flex;
|
||||
gap: 18px;
|
||||
|
||||
@@ -560,13 +560,16 @@ body {
|
||||
gap: 6px;
|
||||
}
|
||||
|
||||
.drama-select {
|
||||
.drama-select,
|
||||
.status-select {
|
||||
width: 100%;
|
||||
}
|
||||
.drama-select .el-input__wrapper {
|
||||
.drama-select .el-input__wrapper,
|
||||
.status-select .el-input__wrapper {
|
||||
box-shadow: 0 0 0 1px #efedf3 inset !important;
|
||||
}
|
||||
.drama-select .el-input__inner {
|
||||
.drama-select .el-input__inner,
|
||||
.status-select .el-input__inner {
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
import { reactive, ref, watch, onMounted, unref } from 'vue'
|
||||
import { Form, FormSchema } from '@/components/Form'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { ElCheckbox, ElLink } from 'element-plus'
|
||||
import { ElCheckbox, ElLink, ElMessage } from 'element-plus'
|
||||
import { useForm } from '@/hooks/web/useForm'
|
||||
import { loginApi, getAdminRoleApi } from '@/api/login'
|
||||
import { useAppStore } from '@/store/modules/app'
|
||||
@@ -92,7 +92,11 @@ const schema = reactive<FormSchema[]>([
|
||||
<>
|
||||
<div class="flex justify-between items-center w-[100%]">
|
||||
<ElCheckbox v-model={remember.value} label={t('login.remember')} size="small" />
|
||||
<ElLink type="primary" underline={false}>
|
||||
<ElLink
|
||||
type="primary"
|
||||
underline={false}
|
||||
onClick={() => ElMessage.info(t('login.forgetPasswordHint'))}
|
||||
>
|
||||
{t('login.forgetPassword')}
|
||||
</ElLink>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,594 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 分类管理：运营自定义分类（与「类型」是两个概念），并关联任意多部短剧 -->
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { AppIcon } from '@/components/AppIcon'
|
||||
import { AppIcons } from '@/constants/icons'
|
||||
import {
|
||||
bindClassificationDramasApi,
|
||||
createClassificationApi,
|
||||
deleteClassificationApi,
|
||||
listClassificationDramaCandidatesApi,
|
||||
listClassificationDramasApi,
|
||||
listClassificationsApi,
|
||||
unbindClassificationDramaApi,
|
||||
updateClassificationApi
|
||||
} from '@/api/admin/dramaClassification'
|
||||
import { statusClass } from '@/utils/status'
|
||||
import { useRbac } from '@/stores/rbac'
|
||||
import PageHeading from '@/views/components/PageHeading.vue'
|
||||
|
||||
const { can } = useRbac()
|
||||
|
||||
const STATUS_TEXT = {
|
||||
draft: '草稿',
|
||||
reviewing: '审核中',
|
||||
approved: '待发布',
|
||||
published: '已上线',
|
||||
offline: '已下线'
|
||||
}
|
||||
|
||||
const classifications = ref([])
|
||||
const activeId = ref(null)
|
||||
const activeClassification = computed(
|
||||
() => classifications.value.find((item) => item.id === activeId.value) || null
|
||||
)
|
||||
|
||||
const loading = ref(false)
|
||||
const dramas = ref([])
|
||||
const total = ref(0)
|
||||
const pageIndex = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const keyword = ref('')
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const saving = ref(false)
|
||||
const editingId = ref(null)
|
||||
const form = reactive({ name: '', sort: 1, status: 1 })
|
||||
|
||||
const candidateVisible = ref(false)
|
||||
const candidateLoading = ref(false)
|
||||
const candidates = ref([])
|
||||
const candidateTotal = ref(0)
|
||||
const candidatePage = ref(1)
|
||||
const candidatePageSize = ref(10)
|
||||
const candidateKeyword = ref('')
|
||||
const selectedDramas = ref([])
|
||||
const binding = ref(false)
|
||||
|
||||
async function loadClassifications() {
|
||||
const res = await listClassificationsApi()
|
||||
classifications.value = res.data || []
|
||||
if (activeId.value && !classifications.value.some((item) => item.id === activeId.value)) {
|
||||
activeId.value = classifications.value[0]?.id ?? null
|
||||
}
|
||||
if (!activeId.value) {
|
||||
activeId.value = classifications.value[0]?.id ?? null
|
||||
}
|
||||
await loadDramas()
|
||||
}
|
||||
|
||||
async function loadDramas() {
|
||||
if (!activeId.value) {
|
||||
dramas.value = []
|
||||
total.value = 0
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await listClassificationDramasApi(activeId.value, {
|
||||
keyword: keyword.value || undefined,
|
||||
pageIndex: pageIndex.value,
|
||||
pageSize: pageSize.value
|
||||
})
|
||||
dramas.value = res.data?.list || []
|
||||
total.value = res.data?.total || 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectClassification(row) {
|
||||
if (activeId.value === row.id) return
|
||||
activeId.value = row.id
|
||||
pageIndex.value = 1
|
||||
keyword.value = ''
|
||||
loadDramas()
|
||||
}
|
||||
|
||||
function search() {
|
||||
pageIndex.value = 1
|
||||
loadDramas()
|
||||
}
|
||||
|
||||
function changePage(value) {
|
||||
pageIndex.value = value
|
||||
loadDramas()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editingId.value = null
|
||||
const maxSort = classifications.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
|
||||
Object.assign(form, { name: '', sort: maxSort + 1, status: 1 })
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
editingId.value = row.id
|
||||
Object.assign(form, { name: row.name, sort: row.sort ?? 0, status: row.status ?? 1 })
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
async function saveClassification() {
|
||||
if (!form.name.trim()) {
|
||||
ElMessage.warning('请填写分类名称')
|
||||
return
|
||||
}
|
||||
saving.value = true
|
||||
try {
|
||||
const payload = { name: form.name.trim(), sort: form.sort, status: form.status }
|
||||
if (editingId.value) {
|
||||
await updateClassificationApi(editingId.value, payload)
|
||||
ElMessage.success('分类已更新')
|
||||
} else {
|
||||
const res = await createClassificationApi(payload)
|
||||
activeId.value = res.data
|
||||
pageIndex.value = 1
|
||||
ElMessage.success('分类已创建')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
await loadClassifications()
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDelete(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定删除分类「${row.name}」吗？关联关系会一起删除，短剧本身不受影响。`,
|
||||
'删除确认',
|
||||
{ confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning' }
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
await deleteClassificationApi(row.id)
|
||||
if (activeId.value === row.id) {
|
||||
activeId.value = null
|
||||
}
|
||||
ElMessage.success('分类已删除')
|
||||
await loadClassifications()
|
||||
}
|
||||
|
||||
async function removeDrama(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定把「${row.title}」从「${activeClassification.value?.name}」移出吗？`,
|
||||
'移除确认',
|
||||
{ confirmButtonText: '确认移出', cancelButtonText: '取消', type: 'warning' }
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
await unbindClassificationDramaApi(activeId.value, row.id)
|
||||
ElMessage.success('已移出')
|
||||
await Promise.all([loadDramas(), loadClassifications()])
|
||||
}
|
||||
|
||||
function openCandidates() {
|
||||
candidateVisible.value = true
|
||||
candidatePage.value = 1
|
||||
candidateKeyword.value = ''
|
||||
selectedDramas.value = []
|
||||
loadCandidates()
|
||||
}
|
||||
|
||||
async function loadCandidates() {
|
||||
if (!activeId.value) return
|
||||
candidateLoading.value = true
|
||||
try {
|
||||
const res = await listClassificationDramaCandidatesApi(activeId.value, {
|
||||
keyword: candidateKeyword.value || undefined,
|
||||
pageIndex: candidatePage.value,
|
||||
pageSize: candidatePageSize.value
|
||||
})
|
||||
candidates.value = res.data?.list || []
|
||||
candidateTotal.value = res.data?.total || 0
|
||||
} finally {
|
||||
candidateLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function candidateSearch() {
|
||||
candidatePage.value = 1
|
||||
loadCandidates()
|
||||
}
|
||||
|
||||
function changeCandidatePage(value) {
|
||||
candidatePage.value = value
|
||||
loadCandidates()
|
||||
}
|
||||
|
||||
function onSelectionChange(rows) {
|
||||
selectedDramas.value = rows
|
||||
}
|
||||
|
||||
async function confirmBind() {
|
||||
if (!selectedDramas.value.length) {
|
||||
ElMessage.warning('请先选择要关联的短剧')
|
||||
return
|
||||
}
|
||||
binding.value = true
|
||||
try {
|
||||
const res = await bindClassificationDramasApi(
|
||||
activeId.value,
|
||||
selectedDramas.value.map((item) => item.id)
|
||||
)
|
||||
ElMessage.success(`已关联 ${res.data ?? selectedDramas.value.length} 部短剧`)
|
||||
candidateVisible.value = false
|
||||
await Promise.all([loadDramas(), loadClassifications()])
|
||||
} finally {
|
||||
binding.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(value) {
|
||||
if (!value) return '—'
|
||||
return String(value).replace('T', ' ').slice(0, 19)
|
||||
}
|
||||
|
||||
onMounted(loadClassifications)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeading
|
||||
eyebrow="内容管理"
|
||||
title="分类管理"
|
||||
description="分类是运营自定义的分组，与「类型」无关；一个分类可以关联任意多部短剧。"
|
||||
>
|
||||
<el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate">
|
||||
<AppIcon :icon="AppIcons.add" />
|
||||
新建分类
|
||||
</el-button>
|
||||
</PageHeading>
|
||||
|
||||
<div class="classification-layout">
|
||||
<aside class="panel classification-layout__side">
|
||||
<div class="classification-layout__side-title">全部分类</div>
|
||||
<el-scrollbar height="560px">
|
||||
<ul class="classification-list">
|
||||
<li
|
||||
v-for="item in classifications"
|
||||
:key="item.id"
|
||||
class="classification-list__item"
|
||||
:class="{ 'is-active': item.id === activeId }"
|
||||
@click="selectClassification(item)"
|
||||
>
|
||||
<div class="classification-list__main">
|
||||
<span class="classification-list__name">{{ item.name }}</span>
|
||||
<span class="classification-list__count">{{ item.dramaCount || 0 }}</span>
|
||||
</div>
|
||||
<div class="classification-list__actions" @click.stop>
|
||||
<el-button
|
||||
v-if="can('drama:update')"
|
||||
text
|
||||
circle
|
||||
size="small"
|
||||
@click="openEdit(item)"
|
||||
>
|
||||
<AppIcon :icon="AppIcons.edit" :size="15" />
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="can('drama:delete')"
|
||||
text
|
||||
circle
|
||||
size="small"
|
||||
@click="confirmDelete(item)"
|
||||
>
|
||||
<AppIcon :icon="AppIcons.delete" :size="15" />
|
||||
</el-button>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="!classifications.length" class="classification-list__empty">
|
||||
还没有分类，点右上角「新建分类」开始
|
||||
</li>
|
||||
</ul>
|
||||
</el-scrollbar>
|
||||
</aside>
|
||||
|
||||
<section class="panel classification-layout__main">
|
||||
<div class="classification-toolbar">
|
||||
<div class="classification-toolbar__title">
|
||||
{{ activeClassification?.name || '请选择分类' }}
|
||||
<small>共 {{ total }} 部关联短剧</small>
|
||||
</div>
|
||||
<div class="classification-toolbar__search">
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
placeholder="搜索短剧名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@keyup.enter="search"
|
||||
@clear="search"
|
||||
/>
|
||||
<el-button type="primary" plain @click="search">查询</el-button>
|
||||
<el-button v-if="can('drama:update')" :disabled="!activeId" @click="openCandidates">
|
||||
<AppIcon :icon="AppIcons.add" />
|
||||
添加短剧
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="dramas"
|
||||
row-key="id"
|
||||
border
|
||||
class="drama-el-table"
|
||||
empty-text="该分类下还没有关联短剧"
|
||||
>
|
||||
<el-table-column label="封面" width="88">
|
||||
<template #default="{ row }">
|
||||
<img v-if="row.cover" :src="row.cover" class="classification-cover" alt="封面" />
|
||||
<div v-else class="classification-cover classification-cover--empty">无</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="短剧名称" min-width="200" />
|
||||
<el-table-column label="集数" width="90">
|
||||
<template #default="{ row }">{{ row.totalEpisodes || 0 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="110">
|
||||
<template #default="{ row }">
|
||||
<span class="status-dot" :class="statusClass(row.status)">
|
||||
{{ STATUS_TEXT[row.status] || row.status }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" width="90" />
|
||||
<el-table-column label="更新时间" width="180">
|
||||
<template #default="{ row }">{{ formatTime(row.updatedAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="110" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-if="can('drama:update')"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="removeDrama(row)"
|
||||
>移出</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="classification-pagination">
|
||||
<el-pagination
|
||||
:current-page="pageIndex"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, prev, pager, next"
|
||||
@current-change="changePage"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<el-dialog v-model="dialogVisible" :title="editingId ? '编辑分类' : '新建分类'" width="460px">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="分类名称" required>
|
||||
<el-input v-model="form.name" maxlength="20" placeholder="例如：本周必看" />
|
||||
</el-form-item>
|
||||
<div class="classification-form-row">
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="form.sort" :min="0" :max="999" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="saveClassification">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="candidateVisible" title="添加关联短剧" width="760px">
|
||||
<div class="classification-toolbar__search" style="margin-bottom: 12px">
|
||||
<el-input
|
||||
v-model="candidateKeyword"
|
||||
placeholder="搜索短剧名称"
|
||||
clearable
|
||||
style="width: 220px"
|
||||
@keyup.enter="candidateSearch"
|
||||
@clear="candidateSearch"
|
||||
/>
|
||||
<el-button type="primary" plain @click="candidateSearch">查询</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="candidateLoading"
|
||||
:data="candidates"
|
||||
row-key="id"
|
||||
border
|
||||
max-height="380"
|
||||
empty-text="没有可关联的短剧"
|
||||
@selection-change="onSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="48" />
|
||||
<el-table-column prop="title" label="短剧名称" min-width="220" />
|
||||
<el-table-column label="集数" width="90">
|
||||
<template #default="{ row }">{{ row.totalEpisodes || 0 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="110">
|
||||
<template #default="{ row }">
|
||||
<span class="status-dot" :class="statusClass(row.status)">
|
||||
{{ STATUS_TEXT[row.status] || row.status }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" width="90" />
|
||||
</el-table>
|
||||
<div class="classification-pagination">
|
||||
<el-pagination
|
||||
:current-page="candidatePage"
|
||||
:page-size="candidatePageSize"
|
||||
:total="candidateTotal"
|
||||
layout="total, prev, pager, next"
|
||||
@current-change="changeCandidatePage"
|
||||
/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="candidateVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="binding" @click="confirmBind">
|
||||
确定关联{{ selectedDramas.length ? `（${selectedDramas.length}）` : '' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.classification-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 260px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.classification-layout__side {
|
||||
padding: 12px 0 8px;
|
||||
}
|
||||
|
||||
.classification-layout__side-title {
|
||||
padding: 0 16px 10px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.classification-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.classification-list__item {
|
||||
display: flex;
|
||||
padding: 8px 12px 8px 16px;
|
||||
color: var(--el-text-color-regular);
|
||||
cursor: pointer;
|
||||
border-left: 3px solid transparent;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.classification-list__item:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.classification-list__item.is-active {
|
||||
font-weight: 600;
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
border-left-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.classification-list__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.classification-list__name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.classification-list__count {
|
||||
min-width: 24px;
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: var(--el-text-color-secondary);
|
||||
text-align: center;
|
||||
background: var(--el-fill-color);
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.classification-list__actions {
|
||||
display: none;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.classification-list__item:hover .classification-list__actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.classification-list__empty {
|
||||
padding: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.classification-layout__main {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.classification-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.classification-toolbar__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.classification-toolbar__title small {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.classification-toolbar__search {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.classification-cover {
|
||||
width: 48px;
|
||||
height: 64px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.classification-cover--empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.classification-pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.classification-form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -29,7 +29,8 @@ const categories = ref([])
|
||||
|
||||
const keyword = ref('')
|
||||
const statusFilter = ref(undefined)
|
||||
const categoryId = ref(undefined)
|
||||
const categoryIds = ref([])
|
||||
const dramaTypes = ref([])
|
||||
const hotFilter = ref(undefined)
|
||||
const pageIndex = ref(1)
|
||||
const pageSize = ref(10)
|
||||
@@ -41,14 +42,20 @@ const coverPercent = ref(0)
|
||||
const coverError = ref('')
|
||||
const coverFileName = ref('')
|
||||
const editingId = ref(null)
|
||||
const editingCommentCount = ref(0)
|
||||
const editingLikeCount = ref(0)
|
||||
const formRef = ref()
|
||||
const form = reactive({
|
||||
title: '',
|
||||
categoryId: undefined,
|
||||
categoryIds: [],
|
||||
dramaTypes: ['LIVE'],
|
||||
description: '',
|
||||
freeEpisodes: 3,
|
||||
unlockCoin: 0,
|
||||
favoriteCount: 0,
|
||||
heat: 0,
|
||||
isHot: false,
|
||||
sort: 0,
|
||||
cover: ''
|
||||
})
|
||||
|
||||
@@ -57,7 +64,12 @@ const COVER_TYPES = ['image/jpeg', 'image/png', 'image/webp']
|
||||
|
||||
const formRules = {
|
||||
title: [{ required: true, message: '请输入短剧名称', trigger: 'blur' }],
|
||||
categoryId: [{ required: true, message: '请选择短剧类型', trigger: 'change' }]
|
||||
categoryIds: [
|
||||
{ type: 'array', required: true, min: 1, message: '请至少选择一个类型', trigger: 'change' }
|
||||
],
|
||||
dramaTypes: [
|
||||
{ type: 'array', required: true, min: 1, message: '请至少选择一个内容类型', trigger: 'change' }
|
||||
]
|
||||
}
|
||||
|
||||
const coverDisplayName = computed(
|
||||
@@ -78,6 +90,11 @@ const statusOptions = [
|
||||
{ code: 'offline', text: '已下线' }
|
||||
]
|
||||
|
||||
const dramaTypeOptions = [
|
||||
{ value: 'ANIME', label: '漫剧' },
|
||||
{ value: 'LIVE', label: '真人剧' }
|
||||
]
|
||||
|
||||
const actionMeta = {
|
||||
submit: { label: '提交审核', done: '已提交审核' },
|
||||
approve: { label: '审核通过', done: '已通过审核' },
|
||||
@@ -94,7 +111,8 @@ async function load() {
|
||||
pageSize: pageSize.value,
|
||||
keyword: keyword.value.trim() || undefined,
|
||||
status: statusFilter.value || undefined,
|
||||
categoryId: categoryId.value,
|
||||
categoryIds: categoryIds.value.length ? categoryIds.value : undefined,
|
||||
dramaTypes: dramaTypes.value.length ? dramaTypes.value : undefined,
|
||||
isHot: hotFilter.value
|
||||
})
|
||||
list.value = res.data?.list || []
|
||||
@@ -117,7 +135,8 @@ function search() {
|
||||
function resetFilters() {
|
||||
keyword.value = ''
|
||||
statusFilter.value = undefined
|
||||
categoryId.value = undefined
|
||||
categoryIds.value = []
|
||||
dramaTypes.value = []
|
||||
hotFilter.value = undefined
|
||||
search()
|
||||
}
|
||||
@@ -142,15 +161,21 @@ function openCreate() {
|
||||
editingId.value = null
|
||||
Object.assign(form, {
|
||||
title: '',
|
||||
categoryId: undefined,
|
||||
categoryIds: [],
|
||||
dramaTypes: ['LIVE'],
|
||||
description: '',
|
||||
freeEpisodes: 3,
|
||||
unlockCoin: 0,
|
||||
favoriteCount: 0,
|
||||
heat: 0,
|
||||
isHot: false,
|
||||
sort: 0,
|
||||
cover: ''
|
||||
})
|
||||
coverFileName.value = ''
|
||||
coverError.value = ''
|
||||
editingCommentCount.value = 0
|
||||
editingLikeCount.value = 0
|
||||
dialogVisible.value = true
|
||||
resetValidation()
|
||||
}
|
||||
@@ -159,19 +184,55 @@ function openEdit(row) {
|
||||
editingId.value = row.id
|
||||
Object.assign(form, {
|
||||
title: row.title,
|
||||
categoryId: row.categoryId || undefined,
|
||||
categoryIds:
|
||||
Array.isArray(row.categoryIds) && row.categoryIds.length
|
||||
? row.categoryIds
|
||||
: row.categoryId
|
||||
? [row.categoryId]
|
||||
: [],
|
||||
dramaTypes:
|
||||
Array.isArray(row.dramaTypes) && row.dramaTypes.length
|
||||
? row.dramaTypes
|
||||
: row.dramaType
|
||||
? [row.dramaType]
|
||||
: ['LIVE'],
|
||||
description: row.description || '',
|
||||
freeEpisodes: row.freeEpisodes ?? 3,
|
||||
unlockCoin: row.unlockCoin ?? 0,
|
||||
favoriteCount: row.favoriteCount ?? 0,
|
||||
heat: row.views ?? 0,
|
||||
isHot: !!row.isHot,
|
||||
sort: row.sort ?? 0,
|
||||
cover: row.cover || ''
|
||||
})
|
||||
coverFileName.value = row.cover ? coverBasename(row.cover) : ''
|
||||
coverError.value = ''
|
||||
editingCommentCount.value = row.commentCount ?? 0
|
||||
editingLikeCount.value = row.likeCount ?? 0
|
||||
dialogVisible.value = true
|
||||
resetValidation()
|
||||
}
|
||||
|
||||
function dramaTypeLabel(value) {
|
||||
return dramaTypeOptions.find((item) => item.value === value)?.label || '真人剧'
|
||||
}
|
||||
|
||||
function rowCategoryList(row) {
|
||||
if (Array.isArray(row.categoryNames) && row.categoryNames.length) {
|
||||
return row.categoryNames.filter(Boolean)
|
||||
}
|
||||
if (!row.genre) return []
|
||||
return row.genre
|
||||
.split('/')
|
||||
.map((name) => name.trim())
|
||||
.filter(Boolean)
|
||||
}
|
||||
|
||||
function rowDramaTypes(row) {
|
||||
if (Array.isArray(row.dramaTypes) && row.dramaTypes.length) return row.dramaTypes
|
||||
return row.dramaType ? [row.dramaType] : []
|
||||
}
|
||||
|
||||
async function saveDrama() {
|
||||
if (saving.value || uploadingCover.value) return
|
||||
try {
|
||||
@@ -179,11 +240,13 @@ async function saveDrama() {
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
const category = categories.value.find((item) => item.id === form.categoryId)
|
||||
const categoryNames = form.categoryIds
|
||||
.map((id) => categories.value.find((item) => item.id === id)?.name)
|
||||
.filter(Boolean)
|
||||
const payload = {
|
||||
...form,
|
||||
title: form.title.trim(),
|
||||
genre: category?.name || ''
|
||||
genre: categoryNames.join(' / ')
|
||||
}
|
||||
saving.value = true
|
||||
try {
|
||||
@@ -338,12 +401,30 @@ onMounted(async () => {
|
||||
:key="item.code"
|
||||
:label="item.text"
|
||||
:value="item.code" /></el-select
|
||||
><el-select v-model="categoryId" clearable placeholder="全部类型" @change="search"
|
||||
><el-select
|
||||
v-model="categoryIds"
|
||||
class="drama-multi-select"
|
||||
multiple
|
||||
clearable
|
||||
placeholder="全部类型"
|
||||
@change="search"
|
||||
><el-option
|
||||
v-for="item in categories"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.id" /></el-select
|
||||
><el-select
|
||||
v-model="dramaTypes"
|
||||
class="drama-multi-select"
|
||||
multiple
|
||||
clearable
|
||||
placeholder="全部内容类型"
|
||||
@change="search"
|
||||
><el-option
|
||||
v-for="item in dramaTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value" /></el-select
|
||||
><el-select v-model="hotFilter" clearable placeholder="全部热度" @change="search"
|
||||
><el-option label="仅热门" :value="true" /><el-option
|
||||
label="非热门"
|
||||
@@ -382,13 +463,49 @@ onMounted(async () => {
|
||||
><span v-else class="table-empty-text">—</span></template
|
||||
></el-table-column
|
||||
>
|
||||
<el-table-column prop="genre" label="类型" width="110" />
|
||||
<el-table-column label="类型" min-width="200"
|
||||
><template #default="{ row }"
|
||||
><div class="tag-wrap"
|
||||
><el-tag v-for="name in rowCategoryList(row)" :key="name" type="info" effect="light">{{
|
||||
name
|
||||
}}</el-tag></div
|
||||
></template
|
||||
>
|
||||
</el-table-column>
|
||||
<el-table-column label="内容类型" min-width="180"
|
||||
><template #default="{ row }"
|
||||
><div class="tag-wrap"
|
||||
><el-tag
|
||||
v-for="type in rowDramaTypes(row)"
|
||||
:key="type"
|
||||
:type="type === 'ANIME' ? 'warning' : 'info'"
|
||||
effect="light"
|
||||
>{{ dramaTypeLabel(type) }}</el-tag
|
||||
></div
|
||||
></template
|
||||
></el-table-column
|
||||
>
|
||||
<el-table-column label="集数" width="90"
|
||||
><template #default="{ row }">{{ row.episodes }} 集</template></el-table-column
|
||||
>
|
||||
<el-table-column label="播放量" width="110"
|
||||
<el-table-column label="热度" width="110"
|
||||
><template #default="{ row }">{{ formatCount(row.views) }}</template></el-table-column
|
||||
>
|
||||
<el-table-column label="收藏" width="90"
|
||||
><template #default="{ row }">{{
|
||||
formatCount(row.favoriteCount ?? 0)
|
||||
}}</template></el-table-column
|
||||
>
|
||||
<el-table-column label="点赞" width="90"
|
||||
><template #default="{ row }">{{
|
||||
formatCount(row.likeCount ?? 0)
|
||||
}}</template></el-table-column
|
||||
>
|
||||
<el-table-column label="评论" width="90"
|
||||
><template #default="{ row }">{{
|
||||
formatCount(row.commentCount ?? 0)
|
||||
}}</template></el-table-column
|
||||
>
|
||||
<el-table-column label="状态" width="110"
|
||||
><template #default="{ row }"
|
||||
><el-tag :class="['status-badge', statusClass(row.status)]" effect="light">{{
|
||||
@@ -477,8 +594,14 @@ onMounted(async () => {
|
||||
<el-form-item label="短剧名称" prop="title">
|
||||
<el-input v-model="form.title" maxlength="80" placeholder="请输入短剧名称" />
|
||||
</el-form-item>
|
||||
<el-form-item label="类型" prop="categoryId">
|
||||
<el-select v-model="form.categoryId" placeholder="请选择类型">
|
||||
<el-form-item label="类型" prop="categoryIds">
|
||||
<el-select
|
||||
v-model="form.categoryIds"
|
||||
class="drama-multi-select"
|
||||
multiple
|
||||
filterable
|
||||
placeholder="请选择类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in categories"
|
||||
:key="item.id"
|
||||
@@ -487,13 +610,29 @@ onMounted(async () => {
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="内容类型" prop="dramaTypes">
|
||||
<el-select
|
||||
v-model="form.dramaTypes"
|
||||
class="drama-multi-select"
|
||||
multiple
|
||||
filterable
|
||||
placeholder="请选择内容类型"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in dramaTypeOptions"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="简介">
|
||||
<el-input
|
||||
v-model="form.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
maxlength="200"
|
||||
maxlength="1000"
|
||||
show-word-limit
|
||||
placeholder="简要介绍剧情"
|
||||
/>
|
||||
@@ -522,9 +661,54 @@ onMounted(async () => {
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<el-form-item label="是否热门">
|
||||
<el-switch v-model="form.isHot" />
|
||||
</el-form-item>
|
||||
<div class="editor-grid editor-grid--two">
|
||||
<el-form-item label="是否热门">
|
||||
<el-switch v-model="form.isHot" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排序权重">
|
||||
<el-input-number
|
||||
v-model="form.sort"
|
||||
class="editor-number"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
:max="99999"
|
||||
:precision="0"
|
||||
/>
|
||||
<p class="readonly-stat-hint">数值越大越靠前，相同权重按 ID 倒序</p>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="editor-section">
|
||||
<h3 class="editor-section-title">互动数据</h3>
|
||||
<div class="editor-grid editor-grid--two">
|
||||
<el-form-item label="收藏数">
|
||||
<el-input-number
|
||||
v-model="form.favoriteCount"
|
||||
class="editor-number"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="点赞数">
|
||||
<div class="readonly-stat">{{ formatCount(editingLikeCount) }}</div>
|
||||
<p class="readonly-stat-hint">全剧分集汇总，只读</p>
|
||||
</el-form-item>
|
||||
<el-form-item label="热度">
|
||||
<el-input-number
|
||||
v-model="form.heat"
|
||||
class="editor-number"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
:precision="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="评论数">
|
||||
<div class="readonly-stat">{{ formatCount(editingCommentCount) }}</div>
|
||||
<p class="readonly-stat-hint">全剧汇总，实时统计，只读</p>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="editor-section">
|
||||
@@ -609,3 +793,32 @@ onMounted(async () => {
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.drama-multi-select {
|
||||
min-width: 220px;
|
||||
}
|
||||
|
||||
.drama-multi-select :deep(.el-select__wrapper) {
|
||||
height: auto;
|
||||
min-height: 32px;
|
||||
padding-top: 3px;
|
||||
padding-bottom: 3px;
|
||||
}
|
||||
|
||||
.drama-multi-select :deep(.el-select__selection) {
|
||||
flex-wrap: wrap;
|
||||
row-gap: 4px;
|
||||
}
|
||||
|
||||
.drama-editor-form .drama-multi-select {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.tag-wrap {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,619 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 剧单管理：剧单使用自己的一套分类（与「分类管理」无关），分类下直接关联短剧 -->
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import { AppIcon } from '@/components/AppIcon'
|
||||
import { AppIcons } from '@/constants/icons'
|
||||
import {
|
||||
bindPlaylistCategoryDramasApi,
|
||||
createPlaylistCategoryApi,
|
||||
deletePlaylistCategoryApi,
|
||||
listPlaylistCategoriesApi,
|
||||
listPlaylistCategoryDramaCandidatesApi,
|
||||
listPlaylistCategoryDramasApi,
|
||||
unbindPlaylistCategoryDramaApi,
|
||||
updatePlaylistCategoryApi
|
||||
} from '@/api/admin/dramaPlaylistCategory'
|
||||
import { statusClass } from '@/utils/status'
|
||||
import { useRbac } from '@/stores/rbac'
|
||||
import PageHeading from '@/views/components/PageHeading.vue'
|
||||
|
||||
const { can } = useRbac()
|
||||
|
||||
const STATUS_TEXT = {
|
||||
draft: '草稿',
|
||||
reviewing: '审核中',
|
||||
approved: '待发布',
|
||||
published: '已上线',
|
||||
offline: '已下线'
|
||||
}
|
||||
|
||||
const categories = ref([])
|
||||
const activeId = ref(null)
|
||||
const activeCategory = computed(
|
||||
() => categories.value.find((item) => item.id === activeId.value) || null
|
||||
)
|
||||
|
||||
const loading = ref(false)
|
||||
const dramas = ref([])
|
||||
const total = ref(0)
|
||||
const pageIndex = ref(1)
|
||||
const pageSize = ref(10)
|
||||
const keyword = ref('')
|
||||
|
||||
const dialogVisible = ref(false)
|
||||
const saving = ref(false)
|
||||
const editingId = ref(null)
|
||||
const form = reactive({ name: '', description: '', sort: 1, status: 1 })
|
||||
|
||||
const candidateVisible = ref(false)
|
||||
const candidateLoading = ref(false)
|
||||
const candidates = ref([])
|
||||
const candidateTotal = ref(0)
|
||||
const candidatePage = ref(1)
|
||||
const candidatePageSize = ref(10)
|
||||
const candidateKeyword = ref('')
|
||||
const selectedDramas = ref([])
|
||||
const binding = ref(false)
|
||||
|
||||
async function loadCategories() {
|
||||
const res = await listPlaylistCategoriesApi()
|
||||
categories.value = res.data || []
|
||||
if (activeId.value && !categories.value.some((item) => item.id === activeId.value)) {
|
||||
activeId.value = categories.value[0]?.id ?? null
|
||||
}
|
||||
if (!activeId.value) {
|
||||
activeId.value = categories.value[0]?.id ?? null
|
||||
}
|
||||
await loadDramas()
|
||||
}
|
||||
|
||||
async function loadDramas() {
|
||||
if (!activeId.value) {
|
||||
dramas.value = []
|
||||
total.value = 0
|
||||
return
|
||||
}
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await listPlaylistCategoryDramasApi(activeId.value, {
|
||||
keyword: keyword.value || undefined,
|
||||
pageIndex: pageIndex.value,
|
||||
pageSize: pageSize.value
|
||||
})
|
||||
dramas.value = res.data?.list || []
|
||||
total.value = res.data?.total || 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function selectCategory(row) {
|
||||
if (activeId.value === row.id) return
|
||||
activeId.value = row.id
|
||||
pageIndex.value = 1
|
||||
keyword.value = ''
|
||||
loadDramas()
|
||||
}
|
||||
|
||||
function search() {
|
||||
pageIndex.value = 1
|
||||
loadDramas()
|
||||
}
|
||||
|
||||
function changePage(value) {
|
||||
pageIndex.value = value
|
||||
loadDramas()
|
||||
}
|
||||
|
||||
function openCreate() {
|
||||
editingId.value = null
|
||||
const maxSort = categories.value.reduce((max, item) => Math.max(max, item.sort || 0), 0)
|
||||
Object.assign(form, { name: '', description: '', sort: maxSort + 1, status: 1 })
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
function openEdit(row) {
|
||||
editingId.value = row.id
|
||||
Object.assign(form, {
|
||||
name: row.name,
|
||||
description: row.description || '',
|
||||
sort: row.sort ?? 0,
|
||||
status: row.status ?? 1
|
||||
})
|
||||
dialogVisible.value = true
|
||||
}
|
||||
|
||||
async function saveCategory() {
|
||||
if (!form.name.trim()) {
|
||||
ElMessage.warning('请填写剧单分类名称')
|
||||
return
|
||||
}
|
||||
saving.value = true
|
||||
try {
|
||||
const payload = {
|
||||
name: form.name.trim(),
|
||||
description: form.description.trim(),
|
||||
sort: form.sort,
|
||||
status: form.status
|
||||
}
|
||||
if (editingId.value) {
|
||||
await updatePlaylistCategoryApi(editingId.value, payload)
|
||||
ElMessage.success('剧单分类已更新')
|
||||
} else {
|
||||
const res = await createPlaylistCategoryApi(payload)
|
||||
activeId.value = res.data
|
||||
pageIndex.value = 1
|
||||
ElMessage.success('剧单分类已创建')
|
||||
}
|
||||
dialogVisible.value = false
|
||||
await loadCategories()
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function confirmDelete(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定删除剧单分类「${row.name}」吗？关联关系会一起删除，短剧本身不受影响。`,
|
||||
'删除确认',
|
||||
{ confirmButtonText: '确认删除', cancelButtonText: '取消', type: 'warning' }
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
await deletePlaylistCategoryApi(row.id)
|
||||
if (activeId.value === row.id) {
|
||||
activeId.value = null
|
||||
}
|
||||
ElMessage.success('剧单分类已删除')
|
||||
await loadCategories()
|
||||
}
|
||||
|
||||
async function removeDrama(row) {
|
||||
try {
|
||||
await ElMessageBox.confirm(
|
||||
`确定把「${row.title}」从「${activeCategory.value?.name}」移出吗？`,
|
||||
'移除确认',
|
||||
{ confirmButtonText: '确认移出', cancelButtonText: '取消', type: 'warning' }
|
||||
)
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
await unbindPlaylistCategoryDramaApi(activeId.value, row.id)
|
||||
ElMessage.success('已移出')
|
||||
await Promise.all([loadDramas(), loadCategories()])
|
||||
}
|
||||
|
||||
function openCandidates() {
|
||||
candidateVisible.value = true
|
||||
candidatePage.value = 1
|
||||
candidateKeyword.value = ''
|
||||
selectedDramas.value = []
|
||||
loadCandidates()
|
||||
}
|
||||
|
||||
async function loadCandidates() {
|
||||
if (!activeId.value) return
|
||||
candidateLoading.value = true
|
||||
try {
|
||||
const res = await listPlaylistCategoryDramaCandidatesApi(activeId.value, {
|
||||
keyword: candidateKeyword.value || undefined,
|
||||
pageIndex: candidatePage.value,
|
||||
pageSize: candidatePageSize.value
|
||||
})
|
||||
candidates.value = res.data?.list || []
|
||||
candidateTotal.value = res.data?.total || 0
|
||||
} finally {
|
||||
candidateLoading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function candidateSearch() {
|
||||
candidatePage.value = 1
|
||||
loadCandidates()
|
||||
}
|
||||
|
||||
function changeCandidatePage(value) {
|
||||
candidatePage.value = value
|
||||
loadCandidates()
|
||||
}
|
||||
|
||||
function onSelectionChange(rows) {
|
||||
selectedDramas.value = rows
|
||||
}
|
||||
|
||||
async function confirmBind() {
|
||||
if (!selectedDramas.value.length) {
|
||||
ElMessage.warning('请先选择要加入的短剧')
|
||||
return
|
||||
}
|
||||
binding.value = true
|
||||
try {
|
||||
const res = await bindPlaylistCategoryDramasApi(
|
||||
activeId.value,
|
||||
selectedDramas.value.map((item) => item.id)
|
||||
)
|
||||
ElMessage.success(`已加入 ${res.data ?? selectedDramas.value.length} 部短剧`)
|
||||
candidateVisible.value = false
|
||||
await Promise.all([loadDramas(), loadCategories()])
|
||||
} finally {
|
||||
binding.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function formatTime(value) {
|
||||
if (!value) return '—'
|
||||
return String(value).replace('T', ' ').slice(0, 19)
|
||||
}
|
||||
|
||||
onMounted(loadCategories)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeading
|
||||
eyebrow="内容管理"
|
||||
title="剧单管理"
|
||||
description="剧单使用自己的分类体系（与「分类管理」无关），每个分类下直接选择短剧。"
|
||||
>
|
||||
<el-button v-if="can('drama:create')" type="primary" class="primary-button" @click="openCreate">
|
||||
<AppIcon :icon="AppIcons.add" />
|
||||
新建分类
|
||||
</el-button>
|
||||
</PageHeading>
|
||||
|
||||
<div class="playlist-layout">
|
||||
<aside class="panel playlist-layout__side">
|
||||
<div class="playlist-layout__side-title">剧单分类</div>
|
||||
<el-scrollbar height="560px">
|
||||
<ul class="playlist-list">
|
||||
<li
|
||||
v-for="item in categories"
|
||||
:key="item.id"
|
||||
class="playlist-list__item"
|
||||
:class="{ 'is-active': item.id === activeId }"
|
||||
@click="selectCategory(item)"
|
||||
>
|
||||
<div class="playlist-list__main">
|
||||
<span class="playlist-list__name">{{ item.name }}</span>
|
||||
<span class="playlist-list__count">{{ item.dramaCount || 0 }}</span>
|
||||
</div>
|
||||
<div class="playlist-list__actions" @click.stop>
|
||||
<el-button
|
||||
v-if="can('drama:update')"
|
||||
text
|
||||
circle
|
||||
size="small"
|
||||
@click="openEdit(item)"
|
||||
>
|
||||
<AppIcon :icon="AppIcons.edit" :size="15" />
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="can('drama:delete')"
|
||||
text
|
||||
circle
|
||||
size="small"
|
||||
@click="confirmDelete(item)"
|
||||
>
|
||||
<AppIcon :icon="AppIcons.delete" :size="15" />
|
||||
</el-button>
|
||||
</div>
|
||||
</li>
|
||||
<li v-if="!categories.length" class="playlist-list__empty">
|
||||
还没有剧单分类，点右上角「新建分类」开始
|
||||
</li>
|
||||
</ul>
|
||||
</el-scrollbar>
|
||||
</aside>
|
||||
|
||||
<section class="panel playlist-layout__main">
|
||||
<div class="playlist-toolbar">
|
||||
<div class="playlist-toolbar__title">
|
||||
{{ activeCategory?.name || '请选择剧单分类' }}
|
||||
<small>共 {{ total }} 部短剧</small>
|
||||
<small v-if="activeCategory?.description">{{ activeCategory.description }}</small>
|
||||
</div>
|
||||
<div class="playlist-toolbar__search">
|
||||
<el-input
|
||||
v-model="keyword"
|
||||
placeholder="搜索短剧名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
@keyup.enter="search"
|
||||
@clear="search"
|
||||
/>
|
||||
<el-button type="primary" plain @click="search">查询</el-button>
|
||||
<el-button v-if="can('drama:update')" :disabled="!activeId" @click="openCandidates">
|
||||
<AppIcon :icon="AppIcons.add" />
|
||||
选择短剧
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="dramas"
|
||||
row-key="id"
|
||||
border
|
||||
class="drama-el-table"
|
||||
empty-text="该剧单分类下还没有短剧"
|
||||
>
|
||||
<el-table-column label="封面" width="88">
|
||||
<template #default="{ row }">
|
||||
<img v-if="row.cover" :src="row.cover" class="playlist-cover" alt="封面" />
|
||||
<div v-else class="playlist-cover playlist-cover--empty">无</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="title" label="短剧名称" min-width="200" />
|
||||
<el-table-column label="集数" width="90">
|
||||
<template #default="{ row }">{{ row.totalEpisodes || 0 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="110">
|
||||
<template #default="{ row }">
|
||||
<span class="status-dot" :class="statusClass(row.status)">
|
||||
{{ STATUS_TEXT[row.status] || row.status }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" width="90" />
|
||||
<el-table-column label="更新时间" width="180">
|
||||
<template #default="{ row }">{{ formatTime(row.updatedAt) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="110" fixed="right">
|
||||
<template #default="{ row }">
|
||||
<el-button
|
||||
v-if="can('drama:update')"
|
||||
type="danger"
|
||||
size="small"
|
||||
@click="removeDrama(row)"
|
||||
>移出</el-button
|
||||
>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="playlist-pagination">
|
||||
<el-pagination
|
||||
:current-page="pageIndex"
|
||||
:page-size="pageSize"
|
||||
:total="total"
|
||||
layout="total, prev, pager, next"
|
||||
@current-change="changePage"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<el-dialog
|
||||
v-model="dialogVisible"
|
||||
:title="editingId ? '编辑剧单分类' : '新建剧单分类'"
|
||||
width="460px"
|
||||
>
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="分类名称" required>
|
||||
<el-input v-model="form.name" maxlength="20" placeholder="例如：本周必看" />
|
||||
</el-form-item>
|
||||
<el-form-item label="描述">
|
||||
<el-input
|
||||
v-model="form.description"
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
maxlength="255"
|
||||
show-word-limit
|
||||
placeholder="分类用途说明"
|
||||
/>
|
||||
</el-form-item>
|
||||
<div class="playlist-form-row">
|
||||
<el-form-item label="排序">
|
||||
<el-input-number v-model="form.sort" :min="0" :max="999" />
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-switch v-model="form.status" :active-value="1" :inactive-value="0" />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="dialogVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="saving" @click="saveCategory">保存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog v-model="candidateVisible" title="选择短剧" width="760px">
|
||||
<div class="playlist-toolbar__search" style="margin-bottom: 12px">
|
||||
<el-input
|
||||
v-model="candidateKeyword"
|
||||
placeholder="搜索短剧名称"
|
||||
clearable
|
||||
style="width: 220px"
|
||||
@keyup.enter="candidateSearch"
|
||||
@clear="candidateSearch"
|
||||
/>
|
||||
<el-button type="primary" plain @click="candidateSearch">查询</el-button>
|
||||
</div>
|
||||
<el-table
|
||||
v-loading="candidateLoading"
|
||||
:data="candidates"
|
||||
row-key="id"
|
||||
border
|
||||
max-height="380"
|
||||
empty-text="没有可选择的短剧"
|
||||
@selection-change="onSelectionChange"
|
||||
>
|
||||
<el-table-column type="selection" width="48" />
|
||||
<el-table-column prop="title" label="短剧名称" min-width="220" />
|
||||
<el-table-column label="集数" width="90">
|
||||
<template #default="{ row }">{{ row.totalEpisodes || 0 }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="110">
|
||||
<template #default="{ row }">
|
||||
<span class="status-dot" :class="statusClass(row.status)">
|
||||
{{ STATUS_TEXT[row.status] || row.status }}
|
||||
</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="sort" label="排序" width="90" />
|
||||
</el-table>
|
||||
<div class="playlist-pagination">
|
||||
<el-pagination
|
||||
:current-page="candidatePage"
|
||||
:page-size="candidatePageSize"
|
||||
:total="candidateTotal"
|
||||
layout="total, prev, pager, next"
|
||||
@current-change="changeCandidatePage"
|
||||
/>
|
||||
</div>
|
||||
<template #footer>
|
||||
<el-button @click="candidateVisible = false">取消</el-button>
|
||||
<el-button type="primary" :loading="binding" @click="confirmBind">
|
||||
确定添加{{ selectedDramas.length ? `（${selectedDramas.length}）` : '' }}
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.playlist-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 260px minmax(0, 1fr);
|
||||
gap: 16px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.playlist-layout__side {
|
||||
padding: 12px 0 8px;
|
||||
}
|
||||
|
||||
.playlist-layout__side-title {
|
||||
padding: 0 16px 10px;
|
||||
font-weight: 600;
|
||||
color: var(--el-text-color-primary);
|
||||
}
|
||||
|
||||
.playlist-list {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
.playlist-list__item {
|
||||
display: flex;
|
||||
padding: 8px 12px 8px 16px;
|
||||
color: var(--el-text-color-regular);
|
||||
cursor: pointer;
|
||||
border-left: 3px solid transparent;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.playlist-list__item:hover {
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.playlist-list__item.is-active {
|
||||
font-weight: 600;
|
||||
color: var(--el-color-primary);
|
||||
background: var(--el-color-primary-light-9);
|
||||
border-left-color: var(--el-color-primary);
|
||||
}
|
||||
|
||||
.playlist-list__main {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.playlist-list__name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.playlist-list__count {
|
||||
min-width: 24px;
|
||||
padding: 0 6px;
|
||||
font-size: 12px;
|
||||
line-height: 18px;
|
||||
color: var(--el-text-color-secondary);
|
||||
text-align: center;
|
||||
background: var(--el-fill-color);
|
||||
border-radius: 9px;
|
||||
}
|
||||
|
||||
.playlist-list__actions {
|
||||
display: none;
|
||||
gap: 2px;
|
||||
}
|
||||
|
||||
.playlist-list__item:hover .playlist-list__actions {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.playlist-list__empty {
|
||||
padding: 16px;
|
||||
line-height: 1.6;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.playlist-layout__main {
|
||||
padding: 16px;
|
||||
}
|
||||
|
||||
.playlist-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 12px;
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.playlist-toolbar__title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.playlist-toolbar__title small {
|
||||
margin-left: 8px;
|
||||
font-size: 12px;
|
||||
font-weight: 400;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.playlist-toolbar__search {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.playlist-cover {
|
||||
width: 48px;
|
||||
height: 64px;
|
||||
object-fit: cover;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.playlist-cover--empty {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
background: var(--el-fill-color-light);
|
||||
}
|
||||
|
||||
.playlist-pagination {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 14px;
|
||||
}
|
||||
|
||||
.playlist-form-row {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
</style>
|
||||
@@ -1,92 +1,56 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
|
||||
<script setup>
|
||||
import { computed, nextTick, 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 videoError = ref('')
|
||||
const videoFileName = ref('')
|
||||
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 formRef = ref()
|
||||
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 MAX_VIDEO_SIZE = 500 * 1024 * 1024
|
||||
const VIDEO_EXTENSIONS = ['mp4', 'mov']
|
||||
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'
|
||||
}
|
||||
]
|
||||
}
|
||||
const formDialogRef = ref()
|
||||
/** 上移/下移与批量建集用的全集快照。 */
|
||||
const snapshotEpisodes = ref([])
|
||||
|
||||
const batchNextNumber = computed(() => nextNumber())
|
||||
const selectedDrama = computed(() => dramas.value.find((item) => item.id === selectedDramaId.value))
|
||||
const videoDisplayName = computed(
|
||||
() => videoFileName.value || (form.videoUrl ? episodeBasename(form.videoUrl) : '尚未选择视频')
|
||||
const existingEpisodeNumbers = computed(() =>
|
||||
snapshotEpisodes.value.map((item) => Number(item.number)).filter((n) => Number.isFinite(n))
|
||||
)
|
||||
|
||||
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()
|
||||
}
|
||||
const showEmpty = computed(() => !loading.value && episodes.value.length === 0)
|
||||
|
||||
async function loadDramas() {
|
||||
const res = await pageDramasApi({ pageIndex: 1, pageSize: 200 })
|
||||
@@ -103,143 +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'
|
||||
})
|
||||
videoFileName.value = ''
|
||||
videoError.value = ''
|
||||
dialogVisible.value = true
|
||||
resetValidation()
|
||||
/**
|
||||
* 删除后若当前页空且仍有数据，回退上一页再拉；否则夹页。
|
||||
*/
|
||||
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
|
||||
})
|
||||
videoFileName.value = row.videoUrl ? episodeBasename(row.videoUrl) : ''
|
||||
videoError.value = ''
|
||||
dialogVisible.value = true
|
||||
resetValidation()
|
||||
}
|
||||
|
||||
async function saveEpisode() {
|
||||
if (saving.value || uploadingVideo.value) return
|
||||
try {
|
||||
await formRef.value?.validate()
|
||||
} catch {
|
||||
return
|
||||
}
|
||||
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
|
||||
}
|
||||
}
|
||||
|
||||
function beforeVideoUpload(file) {
|
||||
videoError.value = ''
|
||||
const extension = String(file.name || '')
|
||||
.split('.')
|
||||
.pop()
|
||||
?.toLowerCase()
|
||||
if (!VIDEO_EXTENSIONS.includes(extension)) {
|
||||
videoError.value = '视频仅支持 MP4 或 MOV 格式'
|
||||
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)
|
||||
})
|
||||
form.videoUrl = asset.url
|
||||
videoFileName.value = options.file.name
|
||||
if (duration > 0) form.durationSec = duration
|
||||
await resetValidation()
|
||||
ElMessage.success('视频已上传')
|
||||
} catch {
|
||||
videoError.value = '视频上传失败，请检查网络后重试'
|
||||
} finally {
|
||||
uploadingVideo.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function removeVideo() {
|
||||
if (uploadingVideo.value) return
|
||||
form.videoUrl = ''
|
||||
videoFileName.value = ''
|
||||
videoError.value = ''
|
||||
resetValidation()
|
||||
}
|
||||
|
||||
function beforeDialogClose(done) {
|
||||
if (saving.value || uploadingVideo.value) {
|
||||
ElMessage.warning(saving.value ? '正在保存，请稍候' : '视频正在上传，请稍候')
|
||||
return
|
||||
}
|
||||
done()
|
||||
formDialogRef.value?.openEdit(row)
|
||||
}
|
||||
|
||||
async function confirmDelete(row) {
|
||||
@@ -255,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()
|
||||
}
|
||||
|
||||
@@ -283,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))
|
||||
@@ -296,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>
|
||||
|
||||
@@ -310,13 +268,17 @@ 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">
|
||||
@@ -325,7 +287,9 @@ onMounted(async () => {
|
||||
<span class="episode-context-label">当前短剧</span>
|
||||
<b class="episode-context-title">{{ selectedDrama?.title || '暂无短剧' }}</b>
|
||||
<small class="episode-context-count"
|
||||
>共 {{ selectedDrama?.episodes ?? episodes.length }} 集</small
|
||||
>共 {{ selectedDrama?.episodes ?? total }} 集 · 收藏
|
||||
{{ formatCount(selectedDrama?.favoriteCount ?? 0) }} · 热度
|
||||
{{ formatCount(selectedDrama?.views ?? 0) }}</small
|
||||
>
|
||||
</div>
|
||||
<div class="episode-switcher">
|
||||
@@ -343,23 +307,40 @@ onMounted(async () => {
|
||||
:value="item.id"
|
||||
/>
|
||||
</el-select>
|
||||
<span class="episode-context-label">状态</span>
|
||||
<el-select
|
||||
v-model="statusFilter"
|
||||
clearable
|
||||
placeholder="全部状态"
|
||||
class="status-select"
|
||||
@change="onStatusChange"
|
||||
>
|
||||
<el-option label="草稿" value="draft" />
|
||||
<el-option label="已上线" value="published" />
|
||||
<el-option label="已下线" value="offline" />
|
||||
</el-select>
|
||||
</div>
|
||||
</div>
|
||||
<div class="episode-toolbar"
|
||||
><div
|
||||
><h2>剧集列表（{{ episodes.length }}）</h2><p>按列表顺序播放</p></div
|
||||
><h2>剧集列表（{{ total }}）</h2><p>按列表顺序播放</p></div
|
||||
></div
|
||||
>
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="episodes"
|
||||
row-key="id"
|
||||
empty-text="该短剧暂无剧集"
|
||||
class="drama-el-table episode-el-table"
|
||||
>
|
||||
<template #empty>
|
||||
<el-empty
|
||||
v-if="showEmpty"
|
||||
:description="selectedDramaId ? '该短剧暂无剧集' : '请先选择短剧'"
|
||||
/>
|
||||
</template>
|
||||
<el-table-column label="集数" width="90"
|
||||
><template #default="{ row }">{{
|
||||
String(row.number).padStart(2, '0')
|
||||
String(row.number ?? 0).padStart(2, '0')
|
||||
}}</template></el-table-column
|
||||
>
|
||||
<el-table-column label="剧集名称" min-width="240"
|
||||
@@ -398,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">{{
|
||||
@@ -406,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')"
|
||||
@@ -417,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')"
|
||||
@@ -437,180 +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="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">
|
||||
<div class="episode-video-editor">
|
||||
<div class="episode-video-preview-card">
|
||||
<video
|
||||
v-if="form.videoUrl"
|
||||
:src="form.videoUrl"
|
||||
controls
|
||||
preload="metadata"
|
||||
class="episode-editor-video"
|
||||
></video>
|
||||
<el-upload
|
||||
v-else
|
||||
drag
|
||||
class="episode-video-empty-upload"
|
||||
:show-file-list="false"
|
||||
accept=".mp4,.mov"
|
||||
: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</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="form.videoUrl ? 'success' : 'info'" effect="light">
|
||||
{{ form.videoUrl ? '已上传' : '未上传' }}
|
||||
</el-tag>
|
||||
<span class="episode-video-filename" :title="videoDisplayName">
|
||||
{{ videoDisplayName }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="episode-video-hint">支持 MP4、MOV，单个文件不超过 500MB。</p>
|
||||
<el-alert
|
||||
v-if="videoError"
|
||||
:title="videoError"
|
||||
type="error"
|
||||
:closable="false"
|
||||
show-icon
|
||||
/>
|
||||
<div class="episode-video-actions">
|
||||
<el-upload
|
||||
v-if="form.videoUrl"
|
||||
:show-file-list="false"
|
||||
accept=".mp4,.mov"
|
||||
: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="form.videoUrl"
|
||||
type="danger"
|
||||
:disabled="uploadingVideo"
|
||||
@click="removeVideo"
|
||||
>
|
||||
移除
|
||||
</el-button>
|
||||
<a
|
||||
v-if="form.videoUrl"
|
||||
class="episode-video-link"
|
||||
:href="form.videoUrl"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
查看视频
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</section>
|
||||
|
||||
<section class="episode-editor-section">
|
||||
<h3 class="episode-editor-section-title">付费与状态</h3>
|
||||
<div class="episode-editor-grid episode-editor-grid--three">
|
||||
<el-form-item label="是否免费">
|
||||
<el-switch v-model="form.isFree" />
|
||||
</el-form-item>
|
||||
<el-form-item v-show="!form.isFree" label="解锁金币">
|
||||
<el-input-number
|
||||
v-model="form.unlockCoin"
|
||||
class="episode-editor-number"
|
||||
controls-position="right"
|
||||
:min="0"
|
||||
:max="9999"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="form.status">
|
||||
<el-option
|
||||
v-for="item in statusOptions"
|
||||
:key="item.code"
|
||||
:label="item.text"
|
||||
:value="item.code"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
</el-form>
|
||||
|
||||
<template #footer>
|
||||
<el-button :disabled="saving || uploadingVideo" @click="dialogVisible = false">
|
||||
取消
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
:loading="saving"
|
||||
:disabled="saving || uploadingVideo"
|
||||
@click="saveEpisode"
|
||||
>
|
||||
保存
|
||||
</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<EpisodeFormDialog
|
||||
ref="formDialogRef"
|
||||
:drama-options="selectedDrama"
|
||||
:next-number="batchNextNumber"
|
||||
@saved="loadEpisodes"
|
||||
/>
|
||||
<el-dialog
|
||||
v-model="previewVisible"
|
||||
:title="`预览：第 ${previewEpisode?.number ?? ''} 集 ${previewEpisode?.title ?? ''}`"
|
||||
@@ -626,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>
|
||||
@@ -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;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.batch-upload-rejected {
|
||||
padding: 8px 12px;
|
||||
margin-bottom: 12px;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-danger);
|
||||
background: color-mix(in srgb, var(--el-color-danger) 8%, transparent);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.batch-upload-rejected p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.batch-upload-overall {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.batch-upload-summary {
|
||||
padding: 8px 12px;
|
||||
margin: 0 0 12px;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-primary);
|
||||
background: color-mix(in srgb, var(--el-color-success) 10%, transparent);
|
||||
border-radius: 6px;
|
||||
}
|
||||
|
||||
.batch-upload-list {
|
||||
max-height: 360px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
@@ -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;
|
||||
font-size: 13px;
|
||||
line-height: 1.5;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.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;
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.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 {
|
||||
font-size: 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.create-episode-row.is-saved .create-episode-result {
|
||||
color: var(--el-color-success);
|
||||
}
|
||||
</style>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
@@ -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 {
|
||||
min-width: 1.5em;
|
||||
font-size: 13px;
|
||||
color: var(--el-text-color-secondary);
|
||||
flex: 0 0 auto;
|
||||
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;
|
||||
font-size: 12px;
|
||||
color: var(--el-color-danger);
|
||||
}
|
||||
|
||||
.upload-task-row__actions {
|
||||
display: flex;
|
||||
margin-top: 8px;
|
||||
margin-left: auto;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.upload-task-row.is-failed {
|
||||
padding-right: 8px;
|
||||
padding-left: 8px;
|
||||
background: color-mix(in srgb, var(--el-color-danger) 6%, transparent);
|
||||
border-radius: 6px;
|
||||
}
|
||||
</style>
|
||||
@@ -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}`
|
||||
}
|
||||
@@ -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
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,352 @@
|
||||
// Author: fruit.com.cn
|
||||
/** 剧集批量上传队列：手动开始、文件并发、进度加权、断点会话、失败隔离 */
|
||||
|
||||
import { computed, ref } from 'vue'
|
||||
import { getUploadProgressApi } from '@/api/admin/media'
|
||||
import { probeVideoDuration, resumeUpload, uploadFile } from '@/utils/uploader'
|
||||
import {
|
||||
listPendingSessions,
|
||||
matchFileForSession,
|
||||
removeUploadSession,
|
||||
type UploadSessionRecord,
|
||||
upsertUploadSession
|
||||
} from './uploadSessions'
|
||||
|
||||
export type UploadItemStatus = 'waiting' | 'uploading' | 'merging' | 'done' | 'failed' | 'paused'
|
||||
|
||||
export interface UploadQueueItem {
|
||||
id: string
|
||||
file: File
|
||||
fileName: string
|
||||
fileSize: number
|
||||
lastModified: number
|
||||
percent: number
|
||||
status: UploadItemStatus
|
||||
error: string
|
||||
uploadId: string
|
||||
assetId?: number
|
||||
url?: string
|
||||
durationSec?: number
|
||||
}
|
||||
|
||||
export interface UseUploadQueueOptions {
|
||||
/** 当前短剧 id（调用时读取，避免切换剧后闭包过期） */
|
||||
getDramaId: () => string
|
||||
bizType?: string
|
||||
}
|
||||
|
||||
const FILE_CONCURRENCY = 2
|
||||
const CHUNK_CONCURRENCY = 3
|
||||
const DEFAULT_BIZ_TYPE = 'EPISODE'
|
||||
const MERGING_PERCENT = 95
|
||||
const MAX_PERCENT = 100
|
||||
|
||||
let queueSeq = 0
|
||||
|
||||
function nextItemId(): string {
|
||||
queueSeq += 1
|
||||
return `uq-${Date.now()}-${queueSeq}`
|
||||
}
|
||||
|
||||
function extractErrorMessage(error: unknown): string {
|
||||
if (error instanceof Error && error.message) return error.message
|
||||
return String(error || 'upload failed')
|
||||
}
|
||||
|
||||
function isHttpNotFound(error: unknown): boolean {
|
||||
const status = (error as { response?: { status?: number } })?.response?.status
|
||||
return status === 404
|
||||
}
|
||||
|
||||
/** 文件名自然排序（数字感知），保证队列序号稳定。 */
|
||||
function compareFileName(a: string, b: string): number {
|
||||
return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' })
|
||||
}
|
||||
|
||||
/**
|
||||
* 创建上传队列控制器。
|
||||
* @param options dramaId 与可选 bizType
|
||||
*/
|
||||
export function useUploadQueue(options: UseUploadQueueOptions) {
|
||||
const items = ref<UploadQueueItem[]>([])
|
||||
const paused = ref(false)
|
||||
/** 用户是否已点过「开始上传」；选文件阶段不派发、不占用并发。 */
|
||||
const started = ref(false)
|
||||
const bizType = options.bizType || DEFAULT_BIZ_TYPE
|
||||
let running = 0
|
||||
|
||||
const overallPercent = computed(() => {
|
||||
const list = items.value
|
||||
if (!list.length) return 0
|
||||
const totalBytes = list.reduce((sum, item) => sum + item.fileSize, 0)
|
||||
if (totalBytes <= 0) return 0
|
||||
const weighted = list.reduce((sum, item) => sum + item.fileSize * item.percent, 0)
|
||||
return Math.min(MAX_PERCENT, Math.round(weighted / totalBytes))
|
||||
})
|
||||
|
||||
const isUploading = computed(() =>
|
||||
items.value.some((item) => item.status === 'uploading' || item.status === 'merging')
|
||||
)
|
||||
|
||||
/** 关闭弹窗需二次确认：仅在已开始且仍有未完成任务时。 */
|
||||
const hasActiveUpload = computed(() => {
|
||||
if (!started.value) return false
|
||||
return items.value.some(
|
||||
(item) =>
|
||||
item.status === 'waiting' ||
|
||||
item.status === 'uploading' ||
|
||||
item.status === 'merging' ||
|
||||
item.status === 'paused'
|
||||
)
|
||||
})
|
||||
|
||||
const canStart = computed(() => {
|
||||
if (isUploading.value) return false
|
||||
return items.value.some((item) => item.status === 'waiting' || item.status === 'paused')
|
||||
})
|
||||
|
||||
const doneItems = computed(() => items.value.filter((item) => item.status === 'done'))
|
||||
|
||||
const failedCount = computed(() => items.value.filter((item) => item.status === 'failed').length)
|
||||
|
||||
/** 已开始且队列已无进行中任务时，可展示结果汇总。 */
|
||||
const showResultSummary = computed(
|
||||
() => started.value && items.value.length > 0 && !hasActiveUpload.value
|
||||
)
|
||||
|
||||
function persistSession(item: UploadQueueItem, uploadId: string): void {
|
||||
item.uploadId = uploadId
|
||||
upsertUploadSession({
|
||||
uploadId,
|
||||
fileName: item.fileName,
|
||||
fileSize: item.fileSize,
|
||||
lastModified: item.lastModified,
|
||||
dramaId: String(options.getDramaId()),
|
||||
bizType,
|
||||
createdAt: Date.now()
|
||||
})
|
||||
}
|
||||
|
||||
function clearSession(uploadId: string): void {
|
||||
if (uploadId) removeUploadSession(uploadId)
|
||||
}
|
||||
|
||||
function sortItemsByName(): void {
|
||||
items.value.sort((a, b) => compareFileName(a.fileName, b.fileName))
|
||||
}
|
||||
|
||||
async function runOne(item: UploadQueueItem, resumeId?: string): Promise<void> {
|
||||
item.status = 'uploading'
|
||||
item.error = ''
|
||||
try {
|
||||
const durationSec = await probeVideoDuration(item.file)
|
||||
item.durationSec = durationSec
|
||||
const uploadOptions = {
|
||||
bizType,
|
||||
concurrency: CHUNK_CONCURRENCY,
|
||||
durationSec,
|
||||
onSession: (uploadId: string) => persistSession(item, uploadId),
|
||||
onProgress: (percent: number) => {
|
||||
item.percent = percent
|
||||
if (percent >= MERGING_PERCENT && item.status === 'uploading') {
|
||||
item.status = 'merging'
|
||||
}
|
||||
}
|
||||
}
|
||||
const asset = resumeId
|
||||
? await resumeUpload(item.file, resumeId, uploadOptions)
|
||||
: await uploadFile(item.file, uploadOptions)
|
||||
item.percent = MAX_PERCENT
|
||||
item.status = 'done'
|
||||
item.assetId = asset.id
|
||||
item.url = asset.url
|
||||
if (asset.durationSec != null) item.durationSec = asset.durationSec
|
||||
clearSession(item.uploadId || resumeId || '')
|
||||
} catch (error) {
|
||||
item.status = 'failed'
|
||||
item.error = extractErrorMessage(error)
|
||||
}
|
||||
}
|
||||
|
||||
function pump(): void {
|
||||
if (!started.value || paused.value) return
|
||||
while (running < FILE_CONCURRENCY && !paused.value) {
|
||||
const next = items.value.find((item) => item.status === 'waiting')
|
||||
if (!next) return
|
||||
// 立刻占位，避免同步 while 循环把同一项派发两次
|
||||
next.status = 'uploading'
|
||||
running += 1
|
||||
const resumeId = next.uploadId || undefined
|
||||
void runOne(next, resumeId).finally(() => {
|
||||
running -= 1
|
||||
if (!paused.value) pump()
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
/** 入队本地文件（调用方已完成类型/大小校验）；只展示待上传，不发起请求。 */
|
||||
function enqueue(files: File[]): void {
|
||||
const sorted = [...files].sort((a, b) => compareFileName(a.name, b.name))
|
||||
for (const file of sorted) {
|
||||
items.value.push({
|
||||
id: nextItemId(),
|
||||
file,
|
||||
fileName: file.name,
|
||||
fileSize: file.size,
|
||||
lastModified: file.lastModified,
|
||||
percent: 0,
|
||||
status: 'waiting',
|
||||
error: '',
|
||||
uploadId: ''
|
||||
})
|
||||
}
|
||||
sortItemsByName()
|
||||
}
|
||||
|
||||
/** 开始或继续派发（含断点续传项上的 uploadId）。 */
|
||||
function start(): void {
|
||||
if (!items.value.length) return
|
||||
started.value = true
|
||||
paused.value = false
|
||||
for (const item of items.value) {
|
||||
if (item.status === 'paused') item.status = 'waiting'
|
||||
}
|
||||
void pump()
|
||||
}
|
||||
|
||||
/** 暂停：不派新任务；进行中分片跑完。 */
|
||||
function pause(): void {
|
||||
if (!started.value) return
|
||||
paused.value = true
|
||||
for (const item of items.value) {
|
||||
if (item.status === 'waiting') item.status = 'paused'
|
||||
}
|
||||
}
|
||||
|
||||
/** 重试单个失败项。 */
|
||||
function retry(id: string): void {
|
||||
const item = items.value.find((row) => row.id === id)
|
||||
if (!item || item.status !== 'failed') return
|
||||
item.error = ''
|
||||
item.percent = item.uploadId ? item.percent : 0
|
||||
item.status = paused.value ? 'paused' : 'waiting'
|
||||
if (started.value && !paused.value) void pump()
|
||||
}
|
||||
|
||||
/** 重试全部失败项。 */
|
||||
function retryAll(): void {
|
||||
for (const item of items.value) {
|
||||
if (item.status === 'failed') {
|
||||
item.error = ''
|
||||
item.status = paused.value ? 'paused' : 'waiting'
|
||||
}
|
||||
}
|
||||
if (started.value && !paused.value) void pump()
|
||||
}
|
||||
|
||||
/** 仅选择阶段可移除；已开始上传后禁止直接移除，避免脏会话。 */
|
||||
function remove(id: string): void {
|
||||
if (started.value) return
|
||||
const index = items.value.findIndex((row) => row.id === id)
|
||||
if (index < 0) return
|
||||
const [removed] = items.value.splice(index, 1)
|
||||
clearSession(removed.uploadId)
|
||||
}
|
||||
|
||||
/** 清空队列并清理本队列会话。 */
|
||||
function clear(): void {
|
||||
for (const item of items.value) {
|
||||
clearSession(item.uploadId)
|
||||
}
|
||||
items.value = []
|
||||
paused.value = false
|
||||
started.value = false
|
||||
running = 0
|
||||
}
|
||||
|
||||
/** 读取当前剧未完成会话（24h 内）。 */
|
||||
function getPendingSessions(): UploadSessionRecord[] {
|
||||
return listPendingSessions(String(options.getDramaId()))
|
||||
}
|
||||
|
||||
/**
|
||||
* 用本地重选文件匹配会话并入队（待上传）；不自动开始，由用户点「开始上传」续传。
|
||||
* @returns matched / unmatched 会话列表
|
||||
*/
|
||||
async function resumeFromSessions(
|
||||
sessions: UploadSessionRecord[],
|
||||
files: File[]
|
||||
): Promise<{ matched: UploadSessionRecord[]; unmatched: UploadSessionRecord[] }> {
|
||||
const matched: UploadSessionRecord[] = []
|
||||
const unmatched: UploadSessionRecord[] = []
|
||||
for (const session of sessions) {
|
||||
const file = matchFileForSession(session, files)
|
||||
if (!file) {
|
||||
unmatched.push(session)
|
||||
continue
|
||||
}
|
||||
try {
|
||||
const progressRes = await getUploadProgressApi(session.uploadId)
|
||||
const progress = progressRes?.data
|
||||
if (!progress) {
|
||||
unmatched.push(session)
|
||||
continue
|
||||
}
|
||||
if (String(progress.status || '').toLowerCase() === 'completed') {
|
||||
clearSession(session.uploadId)
|
||||
continue
|
||||
}
|
||||
items.value.push({
|
||||
id: nextItemId(),
|
||||
file,
|
||||
fileName: file.name,
|
||||
fileSize: file.size,
|
||||
lastModified: file.lastModified,
|
||||
percent: Math.min(MERGING_PERCENT, Number(progress.percent) || 0),
|
||||
status: 'waiting',
|
||||
error: '',
|
||||
uploadId: session.uploadId
|
||||
})
|
||||
matched.push(session)
|
||||
} catch (error) {
|
||||
if (isHttpNotFound(error)) {
|
||||
clearSession(session.uploadId)
|
||||
} else {
|
||||
unmatched.push(session)
|
||||
}
|
||||
}
|
||||
}
|
||||
sortItemsByName()
|
||||
return { matched, unmatched }
|
||||
}
|
||||
|
||||
/** 放弃续传：清理给定会话。 */
|
||||
function abandonSessions(sessions: UploadSessionRecord[]): void {
|
||||
for (const session of sessions) {
|
||||
clearSession(session.uploadId)
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
items,
|
||||
overallPercent,
|
||||
hasActiveUpload,
|
||||
isUploading,
|
||||
canStart,
|
||||
doneItems,
|
||||
failedCount,
|
||||
showResultSummary,
|
||||
started,
|
||||
paused,
|
||||
enqueue,
|
||||
start,
|
||||
pause,
|
||||
retry,
|
||||
retryAll,
|
||||
remove,
|
||||
clear,
|
||||
getPendingSessions,
|
||||
resumeFromSessions,
|
||||
abandonSessions
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,9 @@
|
||||
// Author: fruit.com.cn
|
||||
/** 剧集视频大小上限，单文件上传与批量上传共用。 */
|
||||
export const MAX_VIDEO_SIZE = 500 * 1024 * 1024
|
||||
|
||||
/** 允许的视频扩展名（小写，不含点），单文件与批量上传同源。 */
|
||||
export const VIDEO_EXTENSIONS: string[] = ['mp4', 'mov', 'mkv', 'webm']
|
||||
|
||||
/** el-upload / input[type=file] 的 accept 属性，与 VIDEO_EXTENSIONS 保持一致。 */
|
||||
export const VIDEO_ACCEPT_ATTR = '.mp4,.mov,.mkv,.webm,video/*'
|
||||
@@ -1,7 +1,7 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
|
||||
<script setup>
|
||||
import { computed, onMounted, reactive, ref } from 'vue'
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage, ElMessageBox } from 'element-plus'
|
||||
import PageHeading from '@/views/components/PageHeading.vue'
|
||||
import { useRbac } from '@/stores/rbac'
|
||||
@@ -26,16 +26,23 @@ const canWordUpdate = can('sensitive-word:update')
|
||||
const activeTab = ref('comments')
|
||||
|
||||
const COMMENT_STATUS = [
|
||||
{ value: '', label: '全部状态', tag: 'info' },
|
||||
{ value: 'pending', label: '待审核', tag: 'warning' },
|
||||
{ value: 'published', label: '已发布', tag: 'success' },
|
||||
{ value: 'rejected', label: '已驳回', tag: 'danger' },
|
||||
{ value: 'deleted', label: '已删除', tag: 'info' }
|
||||
]
|
||||
const REPORT_STATUS = [
|
||||
{ value: '', label: '全部状态', tag: 'info' },
|
||||
{ value: 'pending', label: '待处理', tag: 'warning' },
|
||||
{ value: 'handled', label: '已处理', tag: 'success' },
|
||||
{ value: 'rejected', label: '已驳回', tag: 'info' }
|
||||
]
|
||||
const REPORT_TARGET_TYPES = {
|
||||
COMMENT: { label: '评论', tag: 'warning' },
|
||||
USER: { label: '用户', tag: 'success' },
|
||||
DRAMA: { label: '短剧', tag: 'info' }
|
||||
}
|
||||
const WORD_LEVELS = [
|
||||
{ value: 'BLOCK', label: '禁止发布' },
|
||||
{ value: 'REVIEW', label: '转人工审核' },
|
||||
@@ -48,6 +55,22 @@ function meta(list, value) {
|
||||
function levelText(level) {
|
||||
return WORD_LEVELS.find((item) => item.value === level)?.label || level
|
||||
}
|
||||
function commentEpisodeText(row) {
|
||||
if (row.episodeNo) return `第 ${row.episodeNo} 集`
|
||||
return row.episodeId ? `分集 #${row.episodeId}` : '未关联分集'
|
||||
}
|
||||
function commentContentTooltip(row) {
|
||||
return `短剧 ID：${row.dramaId} / 分集 ID：${row.episodeId || '未关联'}`
|
||||
}
|
||||
function reportTargetMeta(type) {
|
||||
return REPORT_TARGET_TYPES[type] || { label: type || '-', tag: 'info' }
|
||||
}
|
||||
function reportTargetSummary(row) {
|
||||
return row.targetSummary || `${reportTargetMeta(row.targetType).label} #${row.targetId}`
|
||||
}
|
||||
function reporterText(row) {
|
||||
return row.reporterNickname || row.reporterUid || `#${row.reporterId}`
|
||||
}
|
||||
|
||||
const comments = reactive({
|
||||
rows: [],
|
||||
@@ -55,7 +78,7 @@ const comments = reactive({
|
||||
loading: false,
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'pending',
|
||||
status: '',
|
||||
keyword: ''
|
||||
})
|
||||
async function loadComments() {
|
||||
@@ -123,7 +146,7 @@ const reports = reactive({
|
||||
loading: false,
|
||||
page: 1,
|
||||
size: 10,
|
||||
status: 'pending'
|
||||
status: ''
|
||||
})
|
||||
async function loadReports() {
|
||||
reports.loading = true
|
||||
@@ -271,11 +294,6 @@ function onTabChange(name) {
|
||||
if (name === 'reports') loadReports()
|
||||
if (name === 'words') loadWords()
|
||||
}
|
||||
|
||||
const handleTargetText = computed(() => {
|
||||
const row = handleTarget.value
|
||||
return row ? `${row.targetType} #${row.targetId}` : ''
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -325,7 +343,17 @@ const handleTargetText = computed(() => {
|
||||
<el-table-column prop="id" label="ID" width="80" />
|
||||
<el-table-column prop="nickname" label="用户" min-width="120" show-overflow-tooltip />
|
||||
<el-table-column prop="content" label="内容" min-width="220" show-overflow-tooltip />
|
||||
<el-table-column prop="dramaId" label="短剧ID" width="90" />
|
||||
<el-table-column label="短剧 / 分集" min-width="190">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip :content="commentContentTooltip(row)" placement="top">
|
||||
<div class="episode-table-title">
|
||||
<b>{{ row.dramaTitle || `短剧 #${row.dramaId}` }}</b>
|
||||
<small>{{ commentEpisodeText(row) }}</small>
|
||||
<small v-if="row.episodeTitle">{{ row.episodeTitle }}</small>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="meta(COMMENT_STATUS, row.status).tag" effect="light">{{
|
||||
@@ -410,8 +438,22 @@ const handleTargetText = computed(() => {
|
||||
empty-text="没有符合条件的工单"
|
||||
>
|
||||
<el-table-column prop="id" label="工单ID" width="90" />
|
||||
<el-table-column prop="targetType" label="对象" width="100" />
|
||||
<el-table-column prop="targetId" label="对象ID" width="90" />
|
||||
<el-table-column label="对象" min-width="240">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip placement="top">
|
||||
<template #content>
|
||||
<div>原始对象：#{{ row.targetId }}</div>
|
||||
<div v-if="row.commentContent">评论内容：{{ row.commentContent }}</div>
|
||||
</template>
|
||||
<div class="episode-table-title">
|
||||
<el-tag :type="reportTargetMeta(row.targetType).tag" size="small" effect="light">
|
||||
{{ reportTargetMeta(row.targetType).label }}
|
||||
</el-tag>
|
||||
<b>{{ reportTargetSummary(row) }}</b>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="reasonCode" label="原因码" width="120" />
|
||||
<el-table-column
|
||||
prop="description"
|
||||
@@ -419,7 +461,9 @@ const handleTargetText = computed(() => {
|
||||
min-width="180"
|
||||
show-overflow-tooltip
|
||||
/>
|
||||
<el-table-column prop="reporterId" label="举报人" width="90" />
|
||||
<el-table-column label="举报人" min-width="140" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ reporterText(row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="状态" width="100">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="meta(REPORT_STATUS, row.status).tag" effect="light">{{
|
||||
@@ -550,7 +594,12 @@ const handleTargetText = computed(() => {
|
||||
<el-dialog v-model="handleVisible" title="处理举报工单" width="480px">
|
||||
<el-form label-position="top">
|
||||
<el-form-item label="工单对象">
|
||||
<el-input :model-value="handleTargetText" disabled />
|
||||
<div v-if="handleTarget" class="episode-table-title">
|
||||
<el-tag :type="reportTargetMeta(handleTarget.targetType).tag" size="small" effect="light">
|
||||
{{ reportTargetMeta(handleTarget.targetType).label }}
|
||||
</el-tag>
|
||||
<b>{{ reportTargetSummary(handleTarget) }}</b>
|
||||
</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="处理结论">
|
||||
<el-radio-group v-model="handleForm.status">
|
||||
|
||||
@@ -0,0 +1,119 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import {
|
||||
listLegalDocumentsApi,
|
||||
saveLegalDocumentsApi,
|
||||
type LegalDocument
|
||||
} from '@/api/admin/legalDocument'
|
||||
|
||||
const languages = [
|
||||
{ code: 'zh', label: '中文' },
|
||||
{ code: 'en', label: 'English' },
|
||||
{ code: 'id', label: 'Indonesia' }
|
||||
]
|
||||
|
||||
const documents = [
|
||||
{ code: 'terms', label: '服务条款', path: '/terms' },
|
||||
{ code: 'privacy', label: '隐私协议', path: '/privacy' }
|
||||
]
|
||||
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const activeDoc = ref('terms')
|
||||
const form = reactive<Record<string, LegalDocument>>({})
|
||||
|
||||
const blank = (docCode: string, lang: string): LegalDocument => ({
|
||||
docCode,
|
||||
lang,
|
||||
title: '',
|
||||
content: ''
|
||||
})
|
||||
|
||||
const fieldKey = (docCode: string, lang: string) => `${docCode}:${lang}`
|
||||
|
||||
function ensureFields() {
|
||||
for (const doc of documents) {
|
||||
for (const lang of languages) {
|
||||
const key = fieldKey(doc.code, lang.code)
|
||||
if (!form[key]) form[key] = blank(doc.code, lang.code)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
ensureFields()
|
||||
const res = await listLegalDocumentsApi()
|
||||
for (const item of res.data || []) {
|
||||
form[fieldKey(item.docCode, item.lang)] = { ...item }
|
||||
}
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
async function save() {
|
||||
saving.value = true
|
||||
try {
|
||||
ensureFields()
|
||||
const items = documents.flatMap((doc) =>
|
||||
languages.map((lang) => ({ ...form[fieldKey(doc.code, lang.code)], title: '' }))
|
||||
)
|
||||
await saveLegalDocumentsApi(items)
|
||||
ElMessage.success('协议已保存')
|
||||
await load()
|
||||
} finally {
|
||||
saving.value = false
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
ensureFields()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="page-heading">
|
||||
<div>
|
||||
<div class="eyebrow">系统管理</div>
|
||||
<h1>协议设置</h1>
|
||||
<p>服务条款与隐私协议各维护中文、英文、印尼语。正文用 Markdown，打开后的页面不另加标题。</p>
|
||||
</div>
|
||||
</div>
|
||||
<section v-loading="loading" class="panel settings-panel">
|
||||
<el-tabs v-model="activeDoc">
|
||||
<el-tab-pane v-for="doc in documents" :key="doc.code" :name="doc.code" :label="doc.label" />
|
||||
</el-tabs>
|
||||
<template v-for="doc in documents" :key="doc.code">
|
||||
<div v-show="activeDoc === doc.code">
|
||||
<p class="legal-path"
|
||||
>公开地址：{{ doc.path }}/zh 、{{ doc.path }}/en 、{{ doc.path }}/id</p
|
||||
>
|
||||
<div v-for="lang in languages" :key="`${doc.code}-${lang.code}`" class="legal-block">
|
||||
<h2>{{ lang.label }}</h2>
|
||||
<el-input
|
||||
v-model="form[`${doc.code}:${lang.code}`].content"
|
||||
type="textarea"
|
||||
:rows="14"
|
||||
placeholder="直接写 Markdown，页面不再另加标题"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<el-button type="primary" :loading="saving" @click="save">保存</el-button>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.legal-path {
|
||||
margin: 0 0 12px;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
|
||||
.legal-block + .legal-block {
|
||||
margin-top: 8px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,350 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
<!-- 后台转码档位与缩略图雪碧图配置 -->
|
||||
|
||||
<script setup lang="ts">
|
||||
import { AppIcons } from '@/constants/icons'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import PageHeading from '@/views/components/PageHeading.vue'
|
||||
import { useTranscodeSettings } from './composables/useTranscodeSettings'
|
||||
|
||||
const { t } = useI18n()
|
||||
const {
|
||||
form,
|
||||
formRef,
|
||||
rules,
|
||||
loading,
|
||||
saving,
|
||||
loadError,
|
||||
canManage,
|
||||
qualityRules,
|
||||
positiveEvenRule,
|
||||
positiveIntegerRule,
|
||||
enabledRules,
|
||||
loadProfile,
|
||||
addRung,
|
||||
deleteRung,
|
||||
saveProfile
|
||||
} = useTranscodeSettings()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeading
|
||||
:eyebrow="t('transcodeSettings.eyebrow')"
|
||||
:title="t('transcodeSettings.title')"
|
||||
:description="t('transcodeSettings.description')"
|
||||
>
|
||||
<el-button :disabled="loading" @click="loadProfile">
|
||||
<AppIcon :icon="AppIcons.refresh" />
|
||||
{{ t('transcodeSettings.reload') }}
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
class="primary-button"
|
||||
:loading="saving"
|
||||
:disabled="!canManage || loading"
|
||||
@click="saveProfile"
|
||||
>
|
||||
<AppIcon :icon="AppIcons.check" />
|
||||
{{ t('transcodeSettings.save') }}
|
||||
</el-button>
|
||||
</PageHeading>
|
||||
|
||||
<el-alert
|
||||
v-if="loadError"
|
||||
class="transcode-alert"
|
||||
:title="loadError"
|
||||
type="error"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
<el-alert
|
||||
v-if="!canManage"
|
||||
class="transcode-alert"
|
||||
:title="t('transcodeSettings.noPermission')"
|
||||
type="warning"
|
||||
show-icon
|
||||
:closable="false"
|
||||
/>
|
||||
|
||||
<el-form
|
||||
ref="formRef"
|
||||
v-loading="loading"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
label-position="top"
|
||||
class="transcode-form"
|
||||
>
|
||||
<section class="panel transcode-panel">
|
||||
<div class="transcode-section-heading">
|
||||
<div>
|
||||
<h2>{{ t('transcodeSettings.enabled') }}</h2>
|
||||
<p>{{ t('transcodeSettings.enabledDescription') }}</p>
|
||||
</div>
|
||||
<el-switch v-model="form.enabled" size="large" />
|
||||
</div>
|
||||
<div class="transcode-grid transcode-grid--compact">
|
||||
<el-form-item :label="t('transcodeSettings.segmentSeconds')" prop="segmentSeconds">
|
||||
<el-input-number
|
||||
v-model="form.segmentSeconds"
|
||||
controls-position="right"
|
||||
:min="2"
|
||||
:max="10"
|
||||
:precision="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="panel transcode-panel">
|
||||
<div class="transcode-section-heading">
|
||||
<div>
|
||||
<h2>{{ t('transcodeSettings.ladderTitle') }}</h2>
|
||||
<p>{{ t('transcodeSettings.ladderDescription') }}</p>
|
||||
</div>
|
||||
<el-button type="primary" plain @click="addRung">
|
||||
<AppIcon :icon="AppIcons.add" />
|
||||
{{ t('transcodeSettings.addRung') }}
|
||||
</el-button>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
:data="form.ladder"
|
||||
border
|
||||
class="transcode-table"
|
||||
:empty-text="t('transcodeSettings.emptyLadder')"
|
||||
>
|
||||
<el-table-column type="index" width="60" label="#" />
|
||||
<el-table-column :label="t('transcodeSettings.quality')" min-width="150">
|
||||
<template #default="{ row, $index }">
|
||||
<el-form-item
|
||||
:prop="`ladder.${$index}.quality`"
|
||||
:rules="qualityRules($index)"
|
||||
class="table-form-item"
|
||||
>
|
||||
<el-input v-model="row.quality" maxlength="16" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('transcodeSettings.width')" min-width="120">
|
||||
<template #default="{ row, $index }">
|
||||
<el-form-item
|
||||
:prop="`ladder.${$index}.width`"
|
||||
:rules="positiveEvenRule()"
|
||||
class="table-form-item"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="row.width"
|
||||
controls-position="right"
|
||||
:min="2"
|
||||
:precision="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('transcodeSettings.height')" min-width="120">
|
||||
<template #default="{ row, $index }">
|
||||
<el-form-item
|
||||
:prop="`ladder.${$index}.height`"
|
||||
:rules="positiveEvenRule()"
|
||||
class="table-form-item"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="row.height"
|
||||
controls-position="right"
|
||||
:min="2"
|
||||
:precision="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('transcodeSettings.videoBitrateKbps')" min-width="150">
|
||||
<template #default="{ row, $index }">
|
||||
<el-form-item
|
||||
:prop="`ladder.${$index}.videoBitrateKbps`"
|
||||
:rules="positiveIntegerRule()"
|
||||
class="table-form-item"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="row.videoBitrateKbps"
|
||||
controls-position="right"
|
||||
:min="1"
|
||||
:precision="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('transcodeSettings.audioBitrateKbps')" min-width="150">
|
||||
<template #default="{ row, $index }">
|
||||
<el-form-item
|
||||
:prop="`ladder.${$index}.audioBitrateKbps`"
|
||||
:rules="positiveIntegerRule()"
|
||||
class="table-form-item"
|
||||
>
|
||||
<el-input-number
|
||||
v-model="row.audioBitrateKbps"
|
||||
controls-position="right"
|
||||
:min="1"
|
||||
:precision="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column :label="t('transcodeSettings.rowEnabled')" width="100" align="center">
|
||||
<template #default="{ row, $index }">
|
||||
<el-form-item
|
||||
:prop="`ladder.${$index}.enabled`"
|
||||
:rules="enabledRules"
|
||||
class="table-form-item table-form-item--center"
|
||||
>
|
||||
<el-switch v-model="row.enabled" />
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="" width="72" align="center" fixed="right">
|
||||
<template #default="{ $index }">
|
||||
<el-tooltip :content="t('transcodeSettings.deleteRung')" placement="top">
|
||||
<el-button circle type="danger" plain @click="deleteRung($index)">
|
||||
<AppIcon :icon="AppIcons.delete" />
|
||||
</el-button>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</section>
|
||||
|
||||
<section class="panel transcode-panel">
|
||||
<div class="transcode-section-heading">
|
||||
<div>
|
||||
<h2>{{ t('transcodeSettings.spriteTitle') }}</h2>
|
||||
<p>{{ t('transcodeSettings.spriteDescription') }}</p>
|
||||
</div>
|
||||
<el-switch v-model="form.sprite.enabled" size="large" />
|
||||
</div>
|
||||
<div class="transcode-grid">
|
||||
<el-form-item :label="t('transcodeSettings.intervalSeconds')" prop="sprite.intervalSeconds">
|
||||
<el-input-number
|
||||
v-model="form.sprite.intervalSeconds"
|
||||
controls-position="right"
|
||||
:min="1"
|
||||
:max="10"
|
||||
:precision="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('transcodeSettings.columns')" prop="sprite.columns">
|
||||
<el-input-number
|
||||
v-model="form.sprite.columns"
|
||||
controls-position="right"
|
||||
:min="5"
|
||||
:max="20"
|
||||
:precision="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item :label="t('transcodeSettings.thumbWidth')" prop="sprite.thumbWidth">
|
||||
<el-input-number
|
||||
v-model="form.sprite.thumbWidth"
|
||||
controls-position="right"
|
||||
:min="120"
|
||||
:max="240"
|
||||
:precision="0"
|
||||
/>
|
||||
</el-form-item>
|
||||
</div>
|
||||
<div class="transcode-footer">
|
||||
<el-button
|
||||
type="primary"
|
||||
class="primary-button"
|
||||
:loading="saving"
|
||||
:disabled="!canManage || loading"
|
||||
@click="saveProfile"
|
||||
>
|
||||
<AppIcon :icon="AppIcons.check" />
|
||||
{{ t('transcodeSettings.save') }}
|
||||
</el-button>
|
||||
</div>
|
||||
</section>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<style scoped lang="less">
|
||||
.transcode-alert {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
.transcode-form {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.transcode-panel {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.transcode-section-heading {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 16px;
|
||||
margin-bottom: 18px;
|
||||
|
||||
h2 {
|
||||
margin: 0;
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 6px 0 0;
|
||||
line-height: 1.5;
|
||||
color: var(--el-text-color-secondary);
|
||||
}
|
||||
}
|
||||
|
||||
.transcode-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(180px, 1fr));
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.transcode-grid--compact {
|
||||
grid-template-columns: minmax(180px, 320px);
|
||||
}
|
||||
|
||||
.transcode-table {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.table-form-item {
|
||||
margin-bottom: 0;
|
||||
|
||||
:deep(.el-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__error) {
|
||||
position: static;
|
||||
margin-top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.table-form-item--center {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.transcode-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
margin-top: 18px;
|
||||
}
|
||||
|
||||
@media (width <= 900px) {
|
||||
.transcode-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.transcode-section-heading {
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,74 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import type {
|
||||
MediaTranscodeLadderRung,
|
||||
MediaTranscodeProfile,
|
||||
MediaTranscodeSprite
|
||||
} from '@/api/admin/types'
|
||||
|
||||
export const MIN_SEGMENT_SECONDS = 2
|
||||
export const MAX_SEGMENT_SECONDS = 10
|
||||
export const MIN_SPRITE_INTERVAL = 1
|
||||
export const MAX_SPRITE_INTERVAL = 10
|
||||
export const MIN_SPRITE_COLUMNS = 5
|
||||
export const MAX_SPRITE_COLUMNS = 20
|
||||
export const MIN_THUMB_WIDTH = 120
|
||||
export const MAX_THUMB_WIDTH = 240
|
||||
export const MAX_QUALITY_LENGTH = 16
|
||||
|
||||
export const defaultSprite = (): MediaTranscodeSprite => ({
|
||||
enabled: true,
|
||||
intervalSeconds: 1,
|
||||
columns: 10,
|
||||
thumbWidth: 160
|
||||
})
|
||||
|
||||
export const defaultRung = (): MediaTranscodeLadderRung => ({
|
||||
quality: '',
|
||||
width: 640,
|
||||
height: 360,
|
||||
videoBitrateKbps: 400,
|
||||
audioBitrateKbps: 64,
|
||||
enabled: true
|
||||
})
|
||||
|
||||
/** 与后端缺省值一致的四档配置。 */
|
||||
export const defaultProfile = (): MediaTranscodeProfile => ({
|
||||
enabled: true,
|
||||
segmentSeconds: 6,
|
||||
ladder: [
|
||||
{
|
||||
quality: '360p',
|
||||
width: 640,
|
||||
height: 360,
|
||||
videoBitrateKbps: 400,
|
||||
audioBitrateKbps: 64,
|
||||
enabled: true
|
||||
},
|
||||
{
|
||||
quality: '480p',
|
||||
width: 854,
|
||||
height: 480,
|
||||
videoBitrateKbps: 800,
|
||||
audioBitrateKbps: 64,
|
||||
enabled: true
|
||||
},
|
||||
{
|
||||
quality: '720p',
|
||||
width: 1280,
|
||||
height: 720,
|
||||
videoBitrateKbps: 1600,
|
||||
audioBitrateKbps: 96,
|
||||
enabled: true
|
||||
},
|
||||
{
|
||||
quality: '1080p',
|
||||
width: 1920,
|
||||
height: 1080,
|
||||
videoBitrateKbps: 3200,
|
||||
audioBitrateKbps: 128,
|
||||
enabled: true
|
||||
}
|
||||
],
|
||||
sprite: defaultSprite()
|
||||
})
|
||||
@@ -0,0 +1,49 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import type { MediaTranscodeProfile } from '@/api/admin/types'
|
||||
import { defaultProfile, defaultRung, defaultSprite } from './transcodeProfileDefaults'
|
||||
|
||||
/** 用服务端响应回填表单，同时保持字段名与后端完全一致。 */
|
||||
export const applyProfileToForm = (
|
||||
form: MediaTranscodeProfile,
|
||||
profile?: MediaTranscodeProfile | null
|
||||
): void => {
|
||||
const source = profile || defaultProfile()
|
||||
form.enabled = Boolean(source.enabled)
|
||||
form.segmentSeconds = Number(source.segmentSeconds)
|
||||
form.sprite = { ...defaultSprite(), ...(source.sprite || {}) }
|
||||
const ladder =
|
||||
Array.isArray(source.ladder) && source.ladder.length ? source.ladder : [defaultRung()]
|
||||
form.ladder.splice(
|
||||
0,
|
||||
form.ladder.length,
|
||||
...ladder.map((row) => ({
|
||||
quality: row.quality || '',
|
||||
width: Number(row.width),
|
||||
height: Number(row.height),
|
||||
videoBitrateKbps: Number(row.videoBitrateKbps),
|
||||
audioBitrateKbps: Number(row.audioBitrateKbps),
|
||||
enabled: Boolean(row.enabled)
|
||||
}))
|
||||
)
|
||||
}
|
||||
|
||||
/** 生成只包含后端约定字段的 PUT 请求体。 */
|
||||
export const buildProfilePayload = (form: MediaTranscodeProfile): MediaTranscodeProfile => ({
|
||||
enabled: form.enabled,
|
||||
segmentSeconds: Number(form.segmentSeconds),
|
||||
ladder: form.ladder.map((row) => ({
|
||||
quality: row.quality.trim(),
|
||||
width: Number(row.width),
|
||||
height: Number(row.height),
|
||||
videoBitrateKbps: Number(row.videoBitrateKbps),
|
||||
audioBitrateKbps: Number(row.audioBitrateKbps),
|
||||
enabled: Boolean(row.enabled)
|
||||
})),
|
||||
sprite: {
|
||||
enabled: Boolean(form.sprite.enabled),
|
||||
intervalSeconds: Number(form.sprite.intervalSeconds),
|
||||
columns: Number(form.sprite.columns),
|
||||
thumbWidth: Number(form.sprite.thumbWidth)
|
||||
}
|
||||
})
|
||||
@@ -0,0 +1,98 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import type { FormItemRule, FormRules } from 'element-plus'
|
||||
import type { MediaTranscodeProfile } from '@/api/admin/types'
|
||||
import {
|
||||
MAX_QUALITY_LENGTH,
|
||||
MAX_SEGMENT_SECONDS,
|
||||
MAX_SPRITE_COLUMNS,
|
||||
MAX_SPRITE_INTERVAL,
|
||||
MAX_THUMB_WIDTH,
|
||||
MIN_SPRITE_COLUMNS,
|
||||
MIN_SEGMENT_SECONDS,
|
||||
MIN_SPRITE_INTERVAL,
|
||||
MIN_THUMB_WIDTH
|
||||
} from './transcodeProfileDefaults'
|
||||
|
||||
type Translate = (key: string, named?: Record<string, unknown>) => string
|
||||
|
||||
const rangeRule = (min: number, max: number, t: Translate): FormItemRule => ({
|
||||
trigger: 'change',
|
||||
validator: (_rule, value, callback) => {
|
||||
const parsed = Number(value)
|
||||
callback(
|
||||
Number.isInteger(parsed) && parsed >= min && parsed <= max
|
||||
? undefined
|
||||
: new Error(t('transcodeSettings.validation.range', { min, max }))
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export const positiveIntegerRule = (t: Translate): FormItemRule => ({
|
||||
trigger: 'change',
|
||||
validator: (_rule, value, callback) => {
|
||||
const parsed = Number(value)
|
||||
callback(
|
||||
Number.isInteger(parsed) && parsed > 0
|
||||
? undefined
|
||||
: new Error(t('transcodeSettings.validation.positiveInteger'))
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export const positiveEvenRule = (t: Translate): FormItemRule => ({
|
||||
trigger: 'change',
|
||||
validator: (_rule, value, callback) => {
|
||||
const parsed = Number(value)
|
||||
callback(
|
||||
Number.isInteger(parsed) && parsed > 0 && parsed % 2 === 0
|
||||
? undefined
|
||||
: new Error(t('transcodeSettings.validation.positiveEven'))
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
export const createProfileRules = (t: Translate): FormRules => ({
|
||||
segmentSeconds: [rangeRule(MIN_SEGMENT_SECONDS, MAX_SEGMENT_SECONDS, t)],
|
||||
'sprite.intervalSeconds': [rangeRule(MIN_SPRITE_INTERVAL, MAX_SPRITE_INTERVAL, t)],
|
||||
'sprite.columns': [rangeRule(MIN_SPRITE_COLUMNS, MAX_SPRITE_COLUMNS, t)],
|
||||
'sprite.thumbWidth': [rangeRule(MIN_THUMB_WIDTH, MAX_THUMB_WIDTH, t)]
|
||||
})
|
||||
|
||||
export const createQualityRules = (
|
||||
form: MediaTranscodeProfile,
|
||||
index: number,
|
||||
t: Translate
|
||||
): FormItemRule[] => [
|
||||
{
|
||||
trigger: 'blur',
|
||||
validator: (_rule, value, callback) => {
|
||||
const quality = String(value ?? '').trim()
|
||||
if (!quality) {
|
||||
callback(new Error(t('transcodeSettings.validation.required')))
|
||||
return
|
||||
}
|
||||
if (quality.length > MAX_QUALITY_LENGTH) {
|
||||
callback(new Error(t('transcodeSettings.validation.qualityTooLong')))
|
||||
return
|
||||
}
|
||||
const duplicate = form.ladder.some(
|
||||
(row, rowIndex) => rowIndex !== index && row.quality.trim() === quality
|
||||
)
|
||||
callback(duplicate ? new Error(t('transcodeSettings.validation.qualityUnique')) : undefined)
|
||||
}
|
||||
}
|
||||
]
|
||||
|
||||
export const createEnabledRules = (form: MediaTranscodeProfile, t: Translate): FormItemRule[] => [
|
||||
{
|
||||
trigger: 'change',
|
||||
validator: (_rule, _value, callback) => {
|
||||
callback(
|
||||
form.ladder.some((row) => row.enabled)
|
||||
? undefined
|
||||
: new Error(t('transcodeSettings.validation.atLeastOneEnabled'))
|
||||
)
|
||||
}
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,79 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import { nextTick } from 'vue'
|
||||
import type { ComputedRef, Ref } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import { getMediaTranscodeProfileApi, saveMediaTranscodeProfileApi } from '@/api/admin/media'
|
||||
import type { MediaTranscodeProfile } from '@/api/admin/types'
|
||||
import { applyProfileToForm, buildProfilePayload } from './transcodeProfileModel'
|
||||
|
||||
type Translate = (key: string, named?: Record<string, unknown>) => string
|
||||
|
||||
interface SettingsContext {
|
||||
form: MediaTranscodeProfile
|
||||
formRef: Ref<FormInstance | undefined>
|
||||
loading: Ref<boolean>
|
||||
saving: Ref<boolean>
|
||||
loadError: Ref<string>
|
||||
canManage: ComputedRef<boolean>
|
||||
t: Translate
|
||||
}
|
||||
|
||||
/** 读取服务端配置并回填表单。 */
|
||||
export const loadTranscodeProfile = async (context: SettingsContext): Promise<void> => {
|
||||
context.loading.value = true
|
||||
context.loadError.value = ''
|
||||
try {
|
||||
const response = await getMediaTranscodeProfileApi()
|
||||
if (response.code !== 0) {
|
||||
context.loadError.value = response.message || context.t('transcodeSettings.loadFailed')
|
||||
return
|
||||
}
|
||||
applyProfileToForm(context.form, response.data)
|
||||
} catch {
|
||||
context.loadError.value = context.t('transcodeSettings.loadFailed')
|
||||
} finally {
|
||||
context.loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
const validateProfile = async (context: SettingsContext): Promise<boolean> => {
|
||||
if (!context.form.ladder.length) {
|
||||
ElMessage.warning(context.t('transcodeSettings.validation.atLeastOneEnabled'))
|
||||
return false
|
||||
}
|
||||
try {
|
||||
await context.formRef.value?.validate()
|
||||
return true
|
||||
} catch (fields) {
|
||||
const firstField = Object.keys((fields || {}) as Record<string, unknown>)[0]
|
||||
if (firstField) {
|
||||
await nextTick()
|
||||
context.formRef.value?.scrollToField(firstField)
|
||||
}
|
||||
ElMessage.warning(context.t('transcodeSettings.validation.fixErrors'))
|
||||
return false
|
||||
}
|
||||
}
|
||||
|
||||
/** 校验并保存，成功后用服务端返回值回填。 */
|
||||
export const saveTranscodeProfile = async (context: SettingsContext): Promise<void> => {
|
||||
if (!context.canManage.value || context.saving.value || !(await validateProfile(context))) {
|
||||
return
|
||||
}
|
||||
context.saving.value = true
|
||||
try {
|
||||
const response = await saveMediaTranscodeProfileApi(buildProfilePayload(context.form))
|
||||
if (response.code !== 0) {
|
||||
ElMessage.error(response.message || context.t('transcodeSettings.saveFailed'))
|
||||
return
|
||||
}
|
||||
applyProfileToForm(context.form, response.data)
|
||||
ElMessage.success(context.t('transcodeSettings.saved'))
|
||||
} catch {
|
||||
ElMessage.error(context.t('transcodeSettings.saveFailed'))
|
||||
} finally {
|
||||
context.saving.value = false
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,64 @@
|
||||
// Author: fruit.com.cn
|
||||
|
||||
import { computed, nextTick, onMounted, reactive, ref } from 'vue'
|
||||
import type { FormInstance } from 'element-plus'
|
||||
import type { MediaTranscodeProfile } from '@/api/admin/types'
|
||||
import { useI18n } from '@/hooks/web/useI18n'
|
||||
import { useRbac } from '@/stores/rbac'
|
||||
import { defaultProfile, defaultRung } from './transcodeProfileDefaults'
|
||||
import {
|
||||
createEnabledRules,
|
||||
createProfileRules,
|
||||
createQualityRules,
|
||||
positiveEvenRule,
|
||||
positiveIntegerRule
|
||||
} from './transcodeProfileRules'
|
||||
import { loadTranscodeProfile, saveTranscodeProfile } from './transcodeSettingsActions'
|
||||
|
||||
/** 转码设置页的响应式状态与动作装配。 */
|
||||
export function useTranscodeSettings() {
|
||||
const { t } = useI18n()
|
||||
const { can } = useRbac()
|
||||
const formRef = ref<FormInstance>()
|
||||
const loading = ref(false)
|
||||
const saving = ref(false)
|
||||
const loadError = ref('')
|
||||
const form = reactive<MediaTranscodeProfile>(defaultProfile())
|
||||
const canManage = computed(() => can('episode:upload'))
|
||||
const context = { form, formRef, loading, saving, loadError, canManage, t }
|
||||
const rules = computed(() => createProfileRules(t))
|
||||
const enabledRules = computed(() => createEnabledRules(form, t))
|
||||
const qualityRules = (index: number) => createQualityRules(form, index, t)
|
||||
|
||||
const addRung = (): void => {
|
||||
form.ladder.push(defaultRung())
|
||||
nextTick(() => formRef.value?.clearValidate())
|
||||
}
|
||||
|
||||
const deleteRung = (index: number): void => {
|
||||
form.ladder.splice(index, 1)
|
||||
nextTick(() => formRef.value?.clearValidate())
|
||||
}
|
||||
|
||||
const loadProfile = () => loadTranscodeProfile(context)
|
||||
const saveProfile = () => saveTranscodeProfile(context)
|
||||
onMounted(loadProfile)
|
||||
|
||||
return {
|
||||
form,
|
||||
formRef,
|
||||
rules,
|
||||
loading,
|
||||
saving,
|
||||
loadError,
|
||||
canManage,
|
||||
qualityRules,
|
||||
positiveEvenRule: () => positiveEvenRule(t),
|
||||
positiveIntegerRule: () => positiveIntegerRule(t),
|
||||
enabledRules,
|
||||
loadProfile,
|
||||
addRung,
|
||||
deleteRung,
|
||||
saveProfile
|
||||
}
|
||||
}
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
COUNTRY_OPTIONS,
|
||||
formatDuration,
|
||||
statusMeta,
|
||||
systemText,
|
||||
useAppUsers
|
||||
} from './composables/useAppUsers'
|
||||
|
||||
@@ -172,6 +173,9 @@ function canBeBanned(row) {
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="系统" width="130" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ systemText(row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="手机 / 邮箱" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<span class="app-user-mono">{{ row.maskedTarget || '—' }}</span>
|
||||
@@ -268,6 +272,7 @@ function canBeBanned(row) {
|
||||
<el-descriptions-item label="最后登录">{{
|
||||
detail.lastLoginAt || '—'
|
||||
}}</el-descriptions-item>
|
||||
<el-descriptions-item label="系统">{{ systemText(detail) }}</el-descriptions-item>
|
||||
<el-descriptions-item label="会员">
|
||||
{{ detail.vipLevel ? `等级 ${detail.vipLevel}` : '未开通（第二阶段）' }}
|
||||
</el-descriptions-item>
|
||||
@@ -299,6 +304,9 @@ function canBeBanned(row) {
|
||||
<el-table-column label="完成" width="70">
|
||||
<template #default="{ row }">{{ row.finished ? '是' : '否' }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="系统" width="120" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ systemText(row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="来源" width="80">
|
||||
<template #default="{ row }">{{
|
||||
SOURCE_TEXT[row.source] || row.source || '—'
|
||||
|
||||
@@ -0,0 +1,242 @@
|
||||
<!-- Author: fruit.com.cn -->
|
||||
|
||||
<script setup>
|
||||
import { onMounted, reactive, ref } from 'vue'
|
||||
import PageHeading from '@/views/components/PageHeading.vue'
|
||||
import { pageWatchHistoryApi } from '@/api/admin/appUser'
|
||||
import { formatDuration, systemText } from './composables/useAppUsers'
|
||||
|
||||
const SOURCE_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: 'HOME', label: '首页' },
|
||||
{ value: 'DETAIL', label: '详情页' },
|
||||
{ value: 'SEARCH', label: '搜索' },
|
||||
{ value: 'FAVORITE', label: '收藏' }
|
||||
]
|
||||
|
||||
const FINISHED_OPTIONS = [
|
||||
{ value: '', label: '全部' },
|
||||
{ value: true, label: '已看完' },
|
||||
{ value: false, label: '未看完' }
|
||||
]
|
||||
|
||||
const filters = reactive({
|
||||
keyword: '',
|
||||
dramaTitle: '',
|
||||
source: '',
|
||||
finished: '',
|
||||
range: null
|
||||
})
|
||||
const rows = ref([])
|
||||
const total = ref(0)
|
||||
const loading = ref(false)
|
||||
const pageIndex = ref(1)
|
||||
const pageSize = ref(10)
|
||||
|
||||
async function load() {
|
||||
loading.value = true
|
||||
try {
|
||||
const res = await pageWatchHistoryApi({
|
||||
pageIndex: pageIndex.value,
|
||||
pageSize: pageSize.value,
|
||||
keyword: filters.keyword.trim() || undefined,
|
||||
dramaTitle: filters.dramaTitle.trim() || undefined,
|
||||
source: filters.source || undefined,
|
||||
finished: filters.finished === '' ? undefined : filters.finished,
|
||||
startTime: filters.range?.[0] || undefined,
|
||||
endTime: filters.range?.[1] || undefined
|
||||
})
|
||||
rows.value = res.data?.list || []
|
||||
total.value = res.data?.total || 0
|
||||
} finally {
|
||||
loading.value = false
|
||||
}
|
||||
}
|
||||
|
||||
function search() {
|
||||
pageIndex.value = 1
|
||||
load()
|
||||
}
|
||||
|
||||
function resetFilters() {
|
||||
filters.keyword = ''
|
||||
filters.dramaTitle = ''
|
||||
filters.source = ''
|
||||
filters.finished = ''
|
||||
filters.range = null
|
||||
search()
|
||||
}
|
||||
|
||||
function handleSizeChange() {
|
||||
pageIndex.value = 1
|
||||
load()
|
||||
}
|
||||
|
||||
function sourceText(source) {
|
||||
return SOURCE_OPTIONS.find((item) => item.value === source)?.label || source || '—'
|
||||
}
|
||||
|
||||
function episodeText(row) {
|
||||
if (row.episodeNo) return `第 ${row.episodeNo} 集`
|
||||
return row.episodeId ? `分集 #${row.episodeId}` : '未关联分集'
|
||||
}
|
||||
|
||||
function progressText(row) {
|
||||
if (!row.durationMs) return '—'
|
||||
return `${formatDuration(row.positionMs)} / ${formatDuration(row.durationMs)}`
|
||||
}
|
||||
|
||||
function contentTooltip(row) {
|
||||
return `短剧 ID：${row.dramaId} / 分集 ID：${row.episodeId || '未关联'}`
|
||||
}
|
||||
|
||||
onMounted(load)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<PageHeading
|
||||
eyebrow="用户管理"
|
||||
title="观看记录"
|
||||
description="跨用户检索观看流水，核对短剧、分集、进度与来源。"
|
||||
/>
|
||||
|
||||
<section class="panel">
|
||||
<div class="console-toolbar">
|
||||
<el-input
|
||||
v-model="filters.keyword"
|
||||
class="console-keyword"
|
||||
clearable
|
||||
placeholder="uid / 昵称"
|
||||
@keyup.enter="search"
|
||||
@clear="search"
|
||||
/>
|
||||
<el-input
|
||||
v-model="filters.dramaTitle"
|
||||
class="console-keyword"
|
||||
clearable
|
||||
placeholder="短剧名称"
|
||||
@keyup.enter="search"
|
||||
@clear="search"
|
||||
/>
|
||||
<el-select
|
||||
v-model="filters.source"
|
||||
class="console-select"
|
||||
placeholder="全部来源"
|
||||
@change="search"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in SOURCE_OPTIONS"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-select
|
||||
v-model="filters.finished"
|
||||
class="console-select"
|
||||
placeholder="全部完成状态"
|
||||
@change="search"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in FINISHED_OPTIONS"
|
||||
:key="String(item.value)"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
/>
|
||||
</el-select>
|
||||
<el-date-picker
|
||||
v-model="filters.range"
|
||||
class="watch-history-range"
|
||||
type="datetimerange"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
range-separator="至"
|
||||
start-placeholder="开始时间"
|
||||
end-placeholder="结束时间"
|
||||
@change="search"
|
||||
/>
|
||||
<el-button type="primary" @click="search">查询</el-button>
|
||||
<el-button @click="resetFilters">重置</el-button>
|
||||
<span class="console-count">共 {{ total }} 条</span>
|
||||
</div>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
:data="rows"
|
||||
row-key="id"
|
||||
border
|
||||
class="drama-el-table"
|
||||
empty-text="暂无符合条件的观看记录"
|
||||
>
|
||||
<el-table-column prop="watchedAt" label="观看时间" min-width="170" show-overflow-tooltip />
|
||||
<el-table-column label="用户" min-width="180">
|
||||
<template #default="{ row }">
|
||||
<div class="app-user-meta">
|
||||
<span class="app-user-name">{{ row.nickname || '未设置昵称' }}</span>
|
||||
<span class="app-user-uid">{{ row.uid || `用户 #${row.userId || '—'}` }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="系统" width="130" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ systemText(row) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="短剧" min-width="190">
|
||||
<template #default="{ row }">
|
||||
<el-tooltip :content="contentTooltip(row)" placement="top">
|
||||
<div class="episode-table-title">
|
||||
<b>{{ row.dramaTitle || `短剧 #${row.dramaId}` }}</b>
|
||||
<el-tag v-if="row.dramaPublished === false" type="info" size="small" effect="plain"
|
||||
>已下线</el-tag
|
||||
>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="分集" min-width="180" show-overflow-tooltip>
|
||||
<template #default="{ row }">
|
||||
<div class="episode-table-title">
|
||||
<b>{{ episodeText(row) }}</b>
|
||||
<small v-if="row.episodeTitle">{{ row.episodeTitle }}</small>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="进度" min-width="120">
|
||||
<template #default="{ row }">
|
||||
<span class="app-user-mono">{{ progressText(row) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="完成" width="92">
|
||||
<template #default="{ row }">
|
||||
<el-tag :type="row.finished ? 'success' : 'info'" effect="light">
|
||||
{{ row.finished ? '已看完' : '未看完' }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="来源" width="96">
|
||||
<template #default="{ row }">{{ sourceText(row.source) }}</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deviceId" label="设备" min-width="150" show-overflow-tooltip>
|
||||
<template #default="{ row }">{{ row.deviceId || '—' }}</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pageIndex"
|
||||
v-model:page-size="pageSize"
|
||||
:page-sizes="[10, 20, 50]"
|
||||
:total="total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
background
|
||||
@current-change="load"
|
||||
@size-change="handleSizeChange"
|
||||
/>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.watch-history-range {
|
||||
width: 360px;
|
||||
max-width: 100%;
|
||||
}
|
||||
</style>
|
||||
@@ -34,6 +34,16 @@ export function statusMeta(status) {
|
||||
)
|
||||
}
|
||||
|
||||
const PLATFORM_TEXT = { ANDROID: 'Android', IOS: 'iOS', WEB: 'Web' }
|
||||
|
||||
/** 登录会话上的系统，例如 Android 16。没有记录时显示横线。 */
|
||||
export function systemText(row) {
|
||||
const name = PLATFORM_TEXT[row?.platform] || row?.platform || ''
|
||||
const version = row?.osVersion || ''
|
||||
const text = `${name} ${version}`.trim()
|
||||
return text || '—'
|
||||
}
|
||||
|
||||
/** 毫秒转 mm:ss，观看流水里的进度用 */
|
||||
export function formatDuration(ms) {
|
||||
const total = Math.max(0, Math.floor((ms || 0) / 1000))
|
||||
|
||||
Vendored
+1
@@ -48,6 +48,7 @@ declare global {
|
||||
|
||||
declare interface IResponse<T = any> {
|
||||
code: number
|
||||
message?: string
|
||||
data: T extends any ? T : T & any
|
||||
}
|
||||
|
||||
|
||||
+4
-1
@@ -139,7 +139,10 @@ export default ({ command, mode }: ConfigEnv): UserConfig => {
|
||||
hmr: {
|
||||
overlay: false
|
||||
},
|
||||
host: '0.0.0.0'
|
||||
// 必须同时监听 IPv6：Windows 上 localhost 先解析成 ::1，
|
||||
// 只绑 0.0.0.0 会让每次新建连接都等 IPv6 超时（约 2s）再回退到 IPv4，
|
||||
// 表现为页面白屏很久。'::' 是双栈，IPv4 局域网访问同样可用。
|
||||
host: '::'
|
||||
},
|
||||
optimizeDeps: {
|
||||
include: [
|
||||
|
||||
Reference in new issue
Block a user