diff --git a/admin-web/src/components/ui.ts b/admin-web/src/components/ui.ts
index eb14f7e..f544af9 100644
--- a/admin-web/src/components/ui.ts
+++ b/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 = `
-
+
${escapeHtml(label)}…
`;
@@ -18,14 +19,14 @@ export function renderError(
const message =
error instanceof ApiError ? error.message : "出现未知错误，请稍后重试";
container.innerHTML = `
-
+
!
无法加载数据
${escapeHtml(message)}
- ${retry ? '' : ""}
-
+ ${retry ? '
重试' : ""}
+
`;
- container.querySelector
("[data-retry]")?.addEventListener(
+ container.querySelector("[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;
diff --git a/admin-web/src/components/webawesome.ts b/admin-web/src/components/webawesome.ts
new file mode 100644
index 0000000..8761544
--- /dev/null
+++ b/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);
diff --git a/admin-web/src/main.ts b/admin-web/src/main.ts
index 02beda0..d7608f4 100644
--- a/admin-web/src/main.ts
+++ b/admin-web/src/main.ts
@@ -1,3 +1,4 @@
+import "./components/webawesome";
import "./styles.css";
import { AdminApp } from "./app";
diff --git a/admin-web/src/pages/audit.ts b/admin-web/src/pages/audit.ts
index 1a53706..1b111a0 100644
--- a/admin-web/src/pages/audit.ts
+++ b/admin-web/src/pages/audit.ts
@@ -35,7 +35,7 @@ export async function renderAudit(container: HTMLElement): Promise {
${
page.nextCursor
- ? ''
+ ? ''
: ""
}
`
diff --git a/admin-web/src/pages/auth.ts b/admin-web/src/pages/auth.ts
index c4aa03f..5e169f1 100644
--- a/admin-web/src/pages/auth.ts
+++ b/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(