From 91abedcb862b0772d22dc6915dcef7a19215414a Mon Sep 17 00:00:00 2001
From: richarjiang <richarjiang@tencent.com>
Date: Tue, 7 Apr 2026 10:22:02 +0800
Subject: [PATCH] fix(app): prevent modal disappearing when switching to edit
 tab

Root cause: there was a stale loading overlay outside the tab content
(added by a previous subagent) that rendered when editLoading was true,
covering the entire modal body. Also loadDetailMembership incorrectly
managed editLoading causing state inconsistencies.

Fix:
- Remove the orphaned loading overlay outside tab content blocks
- loadDetailMembership no longer touches editLoading (switchTab owns it)
- switchTab uses Promise.all for parallel loading with formReady guard
- openDetail resets editLoading/formReady to clean state

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
---
 packages/app/src/pages/admin/members.vue | 49 +++++++++++++++---------
 1 file changed, 30 insertions(+), 19 deletions(-)

diff --git a/packages/app/src/pages/admin/members.vue b/packages/app/src/pages/admin/members.vue
index 0466a47..beaa605 100644
--- a/packages/app/src/pages/admin/members.vue
+++ b/packages/app/src/pages/admin/members.vue
@@ -115,11 +115,6 @@
           </view>
         </view>
 
-        <!-- Loading overlay for edit tab -->
-        <view v-if="editLoading" class="edit-loading">
-          <text class="edit-loading-text">加载中...</text>
-        </view>
-
         <!-- Detail tab content -->
         <view v-if="activeTab === 'detail'" class="tab-content">
           <!-- User info -->
@@ -195,7 +190,13 @@
 
         <!-- Edit tab content -->
         <view v-if="activeTab === 'edit'" class="tab-content">
-          <view class="edit-form">
+          <!-- Loading -->
+          <view v-if="editLoading" class="edit-loading">
+            <text class="edit-loading-text">加载中...</text>
+          </view>
+
+          <!-- Form -->
+          <view v-else-if="formReady" class="edit-form">
             <!-- Card type -->
             <view class="form-item">
               <text class="form-label">卡类型</text>
@@ -303,6 +304,7 @@ const detailMembership = ref<any>(null)
 const editLoading = ref(false)
 const editSubmitting = ref(false)
 const editCardTypes = ref<any[]>([])
+const formReady = ref(false)
 
 const editForm = ref({
   cardTypeIndex: 0,
@@ -394,6 +396,8 @@ function openDetail(m: MemberSummary) {
   showDetail.value = true
   detailMembership.value = null
   activeTab.value = 'detail'
+  editLoading.value = false
+  formReady.value = false
   loadDetailMembership(m.userId)
 }
 
@@ -419,30 +423,36 @@ function statusLabel(status: string): string {
 }
 
 async function loadDetailMembership(userId: string) {
-  detailMembership.value = null
-  editLoading.value = true
   try {
     const result = await adminStore.getUserMembership(userId)
     detailMembership.value = result.membership
   } catch {
-  } finally {
-    editLoading.value = false
   }
 }
 
 async function switchTab(tab: 'detail' | 'edit') {
   activeTab.value = tab
   if (tab === 'edit') {
-    // Always fetch card types if not yet loaded
-    if (!editCardTypes.value.length) {
-      await adminStore.fetchCardTypes()
-      editCardTypes.value = adminStore.cardTypes
-    }
-    // Load membership if not yet loaded
-    if (!detailMembership.value) {
-      await loadDetailMembership(detailMember.value!.userId)
-    }
+    // Reset form state and show loading immediately
+    formReady.value = false
+    editLoading.value = true
+
+    // Load card types and membership in parallel
+    const loadCardTypes = editCardTypes.value.length
+      ? Promise.resolve()
+      : adminStore.fetchCardTypes().then(() => {
+          editCardTypes.value = adminStore.cardTypes
+        })
+
+    const loadMembership = detailMembership.value
+      ? Promise.resolve()
+      : loadDetailMembership(detailMember.value!.userId)
+
+    await Promise.all([loadCardTypes, loadMembership])
+
     initEditForm()
+    editLoading.value = false
+    formReady.value = true
   }
 }
 
@@ -565,6 +575,7 @@ function closeModal() {
   showDetail.value = false
   activeTab.value = 'detail'
   detailMembership.value = null
+  formReady.value = false
 }
 
 onMounted(() => loadMembers(true))