feat: new

src/views/About/index.vue

@@ -1,42 +0,0 @@
-<script setup lang="ts">
-import { reactive } from 'vue';
-import { useRouter } from 'vue-router';
-
-const router = useRouter();
-
-const skip = (url: string) => {
-  router.push({
-    path: url,
-  });
-};
-
-const formInline = reactive({
-  user: '',
-  region: '',
-});
-
-const onSubmit = () => {
-  console.log('submit!');
-};
-</script>
-
-<template>
-  <h2>About</h2>
-  <button @click="skip('/home')">to Home</button>
-  <el-form :inline="true" :model="formInline" class="demo-form-inline">
-    <el-form-item label="Approved by">
-      <el-input v-model="formInline.user" placeholder="Approved by" />
-    </el-form-item>
-    <el-form-item label="Activity zone">
-      <el-select v-model="formInline.region" placeholder="Activity zone">
-        <el-option label="Zone one" value="shanghai" />
-        <el-option label="Zone two" value="beijing" />
-      </el-select>
-    </el-form-item>
-    <el-form-item>
-      <el-button type="primary" @click="onSubmit">Query</el-button>
-    </el-form-item>
-  </el-form>
-</template>
-
-<style scoped></style>

src/views/Config/Global/FaceConfig.vue

@@ -1,11 +1,29 @@
 <script setup lang='ts'>
-import { ref, watch } from 'vue'
+import { ref, watch, onMounted } from 'vue'
 import useStore from '@/store'
+import { themeChange } from 'theme-change';
 import zod from 'zod';
+import daisyuiThemes from 'daisyui/src/theming/themes'
+import { ColorPicker } from 'vue3-colorpicker';
+import 'vue3-colorpicker/style.css';
+import {isRgbOrRgba,isHex} from '@/utils/color'
 
 const personConfig = useStore().personConfig
-const { getTableRowCount: tableRowCount, getShowField} = personConfig
+const globalConfig = useStore().globalConfig
+const { getTheme: localTheme, getCardColor: cardColor,getTextColor:textColor,getCardSize:cardSize,getTextSize: textSize} = globalConfig
+const { getTableRowCount: tableRowCount, getShowField } = 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 themeList = ref(Object.keys(daisyuiThemes))
+const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
 const formData = ref({
     rowCount: tableRowCount,
     showField: getShowField
@@ -34,19 +52,18 @@ const parseSchema = (props: ValidatePayload) => {
 }
 
 
-const handleChangeShowFields = (fieldItem: any) => {
-    formData.value.showField.map((item)=>{
-        if(item.label===fieldItem.label){
-            item.value=!item.value
-        }
-    })
-}
+// const handleChangeShowFields = (fieldItem: any) => {
+//     formData.value.showField.map((item) => {
+//         if (item.label === fieldItem.label) {
+//             item.value = !item.value
+//         }
+//     })
+// }
 
 watch(() => formData.value.rowCount, () => {
     payload.rowCount = formData.value.rowCount
     parseSchema(payload).then(res => {
-        console.log('code line-40 \n\r😀 res:\n\r', res);
-        if(res.rowCount){
+        if (res.rowCount) {
             personConfig.setTableRowCount(res.rowCount)
         }
     })
@@ -56,7 +73,31 @@ watch(() => formData.value.rowCount, () => {
 })
 watch(() => formData.value.showField, () => {
     personConfig.setShowFields(formData.value.showField)
-},{deep:true})
+}, { deep: true })
+
+watch(themeValue, (val: any) => {
+    const selectedThemeDetail = daisyuiThemeList.value[val]
+    globalConfig.setTheme({ name: val, detail: selectedThemeDetail })
+    themeChange(val)
+    if(selectedThemeDetail.primary&&(isHex(selectedThemeDetail.primary)||isRgbOrRgba(selectedThemeDetail.primary))){
+        globalConfig.setCardColor(selectedThemeDetail.primary)
+        cardColorValue.value=selectedThemeDetail.primary
+    }
+}, { deep: true })
+
+watch(cardColorValue, (val: string) => {
+    globalConfig.setCardColor(val)
+}, { deep: true })
+
+watch(textColorValue, (val: string) => {
+    globalConfig.setTextColor(val)
+}, { deep: true })
+
+watch(cardSizeValue, (val: { width: number; height: number; }) => {
+    globalConfig.setCardSize(val)
+}, { deep: true })
+onMounted(() => {
+})
 </script>
 
 <template>
@@ -73,16 +114,72 @@ watch(() => formData.value.showField, () => {
                 </span>
             </div>
         </label>
-        <label class="w-full max-w-xs form-control">
+        <!-- <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)"/>
+                    <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>
+            </div>
+            <select data-choose-theme class="w-full max-w-xs border-solid select border-1" v-model="themeValue">
+                <option disabled selected>选取主题</option>
+                <option v-for="(item, index) in themeList" :key="index" :value="item">{{ item }}</option>
+            </select>
+        </label>
+        <label class="w-full max-w-xs form-control">
+            <div class="label">
+                <span class="label-text">卡片颜色</span>
+            </div>
+            <ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue"></ColorPicker>
+        </label>
+        
+        <label class="w-full max-w-xs form-control">
+            <div class="label">
+                <span class="label-text">文字颜色</span>
+            </div>
+            <ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue"></ColorPicker>
+        </label>
+        <label class="flex flex-row w-full max-w-xs gap-10 mb-10 form-control">
+            <div>
+            <div class="label">
+                <span class="label-text">卡片宽度</span>
+            </div>
+            <input type="number" v-model="cardSizeValue.width" placeholder="Type here"
+                class="w-full max-w-xs input input-bordered" />
+            <div class="help">
+                <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
+                    {{ formErr.rowCount }}
+                </span>
+            </div>
+        </div>
+        <div>
+            <div class="label">
+                <span class="label-text">卡片高度</span>
+            </div>
+            <input type="number" v-model="cardSizeValue.height" placeholder="Type here"
+                class="w-full max-w-xs input input-bordered" />
+            <div class="help">
+                <span class="text-sm text-red-400 help-text" v-if="formErr.rowCount">
+                    {{ formErr.rowCount }}
+                </span>
+            </div>
+        </div>
+        </label>
+        <label class="w-full max-w-xs mb-10 form-control">
+            <div class="label">
+                <span class="label-text">文字大小</span>
+            </div>
+            <input type="number" v-model="textSizeValue" placeholder="Type here"
+                class="w-full max-w-xs input input-bordered" />
         </label>
     </div>
 </template>

src/views/Config/Global/ImageConfig.vue

@@ -20,6 +20,7 @@ const handleFileChange = async (e: any) => {
     imageDbStore.setItem(new Date().getTime().toString() + '+' + fileName, dataUrl)
         .then(() => {
             imgUploadToast.value = 1
+            getImageDbStore()
         })
         .catch(() => {
             imgUploadToast.value = 2
@@ -27,6 +28,7 @@ const handleFileChange = async (e: any) => {
 }
 
 const getImageDbStore =async () => {
+    imgList.value = []
     const keys =await imageDbStore.keys()
     if(keys.length>0){
         imageDbStore.iterate((value, key) => {
@@ -75,7 +77,7 @@ watch(() => imgUploadToast.value, (val) => {
             <li v-for="item in imgList" :key="item">
                 <div class="flex items-center gap-3">
                     <div class="avatar">
-                        <div class="mask mask-squircle w-12 h-12">
+                        <div class="w-12 h-12 mask mask-squircle">
                             <img :src="item.value" alt="Avatar Tailwind CSS Component" />
                         </div>
                     </div>

src/views/Config/Global/MusicConfig.vue

@@ -0,0 +1,119 @@
+<script setup lang='ts'>
+import { ref, onMounted } from 'vue'
+import { readMusic } from '@/utils/file'
+import useStore from '@/store';
+
+import localforage from 'localforage'
+
+const audioUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
+const audioDbStore = localforage.createInstance({
+    name: 'audioStore'
+})
+const globalConfig = useStore().globalConfig
+
+const { getMusicList: localMusicList } = globalConfig;
+const audio = ref(new Audio())
+const limitType = ref('audio/*')
+const localMusicListValue = ref(localMusicList)
+const play = async (item: any) => {
+    let audioUrl = ''
+    if (!item.url) {
+        return
+    }
+    if (item.url == 'Storage') {
+        audioUrl = await audioDbStore.getItem(item.name) as string
+    }
+    else {
+        audioUrl = item.url
+    }
+    audio.value.pause()
+    audio.value.src = audioUrl
+
+    audio.value.currentTime = 0
+    audio.value.play()
+}
+const pausePlay = () => {
+    audio.value.pause()
+}
+const deleteMusic = (item: any) => {
+    globalConfig.removeMusic(item.id)
+    audioDbStore.removeItem(item.name)
+    // setTimeout(()=>{
+    //     localMusicListValue.value=localMusicList
+    // },100)
+}
+const resetMusic = () => {
+    globalConfig.resetMusicList()
+    audioDbStore.clear()
+}
+const deleteAll = () => {
+    globalConfig.clearMusicList()
+    audioDbStore.clear()
+    localMusicListValue.value = []
+}
+const getMusicDbStore = async () => {
+    const keys = await audioDbStore.keys()
+    if (keys.length > 0) {
+        audioDbStore.iterate((value: string, key: string) => {
+            globalConfig.addMusic({
+                id: key + new Date().getTime().toString(),
+                name: key,
+                url: 'Storage',
+            })
+        })
+    }
+}
+const handleFileChange = async (e: any) => {
+    const isAudio = /audio*/.test(e.target.files[0].type)
+    if (!isAudio) {
+        audioUploadToast.value = 3
+
+        return
+    }
+    let { dataUrl, fileName } = await readMusic(e.target.files[0])
+    audioDbStore.setItem(new Date().getTime().toString() + '+' + fileName, dataUrl)
+        .then(() => {
+            audioUploadToast.value = 1
+            getMusicDbStore()
+        })
+        .catch(() => {
+            audioUploadToast.value = 2
+        })
+}
+
+
+onMounted(() => {
+    getMusicDbStore()
+})
+</script>
+
+<template>
+    <div>
+        <div class="flex gap-3">
+            <button class="btn btn-primary btn-xs" @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>
+        </div>
+        <div>
+            <ul>
+                <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>
+                            {{ item.name }}</span>
+                    </div>
+                    <div class="flex gap-3">
+                        <button class="btn btn-primary btn-xs" @click="play(item)">播放</button>
+                        <button class="btn btn-error btn-xs" @click="deleteMusic(item)">删除</button>
+                    </div>
+                </li>
+            </ul>
+        </div>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Config/Person/PersonAll.vue

@@ -6,8 +6,6 @@ import * as XLSX from 'xlsx'
 import { readFile } from '@/utils/file'
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
 
-import {extractFields} from '@/utils/store'
-
 const personConfig = useStore().personConfig
 
 const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList ,getTableRowCount:rowCount} = personConfig
@@ -23,9 +21,7 @@ const handleFileChange = async (e: any) => {
     excelData.value = XLSX.utils.sheet_to_json(workSheet)
     personList.value = filterData(excelData.value)
 
-    const keys=extractFields(personList.value)
     personConfig.resetPerson()
-    personConfig.setShowFields(keys)
     personConfig.addNotPersonList(personList.value)
 }
 
@@ -98,7 +94,7 @@ const tableColumns = [
 </script>
 
 <template>
-    <div class="overflow-y-auto">
+    <div class="">
         <div class="flex justify-center gap-3">
             <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button>
             <div class="">

src/views/Config/Prize/PrizeConfig.vue

@@ -52,7 +52,6 @@ onMounted(() => {
     getImageDbStore()
 })
 watch(()=>prizeList,()=>{
-    console.log('prizeList',prizeList.value)
     prizeConfig.setPrizeConfig(prizeList.value)
 },{deep:true})
 </script>
@@ -65,22 +64,22 @@ watch(()=>prizeList,()=>{
                 <label class="w-full max-w-xs mb-10 form-control">
                     <!-- 向上向下 -->
                     <div class="flex flex-col items-center gap-2 pt-5">
-                        <svg-icon class="hover:text-blue-400 cursor-pointer" :class="prizeList.indexOf(item)==0?'opacity-0 cursor-default':''" name="up" @click="sort(item,1)"></svg-icon>
-                        <svg-icon class="hover:text-blue-400 cursor-pointer" name="down" @click="sort(item,0)" :class="prizeList.indexOf(item)==prizeList.length-1?'opacity-0 cursor-default':''"></svg-icon>
+                        <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>
+                        <svg-icon class="cursor-pointer hover:text-blue-400" name="down" @click="sort(item,0)" :class="prizeList.indexOf(item)==prizeList.length-1?'opacity-0 cursor-default':''"></svg-icon>
                     </div>
                 </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.name" placeholder="名称" class="w-full input-sm max-w-xs input input-bordered" />
+                    <input type="text" v-model="item.name" 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>
                     <input type="checkbox" :checked="item.isAll" @change="item.isAll =!item.isAll"
-                        class="checkbox checkbox-secondary border-1 border-solid mt-2" />
+                        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">
@@ -93,7 +92,7 @@ watch(()=>prizeList,()=>{
                     <div class="label">
                         <span class="label-text">图片</span>
                     </div>
-                    <select class="select select-warning w-full select-sm max-w-xs" 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>
                     </select>
@@ -103,7 +102,7 @@ watch(()=>prizeList,()=>{
                         <span class="label-text">是否显示</span>
                     </div>
                     <input type="checkbox" :checked="item.isShow" @change="item.isShow =!item.isShow"
-                        class="checkbox checkbox-secondary border-1 border-solid mt-2" />
+                        class="mt-2 border-solid checkbox checkbox-secondary border-1" />
                 </label>
             </li>
         </ul>

src/views/Config/index.vue

@@ -1,57 +1,99 @@
 <script setup lang="ts">
-import { ref,onMounted } from 'vue';
-import { useRouter } from 'vue-router';
+import { ref } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
 import { configRoutes } from '../../router';
 
-const router = useRouter();
-const menuList = ref(configRoutes.children);
 
-const cleanMenuList=(menu:any)=>{
-    const newList=menu;
-    for(let i=0;i<newList.length;i++){
-        if(newList[i].children){
+const router = useRouter();
+const route = useRoute();
+const menuList = ref<any[]>(configRoutes.children)
+
+const cleanMenuList = (menu: any) => {
+    const newList = menu;
+    for (let i = 0; i < newList.length; i++) {
+        if (newList[i].children) {
             cleanMenuList(newList[i].children);
         }
-        if(!newList[i].meta){
-            newList.splice(i,1);
+        if (!newList[i].meta) {
+            newList.splice(i, 1);
             i--;
         }
     }
 
-return newList;
+    return newList;
 }
-    menuList.value=cleanMenuList(menuList.value);
 
-    const skip=(path:string)=>{
-        router.push(path);
-    }
+menuList.value = cleanMenuList(menuList.value);
+
+const skip = (path: string) => {
+    router.push(path);
+}
+
+
 </script>
 
 <template>
-    <div class="flex">
-        <ul class="w-56 h-screen m-0 menu bg-base-200 pt-14 rounded-box">
+    <div class="flex min-h-[calc(100%-260px)]">
+        <ul class="w-56 m-0 menu bg-base-200 pt-14 rounded-box">
             <li v-for="item in menuList" :key="item.name">
                 <details open v-if="item.children">
                     <summary>{{ item.meta.title }}</summary>
                     <ul>
                         <li v-for="subItem in item.children" :key="subItem.name">
                             <details open v-if="subItem.children">
-                                <summary>{{ subItem.meta.title }}</summary>
+                                <summary>{{ subItem.meta!.title }}</summary>
                                 <ul>
                                     <li v-for="subSubItem in subItem.children" :key="subSubItem.name">
-                                        <a @click="skip(subItem.path)">{{ subSubItem.meta!.title }}</a>
+                                        <a @click="skip(subItem.path)"
+                                            :style="subSubItem.name == route.name ? 'background-color:rgba(12,12,12,0.2)' : ''">{{
+                                                subSubItem.meta!.title }}</a>
                                     </li>
                                 </ul>
                             </details>
-                            <a v-else @click="skip(subItem.path)">{{ subItem.meta!.title }}</a>
+                            <a v-else @click="skip(subItem.path)"
+                                :style="subItem.name == route.name ? 'background-color:rgba(12,12,12,0.2)' : ''">{{
+                                    subItem.meta!.title }}</a>
                         </li>
                     </ul>
                 </details>
-                <a v-else @click="skip(item.path)">{{ item.meta!.title }}</a>
+                <a v-else @click="skip(item.path)"
+                    :style="item.name == route.name ? 'background-color:rgba(12,12,12,0.2)' : ''">{{ item.meta!.title }}</a>
             </li>
         </ul>
         <router-view></router-view>
-    </div>
-</template>
+</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">
+                        </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>
+                    </svg></a>
+            </div>
+        </nav>
+        <aside>
+            <p>Copyright © 2024 - All right reserved by ACME Industries Ltd</p>
+        </aside>
+    </footer></template>
 
 <style scoped></style>

src/views/Home/PlayMusic.vue

@@ -0,0 +1,75 @@
+<script setup lang='ts'>
+import { ref, onMounted, onUnmounted } from 'vue'
+import useStore from '@/store';
+import localforage from 'localforage'
+
+const audioDbStore = localforage.createInstance({
+    name: 'audioStore'
+})
+
+const audio = ref(new Audio())
+const currentMusic = ref<any>()
+const globalConfig = useStore().globalConfig
+const { getMusicList: localMusicList } = globalConfig;
+const localMusicListValue = ref(localMusicList)
+
+const play = async (item: any,skip=false) => {
+    if (!audio.value.paused&&!skip) {
+        audio.value.pause()
+
+        return
+    }
+    let audioUrl = ''
+    if (!item.url) {
+        return
+    }
+    if (item.url == 'Storage') {
+        audioUrl = await audioDbStore.getItem(item.name) as string
+    }
+    else {
+        audioUrl = item.url
+    }
+    audio.value.pause()
+    audio.value.src = audioUrl
+
+    audio.value.currentTime = 0
+    audio.value.play()
+}
+
+const nextPlay = () => {
+    // 播放下一首
+    if (localMusicListValue.value.length > 1) {
+        let index = localMusicListValue.value.findIndex((item: any) => item.name == currentMusic.value.name)
+        index++
+        if (index >= localMusicListValue.value.length) {
+            index = 0
+        }
+        currentMusic.value = localMusicListValue.value[index]
+        play(currentMusic.value,true)
+    }
+}
+// 监听播放成后开始下一首
+const onPlayEnd = () => {
+    audio.value.addEventListener('ended', nextPlay)
+}
+
+onMounted(() => {
+    currentMusic.value = localMusicListValue.value[0]
+    onPlayEnd()
+})
+onUnmounted(() => {
+    audio.value.removeEventListener('ended', nextPlay)
+})
+
+</script>
+
+<template>
+    <div class="flex gap-3">
+        <div class="bg-red-300 cursor-pointer" @click="play(currentMusic)">
+            播放/暂停
+        </div>
+        <div class="bg-blue-300 cursor-pointer" @click="nextPlay">下一首</div>
+    </div>
+</template>
+
+<style lang='scss' scoped></style>

src/views/Home/PrizeList.vue

@@ -0,0 +1,16 @@
+<script setup lang='ts'>
+
+import useStore from '@/store'
+
+const prizeConfig = useStore().prizeConfig
+</script>
+
+<template>
+<div>
+List
+</div>
+</template>
+
+<style lang='scss' scoped>
+
+</style>

src/views/Home/index.vue

@@ -1,6 +1,8 @@
 <script setup lang="ts">
 import { ref, onMounted } from 'vue'
 // import { tableData2 as tableData } from './data'
+import {rgba} from '@/utils/color'
+import PlayMusic from './PlayMusic.vue'
 import * as THREE from 'three'
 import {
     CSS3DRenderer, CSS3DObject
@@ -10,7 +12,11 @@ import TWEEN from 'three/examples/jsm/libs/tween.module.js';
 import useStore from '@/store'
 
 const personConfig=useStore().personConfig
+const globalConfig=useStore().globalConfig
+// const globalConfig = useStore().globalConfig
+
 const {getAlreadyPersonList:alreadyPersonList,getNotPersonList:notPersonList,getTableRowCount:rowCount}=personConfig
+const {getCardColor:cardColor,getTextColor:textColor,getCardSize:cardSize,getTextSize:textSize} = globalConfig
 const tableData=ref(
     alreadyPersonList.concat(notPersonList)
 )
@@ -59,22 +65,42 @@ const init = () => {
     for (let i = 0; i < tableLen; i++) {
         const element = document.createElement('div');
         element.className = 'element-card';
-        element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
+        // element.style.backgroundColor = `rgba( 0, 127, 127, ${Math.random() * 0.5 + 0.25} )`;
+        element.style.backgroundColor = rgba(cardColor,Math.random() * 0.5 + 0.25)
+        element.style.border=`1px solid ${rgba(cardColor,0.25)}`
+        element.style.boxShadow=`0 0 12px ${rgba(cardColor,0.5)}`
+        // hover style
+        element.addEventListener('mouseover', function () {
+            this.style.border=`1px solid ${rgba(cardColor,0.75)}`
+            this.style.boxShadow=`0 0 12px ${rgba(cardColor,0.75)}`
+        })
+        element.addEventListener('mouseout', function () {
+            this.style.border=`1px solid ${rgba(cardColor,0.25)}`
+            this.style.boxShadow=`0 0 12px ${rgba(cardColor,0.5)}`
+        })
+        element.style.width = `${cardSize.width}px`;
+        element.style.height = `${cardSize.height}px`;
+    
+        // element.style.color=localTheme.detail.primary
 
         const number = document.createElement('div');
         number.className = 'card-id';
         // number.textContent = (i / 5 + 1).toString();
         number.textContent = tableData.value[i].uid;
+        number.style.fontSize = `${textSize*0.5}px`;
         element.appendChild(number);
 
         const symbol = document.createElement('div');
         symbol.className = 'card-name';
         symbol.textContent = tableData.value[i].name;
+        symbol.style.textShadow=`0 0 12px ${rgba(cardColor,0.95)}`
+        symbol.style.fontSize = `${textSize}px`;
         element.appendChild(symbol);
 
         const detail = document.createElement('div');
         detail.className = 'card-detail';
         detail.innerHTML = `${tableData.value[i].department}<br/>${tableData.value[i].other}`;
+        detail.style.fontSize = `${textSize*0.5}px`;
         element.appendChild(detail);
 
         const object = new CSS3DObject(element);
@@ -96,8 +122,8 @@ const init = () => {
         for (let i = 0; i < tableLen; i++) {
             const object = new THREE.Object3D();
 
-            object.position.x = tableData.value[i].x * 180 - rowCount*90;
-            object.position.y = -tableData.value[i].y * 200 + 1000;
+            object.position.x = tableData.value[i].x * (cardSize.width+40) - rowCount*90;
+            object.position.y = -tableData.value[i].y *(cardSize.height+20) + 1000;
             object.position.z = 0;
 
             targets.table.push(object);
@@ -204,6 +230,7 @@ function render() {
 onMounted(() => {
     init();
     animation();
+    containerRef.value!.style.color=`${textColor}`
 });
 
 </script>
@@ -218,6 +245,7 @@ onMounted(() => {
         </div>
         <!-- end -->
     </div>
+    <PlayMusic class="absolute bottom-10 right-10"></PlayMusic>
 </template>
 
 <style scoped lang="scss">