feat: new

2024-01-06 00:53:50 +08:00
parent f66a1d2ae9
commit 4076bbe72e
27 changed files with 1094 additions and 158 deletions
--- a/src/views/Config/Global/FaceConfig.vue
+++ b/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>
--- a/src/views/Config/Global/ImageConfig.vue
+++ b/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>
--- a/src/views/Config/Global/MusicConfig.vue
+++ b/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>