Просмотр исходного кода

翻译模式,点词头按钮打开逐词解析窗口

visuddhinanda 2 лет назад
Родитель
Сommit
7969b2e798

+ 25 - 17
dashboard/src/components/template/Wbw/WbwPali.tsx

@@ -1,10 +1,11 @@
 import { useEffect, useState } from "react";
-import { Button, Popover, Space, Typography } from "antd";
+import { Button, Popover, Space, Tag, Typography } from "antd";
 import {
   TagTwoTone,
   InfoCircleOutlined,
   CommentOutlined,
   ApartmentOutlined,
+  EditOutlined,
 } from "@ant-design/icons";
 
 import "./wbw.css";
@@ -119,14 +120,12 @@ const WbwPaliWidget = ({ data, mode, display, onSave }: IWidget) => {
   ]);
 
   const handleClickChange = (open: boolean) => {
-    if (mode === "wbw") {
-      if (open) {
-        setPaliColor("lightblue");
-      } else {
-        setPaliColor("unset");
-      }
-      setPopOpen(open);
+    if (open) {
+      setPaliColor("lightblue");
+    } else {
+      setPaliColor("unset");
     }
+    setPopOpen(open);
   };
 
   const wbwDetail = (
@@ -256,15 +255,24 @@ const WbwPaliWidget = ({ data, mode, display, onSave }: IWidget) => {
     //非标点符号
     return (
       <div className="pali_shell">
-        <Popover
-          content={wbwDetail}
-          placement="bottom"
-          trigger="click"
-          open={popOpen}
-          onOpenChange={handleClickChange}
-        >
-          {paliWord}
-        </Popover>
+        <span className="pali_shell_spell">
+          {mode === "edit" ? paliWord : ""}
+          <Popover
+            content={wbwDetail}
+            placement="bottom"
+            trigger="click"
+            open={popOpen}
+            onOpenChange={handleClickChange}
+          >
+            {mode === "wbw" ? (
+              paliWord
+            ) : (
+              <span className="edit_icon">
+                <EditOutlined style={{ cursor: "pointer" }} />
+              </span>
+            )}
+          </Popover>
+        </span>
         <Space>
           {videoIcon}
           {noteIcon}

+ 9 - 0
dashboard/src/components/template/Wbw/wbw.css

@@ -91,3 +91,12 @@
   margin: 0 0.3em 0 1px;
   padding: 0px 2px;
 }
+.edit_icon {
+  display: none;
+  position: absolute;
+  border: 1px solid gray;
+  background-color: wheat;
+}
+.pali_shell:hover .edit_icon {
+  display: inline-block;
+}