hookehuyr

feat(teacher): 添加课程选择和样式优化

- 在学生页面添加课程单选功能
- 优化班级页面样式和交互细节
- 增加主题配置和搜索框样式调整
This diff is collapsed. Click to expand it.
......@@ -2,7 +2,7 @@
* @Author: hookehuyr hookehuyr@gmail.com
* @Date: 2025-06-19 17:12:19
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-06-19 23:27:57
* @LastEditTime: 2025-06-20 00:11:37
* @FilePath: /mlaj/src/views/teacher/studentPage.vue
* @Description: 学生详情页面
-->
......@@ -43,7 +43,16 @@
<span class="text-sm font-medium text-gray-700">所学课程</span>
</div>
<div class="flex flex-wrap gap-2">
<van-tag v-for="course in studentInfo.courses" :key="course" type="primary" size="large">
<van-tag
v-for="course in studentInfo.courses"
:key="course"
:type="selectedCourses.includes(course) ? 'primary' : 'default'"
:color="selectedCourses.includes(course) ? '#10b981' : '#f0f0f0'"
:text-color="selectedCourses.includes(course) ? '#ffffff' : '#666666'"
size="large"
@click="toggleCourseSelection(course)"
class="cursor-pointer transition-all duration-200 hover:opacity-80"
>
{{ course }}
</van-tag>
</div>
......@@ -263,6 +272,9 @@ const studentInfo = ref({
courses: ['讲师训2025', '亲子学堂课程']
})
// 选中的课程列表(默认选中第一个课程)
const selectedCourses = ref([studentInfo.value.courses[0] || ''])
// 统计数据
const studentStats = ref({
attendanceRate: 92,
......@@ -277,6 +289,23 @@ const activeTab = ref('homework')
const statusFilter = ref('按状态')
const showStatusPopup = ref(false)
/**
* 切换课程选中状态(单选模式)
* @param {string} course - 课程名称
*/
const toggleCourseSelection = (course) => {
if (selectedCourses.value.includes(course)) {
// 如果已选中,则取消选中
selectedCourses.value = []
} else {
// 如果未选中,则设置为当前选中的课程(单选)
selectedCourses.value = [course]
}
// 可以在这里添加其他业务逻辑,比如筛选相关数据
console.log('当前选中的课程:', selectedCourses.value)
}
// 状态选项
const statusOptions = ref([
{ text: '按状态', value: '按状态' },
......