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);