refactor(admin-web): polish Chinese UI and bits-ui controls

Map roles to Chinese labels, remove ADR/spec wording from the surface, and replace native selects/checkboxes/modals with bits-ui Select, Checkbox, Switch, Dialog, Label, and Collapsible.

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

@@ -1,7 +1,12 @@
 <script lang="ts">
-	import { api, type OrgRoleRow, type OrgModelRow } from '$lib/api';
+	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 {
@@ -18,7 +23,6 @@
 		onupdated: (updated: OrgRoleRow) => void;
 	} = $props();
 
-	// Local edit buffer intentionally seeded once from the row props.
 	const initial = {
 		roleId: r.roleId,
 		label: r.label,
@@ -32,19 +36,12 @@
 	let defaultModelId = $state(initial.defaultModelId);
 	let systemPrompt = $state(initial.systemPrompt);
 	let unrestricted = $state(initial.unrestricted);
-	let selectedTools = $state<Set<string>>(new Set(initial.tools));
+	let selectedTools = $state<string[]>([...initial.tools]);
 	let saving = $state(false);
 
-	function toggleTool(id: string) {
-		const next = new Set(selectedTools);
-		if (next.has(id)) next.delete(id);
-		else next.add(id);
-		selectedTools = next;
-	}
-
 	async function save() {
 		saving = true;
-		const tools = unrestricted ? null : [...selectedTools];
+		const tools = unrestricted ? null : selectedTools;
 		try {
 			const updated = await api.updateRole(slug, r.id, {
 				roleId: roleId.trim(),
@@ -69,6 +66,11 @@
 		},
 		{} 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">
@@ -79,60 +81,58 @@
 
 	<div class="grid grid-cols-1 gap-4 md:grid-cols-2">
 		<div>
-			<label for="role-id-{r.id}" class="saas-label">roleId</label>
+			<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 for="role-label-{r.id}" class="saas-label">label</label>
+			<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">
-		<label for="role-model-{r.id}" class="saas-label">默认模型</label>
-		<select id="role-model-{r.id}" class="saas-select" bind:value={defaultModelId}>
-			<option value="">（角色默认 → 首模型）</option>
-			{#each models as m}
-				<option value={m.modelId}>{m.label} ({m.modelId})</option>
-			{/each}
-		</select>
+		<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 rounded-lg border border-surface-200 bg-surface-100/40 px-3 py-2">
-			<input type="checkbox" class="checkbox" bind:checked={unrestricted} />
+			<CheckboxControl bind:checked={unrestricted} />
 			<span class="text-sm">不限（使用全部注册工具）</span>
 		</label>
 		<div class="space-y-3 {unrestricted ? 'pointer-events-none opacity-40' : ''}">
-			{#each Object.entries(groupedTools) as [group, tools]}
-				<div>
-					<p class="mb-1.5 text-xs font-semibold uppercase tracking-wide text-surface-400">{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 rounded-md px-2 py-1.5 text-sm hover:bg-surface-100">
-								<input
-									type="checkbox"
-									class="checkbox"
-									checked={selectedTools.has(t.id)}
-									onchange={() => toggleTool(t.id)}
-								/>
-								{t.label}
-							</label>
-						{/each}
+			<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-400">{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 rounded-md 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>
-				</div>
-			{/each}
+				{/each}
+			</Checkbox.Group>
 		</div>
 	</div>
 
 	<div class="mt-4">
-		<label for="role-prompt-{r.id}" class="saas-label">系统提示词</label>
+		<Label.Root for="role-prompt-{r.id}" class="saas-label">系统提示词</Label.Root>
 		<textarea
 			id="role-prompt-{r.id}"
 			class="saas-textarea"
 			rows="4"
-			placeholder="系统提示词（可选）。会话开始时注入，定义 agent 人格/指令。"
+			placeholder="系统提示词（可选）。会话开始时注入，定义智能体人格/指令。"
 			bind:value={systemPrompt}
 		></textarea>
 	</div>