列表可折叠 #1337

dashboard/src/components/discussion/DiscussionListCard.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState } from "react";
 
-import { Typography } from "antd";
+import { Collapse, Typography } from "antd";
 
 import { get, put } from "../../request";
 import {
@@ -15,6 +15,7 @@ import { IAnswerCount } from "./DiscussionBox";
 import { ActionType, ProList } from "@ant-design/pro-components";
 import { renderBadge } from "../channel/ChannelTable";
 import DiscussionCreate from "./DiscussionCreate";
+const { Panel } = Collapse;
 
 export type TResType = "article" | "channel" | "chapter" | "sentence" | "wbw";
 interface IWidget {
@@ -40,6 +41,7 @@ const DiscussionListCardWidget = ({
   const [activeNumber, setActiveNumber] = useState<number>(0);
   const [closeNumber, setCloseNumber] = useState<number>(0);
   const [count, setCount] = useState<number>(0);
+
   useEffect(() => {
     console.log("changedAnswerCount", changedAnswerCount);
     ref.current?.reload();
@@ -55,148 +57,153 @@ const DiscussionListCardWidget = ({
 
   return (
     <>
-      <ProList<IComment>
-        itemLayout="vertical"
-        rowKey="id"
-        actionRef={ref}
-        metas={{
-          avatar: {
-            render(dom, entity, index, action, schema) {
-              return <></>;
-            },
-          },
-          title: {
-            render(dom, entity, index, action, schema) {
-              return <></>;
-            },
-          },
-          content: {
-            render: (text, row, index, action) => {
-              return (
-                <DiscussionItem
-                  data={row}
-                  onSelect={(
-                    e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
-                    data: IComment
-                  ) => {
-                    if (typeof onSelect !== "undefined") {
-                      onSelect(e, data);
-                    }
-                  }}
-                  onDelete={() => {
-                    ref.current?.reload();
-                  }}
-                  onReply={() => {
-                    if (typeof onReply !== "undefined") {
-                      onReply(row);
-                    }
-                  }}
-                  onClose={(value: boolean) => {
-                    console.log("comment", row);
-                    put<ICommentRequest, ICommentResponse>(
-                      `/v2/discussion/${row.id}`,
-                      {
-                        title: row.title,
-                        content: row.content,
-                        status: value ? "close" : "active",
-                      }
-                    ).then((json) => {
-                      console.log(json);
-                      if (json.ok) {
+      <Collapse bordered={false} defaultActiveKey="list">
+        <Panel header="讨论列表" key="list">
+          <ProList<IComment>
+            itemLayout="vertical"
+            rowKey="id"
+            actionRef={ref}
+            metas={{
+              avatar: {
+                render(dom, entity, index, action, schema) {
+                  return <></>;
+                },
+              },
+              title: {
+                render(dom, entity, index, action, schema) {
+                  return <></>;
+                },
+              },
+              content: {
+                render: (text, row, index, action) => {
+                  return (
+                    <DiscussionItem
+                      data={row}
+                      onSelect={(
+                        e: React.MouseEvent<HTMLSpanElement, MouseEvent>,
+                        data: IComment
+                      ) => {
+                        if (typeof onSelect !== "undefined") {
+                          onSelect(e, data);
+                        }
+                      }}
+                      onDelete={() => {
                         ref.current?.reload();
-                      }
-                    });
-                  }}
-                />
-              );
-            },
-          },
-        }}
-        request={async (params = {}, sorter, filter) => {
-          let url: string = "/v2/discussion?";
-          if (typeof topicId !== "undefined") {
-            url += `view=question-by-topic&id=${topicId}`;
-          } else if (typeof resId !== "undefined") {
-            url += `view=question&id=${resId}`;
-          } else {
-            return {
-              total: 0,
-              succcess: false,
-            };
-          }
-          const offset =
-            ((params.current ? params.current : 1) - 1) *
-            (params.pageSize ? params.pageSize : 20);
-          url += `&limit=${params.pageSize}&offset=${offset}`;
-          url += params.keyword ? "&search=" + params.keyword : "";
-          url += activeKey ? "&status=" + activeKey : "";
-          console.log("url", url);
-          const res = await get<ICommentListResponse>(url);
-          setCount(res.data.active);
-          const items: IComment[] = res.data.rows.map((item, id) => {
-            return {
-              id: item.id,
-              resId: item.res_id,
-              resType: item.res_type,
-              user: item.editor,
-              title: item.title,
-              parent: item.parent,
-              content: item.content,
-              status: item.status,
-              childrenCount: item.children_count,
-              createdAt: item.created_at,
-              updatedAt: item.updated_at,
-            };
-          });
-          setActiveNumber(res.data.active);
-          setCloseNumber(res.data.close);
-          return {
-            total: res.data.count,
-            succcess: true,
-            data: items,
-          };
-        }}
-        bordered
-        pagination={{
-          showQuickJumper: true,
-          showSizeChanger: true,
-          pageSize: 20,
-        }}
-        search={false}
-        options={{
-          search: false,
-        }}
-        toolbar={{
-          menu: {
-            activeKey,
-            items: [
-              {
-                key: "active",
-                label: (
-                  <span>
-                    active
-                    {renderBadge(activeNumber, activeKey === "active")}
-                  </span>
-                ),
+                      }}
+                      onReply={() => {
+                        if (typeof onReply !== "undefined") {
+                          onReply(row);
+                        }
+                      }}
+                      onClose={(value: boolean) => {
+                        console.log("comment", row);
+                        put<ICommentRequest, ICommentResponse>(
+                          `/v2/discussion/${row.id}`,
+                          {
+                            title: row.title,
+                            content: row.content,
+                            status: value ? "close" : "active",
+                          }
+                        ).then((json) => {
+                          console.log(json);
+                          if (json.ok) {
+                            ref.current?.reload();
+                          }
+                        });
+                      }}
+                    />
+                  );
+                },
               },
-              {
-                key: "close",
-                label: (
-                  <span>
-                    close
-                    {renderBadge(closeNumber, activeKey === "close")}
-                  </span>
-                ),
+            }}
+            request={async (params = {}, sorter, filter) => {
+              let url: string = "/v2/discussion?";
+              if (typeof topicId !== "undefined") {
+                url += `view=question-by-topic&id=${topicId}`;
+              } else if (typeof resId !== "undefined") {
+                url += `view=question&id=${resId}`;
+              } else {
+                return {
+                  total: 0,
+                  succcess: false,
+                };
+              }
+              const offset =
+                ((params.current ? params.current : 1) - 1) *
+                (params.pageSize ? params.pageSize : 20);
+              url += `&limit=${params.pageSize}&offset=${offset}`;
+              url += params.keyword ? "&search=" + params.keyword : "";
+              url += activeKey ? "&status=" + activeKey : "";
+              console.log("url", url);
+              const res = await get<ICommentListResponse>(url);
+              setCount(res.data.active);
+              const items: IComment[] = res.data.rows.map((item, id) => {
+                return {
+                  id: item.id,
+                  resId: item.res_id,
+                  resType: item.res_type,
+                  user: item.editor,
+                  title: item.title,
+                  parent: item.parent,
+                  content: item.content,
+                  status: item.status,
+                  childrenCount: item.children_count,
+                  createdAt: item.created_at,
+                  updatedAt: item.updated_at,
+                };
+              });
+              setActiveNumber(res.data.active);
+              setCloseNumber(res.data.close);
+              return {
+                total: res.data.count,
+                succcess: true,
+                data: items,
+              };
+            }}
+            bordered
+            pagination={{
+              showQuickJumper: true,
+              showSizeChanger: true,
+              pageSize: 20,
+            }}
+            search={false}
+            options={{
+              search: false,
+            }}
+            toolbar={{
+              menu: {
+                activeKey,
+                items: [
+                  {
+                    key: "active",
+                    label: (
+                      <span>
+                        active
+                        {renderBadge(activeNumber, activeKey === "active")}
+                      </span>
+                    ),
+                  },
+                  {
+                    key: "close",
+                    label: (
+                      <span>
+                        close
+                        {renderBadge(closeNumber, activeKey === "close")}
+                      </span>
+                    ),
+                  },
+                ],
+                onChange(key) {
+                  console.log("show course", key);
+                  setActiveKey(key);
+                  ref.current?.reload();
+                },
               },
-            ],
-            onChange(key) {
-              console.log("show course", key);
-              setActiveKey(key);
-              ref.current?.reload();
-            },
-          },
-        }}
-      />
+            }}
+          />
+        </Panel>
+      </Collapse>
+
       {resId && resType ? (
         <DiscussionCreate
           contentType="markdown"