1211120248
/
hy-screen-2.0
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 Commits
2 Branches
0 Tags
60 MiB
 
 
 
 
 
 
Tag: Branch: Tree: 87f624a88e
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from '87f624a88e'
${ noResults }
hy-screen-2.0/design-qa.md

21 KiB
Raw Blame History

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 Platform Loading And Yak/Pasture Recheck

Scope

  • Pages:
    • http://127.0.0.1:5174/#/platform?module=yak-industry-chain
    • http://127.0.0.1:5174/#/platform?module=pasture-management
    • http://127.0.0.1:5174/#/platform?module=yak-management&view=epidemic
  • File changed: /Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/platform/index.vue
  • Screenshot evidence:
    • /tmp/screen2-standard-audit/audit-yak-industry-chain-loading-fixed-20260713.jpg
    • /tmp/screen2-standard-audit/audit-pasture-management-loading-fixed-20260713.jpg
    • /tmp/screen2-standard-audit/audit-yak-management-epidemic-clean-20260713.jpg

Fix

  • Added a platform startup-loading safety timeout:
    • Homepage keeps up to 12s.
    • Other platform-loading modules keep up to 8s.
  • This prevents Yak Industry Chain and Pasture Management from remaining covered by a 100% platform loading layer when map initialization is slow or background-tab rendering is throttled.

Validation

  • Yak Industry Chain: loading node removed; top metrics render with real values; console error check passed.
  • Pasture Management: loading node removed; top metrics render with real values; yellow yak-recognition layer remains.
  • Yak Management / Epidemic: clean reload shows active 2026, top metric 涉及村数 10 个, and no console errors.
  • npm run build passed; remaining warnings are existing Cesium/Sass/chunk-size warnings.

final result: passed

2026-07-13 Forest-Grass-Wet / National Park Follow-Up QA

Scope

  • Pages:
    • http://127.0.0.1:5174/#/platform?module=forest-grass-wet
    • http://127.0.0.1:5174/#/platform?module=ecological-protection&view=national-park
  • Files changed:
    • /Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/platform/index.vue
    • /Users/mocker/Documents/code/hy-screen/screenV2.0/src/services/openApi.js
    • /Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/ecologicalProtection/data.js
    • /Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/forestGrassWet/components/BusinessPanelRenderer.vue
  • Screenshot evidence:
    • /tmp/screen2-standard-audit/forest-grass-wet-overview-final-20260713.jpg
    • /tmp/screen2-standard-audit/forest-grass-wet-woodland-click-final-20260713.jpg
    • /tmp/screen2-standard-audit/national-park-final-20260713.jpg

Fix

  • Four-item top metric layout now has more horizontal room and smaller four-card-specific icon/value/unit sizing, so long values such as 林草湿面积 1226.11 万亩 no longer visually clip.
  • Platform startup loading now only remains for modules that actively report platform-level loading progress; direct links to Forest-Grass-Wet, Ecological Protection, Yak Management and Smart Management no longer stay covered by a 100% loading mask.
  • Woodland 优势树种面积 now uses the compact no-wrap rank-bar treatment instead of the larger default bar style.
  • National Park 公益岗位分布 uses the homepage-like thin-column style, matching the restrained chart direction.

Validation

  • Browser check: bottom 林地资源 was clicked through the real UI state, not a guessed URL query.
  • Forest-Grass-Wet overview: no platform loading mask; top metric text is present in DOM; left/right cards keep the current restrained cyan-blue style.
  • Woodland: 林地面积分布 and 优势树种面积 both present; right-side 优势树种面积 text remains readable and no longer fills the entire card width.
  • National Park: grass/wetland stacked columns and job distribution keep weaker glow and clearer labels.
  • Browser console error check: no errors.
  • npm run build passed; remaining warnings are existing Cesium/Sass/chunk-size warnings.

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 Ecological Protection National Park Chart Cleanup

Scope

  • Page: http://127.0.0.1:5174/#/platform?module=ecological-protection&view=national-park
  • Files changed:
    • /Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/ecologicalProtection/data.js
    • /Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/forestGrassWet/components/BusinessPanelRenderer.vue
  • Screenshot evidence: /tmp/screen2-standard-audit/national-park-chart-style-optimized-v2-20260713.png

Fix

  • Kept the park business dimensions unchanged: grass/wetland area, grass/wetland productivity, township yak count, balance, zoning, households, jobs, capacity.
  • National park grass/wetland stack columns now use a restrained slim style: thin body, light grid, weak glow, values above the bars.
  • 乡镇牦牛数量 now uses a single lightweight horizontal distribution style.
  • 公益岗位分布 now uses the homepage-like plain thin-column treatment instead of the stronger glowing column style.

Validation

  • Browser check at 1920x1080.
  • Left side keeps four cards: 246px + 227px + 227px + 246px.
  • Right side keeps four cards: 239px + 227px + 227px + 239px.
  • Browser console error check: no errors.
  • npm run build passed; remaining warnings are existing Cesium/Sass/chunk-size warnings.

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-13 Cesium Map Label Crispness

Scope

  • Shared component: /Users/mocker/Documents/code/hy-screen/screenV2.0/src/components/CesiumMap/index.vue
  • Affected modules: Forest-Grass-Wet, Ecological Protection, Pasture Management, Yak Management, Yak Industry Chain.
  • Viewport: 1920x1080.

Issue

  • Township badges on the 3D map looked soft/blurry.
  • Cause: the badges are rendered as canvas images and then displayed as Cesium billboards inside a WebGL scene. When Cesium renders at browser-recommended 1x resolution and FXAA is enabled, the whole scene is post-processed, so text textures become softened.

Fix

  • Enabled high-DPI Cesium rendering with useBrowserRecommendedResolution: false.
  • Set viewer.resolutionScale to the current device pixel ratio, capped at 2.
  • Disabled Cesium FXAA post-process for this shared map to avoid blurring billboard text.
  • Regenerated township badge cache (v14-crisp-map-badge) with 3x-4x canvas backing pixels.
  • Removed glow blur from the badge text and kept a thinner dark outline for readable but sharper labels.

Validation

  • Screenshot evidence: /tmp/screen2-standard-audit/cesium-label-crisp-20260713.png
  • Browser route verified: http://127.0.0.1:5174/#/platform?module=forest-grass-wet
  • Browser console: only external resource 404s during local map loading; no Vue/runtime errors.

final result: passed

2026-07-13 Ecological Restoration Chart Fixes

Scope

  • Page: http://127.0.0.1:5174/#/platform?module=ecological-protection&view=restoration
  • Source files:
    • /Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/ecologicalProtection/data.js
    • /Users/mocker/Documents/code/hy-screen/screenV2.0/src/views/forestGrassWet/components/BusinessPanelRenderer.vue
  • Viewport: 1920x1080.

Fixes

  • 治理面积分布, 年度工程长度, and 年度项目数量 now use horizontal year labels instead of vertical split digits.
  • 乡镇治理面积分布 changed from a crowded horizontal bar list to the same water-column style used by 湿地面积, with horizontal township labels and no horizontal scrollbar.

Validation

  • Year-axis screenshot evidence: /tmp/screen2-standard-audit/ecology-restoration-year-axis-fixed-20260713.png
  • Township water-column screenshot evidence: /tmp/screen2-standard-audit/ecology-restoration-town-column-20260713.png
  • Automated DOM check confirmed the target township panel renders as business-columns is-variant-water is-dense has-unit-label.

final result: passed

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