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