diff --git a/src/components/BasicShop/BasicComponents/WhiteTpl/index.less b/src/components/BasicShop/BasicComponents/WhiteTpl/index.less new file mode 100644 index 0000000..07f7595 --- /dev/null +++ b/src/components/BasicShop/BasicComponents/WhiteTpl/index.less @@ -0,0 +1,7 @@ +.whiteTpl { + text-align: center; + .title { + font-size: 14px; + color: #fff; + } +} diff --git a/src/components/BasicShop/BasicComponents/WhiteTpl/index.tsx b/src/components/BasicShop/BasicComponents/WhiteTpl/index.tsx new file mode 100644 index 0000000..0361248 --- /dev/null +++ b/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 ( +
+
+ {isTpl ? '空白模版' : text} +
+
+ ); +}); + +export default WhiteTpl; diff --git a/src/components/BasicShop/BasicComponents/WhiteTpl/schema.ts b/src/components/BasicShop/BasicComponents/WhiteTpl/schema.ts new file mode 100644 index 0000000..263df92 --- /dev/null +++ b/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; +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; diff --git a/src/components/BasicShop/BasicComponents/WhiteTpl/template.ts b/src/components/BasicShop/BasicComponents/WhiteTpl/template.ts new file mode 100644 index 0000000..f8bf50d --- /dev/null +++ b/src/components/BasicShop/BasicComponents/WhiteTpl/template.ts @@ -0,0 +1,5 @@ +const template = { + type: 'WhiteTpl', + h: 20, +}; +export default template; diff --git a/src/components/BasicShop/BasicComponents/schema.ts b/src/components/BasicShop/BasicComponents/schema.ts index 983dff2..b4e6bf1 100644 --- a/src/components/BasicShop/BasicComponents/schema.ts +++ b/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, diff --git a/src/components/BasicShop/BasicComponents/template.ts b/src/components/BasicShop/BasicComponents/template.ts index ae567de..bb90856 100644 --- a/src/components/BasicShop/BasicComponents/template.ts +++ b/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' };