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

import { useEditor } from "@/modules/editor";
import { Button, Dropdown, Radio } from "ant-design-vue";
import { defineUI } from "queenjs";
import { ShareBox } from "./ShareBox";

export default defineUI({
  setup() {
    const { store, actions } = useEditor();
    return () => (
      <div class="flex justify-between">
        <aside></aside>
        <Radio.Group
          value={store.mode}
          onChange={(e) => actions.switchMode(e.target.value)}
        >
          <Radio.Button value="edit">编辑</Radio.Button>
          <Radio.Button value="preview">预览</Radio.Button>
        </Radio.Group>

        <aside class="space-x-10px">
          <Dropdown
            overlay={<ShareBox />}
            trigger="click"
            placement="bottomRight"
          >
            <Button>分享</Button>
          </Dropdown>
          <Button type="primary" onClick={() => actions.saveDesign()}>
            保存
          </Button>
        </aside>
      </div>
    );
  },
});