zoujing/YGChatCS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 首页欢迎语组件布局调整

Browse Source
This commit is contained in:
duanshuwen
2025-10-14 22:15:54 +08:00
parent b5f5bc646a
commit 93bf65eb65
14 changed files with 212 additions and 352 deletions
Download Patch File Download Diff File Expand all files Collapse all files

241
src/pages/index/components/chat/ChatMainList/index.vue
View File

@@ -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";

108
src/pages/index/components/chat/ChatMainList/styles/index.scss
View File

@@ -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;
}

17
src/pages/index/components/chat/ChatMoreTips/index.vue
View File

@@ -1,17 +1,17 @@
<template>
<view class="more-tips">
<view class="more-tips-scroll">
<view class="more-tips bg-white border-box">
<view class="font-size-0 whitesspace-nowrap scroll-x">
<view
class="more-tips-item"
v-for="(item, index) in itemList"
class="more-tips-item border-box inline-block mr-8"
v-for="(item, index) in guideWords"
:key="index"
>
<view
class="more-tips-item-title font-500 font-size-12 line-height-24 text-center"
<text
class="font-500 font-size-12 line-height-24 text-center"
@click="sendReply(item)"
>
{{ item }}
</view>
</text>
</view>
</view>
</view>
@@ -19,10 +19,11 @@
<script setup>
import { defineProps } from "vue";
const emits = defineEmits(["replySent"]);
defineProps({
itemList: {
guideWords: {
type: Array,
default: [
"定温泉票",

35
src/pages/index/components/chat/ChatMoreTips/styles/index.scss
View File

@@ -1,34 +1,15 @@
.more-tips {
width: 100%;
&-scroll {
display: flex;
flex-direction: row;
overflow-x: auto;
white-space: nowrap;
-webkit-overflow-scrolling: touch;
padding: 8px 0;
box-sizing: border-box;
}
box-shadow: 0px -1px 10px 0px rgba(0, 0, 0, 0.03);
border-radius: 0px 0px 20px 20px;
padding: 12px 0 12px 12px;
.more-tips-item {
border-radius: 8px;
margin: 0 4px;
box-shadow: 0 2px 5px 0px rgba(0, 0, 0, 0.1);
background-color: $uni-bg-color;
padding: 2px 12px;
display: flex;
flex-direction: column;
flex-shrink: 0;
white-space: nowrap;
position: relative;
&:first-child {
margin-left: 0;
}
background: #f7f7f7;
border-radius: 5px;
padding: 6px 8px;
.more-tips-item-title {
color: #00a6ff;
white-space: nowrap;
&:last-child {
margin-right: 12px;
}
}
}

9
src/pages/index/components/chat/ChatTopBgImg/index.vue
View File

@@ -1,9 +0,0 @@
<template>
<view class="top-bg"> </view>
</template>
<script></script>
<style lang="scss" scoped>
@import "./styles/index.scss";
</style>

11
src/pages/index/components/chat/ChatTopBgImg/styles/index.scss
View File

@@ -1,11 +0,0 @@
.top-bg {
width: 100%;
height: 270px;
overflow: hidden;
background: linear-gradient(180deg, #42adf9 0%, #6cd1ff 51%, #e9f3f7 99%);
.top-bg-img {
width: 100%;
height: 100%;
}
}

76
src/pages/index/components/chat/ChatTopWelcome/index.vue
View File

@@ -1,51 +1,59 @@
<template>
<view class="top-bg-content">
<view class="top-item">
<!-- :style="backgroundStyle" -->
<image
class="top-item-left"
:src="initPageImages.welcomeImageUrl"
mode="aspectFit"
></image>
<image
class="top-item-right"
:src="initPageImages.logoImageUrl"
mode="aspectFit"
></image>
<view class="welcome-content border-box p-20">
<view class="wrap rounded-20">
<view
class="flex flex-items-center flex-justify-between border-box pl-12 pr-12"
>
<image
class="ip relative"
:src="initPageImages.logoImageUrl"
mode="aspectFit"
/>
<view
class="welcome-text font-size-14 font-500 font-family-misans-vf color-171717 line-height-24"
>
{{ welcomeContent }}
</view>
</view>
<ChatMoreTips :guideWords="guideWords" @replySent="handleReply" />
</view>
<ChatCardAI v-if="welcomeContent.length" :text="welcomeContent" />
</view>
</template>
<script setup>
import { defineProps, computed } from "vue";
import ChatCardAI from "../ChatCardAi/index.vue";
import ChatMoreTips from "../ChatMoreTips/index.vue";
const props = defineProps({
initPageImages: {
mainPageDataModel: {
type: Object,
default: {
backgroundImageUrl: "",
logoImageUrl: "",
welcomeImageUrl: "",
default: () => {
return {
initPageImages: {
backgroundImageUrl: "",
logoImageUrl: "",
welcomeImageUrl: "",
},
welcomeContent:
"查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
guideWords: [
"定温泉票",
"定酒店",
"优惠套餐",
"亲子玩法",
"了解交通",
"看看酒店",
"看看美食",
],
};
},
},
welcomeContent: {
type: String,
default:
"查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
},
});
// 计算背景样式
const backgroundStyle = computed(() => {
return {
backgroundImage: `url(${props.initPageImages.backgroundImageUrl})`,
backgroundSize: "cover",
backgroundPosition: "center",
backgroundRepeat: "no-repeat",
};
});
const initPageImages = computed(() => props.mainPageDataModel.initPageImages);
const welcomeContent = computed(() => props.mainPageDataModel.welcomeContent);
const guideWords = computed(() => props.mainPageDataModel.guideWords);
</script>
<style lang="scss" scoped>

29
src/pages/index/components/chat/ChatTopWelcome/styles/index.scss
View File

@@ -1,25 +1,10 @@
.top-bg-content {
display: flex;
justify-content: flex-end;
align-items: stretch;
flex-direction: column;
.wrap {
background-color: rgba(255, 255, 255, 0.5);
}
.top-item {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 32px;
margin-bottom: -6px;
}
.top-item-left {
width: 118px;
height: 52px;
}
.top-item-right {
width: 130px;
height: 130px;
.ip {
flex: 0 0 123px;
width: 123px;
height: 166px;
margin-top: -20px;
}

2
src/pages/index/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="w-full h-screen">
<view class="w-full h-screen bg-liner">
<ChatMainList />
</view>

16
src/static/scss/flex.scss
View File

@@ -11,6 +11,10 @@
justify-content: center;
}
.flex-justify-between {
justify-content: space-between;
}
.flex-col {
flex-direction: column;
}
@@ -18,3 +22,15 @@
.flex-wrap {
flex-wrap: wrap;
}
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-full {
flex: 1;
}
.flex-shrink-0 {
flex-shrink: 0;
}

4
src/static/scss/font-family.scss
View File

@@ -2,3 +2,7 @@
.font-family-sans-serif {
font-family: sans-serif;
}
.font-family-misans-vf {
font-family: MiSans VF, MiSans VF;
}

2
src/static/scss/index.scss
View File

@@ -18,4 +18,4 @@
@import "./overflow.scss";
@import "./width.scss";
@import "./z-index.scss";
@import "./white-scape.scss";
@import "./white-space.scss";

12
src/static/scss/padding.scss
View File

@@ -31,6 +31,14 @@
padding-right: 16px;
}
.p-20 {
padding: 20px;
}
.pt-20 {
padding-top: 20px;
}
.pl-20 {
padding-left: 20px;
}
@@ -38,3 +46,7 @@
.pr-20 {
padding-right: 20px;
}
.pb-20 {
padding-bottom: 20px;
}

2
src/static/scss/white-scape.scss → src/static/scss/white-space.scss
View File

@@ -1,3 +1,3 @@
.whitescape-nowrap {
.whitesspace-nowrap {
white-space: nowrap;
}