fix: 修复组件拖入时未递归生成id导致样式丢失问题

packages/amis-core/src/components/CustomStyle.tsx

@@ -39,7 +39,7 @@ export default function (props: CustomStyleProps) {
         removeCustomStyle('', id, env.getModalContainer?.().ownerDocument);
       }
     };
-  }, [themeCss]);
+  }, [themeCss, id]);
 
   useEffect(() => {
     if (wrapperCustomStyle && id) {
@@ -59,7 +59,7 @@ export default function (props: CustomStyleProps) {
         );
       }
     };
-  }, [wrapperCustomStyle]);
+  }, [wrapperCustomStyle, id]);
 
   return null;
 }

packages/amis-editor-core/src/manager.ts

@@ -55,7 +55,8 @@ import {
   isObject,
   isLayoutPlugin,
   JSONPipeOut,
-  scrollToActive
+  scrollToActive,
+  JSONPipeIn
 } from './util';
 import {hackIn, makeSchemaFormRender, makeWrapper} from './component/factory';
 import {env} from './env';
@@ -1547,8 +1548,7 @@ export class EditorManager {
     const commonContext = this.buildEventContext(id);
 
     // 填充id，有些脚手架生成了复杂的布局等，自动填充一下id
-    let curChildJson = {...json};
-    JsonGenerateID(curChildJson);
+    let curChildJson = JSONPipeIn(json, true);
 
     if (beforeId) {
       const arr = commonContext.schema[region];
@@ -1621,8 +1621,8 @@ export class EditorManager {
     subRenderer?: SubRendererInfo,
     region?: string
   ): boolean {
-    let curJson = {...json};
-    JsonGenerateID(curJson);
+    // 转成普通json并添加node id
+    let curJson = JSONPipeIn(json, true);
 
     const context: ReplaceEventContext = {
       ...this.buildEventContext(id),

packages/amis-editor-core/src/util.ts

@@ -71,13 +71,13 @@ export function cleanUndefined(obj: any) {
  * 给每个节点加个 $$id 这样方便编辑
  * @param obj
  */
-export function JSONPipeIn(obj: any): any {
+export function JSONPipeIn(obj: any, generateId = false): any {
   if (!isObject(obj) || obj.$$typeof) {
     return obj;
   }
 
   if (Array.isArray(obj)) {
-    return obj.map(JSONPipeIn);
+    return obj.map((item, index) => JSONPipeIn(item, generateId));
   }
 
   let toUpdate: any = {};
@@ -99,6 +99,12 @@ export function JSONPipeIn(obj: any): any {
   if (obj.type) {
     // 处理下历史style数据，整理到themeCss
     obj = style2ThemeCss(obj);
+
+    // 重新生成组件ID
+    if (generateId) {
+      flag = true;
+      toUpdate.id = generateNodeId();
+    }
   }
 
   Object.keys(obj).forEach(key => {
@@ -110,7 +116,7 @@ export function JSONPipeIn(obj: any): any {
       let flag2 = false;
 
       let patched = prop.map((item: any) => {
-        let patched = JSONPipeIn(item);
+        let patched = JSONPipeIn(item, generateId);
 
         if (patched !== item) {
           flag2 = true;
@@ -124,7 +130,7 @@ export function JSONPipeIn(obj: any): any {
         toUpdate[key] = patched;
       }
     } else {
-      let patched = JSONPipeIn(prop);
+      let patched = JSONPipeIn(prop, generateId);
 
       if (patched !== prop) {
         flag = true;