From e4fc6f79c05f6bf384b5633b9a3d225b0dc01dc8 Mon Sep 17 00:00:00 2001
From: LiaoYijun <lyj@hainatravel.com>
Date: Tue, 3 Jun 2025 09:59:05 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=8B=AC=E7=AB=8B=E9=82=AE=E4=BB=B6?=
 =?UTF-8?q?=E7=AE=B1=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/orders/Follow.jsx             | 212 +----------------------
 src/views/orders/components/MailBox.jsx | 221 ++++++++++++++++++++++++
 2 files changed, 224 insertions(+), 209 deletions(-)
 create mode 100644 src/views/orders/components/MailBox.jsx

diff --git a/src/views/orders/Follow.jsx b/src/views/orders/Follow.jsx
index c149711..65eed8d 100644
--- a/src/views/orders/Follow.jsx
+++ b/src/views/orders/Follow.jsx
@@ -72,6 +72,7 @@ import AdvanceSearchForm from './AdvanceSearchForm'
 import EmailDetailInline from '../Conversations/Online/Components/EmailDetailInline'
 import { getEmailDirAction } from '@/actions/EmailActions'
 import OrderProfile from '@/components/OrderProfile'
+import Mailbox from './components/Mailbox'
 
 const EmailDirTypeIcons = {
   '0': { component: FolderOutlined, color: '#ffe78f', className: 'text-blue-500' },
@@ -219,215 +220,8 @@ function Follow() {
         <Layout.Content style={{ maxHeight: 'calc(100vh - 166px)', height: 'calc(100vh - 166px)', minWidth: '360px' }}>
           <Row>
             <Col className='bg-white' span={14}>
-              <div className='bg-white h-auto px-1 flex gap-1 items-center'>
-                <Dropdown.Button
-                  className='w-auto'
-                  placement='bottom'
-                  arrow
-                  type={'primary'}
-                  menu={{
-                    items: [
-                      {
-                        key: '1',
-                        label: '一催模板一，询问客人是否收到报价信',
-                      },
-                      {
-                        key: '2',
-                        label: '一催模板二，询问客人是否修改行程',
-                      },
-                      {
-                        type: 'divider',
-                      },
-                      {
-                        key: '3',
-                        label: '二催模板一，询问客人对行程的看法',
-                      },
-                      {
-                        key: '4',
-                        label: '二催模板二，表达服务的意识',
-                      },
-                      {
-                        type: 'divider',
-                      },
-                      {
-                        key: '5',
-                        label: '三催模板三，强调价格有效期',
-                      },
-                    ],
-                    onClick: (item) => {
-                      console.info('menu', item)
-                    },
-                  }}
-                  onClick={() => {
-                    console.info('新邮件')
-                  }}>
-                  新邮件
-                </Dropdown.Button>
-                <Input.Search
-                  className=''
-                  allowClear
-                  onChange={(e) => {}}
-                  onPressEnter={(e) => {
-                    return false
-                  }}
-                  placeholder={`邮件主题`}
-                />
-                <Button onClick={() => {}}>高级搜索</Button>
-                <Flex wrap gap="small">
-          <Tooltip title="选择">
-      <Checkbox></Checkbox>
-      </Tooltip>
-          <Tooltip title="标记已读">
-            <Button shape="circle" type="text" size='small' icon={<ReadOutlined />} />
-          </Tooltip>
-          <Tooltip title="已处理">
-            <Button shape="circle" type="text" size='small' icon={<CheckSquareOutlined />} />
-          </Tooltip>
-          <Tooltip title="刷新">
-            <Button shape="circle" type="text" size='small' icon={<ReloadOutlined />} />
-          </Tooltip>
-        </Flex>
-              </div>
-
-
-            <div  className='bg-white overflow-y-auto'
- style={{height: 'calc(100vh - 198px)'}}>
-<List
-    // header={null}
-    header={<div>今日任务</div>}
-    itemLayout="vertical"
-    size="large"
-    pagination={false}
-    dataSource={[
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: '250520-LSS250429038 团的 变更 �确认：Japan Fleet',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: 'Your Thailand Private tour by Asia Highlights 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: 'Re: Personal information',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: 'Re: Your Future Trip with Asia Highlights',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: '回复： 回复：中华游251110-LSS250413051(AH)团计划',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: 'Re: Greeting from Asia Highlights Alisa',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: 'Re: Have you made any decisions about your Japan trip',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: 'Re: Sri Lanka tour',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: 'Re: How do you like the itinerary 3',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: 'Re: Re: Re: Final cost',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: 'Reference Number: LSS240628079',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: 'Re: Personal information and Hiroshima tour for 2 people',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                description: 'Fran Grundman <frangrundman@rogers.com>',
-                title: 'Re: Asia Travel Tips /LSS250429038',
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-            ]}
-    renderItem={item => (
-      <List.Item
-        key={item.title}
-        // actions={[
-        //   <a key="list-vertical-star-o">回复</a>,
-        //   <a key="list-vertical-refor">转发</a>,
-        // ]}
-        extra={
-          <Checkbox></Checkbox>
-        }
-
-      >
-        <List.Item.Meta
-          className='cursor-pointer'
-        onClick={() => console.info('item: ', item)}
-          title={<a href={item.href} onClick={() => setSubject(item.title)}>{item.title}</a>}
-          description={item.description + ' ' + item.mailDate}
-        />
-        {item.content}LSS250501006, Thailand
-      </List.Item>
-    )}
-  />
-  </div>
-  </Col>
+            <Mailbox />
+            </Col>
 
 
       <Col span={8}>
diff --git a/src/views/orders/components/MailBox.jsx b/src/views/orders/components/MailBox.jsx
new file mode 100644
index 0000000..4421d30
--- /dev/null
+++ b/src/views/orders/components/MailBox.jsx
@@ -0,0 +1,221 @@
+import {
+  ReloadOutlined,
+  ReadOutlined, CheckSquareOutlined
+} from '@ant-design/icons'
+import {
+  Flex,
+  Button, Tooltip,
+  List,
+  Dropdown, Input, Checkbox
+} from 'antd'
+
+const MailBox = (props) => {
+  return (
+    <>
+      <div className='bg-white h-auto px-1 flex gap-1 items-center'>
+        <Dropdown.Button
+          className='w-auto'
+          placement='bottom'
+          arrow
+          type={'primary'}
+          menu={{
+            items: [
+              {
+                key: '1',
+                label: '一催模板一，询问客人是否收到报价信',
+              },
+              {
+                key: '2',
+                label: '一催模板二，询问客人是否修改行程',
+              },
+              {
+                type: 'divider',
+              },
+              {
+                key: '3',
+                label: '二催模板一，询问客人对行程的看法',
+              },
+              {
+                key: '4',
+                label: '二催模板二，表达服务的意识',
+              },
+              {
+                type: 'divider',
+              },
+              {
+                key: '5',
+                label: '三催模板三，强调价格有效期',
+              },
+            ],
+            onClick: (item) => {
+              console.info('menu', item)
+            },
+          }}
+          onClick={() => {
+            console.info('新邮件')
+          }}>
+          新邮件
+        </Dropdown.Button>
+        <Input.Search
+          className=''
+          allowClear
+          onChange={(e) => {}}
+          onPressEnter={(e) => {
+            return false
+          }}
+          placeholder={`邮件主题`}
+        />
+        <Button onClick={() => {}}>高级搜索</Button>
+        <Flex wrap gap='small'>
+          <Tooltip title='选择'>
+            <Checkbox></Checkbox>
+          </Tooltip>
+          <Tooltip title='标记已读'>
+            <Button shape='circle' type='text' size='small' icon={<ReadOutlined />} />
+          </Tooltip>
+          <Tooltip title='已处理'>
+            <Button shape='circle' type='text' size='small' icon={<CheckSquareOutlined />} />
+          </Tooltip>
+          <Tooltip title='刷新'>
+            <Button shape='circle' type='text' size='small' icon={<ReloadOutlined />} />
+          </Tooltip>
+        </Flex>
+      </div>
+
+      <div className='bg-white overflow-y-auto' style={{ height: 'calc(100vh - 198px)' }}>
+        <List
+          // header={null}
+          header={<div>今日任务</div>}
+          itemLayout='vertical'
+          size='large'
+          pagination={false}
+          dataSource={[
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: '250520-LSS250429038 团的 变更 �确认：Japan Fleet',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: 'Your Thailand Private tour by Asia Highlights 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: 'Re: Personal information',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: 'Re: Your Future Trip with Asia Highlights',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: '回复： 回复：中华游251110-LSS250413051(AH)团计划',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: 'Re: Greeting from Asia Highlights Alisa',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: 'Re: Have you made any decisions about your Japan trip',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: 'Re: Sri Lanka tour',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: 'Re: How do you like the itinerary 3',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: 'Re: Re: Re: Final cost',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: 'Reference Number: LSS240628079',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: 'Re: Personal information and Hiroshima tour for 2 people',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+            {
+              key: Math.random().toString(36).substring(2, 9),
+              description: 'Fran Grundman <frangrundman@rogers.com>',
+              title: 'Re: Asia Travel Tips /LSS250429038',
+              mailDate: '2025-05-01 19:21:00',
+              orderNo: 'LSS250501006',
+              country: 'Thailand',
+            },
+          ]}
+          renderItem={(item) => (
+            <List.Item
+              key={item.title}
+              // actions={[
+              //   <a key="list-vertical-star-o">回复</a>,
+              //   <a key="list-vertical-refor">转发</a>,
+              // ]}
+              extra={<Checkbox></Checkbox>}>
+              <List.Item.Meta
+                className='cursor-pointer'
+                onClick={() => console.info('item: ', item)}
+                title={<a href={item.href} onClick={() => console.info('')}></a>}
+                description={item.description + ' ' + item.mailDate}
+              />
+              {item.content}LSS250501006, Thailand
+            </List.Item>
+          )}
+        />
+      </div>
+    </>
+  )
+}
+
+export default MailBox