feat(ideContainer): 引入ideContainer专属store,

实现画布的actionBar与ide容器logBar的状态交互

src/pages/flowEditor/components/actionBar.tsx

@@ -1,6 +1,8 @@
 import React from 'react';
 import { Button } from '@arco-design/web-react';
 import { IconSave, IconPlayArrow, IconCodeSquare } from '@arco-design/web-react/icon';
+import { updateLogBarStatus } from '@/store/ideContainer';
+import { useSelector, useDispatch } from 'react-redux';
 
 const ButtonGroup = Button.Group;
 
@@ -9,6 +11,14 @@ interface ActionBarProps {
 }
 
 const ActionBar: React.FC<ActionBarProps> = ({ onSave }) => {
+  const { logBarStatus } = useSelector((state) => state.ideContainer);
+  const dispatch = useDispatch();
+
+  const changeLogBarStatus = () => {
+    console.log(123, logBarStatus);
+    dispatch(updateLogBarStatus(!logBarStatus));
+  };
+
   return (
     <div className="action-bar">
       <Button onClick={onSave} type="primary" shape="round" icon={<IconSave />}>保存</Button>
@@ -26,6 +36,7 @@ const ActionBar: React.FC<ActionBarProps> = ({ onSave }) => {
           shape="round"
           icon={<IconCodeSquare />}
           style={{ padding: '0 8px', backgroundColor: '#fff' }}
+          onClick={() => changeLogBarStatus()}
         >
           日志
         </Button>

src/pages/ideContainer/logBar.tsx

@@ -1,6 +1,8 @@
 import React, { useState, useRef, useEffect } from 'react';
 import { ResizeBox, Tabs } from '@arco-design/web-react';
 import styles from './style/logBar.module.less';
+import { updateLogBarStatus } from '@/store/ideContainer';
+import { useSelector, useDispatch } from 'react-redux';
 
 const TabPane = Tabs.TabPane;
 
@@ -34,40 +36,44 @@ const data = [
 const LogBar: React.FC<LogBarProps> = () => {
   const [tabs] = useState(data);
   const [activeTab, setActiveTab] = useState('1');
-  const [collapsed, setCollapsed] = useState(true);
   const resizeBoxRef = useRef<HTMLDivElement>(null); // 引用 ResizeBox 容器
+  const { logBarStatus } = useSelector((state) => state.ideContainer);
+  const dispatch = useDispatch();
+
 
   // 处理 Tab 点击事件
   const handleTabClick = (key: string) => {
     // 如果点击当前激活的 tab，则切换收起状态
     if (key === activeTab) {
-      setCollapsed(!collapsed);
+      dispatch(updateLogBarStatus(!logBarStatus));
     }
     else {
       // 如果点击的是其他 tab，则切换到该 tab 并展开
       setActiveTab(key);
-      setCollapsed(false);
+      dispatch(updateLogBarStatus(true));
     }
   };
 
   // 当 collapsed 状态改变时，直接更新元素的样式
   useEffect(() => {
+
     if (resizeBoxRef.current) {
-      resizeBoxRef.current.style.height = collapsed ? '40px' : '250px';
+      console.log('logBarStatus:', logBarStatus);
+      resizeBoxRef.current.style.height = logBarStatus ? '250px' : '0px';
     }
-  }, [collapsed]);
+  }, [logBarStatus]);
 
   // 处理 ResizeBox 手动调整大小事件
   const handleResize = (e: MouseEvent, size: {
     width: number;
     height: number;
   }) => {
-    // 当高度接近收起状态的高度时，同步更新 collapsed 状态
+    // 当高度接近收起状态的高度时，同步更新 logBarStatus 状态
     if (size.height <= 40) {
-      setCollapsed(true);
+      dispatch(updateLogBarStatus(false));
     }
     else {
-      setCollapsed(false);
+      dispatch(updateLogBarStatus(true));
     }
   };
 
@@ -78,7 +84,7 @@ const LogBar: React.FC<LogBarProps> = () => {
         className={styles.logBar}
         directions={['top']}
         style={{
-          height: collapsed ? '40px' : '250px'
+          height: logBarStatus ? '250px' : '0px'
         }}
         onMoving={handleResize}
       >

src/store/ideContainer.ts

@@ -0,0 +1,33 @@
+import { createSlice } from '@reduxjs/toolkit';
+
+interface IDEContainerState {
+  selected?: string;
+  menuData?: any[];
+  logBarStatus?: boolean;
+}
+
+const initialState: IDEContainerState = {
+  selected: '',
+  menuData: [],
+  logBarStatus: false
+};
+
+const ideContainerSlice = createSlice({
+  name: 'ideContainer',
+  initialState,
+  reducers: {
+    updateSelected(state, action) {
+      state.selected = action.payload;
+    },
+    updateMenuData(state, action) {
+      state.menuData = action.payload;
+    },
+    updateLogBarStatus(state, action) {
+      state.logBarStatus = action.payload;
+    }
+  }
+});
+
+export const { updateSelected, updateMenuData, updateLogBarStatus } = ideContainerSlice.actions;
+
+export default ideContainerSlice.reducer;