feat(dealer): 重构分销中心页面

- 优化了分销中心首页、分销订单、提现申请和团队管理页面的视觉和功能- 新增了渐变设计指南和主题选择器组件
-改进了数据展示、功能导航和用户体验

src/dealer/orders/index.tsx

@@ -1,13 +1,140 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { View, Text } from '@tarojs/components'
-import { Cell, Empty } from '@nutui/nutui-react-taro'
+import { Cell, Empty, Tabs, Tag, Button, PullToRefresh } from '@nutui/nutui-react-taro'
 
 const DealerOrders: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('0')
+  const [refreshing, setRefreshing] = useState(false)
+
+  // 模拟订单数据
+  const mockOrders = [
+    {
+      id: '1',
+      orderNo: 'DD202412180001',
+      customerName: '张三',
+      amount: '299.00',
+      commission: '29.90',
+      status: 'completed',
+      createTime: '2024-12-18 10:30:00'
+    },
+    {
+      id: '2',
+      orderNo: 'DD202412180002',
+      customerName: '李四',
+      amount: '599.00',
+      commission: '59.90',
+      status: 'pending',
+      createTime: '2024-12-18 14:20:00'
+    }
+  ]
+
+  const getStatusText = (status: string) => {
+    switch (status) {
+      case 'completed': return '已完成'
+      case 'pending': return '待结算'
+      case 'cancelled': return '已取消'
+      default: return '未知'
+    }
+  }
+
+  const getStatusColor = (status: string) => {
+    switch (status) {
+      case 'completed': return 'success'
+      case 'pending': return 'warning'
+      case 'cancelled': return 'danger'
+      default: return 'default'
+    }
+  }
+
+  const handleRefresh = async () => {
+    setRefreshing(true)
+    // 模拟刷新
+    setTimeout(() => {
+      setRefreshing(false)
+    }, 1000)
+  }
+
+  const renderOrderItem = (order: any) => (
+    <View key={order.id} className="bg-white rounded-lg p-4 mb-3 shadow-sm">
+      <View className="flex justify-between items-start mb-3">
+        <View>
+          <Text className="font-semibold text-gray-800 mb-1">
+            订单号：{order.orderNo}
+          </Text>
+          <Text className="text-sm text-gray-500">
+            客户：{order.customerName}
+          </Text>
+        </View>
+        <Tag type={getStatusColor(order.status)} size="small">
+          {getStatusText(order.status)}
+        </Tag>
+      </View>
+
+      <View className="flex justify-between items-center">
+        <View>
+          <Text className="text-sm text-gray-600">
+            订单金额：¥{order.amount}
+          </Text>
+          <Text className="text-sm text-orange-500 font-semibold">
+            预计佣金：¥{order.commission}
+          </Text>
+        </View>
+        <Text className="text-xs text-gray-400">
+          {order.createTime}
+        </Text>
+      </View>
+    </View>
+  )
+
   return (
-    <View className="p-4">
-      <Text className="text-lg font-bold mb-4">分销订单</Text>
-      
-      <Empty description="暂无分销订单" />
+    <View className="bg-gray-50 min-h-screen">
+      {/* 统计卡片 */}
+      <View className="bg-white p-4 mb-4">
+        <View className="grid grid-cols-3 gap-4">
+          <View className="text-center">
+            <Text className="text-lg font-bold text-blue-500">2</Text>
+            <Text className="text-xs text-gray-500">总订单</Text>
+          </View>
+          <View className="text-center">
+            <Text className="text-lg font-bold text-green-500">¥89.80</Text>
+            <Text className="text-xs text-gray-500">总佣金</Text>
+          </View>
+          <View className="text-center">
+            <Text className="text-lg font-bold text-orange-500">¥29.90</Text>
+            <Text className="text-xs text-gray-500">待结算</Text>
+          </View>
+        </View>
+      </View>
+
+      {/* 订单列表 */}
+      <Tabs value={activeTab} onChange={setActiveTab}>
+        <Tabs.TabPane title="全部" value="0">
+          <PullToRefresh
+            loading={refreshing}
+            onRefresh={handleRefresh}
+          >
+            <View className="p-4">
+              {mockOrders.length > 0 ? (
+                mockOrders.map(renderOrderItem)
+              ) : (
+                <Empty description="暂无分销订单" />
+              )}
+            </View>
+          </PullToRefresh>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane title="待结算" value="1">
+          <View className="p-4">
+            {mockOrders.filter(o => o.status === 'pending').map(renderOrderItem)}
+          </View>
+        </Tabs.TabPane>
+
+        <Tabs.TabPane title="已完成" value="2">
+          <View className="p-4">
+            {mockOrders.filter(o => o.status === 'completed').map(renderOrderItem)}
+          </View>
+        </Tabs.TabPane>
+      </Tabs>
     </View>
   )
 }