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