Skip to content

Commit 1ba4a48

Browse files
RSS1102RSS1102
committed
fix(i18n): 修复国际化响应式更新问题
1 parent 6808972 commit 1ba4a48

File tree

14 files changed

+77
-44
lines changed

14 files changed

+77
-44
lines changed

‎src/components/common-table/index.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -114,7 +114,7 @@
114114
</t-table>
115115
<t-dialog
116116
v-model:visible="confirmVisible"
117-
:header="t('pages.listCard.deleteConfirm')"
117+
:header="t('pages.listBase.deleteConfirm')"
118118
:body="confirmBody"
119119
:on-cancel="onCancel"
120120
@confirm="onConfirmDelete"
@@ -242,7 +242,7 @@ const deleteIdx = ref(-1);
242242
const confirmBody = computed(() => {
243243
if (deleteIdx.value > -1) {
244244
const { name } = data.value[deleteIdx.value];
245-
return t('pages.listCard.deleteTip', { name });
245+
return t('pages.listBase.deleteTip', { name });
246246
}
247247
return '';
248248
});

‎src/layouts/setting.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -124,11 +124,11 @@ const settingStore = useSettingStore();
124124
125125
const LAYOUT_OPTION = ['side', 'top', 'mix'];
126126
127-
const MODE_OPTIONS = [
127+
const MODE_OPTIONS = computed(() => [
128128
{ type: 'light', text: t('layout.setting.theme.options.light') },
129129
{ type: 'dark', text: t('layout.setting.theme.options.dark') },
130130
{ type: 'auto', text: t('layout.setting.theme.options.auto') },
131-
];
131+
]);
132132
133133
const initStyleConfig = () => {
134134
const styleConfig = STYLE_CONFIG;

‎src/locales/index.ts‎

Lines changed: 13 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,20 @@
11
import { useLocalStorage, usePreferredLanguages } from '@vueuse/core';
22
import type { DropdownOption } from 'tdesign-vue-next';
3+
import en_US from 'tdesign-vue-next/es/locale/en_US';
4+
import zh_CN from 'tdesign-vue-next/es/locale/zh_CN';
35
import { computed } from 'vue';
46
import type { I18nOptions } from 'vue-i18n';
57
import { createI18n } from 'vue-i18n';
68

79
// 导入语言文件 (JSON 方式)
810
const langModules = import.meta.glob<{ default: Record<string, unknown> }>('./lang/*.json', { eager: true });
911

12+
// TDesign 组件 locale 映射
13+
const TDESIGN_LOCALE_MAP: Record<string, Record<string, unknown>> = {
14+
zh_CN,
15+
en_US,
16+
};
17+
1018
export const localeConfigKey = 'tdesign-starter-locale';
1119

1220
// 获取浏览器默认语言环境
@@ -23,7 +31,11 @@ const parseLangModules = () => {
2331
if (match) {
2432
const code = match[1];
2533
langCode.push(code);
26-
messages[code] = module.default;
34+
// 合并自定义语言包和 TDesign 组件 locale
35+
messages[code] = {
36+
...module.default,
37+
componentsLocale: TDESIGN_LOCALE_MAP[code],
38+
};
2739
langList.push({
2840
content: module.default.lang as string,
2941
value: code,

‎src/pages/dashboard/base/components/RankList.vue‎

Lines changed: 21 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
<t-radio-button value="monthVal">{{ t('pages.dashboardBase.rankList.month') }}</t-radio-button>
99
</t-radio-group>
1010
</template>
11-
<t-table :data="SALE_TEND_LIST" :columns="SALE_COLUMNS" row-key="productName">
11+
<t-table :data="saleTendData" :columns="SALE_COLUMNS" row-key="productName">
1212
<template #index="{ rowIndex }">
1313
<span :class="getRankClass(rowIndex)">
1414
{{ rowIndex + 1 }}
@@ -35,7 +35,7 @@
3535
<t-radio-button value="monthVal">{{ t('pages.dashboardBase.rankList.month') }}</t-radio-button>
3636
</t-radio-group>
3737
</template>
38-
<t-table :data="BUY_TEND_LIST" :columns="BUY_COLUMNS" row-key="productName">
38+
<t-table :data="buyTendData" :columns="BUY_COLUMNS" row-key="productName">
3939
<template #index="{ rowIndex }">
4040
<span :class="getRankClass(rowIndex)">
4141
{{ rowIndex + 1 }}
@@ -56,13 +56,28 @@
5656
</template>
5757
<script setup lang="ts">
5858
import type { TdBaseTableProps } from 'tdesign-vue-next';
59+
import { computed } from 'vue';
5960
6061
import Trend from '@/components/trend/index.vue';
6162
import { t } from '@/locales';
6263
6364
import { BUY_TEND_LIST, SALE_TEND_LIST } from '../constants';
6465
65-
const SALE_COLUMNS: TdBaseTableProps['columns'] = [
66+
const saleTendData = computed(() =>
67+
SALE_TEND_LIST.map((item) => ({
68+
...item,
69+
productName: t(item.productName),
70+
})),
71+
);
72+
73+
const buyTendData = computed(() =>
74+
BUY_TEND_LIST.map((item) => ({
75+
...item,
76+
productName: t(item.productName),
77+
})),
78+
);
79+
80+
const SALE_COLUMNS = computed<TdBaseTableProps['columns']>(() => [
6681
{
6782
align: 'center',
6883
colKey: 'index',
@@ -96,9 +111,9 @@ const SALE_COLUMNS: TdBaseTableProps['columns'] = [
96111
width: 70,
97112
fixed: 'right',
98113
},
99-
];
114+
]);
100115
101-
const BUY_COLUMNS: TdBaseTableProps['columns'] = [
116+
const BUY_COLUMNS = computed<TdBaseTableProps['columns']>(() => [
102117
{
103118
align: 'center',
104119
colKey: 'index',
@@ -132,7 +147,7 @@ const BUY_COLUMNS: TdBaseTableProps['columns'] = [
132147
width: 70,
133148
fixed: 'right',
134149
},
135-
];
150+
]);
136151
137152
const rehandleClickOp = (val: MouseEvent) => {
138153
console.log(val);

‎src/pages/dashboard/base/constants.ts‎

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
1-
import { t } from '@/locales';
2-
31
interface TendItem {
42
growUp?: number;
53
productName: string;
@@ -10,37 +8,37 @@ interface TendItem {
108
export const SALE_TEND_LIST: Array<TendItem> = [
119
{
1210
growUp: 1,
13-
productName: t('pages.dashboardBase.saleTend.item1'),
11+
productName: 'pages.dashboardBase.saleTend.item1',
1412
count: 7059,
1513
date: '2021-09-01',
1614
},
1715
{
1816
growUp: -1,
19-
productName: t('pages.dashboardBase.saleTend.item2'),
17+
productName: 'pages.dashboardBase.saleTend.item2',
2018
count: 6437,
2119
date: '2021-09-01',
2220
},
2321
{
2422
growUp: 4,
25-
productName: t('pages.dashboardBase.saleTend.item3'),
23+
productName: 'pages.dashboardBase.saleTend.item3',
2624
count: 4221,
2725
date: '2021-09-01',
2826
},
2927
{
3028
growUp: 3,
31-
productName: t('pages.dashboardBase.saleTend.item4'),
29+
productName: 'pages.dashboardBase.saleTend.item4',
3230
count: 3317,
3331
date: '2021-09-01',
3432
},
3533
{
3634
growUp: -3,
37-
productName: t('pages.dashboardBase.saleTend.item5'),
35+
productName: 'pages.dashboardBase.saleTend.item5',
3836
count: 3015,
3937
date: '2021-09-01',
4038
},
4139
{
4240
growUp: -3,
43-
productName: t('pages.dashboardBase.saleTend.item6'),
41+
productName: 'pages.dashboardBase.saleTend.item6',
4442
count: 2015,
4543
date: '2021-09-12',
4644
},
@@ -49,37 +47,37 @@ export const SALE_TEND_LIST: Array<TendItem> = [
4947
export const BUY_TEND_LIST: Array<TendItem> = [
5048
{
5149
growUp: 1,
52-
productName: t('pages.dashboardBase.buyTend.item1'),
50+
productName: 'pages.dashboardBase.buyTend.item1',
5351
count: 3015,
5452
date: '2021-09-01',
5553
},
5654
{
5755
growUp: -1,
58-
productName: t('pages.dashboardBase.buyTend.item2'),
56+
productName: 'pages.dashboardBase.buyTend.item2',
5957
count: 2015,
6058
date: '2021-09-01',
6159
},
6260
{
6361
growUp: 6,
64-
productName: t('pages.dashboardBase.buyTend.item3'),
62+
productName: 'pages.dashboardBase.buyTend.item3',
6563
count: 1815,
6664
date: '2021-09-11',
6765
},
6866
{
6967
growUp: -3,
70-
productName: t('pages.dashboardBase.buyTend.item4'),
68+
productName: 'pages.dashboardBase.buyTend.item4',
7169
count: 1015,
7270
date: '2021-09-21',
7371
},
7472
{
7573
growUp: -4,
76-
productName: t('pages.dashboardBase.buyTend.item5'),
74+
productName: 'pages.dashboardBase.buyTend.item5',
7775
count: 445,
7876
date: '2021-09-19',
7977
},
8078
{
8179
growUp: -3,
82-
productName: t('pages.dashboardBase.buyTend.item6'),
80+
productName: 'pages.dashboardBase.buyTend.item6',
8381
count: 2015,
8482
date: '2021-09-12',
8583
},

‎src/pages/dashboard/detail/constants.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { t } from '@/locales';
22

3-
export const PANE_LIST_DATA = [
3+
export const getPaneListData = () => [
44
{
55
title: t('pages.dashboardDetail.topPanel.paneList.totalRequest'),
66
number: '1126',
@@ -34,7 +34,7 @@ export const PANE_LIST_DATA = [
3434
},
3535
];
3636

37-
export const PRODUCT_LIST = [
37+
export const getProductList = () => [
3838
{
3939
description: t('pages.dashboardDetail.sslDescription'),
4040
index: 1,

‎src/pages/dashboard/detail/index.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ import { useSettingStore } from '@/store';
7777
import { changeChartsTheme } from '@/utils/color';
7878
import { LAST_7_DAYS } from '@/utils/date';
7979
80-
import { PANE_LIST_DATA, PRODUCT_LIST } from './constants';
80+
import { getPaneListData, getProductList } from './constants';
8181
import { getFolderLineDataSet, getScatterDataSet } from './index';
8282
8383
defineOptions({
@@ -88,6 +88,9 @@ echarts.use([GridComponent, LegendComponent, TooltipComponent, LineChart, Scatte
8888
const store = useSettingStore();
8989
const chartColors = computed(() => store.chartColors);
9090
91+
const PANE_LIST_DATA = computed(() => getPaneListData());
92+
const PRODUCT_LIST = computed(() => getProductList());
93+
9194
// lineChart logic
9295
let lineContainer: HTMLElement;
9396
let lineChart: echarts.ECharts;

‎src/pages/detail/advanced/constants.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { t } from '@/locales';
22

3-
export const BASE_INFO_DATA = [
3+
export const getBaseInfoData = () => [
44
{
55
name: t('constants.contract.name'),
66
value: t('pages.detailBase.sampleData.contractName'),
@@ -79,7 +79,7 @@ export const BASE_INFO_DATA = [
7979
},
8080
];
8181

82-
export const PRODUCT_LIST = [
82+
export const getProductList = () => [
8383
{
8484
name: t('pages.detailCard.products.product1.name'),
8585
subtitle: t('pages.detailCard.products.product1.company'),

‎src/pages/detail/advanced/index.vue‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -137,12 +137,15 @@ import { getPurchaseList } from '@/api/detail';
137137
import { t } from '@/locales';
138138
139139
import Product from './components/Product.vue';
140-
import { BASE_INFO_DATA, PRODUCT_LIST } from './constants';
140+
import { getBaseInfoData, getProductList } from './constants';
141141
142142
defineOptions({
143143
name: 'DetailAdvanced',
144144
});
145145
146+
const BASE_INFO_DATA = computed(() => getBaseInfoData());
147+
const PRODUCT_LIST = computed(() => getProductList());
148+
146149
const columns = [
147150
{
148151
width: 280,

‎src/pages/detail/base/index.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,13 +35,15 @@
3535
</div>
3636
</template>
3737
<script setup lang="ts">
38+
import { computed } from 'vue';
39+
3840
import { t } from '@/locales';
3941
4042
defineOptions({
4143
name: 'DetailBase',
4244
});
4345
44-
const BASE_INFO_DATA = [
46+
const BASE_INFO_DATA = computed(() => [
4547
{
4648
name: t('constants.contract.name'),
4749
value: t('pages.detailBase.sampleData.contractName'),
@@ -113,7 +115,7 @@ const BASE_INFO_DATA = [
113115
value: '2020-12-22 10:00:00',
114116
type: null,
115117
},
116-
];
118+
]);
117119
</script>
118120
<style lang="less" scoped>
119121
@import './index.less';

0 commit comments

Comments
 (0)