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

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";