feat: 粒子背景+动起来了

src/views/Config/Global/FaceConfig.vue

@@ -1,6 +1,8 @@
 <script setup lang='ts'>
 import { ref, watch, onMounted } from 'vue'
 import useStore from '@/store'
+
+import {storeToRefs } from 'pinia'
 import { themeChange } from 'theme-change';
 import zod from 'zod';
 import daisyuiThemes from 'daisyui/src/theming/themes'
@@ -10,18 +12,18 @@ import {isRgbOrRgba,isHex} from '@/utils/color'
 
 const personConfig = useStore().personConfig
 const globalConfig = useStore().globalConfig
-const { getTheme: localTheme, getCardColor: cardColor,getTextColor:textColor,getCardSize:cardSize,getTextSize: textSize} = globalConfig
-const { getTableRowCount: tableRowCount, getShowField } = personConfig
+const { getTheme: localTheme, getCardColor: cardColor,getTextColor:textColor,getCardSize:cardSize,getTextSize: textSize} = storeToRefs(globalConfig)
+const { getTableRowCount: tableRowCount, getShowField } = storeToRefs(personConfig)
 const colorPickerRef = ref()
 
 interface ThemeDaType {
     [key: string]: any
 }
-const themeValue = ref(localTheme.name)
-const cardColorValue = ref(cardColor)
-const textColorValue = ref(textColor)
-const cardSizeValue = ref(cardSize)
-const textSizeValue = ref(textSize)
+const themeValue = ref(localTheme.value.name)
+const cardColorValue = ref(structuredClone(cardColor.value))
+const textColorValue = ref(structuredClone(textColor.value))
+const cardSizeValue = ref(structuredClone(cardSize.value))
+const textSizeValue = ref(structuredClone(textSize.value))
 const themeList = ref(Object.keys(daisyuiThemes))
 const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
 const formData = ref({
@@ -81,7 +83,6 @@ watch(themeValue, (val: any) => {
     themeChange(val)
     if(selectedThemeDetail.primary&&(isHex(selectedThemeDetail.primary)||isRgbOrRgba(selectedThemeDetail.primary))){
         globalConfig.setCardColor(selectedThemeDetail.primary)
-        cardColorValue.value=selectedThemeDetail.primary
     }
 }, { deep: true })
 
@@ -114,18 +115,6 @@ onMounted(() => {
                 </span>
             </div>
         </label>
-        <!-- <label class="w-full max-w-xs form-control">
-            <div class="label">
-                <span class="label-text">展示字段</span>
-            </div>
-            <ul class="flex gap-6 pl-0">
-                <li v-for="item in formData.showField" :key="item" class="flex items-center gap-1">
-                    <input type="checkbox" :checked="item.value" class="border-solid checkbox checkbox-primary border-1"
-                        @change="handleChangeShowFields(item)" />
-                    <span class="label-text">{{ item.label }}</span>
-                </li>
-            </ul>
-        </label> -->
         <label class="w-full max-w-xs form-control">
             <div class="label">
                 <span class="label-text">选择主题</span>

src/views/Config/Global/ImageConfig.vue

@@ -2,9 +2,14 @@
 import { ref, onMounted, watch } from 'vue'
 import { readImage } from '@/utils/file'
 import localforage from 'localforage'
+import useStore from '@/store'
+import { storeToRefs } from 'pinia'
+import ImageSync from '@/components/ImageSync/index.vue'
 
+
+const globalConfig= useStore().globalConfig
+const { getImageList:localImageList} = storeToRefs(globalConfig)
 const limitType = ref('image/*')
-const imgList = ref<any>([])
 const imgUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
 const imageDbStore = localforage.createInstance({
     name: 'imgStore'
@@ -28,20 +33,28 @@ const handleFileChange = async (e: any) => {
 }
 
 const getImageDbStore =async () => {
-    imgList.value = []
     const keys =await imageDbStore.keys()
     if(keys.length>0){
         imageDbStore.iterate((value, key) => {
-            imgList.value.push({
-                key,
-                value
+            globalConfig.addImage({
+                id:key,
+                name:key,
+                url:'Storage'
             })
         })
     }
 }
 
+const removeImage=(item:any)=>{
+    if(item.url=='Storage'){
+        imageDbStore.removeItem(item.id).then(() => {
+            globalConfig.removeImage(item.id)
+        })
+    }
+    globalConfig.removeImage(item.id)
+}
 onMounted(() => {
-    getImageDbStore()
+    // getImageDbStore()
 })
 watch(() => imgUploadToast.value, (val) => {
     if (val !== 0) {
@@ -73,16 +86,20 @@ watch(() => imgUploadToast.value, (val) => {
                 <span class="btn btn-primary btn-sm">上传图片</span>
             </label>
         </div>
-        <ul>
-            <li v-for="item in imgList" :key="item">
-                <div class="flex items-center gap-3">
-                    <div class="avatar">
-                        <div class="w-12 h-12 mask mask-squircle">
-                            <img :src="item.value" alt="Avatar Tailwind CSS Component" />
+        <ul class="p-0">
+            <li v-for="item in localImageList" :key="item.id" class="mb-3">
+                <div class="flex items-center gap-8">
+                    <div class="avatar h-14">
+                        <div class="w-12 h-12 mask mask-squircle hover:w-14 hover:h-14">
+                            <img v-if="item.url!=='Storage'" :src="item.url" alt="Avatar Tailwind CSS Component" />
+                            <ImageSync v-else :imgItem="item"></ImageSync>
                         </div>
                     </div>
+                    <div class="w-64">
+                        <div class="overflow-hidden font-bold whitespace-nowrap text-ellipsis">{{ item.name}}</div>
+                    </div>
                     <div>
-                        <div class="font-bold">{{ item.key.split('+')[1] }}</div>
+                        <button class="btn btn-error btn-xs" @click="removeImage(item)">删除</button>
                     </div>
                 </div>
             </li>

src/views/Config/Global/MusicConfig.vue

@@ -1,5 +1,6 @@
 <script setup lang='ts'>
 import { ref, onMounted } from 'vue'
+import {storeToRefs } from 'pinia'
 import { readMusic } from '@/utils/file'
 import useStore from '@/store';
 
@@ -11,7 +12,7 @@ const audioDbStore = localforage.createInstance({
 })
 const globalConfig = useStore().globalConfig
 
-const { getMusicList: localMusicList } = globalConfig;
+const { getMusicList: localMusicList } = storeToRefs(globalConfig);
 const audio = ref(new Audio())
 const limitType = ref('audio/*')
 const localMusicListValue = ref(localMusicList)
@@ -49,7 +50,6 @@ const resetMusic = () => {
 const deleteAll = () => {
     globalConfig.clearMusicList()
     audioDbStore.clear()
-    localMusicListValue.value = []
 }
 const getMusicDbStore = async () => {
     const keys = await audioDbStore.keys()
@@ -90,17 +90,17 @@ onMounted(() => {
 <template>
     <div>
         <div class="flex gap-3">
-            <button class="btn btn-primary btn-xs" @click="resetMusic">重置音乐列表</button>
+            <button class="btn btn-primary btn-sm" @click="resetMusic">重置音乐列表</button>
             <label for="explore">
                 <input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
                     :accept="limitType" />
                 <span class="btn btn-primary btn-sm">上传音乐</span>
             </label>
-            <button class="btn btn-primary btn-xs" @click="pausePlay">暂停播放</button>
-            <button class="btn btn-error btn-xs" @click="deleteAll">删除所有</button>
+            <button class="btn btn-primary btn-sm" @click="pausePlay">暂停播放</button>
+            <button class="btn btn-error btn-sm" @click="deleteAll">删除所有</button>
         </div>
         <div>
-            <ul>
+            <ul class="p-0">
                 <li v-for="item in localMusicListValue" :key="item.id" class="flex items-center gap-6 pb-2 mb-3 divide-y">
                     <div class="mr-12 overflow-hidden w-72 whitespace-nowrap text-ellipsis">
                         <span>