hookehuyr

refactor(CheckinDetailPage): 移除mock数据并优化作品类型获取逻辑

将临时mock的富文本数据移除,改为从任务详情中获取作品类型数据
当没有作品类型数据时,默认显示4种基本类型
...@@ -315,78 +315,21 @@ const getTaskDetail = async (month) => { ...@@ -315,78 +315,21 @@ const getTaskDetail = async (month) => {
315 if (code) { 315 if (code) {
316 taskDetail.value = data 316 taskDetail.value = data
317 317
318 - // TODO: 临时 mock 富文本数据,后续替换为真实数据 318 + // 获取作品类型数据
319 - // if (!taskDetail.value.description) { 319 + if (data.attachment_type.length) {
320 - // taskDetail.value.description = ` 320 + attachmentTypeOptions.value = Object.entries(data.attachment_type).map(([key, value]) => ({
321 - // <div class="rich-content"> 321 + key,
322 - // <h2 style="color: #2563eb; margin-bottom: 16px; font-size: 20px; font-weight: 600;">📚 本周学习任务</h2> 322 + value
323 - 323 + }))
324 - // <p style="margin-bottom: 16px; line-height: 1.6; color: #374151;"> 324 + } else {
325 - // 同学们好!本周我们将学习<strong style="color: #dc2626;">Vue3 组合式 API</strong>的核心概念。请大家认真完成以下任务: 325 + // 显示4种类型
326 - // </p> 326 + attachmentTypeOptions.value = [
327 - 327 + { key: 'text', value: '文本' },
328 - // <div style="background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); padding: 16px; border-radius: 12px; margin: 16px 0; border-left: 4px solid #f59e0b;"> 328 + { key: 'image', value: '图片' },
329 - // <h3 style="color: #92400e; margin: 0 0 8px 0; font-size: 16px;">⚠️ 重要提醒</h3> 329 + { key: 'audio', value: '音频' },
330 - // <p style="margin: 0; color: #78350f;">请在截止日期前提交作业,逾期将影响成绩评定。</p> 330 + { key: 'video', value: '视频' }
331 - // </div> 331 + ]
332 - 332 + }
333 - // <h3 style="color: #059669; margin: 24px 0 12px 0; font-size: 18px;">📋 具体要求:</h3>
334 -
335 - // <ol style="margin: 16px 0; padding-left: 24px; color: #374151; line-height: 1.8;">
336 - // <li style="margin-bottom: 8px;">
337 - // <strong>理论学习:</strong>观看课程视频,理解 <code style="background: #f3f4f6; padding: 2px 6px; border-radius: 4px; color: #dc2626;">ref</code> 和 <code style="background: #f3f4f6; padding: 2px 6px; border-radius: 4px; color: #dc2626;">reactive</code> 的区别
338 - // </li>
339 - // <li style="margin-bottom: 8px;">
340 - // <strong>实践操作:</strong>完成课后练习,创建一个简单的计数器组件
341 - // </li>
342 - // <li style="margin-bottom: 8px;">
343 - // <strong>拓展思考:</strong>思考组合式 API 相比选项式 API 的优势
344 - // </li>
345 - // </ol>
346 -
347 - // <div style="text-align: center; margin: 24px 0;">
348 - // <img src="https://cdn.ipadbiz.cn/mlaj/images/vue3-composition-api.jpg"
349 - // alt="Vue3 组合式 API 示意图"
350 - // style="max-width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.1);" />
351 - // <p style="margin-top: 8px; color: #6b7280; font-size: 14px; font-style: italic;">
352 - // Vue3 组合式 API 架构图
353 - // </p>
354 - // </div>
355 -
356 - // <div style="background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%); padding: 16px; border-radius: 12px; margin: 20px 0;">
357 - // <h4 style="color: #1e40af; margin: 0 0 12px 0; font-size: 16px;">💡 学习提示</h4>
358 - // <ul style="margin: 0; padding-left: 20px; color: #1e3a8a;">
359 - // <li style="margin-bottom: 6px;">可以参考官方文档进行学习</li>
360 - // <li style="margin-bottom: 6px;">建议先理解概念,再动手实践</li>
361 - // <li style="margin-bottom: 6px;">遇到问题可以在群里讨论</li>
362 - // </ul>
363 - // </div>
364 -
365 - // <blockquote style="border-left: 4px solid #10b981; background: #f0fdf4; padding: 16px; margin: 20px 0; border-radius: 0 8px 8px 0;">
366 - // <p style="margin: 0; color: #065f46; font-style: italic; line-height: 1.6;">
367 - // "学而时习之,不亦说乎?" —— 希望大家能够在实践中加深对知识的理解。
368 - // </p>
369 - // </blockquote>
370 -
371 - // <div style="text-align: center; margin: 24px 0;">
372 - // <img src="https://cdn.ipadbiz.cn/mlaj/images/coding-example.png"
373 - // alt="代码示例"
374 - // style="max-width: 100%; height: auto; border-radius: 8px; border: 2px solid #e5e7eb;" />
375 - // </div>
376 -
377 - // <div style="background: #fef2f2; border: 1px solid #fecaca; border-radius: 8px; padding: 16px; margin: 20px 0;">
378 - // <h4 style="color: #dc2626; margin: 0 0 8px 0; font-size: 16px;">📅 截止时间</h4>
379 - // <p style="margin: 0; color: #991b1b; font-weight: 500;">
380 - // 2024年12月31日 23:59
381 - // </p>
382 - // </div>
383 -
384 - // <p style="margin-top: 24px; color: #6b7280; text-align: center; font-size: 14px;">
385 - // 祝大家学习愉快!有问题随时联系老师 👨‍🏫
386 - // </p>
387 - // </div>
388 - // `
389 - // }
390 } 333 }
391 } 334 }
392 335
...@@ -676,19 +619,6 @@ onMounted(async () => { ...@@ -676,19 +619,6 @@ onMounted(async () => {
676 getTaskDetail(dayjs().format('YYYY-MM')); 619 getTaskDetail(dayjs().format('YYYY-MM'));
677 } 620 }
678 621
679 - // 获取作品类型数据
680 - try {
681 - const { code, data } = await getTeacherFindSettingsAPI()
682 - if (code && data.task_attachment_type) {
683 - attachmentTypeOptions.value = Object.entries(data.task_attachment_type).map(([key, value]) => ({
684 - key,
685 - value
686 - }))
687 - }
688 - } catch (error) {
689 - console.error('获取作品类型数据失败:', error)
690 - }
691 -
692 // 初始化编辑数据 622 // 初始化编辑数据
693 await initEditData() 623 await initEditData()
694 }) 624 })
......