deploy: 同步 UI 驗收版本

scripts/verify_ui_layout.py

@@ -52,13 +52,61 @@ def _metrics(locator: Locator) -> dict[str, float | str]:
             width: Math.round(box.width),
             height: Math.round(box.height),
             fontSize: style.fontSize,
-            lineHeight: style.lineHeight
+            fontWeight: style.fontWeight,
+            lineHeight: style.lineHeight,
+            borderTopWidth: style.borderTopWidth
           };
         }"""
     )
 
 
+def _all_metrics(locator: Locator) -> list[dict[str, float | str]]:
+    return locator.evaluate_all(
+        """elements => elements.map(element => {
+          const box = element.getBoundingClientRect();
+          const style = window.getComputedStyle(element);
+          return {
+            x: Math.round(box.x),
+            y: Math.round(box.y),
+            width: Math.round(box.width),
+            height: Math.round(box.height),
+            fontSize: style.fontSize,
+            fontWeight: style.fontWeight,
+            lineHeight: style.lineHeight,
+            borderTopWidth: style.borderTopWidth
+          };
+        })"""
+    )
+
+
+def _dropdown_metrics(page: Page) -> dict:
+    combo = page.locator("#demo-selector [role='combobox']").first
+    combo.click()
+    listbox = page.locator('#demo-selector [role="listbox"]').first
+    option = page.locator(
+        '#demo-selector [role="listbox"] [role="option"]'
+    ).first
+    option.wait_for(state="visible")
+    metrics = {
+        "control": _metrics(combo),
+        "listbox": _metrics(listbox),
+        "option": _metrics(option),
+        "frontmostRole": option.evaluate(
+            """element => {
+              const box = element.getBoundingClientRect();
+              return document.elementFromPoint(
+                box.left + 16,
+                box.top + box.height / 2
+              )?.getAttribute("role") ?? "";
+            }"""
+        ),
+    }
+    page.keyboard.press("Escape")
+    return metrics
+
+
 def _page_metrics(page: Page) -> dict:
+    dropdown = _dropdown_metrics(page)
     metrics = {
         "viewportWidth": page.evaluate("window.innerWidth"),
         "documentWidth": page.evaluate("document.documentElement.scrollWidth"),
@@ -70,11 +118,18 @@ def _page_metrics(page: Page) -> dict:
         "resultLegend": _metrics(page.locator(".result-legend").first),
         "legendTitle": _metrics(page.locator(".result-legend h2").first),
         "legendItem": _metrics(page.locator(".legend-items li").first),
+        "legendCards": _all_metrics(page.locator(".legend-items li")),
         "legendLabel": _metrics(page.locator(".legend-items strong").first),
+        "legendAction": _metrics(page.locator(".legend-action").first),
+        "legendDots": _all_metrics(page.locator(".legend-dot")),
         "sourceHeading": _metrics(page.locator(".source-brief h3").first),
         "sourceText": _metrics(page.locator(".source-brief p").first),
         "demoHeading": _metrics(page.locator(".demo-heading h3").first),
         "demoText": _metrics(page.locator(".demo-heading p").first),
+        "demoDropdownControl": dropdown["control"],
+        "demoDropdownListbox": dropdown["listbox"],
+        "demoDropdownOption": dropdown["option"],
+        "demoDropdownFrontmostRole": dropdown["frontmostRole"],
         "demoSelectorAccessible": page.get_by_label("範例文件").is_visible(),
         "documentPickerLabelVisible": page.locator(
             "#document-upload"
@@ -91,6 +146,7 @@ def _page_metrics(page: Page) -> dict:
         "settingsPanel": _metrics(page.locator(".settings-section").first),
         "actionPanel": _metrics(page.locator(".action-section").first),
         "taskHeading": _metrics(page.locator(".task-heading").first),
+        "stepMarkers": _all_metrics(page.locator(".task-step")),
         "taskTitle": _metrics(page.locator(".task-heading h2").first),
         "taskCopy": _metrics(page.locator(".task-heading p").first),
         "fieldLabel": _metrics(
@@ -540,14 +596,62 @@ def main() -> None:
         encoding="utf-8",
     )
 
+    desktop_step_x = [marker["x"] for marker in desktop["stepMarkers"]]
+    mobile_step_x = [marker["x"] for marker in mobile["stepMarkers"]]
+    desktop_dot_widths = [dot["width"] for dot in desktop["legendDots"]]
+    desktop_dot_heights = [dot["height"] for dot in desktop["legendDots"]]
+    mobile_dot_widths = [dot["width"] for dot in mobile["legendDots"]]
+    mobile_dot_heights = [dot["height"] for dot in mobile["legendDots"]]
+
+    for viewport_name, metrics in (
+        ("wide", wide),
+        ("desktop", desktop),
+        ("mobile", mobile),
+    ):
+        legend_cards = metrics["legendCards"]
+        assert len(legend_cards) == 3, (
+            f"{viewport_name} viewport should render exactly three legend cards"
+        )
+        legend_widths = [card["width"] for card in legend_cards]
+        legend_heights = [card["height"] for card in legend_cards]
+        assert max(legend_widths) - min(legend_widths) <= 1, (
+            f"{viewport_name} legend cards should have equal widths: {legend_widths}"
+        )
+        assert max(legend_heights) - min(legend_heights) <= 1, (
+            f"{viewport_name} legend cards should have equal heights: {legend_heights}"
+        )
+
     assert desktop["viewportWidth"] == desktop["documentWidth"]
     assert mobile["viewportWidth"] == mobile["documentWidth"]
     assert float(desktop["bodyText"]["fontSize"].removesuffix("px")) >= 20
     assert float(desktop["legendTitle"]["fontSize"].removesuffix("px")) >= 22
     assert float(desktop["legendItem"]["fontSize"].removesuffix("px")) >= 18
-    assert float(desktop["legendLabel"]["fontSize"].removesuffix("px")) >= 20
+    assert float(desktop["legendLabel"]["fontSize"].removesuffix("px")) >= 22
+    assert float(desktop["legendAction"]["fontSize"].removesuffix("px")) >= 20
+    assert len(desktop["legendDots"]) == 3
+    assert desktop_dot_widths == [18, 18, 18]
+    assert desktop_dot_heights == [18, 18, 18]
     assert float(desktop["sourceText"]["fontSize"].removesuffix("px")) >= 19
     assert float(desktop["demoText"]["fontSize"].removesuffix("px")) >= 18
+    assert (
+        float(desktop["demoDropdownControl"]["fontSize"].removesuffix("px"))
+        >= 21
+    )
+    assert (
+        float(desktop["demoDropdownOption"]["fontSize"].removesuffix("px"))
+        >= 20
+    )
+    assert desktop["demoDropdownOption"]["height"] >= 44
+    assert (
+        desktop["demoDropdownListbox"]["y"]
+        >= desktop["demoDropdownControl"]["y"]
+        + desktop["demoDropdownControl"]["height"]
+    )
+    assert desktop["demoDropdownFrontmostRole"] == "option"
+    assert len(desktop["stepMarkers"]) == 4
+    assert all(marker["width"] >= 46 for marker in desktop["stepMarkers"])
+    assert all(marker["height"] >= 46 for marker in desktop["stepMarkers"])
+    assert max(desktop_step_x) - min(desktop_step_x) <= 1
     assert float(desktop["taskTitle"]["fontSize"].removesuffix("px")) >= 28
     assert float(desktop["taskCopy"]["fontSize"].removesuffix("px")) >= 20
     assert float(desktop["fieldLabel"]["fontSize"].removesuffix("px")) >= 18
@@ -558,7 +662,27 @@ def main() -> None:
     assert float(desktop["statusText"]["fontSize"].removesuffix("px")) >= 19
     assert float(mobile["bodyText"]["fontSize"].removesuffix("px")) >= 19
     assert float(mobile["legendItem"]["fontSize"].removesuffix("px")) >= 18
+    assert float(mobile["legendLabel"]["fontSize"].removesuffix("px")) >= 21
+    assert float(mobile["legendAction"]["fontSize"].removesuffix("px")) >= 19
+    assert len(mobile["legendDots"]) == 3
+    assert mobile_dot_widths == [18, 18, 18]
+    assert mobile_dot_heights == [18, 18, 18]
     assert float(mobile["sourceText"]["fontSize"].removesuffix("px")) >= 19
+    assert (
+        float(mobile["demoDropdownOption"]["fontSize"].removesuffix("px"))
+        >= 20
+    )
+    assert mobile["demoDropdownOption"]["height"] >= 44
+    assert (
+        mobile["demoDropdownListbox"]["y"]
+        >= mobile["demoDropdownControl"]["y"]
+        + mobile["demoDropdownControl"]["height"]
+    )
+    assert mobile["demoDropdownFrontmostRole"] == "option"
+    assert len(mobile["stepMarkers"]) == 4
+    assert all(marker["width"] >= 46 for marker in mobile["stepMarkers"])
+    assert all(marker["height"] >= 46 for marker in mobile["stepMarkers"])
+    assert max(mobile_step_x) - min(mobile_step_x) <= 1
     assert float(mobile["fieldLabel"]["fontSize"].removesuffix("px")) >= 18
     assert desktop["masthead"]["height"] <= 150
     assert desktop["resultLegend"]["height"] <= 140
@@ -569,6 +693,16 @@ def main() -> None:
     assert desktop["uploadPromptInsetTop"] >= 6
     assert desktop["uploadPromptInsetBottom"] >= 6
     assert desktop["documentHeight"] <= 1900
+    assert (
+        float(
+            desktop["settingsPanel"]["borderTopWidth"].removesuffix("px")
+        )
+        >= 8
+    )
+    assert (
+        float(desktop["actionPanel"]["borderTopWidth"].removesuffix("px"))
+        >= 8
+    )
     assert (
         abs(
             desktop["settingsPanel"]["y"]

src/doc_inspector/ui.py

@@ -290,6 +290,8 @@ gradio-app {
 .legend-items {
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
+  grid-auto-rows: 1fr;
+  align-items: stretch;
   gap: 10px;
   margin: 0;
   padding: 0;
@@ -298,10 +300,13 @@ gradio-app {
 
 .legend-items li {
   display: flex;
+  height: 100%;
   min-width: 0;
-  min-height: 64px;
-  gap: 9px;
+  min-height: 68px;
+  gap: 10px;
+  align-self: stretch;
   align-items: center;
+  box-sizing: border-box;
   padding: 9px 11px;
   border: 1px solid;
   border-radius: var(--radius-sm);
@@ -333,7 +338,7 @@ gradio-app {
 
 .legend-items strong {
   color: var(--ui-ink);
-  font-size: 20px;
+  font-size: 22px;
   font-weight: 800;
   line-height: 1.2;
 }
@@ -341,16 +346,22 @@ gradio-app {
 .legend-action {
   margin-top: 2px;
   color: var(--ui-muted);
-  font-size: 18px;
+  font-size: 20px;
   line-height: 1.3;
 }
 
 .legend-dot {
-  width: 14px;
-  height: 14px;
-  flex: 0 0 14px;
+  width: 18px;
+  min-width: 18px;
+  max-width: 18px;
+  height: 18px;
+  min-height: 18px;
+  max-height: 18px;
+  flex: 0 0 18px;
+  box-sizing: border-box;
+  border: 2px solid oklch(99% 0 0 / 0.84);
   border-radius: 50%;
-  box-shadow: 0 0 0 3px oklch(99% 0 0 / 0.72);
+  box-shadow: none;
 }
 
 .legend-dot-red {
@@ -376,26 +387,40 @@ gradio-app {
 }
 
 .workflow-section {
+  position: relative;
   gap: 8px !important;
   min-width: 0 !important;
   padding: 16px 28px !important;
   border: 0 !important;
   border-radius: 0 !important;
-  background: transparent !important;
+  background: var(--ui-surface) !important;
   box-shadow: none !important;
 }
 
 .workflow-section + .workflow-section {
-  border-top: 1px solid var(--ui-border) !important;
+  border-top: 10px solid var(--ui-bg) !important;
+  box-shadow: inset 0 2px 0 var(--ui-border) !important;
+}
+
+.settings-section {
+  background: oklch(98.4% 0.007 205) !important;
 }
 
 .action-section {
   background: var(--ui-surface-soft) !important;
 }
 
+.workbench .form {
+  overflow: visible !important;
+}
+
+.workflow-section:has([role="listbox"]) {
+  z-index: 20;
+}
+
 .task-heading {
   display: flex;
-  gap: 13px;
+  gap: 15px;
   align-items: flex-start;
   margin: 0;
 }
@@ -433,17 +458,26 @@ gradio-app {
 
 .task-step {
   display: inline-flex;
-  width: 38px;
-  height: 38px;
-  flex: 0 0 38px;
+  width: 46px;
+  height: 46px;
+  flex: 0 0 46px;
   align-items: center;
   justify-content: center;
   border-radius: 50%;
   background: var(--ui-primary);
   color: #ffffff;
-  font-size: 20px;
+  font-size: 23px;
   font-weight: 800;
   line-height: 1;
+  box-shadow: 0 0 0 4px var(--ui-surface);
+}
+
+.settings-section .task-step {
+  box-shadow: 0 0 0 4px oklch(98.4% 0.007 205);
+}
+
+.action-section .task-step {
+  box-shadow: 0 0 0 4px var(--ui-surface-soft);
 }
 
 .upload-control {
@@ -512,7 +546,8 @@ gradio-app {
 .field-control [role="combobox"],
 .field-control button {
   min-height: 56px !important;
-  font-size: 20px !important;
+  font-size: 21px !important;
+  font-weight: 620 !important;
 }
 
 .field-control,
@@ -651,13 +686,52 @@ gradio-app {
 #demo-selector [role="combobox"],
 #demo-selector button {
   min-height: 56px !important;
-  font-size: 20px !important;
+  font-size: 21px !important;
+  font-weight: 620 !important;
 }
 
 #demo-selector {
   min-height: 56px !important;
 }
 
+.gradio-container [role="listbox"] {
+  position: absolute !important;
+  top: calc(100% + 6px) !important;
+  right: 0 !important;
+  bottom: auto !important;
+  left: 0 !important;
+  width: 100% !important;
+  max-height: min(320px, 42vh) !important;
+  overflow-y: auto !important;
+  box-sizing: border-box !important;
+  padding: 6px !important;
+  border: 1px solid var(--ui-border-strong) !important;
+  border-radius: var(--radius-md) !important;
+  background: var(--ui-surface) !important;
+  box-shadow: 0 12px 28px oklch(24% 0.036 205 / 0.16) !important;
+}
+
+.gradio-container [role="listbox"] [role="option"] {
+  min-height: 46px !important;
+  padding: 9px 12px !important;
+  border-radius: var(--radius-sm) !important;
+  color: var(--ui-ink) !important;
+  font-size: 20px !important;
+  font-weight: 620 !important;
+  line-height: 1.4 !important;
+}
+
+.gradio-container [role="listbox"] [role="option"]:hover,
+.gradio-container [role="listbox"] [role="option"].active {
+  background: var(--ui-surface-muted) !important;
+}
+
+.gradio-container [role="listbox"] [role="option"][aria-selected="true"] {
+  background: var(--ui-primary-soft) !important;
+  color: var(--ui-primary-hover) !important;
+  font-weight: 760 !important;
+}
+
 .demo-btn {
   min-height: 56px !important;
   border: 1px solid var(--ui-primary) !important;
@@ -938,9 +1012,9 @@ gradio-app {
 }
 
 .results-heading {
-  margin-top: 22px;
+  margin-top: 18px;
   margin-bottom: 10px;
-  padding: 0 4px;
+  padding: 18px 28px 0;
 }
 
 .action-plan {
@@ -1278,7 +1352,7 @@ footer {
 
   .result-legend {
     display: block;
-    padding: 12px;
+    padding: 10px 12px;
   }
 
   .result-legend h2 {
@@ -1313,7 +1387,7 @@ footer {
   }
 
   .legend-items strong {
-    font-size: 20px;
+    font-size: 21px;
   }
 
   .legend-copy {
@@ -1324,7 +1398,7 @@ footer {
 
   .legend-action {
     margin-top: 0;
-    font-size: 18px;
+    font-size: 19px;
     line-height: 1.25;
   }
 
@@ -1358,6 +1432,10 @@ footer {
     padding: 14px 16px !important;
   }
 
+  .workflow-section + .workflow-section {
+    border-top-width: 8px !important;
+  }
+
   .task-heading {
     gap: 10px;
   }
@@ -1417,7 +1495,8 @@ footer {
   }
 
   .results-heading {
-    margin-top: 22px;
+    margin-top: 16px;
+    padding: 16px 16px 0;
   }
 
   .action-plan-header {

tests/test_ui.py

@@ -328,6 +328,39 @@ def test_civic_theme_keeps_light_and_dark_tokens_consistent() -> None:
         assert theme[token] == theme[f"{token}_dark"]
 
 
+def test_civic_css_keeps_steps_and_dropdowns_readable() -> None:
+    css = ui_module.CIVIC_CSS
+
+    assert ".workflow-section + .workflow-section" in css
+    assert "border-top: 10px solid var(--ui-bg)" in css
+    assert "box-shadow: inset 0 2px 0 var(--ui-border)" in css
+    assert "width: 18px" in css
+    assert "min-width: 18px" in css
+    assert "max-width: 18px" in css
+    assert "flex: 0 0 18px" in css
+    assert "font-size: 22px" in css
+    assert '.gradio-container [role="listbox"] [role="option"]' in css
+    assert "position: absolute !important" in css
+    assert "top: calc(100% + 6px) !important" in css
+    assert "bottom: auto !important" in css
+    assert '.workflow-section:has([role="listbox"])' in css
+    assert "min-height: 46px" in css
+    assert "font-size: 20px" in css
+    assert "width: 46px" in css
+    assert "flex: 0 0 46px" in css
+    assert "padding: 18px 28px 0" in css
+    assert ".results-heading::before" not in css
+
+
+def test_civic_css_keeps_legend_cards_equal_sized() -> None:
+    css = ui_module.CIVIC_CSS
+
+    assert "grid-auto-rows: 1fr" in css
+    assert "align-items: stretch" in css
+    assert "height: 100%" in css
+    assert "align-self: stretch" in css
+
+
 def test_load_demo_document_selects_file_and_matching_schema(tmp_path: Path) -> None:
     file_path, schema, status = load_demo_document_callback(
         "receipt_green",