From 6885560feea6f5542cedb20fa487ee25abcae405 Mon Sep 17 00:00:00 2001
From: Ethereal <3432649580@qq.com>
Date: Sat, 25 Oct 2025 18:02:08 +0800
Subject: [PATCH] =?UTF-8?q?=E5=90=88=E5=B9=B6=E8=91=A3=E5=80=A9=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/deepMate/deepMate.vue | 694 +++++++++++++++++++++++++++-----------------
 1 file changed, 434 insertions(+), 260 deletions(-)

diff --git a/pages/deepMate/deepMate.vue b/pages/deepMate/deepMate.vue
index 0a41b7c..703e3ca 100644
--- a/pages/deepMate/deepMate.vue
+++ b/pages/deepMate/deepMate.vue
@@ -1,25 +1,19 @@
 <template>
   <view class="deepMate-page">
-    <!-- 顶部导航栏 - 固定定位 -->
+    <!-- 顶部导航栏 -->
     <view class="header" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
       <view class="header-left">
-        <image
-          src="https://d31zlh4on95l9h.cloudfront.net/images/f91e09b5987802185e7679055dafd272.svg"
-          class="icon"
-        ></image>
+        <image src="https://d31zlh4on95l9h.cloudfront.net/images/f91e09b5987802185e7679055dafd272.svg" class="icon">
+        </image>
       </view>
       <view class="header-center">
         <text class="title">DeepMate</text>
       </view>
       <view class="header-right">
-        <image
-          src="https://d31zlh4on95l9h.cloudfront.net/images/d7c4e74201213a25dd9574e908233928.svg"
-          class="icon"
-        ></image>
-        <image
-          src="https://d31zlh4on95l9h.cloudfront.net/images/099903c4aabf5713488b5cb60815e3f7.svg"
-          class="icon"
-        ></image>
+        <image src="https://d31zlh4on95l9h.cloudfront.net/images/d7c4e74201213a25dd9574e908233928.svg" class="icon">
+        </image>
+        <image src="https://d31zlh4on95l9h.cloudfront.net/images/099903c4aabf5713488b5cb60815e3f7.svg" class="icon"
+          @click="openHistoryDrawer"></image>
         <!-- 新增新会话按钮
         <button class="new-chat-button" @click="newChat">
           <text class="new-chat-text">新会话</text>
@@ -29,72 +23,45 @@
 
     <!-- 主要内容区域 -->
     <view class="main-content">
-      <!-- 顶部固定区域占位符 -->
-      <view class="banner-placeholder"></view>
-
-      <view
-        class="banner-panel"
-        :class="messages.length === 0 ? '' : 'panelShow'"
-        :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
-      >
-        <image
-          src="https://d31zlh4on95l9h.cloudfront.net/images/42e18bd7fe97d4f4f37aa70439a0990b.svg"
-          class="pray-banner"
-          :class="messages.length === 0 ? '' : 'show'"
-          :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
-          mode="aspectFill"
-        ></image>
+      <view class="banner-panel" v-if="messages.length === 0">
+        <image src="https://d31zlh4on95l9h.cloudfront.net/images/42e18bd7fe97d4f4f37aa70439a0990b.svg"
+          class="pray-banner"></image>
         <view class="contain">
           <!-- 机器人头像和欢迎语 -->
-          <view class="robot-container">
-            <image
-              src="https://d31zlh4on95l9h.cloudfront.net/images/61fa384381c88ad80be28f41827fe0e5.svg"
-              class="robot-avatar"
-            ></image>
+          <view class="robot-container" v-if="messages.length === 0">
+            <image src="https://d31zlh4on95l9h.cloudfront.net/images/61fa384381c88ad80be28f41827fe0e5.svg"
+              class="robot-avatar"></image>
             <view class="welcome-message">
               <text class="greeting">Hi, 我是您的股市随身顾问~</text>
-              <text class="description"
-                >个股诊断、市场情绪解读，都可以找我。</text
-              >
+              <text class="description">个股诊断、市场情绪解读，都可以找我。</text>
             </view>
           </view>
 
           <!-- 功能标签栏 -->
-          <view
-            class="function-tabs"
-            v-if="messages.length === 0"
-            scroll-x="true"
-            show-scrollbar="false"
-          >
-            <view class="tab-item">个股诊断</view>
-            <view class="tab-item">市场情绪温度计</view>
-            <view class="tab-item">买卖时机提示</view>
-            <view class="tab-item">个股</view>
-          </view>
+          <!-- <view class="function-tabs" v-if="messages.length === 0">
+        <view ref="tabsTrack" class="tabs-track" :style="{ transform: 'translate3d(-' + marqueeOffset + 'px,0,0)' }">
+          <view class="tab-item" v-for="(tab, idx) in marqueeList" :key="idx">{{ tab }}</view>
+        </view>
+      </view> -->
 
           <!-- 特斯拉推荐卡片 -->
           <view class="recommend-card" v-if="messages.length === 0">
             <view class="arrow" v-if="messages.length === 0"></view>
             <view class="card-content">
-              <image
-                src="../../static/images/tesla-logo.png"
-                class="logo"
-              ></image>
+              <image src="../../static/images/tesla-logo.png" class="logo"></image>
               <view class="card-text">
                 <text class="main-question">当前特斯拉该如何布局？</text>
                 <text class="stock-code">TSLA</text>
               </view>
-              <image
-                src="https://d31zlh4on95l9h.cloudfront.net/images/40d94054644f6e3f1c366751f07f0010.svg"
-                class="arrow-icon"
-                @click="goBlank"
-              ></image>
+              <image src="https://d31zlh4on95l9h.cloudfront.net/images/40d94054644f6e3f1c366751f07f0010.svg"
+                class="arrow-icon" @click="goBlank"></image>
             </view>
           </view>
         </view>
+
       </view>
       <!-- 可能感兴趣的话题 -->
-      <view v-if="messages.length === 0" class="interest-section">
+      <!-- <view v-if="messages.length === 0" class="interest-section">
         <text class="section-title">- 您可能感兴趣 -</text>
         <view class="topics-list">
           <view class="topic-item" v-for="topic in hotTopics" :key="topic.id">
@@ -104,36 +71,33 @@
             }}</text>
           </view>
         </view>
-      </view>
+      </view> -->
 
       <!-- 聊天区域 -->
-      <view class="chat-container" v-if="messages.length > 0">
-        <!-- 给聊天容器添加滚动引用 -->
-        <scroll-view
-          class="chat-scroll-view"
-          scroll-y="true"
-          :scroll-top="scrollTop"
-          :style="{ paddingTop: safeAreaInsets?.top + 'px' }"
-        >
-          <view class="message-list" id="messageList">
-            <view
-              v-for="(message, index) in messages"
-              :key="index"
-              :class="
-                message.isUser ? 'message user-message' : 'message bot-message'
-              "
-            >
-              <!-- 会话图标 -->
-              <text
-                :class="
-                  message.isUser
-                    ? 'fa-solid fa-user message-icon'
-                    : 'fa-solid fa-robot message-icon'
-                "
-              ></text>
-              <!-- 会话内容 -->
-              <view class="message-content">
-                <!-- loading -->
+      <!-- 顶部粘性欢迎块：始终保留在聊天上方 -->
+      <view class="chat-header" v-if="messages.length > 0">
+        <view class="robot-container">
+          <image src="https://d31zlh4on95l9h.cloudfront.net/images/61fa384381c88ad80be28f41827fe0e5.svg"
+            class="robot-avatar"></image>
+          <view class="welcome-message"> <text class="greeting">Hi, 我是您的股市随身顾问~</text> <text
+              class="description">个股诊断、市场情绪解读，都可以找我。</text>
+          </view>
+        </view>
+      </view>
+      <scroll-view class="chat-container" scroll-y="true" :scroll-top="chatScrollTop" @scroll="onChatScroll"
+        v-if="messages.length > 0">
+        <view class="message-list" id="messageList">
+          <view v-for="(message, index) in messages" :key="index" :class="message.isUser ? 'message user-message' : 'message bot-message'
+            ">
+            <!-- 会话图标 -->
+            <text :class="message.isUser
+                  ? 'fa-solid fa-user message-icon'
+                  : 'fa-solid fa-robot message-icon'
+              "></text>
+            <!-- 会话内容 -->
+            <view class="message-content">
+              <!-- <text class="message-text">{{ message.content }}</text> -->
+             <!-- loading -->
                 <view
                   class="loading-dots"
                   v-if="message.isThinking || !message.isUser"
@@ -171,31 +135,21 @@
                     </view>
                   </view>
                 </view>
-                <!-- 使用 rich-text 渲染 Markdown 内容 -->
-                <rich-text
-                  v-if="!message.isUser"
-                  class="message-text"
-                  :nodes="renderMarkdown(message.content)"
-                ></rich-text>
-                <text v-else class="message-text">{{ message.content }}</text>
-              </view>
+              <!-- 使用 rich-text 渲染 Markdown 内容 -->
+              <rich-text v-if="!message.isUser" class="message-text"
+                :nodes="renderMarkdown(message.content)"></rich-text>
+              <text v-else class="message-text">{{ message.content }}</text>
             </view>
           </view>
-        </scroll-view>
-      </view>
+        </view>
+      </scroll-view>
     </view>
 
     <!-- 输入框区域 -->
     <view class="input-area">
       <view class="input-wrapper">
-        <input
-          type="text"
-          placeholder="请输入股票代码/名称，获取AI洞察"
-          placeholder-style="color:#fff;opacity:1"
-          class="input-field"
-          v-model="inputMessage"
-          @confirm="sendMessage"
-        />
+        <input type="text" placeholder="请输入股票代码/名称，获取AI洞察" placeholder-style="color:#fff;opacity:1" class="input-field"
+          v-model="inputMessage" @confirm="sendMessage" />
         <image class="send-button" @click="sendMessage" :disabled="isSending">
           <!-- <image
             src="https://d31zlh4on95l9h.cloudfront.net/images/95f1ea2262e9157db13c93c0dc1c5d96.svg"
@@ -203,16 +157,31 @@
           ></image> -->
         </image>
       </view>
-      <text class="disclaimer"
-        >以上数据由AI生成，不作为最终投资建议，决策需独立！</text
-      >
+      <text class="disclaimer">以上数据由AI生成，不作为最终投资建议，决策需独立！</text>
+    </view>
+
+    <image class="back-to-top" src="https://d31zlh4on95l9h.cloudfront.net/images/ba357635d2bb480241952bb1cabacd73.svg"
+      :style="{ transform: 'translate3d(' + backTopX + 'px,' + backTopY + 'px,0)' }" @touchstart="onBackTopTouchStart"
+      @touchmove="onBackTopTouchMove" @touchend="onBackTopTouchEnd" @click="onBackTopClick"></image>
+
+    <!-- 搜索历史侧拉框 -->
+    <view class="drawer-overlay" v-show="showHistoryDrawer" @click="closeHistoryDrawer"></view>
+    <view class="drawer-panel" v-show="showHistoryDrawer" @click.stop>
+      <view class="drawer-header">
+        <text class="drawer-title">搜索历史</text>
+        <text class="drawer-close" @click="closeHistoryDrawer">×</text>
+      </view>
+      <scroll-view scroll-y="true" class="drawer-content">
+        <view v-if="searchHistory.length === 0" class="empty-history">
+          <text>暂无搜索历史</text>
+        </view>
+        <view v-for="(item, idx) in searchHistory" :key="idx" class="history-card">
+          <text class="history-query">{{ item.query }}</text>
+          <text class="history-time">{{ formatTime(item.time) }}</text>
+        </view>
+      </scroll-view>
     </view>
 
-    <image
-      class="back-to-top"
-      src="https://d31zlh4on95l9h.cloudfront.net/images/ba357635d2bb480241952bb1cabacd73.svg"
-      @click="scrollToTop"
-    ></image>
     <footerBar class="static-footer" :type="type"></footerBar>
   </view>
 </template>
@@ -220,9 +189,10 @@
 <script setup>
 const { safeAreaInsets } = uni.getSystemInfoSync();
 
-import { ref, onMounted, nextTick, watch } from "vue";
-import footerBar from "../../components/footerBar-cn.vue";
+import { ref, computed, onMounted, onUnmounted, watch, nextTick } from "vue";
+import footerBar from '../../components/footerBar-cn'
 import marked from "marked"; // 引入 marked 库
+import { onPageScroll } from '@dcloudio/uni-app'
 // 设置 marked 选项
 marked.setOptions({
   renderer: new marked.Renderer(),
@@ -236,22 +206,21 @@ marked.setOptions({
   smartypants: false,
   xhtml: false,
 });
-
 // 创建一个用于渲染 Markdown 的函数
 const renderMarkdown = (content) => {
   if (!content) return "";
   return marked.parse(content);
 };
-
-const type = ref("member");
+const type = ref('member')
 const inputMessage = ref("");
 const showThinking = ref(true);
 const isSending = ref(false);
+const chatScrollTop = ref(0);
+const chatContainerHeight = ref(0);
 const uuid = ref("");
 const messages = ref([]);
-const scrollTop = ref(0); // 用于控制scroll-view的滚动位置
-// const dataInfo = ref("");
-
+const showHistoryDrawer = ref(false);
+const searchHistory = ref([]);
 const hotTopics = ref([
   {
     id: 1,
@@ -274,29 +243,35 @@ const hotTopics = ref([
     icon: "https://d31zlh4on95l9h.cloudfront.net/images/7ed58be0f4b81aeb398d9ba2534a624b.svg",
   },
 ]);
+// 统一 raf/caf（小程序端可能没有 rAF）
+// const hasRAF = typeof requestAnimationFrame === 'function';
+// const startFrame = (fn) => hasRAF ? requestAnimationFrame(fn) : setTimeout(fn, 16);
+// const stopFrame = (id) => hasRAF ? cancelAnimationFrame(id) : clearTimeout(id);
 
 // 初始化
 onMounted(() => {
+  const sys = uni.getSystemInfoSync();
+  const iconSize = uni.upx2px(100); // 和样式保持一致
+  const reserveBottom = uni.upx2px(260); // 预留底部输入区域空间
+  const initX = Math.max(0, sys.windowWidth - iconSize - uni.upx2px(30));
+  const initY = Math.max(0, Math.floor(sys.windowHeight * 0.65) - iconSize);
+  backTopTargetX.value = initX;
+  backTopTargetY.value = initY;
+  backTopX.value = initX;
+  backTopY.value = initY;
+
   initUUID();
-  // 如果有历史消息，滚动到底部
+  if (messages.value.length === 0) {
+    // nextTick(startTabsMarquee);
+  }
   if (messages.value.length > 0) {
-    setTimeout(() => {
-      scrollToBottom();
-    }, 200);
+    nextTick(() => { measureChatContainer(); scrollToBottom(); });
   }
-});
 
-// 监听消息变化，当有新消息时自动滚动到最新消息
-watch(
-  messages,
-  (newMessages) => {
-    // 延迟执行滚动，确保DOM更新完成
-    setTimeout(() => {
-      scrollToBottom();
-    }, 100);
-  },
-  { deep: true }
-);
+  // 载入历史
+  const hist = uni.getStorageSync("search_history") || [];
+  searchHistory.value = Array.isArray(hist) ? hist : [];
+});
 
 // 初始化 UUID
 const initUUID = () => {
@@ -317,6 +292,15 @@ const generateUUID = () => {
   });
 };
 
+// 计算聊天容器可视高度
+const measureChatContainer = () => {
+  const q = uni.createSelectorQuery();
+  q.select('.chat-container').boundingClientRect();
+  q.exec((res) => {
+    chatContainerHeight.value = res[0]?.height || 0;
+  });
+};
+
 // 新会话
 const newChat = () => {
   messages.value = [];
@@ -331,6 +315,22 @@ const goBlank = () => {
   });
 };
 
+// 历史抽屉控制
+const openHistoryDrawer = () => { showHistoryDrawer.value = true; };
+const closeHistoryDrawer = () => { showHistoryDrawer.value = false; };
+
+// 时间格式化：YYYY-MM-DD HH:mm
+const pad2 = (n) => (n < 10 ? '0' + n : '' + n);
+const formatTime = (t) => {
+  const d = new Date(t);
+  const y = d.getFullYear();
+  const m = pad2(d.getMonth() + 1);
+  const day = pad2(d.getDate());
+  const hh = pad2(d.getHours());
+  const mm = pad2(d.getMinutes());
+  return `${y}-${m}-${day} ${hh}:${mm}`;
+};
+
 // 发送消息
 const sendMessage = () => {
   if (inputMessage.value.trim() === "" || isSending.value) return;
@@ -345,40 +345,21 @@ const sendMessage = () => {
   messages.value.push(userMessage);
   inputMessage.value = "";
 
-  // 滚动到底部
-  setTimeout(() => {
-    scrollToBottom();
-  }, 100);
-
-  // 模拟机器人回复
-  simulateBotResponse(userMessage.content);
-};
-
-// 发送消息
-const sendMessageList = (listMessage) => {
-  console.log(listMessage);
-
-  const userMessage = {
-    content: listMessage,
-    isUser: true,
-    isThinking: false,
-    isTyping: false,
-  };
-
-  messages.value.push(userMessage);
-  inputMessage.value = "";
+  // 记录搜索历史
+  const entry = { query: userMessage.content, time: Date.now() };
+  searchHistory.value.unshift(entry);
+  uni.setStorageSync('search_history', searchHistory.value);
 
-  // 滚动到底部
-  setTimeout(() => {
-    scrollToBottom();
-  }, 100);
+  // 发送后强制恢复并滚到底部
+  shouldAutoScroll.value = true;
+  nextTick(() => { scrollToBottom(); });
 
   // 模拟机器人回复
   simulateBotResponse(userMessage.content);
 };
 
 // 模拟机器人回复
-const simulateBotResponse = async (userMessage) => {
+const simulateBotResponse =  async(userMessage) => {
   isSending.value = true;
 
   // 添加机器人加载消息
@@ -391,74 +372,183 @@ const simulateBotResponse = async (userMessage) => {
 
   messages.value.push(botMsg);
 
-  // 添加请求延迟
-  await new Promise((resolve) => setTimeout(resolve, 10000));
+
+    // 添加请求延迟
+  await new Promise((resolve) => setTimeout(resolve, 2000));
   const toDataInfo = await getDataInfo();
   console.log(toDataInfo);
   // dataInfo.value = toDataInfo.data;
   // console.log(dataInfo.value);
   messages.value[messages.value.length - 1].isThinking = false;
 
+
   // 滚动到底部
-  setTimeout(() => {
+  nextTick(() => {
     scrollToBottom();
-  }, 100);
+  });
 
   // 模拟流式响应
-  let responseText = `我已经收到您的消息: "${userMessage}" + "${toDataInfo.data}"`;
-
+  let responseText = `我已经收到您的消息: "${userMessage}"。+"${toDataInfo.data}"  `;
   let index = 0;
 
+  const botIndex = messages.value.length - 1;
+  const baseDelay = 5; // 普通字符基础延迟（毫秒）
+  const slowPunct = /[。！？!?；;]/;     // 句号、感叹号、分号等较长停顿
+  const midPunct = /[，、,:：]/;       // 逗号、顿号、冒号等中等停顿
+
   const typeWriter = () => {
     if (index < responseText.length) {
-      // 使用 Vue 的响应式更新机制
-      messages.value[messages.value.length - 1].content =
-        responseText.substring(0, index + 1);
+      const ch = responseText.charAt(index);
+      const current = messages.value[botIndex];
+      // 通过数组替换触发渲染，避免部分平台对子项属性变更不响应
+      messages.value.splice(
+        botIndex,
+        1,
+        { ...current, content: current.content + ch, isTyping: true }
+      );
       index++;
+      scrollToBottom();
 
-      // 滚动到底部，更频繁地触发滚动以适应文本增长
-      setTimeout(() => {
-        scrollToBottom();
-      }, 20);
-
-      setTimeout(typeWriter, 30);
+      const delay = slowPunct.test(ch) ? 220 : midPunct.test(ch) ? 120 : baseDelay;
+      setTimeout(typeWriter, delay);
     } else {
-      messages.value[messages.value.length - 1].isTyping = false;
+      const current = messages.value[botIndex];
+      messages.value.splice(
+        botIndex,
+        1,
+        { ...current, isTyping: false }
+      );
       isSending.value = false;
-      dataInfo.value = "";
-      // 最后确保滚动到底部
-      setTimeout(() => {
-        scrollToBottom();
-      }, 100);
+      nextTick(() => { scrollToBottom(); });
     }
   };
 
+  // 启动前稍作停顿，避免过快开始
   setTimeout(typeWriter, 500);
 };
 
-// 滚动到底部
+// 当消息出现或变化时，测量容器并滚到底部
+watch(messages, (arr) => {
+  if (arr.length > 0) {
+    nextTick(() => {
+      measureChatContainer();
+      scrollToBottom();
+    });
+  }
+});
+
+// 滚动到底部（仅聊天区域滚动）
 const scrollToBottom = () => {
-  // 使用scroll-view的scrollTop属性来控制滚动
+  if (!shouldAutoScroll.value) return;
   const query = uni.createSelectorQuery();
-  query.select("#messageList").boundingClientRect();
-
+  query.select('#messageList').boundingClientRect();
   query.exec((res) => {
     if (res[0]) {
-      // 设置scrollTop为消息列表的高度，实现滚动到底部
-      scrollTop.value = res[0].height;
+      latestContentHeight.value = res[0].height;
+      chatScrollTop.value = res[0].height; // scroll-view 会自动夹紧到最大位置
     }
   });
 };
-
 const scrollToTop = () => {
-  // 滚动到顶部
-  scrollTop.value = 0;
+  chatScrollTop.value = 0;
+};
+// 自动滚动控制：用户向上滚动时暂停自动滚到底部
+const shouldAutoScroll = ref(true);
+const latestContentHeight = ref(0);
+const lastScrollTop = ref(0);
+const windowHeight = uni.getSystemInfoSync().windowHeight;
+const AUTO_SCROLL_REENABLE_THRESHOLD = 40000; // px，接近底部时恢复自动滚动
+
+const onChatScroll = (e) => {
+  const st = e.detail?.scrollTop || 0;
+  const delta = st - lastScrollTop.value;
+  lastScrollTop.value = st;
+
+  if (delta < 0) {
+    shouldAutoScroll.value = false;
+    return;
+  }
+
+  const distanceToBottom = latestContentHeight.value - st - chatContainerHeight.value;
+  if (distanceToBottom <= AUTO_SCROLL_REENABLE_THRESHOLD) {
+    shouldAutoScroll.value = true;
+  }
+};
+
+// 回到顶部图标拖拽状态
+const backTopX = ref(0);
+const backTopY = ref(0);
+const backTopDragging = ref(false);
+const backTopDragOffset = ref({ x: 0, y: 0 });
+const backTopTargetX = ref(0);
+const backTopTargetY = ref(0);
+let backTopRAF = 0;
+const backTopSmoothing = 0.15; // 越大越跟手，越小越顺滑
+const backTopEpsilon = 0.5; // 收敛阈值
+const raf = typeof requestAnimationFrame === 'function' ? requestAnimationFrame : (fn) => setTimeout(fn, 16);
+const caf = typeof cancelAnimationFrame === 'function' ? cancelAnimationFrame : (id) => clearTimeout(id);
+
+function stepBackTop() {
+  const dx = backTopTargetX.value - backTopX.value;
+  const dy = backTopTargetY.value - backTopY.value;
+  // 插值缓动，避免每帧重排
+  backTopX.value += dx * backTopSmoothing;
+  backTopY.value += dy * backTopSmoothing;
+  if (Math.abs(dx) > backTopEpsilon || Math.abs(dy) > backTopEpsilon) {
+    backTopRAF = raf(stepBackTop);
+  } else {
+    backTopX.value = backTopTargetX.value;
+    backTopY.value = backTopTargetY.value;
+    backTopRAF = 0;
+  }
+}
+function ensureBackTopRAF() {
+  if (!backTopRAF) {
+    backTopRAF = raf(stepBackTop);
+  }
+}
+
+const clamp = (val, min, max) => Math.max(min, Math.min(val, max));
+
+const onBackTopTouchStart = (e) => {
+  const t = e.touches && e.touches[0];
+  if (!t) return;
+  backTopDragging.value = false;
+  backTopDragOffset.value = {
+    x: t.pageX - backTopX.value,
+    y: t.pageY - backTopY.value,
+  };
+};
+
+const onBackTopTouchMove = (e) => {
+  const t = e.touches && e.touches[0];
+  if (!t) return;
+  const sys = uni.getSystemInfoSync();
+  const iconSize = uni.upx2px(100);
+  const reserveBottom = uni.upx2px(260);
+  const nx = t.pageX - backTopDragOffset.value.x;
+  const ny = t.pageY - backTopDragOffset.value.y;
+  const clampedX = clamp(nx, 0, sys.windowWidth - iconSize);
+  const clampedY = clamp(ny, 0, sys.windowHeight - reserveBottom - iconSize);
+  if (Math.abs(clampedX - backTopX.value) + Math.abs(clampedY - backTopY.value) > 3) {
+    backTopDragging.value = true;
+  }
+  backTopTargetX.value = clampedX;
+  backTopTargetY.value = clampedY;
+  ensureBackTopRAF();
 };
 
-const toggleThinking = () => {
-  showThinking.value = !showThinking.value;
+const onBackTopTouchEnd = () => {
+  // 结束拖拽即可
 };
 
+const onBackTopClick = () => {
+  if (backTopDragging.value) return; // 拖拽时不触发点击回到顶部
+  scrollToTop();
+};
+
+
+
 function getDataInfo() {
   return new Promise((resolve, reject) => {
     uni.request({
@@ -480,44 +570,33 @@ function getDataInfo() {
     });
   });
 }
+
 </script>
 
 <style scoped>
 .deepMate-page {
   display: flex;
   flex-direction: column;
+  position: fixed;
+  /* 充满视口，彻底禁用页面滚动 */
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   height: 100vh;
-  max-height: 100vh; /* 限制最大高度 */
+  overflow: hidden;
+  /* 锁定页面滚动 */
   background-color: #ffffff;
-  padding: 0; /* 移除padding，避免影响布局 */
-  position: relative;
-  overflow: hidden; /* 禁止页面整体滚动 */
-  -webkit-overflow-scrolling: none; /* 禁用iOS弹性滚动 */
+  padding: 20rpx 0rpx;
 }
 
-/* 顶部导航栏 - 固定定位 */
 .header {
   display: flex;
   justify-content: space-between;
   align-items: center;
   padding: 20rpx 30rpx;
   background-color: #ffffff;
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 999;
-  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.1);
-}
-
-/* 顶部固定区域占位符 */
-.header-placeholder {
-  height: 120rpx; /* 与header高度一致 */
-}
-
-/* 顶部固定区域占位符 */
-.banner-placeholder {
-  height: 80rpx; /* 与header高度一致，防止内容被固定头部遮挡 */
+  box-shadow: 0 2rpx rgba(0, 0, 0, 0.1);
 }
 
 .header-left,
@@ -552,26 +631,38 @@ function getDataInfo() {
 }
 
 .main-content {
+  background-color: #fff;
   flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  /* 内部滚动交给聊天容器 */
   padding: 20rpx;
-  overflow-y: hidden; /* 禁止主内容区域滚动 */
-  margin-top: 20rpx;
-  margin-bottom: 250rpx; /* 为底部输入区域留出空间 */
-  max-height: calc(100vh - 200rpx); /* 确保内容区域不会超出视口 */
-  -webkit-overflow-scrolling: none; /* 禁用iOS弹性滚动 */
+  margin-top: 1rpx;
+  margin-bottom: 120rpx;
+}
+
+/* 聊天顶部粘性欢迎块样式 */
+.chat-header {
+  position: sticky;
+  top: 0;
+  /* 在页面滚动时始终贴顶 */
+  z-index: 50;
+  background-color: #ffffff;
+  padding: 3rpx 20rpx;
 }
 
 .robot-container {
   display: flex;
   align-items: center;
-  margin-bottom: 30rpx;
+  margin-top: 30rpx;
 }
 
 .robot-avatar {
   width: 130rpx;
   height: 130rpx;
   border-radius: 50%;
-  margin-right: 10rpx;
+  margin-left: 20rpx;
 }
 
 .welcome-message {
@@ -597,10 +688,17 @@ function getDataInfo() {
 }
 
 .function-tabs {
-  display: flex;
+  display: block;
+  overflow: hidden;
   margin-bottom: 30rpx;
 }
 
+.tabs-track {
+  display: inline-flex;
+  white-space: nowrap;
+  will-change: transform;
+}
+
 .tab-item {
   padding: 5rpx 20rpx;
   border-radius: 20rpx;
@@ -621,9 +719,13 @@ function getDataInfo() {
 .recommend-card {
   background: url("https://d31zlh4on95l9h.cloudfront.net/images/4da1d629a55c307c3605ca15bf15189a.svg");
   background-repeat: no-repeat;
+  background-position: center bottom;
+  background-size: contain;
+  /* min-height: 20rpx; */
   /* border-radius: 20rpx; */
   padding: 40rpx;
-  margin-bottom: 30rpx;
+  margin-top: 20rpx;
+  margin-bottom: 10rpx;
   /* box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); */
 }
 
@@ -631,6 +733,7 @@ function getDataInfo() {
   display: flex;
   align-items: center;
   justify-content: space-between;
+  margin-left: 40rpx;
 }
 
 .logo {
@@ -720,21 +823,16 @@ function getDataInfo() {
 .chat-container {
   margin-top: 30rpx;
   border-radius: 10rpx;
-  height: fit-content;
-  /* overflow-y: auto; */
-}
-
-.chat-scroll-view {
-  height: calc(80vh - 250rpx);
-  /* height: 80vh ;  */
-  /* flex: 1; */
-  /* height: fit-content; */
-  margin-top: 70rpx;
+  height: 65%;
+  /* 缩短滚动区域，避免被输入框覆盖 */
+  overflow-y: auto;
+  -webkit-overflow-scrolling: touch;
 }
 
 .message-list {
+  background-color: #fff;
+  margin-bottom: 400rpx;
   /* padding: 20rpx; */
-  /* margin-top: 200rpx; */
 }
 
 .message {
@@ -743,9 +841,9 @@ function getDataInfo() {
   margin-bottom: 30rpx;
 }
 
-.user-message {
+/* .user-message {
   flex-direction: row-reverse;
-}
+} */
 
 .message-icon {
   font-size: 24rpx;
@@ -761,12 +859,17 @@ function getDataInfo() {
 }
 
 .user-message .message-icon {
-  background-color: #007aff;
-  color: white;
+  background-color: transparent;
+  border-radius: 0;
+  /* padding: 0;
+  width: auto;
+  height: auto; */
+  color: #333;
 }
 
 .bot-message .message-icon {
-  background-color: #34c759;
+  background: url('https://d31zlh4on95l9h.cloudfront.net/images/61fa384381c88ad80be28f41827fe0e5.svg');
+
   color: white;
 }
 
@@ -828,11 +931,13 @@ function getDataInfo() {
 }
 
 @keyframes loading {
+
   0%,
   80%,
   100% {
     transform: scale(0);
   }
+
   40% {
     transform: scale(1);
   }
@@ -840,13 +945,12 @@ function getDataInfo() {
 
 .input-area {
   position: fixed;
+  margin-top: 20rpx;
   bottom: 70rpx;
   left: 0;
   right: 0;
   padding: 0 40rpx 80rpx 40rpx;
   background-color: #ffffff;
-  z-index: 999;
-  -webkit-overflow-scrolling: none; /* 禁用iOS弹性滚动 */
 }
 
 .input-wrapper {
@@ -887,6 +991,9 @@ function getDataInfo() {
   opacity: 1;
 }
 
+/* .uni-scroll-view{
+  height: 92%;
+} */
 .send-button {
   background: url("https://d31zlh4on95l9h.cloudfront.net/images/95f1ea2262e9157db13c93c0dc1c5d96.svg");
   background-repeat: no-repeat;
@@ -911,61 +1018,128 @@ function getDataInfo() {
   justify-content: center;
   margin-top: 15rpx;
 }
+
 .banner-panel {
   position: relative;
-  height: 480rpx; /* 拉长容器，灰色背景跟随变高 */
-  overflow: hidden; /* 让圆角和内部层剪裁一致 */
+  height: 480rpx;
+  /* 拉长容器，灰色背景跟随变高 */
+  overflow: hidden;
+  /* 让圆角和内部层剪裁一致 */
   border-radius: 15rpx;
 }
+
 .panelShow {
-  height: 150rpx;
-  position: fixed;
-  top: 70rpx;
-  z-index: 999;
-  width: 700rpx;
+  height: 12%;
 }
 
 .pray-banner {
   position: absolute;
   /* background-size: 100% 100%; */
-  inset: 0; /* 顶部、底部、左、右都贴合容器 */
+  inset: 0;
+  /* 顶部、底部、左、右都贴合容器 */
   width: 100%;
-  height: 88%;
+  height: 81%;
   border-radius: 15rpx;
-  z-index: 1; /* 在灰底之上、内容之下 */
+  z-index: 1;
+  /* 在灰底之上、内容之下 */
 }
 
+
 .contain {
   margin: 0 20rpx;
   gap: 5rpx;
 }
+
 .banner-panel .robot-container,
 .banner-panel .function-tabs,
 .banner-panel .recommend-card {
   position: relative;
   z-index: 2;
 }
+
 .back-to-top {
   position: fixed;
-  right: 30rpx;
-  bottom: 35%;
+  left: 0;
+  top: 0;
   width: 100rpx;
   height: 100rpx;
   z-index: 1000;
 }
+
 .back-to-top:active {
   transform: scale(0.96);
 }
+
 .static-footer {
   position: fixed;
   bottom: 0;
-  z-index: 999;
 }
-/* 顶部固定区域占位符 */
-.banner-placeholder {
-  height: 120rpx; /* 与header高度一致，防止内容被固定头部遮挡 */
+
+/* 搜索历史侧拉框样式 */
+.drawer-overlay {
+  position: fixed;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background-color: rgba(0, 0, 0, 0.35);
+  z-index: 900;
+}
+
+.drawer-panel {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  width: 600rpx;
+  max-width: 75%;
+  background: #ffffff;
+  box-shadow: -8rpx 0 20rpx rgba(0, 0, 0, 0.08);
+  z-index: 901;
+  display: flex;
+  flex-direction: column;
 }
 
+.drawer-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 24rpx 28rpx;
+  border-bottom: 2rpx solid #f0f0f0;
+}
+
+.drawer-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333333;
+}
+
+.drawer-close {
+  font-size: 42rpx;
+  color: #999999;
+}
+
+.drawer-content {
+  flex: 1;
+  padding: 20rpx 24rpx;
+}
+
+.history-card {
+  background-color: #fff;
+  border: 2rpx solid #f2f2f2;
+  border-left: 8rpx solid rgb(220, 31, 29);
+  border-radius: 12rpx;
+  padding: 18rpx 20rpx;
+  margin-bottom: 16rpx;
+  box-shadow: 0 4rpx 10rpx rgba(0, 0, 0, 0.03);
+}
+
+.history-query {
+  font-size: 28rpx;
+  color: #333333;
+  font-weight: 500; }
+.history-time { margin-top: 8rpx; font-size: 22rpx; color: #888888; }
+.empty-history { padding: 40rpx; color: #999999; text-align: center; }
 .thinking-process {
   margin: 20rpx 0;
   border: 2rpx solid #e5e5e5;
@@ -1037,4 +1211,4 @@ function getDataInfo() {
   font-size: 24rpx;
   color: #333;
 }
-</style>
+</style>
\ No newline at end of file