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

components.d.ts

@@ -50,6 +50,9 @@ declare module 'vue' {
     VanIcon: typeof import('vant/es')['Icon']
     VanIcons: typeof import('vant/es')['Icons']
     VanPopup: typeof import('vant/es')['Popup']
+    VanSwipe: typeof import('vant/es')['Swipe']
+    VanSwipeItem: typeof import('vant/es')['SwipeItem']
+    VanSwiperItem: typeof import('vant/es')['SwiperItem']
     ZnIcon: typeof import('./src/components/ZnIcon/index.vue')['default']
   }
 }
@@ -94,5 +97,8 @@ declare global {
   const VanIcon: typeof import('vant/es')['Icon']
   const VanIcons: typeof import('vant/es')['Icons']
   const VanPopup: typeof import('vant/es')['Popup']
+  const VanSwipe: typeof import('vant/es')['Swipe']
+  const VanSwipeItem: typeof import('vant/es')['SwipeItem']
+  const VanSwiperItem: typeof import('vant/es')['SwiperItem']
   const ZnIcon: typeof import('./src/components/ZnIcon/index.vue')['default']
 }

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" />