Merge branch 'master' into preview

README.md

@@ -18,10 +18,19 @@
     height="55"
   />
 </a>
+<a href="https://hellogithub.com/repository/57771fd91d1542c7a470959b677a9944" target="_blank">
+  <img
+    src="https://abroad.hellogithub.com/v1/widgets/recommend.svg?rid=57771fd91d1542c7a470959b677a9944&claim_uid=qi74Zp23wYKeAVB&theme=neutral"
+    alt="Featured｜HelloGitHub"
+    width="250"
+    height="55"
+  />
+</a>
 <a href="https://www.uneed.best/tool/sink" target="_blank">
   <img
     src="https://www.uneed.best/POTW1.png"
     alt="Uneed Badge"
+    width="250"
     height="55"
   />
 </a>

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

app/components/spark-ui/AnimatedList.vue

@@ -83,7 +83,8 @@ onMounted(() => loadComponents())
       <div
         v-for="(item, idx) in itemsToShow"
         :key="item.props.key"
-        v-motion :initial="getInitial(idx)" :enter="getEnter(idx)" :leave="getLeave()"
+        v-motion
+        :initial="getInitial(idx)" :enter="getEnter(idx)" :leave="getLeave()"
         :class="cn('mx-auto w-full')"
       >
         <component :is="item" />

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',
   ],