42 lines
2.5 KiB
Markdown
42 lines
2.5 KiB
Markdown
# DataTable unified header design QA
|
|
|
|
- Source visual truth: `C:\Users\user\AppData\Local\Temp\codex-clipboard-3cfee13a-b444-4ae7-84d0-2141c3fada51.png`
|
|
- Implementation screenshot: `C:\Users\user\.codex\visualizations\2026\08\02\019fc172-c8b8-7253-83ff-1261f079edf3\table-header-item-focused.png`
|
|
- Combined focused comparison: `C:\Users\user\.codex\visualizations\2026\08\02\019fc172-c8b8-7253-83ff-1261f079edf3\table-header-reference-comparison.png`
|
|
- Viewport: 1920 x 1200 CSS px
|
|
- Density: deviceScaleFactor 2
|
|
- Source pixels: 338 x 43; effective header crop 326 x 33, normalized to 593 x 60
|
|
- Implementation pixels: 1120 x 60; CSS size 560 x 30
|
|
- State: normal sortable table header, with sort interaction tested separately
|
|
|
|
## Full-view comparison evidence
|
|
|
|
SkillDamageDetail, CompactGradientRow, and ItemRow panel captures confirm that the shared header treatment remains legible and aligned in each table layout. The page contains 29 component panels with no console errors or broken images.
|
|
|
|
## Focused comparison evidence
|
|
|
|
The combined comparison normalizes the reference and implementation header height. Both use a near-black outer edge, gold-brown inner line, brown-to-black vertical gradient, muted gold label, square corners, and a solid downward sort triangle. A focused comparison is required because these border and glyph details are too small to judge in the full board.
|
|
|
|
## Required fidelity surfaces
|
|
|
|
- Fonts and typography: existing DCalc/SimSun stack retained; muted gold labels remain crisp at the component scale.
|
|
- Spacing and layout rhythm: all four DataTable header variants are 30px high; 1px column gaps and internal padding are consistent.
|
|
- Colors and visual tokens: shared colors reuse the existing `#4a3c26` border and `#bc9e58` text palette, with one common brown-black gradient.
|
|
- Image quality and asset fidelity: no raster asset is required or introduced; the reference contains only code-native table UI.
|
|
- Copy and content: existing table labels are unchanged.
|
|
|
|
## Comparison history
|
|
|
|
1. First pass found the generic header cell at 29px while the other variants were 30px. Removed the inherited row bottom border; all header and cell heights now measure 30px.
|
|
2. Second pass found ItemRow `锻造` and `拍卖信息` sort arrows clipped by narrow tracks. Expanded only those aligned header/body tracks; the final capture shows complete labels and triangles.
|
|
|
|
## Findings
|
|
|
|
No actionable P0, P1, or P2 mismatch remains.
|
|
|
|
## Remaining risk
|
|
|
|
Only Chrome was rendered. Other browser font rasterization may differ slightly.
|
|
|
|
final result: passed
|