perf：调整表单信息顺序；增加骨架屏

src/components/OrderProfile.jsx

@@ -15,13 +15,14 @@ import { useCallback, useEffect, useState } from 'react'
 import {
   Flex,Select,Tooltip,
   Button, Space, Divider, Typography,
-  Input, Radio,Drawer,Checkbox,
+  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 [loading, setLoading] = useState(false);
     const orderLabelOptions = copy(OrderLabelDefaultOptions);
     orderLabelOptions.unshift({ value: 0, label: "未设置", disabled: true });
 
@@ -34,12 +35,12 @@ const OrderProfile = ({coliSN, ...props}) => {
 
   useEffect(() => {
 		if (coliSN) {
-			// setLoading(true);
+			setLoading(true);
 			fetchOrderDetail(coliSN)
         .then(result => {
           console.info(result)
         })
-				// .finally(() => setLoading(false))
+				.finally(() => setLoading(false))
 				// .catch(reason => {
 				// 	notification.error({
 				// 		message: "查询出错",
@@ -60,6 +61,7 @@ const OrderProfile = ({coliSN, ...props}) => {
 
   return (
     <>
+    <Skeleton active loading={loading}>
       <Flex gap='small' vertical={true} justify='space-between'>
         <Typography.Text>
           <FieldNumberOutlined className='pr-1' />
@@ -94,19 +96,8 @@ const OrderProfile = ({coliSN, ...props}) => {
           <span>出发日期：</span>2025-09-18，已下计划
         </Typography.Text>
 
-        <Divider orientation="left">
-            <Typography.Text strong>特殊要求</Typography.Text>
-          </Divider>
-        <Typography.Text>
-          {orderDetail.customer_request}
-        </Typography.Text>
-        <Divider orientation="left">
-            <Typography.Text strong>外联备注</Typography.Text>
-          </Divider>
-        <Typography.Text>
-          {orderDetail.wl_memo}
-        </Typography.Text>
-        <Divider orientation="left">
+      </Flex>
+      <Divider orientation="left">
             <Typography.Text strong>订单状态</Typography.Text>
           </Divider>
           <Flex gap='small' vertical={true} justify='space-between'>
@@ -136,13 +127,12 @@ const OrderProfile = ({coliSN, ...props}) => {
 							/>
               </Flex>
 
-      </Flex>
               <Divider orientation="left">
             <Typography.Text strong>催信</Typography.Text>
           </Divider>
           <Checkbox.Group key='substatus' className="px-2"  options={remindStatusOptions}  />
 
-      <Divider orientation='left'>
+<Divider orientation='left'>
         <Typography.Text strong>表单信息</Typography.Text>
         <Tooltip title='添加'>
         <FileAddOutlined className='pl-1' />
@@ -150,6 +140,20 @@ const OrderProfile = ({coliSN, ...props}) => {
       </Divider>
       <p className="p-2 overflow-auto m-0 break-words whitespace-pre-wrap" dangerouslySetInnerHTML={{ __html: orderDetail.order_detail }}></p>
 
+        <Divider orientation="left">
+            <Typography.Text strong>特殊要求</Typography.Text>
+          </Divider>
+        <Typography.Text>
+          {orderDetail.customer_request}
+        </Typography.Text>
+        <Divider orientation="left">
+            <Typography.Text strong>外联备注</Typography.Text>
+          </Divider>
+        <Typography.Text>
+          {orderDetail.wl_memo}
+        </Typography.Text>
+
+
       <Divider orientation='left'>
         <Typography.Text strong>附加信息</Typography.Text>
         <Tooltip title='修改'>
@@ -159,6 +163,7 @@ const OrderProfile = ({coliSN, ...props}) => {
       <Typography.Text>
           泰国马来水灯节
       </Typography.Text>
+      </Skeleton>
     </>
   )
 }