rebuild(audit): verify page state matrix

next/frontend/src/app/system/MembershipAdminPanel.vue

@@ -15,6 +15,7 @@ type AccountMembership = { user_id: number; username: string; is_admin: boolean;
 
 const ui = useUiStore();
 const accounts = ref<AccountMembership[]>([]);
+const loading = ref(true);
 const selectedId = ref<number | null>(null);
 const duration = ref("1_month");
 const dailyLimit = ref(50);
@@ -30,11 +31,15 @@ const sortedAccounts = computed(() =>
 );
 
 async function load(): Promise<void> {
+  loading.value = true;
+  errorMessage.value = "";
   try {
     accounts.value = await api.get<AccountMembership[]>("/admin/memberships");
     if (selectedId.value === null && accounts.value[0]) select(accounts.value[0]);
   } catch (error) {
     errorMessage.value = error instanceof Error ? error.message : "会员列表读取失败。";
+  } finally {
+    loading.value = false;
   }
 }
 
@@ -76,7 +81,9 @@ onMounted(load);
   <div class="system-grid member-grid">
     <section class="card">
       <header class="card-header"><h2>账号会员状态</h2><span class="tag">{{ accounts.length }} 个账号</span></header>
-      <div class="table-wrap">
+      <p v-if="loading" class="panel-loading muted">正在读取会员列表</p>
+      <p v-else-if="errorMessage" class="panel-loading field-error" role="alert">{{ errorMessage }}</p>
+      <div v-else class="table-wrap">
         <table class="data-table">
           <thead><tr><th>账号</th><th>身份</th><th>会员状态</th><th>到期时间</th><th class="num" :aria-sort="limitDescending ? 'descending' : 'ascending'"><button class="sort-button" type="button" @click="limitDescending = !limitDescending">每日上限（次） <span aria-hidden="true">{{ limitDescending ? "↓" : "↑" }}</span></button></th></tr></thead>
           <tbody>

next/frontend/src/app/system/ModelPoolPanel.vue

@@ -17,6 +17,7 @@ type ModelItem = {
 
 const ui = useUiStore();
 const models = ref<ModelItem[]>([]);
+const loading = ref(true);
 const editingId = ref<number | null>(null);
 const primaryId = ref<number | null>(null);
 const fallbackId = ref<number | null>(null);
@@ -45,12 +46,16 @@ function edit(model: ModelItem): void {
 }
 
 async function load(): Promise<void> {
+  loading.value = true;
+  errorMessage.value = "";
   try {
     models.value = await api.get<ModelItem[]>("/admin/models");
     primaryId.value = models.value.find((item) => item.is_primary)?.id ?? null;
     fallbackId.value = models.value.find((item) => item.is_fallback)?.id ?? null;
   } catch (error) {
     errorMessage.value = error instanceof Error ? error.message : "模型池读取失败。";
+  } finally {
+    loading.value = false;
   }
 }
 
@@ -139,11 +144,15 @@ onMounted(load);
     <section class="card">
       <header class="card-header"><h2>模型池</h2><span class="tag">{{ models.length }} / 20</span></header>
       <div class="model-list">
-        <button v-for="model in models" :key="model.id" class="model-row" :class="{ active: editingId === model.id }" type="button" @click="edit(model)">
-          <span><strong>{{ model.display_name }}</strong><small>{{ model.model_identifier }}</small></span>
-          <span class="model-tags"><span v-if="model.is_primary" class="tag">主模型</span><span v-if="model.is_fallback" class="tag">辅助</span></span>
-        </button>
-        <p v-if="!models.length" class="panel-loading muted">尚未添加模型</p>
+        <p v-if="loading" class="panel-loading muted">正在读取模型池</p>
+        <p v-else-if="errorMessage" class="panel-loading field-error" role="alert">{{ errorMessage }}</p>
+        <template v-else>
+          <button v-for="model in models" :key="model.id" class="model-row" :class="{ active: editingId === model.id }" type="button" @click="edit(model)">
+            <span><strong>{{ model.display_name }}</strong><small>{{ model.model_identifier }}</small></span>
+            <span class="model-tags"><span v-if="model.is_primary" class="tag">主模型</span><span v-if="model.is_fallback" class="tag">辅助</span></span>
+          </button>
+          <p v-if="!models.length" class="panel-loading muted">尚未添加模型</p>
+        </template>
       </div>
     </section>
     <div class="system-stack">