From 81a0a060ee88d55887ec45f03dba8b9ac955399b Mon Sep 17 00:00:00 2001
From: zhangyahui <yhzhang@aidlab.hk>
Date: Wed, 3 Jun 2026 17:22:48 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BE=E7=89=87=E5=9C=B0=E5=9D=80?=
 =?UTF-8?q?=E6=9B=B4=E6=8D=A2=E4=B8=BA=E7=BA=BF=E4=B8=8A=E8=B5=84=E6=BA=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/aida/index.vue               |  51 ++++++------
 src/pages/home/components/Carousel.vue | 105 +++++++++++++++++++++----
 src/pages/home/index.vue               |  11 +--
 src/tools/config.ts                    |   1 +
 4 files changed, 120 insertions(+), 48 deletions(-)
 create mode 100644 src/tools/config.ts

diff --git a/src/pages/aida/index.vue b/src/pages/aida/index.vue
index a725f7b..1fea826 100644
--- a/src/pages/aida/index.vue
+++ b/src/pages/aida/index.vue
@@ -5,9 +5,8 @@
 	import { gsap } from 'gsap'
 	import { ScrollTrigger } from 'gsap/ScrollTrigger'
 	import diamondIcon from '@/assets/images/aida/diamond.svg'
-	import industryTwo from '@/assets/images/aida/industry-2.png'
-	import industryThree from '@/assets/images/aida/industry-3.png'
 	import timeIcon from '@/assets/images/aida/time.svg'
+	import { IMAGE_BASE_URL } from '@/tools/config'
 
 	gsap.registerPlugin(ScrollTrigger)
 
@@ -15,9 +14,9 @@
 
 	const demoVideo = computed(() => {
 		if (locale.value === 'en') {
-			return 'https://code-create.com.hk/wp-content/uploads/2026/02/Demo-video-26-2-27-EN.mp4'
+			return `${IMAGE_BASE_URL}/wp-content/uploads/2026/02/Demo-video-26-2-27-EN.mp4`
 		}
-		return 'https://code-create.com.hk/wp-content/uploads/2026/02/Demo-video-26-2-27-CN.mp4'
+		return `${IMAGE_BASE_URL}/wp-content/uploads/2026/02/Demo-video-26-2-27-CN.mp4`
 	})
 
 	const keyFeatures = computed(() => {
@@ -27,17 +26,17 @@
 	const benefits = computed(() => {
 		return [
 			{
-				image: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_feature_icon_01.png',
+				image: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/aida_feature_icon_01.png`,
 				alt: 'Light bulb icon',
 				text: t('Aida.benefits1')
 			},
 			{
-				image: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_feature_icon_02.png',
+				image: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/aida_feature_icon_02.png`,
 				alt: 'Stopwatch icon',
 				text: t('Aida.benefits2')
 			},
 			{
-				image: 'https://code-create.com.hk/wp-content/uploads/2022/11/aida_feature_icon_03-1.png',
+				image: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/aida_feature_icon_03-1.png`,
 				alt: 'Drawing brush icon',
 				text: t('Aida.benefits3')
 			}
@@ -55,23 +54,23 @@
 		]
 	})
 
-const plans = computed(() => {
+	const plans = computed(() => {
 		return [
-		{
-			icon: timeIcon,
-			name: t('Aida.trial'),
-			description: t('Aida.days'),
-			action: t('Aida.start'),
-			href: 'https://www.aida.com.hk/register'
-		},
-		{
-			icon: diamondIcon,
-			name: t('Aida.corporate'),
-			description: t('Aida.customised'),
-			action: t('Aida.contactUs'),
-			href: 'mailto:info\\@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
-		}
-	] 
+			{
+				icon: timeIcon,
+				name: t('Aida.trial'),
+				description: t('Aida.days'),
+				action: t('Aida.start'),
+				href: 'https://www.aida.com.hk/register'
+			},
+			{
+				icon: diamondIcon,
+				name: t('Aida.corporate'),
+				description: t('Aida.customised'),
+				action: t('Aida.contactUs'),
+				href: 'mailto:info\\@code-create.com.hk?subject=AiDA%203.1%20Corporate%20Plan'
+			}
+		]
 	})
 
 	const demoVideoRef = useTemplateRef<HTMLVideoElement>('demoVideoRef')
@@ -311,7 +310,7 @@ const plans = computed(() => {
 		<section class="aida-hero" aria-labelledby="aida-title">
 			<img
 				class="aida-hero-image"
-				src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_banner-1.jpg"
+				:src="`${IMAGE_BASE_URL}/wp-content/uploads/2022/11/aida_banner-1.jpg`"
 				alt="AiDA 3.1 banner"
 			/>
 			<h1 id="aida-title" class="aida-hero-title">AiDA 3.1</h1>
@@ -348,13 +347,13 @@ const plans = computed(() => {
 				<div class="feature-art">
 					<img
 						class="feature-bg"
-						src="https://code-create.com.hk/wp-content/uploads/2022/11/aida_intro_01_bg.png"
+						:src="`${IMAGE_BASE_URL}/wp-content/uploads/2022/11/aida_intro_01_bg.png`"
 						alt="Fashion design sketches on paper"
 						loading="lazy"
 					/>
 					<img
 						class="feature-panel"
-						src="https://code-create.com.hk/wp-content/uploads/2024/01/new-layout-1.png"
+						:src="`${IMAGE_BASE_URL}/wp-content/uploads/2024/01/new-layout-1.png`"
 						alt="AiDA design workspace preview"
 						loading="lazy"
 					/>
diff --git a/src/pages/home/components/Carousel.vue b/src/pages/home/components/Carousel.vue
index 6cdc95b..fbf7d2d 100644
--- a/src/pages/home/components/Carousel.vue
+++ b/src/pages/home/components/Carousel.vue
@@ -1,15 +1,19 @@
 <template>
 	<section
 		class="carousel-container"
+		:class="{ 'show-pagination': showPagination }"
 		aria-label="Featured content"
 		@mouseenter="pauseAutoplay"
 		@mouseleave="resumeAutoplay"
+		@click="handleCarouselClick"
+		@touchstart="handleCarouselTouch"
+		@touchmove="handleCarouselTouch"
 	>
 		<KagolCarousel
 			v-model="activePage"
 			class="home-carousel"
-			:autoplay="false"
-			:interval="1000"
+			:autoplay="isAutoplayEnabled"
+			:interval="10000"
 		>
 			<article v-for="slide in slides" :key="slide.id" ref="slideEls" class="carousel-slide">
 				<div class="mask"></div>
@@ -89,9 +93,8 @@
 	import { gsap } from 'gsap'
 	import { Carousel as KagolCarousel } from '@kagol/vue-carousel'
 	import '@kagol/vue-carousel/dist/style.css'
-	import mainBanner01 from '../../../assets/images/home/mainbanner01.jpg'
-	import mainBanner02 from '../../../assets/images/home/mainbanner02.jpg'
 	import { useI18n } from 'vue-i18n'
+	import { IMAGE_BASE_URL } from '@/tools/config'
 
 	const { t, locale } = useI18n()
 
@@ -109,6 +112,8 @@
 	const isAutoplayEnabled = shallowRef(false)
 	const slideEls = useTemplateRef<HTMLElement[]>('slideEls')
 	const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 768)
+	const showPagination = ref(false)
+	let hideTimeout: number | null = null
 
 	const getVideoUrl = () => {
 		const isMobile = windowWidth.value < 768
@@ -129,7 +134,7 @@
 	const slides = computed<HomeSlide[]>(() => [
 		{
 			id: 'aida',
-			image: mainBanner01,
+			image: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/mainbanner01-2.jpg`,
 			video: '',
 			alt: t('Home.banner1slogan'),
 			title: t('Home.banner1slogan'),
@@ -138,7 +143,7 @@
 		},
 		{
 			id: 'mixi',
-			image: mainBanner02,
+			image: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/mainbanner02-3.jpg`,
 			video: '',
 			alt: 'Code Create product banner',
 			title: t('Home.banner2slogan'),
@@ -247,6 +252,38 @@
 		isAutoplayEnabled.value = true
 	}
 
+	function showPaginationControls() {
+		showPagination.value = true
+		
+		if (hideTimeout) {
+			window.clearTimeout(hideTimeout)
+		}
+		
+		hideTimeout = window.setTimeout(() => {
+			showPagination.value = false
+			hideTimeout = null
+		}, 3000)
+	}
+
+	function handleCarouselClick() {
+		showPaginationControls()
+	}
+
+	function handleCarouselTouch() {
+		showPaginationControls()
+	}
+
+	function handleOutsideClick(event: MouseEvent | TouchEvent) {
+		const container = document.querySelector('.carousel-container')
+		if (container && !container.contains(event.target as Node)) {
+			showPagination.value = false
+			if (hideTimeout) {
+				window.clearTimeout(hideTimeout)
+				hideTimeout = null
+			}
+		}
+	}
+
 	onMounted(() => {
 		resumeAutoplay()
 		queueDescAnimation()
@@ -256,6 +293,10 @@
 			windowWidth.value = window.innerWidth
 		}
 		window.addEventListener('resize', handleResize)
+
+		// 监听点击轮播图外部区域
+		document.addEventListener('click', handleOutsideClick)
+		document.addEventListener('touchstart', handleOutsideClick)
 	})
 
 	onBeforeUnmount(() => {
@@ -269,6 +310,13 @@
 		if (handleResize) {
 			window.removeEventListener('resize', handleResize)
 		}
+
+		// 清理定时器和事件监听
+		if (hideTimeout) {
+			window.clearTimeout(hideTimeout)
+		}
+		document.removeEventListener('click', handleOutsideClick)
+		document.removeEventListener('touchstart', handleOutsideClick)
 	})
 
 	watch(activePage, queueDescAnimation)
@@ -327,6 +375,7 @@
 				color: #ffffff;
 				background: transparent;
 				isolation: isolate;
+				pointer-events: none;
 			}
 			.desc-fill {
 				position: absolute;
@@ -337,6 +386,9 @@
 				background: #a51f24;
 				pointer-events: none;
 			}
+			.desc > * {
+				pointer-events: auto;
+			}
 
 			.desc-index-group {
 				position: relative;
@@ -408,6 +460,7 @@
 			transition: transform 0.28s ease;
 			will-change: transform;
 			z-index: 9;
+			opacity: 1;
 		}
 		.carousel-pagination-button {
 			position: relative;
@@ -425,16 +478,16 @@
 			transition: background-color 0.2s ease;
 		}
 
-		.carousel-pagination-button:hover {
-			background: rgba(255, 255, 255, 0.75);
-		}
+		// .carousel-pagination-button:hover {
+		// 	background: rgba(255, 255, 255, 0.75);
+		// }
 
-		.carousel-pagination-button:focus-visible {
-			position: relative;
-			z-index: 1;
-			outline: 2px solid #ffffff;
-			outline-offset: -6px;
-		}
+		// .carousel-pagination-button:focus-visible {
+		// 	position: relative;
+		// 	z-index: 1;
+		// 	outline: 2px solid #ffffff;
+		// 	outline-offset: -6px;
+		// }
 
 		.carousel-pagination-arrow {
 			position: absolute;
@@ -477,7 +530,7 @@
 				min-height: 365px;
 
 				.carousel-banner {
-					height: 263px;
+					height: 100%;
 				}
 
 				.banner-title {
@@ -499,6 +552,7 @@
 					min-height: 102px;
 					padding: 16px 15px;
 					gap: 18px;
+					background: transparent;
 				}
 				.desc-line {
 					top: -70px;
@@ -516,13 +570,30 @@
 			}
 
 			.carousel-pagination {
-				display: none;
+				width: 50px;
+				height: 102px;
+				transform: translateX(0);
+				opacity: 0;
+				transition: opacity 0.3s ease;
 			}
+
+			.carousel-pagination-button {
+				width: 50px;
+				height: 51px;
+			}
+		}
+
+		.carousel-container.show-pagination .carousel-pagination {
+			opacity: 1;
 		}
 
 		.carousel-pagination-arrow {
 			width: 18px;
 			height: 18px;
 		}
+
+		.carousel-container:hover .carousel-pagination {
+			transform: translateX(0);
+		}
 	}
 </style>
diff --git a/src/pages/home/index.vue b/src/pages/home/index.vue
index 636ab57..4e73784 100644
--- a/src/pages/home/index.vue
+++ b/src/pages/home/index.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 	import { watch, computed } from 'vue'
 	import { useHead } from '@unhead/vue'
-	import aidaIntroBg from '@/assets/images/home/aida-intro-bg.png'
 	import aidaPanel from '@/assets/images/home/aida-panel.png'
 	import homeAiLogo from '@/assets/images/home/home-ai-logo.png'
 	import mixiIntroBg from '@/assets/images/home/mixi-intro-bg.png'
@@ -9,7 +8,9 @@
 	import HomeCarousel from './components/Carousel.vue'
 	import ProductFeature from './components/ProductFeature.vue'
 	import ProjectCta from './components/ProjectCta.vue'
+	import { IMAGE_BASE_URL } from '@/tools/config'
 	import { useI18n } from 'vue-i18n'
+
 	const { t, locale } = useI18n()
 
 	const productFeatures = computed(() => {
@@ -17,18 +18,18 @@
 			{
 				name: 'AiDA 3.1',
 				title: t('Home.aidaDesc'),
-				backgroundImage: aidaIntroBg,
+				backgroundImage: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/aida_intro_01_bg.png`,
 				backgroundAlt: 'Fashion design sketches on paper',
-				panelImage: aidaPanel,
+				panelImage: `${IMAGE_BASE_URL}/wp-content/uploads/2024/01/new-layout-1.png`,
 				panelAlt: 'AiDA design workspace preview',
 				reversed: false
 			},
 			{
 				name: 'Mixi',
 				title: t('Home.mixiSlogan'),
-				backgroundImage: mixiIntroBg,
+				backgroundImage: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/mixi_intro_01_bg.png`,
 				backgroundAlt: 'Layered fabric texture',
-				panelImage: mixiPanel,
+				panelImage: `${IMAGE_BASE_URL}/wp-content/uploads/2022/11/mixi_intro_01_panel.png`,
 				panelAlt: 'Mixi visual search interface preview',
 				reversed: true
 			}
diff --git a/src/tools/config.ts b/src/tools/config.ts
new file mode 100644
index 0000000..6a9833a
--- /dev/null
+++ b/src/tools/config.ts
@@ -0,0 +1 @@
+export const IMAGE_BASE_URL = 'https://code-create.com.hk'
\ No newline at end of file