perf: 调整手机、WA 样式

src/components/OrderProfile.jsx

@@ -1,66 +1,66 @@
-import {
+import { WhatsAppOutlined, FileAddOutlined, MailOutlined, PhoneOutlined, UserOutlined, FieldNumberOutlined, CompassOutlined, CalendarOutlined, EditOutlined, CheckOutlined } from '@ant-design/icons'
-  WhatsAppOutlined, FileAddOutlined, MailOutlined,
-  PhoneOutlined,
-  UserOutlined,
-  FieldNumberOutlined,
-  SaveOutlined, CompassOutlined, CalendarOutlined,
-  HeartTwoTone,
-  MoneyCollectTwoTone,
-  FolderOutlined,
-  DeleteOutlined, EditOutlined,
-  FormOutlined
-} from '@ant-design/icons'
 
-import { useCallback, useEffect, useState } from 'react'
+import { useEffect, useState } from 'react'
-import {
+import { App, Flex, Select, Tooltip, Tabs, Button, Divider, Typography, Skeleton, Checkbox } from 'antd'
-  Flex,Select,Tooltip,
+import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions } from '@/stores/OrderStore'
-  Button, Space, Divider, Typography,
+import { copy } from '@/utils/commons'
-  Input, Radio,Skeleton ,Checkbox,
-} from 'antd'
-import { InboxIcon, MailCheckIcon, MailUnreadIcon, SendPlaneFillIcon } from '@/components/Icons'
-import { useOrderStore, OrderLabelDefaultOptions, OrderStatusDefaultOptions, remindStatusOptions, fetchSetRemindStateAction, remindStatusOptionsMapped } from "@/stores/OrderStore";
-import { copy, isEmpty } from "@/utils/commons";
 const OrderProfile = ({ coliSN, ...props }) => {
+  const { notification, message } = App.useApp()
 
-	const [loading, setLoading] = useState(false);
+  const [loading, setLoading] = useState(false)
-    const orderLabelOptions = copy(OrderLabelDefaultOptions);
+  const orderLabelOptions = copy(OrderLabelDefaultOptions)
-    orderLabelOptions.unshift({ value: 0, label: "未设置", disabled: true });
+  orderLabelOptions.unshift({ value: 0, label: '未设置', disabled: true })
 
-	const orderStatusOptions = copy(OrderStatusDefaultOptions);
+  const orderStatusOptions = copy(OrderStatusDefaultOptions)
-  const [
+  const [orderDetail, customerDetail, fetchOrderDetail, setOrderPropValue, appendOrderComment] = useOrderStore((s) => [
-    orderDetail, customerDetail, lastQuotation, quotationList, fetchOrderDetail, setOrderPropValue, appendOrderComment, fetchOtherEmail, otherEmailList, fetchHistoryOrder
+    s.orderDetail,
-   ] = useOrderStore(s => [
+    s.customerDetail,
-    s.orderDetail, s.customerDetail, s.lastQuotation, s.quotationList, s.fetchOrderDetail, s.setOrderPropValue, s.appendOrderComment, s.fetchOtherEmail, s.otherEmailList, s.fetchHistoryOrder
+    s.fetchOrderDetail,
+    s.setOrderPropValue,
+    s.appendOrderComment,
   ])
 
   useEffect(() => {
     if (coliSN) {
-			setLoading(true);
+      setLoading(true)
       fetchOrderDetail(coliSN)
-        .then(result => {
+        .then((result) => {
           console.info(result)
         })
         .finally(() => setLoading(false))
-				// .catch(reason => {
+        .catch((reason) => {
-				// 	notification.error({
+          notification.error({
-				// 		message: "查询出错",
+            message: '查询出错',
-				// 		description: reason.message,
+            description: reason.message,
-				// 		placement: "top",
+            placement: 'top',
-				// 		duration: 60,
+            duration: 60,
-				// 	});
+          })
-				// });
+        })
     }
     return () => {}
-	}, [coliSN]);
+  }, [coliSN])
 
   const regularText = () => {
-    if (orderDetail.buytime > 0) return "(R" + orderDetail.buytime + ")"
+    if (orderDetail.buytime > 0) return '(R' + orderDetail.buytime + ')'
     return ''
   }
 
-
   return (
     <>
+      {/* <Tabs
+        tabPosition={'right'}
+        onTabClick={(key) => {
+          console.info(key)
+        }}
+        items={Array.from({ length: 3 }).map((_, i) => {
+          const id = String(i + 1)
+          return {
+            label: `Tab ${id}`,
+            key: id,
+            children: `Content of Tab ${id}`,
+          }
+        })}
+      /> */}
       <Skeleton active loading={loading}>
         <Flex gap='small' vertical={true} justify='space-between'>
           <Typography.Text>
@@ -75,62 +75,70 @@ const OrderProfile = ({coliSN, ...props}) => {
             <CompassOutlined className=' pr-1' />
             Thailand
           </Typography.Text>
-        <Typography.Text>
+
+          <Typography.Link href={'/callcenter/call/' + customerDetail.phone}>
             <PhoneOutlined className=' pr-1' />
-          <Button type='link' size={'small'} onClick={() => {}}>
             {customerDetail.phone}
-          </Button>
+          </Typography.Link>
-        </Typography.Text>
           <Typography.Text>
             <MailOutlined className='pr-1' />
             {customerDetail.email}
           </Typography.Text>
-        <Typography.Text>
+          <Typography.Link
+            href='#'
+            onClick={() => {
+              console.info('whatsapp clicked.')
+            }}>
             <WhatsAppOutlined className=' pr-1' />
-          <Button type='link' size={'small'} onClick={() => {}}>
             {customerDetail.whatsapp_phone_number}
-          </Button>
+          </Typography.Link>
-        </Typography.Text>
           <Typography.Text>
+            <Tooltip title='出发日期'>
               <CalendarOutlined className='pr-1' />
-          <span>出发日期：</span>2025-09-18，已下计划
+              2025-09-18
+            </Tooltip>
+          </Typography.Text>
+          <Typography.Text>
+            <Tooltip title='计划'>
+              <CheckOutlined className='pr-1' />
+              已下计划
+            </Tooltip>
           </Typography.Text>
-
         </Flex>
-      <Divider orientation="left">
+        <Divider orientation='left'>
           <Typography.Text strong>订单状态</Typography.Text>
         </Divider>
-          <Flex gap='small' vertical={true} justify='space-between'>
+        <Flex gap='small' vertical={false} justify='space-between'>
-      <Select className={`[&_.ant-select-selection-item]:text-gray-950`}
+          <Select
-								key={"orderlabel"}
+            className={`[&_.ant-select-selection-item]:text-gray-950`}
-								size="small"
+            key={'orderlabel'}
+            size='small'
             style={{
-									width: "100%",
+              width: '100%',
-								}}
-								variant="underlined"
-								onSelect={value => {
             }}
+            variant='underlined'
+            onSelect={(value) => {}}
             value={orderDetail.tags}
             options={orderLabelOptions}
           />
-              <Select className={`[&_.ant-select-selection-item]:text-gray-950`}
+          <Select
-								key={"orderstatus"}
+            className={`[&_.ant-select-selection-item]:text-gray-950`}
-								size="small"
+            key={'orderstatus'}
+            size='small'
             style={{
-									width: "100%",
+              width: '100%',
-								}}
-								variant="underlined"
-								onSelect={value => {
             }}
+            variant='underlined'
+            onSelect={(value) => {}}
             value={orderDetail.states}
             options={orderStatusOptions}
           />
         </Flex>
 
-              <Divider orientation="left">
+        <Divider orientation='left'>
           <Typography.Text strong>催信</Typography.Text>
         </Divider>
-          <Checkbox.Group key='substatus' className="px-2"  options={remindStatusOptions}  />
+        <Checkbox.Group key='substatus' className='px-2' options={remindStatusOptions} />
 
         <Divider orientation='left'>
           <Typography.Text strong>表单信息</Typography.Text>
@@ -138,21 +146,19 @@ const OrderProfile = ({coliSN, ...props}) => {
             <FileAddOutlined className='pl-1' />
           </Tooltip>
         </Divider>
-      <p className="p-2 overflow-auto m-0 break-words whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: orderDetail.order_detail }}></p>
+        <p className='p-2 overflow-auto m-0 break-words whitespace-pre-wrap' dangerouslySetInnerHTML={{ __html: orderDetail.order_detail }}></p>
 
-        <Divider orientation="left">
+        <Divider orientation='left'>
           <Typography.Text strong>特殊要求</Typography.Text>
         </Divider>
-        <Typography.Text>
+        <Typography.Text>{orderDetail.customer_request}</Typography.Text>
-          {orderDetail.customer_request}
+        <Divider orientation='left'>
-        </Typography.Text>
-        <Divider orientation="left">
           <Typography.Text strong>外联备注</Typography.Text>
+          <Tooltip title='修改'>
+            <EditOutlined className='pl-1' />
+          </Tooltip>
         </Divider>
-        <Typography.Text>
+        <Typography.Text>{orderDetail.wl_memo}</Typography.Text>
-          {orderDetail.wl_memo}
-        </Typography.Text>
-
 
         <Divider orientation='left'>
           <Typography.Text strong>附加信息</Typography.Text>
@@ -160,9 +166,7 @@ const OrderProfile = ({coliSN, ...props}) => {
             <EditOutlined className='pl-1' />
           </Tooltip>
         </Divider>
-      <Typography.Text>
+        <Typography.Text>泰国马来水灯节</Typography.Text>
-          泰国马来水灯节
-      </Typography.Text>
       </Skeleton>
     </>
   )