筛选数据,调整规则

src/Router.tsx

@@ -11,6 +11,8 @@ import DuplicateFileIndex from "@/pages/DuplicateFile/Index";
 import DuplicateFile from "@/pages/DuplicateFile/DuplicateFile";
 import CalculateDuplicateFiles from "@/pages/DuplicateFile/CalculateDuplicateFiles";
 import DuplicateFileInfo from "@/pages/DuplicateFile/FileInfo";
+// import CalculateListPage from "@/pages/DuplicateFile/CalculateListPage";
+import CalculateListPage from '@/pages/DuplicateFile/CalculateListPage'
 /* export default function Router() {
   return (
     <Routes>
@@ -59,6 +61,10 @@ const router = createBrowserRouter([
           {
             path: "calculate/:fileId",
             element: <CalculateDuplicateFiles />,
+          },
+          {
+            path: "calculate-list/:fileId",
+            element: <CalculateListPage />,
           }
         ]
       },

src/pages/DuplicateFile/CalculateDuplicateFiles.tsx

@@ -6,7 +6,7 @@ import {
     updateSelectedFileHistory
 } from "@/services";
 import {useEffect, useState} from "react";
-import {useParams} from "react-router-dom";
+import {useNavigate, useParams} from "react-router-dom";
 import {FileInfoType, stepsStatusType} from "@/types/files";
 import {message} from "@tauri-apps/api/dialog";
 import styles from './CalculateDuplicateFiles.module.less'
@@ -17,12 +17,13 @@ import { readDir, BaseDirectory } from '@tauri-apps/api/fs';
 
 export default function CalculateDuplicateFiles() {
     let {fileId} = useParams();
+    let navigate = useNavigate();
     const [fileInfo, setFileInfo] = useState<FileInfoType>({})
-    const [current, setCurrent] = useState(0);
-    const [percent, setPercent] = useState(0);
+    const [current, setCurrent] = useState(1);
+    const [percent, setPercent] = useState(85);
     const [stepsStatus, setStepsStatus] = useState<stepsStatusType>({
-        scanDir: 'wait',
-        fileOptions: 'wait',
+        scanDir: 'finish',
+        fileOptions: 'process',
         duplicateFiles: 'wait',
         done: 'wait',
     })
@@ -59,11 +60,12 @@ export default function CalculateDuplicateFiles() {
         }
     }
     async function scanDirAll() {
-        if(fileInfo.path) {
-            console.log(626262, fileInfo)
-            const files = await File.getAllList(fileInfo);
-            console.log(636363, files)
-        }
+        navigate('/calculate-list/' + fileId)
+        // if(fileInfo.path) {
+        //     console.log(626262, fileInfo)
+        //     const files = await File.getAllList(fileInfo);
+        //     console.log(636363, files)
+        // }
     }
 
     return (

src/pages/DuplicateFile/CalculateListPage.module.less

@@ -0,0 +1,3 @@
+.CalculateListPage {
+  
+}

src/pages/DuplicateFile/CalculateListPage.tsx

@@ -0,0 +1,119 @@
+import { Avatar, List, message, Checkbox, Row, Col, Space, Button } from "antd";
+import type { CheckboxProps } from "antd";
+import VirtualList from "rc-virtual-list";
+import { useEffect, useState } from "react";
+
+import styles from "./CalculateListPage.module.less";
+import { UploadOutlined } from "@ant-design/icons";
+export default function CalculateListPage() {
+  const [data, setData] = useState<UserItem[]>([]);
+  interface UserItem {
+    email: string;
+    gender: string;
+    name: {
+      first: string;
+      last: string;
+      title: string;
+    };
+    nat: string;
+    picture: {
+      large: string;
+      medium: string;
+      thumbnail: string;
+    };
+  }
+  const ContainerHeight = 600;
+  const fakeDataUrl =
+    "https://randomuser.me/api/?results=20&inc=name,gender,email,nat,picture&noinfo";
+  const onScroll = (e: React.UIEvent<HTMLElement, UIEvent>) => {
+    // Refer to: https://developer.mozilla.org/en-US/docs/Web/API/Element/scrollHeight#problems_and_solutions
+    if (
+      Math.abs(
+        e.currentTarget.scrollHeight -
+          e.currentTarget.scrollTop -
+          ContainerHeight
+      ) <= 1
+    ) {
+      appendData();
+    }
+  };
+  const appendData = () => {
+    fetch(fakeDataUrl)
+      .then((res) => res.json())
+      .then((body) => {
+        setData(data.concat(body.results));
+        // message.success(`${body.results.length} more items loaded!`);
+      });
+  };
+
+  useEffect(() => {
+    appendData();
+  }, []);
+
+  const onChange: CheckboxProps["onChange"] = (e) => {
+    console.log(`checked = ${e.target.checked}`);
+  };
+
+  return (
+    <div className={styles.CalculateListPage}>
+      <div
+        style={{
+          padding: "24px",
+        }}
+      >
+        <Space>
+          <Button type="primary" danger>删除选中的文件</Button>
+          <Button type="primary">统一移动到指定目录</Button>
+          <Button type="primary">导出</Button>
+        </Space>
+        <div style={{marginBottom: '12px'}}></div>
+        <List>
+          <VirtualList
+            data={data}
+            height={ContainerHeight}
+            itemHeight={47}
+            itemKey="email"
+            onScroll={onScroll}
+          >
+            {(item: UserItem) => (
+              <div
+                style={{
+                  marginBottom: "12px",
+                }}
+              >
+                <div>
+                  <Checkbox onChange={onChange}>
+                    /Users/sysadmin/Downloads/Android-SDK@3.6.18.81676_20230117.zip
+                  </Checkbox>
+                </div>
+                <div
+                  style={{
+                    backgroundColor: "var(--color-1)",
+                    padding: "12px 3px",
+                  }}
+                >
+                  <div>
+                    <Checkbox onChange={onChange}>重复的文件路径1</Checkbox>
+                  </div>
+                  <div>
+                    <Checkbox onChange={onChange}>重复的文件路径2</Checkbox>
+                  </div>
+                </div>
+              </div>
+              //   <List.Item key={item.email}>
+              //     <List.Item.Meta
+              //       avatar={
+              //         <Checkbox onChange={onChange}></Checkbox>
+              //       }
+              //       title={ <div>文件路径</div>}
+              //     //   description={item.email}
+              //     />
+              //     <div>Content</div>
+              //   </List.Item>
+            )}
+          </VirtualList>
+        </List>
+      </div>
+    </div>
+  );
+}

src/pages/DuplicateFile/DuplicateFile.module.less

@@ -3,7 +3,7 @@
   box-sizing: border-box;
   width: 100%;
   height: 80vh;
-  overflow: hidden;
+  overflow: scroll;
 
   // .searchBox {
   //   input {