feat:日志修改

src/components/DiaryOption.module.css

@@ -1,8 +1,3 @@
-.reverseScrollList {
-    display: flex;
-    flex-direction: column; /* 垂直反转 */
-    /*overflow-y: auto;*/
-}
 /* 容器样式 */
 .container {
     display: flex;
@@ -55,7 +50,7 @@
         display: inline-block;
         padding: 4rpx 20rpx;
         border: solid;
-        border-radius: 20rpx;
+        border-radius: 0.5rem;
         border-color: #1677FF;
         white-space: normal;
         word-break: break-all;

src/components/DiaryOption.tsx

@@ -1,5 +1,5 @@
-import React, {useEffect, useState} from 'react';
+import React, {useEffect, useRef, useState} from 'react';
-import {Avatar, Input, List, message} from 'antd';
+import {Avatar, Dropdown, Input, List, MenuProps, message} from 'antd';
 import VirtualList from 'rc-virtual-list';
 import {Button, Drawer} from 'antd';
 import {ListDiary, SelectDiary} from "@/components/type/Diary";
@@ -7,6 +7,8 @@ import TextArea from "antd/es/input/TextArea";
 import style from "@/components/DiaryOption.module.css"
 import dayjs from "dayjs";
 import {addTaskLogAPI} from "@/components/service/Diary";
+import {ListBodyRef} from "antd/es/transfer/ListBody";
+import {ListRef} from "rc-virtual-list/lib/List";
 
 const CONTAINER_HEIGHT = 400;
 const PAGE_SIZE = 20;
@@ -29,12 +31,19 @@ const DiaryOption = (props: SelectDiary) => {
     const [diaryList, setDiaryList] = useState<ListDiary[]>([]);
     const [diaryReduceList, setDiaryReduceList] = useState<ListDiary[]>([])
     const [page, setPage] = useState(1);
-    const noMore = {id: '0', keyId: 'o0',createdDate:new Date(), description: '没有更多了',taskId:props.taskId, enableFlag: 'day-separate'};
+    const noMore = {
+        id: '0',
+        keyId: 'o0',
+        createdDate: new Date(),
+        description: '没有更多了',
+        taskId: props.taskId,
+        enableFlag: 'day-separate'
+    };
     const [noMoreFlag, setNoMoreFlag] = useState(false)
-    const [sendValue,setSendValue] = useState<string>();
+    const [sendValue, setSendValue] = useState<string>();
-    const [sendValueFlag,setSendValueFlag] =useState(false);
+    const [sendValueFlag, setSendValueFlag] = useState(false);
-    const handleSend = ()=>{
+    const handleSend = () => {
-        if(sendValueFlag){
+        if (sendValueFlag) {
             return
         }
         setSendValueFlag(true);
@@ -72,21 +81,31 @@ const DiaryOption = (props: SelectDiary) => {
                 setDiaryList(diaryList.concat(results));
                 setPage(page + 1);
                 showMessage && message.success(`${results.length} more items loaded!`);
+                if (!showMessage) {
+                    if (listRef && listRef.current && typeof listRef.current.scrollTo == 'function') {
+                        listRef.current.scrollTo({top: 9999999 });
+                    }
+                }
             });
     };
 
     useEffect(() => {
         appendData(false);
+        // 视口高度
+        window.innerHeight
     }, []);
 
     useEffect(() => {
-        console.log("处理日志集合",diaryList)
+        console.log("处理日志集合", diaryList)
         const returnResult: ListDiary[] = []
         diaryList.filter(taskLog => {
-            if (currentIndex === 0) { return true }
+            if (currentIndex === 0) {
-            else if (currentIndex === 1 && taskLog.enableFlag === "1") { return true }
+                return true
-            else if (currentIndex === 2 && taskLog.enableFlag === "0") { return true }
+            } else if (currentIndex === 1 && taskLog.enableFlag === "1") {
-            else return false;
+                return true
+            } else if (currentIndex === 2 && taskLog.enableFlag === "0") {
+                return true
+            } else return false;
         }).reduce((map, taskLog) => {
             if (!map.has(dayjs(taskLog.createdDate).format("YYYY-MM-DD"))) {
                 map.set(dayjs(taskLog.createdDate).format("YYYY-MM-DD"), []);
@@ -103,9 +122,10 @@ const DiaryOption = (props: SelectDiary) => {
                 createdDate: new Date()
             })
         })
-        setDiaryReduceList(returnResult);
+        setDiaryReduceList(returnResult.reverse());
-    }, [diaryList]);
+    }, [diaryList, currentIndex]);
 
+    const listRef = useRef<ListRef>(null);
     const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
         // Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions
         if (
@@ -120,6 +140,37 @@ const DiaryOption = (props: SelectDiary) => {
 
     // 点击操作 start
     const [clickTaskDiary, setClickTaskDiary] = useState<ListDiary>()
+    const onClickTAskDiary = (item: ListDiary, operate: string) => {
+        if (clickTaskDiary == item && operate == 'L') {
+            setClickTaskDiary(undefined)
+        } else {
+            setClickTaskDiary(item)
+        }
+    }
+    const items: MenuProps['items'] = [
+        {
+            label: '复制',
+            key: '1',
+            onClick: () => {
+            }
+        },
+        {
+            label: '失效',
+            key: '2',
+        },
+        {
+            label: '创建计划',
+            key: '3',
+        },
+        {
+            label: '删除',
+            key: '4',
+        },
+        {
+            label: '取消',
+            key: '5',
+        },
+    ];
     // 点击操作 end
 
     return (
@@ -128,7 +179,10 @@ const DiaryOption = (props: SelectDiary) => {
                 日志心得
             </Button>
             <Drawer
-                style={{boxSizing:"border-box"}}
+                style={{boxSizing: "border-box"}}
+                styles={{
+                    body: {padding: "0 24px"}
+                }}
                 mask={false}
                 title={props.taskName}
                 closable={{'aria-label': 'Close Button'}}
@@ -187,7 +241,8 @@ const DiaryOption = (props: SelectDiary) => {
                     </div>
                 }
             >
-                <div className="displayFlexRow">
+                <div className="displayFlexRow"
+                     style={{position: "sticky", top: "0", background: "white", zIndex: "100"}}>
                     <Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(0)}
                             type={currentIndex == 0 ? "primary" : "default"}>全部</Button>
                     <Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(1)}
@@ -195,37 +250,42 @@ const DiaryOption = (props: SelectDiary) => {
                     <Button style={{flexGrow: 1}} onClick={() => setCurrentIndex(2)}
                             type={currentIndex == 2 ? "primary" : "default"}>失效</Button>
                 </div>
-                <div>
+                <List style={{height: "auto"}}>
-                    <List>
+                    <VirtualList
-                        <VirtualList
+                        data={diaryReduceList}
-                            data={diaryReduceList}
+                        // height={CONTAINER_HEIGHT}
-                            height={CONTAINER_HEIGHT}
+                        // itemHeight={47}
-                            itemHeight={47}
+                        itemKey="email"
-                            itemKey="email"
+                        onScroll={onScroll}
-                            onScroll={onScroll}
+                        style={{height: "auto"}}
-                            className={style.reverseScrollList}
+                        ref={listRef}
-                        >
+                    >
-                            {item => (
+                        {item => (
-                                item.enableFlag === 'day-separate' ?
+                            item.enableFlag === 'day-separate' ?
-                                    <div className={style.container} key={item.keyId}>
+                                <div className={style.container} key={item.keyId}>
-                                        <div className={style.lineWithText}>
+                                    <div className={style.lineWithText}>
-                                            <text className={style.centerText}>{item.description}</text>
+                                        <text className={style.centerText}>{item.description}</text>
-                                        </div>
                                     </div>
-                                    : <div className={style.logTaskContent} key={item.id}>
+                                </div>
+                                : <div className={style.logTaskContent} key={item.id}>
+                                    <Dropdown menu={{items}} trigger={['contextMenu']}>
                                         <div
                                             className={`${style.detailLine} ${item.id === clickTaskDiary?.id ? style.detailLineClick : ''}`}
-                                            onClick={() => setClickTaskDiary(item)}>
+                                            onClick={() => onClickTAskDiary(item, "L")}
+                                            onContextMenu={() => onClickTAskDiary(item, "R")}>
                                             <text
-                                                style={{textDecoration: item.enableFlag === '0' && currentIndex === 0 ? 'line-through' : ''}}>
+                                                style={{
+                                                    textDecoration: item.enableFlag === '0' && currentIndex === 0 ? 'line-through' : '',
+                                                    whiteSpace: 'pre-line'
+                                                }}>
                                                 {item.description}
                                             </text>
                                         </div>
-                                    </div>
+                                    </Dropdown>
-                            )}
+                                </div>
-                        </VirtualList>
+                        )}
-                    </List>
+                    </VirtualList>
-                </div>
+                </List>
             </Drawer>
         </>
     );