diff --git a/src/pages/flowEditor/components/actionBar.tsx b/src/pages/flowEditor/components/actionBar.tsx index a1b7a9c..8da580b 100644 --- a/src/pages/flowEditor/components/actionBar.tsx +++ b/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 = ({ onSave }) => { + const { logBarStatus } = useSelector((state) => state.ideContainer); + const dispatch = useDispatch(); + + const changeLogBarStatus = () => { + console.log(123, logBarStatus); + dispatch(updateLogBarStatus(!logBarStatus)); + }; + return (
@@ -26,6 +36,7 @@ const ActionBar: React.FC = ({ onSave }) => { shape="round" icon={} style={{ padding: '0 8px', backgroundColor: '#fff' }} + onClick={() => changeLogBarStatus()} > 日志 diff --git a/src/pages/ideContainer/logBar.tsx b/src/pages/ideContainer/logBar.tsx index c3d31f4..265ca9c 100644 --- a/src/pages/ideContainer/logBar.tsx +++ b/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 = () => { const [tabs] = useState(data); const [activeTab, setActiveTab] = useState('1'); - const [collapsed, setCollapsed] = useState(true); const resizeBoxRef = useRef(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 = () => { className={styles.logBar} directions={['top']} style={{ - height: collapsed ? '40px' : '250px' + height: logBarStatus ? '250px' : '0px' }} onMoving={handleResize} > diff --git a/src/store/ideContainer.ts b/src/store/ideContainer.ts new file mode 100644 index 0000000..850874e --- /dev/null +++ b/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; \ No newline at end of file