shishengliang/log-lottery
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 国际化

Browse Source
This commit is contained in:
ex_zhangwenlei@exiot.cmcc
2024-11-19 18:12:56 +08:00
parent 1768c963eb
commit 8e6eff54f4
23 changed files with 438 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
src/views/Config/Global/FaceConfig.vue
View File

@@ -9,11 +9,12 @@ import { ColorPicker } from 'vue3-colorpicker';
import 'vue3-colorpicker/style.css';
import { isRgbOrRgba, isHex } from '@/utils/color'
import PatternSetting from './components/PatternSetting.vue'
import {languageList} from '@/locales/i18n'
import {Language} from '@/locales/i18n'
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 } = storeToRefs(globalConfig)
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 } = storeToRefs(globalConfig)
const { getAlreadyPersonList: alreadyPersonList, getNotPersonList: notPersonList } = storeToRefs(personConfig)
const colorPickerRef = ref()
const resetDataDialogRef=ref()
@@ -29,6 +30,7 @@ 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 patternColorValue = ref(structuredClone(patternColor.value))
const themeList = ref(Object.keys(daisyuiThemes))
@@ -145,6 +147,9 @@ watch(cardSizeValue, (val: { width: number; height: number; }) => {
watch(isShowPrizeListValue, () => {
globalConfig.setIsShowPrizeList(isShowPrizeListValue.value)
})
watch(languageValue,(val:string)=>{
globalConfig.setLanguage(val)
})
onMounted(() => {
})
</script>
@@ -152,13 +157,13 @@ onMounted(() => {
<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>
<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()">取消</button>
<button class="btn" @click="resetData">确定</button>
<button class="btn" @click="resetDataDialogRef.close()">{{$t(`button.cancel`)}}</button>
<button class="btn" @click="resetData">{{$t('button.confirm')}}</button>
</form>
</div>
</div>
@@ -166,12 +171,12 @@ onMounted(() => {
<div>
<h2>全局配置</h2>
<div class="mb-8">
<button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">重置所有数据</button>
<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">标题</span>
<span class="label-text">{{$t('table.title')}}</span>
</div>
<input type="text" v-model="topTitleValue" placeholder="输入标题"
class="w-full max-w-xs input input-bordered" />
@@ -180,7 +185,7 @@ onMounted(() => {
<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>
<span class="label-text">{{$t('table.columnNumber')}}</span>
</div>
<input type="number" v-model="formData.rowCount" placeholder="Type here"
class="w-full max-w-xs input input-bordered" />
@@ -191,9 +196,9 @@ onMounted(() => {
</div>
</div>
<div>
<div class="tooltip" data-tip="该项比较耗费时间和性能">
<div class="tooltip" :data-tip="$t('tooltip.resetLayout')">
<button class="mt-5 btn btn-info btn-sm" :disabled="isRowCountChange != 1" @click="resetPersonLayout">
<span>重设布局</span>
<span>{{$t('button.setLayout')}}</span>
<span class="loading loading-ring loading-md" v-show="isRowCountChange == 2"></span>
</button>
</div>
@@ -201,22 +206,31 @@ onMounted(() => {
</label>
<label class="w-full max-w-xs form-control">
<div class="label">
<span class="label-text">选择主题</span>
<span class="label-text">{{$t('table.language')}}</span>
</div>
<select data-choose-theme class="w-full max-w-xs border-solid select border-1" v-model="languageValue">
<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 data-choose-theme class="w-full max-w-xs border-solid select border-1" v-model="themeValue">
<option disabled selected>选取主题</option>
<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">卡片颜色</span>
<span class="label-text">{{$t('table.cardColor')}}</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>
<span class="label-text">{{$t('table.winnerColor')}}</span>
</div>
<ColorPicker ref="colorPickerRef" v-model="luckyCardColorValue" v-model:pure-color="luckyCardColorValue">
</ColorPicker>
@@ -224,21 +238,21 @@ onMounted(() => {
<label class="w-full max-w-xs form-control">
<div class="label">
<span class="label-text">文字颜色</span>
<span class="label-text">{{$t('table.textColor')}}</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>
<span class="label-text">{{$t('table.cardWidth')}}</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>
<span class="label-text">{{$t('table.cardHeight')}}</span>
</div>
<input type="number" v-model="cardSizeValue.height" placeholder="Type here"
class="w-full max-w-xs input input-bordered" />
@@ -246,14 +260,14 @@ onMounted(() => {
</label>
<label class="w-full max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">文字大小</span>
<span class="label-text">{{$t('table.textSize')}}</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>
<span class="label-text">{{$t('table.highlightColor')}}</span>
</div>
<ColorPicker ref="colorPickerRef" v-model="patternColorValue" v-model:pure-color="patternColorValue">
</ColorPicker>
@@ -261,7 +275,7 @@ onMounted(() => {
<label class="flex flex-row items-center w-full gap-24 mb-0 form-control">
<div>
<div class="label">
<span class="label-text">图案设置</span>
<span class="label-text">{{$t('table.patternSetting')}}</span>
</div>
<div class="h-auto">
<PatternSetting :rowCount="rowCount" :cardColor="cardColor" :patternColor="patternColor"
@@ -271,18 +285,18 @@ onMounted(() => {
</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>
<span>{{ $t('button.clearPattern') }}</span>
</button>
<div class="tooltip" data-tip="默认图案设置针对17列时有效，其他列数请自行设置">
<div class="tooltip" :data-tip="$t('tooltip.defaultLayout')">
<button class="mt-5 btn btn-info btn-sm" @click="resetPattern">
<span>默认图案设置</span>
<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">是否常显奖品列表</span>
<span class="label-text">{{$t('table.alwaysDisplay')}}</span>
</div>
<input type="checkbox" :checked="isShowPrizeListValue" @change="isShowPrizeListValue = !isShowPrizeListValue"
class="mt-2 border-solid checkbox checkbox-secondary border-1" />

4
src/views/Config/Global/ImageConfig.vue
View File

@@ -84,7 +84,7 @@ watch(() => imgUploadToast.value, (val) => {
<label for="explore">
<input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
:accept="limitType" />
<span class="btn btn-primary btn-sm">上传图片</span>
<span class="btn btn-primary btn-sm">{{ $t('button.upload') }}</span>
</label>
</div>
<ul class="p-0">
@@ -100,7 +100,7 @@ watch(() => imgUploadToast.value, (val) => {
<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>
<button class="btn btn-error btn-xs" @click="removeImage(item)">{{ $t('button.upload') }}</button>
</div>
</div>
</li>

10
src/views/Config/Global/MusicConfig.vue
View File

@@ -74,13 +74,13 @@ onMounted(() => {
<template>
<div>
<div class="flex gap-3">
<button class="btn btn-primary btn-sm" @click="resetMusic">重置音乐列表</button>
<button class="btn btn-primary btn-sm" @click="resetMusic">{{ $t('button.reset') }}</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>
<span class="btn btn-primary btn-sm">{{ $t('button.upload') }}</span>
</label>
<button class="btn btn-error btn-sm" @click="deleteAll">删除所有</button>
<button class="btn btn-error btn-sm" @click="deleteAll">{{ $t('button.allDelete') }}</button>
</div>
<div>
<ul class="p-0">
@@ -90,8 +90,8 @@ onMounted(() => {
{{ 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>
<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>

32
src/views/Config/Person/PersonAll.vue
View File

@@ -130,26 +130,26 @@ onMounted(() => {
<template>
<dialog id="my_modal_1" ref="resetDataDialog" class="border-none modal">
<div class="modal-box">
<h3 class="text-lg font-bold">提示!</h3>
<p class="py-4">该操作会清空人员中奖信息，是否继续？</p>
<h3 class="text-lg font-bold">{{ $t('dialog.titleTip') }}</h3>
<p class="py-4">{{ $t('dialog.dialogResetWinner') }}</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="resetDataDialog.close()">取消</button>
<button class="btn" @click="resetData">确定</button>
<button class="btn" @click="resetDataDialog.close()">{{ $t('button.cancel') }}</button>
<button class="btn" @click="resetData">{{ $t('dialog.confirm') }}</button>
</form>
</div>
</div>
</dialog>
<dialog id="my_modal_1" ref="delAllDataDialog" class="border-none modal">
<div class="modal-box">
<h3 class="text-lg font-bold">提示!</h3>
<p class="py-4">该操作会删除所有人员数据，是否继续？</p>
<h3 class="text-lg font-bold">{{ $t('dialog.titleTip') }}</h3>
<p class="py-4">{{ $t('dialog.dialogDelAllPerson') }}</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="delAllDataDialog.close()">取消</button>
<button class="btn" @click="deleteAll">确定</button>
<button class="btn" @click="delAllDataDialog.close()">{{ $t('button.cancel') }}</button>
<button class="btn" @click="deleteAll">{{ $t('button.confirm') }}</button>
</form>
</div>
</div>
@@ -158,28 +158,28 @@ onMounted(() => {
<h2>人员管理</h2>
<div class="flex gap-3">
<button class="btn btn-error btn-sm" @click="delAllDataDialog.showModal()">全部删除</button>
<div class="tooltip tooltip-bottom" data-tip="下载文件后，请在excel中填写数据，并保存为xlsx格式">
<button class="btn btn-error btn-sm" @click="delAllDataDialog.showModal()">{{ $t('button.allDelete') }}</button>
<div class="tooltip tooltip-bottom" :data-tip="$t('tooltip.downloadTemplateTip')">
<a class="no-underline btn btn-secondary btn-sm" download="人口登记表.xlsx" target="_blank"
href="/log-lottery/人口登记表.xlsx">下载模板</a>
href="/log-lottery/人口登记表.xlsx">{{ $t('button.downloadTemplate') }}</a>
</div>
<div class="">
<label for="explore">
<div class="tooltip tooltip-bottom" data-tip="上传修改好的excel文件">
<div class="tooltip tooltip-bottom" :data-tip="$t('tooltip.uploadExcelTip')">
<input type="file" class="" id="explore" style="display: none" @change="handleFileChange"
:accept="limitType" />
<span class="btn btn-primary btn-sm">导入人员数据</span>
<span class="btn btn-primary btn-sm">{{ $t('button.importData') }}</span>
</div>
</label>
<!-- <button class="btn btn-primary btn-sm">上传excel</button> -->
</div>
<button class="btn btn-error btn-sm" @click="resetDataDialog.showModal()">重置人员数据</button>
<button class="btn btn-accent btn-sm" @click="exportData">导出结果</button>
<button class="btn btn-error btn-sm" @click="resetDataDialog.showModal()">{{ $t('button.resetData') }}</button>
<button class="btn btn-accent btn-sm" @click="exportData">{{ $t('button.exportResult') }}</button>
<div>
<span>中奖人数：</span>
<span>{{$t('table.luckyPeopleNumber')}}:</span>
<span>{{ alreadyPersonList.length }}</span>
<span>&nbsp;/&nbsp;</span>
<span>{{ allPersonList.length }}</span>

6
src/views/Config/Person/PersonAlready.vue
View File

@@ -106,17 +106,17 @@ const tableColumnsDetail = [
<template>
<div class="overflow-y-auto">
<h2>已中奖人员管理</h2>
<h2>{{ $t('viewTitle.winnerManagement') }}</h2>
<div class="flex items-center justify-start gap-10">
<!-- <button class="btn btn-error btn-sm" @click="deleteAll">全部删除</button> -->
<div>
<span>中奖人数：</span>
<span>{{$t('table.luckyPeopleNumber')}}：</span>
<span>{{ alreadyPersonList.length }}</span>
</div>
<div class="flex flex-col">
<div class="form-control">
<label class="cursor-pointer label">
<span class="label-text">详细信息:</span>
<span class="label-text">{{$t('table.detail')}}:</span>
<input type="checkbox" class="border-solid toggle toggle-primary border-1" v-model="isDetail" />
</label>
</div>

30
src/views/Config/Prize/PrizeConfig.vue
View File

@@ -147,11 +147,11 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
<template>
<div>
<h2>奖项配置</h2>
<h2>{{ $t('viewTitle.prizeManagement') }}</h2>
<div class="flex w-full gap-3">
<button class="btn btn-info btn-sm" @click="addPrize">添加</button>
<button class="btn btn-info btn-sm" @click="resetDefault">默认列表</button>
<button class="btn btn-error btn-sm" @click="delAll">全部删除</button>
<button class="btn btn-info btn-sm" @click="addPrize">{{$t('button.add')}}</button>
<button class="btn btn-info btn-sm" @click="resetDefault">{{$t('button.resetDefault')}}</button>
<button class="btn btn-error btn-sm" @click="delAll">{{$t('button.allDelete')}}</button>
</div>
<div role="alert" class="w-full my-4 alert alert-info">
@@ -159,7 +159,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
</svg>
<span>进行操作可能会重置数据，请谨慎操作</span>
<span>{{$t('dialog.tipResetPrize')}}</span>
</div>
<ul class="p-0 m-0">
<li v-for="item in prizeList" :key="item.id" class="flex gap-10"
@@ -176,25 +176,25 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
</label>
<label class="w-1/2 max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">名称</span>
<span class="label-text">{{ $t('table.prizeName') }}</span>
</div>
<input type="text" v-model="item.name" placeholder="名称"
class="w-full max-w-xs input-sm input input-bordered" />
</label>
<label class="w-1/2 max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">全员参加</span>
<span class="label-text">{{ $t('table.fullParticipation') }}</span>
</div>
<input type="checkbox" :checked="item.isAll" @change="item.isAll = !item.isAll"
class="mt-2 border-solid checkbox checkbox-secondary border-1" />
</label>
<label class="w-1/2 max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">抽奖人数</span>
<span class="label-text">{{ $t('table.numberParticipants') }}</span>
</div>
<input type="number" v-model="item.count" placeholder="获奖人数" @change="changePrizePerson(item)"
class="w-full max-w-xs p-0 m-0 input-sm input input-bordered" />
<div class="tooltip tooltip-bottom" :data-tip="'已抽取:' + item.isUsedCount + '/' + item.count">
<div class="tooltip tooltip-bottom" :data-tip="$t('table.isDone') + item.isUsedCount + '/' + item.count">
<progress class="w-full progress" :value="item.isUsedCount" :max="item.count"></progress>
</div>
</label>
@@ -207,14 +207,14 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
</label> -->
<label class="w-1/2 max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">已抽取</span>
<span class="label-text">{{ $t('table.isDone') }}</span>
</div>
<input type="checkbox" :checked="item.isUsed" @change="changePrizeStatus(item)"
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>
<span class="label-text">{{ $t('table.image') }}</span>
</div>
<select class="w-full max-w-xs select select-warning select-sm" v-model="item.picture">
<option v-if="item.picture.id" :value="{ id: '', name: '', url: '' }"><span>❌</span></option>
@@ -225,7 +225,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
</label>
<label class="w-full max-w-xs mb-10 form-control" v-if="item.separateCount">
<div class="label">
<span class="label-text">单次抽取个数</span>
<span class="label-text">{{ $t('table.onceNumber') }}</span>
</div>
<div class="flex justify-start w-full h-full" @click="selectPrize(item)">
<ul class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
@@ -240,15 +240,15 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
</div>
</li>
</ul>
<button v-else class="btn btn-secondary btn-xs">设置</button>
<button v-else class="btn btn-secondary btn-xs">{{ $t('button.setting') }}</button>
</div>
</label>
<label class="w-full max-w-xs mb-10 form-control">
<div class="label">
<span class="label-text">操作</span>
<span class="label-text">{{ $t('table.operation') }}</span>
</div>
<div class="flex gap-2">
<button class="btn btn-error btn-sm" @click="delItem(item)">删除</button>
<button class="btn btn-error btn-sm" @click="delItem(item)">{{ $t('button.delete') }}</button>
</div>
</label>
</li>

4
src/views/Config/index.vue
View File

@@ -64,10 +64,10 @@ const skip = (path: string) => {
</div>
<footer class="p-10 rounded footer footer-center bg-base-200 text-base-content">
<nav class="grid grid-flow-col gap-4">
<a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">行有不得，反求诸己</a>
<a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ $t('footer.self-reflection') }}</a>
</nav>
<nav>
<a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">破山中贼易，破心中贼难</a>
<a class="cursor-pointer link link-hover text-inherit" target="_blank" href="https://1kw20.fun">{{ $t('footer.thiefEasy') }}</a>
</nav>
<nav>
<div class="grid grid-flow-col gap-4">