组合
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: "主导航" })