material-editor/src/components/MaterialView.vue

<template>
    <CfFlex class="material-view">
        <div ref="container" class="material-view-container" />
        <MaterialAdjuster ref="adjuster" class="material-view-sider" :texture-src="textureSrc" @cancel="config.cancelCallback" @submit="config.submitCallback" />
    </CfFlex>
</template>
<script setup lang="ts">
import { onMounted, ref, useTemplateRef } from 'vue';
import MaterialAdjuster from './MaterialAdjuster.vue';
import { useScene } from '../stores/sceneStore';
import CfFlex from './CfFlex.vue';
import { GetConfig } from '../lib/libOutputConfig';
import { useEvent } from '../stores/eventStore';

const scene = useScene();
const eventbus = useEvent();
const container = useTemplateRef('container');
const adjusterRef = useTemplateRef('adjuster');
const config = GetConfig();
const textureSrc = ref(config.textureSrc);

// 禁用右键菜单
document.addEventListener('contextmenu', (e) => e.preventDefault()); 

onMounted(() => {
    scene.Initial(container.value);
    eventbus.Subscribe('submit', () => adjusterRef.value.Upload());
    eventbus.Subscribe('update-texture', () => {
        textureSrc.value = config.textureSrc
    });
});

</script>

<style scoped lang="scss">
.material-view
{
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: 0;
    margin: 0;
    overflow: hidden;

    &-container {
        flex: 3 1; 
        height: 100%; 
        box-sizing: border-box;
        overflow: hidden;
    }

    &-sider {
        flex: 1 1;
        overflow-y: auto; 
        height: 100%; 
        box-sizing: border-box;
    }
}
</style>