fix(Layout): 全局布局优化与 Mock 数据增强
This commit is contained in:
@@ -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",
|
||||
|
||||
@@ -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' }}
|
||||
|
||||
@@ -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([]);
|
||||
|
||||
@@ -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 />
|
||||
|
||||
@@ -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高度
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -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']
|
||||
}
|
||||
];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user