From b1efa2f4f37c84e606b1dc8793706c72e8d45cea Mon Sep 17 00:00:00 2001
From: LiaoYijun <lyj@hainatravel.com>
Date: Thu, 29 May 2025 13:55:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=A2=9E=E5=8A=A0=E9=82=AE=E4=BB=B6?=
 =?UTF-8?q?=E6=89=B9=E9=87=8F=E6=93=8D=E4=BD=9C=E5=B7=A5=E5=85=B7=E6=A0=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/orders/Follow.jsx | 327 +++++++++---------------------------
 1 file changed, 76 insertions(+), 251 deletions(-)

diff --git a/src/views/orders/Follow.jsx b/src/views/orders/Follow.jsx
index 2525def..9dd8dcb 100644
--- a/src/views/orders/Follow.jsx
+++ b/src/views/orders/Follow.jsx
@@ -8,19 +8,23 @@ import {
   WhatsAppOutlined,
   ImportOutlined,
   FileAddOutlined,
-  BarsOutlined,
-  DownOutlined,
+  StarTwoTone,
+  StarOutlined,
   MailOutlined,
   PhoneOutlined,
   UserOutlined,
   FieldNumberOutlined,
   SaveOutlined,
   PlusOutlined,
-  MehOutlined,
+  SearchOutlined,
+  ReloadOutlined,ReadOutlined,
   CompassOutlined,
   CheckSquareTwoTone,
   CarryOutTwoTone,
+  CheckSquareOutlined,
   MailTwoTone,
+  BookTwoTone,
+  RightSquareTwoTone,
   SwitcherTwoTone,
   FolderTwoTone,
   CalendarTwoTone,
@@ -367,13 +371,16 @@ const [collapsed, setCollapsed] = useState(false)
             <Tree
               showIcon
               showLine
-              defaultExpandedKeys={['0-0', '0-1']}
+              onSelect={(selectedKeys, e) => {
+                console.info('selectedKeys: ', selectedKeys)
+              }}
+              defaultExpandedKeys={['0-0-today-task', '0-1-todo-task']}
               defaultSelectedKeys={['0-0-0']}
               treeData={[
                 {
                   title: '今日任务',
-                  key: '0-0',
-                  icon: <CalendarTwoTone />,
+                  key: '0-0-today-task',
+                  icon: <StarTwoTone />,
                   children: [
                     {
                       title: '(新订单)HXZ240913082',
@@ -387,8 +394,8 @@ const [collapsed, setCollapsed] = useState(false)
                 },
                 {
                   title: '待办任务',
-                  key: '0-1',
-                  icon: <SwitcherTwoTone />,
+                  key: '0-1-todo-task',
+                  icon: <CalendarTwoTone />,
                   children: [
                     {
                       title: '(一催)HXZ250213117',
@@ -414,13 +421,13 @@ const [collapsed, setCollapsed] = useState(false)
                 },
                 {
                   title: '草稿',
-                  key: '0-2',
-                  icon: <MailTwoTone />,
+                  key: '0-2-draft',
+                  icon: <BookTwoTone />,
                 },
                 {
                   title: '收件箱',
-                  key: '0-3',
-                  icon: <FolderTwoTone />,
+                  key: '0-3-inbox',
+                  icon: <MailTwoTone />,
                   children: [
                     {
                       title: '1月',
@@ -473,12 +480,12 @@ const [collapsed, setCollapsed] = useState(false)
                 },
                 {
                   title: '已发送',
-                  key: '0-4',
-                  icon: <CarryOutTwoTone />,
+                  key: '0-4-sent',
+                  icon: <RightSquareTwoTone />,
                 },
                 {
                   title: '已处理',
-                  key: '0-5',
+                  key: '0-5-completed',
                   icon: <CheckSquareTwoTone />,
                 },
               ]}
@@ -486,34 +493,42 @@ const [collapsed, setCollapsed] = useState(false)
           </Flex></Layout.Sider>
     <Layout.Content>
 
-      <Layout>
-  <Layout.Header className='bg-white h-auto px-1 flex gap-1 items-center'>
 
-            <Button onClick={() => {}} icon={<PlusOutlined />} type={'primary'}>新邮件</Button>
+<Row>
+      <Col className='bg-white' span={16}>
+
+      <div className='bg-white h-auto px-1 flex gap-1 items-center'>
 
-<Dropdown menu={{ items: [
+  <Dropdown.Button className='w-auto' placement="bottom" arrow type={'primary'} menu={{
+  items: [
   {
     key: '1',
-    label: '一催：模板一',
+    label: '一催模板一，询问客人是否收到报价信',
   },
   {
     key: '2',
-    label: '一催：模板二',
+    label: '一催模板二，询问客人是否修改行程',
+  },{
+    type: 'divider',
   },
   {
     key: '3',
-    label: '一催：模板三',
+    label: '二催模板一，询问客人对行程的看法',
   },
-]}} trigger={['click']}>
-
-    <Button>
-        <Space>
-          使用模板
-          <DownOutlined />
-        </Space>
-      </Button>
-  </Dropdown>
-            <Button onClick={() => {}} >多选</Button>
+  {
+    key: '4',
+    label: '二催模板二，表达服务的意识',
+  },{
+    type: 'divider',
+  },
+  {
+    key: '5',
+    label: '三催模板三，强调价格有效期',
+  }],
+  onClick: (item)=> {console.info('menu', item)},
+}} onClick={()  => {console.info('新邮件')}}>
+      新邮件
+    </Dropdown.Button>
             <Input.Search
               className=''
               allowClear
@@ -521,18 +536,30 @@ const [collapsed, setCollapsed] = useState(false)
               onPressEnter={(e) => {
                 return false
               }}
-              placeholder={`名称/号码/订单号`}
+              placeholder={`邮件主题`}
             />
             <Button onClick={() => {}} >高级搜索</Button>
-</Layout.Header>
-  <Layout>
-    <Layout.Content>
-
-<Row>
-      <Col className='bg-white' span={16} style={{height: 'calc(100vh - 196px)', overflowY: 'auto'}}>
+            </div>
+            <div  className='bg-white overflow-y-auto'
+ style={{height: 'calc(100vh - 198px)'}}>
 <List
+    // header={null}
+    header={ <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>}
     itemLayout="vertical"
-    size="small"
+    size="large"
     pagination={false}
     dataSource={[
               {
@@ -647,15 +674,23 @@ const [collapsed, setCollapsed] = useState(false)
         //   <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>
     )}
-  /></Col>
+  />
+  </div>
+  </Col>
       <Col span={8}>
 
   <div>
@@ -706,217 +741,7 @@ const [collapsed, setCollapsed] = useState(false)
         <p>Some contents...{Math.random().toString(36).substring(2, 9)}</p>
   </div></Col>
     </Row>
-          {/* <Table
-          onRow={(record) => {
-    return {
-      onClick: (event) => {console.info(event)}, // 点击行
-      onDoubleClick: (event) => {},
-      onContextMenu: (event) => {},
-      onMouseEnter: (event) => {}, // 鼠标移入行
-      onMouseLeave: (event) => {},
-    };
-  }}
-            pagination={false}
-    sticky={{ offsetHeader: 64 }}
-            columns={[
-              {
-                title: '主题',
-                dataIndex: 'subject',
-                key: 'subject',
-                width: 500,
-                render: (text) => <a onClick={() => {
-                  setSubject(text)
-                  setOpenMail(true)
-                }}>{text}</a>,
-              },
-              {
-                title: '收/发件人',
-                dataIndex: 'name',
-                key: 'name',
-                width: 380,
-                minWidth: 180,
-                render: (text) => <a>{text}</a>,
-              },
-              {
-                title: '收/发日期',
-                dataIndex: 'mailDate',
-                key: '收/发日期',
-                width: 180,
-              },
-              {
-                title: '订单号',
-                key: 'orderNo',
-                dataIndex: 'orderNo',
-                width: 140,
-              },
-              {
-                title: '国籍',
-                key: 'country',
-                dataIndex: 'country',
-                width: 120,
-              },
-              {
-                title: '操作',
-                key: 'action',
-                width: 120,
-                render: (_, record) => (
-                  <Space size='middle'>
-                    <a>回复</a>
-                    <a>转发</a>
-                  </Space>
-                ),
-              },
-            ]}
-            dataSource={[
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by Asia Highlights 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-              {
-                key: Math.random().toString(36).substring(2, 9),
-                name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: 'Your Thailand Private tour by "Asia Highlights" ' + Math.random().toString(36).substring(2, 9),
-                mailDate: '2025-05-01 19:21:00',
-                orderNo: 'LSS250501006',
-                country: 'Thailand',
-              },
-            ]}
-          /> */}
-</Layout.Content>
-  </Layout>
-  {/* <Layout.Footer className='p-1 border-solid border rounded border-gray-300'>
 
-          <Descriptions title="Your Thailand Private tour by 'Asia Highlights' 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到" items={[
-  {
-    key: '1',
-    label: '发件人',
-    children: '"阿里邮箱" <no-reply@mailsupport.aliyun.com>',
-  },
-  {
-    key: '2',
-    label: '收件人',
-    children: '<liaoyijun@chinahighlights.com>',
-  },
-  {
-    key: '3',
-    label: '发送日期',
-    children: '2025-05-16 14:11',
-  },
-]} />
-          <Flex gap="small">
-            <Space.Compact>
-          <Button color="primary" variant="solid">
-            回复
-          </Button>
-          <Button color="primary" variant="outlined">
-            回复全部
-          </Button>
-          <Button color="primary" variant="outlined" >
-            转发
-          </Button>
-          </Space.Compact>
-          <Button color="cyan" variant="outlined">
-            已处理
-          </Button>
-          <Button color="cyan" variant="outlined">
-            绑定订单
-          </Button>
-          </Flex>
-          <div id='__preHtml__' className='whitespace-pre-wrap break-words' dangerouslySetInnerHTML={{ __html: '邮件内容。。。。。<br/>换行了。。。看看 ' }}></div>
-          </Layout.Footer> */}
-</Layout>
     </Layout.Content>
     <Layout.Sider zeroWidthTriggerStyle={{top: '30px'}} width='280' style={{
   backgroundColor: '#fff',