feat: title support fontSize、color configuration (#177)

jd-opensource · Mar 31, 2022 · d83836c · d83836c
1 parent e5bf6eb
commit d83836c
Show file tree

Hide file tree

Showing 5 changed files with 71 additions and 13 deletions.
diff --git a/packages/drip-form/src/components/Title/index.tsx b/packages/drip-form/src/components/Title/index.tsx
@@ -25,6 +25,8 @@ const Title = memo<TitleType>(
             alignItems: Align[titleUi?.verticalAlign],
           }),
           ...(titleUi?.margin && { margin: titleUi.margin }),
+          ...(titleUi?.fontSize && { fontSize: titleUi.fontSize }),
+          ...(titleUi?.color && { color: titleUi.color }),
         }}
       >
         {titleUi?.requiredIcon &&

diff --git a/packages/drip-form/src/render/index.tsx b/packages/drip-form/src/render/index.tsx
@@ -127,19 +127,6 @@ const Render = ({
       }
     }
 
-    // 当前Field的标题样式, property的样式会覆盖全局标题样式
-    const titleUi = Object.assign(
-      {
-        placement: 'left',
-        width: '82px',
-        textAlign: 'left',
-        verticalAlign: 'center',
-        requiredFields: false,
-      },
-      globalTitleUi,
-      properties[item]?.title || {}
-    )
-
     // 当前Field的query函数
     const queryFunc = onQuery?.[item]
     const asyncValidate = onValidate?.[item]
@@ -169,6 +156,25 @@ const Render = ({
       title: uiTitle,
       ...uiProp
     } = properties[item]
+
+    // 当前Field的标题样式, property的样式会覆盖全局标题样式
+    const titleUi = Object.assign(
+      {
+        placement: 'left',
+        width: '82px',
+        textAlign: 'left',
+        verticalAlign: 'center',
+        requiredFields: false,
+        fontSize: 12,
+        color:
+          (uiProp.formMode || formMode) === 'view'
+            ? 'rgba(0,0,0,0.45)'
+            : '#000000',
+      },
+      globalTitleUi,
+      properties[item]?.title || {}
+    )
+
     // 当前Field的提示信息
     const description = uiProp.description || null
     // Field控制函数体

diff --git a/packages/generator/src/fields/common/propertyConfig/title.schema.ts b/packages/generator/src/fields/common/propertyConfig/title.schema.ts
@@ -85,6 +85,31 @@ const unitedSchema = {
         vcontrol: 'return props.formData.title.followRootConfig == false',
       },
     },
+    {
+      type: 'number',
+      title: '标题字体大小',
+      ui: {
+        type: 'number',
+        description: {
+          title: '单位为px',
+          type: 'icon',
+          trigger: 'hover',
+        },
+        vcontrol: 'return props.formData.title.followRootConfig == false',
+      },
+      default: '12',
+      fieldKey: 'fontSize',
+    },
+    {
+      type: 'string',
+      title: '标题字体颜色',
+      ui: {
+        type: 'colorPicker',
+        vcontrol: 'return props.formData.title.followRootConfig == false',
+      },
+      default: '#000000',
+      fieldKey: 'color',
+    },
     {
       fieldKey: 'textAlign',
       type: 'string',

diff --git a/packages/generator/src/fields/container/root.field.ts b/packages/generator/src/fields/container/root.field.ts
@@ -148,6 +148,29 @@ const unitedSchema = [
           ],
         },
       },
+      {
+        type: 'number',
+        title: '标题字体大小',
+        ui: {
+          type: 'number',
+          description: {
+            title: '单位为px',
+            type: 'icon',
+            trigger: 'hover',
+          },
+        },
+        default: '12',
+        fieldKey: 'fontSize',
+      },
+      {
+        type: 'string',
+        title: '标题字体颜色',
+        ui: {
+          type: 'colorPicker',
+        },
+        default: '#000000',
+        fieldKey: 'color',
+      },
       {
         fieldKey: 'textAlign',
         type: 'string',

diff --git a/packages/utils/src/schemaHandle/types.ts b/packages/utils/src/schemaHandle/types.ts
@@ -54,6 +54,8 @@ export type TitleUi = Partial<{
   // 是否展示必填*号
   requiredIcon: boolean
   placement: TitlePlacement
+  color: string
+  fontSize: number | string
 }> | null
 
 type Properties = {