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:
@@ -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">
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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)
|
||||||
|
|||||||
@@ -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"
|
||||||
|
|||||||
@@ -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>
|
||||||
|
|||||||
Reference in New Issue
Block a user