refactor(admin): 拆分剧集转码产物面板组件
This commit is contained in:
1 parent
52b10d3040
commit
e2ca3bfa81
8 files changed
+860
-608
No files matched your search
@@ -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`。
|
||||
@@ -51,3 +51,52 @@ 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 文案未改变。
|
||||
Reference in new issue
Block a user