feat(home): 为箭头SVG添加流动光效动画

为首页的五个箭头SVG文件添加流动光效动画，增强视觉吸引力。通过CSS样式、SVG滤镜和动画元素实现，并包含减少运动偏好支持。

app/assets/svg/home/arrow.svg

@@ -1,9 +1,54 @@
 <svg width="514" height="347" viewBox="0 0 514 347" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .flowCore,
+  .flowGlow {
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .flowCore {
+    stroke: rgba(255, 255, 255, 0.88);
+  }
+
+  .flowGlow {
+    stroke: rgba(150, 215, 255, 0.32);
+    filter: url(#flowBlur);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .flowGroup {
+      display: none;
+    }
+  }
+</style>
 <path d="M252.5 0V19.5C252.5 47.1142 230.114 69.5 202.5 69.5H124.5C69.2715 69.5 24.5 114.272 24.5 169.5V338.5" stroke="url(#paint0_linear_378_1168)" stroke-width="10"/>
+<g class="flowGroup" mask="url(#flowMaskY)">
+<path class="flowGlow" d="M252.5 0V19.5C252.5 47.1142 230.114 69.5 202.5 69.5H124.5C69.2715 69.5 24.5 114.272 24.5 169.5V338.5" stroke-width="16"/>
+<path class="flowCore" d="M252.5 0V19.5C252.5 47.1142 230.114 69.5 202.5 69.5H124.5C69.2715 69.5 24.5 114.272 24.5 169.5V338.5" stroke-width="8"/>
+</g>
 <path d="M24.5 346.5L45.7176 326.25H3.28238L24.5 346.5Z" fill="#B6B4FF"/>
 <path d="M261 0.5V20C261 47.6142 283.386 70 311 70H389C444.228 70 489 114.772 489 170V339" stroke="url(#paint1_linear_378_1168)" stroke-width="10"/>
+<g class="flowGroup" mask="url(#flowMaskY)">
+<path class="flowGlow" d="M261 0.5V20C261 47.6142 283.386 70 311 70H389C444.228 70 489 114.772 489 170V339" stroke-width="16"/>
+<path class="flowCore" d="M261 0.5V20C261 47.6142 283.386 70 311 70H389C444.228 70 489 114.772 489 170V339" stroke-width="8"/>
+</g>
 <path d="M489 347L467.782 326.75H510.218L489 347Z" fill="#B6B4FF"/>
 <defs>
+<linearGradient id="flowSweepY" x1="0" y1="0" x2="0" y2="1">
+<stop offset="0" stop-color="white" stop-opacity="0"/>
+<stop offset="0.42" stop-color="white" stop-opacity="0"/>
+<stop offset="0.5" stop-color="white" stop-opacity="1"/>
+<stop offset="0.58" stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<mask id="flowMaskY" maskUnits="userSpaceOnUse">
+<rect x="-40" y="-280" width="594" height="280" fill="url(#flowSweepY)">
+<animate attributeName="y" from="-280" to="347" dur="2.2s" repeatCount="indefinite"/>
+</rect>
+</mask>
+<filter id="flowBlur" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
+<feGaussianBlur stdDeviation="2"/>
+</filter>
 <linearGradient id="paint0_linear_378_1168" x1="153" y1="-152.5" x2="140.5" y2="449" gradientUnits="userSpaceOnUse">
 <stop stop-color="#564EFF"/>
 <stop offset="1" stop-color="#D2D0FF"/>

app/assets/svg/home/arrow1.svg

@@ -1,7 +1,48 @@
 <svg width="49" height="70" viewBox="0 0 49 70" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .flowCore,
+  .flowGlow {
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .flowCore {
+    stroke: rgba(255, 255, 255, 0.9);
+  }
+
+  .flowGlow {
+    stroke: rgba(150, 215, 255, 0.34);
+    filter: url(#flowBlur);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .flowGroup {
+      display: none;
+    }
+  }
+</style>
 <path d="M25 0V63.5" stroke="url(#paint0_linear_378_1219)" stroke-width="10"/>
+<g class="flowGroup" mask="url(#flowMaskY)">
+<path class="flowGlow" d="M25 0V63.5" stroke-width="16"/>
+<path class="flowCore" d="M25 0V63.5" stroke-width="8"/>
+</g>
 <path d="M24.5 69.5L45.7176 49.25H3.28238L24.5 69.5Z" fill="#B6B4FF"/>
 <defs>
+<linearGradient id="flowSweepY" x1="0" y1="0" x2="0" y2="1">
+<stop offset="0" stop-color="white" stop-opacity="0"/>
+<stop offset="0.42" stop-color="white" stop-opacity="0"/>
+<stop offset="0.5" stop-color="white" stop-opacity="1"/>
+<stop offset="0.58" stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<mask id="flowMaskY" maskUnits="userSpaceOnUse">
+<rect x="-20" y="-140" width="89" height="140" fill="url(#flowSweepY)">
+<animate attributeName="y" from="-140" to="70" dur="1.25s" repeatCount="indefinite"/>
+</rect>
+</mask>
+<filter id="flowBlur" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
+<feGaussianBlur stdDeviation="2"/>
+</filter>
 <linearGradient id="paint0_linear_378_1219" x1="25.5636" y1="-103.31" x2="-66.074" y2="-46.3816" gradientUnits="userSpaceOnUse">
 <stop stop-color="#564EFF"/>
 <stop offset="1" stop-color="#D2D0FF"/>

app/assets/svg/home/arrow2.svg

@@ -1,7 +1,48 @@
 <svg width="49" height="109" viewBox="0 0 49 109" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .flowCore,
+  .flowGlow {
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .flowCore {
+    stroke: rgba(255, 255, 255, 0.9);
+  }
+
+  .flowGlow {
+    stroke: rgba(150, 215, 255, 0.34);
+    filter: url(#flowBlur);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .flowGroup {
+      display: none;
+    }
+  }
+</style>
 <path d="M25 0V102.5" stroke="url(#paint0_linear_378_1216)" stroke-width="10"/>
+<g class="flowGroup" mask="url(#flowMaskY)">
+<path class="flowGlow" d="M25 0V102.5" stroke-width="16"/>
+<path class="flowCore" d="M25 0V102.5" stroke-width="8"/>
+</g>
 <path d="M24.5 108.5L45.7176 88.25H3.28238L24.5 108.5Z" fill="#B6B4FF"/>
 <defs>
+<linearGradient id="flowSweepY" x1="0" y1="0" x2="0" y2="1">
+<stop offset="0" stop-color="white" stop-opacity="0"/>
+<stop offset="0.42" stop-color="white" stop-opacity="0"/>
+<stop offset="0.5" stop-color="white" stop-opacity="1"/>
+<stop offset="0.58" stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<mask id="flowMaskY" maskUnits="userSpaceOnUse">
+<rect x="-20" y="-200" width="89" height="200" fill="url(#flowSweepY)">
+<animate attributeName="y" from="-200" to="109" dur="1.45s" repeatCount="indefinite"/>
+</rect>
+</mask>
+<filter id="flowBlur" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
+<feGaussianBlur stdDeviation="2"/>
+</filter>
 <linearGradient id="paint0_linear_378_1216" x1="25.5636" y1="-64.3095" x2="-66.074" y2="-7.3816" gradientUnits="userSpaceOnUse">
 <stop stop-color="#564EFF"/>
 <stop offset="1" stop-color="#D2D0FF"/>

app/assets/svg/home/arrow3.svg

@@ -1,7 +1,48 @@
 <svg width="49" height="220" viewBox="0 0 49 220" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .flowCore,
+  .flowGlow {
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .flowCore {
+    stroke: rgba(255, 255, 255, 0.88);
+  }
+
+  .flowGlow {
+    stroke: rgba(150, 215, 255, 0.3);
+    filter: url(#flowBlur);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .flowGroup {
+      display: none;
+    }
+  }
+</style>
 <path d="M25 0V203.5" stroke="url(#paint0_linear_378_1222)" stroke-width="10"/>
+<g class="flowGroup" mask="url(#flowMaskY)">
+<path class="flowGlow" d="M25 0V203.5" stroke-width="16"/>
+<path class="flowCore" d="M25 0V203.5" stroke-width="8"/>
+</g>
 <path d="M24.5 219.5L45.7176 199.25H3.28238L24.5 219.5Z" fill="#B6B4FF"/>
 <defs>
+<linearGradient id="flowSweepY" x1="0" y1="0" x2="0" y2="1">
+<stop offset="0" stop-color="white" stop-opacity="0"/>
+<stop offset="0.42" stop-color="white" stop-opacity="0"/>
+<stop offset="0.5" stop-color="white" stop-opacity="1"/>
+<stop offset="0.58" stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<mask id="flowMaskY" maskUnits="userSpaceOnUse">
+<rect x="-20" y="-320" width="89" height="320" fill="url(#flowSweepY)">
+<animate attributeName="y" from="-320" to="220" dur="1.85s" repeatCount="indefinite"/>
+</rect>
+</mask>
+<filter id="flowBlur" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
+<feGaussianBlur stdDeviation="2"/>
+</filter>
 <linearGradient id="paint0_linear_378_1222" x1="25.5636" y1="-75.3098" x2="-66.0743" y2="-18.382" gradientUnits="userSpaceOnUse">
 <stop stop-color="#564EFF"/>
 <stop offset="1" stop-color="#D2D0FF"/>

app/assets/svg/home/arrow4.svg

@@ -1,7 +1,48 @@
 <svg width="90" height="49" viewBox="0 0 90 49" fill="none" xmlns="http://www.w3.org/2000/svg">
+<style>
+  .flowCore,
+  .flowGlow {
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .flowCore {
+    stroke: rgba(255, 255, 255, 0.9);
+  }
+
+  .flowGlow {
+    stroke: rgba(150, 215, 255, 0.32);
+    filter: url(#flowBlur);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .flowGroup {
+      display: none;
+    }
+  }
+</style>
 <path d="M90 24L16 24" stroke="url(#paint0_linear_378_1225)" stroke-width="10"/>
+<g class="flowGroup" mask="url(#flowMaskX)">
+<path class="flowGlow" d="M90 24L16 24" stroke-width="16"/>
+<path class="flowCore" d="M90 24L16 24" stroke-width="8"/>
+</g>
 <path d="M0 24.5L20.25 3.28238L20.25 45.7176L0 24.5Z" fill="#B6B4FF"/>
 <defs>
+<linearGradient id="flowSweepX" x1="0" y1="0" x2="1" y2="0">
+<stop offset="0" stop-color="white" stop-opacity="0"/>
+<stop offset="0.42" stop-color="white" stop-opacity="0"/>
+<stop offset="0.5" stop-color="white" stop-opacity="1"/>
+<stop offset="0.58" stop-color="white" stop-opacity="0"/>
+<stop offset="1" stop-color="white" stop-opacity="0"/>
+</linearGradient>
+<mask id="flowMaskX" maskUnits="userSpaceOnUse">
+<rect x="90" y="-30" width="180" height="109" fill="url(#flowSweepX)">
+<animate attributeName="x" from="90" to="-180" dur="1.2s" repeatCount="indefinite"/>
+</rect>
+</mask>
+<filter id="flowBlur" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
+<feGaussianBlur stdDeviation="2"/>
+</filter>
 <linearGradient id="paint0_linear_378_1225" x1="106.89" y1="24.5636" x2="54.6337" y2="-2.85795" gradientUnits="userSpaceOnUse">
 <stop stop-color="#564EFF"/>
 <stop offset="1" stop-color="#D2D0FF"/>