Merge remote-tracking branch 'origin/dev/2025a' into dev/2025a

src/views/orders/Follow.jsx

@@ -17,7 +17,7 @@ import {
   SaveOutlined,
   PlusOutlined,
   MehOutlined,
-  SmileOutlined,
+  CompassOutlined,
   CheckSquareTwoTone,
   CarryOutTwoTone,
   MailTwoTone,
@@ -27,7 +27,7 @@ import {
   CalendarOutlined,
   HeartTwoTone, MoneyCollectTwoTone
 } from '@ant-design/icons'
-import { App, Badge, Empty, Flex, Button, Drawer , Space, Radio, Table, Tabs, Divider, Tag, Tooltip, Row, Col, Segmented, Tree, Typography, Input, Descriptions, Checkbox } from 'antd'
+import { App, Badge, Empty, Flex, Button, Drawer , Space, Radio, Table, Tabs, Divider, Tag, Tooltip, List, Dropdown , Segmented, Tree, Typography, Input, Descriptions, Checkbox, Layout,  Row, Col  } from 'antd'
 import dayjs from 'dayjs'
 import { useCallback, useEffect, useState } from 'react'
 import { Link } from 'react-router-dom'
@@ -340,7 +340,7 @@ function Follow() {
   const [mailSubject, setSubject] = useState('');
 
   const [openOrder, setOpenOrder] = useState(false);
-
+const [collapsed, setCollapsed] = useState(false)
 
   const [formValues, setFormValues] = useFormStore(useShallow((state) => [state.orderFollowForm, state.setOrderFollowForm]))
   const [advanceChecked, toggleAdvance] = useFormStore(useShallow((state) => [state.orderFollowAdvanceChecked, state.setOrderFollowAdvanceChecked]))
@@ -358,9 +358,11 @@ function Follow() {
 
   return (
     <>
-      <Row gutter={16}>
+  <Layout>
-        <Col span={4}>
+    <Layout.Sider width='300' style={{
-          <Flex justify='start' align='start' vertical>
+  backgroundColor: '#fff',
+}}>
+      <Flex justify='start' align='start' vertical>
             <Segmented className='w-full' block shape='round' options={['AH', 'CH', 'GH']} />
             <Tree
               showIcon
@@ -444,6 +446,28 @@ function Follow() {
                       title: '5月',
                       key: '0-3-4',
                       icon: <FolderTwoTone />,
+                      children: [
+                        {
+                          title: 'Albee240422193452',
+                          key: 'Albee240422193452',
+                        },
+                        {
+                          title: 'Albee240422193285',
+                          key: 'Albee240422193285',
+                        },
+                        {
+                          title: 'Albee240422193752',
+                          key: 'Albee240422193752',
+                        },
+                        {
+                          title: 'Albee2404221934583',
+                          key: 'Albee2404221934583',
+                        },
+                        {
+                          title: 'Albee2404221937836',
+                          key: 'Albee2404221937836',
+                        },
+                      ],
                     },
                   ],
                 },
@@ -459,11 +483,37 @@ function Follow() {
                 },
               ]}
             />
-          </Flex>
+          </Flex></Layout.Sider>
-        </Col>
+    <Layout.Content>
-        <Col span={14}>
+
-          <div className='flex gap-1 items-center'>
+      <Layout>
-            <Button onClick={() => {}} icon={<PlusOutlined />} type={'primary'} ghost shape={'circle'} size='small' />
+  <Layout.Header className='bg-white h-auto px-1 flex gap-1 items-center'>
+
+            <Button onClick={() => {}} icon={<PlusOutlined />} type={'primary'}>新邮件</Button>
+
+<Dropdown menu={{ items: [
+  {
+    key: '1',
+    label: '一催：模板一',
+  },
+  {
+    key: '2',
+    label: '一催：模板二',
+  },
+  {
+    key: '3',
+    label: '一催：模板三',
+  },
+]}} trigger={['click']}>
+
+    <Button>
+        <Space>
+          使用模板
+          <DownOutlined />
+        </Space>
+      </Button>
+  </Dropdown>
+            <Button onClick={() => {}} >多选</Button>
             <Input.Search
               className=''
               allowClear
@@ -473,8 +523,190 @@ function Follow() {
               }}
               placeholder={`名称/号码/订单号`}
             />
-          </div>
+            <Button onClick={() => {}} >高级搜索</Button>
-          <Table
+</Layout.Header>
+  <Layout>
+    <Layout.Content>
+
+<Row>
+      <Col className='bg-white' span={16} style={{height: 'calc(100vh - 196px)', overflowY: 'auto'}}>
+<List
+    itemLayout="vertical"
+    size="small"
+    pagination={false}
+    dataSource={[
+              {
+                key: Math.random().toString(36).substring(2, 9),
+                description: 'Fran Grundman <frangrundman@rogers.com>',
+                title: '250520-LSS250429038 团的 变更 <20>确认：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>,
+        // ]}
+      >
+        <List.Item.Meta
+          title={<a href={item.href} onClick={() => setSubject(item.title)}>{item.title}</a>}
+          description={item.description + ' ' + item.mailDate}
+        />
+        {item.content}LSS250501006, Thailand
+      </List.Item>
+    )}
+  /></Col>
+      <Col span={8}>
+
+  <div>
+    <Flex gap="small">
+            <Space.Compact>
+          <Button color="primary" variant="solid" onClick={() => {
+            window.open(`/email/reply/5190495`, `${1}-${0}`,'left=20,width=1000')
+          }}>
+            回复
+          </Button>
+          <Button color="primary" variant="outlined" onClick={() => {
+            window.open(`/email/reply/5220965`, `${2}-${0}`,'left=20,width=1000')
+          }}>
+            回复全部
+          </Button>
+          <Button color="primary" variant="outlined"  onClick={() => {
+            window.open(`/email/forward/5128754`, `${3}-${0}`,'left=20,width=1000')
+          }}>
+            转发
+          </Button>
+          </Space.Compact>
+          <Button color="cyan" variant="outlined">
+            已处理
+          </Button>
+          <Button color="cyan" variant="outlined">
+            绑定订单
+          </Button>
+          </Flex>
+     <Descriptions column={2} title={mailSubject} 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',
+  },
+]} />
+        <p>{Math.random().toString(36).substring(2, 9)}Some contents...</p>
+        <p>Some {Math.random().toString(36).substring(2, 9)}contents...</p>
+        <p>Some contents...{Math.random().toString(36).substring(2, 9)}</p>
+  </div></Col>
+    </Row>
+          {/* <Table
           onRow={(record) => {
     return {
       onClick: (event) => {console.info(event)}, // 点击行
@@ -485,40 +717,48 @@ function Follow() {
     };
   }}
             pagination={false}
+    sticky={{ offsetHeader: 64 }}
             columns={[
-              {
-                title: '收/发件人',
-                dataIndex: 'name',
-                key: 'name',
-                render: (text) => <a>{text}</a>,
-              },
               {
                 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>
@@ -539,7 +779,7 @@ function Follow() {
               {
                 key: Math.random().toString(36).substring(2, 9),
                 name: 'Fran Grundman <frangrundman@rogers.com>',
-                subject: '【阿里云邮】弱密改密提醒 ' + Math.random().toString(36).substring(2, 9),
+                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',
@@ -633,10 +873,10 @@ function Follow() {
                 country: 'Thailand',
               },
             ]}
-          />
+          /> */}
-{/*
+</Layout.Content>
-          <Divider />
+  </Layout>
-
+  {/* <Layout.Footer className='p-1 border-solid border rounded border-gray-300'>
 
           <Descriptions title="Your Thailand Private tour by 'Asia Highlights' 超长主题怎么办？？？？？？？？？？？？到框框到得奖看到" items={[
   {
@@ -674,12 +914,14 @@ function Follow() {
             绑定订单
           </Button>
           </Flex>
-<div className='border-solid border rounded border-gray-300'>
           <div id='__preHtml__' className='whitespace-pre-wrap break-words' dangerouslySetInnerHTML={{ __html: '邮件内容。。。。。<br/>换行了。。。看看 ' }}></div>
-          </div> */}
+          </Layout.Footer> */}
-        </Col>
+</Layout>
-        <Col span={6}>
+    </Layout.Content>
-            <Flex gap={6} vertical={true} justify='space-between'>
+    <Layout.Sider zeroWidthTriggerStyle={{top: '30px'}} width='280' style={{
+  backgroundColor: '#fff',
+}} collapsible collapsed={collapsed} onCollapse={value => setCollapsed(value)} collapsedWidth={0} reverseArrow={true}>
+      <Flex gap={6} vertical={true} justify='space-between'>
               <Typography.Text>
                 <FieldNumberOutlined className='pr-1' />
                 LSS250501006
@@ -690,6 +932,10 @@ function Follow() {
                 <UserOutlined className=' pr-1' />
                 Jorgina(R1)
               </Typography.Text>
+              <Typography.Text>
+                <CompassOutlined className=' pr-1' />
+                Thailand
+              </Typography.Text>
               <Typography.Text>
                 <PhoneOutlined className=' pr-1' />
                 <Button type='link' size={'small'} onClick={() => {}}>
@@ -725,7 +971,7 @@ function Follow() {
 					</Divider>
 					<p className="p-2 overflow-auto m-0 break-words whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: 'orderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detailorderDetail.order_detail' }}></p>
 <Space.Compact block>
-      <Input addonBefore="附加信息" style={{ width: 'calc(100% - 200px)' }} />
+      <Input addonBefore="附加信息" />
       <Button icon={<SaveOutlined />} />
     </Space.Compact>
           <Flex gap="small">
@@ -734,15 +980,8 @@ function Follow() {
             }}>
             订单状态
           </Button>
-          <Button color="cyan" variant="outlined">
+          </Flex></Layout.Sider>
-            提醒中心
+  </Layout>
-          </Button>
-          </Flex>
-
-
-
-        </Col>
-      </Row>
 
 <Drawer
         title={mailSubject}
@@ -791,8 +1030,8 @@ function Follow() {
   },
 ]} />
         <p>{Math.random().toString(36).substring(2, 9)}Some contents...</p>
-        <p>Some contents...</p>
+        <p>Some {Math.random().toString(36).substring(2, 9)}contents...</p>
-        <p>Some contents...</p>
+        <p>Some contents...{Math.random().toString(36).substring(2, 9)}</p>
       </Drawer>
 
       <Drawer