Modernize admin UI and harden provider contracts

Adopt Web Awesome for consistent accessible controls while aligning production ASR, App Attest, and runtime dependency safeguards.

admin-web/src/components/ui.ts

@@ -1,10 +1,11 @@
+import type WaButton from "@awesome.me/webawesome/dist/components/button/button.js";
 import { ApiError } from "../api/client";
 import { escapeHtml } from "../lib/format";
 
 export function renderLoading(container: HTMLElement, label = "正在加载"): void {
   container.innerHTML = `
     <div class="state-card" role="status" aria-live="polite">
-      <span class="spinner" aria-hidden="true"></span>
+      <wa-spinner class="state-spinner" aria-hidden="true"></wa-spinner>
       <p>${escapeHtml(label)}…</p>
     </div>
   `;
@@ -18,14 +19,14 @@ export function renderError(
   const message =
     error instanceof ApiError ? error.message : "出现未知错误，请稍后重试";
   container.innerHTML = `
-    <div class="state-card state-card--error" role="alert">
+    <wa-callout class="state-card state-card--error" variant="danger" appearance="outlined" role="alert">
       <span class="state-icon" aria-hidden="true">!</span>
       <h2>无法加载数据</h2>
       <p>${escapeHtml(message)}</p>
-      ${retry ? '<button class="button button--secondary" data-retry>重试</button>' : ""}
-    </div>
+      ${retry ? '<wa-button variant="neutral" appearance="outlined" data-retry>重试</wa-button>' : ""}
+    </wa-callout>
   `;
-  container.querySelector<HTMLButtonElement>("[data-retry]")?.addEventListener(
+  container.querySelector<HTMLElement>("[data-retry]")?.addEventListener(
     "click",
     () => retry?.(),
   );
@@ -36,8 +37,10 @@ export function renderEmpty(message: string): string {
 }
 
 export function showToast(message: string, tone: "success" | "error"): void {
-  const toast = document.createElement("div");
+  const toast = document.createElement("wa-callout");
   toast.className = `toast toast--${tone}`;
+  toast.setAttribute("variant", tone === "error" ? "danger" : "success");
+  toast.setAttribute("appearance", "filled-outlined");
   toast.setAttribute("role", tone === "error" ? "alert" : "status");
   toast.textContent = message;
   document.body.append(toast);
@@ -49,10 +52,13 @@ export function showToast(message: string, tone: "success" | "error"): void {
 }
 
 export function setButtonBusy(
-  button: HTMLButtonElement,
+  button: HTMLButtonElement | WaButton,
   busy: boolean,
   busyLabel = "处理中…",
 ): void {
+  if (button.tagName === "WA-BUTTON") {
+    (button as WaButton).loading = busy;
+  }
   if (busy) {
     button.dataset.label = button.textContent ?? "";
     button.textContent = busyLabel;

admin-web/src/components/webawesome.ts

@@ -0,0 +1,15 @@
+import "@awesome.me/webawesome/dist/styles/webawesome.css";
+import "@awesome.me/webawesome/dist/components/button/button.js";
+import "@awesome.me/webawesome/dist/components/callout/callout.js";
+import "@awesome.me/webawesome/dist/components/input/input.js";
+import "@awesome.me/webawesome/dist/components/spinner/spinner.js";
+
+const darkMode = window.matchMedia("(prefers-color-scheme: dark)");
+
+function syncColorScheme(event: MediaQueryList | MediaQueryListEvent): void {
+  document.documentElement.classList.toggle("wa-dark", event.matches);
+  document.documentElement.classList.toggle("wa-light", !event.matches);
+}
+
+syncColorScheme(darkMode);
+darkMode.addEventListener("change", syncColorScheme);