queenshow/src/modules/editor/components/CompUI/basicUI/Page/screen.tsx

import { useEditor } from "@/modules/editor";
import { Select } from "ant-design-vue";
import { defineComponent } from "vue";

export default defineComponent({
  setup(props, ctx) {
    const editor = useEditor();
    const ctrl = editor.controls.screenCtrl;

    return () => {
      return (
        <div class="px-16px">
          {/* <div class="flex items-center my-15px">
            <span class="w-70px text-12px">屏幕类型</span>
            <Select
              value={ctrl.state.screen.useFor}
              onChange={(v) => {
                const s = {
                  useFor: v,
                  pageMode: ctrl.state.screen.pageMode,
                  pageSizeType: ctrl.state.screen.pageSizeType,
                };
                ctrl.saveScreenPage();
                ctrl.state.setScreen(s as any);
                setTimeout(() => {
                  editor.controls.editorCtrl.autoInScreen();
                }, 0);
              }}
              class="flex-1 overflow-hidden"
              options={[
                { label: "手机", value: "mobile" },
                { label: "PC", value: "pc" },
              ]}
            />
          </div> */}
          <div class="flex items-center my-15px">
            <span class="w-70px text-12px">页面模式</span>
            <Select
              onChange={(v) => {
                ctrl.saveScreenPage();
                const s = {
                  useFor: ctrl.state.screen.useFor,
                  pageMode: v,
                  pageSizeType: ctrl.state.screen.pageSizeType,
                };
                if (v == "long") {
                  s.pageSizeType = "normal";
                }
                ctrl.state.setScreen(s as any);
                setTimeout(() => {
                  editor.controls.editorCtrl.autoInScreen();
                }, 0);
              }}
              value={ctrl.state.screen.pageMode}
              class="flex-1 overflow-hidden"
              options={[
                { label: "H5长页", value: "long" },
                { label: "翻页", value: "short" },
              ]}
            />
          </div>
          {ctrl.state.screen.pageMode == "short" &&
            ctrl.state.screen.useFor == "mobile" && (
              <div class="flex items-center my-15px">
                <span class="w-70px text-12px">屏幕长度</span>
                <Select
                  onChange={(v) => {
                    ctrl.saveScreenPage();
                    const s = {
                      useFor: ctrl.state.screen.useFor,
                      pageMode: ctrl.state.screen.pageMode,
                      pageSizeType: v,
                    };
                    ctrl.state.setScreen(s as any);
                  }}
                  value={ctrl.state.screen.pageSizeType}
                  class="flex-1 overflow-hidden"
                  options={[
                    { label: "短屏幕", value: "short" },
                    { label: "普通屏幕", value: "normal" },
                    // { label: "长屏幕", value: "long" },
                  ]}
                />
              </div>
            )}
        </div>
      );
    };
  },
});