承接第四～第七篇 Bug 复盘。本 PC Demo仅实现管理员后台模块，不实现教师端、学员 C 端业务页面 。 该网页产物完全对接 V2.0 底层安全重构成果，复用整套
education_*云函数，业务计算全部下沉云端；同时提供 Mock 模拟开关，支持离线演示。
一、PC‑Demo 定位与 PRD 约束
- 本质：浏览器网页版管理员管理后台，作为小程序 Admin 管理员后台的补充操作入口；
- 底层强绑定 V2.0 全系统安全重构产物 ：网页端完全复用云函数侧
educationCloudUtils.js全套能力，包括 HMAC‑SHA256 签名 Token 会话、Token 黑名单、加盐密码校验、权限码鉴权、数据脱敏、接口限流、教师账号数据隔离，网页不重新实现安全逻辑； - 后端业务 100% 复用已有的
education_*云函数，网页仅负责 UI 渲染、组装请求参数，不写任何业务计算代码； - 双运行模式：
IS_MOCK=true：离线 Mock 演示模式，读取本地 Mock 仓库模拟数据，无需连接微信云环境。可用于售前客户演示、本地调试、简历项目展示；Mock 仓库的数据结构完整对齐小程序，交互、弹窗、筛选逻辑与小程序保持一致。IS_MOCK=false：真实业务模式，网页通过网关转发调用云函数，读写真实业务数据库；网页、小程序 Admin 后台数据双向实时互通。
- 边界约束：仅实现管理员后台页面；教师账号可以登录该网页，后端自动做数据隔离，仅可查看自己授课相关排班预约；教师端、学员端业务仍然只能使用小程序访问，PC Demo 不做这两类角色的业务页面。
二、技术架构要点
- 前端：Vue 网页项目，实现全套教育模块管理员后台页面；
- API 层：一对一封装全部 education 系列云函数；请求参数、返回字段和小程序 callFunction 调用格式 1:1 对齐；请求自动携带新版签名 Token 鉴权；
- 鉴权权限：复刻小程序
utils/auth.js权限判断规则；前端控制按钮、弹窗显隐；权限校验、数据脱敏全部交由云函数enforceEducationAuth鉴权中间件完成； - 审计日志：PC 网页所有增删改、核销、代预约操作，请求只透传 token；云函数内部解析操作者身份写入操作日志，不区分请求来自小程序还是 PC 网页；
- Mock 层：内置完整 Mock 数据仓库；Mock 仓库必须跟随云函数数据表同步迭代，补齐所有 V2.0 新增业务字段，防止离线模式渲染异常。
三、PC‑Demo 完整页面清单
- 登录页（对接
education_account_login云函数，支持新旧密码自动无感升级迁移）
- 首页数据看板
- 课程管理：课程增删改查、课程分类管理、课程回收站
- 教师档案管理：教师信息维护、教师排班管理、学员评价回复
- 预约管理
- 日视图 + 冻结轴双向同步滚动周视图双模式
- 课程标签分组渲染、开课人数阈值预警
- 排班状态自动计算、管理员手动标记状态、清除手动标记恢复自动判定
- 私教、团课差异化时段冲突校验
- 多条件组合筛选：场馆、课程、教师、满员状态、课程状态筛选
- 代预约全套弹窗：学员模糊搜索、课时套餐展示、预约冲突校验、多选批量代预约、私教场馆选择
- 预约学员详情弹窗，支持直接取消预约
- 排班冲突红点标识
- 签到核销、撤销核销、生成签到二维码
- 核销记录追溯页面（V2.0 新增）
- 学员档案管理、学员黑名单管理
- 学员课时流水详情页
- 课时套餐模块：套餐创建、上下架、学员套餐审核
- 排课模块：单条排班编辑、批量生成排班、排班冲突校验
- 操作日志管理页
- 系统设置：场馆管理、课程标签配置、系统通知、角色子账号权限管理、登录日志
四、开发阶段踩坑复盘（现象‑根因‑修复方案‑开发启示）
坑 1：PC 网页端 Mock 模式和真实云函数业务逻辑不一致
现象：打开 Mock 演示模式做操作，计算结果、返回数据和真实云函数返回有差异，演示效果失真。
根因：早期 Mock 直接复制一份业务逻辑写在前端，网页 Mock 和云函数两套独立实现，修改云函数业务不会同步更新 Mock 代码。
修复方案：Mock 层尽可能复用和云函数一致的工具函数；复杂业务场景 Mock 只接管数据源，业务计算逻辑直接复用公共工具，禁止在前端重写业务。
开发启示：演示模式不能复制业务逻辑，否则后期维护会出现两套逻辑分裂，Bug 只在其中一端出现。
坑 2：PC 网页执行业务操作，操作审计日志没有正常写入
现象：在 PC 网页做代预约、修改排班、撤销核销，后台操作日志列表看不到这条操作记录；小程序管理员操作日志正常生成。
根因 ：网页端调用云函数时没有正确透传操作者身份信息，云函数addLog拿不到 operatorId、operatorName，日志没有写入。
修复方案 ：网页请求统一携带 token，云函数层通过 token 解析操作者身份，不区分请求来自小程序还是 PC 网页；日志写入逻辑统一在云函数内部完成。
开发启示：多客户端接入同一套后端，身份、审计、鉴权全部收敛在云函数，客户端不要自己生成操作日志。
坑 3：网页端权限判断只做 UI 隐藏，后端鉴权没生效
现象：网页前端隐藏无权限按钮，但是手动构造 http 请求，依然可以调用无权限接口。
根因 ：网页端只在 UI 层面控制按钮显隐，忘记后端enforceEducationAuth鉴权中间件对网页请求同样生效。
修复方案：PC 网页的所有业务请求，和小程序请求走完全一样的鉴权流程；权限码校验、数据脱敏全部由云函数层完成。前端仅做界面展示控制。
开发启示：不管请求来自小程序还是浏览器网页，后端鉴权逻辑不能特殊对待任何客户端。
坑 4：网页端 token 会话过期处理逻辑缺失
现象：PC 网页 token 过期之后继续操作，接口返回 401，但页面不会自动跳转到登录页，页面无提示。
根因：小程序端已经写好 401 鉴权失败跳转逻辑，PC 网页 axios 响应拦截器没有做同样的会话过期捕获。
修复方案：网页 axios 拦截器统一捕获 401 未授权返回码，清除本地 token，弹窗提示会话失效，跳转登录页面。
开发启示：多客户端，会话失效的处理逻辑每个客户端都要单独实现，后端鉴权逻辑保持一套。
坑 5：PC 端 Mock 模式缺失 V2.0 新增业务字段
现象 ：切换IS_MOCK=true离线演示，预约周视图、课时流水页面渲染异常；缺少最低开课人数、手动状态标记、课时流水记录等 V2.0 迭代新增字段；切换真实云函数模式全部正常。
根因：Mock 模拟仓库的数据结构停留在 V1.0 版本，没有跟随云函数数据表同步升级，缺失 V2.0 新增数据库字段。
修复方案：Mock 仓库跟随云函数数据表结构同步迭代，云函数每新增 / 修改字段，Mock 模拟数据同步补齐对应字段。
开发启示：Mock 仓库不是一次性写完就不再维护，要跟随业务迭代同步更新，否则离线演示模式会出现页面渲染报错。
五、使用场景总结
- 真实业务场景：
IS_MOCK=false，网页直接操作真实业务库，管理员可以电脑浏览器完成全部后台管理操作，数据和小程序实时双向同步；教师账号登录自动过滤仅本人授课的数据。 - 离线演示场景：
IS_MOCK=true，本地 Mock 仓库运行。适用售前演示、本地调试、简历项目演示，不需要部署微信云开发环境。 - 限制：本 Demo 只提供管理员后台；教师、学员角色业务操作依旧只能通过小程序访问，网页端不实现这两类角色业务页面。
本文属于《全栈项目实战手记｜艺培场馆课时预约小程序》专栏
连载目录回顾
第一篇：艺培场馆课时预约小程序 B 端管理后台完整产品设计思路
第二篇：艺培场馆课时预约小程序 C 端学员端完整产品设计思路
第三篇：艺培场馆课时预约小程序后台、教师端、学员端实拍与业务流程图汇总
第四篇：艺培场馆课时预约小程序后台开发踩坑复盘（课程、学员、权限配置类 Bug）
第五篇：艺培场馆课时预约小程序用户端 & 后台联动踩坑上篇（预约、课时、同步问题）
第六篇：艺培场馆课时预约小程序用户端 & 后台联动踩坑下篇（排课核销、定时任务、页面交互异常）
第七篇：艺培场馆课时预约小程序 V2.0 底层安全、交互、分包全量迭代复盘
第八篇：艺培场馆课时预约小程序 PC 管理端 Demo 完整开发成果展示
第九篇：艺培场馆课时预约小程序全项目开发历程完整复盘总结