feat(web): polish settings page chrome

Author: pallyoung

packages/web/src/features/settings/components/settings-page.test.tsx

@@ -938,7 +938,7 @@ describe("SettingsPage", () => {
     expect(routerMocks.navigate).toHaveBeenCalledWith("/");
   });
 
-  it("renders a dedicated desktop header with the active section pill", async () => {
+  it("renders a compact desktop header with only the settings title", async () => {
     const sendCommand = vi.fn().mockResolvedValue({});
     const store = createConnectedStore(sendCommand);
 
@@ -948,16 +948,18 @@ describe("SettingsPage", () => {
     const mobileHeader = document.querySelector(
       ".settings-header .mobile-page-header"
     ) as HTMLElement | null;
-    const sectionPill = document.querySelector(
-      ".settings-header__section-pill"
-    ) as HTMLElement | null;
+    const headerCopy = document.querySelector(".settings-header__copy") as HTMLElement | null;
 
     expect(desktopHeader).not.toBeNull();
     expect(mobileHeader).toBeNull();
     expect(screen.getByRole("heading", { name: "设置" })).toBeInTheDocument();
-    expect(within(desktopHeader as HTMLElement).getByText("Coder Studio")).toBeInTheDocument();
-    expect(sectionPill).not.toBeNull();
-    expect(within(sectionPill as HTMLElement).getByText("通用")).toBeInTheDocument();
+    expect(
+      within(desktopHeader as HTMLElement).getByRole("button", { name: "返回" })
+    ).toBeInTheDocument();
+    expect(headerCopy).not.toBeNull();
+    expect(within(headerCopy as HTMLElement).queryByText("Coder Studio")).toBeNull();
+    expect(within(headerCopy as HTMLElement).queryByText("设置已自动保存")).toBeNull();
+    expect(document.querySelector(".settings-header__section-pill")).toBeNull();
   });
 
   it("renders a mobile category list and returns from detail content to the settings root", async () => {

packages/web/src/features/settings/components/settings-page.tsx

@@ -550,19 +550,7 @@ export function SettingsPage() {
               <span>{t("action.back")}</span>
             </button>
             <div className="settings-header__copy">
-              <div className="page-kicker settings-header__kicker">{t("app.name")}</div>
               <h1 className="page-title settings-header__title">{t("settings.title")}</h1>
-              <p className="settings-header__summary meta-text">
-                <span>{t(activeSectionMeta.labelKey)}</span>
-                <span className="settings-header__summary-separator" aria-hidden="true">
-                  •
-                </span>
-                <span>{t("settings.autosave_hint")}</span>
-              </p>
-            </div>
-            <div className="settings-header__section-pill">
-              <ThemedIcon semantic={activeSectionMeta.iconSemantic} size={14} />
-              <span>{t(activeSectionMeta.labelKey)}</span>
             </div>
           </div>
         )}

packages/web/src/styles/components.css

@@ -713,63 +713,39 @@
 }
 
 .settings-header {
-  padding: var(--sp-2) var(--sp-4);
+  padding: var(--sp-1) var(--sp-4);
   background: var(--bg-surface);
   border-bottom: 1px solid var(--border);
 }
 
 .settings-header__desktop {
-  width: min(100%, calc(240px + var(--desktop-content-max-width) + (var(--sp-6) * 2)));
-  margin: 0 auto;
+  width: 100%;
+  margin: 0;
   display: flex;
   align-items: center;
-  gap: var(--sp-4);
+  justify-content: flex-start;
+  gap: var(--sp-3);
 }
 
 .settings-header__back {
   flex-shrink: 0;
+  min-height: 30px;
+  font-size: var(--text-xs);
 }
 
 .settings-header__copy {
   min-width: 0;
   display: flex;
-  flex: 1;
+  flex: 0 1 auto;
   flex-direction: column;
-  gap: var(--sp-1);
+  justify-content: flex-start;
+  gap: 0;
 }
 
-.settings-header__kicker,
-.settings-header__title,
-.settings-header__summary {
+.settings-header__title {
   margin: 0;
-}
-
-.settings-header__summary {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--sp-2);
-  color: var(--text-secondary);
-}
-
-.settings-header__summary-separator {
-  color: var(--text-tertiary);
-}
-
-.settings-header__section-pill {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--sp-2);
-  flex-shrink: 0;
-  margin-left: auto;
-  padding: var(--sp-2) var(--sp-3);
-  background: var(--bg-panel);
-  border: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
-  border-radius: var(--radius-full);
-  color: var(--text-primary);
-  font-size: var(--text-sm);
-  font-weight: var(--font-medium);
-  box-shadow: var(--shadow-sm);
+  font-size: 18px;
+  line-height: 1.05;
 }
 
 .settings-body {
@@ -845,6 +821,8 @@
 .settings-content--fill-height {
   display: flex;
   flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .settings-content-surface {

packages/web/src/styles/components.theme.test.ts

@@ -555,11 +555,12 @@ describe("components.css theme-sensitive surfaces", () => {
     const settingsPage = getLastRuleBlock(".settings-page");
     const baseSettingsHeader = getRuleBlocksFrom(stylesheet, ".settings-header")[0];
     const desktopSettingsHeader = getLastRuleBlock(".settings-header__desktop");
-    const desktopSettingsSummary = getLastRuleBlock(".settings-header__summary");
-    const desktopSettingsSectionPill = getLastRuleBlock(".settings-header__section-pill");
+    const desktopSettingsCopy = getLastRuleBlock(".settings-header__copy");
+    const desktopSettingsTitle = getLastRuleBlock(".settings-header__title");
     const settingsBody = getLastRuleBlock(".settings-body");
     const settingsSidebar = getLastRuleBlock(".settings-sidebar");
     const settingsContent = getLastRuleBlock(".settings-content");
+    const settingsContentFillHeight = getLastRuleBlock(".settings-content--fill-height");
     const settingsNavItem = getLastRuleBlock(".settings-nav-item");
     const settingsNavItemHover = getLastRuleBlock(".settings-nav-item:hover");
     const settingsNavItemActive = getLastRuleBlock(".settings-nav-item-active");
@@ -581,16 +582,17 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(settingsPage).toContain("background: var(--bg-page)");
     expect(baseSettingsHeader).toContain("background: var(--bg-surface)");
     expect(baseSettingsHeader).toContain("border-bottom: 1px solid var(--border)");
-    expect(baseSettingsHeader).toContain("padding: var(--sp-2) var(--sp-4)");
-    expect(desktopSettingsHeader).toContain(
-      "width: min(100%, calc(240px + var(--desktop-content-max-width) + (var(--sp-6) * 2)))"
-    );
-    expect(desktopSettingsHeader).toContain("margin: 0 auto");
+    expect(baseSettingsHeader).toContain("padding: var(--sp-1) var(--sp-4)");
+    expect(desktopSettingsHeader).toContain("width: 100%");
+    expect(desktopSettingsHeader).toContain("margin: 0");
     expect(desktopSettingsHeader).toContain("display: flex");
-    expect(desktopSettingsSummary).toContain("color: var(--text-secondary)");
-    expect(desktopSettingsSectionPill).toContain("background: var(--bg-panel)");
-    expect(desktopSettingsSectionPill).toContain("border: 1px solid");
-    expect(desktopSettingsSectionPill).toContain("border-radius: var(--radius-full)");
+    expect(desktopSettingsHeader).toContain("align-items: center");
+    expect(desktopSettingsHeader).toContain("justify-content: flex-start");
+    expect(desktopSettingsCopy).toContain("justify-content: flex-start");
+    expect(desktopSettingsCopy).toContain("flex: 0 1 auto");
+    expect(desktopSettingsCopy).toContain("gap: 0");
+    expect(desktopSettingsTitle).toContain("font-size: 18px");
+    expect(desktopSettingsTitle).toContain("line-height: 1.05");
     expect(settingsBody).toContain("align-items: stretch");
     expect(settingsBody).toContain("background: var(--bg-page)");
     expect(settingsSidebar).toContain("background: var(--bg-panel)");
@@ -600,6 +602,7 @@ describe("components.css theme-sensitive surfaces", () => {
     expect(settingsContent).toContain("justify-content: center");
     expect(settingsContent).toContain("padding: var(--sp-6)");
     expect(settingsContent).toContain("background: var(--bg-page)");
+    expect(settingsContentFillHeight).toContain("justify-content: center");
     expect(settingsNavItem).toContain("min-height: 40px");
     expect(settingsNavItem).toContain("border: 1px solid transparent");
     expect(settingsNavItem).toContain("border-radius: var(--radius-md)");