refactor: 将首页各个部分重构为单独的组件

- 组件重构：将首页重构为HomepageCarousel, HomepageProductSection,
HomepageSolutionSection三个部分

app/components/pages/homepage/HomepageCarousel.vue

@@ -0,0 +1,86 @@
+<template>
+  <section v-if="!pending" class="carousel-section">
+    <el-carousel
+      class="homepage-carousel"
+      height="auto"
+      :interval="5000"
+      arrow="never"
+      autoplay
+    >
+      <el-carousel-item v-for="(item, index) in carousel" :key="index">
+        <div class="carousel-item">
+          <el-image
+            class="carousel-image"
+            :src="getImageUrl(item)"
+            :alt="`Carousel Image ${index + 1}`"
+            fit="contain"
+            lazy
+          />
+        </div>
+      </el-carousel-item>
+    </el-carousel>
+  </section>
+  <section v-else>
+    <el-skeleton :rows="5" animated />
+  </section>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    homepageData: {
+      type: Object as PropType<HomepageView>,
+      default: null,
+    },
+    pending: {
+      type: Boolean,
+    },
+  });
+
+  const { getImageUrl } = useDirectusImage();
+
+  const carousel = computed(() => props.homepageData?.carousel || []);
+</script>
+
+<style scoped>
+  .carousel-section {
+    padding: 0;
+  }
+
+  .homepage-carousel .el-carousel__item {
+    width: 100%;
+    height: 33vw;
+    /* 16:9 Aspect Ratio */
+  }
+
+  .el-carousel__item h3 {
+    display: flex;
+    color: #475669;
+    opacity: 0.8;
+    line-height: 300px;
+    margin: 0;
+  }
+
+  .homepage-carousel .carousel-item {
+    width: 100%;
+    height: 100%;
+    background-color: #f5f7fa;
+  }
+
+  .carousel-image {
+    position: relative;
+    width: 100%;
+    height: 100%;
+  }
+
+  .carousel-image-caption {
+    position: absolute;
+    bottom: 10px;
+    left: 50%;
+    transform: translateX(-50%);
+    background-color: rgba(0, 0, 0, 0.5);
+    color: white;
+    padding: 5px 10px;
+    border-radius: 5px;
+    font-size: 14px;
+  }
+</style>