添加单行文本组件

package.json

@@ -42,6 +42,7 @@
 		]
 	},
 	"dependencies": {
+		"@ant-design/cssinjs": "^1.9.1",
 		"dooringx-lib": "^1.0.0"
 	},
 	"resolutions": {

packages/dooringx-example/package.json

@@ -1,5 +1,5 @@
 {
-  "name":"dooringx-example",
+  "name": "dooringx-example",
   "version": "0.0.1",
   "private": true,
   "scripts": {
@@ -23,16 +23,18 @@
   },
   "dependencies": {
     "@ant-design/icons": "^4.6.2",
-		"antd": "^4.15.2",
+    "@ant-design/pro-components": "^2.4.6",
     "@ant-design/pro-layout": "^6.5.0",
     "@umijs/preset-react": "1.x",
-    "umi": "^3.5.20",
+    "animate.css": "^4.1.1",
-    "animate.css": "^4.1.1"
+    "antd": "^4.15.2",
+    "umi": "^3.5.20"
   },
   "devDependencies": {
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
     "@umijs/test": "^3.5.4",
+    "antd-colorpicker": "^1.0.0",
     "lint-staged": "^10.0.7",
     "prettier": "^2.2.0",
     "react": "17.x",

packages/dooringx-example/src/components/LeftIcon.tsx

@@ -0,0 +1,17 @@
+import { Card } from 'antd';
+
+function LeftIcon(prop: any) {
+	const { img, icon, label } = prop;
+	let cover = undefined;
+	if (img) {
+		cover = <img src={img} />;
+	} else if (icon) {
+		cover = icon;
+	}
+	return (
+		<Card hoverable style={{ width: 100 }} cover={cover}>
+			{label}
+		</Card>
+	);
+}
+export default LeftIcon;

packages/dooringx-example/src/pages/iframeTest.tsx

@@ -16,6 +16,7 @@ import {
 	useIframeHook,
 	IframeTarget,
 } from 'dooringx-lib';
+// import  LeftConfig  from '../../../dooringx-lib/src/components/leftConfig';
 import { useContext } from 'react';
 import { configContext } from '@/layouts';
 import { useCallback } from 'react';
@@ -25,6 +26,7 @@ export const HeaderHeight = '40px';
 
 export default function IndexPage() {
 	const config = useContext(configContext);
+	console.log('aaaaaaaaaaaaaaaaaaaa', config);
 
 	const subscribeFn = useCallback(() => {
 		localStorage.setItem(PREVIEWSTATE, JSON.stringify(config.getStore().getData()));

packages/dooringx-example/src/pages/index.tsx

@@ -1,8 +1,8 @@
 /*
  * @Author: yehuozhili
  * @Date: 2021-05-15 12:49:28
- * @LastEditors: yehuozhili
+ * @LastEditors: guoshujing gsj2501015228@163.com
- * @LastEditTime: 2021-09-28 21:58:21
+ * @LastEditTime: 2023-05-04 11:35:23
  * @FilePath: \dooringx\packages\dooringx-example\src\pages\index.tsx
  */
 import {
@@ -35,7 +35,7 @@ const footerConfig = function () {
 };
 
 export default function IndexPage() {
-	const config = useContext(configContext);
+	const config = useContext(configContext); //useContext可以帮助我们跨越组件层级直接传递变量，实现数据共享
 	const locale = useContext(LocaleContext);
 
 	const everyFn = () => {};
@@ -51,8 +51,9 @@ export default function IndexPage() {
 	const [open, setOpen] = useState(false);
 
 	const createAndDownloadFile = (fileName: string) => {
-		const aTag = document.createElement('a');
+		const aTag = document.createElement('a'); //创建对象
-		const res = config.getStore().getData();
+		const res = config.getStore().getData(); //获取当前JSON
+		console.log('json ++++++', res);
 		const JSONres = JSON.stringify(res);
 		const blob = new Blob([JSONres]);
 		aTag.download = fileName;

packages/dooringx-example/src/plugin/formComponents/colorSelect.tsx

@@ -0,0 +1,56 @@
+import { deepCopy, UserConfig } from 'dooringx-lib';
+import { Col, Input, Row, Form, Button } from 'antd';
+import { memo, useMemo } from 'react';
+import React from 'react';
+import { FormMap } from '../formTypes';
+import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes';
+import { IBlockType } from 'dooringx-lib/dist/core/store/storetype';
+import { BetaSchemaForm, ProFormColorPicker } from '@ant-design/pro-components';
+
+interface MInputProps {
+	data: CreateOptionsRes<FormMap, 'colorSelect'>;
+	current: IBlockType;
+	config: UserConfig;
+}
+
+function MColorPicker(props: MInputProps) {
+	const initialValues = '#000000';
+	console.log('颜色选择器', props);
+
+	const option = useMemo(() => {
+		console.log('颜色选择器', props);
+		return props.data.option || {};
+	}, [props.data]);
+	const store = props.config.getStore();
+
+	return (
+		<Row style={{ padding: '10px' }}>
+			<Col span={6} style={{ lineHeight: '30px' }}>
+				{option.label || '文字'}：
+			</Col>
+			<Col span={18}>
+				<ProFormColorPicker
+					label={option.label || '文字'}
+					name="颜色选择"
+					initialValue={initialValues}
+					fieldProps={{
+						onChange: (re) => {
+							const receive = (option as any).receive;
+							const clonedata = deepCopy(store.getData());
+							const newblock = clonedata.block.map((v: IBlockType) => {
+								if (v.id === props.current.id) {
+									v.props[receive] = re;
+								}
+								return v;
+							});
+							store.setData({ ...clonedata, block: [...newblock] });
+						},
+						value: props.current.props[option.receive!] || option?.initValue || '#000000',
+					}}
+				/>
+			</Col>
+		</Row>
+	);
+}
+
+export default memo(MColorPicker);

packages/dooringx-example/src/plugin/formComponents/inputNumber.tsx

@@ -0,0 +1,52 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-07 14:32:55
+ * @LastEditors: yehuozhili
+ * @LastEditTime: 2022-04-25 00:32:32
+ * @FilePath: \dooringx\packages\dooringx-example\src\plugin\formComponents\input.tsx
+ */
+import { deepCopy, UserConfig } from 'dooringx-lib';
+import { Col, Input, InputNumber, Row } from 'antd';
+import { memo, useMemo } from 'react';
+import React from 'react';
+import { FormMap } from '../formTypes';
+import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes';
+import { IBlockType } from 'dooringx-lib/dist/core/store/storetype';
+
+interface MInputProps {
+	data: CreateOptionsRes<FormMap, 'inputNumber'>;
+	current: IBlockType;
+	config: UserConfig;
+}
+
+function MInputNumber(props: MInputProps) {
+	const option = useMemo(() => {
+		return props.data.option || {};
+	}, [props.data]);
+	const store = props.config.getStore();
+	return (
+		<Row style={{ padding: '10px' }}>
+			<Col span={6} style={{ lineHeight: '30px' }}>
+				{option.label || '文字'}：
+			</Col>
+			<Col span={18} style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+				<InputNumber
+					value={props.current.props[option.receive!] || ''}
+					onChange={(e) => {
+						const receive = (option as any).receive;
+						const clonedata = deepCopy(store.getData());
+						const newblock = clonedata.block.map((v: IBlockType) => {
+							if (v.id === props.current.id) {
+								v.props[receive] = e;
+							}
+							return v;
+						});
+						store.setData({ ...clonedata, block: [...newblock] });
+					}}
+				/>
+			</Col>
+		</Row>
+	);
+}
+
+export default memo(MInputNumber);

packages/dooringx-example/src/plugin/formComponents/select.tsx

@@ -0,0 +1,46 @@
+import React, { useMemo, memo } from 'react';
+import { Switch, Row, Col, Select } from 'antd';
+import { deepCopy, UserConfig } from 'dooringx-lib';
+import { FormMap } from '../formTypes';
+import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes';
+import { IBlockType } from 'dooringx-lib/dist/core/store/storetype';
+
+interface MSwitchProps {
+	data: CreateOptionsRes<FormMap, 'select'>;
+	current: IBlockType;
+	config: UserConfig;
+}
+
+const MSelect = (props: MSwitchProps) => {
+	const option = useMemo(() => {
+		return props.data?.option || {};
+	}, [props.data]);
+	const store = props.config.getStore();
+	return (
+		<Row style={{ padding: '10px' }}>
+			<Col span={8} style={{ lineHeight: '30px' }}>
+				{(option as any)?.label || '文字'}：
+			</Col>
+			<Col span={16} style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+				<Select
+					style={{ width: '100%' }}
+					options={option?.options}
+					value={props.current.props[(option as any).receive] || option?.initValue || ''}
+					onChange={(checked) => {
+						const receive = (option as any).receive;
+						const clonedata = deepCopy(store.getData());
+						const newblock = clonedata.block.map((v: IBlockType) => {
+							if (v.id === props.current.id) {
+								v.props[receive] = checked;
+							}
+							return v;
+						});
+						store.setData({ ...clonedata, block: [...newblock] });
+					}}
+				/>
+			</Col>
+		</Row>
+	);
+};
+
+export default memo(MSelect);

packages/dooringx-example/src/plugin/formComponents/upload.tsx

@@ -0,0 +1,88 @@
+import React, { useMemo, memo, useState } from 'react';
+import { Switch, Row, Col, Select, Upload, message } from 'antd';
+import { deepCopy, UserConfig } from 'dooringx-lib';
+import { FormMap } from '../formTypes';
+import { CreateOptionsRes } from 'dooringx-lib/dist/core/components/formTypes';
+import { IBlockType } from 'dooringx-lib/dist/core/store/storetype';
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
+
+interface MSwitchProps {
+	data: CreateOptionsRes<FormMap, 'upload'>;
+	current: IBlockType;
+	config: UserConfig;
+}
+
+const MUpload = (props: MSwitchProps) => {
+	const [loading, setLoading] = useState(false);
+	const [imageUrl, setImageUrl] = useState<string>();
+	const option = useMemo(() => {
+		return props.data?.option || {};
+	}, [props.data]);
+	const store = props.config.getStore();
+	const beforeUpload = (file: any) => {
+		const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+		if (!isJpgOrPng) {
+			message.error('You can only upload JPG/PNG file!');
+		}
+		const isLt2M = file.size / 1024 / 1024 < 2;
+		if (!isLt2M) {
+			message.error('Image must smaller than 2MB!');
+		}
+		return isJpgOrPng && isLt2M;
+	};
+	const getBase64 = (img: any, callback: (url: string) => void) => {
+		const reader = new FileReader();
+		reader.addEventListener('load', () => callback(reader.result as string));
+		reader.readAsDataURL(img);
+	};
+
+	const handleChange: any = (info: any) => {
+		if (info.file.status === 'uploading') {
+			setLoading(true);
+			return;
+		}
+		if (info.file.status === 'done') {
+			// Get this url from response in real world.
+			getBase64(info.file.originFileObj as any, (url) => {
+				setLoading(false);
+				setImageUrl(url);
+				const receive = (option as any).receive;
+				const clonedata = deepCopy(store.getData());
+				const newblock = clonedata.block.map((v: IBlockType) => {
+					if (v.id === props.current.id) {
+						v.props[receive] = url;
+					}
+					return v;
+				});
+				store.setData({ ...clonedata, block: [...newblock] });
+			});
+		}
+	};
+
+	const uploadButton = (
+		<div>
+			{loading ? <LoadingOutlined /> : <PlusOutlined />}
+			<div style={{ marginTop: 8 }}>上传</div>
+		</div>
+	);
+	return (
+		<Row style={{ padding: '10px' }}>
+			<Col span={8} style={{ lineHeight: '30px' }}>
+				{(option as any)?.label || '文字'}：
+			</Col>
+			<Col span={16} style={{ display: 'flex', justifyContent: 'flex-end', alignItems: 'center' }}>
+				<Upload
+					listType="picture-card"
+					action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+					beforeUpload={beforeUpload}
+					showUploadList={false}
+					onChange={handleChange}
+				>
+					{imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
+				</Upload>
+			</Col>
+		</Row>
+	);
+};
+
+export default memo(MUpload);

packages/dooringx-example/src/plugin/formTypes.ts

@@ -11,15 +11,34 @@ export interface FormBaseType {
 export interface FormInputType extends FormBaseType {
 	label: string;
 }
+export interface FormInputNumberType extends FormBaseType {
+	label: string;
+}
 export interface FormActionButtonType {}
 export interface FormAnimateControlType {}
 
 export interface FormSwitchType extends FormBaseType {
 	label: string;
 }
+export interface FormUploadType extends FormBaseType {
+	label: string;
+}
+export interface FormColorSelectType extends FormBaseType {
+	label: string;
+	initValue?: string;
+}
+export interface FormSelectType extends FormBaseType {
+	label: string;
+	initValue?: string;
+	options: any[];
+}
 export interface FormMap {
 	input: FormInputType;
 	actionButton: FormActionButtonType;
 	animateControl: FormAnimateControlType;
 	switch: FormSwitchType;
+	colorSelect: FormColorSelectType;
+	select: FormSelectType;
+	inputNumber: FormInputNumberType;
+	upload: FormUploadType;
 }

packages/dooringx-example/src/plugin/index.tsx

@@ -2,17 +2,25 @@
  * @Author: yehuozhili
  * @Date: 2021-02-27 21:33:36
  * @LastEditors: guoshujing gsj2501015228@163.com
- * @LastEditTime: 2023-04-28 17:55:55
+ * @LastEditTime: 2023-05-04 11:49:52
  * @FilePath: \dooringx\packages\dooringx-example\src\plugin\index.tsx
  */
 
 import { InitConfig, LeftDataPannel } from 'dooringx-lib';
-import { LeftRegistComponentMapItem } from 'dooringx-lib/dist/core/crossDrag';
+import { LeftRegistComponentMapItem } from 'dooringx-lib/dist/core/crossDrag/index';
-import { ContainerOutlined, PlayCircleOutlined, HighlightOutlined,PictureTwoTone } from '@ant-design/icons';
+import {
+	ContainerOutlined,
+	PlayCircleOutlined,
+	HighlightOutlined,
+	PictureTwoTone,
+} from '@ant-design/icons';
 import commandModules from './commanderModules';
 import { functionMap } from './functionMap';
 import { Formmodules } from './formComponentModules';
 import InputCo from './registComponents/inputCo';
+import textImg from '../../assets/icon/text.png';
+import imageImg from '../../assets/icon/image.png';
+import LeftIcon from '@/components/LeftIcon';
 
 const LeftRegistMap: LeftRegistComponentMapItem[] = [
 	{
@@ -23,14 +31,23 @@ const LeftRegistMap: LeftRegistComponentMapItem[] = [
 		displayName: '按钮',
 		urlFn: () => import('./registComponents/button'),
 	},
-	// {
+	{
-	// 	type: 'basic',
+		type: 'basic',
-	// 	component: 'button',
+		component: 'text',
-	// 	img: 'icon-anniu',
+		img: textImg,
-	// 	imgCustom: <PictureTwoTone />,
+		// imgCustom: <PictureTwoTone />,
-	// 	displayName: '图片',
+		displayName: '单行文本组件',
-	// 	urlFn: () => import('.'),
+		urlFn: () => import('./registComponents/text'),
-	// },
+		// customRender:()=>(<LeftIcon img={textImg} label='单行文本组件' />)
+	},
+	{
+		type: 'basic',
+		component: 'image',
+		img: imageImg,
+		displayName: '图片组件',
+		urlFn: () => import('./registComponents/image'),
+		// customRender:()=>(<LeftIcon img={textImg} label='单行文本组件' />)
+	},
 	{
 		type: 'basic',
 		component: 'input',

packages/dooringx-example/src/plugin/registComponents/image.tsx

@@ -0,0 +1,246 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-07 14:35:38
+ * @LastEditors: guoshujing gsj2501015228@163.com
+ * @LastEditTime: 2023-05-04 12:44:08
+ * @FilePath: \dooringx\packages\dooringx-example\src\plugin\registComponents\button.tsx
+ */
+
+import { Button, Row, Col, Image } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+	changeUserValue,
+	ComponentItemFactory,
+	createPannelOptions,
+	useDynamicAddEventCenter,
+	useRegistFunc,
+} from 'dooringx-lib';
+import { FormMap } from '../formTypes';
+import { ComponentRenderConfigProps } from 'dooringx-lib/dist/core/components/componentItem';
+import ImageImg from '../../../assets/icon/image.png';
+
+function TextTemp(pr: ComponentRenderConfigProps) {
+	const props = pr.data.props;
+	console.log('文本组件', pr);
+	const data = pr.data;
+	const eventCenter = useMemo(() => {
+		return pr.config.getEventCenter(); //获取事件中心类
+	}, [pr.config]);
+
+	useDynamicAddEventCenter(pr, `${pr.data.id}-init`, '初始渲染时机'); //注册名必须带id 约定！
+	useDynamicAddEventCenter(pr, `${pr.data.id}-click`, '点击执行时机');
+	useEffect(() => {
+		// 模拟抛出事件
+		if (pr.context === 'preview') {
+			eventCenter.runEventQueue(`${pr.data.id}-init`, pr.config);
+		}
+	}, [eventCenter, pr.config, pr.context, pr.data.id]);
+
+	const [text, setText] = useState(props?.text);
+	const op1 = props.op1;
+
+	const fn = useMemo(() => {
+		const functionCenter = eventCenter.getFunctionCenter();
+		return functionCenter.register({
+			id: `${pr.data.id}+changeText`,
+			fn: async (ctx, next, config, args: any, _eventList, iname) => {
+				const userSelect = iname.data;
+				const ctxVal = changeUserValue(
+					userSelect['改变文本数据源'],
+					args,
+					'_changeval',
+					config,
+					ctx
+				);
+				const text = ctxVal[0];
+				setText(text);
+				next();
+			},
+			config: [
+				{
+					name: '改变文本数据源',
+					data: ['ctx', 'input', 'dataSource'],
+					options: {
+						receive: '_changeval',
+						multi: false,
+					},
+				},
+			],
+			name: `${pr.data.id}+改变文本函数`,
+			componentId: pr.data.id,
+		});
+	}, []);
+
+	useRegistFunc(op1, pr.context, fn);
+
+	return (
+		<Row
+			style={{
+				display: 'inline-block',
+				zIndex: data.zIndex,
+				width: data.width,
+				height: data.height,
+				overflow: 'hidden',
+				padding: props?.padding,
+				borderRadius: props?.borderRadius,
+			}}
+		>
+			<Col
+				span={24}
+				style={{
+					height: '100%',
+				}}
+			>
+				<Image
+					height={'100%'}
+					width={'100%'}
+					style={{ objectFit: props?.mode }}
+					src={props?.image}
+					fallback={ImageImg}
+				/>
+			</Col>
+		</Row>
+	);
+}
+
+const MImage = new ComponentItemFactory(
+	'image',
+	'图片组件',
+	{
+		style: [
+			createPannelOptions<FormMap, 'upload'>('upload', {
+				receive: 'image',
+				label: '上传图片',
+			}),
+			createPannelOptions<FormMap, 'select'>('select', {
+				receive: 'mode',
+				label: '图片模式',
+				initValue: 'none',
+				options: [
+					{
+						value: 'contain',
+						label: '居中',
+					},
+					{
+						value: 'cover',
+						label: '填充',
+					},
+					{
+						value: 'fill',
+						label: '拉伸',
+					},
+					{
+						value: 'scale-down',
+						label: '自适应',
+					},
+				],
+			}),
+			createPannelOptions<FormMap, 'select'>('select', {
+				receive: 'fontFamily',
+				label: '字体',
+				initValue: '黑体',
+				options: [
+					{
+						value: '黑体',
+						label: '黑体',
+					},
+					{
+						value: '宋体',
+						label: '宋体',
+					},
+					{
+						value: '"Microsoft YaHei", 微软雅黑',
+						label: '微软雅黑',
+					},
+					{
+						value: 'Georgia',
+						label: 'Georgia',
+					},
+				],
+			}),
+			createPannelOptions<FormMap, 'select'>('select', {
+				receive: 'textDecoration',
+				label: '文字样式',
+				initValue: 'none',
+				options: [
+					{
+						value: 'line-through',
+						label: '删除线',
+					},
+					{
+						value: 'underline',
+						label: '下划线',
+					},
+					{
+						value: 'overline',
+						label: '上划线',
+					},
+					{
+						value: 'none',
+						label: '无',
+					},
+				],
+			}),
+			createPannelOptions<FormMap, 'inputNumber'>('inputNumber', {
+				receive: 'padding',
+				label: '内容边距',
+			}),
+			createPannelOptions<FormMap, 'inputNumber'>('inputNumber', {
+				receive: 'borderRadius',
+				label: '背景圆角',
+			}),
+		],
+		fn: [
+			createPannelOptions<FormMap, 'switch'>('switch', {
+				receive: 'op1',
+				label: '改变文本函数',
+			}),
+		],
+		animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
+		actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
+	},
+	{
+		props: {
+			text: '纯文本',
+			image: ImageImg,
+			mode: 'fill',
+			sizeData: [100, 30],
+			backgroundColor: '#f0f5ff',
+			lineHeight: 1,
+			fontSize: 14,
+			color: '#000000',
+			fontFamily: '黑体',
+			borderRadius: '0',
+			op1: false,
+			align: 'center',
+			fontWeight: '400',
+			textDecoration: 'none',
+			padding: '0',
+			borderData: {
+				borderWidth: 0,
+				borderColor: 'rgba(0,0,0,1)',
+				borderStyle: 'solid',
+			},
+			fontData: {
+				fontSize: 14,
+				textDecoration: 'none',
+				fontStyle: 'normal',
+				color: 'rgba(255,255,255,1)',
+				fontWeight: 'normal',
+			},
+		},
+		width: 200, // 绝对定位元素初始必须有宽高，否则适配会有问题。
+		height: 200, // 绝对定位元素初始必须有宽高，否则适配会有问题。
+		rotate: {
+			canRotate: true,
+			value: 0,
+		},
+		canDrag: true, // false就不能拖
+	},
+	(data, context, store, config) => {
+		return <TextTemp data={data} store={store} context={context} config={config}></TextTemp>;
+	},
+	true
+);
+
+export default MImage;

packages/dooringx-example/src/plugin/registComponents/text.tsx

@@ -0,0 +1,267 @@
+/*
+ * @Author: yehuozhili
+ * @Date: 2021-07-07 14:35:38
+ * @LastEditors: guoshujing gsj2501015228@163.com
+ * @LastEditTime: 2023-05-04 12:44:08
+ * @FilePath: \dooringx\packages\dooringx-example\src\plugin\registComponents\button.tsx
+ */
+
+import { Button, Row, Col } from 'antd';
+import React, { useEffect, useMemo, useState } from 'react';
+import {
+	changeUserValue,
+	ComponentItemFactory,
+	createPannelOptions,
+	useDynamicAddEventCenter,
+	useRegistFunc,
+} from 'dooringx-lib';
+import { FormMap } from '../formTypes';
+import { ComponentRenderConfigProps } from 'dooringx-lib/dist/core/components/componentItem';
+
+function TextTemp(pr: ComponentRenderConfigProps) {
+	const props = pr.data.props;
+	console.log('文本组件', pr);
+	const data = pr.data;
+	const eventCenter = useMemo(() => {
+		return pr.config.getEventCenter(); //获取事件中心类
+	}, [pr.config]);
+
+	useDynamicAddEventCenter(pr, `${pr.data.id}-init`, '初始渲染时机'); //注册名必须带id 约定！
+	useDynamicAddEventCenter(pr, `${pr.data.id}-click`, '点击执行时机');
+	useEffect(() => {
+		// 模拟抛出事件
+		if (pr.context === 'preview') {
+			eventCenter.runEventQueue(`${pr.data.id}-init`, pr.config);
+		}
+	}, [eventCenter, pr.config, pr.context, pr.data.id]);
+
+	const [text, setText] = useState(props?.text);
+	const op1 = props.op1;
+
+	const fn = useMemo(() => {
+		const functionCenter = eventCenter.getFunctionCenter();
+		return functionCenter.register({
+			id: `${pr.data.id}+changeText`,
+			fn: async (ctx, next, config, args: any, _eventList, iname) => {
+				const userSelect = iname.data;
+				const ctxVal = changeUserValue(
+					userSelect['改变文本数据源'],
+					args,
+					'_changeval',
+					config,
+					ctx
+				);
+				const text = ctxVal[0];
+				setText(text);
+				next();
+			},
+			config: [
+				{
+					name: '改变文本数据源',
+					data: ['ctx', 'input', 'dataSource'],
+					options: {
+						receive: '_changeval',
+						multi: false,
+					},
+				},
+			],
+			name: `${pr.data.id}+改变文本函数`,
+			componentId: pr.data.id,
+		});
+	}, []);
+
+	useRegistFunc(op1, pr.context, fn);
+
+	return (
+		<Row
+			style={{
+				backgroundColor: props?.backgroundColor,
+				display: 'inline-block',
+				zIndex: data.zIndex,
+				width: data.width,
+				height: data.height,
+				overflow: 'hidden',
+				padding: props?.padding,
+				borderRadius: props?.borderRadius,
+			}}
+		>
+			<Col
+				span={24}
+				style={{
+					lineHeight: Number(props?.lineHeight),
+					fontSize: Number(props?.fontSize),
+					color: props?.color,
+					textAlign: props?.align,
+					textAlignLast: props?.align,
+					fontFamily: props?.fontFamily,
+					fontWeight: Number(props?.fontWeight),
+					textDecoration: props?.textDecoration,
+				}}
+			>
+				{props?.text}
+			</Col>
+		</Row>
+	);
+}
+
+const MText = new ComponentItemFactory(
+	'text',
+	'文本',
+	{
+		style: [
+			createPannelOptions<FormMap, 'input'>('input', {
+				receive: 'text',
+				label: '文字',
+			}),
+			createPannelOptions<FormMap, 'colorSelect'>('colorSelect', {
+				receive: 'color',
+				label: '文字颜色',
+				initValue: '#000000',
+			}),
+			createPannelOptions<FormMap, 'colorSelect'>('colorSelect', {
+				receive: 'backgroundColor',
+				label: '背景颜色',
+				initValue: '#000000',
+			}),
+			createPannelOptions<FormMap, 'inputNumber'>('inputNumber', {
+				receive: 'fontSize',
+				label: '文本大小',
+			}),
+			createPannelOptions<FormMap, 'inputNumber'>('inputNumber', {
+				receive: 'lineHeight',
+				label: '行高',
+			}),
+			createPannelOptions<FormMap, 'inputNumber'>('inputNumber', {
+				receive: 'fontWeight',
+				label: '文字粗细',
+			}),
+			createPannelOptions<FormMap, 'select'>('select', {
+				receive: 'align',
+				label: '对齐方式',
+				initValue: 'left',
+				options: [
+					{
+						value: 'left',
+						label: '左对齐',
+					},
+					{
+						value: 'center',
+						label: '居中对齐',
+					},
+					{
+						value: 'right',
+						label: '右对齐',
+					},
+					{
+						value: 'justify',
+						label: '两端对齐',
+					},
+				],
+			}),
+			createPannelOptions<FormMap, 'select'>('select', {
+				receive: 'fontFamily',
+				label: '字体',
+				initValue: '黑体',
+				options: [
+					{
+						value: '黑体',
+						label: '黑体',
+					},
+					{
+						value: '宋体',
+						label: '宋体',
+					},
+					{
+						value: '"Microsoft YaHei", 微软雅黑',
+						label: '微软雅黑',
+					},
+					{
+						value: 'Georgia',
+						label: 'Georgia',
+					},
+				],
+			}),
+			createPannelOptions<FormMap, 'select'>('select', {
+				receive: 'textDecoration',
+				label: '文字样式',
+				initValue: 'none',
+				options: [
+					{
+						value: 'line-through',
+						label: '删除线',
+					},
+					{
+						value: 'underline',
+						label: '下划线',
+					},
+					{
+						value: 'overline',
+						label: '上划线',
+					},
+					{
+						value: 'none',
+						label: '无',
+					},
+				],
+			}),
+			createPannelOptions<FormMap, 'inputNumber'>('inputNumber', {
+				receive: 'padding',
+				label: '内容边距',
+			}),
+			createPannelOptions<FormMap, 'inputNumber'>('inputNumber', {
+				receive: 'borderRadius',
+				label: '背景圆角',
+			}),
+		],
+		fn: [
+			createPannelOptions<FormMap, 'switch'>('switch', {
+				receive: 'op1',
+				label: '改变文本函数',
+			}),
+		],
+		animate: [createPannelOptions<FormMap, 'animateControl'>('animateControl', {})],
+		actions: [createPannelOptions<FormMap, 'actionButton'>('actionButton', {})],
+	},
+	{
+		props: {
+			text: '纯文本',
+			sizeData: [100, 30],
+			backgroundColor: '#f0f5ff',
+			lineHeight: 1,
+			fontSize: 14,
+			color: '#000000',
+			fontFamily: '黑体',
+			borderRadius: '0',
+			op1: false,
+			align: 'center',
+			fontWeight: '400',
+			textDecoration: 'none',
+			padding: '0',
+			borderData: {
+				borderWidth: 0,
+				borderColor: 'rgba(0,0,0,1)',
+				borderStyle: 'solid',
+			},
+			fontData: {
+				fontSize: 14,
+				textDecoration: 'none',
+				fontStyle: 'normal',
+				color: 'rgba(255,255,255,1)',
+				fontWeight: 'normal',
+			},
+		},
+		width: 200, // 绝对定位元素初始必须有宽高，否则适配会有问题。
+		height: 30, // 绝对定位元素初始必须有宽高，否则适配会有问题。
+		rotate: {
+			canRotate: true,
+			value: 0,
+		},
+		canDrag: true, // false就不能拖
+	},
+	(data, context, store, config) => {
+		return <TextTemp data={data} store={store} context={context} config={config}></TextTemp>;
+	},
+	true
+);
+
+export default MText;

packages/dooringx-lib/src/components/leftConfig.tsx

@@ -6,7 +6,7 @@
  * @FilePath: \dooringx\packages\dooringx-lib\src\components\leftConfig.tsx
  */
 import React, { ReactNode, useEffect, useMemo, useState } from 'react';
-import { Input, Menu } from 'antd';
+import { Input, Menu, Card } from 'antd';
 import { dragEventResolve, LeftRegistComponentMapItem } from '../core/crossDrag';
 import UserConfig from '../config';
 import { DoubleLeftOutlined, DoubleRightOutlined, SearchOutlined } from '@ant-design/icons';
@@ -18,7 +18,7 @@ interface LeftConfigProps {
 	config: UserConfig;
 	showName?: Boolean;
 	footerConfig?: ReactNode;
-	mode?: modeType;
+	mode?: 'horizontal' | 'vertical';
 }
 
 /**
@@ -111,18 +111,86 @@ function LeftConfig(props: LeftConfigProps) {
 									key={index}
 									{...dragEventResolve(v, props.config)}
 								>
-									<div className={`${styles.redbox} yh-left-item-img-wrap`}>
+									<Card
-										{v.imgCustom ? (
+										hoverable
-											v.imgCustom
+										style={{ width: 100 }}
-										) : (
+										bordered
-											<img
+										bodyStyle={{ padding: 5 }}
-												src={v.img}
+										cover={
-												style={{ width: '100%', height: '100%' }}
+											<div
-												alt="component"
+												style={{
-											></img>
+													width: 100,
-										)}
+													height: 100,
-									</div>
+													border: '1px solid #f0f0f0',
-
+													display: 'flex',
+													justifyContent: 'center',
+													alignItems: 'center',
+													padding: '2px',
+												}}
+											>
+												{v.imgCustom ? (
+													v.imgCustom
+												) : (
+													<img
+														src={v.img}
+														style={{ width: '100%', height: '100%' }}
+														alt="component"
+													></img>
+												)}
+											</div>
+										}
+									>
+										{/* <Divider /> */}
+										<div
+											style={{
+												textAlign: 'center',
+												lineHeight: '20px',
+												height: '20px',
+												overflow: 'hidden',
+											}}
+										>
+											{v.displayName}
+										</div>
+									</Card>
+								</div>
+							))}
+					{(!search || search === '') &&
+						cache.map((v, index) => (
+							<div
+								className={`${styles.coitem} yh-left-item-wrap`}
+								key={index}
+								{...dragEventResolve(v, props.config)}
+							>
+								<Card
+									hoverable
+									style={{ width: 100 }}
+									bordered
+									bodyStyle={{ padding: 5 }}
+									cover={
+										<div
+											style={{
+												width: 100,
+												height: 100,
+												border: '1px solid #f0f0f0',
+												display: 'flex',
+												justifyContent: 'center',
+												alignItems: 'center',
+												padding: '5px',
+											}}
+										>
+											{v.imgCustom ? (
+												v.imgCustom
+											) : (
+												<img
+													src={v.img}
+													style={{ width: '100%', height: '100%' }}
+													alt="component"
+												></img>
+											)}
+										</div>
+									}
+								>
+									{/* <Divider /> */}
 									<div
 										style={{
 											textAlign: 'center',
@@ -133,36 +201,7 @@ function LeftConfig(props: LeftConfigProps) {
 									>
 										{v.displayName}
 									</div>
-								</div>
+								</Card>
-							))}
-					{(!search || search === '') &&
-						cache.map((v, index) => (
-							<div
-								className={`${styles.coitem} yh-left-item-wrap`}
-								key={index}
-								{...dragEventResolve(v, props.config)}
-							>
-								<div className={`${styles.redbox} yh-left-item-img-wrap`}>
-									{v.imgCustom ? (
-										v.imgCustom
-									) : (
-										<img
-											src={v.img}
-											style={{ width: '100%', height: '100%' }}
-											alt="component"
-										></img>
-									)}
-								</div>
-								<div
-									style={{
-										textAlign: 'center',
-										lineHeight: '20px',
-										height: '20px',
-										overflow: 'hidden',
-									}}
-								>
-									{v.displayName}
-								</div>
 							</div>
 						))}
 				</div>