From ad2dd979eb3af7c505c80a089163e93da82a6797 Mon Sep 17 00:00:00 2001
From: ErSan <mlt131220@163.com>
Date: Mon, 23 Mar 2026 17:30:58 +0800
Subject: [PATCH] =?UTF-8?q?fix(home):=20=E4=BF=AE=E5=A4=8D=E6=A8=A1?=
 =?UTF-8?q?=E5=9E=8B=E9=A2=84=E8=A7=88UI=E6=B2=A1=E5=AF=B9=E9=BD=90?=
 =?UTF-8?q?=E7=9A=84bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/components/preview/AssetPreview.vue   | 246 +++++++++---------
 1 file changed, 130 insertions(+), 116 deletions(-)

diff --git a/packages/editor/src/components/preview/AssetPreview.vue b/packages/editor/src/components/preview/AssetPreview.vue
index 8a0bf73..3c9ab79 100644
--- a/packages/editor/src/components/preview/AssetPreview.vue
+++ b/packages/editor/src/components/preview/AssetPreview.vue
@@ -1,138 +1,152 @@
 <template>
-  <n-modal :show="visible" @update:show="emits('update:visible',$event)" display-directive="show"
-           class="w-66vw h-66vh min-w-1000px" @close="emits('update:visible',false)">
-    <n-card :title="asset.name" embedded size="small" content-class="!p-0 flex gap-x-15px" closable
-            @close="handleClose">
-      <div ref="assetPreviewRef" id="assetPreview"></div>
+	<n-modal
+		:show="visible"
+		@update:show="emits('update:visible', $event)"
+		display-directive="show"
+		class="w-66vw h-66vh min-w-1000px"
+		@close="emits('update:visible', false)"
+	>
+		<n-card
+			:title="asset.name"
+			embedded
+			size="small"
+			content-class="!p-0 flex gap-x-15px"
+			content-style="height: calc(100% - 48px);"
+			closable
+			@close="handleClose"
+		>
+			<div ref="assetPreviewRef" id="assetPreview"></div>
 
-      <div class="w-345px mr-15px h-full">
-        <n-descriptions label-placement="left" label-class="w-100px" bordered :column="1">
-          <n-descriptions-item :label="t('home.assets.Name')">
-            {{ asset.name }}
-          </n-descriptions-item>
-          <n-descriptions-item :label="t('home.assets.Type')">
-            {{ t(`home.assets.${asset.type}`) }}
-          </n-descriptions-item>
-          <n-descriptions-item :label="t('home.assets.Category')">
-            {{ asset.categoryName || asset.category }}
-          </n-descriptions-item>
-          <n-descriptions-item :label="t('bim.Thumbnail')">
-            <n-image
-                width="120"
-                :src="getServiceStaticFile(asset.thumbnail)"
-            />
-            {{ }}
-          </n-descriptions-item>
-          <n-descriptions-item :label="t('home.assets.Size')">
-            {{ filterSize(asset.size) }}
-          </n-descriptions-item>
-          <n-descriptions-item :label="t('home.assets.Tags')">
-            <n-tag type="success" :bordered="false" class="ml-5px"
-                   v-for="tag in (asset.tags ? asset.tags.split(',') : [])" :key="tag">
-              {{ tag }}
-            </n-tag>
-          </n-descriptions-item>
-          <n-descriptions-item :label="t('scene.Create time')">
-            {{ asset.createTime }}
-          </n-descriptions-item>
-          <n-descriptions-item :label="t('scene.Update time')">
-            {{ asset.updateTime }}
-          </n-descriptions-item>
-        </n-descriptions>
+			<div class="w-345px mr-15px h-full">
+				<n-descriptions label-placement="left" label-class="w-100px" bordered :column="1">
+					<n-descriptions-item :label="t('home.assets.Name')">
+						{{ asset.name }}
+					</n-descriptions-item>
+					<n-descriptions-item :label="t('home.assets.Type')">
+						{{ t(`home.assets.${asset.type}`) }}
+					</n-descriptions-item>
+					<n-descriptions-item :label="t('home.assets.Category')">
+						{{ asset.categoryName || asset.category }}
+					</n-descriptions-item>
+					<n-descriptions-item :label="t('bim.Thumbnail')">
+						<n-image width="120" :src="getServiceStaticFile(asset.thumbnail)" />
+						{{}}
+					</n-descriptions-item>
+					<n-descriptions-item :label="t('home.assets.Size')">
+						{{ filterSize(asset.size) }}
+					</n-descriptions-item>
+					<n-descriptions-item :label="t('home.assets.Tags')">
+						<n-tag type="success" :bordered="false" class="ml-5px" v-for="tag in asset.tags ? asset.tags.split(',') : []" :key="tag">
+							{{ tag }}
+						</n-tag>
+					</n-descriptions-item>
+					<n-descriptions-item :label="t('scene.Create time')">
+						{{ asset.createTime }}
+					</n-descriptions-item>
+					<n-descriptions-item :label="t('scene.Update time')">
+						{{ asset.updateTime }}
+					</n-descriptions-item>
+				</n-descriptions>
 
-        <n-button type="primary" class="w-full" :loading="downloadLoading" @click="handleDownload">
-          {{ t('plugin.gltfHandler.Download') }}
-        </n-button>
-      </div>
-    </n-card>
-  </n-modal>
+				<n-button type="primary" class="w-full" :loading="downloadLoading" @click="handleDownload">
+					{{ t("plugin.gltfHandler.Download") }}
+				</n-button>
+			</div>
+		</n-card>
+	</n-modal>
 </template>
 
 <script setup lang="ts">
-import {ref, nextTick, watch, useTemplateRef, onBeforeUnmount} from "vue";
-import {Preview} from "@astral3d/engine";
-import {t} from "@/language";
-import {downloadWithFetch, filterSize, getServiceStaticFile} from "@/utils/common/file";
+	import { ref, nextTick, watch, useTemplateRef, onBeforeUnmount } from "vue";
+	import { Preview } from "@astral3d/engine";
+	import { t } from "@/language";
+	import { downloadWithFetch, filterSize, getServiceStaticFile } from "@/utils/common/file";
 
-const props = withDefaults(defineProps<{
-  visible: boolean,
-  asset: IAssets.Item
-}>(), {
-  visible: false,
-  asset: () => ({
-    name: "",
-    type: 'Model',
-    category: "",
-    thumbnail: "",
-    size: 0,
-    file: '',
-    createTime: "",
-    updateTime: ""
-  })
-})
-const emits = defineEmits(['update:visible'])
+	const props = withDefaults(
+		defineProps<{
+			visible: boolean;
+			asset: IAssets.Item;
+		}>(),
+		{
+			visible: false,
+			asset: () => ({
+				name: "",
+				type: "Model",
+				category: "",
+				thumbnail: "",
+				size: 0,
+				file: "",
+				createTime: "",
+				updateTime: "",
+			}),
+		}
+	);
+	const emits = defineEmits(["update:visible"]);
 
-let previewer:Preview | null = null;
+	let previewer: Preview | null = null;
 
-const assetPreviewRef = useTemplateRef("assetPreviewRef");
+	const assetPreviewRef = useTemplateRef("assetPreviewRef");
 
-watch(() => props.visible, async (newVal) => {
-  if (newVal) {
-    if(!previewer){
-      await nextTick();
+	watch(
+		() => props.visible,
+		async newVal => {
+			if (newVal) {
+				if (!previewer) {
+					await nextTick();
 
-      previewer = new Preview({
-        container: assetPreviewRef.value,
-        hdr: "/static/resource/hdr/cloudy.hdr",
-        request: {
-          baseUrl:"/file/static/"
-        }
-      });
-    }
+					previewer = new Preview({
+						container: assetPreviewRef.value,
+						hdr: "/static/resource/hdr/cloudy.hdr",
+						request: {
+							baseUrl: "/file/static/",
+						},
+					});
+				}
 
-    if(props.asset.file){
-      previewer.load(getServiceStaticFile(props.asset.file),props.asset.type);
-    }
-  } else {
-    disposePreviewer();
-  }
-})
+				if (props.asset.file) {
+					previewer.load(getServiceStaticFile(props.asset.file), props.asset.type);
+				}
+			} else {
+				disposePreviewer();
+			}
+		}
+	);
 
-onBeforeUnmount(() => {
-  disposePreviewer();
-})
+	onBeforeUnmount(() => {
+		disposePreviewer();
+	});
 
-function disposePreviewer() {
-  if(previewer){
-    previewer.dispose();
-    previewer = null;
-  }
-}
+	function disposePreviewer() {
+		if (previewer) {
+			previewer.dispose();
+			previewer = null;
+		}
+	}
 
-function handleClose() {
-  emits('update:visible', false);
-}
+	function handleClose() {
+		emits("update:visible", false);
+	}
 
-const downloadLoading = ref(false);
+	const downloadLoading = ref(false);
 
-function handleDownload() {
-  downloadLoading.value = true;
+	function handleDownload() {
+		downloadLoading.value = true;
 
-  downloadWithFetch(getServiceStaticFile(props.asset.file)).finally(() => {
-    downloadLoading.value = false;
-  })
-}
+		downloadWithFetch(getServiceStaticFile(props.asset.file)).finally(() => {
+			downloadLoading.value = false;
+		});
+	}
 </script>
 
 <style scoped lang="less">
-#assetPreview {
-  width: calc(100% - 360px);
-  height: 100%;
-}
+	#assetPreview {
+		width: calc(100% - 360px);
+		height: 100%;
+	}
 
-.n-descriptions {
-  height: calc(100% - 65px);
-  margin-bottom: 15px;
-  overflow-y: auto;
-}
-</style>
\ No newline at end of file
+	.n-descriptions {
+		height: calc(100% - 65px);
+		margin-bottom: 15px;
+		overflow-y: auto;
+	}
+</style>