🆕 form组件文本框字段修改 表单组件中添加展示型文本,用来对字段说明

readme.md

@@ -107,6 +107,9 @@ FileSaver.saveAs(blob, "hello world.txt");
 15.升级图片组件为图文组件
 16. 添加模版库
 17. 添加可视化组件(基于g2)如折线图, 饼图, 面积图等
+18. form组件文本框字段修改
+19. 清空按钮添加确认框
+20. 表单组件中添加展示型文本,用来对字段说明
 
 ## 正在完成功能
 * 丰富组件库组件

src/components/BasicShop/BasicComponents/Form/BaseForm.tsx

@@ -9,6 +9,7 @@ import {
   baseFormNumberTpl,
   baseFormTextAreaTpl,
   baseFormTextTpl,
+  baseFormTextTipTpl,
   baseFormUnionType,
 } from '@/components/PanelComponents/FormEditor/types';
 // 维护表单控件， 提高form渲染性能
@@ -113,6 +114,10 @@ const BaseForm: TBaseForm = {
       </Cell>
     );
   },
+  MyTextTip: (props: baseFormTextTipTpl) => {
+    const { label, color, fontSize } = props;
+    return <Cell title={<div style={{ color, fontSize }}>{label}</div>}></Cell>;
+  },
 };
 
 export default BaseForm;

src/components/BasicShop/BasicComponents/Form/BasePopoverForm.tsx

@@ -8,6 +8,7 @@ import {
   baseFormNumberTpl,
   baseFormTextAreaTpl,
   baseFormTextTpl,
+  baseFormTextTipTpl,
   baseFormUnionType,
 } from '@/components/PanelComponents/FormEditor/types';
 
@@ -88,6 +89,21 @@ const BaseForm: TBaseForm = {
       </Button>
     );
   },
+  MyTextTip: (props: baseFormTextTipTpl) => {
+    const { label } = props;
+    return (
+      <Button
+        style={{
+          color: '#fff',
+          backgroundColor: '#4A4A4A',
+          borderRadius: '2px',
+          lineHeight: '0px',
+        }}
+      >
+        {label}
+      </Button>
+    );
+  },
 };
 
 export default BaseForm;

src/components/PanelComponents/FormEditor/types.ts

@@ -157,6 +157,15 @@ export type baseFormTextTpl = {
   label: string;
   placeholder: string;
 };
+
+export type baseFormTextTipTpl = {
+  id: string;
+  type: 'MyTextTip';
+  label: string;
+  color: string;
+  fontSize: number;
+};
+
 export type baseFormNumberTpl = {
   id: string;
   type: 'Number';
@@ -198,9 +207,10 @@ export type baseFormDateTpl = {
   label: string;
   placeholder: string;
 };
-//类型不要乱加，这部分是FormItems的类型定义，只有新增formItems的配置项才需要加！
+
 export type baseFormUnion =
   | baseFormTextTpl
+  | baseFormTextTipTpl
   | baseFormNumberTpl
   | baseFormTextAreaTpl
   | baseFormMyRadioTpl
@@ -209,6 +219,7 @@ export type baseFormUnion =
   | baseFormDateTpl;
 export type baseFormUnionType =
   | baseFormTextTpl['type']
+  | baseFormTextTipTpl['type']
   | baseFormNumberTpl['type']
   | baseFormTextAreaTpl['type']
   | baseFormMyRadioTpl['type']

src/components/PanelComponents/FormItems/EditorModal.tsx

@@ -1,6 +1,7 @@
 import React, { FC, memo, useEffect } from 'react';
-import { Form, Select, Input, Modal, Button } from 'antd';
+import { Form, Select, Input, Modal, Button, InputNumber } from 'antd';
 import { baseFormOptionsType } from '../FormEditor/types';
+import Color from '../Color';
 
 const { Option } = Select;
 
@@ -80,6 +81,24 @@ const EditorModal: FC<EditorModalProps> = props => {
                 <Input />
               </Form.Item>
             )}
+            {!!item.fontSize && (
+              <Form.Item
+                label="字体大小"
+                name="fontSize"
+                rules={[{ required: true, message: '请输入字体大小!' }]}
+              >
+                <InputNumber min={12} max={30} defaultValue={14} />
+              </Form.Item>
+            )}
+            {!!item.color && (
+              <Form.Item
+                label="文字颜色"
+                name="color"
+                rules={[{ required: true, message: '请输入文字颜色!' }]}
+              >
+                <Color />
+              </Form.Item>
+            )}
             {!!item.placeholder && (
               <Form.Item label="提示文本" name="placeholder">
                 <Input placeholder="请输入提示文本" />

src/components/PanelComponents/FormItems/FormItems.tsx

@@ -14,13 +14,13 @@ const formTpl: TFormItemsDefaultType = [
   {
     id: '1',
     type: 'Text',
-    label: '文本',
+    label: '文本框',
     placeholder: '请输入文本',
   },
   {
     id: '2',
     type: 'Textarea',
-    label: '长文本',
+    label: '长文本框',
     placeholder: '请输入长文本请输入长文本',
   },
   {
@@ -54,6 +54,13 @@ const formTpl: TFormItemsDefaultType = [
     label: '日期框',
     placeholder: '',
   },
+  {
+    id: '7',
+    type: 'MyTextTip',
+    label: '纯文本',
+    fontSize: 12,
+    color: 'rgba(0,0,0,1)',
+  },
 ];
 
 interface FormItemsProps {

src/pages/editor/components/Header/index.tsx

@@ -131,6 +131,17 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
     window.location.href = `/h5_plus/login?tid=${tid}`;
   };
 
+  const deleteAll = () => {
+    Modal.confirm({
+      title: '确认清空画布?',
+      okText: '确认',
+      cancelText: '取消',
+      onOk() {
+        clearData();
+      },
+    });
+  };
+
   const toBack = () => {
     history.push('/');
   };
@@ -231,7 +242,7 @@ const HeaderComponent = memo((props: HeaderComponentProps) => {
           type="link"
           style={{ marginRight: '9px' }}
           title="清空"
-          onClick={clearData}
+          onClick={deleteAll}
           disabled={!pointData.length}
         >
           <DeleteOutlined />