修复homepage页面

src/views/homePage.vue

@@ -12,8 +12,11 @@ import {
 import { ElMessage } from "element-plus";
 import AIchat from "./AIchat.vue";
 import AIfind from "./AIfind.vue";
+import AiEmotion from "./AiEmotion.vue";
+import deepNine from "./deepNine.vue";
 import Feedback from "./Feedback.vue";
 import Announcement from "./Announcement.vue";
+
 import { useAppBridge } from "../assets/js/useAppBridge.js";
 import { useDataStore } from "@/store/dataList.js";
 import { useChatStore } from "../store/chat";
@@ -39,7 +42,7 @@ import sendBtn from "../assets/img/homePage/tail/send.png";
 import msgBtn from "../assets/img/homePage/tail/msg.png";
 import feedbackBtn from "../assets/img/Feedback/feedbackBtn.png";
 import back from "../assets/img/Feedback/back.png";
-import AiEmotion from "./AiEmotion.vue";
+
 import HistoryRecord from "./components/HistoryRecord.vue";
 
 // import VConsole from "vconsole";
@@ -195,6 +198,10 @@ const tabs = computed(() => [
     name: "AiEmotion",
     label: "AI情绪大模型",
   },
+  {
+    name: "deepNine",
+    label: "深度九大模型",
+  },
 ]);
 
 // 修改 setActiveTab 方法，添加一个可选参数 forceAIchat
@@ -210,6 +217,9 @@ const setActiveTab = (tab, index, forceAIchat = false) => {
   } else if (tab == "AiEmotion") {
     isInputDisabled.value = chatStore.emotionInput;
     console.log("切换到AiEmotion页面，输入框状态为", isInputDisabled.value);
+  } else if (tab == "deepNine") {
+    isInputDisabled.value = chatStore.deepNineInput;
+    console.log("切换到deepNine页面，输入框状态为", isInputDisabled.value);
   } else {
     isInputDisabled.value = false;
   }
@@ -241,6 +251,8 @@ const activeComponent = computed(() => {
     return AIfind;
   } else if (activeTab.value === "AiEmotion") {
     return AiEmotion; // 新增逻辑
+  } else if (activeTab.value === "deepNine") {
+    return deepNine;
   }
 });
 
@@ -329,6 +341,15 @@ watch(
   }
 );
 
+watch(
+  () => chatStore.deepNineInput,
+  async (newVal) => {
+    if (activeTab.value == "deepNine") {
+      isInputDisabled.value = chatStore.deepNineInput;
+    }
+  }
+);
+
 const sendMessage = async () => {
   if (
     localStorage.getItem("localToken") == null ||
@@ -457,6 +478,7 @@ const tokenRuleDialogVisible = ref(false);
 const hasShownTokenRule = ref({
   AIchat: sessionStorage.getItem("hasShownTokenRule_AIchat") === "true",
   AiEmotion: sessionStorage.getItem("hasShownTokenRule_AiEmotion") === "true",
+  deepNine: sessionStorage.getItem("hasShownTokenRule_deepNine") === "true",
 });
 
 // 关闭Token规则提示框
@@ -472,8 +494,12 @@ const openTokenRuleDialog = () => {
 // 定义处理函数，以便正确移除事件监听器
 const handleGlobalClick = (event) => {
   // 检查点击事件是否来自"兑换规则"按钮
-  const changeRuleElement = document.querySelector('.changeRule');
-  if (changeRuleElement && (changeRuleElement === event.target || changeRuleElement.contains(event.target))) {
+  const changeRuleElement = document.querySelector(".changeRule");
+  if (
+    changeRuleElement &&
+    (changeRuleElement === event.target ||
+      changeRuleElement.contains(event.target))
+  ) {
     // 如果点击的是"兑换规则"按钮，不关闭提示框
     return;
   }
@@ -538,6 +564,8 @@ const showFeedback = () => {
 
 const tabContentAIchat = ref(null);
 const tabContentAiEmotion = ref(null);
+const tabContentDeepNine = ref(null);
+
 const isScrolling = ref(false); //判断用户是否在滚动
 
 // AiEmotion页面高度监听器相关变量
@@ -554,6 +582,8 @@ const getCurrentScrollContainer = () => {
     return tabContentAIchat.value;
   } else if (activeTab.value === "AiEmotion") {
     return tabContentAiEmotion.value;
+  } else if (activeTab.value === "deepNine") {
+    return tabContentDeepNine.value;
   }
   return null;
 };
@@ -771,7 +801,7 @@ watch(
   () => {
     // console.log('messages变化了')
     // 只有在AIchat页面时才执行自动滚动
-    if (activeTab.value === "AIchat") {
+    if (activeTab.value === "AIchat" || activeTab.value === "deepNine") {
       throttledSmoothScrollToBottom();
     }
   },
@@ -816,16 +846,26 @@ watch(
   activeTab,
   async () => {
     console.log("activeTab变化了", activeTab.value);
-    if (activeTab.value == "AIchat" || activeTab.value == "AiEmotion") {
+    if (
+      activeTab.value == "AIchat" ||
+      activeTab.value == "AiEmotion" ||
+      activeTab.value == "deepNine"
+    ) {
       if (historyRecordRef.value && historyRecordRef.value.getHistoryList) {
+        let model =
+          activeTab.value == "AIchat"
+            ? 1
+            : activeTab.value == "AiEmotion"
+            ? 2
+            : 3;
         const result = historyRecordRef.value.getHistoryList({
-          model: activeTab.value == "AIchat" ? 1 : 2,
+          model: model,
           token: localStorage.getItem("localToken"),
         });
       }
     }
 
-    if (activeTab.value === "AIchat") {
+    if (activeTab.value === "AIchat" || activeTab.value === "deepNine") {
       isScrolling.value = false; //回复滚动到底部方法
       // 停止AiEmotion页面的高度监听器
       stopAiEmotionHeightObserver();
@@ -1072,12 +1112,6 @@ const throttledJudgeDevice = _.throttle(judgeDevice, 300, {
 });
 
 const expandHistory = () => {
-  // if (activeTab.value == "AIchat" || activeTab.value == "AiEmotion") {
-  //   historyRecordRef.value.getHistoryList({
-  //     token: localStorage.getItem("localToken"),
-  //     model: activeTab.value == "AIchat" ? 1 : 2,
-  //   });
-  // }
   if (
     historyRecordRef.value &&
     historyRecordRef.value.isCollapsed !== undefined
@@ -1088,6 +1122,8 @@ const expandHistory = () => {
       chatStore.aiChatCall = true;
     } else if (activeTab.value == "AiEmotion") {
       chatStore.aiEmotionCall = true;
+    } else if (activeTab.value == "deepNine") {
+      chatStore.deepNineCall = true;
     }
   }
 };
@@ -1558,6 +1594,28 @@ onUnmounted(() => {
               ref="aiEmotionRef"
             />
           </div>
+          <!-- deepNine页面的独立滚动容器 -->
+          <div
+            v-show="activeTab === 'deepNine'"
+            class="tab-content"
+            :class="{
+              pcTabContent: !isMobile,
+            }"
+            ref="tabContentDeepNine"
+          >
+            <component
+              v-if="activeTab === 'deepNine'"
+              :is="activeComponent"
+              :messages="messages"
+              @updateMessage="updateMessage"
+              @sendMessage="sendMessage"
+              @ensureAIchat="ensureAIchat"
+              @enableInput="enableInput"
+              @scrollToBottom="handleDeepNineScrollToBottom"
+              @showCount="showCount"
+              ref="deepNineRef"
+            />
+          </div>
         </div>
       </el-main>
       <!-- 尾部： 问题输入框 深度思考 多语言 语音播报 -->
@@ -1836,7 +1894,6 @@ onUnmounted(() => {
             (兑换规则：{{ changeRule.gold }}金币={{ changeRule.token }}Token)
             <div>点击查看详情</div>
           </div>
-          
         </div>
 
         <div class="changeLevelContent">
@@ -1922,14 +1979,24 @@ onUnmounted(() => {
       center
     >
       <div class="changeSuccessDialogTitle">
-        <img v-if="!isMobile" src="https://d31zlh4on95l9h.cloudfront.net/images/84edd341b2ddec464fc4475254f7a309.png" style="scale: 0.7;" alt="token图标">
+        <img
+          v-if="!isMobile"
+          src="https://d31zlh4on95l9h.cloudfront.net/images/84edd341b2ddec464fc4475254f7a309.png"
+          style="scale: 0.7"
+          alt="token图标"
+        />
         兑换成功
       </div>
       <div class="changeSuccessDialogContent">
         尊敬的用户，恭喜您成功兑换：{{ activeLevel.calculatedPosition }} Token
       </div>
       <div class="changeSuccessDialogFooter">
-        <button class="confirmButton" @click="changeSuccessDialogVisible = false">确定</button>
+        <button
+          class="confirmButton"
+          @click="changeSuccessDialogVisible = false"
+        >
+          确定
+        </button>
       </div>
     </el-dialog>
 
@@ -2838,17 +2905,17 @@ body {
 .changeSuccessDialogTitle {
   font-size: 1.7rem;
   font-weight: bold;
-  color: #7849DE;
+  color: #7849de;
   display: flex;
   justify-content: center;
   align-items: center;
   letter-spacing: 10px;
 }
 
-.changeSuccessDialogTitle image{
+.changeSuccessDialogTitle image {
   font-size: 1.7rem;
   font-weight: bold;
-  color: #7849DE;
+  color: #7849de;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -2948,7 +3015,6 @@ body {
 }
 
 @media (max-width: 768px) {
-
   .tokenRuleDialog {
     bottom: 20%;
   }
@@ -3146,7 +3212,7 @@ body {
 
 <style>
 .changeSuccessDialog {
-  background: linear-gradient(180deg, #80D3F8, #8080FF);
+  background: linear-gradient(180deg, #80d3f8, #8080ff);
 }
 
 .changeSuccessDialogFooter {
@@ -3156,7 +3222,7 @@ body {
 }
 
 .confirmButton {
-  background: #8A52DF;
+  background: #8a52df;
   color: white;
   border: none;
   border-radius: 5px;