fix: 修复预览弹窗

sub-store-org · Jan 17, 2024 · 00cec2f · 00cec2f
1 parent bcb48df
commit 00cec2f
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 1 deletion.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "sub-store-front-end",
-  "version": "2.14.67",
+  "version": "2.14.70",
   "private": true,
   "scripts": {
     "dev": "vite --host",

diff --git a/src/components/FileListItem.vue b/src/components/FileListItem.vue
@@ -201,6 +201,7 @@
   }>();
   // console.log('props.disabled')
   // console.log(props.disabled)
+  let scrollTop = 0;
   const filePreviewIsVisible = ref(false);
   usePopupRoute(filePreviewIsVisible);
   const previewData = ref();
@@ -247,7 +248,20 @@
   });
 
   const closePreview = () => {
+    document.querySelector('html').style['overflow-y'] = '';
+    document.querySelector('html').style.height = '';
+    document.body.style.height = '';
+    document.body.style['overflow-y'] = '';
+    (document.querySelector('#app') as HTMLElement).style['overflow-y'] = '';
+    (document.querySelector('#app') as HTMLElement).style.height = '';
+    
     filePreviewIsVisible.value = false;
+
+    window.scrollTo({
+        top: scrollTop,
+        behavior: "instant"
+    });
+
     router.back();
   };
 
@@ -260,6 +274,16 @@
 
     if (res?.data?.status === 'success') {
       previewData.value = res.data.data;
+
+      scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+
+      document.querySelector('html').style['overflow-y'] = 'hidden';
+      document.querySelector('html').style.height = '100%';
+      document.body.style.height = '100%';
+      document.body.style['overflow-y'] = 'hidden';
+      (document.querySelector('#app') as HTMLElement).style['overflow-y'] = 'hidden';
+      (document.querySelector('#app') as HTMLElement).style.height = '100%';
+
       filePreviewIsVisible.value = true;
       Toast.hide('compare');
     }

diff --git a/src/components/SubListItem.vue b/src/components/SubListItem.vue
@@ -224,6 +224,8 @@
   }>();
   // console.log('props.disabled')
   // console.log(props.disabled)
+  let scrollTop = 0;
+  
   const compareTableIsVisible = ref(false);
   usePopupRoute(compareTableIsVisible);
 
@@ -326,7 +328,20 @@
   });
 
   const closeCompare = () => {
+    document.querySelector('html').style['overflow-y'] = '';
+    document.querySelector('html').style.height = '';
+    document.body.style.height = '';
+    document.body.style['overflow-y'] = '';
+    (document.querySelector('#app') as HTMLElement).style['overflow-y'] = '';
+    (document.querySelector('#app') as HTMLElement).style.height = '';
+    
     compareTableIsVisible.value = false;
+
+    window.scrollTo({
+        top: scrollTop,
+        behavior: "instant"
+    });
+
     router.back();
   };
 
@@ -338,6 +353,16 @@
     );
     if (res?.data?.status === 'success') {
       compareData.value = res.data.data;
+
+      scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+
+      document.querySelector('html').style['overflow-y'] = 'hidden';
+      document.querySelector('html').style.height = '100%';
+      document.body.style.height = '100%';
+      document.body.style['overflow-y'] = 'hidden';
+      (document.querySelector('#app') as HTMLElement).style['overflow-y'] = 'hidden';
+      (document.querySelector('#app') as HTMLElement).style.height = '100%';
+      
       compareTableIsVisible.value = true;
       Toast.hide('compare');
     }

diff --git a/src/views/FileEditor.vue b/src/views/FileEditor.vue
@@ -227,6 +227,8 @@
   const { bottomSafeArea } = storeToRefs(globalStore);
   const padding = bottomSafeArea.value + 'px';
 
+  let scrollTop = 0;
+
   const file = computed(() => subsStore.getOneFile(configName));
   const filePreviewIsVisible = ref(false);
   usePopupRoute(filePreviewIsVisible);
@@ -307,7 +309,20 @@
     deleteItem(form, actionsList, actionsChecked, id);
   };
   const closePreview = () => {
+    document.querySelector('html').style['overflow-y'] = '';
+    document.querySelector('html').style.height = '';
+    document.body.style.height = '';
+    document.body.style['overflow-y'] = '';
+    (document.querySelector('#app') as HTMLElement).style['overflow-y'] = '';
+    (document.querySelector('#app') as HTMLElement).style.height = '';
+    
     filePreviewIsVisible.value = false;
+
+    window.scrollTo({
+        top: scrollTop,
+        behavior: "instant"
+    });
+
     router.back();
   };
   const compare = () => {
@@ -343,6 +358,16 @@
       const res = await subsApi.compareSub('file', data);
       if (res?.data?.status === 'success') {
         previewData.value = res.data.data;
+
+        scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+
+        document.querySelector('html').style['overflow-y'] = 'hidden';
+        document.querySelector('html').style.height = '100%';
+        document.body.style.height = '100%';
+        document.body.style['overflow-y'] = 'hidden';
+        (document.querySelector('#app') as HTMLElement).style['overflow-y'] = 'hidden';
+        (document.querySelector('#app') as HTMLElement).style.height = '100%';
+        
         filePreviewIsVisible.value = true;
         Toast.hide('compare');
       }

diff --git a/src/views/FilePreview.vue b/src/views/FilePreview.vue
@@ -250,6 +250,9 @@
   }
 
   .compare-page-wrapper {
+    top: 0;
+    left: 0;
+    position: absolute;
     width: 100vw;
     height: 100vh;
     z-index: 1000;

diff --git a/src/views/SubEditor.vue b/src/views/SubEditor.vue
@@ -295,6 +295,7 @@
   usePopupRoute(compareTableIsVisible);
   const compareData = ref();
 
+  let scrollTop = 0
   const isInit = ref(false);
   const ruleForm = ref<any>(null);
   const actionsChecked = reactive([]);
@@ -415,7 +416,20 @@
   };
 
   const closeCompare = () => {
+    document.querySelector('html').style['overflow-y'] = '';
+    document.querySelector('html').style.height = '';
+    document.body.style.height = '';
+    document.body.style['overflow-y'] = '';
+    (document.querySelector('#app') as HTMLElement).style['overflow-y'] = '';
+    (document.querySelector('#app') as HTMLElement).style.height = '';
+    
     compareTableIsVisible.value = false;
+
+    window.scrollTo({
+        top: scrollTop,
+        behavior: "instant"
+    });
+
     router.back();
   };
 
@@ -453,6 +467,16 @@
       const res = await subsApi.compareSub(type, data);
       if (res?.data?.status === 'success') {
         compareData.value = res.data.data;
+
+        scrollTop = document.documentElement.scrollTop || document.body.scrollTop
+
+        document.querySelector('html').style['overflow-y'] = 'hidden';
+        document.querySelector('html').style.height = '100%';
+        document.body.style.height = '100%';
+        document.body.style['overflow-y'] = 'hidden';
+        (document.querySelector('#app') as HTMLElement).style['overflow-y'] = 'hidden';
+        (document.querySelector('#app') as HTMLElement).style.height = '100%';
+
         compareTableIsVisible.value = true;
         Toast.hide('compare');
       }