fix(Layout): 全局布局优化与 Mock 数据增强

This commit is contained in:
zdl
2025-12-23 17:45:19 +08:00
parent 602dcf8eee
commit f1ae48bd42
6 changed files with 84 additions and 11 deletions

View File

@@ -14,10 +14,6 @@
"@fontsource/open-sans": "^4.5.0",
"@fontsource/raleway": "^4.5.0",
"@fontsource/roboto": "^4.5.0",
"@fullcalendar/core": "^6.1.19",
"@fullcalendar/daygrid": "^6.1.19",
"@fullcalendar/interaction": "^6.1.19",
"@fullcalendar/react": "^6.1.19",
"@reduxjs/toolkit": "^2.9.2",
"@splidejs/react-splide": "^0.7.12",
"@tanstack/react-virtual": "^3.13.12",

View File

@@ -29,7 +29,7 @@ import { useNavigate } from 'react-router-dom';
import { useGlobalSidebar } from '@/contexts/GlobalSidebarContext';
import { useAuth } from '@/contexts/AuthContext';
import { getEventDetailUrl } from '@/utils/idEncoder';
import { Z_INDEX } from '@/layouts/config/layoutConfig';
import { Z_INDEX, LAYOUT_SIZE } from '@/layouts/config/layoutConfig';
import WatchSidebar from '@views/Profile/components/WatchSidebar';
import { WatchlistPanel, FollowingEventsPanel } from '@views/Profile/components/WatchSidebar/components';
import HotSectorsRanking from '@views/Profile/components/MarketDashboard/components/atoms/HotSectorsRanking';
@@ -269,6 +269,7 @@ const GlobalSidebar = () => {
<Box
w={isOpen ? '300px' : '72px'}
h="100%"
pt={LAYOUT_SIZE.navbarHeight}
flexShrink={0}
transition="width 0.2s ease-in-out"
display={{ base: 'none', md: 'block' }}

View File

@@ -18,8 +18,8 @@ export const GlobalSidebarProvider = ({ children }) => {
const { user } = useAuth();
const userId = user?.id;
// 侧边栏展开/收起状态
const [isOpen, setIsOpen] = useState(true);
// 侧边栏展开/收起状态(默认折叠)
const [isOpen, setIsOpen] = useState(false);
// 数据状态
const [watchlist, setWatchlist] = useState([]);

View File

@@ -9,7 +9,7 @@ import BackToTopButton from "./components/BackToTopButton";
import ErrorBoundary from "../components/ErrorBoundary";
import PageLoader from "../components/Loading/PageLoader";
import GlobalSidebar from "../components/GlobalSidebar";
import { BACK_TO_TOP_CONFIG } from "./config/layoutConfig";
import { BACK_TO_TOP_CONFIG, LAYOUT_SIZE } from "./config/layoutConfig";
// ✅ P0 性能优化:缓存静态组件,避免路由切换时不必要的重新渲染
// HomeNavbar (1623行) 和 AppFooter 不依赖路由参数,使用 memo 可大幅减少渲染次数
@@ -40,7 +40,7 @@ export default function MainLayout() {
<Box flex="1" bg="#1A202C" position="relative" overflow="hidden">
{/* 页面内容区域 - 全宽度,与导航栏对齐 */}
<Box h="100%" overflowY="auto" display="flex" flexDirection="column">
<Box flex="1">
<Box flex="1" pt={LAYOUT_SIZE.navbarHeight}>
<ErrorBoundary>
<Suspense fallback={<PageLoader message="页面加载中..." />}>
<Outlet />

View File

@@ -165,9 +165,9 @@ export const PAGE_LOADER_CONFIG = {
* 布局尺寸配置
*/
export const LAYOUT_SIZE = {
navbarHeight: '80px',
navbarHeight: '60px', // 导航栏统一高度
footerHeight: 'auto',
contentMinHeight: 'calc(100vh - 80px)', // 100vh - navbar高度
contentMinHeight: 'calc(100vh - 60px)', // 100vh - navbar高度
};
/**

View File

@@ -773,6 +773,7 @@ export const mockInvestmentPlans = [
},
// ==================== 今日数据(用于日历视图展示) ====================
// 测试同日期多事件显示:计划 x3, 复盘 x3, 系统 x3
{
id: 320,
user_id: 1,
@@ -832,6 +833,81 @@ export const mockInvestmentPlans = [
updated_at: '2025-12-23T16:00:00Z',
tags: ['日复盘', '年末交易'],
stocks: ['600519.SH', '300750.SZ']
},
// 额外计划2测试同日期多计划显示
{
id: 322,
user_id: 1,
type: 'plan',
title: 'AI算力板块布局',
content: `【目标】捕捉AI算力板块机会
【策略】
- 寒武纪:关注突破信号
- 中科曙光:服务器龙头
- 浪潮信息:算力基础设施`,
target_date: '2025-12-23',
status: 'pending',
created_at: '2025-12-23T09:00:00Z',
updated_at: '2025-12-23T09:00:00Z',
tags: ['AI', '算力'],
stocks: ['688256.SH', '603019.SH', '000977.SZ']
},
// 额外计划3测试同日期多计划显示
{
id: 323,
user_id: 1,
type: 'plan',
title: '医药板块观察计划',
content: `【目标】关注创新药投资机会
【策略】
- 恒瑞医药:创新药龙头
- 药明康德CRO龙头`,
target_date: '2025-12-23',
status: 'pending',
created_at: '2025-12-23T10:00:00Z',
updated_at: '2025-12-23T10:00:00Z',
tags: ['医药', '创新药'],
stocks: ['600276.SH', '603259.SH']
},
// 额外复盘2测试同日期多复盘显示
{
id: 324,
user_id: 1,
type: 'review',
title: '半导体操作复盘',
content: `【操作回顾】
- 中芯国际:持仓未动
- 北方华创:观望
【经验总结】
半导体板块整体震荡,等待突破信号`,
target_date: '2025-12-23',
status: 'completed',
created_at: '2025-12-23T16:00:00Z',
updated_at: '2025-12-23T16:30:00Z',
tags: ['半导体复盘'],
stocks: ['688981.SH', '002371.SZ']
},
// 额外复盘3测试同日期多复盘显示
{
id: 325,
user_id: 1,
type: 'review',
title: '本周白酒持仓复盘',
content: `【操作回顾】
- 茅台本周加仓0.5%
- 五粮液:持仓未动
【盈亏分析】
白酒板块本周表现平稳,继续持有`,
target_date: '2025-12-23',
status: 'completed',
created_at: '2025-12-23T17:00:00Z',
updated_at: '2025-12-23T17:30:00Z',
tags: ['白酒复盘', '周复盘'],
stocks: ['600519.SH', '000858.SZ']
}
];