Merge pull request #10616 from zhangtao07/master

table样式优化 & schema复制重新生成id策略调整

packages/amis-editor-core/src/component/Panel/CodeEditorPanel.tsx

@@ -9,7 +9,7 @@ export default class CodeEditorPanel extends React.Component<PanelProps> {
     setTimeout(() => {
       this.props.manager.patchSchema(true);
 
-      // 检测是否整体粘贴组件，如果是的话强制替换ID避免样式bug
+      // 检测是否整体粘贴组件，如果是的话对指定类型组件存在重复ID的重新生成
       if (
         e?.languageId === 'json' &&
         e.range?.startColumn === 1 &&
@@ -17,7 +17,7 @@ export default class CodeEditorPanel extends React.Component<PanelProps> {
         e.range?.endColumn === 2 &&
         e.range?.endLineNumber > 1
       ) {
-        this.props.manager.reGenerateCurrentNodeID();
+        this.props.manager.reGenerateNodeDuplicateID(['布局容器', '展示']);
       }
     }, 500);
   }

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

@@ -9,7 +9,7 @@ import debounce from 'lodash/debounce';
 import findIndex from 'lodash/findIndex';
 import omit from 'lodash/omit';
 import {openContextMenus, toast, alert, DataScope, DataSchema} from 'amis';
-import {getRenderers, RenderOptions, mapTree, isEmpty} from 'amis-core';
+import {getRenderers, RenderOptions, JSONTraverse} from 'amis-core';
 import {
   PluginInterface,
   BasicPanelItem,
@@ -57,7 +57,8 @@ import {
   JSONPipeOut,
   scrollToActive,
   JSONPipeIn,
-  JSONGetById
+  generateNodeId,
+  JSONGetNodesById
 } from './util';
 import {hackIn, makeSchemaFormRender, makeWrapper} from './component/factory';
 import {env} from './env';
@@ -1565,14 +1566,56 @@ export class EditorManager {
   }
 
   /**
-   * 重新生成当前节点的 id
+   * 重新生成当前节点的重复的id
    */
-  reGenerateCurrentNodeID() {
+  reGenerateNodeDuplicateID(types: Array<string> = []) {
     const node = this.store.getNodeById(this.store.activeId);
     if (!node) {
       return;
     }
-    this.replaceChild(node.id, reGenerateID(node.schema));
+    let schema = node.schema;
+    let changed = false;
+
+    // 支持按照类型过滤某类型组件
+    let tags = node.info?.plugin?.tags || [];
+    if (!Array.isArray(tags)) {
+      tags = [tags];
+    }
+    if (types.length && !tags.some(tag => types.includes(tag))) {
+      return;
+    }
+
+    // 记录组件新旧ID映射关系方便当前组件内事件动作替换
+    let idRefs: {[propKey: string]: string} = {};
+
+    // 如果有多个重复组件，则重新生成ID
+    JSONTraverse(schema, (value: any, key: string, host: any) => {
+      const isNodeIdFormat =
+        typeof value === 'string' && value.indexOf('u:') === 0;
+      if (key === 'id' && isNodeIdFormat && host) {
+        let sameNodes = JSONGetNodesById(this.store.schema, value, 'id');
+        if (sameNodes && sameNodes.length > 1) {
+          let newId = generateNodeId();
+          idRefs[value] = newId;
+          host[key] = newId;
+          changed = true;
+        }
+      }
+      return value;
+    });
+
+    if (changed) {
+      // 替换当前组件内事件动作里面可能的ID
+      JSONTraverse(schema, (value: any, key: string, host: any) => {
+        const isNodeIdFormat =
+          typeof value === 'string' && value.indexOf('u:') === 0;
+        if (key === 'componentId' && isNodeIdFormat && idRefs[value]) {
+          host.componentId = idRefs[value];
+        }
+        return value;
+      });
+      this.replaceChild(node.id, schema);
+    }
   }
 
   /**

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

@@ -322,6 +322,21 @@ export function JSONGetById(json: any, id: string, idKey?: string): any {
   return JSONGetByPath(json, paths);
 }
 
+export function JSONGetNodesById(
+  json: any,
+  id: string,
+  idKey: string = '$$id'
+): Array<any> {
+  let result: Array<any> = [];
+
+  JSONTraverse(json, (value: any, key: string, host: any) => {
+    if (key === idKey && value == id) {
+      result.push(host);
+    }
+  });
+  return result;
+}
+
 export function JSONGetParentById(
   json: any,
   id: string,

packages/amis-ui/scss/components/_table.scss

@@ -258,6 +258,10 @@
       & > .#{$ns}Form-item {
         min-width: var(--Form-control-widthBase);
       }
+
+      .#{$ns}Form-static {
+        min-height: auto;
+      }
     }
 
     &.is-layout-fixed td {

packages/amis-ui/scss/components/_table2.scss

@@ -269,6 +269,10 @@
         &:last-child {
           padding-right: var(--TableCell--edge-paddingX-default);
         }
+
+        .#{$ns}Form-static {
+          min-height: auto;
+        }
       }
 
       .#{$ns}Table-cell-wrapper-prefix {

packages/amis/src/renderers/Table2/index.tsx

@@ -905,6 +905,11 @@ export default class Table2 extends React.Component<Table2Props, object> {
           titleSchema = {type: 'plain'};
         }
 
+        if (column.align) {
+          titleSchema.align = column.align;
+          titleSchema.className = 'flex-1';
+        }
+
         const titleRender = (children: any) => {
           const content = this.renderCellSchema(titleSchema, titleProps);