feat: fork同步代码
This commit is contained in:
hujinbin
@@ -1,26 +1,31 @@
|
||||
<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'
|
||||
import { ColorPicker } from 'vue3-colorpicker';
|
||||
import 'vue3-colorpicker/style.css';
|
||||
import { isRgbOrRgba, isHex } from '@/utils/color'
|
||||
import PatternSetting from './components/PatternSetting.vue'
|
||||
import i18n, { languageList } from '@/locales/i18n'
|
||||
|
||||
import useStore from '@/store'
|
||||
import { themeChange } from '@/utils'
|
||||
import { isHex, isRgbOrRgba } from '@/utils/color'
|
||||
import daisyuiThemes from 'daisyui/src/theming/themes'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { ColorPicker } from 'vue3-colorpicker'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
import zod from 'zod'
|
||||
import PatternSetting from './components/PatternSetting.vue'
|
||||
import 'vue3-colorpicker/style.css'
|
||||
|
||||
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, getIsShowAvatar: isShowAvatar } = storeToRefs(globalConfig)
|
||||
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, getImageList: imageList,
|
||||
} = storeToRefs(globalConfig)
|
||||
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
|
||||
const colorPickerRef = ref()
|
||||
const resetDataDialogRef=ref()
|
||||
const resetDataDialogRef = ref()
|
||||
interface ThemeDaType {
|
||||
[key: string]: any
|
||||
[key: string]: any
|
||||
}
|
||||
const isRowCountChange = ref(0) //0未改变，1改变,2加载中
|
||||
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))
|
||||
@@ -29,69 +34,69 @@ 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(Object.keys(daisyuiThemes))
|
||||
const daisyuiThemeList = ref<ThemeDaType>(daisyuiThemes)
|
||||
const backgroundImageValue = ref(backgroundImage.value)
|
||||
const formData = ref({
|
||||
rowCount: rowCountValue,
|
||||
rowCount: rowCountValue,
|
||||
})
|
||||
const formErr = ref({
|
||||
rowCount: '',
|
||||
rowCount: '',
|
||||
})
|
||||
|
||||
const schema = zod.object({
|
||||
rowCount: zod.number({
|
||||
required_error: '必填项',
|
||||
invalid_type_error: '必须填入数字',
|
||||
})
|
||||
.min(1, '最小为1')
|
||||
.max(100, '最大为100')
|
||||
// 格式化
|
||||
|
||||
rowCount: zod.number({
|
||||
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,
|
||||
rowCount: formData.value.rowCount,
|
||||
}
|
||||
const parseSchema = (props: ValidatePayload) => {
|
||||
return schema.parseAsync(props)
|
||||
function parseSchema(props: ValidatePayload) {
|
||||
return schema.parseAsync(props)
|
||||
}
|
||||
|
||||
const 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)
|
||||
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)
|
||||
isRowCountChange.value = 0
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
const clearPattern = () => {
|
||||
globalConfig.setPatternList([] as number[])
|
||||
function clearPattern() {
|
||||
globalConfig.setPatternList([] as number[])
|
||||
}
|
||||
const resetPattern = () => {
|
||||
globalConfig.resetPatternList()
|
||||
function resetPattern() {
|
||||
globalConfig.resetPatternList()
|
||||
}
|
||||
|
||||
const resetData=()=>{
|
||||
globalConfig.reset();
|
||||
personConfig.reset();
|
||||
prizeConfig.resetDefault();
|
||||
// 刷新页面
|
||||
window.location.reload()
|
||||
function resetData() {
|
||||
globalConfig.reset()
|
||||
personConfig.reset()
|
||||
prizeConfig.resetDefault()
|
||||
// 刷新页面
|
||||
window.location.reload()
|
||||
}
|
||||
|
||||
// const handleChangeShowFields = (fieldItem: any) => {
|
||||
@@ -103,48 +108,54 @@ const resetData=()=>{
|
||||
// }
|
||||
|
||||
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
|
||||
})
|
||||
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(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)
|
||||
globalConfig.setCardColor(val)
|
||||
}, { deep: true })
|
||||
watch(luckyCardColorValue, (val: string) => {
|
||||
globalConfig.setLuckyCardColor(val)
|
||||
globalConfig.setLuckyCardColor(val)
|
||||
}, { deep: true })
|
||||
watch(patternColorValue, (val: string) => {
|
||||
globalConfig.setPatterColor(val)
|
||||
globalConfig.setPatterColor(val)
|
||||
})
|
||||
watch(textColorValue, (val: string) => {
|
||||
globalConfig.setTextColor(val)
|
||||
globalConfig.setTextColor(val)
|
||||
}, { deep: true })
|
||||
|
||||
watch(cardSizeValue, (val: { width: number, height: number }) => {
|
||||
globalConfig.setCardSize(val)
|
||||
}, { deep: true })
|
||||
|
||||
watch(cardSizeValue, (val: { width: number; height: number; }) => {
|
||||
globalConfig.setCardSize(val)
|
||||
}, { deep: true }),
|
||||
watch(isShowPrizeListValue, () => {
|
||||
globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
|
||||
globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
|
||||
})
|
||||
watch(backgroundImageValue, (val) => {
|
||||
globalConfig.setBackground(val)
|
||||
})
|
||||
watch(languageValue, (val: string) => {
|
||||
globalConfig.setLanguage(val)
|
||||
})
|
||||
watch(isShowAvatarValue, () => {
|
||||
globalConfig.setIsShowAvatar(isShowAvatarValue.value)
|
||||
@@ -154,153 +165,190 @@ onMounted(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<dialog id="my_modal_1" ref="resetDataDialogRef" class="border-none modal">
|
||||
<div class="modal-box">
|
||||
<h3 class="text-lg font-bold">提示!</h3>
|
||||
<p class="py-4">该操作会重置所有数据，是否继续？</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()">取消</button>
|
||||
<button class="btn" @click="resetData">确定</button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</dialog>
|
||||
<div>
|
||||
<h2>全局配置</h2>
|
||||
<div class="mb-8">
|
||||
<button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">重置所有数据</button>
|
||||
</div>
|
||||
<label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
|
||||
<div class="">
|
||||
<div class="label">
|
||||
<span class="label-text">标题</span>
|
||||
</div>
|
||||
<input type="text" v-model="topTitleValue" placeholder="输入标题"
|
||||
class="w-full max-w-xs input input-bordered" />
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
|
||||
<div class="">
|
||||
<div class="label">
|
||||
<span class="label-text">列数</span>
|
||||
</div>
|
||||
<input type="number" v-model="formData.rowCount" 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="tooltip" data-tip="该项比较耗费时间和性能">
|
||||
<button class="mt-5 btn btn-info btn-sm" :disabled="isRowCountChange != 1" @click="resetPersonLayout">
|
||||
<span>重设布局</span>
|
||||
<span class="loading loading-ring loading-md" v-show="isRowCountChange == 2"></span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</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="luckyCardColorValue" v-model:pure-color="luckyCardColorValue">
|
||||
</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>
|
||||
<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>
|
||||
</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>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">高亮颜色</span>
|
||||
</div>
|
||||
<ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue">
|
||||
</ColorPicker>
|
||||
</label>
|
||||
<label class="flex flex-row items-center w-full gap-24 mb-0 form-control">
|
||||
<div>
|
||||
<div class="label">
|
||||
<span class="label-text">图案设置</span>
|
||||
</div>
|
||||
<div class="h-auto">
|
||||
<PatternSetting :rowCount="rowCount" :cardColor="cardColor" :patternColor="patternColor"
|
||||
:patternList="patternList"></PatternSetting>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex w-full h-24 gap-3 m-0">
|
||||
<button class="mt-5 btn btn-info btn-sm" @click.stop="clearPattern">
|
||||
<span>清空图案设置</span>
|
||||
</button>
|
||||
<div class="tooltip" data-tip="默认图案设置针对17列时有效，其他列数请自行设置">
|
||||
<button class="mt-5 btn btn-info btn-sm" @click="resetPattern">
|
||||
<span>默认图案设置</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">是否常显奖品列表</span>
|
||||
</div>
|
||||
<input type="checkbox" :checked="isShowPrizeListValue" @change="isShowPrizeListValue = !isShowPrizeListValue"
|
||||
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="checkbox" :checked="isShowAvatarValue" @change="isShowAvatarValue = !isShowAvatarValue"
|
||||
class="mt-2 border-solid checkbox checkbox-secondary border-1" />
|
||||
</label>
|
||||
|
||||
<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>
|
||||
<h2>{{ t('viewTitle.globalSetting') }}</h2>
|
||||
<div class="mb-8">
|
||||
<button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">
|
||||
{{ t('button.resetAllData') }}
|
||||
</button>
|
||||
</div>
|
||||
<label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
|
||||
<div class="">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.title') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="topTitleValue" type="text" :placeholder="t('placeHolder.enterTitle')"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
</div>
|
||||
</label>
|
||||
<label class="flex flex-row items-center w-full gap-24 mb-10 form-control">
|
||||
<div class="">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.columnNumber') }}</span>
|
||||
</div>
|
||||
<input
|
||||
v-model="formData.rowCount" type="number" placeholder="Type here"
|
||||
class="w-full max-w-xs input input-bordered"
|
||||
>
|
||||
<div class="help">
|
||||
<span v-if="formErr.rowCount" class="text-sm text-red-400 help-text">
|
||||
{{ formErr.rowCount }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="tooltip" :data-tip="t('tooltip.resetLayout')">
|
||||
<button class="mt-5 btn btn-info btn-sm" :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>
|
||||
<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-1">
|
||||
<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.theme') }}</span>
|
||||
</div>
|
||||
<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>
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.backgroundImage') }}</span>
|
||||
</div>
|
||||
<select
|
||||
v-model="backgroundImageValue" data-choose-theme
|
||||
class="w-full max-w-xs border-solid select border-1"
|
||||
>
|
||||
<option disabled selected>{{ t('table.backgroundImage') }}</option>
|
||||
<option
|
||||
v-for="(item, index) in [{ name: '❌', url: '', id: '' }, ...imageList]" :key="index"
|
||||
:value="item"
|
||||
>{{ item.name }}</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.cardColor') }}</span>
|
||||
</div>
|
||||
<ColorPicker ref="colorPickerRef" v-model="cardColorValue" v-model:pure-color="cardColorValue" />
|
||||
</label>
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.winnerColor') }}</span>
|
||||
</div>
|
||||
<ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue" />
|
||||
</label>
|
||||
|
||||
<label class="w-full max-w-xs form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.textColor') }}</span>
|
||||
</div>
|
||||
<ColorPicker ref="colorPickerRef" v-model="textColorValue" v-model:pure-color="textColorValue" />
|
||||
</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">{{ 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>
|
||||
<label class="w-full max-w-xs mb-10 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">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.highlightColor') }}</span>
|
||||
</div>
|
||||
<ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue" />
|
||||
</label>
|
||||
<label class="flex flex-row items-center w-full gap-24 mb-0 form-control">
|
||||
<div>
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.patternSetting') }}</span>
|
||||
</div>
|
||||
<div class="h-auto">
|
||||
<PatternSetting
|
||||
:row-count="rowCount" :card-color="cardColor" :pattern-color="patternColor"
|
||||
:pattern-list="patternList"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</label>
|
||||
<div class="flex w-full h-24 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>
|
||||
|
||||
<label class="w-full max-w-xs mb-10 form-control">
|
||||
<div class="label">
|
||||
<span class="label-text">{{ t('table.alwaysDisplay') }}</span>
|
||||
</div>
|
||||
<input
|
||||
type="checkbox" :checked="isShowPrizeListValue" class="mt-2 border-solid checkbox checkbox-secondary border-1"
|
||||
@change="isShowPrizeListValue = !isShowPrizeListValue"
|
||||
>
|
||||
</label>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
|
||||
@@ -1,111 +1,118 @@
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted, watch } from 'vue'
|
||||
import { IImage } from '@/types/storeType'
|
||||
import type { IImage } from '@/types/storeType'
|
||||
import ImageSync from '@/components/ImageSync/index.vue'
|
||||
import useStore from '@/store'
|
||||
import { readFileData } from '@/utils/file'
|
||||
import localforage from 'localforage'
|
||||
import useStore from '@/store'
|
||||
import { storeToRefs } from 'pinia'
|
||||
import ImageSync from '@/components/ImageSync/index.vue'
|
||||
import { onMounted, ref, watch } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
|
||||
const globalConfig= useStore().globalConfig
|
||||
const { getImageList:localImageList} = storeToRefs(globalConfig)
|
||||
const { t } = useI18n()
|
||||
const globalConfig = useStore().globalConfig
|
||||
const { getImageList: localImageList } = storeToRefs(globalConfig)
|
||||
const limitType = ref('image/*')
|
||||
const imgUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
|
||||
const imgUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
|
||||
const imageDbStore = localforage.createInstance({
|
||||
name: 'imgStore'
|
||||
name: 'imgStore',
|
||||
})
|
||||
const handleFileChange = async (e: Event) => {
|
||||
const isImage= /image*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
|
||||
if (!isImage) {
|
||||
imgUploadToast.value = 3
|
||||
async function handleFileChange(e: Event) {
|
||||
const isImage = /image*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
|
||||
if (!isImage) {
|
||||
imgUploadToast.value = 3
|
||||
|
||||
return
|
||||
}
|
||||
let { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
|
||||
imageDbStore.setItem(new Date().getTime().toString() + '+' + fileName, dataUrl)
|
||||
.then(() => {
|
||||
imgUploadToast.value = 1
|
||||
getImageDbStore()
|
||||
})
|
||||
.catch(() => {
|
||||
imgUploadToast.value = 2
|
||||
})
|
||||
return
|
||||
}
|
||||
const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
|
||||
imageDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
|
||||
.then(() => {
|
||||
imgUploadToast.value = 1
|
||||
getImageDbStore()
|
||||
})
|
||||
.catch(() => {
|
||||
imgUploadToast.value = 2
|
||||
})
|
||||
}
|
||||
|
||||
const getImageDbStore =async () => {
|
||||
const keys =await imageDbStore.keys()
|
||||
if(keys.length>0){
|
||||
imageDbStore.iterate((value, key) => {
|
||||
globalConfig.addImage({
|
||||
id:key,
|
||||
name:key,
|
||||
url:'Storage'
|
||||
})
|
||||
})
|
||||
}
|
||||
async function getImageDbStore() {
|
||||
const keys = await imageDbStore.keys()
|
||||
if (keys.length > 0) {
|
||||
imageDbStore.iterate((value, key) => {
|
||||
globalConfig.addImage({
|
||||
id: key,
|
||||
name: key,
|
||||
url: 'Storage',
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
|
||||
const removeImage=(item:IImage)=>{
|
||||
if(item.url=='Storage'){
|
||||
imageDbStore.removeItem(item.id).then(() => {
|
||||
globalConfig.removeImage(item.id)
|
||||
})
|
||||
}
|
||||
globalConfig.removeImage(item.id)
|
||||
function removeImage(item: IImage) {
|
||||
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) {
|
||||
setTimeout(() => {
|
||||
imgUploadToast.value = 0
|
||||
}, 2000)
|
||||
}
|
||||
if (val !== 0) {
|
||||
setTimeout(() => {
|
||||
imgUploadToast.value = 0
|
||||
}, 2000)
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="toast toast-top toast-end">
|
||||
<div class="alert alert-error" v-if="imgUploadToast == 2">
|
||||
<span>上传失败</span>
|
||||
</div>
|
||||
<div class="alert alert-success" v-if="imgUploadToast == 1">
|
||||
<span>上传成功</span>
|
||||
</div>
|
||||
<div class="alert alert-error" v-if="imgUploadToast == 3">
|
||||
<span>不是图片</span>
|
||||
</div>
|
||||
<div class="toast toast-top toast-end">
|
||||
<div v-if="imgUploadToast === 2" class="alert alert-error">
|
||||
<span>{{ t('error.uploadFail') }}</span>
|
||||
</div>
|
||||
<div v-if="imgUploadToast === 1" class="alert alert-success">
|
||||
<span>{{ t('error.uploadSuccess') }}</span>
|
||||
</div>
|
||||
<div v-if="imgUploadToast === 3" class="alert alert-error">
|
||||
<span>{{ t('error.notImage') }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<div class="">
|
||||
<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>
|
||||
</div>
|
||||
<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 :imgItem="item"></ImageSync>
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-64">
|
||||
<div class="overflow-hidden font-bold whitespace-nowrap text-ellipsis">{{ item.name}}</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-error btn-xs" @click="removeImage(item)">删除</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
<div>
|
||||
<div class="">
|
||||
<label for="explore">
|
||||
<input
|
||||
id="explore" type="file" class="" style="display: none" :accept="limitType"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
<span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
|
||||
</label>
|
||||
</div>
|
||||
<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 :img-item="item" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="w-64">
|
||||
<div class="overflow-hidden font-bold whitespace-nowrap text-ellipsis">
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<button class="btn btn-error btn-xs" @click="removeImage(item)">
|
||||
{{ t('button.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
|
||||
@@ -1,102 +1,113 @@
|
||||
<script setup lang='ts'>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import {storeToRefs } from 'pinia'
|
||||
import { IMusic } from '@/types/storeType';
|
||||
import type { IMusic } from '@/types/storeType'
|
||||
import useStore from '@/store'
|
||||
import { readFileData } from '@/utils/file'
|
||||
import useStore from '@/store';
|
||||
|
||||
import localforage from 'localforage'
|
||||
import { storeToRefs } from 'pinia'
|
||||
|
||||
const audioUploadToast = ref(0) //0是不显示，1是成功，2是失败,3是不是图片
|
||||
import { onMounted, ref } from 'vue'
|
||||
import { useI18n } from 'vue-i18n'
|
||||
|
||||
const { t } = useI18n()
|
||||
const audioUploadToast = ref(0) // 0是不显示，1是成功，2是失败,3是不是图片
|
||||
const audioDbStore = localforage.createInstance({
|
||||
name: 'audioStore'
|
||||
name: 'audioStore',
|
||||
})
|
||||
const globalConfig = useStore().globalConfig
|
||||
|
||||
const { getMusicList: localMusicList } = storeToRefs(globalConfig);
|
||||
const { getMusicList: localMusicList } = storeToRefs(globalConfig)
|
||||
const limitType = ref('audio/*')
|
||||
const localMusicListValue = ref(localMusicList)
|
||||
const play = async (item: IMusic) => {
|
||||
globalConfig.setCurrentMusic(item,false)
|
||||
async function play(item: IMusic) {
|
||||
globalConfig.setCurrentMusic(item, false)
|
||||
}
|
||||
|
||||
const deleteMusic = (item: IMusic) => {
|
||||
globalConfig.removeMusic(item.id)
|
||||
audioDbStore.removeItem(item.name)
|
||||
// setTimeout(()=>{
|
||||
// localMusicListValue.value=localMusicList
|
||||
// },100)
|
||||
function deleteMusic(item: IMusic) {
|
||||
globalConfig.removeMusic(item.id)
|
||||
audioDbStore.removeItem(item.name)
|
||||
// setTimeout(()=>{
|
||||
// localMusicListValue.value=localMusicList
|
||||
// },100)
|
||||
}
|
||||
const resetMusic = () => {
|
||||
globalConfig.resetMusicList()
|
||||
audioDbStore.clear()
|
||||
function resetMusic() {
|
||||
globalConfig.resetMusicList()
|
||||
audioDbStore.clear()
|
||||
}
|
||||
const deleteAll = () => {
|
||||
globalConfig.clearMusicList()
|
||||
audioDbStore.clear()
|
||||
function deleteAll() {
|
||||
globalConfig.clearMusicList()
|
||||
audioDbStore.clear()
|
||||
}
|
||||
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',
|
||||
})
|
||||
})
|
||||
}
|
||||
async function getMusicDbStore() {
|
||||
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: Event) => {
|
||||
const isAudio = /audio*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
|
||||
if (!isAudio) {
|
||||
audioUploadToast.value = 3
|
||||
async function handleFileChange(e: Event) {
|
||||
const isAudio = /audio*/.test(((e.target as HTMLInputElement).files as FileList)[0].type)
|
||||
if (!isAudio) {
|
||||
audioUploadToast.value = 3
|
||||
|
||||
return
|
||||
}
|
||||
let { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
|
||||
audioDbStore.setItem(new Date().getTime().toString() + '+' + fileName, dataUrl)
|
||||
.then(() => {
|
||||
audioUploadToast.value = 1
|
||||
getMusicDbStore()
|
||||
})
|
||||
.catch(() => {
|
||||
audioUploadToast.value = 2
|
||||
})
|
||||
return
|
||||
}
|
||||
const { dataUrl, fileName } = await readFileData(((e.target as HTMLInputElement).files as FileList)[0])
|
||||
audioDbStore.setItem(`${new Date().getTime().toString()}+${fileName}`, dataUrl)
|
||||
.then(() => {
|
||||
audioUploadToast.value = 1
|
||||
getMusicDbStore()
|
||||
})
|
||||
.catch(() => {
|
||||
audioUploadToast.value = 2
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
onMounted(() => {
|
||||
getMusicDbStore()
|
||||
getMusicDbStore()
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex gap-3">
|
||||
<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-error btn-sm" @click="deleteAll">删除所有</button>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
{{ 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>
|
||||
<div class="flex gap-3">
|
||||
<button class="btn btn-primary btn-sm" @click="resetMusic">
|
||||
{{ t('button.reset') }}
|
||||
</button>
|
||||
<label for="explore">
|
||||
<input
|
||||
id="explore" type="file" class="" style="display: none" :accept="limitType"
|
||||
@change="handleFileChange"
|
||||
>
|
||||
<span class="btn btn-primary btn-sm">{{ t('button.upload') }}</span>
|
||||
</label>
|
||||
<button class="btn btn-error btn-sm" @click="deleteAll">
|
||||
{{ t('button.allDelete') }}
|
||||
</button>
|
||||
</div>
|
||||
<div>
|
||||
<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>
|
||||
{{ item.name }}</span>
|
||||
</div>
|
||||
<div class="flex gap-3">
|
||||
<button class="btn btn-primary btn-xs" @click="play(item)">
|
||||
{{ t('button.play') }}
|
||||
</button>
|
||||
<button class="btn btn-error btn-xs" @click="deleteMusic(item)">
|
||||
{{ t('button.delete') }}
|
||||
</button>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped></style>
|
||||
|
||||
@@ -1,45 +1,46 @@
|
||||
<script setup lang='ts'>
|
||||
import {computed} from 'vue';
|
||||
const props=defineProps({
|
||||
rowCount:{
|
||||
type:Number,
|
||||
default:17
|
||||
},
|
||||
cardColor:{
|
||||
type:String,
|
||||
default:'#fff'
|
||||
},
|
||||
patternColor:{
|
||||
type:String,
|
||||
default:'#000'
|
||||
},
|
||||
patternList:{
|
||||
type:Array,
|
||||
default:()=>[]
|
||||
}
|
||||
import { computed } from 'vue'
|
||||
|
||||
const props = defineProps({
|
||||
rowCount: {
|
||||
type: Number,
|
||||
default: 17,
|
||||
},
|
||||
cardColor: {
|
||||
type: String,
|
||||
default: '#fff',
|
||||
},
|
||||
patternColor: {
|
||||
type: String,
|
||||
default: '#000',
|
||||
},
|
||||
patternList: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
})
|
||||
const data=computed(()=>{
|
||||
return props
|
||||
const data = computed(() => {
|
||||
return props
|
||||
})
|
||||
|
||||
const updatePatternList=(event:Event,item:number)=>{
|
||||
if(data.value.patternList.includes(item)){
|
||||
const index=data.value.patternList.indexOf(item)
|
||||
data.value.patternList.splice(index,1)
|
||||
}else{
|
||||
data.value.patternList.push(item)
|
||||
}
|
||||
// emits
|
||||
function updatePatternList(event: Event, item: number) {
|
||||
if (data.value.patternList.includes(item)) {
|
||||
const index = data.value.patternList.indexOf(item)
|
||||
data.value.patternList.splice(index, 1)
|
||||
}
|
||||
else {
|
||||
data.value.patternList.push(item)
|
||||
}
|
||||
// emits
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="w-full h-auto" >
|
||||
<ul class="pattern-list" :style="{gridTemplateColumns:'repeat('+data.rowCount+',1fr)'}">
|
||||
<li @click.stop="(event)=>updatePatternList(event,item)" class="w-5 h-5" v-for="item in data.rowCount*7" :key="item" :style="{backgroundColor:data.patternList.includes(item)?data.patternColor:data.cardColor}">
|
||||
</li>
|
||||
<div class="w-full h-auto">
|
||||
<ul class="pattern-list" :style="{ gridTemplateColumns: `repeat(${data.rowCount},1fr)` }">
|
||||
<li v-for="item in data.rowCount * 7" :key="item" class="w-5 h-5" :style="{ backgroundColor: data.patternList.includes(item) ? data.patternColor : data.cardColor }" @click.stop="(event) => updatePatternList(event, item)" />
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang='scss' scoped>
|
||||
|
||||
Reference in New Issue
Block a user