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

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

export const Component = defineComponent({
  props: {
    compId: string().isRequired,
  },
  setup(props, { slots }) {
    const editor = useEditor();
    const { helper, store, controls } = editor;
    const compRef = useCompRef(props.compId);

  

    return () => {
      const page = controls.pageCtrl;

      const comp = useCompData<CompPageObj>(props.compId);
      const { children, layout, value } = comp;
      const compMusic = value.music || "";
      const curValue = MusicOptions.find((e) => {
        return e.value == compMusic;
      });
      const style = helper.createStyle(layout || { size: [750] }, comp);
      if (comp.value.pageMode == "short" && store.isDisplay) {
        style.height = "100vh";
        style.width = "100vw";
      } 

      let contextStyle:any = null;
      if (page.rootPage.value.pageMode == "short" && !store.isEditMode) {
        contextStyle = { transform: `translate(0, ${ -store.shortPage.index * window.innerHeight + store.shortPage.offset}px`};
        if (!store.shortPage.isMoving) {
          contextStyle.transition = "transform .4s ease-out";
        }
      }
      console.log("curr card=>", store.currStreamCardId, store.currStreamCard?.children.default?.length);
      style.transform = "matrix(1,0,0,1,0,0)";
      style.overflow = "unset";

      return (
        <div
          ref={compRef}
          style={style}
          class={[comp.value.pageMode != "short" && "!h-auto", editor.store.isEditMode ? pageEditStyle : ""]}
        >
          {
             (store.isDisplay || (store.isEditMode && controls.screenCtrl.state.screen.pageMode != "short")) && <div class="relative z-1000" style={contextStyle}>
             {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>

          }
          {
            store.isEditMode && controls.screenCtrl.state.screen.pageMode == "short" && store.currStreamCard && <div class="relative z-1000" style={contextStyle}>
              {
                slots.Container?.( [slots.CompItem?.(store.currStreamCard)])
              }
            </div>
          }

        </div>
      );
    };
  },
});

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