feat(game): 添加桌面游戏历史组件并优化布局样式

package.json

@@ -55,6 +55,7 @@
     "cz-conventional-changelog": "3.3.0",
     "husky": "9.1.7",
     "lint-staged": "16.4.0",
+    "postcss": "^8.5.12",
     "tailwindcss": "^4.2.2",
     "typescript": "~6.0.2",
     "vite": "^8.0.4"

pnpm-lock.yaml

@@ -93,6 +93,9 @@ importers:
       lint-staged:
         specifier: 16.4.0
         version: 16.4.0
+      postcss:
+        specifier: ^8.5.12
+        version: 8.5.12
       tailwindcss:
         specifier: ^4.2.2
         version: 4.2.2
@@ -1635,8 +1638,8 @@ packages:
     resolution: {integrity: sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==}
     engines: {node: '>=12'}
 
-  postcss@8.5.10:
+  postcss@8.5.12:
-    resolution: {integrity: sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==}
+    resolution: {integrity: sha512-W62t/Se6rA0Az3DfCL0AqJwXuKwBeYg6nOaIgzP+xZ7N5BFCI7DYi1qs6ygUYT6rvfi6t9k65UMLJC+PHZpDAA==}
     engines: {node: ^10 || ^12 || >=14}
 
   prettier@3.8.3:
@@ -3407,7 +3410,7 @@ snapshots:
 
   picomatch@4.0.4: {}
 
-  postcss@8.5.10:
+  postcss@8.5.12:
     dependencies:
       nanoid: 3.3.11
       picocolors: 1.1.1
@@ -3633,7 +3636,7 @@ snapshots:
     dependencies:
       lightningcss: 1.32.0
       picomatch: 4.0.4
-      postcss: 8.5.10
+      postcss: 8.5.12
       rolldown: 1.0.0-rc.15
       tinyglobby: 0.2.16
     optionalDependencies:

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

@@ -36,7 +36,7 @@ export function DesktopAnimal({
   onSelect,
 }: DesktopAnimalProps) {
   return (
-    <section className={cx('grid grid-cols-6', className)}>
+    <section className={cx('w-full grid grid-cols-6 gap-[5px]', className)}>
       {animalImageList.map((item) => {
         const isActive = item.id === activeId
 
@@ -56,7 +56,10 @@ export function DesktopAnimal({
             <SmartImage
               src={item.url}
               alt={`animal-${item.id}`}
-              className={cx('h-[110px] w-[220px]', imageClassName)}
+              className={cx(
+                'h-[112px] w-[223px] object-contain rounded-2xl',
+                imageClassName,
+              )}
             />
           </button>
         )

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

@@ -0,0 +1,3 @@
+export function DesktopControl() {
+  return <div className={'w-full'}>DesktopControl</div>
+}

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

@@ -0,0 +1,3 @@
+export function DesktopGameHistory() {
+  return <div className={'w-full'}>DesktopGameHistory</div>
+}

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

@@ -1,6 +1,5 @@
-import { CircleAlert, Mail, Plus, Volume2 } from 'lucide-react'
+import { CircleAlert, Mail, Volume2 } from 'lucide-react'
 import avatar from '@/assets/system/avatar.webp'
-import diamond from '@/assets/system/diamond.webp'
 import logo from '@/assets/system/logo.webp'
 import wifi from '@/assets/system/wifi.webp'
 import { SmartImage } from '@/components/smart-image.tsx'
@@ -9,7 +8,7 @@ export function DesktopHeader() {
   return (
     <header className="sticky top-0 z-30 border-b border-white/8 bg-slate-950/70 backdrop-blur-xl">
       <div className="h-[70px] w-full flex items-center px-[12px]">
-        <div className="w-[400px] flex justify-center items-center h-full border-r border-[rgba(128,223,231,0.65)]">
+        <div className="h-full flex px-[10px] justify-center items-center  border-r border-[rgba(128,223,231,0.65)]">
           <SmartImage
             src={logo}
             alt="logo"
@@ -18,7 +17,7 @@ export function DesktopHeader() {
           />
         </div>
 
-        <div className="w-[148px] flex justify-center items-center gap-[10px] h-full px-[20px] border-r border-[rgba(128,223,231,0.65)]">
+        <div className="w-[120px] flex justify-center items-center gap-[10px] h-full border-r border-[rgba(128,223,231,0.65)]">
           <SmartImage
             src={wifi}
             alt="wifi"
@@ -30,33 +29,32 @@ export function DesktopHeader() {
           </div>
         </div>
 
-        <div className="w-[175px] flex flex-col justify-center items-center gap-[5px] h-full px-[20px] border-r border-[rgba(128,223,231,0.65)]">
+        <div className="w-[150px] flex flex-col justify-center items-center gap-[5px] h-full border-r border-[rgba(128,223,231,0.65)]">
           <div>System Time</div>
           <div>20:05:12 GMT+08</div>
         </div>
 
-        <div className="flex-1 flex items-center justify-around gap-[10px] h-full px-[20px] text-[#D5FBFF] border-r border-[rgba(128,223,231,0.65)]">
+        <div className="flex-1 flex items-center justify-around gap-[10px] h-full px-[10px] text-[#D5FBFF]">
-          <div className={'flex gap-[10px] common-neon-inset'}>
+          <div className={'flex items-center gap-[5px] common-neon-inset'}>
-            <CircleAlert color={'#57B8BF'} />
+            <CircleAlert color={'#57B8BF'} size={16} />
             <div>Rules & Ddds</div>
           </div>
 
-          <div className={'flex gap-[10px] common-neon-inset'}>
+          <div className={'flex items-center gap-[5px] common-neon-inset'}>
-            <Mail color={'#57B8BF'} />
+            <Mail color={'#57B8BF'} size={16} />
             <div>Pesan</div>
           </div>
 
-          <div className={'flex gap-[10px] common-neon-inset'}>
+          <div className={'flex items-center gap-[5px] common-neon-inset'}>
-            <Volume2 color={'#57B8BF'} />
+            <Volume2 color={'#57B8BF'} size={16} />
             <div>BGM</div>
           </div>
 
-          <div className={'flex gap-[10px] common-neon-inset'}>
+          <div className={'flex items-center gap-[5px] common-neon-inset'}>
-            <CircleAlert color={'#57B8BF'} />
+            <CircleAlert color={'#57B8BF'} size={16} />
             <div>ID</div>
           </div>
-        </div>
+
-        <div className="flex-1 flex items-center h-full text-[#D5FBFF]">
           <div className={'relative flex items-center justify-center'}>
             <SmartImage
               src={avatar}
@@ -66,28 +64,25 @@ export function DesktopHeader() {
             />
             <div
               className={
-                'common-neon-inset !py-[20px] flex items-center justify-center box-border w-[175px] h-[36px]'
+                'common-neon-inset !py-[20px] flex justify-end items-center w-[160px] h-[36px]'
               }
             >
               Biomond Balance
             </div>
           </div>
-          <div className={'relative flex items-center justify-center h-full'}>
+          <div className={'relative flex items-center justify-center'}>
             <SmartImage
-              src={diamond}
+              src={avatar}
-              alt="diamond"
+              alt="avatar"
               priority
-              className="absolute left-[30px] top-0 z-20 w-[50px] h-[50px]"
+              className="absolute left-[20px] top-0 z-20 w-[50px] h-[50px]"
             />
             <div
               className={
-                'common-neon-inset !py-[20px]  flex items-center justify-end gap-[10px] w-[175px] h-[36px]'
+                'common-neon-inset !py-[20px] flex items-center justify-end box-border w-[160px] h-[36px]'
               }
             >
-              <div>5994469974</div>
+              Biomond Balance
-              <div className={'bg-[#2D4559] rounded-xs cursor-pointer p-[5px]'}>
-                <Plus size={16} />
-              </div>
             </div>
           </div>
         </div>

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

@@ -1,7 +1,7 @@
 import { Megaphone } from 'lucide-react'
 export function DesktopTitle() {
   return (
-    <section className="common-neon-inset flex items-center text-[#FF970F] flex gap-[10px] !px-[20px] h-[50px]">
+    <section className="common-neon-inset flex items-center text-[#FF970F] gap-[10px] !px-[20px] h-[40px]">
       <Megaphone color={'#57B8BF'} />
       <div>
         Selamat kepada pemain Wu Yanzu yang telah memenangkan hadiah utama

src/routes/$lang/route.tsx

@@ -2,6 +2,7 @@ import { createFileRoute, Navigate, Outlet } from '@tanstack/react-router'
 import { useEffect } from 'react'
 import { useTranslation } from 'react-i18next'
 import { DesktopAnimal } from '@/features/game/components/desktop/desktop-animal.tsx'
+import { DesktopGameHistory } from '@/features/game/components/desktop/desktop-game-history.tsx'
 import { DesktopHeader } from '@/features/game/components/desktop/desktop-header.tsx'
 import { DesktopTitle } from '@/features/game/components/desktop/desktop-title.tsx'
 import { getPreferredLanguage, isSupportedLanguage } from '@/i18n'
@@ -26,14 +27,24 @@ function LanguageLayout() {
     return <Navigate to="/$lang" params={{ lang: preferredLanguage }} replace />
   }
   return (
-    <div className="flex min-h-full flex-col">
+    <div className="flex min-h-full flex-col w-full">
       <DesktopHeader />
-      <div className={'mx-auto w-[95%] my-[10px]'}>
+
+      <div className={'mx-auto w-[calc(100%-40px)] my-[10px]'}>
         <DesktopTitle />
       </div>
-      <div className={''}>
+
+      <div className={'mx-auto w-[calc(100%-72px)]'}>
+        <div className={'w-full flex gap-[10px]'}>
+          <div className={'flex-1'}>
             <DesktopAnimal />
           </div>
+          <div className={'w-[200px]'}>
+            <DesktopGameHistory />
+          </div>
+        </div>
+      </div>
+
       <main className="flex min-h-0 flex-1 flex-col">
         <Outlet />
       </main>