Stabilize per-page table binding and prevent tab-switch data thrash

src/lib/dataService.js

@@ -27,10 +27,19 @@ class DataService {
     this.modelOptions = []
     this.strategyOptions = []
     this.cacheResetPromise = null
+    this.pendingSourceTable = null
   }
 
   setSourceTable(tableName) {
     const next = tableName || 'trading_decisions'
+    if (this.loading) {
+      this.pendingSourceTable = next
+      return false
+    }
+    return this._applySourceTable(next)
+  }
+
+  _applySourceTable(next) {
     if (this.sourceTable === next) return false
     this.sourceTable = next
     this.loaded = false
@@ -83,6 +92,7 @@ class DataService {
     this.listeners.forEach(callback => {
       try {
         callback({
+          sourceTable: this.getSourceTable(),
           loading: this.loading,
           loaded: this.loaded,
           agents: this.agents,
@@ -682,6 +692,14 @@ class DataService {
     } finally {
       this.loading = false
       this._notify()
+      const pending = this.pendingSourceTable
+      this.pendingSourceTable = null
+      if (pending && pending !== this.sourceTable) {
+        this._applySourceTable(pending)
+        this.load(false).catch((e) => {
+          console.error('[DataService] Error loading pending source table:', e)
+        })
+      }
     }
   }
 
@@ -769,6 +787,7 @@ class DataService {
    */
   getState() {
     return {
+      sourceTable: this.getSourceTable(),
       loading: this.loading,
       loaded: this.loaded,
       agents: this.agents,

src/router/index.js

@@ -5,7 +5,6 @@ import LiveView from '../views/LiveView.vue'
 import AddAssetsView from '../views/AddAssetView.vue'
 import RequestView from '../views/RequestView.vue'
 import AssetRequestsView from '../views/AssetRequestsView.vue'
-import { dataService } from '../lib/dataService.js'
 
 const routes = [
   { 
@@ -29,19 +28,4 @@ const router = createRouter({
   routes
 })
 
-// 全局路由守卫：确保数据在导航前开始加载
-router.beforeEach(async (to, from, next) => {
-  const isChallengeRoute = to.path === '/live-challenge'
-  dataService.setSourceTable(isChallengeRoute ? 'challenge_table' : 'trading_decisions')
-  // 如果数据还未加载且不在加载中，则触发加载
-  if (!dataService.loaded && !dataService.loading) {
-    console.log('[Router] Triggering data load before navigation')
-    // 不等待加载完成，让加载在后台进行
-    dataService.load().catch(e => {
-      console.error('[Router] Error loading data:', e)
-    })
-  }
-  next()
-})
-
 export default router

src/views/LeaderboardView.vue

@@ -126,6 +126,7 @@ export default {
     '$route.path': {
       immediate: true,
       handler() {
+        this.ensureSourceAndLoad()
         if (!this.isChallengeLeaderboard) return
         const allow = new Set(['BTC', 'TSLA'])
         const scoped = (this.filters.assets || []).filter(a => allow.has(a))
@@ -205,6 +206,19 @@ export default {
     }
   },
   methods: {
+    expectedSourceTable() {
+      return this.isChallengeLeaderboard ? 'challenge_table' : 'trading_decisions'
+    },
+    ensureSourceAndLoad() {
+      const target = this.expectedSourceTable()
+      const changed = dataService.setSourceTable(target)
+      if (dataService.getSourceTable() !== target) return
+      if ((changed || !dataService.loaded) && !dataService.loading) {
+        dataService.load().catch(e => {
+          console.error('[LeaderboardView] load failed:', e)
+        })
+      }
+    },
     /**
      * 从 dataService 同步状态
      */
@@ -357,28 +371,32 @@ export default {
   mounted() {
     // 订阅 dataService 状态变化
     this.unsubscribe = dataService.subscribe((state) => {
+      if (state?.sourceTable !== this.expectedSourceTable()) return
       this.syncFromDataService(state)
     })
-    
+
+    this.ensureSourceAndLoad()
+
     // 立即同步当前状态
-    this.syncFromDataService(dataService.getState())
-    
-    // 如果数据还没加载，触发加载
-    if (!dataService.loaded && !dataService.loading) {
-      dataService.load()
+    const state = dataService.getState()
+    if (state?.sourceTable === this.expectedSourceTable()) {
+      this.syncFromDataService(state)
     }
     
     // 定期更新 dateBounds（每30秒检查一次数据库的最新日期）
     this.dateBoundsUpdateTimer = setInterval(() => {
+      if (dataService.getSourceTable() !== this.expectedSourceTable()) return
       dataService.updateDateBounds().catch(e => {
         console.error('[LeaderboardView] Error updating dateBounds:', e)
       })
     }, 30000) // 30秒
     
     // 组件挂载后立即更新一次
-    dataService.updateDateBounds().catch(e => {
-      console.error('[LeaderboardView] Error updating dateBounds on mount:', e)
-    })
+    if (dataService.getSourceTable() === this.expectedSourceTable()) {
+      dataService.updateDateBounds().catch(e => {
+        console.error('[LeaderboardView] Error updating dateBounds on mount:', e)
+      })
+    }
   },
   beforeUnmount() {
     // 取消订阅

src/views/LiveView.vue

@@ -234,6 +234,7 @@ const refreshing = ref(false)
 let unsubscribe = null
 const route = useRoute()
 const isChallengePage = computed(() => route.path === '/live-challenge')
+const expectedSourceTable = computed(() => isChallengePage.value ? 'challenge_table' : 'trading_decisions')
 const viewStrategy = computed(() => route.path === '/live-challenge' ? 'long_short' : 'long_only')
 const tabAssets = computed(() => route.path === '/live-challenge' ? challengeAssets : orderedAssets)
 const challengeDateRange = ref([0, 0])
@@ -353,18 +354,27 @@ const challengeLeaderboardRows = computed(() => {
   return rows.sort((a, b) => (Number(b.ret_with_fees) || 0) - (Number(a.ret_with_fees) || 0))
 })
 
+const ensureSourceAndLoad = () => {
+  const target = expectedSourceTable.value
+  const changed = dataService.setSourceTable(target)
+  if (dataService.getSourceTable() !== target) return
+  if ((changed || !dataService.loaded) && !dataService.loading) {
+    dataService.load(false).catch(e => console.error('LiveView: load failed', e))
+  }
+}
+
 /* ---------- bootstrap ---------- */
 onMounted(async () => {
   unsubscribe = dataService.subscribe((state) => {
+    if (state?.sourceTable !== expectedSourceTable.value) return
     rowsRef.value = Array.isArray(state.tableRows) ? state.tableRows : []
   })
 
-  rowsRef.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
-
-  // Only load when current source is not ready yet.
-  if (!dataService.loaded && !dataService.loading) {
-    dataService.load(false).catch(e => console.error('LiveView: load failed', e))
+  if (dataService.getSourceTable() === expectedSourceTable.value) {
+    rowsRef.value = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
   }
+
+  ensureSourceAndLoad()
   
   if (!tabAssets.value.includes(asset.value)) asset.value = tabAssets.value[0]
 
@@ -377,6 +387,11 @@ onMounted(async () => {
   }
 })
 
+watch(expectedSourceTable, () => {
+  rowsRef.value = []
+  ensureSourceAndLoad()
+})
+
 onBeforeUnmount(() => {
   if (unsubscribe) { unsubscribe(); unsubscribe = null }
 })

src/views/RequestView.vue

@@ -366,13 +366,16 @@ export default {
     // Join Arena always uses the full default table (not challenge_table).
     dataService.setSourceTable('trading_decisions')
     this.unsubscribe = dataService.subscribe((state) => {
+      if (state?.sourceTable !== 'trading_decisions') return
       this.rowsRef = Array.isArray(state.tableRows) ? state.tableRows : []
       this.dateBounds = state?.dateBounds || { min: null, max: null }
       this.rebuildAllDates()
       this.rebuildAssets().catch(() => {})
     })
-    this.rowsRef = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
-    this.dateBounds = dataService.dateBounds || { min: null, max: null }
+    if (dataService.getSourceTable() === 'trading_decisions') {
+      this.rowsRef = Array.isArray(dataService.tableRows) ? dataService.tableRows : []
+      this.dateBounds = dataService.dateBounds || { min: null, max: null }
+    }
     this.rebuildAllDates()
 
     // If another page is loading (e.g. live-challenge), wait and then reload
@@ -382,6 +385,7 @@ export default {
       triggerLoad()
     } else if (dataService.loading) {
       const stopWait = dataService.subscribe((state) => {
+        if (state?.sourceTable !== 'trading_decisions') return
         if (!state.loading) {
           stopWait()
           if (!state.loaded) triggerLoad()