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

web/src/views/ChatPlus.vue

@@ -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()
 }
 // 发送消息