feat: 粒子背景+动起来了

2024-01-07 00:05:55 +08:00
parent ae2f21daaf
commit 18c5429b58
25 changed files with 1073 additions and 2798 deletions
--- a/src/views/Config/Global/FaceConfig.vue
+++ b/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>
--- a/src/views/Config/Global/ImageConfig.vue
+++ b/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>
--- a/src/views/Config/Global/MusicConfig.vue
+++ b/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>
--- a/src/views/Config/Person/PersonAll.vue
+++ b/src/views/Config/Person/PersonAll.vue
@@ -1,49 +1,52 @@
 <!-- eslint-disable vue/no-parsing-error -->
 <script setup lang='ts'>
-import { ref } from 'vue';
+import { ref,onMounted } from 'vue';
 import useStore from '@/store'
+import {storeToRefs } from 'pinia'
 import * as XLSX from 'xlsx'
 import { readFile } from '@/utils/file'
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'

 const personConfig = useStore().personConfig

-const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList ,getTableRowCount:rowCount} = personConfig
+const { getAllPersonList:allPersonList,getTableRowCount:rowCount} = storeToRefs(personConfig)
 const limitType = '.xlsx,.xls'
 const excelData = ref<any[]>([])
-const personList = ref<any[]>(
-    notPersonList.concat(alreadyPersonList)
-)
+// const personList = ref<any[]>([])
+
+
 const handleFileChange = async (e: any) => {
    let dataBinary = await readFile(e.target.files[0])
    let workBook = XLSX.read(dataBinary, { type: 'binary', cellDates: true })
    let workSheet = workBook.Sheets[workBook.SheetNames[0]]
    excelData.value = XLSX.utils.sheet_to_json(workSheet)
-    personList.value = filterData(excelData.value)
+    const uploadData = filterData(excelData.value,rowCount.value)

    personConfig.resetPerson()
-    personConfig.addNotPersonList(personList.value)
+    personConfig.addNotPersonList(uploadData)
 }

-const filterData = (tableData: any[]) => {
+const filterData = (tableData: any[],localRowCount: number) => {
    const dataLength = tableData.length
    let j = 0;
    for (let i = 0; i < dataLength; i++) {
-        if (i % rowCount === 0) {
+        if (i % localRowCount === 0) {
            j++;
        }
-        tableData[i].x = i % rowCount + 1;
+        tableData[i].x = i % localRowCount + 1;
        tableData[i].y = j;
        tableData[i].id = i;
        // 是否中奖
        tableData[i].isWin = false
    }
    
-return personList.value = tableData
+return tableData
 }
 const deleteAll = () => {
    personConfig.deleteAllPerson()
-    personList.value = notPersonList.concat(alreadyPersonList)
+}
+const delPersonItem = (row: any) => {
+    personConfig.deletePerson(row)
 }

 const tableColumns = [
@@ -73,28 +76,30 @@ const tableColumns = [
    {
        label: '操作',
        actions: [
-            {
-                label: '编辑',
-                type: 'btn-info',
-                onClick: (row: any) => {
-                    console.log('编辑:', row)
-                }
-            },
+            // {
+            //     label: '编辑',
+            //     type: 'btn-info',
+            //     onClick: (row: any) => {
+            //         delPersonItem(row)
+            //     }
+            // },
            {
                label: '删除',
                type: 'btn-error',
                onClick: (row: any) => {
-                    console.log('删除:', row)
+                    delPersonItem(row)
                }
            },

        ]
    },
 ]
+onMounted(() => {
+})
 </script>

 <template>
-    <div class="">
+    <div class="min-w-1000px">
        <div class="flex justify-center gap-3">
            <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
            <div class="">
@@ -110,7 +115,7 @@ const tableColumns = [

            </div>
        </div>
-        <DaiysuiTable :tableColumns="tableColumns" :data="personList"></DaiysuiTable>
+        <DaiysuiTable :tableColumns="tableColumns" :data="allPersonList"></DaiysuiTable>
    </div>
 </template>

--- a/src/views/Config/Prize/PrizeConfig.vue
+++ b/src/views/Config/Prize/PrizeConfig.vue
@@ -1,7 +1,7 @@
 <script setup lang='ts'>
 import { ref, onMounted,watch } from 'vue'
 import useStore from '@/store'
-
+import {storeToRefs } from 'pinia'
 import localforage from 'localforage'
 import { IPrizeConfig } from '@/types/prizeConfig';

@@ -9,22 +9,33 @@ const imageDbStore = localforage.createInstance({
    name: 'imgStore'
 })
 const prizeConfig = useStore().prizeConfig
-const { getPrizeConfig } = prizeConfig
-const prizeList = ref(getPrizeConfig)
+const globalConfig = useStore().globalConfig
+const { getPrizeConfig:localPrizeList} = storeToRefs(prizeConfig)
+
+const { getImageList:localImageList} = storeToRefs(globalConfig)
+const prizeList = ref(localPrizeList)
 const imgList = ref<any[]>([])
 const addPrize = () => {
    const defaultPrizeCOnfig: IPrizeConfig = {
        id: new Date().getTime().toString(),
        name: '奖项',
        sort: 0,
-        isAll: false,
+        isAll: true,
        count: 1,
-        picture: [''],
+        picture: {
+            id:'',
+            name:'',
+            url:''
+        },
        desc: '',
-        isShow: true
+        isShow: true,
+        frequency: 1,
    }
    prizeConfig.addPrizeConfig(defaultPrizeCOnfig)
 }
+const resetDefault=()=>{
+    prizeConfig.resetDefault()
+}

 const getImageDbStore = async () => {
    const keys = await imageDbStore.keys()
@@ -48,6 +59,13 @@ const sort = (item:any,isUp:number) => {
        prizeList.value.splice(itemIndex+1,0,item)
    }
 }
+const delItem=(item:IPrizeConfig)=>{
+    prizeConfig.deletePrizeConfig(item.id)
+    // 更新奖项列表
+}
+const delAll=async ()=>{
+  await prizeConfig.deleteAllPrizeConfig()
+}
 onMounted(() => {
    getImageDbStore()
 })
@@ -59,9 +77,15 @@ watch(()=>prizeList,()=>{
 <template>
    <div>
        <h2>奖项配置</h2>
+        <div class="flex w-full gap-3">
+        <button class="btn btn-info btn-sm" @click="addPrize">添加</button>
+        <button class="btn btn-info btn-sm" @click="resetDefault">默认列表</button>
+        <button class="btn btn-error btn-sm" @click="delAll">全部删除</button>
+        
+    </div>
        <ul>
            <li v-for="item in prizeList" :key="item.id" class="flex gap-10">
-                <label class="w-full max-w-xs mb-10 form-control">
+                <label class="max-w-xs mb-10 form-control">
                    <!-- 向上向下 -->
                    <div class="flex flex-col items-center gap-2 pt-5">
                        <svg-icon class="cursor-pointer hover:text-blue-400" :class="prizeList.indexOf(item)==0?'opacity-0 cursor-default':''" name="up" @click="sort(item,1)"></svg-icon>
@@ -92,21 +116,34 @@ watch(()=>prizeList,()=>{
                    <div class="label">
                        <span class="label-text">图片</span>
                    </div>
-                    <select class="w-full max-w-xs select select-warning select-sm" v-model="item.picture">
+                    <select class="w-full max-w-xs select select-warning select-sm"  v-model="item.picture">
                        <option disabled selected>选择一张图片</option>
-                        <option v-for="picItem in imgList" :key="picItem.key">{{ picItem.key.split('+')[1] }}</option>
+                        <option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}</option>
                    </select>
                </label>
                <label class="w-full max-w-xs mb-10 form-control">
                    <div class="label">
-                        <span class="label-text">是否显示</span>
+                        <span class="label-text">展示在主界面</span>
                    </div>
                    <input type="checkbox" :checked="item.isShow" @change="item.isShow =!item.isShow"
                        class="mt-2 border-solid checkbox checkbox-secondary border-1" />
                </label>
+                <label class="w-full max-w-xs mb-10 form-control">
+                    <div class="label">
+                        <span class="label-text">抽取次数</span>
+                    </div>
+                    <input type="text" v-model="item.frequency" placeholder="抽取次数" class="w-full max-w-xs input-sm input input-bordered" />
+                </label>
+                <label class="w-full max-w-xs mb-10 form-control">
+                    <div class="label">
+                        <span class="label-text">操作</span>
+                    </div>
+                    <div class="flex gap-2">
+                    <button class="btn btn-error btn-sm" @click="delItem(item)">删除</button>
+                </div>
+                </label>
            </li>
        </ul>
-        <button class="btn btn-info" @click="addPrize">添加</button>
    </div>
 </template>

--- a/src/views/Config/index.vue
+++ b/src/views/Config/index.vue
@@ -33,8 +33,8 @@ const skip = (path: string) => {
 </script>

 <template>
-    <div class="flex min-h-[calc(100%-260px)]">
-        <ul class="w-56 m-0 menu bg-base-200 pt-14 rounded-box">
+    <div class="flex min-h-[calc(100%-280px)]">
+        <ul class="w-56 m-0 mr-3 menu bg-base-200 pt-14">
            <li v-for="item in menuList" :key="item.name">
                <details open v-if="item.children">
                    <summary>{{ item.meta.title }}</summary>
@@ -60,31 +60,28 @@ const skip = (path: string) => {
                    :style="item.name == route.name ? 'background-color:rgba(12,12,12,0.2)' : ''">{{ item.meta!.title }}</a>
            </li>
        </ul>
-        <router-view></router-view>
-</div>
-<footer class="p-10 rounded footer footer-center bg-base-200 text-base-content">
-            <nav class="grid grid-flow-col gap-4">
-                <a class="link link-hover">About us</a>
-                <a class="link link-hover">Contact</a>
-                <a class="link link-hover">Jobs</a>
-                <a class="link link-hover">Press kit</a>
-            </nav>
-            <nav>
-                <div class="grid grid-flow-col gap-4">
-                    <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                            class="fill-current">
-                            <path
-                                d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z">
-                            </path>
-                        </svg></a>
-                    <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                            class="fill-current">
-                            <path
-                                d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z">
+        <router-view class="mt-5"></router-view>
+    </div>
+    <footer class="p-10 rounded footer footer-center bg-base-200 text-base-content">
+        <nav class="grid grid-flow-col gap-4">
+            <a class="link link-hover">About us</a>
+            <a class="link link-hover">Contact</a>
+            <a class="link link-hover">Jobs</a>
+            <a class="link link-hover">Press kit</a>
+        </nav>
+        <nav>
+            <div class="grid grid-flow-col gap-4">
+                <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
+                        <path
+                            d="M24 4.557c-.883.392-1.832.656-2.828.775 1.017-.609 1.798-1.574 2.165-2.724-.951.564-2.005.974-3.127 1.195-.897-.957-2.178-1.555-3.594-1.555-3.179 0-5.515 2.966-4.797 6.045-4.091-.205-7.719-2.165-10.148-5.144-1.29 2.213-.669 5.108 1.523 6.574-.806-.026-1.566-.247-2.229-.616-.054 2.281 1.581 4.415 3.949 4.89-.693.188-1.452.232-2.224.084.626 1.956 2.444 3.379 4.6 3.419-2.07 1.623-4.678 2.348-7.29 2.04 2.179 1.397 4.768 2.212 7.548 2.212 9.142 0 14.307-7.721 13.995-14.646.962-.695 1.797-1.562 2.457-2.549z">
                        </path>
                    </svg></a>
-                <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
-                        class="fill-current">
+                <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
+                        <path
+                            d="M19.615 3.184c-3.604-.246-11.631-.245-15.23 0-3.897.266-4.356 2.62-4.385 8.816.029 6.185.484 8.549 4.385 8.816 3.6.245 11.626.246 15.23 0 3.897-.266 4.356-2.62 4.385-8.816-.029-6.185-.484-8.549-4.385-8.816zm-10.615 12.816v-8l8 3.993-8 4.007z">
+                        </path>
+                    </svg></a>
+                <a><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="fill-current">
                        <path
                            d="M9 8h-3v4h3v12h5v-12h3.642l.358-4h-4v-1.667c0-.955.192-1.333 1.115-1.333h2.885v-5h-3.808c-3.596 0-5.192 1.583-5.192 4.615v3.385z">
                        </path>
@@ -92,8 +89,11 @@ const skip = (path: string) => {
            </div>
        </nav>
        <aside>
-            <p>Copyright © 2024 - All right reserved by ACME Industries Ltd</p>
+
+            <p class="p-0 m-0">蜀ICP备2021028666号</p>
+            <p>Copyright © 2024 - All right reserved by Log1997</p>
        </aside>
-    </footer></template>
+    </footer>
+</template>

 <style scoped></style>