fancy-ui-craft

用途

fancy-ui-craft 是一个面向 Vue 3 的 UI 视觉效果技能，目标是把“深度感”集中用在一个值得精心处理的关键界面上，而不是到处堆叠特效。资料明确说明：表格、设置表单和列表应保持扁平，使用 PrimeVue Aura 加 @aura-design-tokens；深度效果只用于 hero、特色指标或单张推广卡片等少数位置。

主要能力

技能包含四类可选效果，只安装并使用实际需要的那一部分：

鼠标跟随光斑（spotlight）：基于 @vueuse/core 的 useMouseInElement 获取鼠标在元素内的坐标，通过 CSS 变量（--mouse-x、--mouse-y、--spotlight-opacity）驱动一个 radial-gradient 覆盖层。光晕颜色取自 @aura-design-tokens 的 var(--app-spotlight)，组件中不得写入十六进制色值。
毛玻璃面板（glass）：使用玻璃令牌 var(--app-glass)、var(--app-glass-border)、var(--app-glass-rim)，配合 backdrop-filter: blur(16px) saturate(180%) 和圆角、内描边阴影。资料强调每个视图只用一个玻璃面板，不要堆叠多层模糊。
3D 点缀：使用 @tresjs/core，仅在 hero 或关键指标上放置最多一个对象，画布需固定高度；当 prefers-reduced-motion: reduce 匹配时停止旋转；材质颜色取自 primary 令牌而非新的十六进制色值。
Lottie 状态动画：使用 @lottiefiles/dotlottie-vue 播放仓库内的 .lottie 文件（如 src/assets/ 下），用于成功、加载或空状态；不得将 src 指向第三方主机；装饰性动画不得在用户停留的页面上循环，加载状态可循环直到数据到达。

使用方式

按需安装依赖：

npm install @vueuse/core
npm install @tresjs/core three
npm install @lottiefiles/dotlottie-vue

光斑示例（节选）：

<script setup>
import { ref } from 'vue';
import { useMouseInElement } from '@vueuse/core';

const cardRef = ref(null);
const { elementX, elementY, isOutside } = useMouseInElement(cardRef);
</script>

<template>
  <div
    ref="cardRef"
    class="spotlight-card"
    :style="{
      '--mouse-x': `${elementX}px`,
      '--mouse-y': `${elementY}px`,
      '--spotlight-opacity': isOutside ? '0' : '1'
    }"
  >
    <div class="spotlight-overlay" />
    <div class="card-content">
      <slot />
    </div>
  </div>
</template>

玻璃面板样式：

.glass-panel {
  background: var(--app-glass);
  backdrop-filter: blur(16px) saturate(180%);
  border: 1px solid var(--app-glass-border);
  box-shadow: inset 0 1px 0 0 var(--app-glass-rim);
  border-radius: 16px;
}

适用场景

hero 区域需要光斑或玻璃质感时。
特色指标或单张推广卡片需要聚焦效果时。
空状态、加载状态或成功状态需要一段短动画时。
hero 需要一个 3D 点缀时。

限制

表格、设置表单、列表不适用，应保持扁平并使用 PrimeVue Aura 与设计令牌。
每个视图只允许一个玻璃面板；3D 点缀每个页面最多一个对象。
不得在组件中硬编码颜色，必须使用设计令牌。
Lottie 文件必须位于仓库内，不能引用第三方主机；装饰动画不得循环。
必须用 @visual-verification 对页面截图核验；若光斑、玻璃或 3D 导致文字对比度不达标或干扰任务操作，应移除对应效果。
资料未提供该技能的收费、价格、平台兼容范围、性能指标或具体安装后配置步骤，这些信息暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制