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

@@ -1,14 +1,8 @@
 <template>
   <view class="flex border-box w-full">
-    <SpriteAnimator
+    <SpriteAnimator :src="spriteStyle.ipLargeImage" :frameWidth="spriteStyle.frameWidth"
-      :src="spriteStyle.ipLargeImage"
+      :frameHeight="spriteStyle.frameHeight" :totalFrames="spriteStyle.totalFrames" :columns="spriteStyle.columns"
-      :frameWidth="spriteStyle.frameWidth"
+      :displayWidth="spriteStyle.displayWidth" :fps="16" />
-      :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">
@@ -16,19 +10,10 @@
         <text class="font-size-20 font-500 color-white mt-4"> 26°C ☀️ </text>
       </view>
 
-      <swiper
+      <swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
-        @change="onSwiperChange"
+        :duration="duration" :indicator-dots="false">
-        class="swiper"
-        circular
-        :autoplay="autoplay"
-        :interval="interval"
-        :duration="duration"
-        :indicator-dots="false"
-      >
         <swiper-item v-for="item in bannerList" :key="item.title">
-          <view
+          <view class="swiper-item flex flex-col flex-items-start flex-justify-between px-10">
-            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>
@@ -44,17 +29,9 @@
         </swiper-item>
       </swiper>
 
-      <yo-indicator-dot
+      <yo-indicator-dot :current-index="currentIndex" :length="bannerList.length" :duration="0.5" default-width="4px"
-        :current-index="currentIndex"
+        active-width="16px" dot-height="4px" shape="circle" default-color="rgba(255,255,255,0.5)"
-        :length="bannerList.length"
+        active-color="rgba(255,255,255,1)" />
-        :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>
@@ -83,14 +60,34 @@ const bannerList = ref([
   },
 ]);
 
+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 {
-    ipLargeImage:
+    backgroundImageUrl: images.backgroundImageUrl,
-      "https://one-feel-image-bucket.oss-cn-chengdu.aliyuncs.com/onefeel/2045694865984802818.webp",
+    ipLargeImage: images.ipLargeImage,
-    frameWidth: 353,
+    frameWidth: images.ipLargeImageWidth,
-    frameHeight: 353,
+    frameHeight: images.ipLargeImageHeight,
-    totalFrames: 96,
+    totalFrames: images.ipLargeTotalFrames,
-    columns: 10,
+    columns: images.ipLargeColumns,
     displayWidth: 105,
   };
 });
@@ -98,6 +95,7 @@ const spriteStyle = computed(() => {
 const onSwiperChange = (e) => {
   currentIndex.value = e.detail.current;
 };
+
 </script>
 
 <style scoped>

src/pages/Discovery/index.vue

@@ -1,24 +1,25 @@
 <template>
-  <view>
+  <view class="flex flex-col h-full overflow-hidden min-height-0">
-    <FindTabs
+    <view class="flex-shrink-0">
-      v-if="discoveryTabs.length > 0"
+      <FindTabs
-      v-model="activeIndex"
+        v-if="discoveryTabs.length > 0"
-      :tabs="discoveryTabs"
+        v-model="activeIndex"
-      @change="handleTabChange"
+        :tabs="discoveryTabs"
-    />
+        @change="handleTabChange"
+      />
+    </view>
 
-    <CardSwiper 
+    <scroll-view class="flex-full border-box min-height-0" scroll-y show-scrollbar="false">
-    v-if="discoveryCards.length > 0"
+      <CardSwiper v-if="discoveryCards.length > 0" :list="discoveryCards" @card-click="cardClick" />
-    :list="discoveryCards" 
-    @card-click="cardClick" />
 
-    <QuickQuestions />
+      <QuickQuestions />
 
+    </scroll-view>
   </view>
 </template>
 
 <script setup>
-import { computed, onMounted, ref } from "vue";
+import { onMounted, ref } from "vue";
 import FindTabs from "./components/FindTabs/index.vue";
 import CardSwiper from "./components/CardSwiper/index.vue";
 import QuickQuestions from "./components/QuickQuestions/index.vue";
@@ -66,7 +67,6 @@ const discoveryCards = ref([
 
 /// tabs 切换事件
 const handleTabChange = ({ tab, idx }) => {
-  if (activeIndex.value === idx) return;
   activeIndex.value = idx;
   queryDiscoveryData(tab.id);
 }
@@ -89,14 +89,14 @@ const queryTabsList = async () => {
     discoveryTabs.value = tabList;
 
     /// 查询是否有sceneId参数
-    const activeTab = discoveryTabs.value.find((tab) => {
+    const activeTabIndex = discoveryTabs.value.findIndex((tab) => tab.id === sceneId);
-      return tab.id === sceneId;
-    });
 
     /// 如果有则优先展示对应tab数据，没有则展示第一个tab数据
-    if (activeTab) {
+    if (activeTabIndex > -1) {
+      activeIndex.value = activeTabIndex;
       queryDiscoveryData(sceneId);
     } else {
+      activeIndex.value = 0;
       queryDiscoveryData(discoveryTabs.value[0].id);
     }
   }
@@ -133,5 +133,4 @@ onMounted(() => {
 
 <style lang="scss" scoped>
 
-
 </style>

src/pages/Home/components/HomeNavBar.vue

@@ -1,20 +0,0 @@
-<template>
-  <view class="border-box h-44 flex flex-items-center pl-12 pr-12">
-    <uni-icons type="bars" size="24" color="#333" @click="showDrawer" />
-    <view class="w-24 h-24"></view>
-  </view>
-</template>
-
-<script setup>
-import { ref, defineExpose } from "vue";
-
-const show = ref(false);
-
-const showDrawer = () => uni.$emit("SHOW_DRAWER");
-
-defineExpose({ show });
-
-</script>
-
-<style lang="scss" scoped>
-</style>

src/pages/Home/index.vue

@@ -1,69 +0,0 @@
-<template>
-  <view class="relative flex flex-col h-screen">
-    <view
-      class="absolute top-0 left-0 w-full z-10"
-      :style="{ paddingTop: statusBarHeight + 'px' }"
-    >
-      <HomeNavBar />
-    </view>
-
-    <view class="relative flex-full">
-      <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 />
-          </view>
-          <view style="margin-bottom: -1px;">
-            <AiTabSwitch v-model="tabIndex" :list="tabList" @change="handleChange" />
-          </view>
-        </view>
-      </view>
-
-      <view class="tab-content">
-        <Discovery v-if="tabIndex === 0" />
-        <ChatMainList v-if="tabIndex === 1" />
-      </view>
-    </view>
-  </view>
-</template>
-
-<script setup>
-import { ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
-
-import HomeNavBar from "./components/HomeNavBar.vue";
-import HomeWelcome from "./components/HomeWelcome.vue";
-import AiTabSwitch from "@/components/AiTabSwitch/index.vue";
-import ChatMainList from "../ChatMain/ChatMainList/index.vue";
-import Discovery from "../Discovery/index.vue";
-
-const tabIndex = ref(0);
-const tabList = ["探索发现", "AI伴游"];
-
-const handleChange = (i) => {
-  console.log("切换:", i);
-};
-
-/// 导航栏相关
-const statusBarHeight = ref(20);
-
-/// =============生命周期函数↓================
-onLoad(() => {
-  uni.getSystemInfo({
-    success: (res) => {
-      statusBarHeight.value = res.statusBarHeight || 20;
-    },
-  });
-});
-</script>
-
-<style scoped>
-
-</style>

src/pages/index/index.vue

@@ -1,6 +1,6 @@
 <template>
   <view class="w-full h-screen bg-liner">
-    <Home />
+    <ChatMainList />
   </view>
 
   <!-- 日历组件 -->
@@ -29,7 +29,6 @@ import ChatMainList from "../ChatMain/ChatMainList/index.vue";
 import MoreService from "../ChatModule/MoreService/index.vue";
 import DrawerSection from "../DrawerSection/index.vue";
 import Calender from "@/components/Calender/index.vue";
-import Home from "../Home/index.vue";
 
 const appStore = useAppStore();
 

src/static/scss/index.scss

@@ -21,3 +21,5 @@
 @import "./white-space.scss";
 @import "./box-sizing.scss";
 @import "./word-break.scss";
+@import "./min-height.scss";
+@import "./min-width.scss";

src/static/scss/min-height.scss

@@ -0,0 +1,3 @@
+.min-height-0 {
+  min-height: 0;
+}

src/static/scss/min-width.scss

@@ -0,0 +1,3 @@
+.min-width-0 {
+  min-width: 0;
+}