npm - @ray-js/robot-map-sdk - Versions diffs - 0.0.9-beta.4 → 0.0.10 - Mend

@ray-js/robot-map-sdk 0.0.9-beta.4 → 0.0.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (141) hide show

package/dist-docs/plans/2026-03-04-detected-objects-visibility-design.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Detected objects visibility toggle design | Tuya Robot Map</title>
+    <meta name="description" content="涂鸦扫地机地图组件">
+    <meta name="generator" content="VitePress v1.6.4">
+    <link rel="preload stylesheet" href="/assets/style.DrlDtCux.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    <script type="module" src="/assets/app.Dqj628zE.js"></script>
+    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/assets/chunks/theme.B9FcKggM.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.CBLqO2Q1.js">
+    <link rel="modulepreload" href="/assets/plans_2026-03-04-detected-objects-visibility-design.md.Dqboot5W.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>Tuya Robot Map</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guide/concepts.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/reference/data.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>参考</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/simulator/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>模拟调试</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><!----><div class="VPContent" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>页面导航</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _plans_2026-03-04-detected-objects-visibility-design" data-v-39a288b8><div><h1 id="detected-objects-visibility-toggle-design" tabindex="-1">Detected objects visibility toggle design <a class="header-anchor" href="#detected-objects-visibility-toggle-design" aria-label="Permalink to &quot;Detected objects visibility toggle design&quot;"></a></h1><h2 id="background" tabindex="-1">Background <a class="header-anchor" href="#background" aria-label="Permalink to &quot;Background&quot;"></a></h2><p>The SDK already supports rendering detected objects through <code>drawDetectedObjects()</code>, but it does not provide a runtime switch to hide or show them. This design adds <code>runtime.showDetectedObjects</code> so callers can toggle visibility without changing detected object data.</p><h2 id="goal-and-scope" tabindex="-1">Goal and scope <a class="header-anchor" href="#goal-and-scope" aria-label="Permalink to &quot;Goal and scope&quot;"></a></h2><p>This design defines how to add a runtime visibility toggle for detected objects.</p><ul><li>Add <code>runtime.showDetectedObjects</code> with a default value of <code>true</code>.</li><li>Let consumers hide and show all detected objects at runtime.</li><li>Keep existing detected object data synchronization behavior unchanged.</li></ul><p>Out of scope:</p><ul><li>Per-object visibility flags.</li><li>New public methods for detected object visibility.</li><li>Data deletion when visibility is turned off.</li></ul><h2 id="approaches-considered" tabindex="-1">Approaches considered <a class="header-anchor" href="#approaches-considered" aria-label="Permalink to &quot;Approaches considered&quot;"></a></h2><p>This section summarizes three options and their trade-offs.</p><ol><li><p><strong>Recommended: manager-level runtime subscription</strong></p><ul><li>Add <code>showDetectedObjects</code> to runtime types and defaults.</li><li>Subscribe in <code>DetectedObjectManager</code> and toggle <code>LAYER_DETECTED_OBJECT.visible</code>.</li><li>Pros: aligns with current manager pattern, minimal code impact, no unnecessary object recreation.</li><li>Cons: requires one additional subscription and cleanup path.</li></ul></li><li><p><strong>MapApplication-level runtime dispatch</strong></p><ul><li>Detect runtime changes in <code>MapApplication.updateRuntime()</code> and call a manager method.</li><li>Pros: centralized runtime handling.</li><li>Cons: increases coupling and makes <code>updateRuntime()</code> heavier over time.</li></ul></li><li><p><strong>Per-object subscription in DetectedObject component</strong></p><ul><li>Each detected object subscribes to runtime visibility updates.</li><li>Pros: local component autonomy.</li><li>Cons: scales poorly with many objects and adds avoidable subscription overhead.</li></ul></li></ol><h2 id="selected-design" tabindex="-1">Selected design <a class="header-anchor" href="#selected-design" aria-label="Permalink to &quot;Selected design&quot;"></a></h2><p>The selected design uses option 1: manager-level runtime subscription.</p><h3 id="runtime-schema-and-defaults" tabindex="-1">Runtime schema and defaults <a class="header-anchor" href="#runtime-schema-and-defaults" aria-label="Permalink to &quot;Runtime schema and defaults&quot;"></a></h3><p>Add a new runtime field:</p><ul><li><code>RuntimeConfig.showDetectedObjects: boolean</code></li><li><code>DEFAULT_RUNTIME_CONFIG.showDetectedObjects = true</code></li></ul><p>This keeps backward compatibility because current behavior is to render detected objects by default.</p><h3 id="rendering-control-point" tabindex="-1">Rendering control point <a class="header-anchor" href="#rendering-control-point" aria-label="Permalink to &quot;Rendering control point&quot;"></a></h3><p><code>DetectedObjectManager</code> becomes the single control point for this visibility state.</p><ul><li>On initialization, subscribe to <code>runtime.showDetectedObjects</code>.</li><li>In the callback, read <code>LAYER_DETECTED_OBJECT</code> from <code>AppContainer</code> and set the layer visibility.</li><li>Keep <code>drawDetectedObjects()</code> behavior unchanged for create/update/remove data flow.</li></ul><p>This means visibility control is independent from data synchronization.</p><h3 id="lifecycle-and-cleanup" tabindex="-1">Lifecycle and cleanup <a class="header-anchor" href="#lifecycle-and-cleanup" aria-label="Permalink to &quot;Lifecycle and cleanup&quot;"></a></h3><p><code>DetectedObjectManager.destroy()</code> must also unsubscribe from the new runtime listener to avoid stale callbacks.</p><h2 id="impacted-files" tabindex="-1">Impacted files <a class="header-anchor" href="#impacted-files" aria-label="Permalink to &quot;Impacted files&quot;"></a></h2><p>This change affects the following files.</p><ul><li><code>src/core/@types/index.d.ts</code><ul><li>Add <code>showDetectedObjects</code> to <code>RuntimeConfig</code>.</li></ul></li><li><code>src/core/constant/config.ts</code><ul><li>Add <code>showDetectedObjects: true</code> to <code>DEFAULT_RUNTIME_CONFIG</code>.</li></ul></li><li><code>src/core/managers/DetectedObjectManager.ts</code><ul><li>Add runtime subscription and layer visibility toggle.</li><li>Add unsubscribe cleanup in <code>destroy()</code>.</li></ul></li><li><code>src/app/debugTools/index.ts</code> (optional) <ul><li>Add a debug toggle action for <code>showDetectedObjects</code>.</li></ul></li></ul><h2 id="edge-cases" tabindex="-1">Edge cases <a class="header-anchor" href="#edge-cases" aria-label="Permalink to &quot;Edge cases&quot;"></a></h2><p>The implementation handles these expected cases.</p><ul><li>If the detected object layer is not available yet, the visibility callback exits safely.</li><li>If visibility is off and new detected object data arrives, manager data state still updates, and objects become visible immediately after toggling on.</li></ul><h2 id="verification-strategy" tabindex="-1">Verification strategy <a class="header-anchor" href="#verification-strategy" aria-label="Permalink to &quot;Verification strategy&quot;"></a></h2><p>Per user request, this task does not include a dedicated test execution step.</p><h2 id="next-steps" tabindex="-1">Next steps <a class="header-anchor" href="#next-steps" aria-label="Permalink to &quot;Next steps&quot;"></a></h2><p>After this design is accepted, create an implementation plan and then apply the code changes in the impacted files.</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新于: <time datetime="2026-03-04T11:49:53.000Z" data-v-e98dd255></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_advanced-usage.md\":\"COVLyRkA\",\"guide_concepts.md\":\"CJ87tk-r\",\"guide_getting-started.md\":\"B8rkVqGP\",\"guide_mcp.md\":\"CabCiX8Z\",\"index.md\":\"wTsFvv0N\",\"plans_2026-03-04-detected-objects-visibility-design.md\":\"Dqboot5W\",\"plans_2026-03-04-show-detected-objects-implementation-plan.md\":\"CDWwQtWj\",\"plans_2026-03-10-simulator-debug-design.md\":\"BZibn7uw\",\"plans_2026-03-10-simulator-events-console-design.md\":\"BVmEzCbR\",\"plans_2026-03-10-simulator-events-console-implementation-plan.md\":\"S2f1zs9-\",\"plans_2026-03-10-simulator-runtime-controls-design.md\":\"mqeNaYgg\",\"plans_2026-03-10-simulator-runtime-controls-implementation-plan.md\":\"BXG1UWFt\",\"records_bugs_2026-02-28-fix-pixi-bindgroup-webgpu-snapshot-whitescreen-bugfix.md\":\"BbQpA41Y\",\"records_bugs_2026-03-10-events-drawer-toolbar-scroll-bugfix.md\":\"DbHxPv4D\",\"records_bugs_2026-03-10-simulator-initial-render-layout-bugfix.md\":\"w7--2hvH\",\"records_bugs_2026-03-10-simulator-wheel-scroll-leak-bugfix.md\":\"B6gIem2P\",\"records_plans_2026-03-02-furniture-feature-plan.md\":\"CqSsyNDo\",\"records_plans_2026-03-10-simulator-events-console-plan.md\":\"CfHLEHcc\",\"records_plans_2026-03-10-simulator-last-successful-combo-cache-plan.md\":\"Z2RoK239\",\"records_plans_2026-03-10-simulator-map-parsed-view-plan.md\":\"S9jPz75o\",\"records_plans_2026-03-10-simulator-map-playground-refactor-plan.md\":\"BuILlmcV\",\"records_plans_2026-03-10-simulator-playground-plan.md\":\"CQAR-T7p\",\"records_plans_2026-03-10-simulator-runtime-controls-plan.md\":\"DSVD-qCa\",\"records_plans_2026-03-11-simulator-src-migration-implementation.md\":\"FnB5Cx6R\",\"records_plans_2026-03-11-simulator-src-migration-plan.md\":\"BBfaeRrq\",\"reference_callbacks.md\":\"BIwuGR3s\",\"reference_config.md\":\"DHynhVxG\",\"reference_data.md\":\"B_XpUFrn\",\"reference_methods.md\":\"eH-UCMbE\",\"reference_runtime.md\":\"BEy8BhSZ\",\"reference_types.md\":\"hikiO8Cq\",\"reference_utils.md\":\"Dy6XKVWh\",\"simulator_index.md\":\"CF95Y_c9\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Tuya Robot Map\",\"description\":\"涂鸦扫地机地图组件\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"Tuya Robot Map\",\"outline\":{\"level\":[2,6],\"label\":\"页面导航\"},\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/guide/concepts\",\"activeMatch\":\"^/guide/\"},{\"text\":\"参考\",\"link\":\"/reference/data\",\"activeMatch\":\"^/reference/\"},{\"text\":\"模拟调试\",\"link\":\"/simulator/\",\"activeMatch\":\"^/simulator/\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"指南\",\"items\":[{\"text\":\"基本概念\",\"link\":\"/guide/concepts\"},{\"text\":\"快速开始\",\"link\":\"/guide/getting-started\"},{\"text\":\"进阶使用\",\"link\":\"/guide/advanced-usage\"}]}],\"/reference/\":[{\"text\":\"组件Props\",\"items\":[{\"text\":\"数据\",\"link\":\"/reference/data\"},{\"text\":\"配置\",\"link\":\"/reference/config\"},{\"text\":\"运行时\",\"link\":\"/reference/runtime\"},{\"text\":\"地图事件回调\",\"link\":\"/reference/callbacks\"}]},{\"text\":\"方法\",\"items\":[{\"text\":\"地图方法\",\"link\":\"/reference/methods\"},{\"text\":\"工具方法\",\"link\":\"/reference/utils\"}]},{\"text\":\"类型定义\",\"items\":[{\"text\":\"类型定义\",\"link\":\"/reference/types\"}]}],\"/simulator/\":[{\"text\":\"模拟调试\",\"items\":[{\"text\":\"实时模拟调试\",\"link\":\"/simulator/\"}]}]},\"search\":{\"provider\":\"local\"},\"lastUpdated\":{\"text\":\"最后更新于\",\"formatOptions\":{\"dateStyle\":\"short\",\"timeStyle\":\"short\"}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+  </body>
+</html>

package/dist-docs/plans/2026-03-04-show-detected-objects-implementation-plan.html ADDED Viewed

@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Show detected objects runtime toggle implementation plan | Tuya Robot Map</title>
+    <meta name="description" content="涂鸦扫地机地图组件">
+    <meta name="generator" content="VitePress v1.6.4">
+    <link rel="preload stylesheet" href="/assets/style.DrlDtCux.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    <script type="module" src="/assets/app.Dqj628zE.js"></script>
+    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/assets/chunks/theme.B9FcKggM.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.CBLqO2Q1.js">
+    <link rel="modulepreload" href="/assets/plans_2026-03-04-show-detected-objects-implementation-plan.md.CDWwQtWj.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>Tuya Robot Map</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guide/concepts.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/reference/data.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>参考</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/simulator/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>模拟调试</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><!----><div class="VPContent" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>页面导航</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _plans_2026-03-04-show-detected-objects-implementation-plan" data-v-39a288b8><div><h1 id="show-detected-objects-runtime-toggle-implementation-plan" tabindex="-1">Show detected objects runtime toggle implementation plan <a class="header-anchor" href="#show-detected-objects-runtime-toggle-implementation-plan" aria-label="Permalink to &quot;Show detected objects runtime toggle implementation plan&quot;"></a></h1><blockquote><p><strong>For Claude:</strong> REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.</p></blockquote><p><strong>Goal:</strong> Add <code>runtime.showDetectedObjects</code> to control detected object visibility at runtime, with default behavior unchanged (<code>true</code>).</p><p><strong>Architecture:</strong> Extend runtime schema and defaults, then subscribe to the new runtime field inside <code>DetectedObjectManager</code> to toggle <code>LAYER_DETECTED_OBJECT.visible</code>. Keep <code>drawDetectedObjects()</code> data sync logic unchanged so visibility control stays independent from object CRUD.</p><p><strong>Tech Stack:</strong> TypeScript, PIXI.js 8 layer containers, Valtio <code>subscribeKey</code>, VitePress docs.</p><hr><h2 id="constraints-and-scope" tabindex="-1">Constraints and scope <a class="header-anchor" href="#constraints-and-scope" aria-label="Permalink to &quot;Constraints and scope&quot;"></a></h2><p>This plan follows these constraints:</p><ul><li>Implement only the requested feature.</li><li>Do not add or run dedicated feature tests (explicit user request).</li><li>Keep project-required static verification (<code>npm run lint</code>, <code>npx tsc --noEmit</code>).</li><li>Do not create commits unless the user explicitly requests a commit.</li></ul><h2 id="task-1-add-runtime-type-field" tabindex="-1">Task 1: Add runtime type field <a class="header-anchor" href="#task-1-add-runtime-type-field" aria-label="Permalink to &quot;Task 1: Add runtime type field&quot;"></a></h2><p><strong>Files:</strong></p><ul><li>Modify: <code>src/core/@types/index.d.ts:639-651</code></li></ul><p><strong>Step 1: Add <code>showDetectedObjects</code> to <code>RuntimeConfig</code></strong></p><p>Insert a new boolean field near existing visibility toggles:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6A737D;--shiki-dark:#6A737D;">/** 是否显示 AI 检测物体 */</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showDetectedObjects</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: boolean</span></span></code></pre></div><p><strong>Step 2: Keep property order stable in visibility section</strong></p><p>Place <code>showDetectedObjects</code> after <code>showCarpet</code> so related runtime flags stay clustered.</p><h2 id="task-2-add-runtime-default-value" tabindex="-1">Task 2: Add runtime default value <a class="header-anchor" href="#task-2-add-runtime-default-value" aria-label="Permalink to &quot;Task 2: Add runtime default value&quot;"></a></h2><p><strong>Files:</strong></p><ul><li>Modify: <code>src/core/constant/config.ts:635-651</code></li></ul><p><strong>Step 1: Add default value in <code>DEFAULT_RUNTIME_CONFIG</code></strong></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showCarpet</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showDetectedObjects</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">true</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">showChargingStationRing</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">false</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span></code></pre></div><p><strong>Step 2: Keep backward-compatible default behavior</strong></p><p>Ensure the default is <code>true</code> so existing integrations continue to display objects without additional config.</p><h2 id="task-3-add-manager-level-visibility-subscription" tabindex="-1">Task 3: Add manager-level visibility subscription <a class="header-anchor" href="#task-3-add-manager-level-visibility-subscription" aria-label="Permalink to &quot;Task 3: Add manager-level visibility subscription&quot;"></a></h2><p><strong>Files:</strong></p><ul><li>Modify: <code>src/core/managers/DetectedObjectManager.ts:1-121</code></li></ul><p><strong>Step 1: Add Valtio subscription import</strong></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">import</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> { subscribeKey } </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">from</span><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;"> &#39;valtio/vanilla/utils&#39;</span></span></code></pre></div><p><strong>Step 2: Add unsubscribe holder</strong></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">private </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">unsubscribeShowDetectedObjects</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: (() </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">|</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span></span></code></pre></div><p><strong>Step 3: Initialize layer visibility from runtime in constructor</strong></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">constructor</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(private appService: AppService) {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">applyLayerVisibility</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.appService.runtime.showDetectedObjects)</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.unsubscribeShowDetectedObjects </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> subscribeKey</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.appService.runtime,</span></span>
+<span class="line"><span style="--shiki-light:#032F62;--shiki-dark:#9ECBFF;">    &#39;showDetectedObjects&#39;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    (</span><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">showDetectedObjects</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> boolean</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">) </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=&gt;</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">      this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">applyLayerVisibility</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(showDetectedObjects)</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    },</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  )</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><strong>Step 4: Add private layer visibility helper</strong></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">private </span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">applyLayerVisibility</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(visible: boolean): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  const</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> detectedObjectLayer</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.appService.appContainer.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">getLayer</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    LAYER_DETECTED_OBJECT</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">,</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  )</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (detectedObjectLayer) {</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">    detectedObjectLayer.visible </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> visible</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><p><strong>Step 5: Keep draw flow unchanged</strong></p><p>Do not add early returns in <code>drawDetectedObjects()</code>. Hidden state must not prevent object data from being created or updated.</p><p><strong>Step 6: Clean up subscription in <code>destroy()</code></strong></p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">destroy</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">(): </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">void</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">  if</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> (</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.unsubscribeShowDetectedObjects) {</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">unsubscribeShowDetectedObjects</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">    this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.unsubscribeShowDetectedObjects </span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">=</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> null</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">  }</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">  this</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">.</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;">clearAllDetectedObjects</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">()</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h2 id="task-4-update-runtime-reference-documentation" tabindex="-1">Task 4: Update runtime reference documentation <a class="header-anchor" href="#task-4-update-runtime-reference-documentation" aria-label="Permalink to &quot;Task 4: Update runtime reference documentation&quot;"></a></h2><p><strong>Files:</strong></p><ul><li>Modify: <code>docs/reference/runtime.md</code></li></ul><p><strong>Step 1: Add <code>showDetectedObjects</code> entry</strong></p><p>Add a new section consistent with existing runtime docs style:</p><div class="language-md vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">md</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#005CC5;--shiki-light-font-weight:bold;--shiki-dark:#79B8FF;--shiki-dark-font-weight:bold;">## showDetectedObjects</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">-</span><span style="--shiki-light:#24292E;--shiki-light-font-weight:bold;--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;"> **类型**</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">`boolean`</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">-</span><span style="--shiki-light:#24292E;--shiki-light-font-weight:bold;--shiki-dark:#E1E4E8;--shiki-dark-font-weight:bold;"> **默认值**</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">: </span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;">`true`</span></span>
+<span class="line"></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">是否显示 AI 检测物体。</span></span></code></pre></div><p><strong>Step 2: Update runtime sample block</strong></p><p>Add <code>showDetectedObjects: true</code> to the top sample <code>runtime</code> object so the new field is discoverable.</p><h2 id="task-5-add-traceability-record" tabindex="-1">Task 5: Add traceability record <a class="header-anchor" href="#task-5-add-traceability-record" aria-label="Permalink to &quot;Task 5: Add traceability record&quot;"></a></h2><p><strong>Files:</strong></p><ul><li>Create: <code>docs/records/plans/2026-03-04-detected-objects-visibility-plan.md</code></li></ul><p><strong>Step 1: Write plan record with required sections</strong></p><p>Include:</p><ol><li>Background.</li><li>Goal and scope.</li><li>Chosen approach.</li><li>Impacted files/modules.</li><li>Verification checklist.</li></ol><p><strong>Step 2: Keep record language in English</strong></p><p>Follow repository traceability requirement for plan/bug records.</p><h2 id="task-6-run-required-verification-commands" tabindex="-1">Task 6: Run required verification commands <a class="header-anchor" href="#task-6-run-required-verification-commands" aria-label="Permalink to &quot;Task 6: Run required verification commands&quot;"></a></h2><p><strong>Files:</strong></p><ul><li>Modify: none</li></ul><p><strong>Step 1: Run lint</strong></p><p>Run: <code>npm run lint</code> Expected: no new lint errors.</p><p><strong>Step 2: Run TypeScript check</strong></p><p>Run: <code>npx tsc --noEmit</code> Expected: no new type errors.</p><h2 id="task-7-final-review-checklist" tabindex="-1">Task 7: Final review checklist <a class="header-anchor" href="#task-7-final-review-checklist" aria-label="Permalink to &quot;Task 7: Final review checklist&quot;"></a></h2><p><strong>Files:</strong></p><ul><li>Modify: none</li></ul><p><strong>Step 1: Confirm requested behavior</strong></p><p>Verify by inspection that:</p><ul><li><code>runtime.showDetectedObjects</code> exists and defaults to <code>true</code>.</li><li>Toggling runtime field changes <code>LAYER_DETECTED_OBJECT.visible</code>.</li><li>Existing detected object draw/update/remove logic is unchanged.</li></ul><p><strong>Step 2: Prepare summary for user</strong></p><p>Report changed files and behavior impact with file references.</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新于: <time datetime="2026-03-04T11:49:53.000Z" data-v-e98dd255></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_advanced-usage.md\":\"COVLyRkA\",\"guide_concepts.md\":\"CJ87tk-r\",\"guide_getting-started.md\":\"B8rkVqGP\",\"guide_mcp.md\":\"CabCiX8Z\",\"index.md\":\"wTsFvv0N\",\"plans_2026-03-04-detected-objects-visibility-design.md\":\"Dqboot5W\",\"plans_2026-03-04-show-detected-objects-implementation-plan.md\":\"CDWwQtWj\",\"plans_2026-03-10-simulator-debug-design.md\":\"BZibn7uw\",\"plans_2026-03-10-simulator-events-console-design.md\":\"BVmEzCbR\",\"plans_2026-03-10-simulator-events-console-implementation-plan.md\":\"S2f1zs9-\",\"plans_2026-03-10-simulator-runtime-controls-design.md\":\"mqeNaYgg\",\"plans_2026-03-10-simulator-runtime-controls-implementation-plan.md\":\"BXG1UWFt\",\"records_bugs_2026-02-28-fix-pixi-bindgroup-webgpu-snapshot-whitescreen-bugfix.md\":\"BbQpA41Y\",\"records_bugs_2026-03-10-events-drawer-toolbar-scroll-bugfix.md\":\"DbHxPv4D\",\"records_bugs_2026-03-10-simulator-initial-render-layout-bugfix.md\":\"w7--2hvH\",\"records_bugs_2026-03-10-simulator-wheel-scroll-leak-bugfix.md\":\"B6gIem2P\",\"records_plans_2026-03-02-furniture-feature-plan.md\":\"CqSsyNDo\",\"records_plans_2026-03-10-simulator-events-console-plan.md\":\"CfHLEHcc\",\"records_plans_2026-03-10-simulator-last-successful-combo-cache-plan.md\":\"Z2RoK239\",\"records_plans_2026-03-10-simulator-map-parsed-view-plan.md\":\"S9jPz75o\",\"records_plans_2026-03-10-simulator-map-playground-refactor-plan.md\":\"BuILlmcV\",\"records_plans_2026-03-10-simulator-playground-plan.md\":\"CQAR-T7p\",\"records_plans_2026-03-10-simulator-runtime-controls-plan.md\":\"DSVD-qCa\",\"records_plans_2026-03-11-simulator-src-migration-implementation.md\":\"FnB5Cx6R\",\"records_plans_2026-03-11-simulator-src-migration-plan.md\":\"BBfaeRrq\",\"reference_callbacks.md\":\"BIwuGR3s\",\"reference_config.md\":\"DHynhVxG\",\"reference_data.md\":\"B_XpUFrn\",\"reference_methods.md\":\"eH-UCMbE\",\"reference_runtime.md\":\"BEy8BhSZ\",\"reference_types.md\":\"hikiO8Cq\",\"reference_utils.md\":\"Dy6XKVWh\",\"simulator_index.md\":\"CF95Y_c9\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Tuya Robot Map\",\"description\":\"涂鸦扫地机地图组件\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"Tuya Robot Map\",\"outline\":{\"level\":[2,6],\"label\":\"页面导航\"},\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/guide/concepts\",\"activeMatch\":\"^/guide/\"},{\"text\":\"参考\",\"link\":\"/reference/data\",\"activeMatch\":\"^/reference/\"},{\"text\":\"模拟调试\",\"link\":\"/simulator/\",\"activeMatch\":\"^/simulator/\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"指南\",\"items\":[{\"text\":\"基本概念\",\"link\":\"/guide/concepts\"},{\"text\":\"快速开始\",\"link\":\"/guide/getting-started\"},{\"text\":\"进阶使用\",\"link\":\"/guide/advanced-usage\"}]}],\"/reference/\":[{\"text\":\"组件Props\",\"items\":[{\"text\":\"数据\",\"link\":\"/reference/data\"},{\"text\":\"配置\",\"link\":\"/reference/config\"},{\"text\":\"运行时\",\"link\":\"/reference/runtime\"},{\"text\":\"地图事件回调\",\"link\":\"/reference/callbacks\"}]},{\"text\":\"方法\",\"items\":[{\"text\":\"地图方法\",\"link\":\"/reference/methods\"},{\"text\":\"工具方法\",\"link\":\"/reference/utils\"}]},{\"text\":\"类型定义\",\"items\":[{\"text\":\"类型定义\",\"link\":\"/reference/types\"}]}],\"/simulator/\":[{\"text\":\"模拟调试\",\"items\":[{\"text\":\"实时模拟调试\",\"link\":\"/simulator/\"}]}]},\"search\":{\"provider\":\"local\"},\"lastUpdated\":{\"text\":\"最后更新于\",\"formatOptions\":{\"dateStyle\":\"short\",\"timeStyle\":\"short\"}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+  </body>
+</html>

package/dist-docs/plans/2026-03-10-simulator-debug-design.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Simulator debug design | Tuya Robot Map</title>
+    <meta name="description" content="涂鸦扫地机地图组件">
+    <meta name="generator" content="VitePress v1.6.4">
+    <link rel="preload stylesheet" href="/assets/style.DrlDtCux.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    <script type="module" src="/assets/app.Dqj628zE.js"></script>
+    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/assets/chunks/theme.B9FcKggM.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.CBLqO2Q1.js">
+    <link rel="modulepreload" href="/assets/plans_2026-03-10-simulator-debug-design.md.BZibn7uw.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>Tuya Robot Map</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guide/concepts.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/reference/data.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>参考</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/simulator/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>模拟调试</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><!----><div class="VPContent" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>页面导航</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _plans_2026-03-10-simulator-debug-design" data-v-39a288b8><div><h1 id="simulator-debug-design" tabindex="-1">Simulator debug design <a class="header-anchor" href="#simulator-debug-design" aria-label="Permalink to &quot;Simulator debug design&quot;"></a></h1><h2 id="context" tabindex="-1">Context <a class="header-anchor" href="#context" aria-label="Permalink to &quot;Context&quot;"></a></h2><p>The docs need an embedded simulator panel so developers can paste map payloads and validate rendering without leaving VitePress.</p><h2 id="scope" tabindex="-1">Scope <a class="header-anchor" href="#scope" aria-label="Permalink to &quot;Scope&quot;"></a></h2><ul><li>Add a new top-level docs section: <code>simulator</code>.</li><li>Build a lightweight playground component with a clean UI.</li><li>Support <code>mapHex</code> (required), <code>pathHex</code> (optional), and <code>roomProperties</code> JSON (optional).</li></ul><h2 id="design-choices" tabindex="-1">Design choices <a class="header-anchor" href="#design-choices" aria-label="Permalink to &quot;Design choices&quot;"></a></h2><ol><li>Keep implementation independent from <code>src/app/debugTools</code>.</li><li>Use a browser-only VitePress component and wrap it with <code>ClientOnly</code>.</li><li>Determine map type from input prefix: <ul><li><code>7b22</code>: structured map</li><li>otherwise: raster map</li></ul></li><li>Default sample input uses only <code>mapHex</code> from existing mock data.</li><li>Provide full-screen editing for long payloads.</li></ol><h2 id="ux" tabindex="-1">UX <a class="header-anchor" href="#ux" aria-label="Permalink to &quot;UX&quot;"></a></h2><ul><li>Two-column layout on desktop, stacked layout on mobile.</li><li>Explicit render action instead of auto-render while typing.</li><li>Inline status and error messages with field-level failure context.</li></ul><h2 id="verification" tabindex="-1">Verification <a class="header-anchor" href="#verification" aria-label="Permalink to &quot;Verification&quot;"></a></h2><ul><li>New nav item <code>模拟调试</code> appears next to <code>参考</code>.</li><li><code>/simulator/</code> renders and can draw map from default sample.</li><li>Optional inputs can be empty without blocking map rendering.</li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新于: <time datetime="2026-03-10T06:17:35.000Z" data-v-e98dd255></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_advanced-usage.md\":\"COVLyRkA\",\"guide_concepts.md\":\"CJ87tk-r\",\"guide_getting-started.md\":\"B8rkVqGP\",\"guide_mcp.md\":\"CabCiX8Z\",\"index.md\":\"wTsFvv0N\",\"plans_2026-03-04-detected-objects-visibility-design.md\":\"Dqboot5W\",\"plans_2026-03-04-show-detected-objects-implementation-plan.md\":\"CDWwQtWj\",\"plans_2026-03-10-simulator-debug-design.md\":\"BZibn7uw\",\"plans_2026-03-10-simulator-events-console-design.md\":\"BVmEzCbR\",\"plans_2026-03-10-simulator-events-console-implementation-plan.md\":\"S2f1zs9-\",\"plans_2026-03-10-simulator-runtime-controls-design.md\":\"mqeNaYgg\",\"plans_2026-03-10-simulator-runtime-controls-implementation-plan.md\":\"BXG1UWFt\",\"records_bugs_2026-02-28-fix-pixi-bindgroup-webgpu-snapshot-whitescreen-bugfix.md\":\"BbQpA41Y\",\"records_bugs_2026-03-10-events-drawer-toolbar-scroll-bugfix.md\":\"DbHxPv4D\",\"records_bugs_2026-03-10-simulator-initial-render-layout-bugfix.md\":\"w7--2hvH\",\"records_bugs_2026-03-10-simulator-wheel-scroll-leak-bugfix.md\":\"B6gIem2P\",\"records_plans_2026-03-02-furniture-feature-plan.md\":\"CqSsyNDo\",\"records_plans_2026-03-10-simulator-events-console-plan.md\":\"CfHLEHcc\",\"records_plans_2026-03-10-simulator-last-successful-combo-cache-plan.md\":\"Z2RoK239\",\"records_plans_2026-03-10-simulator-map-parsed-view-plan.md\":\"S9jPz75o\",\"records_plans_2026-03-10-simulator-map-playground-refactor-plan.md\":\"BuILlmcV\",\"records_plans_2026-03-10-simulator-playground-plan.md\":\"CQAR-T7p\",\"records_plans_2026-03-10-simulator-runtime-controls-plan.md\":\"DSVD-qCa\",\"records_plans_2026-03-11-simulator-src-migration-implementation.md\":\"FnB5Cx6R\",\"records_plans_2026-03-11-simulator-src-migration-plan.md\":\"BBfaeRrq\",\"reference_callbacks.md\":\"BIwuGR3s\",\"reference_config.md\":\"DHynhVxG\",\"reference_data.md\":\"B_XpUFrn\",\"reference_methods.md\":\"eH-UCMbE\",\"reference_runtime.md\":\"BEy8BhSZ\",\"reference_types.md\":\"hikiO8Cq\",\"reference_utils.md\":\"Dy6XKVWh\",\"simulator_index.md\":\"CF95Y_c9\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Tuya Robot Map\",\"description\":\"涂鸦扫地机地图组件\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"Tuya Robot Map\",\"outline\":{\"level\":[2,6],\"label\":\"页面导航\"},\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/guide/concepts\",\"activeMatch\":\"^/guide/\"},{\"text\":\"参考\",\"link\":\"/reference/data\",\"activeMatch\":\"^/reference/\"},{\"text\":\"模拟调试\",\"link\":\"/simulator/\",\"activeMatch\":\"^/simulator/\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"指南\",\"items\":[{\"text\":\"基本概念\",\"link\":\"/guide/concepts\"},{\"text\":\"快速开始\",\"link\":\"/guide/getting-started\"},{\"text\":\"进阶使用\",\"link\":\"/guide/advanced-usage\"}]}],\"/reference/\":[{\"text\":\"组件Props\",\"items\":[{\"text\":\"数据\",\"link\":\"/reference/data\"},{\"text\":\"配置\",\"link\":\"/reference/config\"},{\"text\":\"运行时\",\"link\":\"/reference/runtime\"},{\"text\":\"地图事件回调\",\"link\":\"/reference/callbacks\"}]},{\"text\":\"方法\",\"items\":[{\"text\":\"地图方法\",\"link\":\"/reference/methods\"},{\"text\":\"工具方法\",\"link\":\"/reference/utils\"}]},{\"text\":\"类型定义\",\"items\":[{\"text\":\"类型定义\",\"link\":\"/reference/types\"}]}],\"/simulator/\":[{\"text\":\"模拟调试\",\"items\":[{\"text\":\"实时模拟调试\",\"link\":\"/simulator/\"}]}]},\"search\":{\"provider\":\"local\"},\"lastUpdated\":{\"text\":\"最后更新于\",\"formatOptions\":{\"dateStyle\":\"short\",\"timeStyle\":\"short\"}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+  </body>
+</html>

package/dist-docs/plans/2026-03-10-simulator-events-console-design.html ADDED Viewed

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Simulator events console design | Tuya Robot Map</title>
+    <meta name="description" content="涂鸦扫地机地图组件">
+    <meta name="generator" content="VitePress v1.6.4">
+    <link rel="preload stylesheet" href="/assets/style.DrlDtCux.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    <script type="module" src="/assets/app.Dqj628zE.js"></script>
+    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/assets/chunks/theme.B9FcKggM.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.CBLqO2Q1.js">
+    <link rel="modulepreload" href="/assets/plans_2026-03-10-simulator-events-console-design.md.BVmEzCbR.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>Tuya Robot Map</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guide/concepts.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/reference/data.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>参考</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/simulator/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>模拟调试</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><!----><div class="VPContent" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>页面导航</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _plans_2026-03-10-simulator-events-console-design" data-v-39a288b8><div><h1 id="simulator-events-console-design" tabindex="-1">Simulator events console design <a class="header-anchor" href="#simulator-events-console-design" aria-label="Permalink to &quot;Simulator events console design&quot;"></a></h1><h2 id="context" tabindex="-1">Context <a class="header-anchor" href="#context" aria-label="Permalink to &quot;Context&quot;"></a></h2><p>The simulator page now covers source data input and runtime controls, but it still lacks visibility into SDK callbacks. Developers can click rooms and tune runtime values, yet they cannot see which public callbacks the SDK actually fires or inspect the payload shape without writing custom code.</p><p>This design adds an <code>Events</code> console to the simulator so developers can verify SDK callback behavior from the docs UI.</p><h2 id="goals" tabindex="-1">Goals <a class="header-anchor" href="#goals" aria-label="Permalink to &quot;Goals&quot;"></a></h2><ul><li>Record only SDK public callbacks that are meaningful to integrators.</li><li>Show callback names exactly as they appear in <code>MapCallbacks</code>.</li><li>Make event payloads easy to scan, expand, and copy.</li><li>Keep the map preview large and preserve the simulator&#39;s minimal visual style.</li><li>Introduce a reusable UI primitive layer for popovers, tooltips, and menus without forcing a heavy component framework into the docs site.</li></ul><h2 id="non-goals" tabindex="-1">Non-goals <a class="header-anchor" href="#non-goals" aria-label="Permalink to &quot;Non-goals&quot;"></a></h2><ul><li>Do not record simulator-internal actions such as runtime patches, auto-render, cache restore, or example reset.</li><li>Do not build a general-purpose logging system for the SDK.</li><li>Do not add toast notifications for every callback.</li><li>Do not replace all existing simulator controls with third-party primitives in this iteration.</li></ul><h2 id="recommended-approach" tabindex="-1">Recommended approach <a class="header-anchor" href="#recommended-approach" aria-label="Permalink to &quot;Recommended approach&quot;"></a></h2><h3 id="option-1-toast-plus-history" tabindex="-1">Option 1: toast plus history <a class="header-anchor" href="#option-1-toast-plus-history" aria-label="Permalink to &quot;Option 1: toast plus history&quot;"></a></h3><p>Show a transient toast for each callback and also append the event to a history panel.</p><ul><li>Pros: immediate feedback.</li><li>Cons: noisy, distracts from map interaction, and scales poorly during rapid clicks.</li></ul><h3 id="option-2-dedicated-events-console" tabindex="-1">Option 2: dedicated events console <a class="header-anchor" href="#option-2-dedicated-events-console" aria-label="Permalink to &quot;Option 2: dedicated events console&quot;"></a></h3><p>Add a fixed <code>Events</code> panel near the map. Each callback appends a structured record with a short summary and expandable JSON payload.</p><ul><li>Pros: developer-friendly, easy to filter, easy to copy, and aligned with how engineers debug SDK integrations.</li><li>Cons: weaker instant feedback than a toast, but still clear enough in a live panel.</li></ul><h3 id="option-3-console-plus-map-overlay" tabindex="-1">Option 3: console plus map overlay <a class="header-anchor" href="#option-3-console-plus-map-overlay" aria-label="Permalink to &quot;Option 3: console plus map overlay&quot;"></a></h3><p>Combine the event console with a temporary overlay that shows the latest event inside the map preview.</p><ul><li>Pros: strongest immediate feedback.</li><li>Cons: more UI complexity and more risk of visual noise.</li></ul><p>This design uses option 2.</p><h2 id="page-information-architecture" tabindex="-1">Page information architecture <a class="header-anchor" href="#page-information-architecture" aria-label="Permalink to &quot;Page information architecture&quot;"></a></h2><p>The simulator keeps the current two-column layout.</p><ul><li>Left column: <ul><li><code>Data</code></li><li><code>Runtime</code></li><li><code>Inspector</code></li></ul></li><li>Right column: <ul><li>map preview</li><li><code>Events</code></li></ul></li></ul><p>The <code>Events</code> panel belongs with the map, not with the left control column. Events are a result of interacting with the SDK surface, so the event stream should remain visually close to the preview that triggers it.</p><h2 id="event-model" tabindex="-1">Event model <a class="header-anchor" href="#event-model" aria-label="Permalink to &quot;Event model&quot;"></a></h2><p>The event console records only SDK callbacks exposed through <code>MapCallbacks</code>.</p><p>V1 starts with callbacks that already exist and matter in the current simulator flow:</p><ul><li><code>onClickRoom</code></li><li><code>onClickRoomProperties</code></li></ul><p>Each event record has this shape:</p><div class="language-ts vp-adaptive-theme"><button title="Copy Code" class="copy"></button><span class="lang">ts</span><pre class="shiki shiki-themes github-light github-dark vp-code" tabindex="0"><code><span class="line"><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">type</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> SimulatorEventRecord</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> =</span><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;"> {</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  id</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  name</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;"> keyof</span><span style="--shiki-light:#6F42C1;--shiki-dark:#B392F0;"> MapCallbacks</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  timestamp</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> number</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  timeLabel</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  payload</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> unknown</span></span>
+<span class="line"><span style="--shiki-light:#E36209;--shiki-dark:#FFAB70;">  summary</span><span style="--shiki-light:#D73A49;--shiki-dark:#F97583;">:</span><span style="--shiki-light:#005CC5;--shiki-dark:#79B8FF;"> string</span></span>
+<span class="line"><span style="--shiki-light:#24292E;--shiki-dark:#E1E4E8;">}</span></span></code></pre></div><h3 id="field-purpose" tabindex="-1">Field purpose <a class="header-anchor" href="#field-purpose" aria-label="Permalink to &quot;Field purpose&quot;"></a></h3><ul><li><code>id</code>: stable render key.</li><li><code>name</code>: the exact callback name shown to developers.</li><li><code>timestamp</code>: raw sort and copy value.</li><li><code>timeLabel</code>: readable time for the list.</li><li><code>payload</code>: full callback payload used for JSON expansion and copy.</li><li><code>summary</code>: concise text for the collapsed row.</li></ul><h2 id="event-source-strategy" tabindex="-1">Event source strategy <a class="header-anchor" href="#event-source-strategy" aria-label="Permalink to &quot;Event source strategy&quot;"></a></h2><p>The simulator must not infer events from UI state. It should record only what <code>MapApplication</code> actually emits.</p><p>Use wrapped SDK callbacks when creating or updating the map instance:</p><ul><li>inject a recorder-backed <code>events</code> object into the SDK config</li><li>let the SDK invoke callbacks normally</li><li>append a record to the event store inside each callback wrapper</li></ul><p>This guarantees the console reflects the real public API surface rather than a simulator-specific approximation.</p><h2 id="events-panel-behavior" tabindex="-1">Events panel behavior <a class="header-anchor" href="#events-panel-behavior" aria-label="Permalink to &quot;Events panel behavior&quot;"></a></h2><p>The <code>Events</code> panel is a compact developer console.</p><h3 id="toolbar" tabindex="-1">Toolbar <a class="header-anchor" href="#toolbar" aria-label="Permalink to &quot;Toolbar&quot;"></a></h3><p>The header includes:</p><ul><li>callback filter</li><li><code>Pause</code></li><li><code>Clear</code></li><li><code>Copy JSON</code></li></ul><h3 id="list-rows" tabindex="-1">List rows <a class="header-anchor" href="#list-rows" aria-label="Permalink to &quot;List rows&quot;"></a></h3><p>Each row shows:</p><ul><li>callback name</li><li>event time</li><li>summary line</li><li>expand or collapse control for payload JSON</li></ul><h3 id="empty-state" tabindex="-1">Empty state <a class="header-anchor" href="#empty-state" aria-label="Permalink to &quot;Empty state&quot;"></a></h3><p>Show a single neutral message:</p><ul><li><code>No SDK callbacks yet</code></li></ul><h3 id="capacity" tabindex="-1">Capacity <a class="header-anchor" href="#capacity" aria-label="Permalink to &quot;Capacity&quot;"></a></h3><p>Keep only the most recent <code>100</code> records. Drop the oldest record first when the limit is exceeded.</p><h2 id="summary-rules" tabindex="-1">Summary rules <a class="header-anchor" href="#summary-rules" aria-label="Permalink to &quot;Summary rules&quot;"></a></h2><p>Collapsed rows need short summaries that are useful at a glance.</p><p>Examples:</p><ul><li><code>onClickRoom</code> -&gt; <code>roomId=8, name=阳台8</code></li><li><code>onClickRoomProperties</code> -&gt; <code>roomId=8, property clicked</code></li></ul><p>Summary generation stays in a dedicated helper so more callbacks can be added later without bloating the panel component.</p><h2 id="ui-primitive-strategy" tabindex="-1">UI primitive strategy <a class="header-anchor" href="#ui-primitive-strategy" aria-label="Permalink to &quot;UI primitive strategy&quot;"></a></h2><p>The simulator is starting to depend on recurring interaction patterns:</p><ul><li>tooltip</li><li>popover</li><li>dropdown menu</li><li>collapsible content</li><li>custom select behavior</li></ul><p>A full UI framework would add unnecessary visual and structural weight. This iteration introduces <code>reka-ui</code> as a headless primitive layer instead.</p><h3 id="why-reka-ui" tabindex="-1">Why <code>reka-ui</code> <a class="header-anchor" href="#why-reka-ui" aria-label="Permalink to &quot;Why `reka-ui`&quot;"></a></h3><ul><li>It fits Vue 3 well.</li><li>It supplies behavior and accessibility without imposing a visual system.</li><li>It matches the simulator&#39;s existing design direction better than a full UI framework.</li><li>It creates a path to standardize future overlays and menus without forcing a full component rewrite now.</li></ul><h3 id="v1-usage-boundary" tabindex="-1">V1 usage boundary <a class="header-anchor" href="#v1-usage-boundary" aria-label="Permalink to &quot;V1 usage boundary&quot;"></a></h3><p>Only use <code>reka-ui</code> where it solves an actual problem in this iteration:</p><ul><li>event filter menu or select</li><li>event row collapsible payload</li><li>tooltip or popover where the simulator already needs one</li></ul><p>Do not use this iteration to replace every custom simulator control.</p><h2 id="component-structure" tabindex="-1">Component structure <a class="header-anchor" href="#component-structure" aria-label="Permalink to &quot;Component structure&quot;"></a></h2><p>Recommended additions:</p><ul><li><code>useSimulatorEvents.ts</code></li><li><code>eventSummaries.ts</code></li><li><code>SimulatorEventsPanel.vue</code></li><li><code>SimulatorEventItem.vue</code></li></ul><p>Expected integration points:</p><ul><li><code>useMapCanvas.ts</code> or <code>usePlaygroundRender.ts</code> for callback injection</li><li><code>useMapPlayground.ts</code> for page-level state wiring</li><li><code>MapPlayground.vue</code> for layout placement</li></ul><h2 id="data-flow" tabindex="-1">Data flow <a class="header-anchor" href="#data-flow" aria-label="Permalink to &quot;Data flow&quot;"></a></h2><ol><li>The simulator creates the map instance with recorder-backed SDK callbacks.</li><li>The SDK fires a public callback.</li><li>The wrapper creates a <code>SimulatorEventRecord</code>.</li><li><code>useSimulatorEvents()</code> appends the record.</li><li><code>SimulatorEventsPanel.vue</code> reacts and renders the update.</li></ol><p>The source of truth is the event store, not the UI.</p><h2 id="error-handling" tabindex="-1">Error handling <a class="header-anchor" href="#error-handling" aria-label="Permalink to &quot;Error handling&quot;"></a></h2><p>Event recording should fail soft.</p><ul><li>If summary generation fails, store the event with a fallback summary such as <code>payload recorded</code>.</li><li>If JSON copy fails, show a lightweight UI failure state but keep the list.</li><li>If the event filter or payload viewer fails, do not affect the map or runtime controls.</li></ul><h2 id="verification-strategy" tabindex="-1">Verification strategy <a class="header-anchor" href="#verification-strategy" aria-label="Permalink to &quot;Verification strategy&quot;"></a></h2><ul><li>Click a room and confirm <code>onClickRoom</code> appears with the correct payload.</li><li>Click a room property label and confirm <code>onClickRoomProperties</code> appears.</li><li>Pause the console and confirm new callbacks stop appending.</li><li>Clear the console and confirm only event state resets.</li><li>Copy the event log and confirm the output is a valid JSON array.</li><li>Confirm the docs build still passes and the map preview remains visually stable.</li></ul></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新于: <time datetime="2026-03-10T10:32:53.000Z" data-v-e98dd255></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_advanced-usage.md\":\"COVLyRkA\",\"guide_concepts.md\":\"CJ87tk-r\",\"guide_getting-started.md\":\"B8rkVqGP\",\"guide_mcp.md\":\"CabCiX8Z\",\"index.md\":\"wTsFvv0N\",\"plans_2026-03-04-detected-objects-visibility-design.md\":\"Dqboot5W\",\"plans_2026-03-04-show-detected-objects-implementation-plan.md\":\"CDWwQtWj\",\"plans_2026-03-10-simulator-debug-design.md\":\"BZibn7uw\",\"plans_2026-03-10-simulator-events-console-design.md\":\"BVmEzCbR\",\"plans_2026-03-10-simulator-events-console-implementation-plan.md\":\"S2f1zs9-\",\"plans_2026-03-10-simulator-runtime-controls-design.md\":\"mqeNaYgg\",\"plans_2026-03-10-simulator-runtime-controls-implementation-plan.md\":\"BXG1UWFt\",\"records_bugs_2026-02-28-fix-pixi-bindgroup-webgpu-snapshot-whitescreen-bugfix.md\":\"BbQpA41Y\",\"records_bugs_2026-03-10-events-drawer-toolbar-scroll-bugfix.md\":\"DbHxPv4D\",\"records_bugs_2026-03-10-simulator-initial-render-layout-bugfix.md\":\"w7--2hvH\",\"records_bugs_2026-03-10-simulator-wheel-scroll-leak-bugfix.md\":\"B6gIem2P\",\"records_plans_2026-03-02-furniture-feature-plan.md\":\"CqSsyNDo\",\"records_plans_2026-03-10-simulator-events-console-plan.md\":\"CfHLEHcc\",\"records_plans_2026-03-10-simulator-last-successful-combo-cache-plan.md\":\"Z2RoK239\",\"records_plans_2026-03-10-simulator-map-parsed-view-plan.md\":\"S9jPz75o\",\"records_plans_2026-03-10-simulator-map-playground-refactor-plan.md\":\"BuILlmcV\",\"records_plans_2026-03-10-simulator-playground-plan.md\":\"CQAR-T7p\",\"records_plans_2026-03-10-simulator-runtime-controls-plan.md\":\"DSVD-qCa\",\"records_plans_2026-03-11-simulator-src-migration-implementation.md\":\"FnB5Cx6R\",\"records_plans_2026-03-11-simulator-src-migration-plan.md\":\"BBfaeRrq\",\"reference_callbacks.md\":\"BIwuGR3s\",\"reference_config.md\":\"DHynhVxG\",\"reference_data.md\":\"B_XpUFrn\",\"reference_methods.md\":\"eH-UCMbE\",\"reference_runtime.md\":\"BEy8BhSZ\",\"reference_types.md\":\"hikiO8Cq\",\"reference_utils.md\":\"Dy6XKVWh\",\"simulator_index.md\":\"CF95Y_c9\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Tuya Robot Map\",\"description\":\"涂鸦扫地机地图组件\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"Tuya Robot Map\",\"outline\":{\"level\":[2,6],\"label\":\"页面导航\"},\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/guide/concepts\",\"activeMatch\":\"^/guide/\"},{\"text\":\"参考\",\"link\":\"/reference/data\",\"activeMatch\":\"^/reference/\"},{\"text\":\"模拟调试\",\"link\":\"/simulator/\",\"activeMatch\":\"^/simulator/\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"指南\",\"items\":[{\"text\":\"基本概念\",\"link\":\"/guide/concepts\"},{\"text\":\"快速开始\",\"link\":\"/guide/getting-started\"},{\"text\":\"进阶使用\",\"link\":\"/guide/advanced-usage\"}]}],\"/reference/\":[{\"text\":\"组件Props\",\"items\":[{\"text\":\"数据\",\"link\":\"/reference/data\"},{\"text\":\"配置\",\"link\":\"/reference/config\"},{\"text\":\"运行时\",\"link\":\"/reference/runtime\"},{\"text\":\"地图事件回调\",\"link\":\"/reference/callbacks\"}]},{\"text\":\"方法\",\"items\":[{\"text\":\"地图方法\",\"link\":\"/reference/methods\"},{\"text\":\"工具方法\",\"link\":\"/reference/utils\"}]},{\"text\":\"类型定义\",\"items\":[{\"text\":\"类型定义\",\"link\":\"/reference/types\"}]}],\"/simulator/\":[{\"text\":\"模拟调试\",\"items\":[{\"text\":\"实时模拟调试\",\"link\":\"/simulator/\"}]}]},\"search\":{\"provider\":\"local\"},\"lastUpdated\":{\"text\":\"最后更新于\",\"formatOptions\":{\"dateStyle\":\"short\",\"timeStyle\":\"short\"}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+  </body>
+</html>

package/dist-docs/plans/2026-03-10-simulator-events-console-implementation-plan.html ADDED Viewed

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en-US" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width,initial-scale=1">
+    <title>Simulator events console Implementation Plan | Tuya Robot Map</title>
+    <meta name="description" content="涂鸦扫地机地图组件">
+    <meta name="generator" content="VitePress v1.6.4">
+    <link rel="preload stylesheet" href="/assets/style.DrlDtCux.css" as="style">
+    <link rel="preload stylesheet" href="/vp-icons.css" as="style">
+    <script type="module" src="/assets/app.Dqj628zE.js"></script>
+    <link rel="preload" href="/assets/inter-roman-latin.Di8DUHzh.woff2" as="font" type="font/woff2" crossorigin="">
+    <link rel="modulepreload" href="/assets/chunks/theme.B9FcKggM.js">
+    <link rel="modulepreload" href="/assets/chunks/framework.CBLqO2Q1.js">
+    <link rel="modulepreload" href="/assets/plans_2026-03-10-simulator-events-console-implementation-plan.md.S2f1zs9-.lean.js">
+    <script id="check-dark-mode">(()=>{const e=localStorage.getItem("vitepress-theme-appearance")||"auto",a=window.matchMedia("(prefers-color-scheme: dark)").matches;(!e||e==="auto"?a:e==="dark")&&document.documentElement.classList.add("dark")})();</script>
+    <script id="check-mac-os">document.documentElement.classList.toggle("mac",/Mac|iPhone|iPod|iPad/i.test(navigator.platform));</script>
+  </head>
+  <body>
+    <div id="app"><div class="Layout" data-v-5d98c3a5><!--[--><!--]--><!--[--><span tabindex="-1" data-v-0b0ada53></span><a href="#VPContent" class="VPSkipLink visually-hidden" data-v-0b0ada53>Skip to content</a><!--]--><!----><header class="VPNav" data-v-5d98c3a5 data-v-ae24b3ad><div class="VPNavBar" data-v-ae24b3ad data-v-6aa21345><div class="wrapper" data-v-6aa21345><div class="container" data-v-6aa21345><div class="title" data-v-6aa21345><div class="VPNavBarTitle" data-v-6aa21345 data-v-1168a8e4><a class="title" href="/" data-v-1168a8e4><!--[--><!--]--><!----><span data-v-1168a8e4>Tuya Robot Map</span><!--[--><!--]--></a></div></div><div class="content" data-v-6aa21345><div class="content-body" data-v-6aa21345><!--[--><!--]--><div class="VPNavBarSearch search" data-v-6aa21345><!--[--><!----><div id="local-search"><button type="button" class="DocSearch DocSearch-Button" aria-label="Search"><span class="DocSearch-Button-Container"><span class="vp-icon DocSearch-Search-Icon"></span><span class="DocSearch-Button-Placeholder">Search</span></span><span class="DocSearch-Button-Keys"><kbd class="DocSearch-Button-Key"></kbd><kbd class="DocSearch-Button-Key">K</kbd></span></button></div><!--]--></div><nav aria-labelledby="main-nav-aria-label" class="VPNavBarMenu menu" data-v-6aa21345 data-v-dc692963><span id="main-nav-aria-label" class="visually-hidden" data-v-dc692963> Main Navigation </span><!--[--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>首页</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/guide/concepts.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>指南</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/reference/data.html" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>参考</span><!--]--></a><!--]--><!--[--><a class="VPLink link VPNavBarMenuLink" href="/simulator/" tabindex="0" data-v-dc692963 data-v-e56f3d57><!--[--><span data-v-e56f3d57>模拟调试</span><!--]--></a><!--]--><!--]--></nav><!----><div class="VPNavBarAppearance appearance" data-v-6aa21345 data-v-6c893767><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-6c893767 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div><!----><div class="VPFlyout VPNavBarExtra extra" data-v-6aa21345 data-v-bb2aa2f0 data-v-cf11d7a2><button type="button" class="button" aria-haspopup="true" aria-expanded="false" aria-label="extra navigation" data-v-cf11d7a2><span class="vpi-more-horizontal icon" data-v-cf11d7a2></span></button><div class="menu" data-v-cf11d7a2><div class="VPMenu" data-v-cf11d7a2 data-v-b98bc113><!----><!--[--><!--[--><!----><div class="group" data-v-bb2aa2f0><div class="item appearance" data-v-bb2aa2f0><p class="label" data-v-bb2aa2f0>Appearance</p><div class="appearance-action" data-v-bb2aa2f0><button class="VPSwitch VPSwitchAppearance" type="button" role="switch" title aria-checked="false" data-v-bb2aa2f0 data-v-5337faa4 data-v-1d5665e3><span class="check" data-v-1d5665e3><span class="icon" data-v-1d5665e3><!--[--><span class="vpi-sun sun" data-v-5337faa4></span><span class="vpi-moon moon" data-v-5337faa4></span><!--]--></span></span></button></div></div></div><!----><!--]--><!--]--></div></div></div><!--[--><!--]--><button type="button" class="VPNavBarHamburger hamburger" aria-label="mobile navigation" aria-expanded="false" aria-controls="VPNavScreen" data-v-6aa21345 data-v-e5dd9c1c><span class="container" data-v-e5dd9c1c><span class="top" data-v-e5dd9c1c></span><span class="middle" data-v-e5dd9c1c></span><span class="bottom" data-v-e5dd9c1c></span></span></button></div></div></div></div><div class="divider" data-v-6aa21345><div class="divider-line" data-v-6aa21345></div></div></div><!----></header><div class="VPLocalNav empty fixed" data-v-5d98c3a5 data-v-a6f0e41e><div class="container" data-v-a6f0e41e><!----><div class="VPLocalNavOutlineDropdown" style="--vp-vh:0px;" data-v-a6f0e41e data-v-8a42e2b4><button data-v-8a42e2b4>Return to top</button><!----></div></div></div><!----><div class="VPContent" id="VPContent" data-v-5d98c3a5 data-v-1428d186><div class="VPDoc has-aside" data-v-1428d186 data-v-39a288b8><!--[--><!--]--><div class="container" data-v-39a288b8><div class="aside" data-v-39a288b8><div class="aside-curtain" data-v-39a288b8></div><div class="aside-container" data-v-39a288b8><div class="aside-content" data-v-39a288b8><div class="VPDocAside" data-v-39a288b8 data-v-3f215769><!--[--><!--]--><!--[--><!--]--><nav aria-labelledby="doc-outline-aria-label" class="VPDocAsideOutline" data-v-3f215769 data-v-a5bbad30><div class="content" data-v-a5bbad30><div class="outline-marker" data-v-a5bbad30></div><div aria-level="2" class="outline-title" id="doc-outline-aria-label" role="heading" data-v-a5bbad30>页面导航</div><ul class="VPDocOutlineItem root" data-v-a5bbad30 data-v-b933a997><!--[--><!--]--></ul></div></nav><!--[--><!--]--><div class="spacer" data-v-3f215769></div><!--[--><!--]--><!----><!--[--><!--]--><!--[--><!--]--></div></div></div></div><div class="content" data-v-39a288b8><div class="content-container" data-v-39a288b8><!--[--><!--]--><main class="main" data-v-39a288b8><div style="position:relative;" class="vp-doc _plans_2026-03-10-simulator-events-console-implementation-plan" data-v-39a288b8><div><h1 id="simulator-events-console-implementation-plan" tabindex="-1">Simulator events console Implementation Plan <a class="header-anchor" href="#simulator-events-console-implementation-plan" aria-label="Permalink to &quot;Simulator events console Implementation Plan&quot;"></a></h1><blockquote><p><strong>For Claude:</strong> REQUIRED SUB-SKILL: Use superpowers:executing-plans to implement this plan task-by-task.</p></blockquote><p><strong>Goal:</strong> Add a developer-facing <code>Events</code> console to the simulator that records public SDK callbacks and exposes them as a live, filterable event stream.</p><p><strong>Architecture:</strong> Keep event recording separate from source-data rendering and runtime patching. Inject recorder-backed <code>MapCallbacks</code> into the live map instance, store bounded event records in a focused composable, and render them in a dedicated panel near the map preview. Introduce <code>reka-ui</code> only for the new collapsible and menu primitives required by this console.</p><p><strong>Tech Stack:</strong> Vue 3 Composition API, VitePress, TypeScript, existing simulator composables, SDK <code>MapCallbacks</code>, <code>reka-ui</code></p><hr><h3 id="task-1-add-event-facing-simulator-types-and-helpers" tabindex="-1">Task 1: Add event-facing simulator types and helpers <a class="header-anchor" href="#task-1-add-event-facing-simulator-types-and-helpers" aria-label="Permalink to &quot;Task 1: Add event-facing simulator types and helpers&quot;"></a></h3><p><strong>Files:</strong></p><ul><li>Modify: <code>docs/.vitepress/theme/components/simulator/types.ts</code></li><li>Create: <code>docs/.vitepress/theme/components/simulator/eventSummaries.ts</code></li><li>Test: <code>npx tsc --noEmit</code></li></ul><p><strong>Step 1: Add event record and filter types</strong></p><p>Define types for:</p><ul><li><code>SimulatorEventRecord</code></li><li>supported callback names in V1</li><li>event filter values</li><li>event panel action payloads if needed</li></ul><p><strong>Step 2: Add summary helpers</strong></p><p>Create a helper that maps supported callbacks to concise summaries and falls back to a safe default when payload parsing fails.</p><p><strong>Step 3: Run type-check</strong></p><p>Run: <code>npx tsc --noEmit</code> Expected: PASS</p><h3 id="task-2-build-the-event-store-composable" tabindex="-1">Task 2: Build the event store composable <a class="header-anchor" href="#task-2-build-the-event-store-composable" aria-label="Permalink to &quot;Task 2: Build the event store composable&quot;"></a></h3><p><strong>Files:</strong></p><ul><li>Create: <code>docs/.vitepress/theme/components/simulator/useSimulatorEvents.ts</code></li><li>Test: <code>npx tsc --noEmit</code></li></ul><p><strong>Step 1: Create bounded event state</strong></p><p>Implement state for:</p><ul><li>full event list</li><li>paused state</li><li>active callback filter</li><li>derived filtered list</li></ul><p>Limit the stored list to the latest <code>100</code> entries.</p><p><strong>Step 2: Add event actions</strong></p><p>Implement:</p><ul><li><code>pushEvent()</code></li><li><code>clearEvents()</code></li><li><code>toggleEventsPaused()</code></li><li><code>setEventFilter()</code></li><li><code>copyEventsJson()</code></li></ul><p><strong>Step 3: Run type-check</strong></p><p>Run: <code>npx tsc --noEmit</code> Expected: PASS</p><h3 id="task-3-add-recorder-backed-sdk-callbacks" tabindex="-1">Task 3: Add recorder-backed SDK callbacks <a class="header-anchor" href="#task-3-add-recorder-backed-sdk-callbacks" aria-label="Permalink to &quot;Task 3: Add recorder-backed SDK callbacks&quot;"></a></h3><p><strong>Files:</strong></p><ul><li>Modify: <code>docs/.vitepress/theme/components/simulator/useMapCanvas.ts</code></li><li>Modify: <code>docs/.vitepress/theme/components/simulator/usePlaygroundRender.ts</code></li><li>Modify: <code>docs/.vitepress/theme/components/simulator/useMapPlayground.ts</code></li><li>Test: <code>npx tsc --noEmit</code></li></ul><p><strong>Step 1: Define callback wrappers</strong></p><p>Create a recorder-backed <code>events</code> object that wraps supported <code>MapCallbacks</code> and forwards payloads into <code>pushEvent()</code>.</p><p><strong>Step 2: Attach wrappers to the map lifecycle</strong></p><p>Ensure the live map instance always receives the wrapped callbacks after render and after source-data reinitialization.</p><p><strong>Step 3: Keep runtime and event paths separate</strong></p><p>Do not route event recording through runtime patch logic or source-data cache logic.</p><p><strong>Step 4: Run type-check</strong></p><p>Run: <code>npx tsc --noEmit</code> Expected: PASS</p><h3 id="task-4-install-and-integrate-reka-ui-primitives" tabindex="-1">Task 4: Install and integrate <code>reka-ui</code> primitives <a class="header-anchor" href="#task-4-install-and-integrate-reka-ui-primitives" aria-label="Permalink to &quot;Task 4: Install and integrate `reka-ui` primitives&quot;"></a></h3><p><strong>Files:</strong></p><ul><li>Modify: <code>package.json</code></li><li>Modify: lockfile</li><li>Test: <code>npm install</code></li><li>Test: <code>npx tsc --noEmit</code></li></ul><p><strong>Step 1: Add the dependency</strong></p><p>Install <code>reka-ui</code> and update the lockfile.</p><p><strong>Step 2: Verify the docs bundle resolves the package</strong></p><p>Confirm imports compile cleanly in the docs app.</p><p><strong>Step 3: Run type-check</strong></p><p>Run: <code>npx tsc --noEmit</code> Expected: PASS</p><h3 id="task-5-build-the-events-ui-components" tabindex="-1">Task 5: Build the events UI components <a class="header-anchor" href="#task-5-build-the-events-ui-components" aria-label="Permalink to &quot;Task 5: Build the events UI components&quot;"></a></h3><p><strong>Files:</strong></p><ul><li>Create: <code>docs/.vitepress/theme/components/simulator/SimulatorEventsPanel.vue</code></li><li>Create: <code>docs/.vitepress/theme/components/simulator/SimulatorEventItem.vue</code></li><li>Test: <code>npm run lint</code></li></ul><p><strong>Step 1: Build the panel shell</strong></p><p>Render:</p><ul><li>title</li><li>filter control</li><li>pause button</li><li>clear button</li><li>copy button</li><li>empty state</li><li>scrollable event list</li></ul><p><strong>Step 2: Build event rows</strong></p><p>Each row must show:</p><ul><li>callback name</li><li>timestamp label</li><li>summary</li><li>collapsible JSON payload</li></ul><p>Use <code>reka-ui</code> primitives for the collapsible payload and filter control if they materially improve structure and accessibility.</p><p><strong>Step 3: Run lint</strong></p><p>Run: <code>npm run lint</code> Expected: PASS</p><h3 id="task-6-integrate-the-events-panel-into-the-simulator-layout" tabindex="-1">Task 6: Integrate the events panel into the simulator layout <a class="header-anchor" href="#task-6-integrate-the-events-panel-into-the-simulator-layout" aria-label="Permalink to &quot;Task 6: Integrate the events panel into the simulator layout&quot;"></a></h3><p><strong>Files:</strong></p><ul><li>Modify: <code>docs/.vitepress/theme/components/MapPlayground.vue</code></li><li>Modify: <code>docs/.vitepress/theme/components/simulator/SimulatorPreviewPanel.vue</code></li><li>Modify: <code>docs/.vitepress/theme/components/simulator/useMapPlayground.ts</code></li><li>Test: <code>npm run docs:build</code></li></ul><p><strong>Step 1: Add the events panel below the map preview</strong></p><p>Keep the map large and ensure the event console does not collapse the preview area unreasonably.</p><p><strong>Step 2: Pass event state through the page-level composable</strong></p><p>Expose filtered events and event actions cleanly from <code>useMapPlayground()</code>.</p><p><strong>Step 3: Run docs build</strong></p><p>Run: <code>npm run docs:build</code> Expected: PASS</p><h3 id="task-7-verify-the-full-event-flow-and-update-traceability" tabindex="-1">Task 7: Verify the full event flow and update traceability <a class="header-anchor" href="#task-7-verify-the-full-event-flow-and-update-traceability" aria-label="Permalink to &quot;Task 7: Verify the full event flow and update traceability&quot;"></a></h3><p><strong>Files:</strong></p><ul><li>Modify: <code>docs/records/plans/2026-03-10-simulator-events-console-plan.md</code></li><li>Test: <code>npm run lint</code></li><li>Test: <code>npx tsc --noEmit</code></li><li>Test: <code>npm run docs:build</code></li></ul><p><strong>Step 1: Update verification checklist</strong></p><p>Mark completed verification items and note any deferred event types.</p><p><strong>Step 2: Run the full validation suite</strong></p><p>Run: <code>npm run lint</code> Expected: PASS</p><p>Run: <code>npx tsc --noEmit</code> Expected: PASS</p><p>Run: <code>npm run docs:build</code> Expected: PASS</p><p><strong>Step 3: Prepare for implementation handoff</strong></p><p>Ensure the plan remains aligned with the approved design and current simulator structure.</p></div></div></main><footer class="VPDocFooter" data-v-39a288b8 data-v-e257564d><!--[--><!--]--><div class="edit-info" data-v-e257564d><!----><div class="last-updated" data-v-e257564d><p class="VPLastUpdated" data-v-e257564d data-v-e98dd255>最后更新于: <time datetime="2026-03-10T10:32:53.000Z" data-v-e98dd255></time></p></div></div><!----></footer><!--[--><!--]--></div></div></div><!--[--><!--]--></div></div><!----><!--[--><!--]--></div></div>
+    <script>window.__VP_HASH_MAP__=JSON.parse("{\"guide_advanced-usage.md\":\"COVLyRkA\",\"guide_concepts.md\":\"CJ87tk-r\",\"guide_getting-started.md\":\"B8rkVqGP\",\"guide_mcp.md\":\"CabCiX8Z\",\"index.md\":\"wTsFvv0N\",\"plans_2026-03-04-detected-objects-visibility-design.md\":\"Dqboot5W\",\"plans_2026-03-04-show-detected-objects-implementation-plan.md\":\"CDWwQtWj\",\"plans_2026-03-10-simulator-debug-design.md\":\"BZibn7uw\",\"plans_2026-03-10-simulator-events-console-design.md\":\"BVmEzCbR\",\"plans_2026-03-10-simulator-events-console-implementation-plan.md\":\"S2f1zs9-\",\"plans_2026-03-10-simulator-runtime-controls-design.md\":\"mqeNaYgg\",\"plans_2026-03-10-simulator-runtime-controls-implementation-plan.md\":\"BXG1UWFt\",\"records_bugs_2026-02-28-fix-pixi-bindgroup-webgpu-snapshot-whitescreen-bugfix.md\":\"BbQpA41Y\",\"records_bugs_2026-03-10-events-drawer-toolbar-scroll-bugfix.md\":\"DbHxPv4D\",\"records_bugs_2026-03-10-simulator-initial-render-layout-bugfix.md\":\"w7--2hvH\",\"records_bugs_2026-03-10-simulator-wheel-scroll-leak-bugfix.md\":\"B6gIem2P\",\"records_plans_2026-03-02-furniture-feature-plan.md\":\"CqSsyNDo\",\"records_plans_2026-03-10-simulator-events-console-plan.md\":\"CfHLEHcc\",\"records_plans_2026-03-10-simulator-last-successful-combo-cache-plan.md\":\"Z2RoK239\",\"records_plans_2026-03-10-simulator-map-parsed-view-plan.md\":\"S9jPz75o\",\"records_plans_2026-03-10-simulator-map-playground-refactor-plan.md\":\"BuILlmcV\",\"records_plans_2026-03-10-simulator-playground-plan.md\":\"CQAR-T7p\",\"records_plans_2026-03-10-simulator-runtime-controls-plan.md\":\"DSVD-qCa\",\"records_plans_2026-03-11-simulator-src-migration-implementation.md\":\"FnB5Cx6R\",\"records_plans_2026-03-11-simulator-src-migration-plan.md\":\"BBfaeRrq\",\"reference_callbacks.md\":\"BIwuGR3s\",\"reference_config.md\":\"DHynhVxG\",\"reference_data.md\":\"B_XpUFrn\",\"reference_methods.md\":\"eH-UCMbE\",\"reference_runtime.md\":\"BEy8BhSZ\",\"reference_types.md\":\"hikiO8Cq\",\"reference_utils.md\":\"Dy6XKVWh\",\"simulator_index.md\":\"CF95Y_c9\"}");window.__VP_SITE_DATA__=JSON.parse("{\"lang\":\"en-US\",\"dir\":\"ltr\",\"title\":\"Tuya Robot Map\",\"description\":\"涂鸦扫地机地图组件\",\"base\":\"/\",\"head\":[],\"router\":{\"prefetchLinks\":true},\"appearance\":true,\"themeConfig\":{\"siteTitle\":\"Tuya Robot Map\",\"outline\":{\"level\":[2,6],\"label\":\"页面导航\"},\"nav\":[{\"text\":\"首页\",\"link\":\"/\"},{\"text\":\"指南\",\"link\":\"/guide/concepts\",\"activeMatch\":\"^/guide/\"},{\"text\":\"参考\",\"link\":\"/reference/data\",\"activeMatch\":\"^/reference/\"},{\"text\":\"模拟调试\",\"link\":\"/simulator/\",\"activeMatch\":\"^/simulator/\"}],\"sidebar\":{\"/guide/\":[{\"text\":\"指南\",\"items\":[{\"text\":\"基本概念\",\"link\":\"/guide/concepts\"},{\"text\":\"快速开始\",\"link\":\"/guide/getting-started\"},{\"text\":\"进阶使用\",\"link\":\"/guide/advanced-usage\"}]}],\"/reference/\":[{\"text\":\"组件Props\",\"items\":[{\"text\":\"数据\",\"link\":\"/reference/data\"},{\"text\":\"配置\",\"link\":\"/reference/config\"},{\"text\":\"运行时\",\"link\":\"/reference/runtime\"},{\"text\":\"地图事件回调\",\"link\":\"/reference/callbacks\"}]},{\"text\":\"方法\",\"items\":[{\"text\":\"地图方法\",\"link\":\"/reference/methods\"},{\"text\":\"工具方法\",\"link\":\"/reference/utils\"}]},{\"text\":\"类型定义\",\"items\":[{\"text\":\"类型定义\",\"link\":\"/reference/types\"}]}],\"/simulator/\":[{\"text\":\"模拟调试\",\"items\":[{\"text\":\"实时模拟调试\",\"link\":\"/simulator/\"}]}]},\"search\":{\"provider\":\"local\"},\"lastUpdated\":{\"text\":\"最后更新于\",\"formatOptions\":{\"dateStyle\":\"short\",\"timeStyle\":\"short\"}}},\"locales\":{},\"scrollOffset\":134,\"cleanUrls\":false}");</script>
+  </body>
+</html>