fix(Layout): 全局布局优化与 Mock 数据增强
This commit is contained in:
@@ -14,10 +14,6 @@
|
|||||||
"@fontsource/open-sans": "^4.5.0",
|
"@fontsource/open-sans": "^4.5.0",
|
||||||
"@fontsource/raleway": "^4.5.0",
|
"@fontsource/raleway": "^4.5.0",
|
||||||
"@fontsource/roboto": "^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",
|
"@reduxjs/toolkit": "^2.9.2",
|
||||||
"@splidejs/react-splide": "^0.7.12",
|
"@splidejs/react-splide": "^0.7.12",
|
||||||
"@tanstack/react-virtual": "^3.13.12",
|
"@tanstack/react-virtual": "^3.13.12",
|
||||||
|
|||||||
@@ -29,7 +29,7 @@ import { useNavigate } from 'react-router-dom';
|
|||||||
import { useGlobalSidebar } from '@/contexts/GlobalSidebarContext';
|
import { useGlobalSidebar } from '@/contexts/GlobalSidebarContext';
|
||||||
import { useAuth } from '@/contexts/AuthContext';
|
import { useAuth } from '@/contexts/AuthContext';
|
||||||
import { getEventDetailUrl } from '@/utils/idEncoder';
|
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 WatchSidebar from '@views/Profile/components/WatchSidebar';
|
||||||
import { WatchlistPanel, FollowingEventsPanel } from '@views/Profile/components/WatchSidebar/components';
|
import { WatchlistPanel, FollowingEventsPanel } from '@views/Profile/components/WatchSidebar/components';
|
||||||
import HotSectorsRanking from '@views/Profile/components/MarketDashboard/components/atoms/HotSectorsRanking';
|
import HotSectorsRanking from '@views/Profile/components/MarketDashboard/components/atoms/HotSectorsRanking';
|
||||||
@@ -269,6 +269,7 @@ const GlobalSidebar = () => {
|
|||||||
<Box
|
<Box
|
||||||
w={isOpen ? '300px' : '72px'}
|
w={isOpen ? '300px' : '72px'}
|
||||||
h="100%"
|
h="100%"
|
||||||
|
pt={LAYOUT_SIZE.navbarHeight}
|
||||||
flexShrink={0}
|
flexShrink={0}
|
||||||
transition="width 0.2s ease-in-out"
|
transition="width 0.2s ease-in-out"
|
||||||
display={{ base: 'none', md: 'block' }}
|
display={{ base: 'none', md: 'block' }}
|
||||||
|
|||||||
@@ -18,8 +18,8 @@ export const GlobalSidebarProvider = ({ children }) => {
|
|||||||
const { user } = useAuth();
|
const { user } = useAuth();
|
||||||
const userId = user?.id;
|
const userId = user?.id;
|
||||||
|
|
||||||
// 侧边栏展开/收起状态
|
// 侧边栏展开/收起状态(默认折叠)
|
||||||
const [isOpen, setIsOpen] = useState(true);
|
const [isOpen, setIsOpen] = useState(false);
|
||||||
|
|
||||||
// 数据状态
|
// 数据状态
|
||||||
const [watchlist, setWatchlist] = useState([]);
|
const [watchlist, setWatchlist] = useState([]);
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import BackToTopButton from "./components/BackToTopButton";
|
|||||||
import ErrorBoundary from "../components/ErrorBoundary";
|
import ErrorBoundary from "../components/ErrorBoundary";
|
||||||
import PageLoader from "../components/Loading/PageLoader";
|
import PageLoader from "../components/Loading/PageLoader";
|
||||||
import GlobalSidebar from "../components/GlobalSidebar";
|
import GlobalSidebar from "../components/GlobalSidebar";
|
||||||
import { BACK_TO_TOP_CONFIG } from "./config/layoutConfig";
|
import { BACK_TO_TOP_CONFIG, LAYOUT_SIZE } from "./config/layoutConfig";
|
||||||
|
|
||||||
// ✅ P0 性能优化:缓存静态组件,避免路由切换时不必要的重新渲染
|
// ✅ P0 性能优化:缓存静态组件,避免路由切换时不必要的重新渲染
|
||||||
// HomeNavbar (1623行) 和 AppFooter 不依赖路由参数,使用 memo 可大幅减少渲染次数
|
// HomeNavbar (1623行) 和 AppFooter 不依赖路由参数,使用 memo 可大幅减少渲染次数
|
||||||
@@ -40,7 +40,7 @@ export default function MainLayout() {
|
|||||||
<Box flex="1" bg="#1A202C" position="relative" overflow="hidden">
|
<Box flex="1" bg="#1A202C" position="relative" overflow="hidden">
|
||||||
{/* 页面内容区域 - 全宽度,与导航栏对齐 */}
|
{/* 页面内容区域 - 全宽度,与导航栏对齐 */}
|
||||||
<Box h="100%" overflowY="auto" display="flex" flexDirection="column">
|
<Box h="100%" overflowY="auto" display="flex" flexDirection="column">
|
||||||
<Box flex="1">
|
<Box flex="1" pt={LAYOUT_SIZE.navbarHeight}>
|
||||||
<ErrorBoundary>
|
<ErrorBoundary>
|
||||||
<Suspense fallback={<PageLoader message="页面加载中..." />}>
|
<Suspense fallback={<PageLoader message="页面加载中..." />}>
|
||||||
<Outlet />
|
<Outlet />
|
||||||
|
|||||||
@@ -165,9 +165,9 @@ export const PAGE_LOADER_CONFIG = {
|
|||||||
* 布局尺寸配置
|
* 布局尺寸配置
|
||||||
*/
|
*/
|
||||||
export const LAYOUT_SIZE = {
|
export const LAYOUT_SIZE = {
|
||||||
navbarHeight: '80px',
|
navbarHeight: '60px', // 导航栏统一高度
|
||||||
footerHeight: 'auto',
|
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,
|
id: 320,
|
||||||
user_id: 1,
|
user_id: 1,
|
||||||
@@ -832,6 +833,81 @@ export const mockInvestmentPlans = [
|
|||||||
updated_at: '2025-12-23T16:00:00Z',
|
updated_at: '2025-12-23T16:00:00Z',
|
||||||
tags: ['日复盘', '年末交易'],
|
tags: ['日复盘', '年末交易'],
|
||||||
stocks: ['600519.SH', '300750.SZ']
|
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