更新打包配置，完善组件入参模式，新增事件总线

2025-05-08 11:34:35 +08:00
parent cfbfda520d
commit 4a648c2f97
14 changed files with 1091 additions and 26609 deletions
--- a/src/components/MaterialAdjuster.vue
+++ b/src/components/MaterialAdjuster.vue
@@ -1,5 +1,21 @@
 <template>
    <div vertical class="material-adjuster">
+        <div class="adjust-section">
+            <h3>操作</h3>
+            <fieldset v-if="debugMode" style="margin: 1em 0;">
+                <legend>DEBUG</legend>
+                <label>上传路径ID</label>
+                <input v-model="materialInfo.dirId" type="text" placeholder="材质路径ID" />
+            </fieldset>
+            <label>材质名</label>
+            <input v-model.trim="materialInfo.materialName" type="text" placeholder="材质名" />
+
+            <!-- <CfFlex gap="1em">
+                <button class="btn-success" style="min-width: 110px;" @click="HandleUpload">上传</button>
+                <button class="btn-danger" style="min-width: 110px;" @click="HandleCancel">取消</button>
+            </CfFlex> -->
+        </div>
+
        <div class="adjust-section">
            <h3>模型预览</h3>
            <label>选择模型样式</label>
@@ -10,8 +26,8 @@
        <div class="adjust-section" v-if="debugMode">
            <h3>纹理选择（DEBUG）</h3>
            <label>纹理链接</label>
-            <input v-model.trim="textureLink" type="text" placeholder="在此键入纹理图像的URL..." />
-            <button class="btn-primary" @click="scene.ChangeTextureAsync(textureLink)"
+            <input v-model.trim="_textureSrc" type="text" placeholder="在此键入纹理图像的URL..." />
+            <button class="btn-primary" @click="scene.ChangeTextureAsync(_textureSrc)"
                style="margin-left: 1em;">应用</button>
        </div>
        <div class="adjust-section">
@@ -85,39 +101,41 @@
            </div>

        </div>
-
-        <div class="adjust-section">
-            <h3>操作</h3>
-            <fieldset v-if="debugMode" style="margin: 1em 0;">
-                <legend>DEBUG</legend>
-                <label>上传路径ID</label>
-                <input v-model="materialRequest.dirId" type="text" placeholder="材质路径ID" />
-            </fieldset>
-            <label>材质名</label>
-            <input v-model="materialRequest.materialName" type="text" placeholder="材质名" />
-
-            <CfFlex gap="1em">
-                <button class="btn-success" style="min-width: 110px;" @click="HandleUpload">上传</button>
-                <button class="btn-danger" style="min-width: 110px;" @click="HandleCancel">取消</button>
-            </CfFlex>
-        </div>
    </div>
 </template>

 <script setup lang='ts'>
-import { ref, reactive, watch } from "vue"
+import { ref, reactive, watch, onMounted } from "vue"
 import { useScene, type TextureAdjustment } from "../stores/sceneStore";
 import { storeToRefs } from "pinia";
 import CfFlex from "./CfFlex.vue";
 import { DirectoryId } from "../api/Request";
 import { IsNullOrWhitespace } from "../helpers/helper.string";
+import { DeflateAsync } from "../helpers/helper.compression";
+
+export interface MaterialRequest {
+    /** 材质名 */
+    name: string;
+    /** 材质logo文件 */
+    logo: Blob;
+    /** 序列化并Deflate压缩后的材质文件的Base64编码 */
+    file: string;
+}

 const scene = useScene();

-const debugMode = ref(true);
+const props = defineProps<{
+    textureSrc?: string;
+}>();
+const emits = defineEmits<{
+    (e: 'cancel'): void;
+    (e: 'submit', data: MaterialRequest): void; 
+}>();
+
+const debugMode = ref(false);
 const { CurrGeometry, Geometries, Material } = storeToRefs(scene);
 const enableTexture = ref(Material.value.useMap);
-const textureLink = ref('');
+const _textureSrc = ref(props.textureSrc);
 const textureAdjustment = reactive<TextureAdjustment>({
    wrapS: 0,
    wrapT: 0,
@@ -134,9 +152,18 @@ const model = reactive({
    normalScale: Material.value.bumpScale,
    emissiveIntensity: Material.value.specular
 });
-const materialRequest = reactive({
+const materialInfo = reactive({
    dirId: DirectoryId.MaterialDir, // 正常来说是2
-    materialName: ''
+    materialName: '材质1'
+});
+
+onMounted(() => {
+    scene.ChangeTextureAsync(_textureSrc.value);
+})
+
+watch(() => props.textureSrc, async (val) => {
+    _textureSrc.value = val;
+    await scene.ChangeTextureAsync(_textureSrc.value);
 });

 watch(model, async (val) => {
@@ -171,25 +198,34 @@ async function EnableTexture(enable: boolean) {

 async function HandleUpload() {
    try {
-        if (IsNullOrWhitespace(materialRequest.materialName)) {
+        if (IsNullOrWhitespace(materialInfo.materialName)) {
            alert('材质名称不可为空');
            return;
        }

        uploading.value = true;
-        await scene.UploadMaterialAsync(materialRequest);
+        const data = {
+            name: materialInfo.materialName,
+            logo: await scene.GenerateMaterialLogoAsync(),
+            // jsonString -> Deflate -> BinaryString -> Base64
+            file: btoa(String.fromCharCode(...await DeflateAsync(await scene.SerializeMaterialAsync())))
+        };
+        emits('submit', data);
+        return data;
+    } finally {
        uploading.value = false;
-        alert("上传成功");
-    } catch (error) {
-        console.error(error);
-        alert("上传材质出错，请检查网络连接或联系管理员");
    }
 }

-async function HandleCancel() {
-    // TODO: 触发取消事件
+function HandleCancel() {
+    emits('cancel');
 }

+defineExpose({
+    Upload: HandleUpload,
+    Cancel: HandleCancel
+})
+
 </script>

 <style scoped>
--- a/src/components/MaterialView.vue
+++ b/src/components/MaterialView.vue
@@ -1,35 +1,59 @@
 <template>
    <CfFlex class="material-view">
-        <div ref="container" style="width: 100%; height: 100%; flex: 3; box-sizing: border-box;" />
-        <MaterialAdjuster style="flex: 1;overflow-y: auto; width: 100%; height: 100%; box-sizing: border-box;" />
+        <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, useTemplateRef } from 'vue';
+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 container = useTemplateRef<HTMLElement>('container');
+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>
+<style scoped lang="scss">
 .material-view
 {
    width: 100%;
-    height: 100vh;
+    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>