udpate

src/modules/editor/components/CompUI/defines/align.tsx

@@ -0,0 +1,31 @@
+import { CompAlignTools } from "@/modules/editor/objects/Toolbars/liveTools";
+import { css } from "@linaria/core";
+import { defineComponent, reactive, watchEffect } from "vue";
+
+export default defineComponent({
+  props: {
+
+  },
+  emits: ["change"],
+  setup(props, { emit }) {
+    const state = reactive({
+    });
+
+    return () => {
+      
+      return (
+        <div class={AlignToolsStyle}>
+            {
+                CompAlignTools
+            }
+        </div>
+      );
+    };
+  },
+});
+
+const AlignToolsStyle = css`
+  flex: 1;
+  display: flex;
+  align-items: center;
+`;

src/modules/editor/objects/Toolbars/liveTools.ts

@@ -1,4 +1,5 @@
 import { ToolbarItem, toolbars } from "./default";
+import { LayoutToolbars } from "./layout";
 
 export const LiveToolbars: ToolbarItem[] = [
     toolbars.imageCropper,
@@ -7,4 +8,14 @@ export const LiveToolbars: ToolbarItem[] = [
     toolbars.createGroup,
     toolbars.cancelGroup,
     toolbars.delete
+]
+
+export const CompAlignTools:ToolbarItem[] = [
+    LayoutToolbars.xLeft,
+    LayoutToolbars.xCenter,
+    LayoutToolbars.xRight,
+
+    LayoutToolbars.YTop,
+    LayoutToolbars.YCenter,
+    LayoutToolbars.YBottom
 ]