优化游戏实时对局页面样式

app/admin/controller/game/Record.php

@@ -86,7 +86,6 @@ class Record extends Backend
 
         $rows = Db::name('game_record')
             ->where('status', 5)
-            ->whereLike('void_reason', 'system_recover:%')
             ->field(['id', 'period_no', 'void_reason', 'update_time'])
             ->order('id', 'desc')
             ->limit($limit)
@@ -96,6 +95,8 @@ class Record extends Backend
         $list = [];
         foreach ($rows as $row) {
             $meta = $this->parseRecoverVoidReason(is_string($row['void_reason'] ?? null) ? $row['void_reason'] : '');
+            $reason = is_string($row['void_reason'] ?? null) ? $row['void_reason'] : '';
+            $isAutoRecover = $this->isSystemRecoverReason($reason);
             $list[] = [
                 'id' => (int) ($row['id'] ?? 0),
                 'period_no' => (string) ($row['period_no'] ?? ''),
@@ -104,7 +105,8 @@ class Record extends Backend
                 'refunded_order_count' => $meta['orders'],
                 'refunded_total_amount' => $meta['amount'],
                 'recovered_at' => (int) ($row['update_time'] ?? 0),
-                'void_reason' => (string) ($row['void_reason'] ?? ''),
+                'void_reason' => $reason,
+                'is_auto_recover' => $isAutoRecover ? 1 : 0,
             ];
         }
 
@@ -125,10 +127,13 @@ class Record extends Backend
             'orders' => 0,
             'amount' => '0.00',
         ];
-        if ($reason === '' || str_starts_with($reason, 'system_recover:') === false) {
+        if (!$this->isSystemRecoverReason($reason)) {
             return $meta;
         }
         $payload = substr($reason, strlen('system_recover:'));
+        if (!str_contains($payload, '=')) {
+            return $meta;
+        }
         $parts = explode('|', $payload);
         foreach ($parts as $part) {
             $item = trim($part);
@@ -156,4 +161,9 @@ class Record extends Backend
         }
         return $meta;
     }
+
+    private function isSystemRecoverReason(string $reason): bool
+    {
+        return $reason !== '' && str_starts_with($reason, 'system_recover:');
+    }
 }

app/common/service/GameLiveService.php

@@ -52,23 +52,102 @@ final class GameLiveService
         if ($recordId <= 0) {
             return;
         }
+        $status = (int) ($row['status'] ?? 0);
+        $resultNumber = isset($row['result_number']) ? (int) $row['result_number'] : 0;
+        if ($resultNumber > 0 && in_array($status, [0, 1, 2, 3], true)) {
+            self::recoverPayoutForRecordOnStartup($recordId);
+            return;
+        }
+
         $periodStartAt = (int) ($row['period_start_at'] ?? 0);
         if ($periodStartAt <= 0) {
             return;
         }
-
         $periodSeconds = self::getConfigInt(self::KEY_PERIOD_SECONDS, 30);
         $timeoutAt = $periodStartAt + $periodSeconds + self::PAYOUT_GRACE_SECONDS + self::STARTUP_RECOVER_GRACE_SECONDS;
         if (time() <= $timeoutAt) {
             return;
         }
+        self::markAbnormalAndRefundOnStartup($recordId, $status);
+    }
 
-        $status = (int) ($row['status'] ?? 0);
+    private static function recoverPayoutForRecordOnStartup(int $recordId): void
+    {
         $lock = GameHotDataLock::tryAcquireWithWait(GameHotDataLock::TYPE_GAME_RECORD, (string) $recordId, 3000);
         if (!$lock['acquired']) {
             return;
         }
+        try {
+            $row = Db::name('game_record')->where('id', $recordId)->find();
+            if (!$row) {
+                return;
+            }
+            $status = (int) ($row['status'] ?? 0);
+            if (!in_array($status, [0, 1, 2, 3], true)) {
+                return;
+            }
+            $resultNumber = isset($row['result_number']) ? (int) $row['result_number'] : 0;
+            if ($resultNumber <= 0) {
+                return;
+            }
 
+            $now = time();
+            $payoutUntil = isset($row['payout_until']) ? (int) $row['payout_until'] : 0;
+            Db::startTrans();
+            try {
+                GameBetSettleService::settleBetsForDraw($recordId, $resultNumber);
+                if ($status === 2) {
+                    if ($payoutUntil <= 0) {
+                        $payoutUntil = $now + self::PAYOUT_GRACE_SECONDS;
+                    }
+                    Db::name('game_record')->where('id', $recordId)->update([
+                        'status' => 3,
+                        'payout_until' => $payoutUntil,
+                        'update_time' => $now,
+                    ]);
+                } elseif ($status === 3) {
+                    if ($payoutUntil <= 0) {
+                        $payoutUntil = $now;
+                        Db::name('game_record')->where('id', $recordId)->update([
+                            'payout_until' => $payoutUntil,
+                            'update_time' => $now,
+                        ]);
+                    }
+                } else {
+                    $payoutUntil = $now;
+                    Db::name('game_record')->where('id', $recordId)->update([
+                        'status' => 3,
+                        'payout_until' => $payoutUntil,
+                        'update_time' => $now,
+                    ]);
+                }
+                Db::commit();
+            } catch (Throwable $e) {
+                Db::rollback();
+                Log::warning('game live startup payout recover failed', [
+                    'record_id' => $recordId,
+                    'error' => $e->getMessage(),
+                ]);
+                return;
+            }
+
+            GameHotDataCoordinator::afterGameRecordCommitted($recordId);
+            self::publishSnapshot(null);
+
+            if ($payoutUntil <= $now) {
+                self::finalizePayoutForRecordLocked($recordId);
+            }
+        } finally {
+            GameHotDataLock::release(GameHotDataLock::TYPE_GAME_RECORD, (string) $recordId, $lock['token'], $lock['redis_lock']);
+        }
+    }
+
+    private static function markAbnormalAndRefundOnStartup(int $recordId, int $status): void
+    {
+        $lock = GameHotDataLock::tryAcquireWithWait(GameHotDataLock::TYPE_GAME_RECORD, (string) $recordId, 3000);
+        if (!$lock['acquired']) {
+            return;
+        }
         try {
             $fresh = Db::name('game_record')->where('id', $recordId)->find();
             if (!$fresh) {
@@ -78,12 +157,8 @@ final class GameLiveService
             if (!in_array($freshStatus, [0, 1, 2, 3], true)) {
                 return;
             }
-            $freshPeriodStartAt = (int) ($fresh['period_start_at'] ?? 0);
+            $freshResultNumber = isset($fresh['result_number']) ? (int) $fresh['result_number'] : 0;
-            if ($freshPeriodStartAt <= 0) {
+            if ($freshResultNumber > 0) {
-                return;
-            }
-            $freshTimeoutAt = $freshPeriodStartAt + $periodSeconds + self::PAYOUT_GRACE_SECONDS + self::STARTUP_RECOVER_GRACE_SECONDS;
-            if (time() <= $freshTimeoutAt) {
                 return;
             }
 
@@ -92,13 +167,12 @@ final class GameLiveService
             Db::startTrans();
             try {
                 $refund = self::refundPendingBetsSummaryForPeriodLocked($recordId, $now);
-                $oldStatus = $freshStatus;
                 $refundedUserCount = count($refund['user_ids']);
                 $refundedOrderCount = (int) ($refund['order_count'] ?? 0);
                 $refundedTotalAmount = is_string($refund['total_amount'] ?? null) ? $refund['total_amount'] : '0.00';
                 $reason = sprintf(
                     'system_recover:from=%d|users=%d|orders=%d|amount=%s',
-                    $oldStatus,
+                    $freshStatus,
                     $refundedUserCount,
                     $refundedOrderCount,
                     $refundedTotalAmount
@@ -114,8 +188,9 @@ final class GameLiveService
                 Db::commit();
             } catch (Throwable $e) {
                 Db::rollback();
-                Log::warning('game live startup recover failed', [
+                Log::warning('game live startup abnormal recover failed', [
                     'record_id' => $recordId,
+                    'status' => $status,
                     'error' => $e->getMessage(),
                 ]);
                 return;
@@ -129,7 +204,7 @@ final class GameLiveService
             }
             GameRecordService::bootstrapPeriodWhenRuntimeEnabled();
             self::publishSnapshot(null);
-            Log::info('game live startup recovered abnormal period', [
+            Log::info('game live startup marked abnormal and refunded', [
                 'record_id' => $recordId,
                 'old_status' => $freshStatus,
                 'refunded_user_count' => count($refund['user_ids']),
@@ -141,6 +216,34 @@ final class GameLiveService
         }
     }
 
+    private static function finalizePayoutForRecordLocked(int $recordId): void
+    {
+        $now = time();
+        Db::startTrans();
+        try {
+            Db::name('game_record')->where('id', $recordId)->where('status', 3)->update([
+                'status' => 4,
+                'payout_until' => null,
+                'update_time' => $now,
+            ]);
+            GameRecordService::createNextRecordAfterDraw();
+            Db::commit();
+        } catch (Throwable $e) {
+            Db::rollback();
+            Log::warning('game live startup finalize payout failed', [
+                'record_id' => $recordId,
+                'error' => $e->getMessage(),
+            ]);
+            return;
+        }
+        GameHotDataCoordinator::afterGameRecordCommitted($recordId);
+        try {
+            GameRecordStatService::refreshForRecordId($recordId);
+        } catch (Throwable) {
+        }
+        self::publishSnapshot(null);
+    }
+
     public static function buildSnapshot(?int $recordId = null): array
     {
         $record = self::resolveRecord($recordId);
@@ -170,9 +273,12 @@ final class GameLiveService
         }
 
         $bets = Db::name('bet_order')
-            ->where('period_id', $rid)
+            ->alias('bo')
-            ->order('id', 'desc')
+            ->leftJoin('user gu', 'gu.id = bo.user_id')
+            ->where('bo.period_id', $rid)
+            ->order('bo.id', 'desc')
             ->limit(200)
+            ->field('bo.id,bo.user_id,bo.period_no,bo.pick_numbers,bo.total_amount,bo.streak_at_bet,bo.create_time,gu.username as user_username')
             ->select()
             ->toArray();
 
@@ -218,6 +324,7 @@ final class GameLiveService
                 return [
                     'id' => (int) $row['id'],
                     'user_id' => (int) $row['user_id'],
+                    'username' => isset($row['user_username']) && is_string($row['user_username']) ? $row['user_username'] : '',
                     'period_no' => (string) $row['period_no'],
                     'pick_numbers' => $row['pick_numbers'],
                     'total_amount' => (string) $row['total_amount'],

web/src/lang/backend/en/game/live.ts

@@ -31,6 +31,7 @@ export default {
     bet_stream_title: 'Realtime bet stream',
     bet_id: 'Bet ID',
     user_id: 'Player ID',
+    username: 'Username',
     pick_numbers: 'Pick numbers',
     total_amount: 'Total bet amount',
     streak_at_bet: 'Streak at bet',

web/src/lang/backend/zh-cn/game/live.ts

@@ -31,6 +31,7 @@ export default {
     bet_stream_title: '实时下注记录',
     bet_id: '注单ID',
     user_id: '玩家ID',
+    username: '用户名',
     pick_numbers: '下注号码',
     total_amount: '下注总额',
     streak_at_bet: '下注时连胜',

web/src/lang/index.ts

@@ -25,7 +25,7 @@ const assignLocale: anyObj = {
 
 export async function loadLang(app: App) {
     const config = useConfig()
-    const locale = config.lang.defaultLang
+    const locale = config.lang.defaultLang === 'zh' ? 'zh-cn' : config.lang.defaultLang
 
     // 加载框架全局语言包
     const lang = await import(`./globs-${locale}.ts`)
@@ -70,7 +70,7 @@ export async function loadLang(app: App) {
         locale: locale,
         legacy: false, // 组合式api
         globalInjection: true, // 挂载$t,$d等到全局
-        fallbackLocale: config.lang.fallbackLang,
+        fallbackLocale: config.lang.fallbackLang === 'zh' ? 'zh-cn' : config.lang.fallbackLang,
         messages,
     })
 

web/src/router/index.ts

@@ -44,12 +44,13 @@ router.beforeEach((to, from, next) => {
             .join('/')
     }
     const config = useConfig()
+    const langCode = config.lang.defaultLang === 'zh' ? 'zh-cn' : config.lang.defaultLang
     if (to.path in langAutoLoadMap) {
         loadPath.push(...langAutoLoadMap[to.path as keyof typeof langAutoLoadMap])
     }
     let prefix = ''
     if (isAdminApp(to.fullPath)) {
-        prefix = './backend/' + config.lang.defaultLang
+        prefix = './backend/' + langCode
 
         // 去除 path 中的 /admin
         const adminPath = to.path.slice(to.path.indexOf(adminBaseRoutePath) + adminBaseRoutePath.length)
@@ -58,7 +59,7 @@ router.beforeEach((to, from, next) => {
             loadPath.push(prefix + toCamelPath(adminPath) + '.ts')
         }
     } else {
-        prefix = './frontend/' + config.lang.defaultLang
+        prefix = './frontend/' + langCode
         loadPath.push(prefix + to.path + '.ts')
     }
 
@@ -80,7 +81,7 @@ router.beforeEach((to, from, next) => {
     loadPath = uniq(loadPath)
 
     for (const key in loadPath) {
-        loadPath[key] = loadPath[key].replaceAll('${lang}', config.lang.defaultLang)
+        loadPath[key] = loadPath[key].replaceAll('${lang}', langCode)
         if (loadPath[key] in window.loadLangHandle) {
             window.loadLangHandle[loadPath[key]]().then((res: { default: anyObj }) => {
                 const pathName = loadPath[key].slice(loadPath[key].lastIndexOf(prefix) + (prefix.length + 1), loadPath[key].lastIndexOf('.'))

web/src/views/backend/game/live/index.vue

@@ -27,6 +27,18 @@
                     @change="onRuntimeSwitch"
                 />
                 <span v-if="snapshot.maintenance_ui" class="live-top-toolbar__hint">{{ t('game.live.runtime_off_tip') }}</span>
+                <div class="live-top-toolbar__actions">
+                    <el-button
+                        class="live-top-toolbar__btn-void"
+                        type="danger"
+                        plain
+                        :disabled="asideOperationLocked || !canVoidPeriod || voidSubmitting || runtimeSwitchLoading"
+                        @click="openVoidDialog"
+                    >
+                        {{ t('game.live.void_btn') }}
+                    </el-button>
+                    <el-button :loading="loading" :disabled="asideOperationLocked" @click="loadSnapshot">{{ t('Refresh') }}</el-button>
+                </div>
             </div>
         </div>
 
@@ -78,75 +90,62 @@
                         </span>
                     </div>
                 </div>
-
-                <aside class="live-control-aside" :class="{ 'is-locked': asideOperationLocked }">
-                    <div class="aside-title">{{ t('game.live.action_panel') }}</div>
-                    <el-button
-                        class="aside-void-btn"
-                        type="danger"
-                        plain
-                        :disabled="asideOperationLocked || !canVoidPeriod || voidSubmitting || runtimeSwitchLoading"
-                        @click="openVoidDialog"
-                    >
-                        {{ t('game.live.void_btn') }}
-                    </el-button>
-                    <div class="aside-field">
-                        <span class="aside-field__label">{{ t('game.live.manual_draw_number') }}</span>
-                        <el-input-number
-                            v-model="manualNumber"
-                            class="aside-field__input"
-                            :min="1"
-                            :max="snapshot.draw_number_max ?? 36"
-                            :step="1"
-                            :disabled="asideOperationLocked"
-                            controls-position="right"
-                        />
-                    </div>
-                    <div class="aside-btns">
-                        <el-button
-                            :loading="calcLoading"
-                            :disabled="asideOperationLocked || !snapshot.can_calculate"
-                            @click="onCalculate"
-                        >
-                            {{ t('game.live.btn_calc') }}
-                        </el-button>
-                        <el-button
-                            type="primary"
-                            :loading="drawLoading"
-                            :disabled="asideOperationLocked || !snapshot.can_schedule_draw"
-                            @click="onDraw"
-                        >
-                            {{ t('game.live.btn_draw') }}
-                        </el-button>
-                        <el-button :loading="loading" :disabled="asideOperationLocked" @click="loadSnapshot">{{ t('Refresh') }}</el-button>
-                    </div>
-                </aside>
             </div>
         </el-card>
 
-        <el-row :gutter="12">
+        <el-row :gutter="12" class="live-tables-row">
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
                 <el-card shadow="never">
                     <template #header>{{ t('game.live.candidate_title') }}</template>
-                    <el-table :data="snapshot.candidate_numbers" height="420">
+                    <el-table :data="candidateNumbersSorted" :height="tableHeight" :row-class-name="candidateRowClassName" class="candidate-table">
-                        <el-table-column prop="number" :label="t('game.live.number')" width="100" />
+                        <el-table-column prop="number" :label="t('game.live.number')" width="76" align="center" header-align="center">
-                        <el-table-column prop="estimated_loss" :label="t('game.live.estimated_loss')" />
+                            <template #default="scope">
+                                <el-tag size="small" effect="plain" class="number-tag">
+                                    {{ scope.row.number ?? '-' }}
+                                </el-tag>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="estimated_loss" :label="t('game.live.estimated_loss')" width="110" align="center" header-align="center" />
+                        <el-table-column :label="t('game.live.btn_draw')" width="96" align="center" header-align="center">
+                            <template #default="scope">
+                                <el-switch
+                                    :model-value="isScheduledNumber(scope.row.number)"
+                                    :loading="drawLoading && pendingSwitchNumber === scope.row.number"
+                                    :disabled="asideOperationLocked || !snapshot.can_schedule_draw || drawLoading"
+                                    inline-prompt
+                                    @change="(v:boolean) => onPickSwitchChange(v, scope.row.number)"
+                                />
+                            </template>
+                        </el-table-column>
                     </el-table>
                 </el-card>
             </el-col>
-            <el-col :span="12">
+            <el-col :xs="24" :sm="12">
                 <el-card shadow="never">
                     <template #header>{{ t('game.live.bet_stream_title') }}</template>
-                    <el-table :data="snapshot.bets" height="420">
+                    <el-table :data="snapshot.bets" :height="tableHeight" class="bet-stream-table">
-                        <el-table-column prop="id" :label="t('game.live.bet_id')" width="90" />
+                        <el-table-column prop="username" :label="t('game.live.username')" width="120" align="center" header-align="center">
-                        <el-table-column prop="user_id" :label="t('game.live.user_id')" width="90" />
-                        <el-table-column prop="pick_numbers" :label="t('game.live.pick_numbers')">
                             <template #default="scope">
-                                {{ formatPicks(scope.row.pick_numbers) }}
+                                <span class="bet-user">{{ String(scope.row.username || '-') }}</span>
                             </template>
                         </el-table-column>
-                        <el-table-column prop="total_amount" :label="t('game.live.total_amount')" width="120" />
+                        <el-table-column prop="pick_numbers" :label="t('game.live.pick_numbers')" min-width="150" align="center" header-align="center">
-                        <el-table-column prop="streak_at_bet" :label="t('game.live.streak_at_bet')" width="90" />
+                            <template #default="scope">
+                                <div class="pick-tags">
+                                    <el-tag
+                                        v-for="num in parsePickNumbers(scope.row.pick_numbers)"
+                                        :key="`pick-${scope.row.id}-${String(num)}`"
+                                        size="small"
+                                        effect="plain"
+                                        class="pick-tags__item"
+                                    >
+                                        {{ num }}
+                                    </el-tag>
+                                    <span v-if="parsePickNumbers(scope.row.pick_numbers).length === 0">-</span>
+                                </div>
+                            </template>
+                        </el-table-column>
+                        <el-table-column prop="total_amount" :label="t('game.live.total_amount')" width="92" align="center" header-align="center" />
                     </el-table>
                 </el-card>
             </el-col>
@@ -241,11 +240,11 @@ const snapshot = reactive<Snapshot>({
 })
 const calcLoading = ref(false)
 const drawLoading = ref(false)
+const pendingSwitchNumber = ref<number | null>(null)
 const runtimeSwitchLoading = ref(false)
 const voidDialogVisible = ref(false)
 const voidReason = ref('')
 const voidSubmitting = ref(false)
-const manualNumber = ref<number | null>(1)
 const calcResultNumber = ref<number | null>(null)
 const calcEstimatedLoss = ref<string>('0.00')
 
@@ -261,6 +260,13 @@ const wsConnected = ref(false)
 const wsUrl = ref('')
 const wsTopics = ref<string[]>([])
 const wsClient = ref<WebSocket | null>(null)
+const isMobile = ref(false)
+
+function updateIsMobile(): void {
+    isMobile.value = window.matchMedia('(max-width: 768px)').matches
+}
+
+const tableHeight = computed(() => (isMobile.value ? 320 : 420))
 
 async function reloadWsConfig(): Promise<void> {
     wsLoading.value = true
@@ -365,6 +371,118 @@ function formatPicks(v: unknown): string {
     return '-'
 }
 
+function parsePickNumbers(v: unknown): Array<number | string> {
+    if (Array.isArray(v)) {
+        return v
+            .map((item) => {
+                if (typeof item === 'number' || typeof item === 'string') {
+                    return item
+                }
+                return null
+            })
+            .filter((item): item is number | string => item !== null)
+    }
+    if (typeof v === 'string') {
+        const s = v.trim()
+        if (s === '') {
+            return []
+        }
+        try {
+            const parsed = JSON.parse(s)
+            if (Array.isArray(parsed)) {
+                return parsed
+                    .map((item) => {
+                        if (typeof item === 'number' || typeof item === 'string') {
+                            return item
+                        }
+                        return null
+                    })
+                    .filter((item): item is number | string => item !== null)
+            }
+        } catch {
+            return [s]
+        }
+        return [s]
+    }
+
+    return []
+}
+
+function numberValue(v: unknown): number | null {
+    if (typeof v === 'number' && Number.isFinite(v)) {
+        return v
+    }
+    if (typeof v === 'string' && v.trim() !== '') {
+        const n = Number(v)
+        if (!Number.isNaN(n) && Number.isFinite(n)) {
+            return n
+        }
+    }
+    return null
+}
+
+function estimatedLossSortValue(v: unknown): number {
+    if (typeof v === 'number' && Number.isFinite(v)) {
+        return v
+    }
+    if (typeof v === 'string' && v.trim() !== '') {
+        const n = Number(v)
+        if (!Number.isNaN(n) && Number.isFinite(n)) {
+            return n
+        }
+    }
+    return Number.MAX_SAFE_INTEGER
+}
+
+const candidateNumbersSorted = computed(() => {
+    const list = Array.isArray(snapshot.candidate_numbers) ? [...snapshot.candidate_numbers] : []
+    list.sort((a, b) => {
+        const ea = estimatedLossSortValue(a?.estimated_loss)
+        const eb = estimatedLossSortValue(b?.estimated_loss)
+        if (ea !== eb) {
+            return ea - eb
+        }
+        const na = numberValue(a?.number)
+        const nb = numberValue(b?.number)
+        if (na !== null && nb !== null && na !== nb) {
+            return na - nb
+        }
+        return String(a?.number ?? '').localeCompare(String(b?.number ?? ''))
+    })
+    return list
+})
+
+function isScheduledNumber(v: unknown): boolean {
+    const n = numberValue(v)
+    if (n === null) {
+        return false
+    }
+    return snapshot.pending_draw_number === n
+}
+
+function candidateRowClassName(arg: { row: anyObj }): string {
+    return isScheduledNumber(arg.row?.number) ? 'is-scheduled-row' : ''
+}
+
+async function onPickSwitchChange(val: boolean, rowNumber: unknown): Promise<void> {
+    const target = numberValue(rowNumber)
+    if (target === null) {
+        return
+    }
+    if (!val) {
+        return
+    }
+    if (snapshot.pending_draw_number === target) {
+        return
+    }
+    pendingSwitchNumber.value = target
+    try {
+        await onDraw(target)
+    } finally {
+        pendingSwitchNumber.value = null
+    }
+}
+
 const canVoidPeriod = computed(() => {
     const r = snapshot.record
     if (!r) {
@@ -451,8 +569,6 @@ async function loadSnapshot() {
         const res = await createAxios({ url: '/admin/game.Live/snapshot', method: 'get', showCodeMessage: false })
         if (res.code === 1 && res.data) {
             mergeLiveSnapshot(res.data as anyObj)
-            const dmax = res.data.draw_number_max ?? 36
-            if (manualNumber.value === null || manualNumber.value < 1 || manualNumber.value > dmax) manualNumber.value = 1
         }
     } finally {
         loading.value = false
@@ -528,7 +644,7 @@ async function onCalculate() {
             method: 'post',
             data: {
                 record_id: snapshot.record.id,
-                manual_number: manualNumber.value,
+                manual_number: numberValue(snapshot.pending_draw_number) ?? numberValue(candidateNumbersSorted.value[0]?.number) ?? 1,
             },
             showSuccessMessage: true,
         })
@@ -543,7 +659,7 @@ async function onCalculate() {
     }
 }
 
-async function onDraw() {
+async function onDrawWithNumber(targetNumber: number) {
     if (!snapshot.record) return
     drawLoading.value = true
     try {
@@ -552,7 +668,7 @@ async function onDraw() {
             method: 'post',
             data: {
                 record_id: snapshot.record.id,
-                manual_number: manualNumber.value,
+                manual_number: targetNumber,
             },
             showSuccessMessage: true,
         })
@@ -562,6 +678,19 @@ async function onDraw() {
     }
 }
 
+async function onDraw(targetNumber?: number) {
+    if (targetNumber !== undefined) {
+        return onDrawWithNumber(targetNumber)
+    }
+    const pending = numberValue(snapshot.pending_draw_number)
+    if (pending !== null) {
+        return onDrawWithNumber(pending)
+    }
+    const first = candidateNumbersSorted.value[0]
+    const fallback = numberValue(first?.number) ?? 1
+    return onDrawWithNumber(fallback)
+}
+
 const countdownParts = computed(() => {
     const bet = snapshot.bet_remaining_seconds ?? 0
     const draw = snapshot.remaining_seconds ?? 0
@@ -573,6 +702,8 @@ const countdownParts = computed(() => {
 })
 
 onMounted(async () => {
+    updateIsMobile()
+    window.addEventListener('resize', updateIsMobile)
     clockTimer = window.setInterval(() => {
         clockTick.value++
     }, 1000)
@@ -582,6 +713,7 @@ onMounted(async () => {
 })
 
 onUnmounted(() => {
+    window.removeEventListener('resize', updateIsMobile)
     disconnectWs()
     if (clockTimer !== null) {
         window.clearInterval(clockTimer)
@@ -624,6 +756,17 @@ onUnmounted(() => {
     line-height: 1.45;
 }
 
+.live-top-toolbar__actions {
+    margin-left: auto;
+    display: inline-flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.live-top-toolbar__btn-void {
+    border-color: var(--el-color-danger-light-7);
+}
+
 .live-control-card {
     :deep(.el-card__body) {
         padding-top: 8px;
@@ -631,14 +774,10 @@ onUnmounted(() => {
 }
 
 .live-control-layout {
-    display: flex;
+    display: block;
-    flex-wrap: wrap;
-    gap: 20px 24px;
-    align-items: flex-start;
 }
 
 .live-control-main {
-    flex: 1 1 320px;
     min-width: 0;
 }
 
@@ -786,76 +925,43 @@ onUnmounted(() => {
     font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
 }
 
-.live-control-aside {
+.number-tag {
-    flex: 0 0 240px;
+    min-width: 44px;
-    padding-left: 20px;
+    justify-content: center;
-    border-left: 1px solid var(--el-border-color-lighter);
+    font-variant-numeric: tabular-nums;
+}
+
+.pick-tags {
     display: flex;
-    flex-direction: column;
+    flex-wrap: wrap;
-    gap: 12px;
+    justify-content: center;
-
-    &.is-locked {
-        opacity: 0.9;
-        filter: grayscale(0.08);
-    }
-}
-
-@media (max-width: 992px) {
-    .live-control-aside {
-        flex: 1 1 100%;
-        padding-left: 0;
-        border-left: none;
-        padding-top: 16px;
-        border-top: 1px solid var(--el-border-color-lighter);
-    }
-}
-
-.aside-title {
-    font-size: 14px;
-    font-weight: 600;
-    color: var(--el-text-color-regular);
-}
-
-.aside-void-btn {
-    width: 100%;
-    margin-bottom: 12px;
-}
-
-.aside-field {
-    display: flex;
-    flex-direction: column;
     gap: 6px;
 }
 
-.aside-field__label {
+.pick-tags__item {
-    font-size: 12px;
+    font-variant-numeric: tabular-nums;
-    color: var(--el-text-color-secondary);
 }
 
-.aside-field__input {
+.bet-user {
-    width: 100%;
+    display: inline-block;
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
-.aside-btns {
+.candidate-table :deep(.is-scheduled-row td) {
-    display: flex;
+    background: var(--el-color-primary-light-9);
-    flex-direction: row;
-    flex-wrap: nowrap;
-    gap: 8px;
-    align-items: stretch;
 }
 
-.aside-btns .el-button {
+@media (max-width: 768px) {
-    flex: 1;
+    .live-tables-row .el-col {
-    min-width: 0;
+        margin-bottom: 12px;
-    margin-left: 0;
+    }
-    padding-left: 8px;
-    padding-right: 8px;
-}
 
-.aside-btns .el-button :deep(span) {
+    .pick-tags {
-    white-space: normal;
+        gap: 4px;
-    line-height: 1.25;
+    }
-    text-align: center;
 }
 </style>
 

web/src/views/backend/game/record/index.vue

@@ -5,10 +5,12 @@
         <TableHeader
             :buttons="['refresh', 'comSearch', 'quickSearch', 'columnDisplay']"
             :quick-search-placeholder="t('Quick search placeholder', { fields: t('game.record.quick Search Fields') })"
-        ></TableHeader>
+        >
-        <div class="record-top-actions">
+            <el-button v-blur class="table-header-operate btns-ml-12" type="warning" @click="openAbnormalDialog">
-            <el-button type="warning" @click="openAbnormalDialog">{{ t('game.record.view_abnormal_rounds') }}</el-button>
+                <Icon name="fa fa-exclamation-triangle" />
-        </div>
+                <span class="table-header-operate-text">{{ t('game.record.view_abnormal_rounds') }}</span>
+            </el-button>
+        </TableHeader>
 
         <Table ref="tableRef"></Table>
 
@@ -162,7 +164,7 @@ const openAbnormalDialog = async () => {
                 showSuccessMessage: false,
             }
         )
-        const data = response?.data?.data ?? {}
+        const data = response?.data ?? {}
         abnormalDialog.list = Array.isArray(data.list) ? data.list : []
     } catch (error: any) {
         const message = typeof error?.message === 'string' && error.message !== '' ? error.message : t('game.record.load_abnormal_failed')