feat: make knowledge space card

datacenter/app/datastores/page.tsx

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