feat: 实现桌面控制组件

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

@@ -1,7 +1,5 @@
 import { SmartImage } from '@/components/smart-image'
-
-const cx = (...classes: Array<string | false | null | undefined>) =>
-  classes.filter(Boolean).join(' ')
+import { cn } from '@/lib/untils'
 
 const animalModules = import.meta.glob('../../../../assets/animal/*.webp', {
   eager: true,
@@ -36,7 +34,12 @@ export function DesktopAnimal({
   onSelect,
 }: DesktopAnimalProps) {
   return (
-    <section className={cx('w-full grid grid-cols-6 gap-[5px]', className)}>
+    <section
+      className={cn(
+        'grid w-full grid-cols-6 gap-design-5 common-neon-inset',
+        className,
+      )}
+    >
       {animalImageList.map((item) => {
         const isActive = item.id === activeId
 
@@ -45,7 +48,7 @@ export function DesktopAnimal({
             key={item.id}
             type="button"
             onClick={() => onSelect?.(item.id)}
-            className={cx(
+            className={cn(
               'flex flex-col items-center transition',
               'cursor-pointer',
               isActive &&
@@ -56,8 +59,8 @@ export function DesktopAnimal({
             <SmartImage
               src={item.url}
               alt={`animal-${item.id}`}
-              className={cx(
-                'h-[112px] w-[223px] object-contain rounded-2xl',
+              className={cn(
+                'h-design-112 w-design-223 rounded-2xl object-contain',
                 imageClassName,
               )}
             />