POLISH(lottie): Continue to play lottie when mouseleave

components/views/lottie-hover-animation.vue

@@ -0,0 +1,67 @@
+<template lang="pug">
+vue3-lottie(
+  ref="com"
+  v-bind="$props"
+  @mouseenter="handleMouseenter"
+  @mouseleave="handleMouseleave"
+  @onComplete="handleComplete"
+)
+</template>
+
+<script setup lang="ts">
+export interface LottieProps {
+  animationData: any
+  animationLink: string
+  loop: boolean | number
+  autoPlay: boolean
+  rendererSettings: any
+  width: number | string
+  height: number | string
+  speed: number
+  delay: number
+  direction: string
+  pauseOnHover: boolean
+  playOnHover: boolean
+  backgroundColor: string
+  pauseAnimation: boolean
+}
+
+const props = withDefaults(defineProps<LottieProps>(), {
+  speed: 1,
+  autoPlay: false
+})
+
+const { isMobile } = useDevice()
+const isPlaying = ref(false)
+const needNextPlay = ref(false)
+const com = ref<any>(null)
+
+const handleMouseenter = (event: Event) => {
+  if (isMobile || !com.value || isPlaying.value) {
+    needNextPlay.value = true
+    return
+  }
+
+  isPlaying.value = true
+  needNextPlay.value = true
+
+  com.value?.play()
+}
+
+const handleMouseleave = (event: Event) => {
+  const target = event.target
+  if (target === com.value?.$el) {
+    needNextPlay.value = false
+  }
+}
+
+const handleComplete = () => {
+  if (needNextPlay.value) {
+    com.value?.stop()
+    com.value?.play()
+  } else {
+    isPlaying.value = false
+  }
+}
+
+</script>

components/views/overview-hyperfused-platform.vue

@@ -29,10 +29,7 @@
           .stay-focused-flow-placeholder
           //- stay-focused-flow
           client-only
-            vue3-lottie.stay-focused-flow-lottie(
-              :autoPlay="!$device.isMobile"
-              :playOnHover="!$device.isMobile"
-              loop
+            lottie-hover-animation.stay-focused-flow-lottie(
               :animationLink="$device.isMobile ? '/lottie-files/stay-focused-flow-mobile.json' : '/lottie-files/stay-focused-flow.json'"
             )
           .card-mini-title {{ $t('overviewPage.consolidateWorkflowAffine') }}
@@ -41,10 +38,7 @@
           .card-wave-wrapper
             //- .card-bg
             client-only
-              vue3-lottie.card-wave(
-                :autoPlay="!$device.isMobile"
-                :playOnHover="!$device.isMobile"
-                loop
+              lottie-hover-animation.card-wave(
                 animationLink="/lottie-files/local-first.json"
               )
           .card-cover