From 8becd2d2afc19772f65d0d47f4a261f85bcccd61 Mon Sep 17 00:00:00 2001 From: kilock <731052835@qq.com> Date: Tue, 19 May 2026 01:11:29 +0800 Subject: [PATCH 1/2] fix(web): restore theme surfaces --- src/apps/web/src/__tests__/appUI.test.tsx | 4 ++-- src/apps/web/src/components/ChatView.tsx | 6 +++--- src/apps/web/src/components/DesktopSettings.tsx | 6 +++--- src/apps/web/src/components/DesktopTitleBar.tsx | 2 +- src/apps/web/src/components/SettingsModal.tsx | 4 ++-- src/apps/web/src/components/WelcomePage.tsx | 2 +- src/apps/web/src/index.css | 9 +++++++++ 7 files changed, 21 insertions(+), 12 deletions(-) diff --git a/src/apps/web/src/__tests__/appUI.test.tsx b/src/apps/web/src/__tests__/appUI.test.tsx index 286288305..ba676d1fb 100644 --- a/src/apps/web/src/__tests__/appUI.test.tsx +++ b/src/apps/web/src/__tests__/appUI.test.tsx @@ -384,7 +384,7 @@ describe('DesktopTitleBar update entry', () => { await renderTitleBar(appUpdateState('available'), true) const titleBar = container.firstElementChild as HTMLElement | null - expect(titleBar?.style.paddingLeft).toBe('8px') + expect(titleBar?.style.paddingLeft).toBe('12px') expect(container.querySelector('button[title="Minimize"]')).toBeNull() }) @@ -394,7 +394,7 @@ describe('DesktopTitleBar update entry', () => { await renderTitleBar(appUpdateState('available'), true) const titleBar = container.firstElementChild as HTMLElement | null - expect(titleBar?.style.paddingLeft).toBe('8px') + expect(titleBar?.style.paddingLeft).toBe('12px') expect(container.querySelector('button[title="Minimize"]')).toBeNull() }) diff --git a/src/apps/web/src/components/ChatView.tsx b/src/apps/web/src/components/ChatView.tsx index 4b67d8313..0308faf19 100644 --- a/src/apps/web/src/components/ChatView.tsx +++ b/src/apps/web/src/components/ChatView.tsx @@ -3489,7 +3489,7 @@ export const ChatView = memo(function ChatView() { ]) return ( -
+
{/* Chat column + right panel: starts below the desktop Chat/Work titlebar. */}
-
+
{/* 消息列表 */} {messageListArea} @@ -3521,7 +3521,7 @@ export const ChatView = memo(function ChatView() { left: 0, right: 0, zIndex: 10, - background: 'linear-gradient(to bottom, transparent 0%, var(--c-bg-page-gradient-stop, var(--c-bg-page)) 24px)', + background: 'linear-gradient(to bottom, transparent 0%, var(--c-chat-bg-gradient-stop, var(--c-bg-page-gradient-stop, var(--c-bg-page))) 24px)', transition: `padding ${rightPanelLayoutTransitionCss}`, } as React.CSSProperties} className="flex w-full flex-col items-center gap-2" diff --git a/src/apps/web/src/components/DesktopSettings.tsx b/src/apps/web/src/components/DesktopSettings.tsx index 03f3066ae..54060c5e8 100644 --- a/src/apps/web/src/components/DesktopSettings.tsx +++ b/src/apps/web/src/components/DesktopSettings.tsx @@ -578,7 +578,7 @@ export function DesktopSettings({ return ( <>
diff --git a/src/apps/web/src/components/DesktopTitleBar.tsx b/src/apps/web/src/components/DesktopTitleBar.tsx index cb5ac153a..e30132a62 100644 --- a/src/apps/web/src/components/DesktopTitleBar.tsx +++ b/src/apps/web/src/components/DesktopTitleBar.tsx @@ -35,7 +35,7 @@ import { useThreadLiveState } from '../contexts/thread-list' export const DESKTOP_TITLEBAR_HEIGHT = 44 const WINDOWS_TITLEBAR_HEIGHT = 44 const MAC_TITLEBAR_LEFT_PADDING = 76 -const DESKTOP_ICON_RAIL_LEFT_PADDING = 8 +const DESKTOP_ICON_RAIL_LEFT_PADDING = 12 const PINNED_MENU_OPEN_DELAY_MS = 70 const PINNED_MENU_GAP = 4 diff --git a/src/apps/web/src/components/SettingsModal.tsx b/src/apps/web/src/components/SettingsModal.tsx index f190d6ad8..0940a8ea2 100644 --- a/src/apps/web/src/components/SettingsModal.tsx +++ b/src/apps/web/src/components/SettingsModal.tsx @@ -86,7 +86,7 @@ export function SettingsModal({ me, accessToken, initialTab = 'account', onClose onMouseDown={(e) => { if (e.target === e.currentTarget) onClose() }} >
{/* nav */}
diff --git a/src/apps/web/src/components/WelcomePage.tsx b/src/apps/web/src/components/WelcomePage.tsx index 7e292abf9..e269aea24 100644 --- a/src/apps/web/src/components/WelcomePage.tsx +++ b/src/apps/web/src/components/WelcomePage.tsx @@ -565,7 +565,7 @@ export function WelcomePage() { return (
Date: Tue, 19 May 2026 01:38:21 +0800 Subject: [PATCH 2/2] fix(web): harden background surfaces --- src/apps/web/src/__tests__/appUI.test.tsx | 12 ++++++++++++ src/apps/web/src/index.css | 11 ++++++----- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/src/apps/web/src/__tests__/appUI.test.tsx b/src/apps/web/src/__tests__/appUI.test.tsx index ba676d1fb..03cdf8ecd 100644 --- a/src/apps/web/src/__tests__/appUI.test.tsx +++ b/src/apps/web/src/__tests__/appUI.test.tsx @@ -1,6 +1,7 @@ import { act, useEffect, useState } from 'react' import { createRoot } from 'react-dom/client' import { MemoryRouter } from 'react-router-dom' +import { readFileSync } from 'node:fs' import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest' import { AppUIProvider, useSettingsUI, useSidebarUI, useTitleBarRightPanelUI } from '../contexts/app-ui' @@ -298,6 +299,17 @@ describe('AppUIProvider sidebar state', () => { }) }) +describe('custom background surface CSS', () => { + it('keeps chat gradient transparent outside color-mix support', () => { + const css = readFileSync('src/index.css', 'utf-8') + + expect(css).toContain(':root[data-background-image="custom"]') + expect(css).toContain('--c-chat-bg-gradient-stop: transparent;') + expect(css).toContain('.theme-chat-surface') + expect(css).toContain('background-color: color-mix(in srgb, var(--c-bg-page) 42%, transparent);') + }) +}) + describe('DesktopTitleBar update entry', () => { let container: HTMLDivElement let root: ReturnType | null diff --git a/src/apps/web/src/index.css b/src/apps/web/src/index.css index 4987c022b..9f7928b9a 100644 --- a/src/apps/web/src/index.css +++ b/src/apps/web/src/index.css @@ -1641,7 +1641,8 @@ button:not(:disabled) { } :root[data-background-image="custom"] { - --c-bg-page-gradient-stop: color-mix(in srgb, var(--c-bg-page) 90%, transparent); + --c-bg-page-gradient-stop: var(--c-bg-page); + --c-chat-bg-gradient-stop: transparent; } :root[data-background-image="custom"] .theme-background-layer { @@ -1667,6 +1668,10 @@ button:not(:disabled) { } @supports (color: color-mix(in srgb, black, white)) { + :root[data-background-image="custom"] { + --c-bg-page-gradient-stop: color-mix(in srgb, var(--c-bg-page) 90%, transparent); + } + :root[data-background-image="custom"] .theme-surface-page { background-color: color-mix(in srgb, var(--c-bg-page) 76%, transparent); } @@ -1679,10 +1684,6 @@ button:not(:disabled) { background-color: transparent; } - :root[data-background-image="custom"] { - --c-chat-bg-gradient-stop: transparent; - } - :root[data-background-image="custom"] .theme-chat-surface { background-color: color-mix(in srgb, var(--c-bg-page) 42%, transparent); }