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/components/AiTabSwitch/index.vue

@@ -1,57 +0,0 @@
-<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/components/AiTabSwitch/styles/index.scss

@@ -1,91 +0,0 @@
-.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);
-}