README.md


美乐爱觉项目

测试环境网站
https://oa-dev.onwall.cn/f/mlaj

功能更新记录


教师端新增作业管理页面：路径 /teacher/tasks，标题“作业管理”。


列表展示：作业名称、开始时间、截止时间。
当前数据来源为Mock，后续可替换为真实接口数据。
教师端新增作业主页：路径 /teacher/tasks/:id，标题“作业主页”。
头部：作业名称、介绍文案、细项信息（周期、频次、时间段、附件类型）。
统计：出勤率与任务完成率（参考 myClassPage.vue 统计样式，数据Mock）。
日历：使用 van-calendar 单选模式，选择日期后展示当日学生完成情况。
学生完成情况：参考图片2样式，勾选代表已完成，未勾选代表未完成（数据Mock）。
教师端新增学员作业记录页面：路径 /teacher/student-record，标题“学员作业记录”。
在作业主页的学生列表点击卡片可跳转至该页面（当前版本为固定示例页面）。
列表展示：作业帖子、图片/视频/音频、点赞与点评弹窗（与 studentPage.vue 的作业记录样式一致）。
接口参数固定：user_id=817017，group_id=816653（后续可替换为动态参数）。
学习详情页标签指示条修复：/src/views/profile/StudyCoursePage.vue

现象：首次进入且存在“打卡互动”时，底部绿色指示条定位错误。
修复：新增标签容器 ref 与 ResizeObserver，按栏目数量对容器进行等分，指示条宽度与位移按分段和索引计算，异步加载第三个栏目时不再错位。
登录逻辑调整：仅在登录页微信图标点击时触发授权
变更文件：/src/views/auth/LoginPage.vue、/src/router/guards.js、/src/router/index.js

路由守卫：移除自动微信授权检查，新增 startWxAuth 供手动触发。
登录页：微信图标绑定点击事件，非微信环境提示“请在微信内打开”。
使用方式：进入登录页，点击微信图标进行授权登录。
课程详情页动态 Open Graph 元标签
行为：进入课程详情页时，在 <head> 中插入 4 个 meta 标签：og:title（课程 title）、og:description（课程 subtitle）、og:image（课程 cover）、og:url（当前页面 URL）；这些 meta 必须插在 <title> 标签的前面；离开页面时移除。
CDN 规则：若图片域名为 cdn.ipadbiz.cn，自动追加 ?imageMogr2/thumbnail/200x/strip/quality/70。
位置：/src/views/courses/CourseDetailPage.vue，在 onMounted 插入，onUnmounted 清理。
函数：build_og_image_url(src)、set_og_meta(payload)、remove_og_meta()。
课程详情页咨询弹窗（Mock）
入口：详情页顶部快捷操作中的“咨询”按钮。
展示：底部弹出层，仅底部关闭按钮；展示联系人列表，可点击名称或号码直接拨打（tel:）。
联系人：支持多个联系人，展示姓名与号码；电话号码使用绿色高亮；联系人与号码字体大小一致。
位置：/src/views/courses/CourseDetailPage.vue，“咨询弹窗”模板与交互逻辑（open_consult_dialog、close_consult_dialog、consult_contacts、call_phone(phone)）。
购买流程环境校验
行为：仅对非免费课程在详情页点击“购买”时进行校验；生产环境下必须为微信内置浏览器（wxInfo().isWeiXin）。
免费课程：跳过微信环境校验，允许直接进入结算流程。
非微信环境（付费课）：提示“请在微信内打开进行购买”，不进入结算。
位置：/src/views/courses/CourseDetailPage.vue 的 handlePurchase 中，使用 wxInfo 进行环境判断。
微信授权自动触发（微信环境内）
行为：在微信内置浏览器环境下点击“购买”时，若检测到未完成微信授权（openid_has=false），系统将自动发起一次微信授权流程并中止本次购买；授权完成后再次点击可进入结算。
开发环境：不触发微信授权流程（保留现有调试行为）。
位置：/src/views/courses/CourseDetailPage.vue 的 handlePurchase 中，调用 getAuthInfoAPI() 探测并使用 startWxAuth() 触发授权。
401拦截策略优化（公开页面不再跳登录）
行为：接口返回 code=401 时，不再对公开页面（如课程详情 /courses/:id）进行登录重定向；仅当当前路由确实需要登录权限时才跳转至登录页。
原理：响应拦截器调用路由守卫 checkAuth 判断当前路由是否为受限页面，受限则清理登录信息并附带 redirect 重定向至登录页；公开页面保持当前页，由业务自行处理401。
位置：/src/utils/axios.js，在响应拦截器中按需处理重定向。
搜索栏回车搜索兼容性提升
行为：将输入框类型改为 search，并可选开启 form @submit.prevent 机制以提升 iOS 设备软键盘“搜索”键触发稳定性；同时保留 @keyup.enter 回车触发搜索。
路由行为：


课程页（isCoursePage=true）：回车或搜索键触发后跳转至 /courses-list 并携带 keyword 参数。
列表页：仅更新当前路由的查询参数 keyword。


位置：/src/components/ui/SearchBar.vue，新增 useFormSubmit 可选参数（默认开启）。
课程列表页搜索触发修复
现象：进入列表页后，输入关键字并更新为 /courses-list?keyword=xxx 时未触发搜索。
原因：父组件 handleSearch 对“相同关键字”进行了拦截，导致路由参数变化不执行请求。
修复：移除拦截逻辑；无论关键字是否变化均触发搜索（防抖控制频率）。
位置：/src/views/courses/CourseListPage.vue 的 handleSearch。
分享海报弹窗（通用组件）
入口：课程详情页底部操作栏“分享”按钮。
组件：/src/components/ui/SharePoster.vue（支持复用），v-model:show 控制显隐，course 传入课程信息，qr_url 可指定二维码内容地址（默认取当前页面 URL）。
布局：上部封面图；下部信息区左侧二维码，右侧课程标题、副标题、精简介绍与日期范围。
样式：优先使用 TailwindCSS 布局；组件内部使用 Less 做层级嵌套的样式补充。
图片规则：当封面图域名为 cdn.ipadbiz.cn 时，自动追加 ?imageMogr2/thumbnail/200x/strip/quality/70 压缩参数。
接入位置：/src/views/courses/CourseDetailPage.vue，导入并渲染 <SharePoster v-model:show="show_share_poster" :course="course" />。
Canvas 合成：弹窗打开时使用 Canvas 直接合成海报（封面图、二维码、文案），生成 dataURL 并以 <img> 展示，用户可直接长按图片保存到手机（无需额外按钮）。


依赖：pnpm add qrcode（在 Canvas 内本地生成二维码，避免跨域图片导致画布污染）。
跨域：通过 crossorigin="anonymous" 加载封面，并追加时间戳防缓存；若封面跨域不允许，则显示降级卡片，仍可长按截图保存。
文案：使用中文字体并自动换行限制行数，末行超出追加省略号。