feat(i18n): customize Tour component button text and add finish button label

- Add finishButtonText translation key to English and Chinese locale files
- Create customZhCN locale with Chinese Tour button labels (下一步, 上一步, 立即体验)
- Create customEnUS locale with English Tour button labels (Next, Previous, Try it now)
- Update locale store to use custom locale configurations instead of default Ant Design locales
- Fix changeLanguage method to apply custom locale mappings correctly
- Add file headers with metadata to GuideCard and locale store files
- Improve Tour component UX by providing localized button text for better user experience
This commit is contained in:
yujiangping
2026-01-15 21:03:07 +08:00
parent 1fb18cc11c
commit f9a35d0cdc
4 changed files with 42 additions and 2 deletions

View File

@@ -1,3 +1,11 @@
/*
* @Description:
* @Version: 0.0.1
* @Author: yujiangping
* @Date: 2026-01-05 17:22:23
* @LastEditors: yujiangping
* @LastEditTime: 2026-01-15 21:02:43
*/
import { create } from 'zustand'
import enUS from 'antd/locale/en_US';
import zhCN from 'antd/locale/zh_CN';
@@ -12,6 +20,28 @@ import { timezoneToAntdLocaleMap } from '@/utils/timezones';
dayjs.extend(utc);
dayjs.extend(timezone);
// 自定义中文 locale修改 Tour 组件的按钮文字
const customZhCN: Locale = {
...zhCN,
Tour: {
...zhCN.Tour,
Next: '下一步',
Previous: '上一步',
Finish: '立即体验',
},
};
// 自定义英文 locale修改 Tour 组件的按钮文字
const customEnUS: Locale = {
...enUS,
Tour: {
...enUS.Tour,
Next: 'Next',
Previous: 'Previous',
Finish: 'Try it now',
},
};
interface I18nState {
language: string;
@@ -23,7 +53,7 @@ interface I18nState {
const initialTimeZone = localStorage.getItem('timeZone') || 'Asia/Shanghai'
const initialLanguage = localStorage.getItem('language') || 'en'
const initialLocale = initialLanguage === 'en' ? enUS : zhCN
const initialLocale = initialLanguage === 'en' ? customEnUS : customZhCN
i18n.changeLanguage(initialLanguage)
export const useI18n = create<I18nState>((set, get) => ({
@@ -32,7 +62,7 @@ export const useI18n = create<I18nState>((set, get) => ({
timeZone: initialTimeZone,
changeLanguage: (language: string) => {
i18n.changeLanguage(language)
const localeName = timezoneToAntdLocaleMap[language] || enUS;
const localeName = language === 'en' ? customEnUS : customZhCN;
set({ language: language, locale: localeName })
},
changeTimeZone: (timeZone: string) => {