curriculum-project-hub/hub/admin-web/src/lib/components/RoleCard.svelte

<script lang="ts">
	import { Checkbox, Label } from 'bits-ui';
	import type { OrgRoleRow, OrgModelRow } from '$lib/api';
	import { api } from '$lib/api';
	import { fmtDate } from '$lib/format';
	import { TOOL_OPTIONS } from '$lib/constants';
	import SelectField from '$lib/components/SelectField.svelte';
	import CheckboxControl from '$lib/components/CheckboxControl.svelte';
	import Icon from '$lib/components/Icon.svelte';
	import { toastError, toastSuccess } from '$lib/toast';

	let {
		r,
		models,
		slug,
		onremoved,
		onupdated
	}: {
		r: OrgRoleRow;
		models: OrgModelRow[];
		slug: string;
		onremoved: () => void;
		onupdated: (updated: OrgRoleRow) => void;
	} = $props();

	const initial = {
		roleId: r.roleId,
		label: r.label,
		defaultModelId: r.defaultModelId ?? '',
		systemPrompt: r.systemPrompt ?? '',
		unrestricted: r.tools === null,
		tools: r.tools ?? []
	};
	let roleId = $state(initial.roleId);
	let label = $state(initial.label);
	let defaultModelId = $state(initial.defaultModelId);
	let systemPrompt = $state(initial.systemPrompt);
	let unrestricted = $state(initial.unrestricted);
	let selectedTools = $state<string[]>([...initial.tools]);
	let saving = $state(false);

	async function save() {
		saving = true;
		const tools = unrestricted ? null : selectedTools;
		try {
			const updated = await api.updateRole(slug, r.id, {
				roleId: roleId.trim(),
				label: label.trim(),
				defaultModelId: defaultModelId === '' ? null : defaultModelId,
				systemPrompt: systemPrompt === '' ? null : systemPrompt,
				tools
			});
			onupdated(updated);
			toastSuccess('角色已保存');
		} catch (err) {
			toastError(err instanceof Error ? err.message : String(err));
		} finally {
			saving = false;
		}
	}

	const groupedTools = TOOL_OPTIONS.reduce(
		(acc, t) => {
			(acc[t.group] ??= []).push(t);
			return acc;
		},
		{} as Record<string, typeof TOOL_OPTIONS>
	);

	const modelItems = $derived([
		{ value: '', label: '（使用清单中的首个模型）' },
		...models.map((m) => ({ value: m.modelId, label: `${m.label}（${m.modelId}）` }))
	]);
</script>

<div class="saas-card-pad">
	<div class="mb-4 flex flex-wrap items-center gap-2">
		<span class="saas-badge-primary font-mono">/{roleId || r.roleId}</span>
		<span class="text-sm text-surface-700">{label || r.label}</span>
	</div>

	<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
		<div>
			<Label.Root for="role-id-{r.id}" class="saas-label">角色 ID</Label.Root>
			<input id="role-id-{r.id}" class="saas-input font-mono text-sm" bind:value={roleId} />
		</div>
		<div>
			<Label.Root for="role-label-{r.id}" class="saas-label">显示名</Label.Root>
			<input id="role-label-{r.id}" class="saas-input" bind:value={label} />
		</div>
	</div>

	<div class="mt-4">
		<p class="saas-label">默认模型</p>
		<SelectField items={modelItems} bind:value={defaultModelId} />
	</div>

	<div class="mt-4">
		<span class="saas-label">工具白名单</span>
		<label class="mb-3 flex cursor-pointer items-center gap-2 border border-surface-300 bg-surface-100 px-3 py-2">
			<CheckboxControl bind:checked={unrestricted} />
			<span class="text-sm">不限（使用全部注册工具）</span>
		</label>
		<div class="space-y-3 {unrestricted ? 'pointer-events-none opacity-40' : ''}">
			<Checkbox.Group bind:value={selectedTools} disabled={unrestricted}>
				{#each Object.entries(groupedTools) as [group, tools]}
					<div>
						<p class="mb-1.5 text-xs font-semibold uppercase tracking-wide text-surface-600">{group}</p>
						<div class="grid grid-cols-1 gap-1.5 sm:grid-cols-2">
							{#each tools as t}
								<label class="flex cursor-pointer items-center gap-2 px-2 py-1.5 text-sm hover:bg-surface-100">
									<Checkbox.Root class="saas-checkbox" value={t.id} id={`tool-${r.id}-${t.id}`}>
										{#snippet children({ checked })}
											{#if checked}
												<Icon name="check" class="h-3.5 w-3.5" />
											{/if}
										{/snippet}
									</Checkbox.Root>
									<span>{t.label}</span>
								</label>
							{/each}
						</div>
					</div>
				{/each}
			</Checkbox.Group>
		</div>
	</div>

	<div class="mt-4">
		<Label.Root for="role-prompt-{r.id}" class="saas-label">系统提示词</Label.Root>
		<textarea
			id="role-prompt-{r.id}"
			class="saas-textarea"
			rows="4"
			placeholder="系统提示词（可选）。会话开始时注入，定义智能体人格/指令。"
			bind:value={systemPrompt}
		></textarea>
	</div>

	<div class="mt-4 flex flex-wrap items-center gap-3 border-t border-surface-100 pt-4">
		<span class="text-xs text-surface-600">更新于 {fmtDate(r.updatedAt)}</span>
		<div class="flex-1"></div>
		<button class="saas-btn-danger" onclick={onremoved}>删除角色</button>
		<button class="saas-btn-primary" onclick={save} disabled={saving}>
			{saving ? '保存中…' : '保存'}
		</button>
	</div>
</div>