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

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

feat(teacher): 添加课程选择和样式优化
- 在学生页面添加课程单选功能 - 优化班级页面样式和交互细节 - 增加主题配置和搜索框样式调整
hookehuyr
Commit b14baa3970aac32e352e5b9266377ad7e8345a74 b14baa39 1 parent a5ac66c9
Showing 2 changed files with 87 additions and 10 deletions
src/views/teacher/myClassPage.vue
src/views/teacher/studentPage.vue
--- a/src/views/teacher/myClassPage.vue
View file @b14baa3
+++ b/src/views/teacher/myClassPage.vue
View file @b14baa3
@@ -2,11 +2,12 @@
  * @Author: hookehuyr hookehuyr@gmail.com
  * @Date: 2025-01-20 10:00:00
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2025-06-19 16:46:06
+ * @LastEditTime: 2025-06-20 00:09:46
  * @FilePath: /mlaj/src/views/teacher/myClassPage.vue
  * @Description: 我的班级页面
 -->
 <template>
+  <van-config-provider :theme-vars="themeVars">
     <div class="bg-gradient-to-br from-green-50 via-green-100/30 to-blue-50/30 min-h-screen">
       <!-- 用户信息卡片 -->
       <div>
@@ -37,6 +38,8 @@
         </van-sticky>
       </div>
+      <div style="height: 0.5rem;"></div>
+
       <!-- 统计数据 -->
       <div>
         <van-row>
@@ -45,7 +48,7 @@
             <div class="bg-white p-4 text-center">
               <div class="relative w-16 h-16 mx-auto mb-2">
                 <van-circle v-model:current-rate="attendanceRate" :rate="attendanceRate" :speed="100"
-                :text="attendanceRate + '%'" stroke-width="50" color="#10b981" size="64" />
+                  :text="attendanceRate + '%'" stroke-width="70" color="#10b981" size="64" />
               </div>
               <div class="text-sm text-gray-600">出勤率</div>
             </div>
@@ -55,7 +58,7 @@
             <div class="bg-white p-4 text-center">
               <div class="relative w-16 h-16 mx-auto mb-2">
                 <van-circle v-model:current-rate="taskCompletionRate" :rate="taskCompletionRate" :speed="100"
-                :text="taskCompletionRate + '%'" stroke-width="50" color="#3b82f6" size="64" />
+                  :text="taskCompletionRate + '%'" stroke-width="70" color="#3b82f6" size="64" />
               </div>
               <div class="text-sm text-gray-600">任务完成</div>
             </div>
@@ -65,7 +68,7 @@
             <div class="bg-white p-4 text-center">
               <div class="relative w-16 h-16 mx-auto mb-2">
                 <van-circle v-model:current-rate="learningProgress" :rate="learningProgress" :speed="100"
-                :text="learningProgress + '%'" stroke-width="50" color="#f59e0b" size="64" />
+                  :text="learningProgress + '%'" stroke-width="70" color="#f59e0b" size="64" />
               </div>
               <div class="text-sm text-gray-600">学习进度</div>
             </div>
@@ -85,7 +88,7 @@
                 <van-icon name="arrow-down" size="14" class="ml-1" />
               </div>
             </div>
-          <van-search v-model="searchKeyword" placeholder="请搜索" @search="handleSearch" @input="handleSearch" />
+            <van-search v-model="searchKeyword" placeholder="请搜索" shape="round" @search="handleSearch" @input="handleSearch" />
           </div>
           <!-- 学生列表 -->
@@ -145,14 +148,23 @@
         </div>
       </van-popup>
     </div>
+  </van-config-provider>
 </template>
 <script setup>
 import { ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import AppLayout from '@/layouts/AppLayout.vue'
+import { useTitle } from '@vueuse/core';
 const router = useRouter()
+const route = useRoute()
+useTitle(route.meta.title);
+
+const themeVars = ref({
+  'dropdownMenuShadow': '#fff',
+  searchInputHeight: '2.5rem',
+})
 // 用户信息
 const userInfo = ref({
@@ -238,6 +250,42 @@ const studentList = ref([
     phone: '13643214321',
     lastActiveTime: '30分钟前活跃',
     avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
+  },
+  {
+    id: 1,
+    name: '张明',
+    gender: 'male',
+    className: '高一(3)班',
+    phone: '13812345678',
+    lastActiveTime: '5分钟前活跃',
+    avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
+  },
+  {
+    id: 2,
+    name: '李华',
+    gender: 'female',
+    className: '高一(3)班',
+    phone: '13987654321',
+    lastActiveTime: '10分钟前活跃',
+    avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
+  },
+  {
+    id: 3,
+    name: '王强',
+    gender: 'male',
+    className: '高一(2)班',
+    phone: '13512349876',
+    lastActiveTime: '15分钟前活跃',
+    avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
+  },
+  {
+    id: 4,
+    name: '赵敏',
+    gender: 'female',
+    className: '高一(1)班',
+    phone: '13643214321',
+    lastActiveTime: '30分钟前活跃',
+    avatar: 'https://cdn.ipadbiz.cn/mlaj/images/icon_1.jpeg'
   }
 ])
@@ -360,7 +408,7 @@ onMounted(() => {
 })
 </script>
-<style scoped>
+<style lang="less">
 /* 自定义样式 */
 .van-dropdown-menu {
   background-color: white;
@@ -374,8 +422,8 @@ onMounted(() => {
 }
 .van-search {
-  background-color: #f9fafb;
+  // background-color: #f9fafb;
-  border-radius: 0.5rem;
+  // border-radius: 0.5rem;
 }
 .van-list {
--- a/src/views/teacher/studentPage.vue
View file @b14baa3
+++ b/src/views/teacher/studentPage.vue
View file @b14baa3
@@ -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: '按状态' },