refactor: 提取组件，优化代码

src/views/Home/components/StarsBackground/index.vue

@@ -0,0 +1,71 @@
+<script setup lang='ts'>
+import { useElementSize } from '@vueuse/core'
+import localforage from 'localforage'
+import Sparticles from 'sparticles'
+import { onMounted, onUnmounted, ref } from 'vue'
+
+const props = defineProps({
+  homeBackground: {
+    type: Object,
+    default: () => ({
+      id: '',
+      name: '',
+      url: '',
+    }),
+  },
+})
+const imageDbStore = localforage.createInstance({
+  name: 'imgStore',
+})
+const imgUrl = ref('')
+const starRef = ref()
+
+const { width, height } = useElementSize(starRef)
+const options = ref({ shape: 'star', parallax: 1.2, rotate: true, twinkle: true, speed: 10, count: 200 })
+function addSparticles(node: any, width: number, height: number) {
+  const sparticleInstance = new Sparticles(node, options.value, width, height)
+  return sparticleInstance
+}
+// 页面大小改变时
+function listenWindowSize() {
+  window.addEventListener('resize', () => {
+    if (width.value && height.value) {
+      addSparticles(starRef.value, width.value, height.value)
+    }
+  })
+}
+
+async function getImageStoreItem(item: any): Promise<string> {
+  let image = ''
+  if (item.url === 'Storage') {
+    const key = item.id
+    image = await imageDbStore.getItem(key) as string
+  }
+  else {
+    image = item.url
+  }
+
+  return image
+}
+onMounted(() => {
+  getImageStoreItem(props.homeBackground).then((image) => {
+    imgUrl.value = image
+  })
+  addSparticles(starRef.value, width.value, height.value)
+  listenWindowSize()
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', listenWindowSize)
+})
+</script>
+
+<template>
+  <div v-if="homeBackground.url" class="home-background w-screen h-screen overflow-hidden">
+    <img :src="imgUrl" class="w-full h-full object-cover" alt="">
+  </div>
+  <div v-else ref="starRef" class="w-screen h-screen overflow-hidden" />
+</template>
+
+<style lang='scss' scoped>
+
+</style>