fix: FullCalendar getApi null 引用保护

draw()/redraw()/freeze() 在组件卸载后可能被异步触发，添加 calendar.value null 检查防止 TypeError。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
fix: landscape toolbar date range style matches regular toolbar
2026-05-03 10:35:51 +08:00 · 2026-05-03 10:35:37 +08:00 · 2026-05-03 10:33:06 +08:00 · 2026-05-03 09:48:54 +08:00 · 2026-05-03 09:44:03 +08:00 · 2026-05-03 09:22:37 +08:00
6 changed files with 121 additions and 104 deletions
@@ -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 来覆盖异步加载完成后的触发。
@@ -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 '/'
    })

@@ -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'">
-          <van-button size="small" @click="matrixGoPrev">‹</van-button>
-          <van-button size="small" @click="matrixGoToday">本周</van-button>
-          <van-button size="small" @click="matrixGoNext">›</van-button>
+        <div class="view-toolbar__nav">
+          <van-button size="small" @click="navGoPrev">‹</van-button>
+          <van-button size="small" @click="navGoToday">本周</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" v-else>日历周视图</span>
+        <span class="view-toolbar__range">{{ weekRange }}</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">
-          <van-button size="small" @click="matrixGoToday">本周</van-button>
-        </div>
-        <div class="landscape-shell__title">
+        <div class="view-toolbar__nav">
          <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">
-          <van-tag
-            :color="selectedTeacherIds.length === 0 ? '#1989fa' : '#e8e8e8'"
-            :text-color="selectedTeacherIds.length === 0 ? '#fff' : '#666'"
-            @click="selectedTeacherIds = []"
-          >全部</van-tag>
-          <van-tag
-            v-for="t in teacherList" :key="t.id"
-            :color="selectedTeacherIds.length === 0 || selectedTeacherIds.includes(t.id) ? t.color : '#e8e8e8'"
-            :text-color="selectedTeacherIds.length === 0 || selectedTeacherIds.includes(t.id) ? '#fff' : '#999'"
-            @click="toggleTeacherFilter(t.id)"
-          >{{ t.name }}</van-tag>
+          <div v-if="teacherList.length > 1" class="matrix-teacher-filter">
+            <van-tag
+              :color="selectedTeacherIds.length === 0 ? '#1989fa' : '#e8e8e8'"
+              :text-color="selectedTeacherIds.length === 0 ? '#fff' : '#666'"
+              @click="selectedTeacherIds = []"
+            >全部</van-tag>
+            <van-tag
+              v-for="t in teacherList" :key="t.id"
+              :color="selectedTeacherIds.length === 0 || selectedTeacherIds.includes(t.id) ? t.color : '#e8e8e8'"
+              :text-color="selectedTeacherIds.length === 0 || selectedTeacherIds.includes(t.id) ? '#fff' : '#999'"
+              @click="toggleTeacherFilter(t.id)"
+            >{{ 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;
-          await query_for_subsidiaries(start_date, end_date, subsidiaries.value.map(x => x.to_user_id))
-          await query_repeats_for_subsidiaries(start_date, end_date, subsidiaries.value.map(x => x.to_user_id))
+          const htyIds = subsidiaries.value.map(x => x.to_user_id);
+          return Promise.all([
+            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)
-      await query_repeats(start_date, end_date)
+      const key = `${start_date}|${end_date}|${usingUser.store.currentRole}`;

-      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: {
-        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'
-      },
+      headerToolbar: false,
      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;
-  grid-template-columns: auto minmax(0, 1fr) auto;
+  display: flex;
  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;
@@ -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: '',
@@ -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'
    }

@@ -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 = [];
Author	SHA1	Message	Date
weli	29db1b75ff	fix: FullCalendar getApi null 引用保护 Frontend CI / build (push) Failing after 14m22s draw()/redraw()/freeze() 在组件卸载后可能被异步触发，添加 calendar.value null 检查防止 TypeError。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-03 10:35:51 +08:00
weli	398ee9acfc	fix: landscape toolbar date range style matches regular toolbar Replaces bold centered date with nav arrows in landscape matrix view with the same view-toolbar__nav + view-toolbar__range pattern used by the regular toolbar (lighter font, wrapping text, consistent sizing). Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-03 10:35:37 +08:00
weli	766f511e11	fix: SUPERVISOR 角色打卡查询未设置 teacher_id，添加 debug 日志 - daka store query() SUPERVISOR 与 TEACHER 同等处理 - 添加 console.debug 日志便于 vConsole 排查 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-03 10:33:06 +08:00
weli	78c89cd2cc	fix: 主管教师首页改为 /teacher/home，非 /supervisor/subsidiaries 主管教师与教师共享 tabbar，首页应为本机构正常工作台，而非"我的下属老师"页面。 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-03 09:48:54 +08:00
weli	1bca764beb	fix: vConsole 异步加载 tags 后不显示的问题 getTags() 在 setCurrentUser() 之后异步执行，原 watch 无 deep:true 导致 store.current.tags 被 mutation 后不触发可见性更新。 - 原 watch 添加 deep:true - 提取 updateVConsoleVisibility 函数 - 新增独立 watch 监听 store.current.tags 变化 Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-03 09:44:03 +08:00
weli	3373c29506	perf: cache last query range, parallelize API calls to reduce loading latency - Add lastQueryKey to skip redundant API calls when same date range is re-queried - Run query / query_repeats / subsidiary queries in parallel with Promise.all - Force-refresh cache after CUD operations via search(true) - Update searchForSubsidiaries to accept params for independent invocation Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-03 09:22:37 +08:00
weli	4dafdf0bb1	fix: change calendar v-show to v-if to prevent FC layout break on view switch FC mis-calculates column widths when switching from hidden (v-show: none) to visible. Using v-if forces full remount with correct container dimensions. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-03 09:18:14 +08:00
weli	df66e768f3	fix: merge nav into single toolbar for both views, hide FC headerToolbar - Remove FC headerToolbar and its customButtons (prev/today/next/createClazz) - Add calendar navigation (navGoPrev/Today/Next) reading FC api - Unified .view-toolbar with nav + range for both calendar and matrix - calendarDateRange ref updated in datesSet, weekRange computed dispatches per view - Remove dead FC button CSS Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-03 09:14:27 +08:00
weli	e93f844a61	fix: move matrix nav/range into own toolbar below view-toolbar, matching calendar layout - .view-toolbar now only has view toggle (and orient button for matrix) - Matrix nav buttons (‹ 本周 ›) and date range moved to .matrix-toolbar inside matrix-page - Calender keeps FC's built-in headerToolbar — both views now share same layout pattern Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-03 09:09:23 +08:00
weli	fc8d7de10b	fix: style FullCalendar buttons as white-outlined to match matrix view Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>	2026-05-03 08:59:36 +08:00