# FruitShorts 内容管理后台

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

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

后端工程在同级目录 `../FruitServer`，接口与启动方式见 [../FruitServer/README.md](../FruitServer/README.md)。

## 环境

- Node.js 18 或更高版本
- pnpm 8 或更高版本
- 已启动的后端服务（默认 `http://127.0.0.1:8080`）

## 开始

先启动后端（见 `../FruitServer/README.md`），再启动前端：

```sh
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`（服务端动态路由不可用时的兜底）。