From bab8dec48914f657eb733324a6789fc01745fff4 Mon Sep 17 00:00:00 2001 From: ccbikai Date: Sun, 18 May 2025 21:52:02 +0800 Subject: [PATCH 1/3] style(vue): improve motion animation formatting Enhances code readability and maintainability by: - Breaking v-motion directive into separate line - Reordering motion module in Nuxt config for better dependency loading This change maintains the same functionality while improving code organization and module initialization order. --- app/components/spark-ui/AnimatedList.vue | 3 ++- nuxt.config.ts | 2 +- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/app/components/spark-ui/AnimatedList.vue b/app/components/spark-ui/AnimatedList.vue index 8eb3d32..c90f1a9 100644 --- a/app/components/spark-ui/AnimatedList.vue +++ b/app/components/spark-ui/AnimatedList.vue @@ -83,7 +83,8 @@ onMounted(() => loadComponents())
diff --git a/nuxt.config.ts b/nuxt.config.ts index 5f9c922..2a8f3d5 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -6,9 +6,9 @@ export default defineNuxtConfig({ modules: [ '@nuxthub/core', 'shadcn-nuxt', + '@vueuse/motion/nuxt', '@nuxt/eslint', '@nuxtjs/tailwindcss', - '@vueuse/motion/nuxt', '@nuxtjs/color-mode', '@nuxtjs/i18n', ], From 06fb1562eb728f924a776865a829d0990ac81af8 Mon Sep 17 00:00:00 2001 From: ccbikai Date: Mon, 19 May 2025 20:16:34 +0800 Subject: [PATCH 2/3] docs: add HelloGitHub badge and standardize widths Adds a new featured badge from HelloGitHub and improves visual consistency by: - Adding HelloGitHub recommendation badge with link - Standardizing image widths to 250px for better alignment - Maintaining consistent height of 55px across all badges --- README.md | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/README.md b/README.md index bcfec92..54168eb 100644 --- a/README.md +++ b/README.md @@ -18,10 +18,19 @@ height="55" /> + + Featured｜HelloGitHub + Uneed Badge From 1d28494d6bcaebfae32a7bc1a7ba527025b19d46 Mon Sep 17 00:00:00 2001 From: ccbikai Date: Mon, 19 May 2025 20:39:17 +0800 Subject: [PATCH 3/3] feat(globe): enhance traffic visualization effects Improves the visual representation of traffic events on the globe: - Optimizes arc animation parameters for smoother transitions - Adds source and target ring animations for better event tracking - Skips visualization for nearby locations to reduce visual clutter - Updates color scheme to dark orange for better visibility - Synchronizes animation timings with event delays --- app/components/dashboard/realtime/Globe.vue | 33 ++++++++++++++++----- 1 file changed, 26 insertions(+), 7 deletions(-) diff --git a/app/components/dashboard/realtime/Globe.vue b/app/components/dashboard/realtime/Globe.vue index f3df4ee..be95ce0 100644 --- a/app/components/dashboard/realtime/Globe.vue +++ b/app/components/dashboard/realtime/Globe.vue @@ -74,21 +74,37 @@ function trafficEvent({ props }, { delay = 0 }) { startLng: props.item.longitude, endLat: colos.value[props.item.COLO]?.lat, endLng: colos.value[props.item.COLO]?.lon, - color: 'red', - arcAltitude: 0.5, + color: 'darkOrange', + arcAltitude: 0.2, + } + console.info(`from ${props.item.city}(${arc.startLat}, ${arc.startLng}) to ${props.item.COLO}(${arc.endLat}, ${arc.endLng})`) + const isNear = Math.abs(arc.endLat - arc.startLat) < 5 && Math.abs(arc.endLng - arc.startLng) < 5 + if (isNear) { + console.info(`from ${props.item.city} to ${props.item.COLO} is near, skip`) + return } - console.info(`from ${props.item.city}(${props.item.latitude}, ${props.item.longitude}) to ${props.item.COLO}(${colos.value[props.item.COLO]?.lat}, ${colos.value[props.item.COLO]?.lon})`) const random = Math.random() globe.arcsData([arc]) .arcColor('color') - .arcDashLength(() => random + 0.2) - .arcDashGap(() => random - 0.2) - .arcDashAnimateTime(2000) + .arcDashLength(() => random) + .arcDashGap(() => 1 - random) + .arcDashAnimateTime(delay * 2) + .ringRepeatPeriod(delay * 2) + + const srcRing = { lat: arc.startLat, lng: arc.startLng } + globe.ringsData([...globe.ringsData(), srcRing]) + setTimeout(() => globe.ringsData(globe.ringsData().filter(r => r !== srcRing)), delay * 2) + + setTimeout(() => { + const targetRing = { lat: arc.endLat, lng: arc.endLng } + globe.ringsData([...globe.ringsData(), targetRing]) + setTimeout(() => globe.ringsData(globe.ringsData().filter(r => r !== targetRing)), delay * 2) + }, delay * 2) clearTimeout(cleanArcsDataTimer) cleanArcsDataTimer = setTimeout(() => { globe.arcsData([]) - }, delay + 100) + }, delay * 2) } const normalized = 5 / props.minutes @@ -114,6 +130,9 @@ function initGlobe() { .hexBinMerge(true) .hexBinPointWeight('count') .hexPolygonColor(() => `rgba(54, 211, 153, ${Math.random() / 1.5 + 0.5})`) + .ringColor(() => t => `rgba(255,100,50,${1 - t})`) + .ringMaxRadius(3) + .ringPropagationSpeed(3) .onGlobeReady(() => { globe.pointOfView({ lat: currentLocation.value.latitude, lng: currentLocation.value.longitude, altitude: width.value > 768 ? 2 : 3 }) globe.controls().autoRotate = true