100 lines
3.0 KiB
React
100 lines
3.0 KiB
React
// frontend-react/src/App.jsx
|
|
import React, { useCallback, useEffect, useRef } from 'react'; // ✅ 移除 useState
|
|
import TopBar from './components/TopBar';
|
|
import { ChatBox } from './components/Mid';
|
|
import SideBarLeft from './components/SideBarLeft';
|
|
import SideBarRight from './components/SideBarRight';
|
|
import useAppLayoutStore from './Store/AppLayoutSlice'; // ✅ 新增
|
|
import './index.css';
|
|
|
|
function App() {
|
|
// ✅ 从 AppLayoutStore 获取状态和方法
|
|
const {
|
|
layoutMode,
|
|
sidebarMode,
|
|
isSidebarHovered,
|
|
colorTheme,
|
|
setLayoutMode,
|
|
setSidebarMode,
|
|
setSidebarHovered,
|
|
setColorTheme
|
|
} = useAppLayoutStore();
|
|
|
|
// 防抖定时器引用
|
|
const hoverTimeoutRef = useRef(null);
|
|
const leaveTimeoutRef = useRef(null);
|
|
|
|
// 处理鼠标进入左侧栏 - 使用 useCallback 优化
|
|
const handleMouseEnter = useCallback(() => {
|
|
if (sidebarMode === 'smart') {
|
|
// 清除之前的离开定时器
|
|
if (leaveTimeoutRef.current) {
|
|
clearTimeout(leaveTimeoutRef.current);
|
|
}
|
|
|
|
// 设置防抖延迟后展开
|
|
hoverTimeoutRef.current = setTimeout(() => {
|
|
setSidebarHovered(true); // ✅ 使用 store 方法
|
|
setLayoutMode('edit');
|
|
}, 400); // 400ms 防抖
|
|
}
|
|
}, [sidebarMode, setSidebarHovered, setLayoutMode]);
|
|
|
|
// 处理鼠标离开左侧栏 - 使用 useCallback 优化
|
|
const handleMouseLeave = useCallback(() => {
|
|
if (sidebarMode === 'smart') {
|
|
// 清除之前的进入定时器
|
|
if (hoverTimeoutRef.current) {
|
|
clearTimeout(hoverTimeoutRef.current);
|
|
}
|
|
|
|
// 设置延迟收起，给用户反应时间
|
|
leaveTimeoutRef.current = setTimeout(() => {
|
|
setSidebarHovered(false); // ✅ 使用 store 方法
|
|
setLayoutMode('chat');
|
|
}, 250); // 250ms 延迟
|
|
}
|
|
}, [sidebarMode, setSidebarHovered, setLayoutMode]);
|
|
|
|
// 清理定时器
|
|
useEffect(() => {
|
|
return () => {
|
|
if (hoverTimeoutRef.current) clearTimeout(hoverTimeoutRef.current);
|
|
if (leaveTimeoutRef.current) clearTimeout(leaveTimeoutRef.current);
|
|
};
|
|
}, []);
|
|
|
|
return (
|
|
<div className={`app ${layoutMode}-mode`}>
|
|
{/* ✅ TopBar 不再需要 props，直接从 Store 读取状态 */}
|
|
<TopBar />
|
|
|
|
{/* 主内容容器 */}
|
|
<div className="main-container">
|
|
{/* 左侧栏 - 智能模式下悬停展开 */}
|
|
<div
|
|
className={`sidebar-left-wrapper sidebar-mode-${sidebarMode} ${sidebarMode === 'smart' && isSidebarHovered ? 'sidebar-expanded' : ''}`}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
>
|
|
<SideBarLeft />
|
|
</div>
|
|
|
|
{/* 中间栏：聊天框 */}
|
|
<div className="chat-area-wrapper">
|
|
<div className="chat-area">
|
|
<ChatBox />
|
|
</div>
|
|
</div>
|
|
|
|
{/* 右侧栏 */}
|
|
<div className="sidebar-right-wrapper">
|
|
<SideBarRight />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default App;
|