fix(home): 修复模型预览UI没对齐的bug

packages/editor/src/components/preview/AssetPreview.vue

@@ -1,8 +1,20 @@
 <template>
-  <n-modal :show="visible" @update:show="emits('update:visible',$event)" display-directive="show"
+	<n-modal
-           class="w-66vw h-66vh min-w-1000px" @close="emits('update:visible',false)">
+		:show="visible"
-    <n-card :title="asset.name" embedded size="small" content-class="!p-0 flex gap-x-15px" closable
+		@update:show="emits('update:visible', $event)"
-            @close="handleClose">
+		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">
@@ -17,18 +29,14 @@
 						{{ asset.categoryName || asset.category }}
 					</n-descriptions-item>
 					<n-descriptions-item :label="t('bim.Thumbnail')">
-            <n-image
+						<n-image width="120" :src="getServiceStaticFile(asset.thumbnail)" />
-                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"
+						<n-tag type="success" :bordered="false" class="ml-5px" v-for="tag in asset.tags ? asset.tags.split(',') : []" :key="tag">
-                   v-for="tag in (asset.tags ? asset.tags.split(',') : [])" :key="tag">
 							{{ tag }}
 						</n-tag>
 					</n-descriptions-item>
@@ -41,7 +49,7 @@
 				</n-descriptions>
 
 				<n-button type="primary" class="w-full" :loading="downloadLoading" @click="handleDownload">
-          {{ t('plugin.gltfHandler.Download') }}
+					{{ t("plugin.gltfHandler.Download") }}
 				</n-button>
 			</div>
 		</n-card>
@@ -54,29 +62,34 @@ import {Preview} from "@astral3d/engine";
 	import { t } from "@/language";
 	import { downloadWithFetch, filterSize, getServiceStaticFile } from "@/utils/common/file";
 
-const props = withDefaults(defineProps<{
+	const props = withDefaults(
-  visible: boolean,
+		defineProps<{
-  asset: IAssets.Item
+			visible: boolean;
-}>(), {
+			asset: IAssets.Item;
+		}>(),
+		{
 			visible: false,
 			asset: () => ({
 				name: "",
-    type: 'Model',
+				type: "Model",
 				category: "",
 				thumbnail: "",
 				size: 0,
-    file: '',
+				file: "",
 				createTime: "",
-    updateTime: ""
+				updateTime: "",
-  })
+			}),
-})
+		}
-const emits = defineEmits(['update:visible'])
+	);
+	const emits = defineEmits(["update:visible"]);
 
 	let previewer: Preview | null = null;
 
 	const assetPreviewRef = useTemplateRef("assetPreviewRef");
 
-watch(() => props.visible, async (newVal) => {
+	watch(
+		() => props.visible,
+		async newVal => {
 			if (newVal) {
 				if (!previewer) {
 					await nextTick();
@@ -85,8 +98,8 @@ watch(() => props.visible, async (newVal) => {
 						container: assetPreviewRef.value,
 						hdr: "/static/resource/hdr/cloudy.hdr",
 						request: {
-          baseUrl:"/file/static/"
+							baseUrl: "/file/static/",
-        }
+						},
 					});
 				}
 
@@ -96,11 +109,12 @@ watch(() => props.visible, async (newVal) => {
 			} else {
 				disposePreviewer();
 			}
-})
+		}
+	);
 
 	onBeforeUnmount(() => {
 		disposePreviewer();
-})
+	});
 
 	function disposePreviewer() {
 		if (previewer) {
@@ -110,7 +124,7 @@ function disposePreviewer() {
 	}
 
 	function handleClose() {
-  emits('update:visible', false);
+		emits("update:visible", false);
 	}
 
 	const downloadLoading = ref(false);
@@ -120,7 +134,7 @@ function handleDownload() {
 
 		downloadWithFetch(getServiceStaticFile(props.asset.file)).finally(() => {
 			downloadLoading.value = false;
-  })
+		});
 	}
 </script>