From f0c34f4f5c05a989fcfe1cd4ca6f093c990fdbc7 Mon Sep 17 00:00:00 2001
From: duanshuwen <duanshuwen@gogpay.cn>
Date: Sat, 27 Jun 2026 17:48:33 +0800
Subject: [PATCH] fix: fix tab switching and clean up component templates

- fix broken tab switch logic in ChatMainList by updating tabIndex.value in handleChange
- add unused showToast import from vant
- re-enable tab switch emitter event listeners that were commented out
- replace uni.getWindowInfo().windowWidth with window.innerWidth in SwipeCards for web compatibility
- condense template props and clean up formatting in ChatMainList to improve readability
---
 src/components/SwipeCards/index.vue           |   2 +-
 .../home/components/ChatMainList/index.vue    | 272 ++++++------------
 2 files changed, 93 insertions(+), 181 deletions(-)

diff --git a/src/components/SwipeCards/index.vue b/src/components/SwipeCards/index.vue
index 0ff73ce..767bbf6 100644
--- a/src/components/SwipeCards/index.vue
+++ b/src/components/SwipeCards/index.vue
@@ -51,7 +51,7 @@ const swipering = ref(false);
 const animatingOut = ref(false);
 let reorderTimer = null;
 
-const { windowWidth } = uni.getWindowInfo();
+const windowWidth = window.innerWidth;
 
 let uidCounter = 0;
 // 始终生成全局唯一的 __uid，避免因重复 key 导致后续卡片无法正确重渲染与绑定事件
diff --git a/src/pages/home/components/ChatMainList/index.vue b/src/pages/home/components/ChatMainList/index.vue
index e0a0af9..d69e24e 100644
--- a/src/pages/home/components/ChatMainList/index.vue
+++ b/src/pages/home/components/ChatMainList/index.vue
@@ -2,176 +2,100 @@
   <div class="flex h-dvh flex-col relative overflow-hidden">
     <!-- 顶部自定义导航栏 -->
     <div class="absolute top-0 left-0 w-full z-10">
-      <ChatTopNavBar
-        ref="topNavBarRef"
-        :mainPageDataModel="mainPageDataModel"
-      />
+      <ChatTopNavBar ref="topNavBarRef" :mainPageDataModel="mainPageDataModel" />
     </div>
 
-    <div
-      ref="mainScrollRef"
-      class="min-h-0 flex-1 overflow-y-auto overscroll-contain scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
-      @scroll="handleScroll"
-      @touchstart.capture="handleScrollAreaTouchStart"
-      @touchstart="handleScrollAreaTouchStart"
-      @touchmove="handleScrollAreaTouchMove"
-    >
+    <div ref="mainScrollRef"
+      class="flex flex-col min-h-0 flex-1 overflow-y-auto overscroll-contain scrollbar-none [-ms-overflow-style:none] [&::-webkit-scrollbar]:hidden"
+      @scroll="handleScroll" @touchstart.capture="handleScrollAreaTouchStart" @touchstart="handleScrollAreaTouchStart"
+      @touchmove="handleScrollAreaTouchMove">
       <div class="relative">
-        <img
-          class="w-full block"
-          :src="mainPageDataModel?.initPageImages?.backgroundImageUrl"
-          style="height: 252px"
-        />
+        <img class="w-full block" :src="mainPageDataModel?.initPageImages?.backgroundImageUrl" style="height: 252px" />
         <div class="absolute bottom-0 left-0 right-0 flex-1">
           <div class="px-[12px] pt-[12px]">
             <Welcome :mainPageDataModel="mainPageDataModel" />
           </div>
           <div style="margin-bottom: -1px">
-            <AiTabSwitch
-              v-model="tabIndex"
-              :list="tabList"
-              @change="handleChange"
-            />
+            <AiTabSwitch v-model="tabIndex" :list="tabList" @change="handleChange" />
           </div>
         </div>
       </div>
 
       <!-- 发现页 -->
-      <div
-        v-show="tabIndex === 0"
-        class="min-h-0 flex-1 overflow-hidden"
-        @touchstart.capture="handleScrollAreaTouchStart"
-        @touchstart="handleScrollAreaTouchStart"
-        @touchmove="handleScrollAreaTouchMove"
-      >
-        <Discovery
-          @scroll-touch-start="handleScrollAreaTouchStart"
-          @scroll-touch="handleScrollAreaTouchMove"
-        />
+      <div v-show="tabIndex === 0" class="min-h-0 flex-1 overflow-hidden"
+        @touchstart.capture="handleScrollAreaTouchStart" @touchstart="handleScrollAreaTouchStart"
+        @touchmove="handleScrollAreaTouchMove">
+        <Discovery @scroll-touch-start="handleScrollAreaTouchStart" @scroll-touch="handleScrollAreaTouchMove" />
       </div>
 
       <!-- 消息列表（可滚动区域） -->
-      <div
-        v-show="tabIndex === 1"
-        class="min-h-0 flex-1 overflow-hidden"
-        :scroll-top="scrollTop"
-        @scroll="handleScroll"
-        @scrolltolower="handleScrollToLower"
-        @touchstart.capture="handleScrollAreaTouchStart"
-        @touchstart="handleScrollAreaTouchStart"
-        @touchmove="handleScrollAreaTouchMove"
-      >
-        <div
-          class="area-msg-list-content"
-          v-for="item in chatMsgList"
-          :key="item.msgId"
-          :id="item.msgId"
-        >
+      <div v-show="tabIndex === 1" class="min-h-0 flex-1 overflow-hidden" :scroll-top="scrollTop" @scroll="handleScroll"
+        @scrolltolower="handleScrollToLower" @touchstart.capture="handleScrollAreaTouchStart"
+        @touchstart="handleScrollAreaTouchStart" @touchmove="handleScrollAreaTouchMove">
+        <div class="area-msg-list-content" v-for="item in chatMsgList" :key="item.msgId" :id="item.msgId">
           <template v-if="item.msgType === MessageRole.AI">
-            <ChatCardAI
-              class="flex justify-start"
-              :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
-              :text="
-                item.componentName && isLongTextCard(item.componentName)
-                  ? ''
-                  : item.msg || ''
-              "
-              :isLoading="item.isLoading"
-            >
-              <template
-                #content
-                v-if="
-                  item.toolCall ||
-                  (item.componentName && isLongTextCard(item.componentName))
-                "
-              >
-                <LongTextGuideCardPreview
-                  v-if="
-                    item.componentName && isLongTextCard(item.componentName)
-                  "
-                  :componentName="item.componentName"
-                />
+            <ChatCardAI class="flex justify-start" :key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`" :text="item.componentName && isLongTextCard(item.componentName)
+              ? ''
+              : item.msg || ''
+              " :isLoading="item.isLoading">
+              <template #content v-if="
+                item.toolCall ||
+                (item.componentName && isLongTextCard(item.componentName))
+              ">
+                <LongTextGuideCardPreview v-if="
+                  item.componentName && isLongTextCard(item.componentName)
+                " :componentName="item.componentName" />
 
-                <QuickBookingComponent
-                  v-if="
-                    item.toolCall &&
-                    item.toolCall.componentName === CompName.quickBookingCard
-                  "
-                />
-                <DiscoveryCardComponent
-                  v-else-if="
-                    item.toolCall &&
-                    item.toolCall.componentName === CompName.discoveryCard
-                  "
-                />
-                <CreateServiceOrder
-                  v-else-if="
-                    item.toolCall &&
-                    item.toolCall.componentName === CompName.callServiceCard
-                  "
-                  :toolCall="item.toolCall"
-                />
-                <OpenMapComponent
-                  v-else-if="
-                    item.toolCall &&
-                    item.toolCall.componentName === CompName.mapCard
-                  "
-                />
-                <GeneratorPhotoComponent
-                  v-else-if="
-                    item.toolCall &&
-                    item.toolCall.componentName ===
-                      CompName.aigcPhotoGeneratorCard
-                  "
-                  :toolCall="item.toolCall"
-                />
-                <AigcPhotoCard
-                  v-else-if="
-                    item.toolCall &&
-                    item.toolCall.componentName === CompName.videoCard
-                  "
-                  :toolCall="item.toolCall"
-                />
+                <QuickBookingComponent v-if="
+                  item.toolCall &&
+                  item.toolCall.componentName === CompName.quickBookingCard
+                " />
+                <DiscoveryCardComponent v-else-if="
+                  item.toolCall &&
+                  item.toolCall.componentName === CompName.discoveryCard
+                " />
+                <CreateServiceOrder v-else-if="
+                  item.toolCall &&
+                  item.toolCall.componentName === CompName.callServiceCard
+                " :toolCall="item.toolCall" />
+                <OpenMapComponent v-else-if="
+                  item.toolCall &&
+                  item.toolCall.componentName === CompName.mapCard
+                " />
+                <GeneratorPhotoComponent v-else-if="
+                  item.toolCall &&
+                  item.toolCall.componentName ===
+                  CompName.aigcPhotoGeneratorCard
+                " :toolCall="item.toolCall" />
+                <AigcPhotoCard v-else-if="
+                  item.toolCall &&
+                  item.toolCall.componentName === CompName.videoCard
+                " :toolCall="item.toolCall" />
 
-                <Feedback
-                  v-else-if="
-                    item.toolCall &&
-                    item.toolCall.componentName === CompName.feedbackCard
-                  "
-                  :toolCall="item.toolCall"
-                />
-                <DetailCardComponent
-                  v-else-if="
-                    item.toolCall &&
-                    item.toolCall.componentName ===
-                      CompName.pictureAndCommodityCard
-                  "
-                  :toolCall="item.toolCall"
-                />
-                <AddCarCard
-                  v-else-if="
-                    item.toolCall &&
-                    item.toolCall.componentName ===
-                      CompName.enterLicensePlateCard
-                  "
-                  :toolCall="item.toolCall"
-                />
-                <SurveyQuestionnaire
-                  v-else-if="
-                    item.toolCall &&
-                    item.toolCall.componentName ===
-                      CompName.callSurveyQuestionnaire
-                  "
-                  :toolCall="item.toolCall"
-                />
+                <Feedback v-else-if="
+                  item.toolCall &&
+                  item.toolCall.componentName === CompName.feedbackCard
+                " :toolCall="item.toolCall" />
+                <DetailCardComponent v-else-if="
+                  item.toolCall &&
+                  item.toolCall.componentName ===
+                  CompName.pictureAndCommodityCard
+                " :toolCall="item.toolCall" />
+                <AddCarCard v-else-if="
+                  item.toolCall &&
+                  item.toolCall.componentName ===
+                  CompName.enterLicensePlateCard
+                " :toolCall="item.toolCall" />
+                <SurveyQuestionnaire v-else-if="
+                  item.toolCall &&
+                  item.toolCall.componentName ===
+                  CompName.callSurveyQuestionnaire
+                " :toolCall="item.toolCall" />
               </template>
 
               <template #footer>
                 <!-- 这个是底部 -->
-                <AttachListComponent
-                  v-if="item.question"
-                  :question="item.question"
-                />
+                <AttachListComponent v-if="item.question" :question="item.question" />
               </template>
             </ChatCardAI>
           </template>
@@ -183,23 +107,17 @@
           <template v-else>
             <ChatCardOther class="flex justify-center" :text="item.msg">
               <ChatGuide v-if="chatMsgList.length < 2" />
-              <ActivityListComponent
-                v-if="
-                  mainPageDataModel.activityList &&
-                  mainPageDataModel.activityList.length
-                "
-                :activityList="mainPageDataModel.activityList"
-              />
+              <ActivityListComponent v-if="
+                mainPageDataModel.activityList &&
+                mainPageDataModel.activityList.length
+              " :activityList="mainPageDataModel.activityList" />
 
               <!-- 先不展示了，等后续有需求再加回来 false -->
-              <RecommendPostsComponent
-                v-if="
-                  false &&
-                  mainPageDataModel.recommendTheme &&
-                  mainPageDataModel.recommendTheme.length
-                "
-                :recommendThemeList="mainPageDataModel.recommendTheme"
-              />
+              <RecommendPostsComponent v-if="
+                false &&
+                mainPageDataModel.recommendTheme &&
+                mainPageDataModel.recommendTheme.length
+              " :recommendThemeList="mainPageDataModel.recommendTheme" />
             </ChatCardOther>
           </template>
         </div>
@@ -209,23 +127,16 @@
     <!-- 输入框区域 -->
     <div class="mt-auto shrink-0">
       <ChatQuickAccess />
-      <ChatInputArea
-        ref="inputAreaRef"
-        v-model="inputMessage"
-        :holdKeyboard="holdKeyboard"
-        :is-session-active="isSessionActive"
-        :stop-request="stopRequest"
-        @send="sendMessageAction"
-        @noHideKeyboard="handleNoHideKeyboard"
-        @keyboardShow="handleKeyboardShow"
-        @keyboardHide="handleKeyboardHide"
-      />
+      <ChatInputArea ref="inputAreaRef" v-model="inputMessage" :holdKeyboard="holdKeyboard"
+        :is-session-active="isSessionActive" :stop-request="stopRequest" @send="sendMessageAction"
+        @noHideKeyboard="handleNoHideKeyboard" @keyboardShow="handleKeyboardShow" @keyboardHide="handleKeyboardHide" />
     </div>
   </div>
 </template>
 
 <script setup>
 import { computed, onMounted, nextTick, onUnmounted, ref } from "vue";
+import { showToast } from "vant";
 import { useI18n } from "vue-i18n";
 import { emitter } from "@/utils/events";
 import {
@@ -361,7 +272,8 @@ const tabList = computed(() => [
 ]);
 
 const handleChange = (i) => {
-  console.log("切换:", i);
+  console.log("🚀 ~ handleChange ~ i:", i)
+  tabIndex.value = i;
 };
 
 /// =============事件函数↓================
@@ -569,13 +481,13 @@ const addNoticeListener = () => {
     }
   });
 
-  // emitter.on(SWITCH_TO_COMPANION_TAB, () => {
-  //   tabIndex.value = 1;
-  // });
+  emitter.on(SWITCH_TO_COMPANION_TAB, () => {
+    tabIndex.value = 1;
+  });
 
-  // emitter.on(SWITCH_TO_DISCOVERY_TAB, () => {
-  //   tabIndex.value = 0;
-  // });
+  emitter.on(SWITCH_TO_DISCOVERY_TAB, () => {
+    tabIndex.value = 0;
+  });
 };
 
 // token存在，初始化数据