fix: the details of the attachment may be empty (#5695)

#### What type of PR is this?

/kind bug
/area ui
/milestone 2.15.x

#### What this PR does / why we need it:

修复由于 modal 延迟 200ms 所导致的数据可能为空的问题。

See #5078 

#### How to test it?

反复点击并关闭附件库详情弹窗，查看是否会有空数据的问题

#### Which issue(s) this PR fixes:

Fixes #5689 

#### Does this PR introduce a user-facing change?
```release-note
修复附件详情弹窗可能无法显示数据的问题
```

ui/console-src/modules/contents/attachments/AttachmentList.vue

@@ -166,6 +166,7 @@ const onDetailModalClose = () => {
   selectedAttachment.value = undefined;
   nameQuery.value = undefined;
   nameQueryAttachment.value = undefined;
+  detailVisible.value = false;
   handleFetchAttachments();
 };
 
@@ -230,7 +231,7 @@ onMounted(() => {
 </script>
 <template>
   <AttachmentDetailModal
-    v-model:visible="detailVisible"
+    v-if="detailVisible"
     :attachment="selectedAttachment || nameQueryAttachment"
     @close="onDetailModalClose"
   >

ui/console-src/modules/contents/attachments/components/AttachmentDetailModal.vue

@@ -19,19 +19,16 @@ import AttachmentPermalinkList from "./AttachmentPermalinkList.vue";
 
 const props = withDefaults(
   defineProps<{
-    visible: boolean;
     attachment: Attachment | undefined;
     mountToBody?: boolean;
   }>(),
   {
-    visible: false,
     attachment: undefined,
     mountToBody: false,
   }
 );
 
 const emit = defineEmits<{
-  (event: "update:visible", visible: boolean): void;
   (event: "close"): void;
 }>();
 
@@ -64,17 +61,6 @@ const getGroupName = (name: string | undefined) => {
   const group = groups.value?.find((group) => group.metadata.name === name);
   return group?.spec.displayName || name;
 };
-
-const onVisibleChange = (visible: boolean) => {
-  emit("update:visible", visible);
-  if (!visible) {
-    onlyPreview.value = false;
-
-    setTimeout(() => {
-      emit("close");
-    }, 200);
-  }
-};
 </script>
 <template>
   <VModal
@@ -83,13 +69,12 @@ const onVisibleChange = (visible: boolean) => {
         display_name: attachment?.spec.displayName || '',
       })
     "
-    :visible="visible"
     :width="1000"
     :mount-to-body="mountToBody"
     :layer-closable="true"
     height="calc(100vh - 20px)"
     :body-class="['!p-0']"
-    @update:visible="onVisibleChange"
+    @close="emit('close')"
   >
     <template #actions>
       <slot name="actions"></slot>
@@ -198,7 +183,7 @@ const onVisibleChange = (visible: boolean) => {
     </div>
     <template #footer>
       <VSpace>
-        <VButton type="default" @click="onVisibleChange(false)">
+        <VButton type="default" @click="emit('close')">
           {{ $t("core.common.buttons.close_and_shortcut") }}
         </VButton>
         <slot name="footer" />