From 92dc0deb43bebf8b82632ce678066489a3e80259 Mon Sep 17 00:00:00 2001
From: icebergtsn <zyh2433219116@gmail.com>
Date: Mon, 16 Dec 2024 21:58:40 +0800
Subject: [PATCH] fix: update download progress text effect and replace
 homepage banner component

---
 .../src/components/appcard/InstallButton.vue  |  32 ++-
 frontend/src/components/appcard/MyAppCard.vue |   2 +
 .../src/components/base/AppStoreSwiper.vue    |   4 +-
 frontend/src/components/base/BtBanner.vue     | 250 +++++++++++++-----
 .../src/components/base/ProgressButton.vue    | 124 +++++++++
 frontend/src/pages/application/HomePage.vue   |   4 +-
 6 files changed, 339 insertions(+), 77 deletions(-)
 create mode 100644 frontend/src/components/base/ProgressButton.vue

diff --git a/frontend/src/components/appcard/InstallButton.vue b/frontend/src/components/appcard/InstallButton.vue
index 6f76c37..8ea37aa 100644
--- a/frontend/src/components/appcard/InstallButton.vue
+++ b/frontend/src/components/appcard/InstallButton.vue
@@ -26,7 +26,6 @@
 			@mouseover="updateHover(true)"
 			@mouseleave="updateHover(false)"
 			dense
-			:percentage="item.progress ? Number(item.progress) : 0"
 			flat
 			no-caps
 		>
@@ -40,14 +39,14 @@
 				>
 					{{ status }}
 				</div>
-				<div
-					style="width: 100%; height: 100%"
-					class="row justify-center items-center"
+				<progress-button
+					ref="progressBar"
 					v-if="showDownloadProgress(item)"
-				>
-					<!--          <q-spinner-hourglass size="12px" style="margin-right: 4px"/>-->
-					{{ item.progress ? Number(item.progress) + '%' : '0%' }}
-				</div>
+					:progress="item.progress"
+					:covered-text-color="white"
+					:default-text-color="blueDefault"
+					:progress-bar-color="blueDefault"
+				/>
 				<div
 					v-if="
 						item.status === APP_STATUS.pending ||
@@ -154,6 +153,7 @@ import {
 	canSuspend
 } from 'src/constants/config';
 import { bus, BUS_EVENT } from 'src/utils/bus';
+import ProgressButton from 'src/components/base/ProgressButton.vue';
 
 const props = defineProps({
 	item: {
@@ -499,7 +499,6 @@ function updateUI() {
 			}
 			break;
 		case APP_STATUS.installing:
-		case APP_STATUS.downloading:
 			if (hoverRef.value && canInstallingCancel(props.item?.cfgType)) {
 				isLoading.value = false;
 				status.value = t('app.cancel');
@@ -514,6 +513,21 @@ function updateUI() {
 				border.value = '1px solid transparent';
 			}
 			break;
+		case APP_STATUS.downloading:
+			if (hoverRef.value && canInstallingCancel(props.item?.cfgType)) {
+				isLoading.value = false;
+				status.value = t('app.cancel');
+				textColor.value = blueDefault.value;
+				backgroundColor.value = background1.value;
+				border.value = `1px solid ${blueDefault.value}`;
+			} else {
+				isLoading.value = true;
+				status.value = t('app.installing');
+				textColor.value = white.value;
+				backgroundColor.value = blueAlpha.value;
+				border.value = '1px solid transparent';
+			}
+			break;
 		case APP_STATUS.initializing:
 			if (hoverRef.value && canInstallingCancel(props.item?.cfgType)) {
 				isLoading.value = false;
diff --git a/frontend/src/components/appcard/MyAppCard.vue b/frontend/src/components/appcard/MyAppCard.vue
index 05f5af6..6985e46 100644
--- a/frontend/src/components/appcard/MyAppCard.vue
+++ b/frontend/src/components/appcard/MyAppCard.vue
@@ -247,6 +247,8 @@ function goAppDetails() {
 
 			.my-application-title {
 				max-width: 70%;
+				overflow: hidden;
+				text-overflow: ellipsis;
 			}
 
 			.my-application-version {
diff --git a/frontend/src/components/base/AppStoreSwiper.vue b/frontend/src/components/base/AppStoreSwiper.vue
index 1bcf9ba..3d46e9a 100644
--- a/frontend/src/components/base/AppStoreSwiper.vue
+++ b/frontend/src/components/base/AppStoreSwiper.vue
@@ -4,7 +4,7 @@
 		:style="{ '--NavigationOffsite': `${navigationOffsite}px` }"
 		class="row justify-center items-center"
 	>
-		<!-- 自定义后退按钮 -->
+		<!-- custom back button -->
 		<div
 			class="button-left"
 			@click="customPrev"
@@ -43,7 +43,7 @@
 			</swiper-slide>
 		</swiper>
 
-		<!-- 自定义前进按钮 -->
+		<!--  custom forward button  -->
 		<div
 			class="button-right"
 			@click="customNext"
diff --git a/frontend/src/components/base/BtBanner.vue b/frontend/src/components/base/BtBanner.vue
index 61fe471..255c357 100644
--- a/frontend/src/components/base/BtBanner.vue
+++ b/frontend/src/components/base/BtBanner.vue
@@ -1,93 +1,215 @@
 <template>
-	<div class="banner-background justify-start items-center">
-		<q-carousel
-			class="banner-carousel"
-			animated
-			v-model="slide"
-			:autoplay="10000"
-			swipeable
-			infinite
-			keep-alive
-			transition-prev="slide-right"
-			transition-next="slide-left"
+	<div class="banner-root">
+		<!--		@autoplayTimeLeft="onAutoplayTimeLeft"-->
+		<swiper
+			:spaceBetween="30"
+			:centeredSlides="true"
+			:autoplay="{
+				delay: 2500,
+				disableOnInteraction: false
+			}"
+			:style="{ width: swiperSize + 'px' }"
+			:navigation="false"
+			:modules="modules"
+			class="banner-swiper"
+			@swiper="setSwiperRef"
+			@slideChange="onSlideChange"
 		>
-			<template v-for="item in size" :key="item">
-				<q-carousel-slide style="padding: 0" :name="item">
-					<slot name="slide" :index="item" />
-				</q-carousel-slide>
-			</template>
-		</q-carousel>
-
-		<div
-			v-if="size > 1"
-			class="cursor-pointer banner-navigation row justify-start items-center"
-		>
-			<template v-for="item in size" :key="item">
-				<div
-					:class="item === slide ? 'navigation-active' : 'navigation-normal'"
-					@click="changeActive(item)"
-				/>
-			</template>
-		</div>
+			<swiper-slide
+				class="banner-swiper-slide"
+				v-for="(item, index) in size"
+				:key="index"
+			>
+				<slot name="swiper" :index="index" />
+			</swiper-slide>
+			<div
+				v-if="size > 1"
+				class="cursor-pointer banner-navigation row justify-start items-center"
+			>
+				<template v-for="item in size" :key="item">
+					<div
+						:class="
+							item - 1 === currentSlide
+								? 'navigation-active'
+								: 'navigation-normal'
+						"
+						@click="changeActive(item)"
+					/>
+				</template>
+			</div>
+			<!--			<template #container-end>-->
+
+			<!--				<template v-for="(item, index) in size" :key="item">-->
+			<!--					-->
+			<!--				</template>-->
+
+			<!--				<div class="autoplay-progress">-->
+			<!--					<svg viewBox="0 0 48 48" ref="progressCircle">-->
+			<!--						<circle cx="24" cy="24" r="20" />-->
+			<!--					</svg>-->
+			<!--					<span ref="progressContent"></span>-->
+			<!--				</div>-->
+			<!--			</template>-->
+		</swiper>
 	</div>
 </template>
-
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+// Import Swiper Vue.js components
+import { Swiper, SwiperSlide } from 'swiper/vue';
+
+// Import Swiper styles
+import 'swiper/css';
+import 'swiper/css/navigation';
+import 'swiper/css/autoplay';
+import { Navigation, Autoplay } from 'swiper/modules';
+import { useQuasar } from 'quasar';
 
-const props = defineProps({
+defineProps({
 	size: {
 		type: Number,
 		require: true
-	},
-	start: {
-		type: Number,
-		default: 1
 	}
 });
+// import required modules
+const modules = [Navigation, Autoplay];
+const $q = useQuasar();
+// const progressCircle = ref<string | null>(null);
+// const progressContent = ref<string | null>(null);
+const swiperSize = ref();
+let swiperRef: any = null;
+let resizeTimer: NodeJS.Timeout | null = null;
+const currentSlide = ref(0);
+// const onAutoplayTimeLeft = (s, time, progress) => {
+// 	progressCircle.value.style.setProperty('--progress', 1 - progress);
+// 	progressContent.value.textContent = `${Math.ceil(time / 1000)}s`;
+// };
 
-const slide = ref(props.start);
+const setSwiperRef = (swiper: any) => {
+	swiperRef = swiper;
+};
 
 const changeActive = (index: number) => {
-	slide.value = index;
+	swiperRef.slideTo(index);
+};
+
+function onSlideChange(swiper) {
+	currentSlide.value = swiper.activeIndex;
+}
+
+const resize = () => {
+	if (resizeTimer) {
+		clearTimeout(resizeTimer);
+	}
+	resizeTimer = setTimeout(function () {
+		updateSwiper();
+	}, 200);
 };
+
+const updateSwiper = () => {
+	if ($q.screen.width < 864) {
+		swiperSize.value = 800;
+	} else if ($q.screen.width < 1024) {
+		swiperSize.value = $q.screen.width - 88;
+	} else {
+		swiperSize.value = $q.screen.width - 208 - 88;
+	}
+};
+
+onMounted(async () => {
+	updateSwiper();
+	window.addEventListener('resize', resize);
+});
+
+onBeforeUnmount(() => {
+	window.removeEventListener('resize', resize);
+});
 </script>
 
-<style scoped lang="scss">
-.banner-background {
+<style lang="scss" scoped>
+.banner-root {
 	width: 100%;
-	height: 100%;
-	position: relative;
+	max-width: 100%;
+	height: auto;
 
-	.banner-carousel {
-		width: 100%;
+	.banner-swiper {
+		position: relative;
+		max-width: 100%;
 		height: 100%;
-	}
 
-	.banner-navigation {
-		width: auto;
-		height: 20px;
-		right: 64px;
-		bottom: 32px;
-		position: absolute;
-
-		.navigation-base {
-			height: 8px;
-			border-radius: 20px;
-			margin-right: 8px;
+		.banner-swiper-slide {
+			max-width: 100%;
+			text-align: center;
+			font-size: 18px;
+			background: #fff;
+			display: flex;
+			justify-content: center;
+			align-items: center;
 		}
 
-		.navigation-active {
-			@extend .navigation-base;
-			width: 32px;
-			background-color: #ffffff;
+		.banner-swiper-slide img {
+			display: block;
+			width: 100%;
+			height: 100%;
+			object-fit: cover;
 		}
 
-		.navigation-normal {
-			@extend .navigation-base;
-			width: 8px;
-			background: rgba(255, 255, 255, 0.4);
+		.banner-navigation {
+			width: auto;
+			height: 20px;
+			right: 44px;
+			bottom: 32px;
+			position: absolute;
+			z-index: 1000;
+
+			.navigation-base {
+				height: 8px;
+				border-radius: 20px;
+				margin-right: 8px;
+			}
+
+			.navigation-active {
+				@extend .navigation-base;
+				width: 32px;
+				background-color: #ffffff;
+			}
+
+			.navigation-normal {
+				@extend .navigation-base;
+				width: 8px;
+				background: rgba(255, 255, 255, 0.4);
+			}
 		}
 	}
 }
+
+//.autoplay-progress {
+//	position: absolute;
+//	right: 16px;
+//	bottom: 16px;
+//	z-index: 10;
+//	width: 48px;
+//	height: 48px;
+//	display: flex;
+//	align-items: center;
+//	justify-content: center;
+//	font-weight: bold;
+//	color: var(--swiper-theme-color);
+//}
+//
+//.autoplay-progress svg {
+//	--progress: 0;
+//	position: absolute;
+//	left: 0;
+//	top: 0px;
+//	z-index: 10;
+//	width: 100%;
+//	height: 100%;
+//	stroke-width: 4px;
+//	stroke: var(--swiper-theme-color);
+//	fill: none;
+//	stroke-dashoffset: calc(125.6px * (1 - var(--progress)));
+//	stroke-dasharray: 125.6;
+//	transform: rotate(-90deg);
+//}
 </style>
diff --git a/frontend/src/components/base/ProgressButton.vue b/frontend/src/components/base/ProgressButton.vue
new file mode 100644
index 0000000..96eeb6f
--- /dev/null
+++ b/frontend/src/components/base/ProgressButton.vue
@@ -0,0 +1,124 @@
+<template>
+	<div class="progress-button">
+		<span
+			class="progress-text"
+			:class="textClass"
+			:style="{
+				background: `linear-gradient(to right, ${coveredTextColor} ${computedProgress}%, ${defaultTextColor} ${computedProgress}%)`,
+				WebkitBackgroundClip: 'text',
+				color: 'transparent'
+			}"
+		>
+			{{ buttonText ? buttonText : `${computedProgress}%` }}
+		</span>
+		<div
+			class="progress-bar"
+			:style="{
+				width: computedProgress + '%',
+				backgroundColor: progressBarColor
+			}"
+		/>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps({
+	buttonText: {
+		type: String,
+		required: false
+	},
+	textClass: String,
+	progress: {
+		type: String,
+		default: '0'
+	},
+	backgroundColor: {
+		type: String,
+		default: 'transparent'
+	},
+	defaultTextColor: {
+		type: String,
+		default: '#333'
+	},
+	coveredTextColor: {
+		type: String,
+		default: '#fff'
+	},
+	progressBarColor: {
+		type: String,
+		default: '#4caf50'
+	}
+});
+
+let interval: number | null = null;
+const testValue = ref(0);
+
+const computedProgress = computed(() => {
+	try {
+		const result = Number(props.progress) + testValue.value;
+		return Math.min(100, Math.max(0, result));
+	} catch (e) {
+		return 0;
+	}
+});
+
+function startProgress() {
+	if (interval) return;
+
+	interval = setInterval(() => {
+		if (computedProgress.value < 100) {
+			console.log(`${computedProgress.value}%`);
+			testValue.value += 1;
+		} else {
+			if (interval !== null) {
+				clearInterval(interval);
+			}
+			testValue.value = 0;
+			interval = null;
+		}
+	}, 1000);
+}
+const emit = defineEmits(['onLoadComplete']);
+watch(
+	() => computedProgress.value,
+	() => {
+		if (computedProgress.value === 100) {
+			emit('onLoadComplete');
+		}
+	}
+);
+defineExpose({ startProgress });
+</script>
+
+<style lang="scss">
+.progress-button {
+	position: relative;
+	overflow: hidden;
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	width: 100%;
+
+	.progress-bar {
+		position: absolute;
+		top: 0;
+		left: 0;
+		height: 100%;
+		width: 0;
+		z-index: 1;
+		transition: width 0.1s linear;
+	}
+
+	.progress-text {
+		position: relative;
+		z-index: 2;
+		background-clip: text;
+		-webkit-background-clip: text;
+		color: transparent;
+		width: 100%;
+	}
+}
+</style>
diff --git a/frontend/src/pages/application/HomePage.vue b/frontend/src/pages/application/HomePage.vue
index 81e8889..6c51cae 100644
--- a/frontend/src/pages/application/HomePage.vue
+++ b/frontend/src/pages/application/HomePage.vue
@@ -14,12 +14,12 @@
 					class="home-padding"
 					style="padding-top: 20px; padding-bottom: 20px"
 				>
-					<template v-slot:slide="{ index }">
+					<template v-slot:swiper="{ index }">
 						<q-img
 							style="border-radius: 12px"
 							width="100%"
 							ratio="4.42"
-							:src="getRequireImage(`banner/home_banner${index}.png`)"
+							:src="getRequireImage(`banner/home_banner${index + 1}.png`)"
 						/>
 					</template>
 				</bt-banner>