:construction: 问答列表

dashboard/src/pages/library/discussion/list.tsx

@@ -1,13 +1,141 @@
+import { useIntl } from "react-intl";
 import { Link } from "react-router-dom";
+import { ProList } from "@ant-design/pro-components";
+import { message, Space, Tag } from "antd";
+import { MessageOutlined } from "@ant-design/icons";
 
+import { IComment } from "../../../components/comment/CommentItem";
+import { ICommentListResponse } from "../../../components/api/Comment";
+import { get } from "../../../request";
+import { IUser } from "../../../components/auth/User";
+import TimeShow from "../../../components/general/TimeShow";
+
+interface IDiscussion {
+  id: string;
+  title?: string;
+  resType: string;
+  user: IUser;
+  childrenCount?: number;
+  updatedAt?: string;
+  createdAt?: string;
+}
 const Widget = () => {
   // TODO
+  const intl = useIntl();
+
   return (
     <div>
-      <div>
-        <Link to="/course/show/12345">课程1</Link>
-        <Link to="/course/show/23456">课程2</Link>
-      </div>
+      <ProList<IDiscussion>
+        search={{
+          filterType: "light",
+        }}
+        rowKey="id"
+        headerTitle="问答&求助"
+        request={async (params = {}, sorter, filter) => {
+          console.log(params, sorter, filter);
+          const url = `/v2/discussion?view=all`;
+          const json = await get<ICommentListResponse>(url);
+          if (!json.ok) {
+            message.error(json.message);
+          }
+          const discussions: IDiscussion[] = json.data.rows.map((item) => {
+            return {
+              id: item.id,
+              resType: item.res_type,
+              user: {
+                id: item.editor?.id ? item.editor.id : "",
+                nickName: item.editor?.nickName ? item.editor.nickName : "",
+                realName: item.editor?.userName ? item.editor.userName : "",
+                avatar: item.editor?.avatar ? item.editor.avatar : "",
+              },
+              title: item.title,
+              childrenCount: item.children_count,
+              createdAt: item.created_at,
+              updatedAt: item.updated_at,
+            };
+          });
+          return {
+            total: json.data.count,
+            succcess: true,
+            data: discussions,
+          };
+        }}
+        pagination={{
+          pageSize: 20,
+        }}
+        metas={{
+          title: {
+            dataIndex: "title",
+            title: "标题",
+            render: (_, row) => {
+              return (
+                <Link to={`/discussion/topic/${row.id}`}>{row.title}</Link>
+              );
+            },
+          },
+          avatar: {
+            search: false,
+            render: (_, row) => {
+              return <span>{row.user.avatar}</span>;
+            },
+          },
+          description: {
+            search: false,
+            render: (_, row) => {
+              return (
+                <Space>
+                  {`${row.user.nickName} created on`}
+                  <TimeShow time={row.createdAt} title={""} />
+                </Space>
+              );
+            },
+          },
+          subTitle: {
+            render: (_, row) => {
+              return (
+                <Space size={0}>
+                  <Tag color="blue" key={row.resType}>
+                    {row.resType}
+                  </Tag>
+                </Space>
+              );
+            },
+            search: false,
+          },
+          actions: {
+            render: (text, row) => [
+              row.childrenCount ? (
+                <Space>
+                  <MessageOutlined /> {row.childrenCount}
+                </Space>
+              ) : (
+                <></>
+              ),
+            ],
+            search: false,
+          },
+          status: {
+            // 自己扩展的字段，主要用于筛选，不在列表中显示
+            title: "状态",
+            valueType: "select",
+            valueEnum: {
+              all: { text: "全部", status: "Default" },
+              open: {
+                text: "未解决",
+                status: "Error",
+              },
+              closed: {
+                text: "已解决",
+                status: "Success",
+              },
+              processing: {
+                text: "解决中",
+                status: "Processing",
+              },
+            },
+          },
+        }}
+      />
     </div>
   );
 };