feat:节点状态增加className,日志code面板增加全屏展示功能，日志面板透出width用户可配置

Author: 昔梦

docs/xflow/api.md

@@ -69,6 +69,8 @@ title: API
 | logList   | 日志面板数据        | [TLogListItem](#tloglistitem) |        |
 | loading   | 日志面板loading效果 | `boolean`                     | false  |
 | logWidget | 自定义日志面板展示  | `string`                      |        |
+| width | 日志面板宽度 | `number`                      | 400       |
+
 
 ## TLogListItem
 

docs/xflow/log.md

@@ -34,7 +34,7 @@ group:
     {value: 'warning',color: '#faad14',name: '告警'}
   ]
   ```
- - **自定义状态**:可通过`globalConfig.nodeView.status`自定义节点状态，同名可覆盖内置状态颜色。
+ - **自定义状态**:可通过`globalConfig.nodeView.status`自定义节点状态，同名可覆盖内置状态颜色。注意:`value`只能为`string`类型！
     ```js
       globalConfig={{
           nodeView: {

packages/x-flow/src/components/CustomNode/index.tsx

@@ -247,6 +247,7 @@ export default memo((props: any) => {
         ['xflow-node-container-selected']: !!selected,
         ['xflow-node-container-tb']: layout === 'TB',
         ['xflow-node-container-note']: isNote,
+        [`xflow-node-container-status-${status}`]: status,
       })}
       onMouseEnter={() => setIsHovered(true)}
       onMouseLeave={() => setIsHovered(false)}

packages/x-flow/src/components/NodeLogPanel/components/CodePanel.tsx

@@ -1,15 +1,22 @@
-import { CheckOutlined, CopyOutlined } from '@ant-design/icons';
+import {
+  ArrowsAltOutlined,
+  CheckOutlined,
+  CopyOutlined,
+  ShrinkOutlined,
+} from '@ant-design/icons';
 import { json } from '@codemirror/lang-json';
 import { EditorView } from '@codemirror/view';
 import CodeMirror from '@uiw/react-codemirror';
+import classNames from 'classnames';
 import { isString } from 'lodash';
 import React, { memo, useState } from 'react';
 import TextEllipsis from '../../TextEllipsis';
 
 export default memo((props: any) => {
-  const { codeData } = props;
+  const { codeData, onFullScreenChange } = props;
   const [isCopy, setIsCopy] = useState(false);
   const isRenderTitle = isString(codeData?.title);
+  const [isFullScreen, setIsFullScreen] = useState(false);
 
   const copyCode = () => {
     navigator.clipboard
@@ -26,7 +33,7 @@ export default memo((props: any) => {
   };
 
   return (
-    <div className="log-code-panel">
+    <div className={classNames('log-code-panel', { ['log-code-panel-full']: isFullScreen })}>
       <div className="log-code-title">
         {isRenderTitle ? (
           <TextEllipsis
@@ -36,18 +43,37 @@ export default memo((props: any) => {
         ) : (
           <>{codeData?.title}</>
         )}
-        {isCopy ? (
-          <CheckOutlined className="log-code-copy" />
-        ) : (
-          <CopyOutlined className="log-code-copy" onClick={copyCode} />
-        )}
+        <div>
+          {isCopy ? (
+            <CheckOutlined className="log-code-copy" />
+          ) : (
+            <CopyOutlined className="log-code-copy" onClick={copyCode} />
+          )}
+          {isFullScreen ? (
+            <ShrinkOutlined
+              onClick={() => {
+                setIsFullScreen(false);
+                onFullScreenChange(false);
+              }}
+              className="log-code-copy"
+            />
+          ) : (
+            <ArrowsAltOutlined
+              onClick={() => {
+                setIsFullScreen(true);
+                onFullScreenChange(true);
+              }}
+              className="log-code-copy"
+            />
+          )}
+        </div>
       </div>
       <CodeMirror
         value={codeData?.code}
         className="log-code-editor"
         extensions={[json(), EditorView.lineWrapping]}
-        height="172px"
         minHeight="172px"
+        maxHeight="58vh"
         width="100%"
         theme="none"
         readOnly={true}

packages/x-flow/src/components/NodeLogPanel/components/DetailPanel.tsx

@@ -1,23 +1,27 @@
 import { isEmpty, isObject } from 'lodash-es';
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';
 import CodePanel from './CodePanel';
 import StatusPanel from './StatusPanel';
+import classNames from 'classnames';
 
 export default memo((props: any) => {
   const { detailData, currentStatus } = props;
   const isRenderStatus =
     isObject(detailData?.statusPanel) && !isEmpty(detailData?.statusPanel);
+  const [isFullScreen, setIsFullScreen] = useState(false);
 
   return (
-    <div className="log-detail-panel">
+    <div className={classNames("log-detail-panel", { ['log-detail-panel-code-full']: isFullScreen })}>
       {isRenderStatus && (
         <StatusPanel
           currentStatus={currentStatus}
           statusPanelData={detailData?.statusPanel}
         />
       )}
       {(detailData?.codePanel || [])?.map((item, index) => (
-        <CodePanel codeData={item} key={index} />
+        <CodePanel codeData={item} key={index} onFullScreenChange={(isFullScreen) => {
+          setIsFullScreen(isFullScreen)
+        } } />
       ))}
     </div>
   );

packages/x-flow/src/components/NodeLogPanel/index.less

@@ -1,11 +1,14 @@
 .node-log-container {
   .log-header-tab {
-
     .ant-tabs-nav,
     .ant-tabs-content-holder {
       padding-left: 16px;
       padding-right: 16px;
     }
+
+    .log-detail-panel-code-full {
+      height: 0;
+    }
   }
 
   .log-status-panel {
@@ -80,11 +83,12 @@
       .log-code-copy {
         cursor: pointer;
         font-size: 12px;
+        margin-left: 8px;
       }
     }
 
     .log-code-editor {
-      height: 172px;
+      min-height: 172px;
       border-radius: 6px;
 
       .cm-focused {
@@ -94,12 +98,17 @@
       .cm-content {
         font-size: 12px;
       }
-
     }
   }
 
-  .log-track-panel {
+  .log-code-panel-full {
+    position: absolute;
+    z-index: 1000;
+    top: 38px;
+    margin-right: 16px;
+  }
 
+  .log-track-panel {
     .log-track-node {
       margin-bottom: 10px;
 
@@ -115,7 +124,7 @@
 
             .ant-collapse-expand-icon {
               height: 20px;
-              padding-inline-end: 6px
+              padding-inline-end: 6px;
             }
 
             .ant-collapse-arrow {

packages/x-flow/src/components/PanelContainer/index.tsx

@@ -1,6 +1,6 @@
 import { Divider, Drawer, Input, Space } from 'antd';
 import produce from 'immer';
-import { debounce } from 'lodash';
+import { debounce, isNumber } from 'lodash';
 import React, { FC, useContext, useEffect, useMemo, useState } from 'react';
 import { shallow } from 'zustand/shallow';
 import { useStore } from '../../hooks/useStore';
@@ -40,7 +40,7 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
     openLogPanel,
   } = props;
   // 1.获取节点配置信息
-  const { settingMap, iconFontUrl, globalConfig, antdVersion, readOnly }: any =
+  const { settingMap, iconFontUrl, globalConfig, antdVersion, readOnly, logPanel }: any =
     useContext(ConfigContext);
   const nodeSetting = settingMap[nodeType] || {};
   const { nodes, setNodes } = useStore(
@@ -57,6 +57,7 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
   const hideDesc =
     nodePanel?.hideDesc ?? globalConfig?.nodePanel?.hideDesc ?? false;
   const isShowStatusPanel = Boolean(node?._status && openLogPanel);
+  const offsetRightStatus = isNumber(logPanel?.width) ? Number(logPanel?.width + 10) : 410;
 
   const handleNodeValueChange = debounce((data: any) => {
     const newNodes = produce(nodes, draft => {
@@ -108,7 +109,7 @@ const Panel: FC<IPanelProps> = (props: IPanelProps) => {
       headerStyle={{ paddingBottom: '12px' }}
       style={{
         position: 'absolute',
-        right: isShowStatusPanel ? 410 : 0,
+        right: isShowStatusPanel ? offsetRightStatus : 0,
       }}
       title={
         <>

packages/x-flow/src/components/PanelStatusLogContainer/index.tsx

@@ -1,5 +1,6 @@
 import { Drawer, Popover } from 'antd';
 import classNames from 'classnames';
+import { isNumber } from 'lodash';
 import React, { FC, useContext, useMemo } from 'react';
 import { ConfigContext } from '../../models/context';
 import createIconFont from '../../utils/createIconFont';
@@ -18,14 +19,21 @@ interface IPanelProps {
 const PanelStatusLogContainer: FC<IPanelProps> = (props: IPanelProps) => {
   const { onClose, children, nodeType } = props;
   // 1.获取节点配置信息
-  const { settingMap, iconFontUrl, globalConfig, logPanel, widgets, antdVersion }: any =
-    useContext(ConfigContext);
+  const {
+    settingMap,
+    iconFontUrl,
+    globalConfig,
+    logPanel,
+    widgets,
+    antdVersion,
+  }: any = useContext(ConfigContext);
   const nodeSetting = settingMap[nodeType] || {};
   const { nodePanel, iconSvg } = nodeSetting;
 
   const Icon = useMemo(() => createIconFont(iconFontUrl), [iconFontUrl]);
   const CustomWidget = widgets[logPanel?.logWidget]; // 内置setting组件
   const isCustomWidget = !Boolean(logPanel?.logWidget && CustomWidget);
+  const width =isNumber(logPanel?.width) ? logPanel?.width : 400;
 
   const drawerVersionProps = useMemo(() => {
     if (antdVersion === 'V5') {
@@ -49,7 +57,7 @@ const PanelStatusLogContainer: FC<IPanelProps> = (props: IPanelProps) => {
     <Drawer
       {...drawerVersionProps}
       getContainer={false}
-      width={400}
+      width={width}
       mask={false}
       onClose={onClose}
       headerStyle={{

packages/x-flow/src/types.ts

@@ -78,6 +78,7 @@ export interface TLogPanel {
   logList: Array<TLogListItem>; // 日志面板的所有数据===》默认能拿到页面所有节点的日志数据
   loading?: boolean; // 日志面板loading
   logWidget?: string; // 自定义日志面板组件
+  width?: number;// 日志面板宽度
 }
 
 export interface TNodeView {