JiaJun/36-character-flower
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
JiaJun
2026-04-27 17:44:35 +08:00
parent 9127a06d4a
commit 36ce93d8d0
9 changed files with 56 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
figma/img.jpg Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1001 KiB

1
package.json
View File

@@ -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"

11
pnpm-lock.yaml generated
View File

@@ -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:
resolution: {integrity: sha512-pMMHxBOZKFU6HgAZ4eyGnwXF/EvPGGqUr0MnZ5+99485wwW41kW91A4LOGxSHhgugZmSChL5AlElNdwlNgcnLQ==}
postcss@8.5.12:
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:

7
src/features/game/components/desktop/desktop-animal.tsx
View File

@@ -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>
)

3
src/features/game/components/desktop/desktop-control.tsx Normal file
View File

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

3
src/features/game/components/desktop/desktop-game-history.tsx Normal file
View File

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

47
src/features/game/components/desktop/desktop-header.tsx
View File

@@ -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 gap-[10px] common-neon-inset'}>
<CircleAlert color={'#57B8BF'} />
<div className="flex-1 flex items-center justify-around gap-[10px] h-full px-[10px] text-[#D5FBFF]">
<div className={'flex items-center gap-[5px] common-neon-inset'}>
<CircleAlert color={'#57B8BF'} size={16} />
<div>Rules & Ddds</div>
</div>
<div className={'flex gap-[10px] common-neon-inset'}>
<Mail color={'#57B8BF'} />
<div className={'flex items-center gap-[5px] common-neon-inset'}>
<Mail color={'#57B8BF'} size={16} />
<div>Pesan</div>
</div>
<div className={'flex gap-[10px] common-neon-inset'}>
<Volume2 color={'#57B8BF'} />
<div className={'flex items-center gap-[5px] common-neon-inset'}>
<Volume2 color={'#57B8BF'} size={16} />
<div>BGM</div>
</div>
<div className={'flex gap-[10px] common-neon-inset'}>
<CircleAlert color={'#57B8BF'} />
<div className={'flex items-center gap-[5px] common-neon-inset'}>
<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}
alt="diamond"
src={avatar}
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>
<div className={'bg-[#2D4559] rounded-xs cursor-pointer p-[5px]'}>
<Plus size={16} />
</div>
Biomond Balance
</div>
</div>
</div>

2
src/features/game/components/desktop/desktop-title.tsx
View File

@@ -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

19
src/routes/$lang/route.tsx
View File

@@ -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={''}>
<DesktopAnimal />
<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>