修改

src/App.tsx

@@ -22,13 +22,23 @@ export default defineComponent({
     // VIP购买弹窗状态
     const showVipModal = ref(false);
     const hasClose = ref(false); // 是否允许关闭弹窗
+    const modalKey = ref(0); // 用于强制重新创建弹窗组件
 
     // 监听VIP购买弹窗事件（必须在setup开头同步注册，否则路由守卫emit时监听还未准备好）
     eventGlobal.on('show-vip-purchase', (val?: boolean) => {
-      showVipModal.value = true;
-      if (val) {
-        hasClose.value = true;
-      }
+      // 更新 key 强制重新创建组件（解决手动删除DOM后状态残留问题）
+      modalKey.value++;
+      hasClose.value = val || false;
+      // 使用 nextTick 确保新组件创建完成后再显示
+      nextTick(() => {
+        showVipModal.value = true;
+      });
+    });
+
+    // 监听重置VIP弹窗事件（退出登录时重置状态）
+    eventGlobal.on('reset-vip-modal', () => {
+      showVipModal.value = false;
+      hasClose.value = false;
     });
 
     // const { needRefresh, offlineReady, updateServiceWorker } = useRegisterSW({
@@ -140,6 +150,7 @@ export default defineComponent({
       // window.removeEventListener('resize', resize);
       window.removeEventListener('message', handleOpen);
       eventGlobal.off('show-vip-purchase');
+      eventGlobal.off('reset-vip-modal');
     });
 
     return () => (
@@ -155,10 +166,11 @@ export default defineComponent({
 
           {/* VIP购买弹窗 - 放在NConfigProvider内部 */}
           <NModal
+            key={modalKey.value}
             maskClosable={false}
             closeOnEsc={false}
             closable={hasClose.value || false}
-            displayDirective="show"
+            displayDirective="if"
             preset="card"
             title="VIP会员续费"
             class="modalTitle background vipWidth"
@@ -166,8 +178,12 @@ export default defineComponent({
           >
             <VipPurchaseModal
               hasCancel={hasClose.value}
-              onClose={() => (showVipModal.value = false)}
-              onSuccess={() => (showVipModal.value = false)}
+              onClose={() => {
+                showVipModal.value = false;
+              }}
+              onSuccess={() => {
+                showVipModal.value = false;
+              }}
             />
           </NModal>
         </NConfigProvider>

src/store/modules/users.ts

@@ -8,7 +8,7 @@ import {
 } from '@/store/mutation-types';
 import { storage } from '@/utils/storage';
 import { userLogin, getUserInfo } from '@/api/user';
-import { getAuthForAdmin } from '/src/utils';
+import { getAuthForAdmin, eventGlobal } from '/src/utils';
 
 export interface IUserState {
   token: string;
@@ -136,6 +136,8 @@ export const useUserStore = defineStore('user-store', {
       this.setNoReadCount(0);
       storage.remove(ACCESS_TOKEN);
       storage.remove(CURRENT_USER);
+      // 发送事件重置VIP弹窗状态
+      eventGlobal.emit('reset-vip-modal');
       return Promise.resolve('');
     }
   }