情绪解码适配

build/vite/build.js

@@ -5,7 +5,7 @@ export function createBuild(viteEnv) {
         outDir: VITE_OUTPUT_DIR,
         cssCodeSplit: true, // 禁用 CSS 代码拆分,将整个项目中的所有 CSS 将被提取到一个 CSS 文件中
         brotliSize: false, // 关闭打包计算
-        target: 'esnext',
+        target: 'es2020',
         minify: 'terser', // 混淆器, terser 构建后文件体积更小, esbuild
         // 小于此阈值的导入或引用资源将内联为 base64 编码，以避免额外的 http 请求。设置为 0 可以完全禁用此项
         assetsInlineLimit: 4096,

src/api/AiEmotionApi.js

@@ -15,7 +15,7 @@ export const getReplyAPI = function (params) {
     headers: {
       "Content-Type": "application/json",
       Authorization:
-        "Bearer pat_lK1fvhLn9LnWCRETP7yFeR6xQ0niwQdcHJ5ZqpnUk8BdiUWCraPLSzWhiQNp2zOl",
+        "Bearer pat_cOhJRgrEpjXwJJLW1N3YNjCxy19HYTpMFY6XlNCLi4ogm5tdfV266gWIB7MeaRIU",
     },
   });
 };
@@ -31,7 +31,7 @@ export const getConclusionAPI = function (params) {
     headers: {
       "Content-Type": "application/json",
       Authorization:
-        "Bearer pat_lK1fvhLn9LnWCRETP7yFeR6xQ0niwQdcHJ5ZqpnUk8BdiUWCraPLSzWhiQNp2zOl",
+        "Bearer pat_cOhJRgrEpjXwJJLW1N3YNjCxy19HYTpMFY6XlNCLi4ogm5tdfV266gWIB7MeaRIU",
     },
   });
 };

src/views/AIchat.vue

@@ -174,6 +174,28 @@ const playAudioSequence = (audioUrls) => {
       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);
 
@@ -191,6 +213,11 @@ const playAudioSequence = (audioUrls) => {
         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;
@@ -204,6 +231,13 @@ const playAudioSequence = (audioUrls) => {
         audioStore.playbackPosition = 0;
         console.log(`音频 ${currentIndex + 1} 播放完成`);
         currentIndex++;
+        // 如果是最后一个音频播放完成，立即清除实例
+        if (currentIndex >= audioSequence.length) {
+          console.log('最后一个音频播放完成，清除音频实例');
+          audioStore.soundInstance = null;
+          audioStore.nowSound = null;
+          currentIndex = 0; // 立即重置索引
+        }
         // 播放下一个音频
         setTimeout(() => {
           playNext();
@@ -217,16 +251,50 @@ const playAudioSequence = (audioUrls) => {
       },
       onloaderror: (id, err) => {
         console.error(`音频 ${currentIndex + 1} 加载失败:`, err);
-        currentIndex++;
-        // 跳过失败的音频，播放下一个
-        setTimeout(() => {
-          playNext();
-        }, 100);
+        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();
   };
 
@@ -647,17 +715,24 @@ watch(
           const isPlayingAudio = ref(false);
 
           // 播放音频队列
+          // 防止重复调用的标志
+          let isCallingPlayNext = false;
+          
           const playNextAudio = () => {
-            if (audioQueue.value.length === 0 || isPlayingAudio.value) {
+            if (audioQueue.value.length === 0 || isPlayingAudio.value || isCallingPlayNext) {
+              console.log('播放条件不满足 - 队列长度:', audioQueue.value.length, '正在播放:', isPlayingAudio.value, '正在调用:', isCallingPlayNext);
               return;
             }
 
+            isCallingPlayNext = true;
             isPlayingAudio.value = true;
             const audioInfo = audioQueue.value.shift();
             
-            console.log(`开始播放${audioInfo.name}音频`);
+            console.log(`开始播放${audioInfo.name}音频，剩余队列:`, audioQueue.value.length);
             
-            if (audioStore.nowSound) {
+            // 只有在确实需要停止时才停止之前的音频
+            if (audioStore.nowSound && (audioStore.nowSound.playing() || audioStore.nowSound.state() === 'loading')) {
+              console.log('停止之前的音频实例');
               audioStore.nowSound.stop();
             }
 
@@ -669,7 +744,9 @@ watch(
               onplay: () => {
                 audioStore.isPlaying = true;
                 audioStore.isPaused = false;
-                console.log(`${audioInfo.name}音频开始播放`);
+                isCallingPlayNext = false; // 重置调用标志
+                console.log(`${audioInfo.name}音频开始播放，时长:`, audio.duration());
+                console.log('音频播放状态确认 - isPlayingAudio:', isPlayingAudio.value, 'audioStore.isPlaying:', audioStore.isPlaying);
               },
               onpause: () => {
                 audioStore.isPlaying = false;
@@ -683,26 +760,36 @@ watch(
                 console.log(`${audioInfo.name}音频继续播放`);
               },
               onend: () => {
+                console.log(`${audioInfo.name}音频播放完成，准备播放下一个`);
+                console.log('播放完成时的状态 - 队列长度:', audioQueue.value.length, 'isPlayingAudio:', isPlayingAudio.value);
                 audioStore.isPlaying = false;
                 audioStore.isPaused = false;
                 audioStore.playbackPosition = 0;
                 isPlayingAudio.value = false;
-                console.log(`${audioInfo.name}音频播放完成`);
-                // 播放下一个音频
-                setTimeout(() => {
-                  playNextAudio();
-                }, 100);
+                
+                // 确保只有在音频真正播放完成时才播放下一个
+                if (audioQueue.value.length > 0) {
+                  console.log('队列中还有音频，500ms后播放下一个，当前队列:', audioQueue.value.map(item => item.name));
+                  setTimeout(() => {
+                    isCallingPlayNext = false; // 在调用前重置标志
+                    playNextAudio();
+                  }, 500);
+                } else {
+                  console.log('所有音频播放完成');
+                  isCallingPlayNext = false; // 重置调用标志
+                }
               },
               onstop: () => {
+                console.log(`${audioInfo.name}音频被停止`);
                 audioStore.isPlaying = false;
                 audioStore.isPaused = false;
                 audioStore.playbackPosition = 0;
-                isPlayingAudio.value = false;
-                console.log(`${audioInfo.name}音频已停止`);
+                // 注意：不要在onstop中设置isPlayingAudio.value = false，因为这可能是正常的音频切换
               },
               onloaderror: (id, err) => {
                 console.error(`${audioInfo.name}音频播放失败:`, err);
                 isPlayingAudio.value = false;
+                isCallingPlayNext = false; // 重置调用标志
                 // 播放下一个音频
                 setTimeout(() => {
                   playNextAudio();
@@ -714,19 +801,61 @@ watch(
             audioStore.setCurrentAudioUrl(audioInfo.url);
             audioStore.nowSound = audio;
             audioStore.setAudioInstance(audio);
+            
+            console.log(`尝试播放${audioInfo.name}音频`);
             audio.play();
           };
 
-          // 添加音频到播放队列
+          // 音频队列顺序管理
+          const audioQueueOrder = {
+            'API1-第一个': 1,
+            'API2-第二个': 2,
+            'API3-第三个': 3,
+            'API4-第四个': 4
+          };
+          
+          // 添加音频到播放队列（确保顺序）
           const addToAudioQueue = (url, name) => {
+            console.log(`=== 添加音频到队列 ===`);
+            console.log('URL:', url);
+            console.log('Name:', name);
+            console.log('音频启用状态:', audioStore.isVoiceEnabled);
+            
             if (url && audioStore.isVoiceEnabled) {
-              audioQueue.value.push({ url, name });
-              console.log(`音频${name}已添加到播放队列`);
-              // 如果当前没有播放音频，立即开始播放
-              if (!isPlayingAudio.value) {
+              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})`));
+              console.log('当前播放状态详情:');
+              console.log('  - isPlayingAudio:', isPlayingAudio.value);
+              console.log('  - audioStore.isPlaying:', audioStore.isPlaying);
+              console.log('  - audioStore.nowSound:', audioStore.nowSound);
+              console.log('  - isCallingPlayNext:', isCallingPlayNext);
+              console.log('  - 队列长度:', audioQueue.value.length);
+              
+              // 只有在确实没有音频在播放且这是第一个音频时才开始播放
+              if (!isPlayingAudio.value && !audioStore.isPlaying && audioQueue.value.length === 1) {
+                console.log('✅ 条件满足：没有音频在播放且这是第一个音频，立即开始播放');
                 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(`=== 添加音频完成 ===`);
           };
 
           // 重写audioStore的togglePlayPause方法以支持队列播放控制
@@ -735,6 +864,7 @@ watch(
             console.log('主页音频控制按钮被点击');
             console.log('当前音频状态 - isPlaying:', audioStore.isPlaying, 'isPaused:', audioStore.isPaused);
             console.log('当前音频实例:', audioStore.soundInstance);
+            console.log('队列播放状态 - isPlayingAudio:', isPlayingAudio.value, '队列长度:', audioQueue.value.length);
             
             if (audioStore.soundInstance) {
               if (audioStore.isPlaying) {
@@ -752,10 +882,29 @@ watch(
                 audioStore.soundInstance.play();
               }
             } else {
-              console.log('没有音频实例，尝试播放队列中的音频');
-              // 没有音频实例时，尝试播放队列中的音频
-              if (!isPlayingAudio.value && audioQueue.value.length > 0) {
+              console.log('没有音频实例，检查是否需要重新播放队列');
+              // 没有音频实例时，检查是否所有音频都播放完成
+              if (!isPlayingAudio.value && audioQueue.value.length === 0) {
+                console.log('所有音频播放完成，重新构建队列从第一个开始播放');
+                // 重新构建音频队列，按顺序添加所有音频
+                if (audioPreloadStatus.one.url) {
+                  addToAudioQueue(audioPreloadStatus.one.url, "API1-第一个");
+                }
+                if (audioPreloadStatus.two.url) {
+                  addToAudioQueue(audioPreloadStatus.two.url, "API2-第二个");
+                }
+                if (audioPreloadStatus.three.url) {
+                  addToAudioQueue(audioPreloadStatus.three.url, "API3-第三个");
+                }
+                if (audioPreloadStatus.four.url) {
+                  addToAudioQueue(audioPreloadStatus.four.url, "API4-第四个");
+                }
+                console.log('队列重建完成，开始从第一个音频播放');
+              } else if (!isPlayingAudio.value && audioQueue.value.length > 0) {
+                console.log('队列中还有音频，继续播放');
                 playNextAudio();
+              } else {
+                console.log('无法播放 - isPlayingAudio:', isPlayingAudio.value, '队列长度:', audioQueue.value.length);
               }
             }
           };
@@ -767,6 +916,10 @@ watch(
               return Promise.resolve();
             }
 
+            // 立即设置URL，确保即使预加载失败也能使用
+            audioPreloadStatus[apiKey].url = url;
+            console.log(`设置音频${apiKey}的URL:`, url);
+
             return new Promise((resolve) => {
               const audio = new Howl({
                 src: [url],
@@ -777,12 +930,12 @@ watch(
                 onload: () => {
                   console.log(`音频${apiKey}预加载完成:`, url);
                   audioPreloadStatus[apiKey].loaded = true;
-                  audioPreloadStatus[apiKey].url = url;
                   resolve();
                 },
                 onloaderror: (id, err) => {
                   console.error(`音频${apiKey}预加载失败:`, err);
                   audioPreloadStatus[apiKey].loaded = true; // 标记为已处理，避免阻塞
+                  // URL已经在上面设置了，即使预加载失败也保留URL
                   resolve();
                 }
               });
@@ -802,9 +955,10 @@ watch(
                if (apiStatus.one.result) {
                  console.log("执行OneAPI代码（文本和音频同步开始）:", apiStatus.one.result);
                  
-                 // 将第一个音频添加到播放队列
+                 // 将第一个音频添加到播放队列（确保顺序：API1）
                  if (audioPreloadStatus.one.url) {
-                   addToAudioQueue(audioPreloadStatus.one.url, "第一个");
+                   addToAudioQueue(audioPreloadStatus.one.url, "API1-第一个");
+                   console.log("音频队列：添加API1音频，当前队列长度:", audioQueue.value.length);
                  }
                  
                  // 在这里添加OneAPI成功后需要执行的代码
@@ -817,7 +971,7 @@ watch(
                      class: "title1",
                      type: "title1",
                      content: codeData.value.name + "全景作战报告",
-                     date: moment().format("DD/MM/YYYY"),
+                     date: result21.data.date,
                    },
                    "",
                    50
@@ -1047,9 +1201,10 @@ watch(
               if (apiStatus.two.result) {
                 console.log("执行TwoAPI代码:", apiStatus.two.result);
                 
-                // 将第二个音频添加到播放队列
+                // 将第二个音频添加到播放队列（确保顺序：API2）
                 if (audioPreloadStatus.two.url) {
-                  addToAudioQueue(audioPreloadStatus.two.url, "第二个");
+                  addToAudioQueue(audioPreloadStatus.two.url, "API2-第二个");
+                  console.log("音频队列：添加API2音频，当前队列长度:", audioQueue.value.length);
                 }
                 
                 // 在这里添加TwoAPI成功后需要执行的代码
@@ -1125,9 +1280,10 @@ watch(
               if (apiStatus.three.result) {
                 console.log("执行ThreeAPI代码:", apiStatus.three.result);
                 
-                // 将第三个音频添加到播放队列
+                // 将第三个音频添加到播放队列（确保顺序：API3）
                 if (audioPreloadStatus.three.url) {
-                  addToAudioQueue(audioPreloadStatus.three.url, "第三个");
+                  addToAudioQueue(audioPreloadStatus.three.url, "API3-第三个");
+                  console.log("音频队列：添加API3音频，当前队列长度:", audioQueue.value.length);
                 }
                 
                 // 在这里添加ThreeAPI成功后需要执行的代码
@@ -1289,9 +1445,10 @@ watch(
               if (apiStatus.four.result) {
                 console.log("执行FourAPI代码:", apiStatus.four.result);
                 
-                // 将第四个音频添加到播放队列
+                // 将第四个音频添加到播放队列（确保顺序：API4）
                 if (audioPreloadStatus.four.url) {
-                  addToAudioQueue(audioPreloadStatus.four.url, "第四个");
+                  addToAudioQueue(audioPreloadStatus.four.url, "API4-第四个");
+                  console.log("音频队列：添加API4音频，当前队列长度:", audioQueue.value.length);
                 }
                 
                 // 在这里添加FourAPI成功后需要执行的代码

src/views/AiEmotion.vue

@@ -1449,21 +1449,30 @@ defineExpose({
 
 .class003 {
   padding-top: 8%;
-  padding-left: 10%;
+  /* padding-left: 10%; */
   display: flex;
-  flex-direction: column;
-  gap: 1rem;
+  align-items: center;
+  justify-content: center;
+  gap: 25vw;
+  /* flex-direction: column; */
+  /* gap: 1rem; */
+}
+
+
+.img01 {
+  width: 11vw;
+  /* height: auto; */
 }
 
 .div00 {
   display: flex;
-  flex-direction: row;
-  gap: 2%;
-  justify-content: flex-start;
-  align-items: center;
-  flex-wrap: wrap;
-  width: 100%;
-  box-sizing: border-box;
+  flex-direction: column;
+  /* 竖向排列元素 */
+  /* margin-left: 15%; */
+  gap: 30px;
+  /* margin-top: -12%; */
+  /* width: 100%; */
+  /* height: auto; */
 }
 
 .div00::after {
@@ -1476,7 +1485,8 @@ defineExpose({
   background-image: url('@/assets/img/AiEmotion/redBorder.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  width: 35%;
+  /* width: 50%; */
+  width: 30vw;
   min-width: 200px;
   min-height: 40px;
   text-align: center;
@@ -1492,7 +1502,8 @@ defineExpose({
   background-image: url('@/assets/img/AiEmotion/blueBorder.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
-  width: 35%;
+  /* width: 35%; */
+  width: 30vw;
   min-width: 200px;
   min-height: 40px;
   text-align: center;
@@ -1719,7 +1730,7 @@ defineExpose({
 }
 
 .class0402 {
-  width: 80%;
+  /* width: 80vw; */
   margin: 0 auto;
 }
 
@@ -1732,31 +1743,35 @@ defineExpose({
 .class0502 {
   padding-top: 7%;
   display: flex;
+  justify-content: center;
+  align-items: center;
   flex-direction: column;
   /* 竖向排列元素 */
   gap: 1rem;
-  margin-left: 2rem;
+  /* margin-left: 2rem; */
 }
 
 .class0601 {
   padding-top: 5rem;
   display: flex;
+  justify-content: center;
+  align-items: center;
   flex-direction: column;
   /* 竖向排列元素 */
   gap: 1rem;
-  margin-left: 2rem;
+  /* margin-left: 2rem; */
 }
 
 .img03 {
   width: 10%;
   height: auto;
-  margin-left: 43%;
+  /* margin-left: 43%; */
 }
 
 .img04 {
   width: 10%;
   height: auto;
-  margin-left: 43%;
+  /* margin-left: 43%; */
 }
 
 .class0701 {
@@ -1795,36 +1810,38 @@ defineExpose({
   padding-top: 5rem;
   display: flex;
   flex-direction: column;
+  justify-content: center;
+  align-items: center;
   /* 竖向排列元素 */
   gap: 1rem;
-  margin-left: 2rem;
+  /* margin-left: 2rem; */
 }
 
 .img02 {
   width: 10%;
   height: auto;
-  margin-left: 43%;
+  /* margin-left: 43%; */
 }
 
 .title2 {
   color: white;
   font-size: 20px;
   font-weight: bold;
-  margin-left: 45%;
+  /* margin-left: 45%; */
 }
 
 .title3 {
   color: white;
   font-size: 20px;
   font-weight: bold;
-  margin-left: 44.6%;
+  /* margin-left: 44.6%; */
 }
 
 .title4 {
   color: white;
   font-size: 20px;
   font-weight: bold;
-  margin-left: 44%;
+  /* margin-left: 44%; */
 }
 
 .class09 {
@@ -1919,13 +1936,14 @@ defineExpose({
   /* 确保不超出父容器 */
   height: auto;
   /* 高度根据内容动态变化 */
-  min-height: 75rem;
+  /* min-height: 75rem; */
   /* 设置最小高度，确保图片显示 */
   margin: 0 auto;
   box-sizing: border-box;
   /* 包括内边距在宽度计算中 */
   transition: all 0.3s ease;
   /* 添加平滑过渡效果 */
+  padding-bottom: 1rem;
 }
 
 .class03 {
@@ -1973,9 +1991,10 @@ defineExpose({
 .content1 {
   display: flex;
   flex-direction: column;
+  align-items: center;
   /* 竖向排列元素 */
-  gap: 1rem;
-  margin-left: 10%;
+  /* gap: 1rem; */
+  /* margin-left: 10%; */
 }
 
 .title1 {
@@ -1986,21 +2005,8 @@ defineExpose({
 
 }
 
-.img01 {
-  width: 10%;
-  height: auto;
-}
 
-.div00 {
-  display: flex;
-  flex-direction: column;
-  /* 竖向排列元素 */
-  margin-left: 15%;
-  gap: 1rem;
-  margin-top: -12%;
-  width: 100%;
-  height: auto;
-}
+
 
 .span02 {
   font-size: 1.5rem;
@@ -2167,10 +2173,6 @@ defineExpose({
     min-height: 60rem;
   }
 
-  .class04 {
-    min-height: 65rem;
-  }
-
   .class05 {
     min-height: 75rem;
   }
@@ -2195,23 +2197,6 @@ defineExpose({
     padding: 0.6rem;
   }
 
-  .class003 {
-    padding-top: 6%;
-    padding-left: 5%;
-  }
-
-  .div00 {
-    gap: 1%;
-    justify-content: center;
-  }
-
-  .class003 .div01,
-  .class003 .div02 {
-    width: 45%;
-    min-width: 180px;
-    font-size: 20px;
-  }
-
   /* 调整图表容器高度 */
   .class00 {
     min-height: 40rem;
@@ -2221,9 +2206,6 @@ defineExpose({
     min-height: 55rem;
   }
 
-  .class04 {
-    min-height: 55rem;
-  }
 
   .class05 {
     min-height: 65rem;
@@ -2275,7 +2257,7 @@ defineExpose({
     background-repeat: no-repeat;
     background-size: contain;
     text-align: center;
-    width:100%;
+    width: 100%;
     margin-top: 4%;
     height: 200px;
     min-height: 200px;
@@ -2341,9 +2323,9 @@ defineExpose({
 
   .img01 {
     height: auto;
-    margin-left: 7%;
-    width: 25%;
-    margin-top: 10px;
+    /* margin-left: 7%; */
+    width: 15vw;
+    /* margin-top: 10px; */
   }
 
   .title1 {
@@ -2367,10 +2349,6 @@ defineExpose({
     height: auto;
   }
 
-  .class03 .class003 {
-    padding-top: 3rem;
-    padding-left: 0rem;
-  }
 
   .class01 {
     min-height: 100px;
@@ -2383,7 +2361,7 @@ defineExpose({
   .class04 {
     width: 100%;
     height: auto;
-    min-height: 38rem;
+    /* min-height: 38rem; */
     /* min-height: 51rem; */
     /* margin-left: -39px; */
     /* min-height: 38rem; */
@@ -2416,7 +2394,7 @@ defineExpose({
   .img02 {
     width: 25%;
     height: auto;
-    margin-left: 32%;
+    /* margin-left: 32%; */
   }
 
   .class0401 {
@@ -2427,7 +2405,7 @@ defineExpose({
   .img04 {
     width: 25%;
     height: auto;
-    margin-left: 33%;
+    /* margin-left: 33%; */
   }
 
   .text-container p {
@@ -2653,42 +2631,31 @@ defineExpose({
     padding: 5%;
   }
 
+  .class003 {
+    padding-top: 12%;
+    gap: 20vw;
+  }
+
   .div00 {
     display: flex;
     flex-direction: column;
-    margin-left: 5rem;
+    /* margin-left: 5rem; */
     gap: 0;
-    margin-top: -6rem;
-    width: 100%;
+    /* 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 .div01,
   .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;
+    /* width: 80%; */
+    min-width: 250px;
+    font-size: 16px;
+    min-height: 35px;
   }
 
+
   .span01 {
     /* 使用导入的背景图片 */
     background-image: url('@/assets/img/AiEmotion/bk01.png');
@@ -2713,25 +2680,12 @@ defineExpose({
     padding-top: 10%;
   }
 
-  .class003 {
-    padding-top: 4%;
-    padding-left: 2%;
-  }
-
   .div00 {
     flex-direction: column;
     gap: 1rem;
     align-items: center;
   }
 
-  .class003 .div01,
-  .class003 .div02 {
-    width: 80%;
-    min-width: 250px;
-    font-size: 16px;
-    min-height: 35px;
-  }
-
   .span01 {
     width: 60%;
     font-size: 1.2rem;
@@ -2766,9 +2720,15 @@ defineExpose({
     align-items: center;
   }
 
+  .class003{
+    padding-top: 14%;
+    gap: 30px;
+  }
+  
   .class003 .div01,
   .class003 .div02 {
-    width: 90%;
+    /* width: 90%; */
+    width: 10vw;
     min-width: 200px;
     font-size: 14px;
     min-height: 30px;
@@ -2797,9 +2757,6 @@ defineExpose({
     min-height: 35rem;
   }
 
-  .class04 {
-    min-height: 30rem;
-  }
 
   .class05 {
     min-height: 35rem;

src/views/Selectmodel.vue

@@ -308,13 +308,26 @@ const goToEmotionsmodel = () => {
   .homepage {
     background-size: cover;
     min-height: 100vh;
+    width: 100vw;
+    overflow-x: hidden;
+  }
+  
+  .main-icon {
+    margin-top:46rem;
+    width: calc(20vw + 100px);
+    max-width: 300px;
+    min-width: 300px;
+  }
+  
+  /* 隐藏滚动条 */
+  body {
+    overflow-x: hidden;
+  }
+  
+  html, body {
+    width: 100%;
+    max-width: 100vw;
   }
-  /* .main-icon {
-  max-width: 350px;
-  width: 28vw;
-  height: auto;
-  margin-top:48vw;
-} */
 }
 @media screen and (min-width: 1025px) and (max-width: 1700px){
   .main-icon {

src/views/components/emoEnergyConverter.vue

@@ -12,7 +12,7 @@ let qxnlzhqEchartsRef = ref(null);
 let qxnlzhqEchartsInstance = null;
 
 let regions = reactive([]);
-
+const dataMax=ref(null)
 // 设置区域名称 位置
 function getNameTop(min, max, regionMiidle) {
   // 获取整个图表的高度
@@ -30,14 +30,30 @@ function getNumberTop(min, max, regionMax) {
 
 // 生成图形标注（核心逻辑）
 const generateGraphics = (min, max) => {
+  let hasPartialVisible = false; // 标记是否已经遇到第一个部分可见的区域
   return regions.flatMap((region) => {
+    if(!region.min || !region.max) return [];
     const middleY = (Number(region.min) + Number(region.max)) / 2;
-    return [
-      // 区域名称（中间位置）
-      {
+    const safeY = Math.max(min, Math.min(middleY, max*0.99));
+    // 检查区域是否完全可见
+    const isFullyVisible = region.min >= min && region.max <= max;
+    // 检查区域是否部分可见
+    const isPartiallyVisible = (region.min < max && region.max > min) && !isFullyVisible;
+    // 如果已经有一个部分可见的区域名称显示了，就不再显示其他部分可见的区域名称
+    if (isPartiallyVisible && hasPartialVisible) {
+      return [];
+    }
+    // 如果是第一个部分可见的区域，设置标记
+    if (isPartiallyVisible) {
+      hasPartialVisible = true;
+    }
+    const graphics = [];
+    // 区域名称（中间位置）
+    if (isFullyVisible || isPartiallyVisible) {
+      graphics.push({
         type: "text",
-        left: '60', // 向右调整位置
-        top: getNameTop(min, max, middleY),
+        left: '10%',
+        top: getNameTop(min, max, safeY),
         style: {
           text: region.name,
           fill: region.fontColor,
@@ -45,11 +61,13 @@ const generateGraphics = (min, max) => {
           fontWeight: "bold",
         },
         z: 3,
-      },
-      // y轴数值（顶部位置）
-      {
+      });
+    }
+    // y轴数值（顶部位置）
+    if (isFullyVisible) {
+      graphics.push({
         type: "text",
-        left: '60', // 向右调整位置
+        left: '5%', // 向右调整位置
         top: getNumberTop(min, max, region.max),
         // top: 100,
         style: {
@@ -58,8 +76,9 @@ const generateGraphics = (min, max) => {
           fontSize: 12,
         },
         z: 3,
-      },
-    ];
+      });
+    }
+    return graphics;
   });
 };
 
@@ -89,41 +108,41 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
       min: qxnlzhqData.dd,
       max: qxnlzhqData.zc,
       name: "【情绪冰点区】",
-      color: "#e7a5d6",
-      fontColor: 'white',
-      NumberColor: 'blue',
+      color: "#FF9F9F",
+      fontColor: '#666666',
+      NumberColor: 'white',
     },
     {
       min: qxnlzhqData.zc,
       max: qxnlzhqData.ht,
       name: "【认知潜伏区】",
-      color: "#f36587",
-      fontColor: 'white',
-      NumberColor: 'blue',
+      color: "#FFCB75",
+      fontColor: '#666666',
+      NumberColor: 'white',
     },
     {
       min: qxnlzhqData.ht,
       max: qxnlzhqData.qs,
       name: "【多空消化区】",
-      color: "#e99883",
-      fontColor: 'white',
-      NumberColor: 'blue',
+      color: "#D7E95D",
+      fontColor: '#666666',
+      NumberColor: 'white',
     },
     {
       min: qxnlzhqData.qs,
       max: qxnlzhqData.tp,
       name: "【共识加速区】",
-      color: "#f0db84",
-      fontColor: 'white',
-      NumberColor: 'red',
+      color: "#A0F56F",
+      fontColor: '#666666',
+      NumberColor: 'white',
     },
     {
       min: qxnlzhqData.tp,
       max: qxnlzhqData.js,
       name: "【情绪临界区】",
-      color: "#dbeee3",
-      fontColor: 'red',
-      NumberColor: 'red',
+      color: "#87F3CD",
+      fontColor: '#666666',
+      NumberColor: 'white',
     },
   ];
   // gg yl为-1  不绘制部分图表
@@ -133,9 +152,9 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         min: qxnlzhqData.js,
         max: qxnlzhqData.yl,
         name: "【杠杆失衡区】",
-        color: "#9ac2d8",
-        fontColor: 'red',
-        NumberColor: 'red',
+        color: "#51C3F9",
+        fontColor: '#666666',
+        NumberColor: 'white',
       },
     )
   }
@@ -145,13 +164,21 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         min: qxnlzhqData.yl,
         max: qxnlzhqData.gg,
         name: "【情绪熔断区】",
-        color: "#bce283",
-        fontColor: 'red',
-        NumberColor: 'red',
+        color: "#D0A7FF",
+        fontColor: '#666666',
+        NumberColor: 'white',
       },
     )
   }
 
+  // 计算动态的y轴范围
+  const priceValues = kline.flatMap(item => [item[1], item[2], item[3], item[4]]);
+  const dataMin = Math.min(...priceValues);
+  const dataMax = Math.max(...priceValues);
+  // 获取最后一根K线数据
+const lastKLine = mixData[mixData.length - 1];
+const lastHigh = lastKLine.value[2]; // 最高价
+const lastLow = lastKLine.value[3];  // 最低价
   // 计算止盈止损价格
   const stopProfitPrice = Number(qxnlzhqData.cc) * 1.05; // 止盈价
   const stopLossPrice = Number(qxnlzhqData.cc) * 0.97; // 止损价
@@ -257,7 +284,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
           borderWidth: 1
         }
       },
-      backgroundColor: 'rgba(0, 0, 0, 0.8)',
+      backgroundColor: '#646E71',
       borderColor: '#fff',
       borderWidth: 1,
       padding: 10,
@@ -299,9 +326,9 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
             result += `<div style="color: ${changeColor};">涨跌: ${priceChange >= 0 ? '+' : ''}${priceChange.toFixed(2)} (${changePercent}%)</div>`
             result += `</div>`
           } else if (param.seriesName === '止盈线' && value !== null && value !== undefined && typeof value === 'number') {
-            result += `<div style="color: #ff80ff; margin-bottom: 4px;">${param.seriesName}: ${value.toFixed(2)}</div>`
+            result += `<div style="color: #FF0000; margin-bottom: 4px;">${param.seriesName}: ${value.toFixed(2)}</div>`
           } else if (param.seriesName === '止损线' && value !== null && value !== undefined && typeof value === 'number') {
-            result += `<div style="color: #080bfd; margin-bottom: 4px;">${param.seriesName}: ${value.toFixed(2)}</div>`
+            result += `<div style="color: #001EFF; margin-bottom: 4px;">${param.seriesName}: ${value.toFixed(2)}</div>`
           }
         })
 
@@ -373,17 +400,12 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         qxnlzhqData.dd < stopLossPrice * 0.98
           ? Math.floor(qxnlzhqData.dd)
           : Math.floor(stopLossPrice * 0.98),
-      max:
-        qxnlzhqData.yl > stopProfitPrice * 1.02
-          ? Math.ceil(qxnlzhqData.yl)
-          : Math.ceil(stopProfitPrice * 1.02),
+      max: Math.max(Math.ceil(dataMax * 1.02), (qxnlzhqData.yl > 0 ? qxnlzhqData.yl : Math.ceil(dataMax * 1.02)), stopProfitPrice * 1.02),
     },
     // 自定义区域名称和区域范围值 位置
     graphic: generateGraphics(qxnlzhqData.dd < stopLossPrice * 0.98
       ? Math.floor(qxnlzhqData.dd)
-      : Math.floor(stopLossPrice * 0.98), qxnlzhqData.yl > stopProfitPrice * 1.02
-      ? Math.ceil(qxnlzhqData.yl)
-      : Math.ceil(stopProfitPrice * 1.02)),
+      : Math.floor(stopLossPrice * 0.98), Math.max(Math.ceil(dataMax * 1.02), (qxnlzhqData.yl > 0 ? qxnlzhqData.yl : Math.ceil(dataMax * 1.02)), stopProfitPrice * 1.02),),
     series: [
       {
         type: "candlestick",
@@ -399,10 +421,12 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         itemStyle: {
           normal: {
             // 阳线样式（收盘 > 开盘）
-            color: '#14b143',     // 开盘价 < 收盘价时为绿色
+            // color: '#14b143',     // 开盘价 < 收盘价时为绿色
+            color: 'rgba(0,0,0,0)',
             color0: '#ef232a',    // 开盘价 > 收盘价时为红色
             borderColor: '#14b143',   // 阳线边框色（绿）
             borderColor0: '#ef232a',  // 阴线边框色（红）
+            borderWidth: 1.5
           }
         },
         // 实现 分区域背景色
@@ -453,7 +477,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         symbol: 'none',
         lineStyle: {
           normal: {
-            color: '#ff80ff', // 蓝色
+            color: '#FF0000', // 蓝色
             width: 2,
             type: 'solid'
           }
@@ -470,15 +494,16 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
               label: {
                 normal: {
                   show: true,
-                  position: 'bottom',
-                  formatter: `{text|止盈: ${stopProfitPrice}}`,
+                  position: 'top',
+                  formatter: `{text|止盈}`,
                   rich: {
                     text: {
-                      color: '#820a06',
+                      color: '#FF0000',
                       fontSize: 14,
                       fontWeight: 'bold'
                     }
-                  }
+                  },
+                  offset: [-20, 0]
                 }
               }
             }
@@ -492,7 +517,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
         symbol: 'none',
         lineStyle: {
           normal: {
-            color: '#080bfd', // 红色
+            color: '#001EFF',
             width: 2,
             type: 'solid'
           }
@@ -510,20 +535,101 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
                 normal: {
                   show: true,
                   position: 'bottom',
-                  formatter: `{text|止损: ${stopLossPrice}}`,
+                  formatter: `{text|止损}`,
                   rich: {
                     text: {
-                      color: '#080bfd',
+                      color: '#001EFF',
                       fontSize: 14,
                       fontWeight: 'bold'
                     }
-                  }
+                  },
+                  offset: [-20, 0]
                 }
               }
             }
           ]
         }
       },
+      {
+        name: '最低价',
+        type: 'line',
+        symbol: 'none',
+        lineStyle: {
+          normal: {
+            color: 'transparent',
+            width: 0
+          }
+        },
+        markPoint: {
+          symbol: 'circle',
+          symbolSize: 1,
+          data: [
+            {
+              coord: [mixData.length - 1, mixData[mixData.length - 1].value[2]],
+              itemStyle: {
+                color: 'transparent'
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: 'top',
+                  formatter: `{text|${mixData[mixData.length - 1].value[2].toFixed(2)}}`,
+                  rich: {
+                    text: {
+                      color: '#001EFF',
+                      fontSize: 12,
+                      fontWeight: 'bold',
+                      textBorderColor: '#ffffff',
+                textBorderWidth: 2,
+                    }
+                  },
+                  offset: [20, 10]
+                }
+              }
+            }
+          ]
+        }
+      },
+      {
+        name: '最高价',
+        type: 'line',
+        symbol: 'none',
+        lineStyle: {
+          normal: {
+            color: 'transparent',
+            width: 0
+          }
+        },
+        markPoint: {
+          symbol: 'circle',
+          symbolSize: 1,
+          data: [
+            {
+              coord: [mixData.length - 1, mixData[mixData.length - 1].value[3]],
+              itemStyle: {
+                color: 'transparent'
+              },
+              label: {
+                normal: {
+                  show: true,
+                  position: 'bottom',
+                  formatter: `{text|${mixData[mixData.length - 1].value[3].toFixed(2)}}`,
+                  rich: {
+                    text: {
+                      color: '#FF0000',
+                      fontSize: 12,
+                      fontWeight: 'bold',
+                      textBorderColor: '#ffffff',
+                textBorderWidth: 2,
+                    }
+                  },
+                  offset: [20, -10]
+                }
+              }
+            }
+          ]
+        }
+      }
     ],
     grid: {
       left: "7%",

src/views/components/emotionDecod.vue

@@ -251,7 +251,7 @@ function initQXNLZHEcharts(kline, qxnlzhqData) {
           shadowOffsetX: 2,
           shadowOffsetY: 2,
         },
-        bottom: "10%", // 下移数据缩放滑块
+        bottom: window.innerWidth > 768 ? "10%" : "5%", // 下移数据缩放滑块
       },
       {
         show: !1,
@@ -457,7 +457,7 @@ onBeforeUnmount(() => {
   width: 100%;
   height: 800px;
   margin: 0;
-  top: 5rem;
+  /* top: 5rem; */
   box-sizing: border-box;
   overflow: hidden;
 }
@@ -468,7 +468,7 @@ onBeforeUnmount(() => {
     width: 100%;
     height: 400px;
     margin: 0;
-    top: 5rem;
+    /* top: 5rem; */
   }
 
   .qxjmqbox {

src/views/components/marketTemperature.vue

@@ -698,7 +698,7 @@ defineExpose({ initChart });
 }
 
 .market-temperature {
-  min-height: 100vh;
+  /* min-height: 100vh; */
   /* background-color: rgb(0, 22, 65); */
 }
 
@@ -707,13 +707,17 @@ defineExpose({ initChart });
   /* padding: 20px; */
   max-width: 80vw;
   padding-bottom: 10%;
+  display:flex;
+  flex-direction:column;
+  justify-content:center;
+  align-items:center;
 }
 
 .border3 {
   margin-top: 40px;
   border-radius: 8px;
   padding: 20px;
-  margin-left: 0;
+  /* margin-left: 0; */
   width: 100%;
   height: 100%;
   box-sizing: border-box;
@@ -725,7 +729,7 @@ defineExpose({ initChart });
   border-radius: 8px;
   padding: 20px;
   width: 80%;
-  margin-left: 8%;
+  /* margin-left: 8%; */
   height: 48vw;
   overflow: visible;
 }
@@ -747,6 +751,11 @@ defineExpose({ initChart });
 
 /* 手机端适配样式 */
 @media only screen and (max-width: 768px) {
+
+  .container{
+    padding-bottom:16%
+  }
+
   .KlineClass {
     width: 100%;
     height: 300px;
@@ -786,8 +795,8 @@ defineExpose({ initChart });
   .border3 {
     margin-top: 25px;
     border-radius: 8px;
-    padding: 20px;
-    margin-left: -13px;
+    padding: 10px 0px;
+    /* margin-left: -13px; */
     width: 100%;
     height: 100%;
   }

src/views/homePage.vue

@@ -251,7 +251,7 @@ const tabContent = ref(null);
 const isScrolling = ref(false); //判断用户是否在滚动
 
 const smoothScrollToBottom = async () => {
-  console.log("调用滚动到底部的方法");
+  // console.log("调用滚动到底部的方法");
   // await nextTick();
   const container = tabContent.value;
   // console.log(container, 'container')