Browse Source

🦄 refactor: 完成后端接口对接,全局!!(把lang写了headers,切换语言后会全局刷新,包括浏览器后续优化)

zhangrenyuan/feature-20251125114759-多语言
zhangrenyuan 2 days ago
parent
commit
f40cdd2396
  1. 9
      src/components/dialogs/LanguageSwitch.vue
  2. 2
      src/components/locales/index.js
  3. 2
      src/components/locales/lang/en.js
  4. 11
      src/main.ts
  5. 10
      src/util/request.js
  6. 2
      src/views/audit/gold/rechargeAudit.vue

9
src/components/dialogs/LanguageSwitch.vue

@ -5,7 +5,7 @@
width="300px" width="300px"
:close-on-click-modal="false" :close-on-click-modal="false"
append-to-body append-to-body
class="language-switch-dialog"
class="lang-switch-dialog"
> >
<el-form label-width="80px"> <el-form label-width="80px">
<el-form-item label="切换语言"> <el-form-item label="切换语言">
@ -83,9 +83,14 @@ const open = () => {
// //
const handleConfirm = () => { const handleConfirm = () => {
locale.value = tempLang.value locale.value = tempLang.value
localStorage.setItem('language', tempLang.value)
localStorage.setItem('lang', tempLang.value)
ElMessage.success(`语言已切换为:${getLangLabel(tempLang.value)}`) ElMessage.success(`语言已切换为:${getLangLabel(tempLang.value)}`)
dialogVisible.value = false dialogVisible.value = false
//
setTimeout(() => {
window.location.reload()
}, 500)
} }
defineExpose({ defineExpose({

2
src/components/locales/index.js

@ -15,7 +15,7 @@ const messages = {
// 获取浏览器默认语言或缓存语言 // 获取浏览器默认语言或缓存语言
const getLocale = () => { const getLocale = () => {
// 优先读取缓存,没有则读取浏览器语言,默认 zh-CN // 优先读取缓存,没有则读取浏览器语言,默认 zh-CN
return localStorage.getItem('language') || 'zh-CN'
return localStorage.getItem('lang') || 'zh-CN'
} }
const i18n = createI18n({ const i18n = createI18n({

2
src/components/locales/lang/en.js

@ -32,6 +32,8 @@ export default {
// Currency Types // Currency Types
SGD: 'SGD', SGD: 'SGD',
goldCoin: '', // Gold Coin label intentionally empty goldCoin: '', // Gold Coin label intentionally empty
// 对话框标题
will: 'Will',
}, },
// Audit Group // Audit Group

11
src/main.ts

@ -50,3 +50,14 @@ const adminStore = useAdminStore()
const messageStore = useMessageStore() const messageStore = useMessageStore()
adminStore.initFromLocalStorage() adminStore.initFromLocalStorage()
messageStore.initFromLocalStorage() messageStore.initFromLocalStorage()
// 初始化语言设置
const initLanguage = () => {
const lang = localStorage.getItem('lang')
if (!lang) {
// 如果没有设置语言,默认使用中文
localStorage.setItem('lang', 'zh-CN')
}
}
initLanguage()

10
src/util/request.js

@ -26,15 +26,13 @@ export const uploadFile = (file) => {
service.interceptors.request.use(config => { service.interceptors.request.use(config => {
const token = localStorage.getItem('token') const token = localStorage.getItem('token')
if (token) { if (token) {
// 请求体里面为什么放token?
// if (config.data) {
// config.data.token = token;
// } else {
// config.data = { token };
// }
config.headers.token = `${token}` config.headers.token = `${token}`
} }
// 统一使用 'lang' 作为键名
const lang = localStorage.getItem('lang') || 'zh-CN'
config.headers.lang = lang
return config return config
}, error => { }, error => {
return Promise.reject(error) return Promise.reject(error)
}) })

2
src/views/audit/gold/rechargeAudit.vue

@ -94,7 +94,7 @@
</el-table-column> </el-table-column>
<el-table-column fixed="left" prop="name" :label="$t('audit.name')" width="150px" show-overflow-tooltip /> <el-table-column fixed="left" prop="name" :label="$t('audit.name')" width="150px" show-overflow-tooltip />
<el-table-column fixed="left" prop="jwcode" :label="$t('audit.jwcode')" width="110px" /> <el-table-column fixed="left" prop="jwcode" :label="$t('audit.jwcode')" width="110px" />
<el-table-column prop="market" :label="$t('audit.market')" width="100px" />
<el-table-column prop="market" :label="$t('audit.market')" width="120px" />
<el-table-column prop="activity" :label="$t('audit.activityName')" width="100px" show-overflow-tooltip /> <el-table-column prop="activity" :label="$t('audit.activityName')" width="100px" show-overflow-tooltip />
<el-table-column prop="rateName" :label="$t('audit.currencyName')" width="110px" /> <el-table-column prop="rateName" :label="$t('audit.currencyName')" width="110px" />
<el-table-column prop="money" :label="$t('audit.rechargeAmount')" sortable="custom" width="110px"> <el-table-column prop="money" :label="$t('audit.rechargeAmount')" sortable="custom" width="110px">

Loading…
Cancel
Save