e028fed508
Sidebar was hidden on mobile with no fallback, so users were stuck on the default view. Add a horizontal tab strip under the header for mobile viewports and drop the "后台系统设置" button which had no handler or matching view. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
50 lines
1.9 KiB
TypeScript
50 lines
1.9 KiB
TypeScript
import { useState } from 'react';
|
|
import { Dashboard } from './components/Dashboard';
|
|
import { Sidebar, sidebarMenuItems } from './components/Sidebar';
|
|
import { Header } from './components/Header';
|
|
import { cn } from './lib/utils';
|
|
|
|
export default function App() {
|
|
const [currentView, setCurrentView] = useState('overall');
|
|
|
|
const viewTitles: Record<string, string> = {
|
|
'overall': '全网精细化运营大盘',
|
|
'efficiency': '各站点调度与效能监控',
|
|
'users': '平台用户与资产池'
|
|
};
|
|
|
|
return (
|
|
<div className="flex h-screen bg-slate-50 overflow-hidden font-sans">
|
|
<Sidebar currentView={currentView} setCurrentView={setCurrentView} />
|
|
<div className="flex flex-col flex-1 overflow-hidden">
|
|
<Header title={viewTitles[currentView] || '数据分析'} />
|
|
<nav className="md:hidden bg-white border-b border-slate-200 px-2 shrink-0 overflow-x-auto">
|
|
<div className="flex gap-1 min-w-max">
|
|
{sidebarMenuItems.map((item) => {
|
|
const active = currentView === item.id;
|
|
return (
|
|
<button
|
|
key={item.id}
|
|
onClick={() => setCurrentView(item.id)}
|
|
className={cn(
|
|
"flex items-center gap-1.5 px-3 py-2.5 text-xs font-semibold whitespace-nowrap border-b-2 transition-colors",
|
|
active
|
|
? "text-indigo-600 border-indigo-500"
|
|
: "text-slate-500 border-transparent active:text-slate-700"
|
|
)}
|
|
>
|
|
<item.icon className={cn("w-4 h-4", active ? "text-indigo-500" : "text-slate-400")} />
|
|
{item.name}
|
|
</button>
|
|
);
|
|
})}
|
|
</div>
|
|
</nav>
|
|
<main className="flex-1 overflow-y-auto p-4 md:p-6 lg:p-8">
|
|
<Dashboard currentView={currentView} />
|
|
</main>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|