Parcourir la source

Merge branch 'iteration-20250110-last' into jenkins

lex-xin il y a 5 mois
Parent
commit
0badfc8f48

+ 43 - 60
package-lock.json

@@ -30,6 +30,7 @@
         "lodash": "^4.17.21",
         "lodash-es": "^4.17.21",
         "moveable": "^0.49.0",
+        "naive-ui": "^2.38.2",
         "numeral": "^2.0.6",
         "pinia": "^2.1.4",
         "plyr": "^3.7.8",
@@ -73,7 +74,6 @@
         "husky": "^8.0.0",
         "less": "^4.1.3",
         "lint-staged": "^13.2.2",
-        "naive-ui": "^2.38.1",
         "plop": "^3.1.2",
         "postcss-px-to-viewport": "^1.1.1",
         "prettier": "^2.8.7",
@@ -1615,18 +1615,17 @@
       }
     },
     "node_modules/@css-render/plugin-bem": {
-      "version": "0.15.12",
-      "dev": true,
-      "license": "MIT",
+      "version": "0.15.14",
+      "resolved": "https://registry.npmmirror.com/@css-render/plugin-bem/-/plugin-bem-0.15.14.tgz",
+      "integrity": "sha512-QK513CJ7yEQxm/P3EwsI+d+ha8kSOcjGvD6SevM41neEMxdULE+18iuQK6tEChAWMOQNQPLG/Rw3Khb69r5neg==",
       "peerDependencies": {
-        "css-render": "~0.15.12"
+        "css-render": "~0.15.14"
       }
     },
     "node_modules/@css-render/vue3-ssr": {
-      "version": "0.15.12",
-      "resolved": "https://registry.npmmirror.com/@css-render/vue3-ssr/-/vue3-ssr-0.15.12.tgz",
-      "integrity": "sha512-AQLGhhaE0F+rwybRCkKUdzBdTEM/5PZBYy+fSYe1T9z9+yxMuV/k7ZRqa4M69X+EI1W8pa4kc9Iq2VjQkZx4rg==",
-      "dev": true,
+      "version": "0.15.14",
+      "resolved": "https://registry.npmmirror.com/@css-render/vue3-ssr/-/vue3-ssr-0.15.14.tgz",
+      "integrity": "sha512-//8027GSbxE9n3QlD73xFY6z4ZbHbvrOVB7AO6hsmrEzGbg+h2A09HboUyDgu+xsmj7JnvJD39Irt+2D0+iV8g==",
       "peerDependencies": {
         "vue": "^3.0.11"
       }
@@ -1656,8 +1655,8 @@
     },
     "node_modules/@emotion/hash": {
       "version": "0.8.0",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmmirror.com/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
     "node_modules/@eslint-community/eslint-utils": {
       "version": "4.4.0",
@@ -1889,8 +1888,7 @@
     "node_modules/@juggle/resize-observer": {
       "version": "3.4.0",
       "resolved": "https://registry.npmmirror.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz",
-      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA==",
-      "dev": true
+      "integrity": "sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA=="
     },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
@@ -2324,8 +2322,7 @@
     "node_modules/@types/katex": {
       "version": "0.16.7",
       "resolved": "https://registry.npmmirror.com/@types/katex/-/katex-0.16.7.tgz",
-      "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ==",
-      "dev": true
+      "integrity": "sha512-HMwFiRujE5PjrgwHQ25+bsLJgowjGjm5Z8FVSf0N6PwgJrwxH0QxzHYDcKsTfV3wva0vzrpqMTJS2jXPr5BMEQ=="
     },
     "node_modules/@types/liftoff": {
       "version": "4.0.0",
@@ -2337,16 +2334,14 @@
       }
     },
     "node_modules/@types/lodash": {
-      "version": "4.17.0",
-      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.0.tgz",
-      "integrity": "sha512-t7dhREVv6dbNj0q17X12j7yDG4bD/DHYX7o5/DbDxobP0HnGPgpRz2Ej77aL7TZT3DSw13fqUTj8J4mMnqa7WA==",
-      "dev": true
+      "version": "4.17.14",
+      "resolved": "https://registry.npmmirror.com/@types/lodash/-/lodash-4.17.14.tgz",
+      "integrity": "sha512-jsxagdikDiDBeIRaPYtArcT8my4tN1og7MtMRquFT3XNA6axxyHDRUemqDz/taRDdOUn0GnGHRCuff4q48sW9A=="
     },
     "node_modules/@types/lodash-es": {
       "version": "4.17.12",
       "resolved": "https://registry.npmmirror.com/@types/lodash-es/-/lodash-es-4.17.12.tgz",
       "integrity": "sha512-0NgftHUcV4v34VhXm8QBSftKVXtbkBG3ViCjs6+eJ5a6y6Mi/jiFGPc1sC7QK+9BFhWrURE3EOggmWaSxL9OzQ==",
-      "dev": true,
       "dependencies": {
         "@types/lodash": "*"
       }
@@ -2932,10 +2927,6 @@
         "csstype": "^3.1.1"
       }
     },
-    "node_modules/@vue/runtime-dom/node_modules/csstype": {
-      "version": "3.1.2",
-      "license": "MIT"
-    },
     "node_modules/@vue/server-renderer": {
       "version": "3.3.4",
       "license": "MIT",
@@ -3168,8 +3159,8 @@
     },
     "node_modules/async-validator": {
       "version": "4.2.5",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmmirror.com/async-validator/-/async-validator-4.2.5.tgz",
+      "integrity": "sha512-7HhHjtERjqlNbZtqNqy2rckN/SpOOlmDliet+lP7k+eKZEjPk3DgyeU9lIXLdeLz0uBbbVp+9Qdow9wJWgwwfg=="
     },
     "node_modules/asynckit": {
       "version": "0.4.0",
@@ -3887,14 +3878,19 @@
       }
     },
     "node_modules/css-render": {
-      "version": "0.15.12",
-      "dev": true,
-      "license": "MIT",
+      "version": "0.15.14",
+      "resolved": "https://registry.npmmirror.com/css-render/-/css-render-0.15.14.tgz",
+      "integrity": "sha512-9nF4PdUle+5ta4W5SyZdLCCmFd37uVimSjg1evcTqKJCyvCEEj12WKzOSBNak6r4im4J4iYXKH1OWpUV5LBYFg==",
       "dependencies": {
         "@emotion/hash": "~0.8.0",
         "csstype": "~3.0.5"
       }
     },
+    "node_modules/css-render/node_modules/csstype": {
+      "version": "3.0.11",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.0.11.tgz",
+      "integrity": "sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw=="
+    },
     "node_modules/css-styled": {
       "version": "1.0.8",
       "license": "MIT",
@@ -3922,9 +3918,9 @@
       }
     },
     "node_modules/csstype": {
-      "version": "3.0.11",
-      "dev": true,
-      "license": "MIT"
+      "version": "3.1.3",
+      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
+      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
     "node_modules/custom-event-polyfill": {
       "version": "1.0.7",
@@ -4688,8 +4684,7 @@
     "node_modules/evtd": {
       "version": "0.2.4",
       "resolved": "https://registry.npmmirror.com/evtd/-/evtd-0.2.4.tgz",
-      "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw==",
-      "dev": true
+      "integrity": "sha512-qaeGN5bx63s/AXgQo8gj6fBkxge+OoLddLniox5qtLAEY5HSnuSlISXVPxnSae1dWblvTh4/HoMIB+mbMsvZzw=="
     },
     "node_modules/execa": {
       "version": "7.2.0",
@@ -5400,9 +5395,9 @@
       }
     },
     "node_modules/highlight.js": {
-      "version": "11.8.0",
-      "dev": true,
-      "license": "BSD-3-Clause",
+      "version": "11.11.1",
+      "resolved": "https://registry.npmmirror.com/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
       "engines": {
         "node": ">=12.0.0"
       }
@@ -7010,10 +7005,9 @@
       "license": "ISC"
     },
     "node_modules/naive-ui": {
-      "version": "2.38.1",
-      "resolved": "https://registry.npmmirror.com/naive-ui/-/naive-ui-2.38.1.tgz",
-      "integrity": "sha512-AnU1FQ7K/CbhguAX++V4kCFjk7h7RvWt4nvZPRjORMpq+fUIlzD+EcQ5Cv1VqDloNF8+eMv4Akc2Ogacc9S+5A==",
-      "dev": true,
+      "version": "2.38.2",
+      "resolved": "https://registry.npmmirror.com/naive-ui/-/naive-ui-2.38.2.tgz",
+      "integrity": "sha512-WhZ+6DW61aYSmFyfH7evcSGFmd2xR68Yq1mNRrVdJwBhZsnNdAUsMN9IeNCVEPMCND/jzYZghkStoNoR5Xa09g==",
       "dependencies": {
         "@css-render/plugin-bem": "^0.15.12",
         "@css-render/vue3-ssr": "^0.15.12",
@@ -7039,17 +7033,10 @@
         "vue": "^3.0.0"
       }
     },
-    "node_modules/naive-ui/node_modules/csstype": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmmirror.com/csstype/-/csstype-3.1.3.tgz",
-      "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "dev": true
-    },
     "node_modules/naive-ui/node_modules/date-fns-tz": {
       "version": "2.0.1",
       "resolved": "https://registry.npmmirror.com/date-fns-tz/-/date-fns-tz-2.0.1.tgz",
       "integrity": "sha512-fJCG3Pwx8HUoLhkepdsP7Z5RsucUi+ZBOxyM5d0ZZ6c4SdYustq0VMmOu6Wf7bli+yS/Jwp91TOCqn9jMcVrUA==",
-      "dev": true,
       "peerDependencies": {
         "date-fns": "2.x"
       }
@@ -8469,10 +8456,9 @@
       "optional": true
     },
     "node_modules/seemly": {
-      "version": "0.3.8",
-      "resolved": "https://registry.npmmirror.com/seemly/-/seemly-0.3.8.tgz",
-      "integrity": "sha512-MW8Qs6vbzo0pHmDpFSYPna+lwpZ6Zk1ancbajw/7E8TKtHdV+1DfZZD+kKJEhG/cAoB/i+LiT+5msZOqj0DwRA==",
-      "dev": true
+      "version": "0.3.9",
+      "resolved": "https://registry.npmmirror.com/seemly/-/seemly-0.3.9.tgz",
+      "integrity": "sha512-bMLcaEqhIViiPbaumjLN8t1y+JpD/N8SiyYOyp0i0W6RgdyLWboIsUWAbZojF//JyerxPZR5Tgda+x3Pdne75A=="
     },
     "node_modules/selecto": {
       "version": "1.26.0",
@@ -9111,8 +9097,8 @@
     },
     "node_modules/treemate": {
       "version": "0.3.11",
-      "dev": true,
-      "license": "MIT"
+      "resolved": "https://registry.npmmirror.com/treemate/-/treemate-0.3.11.tgz",
+      "integrity": "sha512-M8RGFoKtZ8dF+iwJfAJTOH/SM4KluKOKRJpjCMhI8bG3qB74zrFoArKZ62ll0Fr3mqkMJiQOmWYkdYgDeITYQg=="
     },
     "node_modules/tslib": {
       "version": "2.3.0",
@@ -9486,7 +9472,6 @@
       "version": "0.1.8",
       "resolved": "https://registry.npmmirror.com/vdirs/-/vdirs-0.1.8.tgz",
       "integrity": "sha512-H9V1zGRLQZg9b+GdMk8MXDN2Lva0zx72MPahDKc30v+DtwKjfyOSXWRIX4t2mhDubM1H09gPhWeth/BJWPHGUw==",
-      "dev": true,
       "dependencies": {
         "evtd": "^0.2.2"
       },
@@ -9649,7 +9634,6 @@
       "version": "0.2.12",
       "resolved": "https://registry.npmmirror.com/vooks/-/vooks-0.2.12.tgz",
       "integrity": "sha512-iox0I3RZzxtKlcgYaStQYKEzWWGAduMmq+jS7OrNdQo1FgGfPMubGL3uGHOU9n97NIvfFDBGnpSvkWyb/NSn/Q==",
-      "dev": true,
       "dependencies": {
         "evtd": "^0.2.2"
       },
@@ -9925,10 +9909,9 @@
       }
     },
     "node_modules/vueuc": {
-      "version": "0.4.58",
-      "resolved": "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.58.tgz",
-      "integrity": "sha512-Wnj/N8WbPRSxSt+9ji1jtDHPzda5h2OH/0sFBhvdxDRuyCZbjGg3/cKMaKqEoe+dErTexG2R+i6Q8S/Toq1MYg==",
-      "dev": true,
+      "version": "0.4.64",
+      "resolved": "https://registry.npmmirror.com/vueuc/-/vueuc-0.4.64.tgz",
+      "integrity": "sha512-wlJQj7fIwKK2pOEoOq4Aro8JdPOGpX8aWQhV8YkTW9OgWD2uj2O8ANzvSsIGjx7LTOc7QbS7sXdxHi6XvRnHPA==",
       "dependencies": {
         "@css-render/vue3-ssr": "^0.15.10",
         "@juggle/resize-observer": "^3.3.1",

+ 1 - 1
package.json

@@ -44,6 +44,7 @@
     "lodash": "^4.17.21",
     "lodash-es": "^4.17.21",
     "moveable": "^0.49.0",
+    "naive-ui": "^2.38.2",
     "numeral": "^2.0.6",
     "pinia": "^2.1.4",
     "plyr": "^3.7.8",
@@ -87,7 +88,6 @@
     "husky": "^8.0.0",
     "less": "^4.1.3",
     "lint-staged": "^13.2.2",
-    "naive-ui": "^2.38.1",
     "plop": "^3.1.2",
     "postcss-px-to-viewport": "^1.1.1",
     "prettier": "^2.8.7",

+ 25 - 26
postcss.config.js

@@ -1,26 +1,25 @@
-module.exports = {
-  plugins: {
-    'postcss-px-to-viewport': {
-      unitToConvert: 'px', // 需要转换的单位,默认为"px"
-      viewportWidth: 1920,
-      viewportHeight: 1188, // 设计稿的视口宽度
-      unitPrecision: 8, // 单位转换后保留的精度
-      propList: ['*'], // 能转化为vw的属性列表
-      viewportUnit: 'vw', // 希望使用的视口单位
-      fontViewportUnit: 'rem', // 字体使用的视口单位
-      selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
-      minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
-      mediaQuery: true, // 媒体查询里的单位是否需要转换单位
-      replace: true, //  是否直接更换属性值,而不添加备用属性
-      exclude: [
-        /src\/components\/layout\/guide-section/,
-        /node_modules\/driver.js/
-      ], // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
-      include: undefined, // 如果设置了include,那将只有匹配到的文件才会被转换
-      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
-      landscapeUnit: 'vw', // 横屏时使用的单位
-      landscapeWidth: 1920 // 横屏时使用的视口宽度
-    }
-  }
-};
-
+module.exports = {
+  plugins: {
+    'postcss-px-to-viewport': {
+      unitToConvert: 'px', // 需要转换的单位,默认为"px"
+      viewportWidth: 1920,
+      viewportHeight: 1188, // 设计稿的视口宽度
+      unitPrecision: 8, // 单位转换后保留的精度
+      propList: ['*'], // 能转化为vw的属性列表
+      viewportUnit: 'vw', // 希望使用的视口单位
+      fontViewportUnit: 'rem', // 字体使用的视口单位
+      selectorBlackList: [], // 需要忽略的CSS选择器,不会转为视口单位,使用原有的px等单位。
+      minPixelValue: 1, // 设置最小的转换数值,如果为1的话,只有大于1的值会被转换
+      mediaQuery: true, // 媒体查询里的单位是否需要转换单位
+      replace: true, //  是否直接更换属性值,而不添加备用属性
+      exclude: [
+        /src\/components\/layout\/guide-section/,
+        /node_modules\/driver.js/
+      ], // 忽略某些文件夹下的文件或特定文件,例如 'node_modules' 下的文件
+      include: undefined, // 如果设置了include,那将只有匹配到的文件才会被转换
+      landscape: false, // 是否添加根据 landscapeWidth 生成的媒体查询条件 @media (orientation: landscape)
+      landscapeUnit: 'vw', // 横屏时使用的单位
+      landscapeWidth: 1920 // 横屏时使用的视口宽度
+    }
+  }
+};

+ 1 - 1
public/version.json

@@ -1 +1 @@
-{"version":1736993633479}
+{"version":1737018827593}

+ 36 - 31
src/App.tsx

@@ -1,14 +1,13 @@
-import { computed, defineComponent, onMounted, ref, onUnmounted } from 'vue';
+import { computed, defineComponent, onMounted, onUnmounted } from 'vue';
 import { NConfigProvider, zhCN, dateZhCN, NModal } from 'naive-ui';
 import { AppProvider } from './components/Application';
-import { RouterView, useRouter } from 'vue-router';
+import { RouterView } from 'vue-router';
 import setting from './settings/designSetting';
 import { lighten } from './utils';
-import RouterError from './components/RouterError';
+// import RouterError from './components/RouterError';
 import { useRegisterSW } from 'virtual:pwa-register/vue';
 import { useUserStore } from './store/modules/users';
-import { modalClickMask } from './state';
-// import ScreenTips from './screen-tips';
+import UpdateTips from './update-tips';
 
 export default defineComponent({
   name: 'App',
@@ -16,14 +15,15 @@ export default defineComponent({
     const { needRefresh, offlineReady, updateServiceWorker } = useRegisterSW({
       onRegistered(r: any) {
         console.log(r, 'registered');
-
-        // r &&
-        //   setInterval(() => {
-        //     r.update();
-        //   }, 30000);
+        if (r) {
+          setInterval(() => {
+            r.update(); // 手动触发更新检查
+          }, 30000); // 每 30 秒检查一次
+        }
       },
       onNeedRefresh() {
         console.log('新版本可用!');
+        // alert('新版本可用!');
       },
       onOfflineReady() {
         console.log('离线功能就绪。');
@@ -194,19 +194,26 @@ export default defineComponent({
 
       // console.log('app - onounted - test interval');
 
-      // if ('serviceWorker' in navigator) {
-      //   navigator.serviceWorker.getRegistrations().then(registrations => {
-      //     for (const registration of registrations) {
-      //       if (registration.scope.startsWith(`https://${location.host}/`)) {
-      //         registration.unregister().then(() => {
-      //           console.log(
-      //             `Service Worker unregistered for https://${location.host}/`
-      //           );
-      //         });
-      //       }
-      //     }
-      //   });
-      // }
+      if ('serviceWorker' in navigator) {
+        // navigator.serviceWorker.addEventListener('message', event => {
+        //   console.log('messageType: ', event.data?.type);
+        //   if (event.data?.type === 'NEW_VERSION_AVAILABLE') {
+        //     console.log('New version available, refresh the page.');
+        //     // 可以提示用户刷新页面
+        //   }
+        // });
+        // navigator.serviceWorker.getRegistrations().then(registrations => {
+        //   for (const registration of registrations) {
+        //     if (registration.scope.startsWith(`https://${location.host}/`)) {
+        //       registration.unregister().then(() => {
+        //         console.log(
+        //           `Service Worker unregistered for https://${location.host}/`
+        //         );
+        //       });
+        //     }
+        //   }
+        // });
+      }
     });
     onUnmounted(() => {
       // window.removeEventListener('resize', resize);
@@ -214,7 +221,7 @@ export default defineComponent({
     });
 
     return () => (
-      <>
+      <div>
         <NConfigProvider
           locale={zhCN}
           themeOverrides={getThemeOverrides.value}
@@ -223,14 +230,12 @@ export default defineComponent({
           dateLocale={dateZhCN}>
           <AppProvider>
             <RouterView />
-            <RouterError />
+            {/* <RouterError /> */}
           </AppProvider>
         </NConfigProvider>
-        {/* <NModal
-          maskClosable={modalClickMask}
-          v-model:show={showModalMask.value}>
-          <ScreenTips />
-        </NModal> */}
+        <NModal maskClosable={false} v-model:show={needRefresh.value}>
+          <UpdateTips onConfirm={() => updateServiceWorker(true)} />
+        </NModal>
 
         <span style={{ display: 'none' }}>
           {needRefresh.value ? '新内容可用,点击刷新页面' : '没有新内容'}
@@ -248,7 +253,7 @@ export default defineComponent({
           content={showModalMsg.value}
           positive-text="确认"
           onPositiveClick={submitCallback}></NModal> */}
-      </>
+      </div>
     );
   }
 });

+ 1 - 1
src/components/CDatePicker/index.module.less

@@ -23,7 +23,7 @@
     width: max(16px, 14Px);
     height: max(16px, 14Px);
     position: absolute;
-    z-index: 500;
+    z-index: 5;
     left: 15px;
     --n-height: max(40px, 36Px) !important;
     top: max(11px, 11Px);

+ 35 - 35
src/components/RouterError/index.tsx

@@ -62,25 +62,25 @@ export default defineComponent({
       }
     });
     router.beforeEach(async (to, from, next) => {
-      const flag = await versionCheck();
-      console.log('路由之前弹窗', `refreshing${refreshing},flag:${flag}`);
-      if (flag && !refreshing) {
-        refreshing = true;
-        // console.log('修改刷新',refreshing)
-        sessionStorage.setItem('isRouter', 'true');
-        // reloadPage();
-        //   showModalMask.value = true
-        // setTimeout(()=>{
-        //   const dom = document.getElementById('updateModel')
-        //   if(isError&&!dom){
-        //     reloadPage()
-        //   }
-        // },1000)
+      // const flag = await versionCheck();
+      // console.log('路由之前弹窗', `refreshing${refreshing},flag:${flag}`);
+      // if (flag && !refreshing) {
+      //   refreshing = true;
+      //   // console.log('修改刷新',refreshing)
+      //   sessionStorage.setItem('isRouter', 'true');
+      //   // reloadPage();
+      //   //   showModalMask.value = true
+      //   // setTimeout(()=>{
+      //   //   const dom = document.getElementById('updateModel')
+      //   //   if(isError&&!dom){
+      //   //     reloadPage()
+      //   //   }
+      //   // },1000)
 
-        //   setTimeout(()=>{
-        //    sessionStorage.removeItem('isRouter')
-        //  },60000)
-      }
+      //   //   setTimeout(()=>{
+      //   //    sessionStorage.removeItem('isRouter')
+      //   //  },60000)
+      // }
       next();
     });
     const checkNewVersion = async () => {
@@ -107,27 +107,27 @@ export default defineComponent({
 
         // 尝试监听install
 
-        navigator.serviceWorker.addEventListener(
-          'controllerchange',
-          async () => {
-            console.log('controllerchange刷新', route.path, 'path');
-            const flag = await versionCheck();
-            if (refreshing || route.path == '/attend-class' || !flag) {
-              return;
-            }
-            const isRouter = sessionStorage.getItem('isRouter');
-            if (!isRouter) {
-              // showModalMask.value = true
-              // reloadPage();
-            }
-            refreshing = true;
-          }
-        );
+        // navigator.serviceWorker.addEventListener(
+        //   'controllerchange',
+        //   async () => {
+        //     console.log('controllerchange刷新', route.path, 'path');
+        //     const flag = await versionCheck();
+        //     if (refreshing || route.path == '/attend-class' || !flag) {
+        //       return;
+        //     }
+        //     const isRouter = sessionStorage.getItem('isRouter');
+        //     if (!isRouter) {
+        //       // showModalMask.value = true
+        //       // reloadPage();
+        //     }
+        //     refreshing = true;
+        //   }
+        // );
       }
     };
 
     console.log(route.path, 'route.path');
-    checkNewVersion();
+    // checkNewVersion();
     onBeforeUnmount(() => {
       sessionStorage.removeItem('isRouter');
       window.removeEventListener('error', isChromeError);

+ 77 - 99
src/components/layout/guide-section/guide-drag.ts

@@ -166,8 +166,8 @@ export default function useDrag(
     transformY: (window.innerHeight - 640) / 2,
     defaultWidth: initSize?.width || 400,
     defaultHeight: initSize?.height || 640,
-    height: initSize?.height || 640,
-    width: initSize?.width || 400
+    height: 0,
+    width: 0
   });
   const dragStyles = reactive({
     maxHeight: getSizeToUnit(baseSize.maxHeight),
@@ -175,76 +175,66 @@ export default function useDrag(
     minHeight: getSizeToUnit(baseSize.minHeight)
   });
 
-  nextTick(() => {
-    const layoutTopHeight =
-      document.querySelector('.layoutTop')?.clientHeight || 0;
-    baseSize.layoutTopHeight = Math.ceil(layoutTopHeight);
-    baseSize.windowHeight = window.innerHeight - layoutTopHeight;
-    baseSize.maxHeight = window.innerHeight - layoutTopHeight;
-    // 判断窗口的高度与默认高度比例
-    if (baseSize.defaultHeight >= baseSize.maxHeight) {
-      baseSize.defaultHeight = baseSize.maxHeight - 100;
-    }
-
-    const translateY = (baseSize.windowHeight - baseSize.defaultHeight) / 2;
-    baseSize.transformX =
-      baseSize.windowWidth - baseSize.defaultWidth - initPos.right;
-    baseSize.transformY = translateY;
-    dragStyles.maxHeight = getSizeToUnit(baseSize.maxHeight);
+  watch(dragShow, () => {
+    if (dragShow.value) {
+      // 初始化pos值
+      window.addEventListener('resize', refreshPos);
+      console.log('first - show', boxClass);
+      nextTick(() => {
+        const layoutTopHeight =
+          document.querySelector('.layoutTop')?.clientHeight || 0;
+        baseSize.layoutTopHeight = Math.ceil(layoutTopHeight);
+        baseSize.windowHeight = window.innerHeight - layoutTopHeight;
+        baseSize.maxHeight = window.innerHeight - layoutTopHeight;
+        // 判断窗口的高度与默认高度比例
+        if (baseSize.defaultHeight >= baseSize.maxHeight) {
+          baseSize.defaultHeight = baseSize.maxHeight - 100;
+        }
+        if (baseSize.winHeight >= baseSize.maxHeight) {
+          baseSize.winHeight = baseSize.maxHeight - 100;
+        }
 
-    // 初始化定位
-    if (initSize?.defaultPosition === 'center') {
-      // alert(initSize.width)
-      const transformX = (window.innerWidth - baseSize.defaultWidth) / 2;
-      const transformY = (baseSize.windowHeight - baseSize.defaultHeight) / 2;
-      baseSize.transformX = transformX;
-      baseSize.transformY = transformY;
-    }
+        const translateY = (baseSize.windowHeight - baseSize.defaultHeight) / 2;
+        baseSize.transformX =
+          baseSize.windowWidth - baseSize.defaultWidth - initPos.right;
+        baseSize.transformY = translateY;
+        dragStyles.maxHeight = getSizeToUnit(baseSize.maxHeight);
+
+        baseSize.width = baseSize.defaultWidth;
+        baseSize.height = baseSize.defaultHeight;
+
+        // 初始化定位
+        if (initSize?.defaultPosition === 'center') {
+          const transformX = (window.innerWidth - baseSize.defaultWidth) / 2;
+          const transformY =
+            (baseSize.windowHeight - baseSize.defaultHeight) / 2;
+          baseSize.transformX = transformX;
+          baseSize.transformY = transformY;
+        }
 
-    const boxClassDom = document.querySelector(`.${boxClass}`) as HTMLElement;
-    if (!boxClassDom) {
-      return;
+        const boxClassDom = document.querySelector(
+          `.${boxClass}`
+        ) as HTMLElement;
+        if (!boxClassDom) {
+          return;
+        }
+        addReSizeDom(boxClassDom, baseSize.resizeDirection);
+
+        classList.map((className: string) => {
+          const classDom = document.querySelector(
+            `.${className}`
+          ) as HTMLElement;
+          if (classDom) {
+            classDom.style.cursor = 'move';
+            drag(classDom, boxClassDom, baseSize);
+          }
+        });
+      });
+    } else {
+      window.removeEventListener('resize', refreshPos);
     }
-    addReSizeDom(boxClassDom, baseSize.resizeDirection);
-
-    classList.map((className: string) => {
-      const classDom = document.querySelector(`.${className}`) as HTMLElement;
-      if (classDom) {
-        classDom.style.cursor = 'move';
-        drag(classDom, boxClassDom, baseSize);
-      }
-    });
   });
 
-  // watch(dragShow, () => {
-  //   if (dragShow.value) {
-  //     // 初始化pos值
-  //     // initPos();
-  //     window.addEventListener('resize', refreshPos);
-  //     // nextTick(() => {
-  //     //   const boxClassDom = document.querySelector(
-  //     //     `.${boxClass}`
-  //     //   ) as HTMLElement;
-  //     //   if (!boxClassDom) {
-  //     //     return;
-  //     //   }
-  //     //   console.log(boxClassDom, 'boxClassDom');
-  //     //   classList.map((className: string) => {
-  //     //     const classDom = document.querySelector(
-  //     //       `.${className}`
-  //     //     ) as HTMLElement;
-  //     //     if (classDom) {
-  //     //       classDom.style.cursor = 'move';
-  //     //       drag(classDom, boxClassDom, baseSize);
-  //     //     }
-  //     //   });
-  //     // });
-
-  //   } else {
-  //     window.removeEventListener('resize', refreshPos);
-  //   }
-  // });
-
   /**
    * 添加功能放大缩小操作DOM
    * @param parentElement {添加拖动父级元素}
@@ -373,29 +363,13 @@ export default function useDrag(
   }
 
   function refreshPos() {
-    // if (pos.value.left === -1 && pos.value.top === -1) {
-    //   return;
-    // }
-    // const boxClassDom = document.querySelector(`.${boxClass}`) as HTMLElement;
-    // if (!boxClassDom) return;
-    // const parentElementRect = boxClassDom.getBoundingClientRect();
-    // const clientWidth = document.documentElement.clientWidth;
-    // const clientHeight = document.documentElement.clientHeight;
-    // const { top, left } = pos.value;
-    // const maxLeft = clientWidth - parentElementRect.width;
-    // const maxTop = clientHeight - parentElementRect.height;
-    // let moveX = left;
-    // let moveY = top;
-    // const minLeft = 0;
-    // const minTop = 0;
-    // moveX = moveX < minLeft ? minLeft : moveX > maxLeft ? maxLeft : moveX;
-    // moveY = moveY < minTop ? minTop : moveY > maxTop ? maxTop : moveY;
-    // pos.value = {
-    //   top: moveY,
-    //   left: moveX
-    // };
-
-    onReset();
+    baseSize.winMinWidth = initSize?.minWidth || 800;
+    baseSize.minWidth = initSize?.minWidth || 400;
+    baseSize.minHeight = initSize?.minHeight || 340;
+    baseSize.defaultWidth = initSize?.width || 400;
+    baseSize.defaultHeight = initSize?.height || 640;
+
+    dragShow.value = false;
   }
 
   /** 切换窗口 */
@@ -410,15 +384,19 @@ export default function useDrag(
       baseSize.height = baseSize.winHeight;
     } else if (windowInfo.windowType === 'LARGE') {
       windowInfo.windowType = 'SMALL';
-      const translateY = (baseSize.windowHeight - baseSize.defaultHeight) / 2;
-      baseSize.transformX =
-        baseSize.windowWidth - baseSize.defaultWidth - initPos.right;
-      baseSize.transformY =
-        translateY > initPos.top
-          ? translateY + (translateY - initPos.top)
-          : translateY;
-      baseSize.width = baseSize.defaultWidth;
-      baseSize.height = baseSize.defaultHeight;
+      if (windowInfo.currentType === 'SMALL') {
+        baseSize.transformX =
+          baseSize.windowWidth - baseSize.defaultWidth - initPos.right;
+        baseSize.transformY =
+          baseSize.windowHeight - baseSize.defaultHeight - initPos.top;
+        baseSize.width = baseSize.defaultWidth;
+        baseSize.height = baseSize.defaultHeight;
+      } else if (windowInfo.currentType === 'LARGE') {
+        baseSize.transformX = baseSize.windowWidth - baseSize.defaultWidth;
+        baseSize.transformY = 0;
+        baseSize.width = baseSize.defaultWidth;
+        baseSize.height = baseSize.maxHeight;
+      }
     }
   }
 

+ 6 - 3
src/components/layout/guide-section/index.module.less

@@ -171,7 +171,7 @@
       border-top: none !important;
       margin-top: 0;
       .n-collapse-item__header {
-        padding: 9px 0;
+        padding: 12px 0;
       }
     }
     // .n-collapse .n-collapse-item:not(:first-child)
@@ -193,11 +193,13 @@
     color: #333333;
     line-height: 20px;
     // margin-top: 8Px;
+    margin-bottom: 6px;
     cursor: pointer;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
-    &:hover {
+    &:hover,
+    &.active {
       color: #097bec;
       background: #e8f4ff;
       border-radius: 6px;
@@ -269,7 +271,7 @@
   background: #ffffff;
   box-shadow: -2px 5px 12px 0px rgba(0, 0, 0, 0.12);
   // border: 1px solid #e8e8e8;
-  border-radius: 12Px !important;
+  border-radius: 12px !important;
   overflow: hidden !important;
   display: flex;
   flex-direction: column;
@@ -279,3 +281,4 @@
     }
   }
 }
+

+ 25 - 27
src/components/layout/guide-section/index.tsx

@@ -9,6 +9,7 @@ import {
 } from 'vue';
 import styles from './index.module.less';
 import {
+  ImageRenderToolbarProps,
   NCollapse,
   NCollapseItem,
   NImage,
@@ -74,7 +75,7 @@ export default defineComponent({
         windowInfo.showType === 'CONTENT' &&
         windowInfo.windowType === 'SMALL'
       ) {
-        name = '返回';
+        name = opInfo.manualDetail?.name || '返回';
       }
       return name;
     });
@@ -208,14 +209,6 @@ export default defineComponent({
     window.onLookVideo = (target: any) => {
       const sourceElement = target.querySelector('source');
       const videoSrc = sourceElement ? sourceElement.src : null;
-      // previewUrl.value = '';
-
-      // nextTick(() => {
-      //   setTimeout(() => {
-      //     previewUrl.value = videoSrc;
-      //     previewShow.value = true;
-      //   }, 0);
-      // });
       previewUrl.value = videoSrc;
       previewShow.value = true;
     };
@@ -286,8 +279,8 @@ export default defineComponent({
                       <TheSearch
                         round={false}
                         v-model:value={opInfo.searchValue}
-                        onSearch={async (val: any) => {
-                          await getTeacherManual(val);
+                        onSearch={async () => {
+                          await getTeacherManual();
                           if (windowInfo.windowType === 'LARGE') {
                             const id = opInfo.dataList[0]?.children[0]?.id;
                             id && getTeacherManualDetail(id);
@@ -308,7 +301,13 @@ export default defineComponent({
                                 {item.children &&
                                   item.children.map((child: any) => (
                                     <div
-                                      class={styles.childItem}
+                                      class={[
+                                        styles.childItem,
+                                        windowInfo.windowType === 'LARGE' &&
+                                        child.id === opInfo.manualDetail?.id
+                                          ? styles.active
+                                          : ''
+                                      ]}
                                       onClick={() => onClickItem(child)}>
                                       {child.name}
                                     </div>
@@ -336,23 +335,22 @@ export default defineComponent({
                         : 'none'
                   }}>
                   {previewImgList.value.length > 0 && (
-                    <NImageGroup>
+                    <NImageGroup
+                      renderToolbar={({ nodes }: ImageRenderToolbarProps) => {
+                        return [
+                          nodes.prev,
+                          nodes.next,
+                          nodes.rotateCounterclockwise,
+                          nodes.rotateClockwise,
+                          nodes.resizeToOriginalSize,
+                          nodes.zoomOut,
+                          nodes.zoomIn,
+                          nodes.close
+                        ];
+                      }}>
                       <NSpace>
                         {previewImgList.value.map((src: string) => (
-                          <NImage
-                            renderToolbar={({ nodes }: any) => {
-                              return [
-                                nodes.prev,
-                                nodes.next,
-                                nodes.rotateCounterclockwise,
-                                nodes.rotateClockwise,
-                                nodes.resizeToOriginalSize,
-                                nodes.zoomOut,
-                                nodes.close
-                              ];
-                            }}
-                            width="0"
-                            src={src}></NImage>
+                          <NImage width="0" src={src}></NImage>
                         ))}
                       </NSpace>
                     </NImageGroup>

+ 189 - 192
src/components/layout/layoutSilder.tsx

@@ -1,192 +1,189 @@
-import { defineComponent, onMounted, reactive } from 'vue';
-import { NImage, NScrollbar } from 'naive-ui';
-import styles from './index.module.less';
-import logo from './images/logo.png';
-import classIcon from './images/classIcon.png';
-import classNormal from './images/classNormal.png';
-import indexIcon from './images/indexIcon.png';
-import indexNormal from './images/indexNormal.png';
-import kuIcon from './images/kuIcon.png';
-import kuNormal from './images/kuNormal.png';
-import palyIcon from './images/palyIcon.png';
-import palyNormal from './images/palyNormal.png';
-import resourceIcon from './images/resourceIcon.png';
-import resourceNormal from './images/resourceNormal.png';
-import setIcon from './images/setIcon.png';
-import setNormal from './images/setNormal.png';
-import studentIcon from './images/studentIcon.png';
-import studentNormal from './images/studentNormal.png';
-import dataIcon from './images/dataIcon.png';
-import dataNormal from './images/dataNormal.png';
-import SilderItem from './modals/silderItem';
-import icon_1_1 from './images/icon_1_1.png';
-import icon_1_2 from './images/icon_1_2.png';
-import iconHomeWork from './images/icon-homework.png';
-import iconHomeWorkActive from './images/icon-homework-active.png';
-import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
-import { usePrepareStore } from '/src/store/modules/prepareLessons';
-import { eventGlobal } from '/src/utils';
-export default defineComponent({
-  name: 'layoutSilder',
-  setup() {
-    const prepareStore = usePrepareStore();
-    const router = useRouter();
-    const route = useRoute();
-    const itemInfoList = reactive([
-      {
-        activeIcon: indexIcon,
-        name: '主页',
-        normalIcon: indexNormal,
-        isActive: true,
-        id: 1,
-        path: '/',
-        lightList: [
-          '/content-instruments',
-          '/content-instruments-detail',
-          '/content-musician',
-          '/content-music',
-          '/content-music-detail',
-          '/content-knowledge'
-        ]
-      },
-      {
-        activeIcon: classIcon,
-        name: '班级',
-        normalIcon: classNormal,
-        isActive: false,
-        id: 3,
-        path: '/classList',
-        lightList: [
-          '/classDetail',
-          '/classStudentRecode',
-          '/afterWorkDetail',
-          '/classStudentDetail'
-        ]
-      },
-      {
-        activeIcon: studentIcon,
-        name: '学生',
-        normalIcon: studentNormal,
-        isActive: false,
-        id: 2,
-        path: '/studentList',
-        lightList: ['/studentDetail'] //小酷AI的灯光列表
-      },
-
-      {
-        activeIcon: palyIcon,
-        name: '备课',
-        normalIcon: palyNormal,
-        isActive: false,
-        id: 4,
-        path: '/prepare-lessons'
-      },
-      {
-        activeIcon: iconHomeWorkActive,
-        name: '作业',
-        normalIcon: iconHomeWork,
-        isActive: false,
-        id: 9,
-        path: '/homework-record',
-        lightList: ['/homework-record-detail']
-      },
-      {
-        activeIcon: icon_1_1,
-        name: '制谱',
-        normalIcon: icon_1_2,
-        isActive: false,
-        id: 8,
-        path: '/notation'
-      },
-      {
-        activeIcon: kuIcon,
-        name: 'AI学练',
-        normalIcon: kuNormal,
-        isActive: false,
-        id: 5,
-        lightList: ['/xiaoku-detail'], //AI学练的灯光列表
-        path: '/xiaoku-list'
-      },
-      {
-        activeIcon: resourceIcon,
-        name: '资源',
-        normalIcon: resourceNormal,
-        isActive: false,
-        id: 6,
-        path: '/natural-resources'
-      },
-      {
-        activeIcon: dataIcon,
-        name: '数据',
-        normalIcon: dataNormal,
-        isActive: false,
-        id: 7,
-        path: '/data-module'
-      }
-
-      // {
-      //   activeIcon: setIcon,
-      //   name: '设置',
-      //   normalIcon: setNormal,
-      //   isActive: false,
-      //   id: 8,
-      //   path: '/setting'
-      // }
-    ]);
-    const checkNavBar = (item: any) => {
-      itemInfoList.forEach((now: any) => {
-        now.isActive = false;
-        if (now.id == item.id) {
-          now.isActive = true;
-          item.path && router.push(item.path);
-        }
-      });
-    };
-
-    onBeforeRouteUpdate((to: any) => {
-      checkPathChange(to.path);
-    });
-
-    const checkPathChange = (path: string) => {
-      itemInfoList.forEach((now: any) => {
-        now.isActive = false;
-        if (now.path === path || now.lightList?.includes(path)) {
-          now.isActive = true;
-        }
-      });
-    };
-
-    onMounted(() => {
-      checkPathChange(route.path);
-    });
-    return () => (
-      <>
-        <div class={styles.silder}>
-          <div class={styles.logoWrap}>
-            <NImage
-              class={styles.logo}
-              src={logo}
-              previewDisabled={true}></NImage>
-          </div>
-          <NScrollbar class={styles.sliderList}>
-            {itemInfoList.map((item: any) => (
-              <SilderItem
-                onCheckNavBar={() => {
-                  // 检测是否有未保存数据
-                  if (prepareStore.getIsEditResource) {
-                    eventGlobal.emit('pageBeforeLeave', () =>
-                      checkNavBar(item)
-                    );
-                  } else {
-                    checkNavBar(item);
-                  }
-                }}
-                item={item}
-              />
-            ))}
-          </NScrollbar>
-        </div>
-      </>
-    );
-  }
-});
+import { defineComponent, onMounted, reactive } from 'vue';
+import { NImage, NScrollbar } from 'naive-ui';
+import styles from './index.module.less';
+import logo from './images/logo.png';
+import classIcon from './images/classIcon.png';
+import classNormal from './images/classNormal.png';
+import indexIcon from './images/indexIcon.png';
+import indexNormal from './images/indexNormal.png';
+import kuIcon from './images/kuIcon.png';
+import kuNormal from './images/kuNormal.png';
+import palyIcon from './images/palyIcon.png';
+import palyNormal from './images/palyNormal.png';
+import resourceIcon from './images/resourceIcon.png';
+import resourceNormal from './images/resourceNormal.png';
+import setIcon from './images/setIcon.png';
+import setNormal from './images/setNormal.png';
+import studentIcon from './images/studentIcon.png';
+import studentNormal from './images/studentNormal.png';
+import dataIcon from './images/dataIcon.png';
+import dataNormal from './images/dataNormal.png';
+import SilderItem from './modals/silderItem';
+import icon_1_1 from './images/icon_1_1.png';
+import icon_1_2 from './images/icon_1_2.png';
+import iconHomeWork from './images/icon-homework.png';
+import iconHomeWorkActive from './images/icon-homework-active.png';
+import { onBeforeRouteUpdate, useRoute, useRouter } from 'vue-router';
+import { usePrepareStore } from '/src/store/modules/prepareLessons';
+import { eventGlobal } from '/src/utils';
+export default defineComponent({
+  name: 'layoutSilder',
+  setup() {
+    const prepareStore = usePrepareStore();
+    const router = useRouter();
+    const route = useRoute();
+    const itemInfoList = reactive([
+      {
+        activeIcon: indexIcon,
+        name: '主页',
+        normalIcon: indexNormal,
+        isActive: true,
+        id: 1,
+        path: '/',
+        lightList: [
+          '/content-instruments',
+          '/content-instruments-detail',
+          '/content-musician',
+          '/content-music',
+          '/content-music-detail',
+          '/content-knowledge'
+        ]
+      },
+      {
+        activeIcon: classIcon,
+        name: '班级',
+        normalIcon: classNormal,
+        isActive: false,
+        id: 3,
+        path: '/classList',
+        lightList: [
+          '/classDetail',
+          '/classStudentRecode',
+          '/afterWorkDetail',
+          '/classStudentDetail'
+        ]
+      },
+      {
+        activeIcon: studentIcon,
+        name: '学生',
+        normalIcon: studentNormal,
+        isActive: false,
+        id: 2,
+        path: '/studentList',
+        lightList: ['/studentDetail'] //小酷AI的灯光列表
+      },
+
+      {
+        activeIcon: palyIcon,
+        name: '备课',
+        normalIcon: palyNormal,
+        isActive: false,
+        id: 4,
+        path: '/prepare-lessons'
+      },
+      {
+        activeIcon: iconHomeWorkActive,
+        name: '作业',
+        normalIcon: iconHomeWork,
+        isActive: false,
+        id: 9,
+        path: '/homework-record',
+        lightList: ['/homework-record-detail']
+      },
+      {
+        activeIcon: icon_1_1,
+        name: '制谱',
+        normalIcon: icon_1_2,
+        isActive: false,
+        id: 8,
+        path: '/notation'
+      },
+      {
+        activeIcon: kuIcon,
+        name: 'AI学练',
+        normalIcon: kuNormal,
+        isActive: false,
+        id: 5,
+        lightList: ['/xiaoku-detail'], //AI学练的灯光列表
+        path: '/xiaoku-list'
+      },
+      {
+        activeIcon: resourceIcon,
+        name: '资源',
+        normalIcon: resourceNormal,
+        isActive: false,
+        id: 6,
+        path: '/natural-resources'
+      },
+      {
+        activeIcon: dataIcon,
+        name: '数据',
+        normalIcon: dataNormal,
+        isActive: false,
+        id: 7,
+        path: '/data-module'
+      }
+
+      // {
+      //   activeIcon: setIcon,
+      //   name: '设置',
+      //   normalIcon: setNormal,
+      //   isActive: false,
+      //   id: 8,
+      //   path: '/setting'
+      // }
+    ]);
+    const checkNavBar = (item: any) => {
+      itemInfoList.forEach((now: any) => {
+        now.isActive = false;
+        if (now.id == item.id) {
+          now.isActive = true;
+          if (item.path === route.path) return;
+          item.path && router.push(item.path);
+        }
+      });
+    };
+
+    onBeforeRouteUpdate((to: any) => {
+      checkPathChange(to.path);
+    });
+
+    const checkPathChange = (path: string) => {
+      itemInfoList.forEach((now: any) => {
+        now.isActive = false;
+        if (now.path === path || now.lightList?.includes(path)) {
+          now.isActive = true;
+        }
+      });
+    };
+
+    onMounted(() => {
+      checkPathChange(route.path);
+    });
+    return () => (
+      <div class={styles.silder}>
+        <div class={styles.logoWrap}>
+          <NImage
+            class={styles.logo}
+            src={logo}
+            previewDisabled={true}></NImage>
+        </div>
+        <NScrollbar class={styles.sliderList}>
+          {itemInfoList.map((item: any) => (
+            <SilderItem
+              onCheckNavBar={() => {
+                // 检测是否有未保存数据
+                if (prepareStore.getIsEditResource) {
+                  eventGlobal.emit('pageBeforeLeave', () => checkNavBar(item));
+                } else {
+                  checkNavBar(item);
+                }
+              }}
+              item={item}
+            />
+          ))}
+        </NScrollbar>
+      </div>
+    );
+  }
+});

+ 144 - 146
src/router/router-guards.ts

@@ -1,146 +1,144 @@
-import { isNavigationFailure, Router } from 'vue-router';
-import { useUserStore } from '@/store/modules/users';
-import { storage } from '@/utils/storage';
-import { PageEnum } from '@/enums/pageEnum';
-import { ACCESS_TOKEN, ACCESS_TOKEN_ADMIN } from '@/store/mutation-types';
-import { getAuthForAdmin } from '../utils';
-
-const LOGIN_PATH = PageEnum.BASE_LOGIN;
-
-const whitePathList = [LOGIN_PATH]; // no redirect whitelist
-const isChrome = () => {
-  const isChromium = (window as any).chrome;
-  const winNav = window.navigator;
-  const vendorName = winNav.vendor;
-  const isOpera = typeof (window as any).opr !== 'undefined';
-  const isIEedge = winNav.userAgent.indexOf('Edge') > -1;
-  const isIOSChrome = winNav.userAgent.match('CriOS');
-  return (
-    isIOSChrome ||
-    (isChromium !== null &&
-      typeof isChromium !== 'undefined' &&
-      vendorName === 'Google Inc.' &&
-      isOpera === false &&
-      isIEedge === false)
-  );
-};
-export function createRouterGuards(router: Router) {
-  const userStore = useUserStore();
-  router.beforeEach(async (to, from, next) => {
-    if (to.path === '/attend-class') {
-      let title = to.meta.title;
-      if (to.query.type === 'preview') {
-        title = '预览课件';
-      }
-      (document as any).title = title ? title : ('音乐数字课堂' as string);
-    } else {
-      (document as any).title = to.meta.title
-        ? to.meta.title
-        : ('音乐数字课堂' as string);
-    }
-
-    if ('serviceWorker' in navigator) {
-      console.log(caches.keys(), 'caches.keys()');
-      caches.keys().then(function (cacheNames) {
-        cacheNames.forEach(function (cacheName) {
-          caches.delete(cacheName);
-        });
-      });
-    }
-    if (!isChrome()) {
-      return;
-    }
-    window.$loadingBar && window.$loadingBar.start();
-
-    // console.log(window.$loadingBar, '232332');
-    if (from.path === LOGIN_PATH && to.name === 'errorPage') {
-      next(PageEnum.BASE_HOME);
-      return;
-    }
-
-    // Whitelist can be directly entered
-    if (whitePathList.includes(to.path as PageEnum)) {
-      next();
-      return;
-    }
-
-
-    // 为了处理课堂乐器后台预览课件的功能
-    // const authSource = sessionStorage.getItem('authSource');
-    const userAuth = getAuthForAdmin()
-    let token = "";
-    if (userAuth.authSource === 'admin') {
-      token = userAuth.Authorization;
-    } else {
-      token = storage.get(ACCESS_TOKEN)
-    }
-    // console.log(token, 'access token');
-    if (!token) {
-      // You can access without permissions. You need to set the routing meta.ignoreAuth to true
-      if (to.meta.ignoreAuth) {
-        next();
-        return;
-      }
-      // redirect login page
-      const redirectData: { path: string; replace: boolean; query?: any } = {
-        path: LOGIN_PATH,
-        replace: true
-      };
-
-      if (to.path) {
-        redirectData.query = {
-          ...redirectData.query,
-          redirect: to.path
-        };
-      }
-      console.log(redirectData, to);
-      next(redirectData);
-      return;
-    }
-
-    if(!userStore.getNickname) {
-      await userStore.getInfo();
-    }
-    
-
-    // const redirectPath = (from.query.redirect || to.path) as string;
-    // const redirect = decodeURIComponent(redirectPath);
-    // const nextData =
-    //   to.path === redirect ? { ...to, replace: true } : { path: redirect };
-    // next(nextData);
-    next();
-    // window.$loadingBar && window.$loadingBar.finish();
-  });
-
-  router.afterEach((to, _, failure) => {
-    if (isNavigationFailure(failure)) {
-      console.log('failed navigation', failure);
-    }
-    // const asyncRouteStore = useAsyncRouteStoreWidthOut();
-    // // 在这里设置需要缓存的组件名称
-    // const keepAliveComponents = asyncRouteStore.keepAliveComponents;
-    // const currentComName: any = to.matched.find(
-    //   item => item.name == to.name
-    // )?.name;
-    // if (
-    //   currentComName &&
-    //   !keepAliveComponents.includes(currentComName) &&
-    //   to.meta?.keepAlive
-    // ) {
-    //   // 需要缓存的组件
-    //   keepAliveComponents.push(currentComName);
-    // } else if (!to.meta?.keepAlive || to.name == 'Redirect') {
-    //   // 不需要缓存的组件
-    //   const index = asyncRouteStore.keepAliveComponents.findIndex(
-    //     name => name == currentComName
-    //   );
-    //   if (index != -1) {
-    //     keepAliveComponents.splice(index, 1);
-    //   }
-    // }
-    // asyncRouteStore.setKeepAliveComponents(keepAliveComponents);
-    window.$loadingBar && window.$loadingBar.finish();
-  });
-
-  // router.onError(error => {});
-}
+import { isNavigationFailure, Router } from 'vue-router';
+import { useUserStore } from '@/store/modules/users';
+import { storage } from '@/utils/storage';
+import { PageEnum } from '@/enums/pageEnum';
+import { ACCESS_TOKEN, ACCESS_TOKEN_ADMIN } from '@/store/mutation-types';
+import { getAuthForAdmin } from '../utils';
+
+const LOGIN_PATH = PageEnum.BASE_LOGIN;
+
+const whitePathList = [LOGIN_PATH]; // no redirect whitelist
+const isChrome = () => {
+  const isChromium = (window as any).chrome;
+  const winNav = window.navigator;
+  const vendorName = winNav.vendor;
+  const isOpera = typeof (window as any).opr !== 'undefined';
+  const isIEedge = winNav.userAgent.indexOf('Edge') > -1;
+  const isIOSChrome = winNav.userAgent.match('CriOS');
+  return (
+    isIOSChrome ||
+    (isChromium !== null &&
+      typeof isChromium !== 'undefined' &&
+      vendorName === 'Google Inc.' &&
+      isOpera === false &&
+      isIEedge === false)
+  );
+};
+export function createRouterGuards(router: Router) {
+  const userStore = useUserStore();
+  router.beforeEach(async (to, from, next) => {
+    if (to.path === '/attend-class') {
+      let title = to.meta.title;
+      if (to.query.type === 'preview') {
+        title = '预览课件';
+      }
+      (document as any).title = title ? title : ('音乐数字课堂' as string);
+    } else {
+      (document as any).title = to.meta.title
+        ? to.meta.title
+        : ('音乐数字课堂' as string);
+    }
+
+    // if ('serviceWorker' in navigator) {
+    //   console.log(caches.keys(), 'caches.keys()');
+    //   caches.keys().then(function (cacheNames) {
+    //     cacheNames.forEach(function (cacheName) {
+    //       caches.delete(cacheName);
+    //     });
+    //   });
+    // }
+    if (!isChrome()) {
+      return;
+    }
+    window.$loadingBar && window.$loadingBar.start();
+
+    // console.log(window.$loadingBar, '232332');
+    if (from.path === LOGIN_PATH && to.name === 'errorPage') {
+      next(PageEnum.BASE_HOME);
+      return;
+    }
+
+    // Whitelist can be directly entered
+    if (whitePathList.includes(to.path as PageEnum)) {
+      next();
+      return;
+    }
+
+    // 为了处理课堂乐器后台预览课件的功能
+    // const authSource = sessionStorage.getItem('authSource');
+    const userAuth = getAuthForAdmin();
+    let token = '';
+    if (userAuth.authSource === 'admin') {
+      token = userAuth.Authorization;
+    } else {
+      token = storage.get(ACCESS_TOKEN);
+    }
+    // console.log(token, 'access token');
+    if (!token) {
+      // You can access without permissions. You need to set the routing meta.ignoreAuth to true
+      if (to.meta.ignoreAuth) {
+        next();
+        return;
+      }
+      // redirect login page
+      const redirectData: { path: string; replace: boolean; query?: any } = {
+        path: LOGIN_PATH,
+        replace: true
+      };
+
+      if (to.path) {
+        redirectData.query = {
+          ...redirectData.query,
+          redirect: to.path
+        };
+      }
+      console.log(redirectData, to);
+      next(redirectData);
+      return;
+    }
+
+    if (!userStore.getNickname) {
+      await userStore.getInfo();
+    }
+
+    // const redirectPath = (from.query.redirect || to.path) as string;
+    // const redirect = decodeURIComponent(redirectPath);
+    // const nextData =
+    //   to.path === redirect ? { ...to, replace: true } : { path: redirect };
+    // next(nextData);
+    next();
+    // window.$loadingBar && window.$loadingBar.finish();
+  });
+
+  router.afterEach((to, _, failure) => {
+    if (isNavigationFailure(failure)) {
+      console.log('failed navigation', failure);
+    }
+    // const asyncRouteStore = useAsyncRouteStoreWidthOut();
+    // // 在这里设置需要缓存的组件名称
+    // const keepAliveComponents = asyncRouteStore.keepAliveComponents;
+    // const currentComName: any = to.matched.find(
+    //   item => item.name == to.name
+    // )?.name;
+    // if (
+    //   currentComName &&
+    //   !keepAliveComponents.includes(currentComName) &&
+    //   to.meta?.keepAlive
+    // ) {
+    //   // 需要缓存的组件
+    //   keepAliveComponents.push(currentComName);
+    // } else if (!to.meta?.keepAlive || to.name == 'Redirect') {
+    //   // 不需要缓存的组件
+    //   const index = asyncRouteStore.keepAliveComponents.findIndex(
+    //     name => name == currentComName
+    //   );
+    //   if (index != -1) {
+    //     keepAliveComponents.splice(index, 1);
+    //   }
+    // }
+    // asyncRouteStore.setKeepAliveComponents(keepAliveComponents);
+    window.$loadingBar && window.$loadingBar.finish();
+  });
+
+  // router.onError(error => {});
+}

BIN
src/update-tips/images/tip-bg.png


BIN
src/update-tips/images/tip-dang.png


+ 62 - 0
src/update-tips/index.module.less

@@ -0,0 +1,62 @@
+.commonWork {
+  width: 400px;
+  background: #ffffff;
+  border-radius: 18px;
+  position: relative;
+  padding: 0 30px 35px;
+
+  .downMoveBg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 400px;
+    height: 104px;
+  }
+
+  .dingPng {
+    width: 159px;
+    height: 159px;
+    position: absolute;
+    left: 50%;
+    margin-left: -81px;
+    top: -57px;
+    z-index: 100;
+  }
+
+  h2 {
+    margin-top: 120px;
+    font-weight: 600;
+    font-size: 24px;
+    color: #131415;
+    line-height: 33px;
+    text-align: center;
+  }
+
+  .header {
+    text-align: center;
+    padding: 20px 0 30px;
+    font-size: 18px;
+    color: #777777;
+    line-height: 30px;
+
+    span {
+      color: #2784ff;
+    }
+  }
+
+  .btn {
+    cursor: pointer;
+    width: 256px;
+    border-radius: 50px;
+    text-align: center;
+    font-weight: 600;
+    font-size: 18px;
+    color: #ffffff;
+    line-height: 25px;
+    line-height: 47px;
+    margin: 0 auto;
+    --n-color: #40c8ff !important;
+    background: linear-gradient(305deg, #40c8ff 0%, #3192ff 100%);
+  }
+}
+

+ 24 - 0
src/update-tips/index.tsx

@@ -0,0 +1,24 @@
+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',
+  emits: ['confirm'],
+  setup(props, { emit }) {
+    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}>系统已更新版本,请刷新界面后继续使用</div>
+
+        <div class={styles.btn} onClick={() => emit('confirm')}>
+          立即刷新
+        </div>
+      </div>
+    );
+  }
+});

+ 1 - 1
src/views/notation/index.tsx

@@ -41,7 +41,7 @@ export default defineComponent({
     };
     const handleOpen = (e: MessageEvent) => {
       if (e.data.api === 'notation_open') {
-        if (state.application) {
+        if (window.matchMedia('(display-mode: standalone)').matches) {
           show.value = true;
           previewModal.value = true;
           previewParams.value = {

+ 24 - 11
src/views/prepare-lessons/components/lesson-main/courseware-presets/index.tsx

@@ -113,6 +113,7 @@ export default defineComponent({
       attendClassItem: {} as any,
       attendClassId: null as any,
       previewModal: false,
+      previewModalType: 'attend' as 'attend' | 'music',
       previewParams: {
         type: '',
         courseId: '',
@@ -372,6 +373,7 @@ export default defineComponent({
         ).matches;
         forms.previewModal = true;
         fscreen();
+        forms.previewModalType = 'attend';
         forms.previewParams = {
           type: 'preview',
           courseId: id,
@@ -412,6 +414,7 @@ export default defineComponent({
             '(display-mode: standalone)'
           ).matches;
           forms.previewModal = true;
+          forms.previewModalType = 'attend';
           fscreen();
           forms.previewParams = {
             type: 'class',
@@ -661,6 +664,7 @@ export default defineComponent({
         item.pptId =
           dataRes.data.chapterKnowledgeList[0].chapterKnowledgeMaterialList[0].id;
       }
+
       const href = `${vaildPPTUrl()}/#/pptEditor?id=${
         item.pptId
       }&Authorization=${
@@ -668,7 +672,17 @@ export default defineComponent({
       }&instrumentId=${instrumentId}&lessonCoursewareKnowledgeId=${
         prepareStore.getSelectKey
       }&fromType=TEACHER`;
-      window.open(href);
+      if (window.matchMedia('(display-mode: standalone)').matches) {
+        forms.previewModal = true;
+        forms.previewModalType = 'music';
+        // window.open(href);
+        forms.previewParams = {
+          src: href
+        };
+      } else {
+        window.open(href);
+      }
+
       // 刷新一下列表
       !teacherSaveFlag && getCoursewareList();
     }
@@ -1049,7 +1063,7 @@ export default defineComponent({
         {/* 应用内预览或上课 */}
         <PreviewWindow
           v-model:show={forms.previewModal}
-          type="attend"
+          type={forms.previewModalType}
           params={forms.previewParams}
         />
 
@@ -1070,6 +1084,7 @@ export default defineComponent({
                   '(display-mode: standalone)'
                 ).matches;
                 forms.previewModal = true;
+                forms.previewModalType = 'attend';
                 forms.previewParams = {
                   ...item
                 };
@@ -1178,15 +1193,13 @@ export default defineComponent({
                 v-model:value={pptCourseware.subjects}
                 v-slots={{
                   action: () => (
-                    <>
-                      <NButton
-                        text
-                        style=" --n-width: 100% "
-                        size="small"
-                        onClick={() => chioseAll(subjectList.value)}>
-                        全选
-                      </NButton>
-                    </>
+                    <NButton
+                      text
+                      style=" --n-width: 100% "
+                      size="small"
+                      onClick={() => chioseAll(subjectList.value)}>
+                      全选
+                    </NButton>
                   )
                 }}
               />

+ 2 - 0
src/views/preview-window/index.tsx

@@ -54,6 +54,7 @@ export default defineComponent({
     );
 
     const handleOpen = (e: MessageEvent) => {
+      console.log(e, 'iframe_exit');
       if (e.data.api === 'iframe_exit') {
         emit('update:show', false);
       }
@@ -99,6 +100,7 @@ export default defineComponent({
               ) : type.value == 'music' ? (
                 <iframe
                   src={params.value.src}
+                  key={params.value.src}
                   onLoad={(val: any) => {
                     iframeDislableKeyboard(val.target);
                   }}

+ 6 - 29
vite.config.ts

@@ -67,38 +67,15 @@ export default defineConfig(() => {
         registerType: 'autoUpdate',
         includeAssets: ['./logo.png'],
         workbox: {
-          skipWaiting: true,
-          clientsClaim: true,
-          runtimeCaching: [
-            {
-              urlPattern: ({ url }) =>
-                url.origin === 'https://dev.kt.colexiu.com',
-              handler: 'NetworkFirst',
-              options: {
-                cacheName: 'api-cache'
-              }
-            }
-          ]
+          skipWaiting: false, // 强制跳过等待
+          clientsClaim: false
           // runtimeCaching: [
           //   {
-          //     urlPattern: /(.*?)\.(js|css|ts|tsx|html)/, // js /css /ts静态资源缓存
-          //     handler: 'NetworkOnly',
-          //     options: {
-          //       cacheName: 'js-css-cache'
-          //     }
-          //   },
-          //   {
-          //     urlPattern: /.*\.html.*/,
-          //     handler: 'NetworkOnly',
+          //     urlPattern: ({ url }) =>
+          //       url.origin === 'https://dev.kt.colexiu.com',
+          //     handler: 'NetworkFirst',
           //     options: {
-          //       cacheName: 'wisbayar-html',
-          //       expiration: {
-          //         maxEntries: 20,
-          //         maxAgeSeconds: 24 * 60 * 60
-          //       },
-          //       cacheableResponse: {
-          //         statuses: [200]
-          //       }
+          //       cacheName: 'api-cache'
           //     }
           //   }
           // ]