Vicky f037d243cd feat(web): 08 后台四个页面落地(内容治理 / 订单与权益 / 创作者审核 / 数据看板)
为什么:08 运营后台的接口在前几轮已经实现,但运营在界面上点不到——
评论审核、举报工单、敏感词维护、订单补发/退款、权益回收、金币补发、对账、
创作者入驻与内容提交审核、运营大盘,都只能靠 curl。本轮把这四个页面补齐,
08 才算真正闭环。

- 内容治理:评论审核(通过/驳回/删除)、举报工单处理(可联动封禁)、敏感词库增删改查
- 订单与权益:订单检索与流水、补发、退款、权益检索/人工补发/回收、金币流水与人工补币、对账运行与历史
- 创作者审核:入驻审核(通过/驳回原因码/冻结)+ 资质抽屉;内容提交审核(通过/驳回)
- 数据看板:overview 五组指标 + transcode 队列与失败任务,只读;取不到的指标显示「暂无数据源」而不是 0
- 新增 console.css(工具条/抽屉/看板卡片,含深色模式),四个页面共用;时间列统一 yyyy-MM-dd HH:mm:ss
- 按钮按权限点显隐(没有 *:update / *:audit 的角色看到的是只读态),表格列与后端字段一一对应
2026-10-15 13:28:46 +08:00
2026-10-13 13:58:05 +08:00
2026-10-13 13:58:05 +08:00
2026-10-13 13:58:05 +08:00
2026-10-13 13:58:05 +08:00
2026-10-13 13:58:05 +08:00
2026-10-13 13:58:05 +08:00
2026-10-13 13:58:05 +08:00
2026-10-13 13:58:05 +08:00
2026-10-13 13:58:05 +08:00
2026-10-13 13:58:05 +08:00
2026-10-13 13:58:05 +08:00
2026-10-13 13:58:05 +08:00

FruitShorts 内容管理后台

短剧内容管理后台。界面与工程结构基于 vue-element-plus-admin,在其上接入了短剧、剧集、App 用户、角色、菜单和管理员页面,数据全部来自 Java 后端服务。

界面名称由 VITE_APP_TITLE 控制(.env.base 及 dev / test / pro 三个环境文件),当前值为 FruitShorts,同时作用于浏览器标题、侧边栏品牌与登录页。

后端工程在同级目录 ../FruitServer,接口与启动方式见 ../FruitServer/README.md。

环境

  • Node.js 18 或更高版本
  • pnpm 8 或更高版本
  • 已启动的后端服务(默认 http://127.0.0.1:8080)

开始

先启动后端(见 ../FruitServer/README.md),再启动前端:

pnpm install
pnpm dev

开发服务地址是 http://localhost:3005 。vite.config.mts 已把 /admin 代理到 http://127.0.0.1:8080、/files 代理到后端本地媒资目录,因此前端不需要额外配置跨域。

演示账号(密码均为 admin123,由后端 sql/data.sql 初始化):

账号 角色 说明
admin 超级管理员 拥有全部菜单与操作权限
content.editor01 内容运营 只能看到内容管理,且无审核权限
content.reviewer01 审核专员 可审核发布
data.analyst01 数据分析师 只读内容数据

用不同账号登录可以直观看到菜单与按钮随权限变化。

命令

命令 作用
pnpm dev 启动开发服务
pnpm build:dev 构建开发包
pnpm build:test 构建测试包
pnpm build:pro 构建生产包
pnpm serve:pro 预览生产包

页面

登录后菜单包括:

  • 工作台:短剧总数、累计播放量、待审核数、已上线数与最近更新
  • 内容管理:短剧管理(含封面分片上传、提交审核/通过/驳回/上线/下线)、剧集管理(含视频分片上传、自动读取时长、播放顺序调整)、轮播图管理(含图片上传、跳转配置、排序与上下线)、类型管理(短剧类型的增删改)
  • 用户管理 → App 用户:按 uid / 昵称 / 手机号 / 邮箱检索 C 端用户,查看资料、观看流水与处置记录,支持封禁 / 限制 / 解封(处置后该用户全部会话立即失效)
  • 后台管理:角色权限配置、管理员用户列表、菜单管理、角色分类、系统设置
  • 后台管理 → 操作日志:查看后台写操作的请求与响应、操作人、耗时

左侧菜单由后端 GET /admin/auth/menus 下发,属于服务端动态路由;在菜单管理页改动菜单后,重新登录即可看到新的菜单结构。

目录

框架原有代码保持 vue-element-plus-admin 的结构。本项目新增的业务代码:

  • src/api/admin/:管理端接口封装(短剧、剧集、角色、菜单、管理员、配置)
  • src/views/common/DashboardView.vue
  • src/views/contentManagement/
  • src/views/permission/、src/views/permission/composables/
  • src/views/userManagement/、src/views/userManagement/composables/
  • src/views/systemManagement/
  • src/stores/rbac.js:基于登录下发权限码的按钮级权限判断
  • src/utils/status.js、src/utils/format.js
  • src/styles/business/

路由写在 src/router/index.ts 的 asyncRouterMap(服务端动态路由不可用时的兜底)。

S
Description
No description provided
Readme
3.7 MiB
0 Stars 1 Watchers 0 Forks
Languages
Vue 56.3%
TypeScript 29.9%
CSS 6.9%
JavaScript 6.5%
HTML 0.3%