doc gpt V0.2

src/pages/model/components/ModelTable.tsx

@@ -0,0 +1,120 @@
+import React from 'react';
+import {
+  Button,
+  Table,
+  Thead,
+  Tbody,
+  Tr,
+  Th,
+  Td,
+  TableContainer,
+  Tag,
+  Card,
+  Box
+} from '@chakra-ui/react';
+import { formatModelStatus } from '@/constants/model';
+import dayjs from 'dayjs';
+import type { ModelType } from '@/types/model';
+import { useRouter } from 'next/router';
+
+const ModelTable = ({
+  models = [],
+  handlePreviewChat
+}: {
+  models: ModelType[];
+  handlePreviewChat: (_: string) => void;
+}) => {
+  const router = useRouter();
+  const columns = [
+    {
+      title: '模型名',
+      key: 'name',
+      dataIndex: 'name'
+    },
+    {
+      title: '最后更新时间',
+      key: 'updateTime',
+      render: (item: ModelType) => dayjs(item.updateTime).format('YYYY-MM-DD HH:mm')
+    },
+    {
+      title: '状态',
+      key: 'status',
+      dataIndex: 'status',
+      render: (item: ModelType) => (
+        <Tag
+          colorScheme={formatModelStatus[item.status].colorTheme}
+          variant="solid"
+          px={3}
+          size={'md'}
+        >
+          {formatModelStatus[item.status].text}
+        </Tag>
+      )
+    },
+    {
+      title: 'AI模型',
+      key: 'service',
+      render: (item: ModelType) => (
+        <Box wordBreak={'break-all'} whiteSpace={'pre-wrap'} maxW={'200px'}>
+          {item.service.modelName}
+        </Box>
+      )
+    },
+    {
+      title: '训练次数',
+      key: 'trainingTimes',
+      dataIndex: 'trainingTimes'
+    },
+    {
+      title: '操作',
+      key: 'control',
+      render: (item: ModelType) => (
+        <>
+          <Button mr={3} onClick={() => handlePreviewChat(item._id)}>
+            对话
+          </Button>
+          <Button
+            colorScheme={'gray'}
+            onClick={() => router.push(`/model/detail?modelId=${item._id}`)}
+          >
+            编辑
+          </Button>
+        </>
+      )
+    }
+  ];
+
+  return (
+    <Card py={3}>
+      <TableContainer>
+        <Table variant={'simple'}>
+          <Thead>
+            <Tr>
+              {columns.map((item) => (
+                <Th key={item.key}>{item.title}</Th>
+              ))}
+            </Tr>
+          </Thead>
+          <Tbody>
+            {models.map((item) => (
+              <Tr key={item._id}>
+                {columns.map((col) => (
+                  <Td key={col.key}>
+                    {col.render
+                      ? col.render(item)
+                      : !!col.dataIndex
+                      ? // @ts-ignore nextline
+                        item[col.dataIndex]
+                      : ''}
+                  </Td>
+                ))}
+              </Tr>
+            ))}
+          </Tbody>
+        </Table>
+      </TableContainer>
+    </Card>
+  );
+};
+
+export default ModelTable;