queenshow/src/modules/editor/components/Preview/index.tsx

import { defineUI } from "queenjs";
import { useEditor } from "../..";
import { CompUI } from "../CompUI";

export default defineUI({
  setup() {
    const { store, helper } = useEditor();
    return () => (
      <div
        class="overflow-hidden min-h-100vh"
        style={helper.createStyle(helper.findRootComp()?.layout || {})}
      >
        {store.pageCompIds.map((id) => {
          const compKey = store.designData.compMap[id]?.compKey;
          const Comp: any = (CompUI[compKey] || CompUI.Container).Component;
          return (
            Comp && (
              <div class="flex flex-col" key={id}>
                <Comp compId={id} />
              </div>
            )
          );
        })}
      </div>
    );
  },
});