create

dashboard/src/components/template/SentEdit/SentCart.tsx

@@ -0,0 +1,79 @@
+import { Badge, Button, List, Popover, Tooltip, Typography } from "antd";
+import { useEffect, useState } from "react";
+import { ShoppingCartOutlined, DeleteOutlined } from "@ant-design/icons";
+
+const { Text } = Typography;
+
+const SentCartWidget = () => {
+  const [count, setCount] = useState<number>();
+  const [sentences, setSentences] = useState<string[]>();
+
+  const query = () => {
+    const cartText = localStorage.getItem("cart/text");
+    if (cartText) {
+      const sent: string[] = JSON.parse(cartText);
+      setCount(sent.length);
+      setSentences(sent);
+    } else {
+      setCount(0);
+    }
+  };
+
+  useEffect(() => {
+    let timer = setInterval(query, 1000 * 2);
+    return () => {
+      clearInterval(timer);
+    };
+  }, []);
+
+  return (
+    <>
+      <Popover
+        placement="bottomRight"
+        arrowPointAtCenter
+        destroyTooltipOnHide
+        getTooltipContainer={(node: HTMLElement) =>
+          document.getElementsByClassName("toolbar_center")[0] as HTMLElement
+        }
+        content={
+          <div>
+            <div style={{ display: "flex", justifyContent: "space-between" }}>
+              <div></div>
+              <div>
+                <Text copyable={{ text: sentences?.join("\n") }} />
+                <Tooltip title="清空列表保留剪贴板数据">
+                  <Button
+                    type="link"
+                    danger
+                    icon={<DeleteOutlined />}
+                    onClick={() => {
+                      localStorage.removeItem("cart/text");
+                      setSentences(undefined);
+                      setCount(0);
+                    }}
+                  />
+                </Tooltip>
+              </div>
+            </div>
+            <div style={{ width: 350, height: 300, overflowY: "auto" }}>
+              <List
+                size="small"
+                dataSource={sentences}
+                renderItem={(item) => <List.Item>{item}</List.Item>}
+              />
+            </div>
+          </div>
+        }
+        trigger="click"
+      >
+        <Badge style={{ cursor: "pointer" }} count={count} size="small">
+          <span style={{ color: "white", cursor: "pointer" }}>
+            <ShoppingCartOutlined />
+          </span>
+        </Badge>
+      </Popover>
+    </>
+  );
+};
+
+export default SentCartWidget;

dashboard/src/components/template/SentEdit/SentTabCopy.tsx

@@ -0,0 +1,72 @@
+import { Dropdown, Tooltip } from "antd";
+import {
+  CopyOutlined,
+  ShoppingCartOutlined,
+  CheckOutlined,
+} from "@ant-design/icons";
+import { useState } from "react";
+
+interface IWidget {
+  text?: string;
+}
+const SentTabCopyWidget = ({ text }: IWidget) => {
+  const [mode, setMode] = useState("copy");
+  const [success, setSuccess] = useState(false);
+  const copy = (mode: string) => {
+    if (text) {
+      if (mode === "copy") {
+        navigator.clipboard.writeText(text).then(() => {
+          setSuccess(true);
+          setTimeout(() => setSuccess(false), 3000);
+        });
+      } else {
+        const oldText = localStorage.getItem("cart/text");
+        let cartText: string[] = [];
+        if (oldText) {
+          cartText = JSON.parse(oldText);
+        }
+        cartText.push(text);
+        localStorage.setItem("cart/text", JSON.stringify(cartText));
+        setSuccess(true);
+        setTimeout(() => setSuccess(false), 3000);
+      }
+    }
+  };
+  return (
+    <Dropdown.Button
+      size="small"
+      type="link"
+      menu={{
+        items: [
+          {
+            label: "copy",
+            key: "copy",
+            icon: <CopyOutlined />,
+          },
+          {
+            label: "add to cart",
+            key: "cart",
+            icon: <ShoppingCartOutlined />,
+          },
+        ],
+        onClick: (e) => {
+          setMode(e.key);
+          copy(e.key);
+        },
+      }}
+      onClick={() => copy(mode)}
+    >
+      <Tooltip title={(success ? "已经" : "") + `${mode}`}>
+        {success ? (
+          <CheckOutlined />
+        ) : mode === "copy" ? (
+          <CopyOutlined />
+        ) : (
+          <ShoppingCartOutlined />
+        )}
+      </Tooltip>
+    </Dropdown.Button>
+  );
+};
+
+export default SentTabCopyWidget;