dsh-db-tool 1.5.4 → 1.5.5

package/client/client.js

@@ -107,7 +107,6 @@ window.__ModuleLoader__.load({
 			truncatedNoEdit: "值已截断显示，就地编辑可能覆盖数据，请改用 SQL 控制台",
 			blobNoEdit: "二进制值不支持就地编辑",
 			redisTypeRo: "Redis 该类型不支持就地编辑",
-			cellSaved: "已保存",
 			// SQL 控制台
 			modeQuery: "只读查询",
 			modeExecute: "写入执行",
@@ -217,7 +216,6 @@ window.__ModuleLoader__.load({
 			truncatedNoEdit: "Value shown truncated; edit via SQL Console instead",
 			blobNoEdit: "Binary values cannot be edited here",
 			redisTypeRo: "This Redis type cannot be edited here",
-			cellSaved: "Saved",
 			modeQuery: "query (read-only)",
 			modeExecute: "execute (write)",
 			modeScript: "script",
@@ -352,7 +350,7 @@ window.__ModuleLoader__.load({
 				".dbt-btn.danger:hover{background:rgba(255,69,58,.12);}",
 				".dbt-btn:disabled{opacity:.4;cursor:default;transform:none;}",
 				"/* ===== 文本反馈 ===== */",
-				".dbt-muted{color:var(--dbt-text-secondary);font-size:11px;}",
+				".dbt-muted,.dbt-readhint{color:var(--dbt-text-secondary);font-size:11px;}",
 				".dbt-err{color:var(--dbt-danger);font-size:12px;white-space:pre-wrap;}",
 				".dbt-msg{color:var(--dbt-success);font-size:12px;white-space:pre-wrap;}",
 				"/* ===== 行 hairline 表格 + 毛玻璃 sticky 表头 ===== */",
@@ -417,7 +415,6 @@ window.__ModuleLoader__.load({
 				".dbt-celledit textarea{font-family:var(--dbt-mono);font-size:13px;min-height:96px;resize:vertical;background:var(--dbt-surface-strong);border:none;color:inherit;border-radius:8px;padding:8px;}",
 				".dbt-celledit textarea:focus{outline:2px solid var(--dbt-accent);outline-offset:-1px;}",
 				".dbt-nullchip{display:inline-flex;align-items:center;border:1px solid var(--dbt-warning);color:var(--dbt-warning);border-radius:999px;padding:1px 8px;font-size:11px;font-weight:600;}",
-				".dbt-readhint{color:var(--dbt-text-secondary);font-size:11px;}",
 				"/* ===== 视图切换入场（仅 transform/opacity；reduced-motion 全局已禁） ===== */",
 				"@keyframes dbt-in{from{opacity:0;transform:translateY(4px);}to{opacity:1;transform:none;}}",
 				".dbt-view{display:flex;flex-direction:column;gap:10px;animation:dbt-in .22s var(--dbt-ease);}",
@@ -427,7 +424,7 @@ window.__ModuleLoader__.load({
 				".dbt-seg button.active{background:var(--dbt-seg-active);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12);}",
 				".dbt-browse-root .dbt-seg button{font-size:12px;padding:4px 12px;}",
 				"/* ===== 降级：透明度减弱 / 动效减弱 ===== */",
-				"@media (prefers-reduced-transparency: reduce){.dbt-overlay{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.55);}.dbt-dialog,.dbt-browse-dialog,.dbt-cellpop{backdrop-filter:none;-webkit-backdrop-filter:none;}.dbt-dialog,.dbt-browse-dialog{background:#2c2c2e;}.dbt-cellpop{background:#2c2c2e;}.dbt-table th{backdrop-filter:none;-webkit-backdrop-filter:none;background:#1e1e20;}.dbt-browse-root .dbt-table th{background:#1e1e20;}}",
+				"@media (prefers-reduced-transparency: reduce){.dbt-overlay{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(0,0,0,.55);}.dbt-dialog,.dbt-browse-dialog,.dbt-cellpop{backdrop-filter:none;-webkit-backdrop-filter:none;background:#2c2c2e;}.dbt-table th{backdrop-filter:none;-webkit-backdrop-filter:none;background:#1e1e20;}.dbt-browse-root .dbt-table th{background:#1e1e20;}}",
 				"@media (prefers-color-scheme: light) and (prefers-reduced-transparency: reduce){.dbt-dialog,.dbt-browse-dialog,.dbt-cellpop{background:#f5f5f7;}.dbt-table th,.dbt-browse-root .dbt-table th{background:#f2f2f7;}}",
 				"@media (prefers-reduced-motion: reduce){.dbt-panel *,.dbt-browse-root *{transition:none!important;animation:none!important;}.dbt-btn:active{transform:none;}}",
 			].join("\n");
@@ -454,7 +451,8 @@ window.__ModuleLoader__.load({
 					React.createElement("div", { className: "dbt-muted" }, t("confirmHint")),
 					React.createElement(
 						"div",
-						{ className: "dbt-row", style: { justifyContent: "flex-end" } },
+						// 末对齐由样式层 .dbt-dialog .dbt-row 规则承担，无需内联 style
+						{ className: "dbt-row" },
 						React.createElement("button", { className: "dbt-btn danger", onClick: () => done(true) }, t("confirmRun")),
 						React.createElement("button", { className: "dbt-btn", onClick: () => done(false) }, t("confirmCancel")),
 					),
@@ -497,15 +495,43 @@ window.__ModuleLoader__.load({
 		}
 		// PiP 独立窗口渲染时禁 portal：PiP root 本身就挂在 pipDoc.body 上，再 portal 回主 document 会把 DOM 拉出独立窗口
 		let portalDisabled = false;
-		// createRoot 多级探测（PiP 独立窗口需要独立 React root）：react-dom → react-dom/client
+		// createRoot 三重解析（PiP 独立窗口需要独立 React root，结构对齐上方 portal 解析）：
+		// ①模块加载时同步 require react-dom → react-dom/client（宿主按 specifier 解析，两者是不同键）
+		// ②宿主模块系统异步 import("react-dom/client") ③均不可用则 PiP 超时降级 DOM 浮窗
 		let reactCreateRoot = null;
+		let rootTried = false;    // 异步 import 只发起一次
+		let rootPending = null;   // 订阅解析成功的回调列表
+		let rootSource = null;    // 就绪方式：sync / async / null（未就绪，诊断日志用）
 		try {
 			var rd2 = require("react-dom");
-			reactCreateRoot = rd2 && typeof rd2.createRoot === "function" ? rd2.createRoot.bind(rd2) : null;
-			if (!reactCreateRoot) {
-				try { var rdc = require("react-dom/client"); reactCreateRoot = rdc && typeof rdc.createRoot === "function" ? rdc.createRoot.bind(rdc) : null; } catch (e2) { /* 保持 null */ }
+			if (rd2 && typeof rd2.createRoot === "function") {
+				reactCreateRoot = rd2.createRoot.bind(rd2); rootTried = true; rootSource = "sync";
+			} else {
+				try { var rdc = require("react-dom/client"); if (rdc && typeof rdc.createRoot === "function") { reactCreateRoot = rdc.createRoot.bind(rdc); rootTried = true; rootSource = "sync"; } } catch (e2) { /* 保持 null */ }
+			}
+		} catch (e) { /* 保持 null，等异步解析 */ }
+		function resolveRootAsync(ctx) {
+			if (rootTried) return;
+			rootTried = true;
+			if (reactCreateRoot) return;
+			var mods = ctx && ctx.modules;
+			var p = mods && typeof mods.import === "function" ? mods.import("react-dom/client") : null;
+			if (p && typeof p.then === "function") {
+				p.then(function (m) {
+					if (m && typeof m.createRoot === "function") {
+						reactCreateRoot = m.createRoot.bind(m);
+						rootSource = "async";
+						var waiters = rootPending || []; rootPending = null;
+						for (var i = 0; i < waiters.length; i++) waiters[i]();
+					}
+				}).catch(function () { /* 解析失败，PiP 走超时降级 */ });
 			}
-		} catch (e) { /* 保持 null，PiP 不可用走 DOM 浮窗降级 */ }
+		}
+		function onRootReady(cb) {
+			if (reactCreateRoot) { cb(); return; }
+			(rootPending = rootPending || []).push(cb);
+		}
+		let pipResult = "not-tried"; // 最近一次 PiP 尝试结果：opened / rejected:<err.name>（诊断日志用）
 
 		/* ---------------- 连接管理 ---------------- */
 		const EMPTY_FORM = { id: "", kind: "mysql", name: "", mode: "url", url: "", urlUser: "", urlPassword: "", host: "", port: "", user: "", password: "", database: "", ssl: false };
@@ -1345,17 +1371,20 @@ window.__ModuleLoader__.load({
 
 		function BrowseDialog(props) {
 			const { conns, projectPath, grants, askConfirm, onClose, ctx } = props;
-			// grants / askConfirm：预留给后续单元格编辑的危险操作确认通道，本任务先接住不使用
+			// grants（editable 判定）与 askConfirm（单元格写回确认）下传 PreviewGrid
 			// portal 异步解析接入：portalReady 仅用于触发重渲染（mountDialog 内部读 portalImpl）。
 			// createPortal 不换组件实例——portalReady 切换前后是同一 DOM 节点，pos state 保持，居中定位不受 portal 重挂影响。
 			const [portalReady, setPortalReady] = React.useState(!!portalImpl);
 			React.useEffect(() => {
 				resolvePortalAsync(ctx);
+				resolveRootAsync(ctx);
 				onPortalReady(function () { setPortalReady(true); });
-				// 诊断：一次性输出（帮助真机排查 iframe 隔离与 portal 解析结果）
+				// 诊断：一次性输出（帮助真机排查 iframe 隔离与 portal/createRoot 解析结果、PiP 尝试结果）
 				if (!window.__dbtPortalDiag) {
 					window.__dbtPortalDiag = true;
-					console.info("[dbt] portal:", portalImpl ? "sync/async ok" : "unavailable", "sameDoc:", window.top === window.self);
+					console.info("[dbt] portal:", portalImpl ? "sync/async ok" : "unavailable",
+						"createRoot:", rootSource || "none", "pip:", pipResult,
+						"sameDoc:", window.top === window.self);
 				}
 			}, []);
 			const [sel, setSel] = React.useState(null); // 弹窗内当前选中（null=未选表，右栏显示引导空态）
@@ -1577,12 +1606,16 @@ window.__ModuleLoader__.load({
 				confirmReq ? React.createElement(DangerDialog, { challenge: confirmReq, onClose: () => setConfirmReq(null) }) : null,
 			);
 		}
-		function openBrowsePip(ctx, deps) { // deps: {conns, projectPath, grants, onClosed} → 返回 pipWindow | null
+		function openBrowsePip(ctx, deps) { // deps: {conns, projectPath, grants, onClosed, onFallback} → 返回 pipWindow | null
 			try {
 				const dpip = window.documentPictureInPicture;
-				if (!dpip || typeof dpip.requestWindow !== "function" || !reactCreateRoot || !portalImpl) return null;
+				// 入口只硬性要求 dpip；createRoot/portal 未就绪不再放弃——手势内先开窗，root 异步就绪后渲染，超时由调用方降级
+				if (!dpip || typeof dpip.requestWindow !== "function") return null;
+				resolveRootAsync(ctx); // createRoot 同步未就绪时，趁 3 秒超时窗口发起宿主异步 import
 				// PiP 只能在用户手势内同步发起 requestWindow，Promise then 里再做 DOM 装配
-				return dpip.requestWindow({ width: 1100, height: 720 }).then((w) => {
+				const p = dpip.requestWindow({ width: 1100, height: 720 });
+				pipResult = "opened"; // requestWindow 已发起；拒绝走下方 catch
+				return p.then((w) => {
 					const doc = w.document;
 					// 相对地址基准：PiP 文档是 about:blank，fetch 的相对 API 路径须按主 origin 解析
 					const base = doc.createElement("base");
@@ -1591,25 +1624,46 @@ window.__ModuleLoader__.load({
 					// 样式：整套 --dbt-* token 与规则注入 PiP 文档
 					if (styleEl) doc.head.appendChild(doc.importNode(styleEl, true));
 					doc.body.style.margin = "0";
-					portalDisabled = true; // PiP root 已在 pipDoc.body 上，禁 portal 防 DOM 被拉回主窗口
-					const root = reactCreateRoot(doc.body);
+					// 加载占位：createRoot 异步解析期间给用户可见反馈（PiP 场景少用，不做 i18n key）
+					const ph = doc.createElement("div");
+					ph.style.cssText = "display:flex;align-items:center;justify-content:center;height:100%;font:14px sans-serif;color:#888;";
+					ph.textContent = "正在打开数据浏览…";
+					doc.body.appendChild(ph);
+					let root = null;
+					let settled = false; // root 已渲染或窗口已关闭：晚到的 onRootReady 回调与超时兜底均不再处理
 					const closePip = () => {
-						try { root.unmount(); } catch (e) { /* 已卸载 */ }
+						if (root) { try { root.unmount(); } catch (e) { /* 已卸载 */ } }
 						portalDisabled = false;
 						try { w.close(); } catch (e2) { /* 已关闭 */ }
 					};
-					root.render(React.createElement(PipBrowseApp, {
-						ctx, conns: deps.conns, projectPath: deps.projectPath, grants: deps.grants,
-						onClose: () => { closePip(); deps.onClosed(); },
-					}));
+					onRootReady(() => {
+						if (settled) return;
+						settled = true;
+						portalDisabled = true; // PiP root 已在 pipDoc.body 上，禁 portal 防 DOM 被拉回主窗口
+						root = reactCreateRoot(doc.body);
+						root.render(React.createElement(PipBrowseApp, {
+							ctx, conns: deps.conns, projectPath: deps.projectPath, grants: deps.grants,
+							onClose: () => { closePip(); deps.onClosed(); },
+						}));
+						ph.remove();
+					});
 					w.addEventListener("pagehide", () => { // 用户点 PiP 窗口系统关闭钮
+						settled = true;
+						if (root) { try { root.unmount(); } catch (e) { /* 已卸载 */ } }
 						portalDisabled = false;
-						try { root.unmount(); } catch (e) { /* 已卸载 */ }
 						deps.onClosed();
 					});
+					// 超时兜底：3 秒内 createRoot 没就绪 → 关 PiP 清理并回调降级（调用方打开 DOM 浮窗）
+					setTimeout(() => {
+						if (settled) return;
+						settled = true;
+						closePip();
+						deps.onFallback();
+					}, 3000);
 					return w;
-				}).catch(() => null);
+				}).catch((err) => { pipResult = "rejected:" + (err && err.name || "Error"); return null; });
 			} catch (e) {
+				pipResult = "rejected:" + (e && e.name || "Error");
 				return Promise.resolve(null);
 			}
 		}
@@ -1750,6 +1804,8 @@ window.__ModuleLoader__.load({
 				const p = openBrowsePip(props.ctx, {
 					conns, projectPath, grants,
 					onClosed: () => setPipWin(null),
+					// PiP 超时降级（createRoot 未就绪）：清掉窗口句柄并回退 DOM 浮窗
+					onFallback: () => { setPipWin(null); setBrowseOpen(true); },
 				});
 				if (p && typeof p.then === "function") {
 					p.then((w) => { if (w) setPipWin(w); else setBrowseOpen(true); });
@@ -1914,7 +1970,7 @@ window.__ModuleLoader__.load({
 				return ctx.betterSidebar.registerTab({
 					id: TAB_ID,
 					title: function () { return t("tabTitle"); },
-					icon: function (size) { return icon(size); },
+					icon,
 					order: 45,
 					single: true,
 					component: function (p) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-db-tool",
-  "version": "1.5.4",
+  "version": "1.5.5",
   "description": "DSH community plugin: chat-operated multi-database admin tool with sidebar management, project-scoped grants, ro/rw modes and dangerous-operation confirmation",
   "type": "module",
   "license": "MIT",
@@ -39,7 +39,8 @@
     "client": {
       "inject": [
         "@deepseek-ai/dsh-client-locale",
-        "react-dom"
+        "react-dom",
+        "react-dom/client"
       ],
       "platform": "web"
     }