FEATURE(loading): 初始化 Loading 文件

components/initial-loading.vue

@@ -0,0 +1,11 @@
+<template lang="pug">
+.initial-loading
+</template>
+
+<script lang="ts" setup>
+</script>
+
+<style lang="stylus">
+.initial-loading
+  null
+</style>

components/landing-sketch/index.js

@@ -0,0 +1,7 @@
+export const init = ({
+  scrollContainer = document.body
+}) => {
+  const store = useStore()
+
+  console.log('init', scrollContainer)
+}

pages/index.vue

@@ -1,17 +1,27 @@
 <template lang="pug">
-.page.page-home
-  h2 Home
-  .flex.align-center.my-2
-    .brand-color.mr-2( :style="{ color: 'var(--brand)' }" ) Brand Color
-    nuxt-icon( name="youtube" )
+.page.page-home( ref="scrollContainer" )
+  initial-loading
 
-  theme-switcher
+  .sketch-container( ref="sketchContainer" )
 
   .section.section-contact.flex.flex-col.items-center.gap-5vh
     business-card
 </template>
 
 <script lang="ts" setup>
+import { init } from '@/components/landing-sketch'
+
+const scrollContainer = ref<HTMLDivElement>()
+
+const initSketch = () => {
+  init({
+    scrollContainer: scrollContainer.value
+  })
+}
+
+onMounted(() => {
+  initSketch()
+})
 </script>
 
 <style lang="stylus">

stores/use-store.ts

@@ -0,0 +1,31 @@
+import { defineStore } from 'pinia'
+
+type MainState = {
+  ui: {
+    isLoading: boolean
+    loadingProgress: number
+  },
+  context: {
+    lastPath: string
+  }
+}
+
+export const useStore = defineStore('main', {
+  state: () => ({
+    ui: {
+      isLoading: true,
+      loadingProgress: 0,
+    },
+
+    context: {
+      lastPath: '/',
+    },
+  } as MainState),
+
+  getters: {
+  },
+
+  actions: {
+
+  }
+})