From 8dde4c3c6df46acb34d02da52478d3f0bf9cd1d3 Mon Sep 17 00:00:00 2001
From: Syngnat <yangguofeng919@gmail.com>
Date: Thu, 25 Jun 2026 18:42:53 +0800
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B=20fix(tool-center):=20=E7=A7=BB?=
 =?UTF-8?q?=E9=99=A4=E5=86=85=E5=B5=8C=E5=B7=A5=E5=85=B7=E9=87=8D=E5=A4=8D?=
 =?UTF-8?q?=E6=A0=87=E9=A2=98=E5=A4=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 工具中心详情页统一承载入口标题和说明
- 数据同步、表结构比对和数据比对嵌入时隐藏内部 hero
- 数据目录、快捷键、连接包和安全更新嵌入时隐藏内部 Modal 标题
- 补充工具中心全 pane 标题归属回归断言
---
 frontend/src/App.tool-center.test.ts          |  54 ++++++++
 frontend/src/App.tsx                          |  14 +-
 .../ConnectionPackagePasswordModal.tsx        |   3 +-
 .../src/components/DataSyncModal.i18n.test.ts |   6 +
 frontend/src/components/DataSyncModal.tsx     | 124 +++++++++---------
 .../SecurityUpdateSettingsModal.i18n.test.tsx |   5 +
 .../SecurityUpdateSettingsModal.tsx           |   3 +-
 frontend/src/i18n/catalog.test.ts             |   2 +
 8 files changed, 138 insertions(+), 73 deletions(-)

diff --git a/frontend/src/App.tool-center.test.ts b/frontend/src/App.tool-center.test.ts
index 114710f..3536462 100644
--- a/frontend/src/App.tool-center.test.ts
+++ b/frontend/src/App.tool-center.test.ts
@@ -103,6 +103,60 @@ describe('tool center menu entries', () => {
     expect(appSource).toContain("borderBottom: `1px solid ${overlayTheme.divider}`");
   });
 
+  it('lets the tool center detail header own embedded tool titles', () => {
+    const renderPaneStart = appSource.indexOf('const renderToolCenterPane = () => {');
+    const renderPaneSource = appSource.slice(
+      renderPaneStart,
+      appSource.indexOf('};\n\n            return (', renderPaneStart),
+    );
+    const connectionPackageSource = renderPaneSource.slice(
+      renderPaneSource.indexOf("if (activeToolCenterPane.key === 'connection-package')"),
+      renderPaneSource.indexOf("if (activeToolCenterPane.key === 'data-root')"),
+    );
+    const dataRootSource = renderPaneSource.slice(
+      renderPaneSource.indexOf("if (activeToolCenterPane.key === 'data-root')"),
+      renderPaneSource.indexOf("if (activeToolCenterPane.key === 'security-update')"),
+    );
+    const securityUpdateSource = renderPaneSource.slice(
+      renderPaneSource.indexOf("if (activeToolCenterPane.key === 'security-update')"),
+      renderPaneSource.indexOf("activeToolCenterPane.key === 'schema-compare'"),
+    );
+    const dataSyncSource = renderPaneSource.slice(
+      renderPaneSource.indexOf("activeToolCenterPane.key === 'schema-compare'"),
+      renderPaneSource.indexOf("if (activeToolCenterPane.key === 'drivers')"),
+    );
+    const driverSource = renderPaneSource.slice(
+      renderPaneSource.indexOf("if (activeToolCenterPane.key === 'drivers')"),
+      renderPaneSource.indexOf("if (activeToolCenterPane.key === 'snippet-settings')"),
+    );
+    const snippetSource = renderPaneSource.slice(
+      renderPaneSource.indexOf("if (activeToolCenterPane.key === 'snippet-settings')"),
+      renderPaneSource.indexOf("if (activeToolCenterPane.key === 'shortcut-settings')"),
+    );
+    const shortcutSource = renderPaneSource.slice(
+      renderPaneSource.indexOf("if (activeToolCenterPane.key === 'shortcut-settings')"),
+      renderPaneSource.indexOf('return null;', renderPaneSource.indexOf("if (activeToolCenterPane.key === 'shortcut-settings')")),
+    );
+
+    expect(appSource).toContain('activeToolCenterPaneItem?.title ?? activeToolCenterGroup.title');
+    expect(connectionPackageSource).toContain('<ConnectionPackagePasswordModal');
+    expect(connectionPackageSource).not.toContain('renderUtilityModalTitle');
+    expect(dataRootSource).toContain('title={null}');
+    expect(dataRootSource).toContain('closable={false}');
+    expect(dataRootSource).not.toContain('renderUtilityModalTitle');
+    expect(securityUpdateSource).toContain('<SecurityUpdateSettingsModal');
+    expect(securityUpdateSource).not.toContain('renderUtilityModalTitle');
+    expect(dataSyncSource).toContain('<DataSyncModal');
+    expect(dataSyncSource).not.toContain('renderUtilityModalTitle');
+    expect(driverSource).toContain('<DriverManagerModal');
+    expect(driverSource).not.toContain('renderUtilityModalTitle');
+    expect(snippetSource).toContain('<SnippetSettingsModal');
+    expect(snippetSource).not.toContain('renderUtilityModalTitle');
+    expect(shortcutSource).toContain('title={null}');
+    expect(shortcutSource).toContain('closable={false}');
+    expect(shortcutSource).not.toContain('renderUtilityModalTitle');
+  });
+
   it('keeps the v2 AI entry in the sidebar and the legacy AI entry on the content edge', () => {
     expect(appSource).toContain('onToggleAI={toggleAIPanel}');
     expect(appSource).toContain('renderLegacyAIEdgeHandle');
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index 52d17a8..7221d62 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -3401,11 +3401,8 @@ function App() {
                   <Modal
                     embedded
                     open
-                    title={renderUtilityModalTitle(
-                      <HddOutlined />,
-                      t('app.data_root.title'),
-                      t('app.data_root.description'),
-                    )}
+                    title={null}
+                    closable={false}
                     onCancel={closeToolCenterPane}
                     footer={[
                       <Button key="close" onClick={closeToolCenterPane}>
@@ -3551,11 +3548,8 @@ function App() {
                   <Modal
                     embedded
                     open
-                    title={renderUtilityModalTitle(
-                      <LinkOutlined />,
-                      t('app.shortcuts.title'),
-                      t('app.shortcuts.description'),
-                    )}
+                    title={null}
+                    closable={false}
                     onCancel={() => {
                       setCapturingShortcutAction(null);
                       closeToolCenterPane();
diff --git a/frontend/src/components/ConnectionPackagePasswordModal.tsx b/frontend/src/components/ConnectionPackagePasswordModal.tsx
index 6878f20..af279f9 100644
--- a/frontend/src/components/ConnectionPackagePasswordModal.tsx
+++ b/frontend/src/components/ConnectionPackagePasswordModal.tsx
@@ -64,9 +64,10 @@ export default function ConnectionPackagePasswordModal({
     <Modal
       open={open}
       embedded={embedded}
-      title={(
+      title={embedded ? null : (
         <span style={{ minWidth: 0 }}>{title}</span>
       )}
+      closable={embedded ? false : undefined}
       onCancel={onCancel}
       destroyOnHidden={false}
       maskClosable={false}
diff --git a/frontend/src/components/DataSyncModal.i18n.test.ts b/frontend/src/components/DataSyncModal.i18n.test.ts
index 8f33853..97de84d 100644
--- a/frontend/src/components/DataSyncModal.i18n.test.ts
+++ b/frontend/src/components/DataSyncModal.i18n.test.ts
@@ -109,4 +109,10 @@ describe("DataSyncModal i18n", () => {
       /tr\(\s*(['"])data_sync\.compare_entry\.preview\.sql\.data_help\1/,
     );
   });
+
+  it('hides the modal hero when embedded in the tool center', () => {
+    expect(source).toContain('{!embedded && (');
+    expect(source).toContain('<div style={heroPanelStyle}>');
+    expect(source).toMatch(/embedded\s*\?\s*\(\s*dataSyncContent\s*\)/);
+  });
 });
diff --git a/frontend/src/components/DataSyncModal.tsx b/frontend/src/components/DataSyncModal.tsx
index ec841be..eb612fa 100644
--- a/frontend/src/components/DataSyncModal.tsx
+++ b/frontend/src/components/DataSyncModal.tsx
@@ -1388,71 +1388,73 @@ const DataSyncModal: React.FC<{
   const dataSyncContent = (
     <div style={modalWorkspaceStyle}>
       <div style={{ flex: "0 0 auto" }}>
-        <div style={heroPanelStyle}>
-          <div
-            style={{
-              display: "flex",
-              justifyContent: "space-between",
-              gap: 12,
-              alignItems: "flex-start",
-              flexWrap: "wrap",
-            }}
-          >
-            <div style={{ minWidth: 0 }}>
-              <div
-                style={{
-                  fontSize: 18,
-                  fontWeight: 700,
-                  color: darkMode ? "#f8fafc" : "#0f172a",
-                }}
-              >
-                {isMigrationWorkflow
-                  ? tr("data_sync.title.migration")
-                  : isCompareEntry
-                    ? entryPresentation.heroTitle
-                    : tr("data_sync.title.sync")}
+        {!embedded && (
+          <div style={heroPanelStyle}>
+            <div
+              style={{
+                display: "flex",
+                justifyContent: "space-between",
+                gap: 12,
+                alignItems: "flex-start",
+                flexWrap: "wrap",
+              }}
+            >
+              <div style={{ minWidth: 0 }}>
+                <div
+                  style={{
+                    fontSize: 18,
+                    fontWeight: 700,
+                    color: darkMode ? "#f8fafc" : "#0f172a",
+                  }}
+                >
+                  {isMigrationWorkflow
+                    ? tr("data_sync.title.migration")
+                    : isCompareEntry
+                      ? entryPresentation.heroTitle
+                      : tr("data_sync.title.sync")}
+                </div>
+                <div
+                  style={{
+                    marginTop: 6,
+                    fontSize: 13,
+                    lineHeight: 1.7,
+                    color: darkMode
+                      ? "rgba(255,255,255,0.62)"
+                      : "rgba(15,23,42,0.62)",
+                  }}
+                >
+                  {isMigrationWorkflow
+                    ? tr("data_sync.title.migration_description")
+                    : isCompareEntry
+                      ? entryPresentation.heroDescription
+                      : tr("data_sync.title.sync_description")}
+                </div>
               </div>
-              <div
-                style={{
-                  marginTop: 6,
-                  fontSize: 13,
-                  lineHeight: 1.7,
-                  color: darkMode
-                    ? "rgba(255,255,255,0.62)"
-                    : "rgba(15,23,42,0.62)",
-                }}
-              >
-                {isMigrationWorkflow
-                  ? tr("data_sync.title.migration_description")
-                  : isCompareEntry
-                    ? entryPresentation.heroDescription
-                    : tr("data_sync.title.sync_description")}
+              <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
+                <span style={badgeStyle}>
+                  {isMigrationWorkflow ? <RocketOutlined /> : <SwapOutlined />}{" "}
+                  {isMigrationWorkflow
+                    ? tr("data_sync.badge.migration_mode")
+                    : isCompareEntry
+                      ? entryPresentation.badgeText
+                      : tr("data_sync.badge.sync_mode")}
+                </span>
+                <span style={badgeStyle}>
+                  <DatabaseOutlined />{" "}
+                  {sourceConnId
+                    ? tr("data_sync.badge.source_selected")
+                    : tr("data_sync.badge.source_pending")}
+                </span>
+                <span style={badgeStyle}>
+                  <TableOutlined />{" "}
+                  {tr("data_sync.badge.table_count", {
+                    count: selectedTables.length || 0,
+                  })}
+                </span>
               </div>
             </div>
-            <div style={{ display: "flex", flexWrap: "wrap", gap: 8 }}>
-              <span style={badgeStyle}>
-                {isMigrationWorkflow ? <RocketOutlined /> : <SwapOutlined />}{" "}
-                {isMigrationWorkflow
-                  ? tr("data_sync.badge.migration_mode")
-                  : isCompareEntry
-                    ? entryPresentation.badgeText
-                    : tr("data_sync.badge.sync_mode")}
-              </span>
-              <span style={badgeStyle}>
-                <DatabaseOutlined />{" "}
-                {sourceConnId
-                  ? tr("data_sync.badge.source_selected")
-                  : tr("data_sync.badge.source_pending")}
-              </span>
-              <span style={badgeStyle}>
-                <TableOutlined />{" "}
-                {tr("data_sync.badge.table_count", {
-                  count: selectedTables.length || 0,
-                })}
-              </span>
-            </div>
           </div>
-        </div>
+        )}
         <Steps current={currentStep} style={{ marginBottom: 24 }}>
           <Step title={tr("data_sync.step.configure")} />
           <Step title={tr("data_sync.step.select_tables")} />
diff --git a/frontend/src/components/SecurityUpdateSettingsModal.i18n.test.tsx b/frontend/src/components/SecurityUpdateSettingsModal.i18n.test.tsx
index 75e0657..a81b178 100644
--- a/frontend/src/components/SecurityUpdateSettingsModal.i18n.test.tsx
+++ b/frontend/src/components/SecurityUpdateSettingsModal.i18n.test.tsx
@@ -134,6 +134,11 @@ describe('SecurityUpdateSettingsModal i18n source guards', () => {
     expect(source).not.toContain('当前项需要进一步处理后才能完成安全更新。');
   });
 
+  it('lets the tool center provide the title when embedded', () => {
+    expect(source).toContain('title={embedded ? null : (');
+    expect(source).toContain('closable={embedded ? false : undefined}');
+  });
+
   it('localizes settings chrome while preserving raw issue details, backup path and error text', async () => {
     const modalText = await renderSettingsModalText();
     expect(modalText).toContain('Security Update');
diff --git a/frontend/src/components/SecurityUpdateSettingsModal.tsx b/frontend/src/components/SecurityUpdateSettingsModal.tsx
index 5ca4b27..b36205e 100644
--- a/frontend/src/components/SecurityUpdateSettingsModal.tsx
+++ b/frontend/src/components/SecurityUpdateSettingsModal.tsx
@@ -130,7 +130,7 @@ const SecurityUpdateSettingsModal = ({
   return (
     <Modal
       rootClassName={SECURITY_UPDATE_MODAL_CLASS}
-      title={(
+      title={embedded ? null : (
         <div style={{ display: 'flex', alignItems: 'flex-start', gap: 12, minWidth: 0 }}>
           <div
             style={{
@@ -159,6 +159,7 @@ const SecurityUpdateSettingsModal = ({
       )}
       open={open}
       embedded={embedded}
+      closable={embedded ? false : undefined}
       onCancel={onClose}
       footer={[
         showRetry ? (
diff --git a/frontend/src/i18n/catalog.test.ts b/frontend/src/i18n/catalog.test.ts
index 4ab3bbf..fbc1d0c 100644
--- a/frontend/src/i18n/catalog.test.ts
+++ b/frontend/src/i18n/catalog.test.ts
@@ -931,6 +931,8 @@ describe("i18n catalog", () => {
     expect(passwordModalSource).not.toContain("密码已加密保护。如需通过公网传输，建议设置文件保护密码。");
     expect(passwordModalSource).not.toContain("导出连接密码");
     expect(passwordModalSource).not.toContain("设置文件保护密码");
+    expect(passwordModalSource).toContain("title={embedded ? null : (");
+    expect(passwordModalSource).toContain("closable={embedded ? false : undefined}");
   });
 
   it("keeps QueryEditor format settings menu labels in catalogs instead of source literals", () => {