fix: 修复 debug 日志打印不全的问题 (#11288)

packages/amis-core/src/utils/debug.tsx

@@ -12,6 +12,7 @@ import {uuidv4, importLazyComponent} from './helper';
 import position from './position';
 import {resolveVariableAndFilter} from './resolveVariableAndFilter';
 import {callStrFunction} from './api';
+import isPlainObject from 'lodash/isPlainObject';
 
 export const JsonView = React.lazy(() =>
   import('react-json-view').then(importLazyComponent)
@@ -102,21 +103,25 @@ const LogView = observer(({store}: {store: AMISDebugStore}) => {
   return (
     <>
       {logs.map((log, index) => {
+        let ext =
+          typeof log.ext === 'string' &&
+          (log.ext.startsWith('{') || log.ext.startsWith('['))
+            ? parseJson(log.ext)
+            : typeof log.ext === 'object'
+            ? normalizeDataForLog(log.ext)
+            : log.ext;
+
         return (
           <div className="AMISDebug-logLine" key={`log-${index}`}>
             <div className="AMISDebug-logLineMsg">
               [{log.cat}] {log.msg}
             </div>
-            {(typeof log.ext === 'string' &&
-              (log.ext.startsWith('{') || log.ext.startsWith('['))) ||
-            typeof log.ext === 'object' ? (
+            {typeof ext === 'object' ? (
               <React.Suspense fallback={<div>Loading...</div>}>
                 <JsonView
                   name={null}
                   theme="monokai"
-                  src={
-                    typeof log.ext === 'string' ? parseJson(log.ext) : log.ext
-                  }
+                  src={ext}
                   collapsed={true}
                   enableClipboard={false}
                   displayDataTypes={false}
@@ -125,7 +130,7 @@ const LogView = observer(({store}: {store: AMISDebugStore}) => {
                 />
               </React.Suspense>
             ) : (
-              <pre className="AMISDebug-value">{JSON.stringify(log.ext)}</pre>
+              <pre className="AMISDebug-value">{JSON.stringify(ext)}</pre>
             )}
           </div>
         );
@@ -260,6 +265,7 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
           <i className="fas fa-bug"></i>
         )}
       </div>
+      {store.isExpanded ? (
         <div className={cx('AMISDebug-content')}>
           <div className="AMISDebug-close" title="Close" onClick={store.close}>
             <i className="fas fa-times" />
@@ -373,6 +379,7 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
             </div>
           ) : null}
         </div>
+      ) : null}
     </div>
   );
 });
@@ -557,6 +564,30 @@ function parseJson(str: string) {
   }
 }
 
+function normalizeDataForLog(data: any) {
+  try {
+    return parseJson(JSON.stringify(data));
+  } catch {
+    let ret: any = {};
+
+    Object.keys(data).forEach(key => {
+      const value = data[key];
+
+      if (
+        typeof value === 'object' &&
+        value !== null &&
+        !isPlainObject(value)
+      ) {
+        ret[key] = '[complicated data]';
+      } else {
+        ret[key] = value;
+      }
+    });
+
+    return ret;
+  }
+}
+
 /**
  * 一般调试日志
  * @param msg 简单消息

packages/amis-core/src/utils/renderer-event.ts

@@ -8,6 +8,7 @@ import debounce from 'lodash/debounce';
 import {resolveVariableAndFilterForAsync} from './resolveVariableAndFilterForAsync';
 import {evalExpression, evalExpressionWithConditionBuilderAsync} from './tpl';
 import type {PlainObject} from '../types';
+import {debug} from './debug';
 
 export interface debounceConfig {
   maxWait?: number;
@@ -273,6 +274,15 @@ export async function dispatchEvent(
   let unbindEvent: ((eventName?: string) => void) | null | undefined = null;
   const eventName = typeof e === 'string' ? e : e.type;
 
+  const from = renderer?.props.id || renderer?.props.name || '';
+  debug(
+    'event',
+    `dispatch \`${eventName}\` from 「${renderer?.props.type || 'unknown'}${
+      from ? `#${from}` : ''
+    }」`,
+    data
+  );
+
   renderer?.props?.env?.beforeDispatchEvent?.(
     e,
     renderer,