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

import { useEditor } from "@/modules/editor";
import { defineUI } from "queenjs";
import { TipIcons } from "../../TipIcons";
import { css } from "@linaria/core";
import { useLauncher } from "@/modules/launcher";

export default defineUI({
  setup() {
    const { actions, controls } = useEditor();
    const launcher = useLauncher();
    const { history } = controls.historyCtrl;
    return () => (
      <>
        <div class="absolute top-20px left-20px space-x-10px z-999">
          <TipIcons.Undo
            disable={!history.state.canUndo}
            class={btnCls}
            onClick={() => history.undo()}
          />
          <TipIcons.Redo
            disable={!history.state.canRedo}
            class={btnCls}
            onClick={() => history.redo()}
          />
        </div>
        <div class="absolute top-20px right-20px space-x-10px z-999">
          <TipIcons.AiText
            class={btnCls}
            onClick={() => {
              console.log(1);
            }}
          />
          <TipIcons.Screenshot
            class={btnCls}
            onClick={() => actions.updateThumbnailByScreenshot(true)}
          />
        </div>
        <div class="absolute bottom-20px right-20px z-999">
          <TipIcons.QueenService
            class={btnCls}
            onClick={() => {
              launcher.showModal(<launcher.components.Viewport />, {
                width: "400px",
              });
            }}
          />
        </div>
      </>
    );
  },
});

const btnCls = css`
  padding: 10px;
  border-radius: 50%;
  background-color: #333;
  @apply shadow;
`;