feat: add tags support

src/api/problem.ts

@@ -15,6 +15,7 @@ export interface ProblemInfo {
     meta: Meta;
     title: string;
     statement: string;
+    tags: { Elements: string[] };
     provider: UserProfile;
     is_enabled: boolean;
 }
@@ -34,13 +35,15 @@ export interface DetailsResp {
 }
 
 export interface SearchReq {
-    search: string;
+    keyword: string;
+    tag: string;
 }
 
 export interface UpdateReq {
     pid: number;
     title: string;
     statement: string;
+    tags: string[];
     is_enabled: boolean;
 }
 

src/components/problem-details.tsx

@@ -27,6 +27,11 @@ export default function ProblemDetails(props: ProblemDetailsProps) {
                     ))}
                 </Space>
             </Descriptions.Item>
+            <Descriptions.Item label="Tags">
+                {details.problem.tags.Elements.map((tag) => {
+                    return <Tag key={tag}>{tag}</Tag>;
+                })}
+            </Descriptions.Item>
             <Descriptions.Item label="Task Nums">{details.context.Tasks.length}</Descriptions.Item>
         </Descriptions>
     );

src/components/status-table.tsx

@@ -121,9 +121,6 @@ export default function StatusTable(props: StatusTableProps) {
             columns={columns}
             request={request}
             rowKey={(record) => record.id}
-            pagination={{
-                pageSize: 10,
-            }}
             search={false}
             scroll={{ x: "max-content" }}
             dateFormatter="string"

src/pages/search.tsx

@@ -1,13 +1,14 @@
 import { Link } from "react-router-dom";
 
 import { ProColumns, ProTable } from "@ant-design/pro-components";
-import { Button, Space } from "antd";
+import { Button, Space, Tag } from "antd";
 
 import { ProblemApi } from "../api/problem.ts";
 
 interface ProblemList {
     id: number;
     title: string;
+    tags: string[];
     provider: string;
 }
 
@@ -23,6 +24,20 @@ const columns: ProColumns<ProblemList>[] = [
         dataIndex: "title",
         align: "left",
     },
+    {
+        title: "Tags",
+        dataIndex: "tags",
+        align: "left",
+        render: (_node, entity) => {
+            return (
+                <Space>
+                    {entity.tags.map((tag) => {
+                        return <Tag key={tag}>{tag}</Tag>;
+                    })}
+                </Space>
+            );
+        },
+    },
     {
         title: "Provider",
         hideInSearch: true,
@@ -53,12 +68,14 @@ export default function SearchPage() {
     const request = async (params: Record<string, string>) => {
         try {
             const info = await ProblemApi.Search({
-                search: params.title || "",
+                keyword: params.title || "",
+                tag: params.tags || "",
             });
             const data = info.map((i) => {
                 return {
                     id: i.meta.ID,
                     title: i.title,
+                    tags: i.tags.Elements,
                     provider: i.provider.nick_name,
                 };
             });
@@ -75,12 +92,6 @@ export default function SearchPage() {
             columns={columns}
             request={request}
             rowKey={(record) => record.id}
-            pagination={{
-                pageSize: 10,
-            }}
-            search={{
-                labelWidth: "auto",
-            }}
             scroll={{ x: "max-content" }}
             dateFormatter="string"
             headerTitle="Problem Lists"