🆕 新增空白模版组件，作为占位符和区块使用

src/components/BasicShop/BasicComponents/WhiteTpl/index.less

@@ -0,0 +1,7 @@
+.whiteTpl {
+  text-align: center;
+  .title {
+    font-size: 14px;
+    color: #fff;
+  }
+}

src/components/BasicShop/BasicComponents/WhiteTpl/index.tsx

@@ -0,0 +1,25 @@
+import { memo } from 'react';
+import styles from './index.less';
+import React from 'react';
+import { IWhiteTplConfig } from './schema';
+
+interface IProps extends IWhiteTplConfig {
+  isTpl: boolean;
+}
+
+const WhiteTpl = memo((props: IProps) => {
+  const { bgColor, text, fontSize, color, height, isTpl } = props;
+  console.log('data', bgColor, text, fontSize, color, height);
+  return (
+    <div
+      className={styles.whiteTpl}
+      style={{ backgroundColor: bgColor, height, lineHeight: height + 'px' }}
+    >
+      <div className={styles.title} style={{ fontSize, color }}>
+        {isTpl ? '空白模版' : text}
+      </div>
+    </div>
+  );
+});
+
+export default WhiteTpl;

src/components/BasicShop/BasicComponents/WhiteTpl/schema.ts

@@ -0,0 +1,61 @@
+import {
+  IColorConfigType,
+  INumberConfigType,
+  ITextConfigType,
+  TColorDefaultType,
+  TNumberDefaultType,
+  TTextDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TWhiteTplEditData = Array<IColorConfigType | INumberConfigType | ITextConfigType>;
+export interface IWhiteTplConfig {
+  bgColor: TColorDefaultType;
+  text: TTextDefaultType;
+  fontSize: TNumberDefaultType;
+  color: TColorDefaultType;
+  height: TNumberDefaultType;
+}
+
+export interface IWhiteTplSchema {
+  editData: TWhiteTplEditData;
+  config: IWhiteTplConfig;
+}
+
+const WhiteTpl: IWhiteTplSchema = {
+  editData: [
+    {
+      key: 'bgColor',
+      name: '背景色',
+      type: 'Color',
+    },
+    {
+      key: 'height',
+      name: '高度',
+      type: 'Number',
+    },
+    {
+      key: 'text',
+      name: '文字',
+      type: 'Text',
+    },
+    {
+      key: 'color',
+      name: '文字颜色',
+      type: 'Color',
+    },
+    {
+      key: 'fontSize',
+      name: '文字大小',
+      type: 'Number',
+    },
+  ],
+  config: {
+    bgColor: 'rgba(255,255,255,1)',
+    text: '',
+    fontSize: 16,
+    color: 'rgba(210,210,210,1)',
+    height: 30,
+  },
+};
+
+export default WhiteTpl;

src/components/BasicShop/BasicComponents/WhiteTpl/template.ts

@@ -0,0 +1,5 @@
+const template = {
+  type: 'WhiteTpl',
+  h: 20,
+};
+export default template;

src/components/BasicShop/BasicComponents/schema.ts

@@ -3,6 +3,7 @@ import Footer from './Footer/schema';
 import Form from './Form/schema';
 import Header from './Header/schema';
 import Icon from './Icon/schema';
+import WhiteTpl from './WhiteTpl/schema';
 import Image from './Image/schema';
 import List from './List/schema';
 import LongText from './LongText/schema';
@@ -20,6 +21,7 @@ const basicSchema = {
   Image,
   List,
   LongText,
+  WhiteTpl,
   Notice,
   Qrcode,
   Tab,

src/components/BasicShop/BasicComponents/template.ts

@@ -10,6 +10,7 @@ import Notice from './Notice/template';
 import Qrcode from './Qrcode/template';
 import Tab from './Tab/template';
 import Text from './Text/template';
+import WhiteTpl from './WhiteTpl/template';
 
 const basicTemplate = [
   Carousel,
@@ -24,6 +25,7 @@ const basicTemplate = [
   Qrcode,
   Tab,
   Text,
+  WhiteTpl,
 ];
 const BasicTemplate = basicTemplate.map(v => {
   return { ...v, category: 'base' };