AIxiaocaishen/src/views/AIchat.vue

<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库
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 = 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: true,
    format: ["mp3", "acc"],
    rate: 1.2,
    retryCount: 0,
    onplay: () => {
      audioStore.isPlaying = true;
      isPlayingAudio.value = true;
      isCallingPlayNext = false;
      console.log(`${audioInfo.name}音频开始播放`);
    },
    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();
        }, 500);
      } 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;
    }

    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;
    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();
      }
    }
  } 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;
            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;
            chatStore.searchRecord = true;
            console.log("打印完毕，接触输入框禁用状态");
            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;
          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;
          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: "/src/assets/img/gif/思考.gif",
  });
  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: "/src/assets/img/gif/解析.gif",
  });
  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: "/src/assets/img/gif/生成.gif",
  });
  chatStore.messages.push(thinkingMessage3);
  await new Promise((resolve) => setTimeout(resolve, 1500));
  chatStore.messages.pop();

  // 第四步：报告已生成
  const thinkingMessage4 = reactive({
    sender: "ai",
    class: "ing",
    type: "ing",
    flag: true,
    content: "报告已生成！",
    gif: "/src/assets/img/gif/生成.gif",
  });
  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: "/src/assets/img/gif/生成.gif",
  });
  chatStore.messages.push(thinkingMessage3);
  await new Promise((resolve) => setTimeout(resolve, 1500));
  chatStore.messages.pop();

  // 第四步：报告已生成
  const thinkingMessage4 = reactive({
    sender: "ai",
    class: "ing",
    type: "ing",
    flag: true,
    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;

    previousMessagesLength.value = newVal.length;
    if (newVal.length > 0) {
      console.log("消息列表已更新，最新消息:", newVal[newVal.length - 1]);
      chatStore.messages.push(newVal[newVal.length - 1]);
      chatStore.currentUserIndex = 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) {
          // 获取到股票名称后，继续思考过程
          if (thinkingMessageRef && codeData.value.name) {
            await continueThinkingProcess(
              thinkingMessageRef,
              codeData.value.name
            );
          }

          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;
          const 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");

          chatStore.messages.push({
            class: "ing",
            type: "ing",
            flag: flag,
            content: aiContent,
          });

          chatStore.isLoading = false;
          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;
        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:
              "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.currentUserIndex
                  ].audioArray.push(audioPreloadStatus.one.url);
                  addToAudioQueue(audioPreloadStatus.one.url, "API1-第一个");
                  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.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;
                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.currentUserIndex
                  ].audioArray.push(audioPreloadStatus.two.url);
                  addToAudioQueue(audioPreloadStatus.two.url, "API2-第二个");
                  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;
                  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.currentUserIndex
                  ].audioArray.push(audioPreloadStatus.three.url);
                  addToAudioQueue(audioPreloadStatus.three.url, "API3-第三个");
                  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: "工作流返回出错，请稍后重试1111",
                  });
                  chatStore.isLoading = 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.currentUserIndex
                  ].audioArray.push(audioPreloadStatus.four.url);
                  addToAudioQueue(audioPreloadStatus.four.url, "API4-第四个");
                  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;
                  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;
            emit("enableInput");
          }
        } catch (e) {
          console.error("请求失败:", e);
          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);

    // 在下一个事件循环中清空 dbqbClickRecord
    setTimeout(() => {
      chatStore.dbqbClickRecord = {};
      console.log("dbqbClickRecord 已清空");
    }, 0);
    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: true,
      });

      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: "90%",
          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 ? 15 : vwToPx(1.8),
          },
          width: "100%",
          top: window.innerWidth > 768 ? "0%" : "-1%",
          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 ? 15 : vwToPx(1.8),
          },
          orient: "horizontal",
          top: window.innerWidth > 768 ? "3%" : "2%",
          width: "100%",
          left: "center",
          itemGap: 15,
          data: [
            {
              name: "{green|━}{red|━} " + "牵牛绳",
              icon: "none",
              textStyle: {
                rich: {
                  green: {
                    color: "green",
                    fontSize: window.innerWidth > 768 ? 20 : 10,
                  },
                  red: {
                    color: "red",
                    fontSize: window.innerWidth > 768 ? 20 : 10,
                  },
                },
              },
            },
            {
              name: "龙线",
            },
            {
              name: "虫线",
            },
          ],
        },
        {
          textStyle: {
            color: "black",
            fontSize: window.innerWidth > 768 ? 15 : vwToPx(1.8),
          },
          orient: "horizontal",
          top: window.innerWidth > 768 ? "68%" : "64%",
          width: "100%",
          left: "center",
          itemGap: 15,
          data: [
            {
              name: "{green|━}{red|━} " + "度牛尺",
              icon: "none",
              textStyle: {
                rich: {
                  green: {
                    color: "green",
                    fontSize: window.innerWidth > 768 ? 20 : 10,
                  },
                  red: {
                    color: "red",
                    fontSize: window.innerWidth > 768 ? 20 : 10,
                  },
                },
              },
            },
          ],
        },
      ],
      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: [
        {
          left:
            window.innerWidth > 1024
              ? "70vw"
              : window.innerWidth > 768
              ? "65vw"
              : "55vw",
          right:
            window.innerWidth > 1024
              ? "40vw"
              : window.innerWidth > 768
              ? "30vw"
              : "40vw",
          top: window.innerWidth > 768 ? "8%" : "5%",
          height: window.innerWidth > 768 ? "34%" : "34%",
          containLabel: false,
        },
        {
          left:
            window.innerWidth > 1024
              ? "70vw"
              : window.innerWidth > 768
              ? "65vw"
              : "55vw",
          right:
            window.innerWidth > 1024
              ? "40vw"
              : window.innerWidth > 768
              ? "30vw"
              : "40vw",
          top: window.innerWidth > 768 ? "45%" : "42%",
          height: window.innerWidth > 768 ? "22%" : "22%",
          containLabel: false,
        },
        {
          left:
            window.innerWidth > 1024
              ? "70vw"
              : window.innerWidth > 768
              ? "65vw"
              : "55vw",
          right:
            window.innerWidth > 1024
              ? "40vw"
              : window.innerWidth > 768
              ? "30vw"
              : "40vw",
          top: window.innerWidth > 768 ? "73%" : "70%",
          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",
          },
        },
      ],
      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 ? "95%" : "96%",
          // left: window.innerWidth > 768 ? "10%" : "8%",
          // right: window.innerWidth > 768 ? "4%" : "8%",
          start: 98,
          end: 100,
        },
      ],
      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 }],
          },
        },
        {
          name: "辅助线",
          type: "line",
          data: [],
          xAxisIndex: 2,
          yAxisIndex: 2,
          markLine: {
            silent: true,
            symbol: "none",
            lineStyle: {
              color: "#000000",
              width: 3,
              type: "solid",
            },
            data: [{ yAxis: 50 }],
          },
        },
        {
          name: "辅助线",
          type: "line",
          data: [],
          xAxisIndex: 2,
          yAxisIndex: 2,
          markLine: {
            silent: true,
            symbol: "none",
            lineStyle: {
              color: "#000000",
              width: 3,
              type: "solid",
            },
            data: [{ yAxis: 80 }],
          },
        },
        {
          name: "辅助线",
          type: "line",
          data: [],
          xAxisIndex: 2,
          yAxisIndex: 2,
          markLine: {
            silent: true,
            symbol: "none",
            lineStyle: {
              color: "#000000",
              width: 3,

              type: "solid",
            },
            data: [{ yAxis: 100 }],
          },
        },
      ],
    };
  }

  // 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属性，确保初始化时执行一次
);

// 添加渲染所有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}`);
      }
    }
  }
}

// 初始化随机GIF
onMounted(() => {
  // 初始化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.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);

  // 停止音频播放
  if (audioStore.isPlaying) {
    audioStore.stop();
    console.log("组件卸载，音频已停止");
  }

  // 清理所有图表实例
  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">
        <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>

      <!-- 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">
            <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-point">
              <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>
</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;
}

/* 添加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-start;
  margin: 10px 0px;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
}

.user-message-speaker {
  width: 32px;
  height: 32px;
  object-fit: contain;
  margin-top: 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;
  width: fit-content;
  display: flex;
  align-items: center;
}

.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;
  }

  .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;
  }
}

.kline-container .chart-mount-point {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 80%;
  width: 90%;
}

/* AI消息容器样式 */
.ai-message-container {
  display: flex;
  align-items: flex-start;
  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;
}
</style>