AIxiaocaishen/src/views/AiEmotion.vue

<template>
  <div class="ai-emotion-container" ref="userInputDisplayRef">
    <!-- 金轮 -->
    <div class="golden-wheel">
      <img src="@/assets/img/AiEmotion/金轮.png" class="golden-wheel-img" alt="金轮图标"
        :class="{ 'rotating-image': isRotating }" />
    </div>

    <!-- 消息显示区域 -->
    <div class="user-input-display">
      <div v-for="(message, index) in messages" :key="index" class="message-container">
        <!-- 用户输入内容 -->
        <div v-if="message.sender === 'user'" class="message-bubble user-message">
          {{ message.text }}
        </div>
        <!-- AI返回结果 -->
        <div v-if="message.sender === 'ai'" class="message-bubble ai-message">
          {{ message.text }}
        </div>
      </div>
    </div>
  </div>

  <!-- 股票标签页 -->
  <StockTabs />

  <!-- 加载提示 -->
  <div v-if="isLoading" class="loading-container">
    <div class="loading-content">
      <div class="loading-spinner"></div>
      <div class="loading-text">AI小财神正在分析中，请稍候...</div>
    </div>
  </div>

  <!-- 渲染整个页面 -->
  <div v-if="isPageLoaded" class="class01">
    <div class="class00">
      <!-- 四维矩阵图 -->
      <div class="class02">
        <div class="container">
          <!-- <img class="item" :src="item" alt="思维矩阵图片" /> -->
          <div class="span01">
            {{ stockName }}{{ stockName ? '量子四维矩阵图' : '' }}
          </div>
        </div>
        <span class="span02">{{ displayDate }}</span>
      </div>
      <div class="class0201">
        <img src="@/assets/img/AiEmotion/L1.png" alt="情绪监控图标">
      </div>
      <!-- 温度计图表 -->
      <div class="class03">
        <div class="class003">
          <div class="content1">
            <img class="img01" src="@/assets/img/AiEmotion/温度计.png" alt="温度计图标">
            <span class="title1">股票温度计</span>
          </div>
          <div class="div00">
            <div class="div01">股票温度：{{ data2 ?? "NA" }}</div>
            <div class="div02">市场温度：{{ data1 }}</div>
          </div>
        </div>
        <marketTemperature ref="marketTemperatureRef" />
      </div>
    </div>
    <div class="class0301">
      <img src="@/assets/img/AiEmotion/L2.png" alt="情绪解码图标">
    </div>
    <!-- 情绪解码器图表 -->
    <div class="class04">
      <div class="class0401">
        <img class="img02" src='@/assets/img/AiEmotion/emotionDecod.png' alt="情绪解码器图标">
        <span class="title2">情绪解码器</span>
      </div>
      <div class="class0402">
        <emotionDecod ref="emotionDecodRef"></emotionDecod>
      </div>
    </div>
    <div class="class0403">
      <img src="@/assets/img/AiEmotion/L3.png" alt="情绪推演图标">
    </div>
    <!-- 情绪探底雷达图表 -->
    <div class="class05">
      <div class="class0502">
        <img class="img03" src="@/assets/img/AiEmotion/探底雷达.png" alt="探底雷达图表">
        <span class="title3">情绪探底雷达</span>
      </div>
      <div class="class0503">
        <emotionalBottomRadar ref="emotionalBottomRadarRef"></emotionalBottomRadar>
      </div>
    </div>
    <div class="class0501">
      <img src="@/assets/img/AiEmotion/L4.png" alt="情绪套利">
    </div>
    <!-- 情绪能量转化器图表 -->
    <div class="class06">
      <div class="class0601">
        <img class="img04" src="@/assets/img/AiEmotion/能量转化器.png" alt="能量转化器图标">
        <span class="title4">情绪能量转化器</span>
      </div>
      <div class="class0603">
        <emoEnergyConverter ref="emoEnergyConverterRef"></emoEnergyConverter>
      </div>
    </div>
    <!-- 核心看点 -->
    <div class="class0702">
      <img src="@/assets/img/AiEmotion/核心看点.png" alt="核心看点字样">
    </div>
    <div class="bk-image">
      <div class="text-container">
        <p><span class="title">🔍 情绪监控-金融宇宙的【量子检测网络】</span>
          <span class="content">核心任务:构建全市场情绪引力场雷达，实时监测资金流向和情绪波动</span>
        </p>
        <p><span class="title">🧠 情绪解码-主力思维的【神经破译矩阵】</span>
          <span class="content">核心任务:解构资金行为的量子密码，破译主力操盘意图和策略布局</span>
        </p>
        <p><span class="title">🔮 情绪推演-未来战争的【时空推演舱】</span>
          <span class="content">核心任务:基于情绪数据推演未来走势，预测市场转折点和机会窗口</span>
        </p>
        <p><span class="title">💰 情绪套利-财富裂变的【粒子对撞机】</span>
          <span class="content">核心任务:将情绪差转化为收益粒子流，实现情绪能量的价值转换</span>
        </p>
      </div>
    </div>
    <!-- 核心逻辑 -->
    <div class="class0700">
      <img src="@/assets/img/AiEmotion/核心逻辑.png" alt="核心逻辑字样">
    </div>
    <div class="class08">
      <div class="lz-img">
        <img src="@/assets/img/AiEmotion/量子神经决策树.png" alt="树标题">
      </div>
      <div class="scaled-img">
        <!-- <img src="@/assets/img/AiEmotion/tree02.jpg" alt="树图片"> -->
      </div>
    </div>
    <!-- 场景应用 -->
    <div class="class09" ref="scenarioApplicationRef">
      <img src="@/assets/img/AiEmotion/场景应用.png" alt="场景应用标题">
      <div class="bk-image">
        <div class="conclusion-container" v-if="parsedConclusion">
          <div class="conclusion-item" v-if="(parsedConclusion.one1 || parsedConclusion.one2) && moduleVisibility.one">
            <h4 class="conclusion-title">{{ displayedTitles.one }}</h4>
            <p class="conclusion-text" v-if="parsedConclusion.one1">{{ displayedTexts.one1 }}</p>
            <p class="conclusion-text" v-if="parsedConclusion.one2">{{ displayedTexts.one2 }}</p>
          </div>
          <div class="conclusion-item" v-if="parsedConclusion.two && moduleVisibility.two">
            <h4 class="conclusion-title">{{ displayedTitles.two }}</h4>
            <p class="conclusion-text">{{ displayedTexts.two }}</p>
          </div>
          <div class="conclusion-item" v-if="parsedConclusion.three && moduleVisibility.three">
            <h4 class="conclusion-title">{{ displayedTitles.three }}</h4>
            <p class="conclusion-text">{{ displayedTexts.three }}</p>
          </div>
          <div class="conclusion-item" v-if="parsedConclusion.four && moduleVisibility.four">
            <h4 class="conclusion-title">{{ displayedTitles.four }}</h4>
            <p class="conclusion-text">{{ displayedTexts.four }}</p>
          </div>
          <!-- AI生成内容免责声明 -->
          <div class="disclaimer-item" v-if="parsedConclusion && moduleVisibility.disclaimer">
            <p class="disclaimer-text">{{ displayedTexts.disclaimer }}</p>
          </div>
        </div>
        <div class="conclusion-placeholder" v-else>
          <p>等待股票分析结论...</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue';
import { getReplyAPI, getConclusionAPI } from '@/api/AiEmotionApi.js'; // 导入工作流接口方法
import axios from 'axios';
import item from '@/assets/img/AiEmotion/bk01.png'; // 导入思维矩阵图片
import emotionDecod from '@/views/components/emotionDecod.vue'; // 导入情绪解码组件
import emotionalBottomRadar from '@/views/components/emotionalBottomRadar.vue'; // 导入情绪探底雷达图组件
import emoEnergyConverter from '@/views/components/emoEnergyConverter.vue'; // 导入情绪能量转化器组件
import marketTemperature from '@/views/components/marketTemperature.vue';
import StockTabs from '@/views/components/StockTabs.vue'; // 导入股票标签页组件
import blueBorderImg from '@/assets/img/AiEmotion/blueBorder.png' //导入蓝色背景框图片
import { ElMessage } from 'element-plus';
import { useEmotionStore } from '@/store/emotion'; // 导入Pinia store
import { useAudioStore } from '@/store/audio.js'; // 导入音频store
import { Howl, Howler } from 'howler'; // 导入音频播放库
import { reactive } from 'vue';
// 使用Pinia store
const emotionStore = useEmotionStore();
const audioStore = useAudioStore();

// 组件引用
const marketTemperatureRef = ref(null); // 引用市场温度计组件
const emoEnergyConverterRef = ref(null)
const emotionDecodRef = ref(null)
const emotionalBottomRadarRef = ref(null)
const userInputDisplayRef = ref(null);//消息区域的引用

// 响应式数据
const messages = ref([]);
const isPageLoaded = ref(false); // 控制页面是否显示
const isLoading = ref(false); // 控制加载状态
const isRotating = ref(false);//控制旋转
const version1 = ref(2); // 版本号
const conclusionData = ref(''); // 存储第二个工作流接口返回的结论数据

// 自动滚动相关数据
const isAutoScrolling = ref(false);
const currentSection = ref(0);
const sectionRefs = ref([]);
const scenarioApplicationRef = ref(null); // 场景应用部分的引用
const hasTriggeredAudio = ref(false); // 是否已触发音频播放
const hasTriggeredTypewriter = ref(false); // 是否已触发打字机效果
const intersectionObserver = ref(null); // 存储observer实例

// 显示的文本内容（用于打字机效果）
const displayedTexts = ref({
  one1: '',
  one2: '',
  two: '',
  three: '',
  four: '',
  disclaimer: ''
});

// 显示的标题内容（用于打字机效果）
const displayedTitles = ref({
  one: '',
  two: '',
  three: '',
  four: ''
});

// 模块显示状态
const moduleVisibility = ref({
  one: false,
  two: false,
  three: false,
  four: false,
  disclaimer: false
});
const typewriterTimers = ref([]);
// 记录每个股票是否已经显示过打字机效果
const stockTypewriterShown = ref(new Map());
// 记录每个股票是否已经播放过音频
const stockAudioPlayed = ref(new Map());

// 音频播放相关数据
const audioUrl = ref('');
const isAudioPlaying = ref(false);

// 计算属性 - 从store获取当前股票数据
const currentStock = computed(() => emotionStore.activeStock);
const stockName = computed(() => currentStock.value?.stockInfo.name || "");
const displayDate = computed(() => {
  if (!currentStock.value?.apiData) return "";
  const lastData = currentStock.value.apiData.GSWDJ?.at(-1);
  return lastData ? lastData[0] : "";
});
const data1 = computed(() => {
  if (!currentStock.value?.apiData) return null;
  const lastData = currentStock.value.apiData.GSWDJ?.at(-1);
  return lastData ? Math.round(lastData[1]) : null;
});
const data2 = computed(() => {
  if (!currentStock.value?.apiData) return null;
  const lastData = currentStock.value.apiData.GSWDJ?.at(-1);
  return lastData ? Math.round(lastData[2]) : null;
});
const currentConclusion = computed(() => {
  return currentStock.value?.conclusionData || '';
});
const parsedConclusion = computed(() => {
  if (!currentConclusion.value) return null;
  try {
    return JSON.parse(currentConclusion.value);
  } catch (error) {
    console.error('解析结论数据失败:', error);
    return null;
  }
});



// 监听当前股票变化，重新渲染图表
watch(currentStock, (newStock) => {
  if (newStock && newStock.apiData) {
    isPageLoaded.value = true;
    isLoading.value = false; // 数据加载完成，关闭加载状态
    // 停止当前播放的音频
    stopAudio();
    // 清理正在进行的打字机效果定时器
    clearTypewriterTimers();
    // 重置触发状态，让每个股票都能独立触发效果
    hasTriggeredAudio.value = false;
    hasTriggeredTypewriter.value = false;

    // 获取股票代码作为唯一标识
    const stockCode = newStock.stockInfo?.code || newStock.stockInfo?.symbol;

    // 检查该股票是否已经显示过打字机效果
    if (stockCode && stockTypewriterShown.value.has(stockCode)) {
      // 如果已经显示过，直接显示完整文本和标题
      if (newStock.conclusionData) {
        try {
          const conclusion = JSON.parse(newStock.conclusionData);
          displayedTexts.value = {
            one1: conclusion.one1 || '',
            one2: conclusion.one2 || '',
            two: conclusion.two || '',
            three: conclusion.three || '',
            four: conclusion.four || '',
            disclaimer: '该内容由AI生成，请注意甄别'
          };
          displayedTitles.value = {
            one: 'L1: 情绪监控',
            two: 'L2: 情绪解码',
            three: 'L3: 情绪推演',
            four: 'L4: 情绪套利'
          };
          // 显示所有有内容的模块
          moduleVisibility.value = {
            one: !!(conclusion.one1 || conclusion.one2),
            two: !!conclusion.two,
            three: !!conclusion.three,
            four: !!conclusion.four,
            disclaimer: true
          };
        } catch (error) {
          console.error('解析结论数据失败:', error);
        }
      }
    } else {
      // 如果没有显示过，清空显示文本，等待打字机效果
      displayedTexts.value = {
        one1: '',
        one2: '',
        two: '',
        three: '',
        four: '',
        disclaimer: ''
      };
      displayedTitles.value = {
        one: '',
        two: '',
        three: '',
        four: ''
      };
      moduleVisibility.value = {
        one: false,
        two: false,
        three: false,
        four: false,
        disclaimer: false
      };
    }

    nextTick(() => {
      renderCharts(newStock.apiData);
      console.log('0000000000000000000000000',newStock.apiData)
      // 检查场景应用部分是否已经在视口中，如果是则立即触发效果
      setTimeout(() => {
        if (scenarioApplicationRef.value && parsedConclusion.value) {
          const stockCode = newStock.stockInfo?.code || newStock.stockInfo?.symbol;

          // 如果该股票已经显示过，不需要再处理
          if (stockCode && stockTypewriterShown.value.has(stockCode)) {
            return;
          }

          const rect = scenarioApplicationRef.value.getBoundingClientRect();
          const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;

          if (isInViewport) {
            console.log('股票切换后检测到场景应用部分在视口中');

            if (stockCode) {
              // 检查该股票是否是第一次触发
              if (!stockTypewriterShown.value.has(stockCode)) {
                // 该股票第一次：播放音频和打字机效果
                if (audioUrl.value) {
                  console.log('该股票第一次进入场景应用，开始打字机效果和音频播放');
                  hasTriggeredTypewriter.value = true;
                  hasTriggeredAudio.value = true;

                  startTypewriterEffect(parsedConclusion.value);

                  if (!stockAudioPlayed.value.has(stockCode)) {
                    console.log('开始音频播放');
                    stockAudioPlayed.value.set(stockCode, true);
                    playAudio(audioUrl.value);
                  }

                  stockTypewriterShown.value.set(stockCode, true);
                } else {
                  console.log('音频尚未准备好，等待音频加载完成后再触发效果（股票切换后）');
                  return;
                }
              } else {
                // 非第一次或已经触发过：直接显示完整内容，不播放音频和打字机效果
                console.log('非第一次股票切换或已触发过，直接显示完整内容');

                // 直接显示完整内容
                const conclusion = parsedConclusion.value;
                displayedTexts.value = {
                  one1: conclusion.one1 || '',
                  one2: conclusion.one2 || '',
                  two: conclusion.two || '',
                  three: conclusion.three || '',
                  four: conclusion.four || '',
                  disclaimer: '该内容由AI内容生成，请注意甄别'
                };
                displayedTitles.value = {
                  one: 'L1: 情绪监控',
                  two: 'L2: 情绪解码',
                  three: 'L3: 情绪推演',
                  four: 'L4: 情绪套利'
                };
                moduleVisibility.value = {
                  one: !!(conclusion.one1 || conclusion.one2),
                  two: !!conclusion.two,
                  three: !!conclusion.three,
                  four: !!conclusion.four,
                  disclaimer: true
                };
              }
            }
          }
        }
      }, 500); // 延迟500ms确保数据完全加载
    });
  } else {
    isPageLoaded.value = false;
  }
}, { immediate: true });

// 监听parsedConclusion变化，准备数据但不立即触发打字机效果
watch(parsedConclusion, (newConclusion) => {
  if (newConclusion) {
    console.log('场景应用结论数据:', newConclusion);
    // 不再立即开始打字机效果，等待滚动到场景应用部分时触发

    // 尝试多种可能的语音URL字段名
    let voiceUrl = null;
    if (newConclusion.url) {
      // 清理URL字符串，去除空格、反引号等特殊字符
      voiceUrl = newConclusion.url.toString().trim().replace(/[`\s]/g, '');
    } else if (newConclusion.audioUrl) {
      voiceUrl = newConclusion.audioUrl.toString().trim().replace(/[`\s]/g, '');
    } else if (newConclusion.voice_url) {
      voiceUrl = newConclusion.voice_url.toString().trim().replace(/[`\s]/g, '');
    } else if (newConclusion.audio) {
      voiceUrl = newConclusion.audio.toString().trim().replace(/[`\s]/g, '');
    } else if (newConclusion.tts_url) {
      voiceUrl = newConclusion.tts_url.toString().trim().replace(/[`\s]/g, '');
    }

    if (voiceUrl && voiceUrl.startsWith('http')) {
      console.log('找到并清理后的语音URL:', voiceUrl);
      audioUrl.value = voiceUrl;
      console.log('音频URL已准备，检查是否需要立即触发效果');

      // 音频准备好后，检查场景应用部分是否已经在视口中
      nextTick(() => {
        setTimeout(() => {
          if (scenarioApplicationRef.value && currentStock.value?.stockInfo) {
            const stockCode = currentStock.value.stockInfo.code || currentStock.value.stockInfo.symbol;
            const rect = scenarioApplicationRef.value.getBoundingClientRect();
            const isInViewport = rect.top < window.innerHeight && rect.bottom > 0;

            if (isInViewport && parsedConclusion.value && stockCode) {
              // 如果该股票已经显示过，不需要再处理
              if (stockTypewriterShown.value.has(stockCode)) {
                return;
              }

              // 该股票第一次：播放音频和打字机效果
              console.log('该股票第一次音频准备完成且场景应用部分在视口中，立即触发效果');
              hasTriggeredTypewriter.value = true;
              hasTriggeredAudio.value = true;

              startTypewriterEffect(parsedConclusion.value);

              if (!stockAudioPlayed.value.has(stockCode)) {
                console.log('立即开始音频播放');
                stockAudioPlayed.value.set(stockCode, true);
                playAudio(audioUrl.value);
              }
              stockTypewriterShown.value.set(stockCode, true);
            }
          }
        }, 100); // 短暂延迟确保DOM更新完成
      });
    } else {
      console.log('未找到有效的语音URL，原始URL:', newConclusion.url);
      console.log('结论数据中的所有字段:', Object.keys(newConclusion));
    }
  }
}, { immediate: true });

// 打字机效果函数
function startTypewriterEffect(conclusion) {
  console.log('开始打字机效果，结论数据:', conclusion);

  // 详细调试各个字段
  console.log('L1字段 - one1:', conclusion.one1);
  console.log('L1字段 - one2:', conclusion.one2);
  console.log('L2字段 - two:', conclusion.two);
  console.log('L3字段 - three:', conclusion.three);
  console.log('L4字段 - four:', conclusion.four);

  // 清除之前的定时器
  typewriterTimers.value.forEach(timer => clearTimeout(timer));
  typewriterTimers.value = [];

  // 重置显示文本和状态
  displayedTexts.value = {
    one1: '',
    one2: '',
    two: '',
    three: '',
    four: '',
    disclaimer: ''
  };

  displayedTitles.value = {
    one: '',
    two: '',
    three: '',
    four: ''
  };

  moduleVisibility.value = {
    one: false,
    two: false,
    three: false,
    four: false,
    disclaimer: false
  };

  // 定义打字速度（毫秒）
  const typeSpeed = 200;
  let totalDelay = 0;

  // 定义模块配置
  const modules = [
    {
      key: 'one',
      title: 'L1: 情绪监控',
      contents: [
        { key: 'one1', text: conclusion.one1 },
        { key: 'one2', text: conclusion.one2 }
      ]
    },
    {
      key: 'two',
      title: 'L2: 情绪解码',
      contents: [
        { key: 'two', text: conclusion.two }
      ]
    },
    {
      key: 'three',
      title: 'L3: 情绪推演',
      contents: [
        { key: 'three', text: conclusion.three }
      ]
    },
    {
      key: 'four',
      title: 'L4: 情绪套利',
      contents: [
        { key: 'four', text: conclusion.four }
      ]
    }
  ];

  // 按模块顺序处理
  modules.forEach((module) => {
    // 检查模块是否有内容
    const hasContent = module.contents.some(content => content.text && content.text.trim());
    console.log(`模块 ${module.key} 是否有内容:`, hasContent, '内容:', module.contents.map(c => c.text));
    if (!hasContent) return;

    console.log(`开始显示模块 ${module.key}`);
    // 显示模块
    const showModuleTimer = setTimeout(() => {
      moduleVisibility.value[module.key] = true;
      console.log(`模块 ${module.key} 已设置为可见`);
    }, totalDelay);
    typewriterTimers.value.push(showModuleTimer);
    totalDelay += 100;

    // 打字机效果显示标题
    const title = module.title;
    for (let i = 0; i <= title.length; i++) {
      const timer = setTimeout(() => {
        displayedTitles.value[module.key] = title.substring(0, i);
      }, totalDelay + i * typeSpeed);
      typewriterTimers.value.push(timer);
    }
    totalDelay += title.length * typeSpeed + 300; // 标题完成后间隔

    // 打字机效果显示内容
    module.contents.forEach((content) => {
      if (content.text && content.text.trim()) {
        const text = content.text;
        for (let i = 0; i <= text.length; i++) {
          const timer = setTimeout(() => {
            displayedTexts.value[content.key] = text.substring(0, i);
          }, totalDelay + i * typeSpeed);
          typewriterTimers.value.push(timer);
        }
        totalDelay += text.length * typeSpeed + 500; // 内容完成后间隔
      }
    });

    totalDelay += 800; // 模块间间隔
  });

  // 添加免责声明的打字机效果（在所有模块显示完成后）
  const disclaimerText = '该内容由AI内容生成，请注意甄别';

  // 显示免责声明模块
  const showDisclaimerTimer = setTimeout(() => {
    moduleVisibility.value.disclaimer = true;
  }, totalDelay);
  typewriterTimers.value.push(showDisclaimerTimer);
  totalDelay += 100;

  // 打字机效果显示免责声明
  for (let i = 0; i <= disclaimerText.length; i++) {
    const timer = setTimeout(() => {
      displayedTexts.value.disclaimer = disclaimerText.substring(0, i);
    }, totalDelay + i * typeSpeed);
    typewriterTimers.value.push(timer);
  }
}

// 清理定时器的函数
function clearTypewriterTimers() {
  typewriterTimers.value.forEach(timer => clearTimeout(timer));
  typewriterTimers.value = [];
}

// 音频播放函数
function playAudio(url) {
  console.log('尝试播放音频:', url);

  if (!url) {
    console.warn('音频URL为空，跳过播放');
    isAudioPlaying.value = false;
    return;
  }

  // 检查是否启用了语音功能
  console.log('语音功能状态:', audioStore.isVoiceEnabled);
  if (!audioStore.isVoiceEnabled) {
    console.log('语音功能已关闭，跳过播放');
    return;
  }

  console.log('开始创建音频实例...');

  try {
    // 停止之前的音频
    if (audioStore.nowSound) {
      audioStore.nowSound.stop();
    }

    // 创建新的音频实例
    const newSound = new Howl({
      src: [url],
      html5: true,
      format: ['mp3', 'wav'],
      onplay: () => {
        isAudioPlaying.value = true;
        console.log('开始播放场景应用语音');
      },
      onend: () => {
        isAudioPlaying.value = false;
        console.log('场景应用语音播放结束');
      },
      onstop: () => {
        isAudioPlaying.value = false;
        console.log('场景应用语音播放停止');
      },
      onerror: (error) => {
        isAudioPlaying.value = false;
        console.error('音频播放错误:', error);
      }
    });

    // 保存音频实例到store
    audioStore.nowSound = newSound;
    audioStore.setAudioInstance(newSound);

    // 播放音频
    newSound.play();

  } catch (error) {
    console.error('创建音频实例失败:', error);
    isAudioPlaying.value = false;
  }
}

// 停止音频播放
function stopAudio() {
  if (audioStore.nowSound) {
    audioStore.nowSound.stop();
  }
  isAudioPlaying.value = false;
}
// 触发图片旋转的方法
function startImageRotation() {
  isRotating.value = true;
  // 如果你想在一段时间后停止旋转，可以添加以下代码
  setTimeout(() => {
    isRotating.value = false;
  }, 5000); // 5 秒后停止旋转
}


// 发送消息方法
async function handleSendMessage(input) {
  console.log("发送内容:", input);

  // 检查用户输入内容是否为空
  if (input.trim()) {
    const userMessage = reactive({ sender: 'user', text: input });
    messages.value.push(userMessage);
    // 设置加载状态，隐藏图表页面
    isLoading.value = true;
    isPageLoaded.value = false;
    // 触发图片旋转
    isRotating.value = true;

    try {
      // 用来调用工作流接口的参数
      const params = {
        content: userMessage.text,
        userData: {
          token:
            "9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs",
          language: "cn",
          brainPrivilegeState: "1",
          swordPrivilegeState: "1",
          stockForecastPrivile: "1",
          spaceForecastPrivile: "1",
          aibullPrivilegeState: "1",
          aigoldBullPrivilegeS: "1",
          airadarPrivilegeStat: "1",
          marketList: "hk,cn,usa,my,sg,vi,in,gb",
        },
      };

      const result = await getReplyAPI(params);
      const response = await result.json(); // 解析返回的 JSON 数据
      console.log("工作流接口返回数据:", response);

      // 解析 data 字段
      const parsedData = JSON.parse(response.data); // 将字符串形式的 JSON 转换为对象
      console.log("解析后的数据:", parsedData);

      if (parsedData && parsedData.market && parsedData.code) {
        console.log("工作流接口返回股票信息:", parsedData);
        // 调用第二个工作流接口
        const conclusionParams = {
          content: input.trim(),
          userData: {
            token:
              "9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs",
            language: "cn",
            marketList: "hk,cn,usa,my,sg,vi,in,gb",
          },
          code: parsedData.code,
          market: parsedData.market,
        };
        console.log('======================================')

        // 取消自动滚动效果
        // console.log('第二个工作流接口开始调用，立即开始缓慢滚动');
        // startAutoScroll();

        // 同时调用第二个数据流接口和fetchData方法
        const [conclusionResult, fetchDataResult] = await Promise.all([
          getConclusionAPI(conclusionParams),
          fetchData(parsedData.code, parsedData.market, parsedData.name || "未知股票", input.trim())
        ]);

        // 处理结论接口返回的数据
        const conclusionResponse = await conclusionResult.json();
        console.log("第二个工作流接口返回数据:", conclusionResponse);

        // 将结论数据存储到响应式变量和store中
        if (conclusionResponse && conclusionResponse.data) {
          conclusionData.value = conclusionResponse.data;
          // 将结论数据存储到store中的当前激活股票
          emotionStore.updateActiveStockConclusion(conclusionResponse.data);
          console.log("结论数据已存储到响应式变量和store中:", conclusionData.value);
        }

        console.log('------------------------------------')

      } else {
        ElMessage.error('工作流接口未返回非股票信息');
      }
    } catch (error) {
      ElMessage.error('请求工作流接口失败，请检查网络连接');
    } finally {
      // 停止图片旋转
      isRotating.value = false;
    }
  } else {
    ElMessage.error('消息发送失败，请检查网络连接');
  }
}

// 请求数据接口
async function fetchData(code, market, stockName, queryText) {
  try {
    const stockDataParams = {
      // token: '+XgqsgdW0RLIbIG2pxnnbZi0+fEeMx8pywnIlrmTxtkSaPZ9xjSOWrxq+s0rL3RrfNhXPvGtz9srFfjwu8A',
      token: '9ior41AF0xTIbIG2pRnnbZi0+fEeMx8pywnIlrmTwo5FbqJ9lWrSWOxp9MkpKiNtedtUafqvzIwpFKrwuMs',
      market: market,
      code: code,
      language: 'cn',
      version: version1.value
    };

    const stockDataResult = await axios.post(
      // "http://39.101.133.168:8828/link/api/aiEmotion/client/getAiEmotionData",
      'https://api.homilychart.com/link/api/aiEmotion/client/getAiEmotionData',
      stockDataParams,
      {
        headers: {
          "Content-Type": "application/json",
        },
      }
    );

    const stockDataResponse = stockDataResult.data; // 获取返回所有的数据
    console.log('图表数据接口返回数据:', stockDataResponse.data);

    if (stockDataResponse.code === 200 && stockDataResponse.data) {
      console.log(stockDataResponse.code)

      // 创建股票数据对象
      const stockData = {
        queryText: queryText,
        stockInfo: {
          name: stockName,
          code: code,
          market: market
        },
        apiData: stockDataResponse.data,
        conclusionData: conclusionData.value, // 包含结论数据
        timestamp: new Date().toISOString()
      };

      // 将股票数据添加到store中
      emotionStore.addStock(stockData);

      console.log('股票数据已添加到store');

    } else {
      ElMessage.error('获取接口数据失败');
    }
  } catch (error) {
    ElMessage.error('获取接口数据失败。。。');
  }
}

// 渲染组件图表的方法
function renderCharts(data) {
  nextTick(() => {
    // 添加小延迟确保DOM完全更新
    setTimeout(() => {
      try {
        // 深拷贝数据避免污染原始数据
        const clonedData = JSON.parse(JSON.stringify(data));
        console.log('已深拷贝数据，避免污染原始数据');
        console.log('所有数据1111111111111：', clonedData)
        // 渲染股市温度计图表
        if (marketTemperatureRef.value && clonedData.GSWDJ) {
          console.log("开始渲染股市温度计图表");
          console.log("股市温度计数据", clonedData.GSWDJ);
          marketTemperatureRef.value.initChart(clonedData.GSWDJ, clonedData.KLine20, clonedData.WDRL);
          console.log("股市温度计图表已渲染");
        }
        // 渲染情绪解码器图表
        if (emotionDecodRef.value && clonedData.QXJMQ) {
          console.log("开始渲染情绪解码器图表");
          console.log("情绪解码器数据", clonedData.QXJMQ);
          emotionDecodRef.value.initQXNLZHEcharts(clonedData.KLine20, clonedData.QXJMQ);
          console.log("情绪解码器图表已渲染");
        }
        // 渲染情绪探底雷达图表
        if (emotionalBottomRadarRef.value && clonedData.QXTDLD) {
          console.log("开始渲染情绪探底雷达图表");
          console.log("探底雷达数据", clonedData.QXTDLD);
          emotionalBottomRadarRef.value.initEmotionalBottomRadar(
            clonedData.KLine20,
            clonedData.QXTDLD
          );
          console.log("情绪探底雷达图表已渲染");
        }
        // 渲染情绪能量转化器图表
        if (emoEnergyConverterRef.value && clonedData.QXNLZHQ) {
          console.log("开始渲染情绪能量转化器图表");
          console.log("KLine20:", clonedData.KLine20);
          console.log("QXNLZHQ:", clonedData.QXNLZHQ);
          emoEnergyConverterRef.value.initQXNLZHEcharts(clonedData.KLine20, clonedData.QXNLZHQ);
          console.log("情绪能量转化器图表已渲染");
        }
      } catch (error) {
        console.error('图表渲染过程中发生错误:', error);
        ElMessage.error('图表渲染失败，请重试');
      }
    }, 100); // 100ms延迟确保DOM稳定
  });
}

const scrollToBottom = async () => {
  const container = userInputDisplayRef.value;
  if (!container) return;
  await nextTick();
  console.log(container.scrollHeight, "container.scrollHeight");
  console.log(container.scrollTop, "container.scrollTop");
  console.log(container.offsetHeight, "container.offsetHeight");
  container.scrollTop = container.scrollHeight - container.offsetHeight;
};


// 检查数据是否已加载完成
function isDataLoaded() {
  // 检查页面是否已加载
  if (!isPageLoaded.value) {
    console.log('页面数据尚未加载完成');
    return false;
  }

  // 检查当前股票数据是否存在
  if (!currentStock.value || !currentStock.value.apiData) {
    console.log('股票数据尚未加载完成');
    return false;
  }

  // 检查图表组件是否已渲染
  const requiredRefs = [
    marketTemperatureRef.value,
    emotionDecodRef.value,
    emotionalBottomRadarRef.value,
    emoEnergyConverterRef.value
  ];

  const allRefsLoaded = requiredRefs.every(ref => ref !== null);
  if (!allRefsLoaded) {
    console.log('图表组件尚未完全加载');
    return false;
  }

  console.log('所有数据和组件已加载完成，可以开始滚动');
  return true;
}

// 自动滚动函数
function startAutoScroll() {
  if (isAutoScrolling.value) return;

  // 检查数据是否已加载完成
  if (!isDataLoaded()) {
    console.log('数据尚未加载完成，延迟1秒后重试');
    setTimeout(() => {
      startAutoScroll();
    }, 1000);
    return;
  }

  isAutoScrolling.value = true;
  console.log('开始流畅自动滚动');

  // 获取页面总高度
  const documentHeight = document.documentElement.scrollHeight;
  const windowHeight = window.innerHeight;
  const maxScrollTop = documentHeight - windowHeight;

  // 滚动参数
  const scrollDuration = 15000; // 总滚动时间15秒
  const scrollStep = maxScrollTop / (scrollDuration / 50); // 每50ms滚动的距离
  let currentScrollTop = 0;

  function smoothScroll() {
    if (currentScrollTop < maxScrollTop) {
      currentScrollTop += scrollStep;
      if (currentScrollTop > maxScrollTop) {
        currentScrollTop = maxScrollTop;
      }

      window.scrollTo({
        top: currentScrollTop,
        behavior: 'auto' // 使用auto而不是smooth，因为我们自己控制滚动
      });

      // 继续滚动
      setTimeout(smoothScroll, 50);
    } else {
      console.log('流畅自动滚动完成');
      isAutoScrolling.value = false;
    }
  }

  // 延迟1秒开始滚动
  setTimeout(smoothScroll, 1000);
}

// 设置Intersection Observer监听场景应用部分
function setupIntersectionObserver() {
  if (!scenarioApplicationRef.value) return;

  const observer = new IntersectionObserver(
    (entries) => {
      entries.forEach((entry) => {
        if (entry.isIntersecting) {
          console.log('场景应用部分进入视口');

          // 获取当前股票代码
          const stockCode = currentStock.value?.stockInfo?.code || currentStock.value?.stockInfo?.symbol;

          if (parsedConclusion.value && stockCode) {
            // 检查该股票是否是第一次触发
            if (!stockTypewriterShown.value.has(stockCode)) {
              // 该股票第一次：播放音频和打字机效果
              if (audioUrl.value) {
                console.log('该股票第一次进入场景应用，开始打字机效果和音频播放');
                hasTriggeredTypewriter.value = true;
                hasTriggeredAudio.value = true;

                // 开始打字机效果
                startTypewriterEffect(parsedConclusion.value);

                // 播放音频
                if (!stockAudioPlayed.value.has(stockCode)) {
                  console.log('开始音频播放');
                  stockAudioPlayed.value.set(stockCode, true);
                  playAudio(audioUrl.value);
                }

                // 记录该股票已显示过
                stockTypewriterShown.value.set(stockCode, true);
              } else {
                console.log('音频尚未准备好，等待音频加载完成后再触发效果');
                return;
              }
            } else {
              // 非第一次或已经触发过：直接显示完整内容，不播放音频和打字机效果
              console.log('非第一次进入场景应用或已触发过，直接显示完整内容');

              // 直接显示完整内容
              const conclusion = parsedConclusion.value;
              displayedTexts.value = {
                one1: conclusion.one1 || '',
                one2: conclusion.one2 || '',
                two: conclusion.two || '',
                three: conclusion.three || '',
                four: conclusion.four || '',
                disclaimer: '该内容由AI内容生成，请注意甄别'
              };
              displayedTitles.value = {
                one: 'L1: 情绪监控',
                two: 'L2: 情绪解码',
                three: 'L3: 情绪推演',
                four: 'L4: 情绪套利'
              };
              // 显示所有有内容的模块
              moduleVisibility.value = {
                one: !!(conclusion.one1 || conclusion.one2),
                two: !!conclusion.two,
                three: !!conclusion.three,
                four: !!conclusion.four,
                disclaimer: true
              };
            }
          }
        }
      });
    },
    {
      threshold: 0.3, // 当30%的元素进入视口时触发
      rootMargin: '0px 0px -100px 0px' // 提前100px触发
    }
  );

  observer.observe(scenarioApplicationRef.value);
  intersectionObserver.value = observer;
}

// 手动触发自动滚动
function triggerAutoScroll() {
  // 检查是否正在滚动
  if (isAutoScrolling.value) {
    console.log('自动滚动正在进行中，请稍候');
    return;
  }

  // 检查数据是否已准备好
  if (!isDataLoaded()) {
    console.log('数据尚未准备完成，请等待数据加载后再试');
    // 可以显示提示信息给用户
    return;
  }

  console.log('手动触发自动滚动');
  startAutoScroll();
}

// 页面挂载完成后触发图片旋转和设置滚动监听
onMounted(() => {
  startImageRotation();

  // 等待DOM完全渲染后设置监听器
  nextTick(() => {
    setupIntersectionObserver();
    // 移除自动滚动触发，改为在第二个工作流接口调用时触发
  });
});

// 组件卸载时清理定时器、音频和observer
onUnmounted(() => {
  clearTypewriterTimers();
  stopAudio();

  // 重置触发状态
  hasTriggeredAudio.value = false;
  hasTriggeredTypewriter.value = false;

  // 清理Intersection Observer
  if (intersectionObserver.value) {
    intersectionObserver.value.disconnect();
    intersectionObserver.value = null;
  }
});

// 导出方法供外部使用
defineExpose({
  handleSendMessage,
  triggerAutoScroll
});
</script>

<style scoped>
.container {
  padding-top: 2%;
}

.class003 {
  padding-top: 8%;
  padding-left: 10%;
}

.class003 .div02 {
  background-image: url('@/assets/img/AiEmotion/redBorder.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 35%;
  min-height: 40px;
  float: left;
  margin-left: 9%;
  margin-top: 2%;
  text-align: center;
  font-size: 24px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.class003 .div01 {
  background-image: url('@/assets/img/AiEmotion/blueBorder.png');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  width: 35%;
  min-height: 40px;
  float: left;
  margin-left: 9%;
  text-align: center;
  font-size: 24px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
}

.golden-wheel {
  width: 100%;
  display: flex;
  justify-content: center;
}

.golden-wheel-img {
  width: 60%;
  max-width: 500px;
  height: auto;
}



/* 定义旋转动画 */
@keyframes rotate {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

/* 应用动画到图片 */
.rotating-image {
  animation: rotate 5s linear;
  /* 5 秒完成一次旋转，线性速度*/
  will-change: transform;
  /* 优化动画性能 */
}

.bk-image {
  background-image: url("@/assets/img/AiEmotion/bk03.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 95%;
  height: auto;
  margin: 0 auto;
  margin-top: 20px;

  .conclusion-container {
    padding: 20px;
    border-radius: 15px;
    margin: 20px;
    background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.15) 100%);
    border: 2px solid rgba(0, 212, 255, 0.4);
    box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(15px);

    .conclusion-item {
      margin-bottom: 20px;
      padding: 20px;
      border-radius: 12px;
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 150, 255, 0.1) 100%);
      border: 1px solid rgba(0, 212, 255, 0.5);
      border-left: 5px solid #00d4ff;
      box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;

      &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 2px;
        background: linear-gradient(90deg, #00d4ff, #0099ff, #00d4ff);
        opacity: 0.8;
      }



      &:last-child {
        margin-bottom: 0;
      }

      .conclusion-title {
        color: #FFD700;
        font-size: 22px;
        font-weight: bold;
        margin: 0 0 15px 0;
        text-align: center;
        text-shadow: 0 2px 8px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.3);
        letter-spacing: 2px;
        position: relative;

        &::after {
          content: '';
          position: absolute;
          bottom: -5px;
          left: 50%;
          transform: translateX(-50%);
          width: 60px;
          height: 2px;
          background: linear-gradient(90deg, transparent, #00d4ff, transparent);
        }
      }

      .conclusion-text {
        color: #ffffff;
        font-size: 20px;
        line-height: 1.8;
        margin: 0 0 12px 0;
        text-align: left;
        word-wrap: break-word;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
        padding-left: 15px;
        position: relative;

        &::before {
          content: '▶';
          position: absolute;
          left: 0;
          top: 0;
          color: #00d4ff;
          font-size: 12px;
          opacity: 0.7;
        }

        &:last-child {
          margin-bottom: 0;
        }
      }
    }
  }

  .conclusion-placeholder {
    padding: 30px;
    text-align: center;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px dashed rgba(153, 153, 153, 0.3);

    p {
      color: #999999;
      font-size: 16px;
      margin: 0;
      font-style: italic;
    }
  }
}

/* 最后文字的颜色 */
.text-container {
  position: relative;
  color: white;
  text-align: left;
  padding: 20px;
  border-radius: 15px;
  margin: 20px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.15) 100%);
  border: 2px solid rgba(0, 212, 255, 0.4);
  box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(15px);
}

.text-container p {
  margin: 0 auto;
  font-size: 40px;
  margin-left: 0%;
  padding: 20px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 150, 255, 0.1) 100%);
  border: 1px solid rgba(0, 212, 255, 0.5);
  border-left: 5px solid #00d4ff;
  box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
  text-shadow: 0 2px 8px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.3);
  letter-spacing: 2px;
}

.text-container p::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #00d4ff, #0099ff, #00d4ff);
  opacity: 0.8;
}

.text-container .title {
  display: block;
  color: #FFD700;
  font-weight: bold;
  margin-bottom: 10px;
  font-size: 22px;
}

.text-container .content {
  display: block;
  color: white;
  font-size: 20px;
}



.class07 {
  background-image: url("@/assets/img/AiEmotion/bk03.png");
  /* 使用导入的背景图片 */
  background-size: cover;
  /* 确保背景图片完整显示 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  width: 95%;
  /* 设置容器宽度 */
  height: auto;
  /* 高度根据内容动态变化 */
  min-height: 70rem;
  /* 设置最小高度，确保图片显示 */
  margin: 0 auto;
}

.class0700 {
  margin: 0 auto;
  width: fit-content;
  margin-top: 2%;
  margin-bottom: 1%;
}

.class0702 {
  margin: 0 auto;
  width: fit-content;
  margin-top: 2%;
  margin-bottom: 1%;
}

.class0402 {
  width: 80%;
  margin: 0 auto;
}


.class0603 {
  min-width: 100%;
  margin-top: 3%;
}

.class0502 {
  padding-top: 7%;
  display: flex;
  flex-direction: column;
  /* 竖向排列元素 */
  gap: 1rem;
  margin-left: 2rem;
}

.class0601 {
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  /* 竖向排列元素 */
  gap: 1rem;
  margin-left: 2rem;
}

.img03 {
  width: 10%;
  height: auto;
  margin-left: 43%;
}

.img04 {
  width: 10%;
  height: auto;
  margin-left: 43%;
}

.class0701 {
  margin: 0 auto;
  width: fit-content;
}

.class0501 {
  margin: 0 auto;
  width: fit-content;
  margin-top: 2%;
  margin-bottom: 1%;
}

.class0403 {
  margin: 0 auto;
  width: fit-content;
  margin-top: 2%;
  margin-bottom: 1%;
}

.class0301 {
  margin: 0 auto;
  width: fit-content;
  margin-top: 2%;
  margin-bottom: 1%;
}

.class0201 {
  margin: 0 auto;
  width: fit-content;
  margin-bottom: 1%;
}

.class0401 {
  padding-top: 5rem;
  display: flex;
  flex-direction: column;
  /* 竖向排列元素 */
  gap: 1rem;
  margin-left: 2rem;
}

.img02 {
  width: 10%;
  height: auto;
  margin-left: 43%;
}

.title2 {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin-left: 44%;
}

.title3 {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin-left: 43%;
}

.title4 {
  color: white;
  font-size: 20px;
  font-weight: bold;
  margin-left: 41.5%;
}

.class09 {
  text-align: center;
  margin-top: 2%;
  margin-bottom: 1%;
}

/* 为需要放大的图片添加样式 */
.scaled-img {
  background-image: url('@/assets/img/AiEmotion/tree02.jpg');
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  width: 70%;
  height: 400px;
  min-height: 400px;
  text-align: center;
  margin: 0 auto;
  margin-top: 3%;
}

.lz-img {
  text-align: center;
  padding-top: 70px;
}

.class08 {
  background-image: url("@/assets/img/AiEmotion/bk03.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  width: 95%;
  height: auto;
  min-height: 40rem;
  margin: 0 auto;
}

.class06 {
  background-image: url('@/assets/img/AiEmotion/bk03.png');
  /* 使用导入的背景图片 */
  background-size: 100% 100%;
  /* 确保背景图片完整显示 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  width: 95%;
  /* 设置容器宽度 */
  height: auto;
  /* 高度根据内容动态变化 */
  min-height: 66rem;
  /* 设置最小高度，确保图片显示 */
  margin: 0 auto;
}

.class05 {
  background-image: url("@/assets/img/AiEmotion/bk03.png");
  /* 使用导入的背景图片 */
  background-size: 100% 100%;
  /* 确保背景图片完整显示 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  width: 95%;
  /* 设置容器宽度 */
  height: auto;
  /* 高度根据内容动态变化 */
  min-height: 86rem;
  /* 设置最小高度，确保图片显示 */
  margin: 0 auto;
}

.class04 {
  background-image: url('@/assets/img/AiEmotion/bk03.png');
  /* 使用导入的背景图片 */
  background-size: 100% 100%;
  /* 确保背景图片完整显示 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  width: 95%;
  /* 设置容器宽度 */
  height: auto;
  /* 高度根据内容动态变化 */
  min-height: 75rem;
  /* 设置最小高度，确保图片显示 */
  margin: 0 auto;
}

.class03 {
  background-image: url('@/assets/img/AiEmotion/bk03.png');
  /* 使用导入的背景图片 */
  background-size: 100% 100%;
  /* 确保背景图片完整显示 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  width: 100%;
  /* 设置容器宽度 */
  height: auto;
  /* 高度根据内容动态变化 */
  min-height: 70rem;
  /* 设置最小高度，确保图片显示 */
  margin: 0 auto;
  /* display: flex;
    flex-direction:row;
      align-items: center;  
    padding: 1rem;
    gap: 1rem;    */
}

.class00 {
  background-size: 100% 100%;
  /* 确保背景图片完整显示 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  width: 95%;
  /* 设置容器宽度 */
  height: auto;
  /* 高度根据内容动态变化 */
  min-height: 55rem;
  /* 设置最小高度，确保图片显示 */
  margin: 0 auto;
}

.content1 {
  display: flex;
  flex-direction: column;
  /* 竖向排列元素 */
  gap: 1rem;
  margin-left: 10%;
}

.title1 {
  color: white;
  font-size: 30px;
  font-weight: bold;
  margin-left: 0%;

}

.img01 {
  width: 10%;
  height: auto;
}

.div00 {
  display: flex;
  flex-direction: column;
  /* 竖向排列元素 */
  margin-left: 37%;
  gap: 1rem;
  margin-top: -12%;
  width: 100%;
  height: auto;
}

.span02 {
  font-size: 1.5rem;
  color: white;
  float: right;
  margin-top: -2%;
}

.span01 {
  background-image: url('@/assets/img/AiEmotion/bk01.png');
  /* 使用导入的背景图片 */
  background-size: 100% 100%;
  /* 背景图片覆盖整个容器 */
  background-repeat: no-repeat;
  /* 防止背景图片重复 */
  /* display: inline-block; */
  /* 确保容器是块级元素 */
  padding: 10px;
  /* 添加内边距以显示内容 */
  color: #fff;
  /* 设置文字颜色以确保可读性 */
  font-size: 1.5rem;
  /* 增加字体大小以便更清晰显示股票名称 */
  text-align: center;
  /* transform: translate(-50%, -50%); */
  margin-left: 0;
  width: 30%;
  height: auto;
}

.class01 {
  width: 100%;
  /* 固定容器宽度 */
  min-height: 100px;
  /* 设置最小高度，确保初始显示 */
  height: auto;
  /* 高度根据内容动态变化 */
  /* 添加内边距，确保内容与边界有间距 */
  box-sizing: border-box;
  /* 包括内边距在宽度和高度计算中 */
  background-color: #02107d;
  margin: 0 auto;
  /* 居中容器 */
  margin-bottom: 10rem;
}

.ai-emotion-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  position: relative;
}

.user-input-display {
  margin-top: 20px;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.message-container {
  display: flex;
  margin-bottom: 10px;
}

.user-message {
  background-color: #007bff;
  color: #fff;
  padding: 10px 15px;
  border-radius: 15px;
  max-width: 60%;
  text-align: left;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  align-self: flex-end;
}

.ai-message {
  background-color: #f1f1f1;
  color: #333;
  padding: 10px 15px;
  border-radius: 15px;
  max-width: 60%;
  text-align: left;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  align-self: flex-start;
}

.input-container {
  display: flex;
  align-items: center;
  gap: 10px;
}

.fixed-bottom {
  position: fixed;
  bottom: 100px;
  left: 0;
  width: 100%;
  background-color: #f8f9fa;
  padding: 10px 20px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
}

.input-box {
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: calc(100% - 120px);
}

.send-button {
  padding: 10px 20px;
  font-size: 16px;
  color: #fff;
  background-color: #007bff;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.send-button:hover {
  background-color: #0056b3;
}

/* 手机端适配样式 */
@media only screen and (max-width: 768px) {
  .container {
    padding-top: 2%;
  }

  .title4 {
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin-left: 28%;
  }

  .class0603 {
    min-width: 100%;
    margin-top: 25%;
  }

  .scaled-img {
    background-image: url('@/assets/img/AiEmotion/tree02.jpg');
    background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
    text-align: center;
    width: 95%;
    margin-top: 6%;
    height: 200px;
    min-height: 200px;
  }

  .title3 {
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin-left: 30%;
  }

  .title2 {
    color: white;
    font-size: 20px;
    font-weight: bold;
    margin-left: 30%;
  }

  /* 图片样式 */
  .golden-wheel img {
    width: 100%;
  }

  .class0201 img {
    width: 100%;
  }

  .class0301 img {
    width: 100%;
    margin: 10px 10px;
  }

  .class0403 img {
    width: 100%;
    margin: 10px 10px;
  }

  .class0501 img {
    width: 100%;
    margin: 10px 10px;
  }

  .class0702 img {
    width: 100%;
    margin: 10px 10px;
  }

  .class0700 img {
    width: 100%;
    margin: 10px 10px;
  }

  .scaled-img img {
    width: 30%;
    height: auto;
  }

  .class09 img {
    width: 100%;
    margin: 10px 10px;
  }

  .img01 {
    height: auto;
    margin-left: 7%;
    width: 25%;
    margin-top: 10px;
  }

  .title1 {
    font-size: 20px;
    margin-left: 5%;
  }

  .class02 .span02 {
    font-size: 14px;
    color: white;
    float: right;
    margin-top: -6%;
  }

  .class03 {
    background-image: url('@/assets/img/AiEmotion/bk03.png');
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    /* margin-left: -45px; */
    height: auto;
  }

  .class03 .class003 {
    padding-top: 3rem;
    padding-left: 0rem;
  }

  .class01 {
    min-height: 100px;
    height: auto;
    box-sizing: border-box;
    background-color: #02107d;
    margin-bottom: 10rem;
  }

  .class04 {
    width: 100%;
    height: auto;
    min-height: 38rem;
    /* min-height: 51rem; */
    /* margin-left: -39px; */
    /* min-height: 38rem; */
  }

  .class02 .container img {
    width: 68%;
    height: auto;
    /* margin-top: 5%; */
    margin-left: 0%;
  }

  .img02 {
    width: 25%;
    height: auto;
    margin-left: 32%;
  }

  .class0401 {
    padding-top: 3rem;
  }

  .img03,
  .img04 {
    width: 25%;
    height: auto;
    margin-left: 33%;
  }

  .text-container p {
    font-size: 16px;
  }

  .lz-img {
    margin-bottom: 0;
    padding-top: 0;

    img {
      width: 30%;
      height: auto;
      margin-top: 5%;
    }
  }

  .class08 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    min-height: 20rem;
    margin: 0 auto;
  }

  .bk-image {
    .conclusion-container {
      padding: 15px;
      border-radius: 8px;
      margin: 8px;

      .conclusion-item {
        margin-bottom: 15px;

        &:last-child {
          margin-bottom: 0;
        }

        .conclusion-title {
          color: #FFD700;
          font-size: 16px;
          font-weight: bold;
          margin: 0 0 8px 0;
          text-align: center;
        }

        .conclusion-text {
          color: #ffffff;
          font-size: 14px;
          line-height: 1.5;
          margin: 0 0 6px 0;
          text-align: left;
          word-wrap: break-word;

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .conclusion-placeholder {
      padding: 15px;
      text-align: center;

      p {
        color: #999999;
        font-size: 12px;
        margin: 0;
      }
    }
  }

  .bk-image {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    margin: 0 auto;
    margin-top: 0px;
    margin-left: 0;

    .conclusion-container {
      padding: 20px;
      border-radius: 15px;
      margin: 20px;
      background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.15) 100%);
      border: 2px solid rgba(0, 212, 255, 0.4);
      box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(15px);

      .conclusion-item {
        margin-bottom: 20px;
        padding: 20px;
        border-radius: 12px;
        background: linear-gradient(135deg, rgba(0, 212, 255, 0.2) 0%, rgba(0, 150, 255, 0.1) 100%);
        border: 1px solid rgba(0, 212, 255, 0.5);
        border-left: 5px solid #00d4ff;
        box-shadow: 0 4px 15px rgba(0, 212, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.1);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;

        &::before {
          content: '';
          position: absolute;
          top: 0;
          left: 0;
          right: 0;
          height: 2px;
          background: linear-gradient(90deg, #00d4ff, #0099ff, #00d4ff);
          opacity: 0.8;
        }



        &:last-child {
          margin-bottom: 0;
        }

        .conclusion-title {
          color: #FFD700;
          font-size: 22px;
          font-weight: bold;
          margin: 0 0 15px 0;
          text-align: center;
          text-shadow: 0 2px 8px rgba(0, 212, 255, 0.5), 0 0 20px rgba(0, 212, 255, 0.3);
          letter-spacing: 2px;
          position: relative;

          &::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 50%;
            transform: translateX(-50%);
            width: 60px;
            height: 2px;
            background: linear-gradient(90deg, transparent, #00d4ff, transparent);
          }
        }

        .conclusion-text {
          color: #ffffff;
          font-size: 20px;
          line-height: 1.8;
          margin: 0 0 12px 0;
          text-align: left;
          word-wrap: break-word;
          text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
          padding-left: 15px;
          position: relative;

          &::before {
            content: '▶';
            position: absolute;
            left: 0;
            top: 0;
            color: #00d4ff;
            font-size: 12px;
            opacity: 0.7;
          }

          &:last-child {
            margin-bottom: 0;
          }
        }
      }
    }

    .conclusion-placeholder {
      padding: 30px;
      text-align: center;
      border-radius: 12px;
      background: rgba(255, 255, 255, 0.05);
      border: 1px dashed rgba(153, 153, 153, 0.3);

      p {
        color: #999999;
        font-size: 16px;
        margin: 0;
        font-style: italic;
      }
    }

    .disclaimer-item {
      margin-top: 30px;
      padding: 20px;
      border-top: 1px solid rgba(153, 153, 153, 0.2);
      text-align: center;

      .disclaimer-text {
        color: #999999;
        font-size: 14px;
        margin: 0;
        font-style: italic;
        opacity: 0.8;
        letter-spacing: 1px;
      }
    }
  }

  .class05 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    min-height: 48rem;
  }

  .class06 {
    background-size: 100% 100%;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    min-height: 35rem;
    margin: 0 auto;
  }

  .text-container {
    position: relative;
    top: 0;
    left: 0;
    color: white;
    text-align: left;
    padding: 5%;
  }

  .div00 {
    display: flex;
    flex-direction: column;
    margin-left: 5rem;
    gap: 0;
    margin-top: -6rem;
    width: 100%;
    height: auto;
  }

  .class003 .div01 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 35%;
    min-height: 25px;
    float: left;
    margin-left: 100px;
    text-align: center;
    margin-top: 10px;
    font-size: 10px;
    color: white;
  }

  .class003 .div02 {
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 35%;
    min-height: 25px;
    float: left;
    margin-left: 100px;
    text-align: center;
    margin-top: 10px;
    font-size: 10px;
    color: white;
  }

  .span01 {
    /* 使用导入的背景图片 */
    background-image: url('@/assets/img/AiEmotion/bk01.png');
    background-size: 100% 100%;
    /* 背景图片覆盖整个容器 */
    background-repeat: no-repeat;
    /* 防止背景图片重复 */
    display: inline-block;
    /* 确保容器是块级元素 */
    padding: 10px;
    /* 添加内边距以显示内容 */
    color: #fff;
    /* 设置文字颜色以确保可读性 */
    font-size: 14px;
    /* 增加字体大小以便更清晰显示股票名称 */
    text-align: center;
    width: 50%;
  }

  .class0502,
  .class0601 {
    padding-top: 10%;
  }
}

/* 加载提示样式 */
.loading-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 60vh;
  padding: 40px 20px;
}

.loading-content {
  text-align: center;
  background: linear-gradient(135deg, rgba(0, 212, 255, 0.15) 0%, rgba(0, 100, 200, 0.15) 100%);
  border: 2px solid rgba(0, 212, 255, 0.4);
  border-radius: 20px;
  padding: 40px;
  backdrop-filter: blur(15px);
  box-shadow: 0 8px 25px rgba(0, 212, 255, 0.3);
}

.loading-spinner {
  width: 60px;
  height: 60px;
  border: 4px solid rgba(0, 212, 255, 0.3);
  border-top: 4px solid #00d4ff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin: 0 auto 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }

  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  color: #00d4ff;
  font-size: 18px;
  font-weight: bold;
  text-shadow: 0 2px 8px rgba(0, 212, 255, 0.5);
  letter-spacing: 1px;
}
</style>