feat(index): add homepage with dashboard cards and knowledge graph support

- 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
This commit is contained in:
yujiangping
2026-01-05 10:37:08 +08:00
parent ebd2abbfa0
commit f31341151f
40 changed files with 2165 additions and 64 deletions

View File

@@ -0,0 +1,101 @@
import { type FC } from 'react';
import { useTranslation } from 'react-i18next';
import modelIcon from '@/assets/images/index/model_mgt.svg'
import spaceIcon from '@/assets/images/index/space_mgt.svg'
import workflowIcon from '@/assets/images/index/workflow_mgt.svg'
import userIcon from '@/assets/images/index/user_mgt.svg'
import dataExportIcon from '@/assets/images/index/data_export.svg'
import logIcon from '@/assets/images/index/log_mgt.svg'
import noteIcon from '@/assets/images/index/note_mgt.svg'
import helpCenterIcon from '@/assets/images/index/help_center.svg'
interface QuickAction {
key: string;
icon: string;
title: string;
onClick?: () => void;
}
interface QuickActionsProps {
className?: string;
onNavigate?: (path: string) => void;
}
const QuickActions: FC<QuickActionsProps> = ({ onNavigate }) => {
const { t } = useTranslation();
const quickActions: QuickAction[] = [
{
key: 'model-management',
icon: modelIcon,
title: t('quickActions.modelManagement'),
onClick: () => onNavigate?.('/model-management')
},
{
key: 'space-management',
icon: spaceIcon,
title: t('quickActions.spaceManagement'),
onClick: () => onNavigate?.('/spce')
},
{
key: 'workflow-orchestration',
icon: workflowIcon,
title: t('quickActions.workflowOrchestration'),
onClick: () => onNavigate?.('/workflow')
},
{
key: 'user-management',
icon: userIcon,
title: t('quickActions.userManagement'),
onClick: () => onNavigate?.('/user-management')
},
{
key: 'data-export',
icon: dataExportIcon,
title: t('quickActions.dataExport'),
onClick: () => onNavigate?.('/')
},
{
key: 'log-query',
icon: logIcon,
title: t('quickActions.logQuery'),
onClick: () => onNavigate?.('/log')
},
{
key: 'notification-reminder',
icon: noteIcon,
title: t('quickActions.notificationReminder'),
onClick: () => onNavigate?.('/notification-reminder')
},
{
key: 'help-center',
icon: helpCenterIcon,
title: t('quickActions.helpCenter'),
onClick: () => onNavigate?.('/help-center')
}
];
return (
<div className='rb:w-full rb:p-4 rb:bg-[#FBFDFF] rb:border-1 rb:border-[#DFE4ED] rb:rounded-xl'>
<div className='rb:flex rb:justify-start rb:text-base rb:font-medium rb:text-[#212332]'>
{ t('quickActions.title') }
</div>
<div className="rb:grid rb:grid-cols-3 md:rb:grid-cols-4 rb:gap-4 rb:mt-4">
{quickActions.map((action) => (
<div key={action.key}
className="rb:flex rb:flex-col rb:items-center rb:text-center rb:cursor-pointer rb:group"
onClick={action.onClick}
>
<img src={action.icon} className='rb:size-10 rb:mx-auto' />
<div className="rb:mt-2 rb:text-xs rb:max-w-[74px] rb:text-[#5B6167] rb:text-center rb:leading-[14px]">
{action.title}
</div>
</div>
))}
</div>
</div>);
};
export default QuickActions;