zhangrenyuan
4 days ago
11 changed files with 301 additions and 12 deletions
-
82package-lock.json
-
1package.json
-
29src/App.vue
-
118src/components/dialogs/LanguageSwitch.vue
-
28src/components/locales/index.js
-
10src/components/locales/lang/en.js
-
10src/components/locales/lang/th.js
-
10src/components/locales/lang/zh-CN.js
-
3src/main.ts
-
3src/views/audit/gold/audit.vue
-
19src/views/home.vue
@ -1,9 +1,26 @@ |
|||||
<script setup> |
|
||||
</script> |
|
||||
|
|
||||
<template> |
<template> |
||||
<router-view></router-view> |
|
||||
|
<el-config-provider :locale="elLocale"> |
||||
|
<router-view /> |
||||
|
</el-config-provider> |
||||
</template> |
</template> |
||||
|
|
||||
<style scoped> |
|
||||
</style> |
|
||||
|
<script setup> |
||||
|
import { computed } from 'vue' |
||||
|
import { useI18n } from 'vue-i18n' |
||||
|
// 引入 Element Plus 的语言包 |
||||
|
import zhCnLocale from 'element-plus/dist/locale/zh-cn.mjs' |
||||
|
import enLocale from 'element-plus/dist/locale/en.mjs' |
||||
|
import thLocale from 'element-plus/dist/locale/th.mjs' |
||||
|
|
||||
|
const { locale } = useI18n() |
||||
|
|
||||
|
// 计算属性：根据当前 i18n 的语言，返回对应的 Element Plus 语言包 |
||||
|
const elLocale = computed(() => { |
||||
|
switch (locale.value) { |
||||
|
case 'zh-CN': return zhCnLocale |
||||
|
case 'en': return enLocale |
||||
|
case 'th': return thLocale |
||||
|
default: return zhCnLocale |
||||
|
} |
||||
|
}) |
||||
|
</script> |
||||
@ -0,0 +1,118 @@ |
|||||
|
<template> |
||||
|
<el-dialog |
||||
|
v-model="dialogVisible" |
||||
|
title="语言切换" |
||||
|
width="300px" |
||||
|
:close-on-click-modal="false" |
||||
|
append-to-body |
||||
|
> |
||||
|
<el-form label-width="80px"> |
||||
|
<el-form-item label="当前语言"> |
||||
|
<el-input |
||||
|
:model-value="getLangLabel(currentLang)" |
||||
|
disabled |
||||
|
/> |
||||
|
</el-form-item> |
||||
|
|
||||
|
<el-form-item label="切换语言"> |
||||
|
<el-select |
||||
|
v-model="tempLang" |
||||
|
placeholder="请选择语言" |
||||
|
style="width: 100%" |
||||
|
> |
||||
|
<el-option |
||||
|
v-for="item in langOptions" |
||||
|
:key="item.value" |
||||
|
:label="item.label" |
||||
|
:value="item.value" |
||||
|
/> |
||||
|
</el-select> |
||||
|
</el-form-item> |
||||
|
</el-form> |
||||
|
|
||||
|
<template #footer> |
||||
|
<div class="dialog-footer"> |
||||
|
<el-button @click="dialogVisible = false">取 消</el-button> |
||||
|
<el-button type="primary" @click="handleConfirm">确 定</el-button> |
||||
|
</div> |
||||
|
</template> |
||||
|
</el-dialog> |
||||
|
</template> |
||||
|
|
||||
|
<script setup> |
||||
|
import { ref, computed } from 'vue' |
||||
|
import { useI18n } from 'vue-i18n' |
||||
|
// === 关键修复：显式引入所有用到的 Element Plus 组件 === |
||||
|
import { |
||||
|
ElDialog, |
||||
|
ElForm, |
||||
|
ElFormItem, |
||||
|
ElInput, |
||||
|
ElSelect, |
||||
|
ElOption, |
||||
|
ElButton, |
||||
|
ElMessage |
||||
|
} from 'element-plus' |
||||
|
|
||||
|
// 如果你的项目样式也没有自动引入，可能还需要引入样式文件（视项目配置而定） |
||||
|
// import 'element-plus/es/components/dialog/style/css' |
||||
|
// import 'element-plus/es/components/form/style/css' |
||||
|
// ... 通常现在的脚手架只需要引入上面的组件即可 |
||||
|
|
||||
|
const { locale } = useI18n() |
||||
|
|
||||
|
// 控制弹窗显示 |
||||
|
const dialogVisible = ref(false) |
||||
|
|
||||
|
// 真正的当前语言 |
||||
|
const currentLang = computed(() => locale.value) |
||||
|
|
||||
|
// 临时选择的语言 |
||||
|
const tempLang = ref('') |
||||
|
|
||||
|
// 语言选项 |
||||
|
const langOptions = [ |
||||
|
{ label: '中文(简体)', value: 'zh-CN' }, |
||||
|
{ label: '中文(繁体)', value: 'zh-TW' }, |
||||
|
{ label: '英语', value: 'en' }, |
||||
|
{ label: '泰语', value: 'th' }, |
||||
|
{ label: '越南语', value: 'vi' } |
||||
|
] |
||||
|
|
||||
|
// 获取语言显示名称 |
||||
|
const getLangLabel = (langCode) => { |
||||
|
const find = langOptions.find(item => item.value === langCode) |
||||
|
return find ? find.label : langCode |
||||
|
} |
||||
|
|
||||
|
// 打开弹窗 |
||||
|
const open = () => { |
||||
|
tempLang.value = currentLang.value |
||||
|
dialogVisible.value = true |
||||
|
} |
||||
|
|
||||
|
// 确认修改 |
||||
|
const handleConfirm = () => { |
||||
|
locale.value = tempLang.value |
||||
|
localStorage.setItem('language', tempLang.value) |
||||
|
ElMessage.success(`语言已切换为：${getLangLabel(tempLang.value)}`) |
||||
|
dialogVisible.value = false |
||||
|
} |
||||
|
|
||||
|
defineExpose({ |
||||
|
open |
||||
|
}) |
||||
|
</script> |
||||
|
|
||||
|
<!-- 去掉scoped，全局生效 --> |
||||
|
<style > |
||||
|
.el-dialog__body { |
||||
|
height: 500px !important; |
||||
|
overflow-y: auto; |
||||
|
} |
||||
|
.dialog-footer { |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
gap: 20px; |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,28 @@ |
|||||
|
import { createI18n } from 'vue-i18n' |
||||
|
|
||||
|
// 引入你的本地语言包
|
||||
|
import zhCN from './lang/zh-CN' |
||||
|
import en from './lang/en' |
||||
|
import th from './lang/th' // 泰文
|
||||
|
|
||||
|
// 组合语言包
|
||||
|
const messages = { |
||||
|
'zh-CN': zhCN, |
||||
|
'en': en, |
||||
|
'th': th |
||||
|
} |
||||
|
|
||||
|
// 获取浏览器默认语言或缓存语言
|
||||
|
const getLocale = () => { |
||||
|
// 优先读取缓存，没有则读取浏览器语言，默认 zh-CN
|
||||
|
return localStorage.getItem('language') || 'zh-CN' |
||||
|
} |
||||
|
|
||||
|
const i18n = createI18n({ |
||||
|
legacy: false, // Vue 3 组合式 API 必须设置为 false
|
||||
|
globalInjection: true, // 全局注入 $t 函数
|
||||
|
locale: getLocale(), // 初始化语言
|
||||
|
messages // 语言包数据
|
||||
|
}) |
||||
|
|
||||
|
export default i18n |
||||
@ -0,0 +1,10 @@ |
|||||
|
export default { |
||||
|
common: { |
||||
|
confirm: 'Confirm', |
||||
|
cancel: 'Cancel' |
||||
|
}, |
||||
|
audit: { |
||||
|
rechargeAudit: 'Recharge Audit', |
||||
|
status: 'Status' |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
export default { |
||||
|
common: { |
||||
|
confirm: 'ยืนยัน', |
||||
|
cancel: 'ยกเลิก' |
||||
|
}, |
||||
|
audit: { |
||||
|
rechargeAudit: 'การตรวจสอบการเติมเงิน', |
||||
|
status: 'สถานะ' |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,10 @@ |
|||||
|
export default { |
||||
|
common: { |
||||
|
confirm: '确定', |
||||
|
cancel: '取消' |
||||
|
}, |
||||
|
audit: { |
||||
|
rechargeAudit: '充值审核', // 你的需求字段
|
||||
|
status: '状态' |
||||
|
} |
||||
|
} |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue