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

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

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>
          <Button type="primary" onClick={() => actions.saveDesign()}>
            保存
          </Button>
        </aside>
      </div>
    );
  },
});