add: 新增按钮组建

src/components/BasicPcShop/BasicComponents/Button/index.tsx

@@ -0,0 +1,9 @@
+import React, { memo } from 'react';
+import { IButtonConfig } from './schema';
+import { Button } from 'antd';
+const button = memo((props: IButtonConfig) => {
+  const { text, type } = props;
+  return <Button type={type}>{text}</Button>;
+});
+
+export default button;

src/components/BasicPcShop/BasicComponents/Button/schema.ts

@@ -0,0 +1,89 @@
+import {
+  IColorConfigType,
+  INumberConfigType,
+  ISelectConfigType,
+  ITextConfigType,
+  TColorDefaultType,
+  TNumberDefaultType,
+  TSelectDefaultType,
+  TTextDefaultType,
+} from '@/components/PanelComponents/FormEditor/types';
+
+export type TButtonSelectKeyType = 'left' | 'center' | 'right';
+
+export type TButtonEditData = Array<
+  IColorConfigType | INumberConfigType | ITextConfigType | ISelectConfigType<TButtonSelectKeyType>
+>;
+export interface IButtonConfig {
+  bgColor: TColorDefaultType;
+  text: TTextDefaultType;
+  color: TColorDefaultType;
+  align: TSelectDefaultType<TButtonSelectKeyType>;
+  fontSize: TNumberDefaultType;
+  height: TNumberDefaultType;
+  type: any;
+}
+
+export interface IButtonSchema {
+  editData: TButtonEditData;
+  config: IButtonConfig;
+}
+
+const Button: IButtonSchema = {
+  editData: [
+    {
+      key: 'bgColor',
+      name: '背景色',
+      type: 'Color',
+    },
+    {
+      key: 'height',
+      name: '高度',
+      type: 'Number',
+    },
+    {
+      key: 'text',
+      name: '文字',
+      type: 'Text',
+    },
+    {
+      key: 'fontSize',
+      name: '字体大小',
+      type: 'Number',
+    },
+    {
+      key: 'color',
+      name: '文字颜色',
+      type: 'Color',
+    },
+    {
+      key: 'align',
+      name: '对齐方式',
+      type: 'Select',
+      range: [
+        {
+          key: 'left',
+          text: '左对齐',
+        },
+        {
+          key: 'center',
+          text: '居中对齐',
+        },
+        {
+          key: 'right',
+          text: '右对齐',
+        },
+      ],
+    },
+  ],
+  config: {
+    bgColor: 'rgba(0,0,0,1)',
+    text: '按钮 button 按钮 button 按钮 button',
+    color: 'rgba(255,255,255,1)',
+    align: 'center',
+    fontSize: 16,
+    height: 48,
+    type: 'primary',
+  },
+};
+export default Button;

src/components/BasicPcShop/BasicComponents/Button/template.ts

@@ -0,0 +1,6 @@
+const template = {
+  type: 'Button',
+  h: 24,
+  x: 12,
+};
+export default template;

src/components/BasicPcShop/BasicComponents/schema.ts

@@ -6,6 +6,7 @@ import List from './List/schema';
 import LongText from './LongText/schema';
 import Qrcode from './Qrcode/schema';
 import Text from './Text/schema';
+import Button from './Button/schema';
 
 const basicSchema = {
   Footer,
@@ -15,6 +16,7 @@ const basicSchema = {
   List,
   LongText,
   Qrcode,
-  Text
+  Text,
+  Button,
 };
 export default basicSchema;

src/components/BasicPcShop/BasicComponents/template.ts

@@ -6,17 +6,9 @@ import List from './List/template';
 import LongText from './LongText/template';
 import Qrcode from './Qrcode/template';
 import Text from './Text/template';
+import Button from './Button/template';
 
-const basicTemplate = [
-  Footer,
-  Header,
-  Icon,
-  Image,
-  List,
-  LongText,
-  Qrcode,
-  Text,
-];
+const basicTemplate = [Footer, Header, Icon, Image, List, LongText, Qrcode, Text, Button];
 const BasicTemplate = basicTemplate.map(v => {
   return { ...v, category: 'base' };
 });

src/components/PanelComponents/FormEditor/types.ts

@@ -1,3 +1,5 @@
+import { type } from 'os';
+
 ////////////////////
 export interface IUploadConfigType {
   key: string;
@@ -199,6 +201,13 @@ export type baseFormDateTpl = {
   placeholder: string;
 };
 
+export type baseFormButtonTpl = {
+  key: string;
+  name: string;
+  type: 'Button';
+  icons: Array<any>;
+};
+
 export type baseFormUnion =
   | baseFormTextTpl
   | baseFormNumberTpl
@@ -206,7 +215,8 @@ export type baseFormUnion =
   | baseFormMyRadioTpl
   | baseFormMyCheckboxTpl
   | baseFormMySelectTpl
-  | baseFormDateTpl;
+  | baseFormDateTpl
+  | baseFormButtonTpl;
 export type baseFormUnionType =
   | baseFormTextTpl['type']
   | baseFormNumberTpl['type']
@@ -214,6 +224,7 @@ export type baseFormUnionType =
   | baseFormMyRadioTpl['type']
   | baseFormMyCheckboxTpl['type']
   | baseFormMySelectTpl['type']
-  | baseFormDateTpl['type'];
+  | baseFormDateTpl['type']
+  | baseFormButtonTpl['type'];
 
 export type TFormItemsDefaultType = Array<baseFormUnion>;

src/layouts/index.tsx

@@ -84,7 +84,7 @@ export default function Layout({ children }: IRouteComponentProps) {
   );
 
   const [state, setState] = useState<dooringContextType>('h5');
-
+  debugger;
   return (
     <dooringContext.Provider
       value={{

src/pages/editor/TargetBox.tsx

@@ -1,7 +1,9 @@
-import React, { useMemo, memo, ReactNode } from 'react';
+import React, { useMemo, memo, ReactNode, useContext } from 'react';
 import { useDrag } from 'react-dnd';
-import schema from 'components/BasicShop/schema';
+import schemaH5 from 'components/BasicShop/schema';
+import schemaPc from 'components/BasicPcShop/schema';
 import styles from './index.less';
+import { dooringContext } from '@/layouts';
 
 interface TargetBoxProps {
   item: any;
@@ -11,6 +13,14 @@ interface TargetBoxProps {
 
 const TargetBox = memo((props: TargetBoxProps) => {
   const { item } = props;
+  const context = useContext(dooringContext);
+  const schema = useMemo(() => {
+    if (context.theme === 'h5') {
+      return schemaH5;
+    } else {
+      return schemaPc;
+    }
+  }, [context.theme]);
   const [{ isDragging }, drag] = useDrag({
     item: {
       type: item.type,