为图片新增预览框；修复文本框过度长高使得页面上部分不可见的问题。
This commit is contained in:
parent
9bbeb4f618
commit
6261d3eba1
@ -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');
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
Loading…
Reference in New Issue
Block a user