Browse Source

:sparkles: Quote component

visuddhinanda 3 years ago
parent
commit
a797baa384

+ 19 - 16
dashboard/src/components/template/MdTpl.tsx

@@ -1,28 +1,31 @@
 import Note from "./Note";
+import Quote from "./Quote";
 import SentEdit from "./SentEdit";
 import SentRead from "./SentRead";
 import Term from "./Term";
 import Wd from "./Wd";
 
 interface IWidgetMdTpl {
-	tpl?: string;
-	props?: string;
+  tpl?: string;
+  props?: string;
 }
 const Widget = ({ tpl, props }: IWidgetMdTpl) => {
-	switch (tpl) {
-		case "term":
-			return <Term props={props ? props : ""} />;
-		case "note":
-			return <Note props={props ? props : ""} />;
-		case "sentread":
-			return <SentRead props={props ? props : ""} />;
-		case "sentedit":
-			return <SentEdit props={props ? props : ""} />;
-		case "wd":
-			return <Wd props={props ? props : ""} />;
-		default:
-			return <>未定义模版({tpl})</>;
-	}
+  switch (tpl) {
+    case "term":
+      return <Term props={props ? props : ""} />;
+    case "note":
+      return <Note props={props ? props : ""} />;
+    case "sentread":
+      return <SentRead props={props ? props : ""} />;
+    case "sentedit":
+      return <SentEdit props={props ? props : ""} />;
+    case "wd":
+      return <Wd props={props ? props : ""} />;
+    case "quote":
+      return <Quote props={props ? props : ""} />;
+    default:
+      return <>未定义模版({tpl})</>;
+  }
 };
 
 export default Widget;

+ 75 - 0
dashboard/src/components/template/Quote.tsx

@@ -0,0 +1,75 @@
+import { ProCard } from "@ant-design/pro-components";
+import { Button, Popover } from "antd";
+import { SearchOutlined, CopyOutlined } from "@ant-design/icons";
+import { Typography } from "antd";
+
+const { Text, Link } = Typography;
+
+interface IWidgetQuoteCtl {
+  paraId: string;
+  paliPath?: string[];
+  channel?: string;
+  pali?: string;
+  error?: boolean;
+  message?: string;
+}
+const QuoteCtl = ({
+  paraId,
+  paliPath,
+  channel,
+  pali,
+  error,
+  message,
+}: IWidgetQuoteCtl) => {
+  const show = pali ? pali : paraId;
+  let textShow = <></>;
+
+  if (typeof error !== "undefined") {
+    textShow = <Text type="danger">{show}</Text>;
+  } else {
+    textShow = <Link>{show}</Link>;
+  }
+
+  const userCard = (
+    <>
+      <ProCard
+        style={{ maxWidth: 500, minWidth: 300 }}
+        actions={[
+          <Button type="link" size="small" icon={<SearchOutlined />}>
+            分栏打开
+          </Button>,
+          <Button type="link" size="small" icon={<SearchOutlined />}>
+            新窗口打开
+          </Button>,
+          <Button type="link" size="small" icon={<CopyOutlined />}>
+            复制引用
+          </Button>,
+        ]}
+      >
+        <div>{message ? message : ""}</div>
+      </ProCard>
+    </>
+  );
+  return (
+    <>
+      <Popover content={userCard} placement="bottom">
+        {textShow}
+      </Popover>
+    </>
+  );
+};
+
+interface IWidget {
+  props: string;
+}
+const Widget = ({ props }: IWidget) => {
+  const prop = JSON.parse(atob(props)) as IWidgetQuoteCtl;
+  console.log(prop);
+  return (
+    <>
+      <QuoteCtl {...prop} />
+    </>
+  );
+};
+
+export default Widget;