feat: 实现真实分页预览

apps/web/src/styles.css

@@ -47,7 +47,9 @@ button:disabled {
 .workspace {
   display: flex;
   flex-direction: column;
-  min-height: 100vh;
+  height: 100vh;
+  min-height: 0;
+  overflow: hidden;
 }
 
 .topbar {
@@ -109,7 +111,7 @@ h1 {
   display: flex;
   flex-direction: column;
   min-width: 0;
-  min-height: calc(100vh - 92px);
+  min-height: 0;
 }
 
 .editor-panel {
@@ -216,7 +218,7 @@ h1 {
 textarea {
   flex: 1;
   width: 100%;
-  min-height: 560px;
+  min-height: 0;
   padding: 24px;
   border: 0;
   outline: 0;
@@ -249,8 +251,7 @@ textarea:focus {
 
 .paper {
   margin: 0 auto;
-  background: #fff;
-  box-shadow: 0 18px 48px rgb(37 49 43 / 16%);
+  background: transparent;
 }
 
 .preview-frame {
@@ -258,7 +259,7 @@ textarea:focus {
   width: 100%;
   min-height: 500px;
   border: 0;
-  background: #fff;
+  background: transparent;
 }
 
 .preview-loading {
@@ -541,6 +542,12 @@ textarea:focus {
 }
 
 @media (max-width: 900px) {
+  .workspace {
+    height: auto;
+    min-height: 100vh;
+    overflow: visible;
+  }
+
   .topbar {
     align-items: flex-start;
     padding: 16px;
@@ -559,6 +566,10 @@ textarea:focus {
     min-height: 650px;
   }
 
+  textarea {
+    min-height: 560px;
+  }
+
   .editor-panel {
     border-right: 0;
     border-bottom: 1px solid #cbd2ce;