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

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

app/pages/index.vue

@@ -1,14 +1,25 @@
 <template>
   <main class="home">
-    <Carousel class="px-4 py-8" :items="flashSlides" :height="flashHeight" />
+    <Carousel arrows class="mx-auto" :items="flashSlides" :height="flashHeight">
+      <template #prevArrow>
+        <div class="custom-slick-arrow" style="left: 10px; z-index: 1">
+          <left-circle-outlined />
+        </div>
+      </template>
+      <template #nextArrow>
+        <div class="custom-slick-arrow" style="right: 10px">
+          <right-circle-outlined />
+        </div>
+      </template>
+    </Carousel>
 
-    <section class="banner">
-      <div class="mx-auto max-w-screen-xl px-4 py-10">
-        <div class="banner-title">以合规经营与品质服务为核心</div>
-      </div>
-    </section>
+<!--    <section class="banner">-->
+<!--      <div class="mx-auto max-w-screen-xl px-4 py-6">-->
+<!--        <div class="banner-title">以合规经营与品质服务为核心</div>-->
+<!--      </div>-->
+<!--    </section>-->
 
-    <section class="mx-auto max-w-screen-xl px-4 py-10">
+    <section class="mx-auto max-w-screen-xl px-4 py-6">
       <div class="section-title">
         <div class="section-title-main">资讯与公告</div>
         <div class="section-title-sub">NEWS & UPDATES</div>
@@ -63,8 +74,8 @@
 import {
   AppstoreOutlined,
   FileTextOutlined,
-  IdcardOutlined,
-  PhoneOutlined,
+  LeftCircleOutlined,
+  RightCircleOutlined,
   SafetyCertificateOutlined,
   ShopOutlined
 } from '@ant-design/icons-vue'
@@ -88,64 +99,29 @@ function parsePx(value?: string) {
   return Number.isFinite(n) ? n : undefined
 }
 
-function parseSlides(ad?: CmsAd | null) {
-  const raw = ad?.imageList
-  const fallbackHref = ad?.path
-
-  function pickString(obj: Record<string, unknown>, keys: string[]) {
-    for (const k of keys) {
-      const v = obj[k]
-      if (typeof v === 'string' && v.trim()) return v
-    }
-    return undefined
-  }
-
-  function asArray(val: unknown): unknown[] {
-    if (!val) return []
-    if (Array.isArray(val)) return val
-    if (typeof val === 'string') {
-      const text = val.trim()
-      if (!text) return []
-      try {
-        const parsed = JSON.parse(text)
-        return Array.isArray(parsed) ? parsed : [parsed]
-      } catch {
-        return text.split(/[,;\n]+/g).map((s) => s.trim()).filter(Boolean)
-      }
-    }
-    if (typeof val === 'object') {
-      const obj = val as Record<string, unknown>
-      if (Array.isArray(obj.list)) return obj.list
-      if (Array.isArray(obj.imageList)) return obj.imageList
-      if (Array.isArray(obj.images)) return obj.images
-      return [obj]
-    }
-    return []
-  }
-
-  return asArray(raw)
-    .map((it) => {
-      if (typeof it === 'string') return { src: it, href: fallbackHref }
-      if (it && typeof it === 'object') {
-        const obj = it as Record<string, unknown>
-        const src = pickString(obj, ['src', 'url', 'image', 'imageUrl', 'img', 'imgUrl', 'pic', 'picUrl'])
-        const href = pickString(obj, ['href', 'link', 'path', 'to']) ?? fallbackHref
-        if (!src) return null
-        return { src, href }
-      }
-      return null
-    })
-    .filter(Boolean) as Array<{ src: string; href?: string }>
+type FlashImage = {
+  url?: string
+  path?: string
+  title?: string
 }
 
-const { data: flashAd } = await useAsyncData('cms-ad-flash', () =>
+const { data: flashAd } = await useAsyncData<CmsAd | null>('cms-ad-flash', () =>
   getAdByCode('flash').catch(() => null)
 )
 
-console.log(flashAd.value?.imageList,'flashAdflashAdflashAd');
-
 const flashSlides = computed(() => {
-  const slides = parseSlides(flashAd.value)
+  const list = (flashAd.value?.imageList || []) as FlashImage[]
+  const slides = list
+    .map((it) => {
+      if (!it?.url) return null
+      return {
+        src: it.url,
+        href: it.path || undefined,
+        alt: it.title || undefined
+      }
+    })
+    .filter(Boolean) as Array<{ src: string; href?: string; alt?: string }>
+
   return slides.length
     ? slides
     : [{ src: 'https://file-cloud.yst.com.cn/photo/website/2024/11/28/5a5cc07336224e54a84561c80899bcac.jpg' }]
@@ -444,4 +420,33 @@ function scrollToCompany() {
   color: rgba(0, 0, 0, 0.55);
   line-height: 1.6;
 }
+:deep(.slick-slide) {
+  text-align: center;
+  height: 160px;
+  line-height: 160px;
+  background: #364d79;
+  overflow: hidden;
+}
+
+:deep(.slick-arrow.custom-slick-arrow) {
+  width: 25px;
+  height: 25px;
+  font-size: 25px;
+  color: #fff;
+  background-color: rgba(31, 45, 61, 0.11);
+  transition: ease all 0.3s;
+  opacity: 0.3;
+  z-index: 1;
+}
+:deep(.slick-arrow.custom-slick-arrow:before) {
+  display: none;
+}
+:deep(.slick-arrow.custom-slick-arrow:hover) {
+  color: #fff;
+  opacity: 0.5;
+}
+
+:deep(.slick-slide h3) {
+  color: #fff;
+}
 </style>