Merge branch 'develop'

# Conflicts:
#	README_ZH.md

doc/record.md

@@ -16,7 +16,7 @@ DesignerStarter
 DesignerStore
 HeaderStore
 CompListStore
-ClassifyListStore
+LeftMenusStore
 RightStore
 EventOperateStore
 ContextMenuStore

package.json

@@ -15,7 +15,7 @@
     "@antv/g2plot": "^2.4.31",
     "@monaco-editor/react": "^4.6.0",
     "@scena/react-ruler": "^0.17.1",
-    "antd": "^4.17.3",
+    "antd": "^5.12.2",
     "html2canvas": "^1.4.1",
     "localforage": "^1.10.0",
     "lodash": "^4.17.21",
@@ -24,7 +24,6 @@
     "monaco-editor": "^0.44.0",
     "nanoid": "3",
     "react": "^18.2.0",
-    "react-best-gradient-color-picker": "^2.2.23",
     "react-dom": "^18.2.0",
     "react-moveable": "^0.54.1",
     "react-refresh": "^0.8.3",

src/MainRouter.tsx

@@ -0,0 +1,49 @@
+import {lazy, Suspense} from 'react';
+import {Route, Routes} from "react-router-dom";
+import Loading from "./ui/loading/Loading";
+import {ConfigProvider, MappingAlgorithm, theme} from "antd";
+import GlobalMessage from "./framework/message/GlobalMessage";
+
+const DemoMain = lazy(() => import('./test/DemoMain'));
+const Login = lazy(() => import('./pages/login/Login').then(module => ({default: module.Login})));
+const Designer = lazy(() => import('./designer/Designer'));
+const DesignerView = lazy(() => import('./designer/view/DesignerView'));
+const Home = lazy(() => import('./pages/home/Home'));
+
+export const studioDarkAlgorithm: MappingAlgorithm = (seedToken, mapToken) => {
+    // 使用 antd 默认的暗色算法生成基础token，这样其他不需要定制的部分则保持原样
+    const baseToken = theme.darkAlgorithm(seedToken, mapToken);
+    return {
+        ...baseToken,
+        colorBgLayout: '#20252b', // Layout 背景色
+        colorBgContainer: '#282c34', // 组件容器背景色
+        colorBgElevated: '#32363e', // 悬浮容器背景色
+    };
+};
+
+
+export default function MainRouter() {
+    return (
+        <ConfigProvider theme={{
+            algorithm: studioDarkAlgorithm,
+            components: {
+                Menu: {
+                    itemBg: 'none',
+                    itemColor: '#bfbfbf',
+                }
+            }
+        }}>
+            <Suspense fallback={<Loading/>}>
+                <Routes>
+                    <Route path={'/designer'} element={<Designer/>}/>
+                    <Route path={'/view'} element={<DesignerView/>}/>
+                    <Route path={'/test'} element={<DemoMain/>}/>
+                    <Route path={'/login'} element={<Login/>}/>
+                    <Route path={'/home'} element={<Home/>}/>
+                    <Route path={'/'} element={<Login/>}/>
+                </Routes>
+            </Suspense>
+            <GlobalMessage/>
+        </ConfigProvider>
+    );
+}

src/blueprint/BPCanvas.tsx

@@ -51,20 +51,21 @@ const lineSegmentCollisions = (event: MouseEvent) => {
 export const BPCanvas: React.FC = () => {
     useEffect(() => {
         //加载完毕后绘制链接线（由于节点组件的创建与渲染都是异步的，需要等节点的锚点都渲染完毕后才能确定连线的位置，因此暂时使用异步延时连线的渲染时机）
-        // todo 后续要调整为更精确的时机
+        // todo  要调整为更精确的时机
         const renderLineTimer = setTimeout(() => {
             reRenderAllLine();
             CanvasUtil.updSegmentSamplingPoint();
             clearTimeout(renderLineTimer);
         }, 50);
         const {nodeContainerRef} = bpStore;
         nodeContainerRef?.addEventListener('click', lineSegmentCollisions);
+        return () => nodeContainerRef?.removeEventListener('click', lineSegmentCollisions);
     }, [])
     return (
         <div className={'blue-print-canvas'} style={{
             overflow: "hidden",
-            width: window.innerWidth - 670,
-            height: window.innerHeight - 75,
+            width: '100%',
+            height: '100%',
         }}>
             <LineLayer/>
             <NodeLayer/>

src/blueprint/BluePrint.tsx

@@ -12,6 +12,7 @@ export const BluePrint: React.FC = () => {
                      footer={<BPFooter/>}
                      left={<BPLeft/>}
                      right={<BPRight/>}
-                     content={<BPCanvas/>}/>
+                     content={<BPCanvas/>}
+        />
     )
 }

src/blueprint/drag/BPMovable.tsx

@@ -1,5 +1,5 @@
 import React, {useEffect} from "react";
-import Moveable, {OnDrag, OnDragEnd, OnDragStart} from "react-moveable";
+import Moveable, {OnDrag, OnDragEnd, OnDragGroup, OnDragGroupEnd, OnDragStart} from "react-moveable";
 import bpStore, {IBPLine, IPoint} from "../store/BPStore";
 import {observer} from "mobx-react";
 import CanvasUtil from "../util/CanvasUtil";
@@ -120,14 +120,14 @@ export const BPMovable = observer((props: BPMovableProps) => {
             CanvasUtil.updSegmentSamplingPoint();
         }
 
-        const onDragGroup = (e: any) => {
-            e.events.forEach((ev: any) => ev.target.style.transform = ev.transform);
+        const onDragGroup = (e: OnDragGroup) => {
+            e.events.forEach((ev: OnDrag) => ev.target.style.transform = ev.transform);
             //重绘连线
             reRenderAllLine();
         }
 
-        const onDragGroupEnd = (e: any) => {
-            e.events.forEach((ev: any) => {
+        const onDragGroupEnd = (e: OnDragGroupEnd) => {
+            e.events.forEach((ev: OnDragEnd) => {
                 const {target, lastEvent} = ev;
                 if (lastEvent) {
                     const nodeId = target.id.split(':')[1];

src/blueprint/drag/BPSelectable.tsx

@@ -19,7 +19,7 @@ export const BPSelectable: React.FC<BPSelectableProps> = (props) => {
         const {bpMovableRef, selectedNodes} = bpStore;
         const target = e.inputEvent.target;
         if ((bpMovableRef!.isMoveableElement(target))
-            || selectedNodes.some((t: any) => t === target || t.contains(target))
+            || selectedNodes.some((t: HTMLElement) => t === target || t.contains(target))
         ) {
             e.stop();
         }

src/blueprint/footer/BPFooter.less

@@ -1,5 +1,5 @@
 .bp-footer {
-  height: 100%;
+  height: 35px;
   padding: 5px 10px;
   display: flex;
   align-items: center;

src/blueprint/header/BPHeader.less

@@ -1,10 +1,16 @@
 .bp-header {
   width: 100%;
+  height: 50px;
   background-color: #1f1f1f;
-  line-height: 39px;
+  line-height: 50px;
   color: #c3c3c3;
   padding: 0 15px;
   border-bottom: 1px solid #2e2e2e;
   display: flex;
   justify-content: space-between;
+
+
+  .bp-header-title {
+    font-size: 16px;
+  }
 }

src/blueprint/left/BPLeft.less

@@ -1,6 +1,6 @@
 .bp-left {
   display: flex;
-  height: 100%;
+  height: calc(100vh - 50px);
   background-color: #1a1a1a;
   border-right: 1px solid #2e2e2e;
 
@@ -10,8 +10,9 @@
     border-right: 1px solid #2e2e2e;
 
     .bp-left-item:hover {
+      transition: all 0.3s ease-in-out;
       background-color: #3d3d3d;
-      color: #9ed4ff;
+      color: #0095db;
       cursor: pointer;
     }
 
@@ -32,6 +33,10 @@
         font-size: 20px;
       }
     }
+
+    .bp-left-item-active {
+      color: #0095db;
+    }
   }
 
   .bp-node-list {
@@ -55,11 +60,9 @@
       padding: 10px;
       color: #999999;
       height: calc(100vh - 100px);
-      overflow-y: hidden;
+      overflow-y: scroll;
 
       .bp-node-list-container {
-        height: calc(100vh - 100px);
-        overflow-y: auto;
 
         .bp-node-list-item-used {
           background-color: #181818;
@@ -92,7 +95,6 @@
 
             span {
               position: relative;
-              top: -3px;
             }
           }
         }