feat:大屏对齐

src/views/components/PenProps.vue

@@ -49,6 +49,29 @@
             </t-select-input>
           </div>
           <t-divider style="margin: -8px 0" />
+          <div style="margin: 0 16px 16px 16px">
+            <t-space direction="vertical" size="small" class="w-full">
+              <div style="color: var(--color); margin-bottom: 2px">
+                大屏对齐
+              </div>
+              <div class="icons">
+                <t-tooltip
+                  v-for="item in aligns"
+                  :content="item.label"
+                  placement="top"
+                >
+                  <svg
+                    class="l-icon btn"
+                    aria-hidden="true"
+                    @click="align(item.value)"
+                  >
+                    <use :xlink:href="item.icon"></use>
+                  </svg>
+                </t-tooltip>
+              </div>
+            </t-space>
+          </div>
+          <t-divider style="margin: -8px 0" />
           <div class="form-item" style="margin-top: -12px">
             <t-input
               class="ml-4"
@@ -1148,6 +1171,43 @@ const iconsDrawer = reactive<any>({
   show: false,
 });
 
+const aligns = [
+  {
+    value: 'left',
+    label: '左对齐',
+    icon: '#l-align-left',
+  },
+  {
+    value: 'center',
+    label: '垂直居中对齐',
+    icon: '#l-align-center',
+  },
+  {
+    value: 'right',
+    label: '右对齐',
+    icon: '#l-align-right',
+  },
+  {
+    value: 'top',
+    label: '顶部对齐',
+    icon: '#l-align-top',
+  },
+  {
+    value: 'middle',
+    label: '水平居中对齐',
+    icon: '#l-align-middle',
+  },
+  {
+    value: 'bottom',
+    label: '底部对齐',
+    icon: '#l-align-bottom',
+  },
+];
+
+const align = (align: string) => {
+  meta2d.alignNodesV(align, meta2d.store.active);
+};
+
 onBeforeMount(() => {
   if (inTreePanel.value) {
     data.tab = 5;
@@ -1387,5 +1447,19 @@ onUnmounted(() => {
 </script>
 <style lang="postcss" scoped>
 .props {
+  .icons {
+    display: flex;
+
+    svg:hover {
+      cursor: pointer;
+      color: var(--color-primary);
+    }
+
+    .btn {
+      font-size: 16px;
+      margin-right: 16px;
+      color: var(--color);
+    }
+  }
 }
 </style>