feat: 页面结构的调整

src/pages/ChatMain/ChatMainList/index.vue

@@ -1,15 +1,33 @@
 <template>
-  <view class="flex flex-col h-screen">
+  <view class="flex flex-col h-screen relative">
     <!-- 顶部自定义导航栏 -->
-    <view class="header" :style="{ paddingTop: statusBarHeight + 'px' }">
+    <view class="header absolute top-0 left-0 w-full z-10" :style="{ paddingTop: statusBarHeight + 'px' }">
       <ChatTopNavBar
         ref="topNavBarRef"
         :mainPageDataModel="mainPageDataModel"
       />
     </view>
 
+    <view class="relative">
+      <image class="w-full block" src="https://images.unsplash.com/photo-1506744038136-46273834b3fb?w=800&q=80"
+        mode="widthFix" />
+      <view class="absolute bottom-0 left-0 right-0 flex-full">
+        <view class="px-12 pt-12">
+          <HomeWelcome :mainPageDataModel="mainPageDataModel" />
+        </view>
+        <view style="margin-bottom: -1px;">
+          <AiTabSwitch v-model="tabIndex" :list="tabList" @change="handleChange" />
+        </view>
+      </view>
+    </view>
+
+    <view v-show="tabIndex === 0" class="flex-full overflow-hidden scroll-y">
+      <Discovery  />
+    </view>
+
     <!-- 消息列表（可滚动区域） -->
     <scroll-view
+      v-show="tabIndex === 1"
       class="main flex-full overflow-hidden scroll-y"
       scroll-y
       :scroll-top="scrollTop"
@@ -186,6 +204,10 @@ import {
 } from "@/constant/constant";
 import { MessageRole, MessageType, CompName, Command } from "@/model/ChatModel";
 
+import HomeWelcome from "../HomeWelcome/index.vue";
+import AiTabSwitch from "@/components/AiTabSwitch/index.vue";
+import Discovery from "../../Discovery/index.vue";
+
 import ChatTopWelcome from "../ChatTopWelcome/index.vue";
 import NoticeMessage from "../NoticeMessage/index.vue";
 import ChatTopNavBar from "../ChatTopNavBar/index.vue";
@@ -286,6 +308,13 @@ const sleep = (ms) => new Promise((res) => setTimeout(res, ms));
 // 当前会话的消息ID，用于保持发送和终止的messageId一致
 let currentSessionMessageId = null;
 
+const tabIndex = ref(0);
+const tabList = ["探索发现", "AI伴游"];
+
+const handleChange = (i) => {
+  console.log("切换:", i);
+};
+
 /// =============事件函数↓================
 const handleTouchEnd = () => {
   clearTimeout(holdKeyboardTimer.value);

src/pages/ChatMain/HomeWelcome/index.vue

@@ -0,0 +1,120 @@
+<template>
+  <view class="flex border-box w-full">
+    <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
+      :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
+      :displayWidth="spriteStyle.displayWidth" :fps="16" />
+
+    <view class="flex flex-col flex-full">
+      <view class="flex flex-row flex-items-center flex-justify-between">
+        <text class="font-size-20 font-500 color-white"> 小七欢迎你～ </text>
+        <text class="font-size-20 font-500 color-white mt-4"> 26°C ☀️ </text>
+      </view>
+
+      <swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
+        :duration="duration" :indicator-dots="false">
+        <swiper-item v-for="item in bannerList" :key="item.title">
+          <view class="swiper-item flex flex-col flex-items-start flex-justify-between px-10">
+            <text class="font-size-12 font-600 color-B45309">
+              {{ item.title }}
+            </text>
+            <view class="flex flex-row flex-justify-between">
+              <text class="font-size-10 font-500 color-D97706">
+                发布时间：{{ item.time }}
+              </text>
+              <text class="font-size-10 font-500 color-B45309 underline-text">
+                详情
+              </text>
+            </view>
+          </view>
+        </swiper-item>
+      </swiper>
+
+      <yo-indicator-dot :current-index="currentIndex" :length="bannerList.length" :duration="0.5" default-width="4px"
+        active-width="16px" dot-height="4px" shape="circle" default-color="rgba(255,255,255,0.5)"
+        active-color="rgba(255,255,255,1)" />
+    </view>
+  </view>
+</template>
+<script setup>
+import { ref } from "vue";
+import { defineProps, computed } from "vue";
+import SpriteAnimator from "@/components/Sprite/SpriteAnimator.vue";
+
+const autoplay = ref(true);
+const interval = ref(7000);
+const duration = ref(500);
+
+const currentIndex = ref(0);
+const bannerList = ref([
+  {
+    title: "小七欢迎你～",
+    time: "2025年7月12日 09:30",
+  },
+  {
+    title: "小8欢迎你～",
+    time: "2025年7月13日 09:30",
+  },
+  {
+    title: "小9欢迎你～",
+    time: "2025年7月15日 09:30",
+  },
+]);
+
+const props = defineProps({
+  mainPageDataModel: {
+    type: Object,
+    default: () => {
+      return {
+        initPageImages: {
+          backgroundImageUrl: "",
+          logoImageUrl: "",
+          welcomeImageUrl: "",
+        }
+      };
+    },
+  },
+});
+
+const initPageImages = computed(() => {
+  return props.mainPageDataModel?.initPageImages || {};
+});
+
+const spriteStyle = computed(() => {
+  const images = initPageImages.value;
+  return {
+    backgroundImageUrl: images.backgroundImageUrl,
+    ipLargeImage: images.ipLargeImage,
+    frameWidth: images.ipLargeImageWidth,
+    frameHeight: images.ipLargeImageHeight,
+    totalFrames: images.ipLargeTotalFrames,
+    columns: images.ipLargeColumns,
+    displayWidth: 105,
+  };
+});
+
+const onSwiperChange = (e) => {
+  currentIndex.value = e.detail.current;
+};
+
+</script>
+
+<style scoped>
+.swiper {
+  height: 50px;
+  margin-top: 8px;
+}
+
+.swiper-item {
+  display: block;
+  height: 46px;
+  background: #fffbeb;
+  box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
+  border-radius: 12px;
+  border: 2px solid #fef3c7;
+}
+
+.underline-text {
+  text-decoration: underline;
+  text-decoration-color: #b45309;
+}
+</style>