属性设置显示字段名，事件回调方法为空时不能清除上次的方法

.gitignore

@@ -22,4 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
-stats.html
+stats.html
+.env.*

README.md

@@ -3,7 +3,7 @@
 </p>
 <p align="center">Mojito是一个低代码，可视化，可扩展开发平台</p>
 
-## ✨ 特性
+##  🔥特性
 
 - 点选、拖拽、缩放的可视化操作
 - 群组/解散、撤销/重做、图层显示/隐藏、锁定/解锁、对齐和排序
@@ -15,6 +15,15 @@
   <img width="800" src="./public/demo.jpg">
 </p>
 
+## 👆🏼 事件同步
+<p align="center">
+  <img src="./public/sync.webp">
+</p>
+
+## ✨ 组件通讯
+<p align="center">
+  <img src="./public/message.webp">
+</p>
 
 ## 📦 组件开发 Develop
 支持使用React或Vue及相关生态开发自定义组件库，组件和样式相互隔离，互不影响，组件间可以通过消息事件进行通信

packages/editor/.env.production

@@ -1,4 +1,5 @@
 VITE_HOST=http://mojito.drinkjs.com
 VITE_AUTH_URL=http://mojito.drinkjs.com/authorized
 VITE_GITHUB_CLIENT_ID=21e685d469fb181c42ed
-VITE_GITEE_CLIENT_ID=d88e7880a49151cd39111a250398742bc4ef88bfbba0b61496ac6483576b3000
+VITE_GITEE_CLIENT_ID=d88e7880a49151cd39111a250398742bc4ef88bfbba0b61496ac6483576b3000
+VITE_TOKEN=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJuYW1lIjoib3VydWl0aW5nIiwiaWQiOiI2NGRkY2QxZGQ1MGY4M2EwYzE3Njc0NTUiLCJpYXQiOjE2OTIyNTc1NjUsImV4cCI6MTY5NDg0OTU2NX0.VWU5wplvxDCCqgc-0ygWm4EU2LwVs9sUiaepRWPrrOM

packages/editor/src/common/request.ts

@@ -2,6 +2,8 @@ import { Request } from '@/common/network';
 import { message } from 'antd';
 import { ResponseError } from 'umi-request';
 
+const { VITE_TOKEN } = import.meta.env;
+
 const request = new Request({
   requestType: "json",
   credentials: 'include', // 默认请求是否带上cookie
@@ -14,7 +16,7 @@ const request = new Request({
 });
 
 request.interceptors.request.use((_, options) => {
-  const token = localStorage.getItem("token") || "";
+  const token = localStorage.getItem("token") || VITE_TOKEN;
   return {
     options: { ...options, headers: { ...options.headers, "x-token": token } },
   };

packages/editor/src/pages/screen/layout/Layer/index.tsx

@@ -6,6 +6,7 @@ import React, {
 	useMemo,
 } from "react";
 import { useNavigate } from "react-router-dom";
+import { cloneDeep } from "lodash-es";
 import Render, { ComponentMountEvent, RenderAction } from "./Render";
 import styles from "./index.module.css";
 import { useMount, useUnmount, useUpdateEffect } from "ahooks";
@@ -178,7 +179,7 @@ const Layer: React.FC<LayerProps> = ({
 	 */
 	const onMount = useCallback(
 		({ size, componentOptions }: ComponentMountEvent) => {
-			setLoading(false)
+			setLoading(false);
 			if (enable) {
 				// 编辑状态
 				if (componentOptions) {
@@ -187,7 +188,10 @@ const Layer: React.FC<LayerProps> = ({
 
 				if (size && data.isFirst && defaultSize) {
 					data.isFirst = undefined;
-					if (size.width !== defaultSize.width || size.height !== defaultSize.height) {
+					if (
+						size.width !== defaultSize.width ||
+						size.height !== defaultSize.height
+					) {
 						console.log("layer init size", size);
 						canvasStore.initLayerSize(data.id, size.width, size.height);
 					}
@@ -210,13 +214,24 @@ const Layer: React.FC<LayerProps> = ({
 			name: data.name,
 			id: data.id,
 			getProps: (key?: string) =>
-				key && data.props ? data.props[key] : data.props,
+				key && cloneDeep(data.props)
+					? data.props
+						? cloneDeep(data.props[key])
+						: undefined
+					: data.props,
 			setProps: (props: Record<string, any>) => {
 				if (renderRef.current) {
 					// 更新组件props
 					renderRef.current.updateProps(props);
 				}
 			},
+			saveProps: (props: Record<string, any>) => {
+				data.props = { ...data.props, ...props };
+				if (renderRef.current) {
+					// 更新组件props
+					renderRef.current.updateProps(props);
+				}
+			},
 			// 路由
 			navigate: (to: string) => {
 				navigate(to);

packages/editor/src/pages/screen/layout/RightSide/EventSetting.tsx

@@ -226,7 +226,7 @@ export default function EventSetting() {
 						<Button
 							size="small"
 							type="primary"
-							disabled={!callbackCode?.sourceCode}
+							// disabled={!callbackCode?.sourceCode}
 							onClick={build}
 							loading={building}
 						>
@@ -240,7 +240,6 @@ export default function EventSetting() {
 						language="javascript"
 						value={callbackCode?.sourceCode}
 						onChange={(code) => {
-							console.log("event code", code);
 							dispatch({
 								type: ReducerType.ChangeCode,
 								payload: { ...callbackCode, sourceCode: code },

packages/editor/src/pages/screen/layout/RightSide/PropsSetting.tsx

@@ -122,13 +122,13 @@ export default function PropsSetting() {
 				key: `${v.layerId}${v.key}`,
 				label: v.description ? (
 					<div>
-						{v.name}
+						{v.key} {v.name}
 						<Tooltip title={v.description}>
 							<InfoCircleOutlined style={{ marginLeft: "0.5em" }} />
 						</Tooltip>
 					</div>
 				) : (
-					v.name
+					`${v.key} ${v.name}`
 				),
 				children: EditorComponent[editType] ? (
 					EditorComponent[editType](

packages/editor/src/router/AuthorizedRoot.tsx

@@ -2,9 +2,11 @@ import { Outlet, useNavigate } from "react-router-dom";
 import { useEffect, useState } from "react";
 import { useGlobalStore } from "@/store";
 
+const { VITE_TOKEN } = import.meta.env;
+
 export default function AuthorizedRoot() {
 	const { userStore } = useGlobalStore();
-	const [token] = useState(() => localStorage.getItem("token"));
+	const [token] = useState(() => localStorage.getItem("token") || VITE_TOKEN);
 	const navigate = useNavigate();
 
 	useEffect(() => {

packages/editor/src/store/Screen.ts

@@ -1,5 +1,4 @@
 import "systemjs";
-// import { addStyles } from "@/common/styleLoader";
 import { addStyles, StyleObject } from "shadow-style-loader/lib/addStylesShadow"
 import * as service from "@/services/screen";
 import { makeObservable } from "fertile";