feat: 修改样式与功能

miniprogram/pages/chat/chat.less

@@ -14,6 +14,14 @@ page {
   overflow: hidden;
 }
 
+.chat-nav {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  z-index: 200;
+}
+
 .chat-container {
   position: fixed;
   top: 0;
@@ -283,7 +291,7 @@ page {
   left: 0;
   right: 0;
   padding: 20rpx 24rpx;
-  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+  padding-bottom: 32rpx; // calc(20rpx + env(safe-area-inset-bottom));
   background: linear-gradient(180deg, rgba(245, 249, 252, 0.9) 0%, rgba(232, 244, 252, 0.95) 100%);
   z-index: 100;
 }
@@ -300,7 +308,7 @@ page {
   background-color: #FFFFFF;
   border-radius: 86rpx;
   padding: 0 24rpx;
-  height: 96rpx;
+  height: 80rpx;
   border: 2rpx solid rgba(255, 255, 255, 1);
   box-sizing: border-box;
 }
@@ -327,8 +335,8 @@ page {
 
 .chat-input {
   flex: 1;
-  height: 96rpx;
-  line-height: 96rpx;
+  height: 80rpx;
+  line-height: 80rpx;
   font-size: 30rpx;
   color: rgba(19, 20, 21, 1);
   background: transparent;
@@ -342,7 +350,7 @@ page {
 /* 发送按钮 */
 .send-btn {
   width: 120rpx;
-  height: 96rpx;
+  height: 80rpx;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -400,4 +408,4 @@ page {
     transform: scale(1);
     opacity: 1;
   }
-}
+}

miniprogram/pages/chat/chat.ts

@@ -31,6 +31,7 @@ Page({
     userAvatar: '',
     isLoading: false,
     avatarError: false,
+    keyboardHeight: 0,
   },
 
   onLoad() {
@@ -100,6 +101,16 @@ Page({
     });
   },
 
+  onKeyboardHeightChange(e: WechatMiniprogram.InputKeyboardHeightChange) {
+    const keyboardHeight = e.detail.height || 0;
+
+    if (keyboardHeight === this.data.keyboardHeight) return;
+
+    this.setData({ keyboardHeight }, () => {
+      this.scrollToBottom();
+    });
+  },
+
   // 发送文字消息
   sendTextMessage() {
     const { inputValue, isLoading } = this.data;
@@ -210,14 +221,13 @@ Page({
 
     try {
       // 调用客服消息接口
-      const res: any = await api_cozeAgent({
+      const {data}: any = await api_cozeAgent({
         message: messageContent,
         userId: userId
       });
-
-      if (res.code === 200 && res.data) {
+      if (data.code === 200 && data.data) {
         // 使用接口返回的回复内容
-        const reply = res.data.reply || res.data.content || res.data.message || '您好，我已经收到您的问题。';
+        const reply =data.data || '您好，我已经收到您的问题。';
         this.addReplyMessage(reply);
       } else {
         // 接口返回错误，使用默认回复

miniprogram/pages/chat/chat.wxml

@@ -1,11 +1,13 @@
-<navigation-bar title="音乐数字AI客服" back-btn="{{true}}" bg-color="#E8F4FC"></navigation-bar>
+<view class="chat-nav">
+  <navigation-bar title="音乐数字AI客服" back-btn="{{true}}" bg-color="#E8F4FC"></navigation-bar>
+</view>
 
 <!-- 背景图 -->
 <image class="bg-image" src="./images/bg.png" mode="aspectFill"></image>
 
 <view class="chat-container">
   <!-- 聊天消息列表 -->
-  <scroll-view class="chat-scroll" scroll-y scroll-into-view="{{scrollToMessage}}" enhanced show-scrollbar="{{false}}">
+  <scroll-view class="chat-scroll" style="bottom: calc(120rpx + {{keyboardHeight}}px);" scroll-y scroll-into-view="{{scrollToMessage}}" enhanced show-scrollbar="{{false}}">
     <view class="message-list">
       <block wx:for="{{messages}}" wx:key="id">
         <!-- AI文本消息（带头像） -->
@@ -89,7 +91,7 @@
   </scroll-view>
 
   <!-- 输入区域 -->
-  <view class="input-area">
+  <view class="input-area" style="bottom: {{keyboardHeight}}px;">
     <view class="input-container">
       <view class="input-wrapper">
         <input
@@ -100,8 +102,9 @@
           bindinput="onInput"
           confirm-type="send"
           bindconfirm="sendTextMessage"
-          adjust-position
+          adjust-position="{{false}}"
           cursor-spacing="20"
+          bindkeyboardheightchange="onKeyboardHeightChange"
         />
       </view>
       <view class="send-btn" bindtap="sendTextMessage">
@@ -109,4 +112,4 @@
       </view>
     </view>
   </view>
-</view>
+</view>