优化游戏实时对局页面样式-增加预估赔付栏的排序

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

@@ -97,15 +97,29 @@
             <el-col :xs="24" :sm="12">
                 <el-card shadow="never">
                     <template #header>{{ t('game.live.candidate_title') }}</template>
-                    <el-table :data="candidateNumbersSorted" :height="tableHeight" :row-class-name="candidateRowClassName" class="candidate-table">
+                    <el-table
-                        <el-table-column prop="number" :label="t('game.live.number')" width="76" align="center" header-align="center">
+                        :data="candidateNumbersSorted"
+                        :height="tableHeight"
+                        :row-class-name="candidateRowClassName"
+                        class="candidate-table"
+                        :default-sort="{ prop: 'estimated_loss', order: 'ascending' }"
+                        @sort-change="onCandidateSortChange"
+                    >
+                        <el-table-column prop="number" :label="t('game.live.number')" width="76" align="center" header-align="center" sortable="custom">
                             <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
+                            prop="estimated_loss"
+                            :label="t('game.live.estimated_loss')"
+                            width="110"
+                            align="center"
+                            header-align="center"
+                            sortable="custom"
+                        />
                         <el-table-column :label="t('game.live.btn_draw')" width="96" align="center" header-align="center">
                             <template #default="scope">
                                 <el-switch
@@ -261,6 +275,7 @@ const wsUrl = ref('')
 const wsTopics = ref<string[]>([])
 const wsClient = ref<WebSocket | null>(null)
 const isMobile = ref(false)
+const candidateSort = ref<{ prop: string; order: 'ascending' | 'descending' | null }>({ prop: 'estimated_loss', order: 'ascending' })
 
 function updateIsMobile(): void {
     isMobile.value = window.matchMedia('(max-width: 768px)').matches
@@ -437,21 +452,45 @@ function estimatedLossSortValue(v: unknown): number {
 const candidateNumbersSorted = computed(() => {
     const list = Array.isArray(snapshot.candidate_numbers) ? [...snapshot.candidate_numbers] : []
     list.sort((a, b) => {
-        const ea = estimatedLossSortValue(a?.estimated_loss)
+        const sp = candidateSort.value.prop
-        const eb = estimatedLossSortValue(b?.estimated_loss)
+        const so = candidateSort.value.order
-        if (ea !== eb) {
+        const dir = so === 'descending' ? -1 : 1
-            return ea - eb
+
+        if (sp === 'number') {
+            const na = numberValue(a?.number)
+            const nb = numberValue(b?.number)
+            if (na !== null && nb !== null && na !== nb) {
+                return (na - nb) * dir
+            }
+        } else {
+            const ea = estimatedLossSortValue(a?.estimated_loss)
+            const eb = estimatedLossSortValue(b?.estimated_loss)
+            if (ea !== eb) {
+                return (ea - eb) * dir
+            }
         }
-        const na = numberValue(a?.number)
+
-        const nb = numberValue(b?.number)
+        const ea2 = estimatedLossSortValue(a?.estimated_loss)
-        if (na !== null && nb !== null && na !== nb) {
+        const eb2 = estimatedLossSortValue(b?.estimated_loss)
-            return na - nb
+        if (ea2 !== eb2) {
+            return ea2 - eb2
+        }
+        const na2 = numberValue(a?.number)
+        const nb2 = numberValue(b?.number)
+        if (na2 !== null && nb2 !== null && na2 !== nb2) {
+            return na2 - nb2
         }
         return String(a?.number ?? '').localeCompare(String(b?.number ?? ''))
     })
     return list
 })
 
+function onCandidateSortChange(arg: { prop: string; order: 'ascending' | 'descending' | null }): void {
+    const prop = typeof arg?.prop === 'string' && arg.prop !== '' ? arg.prop : 'estimated_loss'
+    const order = arg?.order === 'descending' || arg?.order === 'ascending' ? arg.order : 'ascending'
+    candidateSort.value = { prop, order }
+}
+
 function isScheduledNumber(v: unknown): boolean {
     const n = numberValue(v)
     if (n === null) {