添加单个删除

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

@@ -1,24 +1,35 @@
 import { Badge, Button, List, Popover, Tooltip, Typography } from "antd";
 import { useEffect, useState } from "react";
 import { ShoppingCartOutlined, DeleteOutlined } from "@ant-design/icons";
+import { ISentCart } from "./SentTabCopy";
+import "./style.css";
 
 const { Text } = Typography;
 
 const SentCartWidget = () => {
   const [count, setCount] = useState<number>();
-  const [sentences, setSentences] = useState<string[]>();
+  const [sentences, setSentences] = useState<ISentCart[]>();
 
   const query = () => {
     const cartText = localStorage.getItem("cart/text");
     if (cartText) {
-      const sent: string[] = JSON.parse(cartText);
-      setCount(sent.length);
+      const sent: ISentCart[] = JSON.parse(cartText);
       setSentences(sent);
     } else {
-      setCount(0);
+      setSentences(undefined);
     }
   };
 
+  useEffect(() => {
+    if (sentences) {
+      setCount(sentences.length);
+      localStorage.setItem("cart/text", JSON.stringify(sentences));
+    } else {
+      setCount(0);
+      localStorage.removeItem("cart/text");
+    }
+  }, [sentences]);
+
   useEffect(() => {
     let timer = setInterval(query, 1000 * 2);
     return () => {
@@ -40,26 +51,48 @@ const SentCartWidget = () => {
             <div style={{ display: "flex", justifyContent: "space-between" }}>
               <div></div>
               <div>
-                <Text copyable={{ text: sentences?.join("\n") }} />
+                <Text
+                  disabled={!sentences || sentences.length === 0}
+                  copyable={{
+                    text: sentences?.map((item) => item.id).join("\n"),
+                  }}
+                />
                 <Tooltip title="清空列表保留剪贴板数据">
                   <Button
+                    disabled={!sentences || sentences.length === 0}
                     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" }}>
+            <div style={{ width: 450, height: 300, overflowY: "auto" }}>
               <List
                 size="small"
                 dataSource={sentences}
-                renderItem={(item) => <List.Item>{item}</List.Item>}
+                renderItem={(item, index) => (
+                  <List.Item key={index} className="cart_item">
+                    <List.Item.Meta title={item.text} description={item.id} />
+                    <Button
+                      className="cart_delete"
+                      type="link"
+                      danger
+                      icon={<DeleteOutlined />}
+                      onClick={() => {
+                        if (sentences) {
+                          let newArr = [...sentences];
+                          newArr.splice(index, 1);
+                          console.debug("delete", index, newArr);
+                          setSentences(newArr);
+                        }
+                      }}
+                    />
+                  </List.Item>
+                )}
               />
             </div>
           </div>