109 lines
9.7 KiB
Markdown
109 lines
9.7 KiB
Markdown
# 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`
|
||
|
||
## Calculator workbench QA (2026-08-19)
|
||
|
||
- Design reference: `/Users/xigua/.codex/visualizations/2026/08/19/01a01882-9a2a-7d63-ade8-34a8104c8a6d/calculator-workbench-concept.html`.
|
||
- Equipment evidence: `frontend-ui-implemented-equipment-1440.png`; the 1440 px workspace keeps the equipment dictionary, character overview and damage table visible without document-level horizontal overflow.
|
||
- Skill evidence: `frontend-ui-implemented-skill-detail-1440.png`; the 778 px configuration rail resolves to a 556 px skill-tree panel and a 210 px resident detail panel, while the 642 px result rail remains independently readable. The standard tree no longer creates a horizontal scrollbar at 1440 px.
|
||
- Forge evidence: `frontend-ui-implemented-forge-1440.png`; the existing forge editors remain the source of truth and the new read-only summary rail does not mutate calculation data. Multi-control Sundry rows span the editor width and no longer overflow horizontally.
|
||
- Special-job evidence: `frontend-ui-implemented-creator-skill-1440.png` and `frontend-ui-implemented-dark-knight-skill-1440.png`. Creator keeps its original coordinate-based skill-tree structure and extra awakening; Dark Knight keeps its coordinate-based tree plus six shortcuts and six five-stage combo columns. The skill picker is captured at `frontend-ui-implemented-dark-knight-picker-1440.png` and remains inside the 210 px context rail.
|
||
- Responsive evidence: document overflow measured 0 px at 1440, 1280 and 390 widths. At 1280 the standard skill tree uses an intentional internal horizontal scroll surface (528 px content in a 471 px viewport); at 390 the context panel is hidden, both main rails measure 371 px, and document width remains 390 px.
|
||
- Compact collapsibles (2026-08-19): equipment catalog groups and equipment detail sections now use the shared Reka-based DataSection at a measured 24 px header height. Equipment groups collapse independently while retaining the Forge-style state label. Skill-detail sections use the same compact anatomy with the 13 px indicator on the right and no expanded/collapsed copy; `基本信息` was collapsed independently without hiding `技能描述` or `技能属性`. Browser evidence is captured at `frontend-ui-compact-collapsibles-1440.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: the current compact-density implementation uses a 32 px list, 24 px triggers, 14 px text,
|
||
glow layers, divider line, and an animated line marker without a downward triangle by default.
|
||
The arrow marker remains available only as an explicit compatibility variant. Each list sizes
|
||
itself from its longest label and gives every trigger the same width; marker movement still follows
|
||
Reka selection state and respects reduced motion. The cited full-page image predates this compact-density
|
||
refresh.
|
||
- 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.
|
||
- Tabs compact refresh (2026-08-19): the variable-label catalog group measured 4 × 68 px inside a
|
||
284 px list instead of filling its 1155 px parent; the line-marker group measured 3 × 44 px inside
|
||
144 px. At 390 px both groups retained equal item widths, 32/24 px heights and zero document-level
|
||
horizontal overflow. The character navigation measured 3 × 68 px inside a 216 px list. DCalc and
|
||
Midnight themes retained the same geometry. The default marker now uses the line treatment, so
|
||
business tabs no longer render a downward triangle unless a caller explicitly requests `arrow`.
|
||
- 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
|