创造页面

2 weeks ago · 3c8a5ddaf2
4 changed files with 5484 additions and 25 deletions
--- a/src/router/index.js
+++ b/src/router/index.js
@ -75,6 +75,12 @@ const routes = [
        name: 'goldenWheel',
        component: () => import('@/views/wealth/goldenWheel.vue')

+    },
+    // 深度九大模型
+    {
+        path: '/deepNine',
+        name: 'deepNine',
+        component: () => import('@/views/deepNine.vue'),
    }   

 ]
--- a/src/store/chat.js
+++ b/src/store/chat.js
@ -12,10 +12,15 @@ export const useChatStore = defineStore("chat", {
    currentUserIndex: null,
    inputUserIndex:null,
    announcementMsg: null,
+    // 调用接口状态
    aiChatCall:false,
    aiEmotionCall:false,
+    deepNineCall:false,
+    // 输入框控制
    chatInput:false,
    emotionInput:false,
+    deepNineInput:false,
+
    firstAPICall:false,
    dbqbScrollToTop:true,
  }),
--- a/src/views/deepNine.vue
+++ b/src/views/deepNine.vue
--- a/src/views/homePage.vue
+++ b/src/views/homePage.vue
@ -12,8 +12,11 @@ import {
 import { ElMessage } from "element-plus";
 import AIchat from "./AIchat.vue";
 import AIfind from "./AIfind.vue";
+import AiEmotion from "./AiEmotion.vue";
+import deepNine from "./deepNine.vue";
 import Feedback from "./Feedback.vue";
 import Announcement from "./Announcement.vue";
+
 import { useAppBridge } from "../assets/js/useAppBridge.js";
 import { useDataStore } from "@/store/dataList.js";
 import { useChatStore } from "../store/chat";
@ -38,7 +41,7 @@ import sendBtn from "../assets/img/homePage/tail/send.png";
 import msgBtn from "../assets/img/homePage/tail/msg.png";
 import feedbackBtn from "../assets/img/Feedback/feedbackBtn.png";
 import back from "../assets/img/Feedback/back.png";
-import AiEmotion from "./AiEmotion.vue";
+
 import HistoryRecord from "./components/HistoryRecord.vue";

 // import VConsole from "vconsole";
@ -105,6 +108,10 @@ const tabs = computed(() => [
    name: "AiEmotion",
    label: "AI情绪大模型",
  },
+  {
+    name: "deepNine",
+    label: "深度九大模型",
+  },
 ]);

 // 修改 setActiveTab 方法，添加一个可选参数 forceAIchat
@ -120,6 +127,9 @@ const setActiveTab = (tab, index, forceAIchat = false) => {
  } else if (tab == "AiEmotion") {
    isInputDisabled.value = chatStore.emotionInput;
    console.log("切换到AiEmotion页面，输入框状态为", isInputDisabled.value);
+  } else if (tab == "deepNine") {
+    isInputDisabled.value = chatStore.deepNineInput;
+    console.log("切换到deepNine页面，输入框状态为", isInputDisabled.value);
  } else {
    isInputDisabled.value = false;
  }
@ -148,6 +158,8 @@ const activeComponent = computed(() => {
    return AIfind;
  } else if (activeTab.value === "AiEmotion") {
    return AiEmotion; // 新增逻辑
+  } else if (activeTab.value === "deepNine") {
+    return deepNine;
  }
 });

@ -236,6 +248,15 @@ watch(
  }
 );

+watch(
+  () => chatStore.deepNineInput,
+  async (newVal) => {
+    if (activeTab.value == "deepNine") {
+      isInputDisabled.value = chatStore.deepNineInput;
+    }
+  }
+);
+
 const sendMessage = async () => {
  if (
    localStorage.getItem("localToken") == null ||
@ -336,6 +357,7 @@ const tokenRuleDialogVisible = ref(false);
 const hasShownTokenRule = ref({
  AIchat: sessionStorage.getItem("hasShownTokenRule_AIchat") === "true",
  AiEmotion: sessionStorage.getItem("hasShownTokenRule_AiEmotion") === "true",
+  deepNine: sessionStorage.getItem("hasShownTokenRule_deepNine") === "true",
 });

 // 关闭Token规则提示框
@ -351,8 +373,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;
  }
@ -417,6 +443,8 @@ const showFeedback = () => {

 const tabContentAIchat = ref(null);
 const tabContentAiEmotion = ref(null);
+const tabContentDeepNine = ref(null);
+
 const isScrolling = ref(false); //判断用户是否在滚动

 // AiEmotion页面高度监听器相关变量
@ -433,6 +461,8 @@ const getCurrentScrollContainer = () => {
    return tabContentAIchat.value;
  } else if (activeTab.value === "AiEmotion") {
    return tabContentAiEmotion.value;
+  } else if (activeTab.value === "deepNine") {
+    return tabContentDeepNine.value;
  }
  return null;
 };
@ -658,7 +688,7 @@ watch(
  () => {
    // console.log('messages变化了')
    // 只有在AIchat页面时才执行自动滚动
-    if (activeTab.value === "AIchat") {
+    if (activeTab.value === "AIchat" || activeTab.value === "deepNine") {
      throttledSmoothScrollToBottom();
    }
    // setTimeout(throttledSmoothScrollToBottom, 100);
@ -692,16 +722,26 @@ watch(
  activeTab,
  async () => {
    console.log("activeTab变化了", activeTab.value);
-    if (activeTab.value == "AIchat" || activeTab.value == "AiEmotion") {
+    if (
+      activeTab.value == "AIchat" ||
+      activeTab.value == "AiEmotion" ||
+      activeTab.value == "deepNine"
+    ) {
      if (historyRecordRef.value && historyRecordRef.value.getHistoryList) {
+        let model =
+          activeTab.value == "AIchat"
+            ? 1
+            : activeTab.value == "AiEmotion"
+            ? 2
+            : 3;
        const result = historyRecordRef.value.getHistoryList({
-          model: activeTab.value == "AIchat" ? 1 : 2,
+          model: model,
          token: localStorage.getItem("localToken"),
        });
      }
    }

-    if (activeTab.value === "AIchat") {
+    if (activeTab.value === "AIchat" || activeTab.value === "deepNine") {
      isScrolling.value = false; //回复滚动到底部方法
      // 停止AiEmotion页面的高度监听器
      stopAiEmotionHeightObserver();
@ -950,12 +990,6 @@ const throttledJudgeDevice = _.throttle(judgeDevice, 300, {
 });

 const expandHistory = () => {
-  // if (activeTab.value == "AIchat" || activeTab.value == "AiEmotion") {
-  //   historyRecordRef.value.getHistoryList({
-  //     token: localStorage.getItem("localToken"),
-  //     model: activeTab.value == "AIchat" ? 1 : 2,
-  //   });
-  // }
  if (
    historyRecordRef.value &&
    historyRecordRef.value.isCollapsed !== undefined
@ -966,6 +1000,8 @@ const expandHistory = () => {
      chatStore.aiChatCall = true;
    } else if (activeTab.value == "AiEmotion") {
      chatStore.aiEmotionCall = true;
+    } else if (activeTab.value == "deepNine") {
+      chatStore.deepNineCall = true;
    }
  }
 };
@ -1404,6 +1440,28 @@ onUnmounted(() => {
              ref="aiEmotionRef"
            />
          </div>
+          <!-- deepNine页面的独立滚动容器 -->
+          <div
+            v-show="activeTab === 'deepNine'"
+            class="tab-content"
+            :class="{
+              pcTabContent: !isMobile,
+            }"
+            ref="tabContentDeepNine"
+          >
+            <component
+              v-if="activeTab === 'deepNine'"
+              :is="activeComponent"
+              :messages="messages"
+              @updateMessage="updateMessage"
+              @sendMessage="sendMessage"
+              @ensureAIchat="ensureAIchat"
+              @enableInput="enableInput"
+              @scrollToBottom="handleDeepNineScrollToBottom"
+              @showCount="showCount"
+              ref="deepNineRef"
+            />
+          </div>
        </div>
      </el-main>
      <!-- 尾部： 问题输入框 深度思考 多语言 语音播报 -->
@ -1562,7 +1620,7 @@ onUnmounted(() => {
        </div>
        <div class="changeRule">
          兑换规则：{{ changeRule.gold }}金币={{ changeRule.token }}Token
-          <div  @click="openTokenRuleDialog">点击查看详情</div>
+          <div @click="openTokenRuleDialog">点击查看详情</div>
        </div>
      </div>
      <div class="changeLevel">
@ -1624,7 +1682,6 @@ onUnmounted(() => {
            (兑换规则：{{ changeRule.gold }}金币={{ changeRule.token }}Token)
            <div @click="openTokenRuleDialog">点击查看详情</div>
          </div>
-          
        </div>

        <div class="changeLevelContent">
@ -1710,14 +1767,24 @@ onUnmounted(() => {
      center
    >
      <div class="changeSuccessDialogTitle">
-        <img v-if="!isMobile" src="https://d31zlh4on95l9h.cloudfront.net/images/84edd341b2ddec464fc4475254f7a309.png" style="scale: 0.7;" alt="token图标">
+        <img
+          v-if="!isMobile"
+          src="https://d31zlh4on95l9h.cloudfront.net/images/84edd341b2ddec464fc4475254f7a309.png"
+          style="scale: 0.7"
+          alt="token图标"
+        />
        兑换成功
      </div>
      <div class="changeSuccessDialogContent">
        尊敬的用户，恭喜您成功兑换：{{ activeLevel.calculatedPosition }} Token
      </div>
      <div class="changeSuccessDialogFooter">
-        <button class="confirmButton" @click="changeSuccessDialogVisible = false">确定</button>
+        <button
+          class="confirmButton"
+          @click="changeSuccessDialogVisible = false"
+        >
+          确定
+        </button>
      </div>
    </el-dialog>

@ -2575,17 +2642,17 @@ body {
 .changeSuccessDialogTitle {
  font-size: 1.7rem;
  font-weight: bold;
-  color: #7849DE;
+  color: #7849de;
  display: flex;
  justify-content: center;
  align-items: center;
  letter-spacing: 10px;
 }

-.changeSuccessDialogTitle image{
+.changeSuccessDialogTitle image {
  font-size: 1.7rem;
  font-weight: bold;
-  color: #7849DE;
+  color: #7849de;
  display: flex;
  justify-content: center;
  align-items: center;
@ -2685,7 +2752,6 @@ body {
 }

@media (max-width: 768px) {
-
  .tokenRuleDialog {
    bottom: 20%;
  }
@ -2879,7 +2945,7 @@ body {

 <style>
 .changeSuccessDialog {
-  background: linear-gradient(180deg, #80D3F8, #8080FF);
+  background: linear-gradient(180deg, #80d3f8, #8080ff);
 }

 .changeSuccessDialogFooter {
@ -2889,7 +2955,7 @@ body {
 }

 .confirmButton {
-  background: #8A52DF;
+  background: #8a52df;
  color: white;
  border: none;
  border-radius: 5px;