feat: InspiraUI

src/pages/index.page.vue

@@ -1,53 +1,85 @@
-<script setup lang="tsx">
-const VITE_BUILD_COMMIT = import.meta.env.VITE_BUILD_COMMIT;
-import { routes } from 'vue-router/auto-routes';
+<script setup lang="ts">
+import {
+  PATTERN_BACKGROUND_DIRECTION,
+  PATTERN_BACKGROUND_SPEED,
+  PATTERN_BACKGROUND_VARIANT,
+} from '@/components/InspiraUI/pattern-background';
+import { useLayout } from '@/layouts/sakai-vue/composables/layout';
 
-definePage({ meta: { title: '首页' } });
-import { useHead, useSeoMeta } from '@unhead/vue';
-
-useHead({
-  bodyAttrs: { class: { overflow: true } },
-  title: 'Hello World',
-  titleTemplate: (title) => `${title} | My App`,
-  // Deduping
-  // script: [{ key: '123', src: '/script.js' }],
-});
-
-useSeoMeta({
-  description: '首页',
-  title: 'Hello World',
-});
-
-consola.info('routes', routes);
-
-const FComponent: import('vue').FunctionalComponent<{ prop: string }> = (props /* context */) => (
-  <>
-    <a
-      class="green"
-      href="https://cn.vuejs.org/guide/extras/render-function#typing-functional-components"
-      rel="noopener noreferrer"
-      target="_blank"
-    >
-      函数式组件: https://cn.vuejs.org/guide/extras/render-function#typing-functional-components
-    </a>
-    <p>函数式组件，接收到的 prop 值为：</p>
-    <pre>{JSON.stringify(props, null, 2)}</pre>
-  </>
-);
+const { isDarkTheme, toggleDarkMode } = useLayout();
+const GradientButton_bgColor = computed(() => (isDarkTheme.value ? '#000' : '#fff'));
+const particlesColor = computed(() => (isDarkTheme.value ? '#FFFFFF' : '#000000'));
 </script>
 
 <template>
-  <div b="1px solid pink" mt-2 p-2>
-    <ul>
-      <li>
-        <router-link class="green" :to="{ name: 'DataLoadersId', params: { id: 520 } }">Data Loaders</router-link>
-      </li>
-    </ul>
-  </div>
-  <div b="1px solid pink" mt-2 p-2>
-    <FComponent prop="Hello World" style="margin-top: 1rem"></FComponent>
-  </div>
+  <div class="p-4 h-screen w-screen relative">
+    <PatternBackground
+      :animate="true"
+      :direction="PATTERN_BACKGROUND_DIRECTION.TopRight"
+      :variant="PATTERN_BACKGROUND_VARIANT.Dot"
+      class="flex h-full w-full flex-col items-center gap-4 overflow-hidden border rounded-lg px-4 py-8"
+      :speed="PATTERN_BACKGROUND_SPEED.Slow"
+      shadow-2xl
+    >
+      <h3
+        class="relative z-20 bg-gradient-to-b from-neutral-200 to-neutral-500 bg-clip-text py-0 text-3xl font-bold text-transparent"
+      >
+        Spline
+      </h3>
 
-  <SendSms class="mt-2!" />
-  <div b="1px solid pink" mt-2 p-2>commit: {{ VITE_BUILD_COMMIT }}</div>
+      <RouterLink :to="{ name: 'Home' }">
+        <GradientButton :bg-color="GradientButton_bgColor">Zooooooooooom 🚀 </GradientButton>
+        <!-- <InteractiveHoverButton text="Zooooooooooom 🚀" /> -->
+      </RouterLink>
+
+      <ShimmerButton class="isolate shadow-2xl" shimmer-size="2px" @click="toggleDarkMode">
+        <span
+          class="whitespace-pre-wrap text-center text-sm font-medium leading-none tracking-tight text-white lg:text-lg dark:from-white dark:to-slate-900/10"
+        >
+          {{ isDarkTheme ? '🌜' : '🌞' }}
+        </span>
+      </ShimmerButton>
+
+      <div class="relative h-40 w-[40rem]">
+        <div
+          class="absolute inset-x-20 top-0 h-[2px] w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent blur-sm"
+        />
+        <div
+          class="absolute inset-x-20 top-0 h-px w-3/4 bg-gradient-to-r from-transparent via-indigo-500 to-transparent"
+        />
+        <div
+          class="absolute inset-x-60 top-0 h-[5px] w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent blur-sm"
+        />
+        <div
+          class="absolute inset-x-60 top-0 h-px w-1/4 bg-gradient-to-r from-transparent via-sky-500 to-transparent"
+        />
+
+        <Sparkles
+          background="transparent"
+          :min-size="0.4"
+          :max-size="1.4"
+          :particle-density="1200"
+          class="size-full"
+          :particle-color="particlesColor"
+        />
+
+        <div class="absolute inset-0 size-full [mask-image:radial-gradient(350px_200px_at_top,transparent_20%,white)]">
+          <!-- bg-white dark:bg-black -->
+        </div>
+      </div>
+
+      <Spline scene="https://prod.spline.design/kZDDjO5HuC9GJUM2/scene.splinecode" />
+
+      <BorderBeam :size="250" :duration="12" :delay="9" :border-width="2" />
+    </PatternBackground>
+
+    <FluidCursor />
+  </div>
 </template>
+
+<style scoped></style>
+
+<route lang="yaml">
+meta:
+  layout: false
+</route>