ljq/TkAstral3D
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
ErSan 2026-03-23 17:30:58 +08:00
parent ada597137f
commit ad2dd979eb
1 changed files with 130 additions and 116 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
packages/editor/src/components/preview/AssetPreview.vue
View File

@ -1,8 +1,20 @@
<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">
<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">
@ -17,18 +29,14 @@
{{ asset.categoryName || asset.category }}
</n-descriptions-item>
<n-descriptions-item :label="t('bim.Thumbnail')">
<n-image
width="120"
:src="getServiceStaticFile(asset.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">
<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>
@ -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<{
visible: boolean,
asset: IAssets.Item
}>(), {
const props = withDefaults(
defineProps<{
visible: boolean;
asset: IAssets.Item;
}>(),
{
visible: false,
asset: () => ({
name: "",
type: 'Model',
type: "Model",
category: "",
thumbnail: "",
size: 0,
file: '',
file: "",
createTime: "",
updateTime: ""
})
})
const emits = defineEmits(['update:visible'])
updateTime: "",
}),
}
);
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>