From 3c8a5ddaf279b01efd8bd7dbfe10ad747da1fcf3 Mon Sep 17 00:00:00 2001
From: no99 <17663930442@163.com>
Date: Wed, 24 Sep 2025 14:45:10 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=9B=E9=80=A0=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/index.js    |    8 +-
 src/store/chat.js      |    5 +
 src/views/deepNine.vue | 5382 ++++++++++++++++++++++++++++++++++++++++++++++++
 src/views/homePage.vue |  114 +-
 4 files changed, 5484 insertions(+), 25 deletions(-)
 create mode 100644 src/views/deepNine.vue

diff --git a/src/router/index.js b/src/router/index.js
index a659f12..80dbeb3 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -75,7 +75,13 @@ const routes = [
         name: 'goldenWheel',
         component: () => import('@/views/wealth/goldenWheel.vue')
 
-    }
+    },
+    // 深度九大模型
+    {
+        path: '/deepNine',
+        name: 'deepNine',
+        component: () => import('@/views/deepNine.vue'),
+    }   
 
 ]
 // 创建路由实例
diff --git a/src/store/chat.js b/src/store/chat.js
index 8d7c63b..530b349 100644
--- a/src/store/chat.js
+++ b/src/store/chat.js
@@ -12,10 +12,15 @@ export const useChatStore = defineStore("chat", {
     currentUserIndex: null,
     inputUserIndex:null,
     announcementMsg: null,
+    // 调用接口状态
     aiChatCall:false,
     aiEmotionCall:false,
+    deepNineCall:false,
+    // 输入框控制
     chatInput:false,
     emotionInput:false,
+    deepNineInput:false,
+
     firstAPICall:false,
     dbqbScrollToTop:true,
   }),
diff --git a/src/views/deepNine.vue b/src/views/deepNine.vue
new file mode 100644
index 0000000..9b8c326
--- /dev/null
+++ b/src/views/deepNine.vue
@@ -0,0 +1,5382 @@
+<script setup>
+import { ref, onMounted, watch, nextTick, reactive, onUnmounted } from "vue";
+import { ElDialog, ElMessage } from "element-plus";
+import {
+  getReplyStreamAPI,
+  getReplyAPI,
+  TTSAPI,
+  qsArpAamClickAPI,
+  dbqbFirstAPI,
+  dbqbSecondOneAPI,
+  dbqbSecondTwoAPI,
+  dbqbSecondThreeAPI,
+  dbqbSecondFourAPI,
+  dataListAPI,
+} from "../api/AIxiaocaishen";
+import { useUserStore } from "../store/userPessionCode";
+import { useChatStore } from "../store/chat";
+import { useAudioStore } from "../store/audio";
+import { useDataStore } from "@/store/dataList.js";
+import { marked } from "marked"; // 引入marked库
+// 导入思考过程GIF
+import thinkingGif from "@/assets/img/gif/思考.gif";
+import analyzeGif from "@/assets/img/gif/解析.gif";
+import generateGif from "@/assets/img/gif/生成.gif";
+import katex from "katex"; // 引入 KaTeX 库
+import { htmlToText } from "html-to-text";
+import { Howl, Howler } from "howler";
+import * as echarts from "echarts";
+import _, { add } from "lodash";
+import moment from "moment";
+import title1 from "@/assets/img/AIchat/核心价值评估.png";
+import title2 from "@/assets/img/AIchat/主力作战.png";
+import title3 from "@/assets/img/AIchat/攻防三维.png";
+import title4 from "@/assets/img/AIchat/综合作战.png";
+import logo1 from "@/assets/img/AIchat/夺宝奇兵logo.png";
+import logo2 from "@/assets/img/AIchat/开启无限财富.png";
+import getCountAll from "../assets/img/homePage/get-count-all.png";
+import voice from "../assets/img/homePage/tail/voice.png";
+import voiceNoActive from "../assets/img/homePage/tail/voice-no-active.png";
+const chatStore = useChatStore();
+const audioStore = useAudioStore();
+const dataStore = useDataStore();
+
+// 将这些变量移到全局作用域
+const audioQueue = ref([]);
+const isPlayingAudio = ref(false);
+let currentPlayIndex = 0;
+let isCallingPlayNext = false;
+
+// 音频预加载状态
+const audioPreloadStatus = {
+  one: { loaded: false, url: null },
+  two: { loaded: false, url: null },
+  three: { loaded: false, url: null },
+  four: { loaded: false, url: null },
+};
+
+// 音频队列顺序管理
+const audioQueueOrder = {
+  "API1-第一个": 1,
+  "API2-第二个": 2,
+  "API3-第三个": 3,
+  "API4-第四个": 4,
+};
+
+// 播放下一个音频的函数
+const playNextAudio = () => {
+  if (isCallingPlayNext) {
+    console.log("playNextAudio已在执行中，跳过重复调用");
+    return;
+  }
+
+  if (currentPlayIndex >= audioQueue.value.length) {
+    console.log(
+      "所有音频播放完成，重置到第一个音频 currentPlayIndex",
+      currentPlayIndex
+    );
+    // 播放完成后重置到第一个音频，但不自动播放
+    currentPlayIndex = 0;
+    audioStore.isPlaying = false;
+    audioStore.isPaused = false;
+    audioStore.playbackPosition = 0;
+    // 清除音频实例，确保下次点击从头开始
+    audioStore.soundInstance = null;
+    audioStore.nowSound = null;
+    if (audioQueue.value.length > 0) {
+      audioStore.setCurrentAudioUrl(audioQueue.value[0]);
+    }
+    return;
+  }
+  // if (currentPlayIndex >= audioQueue.value.length) {
+  //   console.log("所有音频播放完成");
+  //   isPlayingAudio.value = false;
+  //   return;
+  // }
+
+  isCallingPlayNext = true;
+  const audioInfo = audioQueue.value[currentPlayIndex];
+
+  if (!audioInfo || !audioInfo.url) {
+    console.warn(`音频信息无效，跳过索引 ${currentPlayIndex}`);
+    currentPlayIndex++;
+    isCallingPlayNext = false;
+    playNextAudio();
+    return;
+  }
+
+  console.log(`开始播放 ${audioInfo.name}，索引: ${currentPlayIndex}`);
+
+  const audio = new Howl({
+    src: [audioInfo.url],
+    html5: false,
+    format: ["mp3", "acc"],
+    // rate: 2,
+    retryCount: 0,
+    onplay: () => {
+      audioStore.isPlaying = true;
+      isPlayingAudio.value = true;
+      isCallingPlayNext = false;
+      console.log(`${audioInfo.name}音频开始播放111`);
+    },
+    onpause: () => {
+      audioStore.isPlaying = false;
+      audioStore.isPaused = true;
+      audioStore.playbackPosition = audio.seek() || 0;
+      console.log(`${audioInfo.name}音频已暂停`);
+    },
+    onresume: () => {
+      audioStore.isPlaying = true;
+      audioStore.isPaused = false;
+      console.log(`${audioInfo.name}音频继续播放`);
+    },
+    onend: () => {
+      console.log(`${audioInfo.name}音频播放完成，准备播放下一个`);
+      audioStore.isPlaying = false;
+      audioStore.isPaused = false;
+      audioStore.playbackPosition = 0;
+      isPlayingAudio.value = false;
+
+      currentPlayIndex++;
+
+      console.log(
+        "currentPlayIndex",
+        currentPlayIndex,
+        "audioQueue.value.length",
+        audioQueue.value.length
+      );
+      if (currentPlayIndex < audioQueue.value.length) {
+        console.log(
+          `队列中还有音频，500ms后播放下一个 (索引:${currentPlayIndex})`
+        );
+        setTimeout(() => {
+          isCallingPlayNext = false;
+          playNextAudio();
+        }, 200);
+      } else {
+        console.log("🎉 所有音频播放完成，清除音频实例");
+        chatStore.messages[chatStore.currentUserIndex].audioStatus = false;
+        audioStore.nowSound = null;
+        audioStore.soundInstance = null;
+        // currentPlayIndex = 0;
+        isCallingPlayNext = false;
+
+        // setTimeout(() => {
+        //   isCallingPlayNext = false;
+        //   playNextAudio();
+        // }, 500); // 间隔500ms播放下一个
+      }
+    },
+    onstop: () => {
+      console.log(`${audioInfo.name}音频被停止`);
+      audioStore.isPlaying = false;
+      audioStore.isPaused = false;
+      audioStore.playbackPosition = 0;
+    },
+    onloaderror: (id, err) => {
+      console.error(`${audioInfo.name}音频播放失败:`, err);
+      isPlayingAudio.value = false;
+      isCallingPlayNext = false;
+      setTimeout(() => {
+        playNextAudio();
+      }, 100);
+    },
+  });
+
+  audioStore.setCurrentAudioUrl(audioInfo.url);
+  audioStore.nowSound = audio;
+  audioStore.setAudioInstance(audio);
+
+  console.log(`尝试播放${audioInfo.name}音频`);
+  audio.play();
+};
+
+// 添加音频到播放队列（确保顺序）
+const addToAudioQueue = (url, name) => {
+  console.log(`=== 添加音频到队列 ===`);
+  console.log("URL:", url);
+  console.log("Name:", name);
+  console.log("音频启用状态:", audioStore.isVoiceEnabled);
+
+  if (url && audioStore.isVoiceEnabled) {
+    const audioItem = {
+      url,
+      name,
+      order: audioQueueOrder[name] || 999,
+    };
+    audioQueue.value.push(audioItem);
+
+    // 按顺序排序队列
+    audioQueue.value.sort((a, b) => a.order - b.order);
+
+    console.log(`音频${name}已添加到播放队列，顺序:${audioItem.order}`);
+    console.log(
+      "当前队列顺序:",
+      audioQueue.value.map((item) => `${item.name}(${item.order})`)
+    );
+    // 只有在确实没有音频在播放且这是第一个音频时才开始播放
+    if (
+      !isPlayingAudio.value &&
+      !audioStore.isPlaying &&
+      audioQueue.value.length === 1
+    ) {
+      console.log("✅ 条件满足：没有音频在播放且这是第一个音频，立即开始播放", {
+        isPlayingAudio: isPlayingAudio.value,
+        audioStoreIsPlaying: audioStore.isPlaying,
+        queueLength: audioQueue.value.length,
+      });
+      playNextAudio();
+    } else {
+      console.log("⏳ 等待条件：", {
+        isPlayingAudio: isPlayingAudio.value,
+        audioStoreIsPlaying: audioStore.isPlaying,
+        queueLength: audioQueue.value.length,
+        reason:
+          audioQueue.value.length > 1 ? "队列中已有其他音频" : "有音频正在播放",
+      });
+    }
+  } else {
+    console.log("❌ 跳过添加音频：", {
+      hasUrl: !!url,
+      voiceEnabled: audioStore.isVoiceEnabled,
+    });
+  }
+  console.log(`=== 添加音频完成 ===`);
+};
+
+// 语音播放控制函数
+const toggleVoiceForUser = (index) => {
+  console.log(
+    "上一个按钮坐标",
+    chatStore.currentUserIndex,
+    "当前按钮坐标",
+    index
+  );
+
+  if (
+    !chatStore.messages[index].audioArray[0] ||
+    !chatStore.messages[index].audioArray[1] ||
+    !chatStore.messages[index].audioArray[2] ||
+    !chatStore.messages[index].audioArray[3]
+  ) {
+    return;
+  }
+
+  // 先把当前按钮状态修改
+  chatStore.messages[index].audioStatus =
+    !chatStore.messages[index].audioStatus;
+  // 如果当前按钮和之前的按钮不是同一个则再修改之前的按钮的状态
+  if (chatStore.currentUserIndex != index) {
+    if (chatStore.currentUserIndex != null) {
+      if (audioStore.isPlaying) {
+        audioStore.togglePlayPause();
+      }
+      chatStore.messages[chatStore.currentUserIndex].audioStatus = false;
+    }
+
+    // 强制停止所有音频实例（移动端兼容）
+    if (audioStore.soundInstance) {
+      audioStore.soundInstance.stop();
+      audioStore.soundInstance = null;
+    }
+
+    audioPreloadStatus.one = { loaded: false, url: null };
+    audioPreloadStatus.two = { loaded: false, url: null };
+    audioPreloadStatus.three = { loaded: false, url: null };
+    audioPreloadStatus.four = { loaded: false, url: null };
+    if (chatStore.messages[index].audioArray[0]) {
+      audioPreloadStatus.one.loaded = true;
+      audioPreloadStatus.one.url = chatStore.messages[index].audioArray[0];
+    }
+    if (chatStore.messages[index].audioArray[1]) {
+      audioPreloadStatus.two.loaded = true;
+      audioPreloadStatus.two.url = chatStore.messages[index].audioArray[1];
+    }
+    if (chatStore.messages[index].audioArray[2]) {
+      audioPreloadStatus.three.loaded = true;
+      audioPreloadStatus.three.url = chatStore.messages[index].audioArray[2];
+    }
+    if (chatStore.messages[index].audioArray[3]) {
+      audioPreloadStatus.four.loaded = true;
+      audioPreloadStatus.four.url = chatStore.messages[index].audioArray[3];
+    }
+    chatStore.currentUserIndex = index;
+    audioQueue.value = [];
+    isPlayingAudio.value = false;
+    audioStore.soundInstance = null;
+    currentPlayIndex = 0;
+    isCallingPlayNext = false;
+    setTimeout(() => {
+      addToAudioQueue(chatStore.messages[index].audioArray[0], "API1-第一个");
+      addToAudioQueue(chatStore.messages[index].audioArray[1], "API2-第二个");
+      addToAudioQueue(chatStore.messages[index].audioArray[2], "API3-第三个");
+      addToAudioQueue(chatStore.messages[index].audioArray[3], "API4-第四个");
+
+      if (!audioStore.isVoiceEnabled) {
+        audioStore.toggleVoice();
+      } else {
+        if (audioStore.currentAudioUrl || audioStore.ttsUrl) {
+          // audioStore.togglePlayPause();
+        } else {
+          audioStore.toggleVoice();
+        }
+      }
+    }, 100); // 100ms延迟足够移动端清理音频实例
+  } else {
+    if (!audioStore.isVoiceEnabled) {
+      console.log("1111");
+      audioStore.toggleVoice();
+    } else {
+      if (currentPlayIndex >= audioQueue.value.length) {
+        console.log("重新开始播放音频序列");
+        currentPlayIndex = 0;
+        isPlayingAudio.value = false;
+        isCallingPlayNext = false;
+        audioStore.soundInstance = null;
+        // 重新开始播放
+        if (audioQueue.value.length > 0) {
+          playNextAudio();
+        }
+      } else if (audioStore.currentAudioUrl || audioStore.ttsUrl) {
+        console.log("2222");
+        audioStore.togglePlayPause();
+      } else {
+        console.log("3333");
+        audioStore.toggleVoice();
+      }
+    }
+  }
+};
+
+// 计算属性：判断语音是否启用
+const isVoice = computed(() => {
+  return audioStore.isVoiceEnabled;
+});
+// 随机GIF
+const currentGif = ref("");
+
+const renderer = new marked.Renderer();
+// 重写 del 方法，让删除线不生效
+renderer.del = function (text) {
+  // 处理各种数据类型
+  console.log("text", text);
+  return "~" + text.tokens[0].raw + "<br>" + text.tokens[2].raw + "~";
+};
+
+// 定义自定义事件
+const emit = defineEmits(["updateMessage", "sendMessage", "enableInput"]);
+
+// 音频播放方法
+const playAudio = (url) => {
+  // 添加空值校验
+  if (!url) {
+    console.warn("音频URL为空，跳过播放");
+    audioStore.isPlaying = false;
+    return;
+  }
+
+  const handlePlay = () => {
+    if (audioStore.isNewInstance) {
+      const newSound = new Howl({
+        src: [url],
+        html5: true, // 强制HTML5 Audio解决iOS兼容问题
+        format: ["mp3", "acc"],
+        rate: 1.2, // 调整播放速度
+        onplay: () => {
+          audioStore.isPlaying = true; // 改为更新store状态
+          newSound.volume(1); // 添加音量设置
+        },
+        onend: () => (audioStore.isPlaying = false),
+        onstop: () => (audioStore.isPlaying = false),
+        onloaderror: (id, err) => {
+          console.error("音频加载失败:", err);
+          ElMessage.error("音频播放失败，请检查网络连接");
+        },
+      });
+      if (audioStore.nowSound) {
+        audioStore.nowSound.stop();
+      }
+      audioStore.nowSound = newSound;
+      audioStore.isNewInstance = false;
+
+      console.log("新音频");
+    } else {
+      console.log("已经有音频");
+    }
+
+    const newSound = audioStore.nowSound;
+
+    // 添加立即播放逻辑
+    newSound.play();
+
+    audioStore.setAudioInstance(newSound);
+    Howler._howls.push(newSound); // 强制注册到全局管理
+    // // 处理浏览器自动播放策略
+    // if (Howler.autoUnlock) {
+    //   Howler.autoUnlock();
+    // }
+  };
+
+  // if (/iPhone|iPad|iPod/.test(navigator.userAgent)) {
+  //   document.addEventListener('touchstart', handlePlay, { once: true });
+  //   ElMessage.info('请轻触屏幕以启用音频播放');
+  // } else {
+  //   handlePlay();
+  // }
+
+  handlePlay();
+
+  // Howler.volume(1.0) // 添加全局音量设置
+};
+// 新增暂停方法
+const pauseAudio = () => {
+  if (audioStore.soundInstance) {
+    audioStore.soundInstance.pause();
+
+    audioStore.isPlaying = false;
+  }
+};
+
+// 音频轮流播放方法
+const playAudioSequence = (audioUrls) => {
+  console.log("playAudioSequence被调用，参数:", audioUrls);
+  if (!audioUrls || audioUrls.length === 0) {
+    console.warn("音频URL列表为空，跳过播放");
+    return;
+  }
+
+  let currentIndex = 0;
+  let audioSequence = [...audioUrls]; // 保存音频序列
+
+  const playNext = () => {
+    if (currentIndex >= audioSequence.length) {
+      console.log("所有音频播放完成，重置到第一个音频");
+      // 播放完成后重置到第一个音频，但不自动播放
+      currentIndex = 0;
+      audioStore.isPlaying = false;
+      audioStore.isPaused = false;
+      audioStore.playbackPosition = 0;
+      // 清除音频实例，确保下次点击从头开始
+      audioStore.soundInstance = null;
+      audioStore.nowSound = null;
+      if (audioSequence.length > 0) {
+        audioStore.setCurrentAudioUrl(audioSequence[0]);
+      }
+      return;
+    }
+
+    const currentUrl = audioSequence[currentIndex];
+    console.log(`正在播放第${currentIndex + 1}个音频:`, currentUrl);
+    console.log(
+      "音频URL有效性检查:",
+      !!currentUrl,
+      "长度:",
+      currentUrl?.length
+    );
+
+    // 增强URL验证
+    if (
+      !currentUrl ||
+      typeof currentUrl !== "string" ||
+      currentUrl.trim() === ""
+    ) {
+      console.error(`音频 ${currentIndex + 1} URL无效，跳过该音频`);
+      currentIndex++;
+      setTimeout(() => {
+        playNext();
+      }, 100);
+      return;
+    }
+
+    // 检查URL格式
+    try {
+      new URL(currentUrl);
+    } catch (e) {
+      console.error(`音频 ${currentIndex + 1} URL格式错误:`, currentUrl);
+      currentIndex++;
+      setTimeout(() => {
+        playNext();
+      }, 100);
+      return;
+    }
+
+    // 设置当前音频URL
+    audioStore.setCurrentAudioUrl(currentUrl);
+
+    // 停止当前播放的音频
+    if (audioStore.nowSound) {
+      audioStore.nowSound.stop();
+    }
+
+    const sound = new Howl({
+      src: [currentUrl],
+      html5: true,
+      format: ["mp3", "acc"],
+      rate: 1.2,
+      onplay: () => {
+        audioStore.isPlaying = true;
+        audioStore.isPaused = false;
+        console.log(`开始播放音频 ${currentIndex + 1}`);
+        console.log("音频播放状态:", {
+          duration: sound.duration(),
+          state: sound.state(),
+          playing: sound.playing(),
+        });
+      },
+      onpause: () => {
+        audioStore.isPlaying = false;
+        audioStore.isPaused = true;
+        audioStore.playbackPosition = sound.seek() || 0;
+        console.log(`音频 ${currentIndex + 1} 已暂停`);
+      },
+      onend: () => {
+        audioStore.isPlaying = false;
+        audioStore.isPaused = false;
+        audioStore.playbackPosition = 0;
+        console.log(`音频 ${currentIndex + 1} 播放完成`);
+        currentIndex++;
+        // 如果是最后一个音频播放完成，立即清除实例
+        if (currentIndex >= audioSequence.length) {
+          console.log("最后一个音频播放完成，清除音频实例");
+          audioStore.soundInstance = null;
+          audioStore.nowSound = null;
+          currentIndex = 0; // 立即重置索引
+        }
+        // 播放下一个音频
+        setTimeout(() => {
+          playNext();
+        }, 500); // 间隔500ms播放下一个
+      },
+      onstop: () => {
+        audioStore.isPlaying = false;
+        audioStore.isPaused = false;
+        audioStore.playbackPosition = 0;
+        console.log(`音频 ${currentIndex + 1} 已停止`);
+      },
+      onloaderror: (id, err) => {
+        console.error(`音频 ${currentIndex + 1} 加载失败:`, err);
+        console.error("失败的音频URL:", currentUrl);
+        console.error("错误详情:", { id, err });
+
+        // 增加重试机制
+        if (!sound.retryCount) {
+          sound.retryCount = 0;
+        }
+
+        if (sound.retryCount < 2) {
+          sound.retryCount++;
+          console.log(
+            `音频 ${currentIndex + 1} 第${sound.retryCount}次重试加载`
+          );
+          setTimeout(() => {
+            sound.load();
+          }, 1000 * sound.retryCount); // 递增延时重试
+        } else {
+          console.warn(`音频 ${currentIndex + 1} 重试失败，跳过该音频`);
+          currentIndex++;
+          // 跳过失败的音频，播放下一个
+          setTimeout(() => {
+            playNext();
+          }, 100);
+        }
+      },
+    });
+
+    audioStore.nowSound = sound;
+    audioStore.setAudioInstance(sound);
+
+    // 添加播放超时检测
+    const playTimeout = setTimeout(() => {
+      if (!audioStore.isPlaying && sound.state() === "loading") {
+        console.warn(`音频 ${currentIndex + 1} 播放超时，可能网络问题`);
+        sound.stop();
+        currentIndex++;
+        playNext();
+      }
+    }, 10000); // 10秒超时
+
+    // 播放成功后清除超时
+    sound.once("play", () => {
+      clearTimeout(playTimeout);
+    });
+
+    console.log(`尝试播放音频 ${currentIndex + 1}，URL: ${currentUrl}`);
+    sound.play();
+  };
+
+  // 重写togglePlayPause方法以支持音频序列控制
+  const originalTogglePlayPause = audioStore.togglePlayPause;
+  audioStore.togglePlayPause = () => {
+    console.log("音频控制按钮被点击 11111111111");
+    console.log("当前播放状态:", audioStore.isPlaying);
+    console.log("当前暂停状态:", audioStore.isPaused);
+    console.log("当前音频实例:", audioStore.soundInstance);
+    console.log(
+      "当前索引:",
+      currentIndex,
+      "音频序列长度:",
+      audioSequence.length
+    );
+
+    if (audioStore.soundInstance) {
+      if (audioStore.isPlaying) {
+        // 暂停当前音频
+        console.log("暂停当前音频");
+        audioStore.pause();
+      } else if (audioStore.isPaused) {
+        // 从暂停位置继续播放
+        console.log("从暂停位置继续播放");
+        audioStore.play();
+      } else {
+        // 重新开始播放当前音频或从头开始播放序列
+        console.log("重新开始播放，当前索引:", currentIndex);
+        if (currentIndex >= audioSequence.length) {
+          console.log("所有音频已播放完成，从头开始");
+          currentIndex = 0; // 重置到第一个音频
+        }
+        playNext();
+      }
+    } else {
+      // 没有音频实例时，从头开始播放
+      console.log("没有音频实例，从头开始播放");
+      currentIndex = 0;
+      playNext();
+    }
+  };
+
+  // 开始播放第一个音频
+  playNext();
+};
+
+// 获取消息
+const chatMsg = computed(() => chatStore.messages);
+const props = defineProps({
+  messages: Array,
+  chartData: {
+    type: Object,
+    default: null,
+  },
+  index: {
+    type: Number,
+    required: true,
+  },
+});
+
+// 打字机效果
+const typewriterContent = ref("");
+const isTyping = ref(false);
+
+const typeWriter = (text, callback) => {
+  let index = 0;
+  isTyping.value = true;
+  typewriterContent.value = "";
+
+  const typingInterval = setInterval(() => {
+    if (index < text.length) {
+      typewriterContent.value += text.charAt(index);
+      index++;
+      // 自动滚动到底部
+      nextTick(() => {
+        const container = document.querySelector(".message-area");
+        if (container) container.scrollTop = container.scrollHeight;
+      });
+    } else {
+      clearInterval(typingInterval);
+      isTyping.value = false;
+      if (callback) callback();
+    }
+  }, 50); // 调整速度(毫秒)
+};
+
+const fnGetData = (data) => {
+  const YaLiZhiChengLuoPan = data.YaLiZhiChengLuoPan;
+  let sz = ref(5.5); // 进行判断
+  const yl = YaLiZhiChengLuoPan.Yali; // 压力位
+  const zc = YaLiZhiChengLuoPan.ZhiCheng; // 支撑位
+  console.log("yl", yl, "zc", zc);
+  if (yl == "较大" && zc == "较弱") {
+    sz.value = 0.5; // 极高风险
+  } else if (yl == "一般" && zc == "较弱") {
+    sz.value = 1.5; // 弱撑中压区
+  } else if (yl == "较弱" && zc == "较弱") {
+    sz.value = 2.5; // 弱撑弱压区
+  } else if (yl == "较大" && zc == "较大") {
+    sz.value = 3.5; // 强撑强压区
+  } else if (yl == "一般" && zc == "较大") {
+    sz.value = 4.5; // 强撑中压
+  } else if (yl == "较弱" && zc == "较大") {
+    sz.value = 5.5; // 强撑弱压区
+  } else if (yl == "较大" && zc == "一般") {
+    sz.value = 0.2;
+  } else if (yl == "一般" && zc == "一般") {
+    sz.value = 3;
+  } else if (yl == "较弱" && zc == "一般") {
+    sz.value = 5.8;
+  }
+  return sz.value;
+};
+
+const typingQueue = ref([]);
+const isTypingInProgress = ref(false);
+
+// 创建打字机效果的Promise函数
+const createTypingEffect = (message, content, speed) => {
+  return new Promise((resolve) => {
+    chatStore.messages.push(message);
+    if (Array.isArray(content) && content.length > 0) {
+      message.content = "";
+      message.isTyping = true;
+
+      let currentIndex = 0;
+
+      const processNextElement = () => {
+        if (currentIndex >= content.length) {
+          if (message.isEnd) {
+            if (message.isEnd == "1") {
+              apiStatus.one.isEnd = true;
+            } else if (message.isEnd == "2") {
+              apiStatus.two.isEnd = true;
+            } else if (message.isEnd == "3") {
+              apiStatus.three.isEnd = true;
+            } else if (message.isEnd == "4") {
+              apiStatus.four.isEnd = true;
+            }
+          }
+          if (message.error) {
+            chatStore.messages.push({
+              class: "ing",
+              type: "ing",
+              flag: false,
+              content: "系统正在为您努力加载中，请稍后再试",
+            });
+            chatStore.isLoading = false;
+            chatStore.chatInput = false;
+            emit("enableInput");
+            if (message.error == "2") {
+              apiStatus.two.isError = true;
+            } else if (message.error == "3") {
+              apiStatus.three.isError = true;
+            } else if (message.error == "4") {
+              apiStatus.four.isError = true;
+            }
+          }
+          if (message.end) {
+            chatStore.getUserCount();
+            chatStore.isLoading = false;
+            console.log("打印完毕，接触输入框禁用状态");
+            chatStore.chatInput = false;
+            emit("enableInput");
+          }
+          message.isTyping = false;
+          nextTick(() => {
+            resolve(); // 完成后resolve
+          });
+          return;
+        }
+
+        if (currentIndex % 2 === 0) {
+          // 偶数下标：直接加入
+          message.content += content[currentIndex];
+          currentIndex++;
+          processNextElement(); // 立即处理下一个元素
+        } else {
+          // 奇数下标：打字机效果
+          const text = content[currentIndex];
+          let charIndex = 0;
+
+          const typingInterval = setInterval(() => {
+            if (charIndex < text.length) {
+              message.content += text.charAt(charIndex);
+              charIndex++;
+            } else {
+              clearInterval(typingInterval);
+              currentIndex++;
+              processNextElement(); // 处理下一个元素
+            }
+          }, speed);
+        }
+      };
+
+      processNextElement(); // 开始处理
+    } else {
+      if (message.kline) {
+        if (message.klineType == 1) {
+          console.log("六色罗盘消息已添加到聊天列表");
+
+          // 在渲染完成后初始化图表
+          nextTick(() => {
+            console.log("nextTick开始 - 准备渲染图表");
+            console.log("消息列表:", chatStore.messages);
+
+            // 寻找最新添加的K线消息索引
+            let klineIndex = -1;
+            for (let i = 0; i < chatStore.messages.length; i++) {
+              if (chatStore.messages[i].messageId === message.messageId) {
+                klineIndex = i;
+                break;
+              }
+            }
+
+            console.log("找到的K线消息索引:", klineIndex);
+
+            if (klineIndex !== -1) {
+              const containerId = `kline-container-${klineIndex}`;
+              console.log("图表容器ID:", containerId);
+
+              // 确保DOM已经渲染完成
+              setTimeout(() => {
+                console.log("延时执行，确保DOM已渲染");
+                KlineCanvsEcharts(containerId);
+              }, 100); // 短暂延时确保DOM已渲染
+            } else {
+              console.warn("未找到K线消息");
+            }
+          });
+        } else {
+          console.log("K线消息已添加到聊天列表");
+
+          // 在渲染完成后初始化图表
+          nextTick(() => {
+            console.log("nextTick开始 - 准备渲染图表");
+            console.log("消息列表:", chatStore.messages);
+
+            // 寻找最新添加的K线消息索引
+            let klineIndex = -1;
+            for (let i = 0; i < chatStore.messages.length; i++) {
+              if (chatStore.messages[i].messageId === message.messageId) {
+                klineIndex = i;
+                break;
+              }
+            }
+
+            console.log("找到的K线消息索引:", klineIndex);
+
+            if (klineIndex !== -1) {
+              const containerId = `kline-container-${klineIndex}`;
+              console.log("图表容器ID:", containerId);
+
+              // 确保DOM已经渲染完成
+              setTimeout(() => {
+                console.log("延时执行，确保DOM已渲染");
+                KlineCanvsEcharts(containerId);
+              }, 100); // 短暂延时确保DOM已渲染
+            } else {
+              console.warn("未找到K线消息");
+            }
+          });
+        }
+        if (message.isEnd) {
+          if (message.isEnd == "1") {
+            apiStatus.one.isEnd = true;
+          } else if (message.isEnd == "2") {
+            apiStatus.two.isEnd = true;
+          } else if (message.isEnd == "3") {
+            apiStatus.three.isEnd = true;
+          } else if (message.isEnd == "4") {
+            apiStatus.four.isEnd = true;
+          }
+        }
+        if (message.error) {
+          chatStore.messages.push({
+            class: "ing",
+            type: "ing",
+            flag: false,
+            content: "系统正在为您努力加载中，请稍后再试",
+          });
+          chatStore.isLoading = false;
+          chatStore.chatInput = false;
+          emit("enableInput");
+          if (message.error == "2") {
+            apiStatus.two.isError = true;
+          } else if (message.error == "3") {
+            apiStatus.three.isError = true;
+          } else if (message.error == "4") {
+            apiStatus.four.isError = true;
+          }
+        }
+        // 延时1秒后resolve
+        setTimeout(() => {
+          resolve();
+        }, 1000);
+      } else {
+        if (message.isEnd) {
+          if (message.isEnd == "1") {
+            apiStatus.one.isEnd = true;
+          } else if (message.isEnd == "2") {
+            apiStatus.two.isEnd = true;
+          } else if (message.isEnd == "3") {
+            apiStatus.three.isEnd = true;
+          } else if (message.isEnd == "4") {
+            apiStatus.four.isEnd = true;
+          }
+        }
+        if (message.error) {
+          chatStore.messages.push({
+            class: "ing",
+            type: "ing",
+            flag: false,
+            content: "系统正在为您努力加载中，请稍后再试",
+          });
+          chatStore.isLoading = false;
+          chatStore.chatInput = false;
+          emit("enableInput");
+          if (message.error == "2") {
+            apiStatus.two.isError = true;
+          } else if (message.error == "3") {
+            apiStatus.three.isError = true;
+          } else if (message.error == "4") {
+            apiStatus.four.isError = true;
+          }
+        }
+        // 延时1秒后resolve
+        setTimeout(() => {
+          resolve();
+        }, 1000);
+      }
+    }
+  });
+};
+
+let apiStatus = {};
+
+// 队列处理函数
+const processTypingQueue = async () => {
+  if (isTypingInProgress.value || typingQueue.value.length === 0) {
+    return;
+  }
+
+  isTypingInProgress.value = true;
+
+  while (typingQueue.value.length > 0) {
+    const task = typingQueue.value.shift();
+    await createTypingEffect(task.message, task.content, task.speed);
+  }
+
+  isTypingInProgress.value = false;
+};
+
+// 添加打字机任务到队列
+const addTypingTask = (message, content, speed) => {
+  typingQueue.value.push({ message, content, speed });
+  processTypingQueue();
+};
+
+// 显示思考过程
+async function showThinkingProcess(stockName = null) {
+  // 第一步：正在思考
+  const thinkingMessage1 = reactive({
+    sender: "ai",
+    class: "ing",
+    type: "ing",
+    flag: true,
+    content: "夺宝奇兵大模型正在思考",
+    gif: thinkingGif,
+    nowrap: true,
+  });
+  chatStore.messages.push(thinkingMessage1);
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+  chatStore.messages.pop();
+
+  // 第二步：正在解析关键数据（持续显示直到获取到股票名称）
+  const thinkingMessage2 = reactive({
+    sender: "ai",
+    class: "ing",
+    type: "ing",
+    flag: true,
+    content: "正在解析关键数据",
+    gif: analyzeGif,
+    nowrap: true,
+  });
+  chatStore.messages.push(thinkingMessage2);
+
+  // 如果没有股票名称，保持第二步显示
+  if (!stockName) {
+    return thinkingMessage2; // 返回消息引用，以便后续更新
+  }
+
+  // 有股票名称后，继续后续步骤
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+  chatStore.messages.pop();
+
+  // 第三步：生成具体股票的全景作战报告
+  const thinkingMessage3 = reactive({
+    sender: "ai",
+    class: "ing",
+    type: "ing",
+    flag: true,
+    content: `正在生成${stockName}全景作战报告`,
+    gif: generateGif,
+    nowrap: true,
+  });
+  chatStore.messages.push(thinkingMessage3);
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+  chatStore.messages.pop();
+
+  // 第四步：报告已生成
+  const thinkingMessage4 = reactive({
+    sender: "ai",
+    class: "ing",
+    type: "ing",
+    content: "报告已生成！",
+    nowrap: true,
+  });
+  chatStore.messages.push(thinkingMessage4);
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+  chatStore.messages.pop();
+
+  return null;
+}
+
+// 继续思考过程（当获取到股票名称后调用）
+async function continueThinkingProcess(thinkingMessageRef, stockName) {
+  if (!thinkingMessageRef || !stockName) return;
+
+  // 等待一段时间后继续
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+
+  // 移除第二步消息
+  const index = chatStore.messages.indexOf(thinkingMessageRef);
+  if (index > -1) {
+    chatStore.messages.splice(index, 1);
+  }
+
+  // 第三步：生成具体股票的全景作战报告
+  const thinkingMessage3 = reactive({
+    sender: "ai",
+    class: "ing",
+    type: "ing",
+    flag: true,
+    content: `正在生成${stockName}全景作战报告`,
+    gif: generateGif,
+  });
+  chatStore.messages.push(thinkingMessage3);
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+  chatStore.messages.pop();
+
+  // 第四步：报告已生成
+  const thinkingMessage4 = reactive({
+    sender: "ai",
+    class: "ing",
+    type: "ing",
+    content: "报告已生成！",
+  });
+  chatStore.messages.push(thinkingMessage4);
+  await new Promise((resolve) => setTimeout(resolve, 1500));
+  chatStore.messages.pop();
+}
+
+const hasValidData = ref(false);
+
+// 创建一个非响应式的对象来存储图表实例
+const chartInstancesMap = {};
+
+// 存储上一次的消息的length
+const previousMessagesLength = ref(0);
+
+watch(
+  () => props.messages,
+  async (newVal, oldVal) => {
+    // // 添加空值判断
+    if (!newVal?.length || newVal === previousMessagesLength.value) return;
+
+    chatStore.firstAPICall = true;
+    console.log("第一阶段,意图识别,获取回复，历史记录禁止点击");
+
+    previousMessagesLength.value = newVal.length;
+    if (newVal.length > 0) {
+      // 清理语音下标
+      console.log("chatStore.currentUserIndex", chatStore.currentUserIndex);
+      if (chatStore.currentUserIndex != null) {
+        chatStore.messages[chatStore.currentUserIndex].audioStatus = false;
+      }
+      chatStore.currentUserIndex = null;
+      audioStore.stop(); // 暂停语音
+
+      // 🔧 新增：重置音频队列状态，确保新音频能够自动播放
+      audioQueue.value = [];
+      isPlayingAudio.value = false;
+      currentPlayIndex = 0;
+      isCallingPlayNext = false;
+
+      // 重置音频预加载状态
+      audioPreloadStatus.one = { loaded: false, url: null };
+      audioPreloadStatus.two = { loaded: false, url: null };
+      audioPreloadStatus.three = { loaded: false, url: null };
+      audioPreloadStatus.four = { loaded: false, url: null };
+
+      // 清除音频实例
+      audioStore.soundInstance = null;
+      audioStore.nowSound = null;
+      audioStore.isPlaying = false;
+      audioStore.isPaused = false;
+      audioStore.playbackPosition = 0;
+
+      console.log("消息列表已更新，最新消息:", newVal[newVal.length - 1]);
+      chatStore.messages.push(newVal[newVal.length - 1]);
+      chatStore.currentUserIndex = chatStore.messages.length - 1;
+      chatStore.inputUserIndex = chatStore.messages.length - 1;
+      console.log(
+        "消息列表已更新，最新消息:",
+        chatStore.messages[chatStore.messages.length - 1],
+        "最新用户坐标",
+        chatStore.currentUserIndex
+      );
+
+      // 获取权限
+      const userStore = useUserStore();
+
+      const params1 = {
+        language: "cn",
+        marketList: "usa,sg,my,hk,cn,can,vi,th,in",
+        content: newVal[newVal.length - 1].content,
+
+        token: localStorage.getItem("localToken"),
+        model: 1,
+        // language: "cn",
+        // marketList: "hk,cn,usa,my,sg,vi,in,gb"
+        // token: "+SsksARQgUHIbIG3rRnnbZi0+fEeMx8pywnIlrmTxo5EOPR/wjWDV7w7+ZUseiBtf9kFa/atmNx6QfSpv5w",
+      };
+      // 标志
+      let flag = true;
+      const codeData = ref();
+      // 开始思考过程（不带股票名称）
+      const thinkingMessageRef = await showThinkingProcess();
+
+      // 第一阶段,意图识别
+      try {
+        // 调用工作流获取回复
+        const result = await dbqbFirstAPI(params1);
+        codeData.value = result.data;
+        console.log(codeData.value, "codeData");
+        // 根据意图识别结果判断
+        if (result.code == 200) {
+          // 意图识别成功后，更新历史记录状态
+          chatStore.searchRecord = true;
+          // 获取到股票名称后，继续思考过程
+          if (thinkingMessageRef && codeData.value.name) {
+            await continueThinkingProcess(
+              thinkingMessageRef,
+              codeData.value.name
+            );
+          }
+          // for (let i = chatStore.messages.length - 1; i >= 0; --i) {
+          //   if (chatStore.messages[i].sender == "user") {
+          //     chatStore.messages[i].audioStatus = true;
+          //     break;
+          //   }
+          // }
+          chatStore.messages.push({
+            // class: "ing",
+            // type: "ing",
+            // flag: flag,
+            // content: result.data.kaishi,
+          });
+        } else {
+          // 意图识别失败，先清理思考过程消息
+          if (thinkingMessageRef) {
+            const index = chatStore.messages.indexOf(thinkingMessageRef);
+            if (index > -1) {
+              chatStore.messages.splice(index, 1);
+            }
+          }
+
+          flag = false;
+          console.log("执行回绝话术");
+          const AIcontent = ref(result.msg);
+          // 修改后的消息处理逻辑
+
+          const processedContent = marked(AIcontent.value);
+          const katexRegex = /\$\$(.*?)\$\$/g;
+          let aiContent = processedContent.replace(
+            katexRegex,
+            (match, formula) => {
+              try {
+                return katex.renderToString(formula, { throwOnError: false });
+              } catch (error) {
+                console.error("KaTeX 渲染错误:", error);
+                return match;
+              }
+            }
+          );
+          console.log(AIcontent, "AIcontent");
+
+          if (result.code == 406) {
+            AIcontent.value = `<p>尊敬的用户，目前您的token余额为0，系统将无法处理您的搜索请求，您可以补充token后再进行搜索。token兑换的入口在右上角“<span style="color:blue;cursor:pointer;border-bottom:1px solid blue" onclick="window.showCountHandler()">获取token次数</span>”，点击即可操作哦~</p>`;
+          }
+
+          const aiMsg = {
+            class: "ing",
+            type: "ing",
+            flag: flag,
+            content: AIcontent,
+          };
+
+          chatStore.messages.push(aiMsg);
+
+          chatStore.isLoading = false;
+          chatStore.chatInput = false;
+          chatStore.firstAPICall = false;
+
+          console.log("历史记录可以点击");
+          emit("enableInput");
+        }
+      } catch (e) {
+        // 意图识别异常，先清理思考过程消息
+        if (thinkingMessageRef) {
+          const index = chatStore.messages.indexOf(thinkingMessageRef);
+          if (index > -1) {
+            chatStore.messages.splice(index, 1);
+          }
+        }
+
+        console.log(e, "意图识别失败");
+        chatStore.messages.push({
+          class: "ing",
+          type: "ing",
+          flag: false,
+          content: "系统正在为您努力加载中，请稍后再试",
+        });
+        chatStore.isLoading = false;
+        chatStore.chatInput = false;
+        chatStore.firstAPICall = false;
+        console.log("历史记录可以点击");
+        emit("enableInput");
+      }
+
+      if (flag) {
+        const params2 = {
+          language: "cn",
+          token: localStorage.getItem("localToken"),
+          parentId: codeData.value.parentId,
+          stockId: codeData.value.stockId,
+          recordId: codeData.value.recordId,
+
+          // content: newVal[newVal.length - 1].content,
+          // marketList: "usa,sg,my,hk,cn,can,vi,th,in",
+          // name: codeData.value.name,
+          // code: codeData.value.code,
+          // market: codeData.value.market,
+
+          // language: "cn",
+          // marketList: "hk,cn,usa,my,sg,vi,in,gb"
+          // token: "+SsksARQgUHIbIG3rRnnbZi0+fEeMx8pywnIlrmTxo5EOPR/wjWDV7w7+ZUseiBtf9kFa/atmNx6QfSpv5w",
+        };
+
+        try {
+          const env = import.meta.env.VITE_ENV;
+          const result20 = await dataListAPI({
+            token:
+              env == "development" || env == "test"
+                ? "8Csj5VVX1UbIb4C3oxrnbZi0+fEeMx8pywnIlrmTm45Cb/EllzWACLto9J9+fCFsfdgBOvKvyY94FvqlvM0"
+                : "8nkj4QBV1RPIb4CzoRTnbZi0+fEeMx8pywnIlrmTxdwROKkuwWqAWu9orpkpeXVqL98DPfeonNYpHv+mucA",
+            market: codeData.value.market,
+            code: codeData.value.code,
+            language: "cn", //t.value.suoxie,
+            brainPrivilegeState: 1,
+            swordPrivilegeState: 1,
+            stockForecastPrivilegeState: 1,
+            spaceForecastPrivilegeState: 1,
+            aibullPrivilegeState: 1,
+            aigoldBullPrivilegeState: 1,
+            airadarPrivilegeState: 1,
+            // marketList: 1,
+            // brainPrivilegeState: userStore.brainPerssion,
+            // swordPrivilegeState: userStore.swordPerssion,
+            // stockForecastPrivilegeState: userStore.pricePerssion,
+            // spaceForecastPrivilegeState: userStore.timePerssion,
+            // aibullPrivilegeState: userStore.aibullPerssion,
+            // aigoldBullPrivilegeState: userStore.aiGnbullPerssion,
+            // airadarPrivilegeState: userStore.airadarPerssion,
+            marketList: "usa,sg,my,hk,cn,can,vi,th,in,gb",
+          });
+
+          // 添加空值检查防止访问null对象的属性
+          const HomePage = result20.data?.HomePage || null;
+          const AIGoldBull = result20.data?.AIGoldBull || null;
+
+          const isLiuSe = HomePage ? true : false;
+          const isAIGoldBull =
+            AIGoldBull &&
+            AIGoldBull.DNC &&
+            AIGoldBull.FCX &&
+            AIGoldBull.JN &&
+            AIGoldBull.KLine20 &&
+            AIGoldBull.QSXH
+              ? true
+              : false;
+
+          const katexRegex = /\$\$(.*?)\$\$/g;
+
+          let result21;
+          let result22;
+          let result23;
+          let result24;
+          // 用于跟踪API完成状态和结果
+          apiStatus = {
+            one: {
+              completed: false,
+              result: null,
+              error: null,
+              isError: false,
+              isEnd: false,
+            },
+            two: {
+              completed: false,
+              result: null,
+              error: null,
+              isError: false,
+              isEnd: false,
+            },
+            three: {
+              completed: false,
+              result: null,
+              error: null,
+              isError: false,
+              isEnd: false,
+            },
+            four: {
+              completed: false,
+              result: null,
+              error: null,
+              isError: false,
+              isEnd: false,
+            },
+          };
+
+          // 音频播放队列管理已移到全局作用域
+
+          // 重写audioStore的togglePlayPause方法以支持队列播放控制
+          const originalTogglePlayPause = audioStore.togglePlayPause;
+          // audioStore.togglePlayPause = () => {
+          //   console.log("主页音频控制按钮被点击22222222222222");
+          //   console.log(
+          //     "当前音频状态 - isPlaying:",
+          //     audioStore.isPlaying,
+          //     "isPaused:",
+          //     audioStore.isPaused
+          //   );
+          //   console.log("当前音频实例:", audioStore.soundInstance);
+          //   console.log(
+          //     "队列播放状态 - isPlayingAudio:",
+          //     isPlayingAudio.value,
+          //     "队列长度:",
+          //     audioQueue.value.length
+          //   );
+          //   console.log(
+          //     "当前播放索引:",
+          //     currentPlayIndex,
+          //     "是否所有音频播放完成:",
+          //     currentPlayIndex >= audioQueue.value.length
+          //   );
+
+          //   // 检查是否所有音频都播放完成，如果是则重新开始
+          //   if (
+          //     audioStore.soundInstance &&
+          //     currentPlayIndex < audioQueue.value.length &&
+          //     isPlayingAudio.value
+          //   ) {
+          //     if (audioStore.isPlaying) {
+          //       // 暂停当前音频
+          //       console.log("暂停当前音频");
+          //       audioStore.soundInstance.pause();
+          //     } else if (
+          //       audioStore.isPaused &&
+          //       audioStore.playbackPosition > 0
+          //     ) {
+          //       // 从暂停位置继续播放
+          //       console.log(
+          //         "从暂停位置继续播放音频，位置:",
+          //         audioStore.playbackPosition
+          //       );
+          //       audioStore.soundInstance.seek(audioStore.playbackPosition);
+          //       audioStore.soundInstance.play();
+          //     } else {
+          //       // 重新开始播放
+          //       console.log("重新开始播放音频");
+          //       audioStore.soundInstance.play();
+          //     }
+          //   } else {
+          //     console.log("没有音频实例，检查是否需要重新播放队列");
+          //     console.log("重新播放条件检查:", {
+          //       isPlayingAudio: isPlayingAudio.value,
+          //       queueLength: audioQueue.value.length,
+          //       currentPlayIndex: currentPlayIndex,
+          //       condition1: audioQueue.value.length === 0,
+          //       condition2: currentPlayIndex >= audioQueue.value.length,
+          //       finalCondition:
+          //         !isPlayingAudio.value &&
+          //         (audioQueue.value.length === 0 ||
+          //           currentPlayIndex >= audioQueue.value.length),
+          //     });
+          //     // 没有音频实例时，检查是否所有音频都播放完成
+          //     if (
+          //       !isPlayingAudio.value &&
+          //       (audioQueue.value.length === 0 ||
+          //         currentPlayIndex >= audioQueue.value.length)
+          //     ) {
+          //       console.log("所有音频播放完成，重新构建队列从第一个开始播放");
+          //       // 重新构建音频队列，按顺序添加所有音频（不自动播放）
+          //       const audioItems = [];
+          //       if (audioPreloadStatus.one.url) {
+          //         audioItems.push({
+          //           url: audioPreloadStatus.one.url,
+          //           name: "API1-第一个",
+          //           order: 1,
+          //         });
+          //       }
+          //       if (audioPreloadStatus.two.url) {
+          //         audioItems.push({
+          //           url: audioPreloadStatus.two.url,
+          //           name: "API2-第二个",
+          //           order: 2,
+          //         });
+          //       }
+          //       if (audioPreloadStatus.three.url) {
+          //         audioItems.push({
+          //           url: audioPreloadStatus.three.url,
+          //           name: "API3-第三个",
+          //           order: 3,
+          //         });
+          //       }
+          //       if (audioPreloadStatus.four.url) {
+          //         audioItems.push({
+          //           url: audioPreloadStatus.four.url,
+          //           name: "API4-第四个",
+          //           order: 4,
+          //         });
+          //       }
+
+          //       // 按顺序排序并添加到队列
+          //       audioItems.sort((a, b) => a.order - b.order);
+          //       audioQueue.value = audioItems;
+
+          //       console.log(
+          //         "队列重建完成，队列内容:",
+          //         audioQueue.value.map((item) => item.name)
+          //       );
+          //       console.log("开始从第一个音频播放");
+
+          //       // 重置播放状态并开始播放第一个音频
+          //       if (audioQueue.value.length > 0) {
+          //         // 完全重置所有播放相关状态
+          //         isPlayingAudio.value = false;
+          //         isCallingPlayNext = false;
+          //         currentPlayIndex = 0; // 重置播放索引到第一个音频
+          //         audioStore.isPlaying = false;
+          //         audioStore.isPaused = false;
+          //         audioStore.playbackPosition = 0;
+          //         audioStore.nowSound = null;
+          //         audioStore.soundInstance = null;
+
+          //         console.log("🔄 状态完全重置完成，准备从第一个音频开始播放");
+
+          //         console.log("✅ 完全重置播放状态，准备播放第一个音频");
+          //         console.log("重置后状态检查:", {
+          //           isPlayingAudio: isPlayingAudio.value,
+          //           isCallingPlayNext: isCallingPlayNext,
+          //           currentPlayIndex: currentPlayIndex,
+          //           audioStoreIsPlaying: audioStore.isPlaying,
+          //           queueLength: audioQueue.value.length,
+          //         });
+
+          //         setTimeout(() => {
+          //           console.log("🚀 延迟后开始播放第一个音频");
+          //           console.log("播放前最终状态检查:", {
+          //             currentPlayIndex: currentPlayIndex,
+          //             queueLength: audioQueue.value.length,
+          //             queueItems: audioQueue.value.map(
+          //               (item, index) => `${index}: ${item.name}`
+          //             ),
+          //             isPlayingAudio: isPlayingAudio.value,
+          //             isCallingPlayNext: isCallingPlayNext,
+          //             audioStoreIsPlaying: audioStore.isPlaying,
+          //             audioStoreInstance: !!audioStore.soundInstance,
+          //           });
+          //           console.log(
+          //             "🎯 即将调用 playNextAudio，期望播放:",
+          //             audioQueue.value[currentPlayIndex]?.name || "无音频"
+          //           );
+          //           playNextAudio();
+          //         }, 200);
+          //       }
+          //     } else if (!isPlayingAudio.value && audioQueue.value.length > 0) {
+          //       console.log("队列中还有音频，继续播放");
+          //       playNextAudio();
+          //     } else {
+          //       console.log(
+          //         "无法播放 - isPlayingAudio:",
+          //         isPlayingAudio.value,
+          //         "队列长度:",
+          //         audioQueue.value.length
+          //       );
+          //     }
+          //   }
+          // };
+
+          // 预加载音频函数
+          const preloadAudio = (url, apiKey) => {
+            if (!url || !audioStore.isVoiceEnabled) {
+              audioPreloadStatus[apiKey].loaded = true;
+              return Promise.resolve();
+            }
+
+            // 立即设置URL，确保即使预加载失败也能使用
+            audioPreloadStatus[apiKey].url = url;
+            console.log(`设置音频${apiKey}的URL:`, url);
+
+            return new Promise((resolve) => {
+              const audio = new Howl({
+                src: [url],
+                html5: true,
+                format: ["mp3", "acc"],
+                rate: 1.2,
+                preload: true,
+                onload: () => {
+                  console.log(`音频${apiKey}预加载完成:`, url);
+                  audioPreloadStatus[apiKey].loaded = true;
+                  resolve();
+                },
+                onloaderror: (id, err) => {
+                  console.error(`音频${apiKey}预加载失败:`, err);
+                  audioPreloadStatus[apiKey].loaded = true; // 标记为已处理，避免阻塞
+                  // URL已经在上面设置了，即使预加载失败也保留URL
+                  resolve();
+                },
+              });
+            });
+          };
+
+          // 检查第一个接口是否可以开始输出（文本和音频都准备好）
+          const canStartFirstOutput = () => {
+            return apiStatus.one.completed && audioPreloadStatus.one.loaded;
+          };
+
+          // 检查并按顺序执行代码的函数
+          const checkAndExecuteInOrder = () => {
+            // 检查OneAPI - 只有当文本和音频都准备好时才开始输出
+            if (canStartFirstOutput() && !apiStatus.one.executed) {
+              if (apiStatus.one.result) {
+                apiStatus.one.executed = true;
+                console.log(
+                  "执行OneAPI代码（文本和音频同步开始）:",
+                  apiStatus.one.result
+                );
+
+                // 将第一个音频添加到播放队列（确保顺序：API1）
+                if (audioPreloadStatus.one.url) {
+                  chatStore.messages[chatStore.inputUserIndex].audioArray.push(
+                    audioPreloadStatus.one.url
+                  );
+                  if (chatStore.currentUserIndex == chatStore.inputUserIndex) {
+                    chatStore.messages[
+                      chatStore.inputUserIndex
+                    ].audioStatus = true;
+                    addToAudioQueue(audioPreloadStatus.one.url, "API1-第一个");
+                  } else {
+                    chatStore.messages[
+                      chatStore.inputUserIndex
+                    ].audioStatus = false;
+                  }
+                  console.log(
+                    "音频队列：添加API1音频，当前队列长度:",
+                    audioQueue.value.length
+                  );
+                }
+
+                // 在这里添加OneAPI成功后需要执行的代码
+                // 删除正在为您生成信息
+                chatStore.messages.pop();
+                // 添加报告头和时间
+                addTypingTask(
+                  {
+                    sender: "ai",
+                    class: "title1",
+                    type: "title1",
+                    content: codeData.value.name + "全景作战报告",
+                    date: result21.data.date,
+                  },
+                  "",
+                  50
+                );
+
+                chatStore.firstAPICall = false;
+                console.log("历史记录可以点击");
+                // chatStore.messages.push({
+                //   sender: "ai",
+                //   class: "title1",
+                //   type: "title1",
+                //   content: codeData.value.name + "全景作战报告",
+                //   date: moment().format("MM/DD/YYYY"),
+                // });
+                // 添加股票信息框
+
+                const pc1 = marked(
+                  result21.data.name +
+                    "\n" +
+                    result21.data.price +
+                    "\n" +
+                    result21.data.date
+                );
+                const ac1 = pc1.replace(katexRegex, (match, formula) => {
+                  try {
+                    return katex.renderToString(formula, {
+                      throwOnError: false,
+                    });
+                  } catch (error) {
+                    console.error("KaTeX 渲染错误:", error);
+                    return match;
+                  }
+                });
+
+                // 先推送初始消息
+                const aiMessage1 = reactive({
+                  sender: "ai",
+                  class: "content1",
+                  type: "content1",
+                  content: "",
+                  isTyping: true,
+                });
+                // chatStore.messages.push(aiMessage1);
+
+                // let index1 = 0;
+                // const typingInterval1 = setInterval(() => {
+                //   if (index1 < ac1.length) {
+                //     aiMessage1.content += ac1.charAt(index1);
+                //     index1++;
+                //   } else {
+                //     clearInterval(typingInterval1);
+                //     aiMessage1.isTyping = false;
+                //   }
+                // }, 50); // 调整速度为50ms/字符
+
+                addTypingTask(aiMessage1, ["", ac1], 130);
+
+                // chatStore.messages.push({
+                //   sender: "ai",
+                //   class: "content1",
+                //   type: "content1",
+                //   content: ac1,
+                // });
+                // 添加六色罗盘
+                if (HomePage) {
+                  const LiuSeData = JSON.parse(JSON.stringify(toRaw(HomePage)));
+                  const sz = fnGetData(LiuSeData);
+                  if (sz) {
+                    hasValidData.value = true;
+                    console.log("hasValidData设置为:", hasValidData.value);
+                  }
+                  // 先推送K线图消息
+                  const klineMessageId1 = `kline-${Date.now()}`;
+                  console.log("生成K线消息ID:", klineMessageId1);
+
+                  addTypingTask(
+                    {
+                      sender: "ai",
+                      class: "content1",
+                      type: "content1",
+                      kline: true,
+                      chartData: sz,
+                      messageId: klineMessageId1,
+                      hasValidData: true,
+                      klineType: 1,
+                    },
+                    "",
+                    50
+                  );
+                  // chatStore.messages.push({
+                  //   sender: "ai",
+                  //   class: "content1",
+                  //   type: "content1",
+                  //   kline: true,
+                  //   chartData: sz,
+                  //   messageId: klineMessageId1,
+                  //   hasValidData: true,
+                  //   klineType: 1,
+                  // });
+
+                  // console.log("六色罗盘消息已添加到聊天列表");
+
+                  // // 在渲染完成后初始化图表
+                  // nextTick(() => {
+                  //   console.log("nextTick开始 - 准备渲染图表");
+                  //   console.log("消息列表:", chatStore.messages);
+
+                  //   // 寻找最新添加的K线消息索引
+                  //   let klineIndex = -1;
+                  //   for (let i = 0; i < chatStore.messages.length; i++) {
+                  //     if (chatStore.messages[i].messageId === klineMessageId1) {
+                  //       klineIndex = i;
+                  //       break;
+                  //     }
+                  //   }
+
+                  //   console.log("找到的K线消息索引:", klineIndex);
+
+                  //   if (klineIndex !== -1) {
+                  //     const containerId = `kline-container-${klineIndex}`;
+                  //     console.log("图表容器ID:", containerId);
+
+                  //     // 确保DOM已经渲染完成
+                  //     setTimeout(() => {
+                  //       console.log("延时执行，确保DOM已渲染");
+                  //       KlineCanvsEcharts(containerId);
+                  //     }, 100); // 短暂延时确保DOM已渲染
+                  //   } else {
+                  //     console.warn("未找到K线消息");
+                  //   }
+                  // });
+                }
+                // 度牛尺K线图
+                if (
+                  AIGoldBull &&
+                  AIGoldBull.DNC &&
+                  AIGoldBull.FCX &&
+                  AIGoldBull.JN &&
+                  AIGoldBull.KLine20 &&
+                  AIGoldBull.QSXH
+                ) {
+                  const AIGoldBullData = JSON.parse(
+                    JSON.stringify(toRaw(AIGoldBull))
+                  );
+                  const HomePageData = JSON.parse(
+                    JSON.stringify(toRaw(HomePage))
+                  );
+                  console.log("处理 K 线数据 - 开始");
+                  console.log("AIGoldBullData", AIGoldBullData);
+                  console.log("HomePageData", HomePageData);
+
+                  const Kline20 = {
+                    name: HomePageData.StockInformation.Name,
+                    Kline: AIGoldBullData,
+                  };
+
+                  // 打印K线数据结构
+                  console.log("K线数据结构:", Kline20);
+                  console.log("K线数据名称:", Kline20.name);
+                  console.log("K线数据:", Kline20.Kline ? Kline20.Kline : null);
+
+                  // 设置数据有效标志
+                  hasValidData.value = true;
+                  console.log("hasValidData设置为:", hasValidData.value);
+
+                  // chatStore.messages.pop();
+
+                  // 先推送K线图消息
+                  const klineMessageId2 = `kline-${Date.now() + 1}`;
+                  console.log("生成K线消息ID:", klineMessageId2);
+
+                  // chatStore.messages.push({
+                  //   sender: "ai",
+                  //   class: "content2",
+                  //   type: "content2",
+                  //   kline: true,
+                  //   chartData: Kline20,
+                  //   messageId: klineMessageId2,
+                  //   hasValidData: true, // 添加hasValidData标志
+                  //   klineType: 2,
+                  // });
+
+                  addTypingTask(
+                    {
+                      sender: "ai",
+                      class: "content2",
+                      type: "content2",
+                      kline: true,
+                      chartData: Kline20,
+                      messageId: klineMessageId2,
+                      hasValidData: true, // 添加hasValidData标志
+                      klineType: 2,
+                      error: apiStatus.two.error ? "2" : "",
+                      isEnd: "1",
+                    },
+                    "",
+                    50
+                  );
+
+                  // console.log("K线消息已添加到聊天列表");
+
+                  // // 在渲染完成后初始化图表
+                  // nextTick(() => {
+                  //   console.log("nextTick开始 - 准备渲染图表");
+                  //   console.log("消息列表:", chatStore.messages);
+
+                  //   // 寻找最新添加的K线消息索引
+                  //   let klineIndex = -1;
+                  //   for (let i = 0; i < chatStore.messages.length; i++) {
+                  //     if (chatStore.messages[i].messageId === klineMessageId2) {
+                  //       klineIndex = i;
+                  //       break;
+                  //     }
+                  //   }
+
+                  //   console.log("找到的K线消息索引:", klineIndex);
+
+                  //   if (klineIndex !== -1) {
+                  //     const containerId = `kline-container-${klineIndex}`;
+                  //     console.log("图表容器ID:", containerId);
+
+                  //     // 确保DOM已经渲染完成
+                  //     setTimeout(() => {
+                  //       console.log("延时执行，确保DOM已渲染");
+                  //       KlineCanvsEcharts(containerId);
+                  //     }, 100); // 短暂延时确保DOM已渲染
+                  //   } else {
+                  //     console.warn("未找到K线消息");
+                  //   }
+                  // });
+                }
+              } else {
+                chatStore.messages.push({
+                  class: "ing",
+                  type: "ing",
+                  flag: false,
+                  content: "系统正在为您努力加载中，请稍后再试",
+                });
+                chatStore.isLoading = false;
+                chatStore.chatInput = false;
+                emit("enableInput");
+              }
+            }
+
+            // 检查TwoAPI（需要OneAPI已执行）
+            if (
+              apiStatus.one.executed &&
+              apiStatus.two.completed &&
+              !apiStatus.two.executed
+            ) {
+              if (apiStatus.two.result) {
+                apiStatus.two.executed = true;
+                console.log("执行TwoAPI代码:", apiStatus.two.result);
+
+                // 将第二个音频添加到播放队列（确保顺序：API2）
+                if (audioPreloadStatus.two.url) {
+                  chatStore.messages[chatStore.inputUserIndex].audioArray.push(
+                    audioPreloadStatus.two.url
+                  );
+                  if (chatStore.currentUserIndex == chatStore.inputUserIndex) {
+                    addToAudioQueue(audioPreloadStatus.two.url, "API2-第二个");
+                  } else {
+                    chatStore.messages[
+                      chatStore.inputUserIndex
+                    ].audioStatus = false;
+                  }
+                  console.log(
+                    "音频队列：添加API2音频，当前队列长度:",
+                    audioQueue.value.length
+                  );
+                }
+
+                // 在这里添加TwoAPI成功后需要执行的代码
+                // 添加标题2
+                addTypingTask(
+                  {
+                    sender: "ai",
+                    class: "title2",
+                    type: "title2",
+                    content: "",
+                  },
+                  "",
+                  50
+                );
+                // chatStore.messages.push({
+                //   sender: "ai",
+                //   class: "title2",
+                //   type: "title2",
+                //   content: "",
+                // });
+                // 添加内容框1
+                const pc2 = marked(result22.data.hxjzpg);
+                console.log(pc2, "pc2");
+                const ac2 = pc2.replace(katexRegex, (match, formula) => {
+                  try {
+                    return katex.renderToString(formula, {
+                      throwOnError: false,
+                    });
+                  } catch (error) {
+                    console.error("KaTeX 渲染错误:", error);
+                    return match;
+                  }
+                });
+
+                // 先推送初始消息
+                const aiMessage2 = reactive({
+                  sender: "ai",
+                  class: "content3",
+                  type: "content3",
+                  content: "",
+                  isTyping: true,
+                  error: apiStatus.three.error ? "3" : "",
+                  isEnd: "2",
+                });
+                // chatStore.messages.push(aiMessage2);
+
+                // let index2 = 0;
+                // const typingInterval2 = setInterval(() => {
+                //   if (index2 < ac2.length) {
+                //     aiMessage2.content += ac2.charAt(index2);
+                //     index2++;
+                //   } else {
+                //     clearInterval(typingInterval2);
+                //     aiMessage2.isTyping = false;
+                //   }
+                // }, 50); // 调整速度为50ms/字符
+                addTypingTask(aiMessage2, ["", ac2], 130);
+
+                // chatStore.messages.push({
+                //   sender: "ai",
+                //   class: "content3",
+                //   type: "content3",
+                //   content: ac2,
+                // });
+              } else {
+                console.log("1111111111111111111");
+                if (
+                  apiStatus.one.isEnd &&
+                  apiStatus.two.error &&
+                  !apiStatus.two.isError
+                ) {
+                  apiStatus.two.isError = true;
+                  chatStore.messages.push({
+                    class: "ing",
+                    type: "ing",
+                    flag: false,
+                    content: "系统正在为您努力加载中，请稍后再试",
+                  });
+                  chatStore.isLoading = false;
+                  chatStore.chatInput = false;
+                  emit("enableInput");
+                }
+              }
+            }
+
+            // 检查ThreeAPI（需要TwoAPI已执行）
+            if (
+              apiStatus.two.executed &&
+              apiStatus.three.completed &&
+              !apiStatus.three.executed
+            ) {
+              if (apiStatus.three.result) {
+                apiStatus.three.executed = true;
+                console.log("执行ThreeAPI代码:", apiStatus.three.result);
+
+                // 将第三个音频添加到播放队列（确保顺序：API3）
+                if (audioPreloadStatus.three.url) {
+                  chatStore.messages[chatStore.inputUserIndex].audioArray.push(
+                    audioPreloadStatus.three.url
+                  );
+                  if (chatStore.currentUserIndex == chatStore.inputUserIndex) {
+                    addToAudioQueue(
+                      audioPreloadStatus.three.url,
+                      "API3-第三个"
+                    );
+                  } else {
+                    chatStore.messages[
+                      chatStore.inputUserIndex
+                    ].audioStatus = false;
+                  }
+                  console.log(
+                    "音频队列：添加API3音频，当前队列长度:",
+                    audioQueue.value.length
+                  );
+                }
+
+                // 在这里添加ThreeAPI成功后需要执行的代码
+                // 添加标题3-2
+                addTypingTask(
+                  {
+                    sender: "ai",
+                    class: "title3",
+                    type: "title3",
+                    content: title2,
+                  },
+                  "",
+                  50
+                );
+                // chatStore.messages.push({
+                //   sender: "ai",
+                //   class: "title3",
+                //   type: "title3",
+                //   content: title2,
+                // });
+                // 添加内容框2
+                // const pc3 = marked(result23.data.zhuli1+'\n'+result23.data.zhuli2+'\n'+result23.data.zhuli3);
+                // const ac3 = pc3.replace(
+                //   katexRegex,
+                //   (match, formula) => {
+                //     try {
+                //       return katex.renderToString(formula, { throwOnError: false });
+                //     } catch (error) {
+                //       console.error("KaTeX 渲染错误:", error);
+                //       return match;
+                //     }
+                //   }
+                // );
+                const ac31 = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【主力行为】</p><p>`;
+                const ac32 = `${result23.data.zhuli1}</p><p>${result23.data.zhuli2}</p><p>${result23.data.zhuli3}</p>`;
+                const ac3 = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【主力行为】</p><p>${result23.data.zhuli1}</p><p>${result23.data.zhuli2}</p><p>${result23.data.zhuli3}</p>`;
+
+                // 先推送初始消息
+                const aiMessage3 = reactive({
+                  sender: "ai",
+                  class: "content3",
+                  type: "content3",
+                  content: "",
+                  isTyping: true,
+                });
+                // chatStore.messages.push(aiMessage3);
+
+                // let index3 = 0;
+                // const typingInterval3 = setInterval(() => {
+                //   if (index3 < ac3.length) {
+                //     aiMessage3.content += ac3.charAt(index3);
+                //     index3++;
+                //   } else {
+                //     clearInterval(typingInterval3);
+                //     aiMessage3.isTyping = false;
+
+                //   }
+                // }, 50); // 调整速度为50ms/字符
+                addTypingTask(aiMessage3, [ac31, ac32], 200);
+
+                // chatStore.messages.push({
+                //   sender: "ai",
+                //   class: "content3",
+                //   type: "content3",
+                //   content: ac3,
+                // });
+                // 添加标题3-3
+                addTypingTask(
+                  {
+                    sender: "ai",
+                    class: "title3",
+                    type: "title3",
+                    content: title3,
+                  },
+                  "",
+                  50
+                );
+                // chatStore.messages.push({
+                //   sender: "ai",
+                //   class: "title3",
+                //   type: "title3",
+                //   content: title3,
+                // });
+                // 添加内容框3
+                const arr = result23.data.kongjian.split("，");
+                const kongjian = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【空间维度】</p><p style="display:flex;justify-content:center;">${arr[0]},${arr[1]}</p><p style="display:flex;justify-content:center;">${arr[2]},${arr[3]}</p>`;
+                const shijian = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【时间维度】</p><p style="display:flex;justify-content:center;">${result23.data.shijian}</p>`;
+                const nengliang = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【能量维度】</p><p>${result23.data.nengliang}</p>`;
+                const ac4 = kongjian + shijian + nengliang;
+
+                const ac41 = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【空间维度】</p><p style="display:flex;justify-content:center;">`;
+                const ac42 = `${arr[0]},${arr[1]}`;
+                const ac43 = `</p><p style="display:flex;justify-content:center;">`;
+                const ac44 = `${arr[2]},${arr[3]}</p>`;
+                const ac45 = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【时间维度】</p><p style="display:flex;justify-content:center;">`;
+                const ac46 = `${result23.data.shijian}</p>`;
+                const ac47 = `<p style="margin:0;color:#FADC0C;font-weight:bold;display:flex;justify-content:center;font-size:22px">【能量维度】</p><p style="display:flex;justify-content:center;">`;
+                const ac48 = `${result23.data.nengliang}</p>`;
+
+                // const pc4 = marked(
+                //   kongjian +
+                //     "\n" +
+                //     result23.data.shijian +
+                //     "\n" +
+                //     result23.data.nengliang
+                // );
+                // const ac4 = pc4.replace(katexRegex, (match, formula) => {
+                //   try {
+                //     return katex.renderToString(formula, { throwOnError: false });
+                //   } catch (error) {
+                //     console.error("KaTeX 渲染错误:", error);
+                //     return match;
+                //   }
+                // });
+
+                // 先推送初始消息
+                const aiMessage4 = reactive({
+                  sender: "ai",
+                  class: "content3",
+                  type: "content3",
+                  content: "",
+                  isTyping: true,
+                  error: apiStatus.four.error ? "4" : "",
+                  isEnd: "3",
+                });
+                // chatStore.messages.push(aiMessage4);
+
+                // let index4 = 0;
+                // const typingInterval4 = setInterval(() => {
+                //   if (index4 < ac4.length) {
+                //     aiMessage4.content += ac4.charAt(index4);
+                //     index4++;
+                //   } else {
+                //     clearInterval(typingInterval4);
+                //     aiMessage4.isTyping = false;
+
+                //   }
+                // }, 50); // 调整速度为50ms/字符
+                addTypingTask(
+                  aiMessage4,
+                  [ac41, ac42, ac43, ac44, ac45, ac46, ac47, ac48],
+                  200
+                );
+
+                // chatStore.messages.push({
+                //   sender: "ai",
+                //   class: "content3",
+                //   type: "content3",
+                //   content: ac4,
+                // });
+              } else {
+                if (
+                  apiStatus.two.isEnd &&
+                  apiStatus.three.error &&
+                  !apiStatus.three.isError
+                ) {
+                  apiStatus.three.isError = true;
+                  chatStore.messages.push({
+                    class: "ing",
+                    type: "ing",
+                    flag: false,
+                    content: "系统正在为您努力加载中，请稍后再试",
+                  });
+                  chatStore.isLoading = false;
+                  chatStore.chatInput = false;
+                  emit("enableInput");
+                }
+              }
+            }
+
+            // 检查FourAPI（需要ThreeAPI已执行）
+            if (
+              apiStatus.three.executed &&
+              apiStatus.four.completed &&
+              !apiStatus.four.executed
+            ) {
+              if (apiStatus.four.result) {
+                apiStatus.four.executed = true;
+                console.log("执行FourAPI代码:", apiStatus.four.result);
+
+                // 将第四个音频添加到播放队列（确保顺序：API4）
+                if (audioPreloadStatus.four.url) {
+                  chatStore.messages[chatStore.inputUserIndex].audioArray.push(
+                    audioPreloadStatus.four.url
+                  );
+                  if (chatStore.currentUserIndex == chatStore.inputUserIndex) {
+                    addToAudioQueue(audioPreloadStatus.four.url, "API4-第四个");
+                  } else {
+                    chatStore.messages[
+                      chatStore.inputUserIndex
+                    ].audioStatus = false;
+                  }
+                  console.log(
+                    "音频队列：添加API4音频，当前队列长度:",
+                    audioQueue.value.length
+                  );
+                }
+
+                // 在这里添加FourAPI成功后需要执行的代码
+                // 添加标题3-4
+                addTypingTask(
+                  {
+                    sender: "ai",
+                    class: "title3",
+                    type: "title3",
+                    content: title4,
+                  },
+                  "",
+                  50
+                );
+                // chatStore.messages.push({
+                //   sender: "ai",
+                //   class: "title3",
+                //   type: "title3",
+                //   content: title4,
+                // });
+                // 添加内容框4
+                const cftj = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【触发条件】</p><p>${result24.data.cftl}</p>`;
+                const gfzl = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【攻防指令】</p><p>${result24.data.gfzl}</p>`;
+                const ac5 = cftj + gfzl;
+                const ac51 = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【触发条件】</p><p>`;
+                const ac52 = `${result24.data.cftl}</p>`;
+                const ac53 = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【攻防指令】</p><p>`;
+                const ac54 = `${result24.data.gfzl}</p>`;
+                // const pc5 = marked(result24.data.cftl + "/n" + result24.data.gfzl);
+                // const ac5 = pc5.replace(katexRegex, (match, formula) => {
+                //   try {
+                //     return katex.renderToString(formula, { throwOnError: false });
+                //   } catch (error) {
+                //     console.error("KaTeX 渲染错误:", error);
+                //     return match;
+                //   }
+                // });
+
+                // 先推送初始消息
+                const aiMessage5 = reactive({
+                  sender: "ai",
+                  class: "content3",
+                  type: "content3",
+                  content: "",
+                  isTyping: true,
+                });
+                // chatStore.messages.push(aiMessage5);
+
+                // let index5 = 0;
+                // const typingInterval5 = setInterval(() => {
+                //   if (index5 < ac5.length) {
+                //     aiMessage5.content += ac5.charAt(index5);
+                //     index5++;
+                //   } else {
+                //     clearInterval(typingInterval5);
+                //     aiMessage5.isTyping = false;
+
+                //   }
+                // }, 50); // 调整速度为50ms/字符
+                addTypingTask(aiMessage5, [ac51, ac52, ac53, ac54], 240);
+
+                // chatStore.messages.push({
+                //   sender: "ai",
+                //   class: "content3",
+                //   type: "content3",
+                //   content: ac5,
+                // });
+
+                const ac6 = "该内容由AI生成,请注意甄别";
+                // 先推送初始消息
+                const aiMessage6 = reactive({
+                  sender: "ai",
+                  class: "mianze",
+                  type: "mianze",
+                  content: "",
+                  isTyping: true,
+                  end: true,
+                });
+                // chatStore.messages.push(aiMessage6);
+
+                // let index6 = 0;
+                // const typingInterval6 = setInterval(() => {
+                //   if (index6 < ac6.length) {
+                //     aiMessage6.content += ac6.charAt(index6);
+                //     index6++;
+                //   } else {
+                //     clearInterval(typingInterval6);
+                //     aiMessage6.isTyping = false;
+
+                //   }
+                // }, 50); // 调整速度为50ms/字符
+                addTypingTask(aiMessage6, ["", ac6], 210);
+                // chatStore.isLoading = false;
+                // chatStore.messages.push({
+                //   sender: "ai",
+                //   class: "mianze",
+                //   type: "mianze",
+                //   content: "内容由AI生成,请注意甄别",
+                // });
+              } else {
+                if (
+                  apiStatus.three.isEnd &&
+                  apiStatus.four.error &&
+                  !apiStatus.four.isError
+                ) {
+                  apiStatus.four.isError = true;
+                  chatStore.messages.push({
+                    class: "ing",
+                    type: "ing",
+                    flag: false,
+                    content: "系统正在为您努力加载中，请稍后再试",
+                  });
+                  chatStore.isLoading = false;
+                  chatStore.chatInput = false;
+                  emit("enableInput");
+                }
+              }
+            }
+
+            // 检查是否所有API都已完成并执行
+            if (
+              apiStatus.one.completed &&
+              apiStatus.two.completed &&
+              apiStatus.three.completed &&
+              apiStatus.four.completed &&
+              apiStatus.four.executed
+            ) {
+              console.log("所有API已完成，开始收集预加载的音频URL");
+              // 收集所有预加载的音频URL
+              const audioUrls = [];
+              console.log("预加载音频状态检查:");
+              console.log("audioPreloadStatus:", audioPreloadStatus);
+
+              if (audioPreloadStatus.one.url) {
+                console.log(
+                  "添加预加载音频URL one:",
+                  audioPreloadStatus.one.url
+                );
+                audioUrls.push(audioPreloadStatus.one.url);
+              }
+              if (audioPreloadStatus.two.url) {
+                console.log(
+                  "添加预加载音频URL two:",
+                  audioPreloadStatus.two.url
+                );
+                audioUrls.push(audioPreloadStatus.two.url);
+              }
+              if (audioPreloadStatus.three.url) {
+                console.log(
+                  "添加预加载音频URL three:",
+                  audioPreloadStatus.three.url
+                );
+                audioUrls.push(audioPreloadStatus.three.url);
+              }
+              if (audioPreloadStatus.four.url) {
+                console.log(
+                  "添加预加载音频URL four:",
+                  audioPreloadStatus.four.url
+                );
+                audioUrls.push(audioPreloadStatus.four.url);
+              }
+
+              console.log("收集到的预加载音频URLs:", audioUrls);
+              console.log("语音是否启用:", audioStore.isVoiceEnabled);
+
+              // 音频播放逻辑已移至各个接口的执行代码中
+              console.log("所有接口执行完成，音频已在各接口中单独播放");
+            }
+          };
+
+          const handleOneAPI = async () => {
+            try {
+              result21 = await dbqbSecondOneAPI(params2);
+              if (result21.code == 400) {
+                throw new Error("API返回错误码400，请求失败");
+              }
+              console.log("OneAPI成功返回:", result21);
+
+              apiStatus.one.completed = true;
+              apiStatus.one.result = result21;
+
+              // 预加载第一个接口的音频
+              if (result21?.data?.url) {
+                await preloadAudio(result21.data.url.trim(), "one");
+              } else {
+                audioPreloadStatus.one.loaded = true;
+              }
+
+              // 检查是否可以执行
+              checkAndExecuteInOrder();
+            } catch (error) {
+              console.error("OneAPI失败:", error);
+              apiStatus.one.completed = true;
+              apiStatus.one.error = error;
+              audioPreloadStatus.one.loaded = true; // 失败时也标记为已处理
+              // 即使失败也要检查后续执行
+              checkAndExecuteInOrder();
+            }
+          };
+
+          const handleTwoAPI = async () => {
+            try {
+              result22 = await dbqbSecondTwoAPI(params2);
+              if (result22.code == 400) {
+                throw new Error("API返回错误码400，请求失败");
+              }
+              console.log("TwoAPI成功返回:", result22);
+
+              apiStatus.two.completed = true;
+              apiStatus.two.result = result22;
+
+              // 预加载第二个接口的音频
+              if (result22?.data?.url) {
+                await preloadAudio(result22.data.url.trim(), "two");
+              } else {
+                audioPreloadStatus.two.loaded = true;
+              }
+
+              // 检查是否可以执行
+              checkAndExecuteInOrder();
+            } catch (error) {
+              console.error("TwoAPI失败:", error);
+              apiStatus.two.completed = true;
+              apiStatus.two.error = error;
+              audioPreloadStatus.two.loaded = true;
+              checkAndExecuteInOrder();
+            }
+          };
+
+          const handleThreeAPI = async () => {
+            try {
+              result23 = await dbqbSecondThreeAPI(params2);
+              if (result23.code == 400) {
+                throw new Error("API返回错误码400，请求失败");
+              }
+              // result23 = await dbqbSecondThreeAPI();
+
+              console.log("ThreeAPI成功返回:", result23);
+
+              apiStatus.three.completed = true;
+              apiStatus.three.result = result23;
+
+              // 预加载第三个接口的音频
+              if (result23?.data?.url) {
+                await preloadAudio(result23.data.url.trim(), "three");
+              } else {
+                audioPreloadStatus.three.loaded = true;
+              }
+
+              // 检查是否可以执行
+              checkAndExecuteInOrder();
+            } catch (error) {
+              console.error("ThreeAPI失败:", error);
+              apiStatus.three.completed = true;
+              apiStatus.three.error = error;
+              audioPreloadStatus.three.loaded = true;
+              checkAndExecuteInOrder();
+            }
+          };
+
+          const handleFourAPI = async () => {
+            try {
+              result24 = await dbqbSecondFourAPI(params2);
+              if (result24.code == 400) {
+                throw new Error("API返回错误码400，请求失败");
+              }
+              console.log("FourAPI成功返回:", result24);
+
+              apiStatus.four.completed = true;
+              apiStatus.four.result = result24;
+
+              // 预加载第四个接口的音频
+              if (result24?.data?.url) {
+                await preloadAudio(result24.data.url.trim(), "four");
+              } else {
+                audioPreloadStatus.four.loaded = true;
+              }
+
+              // 检查是否可以执行
+              checkAndExecuteInOrder();
+            } catch (error) {
+              console.error("FourAPI失败:", error);
+              apiStatus.four.completed = true;
+              apiStatus.four.error = error;
+              audioPreloadStatus.four.loaded = true;
+              checkAndExecuteInOrder();
+            }
+          };
+
+          if (isLiuSe && isAIGoldBull) {
+            handleOneAPI();
+            handleTwoAPI();
+            handleThreeAPI();
+            handleFourAPI();
+          } else {
+            chatStore.messages.pop();
+            chatStore.messages.push({
+              class: "ing",
+              type: "ing",
+              flag: false,
+              content: "数据缺失，请稍后重试",
+            });
+            chatStore.isLoading = false;
+            chatStore.chatInput = false;
+            chatStore.firstAPICall = false;
+            emit("enableInput");
+          }
+        } catch (e) {
+          console.error("请求失败:", e);
+          chatStore.firstAPICall = false;
+          hasValidData.value = false; // 请求失败时设置数据无效
+          // chatStore.messages.pop();
+          // chatStore.messages.push({
+          //   sender: "ai",
+          //   content: "AI思考失败，请稍后再试...  ",
+          // });
+          // chatStore.setLoading(false);
+        } finally {
+          // chatStore.setLoading(false);
+          await chatStore.getUserCount();
+        }
+      }
+    }
+  },
+  { deep: false }
+);
+
+// 点击历史记录
+watch(
+  () => chatStore.dbqbClickRecord,
+  (newValue, oldValue) => {
+    console.log("new", newValue);
+    if (!newValue || Object.keys(newValue).length === 0) {
+      return;
+    }
+
+    const clickRecord = ref(newValue);
+    console.log("dbqbClickRecord 发生变化:", clickRecord.value);
+
+    // 🔧 新增：完整的任务停止逻辑
+    try {
+      // 1. 停止所有音频相关任务
+      chatStore.currentUserIndex = null;
+      audioStore.stop(); // 暂停语音
+
+      // 🔧 新增：重置音频队列状态，确保新音频能够自动播放
+      audioQueue.value = [];
+      isPlayingAudio.value = false;
+      currentPlayIndex = 0;
+      isCallingPlayNext = false;
+
+      // 🔧 新增：重置音频预加载状态
+      audioPreloadStatus.one = { loaded: false, url: null };
+      audioPreloadStatus.two = { loaded: false, url: null };
+      audioPreloadStatus.three = { loaded: false, url: null };
+      audioPreloadStatus.four = { loaded: false, url: null };
+
+      // 🔧 新增：清理音频实例
+      if (audioStore.soundInstance) {
+        audioStore.soundInstance.stop();
+        audioStore.soundInstance.unload();
+        audioStore.soundInstance = null;
+      }
+      audioStore.nowSound = null;
+
+      // 2. 停止API调用和状态重置
+      // 🔧 新增：重置API状态
+      apiStatus.one = {
+        completed: false,
+        result: null,
+        error: null,
+        isError: false,
+        isEnd: false,
+      };
+      apiStatus.two = {
+        completed: false,
+        result: null,
+        error: null,
+        isError: false,
+        isEnd: false,
+      };
+      apiStatus.three = {
+        completed: false,
+        result: null,
+        error: null,
+        isError: false,
+        isEnd: false,
+      };
+      apiStatus.four = {
+        completed: false,
+        result: null,
+        error: null,
+        isError: false,
+        isEnd: false,
+      };
+
+      // 🔧 新增：重置数据有效性标志
+      hasValidData.value = false;
+
+      // 3. 停止打字机效果
+      typingQueue.value = [];
+      isTypingInProgress.value = false;
+
+      // 4. 重置加载状态
+      chatStore.isLoading = false;
+      chatStore.chatInput = false;
+      emit("enableInput");
+
+      // 在下一个事件循环中清空 dbqbClickRecord
+      setTimeout(() => {
+        chatStore.dbqbClickRecord = {};
+        console.log("dbqbClickRecord 已清空");
+      }, 0);
+    } catch (error) {
+      console.error("停止任务时发生错误:", error);
+    }
+
+    if (
+      !clickRecord.value.wokeFlowData.One ||
+      !clickRecord.value.wokeFlowData.Two ||
+      !clickRecord.value.wokeFlowData.Three ||
+      !clickRecord.value.wokeFlowData.Four
+    ) {
+      return;
+    }
+    try {
+      // 清空聊天框内容
+      chatStore.messages = [];
+
+      chatStore.messages.push({
+        sender: "user",
+        timestamp: clickRecord.value.createdTime,
+        content: clickRecord.value.keyword,
+        audioArray: [
+          clickRecord.value.wokeFlowData.One.url,
+          clickRecord.value.wokeFlowData.Two.url,
+          clickRecord.value.wokeFlowData.Three.url,
+          clickRecord.value.wokeFlowData.Four.url,
+        ],
+        audioStatus: false,
+      });
+
+      chatStore.messages.push({
+        sender: "ai",
+        class: "title1",
+        type: "title1",
+        content: clickRecord.value.stockName + "全景作战报告",
+        date: clickRecord.value.wokeFlowData.One.date,
+      });
+
+      const pc1 = marked(
+        clickRecord.value.wokeFlowData.One.name +
+          "\n" +
+          clickRecord.value.wokeFlowData.One.price +
+          "\n" +
+          clickRecord.value.wokeFlowData.One.date
+      );
+
+      chatStore.messages.push({
+        sender: "ai",
+        class: "content1",
+        type: "content1",
+        content: pc1,
+      });
+
+      const HomePage = clickRecord.value.stockData.HomePage;
+      if (HomePage) {
+        const LiuSeData = JSON.parse(JSON.stringify(toRaw(HomePage)));
+        const sz = fnGetData(LiuSeData);
+        if (sz) {
+          hasValidData.value = true;
+          console.log("hasValidData设置为:", hasValidData.value);
+        }
+        // 先推送K线图消息
+        const klineMessageId1 = `kline-${Date.now()}`;
+        console.log("生成K线消息ID:", klineMessageId1);
+
+        chatStore.messages.push({
+          sender: "ai",
+          class: "content1",
+          type: "content1",
+          kline: true,
+          chartData: sz,
+          messageId: klineMessageId1,
+          hasValidData: true,
+          klineType: 1,
+        });
+
+        // 在渲染完成后初始化图表
+        nextTick(() => {
+          console.log("nextTick开始 - 准备渲染图表");
+          console.log("消息列表:", chatStore.messages);
+
+          // 寻找最新添加的K线消息索引
+          let klineIndex = -1;
+          for (let i = 0; i < chatStore.messages.length; i++) {
+            if (chatStore.messages[i].messageId === klineMessageId1) {
+              klineIndex = i;
+              break;
+            }
+          }
+
+          console.log("找到的K线消息索引:", klineIndex);
+
+          if (klineIndex !== -1) {
+            const containerId = `kline-container-${klineIndex}`;
+            console.log("图表容器ID:", containerId);
+
+            // 确保DOM已经渲染完成
+            setTimeout(() => {
+              console.log("延时执行，确保DOM已渲染");
+              KlineCanvsEcharts(containerId);
+            }, 100); // 短暂延时确保DOM已渲染
+          } else {
+            console.warn("未找到K线消息");
+          }
+        });
+      }
+      const AIGoldBull = clickRecord.value.stockData.AIGoldBull;
+      // 度牛尺K线图
+      if (
+        AIGoldBull &&
+        AIGoldBull.DNC &&
+        AIGoldBull.FCX &&
+        AIGoldBull.JN &&
+        AIGoldBull.KLine20 &&
+        AIGoldBull.QSXH
+      ) {
+        const AIGoldBullData = JSON.parse(JSON.stringify(toRaw(AIGoldBull)));
+        const HomePageData = JSON.parse(JSON.stringify(toRaw(HomePage)));
+        console.log("处理 K 线数据 - 开始");
+        console.log("AIGoldBullData", AIGoldBullData);
+        console.log("HomePageData", HomePageData);
+
+        const Kline20 = {
+          name: HomePageData.StockInformation.Name,
+          Kline: AIGoldBullData,
+        };
+
+        // 打印K线数据结构
+        console.log("K线数据结构:", Kline20);
+        console.log("K线数据名称:", Kline20.name);
+        console.log("K线数据:", Kline20.Kline ? Kline20.Kline : null);
+
+        // 设置数据有效标志
+        hasValidData.value = true;
+        console.log("hasValidData设置为:", hasValidData.value);
+
+        // chatStore.messages.pop();
+
+        // 先推送K线图消息
+        const klineMessageId2 = `kline-${Date.now() + 1}`;
+        console.log("生成K线消息ID:", klineMessageId2);
+
+        chatStore.messages.push({
+          sender: "ai",
+          class: "content2",
+          type: "content2",
+          kline: true,
+          chartData: Kline20,
+          messageId: klineMessageId2,
+          hasValidData: true, // 添加hasValidData标志
+          klineType: 2,
+        });
+
+        // 在渲染完成后初始化图表
+        nextTick(() => {
+          console.log("nextTick开始 - 准备渲染图表");
+          console.log("消息列表:", chatStore.messages);
+
+          // 寻找最新添加的K线消息索引
+          let klineIndex = -1;
+          for (let i = 0; i < chatStore.messages.length; i++) {
+            if (chatStore.messages[i].messageId === klineMessageId2) {
+              klineIndex = i;
+              break;
+            }
+          }
+
+          console.log("找到的K线消息索引:", klineIndex);
+
+          if (klineIndex !== -1) {
+            const containerId = `kline-container-${klineIndex}`;
+            console.log("图表容器ID:", containerId);
+
+            // 确保DOM已经渲染完成
+            setTimeout(() => {
+              console.log("延时执行，确保DOM已渲染");
+              KlineCanvsEcharts(containerId);
+            }, 100); // 短暂延时确保DOM已渲染
+          } else {
+            console.warn("未找到K线消息");
+          }
+        });
+      }
+      chatStore.messages.push({
+        sender: "ai",
+        class: "title2",
+        type: "title2",
+        content: "",
+      });
+
+      const pc2 = marked(clickRecord.value.wokeFlowData.Two.hxjzpg);
+      // 先推送初始消息
+      chatStore.messages.push({
+        sender: "ai",
+        class: "content3",
+        type: "content3",
+        content: pc2,
+      });
+
+      chatStore.messages.push({
+        sender: "ai",
+        class: "title3",
+        type: "title3",
+        content: title2,
+      });
+
+      const ac3 = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【主力行为】</p><p>${clickRecord.value.wokeFlowData.Three.zhuli1}</p><p>${clickRecord.value.wokeFlowData.Three.zhuli2}</p><p>${clickRecord.value.wokeFlowData.Three.zhuli3}</p>`;
+
+      // 先推送初始消息
+      chatStore.messages.push({
+        sender: "ai",
+        class: "content3",
+        type: "content3",
+        content: ac3,
+        isTyping: true,
+      });
+
+      chatStore.messages.push({
+        sender: "ai",
+        class: "title3",
+        type: "title3",
+        content: title3,
+      });
+
+      const arr = clickRecord.value.wokeFlowData.Three.kongjian.split("，");
+      const kongjian = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【空间维度】</p><p style="display:flex;justify-content:center;">${arr[0]},${arr[1]}</p><p style="display:flex;justify-content:center;">${arr[2]},${arr[3]}</p>`;
+      const shijian = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【时间维度】</p><p style="display:flex;justify-content:center;">${clickRecord.value.wokeFlowData.Three.shijian}</p>`;
+      const nengliang = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【能量维度】</p><p style="display:flex;justify-content:center;">${clickRecord.value.wokeFlowData.Three.nengliang}</p>`;
+      const ac4 = kongjian + shijian + nengliang;
+
+      // 先推送初始消息
+      chatStore.messages.push({
+        sender: "ai",
+        class: "content3",
+        type: "content3",
+        content: ac4,
+      });
+
+      chatStore.messages.push({
+        sender: "ai",
+        class: "title3",
+        type: "title3",
+        content: title4,
+      });
+
+      const cftj = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【触发条件】</p><p>${clickRecord.value.wokeFlowData.Four.cftl}</p>`;
+      const gfzl = `<p style="margin:0;color:#FFD700;font-weight:bold;display:flex;justify-content:center;font-size:22px">【攻防指令】</p><p>${clickRecord.value.wokeFlowData.Four.gfzl}</p>`;
+      const ac5 = cftj + gfzl;
+
+      // 先推送初始消息
+      chatStore.messages.push({
+        sender: "ai",
+        class: "content3",
+        type: "content3",
+        content: ac5,
+      });
+
+      chatStore.messages.push({
+        sender: "ai",
+        class: "mianze",
+        type: "mianze",
+        content: "该内容由AI生成，请注意甄别",
+        end: true,
+      });
+    } catch (e) {
+      ElMessage.error("历史数据获取出错！");
+      console.error("e", e);
+    }
+  },
+  {
+    deep: true, // 深度监听对象内部属性的变化
+    immediate: true, // 立即执行一次回调
+  }
+);
+
+function KlineCanvsEcharts(containerId) {
+  function vwToPx(vw) {
+    console.log((window.innerWidth * vw) / 100, "vwToPx");
+    return (window.innerWidth * vw) / 100;
+  }
+
+  // console.log("KLine渲染: 开始处理数据, 容器ID:", containerId);
+
+  // 从 chatStore 中获取数据
+  const messages = chatStore.messages;
+  // console.log("KLine渲染: 获取到的消息:", messages);
+  let klineMessageIndex = -1;
+  let klineData = null;
+
+  // 查找最近的 K线 消息
+  // for (let i = messages.length - 1; i >= 0; i--) {
+  //   console.log('KLine渲染: 检查消息:', messages[i]);
+  //   if (messages[i].type === 'kline' && messages[i].chartData) {
+  //     klineMessageIndex = i;
+  //     klineData = messages[i].chartData;
+  //     console.log('KLine渲染: 找到K线消息索引:', klineMessageIndex);
+  //     console.log('KLine渲染: 找到K线数据:', klineData);
+  //     break;
+  //   }
+  // }
+  klineMessageIndex = containerId.split("-")[2];
+  // console.log("KLine渲染: 找到K线消息索引:", klineMessageIndex);
+  if (
+    messages[klineMessageIndex].kline &&
+    messages[klineMessageIndex].chartData
+  ) {
+    klineData = messages[klineMessageIndex].chartData;
+  }
+
+  var KlineOption = {};
+
+  // 检测设备类型
+  const isMobile = window.innerWidth < 768;
+  const isTablet = window.innerWidth >= 768 && window.innerWidth < 1024;
+  console.log(
+    "KLine渲染: 设备类型",
+    isMobile ? "移动设备" : isTablet ? "平板设备" : "桌面设备"
+  );
+
+  if (messages[klineMessageIndex].klineType == 1) {
+    if (!klineData) {
+      // console.warn("六色罗盘渲染: 数据无效 - 在chatStore中找不到有效的K线数据");
+      return;
+    }
+
+    // 获取容器元素
+    const container = document.getElementById(containerId);
+    if (!container) {
+      // console.error("六色罗盘渲染: 找不到容器元素:", containerId);
+      return;
+    }
+
+    // 创建图表实例
+    // console.log("六色罗盘渲染: 创建图表实例");
+
+    try {
+      // 如果已有实例，先销毁
+      if (chartInstancesMap[containerId]) {
+        // console.log("六色罗盘渲染: 销毁已有图表实例");
+        chartInstancesMap[containerId].dispose();
+        delete chartInstancesMap[containerId];
+      }
+
+      // 使用普通变量存储实例
+      chartInstancesMap[containerId] = echarts.init(container);
+      // console.log("六色罗盘渲染: 图表实例创建成功");
+    } catch (error) {
+      // console.error("六色罗盘渲染: 图表实例创建失败:", error);
+      return;
+    }
+
+    const name = ref("六色罗盘");
+    const size = ref(16);
+    // PC版字体大小
+    if (window.innerWidth > 768) {
+      size.value = 25;
+    }
+
+    KlineOption = {
+      tooltip: {
+        show: !1,
+      },
+      series: [
+        {
+          name: "\u4eea\u8868\u76d8",
+          type: "gauge",
+          center: ["50%", "50%"],
+          radius: window.innerWidth > 768 ? "90%" : "70%",
+          startAngle: 140,
+          endAngle: -140,
+          min: 0,
+          max: 6,
+          precision: 0,
+          splitNumber: 30, // 分成30份
+          axisLine: {
+            show: !0,
+            lineStyle: {
+              color: [
+                [0.17, "#FC4407"],
+                [0.33, "#FDC404"],
+                [0.5, "#2D8FFD"],
+                [0.67, "#87CCE7"],
+                [0.83, "#C1F478"],
+                [1, "#8FEB8D"],
+              ],
+              width: 20,
+            },
+          },
+          axisTick: {
+            show: !0,
+            splitNumber: 9,
+            length: 8,
+            lineStyle: {
+              color: "#eee",
+              width: 1,
+              type: "solid",
+            },
+          },
+          axisLabel: {
+            show: true,
+            formatter: function (v) {},
+            textStyle: {
+              color: "auto",
+            },
+          },
+          // 中途切割
+          splitLine: {
+            show: !0,
+            length: 20,
+            lineStyle: {
+              color: "#eee",
+              width: 2,
+              type: "solid",
+            },
+          },
+          pointer: {
+            length: "80%",
+            width: 8,
+            color: "auto",
+          },
+          title: {
+            show: !0,
+            offsetCenter: ["-65%", -10],
+            textStyle: {
+              color: "#333",
+              fontSize: 15,
+            },
+          },
+          detail: {
+            show: !0,
+            backgroundColor: "rgba(0,0,0,0)",
+            borderWidth: 0,
+            borderColor: "#ccc",
+            width: 100,
+            height: 40,
+            offsetCenter: ["-90%", 0], // name位置
+            formatter: function () {
+              return name.value;
+            },
+            textStyle: {
+              color: "auto",
+              fontSize: size.value, // 字体尺寸
+            },
+          },
+          data: [{ value: klineData }],
+        },
+      ],
+    };
+  } else if (messages[klineMessageIndex].klineType == 2) {
+    if (!klineData || !klineData.Kline) {
+      // console.warn("KLine渲染: 数据无效 - 在chatStore中找不到有效的K线数据");
+      return;
+    }
+
+    // 获取容器元素
+    const container = document.getElementById(containerId);
+    if (!container) {
+      // console.error("KLine渲染: 找不到容器元素:", containerId);
+      return;
+    }
+
+    // 创建图表实例
+    // console.log("KLine渲染: 创建图表实例");
+    try {
+      // 如果已有实例，先销毁
+      if (chartInstancesMap[containerId]) {
+        // console.log("KLine渲染: 销毁已有图表实例");
+        chartInstancesMap[containerId].dispose();
+        delete chartInstancesMap[containerId];
+      }
+
+      // 使用普通变量存储实例
+      chartInstancesMap[containerId] = echarts.init(container);
+      // console.log("KLine渲染: 图表实例创建成功");
+    } catch (error) {
+      // console.error("KLine渲染: 图表实例创建失败:", error);
+      return;
+    }
+
+    const data = klineData.Kline;
+    // console.log("KLine渲染: Kline数据", data);
+
+    // 切割数据方法
+    const splitData = (a) => {
+      // console.log("KLine渲染: 开始数据切割");
+      const categoryData = [];
+      let values = [];
+      for (let i = 0; i < a.length; i++) {
+        categoryData.push(a[i][0]);
+        values.push([a[i][1], a[i][2], a[i][3], a[i][4]]);
+      }
+      // console.log("KLine渲染: 日期数据点数量", categoryData.length);
+      // console.log("KLine渲染: 值数据点数量", values.length);
+      return { categoryData, values };
+    };
+
+    // 给配置项
+    // console.log("KLine渲染: 开始配置图表选项");
+
+    const arr1 = [];
+    const arr2 = [];
+    const arr3 = [];
+    const arr4 = [];
+    const changeColorKline = (QSXH, KLine20) => {
+      if (QSXH) {
+        QSXH.map((item) => {
+          KLine20.map((kline_item) => {
+            if (item[1] == 1 && item[0] == kline_item[0]) {
+              arr1.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+            }
+            if (item[1] == 2 && item[0] == kline_item[0]) {
+              arr2.push(kline_item);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+            }
+            if (item[1] == 3 && item[0] == kline_item[0]) {
+              arr3.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr4.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+            }
+            if (item[1] == 4 && item[0] == kline_item[0]) {
+              arr4.push(kline_item);
+              arr2.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr3.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+              arr1.push([
+                kline_item[0],
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+                null,
+              ]);
+            }
+          });
+        });
+      }
+    };
+    console.log(arr1, arr2, arr3, arr4);
+    changeColorKline(data.QSXH, data.KLine20);
+    var dealData = splitData(data.KLine20);
+    var dealData1 = splitData(arr1);
+    var dealData2 = splitData(arr2);
+    var dealData3 = splitData(arr3);
+    var dealData4 = splitData(arr4);
+    var dealGnBullData = data.JN;
+    function processMAData(data) {
+      let processedData = [];
+      data.forEach((item, idx) => {
+        processedData.push({
+          date: item[0],
+          value: item[1],
+          type: item[2],
+        });
+      });
+      // 当某一种type只存在一天,设置另一种type透明
+      let singleTypeRed = [{ min: 0, max: 0, color: "#000" }];
+      let singleTypeYellow = [{ min: 0, max: 0, color: "#000" }];
+      let singleTypeGreen = [{ min: 0, max: 0, color: "#000" }];
+      for (let i = 1; i < processedData.length; i++) {
+        if (processedData[i].type !== processedData[i - 1].type) {
+          if (
+            i == processedData.length - 1 ||
+            (processedData[i].type !== processedData[i + 1].type &&
+              processedData[i - 1].type === processedData[i + 1].type)
+          ) {
+            if (processedData[i - 1].type === 0) {
+              singleTypeGreen.push({
+                min: i - 1,
+                max: i,
+                color: "rgba(0,0,0,0)",
+              });
+            } else if (processedData[i - 1].type === 1) {
+              singleTypeRed.push({
+                min: i - 1,
+                max: i,
+                color: "rgba(0,0,0,0)",
+              });
+            } else if (processedData[i - 1].type === 2) {
+              singleTypeYellow.push({
+                min: i - 1,
+                max: i,
+                color: "rgba(0,0,0,0)",
+              });
+            }
+          }
+        }
+        if (processedData[i].type !== processedData[i - 1].type) {
+          if (processedData[i].type == 0) {
+            processedData[i - 1].isTransitionGreen = 1;
+          } else if (processedData[i].type == 1) {
+            processedData[i - 1].isTransitionRed = 1;
+          } else if (processedData[i].type == 2) {
+            processedData[i - 1].isTransitionYellow = 1;
+          }
+          // // 创建过渡点，使用前一个点的值
+          // processedData[i - 1].isTransition = true
+        }
+      }
+      let greenData = [];
+      let redData = [];
+      let yellowData = [];
+
+      processedData.forEach((item, idx) => {
+        const point = [item.date, item.value];
+
+        if (item.type === 0) {
+          greenData.push(point);
+          redData.push([item.date, "-"]);
+          yellowData.push([item.date, "-"]);
+
+          // if (item.isTransition) {
+          // 	redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
+          // 	yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
+          // }
+          if (item.isTransitionGreen) {
+            greenData[greenData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
+          } else if (item.isTransitionRed) {
+            redData[redData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
+          } else if (item.isTransitionYellow) {
+            yellowData[yellowData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
+          }
+        } else if (item.type === 1) {
+          redData.push(point);
+          greenData.push([item.date, "-"]);
+          yellowData.push([item.date, "-"]);
+
+          // if (item.isTransition) {
+          // 	greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
+          // 	yellowData[yellowData.length - 1] = [processedData[idx].date, processedData[idx].value]
+          // }
+          if (item.isTransitionGreen) {
+            greenData[greenData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
+          } else if (item.isTransitionRed) {
+            redData[redData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
+          } else if (item.isTransitionYellow) {
+            yellowData[yellowData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
+          }
+        } else if (item.type === 2) {
+          redData.push([item.date, "-"]);
+          greenData.push([item.date, "-"]);
+          yellowData.push(point);
+
+          // if (item.isTransition) {
+          // 	greenData[greenData.length - 1] = [processedData[idx].date, processedData[idx].value]
+          // 	redData[redData.length - 1] = [processedData[idx].date, processedData[idx].value]
+          // }
+          if (item.isTransitionGreen) {
+            greenData[greenData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
+          } else if (item.isTransitionRed) {
+            redData[redData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
+          } else if (item.isTransitionYellow) {
+            yellowData[yellowData.length - 1] = [
+              processedData[idx].date,
+              processedData[idx].value,
+            ];
+          }
+        }
+      });
+
+      return {
+        greenData: greenData,
+        redData: redData,
+        yellowData: yellowData,
+        singleTypeGreen: singleTypeGreen,
+        singleTypeRed: singleTypeRed,
+        singleTypeYellow: singleTypeYellow,
+      };
+    }
+    const maData = processMAData(data.FCX);
+    const maDuchiData = processMAData(data.DNC);
+    if (data.FCX[0][1] == "-1") {
+      maData.greenData = [];
+      maData.redData = [];
+      maData.yellowData = [];
+    }
+    const processBarData = (data) => {
+      const barData = [];
+      const markPointData = [];
+      data.forEach((item) => {
+        let color;
+        switch (item[4]) {
+          case 1:
+            color = "#13E113";
+            break;
+          case 2:
+            color = "#FF0E00";
+            break;
+          case 3:
+            color = "#0000FE";
+            break;
+          case 4:
+            color = "#1397FF";
+            break;
+        }
+        barData.push({
+          value: item[5],
+          itemStyle: {
+            normal: {
+              color: color,
+            },
+          },
+        });
+
+        if (item[1] === 1) {
+          markPointData.push({
+            coord: [item[0], item[5]],
+            symbol:
+              "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb101000d5si3v3hr7w2vg0h43z1u.png",
+            symbolSize: [30, 30],
+            label: {
+              normal: {
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+          });
+        }
+
+        if (item[2] === 1) {
+          markPointData.push({
+            coord: [item[0], item[5] / 2],
+            symbol:
+              "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujaz01000d5si016bxdf6vh0377d2h.png",
+            symbolSize: [30, 30],
+            label: {
+              normal: {
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+          });
+        }
+
+        if (item[3] === 1) {
+          markPointData.push({
+            coord: [item[0], 0],
+            symbol:
+              "image://https://d31zlh4on95l9h.cloudfront.net/images/5iujb001000d5shzls0tmd4vs0e5tdrw.png",
+            symbolSize: [30, 30],
+            label: {
+              normal: {
+                color: "rgba(0, 0, 0, 0)",
+              },
+            },
+          });
+        }
+      });
+      return { barData, markPointData };
+    };
+    const { barData, markPointData } = processBarData(dealGnBullData);
+    KlineOption = {
+      legend: [
+        {
+          textStyle: {
+            color: "black",
+            fontSize: window.innerWidth > 768 ? 12 : 9,
+          },
+          width: "100%",
+          top: window.innerWidth > 768 ? "5%" : "4%",
+          left: "center",
+          itemGap: window.innerWidth > 768 ? 20 : 10,
+          itemWidth: 10,
+          itemHeight: 10,
+          data: [
+            {
+              name: "进攻K线",
+              itemStyle: {
+                color: "rgb(255,0,0)",
+              },
+            },
+            {
+              name: "防守K线",
+              itemStyle: {
+                color: "red",
+              },
+            },
+            {
+              name: "推进K线",
+              itemStyle: {
+                color: "orange",
+              },
+            },
+            {
+              name: "撤退K线",
+              itemStyle: {
+                color: "rgb(84,252,252)",
+              },
+            },
+          ],
+        },
+        {
+          textStyle: {
+            color: "black",
+            fontSize: window.innerWidth > 768 ? 12 : 9,
+          },
+          orient: "horizontal",
+          top: window.innerWidth > 768 ? "8%" : "7%",
+          width: "100%",
+          left: "center",
+          itemGap: 15,
+          data: [
+            {
+              name: "{green|━}{red|━} " + "牵牛绳",
+              icon: "none",
+              textStyle: {
+                rich: {
+                  green: {
+                    color: "green",
+                    fontSize: window.innerWidth > 768 ? 12 : 9,
+                  },
+                  red: {
+                    color: "red",
+                    fontSize: window.innerWidth > 768 ? 12 : 9,
+                  },
+                },
+              },
+            },
+            {
+              name: "龙线",
+            },
+            {
+              name: "虫线",
+            },
+          ],
+        },
+        {
+          textStyle: {
+            color: "black",
+            fontSize: window.innerWidth > 768 ? 12 : 9,
+          },
+          orient: "horizontal",
+          top: window.innerWidth > 768 ? "62%" : "60%",
+          width: "100%",
+          left: "center",
+          itemGap: 15,
+          data: [
+            {
+              name: "{green|━}{red|━} " + "度牛尺",
+              icon: "none",
+              textStyle: {
+                rich: {
+                  green: {
+                    color: "green",
+                    fontSize: window.innerWidth > 768 ? 12 : 9,
+                  },
+                  red: {
+                    color: "red",
+                    fontSize: window.innerWidth > 768 ? 12 : 9,
+                  },
+                },
+              },
+            },
+          ],
+        },
+      ],
+      tooltip: {
+        formatter: function (a, b, d) {
+          if (a[0].seriesIndex == 0) {
+            const KlineTag = ref([]);
+            const AIBullTag = ref([]);
+            KlineTag.value = a.find((item) => item.data[1])?.data || [];
+            AIBullTag.value =
+              a.slice(4).find((item) => item.data[1] !== "-")?.data || [];
+            // console.log(AIBullTag.value)
+
+            return (
+              a[0].name +
+              "<br/>" +
+              "开盘价" +
+              "：" +
+              KlineTag.value[1] +
+              "<br/>" +
+              "收盘价" +
+              "：" +
+              KlineTag.value[2] +
+              "<br/>" +
+              "最低价" +
+              "：" +
+              KlineTag.value[3] +
+              "<br/>" +
+              "最高价" +
+              "：" +
+              KlineTag.value[4] +
+              "<br/>" +
+              "牵牛绳" +
+              "：" +
+              AIBullTag.value[1]
+            );
+          }
+          if (a[0].seriesIndex == 4) {
+            let formattedVolume;
+            if (a[0].data.value >= 10000) {
+              formattedVolume = (a[0].data.value / 10000).toFixed(2) + "w";
+            } else {
+              formattedVolume = a[0].data.value;
+            }
+            return a[0].name + "<br/>" + "成交量" + "：" + formattedVolume;
+          }
+          if ([10, 11, 12].includes(a[0].seriesIndex)) {
+            const duchiData = a.find(
+              (item) => item.data && item.data[1] !== "-"
+            );
+            return duchiData
+              ? a[0].axisValue + "<br/>" + "度牛尺" + "：" + duchiData.data[1]
+              : null;
+          }
+        },
+        trigger: "axis",
+        axisPointer: {
+          type: "cross",
+        },
+        backgroundColor: "rgba(119, 120, 125, 0.6)",
+        borderWidth: 1,
+        borderColor: "#77787D",
+        padding: 10,
+        textStyle: {
+          color: "#fff",
+        },
+      },
+      axisPointer: {
+        link: [
+          {
+            xAxisIndex: "all",
+          },
+        ],
+        label: {
+          backgroundColor: "#77787D",
+        },
+      },
+      toolbox: {
+        show: false,
+      },
+      grid: [
+        {
+          top: window.innerWidth > 768 ? "12%" : "10%",
+          left:
+            window.innerWidth > 1024
+              ? "14%"
+              : window.innerWidth > 768
+              ? "18%"
+              : window.innerWidth > 375
+              ? "20%"
+              : "22%",
+          right:
+            window.innerWidth > 1024
+              ? "9%"
+              : window.innerWidth > 768
+              ? "12%"
+              : "14%",
+
+          height: window.innerWidth > 768 ? "27%" : "29%",
+          containLabel: false,
+        },
+        {
+          top: window.innerWidth > 768 ? "42%" : "42%",
+          left:
+            window.innerWidth > 1024
+              ? "14%"
+              : window.innerWidth > 768
+              ? "18%"
+              : window.innerWidth > 375
+              ? "20%"
+              : "22%",
+          right:
+            window.innerWidth > 1024
+              ? "9%"
+              : window.innerWidth > 768
+              ? "12%"
+              : "14%",
+
+          height: window.innerWidth > 768 ? "20%" : "18%",
+          containLabel: false,
+        },
+        {
+          top: window.innerWidth > 768 ? "66%" : "64%",
+          left:
+            window.innerWidth > 1024
+              ? "14%"
+              : window.innerWidth > 768
+              ? "18%"
+              : window.innerWidth > 375
+              ? "20%"
+              : "22%",
+          right:
+            window.innerWidth > 1024
+              ? "9%"
+              : window.innerWidth > 768
+              ? "12%"
+              : "14%",
+
+          height: window.innerWidth > 768 ? "20%" : "22%",
+          containLabel: false,
+        },
+      ],
+      xAxis: [
+        {
+          type: "category",
+          data: dealData.categoryData,
+          boundaryGap: true,
+          axisLine: { onZero: false },
+          splitLine: { show: false },
+          min: "dataMin",
+          max: "dataMax",
+          axisPointer: {
+            z: 100,
+          },
+          axisLine: {
+            lineStyle: {
+              color: "black",
+            },
+          }, //
+          axisLabel: { show: false },
+          axisTick: { show: false },
+        },
+        {
+          type: "category",
+          gridIndex: 1,
+          data: dealData.categoryData,
+          boundaryGap: true,
+          axisLine: { lineStyle: { color: "black" } },
+          axisLabel: {
+            show: false,
+            interval: "auto",
+          },
+        },
+        {
+          type: "category",
+          gridIndex: 2,
+          data: dealData.categoryData,
+          boundaryGap: true,
+          axisLine: { lineStyle: { color: "black" } },
+          axisLabel: {
+            show: true,
+            interval: "auto",
+            fontSize: window.innerWidth > 768 ? 12 : 9,
+          },
+        },
+      ],
+      yAxis: [
+        {
+          scale: true,
+          gridIndex: 0,
+          position: "left",
+          axisLabel: {
+            inside: false,
+            align: "right",
+            fontSize: window.innerWidth > 768 ? 15 : 10,
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              fontSize: "",
+              color: "black",
+            },
+          },
+          axisTick: { show: false },
+          splitLine: { show: false },
+        },
+        {
+          scale: true,
+          gridIndex: 1,
+          splitNumber: 4,
+          min: 0,
+          minInterval: 1,
+          axisLabel: {
+            show: true,
+            fontSize: window.innerWidth > 768 ? 15 : 10,
+            margin: 8,
+            formatter: (value) => {
+              if (value >= 1000000000) {
+                return (value / 1000000000).toFixed(1) + "B";
+              } else if (value >= 1000000) {
+                return (value / 1000000).toFixed(1) + "M";
+              } else if (value >= 10000) {
+                return (value / 10000).toFixed(1) + "W";
+              }
+              return value.toFixed(0);
+            },
+          },
+          axisLine: { show: true, lineStyle: { color: "black" } },
+          axisTick: { show: false },
+          splitLine: { show: true, lineStyle: { type: "dashed" } },
+          boundaryGap: ["20%", "20%"],
+        },
+        {
+          type: "value",
+          gridIndex: 2,
+          min: 0,
+          max: 100,
+          axisLabel: {
+            show: true,
+            fontSize: window.innerWidth > 768 ? 15 : 10,
+            formatter: function (value) {
+              var customValues = [0, 20, 50, 80, 100];
+              return customValues.indexOf(value) > -1 ? value : "";
+            },
+          },
+          axisLine: {
+            show: true,
+            lineStyle: {
+              color: "black",
+            },
+          },
+          axisTick: {
+            show: false,
+          },
+          splitNumber: 10,
+          splitLine: {
+            show: true,
+            lineStyle: {
+              type: "dashed",
+              color: "#fff",
+              width: 1,
+            },
+            interval: function (index, value) {
+              return [20, 50, 80, 100].indexOf(value) > -1;
+            },
+          },
+        },
+      ],
+      dataZoom: [
+        {
+          type: "inside",
+          xAxisIndex: [0, 1, 2],
+          start: 55,
+          end: 100,
+        },
+        {
+          show: true,
+          xAxisIndex: [0, 1, 2],
+          type: "slider",
+          top: window.innerWidth > 768 ? "90%" : "91%",
+          // left: window.innerWidth > 768 ? "10%" : "8%",
+          // right: window.innerWidth > 768 ? "4%" : "8%",
+          height: 20,
+          start: 98,
+          end: 100,
+          textStyle: {
+            fontSize: window.innerWidth > 768 ? 12 : 9,
+          },
+        },
+      ],
+      visualMap: [
+        {
+          type: "piecewise",
+          show: false,
+          pieces: maData.singleTypeGreen,
+          outOfRange: {
+            color: "green",
+          },
+          dimension: 0,
+          seriesIndex: 7,
+        },
+        {
+          type: "piecewise",
+          show: false,
+          pieces: maData.singleTypeRed,
+          outOfRange: {
+            color: "red",
+          },
+          dimension: 0,
+          seriesIndex: 8,
+        },
+        {
+          type: "piecewise",
+          show: false,
+          pieces: maData.singleTypeYellow,
+          outOfRange: {
+            color: "yellow",
+          },
+          dimension: 0,
+          seriesIndex: 9,
+        },
+      ],
+      series: [
+        {
+          name: "进攻K线",
+          type: "candlestick",
+          barWidth: "50%",
+          data: dealData1.values,
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          itemStyle: {
+            normal: {
+              color: "rgb(255,0,0)",
+              color0: "rgb(255,0,0)",
+              borderColor: "rgb(255,0,0)",
+              borderColor0: "rgb(255,0,0)",
+            },
+          },
+          gridIndex: 0,
+        },
+        //
+        {
+          name: "推进K线",
+          type: "candlestick",
+          barWidth: "50%",
+          data: dealData2.values,
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          itemStyle: {
+            normal: {
+              color: "rgb(0,0,252)",
+              color0: "rgb(0,0,252)",
+              borderColor: "rgb(0,0,252)",
+              borderColor0: "rgb(0,0,252)",
+            },
+          },
+          gridIndex: 0,
+        },
+        {
+          name: "防守K线",
+          type: "candlestick",
+          barWidth: "50%",
+          data: dealData3.values,
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          itemStyle: {
+            normal: {
+              color: "orange",
+              color0: "orange",
+              borderColor: "orange",
+              borderColor0: "orange",
+            },
+          },
+          gridIndex: 0,
+        },
+        {
+          name: "撤退K线",
+          type: "candlestick",
+          barWidth: "50%",
+          data: dealData4.values,
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          itemStyle: {
+            normal: {
+              color: "rgb(84,252,252)",
+              color0: "rgb(84,252,252)",
+              borderColor: "rgb(84,252,252)",
+              borderColor0: "rgb(84,252,252)",
+            },
+          },
+          gridIndex: 0,
+        },
+        {
+          name: "成交量",
+          type: "bar",
+          barWidth: "70%",
+          xAxisIndex: 1,
+          yAxisIndex: 1,
+          data: barData,
+          markPoint: {
+            data: markPointData,
+            label: {
+              show: false,
+            },
+          },
+        },
+        {
+          name: "{green|━}{red|━} " + "牵牛绳",
+          type: "line",
+          data: [],
+          smooth: true,
+          symbol: "none",
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          showSymbol: false,
+          lineStyle: {
+            opacity: 0,
+          },
+          itemStyle: {
+            normal: {
+              color: "green",
+            },
+          },
+          gridIndex: 0,
+        },
+        {
+          name: "{green|━}{red|━} " + "度牛尺",
+          type: "line",
+          data: [],
+          smooth: true,
+          symbol: "none",
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          showSymbol: false,
+          lineStyle: {
+            opacity: 0,
+          },
+          itemStyle: {
+            normal: {
+              color: "green",
+            },
+          },
+          gridIndex: 0,
+        },
+        {
+          name: "虫线",
+          type: "line",
+          data: maData.greenData,
+          smooth: true,
+          symbol: "none",
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          itemStyle: {
+            normal: {
+              color: "green",
+              lineStyle: {
+                width: 2,
+                type: "solid",
+              },
+            },
+          },
+          gridIndex: 0,
+        },
+        {
+          name: "龙线",
+          type: "line",
+          data: maData.redData,
+          smooth: true,
+          symbol: "none",
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          itemStyle: {
+            normal: {
+              color: "red",
+              lineStyle: {
+                width: 2,
+                type: "solid",
+              },
+            },
+          },
+          gridIndex: 0,
+        },
+        {
+          name: "黄色",
+          type: "line",
+          data: maData.yellowData,
+          smooth: true,
+          symbol: "none",
+          xAxisIndex: 0,
+          yAxisIndex: 0,
+          itemStyle: {
+            normal: {
+              color: "yellow",
+              lineStyle: {
+                width: 2,
+                type: "solid",
+              },
+            },
+          },
+          gridIndex: 0,
+        },
+        {
+          name: "背景区域",
+          type: "line",
+          data: [],
+          xAxisIndex: 2,
+          yAxisIndex: 2,
+          markArea: {
+            silent: true,
+            itemStyle: {
+              normal: {
+                opacity: 1,
+              },
+            },
+            label: {
+              normal: {
+                show: true,
+                position: "insideRight",
+                fontSize: window.innerWidth > 768 ? 16 : 12,
+                fontWeight: "bold",
+                color: "#13E113",
+                distance: 10,
+              },
+            },
+            data: [
+              [
+                {
+                  yAxis: 0,
+                  itemStyle: {
+                    normal: {
+                      color: "#CFFFCF",
+                    },
+                  },
+                  label: {
+                    normal: {
+                      formatter: "度牛区",
+                    },
+                  },
+                },
+                {
+                  yAxis: 20,
+                },
+              ],
+              [
+                {
+                  yAxis: 20,
+                  itemStyle: {
+                    normal: {
+                      color: "#A6FFFF",
+                    },
+                  },
+                },
+                {
+                  yAxis: 40,
+                },
+              ],
+              [
+                {
+                  yAxis: 40,
+                  itemStyle: {
+                    normal: {
+                      color: "#FFF686",
+                    },
+                  },
+                },
+                {
+                  yAxis: 60,
+                },
+              ],
+              [
+                {
+                  yAxis: 60,
+                  itemStyle: {
+                    normal: { color: "#FFD2B3" },
+                  },
+                },
+                {
+                  yAxis: 80,
+                },
+              ],
+              [
+                {
+                  yAxis: 80,
+                  itemStyle: {
+                    normal: { color: "#FFB8B8" },
+                  },
+                  label: {
+                    normal: {
+                      formatter: "度牛区",
+                      color: "#FF0000",
+                      position: "insideLeft",
+                      distance: 10,
+                    },
+                  },
+                },
+                {
+                  yAxis: 100,
+                },
+              ],
+            ],
+          },
+        },
+        {
+          name: "度牛尺",
+          type: "line",
+          data: maDuchiData.greenData,
+          symbol: "none",
+          xAxisIndex: 2,
+          yAxisIndex: 2,
+          itemStyle: {
+            normal: {
+              color: "green",
+              lineStyle: {
+                width: 2,
+                type: "solid",
+              },
+            },
+          },
+          gridIndex: 2,
+          markPoint: {
+            symbol: "rect",
+            symbolSize: (value, params) => {
+              const width = window.innerWidth;
+              const baseHeight = 22;
+              // if (width <= 375) {
+              //   return [2, 16];
+              // } else if (width <= 768) {
+              //   return [2, 22];
+              // }
+              return [2, baseHeight];
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              ...maDuchiData.greenData
+                .map((item) => {
+                  if (item[1] === 0) {
+                    return {
+                      coord: [item[0], 20],
+                      symbolOffset: [0, 10],
+                      itemStyle: {
+                        color: "#00ff00",
+                      },
+                    };
+                  }
+                })
+                .filter(Boolean),
+            ],
+          },
+        },
+        {
+          type: "line",
+          data: maDuchiData.redData,
+          // smooth: true,
+          symbol: "none",
+          xAxisIndex: 2,
+          yAxisIndex: 2,
+          itemStyle: {
+            normal: {
+              color: "red",
+              lineStyle: {
+                width: 2,
+                type: "solid",
+              },
+            },
+          },
+          gridIndex: 2,
+          markPoint: {
+            symbol: "rect",
+            symbolSize: (value, params) => {
+              const width = window.innerWidth;
+              const baseHeight = 22;
+              // if (width <= 375) {
+              //   return [2, 16];
+              // } else if (width <= 768) {
+              //   return [2, 24];
+              // }
+              return [2, baseHeight];
+            },
+            itemStyle: {
+              normal: {
+                label: {
+                  show: false,
+                },
+              },
+            },
+            data: [
+              ...maDuchiData.redData
+                .map((item) => {
+                  if (item[1] === 100) {
+                    return {
+                      coord: [item[0], 80],
+                      symbolOffset: [0, -10],
+                      itemStyle: {
+                        color: "#ff0000",
+                      },
+                    };
+                  }
+                })
+                .filter(Boolean),
+            ],
+          },
+        },
+        {
+          name: "辅助线",
+          type: "line",
+          data: [],
+          xAxisIndex: 2,
+          yAxisIndex: 2,
+          markLine: {
+            silent: true,
+            symbol: "none",
+            lineStyle: {
+              color: "#000000",
+              width: 3,
+              type: "solid",
+            },
+            data: [{ yAxis: 20 }],
+            label: {
+              normal: {
+                fontSize: window.innerWidth > 768 ? 12 : 9,
+              },
+            },
+          },
+        },
+        {
+          name: "辅助线",
+          type: "line",
+          data: [],
+          xAxisIndex: 2,
+          yAxisIndex: 2,
+          markLine: {
+            silent: true,
+            symbol: "none",
+            lineStyle: {
+              color: "#000000",
+              width: 3,
+              type: "solid",
+            },
+            data: [{ yAxis: 50 }],
+            label: {
+              normal: {
+                fontSize: window.innerWidth > 768 ? 12 : 9,
+              },
+            },
+          },
+        },
+        {
+          name: "辅助线",
+          type: "line",
+          data: [],
+          xAxisIndex: 2,
+          yAxisIndex: 2,
+          markLine: {
+            silent: true,
+            symbol: "none",
+            lineStyle: {
+              color: "#000000",
+              width: 3,
+              type: "solid",
+            },
+            data: [{ yAxis: 80 }],
+            label: {
+              normal: {
+                fontSize: window.innerWidth > 768 ? 12 : 9,
+              },
+            },
+          },
+        },
+        {
+          name: "辅助线",
+          type: "line",
+          data: [],
+          xAxisIndex: 2,
+          yAxisIndex: 2,
+          markLine: {
+            silent: true,
+            symbol: "none",
+            lineStyle: {
+              color: "#000000",
+              width: 3,
+
+              type: "solid",
+            },
+            data: [{ yAxis: 100 }],
+            label: {
+              normal: {
+                fontSize: window.innerWidth > 768 ? 12 : 9,
+              },
+            },
+          },
+        },
+      ],
+    };
+  }
+
+  // console.log("KLine渲染: 图表配置完成");
+
+  try {
+    // 应用配置
+    // console.log("KLine渲染: 开始设置图表选项");
+    chartInstancesMap[containerId].setOption(KlineOption);
+    // console.log("KLine渲染: 图表选项设置成功");
+
+    // 窗口大小变化时重新渲染图表
+    const resizeFunc = _.throttle(
+      function () {
+        console.log("窗口大小改变，调整图表大小");
+        if (
+          chartInstancesMap[containerId] &&
+          !chartInstancesMap[containerId].isDisposed()
+        ) {
+          // 如果设备类型发生变化，重新渲染
+          const newIsMobile = window.innerWidth < 768;
+          const newIsTablet =
+            window.innerWidth >= 768 && window.innerWidth < 1024;
+
+          if (newIsMobile !== isMobile || newIsTablet !== isTablet) {
+            console.log("设备类型变化，重新渲染图表");
+            KlineCanvsEcharts(containerId);
+            return;
+          }
+
+          chartInstancesMap[containerId].resize();
+        }
+      },
+      1000,
+      { trailing: false }
+    );
+
+    // 给resize事件绑定一个特定的函数名，便于后续移除
+    window[`resize_${containerId}`] = resizeFunc;
+
+    // 绑定resize事件
+    window.removeEventListener("resize", window[`resize_${containerId}`]);
+    window.addEventListener("resize", window[`resize_${containerId}`]);
+
+    // console.log("KLine渲染: 图表渲染完成");
+  } catch (error) {
+    // console.error("KLine渲染: 图表渲染出错", error);
+  }
+}
+
+watch(
+  () => audioStore.isVoiceEnabled,
+  (newVal) => {
+    // 添加状态锁定逻辑
+    if (newVal === audioStore.lastVoiceState) return;
+    audioStore.lastVoiceState = newVal;
+
+    if (newVal) {
+      console.log("开启语音播放");
+      // 添加重试机制
+      const tryPlay = () => {
+        if (!audioStore.ttsUrl) return; // 新增空值判断
+        if (audioStore.soundInstance?.playing()) return;
+        playAudio(audioStore.ttsUrl);
+        setTimeout(() => {
+          if (!audioStore.soundInstance?.playing()) {
+            Howler.unload();
+          }
+        }, 1000);
+      };
+      tryPlay();
+    } else {
+      console.log("关闭语音播放");
+      pauseAudio();
+    }
+  },
+  { immediate: true }
+);
+
+watch(
+  () => dataStore.activeTabIndex,
+  (newVal) => {
+    setTimeout(() => {
+      console.log("activeTabIndex变化:", newVal);
+      // 当标签页切换回来时，重新渲染所有图表
+      if (newVal === 0) {
+        console.log("切换到AI聊天页，重新渲染图表");
+        // 延迟执行以确保DOM已渲染
+
+        renderAllKlineCharts();
+      }
+    }, 1000);
+  },
+  { immediate: true } // 添加immediate属性，确保初始化时执行一次
+);
+
+const scrollToTop = () => {
+  chatStore.dbqbScrollToTop = !chatStore.dbqbScrollToTop;
+};
+
+// 添加渲染所有K线图的方法
+function renderAllKlineCharts() {
+  console.log("重新渲染所有K线图");
+
+  // 查找所有K线消息
+  const messages = chatStore.messages;
+  for (let i = 0; i < messages.length; i++) {
+    if (messages[i].kline && messages[i].chartData) {
+      const containerId = `kline-container-${i}`;
+      console.log(`尝试渲染K线图: ${containerId}`);
+
+      // 确保DOM已经渲染
+      const container = document.getElementById(containerId);
+      if (container) {
+        // 渲染图表
+        KlineCanvsEcharts(containerId);
+      } else {
+        console.warn(`找不到容器: ${containerId}`);
+      }
+    }
+  }
+}
+
+const clearAudio = () => {
+  // 停止音频播放
+  if (audioStore.isPlaying) {
+    audioStore.stop();
+    console.log("组件卸载，音频已停止");
+  }
+  // 清理队列系统
+  audioQueue.value = [];
+  isPlayingAudio.value = false;
+  currentPlayIndex = 0;
+  isCallingPlayNext = false;
+
+  // 清理音频实例
+  audioStore.soundInstance = null;
+  audioStore.nowSound = null;
+
+  // 停止所有 Howler 实例
+  Howler.stop();
+  Howler.unload();
+
+  // 重置音频状态
+  audioStore.isPlaying = false;
+  audioStore.isPaused = false;
+  audioStore.playbackPosition = 0;
+
+  // 清理预加载状态
+  Object.keys(audioPreloadStatus).forEach((key) => {
+    audioPreloadStatus[key] = { loaded: false, url: null };
+  });
+
+  chatStore.currentUserIndex = -1;
+};
+
+// 初始化随机GIF
+onMounted(() => {
+  clearAudio();
+  // 检测移动设备
+  const isMobile =
+    /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
+      navigator.userAgent
+    );
+
+  if (isMobile) {
+    // 强制移动设备使用 Web Audio API
+    Howler.html5PoolSize = 1; // 限制HTML5音频池大小
+    Howler.autoSuspend = false; // 禁用自动挂起
+    Howler.usingWebAudio = true; // 强制使用Web Audio API
+
+    // 激活音频上下文
+    const activateAudioContext = () => {
+      if (Howler.ctx && Howler.ctx.state === "suspended") {
+        Howler.ctx.resume();
+        console.log("音频上下文已激活");
+      }
+    };
+
+    // 监听用户交互以激活音频上下文
+    document.addEventListener("touchstart", activateAudioContext, {
+      once: true,
+    });
+    document.addEventListener("click", activateAudioContext, { once: true });
+  }
+  // 初始化marked组件
+  marked.setOptions({
+    breaks: true, // 支持换行符转换为 <br>
+    gfm: true, // 启用 GitHub Flavored Markdown
+    sanitize: false, // 不清理 HTML（谨慎使用）
+    smartLists: true, // 智能列表
+    smartypants: true, // 智能标点符号
+    xhtml: false, // 不使用 XHTML 输出
+    renderer: renderer,
+  });
+  renderAllKlineCharts();
+  console.log("组件挂载完成");
+  // 重置音频下标
+  chatStore.currentUserIndex = null;
+
+  chatStore.messages.forEach((item) => {
+    if (item.sender == "user") {
+      item.audioStatus = false;
+    }
+  });
+
+  // 添加页面可见性变化监听器
+  document.addEventListener("visibilitychange", handleVisibilityChange);
+
+  // 添加DOM变化监听器
+  const observer = new MutationObserver((mutations) => {
+    mutations.forEach((mutation) => {
+      if (mutation.type === "childList" && mutation.addedNodes.length) {
+        // 检查是否添加了图表容器
+        const containers = document.querySelectorAll(
+          '[id^="kline-container-"]'
+        );
+        if (containers.length) {
+          // console.log("DOM变化监听到K线容器:", Array.from(containers).map(el => el.id));
+        }
+      }
+    });
+  });
+
+  // 开始监听DOM变化
+  observer.observe(document.body, { childList: true, subtree: true });
+});
+
+// 页面可见性变化处理
+let wasPlayingBeforeHidden = false;
+
+const handleVisibilityChange = () => {
+  if (document.hidden) {
+    // 页面被隐藏时，如果音频正在播放，则暂停并记录状态
+    if (audioStore.isPlaying) {
+      wasPlayingBeforeHidden = true;
+      audioStore.pause();
+      console.log("页面切换离开，音频已暂停");
+    } else {
+      wasPlayingBeforeHidden = false;
+    }
+  } else {
+    // 页面重新可见时，如果之前在播放，则恢复播放
+    if (wasPlayingBeforeHidden && !audioStore.isPlaying) {
+      audioStore.play();
+      console.log("页面切换回来，音频已恢复播放");
+      wasPlayingBeforeHidden = false;
+    }
+  }
+};
+
+// 组件卸载时清理所有图表实例和事件监听器
+onUnmounted(() => {
+  // 移除页面可见性变化监听器
+  document.removeEventListener("visibilitychange", handleVisibilityChange);
+
+  clearAudio();
+
+  // 清理所有图表实例
+  Object.keys(chartInstancesMap).forEach((key) => {
+    if (chartInstancesMap[key]) {
+      // 移除resize事件监听
+      if (window[`resize_${key}`]) {
+        window.removeEventListener("resize", window[`resize_${key}`]);
+        delete window[`resize_${key}`];
+      }
+
+      // 销毁图表实例
+      chartInstancesMap[key].dispose();
+      delete chartInstancesMap[key];
+    }
+  });
+});
+</script>
+
+<template>
+  <div class="chat-container">
+    <!-- GIF区域 -->
+    <div class="gif-area">
+      <img
+        src="https://d31zlh4on95l9h.cloudfront.net/images/03ddbbbee489f29dc6a1427f9ed4f389.png"
+        alt="夺宝奇兵大模型logo"
+        class="bgc"
+      />
+      <img :src="logo1" alt="夺宝奇兵大模型logo" class="logo1" />
+      <img :src="logo2" alt="夺宝奇兵大模型logo" class="logo2" />
+    </div>
+
+    <div v-for="(msg, index) in chatMsg" :key="index">
+      <!-- 用户消息容器，包含喇叭按钮 -->
+      <div v-if="msg.sender === 'user'" class="user-message-container">
+        <div class="user-msg">
+          <div class="user-content">
+            <img
+              :src="msg.audioStatus ? voice : voiceNoActive"
+              class="user-message-speaker"
+              :class="{
+                'speaker-active': msg.audioStatus,
+              }"
+              @click="toggleVoiceForUser(index)"
+              alt="喇叭"
+            />
+            <div
+              :class="{
+                'message-bubble': true,
+                [msg.sender]: msg.sender,
+                [msg.class]: msg.class,
+              }"
+            >
+              <div v-html="msg.content"></div>
+            </div>
+          </div>
+          <div v-if="msg.timestamp" class="user-sendTime">
+            {{ moment(msg.timestamp).format("YYYY-MM-DD HH:mm:ss") }}
+          </div>
+        </div>
+      </div>
+
+      <!-- AI消息和其他类型消息 -->
+      <div
+        v-else
+        :class="{
+          'message-bubble': true,
+          [msg.sender]: msg.sender,
+          [msg.class]: msg.class,
+        }"
+      >
+        <div v-if="msg.type === 'kline'" class="kline-container">
+          <div :id="'kline-container-' + index" class="chart-mount-point">
+            <div v-if="!msg.hasValidData" class="no-data-message">
+              <p>暂无K线数据</p>
+            </div>
+          </div>
+        </div>
+        <div v-else-if="msg.type == 'ing'" class="ai-message-container">
+          <img
+            v-if="msg.gif"
+            :src="msg.gif"
+            alt="思考过程"
+            class="thinking-gif"
+          />
+          <div class="ai-message-content" :class="{ fourStep: msg.nowrap }">
+            <div v-if="msg.flag">
+              <span>{{ msg.content }}</span>
+              <span class="loading-dots">
+                <span class="dot">.</span>
+                <span class="dot">.</span>
+                <span class="dot">.</span>
+                <span class="dot">.</span>
+                <span class="dot">.</span>
+                <span class="dot">.</span>
+              </span>
+            </div>
+            <div v-else v-html="msg.content"></div>
+          </div>
+        </div>
+        <div
+          v-else-if="msg.type == 'title1'"
+          style="display: flex; width: 100%"
+        >
+          <div class="mainTitle">
+            {{ msg.content }}
+          </div>
+          <div class="date">
+            {{ msg.date }}
+          </div>
+        </div>
+        <div v-else-if="msg.type == 'title2'" class="title2">
+          <img class="title1Img" :src="title1" alt="出错了" />
+        </div>
+        <div v-else-if="msg.type == 'title3'" class="title3">
+          <img class="title2Img" :src="msg.content" alt="出错了" />
+        </div>
+        <div v-else-if="msg.type == 'content1'" class="content1">
+          <div v-if="msg.kline" class="kline-container content1chart">
+            <div :id="'kline-container-' + index" class="chart-mount-point">
+              <div v-if="!msg.hasValidData" class="no-data-message">
+                <p>暂无数据</p>
+              </div>
+            </div>
+          </div>
+          <div v-else class="content1Text">
+            <div v-html="msg.content" class="text1"></div>
+          </div>
+        </div>
+        <div v-else-if="msg.type == 'content2'" class="content2">
+          <div class="kline-container content2chart">
+            <div :id="'kline-container-' + index" class="chart-mount-pointJN">
+              <div v-if="!msg.hasValidData" class="no-data-message">
+                <p>暂无数据</p>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div v-else-if="msg.type == 'content3'" class="content3">
+          <div class="content3Text">
+            <div v-html="msg.content" class="text3"></div>
+          </div>
+        </div>
+        <div v-else-if="msg.type == 'mianze'" class="mianze">
+          <div v-html="msg.content"></div>
+        </div>
+        <div v-else v-html="msg.content"></div>
+      </div>
+    </div>
+  </div>
+  <!-- 全局返回顶部按钮 -->
+  <div v-if="chatMsg.length > 0" class="back-to-top" @click="scrollToTop">
+    <svg
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 4L12 20M12 4L6 10M12 4L18 10"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  </div>
+</template>
+
+<style scoped>
+p {
+  font-size: 20px;
+}
+
+.bgc {
+  position: absolute;
+  z-index: -1;
+  max-width: 440px;
+  min-width: 300px;
+  top: -15px;
+  width: 40%;
+  height: auto;
+  /* 添加旋转动画 */
+  animation: rotate 10s linear infinite reverse;
+}
+
+/* 定义旋转动画 */
+@keyframes rotate {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+.logo1 {
+  max-width: 350px;
+  min-width: 200px;
+  width: 25%;
+}
+
+.logo2 {
+  margin-top: 20px;
+  max-width: 350px;
+  min-width: 200px;
+  width: 30%;
+  /* position: relative; */
+}
+
+.chat-container {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+}
+
+.gif-area {
+  padding: 70px 0px;
+  position: relative;
+  /* height: 30vh; */
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+
+  /* 防止GIF区域被压缩 */
+}
+
+.message-area {
+  margin-top: 2%;
+  flex: 1;
+  /* 消息区域占据剩余空间 */
+  overflow-y: auto;
+  padding: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.marquee-container {
+  /* position: absolute; */
+  bottom: 0;
+  width: 100%;
+  /* ga */
+}
+
+.marquee-row {
+  white-space: nowrap;
+  overflow: visible;
+  padding: 8px 0;
+  width: 100%;
+}
+
+.marquee-item {
+  display: inline-block;
+  margin: 0 15px;
+  padding: 8px 20px;
+  background: rgba(255, 255, 255, 0.9);
+  /* 白色背景 */
+  border-radius: 10px;
+  /* 圆角矩形 */
+  color: #333;
+  /* 文字颜色改为深色 */
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  /* 添加阴影 */
+  transition: all 0.3s;
+  transition: color 0.3s;
+}
+
+.top {
+  animation: marquee 25s linear infinite;
+  /* 默认动画是运行状态 */
+  animation-play-state: running;
+}
+
+.bottom {
+  animation: marquee 15s linear infinite reverse;
+  /* 默认动画是运行状态 */
+  animation-play-state: running;
+}
+
+/* 返回顶部按钮样式 */
+.back-to-top {
+  position: sticky !important;
+  bottom: 20px !important;
+  left: calc(100% - 70px) !important;
+  width: 50px !important;
+  height: 50px !important;
+  background: linear-gradient(135deg, #00d4ff 0%, #0066cc 100%) !important;
+  border-radius: 50% !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  cursor: pointer !important;
+  transition: all 0.3s ease !important;
+  z-index: 100 !important;
+  color: white !important;
+  opacity: 1 !important;
+  visibility: visible !important;
+  margin-top: 20px !important;
+  margin-bottom: 20px !important;
+}
+
+.back-to-top:hover {
+  transform: translateY(-3px);
+  box-shadow: 0 6px 20px rgba(0, 212, 255, 0.5);
+  background: linear-gradient(135deg, #00e6ff 0%, #0077dd 100%);
+}
+
+.back-to-top:active {
+  transform: translateY(-1px);
+}
+
+/* 添加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(-250%);
+  }
+}
+
+.loading-dots {
+  display: inline-block;
+}
+
+.dot {
+  opacity: 0.4;
+  animation: loading 1.4s infinite;
+}
+
+.dot:nth-child(1) {
+  animation-delay: 0s;
+}
+
+.dot:nth-child(2) {
+  animation-delay: 0.2s;
+}
+
+.dot:nth-child(3) {
+  animation-delay: 0.4s;
+}
+
+.dot:nth-child(4) {
+  animation-delay: 0.6s;
+}
+
+.dot:nth-child(5) {
+  animation-delay: 0.8s;
+}
+
+.dot:nth-child(6) {
+  animation-delay: 1s;
+}
+
+@keyframes loading {
+  0%,
+  60%,
+  100% {
+    opacity: 0.4;
+  }
+
+  30% {
+    opacity: 1;
+  }
+}
+
+.message-bubble {
+  max-width: 80%;
+  margin: 10px 0px;
+  padding: 15px 20px;
+  position: relative;
+}
+
+/* 用户消息容器样式 */
+.user-message-container {
+  display: flex;
+  align-items: flex-end;
+  margin: 10px 0px;
+  justify-content: flex-end;
+  gap: 10px;
+  /* align-items: center; */
+  flex-direction: column;
+}
+
+.user-msg {
+  margin-left: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+.user-content {
+  display: flex;
+  height: 100%;
+  align-items: center;
+  margin-right: 5px;
+  justify-content: flex-end;
+  padding: 0 20px;
+}
+
+.user-sendTime {
+  width: 100%;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.6);
+  font-size: 0.8rem;
+}
+
+.user-message-speaker {
+  width: 32px;
+  height: 32px;
+  object-fit: contain;
+  margin-right: 5px;
+  cursor: pointer;
+  transition: all 0.3s ease;
+}
+
+.user-message-speaker:hover {
+  transform: scale(1.1);
+}
+
+.user-message-speaker.speaker-active {
+  animation: pulse 1.5s infinite;
+}
+
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.1);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+
+.message-bubble.user {
+  color: #6d22f8;
+  background: white;
+  font-weight: bold;
+  border-radius: 10px;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  word-break: break-word; /* 启用强制换行 */
+}
+
+.message-bubble.ai {
+  background: #2b378d;
+  color: #ffffff;
+  margin: 0 auto;
+  /* border-bottom-left-radius: 5px; */
+}
+
+.message-bubble.ing {
+  background: #ffffff;
+  color: #000000;
+  font-weight: bold;
+  border-radius: 10px;
+  margin-left: 20px;
+  margin-right: auto;
+  display: flex;
+  align-items: center;
+  width: fit-content;
+}
+
+.message-bubble.ai.title1 {
+  width: 100%;
+  display: flex;
+  border-radius: 10px 10px 0px 0px;
+  /* border-bottom-left-radius: 5px; */
+}
+
+.mainTitle {
+  font-size: 16px;
+  font-weight: bold;
+  background-image: url("@/assets/img/AiEmotion/bk01.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  min-width: 200px;
+  width: 20vw;
+  max-width: 50%;
+  height: 50px;
+  padding: 15px 10px;
+  text-align: center;
+  line-height: 20px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  box-sizing: border-box;
+}
+
+.date {
+  font-size: 1.5rem;
+  font-weight: bold;
+  margin-left: auto;
+  /* width: 100px; */
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.message-bubble.ai.title2 {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title1Img {
+  max-width: 500px;
+  width: 90vw;
+}
+
+.message-bubble.ai.title3 {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.title2Img {
+  max-width: 500px;
+  width: 90vw;
+}
+
+.message-bubble.ai.content1 {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.content1chart {
+  background-image: url("@/assets/img/AIchat/罗盘边框.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 50vw;
+  min-width: 350px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.content1Text {
+  background-image: url("@/assets/img/AIchat/框.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 50vw;
+  min-width: 350px;
+  /* height: 20vw; */
+  /* max-height: 400px; */
+  padding: 5% 0;
+}
+
+.text1 {
+  font-weight: bold;
+  /* margin-left: 6%; */
+  /* margin-bottom: 10px; */
+  margin: 0px 6% 10px 6%;
+  font-size: 20px;
+}
+
+.message-bubble.ai.content2 {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.content2chart {
+  background-image: url("@/assets/img/AIchat/PCbackPic.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 50vw;
+  min-width: 350px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: calc(500px + 10vw) !important;
+}
+
+.message-bubble.ai.content3 {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.content3Text {
+  background-image: url("@/assets/img/AIchat/边框.png");
+  background-repeat: no-repeat;
+  background-size: 100% 100%;
+  width: 50vw;
+  min-width: 350px;
+  /* height: 20vw; */
+  /* max-height: 400px; */
+  padding: 5% 0px;
+}
+
+.text3 {
+  /* font-weight: bold; */
+  /* margin-left: 6%; */
+  /* margin-bottom: 10px; */
+  margin: 0px 6% 10px 6%;
+  font-size: 20px;
+}
+
+.message-bubble.ai.mianze {
+  width: 100%;
+  text-align: center;
+  font-weight: bold;
+  font-size: 24px;
+  border-radius: 0px 0px 10px 10px;
+}
+
+.kline-container {
+  margin-top: 10px;
+  /* 最小高度 */
+  min-height: 320px;
+  /* 视口高度单位 */
+  height: 40vh;
+  width: 50vw;
+}
+
+@media (max-width: 768px) {
+  .kline-container {
+    min-width: 75vw;
+  }
+
+  .content1Text {
+    width: 77vw;
+    min-width: 0px;
+    /* height: 20vw; */
+    /* min-height: 150px; */
+  }
+
+  .date {
+    font-size: 14px;
+    text-align: end;
+  }
+
+  .text1 {
+    font-size: 20px;
+  }
+
+  .content2chart {
+    background-image: url("@/assets/img/AIchat/new-app-bgc.png") !important;
+    height: 100vw;
+  }
+
+  .content3Text {
+    width: 77vw;
+    min-width: 0px;
+    /* height: 20vw; */
+    /* min-height: 150px; */
+  }
+
+  .text3 {
+    font-size: 20px;
+  }
+
+  .message-bubble.ai.mianze {
+    font-size: 18px;
+  }
+
+  .back-to-top {
+    left: calc(100% - 65px) !important;
+    width: 45px !important;
+    height: 45px !important;
+  }
+}
+
+.kline-container .chart-mount-point {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 80%;
+  width: 90%;
+}
+
+.kline-container .chart-mount-pointJN {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+  width: 100%;
+}
+
+/* AI消息容器样式 */
+.ai-message-container {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  margin-right: auto;
+  /* max-width: 80%; */
+}
+
+/* 思考过程动图样式 */
+.thinking-gif {
+  width: 40px;
+  height: 40px;
+  object-fit: contain;
+  margin-top: 5px;
+  border-radius: 8px;
+  animation: float 2s ease-in-out infinite;
+}
+
+@keyframes float {
+  0%,
+  100% {
+    transform: translateY(0px);
+  }
+  50% {
+    transform: translateY(-5px);
+  }
+}
+
+/* AI消息内容样式 */
+.ai-message-content {
+  display: flex;
+  align-items: center;
+  /* white-space: nowrap; */
+  width: fit-content;
+  overflow: visible;
+}
+
+.fourStep {
+  white-space: nowrap;
+}
+
+@media only screen and (max-width: 480px) {
+  .back-to-top {
+    left: calc(100% - 60px) !important;
+    width: 40px !important;
+    height: 40px !important;
+  }
+
+  .back-to-top svg {
+    width: 20px;
+    height: 20px;
+  }
+}
+</style>
diff --git a/src/views/homePage.vue b/src/views/homePage.vue
index a4860b1..d7921fe 100644
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@@ -12,8 +12,11 @@ import {
 import { ElMessage } from "element-plus";
 import AIchat from "./AIchat.vue";
 import AIfind from "./AIfind.vue";
+import AiEmotion from "./AiEmotion.vue";
+import deepNine from "./deepNine.vue";
 import Feedback from "./Feedback.vue";
 import Announcement from "./Announcement.vue";
+
 import { useAppBridge } from "../assets/js/useAppBridge.js";
 import { useDataStore } from "@/store/dataList.js";
 import { useChatStore } from "../store/chat";
@@ -38,7 +41,7 @@ import sendBtn from "../assets/img/homePage/tail/send.png";
 import msgBtn from "../assets/img/homePage/tail/msg.png";
 import feedbackBtn from "../assets/img/Feedback/feedbackBtn.png";
 import back from "../assets/img/Feedback/back.png";
-import AiEmotion from "./AiEmotion.vue";
+
 import HistoryRecord from "./components/HistoryRecord.vue";
 
 // import VConsole from "vconsole";
@@ -105,6 +108,10 @@ const tabs = computed(() => [
     name: "AiEmotion",
     label: "AI情绪大模型",
   },
+  {
+    name: "deepNine",
+    label: "深度九大模型",
+  },
 ]);
 
 // 修改 setActiveTab 方法，添加一个可选参数 forceAIchat
@@ -120,6 +127,9 @@ const setActiveTab = (tab, index, forceAIchat = false) => {
   } else if (tab == "AiEmotion") {
     isInputDisabled.value = chatStore.emotionInput;
     console.log("切换到AiEmotion页面，输入框状态为", isInputDisabled.value);
+  } else if (tab == "deepNine") {
+    isInputDisabled.value = chatStore.deepNineInput;
+    console.log("切换到deepNine页面，输入框状态为", isInputDisabled.value);
   } else {
     isInputDisabled.value = false;
   }
@@ -148,6 +158,8 @@ const activeComponent = computed(() => {
     return AIfind;
   } else if (activeTab.value === "AiEmotion") {
     return AiEmotion; // 新增逻辑
+  } else if (activeTab.value === "deepNine") {
+    return deepNine;
   }
 });
 
@@ -236,6 +248,15 @@ watch(
   }
 );
 
+watch(
+  () => chatStore.deepNineInput,
+  async (newVal) => {
+    if (activeTab.value == "deepNine") {
+      isInputDisabled.value = chatStore.deepNineInput;
+    }
+  }
+);
+
 const sendMessage = async () => {
   if (
     localStorage.getItem("localToken") == null ||
@@ -336,6 +357,7 @@ const tokenRuleDialogVisible = ref(false);
 const hasShownTokenRule = ref({
   AIchat: sessionStorage.getItem("hasShownTokenRule_AIchat") === "true",
   AiEmotion: sessionStorage.getItem("hasShownTokenRule_AiEmotion") === "true",
+  deepNine: sessionStorage.getItem("hasShownTokenRule_deepNine") === "true",
 });
 
 // 关闭Token规则提示框
@@ -351,12 +373,16 @@ const openTokenRuleDialog = () => {
 // 定义处理函数，以便正确移除事件监听器
 const handleGlobalClick = (event) => {
   // 检查点击事件是否来自"兑换规则"按钮
-  const changeRuleElement = document.querySelector('.changeRule');
-  if (changeRuleElement && (changeRuleElement === event.target || changeRuleElement.contains(event.target))) {
+  const changeRuleElement = document.querySelector(".changeRule");
+  if (
+    changeRuleElement &&
+    (changeRuleElement === event.target ||
+      changeRuleElement.contains(event.target))
+  ) {
     // 如果点击的是"兑换规则"按钮，不关闭提示框
     return;
   }
-  
+
   if (tokenRuleDialogVisible.value) {
     tokenRuleDialogVisible.value = false;
   }
@@ -417,6 +443,8 @@ const showFeedback = () => {
 
 const tabContentAIchat = ref(null);
 const tabContentAiEmotion = ref(null);
+const tabContentDeepNine = ref(null);
+
 const isScrolling = ref(false); //判断用户是否在滚动
 
 // AiEmotion页面高度监听器相关变量
@@ -433,6 +461,8 @@ const getCurrentScrollContainer = () => {
     return tabContentAIchat.value;
   } else if (activeTab.value === "AiEmotion") {
     return tabContentAiEmotion.value;
+  } else if (activeTab.value === "deepNine") {
+    return tabContentDeepNine.value;
   }
   return null;
 };
@@ -658,7 +688,7 @@ watch(
   () => {
     // console.log('messages变化了')
     // 只有在AIchat页面时才执行自动滚动
-    if (activeTab.value === "AIchat") {
+    if (activeTab.value === "AIchat" || activeTab.value === "deepNine") {
       throttledSmoothScrollToBottom();
     }
     // setTimeout(throttledSmoothScrollToBottom, 100);
@@ -692,16 +722,26 @@ watch(
   activeTab,
   async () => {
     console.log("activeTab变化了", activeTab.value);
-    if (activeTab.value == "AIchat" || activeTab.value == "AiEmotion") {
+    if (
+      activeTab.value == "AIchat" ||
+      activeTab.value == "AiEmotion" ||
+      activeTab.value == "deepNine"
+    ) {
       if (historyRecordRef.value && historyRecordRef.value.getHistoryList) {
+        let model =
+          activeTab.value == "AIchat"
+            ? 1
+            : activeTab.value == "AiEmotion"
+            ? 2
+            : 3;
         const result = historyRecordRef.value.getHistoryList({
-          model: activeTab.value == "AIchat" ? 1 : 2,
+          model: model,
           token: localStorage.getItem("localToken"),
         });
       }
     }
 
-    if (activeTab.value === "AIchat") {
+    if (activeTab.value === "AIchat" || activeTab.value === "deepNine") {
       isScrolling.value = false; //回复滚动到底部方法
       // 停止AiEmotion页面的高度监听器
       stopAiEmotionHeightObserver();
@@ -950,12 +990,6 @@ const throttledJudgeDevice = _.throttle(judgeDevice, 300, {
 });
 
 const expandHistory = () => {
-  // if (activeTab.value == "AIchat" || activeTab.value == "AiEmotion") {
-  //   historyRecordRef.value.getHistoryList({
-  //     token: localStorage.getItem("localToken"),
-  //     model: activeTab.value == "AIchat" ? 1 : 2,
-  //   });
-  // }
   if (
     historyRecordRef.value &&
     historyRecordRef.value.isCollapsed !== undefined
@@ -966,6 +1000,8 @@ const expandHistory = () => {
       chatStore.aiChatCall = true;
     } else if (activeTab.value == "AiEmotion") {
       chatStore.aiEmotionCall = true;
+    } else if (activeTab.value == "deepNine") {
+      chatStore.deepNineCall = true;
     }
   }
 };
@@ -1404,6 +1440,28 @@ onUnmounted(() => {
               ref="aiEmotionRef"
             />
           </div>
+          <!-- deepNine页面的独立滚动容器 -->
+          <div
+            v-show="activeTab === 'deepNine'"
+            class="tab-content"
+            :class="{
+              pcTabContent: !isMobile,
+            }"
+            ref="tabContentDeepNine"
+          >
+            <component
+              v-if="activeTab === 'deepNine'"
+              :is="activeComponent"
+              :messages="messages"
+              @updateMessage="updateMessage"
+              @sendMessage="sendMessage"
+              @ensureAIchat="ensureAIchat"
+              @enableInput="enableInput"
+              @scrollToBottom="handleDeepNineScrollToBottom"
+              @showCount="showCount"
+              ref="deepNineRef"
+            />
+          </div>
         </div>
       </el-main>
       <!-- 尾部： 问题输入框 深度思考 多语言 语音播报 -->
@@ -1562,7 +1620,7 @@ onUnmounted(() => {
         </div>
         <div class="changeRule">
           兑换规则：{{ changeRule.gold }}金币={{ changeRule.token }}Token
-          <div  @click="openTokenRuleDialog">点击查看详情</div>
+          <div @click="openTokenRuleDialog">点击查看详情</div>
         </div>
       </div>
       <div class="changeLevel">
@@ -1624,7 +1682,6 @@ onUnmounted(() => {
             (兑换规则：{{ changeRule.gold }}金币={{ changeRule.token }}Token)
             <div @click="openTokenRuleDialog">点击查看详情</div>
           </div>
-          
         </div>
 
         <div class="changeLevelContent">
@@ -1710,14 +1767,24 @@ onUnmounted(() => {
       center
     >
       <div class="changeSuccessDialogTitle">
-        <img v-if="!isMobile" src="https://d31zlh4on95l9h.cloudfront.net/images/84edd341b2ddec464fc4475254f7a309.png" style="scale: 0.7;" alt="token图标">
+        <img
+          v-if="!isMobile"
+          src="https://d31zlh4on95l9h.cloudfront.net/images/84edd341b2ddec464fc4475254f7a309.png"
+          style="scale: 0.7"
+          alt="token图标"
+        />
         兑换成功
       </div>
       <div class="changeSuccessDialogContent">
         尊敬的用户，恭喜您成功兑换：{{ activeLevel.calculatedPosition }} Token
       </div>
       <div class="changeSuccessDialogFooter">
-        <button class="confirmButton" @click="changeSuccessDialogVisible = false">确定</button>
+        <button
+          class="confirmButton"
+          @click="changeSuccessDialogVisible = false"
+        >
+          确定
+        </button>
       </div>
     </el-dialog>
 
@@ -2575,17 +2642,17 @@ body {
 .changeSuccessDialogTitle {
   font-size: 1.7rem;
   font-weight: bold;
-  color: #7849DE;
+  color: #7849de;
   display: flex;
   justify-content: center;
   align-items: center;
   letter-spacing: 10px;
 }
 
-.changeSuccessDialogTitle image{
+.changeSuccessDialogTitle image {
   font-size: 1.7rem;
   font-weight: bold;
-  color: #7849DE;
+  color: #7849de;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -2685,7 +2752,6 @@ body {
 }
 
 @media (max-width: 768px) {
-
   .tokenRuleDialog {
     bottom: 20%;
   }
@@ -2879,7 +2945,7 @@ body {
 
 <style>
 .changeSuccessDialog {
-  background: linear-gradient(180deg, #80D3F8, #8080FF);
+  background: linear-gradient(180deg, #80d3f8, #8080ff);
 }
 
 .changeSuccessDialogFooter {
@@ -2889,7 +2955,7 @@ body {
 }
 
 .confirmButton {
-  background: #8A52DF;
+  background: #8a52df;
   color: white;
   border: none;
   border-radius: 5px;