为图片新增预览框；修复文本框过度长高使得页面上部分不可见的问题。

html/terminal.html

@@ -13,11 +13,15 @@
             height: 100vh;
             margin: 0;
             background-color: #f4f4f4;
+            overflow: hidden; /* 防止整个页面滚动 */
         }
 
         #app {
             width: 100%;
-            max-width: 600px;
+            max-width: 50vw;
+            overflow-y: auto; /* 允许应用内部滚动 */
+            min-height: 62vh;
+            max-height: 100vh; /* 限制应用的最大高度 */
             padding: 20px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             background-color: white;
@@ -26,7 +30,9 @@
 
         .el-textarea__inner {
             min-height: 150px;
+            max-height: 300px; /* 限制文本框的最大高度 */
             resize: vertical;
+            overflow-y: auto; /* 允许文本框内部滚动 */
         }
 
         .el-row {
@@ -43,11 +49,14 @@
         .image-container {
             text-align: center;
             margin-bottom: 20px;
+            max-height: 40vh;
+            overflow-y: auto;
         }
 
         img {
             max-width: 100%;
             border-radius: 8px;
+            cursor: pointer;
         }
 
         @media (max-width: 600px) {
@@ -63,7 +72,7 @@
     <h2 style="text-align: center;">终端-习题识别工具</h2>
     <p style="text-align: center; color: #999;">这里将接收来自上传端的习题图像及其识别结果</p>
     <div class="image-container" v-if="imageUrl">
-        <img :src="imageUrl" alt="Received Image">
+        <img :src="imageUrl" alt="Received Image" @click="previewImage">
     </div>
     <el-row>
         <el-col :span="24">
@@ -73,7 +82,7 @@
                     :rows="4"
                     readonly
                     placeholder="接收到的文本将显示在这里..."
-                    :autosize="{ minRows: 4 }"
+                    :autosize="{ minRows: 4, maxRows: 20 }"
             ></el-input>
         </el-col>
     </el-row>
@@ -83,13 +92,18 @@
             <el-button type="danger" @click="clearText">清空</el-button>
         </el-col>
     </el-row>
+    <el-image-viewer
+            v-if="showViewer"
+            :url-list="[imageUrl]"
+            @close="showViewer = false"
+    ></el-image-viewer>
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
 <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
 <script>
     const {createApp} = Vue;
-    const {ElInput, ElButton, ElRow, ElCol, ElMessage} = ElementPlus;
+    const {ElInput, ElButton, ElRow, ElCol, ElMessage, ElImageViewer} = ElementPlus;
 
     createApp({
         data() {
@@ -98,6 +112,7 @@
                 imageUrl: '',
                 websocket: null,
                 reconnectInterval: 10000,
+                showViewer: false,
             };
         },
         computed: {
@@ -146,6 +161,9 @@
             clearText() {
                 this.text = '';
                 this.imageUrl = '';
+            },
+            previewImage() {
+                this.showViewer = true;
             }
         }
     }).use(ElementPlus).mount('#app');

html/upload.html

@@ -13,11 +13,15 @@
             height: 100vh;
             margin: 0;
             background-color: #f4f4f4;
+            overflow: hidden; /* 防止整个页面滚动 */
         }
 
-        .container {
+        #app {
             width: 100%;
-            max-width: 600px;
+            max-width: 50vw;
+            overflow-y: auto; /* 允许应用内部滚动 */
+            min-height: 62vh;
+            max-height: 100vh;
             padding: 20px;
             box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
             background-color: white;
@@ -26,29 +30,38 @@
 
         .upload-area {
             border: 1px dashed #ccc;
-            padding: 20px;
+            /*padding: 20px;*/
             text-align: center;
             cursor: pointer;
-            margin-bottom: 20px;
+            /*margin-bottom: 20px;*/
         }
 
         .upload-area.dragging {
             border-color: #409EFF;
         }
 
+        .el-upload-dragger {
+            padding: 0;
+        }
+
         .el-textarea__inner {
             min-height: 150px;
+            max-height: 300px; /* 限制文本框的最大高度 */
             resize: vertical;
+            overflow-y: auto; /* 允许文本框内部滚动 */
         }
 
         .image-container {
             text-align: center;
             margin-bottom: 20px;
+            max-height: 40vh;
+            overflow-y: auto;
         }
 
         img {
             max-width: 100%;
             border-radius: 8px;
+            cursor: pointer; /* 添加鼠标手势 */
         }
 
         @media (max-width: 600px) {
@@ -59,6 +72,7 @@
         }
 
         #buttons {
+            margin-bottom: 20px;
             display: flex;
             justify-content: center;
         }
@@ -82,12 +96,12 @@
             <i class="el-icon-upload" style="font-size: 20px;"></i>
             <p>请直接粘贴图片</p>
             <p>或将图像拖放到此处</p>
-            <div class="image-container" v-if="uploadedImageUrl">
-                <img :src="uploadedImageUrl" alt="Uploaded Image">
-            </div>
             <p>点击上传或替换当前图片</p>
         </div>
     </el-upload>
+    <div class="image-container" v-if="uploadedImageUrl">
+        <img :src="uploadedImageUrl" alt="Uploaded Image" @click="previewImage">
+    </div>
 
     <div id="buttons" style="margin-top: 20px; text-align: right;">
         <el-button type="primary" @click="submit">发送</el-button>
@@ -100,19 +114,24 @@
             :rows="4"
             readonly
             placeholder="AI生成的文本将显示在这里..."
-            :autosize="{ minRows: 4 }"
+            :autosize="{ minRows: 4, maxRows: 6 }"
     ></el-input>
 
+    <el-image-viewer
+            v-if="showViewer"
+            :url-list="[uploadedImageUrl]"
+            @close="showViewer = false"
+    ></el-image-viewer>
+
 </div>
 
 <script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
 <script src="https://cdn.jsdelivr.net/npm/element-plus"></script>
 <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
-
 <script>
     const {createApp} = Vue;
-    const {ElUpload, ElInput, ElButton, ElMessage} = ElementPlus;
+    const {ElUpload, ElInput, ElButton, ElMessage, ElImageViewer} = ElementPlus;
 
     const app = createApp({
         data() {
@@ -120,7 +139,8 @@
                 dragging: false,
                 file: null,
                 result: '',
-                uploadedImageUrl: ''
+                uploadedImageUrl: '',
+                showViewer: false
             };
         },
         methods: {
@@ -176,6 +196,9 @@
                 this.file = null;
                 this.result = '';
                 this.uploadedImageUrl = '';
+            },
+            previewImage() {
+                this.showViewer = true;
             }
         }
     });