fix: 弹窗优化

src/pages/events/banner/components/BannerFormModal.tsx

@@ -515,32 +515,34 @@ export default defineComponent({
         </Modal>
 
         {/* ===== 图片裁剪弹窗 ===== */}
-        <Modal
-          visible={cropperVisible.value}
-          title="裁剪图片"
-          width={800}
-          footer={null}
-          onCancel={onCropperCancel}
-          centered
-          destroyOnClose
-        >
-          <div style={{ height: '500px' }}>
-            <ImageCropper
-              src={uploadImageUrl.value}
-              aspectRatio={CROP_ASPECT_RATIO}
-              autoCrop={true}
-              autoCropArea={0.8}
-              viewMode={1}
-              dragMode="move"
-              movable={true}
-              scalable={true}
-              zoomable={true}
-              cropBoxMovable={true}
-              cropBoxResizable={true}
-              onCrop={handleCropConfirm}
-            />
-          </div>
-        </Modal>
+        {cropperVisible.value && (
+          <Modal
+            visible={cropperVisible.value}
+            title="裁剪图片"
+            width={800}
+            footer={null}
+            onCancel={onCropperCancel}
+            centered
+            destroyOnClose
+          >
+            <div style={{ height: '500px' }}>
+              <ImageCropper
+                src={uploadImageUrl.value}
+                aspectRatio={CROP_ASPECT_RATIO}
+                autoCrop={true}
+                autoCropArea={0.8}
+                viewMode={1}
+                dragMode="move"
+                movable={true}
+                scalable={true}
+                zoomable={true}
+                cropBoxMovable={true}
+                cropBoxResizable={true}
+                onCrop={handleCropConfirm}
+              />
+            </div>
+          </Modal>
+        )}
       </>
     );
   },

src/pages/events/banner/index.tsx

@@ -267,13 +267,15 @@ export default defineComponent({
         </div>
 
         {/* ===== 新增/编辑弹窗 ===== */}
-        <BannerFormModal
-          visible={modalVisible.value}
-          record={editingRecord.value}
-          submitting={formSubmitting.value}
-          onClose={handleCloseModal}
-          onSave={handleSave}
-        />
+        {modalVisible.value && (
+          <BannerFormModal
+            visible={modalVisible.value}
+            record={editingRecord.value}
+            submitting={formSubmitting.value}
+            onClose={handleCloseModal}
+            onSave={handleSave}
+          />
+        )}
       </div>
     );
   },

src/pages/events/list/index.tsx

@@ -285,15 +285,19 @@ export default defineComponent({
         </div>
 
         {/* ===== 弹窗区 ===== */}
-        <EventRegulationModal
-          visible={regulationModalVisible.value}
-          onClose={() => setRegulationModalVisible(false)}
-        />
-        <EventDetailModal
-          visible={detailModalVisible.value}
-          record={currentRecord.value}
-          onClose={() => setDetailModalVisible(false)}
-        />
+        {regulationModalVisible.value && (
+          <EventRegulationModal
+            visible={regulationModalVisible.value}
+            onClose={() => setRegulationModalVisible(false)}
+          />
+        )}
+        {detailModalVisible.value && (
+          <EventDetailModal
+            visible={detailModalVisible.value}
+            record={currentRecord.value}
+            onClose={() => setDetailModalVisible(false)}
+          />
+        )}
       </div>
     );
   },

src/pages/events/orders/index.tsx

@@ -252,16 +252,18 @@ export default defineComponent({
         </div>
 
         {/* ===== 详情弹窗 ===== */}
-        <OrderDetailModal
-          visible={detailVisible.value}
-          record={currentRecord.value}
-          onClose={() => setDetailVisible(false)}
-          onReRefund={(record) => {
-            // 关闭详情弹窗，再弹出二次确认
-            setDetailVisible(false);
-            promptReRefund(record);
-          }}
-        />
+        {detailVisible.value && (
+          <OrderDetailModal
+            visible={detailVisible.value}
+            record={currentRecord.value}
+            onClose={() => setDetailVisible(false)}
+            onReRefund={(record) => {
+              // 关闭详情弹窗，再弹出二次确认
+              setDetailVisible(false);
+              promptReRefund(record);
+            }}
+          />
+        )}
       </div>
     );
   },

src/pages/system/roles/index.tsx

@@ -182,22 +182,26 @@ export default defineComponent({
         </div>
 
         {/* ===== 角色表单弹窗 ===== */}
-        <RoleFormModal
-          visible={formVisible.value}
-          record={editingRecord.value}
-          submitting={formSubmitting.value}
-          onClose={handleCloseForm}
-          onSave={handleSave}
-        />
+        {formVisible.value && (
+          <RoleFormModal
+            visible={formVisible.value}
+            record={editingRecord.value}
+            submitting={formSubmitting.value}
+            onClose={handleCloseForm}
+            onSave={handleSave}
+          />
+        )}
 
         {/* ===== 角色用户列表弹窗 ===== */}
-        <UserListModal
-          visible={userListVisible.value}
-          role={currentRole.value}
-          users={getRoleUsers(currentRole.value?.roleId || '')}
-          renderStatus={renderStatus}
-          onClose={handleCloseUserList}
-        />
+        {userListVisible.value && (
+          <UserListModal
+            visible={userListVisible.value}
+            role={currentRole.value}
+            users={getRoleUsers(currentRole.value?.roleId || '')}
+            renderStatus={renderStatus}
+            onClose={handleCloseUserList}
+          />
+        )}
       </div>
     );
   },

src/pages/system/users/index.tsx

@@ -197,13 +197,15 @@ export default defineComponent({
         </div>
 
         {/* ===== 新增/编辑弹窗 ===== */}
-        <UserFormModal
-          visible={modalVisible.value}
-          record={editingRecord.value}
-          submitting={formSubmitting.value}
-          onClose={handleCloseModal}
-          onSave={handleSave}
-        />
+        {modalVisible.value && (
+          <UserFormModal
+            visible={modalVisible.value}
+            record={editingRecord.value}
+            submitting={formSubmitting.value}
+            onClose={handleCloseModal}
+            onSave={handleSave}
+          />
+        )}
       </div>
     );
   },