queenshow/src/modules/editor/components/CompUI/basicUI/Page/component.tsx

import { defineComponent } from "vue";
import { string } from "vue-types";
import { useCompData } from ".";
import { useEditor } from "../../../..";
import { useCompRef } from "../hooks";
import { css } from "@linaria/core";
import { PageMusic } from "./PageMusic";
import { MusicOptions } from "./localMusic";

export const Component = defineComponent({
  props: {
    compId: string().isRequired,
  },
  setup(props, { slots }) {
    const editor = useEditor();
    const { helper } = editor;
    const { children, layout, value } = useCompData(props.compId);
    const compRef = useCompRef(props.compId);
    const compMusic = value.music || "";
    const curValue = MusicOptions.find((e) => {
      return e.value == compMusic;
    });
    return () => (
      <div
        ref={compRef}
        style={helper.createStyle(layout || { size: [750] })}
        class={["!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
      >
        <div class="relative">
          {slots.Container?.(
            children.default.map((compId) => {
              const comp = helper.findComp(compId);
              if (!comp) return;
              return slots.CompItem?.(comp);
            })
          )}
          {curValue?.value && !editor.store.isEditMode && <PageMusic />}
        </div>
      </div>
    );
  },
});

const pageEditStyle = css`
  box-shadow: 0 0 0 3000px rgba(0, 0, 0, 0.4);
`;