diff --git a/UI-DESIGN.md b/UI-DESIGN.md index 4931d372..2451a7ed 100644 --- a/UI-DESIGN.md +++ b/UI-DESIGN.md @@ -293,9 +293,11 @@ - 浅色侧栏使用冰蓝灰表面,与白色主内容画布形成明确边界;深色侧栏使用比主画布略亮的蓝灰表面。 - 一级导航与最近会话之间、最近会话与底部账户区之间必须有可见结构分隔线。浅色主题使用 `--border-default`,深色主题可在可辨前提下使用 `--border-subtle`。 - 当前导航项和当前会话使用一致的淡蓝选中背景、强调色文字和中等字重,不额外描边或添加侧边标记;导航图标随选中状态使用强调色,悬停时保留选中状态。浅深主题遵循相同规则,强制颜色模式保留系统选中边框。 -- 固定导航行高至少 `36px`、行间距 `4px`,图标统一为 `16px`;导航与最近会话分隔线上下各留 `16px`。普通待办和待处理建议数量使用中性色徽标,不使用危险红色;徽标高度不得改变导航行高。搜索框获得内部焦点时显示完整焦点环。 +- 固定导航行高至少 `36px`、行间距 `4px`,图标统一为 `16px`;导航与会话区域之间、会话区域与底部入口之间的分隔线上下均各留 `16px`(`--space-4`)。普通待办和待处理建议数量使用中性色徽标,不使用危险红色;徽标高度不得改变导航行高。搜索框获得内部焦点时显示完整焦点环。 - 未选中项保持平整,不为每一行添加卡片边框或阴影。悬停反馈不得强于选中状态。 - 最近会话列表在精细指针设备上使用细原生滚动条,滑块使用 `--border-control`、轨道透明;强制颜色与粗指针设备保留系统默认。 +- 会话区域使用 `--surface-raised` 与主导航区分,浅色为白底,深色为相邻的深蓝灰底。不显示“最近会话”标题,保留区域的无障碍名称;搜索框固定在区域顶部,仅下方列表滚动。搜索框使用透明背景和 `--border-control` 边框,保留内部清除按钮与焦点环。 +- 窗口高度不超过 `600px` 时,侧栏允许整体纵向滚动,会话区域至少保留 `200px` 高度,避免搜索框、列表与底部入口相互覆盖。 - 最近会话的顺序不随流式输出增量反复变化;置顶与新消息排序遵守 [会话列表排序规则](./docs/features/application-tool-navigation/ui-design.md#会话置顶与操作菜单)。 - 项目选择器顶行保留项目切换与新建按钮;项目设置统一从下拉列表对应行的管理按钮进入,关闭后焦点返回项目选择器。 diff --git a/src/renderer/src/App.test.tsx b/src/renderer/src/App.test.tsx index 78811e80..38b7d619 100644 --- a/src/renderer/src/App.test.tsx +++ b/src/renderer/src/App.test.tsx @@ -3054,6 +3054,10 @@ describe("App", () => { ]); const { container } = render(); const search = await screen.findByLabelText("搜索对话"); + const conversationSection = search.closest(".sidebar-conversations"); + expect(conversationSection).toBeInTheDocument(); + expect(search.closest(".conversation-list")).toBeNull(); + expect(conversationSection?.querySelector(".conversation-list")).toBeInTheDocument(); const searchControls = within(search.parentElement!); expect( searchControls.queryByRole("button", { name: "清除搜索" }), diff --git a/src/renderer/src/App.tsx b/src/renderer/src/App.tsx index 7e617b38..c8a6dbca 100644 --- a/src/renderer/src/App.tsx +++ b/src/renderer/src/App.tsx @@ -8716,31 +8716,6 @@ function App(): React.JSX.Element { )} -
- - setSearchQuery(event.target.value)} - placeholder={t("sidebar.searchPlaceholder")} - value={searchQuery} - /> - {searchQuery.length > 0 && ( - - )} -
- +
+
+
+
+
-

{t("sidebar.recent")}

{!conversationLoadError && filteredConversations.map((conversation) => { const conversationTasks = @@ -9328,6 +9329,8 @@ function App(): React.JSX.Element { ) : null}
+
+