fix: FullCalendar getApi null 引用保护

draw()/redraw()/freeze() 在组件卸载后可能被异步触发，
添加 calendar.value null 检查防止 TypeError。

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

CLAUDE.md

@@ -0,0 +1,7 @@
+# huike-front 项目指南
+
+## vConsole 显示规则
+
+vConsole 仅在当前用户有 `SYS_CAN_SUDO` tag 时显示。判断逻辑在 `src/App.vue:updateVConsoleVisibility()`。
+
+Tags 通过 `get_all_tags_of_the_user` API 异步加载（`src/store/user.ts:getTags()`），在 `setCurrentUser()` 之后执行。vConsole 的 watch 需要 `{ deep: true }` 以及独立的 `store.current.tags` watch 来覆盖异步加载完成后的触发。

src/App.vue

@@ -77,6 +77,10 @@ export default defineComponent({
     })
 
     watch(() => store.current, () => {
+      updateVConsoleVisibility();
+    }, { deep: true })
+
+    function updateVConsoleVisibility() {
       // vConsole 仅对 sudoer（有 SYS_CAN_SUDO tag）用户可见
       let showVConsole = store.current.tags?.some(t => t.tag_name === 'SYS_CAN_SUDO') ?? false;
       console.log('vconsole visibility (sudoer only)...', { showVConsole, tags: store.current.tags });
@@ -84,6 +88,13 @@ export default defineComponent({
       if (vconsole) {
         vconsole.hidden = !showVConsole;
       }
+    }
+
+    // 同时监听 tags 的独立变化（getTags 异步加载完成后触发）
+    watch(() => store.current.tags, (val) => {
+      if (val && val.length > 0) {
+        updateVConsoleVisibility();
+      }
     })
 
     const tab_change_check = (name: number | string) => {
@@ -106,7 +117,7 @@ export default defineComponent({
       if (role === HtyBaseRoles.TEACHER) return '/teacher/home'
       if (role === HtySuperRoles.ADMIN) return '/admin/teachers'
       if (role === HtySuperRoles.TESTER) return '/tester'
-      if (role === HtySuperRoles.SUPERVISOR) return '/supervisor/subsidiaries'
+      if (role === HtySuperRoles.SUPERVISOR) return '/teacher/home'
       return '/'
     })
 

src/pages/clazz/index.vue

@@ -2,13 +2,12 @@
   <div class="clazz-page">
     <div class="view-toolbar" :class="{ 'view-toolbar--landscape': isLandscape }">
       <div class="view-toolbar__main">
-        <div class="view-toolbar__nav" v-if="viewMode === 'matrix'">
+        <div class="view-toolbar__nav">
-          <van-button size="small" @click="matrixGoPrev">‹</van-button>
+          <van-button size="small" @click="navGoPrev">‹</van-button>
-          <van-button size="small" @click="matrixGoToday">本周</van-button>
+          <van-button size="small" @click="navGoToday">本周</van-button>
-          <van-button size="small" @click="matrixGoNext">›</van-button>
+          <van-button size="small" @click="navGoNext">›</van-button>
         </div>
-        <span class="view-toolbar__range" v-if="viewMode === 'matrix'">{{ matrixWeekRange }}</span>
+        <span class="view-toolbar__range">{{ weekRange }}</span>
-        <span class="view-toolbar__range" v-else>日历周视图</span>
       </div>
       <div class="view-toolbar__actions">
         <div v-if="viewMode === 'matrix'" class="view-toolbar__orient">
@@ -33,14 +32,12 @@
 
     <div v-if="isLandscape" class="landscape-shell">
       <div class="landscape-shell__toolbar">
-        <div class="landscape-shell__left">
+        <div class="view-toolbar__nav">
-          <van-button size="small" @click="matrixGoToday">本周</van-button>
-        </div>
-        <div class="landscape-shell__title">
           <van-button size="small" @click="matrixGoPrev">‹</van-button>
-          <span>{{ matrixWeekRange }}</span>
+          <van-button size="small" @click="matrixGoToday">本周</van-button>
           <van-button size="small" @click="matrixGoNext">›</van-button>
         </div>
+        <span class="view-toolbar__range">{{ matrixWeekRange }}</span>
         <div class="landscape-shell__toggle">
           <van-button size="small" plain @click="isLandscape = false">退出横屏</van-button>
           <van-button
@@ -84,34 +81,34 @@
     </div>
 
     <template v-else>
-      <div v-show="viewMode === 'calendar'" class="calendar-wrapper">
+      <div v-if="viewMode === 'calendar'" class="calendar-wrapper">
         <div class="calendar">
           <FullCalendar ref="calendar" :options="options" />
         </div>
       </div>
       <div v-show="viewMode === 'matrix'" class="matrix-container">
-        <div v-if="teacherList.length > 1" class="matrix-teacher-filter">
+          <div v-if="teacherList.length > 1" class="matrix-teacher-filter">
-          <van-tag
+            <van-tag
-            :color="selectedTeacherIds.length === 0 ? '#1989fa' : '#e8e8e8'"
+              :color="selectedTeacherIds.length === 0 ? '#1989fa' : '#e8e8e8'"
-            :text-color="selectedTeacherIds.length === 0 ? '#fff' : '#666'"
+              :text-color="selectedTeacherIds.length === 0 ? '#fff' : '#666'"
-            @click="selectedTeacherIds = []"
+              @click="selectedTeacherIds = []"
-          >全部</van-tag>
+            >全部</van-tag>
-          <van-tag
+            <van-tag
-            v-for="t in teacherList" :key="t.id"
+              v-for="t in teacherList" :key="t.id"
-            :color="selectedTeacherIds.length === 0 || selectedTeacherIds.includes(t.id) ? t.color : '#e8e8e8'"
+              :color="selectedTeacherIds.length === 0 || selectedTeacherIds.includes(t.id) ? t.color : '#e8e8e8'"
-            :text-color="selectedTeacherIds.length === 0 || selectedTeacherIds.includes(t.id) ? '#fff' : '#999'"
+              :text-color="selectedTeacherIds.length === 0 || selectedTeacherIds.includes(t.id) ? '#fff' : '#999'"
-            @click="toggleTeacherFilter(t.id)"
+              @click="toggleTeacherFilter(t.id)"
-          >{{ t.name }}</van-tag>
+            >{{ t.name }}</van-tag>
+          </div>
+          <ClazzMatrixView
+            :events="filteredMatrixEvents"
+            :week-start="matrixWeekStart"
+            :week-end="matrixWeekEnd"
+            :landscape="false"
+            @cell-click="onMatrixCellClick"
+            @event-click="onMatrixEventClick"
+          />
         </div>
-        <ClazzMatrixView
-          :events="filteredMatrixEvents"
-          :week-start="matrixWeekStart"
-          :week-end="matrixWeekEnd"
-          :landscape="false"
-          @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 : '#333'" @click="toggleTeacherView(item.to_user_id)" v-for="item in subsidiaries">{{ item.to_user_realname }}</van-tag>
       </div>
@@ -424,6 +421,31 @@ export default defineComponent({
     });
     const matrixWeekRange = computed(() => `${matrixWeekStart.value} ~ ${matrixWeekEnd.value}`);
 
+    // 日历视图日期范围（由 datesSet 更新）
+    const calendarDateRange = ref('');
+
+    // 统一切换：矩阵用 matrixWeekRange，日历时用 calendarDateRange
+    const weekRange = computed(() =>
+      viewMode.value === 'matrix' ? matrixWeekRange.value : calendarDateRange.value
+    );
+
+    // 导航按钮分发（日历 / 矩阵）
+    const navGoPrev = () => {
+      if (viewMode.value === 'matrix') return matrixGoPrev();
+      const api = calendar.value?.getApi?.();
+      api?.prev();
+      // datesSet 会自动更新 calendarDateRange
+    };
+    const navGoToday = () => {
+      if (viewMode.value === 'matrix') return matrixGoToday();
+      calendar.value?.getApi?.().gotoDate(new Date());
+    };
+    const navGoNext = () => {
+      if (viewMode.value === 'matrix') return matrixGoNext();
+      const api = calendar.value?.getApi?.();
+      api?.next();
+    };
+
     // 标准化事件模型（供矩阵视图消费）
     const {normalizedEvents} = useClazzViewModel({
       list: computed(() => store.list),
@@ -541,6 +563,7 @@ export default defineComponent({
     };
 
     const draw = () => {
+      if (!calendar.value) { console.debug('[clazz draw] skip, calendar null'); return; }
       let api = calendar.value.getApi()
       api.removeAllEvents();
       store.list.forEach(item => {
@@ -602,6 +625,7 @@ export default defineComponent({
     }
 
     const redraw = () => {
+      if (!calendar.value) { console.debug('[clazz redraw] skip, calendar null'); return; }
       let events = calendar.value.getApi().getEvents();
       events.forEach((event, i) => {
         let subsidiary_id = event.extendedProps.subsidiary_id;
@@ -665,7 +689,10 @@ export default defineComponent({
 
     const comments_count = computed(() => count_comments(store.current.id))
 
-    const searchForSubsidiaries = async () => {
+    // 相同日期范围跳过重复 API 调用
+    const lastQueryKey = ref('');
+
+    const searchForSubsidiaries = async (start_date: string, end_date: string) => {
       // 主管老师角色下才加载下属老师的排课
       if (usingUser.store.currentRole !== HtyBaseRoles.TEACHER && usingUser.store.current.roles.some(r => r.role_key === HtySuperRoles.SUPERVISOR)) {
         subsidiaries.value = usingSupervisor.store.subsidiaries;
@@ -682,19 +709,31 @@ export default defineComponent({
         }
 
         if (subsidiaries.value.length) {
-          let { start_date, end_date } = state;
+          const htyIds = subsidiaries.value.map(x => x.to_user_id);
-          await query_for_subsidiaries(start_date, end_date, subsidiaries.value.map(x => x.to_user_id))
+          return Promise.all([
-          await query_repeats_for_subsidiaries(start_date, end_date, subsidiaries.value.map(x => x.to_user_id))
+            query_for_subsidiaries(start_date, end_date, htyIds),
+            query_repeats_for_subsidiaries(start_date, end_date, htyIds),
+          ]);
         }
       }
     }
 
-    const search = async () => {
+    const search = async (force = false) => {
       let { start_date, end_date } = state;
-      await query(start_date, end_date)
+      const key = `${start_date}|${end_date}|${usingUser.store.currentRole}`;
-      await query_repeats(start_date, end_date)
 
-      await searchForSubsidiaries();
+      // 相同范围且非强制刷新 → 跳过 API，仅重绘
+      if (!force && lastQueryKey.value === key) {
+        draw();
+        return;
+      }
+
+      await Promise.all([
+        query(start_date, end_date),
+        query_repeats(start_date, end_date),
+        searchForSubsidiaries(start_date, end_date),
+      ]);
+      lastQueryKey.value = key;
       draw();
     }
 
@@ -748,32 +787,7 @@ export default defineComponent({
     const options: CalendarOptions = {
       locale: zhLocale,
       // themeSystem: 'bootstrap5',
-      customButtons: {
+      headerToolbar: false,
-        current: {
-          text: '本周',
-          click: function() {
-            calendar.value.getApi().gotoDate(new Date())
-          }
-        },
-        createClazz: {
-          text: '创建排课',
-          click: function() {
-            if (!is_teacher.value) return;
-            const now = new Date();
-            store.current.start_from = formatDate(now, DateFormatter.DateTimeSave);
-            now.setMinutes(now.getMinutes() + 45);
-            store.current.end_by = formatDate(now, DateFormatter.DateTimeSave);
-            state.editing = true;
-            state.readonly = false;
-            state.title = "新增排课"
-          }
-        }
-      },
-      headerToolbar: {
-        left: 'prev,current,next',
-        center: 'title',
-        right: 'createClazz'
-      },
       plugins: [ dayGridPlugin, bootstrap5Plugin, timeGridPlugin, interactionPlugin ],
       initialView: 'timeGridWeek',
       initialDate: initialDate,
@@ -816,6 +830,10 @@ export default defineComponent({
       datesSet: function({start, end}) {
         // 矩阵视图有自己的日期范围和数据加载逻辑
         if (viewMode.value === 'matrix') return;
+        // 更新日历日期范围显示
+        const endDate = new Date(end);
+        endDate.setDate(endDate.getDate() - 1);
+        calendarDateRange.value = `${formatDate(start, DateFormatter.Date)} ~ ${formatDate(endDate, DateFormatter.Date)}`;
         if (store.hanging) {
           store.hanging = false;
           let {state: cachedState} = getKey('clazz_state');
@@ -862,7 +880,8 @@ export default defineComponent({
           if (await createInstance(store.current.instance)) {
             state.editing = false;
             store.current = {} as Clazz;
-            await search()
+            // 数据已变更，强制刷新
+            await search(true)
             return;
           }
         }
@@ -870,11 +889,13 @@ export default defineComponent({
       if (await createOrUpdate()) {
         state.editing = false;
         store.current = {} as Clazz;
-        await search()
+        // 数据已变更，强制刷新
+        await search(true)
       }
     }
 
     const freeze = () => {
+      if (!calendar.value) return;
       store.hanging = true;
       let date = calendar.value.getApi().getDate();
       setKey('clazz_state', {state, date})
@@ -989,7 +1010,8 @@ export default defineComponent({
         }).then(async () => {
           if (await removeCurrent(is_root)) {
             cancel();
-            await search();
+            // 数据已变更，强制刷新
+            await search(true);
           }
         })
     }
@@ -1087,6 +1109,7 @@ export default defineComponent({
       isLandscape, matrixWeekStart, matrixWeekEnd, matrixWeekRange, matrixWeekDays,
       matrixGoPrev, matrixGoNext, matrixGoToday,
       onMatrixCellClick, onMatrixEventClick,
+      weekRange, calendarDateRange, navGoPrev, navGoToday, navGoNext,
     }
   }
 })
@@ -1102,10 +1125,6 @@ export default defineComponent({
   height: 100%;
   min-height: 0;
 
-  :deep(.fc-toolbar-title) {
-    font-size: 1.25em;
-  }
-
   :deep(.fc) {
     height: 100%;
   }
@@ -1114,6 +1133,7 @@ export default defineComponent({
     overflow-y: auto !important;
     -webkit-overflow-scrolling: touch;
   }
+
 }
 
 .calendar-wrapper {
@@ -1382,7 +1402,6 @@ export default defineComponent({
       font-size: 0.24rem;
       white-space: nowrap;
     }
-
   }
 
   &__orient {
@@ -1429,8 +1448,7 @@ export default defineComponent({
   flex-shrink: 0;
   min-height: var(--landscape-toolbar-height);
   box-sizing: border-box;
-  display: grid;
+  display: flex;
-  grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: 0.08rem;
   padding: 0.08rem 0.12rem;
@@ -1438,29 +1456,6 @@ export default defineComponent({
   background: #fff;
 }
 
-.landscape-shell__left {
-  display: flex;
-  align-items: center;
-  gap: 0.08rem;
-}
-
-.landscape-shell__title {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: 0.08rem;
-  color: #333;
-  font-size: 0.24rem;
-  font-weight: 600;
-
-  span {
-    min-width: 0;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-}
 
 .landscape-shell__toggle {
   display: flex;

src/pages/daka/index.vue

@@ -98,6 +98,7 @@ export default defineComponent({
     
     const usingUser = useUser();
     const {store, query, reset} = useDaka();
+    console.debug('[daka] setup, currentRole:', usingUser.store.currentRole);
 
     const state = reactive({
       keyword: '',

src/pages/index.vue

@@ -159,7 +159,7 @@ export default defineComponent({
       if (role === HtyBaseRoles.TEACHER) return '/teacher/home'
       if (role === HtySuperRoles.ADMIN) return '/admin/teachers'
       if (role === HtySuperRoles.TESTER) return '/tester'
-      if (role === HtySuperRoles.SUPERVISOR) return '/supervisor/subsidiaries'
+      if (role === HtySuperRoles.SUPERVISOR) return '/teacher/home'
       return '/guest/profile'
     }
 

src/store/daka.ts

@@ -8,6 +8,7 @@ import {
     Daka,
     DakaScope,
     HtyBaseRoles,
+    HtySuperRoles,
     HtyRoles,
     Clazz,
     JihuaQueryParam,
@@ -82,7 +83,8 @@ export default function useDaka() {
 
     async function query(params: JihuaQueryParam): Promise<boolean> {
         let {current: {hty_id}, currentRole} = usingUser.store;
-        if (currentRole === HtyBaseRoles.TEACHER) {
+        console.debug('[daka query] currentRole:', currentRole, 'hty_id:', hty_id);
+        if (currentRole === HtyBaseRoles.TEACHER || currentRole === HtySuperRoles.SUPERVISOR) {
             params.teacher_id = hty_id;
             params.scope = DakaScope.ALL;
         } else if (currentRole === HtyBaseRoles.STUDENT) {
@@ -92,10 +94,11 @@ export default function useDaka() {
                 params.teacher_id = teacherStore.currentTeacherId;
             }
         }
+        console.debug('[daka query] params after role setup:', params);
         store.query_cache = params;
         load_start()
         const {r, d, e} = await request({url: '/api/v1/ws/find_dakas_with_sections_by_user_id', params});
-        load_done()
+        console.debug('[daka query] response:', {r, d, e});
         if (r) {
             if (params.page === 1) {
                 store.list = [];