add StatisticCard

dashboard/src/components/dict/UserDictList.tsx

@@ -53,8 +53,13 @@ interface IParams {
 interface IWidget {
   studioName?: string;
   view?: "studio" | "all";
+  dictName?: string;
 }
-const UserDictListWidget = ({ studioName, view = "studio" }: IWidget) => {
+const UserDictListWidget = ({
+  studioName,
+  view = "studio",
+  dictName,
+}: IWidget) => {
   const intl = useIntl();
   const [isEditOpen, setIsEditOpen] = useState(false);
   const [isCreateOpen, setIsCreateOpen] = useState(false);
@@ -344,6 +349,11 @@ const UserDictListWidget = ({ studioName, view = "studio" }: IWidget) => {
           url += params.word ? `&word=${params.word}` : "";
           url += params.parent ? `&parent=${params.parent}` : "";
           url += params.dict ? `&dict=${params.dict}` : "";
+          url += dictName
+            ? dictName !== "all"
+              ? `&dict=${dictName}`
+              : ""
+            : "";
 
           url += getSorterUrl(sorter);
 

dashboard/src/pages/admin/dictionary/list.tsx

@@ -1,7 +1,65 @@
+import { ProCard, StatisticCard } from "@ant-design/pro-components";
+import { useEffect, useState } from "react";
 import UserDictList from "../../../components/dict/UserDictList";
+import { get } from "../../../request";
 
-const Widget = () => {
-  return <UserDictList view="all" />;
+const { Statistic } = StatisticCard;
+
+interface IDict {
+  key: string;
+  title: string;
+  count: number;
+  vocabulary: number;
+}
+
+interface IDictStatisticResponse {
+  ok: boolean;
+  message: string;
+  data: IDict[];
+}
+
+const DictListWidget = () => {
+  const [data, setData] = useState<IDict[]>();
+
+  useEffect(() => {
+    get<IDictStatisticResponse>("/v2/dict-statistic").then((json) => {
+      if (json.ok) {
+        setData(json.data);
+      }
+    });
+  }, []);
+  return (
+    <ProCard
+      tabs={{
+        onChange: (key) => {
+          console.log("key", key);
+        },
+        items: data?.map((item, id) => {
+          return {
+            key: item.key,
+            style: { width: "100%" },
+            label: (
+              <StatisticCard
+                colSpan={6}
+                title={item.title}
+                statistic={{
+                  value: item.count,
+                  description: (
+                    <Statistic title="单词表" value={item.vocabulary} />
+                  ),
+                }}
+                style={{
+                  borderInlineEnd:
+                    id < data.length - 1 ? "1px solid #f0f0f0" : undefined,
+                }}
+              />
+            ),
+            children: <UserDictList view={"all"} dictName={item.key} />,
+          };
+        }),
+      }}
+    />
+  );
 };
 
-export default Widget;
+export default DictListWidget;