108 lines
3.3 KiB
TypeScript
108 lines
3.3 KiB
TypeScript
/*
|
|
* @Author: ZhaoYing
|
|
* @Date: 2026-02-03 17:48:59
|
|
* @Last Modified by: ZhaoYing
|
|
* @Last Modified time: 2026-03-26 14:43:20
|
|
*/
|
|
/**
|
|
* Space Management Page
|
|
* Displays workspace list with creation and navigation capabilities
|
|
*/
|
|
|
|
import React, { useEffect, useState, useRef } from 'react';
|
|
import { useNavigate } from 'react-router-dom';
|
|
import { useTranslation } from 'react-i18next';
|
|
import { Button, Flex, Space as AntSpace, Tooltip, Row, Col } from 'antd';
|
|
|
|
import type { Space, SpaceModalRef } from './types';
|
|
import SpaceModal from './components/SpaceModal';
|
|
import RbCard from '@/components/RbCard'
|
|
import { getWorkspaces, switchWorkspace } from '@/api/workspaces'
|
|
import BodyWrapper from '@/components/Empty/BodyWrapper'
|
|
import Tag from '@/components/Tag'
|
|
|
|
const SpaceManagement: React.FC = () => {
|
|
const { t } = useTranslation();
|
|
const navigate = useNavigate();
|
|
const [loading, setLoading] = useState(false);
|
|
const [data, setData] = useState<Space[]>([]);
|
|
const spaceModalRef = useRef<SpaceModalRef>(null);
|
|
|
|
/** Load workspace list */
|
|
const loadMoreData = () => {
|
|
setLoading(true);
|
|
getWorkspaces()
|
|
.then((res) => {
|
|
const response = res as Space[];
|
|
const results = Array.isArray(response) ? response : [];
|
|
setData(results);
|
|
})
|
|
.catch(() => {
|
|
console.error('Failed to load data');
|
|
})
|
|
.finally(() => {
|
|
setLoading(false);
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
loadMoreData();
|
|
}, []);
|
|
|
|
/** Open create space modal */
|
|
const handleCreate = () => {
|
|
spaceModalRef.current?.handleOpen();
|
|
}
|
|
|
|
/** Switch to selected workspace */
|
|
const handleJump = (id: string) => {
|
|
switchWorkspace(id)
|
|
.then(() => {
|
|
localStorage.removeItem('user')
|
|
navigate('/')
|
|
})
|
|
}
|
|
return (
|
|
<>
|
|
<Button type="primary" className="rb:mb-4" onClick={handleCreate}>
|
|
{t('space.createSpace')}
|
|
</Button>
|
|
<BodyWrapper loading={loading} empty={data.length === 0}>
|
|
<Row
|
|
gutter={[16, 16]}
|
|
className="rb:max-h-[calc(100%-48px)] rb:overflow-y-auto"
|
|
>
|
|
{data.map(item => (
|
|
<Col key={item.id} span={6}>
|
|
<RbCard
|
|
avatarUrl={item.icon}
|
|
avatarText={item.name[0]}
|
|
title={<Flex vertical gap={6}>
|
|
<Tooltip title={item.name}>
|
|
<div className="rb:wrap-break-word rb:line-clamp-1">{item.name}</div>
|
|
</Tooltip>
|
|
<AntSpace>
|
|
<Tag color={item.storage_type === 'rag' ? 'processing' : 'warning'}>{t(`space.${item.storage_type || 'neo4j'}`)}</Tag>
|
|
<Tag color={item.is_active ? 'success' : 'error'}>{item.is_active ? t('space.associated') : t('space.notAssociated')}</Tag>
|
|
</AntSpace>
|
|
</Flex>}
|
|
isNeedTooltip={false}
|
|
footer={<Button type="primary" ghost block className="rb:mt-2 rb:h-9!" onClick={() => handleJump(item.id)}>
|
|
{t('space.enterSpace')}
|
|
</Button>}
|
|
>
|
|
</RbCard>
|
|
</Col>
|
|
))}
|
|
</Row>
|
|
</BodyWrapper>
|
|
|
|
<SpaceModal
|
|
ref={spaceModalRef}
|
|
refresh={loadMoreData}
|
|
/>
|
|
</>
|
|
);
|
|
};
|
|
|
|
export default SpaceManagement; |