fix flow scss

Author: xlorne

admin-pro-ui/src/components/flow/index.scss

@@ -1,5 +1,20 @@
+/* 流程的背景色 */
+$flow-background-color: white;
+/* 流程的边框颜色 */
+$flow-box-shadow-color: rgb(228, 224, 219);
+
+/* 抄送节点的颜色 */
+$flow-circulate-color: #61aa1f;
+/* 流程节点的颜色 */
+$flow-node-color: #6855ef;
+/* 结束节点的颜色 */
+$flow-over-color: #ea3f21;
+/* 开始节点的颜色 */
+$flow-start-color: #b1ad30;
+
+/* 流程设计器的样式 */
 .flow-design {
-  border: 1px solid #ebeef5;
+  border: 1px solid $flow-box-shadow-color;
   transition: 0.3s;
   padding: 15px 16px;
   border-radius: 12px;
@@ -10,9 +25,91 @@
     height: 85vh;
   }
 }
-.lf-mini-map {
-  border: none !important;
-  box-shadow: 3px 0 10px 1px rgb(228, 224, 219);
+
+
+/* 流程节点的样式 */
+.flow-node {
+  display: flex;
+  align-items: center;
+  max-height: 40px;
+  border-radius: 12px;
+  padding: 10px;
+  position: relative;
+
+  .icon {
+    margin-left: 10px;
+    position: absolute;
+    font-size: 16px;
+    left: 0;
+  }
+
+  .code {
+    margin-left: 20px;
+    font-size: 14px;
+    color: #4a5e63;
+  }
+
+  .title {
+    margin-left: 5px;
+    font-size: 14px;
+    color: black;
+  }
+
+
+  .setting {
+    margin-right: 10px;
+    font-size: 14px;
+    position: absolute;
+    right: 0;
+  }
+
+
+  .state {
+    margin-right: 10px;
+    font-size: 14px;
+    position: absolute;
+    right: 0;
+  }
+}
+
+
+.circulate-node {
+  border: 1px solid $flow-circulate-color;
+  .icon {
+    color: $flow-circulate-color;
+  }
+  .setting {
+    color: $flow-circulate-color;
+  }
 }
 
 
+.node-node {
+  border: 1px solid $flow-node-color;
+  .icon {
+    color: $flow-node-color;
+  }
+  .setting {
+    color: $flow-node-color;
+  }
+}
+
+.over-node {
+  border: 1px solid $flow-over-color;
+  .icon {
+    color: $flow-over-color;
+  }
+  .setting {
+    color: $flow-over-color;
+  }
+}
+
+.start-node {
+  border: 1px solid $flow-start-color;
+  .icon {
+    color: $flow-start-color;
+  }
+  .setting {
+    color: $flow-start-color;
+  }
+}

admin-pro-ui/src/components/flow/index.tsx

@@ -31,6 +31,14 @@ interface FlowContextProps {
 export const FlowContext = React.createContext<FlowContextProps | null>(null);
 
 const Flow: React.FC<FlowProps> = (props) => {
+
+    // 流程图背景颜色
+    const FLOW_BACKGROUND_COLOR = '#f3f5f8';
+    // 流程图的边颜色
+    const FLOW_EDGE_COLOR = '#8f94e3';
+    // 流程图的边宽度
+    const FLOW_EDGE_STROKE_WIDTH = 1;
+
     const container = useRef<HTMLDivElement>(null);
     const lfRef = useRef<LogicFlow>(null);
     const edgeType = props.edgeType || 'polyline';
@@ -61,7 +69,7 @@ const Flow: React.FC<FlowProps> = (props) => {
             container: container.current,
             ...SilentConfig,
             background: {
-                backgroundColor: '#f3f5f8'
+                backgroundColor: FLOW_BACKGROUND_COLOR
             },
             plugins: [Menu, DndPanel, MiniMap, Snapshot],
             grid: false,
@@ -82,16 +90,16 @@ const Flow: React.FC<FlowProps> = (props) => {
 
         lfRef.current.setTheme({
             bezier: {
-                stroke: '#8f94e3',
-                strokeWidth: 1,
+                stroke: FLOW_EDGE_COLOR,
+                strokeWidth: FLOW_EDGE_STROKE_WIDTH,
             },
             polyline: {
-                stroke: '#8f94e3',
-                strokeWidth: 1,
+                stroke: FLOW_EDGE_COLOR,
+                strokeWidth: FLOW_EDGE_STROKE_WIDTH,
             },
             line: {
-                stroke: '#8f94e3',
-                strokeWidth: 1,
+                stroke: FLOW_EDGE_COLOR,
+                strokeWidth: FLOW_EDGE_STROKE_WIDTH,
             },
         });
         lfRef.current.register(Start);

admin-pro-ui/src/components/flow/nodes/Circulate/index.scss

@@ -1,7 +1,6 @@
 import {HtmlNode, HtmlNodeModel} from '@logicflow/core';
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.scss";
 import {InboxOutlined, SettingFilled} from "@ant-design/icons";
 import CirculateSettingPanel from "@/components/flow/nodes/panel/circulate";
 import StateTag from "@/components/flow/nodes/panel/StateTag";
@@ -37,7 +36,7 @@ export const CirculateView: React.FC<CirculateProps> = (props) => {
     const state = props.properties?.state;
 
     return (
-        <div className="circulate-node">
+        <div className="flow-node circulate-node">
             <InboxOutlined
                 className={"icon"}
             />

admin-pro-ui/src/components/flow/nodes/Circulate/index.tsx

@@ -1,7 +1,6 @@
 import {HtmlNode, HtmlNodeModel} from '@logicflow/core';
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.scss";
 import {PlusCircleFilled, SettingFilled} from "@ant-design/icons";
 import NodeSettingPanel from "@/components/flow/nodes/panel/node";
 import StateTag from "@/components/flow/nodes/panel/StateTag";
@@ -38,7 +37,7 @@ export const NodeView: React.FC<NodeProps> = (props) => {
     const state = props.properties?.state;
 
     return (
-        <div className="node-node">
+        <div className="flow-node node-node">
             <PlusCircleFilled
                 className={"icon"}
             />

admin-pro-ui/src/components/flow/nodes/Node/index.scss

@@ -1,7 +1,6 @@
 import {HtmlNode, HtmlNodeModel} from '@logicflow/core';
 import React from "react";
 import ReactDOM from "react-dom/client";
-import "./index.scss";
 import {CheckCircleFilled, SettingFilled} from "@ant-design/icons";
 import OverSettingPanel from "@/components/flow/nodes/panel/over";
 import StateTag from "@/components/flow/nodes/panel/StateTag";
@@ -37,7 +36,7 @@ export const OverView: React.FC<OverProps> = (props) => {
     const state = props.properties?.state;
 
     return (
-        <div className="over-node">
+        <div className="flow-node over-node">
             <CheckCircleFilled
                 className={"icon"}
             />