docs(game): 添加游戏模块数据

- 新增 useGameBoardVm 数据层实施说明文档
- 添加 36字花核心玩法与前端规则摘要
- 创建游戏模块数据与界面分层第一阶段实施稿
- 定义四层架构：api/dto、store、view-model hooks、ui层
- 规范 PC 与 Mobile 共享业务逻辑的改造方案
- 明确各层职责边界和组件改造顺序

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

@@ -3,8 +3,20 @@ import statusLine from '@/assets/system/status-line.webp'
 import { SmartBackground } from '@/components/smart-background.tsx'
 import { DesktopCountdown } from '@/features/game/components/desktop/desktop-countdown.tsx'
 import { DesktopTitle } from '@/features/game/components/desktop/desktop-title.tsx'
+import { useGameStatusVm } from '@/features/game/hooks/use-game-status-vm.ts'
 
 export function DesktopStatusLine() {
+  const {
+    countdownMs,
+    limitLabel,
+    oddsLabel,
+    phaseDescription,
+    phaseLabel,
+    phaseToneClassName,
+    roundId,
+    streakLabel,
+  } = useGameStatusVm()
+
   return (
     <div className={'relative w-full flex flex-col text-design-22'}>
       <SmartBackground
@@ -12,10 +24,12 @@ export function DesktopStatusLine() {
         size="100% 100%"
         className="w-full h-design-60 bg-no-repeat bg-center flex items-center justify-center"
       >
-        <div className={'flex-1 flex items-center justify-center'}>
-          <div>Odds: 1:33</div>
-          <div>Streak: X2</div>
-          <div>Limit: 100</div>
+        <div
+          className={'flex-1 flex items-center justify-center gap-design-24'}
+        >
+          <div>Odds: {oddsLabel}</div>
+          <div>Streak: {streakLabel}</div>
+          <div>Limit: {limitLabel}</div>
         </div>
         <SmartBackground
           src={statusCenter}
@@ -23,22 +37,22 @@ export function DesktopStatusLine() {
           size="contain"
         >
           <DesktopCountdown
-            initialSeconds={30}
+            initialMs={countdownMs}
             onComplete={() => {
               console.log('countdown finished')
             }}
           />
         </SmartBackground>
         <div className={'flex-1 flex items-center justify-center gap-10'}>
-          <div>Round ID:20241026120</div>
+          <div>Round ID:{roundId}</div>
           <div className={'flex items-center gap-2'}>
             <div className={'flex items-center gap-2'}>
               <div
                 className={'w-design-20 h-design-20 bg-[#78FF7F] rounded-[50%]'}
               ></div>
-              <div className={'text-[#78FF7F]'}>OPEN</div>
+              <div className={phaseToneClassName}>{phaseLabel}</div>
             </div>
-            <div>(Menerima Taruhan)</div>
+            <div>{phaseDescription}</div>
           </div>
         </div>
       </SmartBackground>