|
|
@@ -1,7 +1,7 @@
|
|
|
import React from "react";
|
|
|
import { BrowserRouter as Router, Routes, Route, Navigate, useLocation, useNavigate } from "react-router-dom";
|
|
|
-import { Layout, Menu } from "antd";
|
|
|
-import { ToolOutlined, SearchOutlined, AppstoreOutlined, UserOutlined } from "@ant-design/icons";
|
|
|
+import { Layout, Menu, Dropdown, Avatar, message } from "antd";
|
|
|
+import { ToolOutlined, SearchOutlined, AppstoreOutlined, UserOutlined, PoweroffOutlined } from "@ant-design/icons";
|
|
|
import Dashboard from "./components/Dashboard";
|
|
|
import PendingToolsList from "./pages/PendingToolsList";
|
|
|
import PendingToolsAdd from "./pages/PendingToolsAdd";
|
|
|
@@ -14,6 +14,10 @@ import ToolsLibraryDetail from "./pages/ToolsLibraryDetail";
|
|
|
import AccountList from "./pages/AccountList";
|
|
|
import AccountDetail from "./pages/AccountDetail";
|
|
|
import "./App.css";
|
|
|
+import Login from "./pages/Login";
|
|
|
+import UserToolsSetList from "./pages/UserToolsSetList";
|
|
|
+import UserToolsSetAdd from "./pages/UserToolsSetAdd";
|
|
|
+import UserAdd from "./pages/UserAdd";
|
|
|
|
|
|
const { Header, Content, Sider } = Layout;
|
|
|
|
|
|
@@ -21,114 +25,120 @@ function AppContent() {
|
|
|
const location = useLocation();
|
|
|
const navigate = useNavigate();
|
|
|
|
|
|
- // 根据当前路径确定选中的菜单项
|
|
|
+ const isLoginPage = location.pathname === "/login";
|
|
|
+ const userName = typeof window !== "undefined" ? (localStorage.getItem("userName") || "") : "";
|
|
|
+
|
|
|
+ const handleLogout = () => {
|
|
|
+ localStorage.removeItem("userToken");
|
|
|
+ localStorage.removeItem("userName");
|
|
|
+ localStorage.removeItem("isAdmin");
|
|
|
+ message.success("已退出登录");
|
|
|
+ navigate("/login", { replace: true });
|
|
|
+ };
|
|
|
+
|
|
|
+ const profileMenuItems = [
|
|
|
+ { key: "name", label: userName || "未登录", icon: <UserOutlined />, disabled: true },
|
|
|
+ { key: "logout", label: "退出登录", icon: <PoweroffOutlined /> },
|
|
|
+ ];
|
|
|
+
|
|
|
+ React.useEffect(() => {
|
|
|
+ const token = typeof window !== "undefined" ? localStorage.getItem("userToken") : null;
|
|
|
+ if (!token && location.pathname !== "/login") {
|
|
|
+ navigate("/login", { replace: true });
|
|
|
+ }
|
|
|
+ }, [location.pathname, navigate]);
|
|
|
+
|
|
|
const getSelectedKey = () => {
|
|
|
const path = location.pathname;
|
|
|
if (path.startsWith("/pending-tools")) return ["1"];
|
|
|
if (path.startsWith("/auto-access-tasks")) return ["2"];
|
|
|
if (path.startsWith("/tools-library")) return ["3"];
|
|
|
if (path.startsWith("/accounts")) return ["4"];
|
|
|
+ if (path.startsWith("/user-tools-set")) return ["5"];
|
|
|
return ["1"]; // 默认选中第一项
|
|
|
};
|
|
|
|
|
|
return (
|
|
|
<Layout className="min-h-screen">
|
|
|
- <Header className="fixed top-0 left-0 right-0 z-50 flex items-center bg-blue-600 shadow-lg">
|
|
|
- <div className="text-white text-xl font-bold tracking-wide">🛠️ 工具库管理系统</div>
|
|
|
- </Header>
|
|
|
- <Layout className="pt-16">
|
|
|
- <Sider
|
|
|
- width={200}
|
|
|
- className="fixed left-0 top-16 bottom-0 z-40 bg-white border-r border-gray-200 overflow-y-auto"
|
|
|
- >
|
|
|
- <Menu
|
|
|
- mode="inline"
|
|
|
- selectedKeys={getSelectedKey()}
|
|
|
- className="h-full border-r-0"
|
|
|
- items={[
|
|
|
- {
|
|
|
- key: "1",
|
|
|
- icon: <SearchOutlined />,
|
|
|
- label: "待接入工具列表",
|
|
|
- onClick: () => navigate("/pending-tools"),
|
|
|
- },
|
|
|
- {
|
|
|
- key: "2",
|
|
|
- icon: <ToolOutlined />,
|
|
|
- label: "自动接入任务列表",
|
|
|
- onClick: () => navigate("/auto-access-tasks"),
|
|
|
- },
|
|
|
- {
|
|
|
- key: "3",
|
|
|
- icon: <AppstoreOutlined />,
|
|
|
- label: "工具列表",
|
|
|
- onClick: () => navigate("/tools-library"),
|
|
|
- },
|
|
|
- {
|
|
|
- key: "4",
|
|
|
- icon: <UserOutlined />,
|
|
|
- label: "平台账号列表",
|
|
|
- onClick: () => navigate("/accounts"),
|
|
|
- },
|
|
|
- ]}
|
|
|
- />
|
|
|
- </Sider>
|
|
|
- <Layout className="ml-[200px] p-6 bg-gray-50">
|
|
|
- <Content className="bg-white p-6 rounded-lg shadow-sm min-h-screen overflow-y-auto">
|
|
|
+ {!isLoginPage && (
|
|
|
+ <Header className="fixed top-0 left-0 right-0 z-50 flex items-center justify-between bg-blue-600 shadow-lg">
|
|
|
+ <div className="text-white text-xl font-bold tracking-wide">🛠️ 工具库管理系统</div>
|
|
|
+ <Dropdown
|
|
|
+ menu={{ items: profileMenuItems, onClick: ({ key }) => { if (key === "logout") handleLogout(); } }}
|
|
|
+ placement="bottomRight"
|
|
|
+ >
|
|
|
+ <Avatar
|
|
|
+ style={{ cursor: "pointer", backgroundColor: "#fff", color: "#2b6cb0" }}
|
|
|
+ size={32}
|
|
|
+ icon={<UserOutlined />}
|
|
|
+ />
|
|
|
+ </Dropdown>
|
|
|
+ </Header>
|
|
|
+ )}
|
|
|
+ <Layout className={isLoginPage ? "" : "pt-16"}>
|
|
|
+ {!isLoginPage && (
|
|
|
+ <Sider
|
|
|
+ width={200}
|
|
|
+ className="fixed left-0 top-16 bottom-0 z-40 bg-white border-r border-gray-200 overflow-y-auto"
|
|
|
+ >
|
|
|
+ <Menu
|
|
|
+ mode="inline"
|
|
|
+ selectedKeys={getSelectedKey()}
|
|
|
+ className="h-full border-r-0"
|
|
|
+ items={[
|
|
|
+ {
|
|
|
+ key: "1",
|
|
|
+ icon: <SearchOutlined />,
|
|
|
+ label: "待接入工具列表",
|
|
|
+ onClick: () => navigate("/pending-tools"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "2",
|
|
|
+ icon: <ToolOutlined />,
|
|
|
+ label: "自动接入任务列表",
|
|
|
+ onClick: () => navigate("/auto-access-tasks"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "3",
|
|
|
+ icon: <AppstoreOutlined />,
|
|
|
+ label: "工具列表",
|
|
|
+ onClick: () => navigate("/tools-library"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "4",
|
|
|
+ icon: <UserOutlined />,
|
|
|
+ label: "平台账号列表",
|
|
|
+ onClick: () => navigate("/accounts"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ key: "5",
|
|
|
+ icon: <AppstoreOutlined />,
|
|
|
+ label: "用户工具集管理",
|
|
|
+ onClick: () => navigate("/user-tools-set"),
|
|
|
+ },
|
|
|
+ ]}
|
|
|
+ />
|
|
|
+ </Sider>
|
|
|
+ )}
|
|
|
+ <Layout className={isLoginPage ? "p-0" : "ml-[200px] p-6 bg-gray-50"}>
|
|
|
+ <Content className={isLoginPage ? "min-h-screen bg-gray-50" : "bg-white p-6 rounded-lg shadow-sm min-h-screen overflow-y-auto"}>
|
|
|
<Routes>
|
|
|
- <Route
|
|
|
- path="/"
|
|
|
- element={
|
|
|
- <Navigate
|
|
|
- to="/pending-tools"
|
|
|
- replace
|
|
|
- />
|
|
|
- }
|
|
|
- />
|
|
|
- <Route
|
|
|
- path="/dashboard"
|
|
|
- element={<Dashboard />}
|
|
|
- />
|
|
|
- <Route
|
|
|
- path="/pending-tools"
|
|
|
- element={<PendingToolsList />}
|
|
|
- />
|
|
|
- <Route
|
|
|
- path="/pending-tools/add"
|
|
|
- element={<PendingToolsAdd />}
|
|
|
- />
|
|
|
- <Route
|
|
|
- path="/pending-tools/:id"
|
|
|
- element={<PendingToolsDetail />}
|
|
|
- />
|
|
|
- <Route
|
|
|
- path="/auto-access-tasks"
|
|
|
- element={<AutoAccessTaskList />}
|
|
|
- />
|
|
|
- <Route
|
|
|
- path="/auto-access-tasks/add"
|
|
|
- element={<AutoAccessTaskAdd />}
|
|
|
- />
|
|
|
- <Route
|
|
|
- path="/auto-access-tasks/:id"
|
|
|
- element={<AutoAccessTaskDetail />}
|
|
|
- />
|
|
|
- <Route
|
|
|
- path="/tools-library"
|
|
|
- element={<ToolsLibraryList />}
|
|
|
- />
|
|
|
- <Route
|
|
|
- path="/tools-library/:id"
|
|
|
- element={<ToolsLibraryDetail />}
|
|
|
- />
|
|
|
- <Route
|
|
|
- path="/accounts"
|
|
|
- element={<AccountList />}
|
|
|
- />
|
|
|
- <Route
|
|
|
- path="/accounts/:id"
|
|
|
- element={<AccountDetail />}
|
|
|
- />
|
|
|
+ <Route path="/login" element={<Login />} />
|
|
|
+ <Route path="/" element={<Navigate to="/pending-tools" replace />} />
|
|
|
+ <Route path="/dashboard" element={<Dashboard />} />
|
|
|
+ <Route path="/pending-tools" element={<PendingToolsList />} />
|
|
|
+ <Route path="/pending-tools/add" element={<PendingToolsAdd />} />
|
|
|
+ <Route path="/pending-tools/:id" element={<PendingToolsDetail />} />
|
|
|
+ <Route path="/auto-access-tasks" element={<AutoAccessTaskList />} />
|
|
|
+ <Route path="/auto-access-tasks/add" element={<AutoAccessTaskAdd />} />
|
|
|
+ <Route path="/auto-access-tasks/:id" element={<AutoAccessTaskDetail />} />
|
|
|
+ <Route path="/tools-library" element={<ToolsLibraryList />} />
|
|
|
+ <Route path="/tools-library/:id" element={<ToolsLibraryDetail />} />
|
|
|
+ <Route path="/accounts" element={<AccountList />} />
|
|
|
+ <Route path="/accounts/:id" element={<AccountDetail />} />
|
|
|
+ <Route path="/user-tools-set" element={<UserToolsSetList />} />
|
|
|
+ <Route path="/user-tools-set/add/:userName" element={<UserToolsSetAdd />} />
|
|
|
+ <Route path="/user-tools-set/user/add" element={<UserAdd />} />
|
|
|
</Routes>
|
|
|
</Content>
|
|
|
</Layout>
|