46 lines
1.4 KiB
TypeScript
46 lines
1.4 KiB
TypeScript
import { useState } from "react";
|
|
|
|
import Icon from "../../components/common/Icon";
|
|
import { UserManagementPage } from "../../components/admin/UserManagementPage";
|
|
import { ProjectManagementPage } from "../../components/admin/ProjectManagementPage";
|
|
|
|
export function SystemAdminPage({
|
|
onNotify,
|
|
onConnectionChange,
|
|
}: {
|
|
onNotify: (notice: { tone: "success" | "error" | "info"; message: string }) => void;
|
|
onConnectionChange: (online: boolean) => void;
|
|
}) {
|
|
const [activeTab, setActiveTab] = useState<"users" | "projects">("users");
|
|
|
|
return (
|
|
<section className="admin-page">
|
|
<div className="admin-tabs">
|
|
<button
|
|
className={`admin-tab${activeTab === "users" ? " is-active" : ""}`}
|
|
type="button"
|
|
onClick={() => setActiveTab("users")}
|
|
>
|
|
<Icon name="workspace" size={16} />
|
|
用户管理
|
|
</button>
|
|
<button
|
|
className={`admin-tab${activeTab === "projects" ? " is-active" : ""}`}
|
|
type="button"
|
|
onClick={() => setActiveTab("projects")}
|
|
>
|
|
<Icon name="folder" size={16} />
|
|
项目管理
|
|
</button>
|
|
</div>
|
|
|
|
{activeTab === "users" && (
|
|
<UserManagementPage onNotify={onNotify} onConnectionChange={onConnectionChange} />
|
|
)}
|
|
{activeTab === "projects" && (
|
|
<ProjectManagementPage onNotify={onNotify} onConnectionChange={onConnectionChange} />
|
|
)}
|
|
</section>
|
|
);
|
|
}
|