dsh-db-tool 1.5.3 → 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 表头 ===== */",
@@ -388,7 +386,7 @@ window.__ModuleLoader__.load({
 				".dbt-chev.leaf{visibility:hidden;}",
 				".dbt-treename{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}",
 				/* ===== Navicat 式浏览弹窗 ===== */
-				".dbt-browse-dialog{position:fixed;width:min(1100px,calc(100vw - 48px));height:min(720px,calc(100vh - 48px));min-width:min(680px,calc(100vw - 16px));min-height:min(420px,calc(100vh - 16px));background:var(--dbt-dialog-bg);color:inherit;border:1px solid var(--dbt-separator);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.32),0 4px 16px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;font-size:14px;animation:dbt-in .22s var(--dbt-ease);}",
+				".dbt-browse-dialog{position:fixed;z-index:2147483000;width:min(1100px,calc(100vw - 48px));height:min(720px,calc(100vh - 48px));min-width:min(680px,calc(100vw - 16px));min-height:min(420px,calc(100vh - 16px));background:var(--dbt-dialog-bg);color:inherit;border:1px solid var(--dbt-separator);border-radius:16px;box-shadow:0 24px 64px rgba(0,0,0,.32),0 4px 16px rgba(0,0,0,.18);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);display:flex;flex-direction:column;overflow:hidden;box-sizing:border-box;font-size:14px;animation:dbt-in .22s var(--dbt-ease);}",
 				".dbt-browse-dialog.dragging{user-select:none;}",
 				".dbt-browse-header{flex:none;display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--dbt-separator);}",
 				".dbt-browse-title{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600;font-size:17px;}",
@@ -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")),
 					),
@@ -493,8 +491,47 @@ window.__ModuleLoader__.load({
 			(portalPending = portalPending || []).push(cb);
 		}
 		function mountDialog(children) {
-			return portalImpl ? portalImpl(children, document.body) : children;
+			return (portalImpl && !portalDisabled) ? portalImpl(children, document.body) : children;
 		}
+		// PiP 独立窗口渲染时禁 portal：PiP root 本身就挂在 pipDoc.body 上，再 portal 回主 document 会把 DOM 拉出独立窗口
+		let portalDisabled = false;
+		// 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");
+			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 走超时降级 */ });
+			}
+		}
+		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 };
@@ -1334,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=未选表，右栏显示引导空态）
@@ -1384,13 +1424,14 @@ window.__ModuleLoader__.load({
 				if (closeRef.current) closeRef.current.focus();
 			}, []);
 
-			// 拖动定位：首帧给个保守值，mount 后按浮窗实测尺寸居中（侧栏 iframe 视口窄，常量估宽会错位）
+			// 拖动定位：首帧给个保守值，mount 后按浮窗实测尺寸居中（坐标基准取浮窗所在 document 的视口——DOM 浮窗为主视口，PiP 独立窗口为 PiP 视口）
 			const dialogRef2 = React.useRef(null);
 			const [pos, setPos] = React.useState(() => ({ top: 72, left: 12 }));
 			React.useEffect(() => {
 				const el = dialogRef2.current;
 				if (!el) return;
-				const w = window.innerWidth || 1200, h = window.innerHeight || 800;
+				const view = (el.ownerDocument && el.ownerDocument.defaultView) || window;
+				const w = view.innerWidth || 1200, h = view.innerHeight || 800;
 				setPos({
 					top: Math.max(0, Math.round((h - el.offsetHeight) / 2)),
 					left: Math.max(0, Math.round((w - el.offsetWidth) / 2)),
@@ -1408,7 +1449,8 @@ window.__ModuleLoader__.load({
 			}
 			function onHeaderPointerMove(e) {
 				if (!draggingRef.current) return;
-				const h = window.innerHeight || 800, w = window.innerWidth || 1200;
+				const view = (e.currentTarget.ownerDocument && e.currentTarget.ownerDocument.defaultView) || window;
+				const h = view.innerHeight || 800, w = view.innerWidth || 1200;
 				// clamp 全部用浮窗实测尺寸：整体保持在视口内（窄视口下常量估宽会把窗拖丢）
 				const dlg = e.currentTarget.parentElement;
 				const dlgH = (dlg && dlg.offsetHeight) || 720;
@@ -1544,6 +1586,88 @@ window.__ModuleLoader__.load({
 			);
 		}
 
+		/* ---------------- PiP 独立窗口（Document Picture-in-Picture） ---------------- */
+		// OS 级独立窗口：可拖出桌面端主窗口、系统级置顶。内容为完整数据浏览 UI（同 JS 环境复用
+		// BrowseDialog/DangerDialog 与 mock 之外的宿主 fetch 同源）；DOM 浮窗作为不可用时的降级。
+		// 打开成功返回 pipWindow，失败返回 null（调用方降级为 DOM 浮窗）。
+		function PipBrowseApp(props) { // {ctx, conns, projectPath, grants, onClose}
+			// 危险操作确认渲染在 PiP 窗口内（Panel 的确认对话框在主窗口，PiP 用户看不见）
+			const [confirmReq, setConfirmReq] = React.useState(null);
+			const askConfirm = React.useCallback((info) => new Promise((resolve) => {
+				setConfirmReq(Object.assign({}, info, { resolve }));
+			}), []);
+			return React.createElement(
+				React.Fragment,
+				null,
+				React.createElement(BrowseDialog, {
+					ctx: props.ctx, conns: props.conns, projectPath: props.projectPath,
+					grants: props.grants, askConfirm: askConfirm, onClose: props.onClose,
+				}),
+				confirmReq ? React.createElement(DangerDialog, { challenge: confirmReq, onClose: () => setConfirmReq(null) }) : null,
+			);
+		}
+		function openBrowsePip(ctx, deps) { // deps: {conns, projectPath, grants, onClosed, onFallback} → 返回 pipWindow | null
+			try {
+				const dpip = window.documentPictureInPicture;
+				// 入口只硬性要求 dpip；createRoot/portal 未就绪不再放弃——手势内先开窗，root 异步就绪后渲染，超时由调用方降级
+				if (!dpip || typeof dpip.requestWindow !== "function") return null;
+				resolveRootAsync(ctx); // createRoot 同步未就绪时，趁 3 秒超时窗口发起宿主异步 import
+				// PiP 只能在用户手势内同步发起 requestWindow，Promise then 里再做 DOM 装配
+				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");
+					base.href = window.location.origin + "/";
+					doc.head.appendChild(base);
+					// 样式：整套 --dbt-* token 与规则注入 PiP 文档
+					if (styleEl) doc.head.appendChild(doc.importNode(styleEl, true));
+					doc.body.style.margin = "0";
+					// 加载占位：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 = () => {
+						if (root) { try { root.unmount(); } catch (e) { /* 已卸载 */ } }
+						portalDisabled = false;
+						try { w.close(); } catch (e2) { /* 已关闭 */ }
+					};
+					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;
+						deps.onClosed();
+					});
+					// 超时兜底：3 秒内 createRoot 没就绪 → 关 PiP 清理并回调降级（调用方打开 DOM 浮窗）
+					setTimeout(() => {
+						if (settled) return;
+						settled = true;
+						closePip();
+						deps.onFallback();
+					}, 3000);
+					return w;
+				}).catch((err) => { pipResult = "rejected:" + (err && err.name || "Error"); return null; });
+			} catch (e) {
+				pipResult = "rejected:" + (e && e.name || "Error");
+				return Promise.resolve(null);
+			}
+		}
+
 		/* ---------------- SQL 控制台 ---------------- */
 		// Apple 等宽字体栈（规范 §1）：优先样式层 --dbt-mono token，fallback 内联栈
 		const MONO_FONT = "var(--dbt-mono, ui-monospace, \"SF Mono\", Menlo, Consolas, monospace)";
@@ -1672,6 +1796,23 @@ window.__ModuleLoader__.load({
 			const [confirmReq, setConfirmReq] = React.useState(null); // {statement,danger,reason,resolve}
 			// 数据浏览浮窗开关：由 Panel 层持有（不随 view 切换卸载），跨 tab 常驻
 			const [browseOpen, setBrowseOpen] = React.useState(false);
+			// PiP 独立窗口句柄：优先于 DOM 浮窗（OS 级窗口，可拖出桌面端主窗口）；存在时 DOM 浮窗不渲染
+			const [pipWin, setPipWin] = React.useState(null);
+			function openBrowse() {
+				if (pipWin) { try { pipWin.focus(); } catch (e) { /* 已关闭 */ } return; }
+				// requestWindow 必须在用户手势内同步发起（本函数仅由 onClick 直调）
+				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); });
+				} else {
+					setBrowseOpen(true);
+				}
+			}
 
 			const askConfirm = React.useCallback((info) => new Promise((resolve) => {
 				setConfirmReq(Object.assign({}, info, { resolve }));
@@ -1729,7 +1870,7 @@ window.__ModuleLoader__.load({
 						// browse tab：切视图的同时直接打开浮窗（单击即用，不必再进树点表）
 						React.createElement("button", {
 							key: v, className: view === v ? "active" : "",
-							onClick: () => { setView(v); if (v === "browse") setBrowseOpen(true); },
+							onClick: () => { setView(v); if (v === "browse") openBrowse(); },
 						}, label)),
 				),
 				(projectEdited || !projectPath)
@@ -1772,7 +1913,7 @@ window.__ModuleLoader__.load({
 						// 主提示用正常文字色（dbt-muted 11px 次要色压深底对比不足，视觉审查命中）
 						React.createElement("div", { style: { fontSize: 13 } }, t("browsePanelHint")),
 						React.createElement("div", { className: "dbt-row" },
-							React.createElement("button", { className: "dbt-btn primary", onClick: () => setBrowseOpen(true) }, t("reopenBrowse"))),
+							React.createElement("button", { className: "dbt-btn primary", onClick: openBrowse }, t("reopenBrowse"))),
 					) : null,
 					view === "console" ? React.createElement(ConsoleView, Object.assign({}, shared, { askConfirm })) : null,
 				),
@@ -1829,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.3",
+  "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"
     }