refactor: ♻️ 界面设置页面重构，抽离逻辑 #96
This commit is contained in:
LOG1997
@@ -2,10 +2,11 @@
|
||||
import type { IFileData } from './type'
|
||||
import { ListMusic, Upload, X } from 'lucide-vue-next'
|
||||
import { ref } from 'vue'
|
||||
import { readFileData } from '@/utils/file'
|
||||
import { readFileAsJsonData, readFileData } from '@/utils/file'
|
||||
|
||||
defineProps<{
|
||||
const props = defineProps<{
|
||||
limitType?: string
|
||||
mode?: 'file' | 'json'
|
||||
}>()
|
||||
|
||||
const emits = defineEmits<{
|
||||
@@ -17,6 +18,14 @@ const fileData = ref<IFileData | null>(null)
|
||||
async function handleFileChange(e: Event) {
|
||||
const file = ((e.target as HTMLInputElement).files as FileList)[0]
|
||||
const type = file.type
|
||||
if (props.mode === 'json') {
|
||||
const fileRes = await readFileAsJsonData(file)
|
||||
const jsonData = JSON.parse(fileRes)
|
||||
fileData.value = { dataUrl: jsonData, fileName: file.name, type }
|
||||
originFileName.value = file.name
|
||||
emits('uploadFile', fileData.value)
|
||||
return
|
||||
}
|
||||
const { dataUrl, fileName } = await readFileData(file)
|
||||
fileData.value = { dataUrl, fileName, type }
|
||||
originFileName.value = fileName
|
||||
|
||||
@@ -127,6 +127,10 @@ export const useGlobalConfig = defineStore('global', {
|
||||
},
|
||||
},
|
||||
actions: {
|
||||
// 设置全局配置
|
||||
setGlobalConfig(data: any) {
|
||||
this.globalConfig = data
|
||||
},
|
||||
// 设置rowCount
|
||||
setRowCount(rowCount: number) {
|
||||
this.globalConfig.rowCount = rowCount
|
||||
@@ -137,9 +141,8 @@ export const useGlobalConfig = defineStore('global', {
|
||||
},
|
||||
// 设置主题
|
||||
setTheme(theme: any) {
|
||||
const { name, detail } = theme
|
||||
const { name } = theme
|
||||
this.globalConfig.theme.name = name
|
||||
this.globalConfig.theme.detail = detail
|
||||
},
|
||||
// 设置卡片颜色
|
||||
setCardColor(cardColor: string) {
|
||||
|
||||
@@ -23,3 +23,13 @@ export async function readLocalFileAsArraybuffer(path: string): Promise<ArrayBuf
|
||||
const arrayBuffer = await response.arrayBuffer()
|
||||
return arrayBuffer
|
||||
}
|
||||
|
||||
export async function readFileAsJsonData(file: File | Blob): Promise<any> {
|
||||
return new Promise((resolve) => {
|
||||
const reader = new FileReader()
|
||||
reader.readAsText(file, 'utf-8')
|
||||
reader.onload = (ev: any) => {
|
||||
resolve(ev.target.result)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,75 @@
|
||||
<script setup lang='ts'>
|
||||
import type { IFileData } from '@/components/FileUpload/type'
|
||||
import localforage from 'localforage'
|
||||
import { v4 as uuidv4 } from 'uuid'
|
||||
import { computed, ref, watch } from 'vue'
|
||||
import { useToast } from 'vue-toast-notification'
|
||||
import CustomDialog from '@/components/Dialog/index.vue'
|
||||
import FileUpload from '@/components/FileUpload/index.vue'
|
||||
|
||||
interface Props {
|
||||
importAllConfigData: (data: any) => void
|
||||
}
|
||||
|
||||
const props = defineProps<Props>()
|
||||
const toast = useToast()
|
||||
const limitType = ref('application/json')
|
||||
const visible = defineModel('visible', {
|
||||
type: Boolean,
|
||||
required: true,
|
||||
})
|
||||
const jsonFileData = ref<IFileData | null>(null)
|
||||
|
||||
const uploadDialogRef = ref()
|
||||
|
||||
async function uploadFile(fileData: IFileData | null) {
|
||||
if (!fileData) {
|
||||
jsonFileData.value = null
|
||||
return
|
||||
}
|
||||
const isJson = /application\/json/.test(fileData?.type || '')
|
||||
if (!isJson) {
|
||||
toast.open({
|
||||
message: '不是json文件，请检查',
|
||||
type: 'error',
|
||||
position: 'top-right',
|
||||
})
|
||||
return
|
||||
}
|
||||
jsonFileData.value = fileData
|
||||
}
|
||||
|
||||
function submitUpload() {
|
||||
if (jsonFileData.value) {
|
||||
// 把文件转化为json数据
|
||||
const jsonData = jsonFileData.value.dataUrl
|
||||
console.log('jsonData', jsonData)
|
||||
props.importAllConfigData(jsonData)
|
||||
}
|
||||
}
|
||||
watch(visible, (newVal) => {
|
||||
if (newVal) {
|
||||
uploadDialogRef.value.showDialog()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<CustomDialog
|
||||
ref="uploadDialogRef"
|
||||
v-model:visible="visible"
|
||||
title="设置文件上传"
|
||||
:submit-func="submitUpload"
|
||||
class=""
|
||||
>
|
||||
<template #content>
|
||||
<div class="flex flex-col items-center gap-6 w-full px-12">
|
||||
<FileUpload v-if="visible" :limit-type="limitType" mode="json" @upload-file="uploadFile" />
|
||||
</div>
|
||||
</template>
|
||||
</CustomDialog>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@@ -1,443 +1,60 @@
|
||||
<script setup lang='ts'>
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { ColorPicker } from 'vue3-colorpicker'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { z as zod } from 'zod'
|
||||
import { daisyuiThemes } from '@/constant/theme'
|
||||
import i18n, { languageList } from '@/locales/i18n'
|
||||
import useStore from '@/store'
|
||||
import { themeChange } from '@/utils'
|
||||
import { clearAllDbStore } from '@/utils/localforage'
|
||||
import PatternSetting from './components/PatternSetting.vue'
|
||||
import SelectFont from './components/SelectFont.vue'
|
||||
import 'vue3-colorpicker/style.css'
|
||||
import { DataSetting, LayoutSetting, PatternSetting, TextSetting, ThemeSetting } from './parts'
|
||||
|
||||
import { useViewModel } from './useViewModel'
|
||||
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
const globalConfig = useStore().globalConfig
|
||||
const personConfig = useStore().personConfig
|
||||
const prizeConfig = useStore().prizeConfig
|
||||
const { getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getLanguage: userLanguage, getBackground: backgroundImage, getFont: currentFont, getTitleFont: currentTitleFont, getTitleFontSyncGlobal: titleFontSyncGlobal, getImageList: imageList, getIsShowAvatar: isShowAvatar,
|
||||
} = storeToRefs(globalConfig)
|
||||
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
|
||||
const colorPickerRef = ref()
|
||||
const resetDataDialogRef = ref()
|
||||
interface ThemeDaType {
|
||||
[key: string]: any
|
||||
}
|
||||
const isRowCountChange = ref(0) // 0未改变，1改变,2加载中
|
||||
const themeValue = ref(localTheme.value.name)
|
||||
const topTitleValue = ref(structuredClone(topTitle.value))
|
||||
const cardColorValue = ref(structuredClone(cardColor.value))
|
||||
const luckyCardColorValue = ref(structuredClone(luckyCardColor.value))
|
||||
const textColorValue = ref(structuredClone(textColor.value))
|
||||
const cardSizeValue = ref(structuredClone(cardSize.value))
|
||||
const textSizeValue = ref(structuredClone(textSize.value))
|
||||
const rowCountValue = ref(structuredClone(rowCount.value))
|
||||
const languageValue = ref(structuredClone(userLanguage.value))
|
||||
const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
|
||||
const isShowAvatarValue = ref(structuredClone(isShowAvatar.value))
|
||||
const patternColorValue = ref(structuredClone(patternColor.value))
|
||||
const themeList = ref(daisyuiThemes)
|
||||
const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
|
||||
const backgroundImageValue = ref(backgroundImage.value)
|
||||
const currentFontValue = ref(structuredClone(currentFont.value))
|
||||
const currentTitleFontValue = ref(structuredClone(currentTitleFont.value))
|
||||
const titleFontSyncGlobalValue = ref(structuredClone(titleFontSyncGlobal.value))
|
||||
const formData = ref({
|
||||
rowCount: rowCountValue,
|
||||
})
|
||||
const formErr = ref({
|
||||
rowCount: '',
|
||||
})
|
||||
const schema = zod.object({
|
||||
rowCount: zod.number({
|
||||
error: i18n.global.t('error.require'),
|
||||
// required_error: i18n.global.t('error.require'),
|
||||
// invalid_type_error: i18n.global.t('error.requireNumber'),
|
||||
})
|
||||
.min(1, i18n.global.t('error.minNumber1'))
|
||||
.max(100, i18n.global.t('error.maxNumber100')),
|
||||
// 格式化
|
||||
|
||||
})
|
||||
type ValidatePayload = zod.infer<typeof schema>
|
||||
const payload: ValidatePayload = {
|
||||
rowCount: formData.value.rowCount,
|
||||
}
|
||||
function parseSchema(props: ValidatePayload) {
|
||||
return schema.parseAsync(props)
|
||||
}
|
||||
|
||||
function resetPersonLayout() {
|
||||
isRowCountChange.value = 2
|
||||
setTimeout(() => {
|
||||
const alreadyLen = alreadyPersonList.value.length
|
||||
const notLen = notPersonList.value.length
|
||||
if (alreadyLen <= 0 && notLen <= 0) {
|
||||
return
|
||||
}
|
||||
const allPersonList = alreadyPersonList.value.concat(notPersonList.value)
|
||||
const newAlreadyPersonList = allPersonList.slice(0, alreadyLen)
|
||||
const newNotPersonList = allPersonList.slice(alreadyLen, notLen + alreadyLen)
|
||||
personConfig.deleteAllPerson()
|
||||
personConfig.addNotPersonList(newNotPersonList)
|
||||
personConfig.addAlreadyPersonList(newAlreadyPersonList, null)
|
||||
|
||||
isRowCountChange.value = 0
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
function clearPattern() {
|
||||
globalConfig.setPatternList([] as number[])
|
||||
}
|
||||
function resetPattern() {
|
||||
globalConfig.resetPatternList()
|
||||
}
|
||||
|
||||
function resetData() {
|
||||
globalConfig.reset()
|
||||
personConfig.reset()
|
||||
prizeConfig.resetDefault()
|
||||
// 删除所有indexDb
|
||||
clearAllDbStore()
|
||||
// 刷新页面
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
watch(() => formData.value.rowCount, () => {
|
||||
payload.rowCount = formData.value.rowCount
|
||||
parseSchema(payload).then((res) => {
|
||||
if (res.rowCount) {
|
||||
isRowCountChange.value = 1
|
||||
globalConfig.setRowCount(res.rowCount)
|
||||
}
|
||||
}).catch((err) => {
|
||||
formErr.value.rowCount = err.issues[0].message
|
||||
})
|
||||
})
|
||||
|
||||
watch(topTitleValue, (val) => {
|
||||
globalConfig.setTopTitle(val)
|
||||
})
|
||||
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)
|
||||
// }
|
||||
}, { deep: true })
|
||||
|
||||
watch(cardColorValue, (val: string) => {
|
||||
globalConfig.setCardColor(val)
|
||||
}, { deep: true })
|
||||
watch(luckyCardColorValue, (val: string) => {
|
||||
globalConfig.setLuckyCardColor(val)
|
||||
}, { deep: true })
|
||||
watch(patternColorValue, (val: string) => {
|
||||
globalConfig.setPatterColor(val)
|
||||
})
|
||||
watch(textColorValue, (val: string) => {
|
||||
globalConfig.setTextColor(val)
|
||||
}, { deep: true })
|
||||
|
||||
watch(cardSizeValue, (val: { width: number, height: number }) => {
|
||||
globalConfig.setCardSize(val)
|
||||
}, { deep: true })
|
||||
|
||||
watch(isShowPrizeListValue, () => {
|
||||
globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
|
||||
})
|
||||
watch(backgroundImageValue, (val) => {
|
||||
globalConfig.setBackground(val)
|
||||
})
|
||||
watch(currentFontValue, (val) => {
|
||||
globalConfig.setFont(val)
|
||||
document.documentElement.style.setProperty('--app-font-family', `"${val}", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`)
|
||||
})
|
||||
watch(currentTitleFontValue, (val) => {
|
||||
globalConfig.setTitleFont(val)
|
||||
})
|
||||
watch(titleFontSyncGlobalValue, (val) => {
|
||||
globalConfig.setTitleFontSyncGlobal(val)
|
||||
})
|
||||
watch(languageValue, (val: string) => {
|
||||
globalConfig.setLanguage(val)
|
||||
})
|
||||
watch(isShowAvatarValue, () => {
|
||||
globalConfig.setIsShowAvatar(isShowAvatarValue.value)
|
||||
})
|
||||
onMounted(() => {
|
||||
})
|
||||
const { resetData, topTitleValue, languageValue, textSizeValue, currentFontValue, currentTitleFontValue, titleFontSyncGlobalValue, languageList, formErr, formData, cardSizeValue, isShowPrizeListValue, isShowAvatarValue, resetPersonLayout, isRowCountChange, themeValue, backgroundImageValue, cardColorValue, luckyCardColorValue, textColorValue, patternColorValue, imageList, rowCount, cardColor, patternColor, patternList, clearPattern, resetPattern, exportAllConfigData, importAllConfigData } = useViewModel()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<dialog id="my_modal_1" ref="resetDataDialogRef" class="border-none modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">
|
||||
{{ t('dialog.titleTip') }}
|
||||
</h3>
|
||||
<p class="py-4">
|
||||
{{ t('dialog.dialogResetAllData') }}
|
||||
</p>
|
||||
<div class="modal-action">
|
||||
<form method="dialog" class="flex gap-3">
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn" @click="resetDataDialogRef.close()">
|
||||
{{ t(`button.cancel`) }}
|
||||
</button>
|
||||
<button class="btn" @click="resetData">
|
||||
{{ t('button.confirm') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<div class="flex flex-col gap-4">
|
||||
<h2>{{ t('viewTitle.globalSetting') }}</h2>
|
||||
<div class="mb-8">
|
||||
<button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">
|
||||
{{ t('button.resetAllData') }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-wrap h-auto w-full gap-6">
|
||||
<!-- 数据操作 -->
|
||||
<DataSetting :reset-data="resetData" :export-all-config-data="exportAllConfigData" :import-all-config-data="importAllConfigData" />
|
||||
<!-- 文本设置（主标题、语言、文字大小） -->
|
||||
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
|
||||
<legend class="fieldset-legend">
|
||||
文本设置
|
||||
</legend>
|
||||
|
||||
<label class="label">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.title') }}</span>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
v-model="topTitleValue" type="text" :placeholder="t('placeHolder.enterTitle')"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.language') }}</span>
|
||||
</div>
|
||||
<select v-model="languageValue" data-choose-theme class="w-full max-w-xs border-solid select border">
|
||||
<option disabled selected>{{ t('table.language') }}</option>
|
||||
<option v-for="item in languageList" :key="item.key" :value="item.key">{{ item.name }}</option>
|
||||
</select>
|
||||
</label>
|
||||
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.textSize') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="textSizeValue" type="number" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
</label>
|
||||
|
||||
<label class="w-full max-w-xs form-control mt-3">
|
||||
<div class="label">
|
||||
<span class="label-text">全局字体</span>
|
||||
</div>
|
||||
<SelectFont v-model:selected-font="currentFontValue" />
|
||||
</label>
|
||||
<label class="flex flex-row w-full max-w-xs mt-5 gap-10 form-control">
|
||||
<div class="w-3/4">
|
||||
<div class="label">
|
||||
<span class="label-text">标题字体</span>
|
||||
</div>
|
||||
<SelectFont v-model:selected-font="currentTitleFontValue" :disabled="titleFontSyncGlobalValue" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="label">
|
||||
<span class="label-text">同全局</span>
|
||||
</div>
|
||||
<input type="checkbox" :checked="titleFontSyncGlobalValue" class="border-solid checkbox checkbox-secondary border" @change="titleFontSyncGlobalValue = !titleFontSyncGlobalValue">
|
||||
</div>
|
||||
</label>
|
||||
</fieldset>
|
||||
<TextSetting
|
||||
v-model:top-title-value="topTitleValue"
|
||||
v-model:language-value="languageValue"
|
||||
v-model:text-size-value="textSizeValue"
|
||||
v-model:current-font-value="currentFontValue"
|
||||
v-model:current-title-font-value="currentTitleFontValue"
|
||||
v-model:title-font-sync-global-value="titleFontSyncGlobalValue"
|
||||
v-model:language-list="languageList"
|
||||
/>
|
||||
<!-- 布局设置（列数、卡片宽度、卡片高度 -->
|
||||
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
|
||||
<legend class="fieldset-legend">
|
||||
布局设置
|
||||
</legend>
|
||||
<label class="flex flex-row items-center form-control">
|
||||
<div class="">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.columnNumber') }}</span>
|
||||
<div class="help">
|
||||
<span v-if="formErr.rowCount" class="text-xs text-red-400 help-text">
|
||||
{{ formErr.rowCount }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<div class="join">
|
||||
<input
|
||||
v-model="formData.rowCount" type="number" placeholder="Type here"
|
||||
class="w-full input input-bordered join-item"
|
||||
>
|
||||
<div class="tooltip join-item" :data-tip="t('tooltip.resetLayout')">
|
||||
<button class="btn btn-neutral w-[120px] join-item" :disabled="isRowCountChange !== 1" @click="resetPersonLayout">
|
||||
<span>{{ t('button.setLayout') }}</span>
|
||||
<span v-show="isRowCountChange === 2" class="loading loading-ring loading-md" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex flex-row w-full max-w-xs gap-10 form-control">
|
||||
<div>
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.cardWidth') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="cardSizeValue.width" type="number" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.cardHeight') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="cardSizeValue.height" type="number" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
</fieldset>
|
||||
<LayoutSetting
|
||||
v-model:form-err="formErr"
|
||||
v-model:form-data="formData"
|
||||
v-model:card-size-value="cardSizeValue"
|
||||
v-model:is-show-prize-list-value="isShowPrizeListValue"
|
||||
v-model:is-show-avatar-value="isShowAvatarValue"
|
||||
:reset-person-layout="resetPersonLayout"
|
||||
:is-row-count-change="isRowCountChange"
|
||||
/>
|
||||
<!-- 主题设置（主题、背景图片） -->
|
||||
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
|
||||
<legend class="fieldset-legend">
|
||||
主题设置
|
||||
</legend>
|
||||
|
||||
<div class="w-full max-w-xs form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.theme') }}</span>
|
||||
</label>
|
||||
<select v-model="themeValue" data-choose-theme class="w-full max-w-xs border-solid select border-1">
|
||||
<option disabled selected>
|
||||
{{ t('table.theme') }}
|
||||
</option>
|
||||
<option v-for="(item, index) in themeList" :key="index" :value="item">
|
||||
{{ item }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full max-w-xs form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.backgroundImage') }}</span>
|
||||
</label>
|
||||
<select
|
||||
v-model="backgroundImageValue" data-choose-theme
|
||||
class="box-border w-full max-w-xs truncate border-solid select border-1"
|
||||
>
|
||||
<option disabled selected class="w-full truncate">
|
||||
{{ t('table.backgroundImage') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
|
||||
:value="item"
|
||||
:title="item.name"
|
||||
class="box-border w-full truncate"
|
||||
>
|
||||
<span class="truncate w-option-xs">{{ item.name }}</span>
|
||||
</option>
|
||||
</select>
|
||||
<span class="label">请先前往
|
||||
<a class="link link-info" @click="() => { router.push('image') }">
|
||||
图片管理
|
||||
</a>
|
||||
上传图片</span>
|
||||
</div>
|
||||
<div class="grid w-full grid-cols-2 gap-4">
|
||||
<div class="flex flex-col items-center max-w-xs gap-1 form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.cardColor') }}</span>
|
||||
</label>
|
||||
<ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center max-w-xs gap-1 form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.winnerColor') }}</span>
|
||||
</label>
|
||||
<ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center max-w-xs gap-1 form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.textColor') }}</span>
|
||||
</label>
|
||||
<ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center max-w-xs gap-1 form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.highlightColor') }}</span>
|
||||
</label>
|
||||
<ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<ThemeSetting
|
||||
v-model:theme-value="themeValue"
|
||||
v-model:background-image-value="backgroundImageValue"
|
||||
v-model:card-color-value="cardColorValue"
|
||||
v-model:lucky-card-color-value="luckyCardColorValue"
|
||||
v-model:text-color-value="textColorValue"
|
||||
v-model:pattern-color-value="patternColorValue"
|
||||
:image-list="imageList"
|
||||
/>
|
||||
<!-- 图案设置 -->
|
||||
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
|
||||
<legend class="fieldset-legend">
|
||||
图案设置
|
||||
</legend>
|
||||
<div class="items-center gap-24 mb-0 form-control">
|
||||
<div>
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.patternSetting') }}</span>
|
||||
</label>
|
||||
<div class="h-auto">
|
||||
<PatternSetting
|
||||
:row-count="rowCount" :card-color="cardColor" :pattern-color="patternColor"
|
||||
:pattern-list="patternList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full gap-3 m-0">
|
||||
<button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
|
||||
<span>{{ t('button.clearPattern') }}</span>
|
||||
</button>
|
||||
<div class="tooltip" :data-tip="t('tooltip.defaultLayout')">
|
||||
<button class="mt-5 btn btn-info btn-sm" @click="resetPattern">
|
||||
<span>{{ t('button.DefaultPattern') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
<!-- 其他设置（是否常显奖项列表、是否显示头像） -->
|
||||
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
|
||||
<legend class="fieldset-legend">
|
||||
其他设置
|
||||
</legend>
|
||||
|
||||
<div class="flex items-center justify-between w-full max-w-xs gap-2 mb-3 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.alwaysDisplay') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox" :checked="isShowPrizeListValue" class="border-solid checkbox checkbox-secondary border"
|
||||
@change="isShowPrizeListValue = !isShowPrizeListValue"
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between w-full max-w-xs gap-2 mb-3 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.avatarDisplay') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox" :checked="isShowAvatarValue" class="border-solid checkbox checkbox-secondary border"
|
||||
@change="isShowAvatarValue = !isShowAvatarValue"
|
||||
>
|
||||
</div>
|
||||
</fieldset>
|
||||
<PatternSetting
|
||||
:row-count="rowCount"
|
||||
:card-color="cardColor"
|
||||
:pattern-color="patternColor"
|
||||
:pattern-list="patternList"
|
||||
:clear-pattern="clearPattern"
|
||||
:reset-pattern="resetPattern"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
87
src/views/Config/Global/FaceConfig/parts/DataSetting.vue
Normal file
87
src/views/Config/Global/FaceConfig/parts/DataSetting.vue
Normal file
@@ -0,0 +1,87 @@
|
||||
<script setup lang='ts'>
|
||||
import { ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import UploadJsonModal from '../components/UploadDialog.vue'
|
||||
|
||||
interface Props {
|
||||
resetData: () => void
|
||||
exportAllConfigData: () => void
|
||||
importAllConfigData: (data: any) => void
|
||||
}
|
||||
|
||||
defineProps<Props>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const resetDataDialogRef = ref()
|
||||
const uploadVisible = ref(false)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<dialog id="my_modal_1" ref="resetDataDialogRef" class="border-none modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">
|
||||
{{ t('dialog.titleTip') }}
|
||||
</h3>
|
||||
<p class="py-4">
|
||||
{{ t('dialog.dialogResetAllData') }}
|
||||
</p>
|
||||
<div class="modal-action">
|
||||
<form method="dialog" class="flex gap-3">
|
||||
<!-- if there is a button in form, it will close the modal -->
|
||||
<button class="btn" @click="resetDataDialogRef.close()">
|
||||
{{ t(`button.cancel`) }}
|
||||
</button>
|
||||
<button class="btn" @click="resetData">
|
||||
{{ t('button.confirm') }}
|
||||
</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<UploadJsonModal v-model:visible="uploadVisible" :import-all-config-data="importAllConfigData" />
|
||||
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
|
||||
<legend class="fieldset-legend">
|
||||
数据操作
|
||||
</legend>
|
||||
<label class="flex flex-row items-center form-control">
|
||||
<div class="">
|
||||
<div class="label flex flex-col justify-start items-start">
|
||||
<span class="label-text text-left">重置数据</span>
|
||||
<div class="help">
|
||||
<button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">
|
||||
{{ t('button.resetAllData') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<!-- <label class="flex flex-row items-center form-control">
|
||||
<div class="">
|
||||
<div class="label flex flex-col justify-start items-start">
|
||||
<span class="label-text text-left">导出数据</span>
|
||||
<div class="help">
|
||||
<button class="btn btn-sm btn-primary" @click="exportAllConfigData">
|
||||
导出全部数据
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex flex-row items-center form-control">
|
||||
<div class="">
|
||||
<div class="label flex flex-col justify-start items-start">
|
||||
<span class="label-text text-left">导入数据</span>
|
||||
<div class="help">
|
||||
<button class="btn btn-sm btn-primary" @click="uploadVisible = true">
|
||||
导入设置
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label> -->
|
||||
</fieldset>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
91
src/views/Config/Global/FaceConfig/parts/LayoutSetting.vue
Normal file
91
src/views/Config/Global/FaceConfig/parts/LayoutSetting.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<script setup lang='ts'>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
interface Props {
|
||||
resetPersonLayout: () => void
|
||||
isRowCountChange: number
|
||||
}
|
||||
defineProps<Props>()
|
||||
|
||||
const { t } = useI18n()
|
||||
const formErr = defineModel<{ rowCount: string }>('formErr', { required: true })
|
||||
const formData = defineModel<{ rowCount: number }>('formData', { required: true })
|
||||
const cardSizeValue = defineModel<{ width: number, height: number }>('cardSizeValue', { required: true })
|
||||
const isShowPrizeListValue = defineModel<boolean>('isShowPrizeListValue', { required: true })
|
||||
const isShowAvatarValue = defineModel<boolean>('isShowAvatarValue', { required: false })
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
|
||||
<legend class="fieldset-legend">
|
||||
布局设置
|
||||
</legend>
|
||||
<label class="flex flex-row items-center form-control">
|
||||
<div class="">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.columnNumber') }}</span>
|
||||
<div class="help">
|
||||
<span v-if="formErr.rowCount" class="text-xs text-red-400 help-text">
|
||||
{{ formErr.rowCount }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<div class="join">
|
||||
<input
|
||||
v-model="formData.rowCount" type="number" placeholder="Type here"
|
||||
class="w-full input input-bordered join-item"
|
||||
>
|
||||
<div class="tooltip join-item" :data-tip="t('tooltip.resetLayout')">
|
||||
<button class="btn btn-neutral w-[120px] join-item" :disabled="isRowCountChange !== 1" @click="resetPersonLayout">
|
||||
<span>{{ t('button.setLayout') }}</span>
|
||||
<span v-show="isRowCountChange === 2" class="loading loading-ring loading-md" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="flex flex-row w-full max-w-xs gap-10 form-control">
|
||||
<div>
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.cardWidth') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="cardSizeValue.width" type="number" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
</div>
|
||||
<div>
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.cardHeight') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="cardSizeValue.height" type="number" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex items-center justify-between w-full max-w-xs gap-2 mb-3 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.alwaysDisplay') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox" :checked="isShowPrizeListValue" class="border-solid checkbox checkbox-secondary border"
|
||||
@change="isShowPrizeListValue = !isShowPrizeListValue"
|
||||
>
|
||||
</div>
|
||||
<div class="flex items-center justify-between w-full max-w-xs gap-2 mb-3 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.avatarDisplay') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox" :checked="isShowAvatarValue" class="border-solid checkbox checkbox-secondary border"
|
||||
@change="isShowAvatarValue = !isShowAvatarValue"
|
||||
>
|
||||
</div>
|
||||
</fieldset>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
50
src/views/Config/Global/FaceConfig/parts/PatternSetting.vue
Normal file
50
src/views/Config/Global/FaceConfig/parts/PatternSetting.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<script setup lang='ts'>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import PatternEdit from '../components/PatternEdit.vue'
|
||||
|
||||
interface Props {
|
||||
rowCount: number
|
||||
cardColor: string
|
||||
patternColor: string
|
||||
patternList: number[]
|
||||
clearPattern: () => void
|
||||
resetPattern: () => void
|
||||
}
|
||||
defineProps<Props>()
|
||||
const { t } = useI18n()
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
|
||||
<legend class="fieldset-legend">
|
||||
图案设置
|
||||
</legend>
|
||||
<div class="items-center gap-24 mb-0 form-control">
|
||||
<div>
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.patternSetting') }}</span>
|
||||
</label>
|
||||
<div class="h-auto">
|
||||
<PatternEdit
|
||||
:row-count="rowCount" :card-color="cardColor" :pattern-color="patternColor"
|
||||
:pattern-list="patternList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex w-full gap-3 m-0">
|
||||
<button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
|
||||
<span>{{ t('button.clearPattern') }}</span>
|
||||
</button>
|
||||
<div class="tooltip" :data-tip="t('tooltip.defaultLayout')">
|
||||
<button class="mt-5 btn btn-info btn-sm" @click="resetPattern">
|
||||
<span>{{ t('button.DefaultPattern') }}</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
72
src/views/Config/Global/FaceConfig/parts/TextSetting.vue
Normal file
72
src/views/Config/Global/FaceConfig/parts/TextSetting.vue
Normal file
@@ -0,0 +1,72 @@
|
||||
<script setup lang='ts'>
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import SelectFont from '../components/SelectFont.vue'
|
||||
|
||||
const { t } = useI18n()
|
||||
const languageList = defineModel<any[]>('languageList')
|
||||
const topTitleValue = defineModel<string>('topTitleValue', { default: '' })
|
||||
const languageValue = defineModel<string>('languageValue', { default: 'zh-CN' })
|
||||
const textSizeValue = defineModel<number>('textSizeValue')
|
||||
const currentFontValue = defineModel<string>('currentFontValue', { default: '', type: String })
|
||||
const currentTitleFontValue = defineModel<string>('currentTitleFontValue', { default: '', type: String })
|
||||
const titleFontSyncGlobalValue = defineModel<boolean>('titleFontSyncGlobalValue')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
|
||||
<legend class="fieldset-legend">
|
||||
文本设置
|
||||
</legend>
|
||||
<label class="label">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.title') }}</span>
|
||||
</div>
|
||||
</label>
|
||||
<input
|
||||
v-model="topTitleValue" type="text" :placeholder="t('placeHolder.enterTitle')"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.language') }}</span>
|
||||
</div>
|
||||
<select v-model="languageValue" data-choose-theme class="w-full max-w-xs border-solid select border">
|
||||
<option disabled selected>{{ t('table.language') }}</option>
|
||||
<option v-for="item in languageList" :key="item.key" :value="item.key">{{ item.name }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.textSize') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="textSizeValue" type="number" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control mt-3">
|
||||
<div class="label">
|
||||
<span class="label-text">全局字体</span>
|
||||
</div>
|
||||
<SelectFont v-model:selected-font="currentFontValue" />
|
||||
</label>
|
||||
<label class="flex flex-row w-full max-w-xs mt-5 gap-10 form-control">
|
||||
<div class="w-3/4">
|
||||
<div class="label">
|
||||
<span class="label-text">标题字体</span>
|
||||
</div>
|
||||
<SelectFont v-model:selected-font="currentTitleFontValue" :disabled="titleFontSyncGlobalValue" />
|
||||
</div>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="label">
|
||||
<span class="label-text">同全局</span>
|
||||
</div>
|
||||
<input type="checkbox" :checked="titleFontSyncGlobalValue" class="border-solid checkbox checkbox-secondary border" @change="titleFontSyncGlobalValue = !titleFontSyncGlobalValue">
|
||||
</div>
|
||||
</label>
|
||||
</fieldset>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
101
src/views/Config/Global/FaceConfig/parts/ThemeSetting.vue
Normal file
101
src/views/Config/Global/FaceConfig/parts/ThemeSetting.vue
Normal file
@@ -0,0 +1,101 @@
|
||||
<script setup lang='ts'>
|
||||
import { reactive } from 'vue'
|
||||
import { ColorPicker } from 'vue3-colorpicker'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import { useRouter } from 'vue-router'
|
||||
import { daisyuiThemes } from '@/constant/theme'
|
||||
import 'vue3-colorpicker/style.css'
|
||||
|
||||
interface Props {
|
||||
imageList: Array<{ name: string, url: string, id: string }>
|
||||
}
|
||||
defineProps<Props>()
|
||||
const themeList = reactive(daisyuiThemes)
|
||||
const router = useRouter()
|
||||
const { t } = useI18n()
|
||||
|
||||
const themeValue = defineModel<string>('themeValue')
|
||||
const backgroundImageValue = defineModel<object>('backgroundImageValue')
|
||||
const cardColorValue = defineModel<string>('cardColorValue')
|
||||
const luckyCardColorValue = defineModel<string>('luckyCardColorValue')
|
||||
const textColorValue = defineModel<string>('textColorValue')
|
||||
const patternColorValue = defineModel<string>('patternColorValue')
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<fieldset class="p-4 border text-setting fieldset bg-base-200 border-base-300 rounded-box w-xs pb-10">
|
||||
<legend class="fieldset-legend">
|
||||
主题设置
|
||||
</legend>
|
||||
|
||||
<div class="w-full max-w-xs form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.theme') }}</span>
|
||||
</label>
|
||||
<select v-model="themeValue" data-choose-theme class="w-full max-w-xs border-solid select border">
|
||||
<option disabled selected>
|
||||
{{ t('table.theme') }}
|
||||
</option>
|
||||
<option v-for="(item, index) in themeList" :key="index" :value="item">
|
||||
{{ item }}
|
||||
</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="w-full max-w-xs form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.backgroundImage') }}</span>
|
||||
</label>
|
||||
<select
|
||||
v-model="backgroundImageValue" data-choose-theme
|
||||
class="box-border w-full max-w-xs truncate border-solid select border"
|
||||
>
|
||||
<option disabled selected class="w-full truncate">
|
||||
{{ t('table.backgroundImage') }}
|
||||
</option>
|
||||
<option
|
||||
v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
|
||||
:value="item"
|
||||
:title="item.name"
|
||||
class="box-border w-full truncate"
|
||||
>
|
||||
<span class="truncate w-option-xs">{{ item.name }}</span>
|
||||
</option>
|
||||
</select>
|
||||
<span class="label">请先前往
|
||||
<a class="link link-info" @click="() => { router.push('image') }">
|
||||
图片管理
|
||||
</a>
|
||||
上传图片</span>
|
||||
</div>
|
||||
<div class="grid w-full grid-cols-2 gap-4">
|
||||
<div class="flex flex-col items-center max-w-xs gap-1 form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.cardColor') }}</span>
|
||||
</label>
|
||||
<ColorPicker v-model="cardColorValue" v-model:pure-color="cardColorValue" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center max-w-xs gap-1 form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.winnerColor') }}</span>
|
||||
</label>
|
||||
<ColorPicker v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center max-w-xs gap-1 form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.textColor') }}</span>
|
||||
</label>
|
||||
<ColorPicker v-model="textColorValue" v-model:pure-color="textColorValue" />
|
||||
</div>
|
||||
<div class="flex flex-col items-center max-w-xs gap-1 form-control">
|
||||
<label class="label">
|
||||
<span class="label-text">{{ t('table.highlightColor') }}</span>
|
||||
</label>
|
||||
<ColorPicker v-model="patternColorValue" v-model:pure-color="patternColorValue" />
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
5
src/views/Config/Global/FaceConfig/parts/index.ts
Normal file
5
src/views/Config/Global/FaceConfig/parts/index.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export { default as DataSetting } from './DataSetting.vue'
|
||||
export { default as LayoutSetting } from './LayoutSetting.vue'
|
||||
export { default as PatternSetting } from './PatternSetting.vue'
|
||||
export { default as TextSetting } from './TextSetting.vue'
|
||||
export { default as ThemeSetting } from './ThemeSetting.vue'
|
||||
207
src/views/Config/Global/FaceConfig/useViewModel.ts
Normal file
207
src/views/Config/Global/FaceConfig/useViewModel.ts
Normal file
@@ -0,0 +1,207 @@
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { z as zod } from 'zod'
|
||||
import i18n, { languageList } from '@/locales/i18n'
|
||||
import useStore from '@/store'
|
||||
import { themeChange } from '@/utils'
|
||||
import { clearAllDbStore } from '@/utils/localforage'
|
||||
|
||||
export function useViewModel() {
|
||||
type ValidatePayload = zod.infer<typeof schema>
|
||||
const globalConfig = useStore().globalConfig
|
||||
const personConfig = useStore().personConfig
|
||||
const prizeConfig = useStore().prizeConfig
|
||||
const { getGlobalConfig: globalConfigData, getTopTitle: topTitle, getTheme: localTheme, getPatterColor: patternColor, getPatternList: patternList, getCardColor: cardColor, getLuckyColor: luckyCardColor, getTextColor: textColor, getCardSize: cardSize, getTextSize: textSize, getRowCount: rowCount, getIsShowPrizeList: isShowPrizeList, getLanguage: userLanguage, getBackground: backgroundImage, getFont: currentFont, getTitleFont: currentTitleFont, getTitleFontSyncGlobal: titleFontSyncGlobal, getImageList: imageList, getIsShowAvatar: isShowAvatar,
|
||||
} = storeToRefs(globalConfig)
|
||||
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
|
||||
|
||||
const isRowCountChange = ref(0) // 0未改变，1改变,2加载中
|
||||
const themeValue = ref(localTheme.value.name)
|
||||
const topTitleValue = ref(structuredClone(topTitle.value))
|
||||
const cardColorValue = ref(structuredClone(cardColor.value))
|
||||
const luckyCardColorValue = ref(structuredClone(luckyCardColor.value))
|
||||
const textColorValue = ref(structuredClone(textColor.value))
|
||||
const cardSizeValue = ref(structuredClone(cardSize.value))
|
||||
const textSizeValue = ref(structuredClone(textSize.value))
|
||||
const rowCountValue = ref(structuredClone(rowCount.value))
|
||||
const languageValue = ref(structuredClone(userLanguage.value))
|
||||
const isShowPrizeListValue = ref(structuredClone(isShowPrizeList.value))
|
||||
const isShowAvatarValue = ref(structuredClone(isShowAvatar.value))
|
||||
const patternColorValue = ref(structuredClone(patternColor.value))
|
||||
const backgroundImageValue = ref(backgroundImage.value)
|
||||
const currentFontValue = ref(structuredClone(currentFont.value))
|
||||
const currentTitleFontValue = ref(structuredClone(currentTitleFont.value))
|
||||
const titleFontSyncGlobalValue = ref(structuredClone(titleFontSyncGlobal.value))
|
||||
const formData = ref({
|
||||
rowCount: rowCountValue,
|
||||
})
|
||||
const formErr = ref({
|
||||
rowCount: '',
|
||||
})
|
||||
const schema = zod.object({
|
||||
rowCount: zod.number({
|
||||
error: i18n.global.t('error.require'),
|
||||
// required_error: i18n.global.t('error.require'),
|
||||
// invalid_type_error: i18n.global.t('error.requireNumber'),
|
||||
})
|
||||
.min(1, i18n.global.t('error.minNumber1'))
|
||||
.max(100, i18n.global.t('error.maxNumber100')),
|
||||
// 格式化
|
||||
|
||||
})
|
||||
const payload: ValidatePayload = {
|
||||
rowCount: formData.value.rowCount,
|
||||
}
|
||||
function parseSchema(props: ValidatePayload) {
|
||||
return schema.parseAsync(props)
|
||||
}
|
||||
|
||||
function resetPersonLayout() {
|
||||
isRowCountChange.value = 2
|
||||
setTimeout(() => {
|
||||
const alreadyLen = alreadyPersonList.value.length
|
||||
const notLen = notPersonList.value.length
|
||||
if (alreadyLen <= 0 && notLen <= 0) {
|
||||
return
|
||||
}
|
||||
const allPersonList = alreadyPersonList.value.concat(notPersonList.value)
|
||||
const newAlreadyPersonList = allPersonList.slice(0, alreadyLen)
|
||||
const newNotPersonList = allPersonList.slice(alreadyLen, notLen + alreadyLen)
|
||||
personConfig.deleteAllPerson()
|
||||
personConfig.addNotPersonList(newNotPersonList)
|
||||
personConfig.addAlreadyPersonList(newAlreadyPersonList, null)
|
||||
|
||||
isRowCountChange.value = 0
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
function clearPattern() {
|
||||
globalConfig.setPatternList([] as number[])
|
||||
}
|
||||
function resetPattern() {
|
||||
globalConfig.resetPatternList()
|
||||
}
|
||||
|
||||
function resetData() {
|
||||
globalConfig.reset()
|
||||
personConfig.reset()
|
||||
prizeConfig.resetDefault()
|
||||
// 删除所有indexDb
|
||||
clearAllDbStore()
|
||||
// 刷新页面
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
function exportAllConfigData() {
|
||||
// const globalConfigData = globalConfig.getGlobalConfig()
|
||||
// console.log(globalConfigData.value)
|
||||
// const globalConfigData = globalConfig.getGlobalConfig()
|
||||
const dataStr = JSON.stringify(globalConfigData.value, null, 2)
|
||||
const dataUri = `data:application/json;charset=utf-8,${encodeURIComponent(dataStr)}`
|
||||
|
||||
const exportFileDefaultName = 'global-config.json'
|
||||
|
||||
const linkElement = document.createElement('a')
|
||||
linkElement.setAttribute('href', dataUri)
|
||||
linkElement.setAttribute('download', exportFileDefaultName)
|
||||
linkElement.click()
|
||||
}
|
||||
function importAllConfigData(data: any) {
|
||||
globalConfig.setGlobalConfig(data)
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
watch(() => formData.value.rowCount, () => {
|
||||
payload.rowCount = formData.value.rowCount
|
||||
parseSchema(payload).then((res) => {
|
||||
if (res.rowCount) {
|
||||
isRowCountChange.value = 1
|
||||
globalConfig.setRowCount(res.rowCount)
|
||||
}
|
||||
}).catch((err) => {
|
||||
formErr.value.rowCount = err.issues[0].message
|
||||
})
|
||||
})
|
||||
|
||||
watch(topTitleValue, (val) => {
|
||||
globalConfig.setTopTitle(val)
|
||||
})
|
||||
watch(themeValue, (val: any) => {
|
||||
globalConfig.setTheme({ name: val })
|
||||
themeChange(val)
|
||||
}, { deep: true })
|
||||
|
||||
watch(cardColorValue, (val: string) => {
|
||||
globalConfig.setCardColor(val)
|
||||
}, { deep: true })
|
||||
watch(luckyCardColorValue, (val: string) => {
|
||||
globalConfig.setLuckyCardColor(val)
|
||||
}, { deep: true })
|
||||
watch(patternColorValue, (val: string) => {
|
||||
globalConfig.setPatterColor(val)
|
||||
})
|
||||
watch(textColorValue, (val: string) => {
|
||||
globalConfig.setTextColor(val)
|
||||
}, { deep: true })
|
||||
|
||||
watch(cardSizeValue, (val: { width: number, height: number }) => {
|
||||
globalConfig.setCardSize(val)
|
||||
}, { deep: true })
|
||||
|
||||
watch(isShowPrizeListValue, () => {
|
||||
globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
|
||||
})
|
||||
watch(backgroundImageValue, (val) => {
|
||||
globalConfig.setBackground(val)
|
||||
})
|
||||
watch(currentFontValue, (val) => {
|
||||
globalConfig.setFont(val)
|
||||
document.documentElement.style.setProperty('--app-font-family', `"${val}", -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif`)
|
||||
})
|
||||
watch(currentTitleFontValue, (val) => {
|
||||
globalConfig.setTitleFont(val)
|
||||
})
|
||||
watch(titleFontSyncGlobalValue, (val) => {
|
||||
globalConfig.setTitleFontSyncGlobal(val)
|
||||
})
|
||||
watch(languageValue, (val: string) => {
|
||||
globalConfig.setLanguage(val)
|
||||
})
|
||||
watch(isShowAvatarValue, () => {
|
||||
globalConfig.setIsShowAvatar(isShowAvatarValue.value)
|
||||
})
|
||||
onMounted(() => {
|
||||
})
|
||||
return {
|
||||
resetData,
|
||||
topTitleValue,
|
||||
languageValue,
|
||||
textSizeValue,
|
||||
currentFontValue,
|
||||
currentTitleFontValue,
|
||||
titleFontSyncGlobalValue,
|
||||
languageList,
|
||||
formErr,
|
||||
formData,
|
||||
cardSizeValue,
|
||||
isShowPrizeListValue,
|
||||
isShowAvatarValue,
|
||||
resetPersonLayout,
|
||||
isRowCountChange,
|
||||
themeValue,
|
||||
backgroundImageValue,
|
||||
cardColorValue,
|
||||
luckyCardColorValue,
|
||||
textColorValue,
|
||||
patternColorValue,
|
||||
imageList,
|
||||
rowCount,
|
||||
cardColor,
|
||||
patternColor,
|
||||
patternList,
|
||||
clearPattern,
|
||||
resetPattern,
|
||||
exportAllConfigData,
|
||||
importAllConfigData,
|
||||
}
|
||||
}
|
||||
@@ -10,7 +10,6 @@ import FileUpload from '@/components/FileUpload/index.vue'
|
||||
import useStore from '@/store'
|
||||
|
||||
const toast = useToast()
|
||||
const { t } = useI18n()
|
||||
const limitType = ref('audio/*')
|
||||
const visible = defineModel('visible', {
|
||||
type: Boolean,
|
||||
|
||||
Reference in New Issue
Block a user