4509323ba8d4d756daf6ba316021a488238cb5bd
问题 1(创作者登录后还能看到「工作台」)根因:tagsView.delAllVisitedViews() 会「保留 affix 标签」, 它判断的是 userInfo 是否还在,而 userStore.reset() 是先清标签、后清 userInfo —— 顺序反了, 写死路由表里 affix 的「工作台」标签就跨账号活了下来。整页刷新时不复现,所以只有"退出后不刷新直接登录" 才看得到(PM 复现不到就是这个原因)。修法与加固: - userStore.reset():先清账号信息再清标签,并调 permissionStore.clearRoutes() 一并清菜单状态 - permissionStore 增加 routersOwner(当前菜单属于哪个账号)+ clearRoutes();守卫发现账号变了会先 resetRouter() 摘掉上一个账号动态加的路由,再重建(避免两套菜单并存、也避免创作者还能直接进 /dashboard) - 守卫里"菜单拉取失败沿用上次缓存"这条:换账号后不再沿用(宁可先给空菜单) 问题 2(创作者入驻/审核):真实 UI 全流程(新增→审核→开通→凭据→登录落地)本身能跑通, 但复现出「审核」按钮对**所有状态**都显示 —— 后端状态机是 通过可从 pending/rejected/frozen 发起、 驳回只允许 pending、冻结只允许 approved,对「已通过」的行点审核提交必然 200003 红错。修法: - 已通过的行不再显示「审核」(保留 冻结/重置密码/开通账号) - 审核弹窗里的「驳回」只对 pending 显示,其余状态只能通过 顺带修:views/common/DashboardView 取列表时 res 可能为 undefined(拦截器把业务错误吞成 undefined), 账号切换瞬间会抛 Cannot read properties of undefined,已加可选链。
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.vuesrc/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.jssrc/styles/business/
路由写在 src/router/index.ts 的 asyncRouterMap(服务端动态路由不可用时的兜底)。
Languages
Vue
56.3%
TypeScript
29.9%
CSS
6.9%
JavaScript
6.5%
HTML
0.3%