@tmagic/editor 1.8.0-beta.24 → 1.8.0-beta.26

package/src/fields/StyleSetter/pro/Background.vue

@@ -15,14 +15,12 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw } from 'vue';
+import { computed } from 'vue';
 
-import { appendValidateSuggestion } from '@tmagic/design';
-import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
-import BackgroundPosition from '../components/BackgroundPosition.vue';
-import { BackgroundNoRepeat, BackgroundRepeat, BackgroundRepeatX, BackgroundRepeatY } from '../icons/background-repeat';
+import { createBackgroundConfig } from '../configs';
 
 defineProps<{
   values: Partial<StyleSchema>;
@@ -39,105 +37,7 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const formConfig = defineFormConfig([
-  {
-    name: 'backgroundColor',
-    text: '背景色',
-    labelWidth: '68px',
-    type: 'data-source-field-select',
-    fieldConfig: {
-      type: 'colorPicker',
-    },
-    rules: [
-      {
-        typeMatch: true,
-        message: appendValidateSuggestion('背景色应为字符串', '请参考以下示例值："#000000"'),
-      },
-    ],
-  },
-  {
-    name: 'backgroundImage',
-    text: '背景图',
-    labelWidth: '68px',
-    type: 'data-source-field-select',
-    fieldConfig: {
-      type: 'img-upload',
-    } as any,
-  },
-  {
-    name: 'backgroundSize',
-    text: '背景尺寸',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '68px',
-    options: [
-      { value: 'auto', text: '默认', tooltip: '默认 auto' },
-      { value: 'contain', text: '等比填充', tooltip: '等比填充 contain' },
-      { value: 'cover', text: '等比覆盖', tooltip: '等比覆盖 cover' },
-    ],
-    rules: [
-      {
-        typeMatch: false,
-      },
-      {
-        validator: ({ value, callback }) => {
-          if (value === '' || value === null || value === undefined) {
-            return callback();
-          }
-
-          const keywords = ['auto', 'cover', 'contain', 'inherit', 'initial', 'revert', 'unset'];
-          // 单值：关键字 或 长度/百分比
-          const lengthPercent = /^-?\d+(\.\d+)?(px|em|rem|ex|ch|vw|vh|vmin|vmax|cm|mm|in|pt|pc|%)$/;
-          const singleValue = (v: string) => keywords.includes(v) || lengthPercent.test(v);
-
-          const str = String(value).trim();
-          const parts = str.split(/\s+/);
-
-          // cover / contain 不能与其他值组合
-          if (parts.length > 1 && (parts.includes('cover') || parts.includes('contain'))) {
-            return callback('cover/contain 不能与其他值组合');
-          }
-
-          // 多值最多两个
-          if (parts.length > 2) {
-            return callback('backgroundSize 最多支持两个值');
-          }
-
-          // 关键字 auto 在多值场景中允许与其他长度/百分比组合
-          if (parts.every((part) => singleValue(part))) {
-            return callback();
-          }
-
-          return callback('backgroundSize 值不合法');
-        },
-      },
-    ],
-  },
-  {
-    name: 'backgroundRepeat',
-    text: '重复显示',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '68px',
-    options: [
-      { value: 'no-repeat', icon: markRaw(BackgroundNoRepeat), tooltip: '不重复 no-repeat' },
-      { value: 'repeat-x', icon: markRaw(BackgroundRepeatX), tooltip: '水平方向重复 repeat-x' },
-      { value: 'repeat-y', icon: markRaw(BackgroundRepeatY), tooltip: '垂直方向重复 repeat-y' },
-      {
-        value: 'repeat',
-        icon: markRaw(BackgroundRepeat),
-        tooltip: '垂直和水平方向重复 repeat',
-      },
-    ],
-  },
-  {
-    name: 'backgroundPosition',
-    text: '背景定位',
-    type: 'component',
-    component: BackgroundPosition,
-    labelWidth: '68px',
-  },
-]);
+const formConfig = computed(() => createBackgroundConfig());
 
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

package/src/fields/StyleSetter/pro/Border.vue

@@ -1,7 +1,7 @@
 <template>
   <MContainer
     :prop="prop"
-    :config="config"
+    :config="borderRadiusConfig"
     :model="values"
     :last-values="lastValues"
     :is-compare="isCompare"
@@ -22,10 +22,11 @@
 </template>
 
 <script lang="ts" setup>
-import { type ContainerChangeEventData, defineFormItem, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import Border from '../components/Border.vue';
+import { borderRadiusConfig } from '../configs';
 
 defineProps<{
   values: Partial<StyleSchema>;
@@ -41,16 +42,6 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const config = defineFormItem({
-  labelWidth: '68px',
-  name: 'borderRadius',
-  text: '圆角',
-  type: 'data-source-field-select',
-  fieldConfig: {
-    type: 'text',
-  },
-});
-
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);
 };

package/src/fields/StyleSetter/pro/Font.vue

@@ -15,15 +15,14 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw } from 'vue';
+import { computed } from 'vue';
 
-import { appendValidateSuggestion } from '@tmagic/design';
-import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
+import { type ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
-import { validateDataSourceFieldSelectValue } from '@editor/utils/type-match-rules';
+import { validateDataSourceFieldSelect } from '@editor/utils/type-match-rules';
 
-import { AlignCenter, AlignLeft, AlignRight } from '../icons/text-align';
+import { createFontConfig } from '../configs';
 
 defineProps<{
   values: Partial<StyleSchema>;
@@ -39,125 +38,7 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const formConfig = defineFormConfig([
-  {
-    type: 'row',
-    items: [
-      {
-        labelWidth: '68px',
-        name: 'fontSize',
-        text: '字号',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'text',
-        },
-        rules: [
-          {
-            typeMatch: true,
-            message: appendValidateSuggestion('字号应为字符串或数字', '请参考以下示例值：24 或 "24"'),
-          },
-        ],
-      },
-      {
-        labelWidth: '68px',
-        name: 'lineHeight',
-        text: '行高',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-    ],
-  },
-  {
-    name: 'fontWeight',
-    text: '字重',
-    labelWidth: '68px',
-    type: 'data-source-field-select',
-    dataSourceFieldType: ['string', 'number'],
-    fieldConfig: {
-      type: 'select',
-      allowCreate: true,
-      options: ['normal', 'bold']
-        .concat(
-          Array(7)
-            .fill(1)
-            .map((x, i) => `${i + 1}00`),
-        )
-        .map((item) => ({
-          value: item,
-          text: item,
-        })),
-    },
-    rules: [
-      {
-        typeMatch: false,
-      },
-      {
-        validator: ({ value, callback }, { config, model, prop }, mForm) => {
-          if (value === '' || value === null || value === undefined) {
-            return callback();
-          }
-
-          const result = validateDataSourceFieldSelectValue(
-            value,
-            {
-              fieldType: 'data-source-field-select',
-              mForm,
-              props: { config, model, prop },
-            },
-            {
-              // 字重允许 string（含可创建项）与 number（如 700）
-              validatePlainValue: (plainValue) => {
-                if (typeof plainValue === 'string' || (typeof plainValue === 'number' && !Number.isNaN(plainValue))) {
-                  return undefined;
-                }
-                return '字重应为字符串或数字';
-              },
-            },
-          );
-
-          if (result && typeof (result as Promise<string | undefined>).then === 'function') {
-            (result as Promise<string | undefined>).then(
-              (error) => callback(error),
-              (error) => callback(error),
-            );
-            return;
-          }
-
-          return callback(result);
-        },
-      },
-    ],
-  },
-  {
-    labelWidth: '68px',
-    name: 'color',
-    text: '颜色',
-    type: 'data-source-field-select',
-    fieldConfig: {
-      type: 'colorPicker',
-    },
-    rules: [
-      {
-        typeMatch: true,
-        message: appendValidateSuggestion('颜色应为字符串', '请参考以下示例值："#000000"'),
-      },
-    ],
-  },
-  {
-    name: 'textAlign',
-    text: '对齐',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '68px',
-    options: [
-      { value: 'left', icon: markRaw(AlignLeft), tooltip: '左对齐 row', text: '左对齐' },
-      { value: 'center', icon: markRaw(AlignCenter), tooltip: '居中对齐 center', text: '居中对齐' },
-      { value: 'right', icon: markRaw(AlignRight), tooltip: '右对齐 right', text: '右对齐' },
-    ],
-  },
-]);
+const formConfig = computed(() => createFontConfig(validateDataSourceFieldSelect));
 
 const change = (value: StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

package/src/fields/StyleSetter/pro/Layout.vue

@@ -24,35 +24,15 @@
 </template>
 
 <script lang="ts" setup>
-import { markRaw } from 'vue';
+import { computed } from 'vue';
 
 import { useTheme } from '@tmagic/design';
 import type { ContainerChangeEventData } from '@tmagic/form';
-import { defineFormConfig, MContainer } from '@tmagic/form';
+import { MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
 import Box from '../components/Box.vue';
-import {
-  AlignItemsCenter,
-  AlignItemsFlexEnd,
-  AlignItemsFlexStart,
-  AlignItemsSpaceAround,
-  AlignItemsSpaceBetween,
-} from '../icons/align-items';
-import { DisplayBlock, DisplayFlex, DisplayInline, DisplayInlineBlock, DisplayNone } from '../icons/display';
-import {
-  FlexDirectionColumn,
-  FlexDirectionColumnReverse,
-  FlexDirectionRow,
-  FlexDirectionRowReverse,
-} from '../icons/flex-direction';
-import {
-  JustifyContentCenter,
-  JustifyContentFlexEnd,
-  JustifyContentFlexStart,
-  JustifyContentSpaceAround,
-  JustifyContentSpaceBetween,
-} from '../icons/justify-content';
+import { createLayoutConfig } from '../configs';
 
 const props = defineProps<{
   values: Partial<StyleSchema>;
@@ -71,202 +51,7 @@ const emit = defineEmits<{
 
 const displayTheme = useTheme(props);
 
-const formConfig = defineFormConfig([
-  {
-    name: 'display',
-    text: '模式',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '90px',
-    iconSize: '24px',
-    options: [
-      {
-        value: 'inline',
-        icon: markRaw(DisplayInline),
-        tooltip: '内联布局 inline',
-      },
-      {
-        value: 'flex',
-        icon: markRaw(DisplayFlex),
-        tooltip: '弹性布局 flex',
-      },
-      {
-        value: 'block',
-        icon: markRaw(DisplayBlock),
-        tooltip: '块级布局 block',
-      },
-      {
-        value: 'inline-block',
-        icon: markRaw(DisplayInlineBlock),
-        tooltip: '内联块布局 inline-block',
-      },
-      {
-        value: 'none',
-        icon: markRaw(DisplayNone),
-        tooltip: '隐藏 none',
-      },
-    ],
-  },
-  {
-    name: 'flexDirection',
-    text: '主轴方向',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '90px',
-    iconSize: '24px',
-    options: [
-      { value: 'row', icon: markRaw(FlexDirectionRow), tooltip: '水平方向 起点在左侧 row' },
-      {
-        value: 'row-reverse',
-        icon: markRaw(FlexDirectionRowReverse),
-        tooltip: '水平方向 起点在右侧 row-reverse',
-      },
-      {
-        value: 'column',
-        icon: markRaw(FlexDirectionColumn),
-        tooltip: '垂直方向 起点在上沿 column',
-      },
-      {
-        value: 'column-reverse',
-        icon: markRaw(FlexDirectionColumnReverse),
-        tooltip: '垂直方向 起点在下沿 column-reverse',
-      },
-    ],
-    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
-  },
-  {
-    name: 'justifyContent',
-    text: '主轴对齐',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '90px',
-    iconSize: '24px',
-    options: [
-      { value: 'flex-start', icon: markRaw(JustifyContentFlexStart), tooltip: '左对齐 flex-start' },
-      { value: 'flex-end', icon: markRaw(JustifyContentFlexEnd), tooltip: '右对齐 flex-end' },
-      { value: 'center', icon: markRaw(JustifyContentCenter), tooltip: '居中 center' },
-      {
-        value: 'space-between',
-        icon: markRaw(JustifyContentSpaceBetween),
-        tooltip: '两端对齐 space-between',
-      },
-      {
-        value: 'space-around',
-        icon: markRaw(JustifyContentSpaceAround),
-        tooltip: '横向平分 space-around',
-      },
-    ],
-    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
-  },
-  {
-    name: 'alignItems',
-    text: '辅轴对齐',
-    type: 'radioGroup',
-    childType: 'button',
-    labelWidth: '90px',
-    iconSize: '24px',
-    options: [
-      { value: 'flex-start', icon: markRaw(AlignItemsFlexStart), tooltip: '左对齐 flex-start' },
-      { value: 'flex-end', icon: markRaw(AlignItemsFlexEnd), tooltip: '右对齐 flex-end' },
-      { value: 'center', icon: markRaw(AlignItemsCenter), tooltip: '居中 center' },
-      {
-        value: 'space-between',
-        icon: markRaw(AlignItemsSpaceBetween),
-        tooltip: '两端对齐 space-between',
-      },
-      {
-        value: 'space-around',
-        icon: markRaw(AlignItemsSpaceAround),
-        tooltip: '横向平分 space-around',
-      },
-    ],
-    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
-  },
-  {
-    name: 'flexWrap',
-    text: '换行',
-    type: 'radioGroup',
-    childType: displayTheme.value !== 'magic-admin' ? 'button' : 'default',
-    labelWidth: '90px',
-    iconSize: '24px',
-    options: [
-      { value: 'nowrap', text: '不换行', tooltip: '不换行 nowrap' },
-      { value: 'wrap', text: '正换行', tooltip: '第一行在上方 wrap' },
-      { value: 'wrap-reverse', text: '逆换行', tooltip: '第一行在下方 wrap-reverse' },
-    ],
-    display: (_mForm, { model }: { model: Record<any, any> }) => model.display === 'flex',
-  },
-  {
-    type: 'row',
-    items: [
-      {
-        name: 'width',
-        text: '宽度（px）',
-        labelWidth: '90px',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-    ],
-  },
-  {
-    type: 'row',
-    items: [
-      {
-        name: 'height',
-        text: '高度（px）',
-        labelWidth: '90px',
-        type: 'data-source-field-select',
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-    ],
-  },
-  {
-    type: 'row',
-    items: [
-      {
-        type: 'data-source-field-select',
-        text: 'overflow',
-        name: 'overflow',
-        labelWidth: '90px',
-        checkStrictly: false,
-        dataSourceFieldType: ['string'],
-        fieldConfig: {
-          type: 'select',
-          clearable: true,
-          allowCreate: true,
-          options: [
-            { text: 'visible', value: 'visible' },
-            { text: 'hidden', value: 'hidden' },
-            { text: 'clip', value: 'clip' },
-            { text: 'scroll', value: 'scroll' },
-            { text: 'auto', value: 'auto' },
-            { text: 'overlay', value: 'overlay' },
-            { text: 'initial', value: 'initial' },
-          ],
-        },
-      },
-    ],
-  },
-  {
-    type: 'row',
-    items: [
-      {
-        type: 'data-source-field-select',
-        text: '透明度（%）',
-        name: 'opacity',
-        labelWidth: '90px',
-        dataSourceFieldType: ['string', 'number'],
-        fieldConfig: {
-          type: 'text',
-        },
-      },
-    ],
-  },
-]);
+const formConfig = computed(() => createLayoutConfig(displayTheme.value));
 
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);

package/src/fields/StyleSetter/pro/Position.vue

@@ -15,10 +15,13 @@
 </template>
 
 <script lang="ts" setup>
-import { appendValidateSuggestion } from '@tmagic/design';
-import { type ContainerChangeEventData, defineFormConfig, MContainer } from '@tmagic/form';
+import { computed } from 'vue';
+
+import { type ContainerChangeEventData, MContainer } from '@tmagic/form';
 import type { StyleSchema } from '@tmagic/schema';
 
+import { createPositionConfig } from '../configs';
+
 const props = defineProps<{
   values: Partial<StyleSchema>;
   lastValues?: Partial<StyleSchema>;
@@ -33,114 +36,7 @@ const emit = defineEmits<{
   addDiffCount: [];
 }>();
 
-const positionText: Record<string, string> = {
-  static: '不定位',
-  relative: '相对定位',
-  absolute: '绝对定位',
-  fixed: '固定定位',
-  sticky: '粘性定位',
-};
-
-const formConfig = defineFormConfig([
-  {
-    name: 'position',
-    text: '定位',
-    labelWidth: '68px',
-    type: 'data-source-field-select',
-    fieldConfig: {
-      type: 'select',
-      options: Object.keys(positionText).map((item) => ({
-        value: item,
-        text: `${item}(${positionText[item]})`,
-      })),
-    },
-  },
-  {
-    type: 'row',
-    labelWidth: '68px',
-    display: () => props.values.position !== 'static',
-    items: [
-      {
-        name: 'left',
-        type: 'data-source-field-select',
-        text: 'left',
-        fieldConfig: {
-          type: 'text',
-        },
-        rules: [
-          {
-            typeMatch: true,
-            message: appendValidateSuggestion('left 应为字符串', '请参考以下示例值："10"'),
-          },
-        ],
-      },
-      {
-        name: 'top',
-        type: 'data-source-field-select',
-        text: 'top',
-        fieldConfig: {
-          type: 'text',
-        },
-        rules: [
-          {
-            typeMatch: true,
-            message: appendValidateSuggestion('top 应为字符串', '请参考以下示例值："10"'),
-          },
-        ],
-      },
-    ],
-  },
-  {
-    type: 'row',
-    labelWidth: '68px',
-    display: () => props.values.position !== 'static',
-    items: [
-      {
-        name: 'right',
-        type: 'data-source-field-select',
-        text: 'right',
-        fieldConfig: {
-          type: 'text',
-        },
-        rules: [
-          {
-            typeMatch: true,
-            message: appendValidateSuggestion('right 应为字符串', '请参考以下示例值："10"'),
-          },
-        ],
-      },
-      {
-        name: 'bottom',
-        type: 'data-source-field-select',
-        text: 'bottom',
-        fieldConfig: {
-          type: 'text',
-        },
-        rules: [
-          {
-            typeMatch: true,
-            message: appendValidateSuggestion('bottom 应为字符串', '请参考以下示例值："10"'),
-          },
-        ],
-      },
-    ],
-  },
-  {
-    labelWidth: '68px',
-    name: 'zIndex',
-    text: 'zIndex',
-    type: 'data-source-field-select',
-    fieldConfig: {
-      type: 'text',
-    },
-    rules: [
-      {
-        typeMatch: true,
-        message: appendValidateSuggestion('zIndex 应为数字', '请参考以下示例值：10'),
-      },
-    ],
-  },
-]);
+const formConfig = computed(() => createPositionConfig(props.values));
 
 const change = (value: string | StyleSchema, eventData: ContainerChangeEventData) => {
   emit('change', value, eventData);