init

2026-08-04 17:57:01 +08:00
parent 768fd4a3a9
commit f77034edd7
641 changed files with 26137 additions and 0 deletions
@@ -0,0 +1,56 @@
+# 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.
+- 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, select arrow, dialog close icon, and all 45 title-effect frames use original raster assets with zero broken images.
+- 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`.
+
+## 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.
+- 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.
+- Components not yet migrated (CommandInput, TreeSelect, Cascader, navigation, ScrollArea, and complex product dialogs) are out of this comparison and must be covered in later migration batches.
+
+final result: passed