From f18e4abb3c0e8c9e7c5c870cb50a67e9ed8880fe Mon Sep 17 00:00:00 2001 From: mesalogo Date: Thu, 3 Sep 2026 13:42:41 +0800 Subject: [PATCH] fix: simplify topbar Runtime status MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit The topbar repeated a textual state after the Runtime or model name even though it already displayed a compact status indicator. It now uses green, yellow, and gray dots for ready, connecting, and unavailable states while keeping detailed status available to assistive technology and tooltips. Release note: 顶栏 Runtime 状态改用绿、黄、灰三色标记，不再重复显示“就绪”“连接中”或“不可用”文字。 --- UI-DESIGN.md | 4 +++- ...ct-performance-experience-improvement-plan.md | 5 +++-- src/renderer/src/App.test.tsx | 16 +++++++++++++++- src/renderer/src/App.tsx | 9 +-------- src/renderer/src/WorkspacePrimitives.test.tsx | 12 ++++++++++++ src/renderer/src/styles.css | 12 ++++++++---- 6 files changed, 42 insertions(+), 16 deletions(-) diff --git a/UI-DESIGN.md b/UI-DESIGN.md index 020021d0..a04fec15 100644 --- a/UI-DESIGN.md +++ b/UI-DESIGN.md @@ -383,7 +383,9 @@ 对齐。该栏不重复放置新建入口。 - “新建任务”只位于工作栏“任务索引”标题后方；任务状态筛选占满工作栏可用宽度，四个选项 等分，不能保留内容宽度的短控件。 -- Runtime 状态、同步状态等短标签使用 `--font-caption`，不得放大为正文标题。 +- Runtime 状态、同步状态等短标签使用 `--font-caption`，不得放大为正文标题。顶栏 Runtime + 状态由状态点和 Runtime/模型名称紧凑表达：就绪使用绿色，连接中使用黄色，不可用使用灰色， + 不再重复显示状态文字；完整状态详情继续通过可访问说明和工具提示提供。 - 浅色与深色切换属于持续可用的窗口级操作，直接显示太阳或月亮图标，并通过可访问名称说明将切换到的主题。选择必须持久化，切换不得改变布局。 - 顶栏只直接显示当前任务所需的高频操作。已有侧栏账户设置入口时，不再重复显示 Runtime/设置入口；使用帮助优先放在相关操作附近，而不是为单个帮助项创建“更多”菜单。 - 助手工作栏开关固定在上下文栏最右侧并与窗口关闭按钮纵向对齐；展开后该开关保持原位并 diff --git a/docs/roadmap/product-performance-experience-improvement-plan.md b/docs/roadmap/product-performance-experience-improvement-plan.md index 15e213ce..ea47afab 100644 --- a/docs/roadmap/product-performance-experience-improvement-plan.md +++ b/docs/roadmap/product-performance-experience-improvement-plan.md @@ -356,8 +356,9 @@ ### UX-02 Runtime 显式状态 - **优先级 / 状态：** P1 / 已完成 -- **范围：** 顶栏显示就绪、连接中、不可用等文字，并通过 `aria-describedby` 暴露原因。 -- **验收：** 不依赖颜色或 `title` 即可理解 Runtime 状态和发送不可用原因。 +- **范围：** 顶栏以状态点和 Runtime/模型名称紧凑表达状态：就绪为绿色，连接中为黄色， + 不可用为灰色；不重复显示状态文字，并通过 `aria-describedby` 暴露完整原因。 +- **验收：** 三种状态均不重复显示状态文字；发送不可用原因仍由发送控件的可访问说明提供。 ### UX-03 等待审批实时通知 diff --git a/src/renderer/src/App.test.tsx b/src/renderer/src/App.test.tsx index 7787a06f..d5fa1798 100644 --- a/src/renderer/src/App.test.tsx +++ b/src/renderer/src/App.test.tsx @@ -1429,7 +1429,11 @@ describe('App', () => { ) expect(runtimeStatus).not.toBeNull() expect( - within(runtimeStatus!).getByText('就绪') + within(runtimeStatus!).queryByText('就绪') + ).not.toBeInTheDocument() + expect(runtimeStatus).toHaveClass('runtime-status--ready') + expect( + runtimeStatus?.querySelector('.runtime-status__dot') ).toBeInTheDocument() expect(runtimeStatus).toHaveAttribute( 'aria-describedby', @@ -1449,6 +1453,16 @@ describe('App', () => { ).not.toBeInTheDocument() }) + it('uses a compact color indicator while connecting to a Runtime', () => { + render() + const connectingStatus = document.querySelector( + '.runtime-status' + ) + expect(connectingStatus).toHaveClass('runtime-status--connecting') + expect(within(connectingStatus!).queryByText('连接中')) + .not.toBeInTheDocument() + }) + it('loads customized branding into the primary sidebar', async () => { expect( saveBrandingPreferences({ diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index fb7bd5de..0091761e 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -9127,20 +9127,13 @@ function App(): React.JSX.Element {
{runtime?.label ?? t('runtime.detecting')} - - {t(`runtime.state.${runtimeState}`)} - {runtime?.capability === 'image-generation' && ( {t('runtime.imageGeneration')} diff --git a/src/renderer/src/WorkspacePrimitives.test.tsx b/src/renderer/src/WorkspacePrimitives.test.tsx index df332d55..54fe8e5e 100644 --- a/src/renderer/src/WorkspacePrimitives.test.tsx +++ b/src/renderer/src/WorkspacePrimitives.test.tsx @@ -80,6 +80,18 @@ describe('WorkspacePrimitives', () => { cleanup() }) + it('uses semantic colors for compact Runtime status dots', () => { + expect(stylesheet).toMatch( + /\.runtime-status--ready \.runtime-status__dot\s*\{[^}]*background:\s*var\(--success\);/u + ) + expect(stylesheet).toMatch( + /\.runtime-status--connecting \.runtime-status__dot\s*\{[^}]*background:\s*var\(--warning\);/u + ) + expect(stylesheet).toMatch( + /\.runtime-status--unavailable \.runtime-status__dot\s*\{[^}]*background:\s*var\(--text-muted\);/u + ) + }) + it('keeps shared switch rows aligned without standalone dividers', () => { const toggleRowStyles = stylesheet.match( /\.toggle-row\s*\{(?[^}]*)\}/u diff --git a/src/renderer/src/styles.css b/src/renderer/src/styles.css index cb5a8ce1..f9e1a6e8 100644 --- a/src/renderer/src/styles.css +++ b/src/renderer/src/styles.css @@ -5061,12 +5061,16 @@ button > svg { background: var(--text-muted); } -.runtime-status--online { - color: var(--success); +.runtime-status--ready .runtime-status__dot { + background: var(--success); } -.runtime-status--online .runtime-status__dot { - background: var(--success); +.runtime-status--connecting .runtime-status__dot { + background: var(--warning); +} + +.runtime-status--unavailable .runtime-status__dot { + background: var(--text-muted); } .chat-scroll-region {