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

src/pages/index/components/chat/ChatMainList/index.vue

@@ -1,145 +1,122 @@
 <template>
-  <view class="chat-container" @touchend="handleTouchEnd">
+  <view class="flex flex-col h-screen" @touchend="handleTouchEnd">
-    <!-- 顶部的背景 -->
+    <!-- 顶部自定义导航栏 -->
-    <ChatTopBgImg class="chat-container-bg"></ChatTopBgImg>
+    <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"
+        class="area-msg-list-content"
-        :style="{
+        v-for="item in chatMsgList"
-          paddingTop: statusBarHeight + 'px',
+        :key="item.msgId"
-        }"
+        :id="item.msgId"
       >
-        <ChatTopNavBar @openDrawer="openDrawer"></ChatTopNavBar>
+        <template v-if="item.msgType === MessageRole.AI">
-      </view>
+          <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>
-      <scroll-view
+              <!-- 这个是底部 -->
-        :scroll-top="scrollTop"
+              <AttachListComponent
-        scroll-y
+                v-if="item.question"
-        :scroll-with-animation="true"
+                :question="item.question"
-        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
                 @replySent="handleReply"
-                :itemList="mainPageDataModel.guideWords"
               />
+            </template>
+          </ChatCardAI>
+        </template>
 
-              <ActivityListComponent
+        <template v-else-if="item.msgType === MessageRole.ME">
-                v-if="
+          <ChatCardMine class="message-item-mine" :text="item.msg">
-                  mainPageDataModel.activityList &&
+          </ChatCardMine>
-                  mainPageDataModel.activityList.length > 0
+        </template>
-                "
-                :activityList="mainPageDataModel.activityList"
-              />
 
-              <RecommendPostsComponent
+        <template v-else>
-                v-if="
+          <ChatCardOther class="message-item-other" :text="item.msg">
-                  mainPageDataModel.recommendTheme &&
+            <ActivityListComponent
-                  mainPageDataModel.recommendTheme.length > 0
+              v-if="
-                "
+                mainPageDataModel.activityList &&
-                :recommendThemeList="mainPageDataModel.recommendTheme"
+                mainPageDataModel.activityList.length > 0
-              />
+              "
-            </ChatCardOther>
+              :activityList="mainPageDataModel.activityList"
-          </template>
+            />
-        </view>
-      </scroll-view>
 
-      <!-- 输入框区域 -->
+            <RecommendPostsComponent
-      <view class="footer-area">
+              v-if="
-        <ChatQuickAccess @replySent="handleReplyInstruct" />
+                mainPageDataModel.recommendTheme &&
-        <ChatInputArea
+                mainPageDataModel.recommendTheme.length > 0
-          ref="inputAreaRef"
+              "
-          v-model="inputMessage"
+              :recommendThemeList="mainPageDataModel.recommendTheme"
-          :holdKeyboard="holdKeyboard"
+            />
-          :is-session-active="isSessionActive"
+          </ChatCardOther>
-          :stop-request="stopRequest"
+        </template>
-          @send="sendMessageAction"
-          @noHideKeyboard="handleNoHideKeyboard"
-          @keyboardShow="handleKeyboardShow"
-          @keyboardHide="handleKeyboardHide"
-        />
       </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";

src/pages/index/components/chat/ChatMainList/styles/index.scss

@@ -1,106 +1,4 @@
-.chat-container {
+.footer {
-  width: 100vw;
+  height: 118px;
-  height: 100vh;
+  // touch-action: pan-x;
-  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;
-  }
 }

src/pages/index/components/chat/ChatMoreTips/index.vue

@@ -1,17 +1,17 @@
 <template>
-  <view class="more-tips">
+  <view class="more-tips bg-white border-box">
-    <view class="more-tips-scroll">
+    <view class="font-size-0 whitesspace-nowrap scroll-x">
       <view
-        class="more-tips-item"
+        class="more-tips-item border-box inline-block mr-8"
-        v-for="(item, index) in itemList"
+        v-for="(item, index) in guideWords"
         :key="index"
       >
-        <view
+        <text
-          class="more-tips-item-title font-500 font-size-12 line-height-24 text-center"
+          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: [
       "定温泉票",

src/pages/index/components/chat/ChatMoreTips/styles/index.scss

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

src/pages/index/components/chat/ChatTopBgImg/index.vue

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

src/pages/index/components/chat/ChatTopBgImg/styles/index.scss

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

src/pages/index/components/chat/ChatTopWelcome/index.vue

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

src/pages/index/components/chat/ChatTopWelcome/styles/index.scss

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

src/pages/index/index.vue

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

src/static/scss/flex.scss

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

src/static/scss/font-family.scss

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

src/static/scss/index.scss

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

src/static/scss/padding.scss

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

src/static/scss/white-space.scss

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