refactor: support i18n in frontend

This commit is contained in:
2026-07-21 19:34:19 +08:00
parent 1a9eb9299b
commit e16a40148a
24 changed files with 628 additions and 400 deletions
+11 -11
View File
@@ -19,7 +19,7 @@ import {
dayOfWeek,
isLeapYear,
} from '@/utils/datetime';
import { MONTH_NAMES, WEEK_NAMES, universalGetMonth } from '@/utils/i18n';
import { i18n, universalGetMonth } from '@/utils/i18n';
// region: Constants
@@ -121,11 +121,11 @@ const isHourTab = computed<boolean>(() => currentTab.value === TabType.Hour);
const isMinuteTab = computed<boolean>(() => currentTab.value === TabType.Minute);
const tabLabel = (t: TabType): string => {
if (t === TabType.Year) return 'Year';
if (t === TabType.Month) return 'Month';
if (t === TabType.Day) return 'Day';
if (t === TabType.Hour) return 'Hour';
return 'Minute';
if (t === TabType.Year) return i18n.global.t('universal-text-year');
if (t === TabType.Month) return i18n.global.t('universal-text-month');
if (t === TabType.Day) return i18n.global.t('universal-text-day');
if (t === TabType.Hour) return i18n.global.t('universal-text-hour');
return i18n.global.t('universal-text-minute');
}
const headerValue = (t: TabType): number => {
@@ -200,9 +200,9 @@ interface MonthCell {
const monthCells = computed<MonthCell[]>(() => {
const sameYear = displayCacheDateTime.value.getFullYear() === internalDateTime.value.getFullYear();
const pickedMonth = internalDateTime.value.getMonth();
return MONTH_NAMES.map((name, idx) => ({
return Array.from({ length: 12 }, (_, idx) => ({
idx,
name,
name: universalGetMonth(idx),
picked: sameYear && idx === pickedMonth,
}));
})
@@ -551,7 +551,7 @@ watch(currentTab, (t) => {
</nav>
<div class="perfectTable">
<div>
<div v-for="(w, i) in WEEK_NAMES" :key="i">{{ w }}</div>
<div v-for="i in 7" :key="i">{{ $t('universal-week-' + i) }}</div>
</div>
<div v-for="(row, ri) in dayRows" :key="ri">
<div v-for="(cell, ci) in row" :key="ci" :class="{ picked: cell.picked }" @click="clickDay(cell)">
@@ -587,8 +587,8 @@ watch(currentTab, (t) => {
</div>
<footer class="modal-card-foot">
<a class="button is-success" @click="confirm"><span>OK</span></a>
<a class="button" @click="cancel"><span>Cancel</span></a>
<a class="button is-success" @click="confirm"><span>{{ $t('datetimepicker-confirm') }}</span></a>
<a class="button" @click="cancel"><span>{{ $t('datetimepicker-cancel') }}</span></a>
</footer>
</div>
</div>