# 网上培训课程 — 前端技术方案

> 依据：`网上培训课程功能需求.md`、`网上培训课程技术方案.md`；布局对齐 `techService/practicalTraining/index.vue`（双 `el-card`、只读无写操作）；字段 **小驼峰**。

---

## 1. 页面与路由

| 项 | 说明 |
| --- | --- |
| **Vue 路径** | `ruoyi-ui/src/views/techService/onlineTrainingCourse/index.vue` |
| **组件名** | `OnlineTrainingCourse` |
| **菜单配置** | 组件路径：`techService/onlineTrainingCourse/index`（「科技平台与服务」目录下，手工配置） |
| **权限前缀** | `techService:onlineTrainingCourse:list`、`techService:onlineTrainingCourse:query` |

---

## 2. API 模块

| 项 | 说明 |
| --- | --- |
| **文件** | `ruoyi-ui/src/api/techService/onlineTrainingCourse.js` |
| **Base** | `/techService/onlineTrainingCourse` |

| 方法 | HTTP | 说明 |
| --- | --- | --- |
| `listOnlineTrainingCourse` | GET | `/list`，Query：`pageNum`、`pageSize`、`courseTitle`、`courseTopic` |
| `getOnlineTrainingCourse` | GET | `/{id}` 详情 |
| `listInformationCategoryChildren` | GET | `/category/informationCategory/children?parentCode=005&categoryType=8` 课程主题下拉（`code`/`name`） |
| `listOnlineTrainingCourseTopics` | GET | `/courseTopics` 可选；返回已发布课程去重编码 |

**本期无** POST / PUT / DELETE。

---

## 3. 页面结构

1. **筛选区**：课程主题（下拉，`value=code`、`label=name`，数据来自资讯类别 `children`）；课程标题（模糊）；搜索、重置。**无**增删改发布下架。  
2. **列表区**：课程标题、课程简介（前 50 字 + 「…」）、课程主题、视频文件（`videoFileName` 或「已上传」）、操作（仅 **查看**）。默认 `pageSize=20`。  
3. **空状态**：无筛选时「暂无已发布的培训课程」；有筛选无结果时「未找到符合条件的培训课程」。  
4. **查看弹窗**：`el-descriptions` 只读展示课程标题、主题、简介（保留换行）、封面（`image-preview` 或「—」）、视频（`<video controls>` + 文件名；加载失败提示）、发布时间、创建时间、最近更新时间；底部仅 **关闭**。

---

## 4. 业务规则（前端）

| 规则 | 实现 |
| --- | --- |
| 只读 | 无写操作入口；维护在「畜牧科技资源管理 → 视频课程库」 |
| 课程标题筛选 | trim 后非空才传 `courseTitle` |
| 课程主题筛选 | 精确匹配；空则不过滤 |
| 列表简介 | `introSummary`，最长 50 字 |
| 详情失效 | 接口 `ServiceException` 由 `request` 统一提示（如「该课程已下线或不存在」） |
| 视频播放失败 | `video` `@error` → `msgVideoPlayFail` |
| 无视频地址 | 展示 `msgVideoUnavailable` |

---

## 5. 国际化

| 项 | 说明 |
| --- | --- |
| **语言包** | `techService.onlineTrainingCourse`（`lang/zh/techService.js`、`lang/bo/techService.js`） |
| **Mixin** | `techServiceLocaleMixin`，`tsNs = 'onlineTrainingCourse'`，方法 `tsT` / `tsCommon` |

---

## 6. 联调说明

1. 部署 `BizOnlineTrainingCourseController` 及菜单权限（`list`、`query`）。  
2. 菜单组件填 `techService/onlineTrainingCourse/index`。  
3. 验证：主题精确筛选、标题模糊、分页 20、列表摘要、详情视频/封面、已下架 id 报错、双语切换。

---

## 7. 文件清单

| 类型 | 路径 |
| --- | --- |
| 页面 | `ruoyi-ui/src/views/techService/onlineTrainingCourse/index.vue` |
| API | `ruoyi-ui/src/api/techService/onlineTrainingCourse.js` |
| i18n | `ruoyi-ui/src/lang/zh/techService.js`、`lang/bo/techService.js`（`onlineTrainingCourse` 节点） |

---

## 8. 修订记录

| 版本 | 说明 |
| --- | --- |
| 1.0 | 初版：只读列表+详情；`courseTopics` 下拉；简介摘要；视频播放与空态提示；汉藏 i18n |