DEV-MERGE-LEGACY-PC-FRONTEND-2026

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。