Merge branch 'main' of https://git.nianxx.cn/zoujing/YGChatCS into fix-109

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

@@ -1,35 +1,21 @@
 <template>
-  <view class="chat-container" @touchend="handleTouchEnd">
+  <view class="flex flex-col h-screen" @touchend="handleTouchEnd">
-    <!-- 顶部的背景 -->
-    <ChatTopBgImg class="chat-container-bg"></ChatTopBgImg>
-
-    <view class="chat-content">
     <!-- 顶部自定义导航栏 -->
-      <view
+    <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
-        class="nav-bar-container"
+      <ChatTopNavBar @openDrawer="openDrawer" />
-        :style="{
-          paddingTop: statusBarHeight + 'px',
-        }"
-      >
-        <ChatTopNavBar @openDrawer="openDrawer"></ChatTopNavBar>
     </view>
 
     <!-- 消息列表（可滚动区域） -->
     <scroll-view
-        :scroll-top="scrollTop"
+      class="main flex-full"
       scroll-y
+      :scroll-top="scrollTop"
       :scroll-with-animation="true"
-        class="area-msg-list"
       @scroll="handleScroll"
       @scrolltolower="handleScrollToLower"
     >
       <!-- welcome栏 -->
-        <ChatTopWelcome
+      <ChatTopWelcome :mainPageDataModel="mainPageDataModel" />
-          class="chat-container-top-bannar"
-          :initPageImages="mainPageDataModel.initPageImages"
-          :welcomeContent="mainPageDataModel.welcomeContent"
-        >
-        </ChatTopWelcome>
 
       <view
         class="area-msg-list-content"
@@ -46,9 +32,7 @@
           >
             <template #content v-if="item.toolCall">
               <QuickBookingComponent
-                  v-if="
+                v-if="item.toolCall.componentName === CompName.quickBookingCard"
-                    item.toolCall.componentName === CompName.quickBookingCard
-                  "
               />
               <DiscoveryCardComponent
                 v-else-if="
@@ -75,8 +59,7 @@
               />
               <AddCarCrad
                 v-else-if="
-                    item.toolCall.componentName ===
+                  item.toolCall.componentName === CompName.enterLicensePlateCard
-                    CompName.enterLicensePlateCard
                 "
                 :toolCall="item.toolCall"
               />
@@ -100,11 +83,6 @@
 
         <template v-else>
           <ChatCardOther class="message-item-other" :text="item.msg">
-              <ChatMoreTips
-                @replySent="handleReply"
-                :itemList="mainPageDataModel.guideWords"
-              />
-
             <ActivityListComponent
               v-if="
                 mainPageDataModel.activityList &&
@@ -126,7 +104,7 @@
     </scroll-view>
 
     <!-- 输入框区域 -->
-      <view class="footer-area">
+    <view class="footer">
       <ChatQuickAccess @replySent="handleReplyInstruct" />
       <ChatInputArea
         ref="inputAreaRef"
@@ -141,7 +119,6 @@
       />
     </view>
   </view>
-  </view>
 </template>
 
 <script setup>
@@ -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
+        class="flex flex-items-center flex-justify-between border-box pl-12 pr-12"
+      >
         <image
-        class="top-item-left"
+          class="ip relative"
-        :src="initPageImages.welcomeImageUrl"
-        mode="aspectFit"
-      ></image>
-      <image
-        class="top-item-right"
           :src="initPageImages.logoImageUrl"
           mode="aspectFit"
-      ></image>
+        />
+        <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: {
+    default: () => {
+      return {
+        initPageImages: {
           backgroundImageUrl: "",
           logoImageUrl: "",
           welcomeImageUrl: "",
         },
-  },
+        welcomeContent:
-  welcomeContent: {
-    type: String,
-    default:
           "查信息、预定下单、探索玩法、呼叫服务、我通通可以满足，快试试问我问题吧!",
+        guideWords: [
+          "定温泉票",
+          "定酒店",
+          "优惠套餐",
+          "亲子玩法",
+          "了解交通",
+          "看看酒店",
+          "看看美食",
+        ],
+      };
+    },
   },
 });
 
-// 计算背景样式
+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;
 }