feat(admin-portal): 完整实现 admin-portal 管理端微前端

包含 src 全部实现、Dockerfile、配置文件等

apps/admin-portal/src/components/notification-panel.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import { type ReactNode } from "react";
+import { useWebSocket } from "@/hooks/use-websocket";
+import { useToast } from "@/providers/toast-provider";
+import { Badge } from "./ui";
+import { t } from "@/lib/i18n";
+import type { WsNotification } from "@/types/view-models";
+
+const severityColor: Record<WsNotification["severity"], string> = {
+  info: "var(--color-accent)",
+  warning: "var(--color-warning)",
+  error: "var(--color-danger)",
+};
+
+const typeLabel: Record<WsNotification["type"], string> = {
+  audit_alert: t("admin.notification.auditAlert"),
+  abnormal_login: t("admin.notification.abnormalLogin"),
+  system_error: t("admin.notification.systemError"),
+  info: "系统通知",
+};
+
+export function NotificationPanel(): ReactNode {
+  const { notifications, connected, dismiss, clear } = useWebSocket(20);
+  const { show } = useToast();
+
+  return (
+    <div
+      style={{
+        position: "fixed",
+        top: 16,
+        right: 16,
+        width: 320,
+        maxHeight: "60vh",
+        overflowY: "auto",
+        background: "var(--bg-paper)",
+        border: "1px solid var(--color-rule)",
+        borderRadius: 8,
+        boxShadow: "0 4px 16px rgba(0,0,0,0.08)",
+        zIndex: 100,
+      }}
+      role="region"
+      aria-label="通知中心"
+    >
+      <div
+        style={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: "10px 16px",
+          borderBottom: "1px solid var(--color-rule)",
+        }}
+      >
+        <h3
+          style={{
+            fontFamily: "var(--font-serif)",
+            fontSize: 14,
+            color: "var(--color-ink)",
+            margin: 0,
+          }}
+        >
+          {t("admin.notification.title")}
+        </h3>
+        <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
+          <Badge status={connected ? "healthy" : "down"} />
+          {notifications.length > 0 && (
+            <button
+              onClick={clear}
+              style={{
+                background: "none",
+                border: "none",
+                color: "var(--color-ink-muted)",
+                fontSize: 11,
+                cursor: "pointer",
+              }}
+            >
+              清空
+            </button>
+          )}
+        </div>
+      </div>
+
+      <ul style={{ listStyle: "none", padding: 0, margin: 0 }}>
+        {notifications.length === 0 && (
+          <li
+            style={{
+              padding: "24px 16px",
+              textAlign: "center",
+              color: "var(--color-ink-muted)",
+              fontSize: 12,
+            }}
+          >
+            暂无通知
+          </li>
+        )}
+        {notifications.map((notif) => (
+          <li
+            key={notif.id}
+            style={{
+              padding: "10px 16px",
+              borderBottom: "1px solid var(--color-rule)",
+              borderLeft: `3px solid ${severityColor[notif.severity]}`,
+            }}
+          >
+            <button
+              type="button"
+              style={{
+                background: "none",
+                border: "none",
+                cursor: "pointer",
+                padding: 0,
+                width: "100%",
+                textAlign: "left",
+              }}
+              onClick={() => {
+                show(
+                  notif.severity === "error"
+                    ? "error"
+                    : notif.severity === "warning"
+                      ? "warning"
+                      : "info",
+                  notif.title,
+                  notif.message,
+                );
+                dismiss(notif.id);
+              }}
+              aria-label={`${typeLabel[notif.type]}: ${notif.message}`}
+            >
+              <div
+                style={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "baseline",
+                }}
+              >
+                <span
+                  style={{
+                    fontSize: 13,
+                    color: "var(--color-ink)",
+                    fontWeight: 500,
+                  }}
+                >
+                  {typeLabel[notif.type]}
+                </span>
+                <span style={{ fontSize: 10, color: "var(--color-ink-muted)" }}>
+                  {new Date(notif.timestamp).toLocaleTimeString("zh-CN")}
+                </span>
+              </div>
+              <p
+                style={{
+                  fontSize: 12,
+                  color: "var(--color-ink-muted)",
+                  margin: "4px 0 0 0",
+                }}
+              >
+                {notif.message}
+              </p>
+            </button>
+          </li>
+        ))}
+      </ul>
+    </div>
+  );
+}