dcalc/frontend-ui/design-qa.md

Component fidelity QA

• Source visual truth: /Users/xigua/.codex/visualizations/2026/08/04/019fcbb3-69c4-7363-81ba-fa53cab1424e/design-board-2-1920.png
• Implementation: /Users/xigua/.codex/visualizations/2026/08/04/019fcbb3-69c4-7363-81ba-fa53cab1424e/catalog-fidelity-audit-final-1920.png
• Viewport: 1920 × 1200 CSS px
• Source pixels: 1920 × 1200
• Implementation pixels: 1920 × 1200
• Density normalization: devicePixelRatio 1; no resampling required
• State: default catalog with Button state matrix; interactive Dialog state captured separately at catalog-audit-dialog-animated.png

Full-view comparison

The implementation keeps the source board's full-width dark surface, 46 px panel headings, brass dividers, DCalc typography, square corners, compact 30 px controls, and dense state matrices. The catalog intentionally adds a component index, theme controls, and implementation-specific copy; these are catalog navigation rather than component anatomy changes.

Focused comparisons

• Button: three five-column state rows now match the source's Rest, Hover, Pressed, Disabled, and tone-family organization. Panel height is 281.5 px versus the 292 px source module target; the difference is the catalog's smaller bottom spacing and is visually non-material.
• NumberField: 30 px field, 23 px spinner, visible up/down arrows, and two 14 px +10/-10 fast-step buttons match the source anatomy.
• Tabs: 40 px list, 30 px triggers, glow layers, divider line, animated 39 × 5 px arrow marker, and line-marker variant are present. Marker movement follows Reka selection state and respects reduced motion.
• Dialog: the titlebar uses the exact 45 raster frames from windowheadereffect.img, advances every 66 ms while focused, and hides the effect in the unfocused/reduced-motion state.
• TreeSelect: the Reka tree now opens the selected path, uses the source's flush 2 px row rhythm, eight rarity colors, pixel branch glyph, selected border, and distinct hover/active/focus-visible states. Desktop and 390 px evidence is captured at tree-select-fixed-1440.png and tree-select-fixed-390.png.
• Responsive: document overflow is absent at 1920, 1280, 768, and 390 widths. At 390 px, DataTable keeps a 328 px viewport with an intentional 560 px internal scroll surface.

Required fidelity surfaces

• Fonts and typography: DCalc/SimSun control typography and Segoe UI/Chinese fallbacks retain the source hierarchy and compact line-height.
• Spacing and layout rhythm: page gutters use clamp(), panels use container-relative padding, grids collapse at 1280/900/520 breakpoints, and atomic game-control sizes stay pixel-aligned.
• Colors and tokens: blue action surfaces, brass edges, gold selection, blue focus, disabled gray, semantic status colors, and rarity colors map to DCalc CSS variables.
• Image quality and assets: stars, rarity frames, item icons, dialog close icon, and all 45 title-effect frames use original raster assets with zero broken images. Select, TreeSelect and Autocomplete use the Design source's CSS gradient button and clipped arrow instead of a raster arrow.
• Copy and content: catalog copy differs only where it documents the Reka implementation or exposes live state; component labels and source examples remain representative.

Interaction verification

• NumberField fast step: 1 → 11.
• Tabs: line marker moved to 来源; selected state became active.
• Checkbox: unchecked → checked.
• Switch: checked → unchecked.
• Rating: 1 → 3.
• Select: 装备 → 材料.
• DropdownMenu: 导出结果 updated live status.
• Dialog: title frame changed from 4.PNG to 5.PNG; cancel restored focus to 打开 WindowDialog.
• Dialog drag: the standard window moved by 120 × 66 px; the complex window moved by -100 × 39 px, while both title center deltas remained 0 px.
• Dialog responsive boundary: at 390 px, reopening reset the desktop offset and dragging to the upper-left stopped at the 8 px viewport margin.
• TreeSelect parent toggle: collapsing and reopening 所有稀有度 preserved the 稀有 leaf value; the parent never received data-selected.
• TreeSelect keyboard: ArrowDown moved focus to 稀有 with a solid 1 px blue outline at -2 px offset, without applying the hover brightness filter.
• TreeSelect responsive boundary: at 390 px the 319 px popup remained between x=30 and x=349, rendered all nine rows, and retained the selected leaf.

Comparison history

• P1: NumberField step affordances were too small and FastStep was missing. Fixed with source-sized arrows and +10/-10 controls.
• P1: Tabs used a trigger-local pseudo marker and could not reproduce source movement. Fixed with a list-owned marker driven by active Reka tab geometry.
• P1: Dialog titlebar had a static gradient only. Fixed with the exact focused 45-frame animation.
• P1: Dialog had no draggable window behavior and long header descriptions could offset the title. Fixed with a bounded Pointer Events drag model, open/resize recentering, and title-only centered header composition.
• P1: TreeSelect inherited native ul margin and padding, so rows were inset and narrowed; Portal content also lost scoped rarity colors, and parent clicks replaced the selected leaf. Fixed with a reset tree root, global rarity semantics, selected-path expansion, and prevented parent select events while retaining Reka expansion.
• P2: Select, TreeSelect and Autocomplete imported the shared arrow PNG even though the Design control anatomy is CSS-rendered. Replaced all three with one theme-aware CSS indicator contract; retained raster assets only where the source treats them as game artwork.
• P2: Button showcase omitted source state rows. Fixed with the complete three-row state matrix.
• P2: shadcn-like radii, generic focus rings, menu surface, and tooltip transitions drifted from DNF styling. Replaced with source-specific square surfaces and state treatments.
• P2: layout relied on fixed page spacing. Replaced page-level spacing and grids with fluid/container-responsive rules while preserving atomic raster dimensions.

Remaining intentional deviations

• The catalog header includes theme switching and a component index that are not present on Design board 2.
• The cited full-page 1920 px comparison predates Cascader, Pagination and Popover. TreeSelect has since received a focused Design/source-CSS comparison and browser verification; the other three still require refreshed design-side screenshots before claiming pixel-level comparison evidence.
• SearchTree/CommandInput and domain-specific complex product dialogs remain outside this comparison.
• Navigation and ScrollArea are migrated; business call-site replacement remains a separate phase.

final result: passed