+
+ );
+};
+
+export default GuideCard;
\ No newline at end of file
diff --git a/web/src/views/Index/components/QuickActions.tsx b/web/src/views/Index/components/QuickActions.tsx
new file mode 100644
index 00000000..7cdb90ec
--- /dev/null
+++ b/web/src/views/Index/components/QuickActions.tsx
@@ -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
+ { t('index.getStarted')}
+
+
+ { t('index.startedDesc')}
+
+
+
+
+
+
+
);
+};
+
+export default QuickActions;
diff --git a/web/src/views/Index/components/TopCardList/index.module.css b/web/src/views/Index/components/TopCardList/index.module.css
new file mode 100644
index 00000000..46ed689c
--- /dev/null
+++ b/web/src/views/Index/components/TopCardList/index.module.css
@@ -0,0 +1,99 @@
+.card {
+ border-radius: 12px;
+ border: 1px solid #DFE4ED;
+ padding: 16px;
+}
+.header {
+ line-height: 16px;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 400;
+ font-size: 12px;
+ color: #212332;
+ font-style: normal;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+}
+.headerTitle {
+ /* Add your header title styles here */
+}
+.avatar {
+ width: 32px;
+ height: 32px;
+ background: #FFFFFF;
+ box-shadow: 0px 2px 6px 0px rgba(33, 35, 50, 0.1);
+ border-radius: 12px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ /* margin-right: 12px; */
+}
+.avatar img {
+ width: 32px;
+ height: 32px;
+}
+.content {
+ padding: 24px 24px 8px 0;
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ font-family: Gilroy, Gilroy;
+ font-weight: 800;
+ font-size: 28px;
+ color: #212332;
+ text-align: left;
+ font-style: normal;
+}
+.content-right {
+ text-align: right;
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 400;
+ font-size: 12px;
+ color: #5F6266;
+ line-height: 16px;
+ font-style: normal;
+ row-gap: 4px;
+}
+.trend {
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 500;
+ font-size: 14px;
+ line-height: 16px;
+ font-style: normal;
+ padding-left: 15px;
+ position: relative;
+ margin-bottom: 4px;
+ display: inline-block;
+}
+.trend::before {
+ width: 14px;
+ height: 14px;
+ content: '';
+ position: absolute;
+ left: 0;
+ top: 1px;
+ background-repeat: no-repeat;
+ background-size: contain;
+}
+.trend.up {
+ color: #369F21;
+}
+.trend.up::before {
+ background-image: url('@/assets/images/home/arrow_up_success.svg');
+}
+.trend.down {
+ color: #FF5D34;
+}
+.trend.down::before {
+ background-image: url('@/assets/images/home/arrow_down.png');
+}
+
+.trend-desc {
+ font-family: PingFangSC, PingFang SC;
+ font-weight: 500;
+ font-size: 14px;
+ color: #155EEF;
+ line-height: 16px;
+ text-align: left;
+ font-style: normal;
+}
\ No newline at end of file
diff --git a/web/src/views/Index/components/TopCardList/index.tsx b/web/src/views/Index/components/TopCardList/index.tsx
new file mode 100644
index 00000000..86973598
--- /dev/null
+++ b/web/src/views/Index/components/TopCardList/index.tsx
@@ -0,0 +1,110 @@
+import { type FC } from 'react'
+import { useTranslation } from 'react-i18next'
+import totalModels from '@/assets/images/index/models.svg';
+import totalSpaces from '@/assets/images/index/spaces.svg';
+import totalUsers from '@/assets/images/index/users.svg';
+import totalApps from '@/assets/images/index/apps.svg';
+import arrowUpDb from '@/assets/images/index/arrow_up_d.svg'
+import arrowDownDb from '@/assets/images/index/arrow_down_d.svg'
+import arrowUp from '@/assets/images/index/arrow_up.svg'
+import arrowDown from '@/assets/images/index/arrow_down.svg'
+import styles from './index.module.css'
+import type { DashboardData } from '../../types'
+
+const list = [
+ {
+ key: 'models',
+ icon: totalModels,
+ value: '24',
+ // trendValue: '12.5%',
+ trend: 'up',
+ // trendDesc: 'comparedToYesterday',
+ rate:"up",
+ rateValue: '12%',
+ background: 'linear-gradient( 136deg, rgba(21,94,239,0.06) 0%, rgba(251,253,255,0) 100%)'
+ },
+ {
+ key: 'spaces',
+ icon: totalSpaces,
+ value: '156',
+ trendValue: '+8',
+ trend: 'down',
+ rate:"up",
+ rateValue: '5.4%',
+ // trendDesc: 'comparedToYesterday',
+ background: 'linear-gradient( 134deg, rgba(54,159,33,0.06) 0%, rgba(251,253,255,0) 100%)',
+ },
+ {
+ key: 'users',
+ icon: totalUsers,
+ value: '1,248',
+ trendValue: '+42',
+ trend: 'up',
+ rate:"up",
+ rateValue: '12%',
+ // trendDesc: 'thisWeek',
+ background: 'linear-gradient( 136deg, rgba(77,168,255,0.06) 0%, rgba(251,253,255,0) 100%)',
+ },
+ {
+ key: 'apps_runs',
+ icon: totalApps,
+ value: '12.8k',
+ trendValue: '98.7%',
+ trend: 'up',
+ rate:"down",
+ rateValue: '2.1%',
+ // trendDesc: 'comparedToYesterday',
+ background: 'linear-gradient( 136deg, rgba(156,111,255,0.06) 0%, rgba(251,253,255,0) 100%)',
+ },
+]
+const TopCardList: FC<{data?: DashboardData}> = ({ data }) => {
+ const { t } = useTranslation()
+ return (
+
+ { t('quickActions.title') }
+
+
+
+ {quickActions.map((action) => (
+
+
+ 
+
+ ))}
+
+ {action.title}
+
+
+ {list.map((item) => {
+ return (
+
+ )
+}
+
+export default TopCardList
\ No newline at end of file
diff --git a/web/src/views/Index/components/VersionCard.tsx b/web/src/views/Index/components/VersionCard.tsx
new file mode 100644
index 00000000..3967dac4
--- /dev/null
+++ b/web/src/views/Index/components/VersionCard.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Button } from 'antd';
+import arrowRight from '@/assets/images/index/arrow_right.svg'
+const GuideCard: React.FC = () => {
+ const { t } = useTranslation();
+
+ return (
+
+
+ )
+ })}
+
+ 
+
+
+ {t(`dashboard.${'total_' + item.key}`)}
+
+ {data?.[`total_${item.key}` as keyof DashboardData] || item.value || 0}
+
+
+ {item.key === 'models' ? (
+
+
+ {t(`dashboard.${'desc_' + item.key}`, { account: 18, nums: 6 })}
+
+ ) : (<>
+
+ 
+ {item.trendValue}
+
+
+ {t(`dashboard.${'desc_' + item.key}`)}
+
+ )}
+
+ 
+ {item.rateValue}
+ {(item.key === 'models' || item.key === 'users') && ({t('dashboard.thisWeek')})}
+ {item.key === 'apps_runs' && ({t('dashboard.failureRate')})}
+ {item.key === 'spaces' && ({t('dashboard.thisDay')})}
+
+
+
+ );
+};
+
+export default GuideCard;
\ No newline at end of file
diff --git a/web/src/views/Index/index.tsx b/web/src/views/Index/index.tsx
new file mode 100644
index 00000000..759bbed2
--- /dev/null
+++ b/web/src/views/Index/index.tsx
@@ -0,0 +1,121 @@
+import { useEffect, useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
+import { Row, Col, Space, Button } from 'antd';
+import TopCardList from './components/TopCardList';
+import GuideCard from './components/GuideCard';
+import VersionCard from './components/VersionCard';
+import QuickActions from './components/QuickActions';
+import bgImg from '@/assets/images/index/index_bg@2x.png'
+import type { DashboardData } from './types';
+import Table, { type TableRef } from '@/components/Table'
+import type { ColumnsType } from 'antd/es/table';
+import { formatDateTime } from '@/utils/format';
+const Index = () => {
+ const { t } = useTranslation();
+ const [dashboardData, setDashboardData] = useState
+ { t('index.latestUpdate')}
+
+
+ { t('index.latestUpdateDesc')}
+
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+export default Index
\ No newline at end of file
diff --git a/web/src/views/Index/types.ts b/web/src/views/Index/types.ts
new file mode 100644
index 00000000..437c54e3
--- /dev/null
+++ b/web/src/views/Index/types.ts
@@ -0,0 +1,13 @@
+export interface TopCardListProps {
+ title:string;
+ description:string;
+ icon: Element;
+ number: number;
+ label: string;
+}
+export interface DashboardData {
+ total_models:number;
+ total_spaces:number;
+ total_users:number;
+ total_apps_runs: string;
+}
\ No newline at end of file
diff --git a/web/src/views/KnowledgeBase/[knowledgeBaseId]/Private.tsx b/web/src/views/KnowledgeBase/[knowledgeBaseId]/Private.tsx
index 136dc615..65ca05e8 100644
--- a/web/src/views/KnowledgeBase/[knowledgeBaseId]/Private.tsx
+++ b/web/src/views/KnowledgeBase/[knowledgeBaseId]/Private.tsx
@@ -2,18 +2,18 @@
import { useEffect, useState, useRef, useCallback, type FC } from 'react';
import { useNavigate, useParams, useLocation } from 'react-router-dom';
import { useTranslation } from 'react-i18next';
-import { Switch, Button, Dropdown, Space, Modal, message } from 'antd';
+import { Switch, Button, Dropdown, Space, Modal, message, Radio } from 'antd';
import type { MenuProps } from 'antd';
import SearchInput from '@/components/SearchInput'
import Table, { type TableRef } from '@/components/Table'
import type { ColumnsType } from 'antd/es/table';
import type { AnyObject } from 'antd/es/_util/type';
-import { MoreOutlined } from '@ant-design/icons';
+import { MoreOutlined, DeploymentUnitOutlined, BarsOutlined } from '@ant-design/icons';
import folderIcon from '@/assets/images/knowledgeBase/folder.png';
import textIcon from '@/assets/images/knowledgeBase/text.png';
import editIcon from '@/assets/images/knowledgeBase/edit.png';
-import blankIcon from '@/assets/images/knowledgeBase/blankDocument.png';
-import imageIcon from '@/assets/images/knowledgeBase/image.png'
+// import blankIcon from '@/assets/images/knowledgeBase/blankDocument.png';
+// import imageIcon from '@/assets/images/knowledgeBase/image.png'
import { getKnowledgeBaseDetail, deleteDocument, downloadFile, updateKnowledgeBase } from '@/api/knowledgeBase';
import {
type CreateModalRef,
@@ -22,8 +22,10 @@ import {
type CreateFolderModalRef,
type CreateSetModalRef,
type ShareModalRef,
- type CreateDatasetModalRef,type FolderFormData,
- type KnowledgeBaseDocumentData,
+ type CreateDatasetModalRef,
+ type FolderFormData,
+ type KnowledgeBaseDocumentData,
+ type KnowledgeBaseFormData,
} from '@/views/KnowledgeBase/types';
import RecallTestDrawer from '../components/RecallTestDrawer';
import CreateFolderModal from '../components/CreateFolderModal';
@@ -34,7 +36,7 @@ import CreateDatasetModal from '../components/CreateDatasetModal';
import CreateImageDataset from '../components/CreateImageDataset';
import FolderTree, { type TreeNodeData } from '../components/FolderTree';
import { formatDateTime } from '@/utils/format';
-
+import KnowledgeGraphCard from '../components/KnowledgeGraphCard';
import { useBreadcrumbManager, type BreadcrumbItem } from '@/hooks/useBreadcrumbManager';
import './Private.css'
const { confirm } = Modal
@@ -68,7 +70,7 @@ const Private: FC = () => {
const datasetModalRef = useRef
+
+ {/* 统计卡片 */}
+
+ { t('index.spaceTitle' )}
+
+
+ { t('index.spaceSubTitle' )}
+
+
+
+
+
+
+
+ {/* 快捷操作 */}
+
+
+
+
{folder && (
-
+
{
+ setIsGraph(e.target.value)}>
+
+
+
+
+
@@ -688,14 +724,18 @@ const Private: FC = () => {
- }
- columns={columns}
- rowKey="id"
- scrollX={1500}
- />
+ {isGraph ? (
+ }
+ columns={columns}
+ rowKey="id"
+ scrollX={1500}
+ />
+ )}