From 6261d3eba1cb59465e9dffdfd92ba0d52fcc2935 Mon Sep 17 00:00:00 2001
From: heshunme <heshunme@outlook.com>
Date: Sat, 26 Oct 2024 20:22:17 +0800
Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E5=9B=BE=E7=89=87=E6=96=B0=E5=A2=9E?=
 =?UTF-8?q?=E9=A2=84=E8=A7=88=E6=A1=86=EF=BC=9B=E4=BF=AE=E5=A4=8D=E6=96=87?=
 =?UTF-8?q?=E6=9C=AC=E6=A1=86=E8=BF=87=E5=BA=A6=E9=95=BF=E9=AB=98=E4=BD=BF?=
 =?UTF-8?q?=E5=BE=97=E9=A1=B5=E9=9D=A2=E4=B8=8A=E9=83=A8=E5=88=86=E4=B8=8D?=
 =?UTF-8?q?=E5=8F=AF=E8=A7=81=E7=9A=84=E9=97=AE=E9=A2=98=E3=80=82?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 html/terminal.html | 26 ++++++++++++++++++++++----
 html/upload.html   | 45 ++++++++++++++++++++++++++++++++++-----------
 2 files changed, 56 insertions(+), 15 deletions(-)

diff --git a/html/terminal.html b/html/terminal.html
index def6cbc..ee03c9e 100644
--- a/html/terminal.html
+++ b/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');
diff --git a/html/upload.html b/html/upload.html
index 1775c5e..d5d4ad7 100644
--- a/html/upload.html
+++ b/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;
             }
         }
     });