xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-09-17 16:56:38 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

优化聊天页面事件处理

Browse Source
This commit is contained in:
RockYang 2023-03-17 17:49:45 +08:00
parent 9477b96629
commit 729612275b
4 changed files with 193 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
web/index.html
View File

@ -7,6 +7,17 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="favicon.ico"> <link rel="icon" href="favicon.ico">
<title>ChatGPT 助手</title> <title>ChatGPT 助手</title>
<style>
* {
margin: 0;
padding: 0;
}
html, body {
height: 100%;
}
</style>
</head> </head>
<body> <body>

8
web/src/components/ChatPrompt.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="chat-line chat-line-right"> <div class="chat-line chat-line-right">
<div class="chat-item"> <div class="chat-item">
<span class="content">{{ content }}</span> <div class="content">{{ content }}</div>
<div class="triangle"></div> <div class="triangle"></div>
</div> </div>
@ -38,6 +38,10 @@ export default defineComponent({
.chat-icon { .chat-icon {
margin-left 5px; margin-left 5px;
img {
border-radius 5px;
}
} }
.chat-item { .chat-item {
@ -57,7 +61,7 @@ export default defineComponent({
} }
.content { .content {
float: right; word-break break-word;
padding: 5px 10px; padding: 5px 10px;
background-color: #98E165; background-color: #98E165;
color var(--content-color); color var(--content-color);

8
web/src/components/ChatReply.vue
View File

@ -6,7 +6,7 @@
<div class="chat-item"> <div class="chat-item">
<div class="triangle"></div> <div class="triangle"></div>
<span class="content">{{ content }}</span> <div class="content">{{ content }}</div>
</div> </div>
</div> </div>
</template> </template>
@ -38,6 +38,10 @@ export default defineComponent({
.chat-icon { .chat-icon {
margin-right 5px; margin-right 5px;
img {
border-radius 5px;
}
} }
.chat-item { .chat-item {
@ -58,7 +62,7 @@ export default defineComponent({
} }
.content { .content {
float: left; word-break break-word;
padding: 8px 10px; padding: 8px 10px;
color var(--content-color) color var(--content-color)
background-color: #fff; background-color: #fff;

282
web/src/views/Chat.vue
View File

@ -1,39 +1,44 @@
<template> <template>
<div class="common-layout"> <div class="body">
<div class="chat-box" :style="{height: chatBoxHeight+'px'}"> <div id="container">
<div v-for="chat in chatData" :key="chat.id"> <div class="chat-box" :style="{height: chatBoxHeight+'px'}">
<chat-prompt <div v-for="chat in chatData" :key="chat.id">
v-if="chat.type==='prompt'" <chat-prompt
:icon="chat.icon" v-if="chat.type==='prompt'"
:content="chat.content"/> :icon="chat.icon"
<chat-reply v-else-if="chat.type==='reply'" :content="chat.content"/>
:icon="chat.icon" <chat-reply v-else-if="chat.type==='reply'"
:content="chat.content"/> :icon="chat.icon"
</div> :content="chat.content"/>
</div>
</div> </div><!-- end chat box -->
<div class="input-box" :style="{width: inputBoxWidth+'px'}" id="input-box">
<div class="input-container">
<textarea class="input-text" id="input-text" rows="1" :style="{minHeight:'24px', height: textHeight+'px'}"
v-on:keydown="inputKeyDown"
v-model="inputValue"
placeholder="Input any thing here..."
v-on:focus="focus"></textarea>
</div>
<div class="btn-container">
<button type="button"
class="btn btn-success"
:disabled="sending"
v-on:click="sendMessage">发送
</button>
</div>
</div><!-- end input box -->
</div><!-- end container -->
<div class="input-box" :style="{width: inputBoxWidth+'px'}" id="input-box">
<div class="input-container">
<textarea class="input-text" id="input-text" rows="1" :style="{minHeight:'24px', height: textHeight+'px'}"
v-on:keydown="inputKeyDown"
v-model="inputValue"
placeholder="Input any thing here..."
autofocus></textarea>
</div>
<div class="btn-container">
<button type="button"
class="btn btn-success"
:disabled="sending"
v-on:click="sendMessage">发送
</button>
</div>
</div>
</div> </div>
</template> </template>
<script> <script>
import {defineComponent} from 'vue' import {defineComponent, nextTick} from 'vue'
import ChatPrompt from "@/components/ChatPrompt.vue"; import ChatPrompt from "@/components/ChatPrompt.vue";
import ChatReply from "@/components/ChatReply.vue"; import ChatReply from "@/components/ChatReply.vue";
import {randString} from "@/utils/libs"; import {randString} from "@/utils/libs";
@ -59,7 +64,7 @@ export default defineComponent({
} }
], ],
inputBoxHeight: 63, inputBoxHeight: 63,
inputBoxWidth: window.innerWidth - 20, inputBoxWidth: 0,
inputValue: '', inputValue: '',
textHeight: 24, textHeight: 24,
textWidth: 0, textWidth: 0,
@ -74,19 +79,23 @@ export default defineComponent({
computed: {}, computed: {},
mounted: function () { mounted: function () {
this.inputBoxHeight = document.getElementById("input-box").offsetHeight; nextTick(() => {
this.textWidth = document.getElementById("input-text").offsetWidth; this.inputBoxHeight = document.getElementById("input-box").offsetHeight;
this.chatBoxHeight = window.innerHeight - this.inputBoxHeight - 40; this.textWidth = document.getElementById("input-text").offsetWidth;
this.chatBoxHeight = window.innerHeight - this.inputBoxHeight - 40;
})
//判断是否手机端访问 //判断是否手机端访问
const userAgentInfo = navigator.userAgent.toLowerCase(); const userAgentInfo = navigator.userAgent.toLowerCase();
const Agents = ["android", "iphone", "windows phone", "ipad", "ipod"]; const Agents = ["android", "iphone", "windows phone", "ipad", "ipod"];
for (let v = 0; v < Agents.length; v++) { for (let v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) >= 0) { if (userAgentInfo.toLowerCase().indexOf(Agents[v]) >= 0) {
this.isMobile = true; this.isMobile = true;
} }
} }
this.inputBoxWidth = window.innerWidth;
window.addEventListener('resize', this.windowResize); window.addEventListener('resize', this.windowResize);
// 初始化 WebSocket 对象 // 初始化 WebSocket 对象
@ -106,6 +115,11 @@ export default defineComponent({
content: reader.result content: reader.result
}); });
this.sending = false; this.sending = false;
// 将聊天框的滚动条滑动到最底部
nextTick(() => {
document.getElementById('container').scrollTo(0, document.getElementById('container').scrollHeight)
})
}; };
} }
@ -127,19 +141,22 @@ export default defineComponent({
methods: { methods: {
inputKeyDown: function (e) { inputKeyDown: function (e) {
// PC 端按回车键直接提交数据
if (e.keyCode === 13 && !this.isMobile) {
e.stopPropagation();
e.preventDefault();
return this.sendMessage();
}
this.inputResize(); if (e.keyCode === 13) {
if (!this.isMobile) { // PC 端按回车键直接提交数据
e.preventDefault();
return this.sendMessage();
} else {
return this.inputResize(true);
}
}
this.inputResize(false);
}, },
// 发送消息 // 发送消息
sendMessage: function () { sendMessage: function () {
if (this.sending) { if (this.sending || this.inputValue.trim().length === 0) {
return false; return false;
} }
@ -155,34 +172,54 @@ export default defineComponent({
this.sending = true; this.sending = true;
this.socket.send(this.inputValue); this.socket.send(this.inputValue);
this.inputValue = ''; this.inputValue = '';
this.inputResize(false);
return true; return true;
}, },
// 初始化 /**
inputResize: function () { * 根据输入内容的多少动态调整输入框的大小
// 根据输入的字数自动调整输入框的大小 * @param flag 是否输入回车键，如果输入了回车键则需要增加一行
*/
inputResize: function (flag) {
let line = 1; let line = 1;
if (flag) {
line++;
}
let textWidth = 0; let textWidth = 0;
for (let i in this.inputValue) { for (let i in this.inputValue) {
if (this.inputValue[i] === '\n') { if (this.inputValue[i] === '\n') {
line++; line++;
textWidth = 0; // 换行之后前面字数清零 textWidth = 0; // 换行之后前面字数清零
continue;
} }
if (this.inputValue.charCodeAt(Number(i)) < 128) { if (this.inputValue.charCodeAt(Number(i)) < 128) {
textWidth += 9.65; // 英文字符宽度 textWidth += 8; // 英文字符宽度
} else { } else {
textWidth += 16.07; // 中文字符宽度 textWidth += 16; // 中文字符宽度
}
if (textWidth >= this.textWidth) { // 另起一行
textWidth = textWidth - this.textWidth;
line++;
} }
} }
line = line + (Math.ceil(textWidth / this.textWidth)) - 1;
this.inputBoxHeight = 63 + (line - 1) * 24; this.inputBoxHeight = 63 + (line - 1) * 24;
this.textHeight = line * 24; this.textHeight = line * 24;
}, },
windowResize: function () { windowResize: function () {
this.inputResize(); this.inputResize(false);
this.chatBoxHeight = window.innerHeight - this.inputBoxHeight - 40; this.chatBoxHeight = window.innerHeight - this.inputBoxHeight - 40;
this.inputBoxWidth = window.innerWidth - 20; this.inputBoxWidth = window.innerWidth;
},
// 获取焦点
focus: function () {
setTimeout(function () {
document.getElementById('container').scrollTo(0, document.getElementById('container').scrollHeight)
}, 200)
} }
}, },
@ -190,77 +227,98 @@ export default defineComponent({
</script> </script>
<style lang="stylus"> <style lang="stylus">
.chat-box { #app {
// 变量定义 height: 100%;
--content-font-size: 16px;
--content-color: #374151;
background-color: rgba(247, 247, 248, 1); .body {
font-family 'Microsoft YaHei', '微软雅黑', Arial, sans-serif; background-color: rgba(247, 247, 248, 1);
padding: 20px 10px; display flex;
justify-content center;
align-items flex-start;
height 100%;
.chat-line { #container {
padding 10px; overflow auto;
font-size 14px;
display: flex;
align-items: flex-start;
.chat-icon { .chat-box {
img { // 变量定义
width 32px; --content-font-size: 16px;
height 32px; --content-color: #374151;
font-family 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
padding: 20px 10px;
.chat-line {
padding 10px;
font-size 14px;
display: flex;
align-items: flex-start;
.chat-icon {
img {
width 32px;
height 32px;
}
}
}
}
.input-box {
padding 10px;
position: absolute;
bottom: 0
display: flex;
justify-content: center;
align-items: flex-start;
.input-container {
overflow hidden
width 100%
margin: 0;
border: none;
border-radius: 6px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
background-color: rgba(255, 255, 255, 1);
padding: 5px 10px;
.input-text {
font-size: 16px;
padding 0
margin 0
outline: none;
width 100%;
border none
background #ffffff
resize none
line-height 24px;
color #333;
}
.input-text::-webkit-scrollbar {
width: 0;
height: 0;
}
}
.btn-container {
margin-left 10px;
button {
width 70px;
}
}
} }
} }
}
} #container::-webkit-scrollbar {
.input-box {
background-color: rgba(255, 255, 255, 1);
padding 10px;
position: absolute;
bottom: 0
display: flex;
justify-content: center;
align-items: center;
.input-container {
overflow hidden
width 100%
margin: 0;
background #ffffff
border: none;
border-radius: 6px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
padding: 5px 10px;
.input-text {
font-size: 16px;
padding 0
margin 0
outline: none;
width 100%;
border none
background transparent
resize none
line-height 24px;
color #333;
}
.input-text::-webkit-scrollbar {
width: 0; width: 0;
height: 0; height: 0;
} }
} }
.btn-container {
margin-left 10px;
button {
width 70px;
}
}
} }
</style> </style>