# PC 端前端（管理/运营）

> Vue3 管理端，承载**教务域重写** + **教学 admin 复用**两块页面。统一走 nginx 入口 + 统一 Go 后端 SSO。本文档描述工程结构约定；接口契约与角色权限见 `../unified/`、`../academic/05-architecture/`、`../teaching/05-architecture/`。

## 定位

单一 Vue3 项目（`frontend-pc`），面向登录角色中的 **超管/教务/财务/老师（管理侧）** 等 PC 端角色（**市场角色登录入口暂禁用**——不建市场端入口/路由，后续启用时再单独拍板）。学生/家长日常操作走 `../frontend-mobile`。

## 技术栈（与规划对齐）

| 关注点 | 选型 | 依据 |
|---|---|---|
| 框架 | Vue 3 + TypeScript + Vite | 与教学 admin 现有栈一致，复用成本低 |
| UI | Element Plus | 管理端组件库 |
| 状态 | Pinia | 登录态 / 角色 / institution/campus 作用域 |
| 路由 | Vue Router（按端 + 角色权限码守卫） | 7 角色，权限码来自统一 RBAC |
| 接口封装 | 统一 `{code, data, message}` 信封 | 以教学 code 体系为基线（对齐清单 §2） |
| 鉴权 | SSO（OIDC）token；菜单/按钮按权限码显隐 | 统一 identity 签发 |

## 目录结构约定

```
frontend-pc/
├── README.md            ← 本文件
└── src/
    ├── views/           # 页面：按域分子目录（academic / teaching / org / system）
    ├── components/      # 复用组件（表格/表单/作用域选择器 institution·campus）
    ├── api/             # 接口封装：统一信封 + 错误码处理；按域分子目录
    ├── router/          # 路由：按端组织 + 角色/权限码守卫
    └── store/           # Pinia：login（token/角色）、scope（institution/campus）
```

## 结构铁律

1. **作用域（institution/campus）是全局状态**：所有业务页面查询必须带作用域，由 store 统一注入，禁止页面各自拼 `schoolid/campusid`（对齐清单 §3：消灭控制器隐式参数）。
2. **权限码驱动显隐**：菜单/按钮/路由守卫读统一 RBAC 权限码，不写 `role == N` 硬编码（对齐清单 §3 超管判据收敛）。
3. **教务域页面为新写**（旧 DataTables/视图 jQuery 全部重写）；**教学 admin 页面按现有 Vue3 逐步迁入**，契约不变。
4. 接口调用只经 `src/api/`，禁止页面里散写 fetch/axios。

## 可复用资产（源自教务 Go 重构实战）

- **列表页规范**：`useListPage<T>` + `ListPage.vue`；年级 `<GradeBadge>`（数字=年级 id + 学段色系）、科目 `<SubjectBadge>`（首字简称 + 独立色系）——色板纯数据零 Vue 依赖，新增列表页一律复用。
- **locale 双注入**：Element Plus 默认英文，需 `app.use(ElementPlus,{locale:zhCn})`（命令式 ElMessageBox/Notification）+ `<el-config-provider :locale>`（声明式）双注入，单用其一必有遗漏；locale 引 `element-plus/es/locale/lang/zh-cn`。
- **响应封装**：统一「HTTP 恒 200 + body `code`」，判成功读 `code===200`、错误文案读 `data.msg`，不靠拦截器 reject。
- 建议采用 **pnpm monorepo + `shared` 包**（types/http 分层），与 `../frontend-mobile` 共用；按包拷贝 + 改 API base 即可移植（详见 `../unified/00-planning/experience-impact-analysis.md` §4）。

## 与文档目录的关系

- 本目录**只放前端代码**；接口契约、端点清单、错误码见 `../academic/05-architecture/` 与 `../teaching/05-architecture/`；前端策略（重写 vs 复用）见 `../unified/00-planning/cross-system-reconciliation.md` §5。