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/CheckboxControl.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import { Checkbox } from 'bits-ui';
+	import Icon from './Icon.svelte';
+
+	let {
+		checked = $bindable(false),
+		disabled = false,
+		class: className = '',
+		onchange
+	}: {
+		checked?: boolean;
+		disabled?: boolean;
+		class?: string;
+		onchange?: (checked: boolean) => void;
+	} = $props();
+</script>
+
+<Checkbox.Root
+	class="saas-checkbox {className}"
+	{disabled}
+	{checked}
+	onCheckedChange={(next) => {
+		checked = next;
+		onchange?.(next);
+	}}
+>
+	{#snippet children({ checked: isChecked })}
+		{#if isChecked}
+			<Icon name="check" class="h-3.5 w-3.5" />
+		{/if}
+	{/snippet}
+</Checkbox.Root>

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

@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
+	import { Dialog } from 'bits-ui';
 
 	let {
 		open = $bindable(false),
@@ -12,33 +13,26 @@
 		children: Snippet;
 		onclose?: () => void;
 	} = $props();
-
-	function close() {
-		open = false;
-		onclose?.();
-	}
-
-	function onBackdrop(e: MouseEvent) {
-		if (e.target === e.currentTarget) close();
-	}
-
-	function onKey(e: KeyboardEvent) {
-		if (e.key === 'Escape') close();
-	}
 </script>
 
-{#if open}
-	<div class="saas-modal-backdrop" role="presentation" onclick={onBackdrop} onkeydown={onKey}>
-		<div class="saas-modal" role="dialog" aria-modal="true" aria-label={title} tabindex="-1">
+<Dialog.Root
+	bind:open
+	onOpenChange={(next) => {
+		if (!next) onclose?.();
+	}}
+>
+	<Dialog.Portal>
+		<Dialog.Overlay class="saas-modal-backdrop" />
+		<Dialog.Content class="saas-modal">
 			<div class="mb-4 flex items-start justify-between gap-3">
-				<h3 class="text-lg font-semibold text-surface-900">{title}</h3>
-				<button type="button" class="saas-btn-ghost !px-2 !py-1 text-surface-400" onclick={close} aria-label="关闭">
+				<Dialog.Title class="text-lg font-semibold text-surface-900">{title}</Dialog.Title>
+				<Dialog.Close class="saas-btn-ghost !px-2 !py-1 text-surface-400" aria-label="关闭">
 					<svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.75">
 						<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
 					</svg>
-				</button>
+				</Dialog.Close>
 			</div>
 			{@render children()}
-		</div>
-	</div>
-{/if}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

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>

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

@@ -0,0 +1,71 @@
+<script lang="ts">
+	import { Select } from 'bits-ui';
+	import Icon from './Icon.svelte';
+
+	export type SelectItem = { label: string; value: string; disabled?: boolean };
+
+	let {
+		items,
+		value = $bindable(''),
+		class: className = '',
+		disabled = false,
+		placeholder = '请选择…',
+		onchange
+	}: {
+		items: SelectItem[];
+		value?: string;
+		class?: string;
+		disabled?: boolean;
+		placeholder?: string;
+		onchange?: (value: string) => void;
+	} = $props();
+</script>
+
+<Select.Root
+	type="single"
+	{items}
+	{disabled}
+	{value}
+	onValueChange={(next) => {
+		value = next;
+		onchange?.(next);
+	}}
+>
+	<Select.Trigger class="saas-select-trigger {className}" {disabled}>
+		<span class="min-w-0 flex-1 truncate text-left">
+			<Select.Value {placeholder} />
+		</span>
+		<svg
+			class="ml-2 h-4 w-4 shrink-0 text-surface-400"
+			viewBox="0 0 24 24"
+			fill="none"
+			stroke="currentColor"
+			stroke-width="1.75"
+			aria-hidden="true"
+		>
+			<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 15l3.75 3.75L15.75 15" />
+			<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 9l3.75-3.75L15.75 9" />
+		</svg>
+	</Select.Trigger>
+	<Select.Portal>
+		<Select.Content class="saas-select-content" sideOffset={6} collisionPadding={8}>
+			<Select.Viewport class="p-1">
+				{#each items as item (item.value)}
+					<Select.Item
+						class="saas-select-item"
+						value={item.value}
+						label={item.label}
+						disabled={item.disabled}
+					>
+						{#snippet children({ selected })}
+							<span class="min-w-0 flex-1 truncate">{item.label}</span>
+							{#if selected}
+								<Icon name="check" class="ml-2 h-4 w-4 shrink-0 text-primary-600" />
+							{/if}
+						{/snippet}
+					</Select.Item>
+				{/each}
+			</Select.Viewport>
+		</Select.Content>
+	</Select.Portal>
+</Select.Root>

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

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { Switch } from 'bits-ui';
+
+	let {
+		checked = $bindable(false),
+		disabled = false,
+		class: className = '',
+		onchange
+	}: {
+		checked?: boolean;
+		disabled?: boolean;
+		class?: string;
+		onchange?: (checked: boolean) => void;
+	} = $props();
+</script>
+
+<Switch.Root
+	class="saas-switch {className}"
+	{disabled}
+	{checked}
+	onCheckedChange={(next) => {
+		checked = next;
+		onchange?.(next);
+	}}
+>
+	<Switch.Thumb class="saas-switch-thumb" />
+</Switch.Root>