在没有数据的时候显示placeholder

dashboard/src/components/template/Wbw/WbwCase.tsx

@@ -1,51 +1,99 @@
 import { useIntl } from "react-intl";
 import { Typography, Button } from "antd";
 import { SwapOutlined } from "@ant-design/icons";
+import type { MenuProps } from "antd";
+import { Dropdown } from "antd";
 
-import { IWbw } from "./WbwWord";
+import { IWbw, TWbwDisplayMode } from "./WbwWord";
+import { PaliReal } from "../../../utils";
 import "./wbw.css";
 
 const { Text } = Typography;
 
+const items: MenuProps["items"] = [
+  {
+    key: "n+m+sg+nom",
+    label: "n+m+sg+nom",
+  },
+  {
+    key: "un",
+    label: "un",
+  },
+];
+
 interface IWidget {
   data: IWbw;
+  display?: TWbwDisplayMode;
   onSplit?: Function;
+  onChange?: Function;
 }
-const Widget = ({ data, onSplit }: IWidget) => {
+const Widget = ({ data, display, onSplit, onChange }: IWidget) => {
   const intl = useIntl();
+  const onClick: MenuProps["onClick"] = (e) => {
+    console.log("click ", e);
+    if (typeof onChange !== "undefined") {
+      onChange(e.key);
+    }
+  };
+
   const showSplit: boolean = data.factors?.value.includes("+") ? true : false;
-  return (
-    <div className="wbw_word_item" style={{ display: "flex" }}>
-      <Text type="secondary">
-        <div>
-          {data.case?.value.map((item, id) => {
-            return (
-              <span key={id} className="case">
-                {intl.formatMessage({
-                  id: `dict.fields.type.${item}.short.label`,
-                })}
-              </span>
-            );
-          })}
-          {showSplit ? (
-            <Button
-              className="wbw_split"
-              size="small"
-              shape="circle"
-              icon={<SwapOutlined />}
-              onClick={() => {
-                if (typeof onSplit !== "undefined") {
-                  onSplit(true);
-                }
-              }}
-            />
-          ) : (
-            <></>
-          )}
-        </div>
-      </Text>
-    </div>
-  );
+  let caseElement: JSX.Element | JSX.Element[] | undefined;
+  if (
+    display === "block" &&
+    (typeof data.case === "undefined" || data.case.value.length === 0)
+  ) {
+    //空白的语法信息在逐词解析模式显示占位字符串
+    caseElement = (
+      <span>{intl.formatMessage({ id: "dict.fields.case.label" })}</span>
+    );
+  } else {
+    caseElement = data.case?.value.map((item, id) => {
+      if (item !== "") {
+        return (
+          <span key={id} className="case">
+            {intl.formatMessage({
+              id: `dict.fields.type.${item}.short.label`,
+            })}
+          </span>
+        );
+      } else {
+        return <></>;
+      }
+    });
+  }
+
+  if (typeof data.real !== "undefined" && PaliReal(data.real.value) !== "") {
+    return (
+      <div className="wbw_word_item" style={{ display: "flex" }}>
+        <Text type="secondary">
+          <div>
+            <Dropdown menu={{ items, onClick }} placement="bottomLeft">
+              <span>{caseElement}</span>
+            </Dropdown>
+
+            {showSplit ? (
+              <Button
+                className="wbw_split"
+                size="small"
+                shape="circle"
+                icon={<SwapOutlined />}
+                onClick={() => {
+                  if (typeof onSplit !== "undefined") {
+                    onSplit(true);
+                  }
+                }}
+              />
+            ) : (
+              <></>
+            )}
+          </div>
+        </Text>
+      </div>
+    );
+  } else {
+    //标点符号
+    return <></>;
+  }
 };
 
 export default Widget;

dashboard/src/components/template/Wbw/WbwFactorMeaning.tsx

@@ -1,17 +1,72 @@
+import { useIntl } from "react-intl";
+import type { MenuProps } from "antd";
+import { Dropdown } from "antd";
 import { Typography } from "antd";
 
-import { IWbw } from "./WbwWord";
+import { IWbw, TWbwDisplayMode } from "./WbwWord";
+import { PaliReal } from "../../../utils";
 const { Text } = Typography;
 
+const items: MenuProps["items"] = [
+  {
+    key: "factor1+意思",
+    label: "factor1+意思",
+  },
+  {
+    key: "factor2+意思",
+    label: "factor2+意思",
+  },
+  {
+    key: "factor3+意思",
+    label: "factor3+意思",
+  },
+];
+
 interface IWidget {
   data: IWbw;
+  display?: TWbwDisplayMode;
+  onChange?: Function;
 }
-const Widget = ({ data }: IWidget) => {
-  return (
-    <div>
-      <Text type="secondary">{data.factorMeaning?.value}</Text>
-    </div>
-  );
+const Widget = ({ data, display, onChange }: IWidget) => {
+  const intl = useIntl();
+
+  const onClick: MenuProps["onClick"] = (e) => {
+    console.log("click ", e);
+    if (typeof onChange !== "undefined") {
+      onChange(e.key);
+    }
+  };
+
+  let factorMeaning = <></>;
+  if (
+    display === "block" &&
+    (typeof data.factorMeaning === "undefined" ||
+      data.factorMeaning.value === "")
+  ) {
+    //空白的意思在逐词解析模式显示占位字符串
+    factorMeaning = (
+      <Text type="secondary">
+        {intl.formatMessage({ id: "dict.fields.factormeaning.label" })}
+      </Text>
+    );
+  } else {
+    factorMeaning = <span>{data.factorMeaning?.value}</span>;
+  }
+
+  if (typeof data.real !== "undefined" && PaliReal(data.real.value) !== "") {
+    return (
+      <div>
+        <Text type="secondary">
+          <Dropdown menu={{ items, onClick }} placement="bottomLeft">
+            {factorMeaning}
+          </Dropdown>
+        </Text>
+      </div>
+    );
+  } else {
+    //标点符号
+    return <></>;
+  }
 };
 
 export default Widget;

dashboard/src/components/template/Wbw/WbwFactors.tsx

@@ -1,38 +1,71 @@
+import { useIntl } from "react-intl";
 import type { MenuProps } from "antd";
 import { Dropdown } from "antd";
 import { Typography } from "antd";
 
-import { IWbw } from "./WbwWord";
+import { IWbw, TWbwDisplayMode } from "./WbwWord";
+import { PaliReal } from "../../../utils";
 const { Text } = Typography;
 
 const items: MenuProps["items"] = [
   {
-    key: "1",
-    label: "factors",
+    key: "factor1+word",
+    label: "factor1+word",
   },
   {
-    key: "2",
-    label: "factors",
+    key: "factor2+word",
+    label: "factor2+word",
   },
   {
-    key: "3",
-    label: "factors",
+    key: "factor3+word",
+    label: "factor3+word",
   },
 ];
-
 interface IWidget {
   data: IWbw;
+  display?: TWbwDisplayMode;
+  onChange?: Function;
 }
-const Widget = ({ data }: IWidget) => {
-  return (
-    <div>
+
+const Widget = ({ data, display, onChange }: IWidget) => {
+  const intl = useIntl();
+
+  const onClick: MenuProps["onClick"] = (e) => {
+    console.log("click ", e);
+    if (typeof onChange !== "undefined") {
+      onChange(e.key);
+    }
+  };
+
+  let factors = <></>;
+  if (
+    display === "block" &&
+    (typeof data.factors === "undefined" || data.factors.value === "")
+  ) {
+    //空白的意思在逐词解析模式显示占位字符串
+    factors = (
       <Text type="secondary">
-        <Dropdown menu={{ items }} placement="bottomLeft">
-          <span>{data.factors ? data.factors?.value : "拆分"}</span>
-        </Dropdown>
+        {intl.formatMessage({ id: "dict.fields.factors.label" })}
       </Text>
-    </div>
-  );
+    );
+  } else {
+    factors = <span>{data.factors?.value}</span>;
+  }
+
+  if (typeof data.real !== "undefined" && PaliReal(data.real.value) !== "") {
+    return (
+      <div>
+        <Text type="secondary">
+          <Dropdown menu={{ items, onClick }} placement="bottomLeft">
+            {factors}
+          </Dropdown>
+        </Text>
+      </div>
+    );
+  } else {
+    //标点符号
+    return <></>;
+  }
 };
 
 export default Widget;

dashboard/src/components/template/Wbw/WbwMeaning.tsx

@@ -1,34 +1,64 @@
-import { Popover } from "antd";
-import { IWbw } from "./WbwWord";
+import { useIntl } from "react-intl";
+import { Popover, Typography } from "antd";
+
+import { PaliReal } from "../../../utils";
+import { IWbw, TWbwDisplayMode } from "./WbwWord";
 import WbwMeaningSelect from "./WbwMeaningSelect";
 
+const { Text } = Typography;
+
 interface IWidget {
   data: IWbw;
+  display?: TWbwDisplayMode;
   onChange?: Function;
 }
-const Widget = ({ data, onChange }: IWidget) => {
-  return (
-    <div>
-      <Popover
-        content={
-          <div style={{ width: 500 }}>
-            <WbwMeaningSelect
-              data={data}
-              onSelect={(e: string) => {
-                if (typeof onChange !== "undefined") {
-                  onChange(e);
-                }
-              }}
-            />
-          </div>
-        }
-        placement="bottomLeft"
-        trigger="hover"
-      >
-        {data.meaning?.value}
-      </Popover>
-    </div>
-  );
+const Widget = ({ data, display = "block", onChange }: IWidget) => {
+  const intl = useIntl();
+  console.log("meaning", data.meaning?.value);
+  let meaning = <></>;
+  if (
+    display === "block" &&
+    (typeof data.meaning === "undefined" ||
+      data.meaning.value.length === 0 ||
+      data.meaning.value[0] === "")
+  ) {
+    //空白的意思在逐词解析模式显示占位字符串
+    meaning = (
+      <Text type="secondary">
+        {intl.formatMessage({ id: "dict.fields.meaning.label" })}
+      </Text>
+    );
+  } else {
+    meaning = <span>{data.meaning?.value}</span>;
+  }
+  if (typeof data.real !== "undefined" && PaliReal(data.real.value) !== "") {
+    //非标点符号
+    return (
+      <div>
+        <Popover
+          content={
+            <div style={{ width: 500 }}>
+              <WbwMeaningSelect
+                data={data}
+                onSelect={(e: string) => {
+                  if (typeof onChange !== "undefined") {
+                    onChange(e);
+                  }
+                }}
+              />
+            </div>
+          }
+          placement="bottomLeft"
+          trigger="hover"
+        >
+          {meaning}
+        </Popover>
+      </div>
+    );
+  } else {
+    //标点符号
+    return <></>;
+  }
 };
 
 export default Widget;

dashboard/src/components/template/Wbw/wbw.css

@@ -3,6 +3,13 @@
   padding-right: 0;
   max-width: 60vw;
 }
+.wbw_detail_basic .ant-form-item {
+  margin: 0 0 4px;
+}
+.wbw_detail_basic .ant-collapse > .ant-collapse-item > .ant-collapse-header {
+  padding-top: 2px;
+  padding-bottom: 2px;
+}
 .wbw_ctl {
   display: none;
 }
@@ -16,9 +23,15 @@
 .wbw_word:hover .wbw_split {
   visibility: visible;
 }
+.pali:hover {
+  cursor: pointer;
+}
+.inline .pali:hover {
+  text-decoration-line: underline;
+  text-underline-offset: 5px;
+}
 .block .pali {
   font-weight: 500;
-  font-size: 110%;
   padding: 0px 2px;
   margin: 0px;
   line-height: 1.5em;