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>

app/components/pages/homepage/HomepageProductSection.vue

@@ -0,0 +1,176 @@
+<template>
+  <section class="homepage-section">
+    <h2>推荐产品</h2>
+    <p>
+      探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。
+    </p>
+    <div v-if="!pending">
+      <el-carousel
+        class="recommend-carousel"
+        height="auto"
+        arrow="never"
+        indicator-position="outside"
+        :autoplay="false"
+      >
+        <el-carousel-item
+          v-for="n in Math.floor(products.length / 3) + 1"
+          :key="n"
+          class="recommend-list"
+        >
+          <div class="recommend-card-group">
+            <el-card
+              v-for="(item, index) in products.slice((n - 1) * 3, n * 3)"
+              :key="index"
+              class="recommend-card"
+              @click="handleProductCardClick(item.id.toString() || '')"
+            >
+              <template #header>
+                <el-image
+                  :src="getImageUrl(item.cover)"
+                  :alt="item.name"
+                  fit="cover"
+                  lazy
+                />
+              </template>
+              <div class="recommend-card-body">
+                <!-- Title -->
+                <div class="text-center">
+                  <span class="recommend-card-title">{{ item.name }}</span>
+                </div>
+                <!-- Description -->
+                <div class="recommend-card-description text-left opacity-25">
+                  {{ item.summary }}
+                </div>
+              </div>
+            </el-card>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div v-else>
+      <el-skeleton :rows="4" animated />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    homepageData: {
+      type: Object as PropType<HomepageView>,
+      default: null,
+    },
+    pending: {
+      type: Boolean,
+    },
+  });
+
+  const { getImageUrl } = useDirectusImage();
+
+  const products = computed(() => props.homepageData?.recommendProducts || []);
+
+  const handleProductCardClick = (documentId: string) => {
+    // 使用路由导航到产品详情页
+    if (documentId) {
+      const localePath = useLocalePath();
+      const router = useRouter();
+      router.push(localePath(`/products/${documentId}`));
+    }
+  };
+</script>
+
+<style scoped>
+  section {
+    padding: 2rem;
+  }
+
+  section h2 {
+    color: var(--el-text-color-primary);
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  section p {
+    color: var(--el-text-color-regular);
+    line-height: 1.6;
+  }
+
+  .homepage-section {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .recommend-carousel :deep(.el-carousel__button) {
+    /* 指示器按钮样式 */
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #475669;
+    transition: all 0.3s ease;
+  }
+
+  .homepage-section {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .recommend-carousel :deep(.el-carousel__button) {
+    /* 指示器按钮样式 */
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #475669;
+    transition: all 0.3s ease;
+  }
+
+  .recommend-list {
+    display: flex;
+    padding: 1rem;
+    height: 400px;
+  }
+
+  .recommend-card-group {
+    display: flex;
+    gap: 1rem;
+    width: 100%;
+    margin: 0 auto;
+    height: 100%;
+  }
+
+  .recommend-card {
+    width: 33%;
+    transition: all 0.3s ease;
+    text-align: center;
+  }
+
+  .recommend-card :deep(.el-card__header) {
+    padding: 0;
+    border: none;
+  }
+
+  .recommend-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+  }
+
+  .recommend-card-body {
+    margin: 10px auto;
+    padding: 0px auto;
+  }
+
+  .recommend-card-title {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .recommend-card-description {
+    font-size: 0.8rem;
+    margin-top: 5px;
+  }
+
+  .recommend-card .el-image {
+    width: 100%;
+    border-radius: 4px;
+  }
+</style>

app/components/pages/homepage/HomepageSolutionSection.vue

@@ -0,0 +1,176 @@
+<template>
+  <section class="homepage-section">
+    <h2>推荐解决方案</h2>
+    <p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
+    <div v-if="!pending">
+      <el-carousel
+        class="recommend-carousel"
+        height="auto"
+        arrow="never"
+        indicator-position="outside"
+        :autoplay="false"
+      >
+        <el-carousel-item
+          v-for="n in Math.floor(solutions.length / 3) + 1"
+          :key="n"
+          class="recommend-list"
+        >
+          <div class="recommend-card-group">
+            <el-card
+              v-for="(item, index) in solutions.slice((n - 1) * 3, n * 3)"
+              :key="index"
+              class="recommend-card"
+              @click="handleSolutionCardClick(item.id.toString() || '')"
+            >
+              <template #header>
+                <el-image
+                  :src="getImageUrl(item.cover)"
+                  :alt="item.title"
+                  fit="cover"
+                  lazy
+                />
+              </template>
+              <div class="recommend-card-body">
+                <!-- Title -->
+                <div class="text-center">
+                  <span class="recommend-card-title">{{ item.title }}</span>
+                </div>
+                <!-- Description -->
+                <div class="recommend-card-description text-left opacity-25">
+                  {{ item.summary }}
+                </div>
+              </div>
+            </el-card>
+          </div>
+        </el-carousel-item>
+      </el-carousel>
+    </div>
+    <div v-else>
+      <el-skeleton :rows="4" animated />
+    </div>
+  </section>
+</template>
+
+<script setup lang="ts">
+  const props = defineProps({
+    homepageData: {
+      type: Object as PropType<HomepageView>,
+      default: null,
+    },
+    pending: {
+      type: Boolean,
+    },
+  });
+
+  const { getImageUrl } = useDirectusImage();
+
+  const solutions = computed(
+    () => props.homepageData?.recommendSolutions || []
+  );
+
+  const handleSolutionCardClick = (documentId: string) => {
+    // 使用路由导航到产品详情页
+    if (documentId) {
+      const localePath = useLocalePath();
+      const router = useRouter();
+      router.push(localePath(`/solutions/${documentId}`));
+    }
+  };
+</script>
+
+<style scoped>
+  section {
+    padding: 2rem;
+  }
+
+  section h2 {
+    color: var(--el-text-color-primary);
+    font-size: 1.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
+  }
+
+  section p {
+    color: var(--el-text-color-regular);
+    line-height: 1.6;
+  }
+
+  .homepage-section {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .recommend-carousel :deep(.el-carousel__button) {
+    /* 指示器按钮样式 */
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #475669;
+    transition: all 0.3s ease;
+  }
+
+  .homepage-section {
+    max-width: 1200px;
+    margin: 0 auto;
+  }
+
+  .recommend-carousel :deep(.el-carousel__button) {
+    /* 指示器按钮样式 */
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background-color: #475669;
+    transition: all 0.3s ease;
+  }
+
+  .recommend-list {
+    display: flex;
+    padding: 1rem;
+    height: 400px;
+  }
+
+  .recommend-card-group {
+    display: flex;
+    gap: 1rem;
+    width: 100%;
+    margin: 0 auto;
+    height: 100%;
+  }
+
+  .recommend-card {
+    width: 33%;
+    transition: all 0.3s ease;
+    text-align: center;
+  }
+
+  .recommend-card :deep(.el-card__header) {
+    padding: 0;
+    border: none;
+  }
+
+  .recommend-card:hover {
+    transform: translateY(-4px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+  }
+
+  .recommend-card-body {
+    margin: 10px auto;
+    padding: 0px auto;
+  }
+
+  .recommend-card-title {
+    font-size: 1rem;
+    font-weight: 600;
+  }
+
+  .recommend-card-description {
+    font-size: 0.8rem;
+    margin-top: 5px;
+  }
+
+  .recommend-card .el-image {
+    width: 100%;
+    border-radius: 4px;
+  }
+</style>

app/pages/index.vue

@@ -1,309 +1,27 @@
 <template>
   <div class="homepage">
-    <section v-if="!pending" class="carousel-section">
+    <homepage-carousel :homepage-data="homepageData" :pending="pending" />
-      <el-carousel
+    <homepage-product-section
-        class="homepage-carousel"
+      :homepage-data="homepageData"
-        height="auto"
+      :pending="pending"
-        :interval="5000"
+    />
-        arrow="never"
+    <homepage-solution-section
-        autoplay
+      :homepage-data="homepageData"
-      >
+      :pending="pending"
-        <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>
-
-    <section class="homepage-section">
-      <h2>推荐产品</h2>
-      <p>
-        探索我们的精选产品，满足您的各种需求。无论是创新技术还是经典设计，我们都为您提供优质选择。
-      </p>
-      <div v-if="!pending">
-        <el-carousel
-          class="recommend-carousel"
-          height="auto"
-          arrow="never"
-          indicator-position="outside"
-          :autoplay="false"
-        >
-          <el-carousel-item
-            v-for="n in Math.floor(recommend_products.length / 3) + 1"
-            :key="n"
-            class="recommend-list"
-          >
-            <div class="recommend-card-group">
-              <el-card
-                v-for="(item, index) in recommend_products.slice(
-                  (n - 1) * 3,
-                  n * 3
-                )"
-                :key="index"
-                class="recommend-card"
-                @click="handleProductCardClick(item.id.toString() || '')"
-              >
-                <template #header>
-                  <el-image
-                    :src="getImageUrl(item.cover)"
-                    :alt="item.name"
-                    fit="cover"
-                    lazy
-                  />
-                </template>
-                <div class="recommend-card-body">
-                  <!-- Title -->
-                  <div class="text-center">
-                    <span class="recommend-card-title">{{ item.name }}</span>
-                  </div>
-                  <!-- Description -->
-                  <div class="recommend-card-description text-left opacity-25">
-                    {{ item.summary }}
-                  </div>
-                </div>
-              </el-card>
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-      </div>
-      <div v-else>
-        <el-skeleton :rows="4" animated />
-      </div>
-    </section>
-    <section class="homepage-section">
-      <h2>推荐解决方案</h2>
-      <p>了解我们的定制解决方案，帮助您优化业务流程，提高效率。</p>
-      <div v-if="!pending">
-        <el-carousel
-          class="recommend-carousel"
-          height="auto"
-          arrow="never"
-          indicator-position="outside"
-          :autoplay="false"
-        >
-          <el-carousel-item
-            v-for="n in Math.floor(recommend_solutions.length / 3) + 1"
-            :key="n"
-            class="recommend-list"
-          >
-            <div class="recommend-card-group">
-              <el-card
-                v-for="(item, index) in recommend_solutions.slice(
-                  (n - 1) * 3,
-                  n * 3
-                )"
-                :key="index"
-                class="recommend-card"
-                @click="handleSolutionCardClick(item.id.toString() || '')"
-              >
-                <template #header>
-                  <el-image
-                    :src="getImageUrl(item.cover)"
-                    :alt="item.title"
-                    fit="cover"
-                    lazy
-                  />
-                </template>
-                <div class="recommend-card-body">
-                  <!-- Title -->
-                  <div class="text-center">
-                    <span class="recommend-card-title">{{ item.title }}</span>
-                  </div>
-                  <!-- Description -->
-                  <div class="recommend-card-description text-left opacity-25">
-                    {{ item.summary }}
-                  </div>
-                </div>
-              </el-card>
-            </div>
-          </el-carousel-item>
-        </el-carousel>
-      </div>
-      <div v-else>
-        <el-skeleton :rows="4" animated />
-      </div>
-    </section>
   </div>
 </template>
 
 <script setup lang="ts">
-  const { getImageUrl } = useDirectusImage();
-
   const { data, pending, error } = await useHomepage();
 
   const homepageData = computed(() => {
     return toHomepageView(data.value);
   });
 
-  const carousel = computed(() => homepageData.value?.carousel);
-
-  const recommend_products = computed(
-    () => homepageData.value?.recommendProducts
-  );
-  const recommend_solutions = computed(
-    () => homepageData.value?.recommendSolutions
-  );
-
-  watch(pending, () => {
-    console.log(data.value);
-  });
-
   watch(error, (value) => {
     if (value) {
       console.error('数据获取失败: ', value);
     }
   });
-
-  const handleProductCardClick = (documentId: string) => {
-    // 使用路由导航到产品详情页
-    if (documentId) {
-      const localePath = useLocalePath();
-      const router = useRouter();
-      router.push(localePath(`/products/${documentId}`));
-    }
-  };
-
-  const handleSolutionCardClick = (documentId: string) => {
-    // 使用路由导航到解决方案详情页
-    if (documentId) {
-      const localePath = useLocalePath();
-      const router = useRouter();
-      router.push(localePath(`/solutions/${documentId}`));
-    }
-  };
 </script>
-
-<style scoped lang="scss">
-  section {
-    padding: 2rem;
-  }
-
-  section h2 {
-    color: var(--el-text-color-primary);
-    font-size: 1.5rem;
-    font-weight: bold;
-    margin-bottom: 0.5rem;
-  }
-
-  section p {
-    color: var(--el-text-color-regular);
-    line-height: 1.6;
-  }
-
-  .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;
-  }
-
-  .homepage-section {
-    max-width: 1200px;
-    margin: 0 auto;
-  }
-
-  .recommend-carousel :deep(.el-carousel__button) {
-    /* 指示器按钮样式 */
-    width: 8px;
-    height: 8px;
-    border-radius: 50%;
-    background-color: #475669;
-    transition: all 0.3s ease;
-  }
-
-  .recommend-list {
-    display: flex;
-    padding: 1rem;
-    height: 400px;
-  }
-
-  .recommend-card-group {
-    display: flex;
-    gap: 1rem;
-    width: 100%;
-    margin: 0 auto;
-    height: 100%;
-  }
-
-  .recommend-card {
-    width: 33%;
-    transition: all 0.3s ease;
-    text-align: center;
-  }
-
-  .recommend-card :deep(.el-card__header) {
-    padding: 0;
-    border: none;
-  }
-
-  .recommend-card:hover {
-    transform: translateY(-4px);
-    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
-    cursor: pointer;
-  }
-
-  .recommend-card-body {
-    margin: 10px auto;
-    padding: 0px auto;
-  }
-
-  .recommend-card-title {
-    font-size: 1rem;
-    font-weight: 600;
-  }
-
-  .recommend-card-description {
-    font-size: 0.8rem;
-    margin-top: 5px;
-  }
-
-  .recommend-card .el-image {
-    width: 100%;
-    border-radius: 4px;
-  }
-</style>