Merge branch 'iteration-20240923-screenTips' into iteration-20250110-last

src/App.tsx

@@ -7,37 +7,14 @@ import { lighten } from './utils';
 import RouterError from './components/RouterError';
 import { useRegisterSW } from 'virtual:pwa-register/vue';
 import { useUserStore } from './store/modules/users';
-export function unregister() {
-  if ('serviceWorker' in navigator) {
-    // console.log('unregister - pwa');
-    // navigator.serviceWorker.ready.then(registration => {
-    //   registration.unregister();
-    // });
-    // navigator.serviceWorker
-    //   .getRegistrations()
-    //   .then(registrations => {
-    //     for (const registration of registrations) {
-    //       registration.unregister().then(boolean => {
-    //         if (boolean) {
-    //           console.log('Service Worker unregistered successfully');
-    //         } else {
-    //           console.log('Service Worker unregistration failed');
-    //         }
-    //       });
-    //     }
-    //   })
-    //   .catch(error => {
-    //     console.error('Error getting Service Worker registrations:', error);
-    //   });
-  } else {
-    console.log('Service Workers are not supported in this browser');
-  }
-}
+import { modalClickMask } from './state';
+import ScreenTips from './screen-tips';
 
 export default defineComponent({
   name: 'App',
   setup() {
-    const isIOSChrome = ref();
+    // const isIOSChrome = ref();
+    const showModalMask = ref(false);
     const getThemeOverrides = computed(() => {
       const appTheme = setting.appTheme;
       const lightenStr = lighten(setting.appTheme, 6);
@@ -177,6 +154,18 @@ export default defineComponent({
       }
     };
 
+    const resize = () => {
+      const params = {
+        width: document.body.clientWidth,
+        height: document.body.clientHeight
+      };
+      if (params.height >= params.width) {
+        showModalMask.value = true;
+      } else {
+        showModalMask.value = false;
+      }
+    };
+
     onMounted(() => {
       window.addEventListener('message', handleOpen);
 
@@ -217,8 +206,6 @@ export default defineComponent({
         }
       });
 
-      
-
       // console.log('app - onounted - test interval');
 
       // if ('serviceWorker' in navigator) {
@@ -236,11 +223,10 @@ export default defineComponent({
       // }
     });
     onUnmounted(() => {
+      window.removeEventListener('resize', resize);
       window.removeEventListener('message', handleOpen);
     });
 
-    // 卸载 pwa
-    unregister();
     return () => (
       <>
         <NConfigProvider
@@ -254,6 +240,11 @@ export default defineComponent({
             <RouterError />
           </AppProvider>
         </NConfigProvider>
+        <NModal
+          maskClosable={modalClickMask}
+          v-model:show={showModalMask.value}>
+          <ScreenTips />
+        </NModal>
         {/* <NModal
           show={showModal.value}
           closeOnEsc={false}

src/screen-tips/index.module.less

@@ -0,0 +1,52 @@
+.commonWork {
+    width: 560px;
+    background: #FFFFFF;
+    border-radius: 24px;
+    position: relative;
+    padding: 0 30px 35px;
+  
+    .downMoveBg {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 560px;
+      height: 121px;
+    }
+  
+    .dingPng {
+      width: 162px;
+      height: 98px;
+      position: absolute;
+      left: 50%;
+      margin-left: -81px;
+      top: -49px;
+      z-index: 100;
+    }
+  
+    h2 {
+      margin-top: 74px;
+      height: 33px;
+      font-size: max(24px, 18Px);
+      font-family: PingFangSC-Semibold, PingFang SC;
+      font-weight: 600;
+      color: #000000;
+      line-height: 33px;
+      text-align: center;
+      margin-bottom: 15px;
+    }
+  
+  
+    .header {
+      text-align: center;
+      padding: 25px 0 50px;
+      font-weight: 400;
+      font-size: max(18px, 14Px);
+      color: #777777;
+      line-height: max(30px, 18Px);
+
+      span {
+        color: #2784FF;
+      }
+    }
+  
+  }

src/screen-tips/index.tsx

@@ -0,0 +1,23 @@
+import { defineComponent } from 'vue';
+import styles from './index.module.less';
+import commentBg from './images/tip-bg.png';
+import commentTop from './images/tip-dang.png';
+
+export default defineComponent({
+  name: 'screen-tips',
+  setup() {
+
+
+    return () => (
+      <div class={styles.commonWork}>
+        <img src={commentTop} class={styles.dingPng} alt="" />
+        <img src={commentBg} class={styles.downMoveBg} alt="" />
+        <h2>温馨提示</h2>
+        
+        <div class={styles.header}>
+          为了更好的上课体验，请切换到<span>横屏模式</span>
+        </div>
+      </div>
+    );
+  }
+});