feat: add new components and update UI and type declarations

- add AiTabSwitch component with its image assets and styles
- add Welcome component for welcome text, weather display and notice messages
- update ChatMainList to use new components and add background header layout
- replace custom swiper in NoticeMessage with Vant VanSwipe component
- add Vant Swipe type definitions to components.d.ts

src/pages/home/components/AiTabSwitch/index.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="w-full">
+    <div class="relative w-full h-[50px] flex overflow-hidden">
+      <div class="tab-item is-left" :class="{ active: modelValue === 0 }" @tap="handleSwitch(0)">
+        <div class="tab-content">
+          <img v-if="leftSelected || leftUnselected" :src="modelValue === 0
+            ? leftSelected || leftUnselected
+            : leftUnselected || leftSelected
+            " class="tab-image" mode="scaleToFill" />
+          <div class="tab-label">
+            <span class="tab-text">探索发现</span>
+          </div>
+        </div>
+      </div>
+
+      <div class="tab-item is-right" :class="{ active: modelValue === 1 }" @tap="handleSwitch(1)">
+        <div class="tab-content">
+          <img v-if="rightSelected || rightUnselected" :src="modelValue === 1
+            ? rightSelected || rightUnselected
+            : rightUnselected || rightSelected
+            " class="tab-image" mode="scaleToFill" />
+          <div class="tab-label">
+            <span class="tab-text">AI伴游</span>
+            <div v-if="showDot" :class="[
+              'status-dot',
+              modelValue === 1
+                ? 'status-dot--active'
+                : 'status-dot--inactive',
+            ]"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import leftSelected from "./images/L_02.png";
+import leftUnselected from "./images/L_01.png";
+import rightSelected from "./images/R_02.png";
+import rightUnselected from "./images/R_01.png";
+
+const props = defineProps({
+  modelValue: { type: Number, default: 0 },
+  showDot: { type: Boolean, default: true },
+});
+const emit = defineEmits(["update:modelValue", "change"]);
+
+const handleSwitch = (i) => {
+  emit("update:modelValue", i);
+  emit("change", i);
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./styles/index.scss";
+</style>

src/pages/home/components/AiTabSwitch/styles/index.scss

@@ -0,0 +1,91 @@
+.tab-item {
+  position: relative;
+  flex: 1;
+  height: 50px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+}
+
+.tab-item.active {
+  z-index: 10;
+}
+
+.tab-content {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 0;
+  transition: background 0.3s;
+  overflow: hidden;
+}
+
+.tab-text {
+  font-size: 18px;
+  font-weight: 500;
+  color: rgba(255, 255, 255, 0.65);
+}
+
+.tab-image {
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: auto;
+  bottom: 0;
+  width: 100%;
+  height: 48px;
+  display: block;
+  vertical-align: bottom;
+  z-index: 5;
+}
+
+.tab-label {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  z-index: 20;
+}
+
+.tab-item.active .tab-text {
+  color: #2e312f;
+  font-weight: bold;
+}
+
+.is-left {
+  margin-right: -24px;
+}
+
+.is-left .tab-label {
+  transform: translateX(-20px);
+}
+
+.is-right {
+  margin-left: -24px;
+}
+
+.is-right .tab-label {
+  transform: translateX(20px);
+}
+
+.status-dot {
+  display: inline-block;
+  margin-left: 6px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  z-index: 22;
+  transform: translateY(-1px);
+}
+
+.status-dot--active {
+  background-color: #26d46c;
+}
+
+.status-dot--inactive {
+  background-color: rgba(255, 255, 255, 0.65);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+}

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

@@ -4,6 +4,18 @@
     <div class="absolute top-0 left-0 w-full z-10">
       <ChatTopNavBar ref="topNavBarRef" :mainPageDataModel="mainPageDataModel" @showDrawer="handleShowDrawer" />
     </div>
+
+    <div class="relative">
+      <img class="w-full block" :src="mainPageDataModel?.initPageImages?.backgroundImageUrl" style="height: 252px;" />
+      <div class="absolute bottom-0 left-0 right-0 flex-1">
+        <div class="px-12 pt-12">
+          <Welcome :mainPageDataModel="mainPageDataModel" />
+        </div>
+        <div style="margin-bottom: -1px;">
+          <AiTabSwitch v-model="tabIndex" :list="tabList" @change="handleChange" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -11,8 +23,8 @@
 import { onMounted, nextTick, onUnmounted, ref } from "vue";
 import { MessageRole, MessageType, CompName, Command } from "@/constants/ChatModel";
 
-import HomeWelcome from "../HomeWelcome/index.vue";
-import AiTabSwitch from "@/components/AiTabSwitch/index.vue";
+import Welcome from "../Welcome/index.vue";
+import AiTabSwitch from "../AiTabSwitch/index.vue";
 import Discovery from "../Discovery/index.vue";
 import ChatGuide from "../ChatGuide/index.vue";
 

src/pages/home/components/NoticeMessage/index.vue

@@ -1,34 +1,28 @@
 <template>
   <div v-if="hasBannerList">
-    <swiper @change="onSwiperChange" class="swiper" circular :autoplay="autoplay" :interval="interval"
-      :duration="duration" :indicator-dots="false">
-      <swiper-item v-for="item in bannerList" :key="item.entityName">
-        <div class="swiper-item flex flex-col flex-items-start flex-justify-between px-10" @click="clickItem(item)">
-          <span class="text-color font-size-12 font-600">
+    <van-swipe class="h-[50px] mt-[8px]" loop vertical :autoplay="autoplay" @change="onSwiperChange">
+      <van-swipe-item v-for="item in bannerList" :key="item.entityName">
+        <div class="swiper-item bg-white flex flex-col items-start justify-between px-10" @click="clickItem(item)">
+          <span class="text-[#0CCD58] text-[12px] text-[600]">
             {{ item.entityName }}
           </span>
-          <div class="flex flex-row flex-justify-between">
-            <span class="text-color font-size-10 font-500">
+          <div class="flex flex-row justify-between">
+            <span class="text-[#0CCD58] text-[10px] text-[500]">
               发布时间：{{ item.effectiveStartTime }}
             </span>
-            <text class="text-color font-size-10 font-500 underline-text">
+            <span class="text-[#0CCD58] text-[10px] text-[500] underline-text">
               详情
-            </text>
+            </span>
           </div>
         </div>
-      </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)" />
-
+      </van-swipe-item>
+    </van-swipe>
   </div>
 
-  <div v-else-if="props.tipsMessage">
+  <div v-else-if="tipsMessage">
     <div class="noMessage">
-      <span class="noMessage-text text-color font-size-12 font-600">
-        {{ props.tipsMessage }}
+      <span class="noMessage-text text-[#0CCD58] text-[12px] text-[600]">
+        {{ tipsMessage }}
       </span>
     </div>
   </div>
@@ -48,9 +42,7 @@ const props = defineProps({
   },
 });
 
-const autoplay = ref(true);
-const interval = ref(7000);
-const duration = ref(500);
+const autoplay = ref(3000);
 
 const currentIndex = ref(0);
 const bannerList = ref([]);
@@ -87,24 +79,13 @@ const clickItem = (item) => {
 </script>
 
 <style lang="scss" scoped>
-.swiper {
-  height: 50px;
-  margin-top: 8px;
-}
-
 .swiper-item {
   display: block;
-  height: 46px;
-  background: #EBEFFF;
   box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05);
   border-radius: 12px;
   border: 1px solid #C7D2FE;
 }
 
-.text-color {
-  color: #0CCD58;
-}
-
 .underline-text {
   text-decoration: underline;
   text-decoration-color: #0CCD58;

src/pages/home/components/Welcome/index.vue

@@ -1,10 +1,11 @@
 <template>
-  <div class="flex border-box w-full">
+  <div class="flex w-full">
     <div class="flex flex-col flex-full min-width-0 mr-12">
       <div class="flex flex-row flex-items-center flex-justify-between min-width-0">
-        <span class="flex-full min-width-0 font-size-20 font-600 color-white ellipsis-1">{{
-          mainPageDataModel.welcomeContent }}</span>
-        <span class="flex-shrink-0 font-size-20 font-600 color-white mt-4"> {{ weatherText }} </span>
+        <span class="flex-full min-width-0 text-[20px] text-[600] color-white ellipsis-1">
+          {{ mainPageDataModel.welcomeContent }}
+        </span>
+        <span class="shrink-0 text-[20px] text-[600] color-white mt-4"> {{ weatherText }} </span>
       </div>
 
       <NoticeMessage :tipsMessage="props.mainPageDataModel.tipsMessage" />