美乐爱觉项目
测试环境网站 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"加载封面，并追加时间戳防缓存；若封面跨域不允许，则显示降级卡片，仍可长按截图保存。 - 文案：使用中文字体并自动换行限制行数，末行超出追加省略号。
- 依赖：
- 打卡弹窗统一为通用组件 CheckInDialog
- 目的：统一 CourseDetailPage、StudyCoursePage、StudyDetailPage 三处页面的打卡弹窗与交互，避免重复逻辑。
- 组件：
/src/components/ui/CheckInDialog.vue，v-model:show控制显隐；支持外部传入任务列表。 - Props：
-
items_today：今日打卡任务数组（外部传入）。 -
items_history：历史打卡任务数组（外部传入）。
-
- 数据结构：每项需包含
id、title(name)、task_type（checkin/upload）、is_gray。 - 使用位置：
/src/views/courses/CourseDetailPage.vue/src/views/profile/StudyCoursePage.vue/src/views/study/StudyDetailPage.vue
- 清理：上述页面已移除旧弹窗的冗余状态与方法（如
default_list、showTaskList、showTimeoutTaskList、selectedCheckIn等），统一由组件内部处理。 - 打卡列表组件 CheckInList（复用）
- 目的：抽取首页与弹窗内重复的“打卡类型列表 + 提交按钮”UI与交互逻辑，提升复用性与维护性。
- 位置：
/src/components/ui/CheckInList.vue，样式补充：/src/components/ui/CheckInList.less（使用 Less 层级嵌套）。 - Props：
-
items：打卡任务数组，元素包含id、name、task_type（checkin/upload）、is_gray。 -
dense：是否使用更紧凑的栅格与间距。 -
scroll：是否启用滚动容器（最大高度 13rem）。
-
- Emits：
-
submit-success：提交成功后触发，由父组件决定后续行为（轻提示、关闭弹窗等）。
-
- 行为：
- 点击置灰的
checkin项时提示“您已经完成了今天的打卡”。 - 点击
upload类型时跳转到/checkin/index?id=xxx上传页面。 - 选择
checkin类型后显示提交按钮，点击后调用接口提交；成功后抛出submit-success并重置选中项。
- 点击置灰的
- 使用位置：
- 首页：
/src/views/HomePage.vue（替换原重复 UI，监听submit-success显示“打卡成功”）。 - 弹窗：
/src/components/ui/CheckInDialog.vue（以active_list作为数据源，监听submit-success转发为check-in-success并延时关闭）。
- 首页：