Update Vite configuration to change server port from 3000 to 3100. Refactor DashboardPage component by removing unused right panel close handler and simplifying layout structure for improved readability and performance.

This commit is contained in:
褚宏光 2026-01-28 10:40:00 +08:00
parent 7cfb8c80da
commit 1629d4972c
2 changed files with 7 additions and 35 deletions

View File

@ -273,12 +273,6 @@ export const DashboardPage: React.FC = () => {
} }
}; };
// 关闭右侧面板时,重置图表渲染状态
const handleCloseRightPanel = () => {
setRightPanelVisible(false);
setShouldRenderCharts(false);
};
const getDimensionColor = (id: string) => { const getDimensionColor = (id: string) => {
const colorMap: Record<string, { left: string, bg: string, hover: string, icon: string }> = { const colorMap: Record<string, { left: string, bg: string, hover: string, icon: string }> = {
'valuation': { left: 'bg-blue-500', bg: 'bg-white', hover: 'hover:bg-gray-50', icon: 'bg-blue-50 text-blue-500' }, 'valuation': { left: 'bg-blue-500', bg: 'bg-white', hover: 'hover:bg-gray-50', icon: 'bg-blue-50 text-blue-500' },
@ -395,14 +389,10 @@ export const DashboardPage: React.FC = () => {
<div className="flex-1 flex overflow-hidden"> <div className="flex-1 flex overflow-hidden">
{/* Left Panel: Rating Snapshot Table */} {/* Left Panel: Rating Snapshot Table */}
<div className={`bg-white border-r border-slate-200 flex flex-col z-10 shadow-sm transition-all duration-300 ${ <div className="bg-white border-r border-slate-200 flex flex-col z-10 shadow-sm transition-all duration-300 w-full lg:w-[380px] xl:w-[480px] 2xl:w-[720px]">
rightPanelVisible <div className="flex flex-col flex-1 min-h-0">
? 'w-full lg:w-[380px] xl:w-[480px] 2xl:w-[720px]'
: 'w-full'
}`}>
<div className={`flex flex-col flex-1 min-h-0 ${!rightPanelVisible ? 'max-w-[1440px] mx-auto w-full' : ''}`}>
<div className="p-4 border-b border-slate-100 bg-white shrink-0"> <div className="p-4 border-b border-slate-100 bg-white shrink-0">
<div className={`flex items-center ${rightPanelVisible ? 'justify-between' : 'justify-center'}`}> <div className="flex items-center justify-center">
<h2 className="text-base sm:text-lg font-bold text-slate-900 flex items-center gap-2"> <h2 className="text-base sm:text-lg font-bold text-slate-900 flex items-center gap-2">
<span style={{ fontSize: '26px' }}></span> <span style={{ fontSize: '26px' }}></span>
<button <button
@ -422,30 +412,14 @@ export const DashboardPage: React.FC = () => {
<Settings size={16} className="group-hover:rotate-90 transition-transform duration-300" /> <Settings size={16} className="group-hover:rotate-90 transition-transform duration-300" />
</button> </button>
</h2> </h2>
{rightPanelVisible && (
<button
onClick={handleCloseRightPanel}
className="flex items-center gap-1.5 px-3 py-1.5 text-sm text-slate-600 hover:text-slate-900 hover:bg-slate-100 rounded-lg transition-colors group"
title="全屏显示快照列表"
>
<X size={16} className="group-hover:scale-110 transition-transform" />
<span className="hidden sm:inline"></span>
</button>
)}
</div> </div>
{!rightPanelVisible && ( <div className="text-sm text-slate-400 mt-3 text-center"></div>
<div className="text-sm text-slate-400 mt-3 text-center"></div>
)}
</div> </div>
<div className="flex-1 overflow-y-auto p-4 sm:p-6"> <div className="flex-1 overflow-y-auto p-4 sm:p-6">
{/* 维度布局:右侧展开时在大屏幕(>1440px)显示2列否则1列未展开时两列 */} {/* 维度布局:右侧展开时在大屏幕(>1440px)显示2列否则1列 */}
<div className={`grid gap-4 ${ <div className="grid gap-4 grid-cols-1 2xl:grid-cols-2">
rightPanelVisible
? 'grid-cols-1 2xl:grid-cols-2'
: 'grid-cols-1 lg:grid-cols-2'
}`}>
{modules.map((group) => { {modules.map((group) => {
const colors = getDimensionColor(group.id); const colors = getDimensionColor(group.id);
@ -623,7 +597,6 @@ export const DashboardPage: React.FC = () => {
</div> </div>
{/* Right Panel: Charts */} {/* Right Panel: Charts */}
{rightPanelVisible && (
<div className="hidden lg:flex flex-1 relative flex-col min-w-0 bg-slate-50"> <div className="hidden lg:flex flex-1 relative flex-col min-w-0 bg-slate-50">
<div className="flex-1 overflow-y-auto p-6 scroll-smooth"> <div className="flex-1 overflow-y-auto p-6 scroll-smooth">
<div className="max-w-4xl mx-auto space-y-12"> <div className="max-w-4xl mx-auto space-y-12">
@ -683,7 +656,6 @@ export const DashboardPage: React.FC = () => {
</div> </div>
</div> </div>
</div> </div>
)}
</div> </div>

View File

@ -7,7 +7,7 @@ export default defineConfig(({ mode }) => {
return { return {
base: './', base: './',
server: { server: {
port: 3000, port: 3100,
host: '0.0.0.0', host: '0.0.0.0',
}, },
plugins: [react()], plugins: [react()],