queenshow/src/pages/website/CreateMat/index.tsx

import { useResource } from "@/modules/resource";
import { initQueditor } from "@queenjs-modules/queditor";
import { initExpViewer } from "@queenjs-modules/queentree-explorer-viewer";
import { defineComponent, onBeforeUnmount, onMounted } from "vue";
import { useRoute } from "vue-router";
import AttrPanel from "./components/AttrPanel";
import Header from "./components/Header";
import TreePanel from "./components/TreePanel";

export default defineComponent({
  setup() {
    const route = useRoute();
    const expViewer = initExpViewer({
      modules: {
        queditor: initQueditor({
          config: {
            dragEnable: true,
          },
        }),
      },
    });
    const resource = useResource();

    const { queditor } = expViewer.modules;

    expViewer.initComponents({
      Viewport: {
        Header: {
          default: Header,
        },
        EditPanel: {
          default: AttrPanel,
        },
      },
    });

    queditor.initComponents({
      Viewport: {
        SiderLeft: {
          default: TreePanel,
        },
        Toolbar: {
          default: () => null,
        },
      },
    });

    const { id } = route.params;

    const init = async () => {
      await resource.actions.queryTplsDetail(id as string);
      queditor.actions.initPack(resource.store.sourceDetail?.webEditor?.pack);
      queditor.store.setCurrScene(0);
      expViewer.store.setEditNodeUid(resource.store.sourceDetail._id);
    };

    onMounted(() => init());

    onBeforeUnmount(() => resource.store.setSourceDetail({}));

    return () => {
      return (
        <div class="h-100vh">
          <expViewer.components.Viewport />
        </div>
      );
    };
  },
});