feat(editor): 样式配置添加变形项

packages/editor/src/fields/StyleSetter/Index.vue

@@ -26,7 +26,7 @@ import type { StyleSchema } from '@tmagic/schema';
 
 import MIcon from '@editor/components/Icon.vue';
 
-import { Background, Border, Font, Layout, Position } from './pro/';
+import { Background, Border, Font, Layout, Position, Transform } from './pro/';
 
 defineOptions({
   name: 'MFieldsStyleSetter',
@@ -60,6 +60,10 @@ const list = [
     title: '边框与圆角',
     component: Border,
   },
+  {
+    title: '变形',
+    component: Transform,
+  },
 ];
 
 const collapseValue = shallowRef(

packages/editor/src/fields/StyleSetter/pro/Transform.vue

@@ -0,0 +1,54 @@
+<template>
+  <MContainer :config="config" :model="values" :size="size" :disabled="disabled" @change="change"></MContainer>
+</template>
+
+<script lang="ts" setup>
+import { type ContainerChangeEventData, defineFormItem, MContainer } from '@tmagic/form';
+import type { StyleSchema } from '@tmagic/schema';
+
+defineProps<{
+  values: Partial<StyleSchema>;
+  disabled?: boolean;
+  size?: 'large' | 'default' | 'small';
+}>();
+
+const emit = defineEmits<{
+  change: [v: StyleSchema, eventData: ContainerChangeEventData];
+}>();
+
+const config = defineFormItem({
+  items: [
+    {
+      name: 'transform',
+      items: [
+        {
+          name: 'rotate',
+          text: '旋转角度',
+          labelWidth: '68px',
+          type: 'data-source-field-select',
+          checkStrictly: false,
+          dataSourceFieldType: ['string', 'number'],
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+        {
+          name: 'scale',
+          text: '缩放',
+          labelWidth: '68px',
+          type: 'data-source-field-select',
+          checkStrictly: false,
+          dataSourceFieldType: ['string', 'number'],
+          fieldConfig: {
+            type: 'text',
+          },
+        },
+      ],
+    },
+  ],
+});
+
+const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
+  emit('change', value, eventData);
+};
+</script>

packages/editor/src/fields/StyleSetter/pro/index.ts

@@ -3,3 +3,4 @@ export { default as Font } from './Font.vue';
 export { default as Layout } from './Layout.vue';
 export { default as Position } from './Position.vue';
 export { default as Border } from './Border.vue';
+export { default as Transform } from './Transform.vue';

packages/editor/src/utils/props.ts

@@ -108,6 +108,10 @@ export const styleTabConfig: TabPaneConfig = {
             'borderColor',
           ],
         } as unknown as ChildConfig,
+        {
+          name: 'transform',
+          defaultValue: () => ({}),
+        },
       ],
     },
   ],