perf: 计算mailbox 的title

src/stores/EmailSlice.js

@@ -108,8 +108,9 @@ const emailSlice = (set, get) => ({
     let isNeedRefresh = false
     if (!isEmpty(readCache)) {
       setMailboxNestedDirsActive(readCache?.tree || [])
-      isNeedRefresh = Date.now() - readCache.timestamp > 4 * 60 * 60 * 1000
-    } else if (isEmpty(readCache) || isNeedRefresh) {
+      isNeedRefresh = true; // Date.now() - readCache.timestamp > 4 * 60 * 60 * 1000 // test: 0
+    }
+    if (isEmpty(readCache) || isNeedRefresh) {
       // > {4} 更新
       const x = await getEmailDirAction({ opi_sn })
       const mailboxSort = x //.sort(sortBy('MDR_Order'));

src/utils/commons.js

@@ -620,11 +620,12 @@ function createTreeNode(key, name, parent = null, keyMap={}, _raw={}) {
         key: key,
         title: name,
         parent: parent,
-        parentTitle: '',
         icon: _raw?.icon,
         iconIndex: _raw?.[keyMap.iconIndex],
         _raw: _raw,
-        children: []
+        children: [],
+        parentTitle: '',
+        parentIconIndex: '',
     };
 }
 /**
@@ -656,12 +657,14 @@ export const buildTree = (list, keyMap={ rootKeys: [], ignoreKeys: [] }) => {
         node.rawParent = node.parent;
         node.parent = parentNode.parent;
         node.parentTitle = parentNode.title;
+        node.parentIconIndex = parentNode.iconIndex;
         grandParentNode.children.push(node)
       } else if (keyMap.ignoreKeys.includes(item[keyMap.key])) {
         //
       }
       else if (parentNode) {
         node.parentTitle = parentNode.title;
+        node.parentIconIndex = parentNode.iconIndex;
         parentNode.children.push(node)
       } else {
         console.warn(`Parent with key '${item[keyMap.parent]}' not found for node '${item[keyMap.key]}'. This node will be treated as a root.`)

src/views/orders/Follow.jsx

@@ -81,14 +81,14 @@ function Follow() {
           {
             title: '今日任务',
             key: ele.OPI_DEI_SN + '-today',
-            getMails: false,
+            getMails: false, iconIndex: 'star',
             icon: <StarTwoTone />,
             children: [], COLI_SN: 0,
           },
           {
             title: '待办任务',
             key: ele.OPI_DEI_SN + '-todo',
-            getMails: false,
+            getMails: false, iconIndex: 'calendar',
             icon: <CalendarTwoTone />,
             children: [], COLI_SN: 0,
           },
@@ -104,6 +104,15 @@ function Follow() {
   const [mailboxActiveNode, setMailboxActiveNode] = useConversationStore(state => [state.mailboxActiveNode, state.setMailboxActiveNode]);
   const [activeEmailId, setActiveEmailId] = useConversationStore(state => [state.mailboxActiveMAI, state.setMailboxActiveMAI]);
 
+  const computedBreadcrumb = useMemo(() => {
+    const { title, iconIndex, parentTitle, parentIconIndex } = mailboxActiveNode
+    const x = [
+      { title: parentTitle, iconIndex: parentIconIndex },
+      { title, iconIndex },
+    ].filter((ele) => ele.title)
+    return x
+  }, [mailboxActiveNode.VKey])
+
   // const [activeEmailId, setActiveEmailId] = useState(0)
 
   const [deiStickyTree, setDeiStickyTree] = useState({})
@@ -123,7 +132,7 @@ function Follow() {
 
   const handleTreeSelectGetMails = (selectedKeys, { node }) => {
     // console.info('selectedTreeKeys: ', node)
-    const treeNode = pick(node, ['key', 'parent', 'getMails', 'title', 'parentTitle', ]);
+    const treeNode = pick(node, ['key', 'parent', 'iconIndex', 'getMails', 'title', 'parentTitle', 'parentIconIndex' ]);
     setMailboxActiveNode({...treeNode, ...node._raw, OPI_SN: currentMailboxOPI});
     // const { COLI_SN, VKey, VParent, ApplyDate, OrderSourceType, IsTrue } = node?._raw || {}
     setActiveEmailId(0);
@@ -150,26 +159,30 @@ function Follow() {
         {
           title: '今日任务',
           key: key + '-today',
-          getMails: false,
+          getMails: false,iconIndex: 'star',
           icon: <StarTwoTone />, _raw: {COLI_SN: 0},
           children: (sticky[0] || []).map((o) => ({
             key: `today-${o.COLI_SN}`,
             title: `(${todoTypes[o.coli_ordertype] || o.COLI_State}) ${o.COLI_ID}`,
+            iconIndex: 13,
             parent: key + '-today',
             parentTitle: '今日任务',
+            parentIconIndex: 'star',
             _raw: { ...o, VKey: o.COLI_SN, VName: o.COLI_ID, VParent:-1, IsTrue: 0, ApplyDate: '', OrderSourceType: 227001, parent: -1 },
           })),
         },
         {
           title: '待办任务',
           key: key + '-todo',
-          getMails: false,
+          getMails: false,iconIndex: 'calendar',
           icon: <CalendarTwoTone />,_raw: {COLI_SN: 0},
           children: (sticky[1] || []).map((o) => ({
             key: `todo-${o.COLI_SN}`,
             title: `(${todoTypes[o.coli_ordertype] || o.COLI_State}) ${o.COLI_ID}`,
+            iconIndex: 13,
             parent: key + '-todo',
             parentTitle: '待办任务',
+            parentIconIndex: 'calendar',
             _raw: { ...o, VKey: o.COLI_SN, VName: o.COLI_ID, VParent:-1, IsTrue: 0, ApplyDate: '', OrderSourceType: 227001, parent: -1 },
           })),
         },
@@ -214,7 +227,7 @@ function Follow() {
         <Layout.Content style={{ maxHeight: 'calc(100vh - 166px)', height: 'calc(100vh - 166px)', minWidth: '360px' }}>
           <Splitter>
             <Splitter.Panel defaultSize='40%' min={580} max='70%'>
-              <Mailbox mailboxDir={mailboxActiveNode} onMailItemClick={(id) => setActiveEmailId(id)} />
+              <Mailbox breadcrumb={computedBreadcrumb} mailboxDir={mailboxActiveNode} onMailItemClick={(id) => setActiveEmailId(id)} />
             </Splitter.Panel>
             <Splitter.Panel>
               <EmailDetailInline mailID={activeEmailId || 0} emailMsg={{}} variant={'outline'} size={'small'} />
@@ -222,7 +235,7 @@ function Follow() {
           </Splitter>
         </Layout.Content>
 
-        <Button icon={collapsed ? <LeftOutlined /> : <UnorderedListOutlined />} onClick={() => setCollapsed(!collapsed)} className={`absolute top-20 z-10 rounded-none rounded-l ${collapsed ? 'right-1' : 'right-8 '}`} />
+        <Button icon={collapsed ? <LeftOutlined /> : <UnorderedListOutlined />} onClick={() => setCollapsed(!collapsed)} className={`absolute z-10 rounded-none rounded-l ${collapsed ? 'right-1 top-36' : 'right-8 top-20'}`} />
         <Layout.Sider
           width='280'
           theme='light'
@@ -236,7 +249,7 @@ function Follow() {
           collapsedWidth={0}
           trigger={null}
           reverseArrow={true}>
-          <OrderProfile />
+          <OrderProfile coliSN={mailboxActiveNode.COLI_SN} />
         </Layout.Sider>
       </Layout>
     </>

src/views/orders/components/MailBox.jsx

@@ -171,7 +171,7 @@ const MailBox = ({ mailboxDir, onMailItemClick, ...props}) => {
           pagination={false}
           dataSource={mailList}
           renderItem={(item) => (
-            <li className='flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 p-2'>
+            <li onClick={() => onMailItemClick(item.MAI_SN)} className='flex border border-solid border-t-0 border-x-0 border-gray-200 hover:bg-neutral-50 p-2'>
               <div className=''>
                 <Checkbox></Checkbox>
               </div>

src/views/orders/components/MailboxDirIcon.jsx

@@ -2,6 +2,8 @@ import { StarTwoTone, CalendarTwoTone, FolderOutlined, DeleteOutlined, ClockCirc
 import { InboxIcon, MailUnreadIcon, SendPlaneFillIcon } from '@/components/Icons'
 
 const EmailDirTypeIcons = {
+  'star': { component: StarTwoTone, color: '', className: '' },
+  'calendar': { component: CalendarTwoTone, color: '', className: '' },
   0: { component: FolderOutlined, color: '#ffe78f', className: 'text-blue-500' },
   1: { component: FolderOutlined, color: '#ffe78f', className: 'text-blue-500' },
   3: { component: InboxIcon, color: '', className: 'text-indigo-500' },