f9a35d0cdc
- 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
101 lines
3.3 KiB
TypeScript
101 lines
3.3 KiB
TypeScript
/*
|
|
* @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 { useTranslation } from 'react-i18next';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import guideBgImg from '@/assets/images/index/guide_bg@2x.png'
|
|
import { Button, Tour } from 'antd';
|
|
import type { TourProps } from 'antd';
|
|
import arrowRight from '@/assets/images/index/arrow_right_blue.svg'
|
|
|
|
const GuideCard: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const [open, setOpen] = useState<boolean>(false);
|
|
const [currentStep, setCurrentStep] = useState<number>(0);
|
|
const startButtonRef = useRef<HTMLButtonElement>(null);
|
|
|
|
// Tour 步骤配置
|
|
const steps: TourProps['steps'] = [
|
|
{
|
|
title: t('indexTour.startTitle'),
|
|
description: t('indexTour.startDescription'),
|
|
target: () => startButtonRef.current!,
|
|
},
|
|
{
|
|
title: t('indexTour.stepOne'),
|
|
description: t('indexTour.stepOneDescription'),
|
|
target: () => document.querySelector('[data-menu-id="/model"]') as HTMLElement,
|
|
},
|
|
{
|
|
title: t('indexTour.stepTwo'),
|
|
description: t('indexTour.stepTwoDescription'),
|
|
target: () => document.querySelector('[data-menu-id="/space"]') as HTMLElement,
|
|
},
|
|
{
|
|
title: t('indexTour.stepThree'),
|
|
description: t('indexTour.stepThreeDescription'),
|
|
target: () => document.querySelector('[data-menu-id="/user-management"]') as HTMLElement,
|
|
}
|
|
];
|
|
|
|
// 开始引导
|
|
const handleStartGuide = () => {
|
|
setCurrentStep(0);
|
|
setOpen(true);
|
|
};
|
|
|
|
// Tour 步骤变化处理
|
|
const handleStepChange = (current: number) => {
|
|
setCurrentStep(current);
|
|
// 不再自动跳转页面，让用户通过点击菜单项来导航
|
|
};
|
|
|
|
// Tour 完成处理
|
|
const handleTourFinish = () => {
|
|
setOpen(false);
|
|
setCurrentStep(0);
|
|
// 完成后导航到模型管理页面
|
|
navigate('/model');
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<div className='rb:w-full rb:p-4' style={{ backgroundImage: `url(${guideBgImg})`, backgroundSize: '100% 100%' }}>
|
|
<div className='rb:flex rb:justify-start rb:text-white rb:text-base rb:font-semibold' >
|
|
{ t('index.getStarted')}
|
|
</div>
|
|
<div className='rb:flex rb:text-xs rb:text-white rb:leading-[18px] rb:mt-3'>
|
|
{ t('index.startedDesc')}
|
|
</div>
|
|
<div className='rb:flex rb:w-full rb:items-center rb:justify-between rb:gap-3 rb:mt-4'>
|
|
<Button ref={startButtonRef} className='rb:gap-2 rb:w-full rb:flex rb:items-center rb:text-[#155EEF]' onClick={handleStartGuide}>
|
|
<span className='rb:text-xs'>{ t('index.viewGuide')}</span>
|
|
<img src={arrowRight} className='rb:size-4' />
|
|
</Button>
|
|
{/* <Button className='rb:gap-2 rb:flex rb:items-center rb:text-[#155EEF]'>
|
|
<span className='rb:text-xs'>{ t('index.watchVideo')}</span>
|
|
<img src={arrowRight} className='rb:size-4' />
|
|
</Button> */}
|
|
</div>
|
|
</div>
|
|
|
|
<Tour
|
|
open={open}
|
|
onClose={() => setOpen(false)}
|
|
steps={steps}
|
|
current={currentStep}
|
|
onChange={handleStepChange}
|
|
onFinish={handleTourFinish}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default GuideCard; |