queenshow/src/modules/editor/components/CompUI/defines/alignMulti.tsx

import { useEditor } from "@/modules/editor";
import { DesignComp } from "@/modules/editor/objects/DesignTemp/DesignComp";
import { SelItemsAlignTools, CompAlignTools } from "@/modules/editor/objects/Toolbars/liveTools";
import { css } from "@linaria/core";
import { defineComponent } from "vue";
import { string } from "vue-types";

export default defineComponent({
  props: {
    value: string(),
  },
  setup(props) {
    const editor = useEditor();
    return ()=>{
      const state = editor.controls.selectCtrl.gizmo.state;

      return (
        <>
          {
            state.transform.selected.length > 1 && <div class={AlignToolsStyle}>
                <div>
                    <span class="text-white">元素 (已选{state.transform.selected.length})</span>
                </div>

                <div class="flex py-12px px-0px items-center">
                    <span class="pr-32px">对齐</span>
                    <div class="row flex-1 flex">
                        {SelItemsAlignTools.Left.map((item) => {
                        return item.getVisible.call(editor, null as any) ? (
                            <item.component
                            class="p-4px flex-1"
                            onClick={() => item.onClick.call(editor, null as any)}
                            />
                        ) : null;
                        })}
                    </div>
                    <div class="row ml-10px flex-1 flex">
                        {SelItemsAlignTools.right.map((item) => {
                        return item.getVisible.call(editor, null as any) ? (
                            <item.component
                            class="p-4px flex-1"
                            onClick={() => item.onClick.call(editor, null as any)}
                            />
                        ) : null;
                        })}
                    </div>
                </div>
                <div class = "mt-16px">
                    <span class="text-white">布局</span>
                </div>
                <div class="flex py-12px px-0px items-center">
                    <span class="pr-32px">对齐</span>
                    <div class="row flex-1 flex">
                        {CompAlignTools.Left.map((item) => {
                        return item.getVisible.call(editor, null as any) ? (
                            <item.component
                            class="p-4px flex-1"
                            onClick={() => item.onClick.call(editor, null as any, true)}
                            />
                        ) : null;
                        })}
                    </div>
                    <div class="row ml-10px flex-1 flex">
                        {CompAlignTools.right.map((item) => {
                        return item.getVisible.call(editor, null as any) ? (
                            <item.component
                            class="p-4px flex-1"
                            onClick={() => item.onClick.call(editor, null as any, true)}
                            />
                        ) : null;
                        })}
                    </div>
                </div>
            </div>
          }
        </>
      );
    };
  },
});

const AlignToolsStyle = css`
  flex: 1;
  display: flex;
  flex-direction: column;

  .row {
    background: #303030;
    border-radius: 4px 4px 4px 4px;
  }
`;