docs: 新增西班牙语和日语README并优化多语言文档

新增README-ES.md（西班牙语）和README-JA.md（日语）文档，完善多语言README互链。优化各语言README徽章、技术栈、外链格式及语言切换区，提升文档一致性与可读性。

src/components/ui/bg-stars/StarsBackground.vue

@@ -94,7 +94,7 @@
   // For slot content
   defineSlots()
 
-  function generateStars(count: number, starColor: string) {
+  const generateStars = (count: number, starColor: string) => {
     const shadows: string[] = []
     for (let i = 0; i < count; i++) {
       const x = Math.floor(Math.random() * 4000) - 2000
@@ -110,7 +110,7 @@
   const springX = useSpring(offsetX, props.transition)
   const springY = useSpring(offsetY, props.transition)
 
-  function handleMouseMove(e: MouseEvent) {
+  const handleMouseMove = (e: MouseEvent) => {
     const centerX = window.innerWidth / 2
     const centerY = window.innerHeight / 2
     const newOffsetX = -(e.clientX - centerX) * props.factor

src/components/ui/collapsible/Collapsible.vue

@@ -0,0 +1,15 @@
+<template>
+  <CollapsibleRoot v-slot="slotProps" data-slot="collapsible" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </CollapsibleRoot>
+</template>
+
+<script setup lang="ts">
+  import type { CollapsibleRootEmits, CollapsibleRootProps } from 'reka-ui'
+  import { CollapsibleRoot, useForwardPropsEmits } from 'reka-ui'
+
+  const props = defineProps<CollapsibleRootProps>()
+  const emits = defineEmits<CollapsibleRootEmits>()
+
+  const forwarded = useForwardPropsEmits(props, emits)
+</script>

src/components/ui/collapsible/CollapsibleContent.vue

@@ -0,0 +1,12 @@
+<template>
+  <CollapsibleContent data-slot="collapsible-content" v-bind="props">
+    <slot />
+  </CollapsibleContent>
+</template>
+
+<script setup lang="ts">
+  import type { CollapsibleContentProps } from 'reka-ui'
+  import { CollapsibleContent } from 'reka-ui'
+
+  const props = defineProps<CollapsibleContentProps>()
+</script>

src/components/ui/collapsible/CollapsibleTrigger.vue

@@ -0,0 +1,12 @@
+<template>
+  <CollapsibleTrigger data-slot="collapsible-trigger" v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>
+
+<script setup lang="ts">
+  import type { CollapsibleTriggerProps } from 'reka-ui'
+  import { CollapsibleTrigger } from 'reka-ui'
+
+  const props = defineProps<CollapsibleTriggerProps>()
+</script>

src/components/ui/collapsible/index.ts

@@ -0,0 +1,3 @@
+export { default as Collapsible } from './Collapsible.vue'
+export { default as CollapsibleContent } from './CollapsibleContent.vue'
+export { default as CollapsibleTrigger } from './CollapsibleTrigger.vue'

src/components/ui/particles-bg/ParticlesBg.vue

@@ -68,45 +68,7 @@
     return `${r} ${g} ${b}`
   })
 
-  onMounted(() => {
-    if (canvasRef.value) {
-      context.value = canvasRef.value.getContext('2d')
-    }
-
-    initCanvas()
-    animate()
-    window.addEventListener('resize', initCanvas)
-  })
-
-  onBeforeUnmount(() => {
-    window.removeEventListener('resize', initCanvas)
-  })
-
-  watch([mouseX, mouseY], () => {
-    onMouseMove()
-  })
-
-  function initCanvas() {
-    resizeCanvas()
-    drawParticles()
-  }
-
-  function onMouseMove() {
-    if (canvasRef.value) {
-      const rect = canvasRef.value.getBoundingClientRect()
-      const { w, h } = canvasSize
-      const x = mouseX.value - rect.left - w / 2
-      const y = mouseY.value - rect.top - h / 2
-
-      const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2
-      if (inside) {
-        mouse.x = x
-        mouse.y = y
-      }
-    }
-  }
-
-  function resizeCanvas() {
+  const resizeCanvas = () => {
     if (canvasContainerRef.value && canvasRef.value && context.value) {
       circles.value.length = 0
       canvasSize.w = canvasContainerRef.value.offsetWidth
@@ -119,7 +81,7 @@
     }
   }
 
-  function circleParams(): Circle {
+  const circleParams = (): Circle => {
     const x = Math.floor(Math.random() * canvasSize.w)
     const y = Math.floor(Math.random() * canvasSize.h)
     const translateX = 0
@@ -144,7 +106,7 @@
     }
   }
 
-  function drawCircle(circle: Circle, update = false) {
+  const drawCircle = (circle: Circle, update = false) => {
     if (context.value) {
       const { x, y, translateX, translateY, size, alpha } = circle
       context.value.translate(translateX, translateY)
@@ -160,13 +122,13 @@
     }
   }
 
-  function clearContext() {
+  const clearContext = () => {
     if (context.value) {
       context.value.clearRect(0, 0, canvasSize.w, canvasSize.h)
     }
   }
 
-  function drawParticles() {
+  const drawParticles = () => {
     clearContext()
     const particleCount = props.quantity
     for (let i = 0; i < particleCount; i++) {
@@ -175,12 +137,32 @@
     }
   }
 
-  function remapValue(value: number, start1: number, end1: number, start2: number, end2: number): number {
+  const initCanvas = () => {
+    resizeCanvas()
+    drawParticles()
+  }
+
+  const onMouseMove = () => {
+    if (canvasRef.value) {
+      const rect = canvasRef.value.getBoundingClientRect()
+      const { w, h } = canvasSize
+      const x = mouseX.value - rect.left - w / 2
+      const y = mouseY.value - rect.top - h / 2
+
+      const inside = x < w / 2 && x > -w / 2 && y < h / 2 && y > -h / 2
+      if (inside) {
+        mouse.x = x
+        mouse.y = y
+      }
+    }
+  }
+
+  const remapValue = (value: number, start1: number, end1: number, start2: number, end2: number): number => {
     const remapped = ((value - start1) * (end2 - start2)) / (end1 - start1) + start2
     return remapped > 0 ? remapped : 0
   }
 
-  function animate() {
+  const animate = () => {
     clearContext()
     circles.value.forEach((circle, i) => {
       // Handle the alpha value
@@ -235,4 +217,22 @@
     })
     window.requestAnimationFrame(animate)
   }
+
+  onMounted(() => {
+    if (canvasRef.value) {
+      context.value = canvasRef.value.getContext('2d')
+    }
+
+    initCanvas()
+    animate()
+    window.addEventListener('resize', initCanvas)
+  })
+
+  onBeforeUnmount(() => {
+    window.removeEventListener('resize', initCanvas)
+  })
+
+  watch([mouseX, mouseY], () => {
+    onMouseMove()
+  })
 </script>