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:
parent
7cfb8c80da
commit
1629d4972c
@ -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>
|
||||||
|
|
||||||
|
|||||||
@ -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()],
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user