xinyin025/geekai
1
0
Fork 0
mirror of https://github.com/yangjian102621/geekai.git synced 2025-11-13 12:43:43 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

auto resize the input element rows, when use inputed more than one line

Browse Source
This commit is contained in:
RockYang
2024-05-21 17:36:47 +08:00
parent bee19392c1
commit 7f1ec90748
3 changed files with 125 additions and 82 deletions
Download Patch File Download Diff File Expand all files Collapse all files

127
web/src/assets/css/chat-plus.styl
View File

@@ -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;
}
}
}
}
}