添加术语修改功能

dashboard/src/components/term/TermItem.tsx

@@ -5,6 +5,8 @@ import { ITermDataResponse } from "../api/Term";
 import MdView from "../template/MdView";
 import UserName from "../auth/UserName";
 import TimeShow from "../general/TimeShow";
+import TermModal from "./TermModal";
+import { useState } from "react";
 
 const { Text } = Typography;
 
@@ -12,59 +14,72 @@ interface IWidget {
   data?: ITermDataResponse;
 }
 const TermItemWidget = ({ data }: IWidget) => {
+  const [openTermModal, setOpenTermModal] = useState(false);
   return (
-    <Card
-      title={
-        <Space direction="vertical" size={3}>
-          <Space>
-            <Text strong>{data?.meaning}</Text>
-            <Text type="secondary">{data?.other_meaning}</Text>
+    <>
+      <Card
+        title={
+          <Space direction="vertical" size={3}>
+            <Space>
+              <Text strong>{data?.meaning}</Text>
+              <Text type="secondary">{data?.other_meaning}</Text>
+            </Space>
+            <Space style={{ fontSize: "80%" }}>
+              <Text type="secondary">
+                <UserName {...data?.editor} />
+              </Text>
+              <Text type="secondary">update at</Text>
+              <TimeShow time={data?.updated_at} />
+            </Space>
           </Space>
-          <Space style={{ fontSize: "80%" }}>
-            <Text type="secondary">
-              <UserName {...data?.editor} />
-            </Text>
-            <Text type="secondary">update at</Text>
-            <TimeShow time={data?.updated_at} />
-          </Space>
-        </Space>
-      }
-      extra={
-        <Dropdown
-          key={1}
-          trigger={["click"]}
-          menu={{
-            items: [
-              {
-                key: "edit",
-                label: "edit",
-                icon: <EditOutlined />,
-              },
-              {
-                key: "translate",
-                label: "translate",
-                icon: <EditOutlined />,
-              },
-            ],
-            onClick: (e) => {
-              console.log("click ", e);
-              switch (e.key) {
-                case "edit":
-                  break;
+        }
+        extra={
+          <Dropdown
+            key={1}
+            trigger={["click"]}
+            menu={{
+              items: [
+                {
+                  key: "edit",
+                  label: "edit",
+                  icon: <EditOutlined />,
+                },
+                {
+                  key: "translate",
+                  label: "translate",
+                  icon: <EditOutlined />,
+                },
+              ],
+              onClick: (e) => {
+                console.log("click ", e);
+                switch (e.key) {
+                  case "edit":
+                    setOpenTermModal(true);
+                    break;
 
-                default:
-                  break;
-              }
-            },
-          }}
-          placement="bottomRight"
-        >
-          <Button size="small" shape="circle" icon={<MoreOutlined />}></Button>
-        </Dropdown>
-      }
-    >
-      <MdView html={data?.html} />
-    </Card>
+                  default:
+                    break;
+                }
+              },
+            }}
+            placement="bottomRight"
+          >
+            <Button
+              size="small"
+              shape="circle"
+              icon={<MoreOutlined />}
+            ></Button>
+          </Dropdown>
+        }
+      >
+        <MdView html={data?.html} />
+      </Card>
+      <TermModal
+        id={data?.guid}
+        open={openTermModal}
+        onClose={() => setOpenTermModal(false)}
+      />
+    </>
   );
 };