feat(docs): hero 再升级科技感——流光标题、鼠标光斑、卡片光晕、数据指标带

- 标题流光渐变动画；hero 鼠标跟随光斑、特性卡光标跟随渐变描边/光晕
- 新增数据指标带（语言/工作台/平台/开源），渐变数字
- stats 文案纳入 i18n 中英双语

Author: qianmoQ

docs/src/i18n.ts

@@ -37,6 +37,12 @@ const messages = {
       macNote: 'Apple Silicon 与 Intel',
       allVersions: '查看全部历史版本与安装包'
     },
+    stats: {
+      languages: '数十种', languagesLabel: '支持语言',
+      workbenches: '6', workbenchesLabel: '核心工作台',
+      platforms: '2', platformsLabel: '跨平台支持',
+      open: '100%', openLabel: '开源免费'
+    },
     releaseList: {title: '发布日志', intro: '每个版本的更新内容如下，点击查看详情。'},
     footer: {download: '下载', releases: '发布日志'}
   },
@@ -73,6 +79,12 @@ const messages = {
       macNote: 'Apple Silicon & Intel',
       allVersions: 'Browse all releases and installers'
     },
+    stats: {
+      languages: 'Dozens', languagesLabel: 'Languages',
+      workbenches: '6', workbenchesLabel: 'Workbenches',
+      platforms: '2', platformsLabel: 'Platforms',
+      open: '100%', openLabel: 'Open source'
+    },
     releaseList: {title: 'Releases', intro: 'Update notes for each version. Click to view details.'},
     footer: {download: 'Download', releases: 'Releases'}
   }

docs/src/pages/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <!-- Hero（始终深色，营造科技感） -->
-  <section class="relative isolate overflow-hidden bg-slate-950 text-white">
+  <section class="relative isolate overflow-hidden bg-slate-950 text-white" @mousemove="onHeroMove">
     <!-- 极光光晕 -->
     <div class="pointer-events-none absolute inset-0 -z-10">
       <div class="absolute -top-40 left-1/4 h-[28rem] w-[28rem] rounded-full bg-brand-600/30 blur-[120px] animate-blob"></div>
@@ -9,8 +9,10 @@
     </div>
     <!-- 网格 -->
     <div class="pointer-events-none absolute inset-0 -z-10 bg-[linear-gradient(to_right,rgba(255,255,255,.05)_1px,transparent_1px),linear-gradient(to_bottom,rgba(255,255,255,.05)_1px,transparent_1px)] bg-[size:44px_44px] [mask-image:radial-gradient(ellipse_at_50%_30%,black,transparent_70%)]"></div>
+    <!-- 鼠标跟随光斑 -->
+    <div ref="spot" class="spotlight-bg pointer-events-none absolute inset-0 -z-10"></div>
 
-    <div class="max-w-6xl mx-auto px-5 pt-24 pb-28 grid lg:grid-cols-2 gap-14 items-center">
+    <div class="max-w-6xl mx-auto px-5 pt-24 pb-20 grid lg:grid-cols-2 gap-14 items-center">
       <div>
         <RouterLink v-if="latestRelease" :to="`/release/${latestRelease.version}`"
                     class="inline-flex items-center gap-2 rounded-full border border-white/15 bg-white/5 px-3.5 py-1.5 text-sm text-slate-200 backdrop-blur hover:border-brand-400/60 transition-colors">
@@ -24,7 +26,7 @@
 
         <h1 class="mt-7 text-[3rem] leading-[1.05] sm:text-[4.25rem] font-extrabold tracking-tight">
           <span class="text-white">{{ t('hero.title1') }}</span><br/>
-          <span class="bg-gradient-to-r from-brand-300 via-violet-300 to-cyan-300 bg-clip-text text-transparent">{{ t('hero.title2') }}</span>
+          <span class="animate-gradient bg-gradient-to-r from-brand-300 via-cyan-300 via-violet-300 to-brand-300 bg-clip-text text-transparent drop-shadow-[0_2px_20px_rgba(129,140,248,.35)]">{{ t('hero.title2') }}</span>
         </h1>
         <p class="mt-6 max-w-lg text-lg text-slate-300/90 leading-relaxed">{{ t('hero.subtitle') }}</p>
 
@@ -38,6 +40,14 @@
             {{ t('hero.github') }}
           </a>
         </div>
+
+        <!-- 数据指标 -->
+        <div class="mt-12 grid grid-cols-4 gap-4 max-w-lg">
+          <div v-for="s in stats" :key="s.label">
+            <div class="text-2xl sm:text-3xl font-extrabold bg-gradient-to-br from-white to-slate-400 bg-clip-text text-transparent">{{ s.value }}</div>
+            <div class="mt-1 text-xs text-slate-400">{{ s.label }}</div>
+          </div>
+        </div>
       </div>
 
       <div class="lg:pl-4">
@@ -61,16 +71,20 @@
     </div>
     <div class="grid sm:grid-cols-2 lg:grid-cols-3 gap-5">
       <div v-for="f in features" :key="f.key"
-           class="group relative p-6 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/[.03] hover:-translate-y-1 hover:shadow-soft dark:hover:bg-white/[.06] transition-all duration-300">
-        <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500/15 to-violet-500/15 text-brand-600 dark:text-brand-300 flex items-center justify-center ring-1 ring-brand-500/20" v-html="f.icon"></div>
-        <h3 class="mt-4 font-semibold text-lg text-slate-900 dark:text-white">{{ t(`features.items.${f.key}.title`) }}</h3>
-        <p class="mt-2 text-slate-600 dark:text-slate-400 leading-relaxed">{{ t(`features.items.${f.key}.desc`) }}</p>
+           class="spotlight-card group p-6 rounded-2xl border border-slate-200 dark:border-white/10 bg-white dark:bg-white/[.03] hover:-translate-y-1 transition-all duration-300"
+           @mousemove="onCardMove">
+        <div class="relative z-10">
+          <div class="w-11 h-11 rounded-xl bg-gradient-to-br from-brand-500/15 to-violet-500/15 text-brand-600 dark:text-brand-300 flex items-center justify-center ring-1 ring-brand-500/20" v-html="f.icon"></div>
+          <h3 class="mt-4 font-semibold text-lg text-slate-900 dark:text-white">{{ t(`features.items.${f.key}.title`) }}</h3>
+          <p class="mt-2 text-slate-600 dark:text-slate-400 leading-relaxed">{{ t(`features.items.${f.key}.desc`) }}</p>
+        </div>
       </div>
     </div>
   </section>
 </template>
 
 <script setup lang="ts">
+import {computed, ref} from 'vue'
 import {useI18n} from 'vue-i18n'
 import CodeWindow from '../components/CodeWindow.vue'
 import {latestRelease} from '../content/releases'
@@ -80,6 +94,28 @@ const {t} = useI18n()
 const langArr = ['Python', 'Rust', 'Go', 'JavaScript', 'TypeScript', 'Java', 'C', 'C++', 'Ruby', 'PHP', 'Kotlin', 'Swift']
 const marquee = [...langArr, ...langArr]
 
+const stats = computed(() => [
+  {value: t('stats.languages'), label: t('stats.languagesLabel')},
+  {value: t('stats.workbenches'), label: t('stats.workbenchesLabel')},
+  {value: t('stats.platforms'), label: t('stats.platformsLabel')},
+  {value: t('stats.open'), label: t('stats.openLabel')}
+])
+
+// 鼠标跟随光效（仅客户端事件触发）
+const spot = ref<HTMLElement | null>(null)
+const onHeroMove = (e: MouseEvent) => {
+  const el = e.currentTarget as HTMLElement
+  const r = el.getBoundingClientRect()
+  spot.value?.style.setProperty('--mx', `${e.clientX - r.left}px`)
+  spot.value?.style.setProperty('--my', `${e.clientY - r.top}px`)
+}
+const onCardMove = (e: MouseEvent) => {
+  const el = e.currentTarget as HTMLElement
+  const r = el.getBoundingClientRect()
+  el.style.setProperty('--mx', `${e.clientX - r.left}px`)
+  el.style.setProperty('--my', `${e.clientY - r.top}px`)
+}
+
 const i = (path: string) =>
   `<svg class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${path}</svg>`
 

docs/src/styles/main.css

@@ -63,8 +63,49 @@ body {
 @property --a { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
 @keyframes spin-border { to { --a: 360deg; } }
 
+/* 标题流光渐变 */
+@keyframes gradient-move { to { background-position: 200% center; } }
+.animate-gradient {
+  background-size: 200% auto;
+  animation: gradient-move 6s linear infinite;
+}
+
+/* 鼠标跟随光斑（hero）：由 JS 设置 --mx/--my */
+.spotlight-bg {
+  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(99, 102, 241, .18), transparent 60%);
+  transition: background .15s ease-out;
+}
+
+/* 光晕跟随卡片：hover 时跟随光标的渐变描边 */
+.spotlight-card { position: relative; }
+.spotlight-card::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  padding: 1px;
+  background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 50%), rgba(129, 140, 248, .8), transparent 60%);
+  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
+  -webkit-mask-composite: xor;
+  mask-composite: exclude;
+  opacity: 0;
+  transition: opacity .3s;
+}
+.spotlight-card:hover::before { opacity: 1; }
+.spotlight-card::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+  border-radius: inherit;
+  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(99, 102, 241, .12), transparent 60%);
+  opacity: 0;
+  transition: opacity .3s;
+  pointer-events: none;
+}
+.spotlight-card:hover::after { opacity: 1; }
+
 @media (prefers-reduced-motion: reduce) {
-  .animate-blob, .animate-float, .animate-spin-slow, .animate-marquee, .shimmer::after, .glow-border::before {
+  .animate-blob, .animate-float, .animate-spin-slow, .animate-marquee, .animate-gradient, .shimmer::after, .glow-border::before {
     animation: none !important;
   }
 }