mirror of
https://github.com/yangjian102621/geekai.git
synced 2025-11-04 16:23:42 +08:00
auto resize the input element rows, when use inputed more than one line
This commit is contained in:
RockYang
@@ -1,6 +1,7 @@
|
||||
# 更新日志
|
||||
## v4.0.8
|
||||
* 功能优化：当数据库更新失败的时候记录错误日志
|
||||
* 功能优化：聊天输入框会随着输入内容的增多自动调整高度
|
||||
|
||||
## v4.0.7
|
||||
|
||||
|
||||
@@ -129,7 +129,7 @@ $borderColor = #4676d0;
|
||||
--el-main-padding: 0;
|
||||
margin: 0;
|
||||
|
||||
.chat-box {
|
||||
.chat-container {
|
||||
min-width: 0;
|
||||
flex: 1;
|
||||
background-color: var(--el-bg-color)
|
||||
@@ -138,6 +138,7 @@ $borderColor = #4676d0;
|
||||
#container {
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
position relative
|
||||
|
||||
::-webkit-scrollbar {
|
||||
width: 0;
|
||||
@@ -165,68 +166,94 @@ $borderColor = #4676d0;
|
||||
}
|
||||
|
||||
.input-box {
|
||||
background-color: #ffffff
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
|
||||
padding 0 15px;
|
||||
position absolute
|
||||
bottom 0
|
||||
width 100%
|
||||
|
||||
.tool-item {
|
||||
margin-right 15px
|
||||
border-radius: 6px;
|
||||
color: #19c37d;
|
||||
.input-box-inner {
|
||||
display flex
|
||||
justify-content center
|
||||
justify-items center
|
||||
padding 6px
|
||||
cursor pointer
|
||||
background #F2F2F2
|
||||
background-color: #ffffff
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
|
||||
padding 0 15px;
|
||||
|
||||
&:hover {
|
||||
background #D5FAD3
|
||||
}
|
||||
.tool-item {
|
||||
margin-right 15px
|
||||
border-radius: 6px;
|
||||
color: #19c37d;
|
||||
display flex
|
||||
justify-content center
|
||||
justify-items center
|
||||
padding 6px
|
||||
cursor pointer
|
||||
background #F2F2F2
|
||||
|
||||
.iconfont {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
&:hover {
|
||||
background #D5FAD3
|
||||
}
|
||||
|
||||
.input-container {
|
||||
width 100%
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 10px 0;
|
||||
display flex
|
||||
justify-content center
|
||||
position relative
|
||||
|
||||
.el-textarea {
|
||||
.el-textarea__inner::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
.iconfont {
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
|
||||
.select-file {
|
||||
position absolute;
|
||||
right 48px;
|
||||
top 20px;
|
||||
}
|
||||
.input-body {
|
||||
width 100%
|
||||
margin: 0;
|
||||
border: none;
|
||||
padding: 10px 0;
|
||||
display flex
|
||||
justify-content center
|
||||
position relative
|
||||
|
||||
.send-btn {
|
||||
position absolute;
|
||||
right 12px;
|
||||
top 20px;
|
||||
.hide-div {
|
||||
white-space: pre-wrap; /* 保持文本换行 */
|
||||
visibility: hidden; /* 隐藏 div */
|
||||
position: absolute; /* 脱离文档流 */
|
||||
line-height: 24px
|
||||
font-size 14px
|
||||
word-wrap: break-word; /* 允许单词换行 */
|
||||
overflow-wrap: break-word; /* 允许长单词换行，适用于现代浏览器 */
|
||||
}
|
||||
|
||||
.input-border {
|
||||
display flex
|
||||
width 100%
|
||||
overflow hidden
|
||||
border: 2px solid #21AA93
|
||||
border-radius 10px
|
||||
padding 10px
|
||||
|
||||
|
||||
.prompt-input::-webkit-scrollbar {
|
||||
width: 0;
|
||||
height: 0;
|
||||
}
|
||||
|
||||
.prompt-input {
|
||||
width 100%
|
||||
line-height: 24px
|
||||
border none
|
||||
font-size 14px
|
||||
background none
|
||||
resize: none
|
||||
}
|
||||
|
||||
.send-btn {
|
||||
width 32px
|
||||
margin-left 10px
|
||||
.el-button {
|
||||
padding 8px 5px;
|
||||
border-radius 6px;
|
||||
font-size 20px;
|
||||
}
|
||||
}
|
||||
|
||||
.el-button {
|
||||
padding 8px 5px;
|
||||
border-radius 6px;
|
||||
font-size 20px;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -65,9 +65,9 @@
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-main v-loading="loading" element-loading-background="rgba(122, 122, 122, 0.3)">
|
||||
<div class="chat-box" :style="{height: mainWinHeight+'px'}">
|
||||
<div class="chat-container">
|
||||
<div>
|
||||
<div id="container">
|
||||
<div id="container" :style="{height: mainWinHeight+'px'}">
|
||||
<div class="chat-box" id="chat-box" :style="{height: chatBoxHeight+'px'}">
|
||||
<div v-if="showHello">
|
||||
<welcome @send="autofillPrompt"/>
|
||||
@@ -84,8 +84,8 @@
|
||||
</div>
|
||||
</div><!-- end chat box -->
|
||||
|
||||
<el-affix position="bottom" :offset="0">
|
||||
<div class="input-box">
|
||||
<div class="input-box">
|
||||
<div class="input-box-inner">
|
||||
<span class="tool-item">
|
||||
<el-popover
|
||||
:width="300"
|
||||
@@ -151,32 +151,34 @@
|
||||
</el-tooltip>
|
||||
</span>
|
||||
|
||||
<div class="input-container">
|
||||
<el-input
|
||||
ref="textInput"
|
||||
v-model="prompt"
|
||||
v-on:keydown="inputKeyDown"
|
||||
autofocus
|
||||
type="textarea"
|
||||
:rows="2"
|
||||
style="--el-input-focus-border-color:#21AA93;
|
||||
border: 1px solid #21AA93;--el-input-border-color:#21AA93;
|
||||
border-radius: 5px; --el-input-hover-border-color:#21AA93;"
|
||||
placeholder="按 Enter 键发送消息，使用 Ctrl + Enter 换行"
|
||||
/>
|
||||
<span class="send-btn">
|
||||
<el-button type="info" v-if="showStopGenerate" @click="stopGenerate" plain>
|
||||
<el-icon>
|
||||
<VideoPause/>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button @click="sendMessage" color="#19c37d" style="color:#ffffff" v-else>
|
||||
<el-icon><Promotion/></el-icon>
|
||||
</el-button>
|
||||
</span>
|
||||
<div class="input-body">
|
||||
<div ref="textHeightRef" class="hide-div">{{prompt}}</div>
|
||||
<div class="input-border">
|
||||
<textarea
|
||||
ref="inputRef"
|
||||
class="prompt-input"
|
||||
:rows="row"
|
||||
v-model="prompt"
|
||||
@keydown="onInput"
|
||||
@input="onInput"
|
||||
placeholder="按 Enter 键发送消息，使用 Ctrl + Enter 换行"
|
||||
autofocus>
|
||||
</textarea>
|
||||
<span class="send-btn">
|
||||
<el-button type="info" v-if="showStopGenerate" @click="stopGenerate" plain>
|
||||
<el-icon>
|
||||
<VideoPause/>
|
||||
</el-icon>
|
||||
</el-button>
|
||||
<el-button @click="sendMessage" color="#19c37d" style="color:#ffffff" v-else>
|
||||
<el-icon><Promotion/></el-icon>
|
||||
</el-button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div><!-- end input box -->
|
||||
</el-affix>
|
||||
</div>
|
||||
</div><!-- end container -->
|
||||
</div><!-- end loading -->
|
||||
</div>
|
||||
@@ -237,11 +239,13 @@ const roleId = ref(0)
|
||||
const newChatItem = ref(null);
|
||||
const isLogin = ref(false)
|
||||
const showHello = ref(true)
|
||||
const textInput = ref(null)
|
||||
const inputRef = ref(null)
|
||||
const textHeightRef = ref(null)
|
||||
const showNotice = ref(false)
|
||||
const notice = ref("")
|
||||
const noticeKey = ref("SYSTEM_NOTICE")
|
||||
const store = useSharedStore();
|
||||
const row = ref(1)
|
||||
|
||||
if (isMobile()) {
|
||||
router.replace("/mobile/chat")
|
||||
@@ -705,8 +709,19 @@ const enableInput = () => {
|
||||
showStopGenerate.value = false;
|
||||
}
|
||||
|
||||
// 登录输入框输入事件处理
|
||||
const inputKeyDown = function (e) {
|
||||
const onInput = (e) => {
|
||||
// 根据输入的内容自动计算输入框的行数
|
||||
const lineHeight = parseFloat(window.getComputedStyle(inputRef.value).lineHeight)
|
||||
textHeightRef.value.style.width = inputRef.value.clientWidth + 'px'; // 设定宽度和 textarea 相同
|
||||
const lines = Math.floor(textHeightRef.value.clientHeight / lineHeight);
|
||||
inputRef.value.scrollTo(0, inputRef.value.scrollHeight)
|
||||
if (prompt.value.length === 0) {
|
||||
row.value = 1
|
||||
} else if (row.value <= 7) {
|
||||
row.value = lines
|
||||
}
|
||||
|
||||
// 输入回车自动提交
|
||||
if (e.keyCode === 13) {
|
||||
if (e.ctrlKey) { // Ctrl + Enter 换行
|
||||
prompt.value += "\n";
|
||||
@@ -720,7 +735,7 @@ const inputKeyDown = function (e) {
|
||||
// 自动填充 prompt
|
||||
const autofillPrompt = (text) => {
|
||||
prompt.value = text
|
||||
textInput.value.focus()
|
||||
inputRef.value.focus()
|
||||
// sendMessage()
|
||||
}
|
||||
// 发送消息
|
||||
|
||||
Reference in New Issue
Block a user