feat(dashboard): add statistics API and enhance homepage dashboard cards

- Add Query and DataResponse interfaces to common API module
- Implement getDashboardStatistics API endpoint for fetching dashboard metrics
- Update TopCardList component to display real dashboard data with dynamic values
- Replace hardcoded dashboard metrics with actual API response data
- Add support for calculating and displaying weekly growth rates for spaces and users
- Update dashboard card labels and descriptions for models, spaces, users, and apps
- Add "Rebuild Graph" button translation to knowledge graph card (en/zh)
- Add appCount and userCount translation keys for dashboard display
- Fix dashboard metric key naming consistency (total_apps_runs → total_running_apps)
- Update dashboard descriptions to reflect weekly comparisons instead of daily
- Improve data binding between API response and UI components for real-time statistics
This commit is contained in:
yujiangping
2026-01-05 16:46:10 +08:00
parent f31341151f
commit 3d4c807a87
8 changed files with 174 additions and 62 deletions

View File

@@ -30,6 +30,7 @@ const CreateModal = forwardRef<CreateModalRef, CreateModalRefProps>(({
const [loading, setLoading] = useState(false);
const [activeTab, setActiveTab] = useState('basic');
const [generatingEntityTypes, setGeneratingEntityTypes] = useState(false);
const [isRebuildMode, setIsRebuildMode] = useState(false);
// 监听 parser_config.graphrag 相关字段的变化
const parserConfig = Form.useWatch('parser_config', form);
@@ -45,6 +46,7 @@ const CreateModal = forwardRef<CreateModalRef, CreateModalRefProps>(({
form.resetFields();
setLoading(false);
setActiveTab('basic');
setIsRebuildMode(false); // 重置重建模式标识
setVisible(false);
};
@@ -224,6 +226,15 @@ const CreateModal = forwardRef<CreateModalRef, CreateModalRefProps>(({
setDatasets(record || null);
const nextType = type || currentType;
setCurrentType(nextType as any);
setIsRebuildMode(type === 'rebuild'); // 设置重建模式标识
// 如果是重建模式,默认切换到知识图谱标签页
if (type === 'rebuild') {
setActiveTab('knowledgeGraph');
} else {
setActiveTab('basic');
}
setBaseFields(record || null, nextType);
getTypeList(record || null);
setVisible(true);
@@ -320,6 +331,9 @@ const CreateModal = forwardRef<CreateModalRef, CreateModalRefProps>(({
// 根据 type 获取标题
const getTitle = () => {
if (isRebuildMode) {
return t('knowledgeBase.rebuildGraph') + ' - ' + (datasets?.name || '');
}
if (datasets?.id) {
return t('knowledgeBase.edit') + ' ' + datasets.name;
}

View File

@@ -4,33 +4,40 @@
* @Author: yujiangping
* @Date: 2025-12-30 15:07:37
* @LastEditors: yujiangping
* @LastEditTime: 2026-01-04 20:15:12
* @LastEditTime: 2026-01-05 16:18:53
*/
import React, { useState, useEffect } from 'react'
import { useTranslation } from 'react-i18next';
import { Row } from 'antd'
import { Button } from 'antd';
import KnowledgeGraph, { type KnowledgeGraphResponse } from './KnowledgeGraph'
import { getKnowledgeGraph } from '@/api/knowledgeBase';
import { type KnowledgeBase } from '../types';
import Empty from '@/components/Empty';
interface KnowledgeGraphCardProps {
knowledgeBaseId?: string;
knowledgeBase?: KnowledgeBase;
onRebuildGraph?: () => void; // 添加重建图谱的回调函数
}
const KnowledgeGraphCard: React.FC<KnowledgeGraphCardProps> = ({ knowledgeBaseId }) => {
const KnowledgeGraphCard: React.FC<KnowledgeGraphCardProps> = ({ knowledgeBase, onRebuildGraph }) => {
const { t } = useTranslation();
const [data, setData] = useState<KnowledgeGraphResponse | undefined>()
const [loading, setLoading] = useState(true)
const handleRebuildGraph = () => {
// 调用父组件传递的回调函数来打开CreateModal并传递重建标识
if (onRebuildGraph) {
onRebuildGraph();
}
}
useEffect(() => {
const fetchData = async () => {
if (!knowledgeBaseId) {
if (!knowledgeBase?.id) {
setLoading(false)
return
}
setLoading(true)
try {
const res = await getKnowledgeGraph(knowledgeBaseId)
const res = await getKnowledgeGraph(knowledgeBase?.id)
setData(res as KnowledgeGraphResponse)
} catch (error) {
console.error('获取知识图谱数据失败:', error)
@@ -40,23 +47,28 @@ const KnowledgeGraphCard: React.FC<KnowledgeGraphCardProps> = ({ knowledgeBaseId
}
fetchData()
}, [knowledgeBaseId])
}, [knowledgeBase?.id])
return (
<div className='rb:flex rb:flex-col'>
<div className='rb:flex rb:flex-col rb:p-4'>
<div className='rb:flex rb:w-full rb:flex-col'>
<div className='rb:flex rb:w-full rb:flex-col rb:p-4'>
<div className='rb:w-full rb:text-lg rb:font-medium rb:text-[#212332] rb:leading-6'>
{t('knowledgeBase.graphTitle')}
</div>
<div className='rb:w-full rb:text-xs rb:text-[#5B6167] rb:leading-4 rb:mt-2'>
{t('knowledgeBase.graphTips')}
</div>
<div className='rb:flex rb:items-center rb:justify-between'>
<div className='rb:flex rb:w-full rb:items-center rb:justify-between rb:mt-4'>
<span className='rb:text-base rb:font-medium rb:text-[#212332]'>
{knowledgeBase?.parser_config?.graphrag?.scene_name}
</span>
<Button type="primary" onClick={() => handleRebuildGraph()}>
{t('knowledgeBase.rebuildGraph')}
</Button>
</div>
</div>
<div className='rb:p-4'>
<KnowledgeGraph data={data} loading={loading} />
<div className='rb:p-4 rb:pt-0'>
{knowledgeBase?.parser_config?.graphrag?.use_graphrag ? (<KnowledgeGraph data={data} loading={loading} />) : <Empty />}
</div>
</div>