feat: 粒子背景+动起来了

src/components/DaiysuiTable/index.vue

@@ -30,7 +30,7 @@ const actionsColumns = computed<any[]>(() => {
 
 <template>
     <div class="overflow-x-auto">
-        <table class="table">
+        <table class="table min-w-[600px]">
             <!-- head -->
             <thead>
                 <tr>
@@ -40,7 +40,7 @@ const actionsColumns = computed<any[]>(() => {
                     <th></th>
                 </tr>
             </thead>
-            <tbody>
+            <tbody v-if="data.length > 0">
                 <!-- row  -->
                 <tr class="hover" v-for="item in data" :key="item.id">
                     <th>{{ item.id }}</th>
@@ -55,6 +55,11 @@ const actionsColumns = computed<any[]>(() => {
                     </td>
                 </tr>
             </tbody>
+            <tbody v-else>
+                <tr>
+                    <td colspan="5" class="text-center">暂无数据</td>
+                </tr>
+            </tbody>
             <!-- foot -->
 
 

src/components/ImageSync/index.vue

@@ -0,0 +1,36 @@
+<script setup lang='ts'>
+import {ref,onMounted} from 'vue'
+import localforage from 'localforage'
+const props=defineProps({
+  imgItem: {
+    type:Object,
+    default:()=>({})
+  },
+})
+const imageDbStore = localforage.createInstance({
+    name: 'imgStore'
+})
+
+const imgUrl=ref('')
+
+
+const getImageStoreItem=async (item:any)=>{
+    const key=item.id;
+     const image=await imageDbStore.getItem(key)
+     
+return image
+}
+
+onMounted(async ()=>{
+    const image=await getImageStoreItem(props.imgItem)
+    imgUrl.value=image
+})
+</script>
+
+<template>
+    <img :src="imgUrl" Alt="Image"/>
+</template>
+
+<style lang='scss' scoped>
+
+</style>

src/components/StarsBackground/index.vue

@@ -0,0 +1,37 @@
+<script setup lang='ts'>
+import Sparticles from 'sparticles';
+import {ref,onMounted,onUnmounted} from 'vue';
+import { useElementSize } from '@vueuse/core';
+
+const starRef=ref();
+
+const { width, height}=useElementSize(starRef);
+let options = ref({ shape: 'star',parallax:1.2,rotate:true,twinkle:true, speed: 10,count:200 });
+function addSparticles(node:any,width:number,height:number) {
+     new Sparticles(node, options.value,width,height);
+}
+// 页面大小改变时
+const listenWindowSize=()=>{
+    window.addEventListener('resize',()=>{
+        if (width.value && height.value) {
+            addSparticles(starRef.value,width.value,height.value);
+        }
+    });
+}
+
+onMounted(()=>{
+    addSparticles(starRef.value,width.value,height.value);
+    listenWindowSize()
+})
+onUnmounted(()=>{
+    window.removeEventListener('resize',listenWindowSize)
+})
+
+</script>
+
+<template>
+    <div class="w-screen h-screen overflow-hidden bg-transparent" ref="starRef">
+    </div>
+</template>
+
+<style lang='scss' scoped></style>