新手教程

基础信息

项	说明
菜单路径	/operationsManagement/contentManagement/instruction
路由名称	list
页面组件	src/views/operationsManagement/contentManagement/instruction/index.vue
接口模块	组件内 this.$api.post(...) / this.$api.get(...) 直接调用
Store	无
页面定位	以「封面 + 富文本」推文（articleType=1）形式维护「新手教程」类内容的发布、编辑与删除

页面功能

页面结构与「操作指引/常见问题」同类，但弹窗表单多一项「封面」，列表展示序号、推文名称、修改时间，支持分页。

• 列表查询：created 调用 article/queryPage（articleType: '1'）。
• 新增：弹窗（modifyApi = 'article/add'），填写推文名称 + 上传封面 + 富文本内容提交。新增时先 resetForm 清空（含图片组件回显）。
• 编辑：回填 articleName、content、picUrl，提交走 article/edit 带 id。
• 删除：二次确认后 article/delete?id=。
• 表单校验：推文名称、封面、内容均必填；封面上传成功后通过 getImgCommodityUrl 回填 form.picUrl。
• 重置：resetForm 同步清空上传组件 imageUrl/imgUrl。

与前两者的差异：表单含封面图（picUrl）字段；列表容器标题文案同模板为「操作指引列表」。

使用组件

组件	路径	用途
Container	@/components/container	页面容器
SearchContainer	@/components/SearchTableContainer	顶部操作区（新增按钮）
TableContainer	@/components/SearchTableContainer	表格+分页容器
tinymce-editor	@/components/tinymceEditor/tinymceEditor	富文本编辑器
uploadingImg	@/components/uploadingImg/uploadingImg	封面图上传

使用 Store

无。

调用接口

所有接口实际请求统一带 /api 前缀（下表为业务路径简写）。

接口 URL	方法	用途
article/queryPage	POST	分页查询新手教程列表（articleType=1）
article/add	POST	新增推文
article/edit	POST	编辑推文
article/delete	GET	删除推文（id 参数）

修改记录

修改人	修改时间	修改内容
zhouw	2026-07-03	初始化页面
zhouw	2026-07-09	编写页面内容