Fix: 修复布局错乱

Author: T-miracle

package/App.scss

@@ -21,6 +21,7 @@ $fontFamily: "微软雅黑", "Helvetica Neue", Helvetica, "PingFang SC", "Hiragi
     box-sizing: border-box;
     margin: 0;
     padding: 0;
+    border: 0;
     touch-action: auto;
 }
 

package/App.vue

@@ -35,9 +35,9 @@
                     ctl.hidePaths = true;
                     ctl.hideCopyright = true;
                 } else {
-                    if (clientWidth >= 2560) {
+                    if (clientWidth >= 2440) {
                         htmlEl.style.setProperty('font-size', '18px');
-                    } else if (clientWidth >= 1920) {
+                    } else if (clientWidth >= 1600) {
                         htmlEl.style.setProperty('font-size', '16px');
                     } else {
                         htmlEl.style.setProperty('font-size', '14px');

package/components/NanoFooter/index.vue

@@ -1,6 +1,6 @@
 <template>
     <footer
-        class="shrink-0 w-full h-[var(--footer-size)]"
+        class="relative shrink-0 w-full h-[var(--footer-size)] overflow-hidden"
         un-border="t-solid t-1px t-[var(--footer-border-color)]"
         un-flex="~ items-center justify-between shrink-0"
         style="background: var(--footer-bg);"

package/components/NanoHeader/index.vue

@@ -1,18 +1,17 @@
 <template>
     <header
-        class="shrink-0 w-full h-[var(--header-size)]"
+        class="relative shrink-0 w-full h-[var(--header-size)] overflow-hidden"
         un-flex="~ justify-between"
-        un-border="b-solid b-1px b-[var(--header-border-color)]"
         style="--s: var(--header-size); background: var(--header-bg)"
     >
         <!--header left-->
-        <div class="relative flex-center gap-.8">
+        <div class="relative h-full flex-center gap-.8">
             <NanoLogo/>
             <NanoHeaderTopNav v-if="!ctl.hideHeaderTopNav"/>
             <NanoMiniHeaderTopNav v-else/>
         </div>
         <!--header right-->
-        <div class="relative flex flex-row-reverse">
+        <div class="relative h-full flex flex-row-reverse">
             <NanoWindowController/>
         </div>
     </header>

package/components/NanoLeftActionBar/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="shrink-0 h-full w-[var(--action-bar-size)]"
+        class="relative shrink-0 h-full w-[var(--action-bar-size)]"
         un-border="r-1px r-solid r-[var(--action-bar-border-color)]"
         un-flex="~ col items-center justify-between"
         style="background: var(--action-bar-bg)"

package/components/NanoLeftSidebar/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="shrink-0 h-full w-[var(--sidebar-left-size)]"
+        class="relative shrink-0 h-full w-[var(--sidebar-left-size)]"
         :class="{ 'w-0': !openStatus }"
         un-border="r-solid r-1px r-[var(--sidebar-border-color)]"
         un-flex="~ col"

package/components/NanoMain/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="grow z-2 h-full bg-white min-w-0 vp-doc"
+        class="relative grow z-2 h-full bg-white min-w-0 vp-doc"
     >
         <!--content area-->
         <div class="relative w-full h-full">
@@ -85,6 +85,7 @@
 
     onUnmounted(() => {
         emitter.off('scroll-to-hash');
+        scrollbars.value?.osInstance()?.destroy();
     });
 </script>
 

package/components/NanoOutline/index.vue

@@ -75,6 +75,7 @@
     const shadowShow = ref(false);
     const headers = shallowRef<any[]>([]);
     const openStatus = ref<boolean>(true);
+    const scrollbar = ref<any | null>(null);
 
     const scroll = debounce((e: any) => {
         shadowShow.value = e.elements().viewport.scrollTop > 0;
@@ -102,6 +103,7 @@
 
     onBeforeUnmount(() => {
         emitter.off('toggle-structure-open-status');
+        scrollbar.value?.osInstance()?.destroy();
     });
 
     defineExpose({ openStatus });

package/components/NanoPaths/index.vue

@@ -58,6 +58,7 @@
                 text: '💠' + title
             } ];
         });
+        scrollbar.value?.osInstance()?.destroy();
     });
 </script>
 

package/components/NanoRightActionBar/index.vue

@@ -1,6 +1,6 @@
 <template>
     <div
-        class="shrink-0 h-full w-[var(--action-bar-size)]"
+        class="relative shrink-0 h-full w-[var(--action-bar-size)]"
         un-border="l-1px l-solid l-[var(--action-bar-border-color)]"
         un-flex="~ col items-center justify-between"
         style="background: var(--action-bar-bg)"