classroom-instruments/src/App.tsx

import { computed, defineComponent, onMounted, onUnmounted } from 'vue';
import { NConfigProvider, zhCN, dateZhCN, NModal } from 'naive-ui';
import { AppProvider } from './components/Application';
import { RouterView } from 'vue-router';
import setting from './settings/designSetting';
import { lighten } from './utils';
// import RouterError from './components/RouterError';
import { useRegisterSW } from 'virtual:pwa-register/vue';
import { useUserStore } from './store/modules/users';
import UpdateTips from './update-tips';

export default defineComponent({
  name: 'App',
  setup() {
    // const { needRefresh, offlineReady, updateServiceWorker } = useRegisterSW({
    //   onRegistered(r: any) {
    //     console.log(r, 'registered');
    //     // if (r) {
    //     //   setInterval(() => {
    //     //     r.update(); // 手动触发更新检查
    //     //   }, 30000); // 每 30 秒检查一次
    //     // }
    //   },
    //   onNeedRefresh() {
    //     console.log('新版本可用！');
    //     alert('新版本可用！');
    //   },
    //   onOfflineReady() {
    //     console.log('离线功能就绪。');
    //   }
    // });
    const { needRefresh, updateServiceWorker } = useRegisterSW({
      onRegistered(r) {
        console.log(r, 'Service Worker 已注册');
        // 你可以在这里使用定时器手动检查更新
        if (r) {
          setInterval(() => {
            r.update(); // 每 30 秒检查一次更新
          }, 30000);
        }
      },
      onNeedRefresh() {
        console.log('onNeedRefresh 事件触发');
        console.log('needRefresh 状态:', needRefresh); // 确认 needRefresh 是否为 true
      },
      onOfflineReady() {
        console.log('离线功能已就绪');
      }
    });

    // const isIOSChrome = ref();
    // const showModalMask = ref(false);
    const getThemeOverrides = computed(() => {
      const appTheme = setting.appTheme;
      const lightenStr = lighten(setting.appTheme, 6);
      return {
        common: {
          primaryColor: appTheme,
          primaryColorHover: lightenStr,
          primaryColorPressed: lightenStr,
          errorColor: '#F51C08',
          errorColorHover: '#F51C08',
          errorColorPressed: '#F51C08'
        },
        LoadingBar: {
          colorLoading: appTheme
        }
      };
    });

    const handleOpen = (e: MessageEvent) => {
      if (e.data?.api === 'onLogin') {
        const userStore = useUserStore();
        // const router = useRouter();
        const documentDom: any = document;
        documentDom.exitFullscreen
          ? documentDom.exitFullscreen()
          : documentDom.mozCancelFullScreen
          ? documentDom.mozCancelFullScreen()
          : documentDom.webkitExitFullscreen
          ? documentDom.webkitExitFullscreen()
          : '';
        userStore.logout();
        history.go(0);
      }
    };

    onMounted(() => {
      window.addEventListener('message', handleOpen);
      // window.addEventListener('resize', resize);

      // 禁用右键菜单
      document.addEventListener('contextmenu', function (event) {
        event.preventDefault();
      });
      // 禁用浏览器快捷键
      document.addEventListener('keydown', function (event) {
        // 屏蔽 F12 和 Ctrl+Shift+I
        if (
          event.key === 'F12' ||
          (event.ctrlKey && event.shiftKey && event.key === 'I') ||
          (event.metaKey && event.altKey && event.key === 'I')
        ) {
          event.preventDefault();
        }
      });

    });
    onUnmounted(() => {
      // window.removeEventListener('resize', resize);
      window.removeEventListener('message', handleOpen);
    });

    return () => (
      <div>
        <NConfigProvider
          locale={zhCN}
          themeOverrides={getThemeOverrides.value}
          // :theme="getDarkTheme"
          // :theme-overrides="getThemeOverrides"
          dateLocale={dateZhCN}>
          <AppProvider>
            <RouterView />
            {/* <RouterError /> */}
          </AppProvider>
        </NConfigProvider>
        <NModal maskClosable={false} v-model:show={needRefresh.value}>
          <UpdateTips
            onConfirm={() => {
              needRefresh.value = false;
              updateServiceWorker(true)
                .then(() => {
                  console.log('Service Worker updated');
                  // 添加手动触发skipWaiting的逻辑
                  if (navigator.serviceWorker.controller) {
                    navigator.serviceWorker.controller.postMessage({
                      type: 'SKIP_WAITING'
                    });
                  }
                  setTimeout(() => {
                    window.location.reload();
                  }, 17);
                })
                .catch((err: any) => {
                  console.error('Update failed:', err);
                });
            }}
          />
        </NModal>

        {/* <NModal
          show={showModal.value}
          closeOnEsc={false}
          closable={false}
          maskClosable={false}
          preset="dialog"
          title="确认"
          content={showModalMsg.value}
          positive-text="确认"
          onPositiveClick={submitCallback}></NModal> */}
      </div>
    );
  }
});