add refresh loading

dashboard/src/components/article/ToolButtonDiscussion.tsx

@@ -1,6 +1,8 @@
+import { useIntl } from "react-intl";
 import { useEffect, useState } from "react";
 import { Button, Tag, Tree } from "antd";
 import { CommentOutlined } from "@ant-design/icons";
+import { ReloadOutlined } from "@ant-design/icons";
 
 import ToolButton from "./ToolButton";
 import { post } from "../../request";
@@ -53,6 +55,8 @@ interface IWidget {
 }
 const ToolButtonDiscussionWidget = ({ type, articleId }: IWidget) => {
   const [treeData, setTreeData] = useState<DataNode[]>([]);
+  const [loading, setLoading] = useState(false);
+  const intl = useIntl();
 
   const refresh = () => {
     const pr = document.querySelectorAll("div.tran_sent");
@@ -70,65 +74,82 @@ const ToolButtonDiscussionWidget = ({ type, articleId }: IWidget) => {
       });
     }
     console.log("request pr tree", prRequestData);
+    setLoading(true);
     post<IPrTreeRequest, IPrTreeResponse>("/v2/sent-discussion-tree", {
       data: prRequestData,
-    }).then((json) => {
-      console.log("discussion tree", json);
-      if (json.ok) {
-        const newTree: DataNode[] = json.data.rows.map((item) => {
-          const children: DataNode[] = item.pr.map((pr) => {
+    })
+      .then((json) => {
+        console.log("discussion tree", json);
+        if (json.ok) {
+          const newTree: DataNode[] = json.data.rows.map((item) => {
+            const children: DataNode[] = item.pr.map((pr) => {
+              return {
+                title: pr.title,
+                key: pr.title,
+                childrenCount: pr.children_count,
+              };
+            });
             return {
-              title: pr.title,
-              key: pr.title,
-              childrenCount: pr.children_count,
+              title: item.sentence.content,
+              key: `${item.sentence.book}_${item.sentence.paragraph}_${item.sentence.word_start}_${item.sentence.word_end}_${item.sentence.channel_id}`,
+              children: children,
             };
           });
-          return {
-            title: item.sentence.content,
-            key: `${item.sentence.book}_${item.sentence.paragraph}_${item.sentence.word_start}_${item.sentence.word_end}_${item.sentence.channel_id}`,
-            children: children,
-          };
-        });
-        setTreeData(newTree);
-      }
-    });
+          setTreeData(newTree);
+        }
+      })
+      .finally(() => setLoading(false));
   };
 
   useEffect(() => {
-    refresh();
+    //refresh();
   }, []);
+
   return (
     <ToolButton
       title="讨论"
       icon={<CommentOutlined />}
       content={
         <>
-          <Button
-            onClick={() => {
-              refresh();
-            }}
-          >
-            refresh
-          </Button>
-          <Tree
-            treeData={treeData}
-            titleRender={(node) => {
-              const ele = document.getElementById(node.key);
-              const count = node.childrenCount
-                ? node.childrenCount
-                : node.children?.length;
-              return (
-                <div
-                  onClick={() => {
-                    ele?.scrollIntoView();
-                  }}
-                >
-                  {node.title}
-                  <Tag style={{ borderRadius: 5 }}>{count}</Tag>
-                </div>
-              );
-            }}
-          />
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <span></span>
+            <Button
+              type="text"
+              icon={<ReloadOutlined />}
+              loading={loading}
+              onClick={() => {
+                refresh();
+              }}
+            >
+              {intl.formatMessage({
+                id: "buttons.refresh",
+              })}
+            </Button>
+          </div>
+
+          {treeData.length === 0 ? (
+            <>没有数据</>
+          ) : (
+            <Tree
+              treeData={treeData}
+              titleRender={(node) => {
+                const ele = document.getElementById(node.key);
+                const count = node.childrenCount
+                  ? node.childrenCount
+                  : node.children?.length;
+                return (
+                  <div
+                    onClick={() => {
+                      ele?.scrollIntoView();
+                    }}
+                  >
+                    {node.title}
+                    <Tag style={{ borderRadius: 5 }}>{count}</Tag>
+                  </div>
+                );
+              }}
+            />
+          )}
         </>
       }
     />

dashboard/src/components/article/ToolButtonPr.tsx

@@ -1,5 +1,7 @@
+import { useIntl } from "react-intl";
 import { useEffect, useState } from "react";
 import { Button, Tag, Tree } from "antd";
+import { ReloadOutlined } from "@ant-design/icons";
 
 import { HandOutlinedIcon } from "../../assets/icon";
 import ToolButton from "./ToolButton";
@@ -51,6 +53,8 @@ interface IWidget {
 }
 const ToolButtonPrWidget = ({ type, articleId }: IWidget) => {
   const [treeData, setTreeData] = useState<DataNode[]>([]);
+  const [loading, setLoading] = useState(false);
+  const intl = useIntl();
 
   const refresh = () => {
     const pr = document.querySelectorAll("div.tran_sent");
@@ -68,28 +72,31 @@ const ToolButtonPrWidget = ({ type, articleId }: IWidget) => {
       });
     }
     console.log("request pr tree", prRequestData);
+    setLoading(true);
     post<IPrTreeRequest, IPrTreeResponse>("/v2/sent-pr-tree", {
       data: prRequestData,
-    }).then((json) => {
-      console.log("pr tree", json);
-      if (json.ok) {
-        const newTree: DataNode[] = json.data.rows.map((item) => {
-          const children = item.pr.map((pr) => {
-            return { title: pr.content, key: pr.content };
+    })
+      .then((json) => {
+        console.log("pr tree", json);
+        if (json.ok) {
+          const newTree: DataNode[] = json.data.rows.map((item) => {
+            const children = item.pr.map((pr) => {
+              return { title: pr.content, key: pr.content };
+            });
+            return {
+              title: item.sentence.content,
+              key: `${item.sentence.book}_${item.sentence.paragraph}_${item.sentence.word_start}_${item.sentence.word_end}_${item.sentence.channel_id}`,
+              children: children,
+            };
           });
-          return {
-            title: item.sentence.content,
-            key: `${item.sentence.book}_${item.sentence.paragraph}_${item.sentence.word_start}_${item.sentence.word_end}_${item.sentence.channel_id}`,
-            children: children,
-          };
-        });
-        setTreeData(newTree);
-      }
-    });
+          setTreeData(newTree);
+        }
+      })
+      .finally(() => setLoading(false));
   };
 
   useEffect(() => {
-    refresh();
+    //refresh();
   }, []);
   return (
     <ToolButton
@@ -97,13 +104,21 @@ const ToolButtonPrWidget = ({ type, articleId }: IWidget) => {
       icon={<HandOutlinedIcon />}
       content={
         <>
-          <Button
-            onClick={() => {
-              refresh();
-            }}
-          >
-            refresh
-          </Button>
+          <div style={{ display: "flex", justifyContent: "space-between" }}>
+            <span></span>
+            <Button
+              type="text"
+              icon={<ReloadOutlined />}
+              loading={loading}
+              onClick={() => {
+                refresh();
+              }}
+            >
+              {intl.formatMessage({
+                id: "buttons.refresh",
+              })}
+            </Button>
+          </div>
           <Tree
             treeData={treeData}
             titleRender={(node) => {