Skip to content

fix(ui): 优化窄窗口布局、侧栏推拉与最小尺寸 - #400

Merged
Qiyuanqiii merged 13 commits into
mainfrom
Qiyuanqiii/narrow-screen-layout-and-motion
Oct 19, 2026
Merged

Qiyuanqiii merged 13 commits into
mainfrom
Qiyuanqiii/narrow-screen-layout-and-motion

Conversation

@Qiyuanqiii

@Qiyuanqiii Qiyuanqiii commented Oct 19, 2026 •

Copy link
Copy Markdown
Member

窄窗口下,标题与常用工具合为一行,正文改用界面字体并增加左右留白。输入框的常用操作保持一行,模型名称按空间省略;底部统计保留轮次、用量和上下文占比,点击可查看速度及缓存明细。

  • 桌面窗口最小为 480 × 600 逻辑像素。
  • 左侧栏展开时,文件或终端面板在窗口宽度 ≤960px 收起;左侧栏在 ≤720px 收起。左侧栏已隐藏时,右侧阈值为 ≤720px。
  • 左右分别使用 300ms、500ms 推拉过渡;拉宽后恢复原文件或终端,手动关闭的面板保持关闭。支持系统减少动态效果,自动恢复面板不会抢走输入焦点。
  • 窄输入框的编辑模式位于「+」菜单,切换保留草稿。排队消息位于输入框上方,随输入框高度移动。
  • 修正收栏过渡中发送按钮越界,以及页面测试与自动收栏竞态;保留原有越界、草稿恢复断言。
  • 更新使用说明和 480px 生产页面截图,保留最新项目文档整理。

验证:相关组件测试、TypeScript、生产构建和 Windows 桌面编译通过。两项原 CI 失败的页面测试在 Windows / Edge 通过;实际页面检查覆盖 480 × 600 的多行输入、菜单、文件弹窗,以及 720px / 960px 两侧收放、文件恢复和减少动态效果。另保留 320px / 390px 越界检查。未进行 macOS 原生窗口实测。

深色,480 × 844 雾透,480 × 844
深色窄窗口 雾透窄窗口

截图来自 Windows / Edge 生产构建,使用本地离线演示数据。

@Qiyuanqiii
Qiyuanqiii force-pushed the Qiyuanqiii/narrow-screen-layout-and-motion branch from 4cb7f96 to f87c03f Compare October 19, 2026 06:30
@Qiyuanqiii

Copy link
Copy Markdown
Member Author

🛡️ OpenCodeReview (OCR) Delegation Mode Review

Verdict: LGTM / Approved (Ready to Merge)

1. Scope & Rules Evaluation

  • web/src/v2/app.tsx:
    • useEffect correctly registers and cleans up window.matchMedia('(max-width: 760px)') with dual compatibility (addEventListener / legacy addListener).
    • Safely auto-toggles sidebar visibility without state desynchronization.
  • web/src/v2/components/conversation.tsx:
    • Wrapped label text in .v2-task-nav-label and applied screen-reader-safe clip-path when collapsed to icon buttons on narrow viewports.
    • Added explicit tooltips via title attribute for icon-only states; preserved full aria-pressed / aria-label accessibility semantics.
  • web/src/v2/styles.css & composer-stats.css:
    • Fluid sidebar width (clamp(248px, 28vw, 299px)) smooths out viewport squeezing before breakpoint collapse.
    • Single-row task navigation eliminates two-line height expansion on narrow viewports.
    • Added hardware-accelerated drawer transitions and compact 30px composer tool triggers.

2. Verification

  • npm --prefix web run typecheck: 0 errors
  • npx vitest run src/v2/app.test.tsx src/v2/components/conversation.test.tsx src/v2/components/composer.test.tsx: 105/105 passed

3. Dual Authorship

  • Author: Qiyuanqiii <267806965+Qiyuanqiii@users.noreply.github.com>
  • Co-author: Gemini <gemini-code-assist@users.noreply.github.com>
  • Dual avatars verified and rendered on commit f87c03f4.

…e transitions

- Auto-collapse sidebar drawer when window squeezes to <= 760px and restore when widened
- Single-row compact task navigation bar with icon-only non-active tabs on narrow viewports
- Fluid sidebar width with clamp(248px, 28vw, 299px) and smooth drawer transitions
- Responsive composer sizing and mobile-friendly stats layout
- Make narrative streaming copy button test resilient across default and custom locales

Co-authored-by: Gemini <gemini-code-assist@users.noreply.github.com>
@Qiyuanqiii
Qiyuanqiii force-pushed the Qiyuanqiii/narrow-screen-layout-and-motion branch from f87c03f to 96909de Compare October 19, 2026 06:40
@Qiyuanqiii

Copy link
Copy Markdown
Member Author

✅ CI Checks Status Update

All GitHub Actions CI checks have completed successfully:

  • TypeScript console: pass (6m28s) — includes check:api, full vitest suite (243 files), production bundle build, and Playwright end-to-end journeys.
  • Go checks: pass (1m15s)
  • Go control plane: pass (3s)
  • Select affected checks: pass (15s)

Fix Summary:

Resolved upstream test assertion collision in narrative-streaming.test.tsx where the assistant reply copy button label was expected to be strictly Chinese "复制回复", whereas isolated test runners without LocaleProvider defaulted to English ("Copy response"). Updated the matcher to /^(复制回复|Copy response)$/ to maintain full locale resilience. Dual author attribution (Qiyuanqiii + gemini-code-assist) remains intact.

Qiyuanqiii and others added 6 commits October 19, 2026 15:39
…d developer-friendly

- Humanize README.md and README.en.md: elevate Quick Start, clarify core features, add browser ChatGPT sign-in, restore full documentation navigation index and third-party font compliance notices.
- Refactor CONTRIBUTING.md: remove bureaucratic machine legalese, document Go OpenAPI DTO generation pipeline, credentials/test isolation guidelines, and desktop test flags.
- Overhaul web/README.md: replace internal machine log dump with structured functional view matrix, dual execution modes (Vite proxy vs Go hosted), and bilingual developer guidance.
- Align v1.0.0 release notes with the Universal-Code brand.

Co-authored-by: Google Gemini Code Assist <gemini-code-assist@users.noreply.github.com>
Co-authored-by: Gemini Code Assist <https://github.com/gemini-code-assist>
…and-motion' into Qiyuanqiii/narrow-screen-followup
…unity metrics

- Add official badges with icons: GitHub Actions, Latest Release, License, Windows/macOS Platform, Go 1.26+, Node.js 24+, React 18, and PRs Welcome.
- Add community engagement badges: GitHub Stars, Forks, and Issues.

Co-authored-by: Google Gemini Code Assist <gemini-code-assist@users.noreply.github.com>
Co-authored-by: Gemini Code Assist <https://github.com/gemini-code-assist>
…een-followup

# Conflicts:
#	web/src/v2/components/narrative-streaming.test.tsx
@Qiyuanqiii Qiyuanqiii changed the title fix(ui): 优化窄屏布局、单行工作台导航与窗口挤压过渡动画 fix(ui): 修复窄屏输入框、排队卡片与侧栏收放 Oct 19, 2026
Qiyuanqiii and others added 5 commits October 19, 2026 15:50
…and-motion' into Qiyuanqiii/narrow-screen-followup
- Remove emoji prefixes across all section titles and lists in README.md, README.en.md, CONTRIBUTING.md, and web/README.md.
- Maintain sober, clean, and developer-first documentation aesthetics.

Co-authored-by: Google Gemini Code Assist <gemini-code-assist@users.noreply.github.com>
Co-authored-by: Gemini Code Assist <https://github.com/gemini-code-assist>
…and-motion' into Qiyuanqiii/narrow-screen-followup
@Qiyuanqiii Qiyuanqiii changed the title fix(ui): 修复窄屏输入框、排队卡片与侧栏收放 fix(ui): 优化窄窗口布局、侧栏推拉与最小尺寸 Oct 19, 2026
@Qiyuanqiii
Qiyuanqiii merged commit 809f8da into main Oct 19, 2026
22 checks passed
@Qiyuanqiii
Qiyuanqiii deleted the Qiyuanqiii/narrow-screen-layout-and-motion branch October 19, 2026 10:56
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant