feat: 为桌面折叠侧栏添加菜单提示
PC 折叠侧栏菜单图标增加 NPopover 提示,并保留图标导航能力;展开态和移动端不显示重复提示。
This commit is contained in:
+29
-32
@@ -1,61 +1,58 @@
|
||||
# Design QA
|
||||
|
||||
- Source visual truth: `/workspace/scratch/6e52996114b8/upload/f7dbeb9e-a47c-4e09-9b5c-c5f885b0d708.png`
|
||||
- Source pixel dimensions: `543 × 978`.
|
||||
- Browser-rendered open-state comparison: `/workspace/scratch/mobile-sidebar-open-comparison-20260908.jpg`
|
||||
- Browser-rendered closed-state comparison: `/workspace/scratch/mobile-sidebar-closed-comparison-20260908.jpg`
|
||||
- Comparison screenshot dimensions: `1363 × 936`.
|
||||
- Implementation CSS viewport: `543 × 936`, device scale factor `1`.
|
||||
- Density normalization: source and implementation are both displayed at `543px` CSS width; the source's bottom `42px` is outside the comparison viewport and contains no sidebar structure needed for this review.
|
||||
- State: dark-theme project list, with the mobile navigation captured both open and closed.
|
||||
- Source visual truth: `/workspace/scratch/6e52996114b8/upload/6c29987c-43a6-4ded-ba86-b66d1c638f51.png`
|
||||
- Source pixel dimensions: `151 × 506`.
|
||||
- Browser-rendered implementation: `/workspace/scratch/6e52996114b8/sidebar-popover-pc-final-20260909.jpg`
|
||||
- Browser-rendered implementation dimensions: `1363 × 936`.
|
||||
- Focused side-by-side comparison: `/workspace/scratch/6e52996114b8/sidebar-popover-comparison-final-20260909.jpg`
|
||||
- Implementation CSS viewport: `1363 × 936`, device scale factor `1`.
|
||||
- State: PC dark theme, collapsed sidebar, pointer hovering the disabled “视觉风格” icon.
|
||||
|
||||
## Full-view comparison evidence
|
||||
|
||||
The source shows a permanently visible `48px` navigation rail that reduces the project-content width. The revised closed state removes that rail entirely: browser geometry reports the main region at `543px`, equal to the `543px` iframe viewport. The top-left control is now a menu icon and the project list uses the full available width.
|
||||
|
||||
The revised open state shows the same navigation as a `543 × 936` fixed full-screen layer. Brand, navigation items and the bottom backend entry remain vertically separated, while an explicit close icon is available in the navigation header.
|
||||
The implementation preserves the existing collapsed sidebar width, icon order, selected state and main-content boundary. Hovering an icon opens a compact Naive UI popover to the right without shifting the sidebar or content.
|
||||
|
||||
## Focused region comparison evidence
|
||||
|
||||
A separate crop was not needed because both states are rendered at 1:1 CSS width in the full-view comparison and the header controls, navigation item, content boundary and footer action remain readable.
|
||||
The focused comparison places the supplied sidebar crop beside a `320 × 506` crop of the browser render. The source icon spacing, dark surfaces and green selected state remain unchanged. The implementation adds the requested hover label beside the icon; disabled workflow items use the explanatory suffix “(剧本完成后可用)”.
|
||||
|
||||
## Required fidelity surfaces
|
||||
|
||||
- Fonts and typography: existing font family, sizes, weights and truncation behavior are preserved. The drawer uses the same brand and menu typography as the desktop sidebar.
|
||||
- Spacing and layout rhythm: the closed state removes the previous `48px` content offset. The open state uses the full viewport and preserves the existing header, menu and footer spacing.
|
||||
- Colors and visual tokens: the drawer continues to use `--app-subtle`, existing selected-menu colors and the current dark-theme tokens.
|
||||
- Image quality and asset fidelity: no raster assets were added or altered. Menu and close actions use the project's existing Lucide icon package.
|
||||
- Copy and content: brand, “我的剧本” and “后端连接” labels are unchanged.
|
||||
- Typography: the application typography is unchanged; popover copy uses the current Naive UI theme and compact UI text sizing.
|
||||
- Spacing and layout rhythm: the `64px` collapsed sidebar and existing vertical menu rhythm are preserved. Popovers use `placement="right"` and do not alter document flow.
|
||||
- Colors and visual tokens: dark sidebar surfaces and the selected green state remain unchanged. Popovers inherit the existing dark Naive UI theme.
|
||||
- Image and asset fidelity: no raster assets were introduced. Existing Lucide menu icons are preserved.
|
||||
- Copy and content: PC hints use each menu's existing label. Locked entries append “(剧本完成后可用)”; “后端连接” keeps its original copy.
|
||||
|
||||
## Findings
|
||||
|
||||
- No actionable P0/P1/P2 visual or responsive issues remain.
|
||||
- The disconnected local backend produces the expected in-page `502` status in the closed-state project list; it does not affect the navigation layout or interaction.
|
||||
- The disconnected local backend produces the expected in-page `502` response; it does not affect sidebar layout or popover behavior.
|
||||
|
||||
## Primary interactions tested
|
||||
|
||||
- Opened the full-screen navigation from the new menu button.
|
||||
- Closed the navigation from its internal close button.
|
||||
- Confirmed the hidden navigation is removed from the accessibility tree with `aria-hidden` and `inert`.
|
||||
- Confirmed the closed-state main content width equals the mobile viewport width.
|
||||
- Confirmed desktop behavior remains covered by the existing layout component tests.
|
||||
- Collapsed the PC sidebar and hovered an enabled menu icon; “我的剧本” appeared.
|
||||
- Hovered the disabled “视觉风格” icon; its availability explanation appeared.
|
||||
- Hovered the bottom settings icon; “后端连接” appeared.
|
||||
- Clicked an enabled collapsed icon and confirmed navigation to the target workflow route.
|
||||
- Expanded the PC sidebar and confirmed menu popovers were absent.
|
||||
- Confirmed through component tests that mobile navigation does not render menu popovers.
|
||||
|
||||
## Console errors checked
|
||||
|
||||
No application-origin console errors were reported. The cloud browser logged only its own extension metadata messages; these are outside the application.
|
||||
No application-origin console errors were reported. The cloud browser logged only extension metadata messages outside the application.
|
||||
|
||||
## Comparison history
|
||||
|
||||
- Iteration 1: replaced the persistent mobile rail with a fixed full-screen navigation and added the menu/close icon pair.
|
||||
- Iteration 2: verified the open state at `543 × 936`, then closed it through the internal action and verified the content region expanded to the full `543px` viewport width.
|
||||
- Iteration 1: added native NPopover wrappers and found that the full-width transparent RouterLink intercepted hover on enabled menu icons.
|
||||
- Iteration 2: made enabled collapsed icons direct RouterLinks, raised their trigger layer above the transparent label and rechecked enabled, disabled and settings hints in the browser.
|
||||
|
||||
## Implementation checklist
|
||||
|
||||
- [x] Hide the mobile navigation without reserving horizontal space.
|
||||
- [x] Open navigation as a full-screen fixed layer.
|
||||
- [x] Replace the top toggle glyph with a menu icon.
|
||||
- [x] Provide an internal close control while the top bar is covered.
|
||||
- [x] Preserve automatic close on mobile route changes, settings open and Escape.
|
||||
- [x] Preserve desktop collapse/expand behavior.
|
||||
- [x] Add NPopover hints to all PC collapsed sidebar menu icons.
|
||||
- [x] Preserve click navigation for enabled collapsed icons.
|
||||
- [x] Explain locked workflow items in their hint copy.
|
||||
- [x] Keep PC expanded and mobile navigation free of duplicate popovers.
|
||||
- [x] Preserve sidebar size, spacing, theme and selected state.
|
||||
|
||||
final result: passed
|
||||
|
||||
Reference in New Issue
Block a user