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/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>