Hooke / mlaj

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
72087055 1 parent 39c750ac

feat(study): 添加文件列表展示功能 

在StudyDetailPage.vue中，为课程类型为'file'的课程添加了文件列表展示区域，包括文件图标、标题和打开文件的链接。同时，在main.js中添加了faFileAlt图标以支持文件列表的展示
Inline Side-by-side
Showing 2 changed files with 18 additions and 4 deletions
/*
* @Date: 2025-03-20 20:36:36
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-04-07 14:24:50
* @LastEditTime: 2025-05-08 10:56:28
* @FilePath: /mlaj/src/main.js
* @Description: 文件描述
*/
......@@ -18,10 +18,10 @@ import { library } from '@fortawesome/fontawesome-svg-core'
/* import font awesome icon component */
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
/* import specific icons */
import { faCirclePause, faCirclePlay, faPlay, faPause, faBackwardStep, faForwardStep, faVolumeUp, faRedo, faRepeat, faList, faChevronDown, faVolumeOff, faXmark } from '@fortawesome/free-solid-svg-icons'
import { faCirclePause, faCirclePlay, faPlay, faPause, faBackwardStep, faForwardStep, faVolumeUp, faRedo, faRepeat, faList, faChevronDown, faVolumeOff, faXmark, faFileAlt } from '@fortawesome/free-solid-svg-icons'
/* add icons to the library */
library.add(faCirclePause, faCirclePlay, faPlay, faPause, faBackwardStep, faForwardStep, faVolumeUp, faRedo, faRepeat, faList, faChevronDown, faVolumeOff, faXmark)
library.add(faCirclePause, faCirclePlay, faPlay, faPause, faBackwardStep, faForwardStep, faVolumeUp, faRedo, faRepeat, faList, faChevronDown, faVolumeOff, faXmark, faFileAlt)
const app = createApp(App)
// 屏蔽警告信息
......
......@@ -47,7 +47,21 @@
</van-swipe>
</div>
<!-- 文件列表展示区域 -->
<div v-if="course.course_type === 'file'" class="w-full relative">file</div>
<div v-if="course.course_type === 'file'" class="w-full relative bg-white rounded-lg shadow-sm">
<div class="p-4 space-y-3">
<div v-for="(item, index) in courseFile?.list" :key="index" class="group hover:bg-gray-50 transition-colors rounded-lg p-3">
<div class="flex items-center space-x-3">
<div class="flex-shrink-0">
<font-awesome-icon icon="file-alt" class="text-gray-400 text-xl" />
</div>
<div class="flex-1 min-w-0">
<h3 class="text-sm font-medium text-gray-900 truncate">{{ item.title }}</h3>
<a :href="item.url" target="_blank" class="text-sm text-blue-600 hover:text-blue-800 hover:underline truncate block mt-1">打开文件</a>
</div>
</div>
</div>
</div>
</div>
<!-- 标签页区域 -->
<div class="px-4 py-3 bg-white">
<van-tabs v-model:active="activeTab" sticky animated swipeable shrink @change="handleTabChange">
......