From fa09ab0b301d9bc9f6a9462fc022418bbf21cee3 Mon Sep 17 00:00:00 2001
From: roymondchen <roymondchen@tencent.com>
Date: Mon, 13 Apr 2026 20:04:23 +0800
Subject: [PATCH] =?UTF-8?q?feat(editor):=20=E6=A0=B7=E5=BC=8F=E9=85=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=B7=BB=E5=8A=A0=E5=8F=98=E5=BD=A2=E9=A1=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../editor/src/fields/StyleSetter/Index.vue   |  6 ++-
 .../src/fields/StyleSetter/pro/Transform.vue  | 54 +++++++++++++++++++
 .../src/fields/StyleSetter/pro/index.ts       |  1 +
 packages/editor/src/utils/props.ts            |  4 ++
 4 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 packages/editor/src/fields/StyleSetter/pro/Transform.vue

diff --git a/packages/editor/src/fields/StyleSetter/Index.vue b/packages/editor/src/fields/StyleSetter/Index.vue
index 90f5e093..74fc68a5 100644
--- a/packages/editor/src/fields/StyleSetter/Index.vue
+++ b/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(
diff --git a/packages/editor/src/fields/StyleSetter/pro/Transform.vue b/packages/editor/src/fields/StyleSetter/pro/Transform.vue
new file mode 100644
index 00000000..e4bc771a
--- /dev/null
+++ b/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>
diff --git a/packages/editor/src/fields/StyleSetter/pro/index.ts b/packages/editor/src/fields/StyleSetter/pro/index.ts
index b1ef5376..a3a07216 100644
--- a/packages/editor/src/fields/StyleSetter/pro/index.ts
+++ b/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';
diff --git a/packages/editor/src/utils/props.ts b/packages/editor/src/utils/props.ts
index a571f859..9b632e4d 100644
--- a/packages/editor/src/utils/props.ts
+++ b/packages/editor/src/utils/props.ts
@@ -108,6 +108,10 @@ export const styleTabConfig: TabPaneConfig = {
             'borderColor',
           ],
         } as unknown as ChildConfig,
+        {
+          name: 'transform',
+          defaultValue: () => ({}),
+        },
       ],
     },
   ],