feat: 添加 InspiraUI 组件和模式背景功能，更新依赖项

src/components/InspiraUI/pattern-background/PatternBackground.vue

@@ -0,0 +1,138 @@
+<template>
+  <div
+    :class="
+      cn(patternBackgroundVariants({ variant, size }), ` ${animate ? 'move move-' + direction : ''} `, props.class)
+    "
+  >
+    <div
+      :class="
+        cn(
+          'absolute pointer-events-none inset-0 flex items-center justify-center',
+          patternBackgroundMaskVariants({ mask }),
+        )
+      "
+    ></div>
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { cn } from '@/shadcn/lib/utils';
+import type { BaseProps as Props } from '.';
+import {
+  PATTERN_BACKGROUND_DIRECTION,
+  PATTERN_BACKGROUND_SPEED,
+  PATTERN_BACKGROUND_VARIANT,
+  patternBackgroundMaskVariants,
+  patternBackgroundVariants,
+} from '.';
+import { computed } from 'vue';
+
+const props = withDefaults(defineProps<Props>(), {
+  direction: () => PATTERN_BACKGROUND_DIRECTION.Top,
+  variant: () => PATTERN_BACKGROUND_VARIANT.Grid,
+  speed: () => PATTERN_BACKGROUND_SPEED.Default,
+  size: undefined,
+  mask: undefined,
+});
+
+const durationFormSpeed = computed(() => `${props.speed}ms`);
+</script>
+
+<style scoped>
+@keyframes to-top {
+  0% {
+    background-position: 0 100%;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+@keyframes to-bottom {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 0 100%;
+  }
+}
+@keyframes to-right {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+@keyframes to-left {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+@keyframes to-top-right {
+  0% {
+    background-position: 0 100%;
+  }
+  100% {
+    background-position: 100% 0;
+  }
+}
+@keyframes to-top-left {
+  0% {
+    background-position: 100% 100%;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+@keyframes to-bottom-right {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 100% 100%;
+  }
+}
+@keyframes to-bottom-left {
+  0% {
+    background-position: 100% 0;
+  }
+  100% {
+    background-position: 0 100%;
+  }
+}
+
+.move {
+  animation-duration: v-bind(durationFormSpeed);
+  animation-timing-function: linear;
+  animation-iteration-count: infinite;
+}
+
+.move-top {
+  animation-name: to-top;
+}
+.move-bottom {
+  animation-name: to-bottom;
+}
+.move-right {
+  animation-name: to-right;
+}
+.move-left {
+  animation-name: to-left;
+}
+.move-top-right {
+  animation-name: to-top-right;
+}
+.move-top-left {
+  animation-name: to-top-left;
+}
+.move-bottom-right {
+  animation-name: to-bottom-right;
+}
+.move-bottom-left {
+  animation-name: to-bottom-left;
+}
+</style>

src/components/InspiraUI/pattern-background/index.ts

@@ -0,0 +1,87 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "vue";
+
+type ObjectValues<T> = T[keyof T];
+
+export const PATTERN_BACKGROUND_DIRECTION = {
+  Top: "top",
+  Bottom: "bottom",
+  Left: "left",
+  Right: "right",
+  TopLeft: "top-left",
+  TopRight: "top-right",
+  BottomLeft: "bottom-left",
+  BottomRight: "bottom-right",
+} as const;
+
+export type PatternBackgroundDirection = ObjectValues<typeof PATTERN_BACKGROUND_DIRECTION>;
+
+export interface BaseProps {
+  class?: HTMLAttributes["class"];
+  animate?: boolean;
+  direction?: PatternBackgroundDirection;
+  variant?: PatternBackgroundVariants["variant"];
+  size?: PatternBackgroundVariants["size"];
+  mask?: PatternBackgroundMaskVariants["mask"];
+  speed?: ObjectValues<typeof PATTERN_BACKGROUND_SPEED>;
+}
+
+export const PATTERN_BACKGROUND_VARIANT = {
+  Grid: "grid",
+  Dot: "dot",
+  BigDot: "big-dot",
+} as const;
+
+export const PATTERN_BACKGROUND_SPEED = {
+  Default: 10000,
+  Slow: 25000,
+  Fast: 5000,
+} as const;
+
+export const patternBackgroundVariants = cva("relative text-clip", {
+  variants: {
+    variant: {
+      [PATTERN_BACKGROUND_VARIANT.Grid]:
+        "bg-[linear-gradient(to_right,hsl(var(--foreground)/0.3)_1px,transparent_1px),linear-gradient(to_bottom,hsl(var(--foreground)/0.3)_1px,transparent_1px)]",
+      [PATTERN_BACKGROUND_VARIANT.Dot]:
+        "bg-[radial-gradient(hsl(var(--foreground)/0.3)_1px,transparent_1px)]",
+      [PATTERN_BACKGROUND_VARIANT.BigDot]:
+        "bg-[radial-gradient(hsl(var(--foreground)/0.3)_3px,transparent_3px)]",
+    },
+    size: {
+      xs: "bg-[size:8px_8px]",
+      sm: "bg-[size:16px_16px]",
+      md: "bg-[size:24px_24px]",
+      lg: "bg-[size:32px_32px]",
+    },
+  },
+  defaultVariants: {
+    variant: "grid",
+    size: "md",
+  },
+});
+
+export type PatternBackgroundVariants = VariantProps<typeof patternBackgroundVariants>;
+
+export const PATTERN_BACKGROUND_MASK = {
+  Ellipse: "ellipse",
+  EllipseTop: "ellipse-top",
+} as const;
+
+export const patternBackgroundMaskVariants = cva("bg-background", {
+  variants: {
+    mask: {
+      [PATTERN_BACKGROUND_MASK.Ellipse]:
+        "[mask-image:radial-gradient(ellipse_at_center,transparent,black_80%)]",
+      [PATTERN_BACKGROUND_MASK.EllipseTop]:
+        "[mask-image:radial-gradient(ellipse_at_top,transparent,black_80%)]",
+    },
+  },
+  defaultVariants: {
+    mask: "ellipse",
+  },
+});
+
+export type PatternBackgroundMaskVariants = VariantProps<typeof patternBackgroundMaskVariants>;
+
+export { default as PatternBackground } from "./PatternBackground.vue";

src/components/InspiraUI/spline/ParentSize.vue

@@ -0,0 +1,80 @@
+<!-- ParentSize.vue -->
+<template>
+  <div ref="target" :style="mergedStyles" :class="cn('w-full h-full', props.class)" v-bind="attrsWithoutClassAndStyle">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, computed, useAttrs } from 'vue';
+import { useDebounceFn, useResizeObserver } from '@vueuse/core';
+import { cn } from '@/shadcn/lib/utils';
+
+const props = defineProps({
+  class: String,
+  debounceTime: {
+    type: Number,
+    default: 300,
+  },
+  ignoreDimensions: {
+    type: [Array, String],
+    default: () => [],
+  },
+  parentSizeStyles: Object,
+  enableDebounceLeadingCall: {
+    type: Boolean,
+    default: true,
+  },
+});
+
+const attrs = useAttrs();
+const target = ref<HTMLElement | null>(null);
+const state = reactive({
+  width: 0,
+  height: 0,
+  top: 0,
+  left: 0,
+});
+
+const mergedStyles = computed(() => ({
+  ...props.parentSizeStyles,
+  ...(attrs.style as object),
+}));
+
+const mergedClass = computed(() => ['w-full h-full', props.class]);
+
+const attrsWithoutClassAndStyle = computed(() => {
+  const { class: _, style: __, ...rest } = attrs;
+  return rest;
+});
+
+const normalizedIgnore = computed(() =>
+  Array.isArray(props.ignoreDimensions) ? props.ignoreDimensions : [props.ignoreDimensions],
+);
+
+function updateDimensions(rect: DOMRectReadOnly) {
+  const { width, height, top, left } = rect;
+  const newState = { width, height, top, left };
+
+  const hasChange = Object.keys(newState).some(
+    (key) => state[key as keyof typeof state] !== newState[key as keyof typeof state],
+  );
+
+  if (!hasChange) return;
+
+  const shouldUpdate = !Object.keys(newState).every((key) =>
+    normalizedIgnore.value.includes(key as keyof typeof state),
+  );
+
+  if (shouldUpdate) {
+    Object.assign(state, newState);
+  }
+}
+
+const debouncedUpdate = useDebounceFn(updateDimensions, props.debounceTime);
+
+useResizeObserver(target, (entries) => {
+  const entry = entries[0];
+  if (entry) debouncedUpdate(entry.contentRect);
+});
+</script>

src/components/InspiraUI/spline/Spline.vue

@@ -0,0 +1,112 @@
+<!-- Spline.vue -->
+<template>
+  <ParentSize
+    :parent-size-styles="parentSizeStyles"
+    :debounce-time="50"
+    v-bind="$attrs"
+  >
+    <template #default>
+      <canvas
+        ref="canvasRef"
+        :style="canvasStyle"
+      />
+      <slot v-if="isLoading" />
+    </template>
+  </ParentSize>
+</template>
+
+<script setup lang="ts">
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { ref, onMounted, onUnmounted, computed } from "vue";
+import { Application, type SplineEventName } from "@splinetool/runtime";
+import { useDebounceFn } from "@vueuse/core";
+import ParentSize from "./ParentSize.vue";
+
+const props = defineProps({
+  scene: {
+    type: String,
+    required: true,
+  },
+  onLoad: Function,
+  renderOnDemand: {
+    type: Boolean,
+    default: true,
+  },
+  style: Object,
+});
+
+let cleanUpFns: any[] = [];
+
+const emit = defineEmits([
+  "error",
+  ...[
+    "spline-mouse-down",
+    "spline-mouse-up",
+    "spline-mouse-hover",
+    "spline-key-down",
+    "spline-key-up",
+    "spline-start",
+    "spline-look-at",
+    "spline-follow",
+    "spline-scroll",
+  ],
+]);
+
+const canvasRef = ref<HTMLCanvasElement | null>(null);
+const isLoading = ref(true);
+const splineApp = ref<Application | null>(null);
+
+const parentSizeStyles = computed(() => ({
+  overflow: "hidden",
+  ...props.style,
+}));
+
+const canvasStyle = computed(() => ({
+  display: isLoading.value ? "none" : "block",
+  width: "100%",
+  height: "100%",
+}));
+
+function eventHandler(name: SplineEventName, handler?: (e: any) => void) {
+  if (!handler || !splineApp.value) return;
+  const debouncedHandler = useDebounceFn(handler, 50, {
+    maxWait: 100,
+  });
+  splineApp.value.addEventListener(name, debouncedHandler);
+  return () => splineApp.value?.removeEventListener(name, debouncedHandler);
+}
+
+onMounted(async () => {
+  if (!canvasRef.value) return;
+
+  try {
+    splineApp.value = new Application(canvasRef.value, {
+      renderOnDemand: props.renderOnDemand,
+    });
+
+    await splineApp.value.load(props.scene);
+
+    cleanUpFns = [
+      eventHandler("mouseDown", (e: any) => emit("spline-mouse-down", e)),
+      eventHandler("mouseUp", (e: any) => emit("spline-mouse-up", e)),
+      eventHandler("mouseHover", (e: any) => emit("spline-mouse-hover", e)),
+      eventHandler("keyDown", (e: any) => emit("spline-key-down", e)),
+      eventHandler("keyUp", (e: any) => emit("spline-key-up", e)),
+      eventHandler("start", (e: any) => emit("spline-start", e)),
+      eventHandler("lookAt", (e: any) => emit("spline-look-at", e)),
+      eventHandler("follow", (e: any) => emit("spline-follow", e)),
+      eventHandler("scroll", (e: any) => emit("spline-scroll", e)),
+    ].filter(Boolean);
+
+    isLoading.value = false;
+    props.onLoad?.(splineApp.value);
+  } catch (err) {
+    emit("error", err);
+  }
+});
+
+onUnmounted(() => {
+  cleanUpFns.forEach((fn) => fn?.());
+  splineApp.value?.dispose();
+});
+</script>

src/components/InspiraUI/spline/index.ts

@@ -0,0 +1,2 @@
+export { default as Spline } from "./Spline.vue";
+export { default as ParentSize } from "./ParentSize.vue";