Merge branch 'startLogin'

src/components/layout/index.tsx

@@ -99,7 +99,10 @@ export default defineComponent({
               // clientY
             }) => {
               isDragIng.value = true;
-              NPopoverRef.value.setShow(false)
+              if(NPopoverRef.value){
+                NPopoverRef.value.setShow(false)
+              }
+
               const subdEl = document.getElementById(
                 `moveNPopover`
               ) as HTMLDivElement;
@@ -347,7 +350,9 @@ export default defineComponent({
 
         // boxBoundaryInfo.isBoundary = true;
         // boxBoundaryInfo.isBoundaryType= 'right'
-        NPopoverRef.value.setShow(false)
+        if(NPopoverRef.value){
+          NPopoverRef.value.setShow(false)
+        }
 
         setTimeout(()=>{
 

src/views/attend-class/index.tsx

@@ -51,7 +51,6 @@ import toneIcon from '/src/components/layout/images/toneIcon.png';
 import { px2vw } from '/src/utils';
 import PlaceholderTone from '/src/components/layout/modals/placeholderTone';
 import { state as globalState } from '/src/state';
-import { state } from '/src/state';
 export type ToolType = 'init' | 'pen' | 'whiteboard';
 export type ToolItem = {
   type: ToolType;
@@ -87,6 +86,7 @@ export default defineComponent({
     const parentContainer = reactive({
       width: '100vw'
     });
+    const NPopoverRef = ref()
     const setContainer = () => {
       const min = Math.min(screen.width, screen.height);
       const max = Math.max(screen.width, screen.height);
@@ -114,6 +114,7 @@ export default defineComponent({
 
     onUnmounted(() => {
       handleInit(1);
+      window.removeEventListener("resize", resetSize);
     });
 
     const data = reactive({
@@ -198,12 +199,11 @@ export default defineComponent({
     const showModalBeat = ref(false);
     const showModalTone = ref(false);
     const showModalTime = ref(false);
-    const NPopoverRef = ref()
     const isDragIng = ref(false);
     const initMoveable = async () => {
       if (document.querySelector('.wrap')) {
         const moveable = new Moveable(document.querySelector('.wrap') as any, {
-          target: document.querySelector('#moveNPopover') as any,
+          target: document.querySelector('#moveNPopoverA') as any,
           // If the container is null, the position is fixed. (default: parentElement(document.body))
           container: document.querySelector('.wrap') as any,
           // snappable: true,
@@ -223,10 +223,11 @@ export default defineComponent({
           throttleScale: 0,
           throttleRotate: 0
         });
+        console.log('initMoveable完毕',moveable)
         moveable
-          // .on('dragStart', ({ target, clientX, clientY }) => {
-          //   console.log('dragStart');
-          // })
+          .on('dragStart', ({ target, clientX, clientY }) => {
+            console.log('dragStart');
+          })
           .on(
             'drag',
             ({
@@ -244,9 +245,12 @@ export default defineComponent({
               // clientY
             }) => {
               isDragIng.value = true;
-              NPopoverRef.value.setShow(false)
+              if(NPopoverRef.value){
+                NPopoverRef.value.setShow(false)
+              }
+
               const subdEl = document.getElementById(
-                `moveNPopover`
+                `moveNPopoverA`
               ) as HTMLDivElement;
               // console.log(subdEl, "subdEl", "drag");
               const subdElStyle = getComputedStyle(subdEl, null);
@@ -324,10 +328,12 @@ export default defineComponent({
                 // 往又出
                 directionType.value = 'left';
               }
+              console.log(target.style.left)
               isDragIng.value = false;
               // 在这里进行动画
               if (boxBoundaryInfo.isBoundary) {
                 // 这里说明贴边了
+
                 target.style.transition = '.3s';
                 actionEnd(target, boxBoundaryInfo.isBoundaryType);
               }
@@ -335,7 +341,6 @@ export default defineComponent({
           );
       }
     };
-
     // ifram事件处理
     const iframeHandle = (ev: MessageEvent) => {
       if (ev.data?.api === 'headerTogge') {
@@ -349,57 +354,47 @@ export default defineComponent({
     };
 
     onMounted(() => {
+      initMoveable();
       const query = route.query;
       // 先取参数，
       data.type = props.type || (query.type as any);
       data.subjectId = props.subjectId || query.subjectId;
       data.detailId = props.detailId || query.detailId;
       data.classGroupId = props.classGroupId || query.classGroupId;
-      initMoveable();
 
-      const subdEl = document.getElementById(`moveNPopover`) as HTMLDivElement;
-      initBoxRectInfo(subdEl, boxBoundaryInfo);
 
+      const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
       initBoundaryWrap(subdEl, boxBoundaryInfo);
+      initBoxRectInfo(subdEl, boxBoundaryInfo);
+
+
       window.addEventListener('message', iframeHandle);
       getDetail();
       window.addEventListener("resize", resetSize);
     });
 
     const resetSize = ()=>{
-      const subdEl = document.getElementById(`moveNPopover`) as HTMLDivElement;
+      const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
       subdEl.style.display = 'none'
-      // const boxBoundaryInfo = reactive({
-      //   isBoundary: true,
-      //   isBoundaryType: 'right' as any,
-      //   mainWidth: '' as any,
-      //   mainHeight: '' as any,
-      //   subWidth: '' as any,
-      //   subHeight: '' as any
-      // });
 
 
-        // boxBoundaryInfo.isBoundary = true;
-        // boxBoundaryInfo.isBoundaryType= 'right'
-        NPopoverRef.value.setShow(false)
+
+        boxBoundaryInfo.isBoundary = true;
+        boxBoundaryInfo.isBoundaryType= 'right'
+        if(NPopoverRef.value){
+          NPopoverRef.value.setShow(false)
+        }
 
         setTimeout(()=>{
 
           subdEl.style.transition = ''
           initBoxRectInfo(subdEl, boxBoundaryInfo);
           initBoundaryWrap(subdEl, boxBoundaryInfo);
-          console.log('resize')
           subdEl.style.display = 'block'
         },100)
 
-
-
-
-
     }
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+
     const initBoundaryWrap = (target: any, wrapInfo: any) => {
       target.addEventListener('mouseenter', () => {
         if (wrapInfo.isBoundary) {
@@ -417,6 +412,7 @@ export default defineComponent({
         rate(target, 0);
       });
       target.addEventListener('mouseleave', () => {
+          console.log('mouseleave',wrapInfo.isBoundary)
         if (wrapInfo.isBoundary) {
           // 如果在边框 就得还原 元素位置 还原完毕后 去除transition
           if (wrapInfo.isBoundaryType == 'left') {
@@ -487,7 +483,7 @@ export default defineComponent({
     };
 
     const initBoxRectInfo = (target: any, wrapInfo: any) => {
-      // const subdEl = document.getElementById(`moveNPopover`) as HTMLDivElement;
+      // const subdEl = document.getElementById(`moveNPopoverA`) as HTMLDivElement;
       // console.log(subdEl, "subdEl", "drag");
       const subdElStyle = getComputedStyle(target, null);
       const RectInfo = {
@@ -515,6 +511,7 @@ export default defineComponent({
       wrapInfo.subWidth = RectInfo.width;
       wrapInfo.subHeight = RectInfo.height;
       target.style.transition = '.3s';
+
     };
     const onFullScreen = () => {
       if (data.type === 'preview') {
@@ -1292,7 +1289,7 @@ export default defineComponent({
               <img
                 // src={isDragIng.value ? dragingBoxIcon : toolbox}
                 src={toolbox}
-                id="moveNPopover"
+                id="moveNPopoverA"
                 style={{
                   display: ['/', '/home'].includes(route.path)
                     ? 'none'
@@ -1300,7 +1297,7 @@ export default defineComponent({
                 }}
                 class={[
                   styles.toolboxImg,
-                  'moveNPopover',
+                  'moveNPopoverA',
                   isDragIng.value ? styles.isDragIng : ''
                 ]}
                 alt=""