FxHomeFeatureBefore 光效

首页 Feature 卡片的鼠标追踪光晕效果，在暗色模式下尤为绚丽。

效果描述

在首页 Feature 区域的每个卡片上：

• 每张卡片被分配一个不同的颜色（红、绿、品红、青、橙、蓝等）
• 鼠标移入卡片时，以鼠标位置为中心产生一个 径向渐变光晕
• 光晕颜色与卡片分配的颜色一致
• 光晕通过 CSS 变量 --x 和 --y 控制位置

启用

此效果默认启用，无需额外配置。仅在暗色模式下可见。

技术细节

• 使用渲染函数组件（defineComponent + render），无模板
• 通过 home-features-before 插槽注入
• 监听每个 .VPFeature 卡片的 mousemove 事件
• 设置 CSS 变量 --x（水平）和 --y（垂直）为鼠标相对位置
• 配合 custom.css 中的 ::before 伪元素实现光晕渲染：

/* custom.css 中的配合样式 */
.dark .VPHomeFeatures .VPFeature::before {
  content: '';
  background: radial-gradient(var(--color), transparent, transparent);
  left: var(--x);
  top: var(--y);
  opacity: 0;
  transition: opacity 1s;
}

.dark .VPHomeFeatures .VPFeature:hover::before {
  opacity: 1;
  transition: opacity 0.3s;
}

卡片颜色分配

组件按顺序为卡片分配以下颜色：

序号	颜色
1-4	#f00, #0f0, #f0f, #0ff
5	#FE7300 (橙)
6	#008EFF (蓝)
7+	多个红色色调

如果你的 Feature 列表超过 8 个，颜色会循环使用。