feat(web): W3-1 login, session shell, home dashboard, settings, engine panel and audit pages

- /login: setup/login/TOTP states driven by server error codes, fixed-height error slot - console layout: GET /auth/session gate, redirect to /login, account popover (change password, logout) - home: six dashboard sections with SSE-driven refresh, automation switch and read-only reconcile toggle - settings tabs: downloaders, media servers, library roots, path mappings, site credentials, API keys (one-time plaintext), Pi upstream, cache/organize/retention/budget, automation - engine: runs list (status/name filters, cursor paging, stats tiles), run detail (step timeline, json payloads, signals, cancel) - audit: filterable list with detail sheet - vite: allow repo root in server.fs so deno-installed deps under node_modules/.deno load in dev Co-Authored-By: Claude Opus 5.5 <[email protected]>
2026-09-27 20:40:41 +08:00
1 parent ef73abe3df
commit 0dec0854df
@@ -0,0 +1,37 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { ApiKey, ApiKeyCreate, ApiKeyCreated, ApiKeyUpdate, CursorPage } from "@umt/contracts";
+import { apiData } from "~/lib/api.ts";
+import { qk } from "~/lib/query-keys.ts";
+
+export function useApiKeys() {
+  return useQuery({
+    queryKey: qk.list("api-keys"),
+    queryFn: ({ signal }) => apiData<CursorPage<ApiKey>>("/api-keys", { params: { limit: 200 }, signal }),
+  });
+}
+
+/** 创建:明文只在返回值里出现一次 */
+export function useCreateApiKey() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (body: ApiKeyCreate) => apiData<ApiKeyCreated>("/api-keys", { method: "POST", body }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: qk.all("api-keys") }),
+  });
+}
+
+export function useUpdateApiKey() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, body }: { id: string; body: ApiKeyUpdate }) =>
+      apiData<ApiKey>("/api-keys/{id}", { method: "PATCH", pathParams: { id }, body }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: qk.all("api-keys") }),
+  });
+}
+
+export function useRevokeApiKey() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (id: string) => apiData<unknown>("/api-keys/{id}", { method: "DELETE", pathParams: { id } }),
+    onSuccess: () => qc.invalidateQueries({ queryKey: qk.all("api-keys") }),
+  });
+}
@@ -0,0 +1,25 @@
+import { useInfiniteQuery } from "@tanstack/react-query";
+import type { AuditEvent, CursorPage } from "@umt/contracts";
+import { apiData } from "~/lib/api.ts";
+import { qk } from "~/lib/query-keys.ts";
+
+export type AuditFilters = {
+  actorType?: string;
+  action?: string;
+  targetType?: string;
+  targetId?: string;
+};
+
+/** 审计事件(新→旧),游标"加载更多" */
+export function useAuditEvents(filters: AuditFilters) {
+  return useInfiniteQuery({
+    queryKey: qk.list("audit", filters),
+    initialPageParam: undefined as string | undefined,
+    queryFn: ({ pageParam, signal }) =>
+      apiData<CursorPage<AuditEvent>>("/audit-events", {
+        params: { ...filters, cursor: pageParam, limit: 50 },
+        signal,
+      }),
+    getNextPageParam: (last) => last.nextCursor ?? undefined,
+  });
+}
@@ -0,0 +1,69 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type {
+  AdminSetupRequest,
+  LoginRequest,
+  LoginResult,
+  PasswordChangeRequest,
+  PasswordChangeResult,
+  SessionInfo,
+  TotpAction,
+  TotpActionResult,
+  TotpStatus,
+} from "@umt/contracts";
+import { ApiRequestError, apiData, apiFetch } from "~/lib/api.ts";
+import { qk } from "~/lib/query-keys.ts";
+
+/** 登录态探测(免鉴权,不触发 401 跳转) */
+export function useSession() {
+  return useQuery({
+    queryKey: qk.session,
+    queryFn: ({ signal }) => apiData<SessionInfo>("/auth/session", { signal, noAuthRedirect: true }),
+    staleTime: 60_000,
+    retry: 1,
+  });
+}
+
+/** 登录/初始化类请求:返回错误码(由调用方按码分流文案),不跳转 */
+async function authPost<T>(path: string, body: unknown): Promise<T> {
+  const r = await apiFetch<T>(path, { method: "POST", body, noAuthRedirect: true });
+  if (!r.ok) throw new ApiRequestError(r.error.code, r.error.message);
+  return r.data;
+}
+
+export const login = (body: LoginRequest) => authPost<LoginResult>("/auth/login", body);
+export const setupAdmin = (body: AdminSetupRequest) => authPost<SessionInfo>("/auth/setup", body);
+
+export function useLogout() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: () => authPost<unknown>("/auth/logout", {}),
+    onSettled: () => {
+      qc.clear();
+    },
+  });
+}
+
+export function useChangePassword() {
+  return useMutation({
+    mutationFn: (body: PasswordChangeRequest) =>
+      apiData<PasswordChangeResult>("/auth/password", { method: "POST", body }),
+  });
+}
+
+export function useTotpStatus(enabled = true) {
+  return useQuery({
+    queryKey: qk.sub("auth", "totp"),
+    queryFn: ({ signal }) => apiData<TotpStatus>("/auth/totp", { signal }),
+    enabled,
+  });
+}
+
+export function useTotpAction() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (body: TotpAction) => apiData<TotpActionResult>("/auth/totp", { method: "POST", body }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: qk.all("auth") });
+    },
+  });
+}
@@ -0,0 +1,13 @@
+import { useQuery } from "@tanstack/react-query";
+import type { Dashboard } from "@umt/contracts";
+import { apiData } from "~/lib/api.ts";
+import { qk } from "~/lib/query-keys.ts";
+
+/** 首页聚合;SSE 事件触发 invalidate,另有 60 秒兜底轮询 */
+export function useDashboard() {
+  return useQuery({
+    queryKey: qk.dashboard,
+    queryFn: ({ signal }) => apiData<Dashboard>("/dashboard", { signal }),
+    refetchInterval: 60_000,
+  });
+}
@@ -0,0 +1,50 @@
+import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type { CursorPage, EngineRun, EngineRunDetail, EngineStats } from "@umt/contracts";
+import { apiData } from "~/lib/api.ts";
+import { qk } from "~/lib/query-keys.ts";
+
+export type EngineRunFilters = { status?: string; workflowName?: string };
+
+/** 终态:不能再 cancel */
+export const ENGINE_TERMINAL = new Set(["completed", "succeeded", "failed", "canceled"]);
+
+export function useEngineRuns(filters: EngineRunFilters) {
+  return useInfiniteQuery({
+    queryKey: qk.list("engine", filters),
+    initialPageParam: undefined as string | undefined,
+    queryFn: ({ pageParam, signal }) =>
+      apiData<CursorPage<EngineRun>>("/engine/runs", { params: { ...filters, cursor: pageParam, limit: 50 }, signal }),
+    getNextPageParam: (last) => last.nextCursor ?? undefined,
+  });
+}
+
+export function useEngineRun(id: string | undefined) {
+  return useQuery({
+    queryKey: qk.detail("engine", id ?? ""),
+    queryFn: ({ signal }) => apiData<EngineRunDetail>("/engine/runs/{id}", { pathParams: { id: id ?? "" }, signal }),
+    enabled: !!id,
+    // 非终态每 5 秒兜底刷新(SSE 事件驱动是主路径)
+    refetchInterval: (q) => (q.state.data && !ENGINE_TERMINAL.has(q.state.data.status) ? 5_000 : false),
+  });
+}
+
+export function useEngineStats() {
+  return useQuery({
+    queryKey: qk.engineStats,
+    queryFn: ({ signal }) => apiData<EngineStats>("/engine/stats", { signal }),
+    refetchInterval: 30_000,
+  });
+}
+
+export function useCancelEngineRun() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ id, reason }: { id: string; reason?: string }) =>
+      apiData<{ canceled: boolean }>("/engine/runs/{id}/cancel", {
+        method: "POST",
+        pathParams: { id },
+        body: { reason },
+      }),
+    onSettled: () => qc.invalidateQueries({ queryKey: qk.all("engine") }),
+  });
+}
@@ -0,0 +1,120 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import type {
+  CursorPage,
+  DownloaderInstance,
+  DownloaderInstanceCreate,
+  DownloaderInstanceUpdate,
+  InstanceTestResult,
+  LibraryRoot,
+  LibraryRootCreate,
+  LibraryRootUpdate,
+  MediaServerInstance,
+  MediaServerInstanceCreate,
+  MediaServerInstanceUpdate,
+  PathMapping,
+  PathMappingCreate,
+  PathMappingUpdate,
+  Site,
+  SiteAccount,
+  SiteCredentialsPut,
+  SiteCredentialsResult,
+} from "@umt/contracts";
+import { apiData } from "~/lib/api.ts";
+import { type QueryArea, qk } from "~/lib/query-keys.ts";
+
+/** 实例类资源的标准 CRUD 钩子(列表取前 200 条,首版实例数量很少) */
+function crudHooks<Row extends { id: string }, Create, Update>(area: QueryArea, base: string) {
+  return {
+    useList: () =>
+      useQuery({
+        queryKey: qk.list(area),
+        queryFn: ({ signal }) => apiData<CursorPage<Row>>(base, { params: { limit: 200 }, signal }),
+      }),
+    useCreate: () => {
+      const qc = useQueryClient();
+      return useMutation({
+        mutationFn: (body: Create) => apiData<Row>(base, { method: "POST", body }),
+        onSuccess: () => qc.invalidateQueries({ queryKey: qk.all(area) }),
+      });
+    },
+    useUpdate: () => {
+      const qc = useQueryClient();
+      return useMutation({
+        mutationFn: ({ id, body }: { id: string; body: Update }) =>
+          apiData<Row>(`${base}/{id}`, { method: "PATCH", pathParams: { id }, body }),
+        onSuccess: () => qc.invalidateQueries({ queryKey: qk.all(area) }),
+      });
+    },
+    useRemove: () => {
+      const qc = useQueryClient();
+      return useMutation({
+        mutationFn: (id: string) => apiData<unknown>(`${base}/{id}`, { method: "DELETE", pathParams: { id } }),
+        onSuccess: () => qc.invalidateQueries({ queryKey: qk.all(area) }),
+      });
+    },
+  };
+}
+
+/** 连接测试 / 校验类动作(结果写回 health,完成后刷新列表) */
+function actionHook<R>(area: QueryArea, path: string) {
+  return () => {
+    const qc = useQueryClient();
+    return useMutation({
+      mutationFn: (id: string) => apiData<R>(path, { method: "POST", pathParams: { id }, body: {} }),
+      onSettled: () => qc.invalidateQueries({ queryKey: qk.all(area) }),
+    });
+  };
+}
+
+export const downloaders = {
+  ...crudHooks<DownloaderInstance, DownloaderInstanceCreate, DownloaderInstanceUpdate>(
+    "downloader-instances",
+    "/downloader-instances",
+  ),
+  useTest: actionHook<InstanceTestResult>("downloader-instances", "/downloader-instances/{id}/test"),
+};
+
+export const mediaServers = {
+  ...crudHooks<MediaServerInstance, MediaServerInstanceCreate, MediaServerInstanceUpdate>(
+    "media-server-instances",
+    "/media-server-instances",
+  ),
+  useTest: actionHook<InstanceTestResult>("media-server-instances", "/media-server-instances/{id}/test"),
+};
+
+export const libraryRoots = {
+  ...crudHooks<LibraryRoot, LibraryRootCreate, LibraryRootUpdate>("library-roots", "/library-roots"),
+  useTest: actionHook<InstanceTestResult>("library-roots", "/library-roots/{id}/test"),
+};
+
+export const pathMappings = {
+  ...crudHooks<PathMapping, PathMappingCreate, PathMappingUpdate>("path-mappings", "/path-mappings"),
+  useVerify: actionHook<PathMapping>("path-mappings", "/path-mappings/{id}/verify"),
+};
+
+// ─── 站点账号凭证(设置页录入;站点本身由站点工作台管理) ───
+
+export function useSiteOptions() {
+  return useQuery({
+    queryKey: qk.list("sites", { limit: 200 }),
+    queryFn: ({ signal }) => apiData<CursorPage<Site>>("/sites", { params: { limit: 200 }, signal }),
+  });
+}
+
+export function useSiteAccounts() {
+  return useQuery({
+    queryKey: qk.list("site-accounts"),
+    queryFn: ({ signal }) => apiData<CursorPage<SiteAccount>>("/site-accounts", { params: { limit: 200 }, signal }),
+  });
+}
+
+export function usePutSiteCredentials() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: ({ siteId, body }: { siteId: string; body: SiteCredentialsPut }) =>
+      apiData<SiteCredentialsResult>("/sites/{id}/credentials", { method: "PUT", pathParams: { id: siteId }, body }),
+    onSuccess: () => {
+      qc.invalidateQueries({ queryKey: qk.all("site-accounts") });
+    },
+  });
+}
@@ -0,0 +1,32 @@
+import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
+import { type GlobalSettings, type GlobalSettingsUpdate, mergeSettings } from "@umt/contracts";
+import { apiData } from "~/lib/api.ts";
+import { qk } from "~/lib/query-keys.ts";
+
+export function useSettings() {
+  return useQuery({
+    queryKey: qk.settings,
+    queryFn: ({ signal }) => apiData<GlobalSettings>("/settings", { signal }),
+  });
+}
+
+/** PATCH /settings,乐观更新(失败回滚) */
+export function useUpdateSettings() {
+  const qc = useQueryClient();
+  return useMutation({
+    mutationFn: (patch: GlobalSettingsUpdate) => apiData<GlobalSettings>("/settings", { method: "PATCH", body: patch }),
+    onMutate: async (patch) => {
+      await qc.cancelQueries({ queryKey: qk.settings });
+      const prev = qc.getQueryData<GlobalSettings>(qk.settings);
+      if (prev) qc.setQueryData(qk.settings, mergeSettings(prev, patch));
+      return { prev };
+    },
+    onError: (_e, _p, ctx) => {
+      if (ctx?.prev) qc.setQueryData(qk.settings, ctx.prev);
+    },
+    onSuccess: (data) => {
+      qc.setQueryData(qk.settings, data);
+      qc.invalidateQueries({ queryKey: qk.dashboard });
+    },
+  });
+}