feat(home): 替换首页轮播图实现为广告系统驱动

- 移除原有的硬编码轮播图组件和相关样式
- 新增 getAdByCode 方法用于获取广告数据
- 实现解析广告数据的工具函数 parseSlides 和 parsePx
- 集成 useAsyncData 获取 flash 广告数据
- 添加备用图片以确保加载失败时的显示
- 更新页面样式适配新的轮播组件结构

app/components/Carousel.vue

@@ -3,6 +3,7 @@
     <div class="carousel-panel" :style="{ height: heightCss }">
       <ClientOnly>
         <a-carousel
+          ref="carouselRef"
           class="carousel"
           :autoplay="autoplayEnabled"
           :autoplay-speed="autoplaySpeed"
@@ -10,7 +11,12 @@
           :effect="effect"
           :style="{ height: heightCss }"
         >
-          <div v-for="it in normalizedItems" :key="it.src" class="carousel-item" :style="{ height: heightCss }">
+          <div
+            v-for="(it, idx) in normalizedItems"
+            :key="`${it.src}::${idx}`"
+            class="carousel-item"
+            :style="{ height: heightCss }"
+          >
             <NuxtLink
               v-if="it.href && !isExternal(it.href)"
               :to="it.href"
@@ -33,6 +39,25 @@
           </div>
         </a-carousel>
 
+        <button
+          v-if="showNav"
+          type="button"
+          class="carousel-nav carousel-nav-left"
+          aria-label="prev"
+          @click.prevent.stop="prev"
+        >
+          <span aria-hidden="true">&lsaquo;</span>
+        </button>
+        <button
+          v-if="showNav"
+          type="button"
+          class="carousel-nav carousel-nav-right"
+          aria-label="next"
+          @click.prevent.stop="next"
+        >
+          <span aria-hidden="true">&rsaquo;</span>
+        </button>
+
         <template #fallback>
           <img class="carousel-img" :style="{ height: heightCss }" :src="fallbackSrc" alt="slide" />
         </template>
@@ -62,23 +87,41 @@ const props = withDefaults(
   }
 )
 
+type AntdCarouselExpose = {
+  next: () => void
+  prev: () => void
+  goTo: (slide: number, dontAnimate?: boolean) => void
+}
+
+const carouselRef = ref<AntdCarouselExpose | null>(null)
+
 const heightCss = computed(() => (typeof props.height === 'number' ? `${props.height}px` : props.height))
 
 const normalizedItems = computed(() => (props.items || []).filter((it) => it && typeof it.src === 'string' && it.src))
 
 const autoplayEnabled = computed(() => normalizedItems.value.length > 1)
 const dotsEnabled = computed(() => normalizedItems.value.length > 1)
+const showNav = computed(() => normalizedItems.value.length > 1)
 
 const fallbackSrc = computed(() => normalizedItems.value[0]?.src || '')
 
 function isExternal(href: string) {
   return /^https?:\/\//i.test(href)
 }
+
+function next() {
+  carouselRef.value?.next()
+}
+
+function prev() {
+  carouselRef.value?.prev()
+}
 </script>
 
 <style scoped>
 .carousel-panel {
   background: #fff;
+  position: relative;
   overflow: hidden;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
 }
@@ -109,4 +152,39 @@ function isExternal(href: string) {
 .carousel :deep(.slick-slide > div) {
   height: 100%;
 }
+
+.carousel-nav {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 5;
+  width: 42px;
+  height: 42px;
+  border-radius: 9999px;
+  border: 1px solid rgba(255, 255, 255, 0.55);
+  background: rgba(0, 0, 0, 0.35);
+  color: rgba(255, 255, 255, 0.95);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.carousel-nav:hover {
+  background: rgba(0, 0, 0, 0.5);
+}
+
+.carousel-nav-left {
+  left: 12px;
+}
+
+.carousel-nav-right {
+  right: 12px;
+}
+
+.carousel-nav span {
+  font-size: 26px;
+  line-height: 1;
+}
 </style>