From 16ee4576a9ff3c4f91cc30cb4cedbfb41fb3de14 Mon Sep 17 00:00:00 2001
From: Ariver <shanghai3168@gmail.com>
Date: Thu, 18 Jun 2026 20:50:58 +0800
Subject: [PATCH] Record UI implementation lesson
---
C3.tools/round1-horizontal-waterfall-fixture-qa.sh | 68 +++++++++++++++++++++++++++++++---
1 files changed, 62 insertions(+), 6 deletions(-)
diff --git a/C3.tools/round1-horizontal-waterfall-fixture-qa.sh b/C3.tools/round1-horizontal-waterfall-fixture-qa.sh
index 712b8af..5463421 100755
--- a/C3.tools/round1-horizontal-waterfall-fixture-qa.sh
+++ b/C3.tools/round1-horizontal-waterfall-fixture-qa.sh
@@ -1,7 +1,7 @@
#!/bin/bash
# Round01.1 horizontal Waterfall fixture QA. It verifies the P1 masonry view:
-# no horizontal scroll, centered equal-width cards, variable heights, thumbnail
-# 40% max-height, App Shelf anchoring, and horizontal-mode Tab navigation.
+# no horizontal scroll, centered equal-width fixed-height cards, 150pt vertical
+# placement steps, App Shelf anchoring, and horizontal-mode Tab navigation.
set -euo pipefail
@@ -14,7 +14,7 @@
KEYBOARD_REPORT="$BUILD_REPORT_ROOT/round01-horizontal-waterfall-keyboard-report.json"
FILTER_REPORT="$BUILD_REPORT_ROOT/round01-horizontal-waterfall-filter-report.json"
FIXTURE_APP_COUNT="${ALIGNER_ROUND1_HORIZONTAL_WATERFALL_FIXTURE_APP_COUNT:-8}"
-FIXTURE_WINDOWS_PER_APP="${ALIGNER_ROUND1_HORIZONTAL_WATERFALL_FIXTURE_WINDOWS_PER_APP:-4}"
+FIXTURE_WINDOWS_PER_APP="${ALIGNER_ROUND1_HORIZONTAL_WATERFALL_FIXTURE_WINDOWS_PER_APP:-6}"
HOVER_APP_INDEX="${ALIGNER_ROUND1_HORIZONTAL_WATERFALL_HOVER_APP_INDEX:-7}"
KEY_SEQUENCE="${ALIGNER_ROUND1_HORIZONTAL_WATERFALL_KEY_SEQUENCE:-tab}"
REPORT_WAIT="${ALIGNER_ROUND1_HORIZONTAL_WATERFALL_REPORT_WAIT:-6.0}"
@@ -122,16 +122,34 @@
require(root.get("horizontalMasonryMaxScrollOffset", 0) > 0, "horizontal masonry must expose positive vertical max scroll offset")
require(root.get("horizontalMasonryScrollOffset", 0) > 0, "hovering a later App must anchor masonry vertically")
require(root.get("appShelfHoveredIndex") == hover_app_index, "debug hover must mark the requested App Shelf item")
+require(root.get("hoveredAppGroupIndex") == hover_app_index, "horizontal masonry must keep the hovered App group available to Waterfall visuals")
require(cards, "horizontal masonry fixture must expose cards")
widths = [round(card.get("frame", {}).get("width", 0), 1) for card in cards]
require(len(set(widths)) == 1, "horizontal masonry cards must be equal width")
heights = [round(card.get("frame", {}).get("height", 0), 1) for card in cards]
-require(len(set(heights)) >= 2, "horizontal masonry cards must expose variable heights")
+expected_card_height = 138.0
+expected_thumbnail_height = 106.0
+expected_card_step = 150.0
+require(len(set(heights)) == 1, "horizontal masonry cards must use one fixed height")
+require(abs(heights[0] - expected_card_height) <= 1.0, "horizontal masonry card height must match vertical Waterfall 138pt height")
require(all(card.get("frame", {}).get("x", -1) >= -1 for card in cards), "cards must not overflow left")
require(all(card.get("frame", {}).get("x", 0) + card.get("frame", {}).get("width", 0) <= waterfall_width + 1 for card in cards), "cards must not overflow right")
-require(all(card.get("thumbnailFrame", {}).get("height", 0) <= waterfall_height * 0.40 + 1.0 for card in cards), "thumbnail height must be capped to 40% of Waterfall height")
+thumbnail_heights = [round(card.get("thumbnailFrame", {}).get("height", 0), 1) for card in cards]
+require(all(abs(height - expected_thumbnail_height) <= 1.0 for height in thumbnail_heights), "horizontal masonry thumbnails must use the same fixed card template height as vertical cards")
require(all(card.get("titleBarFrame", {}).get("y", 0) >= card.get("thumbnailFrame", {}).get("y", 0) + card.get("thumbnailFrame", {}).get("height", 0) for card in cards), "title bars must remain above thumbnails")
+
+cards_by_lane = {}
+for card in cards:
+ lane_x = round(card.get("frame", {}).get("x", 0), 1)
+ cards_by_lane.setdefault(lane_x, []).append(card)
+lane_steps = []
+for lane_cards in cards_by_lane.values():
+ ordered = sorted(lane_cards, key=lambda card: card.get("frame", {}).get("y", 0), reverse=True)
+ for upper, lower in zip(ordered, ordered[1:]):
+ lane_steps.append(round(upper.get("frame", {}).get("y", 0) - lower.get("frame", {}).get("y", 0), 1))
+require(lane_steps, "fixture must place multiple cards in at least one horizontal masonry lane")
+require(all(abs(step - expected_card_step) <= 1.0 for step in lane_steps), "horizontal masonry vertical placement step must be 150pt")
for expected_index, column in enumerate(columns):
require(column.get("appGroupIndex") == expected_index, "appGroupIndex must remain sequential")
@@ -144,13 +162,49 @@
hover_visible = hover_first_card.get("visibleFrame", {})
require(hover_visible.get("y", -9999) < waterfall_height + 1, "hovered App first card should be brought into vertical viewport")
require(hover_visible.get("y", 0) + hover_visible.get("height", 0) > -1, "hovered App first card should not be fully below viewport")
+hover_cards = hover_column.get("cards", [])
+non_hover_cards = [
+ card
+ for column in columns
+ if column.get("appGroupIndex") != hover_app_index
+ for card in column.get("cards", [])
+]
+blue_reference = next(
+ (
+ color
+ for segment in root.get("spaceLaneSegments", [])
+ for color in segment.get("windowBlockColors", [])
+ if color.get("alpha", 0) > 0
+ ),
+ None
+)
+require(blue_reference is not None, "fixture must expose a Space Lane blue reference color")
+require(all("appLinked" in card.get("visualStates", []) for card in hover_cards), "all cards for the hovered App must expose appLinked visual state")
+require(all("appLinked" not in card.get("visualStates", []) for card in non_hover_cards), "non-hovered App cards must not expose appLinked visual state")
+require(all(card.get("shadowOpacity", 0) >= 0.15 for card in hover_cards), "hovered App cards must float with visible shadow opacity")
+require(all(card.get("shadowRadius", 0) >= 18 for card in hover_cards), "hovered App cards must float with visible shadow radius")
+require(all(card.get("shadowOpacity", 1) <= 0.01 for card in non_hover_cards if "spaceFocused" not in card.get("visualStates", []) and "hover" not in card.get("visualStates", []) and "selected" not in card.get("visualStates", [])), "normal non-hovered cards must not inherit App hover shadow")
+for card in hover_cards:
+ title_fill = card.get("titleBarBackgroundColor", {})
+ require(title_fill.get("alpha", 0) >= 0.16, "hovered App card title bar must get a visible blue fill")
+ for channel in ("red", "green", "blue"):
+ require(
+ abs(title_fill.get(channel, -1) - blue_reference.get(channel, -2)) <= 0.002,
+ f"hovered App card title bar must use the Space Lane blue reference for {channel}"
+ )
+require(all(card.get("titleBarBackgroundColor", {}).get("alpha", 1) <= 0.01 for card in non_hover_cards), "non-hovered App card title bars must stay clear")
print(json.dumps({
"mode": root.get("waterfallViewMode"),
"appCount": report.get("appCount"),
"windowCount": report.get("windowCount"),
"cardWidth": widths[0],
- "distinctHeights": sorted(set(heights))[:6],
+ "cardHeight": heights[0],
+ "thumbnailHeight": thumbnail_heights[0],
+ "cardStep": expected_card_step,
+ "hoveredAppGroupIndex": root.get("hoveredAppGroupIndex"),
+ "hoveredAppLinkedCardCount": len(hover_cards),
+ "hoveredAppTitleBarFill": hover_cards[0].get("titleBarBackgroundColor"),
"horizontalMasonryScrollOffset": root.get("horizontalMasonryScrollOffset"),
"horizontalMasonryMaxScrollOffset": root.get("horizontalMasonryMaxScrollOffset")
}, indent=2, ensure_ascii=False))
@@ -229,6 +283,8 @@
widths = [round(card.get("frame", {}).get("width", 0), 1) for card in cards]
require(len(set(widths)) == 1, "filtered horizontal cards must remain equal width")
+heights = [round(card.get("frame", {}).get("height", 0), 1) for card in cards]
+require(len(set(heights)) == 1 and abs(heights[0] - 138.0) <= 1.0, "filtered horizontal cards must keep the fixed 138pt height")
visible_width = root.get("waterfallVisibleWidth", 0)
require(all(card.get("frame", {}).get("x", -1) >= -1 for card in cards), "filtered cards must not overflow left")
require(all(card.get("frame", {}).get("x", 0) + card.get("frame", {}).get("width", 0) <= visible_width + 1 for card in cards), "filtered cards must not overflow right")
--
Gitblit v1.9.3