优化该bug，k线图和语音问题还没改

src/store/chat.js

@@ -1,11 +1,19 @@
 import { defineStore } from 'pinia';
-
+import { getUserCountAPI } from '@/api/AIxiaocaishen'
 export const useChatStore = defineStore('chat', {
   state: () => ({
     messages: [],
-    isLoading: false // 新增加载状态
+    isLoading: false, // 新增加载状态
+    UserCount: 0,
+    chartData: [],
   }),
   actions: {
+    async getUserCount() {
+      const result = await getUserCountAPI({
+        token: localStorage.getItem('localToken')
+      })
+      this.UserCount = result.data.hasCount
+    },
     setLoading(status) {
       this.isLoading = status
     },
@@ -14,6 +22,9 @@ export const useChatStore = defineStore('chat', {
     },
     isLoadingF() {
       this.isLoading = false;
+    },
+    addKLineData(data) {
+      this.kLineData.push(data);
     }
   },
   persist: {
@@ -21,7 +32,8 @@ export const useChatStore = defineStore('chat', {
     strategies: [
       {
         key: 'chat_messages',
-        storage: localStorage
+        storage: localStorage,
+        paths: ['messages', 'kLineData']
       }
     ]
   }

src/views/AIchat.vue

@@ -10,7 +10,8 @@ import { marked } from 'marked'; // 引入marked库
 import katex from 'katex'; // 引入 KaTeX 库
 import { htmlToText } from 'html-to-text';
 import { Howl, Howler } from 'howler';
-import KLine from './Echarts/KLine.vue'
+import KLine from './Echarts/KLine.vue';
+import * as echarts from 'echarts'
 const chatStore = useChatStore()
 const audioStore = useAudioStore()
 const dataStore = useDataStore()
@@ -179,127 +180,152 @@ watch(
 
         const AIcontent = ref("");
         // 处理不同的 answer 字段
-        if (ans.value.answerG !== "") {
-          AIcontent.value = ans.value.answerG;
-          const code = ans.value.code;
-          const market = ans.value.market;
-          const data = JSON.parse(ans.value.duobaoData);
-
-          console.log(data, "data");
-          const Kline20 = {
-            name: data.data.HomePage.StockInformation.Name,
-            Kline: data.data.AIBull.KLine20
-          }
-          dataStore.setKlineData(Kline20);
+        const status = JSON.parse(ans.value.resp);
+        console.log(status, "status")
+        if (status.code == 200) {
+          if (ans.value.answerG !== "") {
+            AIcontent.value = ans.value.answerG;
+            const code = ans.value.code;
+            const market = ans.value.market;
+            const data = JSON.parse(ans.value.duobaoData);
+
+            console.log(data, "data");
+
+            const Kline20 = {
+              name: data.data.HomePage.StockInformation.Name,
+              Kline: data.data.AIBull.KLine20
+            }
 
-          chatStore.messages.pop();
+            dataStore.setKlineData(Kline20);
 
-          chatStore.messages.push({
-            sender: "ai",
-            type: "kline",
-          });
+            // chatStore.chartData.push({
+            //   data: Kline20.Kline
+            // });
+            // for (let i = 0; i < chatStore.chartData.length; i++) {
+            //   console.log(chatStore.chartData[i], "chatStore.chartData[i]")
+            // }
 
-          chatStore.messages.push({
-            sender: "ai",
-            content: "AI正在思考中..."
-          });
+            chatStore.messages.pop();
 
-          console.log(Kline20, "Kline20");
+            chatStore.messages.push({
+              sender: "ai",
+              type: "kline",
+              chartRef: Kline20.name, // 唯一标识符
+              chartData: Kline20.Kline, // 图表数据
+            });
 
-          console.log(code, "code");
-          console.log(market, "market");
-          console.log(data, "data");
 
-        } else if (ans.value.answerN !== "") {
-          AIcontent.value = ans.value.answerN;
-        } else if (ans.value.answerO !== "") {
-          AIcontent.value = ans.value.answerO;
-        }
+            chatStore.messages.push({
+              sender: "ai",
+              content: "AI正在思考中..."
+            });
 
-        // // 使用marked库将Markdown转换为HTML
-        // AIcontent.value = marked(AIcontent.value,);
-        // // 使用 KaTeX 渲染数学公式
-        // const katexRegex = /\$\$(.*?)\$\$/g;
-        // AIcontent.value = AIcontent.value.replace(katexRegex, (match, formula) => {
-        //   try {
-        //     return katex.renderToString(formula, { throwOnError: false });
-        //   } catch (error) {
-        //     console.error('KaTeX 渲染错误:', error);
-        //     return match;
-        //   }
-        // });
-
-        // chatStore.messages.push({
-        //   sender: "ai",
-        //   content: AIcontent.value
-        // })
-
-        // 修改后的消息处理逻辑
-        const processedContent = marked(AIcontent.value);
-        const katexRegex = /\$\$(.*?)\$\$/g;
-        const plainTextContent = htmlToText(processedContent);
-
-        // 获取音频数据
-        const TTSResult = (await TTSAPI({
-          language: "cn",
-          content: plainTextContent
-        })).json()
+            console.log(Kline20, "Kline20");
 
-        const tts = ref();
-        await TTSResult.then((res) => {
-          tts.value = JSON.parse(res.data);
-        })
+            console.log(code, "code");
+            console.log(market, "market");
+            console.log(data, "data");
 
-        const ttsUrl = ref();
-        if (tts.value.tts_cn !== null) {
-          ttsUrl.value = tts.value.tts_cn.url;
-        } else if (tts.value.tts_en !== null) {
-          ttsUrl.value = tts.value.tts_en.url;
-        }
+          } else if (ans.value.answerN !== "") {
+            AIcontent.value = ans.value.answerN;
+          } else if (ans.value.answerO !== "") {
+            AIcontent.value = ans.value.answerO;
+          }
+
+          // // 使用marked库将Markdown转换为HTML
+          // AIcontent.value = marked(AIcontent.value,);
+          // // 使用 KaTeX 渲染数学公式
+          // const katexRegex = /\$\$(.*?)\$\$/g;
+          // AIcontent.value = AIcontent.value.replace(katexRegex, (match, formula) => {
+          //   try {
+          //     return katex.renderToString(formula, { throwOnError: false });
+          //   } catch (error) {
+          //     console.error('KaTeX 渲染错误:', error);
+          //     return match;
+          //   }
+          // });
+
+          // chatStore.messages.push({
+          //   sender: "ai",
+          //   content: AIcontent.value
+          // })
+
+          // 修改后的消息处理逻辑
+          const processedContent = marked(AIcontent.value);
+          const katexRegex = /\$\$(.*?)\$\$/g;
+          const plainTextContent = htmlToText(processedContent);
+
+          // 获取音频数据
+          const TTSResult = (await TTSAPI({
+            language: "cn",
+            content: plainTextContent
+          })).json()
+
+          const tts = ref();
+          await TTSResult.then((res) => {
+            tts.value = JSON.parse(res.data);
+          })
+
+          const ttsUrl = ref();
+          if (tts.value.tts_cn !== null) {
+            ttsUrl.value = tts.value.tts_cn.url;
+          } else if (tts.value.tts_en !== null) {
+            ttsUrl.value = tts.value.tts_en.url;
+          }
 
-        if (ttsUrl.value) {
-          nextTick(() => {
-            if (audioStore.isVoiceEnabled) {
-              console.log("ttsUrl.value", ttsUrl.value)
-              // 播放音频
-              playAudio(ttsUrl.value)
+          if (ttsUrl.value) {
+            nextTick(() => {
+              if (audioStore.isVoiceEnabled) {
+                console.log("ttsUrl.value", ttsUrl.value)
+                // 播放音频
+                playAudio(ttsUrl.value)
+              }
+            });
+          }
+
+          chatStore.messages.pop();
+          // 先推送初始消息
+          const aiMessage = reactive({
+            sender: "ai",
+            content: "",
+            isTyping: true,
+          });
+          chatStore.messages.push(aiMessage);
+
+          let index = 0;
+          const typingInterval = setInterval(() => {
+            if (index < processedContent.length) {
+              aiMessage.content += processedContent.charAt(index);
+              index++;
+
+            } else {
+              clearInterval(typingInterval);
+              aiMessage.isTyping = false;
+
+              // 延迟处理KaTeX确保DOM已更新
+              nextTick(() => {
+                aiMessage.content = aiMessage.content.replace(katexRegex, (match, formula) => {
+                  try {
+                    return katex.renderToString(formula, { throwOnError: false });
+                  } catch (error) {
+                    console.error('KaTeX 渲染错误:', error);
+                    return match;
+                  }
+                });
+                chatStore.setLoading(false);
+              });
             }
+          }, 50); // 调整速度为50ms/字符
+        } else {
+          chatStore.messages.pop();
+          chatStore.messages.push({
+            sender: "ai",
+            content: status.msg
           });
+          chatStore.setLoading(false);
         }
 
-        chatStore.messages.pop();
-        // 先推送初始消息
-        const aiMessage = reactive({
-          sender: "ai",
-          content: "",
-          isTyping: true,
-        });
-        chatStore.messages.push(aiMessage);
-
-        let index = 0;
-        const typingInterval = setInterval(() => {
-          if (index < processedContent.length) {
-            aiMessage.content += processedContent.charAt(index);
-            index++;
-
-          } else {
-            clearInterval(typingInterval);
-            aiMessage.isTyping = false;
 
-            // 延迟处理KaTeX确保DOM已更新
-            nextTick(() => {
-              aiMessage.content = aiMessage.content.replace(katexRegex, (match, formula) => {
-                try {
-                  return katex.renderToString(formula, { throwOnError: false });
-                } catch (error) {
-                  console.error('KaTeX 渲染错误:', error);
-                  return match;
-                }
-              });
-              chatStore.setLoading(false);
-            });
-          }
-        }, 50); // 调整速度为50ms/字符
       }
       catch (e) {
         console.error('请求失败:', e);
@@ -309,14 +335,38 @@ watch(
         });
         chatStore.setLoading(false);
       }
+      finally {
+        await chatStore.getUserCount();
+      }
     }
   },
   { deep: true }
 );
 
+// var kLineCharts = document.getElementsByClassName("kLineChart");
+// for (var i = 0; i < kLineCharts.length; i++) {
+//   (function (i) {
+//     const data = datatok.Kline
+//     // 切割数据方法
+//     const spliteDate = (a) => {
+//       const categoryData = []
+//       let value = []
+//       for (let i = 0; i < a.length; i++) {
+//         categoryData.push(a[i][0])
+//         value.push([a[i][1], a[i][2], a[i][3], a[i][4]])
+//       }
+//       return { categoryData, value }
+//     }
+//     const dealData = spliteDate(data)
+//     var myChart = echarts.init(kLineCharts[i]);
+
+//   })
+// }
+
+
 // 初始化随机GIF
 onMounted(() => {
-  const random = Math.floor(Math.random() * 4) + 1;
+  const random = Math.floor(Math.random() * 6) + 1;
   currentGif.value = `src/assets/img/AIchat/AIgif${random}.gif`;
 
   getQuestionsList();
@@ -362,6 +412,8 @@ onMounted(() => {
     <div v-for="(msg, index) in chatMsg" :key="index" :class="['message-bubble', msg.sender]">
       <div v-if="msg.type === 'kline'" class="kline-container">
         <KLine />
+        <!-- <KLine :key="msg.timestamp" /> -->
+        <!-- <div class="kLineChart"></div> -->
       </div>
       <div v-else v-html="msg.content"></div>
     </div>
@@ -377,6 +429,7 @@ onMounted(() => {
 .chat-container {
   display: flex;
   flex-direction: column;
+  overflow-x: hidden;
 }
 
 .gif-area {
@@ -445,20 +498,34 @@ onMounted(() => {
 }
 
 .top {
-  animation: marquee 15s linear infinite;
+  animation: marquee 25s linear infinite;
 }
 
 .bottom {
   animation: marquee 15s linear infinite reverse;
 }
 
+/* 添加PC端专用速度 */
+@media (min-width: 768px) {
+  .top {
+    animation-duration: 35s;
+    /* PC端改为35秒 */
+  }
+
+  .bottom {
+    animation-duration: 35s;
+    /* PC端改为35秒 */
+  }
+
+}
+
 @keyframes marquee {
   0% {
     transform: translateX(100%);
   }
 
   100% {
-    transform: translateX(-150%);
+    transform: translateX(-250%);
   }
 }
 

src/views/Echarts/KLine.vue

@@ -46,7 +46,7 @@ function KlineCanvsEcharts(datatok) {
 		let value = []
 		for (let i = 0; i < a.length; i++) {
 			categoryData.push(a[i][0])
-			value.push([a[i][1],a[i][2],a[i][3],a[i][4]])
+			value.push([a[i][1], a[i][2], a[i][3], a[i][4]])
 		}
 		return { categoryData, value }
 	}
@@ -58,7 +58,7 @@ function KlineCanvsEcharts(datatok) {
 			// Canvs的间隔大小
 			text: datatok.name,
 			top: 20,
-            left: 20
+			left: 20
 		},
 		tooltip: {
 			trigger: 'axis', // 触发类型 坐标轴触发
@@ -206,6 +206,7 @@ function KlineCanvsEcharts(datatok) {
 onMounted(() => {
 	// fnGetData()
 })
+
 </script>
 
 <style scoped>

src/views/homePage.vue

@@ -39,6 +39,7 @@ const tabs = computed(() => [
 
 // 修改 setActiveTab 方法，添加一个可选参数 forceAIchat
 const setActiveTab = (tab, index, forceAIchat = false) => {
+  isScrolling.value = false;  //回复滚动到底部方法
   isAnnouncementVisible.value = false;
   if (forceAIchat && activeTab.value !== "AIchat") {
     activeTab.value = "AIchat";
@@ -51,6 +52,7 @@ const setActiveTab = (tab, index, forceAIchat = false) => {
     sessionStorage.setItem("activeTabAI", tab);
     sessionStorage.setItem("activeIndexAI", index.toString());
   }
+  console.log(tab, index, "tab, index");
   setHeight(document.getElementById("testId")); // 给父组件发送窗口高度
 };
 
@@ -68,12 +70,13 @@ const ensureAIchat = () => {
 };
 
 // 获取次数
-const UserCount = ref(0);
-const getUserCount = async () => {
-  const result = await getUserCountAPI({ token: localStorage.getItem('localToken') });
-  UserCount.value = result.data.hasCount;
+// const UserCount = ref(0);
+// const getUserCount = async () => {
+//   const result = await getUserCountAPI({ token: localStorage.getItem('localToken') });
+//   UserCount.value = result.data.hasCount;
+// };
+const UserCount = computed(() => chatStore.UserCount)
 
-};
 
 const getCount = () => {
   console.log('点击了获取次数的按钮')
@@ -98,6 +101,7 @@ const updateMessage = (title) => {
   // console.log("updateMessage 的值:", title);
 };
 const sendMessage = async () => {
+  isScrolling.value = false;
   // 调用 ensureAIchat 确保跳转到 AIchat 页面
   ensureAIchat();
 
@@ -132,8 +136,10 @@ const isAnnouncementVisible = ref(false);
 
 const showAnnouncement = () => {
   console.log("打开公告");
+  isScrolling.value = false;  //回复滚动到底部方法
+  setActiveTab('', -1); // 清空当前选中状态
+
   isAnnouncementVisible.value = true; // 显示公告页面
-  activeTab.value = 'Announcement`'
 };
 
 // 点击剩余次数会弹出的弹窗
@@ -147,48 +153,39 @@ const showCount = () => {
   console.log("dialogVisible 的值:", dialogVisible.value); // 添加日志确认
 };
 
-
 // 保证发送消息时，滚动屏在底部
 const chatStore = useChatStore()
 const tabContent = ref(null);
 const isScrolling = ref(false);  //判断用户是否在滚动
 
 const smoothScrollToBottom = async () => {
-  await nextTick();
+  console.log('调用滚动到底部的方法')
+  // await nextTick();
   const container = tabContent.value;
+  console.log(container, 'container')
+  console.log(isScrolling.value, 'isScrolling.value')
   if (!container) return;
-  if (!isScrolling.value)
-    container.scrollTop = container.scrollHeight - container.offsetHeight;
 
-  requestAnimationFrame(() => {
+  await nextTick(); // 确保在DOM更新后执行
+
+  if (!isScrolling.value) {
     container.scrollTop = container.scrollHeight - container.offsetHeight;
-  });
+    // container.scrollTop = container.scrollHeight;
+    // container.scrollTop = container.offsetHeight;
+    // container.scrollTop = container.scrollHeight + container.offsetHeight;
+    console.log(container.scrollHeight, container.offsetHeight,container.scrollHeight-container.offsetHeight, container.scrollTop, "总长度", "可视长度", "位置")
+  }
 
 }
 
 const throttledSmoothScrollToBottom = _.throttle(smoothScrollToBottom, 500, { trailing: false });
 
-const handleScroll = function () {
-  const scrollContainer = tabContent.value
-  const scrollTop = scrollContainer.scrollTop
-  const scrollHeight = scrollContainer.scrollHeight
-  const offsetHeight = scrollContainer.offsetHeight
-  // console.log(scrollTop, scrollHeight, offsetHeight, "scrollTop, scrollHeight, offsetHeight");
-  if (scrollTop + offsetHeight < scrollHeight) {
-    // 用户开始滚动并在最底部之上，取消保持在最底部的效果
-    isScrolling.value = true
-  } else {
-    // 用户停止滚动并滚动到最底部，开启保持到最底部的效果
-    isScrolling.value = false
-  }
-  // console.log(isScrolling.value)
-
-}
-
 watch(
   () => chatStore.messages,
   () => {
+    console.log('messages变化了')
     throttledSmoothScrollToBottom();
+    // setTimeout(throttledSmoothScrollToBottom, 100);
   },
   { deep: true, immediate: true }
 );
@@ -196,9 +193,15 @@ watch(
 
 watch(
   activeTab,
-  async (newVal) => {
+  async () => {
+    console.log('activeTab变化了', activeTab.value)
+    isScrolling.value = false;  //回复滚动到底部方法
+    await nextTick(); // 等待DOM更新
     throttledSmoothScrollToBottom();
-  });
+    // setTimeout(throttledSmoothScrollToBottom, 100);
+  },
+  { deep: true, immediate: true }
+);
 
 
 // 在setTimeout中延迟执行
@@ -234,12 +237,60 @@ const fnGetToken = () => {
   useAppBridge().packageFun('JWwebReady', () => { }, 5, {})
 }
 
+// const tabContainer = tabContent.value
+// let befortop = 0
+// tabContainer.addEventListener('scroll', () => {
+//   const aftertop = tabContainer.scrollTop
+//   if (aftertop - befortop > 0) {
+//     console.log('向下滚动')
+//     isScrolling.value = true
+//   } else {
+//     console.log('向上滚动')
+//     isScrolling.value = false
+//   }
+//   befortop = aftertop
+// })
+
+const heightListener = () => {
+  const tabContainer = tabContent.value;
+  let befortop = 0;
+
+  const scrollHandler = () => {
+    const aftertop = tabContainer.scrollTop;
+
+    // 新增底部判断逻辑
+    const isBottom = aftertop + tabContainer.offsetHeight + 50 >= tabContainer.scrollHeight;
+
+    if (activeTab.value === 'AIchat') {
+      if (aftertop - befortop > 0) {
+        console.log('向下滚动');
+        isScrolling.value = true;
+      } else {
+        console.log('向上滚动');
+        isScrolling.value = true;
+      }
+
+      // 添加底部状态检测
+      if (isBottom) {
+        console.log('滚动到底部');
+        isScrolling.value = false;
+      }
+    }
+    befortop = aftertop;
+  };
+
+  console.log(isScrolling.value, 'isScrolling.value')
+
+  tabContainer.addEventListener('scroll', scrollHandler);
+};
+
+const throttledHeightListener = _.throttle(heightListener, 500, { trailing: false });
+
 onMounted(async () => {
   setHeight(document.getElementById("testId")); // 给父组件发送窗口高度
-  getUserCount();
+  await chatStore.getUserCount();
   throttledSmoothScrollToBottom();
-  // 监听滚动事件，判断用户滚动状态
-  tabContent.value.addEventListener('scroll', handleScroll)
+  throttledHeightListener();
 
 })
 </script>
@@ -270,7 +321,7 @@ onMounted(async () => {
           <section class="tab-section">
             <div class="tab-container">
               <div v-for="(tab, index) in tabs" :key="tab.name" @click="setActiveTab(tab.name, index)"
-                :class="['tab-item', { active: activeIndex === index }]">
+                :class="['tab-item', { active: activeIndex === index && !isAnnouncementVisible }]">
                 <span>{{ tab.label }}</span>
               </div>
             </div>
@@ -398,6 +449,7 @@ onMounted(async () => {
   background-repeat: no-repeat;
   background-position: center;
   display: flex;
+  overflow: auto;
 }
 
 .homepage .el-container {
@@ -405,7 +457,7 @@ onMounted(async () => {
   flex-direction: column;
   /* 明确纵向排列 */
   display: flex;
-  overflow: hidden;
+  overflow: auto;
 }
 
 .el-container .el-header {
@@ -469,11 +521,19 @@ onMounted(async () => {
 
 .homepage-right-group .announcement-btn {
   cursor: pointer;
-  transition: transform 0.2s;
+  transition: transform 0.3s;
 }
 
+/* @keyframes tilt {
+  0% { transform: rotate(0deg); }
+  50% { transform: rotate(10deg); }
+  100% { transform: rotate(-10deg); }
+  130% { transform: rotate(0deg); }
+} */
+
 .homepage-right-group .announcement-btn:hover {
-  transform: scale(1.05);
+  transform: scale(1.3);
+  /* animation: tilt 1s ease-in-out; */
 }
 
 .homepage-body {