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

- 在学生页面添加课程单选功能
- 优化班级页面样式和交互细节
- 增加主题配置和搜索框样式调整

@@ -2,7 +2,7 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2025-06-19 17:12:19
  * @Date: 2025-06-19 17:12:19
  * @LastEditors: hookehuyr hookehuyr@gmail.com
  * @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
  * @FilePath: /mlaj/src/views/teacher/studentPage.vue
  * @Description: 学生详情页面
  * @Description: 学生详情页面
 -->
 -->
@@ -43,7 +43,16 @@
           <span class="text-sm font-medium text-gray-700">所学课程</span>
           <span class="text-sm font-medium text-gray-700">所学课程</span>
         </div>
         </div>
         <div class="flex flex-wrap gap-2">
         <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 }}
             {{ course }}
           </van-tag>
           </van-tag>
         </div>
         </div>
@@ -263,6 +272,9 @@ const studentInfo = ref({
   courses: ['讲师训2025', '亲子学堂课程']
   courses: ['讲师训2025', '亲子学堂课程']
 })
 })
 
 
+// 选中的课程列表（默认选中第一个课程）
+const selectedCourses = ref([studentInfo.value.courses[0] || ''])
+
 // 统计数据
 // 统计数据
 const studentStats = ref({
 const studentStats = ref({
   attendanceRate: 92,
   attendanceRate: 92,
@@ -277,6 +289,23 @@ const activeTab = ref('homework')
 const statusFilter = ref('按状态')
 const statusFilter = ref('按状态')
 const showStatusPopup = ref(false)
 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([
 const statusOptions = ref([
   { text: '按状态', value: '按状态' },
   { text: '按状态', value: '按状态' },