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

import { defineUI } from "queenjs";
import Content from "./Content";
import Header from "./Header";
import SliderLeft from "./Slider/SliderLeft";
import SliderRight from "./Slider/SliderRight";
import Toolbar from "./Toolbar";

export default defineUI({
  slots: {
    Header,
    SliderLeft,
    SliderRight,
    Content,
    Toolbar,
  },

  setup(props, { slots }) {
    return () => (
      <div class="flex flex-col h-1/1">
        {/* <slots.Header class="px-20px py-10px bg-component border-bottom !border-2px" /> */}
        <div class="flex flex-1 h-0">
          <slots.SliderLeft class="bg-component border-right !border-2px" />
          <div class="flex-1 relative flex flex-col overflow-hidden">
            <slots.Toolbar />
            <slots.Content />
          </div>
          <slots.SliderRight class="w-300px bg-component border-left !border-2px" />
        </div>
      </div>
    );
  },
});