拆分菜单 通过url区分访问

src/App.tsx

@@ -1,60 +1,141 @@
-import { useEffect, useMemo, useState } from 'react';
-import { Truck, Route, Activity, Zap } from 'lucide-react';
-import { Shell, type ModuleConfig } from './components/Shell';
-import AssetsModule from './modules/assets/AssetsModule';
-import MileageModule from './modules/mileage/MileageModule';
-import SchedulingModule from './modules/scheduling/SchedulingModule';
-import EnergyModule from './modules/energy/EnergyModule';
-import EleImportPage from './modules/ele/EleImportPage';
-import FeedbackAdminPage from './modules/admin/FeedbackAdminPage';
-import AuthProvider from './auth/AuthProvider';
-import { useAuth } from './auth/useAuth';
-import UnauthorizedPage from './auth/UnauthorizedPage';
-import { canAccessScheduling, canAccessEnergy } from './shared/auth/roles';
+import { useEffect, useMemo, useState } from "react";
+import { Truck, Route, Activity, Fuel, BatteryCharging, Receipt } from "lucide-react";
+import { Shell, type ModuleConfig } from "./components/Shell";
+import AssetsModule from "./modules/assets/AssetsModule";
+import MileageModule from "./modules/mileage/MileageModule";
+import SchedulingModule from "./modules/scheduling/SchedulingModule";
+import HydrogenModule from "./modules/energy/HydrogenModule";
+import ElectricModule from "./modules/energy/ElectricModule";
+import EtcModule from "./modules/energy/EtcModule";
+import EleImportPage from "./modules/ele/EleImportPage";
+import FeedbackAdminPage from "./modules/admin/FeedbackAdminPage";
+import AuthProvider from "./auth/AuthProvider";
+import { useAuth } from "./auth/useAuth";
+import UnauthorizedPage from "./auth/UnauthorizedPage";
+import { canAccessScheduling, canAccessEnergy } from "./shared/auth/roles";
 
-const BASE_MODULES: ModuleConfig[] = [
-  { id: 'assets',  label: '资产管理', icon: Truck, component: AssetsModule },
-  { id: 'mileage', label: '里程管理', icon: Route, component: MileageModule },
-];
+const ASSETS_MODULE: ModuleConfig = {
+  id: "assets",
+  label: "资产管理",
+  icon: Truck,
+  component: AssetsModule,
+};
 
-const ENERGY_MODULE: ModuleConfig = {
-  id: 'energy',  label: '能源管理', icon: Zap, component: EnergyModule,
+const MILEAGE_MODULE: ModuleConfig = {
+  id: "mileage",
+  label: "里程管理",
+  icon: Route,
+  component: MileageModule,
 };
 
 const SCHEDULING_MODULE: ModuleConfig = {
-  id: 'scheduling', label: '智能调度', icon: Activity, component: SchedulingModule,
+  id: "scheduling",
+  label: "智能调度",
+  icon: Activity,
+  component: SchedulingModule,
 };
 
+const HYDROGEN_MODULE: ModuleConfig = {
+  id: "hydrogen",
+  label: "氢能",
+  icon: Fuel,
+  component: HydrogenModule,
+};
+
+const ELECTRIC_MODULE: ModuleConfig = {
+  id: "electric",
+  label: "电能",
+  icon: BatteryCharging,
+  component: ElectricModule,
+};
+
+const ETC_MODULE: ModuleConfig = {
+  id: "etc",
+  label: "ETC",
+  icon: Receipt,
+  component: EtcModule,
+};
+
+/**
+ * 把旧路径 / 根路径归一化到 `/asset` 或 `/energy` 主路径，
+ * 必要时携带 hash 一段定位到具体模块。已是主路径或后台管理页则不动。
+ */
+function normalizePath() {
+  if (typeof window === "undefined") return;
+  const { pathname, hash, search } = window.location;
+
+  // 主路径 & 隐藏后台页保持不变
+  if (pathname === "/asset" || pathname === "/energy") return;
+  if (pathname === "/ele/import" || pathname === "/admin/feedback") return;
+
+  const legacyMap: Record<string, { path: string; hash?: string }> = {
+    "/": { path: "/asset" },
+    "/vehicle": { path: "/asset", hash: "assets" },
+    "/assets": { path: "/asset", hash: "assets" },
+    "/mileage": { path: "/asset", hash: "mileage" },
+    "/scheduling": { path: "/asset", hash: "scheduling" },
+  };
+
+  // 未知路径兜底到 /asset（保留原 hash 让 Shell 内部继续解析）
+  const target = legacyMap[pathname] ?? { path: "/asset" };
+  const finalHash = target.hash ? `#${target.hash}` : hash || "";
+  window.history.replaceState(null, "", `${target.path}${search}${finalHash}`);
+}
+
+normalizePath();
+
+type PathSet = "asset" | "energy";
+
+function getPathSet(): PathSet {
+  return window.location.pathname === "/energy" ? "energy" : "asset";
+}
+
 function getRouteKey(): string {
-  if (typeof window === 'undefined') return '';
+  if (typeof window === "undefined") return "";
   const path = window.location.pathname;
   const hash = window.location.hash;
-  if (path === '/ele/import' || hash === '#/ele/import' || hash === '#ele/import') return 'ele/import';
-  if (path === '/admin/feedback' || hash === '#/admin/feedback' || hash === '#admin/feedback') return 'admin/feedback';
-  return '';
+  if (
+    path === "/ele/import" ||
+    hash === "#/ele/import" ||
+    hash === "#ele/import"
+  )
+    return "ele/import";
+  if (
+    path === "/admin/feedback" ||
+    hash === "#/admin/feedback" ||
+    hash === "#admin/feedback"
+  )
+    return "admin/feedback";
+  return "";
 }
 
 function AuthGate() {
   const { isLoading, isAuthenticated, error, user } = useAuth();
   const [routeKey, setRouteKey] = useState(getRouteKey);
+  const [pathSet, setPathSet] = useState<PathSet>(getPathSet);
 
-  // 监听 hashchange / popstate，让 a href="#/..." 跳转能即时生效
+  // 监听 hashchange / popstate，让 a href="#/..." 跳转与浏览器前进后退能即时生效
   useEffect(() => {
-    const update = () => setRouteKey(getRouteKey());
-    window.addEventListener('hashchange', update);
-    window.addEventListener('popstate', update);
+    const update = () => {
+      setRouteKey(getRouteKey());
+      setPathSet(getPathSet());
+    };
+    window.addEventListener("hashchange", update);
+    window.addEventListener("popstate", update);
     return () => {
-      window.removeEventListener('hashchange', update);
-      window.removeEventListener('popstate', update);
+      window.removeEventListener("hashchange", update);
+      window.removeEventListener("popstate", update);
     };
   }, []);
 
-  const modules = useMemo(() => {
-    const result = [...BASE_MODULES];
-    if (canAccessEnergy(user?.roles)) result.push(ENERGY_MODULE);
+  const modules = useMemo<ModuleConfig[]>(() => {
+    if (pathSet === "energy") {
+      return [HYDROGEN_MODULE, ELECTRIC_MODULE, ETC_MODULE];
+    }
+    const result: ModuleConfig[] = [ASSETS_MODULE, MILEAGE_MODULE];
     if (canAccessScheduling(user?.roles)) result.push(SCHEDULING_MODULE);
     return result;
-  }, [user?.roles]);
+  }, [pathSet, user?.roles]);
 
   if (isLoading) {
     return (
@@ -72,10 +153,16 @@ function AuthGate() {
   }
 
   // 隐藏后端管理页：通过路径或 hash 直接访问，主导航不出现
-  if (routeKey === 'ele/import') return <EleImportPage />;
-  if (routeKey === 'admin/feedback') return <FeedbackAdminPage />;
+  if (routeKey === "ele/import") return <EleImportPage />;
+  if (routeKey === "admin/feedback") return <FeedbackAdminPage />;
 
-  return <Shell modules={modules} />;
+  // /energy 整组按能源权限控制
+  if (pathSet === "energy" && !canAccessEnergy(user?.roles)) {
+    return <UnauthorizedPage message="无能源管理模块访问权限" />;
+  }
+
+  // key={pathSet} 让两套底栏切换时 Shell 内部 state 重置，避免残留旧 activeModule
+  return <Shell key={pathSet} modules={modules} />;
 }
 
 export default function App() {