fix: matrix view full-screen fill + show teacher/student names

- Add flex column layout for landscape full-screen fill
- Show teacher name and student names in matrix event blocks
- Refactor useClazzViewModel with makeEvent() helper
- Fix CSS nesting for .slot-row

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

src/pages/clazz/components/ClazzMatrixView.vue

@@ -49,7 +49,9 @@
                   @click.stop="onEventClick(ev)"
                 >
                   <div class="event-title">{{ ev.clazzName }}</div>
-                  <div class="event-time">{{ fmtTime(ev.startAt) }}-{{ fmtTime(ev.endAt) }}</div>
+                  <div class="event-meta">{{ fmtTime(ev.startAt) }}-{{ fmtTime(ev.endAt) }}</div>
+                  <div class="event-meta" v-if="ev.teacherName">{{ ev.teacherName }}</div>
+                  <div class="event-meta event-meta--students" v-if="ev.studentNames.length">{{ ev.studentNames.join('、') }}</div>
                 </div>
               </div>
             </template>
@@ -199,12 +201,15 @@ export default defineComponent({
 <style scoped lang="less">
 .matrix-wrapper {
   width: 100%;
-  overflow-x: auto;
+  height: 100%;
   font-size: 0.24rem;
+  display: flex;
+  flex-direction: column;
 }
 
 .matrix-header {
   display: flex;
+  flex-shrink: 0;
   position: sticky;
   top: 0;
   background: #f7f8fa;
@@ -240,6 +245,9 @@ export default defineComponent({
 }
 
 .matrix-body {
+  flex: 1;
+  overflow-y: auto;
+
   .slot-row {
     display: flex;
     border-bottom: 1px solid #f0f0f0;
@@ -310,11 +318,16 @@ export default defineComponent({
         font-weight: 500;
         overflow: hidden;
         text-overflow: ellipsis;
+        font-size: 0.22rem;
       }
 
-      .event-time {
-        font-size: 0.2rem;
+      .event-meta {
+        font-size: 0.18rem;
         color: #666;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 1.4;
       }
     }
   }

src/pages/clazz/index.vue

@@ -1,41 +1,43 @@
 <template>
-  <!-- 视图切换 + 导航工具栏 -->
-  <div class="view-toolbar">
-    <div class="view-toolbar__nav" v-if="viewMode === 'matrix'">
-      <van-button size="small" @click="matrixGoPrev">‹</van-button>
-      <van-button size="small" @click="matrixGoToday">本周</van-button>
-      <van-button size="small" @click="matrixGoNext">›</van-button>
-      <span class="view-toolbar__range">{{ matrixWeekRange }}</span>
+  <div class="clazz-page">
+    <!-- 视图切换 + 导航工具栏 -->
+    <div class="view-toolbar">
+      <div class="view-toolbar__nav" v-if="viewMode === 'matrix'">
+        <van-button size="small" @click="matrixGoPrev">‹</van-button>
+        <van-button size="small" @click="matrixGoToday">本周</van-button>
+        <van-button size="small" @click="matrixGoNext">›</van-button>
+        <span class="view-toolbar__range">{{ matrixWeekRange }}</span>
+      </div>
+      <div class="view-toolbar__toggle">
+        <van-button
+          :type="viewMode === 'calendar' ? 'primary' : 'default'"
+          size="small" plain
+          @click="setViewMode('calendar')"
+        >日历</van-button>
+        <van-button
+          :type="viewMode === 'matrix' ? 'primary' : 'default'"
+          size="small" plain
+          @click="setViewMode('matrix')"
+        >矩阵</van-button>
+      </div>
     </div>
-    <div class="view-toolbar__toggle">
-      <van-button
-        :type="viewMode === 'calendar' ? 'primary' : 'default'"
-        size="small" plain
-        @click="setViewMode('calendar')"
-      >日历</van-button>
-      <van-button
-        :type="viewMode === 'matrix' ? 'primary' : 'default'"
-        size="small" plain
-        @click="setViewMode('matrix')"
-      >矩阵</van-button>
-    </div>
-  </div>
 
-  <div v-show="viewMode === 'calendar'" class="calendar" :style="{height: `calc(100% - 1rem - ${footerHeight}px - 0.8rem)`}">
-    <FullCalendar ref="calendar" :options="options" />
-  </div>
-  <div v-show="viewMode === 'matrix'" class="matrix-container">
-    <ClazzMatrixView
-      :events="normalizedEvents"
-      :week-start="matrixWeekStart"
-      :week-end="matrixWeekEnd"
-      @cell-click="onMatrixCellClick"
-      @event-click="onMatrixEventClick"
-    />
-  </div>
-  <div class="footer-subsidiary" ref="footer" v-if="subsidiaries.length > 0">
+    <div v-show="viewMode === 'calendar'" class="calendar" :style="{height: `calc(100% - 1rem - ${footerHeight}px - 0.8rem)`}">
+      <FullCalendar ref="calendar" :options="options" />
+    </div>
+    <div v-show="viewMode === 'matrix'" class="matrix-container">
+      <ClazzMatrixView
+        :events="normalizedEvents"
+        :week-start="matrixWeekStart"
+        :week-end="matrixWeekEnd"
+        @cell-click="onMatrixCellClick"
+        @event-click="onMatrixEventClick"
+      />
+    </div>
+    <div class="footer-subsidiary" ref="footer" v-if="subsidiaries.length > 0">
     <van-tag type="primary" :color="isTagPlain(item) ? 'rgba(204, 204, 204, 0.5)' : item.color" :text-color="isTagPlain(item) ? item.color : '#fff'" @click="toggleTeacherView(item.to_user_id)" v-for="item in subsidiaries">{{ item.to_user_realname }}</van-tag>
   </div>
+  </div><!-- /.clazz-page -->
   <van-overlay :show="state.editing" :lock-scroll="false">
     <div class="content-modal">
       <div class="content-head">
@@ -1031,8 +1033,22 @@ export default defineComponent({
   }
 }
 
+/* ═══ 双视图布局容器 ═══ */
+.clazz-page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+}
+
+.matrix-container {
+  flex: 1;
+  overflow: hidden;
+  background: #fff;
+}
+
 /* ═══ 双视图工具栏 ═══ */
 .view-toolbar {
+  flex-shrink: 0;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1076,12 +1092,4 @@ export default defineComponent({
     }
   }
 }
-
-.matrix-container {
-  height: calc(100% - 0.8rem);
-  overflow-y: auto;
-  overflow-x: auto;
-  padding: 0.1rem;
-  background: #fff;
-}
 </style>

src/pages/clazz/useClazzViewModel.ts

@@ -12,6 +12,7 @@ export interface NormalizedClazzEvent {
   teacherId: string;
   teacherName?: string;
   studentIds: string[];
+  studentNames: string[];
   isRepeatGhost: boolean;
   isSubsidiary: boolean;
   subsidiaryTeacherId?: string;
@@ -48,39 +49,47 @@ function nearestSlotKey(d: Date): string {
   return slots[0]?.key ?? DEFAULT_TIME_SLOTS[0];
 }
 
-function eventFromClazz(
+function pickNames(item: Clazz) {
+  const teachers = item.teachers?.val?.users?.vals ?? [];
+  const students = item.students?.val?.users?.vals ?? [];
+  return {
+    teacherUserId: teachers[0]?.user_id ?? '',
+    teacherName: teachers[0]?.real_name ?? '',
+    studentIds: students.map((u) => u.user_id),
+    studentNames: students.map((u) => u.real_name).filter(Boolean),
+  };
+}
+
+function makeEvent(
   item: Clazz,
   isRepeatGhost: boolean,
   isSubsidiary: boolean,
-  subsidiaryTeacherId?: string,
-  color?: string,
-  borderColor?: string,
-): NormalizedClazzEvent[] {
+  extra?: Partial<NormalizedClazzEvent>,
+): NormalizedClazzEvent {
   const startAt = toDate(item.start_from);
   const endAt = toDate(item.end_by);
-  const teacherUserId = item.teachers?.val?.users?.vals?.[0]?.user_id ?? '';
-  const studentIds = item.students?.val?.users?.vals?.map((u) => u.user_id) ?? [];
-  return [
-    {
-      id: item.id,
-      rootId: item.root_id,
-      clazzName: item.clazz_name,
-      startAt,
-      endAt,
-      durationMinutes: item.duration ?? 0,
-      teacherId: teacherUserId,
-      studentIds,
-      isRepeatGhost,
-      isSubsidiary,
-      subsidiaryTeacherId,
-      visible: true,
-      color,
-      borderColor,
-      __raw: item,
-      dateKey: dateKey(startAt),
-      timeSlotKey: nearestSlotKey(startAt),
-    },
-  ];
+  const names = pickNames(item);
+  return {
+    id: item.id,
+    rootId: item.root_id,
+    clazzName: item.clazz_name,
+    startAt,
+    endAt,
+    durationMinutes: item.duration ?? 0,
+    teacherId: names.teacherUserId,
+    teacherName: names.teacherName,
+    studentIds: names.studentIds,
+    studentNames: names.studentNames,
+    isRepeatGhost,
+    isSubsidiary,
+    subsidiaryTeacherId: extra?.subsidiaryTeacherId,
+    visible: extra?.visible ?? true,
+    color: extra?.color,
+    borderColor: extra?.borderColor,
+    __raw: item,
+    dateKey: dateKey(startAt),
+    timeSlotKey: nearestSlotKey(startAt),
+  };
 }
 
 export function useClazzViewModel(params: {
@@ -99,55 +108,17 @@ export function useClazzViewModel(params: {
     // 自己的非重复排课
     for (const item of list.value) {
       if (item.is_delete) continue;
-      out.push(...eventFromClazz(item, false, false));
+      out.push(makeEvent(item, false, false));
     }
 
-    // 自己的重复排课（幽灵实例）
+    // 自己的重复排课（幽灵实例 root）
     for (const row of repeatList.value) {
       if (row.is_delete) continue;
-      // root row 本身
-      const teachers = row.teachers?.val?.users?.vals ?? [];
-      const tId = teachers[0]?.user_id ?? '';
-      const sIds = row.students?.val?.users?.vals?.map((u) => u.user_id) ?? [];
-      const startAt = toDate(row.start_from);
-      const endAt = toDate(row.end_by);
-      out.push({
-        id: row.id,
-        rootId: undefined,
-        clazzName: row.clazz_name,
-        startAt,
-        endAt,
-        durationMinutes: row.duration ?? 0,
-        teacherId: tId,
-        studentIds: sIds,
-        isRepeatGhost: true, // 重复排课实例
-        isSubsidiary: false,
-        visible: true,
-        __raw: row,
-        dateKey: dateKey(startAt),
-        timeSlotKey: nearestSlotKey(startAt),
-      });
+
+      out.push(makeEvent(row, true, false));
       // 当周实例（如果有）
       if (row.instance && row.instance.id) {
-        const inst = row.instance;
-        const iStart = toDate(inst.start_from);
-        const iEnd = toDate(inst.end_by);
-        out.push({
-          id: inst.id,
-          rootId: row.id,
-          clazzName: inst.clazz_name,
-          startAt: iStart,
-          endAt: iEnd,
-          durationMinutes: inst.duration ?? 0,
-          teacherId: tId,
-          studentIds: inst.students?.val?.users?.vals?.map((u) => u.user_id) ?? [],
-          isRepeatGhost: false,
-          isSubsidiary: false,
-          visible: true,
-          __raw: inst,
-          dateKey: dateKey(iStart),
-          timeSlotKey: nearestSlotKey(iStart),
-        });
+        out.push(makeEvent(row.instance, false, false));
       }
     }
 
@@ -156,51 +127,13 @@ export function useClazzViewModel(params: {
       const hidden = !getViewingSubsidiaries().includes(htyId);
       for (const item of data.list) {
         if (item.is_delete) continue;
-        out.push(...eventFromClazz(item, false, true, htyId, undefined, undefined).map((e) => ({ ...e, visible: !hidden })));
+        out.push(makeEvent(item, false, true, { subsidiaryTeacherId: htyId, visible: !hidden }));
       }
       for (const row of data.repeatList) {
         if (row.is_delete) continue;
-        const startAt = toDate(row.start_from);
-        const endAt = toDate(row.end_by);
-        const teachers = row.teachers?.val?.users?.vals ?? [];
-        const tId = teachers[0]?.user_id ?? '';
-        out.push({
-          id: row.id,
-          clazzName: row.clazz_name,
-          startAt,
-          endAt,
-          durationMinutes: row.duration ?? 0,
-          teacherId: tId,
-          studentIds: row.students?.val?.users?.vals?.map((u) => u.user_id) ?? [],
-          isRepeatGhost: true,
-          isSubsidiary: true,
-          subsidiaryTeacherId: htyId,
-          visible: !hidden,
-          __raw: row,
-          dateKey: dateKey(startAt),
-          timeSlotKey: nearestSlotKey(startAt),
-        });
+        out.push(makeEvent(row, true, true, { subsidiaryTeacherId: htyId, visible: !hidden }));
         if (row.instance && row.instance.id) {
-          const inst = row.instance;
-          const iStart = toDate(inst.start_from);
-          const iEnd = toDate(inst.end_by);
-          out.push({
-            id: inst.id,
-            rootId: row.id,
-            clazzName: inst.clazz_name,
-            startAt: iStart,
-            endAt: iEnd,
-            durationMinutes: inst.duration ?? 0,
-            teacherId: tId,
-            studentIds: inst.students?.val?.users?.vals?.map((u) => u.user_id) ?? [],
-            isRepeatGhost: false,
-            isSubsidiary: true,
-            subsidiaryTeacherId: htyId,
-            visible: !hidden,
-            __raw: inst,
-            dateKey: dateKey(iStart),
-            timeSlotKey: nearestSlotKey(iStart),
-          });
+          out.push(makeEvent(row.instance, false, true, { subsidiaryTeacherId: htyId, visible: !hidden }));
         }
       }
     }