dsh-db-tool 1.4.1 → 1.5.1

package/client/README.md

@@ -8,8 +8,8 @@
 
 ## 文件
 
-- `client.js` — 全部前端逻辑（约 1000 行），内含：
-  - 4 个面板：管理（连接 CRUD + 测试 + 审计查看）、授权（项目路径 → 连接 ro/rw/撤销）、浏览（库 → 表 → 结构 → 预览分页）、SQL 控制台（连接/库选择、query/execute/script、危险确认对话框 → challengeId 重发）
+- `client.js` — 全部前端逻辑（单文件，约 1400 行），内含：
+  - 4 个面板：管理（连接 CRUD + 测试 + 审计查看）、授权（项目路径 → 连接 ro/rw/撤销）、浏览（树选库/表 → 点表打开 Navicat 式弹窗：左树 + 结构/数据 Tabs + 分页；portal 挂 body，Esc/遮罩/✕ 关闭）、SQL 控制台（连接/库选择、query/execute/script、危险确认对话框 → challengeId 重发）
   - zh/en 双语词典（zh 默认），经 `ctx.locale.register(NS, ...)` 注册，`useSyncExternalStore` 订阅语言切换
   - 危险确认：`runGuarded()` 先发请求，收到 `code:"NEEDS_CONFIRMATION"` 且有 `challengeId` 时弹 `DangerDialog`，用户确认后携 challengeId 重发（challenge 一次性、绑语句、5 分钟有效）
   - REST API 调用走同源前缀 **`/dsh-db-tool/api`**（须与 host 端 `webServer.register` 的 prefix 一致）

package/client/client.js

@@ -14,7 +14,9 @@ window.__ModuleLoader__.load({
 		 * ============================================================ */
 
 		// --- i18n（dsh-better-sidebar 同款模式）---
-		const LOCALE_NS = "dbTool";
+		// i18n 字典/HTTP 封装/CSS/对话框均无单元断言，仅变异下方纯函数层（Stryker 区段指令需精确匹配，不得带后缀文本）
+	// Stryker disable all
+	const LOCALE_NS = "dbTool";
 		const zh = {
 			tabTitle: "数据库",
 			projectLabel: "项目: {path}",
@@ -85,6 +87,27 @@ window.__ModuleLoader__.load({
 			prevPage: "上一页",
 			pageInfo: "第 {page} 页（每页 50 行）",
 			previewTruncated: "结果已截断",
+			browseDialogTitle: "{conn} / {db} / {table}",
+			close: "关闭",
+			emptyStructure: "暂无字段信息",
+			emptyData: "暂无数据",
+			retry: "重试",
+			browsePanelHint: "数据浏览已在浮动窗口打开，可继续操作其他功能。",
+			reopenBrowse: "打开数据浏览",
+			selectTableHint: "在左侧选择表后查看数据",
+			// 单元格查看/编辑（Navicat 式就地写回）
+			editCell: "编辑",
+			cellValue: "完整值",
+			copyBtn: "复制",
+			copied: "已复制",
+			setNull: "设为 NULL",
+			cellSaving: "保存中…",
+			readOnlyRo: "只读授权，不可编辑",
+			noPkHint: "该表无主键，不支持就地编辑",
+			truncatedNoEdit: "值已截断显示，就地编辑可能覆盖数据，请改用 SQL 控制台",
+			blobNoEdit: "二进制值不支持就地编辑",
+			redisTypeRo: "Redis 该类型不支持就地编辑",
+			cellSaved: "已保存",
 			// SQL 控制台
 			modeQuery: "只读查询",
 			modeExecute: "写入执行",
@@ -174,6 +197,27 @@ window.__ModuleLoader__.load({
 			prevPage: "Prev",
 			pageInfo: "Page {page} (50 rows/page)",
 			previewTruncated: "Result truncated",
+			browseDialogTitle: "{conn} / {db} / {table}",
+			close: "Close",
+			emptyStructure: "No columns",
+			emptyData: "No rows",
+			retry: "Retry",
+			browsePanelHint: "Browse is open in a floating window; you can keep working here.",
+			reopenBrowse: "Open Data Browser",
+			selectTableHint: "Select a table on the left to view data",
+			// Cell view/edit (Navicat-style in-place write-back)
+			editCell: "Edit",
+			cellValue: "Full value",
+			copyBtn: "Copy",
+			copied: "Copied",
+			setNull: "Set NULL",
+			cellSaving: "Saving…",
+			readOnlyRo: "Read-only grant; editing disabled",
+			noPkHint: "No primary key; in-place editing unavailable",
+			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",
@@ -280,9 +324,11 @@ window.__ModuleLoader__.load({
 			if (styleEl) return;
 			styleEl = document.createElement("style");
 			styleEl.textContent = [
-				"/* ===== Apple-style Design Tokens（dark 基线，light 经 media query 反转） ===== */",
-				".dbt-panel{--dbt-accent:var(--dsh-accent,#0a84ff);--dbt-bg:transparent;--dbt-surface:rgba(120,120,128,.12);--dbt-surface-strong:rgba(120,120,128,.18);--dbt-separator:rgba(120,120,128,.24);--dbt-text-secondary:rgba(235,235,245,.6);--dbt-danger:#ff453a;--dbt-success:#30d158;--dbt-warning:#ffd60a;--dbt-dialog-bg:rgba(40,40,44,.85);--dbt-th-bg:rgba(30,30,32,.72);--dbt-seg-active:rgba(255,255,255,.14);--dbt-shadow:0 8px 32px rgba(0,0,0,.28);--dbt-radius-card:12px;--dbt-radius-ctrl:8px;--dbt-radius-pill:6px;--dbt-ease:cubic-bezier(.25,.1,.25,1);--dbt-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;}",
-				"@media (prefers-color-scheme: light){.dbt-panel{--dbt-accent:var(--dsh-accent,#007aff);--dbt-surface:rgba(120,120,128,.08);--dbt-surface-strong:rgba(120,120,128,.14);--dbt-separator:rgba(60,60,67,.18);--dbt-text-secondary:rgba(60,60,67,.6);--dbt-danger:#ff3b30;--dbt-success:#34c759;--dbt-warning:#ff9f0a;--dbt-dialog-bg:rgba(252,252,252,.9);--dbt-th-bg:rgba(255,255,255,.72);--dbt-seg-active:rgba(255,255,255,.9);--dbt-shadow:0 8px 32px rgba(0,0,0,.12);}}",
+				"/* ===== Apple-style Design Tokens（dark 基线，light 经 media query 反转；.dbt-browse-root 并入以承载 portal 弹窗） ===== */",
+				".dbt-panel,.dbt-browse-root{--dbt-accent:var(--dsh-accent,#0a84ff);--dbt-bg:transparent;--dbt-surface:rgba(120,120,128,.12);--dbt-surface-strong:rgba(120,120,128,.18);--dbt-separator:rgba(120,120,128,.24);--dbt-text:rgba(235,235,245,.92);--dbt-text-secondary:rgba(235,235,245,.6);--dbt-danger:#ff453a;--dbt-success:#30d158;--dbt-warning:#ffd60a;--dbt-dialog-bg:rgba(40,40,44,.85);--dbt-th-bg:rgba(30,30,32,.72);--dbt-seg-active:rgba(255,255,255,.14);--dbt-shadow:0 8px 32px rgba(0,0,0,.28);--dbt-radius-card:12px;--dbt-radius-ctrl:8px;--dbt-radius-pill:6px;--dbt-ease:cubic-bezier(.25,.1,.25,1);--dbt-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;font-family:-apple-system,BlinkMacSystemFont,'SF Pro Text','Segoe UI',system-ui,sans-serif;}",
+				"@media (prefers-color-scheme: light){.dbt-panel,.dbt-browse-root{--dbt-accent:var(--dsh-accent,#007aff);--dbt-surface:rgba(120,120,128,.08);--dbt-surface-strong:rgba(120,120,128,.14);--dbt-separator:rgba(60,60,67,.18);--dbt-text:rgba(30,30,32,.92);--dbt-text-secondary:rgba(60,60,67,.6);--dbt-danger:#ff3b30;--dbt-success:#34c759;--dbt-warning:#ff9f0a;--dbt-dialog-bg:rgba(252,252,252,.9);--dbt-th-bg:rgba(255,255,255,.72);--dbt-seg-active:rgba(255,255,255,.9);--dbt-shadow:0 8px 32px rgba(0,0,0,.12);}}",
+				// 弹窗根自持文字色：portal 挂 document.body 后不再依赖侧栏祖先的 color 继承（ocr medium）
+				".dbt-browse-root{color:var(--dbt-text);}",
 				"/* ===== 根容器 ===== */",
 				".dbt-panel{font-size:13px;line-height:1.45;display:flex;flex-direction:column;gap:12px;padding:16px;height:100%;box-sizing:border-box;overflow-y:auto;}",
 				"/* ===== iOS segmented control（顶部 tab） ===== */",
@@ -315,6 +361,12 @@ window.__ModuleLoader__.load({
 				".dbt-table th{position:sticky;top:0;z-index:1;background:var(--dbt-th-bg);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);font-weight:600;font-size:11px;}",
 				".dbt-table td{font-family:var(--dbt-mono);}",
 				".dbt-tablewrap{border:none;border-radius:var(--dbt-radius-card);overflow:auto;max-height:320px;background:var(--dbt-surface);}",
+				"/* ===== 浏览弹窗表格：列分明（列间 hairline + 表头加深一档 + 行 hover） ===== */",
+				".dbt-browse-root .dbt-table th + th,.dbt-browse-root .dbt-table td + td{border-left:1px solid var(--dbt-separator);}",
+				".dbt-browse-root .dbt-table th{background:rgba(30,30,32,.85);font-size:12px;}",
+				".dbt-browse-root .dbt-table td{font-size:13px;padding:7px 10px;}",
+				".dbt-browse-root .dbt-table tbody tr:hover td{background:var(--dbt-surface-strong);}",
+				"@media (prefers-color-scheme: light){.dbt-browse-root .dbt-table th{background:rgba(242,242,247,.9);}}",
 				"/* ===== 对话框（macOS alert 材质） ===== */",
 				".dbt-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:9999;}",
 				".dbt-dialog{background:var(--dbt-dialog-bg);color:inherit;border:1px solid var(--dbt-separator);border-radius:14px;padding:16px;max-width:460px;width:90%;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;font-size:13px;-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);box-shadow:var(--dbt-shadow);}",
@@ -327,7 +379,7 @@ window.__ModuleLoader__.load({
 				".dbt-listrow:hover{background:var(--dbt-surface-strong);}",
 				".dbt-tree{display:flex;flex-direction:column;}",
 				"/* ===== Navicat 式对象树（数据浏览） ===== */",
-				".dbt-treerow{display:flex;gap:6px;align-items:center;padding:7px 12px;font-size:13px;cursor:pointer;user-select:none;border-bottom:1px solid var(--dbt-separator);transition:background .15s var(--dbt-ease);}",
+				".dbt-treerow{display:flex;gap:6px;align-items:center;padding:8px 14px;font-size:14px;cursor:pointer;user-select:none;border-bottom:1px solid var(--dbt-separator);transition:background .15s var(--dbt-ease);}",
 				".dbt-treerow:last-child{border-bottom:none;}",
 				".dbt-treerow:hover{background:var(--dbt-surface-strong);}",
 				".dbt-treerow.active{color:var(--dbt-accent);font-weight:600;}",
@@ -335,6 +387,37 @@ window.__ModuleLoader__.load({
 				".dbt-chev.open{transform:rotate(90deg);}",
 				".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.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;}",
+				".dbt-browse-close{flex:none;width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:none;background:transparent;color:var(--dbt-text-secondary);border-radius:var(--dbt-radius-pill);cursor:pointer;transition:all .18s var(--dbt-ease);}",
+				".dbt-browse-close:hover{background:var(--dbt-surface-strong);color:inherit;}",
+				".dbt-browse-close:active{transform:scale(.92);}",
+				".dbt-browse-body{flex:1;min-height:0;display:flex;}",
+				".dbt-browse-tree{flex:none;width:260px;overflow-y:auto;border-right:1px solid var(--dbt-separator);}",
+				".dbt-browse-main{flex:1;min-width:0;display:flex;flex-direction:column;}",
+				".dbt-browse-tabs{flex:none;padding:10px 14px 0;}",
+				".dbt-browse-content{flex:1;min-height:0;position:relative;display:flex;flex-direction:column;gap:10px;padding:12px 14px;overflow:hidden;}",
+				".dbt-browse-tablewrap{flex:1;min-height:0;overflow:auto;border:none;border-radius:var(--dbt-radius-card);background:var(--dbt-surface);}",
+				".dbt-browse-footer{flex:none;display:flex;align-items:center;gap:8px;padding:10px 14px;border-top:1px solid var(--dbt-separator);}",
+				".dbt-browse-empty{flex:1;display:flex;align-items:center;justify-content:center;color:var(--dbt-text-secondary);font-size:13px;}",
+				".dbt-browse-errorbox{flex:1;display:flex;flex-direction:column;gap:10px;align-items:flex-start;justify-content:center;}",
+				".dbt-browse-skel{display:flex;flex-direction:column;gap:8px;}",
+				".dbt-browse-skelrow{display:flex;gap:8px;}",
+				".dbt-browse-skelcell{flex:1;height:24px;background:var(--dbt-surface-strong);border-radius:var(--dbt-radius-pill);}",
+				"/* ===== 浏览弹窗：单元格查看/编辑浮层（定位锚点为 .dbt-browse-content） ===== */",
+				".dbt-cellbtn{border:none;background:transparent;color:inherit;font:inherit;padding:0;margin:0;cursor:pointer;max-width:260px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;width:100%;text-align:left;}",
+				".dbt-cellbtn:focus-visible{outline:2px solid var(--dbt-accent);outline-offset:-1px;border-radius:2px;}",
+				".dbt-cellpop{position:absolute;z-index:20;width:min(460px,100%);background:var(--dbt-dialog-bg);border:1px solid var(--dbt-separator);border-radius:12px;box-shadow:0 12px 40px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(20px) saturate(180%);backdrop-filter:blur(20px) saturate(180%);padding:12px;display:flex;flex-direction:column;gap:8px;box-sizing:border-box;font-size:13px;}",
+				".dbt-cellpop-value{font-family:var(--dbt-mono);font-size:13px;white-space:pre-wrap;word-break:break-all;max-height:240px;overflow:auto;background:var(--dbt-surface-strong);border-radius:8px;padding:8px;}",
+				".dbt-cellpop-actions{display:flex;gap:8px;align-items:center;}",
+				".dbt-celledit{display:flex;flex-direction:column;gap:8px;}",
+				".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);}",
@@ -342,10 +425,11 @@ window.__ModuleLoader__.load({
 				".dbt-seg{display:flex;gap:2px;background:var(--dbt-surface);border-radius:var(--dbt-radius-ctrl);padding:2px;}",
 				".dbt-seg button{flex:none;border:none;background:transparent;color:inherit;font-size:11px;padding:3px 10px;border-radius:var(--dbt-radius-pill);cursor:pointer;transition:all .18s var(--dbt-ease);}",
 				".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{backdrop-filter:none;-webkit-backdrop-filter:none;background:#2c2c2e;}.dbt-table th{backdrop-filter:none;-webkit-backdrop-filter:none;background:#1e1e20;}}",
-				"@media (prefers-color-scheme: light) and (prefers-reduced-transparency: reduce){.dbt-dialog{background:#f5f5f7;}.dbt-table th{background:#f2f2f7;}}",
-				"@media (prefers-reduced-motion: reduce){.dbt-panel *{transition:none!important;animation:none!important;}.dbt-btn:active{transform:none;}}",
+				"@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-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");
 			document.head.appendChild(styleEl);
 		}
@@ -378,14 +462,21 @@ window.__ModuleLoader__.load({
 			);
 		}
 
+		// --- 弹窗挂载：优先 createPortal 挂 document.body（避免侧栏容器裁剪）；宿主未提供 react-dom 时回退 Panel 内 fixed overlay（DangerDialog 同模式） ---
+		let createPortal = null;
+		try { createPortal = require("react-dom").createPortal; } catch (e) { /* 留 null，走回退 */ }
+		function mountDialog(children) {
+			return createPortal ? createPortal(children, document.body) : children;
+		}
+
 		/* ---------------- 连接管理 ---------------- */
 		const EMPTY_FORM = { id: "", kind: "mysql", name: "", mode: "url", url: "", urlUser: "", urlPassword: "", host: "", port: "", user: "", password: "", database: "", ssl: false };
 
-		// 通用表格渲染：columns + rows（审计列表与查询结果共用）
-		function resultTable(columns, rows, cellTitles) {
+		// 通用表格渲染：columns + rows（审计列表与查询结果共用）；wrapClass 可选（浏览弹窗用自适应高度容器）
+		function resultTable(columns, rows, cellTitles, wrapClass) {
 			return React.createElement(
 				"div",
-				{ className: "dbt-tablewrap" },
+				{ className: wrapClass || "dbt-tablewrap" },
 				React.createElement(
 					"table",
 					{ className: "dbt-table" },
@@ -409,6 +500,136 @@ window.__ModuleLoader__.load({
 			);
 		}
 
+	/* ---------------- 单元格写回：方言与命令构造（纯函数层，PreviewGrid 与测试共用） ---------------- */
+		// Stryker restore all（以下至 buildMongoOp 为变异目标区）
+		// 统一返回形状：{ ok:true, ops:[{statement, params?, database?}] }（多条顺序执行，如 redis 两步）
+		// 或 { ok:false, error:"<i18n key>" }（error 为 key 名，组件侧 t() 本地化；null 表示通用错误）
+
+		// 方言判定：q=问号占位符（mysql/sqlite）、dollar=$n（postgresql/gaussdb）、colon=:n（oracle/dmdb）
+		function dialectOf(kind) {
+			if (kind === "mysql" || kind === "sqlite") return "q";
+			if (kind === "postgresql" || kind === "gaussdb") return "dollar";
+			if (kind === "oracle" || kind === "dmdb") return "colon";
+			if (kind === "redis") return "redis";
+			if (kind === "mongodb") return "mongo";
+			return null;
+		}
+
+		// 标识符引用：mysql 用反引号（内部双写转义），其余统一双引号（内部双写转义）
+		function quoteIdent(kind, name) {
+			const q = kind === "mysql" ? "`" : "\"";
+			return q + String(name).split(q).join(q + q) + q;
+		}
+
+		// 单元格文本 → 写回值：JSON 可解析且结果非字符串才用解析值（类型不漂移：显示 "123" 保持字符串，
+		// 数字列显示 123 → parse 得 number 123）
+		function parseCellText(text) {
+			try {
+				const v = JSON.parse(text);
+				if (typeof v !== "string") return v;
+			} catch (e) { /* 非 JSON 按原字符串 */ }
+			return text;
+		}
+
+		// 截断/BLOB 标记（后端 normalize 产物）：命中即禁止就地编辑，防旧值覆盖真实数据
+		function isTruncatedCell(text) {
+			const s = String(text);
+			// sql-shared 嵌套 JSON 以 "…[已截断]" 结尾；redis/mongo/oracle/dmdb 的 "…[截断,共N字符]"
+			// 结尾是"字符]"，endsWith 永不命中，故该形态用 includes 检测
+			return s.endsWith("…[已截断]") || s.includes("…[截断,共");
+		}
+		function isBlobCell(text) {
+			const s = String(text);
+			return s.startsWith("[BLOB ") && s.endsWith("bytes]");
+		}
+
+		// SQL 6 库 UPDATE 构造：全限定表名 + 方言占位符 + 主键 WHERE；params 顺序 = [新值(非 NULL 时), ...pkValues]
+		function buildUpdate(kind, tableName, dbRef, schemaName, colName, newRawText, isNull, pkCols, pkValues) {
+			if (!Array.isArray(pkCols) || pkCols.length === 0 || !colName || !tableName) {
+				return { ok: false, error: "noPkHint" };
+			}
+			// 表全限定：pg/gauss 用 schema 前缀（库由 execute 的 database 参数路由，语句内不写库名）；
+			// mysql 带库名（adapter 无 database 路由）；oracle/dmdb 的 dbRef 即 OWNER；sqlite 仅表名
+			let table;
+			if (kind === "postgresql" || kind === "gaussdb") {
+				table = schemaName
+					? quoteIdent(kind, schemaName) + "." + quoteIdent(kind, tableName)
+					: quoteIdent(kind, tableName);
+			} else if (kind === "mysql" || kind === "oracle" || kind === "dmdb") {
+				table = quoteIdent(kind, dbRef) + "." + quoteIdent(kind, tableName);
+			} else {
+				table = quoteIdent(kind, tableName);
+			}
+			const dialect = dialectOf(kind);
+			// 占位符编号按 params 顺序：新值（非 NULL 时占 1 号）→ 主键逐列
+			const params = [];
+			const ph = (i) => (dialect === "dollar" ? "$" + i : dialect === "colon" ? ":" + i : "?");
+			let setSql;
+			if (isNull) {
+				setSql = quoteIdent(kind, colName) + " = NULL";
+			} else {
+				params.push(parseCellText(newRawText));
+				setSql = quoteIdent(kind, colName) + " = " + ph(params.length);
+			}
+			const wheres = pkCols.map((c, i) => quoteIdent(kind, c) + " = " + ph((isNull ? 0 : 1) + i + 1));
+			for (const v of (pkValues || [])) params.push(v);
+			return {
+				ok: true,
+				ops: [{
+					statement: "UPDATE " + table + " SET " + setSql + " WHERE " + wheres.join(" AND "),
+					params,
+					database: kind === "sqlite" ? undefined : dbRef,
+				}],
+			};
+		}
+
+		// Redis 写命令构造（命令数组 JSON 化后经 execute 透传）：仅数据位（value/score/member）可改，
+		// 键名/字段名只读；list/stream 与 NULL 写入不支持
+		function buildRedisOp(tableName, tableType, columns, rowValues, colName, newRawText, isNull) {
+			if (tableType === "list" || tableType === "stream" || isNull) {
+				return { ok: false, error: "redisTypeRo" };
+			}
+			const valueOf = (col) => rowValues[columns.indexOf(col)];
+			const one = (args) => ({ ok: true, ops: [{ statement: JSON.stringify(args) }] });
+			const two = (a, b) => ({ ok: true, ops: [{ statement: JSON.stringify(a) }, { statement: JSON.stringify(b) }] });
+			if (tableType === "string") {
+				if (colName === "value") return one(["SET", tableName, newRawText]);
+				if (colName === "key") return { ok: false, error: "readOnlyRo" };
+			} else if (tableType === "hash") {
+				if (colName === "value") return one(["HSET", tableName, valueOf("field"), newRawText]);
+				if (colName === "field") return { ok: false, error: "readOnlyRo" };
+			} else if (tableType === "zset") {
+				if (colName === "score") {
+					const score = Number(newRawText);
+					if (!Number.isFinite(score)) return { ok: false, error: null };
+					return one(["ZADD", tableName, score, valueOf("member")]);
+				}
+				if (colName === "member") {
+					// member 是有序集身份值：两步「删旧加新」，score 保持原值
+					return two(["ZREM", tableName, valueOf("member")], ["ZADD", tableName, valueOf("score"), newRawText]);
+				}
+			} else if (tableType === "set") {
+				if (colName === "member") return two(["SREM", tableName, valueOf("member")], ["SADD", tableName, newRawText]);
+			}
+			return { ok: false, error: "redisTypeRo" };
+		}
+
+		// MongoDB updateOne 命令文档构造：$set 单字段；filter 的 _id 按主键类型用 $oid 表达，
+		// date 列字符串值包 $date（Extended JSON 由服务端 reviveEjson 复活为 BSON 类型）
+		function buildMongoOp(tableName, idValue, idIsObjectId, colName, newRawText, isNull, colDataType) {
+			if (colName === "_id") return { ok: false, error: "readOnlyRo" };
+			let value = isNull ? null : parseCellText(newRawText);
+			if (!isNull && typeof value === "string" && typeof colDataType === "string" && colDataType.startsWith("date")) {
+				value = { "$date": value };
+			}
+			const filter = idIsObjectId ? { _id: { "$oid": idValue } } : { _id: idValue };
+			return {
+				ok: true,
+				ops: [{ statement: JSON.stringify({ updateOne: tableName, filter, update: { "$set": { [colName]: value } } }) }],
+			};
+		}
+
+		// Stryker disable all（buildMongoOp 之后：以下 auditTable/KIND_DEFAULTS/buildEditForm 为连接表单工具，无单元断言）
 		function auditTable(audit) {
 			return resultTable(
 				[t("auditTime"), t("auditAction"), t("auditConn"), t("auditDetail")],
@@ -468,7 +689,9 @@ window.__ModuleLoader__.load({
 			};
 		}
 
-		function ConnForm(props) {
+	// UI 组件渲染层无单元断言（纯函数层止于此），禁用至文件尾
+	// Stryker disable all
+	function ConnForm(props) {
 			// 新建（无 initial）默认分字段模式并预填官方默认值；编辑保持用户数据原样
 			const [form, setForm] = React.useState(() => props.initial || freshForm());
 			const [dirty, setDirty] = React.useState(() => new Set()); // 用户手改过的字段（切 kind 时保留）
@@ -751,25 +974,20 @@ window.__ModuleLoader__.load({
 		}
 
 		/* ---------------- 数据浏览 ---------------- */
-		function BrowseView(props) {
-			const { conns, projectPath } = props;
-			// Navicat 式对象树：连接 ▸ 库/schema ▸ 表，懒加载展开
+		// Navicat 式对象树：连接 ▸ 库/[schema] ▸ 表，懒加载展开（弹窗唯一实例，展开状态随弹窗生命周期）
+		function BrowseTree(props) {
+			const { conns, projectPath, sel, onSelect, autoExpand } = props;
+			// sel 由父组件持有（弹窗内 active 高亮与初始选中都依赖）；onSelect(选中记录, 触发元素) 上报
 			const [open, setOpen] = React.useState({}); // "c:<id>" | "d:<id>/<db>" -> bool
 			const [loading, setLoading] = React.useState({});
 			const [error, setError] = React.useState({}); // 树节点加载失败信息（就地显示，可点重试）
 			const [dbs, setDbs] = React.useState({}); // connId -> string[]
 			const [schemasMap, setSchemasMap] = React.useState({}); // "<connId>/<db>" -> string[]（PG/GaussDB 库内 schema 层）
 			const [tablesMap, setTablesMap] = React.useState({}); // "<connId>/<db|schema>" -> TableInfo[]
-			const [sel, setSel] = React.useState(null); // {connId, db, table: TableInfo}
-			const [schema, setSchema] = React.useState([]);
-			const [preview, setPreview] = React.useState(null); // QueryResult
-			const [page, setPage] = React.useState(1);
-			const [busy, setBusy] = React.useState("");
-			const [view, setView] = React.useState("structure"); // structure | preview（纯视图切换，不影响数据加载）
 
-			// 会话项目切换 / 连接列表变化时清空树缓存，避免陈旧授权下的旧数据
+			// 会话项目切换时清空树缓存，避免陈旧授权下的旧数据
 			React.useEffect(() => {
-				setOpen({}); setLoading({}); setError({}); setDbs({}); setSchemasMap({}); setTablesMap({}); setSel(null); setSchema([]); setPreview(null);
+				setOpen({}); setLoading({}); setError({}); setDbs({}); setSchemasMap({}); setTablesMap({});
 			}, [projectPath]);
 
 			function toggle(key, load) {
@@ -795,6 +1013,14 @@ window.__ModuleLoader__.load({
 						setDbs((m) => Object.assign({}, m, { [c.id]: list || [] }));
 					}));
 			}
+			// autoExpand：挂载后自动展开第一层级（连接节点），复用 toggleConn 的展开+懒加载；
+			// 加载失败仍走既有就地错误行机制。声明在清缓存 effect 之后：项目切换时先清 open 再重新展开
+			React.useEffect(() => {
+				if (!autoExpand) return;
+				for (const c of conns) {
+					if (!open["c:" + c.id]) toggleConn(c);
+				}
+			}, [conns, projectPath]); // eslint-disable-line
 			// PG/GaussDB 官方层级为 数据库 → 模式(schema) → 表：库节点下先列 schema 再列表
 			const HAS_SCHEMAS = { postgresql: true, gaussdb: true };
 			function toggleDb(c, d) {
@@ -815,39 +1041,28 @@ window.__ModuleLoader__.load({
 						setTablesMap((m) => Object.assign({}, m, { [c.id + "/" + d + "/" + s]: list || [] }));
 					}));
 			}
-			// 请求序号守卫：快速切换选中表/翻页时，丢弃晚到的旧响应，防止旧数据覆盖新选中项
-			const openSeq = React.useRef(0);
-			const openTable = React.useCallback((s, pg) => {
-				if (!s || !projectPath) return;
-				// PG 系跨库：database 传 "库名.schema"；其它库传库名
-				const dbRef = s.schemaName ? s.db + "." + s.schemaName : s.db;
-				const seq = ++openSeq.current;
-				setBusy("open");
-				Promise.all([
-					api("schema" + qs({ project: projectPath, connId: s.connId, database: dbRef, table: s.table.name })),
-					api("preview" + qs({ project: projectPath, connId: s.connId, database: dbRef, table: s.table.name, limit: PAGE_SIZE, offset: ((pg || 1) - 1) * PAGE_SIZE })),
-				])
-					.then(([sch, prev]) => {
-						if (seq !== openSeq.current) return; // 旧请求晚到，丢弃
-						setSchema(sch || []); setPreview(prev); setPage(pg || 1);
-					})
-					.catch((e) => props.onError(e))
-					.finally(() => { if (seq === openSeq.current) setBusy(""); });
-			}, [projectPath]);
-			React.useEffect(() => { if (sel) openTable(sel, 1); }, [sel]); // eslint-disable-line
-
 			// 树行：chevron（▸ 展开旋转 90°）+ 名称 + 可选右侧标注
+			// ponytail: 交互行全量 tabIndex=0 使 Tab 循环较长，升级路径为 APG roving tabindex + 方向键导航
 			function treerow(key, level, isOpen, leaf, label, onClick, active, extra) {
 				return React.createElement(
 					"div",
-					{ className: "dbt-treerow" + (active ? " active" : ""), key, onClick: onClick || undefined, style: { paddingLeft: 12 + level * 16 } },
+					{
+						className: "dbt-treerow" + (active ? " active" : ""), key,
+						role: onClick ? "treeitem" : undefined,
+						tabIndex: onClick ? 0 : undefined,
+						onClick: onClick || undefined,
+						onKeyDown: onClick ? (e) => {
+							if (e.key === "Enter" || e.key === " ") { e.preventDefault(); onClick({ currentTarget: e.currentTarget }); }
+						} : undefined,
+						style: { paddingLeft: 12 + level * 16 },
+					},
 					React.createElement("span", { className: "dbt-chev" + (isOpen ? " open" : "") + (leaf ? " leaf" : "") }, "▶"),
 					React.createElement("span", { className: "dbt-treename" }, label),
 					extra || null,
 				);
 			}
 
-			// 组装树：连接 → 库/schema → 表（懒加载缓存，未加载完成显示 …）
+			// 组装树：连接 → 库/schema → 表（懒加载缓存，未加载完成显示 …）；表节点点击上报选中记录与触发元素
 			const treeRows = [];
 			for (const c of conns) {
 				const ck = "c:" + c.id;
@@ -887,7 +1102,7 @@ window.__ModuleLoader__.load({
 								const active = !!sel && sel.connId === c.id && sel.db === d && sel.schemaName === s && sel.table.name === tb.name;
 								treeRows.push(treerow("t:" + sk + "/" + tb.name, 3, false, true,
 									tb.name + (tb.type && tb.type !== "table" ? " · " + tb.type : ""),
-									() => setSel({ connId: c.id, db: d, schemaName: s, table: tb }), active));
+									(e) => onSelect({ connId: c.id, db: d, schemaName: s, table: tb }, e.currentTarget), active));
 							}
 						}
 						continue;
@@ -899,7 +1114,7 @@ window.__ModuleLoader__.load({
 						const active = !!sel && sel.connId === c.id && sel.db === d && sel.table.name === tb.name;
 						treeRows.push(treerow("t:" + c.id + "/" + d + "/" + tb.name, 2, false, true,
 							tb.name + (tb.type && tb.type !== "table" ? " · " + tb.type : ""),
-							() => setSel({ connId: c.id, db: d, table: tb }), active));
+							(e) => onSelect({ connId: c.id, db: d, table: tb }, e.currentTarget), active));
 					}
 				}
 			}
@@ -907,42 +1122,374 @@ window.__ModuleLoader__.load({
 			return React.createElement(
 				"div",
 				{ style: { display: "flex", flexDirection: "column", gap: 8 } },
-				// Navicat 式对象树：点击展开连接/库，点击表查看结构/预览
+				// Navicat 式对象树：点击展开连接/库，点击表上报选中（由父组件决定打开弹窗）
 				conns.length === 0 ? React.createElement("div", { className: "dbt-muted" }, t("noConns")) :
 					React.createElement("div", { className: "dbt-group" },
 						React.createElement("div", { className: "dbt-tree" }, treeRows)),
-				sel
-					? React.createElement(
+			);
+		}
+
+		// Navicat 式浏览弹窗：左树选库-表，右看字段+数据（非模态可拖动浮动窗，由 Panel 层持有跨 tab 常驻）
+
+		/* ---------------- PreviewGrid：数据预览网格（Navicat 式单元格查看/编辑） ---------------- */
+		// props 契约：{ preview:{columns,rows,rowCount,truncated?}, schema:ColumnInfo[]（SQL/mongo；redis 为
+		// type/encoding/ttl/length，无 PRI）, kind, editable:rw 授权布尔, tableType:sel.table.type（redis 键类型）,
+		// tableName, dbRef, schemaName, connId, projectPath, onSaved:保存成功回调, askConfirm:runGuarded 确认回调 }
+		// redis 各键类型可就地编辑的数据列（与 buildRedisOp 分支保持一致；键名/字段名等定位列只读）
+		const REDIS_EDITABLE_COLS = {
+			string: ["value"],
+			hash: ["value"],
+			zset: ["score", "member"],
+			set: ["member"],
+		};
+		function PreviewGrid(props) {
+			const { preview, schema, kind, editable, tableType, tableName, dbRef, schemaName, connId, projectPath, onSaved, askConfirm } = props;
+			const [pop, setPop] = React.useState(null); // {rowIdx, colName, cell} 单元格浮层
+			const [editing, setEditing] = React.useState(false);
+			const [text, setText] = React.useState(""); // 编辑态 textarea 值（进入浮层时就位）
+			const [editNull, setEditNull] = React.useState(false); // 「设为 NULL」勾选（null 单元格默认勾选）
+			const [cellErr, setCellErr] = React.useState("");
+			const [busy, setBusy] = React.useState(false);
+			const [copied, setCopied] = React.useState(false);
+			const isMongo = kind === "mongodb";
+			// SQL 系主键列名（schema 中 key==="PRI"）；mongo 由 _id 单列承担，redis 无主键概念
+			const pkCols = (!isMongo && kind !== "redis" && Array.isArray(schema))
+				? schema.filter((c) => c && c.key === "PRI").map((c) => c.name)
+				: [];
+
+			// 打开浮层（查看态）：编辑态初值一并就位——textarea 空 ↔ 勾选设为 NULL
+			function openCell(rowIdx, colName, cell) {
+				setPop({ rowIdx, colName, cell });
+				setEditing(false);
+				setCellErr("");
+				setEditNull(cell === null);
+				setText(cell === null ? "" : String(cell));
+			}
+			function copyCell() {
+				if (!pop) return;
+				navigator.clipboard.writeText(String(pop.cell)).then(() => {
+					setCopied(true);
+					window.setTimeout(() => setCopied(false), 1500);
+				}, () => { /* 剪贴板不可用（无权限等）：静默，按钮文案不变 */ });
+			}
+
+			// 单元格编辑资格：返回 null=可编辑，否则为原因 i18n key（浮层 .dbt-readhint 展示）
+			function cellReason(colName, shown) {
+				if (!editable || !dialectOf(kind)) return "readOnlyRo";
+				if (isMongo) return colName === "_id" ? "readOnlyRo" : null;
+				if (kind === "redis") {
+					if ((tableType === "string" && colName === "key") || (tableType === "hash" && colName === "field")) return "readOnlyRo";
+					return (REDIS_EDITABLE_COLS[tableType] || []).includes(colName) ? null : "redisTypeRo";
+				}
+				// SQL 系：整表无主键 → 只读；截断/BLOB 单元格 → 防旧值覆盖
+				if (pkCols.length === 0) return "noPkHint";
+				if (isTruncatedCell(shown)) return "truncatedNoEdit";
+				if (isBlobCell(shown)) return "blobNoEdit";
+				return null;
+			}
+
+			// 保存：构造写回命令（按 kind 分派）→ 顺序执行（redis 两步）→ 全部成功关浮层并回调 onSaved
+			async function saveCell() {
+				if (!pop) return;
+				setCellErr("");
+				const { rowIdx, colName } = pop;
+				const row = (preview.rows || [])[rowIdx] || [];
+				let r;
+				if (kind === "redis") {
+					r = buildRedisOp(tableName, tableType, preview.columns, row, colName, text, editNull);
+				} else if (isMongo) {
+					const idIdx = preview.columns.indexOf("_id");
+					const idCol = (schema || []).find((c) => c && c.name === "_id");
+					const colInfo = (schema || []).find((c) => c && c.name === colName);
+					r = buildMongoOp(tableName, idIdx >= 0 ? row[idIdx] : undefined,
+						!!(idCol && typeof idCol.dataType === "string" && idCol.dataType.startsWith("ObjectId")),
+						colName, text, editNull, colInfo ? colInfo.dataType : undefined);
+				} else {
+					r = buildUpdate(kind, tableName, dbRef, schemaName, colName, text, editNull, pkCols,
+						pkCols.map((c) => row[preview.columns.indexOf(c)]));
+				}
+				if (!r.ok) { setCellErr(r.error ? t(r.error) : t("error")); return; }
+				setBusy(true);
+				try {
+					for (const op of r.ops) {
+						await runGuarded(
+							(challengeId) => api("execute", { method: "POST", body: { projectPath, connId, statement: op.statement, params: op.params, database: op.database, challengeId } }),
+							askConfirm,
+						);
+					}
+					setPop(null);
+					if (onSaved) onSaved();
+				} catch (e) {
+					// 取消确认（e.cancelled）不算失败：浮层保持打开供重试
+					if (!e.cancelled) setCellErr(t("error") + ": " + String(e && e.message ? e.message : e));
+				} finally {
+					setBusy(false);
+				}
+			}
+
+			const popReason = pop ? cellReason(pop.colName, pop.cell === null ? "NULL" : String(pop.cell)) : null;
+			return React.createElement(
+				"div",
+				{ className: "dbt-browse-root", style: { display: "flex", flexDirection: "column", flex: 1, minHeight: 0 } },
+				// 顶层只读提示：授权为 ro 时整格只读，单元格仍可点击查看完整值
+				!editable ? React.createElement("div", { className: "dbt-readhint" }, t("readOnlyRo")) : null,
+				// relative 容器承载单元格浮层（简化定位：水平居中贴底）
+				React.createElement(
+					"div",
+					{ style: { position: "relative", flex: 1, minHeight: 0, display: "flex", flexDirection: "column" } },
+					React.createElement(
 						"div",
-						{ style: { display: "flex", flexDirection: "column", gap: 8 } },
-						// 结构/预览：mini segmented 切换（复用现有 i18n key，不新增）
+						{ className: "dbt-browse-tablewrap" },
+						React.createElement(
+							"table",
+							{ className: "dbt-table" },
+							React.createElement(
+								"thead",
+								null,
+								React.createElement("tr", null, (preview.columns || []).map((c, i) => React.createElement("th", { key: i }, c))),
+							),
+							React.createElement(
+								"tbody",
+								null,
+								(preview.rows || []).map((row, i) =>
+									React.createElement("tr", { key: i },
+										(preview.columns || []).map((colName, j) =>
+											React.createElement("td", { key: j, title: row[j] === null ? "NULL" : String(row[j]) },
+												React.createElement("button", {
+													className: "dbt-cellbtn", type: "button",
+													onClick: () => openCell(i, colName, row[j]),
+												}, row[j] === null ? React.createElement("span", { className: "dbt-nullchip" }, "NULL") : String(row[j]))))),
+							),
+						),
+					),
+					pop ? React.createElement(
+						"div",
+						{ className: "dbt-cellpop", style: { position: "absolute", left: "50%", transform: "translateX(-50%)", bottom: 12 } },
+						React.createElement("strong", null, t("cellValue") + " · " + pop.colName),
 						React.createElement(
 							"div",
-							{ className: "dbt-seg", style: { alignSelf: "flex-start" } },
-							["structure", "preview"].map((v) =>
-								React.createElement("button", { key: v, className: view === v ? "active" : "", onClick: () => setView(v) }, v === "structure" ? t("structure") : t("preview"))),
+							{ className: "dbt-cellpop-value" },
+							pop.cell === null ? React.createElement("span", { className: "dbt-nullchip" }, "NULL") : String(pop.cell),
 						),
-						React.createElement("strong", null, (view === "structure" ? t("structure") : t("preview")) + " · " + sel.db + (sel.schemaName ? "." + sel.schemaName : "") + " / " + sel.table.name),
-						view === "structure"
-							? resultTable(
-								[t("column"), t("dataType"), t("nullable"), t("keyCol"), t("defaultVal"), t("comment")],
-								schema.map((col) => [col.name, col.dataType, col.nullable ? "YES" : "NO", col.key || "", col.default === null || col.default === undefined ? "" : String(col.default), col.comment || ""]),
+						popReason ? React.createElement("div", { className: "dbt-readhint" }, t(popReason)) : null,
+						cellErr ? React.createElement("div", { className: "dbt-err" }, cellErr) : null,
+						editing
+							? React.createElement(
+								"div",
+								{ className: "dbt-celledit" },
+								React.createElement("textarea", { value: text, onChange: (e) => setText(e.target.value) }),
+								React.createElement(
+									"label",
+									// 不用 .dbt-row：全局 input flex:1 会把 checkbox 拉伸占满、标签被推到远端（视觉审查命中）
+									{ style: { display: "flex", alignItems: "center", gap: 6, flexWrap: "nowrap", width: "fit-content" } },
+									React.createElement("input", { type: "checkbox", style: { flex: "none", minWidth: 0, width: "auto" }, checked: editNull, onChange: (e) => setEditNull(e.target.checked) }),
+									t("setNull"),
+								),
+								React.createElement(
+									"div",
+									{ className: "dbt-row" },
+									React.createElement("button", { className: "dbt-btn primary", disabled: busy, onClick: saveCell }, busy ? t("cellSaving") : t("save")),
+									React.createElement("button", { className: "dbt-btn", disabled: busy, onClick: () => setEditing(false) }, t("cancel")),
+								),
 							)
 							: React.createElement(
-								React.Fragment,
-								null,
-								preview ? resultTable(preview.columns, preview.rows) : null,
+								"div",
+								{ className: "dbt-cellpop-actions" },
+								React.createElement("button", { className: "dbt-btn", onClick: copyCell }, copied ? t("copied") : t("copyBtn")),
+								popReason === null ? React.createElement("button", { className: "dbt-btn primary", onClick: () => setEditing(true) }, t("editCell")) : null,
+								React.createElement("button", { className: "dbt-btn", onClick: () => setPop(null) }, t("close")),
+							),
+						) : null,
+					),
+				),
+			);
+		}
+
+		function BrowseDialog(props) {
+			const { conns, projectPath, grants, askConfirm, onClose } = props;
+			// grants / askConfirm：预留给后续单元格编辑的危险操作确认通道，本任务先接住不使用
+			const [sel, setSel] = React.useState(null); // 弹窗内当前选中（null=未选表，右栏显示引导空态）
+			const [view, setView] = React.useState("structure"); // structure | preview（纯视图切换，不影响数据加载）
+			const [schema, setSchema] = React.useState([]);
+			const [preview, setPreview] = React.useState(null); // QueryResult
+			const [page, setPage] = React.useState(1);
+			const [busy, setBusy] = React.useState("");
+			const [loadErr, setLoadErr] = React.useState(""); // 右栏加载失败（就地显示 + 重试）
+			const openSeq = React.useRef(0); // 请求序号守卫
+			const closeRef = React.useRef(null);
+
+			// 请求序号守卫（沿用面板）：快速切表/翻页时丢弃晚到旧响应，防止旧数据覆盖新选中项
+			const openTable = React.useCallback((s, pg) => {
+				if (!s || !projectPath) return;
+				// PG 系跨库：database 传 "库名.schema"；其它库传库名
+				const dbRef = s.schemaName ? s.db + "." + s.schemaName : s.db;
+				const seq = ++openSeq.current;
+				setBusy("open"); setLoadErr("");
+				Promise.all([
+					api("schema" + qs({ project: projectPath, connId: s.connId, database: dbRef, table: s.table.name })),
+					api("preview" + qs({ project: projectPath, connId: s.connId, database: dbRef, table: s.table.name, limit: PAGE_SIZE, offset: ((pg || 1) - 1) * PAGE_SIZE })),
+				])
+					.then(([sch, prev]) => {
+						if (seq !== openSeq.current) return; // 旧请求晚到，丢弃
+						setSchema(sch || []); setPreview(prev); setPage(pg || 1);
+					})
+					// 弹窗内错误就地显示（不走面板顶部错误区）
+					.catch((e) => { if (seq === openSeq.current) setLoadErr(String(e && e.message ? e.message : e)); })
+					.finally(() => { if (seq === openSeq.current) setBusy(""); });
+			}, [projectPath]);
+			React.useEffect(() => { if (sel) openTable(sel, 1); }, [sel]); // eslint-disable-line
+
+			// 非模态浮窗：无焦点陷阱（焦点可自由离开，主页交互不受阻）；Esc 仅在焦点位于弹窗内时
+			// 经容器 onKeyDown 触发（stopPropagation 防止宿主级快捷键同时响应）。初始焦点=关闭按钮
+			React.useEffect(() => {
+				if (closeRef.current) closeRef.current.focus();
+			}, []);
+
+			// 拖动定位：初始停靠视口右上（宽度按 1100 常量估算，.dbt-browse-dialog 为 max-width:1400 的自适应宽）
+			const [pos, setPos] = React.useState(() => ({ top: 72, left: Math.max(12, (window.innerWidth || 1200) - 1100 - 24) }));
+			const draggingRef = React.useRef(null); // {dx, dy}
+			const [dragging, setDragging] = React.useState(false);
+			function stopDrag() { draggingRef.current = null; setDragging(false); }
+			function onHeaderPointerDown(e) {
+				// header 内可点元素（关闭按钮）不启动拖动，否则 setPointerCapture 会把 click 重定向到 header 使按钮失效
+				if (e.target.closest && e.target.closest("button")) return;
+				draggingRef.current = { dx: e.clientX - pos.left, dy: e.clientY - pos.top };
+				e.currentTarget.setPointerCapture(e.pointerId);
+				setDragging(true);
+			}
+			function onHeaderPointerMove(e) {
+				if (!draggingRef.current) return;
+				const h = window.innerHeight || 800, w = window.innerWidth || 1200;
+				// 垂直 clamp 用浮窗实际高度：整体保持在视口内（视觉审查：底部分页栏不得溢出被裁）；
+				// 水平放宽到至少留 120px 可抓回（允许左右拖出一半）
+				const dlgH = (e.currentTarget.parentElement && e.currentTarget.parentElement.offsetHeight) || 720;
+				setPos({
+					top: Math.min(Math.max(e.clientY - draggingRef.current.dy, 0), Math.max(0, h - dlgH)),
+					left: Math.min(Math.max(e.clientX - draggingRef.current.dx, -(1100 - 120)), w - 120),
+				});
+			}
+
+			// 右栏互斥状态：未选中引导 / 加载骨架 / 错误重试 / 空态 / 表格
+			function rightPane() {
+				if (!sel && busy !== "open" && !loadErr) {
+					// 未选表：显示引导空态（浏览窗口可直接打开，不强制先选表）
+					return React.createElement("div", { className: "dbt-browse-empty" }, t("selectTableHint"));
+				}
+				if (busy === "open") {
+					// 表形状骨架：6 行 6 列静态色块（不引入新动画，reduced-motion 天然安全）
+					return React.createElement("div", { className: "dbt-browse-skel", role: "status", "aria-busy": "true" },
+						[0, 1, 2, 3, 4, 5].map((r) => React.createElement("div", { className: "dbt-browse-skelrow", key: r },
+							[0, 1, 2, 3, 4, 5].map((c) => React.createElement("div", { className: "dbt-browse-skelcell", key: c })))));
+				}
+				if (loadErr) {
+					// 错误就地显示 + 重试（弹窗遮罩下面板顶部错误区不可见，不走 props.onError）
+					return React.createElement("div", { className: "dbt-browse-errorbox" },
+						React.createElement("div", { className: "dbt-err" }, t("error") + ": " + loadErr),
+						React.createElement("button", { className: "dbt-btn", onClick: () => openTable(sel, 1) }, t("retry")));
+				}
+				if (view === "structure") {
+					if (!schema.length) return React.createElement("div", { className: "dbt-browse-empty" }, t("emptyStructure"));
+					return resultTable(
+						[t("column"), t("dataType"), t("nullable"), t("keyCol"), t("defaultVal"), t("comment")],
+						schema.map((col) => [col.name, col.dataType, col.nullable ? "YES" : "NO", col.key || "", col.default === null || col.default === undefined ? "" : String(col.default), col.comment || ""]),
+						undefined, "dbt-browse-tablewrap");
+				}
+				if (!preview || !preview.rows || preview.rows.length === 0) {
+					return React.createElement("div", { className: "dbt-browse-empty" }, t("emptyData"));
+				}
+				// Navicat 式单元格网格：kind/可编辑性由当前连接与授权决定（rw=可编辑），保存后重拉当前页
+				const conn = conns.find((c) => c.id === sel.connId);
+				const grant = (grants || []).find((g) => g.connId === sel.connId);
+				return React.createElement(PreviewGrid, {
+					preview, schema,
+					kind: conn ? conn.kind : undefined,
+					editable: !!grant && grant.mode === "rw",
+					tableType: sel.table.type,
+					tableName: sel.table.name,
+					dbRef: sel.schemaName ? sel.db + "." + sel.schemaName : sel.db,
+					schemaName: sel.schemaName || null,
+					connId: sel.connId, projectPath,
+					onSaved: () => openTable(sel, page),
+					askConfirm,
+				});
+			}
+
+			// 非模态浮窗：无遮罩、fixed 定位、可拖动；portal 到 body 不受侧栏视图切换影响
+			return mountDialog(React.createElement(
+				"div",
+				{
+					className: "dbt-browse-root dbt-browse-dialog" + (dragging ? " dragging" : ""),
+					style: { position: "fixed", top: pos.top, left: pos.left },
+					role: "dialog", "aria-labelledby": "dbt-browse-title",
+					onKeyDown: (e) => {
+						if (e.key === "Escape") { e.stopPropagation(); onClose(); }
+					},
+				},
+				// ---- header：面包屑 + 关闭（整条 header 可拖动）----
+				React.createElement(
+					"div",
+					{
+						className: "dbt-browse-header",
+						style: { cursor: dragging ? "grabbing" : "grab" },
+						onPointerDown: onHeaderPointerDown,
+						onPointerMove: onHeaderPointerMove,
+						onPointerUp: stopDrag,
+						onPointerCancel: stopDrag,
+					},
+					React.createElement("div", { className: "dbt-browse-title", id: "dbt-browse-title" },
+						!sel ? t("viewBrowse") : t("browseDialogTitle", {
+							conn: (conns.find((c) => c.id === sel.connId) || {}).name || sel.connId,
+							db: sel.schemaName ? sel.db + "." + sel.schemaName : sel.db,
+							table: sel.table.name,
+						})),
+						React.createElement(
+							"button",
+							{ className: "dbt-browse-close", ref: closeRef, "aria-label": t("close"), onClick: onClose },
+							React.createElement("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "none", "aria-hidden": "true" },
+								React.createElement("path", { d: "M2.5 2.5 L9.5 9.5 M9.5 2.5 L2.5 9.5", stroke: "currentColor", strokeWidth: 1.4, strokeLinecap: "round" })),
+						),
+					),
+					// ---- body：左树 + 右主区 ----
+					React.createElement(
+						"div",
+						{ className: "dbt-browse-body" },
+						React.createElement(
+							"div",
+							{ className: "dbt-browse-tree" },
+							React.createElement(BrowseTree, {
+								conns, projectPath, sel, autoExpand: true, // 本任务后弹窗树是唯一树实例，挂载即展开第一层级
+								onSelect: (s) => setSel(s), // 弹窗内树切表
+							}),
+						),
+						React.createElement(
+							"div",
+							{ className: "dbt-browse-main" },
+							// 结构/数据：mini segmented（复用面板同款与 i18n key）
+							React.createElement(
+								"div",
+								{ className: "dbt-browse-tabs" },
 								React.createElement(
 									"div",
-									{ className: "dbt-row", style: { justifyContent: "space-between" } },
-									React.createElement("button", { className: "dbt-btn", disabled: page <= 1 || busy === "open", onClick: () => openTable(sel, page - 1) }, "‹ " + t("prevPage")),
-									React.createElement("span", { className: "dbt-muted" }, t("pageInfo", { page })),
-									React.createElement("button", { className: "dbt-btn", disabled: (preview && preview.truncated) === false || busy === "open", onClick: () => openTable(sel, page + 1) }, t("nextPage") + " ›"),
+									{ className: "dbt-seg" },
+									["structure", "preview"].map((v) =>
+										React.createElement("button", { key: v, className: view === v ? "active" : "", onClick: () => setView(v) },
+											v === "structure" ? t("structure") : t("preview"))),
 								),
-								preview && preview.truncated ? React.createElement("div", { className: "dbt-muted" }, t("previewTruncated")) : null,
 							),
-					)
-					: null,
+							React.createElement("div", { className: "dbt-browse-content" }, rightPane()),
+						),
+					),
+					// ---- footer：分页条（仅已选表的数据预览视图；空选中态不显示） ----
+					sel && view === "preview" && !loadErr ? React.createElement(
+						"div",
+						{ className: "dbt-browse-footer" },
+						React.createElement("button", { className: "dbt-btn", disabled: page <= 1 || busy === "open", onClick: () => openTable(sel, page - 1) }, "‹ " + t("prevPage")),
+						React.createElement("span", { className: "dbt-muted" }, t("pageInfo", { page })),
+						React.createElement("span", { style: { flex: 1 } }),
+						preview && preview.truncated ? React.createElement("span", { className: "dbt-muted" }, t("previewTruncated")) : null,
+						React.createElement("button", { className: "dbt-btn", disabled: (preview && preview.truncated) === false || busy === "open", onClick: () => openTable(sel, page + 1) }, t("nextPage") + " ›"),
+					) : null,
+				),
 			);
 		}
 
@@ -1072,6 +1619,8 @@ window.__ModuleLoader__.load({
 			const [error, setError] = React.useState("");
 			const [message, setMessage] = React.useState("");
 			const [confirmReq, setConfirmReq] = React.useState(null); // {statement,danger,reason,resolve}
+			// 数据浏览浮窗开关：由 Panel 层持有（不随 view 切换卸载），跨 tab 常驻
+			const [browseOpen, setBrowseOpen] = React.useState(false);
 
 			const askConfirm = React.useCallback((info) => new Promise((resolve) => {
 				setConfirmReq(Object.assign({}, info, { resolve }));
@@ -1126,7 +1675,11 @@ window.__ModuleLoader__.load({
 					"div",
 					{ className: "dbt-tabs" },
 					[["manage", t("viewManage")], ["grants", t("viewGrants")], ["browse", t("viewBrowse")], ["console", t("viewConsole")]].map(([v, label]) =>
-						React.createElement("button", { key: v, className: view === v ? "active" : "", onClick: () => setView(v) }, label)),
+						// browse tab：切视图的同时直接打开浮窗（单击即用，不必再进树点表）
+						React.createElement("button", {
+							key: v, className: view === v ? "active" : "",
+							onClick: () => { setView(v); if (v === "browse") setBrowseOpen(true); },
+						}, label)),
 				),
 				(projectEdited || !projectPath)
 					? React.createElement(
@@ -1161,11 +1714,24 @@ window.__ModuleLoader__.load({
 				React.createElement("div", { className: "dbt-view", key: view },
 					view === "manage" ? React.createElement(ManageView, shared) : null,
 					view === "grants" ? React.createElement(GrantsView, shared) : null,
-					view === "browse" ? React.createElement(BrowseView, shared) : null,
+					// browse：提示卡（浮窗由 Panel 层在下方常驻渲染，不随视图切换卸载）
+					view === "browse" ? React.createElement(
+						"div",
+						{ className: "dbt-card" },
+						// 主提示用正常文字色（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"))),
+					) : null,
 					view === "console" ? React.createElement(ConsoleView, Object.assign({}, shared, { askConfirm })) : null,
 				),
 				React.createElement("div", { className: "dbt-muted" }, t("footerHint")),
 				confirmReq ? React.createElement(DangerDialog, { challenge: confirmReq, onClose: () => setConfirmReq(null) }) : null,
+				// 浮窗常驻：portal 到 body 且在 dbt-view 外，切 tab 时不消失
+				browseOpen ? React.createElement(BrowseDialog, {
+					conns, projectPath, grants, askConfirm,
+					onClose: () => setBrowseOpen(false),
+				}) : null,
 			);
 		}
 
@@ -1225,6 +1791,12 @@ window.__ModuleLoader__.load({
 		}
 		exports.apply = apply;
 		exports.inject = inject;
+		// 测试面：单元格写回纯函数（单测直接断言命令构造，无需起 React/HTTP）
+		exports.__testables = {
+			dialectOf, quoteIdent, parseCellText, isTruncatedCell, isBlobCell,
+			buildUpdate, buildRedisOp, buildMongoOp,
+		};
 		return module.exports;
 	},
 });
+// Stryker restore all

package/dist/adapters/mongodb/index.js

@@ -355,7 +355,7 @@ export async function createMongoAdapter(conn, opts) {
                 switch (op) {
                     case 'insertOne': {
                         // 不设 cmd.insert 别名：该键语义是集合名（insertMany 命令形态），混用会误导报错方向
-                        const doc = requireObject(cmd.document, 'insertOne.document');
+                        const doc = reviveEjson(requireObject(cmd.document, 'insertOne.document'));
                         const r = await c.insertOne(doc);
                         return { affectedRows: 1, message: `已插入 1 条文档到 ${name}（_id=${String(r.insertedId)}）` };
                     }
@@ -363,7 +363,7 @@ export async function createMongoAdapter(conn, opts) {
                         if (!Array.isArray(cmd.documents ?? cmd.docs) || (cmd.documents ?? cmd.docs).length === 0) {
                             throw new Error('MongoDB insertMany 需要非空 documents 数组：{"insertMany":"coll","documents":[{...}]}');
                         }
-                        const docs = (cmd.documents ?? cmd.docs).map((d) => requireObject(d, 'insertMany.documents[]'));
+                        const docs = (cmd.documents ?? cmd.docs).map((d) => reviveEjson(requireObject(d, 'insertMany.documents[]')));
                         const r = await c.insertMany(docs);
                         return { affectedRows: r.insertedCount, message: `已插入 ${r.insertedCount} 条文档到 ${name}` };
                     }
@@ -371,8 +371,8 @@ export async function createMongoAdapter(conn, opts) {
                     case 'updateMany': {
                         if (op === 'updateMany')
                             assertExplicitFilter(op, cmd.filter);
-                        const filter = requireObject(cmd.filter, `${op}.filter`);
-                        const update = requireObject(cmd.update, `${op}.update`);
+                        const filter = reviveEjson(requireObject(cmd.filter, `${op}.filter`));
+                        const update = reviveEjson(requireObject(cmd.update, `${op}.update`));
                         const r = op === 'updateOne'
                             ? await c.updateOne(filter, update)
                             : await c.updateMany(filter, update);
@@ -382,8 +382,8 @@ export async function createMongoAdapter(conn, opts) {
                         };
                     }
                     case 'replaceOne': {
-                        const filter = requireObject(cmd.filter, 'replaceOne.filter');
-                        const replacement = requireObject(cmd.replacement ?? cmd.update, 'replaceOne.replacement');
+                        const filter = reviveEjson(requireObject(cmd.filter, 'replaceOne.filter'));
+                        const replacement = reviveEjson(requireObject(cmd.replacement ?? cmd.update, 'replaceOne.replacement'));
                         const r = await c.replaceOne(filter, replacement);
                         return {
                             affectedRows: r.modifiedCount,
@@ -394,7 +394,7 @@ export async function createMongoAdapter(conn, opts) {
                     case 'deleteMany': {
                         if (op === 'deleteMany')
                             assertExplicitFilter(op, cmd.filter);
-                        const filter = requireObject(cmd.filter, `${op}.filter`);
+                        const filter = reviveEjson(requireObject(cmd.filter, `${op}.filter`));
                         const r = op === 'deleteOne'
                             ? await c.deleteOne(filter)
                             : await c.deleteMany(filter);
@@ -526,6 +526,35 @@ function inferBsonType(v) {
         return 'object';
     return typeof v;
 }
+/** Mongo Extended JSON（$oid/$date）→ BSON 原生类型：前端单元格写回以 JSON 表达 ObjectId/Date，
+ * driver 不识别 EJSON 形态，须经此复活。最小集：仅 $oid/$date；其余键原样递归保留。
+ * $oid 需 24 位十六进制，非法抛中文可读错误；vendor 缺失时 $oid 原样返回不抛（降级可用）。 */
+const OID_HEX_RE = /^[0-9a-f]{24}$/i;
+export function reviveEjson(v) {
+    if (Array.isArray(v))
+        return v.map(reviveEjson);
+    if (!isPlainObject(v))
+        return v;
+    const keys = Object.keys(v);
+    if (keys.length === 1 && keys[0] === '$oid') {
+        const s = v.$oid;
+        if (typeof s !== 'string' || !OID_HEX_RE.test(s)) {
+            throw new Error(`MongoDB $oid 值非法（${String(s)}）：需 24 位十六进制字符串，如 {"$oid":"507f1f77bcf86cd799439011"}`);
+        }
+        const M = vendorOrNull();
+        return M ? new M.ObjectId(s) : v;
+    }
+    if (keys.length === 1 && keys[0] === '$date') {
+        const d = v.$date;
+        if (typeof d !== 'string' && typeof d !== 'number')
+            return v;
+        return new Date(d);
+    }
+    const out = {};
+    for (const [k, val] of Object.entries(v))
+        out[k] = reviveEjson(val);
+    return out;
+}
 export function buildUri(fields, ssl) {
     const host = typeof fields?.host === 'string' && fields.host !== '' ? fields.host : '127.0.0.1';
     const port = typeof fields?.port === 'number' ? fields.port : 27017;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "dsh-db-tool",
-  "version": "1.4.1",
+  "version": "1.5.1",
   "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",