fix: configure Element Plus Chinese locale (zh-cn)

Add zh-cn locale to Element Plus globally via app.use() and el-config-provider wrapper, and apply :locale prop to all el-date-picker components in dialogs to ensure correct Chinese display in date pickers, calendars, and other locale-aware UI.

Made-with: Cursor
This commit is contained in:
祀梦
2026-03-16 15:47:15 +08:00
parent 473b9052b0
commit 40eb2dadb0
7 changed files with 16 additions and 3 deletions

View File

@@ -6,6 +6,7 @@ import { useCategoryStore } from '@/stores/useCategoryStore'
import { useTagStore } from '@/stores/useTagStore'
import { useUIStore } from '@/stores/useUIStore'
import { useUserSettingsStore } from '@/stores/useUserSettingsStore'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import AppHeader from '@/components/AppHeader.vue'
import TaskDialog from '@/components/TaskDialog.vue'
import CategoryDialog from '@/components/CategoryDialog.vue'
@@ -60,6 +61,7 @@ onMounted(async () => {
</script>
<template>
<el-config-provider :locale="zhCn">
<div class="app-container">
<div class="decoration-star" style="top: 20%; right: 8%; animation-delay: 0.5s;"></div>
<div class="decoration-star" style="top: 60%; left: 3%; animation-delay: 1s;"></div>
@@ -97,6 +99,7 @@ onMounted(async () => {
<TaskDialog />
<CategoryDialog />
</div>
</el-config-provider>
</template>
<style scoped lang="scss">

View File

@@ -3,6 +3,7 @@ import { ref, computed, watch } from 'vue'
import { useAnniversaryStore } from '@/stores/useAnniversaryStore'
import type { Anniversary } from '@/api/types'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
interface Props {
visible: boolean
@@ -119,6 +120,7 @@ function handleClose() {
<el-date-picker
v-model="form.date"
type="date"
:locale="zhCn"
placeholder="选择日期"
format="MM-DD"
value-format="YYYY-MM-DD"
@@ -135,6 +137,7 @@ function handleClose() {
<el-date-picker
v-model="form.year"
type="year"
:locale="zhCn"
placeholder="选择年份(可留空)"
format="YYYY"
value-format="YYYY"

View File

@@ -3,6 +3,7 @@ import { ref, computed, watch } from 'vue'
import { useAccountStore } from '@/stores/useAccountStore'
import type { DebtInstallment, FinancialAccount } from '@/api/types'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
interface Props {
visible: boolean
@@ -207,6 +208,7 @@ function handleClose() {
<el-date-picker
v-model="form.start_date"
type="date"
:locale="zhCn"
placeholder="选择首次还款日期"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"

View File

@@ -6,6 +6,7 @@ import { useTagStore } from '@/stores/useTagStore'
import { useUIStore } from '@/stores/useUIStore'
import type { TaskFormData } from '@/api/types'
import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const taskStore = useTaskStore()
const categoryStore = useCategoryStore()
@@ -158,6 +159,7 @@ function handleClose() {
<el-date-picker
v-model="form.due_date"
type="datetime"
:locale="zhCn"
placeholder="选择截止日期~(可选)"
format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DDTHH:mm:ss"

View File

@@ -1,6 +1,7 @@
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import ElementPlus from 'element-plus'
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'
import '@/styles/main.scss'
@@ -12,7 +13,7 @@ const pinia = createPinia()
app.use(pinia)
app.use(router)
app.use(ElementPlus)
app.use(ElementPlus, { locale: zhCn })
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)

View File

@@ -2,6 +2,7 @@
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useUserSettingsStore } from '@/stores/useUserSettingsStore'
const userStore = useUserSettingsStore()
@@ -171,6 +172,7 @@ async function handleSave() {
<el-date-picker
v-model="form.birthday"
type="date"
:locale="zhCn"
placeholder="选择你的生日"
format="YYYY-MM-DD"
value-format="YYYY-MM-DD"

View File

@@ -5,10 +5,10 @@
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webui</title>
<script type="module" crossorigin src="/assets/index-CZ83FtWq.js"></script>
<script type="module" crossorigin src="/assets/index-DP1ITMxF.js"></script>
<link rel="modulepreload" crossorigin href="/assets/vendor-CwFI-VDq.js">
<link rel="modulepreload" crossorigin href="/assets/element-plus-CAICPA8-.js">
<link rel="stylesheet" crossorigin href="/assets/index-DQPizegK.css">
<link rel="stylesheet" crossorigin href="/assets/index-DE0sVD5v.css">
</head>
<body>
<div id="app"></div>