@oj-module/cli 0.1.21 → 0.2.2

package/templates/web/src/system/pages/errors.ts

@@ -0,0 +1,51 @@
+/**
+ * 错误归一辅助：兼容两种形态——生成物 client 抛的 ContractApiError（code/msg）
+ * 与 ky HTTPError（response.status / data 信封）。判断尽量宽，避免依赖单一
+ * 形态的脆弱字段（ky 版本间 HTTPError.data 行为有差异）。
+ */
+
+/** HTTP 状态：ContractApiError.code 优先，HTTPError 回落 response.status */
+function statusOf(e: unknown): number | undefined {
+	const err = e as { code?: number, response?: Response } | null;
+	if (typeof err?.code === "number")
+		return err.code;
+	return err?.response?.status;
+}
+
+/** 该错误是否为 403（页面切「无权限/引导」面板的判据） */
+export function isForbidden(e: unknown): boolean {
+	return statusOf(e) === 403;
+}
+
+/** must_change 判定：悬挂期 403 的 msg 为后端固定文案（access.ts 硬编码） */
+export function isMustChange(e: unknown): boolean {
+	const err = e as { msg?: string, data?: { code?: string } } | null;
+	return err?.data?.code === "must_change" || (err?.msg ?? "").includes("password change required");
+}
+
+/** 人话 msg：优先信封 msg，未知透传后端原文 */
+export function errMsg(e: unknown): string {
+	const err = e as { msg?: string, data?: { msg?: string } } | null;
+	return err?.msg ?? err?.data?.msg ?? (e instanceof Error ? e.message : String(e));
+}
+
+/**
+ * 已知业务错误 → i18n 人话；未知透传后端 msg。与后端 fail(status, message)
+ * 的 message 逐字匹配（users.ts 等 service 的 fail 文案）。
+ */
+export function explainError(e: unknown, t: (key: string) => string): string {
+	if (isForbidden(e))
+		return t("system:err.forbidden");
+	if (isMustChange(e))
+		return t("system:err.mustChange.title");
+	const msg = errMsg(e);
+	if (msg.includes("yourself"))
+		return t("system:err.selfAction");
+	if (msg.includes("password too short"))
+		return t("system:err.pwdTooShort");
+	if (msg.includes("username exists"))
+		return t("system:err.usernameExists");
+	if (msg.includes("reserved"))
+		return t("system:err.usernameReserved");
+	return msg;
+}

package/templates/web/src/system/pages/forbidden.tsx

@@ -0,0 +1,35 @@
+import type { TFunction } from "i18next";
+
+import { Button, Card, Result } from "antd";
+import { useNavigate } from "react-router";
+
+import { isMustChange } from "./errors";
+
+/**
+ * 页面级「无权限」面板：路由可进但 API 403——规格 §4：渲染引导而非落 error
+ * boundary。路由级门禁由 requiredRoles 过滤（B16）负责，本组件不承担。
+ *
+ * 特判 must_change（后端对未改密用户拒绝全部管理端点）：渲染改密引导卡跳
+ * /change-password——表单唯一真源在 login 模块，此处不重复实现（DRY）。
+ */
+export function ForbiddenPanel({ t, error }: { t: TFunction, error?: unknown }) {
+	const navigate = useNavigate();
+
+	if (isMustChange(error)) {
+		return (
+			<Card style={{ maxWidth: 480, margin: "48px auto" }}>
+				<Result
+					status="warning"
+					title={t("system:err.mustChange.title")}
+					subTitle={t("system:err.mustChange.hint")}
+					extra={(
+						<Button type="primary" onClick={() => navigate("/change-password")}>
+							{t("system:err.mustChange.go")}
+						</Button>
+					)}
+				/>
+			</Card>
+		);
+	}
+	return <Result status="403" title={t("system:err.forbidden")} />;
+}

package/templates/web/src/system/pages/login-methods/index.tsx

@@ -0,0 +1,29 @@
+import { useQuery } from "@tanstack/react-query";
+import { Card, Descriptions, Tag } from "antd";
+import { useTranslation } from "react-i18next";
+
+import { systemLoginMethodsGet } from "../../__client/api";
+
+const METHOD_KEY: Record<string, string> = {
+	local: "system:loginMethodsPage.methodLocal",
+	ldap: "system:loginMethodsPage.methodLdap",
+	sso: "system:loginMethodsPage.methodSso",
+};
+
+/** 登录方式发现（C5/D2，只读）：local 恒在，ldap/sso 由设置项开关。 */
+export default function LoginMethodsPage() {
+	const { t } = useTranslation();
+	const query = useQuery({ queryKey: ["system", "login-methods"], queryFn: systemLoginMethodsGet });
+
+	return (
+		<Card loading={query.isLoading} title={t("system:loginMethodsPage.title")}>
+			<Descriptions column={1}>
+				<Descriptions.Item label={t("system:menu.loginMethods")}>
+					{(query.data?.methods ?? []).map(m => (
+						<Tag key={m}>{METHOD_KEY[m] ? t(METHOD_KEY[m]) : m}</Tag>
+					))}
+				</Descriptions.Item>
+			</Descriptions>
+		</Card>
+	);
+}

package/templates/web/src/system/pages/oplog/index.tsx

@@ -0,0 +1,91 @@
+import { useQuery } from "@tanstack/react-query";
+import { Alert, Button, Form, Input, InputNumber, Space, Table, Tooltip } from "antd";
+import dayjs from "dayjs";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { systemOplogGet } from "../../__client/api";
+import { isForbidden } from "../errors";
+import { ForbiddenPanel } from "../forbidden";
+
+interface OplogFilters {
+	action?: string
+	username?: string
+	module?: string
+	limit?: number
+}
+
+/**
+ * 操作日志（AC1-29/D13）：action 精确 / username 前缀 / module 精确，limit 钳 200。
+ * truncated=true 表示结果被截断（服务端 paged），顶部提示缩小过滤范围。
+ */
+export default function OplogPage() {
+	const { t } = useTranslation();
+	const [filters, setFilters] = useState<OplogFilters>({});
+
+	const query = useQuery({
+		queryKey: ["system", "oplog", filters],
+		queryFn: () => systemOplogGet(filters),
+	});
+
+	if (query.error && isForbidden(query.error))
+		return <ForbiddenPanel t={t} error={query.error} />;
+
+	const columns = [
+		{ title: t("system:oplog.columns.time"), dataIndex: "create_time", render: (ms: number) => dayjs(ms).format("YYYY-MM-DD HH:mm:ss") },
+		{ title: t("system:oplog.columns.username"), dataIndex: "username" },
+		{ title: t("system:oplog.columns.action"), dataIndex: "action" },
+		{ title: t("system:oplog.columns.module"), dataIndex: "module" },
+		{ title: t("system:oplog.columns.target"), dataIndex: "target" },
+		{
+			title: t("system:oplog.columns.detail"),
+			dataIndex: "detail",
+			ellipsis: { showTitle: false },
+			render: (detail: string | null) => (detail ? <Tooltip title={detail}>{detail}</Tooltip> : null),
+		},
+		{ title: t("system:oplog.columns.level"), dataIndex: "level" },
+	];
+
+	return (
+		<Space direction="vertical" style={{ width: "100%" }}>
+			<Form
+				layout="inline"
+				onFinish={values => setFilters({
+					action: values.action || undefined,
+					username: values.username || undefined,
+					module: values.module || undefined,
+					limit: values.limit || undefined,
+				})}
+			>
+				<Form.Item name="action" label={t("system:oplog.filterAction")}>
+					<Input allowClear />
+				</Form.Item>
+				<Form.Item name="username" label={t("system:oplog.filterUsername")}>
+					<Input allowClear />
+				</Form.Item>
+				<Form.Item name="module" label={t("system:oplog.filterModule")}>
+					<Input allowClear />
+				</Form.Item>
+				<Form.Item name="limit" label={t("system:oplog.filterLimit")} initialValue={50}>
+					<InputNumber min={1} max={200} />
+				</Form.Item>
+				<Form.Item>
+					<Space>
+						<Button type="primary" htmlType="submit">{t("system:common.search")}</Button>
+						<Button onClick={() => { setFilters({}); }}>
+							{t("system:common.reset")}
+						</Button>
+					</Space>
+				</Form.Item>
+			</Form>
+			{query.data?.truncated ? <Alert type="warning" showIcon message={t("system:oplog.truncated")} /> : null}
+			<Table
+				rowKey="id"
+				loading={query.isLoading}
+				dataSource={query.data?.list ?? []}
+				columns={columns}
+				pagination={{ hideOnSinglePage: true, pageSize: 50 }}
+			/>
+		</Space>
+	);
+}

package/templates/web/src/system/pages/roles/index.tsx

@@ -0,0 +1,91 @@
+import type { SystemPermissionsGetData, SystemRolesGetData } from "../../__client/api";
+
+import { useQuery } from "@tanstack/react-query";
+import { Alert, Space, Table, Tabs, Tag } from "antd";
+import { useTranslation } from "react-i18next";
+
+import { systemPermissionsGet, systemRolesGet } from "../../__client/api";
+import { isForbidden } from "../errors";
+import { ForbiddenPanel } from "../forbidden";
+
+type RoleRow = SystemRolesGetData[number];
+type PermRow = SystemPermissionsGetData[number];
+
+/**
+ * 角色/权限（C2，只读视图）：写出口唯一为 upsertSolutionPerms（解决方案工具链），
+ * 页面不暴露建/删角色与绑定编辑（后端有 POST/DELETE，规格决定不开放 UI）。
+ */
+export default function RolesPage() {
+	const { t } = useTranslation();
+	const rolesQuery = useQuery({ queryKey: ["system", "roles"], queryFn: systemRolesGet });
+	const permsQuery = useQuery({ queryKey: ["system", "permissions"], queryFn: systemPermissionsGet });
+
+	if ((rolesQuery.error && isForbidden(rolesQuery.error)) || (permsQuery.error && isForbidden(permsQuery.error)))
+		return <ForbiddenPanel t={t} error={rolesQuery.error ?? permsQuery.error} />;
+
+	const roleColumns = [
+		{
+			title: t("system:rolesPage.tabRoles"),
+			dataIndex: "name",
+			render: (name: string, row: RoleRow) => (
+				<Space>
+					<span>{name}</span>
+					{row.builtin ? <Tag>{t("system:rolesPage.builtin")}</Tag> : null}
+					{row.deprecated ? <Tag color="default">{t("system:rolesPage.deprecated")}</Tag> : null}
+				</Space>
+			),
+		},
+		{ title: "module", dataIndex: "module" },
+		{ title: "title", dataIndex: "title" },
+		{ title: t("system:rolesPage.holders"), dataIndex: "holders" },
+		{
+			title: t("system:rolesPage.permissions"),
+			dataIndex: "permissions",
+			render: (perms: string[]) => perms.map(p => <Tag key={p}>{p}</Tag>),
+		},
+	];
+
+	const permColumns = [
+		{
+			title: "code",
+			dataIndex: "code",
+			render: (code: string, row: PermRow) => (row.deprecated ? <Tag color="default">{code}</Tag> : <span>{code}</span>),
+		},
+		{ title: "module", dataIndex: "module" },
+		{
+			// title_key 是跨模块 namespace（如 wiki:perm.*），本模块 locale 不命中回退 code（R6）
+			title: t("system:rolesPage.titleKey"),
+			dataIndex: "title_key",
+			render: (key: string | null, row: PermRow) => (key ? t(key, { defaultValue: row.code }) : row.code),
+		},
+		{
+			title: t("system:rolesPage.deprecated"),
+			dataIndex: "deprecated",
+			render: (dep: boolean) => (dep ? <Tag color="default">{t("system:rolesPage.deprecated")}</Tag> : null),
+		},
+	];
+
+	return (
+		<Tabs
+			items={[
+				{
+					key: "roles",
+					label: t("system:rolesPage.tabRoles"),
+					children: (
+						<>
+							<Alert style={{ marginBottom: 12 }} type="info" showIcon message={t("system:rolesPage.readonlyHint")} />
+							<Table rowKey="name" loading={rolesQuery.isLoading} dataSource={rolesQuery.data ?? []} columns={roleColumns} pagination={{ hideOnSinglePage: true }} />
+						</>
+					),
+				},
+				{
+					key: "perms",
+					label: t("system:rolesPage.tabPerms"),
+					children: (
+						<Table rowKey="code" loading={permsQuery.isLoading} dataSource={permsQuery.data ?? []} columns={permColumns} pagination={{ hideOnSinglePage: true }} />
+					),
+				},
+			]}
+		/>
+	);
+}

package/templates/web/src/system/pages/settings/index.tsx

@@ -0,0 +1,106 @@
+import type { TFunction } from "i18next";
+
+import type { SystemSettingsGetData } from "../../__client/api";
+
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { App, Button, Card, Input, Space, Switch, Tooltip } from "antd";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { systemSettingsGet, systemSettingsPut } from "../../__client/api";
+import { explainError, isForbidden } from "../errors";
+import { ForbiddenPanel } from "../forbidden";
+
+type SettingItem = SystemSettingsGetData[number]["items"][number];
+
+/** 只动框架键（规格 §3）：按 module 字段过滤，业务自定义键（如 wiki 的 mw_config）与 market.*（security 组，super-only 写）不进入 */
+const FRAMEWORK_MODULES = new Set(["framework", "ldap", "sso"]);
+
+/** 单项行：bool → Switch（"1"/"0"）；secret → 只读 ***；其余 Input 失焦/回车保存 */
+function SettingRow({ item, t, onSave }: { item: SettingItem, t: TFunction, onSave: (key: string, value: string) => void }) {
+	const [draft, setDraft] = useState<string | null>(null);
+
+	const label = item.label_key ? t(item.label_key, { defaultValue: item.key }) : item.key;
+
+	const save = (value: string) => {
+		onSave(item.key, value);
+		setDraft(null);
+	};
+
+	if (item.secret) {
+		return (
+			<Space>
+				<Tooltip title={t("system:settingsPage.secretHint")}>
+					<Input style={{ width: 320 }} value="***" disabled />
+				</Tooltip>
+				<span>{label}</span>
+			</Space>
+		);
+	}
+
+	if (item.type === "bool") {
+		return (
+			<Space>
+				<Switch checked={item.value === "1"} onChange={checked => save(checked ? "1" : "0")} />
+				<span>{label}</span>
+			</Space>
+		);
+	}
+
+	return (
+		<Space>
+			<Input
+				style={{ width: 320 }}
+				value={draft ?? item.value ?? ""}
+				onChange={e => setDraft(e.target.value)}
+				onPressEnter={() => draft !== null && save(draft)}
+			/>
+			<Button type="primary" size="small" disabled={draft === null || draft === item.value} onClick={() => draft !== null && save(draft)}>
+				{t("system:common.save")}
+			</Button>
+			<span>{label}</span>
+		</Space>
+	);
+}
+
+/**
+ * 站点设置（PRD §4.3）：GET 按组列（secret 读取面掩码 ***），逐项 PUT 写值。
+ * secret 项不可在线改（后端 value 掩码，写回 "***" 会被后端原样入库——禁编辑即防线）。
+ */
+export default function SettingsPage() {
+	const { t } = useTranslation();
+	const { message } = App.useApp();
+	const queryClient = useQueryClient();
+
+	const query = useQuery({ queryKey: ["system", "settings"], queryFn: systemSettingsGet });
+
+	const putMut = useMutation({
+		mutationFn: (body: { key: string, value: string }) => systemSettingsPut(body),
+		onSuccess: () => {
+			message.success(t("system:settingsPage.saved"));
+			queryClient.invalidateQueries({ queryKey: ["system", "settings"] });
+		},
+		onError: e => message.error(explainError(e, t)),
+	});
+
+	if (query.error && isForbidden(query.error))
+		return <ForbiddenPanel t={t} error={query.error} />;
+
+	const groups = (query.data ?? [])
+		.map(g => ({ ...g, items: g.items.filter(i => FRAMEWORK_MODULES.has(i.module)) }))
+		.filter(g => g.items.length > 0);
+
+	return (
+		<Space direction="vertical" style={{ width: "100%" }}>
+			{groups.map(g => (
+				<Card key={g.group} title={g.group}>
+					<Space direction="vertical" style={{ width: "100%" }}>
+						{g.items.map(item => (
+							<SettingRow key={item.key} item={item} t={t} onSave={(key, value) => putMut.mutate({ key, value })} />
+						))}
+					</Space>
+				</Card>
+			))}
+		</Space>
+	);
+}

package/templates/web/src/system/pages/users/index.tsx

@@ -0,0 +1,168 @@
+import type { SystemUsersGetData } from "../../__client/api";
+
+import { PlusOutlined } from "@ant-design/icons";
+import { useUserStore } from "@oj-module/runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { App, Button, Form, Input, Modal, Popconfirm, Space, Switch, Table, Tag } from "antd";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useNavigate } from "react-router";
+
+import { systemUsersForbiddenPut, systemUsersGet, systemUsersPasswordPut, systemUsersPost } from "../../__client/api";
+import { explainError, isForbidden } from "../errors";
+import { ForbiddenPanel } from "../forbidden";
+
+type UserRow = SystemUsersGetData[number];
+
+/**
+ * 用户管理（C1）：GET /system/users 列表 + 建号 / 禁用切换 / 重置口令。
+ * 本人行禁用一切自操作（后端 assertNotSelf 400 兜底，前端不给会失败的按钮，R3）；
+ * 成员资格入口仅 superadmin 可见（成员资格写是 superadmin-only，规格 §4）。
+ */
+export default function UsersPage() {
+	const { t } = useTranslation();
+	const { message } = App.useApp();
+	const navigate = useNavigate();
+	const queryClient = useQueryClient();
+	const me = useUserStore(s => s.id);
+	const myRoles = useUserStore(s => s.roles);
+	const isSuper = myRoles.includes("superadmin");
+
+	const [createOpen, setCreateOpen] = useState(false);
+	const [createForm] = Form.useForm<{ username: string, password: string, displayName?: string, email?: string }>();
+	const [pwdTarget, setPwdTarget] = useState<UserRow | null>(null);
+	const [pwdForm] = Form.useForm<{ password: string }>();
+
+	const usersQuery = useQuery({ queryKey: ["system", "users"], queryFn: systemUsersGet });
+
+	const invalidate = () => queryClient.invalidateQueries({ queryKey: ["system", "users"] });
+
+	const forbiddenMut = useMutation({
+		mutationFn: (input: { uid: number, forbidden: boolean }) => systemUsersForbiddenPut({ query: { uid: input.uid }, body: { forbidden: input.forbidden } }),
+		onSuccess: invalidate,
+		onError: e => message.error(explainError(e, t)),
+	});
+
+	const createMut = useMutation({
+		mutationFn: (body: { username: string, password: string, displayName?: string, email?: string }) => systemUsersPost(body),
+		onSuccess: () => {
+			message.success(t("system:users.createOk"));
+			setCreateOpen(false);
+			createForm.resetFields();
+			invalidate();
+		},
+		onError: e => message.error(explainError(e, t)),
+	});
+
+	const pwdMut = useMutation({
+		mutationFn: (input: { uid: number, password: string }) => systemUsersPasswordPut({ query: { uid: input.uid }, body: { password: input.password } }),
+		onSuccess: () => {
+			message.success(t("system:common.saved"));
+			setPwdTarget(null);
+			pwdForm.resetFields();
+			invalidate();
+		},
+		onError: e => message.error(explainError(e, t)),
+	});
+
+	if (usersQuery.error && isForbidden(usersQuery.error))
+		return <ForbiddenPanel t={t} error={usersQuery.error} />;
+
+	const columns = [
+		{ title: t("system:users.columns.username"), dataIndex: "username" },
+		{ title: t("system:users.columns.displayName"), dataIndex: "display_name" },
+		{ title: t("system:users.columns.email"), dataIndex: "email" },
+		{
+			title: t("system:users.columns.roles"),
+			dataIndex: "roles",
+			render: (roles: string[]) => roles.map(r => <Tag key={r}>{r}</Tag>),
+		},
+		{
+			title: t("system:users.columns.status"),
+			dataIndex: "is_forbidden",
+			render: (forbidden: boolean, row: UserRow) => (
+				<Space>
+					<Popconfirm
+						title={t("system:users.forbidden")}
+						description={`${row.username} → ${forbidden ? "false" : "true"}`}
+						onConfirm={() => forbiddenMut.mutate({ uid: row.id, forbidden: !forbidden })}
+					>
+						<Switch size="small" checked={forbidden} disabled={String(row.id) === me} />
+					</Popconfirm>
+					{row.must_change ? <Tag color="orange">{t("system:users.firstLoginHint")}</Tag> : null}
+				</Space>
+			),
+		},
+		{
+			title: t("system:users.columns.actions"),
+			key: "actions",
+			render: (_: unknown, row: UserRow) => (
+				<Space>
+					<Button size="small" disabled={String(row.id) === me} onClick={() => setPwdTarget(row)}>
+						{t("system:users.resetPwd")}
+					</Button>
+					{isSuper
+						? (
+							<Button size="small" type="link" onClick={() => navigate(`/system/users/${row.id}/roles`)}>
+								{t("system:users.membership")}
+							</Button>
+						)
+						: null}
+				</Space>
+			),
+		},
+	];
+
+	return (
+		<Space direction="vertical" style={{ width: "100%" }}>
+			<Button type="primary" icon={<PlusOutlined />} onClick={() => setCreateOpen(true)}>
+				{t("system:users.create")}
+			</Button>
+			<Table
+				rowKey="id"
+				loading={usersQuery.isLoading}
+				dataSource={usersQuery.data ?? []}
+				columns={columns}
+				pagination={{ hideOnSinglePage: true }}
+			/>
+
+			<Modal
+				title={t("system:users.create")}
+				open={createOpen}
+				onCancel={() => setCreateOpen(false)}
+				confirmLoading={createMut.isPending}
+				onOk={() => createForm.submit()}
+			>
+				<Form form={createForm} layout="vertical" onFinish={values => createMut.mutate(values)}>
+					<Form.Item name="username" label={t("system:users.columns.username")} rules={[{ required: true }]} extra="ldap:/ sso: 为外部身份源保留">
+						<Input />
+					</Form.Item>
+					<Form.Item name="password" label="Password" rules={[{ required: true }, { min: 6 }]} extra={t("system:users.pwdPlaceholder")}>
+						<Input.Password />
+					</Form.Item>
+					<Form.Item name="displayName" label={t("system:users.columns.displayName")}>
+						<Input />
+					</Form.Item>
+					<Form.Item name="email" label={t("system:users.columns.email")}>
+						<Input />
+					</Form.Item>
+				</Form>
+			</Modal>
+
+			<Modal
+				title={`${t("system:users.resetPwd")}: ${pwdTarget?.username ?? ""}`}
+				open={pwdTarget !== null}
+				onCancel={() => setPwdTarget(null)}
+				confirmLoading={pwdMut.isPending}
+				onOk={() => pwdForm.submit()}
+			>
+				<Form form={pwdForm} layout="vertical" onFinish={values => pwdTarget && pwdMut.mutate({ uid: pwdTarget.id, password: values.password })}>
+					<Form.Item name="password" label="Password" rules={[{ required: true }, { min: 6 }]} extra={t("system:users.pwdPlaceholder")}>
+						<Input.Password />
+					</Form.Item>
+				</Form>
+			</Modal>
+		</Space>
+	);
+}

package/templates/web/src/system/pages/users/roles.tsx

@@ -0,0 +1,68 @@
+import { useUserStore } from "@oj-module/runtime";
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { App, Button, Card, Checkbox, Space } from "antd";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import { useNavigate, useParams } from "react-router";
+
+import { systemRolesGet, systemUsersGet, systemUsersRolesPut } from "../../__client/api";
+import { isForbidden } from "../errors";
+import { ForbiddenPanel } from "../forbidden";
+
+/**
+ * 成员资格（AC1-7，superadmin-only）：整集替换某用户角色。后端无 GET 单用户端点，
+ * 当前角色从 GET /system/users 列表按 uid 回显；写走 PUT /system/users/roles?uid=。
+ * admin（非 superadmin）手输 URL 进入后提交会被 service 层 403 → 页面渲染无权限（§3.2）。
+ */
+export default function UserRolesPage() {
+	const { t } = useTranslation();
+	const { message } = App.useApp();
+	const navigate = useNavigate();
+	const { uid } = useParams();
+	const queryClient = useQueryClient();
+	const me = useUserStore(s => s.id);
+
+	// null = 尚未改动，回显服务端值；一旦勾选即持本地整集
+	const [selected, setSelected] = useState<string[] | null>(null);
+
+	const usersQuery = useQuery({ queryKey: ["system", "users"], queryFn: systemUsersGet });
+	const rolesQuery = useQuery({ queryKey: ["system", "roles"], queryFn: systemRolesGet });
+
+	const saveMut = useMutation({
+		mutationFn: (roles: string[]) => systemUsersRolesPut({ query: { uid: Number(uid) }, body: { roles } }),
+		onSuccess: () => {
+			message.success(t("system:userRoles.saved"));
+			queryClient.invalidateQueries({ queryKey: ["system", "users"] });
+			navigate("/system/users");
+		},
+	});
+
+	const user = usersQuery.data?.find(u => String(u.id) === uid);
+	if (usersQuery.error && isForbidden(usersQuery.error))
+		return <ForbiddenPanel t={t} error={usersQuery.error} />;
+
+	const value = selected ?? user?.roles ?? [];
+	const isSelf = String(user?.id) === me;
+
+	return (
+		<Card title={`${t("system:userRoles.title")}: ${user?.username ?? `#${uid}`}`}>
+			<Space direction="vertical">
+				<Checkbox.Group
+					options={(rolesQuery.data ?? []).map(r => ({ label: `${r.name}${r.deprecated ? "（已废弃）" : ""}`, value: r.name }))}
+					value={value}
+					onChange={v => setSelected(v)}
+				/>
+				{value.length === 0 ? <span>{t("system:userRoles.none")}</span> : null}
+				<Button
+					type="primary"
+					disabled={isSelf || selected === null}
+					loading={saveMut.isPending}
+					onClick={() => saveMut.mutate(value)}
+				>
+					{t("system:common.save")}
+				</Button>
+			</Space>
+		</Card>
+	);
+}

package/templates/web.config.ts

@@ -36,5 +36,13 @@ export default {
 			entry: "web/src/notification/entry.ts",
 			enabled: true,
 		},
+		{
+			// 系统管理：用户/成员资格/角色权限/操作日志/站点设置/登录方式（oj 后端 /api/system/*）。
+			// __client 已随模板分发（与 auth/notification 等一致），开箱即用；契约变更后重跑
+			// `oj openapi -o openapi.json && ojm api` 可刷新，README「系统管理模块」节有说明
+			name: "system",
+			entry: "web/src/system/entry.ts",
+			enabled: true,
+		},
 	],
 };

package/vendor/host-versions.json

@@ -8,9 +8,9 @@
 		"react-router": "7.18.2",
 		"react-router/dom": "7.18.2",
 		"@tanstack/react-query": "5.102.8",
-		"@oj-module/runtime": "0.1.21",
-		"@oj-module/runtime/contract": "0.1.21",
-		"@oj-module/runtime/contract/errors": "0.1.21",
+		"@oj-module/runtime": "0.2.2",
+		"@oj-module/runtime/contract": "0.2.2",
+		"@oj-module/runtime/contract/errors": "0.2.2",
 		"@plane/kit": "0.1.20",
 		"@plane/editor": "0.1.20",
 		"antd": "6.6.1",