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

View File

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

View File

@@ -3,6 +3,7 @@ import { ref, computed, watch } from 'vue'
import { useAccountStore } from '@/stores/useAccountStore' import { useAccountStore } from '@/stores/useAccountStore'
import type { DebtInstallment, FinancialAccount } from '@/api/types' import type { DebtInstallment, FinancialAccount } from '@/api/types'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
interface Props { interface Props {
visible: boolean visible: boolean
@@ -207,6 +208,7 @@ function handleClose() {
<el-date-picker <el-date-picker
v-model="form.start_date" v-model="form.start_date"
type="date" type="date"
:locale="zhCn"
placeholder="选择首次还款日期" placeholder="选择首次还款日期"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-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 { useUIStore } from '@/stores/useUIStore'
import type { TaskFormData } from '@/api/types' import type { TaskFormData } from '@/api/types'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
const taskStore = useTaskStore() const taskStore = useTaskStore()
const categoryStore = useCategoryStore() const categoryStore = useCategoryStore()
@@ -158,6 +159,7 @@ function handleClose() {
<el-date-picker <el-date-picker
v-model="form.due_date" v-model="form.due_date"
type="datetime" type="datetime"
:locale="zhCn"
placeholder="选择截止日期~(可选)" placeholder="选择截止日期~(可选)"
format="YYYY-MM-DD HH:mm" format="YYYY-MM-DD HH:mm"
value-format="YYYY-MM-DDTHH:mm:ss" value-format="YYYY-MM-DDTHH:mm:ss"

View File

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

View File

@@ -2,6 +2,7 @@
import { ref, computed, onMounted } from 'vue' import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus' import { ElMessage } from 'element-plus'
import type { UploadProps } from 'element-plus' import type { UploadProps } from 'element-plus'
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import { useUserSettingsStore } from '@/stores/useUserSettingsStore' import { useUserSettingsStore } from '@/stores/useUserSettingsStore'
const userStore = useUserSettingsStore() const userStore = useUserSettingsStore()
@@ -171,6 +172,7 @@ async function handleSave() {
<el-date-picker <el-date-picker
v-model="form.birthday" v-model="form.birthday"
type="date" type="date"
:locale="zhCn"
placeholder="选择你的生日" placeholder="选择你的生日"
format="YYYY-MM-DD" format="YYYY-MM-DD"
value-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" /> <link rel="icon" type="image/svg+xml" href="/vite.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>webui</title> <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/vendor-CwFI-VDq.js">
<link rel="modulepreload" crossorigin href="/assets/element-plus-CAICPA8-.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> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>