fix(mobile): add top tab switcher and remove dead settings entry
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>
This commit is contained in:
25
src/App.tsx
25
src/App.tsx
@@ -1,7 +1,8 @@
|
||||
import { useState } from 'react';
|
||||
import { Dashboard } from './components/Dashboard';
|
||||
import { Sidebar } from './components/Sidebar';
|
||||
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');
|
||||
@@ -17,6 +18,28 @@ export default function App() {
|
||||
<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>
|
||||
|
||||
@@ -1,14 +1,14 @@
|
||||
import React from 'react';
|
||||
import { BarChart3, Calendar, Settings, Fuel, Users, ShieldCheck } from 'lucide-react';
|
||||
import { BarChart3, Calendar, Fuel, Users } from 'lucide-react';
|
||||
import { cn } from '../lib/utils';
|
||||
|
||||
export function Sidebar({ currentView, setCurrentView }: { currentView: string; setCurrentView: (v: string) => void }) {
|
||||
const menuItems = [
|
||||
export const sidebarMenuItems = [
|
||||
{ id: 'overall', name: '全网运营总览', icon: Calendar },
|
||||
{ id: 'users', name: '司机与车辆大盘', icon: Users },
|
||||
{ id: 'efficiency', name: '站点效能监控', icon: BarChart3 },
|
||||
];
|
||||
];
|
||||
|
||||
export function Sidebar({ currentView, setCurrentView }: { currentView: string; setCurrentView: (v: string) => void }) {
|
||||
return (
|
||||
<aside className="w-64 bg-slate-900 border-r border-slate-800 hidden md:flex flex-col text-slate-300 shadow-xl overflow-hidden relative">
|
||||
<div className="absolute top-0 left-0 w-full h-[600px] bg-gradient-to-b from-indigo-500/10 to-transparent pointer-events-none" />
|
||||
@@ -18,7 +18,7 @@ export function Sidebar({ currentView, setCurrentView }: { currentView: string;
|
||||
</div>
|
||||
<nav className="flex-1 py-6 px-4 space-y-2 z-10 overflow-y-auto">
|
||||
<div className="text-xs font-bold text-slate-500/80 uppercase tracking-wider mb-4 px-3">动态看板视图</div>
|
||||
{menuItems.map((item) => (
|
||||
{sidebarMenuItems.map((item) => (
|
||||
<button
|
||||
key={item.id}
|
||||
onClick={() => setCurrentView(item.id)}
|
||||
@@ -33,14 +33,6 @@ export function Sidebar({ currentView, setCurrentView }: { currentView: string;
|
||||
{item.name}
|
||||
</button>
|
||||
))}
|
||||
|
||||
<div className="mt-8 pt-6 border-t border-white/5">
|
||||
<div className="text-xs font-bold text-slate-500/80 uppercase tracking-wider mb-2 px-3">常规配置</div>
|
||||
<button className="flex items-center w-full px-3 py-2.5 rounded-lg text-sm font-medium transition-colors text-left text-slate-400 hover:bg-slate-800 hover:text-slate-100">
|
||||
<Settings className="w-5 h-5 mr-3 text-slate-500" />
|
||||
后台系统设置
|
||||
</button>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div className="p-4 border-t border-white/5 bg-slate-900 z-10 shrink-0">
|
||||
|
||||
Reference in New Issue
Block a user