Merge pull request #19 from codingapi/dev

fix ui

Author: xlorne

frontend/packages/flow-design/src/components/editor/hooks/use-editor-props.ts

@@ -14,7 +14,7 @@ import {Adder} from "@/components/editor/components/node-adder";
 import {BranchAdder} from "@/components/editor/components/branch-adder";
 import {Collapse} from "../components/collapse";
 
-export function useEditorProps(initialData:FlowDocumentJSON,nodeRegistries: FlowNodeRegistry[]): FixedLayoutProps {
+export function useEditorProps(initialData: FlowDocumentJSON, nodeRegistries: FlowNodeRegistry[]): FixedLayoutProps {
 
     const {token} = theme.useToken();
 
@@ -148,7 +148,8 @@ export function useEditorProps(initialData:FlowDocumentJSON,nodeRegistries: Flow
                 onApply: debounce((ctx, opt) => {
                     if (ctx.document.disposed) return;
                     // Listen change to trigger auto save
-                    console.log('flow-engine auto save: ', ctx.document.toJSON());
+                    const data = ctx.document.toJSON();
+                    console.log('flow-engine auto save: ', data);
                 }, 100),
             },
             /**

frontend/packages/flow-design/src/components/editor/hooks/use-node-display-manager.tsx

@@ -1,19 +1,60 @@
 import React from "react";
-import {NodeTaps} from "@/components/editor/node-components/taps";
 import {TabBase} from "@/components/editor/node-components/taps/base";
+import {TabAction} from "@/components/editor/node-components/taps/action";
+import {TabPromission} from "@/components/editor/node-components/taps/promission";
+import { TabsProps,Tabs } from "antd";
 
+interface TabNodeLayoutProps{
+    children?:React.ReactNode;
+    hiddenAction?:boolean;
+}
 
-type NodeLayoutType = 'tap' | 'fall';
+export const TabNodeLayout:React.FC<TabNodeLayoutProps> = (props)=>{
 
-interface NodeLayoutProps{
-    type:NodeLayoutType;
-}
+    const items: TabsProps['items'] = [];
+
+    const hiddenAction = props.hiddenAction || false;
 
-export const NodeLayout:React.FC<NodeLayoutProps> = (props)=>{
-    if(props.type==='tap'){
-        return <NodeTaps/>
+    items.push({
+        key: 'base',
+        label: `基础配置`,
+        children: <TabBase children={props.children}/>,
+        destroyOnHidden: true,
+    });
+
+    if(!hiddenAction) {
+        items.push({
+            key: 'action',
+            label: `按钮配置`,
+            children: <TabAction/>,
+            destroyOnHidden: true,
+        })
     }
+
+    items.push({
+        key: 'promission',
+        label: `权限配置`,
+        children: <TabPromission/>,
+        destroyOnHidden: true,
+    });
+
+    return (
+        <Tabs
+            style={{
+                width: '100%',
+            }}
+            centered={true}
+            items={items}
+        />
+    )
+}
+
+interface PanelLayoutProps{
+    children?:React.ReactNode;
+}
+
+export const PanelLayout:React.FC<PanelLayoutProps> = (props)=>{
     return (
-        <TabBase/>
+        <TabBase children={props.children}/>
     )
 }

frontend/packages/flow-design/src/components/editor/node-components/layout/index.tsx

@@ -1,11 +1,11 @@
 import React from "react";
 import {Flex} from "antd";
-import {useNodeDisplayManager} from "@/components/editor/hooks";
 
-export const TabBase:React.FC = () => {
+interface TabBaseProps{
+    children?:React.ReactNode;
+}
 
-    const nodeDisplayManager = useNodeDisplayManager();
-    const strategyRenderManager = nodeDisplayManager.getStrategyRenderManager();
+export const TabBase:React.FC<TabBaseProps> = (props) => {
 
     return (
         <Flex
@@ -17,23 +17,7 @@ export const TabBase:React.FC = () => {
                 padding: 8,
             }}
         >
-            {strategyRenderManager.render('OperatorLoadStrategy')}
-            {strategyRenderManager.render('NodeTitleStrategy')}
-            {strategyRenderManager.render('MultiOperatorAuditStrategy')}
-            {strategyRenderManager.render('SameOperatorAuditStrategy')}
-            {strategyRenderManager.render('ErrorTriggerStrategy')}
-            {strategyRenderManager.render('DelayStrategy')}
-            {strategyRenderManager.render('ResubmitStrategy')}
-            {strategyRenderManager.render('AdviceStrategy')}
-            {strategyRenderManager.render('TimeoutStrategy')}
-            {strategyRenderManager.render('RevokeStrategy')}
-            {strategyRenderManager.render('TriggerStrategy')}
-            {strategyRenderManager.render('RecordMergeStrategy')}
-            {strategyRenderManager.render('SubProcessStrategy')}
-            {strategyRenderManager.render('ConditionBranchStrategy')}
-            {strategyRenderManager.render('InclusiveBranchStrategy')}
-            {strategyRenderManager.render('ParallelBranchStrategy')}
-
+            {props.children}
         </Flex>
     )
 }