✨ feat(order): add order status group component

- add new order-group component with header and status list
- implement order status icons with badge notification
- support pending payment, shipment, receipt and review statuses
- add default styles for order group container and items

✨ feat(icon): add order related icons

- add 'truck' icon for shipment status
- add 'package' icon for receipt status

mini/src/components/tdesign/icon/index.tsx

@@ -57,6 +57,10 @@ const iconClassMap: Record<string, string> = {
   'share': 'i-heroicons-share-20-solid',
   'more': 'i-heroicons-ellipsis-horizontal-20-solid',
   'ellipsis': 'i-heroicons-ellipsis-horizontal-20-solid',
+
+  // 订单相关
+  'truck': 'i-heroicons-truck-20-solid',
+  'package': 'i-heroicons-cube-20-solid',
 }
 
 export default function TDesignIcon({

mini/src/components/tdesign/order-group/index.css

@@ -0,0 +1,78 @@
+.order-group {
+  background: #fff;
+  border-radius: 16rpx;
+  margin: 20rpx;
+  padding: 32rpx;
+  box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.06);
+}
+
+.order-group__header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 32rpx;
+  padding-bottom: 24rpx;
+  border-bottom: 2rpx solid #f5f5f5;
+}
+
+.order-group__title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
+}
+
+.order-group__all {
+  display: flex;
+  align-items: center;
+  color: #999;
+}
+
+.order-group__all-text {
+  font-size: 28rpx;
+  margin-right: 8rpx;
+}
+
+.order-group__list {
+  display: flex;
+  justify-content: space-between;
+}
+
+.order-group__item {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  flex: 1;
+}
+
+.order-group__icon-container {
+  position: relative;
+  margin-bottom: 16rpx;
+}
+
+.order-group__badge {
+  position: absolute;
+  top: -8rpx;
+  right: -8rpx;
+  min-width: 32rpx;
+  height: 32rpx;
+  background: #ff4444;
+  border-radius: 16rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border: 2rpx solid #fff;
+}
+
+.order-group__badge-text {
+  color: #fff;
+  font-size: 20rpx;
+  font-weight: 600;
+  line-height: 1;
+  padding: 0 4rpx;
+}
+
+.order-group__label {
+  font-size: 24rpx;
+  color: #666;
+  line-height: 1.2;
+}

mini/src/components/tdesign/order-group/index.tsx

@@ -0,0 +1,119 @@
+import { View, Text } from '@tarojs/components'
+import TDesignIcon from '../icon'
+import './index.css'
+
+interface OrderItem {
+  /** 订单状态类型 */
+  type: 'pending_payment' | 'pending_shipment' | 'pending_receipt' | 'pending_review'
+  /** 订单数量 */
+  count?: number
+  /** 状态名称 */
+  label: string
+  /** 点击回调 */
+  onClick?: () => void
+}
+
+interface OrderGroupProps {
+  /** 订单状态数据 */
+  orders?: OrderItem[]
+  /** 点击全部订单回调 */
+  onAllOrdersClick?: () => void
+}
+
+export default function OrderGroup({
+  orders = [
+    {
+      type: 'pending_payment',
+      count: 0,
+      label: '待付款',
+      onClick: () => {}
+    },
+    {
+      type: 'pending_shipment',
+      count: 0,
+      label: '待发货',
+      onClick: () => {}
+    },
+    {
+      type: 'pending_receipt',
+      count: 0,
+      label: '待收货',
+      onClick: () => {}
+    },
+    {
+      type: 'pending_review',
+      count: 0,
+      label: '待评价',
+      onClick: () => {}
+    }
+  ],
+  onAllOrdersClick
+}: OrderGroupProps) {
+  // 状态类型到图标的映射
+  const iconMap = {
+    pending_payment: 'shopping-cart',
+    pending_shipment: 'truck',
+    pending_receipt: 'package',
+    pending_review: 'star'
+  }
+
+  // 状态类型到颜色的映射
+  const colorMap = {
+    pending_payment: '#fa550f',
+    pending_shipment: '#ff6b35',
+    pending_receipt: '#00b96b',
+    pending_review: '#1890ff'
+  }
+
+  return (
+    <View className="order-group">
+      {/* 标题区域 */}
+      <View className="order-group__header">
+        <Text className="order-group__title">我的订单</Text>
+        <View
+          className="order-group__all"
+          onClick={onAllOrdersClick}
+        >
+          <Text className="order-group__all-text">全部订单</Text>
+          <TDesignIcon
+            name="arrow-right"
+            size="24rpx"
+            color="#999"
+          />
+        </View>
+      </View>
+
+      {/* 订单状态列表 */}
+      <View className="order-group__list">
+        {orders.map((order) => (
+          <View
+            key={order.type}
+            className="order-group__item"
+            onClick={order.onClick}
+          >
+            {/* 图标和数量 */}
+            <View className="order-group__icon-container">
+              <TDesignIcon
+                name={iconMap[order.type]}
+                size="48rpx"
+                color={colorMap[order.type]}
+              />
+              {(order.count || 0) > 0 && (
+                <View className="order-group__badge">
+                  <Text className="order-group__badge-text">
+                    {(order.count || 0) > 99 ? '99+' : (order.count || 0)}
+                  </Text>
+                </View>
+              )}
+            </View>
+
+            {/* 状态标签 */}
+            <Text className="order-group__label">
+              {order.label}
+            </Text>
+          </View>
+        ))}
+      </View>
+    </View>
+  )
+}