perf: 邮箱目录Tree, 虚拟滚动

src/views/orders/Follow.jsx

@@ -2,7 +2,7 @@ import useAuthStore from '@/stores/AuthStore'
 import { pick } from '@/utils/commons'
 import { UnorderedListOutlined, LeftOutlined } from '@ant-design/icons'
 import { Flex, Segmented, Tree, Typography, Layout, Splitter, Button, Tooltip, Badge } from 'antd'
-import { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState, useRef } from 'react'
 import EmailDetailInline from '../Conversations/Online/Components/EmailDetailInline'
 import OrderProfile from '@/components/OrderProfile'
 import Mailbox from './components/Mailbox'
@@ -45,6 +45,8 @@ const deptMap = new Map([
 function Follow() {
 
   const [collapsed, setCollapsed] = useState(true)
+  const mailboxTreeRef = useRef(null);
+  const [treeHeight, setTreeHeight] = useState(500);
 
   const [loginUser, isPermitted] = useAuthStore((state) => [state.loginUser, state.isPermitted])
   const { accountList } = loginUser
@@ -123,10 +125,27 @@ function Follow() {
   useEffect(() => {
     const first = currentMailboxDEI || accountDEI[0].value
     const opi = accountListDEIMapped[first].OPI_SN
-    setExpandTree(prev => [...[`${opi}-today`, `${opi}-todo`, `search-orders`, mailboxActiveNode.key, mailboxActiveNode?.VParent ]])
+    setExpandTree([...[`${opi}-today`, `${opi}-todo`, `search-orders` ]])
 
     return () => {}
-  }, [currentMailboxDEI, mailboxNestedDirsActive, mailboxActiveNode])
+  }, [currentMailboxDEI ])
+
+  useEffect(() => {
+    if (mailboxActiveNode?.expand === true) {
+      setExpandTree([mailboxActiveNode.key])
+    }
+
+    return () => {}
+  }, [mailboxActiveNode])
+
+  useEffect(() => {
+    const targetRect = mailboxTreeRef.current?.getBoundingClientRect()
+    setTreeHeight(Math.floor(targetRect.height))
+
+    return () => {}
+  }, [])
+
+
 
   return (
     <>
@@ -134,13 +153,14 @@ function Follow() {
         <Layout.Sider width='300' theme='light' style={{ height: 'calc(100vh - 166px)' }} className=' relative'>
           <Flex justify='start' align='start' vertical className='h-full'>
             <Segmented className='w-full' block shape='round' options={accountDEI} value={currentMailboxDEI} onChange={handleSwitchAccount} />
-            <div className='overflow-y-auto flex-auto w-full [&_.ant-tree-switcher]:me-0 [&_.ant-tree-node-content-wrapper]:px-0 [&_.ant-tree-node-content-wrapper]:text-ellipsis [&_.ant-tree-node-content-wrapper]:overflow-hidden [&_.ant-tree-node-content-wrapper]:whitespace-nowrap'>
+            <div ref={mailboxTreeRef} className='overflow-y-auto flex-auto w-full [&_.ant-tree-switcher]:me-0 [&_.ant-tree-node-content-wrapper]:px-0 [&_.ant-tree-node-content-wrapper]:text-ellipsis [&_.ant-tree-node-content-wrapper]:overflow-hidden [&_.ant-tree-node-content-wrapper]:whitespace-nowrap'>
               <Tree
                 className='[&_.ant-typography-ellipsis]:max-w-44 [&_.ant-typography-ellipsis]:min-w-36'
                 key='sticky-today'
                 blockNode
                 showIcon
                 showLine
+                height={treeHeight}
                 autoExpandParent={true}
                 expandAction={'doubleClick'}
                 onSelect={handleTreeSelectGetMails}

src/views/orders/components/MailOrderSearchModal.jsx

@@ -32,11 +32,12 @@ const MailOrderSearchModal = ({ ...props }) => {
       const { coli_id, sourcetype, ...mailboxParams } = valuesToSub
       result = await getEmailDirAction({ ...mailboxParams, opi_sn: currentMailboxOPI }, false)
       updateCurrentMailboxNestedDirs(result[`${currentMailboxOPI}`])
-      setMailboxActiveNode({key: -1, title: '1月', iconIndex: 1, _raw: { VKey: -1, COLI_SN: 0, IsTrue: 0 }})
+      setMailboxActiveNode({expand:true, key: -1, title: '1月', iconIndex: 1, _raw: { VKey: -1, COLI_SN: 0, IsTrue: 0 }})
     } else {
       const htOrderParams = pick(valuesToSub, ['coli_id', 'sourcetype'])
       result = await queryHTOrderListAction({ ...htOrderParams, opi_sn: currentMailboxOPI })
       const addToTree = {
+        expand:true,
         key: 'search-orders',
         title: '查找订单',
         iconIndex: 'search',