- Add new Index view with dashboard layout and quick action cards - Create TopCardList component to display core data management options - Add GuideCard and VersionCard components for user guidance - Add QuickActions component for common operations - Create KnowledgeGraph and KnowledgeGraphCard components for knowledge base visualization - Add comprehensive SVG assets for index page (apps, arrows, management icons) - Add common API module for shared request utilities - Extend knowledgeBase API with knowledge graph endpoints (getKnowledgeGraph, getKnowledgeGraphEntityTypes) - Update i18n translations for English and Chinese with new index page strings - Update routing configuration to include new Index route - Update menu configuration to reflect new navigation structure - Update KnowledgeBase CreateModal and Private view components - Add TypeScript types for Index page components - Improve overall UI/UX with new dashboard-style homepage
32 lines
1.4 KiB
TypeScript
32 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import { useTranslation } from 'react-i18next';
|
|
import guideBgImg from '@/assets/images/index/guide_bg@2x.png'
|
|
import { Button } from 'antd';
|
|
import { ArrowRightOutlined } from '@ant-design/icons'
|
|
import arrowRight from '@/assets/images/index/arrow_right_blue.svg'
|
|
const GuideCard: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className='rb:w-full rb:h-[204px] 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 className='rb:gap-2 rb:flex rb:items-center rb:text-[#155EEF] '>
|
|
<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>
|
|
);
|
|
};
|
|
|
|
export default GuideCard; |