perf(admin): 实现切页即时导航与列表 loading 壳

非阻塞 session 刷新、侧边栏 chunk 预取、KeepAlive 对齐，以及按 tab 延迟加载重型列表页。

apps/admin/src/views/agent/Bets.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-import { ref, onMounted } from 'vue';
+defineOptions({ name: 'AgentBets' });
+
+import { ref } from 'vue';
+import { useStaleListLifecycle } from '../../composables/useStaleList';
 import { useAdminLocale } from '../../composables/useAdminLocale';
 import api from '../../api';
 import { formatAmount } from '../../utils/format-amount';
@@ -22,8 +25,6 @@ const total = ref(0);
 const page = ref(1);
 const pageSize = ref(10);
 
-onMounted(load);
-
 async function load() {
   const { data } = await api.get('/agent/bets', {
     params: { page: page.value, pageSize: pageSize.value },
@@ -32,15 +33,17 @@ async function load() {
   total.value = data.data.total ?? 0;
 }
 
+const { loading, runLoad } = useStaleListLifecycle(() => bets.value.length > 0, load);
+
 function onPageChange(p: number) {
   page.value = p;
-  load();
+  void runLoad(true);
 }
 
 function onSizeChange(size: number) {
   pageSize.value = size;
   page.value = 1;
-  load();
+  void runLoad(true);
 }
 </script>
 
@@ -51,7 +54,7 @@ function onSizeChange(size: number) {
       <span class="page-desc">{{ t('page.agent_bets.desc') }}</span>
     </div>
 
-    <el-card class="data-card" shadow="never">
+    <el-card v-loading="loading" class="data-card" shadow="never">
       <div class="table-wrap">
         <el-table :data="bets" stripe>
           <el-table-column prop="id" :label="t('bet.col.serial')" width="56" align="center" />

apps/admin/src/views/agent/Players.vue

@@ -1,5 +1,7 @@
 <script setup lang="ts">
-import { ref, computed, onMounted, watch, reactive, h } from 'vue';
+defineOptions({ name: 'AgentPlayers' });
+
+import { ref, computed, onMounted, onActivated, watch, reactive, h } from 'vue';
 import { useAdminLocale } from '../../composables/useAdminLocale';
 import { useAuthStore } from '../../stores/auth';
 import api from '../../api';
@@ -288,22 +290,52 @@ const transferAmountCapError = computed(() => {
 onMounted(async () => {
   await loadProfile();
   await loadAgentOptions();
-  await loadAllPlayers();
-  if (canManageSubAgents.value) {
+  const tab = activeViewTab.value;
+  if (tab === 'players') {
+    await loadAllPlayers();
+  } else if (canManageSubAgents.value) {
     await reloadSubAgentTabs();
+    const m = /^agentLevel-(\d+)$/.exec(tab);
+    if (m) loadSubAgentsAtLevel(Number(m[1]));
+  }
+});
+
+onActivated(() => {
+  const tab = activeViewTab.value;
+  if (tab === 'players' && allPlayers.value.length > 0) void loadAllPlayers();
+  else {
+    const m = /^agentLevel-(\d+)$/.exec(tab);
+    if (m) {
+      const lvl = Number(m[1]);
+      const st = subAgentLevelState[lvl];
+      if (st?.agents.length) loadSubAgentsAtLevel(lvl);
+    }
   }
 });
 
 watch(activeViewTab, (tab) => {
   const m = /^agentLevel-(\d+)$/.exec(tab);
-  if (m) loadSubAgentsAtLevel(Number(m[1]));
+  if (m) {
+    if (!subAgentLevelState[Number(m[1])]?.agents.length) {
+      if (canManageSubAgents.value && !Object.keys(subAgentLevelState).length) {
+        void reloadSubAgentTabs().then(() => loadSubAgentsAtLevel(Number(m[1])));
+      } else {
+        loadSubAgentsAtLevel(Number(m[1]));
+      }
+    }
+    return;
+  }
+  if (tab === 'players' && !allPlayers.value.length) void loadAllPlayers();
 });
 
-watch(visibleSubAgentTabLevels, (levels, prev) => {
-  for (const lvl of levels) {
-    if (!prev?.includes(lvl) || !subAgentLevelState[lvl]?.agents.length) {
-      loadSubAgentsAtLevel(lvl);
-    }
+watch(visibleSubAgentTabLevels, (levels) => {
+  const tab = activeViewTab.value;
+  const m = /^agentLevel-(\d+)$/.exec(tab);
+  if (!m) return;
+  const activeLevel = Number(m[1]);
+  if (levels.includes(activeLevel)) {
+    const st = subAgentLevelState[activeLevel];
+    if (!st?.agents.length) loadSubAgentsAtLevel(activeLevel);
   }
 });