From e028fed508d8c6bb82f3b71ece8ade5dfcbf79e7 Mon Sep 17 00:00:00 2001
From: kkfluous <kkfluous@kdemacbook-air.local>
Date: Wed, 29 Apr 2026 18:27:12 +0800
Subject: [PATCH] fix(mobile): add top tab switcher and remove dead settings
 entry
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 src/App.tsx                | 25 ++++++++++++++++++++++++-
 src/components/Sidebar.tsx | 28 ++++++++++------------------
 2 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/App.tsx b/src/App.tsx
index 20e6ce3..b4b6295 100644
--- a/src/App.tsx
+++ b/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>
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index c472769..40b823d 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.tsx
@@ -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 = [
-    { id: 'overall', name: '全网运营总览', icon: Calendar },
-    { id: 'users', name: '司机与车辆大盘', icon: Users },
-    { id: 'efficiency', name: '站点效能监控', icon: BarChart3 },
-  ];
+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,14 +18,14 @@ 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)}
             className={cn(
               "flex items-center w-full px-3 py-3 rounded-xl text-sm font-semibold transition-all duration-200 text-left group",
-              currentView === item.id 
-                ? "bg-indigo-500/15 text-indigo-300 shadow-sm border border-indigo-500/30" 
+              currentView === item.id
+                ? "bg-indigo-500/15 text-indigo-300 shadow-sm border border-indigo-500/30"
                 : "hover:bg-slate-800/80 hover:text-slate-100 border border-transparent text-slate-400"
             )}
           >
@@ -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">