@dimina-kit/devtools 0.3.1-dev.20260518114324 → 0.3.2-dev.20260522085907

package/README.md

@@ -206,9 +206,12 @@ src/
       types.ts
     instrumentation/                     # 注入到小程序 runtime 的探针
       console.ts                         # 控制台拦截
-      app-data.ts                        # Worker setData 拦截
-      wxml.ts                            # Vue 组件树提取 + WXML 高亮 overlay
+      app-data.ts                        # Worker setData 拦截 → createAppDataSource
+      wxml.ts                            # Vue 组件树提取 → createWxmlSource
       disposable.ts                      # instrumentation 共用的清理工具
+    miniapp-snapshot/                    # 面板数据统一快照框架（docs/miniapp-snapshot.md）
+      types.ts                           # MiniappSnapshotSource / SnapshotEnvelope
+      host.ts                            # createMiniappSnapshotHost → push/pull/__miniappSnapshot
     runtime/
       bridge.ts                          # installSimulatorBridge → window.__simulatorData
       custom-apis.ts                     # installCustomApisBridge → window.__diminaCustomApis
@@ -444,11 +447,13 @@ const myAdapter: CompilationAdapter = {
 
 ### 按需：instrumentation
 
-| Instrumentation | 捕获内容 | 数据通道 |
+Console 是独立 instrumentation；AppData 与 WXML 已迁移到 **miniappSnapshot** 框架——各自实现一个 `MiniappSnapshotSource`，由 `MiniappSnapshotHost` 统一负责推送 / 拉取 / reload 重同步（详见 `docs/miniapp-snapshot.md`）。
+
+| 探针 | 捕获内容 | 数据通道 |
 | --- | --- | --- |
-| `installConsoleInstrumentation` | `console.*`、`window.onerror`、未捕获 rejection | IPC sendToHost |
-| `installAppDataInstrumentation` | Worker `type='u'` 消息、setData 调用 | IPC sendToHost + 写入 bridge state |
-| `installWxmlInstrumentation` | Vue 组件树提取、MutationObserver 自动更新 | IPC sendToHost + 写入 bridge state |
+| `installConsoleInstrumentation()` | `console.*`、`window.onerror`、未捕获 rejection | `sendToHost` |
+| `createAppDataSource()` | Worker `ub` 消息、setData / page init | miniappSnapshot 框架（`miniapp-snapshot:push`） |
+| `createWxmlSource()` | Vue 组件树提取、MutationObserver 自动更新 | miniappSnapshot 框架（`miniapp-snapshot:push`） |
 
 > Storage 面板的数据由主进程通过 CDP `DOMStorage` 域抓取（`src/main/services/simulator-storage`），**不需要 preload 侧 instrumentation**。
 
@@ -464,8 +469,9 @@ import {
   installSimulatorBridge,
   installCustomApisBridge,
   installConsoleInstrumentation,
-  installAppDataInstrumentation,
-  installWxmlInstrumentation,
+  createMiniappSnapshotHost,
+  createAppDataSource,
+  createWxmlSource,
   setupApiCompatHook,
 } from '@dimina-kit/devtools/preload'
 
@@ -474,12 +480,16 @@ setupApiCompatHook()
 installSimulatorBridge()
 installCustomApisBridge()   // 若用到 registerSimulatorApi，必装
 
-// 2. instrumentation（按需）
+// 2. Console instrumentation（按需）
 installConsoleInstrumentation()
-installAppDataInstrumentation()
-installWxmlInstrumentation()
 
-// 3. 自定义 hook
+// 3. miniappSnapshot 框架：注册面板数据源后 install()
+const snapshotHost = createMiniappSnapshotHost()
+snapshotHost.register(createAppDataSource())
+snapshotHost.register(createWxmlSource())
+snapshotHost.install()
+
+// 4. 自定义 hook
 window.addEventListener('error', (e) => {
   console.error('[my-preload]', e.message)
 })
@@ -559,9 +569,8 @@ dispose()
 @dimina-kit/devtools/preload                installSimulatorBridge,
                                        installCustomApisBridge,
                                        installConsoleInstrumentation,
-                                       installAppDataInstrumentation, sendAllAppData,
-                                       installWxmlInstrumentation, sendWxmlTree,
-                                       setupWxmlObserver,
+                                       createMiniappSnapshotHost,
+                                       createAppDataSource, createWxmlSource,
                                        setupApiCompatHook
                                        （storage 面板数据由主进程 CDP 抓取，无 preload 侧 hook）
 ```
@@ -613,17 +622,11 @@ interface WorkbenchContext {
 }
 ```
 
-会话和视图状态封装在对应 service 的私有闭包中，通过方法访问：
+会话和视图状态封装在对应 service 的私有闭包中，通过方法访问，例如：
 
-| 旧写法                       | 新写法                                                            |
-| ---------------------------- | ----------------------------------------------------------------- |
-| `ctx.currentProjectPath`     | `ctx.workspace.getProjectPath()`                                  |
-| `ctx.currentSession`         | `ctx.workspace.getSession()` / `ctx.workspace.hasActiveSession()` |
-| `ctx.simulatorWebContentsId` | `ctx.views.getSimulatorWebContentsId()`                           |
-| `ctx.devToolsViewAdded`      | `ctx.views.isSimulatorAdded()`                                    |
-| `ctx.lastSimWidth`           | `ctx.views.getLastSimWidth()`                                     |
-| `ctx.mainWindow`             | `ctx.windows.mainWindow`                                          |
-| `ctx.workbenchSettingsWindow`| `ctx.windows.settingsWindow`                                      |
+- `ctx.workspace.getProjectPath()` / `ctx.workspace.getSession()` / `ctx.workspace.hasActiveSession()`
+- `ctx.views.getSimulatorWebContentsId()` / `ctx.views.isSimulatorAdded()` / `ctx.views.getLastSimWidth()`
+- `ctx.windows.mainWindow` / `ctx.windows.settingsWindow`
 
 ---
 
@@ -653,13 +656,14 @@ flowchart TB
 
 ### 数据流
 
-按面板拆分，分**三条独立路径**：
+按面板 / 场景拆分：
 
 | 面板 / 场景 | 模式 | 路径 |
 | --- | --- | --- |
-| Console / AppData / WXML 树 | 推送 | preload instrumentation 通过 `runtime/host.ts:sendToHost` 经 webview `ipcRenderer.sendToHost` 推到宿主 → renderer 监听 `ipc-message` 分发 |
+| Console | 推送 | `installConsoleInstrumentation` 经 `runtime/host.ts:sendToHost` → webview `ipcRenderer.sendToHost` 推到宿主 → renderer 监听 `ipc-message` |
+| AppData / WXML 树 | 推送 + 拉取 | **miniappSnapshot 框架**：preload `MiniappSnapshotHost` 经 `miniapp-snapshot:push` 推全量快照，renderer `useMiniappSnapshot` 整份投影；面板「刷新」走 `miniapp-snapshot:pull`（详见 `docs/miniapp-snapshot.md`） |
 | Storage | 拉取 + 推送 | renderer `ipcInvoke(SimulatorStorageChannel.GetSnapshot)` → 主进程 CDP `DOMStorage` 域；变更事件由主进程通过 `SimulatorStorageChannel.Event` 推回 renderer |
-| 元素选区 / `Page.getData` / MCP overview | 拉取 | 主进程 `webContents.executeJavaScript(...)` 或 `Runtime.evaluate(...)` 读 `window.__simulatorData.*`（由 `installSimulatorBridge` 暴露） |
+| 元素选区 / `Page.getData` / MCP overview | 拉取 | 主进程 `webContents.executeJavaScript(...)` 或 `Runtime.evaluate(...)` 读 `window.__simulatorData.*`（由 `installSimulatorBridge` 暴露）；面板快照亦可经 `window.__miniappSnapshot.get(id)` 同步读取（由 `MiniappSnapshotHost` 暴露） |
 
 > `src/main/ipc/panels.ts` 暴露 `panel:eval` handler 供外部 host 自定义面板复用，内置 renderer 不消费它。
 
@@ -667,49 +671,7 @@ flowchart TB
 
 ## IPC 通信总览
 
-| 频道                              | 方向  | 说明                                           |
-| --------------------------------- | ----- | ---------------------------------------------- |
-| `projects:list`                   | R→M   | 获取项目列表                                   |
-| `projects:add`                    | R→M   | 添加项目                                       |
-| `projects:remove`                 | R→M   | 删除项目                                       |
-| `dialog:openDirectory`            | R→M   | 打开目录选择对话框                             |
-| `project:open`                    | R→M   | 编译并启动项目                                 |
-| `project:close`                   | R→M   | 停止编译，清理 View                            |
-| `project:status`                  | M→R   | 编译状态推送                                   |
-| `project:getPages`                | R→M   | 读取 app.json pages                            |
-| `project:getCompileConfig`        | R→M   | 读取编译配置                                   |
-| `project:saveCompileConfig`       | R→M   | 保存编译配置                                   |
-| `app:getPreloadPath`              | R→M   | 获取 preload 脚本路径                          |
-| `app:getBranding`                 | R→M   | 读取品牌信息（`brandingProvider`）             |
-| `toolbar:getActions`              | R→M   | 读取自定义工具栏按钮                           |
-| `workbench:getPanelConfig`        | R→M   | 获取 panels 配置                               |
-| `workbench:getApiNamespaces`      | R→M   | 获取自定义 API namespaces                      |
-| `simulator:attach`                | R→M   | 绑定 simulator webContents，创建 simulatorView |
-| `simulator:detach`                | R→M   | 销毁所有 View                                  |
-| `simulator:resize`                | R→M   | 更新 View 位置（分割线拖动）                   |
-| `simulator:setVisible`            | R→M   | 显示/隐藏 simulator 面板                       |
-| `workbench:reset`                 | R→M   | 通知主窗口重置面板状态                         |
-| `panel:list`                      | R→M   | 获取启用的内置面板列表                         |
-| `panel:eval`                      | R→M   | 在 simulator webContents 执行 JS 并返回结果    |
-| `panel:select`                    | R→M   | 切换到指定内置面板                             |
-| `panel:selectSimulator`           | R→M   | 切换到 simulator tab                           |
-| `popover:show`                    | R→M   | 创建弹窗                                       |
-| `popover:hide`                    | R→M   | 销毁弹窗                                       |
-| `popover:init`                    | M→P   | 初始化弹窗数据                                 |
-| `popover:relaunch`                | P→M→R | 重新编译                                       |
-| `popover:closed`                  | M→R   | 弹窗关闭通知                                   |
-| `settings:setVisible`             | R→M   | 显示/隐藏设置视图                              |
-| `settings:init`                   | M→P   | 初始化设置面板                                 |
-| `settings:configChanged`          | P→M→R | 编译配置变更通知                               |
-| `settings:projectSettingsChanged` | P→M   | 项目级设置（如 sourcemap）落盘                 |
-| `settings:closed`                 | M→R   | 设置面板关闭通知                               |
-| `workbenchSettings:get`           | R→M   | 读取用户级 workbench 设置                      |
-| `workbenchSettings:save`          | R→M   | 保存 workbench 设置并应用主题                  |
-| `workbenchSettings:setTheme`      | R→M   | 仅切换主题                                     |
-| `workbenchSettings:getCdpStatus`  | R→M   | 读取当前 CDP 端口状态                          |
-| `workbenchSettings:setVisible`    | R→M   | 打开/关闭独立设置窗口                          |
-
-R=渲染进程，M=主进程，P=子 WebContentsView
+IPC 频道名常量集中定义在 `src/shared/ipc-channels.ts`，按域分组（`SimulatorChannel` / `ProjectChannel` / `PanelChannel` / `WorkbenchSettingsChannel` 等）。该文件是频道清单的唯一真相源；此处不再维护手抄表，以免与代码漂移。
 
 ---
 

package/dist/main/app/app.js

@@ -3,6 +3,7 @@ import { app, BrowserWindow, nativeImage } from 'electron';
 import fs from 'fs';
 import path from 'path';
 import { rendererDir as defaultRendererDir, defaultPreloadPath } from '../utils/paths.js';
+import { installThemeBackgroundSync } from '../utils/theme.js';
 import { registerAppLifecycle } from './lifecycle.js';
 import { createMainWindow, wireMainWindowEvents } from '../windows/main-window/index.js';
 import { createWorkbenchContext } from '../services/workbench-context.js';
@@ -198,6 +199,10 @@ export function createWorkbenchApp(config = {}) {
             const mainWindow = createConfiguredMainWindow(config, rendererDir);
             const context = createContext(config, mainWindow, rendererDir);
             context.registry.add(registerAppIpc(context));
+            // One process-wide listener that re-syncs every window's native
+            // backgroundColor on theme change — windows otherwise keep the stale
+            // creation-time color (see installThemeBackgroundSync).
+            context.registry.add(installThemeBackgroundSync());
             registerBuiltinModules(config, context);
             installMenu(config, mainWindow, context);
             const instance = {

package/dist/main/app/bootstrap.js

@@ -1,4 +1,5 @@
 import { app } from 'electron';
+import { DEFAULT_CDP_PORT } from '../../shared/constants.js';
 import { loadWorkbenchSettings } from '../services/settings/index.js';
 /**
  * Suppress EPIPE errors on stdout/stderr.
@@ -35,7 +36,7 @@ export function setupCdpPort() {
         app.commandLine.appendSwitch('remote-debugging-port', String(settings.cdp.port));
     }
     else if (!app.isPackaged) {
-        app.commandLine.appendSwitch('remote-debugging-port', String(settings.cdp.port || 9222));
+        app.commandLine.appendSwitch('remote-debugging-port', String(settings.cdp.port || DEFAULT_CDP_PORT));
     }
 }
 //# sourceMappingURL=bootstrap.js.map

package/dist/main/app/launch.d.ts

@@ -6,5 +6,5 @@ import type { WorkbenchContext } from '../services/workbench-context.js';
  */
 export declare function launch(config?: WorkbenchConfig): Promise<void>;
 export declare function buildDefaultMenu(ctx: WorkbenchContext): void;
-export declare function openSettingsWindow(ctx: Pick<WorkbenchContext, 'workbenchSettingsWindow' | 'mainWindow' | 'rendererDir' | 'notify' | 'windows'>): Promise<void>;
+export declare function openSettingsWindow(ctx: Pick<WorkbenchContext, 'rendererDir' | 'notify' | 'windows'>): Promise<void>;
 //# sourceMappingURL=launch.d.ts.map

package/dist/main/app/launch.js

@@ -13,18 +13,17 @@ export function buildDefaultMenu(ctx) {
     installAppMenu(ctx);
 }
 export async function openSettingsWindow(ctx) {
-    if (!ctx.workbenchSettingsWindow || ctx.workbenchSettingsWindow.isDestroyed()) {
-        const win = await createSettingsWindow(ctx.mainWindow, ctx.rendererDir);
-        ctx.workbenchSettingsWindow = win;
+    let win = ctx.windows.settingsWindow;
+    if (!win || win.isDestroyed()) {
+        win = await createSettingsWindow(ctx.windows.mainWindow, ctx.rendererDir);
         ctx.windows.setSettingsWindow(win);
         wireSettingsWindowEvents(win, () => {
-            ctx.workbenchSettingsWindow = null;
             ctx.windows.setSettingsWindow(null);
         });
     }
-    ctx.workbenchSettingsWindow.show();
-    ctx.workbenchSettingsWindow.focus();
-    ctx.notify.workbenchSettingsInit(ctx.workbenchSettingsWindow, {
+    win.show();
+    win.focus();
+    ctx.notify.workbenchSettingsInit(win, {
         settings: loadWorkbenchSettings(),
     });
 }