feat: make knowledge space card

This commit is contained in:
shiweisong.ssw 2023-07-03 19:52:06 +08:00
parent f54b1cbdd4
commit f0cfacd65b

View File

@ -3,7 +3,7 @@
import { useRouter } from 'next/navigation' import { useRouter } from 'next/navigation'
import React, { useState, useEffect } from 'react' import React, { useState, useEffect } from 'react'
import { InboxOutlined } from '@ant-design/icons' import { InboxOutlined } from '@ant-design/icons'
import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined'; import CheckCircleOutlinedIcon from '@mui/icons-material/CheckCircleOutlined'
import type { UploadProps } from 'antd' import type { UploadProps } from 'antd'
import { message, Upload, Popover } from 'antd' import { message, Upload, Popover } from 'antd'
import { import {
@ -90,13 +90,16 @@ const Index = () => {
} }
useEffect(() => { useEffect(() => {
async function fetchData() { async function fetchData() {
const res = await fetch(`${process.env.API_BASE_URL}/knowledge/space/list`, { const res = await fetch(
`${process.env.API_BASE_URL}/knowledge/space/list`,
{
method: 'POST', method: 'POST',
headers: { headers: {
'Content-Type': 'application/json' 'Content-Type': 'application/json'
}, },
body: JSON.stringify({}) body: JSON.stringify({})
}) }
)
const data = await res.json() const data = await res.json()
if (data.success) { if (data.success) {
setKnowledgeSpaceList(data.data) setKnowledgeSpaceList(data.data)
@ -128,74 +131,94 @@ const Index = () => {
+ New Knowledge Space + New Knowledge Space
</Button> </Button>
</Sheet> </Sheet>
<div className="page-body p-4"> <Box className="page-body p-4" sx={{
{knowledgeSpaceList.length ? ( '&': {
<Table height: '90%',
color="primary" overflow: 'auto',
variant="plain" },
size="lg" '&::-webkit-scrollbar': {
display: 'none'
}
}}>
<Stack
direction="row"
justifyContent="space-between"
alignItems="center"
flexWrap="wrap"
sx={{ sx={{
'& tbody tr: hover': { '& i': {
backgroundColor: width: '430px',
mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(33, 33, 40)' marginRight: '30px'
},
'& tbody tr: hover a': {
textDecoration: 'underline'
},
'& tbody tr a': {
color: 'rgb(13, 96, 217)'
} }
}} }}
> >
<thead> {knowledgeSpaceList.map((item: any, index: number) => (
<tr> <Box
<th>Name</th> key={index}
<th>Vector</th> sx={{
<th>Owner</th> padding: '20px',
<th>Description</th> marginRight: '30px',
</tr> marginBottom: '30px',
</thead> backgroundColor: mode === 'light' ? 'rgb(246, 246, 246)' : 'rgb(72, 72, 72)',
<tbody> borderTop: '3px solid rgb(82, 196, 26)',
{knowledgeSpaceList.map((row: any) => ( flexShrink: 0,
<tr key={row.id}> flexGrow: 0,
<td> cursor: 'pointer',
{ '&: hover': {
<a boxShadow: '0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -4px rgba(0,0,0,.1);'
style={{ fontWeight: 'bold' }}
href="javascript:;"
onClick={() =>
router.push(`/datastores/documents?name=${row.name}`)
} }
}}
onClick={() => {
router.push(`/datastores/documents?name=${item.name}`);
}}
> >
{row.name} <Box sx={{
</a> fontSize: '18px',
} marginBottom: '10px',
</td> fontWeight: 'bold',
<td> }}>{item.name}</Box>
<Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}> <Box
{row.vector_type} sx={{
</Chip> display: 'flex',
</td> justifyContent: 'flex-start',
<td> }}
<Chip variant="solid" color="neutral" sx={{ opacity: 0.5 }}> >
{row.owner} <Box
</Chip> sx={{
</td> width: '130px',
<td> flexGrow: 0,
<Popover content={row.desc} trigger="hover"> flexShrink: 0
{row.desc.length > 10 }}
? `${row.desc.slice(0, 10)}...` >
: row.desc} <Box>{item.vector_type}</Box>
</Popover> <Box sx={{ fontSize: '12px' }}>Vector</Box>
</td> </Box>
</tr> <Box
sx={{
width: '130px',
flexGrow: 0,
flexShrink: 0
}}
>
<Box>{item.owner}</Box>
<Box sx={{ fontSize: '12px' }}>Owner</Box>
</Box>
<Box
sx={{
width: '130px',
flexGrow: 0,
flexShrink: 0
}}
>
<Box>{item.owner}</Box>
<Box sx={{ fontSize: '12px' }}>Docs</Box>
</Box>
</Box>
</Box>
))} ))}
</tbody> <i></i><i></i><i></i><i></i><i></i>
</Table> </Stack>
) : ( </Box>
<></>
)}
</div>
<Modal <Modal
sx={{ sx={{
display: 'flex', display: 'flex',
@ -225,7 +248,11 @@ const Index = () => {
color: activeStep === index ? '#814DDE' : '' color: activeStep === index ? '#814DDE' : ''
}} }}
> >
{index < activeStep ? <CheckCircleOutlinedIcon /> : `${index + 1}.`} {index < activeStep ? (
<CheckCircleOutlinedIcon />
) : (
`${index + 1}.`
)}
{`${item}`} {`${item}`}
</Item> </Item>
))} ))}