feat(*): 添加系统管理面板及相关功能

src/app/(main)/system-admin/page.tsx

@@ -0,0 +1,5 @@
+import { SystemAdminPanel } from "@/components/admin/SystemAdminPanel";
+
+export default function SystemAdminPage() {
+  return <SystemAdminPanel />;
+}

src/app/_refine_context.tsx

@@ -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,

src/components/admin/SystemAdminPanel.tsx

@@ -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>
+  );
+};