duanshuwen/nianxx-h5
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: fix tab switching and clean up component templates

Browse Source 
- 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
This commit is contained in:
duanshuwen
2026-06-27 17:48:33 +08:00
parent b3eaa2057b
commit f0c34f4f5c
2 changed files with 93 additions and 181 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/SwipeCards/index.vue
View File

@@ -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 导致后续卡片无法正确重渲染与绑定事件

204
src/pages/home/components/ChatMainList/index.vue
View File

@@ -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)
<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="
" :isLoading="item.isLoading">
<template #content v-if="
item.toolCall ||
(item.componentName && isLongTextCard(item.componentName))
"
>
<LongTextGuideCardPreview
v-if="
">
<LongTextGuideCardPreview v-if="
item.componentName && isLongTextCard(item.componentName)
"
:componentName="item.componentName"
/>
" :componentName="item.componentName" />
<QuickBookingComponent
v-if="
<QuickBookingComponent v-if="
item.toolCall &&
item.toolCall.componentName === CompName.quickBookingCard
"
/>
<DiscoveryCardComponent
v-else-if="
" />
<DiscoveryCardComponent v-else-if="
item.toolCall &&
item.toolCall.componentName === CompName.discoveryCard
"
/>
<CreateServiceOrder
v-else-if="
" />
<CreateServiceOrder v-else-if="
item.toolCall &&
item.toolCall.componentName === CompName.callServiceCard
"
:toolCall="item.toolCall"
/>
<OpenMapComponent
v-else-if="
" :toolCall="item.toolCall" />
<OpenMapComponent v-else-if="
item.toolCall &&
item.toolCall.componentName === CompName.mapCard
"
/>
<GeneratorPhotoComponent
v-else-if="
" />
<GeneratorPhotoComponent v-else-if="
item.toolCall &&
item.toolCall.componentName ===
CompName.aigcPhotoGeneratorCard
"
:toolCall="item.toolCall"
/>
<AigcPhotoCard
v-else-if="
" :toolCall="item.toolCall" />
<AigcPhotoCard v-else-if="
item.toolCall &&
item.toolCall.componentName === CompName.videoCard
"
:toolCall="item.toolCall"
/>
" :toolCall="item.toolCall" />
<Feedback
v-else-if="
<Feedback v-else-if="
item.toolCall &&
item.toolCall.componentName === CompName.feedbackCard
"
:toolCall="item.toolCall"
/>
<DetailCardComponent
v-else-if="
" :toolCall="item.toolCall" />
<DetailCardComponent v-else-if="
item.toolCall &&
item.toolCall.componentName ===
CompName.pictureAndCommodityCard
"
:toolCall="item.toolCall"
/>
<AddCarCard
v-else-if="
" :toolCall="item.toolCall" />
<AddCarCard v-else-if="
item.toolCall &&
item.toolCall.componentName ===
CompName.enterLicensePlateCard
"
:toolCall="item.toolCall"
/>
<SurveyQuestionnaire
v-else-if="
" :toolCall="item.toolCall" />
<SurveyQuestionnaire v-else-if="
item.toolCall &&
item.toolCall.componentName ===
CompName.callSurveyQuestionnaire
"
:toolCall="item.toolCall"
/>
" :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="
<ActivityListComponent v-if="
mainPageDataModel.activityList &&
mainPageDataModel.activityList.length
"
:activityList="mainPageDataModel.activityList"
/>
" :activityList="mainPageDataModel.activityList" />
<!-- 先不展示了，等后续有需求再加回来 false -->
<RecommendPostsComponent
v-if="
<RecommendPostsComponent v-if="
false &&
mainPageDataModel.recommendTheme &&
mainPageDataModel.recommendTheme.length
"
:recommendThemeList="mainPageDataModel.recommendTheme"
/>
" :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存在，初始化数据