feat: 实现桌面控制组件

src/features/game/components/desktop/desktop-game-history.tsx

@@ -1,3 +1,183 @@
+import historyBg from '@/assets/system/history-bg.png'
+
 export function DesktopGameHistory() {
-  return <div className={'w-full'}>DesktopGameHistory</div>
+  const data = [
+    {
+      order_no: 'BET202604290001',
+      period_no: '202604290101',
+      numbers: [3, 8, 12],
+      bet_amount: '100.00',
+      total_amount: '100.00',
+      result_number: 8,
+      win_amount: '330.00',
+      status: 'won',
+      create_time: 1745881200,
+    },
+    {
+      order_no: 'BET202604290002',
+      period_no: '202604290102',
+      numbers: [5],
+      bet_amount: '50.00',
+      total_amount: '50.00',
+      result_number: 11,
+      win_amount: '0.00',
+      status: 'lost',
+      create_time: 1745882100,
+    },
+    {
+      order_no: 'BET202604290003',
+      period_no: '202604290103',
+      numbers: [1, 7],
+      bet_amount: '88.00',
+      total_amount: '88.00',
+      result_number: 7,
+      win_amount: '176.00',
+      status: 'won',
+      create_time: 1745883000,
+    },
+    {
+      order_no: 'BET202604290004',
+      period_no: '202604290104',
+      numbers: [9, 10, 15],
+      bet_amount: '120.00',
+      total_amount: '120.00',
+      result_number: 4,
+      win_amount: '0.00',
+      status: 'settled',
+      create_time: 1745883900,
+    },
+    {
+      order_no: 'BET202604290005',
+      period_no: '202604290105',
+      numbers: [6],
+      bet_amount: '66.00',
+      total_amount: '66.00',
+      result_number: null,
+      win_amount: '0.00',
+      status: 'pending',
+      create_time: 1745884800,
+    },
+    {
+      order_no: 'BET202604290006',
+      period_no: '202604290106',
+      numbers: [2, 14],
+      bet_amount: '200.00',
+      total_amount: '200.00',
+      result_number: 14,
+      win_amount: '400.00',
+      status: 'won',
+      create_time: 1745885700,
+    },
+    {
+      order_no: 'BET202604290007',
+      period_no: '202604290107',
+      numbers: [13],
+      bet_amount: '30.00',
+      total_amount: '30.00',
+      result_number: 13,
+      win_amount: '99.00',
+      status: 'won',
+      create_time: 1745886600,
+    },
+    {
+      order_no: 'BET202604290008',
+      period_no: '202604290108',
+      numbers: [4, 16],
+      bet_amount: '150.00',
+      total_amount: '150.00',
+      result_number: 1,
+      win_amount: '0.00',
+      status: 'lost',
+      create_time: 1745887500,
+    },
+    {
+      order_no: 'BET202604290009',
+      period_no: '202604290109',
+      numbers: [11, 18, 20],
+      bet_amount: '300.00',
+      total_amount: '300.00',
+      result_number: null,
+      win_amount: '0.00',
+      status: 'pending',
+      create_time: 1745888400,
+    },
+    {
+      order_no: 'BET202604290010',
+      period_no: '202604290110',
+      numbers: [17],
+      bet_amount: '80.00',
+      total_amount: '80.00',
+      result_number: 17,
+      win_amount: '264.00',
+      status: 'won',
+      create_time: 1745889300,
+    },
+  ]
+
+  return (
+    <div
+      className="desktop-game-history-glow flex h-full min-h-0 w-full flex-col items-center overflow-hidden bg-center bg-no-repeat py-2"
+      style={{
+        backgroundImage: `url(${historyBg})`,
+        backgroundSize: '100% 100%',
+      }}
+    >
+      <div
+        className={
+          'relative z-20 flex h-design-50 shrink-0 items-center justify-center text-design-30 text-[#D5FBFF]'
+        }
+      >
+        History
+      </div>
+      <div
+        className={
+          'history-scroll-hidden z-10 flex min-h-0 flex-1 w-full flex-col gap-design-10 overflow-y-auto overflow-x-hidden px-design-20 py-design-20'
+        }
+      >
+        {data.map((item) => {
+          return (
+            <div
+              key={item.order_no}
+              className={
+                'common-neon-inset flex w-full flex-col items-center !p-0 text-[#FFE375]'
+              }
+            >
+              <div
+                className={
+                  'common-neon-inset w-full !rounded-b-none text-center text-design-20'
+                }
+              >
+                {item.status}
+              </div>
+              <div
+                className={
+                  'flex w-full flex-col gap-design-5 px-design-10 py-design-10 text-design-16'
+                }
+              >
+                <div>
+                  <span className={'text-[#84A2A2]'}>Round ID: </span>
+                  <span className={'text-[#C0E7EB]'}>{item.order_no}</span>
+                </div>
+                <div>
+                  <span className={'text-[#84A2A2]'}>Animals Bet: </span>
+                  <span>{item.numbers.join(', ')}</span>
+                </div>
+                <div>
+                  <span className={'text-[#84A2A2]'}>Total Bet Amount: </span>
+                  <span className={'text-[#FFE375]'}>{item.bet_amount}</span>
+                </div>
+                <div>
+                  <span className={'text-[#84A2A2]'}> Winning Result:</span>
+                  <span className={'text-[#FF7575]'}>
+                    {' '}
+                    {item.result_number === null ? '--' : item.result_number}
+                  </span>
+                </div>
+              </div>
+            </div>
+          )
+        })}
+      </div>
+    </div>
+  )
 }