优化滚动

frontend/src/main.js

@@ -45,15 +45,17 @@ app.innerHTML = `
       <button class="button primary" id="uploadBtn">上传</button>
     </section>
 
-    <section class="panel input-panel">
+    <section class="workspace">
-      <div class="panel-title">账号数据</div>
+      <section class="panel input-panel">
-      <textarea id="data" spellcheck="false"></textarea>
+        <div class="panel-title">账号数据</div>
-    </section>
+        <textarea id="data" spellcheck="false"></textarea>
+      </section>
 
-    <section class="panel result-panel">
+      <section class="panel result-panel">
-      <div class="panel-title">结果</div>
+        <div class="panel-title">结果</div>
-      <pre id="result">暂无结果
+        <pre id="result">暂无结果
 点击“预览 JSON”或“上传”后，这里会显示多行结果。</pre>
+      </section>
     </section>
   </main>
 `;

frontend/src/style.css

@@ -11,10 +11,16 @@
 
 body {
   margin: 0;
+  overflow: hidden;
   min-height: 100vh;
   background: #f6f8fc;
 }
 
+#app {
+  height: 100vh;
+  overflow: hidden;
+}
+
 button,
 input,
 textarea {
@@ -23,8 +29,13 @@ textarea {
 
 .shell {
   width: min(1080px, calc(100vw - 40px));
+  height: 100vh;
   margin: 0 auto;
-  padding: 22px 0 28px;
+  padding: 22px 0;
+  display: grid;
+  grid-template-rows: auto auto auto minmax(0, 1fr);
+  gap: 14px;
+  overflow: hidden;
 }
 
 .topbar {
@@ -32,7 +43,6 @@ textarea {
   align-items: flex-start;
   justify-content: space-between;
   gap: 20px;
-  margin-bottom: 14px;
 }
 
 h1 {
@@ -69,7 +79,6 @@ p {
 }
 
 .config {
-  margin-bottom: 14px;
   border: 1px solid #d7dce5;
   border-radius: 8px;
   background: #ffffff;
@@ -111,9 +120,8 @@ input {
 }
 
 textarea {
-  min-height: 330px;
   padding: 12px;
-  resize: vertical;
+  resize: none;
   line-height: 1.55;
 }
 
@@ -127,7 +135,6 @@ textarea:focus {
   display: flex;
   align-items: center;
   gap: 10px;
-  margin-bottom: 14px;
 }
 
 .button {
@@ -161,7 +168,10 @@ textarea:focus {
 }
 
 .panel {
-  margin-bottom: 16px;
+  min-width: 0;
+  min-height: 0;
+  display: flex;
+  flex-direction: column;
 }
 
 .panel-title {
@@ -170,12 +180,35 @@ textarea:focus {
   color: #374151;
 }
 
+.workspace {
+  min-height: 0;
+  display: grid;
+  grid-template-columns: minmax(360px, 0.92fr) minmax(420px, 1.08fr);
+  gap: 16px;
+}
+
+.input-panel,
+.result-panel {
+  height: 100%;
+}
+
+#data,
+#result {
+  flex: 1;
+  min-height: 0;
+  overflow: auto;
+  scrollbar-width: none;
+}
+
+#data::-webkit-scrollbar,
+#result::-webkit-scrollbar {
+  width: 0;
+  height: 0;
+}
+
 #result {
-  min-height: 390px;
-  max-height: 44vh;
   margin: 0;
   padding: 14px;
-  overflow: auto;
   border: 1px solid #cfd6e2;
   border-radius: 8px;
   background: #0f172a;
@@ -191,6 +224,7 @@ textarea:focus {
   .shell {
     width: calc(100vw - 24px);
     padding-top: 14px;
+    overflow: auto;
   }
 
   .topbar,
@@ -207,4 +241,8 @@ textarea:focus {
   .config-grid label + label {
     margin-top: 12px;
   }
+
+  .workspace {
+    grid-template-columns: 1fr;
+  }
 }