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:
@@ -71,6 +71,7 @@ export const en = {
|
|||||||
stepTwoDescription: 'Here you can create and manage spaces to organize models and data for different use cases.Once your spaces are ready, head to User Management to invite members and manage access.👉 Click User Management in the left menu to continue.',
|
stepTwoDescription: 'Here you can create and manage spaces to organize models and data for different use cases.Once your spaces are ready, head to User Management to invite members and manage access.👉 Click User Management in the left menu to continue.',
|
||||||
stepThree: 'This is User Management',
|
stepThree: 'This is User Management',
|
||||||
stepThreeDescription: 'Here you can create users, assign roles, and manage access for your team.Once users are set up, the basic configuration is complete and you’re ready to start using the platform 🎉',
|
stepThreeDescription: 'Here you can create users, assign roles, and manage access for your team.Once users are set up, the basic configuration is complete and you’re ready to start using the platform 🎉',
|
||||||
|
finishButtonText: 'Get Started',
|
||||||
},
|
},
|
||||||
menu: {
|
menu: {
|
||||||
home: 'Home',
|
home: 'Home',
|
||||||
|
|||||||
@@ -71,6 +71,7 @@ export const zh = {
|
|||||||
stepTwoDescription: '你可以在这里创建和管理不同的空间,把模型和数据组织到具体的使用场景中。空间创建完成后,可以去 User Management 邀请成员、分配权限,一起协作使用。👉 点击左侧 User Management 继续。',
|
stepTwoDescription: '你可以在这里创建和管理不同的空间,把模型和数据组织到具体的使用场景中。空间创建完成后,可以去 User Management 邀请成员、分配权限,一起协作使用。👉 点击左侧 User Management 继续。',
|
||||||
stepThree: '这里是用户管理页',
|
stepThree: '这里是用户管理页',
|
||||||
stepThreeDescription: '你可以在这里创建用户、分配角色,并管理团队成员的访问权限。完成用户设置后,基础配置就准备好了,可以开始实际使用平台的各项功能了 🎉',
|
stepThreeDescription: '你可以在这里创建用户、分配角色,并管理团队成员的访问权限。完成用户设置后,基础配置就准备好了,可以开始实际使用平台的各项功能了 🎉',
|
||||||
|
finishButtonText: '开始使用',
|
||||||
},
|
},
|
||||||
menu: {
|
menu: {
|
||||||
home: '首页',
|
home: '首页',
|
||||||
|
|||||||
@@ -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 { create } from 'zustand'
|
||||||
import enUS from 'antd/locale/en_US';
|
import enUS from 'antd/locale/en_US';
|
||||||
import zhCN from 'antd/locale/zh_CN';
|
import zhCN from 'antd/locale/zh_CN';
|
||||||
@@ -12,6 +20,28 @@ import { timezoneToAntdLocaleMap } from '@/utils/timezones';
|
|||||||
dayjs.extend(utc);
|
dayjs.extend(utc);
|
||||||
dayjs.extend(timezone);
|
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 {
|
interface I18nState {
|
||||||
language: string;
|
language: string;
|
||||||
@@ -23,7 +53,7 @@ interface I18nState {
|
|||||||
|
|
||||||
const initialTimeZone = localStorage.getItem('timeZone') || 'Asia/Shanghai'
|
const initialTimeZone = localStorage.getItem('timeZone') || 'Asia/Shanghai'
|
||||||
const initialLanguage = localStorage.getItem('language') || 'en'
|
const initialLanguage = localStorage.getItem('language') || 'en'
|
||||||
const initialLocale = initialLanguage === 'en' ? enUS : zhCN
|
const initialLocale = initialLanguage === 'en' ? customEnUS : customZhCN
|
||||||
i18n.changeLanguage(initialLanguage)
|
i18n.changeLanguage(initialLanguage)
|
||||||
|
|
||||||
export const useI18n = create<I18nState>((set, get) => ({
|
export const useI18n = create<I18nState>((set, get) => ({
|
||||||
@@ -32,7 +62,7 @@ export const useI18n = create<I18nState>((set, get) => ({
|
|||||||
timeZone: initialTimeZone,
|
timeZone: initialTimeZone,
|
||||||
changeLanguage: (language: string) => {
|
changeLanguage: (language: string) => {
|
||||||
i18n.changeLanguage(language)
|
i18n.changeLanguage(language)
|
||||||
const localeName = timezoneToAntdLocaleMap[language] || enUS;
|
const localeName = language === 'en' ? customEnUS : customZhCN;
|
||||||
set({ language: language, locale: localeName })
|
set({ language: language, locale: localeName })
|
||||||
},
|
},
|
||||||
changeTimeZone: (timeZone: string) => {
|
changeTimeZone: (timeZone: string) => {
|
||||||
|
|||||||
@@ -1,3 +1,11 @@
|
|||||||
|
/*
|
||||||
|
* @Description:
|
||||||
|
* @Version: 0.0.1
|
||||||
|
* @Author: yujiangping
|
||||||
|
* @Date: 2026-01-13 11:44:06
|
||||||
|
* @LastEditors: yujiangping
|
||||||
|
* @LastEditTime: 2026-01-15 20:59:57
|
||||||
|
*/
|
||||||
import React, { useState, useRef } from 'react';
|
import React, { useState, useRef } from 'react';
|
||||||
import { useTranslation } from 'react-i18next';
|
import { useTranslation } from 'react-i18next';
|
||||||
import { useNavigate } from 'react-router-dom';
|
import { useNavigate } from 'react-router-dom';
|
||||||
|
|||||||
Reference in New Issue
Block a user