feat: 首页欢迎语组件布局调整
This commit is contained in:
duanshuwen
@@ -1,145 +1,122 @@
|
||||
<template>
|
||||
<view class="chat-container" @touchend="handleTouchEnd">
|
||||
<!-- 顶部的背景 -->
|
||||
<ChatTopBgImg class="chat-container-bg"></ChatTopBgImg>
|
||||
<view class="flex flex-col h-screen" @touchend="handleTouchEnd">
|
||||
<!-- 顶部自定义导航栏 -->
|
||||
<view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
|
||||
<ChatTopNavBar @openDrawer="openDrawer" />
|
||||
</view>
|
||||
|
||||
<!-- 消息列表（可滚动区域） -->
|
||||
<scroll-view
|
||||
class="main flex-full"
|
||||
scroll-y
|
||||
:scroll-top="scrollTop"
|
||||
:scroll-with-animation="true"
|
||||
@scroll="handleScroll"
|
||||
@scrolltolower="handleScrollToLower"
|
||||
>
|
||||
<!-- welcome栏 -->
|
||||
<ChatTopWelcome :mainPageDataModel="mainPageDataModel" />
|
||||
|
||||
<view class="chat-content">
|
||||
<!-- 顶部自定义导航栏 -->
|
||||
<view
|
||||
class="nav-bar-container"
|
||||
:style="{
|
||||
paddingTop: statusBarHeight + 'px',
|
||||
}"
|
||||
class="area-msg-list-content"
|
||||
v-for="item in chatMsgList"
|
||||
:key="item.msgId"
|
||||
:id="item.msgId"
|
||||
>
|
||||
<ChatTopNavBar @openDrawer="openDrawer"></ChatTopNavBar>
|
||||
</view>
|
||||
<template v-if="item.msgType === MessageRole.AI">
|
||||
<ChatCardAI
|
||||
class="message-item-ai"
|
||||
:key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
|
||||
:text="item.msg || ''"
|
||||
:isLoading="item.isLoading"
|
||||
>
|
||||
<template #content v-if="item.toolCall">
|
||||
<QuickBookingComponent
|
||||
v-if="item.toolCall.componentName === CompName.quickBookingCard"
|
||||
/>
|
||||
<DiscoveryCardComponent
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.discoveryCard
|
||||
"
|
||||
/>
|
||||
<CreateServiceOrder
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.createWorkOrderCard
|
||||
"
|
||||
/>
|
||||
<Feedback
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.feedbackCard
|
||||
"
|
||||
:toolCall="item.toolCall"
|
||||
/>
|
||||
<DetailCardCompontent
|
||||
v-else-if="
|
||||
item.toolCall.componentName ===
|
||||
CompName.pictureAndCommodityCard
|
||||
"
|
||||
:toolCall="item.toolCall"
|
||||
/>
|
||||
<AddCarCrad
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.enterLicensePlateCard
|
||||
"
|
||||
:toolCall="item.toolCall"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<!-- 消息列表（可滚动区域） -->
|
||||
<scroll-view
|
||||
:scroll-top="scrollTop"
|
||||
scroll-y
|
||||
:scroll-with-animation="true"
|
||||
class="area-msg-list"
|
||||
@scroll="handleScroll"
|
||||
@scrolltolower="handleScrollToLower"
|
||||
>
|
||||
<!-- welcome栏 -->
|
||||
<ChatTopWelcome
|
||||
class="chat-container-top-bannar"
|
||||
:initPageImages="mainPageDataModel.initPageImages"
|
||||
:welcomeContent="mainPageDataModel.welcomeContent"
|
||||
>
|
||||
</ChatTopWelcome>
|
||||
|
||||
<view
|
||||
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="message-item-ai"
|
||||
:key="`ai-${item.msgId}-${item.msg ? item.msg.length : 0}`"
|
||||
:text="item.msg || ''"
|
||||
:isLoading="item.isLoading"
|
||||
>
|
||||
<template #content v-if="item.toolCall">
|
||||
<QuickBookingComponent
|
||||
v-if="
|
||||
item.toolCall.componentName === CompName.quickBookingCard
|
||||
"
|
||||
/>
|
||||
<DiscoveryCardComponent
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.discoveryCard
|
||||
"
|
||||
/>
|
||||
<CreateServiceOrder
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.createWorkOrderCard
|
||||
"
|
||||
/>
|
||||
<Feedback
|
||||
v-else-if="
|
||||
item.toolCall.componentName === CompName.feedbackCard
|
||||
"
|
||||
:toolCall="item.toolCall"
|
||||
/>
|
||||
<DetailCardCompontent
|
||||
v-else-if="
|
||||
item.toolCall.componentName ===
|
||||
CompName.pictureAndCommodityCard
|
||||
"
|
||||
:toolCall="item.toolCall"
|
||||
/>
|
||||
<AddCarCrad
|
||||
v-else-if="
|
||||
item.toolCall.componentName ===
|
||||
CompName.enterLicensePlateCard
|
||||
"
|
||||
:toolCall="item.toolCall"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<!-- 这个是底部 -->
|
||||
<AttachListComponent
|
||||
v-if="item.question"
|
||||
:question="item.question"
|
||||
@replySent="handleReply"
|
||||
/>
|
||||
</template>
|
||||
</ChatCardAI>
|
||||
</template>
|
||||
|
||||
<template v-else-if="item.msgType === MessageRole.ME">
|
||||
<ChatCardMine class="message-item-mine" :text="item.msg">
|
||||
</ChatCardMine>
|
||||
</template>
|
||||
|
||||
<template v-else>
|
||||
<ChatCardOther class="message-item-other" :text="item.msg">
|
||||
<ChatMoreTips
|
||||
<template #footer>
|
||||
<!-- 这个是底部 -->
|
||||
<AttachListComponent
|
||||
v-if="item.question"
|
||||
:question="item.question"
|
||||
@replySent="handleReply"
|
||||
:itemList="mainPageDataModel.guideWords"
|
||||
/>
|
||||
</template>
|
||||
</ChatCardAI>
|
||||
</template>
|
||||
|
||||
<ActivityListComponent
|
||||
v-if="
|
||||
mainPageDataModel.activityList &&
|
||||
mainPageDataModel.activityList.length > 0
|
||||
"
|
||||
:activityList="mainPageDataModel.activityList"
|
||||
/>
|
||||
<template v-else-if="item.msgType === MessageRole.ME">
|
||||
<ChatCardMine class="message-item-mine" :text="item.msg">
|
||||
</ChatCardMine>
|
||||
</template>
|
||||
|
||||
<RecommendPostsComponent
|
||||
v-if="
|
||||
mainPageDataModel.recommendTheme &&
|
||||
mainPageDataModel.recommendTheme.length > 0
|
||||
"
|
||||
:recommendThemeList="mainPageDataModel.recommendTheme"
|
||||
/>
|
||||
</ChatCardOther>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<template v-else>
|
||||
<ChatCardOther class="message-item-other" :text="item.msg">
|
||||
<ActivityListComponent
|
||||
v-if="
|
||||
mainPageDataModel.activityList &&
|
||||
mainPageDataModel.activityList.length > 0
|
||||
"
|
||||
:activityList="mainPageDataModel.activityList"
|
||||
/>
|
||||
|
||||
<!-- 输入框区域 -->
|
||||
<view class="footer-area">
|
||||
<ChatQuickAccess @replySent="handleReplyInstruct" />
|
||||
<ChatInputArea
|
||||
ref="inputAreaRef"
|
||||
v-model="inputMessage"
|
||||
:holdKeyboard="holdKeyboard"
|
||||
:is-session-active="isSessionActive"
|
||||
:stop-request="stopRequest"
|
||||
@send="sendMessageAction"
|
||||
@noHideKeyboard="handleNoHideKeyboard"
|
||||
@keyboardShow="handleKeyboardShow"
|
||||
@keyboardHide="handleKeyboardHide"
|
||||
/>
|
||||
<RecommendPostsComponent
|
||||
v-if="
|
||||
mainPageDataModel.recommendTheme &&
|
||||
mainPageDataModel.recommendTheme.length > 0
|
||||
"
|
||||
:recommendThemeList="mainPageDataModel.recommendTheme"
|
||||
/>
|
||||
</ChatCardOther>
|
||||
</template>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 输入框区域 -->
|
||||
<view class="footer">
|
||||
<ChatQuickAccess @replySent="handleReplyInstruct" />
|
||||
<ChatInputArea
|
||||
ref="inputAreaRef"
|
||||
v-model="inputMessage"
|
||||
:holdKeyboard="holdKeyboard"
|
||||
:is-session-active="isSessionActive"
|
||||
:stop-request="stopRequest"
|
||||
@send="sendMessageAction"
|
||||
@noHideKeyboard="handleNoHideKeyboard"
|
||||
@keyboardShow="handleKeyboardShow"
|
||||
@keyboardHide="handleKeyboardHide"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
@@ -157,13 +134,11 @@ import {
|
||||
import { WSS_URL } from "@/request/base/baseUrl";
|
||||
import { MessageRole, MessageType, CompName } from "@/model/ChatModel";
|
||||
import ChatTopWelcome from "../ChatTopWelcome/index.vue";
|
||||
import ChatTopBgImg from "../ChatTopBgImg/index.vue";
|
||||
import ChatTopNavBar from "../ChatTopNavBar/index.vue";
|
||||
import ChatCardAI from "../ChatCardAi/index.vue";
|
||||
import ChatCardMine from "../ChatCardMine/index.vue";
|
||||
import ChatCardOther from "../ChatCardOther/index.vue";
|
||||
import ChatQuickAccess from "../ChatQuickAccess/index.vue";
|
||||
import ChatMoreTips from "../ChatMoreTips/index.vue";
|
||||
import ChatInputArea from "../ChatInputArea/index.vue";
|
||||
import QuickBookingComponent from "../../module/QuickBookingComponent/index.vue";
|
||||
import DiscoveryCardComponent from "../../module/DiscoveryCardComponent/index.vue";
|
||||
|
||||
@@ -1,106 +1,4 @@
|
||||
.chat-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
background-color: #e9f3f7;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden !important;
|
||||
position: relative;
|
||||
/* 确保在键盘弹起时布局正确 */
|
||||
box-sizing: border-box;
|
||||
|
||||
.chat-container-bg {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: 0;
|
||||
height: 270px;
|
||||
background: linear-gradient(180deg, #42adf9 0%, #6cd1ff 51%, #e9f3f7 99%);
|
||||
}
|
||||
|
||||
.chat-content {
|
||||
width: 100vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
z-index: 1;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.chat-container-top-bannar {
|
||||
width: 100vw;
|
||||
flex-shrink: 0;
|
||||
touch-action: none;
|
||||
}
|
||||
|
||||
.area-msg-list {
|
||||
width: 100vw;
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
min-height: 0;
|
||||
height: 0;
|
||||
padding: 4px 0 0;
|
||||
overscroll-behavior: contain; /* 阻止滚动穿透 */
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.message-item-ai {
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.message-item-mine {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.message-item-other {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.footer-area {
|
||||
width: 100vw;
|
||||
flex-shrink: 0;
|
||||
padding: 4px 0 20px 0; /* 直接设置20px底部安全距离 */
|
||||
background-color: #e9f3f7;
|
||||
touch-action: pan-x;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
min-height: fit-content;
|
||||
/* 安卓键盘适配 - 使用相对定位配合adjustPan */
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
transition: padding-bottom 0.3s ease;
|
||||
/* 确保输入区域始终可见 */
|
||||
// transform: translateZ(0);
|
||||
// -webkit-transform: translateZ(0);
|
||||
}
|
||||
|
||||
// 打字机光标闪烁动画
|
||||
.typing-cursor {
|
||||
display: inline-block;
|
||||
color: #42adf9;
|
||||
font-weight: bold;
|
||||
font-size: 1.2em;
|
||||
animation: blink 1s infinite;
|
||||
margin-left: 2px;
|
||||
}
|
||||
|
||||
@keyframes blink {
|
||||
0%,
|
||||
50% {
|
||||
opacity: 1;
|
||||
}
|
||||
51%,
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
.footer {
|
||||
height: 118px;
|
||||
// touch-action: pan-x;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user