feat(*): 添加系统管理面板及相关功能
This commit is contained in:
@@ -0,0 +1,5 @@
|
||||
import { SystemAdminPanel } from "@/components/admin/SystemAdminPanel";
|
||||
|
||||
export default function SystemAdminPage() {
|
||||
return <SystemAdminPanel />;
|
||||
}
|
||||
@@ -8,7 +8,7 @@ import {
|
||||
} from "@refinedev/mui";
|
||||
import { SessionProvider, signIn, signOut, useSession } from "next-auth/react";
|
||||
import { usePathname } from "next/navigation";
|
||||
import React, { useEffect } from "react";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import routerProvider from "@refinedev/nextjs-router";
|
||||
|
||||
@@ -16,6 +16,8 @@ import { ColorModeContextProvider } from "@contexts/color-mode";
|
||||
import { dataProvider } from "@providers/data-provider";
|
||||
import { ProjectProvider } from "@/contexts/ProjectContext";
|
||||
import { useAuthStore } from "@/store/authStore";
|
||||
import { apiFetch } from "@/lib/apiFetch";
|
||||
import { config } from "@config/config";
|
||||
|
||||
import { LiaNetworkWiredSolid } from "react-icons/lia";
|
||||
import { TbDatabaseEdit, TbLocationPin, TbActivity } from "react-icons/tb";
|
||||
@@ -23,6 +25,7 @@ import { LuReplace } from "react-icons/lu";
|
||||
import { AiOutlineSecurityScan } from "react-icons/ai";
|
||||
import { MdWater, MdOutlineWaterDrop, MdCleaningServices } from "react-icons/md";
|
||||
import {
|
||||
ManageAccounts as ManageAccountsIcon,
|
||||
MyLocation as MyLocationIcon,
|
||||
Search as SearchIcon,
|
||||
} from "@mui/icons-material";
|
||||
@@ -51,11 +54,41 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
|
||||
const { data, status } = useSession();
|
||||
const to = usePathname();
|
||||
const setAccessToken = useAuthStore((state) => state.setAccessToken);
|
||||
const [isMetadataAdmin, setIsMetadataAdmin] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
setAccessToken(typeof data?.accessToken === "string" ? data.accessToken : null);
|
||||
}, [data?.accessToken, setAccessToken]);
|
||||
|
||||
useEffect(() => {
|
||||
if (status !== "authenticated") {
|
||||
setIsMetadataAdmin(false);
|
||||
return;
|
||||
}
|
||||
|
||||
let cancelled = false;
|
||||
apiFetch(`${config.BACKEND_URL}/api/v1/admin/me`, {
|
||||
projectHeaderMode: "omit",
|
||||
skipAuthRedirect: true,
|
||||
})
|
||||
.then(async (response) => {
|
||||
if (cancelled) return;
|
||||
if (!response.ok) {
|
||||
setIsMetadataAdmin(false);
|
||||
return;
|
||||
}
|
||||
const payload = await response.json();
|
||||
setIsMetadataAdmin(Boolean(payload?.is_superuser || payload?.role === "admin"));
|
||||
})
|
||||
.catch(() => {
|
||||
if (!cancelled) setIsMetadataAdmin(false);
|
||||
});
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, [status]);
|
||||
|
||||
if (status === "loading") {
|
||||
return <span>loading...</span>;
|
||||
}
|
||||
@@ -227,6 +260,18 @@ const App = (props: React.PropsWithChildren<AppProps>) => {
|
||||
label: "管道冲洗",
|
||||
},
|
||||
},
|
||||
...(isMetadataAdmin
|
||||
? [
|
||||
{
|
||||
name: "系统管理",
|
||||
list: "/system-admin",
|
||||
meta: {
|
||||
icon: <ManageAccountsIcon className="w-6 h-6" />,
|
||||
label: "系统管理",
|
||||
},
|
||||
},
|
||||
]
|
||||
: []),
|
||||
]}
|
||||
options={{
|
||||
syncWithLocation: true,
|
||||
|
||||
@@ -0,0 +1,936 @@
|
||||
"use client";
|
||||
|
||||
import React, { FormEvent, useCallback, useEffect, useMemo, useState } from "react";
|
||||
import {
|
||||
Alert,
|
||||
alpha,
|
||||
Box,
|
||||
Button,
|
||||
Chip,
|
||||
CircularProgress,
|
||||
Divider,
|
||||
FormControl,
|
||||
InputLabel,
|
||||
MenuItem,
|
||||
Paper,
|
||||
Select,
|
||||
Stack,
|
||||
Tab,
|
||||
Table,
|
||||
TableBody,
|
||||
TableCell,
|
||||
TableContainer,
|
||||
TableHead,
|
||||
TableRow,
|
||||
Tabs,
|
||||
Tooltip,
|
||||
Typography,
|
||||
} from "@mui/material";
|
||||
import {
|
||||
Add as AddIcon,
|
||||
AdminPanelSettings as AdminPanelSettingsIcon,
|
||||
Block as BlockIcon,
|
||||
CheckCircle as CheckCircleIcon,
|
||||
Groups as GroupsIcon,
|
||||
People as PeopleIcon,
|
||||
Refresh as RefreshIcon,
|
||||
RemoveCircleOutline as RemoveCircleOutlineIcon,
|
||||
Security as SecurityIcon,
|
||||
} from "@mui/icons-material";
|
||||
import { config } from "@config/config";
|
||||
import { apiFetch } from "@/lib/apiFetch";
|
||||
import { useProjectStore } from "@/store/projectStore";
|
||||
|
||||
type MetadataUser = {
|
||||
id: string;
|
||||
keycloak_id: string;
|
||||
username: string;
|
||||
email: string;
|
||||
role: string;
|
||||
is_active: boolean;
|
||||
is_superuser: boolean;
|
||||
};
|
||||
|
||||
type ProjectMember = {
|
||||
id: string;
|
||||
user_id: string;
|
||||
project_id: string;
|
||||
project_role: string;
|
||||
username: string;
|
||||
email: string;
|
||||
is_active: boolean;
|
||||
};
|
||||
|
||||
const businessRoleOptions = [
|
||||
{ value: "admin", label: "系统管理员" },
|
||||
{ value: "operator", label: "运行人员" },
|
||||
{ value: "user", label: "普通用户" },
|
||||
{ value: "viewer", label: "只读用户" },
|
||||
];
|
||||
|
||||
const projectRoleLabels: Record<string, string> = {
|
||||
owner: "项目负责人",
|
||||
admin: "项目管理员",
|
||||
member: "项目成员",
|
||||
viewer: "只读成员",
|
||||
};
|
||||
|
||||
const projectRoleOptions = [
|
||||
{ value: "admin", label: projectRoleLabels.admin },
|
||||
{ value: "member", label: projectRoleLabels.member },
|
||||
{ value: "viewer", label: projectRoleLabels.viewer },
|
||||
];
|
||||
|
||||
const getBusinessRoleLabel = (role: string) =>
|
||||
businessRoleOptions.find((option) => option.value === role)?.label ?? role;
|
||||
|
||||
const getProjectRoleLabel = (role: string) =>
|
||||
projectRoleLabels[role] ?? role;
|
||||
|
||||
const cardSx = {
|
||||
borderRadius: 2,
|
||||
borderColor: "divider",
|
||||
boxShadow: "0 10px 30px rgba(15, 23, 42, 0.06)",
|
||||
};
|
||||
|
||||
const tableSx = {
|
||||
minWidth: 720,
|
||||
"& .MuiTableCell-head": {
|
||||
bgcolor: "action.hover",
|
||||
color: "text.secondary",
|
||||
fontSize: 12,
|
||||
fontWeight: 700,
|
||||
letterSpacing: 0,
|
||||
},
|
||||
"& .MuiTableRow-root:last-child .MuiTableCell-body": {
|
||||
borderBottom: 0,
|
||||
},
|
||||
};
|
||||
|
||||
type StatCardProps = {
|
||||
icon: React.ReactNode;
|
||||
label: string;
|
||||
value: string | number;
|
||||
tone?: "primary" | "success" | "warning" | "info";
|
||||
};
|
||||
|
||||
const StatCard = ({ icon, label, value, tone = "primary" }: StatCardProps) => (
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={(theme) => ({
|
||||
...cardSx,
|
||||
p: 2,
|
||||
flex: "1 1 180px",
|
||||
minWidth: 0,
|
||||
bgcolor: alpha(theme.palette[tone].main, 0.04),
|
||||
})}
|
||||
>
|
||||
<Stack direction="row" spacing={1.5} alignItems="center">
|
||||
<Box
|
||||
sx={(theme) => ({
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 1.5,
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
color: `${tone}.main`,
|
||||
bgcolor: alpha(theme.palette[tone].main, 0.12),
|
||||
})}
|
||||
>
|
||||
{icon}
|
||||
</Box>
|
||||
<Box sx={{ minWidth: 0 }}>
|
||||
<Typography variant="body2" color="text.secondary" noWrap>
|
||||
{label}
|
||||
</Typography>
|
||||
<Typography variant="h6" fontWeight={800} lineHeight={1.2}>
|
||||
{value}
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
</Paper>
|
||||
);
|
||||
|
||||
const SectionHeader = ({
|
||||
title,
|
||||
description,
|
||||
action,
|
||||
}: {
|
||||
title: string;
|
||||
description?: string;
|
||||
action?: React.ReactNode;
|
||||
}) => (
|
||||
<Stack
|
||||
direction={{ xs: "column", sm: "row" }}
|
||||
spacing={1.5}
|
||||
alignItems={{ xs: "stretch", sm: "center" }}
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="subtitle1" fontWeight={800}>
|
||||
{title}
|
||||
</Typography>
|
||||
{description && (
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{description}
|
||||
</Typography>
|
||||
)}
|
||||
</Box>
|
||||
{action}
|
||||
</Stack>
|
||||
);
|
||||
|
||||
const StatusChip = ({ active }: { active: boolean }) => (
|
||||
<Chip
|
||||
size="small"
|
||||
color={active ? "success" : "default"}
|
||||
icon={active ? <CheckCircleIcon /> : <BlockIcon />}
|
||||
label={active ? "启用" : "禁用"}
|
||||
variant={active ? "filled" : "outlined"}
|
||||
sx={{ minWidth: 76, justifyContent: "flex-start" }}
|
||||
/>
|
||||
);
|
||||
|
||||
const EmptyRow = ({ colSpan, label }: { colSpan: number; label: string }) => (
|
||||
<TableRow>
|
||||
<TableCell colSpan={colSpan} sx={{ py: 6 }}>
|
||||
<Typography align="center" color="text.secondary">
|
||||
{label}
|
||||
</Typography>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
|
||||
export const SystemAdminPanel = () => {
|
||||
const currentProjectId = useProjectStore((state) => state.currentProjectId);
|
||||
const [tab, setTab] = useState(0);
|
||||
const [users, setUsers] = useState<MetadataUser[]>([]);
|
||||
const [members, setMembers] = useState<ProjectMember[]>([]);
|
||||
const [currentAdmin, setCurrentAdmin] = useState<MetadataUser | null>(null);
|
||||
const [adminChecked, setAdminChecked] = useState(false);
|
||||
const [isAuthorized, setIsAuthorized] = useState(false);
|
||||
const [projectId, setProjectId] = useState(currentProjectId ?? "");
|
||||
const [hasLoadedCurrentProjectMembers, setHasLoadedCurrentProjectMembers] =
|
||||
useState(false);
|
||||
const [message, setMessage] = useState<string | null>(null);
|
||||
const [error, setError] = useState<string | null>(null);
|
||||
const [memberForm, setMemberForm] = useState({
|
||||
user_id: "",
|
||||
project_role: "viewer",
|
||||
});
|
||||
|
||||
const activeUsers = useMemo(
|
||||
() => users.filter((user) => user.is_active).length,
|
||||
[users],
|
||||
);
|
||||
const systemAdminUsers = useMemo(
|
||||
() => users.filter((user) => user.role === "admin").length,
|
||||
[users],
|
||||
);
|
||||
const superUsers = useMemo(
|
||||
() => users.filter((user) => user.is_superuser).length,
|
||||
[users],
|
||||
);
|
||||
const memberUserIds = useMemo(
|
||||
() => new Set(members.map((member) => member.user_id)),
|
||||
[members],
|
||||
);
|
||||
const availableMemberUsers = useMemo(
|
||||
() =>
|
||||
users.filter(
|
||||
(user) =>
|
||||
user.is_active &&
|
||||
!user.is_superuser &&
|
||||
user.id !== currentAdmin?.id &&
|
||||
!memberUserIds.has(user.id),
|
||||
),
|
||||
[currentAdmin?.id, memberUserIds, users],
|
||||
);
|
||||
const selectedMemberUser = useMemo(
|
||||
() => users.find((user) => user.id === memberForm.user_id),
|
||||
[memberForm.user_id, users],
|
||||
);
|
||||
const hasProjectId = Boolean(projectId.trim());
|
||||
|
||||
const loadUsers = useCallback(async () => {
|
||||
const response = await apiFetch(`${config.BACKEND_URL}/api/v1/admin/users`);
|
||||
if (!response.ok) {
|
||||
throw new Error(await response.text());
|
||||
}
|
||||
setUsers(await response.json());
|
||||
}, []);
|
||||
|
||||
const loadMembers = useCallback(async () => {
|
||||
if (!projectId.trim()) return;
|
||||
const response = await apiFetch(
|
||||
`${config.BACKEND_URL}/api/v1/admin/projects/${projectId.trim()}/members`,
|
||||
);
|
||||
if (!response.ok) {
|
||||
throw new Error(await response.text());
|
||||
}
|
||||
setMembers(await response.json());
|
||||
}, [projectId]);
|
||||
|
||||
useEffect(() => {
|
||||
let cancelled = false;
|
||||
|
||||
const loadInitialState = async () => {
|
||||
try {
|
||||
const adminResponse = await apiFetch(`${config.BACKEND_URL}/api/v1/admin/me`, {
|
||||
projectHeaderMode: "omit",
|
||||
skipAuthRedirect: true,
|
||||
});
|
||||
if (!adminResponse.ok) {
|
||||
if (!cancelled) {
|
||||
setIsAuthorized(false);
|
||||
setCurrentAdmin(null);
|
||||
setAdminChecked(true);
|
||||
}
|
||||
return;
|
||||
}
|
||||
const adminPayload = await adminResponse.json();
|
||||
if (!cancelled) {
|
||||
setCurrentAdmin(adminPayload);
|
||||
setIsAuthorized(true);
|
||||
setAdminChecked(true);
|
||||
}
|
||||
|
||||
const usersResponse = await apiFetch(`${config.BACKEND_URL}/api/v1/admin/users`);
|
||||
if (!usersResponse.ok) {
|
||||
throw new Error(await usersResponse.text());
|
||||
}
|
||||
const payload = await usersResponse.json();
|
||||
if (!cancelled) setUsers(payload);
|
||||
} catch (err) {
|
||||
if (!cancelled) {
|
||||
setAdminChecked(true);
|
||||
setError(String(err));
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
void loadInitialState();
|
||||
|
||||
return () => {
|
||||
cancelled = true;
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
if (!currentProjectId || projectId.trim()) return;
|
||||
setProjectId(currentProjectId);
|
||||
}, [currentProjectId, projectId]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!isAuthorized || !hasProjectId || hasLoadedCurrentProjectMembers) return;
|
||||
|
||||
setHasLoadedCurrentProjectMembers(true);
|
||||
loadMembers().catch((err) => setError(String(err)));
|
||||
}, [hasLoadedCurrentProjectMembers, hasProjectId, isAuthorized, loadMembers]);
|
||||
|
||||
const updateUserActive = async (user: MetadataUser, isActive: boolean) => {
|
||||
setError(null);
|
||||
const response = await apiFetch(
|
||||
`${config.BACKEND_URL}/api/v1/admin/users/${user.id}`,
|
||||
{
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ is_active: isActive }),
|
||||
},
|
||||
);
|
||||
if (!response.ok) {
|
||||
setError(await response.text());
|
||||
return;
|
||||
}
|
||||
await loadUsers();
|
||||
};
|
||||
|
||||
const updateUserRole = async (user: MetadataUser, role: string) => {
|
||||
setError(null);
|
||||
const response = await apiFetch(
|
||||
`${config.BACKEND_URL}/api/v1/admin/users/${user.id}`,
|
||||
{
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ role }),
|
||||
},
|
||||
);
|
||||
if (!response.ok) {
|
||||
setError(await response.text());
|
||||
return;
|
||||
}
|
||||
await loadUsers();
|
||||
};
|
||||
|
||||
const addMember = async (event: FormEvent) => {
|
||||
event.preventDefault();
|
||||
setError(null);
|
||||
setMessage(null);
|
||||
const response = await apiFetch(
|
||||
`${config.BACKEND_URL}/api/v1/admin/projects/${projectId.trim()}/members`,
|
||||
{
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(memberForm),
|
||||
},
|
||||
);
|
||||
if (!response.ok) {
|
||||
setError(await response.text());
|
||||
return;
|
||||
}
|
||||
setMessage("项目成员已添加");
|
||||
setMemberForm((prev) => ({ ...prev, user_id: "" }));
|
||||
await loadMembers();
|
||||
};
|
||||
|
||||
const updateMemberRole = async (member: ProjectMember, projectRole: string) => {
|
||||
setError(null);
|
||||
const response = await apiFetch(
|
||||
`${config.BACKEND_URL}/api/v1/admin/projects/${member.project_id}/members/${member.user_id}`,
|
||||
{
|
||||
method: "PATCH",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify({ project_role: projectRole }),
|
||||
},
|
||||
);
|
||||
if (!response.ok) {
|
||||
setError(await response.text());
|
||||
return;
|
||||
}
|
||||
await loadMembers();
|
||||
};
|
||||
|
||||
const removeMember = async (member: ProjectMember) => {
|
||||
setError(null);
|
||||
const response = await apiFetch(
|
||||
`${config.BACKEND_URL}/api/v1/admin/projects/${member.project_id}/members/${member.user_id}`,
|
||||
{ method: "DELETE" },
|
||||
);
|
||||
if (!response.ok) {
|
||||
setError(await response.text());
|
||||
return;
|
||||
}
|
||||
setMessage("项目成员已移除");
|
||||
await loadMembers();
|
||||
};
|
||||
|
||||
return (
|
||||
<Box
|
||||
sx={{
|
||||
minHeight: "100%",
|
||||
overflow: "auto",
|
||||
bgcolor: "background.default",
|
||||
p: { xs: 2, md: 3 },
|
||||
}}
|
||||
>
|
||||
<Stack spacing={2.5} sx={{ maxWidth: 1440, mx: "auto" }}>
|
||||
<Paper
|
||||
variant="outlined"
|
||||
sx={(theme) => ({
|
||||
...cardSx,
|
||||
p: { xs: 2, md: 3 },
|
||||
bgcolor:
|
||||
theme.palette.mode === "dark"
|
||||
? alpha(theme.palette.primary.main, 0.1)
|
||||
: alpha(theme.palette.primary.main, 0.04),
|
||||
})}
|
||||
>
|
||||
<Stack
|
||||
direction={{ xs: "column", md: "row" }}
|
||||
spacing={2}
|
||||
alignItems={{ xs: "stretch", md: "center" }}
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Stack direction="row" spacing={1.5} alignItems="center">
|
||||
<Box
|
||||
sx={(theme) => ({
|
||||
width: 48,
|
||||
height: 48,
|
||||
borderRadius: 2,
|
||||
display: "grid",
|
||||
placeItems: "center",
|
||||
color: "primary.main",
|
||||
bgcolor: alpha(theme.palette.primary.main, 0.12),
|
||||
})}
|
||||
>
|
||||
<SecurityIcon />
|
||||
</Box>
|
||||
<Box>
|
||||
<Typography variant="h5" fontWeight={800}>
|
||||
系统管理
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
Keycloak 负责登录身份，metadata 负责系统角色、账号状态和项目权限
|
||||
</Typography>
|
||||
</Box>
|
||||
</Stack>
|
||||
{adminChecked && isAuthorized && (
|
||||
<Chip
|
||||
color="success"
|
||||
icon={<AdminPanelSettingsIcon />}
|
||||
label="管理员权限已验证"
|
||||
sx={{ alignSelf: { xs: "flex-start", md: "center" } }}
|
||||
/>
|
||||
)}
|
||||
</Stack>
|
||||
</Paper>
|
||||
|
||||
{!adminChecked && (
|
||||
<Paper variant="outlined" sx={{ ...cardSx, p: 5 }}>
|
||||
<Stack alignItems="center" spacing={2}>
|
||||
<CircularProgress size={28} />
|
||||
<Typography color="text.secondary">正在校验系统管理权限</Typography>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
|
||||
{adminChecked && !isAuthorized && (
|
||||
<Alert severity="error" sx={{ borderRadius: 2 }}>
|
||||
无系统管理权限
|
||||
</Alert>
|
||||
)}
|
||||
{message && (
|
||||
<Alert severity="success" onClose={() => setMessage(null)} sx={{ borderRadius: 2 }}>
|
||||
{message}
|
||||
</Alert>
|
||||
)}
|
||||
{error && (
|
||||
<Alert severity="error" onClose={() => setError(null)} sx={{ borderRadius: 2 }}>
|
||||
{error}
|
||||
</Alert>
|
||||
)}
|
||||
|
||||
{isAuthorized && (
|
||||
<>
|
||||
<Stack direction={{ xs: "column", md: "row" }} spacing={2}>
|
||||
<StatCard
|
||||
icon={<PeopleIcon />}
|
||||
label="系统用户"
|
||||
value={users.length}
|
||||
/>
|
||||
<StatCard
|
||||
icon={<CheckCircleIcon />}
|
||||
label="启用用户"
|
||||
value={activeUsers}
|
||||
tone="success"
|
||||
/>
|
||||
<StatCard
|
||||
icon={<AdminPanelSettingsIcon />}
|
||||
label="系统管理员角色"
|
||||
value={systemAdminUsers}
|
||||
tone="warning"
|
||||
/>
|
||||
<StatCard
|
||||
icon={<SecurityIcon />}
|
||||
label="超级管理员"
|
||||
value={superUsers}
|
||||
tone="info"
|
||||
/>
|
||||
<StatCard
|
||||
icon={<GroupsIcon />}
|
||||
label={hasProjectId ? "当前项目成员" : "项目成员未加载"}
|
||||
value={hasProjectId ? members.length : "-"}
|
||||
tone="info"
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<Paper variant="outlined" sx={{ ...cardSx, overflow: "hidden" }}>
|
||||
<Tabs
|
||||
value={tab}
|
||||
onChange={(_, value) => setTab(value)}
|
||||
variant="scrollable"
|
||||
scrollButtons="auto"
|
||||
sx={{
|
||||
px: 2,
|
||||
minHeight: 56,
|
||||
borderBottom: 1,
|
||||
borderColor: "divider",
|
||||
"& .MuiTab-root": {
|
||||
minHeight: 56,
|
||||
textTransform: "none",
|
||||
fontWeight: 700,
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Tab icon={<PeopleIcon />} iconPosition="start" label="用户" />
|
||||
<Tab icon={<GroupsIcon />} iconPosition="start" label="项目成员" />
|
||||
</Tabs>
|
||||
|
||||
<Box sx={{ p: { xs: 2, md: 2.5 } }}>
|
||||
{tab === 0 && (
|
||||
<Stack spacing={2}>
|
||||
<SectionHeader
|
||||
title="系统用户"
|
||||
description="Keycloak 信息只读展示；这里维护 metadata 系统角色和启用状态。超级管理员由后台初始化或受控脚本设置，不在页面修改。"
|
||||
action={
|
||||
<Button startIcon={<RefreshIcon />} variant="outlined" onClick={loadUsers}>
|
||||
刷新
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
<TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 2 }}>
|
||||
<Table size="small" sx={tableSx}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>用户身份</TableCell>
|
||||
<TableCell>系统角色</TableCell>
|
||||
<TableCell>超级权限</TableCell>
|
||||
<TableCell>状态</TableCell>
|
||||
<TableCell align="right">操作</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{users.length === 0 && <EmptyRow colSpan={5} label="暂无用户数据" />}
|
||||
{users.map((user) => {
|
||||
const isSelf = user.id === currentAdmin?.id;
|
||||
const protectedUserReason = isSelf
|
||||
? "不能操作当前登录用户"
|
||||
: user.is_superuser
|
||||
? "超级管理员权限独立于系统角色，需后台设置"
|
||||
: "";
|
||||
|
||||
return (
|
||||
<TableRow key={user.id} hover>
|
||||
<TableCell>
|
||||
<Stack spacing={0.25}>
|
||||
<Stack direction="row" spacing={1} alignItems="center">
|
||||
<Typography fontWeight={700}>{user.username}</Typography>
|
||||
{isSelf && (
|
||||
<Chip size="small" color="info" label="当前用户" />
|
||||
)}
|
||||
</Stack>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{user.email}
|
||||
</Typography>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{user.keycloak_id}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<Tooltip title={protectedUserReason}>
|
||||
<span>
|
||||
<FormControl
|
||||
size="small"
|
||||
sx={{ minWidth: 150 }}
|
||||
disabled={user.is_superuser || isSelf}
|
||||
>
|
||||
<Select
|
||||
value={user.role}
|
||||
onChange={(e) => updateUserRole(user, e.target.value)}
|
||||
renderValue={(value) =>
|
||||
getBusinessRoleLabel(String(value))
|
||||
}
|
||||
>
|
||||
{businessRoleOptions.map((role) => (
|
||||
<MenuItem key={role.value} value={role.value}>
|
||||
{role.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
{user.is_superuser ? (
|
||||
<Chip
|
||||
size="small"
|
||||
color="warning"
|
||||
icon={<SecurityIcon />}
|
||||
label="超级管理员"
|
||||
/>
|
||||
) : (
|
||||
<Chip size="small" label="无" variant="outlined" />
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<StatusChip active={user.is_active} />
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Tooltip
|
||||
title={
|
||||
isSelf
|
||||
? "不能操作当前登录用户"
|
||||
: user.is_superuser
|
||||
? "超级管理员不可禁用"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<Button
|
||||
size="small"
|
||||
variant="outlined"
|
||||
color={user.is_active ? "warning" : "success"}
|
||||
onClick={() => updateUserActive(user, !user.is_active)}
|
||||
disabled={user.is_superuser || isSelf}
|
||||
>
|
||||
{user.is_active ? "禁用" : "启用"}
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
{tab === 1 && (
|
||||
<Stack spacing={2}>
|
||||
<SectionHeader
|
||||
title="项目成员"
|
||||
description="维护当前项目内权限；此处只管理项目管理员、项目成员和只读成员，项目负责人另行维护。"
|
||||
action={
|
||||
<Button
|
||||
variant="outlined"
|
||||
startIcon={<RefreshIcon />}
|
||||
onClick={loadMembers}
|
||||
disabled={!hasProjectId}
|
||||
>
|
||||
刷新成员
|
||||
</Button>
|
||||
}
|
||||
/>
|
||||
{!hasProjectId && (
|
||||
<Alert severity="warning" sx={{ borderRadius: 2 }}>
|
||||
当前未选择项目，请先通过顶部用户菜单切换项目。
|
||||
</Alert>
|
||||
)}
|
||||
{hasProjectId && (
|
||||
<Paper variant="outlined" sx={{ p: 2, borderRadius: 2 }}>
|
||||
<Stack
|
||||
direction={{ xs: "column", md: "row" }}
|
||||
spacing={1.5}
|
||||
alignItems={{ xs: "stretch", md: "center" }}
|
||||
justifyContent="space-between"
|
||||
>
|
||||
<Box>
|
||||
<Typography variant="subtitle2" fontWeight={800}>
|
||||
当前项目
|
||||
</Typography>
|
||||
<Typography variant="body2" color="text.secondary">
|
||||
{projectId}
|
||||
</Typography>
|
||||
</Box>
|
||||
<Chip
|
||||
color="info"
|
||||
icon={<GroupsIcon />}
|
||||
label={`${members.length} 名成员`}
|
||||
sx={{ alignSelf: { xs: "flex-start", md: "center" } }}
|
||||
/>
|
||||
</Stack>
|
||||
</Paper>
|
||||
)}
|
||||
<Paper
|
||||
component="form"
|
||||
variant="outlined"
|
||||
sx={{ p: 2, borderRadius: 2, bgcolor: "action.hover" }}
|
||||
onSubmit={addMember}
|
||||
>
|
||||
<Stack spacing={1.5}>
|
||||
<Typography variant="subtitle2" fontWeight={800}>
|
||||
添加成员
|
||||
</Typography>
|
||||
<Stack
|
||||
direction="row"
|
||||
spacing={1.5}
|
||||
useFlexGap
|
||||
flexWrap="wrap"
|
||||
alignItems="center"
|
||||
>
|
||||
<FormControl
|
||||
size="small"
|
||||
disabled={!hasProjectId}
|
||||
sx={{
|
||||
width: { xs: "100%", sm: 320, md: 360 },
|
||||
flexShrink: 0,
|
||||
}}
|
||||
>
|
||||
<InputLabel>选择用户</InputLabel>
|
||||
<Select
|
||||
label="选择用户"
|
||||
value={memberForm.user_id}
|
||||
onChange={(e) =>
|
||||
setMemberForm({ ...memberForm, user_id: e.target.value })
|
||||
}
|
||||
renderValue={() => selectedMemberUser?.username ?? ""}
|
||||
required
|
||||
>
|
||||
{availableMemberUsers.length === 0 && (
|
||||
<MenuItem value="" disabled>
|
||||
暂无可添加用户
|
||||
</MenuItem>
|
||||
)}
|
||||
{availableMemberUsers.map((user) => (
|
||||
<MenuItem key={user.id} value={user.id}>
|
||||
<Stack spacing={0.25} sx={{ minWidth: 0 }}>
|
||||
<Typography variant="body2" fontWeight={700} noWrap>
|
||||
{user.username}
|
||||
</Typography>
|
||||
<Typography
|
||||
variant="caption"
|
||||
color="text.secondary"
|
||||
noWrap
|
||||
>
|
||||
{user.email}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<FormControl
|
||||
size="small"
|
||||
sx={{ width: { xs: "calc(50% - 6px)", sm: 160 } }}
|
||||
disabled={!hasProjectId}
|
||||
>
|
||||
<InputLabel>项目角色</InputLabel>
|
||||
<Select
|
||||
label="项目角色"
|
||||
value={memberForm.project_role}
|
||||
onChange={(e) =>
|
||||
setMemberForm({ ...memberForm, project_role: e.target.value })
|
||||
}
|
||||
>
|
||||
{projectRoleOptions.map((role) => (
|
||||
<MenuItem key={role.value} value={role.value}>
|
||||
{role.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
<Button
|
||||
type="submit"
|
||||
variant="contained"
|
||||
startIcon={<AddIcon />}
|
||||
disabled={!hasProjectId || !memberForm.user_id}
|
||||
sx={{
|
||||
width: { xs: "calc(50% - 6px)", sm: "auto" },
|
||||
minWidth: 120,
|
||||
}}
|
||||
>
|
||||
添加成员
|
||||
</Button>
|
||||
</Stack>
|
||||
</Stack>
|
||||
</Paper>
|
||||
<TableContainer component={Paper} variant="outlined" sx={{ borderRadius: 2 }}>
|
||||
<Table size="small" sx={tableSx}>
|
||||
<TableHead>
|
||||
<TableRow>
|
||||
<TableCell>用户</TableCell>
|
||||
<TableCell>邮箱</TableCell>
|
||||
<TableCell>项目角色</TableCell>
|
||||
<TableCell>状态</TableCell>
|
||||
<TableCell align="right">操作</TableCell>
|
||||
</TableRow>
|
||||
</TableHead>
|
||||
<TableBody>
|
||||
{members.length === 0 && (
|
||||
<EmptyRow colSpan={5} label="暂无项目成员数据" />
|
||||
)}
|
||||
{members.map((member) => {
|
||||
const isSelf = member.user_id === currentAdmin?.id;
|
||||
const isOwner = member.project_role === "owner";
|
||||
|
||||
return (
|
||||
<TableRow key={member.id} hover>
|
||||
<TableCell>
|
||||
<Stack spacing={0.25}>
|
||||
<Stack direction="row" spacing={1} alignItems="center">
|
||||
<Typography fontWeight={700}>{member.username}</Typography>
|
||||
{isSelf && (
|
||||
<Chip size="small" color="info" label="当前用户" />
|
||||
)}
|
||||
</Stack>
|
||||
<Typography variant="caption" color="text.secondary">
|
||||
{member.user_id}
|
||||
</Typography>
|
||||
</Stack>
|
||||
</TableCell>
|
||||
<TableCell>{member.email}</TableCell>
|
||||
<TableCell>
|
||||
{isOwner ? (
|
||||
<Tooltip title="项目负责人不在系统管理页维护">
|
||||
<Chip
|
||||
size="small"
|
||||
color="warning"
|
||||
label={getProjectRoleLabel(member.project_role)}
|
||||
/>
|
||||
</Tooltip>
|
||||
) : (
|
||||
<Tooltip title={isSelf ? "不能操作当前登录用户" : ""}>
|
||||
<span>
|
||||
<FormControl
|
||||
size="small"
|
||||
sx={{ minWidth: 140 }}
|
||||
disabled={isSelf}
|
||||
>
|
||||
<Select
|
||||
value={member.project_role}
|
||||
onChange={(e) =>
|
||||
updateMemberRole(member, e.target.value)
|
||||
}
|
||||
renderValue={(value) =>
|
||||
getProjectRoleLabel(String(value))
|
||||
}
|
||||
>
|
||||
{projectRoleOptions.map((role) => (
|
||||
<MenuItem key={role.value} value={role.value}>
|
||||
{role.label}
|
||||
</MenuItem>
|
||||
))}
|
||||
</Select>
|
||||
</FormControl>
|
||||
</span>
|
||||
</Tooltip>
|
||||
)}
|
||||
</TableCell>
|
||||
<TableCell>
|
||||
<StatusChip active={member.is_active} />
|
||||
</TableCell>
|
||||
<TableCell align="right">
|
||||
<Tooltip
|
||||
title={
|
||||
isSelf
|
||||
? "不能操作当前登录用户"
|
||||
: isOwner
|
||||
? "项目负责人不在系统管理页维护"
|
||||
: ""
|
||||
}
|
||||
>
|
||||
<span>
|
||||
<Button
|
||||
size="small"
|
||||
color="error"
|
||||
variant="outlined"
|
||||
startIcon={<RemoveCircleOutlineIcon />}
|
||||
onClick={() => removeMember(member)}
|
||||
disabled={isSelf || isOwner}
|
||||
>
|
||||
移除
|
||||
</Button>
|
||||
</span>
|
||||
</Tooltip>
|
||||
</TableCell>
|
||||
</TableRow>
|
||||
);
|
||||
})}
|
||||
</TableBody>
|
||||
</Table>
|
||||
</TableContainer>
|
||||
</Stack>
|
||||
)}
|
||||
|
||||
</Box>
|
||||
</Paper>
|
||||
</>
|
||||
)}
|
||||
</Stack>
|
||||
</Box>
|
||||
);
|
||||
};
|
||||
Reference in New Issue
Block a user