hy-screen-2.0/design-qa.md

**Source Visual Truth**
- Reference screenshot: `/Users/mocker/.codex/attachments/448ee497-991a-4afa-b23d-00015b35ab41/image-1.png`
- Reference source: `/Users/mocker/Downloads/ThreeProject-gd_副本/src/components/mCard/index.vue`
- Reference chart source: `/Users/mocker/Downloads/ThreeProject-gd_副本/src/views/gdMap/components/BulkCommoditySalesChart.vue`

**Implementation Evidence**
- Home: `/tmp/screen2-home-bright-pass2-wait.png`
- Forest-Grass-Wet: `/tmp/screen2-forest-grass-wet-bright-check.png`
- Ecological Protection: `/tmp/screen2-ecological-protection-bright-check.png`
- Yak Management: `/tmp/screen2-yak-management-bright-check.png`
- Pasture Management: `/tmp/screen2-pasture-management-bright-check.png`
- Yak Industry Chain before final label fix: `/tmp/screen2-yak-industry-chain-four-card-check.png`
- Yak Industry Chain artificial grassland final: `/tmp/screen2-yak-industry-chain-final-check.png`
- Viewport: `1920x1080`
- Local route base: `http://127.0.0.1:5174/#/platform`

**Checks Completed**
- Card shell uses the reference fill/opacity, with page-level extra `filter`, drop-shadow, and title glow removed.
- Homepage chart labels, dashed grid lines, units, and bar proportions were aligned with the reference chart style.
- `forestGrassWet`, `ecologicalProtection`, `yakManagement`, `pastureManagement`, and `yakIndustryChain` no longer override `m-card` into the darker/blurrier style.
- WebGL pixel ratio cap is now `2`, improving map and canvas sharpness on the 1920x1080 target.
- Yak Industry Chain default stage now has four meaningful left cards:
  - 家庭生态牧场乡镇分布
  - 标准化建设配置
  - 乡镇割草地、储草基地面积
  - 草料配套类型占比
- Yak Industry Chain top metric label was shortened from `活动场地及通道` to `活动场地` to avoid text/value collision; the source data field remains unchanged.

**Yak Industry Chain DOM Verification**
- Left card positions: `y=128/367/606/831`, widths about `385px`, four cards present.
- Right list card height: `466px`, matching the previous “最高占据两个卡片高度” direction.
- Top metrics after fix:
  - 家庭生态牧场 252处
  - 标准化暖棚 61600㎡
  - 饲草料库 12000㎡
  - 活动场地 108800㎡
- Artificial grassland topic uses business dimensions instead of plot-only wording:
  - 人工种草乡镇面积
  - 年度项目建设面积
  - 建设类型面积
  - 作业方式面积
- Artificial grassland top metrics verified in browser:
  - 实测种草面积 5.64万亩
  - 建设项目 6项
  - 覆盖乡镇 7个
  - 项目投资 4309.48万元

**Notes**
- The in-app browser screenshot channel timed out after the final HMR refresh on the WebGL-heavy industry page, but DOM verification confirmed the final four-card and label state.
- A standalone Playwright screenshot reached the login page because it had no authenticated session; no browser cookies or local storage were copied.

**Final Result**
- Visual standardization pass: passed for the requested style foundation.
- Remaining product decision: Ecological Protection still contains some low-density/empty-data panels; this pass did not invent new business data for empty modules.

## 2026-07-12 Homepage Brightness Correction

**Source Visual Truth**
- User reference crop: `/var/folders/dh/pf6z830j3w3drsd1k4ncl7br0000gn/T/codex-clipboard-ab9196eb-0d73-4022-9008-0da0dbe7948e.png`
- Reference project: `/Users/mocker/Downloads/ThreeProject-gd_副本`
- Reference card source: `/Users/mocker/Downloads/ThreeProject-gd_副本/src/components/mCard/index.vue`
- Reference chart source: `/Users/mocker/Downloads/ThreeProject-gd_副本/src/views/gdMap/components/BulkCommoditySalesChart.vue`

**Implementation Evidence**
- Browser-rendered homepage: `/tmp/screen2-home-overlay-fixed-loaded.png`
- Full-view comparison: `/tmp/screen2-reference-vs-home-fixed-full.png`
- Focused card comparison: `/tmp/screen2-reference-vs-home-fixed-card.png`
- Browser viewport: `1280x720`; platform design canvas: `1920x1080` through the existing autofit layer.
- State: homepage loaded, left and right panels visible, map animation complete.

**Comparison History**
- Earlier P1: card titles, chart labels, values, and borders were uniformly dimmer than the reference even though `m-card` used the same SVG and body opacity.
- Root cause: `.large-screen-wrap::after` belongs to a shell with `z-index: 3`, while each platform module is a sibling at `z-index: 1`. The background texture therefore covered the entire module in the integrated platform. In the standalone reference page the cards are children above that texture.
- Fix: disable the shell pseudo-element in the integrated platform. Map and module-owned backgrounds remain unchanged; only the unintended foreground veil is removed.
- Post-fix evidence: browser-computed overlay content is `none`; title is `16px/600`, opacity `1`; card body opacity remains the reference value `0.6`.

**Required Fidelity Surfaces**
- Fonts and typography: title size, weight, gradient, chart labels, and values now follow the reference source; ten-town density remains intentionally higher than the five-category reference.
- Spacing and layout: four-card stacks, 398px design width, 12px gaps, and the existing left/right perspective are unchanged.
- Colors and tokens: the foreground dimming veil is removed; card fill, border cyan, title gradient, and chart colors remain source-aligned.
- Image quality: original SVG card assets are byte-identical to the reference project; no replacement raster or CSS approximation was introduced.
- Copy and content: real Hongyuan business titles and ten-town data are preserved.
- Primary interaction and console check: homepage loaded successfully; no browser warnings or errors were recorded.

**Findings**
- No remaining actionable P0/P1/P2 mismatch in the homepage card brightness treatment.
- P3: the ten-town chart necessarily uses smaller labels than the five-item reference chart; this is an intentional data-density difference requested for the project.

final result: passed

## 2026-07-13 Yak Industry Chain Stage Rhythm Pass

**Scope**
- Page: `http://127.0.0.1:5174/#/platform?module=yak-industry-chain`
- Files changed:
  - `/Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/yakIndustryChain/data.js`
  - `/Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/yakIndustryChain/index.vue`
  - `/Users/mocker/Documents/code/hy-screen/screenV2.0/screen2-ui-standard.md`

**Stage Audit**
- Checked all 10 bottom stages: 家庭生态牧场、人工种草、规模化养殖基地、选育/扩繁基地、防灾减灾、奶源站、屠宰与加工、农机装备、牧草交易、社会化服务.
- All left sides render 4 visible cards.
- Generic right-side stages now follow the four-slot rhythm: list card `466px` + `环节核心指标 227px` + `建设要点 239px`.
- Artificial grassland remains four separate right cards; family pasture remains `2+1+1`.

**Fixes**
- Removed accidental `fillHeight` stretching from generic right-side `环节核心指标` and `建设要点`, which had made those cards `306/322px` and broke the four-slot rhythm.
- Added empty-state handling for yak-industry town column panels. When a stage has no positive business data, the panel shows `暂无业务统计数据` instead of an empty coordinate grid.
- Updated the UI standard: no-data charts must not render empty axes/grids.

**Evidence**
- 规模化养殖基地 fixed screenshot: `/tmp/screen2-standard-audit/yak-industry-规模化养殖基地-fixed-20260713.png`
- 奶源站 empty-state screenshot: `/tmp/screen2-standard-audit/yak-industry-奶源站-empty-standard-20260713.png`
- 牧草交易 empty-state screenshot: `/tmp/screen2-standard-audit/yak-industry-牧草交易-empty-standard-20260713.png`
- Browser console error check: no errors.
- Production build check: `npm run build` passed.

final result: passed

## 2026-07-13 Ecological National Park Top Metrics

**Scope**
- Page: `http://127.0.0.1:5174/#/platform?module=ecological-protection&view=national-park`
- File changed: `/Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/platform/index.vue`
- Screenshot evidence: `/tmp/screen2-standard-audit/ecology-national-park-top-metrics-home-style-stable-20260713.png`

**Fix**
- The national park five-metric strip now reuses the homepage top-stat presentation instead of a custom full-width summary band.
- Removed the top-stat sweep pseudo-background inside the platform top metric area so five indicators no longer visually merge into one dark translucent bar.
- Added a compact national-park five-item rule so `公益岗位` stays clear of the right-side cards while preserving the homepage-style icon, label, value and unit.

**Validation**
- Browser check at `1920x1080`: five metrics render as separate homepage-style indicators.
- Computed top metric wrapper: `display: flex`, width `1100px`, no summary-strip background.
- First right-side card begins at `x=1502`; last metric ends at `x=1528`, with text no longer sitting on the right-card title area.
- Browser console error check: no errors.

final result: passed

## 2026-07-13 Yak Management Trade Right Rhythm

**Scope**
- Page: `http://127.0.0.1:5174/#/platform?module=yak-management&view=trade`
- File changed: `/Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/yakManagement/index.vue`
- Screenshot evidence: `/tmp/screen2-standard-audit/yak-trade-right-four-slot-fixed-20260713.png`

**Fix**
- Removed manual height offsets from the trade right column.
- `出栏来源排行` now uses one standard side-card height.
- `交易出证台账` now uses the shared `getScreen2SpanHeight(sideCardHeight, 2)` two-slot formula.

**Validation**
- Browser check at `1920x1080`.
- Right side measured as `出证结构统计 239px` + `出栏来源排行 227px` + `交易出证台账 466px`.
- Left side remains four cards: `246px + 227px + 227px + 246px`.

final result: passed

## 2026-07-13 Cross-Module Four-Card Continuation

**Scope**
- Excluded as requested: Grass-Livestock Balance, Smart Management.
- Checked modules: Home, Forest-Grass-Wet, Ecological Protection, Yak Management, Pasture Management, Yak Industry Chain.
- Viewport: `1920x1080`.
- Local route base: `http://127.0.0.1:5174/#/platform`.

**New Evidence**
- Ecological Protection / National Park right side four cards: `/tmp/screen2-standard-audit/ecological-national-park-right-four-20260713.png`
- Ecological Protection / Ecological Redline right side four cards: `/tmp/screen2-standard-audit/ecology-ecological-redline-right-four-20260713.png`
- Ecological Protection / Natural Protected Area right side four cards: `/tmp/screen2-standard-audit/ecology-natural-protected-area-right-four-20260713.png`
- Yak Management / Epidemic right side four-slot layout: `/tmp/screen2-standard-audit/yak-management-epidemic-map-visible-check-20260713.png`
- Yak Industry Chain / Artificial Grassland real topic click verification: `/tmp/screen2-standard-audit/yak-industry-artificial-real-20260713.png`
- Forest-Grass-Wet shared renderer cleanup: `/tmp/screen2-standard-audit/forest-grass-wet-overview-shared-style-20260712.png`
- Pasture Management glow cleanup: `/tmp/screen2-standard-audit/pasture-management-glow-cleanup-20260712.png`

**Fixes Completed**
- Ecological Protection national park right side no longer has a blank fourth slot; added `草畜承载能力` as a metric card.
- Ecological redline and natural protected area right side now use four cards:
  - `草原类型`: ring chart
  - `草原级占比`: rank bar
  - `林地质量`: heat/grade grid
  - `林草湿面积构成`: structure band
- Yak Management epidemic view now uses `乡镇覆盖均衡 + 村级覆盖进度 + 防疫记录台账(2 slots)` instead of one full-height ledger.
- Yak Industry Chain artificial grassland topic was verified through the real bottom topic switch, not a guessed URL parameter; left and right sides both render four cards.
- Shared `BusinessPanelRenderer` glow was reduced for heat cells, structure bands and split rows so retained charts match the current restrained cyan-blue system.

**Open Follow-Up**
- Engineering Analysis is an independent workspace rather than a side-card dashboard; it should be reviewed with its own workflow standard instead of forcing four side cards.
- Full production deployment was not performed in this pass.

## 2026-07-12 Homepage Chart Variety Pass

**Scope**
- Page: `http://127.0.0.1:5174/#/platform?module=home`
- Source file: `/Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/home/index.vue`
- Screenshot evidence: `/tmp/screen2-home-left-chart-stack-qa.png`

**Design Rule**
- The same screen must not repeat the exact same chart expression for adjacent cards.
- Chart style differences must come from the business reading task, not only from color changes.

**Homepage Mapping**
- 草地面积: vertical bar, used for ten-town area comparison without an extra trend overlay.
- 湿地面积: water-style capsule vertical bar, aligned with the resource-area comparison grammar but visually distinct from grassland.
- 草原类别: category proportion card, used for structure reading.
- 草地生产力: area line chart, used for productivity trend-like comparison.
- 牦牛存栏分布: vertical bar plus trend line, used for town livestock scale comparison and distribution fluctuation.
- 畜群结构: donut chart, used for herd composition.
- 草畜平衡: gauge cards, used for status comparison.

**Parameter Checks**
- Grassland and wetland both use full-width vertical composition, avoiding the right-side emptiness caused by the previous horizontal rank layout.
- Wetland uses a wider blue water-column treatment with rounded caps, while grassland keeps the slimmer square-cap column treatment.
- Yak stock distribution carries the subtle trend line so the page still has one bar-line combination without overloading both left resource cards.
- Background bars are dimmed to keep the data layer dominant.
- Browser console error check: no errors.

final result: passed