From ed349693db9a8a2648819bf445e889ab362ea04f Mon Sep 17 00:00:00 2001
From: yuxuanhui <ud.k2007@gmail.com>
Date: Sat, 12 Sep 2026 13:21:08 +0800
Subject: [PATCH] fix: align scope picker with catalog toolbar

---
 .../src/components/CatalogTableToolbar.tsx    |  3 ++
 frontend/src/pages/DatasetPage.tsx            | 15 ++++++----
 frontend/src/preparations/FieldDirectory.tsx  | 21 ++++++++------
 frontend/src/settings/ScopePicker.tsx         |  7 ++++-
 frontend/src/settings/style.css               | 29 ++++++++++++++++++-
 frontend/tests/dataset.spec.ts                | 20 +++++++++++++
 6 files changed, 78 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/CatalogTableToolbar.tsx b/frontend/src/components/CatalogTableToolbar.tsx
index 6c0ac89..e3910b5 100644
--- a/frontend/src/components/CatalogTableToolbar.tsx
+++ b/frontend/src/components/CatalogTableToolbar.tsx
@@ -70,6 +70,7 @@ export function CatalogTableToolbar({
   label,
   active = true,
   filterCount = 0,
+  scope,
   filters,
   onApply,
   onReset,
@@ -82,6 +83,7 @@ export function CatalogTableToolbar({
   label: string;
   active?: boolean;
   filterCount?: number;
+  scope?: ReactNode;
   filters: ReactNode;
   onApply: () => void;
   onReset: () => void;
@@ -149,6 +151,7 @@ export function CatalogTableToolbar({
         role="toolbar"
         aria-label={`${label}表格工具栏`}
       >
+        {scope}
         <div className="catalog-toolbar-tools">
           {popup(
             "filter",
diff --git a/frontend/src/pages/DatasetPage.tsx b/frontend/src/pages/DatasetPage.tsx
index 259436f..d5f0626 100644
--- a/frontend/src/pages/DatasetPage.tsx
+++ b/frontend/src/pages/DatasetPage.tsx
@@ -310,12 +310,6 @@ export function DatasetPage({
   );
   return (
     <section className="preparation-page">
-      <ScopeControls
-        value={scope}
-        onChange={setScope}
-        active={active}
-        revision={version}
-      />
       {error && <Banner type="danger" description={error} />}
       {copied && (
         <Banner
@@ -329,6 +323,15 @@ export function DatasetPage({
         />
       )}
       <CatalogTableToolbar
+        scope={
+          <ScopeControls
+            inline
+            value={scope}
+            onChange={setScope}
+            active={active}
+            revision={version}
+          />
+        }
         label="数据目录"
         active={active && !suspended && !detail}
         filterCount={[q, category, subcategory].filter(Boolean).length}
diff --git a/frontend/src/preparations/FieldDirectory.tsx b/frontend/src/preparations/FieldDirectory.tsx
index 1603299..2585148 100644
--- a/frontend/src/preparations/FieldDirectory.tsx
+++ b/frontend/src/preparations/FieldDirectory.tsx
@@ -209,16 +209,19 @@ export function FieldBrowser({
     setDraft((old) => ({ ...old, [k]: v }));
   return (
     <div className="preparation-fields">
-      {!fixedScope && (
-        <ScopeControls
-          value={scope}
-          onChange={setScope}
-          local={source === "local"}
-          active={active}
-          revision={revision}
-        />
-      )}
       <CatalogTableToolbar
+        scope={
+          !fixedScope ? (
+            <ScopeControls
+              inline
+              value={scope}
+              onChange={setScope}
+              local={source === "local"}
+              active={active}
+              revision={revision}
+            />
+          ) : undefined
+        }
         label="字段目录"
         active={active && !adding}
         columns={columnSettings}
diff --git a/frontend/src/settings/ScopePicker.tsx b/frontend/src/settings/ScopePicker.tsx
index a18fb41..5955140 100644
--- a/frontend/src/settings/ScopePicker.tsx
+++ b/frontend/src/settings/ScopePicker.tsx
@@ -18,6 +18,7 @@ export function ScopePicker({
   value,
   onChange,
   local = false,
+  inline = false,
   active = true,
   revision = "",
   options,
@@ -28,6 +29,7 @@ export function ScopePicker({
   value: Scope;
   onChange: (scope: Scope) => void;
   local?: boolean;
+  inline?: boolean;
   active?: boolean;
   revision?: string;
   options?: ScopeOption[];
@@ -86,7 +88,10 @@ export function ScopePicker({
     value.universe &&
     Number.isFinite(value.delay);
   return (
-    <section className="scope-picker" aria-label="组合选择">
+    <section
+      className={`scope-picker${inline ? " scope-picker-inline" : ""}`}
+      aria-label="组合选择"
+    >
       <div className="scope-picker-summary">
         <div>
           <span className="settings-label">组合</span>
diff --git a/frontend/src/settings/style.css b/frontend/src/settings/style.css
index 670a9eb..9de9c48 100644
--- a/frontend/src/settings/style.css
+++ b/frontend/src/settings/style.css
@@ -5,7 +5,7 @@
 .scope-picker-summary {
   display: flex;
   align-items: center;
-  justify-content: space-between;
+  justify-content: flex-start;
   gap: 16px;
   padding: 12px;
   border: 1px solid var(--semi-color-border);
@@ -83,3 +83,30 @@
     grid-template-columns: minmax(0, 1fr);
   }
 }
+
+/* The toolbar variant keeps the summary compact; editing does not move the table. */
+.scope-picker-inline {
+  position: relative;
+  margin: 0;
+  max-width: 100%;
+}
+.scope-picker-inline .scope-picker-summary {
+  padding: 0;
+  border: 0;
+  gap: 8px;
+  flex-wrap: wrap;
+}
+.scope-picker-inline .scope-picker-panel {
+  position: absolute;
+  top: calc(100% + 8px);
+  left: 0;
+  z-index: 10;
+  box-sizing: border-box;
+  width: min(560px, calc(100vw - 48px));
+  max-height: min(600px, 65dvh);
+  overflow-y: auto;
+  background: var(--semi-color-bg-2);
+  border: 1px solid var(--semi-color-border);
+  border-radius: 6px;
+  box-shadow: var(--semi-shadow-elevated);
+}
diff --git a/frontend/tests/dataset.spec.ts b/frontend/tests/dataset.spec.ts
index 80034fe..bf91bb5 100644
--- a/frontend/tests/dataset.spec.ts
+++ b/frontend/tests/dataset.spec.ts
@@ -219,6 +219,26 @@ test("目录表格保持紧凑行高、截断和固定分页", async ({ page })
   await expect(
     table.locator(".semi-tag").filter({ hasText: "已同步字段" }),
   ).toBeVisible();
+  const summary = page
+    .getByRole("toolbar", { name: "数据目录表格工具栏" })
+    .locator(".scope-picker-summary");
+  const summaryBox = await summary.boundingBox();
+  const filterBox = await page
+    .getByRole("button", { name: "筛选数据目录", exact: true })
+    .boundingBox();
+  expect(
+    Math.abs(
+      summaryBox!.y +
+        summaryBox!.height / 2 -
+        filterBox!.y -
+        filterBox!.height / 2,
+    ),
+  ).toBeLessThan(3);
+  const textBox = await summary.locator(":scope > div").boundingBox();
+  const changeBox = await summary
+    .getByRole("button", { name: "更改组合" })
+    .boundingBox();
+  expect(changeBox!.x - textBox!.x - textBox!.width).toBeLessThanOrEqual(16);
   await page.screenshot({ path: "test-results/catalog-table-layout.png" });
   await page
     .getByRole("navigation", { name: "主导航" })