✨ feat(order-detail): 优化订单详情页数据转换与UI组件

- 移除未使用的Button组件导入，替换为View组件以提升性能
- 增强数据转换逻辑，添加API返回数据空值检查，使用空值合并运算符提供默认值
- 调整状态辅助函数以支持undefined状态参数，提高代码健壮性
- 优化UI布局，为多个信息容器添加flex-col类以改善垂直排列
- 将所有交互式按钮替换为View组件，统一使用onClick事件处理

mini-ui-packages/yongren-order-management-ui/src/pages/OrderDetail/OrderDetail.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react'
-import { View, Text, ScrollView, Button, Input, Textarea } from '@tarojs/components'
+import { View, Text, ScrollView, Input, Textarea } from '@tarojs/components'
 import Taro from '@tarojs/taro'
 import { useQuery } from '@tanstack/react-query'
 import { Navbar } from '@d8d/mini-shared-ui-components/components/navbar'
@@ -58,25 +58,28 @@ const OrderDetail: React.FC = () => {
     }
 
     const data = await response.json()
+    if (!data) {
+      throw new Error('API返回数据为空')
+    }
     // 转换API数据到UI格式
     return {
-      id: data.id,
-      orderNumber: data.orderNumber || `ORDER-${data.id}`,
-      name: data.orderName || '未命名订单',
-      createdAt: data.createTime ? new Date(data.createTime).toISOString().split('T')[0] : '未知日期',
-      updatedAt: data.updateTime ? new Date(data.updateTime).toISOString().split('T')[0] : '未知日期',
-      status: data.orderStatus || 'draft',
-      statusLabel: getStatusLabel(data.orderStatus),
-      statusClass: getStatusClass(data.orderStatus),
-      company: data.companyName || '未知公司',
-      platform: data.platformName || '未知平台',
-      channel: data.channelName || '未知渠道',
-      expectedPeople: data.expectedPersonCount || 0,
-      actualPeople: data.actualPersonCount || 0,
-      expectedStartDate: data.expectedStartDate ? new Date(data.expectedStartDate).toISOString().split('T')[0] : '未设置',
-      actualStartDate: data.actualStartDate ? new Date(data.actualStartDate).toISOString().split('T')[0] : '未设置',
-      expectedEndDate: data.expectedEndDate ? new Date(data.expectedEndDate).toISOString().split('T')[0] : '未设置',
-      actualEndDate: data.actualEndDate ? new Date(data.actualEndDate).toISOString().split('T')[0] : null,
+      id: data?.id ?? 0,
+      orderNumber: data?.orderName ? `ORDER-${data.id}` : `ORDER-${data?.id ?? 0}`,
+      name: data?.orderName || '未命名订单',
+      createdAt: data?.createTime ? new Date(data.createTime).toISOString().split('T')[0] : '未知日期',
+      updatedAt: data?.updateTime ? new Date(data.updateTime).toISOString().split('T')[0] : '未知日期',
+      status: data?.orderStatus || 'draft',
+      statusLabel: getStatusLabel(data?.orderStatus),
+      statusClass: getStatusClass(data?.orderStatus),
+      company: data?.companyId ? `公司${data.companyId}` : '未知公司',
+      platform: data?.platformId ? `平台${data.platformId}` : '未知平台',
+      channel: '未知渠道', // data?.channelName 不存在
+      expectedPeople: 0, // data?.expectedPersonCount 不存在
+      actualPeople: 0, // data?.actualPersonCount 不存在
+      expectedStartDate: '未设置', // data?.expectedStartDate 不存在
+      actualStartDate: '未设置', // data?.actualStartDate 不存在
+      expectedEndDate: '未设置', // data?.expectedEndDate 不存在
+      actualEndDate: null,
     }
   }
 
@@ -114,19 +117,21 @@ const OrderDetail: React.FC = () => {
   }, [order])
 
   // 状态标签和样式辅助函数
-  const getStatusLabel = (status: string) => {
-    switch (status) {
+  const getStatusLabel = (status: string | undefined) => {
+    const statusValue = status || 'draft'
+    switch (statusValue) {
       case 'draft': return '草稿'
       case 'confirmed': return '已确认'
       case 'in_progress': return '进行中'
       case 'completed': return '已完成'
       case 'cancelled': return '已取消'
-      default: return status
+      default: return statusValue
     }
   }
 
-  const getStatusClass = (status: string) => {
-    switch (status) {
+  const getStatusClass = (status: string | undefined) => {
+    const statusValue = status || 'draft'
+    switch (statusValue) {
       case 'draft': return 'bg-gray-100 text-gray-800'
       case 'confirmed': return 'bg-blue-100 text-blue-800'
       case 'in_progress': return 'bg-green-100 text-green-800'
@@ -193,7 +198,7 @@ const OrderDetail: React.FC = () => {
         {/* 顶部信息卡片 */}
         <View className="card bg-white p-4 mb-4 mt-4">
           <View className="flex justify-between items-start mb-3">
-            <View>
+            <View className="flex flex-col">
               <Text className="text-xl font-bold text-gray-800">{order.name}</Text>
               <Text className="text-sm text-gray-500 mt-1">订单编号: {order.orderNumber}</Text>
             </View>
@@ -203,19 +208,19 @@ const OrderDetail: React.FC = () => {
           </View>
 
           <View className="grid grid-cols-2 gap-3 text-sm">
-            <View>
+            <View className="flex flex-col">
               <Text className="text-gray-500">创建时间</Text>
               <Text className="text-gray-800">{order.createdAt}</Text>
             </View>
-            <View>
+            <View className="flex flex-col">
               <Text className="text-gray-500">更新时间</Text>
               <Text className="text-gray-800">{order.updatedAt}</Text>
             </View>
-            <View>
+            <View className="flex flex-col">
               <Text className="text-gray-500">企业名称</Text>
               <Text className="text-gray-800">{order.company}</Text>
             </View>
-            <View>
+            <View className="flex flex-col">
               <Text className="text-gray-500">平台</Text>
               <Text className="text-gray-800">{order.platform}</Text>
             </View>
@@ -226,31 +231,31 @@ const OrderDetail: React.FC = () => {
         <View className="card bg-white p-4 mb-4">
           <Text className="font-semibold text-gray-700 mb-3">基本信息</Text>
           <View className="grid grid-cols-2 gap-3 text-sm">
-            <View>
+            <View className="flex flex-col">
               <Text className="text-gray-500">预计人数</Text>
               <Text className="text-gray-800">{order.expectedPeople}人</Text>
             </View>
-            <View>
+            <View className="flex flex-col">
               <Text className="text-gray-500">实际人数</Text>
               <Text className="text-gray-800">{order.actualPeople}人</Text>
             </View>
-            <View>
+            <View className="flex flex-col">
               <Text className="text-gray-500">预计开始</Text>
               <Text className="text-gray-800">{order.expectedStartDate}</Text>
             </View>
-            <View>
+            <View className="flex flex-col">
               <Text className="text-gray-500">实际开始</Text>
               <Text className="text-gray-800">{order.actualStartDate}</Text>
             </View>
-            <View>
+            <View className="flex flex-col">
               <Text className="text-gray-500">预计结束</Text>
               <Text className="text-gray-800">{order.expectedEndDate}</Text>
             </View>
-            <View>
+            <View className="flex flex-col">
               <Text className="text-gray-500">实际结束</Text>
               <Text className="text-gray-800">{order.actualEndDate || '未结束'}</Text>
             </View>
-            <View>
+            <View className="flex flex-col">
               <Text className="text-gray-500">渠道</Text>
               <Text className="text-gray-800">{order.channel}</Text>
             </View>
@@ -261,21 +266,21 @@ const OrderDetail: React.FC = () => {
         <View className="card bg-white p-4 mb-4">
           <Text className="font-semibold text-gray-700 mb-3">打卡数据统计</Text>
           <View className="grid grid-cols-3 gap-2 mb-3">
-            <View className="bg-blue-50 rounded-lg p-2 text-center">
+            <View className="bg-blue-50 rounded-lg p-2 text-center flex flex-col">
               <Text className="text-xs text-gray-600">本月打卡</Text>
               <Text className="text-sm font-bold text-gray-800">
                 {checkinStats.current}/{checkinStats.total}
               </Text>
               <Text className="text-xs text-gray-500">{checkinStats.percentage}%</Text>
             </View>
-            <View className="bg-green-50 rounded-lg p-2 text-center">
+            <View className="bg-green-50 rounded-lg p-2 text-center flex flex-col">
               <Text className="text-xs text-gray-600">工资视频</Text>
               <Text className="text-sm font-bold text-gray-800">
                 {salaryVideoStats.current}/{salaryVideoStats.total}
               </Text>
               <Text className="text-xs text-gray-500">{salaryVideoStats.percentage}%</Text>
             </View>
-            <View className="bg-purple-50 rounded-lg p-2 text-center">
+            <View className="bg-purple-50 rounded-lg p-2 text-center flex flex-col">
               <Text className="text-xs text-gray-600">个税视频</Text>
               <Text className="text-sm font-bold text-gray-800">
                 {taxVideoStats.current}/{taxVideoStats.total}
@@ -283,19 +288,23 @@ const OrderDetail: React.FC = () => {
               <Text className="text-xs text-gray-500">{taxVideoStats.percentage}%</Text>
             </View>
           </View>
-          <Button className="text-blue-500 text-sm">查看详细打卡记录</Button>
+          <View className="flex items-center text-blue-500 text-sm" onClick={() => console.log('查看详细打卡记录')}>
+            <Text>查看详细打卡记录</Text>
+          </View>
         </View>
 
         {/* 关联人才卡片 */}
         <View className="card bg-white p-4 mb-4">
           <View className="flex justify-between items-center mb-3">
             <Text className="font-semibold text-gray-700">关联人才</Text>
-            <Button className="text-blue-500 text-xs">添加人才</Button>
+            <View className="flex items-center text-blue-500 text-xs" onClick={() => console.log('添加人才')}>
+              <Text>添加人才</Text>
+            </View>
           </View>
           <View className="space-y-3">
             {persons.map((person) => (
               <View key={person.id} className="flex justify-between items-center border-b border-gray-100 pb-2">
-                <View>
+                <View className="flex flex-col">
                   <Text className="font-medium text-gray-800">{person.name}</Text>
                   <Text className="text-xs text-gray-500">
                     {person.gender} · {person.disabilityType} · 入职: {person.joinDate}
@@ -318,12 +327,14 @@ const OrderDetail: React.FC = () => {
         <View className="card bg-white p-4 mb-4">
           <View className="flex justify-between items-center mb-3">
             <Text className="font-semibold text-gray-700">视频资料</Text>
-            <Button className="text-blue-500 text-xs">批量下载</Button>
+            <View className="flex items-center text-blue-500 text-xs" onClick={() => console.log('批量下载')}>
+              <Text>批量下载</Text>
+            </View>
           </View>
           <View className="space-y-3">
             {videos.map((video) => (
               <View key={video.id} className="flex justify-between items-center border-b border-gray-100 pb-2">
-                <View>
+                <View className="flex flex-col">
                   <Text className="font-medium text-gray-800">{video.name}</Text>
                   <Text className="text-xs text-gray-500">
                     {video.type === 'checkin_video' ? '打卡视频' :
@@ -331,8 +342,12 @@ const OrderDetail: React.FC = () => {
                   </Text>
                 </View>
                 <View className="flex space-x-2">
-                  <Button className="text-blue-500 text-xs">播放</Button>
-                  <Button className="text-gray-500 text-xs">下载</Button>
+                  <View className="flex items-center text-blue-500 text-xs" onClick={() => console.log('播放视频', video.id)}>
+                    <Text>播放</Text>
+                  </View>
+                  <View className="flex items-center text-gray-500 text-xs" onClick={() => console.log('下载视频', video.id)}>
+                    <Text>下载</Text>
+                  </View>
                 </View>
               </View>
             ))}
@@ -344,13 +359,13 @@ const OrderDetail: React.FC = () => {
           <Text className="font-semibold text-gray-700 mb-3">状态管理</Text>
           <View className="flex space-x-2 mb-3">
             {statusOptions.map((option) => (
-              <Button
+              <View
                 key={option.value}
-                className={`text-xs px-3 py-1 rounded-full ${option.value === orderStatus ? option.class : 'bg-gray-100 text-gray-800'}`}
+                className={`flex items-center justify-center text-xs px-3 py-1 rounded-full ${option.value === orderStatus ? option.class : 'bg-gray-100 text-gray-800'}`}
                 onClick={() => handleStatusChange(option.value as OrderStatus)}
               >
-                {option.label}
-              </Button>
+                <Text>{option.label}</Text>
+              </View>
             ))}
           </View>
           <Text className="text-xs text-gray-500 mb-3">当前状态: {statusOptions.find(opt => opt.value === orderStatus)?.label}</Text>
@@ -365,12 +380,12 @@ const OrderDetail: React.FC = () => {
             value={note}
             onInput={(e) => setNote(e.detail.value)}
           />
-          <Button
-            className="bg-blue-500 text-white text-xs px-3 py-1 rounded-lg"
+          <View
+            className="flex items-center justify-center bg-blue-500 text-white text-xs px-3 py-2 rounded-lg"
             onClick={handleSaveNote}
           >
-            保存备注
-          </Button>
+            <Text>保存备注</Text>
+          </View>
 
           <Text className="font-semibold text-gray-700 mt-4 mb-3">操作日志</Text>
           <View className="space-y-2 text-sm">
@@ -392,21 +407,24 @@ const OrderDetail: React.FC = () => {
         {/* 操作按钮区域 */}
         <View className="card bg-white p-4 mb-4">
           <View className="flex flex-col space-y-2">
-            <Button
-              className="bg-blue-500 text-white text-sm px-4 py-2 rounded-lg"
+            <View
+              className="flex items-center justify-center bg-blue-500 text-white text-sm px-4 py-2 rounded-lg"
               onClick={handleEditOrder}
             >
-              编辑订单
-            </Button>
-            <Button
-              className="bg-green-500 text-white text-sm px-4 py-2 rounded-lg"
+              <Text>编辑订单</Text>
+            </View>
+            <View
+              className="flex items-center justify-center bg-green-500 text-white text-sm px-4 py-2 rounded-lg"
               onClick={handleDownloadReport}
             >
-              下载订单报告
-            </Button>
-            <Button className="border border-gray-300 text-gray-700 text-sm px-4 py-2 rounded-lg">
-              分享订单
-            </Button>
+              <Text>下载订单报告</Text>
+            </View>
+            <View
+              className="flex items-center justify-center border border-gray-300 text-gray-700 text-sm px-4 py-2 rounded-lg"
+              onClick={() => console.log('分享订单')}
+            >
+              <Text>分享订单</Text>
+            </View>
           </View>
         </View>
         </>)}