feat: i18n,add en and zh-cn language.

src/components/DaiysuiTable/index.vue

@@ -35,7 +35,7 @@ const actionsColumns = computed<any[]>(() => {
                 <tr>
                     <th></th>
                     <th v-for="(item, index) in dataColumns" :key="index">{{ item.label }}</th>
-                    <th v-for="(item, index) in actionsColumns" :key="index">操作</th>
+                    <th v-for="(item, index) in actionsColumns" :key="index">{{ $t('table.operation') }}</th>
                     <th></th>
                 </tr>
             </thead>
@@ -56,7 +56,7 @@ const actionsColumns = computed<any[]>(() => {
             </tbody>
             <tbody v-else>
                 <tr>
-                    <td colspan="5" class="text-center">暂无数据</td>
+                    <td colspan="5" class="text-center">{{ $t('table.noneData') }}</td>
                 </tr>
             </tbody>
             <!-- foot -->

src/components/NumberSeparate/EditSeparateDialog.vue

@@ -74,12 +74,12 @@ onMounted(() => {
 <template>
     <dialog id="my_modal_1" ref="separatedNumberRef" class="z-50 overflow-hidden border-none modal">
         <div class="overflow-hidden modal-box">
-            <h3 class="pb-6 text-lg font-bold">提示!</h3>
+            <h3 class="pb-6 text-lg font-bold">{{ $t('dialog.titleTip') }}</h3>
-            <p class="pb-8">单次抽取只能抽取10位</p>
+            <p class="pb-8">{{ $t('dialog.dialogSingleDrawLimit') }}</p>
             <div class="flex justify-between px-3 text-center separated-number">
                 <div v-for="item in props.totalNumber" :key="item"
                     class="relative flex flex-col items-center cursor-pointer">
-                    <div class="absolute mb-12 text-center tooltip -top-5 hover:text-lg" data-tip="左键切割"
+                    <div class="absolute mb-12 text-center tooltip -top-5 hover:text-lg" :data-tip="$t('tooltip.leftClick')"
                         @click.left="editScale(item)">
                         <span> {{ item }}</span>
                     </div>
@@ -89,7 +89,7 @@ onMounted(() => {
             <div class="modal-action">
                 <form method="dialog">
                     <!-- if there is a button in form, it will close the modal -->
-                    <button class="btn" @click="clearData">关闭</button>
+                    <button class="btn" @click="clearData">{{ $t('button.close') }} }}</button>
                 </form>
             </div>
         </div>

src/components/PlayMusic/index.vue

@@ -100,20 +100,19 @@ watch(currentMusic, (val: any) => {
                 <svg-icon name="home"></svg-icon>
             </div>
         </div>
-        <div v-else class="tooltip tooltip-left" data-tip="设置/配置">
+        <div v-else class="tooltip tooltip-left" :data-tip="$t('tooltip.settingConfiguration')">
             <div class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
                 @click="enterConfig">
                 <svg-icon name="setting"></svg-icon>
             </div>
         </div>
 
-        <div class="tooltip tooltip-left" :data-tip="currentMusic.item ? currentMusic.item.name+'\n\r &nbsp; 右键下一曲' : '没有音乐可以播放'">
+        <div class="tooltip tooltip-left" :data-tip="currentMusic.item ? currentMusic.item.name+'\n\r &nbsp;'+$t('tooltip.nextSong') : $t('tooltip.noSongPlay')">
             <div class="flex items-center justify-center w-10 h-10 p-0 m-0 cursor-pointer setting-container bg-slate-500/50 rounded-l-xl hover:bg-slate-500/80 hover:text-blue-400/90"
                 @click="playMusic(currentMusic.item)" @click.right.prevent="nextPlay">
                 <svg-icon :name="currentMusic.paused ? 'play' : 'pause'"></svg-icon>
             </div>
         </div>
-        <!-- <div class="bg-blue-300 cursor-pointer" @click="nextPlay">下一首</div> -->
     </div>
 </template>
 

src/locales/en.ts

@@ -51,9 +51,11 @@ export default {
         identity:'Identity',
         isLucky:'Is Lucky',
         operation:'Operation',
+        setLuckyNumber:'Set Lucky Number',
         luckyPeopleNumber:'Lucky People Number',
 
         detail:'Detail',
+        noneData:'No Data',
         // prize configuration
         fullParticipation:'FullParticipation',
         numberParticipants:'NumberParticipants',
@@ -75,6 +77,7 @@ export default {
         highlightColor:'HighLight Color',
         patternSetting:'Pattern Setting',
         alwaysDisplay:'Always Display Prize List',
+        selectPicture:'Select a Picture'
     },
     dialog:{
         titleTip:'Tip!',
@@ -103,7 +106,42 @@ export default {
         edit:'Edit',
         delete:'Delete'
     },
-    
+    error:{
+        require:'required field',
+        requireNumber:'please enter a number',
+        minNumber1:'the minimum is 1',
+        maxNumber100:'the maximum is 100',
+        uploadSuccess:'Upload Success',
+        uploadFail:'Upload Failed',
+        notImage:'Not Image',
+        personIsAllDone:'All Person Is Done',
+        personNotEnough:'Person Is Not Enough',
+        noInfoAndImport:'No Info and import it',
+        useDefault:'Use Default Data',
+        completeInformation:'Please provide complete information'
+    },
+    placeHolder:{
+        enterTitle:'Enter Title',
+        name:'Name',
+        winnerCount:'Lucky Person Count',
+    },
+    data:{
+        yes:'Yes',
+        no:'No',
+        number:'Number',
+        isWin:'isWin',
+        department:'Department',
+        name:'Name',
+        identity:'Identity',
+        prizeName:'Prize Name',
+        prizeTime:'Prize Time',
+        operation:'Operation',
+        delete:'Delete',
+        removePerson:'Remove the Person',
+        defaultTitle:'The Prelude to the Six Ministries of the Ming Dynasty Cabinet',
+        xlsxName:'personListTemplate-en.xlsx',
+        readmeName:'readme-en.md'
+    },
     footer:{
         'self-reflection':'Turn inward and examine yourself when you encounter difficulties in life.',
         'thiefEasy':'Thief difficult mountain thief easily, breaking heart.'

src/locales/i18n.ts

@@ -7,18 +7,21 @@ export type Language='en'|'zhCn'
 export const languageList=[
     {
         key:'zhCn',
-        name:'中文'
+        name:'中文',
+        flag:'zh-cn'
     },
     {
         key:'en',
-        name:'English'
+        name:'English',
+        flag:'en-us'
     }
 ]
+export const browserLanguage=navigator.language.toLowerCase().indexOf('zh')>=0?'zhCn':'en';
+const globalConfig=JSON.parse(localStorage.getItem('globalConfig')||'{}').globalConfig||{}
 // 创建i18n
 const i18n = createI18n({
-  locale: JSON.parse(localStorage.getItem("globalConfig")?localStorage.getItem("globalConfig") as string:"{globalConfig:{language:'zhCn'}}").globalConfig.language || "zhCn", // 语言标识
+  locale: globalConfig.language||browserLanguage,
   globalInjection: true, // 全局注入,可以直接使用$t
-  // 处理报错: Uncaught (in promise) SyntaxError: Not available in legacy mode (at message-compiler.esm-bundler.js:54:19)
   legacy:false, 
   messages: {
     zhCn,

src/locales/zhCn.ts

@@ -22,7 +22,9 @@ export default {
         reset: '重置',
         play: '播放',
         setLayout:'重设布局',
-        close:'关闭'
+        close:'关闭',
+        noInfoAndImport:'暂无人员信息，前往导入',
+        useDefault:'使用默认数据'
     },
     sidebar:{
         personConfiguration:'人员配置',
@@ -51,9 +53,11 @@ export default {
         identity:'身份',
         isLucky:'是否中奖',
         operation:'操作',
+        setLuckyNumber:'设置中奖人数',
         luckyPeopleNumber:'中奖人数',
 
         detail:'详细信息',
+        noneData:'暂无数据',
         // prize configuration
         fullParticipation:'全员参加',
         numberParticipants:'抽奖人数',
@@ -75,6 +79,7 @@ export default {
         highlightColor:'高亮颜色',
         patternSetting:'图案设置',
         alwaysDisplay:'常显奖项列表',
+        selectPicture:'选择一张图片'
     },
     dialog:{
         titleTip:'提示!',
@@ -103,7 +108,41 @@ export default {
         edit:'编辑',
         delete:'删除'
     },
-    
+    error:{
+        require:'必填项',
+        requireNumber:'请输入数字',
+        minNumber1:'最小为1',
+        maxNumber100:'最大为100',
+        uploadSuccess:'上传成功',
+        uploadFail:'上传失败',
+        notImage:'不是图片',
+        personIsAllDone:'抽奖抽完了',
+        personNotEnough:'抽奖人数不足',
+        startDraw:'现在抽取{count}{leftover}人',
+        completeInformation:'请填写完整信息'
+    },
+    placeHolder:{
+        enterTitle:'输入标题',
+        name:'名称',
+        winnerCount:'中奖人数',
+    },
+    data:{
+        yes:'是',
+        no:'否',
+        number:'编号',
+        isWin:'是否中奖',
+        department:'部门',
+        name:'姓名',
+        identity:'身份',
+        prizeName:'获奖',
+        prizeTime:'获奖时间',
+        operation:'操作',
+        delete:'删除',
+        removePerson:'移入未中奖名单',
+        defaultTitle:'大明内阁六部御前奏对',
+        xlsxName:'人口登记表-zhCn.xlsx',
+        readmeName:'readme-zhCn.md'
+    },
     footer:{
         'self-reflection':'行有不得，反求诸己',
         'thiefEasy':'破山中贼易，破心中贼难'

src/store/globalConfig.ts

@@ -1,7 +1,7 @@
 import { defineStore } from 'pinia';
 import { defaultMusicList, defaultImageList, defaultPatternList } from './data'
 import { IMusic, IImage } from '@/types/storeType';
-import i18n,{Language} from '@/locales/i18n'
+import i18n,{browserLanguage} from '@/locales/i18n'
 // import { IPrizeConfig } from '@/types/storeType';
 export const useGlobalConfig = defineStore('global', {
     state() {
@@ -9,8 +9,8 @@ export const useGlobalConfig = defineStore('global', {
             globalConfig: {
                 rowCount: 17,
                 isSHowPrizeList: true,
-                topTitle: '大明内阁六部御前奏对',
+                topTitle: i18n.global.t('data.defaultTitle'),
-                language:'zhCn',
+                language:browserLanguage,
                 theme: {
                     name: 'dracula',
                     detail: { primary: '#0f5fd3' },
@@ -223,8 +223,8 @@ export const useGlobalConfig = defineStore('global', {
             this.globalConfig = {
                 rowCount: 17,
                 isSHowPrizeList: true,
-                topTitle: '大明内阁六部御前奏对',
+                topTitle: i18n.global.t('data.defaultTitle'),
-                language: 'zhCn',
+                language: browserLanguage,
                 theme: {
                     name: 'dracula',
                     detail: { primary: '#0f5fd3' },

src/views/Config/Global/FaceConfig.vue

@@ -10,7 +10,7 @@ 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'
+import i18n from '@/locales/i18n'
 const globalConfig = useStore().globalConfig
 const personConfig = useStore().personConfig
 const prizeConfig= useStore().prizeConfig
@@ -44,11 +44,11 @@ const formErr = ref({
 
 const schema = zod.object({
     rowCount: zod.number({
-        required_error: '必填项',
+        required_error: i18n.global.t('error.require'),
-        invalid_type_error: '必须填入数字',
+        invalid_type_error: i18n.global.t('error.requireNumber'),
     })
-        .min(1, '最小为1')
+        .min(1, i18n.global.t('error.minNumber1'))
-        .max(100, '最大为100')
+        .max(100, i18n.global.t('error.maxNumber100'))
     // 格式化
 
 
@@ -169,7 +169,7 @@ onMounted(() => {
         </div>
     </dialog>
     <div>
-        <h2>全局配置</h2>
+        <h2>{{$t('viewTitle.globalSetting')}}</h2>
         <div class="mb-8">
             <button class="btn btn-sm btn-primary" @click="resetDataDialogRef.showModal()">{{$t('button.resetAllData')}}</button>
         </div>
@@ -178,7 +178,7 @@ onMounted(() => {
                 <div class="label">
                     <span class="label-text">{{$t('table.title')}}</span>
                 </div>
-                <input type="text" v-model="topTitleValue" placeholder="输入标题"
+                <input type="text" v-model="topTitleValue" :placeholder="$t('placeHolder.enterTitle')"
                     class="w-full max-w-xs input input-bordered" />
             </div>
         </label>

src/views/Config/Global/ImageConfig.vue

@@ -69,13 +69,13 @@ watch(() => imgUploadToast.value, (val) => {
 <template>
     <div class="toast toast-top toast-end">
         <div class="alert alert-error" v-if="imgUploadToast == 2">
-            <span>上传失败</span>
+            <span>{{ $t('error.uploadFail') }}</span>
         </div>
         <div class="alert alert-success" v-if="imgUploadToast == 1">
-            <span>上传成功</span>
+            <span>{{ $t('error.uploadSuccess') }}</span>
         </div>
         <div class="alert alert-error" v-if="imgUploadToast == 3">
-            <span>不是图片</span>
+            <span>{{ $t('error.notImage') }}</span>
         </div>
     </div>
 

src/views/Config/Person/PersonAll.vue

@@ -8,7 +8,7 @@ import * as XLSX from 'xlsx'
 import { readFileBinary } from '@/utils/file'
 import { addOtherInfo } from '@/utils'
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
-
+import i18n from '@/locales/i18n'
 const personConfig = useStore().personConfig
 const { getAllPersonList: allPersonList, getAlreadyPersonList: alreadyPersonList } = storeToRefs(personConfig)
 const limitType = '.xlsx,.xls'
@@ -38,9 +38,9 @@ const exportData = () => {
         delete data[i].prizeId
         // 修改字段名称
         if (data[i].isWin) {
-            data[i].isWin = '是'
+            data[i].isWin = i18n.global.t('data.yes')
         } else {
-            data[i].isWin = '否'
+            data[i].isWin = i18n.global.t('data.no')
         }
         // 格式化数组为
         data[i].prizeTime = data[i].prizeTime.join(',')
@@ -48,13 +48,13 @@ const exportData = () => {
     }
     let dataString = JSON.stringify(data)
     dataString = dataString
-        .replaceAll(/uid/g, '编号')
+        .replaceAll(/uid/g, i18n.global.t('data.number'))
-        .replaceAll(/isWin/g, '是否中奖')
+        .replaceAll(/isWin/g, i18n.global.t('data.isWin'))
-        .replaceAll(/department/g, '部门')
+        .replaceAll(/department/g, i18n.global.t('data.department'))
-        .replaceAll(/name/g, '姓名')
+        .replaceAll(/name/g, i18n.global.t('data.name'))
-        .replaceAll(/identity/g, '身份')
+        .replaceAll(/identity/g, i18n.global.t('data.identity'))
-        .replaceAll(/prizeName/g, '获奖')
+        .replaceAll(/prizeName/g, i18n.global.t('data.prizeName'))
-        .replaceAll(/prizeTime/g, '获奖时间')
+        .replaceAll(/prizeTime/g, i18n.global.t('data.prizeTime'))
 
     data = JSON.parse(dataString)
 
@@ -80,30 +80,30 @@ const delPersonItem = (row: IPersonConfig) => {
 
 const tableColumns = [
     {
-        label: '编号',
+        label: i18n.global.t('data.number'),
         props: 'uid',
     },
     {
-        label: '姓名',
+        label: i18n.global.t('data.name'),
         props: 'name',
     },
     {
-        label: '部门',
+        label: i18n.global.t('data.department'),
         props: 'department',
     },
     {
-        label: '身份',
+        label: i18n.global.t('data.identity'),
         props: 'identity',
     },
     {
-        label: '是否已中奖',
+        label: i18n.global.t('data.isWin'),
         props: 'isWin',
         formatValue(row: IPersonConfig) {
-            return row.isWin ? '是' : '否'
+            return row.isWin ? i18n.global.t('data.yes') : i18n.global.t('data.no')
         }
     },
     {
-        label: '操作',
+        label: i18n.global.t('data.operation'),
         actions: [
             // {
             //     label: '编辑',
@@ -113,7 +113,7 @@ const tableColumns = [
             //     }
             // },
             {
-                label: '删除',
+                label: i18n.global.t('data.delete'),
                 type: 'btn-error',
                 onClick: (row: IPersonConfig) => {
                     delPersonItem(row)
@@ -156,12 +156,12 @@ onMounted(() => {
     </dialog>
     <div class="min-w-1000px">
 
-        <h2>人员管理</h2>
+        <h2>{{ $t('viewTitle.personManagement') }}</h2>
         <div class="flex gap-3">
             <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"
+                <a class="no-underline btn btn-secondary btn-sm" :download="$t('data.xlsxName')" target="_blank"
-                    href="/log-lottery/人口登记表.xlsx">{{ $t('button.downloadTemplate') }}</a>
+                    :href="'/log-lottery/'+$t('data.xlsxName')">{{ $t('button.downloadTemplate') }}</a>
             </div>
             <div class="">
                 <label for="explore">
@@ -173,8 +173,6 @@ onMounted(() => {
                         <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()">{{ $t('button.resetData') }}</button>
             <button class="btn btn-accent btn-sm" @click="exportData">{{ $t('button.exportResult') }}</button>

src/views/Config/Person/PersonAlready.vue

@@ -5,7 +5,7 @@ import useStore from '@/store'
 import { IPersonConfig } from '@/types/storeType';
 import { storeToRefs } from 'pinia';
 import DaiysuiTable from '@/components/DaiysuiTable/index.vue'
-
+import i18n from '@/locales/i18n'
 const personConfig = useStore().personConfig
 
 const { getAlreadyPersonList: alreadyPersonList, getAlreadyPersonDetail: alreadyPersonDetail } = storeToRefs(personConfig)
@@ -25,32 +25,32 @@ const handleMoveNotPerson = (row: IPersonConfig) => {
 
 const tableColumnsList = [
     {
-        label: '编号',
+        label: i18n.global.t('data.number'),
         props: 'uid',
         sort: true
     },
     {
-        label: '姓名',
+        label: i18n.global.t('data.number'),
         props: 'name',
     },
     {
-        label: '部门',
+        label: i18n.global.t('data.department'),
         props: 'department',
     },
     {
-        label: '身份',
+        label: i18n.global.t('data.identity'),
         props: 'identity',
     },
     {
-        label: '奖品',
+        label: i18n.global.t('data.prizeName'),
         props: 'prizeName',
         sort: true
     },
     {
-        label: '操作',
+        label:  i18n.global.t('data.operation'),
         actions: [
             {
-                label: '移入未中奖名单',
+                label: i18n.global.t('data.removePerson'),
                 type: 'btn-info',
                 onClick: (row: IPersonConfig) => {
                     handleMoveNotPerson(row)
@@ -61,37 +61,37 @@ const tableColumnsList = [
 ]
 const tableColumnsDetail = [
     {
-        label: '编号',
+        label: i18n.global.t('data.number'),
         props: 'uid',
         sort: true
     },
     {
-        label: '姓名',
+        label: i18n.global.t('data.number'),
         props: 'name',
     },
     {
-        label: '部门',
+        label: i18n.global.t('data.department'),
         props: 'department',
     },
     {
-        label: '身份',
+        label: i18n.global.t('data.identity'),
         props: 'identity',
     },
     {
-        label: '奖品',
+        label: i18n.global.t('data.prizeName'),
         props: 'prizeName',
         sort: true
     },
     {
-        label: '中奖时间',
+        label: i18n.global.t('data.prizeTime'),
         props: 'prizeTime',
 
     },
     {
-        label: '操作',
+        label: i18n.global.t('data.operation'),
         actions: [
             {
-                label: '移入未中奖名单',
+                label: i18n.global.t('data.removePerson'),
                 type: 'btn-info',
                 onClick: (row: IPersonConfig) => {
                     handleMoveNotPerson(row)
@@ -108,7 +108,6 @@ const tableColumnsDetail = [
         
         <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>{{$t('table.luckyPeopleNumber')}}：</span>
                 <span>{{ alreadyPersonList.length }}</span>

src/views/Config/Prize/PrizeConfig.vue

@@ -5,7 +5,7 @@ import { IPrizeConfig } from '@/types/storeType'
 import { storeToRefs } from 'pinia'
 import localforage from 'localforage'
 import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
-
+import i18n from '@/locales/i18n'
 const imageDbStore = localforage.createInstance({
     name: 'imgStore'
 })
@@ -22,7 +22,7 @@ const selectedPrize = ref<IPrizeConfig | null>()
 const addPrize = () => {
     const defaultPrizeCOnfig: IPrizeConfig = {
         id: new Date().getTime().toString(),
-        name: '奖项',
+        name: i18n.global.t('data.prizeName'),
         sort: 0,
         isAll: false,
         count: 1,
@@ -178,7 +178,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
                     <div class="label">
                         <span class="label-text">{{ $t('table.prizeName') }}</span>
                     </div>
-                    <input type="text" v-model="item.name" placeholder="名称"
+                    <input type="text" v-model="item.name" :placeholder="$t('placeHolder.name')"
                         class="w-full max-w-xs input-sm input input-bordered" />
                 </label>
                 <label class="w-1/2 max-w-xs mb-10 form-control">
@@ -192,19 +192,12 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
                     <div class="label">
                         <span class="label-text">{{ $t('table.numberParticipants') }}</span>
                     </div>
-                    <input type="number" v-model="item.count" placeholder="获奖人数" @change="changePrizePerson(item)"
+                    <input type="number" v-model="item.count" :placeholder="$t('placeHolder.winnerCount')" @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="$t('table.isDone') + item.isUsedCount + '/' + item.count">
                         <progress class="w-full progress" :value="item.isUsedCount" :max="item.count"></progress>
                     </div>
                 </label>
-                <!-- <label class="w-1/2 max-w-xs mb-10 form-control">
-                    <div class="label">
-                        <span class="label-text">已获奖人数</span>
-                    </div>
-                    <input disabled type="number" v-model="item.isUsedCount" 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">{{ $t('table.isDone') }}</span>
@@ -218,7 +211,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
                     </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>
-                        <option disabled selected>选择一张图片</option>
+                        <option disabled selected>{{ $t('table.selectPicture') }}</option>
                         <option v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{ picItem.name }}
                         </option>
                     </select>
@@ -233,7 +226,7 @@ watch(() => prizeList.value, (val: IPrizeConfig[]) => {
                             <li class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
                                 v-for="se in item.separateCount.countList" :key="se.id">
                                 <div class="flex items-center justify-center w-full h-full tooltip"
-                                    :data-tip="'已抽取:' + se.isUsedCount + '/' + se.count">
+                                    :data-tip="$t('tooltip.doneCount') + se.isUsedCount + '/' + se.count">
                                     <div class="absolute left-0 z-50 h-full bg-blue-300/80"
                                         :style="`width:${se.isUsedCount * 100 / se.count}%`"></div>
                                     <span>{{ se.count }}</span>

src/views/Config/Readme/index.vue

@@ -1,10 +1,11 @@
 <script setup lang='ts'>
 import {ref,onMounted} from 'vue'
 import markdownit from 'markdown-it'
+import i18n from '@/locales/i18n'
 const md = markdownit()
 const readmeHtml=ref('')
 const readMd=()=>{
-    fetch('/log-lottery/readme.md')
+    fetch('/log-lottery/'+i18n.global.t('data.readmeName'))
     .then(res=>res.text())
     .then(res=>{
         readmeHtml.value = md.render(res)

src/views/Home/PrizeList.vue

@@ -9,6 +9,7 @@ import { IPrizeConfig } from '../../types/storeType';
 
 import EditSeparateDialog from '@/components/NumberSeparate/EditSeparateDialog.vue'
 
+import i18n from '@/locales/i18n'
 const prizeConfig = useStore().prizeConfig
 const globalConfig = useStore().globalConfig
 const system = useStore().system
@@ -41,7 +42,7 @@ const deleteTemporaryPrize = () => {
 }
 const submitTemporaryPrize = () => {
     if (!temporaryPrize.value.name || !temporaryPrize.value.count) {
-        alert('请填写完整信息')
+        alert(i18n.global.t('error.completeInformation'))
 
         return
     }
@@ -94,18 +95,18 @@ onMounted(() => {
     <div class="flex items-center">
         <dialog id="my_modal_1" ref="temporaryPrizeRef" class="border-none modal">
             <div class="modal-box">
-                <h3 class="text-lg font-bold">增加临时抽奖</h3>
+                <h3 class="text-lg font-bold">{{$t('dialog.titleTemporary')}}</h3>
                 <div class="flex flex-col gap-3">
                     <label class="flex w-full max-w-xs">
                         <div class="label">
-                            <span class="label-text">名称:</span>
+                            <span class="label-text">{{$t('table.name')}}:</span>
                         </div>
-                        <input type="text" v-model="temporaryPrize.name" placeholder="名称"
+                        <input type="text" v-model="temporaryPrize.name" :placeholder="$t('placeHolder.name')"
                             class="max-w-xs input-sm input input-bordered" />
                     </label>
                     <label class="flex w-full max-w-xs">
                         <div class="label">
-                            <span class="label-text">是否全员参加</span>
+                            <span class="label-text">{{$t('table.fullParticipation')}}</span>
                         </div>
                         <input type="checkbox" :checked="temporaryPrize.isAll"
                             @change="temporaryPrize.isAll = !temporaryPrize.isAll"
@@ -113,21 +114,21 @@ onMounted(() => {
                     </label>
                     <label class="flex w-full max-w-xs">
                         <div class="label">
-                            <span class="label-text">获奖人数</span>
+                            <span class="label-text">{{$t('table.setLuckyNumber')}}</span>
                         </div>
-                        <input type="number" v-model="temporaryPrize.count" @change="changePersonCount" placeholder="获奖人数"
+                        <input type="number" v-model="temporaryPrize.count" @change="changePersonCount" :placeholder="$t('placeHolder.winnerCount')"
                             class="max-w-xs input-sm input input-bordered" />
                     </label>
                     <label class="flex w-full max-w-xs">
                         <div class="label">
-                            <span class="label-text">已获奖人数</span>
+                            <span class="label-text">{{$t('table.luckyPeopleNumber')}}</span>
                         </div>
-                        <input disabled type="number" v-model="temporaryPrize.isUsedCount" placeholder="获奖人数"
+                        <input disabled type="number" v-model="temporaryPrize.isUsedCount" :placeholder="$t('placeHolder.winnerCount')"
                             class="max-w-xs input-sm input input-bordered" />
                     </label>
                     <label class="flex w-full max-w-xs" v-if="temporaryPrize.separateCount">
                     <div class="label">
-                        <span class="label-text">单次抽取个数</span>
+                        <span class="label-text">{{$t('table.onceNumber ')}}</span>
                     </div>
                     <div class="flex justify-start h-full" @click="selectPrize(temporaryPrize)">
                         <ul class="flex flex-wrap w-full h-full gap-1 p-0 pt-1 m-0 cursor-pointer"
@@ -135,24 +136,24 @@ onMounted(() => {
                             <li class="relative flex items-center justify-center w-8 h-8 bg-slate-600/60 separated"
                                 v-for="se in temporaryPrize.separateCount.countList" :key="se.id">
                                 <div class="flex items-center justify-center w-full h-full tooltip"
-                                    :data-tip="'已抽取:' + se.isUsedCount + '/' + se.count">
+                                    :data-tip="$t('tooltip.doneCount') + se.isUsedCount + '/' + se.count">
                                     <div class="absolute left-0 z-50 h-full bg-blue-300/80"
                                         :style="`width:${se.isUsedCount * 100 / se.count}%`"></div>
                                     <span>{{ se.count }}</span>
                                 </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="flex w-full max-w-xs">
                         <div class="label">
-                            <span class="label-text">图片</span>
+                            <span class="label-text">{{$t('table.image')}}</span>
                         </div>
                         <select class="flex-1 w-12 select select-warning select-sm" v-model="temporaryPrize.picture">
                             <option v-if="temporaryPrize.picture.id" :value="{ id: '', name: '', url: '' }"><span>❌</span>
                             </option>
-                            <option disabled selected>选择一张图片</option>
+                            <option disabled selected>{{$t('table.selectPicture')}}</option>
                             <option class="w-auto" v-for="picItem in localImageList" :key="picItem.id" :value="picItem">{{
                                 picItem.name }}
                             </option>
@@ -161,8 +162,8 @@ onMounted(() => {
                 </div>
                 <div class="modal-action">
                     <form method="dialog" class="flex gap-3">
-                        <button class="btn btn-sm" @click="submitTemporaryPrize">确定</button>
+                        <button class="btn btn-sm" @click="submitTemporaryPrize">{{ $t('button.confirm') }}</button>
-                        <button class="btn btn-sm">取消</button>
+                        <button class="btn btn-sm">{{ $t('button.cancel') }}</button>
                     </form>
                 </div>
             </div>
@@ -190,12 +191,12 @@ onMounted(() => {
                         <!-- <p class="p-0 m-0">{{ item.isUsedCount }}/{{ item.count }}</p> -->
                     </div>
                     <div class="flex flex-col gap-1 mr-2">
-                        <div class="tooltip tooltip-left" data-tip="编辑">
+                        <div class="tooltip tooltip-left" :data-tip="$t('tooltip.edit')">
                             <div class="cursor-pointer hover:text-blue-400" @click="addTemporaryPrize">
                                 <svg-icon name="edit"></svg-icon>
                             </div>
                         </div>
-                        <div class="tooltip tooltip-left" data-tip="删除">
+                        <div class="tooltip tooltip-left" :data-tip="$t('tooltip.delete')">
                             <div class="cursor-pointer hover:text-blue-400" @click="deleteTemporaryPrize">
                                 <svg-icon name="delete"></svg-icon>
                             </div>
@@ -234,13 +235,13 @@ onMounted(() => {
                         </li>
                     </ul>
                     <div class="flex flex-col gap-3">
-                        <div class="tooltip tooltip-right" data-tip="奖项列表">
+                        <div class="tooltip tooltip-right" :data-tip="$t('tooltip.prizeList')">
                             <div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
                                 @click="prizeShow = !prizeShow">
                                 <svg-icon name="arrow_left" class="w-full h-full"></svg-icon>
                             </div>
                         </div>
-                        <div class="tooltip tooltip-right" data-tip="添加抽奖">
+                        <div class="tooltip tooltip-right" :data-tip="$t('tooltip.addActivity')">
                             <div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
                                 @click="addTemporaryPrize">
                                 <svg-icon name="add" class="w-full h-full"></svg-icon>
@@ -252,7 +253,7 @@ onMounted(() => {
         </div>
 
         <transition name="prize-operate" :appear="true">
-            <div class="tooltip tooltip-right" data-tip="奖项列表" v-show="!prizeShow">
+            <div class="tooltip tooltip-right" :data-tip="$t('tooltip.prizeList')" v-show="!prizeShow">
                 <div class="flex items-center w-6 h-8 rounded-r-lg cursor-pointer prize-option bg-slate-500/50"
                     @click="prizeShow = !prizeShow">
                     <svg-icon name="arrow_right" class="w-full h-full"></svg-icon>

src/views/Home/index.vue

@@ -5,6 +5,7 @@ import { useElementStyle, useElementPosition } from '@/hooks/useElement'
 import StarsBackground from '@/components/StarsBackground/index.vue'
 import confetti from 'canvas-confetti'
 import { filterData, selectCard } from '@/utils'
+import i18n from '@/locales/i18n'
 import { rgba } from '@/utils/color'
 import { IPersonConfig } from '@/types/storeType'
 // import * as THREE from 'three'
@@ -375,7 +376,7 @@ const startLottery = () => {
     // 验证是否已抽完全部奖项
     if (currentPrize.value.isUsed || !currentPrize.value) {
         toast.open({
-            message: '抽奖抽完了',
+            message: i18n.global.t('error.personIsAllDone'),
             type: 'warning',
             position: 'top-right',
             duration: 10000
@@ -387,7 +388,7 @@ const startLottery = () => {
     // 验证抽奖人数是否还够
     if (personPool.value.length < currentPrize.value.count - currentPrize.value.isUsedCount) {
         toast.open({
-            message: '抽奖人数不够',
+            message: i18n.global.t('error.personNotEnough'),
             type: 'warning',
             position: 'top-right',
             duration: 10000
@@ -417,7 +418,8 @@ const startLottery = () => {
         }
     }
     toast.open({
-        message: `现在抽取${currentPrize.value.name} ${leftover}人`,
+        // message: `现在抽取${currentPrize.value.name} ${leftover}人`,
+        message:i18n.global.t('error.startDraw',{count:currentPrize.value.name,leftover:leftover}),
         type:'default',
         position: 'top-right',
         duration: 8000
@@ -637,19 +639,19 @@ onUnmounted(() => {
             :style="{ fontSize: textSize * 1.5 + 'px', color: textColor }">{{ topTitle }}</h2>
         <div class="flex gap-3">
             <button v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
-                @click="router.push('config')">暂无人员信息，前往导入</button>
+                @click="router.push('config')">{{$t('button.noInfoAndImport')}}</button>
             <button v-if="tableData.length <= 0" class="cursor-pointer btn btn-outline btn-secondary btn-lg"
-                @click="setDefaultPersonList">使用默认数据</button>
+                @click="setDefaultPersonList">{{$t('button.useDefault')}}</button>
         </div>
     </div>
     <div id="container" ref="containerRef" class="3dContainer">
 
         <!-- 选中菜单结构 start-->
         <div id="menu">
-            <button class="btn-end " @click="enterLottery" v-if="currentStatus == 0 && tableData.length > 0">进入抽奖</button>
+            <button class="btn-end " @click="enterLottery" v-if="currentStatus == 0 && tableData.length > 0">{{$t('button.enterLottery')}}</button>
 
             <div class="start" v-if="currentStatus == 1">
-                <button class="btn-start" @click="startLottery"><strong>开始</strong>
+                <button class="btn-start" @click="startLottery"><strong>{{$t('button.start')}}</strong>
                     <div id="container-stars">
                         <div id="stars"></div>
                     </div>
@@ -661,11 +663,11 @@ onUnmounted(() => {
                 </button>
             </div>
 
-            <button class="btn-end btn glass btn-lg" @click="stopLottery" v-if="currentStatus == 2">抽取幸运儿</button>
+            <button class="btn-end btn glass btn-lg" @click="stopLottery" v-if="currentStatus == 2">{{$t('button.selectLucky')}}</button>
 
             <div v-if="currentStatus == 3" class="flex justify-center gap-6 enStop">
                 <div class="start">
-                    <button class="btn-start" @click="continueLottery"><strong>继续！</strong>
+                    <button class="btn-start" @click="continueLottery"><strong>{{$t('button.continue')}}</strong>
                         <div id="container-stars">
                             <div id="stars"></div>
                         </div>
@@ -678,7 +680,7 @@ onUnmounted(() => {
                 </div>
 
                 <div class="start">
-                    <button class="btn-cancel" @click="quitLottery"><strong>取消</strong>
+                    <button class="btn-cancel" @click="quitLottery"><strong>{{$t('button.cancel')}}</strong>
                         <div id="container-stars">
                             <div id="stars"></div>
                         </div>