From ffe9132f7d6fdae05ace38cb281828fac5a12bc4 Mon Sep 17 00:00:00 2001 From: Yaojia Wang Date: Mon, 29 Jun 2026 16:52:43 +0200 Subject: [PATCH] =?UTF-8?q?fix(web):=20=E5=A4=A7=E7=BA=B2=E9=94=99?= =?UTF-8?q?=E8=AF=AF=E9=80=8F=E4=BC=A0=20FriendlyError,=20=E4=B8=8D?= =?UTF-8?q?=E5=86=8D=E5=90=91=E7=94=A8=E6=88=B7=E6=9A=B4=E9=9C=B2=E5=86=85?= =?UTF-8?q?=E9=83=A8=20code?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/components/outline/OutlineEditor.tsx | 13 +++++---- apps/web/lib/outline/useOutline.test.ts | 28 +++++++++++++++---- apps/web/lib/outline/useOutline.ts | 19 +++++++------ 3 files changed, 40 insertions(+), 20 deletions(-) diff --git a/apps/web/components/outline/OutlineEditor.tsx b/apps/web/components/outline/OutlineEditor.tsx index dce02a4..28d36d9 100644 --- a/apps/web/components/outline/OutlineEditor.tsx +++ b/apps/web/components/outline/OutlineEditor.tsx @@ -8,6 +8,7 @@ import { Button } from "@/components/ui/Button"; import { EmptyState } from "@/components/ui/EmptyState"; import { PageHeader } from "@/components/ui/PageHeader"; import { Select } from "@/components/ui/Select"; +import { StatusNote } from "@/components/ui/StatusNote"; import { TextInput } from "@/components/ui/TextInput"; import type { OutlineChapterView, ProjectResponse } from "@/lib/api/types"; import { @@ -111,20 +112,20 @@ export function OutlineEditor({ /> {error ? ( -

- 大纲生成失败（{error.code}）：{error.message} - {error.code === "LLM_UNAVAILABLE" ? ( + + {error.text} + {error.actionHref ? ( <> {" "} - 去设置提供商 + {error.actionLabel} ) : null} -

+ ) : null}
diff --git a/apps/web/lib/outline/useOutline.test.ts b/apps/web/lib/outline/useOutline.test.ts index 1a02bad..2b4f0f3 100644 --- a/apps/web/lib/outline/useOutline.test.ts +++ b/apps/web/lib/outline/useOutline.test.ts @@ -61,7 +61,7 @@ describe("useOutline", () => { expect(result.current.chapters).toEqual([]); }); - it("后端返回业务错误：status=error 并 surface 友好文案", async () => { + it("后端返回业务错误：透传 friendly 文案 + 跳转动作（不再固定 OUTLINE_FAILED）", async () => { post.mockResolvedValue({ data: null, error: { error: { code: "LLM_UNAVAILABLE" } }, @@ -72,18 +72,36 @@ describe("useOutline", () => { }); expect(result.current.status).toBe("error"); - expect(result.current.error?.code).toBe("OUTLINE_FAILED"); - expect(result.current.error?.message).toContain("provider"); + // LLM_UNAVAILABLE → 透传 provider 文案 + 「去设置提供商」链接。 + expect(result.current.error?.text).toContain("provider"); + expect(result.current.error?.actionHref).toBe("/settings/providers"); + expect(result.current.error?.actionLabel).toBe("去设置提供商"); expect(toast).toHaveBeenCalledWith(expect.any(String), "error"); }); - it("data 为空且无 error 也走错误分支", async () => { + it("校验错误（422 detail 信封）：透传 VALIDATION 文案且无跳转动作", async () => { + post.mockResolvedValue({ + data: null, + error: { detail: [{ msg: "字段缺失" }] }, + }); + const { result } = renderHook(() => useOutline([])); + await act(async () => { + await result.current.generate("p1", 1); + }); + expect(result.current.status).toBe("error"); + expect(result.current.error?.text).toBeTruthy(); + expect(result.current.error?.actionHref).toBeUndefined(); + expect(result.current.error?.actionLabel).toBeUndefined(); + }); + + it("data 为空且无 error 也走错误分支（兜底文案、无跳转）", async () => { post.mockResolvedValue({ data: null, error: null }); const { result } = renderHook(() => useOutline([])); await act(async () => { await result.current.generate("p1", 1); }); expect(result.current.status).toBe("error"); - expect(result.current.error?.code).toBe("OUTLINE_FAILED"); + expect(result.current.error?.text).toBeTruthy(); + expect(result.current.error?.actionHref).toBeUndefined(); }); }); diff --git a/apps/web/lib/outline/useOutline.ts b/apps/web/lib/outline/useOutline.ts index 1950d83..592fb26 100644 --- a/apps/web/lib/outline/useOutline.ts +++ b/apps/web/lib/outline/useOutline.ts @@ -4,20 +4,20 @@ import { useCallback, useState } from "react"; import { api } from "@/lib/api/client"; import { useToast } from "@/components/Toast"; -import { friendlyFromApiError } from "@/lib/errors/messages"; +import { + friendlyFromApiError, + type FriendlyError, +} from "@/lib/errors/messages"; import type { OutlineChapterView } from "@/lib/api/types"; export type OutlineStatus = "idle" | "generating" | "ready" | "error"; -export interface OutlineError { - code: string; - message: string; -} - export interface UseOutline { chapters: OutlineChapterView[]; status: OutlineStatus; - error: OutlineError | null; + // 直接透传 friendlyFromApiError 的结果（含 text + 可选 actionHref/actionLabel）， + // 不再拍平成固定的内部 code，UI 据 actionHref 是否存在决定显示跳转链接。 + error: FriendlyError | null; generate: (projectId: string, volume: number) => Promise; } @@ -28,7 +28,7 @@ export function useOutline(initial: OutlineChapterView[]): UseOutline { const [status, setStatus] = useState( initial.length > 0 ? "ready" : "idle", ); - const [error, setError] = useState(null); + const [error, setError] = useState(null); const toast = useToast(); const generate = useCallback( @@ -45,8 +45,9 @@ export function useOutline(initial: OutlineChapterView[]): UseOutline { if (apiError || !data) { // surface 真实错因（如 LLM_UNAVAILABLE→去设置 provider；422→校验文案）， // 而非永远的通用「大纲生成失败」（QA #2：原 env.error.code 漏读 422 的 detail 信封）。 + // 直接透传 friendly（保留 actionHref/actionLabel），不再拍平成固定 OUTLINE_FAILED。 const friendly = friendlyFromApiError(apiError); - setError({ code: "OUTLINE_FAILED", message: friendly.text }); + setError(friendly); setStatus("error"); toast(friendly.text, "error"); return;