Merge pull request #1268 from visuddhinanda/agile

NissayaCard 支持折叠

dashboard/src/components/general/NissayaCard.tsx

@@ -3,9 +3,11 @@ import { Modal, Popover, Skeleton, Typography } from "antd";
 
 import { get } from "../../request";
 import { get as getLang } from "../../locales";
-import { IGuideResponse } from "../api/Guide";
-import Marked from "../general/Marked";
-const { Link } = Typography;
+
+import NissayaCardTable, { INissayaRelation } from "./NissayaCardTable";
+import { ITerm } from "../term/TermEdit";
+
+const { Link, Paragraph, Title } = Typography;
 
 interface INissayaCardModal {
   text?: string;
@@ -41,6 +43,7 @@ export const NissayaCardModal = ({ text, trigger }: INissayaCardModal) => {
     <>
       <span onClick={showModal}>{trigger}</span>
       <Modal
+        width={800}
         title="缅文语尾"
         open={isModalOpen}
         onOk={handleOk}
@@ -53,36 +56,58 @@ export const NissayaCardModal = ({ text, trigger }: INissayaCardModal) => {
   );
 };
 
+interface INissayaCardData {
+  row: INissayaRelation[];
+  ending: ITerm;
+}
+interface INissayaCardResponse {
+  ok: boolean;
+  message: string;
+  data: INissayaCardData;
+}
+
 interface IWidget {
   text?: string;
   cache?: boolean;
 }
 const NissayaCardWidget = ({ text, cache = false }: IWidget) => {
-  const [guide, setGuide] = useState<string>();
-
+  const [cardData, setCardData] = useState<INissayaRelation[]>();
+  const [term, setTerm] = useState<ITerm>();
   useEffect(() => {
     const uiLang = getLang();
     if (cache) {
       const value = sessionStorage.getItem(`nissaya-ending/${uiLang}/${text}`);
       if (value !== null) {
-        setGuide(value);
+        const valueJson: INissayaCardData = JSON.parse(value);
+        setCardData(valueJson.row);
+        setTerm(valueJson.ending);
         return;
       }
     }
 
-    const url = `/v2/nissaya-ending-card?lang=${uiLang}&ending=${text}`;
-    get<IGuideResponse>(url).then((json) => {
+    const url = `/v2/nissaya-card/${text}?lang=${uiLang}&content_type=json`;
+    console.log("url", url);
+    get<INissayaCardResponse>(url).then((json) => {
       if (json.ok) {
-        setGuide(json.data);
+        setCardData(json.data.row);
+        setTerm(json.data.ending);
         if (cache) {
-          sessionStorage.setItem(`nissaya-ending/${uiLang}/${text}`, json.data);
+          sessionStorage.setItem(
+            `nissaya-ending/${uiLang}/${text}`,
+            JSON.stringify(json.data)
+          );
         }
       }
     });
   }, [cache, text]);
 
-  return guide ? (
-    <Marked text={guide} />
+  return cardData ? (
+    <>
+      <Title level={4}>{term?.word}</Title>
+      <Paragraph>{term?.meaning}</Paragraph>
+      <Paragraph>{term?.note}</Paragraph>
+      <NissayaCardTable data={cardData} />
+    </>
   ) : (
     <Skeleton title={{ width: 200 }} paragraph={{ rows: 4 }} active />
   );

dashboard/src/components/general/NissayaCardTable.tsx

@@ -0,0 +1,176 @@
+import { Button, Table, Tag } from "antd";
+import { useEffect, useState } from "react";
+
+interface ICaseItem {
+  label: string;
+  link: string;
+}
+interface DataType {
+  key: React.ReactNode;
+  case?: ICaseItem[];
+  spell?: string;
+  relation: string;
+  localRelation?: string;
+  to?: ICaseItem[];
+  category?: { name: string; note: string; meaning: string };
+  translation?: string;
+  children?: DataType[];
+}
+export interface INissayaRelation {
+  case?: ICaseItem[];
+  spell?: string;
+  to?: ICaseItem[];
+  category?: { name: string; note: string; meaning: string };
+  local_ending: string;
+  relation: string;
+  local_relation?: string;
+  relation_link: string;
+}
+interface IWidget {
+  data?: INissayaRelation[];
+}
+const NissayaCardTableWidget = ({ data }: IWidget) => {
+  const [tableData, setTableData] = useState<DataType[]>();
+  useEffect(() => {
+    if (typeof data === "undefined") {
+      setTableData(undefined);
+      return;
+    }
+    let category: string[] = [];
+    let newData: DataType[] = [];
+    let id = 0;
+    for (const item of data) {
+      id++;
+      if (item.category && item.category.name) {
+        if (category.includes(item.category.name)) {
+          continue;
+        } else {
+          category.push(item.category.name);
+          //处理children
+          const children = data
+            .filter((value) => value.category?.name === item.category?.name)
+            .map((item, index) => {
+              return {
+                key: `c_${index}`,
+                case: item.case,
+                spell: item.spell,
+                relation: item.relation,
+                to: item.to,
+                category: item.category,
+                translation: item.local_ending,
+              };
+            });
+          newData.push({
+            key: id,
+            case: item.case,
+            spell: item.spell,
+            relation: item.relation,
+            to: item.to,
+            category: item.category,
+            translation: item.local_ending,
+            children: children,
+          });
+        }
+      } else {
+        newData.push({
+          key: id,
+          case: item.case,
+          spell: item.spell,
+          relation: item.relation,
+          to: item.to,
+          category: item.category,
+          translation: item.local_ending,
+        });
+      }
+    }
+
+    setTableData(newData);
+  }, [data]);
+  return (
+    <Table
+      columns={[
+        {
+          title: "本词",
+          dataIndex: "from",
+          key: "from",
+          render: (value, record, index) => {
+            return (
+              <>
+                {record.case?.map((item, id) => {
+                  return (
+                    <Button
+                      key={id}
+                      type="link"
+                      size="small"
+                      onClick={() => window.open(item.link, "_blank")}
+                    >
+                      <Tag>{item.label}</Tag>
+                    </Button>
+                  );
+                })}
+              </>
+            );
+          },
+        },
+        {
+          title: "关系",
+          dataIndex: "relation",
+          key: "relation",
+          width: "12%",
+          render: (value, record, index) => {
+            return <>{record.relation}</>;
+          },
+        },
+        {
+          title: "目标词特征",
+          dataIndex: "to",
+          key: "to",
+          render: (value, record, index) => {
+            if (record.children) {
+              return <>{record.category?.meaning}</>;
+            } else {
+              return (
+                <>
+                  {record.to?.map((item, id) => {
+                    return (
+                      <Button
+                        key={id}
+                        type="link"
+                        size="small"
+                        onClick={() => window.open(item.link, "_blank")}
+                      >
+                        <Tag key={id}>{item.label}</Tag>
+                      </Button>
+                    );
+                  })}
+                </>
+              );
+            }
+          },
+        },
+        {
+          title: "含义",
+          dataIndex: "address",
+          width: "30%",
+          key: "address",
+          render: (value, record, index) => {
+            if (record.children) {
+              return <>{record.category?.note}</>;
+            } else {
+              return undefined;
+            }
+          },
+        },
+        {
+          title: "翻译建议",
+          dataIndex: "translation",
+          width: "20%",
+          key: "translation",
+        },
+      ]}
+      dataSource={tableData}
+    />
+  );
+};
+
+export default NissayaCardTableWidget;