Fix: 手机端弹窗不显示修复

Author: T-miracle

package/components/NanoContainer/index.vue

@@ -4,8 +4,8 @@
         v-model:fullscreen="ctl.fullscreen"
         v-model:layout="containerLayout"
         :drag-el="headerEl"
-        :visible="visible"
-        :width-range="[ '20vw', '100vw' ]"
+        :visible="true"
+        :width-range="[ '22vw', '100vw' ]"
         :height-range="[ '60vh', '100vh' ]"
         class="nano-theme"
     >
@@ -42,7 +42,6 @@
     const header = ref<InstanceType<typeof NanoHeader> | null>();
     const resizeObserver = ref<ResizeObserver | null>(null);
     const loading = ref(true);
-    const visible = computed(() => !ctl.onlyFullscreen);
 
     const headerEl = computed(() => header.value?.$el);
     const containerLayout = computed({
@@ -85,8 +84,6 @@
             }
         });
         resizeObserver.value.observe(containerEl);
-
-
     });
 
     onBeforeUnmount(() => {

package/components/NanoMain/index.vue

@@ -16,9 +16,10 @@
             >
                 <article
                     ref="article"
-                    class="vp-doc VPDoc p-[calc(var(--base-size)*1)] md:p-[var(--main-padding)] text-[var(--base-size)]"
+                    class="vp-doc VPDoc text-[var(--base-size)]"
                     :class="[ 'w-full' ]"
                     style="white-space: wrap;"
+                    :style="{ padding: articlePadding }"
                 >
                     <Content ref="content"/>
                 </article>
@@ -63,6 +64,9 @@
         }, 240);
     });
 
+    const resizeObserver = ref<ResizeObserver | null>(null);
+    const articlePadding = ref<string>('calc(var(--base-size))');
+
     onMounted(() => {
         setTimeout(() => {
             hashChange();
@@ -87,6 +91,18 @@
             // Scroll to target element
             scrollbars.value?.osInstance()?.elements()?.viewport?.scrollTo({ top: targetTop, behavior: 'smooth' });
         });
+
+        resizeObserver.value = new ResizeObserver((entries: ResizeObserverEntry[]) => {
+            for (const entry of entries) {
+                const { target } = entry;
+                const { clientWidth } = target as HTMLElement;
+                if (clientWidth < 1280) {
+                    articlePadding.value = 'calc(var(--base-size))';
+                } else {
+                    articlePadding.value = 'calc(var(--base-size)) calc(var(--base-size) * 2)';
+                }
+            }
+        });
     });
 
     onUnmounted(() => {

package/components/NanoModal/index.vue

@@ -3,7 +3,7 @@
         <div
             v-if="visible"
             ref="modal"
-            class="absolute"
+            class="absolute rounded-6px shadow-[0_0_16px_4px_rgb(0,0,0,.24)]"
             :style="{ ...layoutStyle, transition }"
         >
             <slot/>