Эх сурвалжийг харах

fix: 智能客服输入框改为 textarea 支持多行输入

- van-field 改为 type=textarea + autosize,支持自动撑高换行
- Enter 键改回换行默认行为,点击按钮发送
- 最大高度 120px 超出滚动

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
tanlie 2 долоо хоног өмнө
parent
commit
0dbe3202a2

+ 10 - 4
wishing-tree-h5/src/components/ChatWidget.vue

@@ -54,9 +54,11 @@
       <div class="chat-footer">
         <van-field
           v-model="input"
+          type="textarea"
+          rows="1"
+          autosize
           placeholder="输入你的问题..."
           :border="false"
-          @keypress.enter="send"
         />
         <van-button
           type="primary"
@@ -357,7 +359,7 @@ watch(showChat, (val) => {
 
 .chat-footer {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   padding: 8px 12px;
   background: #fff;
   border-top: 1px solid #ebedf0;
@@ -367,8 +369,12 @@ watch(showChat, (val) => {
 .chat-footer :deep(.van-cell) {
   flex: 1;
   background: #f5f5f5;
-  border-radius: 20px;
-  padding: 6px 14px;
+  border-radius: 12px;
+  padding: 8px 14px;
+}
+.chat-footer :deep(.van-field__control) {
+  max-height: 120px;
+  overflow-y: auto;
 }
 
 /* 许愿建议卡 */

BIN
wishing-tree-h5/wish.zip