cardbuddy 0.6.0 → 0.8.0

package/dist/vendored/components/DebugPanel.vue

@@ -1,11 +1,13 @@
 <!--
-  调试面板：四个标签页。
-  - 接口调用：ynet.callJSAPI / postMessage 的调用流水
+  调试面板：三个标签页。
   - 数据绑定：当前 rootScope 的实时 JSON（初始数据 / 落盘 / 保存高亮比对源）。
     本地调试的所有交互只写「运行态」，不会改这里，故调试中此 tab 保持不变、保存不亮。
   - 组件结构：当前卡片的组件层级树（参考编辑器「结构」面板）
   - 卡片来源：导入来源元数据
 
+  注：「接口调用」tab 已拆出为右侧常驻独立面板（ApiCallPanel.vue），
+  由 App 顶栏按钮控制展开/收起。
+
   运行态（rt.state）已从标签页移出：底部状态栏新增「运行态」指示器，点击在面板内
   弹出可拖拽高度的只读面板，默认收起。rt.state 是运行期交互态（Input 输入 /
   RadioButton·CheckGroup 选择 / globalSet 等只写这里），不污染 rootScope、不触发保存
@@ -24,47 +26,11 @@
         @click="$emit('update:activeTab', t.key)"
       >
         {{ t.label }}
-        <span v-if="t.key === 'api' && apiCalls.length" class="debug__count">{{ apiCalls.length }}</span>
       </button>
     </div>
 
     <div class="debug__body">
-      <template v-if="activeTab === 'api'">
-        <button
-          class="debug__clear"
-          type="button"
-          :disabled="!apiCalls.length"
-          title="清空日志"
-          @click="clearApiLog"
-        >
-          <!-- 垃圾桶图标：清空日志 -->
-          <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
-               stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-trash" /></svg>
-        </button>
-        <div class="debug__placeholder"></div>
-        <p v-if="!apiCalls.length" class="debug__empty">暂无接口调用</p>
-        <ul class="debug__list debug__list--api">
-          <li v-for="(c, i) in apiCalls" :key="i" class="debug__item debug__item--api">
-            <div class="debug__api-row">
-              <span class="debug__kind">{{ c.api }}</span>
-              <button
-                class="debug__copy-ic"
-                type="button"
-                :title="copiedIndex === i ? '已复制 ✓' : '复制数据（不含方法名）'"
-                @click="copyApiPayload(c, i)"
-              >
-                <svg v-if="copiedIndex !== i" width="15" height="15" viewBox="0 0 24 24" fill="none"
-                     stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-copy-sm" /></svg>
-                <span v-else class="debug__copy-ok">✓</span>
-              </button>
-            </div>
-            <!-- 返回数据：结构化折叠树（Chrome 控制台风格） -->
-            <ApiPayloadTree :value="c.payload" />
-          </li>
-        </ul>
-      </template>
-
-      <template v-else-if="activeTab === 'scope'">
+      <template v-if="activeTab === 'scope'">
         <div class="debug__scope-wrap" :class="{ 'debug__scope-wrap--raw': rawMode }">
           <!-- Raw 模式：直接编辑原始 JSON（CodeJar + Prism 语法高亮） -->
           <template v-if="rawMode">
@@ -77,7 +43,9 @@
               <p v-if="rawError" class="debug__raw-err">{{ rawError }}</p>
             </div>
             <div class="debug__scope-foot">
-              <button class="debug__copy" type="button" @click="saveRaw">应用</button>
+              <button class="debug__copy debug__copy--primary" type="button" @click="saveRaw">
+                <svg class="debug__copy-icn" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-check" /></svg>应用
+              </button>
               <button class="debug__copy" type="button" @click="exitRaw">取消</button>
             </div>
           </template>
@@ -88,11 +56,19 @@
             </div>
             <div class="debug__scope-foot">
               <span v-if="copied" class="debug__copied">已复制 ✓</span>
-              <button class="debug__copy" type="button" @click="enterRaw">Raw</button>
-              <button class="debug__copy" type="button" @click="copyScope">复制</button>
+              <button class="debug__copy" type="button" title="切换为 Raw JSON 编辑" @click="enterRaw">
+                <svg class="debug__copy-icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><polyline points="16 18 22 12 16 6" /><polyline points="8 6 2 12 8 18" /></svg>Raw
+              </button>
+              <button class="debug__copy" type="button" @click="copyScope">
+                <svg class="debug__copy-icn" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-copy-sm" /></svg>复制
+              </button>
               <span class="debug__sep"></span>
-              <button class="debug__copy debug__copy--primary" type="button" @click="onCommit">应用</button>
-              <button class="debug__copy" type="button" @click="$emit('reset-import')" title="丢弃内存编辑，从磁盘重新载入（导入优先于编辑）">重置</button>
+              <button class="debug__copy debug__copy--primary" type="button" @click="onCommit">
+                <svg class="debug__copy-icn" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-check" /></svg>应用
+              </button>
+              <button class="debug__copy debug__copy--warn" type="button" @click="$emit('reset-import')" title="丢弃内存编辑，从磁盘重新载入（导入优先于编辑）">
+                <svg class="debug__copy-icn" viewBox="0 0 16 16" aria-hidden="true"><use href="#icon-reset" /></svg>重置
+              </button>
             </div>
           </template>
         </div>
@@ -104,7 +80,14 @@
 
       <template v-else-if="activeTab === 'meta'">
         <div class="debug__meta">
-          <p v-if="!importMeta" class="debug__empty">该卡尚未经「同步远程」导入，无导入来源元数据。<br />本地新建卡 / 未同步卡均如此。</p>
+          <!-- 空状态占位：与 API 调用面板同款（虚线徽章 + 线性图标 + 文案 + 弱提示） -->
+          <div v-if="!importMeta" class="empty-state">
+            <span class="empty-state__badge" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-cloud" /></svg>
+            </span>
+            <p class="debug__empty">暂无卡片来源</p>
+            <p class="empty-state__hint">该卡尚未经「同步远程」导入，无导入来源元数据；本地新建卡 / 未同步卡均如此</p>
+          </div>
           <dl v-else class="debug__meta-list">
             <div class="debug__meta-row">
               <dt>导入接口</dt>
@@ -198,25 +181,41 @@
       并持久化到 localStorage。展示 rt.state 实时 JSON（运行期交互态，只读），不污染绑定数据、
       不触发保存高亮、调试变更永不落盘。
     -->
+    <!--
+      底部弹出面板（运行态 / 事件 / 绑定错误）：Teleport 到 App 的 #app-workside-panels，
+      宽度贯穿中右两栏、紧贴右缘（与共同底栏同一容器机制，贴近 VSCode 底部面板）。
+      defer：目标与 Teleport 同属本应用组件树，挂载时目标尚未插入 document，须等整个
+      应用挂载完成后再解析（Vue 3.5+）。chrome-off 截图模式下禁用 Teleport，回落本面板内。
+    -->
+    <Teleport defer to="#app-workside-panels" :disabled="chromeOff">
     <section
       class="statepanel"
       ref="statePanel"
       v-show="statePanelOpen"
     >
-      <div class="statepanel__head" @mousedown.prevent="startResize">
+      <!-- 顶缘拖拽条：与竖向分隔条同规格（命中 6px / 高亮 3px），仅分割边缘触发 -->
+      <div class="panelhead__edge" :class="{ 'is-dragging': panelDragging }" title="拖拽调整面板高度" @mousedown.prevent="startResize"></div>
+      <div class="statepanel__head">
         <span class="statepanel__title">运行态 <code>rt.state</code></span>
-        <button class="statepanel__close" type="button" title="收起" @click="statePanelOpen = false">✕</button>
+        <button class="statepanel__close" type="button" title="收起" @click="statePanelOpen = false">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="5" x2="19" y2="19" /><line x1="19" y1="5" x2="5" y2="19" /></svg>
+          </button>
       </div>
       <div class="statepanel__tree">
         <JsonTree :data="rt.state" :rt="rt" :editable="false" />
       </div>
     </section>
+    </Teleport>
 
     <!--
-      底部状态栏（仅右侧调试面板内、贴近 VSCode 布局）：左侧「问题」指示器展示
-      绑定错误数，点击在面板底部弹出/收起错误面板；右侧展示当前卡片与卡片总数。
+      底部状态栏：Teleport 到 App 的 #app-workside-bar，作为「调试面板 + 接口调用面板」
+      中右两栏共同的底栏（贴近 VSCode 布局）。defer：目标与 Teleport 同属本应用组件树，
+      挂载时目标尚未插入 document，须等整个应用挂载完成后再解析（Vue 3.5+）。
+      chrome-off 截图模式下禁用 Teleport，回落到本面板内渲染（随面板一起隐藏）。
+      左侧「问题」指示器展示绑定错误数，点击弹出/收起错误面板；右侧展示当前卡片与卡片总数。
     -->
-    <section class="statusbar">
+    <Teleport defer to="#app-workside-bar" :disabled="chromeOff">
+      <section class="statusbar">
       <button
         class="statusbar__item statusbar__item--prob"
         :class="{ 'is-open': statePanelOpen }"
@@ -231,7 +230,7 @@
         class="statusbar__item statusbar__item--prob"
         :class="{ 'is-error': bindingErrors.length, 'is-ok': !bindingErrors.length }"
         type="button"
-        @click="bindingErrors.length && toggleErrorPanel('binding')"
+        @click="toggleErrorPanel('binding')"
         :title="bindingErrors.length ? '查看绑定错误' : '无绑定错误'"
       >
         <span class="statusbar__icon">{{ bindingErrors.length ? '⚠' : '✓' }}</span>
@@ -241,8 +240,7 @@
         class="statusbar__item statusbar__item--prob"
         :class="eventStatusClass"
         type="button"
-        :disabled="!eventCount"
-        @click="eventCount && toggleErrorPanel('event')"
+        @click="toggleErrorPanel('event')"
         :title="eventStatusTitle"
       >
         <span class="statusbar__icon">{{ eventCount ? (eventErrors.length ? '⚠' : '☰') : '✓' }}</span>
@@ -257,17 +255,40 @@
         <svg class="statusbar__conn-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><use href="#icon-link" /></svg>
         <span>{{ devSvcLabel }}</span>
       </span>
-      <span class="statusbar__spacer"></span>
-      <span class="statusbar__item statusbar__item--right">{{ cardId }}</span>
-      <span class="statusbar__item statusbar__item--right">{{ cardCount }} 张卡片</span>
-    </section>
+        <span class="statusbar__spacer"></span>
+        <span class="statusbar__item statusbar__item--right">{{ cardId }}</span>
+        <span class="statusbar__item statusbar__item--right">{{ cardCount }} 张卡片</span>
+      </section>
+    </Teleport>
 
+    <Teleport defer to="#app-workside-panels" :disabled="chromeOff">
     <section class="errpanel" ref="errPanel" v-show="errorPanel">
-      <div class="errpanel__head" @mousedown.prevent="startResize">
+      <!-- 顶缘拖拽条：与竖向分隔条同规格（命中 6px / 高亮 3px），仅分割边缘触发 -->
+      <div class="panelhead__edge" :class="{ 'is-dragging': panelDragging }" title="拖拽调整面板高度" @mousedown.prevent="startResize"></div>
+      <div class="errpanel__head">
         <span class="errpanel__title">{{ errorPanel === 'event' ? '事件面板' : '绑定错误' }}</span>
+        <!-- 事件面板：日志 / 错误 tab 并入头部单行（一次只看一类）；绑定错误面板无 tab -->
+        <div v-if="errorPanel === 'event'" class="errpanel__tabs">
+          <button
+            type="button"
+            class="errpanel__tab"
+            :class="{ 'errpanel__tab--active': eventTab === 'log' }"
+            @click="eventTab = 'log'"
+          >
+            日志<span class="errpanel__tab-count">{{ logs.length }}</span>
+          </button>
+          <button
+            type="button"
+            class="errpanel__tab"
+            :class="{ 'errpanel__tab--active': eventTab === 'err' }"
+            @click="eventTab = 'err'"
+          >
+            错误<span class="errpanel__tab-count" :class="{ 'is-hit': eventErrors.length }">{{ eventErrors.length }}</span>
+          </button>
+        </div>
         <span class="errpanel__actions">
           <button
-            v-if="errorPanel === 'event'"
+            v-if="errorPanel === 'event' && eventTab === 'log'"
             class="errpanel__iconbtn errpanel__clear"
             type="button"
             :disabled="!logs.length"
@@ -275,53 +296,91 @@
             @click="clearEventLogs"
           >
             <!-- 垃圾桶图标：清空日志 -->
-            <svg width="15" height="15" viewBox="0 0 24 24" fill="none"
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none"
                  stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><use href="#icon-trash" /></svg>
           </button>
-          <button class="errpanel__iconbtn errpanel__close" type="button" title="关闭" @click="errorPanel = ''">✕</button>
+          <button class="errpanel__iconbtn errpanel__close" type="button" title="关闭" @click="errorPanel = ''">
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="5" y1="5" x2="19" y2="19" /><line x1="19" y1="5" x2="5" y2="19" /></svg>
+          </button>
         </span>
       </div>
       <div class="errpanel__body">
-        <!-- 事件面板：日志 + 错误 两区块，用于捕获主动日志与执行错误 -->
+        <!-- 事件面板：按当前 tab 只渲染日志或错误一类 -->
         <template v-if="errorPanel === 'event'">
-          <div class="ep__sec-title">日志 ({{ logs.length }})</div>
-          <p v-if="!logs.length" class="debug__empty">无日志 ✓</p>
-          <ul v-else class="debug__list debug__list--log">
-            <li v-for="(l, i) in logs" :key="'l' + i" class="log__item" :class="'log--' + l.level">
-              <span class="log__tag" :class="'log__tag--' + l.level">{{ l.level }}</span>
-              <div class="log__content">
-                <template v-if="l.args && l.args.length">
-                  <LogValue v-for="(a, ai) in l.args" :key="ai" :value="a" />
-                </template>
-                <span v-else class="log__empty">—</span>
-              </div>
-            </li>
-          </ul>
-          <div class="ep__sec-title">错误 ({{ eventErrors.length }})</div>
-          <p v-if="!eventErrors.length" class="debug__empty">无错误 ✓</p>
-          <ul v-else class="debug__list">
-            <li v-for="(e, i) in eventErrors" :key="'e' + i" class="debug__item debug__item--err">
-              <span class="debug__kind">[{{ e.kind }}]</span> {{ e.msg }}
-            </li>
-          </ul>
+          <template v-if="eventTab === 'log'">
+            <!-- 空状态占位：与 API 调用面板同款（虚线徽章 + 线性图标 + 文案 + 弱提示） -->
+            <div v-if="!logs.length" class="empty-state">
+              <span class="empty-state__badge" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <line x1="21" y1="6" x2="3" y2="6" />
+                  <line x1="21" y1="12" x2="3" y2="12" />
+                  <line x1="21" y1="18" x2="3" y2="18" />
+                </svg>
+              </span>
+              <p class="debug__empty">暂无日志</p>
+              <p class="empty-state__hint">卡片事件内 console.* 主动打印的日志会实时显示在这里</p>
+            </div>
+            <ul v-else class="debug__list debug__list--log">
+              <li v-for="(l, i) in logs" :key="'l' + i" class="log__item" :class="'log--' + l.level">
+                <span class="log__time">{{ fmtTime(l.t) }}</span>
+                <span class="log__tag" :class="'log__tag--' + l.level">{{ l.level }}</span>
+                <div class="log__content">
+                  <template v-if="l.args && l.args.length">
+                    <LogValue v-for="(a, ai) in l.args" :key="ai" :value="a" />
+                  </template>
+                  <span v-else class="log__empty">—</span>
+                </div>
+              </li>
+            </ul>
+          </template>
+          <template v-else>
+            <div v-if="!eventErrors.length" class="empty-state">
+              <span class="empty-state__badge" aria-hidden="true">
+                <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                  <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+                  <polyline points="22 4 12 14.01 9 11.01" />
+                </svg>
+              </span>
+              <p class="debug__empty">无事件错误</p>
+              <p class="empty-state__hint">事件动作（customAction / 监听器）执行报错时会记录在这里</p>
+            </div>
+            <ul v-else class="debug__list">
+              <li v-for="(e, i) in eventErrors" :key="'e' + i" class="debug__item debug__item--err">
+                <span class="err__time">{{ fmtTime(e.t) }}</span>
+                <span class="debug__kind">{{ e.kind }}</span>
+                <span class="err__msg">{{ e.msg }}</span>
+              </li>
+            </ul>
+          </template>
         </template>
         <!-- 绑定错误面板：仅错误列表 -->
         <template v-else>
-          <p v-if="!panelErrors.length" class="debug__empty">无错误 ✓</p>
+          <div v-if="!panelErrors.length" class="empty-state">
+            <span class="empty-state__badge" aria-hidden="true">
+              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <path d="M22 11.08V12a10 10 0 1 1-5.93-9.14" />
+                <polyline points="22 4 12 14.01 9 11.01" />
+              </svg>
+            </span>
+            <p class="debug__empty">无绑定错误</p>
+            <p class="empty-state__hint">绑定 / 表达式（bind、vshow、render、refresh）求值失败时会记录在这里</p>
+          </div>
           <ul v-else class="debug__list">
             <li v-for="(e, i) in panelErrors" :key="i" class="debug__item debug__item--err">
-              <span class="debug__kind">[{{ e.kind }}]</span> {{ e.msg }}
+              <span class="err__time">{{ fmtTime(e.t) }}</span>
+              <span class="debug__kind">{{ e.kind }}</span>
+              <span class="err__msg">{{ e.msg }}</span>
             </li>
           </ul>
         </template>
       </div>
     </section>
+    </Teleport>
   </aside>
 </template>
 
 <script>
 import JsonTree from './JsonTree.vue'
-import ApiPayloadTree from './ApiPayloadTree.vue'
 import StructureTree from './StructureTree.vue'
 import NodeInspector from './NodeInspector.vue'
 import EventEditor from './EventEditor.vue'
@@ -355,7 +414,7 @@ function deepEqual(a, b) {
 
 export default {
   name: 'DebugPanel',
-  components: { JsonTree, ApiPayloadTree, StructureTree, NodeInspector, EventEditor, LogValue },
+  components: { JsonTree, StructureTree, NodeInspector, EventEditor, LogValue },
   props: {
     rt: { type: Object, required: true },
     preview: { type: Object, default: null },
@@ -370,29 +429,32 @@ export default {
     // 拖拽移动成功令牌：App 在节点拖拽移动成功后自增，透传给结构树，
     // 触发「选中被拖节点 + 仅展开其祖先链、其余全部折叠」。
     moveCollapseToken: { type: Number, default: 0 },
-    // 当前激活的调试面板 tab（接口调用/绑定数据/组件结构/卡片来源），由 App 统一管理，
+    // 当前激活的调试面板 tab（绑定数据/组件结构/卡片来源），由 App 统一管理，
     // 便于画布 Ctrl/⌘ 点击定位在「组件结构」tab 激活时才生效。
-    activeTab: { type: String, default: 'api' },
+    activeTab: { type: String, default: 'scope' },
     // 本地开发服务连接状态：复用 App 中顶栏「连接」按钮同款状态/配色（devSvcClass/devSvcTitle/devSvcLabel），
     // 供底部状态栏展示「连接图标 + 状态文案」，与右上角按钮实时同步（颜色一致、状态一致）。
     devSvcClass: { type: String, default: 'app__btn--warn' },
     devSvcTitle: { type: String, default: '' },
     devSvcLabel: { type: String, default: '' },
+    // 纯净截图模式（?chrome=off）：禁用状态栏 Teleport，使其留在本面板内随面板隐藏
+    chromeOff: { type: Boolean, default: false },
   },
   data() {
     return {
       copied: false,
       copyTimer: null,
-      // 接口调用 tab：刚复制过数据的条目下标（用于图标变 ✓ 反馈），null=无
-      copiedIndex: null,
-      apiCopyTimer: null,
       // 底部错误面板模式：''（收起） | 'binding'（绑定错误） | 'event'（事件执行错误）
       errorPanel: '',
+      // 事件面板内部 tab：'log'（主动日志） | 'err'（执行错误），打开面板时按是否有错误自动定位
+      eventTab: 'log',
       // 运行态面板：默认收起；点击状态栏「运行态」指示器切换
       statePanelOpen: false,
       // 运行态 / 绑定错误 / 事件 三个底部面板互斥，共用同一高度变量（px）；
       // 可被顶部抓手拖拽调整，并持久化到 localStorage（cardbuddy:debug-panel-height）
       panelH: this.loadPanelH(),
+      // 底部面板头部拖拽进行中：头部高亮与竖向分隔条 .is-dragging 同一语言
+      panelDragging: false,
       // 双击结构树节点后弹出的属性面板目标节点
       inspectingComp: null,
       // 换节点时强制重建面板（内部含 CodeJar 这类托管 DOM 的控件）
@@ -409,24 +471,11 @@ export default {
       tabs: [
         { key: 'scope', label: '绑定数据' },
         { key: 'structure', label: '组件结构' },
-        { key: 'api', label: '接口调用' },
         { key: 'meta', label: '卡片来源' },
       ],
     }
   },
   computed: {
-    // 依赖 apiRev，使接口调用流水在 pushApiCall / clearApiCalls 后实时刷新
-    // （apiCalls 本身是非响应式数组，模板直接读它不会触发重渲染）
-    //
-    // ⚠️ 必须 slice() 返回**新数组**，不能直接 return 原数组引用：
-    // Vue 3.4+ 引入了「computed 值稳定性」——重算后若新值与旧值 Object.is 相等，
-    // 就不再通知下游 effect。原数组是同一个引用，即使 apiRev 自增触发了重算，
-    // 渲染 effect 也收不到通知，界面纹丝不动；直到别的原因（如点 tab 改了 this.tab）
-    // 引起重渲染，才把积压的日志一次性刷出来——这正是「切 tab 才看得到」的成因。
-    apiCalls() {
-      void this.rt.apiRev
-      return this.rt.apiCalls.slice()
-    },
     // 依赖 revision，使 setData 后数据绑定实时刷新
     scopeText() {
       void this.rt.revision
@@ -550,7 +599,11 @@ export default {
       // 再次点击同一指示器则收起；点击另一指示器则切换列表
       this.errorPanel = this.errorPanel === kind ? '' : kind
       // 与运行态面板互斥：点开错误/事件面板即关闭运行态
-      if (this.errorPanel) this.statePanelOpen = false
+      if (this.errorPanel) {
+        this.statePanelOpen = false
+        // 事件面板展开时自动落到更值得关注的一侧：有执行错误看错误，否则看日志
+        if (kind === 'event') this.eventTab = this.eventErrors.length ? 'err' : 'log'
+      }
     },
     /**
      * 拖拽调整底部面板（运行态 / 绑定错误 / 事件）高度：挂在面板头部（已有 .statepanel__head /
@@ -562,6 +615,7 @@ export default {
      */
     startResize(e) {
       if (e.target.closest('button')) return
+      this.panelDragging = true
       const startY = e.clientY
       const startH = this.panelH
       const minH = 120
@@ -581,6 +635,7 @@ export default {
         document.removeEventListener('mousemove', onMove)
         document.removeEventListener('mouseup', onUp)
         this._resizeMove = this._resizeUp = null
+        this.panelDragging = false
         this.savePanelH()
       }
       this._resizeMove = onMove
@@ -595,6 +650,7 @@ export default {
       if (this._resizeMove) document.removeEventListener('mousemove', this._resizeMove)
       if (this._resizeUp) document.removeEventListener('mouseup', this._resizeUp)
       this._resizeMove = this._resizeUp = null
+      this.panelDragging = false
       document.body.style.cursor = ''
       document.body.style.userSelect = ''
     },
@@ -744,15 +800,17 @@ export default {
     onHoverNode(payload) {
       this.$emit('hover-node', payload)
     },
-    /** 清空接口调用流水：调用运行时 clearApiCalls（清空数组 + 自增 apiRev），
-     *  因 apiCalls computed 返回 slice() 新引用，触发实时重渲染 */
-    clearApiLog() {
-      this.rt.clearApiCalls()
-    },
     /** 清空事件主动日志（事件面板「清空日志」按钮）；错误不清除 */
     clearEventLogs() {
       this.rt.clearEventLogs()
     },
+    /** 日志 / 错误行首时间戳：HH:MM:SS 等宽对齐，单行多带一份定位信息 */
+    fmtTime(t) {
+      if (!t) return '--:--:--'
+      const d = new Date(t)
+      const p = (n) => String(n).padStart(2, '0')
+      return p(d.getHours()) + ':' + p(d.getMinutes()) + ':' + p(d.getSeconds())
+    },
     /** 拉取当前卡片的导入来源元数据（Phase E 来源 tab） */
     maybeFetchMeta() {
       if (this.activeTab === 'meta') this.fetchImportMeta()
@@ -784,23 +842,6 @@ export default {
         return iso
       }
     },
-    /** 复制某条接口调用的「返回数据」（即 payload 全文），不含方法名(api) */
-    async copyApiPayload(c, i) {
-      let text = ''
-      try {
-        text = JSON.stringify(c.payload, null, 2)
-      } catch {
-        text = String(c.payload)
-      }
-      const ok = await copyText(text)
-      if (ok) {
-        this.copiedIndex = i
-        if (this.apiCopyTimer) clearTimeout(this.apiCopyTimer)
-        this.apiCopyTimer = setTimeout(() => {
-          if (this.copiedIndex === i) this.copiedIndex = null
-        }, 1500)
-      }
-    },
   },
 }
 </script>

package/dist/vendored/components/EventEditor.vue

@@ -11,7 +11,7 @@
    - 编辑即时（防抖）重建预览（emit apply），「应用」把改动暂存进内存工作副本（currentSchema），落盘由顶栏「保存到本地」负责；不再 emit write-back。
 -->
 <template>
-  <div class="ee-overlay" @click.self="onClose">
+  <div class="ee-overlay">
     <div class="ee-panel">
       <div class="ee-head">
         <span class="ee-title">
@@ -29,7 +29,7 @@
               v-for="evt in eventModel.eventOptions"
               :key="evt.eventKey"
               class="ee-evt"
-              :class="{ 'is-on': isOn(evt) }"
+              :class="{ 'is-on': isOn(evt), 'is-sel': activeKey === evt.eventKey }"
               @click="onSelectEvent(evt)"
             >
               <span class="ee-evt-name" :title="evt.eventDesc || evt.eventName || evt.eventKey">{{ evt.eventName || evt.eventKey }}</span>
@@ -43,6 +43,24 @@
               ><span class="ee-switch__dot"></span></button>
             </div>
           </div>
+          <!-- 帮助图标：与事件项左右靠边、垂直居中；点击弹出当前动作的使用说明 -->
+          <button
+            class="ee-help"
+            type="button"
+            :title="helpOpen ? '关闭使用说明' : '使用说明'"
+            @click.stop="helpOpen = !helpOpen"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor"
+                 stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+              <circle cx="12" cy="12" r="10"></circle>
+              <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
+              <line x1="12" y1="17" x2="12.01" y2="17"></line>
+            </svg>
+          </button>
+          <div v-if="helpOpen" class="ee-help__mask" @click="helpOpen = false"></div>
+          <div v-if="helpOpen" class="ee-help__pop" @click.stop>
+            <p class="ee-help__text">{{ helpText }}</p>
+          </div>
         </aside>
 
         <section class="ee-detail">
@@ -58,7 +76,6 @@
                   @change="onActionType(activeRow, $event)"
                 />
               </div>
-              <p v-if="actionDesc(activeRow.actionType)" class="ee-evt-desc">{{ actionDesc(activeRow.actionType) }}</p>
             </div>
 
             <div class="ee-detail-body">
@@ -108,6 +125,7 @@ export default {
     return {
       eventModel: null,
       activeKey: '',
+      helpOpen: false,
       _t: null,
       _snapshot: null,
       _dirty: false,
@@ -127,6 +145,11 @@ export default {
       if (!this.eventModel || !this.activeKey) return null
       return this.eventModel.rowForEvent(this.activeKey) || null
     },
+    /** 帮助弹层文案：当前动作类型的使用说明；无选中动作时给通用引导 */
+    helpText() {
+      const d = this.activeRow ? this.actionDesc(this.activeRow.actionType) : ''
+      return d || '先在上方开启事件，再选择动作类型并填写参数；编辑即时预览，「应用」写入历史。'
+    },
   },
   watch: {
     comp: {
@@ -141,6 +164,7 @@ export default {
       const sn = this.schemaNode
       this.eventModel = sn ? reactive(new EventEditModel(sn)) : null
       this.activeKey = ''
+      this.helpOpen = false
       this._snapshot = sn ? this.snapshotEventActions(sn) : null
       this._dirty = false
       this._written = false