From 69f3c2a29b1df9d96abda08714dc3eaae83b00ff Mon Sep 17 00:00:00 2001
From: Yaojia Wang <yaojia.wang@billo.life>
Date: Mon, 29 Jun 2026 16:52:43 +0200
Subject: [PATCH] =?UTF-8?q?fix(web):=20=E6=8A=80=E8=83=BD=E9=A1=B5=20bg-pa?=
 =?UTF-8?q?per/=E5=88=A0=E9=99=A4=E8=99=9A=E6=9E=84=E5=88=9B=E4=BD=9C?=
 =?UTF-8?q?=E4=B8=AD=E5=BE=BD=E6=A0=87/=E8=AE=BE=E7=BD=AE=E9=A1=B5=20try-f?=
 =?UTF-8?q?inally/=E6=96=87=E9=A3=8E=E9=A1=B5=E7=A7=BB=E5=8A=A8=E7=AB=AF?=
 =?UTF-8?q?=E5=AE=9A=E9=AB=98=20grid?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 apps/web/components/ProjectCard.tsx           |  8 +-
 .../components/settings/ProvidersSettings.tsx | 88 +++++++++++--------
 apps/web/components/skills/SkillsPage.tsx     |  6 +-
 apps/web/components/style/StylePage.tsx       |  6 +-
 4 files changed, 60 insertions(+), 48 deletions(-)

diff --git a/apps/web/components/ProjectCard.tsx b/apps/web/components/ProjectCard.tsx
index 8f03b4f..1fa3fe7 100644
--- a/apps/web/components/ProjectCard.tsx
+++ b/apps/web/components/ProjectCard.tsx
@@ -1,5 +1,5 @@
 import Link from "next/link";
-import { BookOpen, ChevronRight, Clock3, Sparkles } from "lucide-react";
+import { BookOpen, ChevronRight, Clock3 } from "lucide-react";
 
 import { Badge } from "@/components/ui/Badge";
 import type { ProjectResponse } from "@/lib/api/types";
@@ -67,12 +67,8 @@ export function ProjectCard({ project, compact = false }: ProjectCardProps) {
           </h2>
           <div className="mt-2 flex flex-wrap gap-2">
             {project.genre ? <Badge>{project.genre}</Badge> : null}
-            <Badge variant="accent">
-              <Sparkles className="h-3 w-3" aria-hidden="true" />
-              创作中
-            </Badge>
             {pendingCount > 0 ? (
-              <Badge variant="warning">{pendingCount} 待审稿</Badge>
+              <Badge variant="warning">{pendingCount} 待审</Badge>
             ) : null}
           </div>
         </div>
diff --git a/apps/web/components/settings/ProvidersSettings.tsx b/apps/web/components/settings/ProvidersSettings.tsx
index 00996fb..4c3a56f 100644
--- a/apps/web/components/settings/ProvidersSettings.tsx
+++ b/apps/web/components/settings/ProvidersSettings.tsx
@@ -21,6 +21,7 @@ import { Select } from "@/components/ui/Select";
 import { StatusNote } from "@/components/ui/StatusNote";
 import { TextInput } from "@/components/ui/TextInput";
 import { api } from "@/lib/api/client";
+import { cardClass } from "@/lib/ui/variants";
 import {
   API_KEY_PROVIDERS,
   KNOWN_PROVIDERS,
@@ -91,17 +92,22 @@ export function ProvidersSettings({
 
   const saveRouting = async (): Promise<void> => {
     setSavingRouting(true);
-    const { data, error } = await api.PUT("/settings/providers", {
-      body: { tier_routing: draftsToRoutingInput(routing) },
-    });
-    setSavingRouting(false);
-    if (error || !data) {
-      toast("保存档位路由失败，请重试", "error");
-      return;
+    try {
+      const { data, error } = await api.PUT("/settings/providers", {
+        body: { tier_routing: draftsToRoutingInput(routing) },
+      });
+      if (error || !data) {
+        toast("保存档位路由失败，请重试", "error");
+        return;
+      }
+      setProviders(data.providers ?? []);
+      setRouting(toRoutingDrafts(data.tier_routing ?? []));
+      toast("档位路由已保存", "success");
+    } catch {
+      toast("保存档位路由失败，请检查后端连接", "error");
+    } finally {
+      setSavingRouting(false);
     }
-    setProviders(data.providers ?? []);
-    setRouting(toRoutingDrafts(data.tier_routing ?? []));
-    toast("档位路由已保存", "success");
   };
 
   const saveCredential = async (providerId: string): Promise<void> => {
@@ -111,43 +117,53 @@ export function ProvidersSettings({
       return;
     }
     setSavingId(providerId);
-    const { data, error } = await api.PUT("/settings/providers", {
-      body: { credentials: [{ provider: providerId, api_key: apiKey }] },
-    });
-    setSavingId(null);
-    if (error || !data) {
-      toast("保存凭据失败，请重试", "error");
-      return;
+    try {
+      const { data, error } = await api.PUT("/settings/providers", {
+        body: { credentials: [{ provider: providerId, api_key: apiKey }] },
+      });
+      if (error || !data) {
+        toast("保存凭据失败，请重试", "error");
+        return;
+      }
+      setProviders(data.providers ?? []);
+      setDrafts((prev) => ({ ...prev, [providerId]: "" }));
+      toast("凭据已保存", "success");
+    } catch {
+      toast("保存凭据失败，请检查后端连接", "error");
+    } finally {
+      setSavingId(null);
     }
-    setProviders(data.providers ?? []);
-    setDrafts((prev) => ({ ...prev, [providerId]: "" }));
-    toast("凭据已保存", "success");
   };
 
   const testConnection = async (providerId: string): Promise<void> => {
     setTestingId(providerId);
-    const { data, error } = await api.POST("/settings/providers/test", {
-      body: { provider: providerId },
-    });
-    setTestingId(null);
-    if (error || !data) {
-      toast("测试连接失败", "error");
-      return;
+    try {
+      const { data, error } = await api.POST("/settings/providers/test", {
+        body: { provider: providerId },
+      });
+      if (error || !data) {
+        toast("测试连接失败", "error");
+        return;
+      }
+      setResults((prev) => ({
+        ...prev,
+        [providerId]: { ok: data.ok, capabilities: data.capabilities },
+      }));
+      toast(
+        data.ok ? "连接成功" : "连接未通过",
+        data.ok ? "success" : "error",
+      );
+    } catch {
+      toast("测试连接失败，请检查后端连接", "error");
+    } finally {
+      setTestingId(null);
     }
-    setResults((prev) => ({
-      ...prev,
-      [providerId]: { ok: data.ok, capabilities: data.capabilities },
-    }));
-    toast(data.ok ? "连接成功" : "连接未通过", data.ok ? "success" : "error");
   };
 
   return (
     <div className="grid gap-6 lg:grid-cols-[12rem_1fr]">
       <aside className="hidden lg:block">
-        <nav
-          aria-label="设置分组"
-          className="sticky top-4 rounded border border-line bg-panel p-2"
-        >
+        <nav aria-label="设置分组" className={cardClass("sticky top-4 p-2")}>
           <SettingsNavButton
             active={activeSection === "routing"}
             icon={<Route className="h-4 w-4" aria-hidden="true" />}
diff --git a/apps/web/components/skills/SkillsPage.tsx b/apps/web/components/skills/SkillsPage.tsx
index 6873637..f2a2294 100644
--- a/apps/web/components/skills/SkillsPage.tsx
+++ b/apps/web/components/skills/SkillsPage.tsx
@@ -46,19 +46,19 @@ export function SkillsPage({ project, skills }: SkillsPageProps) {
                 description="按来源、档位和表权限汇总当前可用技能。"
               />
               <dl className="mt-4 grid grid-cols-3 gap-2 text-center">
-                <div className="rounded border border-line bg-paper p-3">
+                <div className="rounded border border-line bg-bg p-3">
                   <dt className="text-xs text-ink-soft">总数</dt>
                   <dd className="mt-1 font-serif text-2xl text-ink">
                     {summary.total}
                   </dd>
                 </div>
-                <div className="rounded border border-line bg-paper p-3">
+                <div className="rounded border border-line bg-bg p-3">
                   <dt className="text-xs text-ink-soft">可写</dt>
                   <dd className="mt-1 font-serif text-2xl text-ink">
                     {summary.writableCount}
                   </dd>
                 </div>
-                <div className="rounded border border-line bg-paper p-3">
+                <div className="rounded border border-line bg-bg p-3">
                   <dt className="text-xs text-ink-soft">只读</dt>
                   <dd className="mt-1 font-serif text-2xl text-ink">
                     {summary.readonlyCount}
diff --git a/apps/web/components/style/StylePage.tsx b/apps/web/components/style/StylePage.tsx
index c08c368..d9cc986 100644
--- a/apps/web/components/style/StylePage.tsx
+++ b/apps/web/components/style/StylePage.tsx
@@ -27,8 +27,8 @@ export function StylePage({ project, initialFingerprint }: StylePageProps) {
       projectId={project.id}
       activeNav="style"
     >
-      <div className="grid h-[calc(100vh-var(--chrome,4rem))] grid-cols-1 lg:grid-cols-[28rem_1fr]">
-        <section className="flex flex-col overflow-auto border-r border-line bg-panel px-6 py-6">
+      <div className="flex min-h-[calc(100vh-var(--chrome,4rem))] flex-col lg:grid lg:h-[calc(100vh-var(--chrome,4rem))] lg:min-h-0 lg:grid-cols-[28rem_1fr]">
+        <section className="flex flex-col border-line bg-panel px-6 py-6 lg:overflow-auto lg:border-r">
           <h1 className="mb-3 font-serif text-lg text-ink">学习文风</h1>
           <StyleUpload
             busy={learn.busy}
@@ -39,7 +39,7 @@ export function StylePage({ project, initialFingerprint }: StylePageProps) {
           />
         </section>
 
-        <section className="overflow-auto bg-bg px-6 py-6">
+        <section className="bg-bg px-6 py-6 lg:overflow-auto">
           <FingerprintView fingerprint={learn.fingerprint} />
         </section>
       </div>