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/pages/audit.ts

@@ -35,7 +35,7 @@ export async function renderAudit(container: HTMLElement): Promise<void> {
               </div>
               ${
                 page.nextCursor
-                  ? '<div class="pagination-actions"><button class="button button--secondary" data-audit-more>加载更早记录</button></div>'
+                  ? '<div class="pagination-actions"><wa-button variant="neutral" appearance="outlined" data-audit-more>加载更早记录</wa-button></div>'
                   : ""
               }
             `

admin-web/src/pages/auth.ts

@@ -1,3 +1,4 @@
+import type WaButton from "@awesome.me/webawesome/dist/components/button/button.js";
 import { adminApi, ApiError, setCsrfToken } from "../api/client";
 import type { AuthState } from "../api/types";
 import { setButtonBusy } from "../components/ui";
@@ -27,27 +28,18 @@ export function renderPasswordLogin(
     <h1>管理员登录</h1>
     <p class="muted">使用管理员凭据和认证器动态验证码登录。凭据不会保存到浏览器。</p>
     <form class="form-stack" data-login-form novalidate>
-      <label>
-        <span>管理员用户名</span>
-        <input name="username" type="text" autocomplete="username" minlength="3" maxlength="64" required autofocus />
-      </label>
-      <label>
-        <span>管理员密码</span>
-        <input name="password" type="password" autocomplete="current-password" minlength="12" required />
-      </label>
-      <label>
-        <span>动态验证码</span>
-        <input class="totp-input" name="totpCode" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6" required />
-      </label>
+      <wa-input name="username" label="管理员用户名" type="text" autocomplete="username" minlength="3" maxlength="64" appearance="outlined" required autofocus></wa-input>
+      <wa-input name="password" label="管理员密码" type="password" autocomplete="current-password" minlength="12" appearance="outlined" password-toggle required></wa-input>
+      <wa-input class="totp-input" name="totpCode" label="动态验证码" type="text" inputmode="numeric" autocomplete="one-time-code" pattern="[0-9]{6}" maxlength="6" appearance="outlined" required></wa-input>
       <p class="form-error" data-error role="alert"></p>
-      <button class="button button--primary button--wide" type="submit">安全登录</button>
+      <wa-button class="button--wide" variant="brand" appearance="accent" type="submit">安全登录</wa-button>
     </form>
   `);
 
   const form = root.querySelector<HTMLFormElement>("[data-login-form]");
   form?.addEventListener("submit", async (event) => {
     event.preventDefault();
-    const button = form.querySelector<HTMLButtonElement>("button");
+    const button = form.querySelector<WaButton>('wa-button[type="submit"]');
     const errorNode = form.querySelector<HTMLElement>("[data-error]");
     const username = new FormData(form).get("username")?.toString().trim() ?? "";
     const password = new FormData(form).get("password")?.toString() ?? "";

admin-web/src/pages/credits.ts

@@ -24,7 +24,7 @@ export function renderCredits(container: HTMLElement): void {
           <span aria-hidden="true">⌕</span>
           <input name="userId" type="search" placeholder="输入完整用户 ID" autocomplete="off" maxlength="36" required />
         </label>
-        <button class="button button--primary" type="submit">查询流水</button>
+        <wa-button variant="brand" appearance="accent" type="submit">查询流水</wa-button>
       </form>
       <div data-ledger-results>${renderEmpty("输入内部用户 ID 开始查询")}</div>
     </section>

admin-web/src/pages/security.ts

@@ -57,7 +57,7 @@ function securityTemplate(
         <h1>安全中心</h1>
         <p>管理运营人员、角色、登录锁定、会话与双重认证。</p>
       </div>
-      <button class="button button--primary" data-create-operator>添加管理员</button>
+      <wa-button variant="brand" appearance="accent" data-create-operator>添加管理员</wa-button>
     </div>
 
     <aside class="security-notice" aria-label="安全说明">
@@ -88,7 +88,7 @@ function securityTemplate(
       </div>
       ${
         nextCursor
-          ? '<div class="pagination-actions"><button class="button button--secondary" data-operator-more aria-describedby="operator-pagination-status">加载更多管理员</button></div>'
+          ? '<div class="pagination-actions"><wa-button variant="neutral" appearance="outlined" data-operator-more aria-describedby="operator-pagination-status">加载更多管理员</wa-button></div>'
           : ""
       }
       <p class="sr-only" id="operator-pagination-status" data-operator-status role="status" aria-live="polite"></p>
@@ -133,15 +133,15 @@ function operatorRow(
         <div class="row-actions" data-operator-id="${escapeHtml(operator.operatorId)}">
           ${
             locked
-              ? '<button class="button button--small button--secondary" data-operator-action="unlock">解锁</button>'
+              ? '<wa-button variant="neutral" appearance="outlined" size="s" data-operator-action="unlock">解锁</wa-button>'
               : ""
           }
-          <button class="button button--small button--secondary" data-operator-action="sessions">撤销会话</button>
-          <button class="button button--small button--secondary" data-operator-action="reset">重置凭据</button>
+          <wa-button variant="neutral" appearance="outlined" size="s" data-operator-action="sessions">撤销会话</wa-button>
+          <wa-button variant="neutral" appearance="outlined" size="s" data-operator-action="reset">重置凭据</wa-button>
           ${
             operator.enabled
-              ? `<button class="button button--small button--danger" data-operator-action="disable" ${current ? "disabled" : ""}>停用</button>`
-              : '<button class="button button--small button--secondary" data-operator-action="enable">启用</button>'
+              ? `<wa-button variant="danger" appearance="filled" size="s" data-operator-action="disable" ${current ? "disabled" : ""}>停用</wa-button>`
+              : '<wa-button variant="neutral" appearance="outlined" size="s" data-operator-action="enable">启用</wa-button>'
           }
         </div>
       </td>

admin-web/src/pages/users.ts

@@ -39,7 +39,7 @@ export function renderUsers(container: HTMLElement, role: AdminRole): void {
           <span aria-hidden="true">⌕</span>
           <input name="query" type="search" placeholder="输入完整内部用户 ID" autocomplete="off" maxlength="36" required />
         </label>
-        <button class="button button--primary" type="submit">搜索</button>
+        <wa-button variant="brand" appearance="accent" type="submit">搜索</wa-button>
       </form>
       <div data-results>${renderEmpty("输入查询条件开始搜索")}</div>
     </section>
@@ -102,7 +102,7 @@ function userRow(user: UserSummary): string {
       <td><span class="badge badge--${escapeHtml(user.status)}">${statusLabel(user.status)}</span></td>
       <td>${formatNumber(user.creditBalance)}</td>
       <td>${formatDateTime(user.createdAt)}</td>
-      <td><button class="button button--small button--secondary" data-user-id="${escapeHtml(user.userId)}" aria-label="查看 ${escapeHtml(user.displayName || user.userId)}">查看</button></td>
+      <td><wa-button variant="neutral" appearance="outlined" size="s" data-user-id="${escapeHtml(user.userId)}" aria-label="查看 ${escapeHtml(user.displayName || user.userId)}">查看</wa-button></td>
     </tr>
   `;
 }
@@ -157,14 +157,14 @@ function detailTemplate(
   return `
     <div class="page-heading page-heading--detail">
       <div>
-        <button class="back-link" data-back>← 返回用户查询</button>
+        <wa-button class="back-link" appearance="plain" data-back>← 返回用户查询</wa-button>
         <div class="eyebrow">用户详情</div>
         <h1>${escapeHtml(user.displayName || "未命名用户")}</h1>
         <p class="mono">${escapeHtml(user.userId)}</p>
       </div>
       ${
         role === "SUPER_ADMIN"
-          ? '<button class="button button--primary" data-open-grant>人工赠送积分</button>'
+          ? '<wa-button variant="brand" appearance="accent" data-open-grant>人工赠送积分</wa-button>'
           : ""
       }
     </div>
@@ -208,7 +208,7 @@ function detailTemplate(
               </div>
               ${
                 ledger.nextCursor
-                  ? '<div class="pagination-actions"><button class="button button--secondary" data-ledger-more aria-describedby="ledger-pagination-status">加载更多流水</button></div>'
+                  ? '<div class="pagination-actions"><wa-button variant="neutral" appearance="outlined" data-ledger-more aria-describedby="ledger-pagination-status">加载更多流水</wa-button></div>'
                   : ""
               }
               <p class="sr-only" id="ledger-pagination-status" data-ledger-status role="status" aria-live="polite"></p>